/**
 * Pocapoli Atelier — ธีมหน้าแรก (2026-10)
 *
 * ทับ Pink Chrome ทุกหน้าที่ body มีคลาส atelier (ยกเว้น Halloween) · ส่วนห้องทำงานใต้ Hero ผูกกับ .home-page
 * วิธีคือแมปโทเคนความหมายเดิม (--color-*, --home-*, --stage-*, ผิวโลหะ/แก้ว) ไปเป็นสีชุด Atelier
 * โค้ดใน app.css จึงไม่ต้องแก้ทีละตัว
 *
 * โทเคนผสม (gradient, เงา) ประกาศซ้ำใน .atelier-dark ด้วย เพราะ var() ใน custom property
 * ถูกแทนค่าที่ตัวที่ประกาศ ลูกหลานได้ค่าที่แทนแล้ว ไม่ใช่สูตร — เวทีที่มืดเสมอจึงต้องคำนวณใหม่ที่ตัวมันเอง
 *
 * Ekkamai Vibe ใช้รหัสไทยแบบเก่า: ห้ามตัวอักษร U+0080–00FF (· × °) และสระล่างซ้อนวรรณยุกต์
 * (ปุ่ม ปู่ คุ้ม) — Safari ทิ้งวรรณยุกต์ ใช้กับคำสั้น ตัวเลข และอังกฤษเท่านั้น · ห้าม subset
 */

@font-face { font-family: "Ekkamai Vibe"; font-weight: 100; font-display: swap;
  src: url("/assets/fonts/ekkamai/EkkamaiVibe-Thin.woff2") format("woff2"); }
@font-face { font-family: "Ekkamai Vibe"; font-weight: 300; font-display: swap;
  src: url("/assets/fonts/ekkamai/EkkamaiVibe-Light.woff2") format("woff2"); }
@font-face { font-family: "Ekkamai Vibe"; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/ekkamai/EkkamaiVibe-Regular.woff2") format("woff2"); }

/* ── สีดิบ: Porcelain / Espresso / Champagne ─────────────────────────── */
.atelier {
  --porcelain: #F7F4EF;
  --linen: #EEE8DF;
  --sand: #D9CFC1;
  --espresso: #2B2420;
  --mocha: #6B5F55;
  --champagne: #B8975A;
  --champagne-ink: #7E6029;
  --blush: #C9A49A;
  --blush-soft: #F1E4DF;
  --on-dark: #F3EDE4;
  --band: #2B2420;
  --code-bg: #EFE9E0;
  --showcase: #14110F;
}

/* Espresso Night — ตามระบบ หรือ data-theme="dark" */
:root[data-theme="dark"] .atelier,
.atelier .atelier-dark {
  --porcelain: #1C1815;
  --linen: #26201C;
  --sand: #3B332D;
  --espresso: #EDE6DC;
  --mocha: #B5A99D;
  --champagne: #CDB07A;
  --champagne-ink: #D7BC86;
  --blush: #B98E84;
  --blush-soft: #33282A;
  --band: #120F0D;
  --code-bg: #231E1A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .atelier {
    --porcelain: #1C1815;
    --linen: #26201C;
    --sand: #3B332D;
    --espresso: #EDE6DC;
    --mocha: #B5A99D;
    --champagne: #CDB07A;
    --champagne-ink: #D7BC86;
    --blush: #B98E84;
    --blush-soft: #33282A;
    --band: #120F0D;
    --code-bg: #231E1A;
  }
}

