/* Just a DEV · layout: page frame, header, nav, phone tab bar, footer, route placeholders, 404 (DEV-1; contract: web/DESIGN.md). */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.page { display: block; min-height: calc(100vh - var(--header-h) - 120px); outline: none; }
.stack > * + * { margin-top: var(--s5); }
.row { display: flex; align-items: center; gap: var(--s3); }
.spacer { flex: 1 1 auto; }

/* ───────────── page rhythm (DESIGN.md §4.6): sections alternate a dense instrument (one well / one table) with a showcase
   (objects, big type, air). .secs > * + * puts --sec between sections; .band--board is the dark mainboard band (full bleed,
   one per page at most): a Graphite island one step darker, for the schematic / money flow ───────────── */
.secs > * + * { margin-top: var(--sec); }
.sec-show { padding-top: var(--s4); padding-bottom: var(--s4); }
.band--board {
  --bg: #2E2F2C; --stage: #2E2F2C; --panel: #393A36; --panel-2: #262724; --panel-3: #262724; --seg-on: #4A4B46; --hover: #33342F;
  --line: #41423D; --line-2: #4D4E48; --rim: rgba(0, 0, 0, .35); --sheen: rgba(255, 255, 255, .035);
  background: var(--grain) var(--bg); color: var(--text); padding-top: var(--s9); padding-bottom: var(--s9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(0, 0, 0, .3);
}
@media (max-width: 760px) { .band--board { padding-top: var(--s8); padding-bottom: var(--s8); } }

/* ───────────── header: the device's top edge (72 px; phone 60 px). Shell colour, no border: a soft shadow once it floats ───────────── */
.hdr { position: sticky; top: 0; z-index: var(--z-header); height: var(--header-h); background: var(--grain) var(--bg); box-shadow: 0 1px 0 var(--edge), 0 2px 0 var(--hi); }
.hdr__in { height: 100%; display: flex; align-items: center; gap: 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; height: 44px; border-radius: 10px; color: var(--text); }
.brand__key {
  display: block; width: 36px; height: 36px; flex: none; border-radius: 8px; object-fit: cover; background: #0B0E11;
}
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__word { font: 700 21px/1 var(--font-display); letter-spacing: -.02em; white-space: nowrap; }
.brand__word b { font-weight: 700; }
.brand__tag {
  padding: 5px 7px 4px; border: 1px solid var(--text-3); border-radius: 4px; color: var(--text-2);
  font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .12em; white-space: nowrap;
}
.hdr__chips { display: flex; align-items: center; gap: 6px; flex: none; }
.hdr__chips:empty { display: none; }

/* nav: a segmented switch (recessed track, the current page is a raised plate) */
.nav { display: flex; align-items: center; gap: 3px; padding: 4px; margin-left: 8px; border-radius: 12px; background: var(--panel-3); box-shadow: var(--recess); flex: none; }
.nav__a {
  display: inline-flex; align-items: center; height: 34px; padding: 0 13px; border-radius: 9px;
  font: 500 14.5px/1 var(--font-sans); color: var(--text-2); white-space: nowrap; transition: color var(--t-fast), background var(--t-fast);
}
.nav__a:hover { color: var(--text); }
.nav__a[aria-current="page"] { background: var(--cap), var(--seg-on); color: var(--text); font-weight: 600; box-shadow: var(--raise-s); }
.nav__a:focus-visible { outline-offset: 1px; }
.hdr__sp { flex: 1 1 auto; min-width: 0; }
.hdr__search { position: relative; flex: 0 1000 230px; min-width: 120px; } /* gives way before the LCD clips */
.hdr__icon { display: none; }
.hdr__cta { flex: none; }
/* the shell's 当一次 DEV key is the brand CTA (orange on every page); on /launch you are already there: pressed in, neutral,
   so the wizard's own orange key is the one orange key of the view (DESIGN.md §1) */
.btn.hdr__cta[aria-current="page"], .btn.hdr__cta[aria-current="page"]:hover, .btn.hdr__cta[aria-current="page"]:active {
  --bgc: var(--panel-3); --ink: var(--text); --capg: none; transform: translateY(var(--tr)); box-shadow: var(--recess-d);
}
.hdr__wallet { flex: none; display: flex; }
/* squeeze steps set by shell.js fitHeader() while the row would overflow (phone steps: see the 760 px block) */
.hdr--s2 .devtick { display: none; }
.hdr--s3 .hdr__search { display: none; }
.hdr--s3 .hdr__icon--search { display: inline-grid; }

/* the header LCD: block number (7-segment) + $DEV price (mono: decimals never go 7-segment). Links to /dev; tooltip = CA */
.devtick {
  display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; overflow: hidden; height: 40px; padding: 5px; border-radius: 10px; background: var(--bezel-tex);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .45), 0 1px 0 var(--hi);
}
.devtick__glass {
  display: inline-flex; align-items: center; flex: none; gap: 7px; height: 100%; padding: 0 9px; border-radius: 6px;
  background: var(--lcd-tex), var(--lcd); color: var(--lcd-ink); box-shadow: var(--lcd-in); white-space: nowrap;
}
.devtick__k { font: 600 11px/1 var(--font-mono); letter-spacing: .08em; color: var(--lcd-ink-2); }
.devtick__blk { font-size: 15px; }
.devtick__px { font: 700 13.5px/1 var(--font-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.devtick:hover .devtick__glass { background-color: #BCC3A6; }

/* edition switch (Stone / Graphite): a round neutral key with the half-disc glyph */
.themesw {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--cap), var(--key-n);
  box-shadow: inset 0 1px 0 var(--hi), 0 3px 0 var(--key-n-sh); transition: transform var(--t-key) ease-out, box-shadow var(--t-key) ease-out;
}
.themesw:active { transform: translateY(2px); box-shadow: inset 0 1px 0 var(--hi), 0 1px 0 var(--key-n-sh); }
.themesw i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--text); background: linear-gradient(90deg, transparent 50%, var(--text) 50%); }

