*{box-sizing:border-box}body{margin:0;background:#f6f5f0;color:#18342e;font:16px system-ui,sans-serif}main{max-width:1100px;margin:auto;padding:38px 24px}nav{display:flex;gap:20px;margin-bottom:45px}a{color:#286c59}h1{font-size:44px;letter-spacing:-2px;margin:12px 0}h2{font-size:22px}p{line-height:1.6;max-width:800px}.eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#697c72}.panel{background:white;border:1px solid #dde4da;border-radius:18px;padding:24px;margin:20px 0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.grid .panel{margin:0}textarea{width:100%;font:22px monospace;padding:18px;border:1px solid #b3c7bb;border-radius:10px;min-height:90px;background:#fff}button,select{padding:11px 16px;border:1px solid #b3c7bb;background:white;color:#18342e;border-radius:8px;cursor:pointer;margin:5px 5px 5px 0;font:inherit}button.primary,button.active{background:#245f4d;color:white}button:disabled{opacity:.4;cursor:default}.tag{display:inline-block;border-radius:6px;padding:6px 10px;background:#e5eee8;margin:3px;font:14px monospace}.char{display:inline-block;padding:9px;margin:3px;border-radius:6px;border:1px solid #d5ddd6;white-space:pre}.char.current{background:#d6f191;border-color:#245f4d}.result{font:26px monospace;white-space:pre-wrap;overflow-wrap:anywhere}.muted{color:#697c72}.bad{color:#a13e37;background:#fff1ed}.good{color:#245f4d}.timeline{display:grid;grid-template-columns:280px 1fr;gap:24px}.timeline button{display:block;width:100%;text-align:left}dl{display:grid;grid-template-columns:145px 1fr;gap:14px}dt{color:#697c72}dd{margin:0;font-family:monospace;white-space:pre-wrap;overflow-wrap:anywhere}pre{overflow:auto;background:#f3f5f0;padding:14px}footer{margin-top:32px;color:#697c72;font-size:13px}@media(max-width:700px){.grid,.timeline{grid-template-columns:1fr}h1{font-size:34px}nav{flex-wrap:wrap}}.node{cursor:pointer;fill:#f3f5f0;stroke:#b3c7bb;stroke-width:2}.node.selected{fill:#d6f191;stroke:#245f4d}.edge{stroke:#9bafa3;fill:none;stroke-width:2}.edge.selected{stroke:#245f4d;stroke-width:5}svg text{font:14px system-ui;fill:#18342e}svg{width:100%;min-width:500px}.diagram{overflow:auto}table{border-collapse:collapse;width:100%;font-size:14px}th,td{text-align:left;padding:12px;border-bottom:1px solid #dce4db;white-space:pre-wrap}th{position:sticky;top:0;background:#eef2e9}tr.selected{background:#e1f0c1}.trace{max-height:420px;overflow:auto}.changed{background:#e1f0c1;border-radius:4px;padding:4px}
[hidden]{display:none!important}main{max-width:1500px;padding:20px 28px 110px}nav{margin:0 0 16px;gap:16px;font-size:13px}h1{font-size:30px;letter-spacing:-1px;margin:8px 0}main>p{margin:6px 0 18px;font-size:14px}h2{font-size:18px;margin:10px 0}.panel{padding:16px;border-radius:12px;margin:0;min-width:0}textarea{font-size:18px;min-height:56px;height:56px;padding:12px}button{font-size:13px;padding:7px 11px}#presets{display:inline}#presets button{font-size:11px;padding:5px 7px}#input-panel{margin:16px 0 12px}#contract-panel{margin:0 0 12px}#contract-panel .result{font-size:20px}#contract-panel h2{display:inline-block;margin-right:16px;font-size:14px}#contract-panel>p{font-size:11px;margin-bottom:0}#contract-panel details{font-size:13px;margin-top:8px}#fragments p{margin:8px 0}#walkthrough{display:grid;gap:12px;align-items:start}#step-controls{grid-area:controls;position:sticky;top:8px;z-index:2;box-shadow:0 3px 12px #18342e0a}#chars{max-height:70px;overflow:auto}.char{padding:5px;margin:2px;font-size:13px}#state-diagram{grid-area:diagram}#decision-trace{grid-area:trace}#inspector{grid-area:inspector;display:grid;gap:12px;grid-template-columns:1fr}#inspector p{font-size:13px;margin:8px 0}#inspector .result{font-size:18px}dl{font-size:12px;gap:8px;grid-template-columns:95px 1fr}#state-diagram>p:first-of-type{font-size:12px;line-height:1.5;margin:8px 0}#state-diagram .result{font-size:16px;margin:4px 0}#state-diagram>p:last-child{font-size:12px;margin-bottom:0}#state-diagram svg{min-width:0;height:200px;display:block}#decision-trace>p{font-size:12px;margin:6px 0}#decision-trace .trace{max-height:360px}th,td{padding:8px;font-size:12px}#decision-trace>p code{font-size:11px}#decision-trace>h2:not(:first-child){font-size:14px}footer{font-size:11px}#layout-switcher{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:10;background:#173a30;color:white;padding:8px 12px;border-radius:16px;box-shadow:0 8px 32px #173a3033;display:flex;align-items:center;gap:8px;white-space:nowrap}#layout-switcher button{background:transparent;color:#e6efe9;border-color:#537063;margin:0}#layout-switcher button.active{background:#d6f191;color:#173a30;border-color:#d6f191}#layout-label{font-size:12px;padding:0 8px}#layout-note{font-size:13px;color:#586f62;margin:0 0 12px}#view-tabs{grid-area:tabs;display:none}
body[data-variant="A"] #walkthrough{grid-template-columns:minmax(280px,.8fr) minmax(450px,1.4fr);grid-template-areas:"controls controls" "diagram trace" "inspector trace"}body[data-variant="A"] #inspector{grid-template-columns:1fr 1fr}body[data-variant="A"] #inspector dl{grid-template-columns:75px 1fr}
body[data-variant="B"] #app{display:block}body[data-variant="B"] #app>nav,body[data-variant="B"] #app>.eyebrow,body[data-variant="B"] #app>h1,body[data-variant="B"] #app>p,body[data-variant="B"] #app>footer{grid-column:1/-1}body[data-variant="B"] #input-panel{grid-column:1;margin-top:0}body[data-variant="B"] #contract-panel{grid-column:2;grid-row:6 / span 2;align-self:start}body[data-variant="B"] #walkthrough{grid-column:1/-1;grid-template-columns:minmax(0,1fr) 330px;grid-template-areas:"controls inspector" "diagram inspector" "trace trace"}body[data-variant="B"] #state-diagram svg{height:260px}body[data-variant="B"] #state-diagram .diagram{max-width:700px;margin:auto}body[data-variant="B"] #decision-trace .trace{max-height:190px}
body[data-variant="C"] main{max-width:1100px}body[data-variant="C"] #walkthrough{grid-template-columns:1fr;grid-template-areas:"controls" "tabs" "diagram" "trace" "inspector"}body[data-variant="C"] #view-tabs{display:flex;gap:8px}body[data-variant="C"] #walkthrough[data-tab="diagram"] #decision-trace,body[data-variant="C"] #walkthrough[data-tab="diagram"] #inspector,body[data-variant="C"] #walkthrough[data-tab="trace"] #state-diagram,body[data-variant="C"] #walkthrough[data-tab="trace"] #inspector,body[data-variant="C"] #walkthrough[data-tab="inspector"] #state-diagram,body[data-variant="C"] #walkthrough[data-tab="inspector"] #decision-trace{display:none}body[data-variant="C"] #state-diagram svg{height:260px}body[data-variant="C"] #inspector{grid-template-columns:1fr 1fr}body[data-variant="C"] #decision-trace .trace{max-height:420px}
@media(max-width:950px){body[data-variant="A"] #walkthrough,body[data-variant="B"] #walkthrough{grid-template-columns:1fr;grid-template-areas:"controls" "diagram" "trace" "inspector"}body[data-variant="B"] #app{display:block}#inspector{grid-template-columns:1fr!important}#layout-label{display:none}main{padding:18px 12px 110px}#layout-switcher{gap:4px;padding:7px}#layout-switcher button{padding:8px}#decision-trace .trace{overflow:auto}#step-controls{position:static}}

@media(min-width:951px){main,body[data-variant="B"] #app{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}main>nav,main>.eyebrow,main>h1,main>p,#layout-note,#walkthrough,main>footer{grid-column:1/-1}#input-panel,body[data-variant="B"] #input-panel{grid-column:1;margin:12px 0}#contract-panel,body[data-variant="B"] #contract-panel{grid-column:2;grid-row:auto;margin:12px 0;align-self:stretch}}
#decision-trace>p{overflow-wrap:anywhere}#inspector{min-width:0}#layout-switcher{max-width:calc(100vw - 16px)}
@media(max-width:600px){#layout-switcher{gap:3px;padding:6px}#layout-switcher button{font-size:11px;padding:7px 6px}#layout-label{display:none}#decision-trace>p code{word-break:break-word}}
main{padding-bottom:28px}
.github-link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;color:#18342e}.github-link svg{width:24px;height:24px;min-width:0}.github-link:hover{background:#e5eee8}.github-link:focus-visible{outline:2px solid #245f4d;outline-offset:3px}