/* TB99 — archive of pocket toys. Tokens and rules: DESIGN_DECISIONS.md */
:root {
  color-scheme: light;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --paper: #efe9dd;
  --paper-2: #e5ddcd;
  --paper-3: #f7f3ea;
  --ink: #151d1c;
  --ink-2: #4b5452;
  --ink-3: #6d7470;
  --rule: #cbc1ae;
  --stamp: #c4432c;
  --glacier: #2d8c9a;
  --toy: var(--glacier);
  --display: "TB99 Display", "Arial Narrow", Arial, sans-serif;
  --text: "TB99 Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "TB99 Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gutter: clamp(16px, 4.2vw, 64px);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  /* legacy aliases used by older rules */
  --petrol: var(--glacier);
  --coral: #d9583c;
  --line: var(--rule);
  --muted: var(--ink-3);
  font-family: var(--text);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--text); }
button, select, input { font: inherit; }
button { color: inherit; }
img { max-width: 100%; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--toy); outline-offset: 3px; }
h1, h2, h3, p, figure, dl, dd, ol { margin: 0; }

.kicker { margin: 0 0 14px; color: var(--ink-2); font: 500 12px/1.3 var(--mono); font-stretch: 92%; letter-spacing: .02em; }

/* ---------- TB99 / printed pocket-toy catalogue ---------- */
.catalogue-shell {
  --catalogue-paper: #f0eadf;
  --catalogue-stock: #e8e1d5;
  --catalogue-paper-3: #f7f3ea;
  --catalogue-ink: #151a1b;
  --catalogue-blue: #204aa8;
  --catalogue-red: #e34d36;
  --catalogue-rule: #bcb3a4;
  min-height: 100svh;
  padding: 0 var(--gutter);
  padding-inline: max(var(--gutter), var(--sal)) max(var(--gutter), var(--sar));
  overflow-x: clip;
  color: var(--catalogue-ink);
  background: var(--catalogue-paper);
}