/* ── แมปโทเคนความหมายเดิม ─────────────────────────────────────────── */
.atelier,
.atelier .atelier-dark {
  --flat-linen: linear-gradient(var(--linen), var(--linen));
  --flat-ink: linear-gradient(var(--espresso), var(--espresso));
  --no-shadow: 0 0 0 0 transparent;

  --color-paper: var(--porcelain);
  --color-paper-2: var(--linen);
  --color-paper-3: var(--sand);
  --color-ink: var(--espresso);
  --color-ink-2: var(--mocha);
  --color-ink-3: var(--mocha);
  --color-rule: var(--sand);
  --color-rule-strong: color-mix(in srgb, var(--mocha) 55%, var(--sand));
  --color-rule-soft: var(--sand);

  /* accent = ปุ่มหลักสีเอสเปรสโซ ส่วนแชมเปญเป็นตัวหนังสือ/เส้นเน้น (ขาวบนแชมเปญคอนทราสต์ไม่ถึง) */
  --color-accent: var(--espresso);
  --color-accent-hi: var(--mocha);
  --color-accent-ink: var(--champagne-ink);
  --color-accent-soft: var(--blush-soft);
  --color-on-accent: var(--porcelain);
  --color-accent-deep: var(--champagne-ink);
  --color-accent-shade: var(--champagne-ink);
  --color-focus: var(--champagne-ink);

  --metal-hi: var(--porcelain);
  --metal-mid: var(--linen);
  --metal-lo: var(--sand);
  --metal-inset: transparent;
  --gradient-silver: var(--flat-linen);
  --gradient-pink: var(--flat-ink);
  --gradient-pink-soft: var(--flat-ink);
  --gradient-accent-btn: var(--flat-ink);
  --gradient-sheen-sweep: linear-gradient(transparent, transparent);
  --sheen: linear-gradient(transparent, transparent);
  --holo: var(--flat-linen);
  --dlg-bar: var(--flat-ink);
  --aura-1: transparent;
  --aura-2: transparent;
  --aura-3: transparent;
  --tile-bg: var(--porcelain);
  --tile-edge: var(--sand);
  --track-soft: var(--linen);
  --shadow-pink: var(--no-shadow);
  --glow-pink: var(--no-shadow);
  --glow-pink-ring: var(--no-shadow);

  --surface: var(--linen);
  --surface-2: var(--sand);
  --glass-bg: color-mix(in srgb, var(--porcelain) 92%, transparent);
  --glass-solid: var(--porcelain);
  --glass-edge: var(--sand);
  --glass-shadow: var(--no-shadow);
  --lg-rim: var(--no-shadow);
  --lg-bead-rim: var(--no-shadow);
  --lg-cast: 0 1px 2px rgb(20 17 15 / .06);
  --lg-cast-lift: 0 10px 30px -18px rgb(20 17 15 / .35);
  --lg-groove: inset 0 0 0 1px var(--sand);
  --lg-specular: linear-gradient(transparent, transparent);
  --lg-bead: linear-gradient(var(--porcelain), var(--porcelain));
  --lg-bar-bg: var(--linen);

  --window-bar: var(--flat-linen);
  --window-surface: var(--porcelain);
  --window-inset: var(--linen);
  --window-edge-hi: transparent;
  --window-edge-lo: var(--sand);
  --window-shadow: var(--no-shadow);
  --window-chrome: var(--flat-linen);
  --wheel-surface: var(--porcelain);
  --wheel-fade: var(--mocha);
  --wheel-selected: var(--flat-linen);
  --wheel-shadow: inset 0 0 0 1px var(--sand);

  --home-paper: var(--porcelain);
  --home-panel: var(--porcelain);
  --home-blush: var(--blush-soft);
  --home-blush-deep: var(--blush);
  --home-lilac: var(--linen);
  --home-silver: var(--linen);
  --home-ink: var(--espresso);
  --home-muted: var(--mocha);
  --home-rule: var(--sand);
  --home-action: var(--espresso);
  --home-action-ink: var(--porcelain);
  --home-glass: var(--porcelain);
  --home-shadow: var(--no-shadow);
  --home-gradient: linear-gradient(var(--porcelain), var(--porcelain));
  /* มุมแบบ Atelier: เหลี่ยมเกือบตรง แคปซูล (pill) คงไว้ */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --home-window-radius: 4px;
  --home-card-radius: 2px;

  /* เวทีสามมิติ: มืดเสมอ โทนเอสเปรสโซแทนน้ำเงินเทา */
  --stage-bg: #1C1815;
  --stage-bg-2: #26201C;
  --stage-line: rgb(237 230 220 / .12);
  --stage-ink: #EDE6DC;
  --stage-ink-2: #B5A99D;
  --stage-glow: rgb(205 176 122 / .16);
  --stage-surface: rgb(237 230 220 / .05);

  --font-display: "Trirong", "Noto Serif Thai", Georgia, serif;
  --font-accent: "Ekkamai Vibe", "Anuphan", system-ui, sans-serif;
  --font-body: "Anuphan", "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

/* พื้นนอก body (หน้าเนื้อหาสั้น) — โทเคนประกาศที่ body จึงใส่ค่าตรง */
html:has(> body.atelier) { background: #F7F4EF; }
:root[data-theme="dark"]:has(> body.atelier) { background: #1C1815; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):has(> body.atelier) { background: #1C1815; }
}

/* ── พื้นฐานตัวอักษร ───────────────────────────────────────────────── */
.atelier {
  background: var(--porcelain);
  color: var(--espresso);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.75;
}
.atelier .aurora { display: none; }
.atelier h1,
.atelier h2,
.atelier h3 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0;
}
.atelier strong,
.atelier b { font-weight: 500; }

.atelier .eyebrow {
  margin: 0;
  color: var(--champagne-ink);
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ปุ่ม: เหลี่ยม เรียบ ตัวห่าง — ไม่มีเงาชมพู/ไล่เฉด */
.atelier .btn,
.atelier .soft-btn {
  min-height: 48px;
  padding: 0 28px;
  border-radius: 2px;
  box-shadow: none;
  /* app.css ให้ .btn เป็น block — ความสูง 48px กับ line-height 1 ทำให้ตัวหนังสือลอยชิดขอบบน */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 400 14px/1.2 var(--font-body);
  letter-spacing: .06em;
  text-shadow: none;
}
.atelier .btn::before,
.atelier .btn::after,
.atelier .soft-btn::before,
.atelier .soft-btn::after { display: none; }
.atelier .soft-btn--primary {
  border-color: var(--espresso);
  background: var(--espresso);
  color: var(--porcelain);
}
.atelier .soft-btn--secondary {
  border-color: var(--espresso);
  background: transparent;
  color: var(--espresso);
}

.atelier .masthead {
  border-bottom: 1px solid var(--sand);
  background: color-mix(in srgb, var(--porcelain) 92%, transparent);
  box-shadow: none;
}
.atelier .nav__link[aria-current="page"] { background: var(--linen); }

/* ── Hero: กระดาษเรียบ เส้นบาง ไม่มีกระจก ─────────────────────────── */
.atelier .soft-hero__copy,
.atelier .soft-hero__visual {
  border-color: var(--sand);
  border-radius: 4px;
  background: var(--porcelain);
  box-shadow: none;
}
.atelier .soft-hero h1 {
  font-weight: 300;
  line-height: 1.3;
}
.atelier .soft-hero h1 span {
  color: var(--champagne-ink);
  font-style: italic;
  text-decoration: none;
}
.atelier .soft-hero__badge {
  border-radius: 2px;
  background: var(--porcelain);
  color: var(--champagne-ink);
  box-shadow: none;
  font-family: var(--font-mono);   /* ไม่ใช้ Ekkamai — ป้ายนี้มี ♡ และ · */
  letter-spacing: .12em;
}

.atelier .colophon { background: var(--band); color: var(--on-dark); }

/* ── ห้องทำงาน: โชว์รูมมืดเสมอ (.atelier-dark) ───────────────────────── */
.home-page .home-workbench {
  border: 0;
  border-radius: 4px;
  background: var(--showcase);
  color: var(--espresso);
}
.home-page .home-workbench .section__head h2 { color: var(--on-dark); }
.home-page .home-workbench .eyebrow {
  font: 300 13px/1.4 var(--font-accent);   /* คำอังกฤษสั้น ๆ เท่านั้น — Ekkamai */
  letter-spacing: .24em;
}

.home-page .home-workbench .studio {
  gap: 1px;
  background: var(--sand);
}
@media (min-width: 64rem) {
  .home-page .home-workbench .studio {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    padding: 0;
  }
}
.home-page .home-workbench .y2k-window { border: 0; border-radius: 0; }
.home-page .studio__stage {
  background: radial-gradient(110% 80% at 50% 28%, #3A302A 0%, #1C1815 52%, #110E0C 100%);
}
.home-page .studio__stage::before { opacity: .5; }
.home-page .studio__panel { background: var(--porcelain); }

/* ทางลัดใต้ Hero: ตัวอย่างกว้างไม่เท่ากัน (ผวา! / ไอคอน / Puffy) คอลัมน์ auto ทำให้หัวข้อเริ่มคนละแนว
 * ล็อกคอลัมน์ไว้เท่าตัวที่กว้างที่สุด แล้ววางตัวอย่างกลางช่อง */
.home-page .sign-teaser { grid-template-columns: 6rem minmax(0, 1fr) auto; }
.home-page .sign-teaser__sample { justify-self: center; }
@media (max-width: 39.999rem) {
  /* จอแคบ: 6rem บีบหัวข้อเหลือสองสามคำต่อบรรทัด — ย่อ Puffy (ตัวกว้างสุด) ให้ลงช่อง 4.5rem */
  .home-page .sign-teaser { grid-template-columns: 4.5rem minmax(0, 1fr) auto; }
  .home-page .sign-teaser__sample--puffy { font-size: 16px; }
}

/* ── ป้ายบนเวที: ขนาดกับเหรียญเป็นแถวเดียวชิดขอบล่าง ไม่กินกลางเวที ─────
 * padding ของ .cube คือที่ที่ maker.js หักออกตอนฟิตกล่อง ลดตรงนี้กล่องก็โตเอง
 * หัวเว้น 2.4rem ใน app.css มีไว้ให้แถบปุ่มเก่าที่ลอยทับ — หน้าแรกย้ายปุ่มไปอยู่นอกกรอบแล้ว */
.home-page .cube,
.home-page .cube.cube--gl { padding-block: .5rem 1.9rem; }
.home-page .cube__dims,
.home-page .cube__legend { inset: auto auto .6rem auto; }
.home-page .cube__dims { left: .75rem; text-align: left; }
.home-page .cube__legend { right: .75rem; }

/* แคปซูลเลือกมุมมอง — ชิ้นงาน / ผ่าดูไส้ / ดูตอนพิมพ์ / เพลท */
.stage-modes {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgb(237 230 220 / .12);
  border-radius: 999px;
  background: rgb(20 17 15 / .62);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.stage-mode {
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #B5A99D;
  font: 300 13px/1 var(--font-accent);   /* ชิ้นงาน ผ่าดูไส้ ดูตอนพิมพ์ เพลท — ไม่มีสระล่างซ้อนวรรณยุกต์ */
  letter-spacing: .04em;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.stage-mode:hover { color: #EDE6DC; }
.stage-mode[aria-pressed="true"] { background: #EDE6DC; color: #1C1815; }
.stage-mode:focus-visible { outline: 2px solid #D7BC86; outline-offset: 2px; }
.stage-mode[hidden] { display: none; }

/* เลขขั้น 01–04 หน้าป้ายกลุ่ม */
.step-no {
  margin-inline-end: .6em;
  color: var(--champagne-ink);
  font: 400 11px/1 var(--font-mono);
  font-style: normal;
  letter-spacing: .14em;
}

/* ── แถบราคาเต็มกว้าง ─────────────────────────────────────────────── */
.sd-econ {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 1px;
  background: var(--sand);
}
.sd-econ[hidden] { display: none; }
.sd-chart,
.sd-plates {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 28px 32px 32px;
  background: var(--porcelain);
}
.sd-econ__title {
  margin: 0;
  color: var(--espresso);
  font: 300 clamp(1.25rem, 1rem + 1vw, 1.6rem)/1.4 var(--font-display);
}
.sd-econ__sub { margin: 0; color: var(--mocha); font-size: 14px; line-height: 1.6; }

/* กราฟในแถบกว้าง: สูงขึ้น ป้ายแกนซ้าย ไม่มีหัวกลุ่มซ้ำกับ h3 */
.sd-econ .curve { margin-top: 8px; }
/* หัวกลุ่มเดิมซ้ำกับ h3 และราคาที่จำนวนนี้ก็อยู่ในฟองบนจุดแล้ว */
.sd-econ .curve__head,
.sd-econ .curve__key { display: none; }
.sd-econ .curve__plot {
  height: 240px;
  margin-top: 30px;
  margin-left: 52px;
  border-bottom: 1px solid var(--sand);
  cursor: crosshair;
  touch-action: pan-y;
}
.sd-econ .curve__plot:focus-visible { outline: 2px solid var(--champagne-ink); outline-offset: 4px; }
.sd-econ .curve__art { display: block; width: 100%; height: 100%; }
.sd-econ .curve__ticks { margin-left: 52px; }
.sd-econ .curve__area { fill: var(--champagne); opacity: .12; }
.sd-econ .curve__line { stroke: var(--champagne); }
.sd-econ .curve__edge { stroke: var(--sand); }
.curve__grid {
  stroke: var(--sand);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  vector-effect: non-scaling-stroke;
}
.curve__ylabs { position: absolute; inset: 0; pointer-events: none; }
.curve__ylab {
  position: absolute;
  right: calc(100% + 10px);
  transform: translateY(-50%);
  color: var(--mocha);
  font: 400 11px/1 var(--font-mono);
  white-space: nowrap;
}
.curve__flat {
  position: absolute;
  top: 0; bottom: 0;
  pointer-events: none;
  border-left: 1px dashed var(--mocha);
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--mocha) 22%, transparent) 0 1px, transparent 1px 7px);
}
.curve__flat[hidden] { display: none; }

/* จุดเต็มเพลทเป็นข้าวหลามตัด — รูปต่างจากจุดที่เลือก ไม่ต้องพึ่งสีแยก */
.sd-econ .curve__spot::before {
  width: .55rem; height: .55rem;
  border-radius: 0;
  background: var(--champagne);
  box-shadow: 0 0 0 2px var(--porcelain);
  transform: rotate(45deg);
}
.sd-econ .curve__spot:hover::before { transform: rotate(45deg) scale(1.3); }
.sd-econ .curve__spot[data-label]:not([data-label=""])::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--champagne-ink);
  font: 400 11px/1 var(--font-body);
  white-space: nowrap;
}
.sd-econ .curve__dot {
  width: .7rem; height: .7rem; margin: -.35rem 0 0 -.35rem;
  background: var(--espresso);
  box-shadow: 0 0 0 3px var(--porcelain);
}
.sd-econ .curve__dot::after,
.curve__tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 2px;
  background: var(--espresso);
  color: var(--porcelain);
  font: 400 11px/1.2 var(--font-mono);
  white-space: nowrap;
}
.sd-econ .curve__dot::after { content: attr(data-label); }
.curve__tip {
  bottom: auto;
  transform: translate(-50%, calc(-100% - 10px));
  pointer-events: none;
  background: var(--mocha);
  z-index: 2;
}
.curve__tip[hidden] { display: none; }
.sd-econ .curve__end { background: transparent; }

.sd-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 8px 0 0;
  color: var(--mocha);
  font-size: 12px;
}
.sd-key__item { display: inline-flex; align-items: center; gap: 8px; }
.sd-key__mark { display: inline-block; flex: none; }
.sd-key__mark--spot { width: 8px; height: 8px; background: var(--champagne); transform: rotate(45deg); }
.sd-key__mark--dot { width: 9px; height: 9px; border-radius: 50%; background: var(--espresso); }
.sd-key__mark--flat {
  width: 18px; height: 10px;
  border-left: 1px dashed var(--mocha);
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--mocha) 40%, transparent) 0 1px, transparent 1px 4px);
}

