/* Central Quants study desk. Independent UI release: the light palette uses
   paper, ink and navy; the existing dark theme keeps its amber character.
   Scarlet remains time pressure, teal remains the hiring/answer signal. */

:root{
  --ground:#F5F4EF; --surface:#FFFFFF; --surface-2:#EEEFEA;
  --ink:#172F3C; --ink-2:#3B505B; --muted:#596B73; --faint:#687981;
  --rule:#DBDFD9; --rule-strong:#ADB8B6;
  --navy:#204B61; --navy-2:#476B7A; --navy-3:#94ABB4;
  --accent:#C8102E; --accent-soft:#F3D6DA;
  --bid:#0B6E5F; --bid-soft:#CFE5E0;
  --d1:#6E89AB; --d2:#40628F; --d3:#16324F; --d-ink:#FFFFFF;
  --shadow:0 1px 2px rgba(14,26,43,.06), 0 8px 24px -16px rgba(14,26,43,.18);
  --gold:#B45309; --gold-strong:#B45309; --gold-soft:#F8EFE2;
  --bg-grad:none;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0d0d11; --surface:#16161c; --surface-2:#1c1c24;
    --ink:#f0eee9; --ink-2:#b0aa9f; --muted:#b0aa9f; --faint:#7c7669;
    --rule:#282832; --rule-strong:#373744;
    --navy:#8aa9d8; --navy-2:#6d8cbe; --navy-3:#4a6890;
    --accent:#FF6B6B; --accent-soft:#3A1D25;
    --bid:#4FB8A4; --bid-soft:#123029;
    --gold:#f0a94e; --gold-strong:#b45309; --gold-soft:#302410;
    --bg-grad:radial-gradient(1200px 620px at 100% -10%, #2b2010 0%, transparent 55%),
              radial-gradient(1000px 520px at -10% 0%, #141a26 0%, transparent 50%);
    --d1:#8aa9d8; --d2:#6d8cbe; --d3:#4a6890; --d-ink:#0d0d11;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --ground:#0d0d11; --surface:#16161c; --surface-2:#1c1c24;
  --ink:#f0eee9; --ink-2:#b0aa9f; --muted:#b0aa9f; --faint:#7c7669;
  --rule:#282832; --rule-strong:#373744;
  --navy:#8aa9d8; --navy-2:#6d8cbe; --navy-3:#4a6890;
  --accent:#FF6B6B; --accent-soft:#3A1D25;
  --bid:#4FB8A4; --bid-soft:#123029;
  --gold:#f0a94e; --gold-strong:#b45309; --gold-soft:#302410;
  --bg-grad:radial-gradient(1200px 620px at 100% -10%, #2b2010 0%, transparent 55%),
        radial-gradient(1000px 520px at -10% 0%, #141a26 0%, transparent 50%);
  --d1:#8aa9d8; --d2:#6d8cbe; --d3:#4a6890; --d-ink:#0d0d11;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.5);
}

/* IBM Plex, matching the reports. System fallbacks keep it readable offline. */
:root{
  --sans:"IBM Plex Sans","IBM Plex Sans SC",-apple-system,BlinkMacSystemFont,
         "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--sans);background:var(--ground);color:var(--ink);
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
button{font-family:inherit;font-size:inherit}
a{color:var(--navy)}

.app{display:flex;flex-direction:column;min-height:100vh}

/* ---------- the app's footer: the two documents a member is bound by (F-109) ---------- */
.appfoot{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 20px 18px;font-size:12.5px;
  border-top:1px solid var(--rule);background:var(--surface);
}
.appfoot a{color:var(--muted);text-decoration:none}
.appfoot a:hover{color:var(--ink);text-decoration:underline}
.appfoot-sep{color:var(--rule)}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;gap:18px;padding:10px 20px;
  background:var(--surface);border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:40;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.mark{
  width:42px;height:42px;border-radius:10px;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-family:var(--mono);font-weight:700;
  font-size:15px;letter-spacing:.5px;flex:0 0 auto;
}
/* Two-line name lockup: English carries the weight, Chinese is the subtitle
   (PLAN_ROUND_2 §2 / D-1). Both strings come from config.py via /api/me, so a
   rename stays a one-line change. */
.brand-text h1{margin:0;font-size:16px;font-weight:600;letter-spacing:.1px;color:var(--ink);white-space:nowrap}
.brand-text p{margin:0;white-space:nowrap}
.brand-text .brand-zh{margin-top:1px;font-size:12px;color:var(--ink-2);letter-spacing:.3px}
.brand-text .brand-tag{margin-top:1px;font-size:10.5px;color:var(--faint);letter-spacing:.2px}

.tabs{display:flex;gap:2px;background:var(--surface-2);padding:3px;border-radius:10px}
.tab,.tablink{
  border:0;background:transparent;color:var(--ink-2);padding:6px 13px;
  border-radius:7px;cursor:pointer;font-weight:500;white-space:nowrap;
}
/* `tablink` is a LINK that looks like a tab (see index.html). It shares every rule here so the
   two cannot drift apart, and adds only what an anchor needs and a button does not. */
.tablink{text-decoration:none;display:inline-flex;align-items:center;font:inherit}
.tab:hover,.tablink:hover{color:var(--ink)}
.tab.active{background:var(--navy);color:#fff}

.searchwrap{
  flex:1 1 220px;min-width:180px;max-width:420px;position:relative;
  display:flex;align-items:center;
}
.search-ic{position:absolute;left:11px;color:var(--faint);pointer-events:none}
#search{
  width:100%;padding:8px 12px 8px 34px;border:1px solid var(--rule);
  border-radius:9px;background:var(--ground);color:var(--ink);font-size:13px;
}
#search:focus{outline:none;border-color:var(--navy-2);background:var(--surface)}

.topactions{display:flex;align-items:center;gap:10px;margin-left:auto}
.statchips{display:flex;gap:14px}
.statchip{text-align:right;line-height:1.15}
.statchip b{display:block;font-family:var(--mono);font-size:15px;font-weight:600;color:var(--navy)}
.statchip span{font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.5px}
.icon-btn{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--rule);
  background:var(--surface);color:var(--ink-2);cursor:pointer;
  display:grid;place-items:center;
}
.icon-btn:hover{border-color:var(--rule-strong);color:var(--ink)}

/* Role gating is enforced server-side; this only removes dead UI.
   `viewer` reads everything but writes nothing, so it loses the ↻ button, the
   subscriber tab and the studio — the same chrome a subscriber never sees. */
body.is-subscriber .owner-only,body.is-trial .owner-only,
body.is-viewer .owner-only{display:none !important}
/* authoring surfaces exist only under the studio profile (see loadRole) */
body:not(.profile-studio) .tab[data-view="studio"]{display:none !important}

/* ---------- layout ---------- */
.view{flex:1;display:flex;min-height:0}
.body{display:flex;width:100%;min-height:0}
.sidebar{
  width:250px;flex:0 0 250px;background:var(--surface);
  border-right:1px solid var(--rule);padding:14px;overflow-y:auto;
  max-height:calc(100vh - 60px);position:sticky;top:60px;
}
.content{flex:1;padding:18px 22px;min-width:0}
.content.page{max-width:1180px}

.filters-head{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:11px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--faint);margin-bottom:10px;
}
.link-btn{border:0;background:none;color:var(--navy);cursor:pointer;font-size:11px;text-transform:none}
.filter-group{
  font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--faint);
  margin:16px 0 6px;padding-top:12px;border-top:1px solid var(--rule);
}
.filter-group:first-child{margin-top:0;padding-top:0;border-top:0}
.filter{margin-bottom:9px}
.filter label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:3px}
.filter select{
  width:100%;padding:6px 8px;border:1px solid var(--rule);border-radius:7px;
  background:var(--ground);color:var(--ink);font-size:12.5px;
}
.filter select.active{border-color:var(--navy-2);background:var(--surface);font-weight:500}
.toggles{margin-top:16px;padding-top:12px;border-top:1px solid var(--rule);display:grid;gap:7px}
.switch{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.count-badge{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--accent)}
.side-note{margin-top:16px;padding-top:12px;border-top:1px solid var(--rule);font-size:11.5px;color:var(--muted);line-height:1.5}

.content-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.result-info{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.result-info strong{font-size:19px;font-weight:600}
.active-chips{display:flex;gap:5px;flex-wrap:wrap}
.active-chip{
  display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);
  border:1px solid var(--rule);border-radius:99px;padding:2px 5px 2px 10px;font-size:11.5px;
}
.active-chip button{border:0;background:none;cursor:pointer;color:var(--faint);font-size:14px;line-height:1;padding:0 3px}
.sortwrap label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.sortwrap select{padding:5px 8px;border:1px solid var(--rule);border-radius:7px;background:var(--surface);color:var(--ink)}

/* ---------- cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.card{
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:14px;cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s;
  display:flex;flex-direction:column;gap:8px;
}
.card:hover{border-color:var(--navy-3);box-shadow:var(--shadow);transform:translateY(-1px)}
.card-topline{display:flex;align-items:center;gap:7px;justify-content:space-between}
.card-title{font-weight:600;font-size:14px;line-height:1.35}
.card-prev{
  font-size:12.5px;color:var(--muted);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.pills{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.pill{
  font-size:10.5px;padding:2px 7px;border-radius:99px;background:var(--surface-2);
  color:var(--ink-2);border:1px solid var(--rule);white-space:nowrap;
}
.pill.topic{background:transparent;border-color:var(--navy-3);color:var(--navy)}
.pill.firm{background:var(--bid-soft);border-color:transparent;color:var(--bid);font-weight:500}
.pill.ans{background:var(--bid-soft);border-color:transparent;color:var(--bid)}
.pill.locked{background:var(--surface-2);color:var(--faint);border-style:dashed}
.pill.gen{background:var(--navy);border-color:transparent;color:#fff}
.pill.ref{background:var(--accent-soft);border-color:transparent;color:var(--accent);font-weight:500}
.pill.diff-easy{color:var(--bid)}
.pill.diff-medium{color:var(--navy)}
.pill.diff-hard{color:var(--accent);border-color:var(--accent)}
.origin-tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.4px;text-transform:uppercase;
  padding:2px 6px;border-radius:5px;background:var(--navy);color:#fff;
}
.origin-tag.reference{background:var(--accent)}

.loadmore-wrap{display:flex;justify-content:center;padding:22px 0}
.btn{
  padding:8px 16px;border-radius:9px;border:1px solid var(--rule);
  background:var(--surface);color:var(--ink);cursor:pointer;font-weight:500;
}
.btn:hover{border-color:var(--rule-strong)}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.small{padding:5px 11px;font-size:12.5px}
.empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--muted)}
.empty h3{margin:0 0 6px;color:var(--ink)}
.spinner{
  grid-column:1/-1;justify-self:center;width:26px;height:26px;margin:50px auto;
  border:2.5px solid var(--rule);border-top-color:var(--navy);border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- drawer ---------- */
.drawer-scrim{
  position:fixed;inset:0;background:rgba(14,26,43,.42);opacity:0;
  pointer-events:none;transition:opacity .18s;z-index:50;
}
.drawer-scrim.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(620px,92vw);background:var(--surface);
  border-left:1px solid var(--rule);transform:translateX(100%);transition:transform .2s;
  z-index:51;overflow-y:auto;padding:22px;
}
.drawer.open{transform:none}
.dhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.dhead h2{margin:0;font-size:18px}
.dsection{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule)}
.dsection:first-of-type{border-top:0}
.dsection h4{
  margin:0 0 8px;font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--faint);
}
/* Bodies are rendered markdown now, not preformatted text, so pre-wrap would
   double every blank line the <p> already provides. */
