/* ═══════════════════════════════════════════════════════════════════════════════════════ quackd — the browser simulator. Hand-authored CSS in the quackd-web design language (www.quackd.org): cream ground with a radial wash, film grain, purple/gold brand, Nunito Sans + DM Mono, 1rem radii, hard-drop button shadows, a 2px #7c4a9e focus ring. THREE RULES THAT DECIDE EVERY LATER QUESTION R1 The page has exactly two objects plus a brandline: .brandline, section.console, footer. Everything needed during a run lives inside the console: the credential band across the top, the arena beneath it with the cockpit as a full-height right column, and the deck — lane A "say it", lane B the log — under the arena. R2 Both ways of driving are visible AT ONCE, without scrolling. That simultaneity is the dual-control argument, and the LAYOUT is what makes it. This rule used to demand that the sentence box and the keycaps be adjacent in one lane, and they were — adjacent to each other and both under the fold, together with the key box, so a visitor typed a sentence, pressed Run and got an error about a credential the page had never shown them. The console is one screen now: the switch and 03 in a full-width band across the top, the arena with 01 and 04 beneath it, 02 down the right side spanning both. Nothing added here may push the band, the arena, the sentence box, the log or the keycaps off a real 1366×768 laptop — 641px of viewport once the browser has taken its chrome, which is the number to test against, not 768. Adjacency was a proxy for simultaneity; this is the thing itself. Do not restore the vertical stack. The bays are named, not numbered. They were numbered when the page was one column and the numbers read down it; in this layout the eye goes key, arena, sentence, log, keycaps, so a number on each heading only claimed an order that is not there. R3 Machine speech is mono, human speech is sans. Verb calls, results, #readout, keycaps, eyebrows and bay names are DM Mono; the goal line, the refusal paragraph and every .fine are Nunito Sans. This is deliberate — do not "fix" the mixed-family log. Exactly ONE dark surface exists on this page: .terminal-window (#483652). The log is content, not chrome. Everything else is cream. Section order below: tokens · reset · class registry · base/type · shell · brandline · console/stage · the model bar · stage chrome · deck · controls · cockpit · key box · terminal · footer · keyframes · responsive. ═════════════════════════════════════════════════════════════════════════════════════ */ /* ── tokens ──────────────────────────────────────────────────────────────────────────── */ :root { /* Was `dark`. Every native control — the takes its own min-content width (181px for "Anthropic (Claude)") off the top regardless of `min-width: 0`, so an even split left the model field 162px for a 166px value and "claude-sonnet-5" read as "claude-sonnet-". #key still gets 246px for an "sk-ant-…". */ #key-box[open] > .row { flex: 3 1 18rem; } #key-box[open] > #key { flex: 2 1 12rem; } #key-box[open] > #base-url { flex: 2 1 12rem; } #key-box[open] > .fine { flex: 1 1 100%; margin: 0; max-width: none; font-size: var(--t-micro); } #key-box[open] > #provider-note { flex: 1 1 100%; margin: 0; font-size: var(--t-micro); } #provider-note:empty { display: none; } /* The privacy note is 228 characters and it takes TWO 17px lines at this width. It is the reason a visitor is willing to paste a key at all, so it is never truncated. If it is ever "tidied" back to --t-fine with its 62ch measure the band grows ~35px and takes all of it out of the arena. */ /* the deck: 01 | 04, 50/50, and lane B fills the row rather than floating in it */ .deck { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } .lane { padding: var(--s-3); } .lane + .lane { border-left: 1px solid var(--edge-3); } .lane-a > * + * { margin-top: var(--s-2); } .deck > .lane:last-child { display: flex; } .transcript-box { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } #transcript { flex: 1 1 auto; max-height: clamp(6rem, 17vh, 26rem); } /* max-height and overflow-y stay ON THE
    — that is the element app.js scrolls. flex-grow only lets it reach that cap; it never replaces it. The cap is what stops a fifty-line log from making bay 04 taller than bay 01 and growing the whole card. */ /* 02, the right column, spanning the arena and the deck */ #manual { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; /* lets THIS grid's own 1fr row shrink below its content. Necessary, and on its own not sufficient — see the `contain: size` on .key-notes, which is what actually stops #manual inflating the console. */ margin: 0; padding: var(--s-3); border-width: 0 0 0 1px; border-color: var(--edge-guard); border-radius: 0; } /* The off-state signal was an OUTSET 3px ring; this column's own edges and the console's `overflow: hidden` would scissor it, so it goes inset. */ body.no-quackd .cockpit { border-color: #e0b93f; box-shadow: inset 0 0 0 2px rgba(245, 197, 51, 0.55), var(--shadow-guard); } /* "DRIVE THE DUCK … ALWAYS LIVE" is a longer string than the numbered version it replaced, but it also lost the 24px separator rule that used to be hidden here for exactly this reason. The two roughly cancel. Verified not to wrap in the column at this tier; if a longer name is ever given to this bay, check it again. */ .keycaps { gap: var(--s-2); } .legend { font-size: var(--t-micro); row-gap: 0.3rem; margin-top: 0; } .legend dd { max-width: none; } .key-notes { /* THE ONE DECLARATION THAT KEEPS #manual OUT OF THE CONSOLE'S ROW SIZING, and it looks like a micro-optimisation. #manual spans rows 2 and 3, and a row-spanning grid item grows every `auto` track it spans to fit its own content. `min-height: 0` zeroes only the MIN-content contribution; the MAX-content contribution still grows those tracks, so the legend used to stretch the arena's row and the deck's row by ~34px each — 67px past the fold, a 34px strip of dead card under the arena, and the glass HUD (which anchors to .stage, not to the canvas) hanging off the bottom of the render. `contain: size` makes this box contribute NOTHING to intrinsic sizing, so the rows are sized by the arena and the deck alone, #manual stretches to whatever they came to, and the 1fr row above hands the remainder here to scroll. The cheap regression check is that .stage's height equals canvas#view's height at 1366×641. min-height is the floor if a browser ever leaves this row indeterminate: with containment an auto height would collapse the legend to nothing. */ contain: size; min-height: 7rem; overflow-y: auto; overscroll-behavior: contain; margin-top: var(--s-2); padding-top: var(--s-2); /* the ring is 2px at a 3px offset and outlines do not scroll into view, so a scroll container flush with its content clips it left and right (FINDING: .why's summary) */ padding-inline: 5px; margin-inline: -5px; border-top: 1px solid var(--edge-3); scrollbar-width: thin; scrollbar-color: var(--edge-soft) transparent; } /* The MAP is pinned and the WORDS scroll. All thirteen keycaps are visible at every height; only the reading matter behind them gives way, and only when the arena and the deck did not leave it room. */ } /* THE FOLD, AND HOW THE ARENA PAYS FOR IT. --------------------------------------------------------------------------------------- Everything in the console except the arena is a fixed number of pixels tall: the band is the summary, the privacy note, one field row and the provider note; the deck is the 01 head, the input, the button row and the chips; the cockpit no longer contributes anything (see `contain: size` above). So the console's height is that constant plus the canvas, and the canvas is the only part that can give. That is why the height below is `calc(100vh - )` and not a bare `Nvh`. A fraction of the viewport is only ACCIDENTALLY right at one height: 32vh fitted a 641px laptop and overflowed a 768px one by 70px, because the fixed remainder does not scale. Subtracting the measured remainder makes the fit a straight line instead of a staircase, so every height from ~590px up lands the same way and there is no dead zone where a TALLER viewport overflows worse than a shorter one. It is still viewport-relative, as it must be; it is just relative to the space that is actually left. The constant is the measured chrome above and below the arena, rounded up for slack, and it therefore changes when that chrome does. If the privacy note ever wraps to a third line or a bay grows a row, this number is what you re-measure — the symptom will be the card going back under the fold. The clamp floor is the point at which the arena stops being the centrepiece and we let the page scroll instead. HARD RULE unaffected: this resolves on resize only, never per frame, so view.js's WebGL buffer is reallocated exactly as often as it was before. */ @media (min-width: 62rem) { :root { /* everything above and below the arena, measured: the nav and the wrap's top padding, the brandline, the band, the deck, and a few px of slack. */ --fold-chrome: 35rem; --arena-floor: 12rem; --arena-cap: 30rem; /* and what the band costs when it does not fit on one line at this WIDTH — see below. */ --band-wrap: 0rem; } /* `vh`, not `dvh`: this rule only runs at 62rem and up, where there is no collapsing URL bar to care about, and `dvh` inside a var()-bearing declaration cannot fall back to the line above it — it would compute to `auto` on a browser that lacks the unit. */ canvas#view { height: clamp(var(--arena-floor), calc(100vh - var(--fold-chrome) - var(--band-wrap)), var(--arena-cap)); } } /* THE BAND'S OWN WIDTH TIER. Below ~72rem the credential track gets too narrow for the provider/model row and the key field to share a line, so the band takes an extra line (and the privacy note a third) — 65px the height tiers cannot see, because it is a function of width. Narrowing the switch's track buys most of it back; the rest is declared here so the arena still knows what is left. */ @media (min-width: 62rem) and (max-width: 72rem) { .model-bar { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); } :root { --band-wrap: 0.25rem; } } /* and narrower still, where the deck's own bays start wrapping too */ @media (min-width: 62rem) and (max-width: 68rem) { :root { --band-wrap: 2rem; } } /* THE LAPTOP TIER, and it starts far higher than it used to. It used to open at 46rem (736px) and so a literal 768px viewport got the TALLEST variant and none of these reductions — the reason the required 1366×768 case overflowed by 70px while the shorter 1280×720 overflowed by 35px. Opening it at 58rem (928px) means the two reductions that cost the least — a brand line that repeats the nav and a second row of optional chips — are spent well before the fold is actually in danger. */ @media (min-width: 62rem) and (max-height: 58rem) { :root { --fold-chrome: 28rem; --arena-floor: 11rem; --arena-cap: 28rem; } .wrap { padding-block: var(--s-1) var(--s-4); } .brandline .lede { display: none; } .brandline { margin-bottom: var(--s-2); } /* The chips become ONE SCROLLING ROW, worth 25px and the cheapest 25px on the page. Three declarations, and all three are load-bearing: · nowrap on the container, or it is two rows; · `flex: 0 0 auto; white-space: nowrap` on the CHIPS, or nowrap only squeezes them and each one takes two text lines — taller than the two-row version it replaced; · padding-block for the focus ring. Outlines do not contribute to scrollable overflow, so a scroll container flush with its content clips the ring instead of scrolling to it. The negative margin hands the padding back, so the row occupies what it did. Never a `text-overflow` here: a half-shown example is not an example. */ .examples { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-block: 5px; margin-block: -5px; } .examples .chip { flex: 0 0 auto; white-space: nowrap; } .row.actions { margin: var(--s-1) 0 var(--s-1); } /* the bottom margin stays --s-1: #run's 7px plinth must keep clearing .examples */ .keycaps { gap: var(--s-1); margin-top: var(--s-1); } /* The boot panel is 289px of content against an arena of ~217px here, and `safe center` lets it scroll rather than clip its head off — correct, but a half-shown line of the 45MB note reads as a bug and not as an affordance. Tightened by 72px it fits whole at the sizes this tier is actually about; below 600px of viewport it scrolls again, which is what the overlay was built to do. */ .overlay { padding: var(--s-3); gap: var(--s-1); } .boot-mark { width: 38px; height: 38px; } } /* THE VALVE — a real laptop: 1366×768 minus Windows Chrome's chrome is 641px, 1280×720 is 593px, and a bookmarks bar takes another 40. The eyebrow goes here, and the 26px it costs go straight into the arena: the nav already carries the wordmark, "a Microduck with a brain" and a status pill that says "MuJoCo · WASM · your key stays in this tab", which is very nearly what the eyebrow says. The page is not left mute — it stops saying the same thing twice at the one height where the duck is fighting for pixels. Opening at 46rem (736px) rather than the 40rem this used to use is deliberate: 641px is 40.06rem, so the old boundary sat ONE CSS pixel from the single most important case and a bookmarks bar flipped it. */ @media (min-width: 62rem) and (max-height: 46rem) { .brandline { display: none; } :root { --fold-chrome: 26.5rem; --arena-floor: 9.5rem; } } @media (max-width: 61.99rem) { /* display:contents dissolves the lane boxes so BOTH columns' children become direct grid items of .deck and stack in one column. Safe here: both lanes are plain
    s with no implicit ARIA role and no border or background of their own below 62rem. WARNING: anything later given .lane as a visual box will silently vanish at this width. NO `order` here, and that is the point. Document order already reads 01 Say it, 02 Drive it, 03 Your API key, 04 Transcript — the numbers in their own sequence, with the sentence box and the keycaps adjacent, which is R2. `order` had it running 01 → 04 → 02 → 03 with the log wedged between the two halves of the dual-control argument, and it moved only the paint: Tab still followed the DOM, so focus jumped from the last chip to the visually last block and then back up to the transcript's clear button (WCAG 2.4.3). #key-box and #manual are no longer lane children — #key-box lives in .model-bar above the arena and #manual is the console's last child — so the rule that used to reset their margins names .console > #manual instead. Document order is still the paint order and the Tab order: 03 the key, the arena, 01, 04, 02. The key box being FIRST on a phone is the brief, and the keycap map being last is right, because a phone has no keyboard. */ .lane { display: contents; } /* Not `* + *`: a sibling combinator reads the DOM, so the transcript — the first child of the second lane — would be the only block in the stack with no rule above it. */ .deck > .lane > * { padding: var(--s-3) var(--gutter); margin-top: 0; border-top: 1px solid var(--edge-3); } /* It carries an id, so the 0-2-0 rule above cannot reach the margin its base rule sets. */ .console > #manual { margin: 0; padding: var(--s-3) var(--gutter); border-width: 1px 0 0; /* .cockpit's own --edge-guard is the card's border colour; in the stack this line is one of the rules BETWEEN bays, and those are all --edge-3. */ border-color: var(--edge-3); border-radius: 0; } /* 01's head and its field are ONE bay. The label moved out of the form into .say-head so that "01 SAY IT" and "Tell the duck what to do" share a baseline above 62rem; down here that would put the between-bays rule and 33px of padding between a label and the input it names, so the head keeps the rule that .deck already draws above it and the form keeps none at all. Worth 33px of phone height as well. */ .lane-a > .say-head { border-top: 0; } .lane-a > #goal-form { border-top: 0; padding-top: 0; } } /* Un-floating the stage chrome is a design decision, not a fallback: a glass pill over a 320px-wide arena covers the duck. */ @media (max-width: 48rem) { .stage-bar { position: static; padding: var(--s-2); border-top: 1px solid var(--edge-3); background: rgba(255, 255, 255, 0.7); backdrop-filter: none; flex-direction: column; align-items: stretch; } .glass { border: 0; box-shadow: none; background: none; border-radius: 0; flex-wrap: wrap; padding: 0; } canvas#view { height: clamp(15rem, 42vh, 22rem); } /* The centring fix that used to live here is now on the base `.overlay` rule — the shorter desktop arena exposed the same clipping — so only the tighter padding remains. */ .overlay { padding: var(--s-3); } } @media (max-width: 60rem) { /* The pill's claim is not lost with it: the key box repeats "The key stays in this tab" in full, one screen down, where the field it is about actually lives. */ .status-pill { display: none; } } /* Short screens lose the lede, never the eyebrow: a 1366×768 laptop is about 660px of viewport after browser chrome, and dropping both left the page with no brand voice at all above the fold. The eyebrow is one 11px line and it says what this is. */ @media (max-height: 46rem) { .brandline .lede { display: none; } } @media (max-width: 30rem) { /* The provider select and the model name share a row everywhere else. At this width the model track is ~128px and "claude-sonnet-5" needs 166, so the value the visitor most needs to READ is silently clipped to "claude-sonn". Two rows instead. */ #key-box .row { flex-wrap: wrap; } #key-box .row > * { flex: 1 1 100%; } .legend { grid-template-columns: 1fr; } .legend dt { margin-top: 0.35rem; } .row.actions { flex-wrap: wrap; } } @media (max-width: 26rem) { .nav-shell h1 small { display: none; } /* .cluster-2 also carries .cluster, and both selectors weigh 0-1-0, so a bare `.cluster` override here won on source order and reflowed the 2×3 block into 3×2 — K R G / O 1 2. kbd's own min-width has to come down with the track or every cap overflows it. */ .cluster { grid-template-columns: repeat(3, 1.9rem); } .cluster-2 { grid-template-columns: repeat(2, 1.9rem); } kbd { min-width: 1.9rem; } } /* A finger is not a mouse pointer. */ @media (pointer: coarse) { button, .button, select, input, summary { min-height: 2.75rem; } }