/* Studio styles: the Parent Zone sections, the device check page and the .st-flat fallback (ST9; studio DESIGN §2.12,
   §2.13, §8). Every class root carries the st- prefix; colours, radii, shadows and motion come from the core tokens. */

/* ── Parent Zone: st-video, st-two, st-about ───────────────────────────────────────────────────────────────────── */
.sheet .st-pz-eps { margin: 10px 0 6px; }
.sheet .st-pz-ep { flex-wrap: nowrap; }
.sheet .st-pz-ep .g-name { flex: 1 1 auto; min-width: 0; }
.sheet .st-pz-ep .g-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-pz-cover { flex: none; width: 120px; height: 68px; border-radius: 12px; overflow: hidden; background: var(--sand); display: grid; place-items: center; color: var(--muted); }
.st-pz-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-pz-cover .ico { width: 30px; height: 30px; }
.sheet .st-pz-save { flex: none; margin: 0; padding: 0 16px; white-space: nowrap; }
.sheet .st-pz-save .ico { width: 22px; height: 22px; }
@media (max-width: 479px) {
  .sheet .st-pz-ep { flex-wrap: wrap; }
  .sheet .st-pz-ep .g-name { flex-basis: calc(100% - 140px); }
  .sheet .st-pz-save { width: 100%; justify-content: center; }
}
.st-pz-none { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; padding: 12px 14px; border-radius: 16px; background: var(--paper); color: var(--muted); }
.st-pz-none .ico { width: 26px; height: 26px; flex: none; }
.st-pz-two { display: flex; align-items: flex-start; gap: 14px; }
.st-pz-two img { width: 72px; height: 72px; flex: none; object-fit: contain; }
.st-pz-two p { margin: 0; }
.st-pz-preview { margin: 8px 0 10px; padding: 12px 14px; border-radius: 16px; background: var(--paper); }
.st-pz-preview strong { font-weight: 800; }

/* ── The device check (#/st-perf) ──────────────────────────────────────────────────────────────────────────────── */
.st-perf-wait { position: fixed; left: 50%; bottom: var(--edge); transform: translateX(-50%); z-index: var(--z-view); width: min(440px, calc(100vw - 2 * var(--gutter)));
  pointer-events: auto; }
.st-perf-wait[hidden] { display: none; }
.st-perf-wait .still-card { margin: 0; }
.st-perf-wait .st-perf-unlock { margin-top: 12px; min-height: 64px; font-size: 19px; }
.st-perf-card { position: fixed; left: 50%; bottom: var(--edge); transform: translateX(-50%); z-index: var(--z-view); width: min(460px, calc(100vw - 2 * var(--gutter)));
  display: grid; gap: 12px; padding: 18px 18px 16px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-lift); pointer-events: auto; }
.st-perf-card[data-state="locked"] { display: none; }
.st-perf-card > div { display: none; }
.st-perf-card[data-state="idle"] .st-perf-idle, .st-perf-card[data-state="done"] .st-perf-done, .st-perf-card[data-state="fail"] .st-perf-fail { display: grid; gap: 14px; }
.st-perf-card[data-state="run"] .st-perf-busy { display: flex; align-items: center; gap: 18px; }
.st-perf-note { margin: 0; color: var(--muted); font-size: var(--muted-size); line-height: 1.4; }
.st-perf-run { min-height: 96px; font-size: 22px; font-weight: 800; }
.st-perf-run .ico { width: 34px; height: 34px; }
.st-perf-ring { position: relative; flex: none; width: 96px; height: 96px; }
.st-perf-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.st-perf-track { fill: none; stroke: var(--hair); stroke-width: 8; }
.st-perf-arc { fill: none; stroke: var(--coral); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 240ms linear; }
.st-perf-toy { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; object-fit: contain; animation: bob 1.1s ease-in-out infinite;
  transform-origin: 50% 100%; }
.st-perf-say { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.st-perf-phase { margin: 0; font-size: var(--label); font-weight: 800; line-height: 1.3; }
.st-perf-open { margin: 0; color: var(--muted); font-size: 15px; }
.st-perf-stop { margin-top: 6px; min-height: 48px; padding: 0 16px; font-size: 16px; }
.st-perf-stop .ico { width: 20px; height: 20px; }
.st-perf-big { display: flex; gap: 12px; }
.st-perf-big > span { flex: 1 1 0; display: grid; justify-items: center; padding: 10px 6px; border-radius: 18px; background: var(--paper); }
.st-perf-big b { font-size: 34px; font-weight: 850; line-height: 1; font-variant-numeric: tabular-nums; }
.st-perf-big small { margin-top: 4px; color: var(--muted); font-size: 14px; font-weight: 700; text-align: center; }
.st-perf-rows { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; font-size: 15px; }
.st-perf-rows > div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--hair); padding: 3px 0; }
.st-perf-rows dt { color: var(--muted); }
.st-perf-rows dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-perf-label { margin: 0; justify-self: center; padding: 4px 14px; border-radius: 999px; background: var(--ink); color: var(--card); font-size: 14px; font-weight: 750; }
.st-perf-label[data-phone="true"] { background: var(--green); }
.st-perf-saved { margin: 0; color: var(--muted); font-size: 14px; text-align: center; overflow-wrap: anywhere; }
.st-perf-saved:empty { display: none; }
.st-perf-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.st-perf-acts > .btn { white-space: nowrap; }   /* one line each; on a narrow card the two keys stack */
.st-perf-acts > .btn-primary { flex: 1.4 1 auto; min-height: 64px; font-size: 18px; }
.st-perf-acts > .btn-quiet { flex: 1 1 auto; padding: 0 16px; font-size: 17px; }
.st-perf-fail .st-perf-run { min-height: 72px; font-size: 19px; }
@media (orientation: landscape) and (max-height: 500px) {
  .st-perf-card { left: auto; right: calc(var(--gutter) + env(safe-area-inset-right)); bottom: 12px; transform: none; width: min(400px, 52vw); max-height: calc(100vh - var(--head) - 24px);
    overflow-y: auto; padding: 14px; }
  .st-perf-run { min-height: 80px; }
  .st-perf-wait { left: auto; right: calc(var(--gutter) + env(safe-area-inset-right)); bottom: 12px; transform: none; width: min(400px, 52vw); }
}
@media (prefers-reduced-motion: reduce) { .st-perf-toy { animation: none; } .st-perf-arc { transition: none; } }

