/* CIPHR design pass, 2026-09-27. Loaded last on index and machine.
   1. Hero stage: near black like the owner's reference, the red key glyph.
   2. Try a buy: a pixel terminal (pixel title bar, scanlines, block cursor, command
      keys, a typed transcript, the piece in a pixel frame).
   3. Build a piece: the same pixel window, as an editor.
   4. UI pass: flat privacy band, runtime list instead of a card grid, readable pills
      and pressed states, 65ch body copy.
   Spacing on the 4pt scale from tokens.css. The glyph red is the only new colour. */
:root{
  --glyph:#FF6A3D;
  --px:4px;
  --pixel-corners:polygon(0 12px,4px 12px,4px 8px,8px 8px,8px 4px,12px 4px,12px 0,calc(100% - 12px) 0,calc(100% - 12px) 4px,calc(100% - 8px) 4px,calc(100% - 8px) 8px,calc(100% - 4px) 8px,calc(100% - 4px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 4px) calc(100% - 12px),calc(100% - 4px) calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) calc(100% - 4px),calc(100% - 12px) calc(100% - 4px),calc(100% - 12px) 100%,12px 100%,12px calc(100% - 4px),8px calc(100% - 4px),8px calc(100% - 8px),4px calc(100% - 8px),4px calc(100% - 12px),0 calc(100% - 12px));
  --pixel-corners-sm:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px));
}

