:root{--bg:#f7f7f4;--panel:#fff;--field:#fbfbf8;--soft:#eef6f1;--ink:#171717;--text:#3f4548;--muted:#667073;--line:#d9dcda;--accent:#2563eb;--accent-soft:#2563eb26;--good:#16803c;--warn:#a16207;--bad:#b42318;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}@media (prefers-color-scheme:dark){:root{--bg:#111315;--panel:#181b1f;--field:#20242a;--soft:#17231c;--ink:#f4f7f6;--text:#d1d8d6;--muted:#99a5a2;--line:#30363d;--accent:#79a7ff;--accent-soft:#79a7ff2e;--good:#60c878;--warn:#f3b544;--bad:#ff7b72}}*{box-sizing:border-box}body{margin:0}button,input,select{letter-spacing:0}.control-room{min-height:100svh;color:var(--text);background:linear-gradient(90deg, #ffffff0a 1px, transparent 1px), linear-gradient(180deg, #ffffff09 1px, transparent 1px), var(--bg);background-size:42px 42px,42px 42px,auto;gap:16px;padding:20px;display:grid}.topbar,.scenario-strip,.demo-grid,.control-dock{width:min(1540px,100%);margin-inline:auto}.topbar{justify-content:space-between;align-items:end;gap:18px;min-height:72px;display:flex}.eyebrow{color:var(--muted);letter-spacing:0;text-transform:uppercase;margin:0 0 7px;font-size:11px;font-weight:850}h1,h2,p{margin:0}h1{max-width:760px;color:var(--ink);letter-spacing:0;font-size:clamp(32px,3.8vw,52px);line-height:.97}h2{color:var(--ink);letter-spacing:0;font-size:16px;line-height:1.2}.state-pill{border:1px solid var(--line);background:color-mix(in srgb, var(--panel) 92%, transparent);min-height:42px;color:var(--ink);white-space:nowrap;border-radius:999px;justify-content:center;align-items:center;gap:9px;padding:0 14px;font-size:13px;font-weight:850;display:inline-flex}.state-pill.ok{border-color:color-mix(in srgb, var(--good) 54%, var(--line));color:var(--good)}.state-pill.warn{border-color:color-mix(in srgb, var(--warn) 62%, var(--line));color:var(--warn)}.state-pill.bad{border-color:color-mix(in srgb, var(--bad) 60%, var(--line));color:var(--bad)}.scenario-strip{grid-template-columns:minmax(240px,.42fr) minmax(0,1fr);align-items:stretch;gap:14px;display:grid}.scenario-intro,.scenario-button,.stage,.narrative-panel,.log-panel,.control-dock{border:1px solid var(--line);background:color-mix(in srgb, var(--panel) 94%, transparent);border-radius:8px}.scenario-intro{align-content:center;gap:8px;padding:14px;display:grid}.scenario-intro h2{max-width:36ch;font-size:clamp(18px,1.6vw,24px);line-height:1.1}.scenario-buttons{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;display:grid}.scenario-button{text-align:left;justify-content:start;align-items:start;gap:10px;min-width:0;min-height:74px;padding:13px}.scenario-button svg{color:var(--accent);flex:none;margin-top:2px}.scenario-button span{gap:5px;min-width:0;display:grid}.scenario-button strong{color:var(--ink);font-size:13px;line-height:1.1}.scenario-button small{color:var(--muted);font-size:12px;font-weight:650;line-height:1.25}.scenario-button.active,.advanced-toggle.active{border-color:var(--accent);background:color-mix(in srgb, var(--accent-soft) 72%, var(--field))}.demo-grid{grid-template-columns:minmax(0,1fr);align-items:start;gap:14px;display:grid}.stage-shell{grid-template-rows:auto auto;align-content:start;gap:10px;min-width:0;display:grid}.stage{background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, transparent), color-mix(in srgb, var(--field) 98%, transparent)), repeating-linear-gradient(0deg, transparent 0 35px, #ffffff09 36px 37px);min-width:0;height:clamp(520px,39vw,620px);min-height:520px;position:relative;overflow:hidden;box-shadow:0 24px 70px #00000038}.stage:before{content:"";border:1px solid color-mix(in srgb, var(--line) 72%, transparent);pointer-events:none;border-radius:8px;position:absolute;inset:18px}.link-layer{width:100%;height:100%;position:absolute;inset:0}.link{stroke:color-mix(in srgb, var(--accent) 52%, transparent);stroke-width:.34px}.link.partitioned{stroke:color-mix(in srgb, var(--warn) 70%, transparent);stroke-dasharray:1.4 1.2}.partition-wall{stroke:var(--warn);stroke-width:.55px;stroke-dasharray:2.2 1.4}.stage-cue{z-index:8;border:1px solid var(--line);background:color-mix(in srgb, var(--panel) 94%, transparent);max-width:min(420px,100% - 48px);min-height:38px;color:var(--text);border-radius:7px;align-items:center;padding:9px 12px;font-size:12px;font-weight:820;line-height:1.25;display:inline-flex;position:absolute;top:24px;left:24px;box-shadow:0 12px 28px #0000002e}.stage-cue.ok{border-color:color-mix(in srgb, var(--good) 46%, var(--line))}.stage-cue.warn{border-color:color-mix(in srgb, var(--warn) 60%, var(--line))}.stage-cue.bad{border-color:color-mix(in srgb, var(--bad) 58%, var(--line))}.packet{z-index:4;border:1px solid color-mix(in srgb, var(--accent) 70%, var(--line));background:color-mix(in srgb, var(--field) 92%, transparent);width:128px;min-height:38px;color:var(--ink);border-radius:7px;gap:2px;padding:7px 8px;animation:.72s ease-out both packet-glide;display:grid;position:absolute;translate:-50% -50%;box-shadow:0 12px 28px #00000038}.packet span{font-size:11px;font-weight:900;line-height:1}.packet code{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;line-height:1.2;overflow:hidden}.packet.orset-add{border-color:color-mix(in srgb, var(--good) 72%, var(--line))}.packet.orset-remove{border-color:color-mix(in srgb, var(--bad) 72%, var(--line))}.packet.reordered{border-color:color-mix(in srgb, var(--warn) 80%, var(--line));background:color-mix(in srgb, var(--warn) 12%, var(--field))}.packet.repair{border-color:color-mix(in srgb, var(--accent) 72%, var(--good));background:color-mix(in srgb, var(--good) 13%, var(--field))}.packet.duplicated{border-style:dashed}.convergence-core{aspect-ratio:1;z-index:3;border:1px solid var(--line);background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 94%, transparent), color-mix(in srgb, var(--field) 98%, transparent));width:clamp(168px,23vw,224px);min-width:168px;box-shadow:inset 0 0 0 1px #ffffff08, 0 0 48px color-mix(in srgb, var(--accent) 16%, transparent);text-align:center;border-radius:50%;align-content:center;place-items:center;gap:8px;padding:21px;display:grid;position:absolute;top:50%;left:50%;translate:-50% -50%}.convergence-core.ok{border-color:color-mix(in srgb, var(--good) 58%, var(--line));box-shadow:inset 0 0 0 1px #ffffff08, 0 0 54px color-mix(in srgb, var(--good) 22%, transparent)}.convergence-core.warn{border-color:color-mix(in srgb, var(--warn) 68%, var(--line))}.convergence-core.bad{border-color:color-mix(in srgb, var(--bad) 62%, var(--line))}.convergence-core.pulse{animation:1.1s ease-out both core-pulse}.convergence-core span{color:var(--muted);letter-spacing:0;font-size:11px;font-weight:900}.convergence-core strong{color:var(--ink);font-size:clamp(42px,6vw,70px);line-height:.8}.convergence-core small{max-width:17ch;color:var(--text);overflow-wrap:anywhere;font-size:12px;font-weight:760;line-height:1.25}.replica{z-index:5;border:1px solid var(--line);background:color-mix(in srgb, var(--panel) 95%, transparent);width:clamp(140px,13vw,176px);min-height:108px;color:var(--text);text-align:left;border-radius:8px;align-content:start;gap:7px;padding:12px;display:grid;position:absolute;translate:-50% -50%;box-shadow:0 14px 34px #00000038}.replica:hover,.replica:focus-visible{border-color:var(--accent);outline:none}.replica.selected{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px;box-shadow:0 0 0 3px var(--accent-soft), 0 14px 34px #00000038}.replica.aligned{border-color:color-mix(in srgb, var(--good) 48%, var(--line))}.replica.split{border-color:color-mix(in srgb, var(--warn) 70%, var(--line))}.replica-kicker{color:var(--muted);text-transform:uppercase;justify-content:space-between;align-items:center;gap:6px;font-size:11px;font-weight:900;display:flex}.replica-state{flex:none;align-items:center;display:inline-flex}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.replica strong{color:var(--ink);font-size:31px;line-height:.9}.replica span:not(.replica-kicker){min-height:16px;color:var(--text);overflow-wrap:anywhere;font-size:12px;line-height:1.25}.replica .replica-kicker>span{min-height:0;color:inherit;font-size:inherit;line-height:inherit}.replica code{color:var(--muted);overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;line-height:1.25}.stage-step-controls{grid-template-columns:repeat(4,minmax(124px,max-content)) minmax(92px,1fr);align-items:stretch;gap:8px;min-height:50px;display:grid}.story-row{grid-template-columns:minmax(420px,.92fr) minmax(390px,1.08fr);align-items:stretch;gap:14px;min-width:0;display:grid}.step-progress,.lab-stage-note{border:1px solid var(--line);background:var(--field);min-height:40px;color:var(--muted);border-radius:7px;justify-content:center;align-items:center;padding:0 12px;font-size:12px;font-weight:850;display:inline-flex}.lab-stage-note{grid-column:1/-1;justify-content:start}.narrative-panel,.log-panel{align-content:start;gap:12px;min-width:0;min-height:360px;padding:16px;display:grid}.narrative-panel h2{font-size:clamp(22px,2.2vw,31px);line-height:1.04}.narrative-panel p:not(.eyebrow){color:var(--text);line-height:1.46}.watch-card{border:1px solid var(--line);background:var(--field);border-radius:8px;gap:7px;padding:12px;display:grid}.watch-card strong{color:var(--ink);text-transform:uppercase;font-size:12px}.watch-card span{line-height:1.42}.watch-card.success{border-color:color-mix(in srgb, var(--good) 44%, var(--line))}.claim-line{border-top:1px solid var(--line);align-self:end;padding-top:12px;font-size:13px;color:var(--muted)!important}.log-panel{overflow:hidden}.log-panel header{color:var(--ink);align-items:center;gap:9px;display:flex}.log-panel ol{gap:8px;min-height:0;max-height:360px;margin:0;padding:0;list-style:none;display:grid;overflow:auto}.log-panel li{border:1px solid var(--line);background:var(--field);border-radius:7px;grid-template-columns:48px minmax(0,1fr);align-items:start;gap:8px;padding:8px 9px;font-size:12px;line-height:1.35;display:grid}.log-panel time{color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.log-panel .send{border-left:4px solid var(--accent)}.log-panel .deliver,.log-panel .merge,.log-panel .anti-entropy{border-left:4px solid var(--good)}.log-panel .drop,.log-panel .partition{border-left:4px solid var(--warn)}.log-panel .empty-log{border-left:4px solid var(--line)}.control-dock{gap:14px;padding:14px;display:grid}.control-dock.open{border-color:color-mix(in srgb, var(--accent) 44%, var(--line))}label{color:var(--muted);gap:7px;font-size:12px;font-weight:850;display:grid}select,input,button{border:1px solid var(--line);background:var(--field);min-height:40px;color:var(--ink);font:inherit;border-radius:7px}select,input:not([type=range]):not([type=checkbox]){width:100%;padding:0 10px}input[type=range]{accent-color:var(--accent)}button{cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:0 11px;font-size:13px;font-weight:850;display:inline-flex}button:hover,button:focus-visible,select:focus-visible,input:focus-visible{border-color:var(--accent);outline:none}button:disabled{cursor:not-allowed;opacity:.58}.sandbox-controls{border-top:1px solid var(--line);grid-template-columns:minmax(260px,.8fr) minmax(360px,1fr) minmax(380px,1.2fr);gap:14px;padding-top:14px;display:grid}.control-bank,.operation-bank,.tuning-bank{gap:10px;display:grid}.control-bank{grid-template-columns:repeat(2,minmax(0,1fr))}.operation-bank{align-content:start}.tuning-bank{grid-template-columns:repeat(2,minmax(0,1fr))}.supply-row{grid-template-columns:minmax(0,1fr) auto auto;gap:8px;display:grid}.dock-footer{grid-template-columns:minmax(160px,auto) minmax(150px,auto) minmax(140px,auto) minmax(260px,1fr);align-items:stretch;gap:10px;display:grid}.check-row{border:1px solid var(--line);background:var(--field);border-radius:7px;grid-template-columns:auto 1fr;align-items:center;min-height:42px;padding:0 10px}.check-row input{width:18px;min-height:18px;accent-color:var(--accent);margin:0}.proof-note{border:1px solid var(--line);background:var(--field);min-height:42px;color:var(--muted);border-radius:7px;align-items:center;gap:10px;padding:8px 10px;font-size:13px;line-height:1.35;display:flex}.proof-note svg{color:var(--good);flex:none}.calm-motion .packet,.calm-motion .convergence-core.pulse{animation:none}@keyframes packet-glide{0%{opacity:.55;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes core-pulse{0%{transform:scale(1)}44%{transform:scale(1.04)}to{transform:scale(1)}}@media (width<=1280px){.scenario-strip,.demo-grid{grid-template-columns:1fr}.scenario-buttons{grid-template-columns:repeat(5,minmax(120px,1fr))}.stage{height:500px;min-height:500px}.narrative-panel,.log-panel{min-height:0}.log-panel ol{max-height:260px}.sandbox-controls,.dock-footer{grid-template-columns:1fr}.tuning-bank{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width<=900px){.scenario-buttons,.tuning-bank{grid-template-columns:repeat(2,minmax(0,1fr))}.story-row{grid-template-columns:1fr}.stage-step-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.step-progress{grid-column:1/-1}}@media (width<=820px){.control-room{padding:14px}.topbar{align-items:start;min-height:auto;display:grid}.state-pill{justify-self:start}h1{font-size:clamp(31px,10vw,46px)}.stage{height:560px;min-height:560px}.control-bank,.supply-row{grid-template-columns:1fr}}@media (width<=520px){.control-room{gap:14px;padding:14px}.scenario-buttons{grid-template-columns:1fr}.scenario-button{min-height:68px}.stage{height:540px;min-height:540px}.convergence-core{gap:5px;width:112px;min-width:112px;padding:12px}.convergence-core strong{font-size:42px}.convergence-core small{max-width:11ch;font-size:11px}.replica{gap:5px;width:116px;min-height:96px;padding:10px}.replica strong{font-size:25px}.replica span:not(.replica-kicker){font-size:11px}.replica code,.packet code{display:none}.packet{width:86px;min-height:30px;padding:6px}.stage-cue{max-width:calc(100% - 28px);font-size:11px;top:14px;left:14px}.stage-step-controls{grid-template-columns:1fr}}
