/* The one page's floors and the full pages: way-in plates, bands, pre-launch placeholders
   (design notes round one, notes 11, 12, 15, 20 to 22). Loaded after frames.css. The strip and
   the plate are cut from the approved art (runtime/quit/pages-art/sources.json). */
@import url('./how-to-buy.css');

/* A window onto a scene (note 11 b). The host shows [top, bottom] of its frame at full width: its
   proportions come from the HTML, so a floor has its final height before any image arrives. */
[data-quit-frame-host].q-window{display:flow-root;position:relative;overflow:clip;min-height:0;aspect-ratio:var(--host-aspect-desktop);--window-shift:var(--window-shift-desktop,0)}
[data-device="phone"] [data-quit-frame-host].q-window{aspect-ratio:var(--host-aspect-phone);--window-shift:var(--window-shift-phone,0)}
@media (max-width:767px),(max-width:1199px) and (max-aspect-ratio:3/4){html:not([data-device]) [data-quit-frame-host].q-window{aspect-ratio:var(--host-aspect-phone);--window-shift:var(--window-shift-phone,0)}}
[data-quit-frame-host].q-window>.frame-surface{margin-top:calc(-100% * var(--window-shift))}
/* The FAQ and its painted footer are two adjacent pieces of the same scene. */
html[data-page="/faq"] .frame-main{min-height:0}

/* The bezel strip under every floor (notes 11 a and 22): one 56 px strip of the frames' recessed
   steel, the floor's tag at the left, its plate at the right. */