.dbody{white-space:normal;line-height:1.65;font-size:13.5px}
.dbody.mono{font-family:var(--mono);font-size:12.5px}
.dbody p{margin:0 0 10px}
.dbody p:last-child{margin-bottom:0}
.dbody h3,.dbody h4,.dbody h5,.dbody h6{
  margin:16px 0 6px;font-size:13.5px;font-weight:600;color:var(--ink);
  text-transform:none;letter-spacing:0;
}
.dbody ul,.dbody ol{margin:0 0 10px;padding-left:20px}
.dbody li{margin-bottom:4px}
.dbody blockquote{
  margin:0 0 10px;padding-left:12px;border-left:3px solid var(--rule-strong);color:var(--ink-2);
}
.dbody hr{border:0;border-top:1px solid var(--rule);margin:14px 0}
.dbody code,.card-prev code,.hint-list code{
  font-family:var(--mono);font-size:.92em;background:var(--surface-2);
  padding:1px 5px;border-radius:5px;border:1px solid var(--rule);
}

/* ---------- code cards ----------
   Verbatim source: never rendered through markdown, and named in KaTeX's
   ignoredClasses so a stray backslash in C++ is never read as maths. */
.code-card{
  position:relative;margin:0 0 12px;border:1px solid var(--rule);
  border-radius:10px;background:var(--surface-2);overflow:hidden;
}
.code-card pre{margin:0;padding:12px 13px;overflow-x:auto}
.code-card code{
  font-family:var(--mono);font-size:12.5px;line-height:1.55;background:none;
  border:0;padding:0;white-space:pre;color:var(--ink);
}
.code-lang{
  position:absolute;top:0;right:0;font-family:var(--mono);font-size:10px;
  letter-spacing:.5px;text-transform:uppercase;color:var(--faint);
  background:var(--surface);border-left:1px solid var(--rule);
  border-bottom:1px solid var(--rule);border-radius:0 9px 0 8px;padding:2px 8px;
}
.copy-btn{
  position:absolute;top:5px;right:8px;z-index:2;opacity:0;transition:opacity .12s;
  border:1px solid var(--rule);background:var(--surface);color:var(--ink-2);
  border-radius:6px;padding:2px 8px;font-size:11px;cursor:pointer;
}
.code-card:hover .copy-btn,.copy-btn:focus{opacity:1}
.code-card:hover .code-lang{opacity:0}

/* ---------- coding-problem sections ---------- */
/* the two one-off notes are load-bearing rules, so they get the accent */
.dsection.sec-note>h4{color:var(--accent)}
.sec-caption{margin:0 0 8px;font-size:11.5px;color:var(--muted)}
.dsection.sec-statement{border-top:0}

/* ---------- KaTeX ----------
   Display maths can be wider than the drawer; it scrolls inside its own box
   rather than pushing the page sideways. */
