/* 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-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%; }

/* Five objects, five different footprints: no repeated marketing cards. */
.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(12, minmax(0, 1fr)); grid-auto-rows: minmax(180px, auto); grid-auto-flow: dense; gap: 14px; }
.toy-entry { position: relative; 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: 100%; display: grid; 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: 220px; overflow: hidden; background: var(--catalogue-stock); }
.toy-render { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; mix-blend-mode: multiply; transform: scale(1); transition: transform .42s var(--ease-out); }
.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: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 17px 18px 16px; 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(25px, 3.1vw, 43px)/.88 var(--display); font-stretch: 118%; letter-spacing: -.045em; overflow-wrap: anywhere; }
.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); }
.toy-entry--feature { grid-column: span 7; grid-row: span 2; }
.toy-entry--feature .toy-launch { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
.toy-entry--feature .toy-photo { order: 2; min-height: 470px; }
.toy-entry--feature .toy-copy { order: 1; justify-content: center; padding: clamp(22px, 3vw, 38px); }
.toy-entry--feature .toy-title { font-size: clamp(40px, 5vw, 68px); }
.toy-entry--vertical { grid-column: span 5; }
.toy-entry--vertical .toy-launch { grid-template-rows: minmax(0, 1fr) auto; }
.toy-entry--vertical .toy-photo { min-height: 260px; }
.toy-entry--wide-left { grid-column: span 5; }
.toy-entry--wide-left .toy-launch { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.toy-entry--wide-left .toy-photo { order: 1; min-height: 255px; }
.toy-entry--wide-left .toy-copy { order: 2; justify-content: center; }
.toy-entry--wide-right { grid-column: span 7; }
.toy-entry--wide-right .toy-launch { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.toy-entry--wide-right .toy-photo { order: 2; min-height: 255px; }
.toy-entry--wide-right .toy-copy { order: 1; justify-content: center; }
.toy-entry--strip { grid-column: span 12; }
.toy-entry--strip .toy-launch { grid-template-columns: minmax(0, .43fr) minmax(0, .57fr); }
.toy-entry--strip .toy-photo { min-height: 210px; }
.toy-entry--strip .toy-render { object-fit: contain; }
.toy-entry--strip .toy-copy { justify-content: center; padding-inline: clamp(20px, 4vw, 54px); }
.toy-entry--strip .toy-title { font-size: clamp(32px, 4.5vw, 58px); }
.toy-entry .favorite-button { position: absolute; z-index: 4; top: 10px; right: 10px; 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-entry:hover .toy-render { transform: scale(1.035); }
}
.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; }
  .toy-entry--feature { grid-column: span 7; }
  .toy-entry--vertical { grid-column: span 5; }
  .toy-entry--wide-left, .toy-entry--wide-right { grid-column: span 6; }
  .toy-entry--strip { grid-column: span 12; }
  .toy-entry--feature .toy-photo { min-height: 410px; }
  .toy-entry--wide-left .toy-launch, .toy-entry--wide-right .toy-launch { grid-template-columns: 1fr; grid-template-rows: minmax(180px, 1fr) auto; }
  .toy-entry--wide-left .toy-photo, .toy-entry--wide-right .toy-photo { order: 0; min-height: 210px; }
  .toy-entry--wide-left .toy-copy, .toy-entry--wide-right .toy-copy { order: 0; }
}
@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: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 10px; }
  .toy-entry--feature { grid-column: 1 / -1; grid-row: auto; }
  .toy-entry--vertical, .toy-entry--wide-left, .toy-entry--wide-right, .toy-entry--strip { grid-column: span 1; grid-row: auto; }
  .toy-entry--feature .toy-launch { grid-template-columns: 1fr; grid-template-rows: 220px auto; }
  .toy-entry--feature .toy-photo { order: 0; min-height: 220px; }
  .toy-entry--feature .toy-copy { order: 0; justify-content: initial; padding: 15px; }
  .toy-entry--feature .toy-title { font-size: 39px; }
  .toy-entry--vertical .toy-launch, .toy-entry--wide-left .toy-launch, .toy-entry--wide-right .toy-launch { grid-template-columns: 1fr; grid-template-rows: 158px auto; }
  .toy-entry--vertical .toy-photo, .toy-entry--wide-left .toy-photo, .toy-entry--wide-right .toy-photo { min-height: 158px; order: 0; }
  .toy-entry--vertical .toy-copy, .toy-entry--wide-left .toy-copy, .toy-entry--wide-right .toy-copy { order: 0; justify-content: initial; padding: 12px 11px; }
  .toy-entry--strip .toy-launch { grid-template-columns: 1fr; grid-template-rows: 158px auto; }
  .toy-entry--strip .toy-photo { min-height: 158px; }
  .toy-entry--strip .toy-render { object-fit: cover; }
  .toy-entry--strip .toy-copy { padding: 12px 11px; }
  .toy-number { top: 4px; left: 6px; font-size: 58px; }
  .toy-plastic { left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 4px 5px; font-size: 6px; }
  .toy-copy { gap: 7px; }
  .toy-model { gap: 4px; padding-bottom: 6px; font-size: 6px; }
  .toy-title { font-size: clamp(18px, 4.8vw, 23px); }
  .toy-controls { font-size: 9px; line-height: 1.3; }
  .toy-stats { gap: 7px 10px; padding-top: 7px; }
  .toy-record i, .toy-wear i { font-size: 6px; }
  .toy-record b { font-size: 10px; }
  .toy-wear b { font-size: 8px; }
  .toy-wear small { font-size: 7px; }
  .toy-action { min-height: 27px; padding-top: 6px; font-size: 9px; }
  .toy-action b { font-size: 15px; }
  .toy-entry .favorite-button { top: 6px; right: 6px; width: 44px; height: 44px; font-size: 15px; }
  .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--feature .toy-launch { grid-template-rows: 190px auto; }
  .toy-entry--feature .toy-photo { min-height: 190px; }
  .toy-entry--feature .toy-copy { padding: 12px; }
  .toy-entry--feature .toy-title { font-size: 34px; }
  .toy-entry--vertical .toy-launch, .toy-entry--wide-left .toy-launch, .toy-entry--wide-right .toy-launch { grid-template-rows: 142px auto; }
  .toy-entry--vertical .toy-photo, .toy-entry--wide-left .toy-photo, .toy-entry--wide-right .toy-photo { min-height: 142px; }
  .toy-copy { padding: 10px 9px; }
  .toy-title { font-size: 18px; }
  .toy-controls { font-size: 8px; }
  .toy-model { font-size: 5px; }
  .toy-record b { font-size: 9px; }
  .toy-wear b { font-size: 7px; }
  .toy-entry .favorite-button { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .front-play, .front-render, .detail-image img, .toy-entry, .toy-render, .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); }
