:root{--bg:#0e1116;--panel:#161b22;--line:#262d38;--fg:#e6edf3;--mut:#8b96a5;--acc:#7cf5b0;--warn:#ffb86b}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.75 -apple-system,"Hiragino Sans","Noto Sans JP",sans-serif}
a{color:inherit;text-decoration:none}code{font-family:ui-monospace,Menlo,monospace;background:#1f2630;padding:.1em .4em;border-radius:4px;font-size:.9em}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:.8rem clamp(1rem,4vw,3rem);background:#0e1116e6;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font-family:ui-monospace,Menlo,monospace;font-weight:700}.dot{display:inline-block;width:.7em;height:.7em;border-radius:50%;background:var(--acc);margin-right:.5em;animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
nav a{margin-left:1.4rem;color:var(--mut);font-size:.92rem}nav a:hover{color:var(--acc)}
main{max-width:1080px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
section{padding:3.5rem 0}
h1{font-size:clamp(1.9rem,5vw,3.2rem);line-height:1.3;margin:.3em 0}.hl{color:var(--acc)}
h2{font-size:1.6rem;margin:0 0 1.4rem}h2 small{font-size:.8rem;color:var(--mut);font-weight:400;margin-left:.8rem}
h3{font-size:1rem;color:var(--acc);margin:1.4rem 0 .4rem}h3.mt{margin-top:2rem}
.kicker{color:var(--acc);font-family:ui-monospace,monospace;font-size:.9rem;margin:0}
.lede{color:var(--mut);max-width:44em}.lede strong{color:var(--fg)}
.hero{padding-top:4rem}
.hero-term{margin:1.6rem 0;background:#0a0d12;border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem;max-width:760px;font:13px/1.7 ui-monospace,Menlo,monospace}
.hero-term .scr{white-space:pre-wrap;margin:0;color:#c9d4e0;max-height:9em;overflow:hidden}.hero-term .bar,.hero-term .ctl{display:none}
.stats{list-style:none;display:flex;flex-wrap:wrap;gap:1rem 2.4rem;padding:0;margin:2rem 0 0}
.stats b{display:block;font-size:2.2rem;color:var(--acc);font-family:ui-monospace,monospace;line-height:1.1}.stats span{color:var(--mut);font-size:.82rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.2rem}
.work{position:relative;display:block;transition:transform .2s,border-color .2s}
.work:hover{transform:translateY(-4px) rotate(-.4deg);border-color:var(--acc)}
.work .no{font-family:ui-monospace,monospace;color:var(--acc);font-size:.85rem}.work .tag,.dhead .tag{float:right;font-size:.72rem;color:var(--mut);border:1px solid var(--line);border-radius:99px;padding:.05em .7em}
.work h3{color:var(--fg);font-size:1.15rem;margin:.3em 0}.work p{color:var(--mut);font-size:.88rem;margin:.2em 0 1em}.work .go{color:var(--acc);font-size:.85rem}
.flat{background:transparent}.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}.cols h3{margin-top:0}.cols li{font-size:.92rem;margin:.4em 0}
#detail{border-top:1px solid var(--line);scroll-margin-top:4rem}
.dhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:.8rem}.dhead h2{margin:0}.dhead .no{font-family:ui-monospace,monospace;color:var(--acc);font-size:1.3rem}.back{width:100%;color:var(--mut);font-size:.88rem}
.lede2{color:var(--mut)}.two{display:grid;grid-template-columns:1.5fr 1fr;gap:2rem}@media(max-width:860px){.two{grid-template-columns:1fr}}
.two ul{padding-left:1.2em}.two li{font-size:.92rem;margin:.4em 0}.result{background:#7cf5b012;border-left:3px solid var(--acc);padding:.5em .8em;margin:0;font-size:.92rem}.caveat{border-left:3px solid var(--warn);background:#ffb86b10;padding:.5em .8em;margin:0;font-size:.9rem}
.note{color:var(--mut);font-size:.8rem}
.term{background:#0a0d12;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.term .bar{display:flex;align-items:center;gap:6px;padding:.5rem .8rem;background:#12171e;border-bottom:1px solid var(--line)}.term .bar i{width:10px;height:10px;border-radius:50%;background:#394251}.term .bar i:first-child{background:#ff6b6b}.term .bar i:nth-child(2){background:#ffd166}.term .bar i:nth-child(3){background:var(--acc)}
.term .ttl{margin-left:.6rem;font:12px ui-monospace,monospace;color:var(--mut)}.term .real{margin-left:auto;font:11px ui-monospace,monospace;color:var(--warn)}
.term .scr{margin:0;padding:1rem;height:25rem;overflow:auto;white-space:pre-wrap;word-break:break-word;font:12.5px/1.65 ui-monospace,Menlo,"Hiragino Sans",monospace;color:#c9d4e0}
.term .ctl{display:flex;align-items:center;gap:1rem;padding:.5rem .8rem;border-top:1px solid var(--line)}
.term button{background:var(--acc);color:#04210f;border:0;border-radius:6px;padding:.35em .9em;font-weight:700;cursor:pointer}
.prog{flex:1;height:4px;background:var(--line);border-radius:2px;overflow:hidden}.prog b{display:block;height:100%;width:0;background:var(--acc);transition:width .2s}
video{width:100%;border-radius:10px;border:1px solid var(--line);background:#000}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.8rem}.shots figure{margin:0}.shots img{width:100%;border-radius:8px;border:1px solid var(--line)}.shots figcaption{font-size:.78rem;color:var(--mut)}
.tablewrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:.88rem}th,td{border-bottom:1px solid var(--line);padding:.7em .8em;text-align:left;vertical-align:top}th{color:var(--acc);font-weight:600}td:first-child{white-space:nowrap;font-weight:600}
footer{text-align:center;color:var(--mut);font-size:.8rem;padding:3rem 1rem}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.hero-video{width:100%;max-height:70vh;margin:.4rem 0}
details.cli{margin-top:1.6rem;border:1px solid var(--line);border-radius:10px;padding:.6rem 1rem}details.cli summary{cursor:pointer;color:var(--acc);font-size:.92rem}details.cli .term{margin-top:.8rem}
.two{align-items:start}