:root{--bg: #0a0a0b;--panel: #101113;--tile: #17181a;--tile-edge: #26282b;--ink: #e8e6e1;--ink-dim: #8a8d91;--ink-faint: #4a4d52;--gantt: #7d94a8;--portfolio: #c2a281;--kma: #93a785;--mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--ink);font-family:-apple-system,PingFang SC,Hiragino Sans GB,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}html.has-cursor,html.has-cursor *{cursor:none!important}.stage{position:relative;height:100dvh;overflow:hidden;background:radial-gradient(ellipse 60% 45% at 50% 42%,rgba(125,148,168,.07),transparent),radial-gradient(circle 1px at 24px 24px,#1b1d20 1px,transparent 1px);background-size:auto,48px 48px}.brandtag{position:absolute;top:20px;left:24px;z-index:5;font-family:var(--mono);font-size:11px;color:var(--ink-faint);letter-spacing:1px}.intro{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px}.flapboard{display:flex;gap:8px}.flap{width:clamp(38px,7.2vw,62px);height:clamp(56px,10.4vw,90px);border-radius:8px;background:linear-gradient(180deg,#1b1c1f,#141518 48%,#101113 52%,#17181a);border:1px solid var(--tile-edge);display:grid;place-items:center;position:relative;font-family:var(--mono);font-size:clamp(28px,5.4vw,50px);font-weight:700;color:var(--ink);box-shadow:0 6px 18px #0000008c,inset 0 1px #ffffff0a;overflow:hidden}.flap:after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:#000000bf;box-shadow:0 1px #ffffff0d}.flap.space{background:none;border:none;box-shadow:none;width:clamp(14px,3vw,28px)}.flap span{display:block}.flap.tick span{animation:tick .13s ease-out}@keyframes tick{0%{transform:scaleY(.12);filter:brightness(1.7)}to{transform:scaleY(1)}}.intro .sub{font-family:var(--mono);font-size:clamp(10px,1.6vw,13px);letter-spacing:5px;color:var(--ink-dim);text-align:center}.intro .hint{position:absolute;bottom:30px;font-family:var(--mono);font-size:11px;color:var(--ink-faint);letter-spacing:2px;animation:pulse 2.2s ease-in-out infinite}@keyframes pulse{50%{opacity:.35;transform:translateY(-3px)}}.skip{position:absolute;bottom:26px;right:26px;font-family:var(--mono);font-size:11px;color:var(--ink-faint);background:none;border:none;letter-spacing:1px;padding:6px 8px}.skip:hover,.skip:focus-visible{color:var(--ink-dim);outline:none;text-decoration:underline}.overview{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:88px 32px 72px;overflow-y:auto}.overview .head{text-align:center;margin-bottom:clamp(36px,7vh,64px)}.overview .head .t{font-family:var(--mono);font-size:clamp(20px,3vw,26px);font-weight:700;letter-spacing:6px}.overview .head .d{font-size:12.5px;color:var(--ink-dim);margin-top:10px;letter-spacing:3px}.cards{display:grid;grid-template-columns:1fr;gap:clamp(20px,3.6vh,32px);width:min(720px,100%)}.card{--spot-x: 50%;--spot-y: 30%;--accent: var(--gantt);position:relative;display:grid;grid-template-columns:46px 1fr auto;grid-template-areas:"ico name go" "ico zh   go" "ico desc go" "ico tags go";column-gap:22px;row-gap:2px;align-items:center;border-radius:16px;padding:24px 30px;background:var(--panel);border:1px solid var(--tile-edge);overflow:hidden;transition:transform .25s,border-color .25s;text-decoration:none;color:inherit}.card:hover,.card:focus-visible{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 45%,transparent);outline:none}.card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .3s;background:radial-gradient(360px circle at var(--spot-x) var(--spot-y),color-mix(in srgb,var(--accent) 22%,transparent),transparent 65%)}.card:hover:before,.card:focus-visible:before{opacity:1}.card>*{position:relative}.card .ico{grid-area:ico;align-self:center;width:46px;height:46px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font-size:20px}.card .name{grid-area:name;font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:2px}.card .zh{grid-area:zh;font-size:12.5px;font-weight:550}.card .desc{grid-area:desc;font-size:12px;color:var(--ink-dim);line-height:1.7;margin-top:6px}.card .tags{grid-area:tags;display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.card .tags i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--ink-dim);border:1px solid var(--tile-edge);border-radius:99px;padding:2px 9px}.card .go{grid-area:go;align-self:center;margin-left:18px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.5px;text-align:right}.card .go .arrow{font-size:16px}.cursor{position:fixed;left:0;top:0;width:34px;height:34px;pointer-events:none;z-index:200;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s}.cursor.on{opacity:1}.cursor i{position:absolute;width:9px;height:9px;border:1.5px solid var(--ink);font-style:normal;transition:width .15s,height .15s,border-width .15s}.cursor i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}.cursor i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}.cursor i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}.cursor i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}.cursor:after{content:"";position:absolute;top:50%;left:50%;width:3px;height:3px;background:var(--ink);border-radius:50%;transform:translate(-50%,-50%);transition:opacity .18s}.cursor.snap i{width:12px;height:12px;border-width:2px}.cursor.snap:after{opacity:0}@media(max-width:560px){.overview{padding:64px 18px 48px;justify-content:flex-start}.card{grid-template-columns:40px 1fr;grid-template-areas:"ico name" "ico zh" "desc desc" "tags tags" "go go";padding:20px}.card .ico{width:40px;height:40px;align-self:start}.card .desc{margin-top:10px}.card .go{flex-direction:row;margin:12px 0 0;align-items:center;gap:8px}}@media(prefers-reduced-motion:reduce){.flap.tick span,.intro .hint{animation:none}.card,.card:before,.cursor,.cursor i,.cursor:after{transition:none}}