/* ---------- 1. Hero stage ---------- */
.hook-stage,.hook-mount,.hook-mount canvas,.hook-mount .object-still{background:var(--ground)}
.ciphr-glyph{position:absolute;top:var(--space-16);left:var(--space-16);z-index:2;margin:0;font:500 20px/1 "Noto Sans JP","Yu Gothic","Hiragino Sans","Microsoft YaHei",sans-serif;color:var(--glyph);text-shadow:0 0 4px var(--glyph),0 0 16px color-mix(in srgb,var(--glyph) 70%,transparent),0 0 36px color-mix(in srgb,var(--glyph) 45%,transparent);pointer-events:none;user-select:none}
/* Top-left of the stage, above the tile slots and clear of the desktop mask fade. */
@media(min-width:1024px){.ciphr-glyph{top:var(--space-20);left:128px;font-size:22px}}
/* Hero paragraph sits on the H1 left edge. */
.hero-heading .hero-trading{margin-left:0;margin-right:0;max-width:58ch}
p.tech-pill{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tag{white-space:nowrap}
.tag.tier-rare{color:var(--ground)}
.piece-tabs button[aria-selected=true],.filter-chip[aria-pressed=true]{color:var(--ground)}

/* ---------- 2. Try a buy: pixel terminal ---------- */
.buy-instrument.ciphr-term{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--px);align-items:stretch;padding:var(--px);border:0;background:var(--line);clip-path:var(--pixel-corners);isolation:isolate}
.ciphr-term .terminal-titlebar{grid-column:1/-1;display:flex;align-items:center;gap:var(--space-12);min-width:0;margin:0;padding:var(--space-8) var(--space-16);border:0;border-radius:0;background:repeating-linear-gradient(0deg,var(--accent) 0 2px,color-mix(in srgb,var(--accent) 62%,var(--ground)) 2px 4px)}
.terminal-dots{display:flex;gap:var(--space-4);flex:none}
.ciphr-term .terminal-dot,#build .editor-titlebar .terminal-dot{width:8px;height:8px;border-radius:0;background:var(--ground)}
.ciphr-term .terminal-path,#build .editor-titlebar .terminal-path{padding:var(--space-4) var(--space-8);background:var(--accent);color:var(--ground);font:600 var(--fs-label)/1 var(--font-mono);letter-spacing:.04em;white-space:nowrap}
.ciphr-term .terminal-titlebar .tag{margin-left:auto;border-radius:0;border-color:var(--ground);background:var(--ground);color:var(--glow);font:500 var(--fs-label)/1.2 var(--font-mono);letter-spacing:.04em}
.ciphr-term .buy-action,.ciphr-term .buy-result{position:relative;min-width:0;margin:0;padding:var(--space-24);border:0;border-radius:0;background:var(--ground)}
.ciphr-term .buy-result{align-content:center}
/* Scanlines over the whole window, one slow scan band on top. */
.ciphr-term::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.24) 0 1px,transparent 1px 3px)}
.ciphr-term::before{content:"";position:absolute;left:0;right:0;top:0;height:64px;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--glow) 7%,transparent),transparent);animation:term-scan 7s linear infinite}
@keyframes term-scan{from{transform:translateY(-64px)}to{transform:translateY(1400px)}}
/* Command keys. */
.ciphr-term .buy-buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8);margin-top:var(--space-12)}
.ciphr-term .buy-choice{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"key amount" "label label" "meter meter";align-items:center;justify-items:start;gap:var(--space-4) var(--space-12);min-height:48px;padding:var(--space-12);border:0;border-radius:0;background:var(--card);box-shadow:inset 0 0 0 2px var(--line),inset 0 -4px 0 var(--line);color:var(--ink);font:400 var(--fs-label)/1.3 var(--font-mono);text-align:left;transition:background var(--fx-hover) var(--ease-soft),box-shadow var(--fx-hover) var(--ease-soft)}
.ciphr-term .buy-choice:hover{background:var(--tint);transform:none}
.ciphr-term .buy-choice:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px var(--accent),inset 0 -2px 0 var(--line)}
.ciphr-term .buy-choice:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ciphr-term .buy-choice[aria-busy=true]{background:var(--tint);box-shadow:inset 0 0 0 2px var(--glow);opacity:1}
.cmd-key{grid-area:key;align-self:center;padding:var(--space-4) var(--space-8);background:var(--ground);box-shadow:inset 0 0 0 2px var(--accent);color:var(--glow);font:600 var(--fs-body)/1 var(--font-mono)}
.ciphr-term .buy-choice strong{grid-area:label;font:600 var(--fs-label)/1.3 var(--font-mono);letter-spacing:.04em;text-transform:lowercase;white-space:nowrap}
.ciphr-term .buy-choice small{grid-area:amount;font:500 var(--fs-body)/1.2 var(--font-mono);color:var(--ink)}
.cmd-meter{grid-area:meter;display:flex;gap:var(--space-4)}
.cmd-meter i{display:block;width:8px;height:8px;background:var(--line)}
.cmd-meter i.on{background:var(--glow)}
/* The transcript screen: typed by CSS, one line after another, block cursor last. */
.ciphr-term .term-screen{margin-top:var(--space-16);padding:var(--space-12) var(--space-16);background:color-mix(in srgb,var(--ground) 60%,#000);box-shadow:inset 0 0 0 2px var(--line)}
.ciphr-term .terminal-lines{min-height:calc(7 * 1.8em);margin:0;padding:0;border:0;border-radius:0;background:transparent;font:400 var(--fs-label)/1.8 var(--font-mono);list-style:none}
.ciphr-term .terminal-lines li{display:flex;flex-wrap:nowrap;gap:var(--space-8);min-width:0;margin:0;color:var(--ink);opacity:0;animation:term-show 1ms linear var(--d,0ms) forwards}
.ciphr-term .terminal-lines li:first-child{margin:0}
.ciphr-term .terminal-step{flex:none;min-width:9ch;color:var(--glow)}
.ciphr-term .terminal-prompt{flex:none;min-width:9ch;color:var(--accent)}
.ciphr-term .term-text{display:inline-block;min-width:0;max-width:0;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation:term-type calc(var(--n,20) * 12ms) steps(var(--n,20),end) var(--d,0ms) forwards}
.ciphr-term .term-idle{opacity:1;animation:none}
.ciphr-term .term-idle .term-text{max-width:none;animation:none;color:var(--ink-soft)}
.ciphr-term .terminal-lines li.is-last::after{content:"";flex:none;display:inline-block;width:.6em;height:1.2em;margin-top:.3em;background:var(--glow);animation:term-blink 1s steps(1) infinite}
@keyframes term-show{to{opacity:1}}
@keyframes term-type{to{max-width:calc(var(--n,20) * 1ch + 1px)}}
@keyframes term-blink{50%{opacity:0}}
.ciphr-term .buy-session{margin-top:var(--space-16);font:400 var(--fs-label)/1.5 var(--font-mono)}
/* The piece lands in a pixel frame. */
.ciphr-term .pixel-frame{width:min(100%,288px);min-width:0;margin:0 auto;padding:var(--space-16);background:var(--ground);box-shadow:inset 0 0 0 4px var(--accent),inset 0 0 0 8px var(--ground),inset 0 0 0 10px var(--line);clip-path:var(--pixel-corners-sm)}
.ciphr-term .pixel-frame .empty-piece{border:2px dashed var(--line);border-radius:0;background:var(--tint)}
.ciphr-term #fireRead{font:600 var(--fs-h3)/1.3 var(--font-display)}
.ciphr-term .buy-result-copy{min-width:0}
@media(min-width:768px){.ciphr-term .buy-buttons{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1024px) and (max-width:1439px){.ciphr-term .buy-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.buy-instrument.ciphr-term{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.ciphr-term .buy-action,.ciphr-term .buy-result{padding:var(--space-32)}}
@media(min-width:1440px){.buy-instrument.ciphr-term{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.ciphr-term .buy-result{grid-template-columns:288px minmax(0,1fr);text-align:left}}
@media(max-width:479px){.ciphr-term .buy-action,.ciphr-term .buy-result{padding:var(--space-16)}.ciphr-term .terminal-titlebar{padding:var(--space-8) var(--space-12);gap:var(--space-8)}.ciphr-term .terminal-path{display:none}.ciphr-term .term-screen{padding:var(--space-8) var(--space-12)}}
@media(prefers-reduced-motion:reduce){
  .ciphr-term::before{animation:none;display:none}
  .ciphr-term .terminal-lines li{opacity:1;animation:none}
  .ciphr-term .term-text{max-width:none;animation:none}
  .ciphr-term .terminal-lines li.is-last::after{animation:none}
  .ciphr-term .buy-choice{transition:none}
  .ciphr-term .buy-choice:active{transform:none}
}

/* ---------- 3. Build a piece: the same window as a pixel editor ---------- */
#build .build-bench{position:relative;gap:var(--px);padding:var(--px);border:0;border-radius:0;background:var(--line);background-image:none;clip-path:var(--pixel-corners)}
#build .editor-titlebar{grid-column:1/-1;grid-row:1;display:flex;align-items:center;gap:var(--space-12);min-width:0;margin:0;padding:var(--space-8) var(--space-16);border:0;border-radius:0;background:repeating-linear-gradient(0deg,var(--accent) 0 2px,color-mix(in srgb,var(--accent) 62%,var(--ground)) 2px 4px)}
#build .editor-size{margin-left:auto;padding:var(--space-4) var(--space-8);background:var(--ground);color:var(--glow);font:500 var(--fs-label)/1.2 var(--font-mono);white-space:nowrap}
#build .build-object{grid-row:2;margin:0;padding:var(--space-24);border:0;border-radius:0;background-color:var(--ground);background-image:linear-gradient(45deg,var(--band) 25%,transparent 25%),linear-gradient(-45deg,var(--band) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--band) 75%),linear-gradient(-45deg,transparent 75%,var(--band) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
#build .build-object+div{grid-row:2;min-width:0;padding:var(--space-24);background:var(--ground)}
#build .build-card{padding:var(--space-12);border:0;border-radius:0;background:var(--ground);box-shadow:inset 0 0 0 4px var(--accent),inset 0 0 0 8px var(--ground),inset 0 0 0 10px var(--line);clip-path:var(--pixel-corners-sm)}
#build .build-maths{border:0;border-radius:0;background:var(--card);box-shadow:inset 0 0 0 2px var(--line)}
#buildControls{border:0;border-radius:0;padding:0;background:transparent}
#buildControls legend{color:var(--glow)}
#buildControls .segments button{min-height:44px;border:0;border-radius:0;background:var(--card);box-shadow:inset 0 0 0 2px var(--line),inset 0 -4px 0 var(--line);color:var(--ink);font:400 var(--fs-label)/1.2 var(--font-mono)}
#buildControls .segments button:hover{outline:0;background:var(--tint)}
#buildControls .segments button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
#buildControls .segments button[aria-pressed=true]{background:var(--glow);color:var(--ground);box-shadow:inset 0 0 0 2px var(--glow),inset 0 -4px 0 color-mix(in srgb,var(--glow) 55%,var(--ground))}
#build .build-shortcuts .btn{border-radius:0}
@media(max-width:1023px){#build .build-object{grid-row:2}#build .build-object+div{grid-row:3}}
@media(max-width:479px){#build .build-object,#build .build-object+div{padding:var(--space-16)}#build .editor-titlebar{padding:var(--space-8) var(--space-12)}#build .editor-titlebar .terminal-path{display:none}}

/* ---------- 3b. Build a piece, editor pass 2026-09-28 (index: .px-editor) ----------
   Window: title bar, tool strip, canvas artboard, layers panel, status bar. 4px line
   gutters between panes, 4pt spacing inside. Lime marks state only, never text. */
#build .build-bench.px-editor{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "tools" "canvas" "panel" "status";align-items:stretch;gap:var(--px);padding:var(--px);border:0;border-radius:0;background:var(--line);background-image:none;clip-path:var(--pixel-corners)}
#build .px-editor .editor-titlebar{grid-area:title}
#build .px-editor .editor-titlebar .terminal-path{display:inline-block}
/* Tool strip. */
#build .px-editor .editor-tools{grid-area:tools;display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);min-width:0;padding:var(--space-8) var(--space-12);background:var(--card)}
#build .px-editor .build-shortcuts{display:flex;flex-wrap:wrap;gap:var(--space-4);margin:0}
.editor-tool{display:inline-flex;align-items:center;gap:var(--space-8);min-height:var(--touch);margin:0;padding:0 var(--space-12);border:0;border-radius:0;background:transparent;box-shadow:inset 0 0 0 2px transparent;color:var(--ink);font:600 var(--fs-label)/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background-color var(--fx-hover) var(--ease-soft),box-shadow var(--fx-hover) var(--ease-soft)}
.editor-tool svg{flex:none;width:16px;height:16px;fill:var(--accent)}
.editor-tool:hover{background:var(--tint);box-shadow:inset 0 0 0 2px var(--line)}
.editor-tool:active{transform:translateY(1px)}
.editor-tool:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.editor-tool.is-primary{background:var(--ink);color:var(--ground)}
.editor-tool.is-primary svg{fill:var(--ground)}
.editor-tool.is-primary:hover{background:color-mix(in srgb,var(--ink) 86%,var(--glow));box-shadow:none}
.editor-grid-toggle[aria-pressed=true]{background:var(--tint);box-shadow:inset 0 0 0 2px var(--accent)}
.editor-grid-toggle[aria-pressed=true] svg{fill:var(--glow)}
/* Canvas: a dark dotted field, the artboard on a checkerboard, selection handles, pixel grid. */
#build .px-editor .editor-canvas{grid-area:canvas;position:relative;display:grid;place-items:center;min-width:0;margin:0;padding:var(--space-40) var(--space-24);border:0;border-radius:0;background-color:color-mix(in srgb,var(--ground) 72%,#000);background-image:radial-gradient(color-mix(in srgb,var(--ink) 12%,transparent) 1px,transparent 1px);background-size:8px 8px;background-position:0 0}
#build .px-editor .build-card{position:relative;width:min(100%,400px);aspect-ratio:1;margin:0;padding:var(--space-24);border:0;border-radius:0;overflow:visible;clip-path:none;box-shadow:0 0 0 1px var(--accent);background-color:var(--card);background-image:conic-gradient(color-mix(in srgb,var(--line) 80%,var(--card)) 25%,transparent 0 50%,color-mix(in srgb,var(--line) 80%,var(--card)) 0 75%,transparent 0);background-size:16px 16px}
#build .px-editor .build-card::before{content:"";position:absolute;inset:-4px;z-index:3;pointer-events:none;background:linear-gradient(var(--accent),var(--accent)) 0 0/8px 8px no-repeat,linear-gradient(var(--accent),var(--accent)) 50% 0/8px 8px no-repeat,linear-gradient(var(--accent),var(--accent)) 100% 0/8px 8px no-repeat,linear-gradient(var(--accent),var(--accent)) 0 50%/8px 8px no-repeat,linear-gradient(var(--accent),var(--accent)) 100% 50%/8px 8px no-repeat,linear-gradient(var(--accent),var(--accent)) 0 100%/8px 8px no-repeat,linear-gradient(var(--accent),var(--accent)) 50% 100%/8px 8px no-repeat,linear-gradient(var(--accent),var(--accent)) 100% 100%/8px 8px no-repeat}
#build .px-editor .build-card::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:1;transition:opacity var(--fx-hover) var(--ease-soft);background-image:linear-gradient(90deg,color-mix(in srgb,var(--ink) 16%,transparent) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--ink) 16%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 7%,transparent) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--ink) 7%,transparent) 1px,transparent 1px);background-size:25% 25%,25% 25%,calc(100% / 32) calc(100% / 32),calc(100% / 32) calc(100% / 32)}
#build .px-editor .grid-off .build-card::after{opacity:0}
#build .px-editor .build-card .piece-card,#build .px-editor .build-card .piece-card:hover{width:100%;min-height:0;aspect-ratio:1;transform:none;cursor:default}
#build .px-editor .build-card :is(.tile-sheen,.piece-conic,.piece-rim){display:none}
#build .px-editor .build-card .piece-svg{filter:drop-shadow(0 8px 0 color-mix(in srgb,#000 45%,transparent))}
/* Layers panel. */
#build .px-editor .editor-panel{grid-area:panel;min-width:0;padding:var(--space-16) var(--space-24) var(--space-24);background:var(--ground)}
.editor-panel-title{display:flex;align-items:center;gap:var(--space-8);margin:0 0 var(--space-16);padding-bottom:var(--space-12);border-bottom:2px solid var(--line);font:600 var(--fs-label)/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
.editor-panel-title::before{content:"";width:8px;height:8px;background:var(--accent)}
#buildControls{display:grid;gap:var(--space-20);min-width:0}
#buildControls .trait-layer{min-width:0;margin:0;padding:0;border:0}
#buildControls .trait-layer legend{display:flex;align-items:center;gap:var(--space-8);margin:0;padding:0 0 var(--space-8);font:600 var(--fs-label)/1.2 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink)}
#buildControls .layer-index{display:inline-grid;place-items:center;min-width:28px;height:20px;padding:0 var(--space-4);background:var(--line);color:var(--ink-soft);font:600 var(--fs-label)/1 var(--font-mono);letter-spacing:0}
#buildControls .swatch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
#buildControls .px-swatch{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name pct" "bar bar";align-items:center;gap:var(--space-8);min-width:0;min-height:var(--touch);margin:0;padding:var(--space-12);border:0;border-radius:0;background:var(--card);box-shadow:inset 0 0 0 2px var(--line);color:var(--ink);font:500 var(--fs-label)/1.3 var(--font-mono);text-align:left;cursor:pointer;transition:background-color var(--fx-hover) var(--ease-soft),box-shadow var(--fx-hover) var(--ease-soft)}
#buildControls .has-art .px-swatch{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"art pct" "name name" "bar bar";align-items:start}
#buildControls .swatch-art{grid-area:art;display:block;width:36px;height:36px}
#buildControls .swatch-art svg{display:block;width:100%;height:100%;filter:none}
#buildControls .swatch-name{grid-area:name;min-width:0;overflow-wrap:break-word}
#buildControls .swatch-pct{grid-area:pct;justify-self:end;font:400 var(--fs-label)/1.3 var(--font-mono);color:var(--ink-soft);font-variant-numeric:tabular-nums}
#buildControls .px-bar{grid-area:bar}
#buildControls .px-swatch:hover{background:color-mix(in srgb,var(--tint) 70%,var(--card));box-shadow:inset 0 0 0 2px var(--ink-soft)}
#buildControls .px-swatch:active{transform:translateY(1px)}
#buildControls .px-swatch:focus-visible{z-index:1;outline:3px solid var(--accent);outline-offset:2px}
#buildControls .px-swatch[aria-pressed=true]{background:var(--tint);box-shadow:inset 0 0 0 2px var(--glow)}
#buildControls .px-swatch[aria-pressed=true]::after{content:"";position:absolute;top:0;right:0;width:8px;height:8px;background:var(--glow)}
#buildControls .px-swatch[aria-pressed=true] .swatch-name{font-weight:700}
#buildControls .px-swatch[aria-pressed=true] .swatch-pct{color:var(--ink)}
/* 8-bit bar: 20 segments, the fill snaps to whole segments. Picked option lights lime. */
.px-bar{position:relative;display:block;height:8px;background:var(--line);-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 calc(5% - 1px),transparent calc(5% - 1px) 5%);mask-image:repeating-linear-gradient(90deg,#000 0 calc(5% - 1px),transparent calc(5% - 1px) 5%)}
.px-bar i{display:block;height:100%;background:var(--ink-soft)}
[aria-pressed=true] .px-bar i{background:var(--glow)}
/* Status bar: rank badge, 1 in N in the pixel face, the decrypt meter. */
#build .px-editor .editor-status{grid-area:status;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--px);width:auto;max-width:none;margin:0;padding:0;border:0;border-radius:0;background:var(--line);box-shadow:none;font-family:var(--font-mono);text-align:left}
#build .px-editor .status-cell{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-12);min-width:0;padding:var(--space-16) var(--space-24) var(--space-20);background:var(--ground)}
#build .px-editor .status-label{font:600 var(--fs-label)/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
#build #buildRank.px-badge{display:inline-flex;align-items:center;gap:var(--space-8);order:0;margin:0;min-height:36px;padding:var(--space-8) var(--space-16) var(--space-8) var(--space-12);border-radius:0;clip-path:var(--pixel-corners-sm);font:700 var(--fs-body)/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase}
#build #buildRank.px-badge::before{content:"";flex:none;width:8px;height:8px;background:currentColor;box-shadow:4px 4px 0 -2px currentColor}
.tier-pips{display:flex;gap:var(--space-4)}
.tier-pips i{display:block;width:16px;height:8px;background:var(--line)}
.tier-pips i.is-on{background:var(--accent)}
.tier-pips i.is-current{background:var(--glow)}
#build .px-editor #buildMath{display:grid;gap:var(--space-12);min-width:0;width:100%;margin:0}
.px-digits{display:block;width:calc(var(--cols) * 4px);max-width:100%;height:auto}
.px-digits .px-lit{fill:var(--ink)}
.px-digits .px-dim{fill:var(--ink-soft)}
.factor-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-8);margin:0;padding:0;list-style:none;font:400 var(--fs-label)/1.5 var(--font-mono);color:var(--ink-soft)}
.factor-list .factor{display:inline-flex;align-items:baseline;gap:var(--space-4);white-space:nowrap}
.factor-list .factor b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.factor-list .factor+.factor::before{content:"\00D7";margin-right:var(--space-4);color:var(--accent)}
#build .px-editor .mix-note{flex-basis:auto;max-width:none;margin:0;font:400 var(--fs-label)/1.5 var(--font-mono);color:var(--ink-soft)}
.decrypt-meter{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:2px;width:100%;height:20px}
.decrypt-meter i{display:block;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.decrypt-meter i.is-sealed{box-shadow:none;background:conic-gradient(var(--glow) 25%,color-mix(in srgb,var(--glow) 28%,var(--ground)) 0 50%,var(--glow) 0 75%,color-mix(in srgb,var(--glow) 28%,var(--ground)) 0) 0 0/4px 4px}
.meter-ends{display:flex;justify-content:space-between;width:100%;margin-top:calc(var(--space-4) * -1);font:400 var(--fs-label)/1 var(--font-mono);color:var(--ink-soft)}
#build .px-editor #buildOdds{margin:0;font:600 var(--fs-body)/1.4 var(--font-mono);letter-spacing:0;color:var(--ink)}
#build .px-editor #buildOdds::before{content:none}
@media(min-width:480px){#build .px-editor .editor-tools{padding:var(--space-8) var(--space-16)}}
@media(min-width:640px){#buildControls .swatch-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.px-digits{width:calc(var(--cols) * 5px)}}
@media(min-width:768px){#build .px-editor .editor-status{grid-template-columns:minmax(0,.7fr) minmax(0,1.4fr) minmax(0,1fr)}}
@media(min-width:1024px){
  #build .build-bench.px-editor{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-areas:"title title" "tools tools" "canvas panel" "status status"}
  #build .px-editor .editor-panel{padding:var(--space-20) var(--space-24) var(--space-24)}
  #buildControls .swatch-art{width:40px;height:40px}
  .px-digits{width:calc(var(--cols) * 6px)}
}
@media(max-width:479px){
  #build .px-editor .editor-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--space-8)}
  #build .px-editor .build-shortcuts{display:contents}
  #build .px-editor .editor-tool{justify-content:flex-start;padding:0 var(--space-8)}
  #build .px-editor .editor-canvas{padding:var(--space-24) var(--space-16)}
  #build .px-editor .build-card{padding:var(--space-16)}
  #build .px-editor .editor-panel{padding:var(--space-16)}
  #build .px-editor .status-cell{padding:var(--space-16)}
}
@media(prefers-reduced-motion:reduce){
  .editor-tool,#buildControls .px-swatch,#build .px-editor .build-card::after{transition:none}
  .editor-tool:active,#buildControls .px-swatch:active{transform:none}
}

/* ---------- 3c. The odds: each trait group as an 8-bit bar chart ---------- */
#odds .odds-groups{counter-reset:odds-group;gap:var(--space-4)}
#odds .odds-group{min-width:0;padding:var(--space-20) var(--space-24) var(--space-24);border:0;border-radius:0;background:var(--ground);box-shadow:inset 0 0 0 2px var(--line)}
#odds .odds-group h3{gap:var(--space-12);margin:0;font:600 var(--fs-label)/1.2 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink)}
#odds .odds-group h3::before{counter-increment:odds-group;content:counter(odds-group,decimal-leading-zero);display:inline-grid;place-items:center;min-width:28px;height:20px;padding:0 var(--space-4);background:var(--line);color:var(--ink-soft);letter-spacing:0;order:-1}
#odds .odds-group h3{justify-content:flex-start}
#odds .odds-group h3 .piece-card{margin-left:auto}
#odds .odds-group>.component-caption{margin:var(--space-8) 0 0;font:400 var(--fs-label)/1.5 var(--font-mono);color:var(--ink-soft)}
#odds .odds-bars{gap:var(--space-12);margin-top:var(--space-16)}
#odds .odds-option{gap:var(--space-8) var(--space-12);font:400 var(--fs-label)/1.4 var(--font-mono)}
#odds .odds-label{gap:var(--space-8);color:var(--ink-soft)}
#odds .odds-option strong{font:600 var(--fs-label)/1.4 var(--font-mono);color:var(--ink);font-variant-numeric:tabular-nums}
#odds .odds-column{height:12px;border-radius:0;background:var(--line);-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 8px,transparent 8px 10px);mask-image:repeating-linear-gradient(90deg,#000 0 8px,transparent 8px 10px)}
#odds .odds-column i{background:var(--ink-soft);transition:transform 480ms steps(12,end)}
#odds .is-picked .odds-label{color:var(--ink);font-weight:700}
#odds .is-picked .odds-label::before{content:"";flex:none;width:8px;height:8px;background:var(--glow)}
#odds .is-picked .odds-column i{background:var(--glow)}
#odds .odds-option .tag{min-height:20px;padding:var(--space-4) var(--space-8);border:0;border-radius:0;background:var(--glow);color:var(--ground);font:700 var(--fs-label)/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase}
@media(min-width:768px){#odds .odds-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1280px){#odds .odds-groups{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){#odds .odds-column i{transition:none}}

/* ---------- 4. UI pass ---------- */
/* Why this is private: one panel, three steps split by hairlines (no cards in a card). */
.privacy-band{border-radius:var(--radius)}
.privacy-steps{gap:0}
.privacy-step{padding:var(--space-16) var(--space-16) var(--space-8) 0;border:0;border-radius:0;background:transparent}
.privacy-step+.privacy-step{padding-left:var(--space-16);border-left:1px solid var(--line)}
@media(max-width:767px){.privacy-step,.privacy-step+.privacy-step{padding:var(--space-12) 0;border-left:0}.privacy-step+.privacy-step{border-top:1px solid var(--line)}}
.privacy-col{border-radius:var(--radius)}
/* What runs when you buy: a ruled list, not a grid of cards. */
.runtime-row{gap:0;border-top:1px solid var(--line)}
.runtime-card{border-radius:0;background:transparent;padding:var(--space-24) var(--space-16);border-right:1px solid var(--line);transform:none}
.runtime-card:last-child{border-right:0}
.runtime-card:hover{background:var(--tint)}
@media(max-width:1023px){
  .runtime-row{display:grid;grid-template-columns:minmax(0,1fr);overflow:visible;padding:0;mask-image:none;-webkit-mask-image:none}
  .runtime-card{flex:none;max-width:none;min-height:0;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--space-16);padding:var(--space-16) 0;border-right:0;border-bottom:1px solid var(--line)}
  .runtime-card svg{flex:none;width:40px;height:40px}
}
/* Body copy stays under 65 characters a line. */
.buy-proof>p,.proof-seed,#lookupStatus,.rail-section>p,.tech-section .tech-row dd,.privacy-split-note{max-width:65ch}
/* The licence tool: a plain stacked form. */
#ciphr-tool form{display:grid;gap:var(--space-8);max-width:65ch}
#ciphr-tool form textarea,#ciphr-tool form select,#ciphr-tool form input,#ciphr-tool>input{width:100%;max-width:65ch;min-height:44px;padding:var(--space-8) var(--space-12);border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--ink);font:400 var(--fs-body)/1.5 var(--font-body)}
#ciphr-tool form textarea{min-height:96px}
#ciphr-tool form label,#ciphr-tool>label{display:block;margin-top:var(--space-8);font:500 var(--fs-label)/1.4 var(--font-mono);letter-spacing:.04em;color:var(--ink-soft)}
#ciphr-tool>label{margin-top:var(--space-24)}
#ciphr-tool form .btn,#ciphr-tool>.btn{justify-self:start;margin-top:var(--space-8)}
#ciphrToolState{max-width:65ch;margin-top:var(--space-16);color:var(--ink-soft)}

/* ---------- 5. Rhythm pass 2026-09-28 (owner: "the words are jammed up") ----------
   One vertical rhythm on the 4pt scale: eyebrow to heading 8, heading to body 16,
   body to CTA 24, CTA to the next block 48. Body copy 65ch, fine print 60ch in a
   smaller muted block, buttons never touch text, disabled buttons carry a short
   reason beside them. Ids, data attributes and copy untouched. */
:root{--rh-eyebrow:var(--space-8);--rh-body:var(--space-16);--rh-cta:var(--space-24);--rh-block:var(--space-48);--rh-fine:60ch}

/* Headings and short copy wrap without one-word orphans. */
h1,h2,h3,.component-title,.kicker,summary,.line-row p,#closing-title{text-wrap:balance}
p,li,dd,figcaption,.component-caption{text-wrap:pretty}

/* Eyebrow sits 8 above its heading; the heading group keeps its air above. */
.kicker+h2,.kicker+.component-title{margin-top:var(--rh-eyebrow)}
.rail-section>header>.kicker,.rail-section>header>p.kicker{margin:0}

/* Body copy measure. */
.rail-section>p,.rail-section>header>.component-caption,.privacy-split-note,#journeyStatus{max-width:65ch}

/* Fine print: one smaller, muted block with its own spacing and measure. */
.demo-status,.runtime-status,.publication-detail,#collectionTerms,.tech-section .tech-limit,#launch .field-help,#ciphrToolState,#railHistoryNote{max-width:var(--rh-fine);font-size:.875rem;line-height:1.6;color:var(--ink-soft)}
.try-buy>.demo-status{margin-top:var(--rh-cta)}
.runtime-status,.publication-detail{margin-top:var(--rh-cta)}
.publication-detail+#collectionTerms{margin-top:var(--space-8)}
#rule>.btn{margin-top:var(--rh-cta)}
.privacy-strip{max-width:65ch;text-wrap:balance}

/* Disabled buttons read as disabled: dashed outline, muted label, no fill. */
.btn:disabled,.btn[aria-disabled=true]{opacity:1;border-style:dashed;border-color:color-mix(in srgb,var(--ink-soft) 60%,transparent);background:transparent;color:var(--ink-soft);box-shadow:none}
.btn-quiet:disabled{border-color:transparent}

/* Numbered steps: one grid, equal gaps, the number on its own line above the step. */
.launch-invitation ol,.wallet-journey ol{counter-reset:rh-step;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-24);margin:var(--space-32) 0 0;padding:0;list-style:none}
.launch-invitation li,.wallet-journey ol li{counter-increment:rh-step;display:grid;align-content:start;gap:var(--space-8);min-width:0;margin:0;padding-top:var(--space-16);border-top:1px solid var(--line)}
.launch-invitation li::before,.wallet-journey ol li::before{content:counter(rh-step,decimal-leading-zero);font:600 var(--fs-label)/1 var(--font-mono);letter-spacing:var(--track-label);color:var(--accent)}
.launch-invitation li strong{margin:0;line-height:1.25}
@media(min-width:768px){.launch-invitation ol{grid-template-columns:repeat(3,minmax(0,1fr))}.wallet-journey ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.wallet-journey ol{grid-template-columns:repeat(4,minmax(0,1fr))}}
.launch-invitation>.btn,.wallet-journey>.btn{margin-top:var(--rh-cta)}

/* Launch: the ZEC door. The disabled quote button leads, its reason beside it,
   the fine print below as a muted block, the claim form as its own group. */
#zcashPanel{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-12) var(--space-16);max-width:68ch;margin-top:var(--rh-block);padding-top:var(--space-32);border-top:1px solid var(--line)}
#zcashPanel>#ciphrQuote{order:1;margin:0}
#zcashPanel>#ciphrZecStatus{order:2;flex:1 1 20ch;margin:0;font-size:.875rem;line-height:1.5;color:var(--ink-soft)}
#zcashPanel>.field-help{order:3;flex:1 1 100%;margin:0;max-width:var(--rh-fine)}
#zcashPanel>.field-help:first-of-type{margin-top:var(--space-12)}
#zcashPanel>#ciphrDeposit,#zcashPanel>#ciphrReveal{order:4;flex:1 1 100%;display:grid;gap:var(--space-12);margin-top:var(--space-16)}
#zcashPanel>#ciphrDeposit[hidden],#zcashPanel>#ciphrReveal[hidden]{display:none}
#zcashPanel>#ciphrDeposit .btn,#zcashPanel>#ciphrReveal .btn{justify-self:start;margin:0}
#zcashPanel>#ciphrClaim{order:5;flex:1 1 100%;display:grid;gap:var(--space-8);margin-top:var(--space-32);padding-top:var(--space-32);border-top:1px solid var(--line)}
#ciphrClaim h3{margin:0 0 var(--space-8);font:600 var(--fs-h3)/1.3 var(--font-display)}
#ciphrClaim label,#ciphrDeposit label{margin-top:var(--space-8);font:500 var(--fs-label)/1.4 var(--font-mono);letter-spacing:.04em;color:var(--ink-soft)}
#ciphrClaim input,#ciphrDeposit input{width:100%;min-height:44px;padding:var(--space-8) var(--space-12);border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--ink);font:400 var(--fs-body)/1.5 var(--font-mono)}
#ciphrClaim .field-help{margin:var(--space-8) 0 0}
#ciphrClaim .btn{justify-self:start;margin-top:var(--space-16)}

/* Licence tool: the disabled buttons sit beside their reason. */
#ciphr-tool>#ciphrDecrypt{margin-top:var(--space-12)}
#ciphr-tool form .btn{margin-top:var(--space-16)}
#ciphrToolState{margin-top:var(--space-16)}

/* My pieces: label above the sample, the visor control as its own row with a reason. */
#samplePiecesLabel{margin:var(--rh-cta) 0 var(--space-8);font:500 var(--fs-label)/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
#privacyControls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-12) var(--space-16);margin-top:var(--rh-cta)}
#privacyControls>button{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:var(--space-12) var(--space-20);border:1px solid var(--ink);border-radius:12px;background:transparent;color:var(--ink);font:400 1rem/1.25 var(--font-body);cursor:pointer}
#privacyControls>button:hover:not(:disabled){background:var(--tint)}
#privacyControls>button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
#privacyControls>button:disabled{border-style:dashed;border-color:color-mix(in srgb,var(--ink-soft) 60%,transparent);color:var(--ink-soft);cursor:not-allowed}
#privacyControls>div{flex:1 1 24ch;margin:0;font-size:.875rem;line-height:1.5;color:var(--ink-soft)}
#privacyControls:has(>button:disabled)>div:empty::before{content:"Not open yet."}

/* Check a buy: the disabled button keeps air above and below. */
#checkForm .btn{margin-top:var(--space-16)}
#checkResult{font-size:.875rem;line-height:1.6;color:var(--ink-soft)}

/* Closing: heading, CTA row, note. */
#closing-title+.hero-actions{margin-top:var(--rh-cta)}
#closing .publication-note{margin-top:var(--space-16)}

/* Section air: a section that follows another keeps the 96 rhythm; the licence tool's
   file row stacks so its button never butts the input. */
.rail-section+.privacy-band{margin-top:var(--space-96)}
#ciphr-tool>#ciphrCipherFile{display:block}
/* The credits strip keeps 64 of air above the footer; phones and tablets already get 96 from the footer. */
@media(min-width:1024px){.privacy-strip{margin-bottom:var(--space-64)}}
/* machine.html: the privacy band follows the hero directly; give it air. */
.rail-hero+.privacy-band{margin-top:var(--space-48)}