/* The top bar (design pass, 22 Oct 2026; the owner's pick "A", board quit DP-D1): the header's keys and the lobby deck under it
   (runtime/quit/contract-bar.js). Every plate is generated art in runtime/quit/deck-art, laid as a 9-slice
   border-image, so a key or bay keeps its rivets and lip at any width; every word on it is live text in the site's two
   faces. The deck's height is --q-ca-room, which the hero, the arcade cabinets and the first-paint reservations
   (frames.css, loading.css, measured.css) subtract, so each layout below sets it and fits inside it exactly.
   Layouts: three bays on one row from 1240 px; one riveted panel with two rows below that (the full address down to
   768 px, its short form on phones). */
:root:has(body>.q-ca:not([hidden])){--q-ca-room:84px}
@media(max-width:1239px){:root:has(body>.q-ca:not([hidden])){--q-ca-room:100px}}
@media(max-width:767px){:root:has(body>.q-ca:not([hidden])){--q-ca-room:98px}}

/* ---------------------------------------------------------------- the header keys */
/* The keys' min-widths are their measured widths in Silkscreen (APPLY TO QUIT 195, SOUND OFF 147, BUY $QUIT on phones
   118, 105 and 91, its $ being IBM Plex Mono): on a slow link the first paint uses the narrower fallback face, and without them the keys grew
   20 to 28 px when Silkscreen arrived and pushed MENU and SOUND sideways (a layout shift on every first visit). APPLY
   and SOUND start their icon at the left padding, so the chair and the speaker stay put while the words settle. */