/* เพลทจิ๋ว */
.sd-fit {
  margin: 4px 0 0;
  color: var(--espresso);
  font: 300 28px/1.2 var(--font-accent);   /* ตัวเลข + "ชิ้นต่อเพลท" ไม่มีสระล่างซ้อนวรรณยุกต์ */
}
.sd-maps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.sd-map { margin: 0; display: grid; gap: 4px; justify-items: center; }
.sd-map__art { display: block; width: 72px; height: 72px; }
.sd-map figcaption { color: var(--mocha); font: 400 11px/1 var(--font-mono); }
.sd-map--part figcaption { color: var(--champagne-ink); }
.sd-map__bed { fill: var(--linen); stroke: var(--sand); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sd-map__dead { fill: color-mix(in srgb, var(--mocha) 18%, transparent); }
.sd-map__tower { fill: var(--mocha); opacity: .5; }
.sd-map__slot {
  fill: none;
  stroke: var(--mocha);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  vector-effect: non-scaling-stroke;
  opacity: .7;
}
.sd-map__slot.is-on { stroke: rgb(0 0 0 / .25); stroke-dasharray: none; opacity: 1; }
.sd-map__more { color: var(--mocha); font: 400 12px/1 var(--font-mono); }
.sd-sum { margin: 4px 0 0; color: var(--espresso); font-size: 14px; }
.sd-good { margin: 0; color: var(--champagne-ink); font-size: 14px; }
.sd-good[hidden] { display: none; }
.sd-econ .fill {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--sand);
  border-radius: 2px;
  background: var(--linen);
}
.sd-econ .fill[hidden] { display: none; }
.sd-econ .fill__text { color: var(--espresso); font-size: 14px; line-height: 1.6; }
.sd-econ .fill__btn,
.sd-econ .sd-stage {
  width: auto;
  justify-self: start;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--espresso);
  background: transparent;
  color: var(--espresso);
}
.sd-econ .sd-stage { align-self: flex-start; margin-top: auto; }