.katex{font-size:1.02em}
.katex-display{margin:12px 0;overflow-x:auto;overflow-y:hidden;padding:2px 0}
/* a card preview is one clamped line: keep everything inline */
.card-prev p{display:inline;margin:0}
.card-prev .katex-display{display:inline;margin:0}
.card-prev .code-card{display:inline;border:0;background:none;padding:0}
.card-prev .code-card pre{display:inline;padding:0}
.answer-box{
  background:var(--bid-soft);border-radius:9px;padding:11px 13px;
  font-family:var(--mono);font-size:14px;color:var(--bid);font-weight:600;
}
.hint-list{margin:0;padding-left:20px;font-size:13px;color:var(--ink-2)}
.hint-list li{margin-bottom:6px}
.notice{
  border-left:3px solid var(--accent);background:var(--accent-soft);
  padding:9px 12px;border-radius:0 8px 8px 0;font-size:12.5px;color:var(--ink-2);
}
.notice.calm{border-left-color:var(--navy);background:var(--surface-2)}

/* ---------- modal ---------- */
.modal-scrim{
  position:fixed;inset:0;background:rgba(14,26,43,.5);display:none;
  place-items:center;z-index:60;padding:20px;
}
.modal-scrim.open{display:grid}
.modal{
  background:var(--surface);border-radius:14px;padding:24px;
  width:min(620px,94vw);max-height:86vh;overflow-y:auto;box-shadow:var(--shadow);
}

/* ---------- pages (firms / drills / practice / owner) ---------- */
.page h2{margin:0 0 4px;font-size:20px}
.page .lede{margin:0 0 20px;color:var(--muted);font-size:13px}
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:11px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--rule);white-space:nowrap}
th{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--faint);
  font-weight:600;background:var(--surface-2);
}
tbody tr:last-child td{border-bottom:0}
td.num{font-family:var(--mono);text-align:right}
td.clock{font-family:var(--mono);text-align:right;color:var(--accent);font-weight:600}

.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:13px}
.tile{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:15px}
.tile h3{margin:0 0 3px;font-size:14.5px}
.tile .sub{font-size:11.5px;color:var(--muted)}
.tile .big{font-family:var(--mono);font-size:26px;font-weight:600;color:var(--navy);line-height:1.1;margin:8px 0 2px}
.tile.clockish .big{color:var(--accent)}

/* ---------- firms tab ---------- */
.firm-controls{display:flex;gap:10px;align-items:center;margin:0 0 16px;flex-wrap:wrap}
.firm-controls input,.firm-controls select{
  padding:7px 10px;border:1px solid var(--rule);border-radius:8px;
  background:var(--surface);color:var(--ink);font-size:13px;font-family:inherit;
}
.firm-controls input{flex:1 1 240px;max-width:340px}
.firm-count{font-size:12px;color:var(--muted);margin-left:auto;font-family:var(--mono)}
.firm-tile{cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s}
.firm-tile:hover,.firm-tile:focus{
  border-color:var(--navy-3);box-shadow:var(--shadow);transform:translateY(-1px);outline:none;
}
.firm-tile-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.firm-tile-head h3{margin:0;font-size:14.5px;line-height:1.3}
.firm-clock{
  font-family:var(--mono);font-size:17px;font-weight:600;color:var(--accent);
  line-height:1;text-align:right;flex:0 0 auto;
}
.firm-clock span{display:block;font-size:9px;letter-spacing:.4px;color:var(--faint);font-weight:400}
.firm-nums{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin:8px 0 6px}
.firm-nums b{font-family:var(--mono);color:var(--navy);font-size:13px}
.firm-foot{margin-top:18px;font-size:11.5px}

.firm-detail:empty{display:none}
.firm-detail{
  margin-top:24px;padding-top:20px;border-top:2px solid var(--rule-strong);
}
.firm-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.firm-detail-actions{display:flex;gap:8px;align-items:center}
.firm-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;margin-top:16px}
.firm-col h4{
  margin:18px 0 8px;font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--faint);
}
.firm-col h4:first-child{margin-top:0}
.firm-col .tile .unit{font-size:12px;color:var(--faint);margin-left:3px;font-family:var(--sans)}
.muted{color:var(--muted)}
.barcell{width:45%;padding-right:0}
.bar{background:var(--surface-2);border-radius:99px;height:7px;overflow:hidden;min-width:60px}
.bar-fill{height:100%;background:var(--navy-2);border-radius:99px}
.bar-fill.d-easy{background:var(--bid)}
.bar-fill.d-medium{background:var(--navy-2)}
.bar-fill.d-hard{background:var(--accent)}
@media (max-width:820px){ .firm-grid{grid-template-columns:1fr} }

@media (max-width:900px){
  .sidebar{position:static;width:100%;flex:1 1 100%;max-height:none;border-right:0;border-bottom:1px solid var(--rule)}
  .body{flex-direction:column}
  .searchwrap{order:5;max-width:none}
  .topbar{gap:12px}
  .statchips{display:none}
}

/* ---------------------------------------------------------------------------
   PHASE 5 — the sitting runner, drills, practice.
   The scarlet --accent stays reserved for time pressure (§10): it is the drill
   clock and the over-budget pace, and nothing else in here uses it.
   --------------------------------------------------------------------------- */

.runner{
  position:fixed;inset:0;z-index:60;background:var(--ground);
  display:none;flex-direction:column;
}
.runner.open{display:flex}
body.runner-open{overflow:hidden}

.run-bar{
  display:flex;align-items:center;gap:16px;padding:12px 20px;
  border-bottom:1px solid var(--rule);background:var(--surface);flex-wrap:wrap;
}
.run-meta{display:flex;align-items:center;gap:10px;min-width:0}
.run-meta strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw}
.run-count{font-family:var(--mono);font-size:12px;color:var(--muted)}
.pill.drill-pill{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.run-clock{
  font-family:var(--mono);font-size:26px;font-weight:600;color:var(--ink);
  margin-inline:auto;font-variant-numeric:tabular-nums;letter-spacing:1px;
}
.run-clock.urgent{color:var(--accent);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
.run-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.run-answered{font-size:11.5px;color:var(--muted);font-family:var(--mono)}

.run-progress{height:3px;background:var(--surface-2)}
.run-progress i{display:block;height:100%;background:var(--navy-2);transition:width .2s}

.run-body{flex:1;overflow-y:auto;padding:28px 20px 40px}
.run-card{max-width:760px;margin:0 auto}
.run-title{font-size:19px;margin:10px 0 4px}
.run-stem{font-size:15px;line-height:1.65;margin:14px 0 22px}

.run-choices{display:flex;flex-direction:column;gap:9px;margin:18px 0}
.run-choice{
  display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;
  padding:13px 15px;border:1px solid var(--rule);border-radius:11px;
  background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;
  transition:border-color .12s,background .12s;
}
.run-choice:hover{border-color:var(--navy-3)}
.run-choice.on{border-color:var(--navy);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--navy)}
.run-letter{
  font-family:var(--mono);font-weight:600;color:var(--navy);
  width:22px;flex:0 0 22px;text-align:center;
}
.run-choice.on .run-letter{color:var(--navy)}
.run-choice-text{flex:1;min-width:0}

.run-entry{margin:20px 0;max-width:420px}
.run-entry label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--faint);margin-bottom:6px}
.run-entry input{
  width:100%;padding:11px 13px;border:1px solid var(--rule-strong);border-radius:9px;
  background:var(--surface);color:var(--ink);font-family:var(--mono);font-size:16px;
}
.run-entry input:focus{outline:2px solid var(--navy-3);outline-offset:1px;border-color:var(--navy)}
.run-hint-note{font-size:11.5px;color:var(--faint);margin:7px 0 0}