/* ── The .st-flat fallback (no WebGL2, the 3D modules failed, ?stFlat=1) ─────────────────────────────────────── */
.st-flat { position: fixed; inset: 0; z-index: var(--z-view); background: var(--paper); overflow-y: auto; overflow-x: hidden; pointer-events: auto;
  padding: calc(76px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) var(--edge) calc(16px + env(safe-area-inset-left)); }
.st-flat * { pointer-events: auto; }
.st-flat-key { position: fixed; right: calc(var(--gutter) + env(safe-area-inset-right)); top: calc(12px + env(safe-area-inset-top)); z-index: 1;
  width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%; background: var(--card); box-shadow: var(--shadow); color: var(--muted); overflow: visible;
  display: grid; place-items: center; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.st-flat-key .ico { width: 24px; height: 24px; }
.st-flat-ring { position: absolute; inset: -4px; border-radius: 50%; border: 3px solid var(--coral); opacity: 0; transform: scale(.8); pointer-events: none; }
.st-flat-key.is-holding .st-flat-ring { opacity: 1; transform: scale(1); transition: transform 1000ms linear, opacity var(--t-micro); }
.st-flat-main { display: grid; gap: 18px; max-width: 760px; min-height: 100%; margin: 0 auto; align-content: center; }
.st-flat-card { margin: 0; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--sand);
  box-shadow: var(--shadow-lift), inset 0 0 0 3px rgba(255, 251, 243, .6); }
.st-flat-canvas { display: block; width: 100%; aspect-ratio: 16 / 9; touch-action: manipulation; cursor: pointer; }
.st-flat-side { display: grid; gap: 16px; justify-items: center; }
.st-flat-line { margin: 0; text-align: center; justify-content: center; color: var(--ink); }
.st-flat-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 100%; }
.st-flat-por { appearance: none; border: 0; padding: 0; margin: 0; width: 64px; height: 64px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow), var(--press);
  display: grid; place-items: center; cursor: pointer; touch-action: manipulation; transition: transform var(--t-micro) var(--spring); }
.st-flat-por img { width: 52px; height: 52px; object-fit: contain; animation: st-flat-bob 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes st-flat-bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-5px) scale(.98, 1.03); } 80% { transform: translateY(0) scale(1.03, .97); } }
.st-flat-por:nth-child(2n) img { animation-delay: -.7s; }
.st-flat-por:nth-child(3n) img { animation-delay: -1.4s; }
.st-flat-por:nth-child(4n) img { animation-delay: -2s; }
.st-flat-por[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--coral), var(--shadow); }
.st-flat-por:active, .st-flat-por.is-down { transform: scale(.92); }
.st-flat-acts { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.st-flat-add { appearance: none; border: 0; padding: 0; margin: 0; width: 96px; height: 96px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 4px var(--coral), var(--shadow-lift), var(--press);
  display: grid; place-items: center; cursor: pointer; touch-action: manipulation; transition: transform var(--t-micro) var(--spring); }
.st-flat-add img { width: 80px; height: 80px; object-fit: contain; }
.st-flat-add:active, .st-flat-add.is-down { transform: scale(.92); }
.st-flat-cast { min-height: var(--tap); padding: 0 22px; font-size: var(--label); font-weight: 800; }
.st-flat-cast .ico { width: 26px; height: 26px; }
.st-flat-cast { transition: transform var(--t-micro) var(--spring); }
.st-flat-cast:active, .st-flat-cast.is-down { transform: scale(.95); }
@media (orientation: landscape) and (max-height: 520px) {
  .st-flat { padding-top: calc(12px + env(safe-area-inset-top)); padding-right: calc(76px + env(safe-area-inset-right)); }
  .st-flat-main { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; max-width: none; height: 100%; }
  .st-flat-card { width: min(100%, calc((100vh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 16 / 9)); justify-self: center; }
  .st-flat-por { width: 56px; height: 56px; }
  .st-flat-por img { width: 46px; height: 46px; }
  .st-flat-side { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .st-flat-por img { animation: none; } .st-flat-key.is-holding .st-flat-ring { transition: opacity var(--t-calm); } }