/* Alticarta Studio stylesheet (2026-09-24, layout revised 2026-09-25, revision 2c;
   front page revision 2e, 2026-09-26).
   Tokens, fonts, backdrop, stats, features, story, pricing, footer, auth and
   paywall styles are the live page's (frontend/templates/index.html <style>),
   copied so the Studio keeps the current site's look. The page is three
   screens (studio.js setScreen): A (the front page, screen D of the 2e
   mockup), the hero with the showcase and the five tiles; B, the Studio
   with the panel at about a third and the viewer at about two thirds; C, the
   viewer filling the window. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #f5f0e8;
  --bg2:      #ede8de;
  --surface:  #faf7f2;
  --border:   #d4c8b0;
  --border2:  #c4b89a;
  --accent:   #8b6914;
  --accent2:  #b08a2a;
  --muted:    #a89878;
  --text:     #1e1a14;
  --subtext:  #6a5c42;
  --faint:    #ede5d4;
  --error:    #9e3a2a;
  /* The accent gold for SMALL text on a light card (revision 2e): the
     accent itself measures 4.76:1 on the opaque surface cream and about
     4.1:1 where a translucent card sits over the artwork's ridges; this
     deeper gold clears 4.5:1 there and still reads as the brand gold. */
  --accent-ink: #6f5310;
  /* Brand chocolate and cream (space-picker, 2026-10-09): the world
     picker's titles and names, and the cream on a gold-deep selection. */
  --chocolate: #2a2118;
  --cream:     #f4efe4;
  /* Warm stone stage for Earth (revision 1, 2026-09-25). Every other world
     gets the space tone through .arena[data-world="space"] (SPACE
     BACKDROP, below). */
  --arena:    #6f685c;
  --arena-2:  #857d6f;
  --arena-ink:   #fbf7ef;
  --arena-muted: #e4dccb;
  --arena-line:  rgba(255,255,255,.18);
  /* Screen B's top strip. */
  --studio-top: 52px;
  --studio-top-row: 52px;
  /* The display face (headings), named once (guided start, 2026-10-09).
     Text takes the body's own face by inheritance. */
  --font-display: 'Cormorant Garamond', serif;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  min-height: 100vh;
  overflow-x: hidden;
}
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── BACKDROP (live page) ─────────────────────────────────── */
.bg-contours { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0.10; }
.bg-contours svg { width: 100%; height: 100%; }
.bg-terrain {
  position: absolute; top: 0; left: 0; right: 0; height: 115vh; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(ellipse 42% 22% at 50% 9%, rgba(245,240,232,0.62) 0%, rgba(245,240,232,0.34) 40%, rgba(245,240,232,0) 100%),
    linear-gradient(180deg, transparent 0%, transparent 55%, rgba(229,219,201,0.35) 70%, rgba(245,240,232,0.85) 88%, var(--bg) 100%),
    url('/static/hero/terrain-bg.png');
  background-size: cover, cover, cover;
  background-position: center top, center top, center top;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* ── SCREENS ──────────────────────────────────────────────── */
body[data-screen="a"] #screen-b { display: none; }
body[data-screen="b"] #screen-a, body[data-screen="b"] #below { display: none; }
body[data-screen="c"] #screen-a, body[data-screen="c"] #below, body[data-screen="c"] #screen-b, body[data-screen="c"] .site-nav { display: none; }
body[data-screen="c"] { overflow: hidden; }

/* ── LAYOUT ───────────────────────────────────────────────── */
.wrap { max-width: 960px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }

/* ── TOP-RIGHT LINKS AND ACCOUNT NAV ──────────────────────── */
.site-nav { position: absolute; top: 18px; right: 22px; z-index: 900; display: flex; align-items: center; gap: 26px; }
.site-nav > a { font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--subtext); text-decoration: none; padding: 8px 0; }
.site-nav > a:hover { color: var(--accent); }
.account-nav { display: flex; align-items: center; gap: 14px; }
.account-nav .acct-link {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); background: rgba(250,247,242,0.82); border: 1px solid var(--border); border-radius: 2px;
  padding: 8px 14px; cursor: pointer; text-decoration: none; transition: border-color .18s, color .18s, background .18s;
  backdrop-filter: blur(3px);
}
.account-nav .acct-link:hover { border-color: var(--accent); background: var(--surface); }
.account-nav .acct-link::before { content: '\2726'; margin-right: 8px; color: var(--accent2); letter-spacing: 0; }
.account-nav .acct-name { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--subtext); }
.account-nav .acct-divider { color: var(--border2); }
/* Unverified email notice beside Sign out (verify-email, 2026-10-02):
   shown only to a signed-in customer whose email is not yet verified. On a
   narrow screen it sits on its own line under the buttons. */
.account-nav { position: relative; }
.account-nav .acct-verify {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.12em;
  color: var(--subtext); white-space: nowrap;
}
.account-nav .acct-verify a, .account-nav .acct-verify .acct-resend { color: var(--accent); text-decoration: underline; cursor: pointer; }
.account-nav .acct-verify .acct-resend { font: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; }
.account-nav .acct-verify .acct-verify-short { display: none; }
.account-nav .acct-email-short { display: none; }
body[data-screen="b"] .site-nav { top: 8px; right: 20px; }
@media (max-width: 680px) {
  .site-nav { gap: 14px; top: 10px; right: 12px; }
  .site-nav > a { font-size: 9.5px; letter-spacing: 0.14em; }
  .account-nav { gap: 8px; }
  .account-nav .acct-name { display: none; }
  .account-nav .acct-verify {
    position: absolute; top: 100%; right: 0; margin-top: 6px; padding: 3px 8px;
    background: rgba(250, 247, 242, 0.9); border-radius: 2px;
  }
  .account-nav .acct-verify .acct-verify-long { display: none; }
  .account-nav .acct-verify .acct-verify-short { display: inline; }
  /* Email settings as one short word, so the section links keep their room. */
  .account-nav #acct-email { display: inline-flex; padding: 8px 10px; align-self: stretch; align-items: center; }
  .account-nav #acct-email::before { display: none; }
  .account-nav .acct-email-long { display: none; }
  .account-nav .acct-email-short { display: inline; }
  body[data-screen="b"] .site-nav > a { display: none; }
}
/* MakerBench (2026-10-16). On the front page at 680 px and below the nav
   wraps: the account control stays top right, the section links and
   MakerBench run on a second row under it. On the Studio at 1239 px and
   below the top row has no room beside the logo (the owner's row needs 1198
   px), so the guided tour and MakerBench sit together on a second row of
   the top bar (#gs-link-strip, #mb-strip), the tour at the left and
   MakerBench at the right, each with its own tap area; the section links
   and the account control stay on the first row. At 1024 to 1239 px that
   second row is 38 px, so --studio-top grows to the two-row height. */
.mb-strip { display: none; }
.st-break { display: none; }
@media (max-width: 1239px) {
  body[data-screen="b"] .site-nav > .mb-nav { display: none; }
  .studio-top .st-break { display: block; flex: 1 0 100%; height: 0; }
  .studio-top .mb-strip { display: inline-flex; align-items: center; margin-left: auto; margin-top: -6px; min-height: 44px;
    font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--subtext); text-decoration: none; white-space: nowrap; }
  .studio-top .mb-strip:hover { color: var(--accent); }
}
@media (min-width: 1024px) and (max-width: 1239px) {
  :root { --studio-top: 91px; }
}
@media (max-width: 899px) {
  /* The owner's name and its divider give way first on a narrow bar. */
  body[data-screen="b"] .account-nav .acct-name, body[data-screen="b"] .account-nav .acct-divider { display: none !important; }
}

/* The account menu (account-menu, 2026-10-16). A signed-in customer's links
   (name, Founding badge, unverified notice, Email settings, Sign out) sit
   behind one Account button so the top bar fits at every width; studio.js
   updateAccountNav sets data-menu="on" on #account-nav for a customer with no
   owner session. Otherwise the button is hidden and the panel is
   display: contents, so the signed-out row and the owner's row are exactly the
   row they always were. Jost 12 px label, the brand's gold-deep #6F5310 on
   cream (6.3:1), 2 px corner as the bar's other buttons; rows are 14 px. The
   panel is a disclosure (aria-expanded), not an ARIA menu. */
.account-nav .acct-toggle { display: none; position: relative; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px;
  font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  color: #6F5310; background: rgba(250,247,242,0.82); border: 1px solid #6F5310; border-radius: 2px; cursor: pointer;
  backdrop-filter: blur(3px); transition: background .18s; }