.run-hints{margin-top:20px;border-top:1px solid var(--rule);padding-top:14px}
.run-hints summary{cursor:pointer;font-size:12.5px;color:var(--navy-2);font-weight:500}
.run-hints ol{margin-top:10px}

.run-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;border-top:1px solid var(--rule);background:var(--surface);
}
.run-note{font-size:11.5px;color:var(--faint)}

/* ---- report ---- */
.run-body.report{max-width:900px;margin:0 auto;width:100%}
.report-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px;margin-bottom:26px}
.report-tiles .unit{font-size:14px;color:var(--faint);margin-left:2px;font-family:var(--sans)}
.report-tiles .sub.over{color:var(--accent);font-weight:500}
.report-tiles .sub.under{color:var(--bid);font-weight:500}
.report-h{
  margin:26px 0 10px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.8px;color:var(--faint);
}
.review-list{display:flex;flex-direction:column;gap:8px}
.review-card{border:1px solid var(--rule);border-radius:11px;background:var(--surface);overflow:hidden}
.review-card.wrong{border-left:3px solid var(--accent)}
.review-card summary{
  display:flex;align-items:center;gap:12px;padding:12px 15px;cursor:pointer;font-size:13px;
}
.review-card summary::-webkit-details-marker{display:none}
/* NOT `.mark` — that is the header brand logo (a 42px navy square). A class
   collision here rendered every result glyph as a white-on-navy block. */
.review-mark{font-family:var(--mono);font-weight:700;width:18px;flex:0 0 18px;
  text-align:center;font-size:15px;line-height:1}
.review-mark.ok{color:var(--bid)} .review-mark.bad{color:var(--accent)}
.review-mark.unk{color:var(--faint)}
/* the default disclosure triangle would sit beside our own glyph */
.review-card summary{list-style:none}
.review-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.review-mine{color:var(--muted);font-size:12px;white-space:nowrap}
.review-mine b{font-family:var(--mono);color:var(--ink)}
.review-secs{font-family:var(--mono);font-size:11.5px;color:var(--faint);width:44px;text-align:right}
.review-body{padding:2px 15px 16px;border-top:1px solid var(--rule)}
.review-body h4{
  margin:16px 0 7px;font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--faint);
}
.selfgrade{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--muted)}

/* ---- drills tab ---- */
.drill-headline{display:flex;gap:20px;align-items:center;margin:0 0 24px;flex-wrap:wrap}
.drill-headline .tile{flex:0 0 220px}
.drill-headline-note{flex:1 1 320px;font-size:13.5px;color:var(--ink-2);line-height:1.65;margin:0}
.drill-tile{display:flex;flex-direction:column}
.drill-tile .sub{min-height:2.6em}
.drill-go{margin-top:auto;align-self:flex-start}
.band-tag{font-size:10.5px;color:var(--faint)}
.drill-tile.band-fast .firm-clock{color:var(--accent)}
.drill-tile.band-mid .firm-clock{color:var(--navy)}
.drill-tile.band-slow .firm-clock{color:var(--bid)}

/* ---- practice tab ---- */
.assemble{
  border:1px solid var(--rule);border-radius:12px;background:var(--surface);
  padding:16px 18px;margin-bottom:10px;
}
.assemble-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.assemble-row label{display:flex;flex-direction:column;gap:5px;font-size:11px;
  text-transform:uppercase;letter-spacing:.7px;color:var(--faint)}
.assemble-row select{
  padding:8px 10px;border:1px solid var(--rule-strong);border-radius:8px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:13px;min-width:130px;
}
.assemble-note{font-size:12px;color:var(--muted);margin:12px 0 0}
.assemble-note .warn{color:var(--accent)}

@media (max-width:700px){
  .run-clock{order:3;width:100%;text-align:center;margin:4px 0 0}
  .run-meta strong{max-width:55vw}
  .run-body{padding:20px 14px 32px}
  .drill-headline .tile{flex:1 1 100%}
}

/* Studio review queue. The judge's reason is the POINT of this table — it is
   what tells Charles why an item was held back — so it wraps instead of being
   clipped at the table edge, and the row is clickable to open the item. */
.review-row{cursor:pointer}
.review-row:hover{background:var(--surface-2)}
.review-row td.muted.small{white-space:normal;max-width:520px;line-height:1.45}

/* Journeys (Phase 6) */
.journey-card{cursor:pointer}
.journey-card:hover{border-color:var(--navy-2)}
.journey-step{margin-bottom:18px}
.steptick{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap}
.steptick input{width:16px;height:16px;accent-color:var(--navy-2);cursor:pointer}
.term-chip{cursor:pointer;border:1px solid var(--rule);background:var(--surface)}
.term-chip:hover{border-color:var(--navy-2)}

/* ══════════════════════════════════════════════════════════════════════════
   GOLD LININGS & TEXTURE — ported from the flagship (Charles, 2026-09-13)
   Every treatment below is the teaching platform's own, copied rather than
   approximated. See the header comment for the token mapping and for the one
   deliberate exception (the drill clock stays scarlet).
   ══════════════════════════════════════════════════════════════════════════ */

/* The texture: two radial washes on a fixed attachment, so the page floats over
   them instead of dragging them along as it scrolls. */
body{
  background-image:var(--bg-grad);
  background-attachment:fixed;
}

/* The gold hairline under the top bar, and the flagship's frosted-glass bar. */
.topbar{
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 1px 0 color-mix(in srgb, var(--gold) 12%, transparent);
}

