/*
[INPUT]: 页面语义结构、展开状态与首页生命游戏Canvas
[OUTPUT]: 居中黑色窄栏、单行标语、交互时链接下划线、焦点、语言按钮操作反馈、页脚光学对齐与背景分层
[POS]: 共享视觉；不引入框架
[PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
*/
:root{color-scheme:dark;--bg:#090a0b;--ink:#e5e5e5;--muted:#969a9e;--line:#25272a;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"PingFang SC","Microsoft YaHei",monospace;font-synthesis:none}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{min-height:100%;background:var(--bg)}
body{margin:0;min-height:100svh;min-height:100dvh;display:flex;flex-direction:column;padding:32px;color:var(--ink);background:radial-gradient(ellipse 340px 390px at 50% 50%,#10121480,transparent 100%);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
/* 可用空间由auto margin均分；内容超出窗口时边距归零，页面自然滚动。 */
.home{width:min(336px,100%);flex:none;margin:auto;padding:0}
h1{font-size:22px;line-height:1.3;font-weight:500;letter-spacing:-.045em;margin:0}
.period{color:var(--muted)}
.intro{font-size:13px;line-height:1.7;margin:7px 0 0;color:var(--muted);letter-spacing:.015em;max-width:31ch}
.navigation{position:relative;margin:36px 0 0}
.nav-row{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:48px;font-size:15px;letter-spacing:.015em;cursor:pointer;color:#b5b8bb;touch-action:manipulation;border-radius:3px;transition:color 180ms ease,background-color 180ms ease;isolation:isolate;gap:16px}
.project{min-height:64px;color:var(--ink)}
.project-entry{display:flex;flex-direction:column;justify-content:center;min-height:64px;color:#b5b8bb;font-size:15px;line-height:1.6}
.project-title{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.project-status{font-family:system-ui,-apple-system,"PingFang SC",sans-serif;font-size:10px;color:var(--muted);letter-spacing:.01em}
.project-name{display:block}.project-note{display:block;color:var(--muted);font-size:11px;line-height:1.8;margin-top:4px;letter-spacing:0}
.nav-row::before{content:"";position:absolute;inset:4px -12px;border-radius:3px;background:radial-gradient(110px circle at var(--pointer-x,50%) var(--pointer-y,50%),#ffffff08,transparent);opacity:0;z-index:-1;transition:opacity 180ms ease}
.nav-row:hover,.nav-row:focus-visible{color:var(--ink)}
.nav-row:hover::before,.nav-row:focus-visible::before{opacity:1}
a:focus-visible,button:focus-visible{outline:1px solid #a8aeb6;outline-offset:5px}
.arrow{font-size:16px;color:#9ba3ad;opacity:0;transform:translate(-3px,3px);transition:opacity 180ms ease,transform 220ms cubic-bezier(.2,.8,.2,1);flex-shrink:0}
.nav-row:hover .arrow,.nav-row:focus-visible .arrow{opacity:1;transform:translate(0,0)}
.nav-row:active{background:#ffffff07}.nav-row:active .arrow{transform:translate(1px,-1px)}
.signal{position:absolute;top:0;left:-17px;width:3px;height:3px;border-radius:50%;background:#b0b7c0;opacity:0;pointer-events:none;will-change:transform;transition:opacity 160ms ease}
footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin:32px 0 0;padding:15px 0 0;font-size:11px;line-height:1.5;color:var(--muted)}
.social{display:inline-flex;align-items:center;gap:8px;min-height:44px}.social:hover,.social:focus-visible{color:var(--ink)}.social img{display:block;flex-shrink:0;width:13px;height:13px;opacity:.72;transition:opacity 180ms ease}.social:hover img,.social:focus-visible img{opacity:1}.x-social img{width:15px;height:15px}
.language{display:flex;gap:0}.language[hidden]{display:none}
.language button{font:inherit;background:none;border:0;color:var(--muted);min-width:44px;min-height:44px;padding:0;display:flex;align-items:center;justify-content:flex-end;cursor:pointer;touch-action:manipulation;border-radius:3px;transition:color 180ms ease,background-color 180ms ease}
.language button span{display:inline-block;text-underline-offset:4px;transition:transform 150ms cubic-bezier(.25,.46,.45,.94)}
.language button:focus-visible,.language button:active{background:#ffffff07;color:var(--ink)}
.language button:focus-visible span,.language button:active span{text-decoration:underline}
.language button:active span{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.language button:hover{background:#ffffff07;color:var(--ink)}.language button:hover span{text-decoration:underline}}
@media(prefers-reduced-motion:reduce){.language button:active span{transform:none}}
.back{display:inline-flex;align-items:center;min-height:44px;margin-bottom:20px;font-size:12px;color:var(--muted)}.back:hover{color:var(--ink)}
.articles{margin:32px 0;font-size:13px;line-height:1.8;color:var(--muted)}
@media(max-width:480px){.intro{max-width:none}.project-note{max-width:26ch}}
@media(prefers-reduced-motion:reduce){*,*::before{transition:none!important;scroll-behavior:auto!important}.arrow{transform:none!important}.signal{will-change:auto}}
/* Compact default; each disclosure expands in normal document flow. */
.project-item{position:relative}
.project-heading{display:flex;align-items:center;gap:8px}
.project-heading>.nav-row{flex:1;min-width:0}
.nav-row{text-decoration:none;text-decoration-thickness:1px;text-underline-offset:5px;min-height:44px}
.preview-toggle{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:0;background:none;border-radius:3px;font:inherit;font-size:16px;color:#a6abb1;cursor:pointer;touch-action:manipulation}
.preview-toggle:hover,.preview-toggle:focus-visible{color:var(--ink);background:#ffffff07}
.preview-toggle span{transition:transform 200ms ease}
.preview-toggle[aria-expanded="true"] span{transform:rotate(45deg)}
.project-preview{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 220ms cubic-bezier(.2,.8,.2,1),opacity 180ms ease}
.project-item[data-shown="true"] .project-preview{grid-template-rows:1fr;opacity:1}
.preview-inner{min-height:0;overflow:hidden}
.preview-copy{padding:4px 0 18px;font-family:system-ui,-apple-system,"PingFang SC",sans-serif;font-size:12px;color:var(--muted);line-height:1.8}
.preview-copy p{margin:0 0 6px}
.visit{text-decoration:none;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.project-section{margin:32px 0;font-family:system-ui,-apple-system,"PingFang SC",sans-serif;font-size:13px;line-height:1.8;color:var(--muted)}
.project-section h2{font:inherit;font-size:17px;color:var(--ink);margin:0 0 12px}.project-section p{margin:8px 0}.availability{font-size:12px}
@media(prefers-reduced-motion:reduce){.project-preview,.preview-toggle span{transition:none}}
/* 实心GitHub以13px配稀疏X的15px；图标减弱亮度，语言字面贴齐右边界，点击区保持44px。 */
footer{justify-content:flex-start;gap:18px}.language{margin-left:auto}.x-social{justify-content:center;min-width:44px;margin-left:-10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.preview-toggle[hidden]{display:none}

.project-label{display:flex;align-items:baseline;gap:10px;flex:1;min-width:0;font-size:15px;color:#b5b8bb;line-height:1.6;cursor:default;flex-wrap:wrap}

/* 下划线表达真实链接的交互状态；筹备中/开发中文字不模拟链接。 */
a.nav-row:focus-visible,a.nav-row:active,a.visit:focus-visible,a.visit:active{text-decoration:underline}
@media(hover:hover) and (pointer:fine){a.nav-row:hover,a.visit:hover{text-decoration:underline}}

/* 首页背景不接管点击；内容背后的渐变保护文字对比。 */
.has-life{isolation:isolate}
.life-background{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-2;opacity:.85}
.has-life::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 310px 380px at 50% 50%,#090a0bee 25%,#090a0b99 65%,transparent 100%)}
@media(max-width:480px){.has-life::before{background:radial-gradient(ellipse 220px 350px at 50% 50%,#090a0bee 25%,#090a0b99 65%,transparent 100%)}}

/* 标语是次级说明，保持一行，避免旧31ch限制把英文末词挤下去。 */
.has-life .intro{font-size:12px;letter-spacing:0;max-width:none;white-space:nowrap}