/* ══ sozo tokens — pigments ═══════════════════════════════════════════════════
   Lifted from project/Tokens.dc.html (the brand guideline artboard). Contrast
   ratios in the comments are the ones the guideline documents; do not "tidy" a
   value without re-checking it. */
:root{
  --sumi:#14140F;   /* 墨   ink         */
  --kinari:#F4F0E6; /* 生成 unbleached  */
  --shu:#D8452F;    /* 朱   vermillion  */
  --ai:#1B4A6B;     /* 藍   indigo      */
  --moegi:#7A9A3E;  /* 萌黄 fresh green */
  --kincha:#B08D3F; /* 金茶 gold-brown  */
  --nezumi:#6E6E66; /* 鼠   mouse grey  */

  /* roles — light (washi and ink) */
  --ground:var(--kinari);  --paper:#FAF7EF;  --code:#ECE6D8;
  --ink:var(--sumi);       --ink-2:#57574F;              /* 6.4:1 */
  --rule:rgb(110 110 102 / .20);
  --rule-2:rgb(110 110 102 / .45);
  --shu-ink:#8A2716;   /* ask numerals, 7.4:1 AAA */
  --shu-deep:#B5361F;  /* fill under kinari, 6.0:1 */
  --shu-wash:rgb(216 69 47 / .11);
  --ai-ink:#1B4A6B;    /* bid numerals, 8.3:1 AAA */
  --ai-fill:#1B4A6B;   --ai-wash:rgb(27 74 107 / .11);
  --moegi-ink:#4A6121; --moegi-wash:rgb(122 154 62 / .16);
  --kincha-ink:#7A5F22;

  --font-display:"Zen Old Mincho",serif;
  --font-ui:"Zen Kaku Gothic New",system-ui,sans-serif;
  --font-num:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(0.2,0,0,1); --dur:240ms;
  --space:8px; --gutter:40px; --gutter-phone:24px; --radius:2px;
  color-scheme:light;
}
html[data-theme=dark]{ /* ink and lamplight */
  color-scheme:dark;
  --ground:var(--sumi); --paper:#1C1C16; --code:#0D0D0A;
  --ink:#EEE8DA;        --ink-2:#A8A597;                 /* 7.4:1 */
  --rule:rgb(154 152 142 / .20);
  --rule-2:rgb(154 152 142 / .42);
  --shu-ink:#F58A74;    /* 7.7:1 */
  --shu-wash:rgb(216 69 47 / .17);
  --ai-ink:#93BADB;     /* 8.4:1 */
  --ai-fill:#2C6690;    --ai-wash:rgb(110 160 210 / .15);
  --moegi-ink:#AFCB75;  --moegi-wash:rgb(122 154 62 / .2);
  --kincha-ink:#D8B971;
}

*,*::before,*::after{box-sizing:border-box}
html{padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0)}
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 15px/1.6 var(--font-ui);-webkit-font-smoothing:antialiased}
.mono{font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;letter-spacing:-.01em}
.serif{font-family:var(--font-display)}
a{color:var(--ai-ink)} a:hover{color:var(--ink)}
button{font-family:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--ai-ink);outline-offset:2px}
h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0;letter-spacing:-.02em}
.roll{transition:transform var(--dur) var(--ease)}
.wash{transition:background-color 900ms var(--ease),height var(--dur) var(--ease),
  width var(--dur) var(--ease)}
@keyframes sz-stamp{0%{opacity:0;transform:scale(1.28) rotate(-7deg);filter:blur(1.5px)}
  62%{opacity:.92;transform:scale(1) rotate(-7deg);filter:blur(0)}
  100%{opacity:1;transform:scale(1) rotate(-7deg)}}
@keyframes sz-fade{from{opacity:0}to{opacity:1}}
.stamp{animation:sz-stamp 260ms var(--ease) both}
@media (prefers-reduced-motion:reduce){
  .roll,.wash{transition:none!important} .stamp{animation:sz-fade 200ms linear both}}

/* ── shell ─────────────────────────────────────────────────────────────────── */
.app{display:flex;flex-direction:column;min-height:100vh;background:var(--ground)}
/* flex-shrink:0 is load-bearing — as flex items these otherwise squeeze and
   clip their own content. */
.app>*{flex-shrink:0}
.bar{min-height:72px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 48px;
  padding:14px var(--gutter);border-bottom:1px solid var(--rule)}
.mark{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--ink)}
.mark b{font:600 26px/1 var(--font-display);letter-spacing:-.02em}
.mark i{font-style:normal;font-size:12px;letter-spacing:.12em;color:var(--shu-ink)}
.nav{display:flex;gap:28px;font-size:14px;flex-wrap:wrap}
.nav a{color:var(--ink);text-decoration:none}
.nav a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--shu);
  text-decoration-thickness:2px;text-underline-offset:8px}
.wallet-pill{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;
  border:1px solid var(--rule-2);font-size:13px;border-radius:var(--radius);
  background:transparent;color:var(--ink)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--moegi);flex:0 0 auto}
.dot.off{background:var(--nezumi)}

.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;
  padding-inline:var(--gutter)}
.eyebrow{display:flex;gap:12px;align-items:baseline;font-size:12px;
  letter-spacing:.14em;color:var(--ink-2)}
.h-page{font-size:48px;line-height:1.05}
.lede{margin:0;font-size:19px;line-height:1.6;color:var(--ink-2)}
h3{font-family:var(--font-ui);font-size:15px;font-weight:700;letter-spacing:.02em}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;margin-bottom:10px}
.sec-note{font-size:12px;color:var(--ink-2)}