/* Water light over the tank: two drifting caustic blobs and a few bubbles. Paused unless live. */
.front-liquid { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: soft-light; }
.front-liquid .caustic { position: absolute; left: 40%; top: 22%; width: 34%; height: 32%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,255,255,0)); filter: blur(6px); animation: caustic-drift 7s ease-in-out infinite alternate; animation-play-state: paused; }
.front-liquid .caustic-b { left: 52%; top: 34%; width: 22%; height: 22%; animation-duration: 5.2s; animation-direction: alternate-reverse; }
.front-liquid .bubble { position: absolute; left: calc(47% + var(--b) * 1.6%); bottom: 34%; width: calc(4px + var(--b) * 0.6px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; opacity: 0; animation: bubble-rise calc(2.6s + var(--b) * .35s) linear calc(var(--b) * -.6s) infinite; animation-play-state: paused; }
.front-art.is-live .front-liquid .caustic, .front-art.is-live .front-liquid .bubble { animation-play-state: running; }
@keyframes caustic-drift { from { transform: translate(-8%, -4%) scale(1); } to { transform: translate(10%, 6%) scale(1.18); } }
@keyframes bubble-rise { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .9; } 80% { opacity: .7; } 100% { transform: translate(calc(var(--b) * 3px - 12px), -230px); opacity: 0; } }
/* 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="from-left"] { opacity: 0; transform: translateX(-36px) rotate(-.6deg); }
.motion-reveal[data-reveal="from-right"] { opacity: 0; transform: translateX(36px) rotate(.6deg); }
.motion-reveal[data-reveal="from-left"].motion-visible, .motion-reveal[data-reveal="from-right"].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(3,minmax(0,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::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%,-50%) scale(1.7) rotate(-16deg);filter:drop-shadow(0 24px 8px rgba(0,0,0,.29));}
  35% {opacity:1;transform:translate(-50%,-50%) scale(1.04) rotate(5deg);filter:drop-shadow(0 8px 3px rgba(0,0,0,.24));}
  63% {opacity:1;transform:translate(-50%,-50%) scale(.92) rotate(-2deg);filter:drop-shadow(1px 1px 1px rgba(0,0,0,.13));}
  86% {opacity:1;transform:translate(-50%,-50%) scale(.94) rotate(0);}
  100% {opacity:0;transform:translate(-50%,-50%) scale(.94);}
}
@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;mix-blend-mode:multiply;}
.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-illustration{height:165px;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 42%,#f5d78d,#c6b6a7);border:1px solid #9c8971;overflow:hidden}
.disassembly-body{width:90px;height:140px;display:block;position:relative;border:4px solid #273342;border-radius:16px;background:linear-gradient(125deg,#a9bdc0,#d9e1df);box-shadow:9px 9px 0 rgba(0,0,0,.15);transform:rotate(-11deg);transition:transform .4s}
.disassembly-panel:not([hidden]) .disassembly-body{transform:rotate(calc(-11deg + var(--disassembly-step,0)*1.25deg))}
.disassembly-screen{display:block;width:58px;height:62px;margin:22px auto 8px;background:linear-gradient(140deg,#5e8290,#c9e9df);border:7px solid #23313a;border-radius:7px}
.disassembly-body>b{position:absolute;left:12px;top:8px;font:900 11px var(--mono);letter-spacing:.08em}
.disassembly-bay{display:block;width:44px;height:23px;border:3px solid #303c41;background:linear-gradient(90deg,#dabc74 45%,#8aa3b7 45%);margin:4px auto;border-radius:4px}
.disassembly-screw{position:absolute;width:8px;height:8px;border-radius:50%;background:#5f6b71;box-shadow:inset 0 0 0 2px #aeb5b1}
.disassembly-screw.s1{top:11px;left:3px}.disassembly-screw.s2{top:11px;right:3px}.disassembly-screw.s3{bottom:9px;left:3px}.disassembly-screw.s4{bottom:9px;right:3px}
.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:#252f36;position:relative;overflow:hidden;color:#f6f0de}
.showcase-visual{position:relative;isolation:isolate;min-height:410px;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 46%,#c9d7d2 0,#8eaaa6 36%,#38545d 79%,#263b44 100%);overflow:hidden}
.showcase-visual:before{content:'';position:absolute;inset:12px;border:1px solid rgba(255,250,224,.31);pointer-events:none}
.showcase-visual:after{content:'';position:absolute;left:10%;right:10%;bottom:7%;height:8%;border-radius:50%;background:rgba(12,24,23,.26);filter:blur(19px)}
.showcase-visual img{position:relative;z-index:2;display:block;object-fit:contain;width:min(88%,680px);height:min(84%,450px);max-height:450px;filter:drop-shadow(7px 26px 21px rgba(0,0,0,.27));animation:showcase-float 5.2s ease-in-out infinite alternate;transform-origin:50% 60%}
.showcase-orbit{position:absolute;width:340px;height:340px;border:1px solid rgba(232,244,227,.22);border-radius:50%;transform:rotateX(68deg) rotateZ(-20deg);box-shadow:0 0 0 70px rgba(232,244,227,.04),0 0 0 145px rgba(232,244,227,.035)}
.showcase-watermark{position:absolute;z-index:3;bottom:19px;left:24px;letter-spacing:.1em;font:800 10px var(--mono);color:#e5f0e7}
.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:12px}
.showcase-select{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
.showcase-select button{border:1px solid #bbc0b8;padding:12px 4px;min-height:67px;background:#eae4d5;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;align-items:start;text-align:left;gap:8px;color:#203139;min-width:0}
.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}
.showcase-stage.is-revealing .showcase-visual img{animation:showcase-in .55s ease-out both,showcase-float 5.2s ease-in-out .55s infinite alternate}
@keyframes showcase-float{from{transform:translateY(4px) rotate(-1.8deg)}to{transform:translateY(-8px) rotate(1.3deg)}}
@keyframes showcase-in{from{opacity:.2;transform:translateY(35px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@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-visual{min-height:300px}.showcase-visual img{height:260px}.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}}
@media(prefers-reduced-motion:reduce){.showcase-visual img,.showcase-stage.is-revealing .showcase-visual img{animation:none!important;transform:none!important}}

/* 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}}