/* The sketch kit (the founder, 23 Oct 2026, via /consult 11:31 and 11:32): the frozen sketches' own styles, lifted as they
   are into one shared file, so every new-style screen, prototype and live page is styled from the same place.
   Sources, unedited: prototypes/agree/facts-first-REFERENCE/index.html (the openings: everything inside the phone),
   facts-first-signing-REFERENCE (the Short | In full switch, typed fields, the gold one-way press) and the live tool's
   walker-passed waiting press (cloudflare/rs-agreement/public/facts.html, "Two more to choose").
   Left out on purpose, because the founder's test fails them on a member screen (tests/discipline/sketch-kit.test.ts):
   the underlined text press (.flip) and the ruled lists (.sec li, details.answers li).
   Served by the live tool as /kit/sketch.css; a prototype links it relatively
   (../../../cloudflare/rs-agreement/public/kit/sketch.css). Colours and type are R&D's to propose and the founder's to
   choose (answer 111): change them here, once, never per page.
   How each piece is written (as in the sketches):
     the top        <div class="top"><div class="toprow"><button class="back">Back</button><span class="brand">Reputable Sitters</span></div><div class="progress"><i style="width:40%"></i></div></div>
     so far         <div class="sofar show"><small>So far</small>…</div>
     the question   <div class="stage"><div class="page in"><p class="hook">…</p><h2 class="q">…</h2><p class="help">…</p> …</div></div>
     a tile         <div class="tiles"><button class="tile" aria-pressed="false"><span class="t">Yes</span><span class="s">…</span></button></div>; where it stands: <span class="tag you">Waiting for you</span> inside it (the tags' colours, below)
     a sit's band  <div class="card soft"><small>Your sit · 3 to 17 November</small><div class="line">…</div></div>
     a reply       <button class="who"><div class="nm"><b>Tad B.</b><span class="ok">Agreed</span></div><div class="meets"><b>Meets both lines you marked</b></div></button>
     a section head <p class="label">Past sits</p>; the quiet foot line: <p class="quietline"><button>Sign out</button> · <button>Privacy</button></p>
     the press      <div class="foot"><button class="go">That's everyone</button></div>; not ready yet: <button class="go waits" disabled>Two more to choose</button>
     the table      <div class="tblhead"><span>You</span><span></span><span>Tad</span></div><div class="trow apart"><div class="topic">…</div><div class="cells"><div class="cell">…</div><svg/><div class="cell them">…</div></div></div>
     Short | In full <div class="seg"><button aria-pressed="true">Short</button><button aria-pressed="false">In full</button></div><div class="rt"><small>…</small><p>…</p><div class="full">…</div></div> */
