/* ═══ Quartz product page ════════════════════════════════════════════════════════════════════
   The site kit draws everything shared (nav, type, buttons, rows, chips, the ember edge, footer).
   This file adds the page's own signature: Quartz's window, rebuilt in HTML from the app's CSS
   (~/browser/tokens.css, chrome.css, workspaces.css, shield.css, newtab.css, reader-page.css,
   terminal.js; read only), and a small accent in Quartz's logo colour. Fire stays the main accent.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── page tokens: the Quartz accent (its logo) ── */
:root{
  --qz-logo:var(--p-quartz);       /* #5f9bb8, the logo's crystal tail (kit token) */
  --qz-logo-hi:#8cbdd4;            /* the tail's lit face (assets/quartz/quartz-logo.svg, _facts.md:41): 9.4:1 on --ground */
}

/* ── Quartz's own palette, copied from ~/browser/tokens.css (dark) and chrome.css ──────────
   Scoped to .qz so it never leaks into the page. On the bars Quartz lifts its two quiet greys
   one step (chrome.css "On the bars"), which is what the strip and the toolbar use here. */
.qz{
  --qz-bg:#141516;
  --qz-s0:rgba(14,15,16,.50); --qz-s1:rgba(22,23,24,.66); --qz-s2:rgba(40,41,43,.62); --qz-s3:rgba(62,63,66,.62);
  --qz-press:rgba(84,85,89,.66); --qz-solid:#1f2021; --qz-overlay:rgba(29,30,31,.93);
  --qz-hair:rgba(255,255,255,.09); --qz-hair-2:rgba(255,255,255,.16); --qz-edge:rgba(255,255,255,.07);
  --qz-text:#ececea; --qz-text-2:#c0c1be; --qz-text-3:#a9aaa7; --qz-dim:#75767a;
  --qz-ion:#9fb4cc; --qz-ion-soft:rgba(159,180,204,.14); --qz-on-ion:#11161c;
  --qz-ok:#8fbf9b; --qz-warn:#d6b874; --qz-warn-soft:rgba(214,184,116,.14);
  --qz-code:rgba(10,11,12,.46);
  --qz-sh1:0 1px 2px rgba(0,0,0,.28),0 2px 8px rgba(0,0,0,.16);
  --qz-sh2:0 2px 6px rgba(0,0,0,.30),0 12px 32px rgba(0,0,0,.32);
  --qz-ws-ember:hsl(345 31% 71%); --qz-ws-forest:hsl(150 31% 71%); --qz-ws-ocean:hsl(188 31% 68%); --qz-ws-midnight:hsl(255 31% 76%);
  --qz-font:var(--f-win);
  --qz-mono:"Cascadia Mono","Cascadia Code",Consolas,var(--f-mono);
  --qz-ease:cubic-bezier(.2,0,0,1); --qz-dur:120ms;
  /* a web page's own colours inside the guest view (a GitHub-style dark page) */
  --pg-bg:#0d1117; --pg-text:#e6edf3; --pg-muted:#9198a1; --pg-line:#30363d; --pg-link:#4493f8; --pg-ok:#3fb950;
}
/* Quartz's light look (tokens.css html[data-theme="light"]), used by the Reader demo's theme switch */
.qz[data-theme="light"]{
  --qz-bg:#e9e9e7;
  --qz-s0:rgba(255,255,255,.56); --qz-s1:rgba(255,255,255,.76); --qz-s2:rgba(255,255,255,.70); --qz-s3:rgba(233,235,240,.86);
  --qz-solid:#fbfbfc; --qz-overlay:rgba(255,255,255,.95);
  --qz-hair:rgba(11,14,26,.10); --qz-hair-2:rgba(11,14,26,.18); --qz-edge:rgba(255,255,255,.62);
  --qz-text:#0b0e1a; --qz-text-2:#333a4e; --qz-text-3:#5b6478; --qz-dim:#5b6478;
  --qz-ion:#4d6784; --qz-on-ion:#ffffff; --qz-code:rgba(0,0,0,.045);
  --qz-sh1:0 1px 1px rgba(14,18,38,.05),0 2px 8px rgba(14,18,38,.06);
}

/* ═══ the window ═════════════════════════════════════════════════════════════════════════ */
.qw{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:9px;
  background:var(--qz-bg);color:var(--qz-text);font:400 13px/1.4 var(--qz-font);font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;text-align:left;
  box-shadow:0 0 0 1px rgb(var(--white-rgb) / .1),0 2px 4px rgb(var(--shade-rgb) / .3),0 34px 80px -30px rgb(var(--shade-rgb) / .85);
  container:qw / inline-size}
.qw svg{width:16px;height:16px;flex:none}
.qw button{font:inherit;color:inherit;margin:0;border:0;background:none;padding:0;text-align:inherit}
.qw :focus-visible{outline:2px solid var(--qz-ion);outline-offset:1px}

/* the title bar: workspace pill, the tab strip, new tab, the caption buttons */
.qw-title{position:relative;flex:none;display:flex;align-items:center;gap:4px;height:40px;padding-left:8px;
  border-bottom:1px solid var(--qz-hair);background:var(--qz-s0)}
.qw-pill{display:inline-flex;align-items:center;gap:7px;flex:none;height:28px;padding:0 8px 0 9px;border:1px solid transparent;border-radius:999px;
  color:var(--qz-text-2);font-size:12px;white-space:nowrap}
.qw-pill.is-open{background:var(--qz-s3);border-color:var(--qz-hair);color:var(--qz-text)}
.qw-pill__c{width:10px!important;height:10px!important;color:var(--qz-text-3)}
.ws-dot{flex:none;display:inline-block;width:10px;height:10px;border-radius:999px;background:var(--ws-mark,var(--qz-dim));box-shadow:inset 0 0 0 1px var(--qz-hair);
  transition:background-color var(--qz-dur) var(--qz-ease)}
.ws-dot[data-c="ember"]{--ws-mark:var(--qz-ws-ember)}.ws-dot[data-c="forest"]{--ws-mark:var(--qz-ws-forest)}
.ws-dot[data-c="ocean"]{--ws-mark:var(--qz-ws-ocean)}.ws-dot[data-c="midnight"]{--ws-mark:var(--qz-ws-midnight)}

.qw-strip{display:flex;align-items:center;gap:4px;flex:0 1 auto;min-width:0;height:100%;overflow:hidden}
.qw-tab{position:relative;display:flex;align-items:center;gap:6px;flex:0 1 auto;height:30px;min-width:104px;max-width:220px;padding:0 8px 0 12px;
  border:1px solid transparent;border-radius:10px;background:transparent;color:var(--qz-text-2);font-size:12px;line-height:1;white-space:nowrap;cursor:pointer;
  transition:background-color var(--qz-dur) var(--qz-ease),color var(--qz-dur) var(--qz-ease),border-color var(--qz-dur) var(--qz-ease)}
.qw-tab:hover{background:var(--qz-s0);color:var(--qz-text)}
.qw-tab.is-active{background:var(--qz-s1);border-color:var(--qz-hair);color:var(--qz-text);box-shadow:inset 0 1px 0 var(--qz-edge),var(--qz-sh1)}
.qw-tab.is-active:focus-visible{outline-offset:-1px}
.qw-tab::after{content:"";position:absolute;left:50%;bottom:2px;width:14px;height:2px;margin-left:-7px;border-radius:2px;background:var(--qz-ion);opacity:0;
  transition:opacity var(--qz-dur) var(--qz-ease);pointer-events:none}
