@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap";:root{--ink: #1a1d26;--paper: #f5f7fb;--panel: #ffffff;--line: #d8dee8;--accent: #007aff;--accent-2: #0063cc;--hl: #dcebff;--ok: #0f7a45;--err: #c62828;--muted: #5c6573;--mono: "IBM Plex Mono", "Source Han Mono", ui-monospace, monospace;--sans: "Noto Sans JP", "Inter", "Hiragino Sans", sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.7}a{color:var(--accent-2)}.shell{max-width:1100px;margin:0 auto;padding:0 1.25rem 3rem}.topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.95rem 0 .75rem;border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in srgb,var(--paper) 88%,white);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:5}.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:.01em}.brand-mark{display:grid;place-items:center;width:2rem;height:2rem;border-radius:6px;background:var(--accent);color:#fff;font-family:var(--mono);font-size:.8rem}.nav{display:flex;flex-wrap:wrap;gap:.9rem}.nav a{text-decoration:none;color:var(--ink);font-size:.92rem}.nav a.active{color:var(--accent-2);box-shadow:inset 0 -2px 0 var(--accent)}.nav a[href^=http]{color:var(--accent-2)}.page{padding-top:1.4rem}.hero h1,.workspace h1,.prose h1{font-weight:700;letter-spacing:-.02em;line-height:1.3;margin:.2rem 0 .7rem}.eyebrow{letter-spacing:.06em;font-size:.78rem;color:var(--accent-2);margin:0}.lede{max-width:42rem;font-size:1.02rem;color:var(--muted)}.filters{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.4rem 0}.filters label{display:flex;flex-direction:column;font-size:.75rem;gap:.25rem}.filters .grow{flex:1;min-width:12rem}select,input,textarea,button{font:inherit}select,input[type=text],input:not([type]),textarea{border:1px solid var(--line);background:var(--panel);padding:.4rem .55rem;border-radius:6px}button{border:1px solid var(--line);background:var(--panel);padding:.38rem .75rem;border-radius:6px;cursor:pointer}button:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}button:disabled{opacity:.45;cursor:not-allowed}.cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.9rem}.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.95rem 1rem .8rem;display:flex;flex-direction:column;min-height:12rem;box-shadow:0 1px 2px #1a1d260a}.card-ok{background:color-mix(in srgb,var(--ok) 7%,var(--panel));border-color:color-mix(in srgb,var(--ok) 28%,var(--line))}.card-ng{background:color-mix(in srgb,var(--err) 6%,var(--panel));border-color:color-mix(in srgb,var(--err) 24%,var(--line))}.tutorial-cta{display:inline-block;margin-top:.4rem;font-weight:700}.card h2{font-size:1.05rem;margin:.35rem 0}.card h2 a{color:inherit;text-decoration:none}.card h2 a:hover{color:var(--accent-2)}.card p{flex:1;font-size:.9rem;color:var(--muted)}.card-meta,.card-foot{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.78rem;color:var(--muted)}.pill{border:1px solid var(--line);padding:0 .35rem}.pill.run{border-color:var(--accent-2);color:var(--accent-2)}.star{border:none;background:none;padding:0}.star.on{color:var(--accent)}.count,.muted,.cite,.note{color:var(--muted);font-size:.9rem}.crumb{font-size:.85rem}.title-row{display:flex;align-items:center;gap:.8rem}.stem{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:.7rem 1rem}.choices ul{list-style:none;padding:0}.choices li label{display:flex;gap:.6rem;padding:.25rem 0;cursor:pointer}.cid{font-family:var(--mono);min-width:1.6rem}.row-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.7rem 0 1rem}#debugger{scroll-margin-top:5.5rem}.dbg-bar{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.6rem 0}.state{font-family:var(--mono);font-size:.8rem;margin-left:.4rem;color:var(--muted)}.frame-tag,.entry-hint{font-family:var(--mono);font-size:.78rem;color:var(--accent-2)}.state.error,.err{color:var(--err)}.split{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(220px,.8fr);gap:.8rem}.split>*{min-width:0}@media(max-width:800px){.split{grid-template-columns:1fr}.topbar{flex-direction:column;align-items:flex-start}}.code-pane,.vars,.steps,.choices,.variants{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem}.code-pane{overflow:auto;max-height:28rem}.code-pane table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.82rem}.gutter{width:2.4rem;text-align:right;color:#8a93a3;cursor:pointer;-webkit-user-select:none;user-select:none;padding-right:.55rem}.gutter.bp{color:var(--accent);font-weight:700}.code pre{margin:0;white-space:pre}.tok-kw{color:#0b57d0;font-weight:650}.tok-type{color:#8a5a00}.tok-str{color:#0d7a3f}.choice-actions{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:flex-start;margin-top:.5rem}.choice-compare{display:flex;flex-direction:column;gap:.3rem;max-width:22rem}.choice-compare .muted{margin:0;font-size:.82rem}.code-pane tr.cur td{background:var(--hl)}.vars h3,.steps h3,.choices h3,.variants h3{margin:.2rem 0 .5rem;font-size:.95rem}.var-block+.var-block{margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--line)}.var-scope{margin-left:.15rem;padding:.45rem .65rem .2rem .75rem;border-left:3px solid var(--line);background:#f7f9fc;border-radius:0 6px 6px 0}.vars h4{margin:.55rem 0 .25rem;font-size:.78rem;font-weight:600;color:var(--muted);letter-spacing:.02em}.var-scope h4:first-child{margin-top:0}.vars dl div{display:grid;grid-template-columns:7rem 1fr;gap:.4rem;font-family:var(--mono);font-size:.8rem}.vars dt{color:var(--muted)}.out{font-family:var(--mono);font-size:.82rem;background:#eef2f8;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:.5rem;min-height:3rem}.table-wrap{overflow:auto;max-height:22rem}.steps table,.choices table{border-collapse:collapse;font-family:var(--mono);font-size:.78rem;width:100%}.steps th,.steps td,.choices th,.choices td{border-bottom:1px solid var(--line);padding:.2rem .4rem;white-space:nowrap}td.changed{background:#e5f8ec}tr.ans td{background:#eef8f2}.editor{width:100%;min-height:12rem;font-family:var(--mono);font-size:.85rem;padding:.7rem}.prose{max-width:42rem}.prose table.ops{width:100%;border-collapse:collapse;margin:.8rem 0 1rem;font-size:.95rem}.prose table.ops th,.prose table.ops td{border:1px solid var(--line);padding:.35rem .6rem;text-align:left}.prose table.ops th{background:#eef2f8;font-weight:500}.prose code{font-family:var(--mono);font-size:.88em;background:#eef2f8;padding:.05em .35em;border-radius:4px}.msg{font-weight:700}.msg.ok{color:var(--ok)}.entry-bar,.tutorial-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.75rem .9rem;margin:.8rem 0}.entry-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end}.presets{display:flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0 0}.chip{font-size:.8rem;padding:.15rem .45rem}button.emphasize,.emphasize{outline:3px solid color-mix(in srgb,var(--accent) 55%,white);outline-offset:2px;background:#e8f2ff;color:var(--ink)}button.primary.emphasize{background:#0050c8;border-color:#003d99;color:#fff;outline-color:#8ec0ff}.tut-hl{outline:3px solid var(--accent);outline-offset:3px;border-radius:12px}.hole{border-radius:3px;padding:0 .12em;text-decoration:underline;text-underline-offset:2px;font-style:normal}.hole.unfilled{border:1.5px dashed currentColor;text-decoration:none}.hole.filled{border:1.5px solid currentColor}.hole-a{background:#fef3c7;color:#92400e}.hole-b{background:#dbeafe;color:#1e3a8a}.hole-c{background:#ede9fe;color:#5b21b6}.hole-d{background:#dcfce7;color:#14532d}.hole-e{background:#ffe4e6;color:#9f1239}.hole-f{background:#ffedd5;color:#9a3412}.hole-legend{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .45rem;font-size:.78rem}.variant-list{padding-left:1.2rem}.variant-card{margin:.4rem 0 1rem}.restore-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:.5rem 0}.tutorial-steps{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;padding:0}.tutorial-steps button{font-size:.8rem}.tutorial-steps .on button{background:var(--accent);border-color:var(--accent);color:#fff}.tutorial-steps .done button{border-color:var(--ok);color:var(--ok)}.site-foot{margin-top:3rem;padding-top:1.1rem;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem}.site-foot p{margin:0}.site-foot a{color:var(--muted)}.site-foot a:hover{color:var(--accent-2)}