:root{
  --bg:#ffffff; --soft:#f3f1ec; --line:#dcd8cf;
  --ink:#16130f; --ink2:#4a443b; --ink3:#857d71;
  --accent:#1f4d3a; --accent-soft:#e6efe9; --amber:#9a6a00; --amber-soft:#fff4dc; --gold:#d4a84b;
  /* The founder's colour choices, 23 Oct (Lead 14:11): B, the dark green bar at the top with Back and the name in white
     over a white page, no mint ground (13:48; R&D's prototypes/agree/colour-proposals/b-green-header.css), and the main
     press a neutral charcoal (14:10; R&D's b-press-charcoal-2.css, white words 12.6:1). */
  --top:var(--accent); --on-top:#ffffff; --top-line:rgba(255,255,255,.25); --top-line-fill:#bfe3cc;
  --press:#333333;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans)}
button,input,textarea{font:inherit;color:inherit}

/* The screen fills the phone, as the sketch's phone frame does (max 460px wide, centred on anything wider). */
.screen{max-width:460px;margin:0 auto;height:100svh;display:flex;flex-direction:column;position:relative;background:var(--bg)}

/* The top: Back beside the name, and the thin progress line. */
.top{padding:10px 20px 8px;background:var(--top)}
.toprow{display:flex;justify-content:space-between;align-items:center;min-height:28px}
.back{background:none;border:0;padding:4px 0;font-size:16px;color:var(--on-top);cursor:pointer}
.back[hidden]{visibility:hidden;display:block}
.brand{font-size:13px;font-weight:600;color:var(--on-top)}
/* The name as a press that takes you home from any screen (the founder, 23 Oct 12:39, item 3): the same look, no underline. */
button.brand{background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.progress{height:6px;background:var(--top-line);border-radius:3px;margin-top:10px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--top-line-fill);border-radius:3px;transition:width .45s cubic-bezier(.2,.8,.2,1)}

/* The so-far band: what you've said, quietly, once there's something to show. */
.sofar{margin:14px 20px 0;padding:10px 14px;background:var(--accent-soft);border-radius:12px;font-size:15px;line-height:1.4;color:var(--accent);font-weight:600;display:none}
.sofar.show{display:block;animation:pop .3s ease-out}
.sofar small{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin-bottom:2px}
.sofar .new{animation:flash 1.2s ease-out}
@keyframes flash{0%{background:rgba(31,77,58,.22)}100%{background:transparent}}
@keyframes pop{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}

/* One thing per screen: the accent line, the question (large and dark), the quieter help. */
.stage{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative}
.page{padding:22px 20px 24px}
.page.in{animation:slidein .32s cubic-bezier(.2,.8,.2,1)}
.page.inback{animation:slideback .32s cubic-bezier(.2,.8,.2,1)}
@keyframes slidein{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
@keyframes slideback{from{transform:translateX(-28px);opacity:0}to{transform:none;opacity:1}}
.hook{font-size:15px;font-weight:600;color:var(--accent);margin:0 0 8px}
.q{font-size:30px;line-height:1.12;font-weight:750;letter-spacing:-.02em;margin:0 0 8px}
.help{font-size:16px;line-height:1.45;color:var(--ink2);margin:0 0 20px}

/* A section's head ("PAST SITS"), the your-sits sketch's. */
.label{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin:22px 0 8px}

/* Tiles: the whole thing is the target. */
.tiles{display:grid;gap:10px}
.tiles.two{grid-template-columns:1fr 1fr}
.tile{position:relative;display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:64px;padding:14px 16px;border:2px solid var(--line);border-radius:16px;background:var(--bg);text-align:left;cursor:pointer;transition:transform .12s,border-color .15s,background .15s}
.tile:active{transform:scale(.97)}
.tile .t{font-size:18px;font-weight:650;line-height:1.2}
.tile .s{font-size:14px;line-height:1.35;color:var(--ink3)}
.tile[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:#fff}
.tile[aria-pressed="true"] .s{color:rgba(255,255,255,.82)}
.tile[aria-pressed="true"]::after{content:"";position:absolute;top:12px;right:12px;width:10px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg)}
.tile{--art-ground:#fff}
.tile[aria-pressed="true"]{--art-ground:var(--accent)}
.tile .art{display:block;width:78px;height:58px;margin:-4px 0 4px -8px}
.tile.row{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px}
.tile.row .art{width:66px;height:50px;margin:0 0 0 -6px;flex:none}
.tile .tx{display:flex;flex-direction:column;gap:3px}
.herd{display:flex;flex-wrap:wrap;gap:0 2px;margin:2px 0 8px -6px}
.herd svg{width:62px;height:47px}
.tile.yes{border-color:var(--accent);border-width:2.5px}
.tile.yes .t{color:var(--accent)}
.tile.yes[aria-pressed="true"] .t{color:#fff}
.tile.wide{grid-column:1 / -1}
/* A tile that says where something stands and opens nothing (yet), the your-sits sketch's .tile.flat. */
.tile.flat{cursor:default}
.tile.flat:active{transform:none}
/* Where a tile's thing stands ("Agreed with Tad"; amber when it waits on you: "Waiting for you"), the your-sits sketch's. */
/* The tags' colours, by meaning (the founder 14:08; Lead 14:09, 14:15; R&D's docs/seats/drafts/TAG-COLOURS-2026-10-23.md):
   one list, here only. Every tag reads its colour from it, and no screen sets a tag's colour itself (the kit's test). A
   new kind of message gets a colour when it's first needed, added here. A price is never a tag colour: plain words. */
:root{
  --tag-done:#1f4d3a; --tag-done-bg:#e6efe9;       /* settled or done (the default), 8.2:1 */
  --tag-you:#6f5216; --tag-you-bg:#f3ead6;         /* something for you to do, 6.1:1 */
  --tag-others:#2c4a6b; --tag-others-bg:#e2eaf3;   /* waiting on someone else, a date, or news, 7.5:1 */
  --tag-late:#ffffff; --tag-late-bg:#a8361b;       /* past a date, only then, 6.6:1 */
  --tag-spare:#5a3f6e; --tag-spare-bg:#ede6f3;     /* held for the next kind that needs one, 7.3:1 */
}
.tile .tag{align-self:flex-start;margin-top:5px;font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--tag-done);background:var(--tag-done-bg);border-radius:8px;padding:3px 8px}
.tile .tag.you{color:var(--tag-you);background:var(--tag-you-bg)}
.tile .tag.others{color:var(--tag-others);background:var(--tag-others-bg)}
.tile .tag.late{color:var(--tag-late);background:var(--tag-late-bg)}
.tile .tag.price{color:var(--ink2);background:none;padding:3px 0;letter-spacing:0;font-size:13px}
.tile.big{min-height:84px}
.tile.quiet{background:var(--soft);border-color:var(--soft)}
.tile.quiet[aria-pressed="true"]{background:var(--ink);border-color:var(--ink)}
.stepper{display:flex;align-items:center;gap:8px;margin-top:6px}
.stepper button{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.2);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.stepper output{font-size:20px;font-weight:700;min-width:1.4em;text-align:center}

/* Scroll wheels, like a phone's clock. */
.wheels{display:grid;grid-template-columns:1fr 1.45fr;gap:10px;position:relative;margin-top:4px}
.wcol .cap{text-align:center;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin:0 0 6px}
.wheelbox{position:relative;border-radius:16px;background:var(--soft);overflow:hidden}
.wheel{height:236px;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-mask-image:linear-gradient(transparent,#000 32%,#000 68%,transparent);mask-image:linear-gradient(transparent,#000 32%,#000 68%,transparent)}
.wheel::-webkit-scrollbar{display:none}
.wheel .pad{height:96px}
.wheel .it{height:44px;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;white-space:nowrap;font-size:17px;color:var(--ink3);cursor:pointer;transition:color .15s,font-size .15s}
.wheel .it.on{color:var(--ink);font-weight:700;font-size:18.5px}
.band{position:absolute;left:8px;right:8px;top:96px;height:44px;border-radius:10px;background:var(--bg);box-shadow:0 1px 3px rgba(0,0,0,.08);pointer-events:none}
.wheel{position:relative;z-index:1}
.readback{margin:16px 0 0;font-size:20px;font-weight:650;text-align:center;color:var(--accent)}

.scene{display:block;width:100%;height:118px;object-fit:contain;margin:-8px 0 8px;opacity:.88}
.pausecard{margin-bottom:18px}
.lead{font-size:19px;line-height:1.4;font-weight:600;margin:0 0 10px}
.quietline{font-size:15px;line-height:1.45;color:var(--ink3);margin:0}
/* The quiet foot line's words as presses ("Sign out · Privacy"; the founder 11:26, Lead 11:55): as quiet as the line, no
   underline (R&D's, facts-first-your-page). */
.quietline button{background:none;border:0;padding:0;cursor:pointer;color:inherit;font-weight:inherit}
.send{width:100%;border:2px solid var(--accent);border-radius:16px;background:var(--accent);color:#fff;font-size:18px;font-weight:700;padding:17px;cursor:pointer;margin:4px 0 12px}
.sendnote{font-size:14px;color:var(--ink3);margin:-4px 0 14px;text-align:center}

/* The table: you and your sitter, line by line. Matched overlaps; apart is two separate circles (the founder, 19 Oct). */
.tblhead{display:grid;grid-template-columns:1fr 40px 1fr;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);padding:4px 0 6px}
.tblhead span:last-child{text-align:right}
.tgroup{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin:16px 0 4px;color:var(--ink2)}
.trow{padding:10px 0;border-top:1px solid var(--soft)}
.trow .topic{font-size:13px;color:var(--ink3);font-weight:600;margin-bottom:5px}
.trow .cells{display:grid;grid-template-columns:1fr 40px 1fr;align-items:center;gap:0}
.trow .cell{font-size:16px;font-weight:650;line-height:1.25}
.trow .cell{padding-right:6px;min-width:0;overflow-wrap:anywhere}
.trow .cell.them{text-align:right;padding-right:0;padding-left:6px}
.trow .wait{height:12px;border-radius:6px;background:var(--soft);margin-left:auto;width:70%}
.trow svg{display:block;margin:0 auto}
.trow.apart{background:#fff4dc;border-top-color:transparent;border-radius:12px;padding:10px 12px;margin:6px -12px}

/* The end. */
.done{font-size:34px;font-weight:800;letter-spacing:-.02em;margin:4px 0 12px;line-height:1.08}
.card{border-radius:18px;background:var(--accent);color:#fff;padding:18px 18px 16px;margin:0 0 22px;animation:pop .4s ease-out}
.card small{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:.75;margin-bottom:6px}
.card .line{font-size:20px;font-weight:650;line-height:1.35}
.card .line div{padding:3px 0}
.card.other{background:var(--soft);color:var(--ink)}
/* The short list (facts-first-your-sits-REFERENCE, "Your usual answers"): each line's name, and its answer to the right.
   Lifted without the sketch's dividing lines, which the founder's test fails on a member screen (as the lists above).
   Its own name, never the sketch's "rows": the homebook's sketch calls its stack of row tiles "rows", and this rule laid
   out every div inside them, an open row's body squeezed beside its name (Build 23 Oct 21:07). */
.shortlist > div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;font-size:16px}
.shortlist > div span:first-child{color:var(--ink2)}
.shortlist > div span:last-child{font-weight:650;text-align:right}
.fit{border-radius:14px;padding:12px 14px;margin:0 0 10px;font-size:16px;line-height:1.4;background:var(--soft)}
.fit.raise{background:#fff4dc}
.fit b{display:block;font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:3px;color:var(--ink2)}

/* The thumb's button. */
.foot{padding:12px 20px calc(18px + env(safe-area-inset-bottom,0px));background:linear-gradient(rgba(255,255,255,0),var(--bg) 30%)}
.go{width:100%;border:0;border-radius:16px;background:var(--press);color:#fff;font-size:18px;font-weight:700;padding:18px;cursor:pointer;transition:transform .12s,opacity .2s}
.go:active{transform:scale(.98)}
.go[disabled]{opacity:.25;cursor:default}
.foot[hidden]{display:none}

/* A press that can't go yet says what's missing in its own words ("Two more to choose"): readable, and still plainly not
   ready (the walker, 22 Oct 00:48). Never a bare .go[disabled] with no words. */
.go.waits[disabled]{opacity:1;background:var(--soft);color:var(--ink2)}
.send.waits[disabled]{background:var(--soft);border-color:var(--soft);color:var(--ink2);cursor:default}
/* Signing: one press, the house's gold for a one-way act (the signing sketch). */
.sign{width:100%;border:0;border-radius:16px;background:var(--gold);color:#1b1407;font-size:19px;font-weight:800;padding:19px;cursor:pointer;animation:pop .3s ease-out}

/* A reply on the sit's page (the your-sits sketch's "Who's replied"): the name and where it stands on one line, then
   their lines; amber while it waits, the accent once it meets what she marked. */
.who{border:2px solid var(--line);border-radius:16px;padding:14px 16px;margin:0 0 10px;cursor:pointer;background:var(--bg);display:block;width:100%;text-align:left}
.who .nm{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.who .nm b{font-size:18px;white-space:nowrap}
.who .nm span{font-size:13px;font-weight:700;color:var(--ink3);text-align:right}
.who .nm span.ok{color:var(--accent)} .who .nm span.wait{color:var(--amber)}
.who .lines{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:8px}
.who .ln{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--ink2)}
.who .ln.mark{font-weight:700;color:var(--ink)}
.who.waiting{border:0;background:none;padding:8px 2px;cursor:default}
.who .meets{font-size:14px;color:var(--ink2);margin-top:6px}
.who .meets b{color:var(--accent)}
/* The filter press over a list ("What matters most to you … Change"), the your-sits sketch's. */
.filter{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;border:2px solid var(--line);border-radius:14px;background:var(--bg);padding:11px 14px;margin:0 0 12px;cursor:pointer;text-align:left}
.filter small{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
.filter b{font-size:16px}
.filter em{font-style:normal;font-size:14px;font-weight:700;color:var(--accent);flex:none}
/* The soft accent card at the top of a sit's screens ("Your sit · 3 to 17 November"), the your-sits sketch's .card
   (its index.html:103-105), here beside the end's dark card. */
.card.soft{background:var(--accent-soft);color:var(--ink);padding:16px 18px;margin:0 0 16px;animation:none}
.card.soft small{color:var(--accent);opacity:1}
.card.soft .line{font-size:17px;line-height:1.4}

/* Short | In full: long wording short by default, the full wording one press away (the signing sketch's read-through). */
.seg{display:inline-flex;background:var(--soft);border-radius:12px;padding:4px;margin:0 0 14px}
.seg button{border:0;background:none;border-radius:9px;padding:8px 16px;font-weight:650;cursor:pointer;color:var(--ink2)}
.seg button[aria-pressed="true"]{background:var(--bg);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.rt{border-top:1px solid var(--soft);padding:11px 0}
.rt small{display:block;font-size:13px;color:var(--ink3);font-weight:600;margin-bottom:3px}
.rt p{margin:0;font-size:16.5px;line-height:1.4;font-weight:600}
.rt .full{font-size:14.5px;line-height:1.5;color:var(--ink2);font-weight:400;margin-top:6px;padding-left:10px;border-left:3px solid var(--soft)}
.rt .full .ct{font-weight:650;color:var(--ink);margin-top:6px}
/* The read-through's fold, "And the standard clauses every agreement has" (the frozen signing sketch's details.std, without
   its ruled line). */
details.std{margin-top:12px;padding-top:10px}
details.std summary{font-weight:650;cursor:pointer;padding:6px 0}

/* Writing: the only typing, kept to the end (the signing sketch). */
.field{display:block;width:100%;border:2px solid var(--line);border-radius:14px;padding:16px;font-size:20px;font-weight:600;background:var(--bg);outline:none;margin:0 0 10px}
.field:focus{border-color:var(--accent)}
.field::placeholder{color:#b9b2a6;font-weight:500}


/* The public pages (answer 128; R&D's drawing prototypes/agree/facts-first-public, f072ec27a; Build 24 Oct): the same
   pieces as the tool's screens, as plain links on pages with no script. A tile or the name at the top can be a link, and
   looks exactly as the button does. */
a.tile, a.brand, a.back{text-decoration:none}
a.tile{color:inherit}
/* The quiet foot line's words as links (the library's "listen.reputablesitters.com/stories, or listening@…"): as quiet as
   the line, as its presses are (.quietline button). */
.quietline a{color:inherit;text-decoration:none}
/* A public page (body.public) scrolls as a page, at the window's width, with the drawing's widths (R&D's ?full rules):
   a phone as the tool; 600 to 899px a centred 680 column, tiles two across, a lone tile at a tile's width; from 900px
   one 1080 content width the top bar's row shares, each page laid out for it, tiles at phone size, never stretched. */
body.public .screen{max-width:none;height:auto;min-height:100svh}
body.public .stage{overflow:visible}
/* The top bar and the one press stay in reach as the page scrolls, as on the drawing's phone (the questions page first). */
body.public .top{position:sticky;top:0;z-index:2}
body.public .foot{position:sticky;bottom:0;z-index:2}
/* The one press as a plain link (a guide's "Start an agreement"): it looks exactly as the button does. */
a.go{display:block;box-sizing:border-box;text-align:center;text-decoration:none}
/* A guide: a reading page made of the kit's pieces, at the sizes R&D drew a reading page with
   (prototypes/agree/facts-first-country; scripts/library-guide.ts says which piece each part of a guide becomes). */
.scr-guide .quietline.meta{margin:0 0 20px}
.scr-guide h2.label{margin:30px 0 8px}
.scr-guide .hook ~ .hook{margin-top:18px}
.scr-guide .lead{margin:18px 0 16px}
.scr-guide .fit{margin-bottom:14px}
.scr-guide .fit div{padding:4px 0}
.scr-guide .fit ol{margin:0;padding-left:20px}
.scr-guide .fit ul{margin:0;padding-left:18px}
.scr-guide .fit li{padding:4px 0}
.scr-guide .fit li div{padding:0 0 4px}
/* Only a card's own head (its first bold line) is the kit's small label; bold inside its lines stays bold words. */
.scr-guide .fit li b, .scr-guide .fit div b{display:inline;font-size:inherit;letter-spacing:normal;text-transform:none;margin:0;color:var(--ink)}
.scr-guide .help a, .scr-guide .lead a, .scr-guide .fit a{color:var(--accent);font-weight:600;text-decoration:none}
.scr-guide .src{margin:-4px 0 14px}
.scr-guide .src .tile{min-height:0;padding:10px 14px;border-radius:12px}
.scr-guide .src .tile .t{font-size:14.5px;font-weight:600}
.scr-guide .card.soft{margin-top:26px}
.scr-guide .card.soft .line + .line{margin-top:6px}
@media (min-width:600px) and (max-width:899px){
  body.public .top, body.public .foot{padding-inline:max(24px, calc((100vw - 680px) / 2))}
  body.public .stage .page{max-width:680px;margin:0 auto;padding:32px 24px 48px}
  body.public .scene{height:150px}
  body.public .foot .go{max-width:420px;display:block;margin:0 auto}
  body.public .page > .tiles{grid-template-columns:repeat(2, minmax(0, 1fr))}
  body.public .page > .tiles > .tile.wide, body.public .page > .tiles > :only-child{grid-column:1 / -1}
  body.public .page > .tiles:has(> :only-child){max-width:420px}
  body.public .page.scr-q > .tiles, body.public .page.scr-stQ > .tiles{grid-template-columns:1fr}
  body.public .page.scr-qIntro, body.public .page.scr-q, body.public .page.scr-qEnd, body.public .page.scr-stIntro, body.public .page.scr-stQ,
  body.public .page.scr-stKeep, body.public .page.scr-stDone, body.public .page.scr-stDelete{max-width:600px}
}
@media (min-width:900px){
  body.public .page > .tiles:has(> :only-child){max-width:500px}
  body.public .top{padding-inline:max(32px, calc((100vw - 1080px) / 2))}
  body.public .stage .page{max-width:1080px;margin:0 auto;padding:40px 32px 64px}
  body.public .scene{height:170px;margin:0 0 18px;object-fit:contain;object-position:left}
  body.public .q{font-size:44px;letter-spacing:-.025em}
  body.public .help{font-size:18px;max-width:640px}
  body.public .quietline{max-width:640px}
  body.public .foot{padding-inline:max(32px, calc((100vw - 1080px) / 2))}
  body.public .foot .go{max-width:420px;display:block;margin:0 auto}
  /* the homepage: the drawing and words on the left, the ways on as a stack on the right */
  body.public .page.scr-home{display:grid;grid-template-columns:minmax(0,1fr) 440px;column-gap:72px;align-items:start;padding-top:72px}
  body.public .page.scr-home > *{grid-column:1}
  body.public .page.scr-home > .tiles{grid-column:2;grid-row:1 / span 6;align-self:center}
  body.public .page.scr-home .q{font-size:56px}
  /* the library: its words at a reading width, its drawing on the right, its tiles three across under them */
  body.public .page.scr-library > .fit{max-width:640px;margin-bottom:22px}
  body.public .page.scr-library{display:grid;grid-template-columns:minmax(0,1fr) 400px;column-gap:48px}
  body.public .page.scr-library > *{grid-column:1 / -1}
  body.public .page.scr-library > .hook, body.public .page.scr-library > .q, body.public .page.scr-library > .help, body.public .page.scr-library > .fit{grid-column:1}
  body.public .page.scr-library > .scene{grid-column:2;grid-row:1 / span 4;align-self:center;height:220px;object-position:center}
  body.public .page.scr-library > .tiles, body.public .page.scr-section > .tiles{grid-template-columns:repeat(auto-fill, minmax(300px, 1fr))}
  body.public .page.scr-library > .tiles.doors{grid-template-columns:repeat(2, minmax(0, 1fr))}
  body.public .page.scr-countries > .tiles.two{grid-template-columns:repeat(auto-fill, minmax(220px, 1fr))}
  /* the questions and the stories: one question to a screen, a phone-width column, as the tool */
  body.public .page.scr-qIntro, body.public .page.scr-q, body.public .page.scr-qEnd, body.public .page.scr-stIntro, body.public .page.scr-stQ,
  body.public .page.scr-stKeep, body.public .page.scr-stDone, body.public .page.scr-stDelete{max-width:600px}
  /* a guide: one reading column */
  body.public .page.scr-guide{max-width:752px}
  body.public .page.scr-guide .q{font-size:40px}
  body.public .page.scr-guide .help{font-size:19px;line-height:1.6;max-width:none}
  body.public .page.scr-guide > .tiles.next{grid-template-columns:repeat(3, minmax(0, 1fr))}
  body.public .page.scr-guide > .tiles.next .tile.row{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}