@font-face{font-family:"Source Serif 4";src:url("./assets/fonts/source-serif-4-latin-400-normal.woff2") format("woff2");font-style:normal;font-weight:400;font-display:block}
:root{color-scheme:light;--ground:#efe9dc;--paper:#fffdf7;--ink:#1e1c18;--muted:#6f695f;--line:#26231f;--soft:#cfc5b4;--blue:#28679a;--blue-soft:#dceaf2;--red:#b4543f;--green:#3f7452;--serif:"Source Serif 4",Georgia,serif;--mono:ui-monospace,SFMono-Regular,Menlo,monospace}
*{box-sizing:border-box}html{background:var(--ground);scroll-behavior:smooth}body{min-width:320px;margin:0;overflow-x:clip;color:var(--ink);background:linear-gradient(rgba(38,35,31,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(38,35,31,.04) 1px,transparent 1px),var(--ground);background-size:24px 24px}
button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
button{min-height:42px;border:2px solid var(--line);border-radius:1px;padding:.55rem .72rem;color:var(--ink);background:var(--paper);box-shadow:2px 2px 0 var(--line);font:800 .7rem/1 var(--mono);text-transform:lowercase;cursor:pointer}button:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--line)}button:active:not(:disabled){transform:translate(1px,1px);box-shadow:none}button:disabled{cursor:not-allowed;opacity:.45;box-shadow:none}
.shell{width:min(1120px,calc(100% - 28px));margin:0 auto;padding-bottom:64px}.hero{padding:28px 2px 20px}.kicker,.step{margin:0;color:var(--blue);font:800 .66rem/1.2 var(--mono);letter-spacing:.06em}.hero h1{max-width:16ch;margin:10px 0 14px;font-size:clamp(2.55rem,9vw,6.4rem);line-height:.86;letter-spacing:-.055em}.hero h1 em{color:var(--blue);font-family:var(--serif);font-weight:400}.definition{max-width:720px;margin:0;font:400 clamp(1rem,2.2vw,1.35rem)/1.42 var(--serif)}.definition strong{background:linear-gradient(transparent 62%,#bbd8e8 62%)}
.mental-model{display:grid;gap:8px;margin-bottom:12px;border:2px solid var(--line);padding:12px;background:var(--paper);box-shadow:4px 4px 0 var(--line)}.mental-model>h2{margin:0 0 2px;font:800 .7rem/1 var(--mono);text-transform:uppercase}.model-steps{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:700 .68rem/1.35 var(--mono)}.model-steps b{flex:0 0 150px}.model-steps span{border:1px solid var(--soft);padding:5px 7px;background:#f6f0e5}.model-steps.old{color:var(--muted)}.model-steps.new span{border-color:var(--blue);background:var(--blue-soft)}.model-steps i{font-style:normal;color:var(--blue)}
.runtime-status{min-height:32px;margin:0 0 12px;border-left:4px solid #ba8b38;padding:8px 10px;background:rgba(255,253,247,.75);font:700 .68rem/1.3 var(--mono)}body[data-runtime="ready"] .runtime-status{border-color:var(--green)}body[data-runtime="fallback"] .runtime-status{border-color:var(--red)}
.demo{margin-bottom:16px;overflow:hidden}.demo-body{padding:14px;background:var(--paper)}.demo-heading{display:grid;gap:7px;margin-bottom:12px}.demo-heading h2{margin:4px 0 0;font-size:clamp(1.75rem,7vw,3.6rem);line-height:.94;letter-spacing:-.045em}.demo-heading>p{max-width:58ch;margin:0;color:var(--muted);font:400 .9rem/1.38 var(--serif)}.demo-heading.stacked{display:grid}.demo-heading.stacked h2{font-size:clamp(1.7rem,5vw,2.5rem)}
.contract{display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 12px;border:1px solid var(--soft);background:#f7f1e7}.contract>div{min-width:0;padding:7px}.contract>div+div{border-left:1px solid var(--soft)}.contract b,.contract span{display:block}.contract b{margin-bottom:3px;color:var(--blue);font:800 .57rem/1 var(--mono);text-transform:uppercase}.contract span{font:400 .74rem/1.2 var(--serif)}
.flow-stage{position:relative;height:280px;overflow:hidden;border:2px solid var(--line);background:#fbf6ec;touch-action:none}.flow-stage canvas{display:block;width:100%;height:100%}.flow-block{position:absolute;z-index:2;width:82px;height:78px;min-height:0;border:2px solid #143b5b;padding:0;color:white;background:var(--blue);box-shadow:4px 4px 0 rgba(20,59,91,.3);touch-action:none;cursor:grab;user-select:none}.flow-block:active{cursor:grabbing}.flow-block span{font:800 .62rem/1.2 var(--mono);letter-spacing:.08em}.readout-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}.readout-row p,.plain-proof{margin:0;color:var(--muted);font:700 .66rem/1.35 var(--mono)}
.secondary-grid{display:grid;gap:16px}.compact{height:100%}.range-label{display:flex;justify-content:space-between;margin:2px 0 8px;font:800 .67rem/1 var(--mono);text-transform:uppercase}.range-label output{color:var(--blue)}input[type="range"]{width:100%;accent-color:var(--blue)}.measure-board{display:grid;grid-template-columns:minmax(0,1fr) 58px;gap:10px;height:230px;margin:12px 0}.measure-column{position:relative;overflow:hidden;border:2px solid var(--line);background:#fbf6ec}.measure-column::after{content:"DOM preview";position:absolute;right:5px;bottom:4px;color:var(--muted);font:700 .53rem/1 var(--mono)}#measure-lines{padding:12px;font:400 16px/21px var(--serif)}#measure-lines div{height:21px;white-space:nowrap}.height-ruler{position:relative;border-left:2px solid var(--line);background:repeating-linear-gradient(to bottom,transparent 0 20px,rgba(38,35,31,.14) 20px 21px)}.height-ruler span{position:absolute;inset:0 8px auto;background:var(--blue-soft);border-bottom:3px solid var(--blue)}.height-ruler b{position:absolute;left:7px;bottom:6px;writing-mode:vertical-rl;color:var(--blue);font:800 .62rem/1 var(--mono)}
.scale-triad{display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--line);background:#f7f1e7}.scale-triad div{min-width:0;padding:9px}.scale-triad div+div{border-left:1px solid var(--soft)}.scale-triad strong,.scale-triad span{display:block}.scale-triad strong{font:800 1.05rem/1 var(--mono)}.scale-triad span{margin-top:5px;color:var(--muted);font:400 .67rem/1.2 var(--serif)}.jump-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:9px 0}.jump-presets button{min-width:0;padding:.45rem .2rem}.virtual-proof{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;height:240px}.minimap{position:relative;border:2px solid var(--line);background:#f7f1e7}.minimap span{position:absolute;left:2px;right:2px;min-height:5px;background:var(--blue)}.minimap i{position:absolute;left:-3px;right:-3px;height:2px;background:var(--red)}.virtual-list{position:relative;overflow:auto;border:2px solid var(--line);background:#fbf6ec}.virtual-list>#list-spacer{width:1px;opacity:0}.virtual-list>#list-window{position:absolute;inset:0 0 auto}.virtual-row{position:absolute;left:0;width:100%;display:grid;grid-template-columns:44px 1fr;gap:8px;border-bottom:1px solid var(--soft);padding:7px 8px;background:rgba(255,253,247,.96);font:400 13px/18px var(--serif)}.virtual-row b{color:var(--muted);font:700 .58rem/1.4 var(--mono)}.virtual-row.target{background:var(--blue-soft);box-shadow:inset 4px 0 0 var(--blue)}#scale-proof{margin-top:8px}
.boundary{margin-top:18px;overflow:hidden}.boundary-body{padding:16px;background:var(--paper)}.boundary h2{max-width:20ch;margin:0 0 9px;font-size:clamp(1.5rem,4vw,2.5rem);line-height:1}.boundary p{max-width:72ch;margin:0;color:var(--muted);font:400 .92rem/1.5 var(--serif)}.source-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.source-links a{border-bottom:1px solid var(--blue);color:var(--blue);font:700 .66rem/1.3 var(--mono);text-decoration:none}
@media(min-width:760px){.hero{padding:54px 4px 30px}.mental-model{grid-template-columns:130px 1fr;align-items:center}.mental-model>h2{grid-row:1/3}.demo-body{padding:24px}.demo-heading{grid-template-columns:minmax(280px,.8fr) minmax(300px,1.2fr);align-items:end}.contract{max-width:760px}.flow-stage{height:360px}.secondary-grid{grid-template-columns:1fr 1fr}.compact{padding:18px}.compact .contract{grid-template-columns:1fr}.compact .contract>div{display:grid;grid-template-columns:120px 1fr;align-items:center}.compact .contract>div+div{border-left:0;border-top:1px solid var(--soft)}.compact .contract b{margin:0}.compact .demo-heading{grid-template-columns:1fr;align-items:start}}
@media(max-width:480px){.shell{width:min(100% - 18px,1120px)}.hero{padding:14px 2px 12px}.hero h1{max-width:none;margin:7px 0 9px;font-size:2rem;line-height:.9}.definition{font-size:.88rem;line-height:1.32}.mental-model{gap:5px;margin-bottom:8px;padding:9px}.mental-model>h2{margin-bottom:2px}.model-steps{display:grid;grid-template-columns:auto min-content auto min-content auto;gap:4px;font-size:.58rem}.model-steps b{grid-column:1/-1}.model-steps span{padding:4px 5px;font-size:.56rem;white-space:nowrap}.runtime-status{min-height:28px;margin-bottom:8px;padding:6px 8px;font-size:.6rem}.demo-body{padding:9px}.demo-heading{gap:4px;margin-bottom:8px}.demo-heading h2{font-size:1.75rem}.demo-heading>p{font-size:.78rem;line-height:1.25}.flow-stage{height:215px}.flow-block{width:68px;height:62px}.flow-stage+.contract{margin-top:8px}.contract span{font-size:.64rem}.contract b{font-size:.52rem}.playground-window-titlebar{font-size:.56rem}.measure-board{height:210px}.scale-triad strong{font-size:.82rem}.scale-triad span{font-size:.61rem}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}