.site-header.masthead {
  min-height: 78px;
  display: grid;
  grid-template-columns: auto minmax(130px, 1fr) auto auto;
  align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
  border-bottom: 2px solid var(--catalogue-ink);
}
.wordmark, .footer-wordmark { display: block; width: 106px; color: var(--catalogue-ink); --wm-accent: var(--catalogue-red); transition: color .18s ease; }
.wordmark:hover { color: var(--catalogue-blue); }
.wordmark-svg { display: block; width: 100%; height: auto; }
.header-note { display: grid; gap: 3px; color: var(--ink-2); font: 500 9px/1.2 var(--mono); font-stretch: 88%; }
.header-note span:first-child { color: var(--catalogue-ink); font-weight: 700; }
.header-note span:last-child { color: var(--ink-3); }
.header-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.header-nav a { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; color: var(--catalogue-ink); font: 750 13px/1 var(--display); font-stretch: 108%; text-decoration: none; text-underline-offset: 5px; }
.header-nav a b { color: var(--catalogue-red); font: 700 9px/1 var(--mono); }
.header-nav a:hover { color: var(--catalogue-red); text-decoration: underline; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.text-button { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; gap: 15px; border: 1px solid var(--catalogue-ink); border-radius: 0; background: transparent; cursor: pointer; font: 750 12px/1 var(--display); font-stretch: 108%; transition: background .16s ease, color .16s ease, transform .16s ease; }
.text-button span { color: var(--catalogue-red); font-size: 18px; }
.text-button:hover { background: var(--catalogue-ink); color: var(--catalogue-paper); }
.text-button:active { transform: translateY(2px); }

/* Cover: cobalt print field, warm product photograph, one short line. */
.front-cover {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr);
  grid-template-rows: auto 1fr auto;
  gap: 0 clamp(18px, 2.4vw, 36px);
  align-items: stretch;
  margin-inline: calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
  overflow: hidden;
  color: #f7f0e5;
  background: var(--catalogue-blue);
  border-bottom: 8px solid var(--catalogue-red);
}
.front-topline { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; padding: 13px 0 12px; border-bottom: 1px solid rgba(247,240,229,.42); color: rgba(247,240,229,.78); font: 600 9px/1.2 var(--mono); letter-spacing: .06em; }
.front-copy { position: relative; z-index: 3; min-width: 0; grid-column: 1; grid-row: 2; align-self: center; padding: clamp(34px, 5vw, 70px) 0 clamp(34px, 4vw, 58px); }
.front-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(24px, 3.2vw, 42px); color: rgba(247,240,229,.82); font: 600 10px/1.2 var(--mono); letter-spacing: .06em; }
.front-kicker span { display: inline-grid; min-width: 42px; min-height: 26px; place-items: center; padding: 0 7px; color: #fff; background: var(--catalogue-red); }
.front-kicker b { font-weight: 600; }
.front-copy h1 { max-width: 5ch; color: #f7f0e5; font: 900 clamp(86px, 10.5vw, 156px)/.76 var(--display); font-stretch: 122%; letter-spacing: -.085em; text-wrap: balance; }
.front-copy h1 em { display: block; color: #ff684e; font-style: normal; }
.front-deck { margin-top: 24px; color: rgba(247,240,229,.82); font: 500 clamp(14px, 1.25vw, 17px)/1.35 var(--text); }
.front-play { min-height: 54px; display: inline-flex; align-items: center; gap: 28px; margin-top: 26px; padding: 0 9px 0 17px; border: 1px solid var(--catalogue-ink); border-radius: 0; color: var(--catalogue-ink); background: var(--catalogue-paper); box-shadow: 5px 5px 0 var(--catalogue-red); cursor: pointer; font: 800 14px/1 var(--display); font-stretch: 110%; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.front-play b { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: var(--catalogue-ink); font: 20px/1 var(--text); }
.front-play:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--catalogue-red); background: #fffaf0; }
.front-play:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--catalogue-red); }
.front-offline-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 360px; margin-top: 15px; font: 600 10px/1.35 var(--mono); color: rgba(247,240,229,.84); }
.front-offline-status [data-offline-status]::before { content: '●'; display: inline-block; margin-right: 7px; font-size: 8px; color: #d5bd83; }
.front-offline-status [data-state="ready"]::before { color: #98d9b0; }
.front-offline-status [data-state="incomplete"]::before { color: #ffb595; }
.front-offline-status button { min-height: 32px; border: 1px solid rgba(247,240,229,.68); background: transparent; color: inherit; cursor: pointer; padding: 6px 9px; font: inherit; }
.front-offline-status button[hidden] { display: none; }
.front-data { display: flex; flex-wrap: wrap; gap: 18px 26px; margin-top: 30px; }
.front-data div { min-width: 92px; padding-top: 8px; border-top: 1px solid rgba(247,240,229,.4); }
.front-data dt { margin-bottom: 4px; color: rgba(247,240,229,.6); font: 500 8px/1.2 var(--mono); text-transform: uppercase; }
.front-data dd { color: #fff; font: 650 11px/1.25 var(--mono); }
.front-art { position: relative; z-index: 1; grid-column: 2; grid-row: 2; min-width: 0; min-height: clamp(470px, 49vw, 690px); margin: 16px calc(var(--gutter) * -1) 16px 0; overflow: hidden; isolation: isolate; background: var(--catalogue-stock); }
.front-art-number { position: absolute; z-index: 2; top: -5%; left: 1%; color: rgba(32,74,168,.12); font: 900 clamp(260px, 35vw, 510px)/.78 var(--display); font-stretch: 125%; letter-spacing: -.12em; }
.front-art-cross { position: absolute; z-index: 2; width: 34px; height: 34px; opacity: .55; pointer-events: none; }
.front-art-cross::before, .front-art-cross::after { content: ""; position: absolute; background: var(--catalogue-red); }
.front-art-cross::before { left: 16px; top: 0; width: 1px; height: 34px; }
.front-art-cross::after { left: 0; top: 16px; width: 34px; height: 1px; }
.front-art-cross-a { top: 9%; right: 7%; }
.front-art-cross-b { bottom: 11%; left: 7%; transform: scale(.62); }
.front-art-sticker { position: absolute; z-index: 3; top: 22px; left: 22px; padding: 8px 11px; color: #fff; background: var(--catalogue-red); font: 700 9px/1 var(--mono); letter-spacing: .06em; transform: rotate(-3deg); }
.front-product-launch { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: block; padding: 0; overflow: hidden; border: 0; background: transparent; cursor: pointer; }
.front-render { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; mix-blend-mode: multiply; transform: scale(1); transition: transform .45s var(--ease-out); }
.front-product-launch:hover .front-render { transform: scale(1.025) rotate(-.3deg); }
.front-art-caption { position: absolute; z-index: 2; right: 16px; bottom: 13px; padding-top: 7px; border-top: 1px solid rgba(21,26,27,.4); color: var(--catalogue-ink); font: 600 8px/1.2 var(--mono); letter-spacing: .05em; }
.front-bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 22px; padding: 12px 0 14px; border-top: 1px solid rgba(247,240,229,.42); color: rgba(247,240,229,.82); }
.front-bottom-label { font: 600 9px/1.2 var(--mono); letter-spacing: .06em; }
.front-swatches { display: flex; align-items: center; gap: 4px; }
.front-swatch { width: 31px; height: 19px; display: grid; place-items: center; border: 1px solid rgba(21,26,27,.7); color: #fff; background: var(--swatch); font: 700 8px/1 var(--mono); }
.front-bottom > a { min-height: 34px; display: inline-flex; align-items: center; gap: 12px; color: #fff; font: 700 11px/1 var(--display); text-decoration: none; }
.front-bottom > a:hover { color: #ffb7a8; }
.front-bottom > a b { color: #ff684e; font-size: 17px; }

/* A small materials strip: photographs do the talking. */
.detail-strip { padding: 22px 0 34px; border-bottom: 1px solid var(--catalogue-ink); }
.detail-strip-heading { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 10px; color: var(--catalogue-ink); font: 600 8px/1.2 var(--mono); letter-spacing: .06em; }
.detail-strip-heading span:first-child { color: var(--catalogue-red); }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.detail-item { min-width: 0; border: 1px solid var(--catalogue-ink); background: var(--catalogue-stock); }
.detail-image { height: clamp(150px, 18vw, 240px); overflow: hidden; background: var(--catalogue-stock); }
.detail-image img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform .4s var(--ease-out); }
.detail-item:hover .detail-image img { transform: scale(1.04); }
.detail-item figcaption { display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 7px 10px; border-top: 1px solid var(--catalogue-ink); color: var(--catalogue-ink); background: var(--catalogue-paper-3); }
.detail-item figcaption span { color: var(--catalogue-red); font: 600 8px/1 var(--mono); }
.detail-item figcaption b { font: 800 13px/1 var(--display); font-stretch: 112%; }

/* Twelve physical objects in a stable catalogue order. */
.collection-section { padding: clamp(48px, 6.5vw, 88px) 0 clamp(42px, 5vw, 70px); }
.collection-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-bottom: 18px; border-bottom: 2px solid var(--catalogue-ink); }
.section-index { margin-bottom: 13px; color: var(--catalogue-red); font: 600 9px/1.2 var(--mono); letter-spacing: .06em; }
.collection-heading h2 { max-width: 12ch; color: var(--catalogue-ink); font: 900 clamp(58px, 8vw, 108px)/.82 var(--display); font-stretch: 122%; letter-spacing: -.07em; }
.collection-heading h2 em { color: var(--catalogue-red); font-style: normal; }
.collection-aside { display: flex; align-items: center; gap: 14px; padding-bottom: 7px; color: var(--catalogue-ink); font: 750 14px/1 var(--display); }
.collection-aside span { color: var(--catalogue-red); font-size: 22px; }
.collection-ruler { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0 13px; color: var(--ink-2); font: 600 8px/1.2 var(--mono); letter-spacing: .06em; }
.collection-dashboard { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:0 0 18px; }
.collection-dashboard article { min-width:0; padding:16px 15px 14px; border:1px solid var(--catalogue-ink); background:var(--catalogue-paper-3); color:var(--catalogue-ink); }
.collection-dashboard span { display:block; color:var(--catalogue-red); font:700 8px/1.1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.collection-dashboard strong { display:block; margin-top:9px; font:900 clamp(22px,3vw,34px)/.9 var(--display); letter-spacing:-.04em; }
.collection-dashboard small { display:block; margin-top:8px; color:#435055; font:500 11px/1.35 var(--text); }
.toy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; gap: 17px; align-items: stretch; }
.toy-entry { position: relative; display: flex; flex-direction: column; --photo-share: 46%; min-width: 0; overflow: hidden; border: 1px solid var(--catalogue-ink); background: var(--toy-surface); box-shadow: 5px 5px 0 var(--catalogue-ink); transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.toy-launch { width: 100%; height: auto; flex: 1; min-height: 292px; display: grid; grid-template-columns: minmax(0, var(--photo-share)) minmax(0, 1fr); min-width: 0; padding: 0; border: 0; border-radius: 0; color: #fff; background: transparent; text-align: left; cursor: pointer; }
.toy-photo { position: relative; display: block; min-width: 0; min-height: 292px; overflow: hidden; background: var(--catalogue-stock); }
.toy-number { position: absolute; z-index: 1; top: 4px; left: 9px; color: rgba(21,26,27,.14); font: 900 clamp(58px, 8vw, 116px)/.8 var(--display); font-stretch: 125%; letter-spacing: -.1em; pointer-events: none; }
.toy-plastic { position: absolute; z-index: 2; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 6px 8px; color: #fff; background: var(--toy-surface); font: 600 8px/1.15 var(--mono); }
.toy-copy { min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 11px; padding: 22px 22px 18px; color: #fff; background: var(--toy-surface); }
.toy-model { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.38); color: rgba(255,255,255,.78); font: 600 8px/1.2 var(--mono); letter-spacing: .045em; text-transform: uppercase; }
.toy-model span:last-child { text-align: right; }
.toy-title { display: block; color: #fff; font: 900 clamp(24px, 2.65vw, 37px)/.93 var(--display); font-stretch: 118%; letter-spacing: -.04em; overflow-wrap: normal; }
.toy-controls { display: block; color: rgba(255,255,255,.84); font: 500 11px/1.35 var(--text); }
.toy-stats { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 22px; margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.32); }
.toy-record, .toy-wear { min-width: 0; display: grid; gap: 3px; }
.toy-record i, .toy-wear i { color: rgba(255,255,255,.62); font: 500 7px/1.1 var(--mono); font-style: normal; text-transform: uppercase; }
.toy-record b { color: #fff; font: 700 12px/1 var(--mono); }
.toy-wear b { color: #fff; font: 700 10px/1.1 var(--display); }
.toy-wear small { color: rgba(255,255,255,.72); font: 500 8px/1 var(--mono); }
.toy-action { display: flex; align-items: center; justify-content: space-between; min-height: 31px; margin-top: 2px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.32); color: #fff; font: 800 11px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.toy-action b { color: #ffb19f; font: 20px/1 var(--text); }
/* One uninterrupted physical archive, numbered 01–12. The photos occupy a
   fixed proportion of each card; no masonry reorders toys while scrolling. */
.toy-entry--vector .toy-photo { background: #e4e6dc; }
.toy-entry .favorite-button { position: absolute; z-index: 4; top: 10px; right: calc(100% - var(--photo-share) + 9px); width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--catalogue-ink); border-radius: 50%; color: var(--catalogue-ink); background: rgba(247,243,234,.96); cursor: pointer; font-size: 18px; transition: transform .16s ease, color .16s ease, background .16s ease; }
.toy-entry .favorite-button:hover { transform: scale(1.08); }
.toy-entry .favorite-button.is-favorite { border-color: var(--catalogue-red); color: #fff; background: var(--catalogue-red); }
.toy-entry:focus-within { outline: 3px solid var(--catalogue-blue); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .toy-entry:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--catalogue-ink); }
}
.toy-launch:active .toy-action { transform: translateY(2px); }

.site-footer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 28px; margin-inline: calc(var(--gutter) * -1); padding: 22px var(--gutter) calc(24px + var(--sab)); color: #f7f0e5; background: var(--catalogue-ink); }
.footer-wordmark { width: 78px; color: #f7f0e5; --wm-accent: #ff684e; }
.credit { color: rgba(247,240,229,.82); font-size: 12px; }
.credit a { color: #ff8069; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.credit a:hover { color: #fff; }
.footer-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 18px; }
.offline-note { color: rgba(247,240,229,.55); font: 500 8px/1.3 var(--mono); }
.footer-plate { color: rgba(247,240,229,.7); font: 500 8px/1.3 var(--mono); }
.footer-plate a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.footer-plate a:hover { color: #ff8069; }
.lift-ghost { position: fixed; z-index: 80; pointer-events: none; border-radius: 2px; will-change: transform, opacity; }

@media (min-width: 1440px) {
  .catalogue-shell { padding-inline: max(64px, calc((100vw - 1360px) / 2)); }
}
@media (max-width: 1080px) {
  .site-header.masthead { grid-template-columns: auto minmax(0, 1fr) auto; }
  .header-note { display: none; }
  .front-cover { grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr); }
  .front-copy h1 { font-size: clamp(78px, 10vw, 112px); }
  .front-art { min-height: 500px; }

}
@media (max-width: 760px) {
  .site-header.masthead { min-height: 0; grid-template-columns: auto 1fr auto; grid-template-rows: 58px 43px; gap: 0 12px; }
  .wordmark { width: 86px; }
  .header-note { display: none; }
  .header-nav { grid-column: 1 / -1; grid-row: 2; display: flex; align-self: stretch; align-items: center; justify-content: flex-start; gap: 24px; border-top: 1px solid var(--catalogue-rule); }
  .header-nav a { min-height: 42px; font-size: 11px; }
  .header-actions { grid-column: 3; grid-row: 1; }
  .text-button { min-height: 44px; padding-inline: 12px; font-size: 12px; }
  .front-cover { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; gap: 0; padding-inline: 14px; }
  .front-topline { padding-block: 11px; font-size: 7px; }
  .front-copy { grid-column: 1; grid-row: 2; padding: 28px 0 16px; }
  .front-kicker { margin-bottom: 18px; font-size: 8px; }
  .front-kicker span { min-width: 38px; min-height: 23px; }
  .front-copy h1 { max-width: 5ch; font-size: clamp(78px, 19vw, 104px); }
  .front-deck { margin-top: 14px; font-size: 14px; }
  .front-play { min-height: 48px; gap: 18px; margin-top: 18px; padding-left: 13px; font-size: 12px; }
  .front-play b { width: 30px; height: 30px; }
  .front-data { gap: 14px 20px; margin-top: 18px; }
  .front-data div { min-width: 82px; }
  .front-data dt { font-size: 7px; }
  .front-data dd { font-size: 9px; }
  .front-art { grid-column: 1; grid-row: 3; min-height: 320px; margin: 0 -14px; }
  .front-art-number { top: 1%; left: 2%; font-size: 260px; }
  .front-art-sticker { top: 12px; left: 12px; padding: 6px 8px; font-size: 7px; }
  .front-art-caption { right: 9px; bottom: 9px; font-size: 7px; }
  .front-render { transform: scale(1); }
  .front-bottom { grid-column: 1; grid-row: 4; gap: 9px 12px; padding: 10px 0 12px; }
  .front-bottom-label { font-size: 7px; }
  .front-swatch { width: 25px; height: 17px; font-size: 7px; }
  .front-bottom > a { min-height: 36px; font-size: 10px; }
  .detail-strip { padding: 18px 0 25px; }
  .detail-strip-heading { font-size: 7px; }
  .detail-grid { display: flex; gap: 10px; overflow-x: auto; padding: 1px 8px 10px 0; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .detail-item { flex: 0 0 76vw; scroll-snap-align: start; }
  .detail-image { height: 190px; }
  .collection-section { padding: 40px 0 38px; }
  .collection-heading { gap: 12px; padding-bottom: 14px; }
  .section-index { margin-bottom: 9px; font-size: 7px; }
  .collection-heading h2 { max-width: 9ch; font-size: clamp(46px, 11vw, 64px); }
  .collection-aside { gap: 6px; padding-bottom: 3px; font-size: 11px; white-space: nowrap; }
  .collection-aside span { font-size: 18px; }
  .collection-ruler { padding: 9px 0 10px; font-size: 7px; }
  .toy-grid { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .toy-entry { --photo-share: 43%; }
  .toy-launch { min-height: 260px; }
  .toy-photo { min-height: 260px; }
  .toy-copy { padding: 15px 14px 13px; gap: 9px; }
  .toy-model { gap: 4px; padding-bottom: 7px; font-size: 7px; }
  .toy-title { font-size: clamp(23px, 6.1vw, 31px); line-height: .95; }
  .toy-controls { font-size: 10px; line-height: 1.4; }
  .toy-number { top: 5px; left: 6px; font-size: 70px; }
  .toy-plastic { left: 7px; bottom: 7px; font-size: 7px; }
  .toy-stats { gap: 7px 10px; padding-top: 8px; }
  .toy-record i, .toy-wear i { font-size: 7px; }
  .toy-record b { font-size: 12px; }
  .toy-wear b { font-size: 10px; }
  .toy-wear small { font-size: 7px; }
  .toy-action { min-height: 30px; padding-top: 8px; font-size: 11px; }
  .toy-action b { font-size: 18px; }
  .toy-entry .favorite-button { top: 8px; right: calc(100% - var(--photo-share) + 8px); width: 44px; height: 44px; }
  .site-footer { grid-template-columns: auto 1fr; gap: 12px 18px; padding: 18px var(--gutter) calc(22px + var(--sab)); }
  .footer-wordmark { width: 68px; }
  .credit { font-size: 11px; }
  .footer-meta { grid-column: 1 / -1; justify-content: space-between; gap: 8px; }
  .offline-note, .footer-plate { font-size: 7px; }
  .play-topbar { top: max(8px, var(--sat)); left: max(8px, var(--sal)); right: max(8px, var(--sar)); }
  .play-nav-button { min-height: 44px; padding: 0 10px 0 9px; gap: 6px; font-size: 12px; }
  .play-title b { font-size: 15px; }
  .play-status { top: calc(max(8px, var(--sat)) + 48px); }
  .play-hint { display: none; }
}
@media (max-width: 380px) {
  .wordmark { width: 78px; }
  .header-nav { gap: 17px; }
  .header-nav a { font-size: 10px; }
  .front-cover { padding-inline: 12px; }
  .front-copy h1 { font-size: 76px; }
  .front-art { min-height: 286px; margin-inline: -12px; }
  .front-swatch { width: 22px; }
  .toy-entry { --photo-share: 41%; }
  .toy-launch { min-height: 250px; }
  .toy-photo { min-height: 250px; }
  .toy-copy { padding: 13px 11px; gap: 8px; }
  .toy-title { font-size: 22px; }
  .toy-controls { font-size: 9px; }
  .toy-model { font-size: 6px; }
  .toy-entry .favorite-button { width: 44px; height: 44px; }

}
@media (prefers-reduced-motion: reduce) {
.front-play, .front-render, .detail-image img, .toy-entry, .toy-entry .favorite-button{ transition: none !important; animation: none !important; }
}

/* ---------- Dialogs (settings, service) ---------- */
.settings-dialog { width: min(460px, calc(100vw - 28px)); max-width: none; border: 1px solid var(--ink); border-radius: 10px; padding: 0; background: var(--paper-3); color: var(--ink); box-shadow: 0 24px 70px rgba(21,29,28,.22); }
.settings-dialog::backdrop { background: rgba(21,29,28,.32); }
.settings-panel { padding: 24px; }
.settings-heading { display: flex; justify-content: space-between; align-items: start; margin-bottom: 14px; }
.settings-heading .eyebrow { margin: 0 0 8px; color: var(--ink-3); font: 500 12px/1.3 var(--mono); }
.settings-heading h2 { margin: 0 0 6px; font: 800 30px/1 var(--display); font-stretch: 114%; letter-spacing: -.02em; }
.close-button { width: 44px; height: 44px; flex: none; border: 1px solid var(--ink); border-radius: 50%; background: transparent; font-size: 22px; cursor: pointer; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 0; border-top: 1px solid var(--rule); }
.setting-row b { display: block; font: 700 15px/1.2 var(--display); font-stretch: 108%; }
.setting-row small { display: block; margin-top: 3px; color: var(--ink-3); font-size: 13px; line-height: 1.35; }
.setting-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--glacier); }
.setting-select select { max-width: 140px; min-height: 40px; border: 1px solid var(--ink); border-radius: 6px; background: #fffdf8; padding: 6px 8px; font: 500 13px var(--mono); }
.setting-range input { width: 140px; accent-color: var(--glacier); }
.settings-save { width: 100%; margin-top: 16px; }
.setting-data { padding: 14px 0 6px; border-top: 1px solid var(--rule); }
.setting-data .eyebrow { margin: 0 0 6px; color: var(--ink-3); font: 500 12px/1.3 var(--mono); }
.setting-note { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.setting-data-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.secondary-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; font: 650 14px/1.1 var(--display); font-stretch: 108%; }
.secondary-button:hover:not(:disabled) { background: var(--ink); color: var(--paper-3); }
.secondary-button:disabled { opacity: .4; cursor: default; }
.secondary-button.danger { border-color: var(--stamp); color: var(--stamp); }
.secondary-button.danger:hover:not(:disabled) { background: var(--stamp); color: #fff; }
.file-button { position: relative; }
.service-list { list-style: none; margin: 0 0 12px; padding: 0; }
.service-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule); }
.service-row .secondary-button { grid-column: 1 / -1; justify-self: start; text-align: left; }
.service-name b { display: block; font: 700 15px/1.2 var(--display); }
.service-name small { color: var(--ink-3); font-size: 13px; }
.service-meter { width: 70px; height: 5px; }

/* ---------- Play stage ---------- */
.is-playing { overflow: hidden; overscroll-behavior: none; background: var(--paper); }
.play-stage { position: fixed; z-index: 50; inset: 0; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; isolation: isolate; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; background: radial-gradient(ellipse 120% 70% at 50% 0%, #fbf8f1 0%, #ece6da 58%, #ddd5c6 100%); animation: stage-in .42s var(--ease-out) both; }
@keyframes stage-in { from { opacity: 0; } to { opacity: 1; } }
.play-stage[data-plastic="smoke"] { background: radial-gradient(ellipse 120% 70% at 50% 0%, #f1ede5 0%, #e1dbcf 58%, #cfc7b8 100%); }
.stage-floor { position: absolute; z-index: 0; left: 50%; top: calc(var(--shell-bottom, 80vh) - 18px); width: calc(var(--shell-scale, 140) * 3.6px); height: calc(var(--shell-scale, 140) * .55px); transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, rgba(54,58,52,.28), rgba(54,58,52,.1) 45%, transparent 70%); filter: blur(6px); pointer-events: none; }
.play-stage[data-game="aqua-rings"] .stage-floor::after { content: ""; position: absolute; inset: 10% -20% -40%; border-radius: 50%; background: repeating-conic-gradient(from 200deg at 50% 0%, transparent 0deg 6deg, rgba(255,214,170,.5) 7deg, rgba(180,225,240,.45) 8deg, transparent 10deg 14deg); mask-image: radial-gradient(ellipse at 50% 10%, #000 20%, transparent 65%); -webkit-mask-image: radial-gradient(ellipse at 50% 10%, #000 20%, transparent 65%); opacity: .8; }
.device-canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: block; }
.screen-hit-area { position: absolute; z-index: 2; touch-action: none; border-radius: 6px; cursor: crosshair; }
.play-stage[data-game="aqua-rings"] .screen-hit-area { cursor: ew-resize; }
.play-stage[data-game="pocket-pinball"] .screen-hit-area { pointer-events: none; }
.hit-layer { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.hit-button { position: absolute; left: 0; top: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; pointer-events: auto; touch-action: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* Prevent selection loupe and native zoom on the actual toy. Page zoom stays available in the catalogue. */
.device-canvas, .screen-hit-area, .hit-button, .inspect-surface {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* The game is an immersive fixed surface: Safari must not magnify it on repeated taps.
   The viewport lock is temporary and is restored when returning to the catalogue. */
.play-stage button, .play-stage a, .play-stage [role="button"],
.play-stage .device-canvas, .play-stage .screen-hit-area, .play-stage .inspect-surface {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* Catalogue controls keep normal page zoom and scroll behavior. */
.catalogue-shell a, .catalogue-shell button { touch-action: manipulation; }
/* Panels remain vertically scrollable inside the immersive stage. */
.play-stage .atelier-scroll, .play-stage .photo-scroll, .play-stage .booklet-scroll { touch-action: pan-y; overscroll-behavior: contain; }
.hit-button.hit-dpad { border-radius: 30%; }
.hit-button:focus-visible { outline: 3px solid rgba(45,140,154,.8); outline-offset: 2px; }
.play-topbar { position: absolute; z-index: 5; top: max(12px, var(--sat)); left: max(12px, var(--sal)); right: max(12px, var(--sar)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; pointer-events: none; }
.play-topbar button { pointer-events: auto; }
.play-nav-button, .play-icon-button { min-height: 44px; border: 1px solid rgba(21,29,28,.35); border-radius: 999px; background: rgba(247,243,234,.88); cursor: pointer; }
.play-nav-button { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 12px; font: 700 13px/1 var(--display); font-stretch: 108%; }
.play-nav-button span:first-child { font: 18px/1 var(--text); }
.play-title { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.play-title-kicker { color: var(--ink-3); font: 500 11px/1.2 var(--mono); font-stretch: 85%; }
.play-title b { font: 800 19px/1 var(--display); font-stretch: 114%; letter-spacing: -.01em; }
.play-icon-button { justify-self: end; width: 44px; font: 700 15px/1 var(--display); }
.play-status { position: absolute; z-index: 4; top: calc(max(12px, var(--sat)) + 52px); left: 50%; display: flex; align-items: center; gap: 8px; transform: translateX(-50%); color: var(--ink-2); font: 500 11px/1.2 var(--mono); font-stretch: 85%; white-space: nowrap; pointer-events: none; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #4f9a6a; }
.tilt-button { pointer-events: auto; min-height: 36px; padding: 0 12px; border: 1px solid var(--glacier); border-radius: 999px; background: rgba(247,243,234,.9); color: var(--glacier); font: 600 12px/1 var(--mono); font-stretch: 85%; cursor: pointer; }
.tilt-button[hidden] { display: none; }
.play-hint { position: absolute; z-index: 2; bottom: max(12px, calc(var(--sab) + 6px)); left: 50%; margin: 0; transform: translateX(-50%); color: var(--ink-2); font: 500 12px/1.3 var(--mono); font-stretch: 88%; white-space: nowrap; }
.play-error { position: absolute; z-index: 6; left: 50%; top: 50%; width: min(320px, 86vw); transform: translate(-50%, -50%); padding: 18px; border: 1px solid var(--ink); border-radius: 8px; background: var(--paper-3); font-size: 15px; line-height: 1.5; }
.play-error[hidden] { display: none; }
.pause-layer { position: absolute; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(229,221,205,.72); }
.pause-layer[hidden] { display: none; }
.pause-card { width: min(340px, 100%); display: grid; gap: 9px; padding: 26px 24px; border: 1px solid var(--ink); border-radius: 10px; background: var(--paper-3); box-shadow: 0 24px 60px rgba(21,29,28,.16); }
.pause-card .eyebrow { margin: 0 0 4px; color: var(--ink-3); font: 500 12px/1.3 var(--mono); }
.pause-card h2 { margin: 0 0 12px; font: 820 36px/1 var(--display); font-stretch: 116%; letter-spacing: -.03em; }

/* ---------- Game-stage responsive rules; catalogue rules are above ---------- */
@media (max-width: 760px) {
  .play-topbar { top: max(8px, var(--sat)); left: max(8px, var(--sal)); right: max(8px, var(--sar)); }
  .play-nav-button { min-height: 44px; padding: 0 10px 0 9px; gap: 6px; font-size: 12px; }
  .play-title b { font-size: 15px; }
  .play-status { top: calc(max(8px, var(--sat)) + 48px); }
  .play-hint { display: none; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .play-topbar { grid-template-columns: auto 1fr auto; }
  .play-title { display: none; }
  .play-status { left: max(12px, var(--sal)); top: calc(max(12px, var(--sat)) + 52px); transform: none; flex-direction: column; align-items: flex-start; }
  .play-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
:root.reduce-motion *, :root.reduce-motion *::before, :root.reduce-motion *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }

/* ---------- 3D toy inspection ---------- */
.play-top-actions { display: flex; align-items: center; gap: 8px; }
.inspect-open { width: auto; min-width: 58px; padding-inline: 10px; font: 700 10px/1 var(--mono); letter-spacing: -.04em; }
.play-stage.is-inspecting { background: radial-gradient(ellipse at 50% 45%, #31545a, transparent 58%), linear-gradient(145deg, #101b20, #243b42 55%, #0d171b); }
.inspect-layer { position: absolute; inset: 0; z-index: 30; display: grid; grid-template-rows: auto 1fr auto; padding: max(18px, var(--sat)) max(18px, var(--sar)) max(18px, var(--sab)) max(18px, var(--sal)); overflow: hidden; color: #f3eee2; background: transparent; }
.inspect-layer[hidden] { display: none; }
.inspect-topline { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 12px; color: rgba(245,239,225,.68); font: 10px/1.4 var(--mono); letter-spacing: .08em; }
.inspect-surface { position: relative; min-height: 0; touch-action: none; cursor: grab; background: radial-gradient(ellipse at 50% 52%, rgba(207,231,218,.12), transparent 45%); }
.inspect-surface:active { cursor: grabbing; }
.inspect-controls { position: relative; z-index: 3; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.inspect-controls button { min-height: 44px; padding: 0 14px; border: 1px solid rgba(245,239,225,.4); color: #f3eee2; background: rgba(11,22,26,.62); font: 700 10px/1 var(--mono); letter-spacing: .05em; cursor: pointer; backdrop-filter: blur(12px); }
.inspect-controls button:last-child { color: #182328; background: #e7dfcf; border-color: #e7dfcf; }
.inspect-controls button:active { transform: translateY(2px); }
.play-stage.is-inspecting .device-canvas { filter: drop-shadow(0 30px 35px rgba(0,0,0,.28)); }
.play-stage.is-inspecting .screen-hit-area, .play-stage.is-inspecting .hit-layer { pointer-events: none; opacity: 0; }
@media (max-width: 560px) {
  .inspect-topline { font-size: 8px; }
  .inspect-controls { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .inspect-controls button { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .inspect-controls button { transition: none !important; }
}

/* Scroll reveals: staggered printed layers, not a uniform template fade. */
.motion-reveal { opacity: 0; transform: translate3d(0, 28px, 0) rotateX(2deg); transition: opacity .72s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms), transform .82s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms); transform-origin: 50% 80%; }
.motion-reveal.motion-visible { opacity: 1; transform: translate3d(0,0,0) rotateX(0); }
.front-cover { isolation: isolate; }
.front-cover::after { content: ""; position: absolute; z-index: 0; inset: -45% -20%; pointer-events: none; opacity: .22; background: linear-gradient(112deg, transparent 38%, rgba(255,255,255,.32) 48%, rgba(255,255,255,.04) 53%, transparent 62%); transform: translateX(-72%) rotate(-8deg); animation: cover-liquid-sheen 13s ease-in-out infinite; mix-blend-mode: screen; }
.front-copy, .front-art, .front-topline, .front-bottom { position: relative; z-index: 1; }
.front-render { transform-origin: 50% 58%; animation: toy-float 7.5s ease-in-out infinite; filter: drop-shadow(0 25px 25px rgba(6,18,35,.22)); }
.toy-photo { isolation: isolate; }
.toy-photo::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: .18; background: linear-gradient(120deg, transparent 32%, rgba(255,255,255,.65) 48%, transparent 63%); transform: translateX(-130%); transition: transform .9s cubic-bezier(.2,.7,.2,1); mix-blend-mode: screen; }
.toy-entry:hover .toy-photo::after, .toy-entry:focus-within .toy-photo::after { transform: translateX(130%); }
.detail-image { overflow: hidden; }
.detail-image img { transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .8s ease; }
.detail-item:hover .detail-image img { transform: scale(1.055) rotate(-.7deg); filter: saturate(1.12) contrast(1.03); }
@keyframes cover-liquid-sheen { 0%, 20% { transform: translateX(-72%) rotate(-8deg); } 62%, 100% { transform: translateX(72%) rotate(-8deg); } }
@keyframes toy-float { 0%,100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-9px) rotate(.5deg); } }
@media (prefers-reduced-motion: reduce) {
  .motion-reveal, .motion-reveal.motion-visible { opacity: 1; transform: none; transition: none; }
  .front-cover::after, .front-render { animation: none; }
  .toy-photo::after, .detail-image img { transition: none; }
}

/* ---------- Phase 2 closure: play bar and inspection ---------- */
.play-stage.is-inspecting .play-topbar, .play-stage.is-inspecting .play-status, .play-stage.is-inspecting .play-hint { visibility: hidden; }
.inspect-topline { font-size: 11px; letter-spacing: .02em; }
.inspect-controls button { font-size: 12px; letter-spacing: 0; }
.inspect-controls button:focus-visible { outline: 3px solid #f3eee2; outline-offset: 2px; }
@media (max-width: 560px) {
  .play-topbar { grid-template-columns: auto 1fr auto; gap: 6px; }
  .play-nav-button { width: 44px; padding: 0; justify-content: center; }
  .play-nav-button span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .play-title { min-width: 0; }
  .play-title b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
  .play-top-actions { gap: 6px; }
  .inspect-open { min-width: 50px; padding-inline: 8px; }
  .inspect-topline { flex-direction: column; gap: 2px; }
}

/* ---------- Phase 2 closure: hero depth, liquid light, varied entrances ---------- */
/* The big numeral is printed on the backdrop, behind the product (it used to veil it). */
.front-art-number { z-index: 0; color: rgba(32,74,168,.16); }
.front-render { transform: translate3d(calc(var(--tilt-x, 0) * -6px), calc(var(--parallax, 0px) + var(--tilt-y, 0) * -5px), 0) rotate(calc(var(--tilt-x, 0) * -.6deg)); transition: transform .5s var(--ease-out); }
.front-product-launch:hover .front-render { transform: translate3d(calc(var(--tilt-x, 0) * -6px), calc(var(--parallax, 0px) - 4px), 0) scale(1.02); }
/* Light is now contained to the actual photographed water tank. */
.front-liquid {position:absolute;z-index:2;inset:0;overflow:hidden;pointer-events:none;}
.front-liquid canvas {position:absolute;inset:0;width:100%;height:100%;display:block;}
/* Plastic highlight that crosses a card once when you point at it. */
.toy-photo { position: relative; }
.toy-photo::after { content: ""; position: absolute; inset: -20% -60%; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.38) 50%, transparent 60%); transform: translateX(-70%); opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .toy-entry:hover .toy-photo::after { animation: plastic-sweep .9s var(--ease-out) 1; }
}
@keyframes plastic-sweep { from { transform: translateX(-70%); opacity: 1; } to { transform: translateX(70%); opacity: 0; } }
.favorite-button.is-favorite { animation: star-pop .38s var(--ease-out); }
@keyframes star-pop { 40% { transform: scale(1.28) rotate(-12deg); } 100% { transform: scale(1); } }
/* Entrances: each element type moves its own way. */
.motion-reveal[data-reveal] { transition: opacity .7s var(--ease-out) var(--reveal-delay, 0ms), transform .8s var(--ease-out) var(--reveal-delay, 0ms), clip-path .9s var(--ease-out) var(--reveal-delay, 0ms); }
/* Observed elements are never clipped themselves (a clipped target never "intersects"):
   the clip/wipe lives on a child or a pseudo-element. */
.motion-reveal[data-reveal="cover"] { opacity: 1; transform: none; }
.motion-reveal[data-reveal="cover"] .front-art::after { content: ""; position: absolute; inset: 0; z-index: 5; background: var(--catalogue-blue, #2147a6); transform-origin: right; transition: transform .9s var(--ease-out) .1s; pointer-events: none; }
.motion-reveal[data-reveal="cover"].motion-visible .front-art::after { transform: scaleX(0); }
.motion-reveal[data-reveal="cover"] .front-copy h1 { transition: transform .9s var(--ease-out) .25s, opacity .6s ease .25s; transform: translateY(18px); opacity: 0; }
.motion-reveal[data-reveal="cover"].motion-visible .front-copy h1 { transform: none; opacity: 1; }
.motion-reveal[data-reveal="cover"] .front-art-sticker { transition: transform .45s cubic-bezier(.3,1.6,.5,1) .85s, opacity .2s ease .85s; transform: rotate(-12deg) scale(1.6); opacity: 0; }
.motion-reveal[data-reveal="cover"].motion-visible .front-art-sticker { transform: rotate(-3deg) scale(1); opacity: 1; }
.motion-reveal[data-reveal="clip-up"] { opacity: 1; transform: none; }
.motion-reveal[data-reveal="clip-up"] .detail-image { clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--ease-out) var(--reveal-delay, 0ms); }
.motion-reveal[data-reveal="clip-up"].motion-visible .detail-image { clip-path: inset(0 0 0 0); }
.motion-reveal[data-reveal="clip-up"] img { transition: transform 1.1s var(--ease-out) var(--reveal-delay, 0ms); transform: scale(1.12); }
.motion-reveal[data-reveal="clip-up"].motion-visible img { transform: scale(1); }
.motion-reveal[data-reveal="rise-words"] { opacity: 0; transform: translateY(40px) skewY(2deg); }
.motion-reveal[data-reveal="rise-words"].motion-visible { opacity: 1; transform: none; }
.motion-reveal[data-reveal="rule"] { position: relative; opacity: 0; transform: none; transition: opacity .6s ease .2s; }
.motion-reveal[data-reveal="rule"]::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-out); }
.motion-reveal[data-reveal="rule"].motion-visible { opacity: 1; }
.motion-reveal[data-reveal="rule"].motion-visible::before { transform: scaleX(1); }
/* Opening the 3D viewer: the dark room fades in around the toy. */
.inspect-layer:not([hidden]) { animation: inspect-in .38s var(--ease-out); }
@keyframes inspect-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .motion-reveal[data-reveal], .motion-reveal[data-reveal] * { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .motion-reveal[data-reveal] .front-art::after, .motion-reveal[data-reveal]::before { display: none; }
  .front-liquid { display: none; }
  .front-render { transform: none !important; }
}
:root.reduce-motion .front-liquid { display: none; }
/* The product photo melts into the printed stock instead of showing its own edges. */
.front-art-number { display: none; }
.front-render { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }

.inspect-surface:focus { outline: none; }
.inspect-surface:focus-visible { outline: 2px dashed rgba(243,238,226,.55); outline-offset: -12px; }

/* FASE 3 / ADHESIVE LAB. Paper archive over the existing editorial collection. */
.customize-feature { position:relative; display:grid; grid-template-columns:1.05fr .95fr; min-height:490px; background:#24234d; color:#f2ecd8; isolation:isolate; overflow:hidden; }
.customize-feature-copy { z-index:1; padding:clamp(32px,5.8vw,94px); align-self:center; }
.customize-feature .section-index { color:#c4b9f4; }
.customize-feature h2 { font:800 clamp(46px,7vw,118px)/.96 var(--display,system-ui); letter-spacing:-.065em; max-width:700px; margin:35px 0 21px; }
.customize-feature h2 em { color:#ffd26d; font-weight:400; }
.customize-feature-copy>p:not(.section-index) { line-height:1.65; max-width:540px; font-size:clamp(14px,1.28vw,18px); color:#e0dcca; }
.customize-feature-tags { display:flex;flex-wrap:wrap;gap:8px;margin:23px 0 35px; }
.customize-feature-tags span { border:1px solid rgba(239,234,220,.4);padding:10px 12px;font:700 10px/1 var(--mono); }
.customize-feature-cta { min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:48px;padding:12px 22px;border:0;background:#f9df7c;color:#232548;font:800 11px var(--mono);cursor:pointer; }
.customize-feature-cta:hover { background:#fff3c0; }
.customize-feature-art { min-height:420px;display:grid;place-content:center;position:relative;transform:rotate(-12deg); }
.customize-feature-star { color:#f8df7c;font:700 clamp(200px,30vw,550px)/.8 Arial,sans-serif;text-shadow:17px 23px 0 #ed5f8b,-15px -15px 0 #7db9e5,27px -21px 0 #35267c; }
.customize-feature-type { position:absolute;top:17%;left:7%;background:#f3e1ca;color:#2b2b36;transform:rotate(12deg);padding:10px 18px;font:800 15px var(--mono);box-shadow:5px 7px 0 rgba(0,0,0,.35); }
.customize-feature-rotate { position:absolute;right:10%;bottom:21%;padding:10px 18px;background:#d9ee9b;color:#292c33;transform:rotate(27deg);font:800 13px var(--mono); }

.sticker-panel { position:absolute; z-index:7;right:max(14px,var(--sar)); top:72px;bottom:100px;width:min(345px,calc(100vw - 28px));background:#f5efdc;color:#202b2e;box-shadow:0 18px 80px rgba(0,0,0,.52);display:flex;flex-direction:column;border:1px solid #e3d5b8; }
.sticker-panel[hidden] { display:none !important; }
.sticker-panel-heading { padding:16px 17px;background:#ffda70;display:flex;align-items:start;justify-content:space-between;gap:9px; }
.sticker-panel-heading p {font:800 9px var(--mono);letter-spacing:.1em;margin:0 0 7px;}
.sticker-panel-heading h2 {font:800 26px/.95 var(--display,system-ui);letter-spacing:-.045em;margin:0;}
.sticker-panel-heading h2 em {font-style:italic;color:#7d3f9c;}
.sticker-panel-heading sup {font:800 9px var(--mono);margin-left:7px;}
.sticker-panel-heading>button {min-width:34px;min-height:34px;background:#212c30;color:#fff;border:0;font-size:25px;cursor:pointer;}
.studio-content {overflow:auto;overscroll-behavior:contain;flex:1;min-height:0;padding:13px;}
.studio-eras,.studio-sides,.studio-history {display:flex;gap:5px;margin-bottom:13px;}
.studio-eras button,.studio-sides button,.studio-history button {flex:1;min-height:34px;border:1px solid #c8c0ae;background:#fff9e9;color:#253137;font:800 10px var(--mono);cursor:pointer;}
.studio-eras button[aria-pressed="true"],.studio-sides button[aria-pressed="true"] {background:#2a2d38;color:#f7efdf;}
.studio-gallery {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-height:210px;overflow:auto;scrollbar-width:thin;padding:2px 0 8px;}
.studio-card {display:flex; flex-direction:column;align-items:center;gap:4px;padding:5px;background:#fffaf0;border:2px solid transparent;color:#34302c;cursor:pointer;min-height:98px; }
.studio-card[hidden] {display:none !important;}
.studio-card canvas {display:block;width:70px;height:70px;max-width:100%;}
.studio-card span {font:700 9px/1.1 var(--mono);text-align:center;min-height:19px;}
.studio-card[aria-pressed="true"] {border-color:#d04f61;background:#ffe4c8;}
.studio-editor {margin-top:14px;border-top:2px solid #2a2d38;padding-top:12px;display:grid;gap:11px;}
.studio-editor>p,.studio-placed>b {font:800 11px var(--mono);margin:0;}
.studio-editor label {display:flex;align-items:center;justify-content:space-between;gap:9px;font:700 10px var(--mono);}
.studio-editor input[type=range] {width:62%;accent-color:#c35468;}
.studio-sides {margin:0;}
.studio-place,.studio-quick {width:100%;min-height:46px;border:0;cursor:pointer;font:800 11px var(--mono);background:#d84e5f;color:white;}
.studio-quick {background:#28293c;color:#fff4d2;min-height:37px;}
.studio-placed {border-top:1px solid #c8c0ae;margin-top:16px;padding-top:12px;}
.studio-placed>div {margin-top:8px;max-height:104px;overflow:auto;}
.studio-placed>div>div {min-height:30px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #dbcfbc;font:700 10px var(--mono);}
.studio-placed>div>div button {min-height:30px;min-width:30px;background:transparent;border:0;color:#ab3853;font-size:20px;cursor:pointer;}
.studio-history {margin:12px 0 0;}
.studio-message {margin:0;padding:11px 15px;background:#302d3f;color:#fff0d6;font:700 10px/1.55 var(--mono);min-height:44px;}
.sticker-panel.is-picking {top:auto;bottom:110px;width:min(260px,calc(100vw - 30px));background:#302d3f;}
.sticker-panel.is-picking .studio-content {display:none;}
.sticker-panel.is-picking .sticker-panel-heading {padding:11px 12px;background:#ffda70;}
.sticker-panel.is-picking .sticker-panel-heading h2 {font-size:18px;}
.sticker-panel.is-picking .sticker-panel-heading p {display:none;}
.inspect-surface {user-select:none;-webkit-user-select:none;}
.studio-press-pop {position:absolute;z-index:42;pointer-events:none;color:#2d2a43;background:#fff0aa;white-space:nowrap;padding:8px 13px;transform:translate(-50%,-50%);font:800 12px var(--mono);animation:sticker-stamp .8s cubic-bezier(.18,.89,.22,1.3) both;box-shadow:3px 4px 0 #d45272;}
@keyframes sticker-stamp {0%{opacity:0;transform:translate(-50%,-50%) scale(1.9) rotate(-22deg)}40%{opacity:1;transform:translate(-50%,-50%) scale(.88) rotate(7deg)}70%{transform:translate(-50%,-50%) scale(1.04) rotate(-3deg)}100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}
@media (max-width:760px) {
 .customize-feature {grid-template-columns:1fr;}
 .customize-feature-copy {padding:42px 24px 0;}
 .customize-feature h2 {margin:22px 0;}
 .customize-feature-art {min-height:300px;}
 .customize-feature-star {font-size:265px;}
 .sticker-panel {top:69px;bottom:153px;right:10px;width:min(294px,calc(100vw - 20px));}
 .studio-gallery {max-height:152px;}
 .studio-card {min-height:88px;}
 .studio-card canvas {width:59px;height:59px;}
 .sticker-panel.is-picking {bottom:157px;}
}
@media (prefers-reduced-motion:reduce) { .studio-press-pop {animation:none;opacity:1;transform:translate(-50%,-50%);} }
/* Fase 3 / sound library: physical cassette sleeves between the games and sticker atelier. */
.sound-feature { padding:clamp(45px,7vw,112px) clamp(20px,5.5vw,94px); background:#f7edda; color:#202a35; }
.sound-feature-head { display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:38px; }
.sound-feature-head h2 { font:800 clamp(44px,6.3vw,96px)/.92 var(--display,system-ui);letter-spacing:-.07em;margin:20px 0 0; }
.sound-feature-head h2 em {font-weight:400;color:#c84840;}
.sound-feature-head>p {max-width:335px;margin:0 0 4px;line-height:1.6;font-size:15px;}
.sound-feature-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px; }
.sound-tape { position:relative;min-height:400px;padding:24px 22px 20px;display:flex;flex-direction:column;gap:12px;overflow:hidden;isolation:isolate;background:#283456;color:#fdf2df;box-shadow:4px 6px 0 #d2bc9a; }
.sound-tape-astro {background:#252547;color:#e8e7ff;}.sound-tape-football {background:#254c41;color:#ecf5dc;}
.sound-tape-whack {background:#7b342d;color:#fff0d9;}.sound-tape-fishing {background:#2b6670;color:#e7f6e9;}.sound-tape-beat {background:#3d315f;color:#f0e9ff;}.sound-tape-maze {background:#4b5b3d;color:#f0f0d8;}
.sound-tape::after {content:'';position:absolute;inset:0;z-index:-1;opacity:.16;pointer-events:none;background:repeating-linear-gradient(-32deg,transparent 0 2px,rgba(255,255,255,.23) 3px 4px);}
.sound-tape-number {font:700 10px var(--mono);letter-spacing:.13em;border-top:1px solid currentColor;padding-top:8px;opacity:.72;}
.sound-tape-reel {height:160px;max-width:100%;margin:10px 0 4px;border:8px solid #ece3ca;border-bottom-width:24px;border-radius:10px;background:#101a24;box-shadow:inset 0 0 0 2px #526879,4px 5px 0 rgba(0,0,0,.25);display:flex;align-items:center;justify-content:space-around;position:relative;overflow:hidden; }
.sound-tape-reel>i {width:74px;max-width:29%;aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(#c5ccc4 0 12deg,#636f76 13deg 40deg);border:14px solid #98a5ab;box-shadow:0 0 0 5px #273c4a;}
.sound-tape-reel>b {position:absolute;height:6px;width:100%;background:#f6ca53;bottom:4px;}
.sound-tape-game { font:700 10px var(--mono);letter-spacing:.14em;opacity:.75;}
.sound-tape h3 {font:900 clamp(32px,3.3vw,49px)/.93 var(--display,system-ui);letter-spacing:-.06em;margin:0;}
.sound-tape-tracks {display:flex;flex-direction:column;gap:5px;margin-top:auto;}
.sound-tape-tracks button {display:flex;align-items:center;gap:10px;text-align:left;border:1px solid rgba(250,245,225,.5);padding:9px 12px;min-height:43px;background:transparent;color:inherit;cursor:pointer;font:700 11px var(--mono);transition:background .15s,color .15s;}
.sound-tape-tracks button span {display:grid;place-content:center;width:25px;min-width:25px;aspect-ratio:1;border-radius:50%;background:#efe1b8;color:#272735;font-size:11px;}
.sound-tape-tracks button:hover,.sound-tape-tracks button[aria-pressed="true"] {background:#ede2c2;color:#273039;}
.sound-tape-tracks button:focus-visible {outline:2px dashed #f6d882;outline-offset:2px;}
.sound-feature-status {margin:20px 0 0;font:700 11px var(--mono);}
@media (max-width:900px) {.sound-tape {min-height:375px}.sound-tape-reel {height:115px}.sound-feature-head>p{max-width:250px}.sound-tape h3 {font-size:32px} }
@media (max-width:700px) {.sound-feature {padding:52px 20px}.sound-feature-head {display:block;margin-bottom:24px}.sound-feature-head>p {max-width:500px;margin-top:19px}.sound-feature-grid{grid-template-columns:1fr;gap:17px}.sound-tape {min-height:350px;padding:24px}.sound-tape-reel {height:155px;max-width:375px;width:100%;align-self:center}.sound-tape h3{font-size:43px} }
@media (prefers-reduced-motion:reduce) {.sound-tape-tracks button{transition:none}} 

/* Sticker Studio: reachable controls and an unobstructed object during placement. */
.sticker-panel-heading>button,.studio-eras button,.studio-sides button,.studio-history button,.studio-placed>div>div button { min-width:44px; min-height:44px; }
.sticker-panel.is-picking { top:max(76px,var(--sat));bottom:auto;left:16px;right:auto;width:min(275px,calc(100vw - 32px));max-height:130px;transform:none; }
.sticker-panel.is-picking .sticker-panel-heading { align-items:center; }
@media (max-width:700px) {
  .sticker-panel:not(.is-picking) { top:auto;left:50%;right:auto;bottom:151px;transform:translateX(-50%);height:min(51vh,460px);width:calc(100vw - 20px); }
  .sticker-panel.is-picking {top:max(88px,var(--sat));left:10px;bottom:auto;right:auto;max-height:126px;width:min(255px,calc(100vw - 20px));transform:none;}
  .sticker-panel.is-picking .studio-message {padding:8px 10px;}
}
@media (max-height:600px) and (max-width:700px) {
  .sticker-panel:not(.is-picking) { height:min(43vh,260px);bottom:115px; }
}

/* Physical stamp feedback: the actual chosen decal lands on the 3D surface. */
.studio-sticker-stamp { position:absolute;z-index:43;pointer-events:none;width:112px;height:112px;transform:translate(-50%,-50%);filter:drop-shadow(3px 5px 1px rgba(0,0,0,.25));animation:sticker-land .82s cubic-bezier(.17,.72,.24,1) both; }
@keyframes sticker-land {
  0%{opacity:0;transform:translate(-50%,-70%) perspective(500px) rotateX(48deg) rotateY(-18deg) scale(1.12)}
  28%{opacity:1;transform:translate(-50%,-53%) perspective(500px) rotateX(16deg) rotateY(-8deg) scale(1.03)}
  57%{opacity:1;transform:translate(-50%,-50%) perspective(500px) rotateX(0) rotateY(0) scale(.95)}
  85%{opacity:1;transform:translate(-50%,-50%) scale(.95)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.95)}
}
.studio-sticker-placement{position:absolute;width:112px;height:112px;transform:translate(-50%,-50%);pointer-events:none;z-index:43;perspective:500px}
.studio-sticker-backing{position:absolute;inset:3px;background:#eee6d3;border:1px solid #bdb49f;border-radius:9px;box-shadow:2px 8px 10px #0003;transform-origin:left bottom;animation:sticker-backing .8s ease-out both}
@keyframes sticker-backing{0%,12%{opacity:1;transform:rotateY(-12deg) rotate(-8deg)}65%,100%{opacity:0;transform:translate(-75px,28px) rotateY(-65deg) rotate(-32deg)}}
.studio-search{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;font:700 9px var(--mono);margin:12px 0}
.studio-search input{min-width:0;min-height:44px;width:100%;border:1px solid #8e978b;background:#fffaf0;color:#182d31;padding:8px;font:500 13px var(--text)}
@media(prefers-reduced-motion:reduce){.studio-sticker-backing{display:none;animation:none}}
@media (prefers-reduced-motion:reduce) { .studio-sticker-stamp {animation:sticker-land-static .8s linear both;}@keyframes sticker-land-static{0%,70%{opacity:1;transform:translate(-50%,-50%) scale(.94)}100%{opacity:0;transform:translate(-50%,-50%) scale(.94)}} }
/* Tap targets on the sticker shortcut and audio listening desk. */
.studio-quick,.sound-tape-tracks button { min-height:44px; }

/* ---------- Phase 4 · collectible ateliers (integrated with the existing 3D viewer) ---------- */
.atelier-panel,.photo-panel,.booklet-panel,.archive-panel,.soundlab-panel,.lcd-panel,.disassembly-panel,.share-panel {position:absolute;z-index:8;top:70px;bottom:114px;right:max(14px,var(--sar));width:min(362px,calc(100vw - 28px));display:flex;flex-direction:column;overflow:hidden;background:#f4efdf;color:#17242b;box-shadow:0 24px 65px rgba(0,0,0,.39);border:1px solid rgba(234,213,164,.88);}
.atelier-panel[hidden],.photo-panel[hidden],.booklet-panel[hidden],.archive-panel[hidden],.soundlab-panel[hidden],.lcd-panel[hidden],.disassembly-panel[hidden],.share-panel[hidden] {display:none !important;}
.atelier-head {padding:17px 18px 16px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;background:#f9c454;border-bottom:3px solid #202c36;}
.atelier-head span {font:700 9px/1.4 var(--mono);letter-spacing:.08em;}
.atelier-head h2 {margin:7px 0 0;font:900 30px/.94 var(--display);letter-spacing:-.055em;}
.atelier-head h2 em {font-style:italic;color:#b03549;}
.atelier-head button {flex:0 0 44px;height:44px;background:#1d2630;color:#fff;border:0;font-size:26px;cursor:pointer;}
.atelier-scroll {padding:18px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;flex:1;min-height:0;}
.atelier-deck,.photo-panel .atelier-scroll>p {font:500 13px/1.55 var(--text);color:#3b484d;margin:0 0 17px;}
.atelier-field {display:grid;gap:6px;margin-bottom:15px;font:800 10px var(--mono);letter-spacing:.07em;}
.atelier-field select {border:1px solid #a8a69a;border-bottom:3px solid #202d39;min-height:44px;padding:9px 12px;color:#1f2835;background:#fff9ea;width:100%;font:700 12px var(--text);cursor:pointer;}
.atelier-swatch {height:88px;margin-top:12px;display:flex;align-items:end;justify-content:flex-end;padding:10px;color:#17242b;background:linear-gradient(110deg,#ffbf79 5%,#b9c5e5 28%,#74d9ca 47%,#a7599f 65%,#f0b757 88%);box-shadow:inset 0 0 0 9px rgba(255,255,255,.19);}
.atelier-swatch b {font:800 9px var(--mono);background:#f6eed8;padding:7px;}
.atelier-editions {margin-top:19px;border-top:2px solid #29343a;padding-top:14px;}
.atelier-editions h3 {font:900 12px var(--mono);margin:0 0 10px;}
.atelier-editions p {display:grid;gap:3px;padding:8px 0;border-bottom:1px solid #d6cbb6;font:700 10px/1.4 var(--mono);}
.atelier-editions span {color:#54625d;}
.atelier-reset {min-height:44px;width:100%;margin:15px 0 5px;background:transparent;border:1px solid #29343a;color:#29343a;font:800 10px var(--mono);cursor:pointer;}
.atelier-feedback {padding:11px 14px;background:#30323b;color:#fff2d4;font:700 10px/1.6 var(--mono);min-height:45px;}
.studio-card.is-locked {opacity:.56;filter:grayscale(.75);background:repeating-linear-gradient(135deg,#f0e7d8,#f0e7d8 7px,#e8ddcc 7px,#e8ddcc 14px);cursor:not-allowed;}
.studio-card.is-locked:after {content:'◆ BLOQUEADO';font:800 8px var(--mono);color:#712f43;}
.studio-relocate {min-height:44px;border:1px solid #39334c;background:#ffe5ba;color:#2b2435;font:900 10px var(--mono);cursor:pointer;}
.studio-editor small {font:650 10px/1.45 var(--mono);color:#655b63;}
.studio-placed-item {display:flex;gap:5px;align-items:center;}
.studio-placed-item.is-editing {background:#ffdfae;box-shadow:inset 3px 0 #dc5661;}
.studio-placed-item [data-sticker-edit] {flex:1;text-align:left;font:700 10px/1.45 var(--mono);cursor:pointer;padding:7px 8px;color:#2a3540;}
.studio-placed-item [data-sticker-front],.studio-placed-item [data-sticker-peel]{flex:0 0 44px;font:800 15px var(--mono);cursor:pointer;}
.studio-peel-vfx {position:absolute;z-index:44;pointer-events:none;font-size:35px;color:#ffedbe;transform:translate(-50%,-50%);animation:sticker-peel .65s ease-out forwards;text-shadow:0 5px 7px rgba(0,0,0,.4);}
@keyframes sticker-peel {from {opacity:1;transform:translate(-50%,-50%) rotate(-14deg) scale(1)}to {opacity:0;transform:translate(-40%,-250%) rotate(70deg) scale(.28)}}
/* Photo studio backgrounds remain inside the viewer. Live angle is captured from WebGL. */
.play-stage.is-photo-mode {background:radial-gradient(ellipse at 50% 32%,var(--photo-light,#e1dcbf),var(--photo-color,#e7dcbf) 90%);}
.play-stage.is-photo-mode .inspect-surface {background:transparent;}
.photo-backgrounds {border:0;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.photo-backgrounds legend,.photo-pose>span,.photo-light {font:800 10px/1.5 var(--mono);letter-spacing:.03em;margin-bottom:9px;}
.photo-backgrounds button {min-height:73px;display:grid;justify-items:center;gap:5px;padding:7px 3px;cursor:pointer;border:2px solid transparent;background:#e7e1d2;color:#2e3436;font:700 9px/1.1 var(--mono);}
.photo-backgrounds button[aria-pressed="true"] {border-color:#c03749;background:#fff1d2;}
.photo-backgrounds button i {width:40px;height:28px;display:block;border:1px solid rgba(0,0,0,.16);background:var(--tone);}
.photo-backgrounds button span {text-align:center;}
.photo-pose {display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0 20px;}
.photo-pose>span {grid-column:1/-1;margin:0;}
.photo-pose button {min-height:44px;background:#f1e9da;color:#1e2930;border:1px solid #c8b7a5;cursor:pointer;font:800 11px var(--mono);}
.photo-light {display:flex;justify-content:space-between;align-items:center;gap:15px;}
.photo-light input {flex:1;accent-color:#bd4c5d;}
.photo-download {min-height:52px;width:100%;display:flex;align-items:center;justify-content:space-between;border:0;padding:0 18px;margin-top:20px;background:#232f3c;color:#fff1d6;cursor:pointer;font:800 12px var(--mono);}
.photo-info {margin-top:10px !important;font:600 10px/1.4 var(--mono) !important;}
.archive-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; margin:18px 0; }
.archive-grid p { margin:0; padding:10px 11px; background:#fff8e8; border:1px solid #e3d8c3; display:grid; gap:5px; }
.archive-grid strong,.archive-story h3,.soundlab-section h3 { font:900 10px/1.2 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.archive-grid span { font:700 11px/1.35 var(--text); color:#2c3840; }
.archive-story { margin-top:16px; }
.archive-story p,.archive-story li,.soundlab-section p { font:500 13px/1.6 var(--text); color:#2b3840; }
.archive-story ul { margin:10px 0 0; padding-left:22px; }
.soundlab-section + .soundlab-section { margin-top:18px; }
.soundlab-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px; }
.soundlab-buttons button { min-height:44px; border:1px solid #29333d; background:#fff9ec; color:#1e2a32; font:800 10px/1.25 var(--mono); cursor:pointer; padding:9px 10px; text-align:left; }
.soundlab-buttons button[aria-pressed="true"] { background:#202c36; color:#fff4da; }
/* Collectible card-box: a flat editorial interpretation, not an unlicensed scan. */
.toy-pack {position:relative;padding:16px 15px 18px;min-height:320px;border:8px solid #f1d56d;outline:2px solid #26364d;background:linear-gradient(160deg,#2646b3 0%,#17275c 80%);color:#fff3d8;box-shadow:8px 9px 0 #bf593d;}
.pack-flap {display:block;font:700 9px var(--mono);letter-spacing:.12em;border-bottom:1px solid #8194c1;padding-bottom:10px;}
.pack-window {height:146px;margin:15px 2px 12px;background:#ebe1ce;border:7px solid #dfdbcd;overflow:hidden;}
.pack-window img {width:100%;height:100%;object-fit:contain;}
.toy-pack h3 {font:900 36px/.92 var(--display);letter-spacing:-.055em;text-transform:uppercase;}
.toy-pack>p {font:600 12px/1.4 var(--text);margin:7px 0;}
.pack-serial {display:block;margin-top:10px;font:800 9px var(--mono);color:#f5c772;}
.booklet-copy {margin-top:30px;font:500 13px/1.6 var(--text);}
.booklet-copy>span {font:800 10px var(--mono);}
.booklet-copy h3 {font:850 24px/1.1 var(--display);letter-spacing:-.02em;margin:17px 0 8px;}
.booklet-copy ol,.booklet-copy ul {padding-left:24px;}
.booklet-copy li {margin-bottom:8px;}
.pack-content {border-top:1px solid #9f9f94;margin:15px 0 0;padding-top:12px;}
.pack-note {margin:12px 0;color:#766e68;font:600 10px/1.5 var(--mono);}
@media(max-width:760px){
 .inspect-controls {justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;padding-bottom:2px;overscroll-behavior-x:contain;}
 .inspect-controls::-webkit-scrollbar {display:none;}
 .inspect-controls button {flex:0 0 auto;padding-inline:10px;font-size:10px;}
 .atelier-panel,.photo-panel,.booklet-panel,.archive-panel,.soundlab-panel,.lcd-panel,.disassembly-panel,.share-panel {top:auto;left:50%;right:auto;bottom:max(85px,calc(var(--sab) + 66px));height:min(50vh,435px);width:calc(100vw - 20px);transform:translateX(-50%);}
 .atelier-head {padding:12px 14px;}
 .atelier-head h2 {font-size:23px;}
 .atelier-scroll {padding:13px;}
 .photo-backgrounds {grid-template-columns:repeat(3,1fr);}
 .toy-pack {min-height:270px;}
}
@media(max-height:530px) and (max-width:760px){.atelier-panel,.photo-panel,.booklet-panel,.archive-panel,.soundlab-panel,.lcd-panel,.disassembly-panel,.share-panel {height:min(45vh,250px);bottom:70px;}}
@media(prefers-reduced-motion:reduce){.studio-peel-vfx {animation:none;display:none;}}

@media (max-width: 1000px) { .collection-dashboard { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width: 700px) { .collection-dashboard { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.lcd-panel [data-screen-theme] { display:grid; gap:5px; }
.lcd-panel [data-screen-theme] strong { font:800 11px/1.2 var(--mono); }
.lcd-panel [data-screen-theme] small { font:500 10px/1.35 var(--text); opacity:.78; }
.lcd-panel [data-screen-theme][aria-pressed="true"] { background:#202c36; color:#fff4da; outline:2px solid #202c36; outline-offset:2px; }

/* Local arcade: daily challenges and pass-and-play tournament. */
.arcade-hub { padding: clamp(28px,5vw,62px) 0; border-top:1px solid var(--catalogue-ink); border-bottom:1px solid var(--catalogue-ink); }
.arcade-hub-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.arcade-hub-head h2 { margin:8px 0 10px; font:900 clamp(34px,5vw,64px)/.9 var(--display); letter-spacing:-.055em; }
.arcade-hub-head h2 em { color:var(--catalogue-red); font-style:normal; }
.arcade-hub-head p:not(.section-index) { max-width:560px; margin:0; color:var(--catalogue-ink-2); font:500 14px/1.55 var(--text); }
.arcade-stamp { display:grid; place-items:center; width:82px; height:82px; flex:0 0 auto; border:2px solid var(--catalogue-red); border-radius:50%; color:var(--catalogue-red); text-align:center; font:900 11px/1.15 var(--mono); transform:rotate(9deg); }
.daily-challenge-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.daily-challenge { min-width:0; padding:16px; display:flex; flex-direction:column; min-height:180px; border:1px solid var(--catalogue-ink); background:var(--catalogue-paper-2); color:var(--catalogue-ink); transition:transform .22s ease,background .22s ease; }
.daily-challenge:hover { transform:translateY(-3px); background:var(--catalogue-paper-3); }
.daily-challenge.is-complete { background:#d8e5d7; }
.daily-index { color:var(--catalogue-red); font:700 8px/1.2 var(--mono); letter-spacing:.08em; }
.daily-challenge h3 { margin:12px 0 7px; font:900 20px/.98 var(--display); letter-spacing:-.03em; }
.daily-challenge p { margin:0 0 18px; color:var(--catalogue-ink-2); font:500 11px/1.45 var(--text); }
.daily-challenge-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; }
.daily-challenge-foot strong { font:800 9px/1.2 var(--mono); }
.daily-challenge-foot button,.local-tournament-actions button { min-height:38px; border:1px solid var(--catalogue-ink); padding:8px 10px; background:var(--catalogue-ink); color:var(--catalogue-paper); font:800 9px/1 var(--mono); cursor:pointer; }
.daily-challenge-foot button:disabled { opacity:.55; cursor:default; }
.local-tournament-card { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:14px; padding:20px; border:1px solid var(--catalogue-ink); background:var(--catalogue-paper-3); }
.local-tournament-card h3 { margin:7px 0 5px; font:900 clamp(20px,2.8vw,30px)/1 var(--display); }
.local-tournament-card p { margin:0; color:var(--catalogue-ink-2); font:500 12px/1.45 var(--text); }
.local-tournament-actions { display:flex; flex-wrap:wrap; gap:8px; }
.local-tournament-actions button + button { background:transparent; color:var(--catalogue-ink); }
.tournament-dialog { width:min(560px,calc(100vw - 24px)); max-width:none; max-height:min(88dvh,820px); padding:0; border:1px solid #d2c7ae; background:#f4efdf; color:#1c292d; box-shadow:0 28px 90px rgba(0,0,0,.45); }
.tournament-dialog::backdrop { background:rgba(9,16,20,.72); backdrop-filter:blur(5px); }
.tournament-dialog-card { padding:clamp(18px,4vw,32px); }
.tournament-intro { margin:12px 0 20px; color:#465357; font:500 13px/1.55 var(--text); }
.tournament-field { display:grid; gap:7px; min-width:0; }
.tournament-field span { color:#697475; font:800 9px/1.2 var(--mono); letter-spacing:.08em; }
.tournament-field input,.tournament-field select { width:100%; min-height:44px; border:1px solid #b8b09e; border-radius:0; padding:10px 12px; background:#fff9ec; color:#1c292d; font:600 13px var(--text); }
.tournament-players { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.tournament-feedback { min-height:18px; margin:12px 0 0; color:#a33f32; font:700 10px/1.4 var(--mono); }
.tournament-dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.tournament-dialog-actions button { min-height:42px; padding:9px 14px; border:1px solid #26343a; background:transparent; color:#26343a; font:800 10px var(--mono); cursor:pointer; }
.tournament-dialog-actions button:last-child { background:#26343a; color:#f4efdf; }
.play-top-actions .tournament-next-button { border-color:#b64b3d; color:#b64b3d; }
@media(max-width:1050px){.daily-challenge-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.arcade-hub-head{align-items:flex-start}.arcade-stamp{width:62px;height:62px;font-size:9px}.daily-challenge-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.daily-challenge{padding:12px;min-height:168px}.daily-challenge h3{font-size:17px}.daily-challenge-foot{align-items:flex-start;flex-direction:column}.daily-challenge-foot button{width:100%}.local-tournament-card{align-items:flex-start;flex-direction:column;padding:15px}.local-tournament-actions{width:100%}.local-tournament-actions button{flex:1}.tournament-players{grid-template-columns:1fr}.tournament-dialog-actions button{flex:1}}
@media(prefers-reduced-motion:reduce){.daily-challenge{transition:none}.daily-challenge:hover{transform:none}}

/* Service bench: physical disassembly steps and functional repairs. */
.disassembly-progress{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;margin:8px 0 18px}
.disassembly-progress span{height:5px;background:#c7c1b5;transform:skewX(-16deg);transition:background .18s}
.disassembly-progress span.is-active{background:#ba464e}
.disassembly-stage{display:grid;gap:8px;margin:18px 0;font:650 13px/1.45 var(--text)}
.disassembly-stage>b{font:900 10px var(--mono);color:#b53d4d}
.disassembly-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.disassembly-nav button,.disassembly-service button{min-height:46px;padding:8px 10px;border:1px solid #26363a;background:#26343a;color:#f6f0e4;font:800 10px var(--mono);cursor:pointer}
.disassembly-nav button:first-child{background:#faf4e8;color:#26343a}
.disassembly-nav button:disabled,.disassembly-service button:disabled{opacity:.42;cursor:default}
.disassembly-service{border-top:2px solid #27333a;margin-top:20px;padding-top:15px;display:grid;gap:8px}
.disassembly-service h3{font:900 12px var(--mono);margin:0}
.disassembly-service p{font:500 12px/1.5 var(--text);margin:0 0 6px}
.disassembly-service button{display:flex;justify-content:space-between;align-items:center;text-align:left}
.disassembly-service small{display:block;padding:10px;background:#e5e0d3;font:700 10px/1.4 var(--mono)}
.secret-toast{position:absolute;z-index:55;top:20%;left:50%;width:min(440px,calc(100% - 24px));padding:18px 22px;transform:translateX(-50%);background:#f9c454;border:3px solid #1a2931;box-shadow:8px 8px 0 #af4553;color:#1a2931;font:900 14px/1.3 var(--mono);text-align:center;pointer-events:none;animation:secret-reveal .35s cubic-bezier(.15,.83,.3,1) both}
@keyframes secret-reveal {from{opacity:0;transform:translate(-50%,-15px) rotate(-4deg) scale(.9)}to{opacity:1;transform:translate(-50%,0) rotate(-2deg) scale(1)}}
@media(prefers-reduced-motion:reduce){.disassembly-progress span,.disassembly-body,.secret-toast{transition:none;animation:none}}

/* TB99 Archive / autonomous museum vitrine, no GPU or external images. */
.showcase-collection{margin:0 auto;max-width:1500px;padding:clamp(32px,7vw,94px) clamp(12px,4vw,60px) clamp(42px,6vw,80px);color:var(--catalogue-ink);border-top:1px solid var(--catalogue-ink)}
.showcase-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px}
.showcase-heading h2{font:900 clamp(40px,7vw,84px)/.9 var(--display);letter-spacing:-.064em;margin:9px 0 0}
.showcase-heading h2 em{color:var(--catalogue-red);font-style:italic}
.showcase-heading>p{max-width:365px;font:500 14px/1.55 var(--text);color:var(--catalogue-ink-2);margin:0}
.showcase-stage{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.75fr);min-height:460px;background:linear-gradient(135deg,#1e2f37 0%,#25383f 54%,#223238 100%);position:relative;overflow:hidden;color:#f6f0de;border:1px solid rgba(255,247,223,.08)}
.showcase-details{display:flex;flex-direction:column;justify-content:center;padding:clamp(26px,5vw,74px) clamp(22px,4vw,58px)}
.showcase-details>span:first-child{font:800 10px var(--mono);color:#d9b569;letter-spacing:.09em}
.showcase-details strong{font:900 clamp(44px,5vw,75px)/.86 var(--display);letter-spacing:-.062em;margin:20px 0 12px}
.showcase-details p{font:600 14px/1.6 var(--text);color:#e9e2d2;max-width:420px}
.showcase-details [data-showcase-tagline]{font:700 16px/1.25 var(--display);color:#f8cd75}
.showcase-details-footer{display:grid;gap:22px;margin-top:26px;border-top:1px solid #758184;padding-top:20px}
.showcase-details-footer span{font:800 10px var(--mono);letter-spacing:.08em;color:#c8c1b5}
.showcase-details-footer button{border:1px solid #f6edd7;padding:17px 14px;background:#eebd52;color:#17252a;text-align:left;font:900 12px var(--mono);cursor:pointer;min-height:48px}
.showcase-controls{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:stretch;background:#f6eedc;border:1px solid var(--catalogue-ink);border-top:0;padding:14px}
.showcase-select{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.showcase-select button{border:1px solid #bbc0b8;padding:12px 8px;min-height:74px;background:linear-gradient(180deg,#f7f2e8 0%,#e8e1d0 100%);cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;align-items:start;text-align:left;gap:8px;color:#203139;min-width:0;position:relative;overflow:hidden}
.showcase-select button::after{content:'';position:absolute;left:8px;right:8px;bottom:8px;height:3px;background:rgba(24,45,49,.09)}
.showcase-select button[data-media-kind="vector"]{background:linear-gradient(180deg,#f7f4ec 0%,#ece8df 100%)}
.showcase-select button b{font:900 10px var(--mono);color:#af4148}
.showcase-select button span{font:800 10px/1.2 var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.showcase-select button[aria-pressed="true"]{background:#b63f4d;border-color:#9b3040;color:#fff5e2}
.showcase-select button[aria-pressed="true"] b{color:#ffd880}
.showcase-play-toggle{min-width:125px;border:1px solid #29333a;background:#f6eacb;color:#26343d;cursor:pointer;font:800 10px var(--mono)}
.showcase-timeline{padding-top:24px;display:grid;grid-template-columns:140px minmax(0,1fr);gap:20px;align-items:start}
.showcase-timeline-label{font:800 10px/1.5 var(--mono);color:#b14c4e}
.showcase-timeline-items{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:0;border-top:2px solid #242c32}
.showcase-timeline-items button{display:grid;align-content:start;gap:4px;min-width:0;min-height:88px;text-align:left;background:none;border:0;border-left:1px solid #aba99f;padding:14px 7px;color:#354248;cursor:pointer}
.showcase-timeline-items b{font:900 17px var(--display)}.showcase-timeline-items span{font:800 9px var(--mono);color:#a44144}.showcase-timeline-items small{font:600 10px/1.2 var(--text)}
.showcase-timeline-items button[aria-pressed="true"]{background:#f1d1aa}
@media(max-width:980px){.showcase-stage{grid-template-columns:1fr 1fr}.showcase-select{grid-template-columns:repeat(4,1fr)}.showcase-timeline-items{grid-template-columns:repeat(4,1fr);row-gap:6px}.showcase-timeline-items button{border-bottom:1px solid #a7a69c}}
@media(max-width:700px){.showcase-heading{align-items:start;flex-direction:column}.showcase-stage{grid-template-columns:1fr}.showcase-details{padding:22px}.showcase-details strong{font-size:46px;margin:8px 0}.showcase-details p{margin:6px 0;font-size:12px}.showcase-details-footer{margin-top:12px;gap:8px}.showcase-details-footer button{width:100%}.showcase-controls{display:flex;flex-direction:column}.showcase-select{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin}.showcase-select button{min-width:94px;scroll-snap-align:start}.showcase-play-toggle{min-height:44px}.showcase-timeline{grid-template-columns:1fr;gap:8px}.showcase-timeline-items{grid-template-columns:repeat(4,minmax(0,1fr))}.showcase-timeline-items b{font-size:14px}.showcase-timeline-items small{font-size:9px}}


/* Design transfer: local QR & file exchange. Inputs remain legible on Safari. */
.share-qr-wrap {display:grid;justify-items:center;gap:9px;padding:15px 10px;margin:15px auto 18px;max-width:315px;background:#fffdf6;border:2px solid #24343c;box-shadow:7px 7px 0 #ddc9a0}
.share-qr-wrap canvas {display:block;width:min(100%,256px);height:auto;aspect-ratio:1;image-rendering:pixelated}
.share-qr-wrap canvas[hidden]{display:none}
.share-qr-wrap span{font:800 9px/1.3 var(--mono);color:#53626b;letter-spacing:.07em;text-align:center}
.share-field {display:grid;gap:8px;font:800 10px/1.3 var(--mono);letter-spacing:.06em;margin:16px 0}
.share-field textarea, .share-field input {display:block;box-sizing:border-box;width:100%;max-width:100%;min-height:44px;padding:11px;background:#fff9e8;border:1px solid #9c9f98;color:#23333b;font:500 16px/1.3 var(--text)}
.share-field textarea{min-height:75px;resize:vertical;word-break:break-all}
.share-field small{color:#526167;letter-spacing:0;font:500 11px/1.45 var(--text)}
.share-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.share-actions button{min-height:48px;padding:11px 9px;background:#27343d;color:#fff4dc;border:1px solid #27343d;font:800 10px/1.2 var(--mono);cursor:pointer;text-align:left}
.share-actions button:hover,.share-actions button:focus-visible {background:#bc4d51;color:#fff}
.share-status{padding:12px 11px;border-left:4px solid #d5a64d;background:#e8e1cf;font:650 11px/1.45 var(--text);color:#27343d}
@media(max-width:400px){.share-qr-wrap{padding:10px;max-width:245px}.share-actions button{font-size:9px}}

/* FINAL EDIT / OCT 2026: let the object breathe. Less UI, more product. */
.front-render { animation:none !important; }
.front-cover::after { animation:none !important; }
.collection-progress {border-top:1px solid var(--catalogue-ink);margin:2px 0 17px;color:var(--catalogue-ink)}
.collection-progress summary {cursor:pointer;min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:14px;list-style:none;font:750 12px var(--mono);}
.collection-progress summary::-webkit-details-marker {display:none;}
.collection-progress summary span {font-size:20px;font-weight:400;transition:transform .15s ease;}
.collection-progress[open] summary span {transform:rotate(45deg);}
.collection-dashboard {grid-template-columns:repeat(5,minmax(0,1fr));margin:0 0 12px;gap:0;border:1px solid var(--catalogue-ink)}
.collection-dashboard article{border:0;border-right:1px solid #c7c0b3;background:transparent;padding:13px 12px;}
.collection-dashboard article:last-child{border-right:0}
.collection-dashboard strong{font-size:clamp(18px,2vw,26px);margin-top:6px;}
.collection-dashboard small{display:none}
.showcase-heading>p{display:none}
.showcase-note{border-top:1px solid rgba(246,237,215,.23);padding:12px 0 0;margin-top:6px;}
.showcase-note summary{cursor:pointer;font:800 11px var(--mono);color:#f3d592;list-style:none;min-height:30px}
.showcase-note summary::-webkit-details-marker{display:none}
.showcase-note summary::after{content:' +';}
.showcase-note[open] summary::after{content:' −'}
.showcase-note p{font-size:12px !important;opacity:.8;margin:2px 0 12px !important}
.showcase-controls{display:block}
/* The service workbench is a narrow instrument tray, not a modal over the 3D object. */
.disassembly-panel {top:max(94px,var(--sat)) !important;bottom:auto !important;right:max(14px,var(--sar)) !important;left:auto !important;width:min(288px,calc(100vw - 28px)) !important;max-height:min(440px,calc(100dvh - 215px));height:auto !important;transform:none !important; background:#f0ebdd;border:1px solid rgba(226,216,196,.9);box-shadow:0 12px 36px rgba(0,0,0,.27);color:#202e33;}
.disassembly-panel .atelier-head{background:#e9dfcc;border-bottom:1px solid #c8bca9;padding:11px 13px 10px;align-items:center;}
.disassembly-panel .atelier-head span{font:800 9px var(--mono);color:#796b57;letter-spacing:.06em}
.disassembly-panel .atelier-head h2{font:850 20px/1 var(--display);margin:3px 0 0;letter-spacing:-.035em}
.disassembly-panel .atelier-head button{width:40px;height:40px;flex:0 0 40px;font-size:23px;border:1px solid #354149;background:none;color:#354149}
.disassembly-body-controls{display:grid;gap:8px;overflow:auto;min-height:0;padding:12px 13px 10px;overscroll-behavior:contain;touch-action:pan-y}
.disassembly-stage{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0;font:700 11px/1.25 var(--text)}
.disassembly-stage b{font:900 11px var(--mono);color:#b24d50;white-space:nowrap}
.disassembly-stage span:last-child{text-align:right}
.disassembly-progress{margin:0;gap:4px}
.disassembly-progress span{height:4px;transform:none}
.disassembly-nav{gap:5px}
.disassembly-nav button{min-height:42px;padding:6px 10px;font:800 11px var(--mono);border-radius:2px}
.disassembly-service{border-top:1px solid #c8bca9;margin:3px 0 0;padding:9px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.disassembly-service button{min-height:42px;padding:6px 4px;border-radius:2px;display:flex;gap:3px;flex-wrap:wrap;justify-content:center;text-align:center;font:750 9px/1.1 var(--mono)}
.disassembly-body-controls>small{display:block;min-height:12px;font:500 10px/1.25 var(--text);color:#536167}
.play-stage.is-disassembling .device-canvas{transform:translateX(-7vw) scale(.88);transform-origin:50% 44%;transition:transform .36s cubic-bezier(.2,.8,.2,1)}
.disassembly-panel:not([hidden]){animation:service-tray .22s cubic-bezier(.25,.8,.25,1) both}
@keyframes service-tray{from{opacity:.5;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@media(max-width:1000px){.collection-dashboard{grid-template-columns:repeat(3,minmax(0,1fr))}.collection-dashboard article{border-bottom:1px solid #c7c0b3}}
@media(max-width:700px){
 .collection-dashboard{grid-template-columns:repeat(2,minmax(0,1fr))}
 .showcase-stage{grid-template-columns:1fr}
 .disassembly-panel{top:auto !important;left:max(8px,var(--sal)) !important;right:max(8px,var(--sar)) !important;bottom:max(80px,calc(var(--sab) + 66px)) !important;width:auto !important;max-height:min(31dvh,275px);}
 .disassembly-panel .atelier-head{padding:6px 10px}
 .disassembly-panel .atelier-head h2{font-size:18px}
 .disassembly-body-controls{padding:9px 10px;gap:7px}
 .disassembly-service{padding-top:7px}
 .play-stage.is-disassembling .device-canvas{transform:translateY(-7vh) scale(.82);transform-origin:50% 43%;}
}
@media(max-height:540px){.disassembly-panel{max-height:43dvh;}.play-stage.is-disassembling .device-canvas{transform:translateY(-4vh) scale(.82)}}
@media(prefers-reduced-motion:reduce){
.disassembly-panel:not([hidden]){animation:none !important}.play-stage.is-disassembling .device-canvas{transition:none}.collection-progress summary span{transition:none}}

/* Service actions appear only once the physical cover is open. */
.disassembly-service[hidden]{display:none !important;}
@media(max-width:700px){.disassembly-panel{bottom:max(146px,calc(var(--sab) + 132px)) !important;}}

/* Static art-directed product photograph: no perpetual bobbing or fake 'AI' gleam. */
.front-render {animation:none !important;filter:none;}
.front-cover::after {animation:none !important;opacity:.06;}
@media (prefers-reduced-motion:reduce) {.front-liquid canvas {opacity:.6;}}

/* TB99 archival finish / physical carton and studio light. */
.front-cover{isolation:isolate}
.front-art{background:linear-gradient(135deg,#f0eae0,#e5e2d6 58%,#d8d6cc)}
.front-art::before,.toy-pack::after{content:"";position:absolute;inset:0;background-image:url('../assets/img/stock-grain.png');background-size:160px 160px;mix-blend-mode:multiply;opacity:.11;z-index:3;pointer-events:none}
.front-art::before{opacity:.075;z-index:2}
.front-liquid{mix-blend-mode:screen;opacity:.92}
.front-product-launch:hover .front-render{transform:translate3d(0,-2px,0) scale(1.005)}
.front-render{transition:transform .36s cubic-bezier(.2,.76,.2,1)!important}
/* Printed folding carton, imperfect stock, die-cut hanging tab and PET blister. */
.toy-pack{isolation:isolate;margin:22px 4px 26px;padding:28px 21px 20px;min-height:380px;overflow:visible;border:8px solid #e3cc80;outline:1px solid #1a283d;background:linear-gradient(124deg,#3053bd,#182f71 61%,#122653);box-shadow:2px 2px 0 #ad9967,8px 9px 0 #c04d37,13px 16px 25px rgba(15,24,37,.22);transform:perspective(1400px) rotateY(-2.5deg);transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s ease}
.toy-pack:hover{transform:perspective(1400px) rotateY(0) rotateX(1deg);box-shadow:2px 2px 0 #ad9967,8px 9px 0 #c04d37,10px 15px 20px rgba(15,24,37,.19)}
.toy-pack::before{content:"";position:absolute;left:50%;transform:translateX(-50%);width:92px;height:24px;top:-33px;border:8px solid #e3cc80;background:#3053bd;clip-path:polygon(0 100%,12% 0,88% 0,100% 100%);z-index:0}
.toy-pack::after{opacity:.22;z-index:0}
.toy-pack>*{position:relative;z-index:1}
.toy-pack .pack-flap{display:flex;align-items:center;justify-content:space-between;min-height:29px;border-bottom:1px solid rgba(234,225,184,.5);font-size:10px}
.pack-window{position:relative;height:208px;margin:14px 0 17px;border:7px solid #e6e2da;border-radius:10px 10px 26px 26px;background:linear-gradient(142deg,#f8f4ed,#e0dccf);box-shadow:inset 0 0 0 2px rgba(60,59,55,.13),0 10px 20px rgba(8,17,42,.34),0 1px 0 rgba(255,255,255,.75);transform:perspective(700px) rotateX(1.5deg)}
.pack-window::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(118deg,rgba(255,255,255,.6) 0%,transparent 30%,rgba(255,255,255,.12) 40%,transparent 66%,rgba(255,255,255,.35) 100%);box-shadow:inset 4px 4px 7px rgba(255,255,255,.6),inset -5px -5px 11px rgba(54,59,70,.1)}
.pack-window img{position:relative;z-index:1;max-height:100%;object-fit:contain;}
.toy-pack h3{font-size:clamp(27px,5vw,41px);line-height:.98;text-shadow:0 1px 0 rgba(9,23,55,.3)}
.toy-pack>p{max-width:24ch;font-size:12px;line-height:1.4;color:#eee7d2}
.pack-serial{letter-spacing:.09em;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;color:#f7d27d;border-top:1px solid rgba(244,214,127,.4);padding-top:9px}
.pack-barcode{display:block;height:26px;max-width:144px;margin-top:12px;background:repeating-linear-gradient(90deg,#f5eedf 0 1px,transparent 1px 3px,#f5eedf 3px 5px,transparent 5px 7px,#f5eedf 7px 8px,transparent 8px 11px);opacity:.77}
.pack-corner{position:absolute;right:12px;top:13px;z-index:4;border:1px solid #efce66;background:#fdce58;color:#252b34;padding:5px 7px;font:850 8px/1 var(--mono);transform:rotate(4deg)}
.booklet-copy{border-left:1px dashed rgba(44,54,63,.22);padding-left:16px;margin-left:6px}
@media(max-width:700px){.toy-pack{margin:12px 1px 22px;padding:18px 13px 16px;border-width:6px;min-height:300px}.toy-pack::before{top:-26px;border-width:6px;width:75px;height:20px}.pack-window{height:176px}}
@media(prefers-reduced-motion:reduce){.toy-pack,.toy-pack:hover{transform:none!important;transition:none!important}}



/* Factory test lives with LCD settings instead of crowding the inspection toolbar. */
.lcd-factory-action{margin-top:14px;width:100%;min-height:48px;text-align:left;padding:12px 16px;background:#e2bd67;border:1px solid #23363c;color:#23363c;font:850 11px var(--mono);cursor:pointer}
.lcd-factory-action:active{transform:translateY(1px)}

/* Final collection experience — packaging, tactile shelf, service macro, standby. */
.toy-special-actions{display:flex;gap:5px;padding:8px 12px 11px;background:var(--paper,#f0eadb);border-top:1px solid rgba(29,44,45,.18)}
.toy-special-actions button{flex:1;min-height:35px;border:1px solid rgba(37,55,57,.4);background:transparent;color:#20333a;font:750 10px/1.2 var(--mono,monospace);cursor:pointer;letter-spacing:.03em}
.toy-special-actions button:hover{background:#253c41;color:#f6e9ca}.toy-special-actions button:active{transform:translateY(1px)}
.unbox-dialog{box-sizing:border-box;position:fixed;inset:0;width:min(940px,calc(100vw - 30px));max-width:none;max-height:min(90dvh,790px);margin:auto;padding:0;border:1px solid #e2d3b5;background:#e9e0cb;color:#203039;box-shadow:0 40px 100px rgba(0,0,0,.6);overflow:auto}
.unbox-dialog::backdrop{background:rgba(8,16,20,.82);backdrop-filter:blur(5px)}
.unbox-head{height:54px;padding:0 25px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(17,32,36,.18);font:800 10px var(--mono,monospace);letter-spacing:.11em}
.unbox-head button{font:400 32px/1 sans-serif;background:none;border:0;cursor:pointer;color:inherit;padding:10px}
.unbox-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(250px,.8fr);min-height:510px}
.unbox-object{position:relative;min-width:0;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 34%,#d7dbc9,#7e9390 53%,#2f464e 100%);display:flex;justify-content:center;align-items:center;perspective:900px}
.unbox-object::before{content:'';position:absolute;left:14%;right:14%;bottom:11%;height:28px;border-radius:50%;background:rgba(12,30,30,.3);filter:blur(17px)}
.unbox-carton{position:absolute;z-index:5;inset:12% 13%;padding:32px;background:linear-gradient(125deg,#244c89,#1c3465 67%,#172a56);color:#f5e6ca;border:12px solid #e8c755;outline:2px solid #193345;box-shadow:14px 17px 8px rgba(8,19,33,.26);display:flex;flex-direction:column;justify-content:space-between;transform:rotate(-4deg) rotateY(-8deg);transition:transform .7s cubic-bezier(.22,.76,.2,1),opacity .45s}
.unbox-carton small,.unbox-carton>span{font:750 10px/1.4 var(--mono,monospace);letter-spacing:.13em}
.unbox-carton strong{font:900 clamp(32px,6vw,70px)/.85 var(--display,system-ui);text-transform:uppercase;max-width:8ch;letter-spacing:-.065em}
.unbox-object img{width:min(72%,300px);height:80%;object-fit:contain;position:relative;z-index:2;transform:translateY(12px) scale(.93);transition:transform .8s cubic-bezier(.16,.8,.2,1),filter .8s}
.unbox-object img::before{content:none}
.unbox-blister{position:absolute;inset:9% 17%;z-index:4;pointer-events:none;border-radius:47% 47% 21% 21%;border:4px solid rgba(249,251,250,.38);background:linear-gradient(112deg,rgba(255,255,255,.4),rgba(255,255,255,.04) 38%,rgba(255,255,255,.22) 70%,transparent);box-shadow:inset 10px 6px 12px rgba(255,255,255,.18),inset -14px -15px 20px rgba(21,44,58,.18),9px 12px 20px rgba(6,24,25,.23);transition:transform .85s cubic-bezier(.2,.74,.23,1),opacity .55s}
.unbox-film{position:absolute;z-index:3;top:29%;left:26%;right:26%;height:36%;border-radius:12px;background:linear-gradient(115deg,rgba(255,255,255,.22),rgba(204,235,218,.64));border:1px solid rgba(255,255,255,.65);box-shadow:1px 3px 6px rgba(12,42,51,.15);display:flex;justify-content:center;align-items:center;transition:transform .7s cubic-bezier(.19,.78,.23,1),opacity .5s}
.unbox-film span{font:900 9px var(--mono,monospace);letter-spacing:.1em;transform:rotate(-10deg);opacity:.67}
.unbox-object[data-step="1"] .unbox-carton,.unbox-object[data-step="2"] .unbox-carton,.unbox-object[data-step="3"] .unbox-carton{transform:translate(-170%,50%) rotate(-28deg);opacity:0;pointer-events:none}
.unbox-object[data-step="2"] .unbox-blister,.unbox-object[data-step="3"] .unbox-blister{transform:translate(105%,12%) rotate(38deg);opacity:0}
.unbox-object[data-step="3"] .unbox-film{transform:translate(110%,-76%) rotate(60deg);opacity:0}
.unbox-object[data-step="3"] img{transform:translateY(0) scale(1.04);}
.unbox-instruction{padding:clamp(20px,5vw,64px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.unbox-index{font:800 11px var(--mono,monospace);letter-spacing:.15em;border-bottom:1px solid #4a5b5c;padding-bottom:9px}
.unbox-instruction h2{margin:36px 0 12px;font:900 clamp(31px,4vw,55px)/.96 var(--display,system-ui);letter-spacing:-.06em;text-transform:uppercase}
.unbox-instruction p{font:500 14px/1.6 var(--text,system-ui);min-height:50px;max-width:25ch}
.unbox-next,.unbox-play{width:100%;margin-top:35px;min-height:53px;background:#253f43;color:#f7eacf;border:0;text-align:left;padding:0 20px;font:850 12px var(--mono,monospace);cursor:pointer}
.unbox-next[hidden],.unbox-play[hidden]{display:none}
.unbox-skip{margin-top:16px;padding:12px 0;border:0;background:none;color:#394e51;text-decoration:underline;font:700 11px var(--mono,monospace);cursor:pointer}
.collection-shelf{padding:clamp(36px,7vw,100px) clamp(16px,6vw,88px);background:#182d31;color:#e7e4d3;overflow:hidden;position:relative}
.shelf-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}.shelf-heading span{font:800 10px var(--mono,monospace);letter-spacing:.13em}.shelf-heading p{font:500 12px var(--text,system-ui);opacity:.7}
.shelf-tools{display:flex;justify-content:space-between;gap:20px;align-items:center;font:700 10px var(--mono,monospace);letter-spacing:.08em;color:#c0c8c3}
.shelf-tools button{border:1px solid #7f9a98;color:inherit;background:none;padding:9px 14px;cursor:pointer}
.standby-layer{position:absolute;inset:0;z-index:18;background:rgba(9,22,25,.95);color:#d4e7d6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;pointer-events:auto}
.standby-layer[hidden]{display:none!important}
.standby-layer span{font:750 10px var(--mono,monospace);letter-spacing:.25em;opacity:.6}
.standby-layer strong{font:850 clamp(26px,4vw,50px) var(--display,system-ui)}
.standby-layer button{min-height:52px;background:#b6d5c3;color:#112729;border:0;padding:0 30px;cursor:pointer;font:850 12px var(--mono,monospace)}
.play-stage.fault-contact-blink .play-status .status-dot{background:#e9b357!important;box-shadow:0 0 16px #fdb93d!important}
.inspect-controls [data-action="macro-toggle"][aria-pressed="true"]{background:#e2ba6c;color:#243a40;border-color:#e2ba6c}
@media(max-width:700px){.toy-special-actions{padding:6px}.toy-special-actions button{font-size:8px;min-height:33px}.unbox-dialog{width:calc(100vw - 14px);max-height:90dvh}.unbox-head{height:40px;padding-inline:14px}.unbox-layout{display:block;min-height:0}.unbox-object{height:min(48dvh,390px)}.unbox-carton{inset:12% 19%;padding:19px;border-width:7px}.unbox-instruction{padding:18px 22px 25px}.unbox-instruction h2{font-size:29px;margin:14px 0 6px}.unbox-instruction p{min-height:0;font-size:12px}.unbox-next,.unbox-play{margin-top:14px;min-height:47px}.unbox-film span{font-size:7px}.collection-shelf{padding:34px 12px}.shelf-heading p{font-size:10px}}
@media(prefers-reduced-motion:reduce){
.unbox-object *{transition:none!important}}


/* Studio photography. Previous cutout/matte rules were removed, not covered up.
   Both sizes are RGB photographs with the lighting and contact shadow rendered
   with the actual model. No CSS blending, filters, masks or synthetic shadow. */
.toy-render{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#c7cbc4}
.showcase-stage{grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr)}
.showcase-visual{position:relative;min-width:0;aspect-ratio:3/4;background:#c7cbc4}
.showcase-visual img{display:block;width:100%;height:100%;object-fit:contain}
.showcase-watermark{position:absolute;top:14px;left:16px;color:#243438;font:700 9px var(--mono);letter-spacing:.09em}
.showcase-select{grid-template-columns:repeat(6,minmax(0,1fr))}
.showcase-timeline-items{grid-template-columns:repeat(6,minmax(0,1fr))}
.shelf-space{position:relative;perspective:1400px;touch-action:pan-y;outline-offset:8px;margin:30px auto;max-width:1000px}
.shelf-rack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(var(--shelf-rows,3),auto);gap:20px;transform:rotateY(var(--shelf-yaw,0deg)) rotateX(var(--shelf-pitch,0deg));transition:transform .18s ease-out}
.shelf-slot{min-width:0}
.shelf-slot button{display:flex;flex-direction:column;width:100%;height:100%;padding:0;border:2px solid #7a8d88;background:#e4e5dd;color:#1b3034;text-align:left;cursor:pointer}
.shelf-slot img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;pointer-events:none}
.shelf-slot span{display:flex;align-items:center;min-height:44px;padding:8px 10px;font:700 10px/1.4 var(--mono);overflow-wrap:anywhere}
.shelf-slot button[aria-pressed="true"]{border-color:#ffd17a}
.shelf-slot button:focus-visible{outline:3px solid #ffd17a;outline-offset:4px}
.shelf-tools button,.toy-special-actions button{min-height:44px}
@media(max-width:980px){.showcase-select{grid-template-columns:repeat(4,minmax(0,1fr))}.showcase-timeline-items{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){.showcase-stage{grid-template-columns:1fr}.shelf-rack{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;gap:12px}.shelf-slot span{font-size:9px;padding:8px}.showcase-select{display:flex}.showcase-watermark{top:12px;left:12px}}
@media(prefers-reduced-motion:reduce){.shelf-rack{transition:none}}