.qw-tab.is-active::after{opacity:1}
.qw-tab.is-split:not(.is-active){background:var(--qz-s0);color:var(--qz-text)}   /* the other half of a split: in view, not focused */
.qw-tab__t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.qw-tab__s{width:12px!important;height:12px!important;color:var(--qz-text-3)}
.qw-mono{flex:none;display:grid;place-items:center;width:16px;height:16px;margin-right:2px;border-radius:4px;background:var(--qz-s3);box-shadow:inset 0 0 0 1px var(--qz-hair);
  color:var(--qz-text-2);font:600 9px/1 var(--qz-font)}
.qw-glyph{width:14px!important;height:14px!important;margin:0 2px 0 1px;color:var(--qz-text-2)}
/* a Claude tab and a terminal carry a liveness dot instead of a favicon */
.qw-dot{flex:none;width:7px;height:7px;margin:0 6px 0 3px;border-radius:50%;background:#6d6f72;transition:background-color var(--qz-dur) var(--qz-ease)}
.qw-dot.is-live{background:var(--qz-ion)}
/* "Claude needs you": a pane that went quiet while you were elsewhere */
.qw-tab.needs-you .qw-dot{background:var(--qz-warn)}
.qw-tab.needs-you{background:var(--qz-warn-soft);color:var(--qz-warn)}
/* a workspace's 2px colour bar under each of its chips */
.qw-tab[data-c]::before{content:"";position:absolute;left:6px;right:6px;bottom:0;height:2px;border-radius:2px;background:var(--ws-c);opacity:.45;pointer-events:none}
.qw-tab[data-c].is-active::before{opacity:.9}.qw-tab[data-c]::after{bottom:4px}
.qw-tab[data-c="ember"]{--ws-c:var(--qz-ws-ember)}.qw-tab[data-c="forest"]{--ws-c:var(--qz-ws-forest)}
.qw-tab[data-c="ocean"]{--ws-c:var(--qz-ws-ocean)}.qw-tab[data-c="midnight"]{--ws-c:var(--qz-ws-midnight)}
.qw-new{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:6px;color:var(--qz-text-2)}
.qw-sp{flex:1 1 auto}
.qw-caps{display:flex;align-self:stretch;margin-left:8px;flex:none}
.qw-caps span{display:grid;place-items:center;width:46px;color:var(--qz-text-2)}
.qw-caps svg{width:12px!important;height:12px!important}

/* the toolbar: back, forward, reload, the omnibox, the icon buttons */
.qw-nav{flex:none;display:flex;align-items:center;gap:6px;height:44px;padding:0 10px;border-bottom:1px solid var(--qz-hair)}
.qw-ib{position:relative;display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:6px;color:var(--qz-text-2)}
.qw-ib--off{color:var(--qz-text-3);opacity:.7}
.qw-ib.is-open{background:var(--qz-s3);color:var(--qz-text)}
.qw-count{position:absolute;right:-2px;bottom:-2px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:13px;padding:0 3px;border:1px solid transparent;border-radius:999px;background:var(--qz-ion);color:var(--qz-on-ion);   /* shield.css #shield .shield-count */
  font:600 10px/1 var(--qz-font);font-variant-numeric:tabular-nums;pointer-events:none}
.qw-count[hidden]{display:none}
.qw-omni{flex:1 1 auto;display:flex;align-items:center;gap:8px;min-width:0;max-width:760px;height:34px;margin:0 auto;padding:0 14px;
  border:1px solid var(--qz-hair);border-radius:10px;background:var(--qz-code);color:var(--qz-text);font-size:13px}
.qw-omni__lock{width:13px!important;height:13px!important;color:var(--qz-text-3)}
.qw-omni__t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qw-omni__t.is-ph{color:var(--qz-text-3)}

/* the views: a tab's content; split puts two side by side */
.qw-views{position:relative;flex:1 1 auto;min-height:0;display:flex;gap:6px;padding:6px}
.qw-views:focus-visible{outline-offset:-3px}
.qw-v{display:none;flex:1 1 0;min-width:0;min-height:0;overflow:hidden;border-radius:10px}
.qw-views[data-show="split"] .qw-v--web,.qw-views[data-show="split"] .qw-v--term{display:block}
.qw-views[data-show="split"] .qw-v--web{flex-grow:1.06}
.qw-views[data-show="claude"] [data-v="claude"],.qw-views[data-show="app"] [data-v="app"],.qw-views[data-show="term"] [data-v="term"],
.qw-views[data-show="web"] [data-v="web"],.qw-views[data-show="files"] [data-v="files"],.qw-views[data-show="phone"] [data-v="phone"]{display:block}
/* the focused half of a split wears a thin accent line along its top (Quartz's .split-focus) */
.qw-views[data-show="split"] .qw-v{position:relative}
.qw-views[data-show="split"] .qw-v::after{content:"";position:absolute;left:12px;right:12px;top:0;height:2px;border-radius:0 0 2px 2px;background:var(--qz-ion);opacity:0;transition:opacity var(--qz-dur) var(--qz-ease)}
.qw-views[data-show="split"][data-focus="web"] .qw-v--web::after,.qw-views[data-show="split"][data-focus="term"] .qw-v--term::after{opacity:.9}

/* ── the panes ── */
/* a terminal / Claude chamber: --surface-1, a hairline, the large radius (chrome.css .claude-view) */
.qp-term,.qp-claude{height:100%;margin:0;padding:12px 14px;overflow:hidden;border:1px solid var(--qz-hair);border-radius:14px;background:var(--qz-s1);
  box-shadow:inset 0 1px 0 var(--qz-edge);font:400 12.5px/1.3 var(--qz-mono);color:var(--qz-text);white-space:pre-wrap;overflow-wrap:anywhere}   /* a terminal wraps long lines */
.qp-ps{color:var(--qz-text)}
.qp-hash{color:var(--qz-warn)}          /* terminal.js yellow #d6b874: git's auto colour for %h */
.qp-cur{display:inline-block;width:.6em;height:1.12em;vertical-align:-.2em;background:var(--qz-ion);animation:qz-blink 1.06s steps(1) infinite}
.qp-cur--i{width:1.5px;margin-left:1px;background:var(--qz-text)}
@keyframes qz-blink{50%{opacity:0}}
.qp-claude{white-space:normal;display:flex;flex-direction:column;gap:10px}
.qp-claude p{margin:0}
.qp-claude__cwd{color:var(--qz-text-3)}
.qp-claude__u{color:var(--qz-text-2)}
.qp-claude__a{display:flex;gap:9px;max-width:58ch;color:var(--qz-text);line-height:1.45}
.qp-claude__b{flex:none;font-size:9px;line-height:18px;color:var(--qz-text)}
.qp-claude__in{margin-top:auto;padding:7px 10px;border:1px solid var(--qz-hair-2);border-radius:8px;color:var(--qz-text-2)}
.qp-claude__hint{color:var(--qz-text-3);font-size:11.5px}
/* a docked Notepad: the app's own window inside the tab */
.qp-np{display:flex;flex-direction:column;height:100%;border-radius:8px;background:#1f1f1f;color:#e6e6e6;font:400 12.5px/1.45 var(--qz-font);
  box-shadow:inset 0 0 0 1px var(--qz-hair)}
.qp-np p{margin:0}
.qp-np__menu{display:flex;gap:4px;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.06)}
.qp-np__menu span{padding:3px 8px;border-radius:4px}
.qp-np__t{flex:1;margin:0;padding:12px 16px;overflow:hidden;font:400 13px/1.45 Consolas,var(--qz-mono);white-space:pre-wrap;color:#e6e6e6}
.qp-np__st{display:flex;gap:0;padding:5px 6px;border-top:1px solid rgba(255,255,255,.06);font-size:11.5px;color:#b8b8b8}
.qp-np__st span{padding:0 12px;border-left:1px solid rgba(255,255,255,.08)}.qp-np__st span:first-child{border-left:0}
/* a web page in the guest view: the repo page */
.qp-gh{height:100%;padding:16px 18px;overflow:hidden;border-radius:8px;background:var(--pg-bg);color:var(--pg-text);font:400 13px/1.45 system-ui,"Segoe UI",sans-serif}
.qp-gh p{margin:0}
.qp-gh__repo{font-size:15px;color:var(--pg-link)}
.qp-gh__repo b{font-weight:600}
.qp-badge{display:inline-block;margin-left:6px;padding:0 7px;border:1px solid var(--pg-line);border-radius:999px;font-size:11px;line-height:18px;color:var(--pg-muted);vertical-align:2px}
.qp-gh__meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px!important;font-size:12px;color:var(--pg-muted)}
.qp-gh__meta span{display:inline-flex;align-items:center;gap:5px}
.qp-gh__meta svg{width:12px!important;height:12px!important}
.qp-gh__meta em{font-style:normal;margin-left:2px;padding:0 6px;border:1px solid rgba(63,185,80,.5);border-radius:999px;color:var(--pg-ok);font-size:11px;line-height:16px}
.qp-gh__files{margin:12px 0 0;padding:0;list-style:none;border:1px solid var(--pg-line);border-radius:6px;font-size:12.5px}
.qp-gh__files li{display:flex;align-items:center;gap:8px;padding:5px 10px;border-top:1px solid var(--pg-line)}
.qp-gh__files li:first-child{border-top:0}
.qp-gh__files svg{width:14px!important;height:14px!important;color:var(--pg-muted)}
.qp-gh__readme{margin-top:14px}
.qp-gh__h{margin-bottom:6px!important;padding-bottom:5px;border-bottom:1px solid var(--pg-line);font-size:17px;font-weight:600}
.qp-gh__readme p:last-child{color:var(--pg-text);max-width:52ch}
/* the releases page */
.qp-rel{height:100%;padding:14px 18px;overflow:hidden;border-radius:8px;background:var(--pg-bg);color:var(--pg-text);font:400 13px/1.45 system-ui,"Segoe UI",sans-serif}
.qp-rel p{margin:0}
.qp-rel__card{padding:14px 16px;border:1px solid var(--pg-line);border-radius:6px}
.qp-rel__card + .qp-rel__card{margin-top:10px}
.qp-rel__h{font-size:18px;font-weight:600}
.qp-rel__h em{margin-left:8px;padding:0 7px;border:1px solid rgba(63,185,80,.5);border-radius:999px;color:var(--pg-ok);font:normal 500 11.5px/18px system-ui,sans-serif;vertical-align:3px}
.qp-rel__m{margin-top:4px!important;color:var(--pg-muted);font-size:12px}
.qp-rel__a{display:flex;align-items:center;gap:8px;margin-top:10px!important;padding:7px 10px;border:1px solid var(--pg-line);border-radius:6px;color:var(--pg-link);font-weight:600;font-size:12.5px}
.qp-rel__a + .qp-rel__a{margin-top:6px!important}
.qp-rel__a svg{width:14px!important;height:14px!important;color:var(--pg-muted)}
.qp-rel__s{margin-left:auto;color:var(--pg-muted);font-weight:400}
.qp-rel__card--old .qp-rel__h{font-size:15px}
/* Quartz's Files view */
/* the phone tab: the Android screen, over adb and scrcpy */
.qp-phone{height:100%;display:grid;place-items:center;padding:12px;border-radius:14px;background:var(--qz-s0)}
.qp-phone__s{position:relative;height:min(100%,360px);aspect-ratio:9/19;display:flex;flex-direction:column;align-items:center;padding:8px 12px;border-radius:18px;
  background:linear-gradient(180deg,#22262b,#15181b);box-shadow:0 0 0 1px var(--qz-hair-2),var(--qz-sh2);color:#f1f1ef}
.qp-phone__s p{margin:0}
.qp-phone__bar{align-self:stretch;display:flex;justify-content:space-between;font:500 10px/1 var(--qz-font)}
.qp-phone__sig{width:22px;height:8px;border-radius:2px;background:linear-gradient(90deg,#f1f1ef 70%,rgba(241,241,239,.3) 70%)}
.qp-phone__clock{margin-top:26%!important;font:300 38px/1 var(--qz-font);letter-spacing:-.02em}
.qp-phone__date{margin-top:6px!important;font-size:11px;color:#c9cac7}
.qp-phone__apps{margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;padding:0 4px}
.qp-phone__apps i{aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.16)}
.qp-phone__home{width:34%;height:4px;margin:14px 0 2px;border-radius:2px;background:rgba(255,255,255,.7)}

/* ═══ the hero: title block and window in one ember box ════════════════════════════════════ */
.qh .ph__wrap{padding-bottom:clamp(96px,14vh,140px)}
.qh .ph__box.qh__box{width:100%;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.32fr);align-items:center;gap:clamp(32px,4vw,64px)}
.qh__copy{min-width:0}
.qh__logo{width:18px;height:18px;flex:none;margin-right:-2px}
.qh .kick{flex-wrap:wrap;row-gap:8px;white-space:nowrap}   /* narrow screens wrap between facts, never inside one */
.qh__h{max-width:9.4em;font-size:clamp(42px,4.5vw,70px)}
.qh .lede{max-width:25em}
.qh__sub{margin:14px 0 0;font-size:12px;color:var(--ink-3)}
.qh__fig{margin:0;min-width:0}
.qh__fig .qw{height:clamp(400px,31vw,470px)}
.qcap{display:flex;align-items:baseline;gap:9px;margin:14px 0 0;font-size:12px;line-height:1.45;color:var(--ink-3)}
.qcap::before{content:"";flex:none;width:6px;height:6px;border-radius:1.5px;background:var(--qz-logo);transform:translateY(-1px) rotate(45deg)}

/* ═══ sections ═══════════════════════════════════════════════════════════════════════════ */
.qs{padding:clamp(44px,7.5vh,88px) 0}
.qs--tabs{padding-top:clamp(28px,5vh,56px)}
.qlabel{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.qlabel__n{color:var(--qz-logo-hi)}
.qlabel::after{content:"";width:7px;height:13px;margin-left:-4px;background:rgb(var(--ink-rgb) / .28)}   /* a caret */
.qnote{margin:18px 0 0;max-width:34em;font-size:14px;line-height:1.55;color:var(--ink-3)}
.qs__aside{margin-top:10px;font-size:15px;color:var(--ink-3)}
.qs__h2w{max-width:22em}

/* 1. the six kinds: a list that drives one strip */
.kinds{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.3fr);gap:clamp(28px,4vw,64px);align-items:start;margin-top:clamp(30px,5vh,52px)}
.kinds__l{display:flex;flex-direction:column;gap:2px;margin:0 0 0 -16px;padding:0;list-style:none}
.kind{position:relative;display:block;width:100%;margin:0;padding:13px 16px 13px 16px;border:0;border-radius:12px;background:transparent;color:var(--ink-2);
  font:400 15px/1.5 var(--f-sans);text-align:left;cursor:pointer;transition:background-color var(--d-fast) var(--e)}
.kind::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--qz-logo);opacity:0;transition:opacity var(--d-mid) var(--e)}
.kind__n{font-weight:620;color:var(--cream)}
.kind.is-on{background:var(--ground-2)}
.kind.is-on::before{opacity:1}
@media (hover:hover){.kind:hover{background:var(--ground-2)}}
.kind:active{background:var(--ground-3)}
.kinds__fig{margin:0;min-width:0}

/* a split section: text and one rendition */
.qsplit{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(32px,5vw,88px);align-items:center}
.qsplit--rev{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
.qsplit--rev .qsplit__t{order:2}
.qsplit__f{margin:0;min-width:0}

/* 2. workspaces: the title bar takes 7% of the workspace colour (chrome.css #titlebar[data-ws-colour]) */
/* a crop: the corner of a 1000 px wide window, shown at its real size (quartz.js scales the whole picture) */
.qw-wide{flex:none;display:flex;flex-direction:column;width:1000px;height:100%}
.qw--ws .qp-term{height:100%}
.qw-wide--r{margin-left:-400px}       /* the right-hand 600 px of the window */
.qw [hidden]{display:none!important}

/* workspaces (workspaces.css #workspaces-panel, workspaces.js buildRow / renderNew / the hint) */
.qw--ws .qw-title{background:linear-gradient(var(--ws-tint,transparent),var(--ws-tint,transparent)),var(--qz-s0);transition:background-color 200ms var(--qz-ease)}
.qw--ws[data-ws="ember"]{--ws-tint:hsl(345 31% 71% / .07)}.qw--ws[data-ws="forest"]{--ws-tint:hsl(150 31% 71% / .07)}
.qw--ws[data-ws="ocean"]{--ws-tint:hsl(188 31% 68% / .07)}.qw--ws[data-ws="midnight"]{--ws-tint:hsl(255 31% 76% / .07)}
.qw--ws .qw-tab{cursor:default}
button.qw-pill{cursor:pointer}
button.qw-pill:hover{background:var(--qz-s3);color:var(--qz-text)}
.qw-wsp{position:absolute;top:48px;left:10px;z-index:2;box-sizing:border-box;width:300px;padding:6px 6px 0;border:1px solid var(--qz-hair-2);border-radius:10px;
  background:var(--qz-overlay);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 12px rgba(0,0,0,.34),0 24px 64px rgba(0,0,0,.42);color:var(--qz-text-2);font-size:13px}
.qws-list{display:flex;flex-direction:column;gap:1px}
.qws-row{position:relative;display:flex;align-items:center;min-height:34px;padding:0 6px 0 11px;border-radius:6px;color:var(--qz-text-2);cursor:pointer;
  transition:background-color var(--qz-dur) var(--qz-ease),color var(--qz-dur) var(--qz-ease)}
.qws-row:hover{background:var(--qz-s3);color:var(--qz-text)}
.qws-row.is-current{color:var(--qz-text)}
.qws-row:focus-visible{outline:2px solid var(--qz-ion);outline-offset:-2px}
.qws-row::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;border-radius:2px;background:var(--qz-ion);opacity:0;transition:opacity var(--qz-dur) var(--qz-ease)}
.qws-row.is-current::before{opacity:1}
.qws-main{display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0;min-height:34px}
.qws-name{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qws-count{flex:none;color:var(--qz-text-3);font-size:11px;font-variant-numeric:tabular-nums}
.qws-asleep{flex:0 1 auto;min-width:0;overflow:hidden;color:var(--qz-text-3);font-size:11px;letter-spacing:.02em;white-space:nowrap;text-overflow:ellipsis;opacity:.8}
.qws-check{flex:none;width:11px!important;height:11px!important;margin-left:auto;padding-left:0;color:var(--qz-ion)}
.qws-acts{display:flex;align-items:center;gap:2px;flex:none;opacity:0;transition:opacity var(--qz-dur) var(--qz-ease)}
.qws-acts > *{box-sizing:border-box;width:24px!important;height:24px!important;padding:6.5px;border-radius:6px;color:var(--qz-text-3)}
.qws-acts .ws-dot{padding:0;width:10px!important;height:10px!important;margin:7px}
.qws-row:hover .qws-acts,.qws-row:focus-visible .qws-acts{opacity:1}
.qws-new{position:relative;margin-top:5px;padding:4px 0 2px;border-top:1px solid var(--qz-hair)}
.qws-newbtn{display:flex;align-items:center;gap:9px;min-height:32px;padding:0 11px;border-radius:6px;color:var(--qz-text-2)}
.qws-newbtn svg{width:11px!important;height:11px!important}
.qws-hint{margin:0;padding:7px 11px 9px;border-top:1px solid var(--qz-hair);color:var(--qz-text-3);font-size:11px}

/* the blocker (shield.css #shield, #shield-panel; shield.js position(): 8 px under the button, its right edge on the button's) */
.qw-ib--sh.is-open{background:var(--qz-s3);color:var(--qz-text);box-shadow:inset 0 0 0 1px var(--qz-hair)}
.qw-ib--sh.is-off > svg{color:var(--qz-text-3)}
.qw-shp{position:absolute;top:86px;right:86px;z-index:2;width:320px;overflow:hidden;border:1px solid var(--qz-hair-2);border-radius:14px;background:var(--qz-overlay);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 12px rgba(0,0,0,.34),0 24px 64px rgba(0,0,0,.42);color:var(--qz-text-2);font-size:13px}
.qw-shp p{margin:0}
.qw-shp__b{display:flex;flex-direction:column;gap:2px;padding:14px 12px 11px}
.qw-shp__big{color:var(--qz-text);font:600 34px/1.05 "Segoe UI Variable Display",var(--qz-font);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.qw-shp__sub{margin-bottom:10px!important;color:var(--qz-text-2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qw-shr{position:relative;display:flex!important;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:34px;padding:0 9px 0 11px!important;border-radius:6px;
  color:var(--qz-text-2);font-size:13px;cursor:pointer;transition:background-color var(--qz-dur) var(--qz-ease),color var(--qz-dur) var(--qz-ease)}
.qw-shr::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--qz-ion);opacity:0;transition:opacity var(--qz-dur) var(--qz-ease)}
.qw-shr.is-on{color:var(--qz-text)}.qw-shr.is-on::before{opacity:1}
.qw-shr:hover{background:var(--qz-s3);color:var(--qz-text)}
.qw-shr__l{flex:1;min-width:0}
.qw-sw{position:relative;flex:none;box-sizing:border-box;width:30px;height:16px;border:1px solid var(--qz-hair-2);border-radius:999px;background:var(--qz-s3);transition:background-color var(--qz-dur) var(--qz-ease),border-color var(--qz-dur) var(--qz-ease)}
.qw-sw span{position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:var(--qz-text-2);box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform 200ms var(--qz-ease),background-color var(--qz-dur) var(--qz-ease)}
.qw-shr.is-on .qw-sw{background:var(--qz-ion);border-color:transparent}.qw-shr.is-on .qw-sw span{transform:translateX(14px);background:var(--qz-on-ion)}
.qw-shp__st{margin-top:9px!important;padding:0 2px;color:var(--qz-text-3);font-size:12px;line-height:1.35;font-variant-numeric:tabular-nums}

/* 4. Reader mode and the theme */
.qtoggles{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.qtog{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 15px 0 13px;border:0;border-radius:10px;cursor:pointer;
  background:rgb(var(--ink-rgb) / .07);color:var(--cream);font:560 14.5px/1 var(--f-sans);transition:background-color var(--d-fast) var(--e)}
.qtog svg{width:16px;height:16px;color:var(--ink-3);transition:color var(--d-fast) var(--e)}
.qtog[aria-pressed="true"]{background:var(--cream);color:var(--ground)}
.qtog[aria-pressed="true"] svg{color:var(--ground)}
@media (hover:hover){.qtog:hover{background:rgb(var(--ink-rgb) / .12)}.qtog[aria-pressed="true"]:hover{background:var(--fire)}}
.th-l{display:none}.qz[data-theme="light"] .th-l{display:block}.qz[data-theme="light"] .th-d{display:none}
.qp-art{position:relative;flex:1;min-height:0;overflow:hidden;background:#f7f5f0;color:#2a2722;font:400 13px/1.55 Georgia,"Times New Roman",serif}
.qp-art p{margin:0}
.qp-art__site{display:flex;align-items:center;gap:16px;height:38px;padding:0 18px;background:#1d3b33;color:#e9efe9;font:500 11.5px/1 system-ui,sans-serif}
.qp-art__site b{margin-right:auto;font:700 14px/1 Georgia,serif}
.qp-art__body{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:20px;padding:16px 18px}
.qp-art__k{font:600 10.5px/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#9b3b23}
.qp-art__h{margin-top:8px!important;font:700 22px/1.15 Georgia,serif}
.qp-art__by{margin:6px 0 10px!important;font:400 11px/1 system-ui,sans-serif;color:#66605a}
.qp-art__a p + p{margin-top:8px}
.qp-art__side{display:flex;flex-direction:column;gap:8px}
.qp-art__box{height:96px;border-radius:4px;background:#e4dfd5}.qp-art__box--s{height:60px}
.qp-art__ln{height:8px;border-radius:4px;background:#e4dfd5}.qp-art__ln--s{width:60%}
.qp-art__cookie{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;background:#262421;color:#f2efe9;
  font:400 12px/1.3 system-ui,sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.qp-art__cookie b{margin-left:auto;padding:6px 10px;border-radius:6px;background:#f2efe9;color:#262421;font-weight:600}
/* Reader mode: one column of the article, in Quartz's reading type (reader-page.css) */

/* 5. the new tab and the notes pane */
.ntg__h{margin:28px 0 0;font:640 22px/1.15 var(--f-sans);font-stretch:92%;letter-spacing:-.01em;color:var(--ink)}
.ntg__p{margin:8px 0 0;max-width:32em;font-size:16px;line-height:1.55;color:var(--ink-2)}
.ntx{margin-top:clamp(30px,5vh,52px)}
.ntx__t{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:8px clamp(24px,4vw,64px);align-items:baseline;margin-bottom:26px}
.ntx__t .ntg__h,.ntn .ntg__h{margin:0}
.ntx__t .ntg__p{margin:0}
.ntx__f{margin:0}
.ntn{margin-top:clamp(64px,9vh,112px)}
.ntn .ntg__p b{font-weight:600;color:var(--ink)}

/* the new tab: newtab.html + newtab.css (f2fcd18), the default arrangement, page tokens (not the bars' lifted greys) */
.qnt{position:relative;height:100%;overflow:hidden;background:var(--qz-bg);color:var(--qz-text);
  --t2:#a9aaa7;--t3:#75767a;--h-edge:rgba(255,255,255,.1);--h-glass:rgba(14,15,16,.5);--h-card:rgba(31,32,33,.92);
  --h-shadow:0 1px 2px rgba(0,0,0,.5),0 2px 18px rgba(0,0,0,.38);--p-edge:rgba(255,255,255,.07)}
.qnt p{margin:0}
.qnt__home{display:grid;grid-template-columns:minmax(352px,1fr) minmax(480px,720px) minmax(352px,1fr);column-gap:32px;min-height:100%;padding:0 24px}
.qnt__rail{display:flex;flex-direction:column;gap:16px;min-width:0;padding:24px 0}
.qnt__rail--l{align-items:flex-start}
.qnt__rail--r{align-items:flex-end}
.qnt__stage{min-width:0;padding:90px 0 48px;text-align:center}   /* clamp(28px, 11vh, 128px) of an 815 px page */
.qnt__clock{padding-top:4px}
.qnt__time{display:flex;align-items:baseline;gap:6px}
.qnt__time > span:first-child{font:600 44px/1.1 var(--qz-font);font-variant-numeric:tabular-nums;letter-spacing:-.015em;text-shadow:var(--h-shadow)}
.qnt__ap{font-size:16px;font-weight:600;opacity:.86;text-shadow:var(--h-shadow)}
.qnt__date{margin-top:8px!important;font-size:16px;opacity:.86;text-shadow:var(--h-shadow);white-space:nowrap;font-variant-numeric:tabular-nums}
.qw .qnt__logo{display:block;width:56px;height:56px;margin:0 auto;filter:drop-shadow(0 1px 2px rgb(0 0 0 / .28))}
.qnt__search{position:relative;display:flex;align-items:center;max-width:640px;height:44px;margin:18px auto 0!important;padding:0 16px 0 40px;
  border:1px solid var(--h-edge);border-radius:14px;background:var(--h-glass);box-shadow:var(--qz-sh1);color:var(--t2);font-size:16px;text-align:left}
.qw .qnt__search svg{position:absolute;left:15px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--t2)}
.qnt__saved{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:32px}
.qnt__cap{flex:0 0 100%;margin:0 0 4px!important;font-size:13px;font-weight:600;letter-spacing:.01em;text-shadow:var(--h-shadow);text-align:center}
.qnt__rt{display:inline-flex;align-items:center;max-width:180px;height:30px;padding:0 11px;border-radius:999px;background:var(--h-glass);
  box-shadow:inset 0 0 0 1px var(--h-edge);font-size:12px;letter-spacing:.01em;white-space:nowrap}
.qnt__rt i,.qnt__chip i{display:grid;place-items:center;flex:none;width:16px;height:16px;margin-right:7px;border-radius:3px;background:var(--c);color:var(--i);
  font:700 9px/1 var(--qz-font);font-style:normal}
.qnt__rt--add{justify-content:center;width:30px;padding:0;color:var(--t3);font-size:16px;font-weight:500;line-height:1}
.qnt__links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}
.qnt__chip{display:inline-flex;align-items:center;height:32px;padding:0 14px;border:1px solid var(--h-edge);border-radius:999px;background:var(--h-glass);
  font-size:13px;letter-spacing:.01em;white-space:nowrap}
.qnt__chip i{margin-right:8px}
.qnt__stats{position:relative;margin-top:28px;padding:16px 20px;border:1px solid var(--h-edge);border-radius:14px;background:var(--h-card);
  box-shadow:inset 0 1px 0 var(--p-edge),var(--qz-sh1);text-align:left}
.qnt__strip{display:grid;grid-template-columns:repeat(5,1fr);gap:0 4px}
.qnt__st{min-width:0}
.qnt__v{height:28px;font-size:20px;font-weight:500;line-height:28px;letter-spacing:.01em;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.qnt__v--sm{font-size:16px}
.qnt__v--pair{font-size:13px;font-weight:400;line-height:14px}
.qnt__v--pair span{display:block;overflow:hidden;text-overflow:ellipsis}
.qnt__l{margin-top:4px!important;height:16px;color:var(--t3);font-size:12px;line-height:16px;letter-spacing:.01em;white-space:nowrap}
.qw .qnt__g{display:block;width:100%;max-width:120px;height:28px;margin-top:8px}
.qnt__ga{fill:rgba(159,180,204,.1)}
.qnt__gl{fill:none;stroke:var(--qz-ion);stroke-width:1.3;vector-effect:non-scaling-stroke}
.qnt__open{position:absolute;top:16px;right:20px;display:flex;align-items:center;gap:4px;color:var(--t3);font-size:12px;line-height:16px;letter-spacing:.01em}
.qnt__open b{width:6px;height:6px;margin:0 2px 3px 4px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:rotate(45deg)}
.qnt__dock{margin-top:16px}
.qnt__dh{display:flex;align-items:center;justify-content:space-between;height:20px;margin-bottom:8px;box-shadow:inset 0 -1px 0 var(--qz-hair)}
.qnt__dh p{color:var(--t3);font-size:12px;font-weight:600;line-height:20px;letter-spacing:.01em}
.qnt__dh span{width:38px;color:var(--t3);font-size:12px;line-height:20px;text-align:right}
.qnt__dr{display:flex;flex-wrap:wrap;gap:8px;min-height:56px}
.qnt__dt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:56px;height:56px;padding:4px 3px;border-radius:6px;
  background:var(--qz-s2);color:var(--t2)}
.qnt__gly{position:relative;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--qz-hair);border-radius:4px;
  color:var(--t3);font-size:13px;font-style:normal;letter-spacing:.01em;text-transform:uppercase}
.qnt__gly--web{border-radius:50%}
.qnt__gly--term{font-family:var(--qz-mono);font-size:12px;letter-spacing:0;text-transform:none}
.qnt__dt.is-run .qnt__gly::after{content:"";position:absolute;top:-3px;right:-3px;width:6px;height:6px;border-radius:50%;background:var(--qz-ion);box-shadow:0 0 0 1px var(--qz-bg)}
.qnt__dt em{max-width:100%;font-size:11px;font-style:normal;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qnt__mod{width:224px;padding:14px 16px;border:1px solid var(--h-edge);border-radius:14px;background:var(--h-card);box-shadow:inset 0 1px 0 var(--p-edge),var(--qz-sh1);text-align:left}
.qnt__row{display:flex;align-items:baseline;gap:8px;height:24px}
.qnt__row + .qnt__row{margin-top:4px!important}
.qnt__row b{min-width:2ch;font-size:20px;font-weight:600;line-height:24px;font-variant-numeric:tabular-nums}
.qnt__row span{color:var(--t2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qnt__music{margin-top:10px}
.qnt__mh{height:18px;margin-bottom:6px!important;box-shadow:inset 0 1px 0 var(--qz-hair);color:var(--t3);font-size:12px;font-weight:600;line-height:18px;letter-spacing:.01em}
.qnt__mr{display:flex;align-items:center;gap:8px;height:22px}
.qnt__mr span{flex:1;color:var(--t2);font-size:14px;line-height:22px;letter-spacing:.01em}
.qnt__mr em{width:52px;height:20px;border-radius:6px;color:var(--t2);font-size:12px;font-style:normal;line-height:20px;text-align:center}
.qnt__hint{margin-top:4px!important;color:var(--t3);font-size:12px;line-height:16px;letter-spacing:.01em;white-space:nowrap}
.qnt__edit{position:absolute;left:16px;bottom:12px;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:1px solid var(--qz-hair);border-radius:999px;background:var(--qz-s2);color:var(--t2)}
.qw .qnt__edit svg{width:14px;height:14px}

/* the notes pane: index.html #sidepane (chrome.css) + notes-pane.js build() + notes-pane.css (f2fcd18), panel tokens */
.qnp{flex:1 1 auto;min-height:0;display:flex}
.qnp p{margin:0}
.qnp__page{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.qnp__side{flex:0 0 480px;display:flex;align-items:stretch;min-width:0;overflow:hidden;background:var(--qz-s1);border-left:1px solid var(--qz-hair);
  box-shadow:inset 0 1px 0 var(--qz-edge)}
.qnp__grip{flex:0 0 6px}
.qnp__pane{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px;padding:6px;color:var(--qz-text);font-size:12px;--t2:#a9aaa7;--t3:#75767a}
.qnp__chips{display:flex;flex-wrap:wrap;gap:4px}
.qnp__chip{min-height:22px;padding:2px 9px;border:1px solid var(--qz-hair);border-radius:999px;background:var(--qz-s2);color:var(--t2);font-size:11px;font-weight:500;line-height:16px}
.qnp__chip.is-on{border-color:rgba(159,180,204,.42);background:var(--qz-ion-soft);color:var(--qz-text)}
.qnp__chip--auto{font-variant-caps:all-small-caps;letter-spacing:.06em}
.qnp__strip{display:flex;flex-direction:column;gap:1px;padding:5px 7px;border:1px solid var(--qz-hair);border-radius:10px;background:var(--qz-s2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.qnp__line{display:flex;align-items:flex-start;gap:6px;min-height:18px;color:var(--t2);line-height:1.35;white-space:nowrap;overflow:hidden}
.qnp__line i{flex:none;width:6px;height:6px;margin-top:5px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--t3)}   /* data-level="off" */
.qnp__ctl{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:3px}
.qnp__btn{min-height:22px;padding:2px 8px;border:1px solid var(--qz-hair);border-radius:6px;background:var(--qz-s2);color:var(--qz-text);font-size:11px;font-weight:500;line-height:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);white-space:nowrap}
.qnp__tog{margin-left:auto;padding:2px 4px;color:var(--t3);font-size:11px;line-height:16px;white-space:nowrap}
.qnp__doc{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;gap:4px}
.qnp__bar{display:flex;align-items:center;gap:6px}
.qnp__title{flex:1 1 auto;min-width:0;font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qnp__view{flex:1 1 auto;min-height:0;overflow:hidden;padding:16px 18px;border:1px solid var(--qz-hair);border-radius:10px;background:var(--qz-solid);
  color:#d6d6d3;font:400 13px/1.55 system-ui,"Segoe UI",sans-serif}   /* the note itself: the user's own .html page (sample) */
.qnp__view p + p,.qnp__view ul + p{margin-top:8px}
.qnp__view .qnp__h1{margin-bottom:10px;color:#f1f1ef;font-size:20px;font-weight:700}
.qnp__view .qnp__h2{margin-top:14px;color:#f1f1ef;font-size:14.5px;font-weight:650}
.qnp__view ul{margin:6px 0 0;padding-left:20px}
.qnp__view sub{font-size:.75em}

/* 6. download and set up */
.dl{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:clamp(32px,5vw,88px);margin-top:clamp(30px,5vh,52px);align-items:start}
.dl__get{min-width:0}
.dl__sub{margin:14px 0 0;font-size:12px;color:var(--ink-3)}
.dl__p{margin:20px 0 0;max-width:30em;font-size:16px;line-height:1.55;color:var(--ink-2)}
.dl__hash{margin-top:28px}
.dl__hash .label{margin-bottom:10px}
.dl__clone{width:100%}
.dl__clone .clone__t{color:var(--ink-2)}
.dl__note{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.dl__note code,.facts code{font-size:.92em;color:var(--ink-2)}
.dl__h{margin:0 0 16px;font:640 22px/1.15 var(--f-sans);font-stretch:92%;letter-spacing:-.01em;color:var(--ink)}
.dl__h:not(:first-child){margin-top:40px}
.steps{margin:0;padding:0;list-style:none;counter-reset:st}
.steps li{position:relative;padding:0 0 0 44px;font-size:16px;line-height:1.6;color:var(--ink-2);counter-increment:st}
.steps li + li{margin-top:16px}
.steps li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:.2em;font:500 12px/1.6 var(--f-mono);color:var(--fire-ink)}
.steps b,.facts b{font-weight:620;color:var(--ink)}
.facts{display:grid;gap:14px;margin:28px 0 0}
.facts div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 14px}
.facts dt{font:400 11.5px/1.95 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.facts dd{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.reqs{margin:0;padding:0;list-style:none}
.reqs li{position:relative;padding-left:22px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.reqs li + li{margin-top:8px}
.reqs li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:1.5px;background:var(--ink-3)}
.src{margin-top:40px;border-radius:14px;background:var(--ground-2)}
.src summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 18px 0 20px;border-radius:14px;cursor:pointer;list-style:none;
  font:600 16px/1.2 var(--f-sans);color:var(--cream);transition:background-color var(--d-fast) var(--e)}
.src summary::-webkit-details-marker{display:none}
.src summary svg{width:16px;height:16px;flex:none;color:var(--ink-3);transition:transform var(--d-slow) var(--e)}
.src[open] summary svg{transform:rotate(180deg)}
@media (hover:hover){.src summary:hover{background:var(--ground-3)}}
.src__b{padding:2px 20px 20px}
.src__b p{margin:0 0 14px;max-width:34em;font-size:15px;line-height:1.55;color:var(--ink-2)}
.src__cmds{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0;padding:0;list-style:none}
.src__cmds li{max-width:100%;min-width:0}

/* 7. what it doesn't do yet */
.yet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px clamp(28px,4vw,64px);max-width:62rem;margin:clamp(26px,4vh,40px) 0 0;padding:0;list-style:none}
.yet li{font-size:17px;line-height:1.55;color:var(--ink-2)}

/* the closing strip: source and licence */
.qs--src{padding-top:clamp(40px,7vh,80px)}
.qend{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 48px;align-items:end}
.qend__h{font-size:clamp(26px,2.3vw,34px)}
.qend__c{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:18px 0 0;font-size:12.5px;color:var(--ink-3)}
.qend__sha{font-size:15px;color:var(--fire-ink);text-decoration:none;border-radius:4px;background:linear-gradient(rgb(var(--fire-rgb) / .2),rgb(var(--fire-rgb) / .2)) 0 100%/0 30% no-repeat;transition:background-size var(--d-slow) var(--e)}
@media (hover:hover){.qend__sha:hover{background-size:100% 30%}}
.qend__l{justify-content:flex-end}
.qend__dis{grid-column:1/-1;margin:12px 0 0;max-width:46em;font-size:13px;line-height:1.55;color:var(--ink-3)}

/* ═══ the window at small sizes: what Quartz itself does when space runs out ════════════════ */
@container qw (max-width:600px){
  .qw-caps span:not(:last-child),.qw-new,.qw-ib--hide{display:none}
  .qw-caps span{width:40px}
  /* chips that don't fit collapse to their icon (chrome.css .tab.collapsed: a 40px chip) */
  .qw-tab:not(.is-active){min-width:40px;max-width:40px;padding:0;justify-content:center;flex:none}
  .qw-tab:not(.is-active) .qw-tab__t,.qw-tab:not(.is-active) .qw-tab__s{display:none}
  .qw-tab:not(.is-active) .qw-mono,.qw-tab:not(.is-active) .qw-glyph{margin:0}
  .qw-tab:not(.is-active) .qw-dot{margin:0}
  .qw-views[data-show="split"][data-focus="web"] .qw-v--term,.qw-views[data-show="split"][data-focus="term"] .qw-v--web{display:none}
  .qw-views[data-show="split"] .qw-v::after{display:none}
  .qw--ws .qw-tab:not(.is-active){display:none}
  .qp-gh__files li:nth-child(n+5){display:none}
}
@container qw (max-width:440px){
  .qw-pill{display:none}
  /* the strip scrolls once its chips run out of room, as Quartz's does (#tabstrip overflow-x:auto) */
  .qw-strip{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  .qw-strip::-webkit-scrollbar{display:none}
  .qw-tab{flex:none}
  .qw-tab.is-active{min-width:96px;max-width:150px}
  .qw-tab:not(.is-active){min-width:36px;max-width:36px}
  .qw-nav .qw-ib:nth-child(2),.qw-nav .qw-ib:nth-child(3){display:none}
  .qw-omni{padding:0 10px}
  .qp-term,.qp-claude{font-size:11px;padding:10px 11px}
  .qp-art__body{grid-template-columns:minmax(0,1fr)}
  .qp-art__side{display:none}
}

/* ═══ narrow pages ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .qh .ph__box.qh__box{grid-template-columns:minmax(0,1fr) minmax(0,1.18fr)}
}
@media (max-width:980px){
  .qh .ph__box.qh__box{grid-template-columns:minmax(0,1fr);gap:36px}
  .qh__h{max-width:11em}
  .qh__fig .qw{height:clamp(340px,60vw,460px)}
  .kinds,.qsplit,.ntx__t,.dl{grid-template-columns:minmax(0,1fr)}
  .qsplit--rev .qsplit__t{order:0}

  .kinds__l{margin-left:-12px}
  .qend{grid-template-columns:minmax(0,1fr);align-items:start}
  .qend__l{justify-content:flex-start}
}
@media (max-width:520px){
  .qh__h{font-size:40px}
  .qh__fig .qw{height:360px}
  .kind{padding:11px 12px;font-size:14.5px}
  .yet{grid-template-columns:minmax(0,1fr)}
  .facts div{grid-template-columns:minmax(0,1fr);gap:4px}
  .steps li{padding-left:36px}
}
@media (max-width:360px){
  .qh__h{font-size:36px}
  .qh__fig .qw{height:330px}
}

/* ═══ motion and modes ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .qp-cur{animation:none}
  .qw *,.kind,.kind::before,.qtog,.qtog svg,.src summary,.src summary svg,.qend__sha{transition:none!important}
}
@media (forced-colors:active){
  .qw{border:1px solid CanvasText}
  .kind.is-on,.qtog[aria-pressed="true"]{outline:2px solid Highlight}
}

/* ── fidelity pass (real-ui/quartz.md) ──
   The hero window is laid out at a real Quartz size (1000 x 600; Quartz's minimum is 720 x 480) and quartz.js
   scales it to its box, so small screens get the same window smaller, never a reflowed one. */
.qw-fit{position:relative;width:100%;height:calc(var(--fit-h,600px) * var(--k,.62));border-radius:calc(9px * var(--k,.62))}
.qw-fit > .qw{position:absolute;left:0;top:0;width:var(--fit-w,1000px);height:var(--fit-h,600px)!important;transform:scale(var(--k,.62));transform-origin:0 0}
/* the tab well: pages fill it edge to edge, no inset and no radius; a split is two views and a 6 px divider
   (--surface-0 between two hairlines); the focused half carries a 2 px accent line on its top (chrome.css #views) */
.qw-fit .qw-views{padding:0;gap:0;border-top:0}
.qw-fit .qw-v{border-radius:0}
.qw-fit .qw-views[data-show="split"] .qw-v--term{order:3}
.qw-fit .qw-views[data-show="split"]::before{content:"";order:2;flex:0 0 6px;align-self:stretch;border-left:1px solid var(--qz-hair);border-right:1px solid var(--qz-hair);background:var(--qz-s0)}
.qw-fit .qw-views[data-show="split"] .qw-v::after{left:0;right:0;border-radius:0}
.qw-tab__b{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:4px;color:var(--qz-text-2);opacity:0}
.qw-tab__b svg{width:10px!important;height:10px!important}
.qw-tab.is-active .qw-tab__b{opacity:1}
@media (hover:hover){.qw-tab:hover .qw-tab__b{opacity:1}}
.qw-attn{flex:none;color:var(--qz-warn);font-size:8px;line-height:1}
.qw-tab.needs-you:not(.needs-you) .qw-attn,.qw-tab:not(.needs-you) .qw-attn{display:none}
.qw-ib--lm svg{width:13px!important;height:13px!important;fill:none;stroke:currentColor;stroke-width:1}

/* ── fidelity pass 2: the four section windows ──
   Each is drawn at a real Quartz size (a whole window, or the corner of a 1000 px one) and scaled as one picture,
   so a phone gets the same picture smaller, never a reflowed layout Quartz doesn't have. */
.qw-fit > .qw{container-type:normal}                 /* the small-window reflow rules above never reach a fitted window */
.kinds__fig .qw-fit,.qsplit__f .qw-fit{max-width:var(--fit-w,600px);margin-inline:auto}
.kinds__fig .qcap,.qsplit__f .qcap{max-width:var(--fit-w,none);margin-inline:auto}   /* the caption lines up under the picture */
.qw-views--one > .qw-v:only-child{display:block}
.qw-mono--g svg{width:10px!important;height:10px!important;color:var(--qz-text-2)}   /* a glyph in the logo box: TAB_GLYPH globe / phone */
.qw-tab.is-claude .qw-dot{margin:0 1px 0 2px}

/* section 1, the web tab: a GitHub-style releases page (sample of a real page) */
.qp-rel__top{display:flex;gap:18px;margin-bottom:14px!important;padding-bottom:10px;border-bottom:1px solid var(--pg-line);font-size:13px;color:var(--pg-muted)}
.qp-rel__top b{color:var(--pg-text);font-weight:600}
.qp-rel__x{display:flex;align-items:center;gap:6px;margin-top:12px!important;font-weight:600;font-size:13px}
.qp-rel__x span{padding:0 6px;border-radius:999px;background:var(--pg-line);font-size:11px;line-height:17px;font-weight:500}
.qp-rel__b{margin-top:8px!important;font-size:13px}

/* section 1, the Files tab (files.html, files.css: a 48 px bar, a 232 px rail, Name / Size / Modified) */
.qf{height:100%;display:grid;grid-template-rows:48px minmax(0,1fr);background:var(--qz-bg);color:var(--qz-text);font-size:13px}
.qf p{margin:0}
.qf__bar{display:grid;grid-template-columns:28px minmax(0,1fr) 180px auto;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--qz-hair);background:var(--qz-s0)}
.qf__up{display:grid;place-items:center;height:28px;border-radius:6px;color:var(--qz-text-2);font-size:13px}
.qf__path{display:flex;align-items:center;height:28px;padding:0 6px;border:1px solid var(--qz-hair);border-radius:6px;background:var(--qz-code);color:var(--qz-text-2);white-space:nowrap;overflow:hidden}
.qf__path span,.qf__path b{padding:0 4px}
.qf__path b{color:var(--qz-text);font-weight:500}
.qf__path i{padding:0 1px;color:var(--qz-text-3);font-size:12px;font-style:normal}
.qf__filter{display:flex;align-items:center;height:28px;padding:0 8px;border:1px solid var(--qz-hair);border-radius:6px;background:var(--qz-code);color:var(--qz-text-3)}
.qf__stage{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:0}
.qf__rail{padding:12px 8px 16px;border-right:1px solid var(--qz-hair);background:var(--qz-s1)}
.qf__rh{margin:0 0 4px!important;padding:0 8px;color:var(--qz-text-3);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.qf__ri + .qf__rh{margin-top:14px!important}
.qf__ri{min-height:28px;padding:5px 8px;border-radius:6px;color:var(--qz-text-2);line-height:18px}
.qf__ri--d{padding-bottom:7px}
.qf__free{display:block;height:4px;margin:6px 0 4px;border-radius:999px;background:var(--qz-s3)}
.qf__free span{display:block;height:100%;border-radius:999px;background:var(--qz-text-3)}
.qf__ft{display:block;color:var(--qz-text-3);font-size:12px;line-height:1.3}
.qf__list{min-width:0}
.qf__cols,.qf__row{display:grid;grid-template-columns:minmax(0,1fr) 96px 120px;gap:0 8px;align-items:center}
.qf__cols{position:relative;height:24px;padding:0 26px 0 24px;color:var(--qz-text-3);font-size:12px;font-weight:500;box-shadow:inset 0 -1px 0 var(--qz-hair)}
.qf__cols span:first-child{padding-left:24px}
.qf__cols span:nth-child(2),.qf__row span:nth-child(2){text-align:right}
.qf__row{height:32px;margin:0 8px 0 16px!important;padding:0 8px;color:var(--qz-text)}
.qf__row + .qf__row{border-top:1px solid var(--qz-hair)}
.qf__row span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.qf__row span:first-child{display:flex;align-items:center;gap:8px}
.qf__row span + span{color:var(--qz-text-2)}
.qf__row svg{color:var(--qz-text-3)}

/* section 1, the Phone tab (phone.html, phone-page.css: a status strip, the screen, a 208 px rail of keys) */
.qph{height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);background:var(--qz-bg);color:var(--qz-text);font-size:13px}
.qph p{margin:0}
.qph__st{grid-column:1/-1;display:flex;align-items:center;gap:10px;min-height:38px;padding:7px 14px;border-bottom:1px solid var(--qz-hair);background:var(--qz-s1);box-shadow:inset 0 1px 0 var(--qz-edge)}
.qph__dot{width:8px;height:8px;border-radius:50%;background:var(--qz-ok)}
.qph__sub{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--qz-text-3);font-size:12px}
.qph__stage{display:grid;place-items:center;min-height:0;padding:16px}
.qph .qp-phone__s{height:100%;aspect-ratio:9/20;border-radius:20px}
.qph__rail{display:flex;flex-direction:column;gap:10px;width:208px;box-sizing:border-box;padding:12px 12px 14px;border-left:1px solid var(--qz-hair);background:var(--qz-s1)}
.qph__pill{align-self:flex-start;padding:4px 8px;border:1px solid var(--qz-hair);border-radius:999px;background:var(--qz-s2);color:var(--qz-text-2);font-size:11px}
.qph__keys{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.qph__keys span{padding:7px 4px;border:1px solid var(--qz-hair);border-radius:6px;background:var(--qz-s2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);color:var(--qz-text-2);font:500 11px/1.2 var(--qz-font);text-align:center}
.qph__keys .is-w{grid-column:1/-1}

/* section 4: the page, and Reader view in its own tab (reader.html, reader-page.css) */
.qw--rd{transition:background-color 200ms var(--qz-ease)}
.qw--rd .qw-views[data-show="page"] [data-v="page"],.qw--rd .qw-views[data-show="reader"] [data-v="reader"]{display:block}
.qw--rd .qw-ib--sh.is-off > svg{color:var(--qz-text-3)}
.qrd{height:100%;display:flex;flex-direction:column;background:var(--qz-bg);color:var(--qz-text);font-size:14px;transition:background-color 200ms var(--qz-ease),color 200ms var(--qz-ease)}
.qrd p{margin:0}
.qrd__bar{flex:none;display:flex;align-items:center;gap:14px;height:40px;padding:0 14px;border-bottom:1px solid var(--qz-hair);background:var(--qz-solid);box-shadow:inset 0 1px 0 var(--qz-edge)}
.qrd__btn{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid transparent;border-radius:6px;color:var(--qz-text-2);font-size:12px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.qrd__ar{font-size:13px}
.qrd__site{flex:1 1 auto;min-width:0;text-align:center;color:var(--qz-text-2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qrd__ctl{flex:none;display:flex;align-items:center;gap:6px}
.qrd__stage{flex:1;min-height:0;overflow:hidden;padding:44px 24px 0}
.qrd__col{max-width:32em;margin:0 auto;font-size:19px}
.qrd__title{margin:0 0 10px!important;font:600 26px/1.2 "Segoe UI Variable Display",var(--qz-font);letter-spacing:-.01em;color:var(--qz-text)}
.qrd__meta{margin:0 0 28px!important;padding-bottom:20px;border-bottom:1px solid var(--qz-hair);color:var(--qz-text-2);font-size:13px;font-variant-numeric:tabular-nums}
.qrd__text p{margin:0 0 1.05em!important;font-size:19px;line-height:1.65}