@font-face{font-family:"Account Mono";src:url(/theme/fonts/body-1.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Account Mono";src:url(/theme/fonts/body-5.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* While Plex Mono is on its way the account's sentences stand in a local monospace at Plex Mono's own width (.6em, as
   Menlo, DejaVu Sans Mono, Noto Sans Mono and the others are), so they do not re-wrap when it arrives: the body face's
   own fallback (theme/fonts/body.css) is set to its 72% size, and the panel's lines grew by a third on the swap. */
@font-face{font-family:"Account Mono Fallback";src:local("Menlo Regular"),local("Menlo-Regular"),local("DejaVu Sans Mono"),local("DejaVuSansMono"),local("Liberation Mono"),local("LiberationMono"),local("Cousine"),local("Noto Sans Mono"),local("NotoSansMono-Regular"),local("Droid Sans Mono"),local("DroidSansMono"),local("Courier New"),local("CourierNewPSMT");font-weight:400}
.qa,.qa-header{--qa-green:#00ee83;--qa-orange:#ff6500;--qa-ink:#f5eed5;--qa-display:var(--t-font-display,"QUIT Display",monospace);--qa-pixel:var(--t-font-pixel,"QUIT Pixel",monospace);color:var(--qa-ink);font:18px/1.4 "Account Mono","Account Mono Fallback",var(--t-font-body,monospace);box-sizing:border-box}
.qa *,.qa-header *{box-sizing:border-box}
.qa [hidden],.qa-header[hidden]{display:none!important}
.qa :where(h2,p,fieldset,legend){margin:0;padding:0}
.qa :focus-visible,.qa-header :focus-visible{outline:3px solid #fff0ad;outline-offset:3px}
.qa-key{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 18px 15px;border:0 solid transparent;border-radius:0;border-image:url(/runtime/quit/deck-art/key-dark.webp) 40 46 50 fill/10px 12px 13px stretch;background:none;color:var(--qa-green);font:700 17px/1.2 var(--qa-display);text-decoration:none;text-align:center;cursor:pointer;touch-action:manipulation}
.qa-key:disabled{opacity:.6;cursor:wait}
.qa-key:active:not(:disabled){transform:translateY(2px)}
.qa-orange{border-image:url(/runtime/quit/deck-art/key-orange.webp) 22 24 34 fill/10px 12px 13px stretch;color:#100a00}
.qa-header{order:2;flex:none;display:inline-flex}
.qa-header>.qa-key{min-width:114px;height:44px;min-height:44px;padding:5px 16px 9px;font-size:13px}
.qa-face{display:inline-flex;flex:none;align-items:center;justify-content:center;overflow:hidden;width:34px;height:34px;border-radius:50%;background:#101b18}
.qa-face img{width:100%;height:100%;object-fit:cover;image-rendering:auto}
.qa::backdrop{background:#0009}
.qa{background:#001008;border:solid transparent;border-width:20px 22px;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/20px 22px stretch;background-clip:padding-box;max-height:calc(100dvh - 24px);overscroll-behavior:contain;overflow:auto;color:var(--qa-ink)}
.qa-panel{width:min(760px,calc(100vw - 24px));padding:24px 24px 22px;margin:auto}
.qa h2{font:700 clamp(30px,3.6vw,52px)/1.12 var(--qa-pixel);color:var(--qa-orange);text-shadow:3px 4px #000;margin:0 110px 18px 0}
.qa-close{position:absolute;right:24px;top:20px;min-height:40px;font-size:13px}
.qa .qa-funnel{font-size:21px;margin-bottom:9px;color:#f7f5e8}
/* Why another key opened the panel (POST YOUR CARD, post-gate.js), in the panel's status amber under the title. */
.qa .qa-reason{margin:-4px 0 16px;padding:9px 12px 10px;border-left:4px solid var(--qa-orange);background:#140b00;color:#ffcf4b;font:700 17px/1.35 var(--qa-display)}
.qa .qa-intro{font-size:18px;margin-bottom:20px}
.qa-methods{display:flex;gap:7px;margin-bottom:12px}
.qa-methods button{flex:1;min-height:54px;border:solid transparent;border-width:5px;border-image:url(/runtime/quit/deck-art/key-dark.webp) 40 46 50 fill/5px stretch;background:#000d07;color:#9ca79e;font:700 23px/1.2 var(--qa-display);cursor:pointer}
.qa-methods [aria-selected="true"]{border-image:none;border-color:var(--qa-green);color:var(--qa-green);box-shadow:inset 0 0 20px #00ff8020}
.qa input{width:100%;min-width:0;border:solid transparent;border-width:6px;border-image:url(/runtime/quit/deck-art/key-dark.webp) 40 46 50 fill/6px stretch;background:#000d07;background-clip:padding-box;color:var(--qa-ink);border-radius:0;padding:10px 14px;font:20px/1.4 "Account Mono","Account Mono Fallback",var(--t-font-body,monospace)}
.qa-send,.qa-continue{width:100%;min-height:68px;font-size:28px;margin-top:14px}
.qa fieldset{min-width:0;border:0}
.qa legend{font:700 14px var(--qa-display);margin:16px 0 8px}
.qa-digits{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.qa-digits input{height:54px;text-align:center;padding:0;font:700 25px var(--qa-display)}
.qa .qa-wallet-note{margin-top:12px;font-size:16px}
.qa-status{color:#ffcf4b;font-size:16px;padding-top:10px}
.qa-status:empty{display:none}
.qa-or{display:flex;align-items:center;gap:16px;margin:20px 0 14px;font:700 14px var(--qa-display);color:#9ca79e}
.qa-or::before,.qa-or::after{content:"";flex:1;border-top:2px solid #394a3c}
.qa .qa-wallet-heading{text-align:center;font:700 13px var(--qa-display);margin-bottom:12px}
.qa-wallet-keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.qa-wallet-keys .qa-key{font-size:14px;padding-inline:12px}
.qa-wallet-mark{object-fit:contain;flex:none;width:26px;height:26px}
.qa .qa-footnote{font-size:16px;margin-top:16px}
.qa-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* The account menu (the owner's yes, 30 Oct 2026, comps menu-desktop-v2 and menu-phone-v1; account-menu.js draws it): a
   dropdown under the key on a computer, a sheet from the bottom on a phone. Recessed screens in the bay's green, the
   holding in the pixel face, one orange key, the office's rows with a plain line each, SIGN OUT apart under a rule. */
.qa-menu{position:fixed;inset:78px 12px auto auto;width:372px;margin:0;padding:12px 12px 10px;max-height:calc(100dvh - 90px)}
.qa-menu::backdrop{background:#0003}
.qa-menu-top{display:none}
.qa-profile{display:flex;align-items:center;gap:14px;padding:2px 0 14px;overflow-wrap:anywhere}
.qa-profile .qa-face{width:64px;height:64px;border-radius:3px;border:2px solid #2f6b45;background:#06140d}
.qa-who{display:grid;gap:8px;justify-items:start;min-width:0}
.qa-profile strong,.qa-contact{font:400 17px/1.25 "Account Mono","Account Mono Fallback",var(--t-font-body,monospace);color:var(--qa-ink)}
.qa-rank{display:inline-flex;padding:5px 9px 4px;border:2px solid var(--qa-green);color:var(--qa-green);font:700 13px/1 var(--qa-display);letter-spacing:.04em}
.qa-rank[data-ranked="false"]{border-color:#ffb020;color:#ffb020}
.qa-hold{padding:10px 12px 11px;border:2px solid #24452f;background:#000c06 repeating-linear-gradient(0deg,#00ee8307 0 1px,transparent 1px 3px)}
.qa .qa-hold-label{font:700 13px/1.2 var(--qa-display);color:var(--qa-green);letter-spacing:.04em}
.qa .qa-hold-amount{margin-top:4px;font:700 34px/1.05 var(--qa-pixel);color:var(--qa-orange);text-shadow:2px 3px #000;overflow-wrap:anywhere}
.qa .qa-hold-usd,.qa .qa-hold-unknown{margin-top:5px;font-size:17px;color:var(--qa-ink)}
.qa-ladder{margin-top:12px}
.qa .qa-ladder-ends{display:flex;justify-content:space-between;gap:10px;font:700 12px/1.2 var(--qa-display);color:var(--qa-green);letter-spacing:.04em}
/* Sixteen cells, filled from the left as far as the holding has come from its rank to the next. */
.qa-bar{position:relative;height:16px;margin-top:6px;border:2px solid #2f6b45;background:#0c2a19;overflow:hidden}
.qa-bar i{position:absolute;inset:0 auto 0 0;background:var(--qa-green)}
.qa-bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(6.25% - 2px),#000c06 calc(6.25% - 2px) 6.25%)}
.qa .qa-to-next{margin-top:7px;font:700 14px/1.3 "Account Mono","Account Mono Fallback",var(--t-font-body,monospace);color:#ffb020}
.qa .qa-ladder-line{margin-top:4px;font-size:13px;line-height:1.35;color:var(--qa-ink)}
.qa-menu .qa-buy{display:flex;width:100%;margin-top:14px;min-height:54px;font-size:20px}
.qa-menu nav{display:grid;gap:8px;margin-top:12px}
.qa-row{display:grid;gap:3px;padding:9px 14px 12px;border:solid transparent;border-width:6px;border-image:url(/runtime/quit/deck-art/key-dark.webp) 40 46 50 fill/6px stretch;color:var(--qa-green);text-decoration:none;touch-action:manipulation}
.qa-row b{font:700 17px/1.15 var(--qa-display);letter-spacing:.02em}
.qa-row small{font-size:14px;line-height:1.3;color:var(--qa-ink)}
@media(hover:hover){.qa-row:hover{filter:brightness(1.15)}}
.qa-row:active{transform:translateY(2px)}
.qa-program{margin-top:12px;padding:10px 12px 11px;border:2px solid #24452f;background:#000c06}
.qa .qa-program-name{font:700 14px/1.2 var(--qa-display);color:var(--qa-orange);letter-spacing:.03em}
.qa .qa-link-label{margin-top:6px;font:700 12px/1.2 var(--qa-display);color:var(--qa-green)}
.qa-link{display:flex;gap:8px;align-items:stretch;margin-top:5px}
.qa-link code{flex:1;min-width:0;padding:8px 9px;border:2px solid #2f6b45;color:var(--qa-green);font:14px/1.3 "Account Mono","Account Mono Fallback",monospace;overflow-wrap:anywhere}
.qa-menu .qa-copy{min-height:44px;padding:6px 14px 9px;font-size:14px}
.qa .qa-link-line{margin-top:7px;font-size:13px;line-height:1.35;color:var(--qa-ink)}
.qa-lang{display:flex;align-items:center;gap:8px;margin-top:14px}
.qa-lang span{flex:1;font:700 13px/1 var(--qa-display);color:var(--qa-green)}
.qa-lang button{min-width:64px;min-height:44px;border:2px solid #2f6b45;background:#000c06;color:#9ca79e;font:700 16px var(--qa-display);cursor:pointer}
.qa-lang button[aria-pressed="true"]{background:var(--qa-green);border-color:var(--qa-green);color:#03140b}
.qa-menu-rule{margin:14px 0 10px;border:0;border-top:2px solid #24452f}
.qa-menu .qa-signout{width:100%;min-height:44px;font-size:14px}
.qa-menu .qa-status{font-size:15px}
/* While the site's answer is on its way the key keeps its room in the header unseen (boot.js html[data-acct-slot]), so the
   language key beside it and the header's other keys never move when it shows. */
html[data-acct-slot="open"] .qa-header>[data-acct-key][hidden]{display:inline-flex!important;visibility:hidden}
@media(max-width:1000px) and (min-width:601px){.qa-header>.qa-key{min-width:90px;font-size:11px;padding-inline:9px}.qa-header .qa-face{width:24px;height:24px}}
/* 768 to 999 px: APPLY TO QUIT joins the row at 768 and the key no longer fits beside BUY $QUIT (it pushed BUY past the
   right edge, signed in up to about 920 px), so the key takes a second row under BUY, as on phones, and the header and what
   sits under it move down together. */
@media(min-width:768px) and (max-width:999px){
 html[data-skin] .c-header[data-quit-navigation]:has(.qa-header:not([hidden])){--c-header-height:120px;height:120px;align-items:flex-start;padding-top:10px}
 .c-header:has(.qa-header:not([hidden]))+.q-ca{margin-top:120px}
 .c-header:has(.qa-header:not([hidden]))~.frame-main{--c-header-height:120px;--t-header-desktop:120px}
 .c-header .qa-header{position:absolute;top:66px;right:20px}
 .c-header .qa-header>.qa-key{min-width:114px;font-size:12px}
 .c-header .qa-header .qa-face{width:28px;height:28px}
}
@media(max-width:600px){
 html[data-skin] .c-header[data-quit-navigation]:has(.qa-header:not([hidden])){height:108px;align-items:flex-start;padding-top:10px}
 .c-header:has(.qa-header:not([hidden]))+.q-ca{margin-top:108px}
 .c-header:has(.qa-header:not([hidden]))~.frame-main{--c-header-height:108px;--t-header-phone:108px}
 .qa-header{position:absolute;top:58px;right:8px}
 .qa-header>.qa-key{min-width:114px;font-size:12px}
 .qa-header .qa-face{width:28px;height:28px}
 /* max-width:none: a modal dialog's own cap (100% less 2em and 6 px) held the SIGN IN panel to 278 px on a 320 px phone,
    squeezing the three wallet keys (mobile lane, as lane polish did for the sheet below). */
 .qa-panel{width:calc(100vw - 12px);max-width:none;max-height:calc(100dvh - 12px);border-width:13px;border-image-width:13px;padding:16px 12px}
 .qa h2{font-size:29px;margin-right:74px;margin-bottom:16px}
 .qa-close{right:12px;top:12px;min-height:38px;font-size:12px;padding-inline:12px}
 .qa .qa-funnel{font-size:17px}.qa .qa-intro{font-size:16px;margin-bottom:16px}.qa .qa-reason{font-size:15px;margin-bottom:12px}
 .qa-methods button{min-height:47px;font-size:18px}.qa input{font-size:16px}
 .qa-send,.qa-continue{min-height:58px;font-size:23px;margin-top:12px}
 .qa-digits{gap:4px}.qa-digits input{height:44px;font-size:19px}
 .qa-wallet-note,.qa-footnote,.qa-status{font-size:16px}.qa-or{margin:16px 0 12px}
 .qa .qa-wallet-heading{font-size:12px}.qa-wallet-keys{gap:5px}.qa-wallet-keys .qa-key{flex-direction:column;gap:5px;font-size:11px;padding:10px 5px 13px;min-height:64px}.qa-wallet-mark{width:23px;height:23px}
 /* max-width:none: a modal dialog's own cap (100% less 2em and 6 px) held the sheet to 352 px on a 390 px phone, short of
    its right edge. */
 .qa-menu{inset:auto 6px 6px;width:calc(100vw - 12px);max-width:none;max-height:calc(100dvh - 12px);border-width:14px;border-image-width:14px;padding:4px 12px 12px}
 .qa-menu-top{display:flex;align-items:center;justify-content:center;position:relative;min-height:46px;margin-bottom:4px}
 .qa-grab{width:56px;height:5px;border-radius:3px;background:#3d4a40}
 .qa-menu-close{position:absolute;right:0;top:0;display:flex;min-height:44px;font-size:12px}
 .qa-profile .qa-face{width:56px;height:56px}
 .qa-hold{text-align:center}.qa .qa-hold-amount{font-size:40px}
 .qa-menu .qa-buy{min-height:60px;font-size:24px}
 .qa-row{min-height:58px}.qa-lang button{flex:1}.qa-menu .qa-signout{min-height:54px}
}
/* Signed out, the key is the header's lit orange key (BUY's art) with the account mark left of the word (the owner, 25 Oct
   2026: SIGN IN was hard to see among the header's dark keys). The mark is a 12 by 12 pixel figure on the sound key's grid,
   painted in the label's colour; it is decoration only, so the key's name stays SIGN IN. */
.qa-header,.qa-menu{--qa-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h4v1H4zM3 1h6v3H3zM4 4h4v1H4zM3 6h6v1H3zM2 7h8v1H2zM1 8h10v4H1z'/%3E%3C/svg%3E")}
.qa-header>.qa-key[data-acct-state="out"]{min-width:132px;gap:8px;font-size:15px;color:#100a00;border-image:url(/runtime/quit/deck-art/key-orange.webp) 22 24 34 fill/10px 12px 13px stretch}
.qa-header>.qa-key[data-acct-state="out"]::before{content:"";flex:none;width:14px;height:14px;margin-top:-2px;background:currentColor;-webkit-mask:var(--qa-mark) center/contain no-repeat;mask:var(--qa-mark) center/contain no-repeat}
.qa-header>.qa-key[data-acct-state="out"]:active:not(:disabled){border-image-source:url(/runtime/quit/deck-art/key-orange-down.webp)}
@media(hover:hover){.qa-header>.qa-key[data-acct-state="out"]:hover:not(:disabled){filter:brightness(1.1)}}
@media(max-width:1000px) and (min-width:601px){.qa-header>.qa-key[data-acct-state="out"]{min-width:120px;font-size:13px}.qa-header>.qa-key[data-acct-state="out"]::before{width:12px;height:12px}}
@media(min-width:768px) and (max-width:999px){.c-header .qa-header>.qa-key[data-acct-state="out"]{min-width:156px;font-size:14px}.c-header .qa-header>.qa-key[data-acct-state="out"]::before{width:13px;height:13px}}
@media(max-width:600px){.qa-header>.qa-key[data-acct-state="out"]{min-width:150px;font-size:14px}.qa-header>.qa-key[data-acct-state="out"]::before{width:13px;height:13px}}
/* Signed in with no picture for the account yet, or one that did not load (account.js accountFace): the face shows the
   same mark in the key's green, never an empty dark disc. The office masthead keeps its own mark and its empty ring
   (office-chrome.css). Whole multiples of the mark's 12 pixel grid, so its pixels stay square. */
.qa-header .qa-face:empty::before,.qa-menu .qa-face:empty::before{content:"";flex:none;width:24px;height:24px;background:var(--qa-green);-webkit-mask:var(--qa-mark) center/contain no-repeat;mask:var(--qa-mark) center/contain no-repeat}
.qa-menu .qa-face:empty::before{width:48px;height:48px}
@media(max-width:1000px){.qa-header .qa-face:empty::before{width:12px;height:12px}}
.qa-wallet-help{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;font-size:16px;color:#ffcf4b}
.qa-wallet-help .qa-key{min-height:44px;font-size:13px}
/* Google and X (the owner, 26 Oct 2026). Google's key keeps Google's dark button as published: #131314, a 1 px #8E918F
   line, its own G on a white tile, the label in #E3E3E3. X's key is black with X's white mark. One height with the wallet keys. */
.qa-social-keys{display:grid;gap:9px;margin:0 0 16px}
.qa-google{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:0 12px 0 56px;border:1px solid #8e918f;border-radius:4px;background:#131314;color:#e3e3e3;font:500 16px/1.2 Roboto,"Google Sans",Arial,sans-serif;letter-spacing:.25px;cursor:pointer;touch-action:manipulation}
.qa-google-g{position:absolute;left:4px;top:4px;bottom:4px;width:40px;display:grid;place-items:center;border-radius:3px;background:#fff}
.qa-google-g img{width:20px;height:20px}
.qa-google:disabled{opacity:.6;cursor:wait}
.qa-google:hover:not(:disabled){background:#1f1f20}
.qa-x{width:100%;min-height:48px;border-image:none;border:2px solid #3b3b3b;background:#000;color:#fff}
.qa-x img{width:22px;height:20px;object-fit:contain}
@media(prefers-reduced-motion:reduce){.qa *,.qa-header *{transition:none!important;scroll-behavior:auto!important}}
