*{box-sizing:border-box}html{background:var(--site-bg,#fff)}body{margin:0;background:var(--site-bg,#fff);color:var(--site-fg,#121213);font:14px/1.45 var(--site-font,ui-sans-serif,system-ui);letter-spacing:.005em}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}body>main,.top{width:min(var(--site-content-width,1080px),100%);margin:auto;padding-inline:22px}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(to right,color-mix(in srgb,var(--site-line,#d3d6da) 28%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--site-line,#d3d6da) 22%,transparent) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,#0004,transparent 68%)}
.top{height:64px;display:grid;grid-template-columns:1fr auto;align-items:center;border-bottom:1px solid var(--site-line,#d3d6da);position:relative}.top::after{content:"";position:absolute;left:22px;bottom:-1px;width:42px;height:1px;background:var(--site-accent,#787c7e)}.brand{font-weight:720;letter-spacing:-.025em;font-size:15px}.top-nav{display:flex;align-items:center;gap:3px}.top-nav a,.search-trigger{border:0;background:transparent;color:var(--site-muted,#787c7e);padding:8px 10px;border-radius:6px;transition:background-color 120ms ease,color 120ms ease,transform 120ms cubic-bezier(.2,.8,.2,1)}.top-nav a:hover,.top-nav a[aria-current=page],.search-trigger:hover{color:var(--site-fg);background:var(--site-soft,#eee)}.top-nav a[aria-current=page]{box-shadow:inset 0 -2px var(--site-accent)}.search-trigger{margin-left:3px;font-size:11px}.search-trigger kbd{display:inline-flex;align-items:center;height:24px;padding:0 7px;border:1px solid var(--site-line);border-bottom-color:color-mix(in srgb,var(--site-line) 72%,var(--site-fg));border-radius:5px;background:color-mix(in srgb,var(--site-bg) 75%,var(--site-soft));box-shadow:0 1px 0 color-mix(in srgb,var(--site-fg) 10%,transparent);color:var(--site-muted);font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.search-trigger:hover kbd{color:var(--site-fg);border-color:color-mix(in srgb,var(--site-accent) 55%,var(--site-line))}.top-nav a:active,.search-trigger:active{transform:scale(.96)}
.intro{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:96px;border-bottom:1px solid var(--site-line);position:relative}.intro::before{content:"SYSTEMS / TOOLS / EXPERIMENTS";position:absolute;left:0;bottom:10px;color:color-mix(in srgb,var(--site-muted) 68%,transparent);font:9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}.intro-meta,.intro-links{display:flex;gap:12px;color:var(--site-muted);transform:translateY(-8px)}.intro-meta span+span{padding-left:12px;border-left:1px solid var(--site-line)}.intro-links a{position:relative}.intro-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--site-accent);transition:right 140ms ease}.intro-links a:hover{color:var(--site-fg)}.intro-links a:hover::after{right:0}
section{margin:40px 0 50px}.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:13px;position:relative}h1{font-size:15px;margin:0;font-weight:720;letter-spacing:-.012em}.grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--site-line);border-radius:10px;overflow:hidden;background:color-mix(in srgb,var(--site-bg) 94%,transparent);box-shadow:0 1px 0 color-mix(in srgb,var(--site-fg) 4%,transparent)}.card{min-height:132px;padding:16px;border-right:1px solid var(--site-line);background:transparent;position:relative;overflow:hidden;transition:background-color 120ms ease,transform 160ms cubic-bezier(.2,.8,.2,1)}.card:last-child{border-right:0}.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--site-accent);transform:scaleY(0);transform-origin:bottom;transition:transform 160ms cubic-bezier(.2,.8,.2,1)}.card:hover{background:var(--site-soft);transform:translateY(-1px)}.card:hover::before{transform:scaleY(1)}.card-top{display:flex;align-items:center;gap:10px}.card-top strong{font-size:15px}.game-mark{margin-left:auto;color:var(--site-muted);font:700 10px/1 ui-monospace,monospace;letter-spacing:.08em}.game-mark-0{color:var(--site-accent)}.arrow{margin-left:auto;color:var(--site-muted);font-size:18px;transition:transform 140ms cubic-bezier(.2,.8,.2,1)}.card:hover .arrow,.compact-row:hover .arrow{transform:translateX(3px)}.card-copy{margin-top:39px;color:var(--site-muted);font-size:12px}
.compact-list{border-top:1px solid var(--site-line)}.compact-row{display:grid;grid-template-columns:minmax(0,1fr) auto 16px;align-items:center;gap:12px;min-height:56px;border-bottom:1px solid var(--site-line);padding:7px 8px 7px 4px;position:relative;transition:background-color 120ms ease,transform 150ms cubic-bezier(.2,.8,.2,1)}.compact-row:hover{background:color-mix(in srgb,var(--site-soft) 72%,transparent);transform:translateX(3px)}.compact-name{font-weight:640}.compact-note{display:block;color:var(--site-muted);font-size:11px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-kind{color:var(--site-muted);font-size:9px;text-transform:uppercase;letter-spacing:.1em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--site-line);border-radius:10px;overflow:hidden;background:color-mix(in srgb,var(--site-bg) 96%,transparent)}.project{min-height:174px;padding:18px;border-right:1px solid var(--site-line);border-bottom:1px solid var(--site-line);position:relative;transition:background-color 120ms ease}.project:nth-child(2n){border-right:0}.project:nth-last-child(-n+2){border-bottom:0}.project:hover{background:var(--site-soft)}.project::after{content:"↗";position:absolute;right:17px;bottom:15px;color:var(--site-muted);opacity:0;transform:translate(-4px,4px);transition:opacity 140ms ease,transform 140ms ease}.project:hover::after{opacity:1;transform:none}.project-head{display:flex;justify-content:space-between}.project-name{font-size:16px;font-weight:720}.lang,.metric{color:var(--site-muted);font-size:9px;text-transform:uppercase;letter-spacing:.09em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.project p{max-width:48ch;color:var(--site-muted);margin:32px 0 10px}
.lab-intro{color:var(--site-muted);margin-top:28px}.lab-intro h1{color:var(--site-fg);font-size:34px;letter-spacing:-.04em}.lab-grid{display:grid;gap:14px;margin-bottom:64px}.lab-panel{scroll-margin-top:20px;border:1px solid var(--site-line);border-radius:10px;overflow:hidden;background:color-mix(in srgb,var(--site-bg) 96%,transparent);transition:border-color 140ms ease,transform 160ms cubic-bezier(.2,.8,.2,1)}.lab-panel:focus-within{border-color:color-mix(in srgb,var(--site-accent) 70%,var(--site-line));transform:translateY(-1px)}.lab-panel h2{font-size:13px;margin:0;padding:12px 14px;border-bottom:1px solid var(--site-line)}.lab-input{width:100%;border:0;border-bottom:1px solid var(--site-line);background:transparent;color:inherit;padding:13px 14px;outline:none;resize:vertical}.lab-pair{display:grid;grid-template-columns:1fr 1fr}.lab-pair .lab-input:first-child{border-right:1px solid var(--site-line)}.lab-output{margin:0;padding:15px;overflow:auto;color:var(--site-muted);font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}
.detail{max-width:820px}.backline{display:inline-flex;align-items:center;gap:7px;margin:30px 0;color:var(--site-muted);padding:6px 0}.backline:hover{color:var(--site-fg)}.project-detail{margin-bottom:70px}.project-detail>h1{font-size:42px;letter-spacing:-.05em}.eyebrow{color:var(--site-muted);font:9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.12em}.dek{font-size:18px;color:var(--site-muted);max-width:58ch}.fact-strip{display:flex;flex-wrap:wrap;gap:1px;margin:30px 0}.fact-strip span{background:var(--site-soft);padding:8px 11px;font:10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}.detail-copy{border-top:1px solid var(--site-line);padding-top:22px}.detail-copy h2{font-size:13px}.detail-copy>p{max-width:68ch;color:var(--site-muted);font-size:15px;line-height:1.75}
@media(max-width:700px){body>main,.top{padding-inline:12px}.top{height:56px}.top::after{left:12px}.intro{min-height:80px}.intro::before{bottom:8px}.intro-meta{display:none}.intro-links{transform:translateY(-7px)}.grid,.project-grid{grid-template-columns:1fr}.card,.project{border-right:0;border-bottom:1px solid var(--site-line)}.card:last-child,.project:last-child{border-bottom:0}.project:nth-last-child(2){border-bottom:1px solid var(--site-line)}.compact-note{max-width:68vw}.row-kind{display:none}.lab-pair{grid-template-columns:1fr}.lab-pair .lab-input:first-child{border-right:0}.project-detail>h1{font-size:34px}.search-trigger{font-size:0}.search-trigger kbd{font-size:0;width:28px;padding:0}.search-trigger kbd::after{content:'⌕';font-size:16px}}
@media(prefers-reduced-motion:reduce){.card,.compact-row,.project,.arrow,.intro-links a::after,.lab-panel{transition:none!important}}

/* Game names are part of each game's visual identity, not generic card labels. */
.game-title{display:flex;align-items:center;min-height:28px}.game-wordle{gap:3px}.game-wordle i{display:grid;place-items:center;width:25px;height:25px;background:#6aaa64;color:#fff;font:800 12px/1 var(--site-font,system-ui);font-style:normal;text-transform:uppercase}.game-wordle i:nth-child(2),.game-wordle i:nth-child(5){background:#c9b458}.game-wordle i:nth-child(3){background:#787c7e}.game-keybr{position:relative;gap:0;font:600 22px/1.2 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;letter-spacing:-.04em}.game-keybr i{font-style:normal}.game-keybr .keybr-hit{color:#797979}.game-keybr .keybr-miss{color:#f33}.game-keybr .keybr-miss-bg{color:#fff;background:#f33;padding:0 2px;margin:0 1px}.game-keybr .keybr-cursor{width:2px;height:1.05em;margin-left:2px;background:#797979;animation:keybr-caret 1s steps(1,end) infinite}html[data-kb-theme=dark] .game-keybr .keybr-hit{color:#9f9999}html[data-kb-theme=dark] .game-keybr .keybr-miss{color:#9b4545}html[data-kb-theme=dark] .game-keybr .keybr-miss-bg{background:#9b4545;color:#121213}html[data-kb-theme=dark] .game-keybr .keybr-cursor{background:#9f9999}@keyframes keybr-caret{50%{opacity:0}}.game-chain{gap:7px;font:750 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}.game-chain svg{width:52px;height:22px;overflow:visible}.game-chain .chain-link,.game-chain .chain-burst{fill:none;stroke:var(--site-line);stroke-width:2;stroke-linecap:square}.game-chain .chain-cell{stroke:var(--site-bg);stroke-width:1.5}.game-chain .chain-cell-a{fill:#6aaa64}.game-chain .chain-cell-core{fill:#c9b458}.game-chain .chain-cell-b{fill:#d46a6a}.game-card-2:hover .chain-cell-core{animation:chain-core 520ms var(--site-ease,cubic-bezier(.2,.8,.2,1)) both}.game-card-2:hover .chain-cell-a{animation:chain-left 520ms var(--site-ease,cubic-bezier(.2,.8,.2,1)) both}.game-card-2:hover .chain-cell-b{animation:chain-right 520ms var(--site-ease,cubic-bezier(.2,.8,.2,1)) both}@keyframes chain-core{50%{transform:translateY(-2px);transform-origin:center}}@keyframes chain-left{50%{transform:translateX(-3px)}}@keyframes chain-right{50%{transform:translateX(3px)}}@media(prefers-reduced-motion:reduce){.game-keybr b,.game-chain .chain-cell{animation:none!important}}@media(max-width:440px){.game-wordle i{width:22px;height:22px;font-size:10px}.game-chain{font-size:10px;gap:5px}.game-chain svg{width:40px}}
.top-icon{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;color:var(--site-muted);padding:7px}.top-icon:hover,.top-icon:focus-visible{background:var(--site-soft);color:var(--site-fg)}.top-icon svg{width:18px;height:18px}