/* ── figures ───────────────────────────────────────────────────────────────── */
.strip{display:grid;border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.cell{padding:20px 24px 20px 0;display:flex;flex-direction:column;gap:8px}
.cell+.cell{padding-left:24px;border-left:1px solid var(--rule)}
.cell .k{font-size:12px;letter-spacing:.08em;color:var(--ink-2)}
.cell .v{font-size:26px;font-weight:500}
.dgt{display:inline-block;height:1.2em;line-height:1.2em;overflow:hidden}
.dgt>span{display:flex;flex-direction:column}

/* ── tables, ruled like a ledger ───────────────────────────────────────────── */
.th,.tr{display:grid;align-items:center}
.th{height:28px;align-items:end;padding-bottom:6px;border-bottom:1px solid var(--rule-2);
  font-size:11px;color:var(--ink-2);letter-spacing:.06em}
.tr{height:40px;border-bottom:1px solid var(--rule);font-size:14px}
.tr.tall{height:44px}
.r{text-align:right}
.empty{padding:18px 0;font-size:13px;color:var(--ink-2);font-style:italic}

/* ── the book ──────────────────────────────────────────────────────────────── */
.rung{position:relative;display:grid;height:36px;align-items:center;
  border-bottom:1px solid var(--rule);width:100%;background:transparent;border-left:0;
  border-right:0;border-top:0;padding:0;text-align:left;color:inherit;font-size:14px}
.rung:hover{background:var(--paper)}
.rung>span{position:relative}
/* Must out-specify `.rung>span{position:relative}` above (0,2,0 beats 0,1,0).
   Without this the depth bar stays in flow and steals a grid cell, wrapping the
   last column onto a second line. */
.rung>span.depth,.depth{position:absolute;top:5px;bottom:5px;right:0;pointer-events:none}

/* ── controls ──────────────────────────────────────────────────────────────── */
label{display:flex;flex-direction:column;gap:6px;font-size:12px;letter-spacing:.08em;
  color:var(--ink-2)}
input,select{font:400 15px/1 var(--font-num);color:var(--ink);background:var(--paper);
  border:1px solid var(--rule-2);border-radius:var(--radius);padding:0 14px;height:48px;
  width:100%}
select{font-family:var(--font-ui)}
/* The native select was drawn by the OS: wrong palette, and its arrow sat
   outside the box. appearance:none hands the whole control back to us; the
   chevron is a rotated corner on the wrapper, so it inherits the theme and
   cannot overflow. color-scheme follows the app's own toggle, not the OS, so
   the popup the OS still owns opens on the right ground. */
.sel{position:relative;display:block}
.sel>select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  width:100%;text-overflow:ellipsis}
.sel::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;
  border-right:1.5px solid var(--ink-2);border-bottom:1.5px solid var(--ink-2);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
  transition:border-color var(--dur,240ms) var(--ease,ease)}
.sel:hover>select{border-color:var(--ink)}
.sel:hover::after{border-color:var(--ink)}
.sel>select:focus-visible{outline:2px solid var(--ai-ink);outline-offset:2px}

.btn{height:44px;padding:0 20px;display:inline-flex;align-items:center;
  justify-content:center;background:var(--ink);color:var(--ground);
  border:1px solid var(--ink);border-radius:var(--radius);font-size:14px;
  font-weight:500;text-decoration:none;transition:opacity var(--dur) var(--ease)}
.btn:hover{opacity:.85;color:var(--ground)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn.ghost:hover{border-color:var(--ink);opacity:1;color:var(--ink)}
.btn.tall{height:52px;padding:0 28px;font-size:16px}
.btn[disabled]{background:var(--rule-2);border-color:transparent;color:var(--ink-2);
  cursor:not-allowed;opacity:1}
.btn.xs{height:32px;padding:0 10px;font-size:11px}
.msg{font-size:13px;min-height:18px;color:var(--ink-2);margin:0}
.msg.bad{color:var(--shu-ink)} .msg.good{color:var(--moegi-ink)}
.seal{width:96px;height:96px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;transform:rotate(-7deg)}
.seal.on{border:3px solid var(--shu);color:var(--shu)}
.seal.off{border:1px dashed var(--rule-2);color:var(--ink-2)}
/* The artboard set the seal in vertical kanji. Latin reads horizontally, so the
   stamp keeps its rotation and ink but sets the word across. */
.seal span{line-height:1;text-align:center}
pre{margin:0;overflow-x:auto;background:var(--code);padding:28px;
  font:400 15px/1.9 var(--font-num);color:var(--ink)}

/* ── narrow ────────────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  :root{--gutter:28px}
  .h-page{font-size:36px}
  .g12>*{grid-column:1 / span 12 !important}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .cell+.cell{padding-left:20px}
  .cell:nth-child(odd){padding-left:0;border-left:0}
}
@media (max-width:640px){
  :root{--gutter:var(--gutter-phone)}
  /* The Market-Mobile artboard puts the header at 60px. It only fits if the
     48px column gap comes down — at 342px of content the mark, the pill and the
     toggle are 352px with it. The nav then wraps to its own row beneath. */
  .bar{min-height:60px;padding:10px var(--gutter);gap:10px 14px}
  .mark b{font-size:24px} .mark i{font-size:11px}
  .nav{order:9;width:100%;gap:18px;font-size:13px;padding-top:2px}
  .wallet-pill{height:36px;padding:0 10px;font-size:12px}
  .h-page{font-size:30px} .lede{font-size:17px}
  .strip{grid-template-columns:1fr !important}
  .cell+.cell{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .hide-sm{display:none !important}
}