:root{--bg:#fbf9ff;--bg-2:#fff;--bg-hero:linear-gradient(180deg, #e9e4ff 0%, #fbf9ff 100%);--text:#231c42;--mute:#6a6487;--line:#e6e1f5;--shadow:#3c288c1f;--primary:#7048e8;--primary-deep:#4c2bbf;--on-primary:#fff;--glow:#7048e840;--c-tips:#0c8599;--c-prompt:#c2255c;--c-tool:#e8590c;--star:#b9aef0;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0e0b24;--bg-2:#18143a;--bg-hero:radial-gradient(ellipse at 50% 120%, #2a1f6b 0%, #0e0b24 65%);--text:#f1eeff;--mute:#a9a3cc;--line:#2c2658;--shadow:#00000073;--primary:#ffd43b;--primary-deep:#c99a00;--on-primary:#1b1438;--glow:#ffd43b40;--c-tips:#66d9e8;--c-prompt:#faa2c1;--c-tool:#ffa94d;--star:#fff;color-scheme:dark}}:root[data-theme=dark]{--bg:#0e0b24;--bg-2:#18143a;--bg-hero:radial-gradient(ellipse at 50% 120%, #2a1f6b 0%, #0e0b24 65%);--text:#f1eeff;--mute:#a9a3cc;--line:#2c2658;--shadow:#00000073;--primary:#ffd43b;--primary-deep:#c99a00;--on-primary:#1b1438;--glow:#ffd43b40;--c-tips:#66d9e8;--c-prompt:#faa2c1;--c-tool:#ffa94d;--star:#fff;color-scheme:dark}:root{--spring:cubic-bezier(.34, 1.56, .64, 1);--spring-big:cubic-bezier(.2, 2.2, .4, 1)}*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--text);margin:0;font:500 16px/1.8 "M PLUS Rounded 1c",system-ui,Hiragino Sans,Yu Gothic UI,sans-serif;transition:background-color .4s,color .4s;overflow-x:clip}a{color:inherit;text-decoration:none}.in{width:min(1120px,100% - 32px);margin-inline:auto}.hd{z-index:20;backdrop-filter:blur(10px);background:color-mix(in srgb, var(--bg) 72%, transparent);border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent);position:sticky;top:0}.hd .in{align-items:center;gap:24px;height:68px;display:flex}.logo{align-items:center;gap:8px;margin-right:auto;font-size:20px;font-weight:800;display:flex}.logo-mark{color:var(--primary);transition:transform .5s var(--spring-big);font-size:26px}.logo:hover .logo-mark{transform:rotate(-14deg)scale(1.2)}.logo-text span{transition:transform .45s var(--spring);transition-delay:calc(var(--i) * 30ms);display:inline-block}.logo:hover .logo-text span{transform:translateY(-4px)}.gn{gap:6px;font-size:15px;display:flex}.gn a{color:var(--mute);border-radius:8px;padding:6px 12px;transition:color .2s,background-color .2s;position:relative}.gn a:hover{color:var(--text);background:color-mix(in srgb, var(--primary) 12%, transparent)}.tools{gap:6px;display:flex}.icon-btn{width:40px;height:40px;color:var(--text);cursor:pointer;transition:transform .4s var(--spring), background-color .2s;background:0 0;border:0;border-radius:10px;place-items:center;display:grid}.icon-btn:hover{background:color-mix(in srgb, var(--primary) 14%, transparent);transform:rotate(-10deg)scale(1.1)}.icon-btn:active{transform:scale(.9)}#soundBtn .mute-x{display:inline}#soundBtn .wave,#soundBtn[aria-pressed=true] .mute-x{display:none}#soundBtn[aria-pressed=true] .wave{display:inline}.moon{display:none}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .sun{display:none}:root:not([data-theme=light]) .moon{display:block}}:root[data-theme=dark] .sun{display:none}:root[data-theme=dark] .moon{display:block}.btn3d{background:var(--primary-deep);border-radius:14px;padding:0;display:inline-block}.btn-front{background:var(--primary);color:var(--on-primary);transition:transform .5s var(--spring);border-radius:14px;padding:14px 28px;font-size:17px;font-weight:800;display:block;transform:translateY(-5px)}.btn3d:hover .btn-front{transition-duration:.25s;transform:translateY(-8px)}.btn3d:active .btn-front{transition-duration:50ms;transform:translateY(-1px)}.btn3d:hover{box-shadow:0 12px 30px var(--glow)}.btn-ghost{border:2px solid var(--line);transition:transform .4s var(--spring), border-color .2s;border-radius:14px;padding:12px 22px;font-weight:700}.btn-ghost:hover{border-color:var(--primary);transform:translateY(-3px)}.kicker{color:var(--primary);background:color-mix(in srgb, var(--primary) 14%, transparent);border-radius:999px;margin:0 0 16px;padding:4px 14px;font-size:14px;font-weight:700;display:inline-block}.page{grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:56px;padding:64px 0 40px;scroll-margin-top:80px;display:grid}.side{gap:28px;display:grid;position:sticky;top:96px}.side-card{background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:22px}.prof{grid-template-columns:auto 1fr;align-items:center;gap:6px 14px;display:grid}.prof-ava{width:56px;height:56px;color:var(--primary);background:color-mix(in srgb, var(--primary) 16%, transparent);transition:transform .6s var(--spring-big);border-radius:50%;place-items:center;font-size:30px;display:grid}.prof:hover .prof-ava{transform:rotate(360deg)}.prof-ava{border:2px solid var(--line);flex-shrink:0;overflow:hidden}.prof-ava img{object-fit:cover;width:100%;height:100%;display:block}.prof b{font-size:17px;display:block}.prof small{color:var(--mute)}.prof p{color:var(--mute);grid-column:1/-1;margin:6px 0 4px;font-size:14px}.mini-btn{color:var(--primary);transition:transform .4s var(--spring);grid-column:1/-1;justify-self:start;font-weight:800}.mini-btn:hover{transform:translate(4px)}.side-sec h3{letter-spacing:.12em;color:var(--mute);margin:0 0 12px;font-size:13px;font-weight:800}.pills{flex-wrap:wrap;gap:8px;display:flex}.pill{color:var(--c);background:color-mix(in srgb, var(--c) 14%, transparent);transition:transform .45s var(--spring-big);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:800}.pill:hover{transform:translateY(-3px)rotate(-3deg)scale(1.06)}.popular{counter-reset:p;gap:12px;margin:0;padding:0;list-style:none;display:grid}.popular li{counter-increment:p;grid-template-columns:28px 1fr;gap:8px;font-size:14px;line-height:1.6;display:grid}.popular li:before{content:counter(p);color:var(--primary);font-size:18px;font-weight:800}.popular a{transition:color .2s}.popular a:hover{color:var(--primary)}.ft{border-top:1px solid var(--line);color:var(--mute);padding:28px 0 48px;font-size:13px}.ft .in{flex-wrap:wrap;justify-content:space-between;gap:10px 24px;display:flex}.ft nav{flex-wrap:wrap;gap:6px 16px;display:flex}.ft a:hover{color:var(--text)}.reveal{opacity:0;transition:opacity .6s ease, transform .7s var(--spring);transition-delay:var(--d,0s);transform:translateY(24px)}.reveal.shown{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation:none!important}.reveal{opacity:1;transform:none}}@media (width<=960px){.page{grid-template-columns:1fr}.side{position:static}}@media (width<=640px){.gn{display:none}}