/* The header's ground is the wordmark plate's own (rgb 6 12 11, measured), so the plate sits in it without a box. */
html[data-skin] .c-header[data-quit-navigation]{gap:10px;padding-inline:max(20px,calc((100% - 1440px) / 2 + 12px));background-color:#060c0b}
html[data-skin] .c-header[data-quit-navigation]>:is(.c-header__apply,.c-header__buy,.c-sound){
 box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;min-height:44px;margin:0;
 padding:2px 16px 11px;border:0 solid transparent;border-radius:0;background:none;box-shadow:none;text-shadow:none;
 font:700 13px/1 var(--t-font-display);letter-spacing:.06em;text-decoration:none;white-space:nowrap;
 -webkit-text-stroke:0;filter:none;transform:none;transition:transform .12s ease-out,filter .12s linear}
html[data-skin] .c-header[data-quit-navigation]>.c-header__apply{order:0;min-width:195px;justify-content:flex-start;
 border-image:url(/runtime/quit/deck-art/key-green.webp) 22 24 34 fill/8px 9px 12px stretch;color:#03200f}
html[data-skin] .c-header[data-quit-navigation]>.c-header__apply::before{content:"";flex:none;width:15px;height:22px;
 background:url(/runtime/quit/deck-art/chair.webp) center/contain no-repeat}
html[data-skin] .c-header[data-quit-navigation]>.c-header__buy{order:3;min-width:156px;font-size:15px;
 border-image:url(/runtime/quit/deck-art/key-orange.webp) 22 24 34 fill/8px 9px 12px stretch;color:#1d0800}
html[data-skin] .c-header[data-quit-navigation]>.c-sound{order:2;min-width:147px;justify-content:flex-start;padding:6px 14px 8px 12px;font-size:12px;color:var(--t-green,#25dc71);
 border-image:url(/runtime/quit/deck-art/key-dark.webp) 40 46 50 fill/9px 10px 11px stretch}
html[data-skin] .c-header[data-quit-navigation]>.c-sound::before{content:"";flex:none;width:18px;height:16px;background:currentColor;
 -webkit-mask:var(--q-speaker-off) center/contain no-repeat;mask:var(--q-speaker-off) center/contain no-repeat}
html[data-skin] .c-header[data-quit-navigation]>.c-sound[aria-pressed="true"]::before{-webkit-mask-image:var(--q-speaker-on);mask-image:var(--q-speaker-on)}
/* The MENU plate is 8 by 3 (elevator-art/menu): its box keeps that shape, so it is never letterboxed. */
html[data-skin] .c-header[data-quit-navigation] .q-elevator-call{flex:0 0 117px;width:117px;min-width:117px;height:44px}
@media(hover:hover){
 html[data-skin] .c-header[data-quit-navigation]>:is(.c-header__apply,.c-header__buy,.c-sound):hover:not([aria-disabled="true"]){transform:translateY(-1px);filter:brightness(1.1)}
}
/* The press states carry the hover rule's :not() so they outrank it and come after it: a held key sits down, unlit. */
html[data-skin] .c-header[data-quit-navigation]>:is(.c-header__apply,.c-header__buy,.c-sound):active:not([aria-disabled="true"]){transform:translateY(2px);box-shadow:none;filter:none}
html[data-skin] .c-header[data-quit-navigation]>.c-header__apply:active:not([aria-disabled="true"]){border-image-source:url(/runtime/quit/deck-art/key-green-down.webp)}
html[data-skin] .c-header[data-quit-navigation]>.c-header__buy:active:not([aria-disabled="true"]){border-image-source:url(/runtime/quit/deck-art/key-orange-down.webp)}
html[data-skin] .c-header[data-quit-navigation]>:is(.c-header__apply,.c-header__buy,.c-sound):focus-visible{outline:3px solid var(--t-focus,#fff0ad);outline-offset:2px}
/* The flight's FX key (runtime/quit/frame-controls.js mounts it once the show runs, and hides it itself where the row has
   no room): one of the dark keys, seated by the wordmark, so the keys on the right do not move when it arrives. Its
   order and size come inline from that module, hence !important on the order. */
html[data-skin] .c-header[data-quit-navigation]:has(>.q-flight-fx) .c-header__brand{margin-right:0}
html[data-skin] .c-header[data-quit-navigation]>.q-flight-fx{order:0!important;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
 margin:0 auto 0 4px;padding:6px 14px 8px;border:0 solid transparent;border-radius:0;background:none;box-shadow:none;text-shadow:none;
 border-image:url(/runtime/quit/deck-art/key-dark.webp) 40 46 50 fill/9px 10px 11px stretch;color:var(--t-green,#25dc71);
 font:700 12px/1 var(--t-font-display);letter-spacing:.06em;transform:none}
html[data-skin] .c-header[data-quit-navigation]>.q-flight-fx[aria-pressed="false"]{color:#f4e7cb99}
html[data-skin] .c-header[data-quit-navigation]>.q-flight-fx:focus-visible{outline:3px solid var(--t-focus,#fff0ad);outline-offset:2px}
/* Below 900 px the row has no room for FX (the wordmark, APPLY, MENU, SOUND and BUY fill it; with FX the keys measured
   832 px against 768, and on phones BUY shrank to a 27 px sliver instead of passing the edge, so the module's own fit
   check never fired). There SOUND alone switches the sound. */
@media(max-width:899px){
 html[data-skin] .c-header[data-quit-navigation]>.q-flight-fx{display:none!important}
 html[data-skin] .c-header[data-quit-navigation]:has(>.q-flight-fx) .c-header__brand{margin-right:auto}
}
/* The wordmark is a link home: a 44 px tall target at every width. */
html[data-skin] .c-header[data-quit-navigation]>.c-header__brand{display:flex;align-items:center;min-height:44px}
/* Below 1100 px SOUND is a square speaker key, so the header's five keys fit a 768 px tablet. */
@media(max-width:1099px){
 html[data-skin] .c-header[data-quit-navigation]>.c-sound{flex:0 0 44px;width:44px;min-width:44px;justify-content:center;padding:0 0 4px;font-size:0;overflow:hidden}
 html[data-skin] .c-header[data-quit-navigation]>.c-sound::before{position:static;width:22px;height:19px;margin:0}
}
/* Phones: one row that always fits. APPLY TO QUIT moves into the deck (APPLY AT HR), SOUND is a square speaker key
   (its accessible name stays "Sound"), and the wordmark, MENU and BUY share what is left. */
@media(max-width:767px){
 html[data-skin] .c-header[data-quit-navigation]{gap:6px;padding-inline:10px}
 html[data-skin] .c-header[data-quit-navigation] .c-header__brand img{width:96px;height:auto;max-width:none}
 html[data-skin] .c-header[data-quit-navigation]>.c-header__apply{display:none}
 html[data-skin] .c-header[data-quit-navigation] .q-elevator-call{flex:0 0 96px;width:96px;min-width:96px;height:36px}
 html[data-skin] .c-header[data-quit-navigation]>.c-sound{flex:0 0 42px;width:42px;min-width:42px;height:42px;min-height:42px;padding:0 0 4px;overflow:hidden;font-size:0;
  border-image-width:8px 9px 10px}
 html[data-skin] .c-header[data-quit-navigation]>.c-sound::before{position:static;width:22px;height:19px;margin:0}
 html[data-skin] .c-header[data-quit-navigation]>.c-header__buy{flex:0 1 auto;min-width:118px;height:42px;min-height:42px;padding:2px 12px 11px;font-size:13px;letter-spacing:.03em}
}
@media(max-width:389px){
 html[data-skin] .c-header[data-quit-navigation]{gap:5px;padding-inline:8px}
 html[data-skin] .c-header[data-quit-navigation] .c-header__brand img{width:88px}
 html[data-skin] .c-header[data-quit-navigation] .q-elevator-call{flex-basis:80px;width:80px;min-width:80px;height:30px}
 html[data-skin] .c-header[data-quit-navigation]>.c-header__buy{min-width:105px;padding-inline:9px;font-size:12px}
}
@media(max-width:339px){
 html[data-skin] .c-header[data-quit-navigation]{gap:4px;padding-inline:6px}
 html[data-skin] .c-header[data-quit-navigation] .c-header__brand img{width:72px}
 html[data-skin] .c-header[data-quit-navigation] .q-elevator-call{flex-basis:72px;width:72px;min-width:72px;height:27px}
 html[data-skin] .c-header[data-quit-navigation]>.c-sound{flex-basis:38px;width:38px;min-width:38px}
 html[data-skin] .c-header[data-quit-navigation]>.c-header__buy{min-width:91px;padding-inline:7px;font-size:11px;letter-spacing:0}
}

/* ---------------------------------------------------------------- the lobby deck: three bays */
.q-ca{box-sizing:border-box;display:flex;align-items:stretch;gap:8px;height:var(--q-ca-room,84px);margin:0;
 padding:6px max(12px,calc((100% - 1440px) / 2 + 12px)) 7px;background:var(--t-black,#030805);border-bottom:3px solid var(--t-metal,#333a32);
 color:var(--t-ink,#f4e7cb);font:400 18px/1 var(--t-font-body);overflow:hidden}
/* Only under the site's fixed header (a page whose header sits in flow gets no gap). */
.c-header[data-quit-navigation]+.q-ca{margin-top:var(--t-header-desktop,70px)}
.q-ca[hidden]{display:none}
/* The deck takes the header's room, so the page's main does not add it again. The deck's module script sits between
   the two, hence the general sibling. */
.q-ca:not([hidden])~.frame-main{padding-top:0}
.q-ca p{margin:0}
.q-ca__bay{box-sizing:border-box;position:relative;display:grid;align-items:center;min-width:0;padding:9px 18px;
 border:0 solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/15px 17px stretch}
.q-ca__bay--hire{flex:1 1 0;grid-template:"tag apply" auto "hire apply" auto/minmax(0,1fr) auto;gap:5px 14px;align-content:center}
.q-ca__bay--ca{flex:0 1 auto;grid-template:"live label copy" auto "lcd lcd copy" auto/auto minmax(0,1fr) auto;gap:5px 12px;align-content:center}
.q-ca__bay--links{flex:0 0 auto;display:flex;gap:10px;padding-inline:16px}

/* the news crawl (BREAKING NEWS, owner order of 23 Oct 2026; the hiring line until then): a red LED tag over one line of
   orange dot-matrix text moving through a dark recess at every width, in the site's orange (the theme token; the
   owner's standing rule of 22 Oct: accents match the site's orange, never a separate gold). The line is written twice so
   the crawl never gaps. One pass takes 0.16 s a character (--q-ca-chars, from contract-bar.js): about 50 px a second,
   43 on phones, where the window is narrow. The tag's min-widths are its measured widths in Silkscreen (134 and 121 px),
   so the line keeps its length when the face arrives. */
.q-ca__tag{grid-area:tag;justify-self:start;padding:5px 10px 5px;border:0 solid transparent;
 border-image:url(/runtime/quit/deck-art/tag-red.webp) 20 22 24 fill/6px 7px 7px stretch;
 color:#fff4ea;font:700 11px/1 var(--t-font-display);letter-spacing:.08em;white-space:nowrap;text-shadow:0 1px 0 #5a0b0b}
.q-ca__hire{grid-area:hire;display:flex;align-items:center;align-self:stretch;min-width:0;height:24px;padding:0 10px;overflow:hidden;
 border-radius:3px;background:#050906;box-shadow:inset 0 2px 3px #000,inset 0 -1px 0 #ffffff14;
 color:var(--t-orange,#ff610b);font:400 17px/1 var(--t-font-body);letter-spacing:.03em;white-space:nowrap;text-shadow:0 0 6px #ff610b66}
.q-ca__hire-text{display:inline-block;flex:none;animation:q-ca-crawl calc(var(--q-ca-chars,72) * .16s) linear infinite}
.q-ca__item{margin-right:3em}
.q-ca__bay--hire{gap:4px 14px}
@keyframes q-ca-crawl{to{transform:translateX(-100%)}}

/* the deck's keys: APPLY AT HR (green), COPY (orange) */
.q-ca .q-ca__apply,.q-ca .q-ca__copy{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:42px;min-height:42px;
 margin:0;padding:2px 16px 11px;border:0 solid transparent;border-radius:0;background:none;box-shadow:none;text-shadow:none;
 font:700 12px/1 var(--t-font-display);letter-spacing:.06em;text-decoration:none;white-space:nowrap;-webkit-text-stroke:0;
 transform:none;transition:transform .12s ease-out,filter .12s linear}
.q-ca .q-ca__apply{grid-area:apply;border-image:url(/runtime/quit/deck-art/key-green.webp) 22 24 34 fill/8px 9px 12px stretch;color:#03200f}
.q-ca .q-ca__copy{grid-area:copy;align-self:end;min-width:100px;font-size:14px;
 border-image:url(/runtime/quit/deck-art/key-orange.webp) 22 24 34 fill/8px 9px 12px stretch;color:#1d0800}
.q-ca .q-ca__copy[data-state="copied"]{border-image-source:url(/runtime/quit/deck-art/key-green.webp);color:#03200f}
/* The keys are .c-btn, and the shared button's hover and press (components.css and arcade.css, up to (0,5,0)) add an ink
   drop shadow, 3px 7px on hover: under a plate it showed as a black slab over the bay's bezel. The deck's states outrank them. */
@media(hover:hover){
 html[data-skin] .q-ca .c-btn:is(.q-ca__apply,.q-ca__copy):hover{transform:translateY(-1px);filter:brightness(1.12)}
}
html[data-skin] .q-ca .c-btn:is(.q-ca__apply,.q-ca__copy):is(:hover,:active){box-shadow:none;animation:none}
html[data-skin] .q-ca .c-btn.q-ca__apply:active{border-image-source:url(/runtime/quit/deck-art/key-green-down.webp);transform:translateY(2px);filter:none}
html[data-skin] .q-ca .c-btn.q-ca__copy:active{border-image-source:url(/runtime/quit/deck-art/key-orange-down.webp);transform:translateY(2px);filter:none}

/* the readout: LIVE, the label, and the address on green phosphor glass */
.q-ca__live{grid-area:live;min-width:51px;display:inline-flex;align-items:center;gap:6px;color:var(--t-green,#25dc71);font:700 11px/1 var(--t-font-display);letter-spacing:.08em;white-space:nowrap}
.q-ca__live::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor;animation:q-ca-blink 1.2s steps(1,end) infinite}
@keyframes q-ca-blink{50%{opacity:.25}}
.q-ca__label{grid-area:label;padding-left:12px;border-left:2px solid #25dc7166;color:#f4e7cbcc;font:700 11px/1 var(--t-font-display);letter-spacing:.08em;white-space:nowrap}
.q-ca__lcd{grid-area:lcd;box-sizing:border-box;display:flex;align-items:center;min-width:0;height:36px;padding:2px 16px 0;cursor:copy;
 border:0 solid transparent;border-image:url(/runtime/quit/deck-art/lcd.webp) 44 56 fill/12px 14px stretch}
.q-ca__mint{display:block;min-width:0;color:#c8ffd9;font:400 22px/1 var(--t-font-body);letter-spacing:.01em;white-space:nowrap;
 text-shadow:0 0 8px #25dc7180;-webkit-user-select:text;user-select:text}
.q-ca__short{display:none;color:#c8ffd9;font:400 22px/1 var(--t-font-body);white-space:nowrap;text-shadow:0 0 8px #25dc7180}

/* the tabs: engraved gunmetal plates */
.q-ca__tab{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:1px 18px 0;
 border:0 solid transparent;border-image:url(/runtime/quit/deck-art/tab.webp) 40 60 fill/10px 15px stretch;
 color:var(--t-ink,#f4e7cb);font:400 21px/1 var(--t-font-body);letter-spacing:.06em;text-decoration:none;white-space:nowrap;
 text-shadow:0 1px 0 #000;transition:transform .12s ease-out,filter .12s linear,color .12s linear}
@media(hover:hover){
 .q-ca__tab:hover{transform:translateY(-1px);filter:brightness(1.12);color:#fff}
}
.q-ca__tab:active{transform:translateY(1px)}
.q-ca :focus-visible{outline:3px solid var(--t-focus,#fff0ad);outline-offset:2px}

/* ---------------------------------------------------------------- one panel, two rows (below 1240 px) */
/* The bays open up (display:contents) and their parts sit in one riveted panel: the readout, COPY and PUMP.FUN on the
   first row; the crawl, APPLY AT HR and TRADING BOT on the second. LIVE rides inside the readout, and the BREAKING NEWS
   tag rides in the crawl at the head of every item. Each tag adds about 17 characters' worth to a pass, so the crawl
   keeps the same speed. */
@media(max-width:1239px){
 .q-ca{display:grid;grid-template:"lcd copy pump" 40px "hire apply bot" 34px/minmax(0,1fr) auto auto;align-content:center;gap:6px 10px;
  padding:7px max(16px,calc((100% - 1440px) / 2 + 16px)) 8px;border:0 solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/14px 16px stretch}
 .q-ca__bay{display:contents}
 .q-ca__label,.q-ca__tag{display:none}
 .q-ca .q-ca__live{grid-area:lcd;align-self:center;justify-self:start;z-index:1;margin-left:20px;padding-right:10px;border-right:2px solid #25dc7166}
 .q-ca__lcd{height:40px;padding:2px 14px 0 94px}
 .q-ca__mint{font-size:clamp(17px,2.3vw,22px)}
 .q-ca .q-ca__copy{align-self:center;height:40px;min-height:40px}
 .q-ca__pump{grid-area:pump}
 .q-ca__bot{grid-area:bot}
 .q-ca__tab{min-width:118px;height:34px;font-size:19px}
 .q-ca__tab.q-ca__pump{height:40px}
 .q-ca__hire{height:34px;font-size:18px}
 .q-ca__hire-text{animation-duration:calc((var(--q-ca-chars,72) + var(--q-ca-items,1) * 17) * .16s)}
 .q-ca__item{margin-right:1.2em}
 .q-ca__item::before{content:"BREAKING NEWS";display:inline-block;box-sizing:border-box;min-width:134px;margin-right:.8em;padding:4px 8px 4px;border:0 solid transparent;
  border-image:url(/runtime/quit/deck-art/tag-red.webp) 20 22 24 fill/4px 5px 5px stretch;color:#fff4ea;font:700 10px/1 var(--t-font-display);
  letter-spacing:.06em;vertical-align:2px;text-shadow:0 1px 0 #5a0b0b}
 .q-ca .q-ca__apply{height:34px;min-height:34px;padding:1px 14px 9px;font-size:11px;border-image-width:7px 8px 10px}
}

/* ---------------------------------------------------------------- phones (below 768 px) */
/* The phone comp: the short address and COPY on the first row, COPY over TRADING BOT; PUMP.FUN goes (BUY $QUIT in the
   header opens the coin page). A tap on the readout copies too. */
@media(max-width:767px){
 .c-header[data-quit-navigation]+.q-ca{margin-top:var(--t-header-phone,62px)}
 .q-ca{grid-template:"lcd lcd copy" 42px "hire apply bot" 32px/minmax(0,1fr) auto auto;gap:6px 6px;padding:6px 10px 7px;border-image-width:12px 13px}
 .q-ca__pump{display:none}
 .q-ca .q-ca__live{font-size:10px;gap:5px;padding-right:9px}
 .q-ca__lcd{height:42px;padding:2px 10px 0 84px}
 .q-ca__mint{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .q-ca__short{display:block;font-size:clamp(17px,5.4vw,22px)}
 .q-ca .q-ca__copy{height:42px;min-height:42px;min-width:0;padding-inline:14px;font-size:13px}
 .q-ca__hire{height:32px;padding:0 6px;font-size:16px}
 .q-ca__item::before{min-width:121px;padding:4px 7px 3px;font-size:9px;margin-right:.7em;vertical-align:1px}
 .q-ca .q-ca__apply{min-width:111px;height:32px;min-height:32px;padding:1px 10px 9px;font-size:10px;letter-spacing:.03em}
 .q-ca__tab{min-width:0;height:32px;padding:1px 10px 0;font-size:16px;letter-spacing:.02em;border-image-width:8px 12px}
}
/* the narrowest phones */
@media(max-width:359px){
 .q-ca{column-gap:5px;padding-inline:8px}
 .q-ca .q-ca__live{margin-left:16px;padding-right:7px}
 .q-ca__lcd{padding-left:74px}
 .q-ca .q-ca__apply{min-width:95px;padding-inline:8px;font-size:9px;letter-spacing:0}
 .q-ca__tab{padding-inline:8px;font-size:15px}
}
/* The bot's jump links, the deck's TRADING BOT tab among them, show only while the bot is live: the bot lane sets
   html[data-bot-status] from /api/bot/health (live, paper, off, unknown), and absent counts as off, so a link never
   points at the floor while it is hidden; a mounted floor in preview (html[data-bot-floor="open"], ?bot=preview) counts
   as open. Without the tab the deck closes up: APPLY AT HR takes its place. */
html:not([data-bot-status="live"]):not([data-bot-floor="open"]) [data-bot-jump]{display:none}
@media(max-width:1239px){html:not([data-bot-status="live"]):not([data-bot-floor="open"]) .q-ca{grid-template-areas:"lcd copy pump" "hire hire apply"}}
@media(max-width:767px){html:not([data-bot-status="live"]):not([data-bot-floor="open"]) .q-ca{grid-template-areas:"lcd lcd copy" "hire hire apply"}}
/* One APPLY at every width (owner, 22 Oct 2026: two apply buttons in the top bar read as a mistake). Where the header has
   its APPLY TO QUIT key (768 px and up) the deck leaves out APPLY AT HR and the hiring line takes its room; on phones the
   deck's key stays the only one. Both go to /apply. */
@media(min-width:768px){
 .q-ca .q-ca__apply{display:none}
 .q-ca__bay--hire{grid-template:"tag" auto "hire" auto/minmax(0,1fr)}
}
@media(min-width:768px) and (max-width:1239px){
 html .q-ca{grid-template-areas:"lcd copy pump" "hire hire bot"}
 html:not([data-bot-status="live"]):not([data-bot-floor="open"]) .q-ca{grid-template-areas:"lcd copy pump" "hire hire hire"}
}
/* The deck's readouts are lettering fitted to its plates (the address on the LCD glass, the orange dot-matrix crawl, the
   engraved tabs): they stay in the pixel face VT323 (display.css) under the IBM Plex Mono body face, as the site's
   other counters and readouts do, and the widths above are measured in it. */
/* Until VT323 arrives they use its stand-in (display.css, a local monospace with VT323's metrics), so the address, the
   crawl and the tabs keep their final widths and nothing in the deck moves when the face loads. */
.q-ca :is(.q-ca__mint,.q-ca__short,.q-ca__hire,.q-ca__tab){font-family:VT323,"QUIT VT323 Fallback",var(--t-font-body)}
@media(prefers-reduced-motion:reduce){
 .q-ca__live::before{animation:none}
 .q-ca__hire-text{animation:none;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .q-ca__hire-text[aria-hidden]{display:none}
}
/* Game pages on phones (a full-screen cabinet, .q-cabinet-full, in main): the deck keeps only its readout and COPY on
   one row, so the game keeps the screen and the contract address stays in the first fold. Last in the file, so it wins
   over the layouts above. */
@media(max-width:767px){
 :root:has(body>.q-ca:not([hidden])):has(.q-cabinet-full){--q-ca-room:56px}
 body:has(.q-cabinet-full)>.q-ca{grid-template:"lcd copy" 42px/minmax(0,1fr) auto;padding-block:4px 7px}
 body:has(.q-cabinet-full)>.q-ca :is(.q-ca__tag,.q-ca__hire,.q-ca__apply,.q-ca__bot){display:none}
}