:root{--bg: #0c0f13;--bg-gutter: #090b0e;--panel: #151a21;--panel-2: #0f1318;--border: #232b35;--border-soft:#191f27;--text: #d3dae2;--muted: #6c7784;--accent: #d9a24a;--accent-2: #e8c07a;--accent-dim:rgba(217,162,74,.12);--int: #37c9b0;--str: #b98cff;--bytes: #f0a13a;--var: #5aa9f0;--buffer: #ef6fa6;--console:#43c98a;--grid: rgba(255,255,255,.022);--mono: "Cascadia Code", "Cascadia Mono", "SF Mono", Consolas, "Courier New", monospace;--sans: "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6}astro-island{display:contents}:root{--pad: clamp(18px, 4vw, 56px);--maxw: 1360px}.home>*{max-width:calc(var(--maxw) + var(--pad) * 2);margin-inline:auto;padding-inline:var(--pad)}.piece-page>*{max-width:none}.topbar{display:flex;align-items:baseline;gap:10px;padding-top:16px;padding-bottom:14px;border-bottom:1px solid var(--border-soft)}.topbar .logo{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--accent);line-height:1}.topbar .wordmark{font-family:var(--mono);font-size:16px;font-weight:600;letter-spacing:.5px;color:var(--text)}.topbar-sub{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted)}@media (max-width: 560px){.topbar-sub{display:none}}.brand-link{display:inline-flex;align-items:baseline;gap:10px;text-decoration:none}.topbar-back{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--muted);text-decoration:none;transition:color .12s}.topbar-back:hover{color:var(--accent)}.hero{padding-top:clamp(40px,8vw,88px);padding-bottom:clamp(28px,5vw,52px)}.headline{margin:0;font-family:var(--sans);font-weight:700;font-size:clamp(30px,6vw,58px);line-height:1.22;letter-spacing:.2px;color:var(--text);max-width:20ch}.headline-en{margin:16px 0 0;font-family:var(--mono);font-size:clamp(12px,1.6vw,15px);letter-spacing:.4px;color:var(--muted)}.showcase{padding-top:6px;scroll-margin-top:12px}.showcase-head{margin-bottom:14px}.showcase-kicker{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:8px}.showcase-q{margin:0;font-family:var(--sans);font-weight:700;font-size:clamp(20px,3.2vw,30px);line-height:1.35;color:var(--text)}.showcase-meta,.piece-meta{display:flex;align-items:center;gap:12px;margin-top:10px}.showcase-meta .formal{font-family:var(--mono);font-size:13px;color:var(--muted)}.showcase-open{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--accent-2);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .12s}.showcase-open:hover{border-color:var(--accent)}@media (max-width: 560px){.showcase-open{margin-left:0;flex-basis:100%}}.piece-hero{padding-top:clamp(20px,4vw,40px)}.piece-hero .showcase-q{font-size:clamp(22px,3.6vw,34px);max-width:none}.viz{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--bg)}.viz .workspace{padding:16px}.lang-tag{font-family:var(--mono);font-size:11px;letter-spacing:.5px;color:var(--muted);border:1px solid var(--border);border-radius:3px;padding:2px 7px;text-transform:lowercase}.level{display:inline-flex;gap:4px;align-items:center}.level .dot{width:7px;height:7px;border-radius:50%;border:1px solid var(--muted);background:transparent}.level .dot.on{background:var(--accent);border-color:var(--accent)}.level .dot.deep{border-color:var(--accent);background:var(--accent-dim)}.pieces{padding-top:clamp(36px,6vw,64px);padding-bottom:clamp(24px,4vw,40px)}.pieces-title{margin:0;font-family:var(--mono);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}.pieces-note{margin:8px 0 20px;font-size:13px;color:var(--muted)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}.piece-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;text-decoration:none;padding:16px 18px;background:var(--panel-2);border:1px solid var(--border);border-left:2px solid var(--border);border-radius:6px;cursor:pointer;transition:border-color .12s,background .12s,transform .12s}.piece-card:hover{border-color:var(--accent);border-left-color:var(--accent);background:var(--panel)}.piece-card.active{border-color:var(--accent);border-left-color:var(--accent);background:var(--panel);box-shadow:inset 2px 0 0 var(--accent)}.piece-q{font-family:var(--sans);font-weight:600;font-size:16px;line-height:1.5;color:var(--text)}.piece-formal{font-family:var(--mono);font-size:12px;color:var(--muted)}.piece-meta{margin-top:4px}.creed{padding-top:clamp(40px,7vw,72px);padding-bottom:clamp(28px,5vw,48px);border-top:1px solid var(--border-soft)}.creed p{margin:0 0 18px;max-width:54ch;font-size:clamp(15px,1.7vw,17px);line-height:1.9;color:var(--text)}.creed-punch{font-weight:700;color:var(--accent-2)!important}.workspace{display:grid;grid-template-columns:minmax(280px,380px) 1fr;align-items:start;gap:14px;padding:16px 28px}@media (max-width: 860px){.workspace{grid-template-columns:1fr}}.panel{background:var(--panel-2);border:1px solid var(--border);border-radius:6px;overflow:hidden}.panel-title{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;background:var(--panel);border-bottom:1px solid var(--border);font-family:var(--mono);font-size:12px;letter-spacing:.8px;color:var(--muted);text-transform:uppercase}.step-indicator{font-family:var(--mono);color:var(--accent);text-transform:none;letter-spacing:0}.code{position:relative;margin:0;padding:16px 16px 16px 14px;font-family:var(--mono);font-size:17px;line-height:2;counter-reset:ln;background:linear-gradient(90deg,var(--bg-gutter) 0 40px,var(--border-soft) 40px 41px,transparent 41px)}.code-line{counter-increment:ln;position:relative;display:inline-block;width:100%;padding:0 8px 0 42px;border-radius:0;transition:background .15s}.code-line:before{content:counter(ln);position:absolute;left:0;width:28px;text-align:right;color:var(--muted);font-size:13px;opacity:.7}.code-line.active{background:var(--accent-dim);box-shadow:inset 3px 0 0 var(--accent)}.code-line.active:before{color:var(--accent);opacity:1}.code-edit{font:inherit;color:var(--accent-2);background:var(--accent-dim);border:none;border-bottom:1.5px dashed var(--accent);border-radius:3px 3px 0 0;padding:0 4px;margin:0 1px;min-width:2ch;text-align:center;caret-color:var(--accent);cursor:text;transition:background .12s}.code-edit:hover{background:#d9a24a33}.code-edit:focus{outline:none;background:#d9a24a42;border-bottom-style:solid;box-shadow:inset 0 0 0 1px var(--accent)}.narration{padding:14px 18px 18px;border-top:1px solid var(--border-soft);color:var(--text);font-size:15px;min-height:96px}.stage-panel>.narration{font-size:16.5px;line-height:1.85;padding:16px 20px 20px;min-height:156px;border-top:1px solid var(--border);background:var(--panel);border-left:2px solid var(--accent);animation:narr-in .45s ease .06s both}@keyframes narr-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.stage-panel>.narration:before{content:"解説";display:block;margin-bottom:7px;font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent)}.params{display:flex;flex-direction:column;gap:10px;padding:12px 16px 14px;border-top:1px solid var(--border-soft);background:var(--panel)}.params-head{font-family:var(--mono);font-size:12px;letter-spacing:.5px;color:var(--accent)}.param-row{display:flex;align-items:center;gap:12px}.param-row>label{font-family:var(--mono);font-size:13px;color:var(--muted);flex:0 0 auto}.param-row input[type=range]{flex:1 1 auto;min-width:90px;accent-color:var(--accent);cursor:pointer}.param-row input[type=text]{flex:1 1 auto;min-width:90px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:7px 10px;font-family:var(--mono);font-size:16px}.param-row input[type=text]:focus,.param-row input[type=range]:focus-visible{outline:none;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.param-val{flex:0 0 auto;min-width:4ch;text-align:right;font-family:var(--mono);font-weight:700;font-size:17px;color:var(--accent)}.param-hint{font-size:12px;line-height:1.5;color:var(--muted)}.detail-slot{min-height:58px}.detail-btn{display:block;width:calc(100% - 32px);margin:0 16px 16px;padding:10px 14px;background:var(--panel);color:var(--accent-2);border:1px solid var(--border);border-left:2px solid var(--accent);border-radius:4px;font-family:var(--mono);font-size:14px;text-align:left;cursor:pointer;transition:background .12s,border-color .12s}.detail-btn:hover{background:var(--accent-dim);border-color:var(--accent)}.stage-caption{padding:13px 20px 13px 22px;border-bottom:1px solid var(--border);border-left:3px solid var(--accent);background:var(--panel);color:var(--text);font-size:19px;font-weight:600;line-height:1.45;letter-spacing:.2px;white-space:pre-line;animation:caption-in .5s cubic-bezier(.22,1,.36,1) both}@keyframes caption-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.stage-panel{position:relative}.stage{position:relative;overflow:hidden;padding:8px;background:linear-gradient(var(--grid) 1px,transparent 1px) 0 0 / 100% 24px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0 / 24px 100%,var(--panel-2)}.stage-inner{position:relative;width:880px;height:440px;transform-origin:top left}.arrows{position:absolute;inset:0;width:880px;height:440px;pointer-events:none}.arrow-line{stroke:var(--muted);stroke-width:1.6;opacity:.9}#arrowhead polygon,#arrowhead2 polygon{fill:var(--muted)}.flow-label{position:absolute;font-family:var(--mono);font-size:12px;line-height:1.2;color:var(--muted);background:var(--panel-2);border:1px solid var(--border);padding:2px 7px;border-radius:4px;white-space:nowrap;pointer-events:none;z-index:4}.boxes{position:absolute;inset:0}.box{position:absolute;min-width:150px;padding:12px 14px;border-radius:5px;background:var(--panel);border:1px solid var(--border);font-family:var(--mono);transition:box-shadow .25s,border-color .25s}.box-title{font-size:11px;letter-spacing:.5px;color:var(--muted);margin-bottom:6px;text-transform:uppercase}.box-value{font-size:20px;color:var(--text)}.box--int{border-color:var(--int)}.box--int .box-value{color:var(--int)}.box--str{border-color:var(--str)}.box--str .box-value{color:var(--str)}.box--bytes{border-color:var(--bytes)}.box--bytes .box-value{color:var(--bytes);letter-spacing:3px}.box--var{border-color:var(--var);border-style:dashed;background:var(--panel-2)}.box--var .box-value{color:var(--var);font-weight:700}.box--buffer{border-color:var(--buffer);border-style:dashed;background:var(--panel)}.box--buffer .box-value{color:var(--buffer);letter-spacing:3px}.box--console{border-color:var(--console);background:#080d0a}.box--console .box-title{color:var(--console)}.box--console .box-value{color:var(--console);font-size:30px}.box--note{min-width:120px;border:none;background:transparent;color:var(--muted);font-size:13px;font-family:var(--sans)}.box--note .box-value{font-size:13px;color:var(--muted)}.box--hl{box-shadow:0 0 0 1px currentColor;animation:pulse 1.3s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 0 1px currentColor}50%{box-shadow:0 0 0 2px currentColor}}.flow-token{position:absolute;left:0;top:0;padding:5px 10px;border-radius:4px;background:var(--tok, var(--accent));color:#0c0f13;font-family:var(--mono);font-weight:700;font-size:16px;letter-spacing:1px;white-space:nowrap;box-shadow:0 0 0 1px #00000059;z-index:5;pointer-events:none}.controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:12px 16px;background:var(--bg);border-top:1px solid var(--border)}.controls-main{display:flex;align-items:center;justify-content:center;gap:8px}.controls-side{display:flex;align-items:center;min-width:0}.controls-left{justify-content:flex-start}.controls-right{justify-content:flex-end}.controls .play{width:104px;min-width:104px;font-weight:600;text-align:center}.controls-hint{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}@media (max-width: 620px){.controls{grid-template-columns:1fr;justify-items:center;row-gap:10px}.controls-left{display:none}.controls-right{justify-content:center}}.controls button{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:9px 14px;font-family:var(--mono);font-size:15px;cursor:pointer;transition:border-color .12s,color .12s,background .12s}.controls button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.controls button:disabled{opacity:.35;cursor:default}.controls .play.on{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.speed{margin-left:8px;color:var(--muted);font-family:var(--mono);font-size:13px;display:flex;align-items:center;gap:6px}.speed select{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:6px 8px;font-family:var(--mono)}.detail-layer{position:absolute;inset:0;z-index:10;flex-direction:column;background:var(--panel-2);border-radius:6px;animation:layer-in .22s ease}.detail-layer:not([hidden]){display:flex}@keyframes layer-in{0%{opacity:0}to{opacity:1}}.detail-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--panel)}.detail-title{font-family:var(--mono);font-weight:600;font-size:15px}.detail-badge{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1px;color:var(--bg);background:var(--accent);padding:3px 9px;border-radius:3px}.detail-close{margin-left:auto;background:var(--panel);color:var(--muted);border:1px solid var(--border);border-radius:4px;padding:7px 13px;font-family:var(--mono);font-size:13px;cursor:pointer;transition:color .12s,border-color .12s}.detail-close:hover{color:var(--accent);border-color:var(--accent)}.detail-stage{flex:1;min-height:0}.detail-narration{min-height:72px;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}.detail-controls{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px}.detail-controls button{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:7px 16px;font-family:var(--mono);font-size:14px;cursor:pointer;transition:border-color .12s,color .12s}.detail-controls button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.detail-controls button:disabled{opacity:.35;cursor:default}.site-footer{padding-top:clamp(28px,5vw,48px);padding-bottom:40px;border-top:1px solid var(--border)}.creed-line{margin:0;font-family:var(--sans);font-weight:700;font-size:clamp(17px,2.4vw,22px);color:var(--text)}.colophon{margin:14px 0 0;font-family:var(--mono);font-size:12px;color:var(--muted)}