/* 中 / EN: a slide switch between two labels */
.langsw { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.langsw button { min-width: 20px; height: 32px; padding: 0 1px; font: 600 12px/1 var(--font-mono); color: var(--text-3); transition: color var(--t-fast); }
.langsw button:hover { color: var(--text-2); }
.langsw button[aria-pressed="true"] { color: var(--text); }
.langsw__sw { position: relative; width: 34px; height: 20px; border-radius: 10px; background: var(--track); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2); cursor: pointer; flex: none; }
.langsw__sw::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--key-n);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35); transition: transform var(--t-mid) var(--ease);
}
.langsw[data-lang="en"] .langsw__sw::after { transform: translateX(14px); }
:root[data-theme="graphite"] .langsw__sw::after { background: var(--text-2); }

@media (max-width: 1599px) { .hdr .brand__tag { display: none; } }
@media (max-width: 1599px) { .wbtn > .ic { display: none; } }  /* the chevron; the key still opens the menu (aria-haspopup) */
@media (max-width: 1519px) { .wbtn__bal { display: none; } }
@media (max-width: 1365px) { .devtick__k--px, .devtick__px { display: none; } .nav__a { padding: 0 11px; } }
@media (max-width: 1220px) { .devtick { display: none; } }
@media (max-width: 1100px) {
  .hdr__search { display: none; }
  .hdr__icon--search { display: inline-grid; }
  .nav { margin-left: 0; }
}
.hdr__cta .cta-short { display: none; }
@media (max-width: 1023px) {
  .hdr__cta .cta-full { display: none; } .hdr__cta .cta-short { display: inline; }
  .wbtn__addr, .wbtn > .ic { display: none; } .wbtn { padding: 0 10px; }
  .nav__a { padding: 0 10px; font-size: 14px; }
}
.hdr__icon {
  place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--text-2); flex: none; background: var(--cap), var(--key-n);
  box-shadow: inset 0 1px 0 var(--hi), 0 3px 0 var(--key-n-sh); transition: transform var(--t-key) ease-out, box-shadow var(--t-key) ease-out, color var(--t-fast);
}
.hdr__icon:hover { color: var(--text); }
.hdr__icon:active { transform: translateY(2px); box-shadow: inset 0 1px 0 var(--hi), 0 1px 0 var(--key-n-sh); }
@media (min-width: 761px) and (max-width: 1023px) { .hdr .brand__word { display: none; } }

