@font-face {
  font-family: "GenSen Rounded TW";
  src: url("../fonts/GenSenRounded2TW-R-subset-v2.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root { --playground-art: url("../terracotta/zen-mist-light.webp"); }
:root[data-theme="dark"] { --playground-art: url("../terracotta/zen-mist-dark.webp"); }

body { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
.playground-page { width: min(100% - 40px, 1120px); margin-inline: auto; }
.playground-header { display:flex; min-height:68px; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid color-mix(in srgb,var(--demo-border) 70%,transparent); }
.header-actions { display:flex; align-items:center; gap:16px; }
.text-link { min-height:44px; display:inline-flex; align-items:center; color:var(--demo-muted); font-size:13px; font-weight:600; text-decoration-thickness:1px; text-underline-offset:4px; }
.text-link:hover { color:var(--demo-terracotta); }
.playground-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:34px 0 22px; }
.playground-intro h1 { max-width:15ch; margin:0; font-size:clamp(2rem,5vw,3.5rem); font-weight:600; letter-spacing:-.035em; line-height:1.15; }
.playground-intro p { max-width:60ch; margin:13px 0 0; color:var(--demo-muted); font-size:15px; line-height:1.7; }
.preset-control { position:relative; z-index:20; flex:none; }
.preset-trigger { display:flex; min-width:224px; min-height:54px; align-items:center; gap:10px; padding:7px 12px; cursor:pointer; text-align:left; }
.preset-trigger img { width:48px; height:36px; flex:none; border:1px solid color-mix(in srgb,var(--demo-border) 80%,transparent); border-radius:9px; object-fit:cover; }
.preset-trigger__text { display:grid; min-width:0; gap:1px; }
.preset-trigger__text small { color:var(--demo-muted); font-size:11px; line-height:1.3; }
.preset-trigger__text strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.chevron { width:17px; height:17px; margin-left:auto; flex:none; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.preset-menu { position:absolute; top:calc(100% + 9px); right:0; display:grid; width:min(360px,calc(100vw - 28px)); max-height:min(380px,65vh); gap:6px; overflow-y:auto; padding:9px; border-radius:17px; }
.preset-menu[hidden] { display:none; }
.preset-option { display:flex; min-height:54px; align-items:center; gap:11px; padding:7px 9px; border:0; border-radius:12px; background:transparent; color:var(--demo-ink); cursor:pointer; text-align:left; }
.preset-option:hover,.preset-option:focus-visible,.preset-option[aria-selected="true"] { background:color-mix(in srgb,var(--demo-surface-solid) 65%,transparent); }
.preset-option:focus-visible { outline:2px solid var(--demo-focus); outline-offset:1px; }
.preset-option img { width:54px; height:40px; flex:none; border:1px solid color-mix(in srgb,var(--demo-border) 70%,transparent); border-radius:8px; object-fit:cover; }
.preset-option span { display:grid; min-width:0; gap:2px; }
.preset-option strong { font-size:13px; font-weight:600; }
.preset-option small { color:var(--demo-muted); font-size:11px; }
.preview-stage { position:relative; isolation:isolate; display:grid; min-height:420px; place-items:center; overflow:hidden; padding:clamp(20px,5vw,54px); border:1px solid color-mix(in srgb,var(--demo-border) 85%,transparent); border-radius:22px; background:var(--demo-canvas); box-shadow:var(--demo-shadow); }
.art-layer { position:absolute; z-index:-2; inset:0; background-image:linear-gradient(115deg,color-mix(in srgb,var(--demo-canvas) 36%,transparent),color-mix(in srgb,var(--demo-canvas) 56%,transparent)),var(--playground-art); background-position:center; background-size:cover; opacity:.95; transition:background-image 240ms ease,filter 240ms ease; }
:root[data-theme="dark"] .art-layer[data-dark-treatment="muted"] { filter:brightness(.43) saturate(.56) contrast(1.06) sepia(.1); }
.stage-heading { position:absolute; top:15px; right:16px; left:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.stage-caption { margin:0; color:var(--demo-muted); font-size:10px; font-weight:700; letter-spacing:.12em; }
.demo-flag { margin:0; padding:5px 10px; border:1px solid color-mix(in srgb,var(--demo-border) 80%,transparent); border-radius:99px; background:var(--demo-surface); color:var(--demo-muted); font-size:11px; }
.screen-view { width:min(100%,530px); padding:clamp(20px,4vw,35px); border:1px solid color-mix(in srgb,var(--demo-border) 74%,transparent); border-radius:20px; background:var(--demo-surface); box-shadow:0 16px 38px rgb(48 37 29 / 10%); backdrop-filter:blur(22px) saturate(1.12); -webkit-backdrop-filter:blur(22px) saturate(1.12); }
.screen-view[hidden] { display:none; }
.screen-view h2 { margin:0; font-size:clamp(1.45rem,3vw,1.9rem); font-weight:600; letter-spacing:-.025em; line-height:1.3; }
.screen-lead { margin:9px 0 0; color:var(--demo-muted); font-size:14px; line-height:1.7; }
.home-actions { display:grid; gap:10px; margin-top:24px; }
.primary-action,.secondary-action { display:flex; min-height:48px; align-items:center; justify-content:space-between; gap:12px; padding:10px 15px; border:1px solid var(--demo-border); border-radius:13px; background:var(--demo-surface); color:var(--demo-ink); cursor:pointer; font-weight:600; text-align:left; transition:transform 180ms cubic-bezier(.22,1,.36,1),border-color 180ms ease,background 180ms ease; }
.primary-action { border-color:var(--demo-terracotta); background:var(--demo-terracotta); color:#fffaf5; }
.primary-action:hover,.secondary-action:hover { transform:translateY(-1px); }
.secondary-action:hover { border-color:var(--demo-terracotta); background:var(--demo-surface-solid); }
.primary-action:focus-visible,.secondary-action:focus-visible,.back-button:focus-visible,.app-nav button:focus-visible { outline:3px solid var(--demo-focus); outline-offset:3px; }
.fixture-note { margin:14px 0 0; color:var(--demo-muted); font-size:12px; }
.screen-title-row { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.back-button { display:grid; width:44px; height:44px; flex:none; place-items:center; border:1px solid var(--demo-border); border-radius:12px; background:var(--demo-surface); color:var(--demo-ink); cursor:pointer; font-size:20px; }
.screen-title-row h2 { font-size:1.55rem; }
.fixture-form { display:grid; gap:13px; margin-top:13px; }
.fixture-form label { display:grid; gap:6px; color:var(--demo-muted); font-size:12px; font-weight:600; }
.fixture-form input,.fixture-form select { width:100%; min-height:46px; padding:10px 12px; border:1px solid var(--demo-border); border-radius:12px; background:var(--demo-surface); color:var(--demo-ink); outline:none; backdrop-filter:blur(14px); }
.fixture-form input:focus-visible,.fixture-form select:focus-visible { border-color:var(--demo-focus); outline:3px solid color-mix(in srgb,var(--demo-focus) 45%,transparent); outline-offset:2px; }
.form-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fixture-status { min-height:24px; margin:0; color:var(--demo-muted); font-size:12px; }
.fixture-result { display:grid; gap:4px; margin-top:16px; padding:13px; border-radius:12px; background:color-mix(in srgb,var(--demo-olive) 18%,var(--demo-surface)); }
.fixture-result[hidden] { display:none; }
.fixture-result span { color:var(--demo-muted); font-size:10px; font-weight:700; letter-spacing:.1em; }
.fixture-result strong { font-size:14px; }
.fixture-result p { margin:0; color:var(--demo-muted); font-size:12px; }
.playground-footnote { margin:18px 0 0; color:var(--demo-muted); font-size:12px; text-align:center; }
.playground-footnote a { color:var(--demo-terracotta); text-underline-offset:3px; }
.app-nav { position:fixed; z-index:30; right:14px; bottom:max(10px,env(safe-area-inset-bottom)); left:14px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:min(100% - 28px,500px); min-height:68px; margin-inline:auto; padding:4px; border-radius:18px; }
.app-nav button { display:grid; min-width:44px; min-height:58px; justify-items:center; align-content:center; gap:3px; border:0; border-radius:13px; background:transparent; color:var(--demo-muted); cursor:pointer; font-size:11px; font-weight:600; }
.app-nav button[aria-pressed="true"],.app-nav button:hover { background:color-mix(in srgb,var(--demo-surface-solid) 68%,transparent); color:var(--demo-ink); }
.app-nav svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.app-nav button[aria-pressed="true"] svg { stroke:var(--demo-terracotta); }

:root[data-theme="dark"] .preset-menu { background:rgb(44 39 33 / 90%); }
:root[data-theme="dark"] .screen-view { border-color:#5b5147; background:rgb(44 39 33 / 84%); }
:root[data-theme="dark"] .fixture-form input,:root[data-theme="dark"] .fixture-form select,:root[data-theme="dark"] .secondary-action { border-color:#5b5147; background:rgb(44 39 33 / 88%); color:var(--demo-ink); }
:root[data-theme="dark"] .primary-action { border-color:#a55233; background:#a55233; color:#fffaf5; }

@media (max-width:700px) {
  .playground-page { width:min(100% - 28px,1120px); }
  .playground-intro { align-items:stretch; flex-direction:column; gap:18px; padding-top:25px; }
  .preset-control { align-self:flex-start; }
  .preview-stage { min-height:490px; padding:60px 12px 24px; }
  .screen-view { width:100%; padding:20px 16px; }
  .stage-heading { top:12px; right:12px; left:12px; }
  .stage-caption { font-size:9px; }
  .demo-flag { font-size:10px; }
  .playground-footnote { padding-inline:4px; padding-bottom:8px; line-height:1.7; }
}

@media (max-width:360px) {
  .header-actions { gap:8px; }
  .text-link { font-size:12px; }
  .form-pair { grid-template-columns:1fr; }
  .app-nav { right:10px; left:10px; width:calc(100% - 20px); }
}

@media (forced-colors:active) {
  .glass-control,.screen-view,.fixture-form input,.fixture-form select,.secondary-action { border:1px solid CanvasText; background:Canvas; color:CanvasText; box-shadow:none; }
  .primary-action { border:1px solid ButtonText; background:ButtonFace; color:ButtonText; }
  .app-nav button[aria-pressed="true"] { outline:2px solid Highlight; }
}

@media (prefers-reduced-motion:reduce) {
  .primary-action,.secondary-action { transition:none; }
}