.account-nav .acct-toggle:hover { background: var(--surface); }
.account-nav .acct-toggle:focus-visible { outline: 2px solid #6F5310; outline-offset: 2px; }
.account-nav .acct-chev { flex: none; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .18s; }
.account-nav[data-open="true"] .acct-chev { margin-top: 3px; transform: rotate(225deg); }
.account-nav .acct-dot { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: #6F5310; border: 2px solid #F4EFE4; box-sizing: content-box; }
.account-nav .acct-dot[hidden] { display: none; }
.account-nav .acct-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.account-nav .acct-panel { display: contents; }
.account-nav[data-menu="on"] .acct-toggle { display: inline-flex; }
.account-nav[data-menu="on"] .acct-panel { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 2; flex-direction: column; align-items: stretch;
  width: min(320px, calc(100vw - 24px)); padding: 6px 0; background: var(--surface); border: 1px solid var(--border); border-radius: 2px; box-shadow: 0 8px 24px rgba(42,33,24,0.16); }
.account-nav[data-menu="on"][data-open="true"] .acct-panel { display: flex; }
.account-nav[data-menu="on"] .acct-panel .acct-name { display: block !important; padding: 10px 14px 4px; font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--chocolate); overflow-wrap: anywhere; }
.account-nav[data-menu="on"] .acct-panel .acct-divider { display: none !important; }
.account-nav[data-menu="on"] .acct-panel .founding-badge { align-self: flex-start; margin: 2px 14px 6px; padding: 3px 8px; font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; }
.account-nav[data-menu="on"] .acct-panel .acct-verify { position: static; margin: 4px 0; padding: 10px 14px 4px; background: none; border-top: 1px solid var(--border); border-radius: 0;
  font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 0; white-space: normal; color: var(--subtext); }
.account-nav[data-menu="on"] .acct-panel .acct-verify .acct-verify-long { display: inline; }
.account-nav[data-menu="on"] .acct-panel .acct-verify .acct-verify-short { display: none; }
.account-nav[data-menu="on"] .acct-panel .acct-verify .acct-verify-sep { display: none; }
.account-nav[data-menu="on"] .acct-panel #acct-verify-act { display: block; }
.account-nav[data-menu="on"] .acct-panel .acct-verify .acct-resend { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0; font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 500; text-align: left; letter-spacing: 0; color: #6F5310; text-decoration: underline; }
/* Downloads left (pol-account): a plain text block, not a row; the plan line
   and the one-time credits at 14 px, their detail at 13 px. */
.account-nav .acct-left { display: none; }
.account-nav[data-menu="on"] .acct-panel .acct-left:not([hidden]) { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; padding: 10px 14px 8px;
  border-top: 1px solid var(--border); font-family: 'Jost', sans-serif; letter-spacing: 0; }
.account-nav .acct-left-head { margin-bottom: 4px; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #6F5310; }
.account-nav .acct-left-lines { display: flex; flex-direction: column; gap: 2px; }
.account-nav .acct-left-main { font-size: 14px; color: var(--chocolate); }
.account-nav .acct-left-sub { font-size: 13px; color: var(--subtext); }
.account-nav[data-menu="on"] .acct-panel .acct-link { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-radius: 0; background: none; backdrop-filter: none;
  font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; text-align: left; color: var(--chocolate); }
.account-nav[data-menu="on"] .acct-panel .acct-link::before { display: none; }
/* The 680 px rule for Email settings is keyed on the id; this outranks it. */
.account-nav[data-menu="on"] .acct-panel #acct-email { display: flex; align-self: auto; padding: 0 14px; }
.account-nav[data-menu="on"] .acct-panel .acct-link:hover { background: var(--faint); }
.account-nav[data-menu="on"] .acct-panel .acct-email-long { display: inline; }
.account-nav[data-menu="on"] .acct-panel .acct-email-short { display: none; }
.account-nav[data-menu="on"] .acct-panel :focus-visible { outline: 2px solid #6F5310; outline-offset: -2px; }
@media (max-width: 680px) {
  .account-nav .acct-toggle { min-height: 44px; }
  /* 44 px tall on the bar's 32 px row: the box grows up and down evenly. */
  body[data-screen="b"] .account-nav .acct-toggle { margin: -6px 0; }
  /* A customer's Account button is 44 px, 12 px more than the row it replaces,
     so the front page's banner steps down by the same amount. */
  body[data-screen="a"][data-acct-menu="on"] .mb-banner { margin-top: 84px; }
}
@media (max-width: 680px) {
  body[data-screen="a"] .site-nav { left: 12px; flex-wrap: wrap; justify-content: flex-end; row-gap: 0; }
  body[data-screen="a"] .site-nav > .account-nav { order: -1; flex: 1 0 100%; justify-content: flex-end; }
  .studio-top .mb-strip { font-size: 9.5px; letter-spacing: 0.14em; }
}
/* The MakerBench banner (2026-10-16): the front page only, a chocolate
   feature strip under the top navigation and above the hero, 96 px at 1440:
   the tag and the headline on one line, the sentence under them, three
   photos and a gold button on the right. The whole strip is one link. It
   takes the room the hero kept clear for the nav (the hero grid's top
   padding), and on a desktop the hero gives up the strip's height. Cream
   on chocolate 13.78:1, chocolate on gold 4.90:1 (12.59:1 under the shine's
   peak). The shine runs under the label, never over it (negative z-index in
   an isolated host), so a label's contrast does not move during the sweep. */
.mb-banner { display: none; }
body[data-screen="a"] .mb-banner { display: block; position: relative; z-index: 2; margin-top: 62px; padding: 11px 24px; min-height: 96px; box-sizing: border-box;
  background: #2A2118; color: #F4EFE4; text-align: left; text-decoration: none;
  border-top: 1px solid #B08A2A; border-bottom: 1px solid #B08A2A; }
.mb-banner:focus-visible { outline: 2px solid #B08A2A; outline-offset: -5px; }
.mb-in { display: flex; align-items: center; gap: 24px; width: 100%; max-width: 1392px; margin: 0 auto; }
.mb-text { flex: 1 1 auto; min-width: 0; display: block; }
.mb-top { display: flex; align-items: center; gap: 14px; }
.mb-head { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 500; line-height: 1.05; letter-spacing: 0.01em; color: #F4EFE4; }
.mb-sub { display: block; margin-top: 2px; font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 400; line-height: 1.35; letter-spacing: 0.02em; color: #F4EFE4; }
.mb-photos { display: flex; flex: none; gap: 10px; }
.mb-photos img { display: block; width: 96px; height: 72px; box-sizing: border-box; object-fit: cover; border: 1px solid #B08A2A; border-radius: 3px; }
.mb-chip { display: inline-block; flex: none; padding: 0 12px; border-radius: 10px; background: #B08A2A; color: #2A2118; font-family: 'DM Mono', monospace; font-size: 12px; line-height: 20px;
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; --sw: 244, 239, 228; --swa: 0.9; }
.mb-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 48px; padding: 0 28px; border-radius: 2px; background: #B08A2A; color: #2A2118;
  font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; --sw: 244, 239, 228; --swa: 0.9; }
.mb-banner:hover .mb-btn { background: #F4EFE4; }
.mb-shine { position: relative; overflow: hidden; isolation: isolate; }
.mb-shine::after { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, rgba(var(--sw), 0) 0%, rgba(var(--sw), var(--swa)) 50%, rgba(var(--sw), 0) 100%);
  transform: translateX(-130%) skewX(-20deg); animation: mb-sweep 5s ease-in-out infinite; }
.mb-btn.mb-shine::after { animation-delay: 0.35s; }
@keyframes mb-sweep { 0% { transform: translateX(-130%) skewX(-20deg); } 34%, 100% { transform: translateX(330%) skewX(-20deg); } }
@media (prefers-reduced-motion: reduce) { .mb-shine::after { animation: none; display: none; } }
body[data-screen="a"]:not([data-arrival="ad"]) .hero-grid { padding-top: 0; }
/* A place link (ad-landing): until the Studio opens on the place's model
   (studio.js landOnPlace), the front page under the nav is not shown, only
   a line saying the model is coming. The Studio drops the mark as it
   opens, so the front page shows when the visitor goes back to it. */
body[data-screen="a"][data-place-link] #screen-a, body[data-screen="a"][data-place-link] .mb-banner,
body[data-screen="a"][data-place-link] #below { visibility: hidden; }
body[data-screen="a"][data-place-link]::after { content: 'Loading your model'; position: fixed; left: 16px; right: 16px; top: 42vh; z-index: 3;
  text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 28px; color: var(--subtext); }
/* An ad's visitor (?ref=, ad-landing): the banner sits under the hero, so
   the hero keeps the room it keeps for the nav and the banner needs none. */
body[data-screen="a"] .mb-banner.mb-after { margin-top: 0; }
@media (min-width: 1024px) {
  /* The showcase keeps its height beside the place search (merge-home,
     2026-10-17): the box made the left column, and with it the hero row,
     taller, and the stage stretched with the row (354 to 432 px at
     1440x900). The hero takes the box's room on top of its old minimum and
     the right column stops that room short of the row, from the top, so
     the showcase keeps its old place and size whether the left column or
     the viewport sets the row; everything below the box moves down by the
     box's room. --hs-room is the box (52 px, .home-search .search-input)
     and its top margin (26 px at every width: .home-search's margin comes
     after, and so wins over, the 20 px of the 1024 to 1439 block, measured
     78 px at 1280x800). */
  body[data-screen="a"] .hero { --hs-room: 78px; min-height: calc(100vh - 158px + var(--hs-room)); }
  body[data-screen="a"] .hero-right { align-self: start; height: calc(100% - var(--hs-room)); }
}
@media (max-width: 1023px) {
  body[data-screen="a"] .mb-banner { margin-top: 56px; }
}
@media (max-width: 1023px) and (min-width: 681px) {
  .mb-photos { display: none; }
}
@media (max-width: 680px) {
  body[data-screen="a"] .mb-banner { margin-top: 72px; padding: 12px; min-height: 0; }
  body[data-screen="a"] .mb-banner.mb-after { margin-top: 0; }
  body[data-screen="a"][data-arrival="ad"] .hero-grid { padding-top: 72px; }
  body[data-screen="a"][data-arrival="ad"][data-acct-menu="on"] .hero-grid { padding-top: 84px; }
  body[data-screen="a"] .hero { padding-top: 4px; }
  .mb-in { flex-wrap: wrap; gap: 8px 12px; }
  .mb-text { flex: 1 1 0; }
  .mb-top { flex-direction: column; align-items: flex-start; gap: 3px; }
  .mb-sub { display: none; }
  .mb-head { font-size: 26px; }
  .mb-photos { order: 2; }
  .mb-photos img { width: 84px; height: 63px; }
  .mb-photos img:nth-child(n+2) { display: none; }
  .mb-btn { order: 3; flex: 1 0 100%; min-height: 44px; }
}

/* ── SCREEN A: THE FRONT PAGE (revision 2e) ───────────────── */
/* Two rows: the hero grid takes what the tile row leaves of the viewport
   (the 1fr row grows past that only when the left column is taller), so
   the header, the search, the showcase and the five tiles share the first
   screen at 1440x900 and 1024x768 with no scrolling. */
.hero { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 24px 24px 28px; min-height: 100vh; display: grid; grid-template-rows: 1fr auto; }
.hero-grid { min-height: 0; display: grid; grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); gap: 32px; align-items: center; padding-top: 56px; }
.hero-left { position: relative; min-width: 0; }
/* A cream bloom behind the left column: the live page's bloom sits at the
   page centre (index.html:71-74), which here is the showcase, and the
   header text needs 4.5:1 over the artwork's ridges. */
.hero-left::before { content: ''; position: absolute; inset: -48px -40px -32px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 48%, rgba(245,240,232,0.96) 0%, rgba(245,240,232,0.94) 66%, rgba(245,240,232,0.55) 86%, rgba(245,240,232,0) 100%); }
/* The right column fills the row, so the showcase is sized from the
   viewport: the arena takes the column above its caption, capped at the
   height the 2d showcase had on a tall screen. */
.hero-right { min-width: 0; height: 100%; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; }

/* The live page's header at the live page's rules (index.html:96-192). */
header { padding: 0; text-align: center; animation: fadeUp 0.8s ease both; }
.alticarta-logo { display: block; width: auto; height: 64px; margin: 0 auto 24px; }
.logo-rule {
  display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px;
  color: var(--subtext); font-size: 12px; letter-spacing: 0.4em;
  font-family: 'Jost', sans-serif; font-weight: 300; text-transform: uppercase;
}
.logo-rule::before, .logo-rule::after { content: ''; flex: 1; max-width: 80px; height: 1px; background: var(--border); }
.logo {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(52px, 10vw, 92px); letter-spacing: 0.22em; line-height: 1;
  color: var(--text); text-transform: uppercase;
}
.logo .alta { color: var(--accent); }
/* Same clamp shape as the live page (index.html:140) with the vw term scaled
   to the column: 92 px at 1440 as on the live page, about 65 px at 1024,
   where the live 92 px overflows the two-column hero. */
@media (min-width: 1024px) { .hero .logo { font-size: clamp(52px, 6.4vw, 92px); } }
/* Between 1024 and 1439 the first screen must still hold the tiles with
   their 64 px images (revision 2e-2): the header's spacing tightens by
   about 50 px in all, the type is unchanged. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .hero-grid { padding-top: 44px; }
  .hero .alticarta-logo { height: 48px; margin-bottom: 14px; }
  .hero .tagline-primary { margin-top: 14px; }
  .hero .tagline-sub { margin-top: 8px; }
  .hero .front-line { margin-top: 22px; }
  .home-search { margin-top: 20px; }
  .make { margin-top: 16px; }
}
.logo-sub {
  font-family: 'Jost', sans-serif; font-weight: 300; font-size: 12px;
  letter-spacing: 0.55em; text-transform: uppercase; color: var(--subtext); margin-top: 12px;
}
.tagline { margin-top: 20px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 18px; color: var(--subtext); font-weight: 300; letter-spacing: 0.04em; }
.tagline-primary { margin-top: 20px; font-size: 22px; font-weight: 400; color: var(--text); letter-spacing: 0.03em; }
.tagline-sub { margin-top: 10px; font-size: 15px; font-style: italic; font-weight: 400; color: var(--text); max-width: 680px; margin-left: auto; margin-right: auto; line-height: 1.55; letter-spacing: 0.02em; }
/* The wordmark's 0.22em tracking at 52px overflowed a 390 px phone (it
   measures 384 px wide on the live page, which has the same rule and
   needs the same fix). Studio only. */
@media (max-width: 480px) {
  .logo { font-size: clamp(30px, 10vw, 40px); letter-spacing: 0.16em; }
  /* The tagline at 12 px (Jost) with 0.4em tracking left the rules either side
     of it 2 px long at 390; 0.28em gives them back their 20 px. */
  .logo-rule { letter-spacing: 0.28em; }
}

/* The front page's way in (2026-10-08), where the search box and Start
   building were: one line to the tiles below. Jost (the page's
   font) at body size, the brand's muted ink, not gold: nothing to click. */
.front-line { margin: 30px auto 0; max-width: 540px; text-align: center; font-family: 'Jost', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.6; letter-spacing: 0.02em; color: #6A5C42; }
/* What will make it? (home-machines, 2026-10-18): the machines under the
   search box, as wide as it. Each card is a button, so its Start is the
   one gold (gold-deep, 6.3:1 on the card); names in chocolate, file lines
   in muted. Three across, two when Laser is not offered; one row each,
   44 px or taller, on a phone. */
.home-machines { position: relative; z-index: 4; max-width: 560px; margin: 22px auto 0; text-align: left; }
.hm-label { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; color: var(--subtext);
  font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase; }
.hm-label::before, .hm-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.hm-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.hm-card { display: flex; flex-direction: column; gap: 5px; min-height: 44px; padding: 12px 12px 11px; text-align: left; cursor: pointer;
  background: rgba(250,247,242,0.9); border: 1px solid var(--border); border-radius: 2px; color: var(--text);
  font-family: 'Jost', sans-serif; transition: border-color .18s, background .18s; }
.hm-card:hover { border-color: var(--accent-ink); background: rgba(250,247,242,0.98); }
.hm-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hm-title { font-size: 15px; font-weight: 500; letter-spacing: 0.01em; color: var(--chocolate); }
.hm-files { flex: 1; font-size: 12.5px; line-height: 1.45; color: var(--subtext); }
.hm-go { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-ink); }
@media (max-width: 680px) {
  .home-machines { margin-top: 16px; }
  .hm-row { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; gap: 6px; }
  .hm-card { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; }
  .hm-title { font-size: 14px; }
  .hm-files { font-size: 12px; line-height: 1.35; }
}
/* The front page's place search (home-search, 2026-10-17): the Studio's
   search box, and one list under it, over the page, with each row labeled
   by what it builds. Labels are Jost 12 px, chocolate on the cream panel;
   a surveyed lake's in abyssal (the brand's survey color, 8.9:1 on the
   panel), an estimated one's in muted. Rows are 52 px tall. */
.home-search { position: relative; z-index: 5; max-width: 560px; margin: 26px auto 0; text-align: left; }
.home-search .search-input { min-height: 52px; }
.hs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hs-panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; max-height: min(62vh, 460px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 28px rgba(42,33,24,0.16); }
.hs-panel[hidden], .hs-status[hidden] { display: none; }
.hs-status { padding: 12px 14px; font-family: 'Jost', sans-serif; font-size: 13px; line-height: 1.5; color: var(--subtext); }
.hs-results { list-style: none; }
.hs-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 9px 14px; text-align: left; font: inherit;
  background: none; border: 0; border-bottom: 1px solid var(--faint); cursor: pointer; color: var(--text); transition: background .15s; }
.hs-results li:last-child .hs-row { border-bottom: 0; }
.hs-row:hover, .hs-row.on { background: var(--faint); }
.hs-row.on { box-shadow: inset 2px 0 0 var(--accent-ink); }
.hs-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.hs-name { font-family: 'Cormorant Garamond', serif; font-size: 19px; line-height: 1.2; color: var(--text); }
.hs-sub { font-family: 'Jost', sans-serif; font-size: 12px; line-height: 1.4; letter-spacing: 0.02em; color: var(--subtext);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-label { flex-shrink: 0; max-width: 46%; padding: 3px 8px; border: 1px solid var(--border2); border-radius: 2px;
  font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500; line-height: 1.35; letter-spacing: 0.02em; color: var(--chocolate); text-align: center; }
.hs-label.surv, .hs-label.water { color: #204a5e; border-color: rgba(32,74,94,0.45); }
.hs-label.est { color: var(--subtext); }
/* The showcase (revision 2e): the same translucent arena as revision 2d,
   with the head, the strip, the readouts and the scale bar hidden on the
   front page; one caption below it carries the place. The stage is the
   whole arena, so the model is framed on the height the row leaves. */
/* order: setScreen re-appends the arena to the column after the caption
   on every return to the front page, so the flex order, not the DOM, puts
   the caption under the showcase. */
.arena.showcase { flex: 1 1 auto; height: auto; min-height: 0; max-height: 640px; order: 0; }
.arena.showcase .arena-head, .arena.showcase .prov, .arena.showcase .arena-error, .arena.showcase .actionbar, .arena.showcase .scalebar { display: none; }
.arena.showcase .stage { height: auto; min-height: 0; }
/* On a cream chip, like the stats note: the caption sits on the artwork,
   where the ink alone measured under 4.5:1 against the darker ridges. The
   badge ink is darker than the parchment badge's (#4a7a5c measures 3.8:1
   on the chip at 10 px; #35634a measured 4.44:1 at 1024x768). */
.showcase-caption { flex: none; order: 1; display: table; margin: 0 auto; padding: 6px 14px; background: rgba(245,240,232,0.9); border-radius: 2px;
  font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; letter-spacing: 0.04em; color: var(--text); line-height: 1.5; text-align: center; }
.showcase-caption .lake-badge.surv { color: #2f5a42; margin-right: 4px; }

/* What we make: the tile row under the hero grid. */
.make { margin-top: 28px; }
.make-rule { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; color: var(--subtext); font-family: 'DM Mono', monospace; font-size: 9.5px; font-weight: 400; letter-spacing: 0.35em; text-transform: uppercase; }
.make-rule::before, .make-rule::after { content: ''; flex: 1; height: 1px; background: var(--border); }
/* The label on a cream chip: the rule crosses the artwork's ridges, where
   the ink alone measured 1.0 to 1.7:1 at the worst pixel. */
.make-rule-text { display: inline-block; padding: 4px 12px; background: rgba(245,240,232,0.9); border-radius: 2px; }
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
/* A translucent light card with a thin warm border; gold border on hover;
   the page's :focus-visible ring for the keyboard. */
.tile { display: flex; flex-direction: column; gap: 8px; min-height: 44px; padding: 16px 16px 14px; text-align: center; cursor: pointer;
  background: rgba(250,247,242,0.86); border: 1px solid var(--border); border-radius: 2px; color: var(--text); font-weight: 300;
  backdrop-filter: blur(3px); transition: border-color .18s, background .18s; }
.tile:hover { border-color: var(--accent); background: rgba(250,247,242,0.96); }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The tile's image (revision 2e-2): one 220x200 box per tile, centred above
   the title, inside the button so a click on it is a click on the tile.
   Renders are 440x400 PNGs and the two placeholder drawings 220x150 SVGs;
   object-fit keeps each within the box. 92 px tall from 1440 up, 64 px
   below, where the first screen has less room (the ruling of 2026-09-26). */
.tile-art { display: block; width: 101px; height: 92px; object-fit: contain; align-self: center; margin-bottom: 2px; }
@media (max-width: 1439px) { .tile-art { width: 70px; height: 64px; } }
.tile-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; line-height: 1.1; color: var(--text); }
.tile-line { flex: 1; font-size: 12.5px; line-height: 1.55; letter-spacing: 0.01em; color: var(--subtext); }
.tile-action { margin-top: 4px; font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-ink); }

/* Below the fold (revision 2e): the stats band opens it, then Made for
   your machine, then the sections the 2d page had, then the closing bar. */
#below > .stats { margin-top: 36px; }
/* On a cream chip: the note sits on the artwork's tail, where the ink alone
   measured 3.6:1 against the darker ridges. */
.stats-note { display: table; margin: 10px auto 0; padding: 5px 12px; background: rgba(245,240,232,0.9); border-radius: 2px; }
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.way { background: var(--surface); padding: 28px 26px; }
.way-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; color: var(--text); }
.way-desc { font-size: 13px; line-height: 1.7; letter-spacing: 0.01em; color: var(--subtext); }
.tag.soon { color: var(--subtext); border-color: var(--border2); }
/* The new section's rule label in --subtext rather than the live page's
   --muted, which measures 2.5:1 on the parchment. */
#machine .section-rule { color: var(--subtext); }
.closing { margin-top: 72px; padding: 36px 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  border: 1px solid var(--border); background: var(--surface); box-shadow: 0 2px 16px rgba(100,80,40,0.06); }
.closing-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(26px, 3.4vw, 34px); font-weight: 300; letter-spacing: 0.03em; color: var(--text); }
.closing .start-btn { padding: 16px 36px; font-size: 12px; min-height: 52px; }
/* MakerBench (2026-10-16): under the tiles on the front page (photo beside
   the copy), above the footer on the Studio (copy beside the button). The
   panel is the closing bar's; the type is the page's own. */
.mb-block { margin-top: 36px; display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: center; padding: 28px;
  border: 1px solid var(--border); background: var(--surface); box-shadow: 0 2px 16px rgba(100,80,40,0.06); }
.mb-photo { display: block; width: 100%; height: auto; border: 1px solid var(--border); }
.mb-title { margin: 0 0 12px; font-family: 'Cormorant Garamond', serif; font-size: clamp(28px, 4vw, 40px); font-weight: 300; letter-spacing: 0.04em; line-height: 1.1; color: var(--text); }
.mb-line { margin: 0; font-size: 15px; line-height: 1.7; letter-spacing: 0.01em; color: var(--text); }
.mb-small { margin: 10px 0 0; font-size: 13px; line-height: 1.7; letter-spacing: 0.01em; color: var(--subtext); }
.mb-open { margin-top: 22px; min-height: 52px; text-decoration: none; }
.mb-block-b { margin-top: 28px; grid-template-columns: 1fr auto; }
.mb-block-b .mb-open { margin-top: 0; }
@media (max-width: 680px) {
  .mb-block, .mb-block-b { grid-template-columns: 1fr; gap: 20px; padding: 22px 20px; }
  .mb-block-b .mb-open { justify-self: start; }
}

/* ── SCREEN B: THE STUDIO ─────────────────────────────────── */
.studio { position: relative; z-index: 1; }
.studio-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; height: var(--studio-top); padding: 0 20px; border-bottom: 1px solid var(--border); background: rgba(250,247,242,0.78); backdrop-filter: blur(4px); }
.mini-logo { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 300; letter-spacing: 0.3em; text-transform: uppercase; color: var(--subtext); text-decoration: none; line-height: 1; }
.mini-logo span { color: var(--accent); }
.studio-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 32fr) minmax(0, 68fr); height: calc(100vh - var(--studio-top)); }
.sidebar { display: flex; flex-direction: column; height: 100%; min-height: 0; border-right: 1px solid var(--border); background: rgba(250,247,242,0.6); }
.decks { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
/* The settings column is the decks alone (studio layout, 2026-10-07): the
   panel foot that sat under them moved into the action bar under the
   preview, so every step runs to the bottom of the column. */
.sidebar .decks { padding-bottom: 20px; }
/* Phone only: Generate model at the bottom of the settings. */
.phone-generate { display: none; }
/* The painted model's colored Bambu/Orca 3MF (3mf-colors): one checkbox row
   at the end of the Color step, in the settings' own ink. */
.colors3mf { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; margin-top: 12px; font-size: 11px; line-height: 1.4; color: var(--subtext); cursor: pointer; }
.colors3mf[hidden] { display: none; }
.colors3mf input { flex: 0 0 18px; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.arena-col { display: flex; flex-direction: column; min-height: 0; height: 100%; padding: 12px 14px 12px 10px; gap: 12px; }
.arena-slot { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.arena-slot .arena { flex: 1; min-height: 0; height: auto; }
/* The stage takes what the head and the credit strip leave, down to 240 px,
   so the strip is never clipped by the arena's overflow (at 1024 x 768 the
   380 px stage minimum pushed the whole strip out of the arena). */
.arena-slot .arena .stage { min-height: 240px; }
/* Every mode on a desktop (laser-bar, all modes, 2026-10-08): the arena is
   never shorter than its own content. The column was held to the screen's
   height (.studio-grid, .arena-col height 100%, .arena-slot min-height 0)
   and the arena clips (.arena overflow hidden), so once the stage reached
   its 240 px floor the rest was cut from the arena's bottom, the action
   bar: at 1280 x 720 a 3D print or CNC lake lost 66.5 px before Generate
   and 87.8 px after, Mars 170.8 px, and Generate model and Buy once took no
   click. Now the arena keeps at least its content (flex-shrink 0, content
   basis); where the screen holds it all, the column is the screen's height
   and the arena grows into what is left, as before; where it does not, the
   column runs past the screen and the page scrolls; the settings column
   takes the row's height and scrolls inside as before (contain: size, so
   its own length never makes the row taller). Not sticky: a sticky column
   changed how the page's text is drawn (25,876 pixels of glyph edges at
   1440 x 900, every box in place), and where nothing was cut the page must
   stay as it was. */
@media (min-width: 1024px) {
  .studio-grid { height: auto; min-height: calc(100vh - var(--studio-top)); }
  .sidebar { height: auto; contain: size; }
  .arena-col { height: auto; min-height: calc(100vh - var(--studio-top)); }
  .arena-slot { flex: 1 0 auto; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .viewer-cards .feature { padding: 10px 12px 11px; }
  .viewer-cards .feature-glyph { margin-bottom: 5px; }
  .viewer-cards .feature-title { font-size: 16px; margin-bottom: 3px; }
  .viewer-cards .feature-desc { font-size: 12px; line-height: 1.45; }
}
.viewer-cards { flex-shrink: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.viewer-cards .feature { padding: 14px 16px 15px; }
.viewer-cards .feature-glyph { margin-bottom: 8px; font-size: 15px; }
.viewer-cards .feature-title { font-size: 17px; margin-bottom: 5px; }
.viewer-cards .feature-desc { font-size: 12.5px; line-height: 1.5; }
.viewer-cards .lake-badge { font-size: 12px; }

/* ── DECKS ────────────────────────────────────────────────── */
.deck {
  background: var(--surface); border: 1px solid var(--border); position: relative;
  box-shadow: 0 2px 16px rgba(100,80,40,0.06); transition: border-color .2s;
}
.deck.open { border-color: var(--accent2); }
.deck::before, .deck::after {
  content: ''; position: absolute; width: 14px; height: 14px; border-color: var(--accent); border-style: solid; opacity: .35; pointer-events: none;
}
.deck::before { top: 6px; left: 6px; border-width: 1px 0 0 1px; }
.deck::after { bottom: 6px; right: 6px; border-width: 0 1px 1px 0; }
.deck-head {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 14px 16px;
  background: none; border: 0; cursor: pointer; text-align: left; color: var(--text);
}
.deck-n {
  display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
  font-family: 'DM Mono', monospace; font-size: 12px; color: var(--accent);
  background: var(--bg2); border: 1px solid var(--border); box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
.deck-text { min-width: 0; flex: 1; }
.deck-title { display: block; font-family: 'Cormorant Garamond', serif; font-size: 23px; line-height: 1.15; font-weight: 500; color: var(--text); }
.deck-summary { display: block; font-size: 12.5px; color: var(--subtext); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.deck-chev { color: var(--muted); transition: transform .3s; flex-shrink: 0; }
.deck.open .deck-chev { transform: rotate(180deg); }
.deck-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; }
.deck.open .deck-body { grid-template-rows: 1fr; }
.deck-body > div { overflow: hidden; }
.deck-inner { border-top: 1px solid var(--border); padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 18px; }
@media (prefers-reduced-motion: reduce) { .deck-body, .deck-chev { transition: none; } }

.lab {
  display: block; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--subtext); margin-bottom: 8px;
}
.note { font-size: 13px; color: var(--subtext); line-height: 1.5; letter-spacing: 0.02em; margin-top: 6px; }
.note.warn { color: var(--error); }
.tag {
  display: inline-block; padding: 2px 7px; border-radius: 10px; border: 1px solid var(--border);
  font-family: 'DM Mono', monospace; font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); vertical-align: middle; white-space: nowrap;
}
.tag.gold { color: var(--accent); border-color: var(--accent2); }

/* Pills (live page .mode-pill-group), 44 px tall */
.pills { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 2px; overflow: hidden; background: var(--surface); }
.pills.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.mode-pill {
  flex: 1; min-height: 44px; padding: 12px 8px; background: transparent; border: 0;
  font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--subtext); cursor: pointer; transition: all .2s; white-space: nowrap;
}
.mode-pill:hover { color: var(--text); }
.mode-pill.active { background: var(--accent); color: var(--surface); }
.mode-pill[disabled] { cursor: not-allowed; opacity: .45; }
/* Laser modes (2026-10-09, studio.js syncLaserModes): a kind of place a
   laser kit cannot be made from, while Laser is chosen. Readable at full
   strength (#6A5C42, never the faded [disabled] look) with a dashed edge;
   the one already chosen keeps a light tint instead of the gold fill. */
.mode-pill.unavail, .mode-pill.unavail:hover { color: #6A5C42; cursor: not-allowed; outline: 1px dashed #6A5C42; outline-offset: -5px; }
.mode-pill.unavail.active { background: rgba(106,92,66,0.08); color: #6A5C42; outline-width: 2px; }
.laser-modes-note { margin-top: 8px; padding: 6px 10px; border-left: 2px solid #6A5C42; color: #6A5C42; font-size: 13px; }
.laser-modes-note[hidden] { display: none; }
.laser-modes-note.flash { animation: laser-modes-flash 1.6s ease-out; }
@keyframes laser-modes-flash {
  0%, 45% { background: rgba(42,33,24,0.10); color: #2A2118; border-left-color: #2A2118; }
  100% { background: transparent; }
}
.pills.dim { opacity: .4; pointer-events: none; }

/* Search (live page #search-input) */
.search-wrap { position: relative; }
/* Whole world (flat map), 2026-10-16: the choice under the feature search. */
.pills.whole-world { margin-top: 8px; }
.pills.whole-world[hidden] { display: none; }
.search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--accent-ink); pointer-events: none; }
/* The place to type (space-picker, 2026-10-09): white on the cream panel,
   a gold-deep border (6.73:1 against the panel) and icon, the placeholder
   upright; it read as part of the panel before (fill 1.06:1, border
   1.55:1, icon 2.49:1). The 1.5 px border is a 1 px border plus a
   0.5 px ring: Chromium floors a 1.5px border-width to 1 px at every
   device scale (measured 1, 2 and 3), WebKit does not. */
.search-input {
  width: 100%; min-height: 48px; background: #fff; border: 1px solid var(--accent-ink); box-shadow: 0 0 0 0.5px var(--accent-ink);
  padding: 13px 14px 13px 44px;
  color: var(--text); font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: 400;
  outline: none; transition: border-color .2s; letter-spacing: 0.02em;
}
.search-input:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 0.5px var(--accent-ink), 0 0 0 2.5px rgba(111,83,16,.22); }
/* The placeholder at 16 px, untracked, at every width: upright Cormorant
   is about 10 percent wider than the italic it replaced, and at 19 px the
   1280 px panel's 283 px field cut Moon, Pluto and Venus, which fit in
   italic (Mars did not fit either way). Typed text stays 19 px. */
.search-input::placeholder { color: var(--subtext); font-style: normal; font-size: 16px; letter-spacing: 0; }
/* Phones: 16 px, untracked, so a world's placeholder fits a 390 px
   screen whole (Charon's measured 277.9 px of a 272 px field at 0.02em). */
@media (max-width: 420px) { .search-input { font-size: 16px; letter-spacing: 0; } }
.results { list-style: none; margin-top: 6px; border: 1px solid var(--border); background: var(--surface); display: none; max-height: 300px; overflow-y: auto; }
.results.show { display: block; }
.row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 12px; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--faint); cursor: pointer; color: var(--text); transition: background .15s;
}
.row:last-child { border-bottom: 0; }
.row:hover, .row.on { background: var(--faint); }
.row.on { box-shadow: inset 2px 0 0 var(--accent); }
.row-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.row-name { font-family: 'Cormorant Garamond', serif; font-size: 18px; color: var(--text); }
.row-sub { font-family: 'Jost', sans-serif; font-size: 12px; color: var(--subtext); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-type { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--muted); letter-spacing: 0.15em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
.row-empty { padding: 10px 12px; font-size: 12px; color: var(--subtext); }
.lake-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 12px; letter-spacing: 0.06em; font-weight: 500; font-family: 'Jost', sans-serif; }
.lake-badge.surv { background: rgba(70,120,90,0.14); color: #4a7a5c; }
.lake-badge.est { background: rgba(170,110,40,0.16); color: #9a6a28; }
.lake-badge.mixed { background: rgba(120,110,60,0.14); color: #7a6a30; }
.lake-badge.compiled { background: rgba(70,100,140,0.14); color: #44607f; }
.lake-badge.land { background: rgba(110,100,90,0.14); color: #6b5f52; }

/* Dials */
.dial-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.dial-label { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--subtext); }
.readout {
  font-family: 'DM Mono', monospace; font-size: 13px; color: var(--accent); font-variant-numeric: tabular-nums;
  background: var(--bg2); border: 1px solid var(--border); padding: 5px 10px; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); white-space: nowrap;
}
.readout.rec-word { color: var(--subtext); }
/* The relief choice (mountain-relief): "Recommended" is a label (chocolate),
   "Your choice" is the chosen state and Back to recommended the one clickable
   line (gold-deep on cream). No font of their own: they take the note's. */
.relief-mark { font: inherit; font-weight: 600; color: var(--chocolate); }
.relief-mark.chosen { color: var(--accent-ink); }
.relief-back { display: inline-flex; align-items: center; min-height: 44px; margin: 2px 0 0; padding: 4px 0; background: none; border: 0;
  font: inherit; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.relief-back[hidden] { display: none; }
.relief-back:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.width-row { display: flex; align-items: center; gap: 10px; }
.width-row .inst { flex: 1; }
.num {
  width: 86px; min-height: 44px; padding: 6px 8px; font-family: 'DM Mono', monospace; font-size: 14px; border: 1px solid var(--border);
  border-radius: 2px; background: transparent; color: var(--text); text-align: right;
}
.inst { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; }
.inst:focus-visible { outline: none; }
.inst:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.inst::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(var(--accent), var(--accent)) 0 0 / var(--fill, 50%) 100% no-repeat, var(--border); }
.inst::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 26px; margin-top: -12px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #c9a24c 0 1.5px, #8b6914 1.5px 3px); border: 1px solid #5b4413;
  box-shadow: 0 2px 3px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
.inst::-moz-range-track { height: 3px; border-radius: 2px; background: var(--border); }
.inst::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--accent); }
.inst::-moz-range-thumb { width: 14px; height: 24px; border-radius: 3px; border: 1px solid #5b4413; background: repeating-linear-gradient(90deg, #c9a24c 0 1.5px, #8b6914 1.5px 3px); box-shadow: 0 2px 3px rgba(0,0,0,.35); }
.ticks { height: 5px; background: repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 10%); background-size: calc(100% - 1px) 100%; }

/* Photo and drawing tiles (live page .ftile) */
.thumbs { display: grid; gap: 8px; }
.thumbs.three { grid-template-columns: repeat(3, 1fr); }
.thumbs.two { grid-template-columns: repeat(2, 1fr); }
.thumb {
  padding: 0; overflow: hidden; cursor: pointer; text-align: left; background: var(--surface);
  border: 1px solid var(--border); border-radius: 2px; transition: border-color .15s, box-shadow .15s;
}
.thumb:hover { border-color: var(--accent2); }
.thumb.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* height: auto so the square aspect-ratio wins over the <img> height="304"
   attribute, a presentational height:304px that otherwise stretched every
   photo tile to 304 px tall and cropped it to a column (revision 2a). */
.thumb .shot { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: var(--bg2); }
.thumb svg.shot { aspect-ratio: 84 / 60; }
.thumb .cap { display: block; padding: 8px 10px 9px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--subtext); }
.thumb.on .cap { color: var(--accent); background: var(--bg2); }
.thumb[disabled] { cursor: not-allowed; }
.caption { font-size: 13px; font-style: italic; color: var(--subtext); letter-spacing: 0.03em; line-height: 1.5; margin-top: 6px; }

/* Frame panel (live page .frame-panel) */
.frame-panel { padding: 14px 14px 12px; border: 1px solid var(--border); border-left: 3px solid var(--accent); background: rgba(139,105,20,0.04); border-radius: 2px; display: flex; flex-direction: column; gap: 14px; }

/* Toggle switch: the row is 44 px tall, the switch 58 x 32 inside it. */
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.toggle-text { min-width: 0; }
.toggle-label { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--subtext); }
.toggle-hint { font-size: 13px; color: var(--subtext); line-height: 1.4; margin-top: 3px; }
.switch { position: relative; width: 58px; height: 32px; flex-shrink: 0; border-radius: 16px; border: 1px solid var(--border); background: var(--bg2); box-shadow: inset 0 1px 3px rgba(0,0,0,.2); cursor: pointer; transition: background .2s; padding: 0; }
.switch[aria-checked="true"] { background: var(--accent); }
.switch span { position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(#fff, #d9d4c8); box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: left .2s; }
.switch[aria-checked="true"] span { left: 29px; }
.switch[disabled] { cursor: not-allowed; opacity: .5; }


/* ── ARENA ────────────────────────────────────────────────── */
.arena {
  display: flex; flex-direction: column; overflow: hidden; height: 100%; min-height: 0;
  border: 1px solid var(--border2); background: var(--arena); color: var(--arena-ink);
  box-shadow: 0 2px 24px rgba(100,80,40,0.10); position: relative;
}
.arena::before, .arena::after { content: ''; position: absolute; width: 14px; height: 14px; border-color: var(--accent2); border-style: solid; opacity: .8; pointer-events: none; z-index: 5; }
.arena::before { top: 6px; left: 6px; border-width: 1px 0 0 1px; }
.arena::after { bottom: 6px; right: 6px; border-width: 0 1px 1px 0; }
.arena-head { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; border-bottom: 1px solid var(--arena-line); background: var(--arena); }
.machine { position: relative; display: flex; height: 52px; width: 220px; max-width: 100%; border: 1px solid var(--arena-line); background: rgba(0,0,0,.2); padding: 3px; border-radius: 2px; }
.machine .slide { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 2); border-radius: 2px; transition: transform .3s; background: #B08A2A; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.mkey { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; background: none; border: 0; font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--arena-muted); cursor: pointer; transition: color .2s; }
.mkey.on { color: #2A2118; }
.mkey:hover { color: var(--arena-ink); }
.mkey.on:hover { color: #2A2118; }
.mkey[disabled] { cursor: not-allowed; opacity: .55; }
.arena-title-wrap { min-width: 0; flex: 1; }
.arena-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.arena-title { font-family: 'Cormorant Garamond', serif; font-size: 26px; line-height: 1.1; font-weight: 500; color: var(--arena-ink); }
.status-badge { display: none; border-radius: 10px; padding: 2px 8px; font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
.status-badge.surv { display: inline-block; background: #3f7a5c; }
.status-badge.est { display: inline-block; background: #9a6a28; }
.status-badge.mixed { display: inline-block; background: #7a6a30; }
/* Seafloor labels (2026-10-01): COMPILED, and a row's "Former seabed, now land". */
.status-badge.compiled { display: inline-block; background: #44607f; }
.status-badge.land { display: inline-block; background: #6b5f52; }
.arena-sub { font-size: 12.5px; color: var(--arena-muted); letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.viewbtns { display: flex; gap: 2px; }
.viewbtn { display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; border-radius: 2px; color: var(--arena-muted); cursor: pointer; transition: background .15s, color .15s; }
.viewbtn:hover, .viewbtn.on, .viewbtn[aria-pressed="true"] { background: rgba(255,255,255,.16); color: var(--arena-ink); }

/* The stage keeps the mockup's radial falloff: the WebGL canvas clears to
   transparent (viewer.js) over this gradient. */
.stage { position: relative; flex: 1; min-height: 240px; height: 40vh; overflow: hidden; user-select: none; touch-action: none; cursor: grab; outline: none;
  background: radial-gradient(ellipse at 50% 35%, var(--arena-2), var(--arena) 72%); }
.stage:active { cursor: grabbing; }
@media (min-width: 1024px) { .stage { height: auto; min-height: 380px; } }
.stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.stage-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; pointer-events: none; z-index: 3; transition: opacity .4s; }
.stage-overlay.hidden { opacity: 0; }
.overlay-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 20px; color: var(--arena-ink); }
/* The stage's line in plain words (studio.js showStagePrompt): the body
   font, cream on the dark stage, never gold; the overlay's title and caps
   line step aside while it shows. */
.stage-prompt { margin: 0; max-width: 380px; font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 400; letter-spacing: 0.02em; line-height: 1.5; color: var(--arena-ink); }
.stage-prompt[hidden] { display: none; }
.stage-overlay.prompt .overlay-title, .stage-overlay.prompt .overlay-text { display: none; }
.overlay-text { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--arena-muted); line-height: 1.7; max-width: 340px; }
/* A lake asked for in Regions mode (lake-note): the note and its button take clicks. */
/* A Lithophane, Vista pick builds the land behind the scenes (litho-d).
   The overlay's words are 12 px here, not the stage's 9.5. */
.stage-overlay[data-hv] .overlay-text { font-size: 12px; letter-spacing: 0.14em; max-width: 380px; }
.overlay-steps { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.overlay-steps[hidden] { display: none; }
.overlay-steps li { position: relative; padding-left: 30px; min-height: 18px; font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--arena-muted); line-height: 18px; }
.overlay-steps li::before { content: ''; position: absolute; left: 0; top: 1px; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--arena-muted); box-sizing: border-box; }
.overlay-steps li[data-state="active"] { color: var(--arena-ink); }
.overlay-steps li[data-state="active"]::before { border-color: var(--arena-ink); background: radial-gradient(circle, var(--arena-ink) 0 3px, transparent 4px); }
.overlay-steps li[data-state="done"] { color: #f0d58a; }
.overlay-steps li[data-state="done"]::before { border-color: #f0d58a; background: #f0d58a; }
.overlay-steps li[data-state="done"]::after { content: ''; position: absolute; left: 5px; top: 4px; width: 4px; height: 7px; border: solid var(--arena); border-width: 0 1.5px 1.5px 0; transform: rotate(40deg); }
/* A phone's stage is short (the sheet takes the rest): the overlay's words
   tighten so the three steps and the way back stay in view. */
@media (max-width: 680px) {
  .stage-overlay[data-hv] { padding: 8px 12px; gap: 5px; }
  .stage-overlay[data-hv] .overlay-title { font-size: 17px; line-height: 1.15; }
  .stage-overlay[data-hv] .overlay-text { letter-spacing: 0.04em; line-height: 1.35; }
  .stage-overlay[data-hv] .overlay-pct { font-size: 26px; }
  .stage-overlay[data-hv] .overlay-steps { gap: 4px; margin-top: 2px; }
  .stage-overlay[data-hv] .overlay-change { margin-top: 4px; }
}
.hv-price { flex: 0 1 auto; padding-right: 8px; }
.hv-price[hidden] { display: none; }
.arena[data-hv] #st-files, .arena[data-hv] .bar-price, .arena[data-hv] #st-prov, .arena[data-hv] #st-btn-buy { display: none !important; }
.overlay-change { pointer-events: auto; min-height: 44px; margin-top: 10px; padding: 0 22px; background: none; border: 1px solid var(--arena-ink); color: var(--arena-ink); font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; }
.overlay-change:hover { background: rgba(255,255,255,.16); }
.overlay-change[hidden] { display: none; }
.vista-wait { margin: 0; padding: 12px 16px; border-top: 1px dashed var(--border2); font-size: 14px; line-height: 1.5; }
.vista-wait[hidden] { display: none; }
#st-vista-panel[data-wait] .deck-body, #st-vista-panel[data-wait] #st-vista-back { display: none; }
#st-vista-panel[data-wait] { opacity: .75; }
.lake-note { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 360px; }
.lake-note[hidden] { display: none; }
.lake-note-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--arena-ink); }
/* The land around a lake (lake-surround): under the model, the way to the lake itself. */
.prov .ls-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
/* Pale gold rather than the accent gold: the numeral sits on the overlay's
   dark veil, where the accent measured 2.4:1 (revision 2b). */
.overlay-pct { font-family: 'Cormorant Garamond', serif; font-size: 34px; color: #f0d58a; line-height: 1; }
.progress-track { width: min(320px, 70%); height: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .6s ease; }
/* The build reveal (build-reveal, reveal.js): the place drawn over the stage
   while it builds, in place of the Generating overlay, then faded out over
   the finished model. */
.reveal-canvas { position: absolute; inset: 0; z-index: 5; display: block; pointer-events: none; background: #2A2118; opacity: 1; transition: opacity .4s; }
.reveal-canvas[hidden] { display: none; }
.reveal-canvas.out { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .reveal-canvas { transition: none; } }
.stage-hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); padding: 4px 12px; border-radius: 12px; background: rgba(0,0,0,.4); font-size: 12px; color: var(--arena-ink); pointer-events: none; z-index: 3; transition: opacity .4s; }
.stage-hint.hidden { opacity: 0; }
.scalebar { position: absolute; left: 14px; bottom: 12px; font-family: 'DM Mono', monospace; font-size: 10px; color: var(--arena-muted); pointer-events: none; z-index: 3; }
.scalebar .line { height: 3px; background: var(--arena-ink); opacity: .7; margin-bottom: 4px; width: 60px; }
.watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-35deg); font-family: 'Jost', sans-serif; font-size: clamp(18px, 4vw, 32px); font-weight: 200; letter-spacing: 0.5em; color: rgba(30,26,20,0.16); pointer-events: none; z-index: 2; white-space: nowrap; }
.arena[data-world="space"] .watermark { color: rgba(237,231,218,0.08); }
/* The arrival showcase is a finished display piece, not a preview
   (revision 2d): studio.js loadShowcase sets data-model, loadPreview
   clears it, so a customer's preview keeps the watermark exactly as now.
   A model the account owns is not a preview either (ui-cleanup): loadPreview
   sets data-model="owned" from /api/status owned. */
.arena[data-model="showcase"] .watermark, .arena[data-model="owned"] .watermark { display: none; }
/* The stale note (instant-preview, 2026-10-09): a label, not a control, so
   chocolate on cream (gold is for what can be clicked or chosen), 13 px, the
   page's own font; it wraps on a phone instead of running off the stage. */
.stale-note { display: none; position: absolute; left: 50%; top: 12px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); box-sizing: border-box; padding: 6px 14px; background: #F4EFE4; color: #2A2118; border: 1px solid #6A5C42; font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: .02em; text-align: center; z-index: 4; pointer-events: none; }
.stale-note.show { display: block; }

.prov { position: relative; z-index: 2; display: none; padding: 10px 16px; border-top: 1px solid var(--arena-line); background: var(--arena); font-size: 13px; line-height: 1.55; color: var(--arena-ink); }
.prov.show { display: block; }
/* The data lines (studio layout, 2026-10-07): the strip under the stage as
   four labelled rows, Source, Size, Relief, Provenance, the size readout
   among them (it sat on the stage before). Always shown on the Studio: the
   Size row alone before anything is built. A hidden row takes no space. */
.prov.datalines { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 5px 14px; padding: 11px 16px 12px; font-size: 12.5px; line-height: 1.5; }
.datalines .dl-row { display: contents; }
.datalines .dl-row[hidden] { display: none; }
.datalines .dl-k { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--arena-muted); padding-top: 3px; white-space: nowrap; }
.datalines .dl-v { min-width: 0; color: var(--arena-ink); overflow-wrap: anywhere; }
.datalines .dl-v > .cal:first-child { margin-top: 0; }
#st-dims-big { font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 0.04em; }
#st-dims .dl-sep[hidden] { display: none; }
#st-dl-size-notes:empty { display: none; }

/* The lithophane offer (litho-a, mockup screens 7 and 8): one row under the
   data lines on a finished model that can make one: the kind's fixed example
   picture, one line, and the link in the old entry button's place. On the
   actionbar's own tone so the data lines end and the actions begin. Text 13 px;
   the link is 44 px tall, in the light gold on that tone (7.5 to 8.2:1,
   measured on the rendered row; the stage gold, #b08a2a, is about 4.4:1
   there); the picture is not a target. */
.offer-row { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 8px 16px;
  border-top: 1px solid var(--arena-line); background: rgba(48,42,36,0.88); color: var(--arena-ink); }
.offer-row[hidden] { display: none; }
.offer-art { flex: none; width: 56px; height: auto; border: 1px solid rgba(255,255,255,.34); border-radius: 2px; }
.offer-text { flex: 0 1 auto; min-width: 0; font-size: 13px; line-height: 1.4; }
.offer-link { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; border: 0; background: none;
  color: #E8C96A; font: inherit; font-size: 13px; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.offer-link:hover { text-decoration-thickness: 2px; }
.offer-link[hidden] { display: none; }
.offer-link[disabled] { opacity: .5; cursor: not-allowed; text-decoration: none; }
.arena.showcase .offer-row, .arena[data-vista] .offer-row, .arena[data-light] .offer-row { display: none !important; }

/* ── THE STAGE OVER THE ARTWORK (revision 2b, 2026-09-25) ─────────────
   The live page's terrain artwork (.bg-terrain) sits behind the whole
   instrument, and the opaque stone arena of revision 1 covered it from
   y 289 to 879 at 1440 x 900, leaving only the sky and one peak's tip in
   the header band. The arena is now a translucent veil over it. The
   text-bearing bars (head, provenance strip) carry a dense dark veil
   because light text has to hold 4.5:1 against the artwork's brightest
   pixels (about 245): a warm stone veil cannot reach that at any opacity
   (the muted ink measured 4.04:1 on the opaque stone), so the bars go to
   rgba(48,42,36,.80), which measures 5.1:1 for the muted ink over a 245
   pixel and 6.7:1 for the light ink. The stage itself stays lighter so
   the artwork reads through it; the two readouts on it sit on their own
   chips, and the generating overlay carries a veil so its text no longer
   lands on the cream plate beneath it (measured 1.0 to 1.1:1 there
   before). The stone tokens stay for the phone bar. */
.arena { background: rgba(48,42,36,0.45); }
.arena-head, .prov { background: rgba(48,42,36,0.80); }
.stage { background: radial-gradient(ellipse at 50% 35%, rgba(92,84,74,0.30), rgba(48,42,36,0.50) 72%); }
.scalebar { padding: 5px 8px; border-radius: 2px; background: rgba(36,31,26,0.78); }
.stage-overlay { background: rgba(36,31,26,0.74); }
.prov .cal { display: block; margin-top: 4px; color: var(--arena-muted); font-size: 12px; }
/* The badges are tuned for parchment; on the stone strip they need their
   light variants or Surveyed reads as a dark blob. */
.prov .lake-badge.surv { background: rgba(140,205,165,.28); color: #dff3e6; }
.prov .lake-badge.est { background: rgba(235,190,120,.28); color: #f8e4c2; }
.prov .lake-badge.mixed { background: rgba(215,205,150,.28); color: #f1e9cf; }
.prov .lake-badge.compiled { background: rgba(150,185,225,.28); color: #e3edf8; }
.prov .lake-badge.land { background: rgba(200,190,175,.28); color: #f0e9df; }
.prov a { color: var(--accent2); }
/* Solid, not translucent (2026-09-27): a translucent fill let the arena's
   own veil and the terrain photo behind it show through, so the text
   measured 2.5 to 2.6:1 against whatever was in the photo at that point,
   never 4.5:1. background: var(--error) is opaque, so the photo can no
   longer change the result; color: var(--arena-ink) is the palette's own
   ink already proven against the arena stone panel (.prov, above), and
   measures 6.36:1 against solid var(--error). */
.arena-error { display: none; position: relative; z-index: 2; padding: 10px 16px; border-top: 1px solid var(--error); background: var(--error); color: var(--arena-ink); font-family: 'DM Mono', monospace; font-size: 11px; }
.arena-error.show { display: block; }

/* ── SPACE BACKDROP (world-backdrop, 2026-10-06) ─────────────────────
   The backdrop follows the model on the stage, not the world selected:
   studio.js markWorld sets data-world="space" on #st-arena when a model of
   another world loads and removes it when an Earth model loads. The arena
   turns opaque so the terrain artwork behind the page (.bg-terrain) no
   longer shows through the preview; the stage is a flat near-black ground
   with a few small faint stars and one soft darker arc low in the frame
   for the world's horizon. Flat colours only; the arc's soft edge is the
   one gradient. An Earth model, Ocean included, keeps the veil over the
   mountains above. */
.arena[data-world="space"], .arena[data-pick-world] {
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23e9e6de' fill-opacity='.55'/%3E%3C/svg%3E");
  --star-dim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23e9e6de' fill-opacity='.32'/%3E%3C/svg%3E");
  --arc: radial-gradient(ellipse 88% 50% at 50% 120%, #0e1016 0, #0e1016 78%, rgba(14,16,22,0) 84%);
  background: #14171f;
}
.arena[data-world="space"] .stage, .arena[data-pick-world] .stage {
  background:
    var(--star) 7% 12% / 2px 2px no-repeat,
    var(--star-dim) 18% 41% / 2px 2px no-repeat,
    var(--star) 31% 8% / 2px 2px no-repeat,
    var(--star-dim) 44% 27% / 2px 2px no-repeat,
    var(--star-dim) 62% 6% / 2px 2px no-repeat,
    var(--star) 76% 19% / 2px 2px no-repeat,
    var(--star-dim) 88% 37% / 2px 2px no-repeat,
    var(--star) 94% 9% / 2px 2px no-repeat,
    var(--star-dim) 4% 58% / 2px 2px no-repeat,
    var(--star-dim) 96% 61% / 2px 2px no-repeat,
    var(--arc),
    #14171f;
}
/* Phones: the scale and size labels sit along the stage's bottom edge, and
   the arc above ran behind them. A flatter arc, lifted, keeps its edge
   above both labels across the stage's width. */
@media (max-width: 680px) {
  .arena[data-world="space"], .arena[data-pick-world] { --arc: radial-gradient(ellipse 120% 50% at 50% 108%, #0e1016 0, #0e1016 78%, rgba(14,16,22,0) 84%); }
}

/* Space with no world chosen (space-picker, 2026-10-09; studio.js
   syncPickWorld): the space backdrop above, "Pick a world" on it, and
   nothing of the model on the stage (the arrival showcase included) or of
   its data lines until a world is picked. */
.arena[data-pick-world] .stage { cursor: default; }
.arena[data-pick-world] .stage > :not(.pick-world) { visibility: hidden; }
.arena[data-pick-world] .prov { display: none; }
/* Another place on the form (studio-layout-2): the model stays loaded but
   is not shown (studio.js syncAway takes it from the scene; the canvas
   itself stays), nor what rides on it, and the old place's rows go; the
   stage's line says what Generate builds. */
.arena[data-away] .stage { cursor: default; }
.arena[data-away] .stage > :not(.stage-overlay):not(.pick-world):not(canvas) { visibility: hidden !important; }
.arena[data-away] #st-dl-source, .arena[data-away] #st-dl-relief, .arena[data-away] #st-dl-prov,
.arena[data-away] #st-dl-tiles, .arena[data-away] #st-dl-size-notes { display: none !important; }
.pick-world { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; pointer-events: none; }
.pick-world[hidden] { display: none; }
.pick-world-title { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 500; line-height: 1.1; color: var(--arena-ink); }
.pick-world-text { max-width: 340px; font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--arena-muted); }

/* File buttons and Generate: the action bar (studio layout, 2026-10-07) */
.files { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filebtn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.34); border-radius: 2px;
  background: transparent; color: var(--arena-ink); font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; transition: background .15s, opacity .15s;
}
.filebtn:hover { background: rgba(255,255,255,.16); }
.filebtn[disabled], .filebtn.disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
.filebtn.gated { border-color: var(--accent2); color: var(--accent2); }
.filebtn.free { border-style: dashed; }
.generate-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: 0; border-radius: 2px;
  background: #6F5310; color: #F4EFE4;
  box-shadow: 0 1px 3px rgba(40,28,12,.25);
  font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; cursor: pointer;
  transition: background .15s;
}
.generate-btn:hover { background: #5F470E; }
.generate-btn:active { background: #57410C; }
.arena .generate-btn { background: #B08A2A; color: #2A2118; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.arena .generate-btn:hover { background: #BC9634; }
.arena .generate-btn:active { background: #B08A2A; box-shadow: inset 0 2px 4px rgba(0,0,0,.35); }
.generate-btn:disabled { opacity: .6; cursor: not-allowed; }
/* Generate lights up when it becomes the thing to press (Aaron, phone
   Generate, 2026-10-09; studio.js glowGenerate): a place or world picked,
   or a setting changed after a build (the moment Buy once and the files
   dim). Two pulses over 1.5 s, then back to its ready gold; it never loops
   and never runs on a disabled button. In the brand golds: gold-light on
   the dark action bar, gold-deep on the phone's cream bar. The brightest
   frame keeps the text readable: chocolate on #D4AE4A 7.49:1 (the ready
   #B08A2A is 4.90:1), cream on #806013 5.09:1 (ready #6F5310 6.27:1);
   the halo is outside the button and under no text. With reduced motion,
   no animation: a still ring until Generate is pressed or no longer
   needed. */
@keyframes gen-glow-dark {
  0%, 50%, 100% { background: #B08A2A; box-shadow: 0 1px 3px rgba(0,0,0,.35), 0 0 0 0 rgba(176,138,42,0), 0 0 0 0 rgba(212,174,74,0); }
  25%, 75% { background: #D4AE4A; box-shadow: 0 1px 3px rgba(0,0,0,.35), 0 0 0 4px rgba(176,138,42,.55), 0 0 18px 6px rgba(212,174,74,.45); }
}
@keyframes gen-glow-cream {
  0%, 50%, 100% { background: #6F5310; box-shadow: 0 1px 3px rgba(40,28,12,.25), 0 0 0 0 rgba(111,83,16,0), 0 0 0 0 rgba(111,83,16,0); }
  25%, 75% { background: #806013; box-shadow: 0 1px 3px rgba(40,28,12,.25), 0 0 0 4px rgba(111,83,16,.45), 0 0 16px 4px rgba(111,83,16,.35); }
}
.actionbar .generate-btn.glow:not(:disabled) { animation: gen-glow-dark 1.5s ease-in-out 1; }
.phone-generate .generate-btn.glow:not(:disabled) { animation: gen-glow-cream 1.5s ease-in-out 1; }
@media (prefers-reduced-motion: reduce) {
  .actionbar .generate-btn.glow:not(:disabled) { animation: none; box-shadow: 0 1px 3px rgba(0,0,0,.35), 0 0 0 2px #2d2823, 0 0 0 4px #B08A2A; }
  .phone-generate .generate-btn.glow:not(:disabled) { animation: none; box-shadow: 0 0 0 2px #F5F0E8, 0 0 0 4px #6F5310; }
}
/* ── THE ACTION BAR (studio layout, 2026-10-07) ──────────────
   The arena's last row, directly under the data lines, on the same dark
   veil as the head and the strip, at every width: the price line (the plan
   and usage lines under it), Generate model, Buy once, then the files.
   Dark at every width, so the price line, the usage line, the limit note
   and "Who sent you?" keep the arena's ink on a phone too. */
.actionbar { position: relative; z-index: 2; flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px 12px; border-top: 1px solid var(--arena-line); background: rgba(48,42,36,0.88); color: var(--arena-ink); }
.actionbar .bar-price { flex: 0 1 auto; max-width: 40%; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-right: 8px; }
.actionbar .st-price-line, .actionbar .st-usage-line, .actionbar .who-sent-panel { color: var(--arena-ink); }
/* Generate model, the Studio's main action (Generate, 2026-10-08): the
   model type label keeps its own width on the left (at most 40 % of the
   bar, a long plan label or the limit note wraps inside it), Generate
   fills the rest of the first row up to Buy once, and the file buttons
   take the second row. Under 320 px beside Buy once (Laser beside its
   sheet table at 1280), Buy once moves down a row. Flat brand gold-light
   with chocolate text on the chocolate bar (4.90:1); hover lighter
   (5.68:1); pressed the same gold, pressed in. */
.actionbar .generate-btn { flex: 1 1 320px; min-height: 44px; justify-content: center; font-size: 12px; padding: 12px 22px;
  background: #B08A2A; color: #2A2118; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.actionbar .generate-btn:hover { filter: none; background: #BC9634; }
.actionbar .generate-btn:active { background: #B08A2A; box-shadow: inset 0 2px 4px rgba(0,0,0,.35); }
/* Waiting for a world (space-picker, 2026-10-09; studio.js
   syncGenerateButtons): out of the gold "click here", an outline that
   still reads, cream on the dark bar and chocolate on the cream page's pale fill. */
.actionbar .generate-btn.needs-world, .actionbar .generate-btn.needs-world:hover, .actionbar .generate-btn.needs-world:active {
  opacity: 1; filter: none; cursor: not-allowed; background: transparent; color: var(--cream); border: 1px dashed rgba(244,239,228,.55); box-shadow: none; }
.phone-generate .generate-btn.needs-world, .phone-generate .generate-btn.needs-world:hover, .phone-generate .generate-btn.needs-world:active {
  opacity: 1; filter: none; cursor: not-allowed; background: var(--bg2); color: var(--chocolate); border: 1px dashed var(--muted); box-shadow: none; }
.actionbar .files { flex: 1 1 100%; }
/* Why Generate cannot start (studio.js syncGenerate): cream on the dark
   bar, never gold; on a phone the same line under its Generate, on cream. */
.gen-reason { margin: 0; padding: 6px 10px; font-size: 13px; line-height: 1.5; letter-spacing: 0.02em; }
.gen-reason[hidden] { display: none !important; }
.actionbar .gen-reason { flex: 1 1 100%; color: var(--arena-ink); border-left: 2px solid var(--arena-ink); background: rgba(0,0,0,0.25); }
.phone-gen-reason { display: none; }
.actionbar .filebtn { min-height: 44px; justify-content: center; text-align: center; font-size: 12px; padding: 8px 14px; }
.actionbar .buy-btn { padding: 8px 18px; }
.actionbar .buy-btn[hidden] { display: none; }
.actionbar .files { display: flex; flex-wrap: wrap; gap: 8px; }
.actionbar .files .filebtn { min-width: 64px; }
#st-btn-3mfp[hidden] { display: none; }
/* The download kits (download-kits, 2026-10-23): the machine's kit button on
   the free STL's row (kits-round2, Aaron's answer 4), the "Single files"
   link under it, and the single-file buttons only once the link is opened.
   Only while the 'kits' switch is open to this viewer (studio.html
   kits-on). The link's row is kept short so the stage keeps its height. */
#st-files.kits-on .kit-btn { flex: 1 1 auto; }
#st-files .kit-btn[hidden], #st-files .kit-singles[hidden] { display: none; }
#st-files.kits-on:not(.singles-open) .filebtn.single { display: none !important; }
.kit-singles { flex: 1 1 100%; margin: -6px 0 -2px; padding: 0; min-height: 16px; line-height: 16px; border: 0; background: none;
  color: var(--arena-ink); font: inherit; font-size: 12px; letter-spacing: 0.04em; text-align: left;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kit-singles:hover { color: var(--accent2); }
.phone-files .phone-kit, .gs-files .gs-kit { flex: 1 1 100%; }
#st-phone-files:has(#st-phone-kit), #gs-files:has(#gs-dl-kit) { flex-wrap: wrap; }
.kit-singles[data-singles-twin][hidden] { display: none; }
.phone-files .kit-singles, .gs-files .kit-singles { color: inherit; }
/* "Who sent you?" only after Buy once is clicked: one small optional line,
   the last row of the bar (studio.js startBuying). */
.actionbar .who-line { display: flex; flex: 1 1 100%; align-items: center; justify-content: flex-end; gap: 10px; margin: 0; font-size: 11px; letter-spacing: 0.04em; }
.actionbar .who-line[hidden] { display: none; }
.actionbar .who-line .who-sent-input { width: 260px; margin: 0; padding: 7px 10px; font-size: 12px; }
.actionbar .fs-only { display: none; }

/* The front page's footer under the Studio (studio.html footer-slot-b; its
   own rules, footer and .footer-*, are global). */
.studio-foot { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; padding: 0 32px; }
.studio-foot footer { margin-top: 28px; }

/* ── SCREEN C: FULL SCREEN ────────────────────────────────── */
/* The arena fills the window (and the screen, when the Fullscreen API is
   granted: the bar and Exit are its descendants so they show either way).
   The action bar is the arena's bottom strip, in the flow, not a panel
   floating over the stage: the stage is the space left above it and the
   viewer frames the model in the stage (viewer.js ResizeObserver), so no
   button covers the model. Turn and Edit settings open the strip. */
.arena.fs { position: fixed; inset: 0; z-index: 950; border: 0; height: auto; box-shadow: none; }
.arena.fs .arena-head .machine, .arena.fs .prov, .arena.fs .arena-error, .arena.fs #st-fullscreen { display: none; }
.arena.fs .stage { height: auto; min-height: 0; }
.arena.fs .viewbtns { margin-right: 104px; }
.fs-exit { display: none; }
.arena.fs .actionbar { padding: 12px 20px 14px; background: rgba(36,31,26,0.94); }
.arena.fs .actionbar .fs-only { display: inline-flex; }
.arena.fs .actionbar #fs-edit { margin-right: 10px; }
.arena.fs .fs-exit { position: fixed; top: 16px; right: 16px; z-index: 960; display: inline-flex; min-height: 44px; background: rgba(48,42,36,0.88); }

/* ── BELOW THE FOLD (live page) ───────────────────────────── */
.editorial-caption { font-family: 'Cormorant Garamond', serif; font-size: 17px; font-style: italic; font-weight: 300; color: var(--subtext); text-align: center; letter-spacing: 0.01em; line-height: 1.5; max-width: 640px; margin: 0 auto; }
.positioning-caption { margin-top: 36px; margin-bottom: -8px; font-size: 18px; }
.stats { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); background: var(--surface); box-shadow: 0 2px 16px rgba(100,80,40,0.06); }
.stat { padding: 28px 20px; text-align: center; border-right: 1px solid var(--border); min-width: 0; }
.stat:last-child { border-right: none; }
.stat-link { display: block; color: inherit; text-decoration: none; }
.stat-num { font-family: 'Cormorant Garamond', serif; font-size: 42px; font-weight: 300; color: var(--accent); line-height: 1; }
.stat-label { font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--subtext); margin-top: 8px; line-height: 1.7; }
/* --subtext rather than the live page's --muted: this line sits on the
   artwork's tail, where the muted ink measures under 4.5:1. The chip it
   sits on is set with the front page's rules above. */
.stats-note { text-align: center; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--subtext); line-height: 1.7; }
.section-header { text-align: center; margin: 64px 0 40px; }
.section-rule { display: flex; align-items: center; gap: 20px; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase; }
.section-rule::before, .section-rule::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.section-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(28px, 4vw, 40px); font-weight: 300; color: var(--text); margin-top: 12px; letter-spacing: 0.04em; }
.why-alticarta-header { margin-bottom: 28px; }
.why-alticarta-body { max-width: 720px; margin: 0 auto 56px; text-align: center; font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 300; color: var(--subtext); line-height: 1.7; letter-spacing: 0.015em; }
.why-alticarta-body p { margin: 0 0 18px; }
.why-alticarta-body p:last-child { margin-bottom: 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 18px; font-weight: 400; color: var(--text); letter-spacing: 0.02em; }
.labels { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.labels .lake-badge { font-size: 12px; padding: 4px 12px; }
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.feature { background: var(--surface); padding: 32px 28px; transition: background .2s; }
.feature:hover { background: var(--bg2); }
.feature-glyph { font-family: 'DM Mono', monospace; font-size: 16px; color: var(--accent); margin-bottom: 16px; opacity: .8; }
.feature-glyph svg { display: block; width: 20px; height: 20px; }
.feature-title { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 400; color: var(--text); margin-bottom: 10px; }
.feature-desc { font-size: 13px; color: var(--subtext); line-height: 1.7; letter-spacing: 0.01em; }
.lake-block { margin-top: 56px; }
.care-block { margin-top: 56px; }
.features.lake-columns { grid-template-columns: repeat(2, 1fr); }
.features.care-cards { grid-template-columns: repeat(3, 1fr); }
.feature-badge { margin-bottom: 14px; }
/* The craft grid's model images (feature-renders): the card's text width, at
   most 340 px, in the files' own 340:309 shape. Scoped to .craft-cards, so the
   lake, care and viewer cards keep their glyphs and badges. CNC & Print Ready's
   line drawing (an inline SVG in .feature-glyph, so it is stroked in the glyph's
   gold) fills the same box as the images, at every width. */
.craft-cards .feature-art { display: block; width: 100%; max-width: 340px; height: auto; aspect-ratio: 340 / 309; margin: 0 0 16px; }
.craft-cards .feature-glyph { width: 100%; max-width: 340px; aspect-ratio: 340 / 309; margin: 0 0 16px; }
.craft-cards .feature-glyph svg { display: block; width: 100%; height: 100%; }
.lake-block-closing { margin-top: 28px; }
.coming-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.coming-card { position: relative; background: var(--surface); border: 1px solid var(--border); padding: 26px 24px; }
.coming-card::before, .coming-card::after { content: ''; position: absolute; width: 12px; height: 12px; border-color: var(--accent); border-style: solid; opacity: .35; }
.coming-card::before { top: 6px; left: 6px; border-width: 1px 0 0 1px; }
.coming-card::after { bottom: 6px; right: 6px; border-width: 0 1px 1px 0; }
.coming-art { display: block; width: 101px; height: 92px; object-fit: contain; margin: 0 0 12px -4px; }
/* The main tiles' step (.tile-art, above): the card art matches the tiles at every width. */
@media (max-width: 1439px) { .coming-art { width: 70px; height: 64px; margin-left: -3px; } }

.africa-feature { margin: 96px 0; display: grid; grid-template-columns: 466px 1fr; gap: 72px; align-items: start; }
.africa-feature-photo { margin: 0; padding: 0; }
.africa-feature-photo img { display: block; width: 100%; height: auto; border: 0; }
.africa-feature-heading { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(36px, 5vw, 56px); color: var(--text); margin: 0 0 24px; letter-spacing: 0.02em; line-height: 1.05; }
.africa-feature-body { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: 19.5px; line-height: 1.65; color: var(--subtext); margin: 0; max-width: 60ch; }
.africa-feature-body + .africa-feature-body { margin-top: 1.25em; }
/* The signed quote: the figure takes the body's font so its 60ch is the paragraphs' width,
   and the signature and title sit left-aligned under the last line (ui-cleanup: 80 px, 68 px on phones). */
.africa-feature-quote { margin: 0; max-width: 60ch; font-family: 'Cormorant Garamond', serif; font-size: 19.5px; }
.africa-feature-quote blockquote { margin: 0; padding: 0; }
.africa-feature-sign { display: flex; flex-direction: column; align-items: flex-start; margin-top: 28px; }
.africa-feature-signature { display: block; width: 80px; height: auto; }
.africa-feature-role { margin-top: 12px; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--subtext); }
@media (min-width: 1100px) {
  .africa-feature { margin-left: calc((896px - min(1048px, 100vw - 80px)) / 2); margin-right: calc((896px - min(1048px, 100vw - 80px)) / 2); }
}

.pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.pricing.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 760px) { .pricing.three { grid-template-columns: 1fr 1fr; } }
.price-card { background: var(--surface); border: 1px solid var(--border); padding: 40px; position: relative; box-shadow: 0 2px 16px rgba(100,80,40,0.06); }
.price-card.featured { background: var(--text); border-color: var(--accent); }
.price-card.featured::before { content: 'Most Popular'; position: absolute; top: -1px; right: 32px; background: var(--accent); color: var(--surface); font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: 0.2em; padding: 4px 10px; text-transform: uppercase; }
.price-card.featured .price-tier { color: var(--muted); }
.price-card.featured .price-amount { color: var(--surface); }
.price-card.featured .price-amount sup { color: var(--muted); }
.price-card.featured .price-currency { color: var(--muted); }
.price-card.featured .price-list li { color: var(--faint); }
.price-card.featured .price-list li strong { color: var(--surface); }
.price-tier { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--subtext); margin-bottom: 16px; }
.price-amount { font-family: 'Cormorant Garamond', serif; font-size: 60px; font-weight: 300; color: var(--text); line-height: 1; }
.price-amount sup { font-size: 28px; vertical-align: super; color: var(--subtext); }
.price-currency { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--subtext); letter-spacing: 0.2em; margin-top: 4px; }
.price-list { margin-top: 28px; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.price-list li { font-size: 13px; color: var(--subtext); display: flex; align-items: center; gap: 10px; line-height: 1.4; }
.price-list li::before { content: '\2013'; color: var(--accent); flex-shrink: 0; font-family: 'DM Mono', monospace; }
.pricing-group-label { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--accent); margin: 56px 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.pricing-group-label.first { margin-top: 40px; }
.pricing-group-label.secondary { color: var(--muted); border-bottom-color: var(--faint); margin-top: 72px; font-size: 8px; }
.price-cta { display: block; margin-top: 28px; padding: 14px 20px; text-align: center; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); background: var(--faint); border: 1px solid var(--border); cursor: not-allowed; user-select: none; }
.price-buy { display: block; width: 100%; margin-top: 28px; padding: 14px 20px; text-align: center; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--surface); background: var(--accent); border: 1px solid var(--accent); cursor: pointer; transition: background .18s ease, color .18s ease; }
.price-buy:hover { background: var(--accent2); }
.price-card.featured .price-buy { color: var(--surface); background: var(--accent); border-color: var(--accent); }
.price-card.compact { padding: 28px 32px; background: var(--surface); box-shadow: none; }
.price-card.compact .price-amount { font-size: 42px; }
.price-card.compact .price-currency { margin-top: 2px; font-size: 9px; }
.price-card.compact .price-list { margin-top: 18px; gap: 8px; }
.price-card.compact .price-list li { font-size: 12px; }
.price-card.compact .price-cta { margin-top: 22px; padding: 10px 16px; font-size: 9px; letter-spacing: 0.25em; }
.pricing-pre-hook { margin-top: 80px; }
/* Plans and single models (pricing session c), as on the live page. */
.plans-block { display: flex; flex-direction: column; align-items: center; }
.plans-block .plans-grid { width: 100%; }
.plans-grid { grid-template-columns: 1fr 1fr; margin-top: 20px; }
.interval-toggle { display: inline-flex; border: 1px solid var(--border2); background: var(--surface); }
.interval-opt { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; padding: 10px 16px; background: transparent; border: 0; color: var(--subtext); cursor: pointer; }
.interval-opt.on { background: var(--accent); color: var(--surface); }
.interval-toggle.small { margin: 14px 0 0; }
.interval-toggle.small .interval-opt { padding: 7px 12px; font-size: 9px; }
[data-interval="month"] .iv-year, [data-interval="year"] .iv-month { display: none !important; }
.price-save { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-top: 8px; }
.price-card.featured .price-save { color: var(--accent2); }
/* Yearly first (price-cards, Aaron 2026-10-18): the figure reads per month
   with /mo beside it, the period's billing directly under it in Jost, and
   every small line on the Maker and Workshop cards and both toggles at
   12 px or more. */
.price-amount .price-per { font-family: 'Jost', sans-serif; font-size: 18px; font-weight: 400; color: var(--subtext); margin-left: 4px; }
.price-billed { font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--subtext); margin-top: 8px; }
.price-card.featured .price-amount .price-per, .price-card.featured .price-billed { color: var(--muted); }
.price-card[data-plan="maker"] .price-save, .price-card[data-plan="workshop"] .price-save { font-size: 12px; letter-spacing: 0.12em; }
.interval-toggle .interval-opt, .interval-toggle.small .interval-opt { font-size: 12px; letter-spacing: 0.12em; }
.interval-toggle.small .interval-opt { padding: 7px 10px; letter-spacing: 0.04em; }
/* The currency, said once under each Monthly / Yearly switch (Aaron, 2026-10-18). */
.interval-usd { margin-top: 8px; font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--subtext); }
.paywall-card .interval-usd { margin-top: 6px; }
.price-card.featured::before { content: 'Unlimited'; }
.pricing.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px) { .pricing.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .pricing.four, .plans-grid { grid-template-columns: 1fr; } }
.pricing.four .price-card { padding: 32px 28px; }
.pricing-links { margin-top: 24px; text-align: center; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.15em; color: var(--subtext); }
.pricing-links a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); }
.pricing-links span { margin: 0 10px; }
.pricing-links.small { margin-top: 12px; letter-spacing: 0.05em; }
.license-note-body a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); }
.paywall-limit { margin: 10px 0 0; padding: 10px 12px; background: var(--faint); border-left: 2px solid var(--accent); font-size: 14px; line-height: 1.5; color: var(--text); }
.paywall-tier .iv-year.pt-sub { color: var(--accent); }
/* The panel foot's price, limit and usage lines (dark foot on desktop). */
.st-price-line { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 15px; color: var(--arena-ink); }
.st-free-line { font-family: 'Jost', sans-serif; font-size: 13px; line-height: 1.5; color: var(--arena-ink); }
.st-limit-note { padding: 8px 10px; border-left: 2px solid var(--accent2); background: rgba(0,0,0,0.25); color: var(--arena-ink); font-size: 12.5px; line-height: 1.5; }
.st-usage-line { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.04em; line-height: 1.5; color: var(--arena-ink); }
.pricing-overline { margin-top: 14px; }
.pricing-lake-note { margin-top: 18px; }
.license-note { margin-top: 56px; padding: 28px 32px; background: var(--faint); border-left: 2px solid var(--accent); }
.license-note-label { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.license-note-body { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--subtext); font-style: italic; }

footer { margin-top: 80px; padding: 40px 0 60px; text-align: center; border-top: 1px solid var(--border); }
.footer-logo { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 300; letter-spacing: 0.3em; text-transform: uppercase; color: var(--subtext); }
.footer-logo span { color: var(--accent); }
.footer-note { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--muted); letter-spacing: 0.25em; text-transform: uppercase; margin-top: 12px; }
.footer-links { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; margin-top: 14px; }
.footer-links a { color: var(--muted); text-decoration: none; letter-spacing: 0.25em; }
.footer-links a:hover { color: var(--accent); }
.footer-links .sep { color: var(--border); margin: 0 12px; }

/* ── MODALS, TOAST (live page) ────────────────────────────── */
.notify-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(30,22,12,0.55); opacity: 0; pointer-events: none; transition: opacity .2s; }
.notify-modal.show { opacity: 1; pointer-events: auto; }
.notify-card { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 32px; width: 90%; max-width: 380px; box-shadow: 0 12px 48px rgba(40,28,12,0.25); max-height: 92vh; overflow-y: auto; }
.notify-title { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-style: italic; color: var(--text); margin: 0 0 10px; }
.notify-purpose { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--subtext); line-height: 1.7; margin: 0 0 20px; }
.notify-cancel { padding: 13px 16px; border: 1px solid var(--border); border-radius: 2px; background: transparent; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; }
.auth-panel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.auth-title { font-family: 'Cormorant Garamond', serif; font-size: 23px; font-style: italic; color: var(--text); }
.auth-close { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 20px; line-height: 1; padding: 4px; }
.auth-sub { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--subtext); line-height: 1.7; margin-bottom: 18px; }
.auth-tabs { display: flex; gap: 0; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.auth-tab { flex: 1; padding: 10px 0; background: none; border: none; cursor: pointer; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.auth-field { width: 100%; padding: 11px 12px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 2px; background: var(--bg); color: var(--text); font-family: 'DM Mono', monospace; font-size: 13px; }
.auth-field:focus { outline: none; border-color: var(--accent); }
.auth-hint { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: 0.04em; color: var(--muted); line-height: 1.6; margin: -4px 0 14px; }
/* The marketing opt-in (CASL) and its sender line under it. */
.mkt-optin { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 6px; cursor: pointer; }
.mkt-optin input { margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); }
.mkt-optin span { font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: 0.03em; color: var(--subtext); line-height: 1.6; }
.mkt-sender { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: 0.03em; color: var(--muted); line-height: 1.6; margin: 0 0 16px 23px; }
/* What creating an account agrees to, under the button (no checkbox). */
.auth-legal { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: 0.03em; color: var(--muted); line-height: 1.6; margin: 10px 0 0; text-align: center; }
.auth-legal a { color: var(--accent); }
.auth-error { display: none; color: var(--error); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.06em; line-height: 1.5; margin-bottom: 12px; }
.auth-error.show { display: block; }
.auth-ok { display: none; color: var(--accent); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.06em; line-height: 1.5; margin-bottom: 12px; }
.auth-ok.show { display: block; }
.auth-submit { width: 100%; padding: 13px; border: none; border-radius: 2px; background: var(--accent); color: #fff; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; cursor: pointer; margin-top: 2px; }
.auth-submit:hover { background: var(--accent2); }
.auth-altlink { display: inline-block; margin-top: 14px; cursor: pointer; font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--subtext); text-decoration: underline; background: none; border: 0; padding: 0; }
.paywall-card { max-width: 520px; }
.paywall-tiers { display: flex; gap: 10px; margin: 18px 0 12px; }
.paywall-tier { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px 14px; cursor: pointer; position: relative; background: var(--surface); border: 1px solid var(--border2); border-radius: 10px; color: var(--text); font-family: inherit; transition: border-color .15s, transform .1s; }
.paywall-tier:hover { border-color: var(--accent); transform: translateY(-1px); }
.paywall-tier.featured { border-color: var(--accent); }
.paywall-tier .pt-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.paywall-tier .pt-name { font-size: 14px; font-weight: 600; }
.paywall-tier .pt-price { font-size: 22px; font-weight: 600; color: var(--accent); }
.paywall-tier .pt-price .pt-per { font-size: 12px; font-weight: 400; color: var(--subtext); }
.paywall-tier .pt-sub { font-size: 12px; color: var(--subtext); }
.paywall-onetime { width: 100%; padding: 11px; cursor: pointer; background: transparent; border: 1px dashed var(--border2); border-radius: 8px; color: var(--subtext); font-family: inherit; font-size: 13px; transition: border-color .15s, color .15s; }
.paywall-onetime:hover { border-color: var(--accent); color: var(--accent); }
.paywall-note { display: none; margin-top: 12px; font-size: 13px; color: var(--accent); background: var(--faint); border-radius: 6px; padding: 10px 12px; }
.paywall-note.show { display: block; }
.paywall-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
@media (max-width: 560px) { .paywall-tiers { flex-direction: column; } }

.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(8px);
  background: var(--surface); color: var(--text); padding: 14px 24px 14px 20px;
  font-family: 'Jost', sans-serif; font-size: 12.5px; font-weight: 300; letter-spacing: 0.06em; line-height: 1.55;
  border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 2px;
  box-shadow: 0 14px 36px rgba(30,26,20,0.18), 0 2px 6px rgba(30,26,20,0.08);
  opacity: 0; transition: transform .35s ease, opacity .35s ease; pointer-events: none; z-index: 1200; max-width: min(460px, 92vw);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast::before { content: '\2726'; display: inline-block; margin-right: 10px; color: var(--accent2); font-size: 14px; vertical-align: -1px; }
@media (min-width: 1024px) { .toast { bottom: 40px; } }

/* Undo (undo-toasts): placed by studio.js undoPlace, above every action bar. */
.undo-toast {
  position: fixed; left: 16px; bottom: 16px; z-index: 1210; box-sizing: border-box;
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px;
  background: var(--cream); color: var(--chocolate); border: 1px solid var(--accent-ink); border-radius: 2px;
  font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4;
  box-shadow: 0 14px 36px rgba(30,26,20,0.22), 0 2px 6px rgba(30,26,20,0.10);
  opacity: 0; transform: translateY(8px); transition: transform .25s ease, opacity .25s ease;
}
.undo-toast[hidden] { display: none; }
.undo-toast.show { opacity: 1; transform: none; }
.undo-text { flex: 1 1 auto; min-width: 0; }
.undo-btn {
  flex: 0 0 auto; min-width: 72px; min-height: 44px; padding: 0 16px; cursor: pointer;
  background: var(--accent-ink); color: var(--cream); border: 1px solid var(--accent-ink); border-radius: 2px;
  font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
}
.undo-btn:hover { background: var(--chocolate); border-color: var(--chocolate); }
.undo-btn:focus-visible { outline: 2px solid var(--chocolate); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .undo-toast { transition: none; transform: none; } }

/* ── RESPONSIVE (live page breakpoints and the phone Studio) ─ */
@media (max-width: 1023px) {
  .features, .coming-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 16px 16px 24px; min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 24px; padding-top: 60px; }
  /* The bloom stops at the screen edge: at -40px it ran 24 px past the
     16 px padding and the page scrolled sideways (ui-cleanup). */
  .hero-left::before { left: -16px; right: -16px; }
  /* One column: the showcase takes a share of the viewport and the tiles
     go two, then one, across; scrolling is expected here. */
  .hero-right { height: auto; }
  .arena.showcase { flex: none; height: 48vh; min-height: 300px; max-height: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ways { grid-template-columns: 1fr; }
  /* Screen B stacks (studio layout, 2026-10-07): the arena (head, stage,
     data lines, action bar), then the settings, then the three cards and
     the footer. Generate model is the bar pinned to the bottom of the
     screen (phone Generate, 2026-10-09, below). */
  .studio-grid { display: flex; flex-direction: column; height: auto; }
  .arena-col { display: contents; }
  .arena-slot { order: 1; padding: 10px 12px 0; }
  .arena-slot .arena { flex: none; }
  /* 44 percent of the screen's height, as asked: flex: 1 (.stage above) is
     a zero basis that won over the height in this column of no fixed
     height and left the stage at its 240 px minimum. */
  .arena-slot .arena .stage { flex: none; height: 44vh; min-height: 240px; }
  .sidebar { order: 2; height: auto; border-right: 0; background: transparent; }
  .decks { overflow: visible; padding: 12px 12px 8px; }
  /* Generate model, pinned to the bottom of the screen (phone Generate,
     2026-10-09): at the end of the settings it sat about 1,530 px below a
     390x844 screen. On a cream strip, 16 px margins; it slides away below
     the screen whenever it would cover the 3D view or its controls
     (studio.js placePhoneBar, measured on the visitor's own screen), and
     is hidden while a text field has focus (the on-screen keyboard); the
     founding pop-up stays clear of it (founding_popup.js place). The page
     keeps room for it at the bottom, so everything above it can scroll
     clear. Also hidden while the search's list is open: a press on a row
     takes the focus off the search box, and the bar shown again under the
     finger took the release, so the row was never clicked (measured, a
     lake row at the foot of the pulled-up settings sheet, Chromium and
     WebKit 390x844). */
  .phone-generate { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(245,240,232,0.96); border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(40,28,12,0.08); transition: transform .2s ease; }
  /* Away at once, back with the slide: a 0.2 s slide away left the bar over
     the laser legend for that long when the laser panel laid out late
     (measured, Chromium 390x844, the laser view at the page top). */
  .phone-generate.away { transform: translateY(calc(100% + 8px)); transition: none; }
  body[data-screen="b"] { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  /* body.bar-hold: a press that began in a text field, until it is done (studio.js BAR_FIELD). */
  body:has(#st-results.show) .phone-generate,
  body.bar-hold .phone-generate,
  body:has(input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus,
           input[type="password"]:focus, input[type="url"]:focus, input[type="tel"]:focus,
           input[type="number"]:focus, input:not([type]):focus, textarea:focus) .phone-generate { display: none; }
  /* Why Generate cannot start a build (laser modes, 2026-10-09), on the
     bar under its button; the action bar's own line is not on a phone. */
  .phone-gen-reason { display: block; margin: 8px 0 0; color: #2A2118; border-left: 2px solid #2A2118; background: rgba(42,33,24,0.06); }
  .actionbar .gen-reason { display: none; }
  /* On the cream page: brand gold-deep with cream text (6.27:1); hover
     and pressed darker in the same family (7.65:1, 8.45:1). */
  .phone-generate .generate-btn { width: 100%; justify-content: center; min-height: 52px; font-size: 12.5px; font-weight: 500;
    background: #6F5310; color: #F4EFE4; box-shadow: 0 1px 3px rgba(40,28,12,.25); }
  .phone-generate .generate-btn:hover { filter: none; background: #5F470E; }
  /* Buy once on the bar (pol-buy): an outline in gold-deep on the cream
     bar (6.27:1), full width, 44 px. */
  .phone-generate .phone-buy { display: flex; width: 100%; justify-content: center; min-height: 44px;
    margin-top: 8px; border-color: #6F5310; color: #6F5310; background: transparent; }
  .phone-generate .phone-buy:hover { background: rgba(111, 83, 16, 0.07); }
  .phone-generate .phone-buy[hidden] { display: none; }
  /* STL, 3MF and OBJ on the bar (pol-download): the same outline, three
     to a row in the place Buy once takes for a visitor. */
  .phone-generate .phone-files { display: flex; gap: 8px; margin-top: 8px; }
  .phone-generate .phone-files[hidden], .phone-generate .phone-file[hidden] { display: none; }
  .phone-generate .phone-file { flex: 1 1 0; min-width: 0; min-height: 44px; justify-content: center; padding: 8px 6px;
    white-space: normal; text-align: center; line-height: 1.3; border-color: #6F5310; color: #6F5310; background: transparent; }
  .phone-generate .phone-file:hover { background: rgba(111, 83, 16, 0.07); }
  /* A long label wraps. */
  .phone-generate .phone-buy { white-space: normal; text-align: center; line-height: 1.3; }
  /* The lithophane offer on the bar (fix 13, merge-10a; litho-a; light-phone):
     the offer row's twin, on the cream bar, in every settings sheet state
     (closed, the row itself is below the fold of the page; merge-litho
     keeps light-phone's all-three-states rule for both kinds). Chocolate
     text (12.94:1) and the gold-deep link (6.27:1); the link is 44 px tall,
     the picture is not a target. */
  .phone-generate .phone-offer { display: flex; margin-top: 8px; padding: 6px 0 0; gap: 10px;
    border: 0; border-top: 1px solid var(--border); background: transparent; color: #2A2118; }
  .phone-generate .phone-offer[hidden] { display: none; }
  .phone-generate .phone-offer .offer-art { width: 48px; }
  .phone-generate .phone-offer .offer-text { flex: 1 1 auto; font-size: 13px; line-height: 1.35; }
  .phone-generate .phone-offer .offer-link { color: #6F5310; }
  .phone-generate .generate-btn:active { background: #57410C; }
  /* Choose a place first, Pick a world first and Generating…: the muted
     dashed outline, not the gold, as .needs-world, with the label in
     chocolate (12.94:1; it was the muted brown at 5.34:1) at weight 500. */
  .phone-generate .generate-btn:disabled, .phone-generate .generate-btn:disabled:hover, .phone-generate .generate-btn:disabled:active {
    opacity: 1; filter: none; cursor: not-allowed; background: var(--bg2); color: var(--chocolate); border: 1px dashed var(--muted); box-shadow: none; }
  .viewer-cards { order: 3; grid-template-columns: 1fr; margin: 12px 12px 0; }
  .studio-top { padding: 0 14px; }
  .arena .prov { max-height: none; overflow: visible; font-size: 12.5px; }
  .prov.datalines { grid-template-columns: 1fr; gap: 1px; padding: 10px 12px 12px; }
  .datalines .dl-k { padding-top: 6px; }
  .datalines .dl-row:first-child .dl-k, .datalines .dl-row[hidden] + .dl-row .dl-k { padding-top: 0; }
  .actionbar { padding: 10px 12px 12px; }
  .actionbar .bar-price { flex: 1 1 100%; max-width: none; padding-right: 0; }
  .actionbar #st-generate { display: none; }
  .actionbar .buy-btn { flex: 1 1 100%; }
  .actionbar .files { flex: 1 1 100%; }
  .actionbar .files .filebtn { flex: 1 1 0; min-width: 0; padding: 8px 6px; }
  .actionbar .files #st-btn-free, .actionbar .files #st-btn-laser { flex: 1 1 100%; }
  .actionbar .who-line { justify-content: flex-start; flex-wrap: wrap; gap: 4px 10px; }
  .actionbar .who-line .who-sent-input { width: 100%; }
  .studio-foot { padding: 0 20px; }
  /* Full screen on a phone: Turn and Edit settings on one row, the price
     line, then Buy once and the files. */
  .arena.fs .actionbar { padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
  .arena.fs .actionbar .fs-only { flex: 1 1 0; }
  .arena.fs .actionbar #fs-edit { margin-right: 0; }
  .arena.fs .actionbar .bar-price { gap: 2px; }
  .arena.fs .viewbtns { margin-right: 96px; }
}
@media (max-width: 680px) {
  .wrap { padding: 0 20px; }
  .features, .coming-grid { grid-template-columns: 1fr; }
  .features.lake-columns, .features.care-cards { grid-template-columns: 1fr; }
  .pricing, .pricing.three { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { border-bottom: 1px solid var(--border); }
  /* Ported from index.html: without min-width:0 each 1fr column was held
     at its own number's min-content width instead of splitting evenly, so
     "160,000+" and "13,900+" (no break opportunity) overflowed their cell
     and moved the divider off center below ~427px. Same clamp, calibrated
     against "160,000+" at 42px. */
  .stat-num { font-size: clamp(20px, 15.04vw - 22.9px, 42px); }
  .africa-feature { grid-template-columns: 1fr; gap: 32px; margin: 64px 0; }
  .africa-feature-body { max-width: none; font-size: 18px; }
  .africa-feature-quote { max-width: none; font-size: 18px; }
  .africa-feature-signature { width: 68px; }
  .tagline-sub { font-size: 14px; }
  .front-line { max-width: none; }
  .home-search { max-width: none; }
  .tiles { grid-template-columns: 1fr; }
  .closing { justify-content: center; text-align: center; }
}
@media (max-width: 680px) {
  /* The arena head on a phone: machine control and view buttons share the
     first row, the title takes the second in full, so a name never wraps
     beside five 44 px buttons. In full screen the Exit button sits over
     the head's right padding. */
  .arena-head { padding: 10px 12px; gap: 8px 10px; }
  .machine { order: 0; width: auto; flex: 1 1 150px; max-width: 220px; }
  .viewbtns { order: 1; }
  .arena-title-wrap { order: 2; flex: 1 1 100%; }
  .arena.fs .arena-head { padding-right: 96px; }
  .arena.fs .viewbtns { margin-right: 0; }
}
@media (max-width: 420px) {
  .thumbs.three { grid-template-columns: repeat(3, 1fr); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The world picker (studio layout, 2026-10-07): two big choices, Earth and
   Space; Space lists the offered worlds in groups (studio.js WORLD_GROUPS),
   and a chosen world folds the list into one line with Change world. A
   group row wraps, a phone has room for three across. An owner-only world
   carries its "Owner preview" tag under its name. */
.world-picker { display: flex; flex-direction: column; gap: 10px; }
.realms { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.realms .realm[hidden] { display: none; }
.realms .realm { min-height: 56px; padding: 10px 8px; border: 1px solid var(--border2); border-radius: 2px; background: rgba(250,247,242,0.7); color: var(--subtext); font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; letter-spacing: 0.04em; text-transform: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.realms .realm:hover { border-color: var(--accent); color: var(--text); }
.realms .realm[aria-checked="true"] { border-color: var(--accent); background: rgba(139,105,20,0.10); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }
.realms .realm.unavail, .realms .realm.unavail:hover { border-color: var(--border2); background: rgba(250,247,242,0.7); color: #6A5C42; box-shadow: none; cursor: not-allowed; outline: 1px dashed #6A5C42; outline-offset: -5px; }
.realms .realm.unavail[aria-checked="true"] { background: rgba(106,92,66,0.08); outline-width: 2px; }
.space-groups { display: flex; flex-direction: column; gap: 10px; }
.space-groups[hidden], .world-chosen[hidden] { display: none; }
/* Group titles and world names (space-picker, 2026-10-09): Jost
   500 at 13 px in chocolate (14.78:1 on the panel), the selected world
   gold-deep with cream (6.27:1); they were 11 px DM Mono 300 and 11.5 px
   Josefin 400 in the muted brown. Here only: the other panel labels keep
   .lab. */
.world-group .lab { margin-bottom: 6px; font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.16em; color: var(--chocolate); }
.pills.worlds { flex-wrap: wrap; }
.pills.worlds .mode-pill { flex: 1 1 30%; min-width: 0; padding: 9px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.12em; color: var(--chocolate); }
.pills.worlds .mode-pill.active { background: var(--accent-ink); color: var(--cream); }
.pills.worlds .mode-pill .pill-tag { font-family: 'DM Mono', monospace; font-size: 7.5px; letter-spacing: 0.12em; opacity: .85; }
.world-chosen { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 6px 6px 14px; border: 1px solid var(--accent); border-radius: 2px; background: rgba(139,105,20,0.08); }
.world-chosen-name { flex: 1; min-width: 0; font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.world-chosen-name .pill-tag { margin-left: 8px; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.12em; color: var(--subtext); }
.world-change { min-height: 44px; padding: 0 14px; border: 1px solid var(--border2); border-radius: 2px; background: var(--surface); color: var(--accent-ink); font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.world-change:hover { border-color: var(--accent); }
/* A feature the plate cannot represent (too large, at the pole, unmapped):
   listed, with the reason, but not selectable. */
.row.row-off { cursor: not-allowed; opacity: .55; }
.row.row-off:hover { background: none; }
.row-sub.row-warn { white-space: normal; color: var(--error); }
.row-sub.row-note { white-space: normal; font-style: italic; }
/* World badges (worlds.py 'badge'): MEASURED for laser altimetry, STEREO
   for image-derived, PARTIAL for a world only partly mapped. */
.lake-badge.measured { background: rgba(70,120,90,0.14); color: #4a7a5c; }
.lake-badge.stereo { background: rgba(120,110,60,0.14); color: #7a6a30; }
.lake-badge.partial { background: rgba(170,110,40,0.16); color: #9a6a28; }
.prov .lake-badge.measured { background: rgba(140,205,165,.28); color: #dff3e6; }
.prov .lake-badge.stereo { background: rgba(215,205,150,.28); color: #f1e9cf; }
.prov .lake-badge.partial { background: rgba(235,190,120,.28); color: #f8e4c2; }
.status-badge.measured { display: inline-block; background: #3f7a5c; }
.status-badge.stereo { display: inline-block; background: #7a6a30; }
.status-badge.partial { display: inline-block; background: #9a6a28; }
.prov .frame-note { margin-top: 6px; }
/* Printable relief (pei-relief): the model was built lower than the slider
   asked (studio.js reliefNote). A light gold on the strip's dark veil; the
   accent gold it first used measured too faint there (pei-relief Phase 3). */
.prov .relief-note { margin-bottom: 4px; color: #f5d98b; font-weight: 600; }
.prov .cal.credit a { color: inherit; }
/* A credit the data's authors require word for word (studio.js, Ganymede
   and Callisto): a label in cream on the strip's chocolate veil, links in
   the shallows blue, never under 12 px. */
.prov .cal.notice { color: var(--cream); font-size: 12.5px; }
.prov .cal.notice a { color: #81a8bb; }
/* The Ocean tile for everyone but the owner: shown, Coming soon, inert. */
.tile.tile-soon { cursor: default; }
.tile.tile-soon:hover { border-color: var(--border); background: rgba(250,247,242,0.86); }
.tile.tile-soon .tile-action { color: var(--subtext); }

/* Embossing fields (emboss_c, 2026-10-01): Line 1, Line 2 and the font,
   Name mode with a frame only. */
.emboss-fields { margin-top: 12px; display: grid; gap: 6px; }
.emboss-fields .lab { margin-top: 6px; }
.emboss-input { width: 100%; box-sizing: border-box; padding: 9px 10px; font-family: 'DM Mono', monospace; font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 2px; }
.emboss-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.emboss-input:disabled { opacity: .6; cursor: not-allowed; }
.font-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.font-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 10px; min-height: 48px; text-align: left; cursor: pointer; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 2px; }
.font-opt .fo-name { font-size: 16px; line-height: 1.2; }
.font-opt .fo-why { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--subtext); line-height: 1.3; }
.font-opt.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: rgba(139, 105, 20, 0.08); }
.font-opt.unavailable { cursor: not-allowed; color: var(--muted); background: transparent; border-style: dashed; }
.font-opt.unavailable .fo-why { color: var(--error, #9e3a2a); }
.emboss-msg.refused { color: var(--error, #9e3a2a); }

/* "Who sent you?" before checkout (partner-links, 2026-10-02). */
.who-sent { display: block; margin-top: 14px; font-size: 12px; letter-spacing: 0.04em; color: var(--subtext); }
.who-sent-opt { opacity: .75; }
.who-sent-input { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 2px; background: var(--bg); color: var(--text); font-family: 'DM Mono', monospace; font-size: 13px; }
.who-sent-input:focus { outline: none; border-color: var(--accent); }
/* Pinned to the bottom of the window while the pricing cards are on screen
   (sticky inside .pricing-pay), so every pay button there has the question
   in view at the click; it settles below the cards at the end (who-sent,
   2026-10-02). */
.pricing-who { position: sticky; bottom: 12px; z-index: 30; box-sizing: border-box; max-width: 420px; margin: 40px auto 0; padding: 2px 14px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 2px; box-shadow: 0 6px 24px rgba(48, 42, 36, 0.14); }
.pricing-who .who-sent { margin-top: 8px; }
.who-sent[hidden] { display: none; }
/* In the action bar: the arena's ink at every width (.actionbar rules). */
.who-sent-panel { margin-top: 0; font-size: 11px; color: var(--arena-ink); }
.who-sent-panel .who-sent-input { margin-top: 4px; padding: 7px 10px; font-size: 12px; }
/* Painted color legend (color-paint, 2026-10-02). */
.color-legend { margin-top: 10px; display: grid; gap: 6px; }
.color-legend .band { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--subtext); line-height: 1.35; min-width: 0; }
.color-legend .sw { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.25); }
.color-legend .band span:last-child { overflow-wrap: anywhere; }
.color-legend .legend-note { font-size: 12px; color: var(--subtext); margin-top: 2px; }
/* The filament list (color-controls, 2026-10-12): each row a 44 px swatch
   that opens the color picker (the native input laid over it, unseen), the
   filament's name, and for a part the customer can do without a 44 px
   switch in gold-deep. A row switched off reads in muted brown. */
.color-legend .fil-row { min-height: 44px; gap: 10px; font-size: 14px; color: var(--chocolate); }
.color-legend .fil-row .sw { position: relative; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 6px;
  border: 1px solid var(--subtext); overflow: hidden; cursor: pointer; }
.color-legend .fil-row .sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  border: 0; opacity: 0; cursor: pointer; }
.color-legend .fil-row .sw:focus-within { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.color-legend .fil-row .fil-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Satellite photo color (tc-studio): the style choice and its rows. The
   labels at 12 px (the shared .lab is 11), pills that wrap a long label
   ("As the satellite saw it") at 390 px, the picked hex beside its name. */
.sat-group { margin-bottom: 10px; }
.sat-group .lab { font-size: 12px; margin-top: 12px; }
.sat-group > .lab:first-child { margin-top: 0; }
.sat-pills .mode-pill { white-space: normal; letter-spacing: 0.08em; padding: 10px 6px; line-height: 1.3; }
.sat-group .note { font-size: 13px; }
.sat-group .note[hidden] { display: none; }
/* Blend (tc-blend): three long choices, one per line. */
.pills.sat-stack { display: grid; grid-template-columns: 1fr; }
.color-legend .fil-row .fil-hex { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--subtext); margin-left: 6px; white-space: nowrap; }
.actionbar .sat-dl-note { flex: 1 1 100%; margin: 0; font-size: 13px; line-height: 1.5; letter-spacing: 0.02em; color: var(--arena-ink); }
.actionbar .sat-dl-note[hidden] { display: none; }
.color-legend .fil-row.off { color: var(--subtext); }
.color-legend .fil-row.off .sw { opacity: .45; cursor: not-allowed; }
.color-legend .fil-row.off .sw input { cursor: not-allowed; }
.fil-switch { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 58px; min-height: 44px;
  padding: 0; border: 0; background: transparent; cursor: pointer; }
.fil-switch .track { position: relative; display: block; width: 52px; height: 30px; border-radius: 15px; box-sizing: border-box;
  border: 1px solid var(--subtext); background: var(--bg2); transition: background .2s; }
.fil-switch[aria-checked="true"] .track { background: var(--accent-ink); border-color: var(--accent-ink); }
.fil-switch .knob { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--cream); box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: left .2s; }
.fil-switch[aria-checked="true"] .knob { left: 24px; }

/* One checkout at a time (studio.js lockPayments): the clicked path to
   payment reads "Opening secure checkout..." at full strength, whatever its
   own disabled style, and a double click does not select a word of it;
   every other path waits, dimmed. */
.pay-opening:disabled { opacity: 1 !important; cursor: progress; user-select: none; }
.pay-wait:disabled { opacity: .5; cursor: progress; }

/* Frame shapes (frame-picker, 2026-10-03): nine shape tiles, best fit for
   the model first, three across at every width; a good fit carries the
   gold badge, a costly one its note. Owner only while the engine's switch
   says so (studio.js syncFrameShapes). */
.fshapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fshape {
  display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: 0; overflow: hidden;
  cursor: pointer; text-align: left; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 2px; transition: border-color .15s, box-shadow .15s;
}
.fshape:hover { border-color: var(--accent2); }
.fshape.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.fshape[disabled] { cursor: not-allowed; opacity: .45; }
.fshape[disabled]:hover { border-color: var(--border); }
.fshape .fs-art { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; background: var(--bg2); }
.fshape .fs-body { display: flex; flex-direction: column; gap: 4px; padding: 7px 8px 8px; min-width: 0; }
.fshape .fs-name { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--subtext); overflow-wrap: normal; word-break: keep-all; }
.fshape.on .fs-name { color: var(--accent-ink); }
.fshape .fs-badge { align-self: flex-start; padding: 2px 6px; border-radius: 10px; border: 1px solid var(--accent2); font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); background: rgba(176,138,42,0.10); white-space: nowrap; }
.fshape .fs-cost { font-size: 12px; line-height: 1.35; color: var(--error); overflow-wrap: anywhere; }
.fshape .fs-sub { font-family: 'DM Mono', monospace; font-size: 10px; line-height: 1.3; color: var(--subtext); overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .fshape .fs-name { font-size: 12px; letter-spacing: 0.04em; }
  .fshape .fs-body { padding: 6px 6px 7px; }
}
#st-fbit-group { margin-top: 14px; }
.pills.fbits { display: grid; grid-template-columns: repeat(3, 1fr); }
.pills.fbits .mode-pill { padding: 10px 4px; letter-spacing: 0.08em; text-transform: none; font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: normal; }
.pills.fbits .mode-pill .pill-tag { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; opacity: .85; }
/* The viewer's note while the stage shows a shape outline the model was
   not yet built with. */
.shape-preview-note { position: absolute; left: 50%; transform: translateX(-50%); top: 44px; z-index: 6; max-width: calc(100% - 32px); box-sizing: border-box; padding: 6px 12px; border-radius: 2px; background: rgba(30,26,20,.72); color: var(--arena-ink); font-size: 12px; letter-spacing: 0.04em; line-height: 1.4; text-align: center; pointer-events: none; }
.shape-preview-note[hidden] { display: none; }
/* A phone: the stale note wraps to three lines at the top, so this one sits
   above the scale bar and the size readout instead. */
@media (max-width: 680px) { .shape-preview-note { top: auto; bottom: 48px; font-size: 12px; } }

/* A GPX route (gpx-studio, 2026-10-03): the owner's upload, the route's
   summary, where it goes and its style (studio.js syncRouteControls). The
   swatch is the colour the preview draws the route in (ROUTE_HEX). */
.route-group { display: flex; flex-direction: column; }
.route-upload {
  min-height: 44px; padding: 10px 14px; background: var(--surface); border: 1px dashed var(--accent2); border-radius: 2px;
  font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-ink); cursor: pointer; width: 100%;
}
.route-upload:hover { border-style: solid; border-color: var(--accent); }
.route-upload[disabled] { opacity: .55; cursor: progress; }
.route-loaded { display: flex; flex-direction: column; }
.route-file { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 2px; }
.route-swatch { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 3px; background: #c8102e; border: 1px solid rgba(0,0,0,0.25); }
.route-name { flex: 1 1 auto; min-width: 0; font-family: 'DM Mono', monospace; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-remove { flex: 0 0 auto; min-height: 32px; padding: 4px 8px; background: transparent; border: 0; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); text-decoration: underline; cursor: pointer; }
.route-loaded .lab { margin-top: 14px; }
.route-msg { color: var(--error); }
#st-route-owned:empty { display: none; }
/* The box around a Region route (route-shapes-b): the shape pills wrap,
   three to a row, so nine shapes never run past the panel. */
.route-box { display: flex; flex-direction: column; margin-top: 14px; }
.route-box .toggle { margin-top: 4px; }
.route-box .dial-head { margin-top: 14px; }
.pills.route-shapes { display: grid; grid-template-columns: repeat(3, 1fr); }
.pills.route-shapes .mode-pill { min-width: 0; padding-left: 4px; padding-right: 4px; }

/* ── Laser (laser build step 10, 2026-10-07): the signed-off panel mockup
   v7 (laser_panel_mockup.html) in the Studio. The machine key gains a
   third position; with Laser chosen in Lake mode, decks 2 and 3 show only
   Width and the laser controls, and the stage shows the stack. ────────── */
.machine[data-keys="3"] { width: 264px; }
.machine[data-keys="3"] .mkey { letter-spacing: 0.14em; }
.machine[data-keys="3"] .slide { width: calc((100% - 6px) / 3); }
/* Four keys with the Cutter (download-kits Part B). */
.machine[data-keys="4"] { width: 340px; }
.machine[data-keys="4"] .mkey { letter-spacing: 0.1em; }
.machine[data-keys="4"] .slide { width: calc((100% - 6px) / 4); }
/* The UV print size (uv-kit-build Part B): five pills, three to a row. */
.pills.uv-beds { display: grid; grid-template-columns: repeat(3, 1fr); }
.pills.uv-beds .mode-pill { min-width: 0; padding-left: 4px; padding-right: 4px; letter-spacing: 0.06em; white-space: normal; }
#st-uv-group { margin-top: 18px; }
#st-uv-group[hidden] { display: none; }
/* Five keys with the UV printer (uv-kit-build). */
.machine[data-keys="5"] { width: 420px; }
.machine[data-keys="5"] .mkey { letter-spacing: 0.06em; }
.machine[data-keys="5"] .slide { width: calc((100% - 6px) / 5); }
#screen-b[data-out="laser"] #st-relief-group,
#screen-b[data-out="laser"] #st-base-group,
#screen-b[data-out="laser"] #st-shape-group,
#screen-b[data-out="laser"] #st-z-readout,
#screen-b[data-out="laser"] #deck-3 .deck-inner > :not(#st-laser-group):not(#st-tl-group):not(#st-group-mode-group),
#screen-b[data-out="laser"] #st-group-mode-note,
#screen-b[data-out="laser"] #st-btn-free { display: none !important; }
/* The Cutter (cutter-paper, Aaron's answer 14): a stack of cardstock, so
   no Relief, Base or Frame; its height is the sheets' (st-cut-height). */
#screen-b[data-out="cutter"] #st-relief-group,
#screen-b[data-out="cutter"] #st-base-group,
#screen-b[data-out="cutter"] #st-z-readout,
#screen-b[data-out="cutter"] #st-frame-panel,
#screen-b[data-out="cutter"] #deck-3 .deck-inner > div:has(> #st-frame-tiles) { display: none !important; }
.laser-group { display: flex; flex-direction: column; gap: 12px; }
.laser-group[hidden] { display: none; }
.laser-group .ctl { display: flex; flex-direction: column; gap: 6px; }
.laser-group .note { margin-top: 0; }
.laser-group .pills { display: flex; border: 1px solid var(--border); border-radius: 2px; overflow: hidden; background: var(--surface); }
.laser-group .mode-pill { flex: 1; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.laser-group .pill-tag { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.08em; text-transform: none; opacity: .85; }
.bedgrid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: start; }
.bedf { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bedf .bedin { display: flex; align-items: center; gap: 6px; }
.bedf .num { width: 100%; min-width: 0; flex: 1; }
.bedf .cap { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.bedf .inch { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--subtext); }
.bedx { padding-top: 32px; font-family: 'DM Mono', monospace; font-size: 12px; color: var(--subtext); }
.bedrow { display: flex; gap: 8px; align-items: center; }
.laser-group .unit { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--subtext); }
/* The Cutter's sheet shapes (kits-round2 Part B): nine pills, three to a row. */
.laser-group .pills.cut-shapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The Cutter's paper weights (cutter-paper): four pills, the weight over its gsm. */
.laser-group .pills.cut-stocks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.laser-group .pills.cut-stocks.cut-bass { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.laser-group .pills.cut-stocks .mode-pill { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 2px; letter-spacing: 0.12em; }
.laser-group .pills.cut-stocks .pill-sub { font-size: 12px; letter-spacing: 0.02em; text-transform: none; }
/* The craft cutter's material (cutter-vinyl): three pills to a row. The
   vinyl decal's sizes: the use over its size, as the paper weights. */
.laser-group .pills.cut-materials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* A craft cutter control the material does not use is hidden (.ctl's flex
   would otherwise win over the hidden attribute). */
#st-cutter-group .ctl[hidden], #st-cutter-group #st-cut-vinyl[hidden] { display: none; }
.laser-group .pills.cut-materials .mode-pill { padding: 12px 2px; letter-spacing: 0.1em; }
.laser-group .pills.cut-decal-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 8px; }
.laser-group .pills.cut-decal-sizes .mode-pill { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 2px; letter-spacing: 0.12em; }
.laser-group .pills.cut-decal-sizes .pill-sub { font-size: 12px; letter-spacing: 0.02em; text-transform: none; }
/* The Cutter's text (cutter-paper): the words, then how paper carries them. */
.laser-group .cut-text { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 2px; background: var(--surface); color: var(--text);
  font-family: 'Jost', sans-serif; font-size: 16px; }
.laser-group .pills.cut-methods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.laser-group .pills.cut-methods .mode-pill { padding: 12px 2px; letter-spacing: 0.1em; }
.laser-group .check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13px; color: var(--text); cursor: pointer; }
.laser-group .check.sub { padding-left: 26px; }
.laser-group .check.dim { color: var(--muted); cursor: default; }
.laser-group .check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.check-note { margin: -8px 0 0 28px; font-size: 12.5px; color: var(--subtext); line-height: 1.5; }
.check-note:empty { display: none; }
.check-note.warn { color: #9a4a1c; }
/* The stack's figures and the water sheet's card (laser panel, 2026-10-09):
   labels muted, figures chocolate, never gold (gold is for what takes a
   click); nothing under 12 px. */
.stack-ro { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 2px; background: var(--surface); }
.stack-ro .ro-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 12px; }
.stack-ro .ro-k { font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--subtext); }
.stack-ro .ro-v { font-family: 'DM Mono', monospace; font-size: 14px; color: #2a2118; }
.stack-ro .ro-note { font-size: 12.5px; line-height: 1.5; color: var(--subtext); }
.stack-ro .ro-note:empty, .stack-ro[hidden], .stack-ro [hidden] { display: none; }
.water-card { display: flex; flex-direction: column; gap: 2px; padding: 0 12px 12px; border: 1px solid var(--border2); border-radius: 2px; background: var(--surface); }
.water-card[hidden] { display: none; }
.laser-group .water-card .check { font-size: 14px; color: #2a2118; }
.water-desc { margin-left: 28px; font-size: 12.5px; line-height: 1.5; color: var(--subtext); }
.water-line { margin: 6px 0 0 28px; font-size: 13px; line-height: 1.45; color: #2a2118; }
.water-line[hidden] { display: none; }
/* The laser panel's type at 12 px and 4.5:1 at least (laser panel brand
   pass, 2026-10-09). Inside the panel only: labels and units 12 px, the
   inch tags under the thickness pills 12 px, the bed captions muted brown
   (--muted measured 2.65:1 on the panel), the readouts chocolate rather
   than gold (gold measured 4.17:1 on the readout's ground, and gold is for
   what takes a click), a switched-off row muted brown. */
.laser-group .dial-label, .laser-group .unit, .laser-group .bedf .inch,
.laser-group details.adv summary, .laser-group .pack-btn { font-size: 12px; }
.laser-group .pill-tag { font-size: 12px; opacity: 1; }
.laser-group .bedf .cap { font-size: 12px; color: var(--subtext); }
.laser-group .readout { color: #2a2118; }
.laser-group .check.dim { color: var(--subtext); }
/* The kind of laser (machine-picker): four kinds, two by two, each with its
   bed under its name. */
.machine-pills { display: grid !important; grid-template-columns: 1fr 1fr; }
.machine-pills .mode-pill { padding: 8px 6px; letter-spacing: 0.08em; white-space: normal; }
.pos-ctl { margin: -2px 0 0 28px; }
.pos-ctl[hidden] { display: none; }
.corner-pills { display: grid !important; grid-template-columns: 1fr 1fr; }
.corner-pills .mode-pill { border-top: 1px solid var(--border); }
.corner-pills .mode-pill:nth-child(2n+1) { border-left: 1px solid var(--border); }
.corner-pills .mode-pill[data-pos="auto"] { grid-column: 1 / -1; border: 0; }
/* The name's font (laser-fonts): the frame labels' picker under the
   name's switches, dimmed with the name switched off. */
.laser-font-ctl { margin: 4px 0 6px 26px; }
.laser-font-ctl .lab { display: block; margin-bottom: 6px; font-size: 12px; }
.laser-font-ctl.dim .font-picker { opacity: .4; pointer-events: none; }
.laser-font-ctl .check-note { margin: 8px 0 0; }
.laser-font-ctl .font-opt .fo-why { font-size: 12px; }
.laser-font-ctl .font-opt.unavailable { color: var(--subtext); }
.laser-font-ctl .fo-why[hidden] { display: none; }
/* The name's and the rose's sizes (laser-sizes): the kerf slider's dial, a
   readout, and a Standard button (44 px) that puts the size back. */
.laser-size-ctl { margin: 4px 0 6px 26px; }
.laser-size-ctl[hidden] { display: none; }
.laser-size-ctl .size-foot { display: flex; margin: 2px 0 0; }
.laser-size-ctl .pack-btn:disabled { opacity: .45; cursor: default; }
.laser-size-ctl .check-note { margin: 8px 0 0; }
.laser-size-ctl.dim .inst { opacity: .45; }
details.adv { border: 1px solid var(--border); border-radius: 2px; background: var(--surface); }
details.adv summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 0 12px; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--subtext); }
details.adv summary::-webkit-details-marker { display: none; }
details.adv summary::after { content: '+'; margin-left: auto; color: var(--accent); }
details.adv[open] summary::after { content: '\2212'; }
details.adv .inner { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 12px; }
.pack-hint { display: none; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 8px 10px; border: 1px solid var(--border2); border-left: 3px solid var(--accent2); background: var(--surface); font-size: 12.5px; line-height: 1.45; color: var(--text); }
.pack-hint.on { display: flex; }
.pack-hint span { flex: 1 1 180px; min-width: 0; }
.pack-btn { min-height: 44px; padding: 0 14px; border: 1px solid var(--accent); border-radius: 2px; background: var(--accent); color: var(--surface); font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.pack-btn:hover { background: var(--accent-ink); }
.pack-btn.ghost { background: transparent; color: var(--accent-ink); }
/* The view controls. */
.laser-explode { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 16px 4px; color: var(--arena-ink); }
.laser-explode[hidden] { display: none; }
.laser-explode .seg { flex: 1 1 340px; display: flex; align-items: center; min-width: 0; border: 1px solid rgba(255,255,255,.45); border-radius: 2px; background: rgba(30,26,20,.28); }
.seg-btn { flex: none; min-height: 48px; padding: 0 14px; border: 0; background: transparent; color: var(--arena-muted); font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.seg-btn:hover { color: var(--arena-ink); }
.seg-btn.active { background: var(--accent); color: var(--surface); }
.seg-track { flex: 1; min-width: 90px; padding: 0 14px; display: flex; align-items: center; }
input.gold { -webkit-appearance: none; appearance: none; width: 100%; height: 48px; background: transparent; cursor: pointer; }
input.gold::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #8b6914, #d4ad52) 0 0 / var(--fill, 0%) 100% no-repeat, rgba(255,255,255,.32); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
input.gold::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f0d488, #b08a2a 55%, #7a5a10); border: 2px solid #fbf7ef; box-shadow: 0 2px 5px rgba(0,0,0,.45); }
input.gold::-moz-range-track { height: 8px; border-radius: 4px; background: rgba(255,255,255,.32); }
input.gold::-moz-range-progress { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #8b6914, #d4ad52); }
input.gold::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f0d488, #b08a2a 55%, #7a5a10); border: 2px solid #fbf7ef; box-shadow: 0 2px 5px rgba(0,0,0,.45); }
.playbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 20px 0 16px; border: 1px solid #d4ad52; border-radius: 2px; background: rgba(139,105,20,.55); color: var(--arena-ink); font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.playbtn .tri { font-size: 18px; letter-spacing: 0; line-height: 1; }
.playbtn:hover { background: rgba(139,105,20,.8); }
.playbtn.running { opacity: .7; cursor: default; }
.showall { display: none; min-height: 44px; padding: 0 12px; border: 1px solid rgba(255,255,255,.4); border-radius: 2px; background: transparent; color: var(--arena-ink); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.showall.on { display: inline-flex; align-items: center; }
.showall:hover { background: rgba(255,255,255,.14); }
/* The stack's own canvas, over the Studio's while a laser job is shown. */
.laser-stage { position: absolute; inset: 0; z-index: 2; }
.laser-stage[hidden] { display: none; }
.laser-stage .laser-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.laser-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.plabel { position: absolute; transform: translate(-50%, -50%); font-family: 'DM Mono', monospace; font-size: 11px; line-height: 1; padding: 2px 4px; border-radius: 2px; background: rgba(250,247,242,0.9); color: var(--text); white-space: nowrap; }
.laser-hover { position: absolute; left: 16px; top: 10px; z-index: 1; padding: 7px 12px; background: rgba(250,247,242,0.92); border-left: 2px solid var(--accent); font-size: 13px; color: var(--text); pointer-events: none; opacity: 0; transition: opacity .15s; }
.laser-hover.on { opacity: 1; }
/* The Studio's own model canvas stays under the stack's otherwise. Keyed
   on the arena itself, so it holds in the full view too (the arena moves to
   <body> there); the viewer is also emptied when the stack shows. */
.arena[data-laser-view="on"] #st-canvas { visibility: hidden; }
.arena[data-laser-view="on"] #st-stage .watermark,
.arena[data-laser-view="on"] #st-dl-size,
.arena[data-laser-view="on"] #st-scalebar,
.arena[data-laser-view="on"] #st-hint { display: none; }
.laser-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 16px 10px; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.08em; color: var(--arena-muted); }
.laser-legend[hidden] { display: none; }
.laser-legend .sw { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.25); }
.laser-legend .sw-ramp { width: 34px; }
.laser-legend .off { display: none; }
/* The sheet table. */
.laser-sheets { border: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; max-height: 320px; min-height: 0; flex: none; }
.laser-sheets[hidden] { display: none; }
.laser-sheets h3 { font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 400; letter-spacing: 0.25em; text-transform: uppercase; color: var(--subtext); padding: 12px 12px 8px; border-bottom: 1px solid var(--faint); }
.laser-sheets .hint { padding: 6px 12px 8px; font-size: 12px; color: var(--subtext); border-bottom: 1px solid var(--faint); }
.laser-sheets .scroll { overflow-y: auto; flex: 1; min-height: 0; }
.laser-sheets table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.laser-sheets th { font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-align: right; padding: 6px 10px; }
.laser-sheets th:first-child, .laser-sheets td:first-child { text-align: left; }
.laser-sheets td { padding: 6px 10px; text-align: right; border-top: 1px solid var(--faint); font-variant-numeric: tabular-nums; cursor: pointer; }
.laser-sheets tr.on td { background: var(--faint); }
.laser-sheets tr.on td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.laser-sheets tr.iso td { background: var(--faint); color: var(--text); font-weight: 400; }
.laser-sheets tr.iso td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.laser-sheets tr.water td:first-child { font-style: italic; }
.laser-sheets tr.off { display: none; }
.laser-sheets td .rsw { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.28); border-radius: 2px; }
.laser-sheets .foot { padding: 10px 12px; font-size: 12px; line-height: 1.5; color: var(--subtext); border-top: 1px solid var(--faint); }
.laser-sheets .foot:empty { display: none; }
/* What you get (laser-bar, 2026-10-08): under the preview, in the sheet
   table's card style, across the column's full width with its items in
   columns, so it stays short. It no longer sits in the action bar. */
.laser-box { flex: none; border: 1px solid var(--border); background: var(--surface); padding: 12px 16px 14px; color: var(--text); font-size: 12.5px; line-height: 1.45; }
.laser-box[hidden] { display: none; }
.laser-box h4 { font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 400; letter-spacing: 0.25em; text-transform: uppercase; color: var(--subtext); margin: 0 0 8px; }
.laser-box ul { list-style: none; margin: 0; padding: 0; columns: 240px; column-gap: 28px; }
.laser-box li { padding-left: 14px; position: relative; overflow-wrap: anywhere; break-inside: avoid; margin-bottom: 4px; }
.laser-box li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent2); }
.laser-box .hint { margin-top: 6px; color: var(--accent); }
.laser-box .est { display: inline-block; margin-right: 6px; padding: 0 6px; border: 1px solid currentColor; border-radius: 2px; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.12em; }
.laser-box .pending { color: var(--muted); font-style: italic; }
.filebtn.laser-btn[hidden] { display: none; }
/* Laser outside Lakes (studio layout addition, 2026-10-07): one line under
   the arena head in place of the laser panel; step 3 and the relief and
   base controls have nothing to set there, so they hide as in laser mode. */
.laser-elsewhere { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px; border-bottom: 1px solid var(--arena-line); background: rgba(48,42,36,0.80); color: var(--arena-ink); font-size: 13px; line-height: 1.5; }
.laser-elsewhere[hidden] { display: none; }
.laser-elsewhere .filebtn { min-height: 44px; border-color: var(--accent2); color: #f0d488; }
.arena.showcase .laser-elsewhere, .arena.fs .laser-elsewhere { display: none; }
#screen-b[data-out="laser-note"] #st-relief-group,
#screen-b[data-out="laser-note"] #st-base-group,
#screen-b[data-out="laser-note"] #st-shape-group,
#screen-b[data-out="laser-note"] #st-z-readout,
#screen-b[data-out="laser-note"] #deck-3,
#screen-b[data-out="laser-note"] #st-btn-free { display: none !important; }
/* Desktop: the sheet table is a column of its own beside the stage, as in
   the mockup (its .main grid, minmax(0, 1fr) 260px); the feature cards make
   way while the stack is shown. */
@media (min-width: 1024px) {
  #screen-b[data-laser-view="on"] .arena-col { display: grid; grid-template-columns: minmax(0, 1fr) 260px; grid-template-rows: minmax(0, 1fr); }
  #screen-b[data-laser-view="on"] .arena-col .arena-slot { grid-column: 1; grid-row: 1; min-height: 0; }
  #screen-b[data-laser-view="on"] .arena-col .laser-sheets { grid-column: 2; grid-row: 1; max-height: none; }
  #screen-b[data-laser-view="on"] .viewer-cards { display: none; }
}
/* Laser on a desktop (laser-bar, 2026-10-08): as in every mode (the rule
   after .arena-slot .arena .stage above), the arena is never shorter than
   its own content: at 1440 x 900 after Generate the laser bar had lost
   110 px, Generate model and Buy once under the cut; at 1280 x 720 the
   laser arena needs about 845 px. In laser mode the arena's row is also
   at least the first screen, and What you get, then the feature cards,
   follow under the arena (and the sheet table) across the column's full
   width; the settings column stays the screen's height (sticky) while the
   page scrolls down to them. */
@media (min-width: 1024px) {
  #screen-b[data-out="laser"] .studio-grid { align-items: start; }
  #screen-b[data-out="laser"] .sidebar { position: sticky; top: 0; height: calc(100vh - var(--studio-top)); contain: none; }
  #screen-b[data-out="laser"] .arena-col { display: grid; height: auto; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(calc(100vh - var(--studio-top) - 24px), auto); }
  #screen-b[data-out="laser"][data-laser-view="on"] .arena-col { grid-template-columns: minmax(0, 1fr) 260px;
    grid-template-rows: minmax(calc(100vh - var(--studio-top) - 24px), auto); }
  #screen-b[data-out="laser"] .arena-col > * { grid-column: 1 / -1; }
  #screen-b[data-out="laser"] .arena-col .arena-slot { grid-column: 1; grid-row: 1; min-height: 0; }
  /* The sheet table takes the arena's height and scrolls inside, as before;
     its own length never makes the row taller. */
  #screen-b[data-out="laser"] .arena-col .laser-sheets { grid-column: 2; grid-row: 1; max-height: none; contain: size; }
}
@media (max-width: 1023px) {
  .laser-sheets { order: 1; margin: 10px 12px 0; max-height: 260px; }
  /* Phone: preview, data lines, the action bar, What you get, then the
     settings (the box comes before the sheet table in the markup). */
  .laser-box { order: 1; margin: 10px 12px 0; }
}
@media (max-width: 560px) {
  .laser-explode { padding: 10px 12px 4px; }
  .laser-explode .seg { flex-basis: 100%; }
  .seg-btn { padding: 0 10px; letter-spacing: 0.12em; }
  .seg-track { padding: 0 10px; }
  .machine[data-keys="3"] { width: auto; max-width: 264px; }
  .machine[data-keys="4"] { width: auto; max-width: 340px; }
  .machine[data-keys="4"] .mkey { letter-spacing: 0.06em; font-size: 11px; }
  .machine[data-keys="5"] { width: auto; max-width: 420px; }
  .machine[data-keys="5"] .mkey { letter-spacing: 0.02em; font-size: 10px; }
}

/* ── The settings sheet on a phone (stage-color, 2026-10-11) ─────────────
   At 1023 px and below the decks sit in a sheet over the page, pinned above
   Generate model (studio.js setSheet): closed (its handle only), half (the
   lower half of the screen; the page, and the preview with it, above) or
   full (pulled up: the preview shrinks to a strip pinned at the top and the
   settings fill the rest). Not while the guided start is open (guide.css
   has its own phone layout), never on a desktop. Brand: cream #F4EFE4,
   chocolate #2A2118, muted #6A5C42, gold-deep #6F5310 only on the size
   button (it takes a click); the body's own font; nothing under 12 px;
   every control at least 44 px. --phonebar-h is Generate model's height
   while it shows (studio.js placePhoneBar), 0 while it is away. */
.sheet-bar { display: none; }
@media (max-width: 1023px) {
  :root { --sheet-closed-h: 56px; --mini-h: clamp(180px, 34vh, 320px); --phonebar-h: 0px; }
  body.sheet-on[data-screen="b"] { padding-bottom: calc(76px + var(--sheet-closed-h) + env(safe-area-inset-bottom, 0px)); }
  /* Over the top strip (z-index 2), under Generate model (900). */
  body.sheet-on #screen-b .studio-grid { z-index: 3; }
  body.sheet-on #screen-b .sidebar {
    position: fixed; left: 0; right: 0; bottom: var(--phonebar-h); z-index: 860; order: 0;
    display: flex; flex-direction: column; height: var(--sheet-closed-h); max-height: none;
    background: #F4EFE4; border-top: 1px solid #C4B89A; border-radius: 12px 12px 0 0;
    box-shadow: 0 -6px 24px rgba(40, 28, 12, 0.16); contain: none;
    transition: height .25s ease, bottom .2s ease;
  }
  body.sheet-on #screen-b[data-sheet="half"] .sidebar { height: calc(52vh - var(--phonebar-h)); height: calc(52dvh - var(--phonebar-h)); }
  body.sheet-on #screen-b[data-sheet="full"] .sidebar { height: calc(100vh - var(--mini-h) - var(--phonebar-h)); height: calc(100dvh - var(--mini-h) - var(--phonebar-h)); }
  body.sheet-on #screen-b .sidebar.dragging { transition: none; }
  body.sheet-on #screen-b .sheet-bar { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; padding: 0 8px 0 0; border-bottom: 1px solid #D4C8B0; }
  body.sheet-on #screen-b[data-sheet="closed"] .sheet-bar { border-bottom-color: transparent; }
  .sheet-handle {
    position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
    min-height: var(--sheet-closed-h); padding: 10px 8px 6px 16px; background: none; border: 0; cursor: grab;
    text-align: left; color: #2A2118; font: inherit; touch-action: none; -webkit-user-select: none; user-select: none;
  }
  .sheet-grip { position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #6A5C42; opacity: 0.55; }
  .sheet-title { flex: 0 0 auto; font-size: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #2A2118; }
  .sheet-sum { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: #6A5C42; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sheet-size {
    flex: 0 0 44px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
    background: transparent; border: 1px solid #6F5310; border-radius: 2px; color: #6F5310;
  }
  .sheet-size:hover { background: rgba(111, 83, 16, 0.07); }
  .sheet-size svg { transition: transform .25s ease; }
  #screen-b[data-sheet="full"] .sheet-size svg { transform: rotate(180deg); }
  .sheet-handle:focus-visible, .sheet-size:focus-visible { outline: 2px solid #6F5310; outline-offset: -3px; }
  body.sheet-on #screen-b .sidebar .decks {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 12px 12px 16px;
  }
  /* Pulled up: the preview is a strip pinned at the top, the stage alone
     (its stale note and scale bar on it); the rest of the arena comes back
     when the sheet comes down. */
  body.sheet-on #screen-b[data-sheet="full"] .arena-slot {
    position: fixed; top: 0; left: 0; right: 0; z-index: 855; height: var(--mini-h); padding: 0; background: #2A2118;
  }
  body.sheet-on #screen-b[data-sheet="full"] .arena-slot .arena { height: 100%; }
  body.sheet-on #screen-b[data-sheet="full"] .arena-slot .arena > :not(.stage) { display: none !important; }
  body.sheet-on #screen-b[data-sheet="full"] .arena-slot .arena .stage { height: 100%; min-height: 0; }
  /* The top bar's links would sit on the strip: away while it is pulled up. */
  body.sheet-on.sheet-full .site-nav { display: none; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  body.sheet-on #screen-b .sidebar, .sheet-size svg { transition: none; }
}

/* ── Tiles (tile-s3, 2026-10-12) ─────────────────────────────────────────
   The Tiles group in Deck 2 (studio.html, studio.js syncTiles), the stage's
   legend and Together / Apart bar, and what a tiled download holds. Brand
   only: cream #F4EFE4, chocolate #2A2118, muted #6A5C42, gold-deep #6F5310
   (what takes a click), gold-light #B08A2A only as text on chocolate
   (4.90:1). Nothing under 12 px; every control at least 44 px. */
.tiles-group { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 16px; border: 1px solid #B08A2A; border-radius: 6px; background: #FBF8F1; }
.tiles-group[hidden], .tiles-body[hidden], .tiles-group [hidden] { display: none !important; }
.tiles-head { display: flex; align-items: center; gap: 10px; }
.tiles-title { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: #2A2118; line-height: 1; }
.tiles-head .tag { font-size: 12px; padding: 2px 8px; color: #F4EFE4; background: #6F5310; border-color: #6F5310; border-radius: 3px; letter-spacing: 0.08em; }
.tiles-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 4px 0; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; }
.tiles-toggle-text { font-size: 15px; color: #2A2118; line-height: 1.35; }
.tiles-toggle .switch { pointer-events: none; }
.tiles-toggle[aria-checked="true"] .switch { background: #6F5310; }
.tiles-toggle[aria-checked="true"] .switch span { left: 29px; }
.tiles-toggle:focus-visible { outline: 2px solid #6F5310; outline-offset: 3px; }
.tiles-why { margin-top: -6px; padding: 8px 10px; border-left: 3px solid #6F5310; background: #F4EFE4; color: #2A2118; font-size: 13px; }
/* Painted color and tiles together (pol-tilepaint): the sentence and the
   two choices, under the Tiles switch and under Painted color. */
.paint-tiles { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 10px 12px 12px; border: 1px solid #6F5310; border-radius: 6px; background: #F4EFE4; }
.paint-tiles[hidden] { display: none; }
.tiles-group .paint-tiles { margin-top: 0; }
.paint-tiles-text { margin: 0; font-size: 13px; line-height: 1.5; color: #2A2118; }
.paint-tiles-btn { min-height: 44px; padding: 8px 12px; border: 1px solid #6F5310; border-radius: 8px; background: #FBF8F1; color: #6F5310; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer; }
.paint-tiles-btn:hover { background: #6F5310; color: #F4EFE4; }
.paint-tiles-btn:focus-visible { outline: 3px solid #2A2118; outline-offset: 2px; }
.tiles-body { display: flex; flex-direction: column; gap: 12px; }
.tiles-group .dial-label { font-size: 12px; color: #2A2118; letter-spacing: 0.16em; }
.tiles-aside { font-family: 'DM Mono', monospace; font-size: 12px; color: #6A5C42; }
.bed-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bed-pill { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 52px; min-width: 0; padding: 8px 12px; border: 1px solid #C4B89A; border-radius: 4px; background: #FFFDF8; cursor: pointer; text-align: left; font: inherit; }
.bed-pill .bed-name { font-size: 14px; color: #2A2118; line-height: 1.2; }
.bed-pill .bed-size { font-family: 'DM Mono', monospace; font-size: 12px; color: #6A5C42; }
.bed-pill.on { border: 2px solid #6F5310; padding: 7px 11px; background: #FFF6E2; }
.bed-pill:focus-visible { outline: 2px solid #6F5310; outline-offset: 2px; }
.tiles-group .bedf .cap { font-size: 12px; color: #6A5C42; letter-spacing: 0.08em; text-transform: none; font-family: inherit; }
.tiles-group .bedf .inch { font-size: 12px; color: #6A5C42; }
.tiles-group .unit { font-family: 'DM Mono', monospace; font-size: 12px; color: #6A5C42; }
.tiles-group .num { background: #FFFDF8; color: #2A2118; }
.tiles-group .num.ro { background: #F4EFE4; color: #6A5C42; border-color: #D4C8B0; }
.tiles-group .note { margin-top: 0; font-size: 13px; color: #6A5C42; }
.tiles-group .note.warn { color: #9e3a2a; }
.tiles-joint .note { color: #2A2118; }
.tiles-fit-pills .mode-pill { letter-spacing: 0.04em; text-transform: none; font-size: 13px; color: #2A2118; padding: 10px 4px; }
.tiles-fit-pills .mode-pill.active { background: #2A2118; color: #F4EFE4; }
.tiles-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 4px; background: #2A2118; color: #F4EFE4; }
.tiles-card-big { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.15; }
.tiles-card-line { font-size: 13px; line-height: 1.45; }
.tiles-card-line[hidden] { display: none; }
.tiles-card-price { font-size: 13px; color: #B08A2A; font-weight: 500; }
/* The stage: the bar over it, and the legend on it. */
.arena.showcase .tiles-explode, .arena.showcase .tiles-legend, .arena.showcase .tiles-files { display: none !important; }
.tiles-explode { background: #2A2118; padding-bottom: 10px; }
.tiles-explode .seg { border-color: #6A5C42; background: #2A2118; }
.tiles-explode .seg-btn { color: #F4EFE4; }
.tiles-explode .seg-btn.active { background: #6F5310; color: #F4EFE4; }
.tiles-explode .playbtn { min-height: 48px; border-color: #B08A2A; background: #6F5310; color: #F4EFE4; }
.tiles-explode .playbtn:hover { background: #5E460D; }
.tiles-legend { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; max-width: calc(100% - 140px); padding: 6px 10px; border-radius: 3px; background: rgba(42,33,24,0.88); color: #F4EFE4; font-size: 12px; line-height: 1.3; pointer-events: none; }
.tiles-legend[hidden] { display: none; }
.tl-seam { display: inline-block; width: 22px; height: 0; border-top: 3px dashed #F4EFE4; }
.tl-bed { display: inline-block; width: 16px; height: 11px; margin-left: 6px; border: 2px solid #F4EFE4; background: rgba(244,239,228,0.18); }
/* What the download holds, under the action bar. */
.tiles-files { flex: none; padding: 12px 16px 14px; border: 1px solid #C4B89A; background: #F4EFE4; color: #2A2118; }
/* While tiles are drawn (studio.js syncTiles, #screen-b[data-tiles]), the
   arena keeps at least the screen's height on a desktop, as in laser mode:
   the Together / Apart bar and the Tiles data line took the stage from 388
   to 240 px at 1440 x 900 (measured); the list above and the feature cards
   follow under it. */
@media (min-width: 1024px) {
  #screen-b[data-tiles="on"] .arena-slot { min-height: calc(100vh - var(--studio-top) - 24px); }
}
@media (max-width: 1023px) {
  .tiles-files { order: 1; margin: 10px 12px 0; }
}
.tiles-files[hidden] { display: none; }
.tiles-files-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.tiles-files-one { font-size: 14px; font-weight: 500; line-height: 1.45; margin-bottom: 6px; }
.tiles-files-one[hidden] { display: none; }
.tiles-files-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }
.tiles-files-list .tf-name { font-family: 'DM Mono', monospace; font-size: 12.5px; color: #6F5310; }
.datalines #st-dl-tiles .dl-k { font-size: 12px; letter-spacing: 0.12em; }
.datalines #st-dl-built .dl-k { font-size: 12px; letter-spacing: 0.12em; }
@media (max-width: 560px) {
  .tiles-group { padding: 12px 12px 14px; }
  .bed-pill { padding: 8px 10px; }
  .bed-pill.on { padding: 7px 9px; }
  .tiles-legend { right: 8px; bottom: 8px; max-width: calc(100% - 96px); }
  .tiles-files { padding: 10px 12px 12px; }
}

/* The label dragged along the frame (frame-labels, 2026-10-13): the gold
   handle over the stage (label_drag.js) and the note under Embossing. The
   icon is chocolate on gold-light, 5.0:1; dragging, cream on gold-deep. */
.label-handle { position: absolute; left: 0; top: 0; width: 44px; height: 44px; padding: 0;
  border-radius: 50%; border: 2px solid #F4EFE4; background: #B08A2A; color: #2A2118;
  display: flex; align-items: center; justify-content: center; z-index: 6; cursor: grab;
  touch-action: none; box-shadow: 0 2px 8px rgba(42,33,24,.45); }
.label-handle[hidden] { display: none; }
.label-handle.dragging { cursor: grabbing; background: #6F5310; color: #F4EFE4; }
.label-handle:focus-visible { outline: 3px solid #2A2118; outline-offset: 2px; }
.label-at-reset { min-height: 44px; margin-left: 6px; padding: 0 14px; background: transparent;
  border: 1px solid #6F5310; border-radius: 22px; color: #6F5310; font: inherit; font-size: 13px;
  cursor: pointer; }
.label-at-reset:focus-visible { outline: 2px solid #2A2118; outline-offset: 2px; }

/* Labels on the map (terrain-labels, 2026-10-13): the deck's list and the
   numbered handle on each label (the frame label's .label-handle look). */
.tl-group { display: grid; gap: 8px; margin-bottom: 14px; }
.tl-group[hidden] { display: none; }
.tl-list { display: grid; gap: 10px; }
.tl-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.tl-row .tl-n { font-size: 13px; font-weight: 600; color: #6F5310; text-align: center; }
.tl-row .tl-text { min-height: 44px; font-size: 14px; }
.tl-size { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #6A5C42; }
.tl-size input { width: 64px; min-height: 44px; font-size: 14px; }
.tl-remove, .tl-add { min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 8px; font-size: 13px;
  border: 1px solid #6A5C42; background: #F4EFE4; color: #2A2118; cursor: pointer; }
.tl-add { justify-self: start; border-color: #6F5310; color: #6F5310; font-weight: 600; }
.tl-add:disabled { opacity: 1; color: #6A5C42; border-color: #6A5C42; cursor: default; }
.tl-remove:focus-visible, .tl-add:focus-visible { outline: 3px solid #2A2118; outline-offset: 2px; }
.tl-msg { grid-column: 2 / -1; margin: 0; font-size: 12px; color: #6A5C42; }
.tl-msg.refused { color: #9e3a2a; }
.tl-msg:empty { display: none; }
.label-handle.tl-handle .tl-num { position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px;
  border-radius: 9px; background: #2A2118; color: #F4EFE4; font-size: 12px; line-height: 18px; text-align: center; }

/* ── Vista mode (vista-studio-ui, 2026-10-14; static/studio/vista.js) ──
   The frame of the chosen size on the stage, everything outside it dimmed
   in the chocolate token; the render inside it; the vista deck in place of
   the decks and the vista bar in place of Generate, Buy once and the files.
   Existing tokens and type only. */
.vista-frame { position: absolute; z-index: 3; border: 1.5px solid var(--accent2); box-shadow: 0 0 0 200vmax rgba(42,33,24,0.58); pointer-events: none; }
.vista-frame[hidden] { display: none; }
/* .filebtn sets display, so the hidden attribute needs its own rule (as
   .actionbar .buy-btn[hidden] and #st-btn-3mfp[hidden] have). */
#st-vista-enter[hidden], #st-btn-vista-dl[hidden], #st-btn-stl[hidden], #st-btn-3mf[hidden], #st-btn-obj[hidden] { display: none; }
.vista-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; background: var(--chocolate); }
.vista-img[hidden] { display: none; }
.vista-progress { position: absolute; left: 10px; right: 10px; bottom: 10px; }
.vista-progress[hidden] { display: none; }
.vista-progress-label { margin-bottom: 5px; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--arena-ink); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.vista-track { height: 4px; border-radius: 2px; overflow: hidden; background: var(--arena-line); }
.vista-fill { width: 0; height: 100%; background: var(--accent2); transition: width .3s; }
.arena[data-vista] .stage { background: var(--arena); }
.arena[data-vista] #st-generate, .arena[data-vista] #st-btn-buy, .arena[data-vista] #st-files,
.arena[data-vista] .bar-price, .arena[data-vista] #st-gen-reason, .arena[data-vista] #st-who-row,
.arena[data-vista] .viewbtn[data-view], .arena[data-vista] #st-turn, .arena[data-vista] #fs-turn,
.arena[data-vista] #st-scalebar, .arena[data-vista] #st-stale-note, .arena[data-vista] #st-shape-preview,
.arena[data-vista] #st-hint, .arena[data-vista] #st-vista-enter, .arena[data-vista] #st-prov { display: none !important; }
.vista-bar { display: none; }
.arena[data-vista] .vista-bar { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: 8px; }
.vista-views { flex: none; }
.vista-views[hidden] { display: none; }
.vista-views .mode-pill { padding: 8px 12px; }
.vista-left { margin: 0; }
.vista-left[hidden] { display: none; }
/* The line under the vista's Buy (vista-buy): its own row, under the button. */
.vista-access { flex: 1 1 100%; }
.vista-msg { flex: 1 1 100%; margin: 0; padding: 8px 10px; border-left: 2px solid var(--accent2); background: rgba(0,0,0,0.25); color: var(--arena-ink); font-size: 13px; line-height: 1.5; letter-spacing: 0.02em; }
.vista-msg[hidden] { display: none; }
#screen-b[data-vista] .decks > .deck:not(.vista-deck) { display: none; }
#screen-b[data-vista] .phone-generate { display: none !important; }
.vista-deck[hidden] { display: none; }
.vista-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: default; }
.vista-head .filebtn { border-color: var(--border2); color: var(--accent-ink); flex: none; }
.vista-head .filebtn:hover { background: var(--bg2); }
.vista-lead { color: var(--text); }
.vista-cam { font-family: 'DM Mono', monospace; font-size: 11.5px; letter-spacing: 0.02em; }
.vista-starts[hidden] { display: none; }
.vista-dial { margin-top: 12px; }
.vista-sizes { display: grid; gap: 0; border: 1px solid var(--border); border-radius: 2px; overflow: hidden; background: var(--surface); }
.vista-sizes .vista-size { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left; text-transform: none; letter-spacing: 0.04em; }
.vista-sizes .vista-size + .vista-size { border-top: 1px solid var(--border); }
.vista-size-shape { flex: none; width: 36px; max-height: 26px; border: 1.5px solid currentColor; border-radius: 1px; }
.vista-size-shape[data-shape="curved"] { border-radius: 40% / 10%; border-left-width: 1px; border-right-width: 1px; }
.vista-size-shape[data-shape="cylinder"] { width: 22px; height: 26px; aspect-ratio: auto !important; border-radius: 50% / 18%; }
.vista-size-text { display: flex; flex-direction: column; gap: 2px; }
.vista-size-mm { font-size: 13px; }
.vista-size-in { font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; opacity: .85; }
.vista-coverage { padding-top: 10px; border-top: 1px solid var(--border); }
/* Vista mode's first-open intro and the Studio's vista card (launch-vista
   F7): the Studio's own tokens, type and buttons. */
.vista-intro { position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; display: flex; gap: 16px; align-items: center; padding: 16px; background: var(--surface); border: 1px solid var(--accent2); border-radius: 2px; box-shadow: 0 8px 28px rgba(0,0,0,.35); }
.vista-intro[hidden] { display: none; }
.vista-intro-art { flex: none; width: 220px; height: auto; display: block; }
.vista-intro-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vista-intro-h { margin: 0; }
.vista-intro .generate-btn { align-self: flex-start; min-height: 44px; }
@media (max-width: 680px) {
  .vista-intro { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .vista-intro-art { width: 100%; max-width: 280px; align-self: center; }
}
/* ── Lake light plate (lake-light, 2026-10-16; static/studio/lake_light.js) ──
   As vista mode: the plate's backlit look over the stage, the light deck in
   place of the decks and the light bar in place of Generate, Buy once and
   the files. */
#st-light-enter[hidden] { display: none; }
.light-view { position: absolute; inset: 0; z-index: 3; background: var(--chocolate); }
.light-view[hidden] { display: none; }
.light-img { position: absolute; left: 12px; top: 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: contain; display: block; }
.light-img[hidden] { display: none; }
.light-busy { position: absolute; left: 10px; bottom: 10px; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--arena-ink); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.light-busy[hidden] { display: none; }
.arena[data-light] .stage { background: var(--arena); }
.arena[data-light] #st-generate, .arena[data-light] #st-btn-buy, .arena[data-light] #st-files,
.arena[data-light] .bar-price, .arena[data-light] #st-gen-reason, .arena[data-light] #st-who-row,
.arena[data-light] .viewbtn[data-view], .arena[data-light] #st-turn, .arena[data-light] #fs-turn,
.arena[data-light] #st-scalebar, .arena[data-light] #st-stale-note, .arena[data-light] #st-shape-preview,
.arena[data-light] #st-hint, .arena[data-light] #st-light-enter, .arena[data-light] #st-vista-enter,
.arena[data-light] #st-prov { display: none !important; }
.light-bar { display: none; }
.arena[data-light] .light-bar { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: 8px; }
#screen-b[data-light] .decks > .deck:not(.light-deck) { display: none; }
#screen-b[data-light] .phone-generate { display: none !important; }
.light-deck[hidden] { display: none; }
/* The light plate's Download or Buy in the sheet (light-buy): only on a
   phone with the sheet pulled up, where the arena's bar is hidden. */
.light-sheet-dl { display: none; }
body.sheet-on #screen-b[data-sheet="full"] .light-sheet-dl { display: flex; flex-direction: column; gap: 8px; }
.light-sheet-dl .generate-btn { width: 100%; min-height: 44px; justify-content: center; }
#st-light-size-row[hidden] { display: none; }
.light-steps { color: var(--text); }
.light-shapes, .light-sizes { display: grid; grid-template-columns: repeat(3, 1fr); }
.vista-card { cursor: pointer; }
.vista-card:focus-visible { outline: 3px solid var(--accent2); outline-offset: -3px; }

/* ── LITHOPHANES UP FRONT (litho-b, 2026-10-16) ────────────────────────
   The sixth tile, the "What do you want to make" choice at the top of the
   panel (no number: Choose a place keeps 1) and the two lithophane kinds.
   Every colour is a token above. Text is 12 px and up; targets 44 px and up. */
.tiles.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1023px) { .tiles.six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile-art.tile-photo { object-fit: cover; border-radius: 2px; box-shadow: 0 2px 10px rgba(30,26,20,0.18); }

.make-head { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 14px 16px; }
.make-change { flex: none; min-height: 44px; border-color: var(--border2); color: var(--accent-ink); }
.make-change:hover { background: var(--bg2); }
.make-change[hidden] { display: none; }
.make-deck .deck-inner { gap: 14px; }
.make-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.make-choices.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.make-choices.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.make-choices .realm { font-size: 21px; padding: 8px 4px; min-height: 52px; }
@media (max-width: 480px) { .make-choices .realm { font-size: 18px; min-height: 48px; } }
#st-litho-kinds[hidden] { display: none; }

.kinds { display: grid; border: 1px solid var(--border); border-radius: 2px; overflow: hidden; background: var(--surface); }
.kind { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: start; width: 100%; min-height: 44px; padding: 12px; text-align: left;
  background: transparent; border: 0; color: var(--text); font-weight: 300; cursor: pointer; }
.kind + .kind { border-top: 1px solid var(--border); }
.kind:hover { background: rgba(139,105,20,0.05); }
.kind:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kind[aria-checked="true"] { background: rgba(139,105,20,0.10); box-shadow: inset 0 0 0 1px var(--accent); }
.kind-art { width: 92px; height: 70px; object-fit: cover; border-radius: 2px; background: #1e1e1e; box-shadow: 0 1px 6px rgba(30,26,20,0.16); }
.kind-text { display: block; min-width: 0; }
.kind-title { display: block; font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 500; line-height: 1.15; }
.kind-desc { display: block; font-size: 13px; line-height: 1.5; color: var(--subtext); margin-top: 3px; }
.kind-takes { display: block; margin-top: 7px; font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); line-height: 1.5; }
.kind-spec { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--subtext); }
@media (max-width: 480px) {
  .kind { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .kind-art { width: 72px; height: 56px; }
}

/* A kind narrows "What kind of place" and takes Earth; the machine key and
   decks 2 and 3 go; Choose a place waits for the kind (studio.js syncMake). */
#st-type .mode-pill.litho-off { display: none !important; }
#screen-b[data-kind] #st-world-group { display: none; }
#screen-b[data-make="litho"] #deck-2, #screen-b[data-make="litho"] #deck-3 { display: none; }
#screen-b[data-make="litho"] #st-machine, .arena[data-make="litho"] #st-machine { display: none; }
#deck-1 .deck-head:disabled { cursor: default; opacity: 0.7; }

/* See full detail (full-detail, 2026-10-21): the stage's tag and button,
   the wait line, and the viewer of the full-detail picture. */
.fd-bar { position: absolute; right: 12px; top: 12px; z-index: 5; display: flex; align-items: center; gap: 8px; }
.fd-bar[hidden] { display: none; }
.fd-tag { padding: 4px 9px; border-radius: 2px; background: rgba(36,31,26,0.78); color: var(--arena-ink); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.fd-btn { padding: 7px 12px; min-height: 32px; border: 1px solid var(--accent); border-radius: 2px; background: var(--cream); color: var(--accent-ink); font: inherit; font-size: 13px; font-weight: 500; letter-spacing: .02em; cursor: pointer; }
.fd-btn:hover:not(:disabled) { background: #fff; }
.fd-btn:disabled { opacity: .75; cursor: progress; }
.fd-status { position: absolute; right: 12px; top: 52px; z-index: 5; max-width: min(360px, calc(100% - 24px)); box-sizing: border-box; margin: 0; padding: 6px 10px; border-radius: 2px; background: rgba(36,31,26,0.82); color: var(--arena-ink); font-size: 12px; line-height: 1.4; }
.fd-status[hidden] { display: none; }
.fd-status.fd-error { background: var(--cream); color: var(--error); border: 1px solid var(--error); }
.fd-view { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: var(--cream); color: var(--text); }
.fd-view[hidden] { display: none; }
body.fd-open { overflow: hidden; }
.fd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
.fd-title { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: var(--chocolate); }
.fd-sub { margin: 2px 0 0; font-size: 13px; color: var(--subtext); }
.fd-tools { display: flex; gap: 6px; flex-shrink: 0; }
.fd-tool { min-width: 40px; min-height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 2px; background: var(--cream); color: var(--text); font: inherit; font-size: 18px; cursor: pointer; }
.fd-tool-wide { font-size: 13px; }
.fd-tool:hover { border-color: var(--accent); }
.fd-pan { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab; }
.fd-pan:active { cursor: grabbing; }
.fd-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; user-select: none; -webkit-user-drag: none; }
.fd-hint { margin: 0; padding: 6px 16px 10px; font-size: 12px; color: var(--muted); text-align: center; }
/* A place link's arrival (ad-landing, 2026-10-25): the price of the model
   on the stage and Make it yours, along the stage's foot, where the scale
   bar steps aside for it. */
.land-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 14px; border-radius: 2px; background: rgba(36,31,26,0.86); color: var(--arena-ink); }
.land-bar[hidden] { display: none; }
.land-price { font-size: 14px; line-height: 1.35; }
.arena .generate-btn.land-go { flex: none; min-height: 44px; padding: 0 22px; font-size: 12px; }
.arena[data-landing="on"] .scalebar { display: none !important; }
/* On a desktop the stage is wide and short: the strip takes its top left
   corner, clear of See full detail on the right, and leaves the model. */
@media (min-width: 1024px) {
  .land-bar { right: auto; bottom: auto; top: 12px; max-width: calc(100% - 330px); gap: 16px; }
  .arena[data-landing="on"] .scalebar { display: block !important; }
}
/* A place link's "Make your own" (landing-search, 2026-10-26): the front
   page's search box and three examples, above the model the link built.
   Its list opens over the stage (z-index over the strip's). On a phone it
   sits first in the stacked column (.arena-col is display: contents there)
   and the stage gives up only the height it must so the price and Make it
   yours stay on the first screen (studio.js fitLandStage). */
.land-search { display: flex; flex-direction: column; gap: 8px; margin: 10px 12px 0; padding: 10px;
  background: var(--surface); border: 1px solid var(--border); }
.land-search[hidden], .ls-note[hidden] { display: none; }
.land-search .ls-box { margin: 0; max-width: none; z-index: 50; }
.land-search .ls-box .search-input { min-height: 44px; padding: 9px 10px 9px 40px; }
.land-search .ls-box .search-input::placeholder { font-size: 15px; }
@media (max-width: 420px) { .land-search .ls-box .search-input::placeholder { font-size: 14.5px; } }
.ls-try { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ls-try-h { flex: none; font-family: 'Jost', sans-serif; font-size: 13px; color: var(--subtext); }
.ls-ex { flex: none; min-height: 32px; padding: 0 10px; border: 1px solid var(--border2); border-radius: 2px; background: #fff;
  font-family: 'Jost', sans-serif; font-size: 13px; letter-spacing: 0.01em; color: var(--chocolate); white-space: nowrap; cursor: pointer; }
@media (hover: hover) { .ls-ex:hover { background: var(--faint); } }
.ls-ex:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.ls-ex:disabled { cursor: progress; opacity: 0.6; }
.ls-note { margin: 0; font-family: 'Jost', sans-serif; font-size: 13px; line-height: 1.45; color: var(--subtext); }
#screen-b[data-sheet="full"] .land-search { display: none; }
/* A place link's toolbar under the model (land-toolbar, 2026-10-26): the
   head's machine switch and view buttons, moved here on a phone while the
   landing lasts (studio.js syncLandLow). */
.arena-low { border-bottom: 0; border-top: 1px solid var(--arena-line); }
.arena-low[hidden] { display: none; }
@media (min-width: 1024px) {
  .land-search { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; }
  .land-search .ls-box { flex: 1 1 320px; }
  .ls-note { flex-basis: 100%; }
}
@media (max-width: 560px) {
  .fd-bar { right: 8px; top: 8px; gap: 6px; }
  .fd-tag { font-size: 10px; padding: 3px 7px; }
  .fd-btn { padding: 6px 10px; font-size: 12px; }
  .fd-status { right: 8px; top: 46px; }
  .fd-head { flex-wrap: wrap; padding: 10px 16px; }
  .fd-sub { font-size: 12px; }
}

/* Painted color first (color-top, 2026-10-22): the group's own panel at the
   top of the settings for a 3D print (studio.js placeColorGroup), and the
   painted or one-color line beside the price and on the phone bar
   (syncPaintLine). */
.color-deck .deck-inner { border-top: 0; }
.color-deck[hidden], .st-paint-line[hidden], .phone-paint-line[hidden], .paint-line-on[hidden] { display: none; }
.st-paint-line { font-size: 13px; line-height: 1.4; color: var(--arena-ink); }
.paint-line-on { margin-left: 4px; padding: 0; border: 0; background: none; font: inherit; color: inherit;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.phone-paint-line { display: none; }
@media (max-width: 1023px) {
  .phone-generate .phone-paint-line { display: block; margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: #2A2118; text-align: center; }
  .phone-generate .phone-paint-line .paint-line-on { color: #6F5310; min-height: 32px; }
}
/* In the guided start's Ready panel, above Buy once (guide.js BORROW). */
#gs-guide .st-paint-line { color: #2A2118; font-size: 14px; margin: 0 0 10px; }