/* ───────────── phone (≤ 760 px): 60 px header + a bottom bar of five keys (orange 当 DEV in the middle) ───────────── */
.tabbar { display: none; }
@media (max-width: 760px) {
  .hdr__in { gap: 8px; }
  .brand__key { width: 32px; height: 32px; }
  .brand__word { font-size: 19px; }
  .nav, .langsw, .hdr__cta, .devtick, .hdr__search { display: none !important; }
  .hdr__icon { width: 40px; height: 40px; }
  .hdr__icon--search { display: inline-grid; }
  .themesw { width: 40px; height: 40px; }
  .hdr--s2 .themesw { display: none; }      /* the edition switch stays in the 「我的」 sheet */
  .hdr--s3 .brand__word { display: none; }
  body { padding-bottom: calc(var(--tab-h) + var(--safe-b)); }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tab); display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
    height: calc(var(--tab-h) + var(--safe-b)); padding: 8px 10px calc(10px + var(--safe-b)); background: var(--mat); box-shadow: 0 -1px 0 var(--edge), inset 0 1px 0 var(--hi);
  }
}
.tabi {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; height: 100%; border-radius: 10px;
  color: var(--text-2); font: 500 13px/1 var(--font-sans); -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.tabi .ic { display: none; }
.tabi[aria-current="page"] { background: var(--panel-3); color: var(--text); font-weight: 600; box-shadow: var(--recess-d); }
.tabi--launch {
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 50%), var(--key); color: var(--key-ink-s); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 3px 0 var(--key-d);
  transition: transform var(--t-key) ease-out, box-shadow var(--t-key) ease-out;
}
.tabi--launch:active { transform: translateY(var(--travel)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 var(--key-d); }
.tabi--launch[aria-current="page"] { background: var(--panel-3); color: var(--text); box-shadow: var(--recess-d); transform: none; } /* on /launch: pressed, neutral */

/* ───────────── footer: the device's bottom edge: silk columns, the $DEV CA plate with 认准 CA tape, one risk line ───────────── */
.ftr { margin-top: var(--s10); background: transparent; color: var(--text-2); box-shadow: inset 0 1px 0 var(--edge), inset 0 2px 0 var(--hi); }
.ftr__top { display: grid; grid-template-columns: minmax(240px, 1.2fr) 2fr minmax(300px, 1.3fr); gap: 40px; padding-top: 44px; padding-bottom: 32px; }
.ftr__top > * { min-width: 0; }
.ftr__brand .brand { height: auto; }
.ftr__tag { margin-top: 16px; font: 600 22px/1.2 var(--font-sans); letter-spacing: -.02em; color: var(--text); }
.ftr__fact { margin-top: 8px; font: 500 var(--fs-label)/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.ftr__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ftr__col h3 { margin-bottom: 12px; }
.ftr__col a { display: block; padding: 5px 0; font-size: 14px; color: var(--text-2); transition: color var(--t-fast); width: fit-content; }
.ftr__col a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-2); }
.ftr__ca { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: var(--r-l); background: var(--mat); box-shadow: var(--raise); align-self: start; }
.ftr__ca-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border-radius: var(--r-m); background: var(--panel-2); box-shadow: var(--recess), 0 1px 0 var(--hi); }
.ftr__ca-row .addr { min-width: 0; color: var(--text); }
.ftr__ca-note { font-size: 13px; color: var(--text-3); }
.ftr__ca-note b {
  display: inline-block; padding: 3px 7px; margin-right: 2px; border-radius: 3px; background: var(--tape); color: var(--tape-ink);
  font: 600 11.5px/1.2 var(--font-sans); letter-spacing: .04em;
}
.ftr__bot { display: flex; align-items: center; gap: 16px; padding-top: 16px; padding-bottom: 26px; border-top: 1px dashed var(--line-2); font-size: 13px; color: var(--text-3); }
.ftr__bot a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.ftr__bot a:hover { color: var(--text); }
.ftr__dev { color: var(--accent-text); }
.ftr__build { font: 500 12px/1 var(--font-mono); color: var(--text-3); white-space: nowrap; letter-spacing: .04em; }
@media (max-width: 1100px) { .ftr__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ftr__cols { grid-column: 1 / -1; grid-row: 2; } }
@media (max-width: 760px) {
  .ftr { margin-top: var(--s8); }
  .ftr__top { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 30px; }
  .ftr__cols { grid-row: auto; }
  .ftr__col a { padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
  .ftr__bot { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ───────────── route placeholders (router: skeleton while a page module loads; designed state when one is missing) ───────────── */
.ph { padding-top: 24px; padding-bottom: 24px; }
.ph-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ph-grid > *, .ph-split > * { min-width: 0; }
.ph-hero { height: clamp(560px, 78vh, 820px); background: var(--stage); }
.ph-band { height: 420px; background: var(--stage); }
.ph-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.ph-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.ph-lane { display: grid; grid-auto-flow: column; grid-auto-columns: 220px; gap: 12px; overflow: hidden; }
.ph-toc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
.ph-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; padding: 16px; border-radius: var(--r-plate); background: var(--mat); box-shadow: var(--raise); }
@media (max-width: 1023px) { .ph-split, .ph-toc { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .ph-hero { height: 560px; } .ph-band { height: 320px; } }

.ph-stage { padding-top: 32px; }
.ph-stage__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; padding-top: 40px; padding-bottom: 40px; }
.ph-stage__in > div:first-child { padding: 32px 36px; border-radius: var(--r-face); background: var(--mat); box-shadow: var(--raise); }
.ph-stage h1 { margin-top: 14px; font: 600 var(--fs-h2)/1.2 var(--font-sans); letter-spacing: -.02em; color: var(--text); }
.ph-stage p { margin-top: 12px; color: var(--text-2); max-width: 60ch; }
.ph-stage__code { margin-top: 14px; padding: 8px 10px; border-radius: var(--r-s); background: var(--lcd-tex), var(--lcd); color: var(--lcd-ink); box-shadow: var(--lcd-in); font: 500 12.5px/1.45 var(--font-mono); }
.ph-stage__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ph-stage__mark { width: 148px; height: 148px; }
.ph-ghost { opacity: .5; pointer-events: none; }
@media (max-width: 760px) {
  .ph-stage__in { grid-template-columns: 1fr; gap: 20px; padding-top: 16px; padding-bottom: 28px; }
  .ph-stage__in > div:first-child { padding: 22px 18px; border-radius: var(--r-plate); }
  .ph-stage__mark { width: 56px; height: 56px; order: -1; }
}

/* 404: an LCD with no cartridge in it (pages/notfound.js replaces the router fallback; both use these classes) */
.nf { display: grid; justify-items: center; text-align: center; padding-top: 72px; padding-bottom: 40px; gap: 18px; }
.nf__code {
  position: relative; display: grid; justify-items: center; gap: 10px; padding: 22px 34px 16px; border-radius: 8px; color: var(--lcd-ink);
  background: var(--lcd-tex), var(--lcd); box-shadow: 0 0 0 12px var(--bezel), 0 0 0 13px var(--hi), 0 22px 30px -14px rgba(0, 0, 0, .45), var(--lcd-in); margin: 12px 0 18px;
  font: 700 clamp(84px, 12vw, 132px)/1 var(--font-seg); letter-spacing: .02em; font-variant-numeric: normal;
}
.nf__code::before { content: "888"; position: absolute; top: 22px; left: 0; right: 0; opacity: var(--lcd-ghost); pointer-events: none; }
.nf__code::after { content: "NO CARTRIDGE · ERR 404"; font: 700 11.5px/1 var(--font-mono); letter-spacing: .16em; color: var(--lcd-ink-2); }
.nf__title { font: 600 28px/1.3 var(--font-sans); letter-spacing: -.02em; }
.nf__body { color: var(--text-2); max-width: 46ch; }
.nf__search { width: min(520px, 100%); margin-top: 8px; }
.nf__links { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 760px) { .nf { padding-top: 48px; } .nf__code { padding: 18px 24px 14px; box-shadow: 0 0 0 9px var(--bezel), 0 0 0 10px var(--hi), var(--lcd-in); } .nf__code::before { top: 18px; } }