.q-floor__strip{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;min-height:56px;margin:0;padding:0 0 0 10px;border-style:solid;border-width:6px 16px;border-image:url(/runtime/quit/pages-art/strip.png) 14 40 fill / 6px 16px stretch;background:#030805}
.q-floor__tag{flex:1 1 auto;min-width:0;margin:0;font:400 14px/1.3 var(--t-font-display);letter-spacing:.06em;color:var(--t-green);white-space:normal}
.q-floor__note{flex:0 1 auto;min-width:0;margin:0;font:400 14px/1.1 var(--t-font-display);letter-spacing:.03em;color:var(--t-ink);text-align:right}
/* The approved orange plate: a nine-slice of the drawn JOIN THE WAITLIST plate, its label live. */
.q-floor__plate,.q-plate{box-sizing:border-box;display:inline-flex;flex:none;align-items:center;justify-content:center;height:44px;margin:0;padding:0 12px;border-style:solid;border-width:8px 7px;border-image:url(/runtime/quit/pages-art/plate.png) 14 12 fill / 8px 7px stretch;border-radius:0;background:#fb5f17 padding-box;box-shadow:none;color:#140b04;font:700 14px/1 var(--t-font-display);letter-spacing:.04em;text-decoration:none;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:transform .12s ease-out,filter .12s ease-out;-webkit-tap-highlight-color:transparent}
.q-floor__plate:hover,.q-plate:hover{filter:brightness(1.08);transform:translateY(-1px)}
.q-floor__plate:active,.q-plate:active{filter:brightness(.94);transform:translateY(2px);transition-duration:.04s}
.q-floor__plate:focus-visible,.q-plate:focus-visible{outline:3px solid var(--t-focus,#fff0ad);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.q-floor__plate,.q-plate,.quit-cabinets .quit-cabinets__accounting{transition:none}.q-floor__plate:hover,.q-floor__plate:active,.q-plate:hover,.q-plate:active,.quit-cabinets .quit-cabinets__accounting:hover,.quit-cabinets .quit-cabinets__accounting:active{transform:none}}
/* The phone strip: the tag (and the note, when there is one) over a plate the width of the strip. */
[data-device="phone"] .q-floor__strip{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "plate";align-items:center;gap:8px;height:auto;padding:8px 0 4px 6px;border-width:8px 14px;border-image-width:8px 14px}
[data-device="phone"] .q-floor__strip:has(.q-floor__note){grid-template-areas:"tag" "note" "plate"}
[data-device="phone"] .q-floor__tag{grid-area:tag}
[data-device="phone"] .q-floor__note{grid-area:note;padding-right:4px;font-size:12px;text-align:left}
[data-device="phone"] .q-floor__plate{grid-area:plate;width:100%}

/* Owner order, 19 Oct 2026: the plate between the floors sits in the middle of its strip, bigger, glowing on a slow
   beat, over a band of moving hazard stripes, so every floor's door is seen. Motion stops for reduced-motion users. */
.q-floor__strip{position:relative;overflow:hidden;justify-content:center;gap:10px 14px;min-height:104px;padding:14px 18px;text-align:center}
.q-floor__strip::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(-45deg,rgb(251 95 23/.13) 25%,transparent 25% 50%,rgb(251 95 23/.13) 50% 75%,transparent 75%) 0 0/40px 40px;animation:q-strip-slide 2.6s linear infinite}
.q-floor__strip>*{position:relative;z-index:1}
.q-floor__strip>.q-floor__tag,.q-floor__strip>.q-floor__note{flex:0 0 100%;text-align:center}
.q-floor__strip>.q-floor__plate{height:62px;padding:0 34px;font-size:21px;letter-spacing:.06em;animation:q-plate-glow 2.2s ease-in-out infinite}
@keyframes q-strip-slide{to{background-position:40px 0}}
@keyframes q-plate-glow{0%,100%{filter:drop-shadow(0 0 0 rgb(251 95 23/0))}50%{filter:drop-shadow(0 0 16px rgb(251 95 23/.8))}}
[data-device="phone"] .q-floor__strip{justify-items:center;text-align:center;padding:12px 10px 10px}
[data-device="phone"] .q-floor__strip>.q-floor__note{text-align:center}
/* On a phone the longest labels (THE HANDBOOK, UNBURNED; EXPLORE THE COLLECTION) ran past the plate at 19 px: the type
   scales with the screen so every label sits on one line inside its plate, and wraps rather than spills on the narrowest. */
[data-device="phone"] .q-floor__strip>.q-floor__plate{height:auto;min-height:58px;padding:6px 10px;font-size:min(17px,4vw);letter-spacing:.02em;line-height:1.15;white-space:normal;text-align:center}
[data-device="phone"] .q-floor__plate+.q-floor__plate{grid-area:auto}
@media (prefers-reduced-motion:reduce){.q-floor__strip::before,.q-floor__strip>.q-floor__plate{animation:none}}

/* The footer, design F1 (approved 22 Oct 2026), one footer on every page (note 15): the painted rooftop cast, a riveted
   plate (footer-art/panel.webp, a nine-slice of corners and one rivet period per edge) holding the wordmark, the five
   account keys, the floor links and the line, then the stream row. ALL FLOORS, which the SEO step adds last in the
   footer, stands in that row, and its list opens below the footer at full width (content/quit/seo/body.css). */
.q-footer.q-footer--strip{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr);grid-template-areas:"roof roof roof roof" "plate plate plate plate" ". stream floors .";align-items:center;column-gap:28px;padding:0 0 10px;margin:0;background:#030805;color:var(--t-ink);text-align:left;font-size:inherit}
.q-footer__roof{grid-area:roof;line-height:0;overflow:hidden;background:#030805}
.q-footer__roof img{display:block;width:100%;height:auto}
.q-footer__strip{grid-area:plate;position:relative;box-sizing:border-box;display:grid;grid-template-columns:minmax(180px,.9fr) minmax(0,2.9fr) minmax(300px,1.3fr);grid-template-areas:"brand center end";gap:6px;margin:-14px 8px 0;padding:6px;background:#0a0f0c;border:2px solid #000;border-radius:12px;box-shadow:0 3px 0 #000}
.q-footer__brand,.q-footer__center,.q-footer__end{box-sizing:border-box;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-style:solid;border-width:13px;border-image:url(/runtime/quit/footer-art/panel.webp) 40 170 40 172 fill / 17px 70px 17px 71px round;padding:6px 10px}
.q-footer__brand{grid-area:brand}.q-footer__center{grid-area:center}.q-footer__end{grid-area:end}
.q-footer__wordmark{display:block;width:auto;height:clamp(48px,5.4vw,80px)}
.q-footer .q-footer__keys{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin:2px 0}
.q-footer .q-footer__keys .q-footer__key{display:inline-flex;flex-direction:column;align-items:center;gap:5px;min-width:64px;min-height:44px;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--t-ink);font:400 12px/1 var(--t-font-body);letter-spacing:.06em;text-decoration:none;text-transform:none;-webkit-text-stroke:0;text-shadow:none;cursor:pointer}
.q-footer__key-face{display:grid;place-items:center;width:64px;height:64px;color:#f6f1e4;background:url(/runtime/quit/footer-art/key.webp) center/100% 100% no-repeat}
.q-footer__key-face svg,.q-footer__key-mark{display:block;width:28px;height:28px}
.q-footer__key-label{white-space:nowrap}
.q-footer .q-footer__keys .q-footer__key:hover .q-footer__key-face{filter:brightness(1.14)}
.q-footer .q-footer__keys .q-footer__key:active .q-footer__key-face{transform:translateY(2px)}
.q-footer .q-footer__keys .q-footer__key:focus-visible{outline:3px solid var(--t-focus,#fff0ad);outline-offset:4px}
.q-footer .q-footer__keys .q-footer__key[aria-disabled="true"]{cursor:not-allowed;opacity:.72}
.q-footer .q-footer__links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 24px;margin:0}
.q-footer__links a,.q-footer__links button{display:inline-flex;align-items:center;min-height:24px;margin:0;padding:0;border:0;background:none;color:var(--t-green);font:400 15px/1 var(--t-font-body);letter-spacing:.04em;text-decoration:none;cursor:pointer}
.q-footer__links a:hover{color:var(--t-ink)}.q-footer__links a:active{color:var(--t-orange)}
.q-footer__links [aria-disabled="true"]{color:#7d8c7f;cursor:not-allowed}
.q-footer__links :focus-visible{outline:3px solid var(--t-focus,#fff0ad);outline-offset:3px}
.q-footer__line{margin:0;font:400 14px/1.4 var(--t-font-body);letter-spacing:.04em;color:var(--t-ink);text-align:center}
.q-footer__risk{margin:0;font:400 15px/1.2 var(--t-font-body);color:var(--t-muted,#b5bba9);text-align:center}
.q-stream-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 32px;padding:12px 16px;background:#030805}
.q-stream-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--t-green);font:400 16px/1.3 var(--t-font-display);text-underline-offset:5px}
.q-stream-links a:hover{color:var(--t-ink)}
.q-footer > .q-stream-links{grid-area:stream;padding:10px 0;background:none}
.q-footer.q-footer--strip > .q-all-floors{grid-area:floors;justify-self:start;max-width:none;margin:0;padding:0}
.q-footer.q-footer--strip > .q-all-floors > nav{position:absolute;left:10px;right:10px;top:100%;z-index:5;margin-top:4px}
/* WATCH THE STREAM: one of its two anchors shows (render.mjs streamLinks), by the STREAM_PHONE query of
   runtime/quit/stream-links.js, so a phone opens /broadcast/vertical with or without JavaScript, and there WATCH VERTICAL,
   which would open the same page, gives way, so a phone shows one stream link. */
.q-stream-links .q-stream-links__narrow{display:none}
@media (max-width:767px),(max-width:1199px) and (max-aspect-ratio:3/4){.q-stream-links .q-stream-links__wide{display:none}.q-stream-links .q-stream-links__narrow{display:inline-flex}.q-stream-links .q-stream-links__vertical{display:none}}
/* Up to 1199 px the plate stacks: the wordmark and the line on top, the keys and the links across the width below. */
@media (max-width:1199px){
 .q-footer__strip{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"brand end" "center center"}
}
@media (max-width:767px){
 .q-footer.q-footer--strip{grid-template-columns:minmax(0,1fr);grid-template-areas:"roof" "plate" "stream" "floors";justify-items:center}
 .q-footer__strip{grid-template-columns:minmax(0,1fr);grid-template-areas:"brand" "center" "end";margin:-10px 4px 0;padding:4px;justify-self:stretch}
 .q-footer.q-footer--strip > .q-all-floors{justify-self:center}
 .q-footer.q-footer--strip > .q-all-floors > nav{left:4px;right:4px}
 .q-footer .q-footer__keys{gap:8px 6px}
 .q-footer__key-face{width:52px;height:52px}
 .q-footer .q-footer__keys .q-footer__key{min-width:52px;font-size:10px;letter-spacing:.02em}
 .q-footer .q-footer__links{gap:10px 22px}
}
/* A touch screen, or a window as narrow as a phone, gets 44 x 44 px targets; each target carries its own space. */
@media (pointer:coarse),(max-width:767px){
 .q-footer .q-footer__links{row-gap:0}
 .q-footer__links a,.q-footer__links button{min-height:44px;min-width:44px;justify-content:center}
}

/* Note 11 d: what a full page gives that its floor does not show, at reading size. */
.q-extra{padding:clamp(16px,2.4vw,40px) clamp(10px,3vw,48px) 0}
.q-extra__panel{box-sizing:border-box;max-width:1240px;margin:0 auto;padding:clamp(14px,2vw,28px) clamp(10px,2vw,28px);border-style:solid;border-width:18px 34px;border-image:url(/runtime/quit/pages-art/strip.png) 26 46 fill / 18px 34px stretch}
.q-extra__title{margin:0 0 20px;font:700 clamp(22px,2.2vw,32px)/1.1 var(--t-font-display);letter-spacing:.02em;color:var(--t-orange)}
.q-extra__side{margin:28px 0 12px;font:400 18px/1 var(--t-font-display);letter-spacing:.06em;color:var(--t-green)}
.q-extra__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px;margin:0;padding:0;list-style:none}
.q-extra__list li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:baseline;min-width:0;padding:10px 0;border-bottom:2px solid #1c2a20}
.q-extra__list a{display:flex;align-items:baseline;gap:14px;color:inherit;text-decoration:none}
.q-extra__n{display:inline-grid;place-items:center;min-width:40px;height:32px;padding:0 6px;background:var(--t-orange);color:#140b04;font:700 16px/1 var(--t-font-display);box-shadow:2px 3px 0 #020504}
.q-extra__t{font:400 18px/1.35 var(--t-font-display);letter-spacing:.02em;color:var(--t-green)}
.q-extra__list p{grid-column:2;margin:6px 0 0;font:400 24px/1.15 var(--t-font-body);color:var(--t-ink)}
.q-extra__list--links a .q-extra__t{color:var(--t-ink);text-decoration:underline;text-decoration-color:#2d6b45;text-decoration-thickness:2px;text-underline-offset:5px}
.q-extra__list--links a:hover .q-extra__t{color:var(--t-green)}
.q-extra__list--links li{display:block}.q-extra__list--links p{margin-left:54px}.q-extra__list--links a:focus-visible{outline:3px solid var(--t-focus,#fff0ad);outline-offset:4px}
.q-letter{max-width:720px;margin:0 auto;padding:clamp(20px,3vw,40px) clamp(18px,3vw,48px);background:#e9dfc4;color:#1d1a14;box-shadow:5px 7px 0 #020504;transform:rotate(-.5deg)}
.q-letter p{margin:0 0 .9em;font:400 clamp(16px,1.4vw,20px)/1.5 var(--t-font-display);letter-spacing:.02em}
.q-letter p:last-child{margin:1.4em 0 0}
.q-crew-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:0;padding:0;list-style:none}
.q-crew-card{padding:16px 18px;background:#06120c;border:2px solid #1d8a4a;border-radius:6px;box-shadow:3px 5px 0 #020504;container-type:inline-size}
.q-crew-card p{margin:0}
/* Every name in one size that fits the longest single word, SUPERINTELLIGENCE (17 letters, 13.5 em in the bold display
   face), on one line inside the narrowest card: it ran 23 px past its card at 1440 and 6 px at 768 before
   runtime/quit/fit-controls.js shrank it (audit-B, 22 Oct). cqw is the card's content width. */
.q-crew-card__name{font:700 min(20px,7cqw)/1.1 var(--t-font-display);color:var(--t-orange)}
.q-crew-card__role{margin-top:6px!important;font:400 14px/1.2 var(--t-font-display);letter-spacing:.04em;color:var(--t-green)}
.q-crew-card__line{margin-top:12px!important;font:400 24px/1.15 var(--t-font-body);color:var(--t-ink)}
/* THE ACTUAL PAPERWORK on /faq (tools/quit-site/faq.mjs; audit-A, 22 Oct): one reading column of about 72 characters in the
   wide panel, and the contract address in the body face, breaking anywhere so all 44 characters stay inside the panel on a
   360 px phone (it ran 34 px past it at 393 px, in the browser's Courier). */
.q-extra[aria-labelledby="faq-practical-title"] .q-extra__panel{display:grid;grid-template-columns:minmax(0,72ch);justify-content:center}
.q-extra[aria-labelledby="faq-practical-title"] .q-extra__panel>*{margin-top:0}
.q-extra[aria-labelledby="faq-practical-title"] code{font-family:var(--t-font-body);font-size:1em;overflow-wrap:anywhere}
@media (max-width:767px){
 .q-extra__list{grid-template-columns:minmax(0,1fr)}
 .q-extra__panel{border-width:12px 20px;border-image-width:12px 20px}
 .q-letter{transform:none}
}

/* Note 20: the directory's launch kit in two rows at reading size, in the bezel strip under the frame;
   the roadmap's app line in the same strip. */
nav.q-launch-kit[data-quit-launch-kit],p.q-app-promise{box-sizing:border-box;margin:0;border-style:solid;border-width:6px 16px;border-image:url(/runtime/quit/pages-art/strip.png) 14 40 fill / 6px 16px stretch;background:#030805}
nav.q-launch-kit[data-quit-launch-kit]{display:grid;grid-template-columns:repeat(7,auto);justify-content:center;gap:10px 28px;padding:14px 16px}
/* No links, no strip: the kit stays hidden until runtime/quit/frame-controls.js adds one (an empty index shows nothing). */
nav.q-launch-kit[data-quit-launch-kit]:is([hidden],:empty){display:none}
nav.q-launch-kit[data-quit-launch-kit] a{font:400 14px/1.2 var(--t-font-display);letter-spacing:.03em;color:var(--t-green);text-decoration:none;white-space:nowrap}
nav.q-launch-kit[data-quit-launch-kit] a:hover{color:var(--t-ink)}nav.q-launch-kit[data-quit-launch-kit] a:focus-visible{outline:3px solid var(--t-focus,#fff0ad);outline-offset:3px}
p.q-app-promise{display:flex;align-items:center;justify-content:center;min-height:56px;padding:0 16px;font:400 16px/1.2 var(--t-font-display);letter-spacing:.04em;color:var(--t-green);text-align:center}
@media (max-width:767px){nav.q-launch-kit[data-quit-launch-kit]{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}nav.q-launch-kit[data-quit-launch-kit] a{white-space:normal}}

/* Note 12: every pre-launch placeholder sits in its value's slot at the size, weight and colour of the
   value it replaces. Sizes are set on the slot in units of the frame (cqw of the scene) and the value
   takes 1em; a long placeholder fits its slot. Sample content carries the SAMPLE tag. */
.q-sample{display:inline-block;margin:0 0 0 .6em;padding:3px 5px 2px;border:2px solid #07140d;border-radius:2px;background:var(--t-green);color:#04110a;font:400 max(12px,.42em)/1 var(--t-font-display);letter-spacing:.06em;vertical-align:middle;white-space:nowrap}
[data-device="phone"] .q-sample{font-size:max(12px,.42em)}
.frame-surface .q-live:is([data-region^="quitnomics."],[data-region^="chart."],[data-region^="eject-and-share."]:not([data-region$=".headline"]))>output{font:700 1em/1.2 var(--t-font-display);letter-spacing:-.05em;color:#3ddc6f}
/* Quitnomics: the five cards and the stat row (desktop: cards cap 37, stat row 70 frame px; the stat
   row's AT LAUNCH is as large as its column allows). */
[data-device="desktop"] .frame-surface .q-live:is([data-region="quitnomics.supply"],[data-region="quitnomics.tax"],[data-region="quitnomics.liquidity"],[data-region="quitnomics.launch"],[data-region="quitnomics.authority"]){font-size:2.15cqw;padding-left:.25em}
[data-device="desktop"] .frame-surface .q-live:is([data-region="quitnomics.market-cap"],[data-region="quitnomics.holders"],[data-region="quitnomics.curve"],[data-region="quitnomics.since-launch"]){font-size:2.75cqw;justify-content:center;text-align:center}
[data-device="phone"] .frame-surface .q-live:is([data-region="quitnomics.supply"],[data-region="quitnomics.tax"],[data-region="quitnomics.liquidity"],[data-region="quitnomics.launch"],[data-region="quitnomics.authority"]){font-size:max(14px,4.6cqw);padding-left:.3em}
[data-device="phone"] .frame-surface .q-live:is([data-region="quitnomics.market_cap"],[data-region="quitnomics.holders"],[data-region="quitnomics.curve"],[data-region="quitnomics.multiple"]){font-size:max(14px,3.6cqw);justify-content:center;text-align:center}
[data-device="phone"] .frame-surface .q-live:is([data-region="quitnomics.market_cap"],[data-region="quitnomics.holders"],[data-region="quitnomics.curve"],[data-region="quitnomics.multiple"])>output{white-space:normal;line-height:.95;overflow:visible}
.frame-surface .q-live[data-region^="quitnomics."]>output{max-width:100%}
/* QA7: four UNKNOWN values side by side ran into each other on phones. Each value of the row keeps its size where it
   fits and shrinks to its cell where its longest word does not (frame-controls.js sets --value-word; Silkscreen Bold at
   this tracking is .9 em a letter, its widest 1 em): words never split, values never overlap. (html[data-device] outweighs the
   row's font shorthand above.) */
.frame-surface .q-live:is([data-region="quitnomics.market-cap"],[data-region="quitnomics.holders"],[data-region="quitnomics.curve"],[data-region="quitnomics.since-launch"],[data-region="quitnomics.market_cap"],[data-region="quitnomics.multiple"]){container-type:inline-size}
html[data-device] .frame-surface .q-live:is([data-region="quitnomics.market-cap"],[data-region="quitnomics.holders"],[data-region="quitnomics.curve"],[data-region="quitnomics.since-launch"],[data-region="quitnomics.market_cap"],[data-region="quitnomics.multiple"])>output{font-size:min(1em,calc(94cqw / (var(--value-word,7) * .9)))}
/* The chart's LIVE NUMBERS: right aligned in the display face, reaching left over the empty row. */
.frame-surface .q-live:is([data-region="chart.market-cap"],[data-region="chart.since-launch"],[data-region="chart.all-time-high"],[data-region="chart.market_cap"],[data-region="chart.since_launch"],[data-region="chart.ath"]){overflow:visible;justify-content:flex-end;text-align:right}
.frame-surface .q-live:is([data-region="chart.market-cap"],[data-region="chart.since-launch"],[data-region="chart.all-time-high"],[data-region="chart.market_cap"],[data-region="chart.since_launch"],[data-region="chart.ath"])>output{width:auto;max-width:none;overflow:visible;white-space:nowrap}
[data-device="desktop"] .frame-surface .q-live:is([data-region="chart.market-cap"],[data-region="chart.since-launch"],[data-region="chart.all-time-high"]){font-size:1.2cqw}
[data-device="phone"] .frame-surface .q-live:is([data-region="chart.market_cap"],[data-region="chart.since_launch"],[data-region="chart.ath"]){font-size:max(14px,4.4cqw)}
/* The drawn counter plates (mission, colony, underclass): the count in the display face, the line under it. */
.frame-surface .q-live>output[data-quit-escaped-value]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18em;font:700 1em/1 var(--t-font-display);letter-spacing:-.05em;color:#3ddc6f;white-space:nowrap;overflow:visible}
.frame-surface .q-live>output[data-quit-escaped-value] .q-counter__note{font-weight:400;font-size:.44em;letter-spacing:.04em;color:var(--t-ink)}
.frame-surface .q-live:has(>output[data-quit-escaped-value]){justify-content:center}
[data-device="desktop"] .frame-surface .q-live:is([data-region="mission.escaped"],[data-region="the-colony.escaped"]){font-size:2.5cqw}
[data-device="desktop"] .frame-surface .q-live[data-region="escape-the-underclass.escaped"]{font-size:2cqw}
/* READING HOLDERS, the plate's line with a mint and no count yet (a live build writes it before main.js boots): 15 letters
   of the bold display face are 11.9 em, wider than a desktop plate at the count's size, so it is set at .8 em there. */
[data-device="desktop"] .frame-surface .q-live>output[data-quit-escaped-value][data-counter-state="unknown"]{font-size:.8em}
[data-device="phone"] .frame-surface .q-live[data-region="mission.escaped"]{font-size:max(14px,3.6cqw)}
[data-device="phone"] .frame-surface .q-live:is([data-region="the-colony.escaped"],[data-region="escape-the-underclass.escaped"]){font-size:max(16px,5cqw)}
[data-device="phone"] .frame-surface .q-live>output[data-quit-escaped-value] .q-counter__note{font-size:max(12px,.5em)}
/* Eject and share: one headline and the sub-line GARY KEEPS GOING. until a card is stamped; the card's
   sample line; YOUR EJECT, GARY NOW and CARDS POSTED in the display face, as large as each plate allows. */
.frame-surface[data-section="eject-and-share"]:has([data-quit-eject-headline]:not([data-stamped])) [data-layer="caption"] img{visibility:hidden}
.frame-surface[data-section="eject-and-share"]:has([data-quit-eject-headline][data-stamped]) [data-quit-eject-sub]{display:none}
.frame-surface .q-live.q-eject-sub{justify-content:center;font:700 1em/1 var(--t-font-display);letter-spacing:.02em;color:#f2e8cf;text-align:center;white-space:nowrap;z-index:205}
[data-device="desktop"] .frame-surface .q-live.q-eject-sub{font-size:1.75cqw}
[data-device="phone"] .frame-surface .q-live.q-eject-sub{font-size:12px;font-weight:400;background:#0d171a!important}
.frame-surface .q-live:is([data-region="eject-and-share.your-eject"],[data-region="eject-and-share.gary-now"],[data-region="eject-and-share.cards-posted"],[data-region="eject-and-share.your_eject"],[data-region="eject-and-share.gary_now"],[data-region="eject-and-share.cards_posted"]){justify-content:center;text-align:center}
[data-device="desktop"] .frame-surface .q-live:is([data-region="eject-and-share.your-eject"],[data-region="eject-and-share.cards-posted"]){font-size:2.05cqw}
[data-device="desktop"] .frame-surface .q-live[data-region="eject-and-share.gary-now"]{font-size:2.05cqw}
[data-device="phone"] .frame-surface .q-live:is([data-region="eject-and-share.your_eject"],[data-region="eject-and-share.gary_now"],[data-region="eject-and-share.cards_posted"]){font-size:max(14px,3.6cqw)}
[data-device="phone"] .frame-surface .q-live:is([data-region="eject-and-share.your_eject"],[data-region="eject-and-share.gary_now"],[data-region="eject-and-share.cards_posted"])>output{line-height:1}
.frame-surface output[data-quit-share-value] .q-warm{display:block;margin-bottom:.12em;font-size:.5em;font-weight:400;letter-spacing:.06em;color:var(--t-ink)}
[data-device="phone"] .frame-surface output[data-quit-share-value] .q-warm{font-size:max(12px,.5em)}
.frame-surface .q-live:is([data-region="eject-and-share.share-card-record"],[data-region="eject-and-share.share_card_caption"]){justify-content:center;align-items:center;overflow:visible}
.frame-surface .q-live:is([data-region="eject-and-share.share-card-record"],[data-region="eject-and-share.share_card_caption"])>output:is([data-quit-share-value="share-card-record"],[data-quit-share-value="share-card-caption"]){position:relative;display:block;font:700 1em/1.15 var(--t-font-display);letter-spacing:0;color:#ef6033;text-align:center;white-space:normal;overflow:visible;transform:rotate(var(--card-tilt,-7deg))}
.frame-surface output:is([data-quit-share-value="share-card-record"],[data-quit-share-value="share-card-caption"]) .q-card__line{display:block}
.frame-surface .q-live>output:is([data-quit-share-value="share-card-record"],[data-quit-share-value="share-card-caption"]) .q-sample{display:table;margin:.5em auto 0}
[data-device="desktop"] .frame-surface .q-live[data-region="eject-and-share.share-card-record"]{font-size:1.32cqw}
/* The phone card is small: its first line at 12 px, the tag pinned to the card's corner. */
[data-device="phone"] .frame-surface .q-live[data-region="eject-and-share.share_card_caption"]{font-size:12px}
[data-device="phone"] .frame-surface output[data-quit-share-value="share-card-caption"] .q-card__line+.q-card__line{display:none}
[data-device="phone"] .frame-surface .q-live>output[data-quit-share-value="share-card-caption"] .q-sample{position:absolute;right:-6px;top:-34px;margin:0}
/* QA8 F2: the phone panel stacks POST YOUR CARD right over BUY $QUIT, so BUY's AT LAUNCH tag hangs from its lower
   corner instead of its upper one and never covers the plate above it. */
[data-device="phone"] .frame-cutout[data-region="eject-and-share.buy"][aria-disabled="true"]::after{top:auto;bottom:0;translate:10% 58%}
/* The vending machine: the frame's prices (samples, as the little screen says), COMING SOON on that
   screen in its green, the shipping line in its drawn strip. */
.frame-surface .q-live:is([data-region^="vending-machine.price"]){font:700 1em/1 var(--t-font-display);color:#18cd56;letter-spacing:-.05em}
[data-device="desktop"] .frame-surface .q-live[data-region^="vending-machine.price"]{font-size:2.05cqw}
[data-device="phone"] .frame-surface .q-live[data-region^="vending-machine.price"]{font-size:max(14px,4.8cqw)}
.frame-surface output[data-quit-vending-screen]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45em;width:100%;height:100%;font:400 1em/1 var(--t-font-display);color:#16d35c;text-align:center}
.frame-surface output[data-quit-vending-screen] .q-sample{max-width:100%;margin:0;padding:2px 4px;border-width:1px;font-size:max(12px,.72em);line-height:1.1;white-space:normal}
[data-device="desktop"] .frame-surface .q-live[data-region="vending-machine.payment-method"]{font-size:max(14px,1.02cqw)}
.frame-surface .q-live.q-vending-screen{justify-content:center;background:#04140d!important;border-radius:6%;color:#16d35c;font:400 12px/1.05 var(--t-font-display);text-align:center;white-space:normal;z-index:205}
.frame-surface .q-live.q-vending-sample{justify-content:flex-start;overflow:visible;z-index:205}
.frame-surface .q-live.q-vending-sample .q-sample{margin:0;font-size:12px;box-shadow:2px 2px 0 #020504}
.frame-surface .q-live[data-region="vending-machine.shipping"]{justify-content:center;font:400 max(14px,1.15cqw)/1 var(--t-font-display);letter-spacing:.03em;color:#16c552;text-align:center;white-space:nowrap}
/* The badge panel: the frame's sample badge in its drawn type until a badge is picked. */
.frame-surface .q-live:is([data-region="badges.selected-badge-title"],[data-region="badges.selected_title"]){font:700 1em/1 var(--t-font-display);color:#ed5111;letter-spacing:-.05em;white-space:nowrap;overflow:visible}
[data-device="desktop"] .frame-surface .q-live[data-region="badges.selected-badge-title"]{font-size:2.6cqw}
[data-device="phone"] .frame-surface .q-live[data-region="badges.selected_title"]{font-size:max(14px,4cqw)}
[data-device="phone"] .frame-surface .q-live[data-region="badges.selected_title"] .q-sample{margin-left:.25em;padding:2px 3px}
.frame-surface .q-live:is([data-region^="badges.badge-trait"],[data-region^="badges.trait_"]){font:400 1em/.82 var(--t-font-body);color:#2bc35a;letter-spacing:0;white-space:normal;overflow:visible;--fit-min:16px}
/* The trait lines never go under the body size, 16 px (badges audit, 22 Oct 2026): a value too long for its line at that
   size takes a second line inside the panel (runtime/quit/fit-controls.js shrinks a line only down to --fit-min). */
[data-device="desktop"] .frame-surface .q-live[data-region^="badges.badge-trait"]{font-size:max(16px,1.12cqw)}
[data-device="phone"] .frame-surface .q-live[data-region^="badges.trait_"]{font-size:max(16px,3.9cqw)}
/* The airdrop plate on the badges panel: a link to HOW THE NFT AIRDROP WORKS, set as a secondary plate (badges audit, 22 Oct 2026). */
.frame-surface .q-live[data-region="badges.mint"]{display:block;padding:0;overflow:visible}
.q-live[data-region="badges.mint"] .q-airdrop-plate{display:block;width:100%;height:100%}
.q-live[data-region="badges.mint"] .q-airdrop-plate a{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0 .6em;border:3px solid #29e07a;border-radius:4px;background:#021108;box-shadow:inset 0 0 12px rgb(37 220 113/.22),0 0 0 2px #020504;color:#36f07f;font:400 1.25cqw/1.05 var(--t-font-display);letter-spacing:.06em;text-align:center;text-decoration:none;white-space:nowrap}
[data-device="phone"] .q-live[data-region="badges.mint"] .q-airdrop-plate a{font-size:max(14px,3.6cqw)}
.q-live[data-region="badges.mint"] .q-airdrop-plate a:hover{border-color:#5cf08a;color:#5cf08a}
.q-live[data-region="badges.mint"] .q-airdrop-plate a:focus-visible{outline:3px solid var(--t-focus,#fff0ad);outline-offset:3px}
.frame-surface .q-live:is([data-region="badges.selected-badge-serial"],[data-region="badges.selected_id"]){justify-content:center;font:700 1em/1 var(--t-font-display);color:#15110d;letter-spacing:0}
[data-device="desktop"] .frame-surface .q-live[data-region="badges.selected-badge-serial"]{font-size:2.25cqw}
[data-device="phone"] .frame-surface .q-live[data-region="badges.selected_id"]{font-size:max(14px,4.4cqw)}
/* What you get: TODAY'S RAIDS keeps its titles on the drawn board, HALL OF SHAME its caption. */
.frame-surface .q-live[data-region^="what-you-get.raid-title"]{font:400 1.02cqw/1.1 var(--t-font-display);color:#0c6631;letter-spacing:0;white-space:normal;overflow:visible}
.frame-surface [data-quit-sample-raid]{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.frame-surface [data-quit-sample-raid] .q-sample{margin:0;padding:1px 2px;border-width:1px;font-size:max(8px,.55em);line-height:1}
.frame-surface .q-live:is([data-region="what-you-get.shame-record"],[data-region="what-you-get.shame_result"]){font:400 1em/1.05 var(--t-font-body);color:#ebe3d7;overflow:visible}
[data-device="desktop"] .frame-surface .q-live[data-region="what-you-get.shame-record"]{font-size:1.2cqw}
[data-device="phone"] .frame-surface .q-live[data-region="what-you-get.shame_result"]{font-size:max(16px,4.6cqw)}
.frame-surface output[data-quit-sample-shame] .q-sample{display:table;margin:.45em 0 0}
/* Launchpad entrance copy occupies the approved frame's former field and count slots. */
.frame-surface .q-launchpad-label,.frame-surface .q-launchpad-note{display:flex;align-items:center;height:100%;font:400 max(16px,1.11cqw)/1.05 var(--t-font-body);letter-spacing:.02em;color:#29d062;white-space:normal}
.frame-surface .q-launchpad-heading{justify-content:flex-start;background:#080e0b;color:#29d062;font-size:1.35cqw}
.frame-surface .q-launchpad-stamp{background:#29d062;color:#080e0b;border:3px solid #080e0b;font:700 1.6cqw/1.1 var(--t-font-display);rotate:-8deg}
[data-device="phone"] .frame-surface .q-launchpad-heading{font-size:3.6cqw}
[data-device="phone"] .frame-surface .q-launchpad-stamp{font-size:3.3cqw}
[data-device="phone"] .frame-component:is([data-region="launchpad.waitlist_join"],[data-region="launchpad.waitlist-join"]){font-size:3.6cqw;padding:0 .8cqw;line-height:1.05}
[data-device="phone"] .frame-surface .q-launchpad-label,[data-device="phone"] .frame-surface .q-launchpad-note{font-size:max(14px,3.6cqw)}
[data-device="phone"] .frame-surface .q-live[data-region="launchpad.waiting"]{width:86%!important}
/* How to buy: PUBLISHED AT LAUNCH in the address's slot and green. */
.frame-surface .q-live:is([data-region="how-to-buy.contract"],[data-region="how-to-buy.ca"])>output[data-quit-contract]{font:400 max(16px,1.11cqw)/1 var(--t-font-display);letter-spacing:.04em;color:#08d65c;padding-left:.6em}
/* Memes: LAUGH is a drawn pill (a local pick, no invented count). */
.frame-surface .q-local-laugh{display:inline-flex;align-items:center;min-height:24px;padding:3px 10px 2px;border:2px solid #11a342;border-radius:999px;background:#06120c;color:#2fd56a;font:400 max(14px,1em)/1 var(--t-font-display);letter-spacing:.06em}
.frame-surface .q-local-laugh[aria-pressed="true"]{background:#11a342;color:#04110a}
.frame-surface .q-local-laugh:hover{border-color:#2fd56a}
.frame-surface .q-live:has(>output[data-quit-laugh]){overflow:visible}
[data-device="desktop"] .frame-surface .q-live:has(>output[data-quit-laugh]){font-size:1cqw}
[data-device="phone"] .frame-surface .q-live:has(>output[data-quit-laugh]){font-size:3.6cqw}
/* The chart's CRT before the mint: the WARM-UP line is the frame's own grid and candles, dimmed, under
   the label. Once a chart can load, the provider's chart replaces both. */
.frame-surface .q-live:is([data-region="chart.chart"],[data-region="chart.plot"]):has([data-chart-reason="coin_address unknown"])::before{content:"";position:absolute;inset:0;background:url(/runtime/quit/pages-art/chart-desktop.png) 0 0/100% 100% no-repeat;opacity:.42;pointer-events:none;image-rendering:pixelated}
.frame-surface .q-live[data-region="chart.plot"]:has([data-chart-reason="coin_address unknown"])::before{background-image:url(/runtime/quit/pages-art/chart-phone.png)}
.frame-surface .q-live:is([data-region="chart.chart"],[data-region="chart.plot"]) :is([data-quit-chart],.csf-chart[data-chart-reason="coin_address unknown"]){position:static;width:100%;height:100%;background:none}
.frame-surface .csf-chart[data-chart-reason="coin_address unknown"] .csf-chart__placeholder{position:absolute;left:15%;top:6%;max-width:62%;margin:0;padding:.45em .7em .4em;border:2px solid #1d8a4a;border-radius:3px;background:#04110a;color:#3ddc6f;font:400 max(12px,1.05cqw)/1.25 var(--t-font-display);letter-spacing:.03em;text-align:left}
[data-device="phone"] .frame-surface .csf-chart[data-chart-reason="coin_address unknown"] .csf-chart__placeholder{left:17%;top:5%;max-width:80%;font-size:12px}
/* THE CHART: the live chart sits inside the monitor's glass instead of on top of the art (the owner, 16 Oct 2026).
   The box is the painted glass, measured on monitor.png (desktop 988x768: x 74 to 914, y 50 to 634; phone
   860x772: x 60 to 752, y 80 to 640). The mask is the glass outline with rounded CRT corners; on desktop it
   also cuts out the DO NOT SELL note, so the painted note stays on the screen and casts a soft shadow onto
   the chart. The provider's chart renders at a larger size and is scaled down so it reads as a monitor
   picture, and the glass (scanlines, vignette, bezel shadow, glare) lies over it without taking clicks. Once a
   chart loads, the glass also lifts the provider's black to the painted screen's green (12 26 18). */
.frame-surface .q-live:is([data-region="chart.chart"],[data-region="chart.plot"]){--crt-s:1;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.frame-surface .q-live[data-region="chart.chart"]{left:7.4899%!important;top:6.5104%!important;width:85.0202%!important;height:76.0417%!important;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='74 50 840 584' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='74' y='50' width='840' height='584'%3E%3Cpath fill='%23fff' d='M92 52Q420 40 896 64Q914 65 914 82L914 614Q914 630 898 631L90 634Q74 634 74 618L74 68Q74 53 92 52Z'/%3E%3Cpolygon points='26,36 180,36 180,170 36,184' transform='translate(5 7)' fill='%23000' fill-opacity='.62' filter='url(%23b)'/%3E%3Cpolygon points='22,30 174,30 174,165 30,178' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Crect x='74' y='50' width='840' height='584' fill='%23fff' mask='url(%23m)'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='74 50 840 584' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='74' y='50' width='840' height='584'%3E%3Cpath fill='%23fff' d='M92 52Q420 40 896 64Q914 65 914 82L914 614Q914 630 898 631L90 634Q74 634 74 618L74 68Q74 53 92 52Z'/%3E%3Cpolygon points='26,36 180,36 180,170 36,184' transform='translate(5 7)' fill='%23000' fill-opacity='.62' filter='url(%23b)'/%3E%3Cpolygon points='22,30 174,30 174,165 30,178' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Crect x='74' y='50' width='840' height='584' fill='%23fff' mask='url(%23m)'/%3E%3C/svg%3E")}
.frame-surface .q-live[data-region="chart.plot"]{--crt-s:.38;left:6.9767%!important;top:10.3627%!important;width:80.4651%!important;height:72.5389%!important;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='60 80 692 560' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M86 80L726 80Q752 80 752 106L752 608Q752 633 727 634L86 640Q60 640 60 614L60 106Q60 80 86 80Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='60 80 692 560' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M86 80L726 80Q752 80 752 106L752 608Q752 633 727 634L86 640Q60 640 60 614L60 106Q60 80 86 80Z'/%3E%3C/svg%3E")}
@media (max-width:2099px){.frame-surface .q-live[data-region="chart.chart"]{--crt-s:.9}}
@media (max-width:1699px){.frame-surface .q-live[data-region="chart.chart"]{--crt-s:.76}}
@media (max-width:1299px){.frame-surface .q-live[data-region="chart.chart"]{--crt-s:.62}}
@media (min-width:430px){.frame-surface .q-live[data-region="chart.plot"]{--crt-s:.42}}
.frame-surface .q-live:is([data-region="chart.chart"],[data-region="chart.plot"]) [data-quit-chart],
.frame-surface .q-live:is([data-region="chart.chart"],[data-region="chart.plot"]) .csf-chart{position:absolute;inset:0;width:auto;height:auto;min-height:0;aspect-ratio:auto;border:0;border-radius:0;overflow:hidden}
.frame-surface .q-live:is([data-region="chart.chart"],[data-region="chart.plot"]) .csf-chart__frame{inset:0 auto auto 0;width:calc(100% / var(--crt-s));height:calc(100% / var(--crt-s));transform:scale(var(--crt-s));transform-origin:0 0;filter:saturate(.86) contrast(1.06) brightness(.93)}
.frame-surface .q-live:is([data-region="chart.chart"],[data-region="chart.plot"]) .csf-chart::before,
.frame-surface .q-live:is([data-region="chart.chart"],[data-region="chart.plot"]) .csf-chart::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none}
.frame-surface .q-live:is([data-region="chart.chart"],[data-region="chart.plot"]) .csf-chart::before{background:radial-gradient(118% 112% at 50% 46%,transparent 56%,rgba(0,8,4,.5) 100%),repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.8),inset 0 0 1.6em .5em rgba(0,0,0,.55)}
.frame-surface .q-live:is([data-region="chart.chart"],[data-region="chart.plot"]) .csf-chart::after{mix-blend-mode:screen;background:linear-gradient(166deg,rgba(255,246,222,.12) 0%,rgba(255,246,222,.045) 17%,transparent 33%),radial-gradient(70% 55% at 28% 18%,rgba(110,255,165,.05),transparent 72%)}
.frame-surface .q-live:is([data-region="chart.chart"],[data-region="chart.plot"]) .csf-chart[data-chart-state="loaded"]::after{background:linear-gradient(166deg,rgba(255,246,222,.12) 0%,rgba(255,246,222,.045) 17%,transparent 33%),radial-gradient(70% 55% at 28% 18%,rgba(110,255,165,.05),transparent 72%),rgb(12,26,18)}
/* THE CHART's pop-out (runtime/quit/chart-popout.js): the screen is the button, its FULL CHART label sits
   on the bare strip of the lower bezel (desktop x 92, y 650 to 688 on monitor.png; phone x 70, y 652 to 692),
   and the modal gives the provider chart nearly the whole window. */
.frame-surface .c-btn.q-chart-popout{position:absolute;z-index:20;pointer-events:auto;display:block;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none;overflow:visible;cursor:zoom-in}
.q-chart-popout[hidden]{display:none!important}
.q-chart-popout[data-chart-popout="chart.chart"]{left:7.4899%;top:6.5104%;width:85.0202%;height:76.0417%}
.q-chart-popout[data-chart-popout="chart.plot"]{left:6.9767%;top:10.3627%;width:80.4651%;height:72.5389%}
.frame-surface .c-btn.q-chart-popout:is(:hover,:active,:focus){background:none;transform:none;box-shadow:none}
.frame-surface .c-btn.q-chart-popout:focus-visible{outline:3px solid #3ddc6f;outline-offset:3px}
.frame-surface .c-btn.q-chart-popout .c-btn__label{position:absolute;left:2.2%;top:102.8%;display:flex;align-items:center;padding:.3em .75em .25em;border:2px solid #1d8a4a;border-radius:3px;background:#04110a;color:#3ddc6f;font:400 max(10px,.72cqw)/1 var(--t-font-display);letter-spacing:.06em;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(0,0,0,.65),0 1px 0 rgba(255,255,255,.35)}
.frame-surface .c-btn.q-chart-popout[data-chart-popout="chart.plot"] .c-btn__label{left:1.6%;top:102.4%;padding:.22em .6em .18em;border-width:1.5px;font-size:max(10px,2cqw)}
.frame-surface .c-btn.q-chart-popout:is(:hover,:focus-visible) .c-btn__label{border-color:#3ddc6f;background:#0b2a17;color:#9dffc0}
.c-modal.q-chart-popout__modal{width:min(1400px,calc(100vw - 32px));max-width:none;height:min(900px,calc(100dvh - 32px));max-height:none;padding:1rem 1rem 1.1rem;overflow:hidden}
.c-modal.q-chart-popout__modal[open]{display:flex;flex-direction:column}
.c-modal.q-chart-popout__modal h2{margin:0 6rem .75rem 0;line-height:1}
.c-modal.q-chart-popout__modal .c-modal__body{display:flex;flex:1;min-height:0}
.q-chart-popout__frame{display:block;flex:1;width:100%;height:100%;border:0;background:#020a07}
[data-device="phone"] .c-modal.q-chart-popout__modal{width:calc(100vw - 16px);height:calc(100dvh - 16px);padding:.75rem}
/* How to buy: the FLIGHT PLAN rebuilt at eight columns, icons over their labels, the dotted path behind
   (the frame's own icons, with PENTHOUSE and MARS from the show pack). */
.frame-surface .q-live:is([data-region="how-to-buy.flight-plan"],[data-region="how-to-buy.flight_plan"]){background:#040e0b!important;border-radius:.5cqw;z-index:205;font-size:inherit}
.frame-surface .q-live>[data-quit-flight-plan]>.c-altitude[data-layout="strip"]{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:8px;align-items:start;height:100%;margin:0;padding:var(--flight-pad,10px) 1% 0;list-style:none;background:none;border:0;box-shadow:none}
.frame-surface .q-live>[data-quit-flight-plan]>.c-altitude[data-layout="strip"]::before{content:"";position:absolute;left:7%;right:7%;top:calc(var(--flight-pad,10px) + var(--flight-icon) / 2);border-top:2px dashed #1f9e4f;pointer-events:none}
.frame-surface .q-live>[data-quit-flight-plan]>.c-altitude[data-layout="strip"]>li{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:0;border:0;background:none;font:400 var(--flight-label)/1.1 var(--t-font-display);letter-spacing:.02em;color:var(--t-green);text-align:center}
.frame-surface .q-live>[data-quit-flight-plan]>.c-altitude[data-layout="strip"]>li::before{content:"";position:static;display:block;width:auto;height:var(--flight-icon);aspect-ratio:260/136;max-width:100%;margin-bottom:4px;background:#040e0b url(/runtime/quit/pages-art/flight-icons.png) 0 0/800% 100% no-repeat;image-rendering:pixelated}
.frame-surface .q-live>[data-quit-flight-plan]>.c-altitude>li>span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:clip}
.frame-surface .q-live>[data-quit-flight-plan]>.c-altitude>li>span+span{color:var(--t-ink)}
.frame-surface .q-live>[data-quit-flight-plan]>.c-altitude[data-layout="strip"]>li[data-band="ceiling"]::before{background-position-x:14.2857%}
.frame-surface .q-live>[data-quit-flight-plan]>.c-altitude[data-layout="strip"]>li[data-band="roof"]::before{background-position-x:28.5714%}
.frame-surface .q-live>[data-quit-flight-plan]>.c-altitude[data-layout="strip"]>li[data-band="chopper"]::before{background-position-x:42.8571%}
.frame-surface .q-live>[data-quit-flight-plan]>.c-altitude[data-layout="strip"]>li[data-band="penthouse"]::before{background-position-x:57.1429%}
.frame-surface .q-live>[data-quit-flight-plan]>.c-altitude[data-layout="strip"]>li[data-band="orbit"]::before{background-position-x:71.4286%}
.frame-surface .q-live>[data-quit-flight-plan]>.c-altitude[data-layout="strip"]>li[data-band="moon"]::before{background-position-x:85.7143%}
.frame-surface .q-live>[data-quit-flight-plan]>.c-altitude[data-layout="strip"]>li[data-band="mars"]::before{background-position-x:100%}
[data-device="desktop"] .frame-surface .q-live[data-region="how-to-buy.flight-plan"]{--flight-icon:max(40px,2.8cqw);--flight-label:max(12px,.84cqw)}
[data-device="phone"] .frame-surface .q-live[data-region="how-to-buy.flight_plan"]{--flight-icon:max(22px,5.8cqw);--flight-label:max(12px,3.1cqw)}
[data-device="phone"] .frame-surface .q-live>[data-quit-flight-plan]>.c-altitude[data-layout="strip"]{column-gap:2px;--flight-pad:4cqw;grid-template-columns:repeat(7,minmax(0,1fr)) minmax(0,1.3fr)}
/* On the phone the eight columns are too narrow for the band names: the icons and multiples show and
   the names stay for assistive technology. */
[data-device="phone"] .frame-surface .q-live>[data-quit-flight-plan]>.c-altitude>li>span:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Break Room TV: PLAY and SKIP at 14 px at least (the drawn plates scale from their outer edges). */
[data-device="desktop"] .frame-surface[data-section="break-room-tv"] :is([data-region="break-room-tv.play"],[data-region="break-room-tv.skip"]){scale:1.3}
[data-device="phone"] .frame-surface[data-section="break-room-tv"] :is([data-region="break-room-tv.play"],[data-region="break-room-tv.skip"]){scale:1.25}
.frame-surface[data-section="break-room-tv"] [data-region="break-room-tv.play"]{transform-origin:100% 50%}
.frame-surface[data-section="break-room-tv"] [data-region="break-room-tv.skip"]{transform-origin:0 50%}
[data-device="desktop"] .frame-surface[data-section="break-room-tv"] .q-live[data-region="break-room-tv.progress"]{padding-left:1.3cqw}
[data-device="phone"] .frame-surface[data-section="break-room-tv"] .q-live[data-region="break-room-tv.progress"]{padding-left:4cqw}
/* Note 20: the way into ACCOUNTING is a brass door plate in the arcade room. */
.quit-cabinets .quit-cabinets__accounting{--plate-w:clamp(220px,15.3vw,300px);position:absolute;z-index:3;top:2.4%;right:2.6%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:var(--plate-w);height:calc(var(--plate-w) * .4946);margin:0;padding:calc(var(--plate-w) * .236) calc(var(--plate-w) * .125) calc(var(--plate-w) * .084);background:url(/runtime/quit/pages-art/nameplate.png) 0 0/100% 100% no-repeat;color:#3a2410;font:400 max(12px,.86vw)/1.15 var(--t-font-display);letter-spacing:.02em;text-align:center;text-decoration:none;image-rendering:pixelated;transition:transform .12s ease-out,filter .12s ease-out}
.quit-cabinets .quit-cabinets__accounting:hover{filter:brightness(1.08);transform:translateY(-1px)}
.quit-cabinets .quit-cabinets__accounting:active{transform:translateY(2px)}
.quit-cabinets .quit-cabinets__accounting:focus-visible{outline:3px solid var(--t-focus,#fff0ad);outline-offset:3px}
@media (max-width:900px){.quit-cabinets .quit-cabinets__accounting{--plate-w:240px;position:relative;top:auto;right:auto;font-size:12px}}
/* Note 20: ALL TEMPLATES, ALL STICKERS and REMOVE STICKER sit in the drawn TEMPLATES and STICKERS panels. */
.frame-surface>.q-meme-library[data-quit-meme-library]{position:absolute;inset:0;display:block;z-index:230;pointer-events:none}
html[data-production] .frame-surface>.q-meme-library>.c-btn.q-plate[data-library-plate]{position:absolute;display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:0;margin:0;padding:0 .6em;border-style:solid;border-width:8px 7px;border-image:url(/runtime/quit/pages-art/plate.png) 14 12 fill / 8px 7px stretch;border-radius:0;background:#fb5f17 padding-box;box-shadow:none;color:#140b04;font:700 max(12px,.95cqw)/1 var(--t-font-display);letter-spacing:.03em;white-space:nowrap;pointer-events:auto}
html[data-production] .frame-surface>.q-meme-library>.c-btn.q-plate[data-library-plate] .c-btn__label{font:inherit;color:inherit}
html[data-production] .frame-surface>.q-meme-library>.c-btn.q-plate[data-library-plate]:hover:not([aria-disabled="true"]){filter:brightness(1.08);transform:translateY(-1px)}
html[data-production] .frame-surface>.q-meme-library>.c-btn.q-plate[data-library-plate]:active:not([aria-disabled="true"]){filter:brightness(.94);transform:translateY(2px)}
html[data-production] .frame-surface>.q-meme-library>.c-btn.q-plate[data-library-plate]:is([aria-disabled="true"],:disabled){filter:brightness(.8);cursor:not-allowed}
/* Desktop: in the panels' header rows and in the recess under the stickers. */
html[data-device="desktop"] .frame-surface>.q-meme-library>.c-btn.q-plate[data-library-plate]{left:14.6%;width:11.6%;height:2.35cqw}
html[data-device="desktop"] .frame-surface>.q-meme-library>.c-btn.q-plate[data-library-plate="templates"]{top:6.4cqw}
html[data-device="desktop"] .frame-surface>.q-meme-library>.c-btn.q-plate[data-library-plate="stickers"]{top:36.6cqw}
html[data-device="desktop"] .frame-surface>.q-meme-library>.c-btn.q-plate[data-library-plate="remove"]{top:46.45cqw}
/* Phone: right of each panel title, 26 px plates with a 44 px touch area; REMOVE shows its short label. */
html[data-device="phone"] .frame-surface>.q-meme-library>.c-btn.q-plate[data-library-plate]{right:4%;height:26px;padding:0 9px;border-width:6px;border-image-width:6px;font-size:12px}
html[data-device="phone"] .frame-surface>.q-meme-library>.c-btn.q-plate[data-library-plate]::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
html[data-device="phone"] .frame-surface>.q-meme-library>.c-btn.q-plate[data-library-plate="templates"]{top:calc(70.2cqw - 13px)}
html[data-device="phone"] .frame-surface>.q-meme-library>.c-btn.q-plate[data-library-plate="stickers"]{top:calc(110.7cqw - 13px)}
html[data-device="phone"] .frame-surface>.q-meme-library>.c-btn.q-plate[data-library-plate="remove"]{top:calc(110.7cqw - 13px);right:calc(4% + 156px)}
html[data-device="phone"] .frame-surface>.q-meme-library>.c-btn.q-plate[data-library-plate="remove"] .q-plate__more{display:none}
/* Note 20: the EX-EMPLOYEES preview on /badges in the frames' materials: its filters are the frames' dark
   screen fields with a green rule, its buttons the frames' dark tabs, and the file box never shows empty. */
.q-collection .c-collection{background:#030805;border-style:solid;border-width:18px 34px;border-image:url(/runtime/quit/pages-art/strip.png) 26 46 fill / 18px 34px stretch}
.q-collection .c-collection label{font:400 20px/1.1 var(--t-font-body);color:var(--t-green)}
.q-collection .c-collection :is(select,input){min-height:44px;padding:6px 36px 6px 12px;border:2px solid #1d8a4a;border-radius:4px;background:#04130c;color:#3ddc6f;font:400 16px/1.1 var(--t-font-body);box-shadow:inset 0 0 0 1px #020905}
.q-collection .c-collection input{padding-right:12px}
.q-collection .c-collection input::placeholder{color:#2c9c55;opacity:1}
.q-collection .c-collection select{background-image:none;cursor:pointer}
.q-collection .c-collection select option{background:#04130c;color:#3ddc6f}
.q-collection .c-collection :is(select,input):hover{border-color:#2fd56a}
.q-collection .c-collection :is(select,input):focus-visible{outline:3px solid var(--t-focus,#fff0ad);outline-offset:2px}
.q-collection .c-collection .c-collection__toolbar .c-btn{min-height:40px;padding:0 14px;border:2px solid #1d8a4a;border-radius:4px;background:#04130c;box-shadow:none;color:#3ddc6f;font:400 14px/1 var(--t-font-display);letter-spacing:.04em}
.q-collection .c-collection .c-collection__toolbar .c-btn:hover:not([aria-disabled="true"]){background:#0b2a17;color:#7ef0a4;transform:none}
.q-collection .c-collection .c-collection__toolbar .c-btn[data-variant="primary"]{border-color:#ff610b;background:#ff610b;color:#140b04}
.q-collection .c-collection .c-collection__detail img{background:#04130c;border-radius:6px}
.q-collection .c-collection .c-collection__detail img:not([src]){visibility:hidden}
.q-collection .c-collection .c-collection__tile img{background:transparent}

/* The flight plan's top padding is a length: a percentage resolved against the slot's width and pushed the labels
   out of the 105 px slot on desktop. */
/* DESIGN round two, B5: the conspiracy board's clock says UNKNOWN at the clock digits' size, centred, in the
   clock's orange (the shared placeholder rule sizes by the slot's width, 6 px in the phone's narrow clock). */
.frame-surface .q-live[data-region="the-conspiracy.countdown"]{justify-content:center}
.frame-surface .q-live[data-region="the-conspiracy.countdown"]>output[data-quit-unknown]{width:auto;font:400 min(60cqh,22cqw)/1 "VT323",monospace;letter-spacing:.06em;color:#ee8749;text-align:center}
/* The meme maker's TOP TEXT and BOTTOM TEXT fields at the frame's lettering size on desktop (16 px read small in their
   54 px boxes). */
[data-device="desktop"] .frame-surface :is([data-region="meme-maker.top-text"],[data-region="meme-maker.bottom-text"]) :is(input,textarea),
[data-device="desktop"] .frame-surface :is(input,textarea):is([data-region="meme-maker.top-text"],[data-region="meme-maker.bottom-text"]){font-size:1.75cqw}
/* The vending machine's shipping line fits its strip at every width (it ran 3 percent long and lost "E."). */
[data-device="desktop"] .frame-surface .q-live[data-region="vending-machine.shipping"]>output{font-size:1.05cqw;letter-spacing:0}
/* The drawn green status tags (the crew's PLAYER 1, the roadmap's stage tag), set as the frame draws them. */
.frame-surface .q-live:is([data-region="the-crew.selected-player"],[data-region="the-crew.player_selection"],[data-region="roadmap.phase-status"],[data-region="roadmap.phase_status"],[data-region="roadmap.active_phase"]){justify-content:center;align-items:center}
.frame-surface .q-live:is([data-region="the-crew.selected-player"],[data-region="the-crew.player_selection"],[data-region="roadmap.phase-status"],[data-region="roadmap.phase_status"],[data-region="roadmap.active_phase"])>output:not(:empty){display:inline-block;width:auto;max-width:100%;padding:.22em .6em .18em;border:2px solid #07140d;border-radius:2px;background:#25dc71;color:#04110a;font:400 max(12px,1.05cqw)/1 var(--t-font-display);letter-spacing:.05em;white-space:nowrap;box-shadow:2px 2px 0 #030805}
/* The phone help desk: the approved exchange fits its screen (six lines; the status label yields to it). */
[data-device="phone"] .q-chat-log-content{gap:.2em;padding:.2em .4em .3em}
[data-device="phone"] .q-chat-log-content>p[data-role]{padding:.12em .5em .1em;border-width:1px}
[data-device="phone"] [data-quit-chat-log]:has(p[data-sample]) .c-chat__mode{display:none}
/* Phone vending prices fit their 43 px slots beside ADD (they ran to 48 px and lost a digit). */
[data-device="phone"] .frame-surface .q-live[data-region^="vending-machine.price_"]>output{font-size:15.5px;letter-spacing:-.04em}

/* Interactive desk and launch directory: text remains legible independently of the painted controls. */
.q-help-scene{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#030805}
.q-help-picture{overflow:hidden;min-width:0;pointer-events:none}
.q-help-picture>.frame-surface{width:200%}
.q-help-terminal{display:flex;flex-direction:column;min-width:0;margin:18px;padding:24px;border:3px solid #39e984;background:#041009;color:#b7ffce;box-shadow:inset 0 0 0 5px #10291a}
.q-help-terminal h2,.q-directory-panel h2{margin:0 0 12px;color:#ff791f;font:700 clamp(22px,1.7vw,32px)/1.25 var(--t-font-display);overflow-wrap:anywhere}
.q-help-intro{margin:0 0 14px;font:400 22px/1.3 var(--t-font-body);color:#dbffe6}
[data-quit-help-desk]{flex:1;min-height:0;display:flex}
.q-help-terminal .c-chat{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:#041009;color:#b7ffce;font:400 22px/1.3 var(--t-font-body)}
.q-help-terminal .c-chat::before,.q-help-terminal .c-chat::after{display:none}
.q-help-terminal .c-chat__mode{margin:0;color:#88edaa;font-size:18px}
.q-help-terminal .c-chat__log{flex:1;min-height:200px;max-height:440px;padding:14px;border:2px solid #3ddc79;background:#020805;overflow:auto;scrollbar-width:thin;font:400 22px/1.35 var(--t-font-body)}
/* A drag on the log scrolls the page once the log has nothing left to scroll (audit-a5 home-phone-05): the chat
   log's own overscroll contain made the help desk box a dead patch for a finger on phones. */
.q-help-terminal .c-chat__log{overscroll-behavior-y:auto}
.q-help-terminal .c-chat__log p{max-width:100%;margin:0 0 14px;padding:10px;border:1px solid #388856;border-radius:0;background:#092615;color:#c3ffd7;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.35}
.q-help-terminal .c-chat__log p[data-role=user]{color:#eeffef;border-color:#7ca88b;background:#112b1b}
.q-help-terminal .c-chat__quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
.q-help-terminal .c-btn{min-height:46px;padding:10px 8px;white-space:normal;border:2px solid #52ed87;border-radius:0;background:#0d2818;color:#c4ffd6;box-shadow:none;font:400 18px/1.2 var(--t-font-body);letter-spacing:0}
.q-help-terminal .c-btn:hover{background:#194c2d;color:#f3fff7}
.q-help-terminal .c-chat form{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:8px;margin:0}
.q-help-terminal .c-chat form label{grid-column:1/-1;color:#b7ffce;font-size:18px}
.q-help-terminal textarea.c-input{display:block;width:100%;height:84px;min-height:84px;max-height:180px;resize:none;overflow-y:auto;padding:12px;border:2px solid #59e995;border-radius:0;background:#020805;color:#daffe6;caret-color:#daffe6;font:400 22px/1.3 var(--t-font-body);box-shadow:none}
/* No browser resize grip on the question box (audit-B, 22 Oct): it grows with what is typed, from 84 to 180 px, where the
   browser can size a field to its content, and scrolls inside past that (or at 84 px where it cannot). */
@supports (field-sizing:content){.q-help-terminal textarea.c-input{field-sizing:content;height:auto}}
.q-help-terminal textarea.c-input::placeholder{color:#a4eabe;opacity:1}
.q-help-terminal [data-quit-chat-send]{background:#57ee8d;color:#03200d;font:700 20px/1 var(--t-font-display)}
.q-help-terminal :is(textarea,button,[role=log]):focus-visible{outline:3px solid #f4ffe0;outline-offset:3px}
.q-help-terminal .c-chat [role=status]{margin:0;color:#daffe6;font-size:20px;min-height:0}
.q-help-terminal .c-chat [role=status]:empty{display:none}
.q-help-terminal .c-chat button[hidden]{display:none}
/* LIVEWATCH lw-asksi (16 Oct): eight buttons in two rows, the thinking dots while the desk works, the letter as a sheet of
   paper with its copy button, a reply from the files marked by a dashed edge. */
.q-help-terminal .c-chat__quick{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.q-help-terminal .c-chat__quick .c-btn{min-height:44px;padding:6px 4px;font-size:15px;line-height:1.15}
.q-help-terminal .c-chat [aria-disabled=true]{opacity:.6;cursor:progress}
.q-help-terminal .c-chat[data-state=thinking] .c-chat__log{border-color:#8dffb5}
.c-chat__thinking{display:inline-flex;gap:.35em;align-items:center;height:1.2em;vertical-align:middle}
.c-chat__thinking i{display:block;width:.5em;height:.5em;background:currentColor;animation:c-chat-think 1.05s linear infinite}
.c-chat__thinking i:nth-child(2){animation-delay:.17s}
.c-chat__thinking i:nth-child(3){animation-delay:.34s}
@keyframes c-chat-think{0%,100%{opacity:.2}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.c-chat__thinking i{animation:none;opacity:.75}}
.q-help-terminal .c-chat__log p.c-chat__letter{margin-left:18px;background:#efe8cf;color:#1d1a12;border:1px solid #b9ad84;font:400 19px/1.4 var(--t-font-body)}
.q-help-terminal .c-chat__log .c-chat__copy{margin:-6px 0 14px 18px;min-height:36px;font-size:15px}
.q-help-terminal .c-chat__log a.c-btn{display:inline-flex;margin:-6px 0 14px}
.q-help-terminal .c-chat__log p[data-fallback]{border-style:dashed}
/* The Superintelligence alive on the left (runtime/quit/help-desk-avatar.js): his own bob and lean on every layer of him
   at once, the moving copies of his painted eyes, code-native eyelids, the show's mouth set on his painted smile (lighten,
   so a patch's dark ground disappears into his screen), a scanline and a flicker on the screen. Screen #0f2517, eyes #1aae40. */
.q-si-alive{--si-bob:-4px;--si-lean:6px;animation:q-si-bob 3.8s ease-in-out infinite}
[data-device="phone"] .q-si-alive{--si-bob:-2px;--si-lean:0px}
.q-si-alive[data-si-state=listening]{animation:q-si-lean .45s ease-out forwards}
.q-si-alive[data-si-state=thinking]{animation:q-si-think .8s ease-in-out infinite}
.q-si-alive[data-si-state=talking]{animation:q-si-talk .38s ease-in-out infinite alternate}
.q-si-alive[data-si-state=break]{animation:q-si-slump .6s ease-out forwards}
@keyframes q-si-bob{0%,100%{translate:0 0}50%{translate:0 var(--si-bob)}}
@keyframes q-si-lean{to{translate:var(--si-lean) -1px}}
@keyframes q-si-think{0%,100%{translate:-1.5px -1px}50%{translate:1.5px -1px}}
@keyframes q-si-talk{from{translate:0 0}to{translate:0 -1.5px}}
@keyframes q-si-slump{to{translate:0 3px}}
.q-si-rig{position:absolute;inset:0;pointer-events:none}
.q-si-rig :is(div,span){position:absolute}
.q-si-eyes,.q-si-lids{inset:0;display:none}
.q-si-rig:is([data-si-state=listening],[data-si-state=thinking]) .q-si-eyes{display:block}
.q-si-eyes__cover,.q-si-mouth__cover{background:#0f2517;box-shadow:0 0 3px 2px #0f2517;border-radius:4px}
.q-si-eye{background-repeat:no-repeat;translate:var(--si-look-x,0) var(--si-look-y,0);transition:translate .2s steps(3)}
.q-si-rig[data-si-state=thinking] .q-si-eye{animation:q-si-scan 1.1s steps(4) infinite}
@keyframes q-si-scan{0%,100%{translate:-35% -20%}50%{translate:35% -20%}}
.q-si-rig:is([data-blink],[data-si-state=break]) .q-si-lids{display:block}
.q-si-lids span{background:linear-gradient(#0f2517 0 50%,#1aae40 50% 63%,#0f2517 63%);border-radius:2px}
.q-si-mouth__shape{inset:0;display:none;background:no-repeat 0 0/100% 100%;mix-blend-mode:lighten;filter:hue-rotate(19deg) brightness(.8);image-rendering:pixelated}
.q-si-mouth__cover{display:none}
.q-si-mouth:not([data-shape=closed]) .q-si-mouth__cover{display:block}
.q-si-mouth[data-shape=slight] [data-shape=slight],.q-si-mouth[data-shape=open] [data-shape=open],.q-si-mouth[data-shape=wide] [data-shape=wide],.q-si-mouth[data-shape=round] [data-shape=round],.q-si-mouth[data-shape=teeth] [data-shape=teeth]{display:block}
.q-si-screen{overflow:hidden;border-radius:7%;mix-blend-mode:screen;background:linear-gradient(180deg,transparent 0 45%,rgba(110,255,160,.09) 49% 51%,transparent 55%) 0 100%/100% 300% no-repeat,rgba(60,255,130,.035);animation:q-si-scanline 6.5s linear infinite,q-si-flicker 7.3s steps(1,end) infinite}
@keyframes q-si-scanline{from{background-position:0 100%,0 0}to{background-position:0 0,0 0}}
@keyframes q-si-flicker{0%,100%{opacity:1}41%{opacity:.35}42%{opacity:1}77%{opacity:.6}78%{opacity:1}}
.q-si-rig[data-si-state=thinking] .q-si-screen{animation-duration:1.4s,2.1s;background-color:rgba(60,255,130,.07)}
.q-si-rig[data-si-state=break] .q-si-screen{mix-blend-mode:normal;background:rgba(0,0,0,.38);animation:none}
@media (prefers-reduced-motion:reduce){.q-si-alive,.q-si-screen,.q-si-eye{animation:none!important}.q-si-eye{transition:none}}
.q-si-mini{display:none}
/* THE DIRECTORY (sections redesign, 22 Oct 2026): the approved design's riveted gunmetal board over the painted office.
   The frame, the groups well, the rows' bars and the group tags are nine-slices cut from the design (pages-art/directory-*,
   tests/quit-content/test_pages_art.py); the words stay live. Every length is in the design's own pixels: --d is one pixel
   of the 1735 px desktop design across the scene (the board scales with the painting), --p one pixel of the 866 px phone
   design, never larger than at 390 px. --b and --t scale the bar and tag art (cut at phone size) to each layout. */
.q-directory-scene{position:relative;background:#030805;container-type:inline-size}
.q-directory-picture{pointer-events:none}
.q-directory-picture [data-layer="directory-board"]{visibility:hidden}
.q-directory-panel{--d:calc(100cqw / 1735);--b:calc(var(--d) * 60 / 82);--t:calc(var(--d) * 37 / 48);position:absolute;left:calc(181 * var(--d));top:calc(49 * var(--d));box-sizing:border-box;width:calc(1199 * var(--d));min-height:calc(443 * var(--d));margin:0;padding:calc(31.3 * var(--d)) 0 calc(51 * var(--d));border:0;background:none;box-shadow:none;isolation:isolate;color:#f8f5ea}
.q-directory-panel::before{content:"";position:absolute;inset:0;z-index:-1;border:0 solid transparent;border-image:url(/runtime/quit/pages-art/directory-frame.png) 166 74 50 61 fill/calc(166 * var(--d)) calc(74 * var(--d)) calc(50 * var(--d)) calc(61 * var(--d)) stretch round;pointer-events:none}
.q-directory-panel h2{width:max-content;margin:0 0 0 calc(58 * var(--d));color:#fc5a13;font:400 calc(69 * var(--d))/1 var(--t-font-display);letter-spacing:0;white-space:nowrap;overflow-wrap:normal;-webkit-text-stroke:calc(6.9 * var(--d)) #fc5a13;text-shadow:calc(1.5 * var(--d)) calc(2.5 * var(--d)) 0 #4a1805,calc(1 * var(--d)) calc(5 * var(--d)) calc(3 * var(--d)) rgba(0,0,0,.75);word-spacing:-.15em;transform:scaleX(.987);transform-origin:0 0}
.q-directory-panel>p{margin:calc(1.1 * var(--d)) 0 0 calc(62.1 * var(--d));color:#f8f5ea;font:400 calc(28.9 * var(--d))/1 var(--t-font-body)}
.q-directory-groups{display:grid;grid-template-columns:355fr 358fr 345fr;column-gap:calc(11 * var(--d));width:calc(1080 * var(--d));margin:calc(22.7 * var(--d)) 0 0 calc(61 * var(--d))}
.q-directory-groups>section{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:calc(6 * var(--d));min-width:0}
.q-directory-groups>section+section{padding-left:calc(22 * var(--d))}
/* The thin bevelled metal divider between two columns. */
.q-directory-groups>section+section::before{content:"";position:absolute;z-index:-1;left:0;top:0;bottom:calc(-6 * var(--d));width:calc(7 * var(--d));background:linear-gradient(90deg,#020202 0 14%,#4f4235 0 43%,#2b2e28 0 86%,#101110 0)}
.q-directory-groups h3{box-sizing:border-box;min-width:calc(100 * var(--d));height:calc(37 * var(--d));margin:0 0 calc(4 * var(--d));padding:0 calc(18 * var(--d));border:0 solid transparent;border-image:url(/runtime/quit/pages-art/directory-tag.png) 10 14 8 14 fill/calc(10 * var(--t)) calc(14 * var(--t)) calc(8 * var(--t)) calc(14 * var(--t)) stretch;color:#0a0300;font:400 calc(33.7 * var(--d))/calc(37 * var(--d)) var(--t-font-body);letter-spacing:0;text-align:center;white-space:nowrap}
/* A row is one black bevelled bar: the green label left, the warm white line right, on one line. The bar is drawn by
   ::before so hover and focus can light it without moving the words. */
.q-directory-panel :is(button,a).q-directory-link{position:relative;inset:auto;isolation:isolate;display:grid;grid-template-columns:calc(125 * var(--d)) minmax(0,1fr) auto;align-items:center;justify-content:stretch;gap:0;box-sizing:border-box;width:100%;min-width:0;height:auto;min-height:calc(60 * var(--d));margin:0;padding:0 calc(10 * var(--d)) 0 calc(18 * var(--d));border:0;border-radius:0;background:none;box-shadow:none;color:#18ef7e;font:400 calc(30.1 * var(--d))/1 var(--t-font-body);letter-spacing:0;text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer;transform:none;opacity:1;filter:none}
.q-directory-panel .q-directory-link::before{content:"";display:block;position:absolute;inset:0;z-index:-1;border:0 solid transparent;border-radius:0;border-image:url(/runtime/quit/pages-art/directory-bar.png) 12 20 10 16 fill/calc(12 * var(--b)) calc(20 * var(--b)) calc(10 * var(--b)) calc(16 * var(--b)) stretch round;background:none;box-shadow:none;pointer-events:none}
.q-directory-panel .q-directory-link::after{display:none}
.q-directory-panel .q-directory-link>[data-directory-label]{overflow:hidden;text-overflow:clip}
.q-directory-description{min-width:0;overflow:hidden;color:#f8f5ea;font-size:calc(24 * var(--d));text-overflow:ellipsis}
/* Hover and keyboard focus light the row: a phosphor green border and the bar a shade lighter. */
.q-directory-panel .q-directory-link:not([aria-disabled=true]):is(:hover,:focus-visible)::before{border:calc(3 * var(--d)) solid #12eb67;border-image:none;border-radius:calc(4 * var(--d));background:#102b1a;box-shadow:0 0 calc(5 * var(--d)) rgba(18,235,103,.55),inset 0 0 calc(4 * var(--d)) rgba(18,235,103,.3)}
/* The arcade skin lifts a hovered c-btn ([data-skin=arcade] .c-btn:hover); a row stays where it is. */
.q-directory-scene .q-directory-panel .q-directory-link.c-btn:is(:hover,:active,:focus-visible,[data-preview]){transform:none;box-shadow:none;animation:none}
.q-directory-link:focus-visible{outline:3px solid #f4ffe0;outline-offset:3px}
/* Before the mint a door without a page of its own is locked AT LAUNCH: dimmed, its lock at the right of the bar. */
.q-directory-lock{grid-column:3;grid-row:1;align-self:center;margin-left:calc(6 * var(--d));padding:calc(2 * var(--d)) calc(5 * var(--d));border:1px solid #6f8a77;color:#c9d8cd;font-size:calc(19 * var(--d));line-height:1.1;white-space:nowrap}
.q-directory-panel .q-directory-link[aria-disabled=true]{color:#7fbf97;cursor:not-allowed;filter:none;opacity:1}
.q-directory-panel .q-directory-link[aria-disabled=true] .q-directory-description{color:#b9b4a6;white-space:normal;line-height:1.05}
.q-directory-link:not([aria-disabled=true]) .q-directory-lock{display:none}
/* Phone: the scene band on top, the board below at full width, the groups stacked in one well, each after the first under
   a riveted rule, the rows as thumb-sized bars. */
[data-device="phone"] .q-directory-picture{height:50.8cqw;overflow:hidden}
[data-device="phone"] .q-directory-picture>.frame-surface{margin-top:-7.2cqw}
[data-device="phone"] .q-directory-panel{--p:min(calc(100cqw / 866),calc(390px / 866));--b:var(--p);--t:var(--p);position:relative;inset:auto;width:auto;min-height:0;padding:calc(59.8 * var(--p)) calc(46 * var(--p)) calc(47 * var(--p)) calc(47 * var(--p))}
[data-device="phone"] .q-directory-panel::before{border-image:url(/runtime/quit/pages-art/directory-frame-phone.png) 61 46 47 47 fill/calc(61 * var(--p)) calc(46 * var(--p)) calc(47 * var(--p)) calc(47 * var(--p)) stretch round}
[data-device="phone"] .q-directory-panel h2{margin-left:calc(18.8 * var(--p));font-size:calc(85.6 * var(--p));-webkit-text-stroke-width:calc(8.6 * var(--p));text-shadow:calc(2 * var(--p)) calc(3 * var(--p)) 0 #4a1805,calc(1 * var(--p)) calc(6 * var(--p)) calc(4 * var(--p)) rgba(0,0,0,.75)}
[data-device="phone"] .q-directory-panel>p{margin:calc(5.95 * var(--p)) 0 0 calc(23.35 * var(--p));font-size:calc(55 * var(--p))}
[data-device="phone"] .q-directory-groups{position:relative;display:block;width:auto;margin:calc(18.65 * var(--p)) 0 0;padding-bottom:calc(28 * var(--p))}
[data-device="phone"] .q-directory-groups::before{content:"";position:absolute;inset:0;z-index:-1;border:0 solid transparent;border-image:url(/runtime/quit/pages-art/directory-well-phone.png) 40 35 26 33 fill/calc(40 * var(--p)) calc(35 * var(--p)) calc(26 * var(--p)) calc(33 * var(--p)) stretch round;pointer-events:none}
[data-device="phone"] .q-directory-groups>section{gap:calc(8 * var(--p));padding:calc(29 * var(--p)) calc(28 * var(--p)) 0 calc(27 * var(--p))}
[data-device="phone"] .q-directory-groups>section+section{margin-top:calc(16 * var(--p))}
[data-device="phone"] .q-directory-groups>section+section::before{right:0;bottom:auto;width:auto;height:calc(40 * var(--p));border:0 solid transparent;border-image:url(/runtime/quit/pages-art/directory-rule-phone.png) 0 35 0 35 fill/0 calc(35 * var(--p)) 0 calc(35 * var(--p)) stretch;background:none}
[data-device="phone"] .q-directory-groups h3{min-width:0;height:calc(48 * var(--p));margin:0 0 calc(1 * var(--p)) calc(12 * var(--p));padding:0 calc(38 * var(--p));font-size:calc(48.9 * var(--p));line-height:calc(48 * var(--p))}
[data-device="phone"] .q-directory-panel :is(button,a).q-directory-link{grid-template-columns:calc(264.3 * var(--p)) minmax(0,1fr) auto;min-height:calc(82 * var(--p));padding:0 calc(16 * var(--p)) 0 calc(30.4 * var(--p));font-size:calc(53.3 * var(--p))}
[data-device="phone"] .q-directory-description{font-size:calc(40.5 * var(--p))}
[data-device="phone"] .q-directory-panel .q-directory-link:not([aria-disabled=true]):is(:hover,:focus-visible)::before{border-width:calc(5 * var(--p));border-radius:calc(7 * var(--p));box-shadow:0 0 calc(9 * var(--p)) rgba(18,235,103,.55),inset 0 0 calc(7 * var(--p)) rgba(18,235,103,.3)}
[data-device="phone"] .q-directory-lock{margin-left:calc(10 * var(--p));padding:calc(3 * var(--p)) calc(8 * var(--p));font-size:calc(34 * var(--p))}
/* The copy patches are set over painted pixel lettering and tuned to its proportions, so they keep the pixel face VT323
   (display.css) under the IBM Plex Mono body face. */
.q-copy-patch{position:absolute;z-index:240;display:flex;align-items:center;justify-content:center;padding:0 2px;background:#07100a;color:#57e88a;font:400 1.25cqw/1.05 VT323,monospace;text-align:center;pointer-events:none}
.q-copy-heading{color:#ff6654;font-size:1.45cqw;font-weight:700}
.q-copy-role{color:#f5e8c7;font-size:1.45cqw}
.q-copy-file{font-size:1.4cqw}
.q-copy-arcade{color:#36d974;font-size:1.35cqw;white-space:nowrap}
/* The tenth law in the hand of the nine drawn above it (audit-B, 22 Oct): their size (desktop: a 30 px cap and a 20.4 px
   pitch in the 2736 px frame; phone: 24.6 px a letter in the 1536 px frame), their green, their left edge (desktop frame
   x 1678, phone 227: the patch starts 8 and 15 px left of it, less the N's side bearing), on its own row's darker ground. */
.q-copy-law{justify-content:flex-start;padding:0 0 .1cqw .22cqw;background:#030907;color:#16ad49;font-size:1.92cqw;letter-spacing:-.02em;white-space:nowrap}
/* The mission floor's launchpad line over the drawn COMING SOON. (site-panels.mjs), in the drawn lines' size, green and
   left edge (desktop: 1.94cqw, ink at frame x 1975, two lines on the drawn 53 px pitch; phone: 4.3cqw, one line, ink at 89). */
.q-copy-mission{justify-content:flex-start;align-items:flex-start;padding:.18cqw 0 0 .26cqw;background:#040d0a;color:#04ae48;font-size:1.94cqw;line-height:1;text-align:left;white-space:pre-line}
[data-device="phone"] .q-copy-mission{align-items:center;padding:0 0 0 .3cqw;font-size:4.3cqw;white-space:nowrap}
/* The phone composition's patches at the phone sizes wherever the phone art is drawn: below 768 px and on a tall tablet
   (runtime/quit/frame-boot.js sets data-device), so a 768 px portrait screen no longer gets 9 px desktop sizes (audit-B). */
[data-device="phone"] .q-copy-heading{font-size:4.2cqw}
[data-device="phone"] .q-copy-role{font-size:3.4cqw}
[data-device="phone"] .q-copy-file{font-size:3.1cqw}
[data-device="phone"] .q-copy-arcade{font-size:2.2cqw}
[data-device="phone"] .q-copy-allegiance{font-size:3.5cqw}
/* The tenth law at the size of the nine drawn above it, on one line from 320 to 430 px (audit-a5 home-phone-03). */
[data-device="phone"] .q-copy-law{padding:0 0 0 .83cqw;color:#05a34a;font-size:4.2cqw;letter-spacing:0}
@media (max-width:767px),(max-width:1199px) and (max-aspect-ratio:3/4){
 html:not([data-device]) .q-copy-heading{font-size:4.2cqw}
 html:not([data-device]) .q-copy-role{font-size:3.4cqw}
 html:not([data-device]) .q-copy-file{font-size:3.1cqw}
 html:not([data-device]) .q-copy-arcade{font-size:2.2cqw}
 html:not([data-device]) .q-copy-allegiance{font-size:3.5cqw}
 html:not([data-device]) .q-copy-law{padding:0 0 0 .83cqw;color:#05a34a;font-size:4.2cqw;letter-spacing:0}
 html:not([data-device]) .q-copy-mission{align-items:center;padding:0 0 0 .3cqw;font-size:4.3cqw;white-space:nowrap}
}
/* The help desk stacks, picture over terminal, wherever the phone art is drawn: below 768 px and on a tall tablet
   (frame-boot.js sets data-device), so a 768 px portrait screen no longer squeezes the phone picture into half the width
   and breaks SUPERINTELLIGENCE in its heading (audit-B, 22 Oct). Before the attribute is set, the same media query. */
[data-device="phone"] .q-help-scene{display:block}
[data-device="phone"] .q-help-picture{height:70vw}
[data-device="phone"] .q-help-picture>.frame-surface{width:100%}
[data-device="phone"] .q-help-terminal{margin:0 8px 12px;padding:16px 10px;border-width:2px}
[data-device="phone"] .q-help-terminal h2{font-size:clamp(18px,5.5vw,22px)}
[data-device="phone"] .q-help-intro{font-size:20px}
[data-device="phone"] .q-help-terminal .c-chat__log{min-height:210px;max-height:300px;font-size:20px;padding:8px}
[data-device="phone"] .q-help-terminal .c-chat__quick{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-device="phone"] .q-help-terminal .c-chat__quick .c-btn{font-size:16px;min-height:46px}
[data-device="phone"] .q-help-terminal .c-chat form{grid-template-columns:minmax(0,1fr) 72px}
/* The small copy of his face by the box on phones (help-desk-avatar.js attachMini), above SEND. */
[data-device="phone"] .q-help-terminal .c-chat form .q-si-mini{display:block;position:relative;grid-column:2;grid-row:1;align-self:end;width:72px;aspect-ratio:184/160;overflow:hidden;border:2px solid #3ddc79;background:#0f2517}
[data-device="phone"] .q-help-terminal .c-chat form .q-si-mini>img{display:block;width:100%;height:100%}
[data-device="phone"] .q-help-terminal .c-chat form .q-si-mini~label{grid-column:1;align-self:end}
[data-device="phone"] .q-help-terminal textarea.c-input{font-size:20px;padding:10px}
[data-device="phone"] .q-help-terminal [data-quit-chat-send]{font-size:16px;padding:6px}
@media (max-width:767px),(max-width:1199px) and (max-aspect-ratio:3/4){
 html:not([data-device]) .q-help-scene{display:block}
 html:not([data-device]) .q-help-picture{height:70vw}
 html:not([data-device]) .q-help-picture>.frame-surface{width:100%}
 html:not([data-device]) .q-help-terminal{margin:0 8px 12px;padding:16px 10px;border-width:2px}
 html:not([data-device]) .q-help-terminal h2{font-size:clamp(18px,5.5vw,22px)}
 html:not([data-device]) .q-help-intro{font-size:20px}
 html:not([data-device]) .q-help-terminal .c-chat__log{min-height:210px;max-height:300px;font-size:20px;padding:8px}
 html:not([data-device]) .q-help-terminal .c-chat__quick{grid-template-columns:repeat(2,minmax(0,1fr))}
 html:not([data-device]) .q-help-terminal .c-chat__quick .c-btn{font-size:16px;min-height:46px}
 html:not([data-device]) .q-help-terminal .c-chat form{grid-template-columns:minmax(0,1fr) 72px}
 html:not([data-device]) .q-help-terminal .c-chat form .q-si-mini{display:block;position:relative;grid-column:2;grid-row:1;align-self:end;width:72px;aspect-ratio:184/160;overflow:hidden;border:2px solid #3ddc79;background:#0f2517}
 html:not([data-device]) .q-help-terminal .c-chat form .q-si-mini>img{display:block;width:100%;height:100%}
 html:not([data-device]) .q-help-terminal .c-chat form .q-si-mini~label{grid-column:1;align-self:end}
 html:not([data-device]) .q-help-terminal textarea.c-input{font-size:20px;padding:10px}
 html:not([data-device]) .q-help-terminal [data-quit-chat-send]{font-size:16px;padding:6px}
}

.q-tv-scheduled{pointer-events:none;cursor:default!important;display:flex;align-items:flex-end;justify-content:center}.q-tv-airdate{background:#030805;color:#f4e7cb;padding:4px;max-width:100%;font-family:var(--t-font-body);font-size:clamp(10px,1.1vw,20px);line-height:1.15;text-align:center}

.frame-surface .q-live:is([data-region="quitnomics.supply"],[data-region="quitnomics.tax"],[data-region="quitnomics.liquidity"],[data-region="quitnomics.launch"],[data-region="quitnomics.authority"]){container-type:size}
html[data-device] .frame-surface .q-live:is([data-region="quitnomics.supply"],[data-region="quitnomics.tax"],[data-region="quitnomics.liquidity"],[data-region="quitnomics.launch"],[data-region="quitnomics.authority"])>output{width:100%;font-size:min(1em,calc(94cqw / (var(--value-line,20) * .9)),calc(90cqh / (var(--value-lines,1) * 1.1)));white-space:pre-line;line-height:1.1;overflow:visible;text-overflow:clip}

.q-share-card-note{position:absolute;display:grid;place-items:center;background:#030805;z-index:4;pointer-events:none;color:#25dc71;text-align:center;font:700 1.2cqw/1.5 var(--t-font-display)}[data-device="phone"] .q-share-card-note{font-size:2.6cqw}

.q-tv-scheduled{flex-direction:column;justify-content:center;align-items:stretch;padding:0!important;border:0!important;box-shadow:none!important;white-space:normal!important}.q-tv-episode-name{color:#f4e7cb;font:700 clamp(13px,1.2vw,20px)/1.1 var(--t-font-body);text-align:left}.q-tv-scheduled .q-tv-airdate{padding:2px 0;font-size:clamp(12px,.88vw,15px);text-align:left}.q-tv-scheduled.q-art-control{justify-content:flex-start;align-items:flex-end}.q-tv-scheduled.q-art-control .q-tv-airdate{width:68%;padding:0;background:transparent;font-size:clamp(12px,2.6vw,18px);line-height:.8}
/* NOW SHOWING (audit-B, 22 Oct): on desktop each title over its air date, 17 px over 12.7 px at 1440 (were 12.2 and 11.5),
   one line each down to 1024 px; on phones no air date under 12 px (were 10.2 at 393, 9.4 at 360). The drawn PLAY plate on
   phones (57.6 by 23 px, scaled 1.25) keeps its face and takes a finger over 45 px of height: its ::before is the hit area,
   reaching down over the drawn stand (the show's canvas lies over the plate's top edge). The next air date under it is at
   least 12 px as drawn (11cqw of its tag, which the plate's 1.25 scale enlarges; was 11.1 px at 360). */
[data-device="phone"] .frame-surface[data-section="break-room-tv"] .frame-cutout[data-region="break-room-tv.play"]::before{content:"";position:absolute;left:0;right:0;top:0;height:max(100%,36px)}
.q-tv-scheduled.q-tv-next-date{overflow:hidden;background:#030805;container-type:size}.q-tv-next-date .q-tv-airdate{padding:0;font-size:min(11cqw,70cqh);line-height:1;white-space:nowrap;text-align:center}

/* FILE 000 on "/": a torn-off sheet of the green-bar printout that /manifesto is printed on (content/quit/seo/article.css),
   between the mission floor and the rules. The index lists the manifesto's own section headings (render.mjs). */
.q-manifesto-floor{padding:clamp(20px,3.4vw,48px) clamp(8px,1.8vw,24px)}
.q-manifesto-floor__sheet{--mf-paper:#f3eedc;--mf-band:#dde8cf;--mf-ink:#1d231d;--mf-soft:#4f5a4c;--mf-perf:#9fac92;--mf-accent:#b23c00;--mf-link:#0b5d2f;--mf-line:32px;--mf-edge:44px;--mf-hole:8px;position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start;max-width:1180px;margin:0 auto;padding:calc(var(--mf-line)*1.5) calc(var(--mf-edge) + clamp(18px,4vw,60px));color:var(--mf-ink);font:400 24px/var(--mf-line) var(--t-font-body,"VT323",monospace);background:repeating-linear-gradient(180deg,var(--mf-paper) 0 calc(var(--mf-line)*3),var(--mf-band) calc(var(--mf-line)*3) calc(var(--mf-line)*6));box-shadow:0 18px 44px rgb(0 0 0/.55)}
.q-manifesto-floor__sheet::before,.q-manifesto-floor__sheet::after{content:"";position:absolute;top:0;bottom:0;width:var(--mf-edge);pointer-events:none;background:radial-gradient(circle,#030805 0 var(--mf-hole),transparent calc(var(--mf-hole) + .5px)) 50% calc(var(--mf-line)*.75)/100% calc(var(--mf-line)*1.5) repeat-y,var(--mf-paper)}
.q-manifesto-floor__sheet::before{left:0;border-right:2px dashed var(--mf-perf)}
.q-manifesto-floor__sheet::after{right:0;border-left:2px dashed var(--mf-perf)}
.q-manifesto-floor__kicker,.q-manifesto-floor__index-title{margin:0 0 calc(var(--mf-line)*.5);font-family:var(--t-font-display,"Silkscreen",monospace);font-size:15px;line-height:1.4;letter-spacing:.08em}
.q-manifesto-floor__kicker{color:var(--mf-accent)}
.q-manifesto-floor__index-title{color:var(--mf-soft)}
.q-manifesto-floor__title{margin:0 0 calc(var(--mf-line)*.75);font-family:var(--t-font-display,"Silkscreen",monospace);font-weight:700;font-size:clamp(30px,4.2vw,54px);line-height:1.04;letter-spacing:0;color:var(--mf-ink)}
.q-manifesto-floor__line{margin:0 0 var(--mf-line);max-width:28em}
.q-manifesto-floor__read{display:inline-block;padding:.8em 1.15em;font-family:var(--t-font-display,"Silkscreen",monospace);font-weight:700;font-size:16px;line-height:1.2;letter-spacing:.06em;color:#140a03;background:var(--t-accent,#ff610b);border:3px solid #2a1406;box-shadow:0 4px 0 #6b2a05;text-decoration:none}
.q-manifesto-floor__read:hover{background:#ff7a2e;color:#140a03}
.q-manifesto-floor__read:active{transform:translateY(3px);box-shadow:0 1px 0 #6b2a05}
.q-manifesto-floor__read:focus-visible,.q-manifesto-floor__index a:focus-visible{outline:3px solid var(--mf-ink);outline-offset:3px}
.q-manifesto-floor__index{border-left:2px dashed var(--mf-perf);padding-left:clamp(18px,3vw,40px)}
.q-manifesto-floor__index ol{margin:0;padding-left:2.4em;list-style:decimal-leading-zero}
.q-manifesto-floor__index li{margin:0 0 calc(var(--mf-line)*.15)}
.q-manifesto-floor__index li::marker{color:var(--mf-accent)}
.q-manifesto-floor__index a{color:var(--mf-link);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.q-manifesto-floor__index a:hover{color:var(--mf-accent)}
@media (max-width:767px){
 .q-manifesto-floor__sheet{--mf-line:28px;--mf-edge:20px;--mf-hole:5px;grid-template-columns:1fr;font-size:20px;padding:calc(var(--mf-line)*1.25) calc(var(--mf-edge) + 14px)}
 .q-manifesto-floor__index{border-left:0;border-top:2px dashed var(--mf-perf);padding:var(--mf-line) 0 0}
}
@media (prefers-reduced-motion:reduce){.q-manifesto-floor__read:active{transform:none}}
/* Phone tap targets of at least 24 px (STORY-16, 22 Oct). Inline links keep their line and grow their padding, which
   is part of what a tap hits: the rule page's THE 10 RULES (16 px tall) and the roadmap's HOW THE NFT AIRDROP WORKS
   (13 px tall). */
.q-extra[aria-labelledby="other-rules-title"] .q-extra__panel>a[href="/commandments"]{padding-block:10px}
.q-rb__facts a[href="/badges#nft-airdrop"]{padding-block:7px}
/* The rules modal names its rule under the picture (STORY-03, 22 Oct; frame-controls.js openCollection): the rule in the
   display face, linked to its page, then its note. */
.c-modal .q-rule-modal__rule{margin:.6rem 0 .25rem;font:400 clamp(16px,1.7vw,22px)/1.25 var(--t-font-display)}
.c-modal .q-rule-modal__rule a{padding-block:4px;color:#ff741b;text-underline-offset:.2em}
/* The picture gives up height so the rule, its note and the modal's keys stay on screen with it (a 664 px phone). */
.c-modal:has(.q-rule-modal__rule) img{display:block;width:auto;max-width:100%;max-height:max(180px,calc(100dvh - 440px));margin-inline:auto}
.c-modal .q-rule-modal__note{margin:0 0 1rem;line-height:1.35}
/* The Break Room TV key says what a press does (audit COMM-03, 22 Oct 2026): main.js turns its label into .q-tv-word,
   drawn in the plate's own VT323 lettering and colour over the painted PLAY, so it reads PAUSE while the show plays. */
.frame-cutout[data-quit-tv-play] .q-tv-word{position:absolute;top:16%;bottom:16%;left:40%;right:3%;padding-left:2%;display:flex;align-items:center;background:#050c0c;color:#9cb09f;font:400 1.57cqw/1 VT323,monospace;letter-spacing:0;white-space:nowrap;overflow:hidden;pointer-events:none}
[data-frame="phone-break-room-tv"] .frame-cutout[data-quit-tv-play] .q-tv-word{left:35%;padding-left:1%;color:#a8b6a8;font-size:3.3cqw}
/* Meme maker on a phone (audits COMM-10 and COMM-12, 22 Oct 2026): the selected sticker's corner resize handle
   (meme-editor.js), two-finger pinch over the meme once a sticker is on it, and touch areas of at least 24 px for the
   caption fields and the effect keys; the art does not move. */
.q-meme__resize{display:none;position:absolute;right:-12px;bottom:-12px;width:24px;height:24px;box-sizing:border-box;background:var(--t-green,#36d974);border:3px solid #030805;cursor:nwse-resize;touch-action:none;z-index:3}
.q-meme__resize::before{content:"";position:absolute;inset:-10px}
.q-meme__sticker[aria-pressed="true"] .q-meme__resize{display:block}
:is(.q-meme,.q-meme-canvas):has(.q-meme__sticker){touch-action:pan-y}
[data-device="phone"] .q-frame-input[data-region^="meme-maker."]{min-height:24px}
[data-device="phone"] .frame-cutout[data-region^="meme-maker.effect"]::before{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,28px);transform:translateY(-50%)}