@media (max-width: 860px) {
  .sd-econ { grid-template-columns: minmax(0, 1fr); }
  .sd-chart, .sd-plates { padding: 22px 18px 24px; }
  .sd-econ .curve__plot { height: 200px; margin-left: 44px; }
  .sd-econ .curve__ticks { margin-left: 44px; }
  .stage-mode { padding: 0 10px; font-size: 12px; }
}

/* มือถือ: เวทีถูกตรึงบนจอ ทุกพิกเซลแนวตั้งมีค่า — แคปซูลแถวเดียวเต็มกว้าง
 * ชิปน้ำหนัก/เวลาลอยมุมขวาบนของกรอบแทนการเบียดแถวเดียวกับแคปซูล (เคยตกสองแถว สูง 74px)
 * กรอบสูงขึ้นจาก 18svh เป็น 24svh — ที่เหลือให้ตัวเลือกยังเกินครึ่งจอ */
@media (max-width: 39.999rem) {
  .home-page .studio__follow { position: relative; }
  .home-page .studio__head { flex-wrap: nowrap; }
  .home-page .stage-modes { flex: 1 1 auto; flex-wrap: nowrap; justify-content: space-between; }
  .home-page .stage-mode { flex: 1 1 auto; padding: 0 6px; }
  .home-page .studio__live {
    position: absolute;
    top: calc(var(--space-xs) + 46px);
    right: calc(var(--space-xs) + 8px);
    z-index: 2;
    font-size: 11px;
  }
  .home-page .studio__stage .studio__plate--part { height: clamp(10rem, 24svh, 14rem); }
}