/* The logo gets a gold-mixed rim and the flagship's lift-on-hover. */
.logo{
  width:42px;height:42px;border-radius:12px;object-fit:cover;display:block;
  flex:0 0 auto;
  border:1.5px solid color-mix(in srgb, var(--gold) 40%, var(--rule));
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
.logo:hover{transform:scale(1.06) rotate(-1.5deg)}

/* Gradient text on the wordmark and on every stat number. */
.brand-text h1{
  background:linear-gradient(100deg, var(--ink) 30%, var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.statchip b{
  background:linear-gradient(120deg, var(--ink), var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Primary actions and the active tab: a gold gradient with the inset highlight
   that gives the flagship's buttons their lit top edge. */
.btn.primary{
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--gold-strong) 92%, #fff) 0%, var(--gold-strong) 70%);
  border-color:var(--gold-strong);color:#fff;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn.primary:hover{filter:brightness(1.06)}
.tab.active{
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--gold-strong) 88%, #fff), var(--gold-strong));
  color:#fff;box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn:hover{border-color:var(--gold);color:var(--gold)}
.btn.primary:hover{color:#fff}

/* Gold focus rings, gold active facets — the flagship's interaction colour. */
#search:focus,.filter select:focus,.f-field input:focus,.f-field select:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gold-soft);
}
.filter select.active{border-color:var(--gold);background:var(--gold-soft);font-weight:600}
.active-chip{background:var(--gold-soft);color:var(--gold);font-weight:600}
.icon-btn:hover{color:var(--gold);border-color:var(--gold)}
.spinner{border-top-color:var(--gold)}
.journey-card:hover,.firm-tile:hover,.term-chip:hover{border-color:var(--gold)}

/* The one thing that must NOT turn gold: the drill clock. Scarlet means time
   pressure here and that meaning is already established (ONBOARDING §10). */
.clock,.tile.clockish .big{color:var(--accent)}

/* Language selector — three scripts, labelled in their own script. */
.lang-select{
  height:32px;border-radius:8px;border:1px solid var(--rule);
  background:var(--surface);color:var(--ink-2);font-family:inherit;font-size:12.5px;
  padding:0 6px;cursor:pointer;
}
.lang-select:hover{border-color:var(--gold);color:var(--gold)}
.lang-select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}

/* ---- the viewer's mark (kernel.marks; render.js withMark) ---------------------------------------------------------
   Whose view this is, as part of the page: the viewer's name and a short code, quiet enough to read as "this is your
   copy", present enough to be in any capture of the question. WHERE it sits is chosen by the server for every view
   (six slots, three tones, eight shifts) and written down with the view, so nothing here is random and nothing is an
   inline style. Slots 0,1,2 sit above the question (left, centre, right), 3,4,5 below it; all in the flow of the page,
   so the mark is always inside the question's own box and never over its text. */
.ws-wrap{position:relative}
.ws-row{display:flex;min-height:14px}
.ws-slot-0 .ws-row,.ws-slot-1 .ws-row,.ws-slot-2 .ws-row{margin:0 0 4px}
.ws-slot-3 .ws-row,.ws-slot-4 .ws-row,.ws-slot-5 .ws-row{margin:6px 0 0}
.ws-slot-1 .ws-row,.ws-slot-4 .ws-row{justify-content:center}
.ws-slot-2 .ws-row,.ws-slot-5 .ws-row{justify-content:flex-end}
.ws-mark{font-family:var(--mono);font-size:10.5px;line-height:14px;letter-spacing:.05em;color:var(--muted);white-space:nowrap}
.ws-mark .ws-code{font-weight:600}
.ws-tone-0{opacity:.42}.ws-tone-1{opacity:.56}.ws-tone-2{opacity:.7}
/* the shift moves the mark along its line, away from the edge it is aligned to (to either side of the middle for the centre) */
.ws-slot-0 .ws-shift-1,.ws-slot-3 .ws-shift-1{margin-left:8px}.ws-slot-0 .ws-shift-2,.ws-slot-3 .ws-shift-2{margin-left:16px}
.ws-slot-0 .ws-shift-3,.ws-slot-3 .ws-shift-3{margin-left:24px}.ws-slot-0 .ws-shift-4,.ws-slot-3 .ws-shift-4{margin-left:32px}
.ws-slot-0 .ws-shift-5,.ws-slot-3 .ws-shift-5{margin-left:40px}.ws-slot-0 .ws-shift-6,.ws-slot-3 .ws-shift-6{margin-left:48px}
.ws-slot-0 .ws-shift-7,.ws-slot-3 .ws-shift-7{margin-left:56px}
.ws-slot-2 .ws-shift-1,.ws-slot-5 .ws-shift-1{margin-right:8px}.ws-slot-2 .ws-shift-2,.ws-slot-5 .ws-shift-2{margin-right:16px}
.ws-slot-2 .ws-shift-3,.ws-slot-5 .ws-shift-3{margin-right:24px}.ws-slot-2 .ws-shift-4,.ws-slot-5 .ws-shift-4{margin-right:32px}
.ws-slot-2 .ws-shift-5,.ws-slot-5 .ws-shift-5{margin-right:40px}.ws-slot-2 .ws-shift-6,.ws-slot-5 .ws-shift-6{margin-right:48px}
.ws-slot-2 .ws-shift-7,.ws-slot-5 .ws-shift-7{margin-right:56px}
.ws-slot-1 .ws-shift-1,.ws-slot-4 .ws-shift-1{margin-left:16px}.ws-slot-1 .ws-shift-2,.ws-slot-4 .ws-shift-2{margin-right:16px}
.ws-slot-1 .ws-shift-3,.ws-slot-4 .ws-shift-3{margin-left:32px}.ws-slot-1 .ws-shift-4,.ws-slot-4 .ws-shift-4{margin-right:32px}
.ws-slot-1 .ws-shift-5,.ws-slot-4 .ws-shift-5{margin-left:48px}.ws-slot-1 .ws-shift-6,.ws-slot-4 .ws-shift-6{margin-right:48px}
.ws-slot-1 .ws-shift-7,.ws-slot-4 .ws-shift-7{margin-left:64px}
@media print{.ws-mark{opacity:.8}}

/* Study desk composition. Existing IDs, state classes and role gates are retained. */
:root{--action-bg:#204B61;--action-ink:#fff;--display:Georgia,"Songti SC","Noto Serif CJK SC",serif}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--action-bg:#e6b569;--action-ink:#19160f;--faint:#a59d8d}}
:root[data-theme="dark"]{--action-bg:#e6b569;--action-ink:#19160f;--faint:#a59d8d}
html{scroll-padding-top:150px}
.skip-link{position:fixed;left:20px;top:-80px;z-index:100;background:var(--action-bg);color:var(--action-ink);padding:12px 18px;border-radius:6px}
.skip-link:focus{top:12px}
:where(a,button,input,select,summary,[tabindex]):focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.topbar{display:grid;grid-template-columns:minmax(270px,1fr) minmax(240px,420px) 1fr;gap:0 28px;padding:20px 36px 0;background:var(--surface);backdrop-filter:none;box-shadow:none}
.brand{grid-column:1;grid-row:1}
.brand-text h1{font-size:17px;letter-spacing:-.3px;background:none;color:var(--ink)}
.brand-text .brand-zh{font-size:11px;letter-spacing:1.2px;margin-top:4px}
.brand-text .brand-powered{margin-top:4px;font-size:9px;line-height:1.2;letter-spacing:.35px;color:var(--muted);white-space:nowrap}
.brand-text .brand-powered strong{font-weight:600;color:var(--ink-2);letter-spacing:.55px}
.brand-text .brand-tag{display:none}
.logo{width:40px;height:40px;border:1px solid var(--rule);border-radius:8px;box-shadow:none}
.logo:hover{transform:none}
.searchwrap{grid-column:2;grid-row:1;width:100%;max-width:none;min-width:0}
#search{padding:12px 14px 12px 38px;background:var(--ground);border-radius:6px;font-size:13px}
.search-ic{left:13px}
.topactions{grid-column:3;grid-row:1;gap:8px}
.statchips{gap:16px;margin-right:10px}
.statchip b{font-size:17px;background:none;color:var(--ink)}
.statchip span{font-size:10px;letter-spacing:.5px}
.icon-btn{width:36px;height:36px;border-radius:6px;background:transparent}
.tabs{grid-column:1/-1;grid-row:2;gap:30px;border-radius:0;padding:17px 0 0;margin-top:6px;background:transparent;overflow-x:auto;min-width:0}
.tab,.tablink{display:inline-flex;align-items:center;gap:8px;padding:12px 0 14px;border-radius:0;border-bottom:2px solid transparent;font-size:13px;letter-spacing:.15px}
.tab.active{color:var(--ink);background:transparent;box-shadow:none;border-color:var(--navy);font-weight:650}
.tab:hover,.tablink:hover{color:var(--navy);border-bottom-color:var(--rule-strong)}
.app>.view{width:100%;max-width:1600px;margin:0 auto}
.body{align-items:flex-start;padding:28px 36px 40px;gap:32px}
.sidebar{flex:0 0 226px;width:226px;top:151px;max-height:calc(100vh - 174px);padding:4px 24px 24px 0;background:transparent;border-right:1px solid var(--rule)}
.filters-head{font-size:12px;letter-spacing:.5px;color:var(--ink);margin:4px 0 22px}
.link-btn{font-size:12px;padding:4px 0;min-height:28px}
.filter-group{font-size:10px;letter-spacing:1.2px;margin-top:22px;padding-top:20px;color:var(--ink-2)}
.filter{margin:12px 0}
.filter label{font-size:12px;margin-bottom:7px;color:var(--ink-2)}
.filter select{padding:9px 10px;border-radius:5px;background:var(--surface);font-size:13px}
.toggles{gap:12px;padding-top:18px;margin-top:22px}
.side-note{font-size:12px;line-height:1.75;margin-top:24px}
.content{padding:0;min-width:0}
.content.page{max-width:1240px;padding:36px;margin:0 auto;width:100%}
.workspace-intro{display:grid;grid-template-columns:minmax(0,1fr) 196px;align-items:center;gap:28px;padding:32px 36px;margin-bottom:28px;position:relative;isolation:isolate;border:1px solid var(--rule);border-radius:10px;background:var(--surface);box-shadow:0 2px 6px -4px color-mix(in srgb,var(--ink) 12%,transparent)}
.workspace-kicker{font-family:var(--mono);font-size:10px;letter-spacing:1.7px;color:var(--muted);margin:0 0 14px}
.workspace-intro h2{font-family:var(--display);font-size:clamp(30px,2.8vw,42px);font-weight:400;letter-spacing:-.8px;line-height:1.28;margin:0 0 12px;color:var(--ink);text-wrap:balance}
.workspace-note{font-size:13px;line-height:1.75;color:var(--muted);margin:0}
.workspace-link{margin-top:20px;display:inline-flex;align-items:center;gap:16px;color:var(--navy);font-size:12px;white-space:nowrap;text-decoration:none;border-bottom:1px solid var(--navy-3);padding:9px 0}
.content-head{margin-bottom:20px;min-height:34px}
.result-info strong{font-family:var(--mono);font-size:16px;letter-spacing:-.4px}
.sortwrap select{padding:8px 10px;border-radius:5px}
.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:16px}
.card{border-radius:8px;padding:23px 22px 18px;gap:14px;min-height:210px;box-shadow:0 2px 4px -3px color-mix(in srgb,var(--ink) 14%,transparent)}
.card:hover{border-color:var(--navy-3);box-shadow:0 4px 16px -12px var(--ink);transform:translateY(-2px)}
.card-title{font-size:16px;font-weight:600;line-height:1.55;letter-spacing:-.15px}
.card-prev{font-size:13px;line-height:1.75;-webkit-line-clamp:3}
.pills{gap:6px;padding-top:8px}
.pill{font-size:10.5px;border-radius:4px;padding:3px 7px}
.origin-tag{font-size:9px;letter-spacing:.6px;border-radius:3px;padding:3px 6px}
.btn{padding:10px 18px;border-radius:5px;min-height:38px}
.btn.primary{background:var(--action-bg);border-color:var(--action-bg);color:var(--action-ink);box-shadow:none}
.btn.primary:hover{filter:brightness(1.08)}
.drawer{width:min(760px,100vw);padding:32px 36px}
.dhead h2{font-family:var(--display);font-size:26px;font-weight:400;line-height:1.35}
.dbody{font-size:15px;line-height:1.85}
.dsection h4{font-size:11px;letter-spacing:1px;color:var(--muted)}
.appfoot{background:transparent;font-size:12px;padding:22px}
/* Brackets, hairlines and measured geometry form the release's signature. */
.nav-index{font:9px var(--mono);letter-spacing:.3px;color:var(--faint)}
.tab.active .nav-index{color:var(--gold)}
.topbar::before{content:"";height:3px;position:absolute;inset:0 0 auto;background:linear-gradient(90deg,var(--navy) 0 72%,var(--gold) 72% 76%,var(--rule) 76%)}
.topactions .icon-btn,.lang-select{transition:background .16s,border-color .16s}
.topactions .icon-btn:hover{background:var(--surface-2)}
.statchip{border-left:1px solid var(--rule);padding-left:15px}
.workspace-copy{position:relative;z-index:1;min-width:0}
.workspace-kicker{display:flex;align-items:center;gap:10px;line-height:1.6}
.workspace-kicker::before{content:"";width:5px;height:5px;background:var(--gold);flex:none}
.workspace-intro h2{max-width:22ch}
.workspace-intro::before,.workspace-intro::after{content:"";position:absolute;width:12px;height:12px;border-color:var(--navy-3);pointer-events:none}
.workspace-intro::before{top:9px;left:9px;border-left:1px solid;border-top:1px solid}
.workspace-intro::after{bottom:9px;right:9px;border-right:1px solid;border-bottom:1px solid}
.workspace-link{font-weight:500;font-size:12px;letter-spacing:.1px;border:0;gap:12px;padding:0}
.workspace-link>span:last-child{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--rule);border-radius:50%;transition:background .16s,transform .16s}
.workspace-link:hover>span:last-child{background:var(--surface-2);transform:translate(1px,-1px)}
.workspace-figure{width:100%;max-width:220px;justify-self:end;pointer-events:none}
.figure-grid{stroke:var(--rule);stroke-width:.6;opacity:.55}
.figure-orbits{stroke:var(--navy-3);stroke-width:1}
.figure-brackets{stroke:var(--navy);stroke-width:2}
.figure-axis{stroke:var(--navy-3);stroke-width:.7;stroke-dasharray:2 5}
.figure-point{fill:var(--gold)}.figure-node{fill:var(--surface);stroke:var(--navy);stroke-width:1.5}
.filters-summary{display:none}
.filters-head>span{font-weight:600;letter-spacing:1px}
.filter select,.sortwrap select{box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 3%,transparent)}
.filter select:focus-visible,.sortwrap select:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
#grid>.card{position:relative;overflow:hidden;transition:background .16s,border-color .16s,box-shadow .16s,transform .16s}
#grid>.card::after{content:"";position:absolute;top:10px;right:10px;width:7px;height:7px;border-top:1px solid var(--rule-strong);border-right:1px solid var(--rule-strong);transition:border-color .16s}
#grid>.card:hover::after{border-color:var(--gold)}
#grid>.card .pills{border-top:1px solid var(--rule);padding-top:14px;margin-top:auto}
#grid>.card .pill.topic{border:0;background:var(--surface-2);font-size:10px;letter-spacing:.3px}
#grid>.card .pill.firm{background:transparent;color:var(--ink-2);padding-left:0}
.card-topline{min-height:20px}.card-prev{flex:1}
.dhead{border-bottom:1px solid var(--rule);padding-bottom:24px;margin-bottom:24px}
.dhead h2{font-size:30px;letter-spacing:-.5px;max-width:22ch}
.drawer{border-top:3px solid var(--navy);box-shadow:none}
.drawer.open{box-shadow:-12px 0 56px -36px var(--ink)}
.appfoot{font-family:var(--mono);font-size:10px;letter-spacing:.4px}
.company-signature{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--rule);font-family:var(--sans)}
.company-signature span{font-size:10px;color:var(--muted)}
.company-signature strong{font-size:11px;font-weight:500;letter-spacing:.6px;color:var(--muted)}
.appfoot{flex-wrap:wrap}.appfoot .company-signature{flex-basis:100%;justify-content:center;margin:0;padding-top:6px;border:0}
@media(max-width:1200px){
  .topbar{grid-template-columns:minmax(270px,1fr) minmax(200px,1fr);padding:18px 24px 0}
  .searchwrap{grid-column:1;grid-row:3;margin:15px 0;max-width:500px}
  .topactions{grid-column:2;grid-row:1}
  .tabs{grid-row:2;gap:24px}
  .body{padding:24px;gap:24px}
  .sidebar{top:208px;max-height:calc(100vh - 228px)}
  .workspace-intro{grid-template-columns:minmax(0,1fr) 136px;gap:16px;padding:28px}
}
@media(max-width:900px){
  .topbar{position:relative;grid-template-columns:1fr auto;padding:16px 20px 0;gap:0 12px}
  .topactions{gap:6px}.statchips{display:none}
  .brand-text h1{font-size:15px}.brand-text .brand-zh{font-size:10px}.logo{width:34px;height:34px}
  .searchwrap{grid-column:1/-1;max-width:none}.tabs{gap:24px;margin-top:4px}
  .body{flex-direction:column;padding:24px 20px;gap:24px}
  .sidebar{position:static;flex:auto;width:100%;max-height:none;border:1px solid var(--rule);border-radius:7px;background:var(--surface);padding:0}
  .filters-summary{display:flex;align-items:center;gap:12px;min-height:50px;padding:13px 16px;cursor:pointer;font-size:12px;color:var(--ink);list-style:none}
  .filters-summary::-webkit-details-marker{display:none}
  .filter-hint{font-size:11px;color:var(--muted);margin-left:auto}
  .filters-summary svg{transition:transform .16s}.filter-panel[open] .filters-summary svg{transform:rotate(180deg)}
  .filter-panel[open] .filters-summary{border-bottom:1px solid var(--rule);margin-bottom:14px}
  .filter-panel>.filters-head{padding:0 16px}.filter-panel>.filters-head>span{visibility:hidden}
  .filter-panel>.filter-list{padding:0 16px}.filter-panel>.toggles{margin:18px 16px}
  .filter-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 14px}
  .filter-group{grid-column:1/-1;margin:4px 0;padding-top:14px}.filter{margin:0}.filters-head{margin-bottom:8px}
  .toggles{display:flex;flex-wrap:wrap;border-top:0;padding:0;margin-top:18px}.side-note{display:none}
  .workspace-intro{padding:28px;grid-template-columns:minmax(0,1fr) 156px}.workspace-intro h2{font-size:34px}
  .content{width:100%}.content.page{padding:24px 20px}
}
@media(max-width:540px){
  .topbar{padding:18px 16px 0;grid-template-columns:1fr}
  .brand{grid-column:1;grid-row:1}.topactions{grid-column:1;grid-row:2;justify-self:start;margin:14px 0 0;gap:8px}
  .icon-btn{width:40px;height:40px}.lang-select{min-height:40px}
  .nav-index{display:none}
  .tabs{grid-row:3;font-size:12px;gap:24px;padding-top:8px}.searchwrap{grid-row:4}
  .brand-text h1{font-size:17px}.brand-text .brand-zh{font-size:11px}.logo{width:38px;height:38px}
  .body{padding:20px 16px;gap:18px}.filter-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workspace-intro{display:block;padding:26px 22px}.workspace-intro h2{font-size:32px;letter-spacing:-.7px;max-width:15ch}.workspace-figure{display:none}.workspace-kicker{font-size:9px;letter-spacing:1px}
  .card{padding:22px 20px 18px;min-height:190px}.grid{gap:12px}.drawer{padding:24px 20px}
  .content.page{padding:24px 16px}.dbody{font-size:14px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}

/* Front door integration: the same desk, with explicit visitor and member states. */
.front-link{color:var(--navy)!important}.visit-strip{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:11px 30px;background:var(--action-bg);color:var(--action-ink);font-size:11px}.visit-strip>div{display:flex;align-items:center;gap:13px}.visit-strip strong{font-weight:500}.visit-strip a{color:inherit;text-underline-offset:3px}.visit-dot{width:5px;height:5px;background:#d4b77d;border-radius:50%}#visitClock{opacity:.8;font-family:var(--mono);font-size:10px}#visitClock.low{color:#f0c987;opacity:1}.visit-intro{padding:14px 30px;border-bottom:1px solid var(--rule);color:var(--muted);font-size:11px;display:flex;gap:15px;justify-content:space-between;align-items:flex-start}.visit-intro>p{margin:0}.visit-privacy{max-width:650px;font-size:10px}.visit-privacy summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px}.visit-privacy[open]{flex:1}.visit-notice-lang p{line-height:1.85}.is-visitor .workspace-intro{padding-top:23px}.is-visitor .workspace-figure{max-width:155px}.is-visitor .workspace-copy h2{font-size:34px}.shelves-heading{margin:45px 0 23px;border-top:1px solid var(--rule);padding-top:32px}.shelves-heading h2{font:30px/1.3 var(--display);margin:8px 0}.shelves-heading>p:last-child{font-size:11px;color:var(--muted)}.shelf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.shelf-card{display:block;text-decoration:none;width:100%;text-align:left;border:1px solid var(--rule);border-radius:5px;padding:23px;background:var(--surface);color:var(--ink);cursor:pointer;font-family:var(--sans);transition:border-color .15s,background .15s}.shelf-card:hover{border-color:var(--navy-2);background:var(--surface-2)}.shelf-lock{font:9px var(--mono);color:var(--muted);display:flex;align-items:center;justify-content:space-between}.shelf-card h3{font-size:19px;font-weight:500;margin:18px 0 8px}.shelf-card>p{font:12px var(--mono);color:var(--muted);margin:0 0 22px}.shelf-bars{display:flex;flex-direction:column;gap:8px;padding:17px 0 0;border-top:1px solid var(--rule)}.shelf-bars i{height:5px;background:var(--rule);width:75%;border-radius:2px}.shelf-bars i:nth-child(2){width:91%}.shelf-bars i:nth-child(3){width:52%}.visit-page-head{margin:20px 0 32px}.visit-page-head h2{font:40px/1.2 var(--display);letter-spacing:-1px;margin:13px 0}.visit-page-head>p:not(.workspace-kicker){font-size:13px;color:var(--muted)}.visit-page-head>a{font-size:12px}.visit-firm-search{display:flex;align-items:center;gap:20px;font-size:12px;margin-bottom:20px}.visit-firm-search input{max-width:400px;width:100%;padding:12px;border:1px solid var(--rule);background:var(--surface);color:var(--ink);border-radius:4px}.visit-firms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.visit-firm{border:1px solid var(--rule);background:var(--surface);border-radius:5px;padding:22px;text-align:left;color:var(--ink);cursor:pointer}.visit-firm:hover{border-color:var(--navy-2)}.visit-firm h3{font-size:17px;font-weight:500;margin:0 0 18px}.visit-firm>span{display:flex;justify-content:space-between;gap:8px;font:10px var(--mono);color:var(--muted)}.visit-facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:25px 0 40px;padding:25px 0;gap:20px}.visit-facts dt{font-size:11px;color:var(--muted)}.visit-facts dd{font:26px var(--display);margin:10px 0 0}.visit-tool{display:grid;grid-template-columns:1fr 1.3fr;gap:60px;align-items:center;padding:50px;border:1px solid var(--rule);border-radius:6px;background:var(--surface);max-width:1000px}.visit-tool-art{padding:40px;background:var(--surface-2);min-height:220px;display:flex;flex-direction:column;justify-content:center}.visit-tool-art>span{font:60px var(--mono);color:var(--navy-2);text-align:center;margin-bottom:30px}.visit-tool h3{font:30px var(--display);margin:15px 0}.visit-tool p{color:var(--muted);line-height:1.9}.visit-tool-free{display:block;margin-top:20px;font-size:12px}.visit-dialog{border:1px solid var(--rule);border-radius:8px;padding:45px;max-width:520px;width:calc(100% - 36px);background:var(--surface);color:var(--ink);box-shadow:0 30px 100px #10243140}.visit-dialog::backdrop{background:#14232d88;backdrop-filter:blur(3px)}.dialog-close{position:absolute;right:12px;top:12px;font-size:25px}.visit-dialog h2{font:34px/1.3 var(--display);margin:18px 0}.visit-dialog p:not(.workspace-kicker){font-size:13px;color:var(--muted);line-height:1.9}.visit-dialog-actions{display:flex;gap:12px;flex-wrap:wrap;margin:25px 0 12px}.visit-signin{font-size:11px}.visit-locked-detail{padding:35px}.visit-locked-detail h3{font:30px var(--display);margin:18px 0}.visit-locked-detail p{line-height:1.9;color:var(--muted)}.visit-locked-detail .shelf-bars{margin:28px 0;padding:30px;background:var(--surface-2)}.card:focus-visible,.shelf-card:focus-visible,.visit-firm:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.drawer .dhead{position:sticky;top:0;z-index:2;background:var(--surface)}.drawer{overscroll-behavior:contain}
@media(max-width:1050px){.shelf-grid,.visit-firms{grid-template-columns:repeat(2,minmax(0,1fr))}.visit-tool{gap:30px;padding:30px}.topbar .tabs{overflow-x:auto;max-width:100%;scrollbar-width:thin}.topbar .brand-powered{font-size:9px}}
@media(max-width:650px){.visit-strip{padding:12px 16px;font-size:10px;align-items:flex-start}.visit-strip>div{gap:7px;flex-wrap:wrap}#visitClock{font-size:9px}.visit-strip>a{max-width:100px;flex-shrink:0}.visit-intro{padding:12px 16px;flex-direction:column;gap:8px;font-size:10px}.visit-privacy{max-width:100%}.shelf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.shelf-card{padding:18px 14px}.shelf-card h3{font-size:17px}.shelf-lock{font-size:8px}.visit-page-head h2{font-size:32px}.visit-firms{grid-template-columns:1fr}.visit-firm-search{align-items:flex-start;flex-direction:column;gap:10px}.visit-facts{grid-template-columns:repeat(2,1fr)}.visit-tool{grid-template-columns:1fr;padding:25px;gap:20px}.visit-tool-art{min-height:150px;padding:25px}.visit-tool-art>span{font-size:40px;margin-bottom:10px}.visit-tool h3{font-size:28px}.visit-dialog{padding:35px 25px}.visit-dialog h2{font-size:30px}.visit-locked-detail{padding:24px}.is-visitor .workspace-copy h2{font-size:28px}.visitor-register,.visitor-login{padding:7px 10px!important;font-size:10px!important}.shelves-heading h2{font-size:27px}.appfoot{flex-wrap:wrap}}
@media(max-width:380px){.shelf-grid{grid-template-columns:1fr}}
/* Account controls keep their intrinsic width at desktop sizes. */
.visitor-login,.visitor-register{white-space:nowrap;flex-shrink:0;text-decoration:none}
@media(min-width:1101px){.is-visitor .topbar{grid-template-columns:minmax(270px,1fr) minmax(180px,330px) auto;gap:0 22px}.is-visitor .statchips{display:none}}
@media(min-width:761px) and (max-width:1100px){.is-visitor .topactions{flex-wrap:nowrap}.is-visitor .statchips{display:none}}
/* The library shares the front door's denser paper and ruled surfaces. */
body{background-color:var(--ground);background-image:radial-gradient(#332c2210 .5px,transparent .8px);background-size:5px 5px}
.topbar{border-bottom:2px solid var(--navy)}
.workspace-intro{border:2px solid var(--navy);box-shadow:5px 5px 0 color-mix(in srgb,var(--navy) 12%,transparent);border-radius:4px}
.card{border-color:var(--rule-strong);border-width:1.5px;box-shadow:2px 3px 0 color-mix(in srgb,var(--navy) 7%,transparent)}
.card-title{font-family:Baskerville,"Iowan Old Style",Georgia,"Songti SC",serif;font-size:19px;line-height:1.35}
.shelf-card{border-color:var(--rule-strong);border-width:1.5px;box-shadow:2px 3px 0 color-mix(in srgb,var(--navy) 7%,transparent)}
.shelves-heading{border-top:2px solid var(--navy)}
.appfoot{border-top:2px solid var(--navy);padding:23px 20px 27px;gap:9px 12px}
.appfoot .company-signature{display:block;text-align:center;font-size:13px;color:var(--ink-2);letter-spacing:.15px;border-top:1px solid var(--rule);margin-top:10px;padding-top:13px}
.appfoot .company-signature strong{color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.35px}

/* Library welcome: paired editorial headings and an engraved orbital study. */
.workspace-intro .workspace-library-title{display:block;font-family:var(--display);font-size:clamp(21px,1.8vw,27px);font-weight:400;line-height:1.32;letter-spacing:-.3px;color:var(--navy);margin:0 0 14px;max-width:36ch;text-wrap:balance}
.workspace-library-title::before{display:none}
.workspace-intro h2{max-width:30ch;line-height:1.18;margin-bottom:4px}
.workspace-intro .workspace-link{margin-right:12px}
.workspace-figure{color:var(--navy)}
.workspace-figure .figure-grid{opacity:.38}
.workspace-figure .figure-orbits{stroke-width:.8;opacity:.8}
.workspace-figure .figure-axis{opacity:.45;stroke-dasharray:1 5}
.workspace-figure .figure-brackets{stroke-width:1.4}
.figure-trace{stroke:var(--navy);stroke-width:1.6;stroke-linecap:round}
.figure-ticks{stroke:var(--navy-3);stroke-width:.8}
.figure-focus-ring{stroke:var(--gold);stroke-width:.7;opacity:.45}
.figure-node-halo{fill:var(--surface);stroke:var(--navy-3);stroke-width:.6}
.figure-satellite{fill:var(--gold);stroke:var(--surface);stroke-width:1.5}
@media(max-width:640px){.workspace-intro .workspace-library-title{font-size:22px;line-height:1.3;margin-bottom:16px}.workspace-intro h2{font-size:30px;max-width:24ch}.workspace-intro .workspace-link{white-space:normal;font-size:11px;max-width:100%;margin-right:0}.workspace-link>span:last-child{flex-shrink:0}}