:root {
  color:#111;
  background:#f5f5f7;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","PingFang SC",sans-serif;
  font-synthesis:none;
}
* { box-sizing:border-box; }
html,body { width:100%; height:100%; }
body { margin:0; overflow:hidden; background:radial-gradient(circle at 50% 42%,#fff 0,#f7f7f8 46%,#efeff2 100%); }
button,input { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; }
button:disabled { cursor:wait; opacity:.36; }
main { position:relative; height:100dvh; min-height:480px; }
#viewport { position:absolute; inset:0 0 142px; touch-action:none; }
canvas { display:block; outline:none; }
.stage-hint { position:absolute; top:18px; left:50%; transform:translateX(-50%); z-index:1; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.74); color:#77777d; font-size:11px; letter-spacing:.02em; white-space:nowrap; backdrop-filter:blur(14px); box-shadow:0 4px 16px rgba(0,0,0,.045); }
.hint-mobile { display:none; }
.loading-status { position:absolute; left:50%; top:48%; z-index:2; display:flex; align-items:center; gap:10px; transform:translate(-50%,-50%); color:#6e6e73; font-size:12px; letter-spacing:.02em; transition:opacity .25s ease; }
.loading-status[hidden] { display:none; }
.loading-status span { width:8px; height:8px; border-radius:50%; background:#111; animation:pulse 1.1s ease-in-out infinite; }
.loading-status.is-hidden { opacity:0; pointer-events:none; }
.loading-status.is-error { color:#b42318; }
.loading-status.is-error span { background:#b42318; animation:none; }
.control-dock { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); width:min(980px,calc(100% - 44px)); display:flex; align-items:center; gap:24px; padding:17px 20px; border:1px solid rgba(0,0,0,.055); border-radius:24px; background:rgba(255,255,255,.82); box-shadow:0 24px 64px -32px rgba(0,0,0,.28); backdrop-filter:blur(20px) saturate(1.2); }
.screen-panel { width:410px; flex:0 0 auto; }
.panel-heading { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
.panel-heading h2 { margin:0; font-size:13px; font-weight:650; }
.panel-heading span { color:#99999f; font-size:10px; }
.ui-themes { display:flex; gap:2px; padding:3px; border-radius:10px; background:#eeeef0; }
.ui-themes button { min-width:0; flex:1; padding:7px 3px; border:0; border-radius:7px; background:transparent; color:#85858b; font-size:9px; font-weight:600; }
.ui-themes button[aria-selected=true] { background:#fff; color:#111; box-shadow:0 1px 5px rgba(0,0,0,.08); }
.finish-row { display:flex; align-items:center; gap:8px; margin-top:11px; color:#99999f; font-size:10px; }
.finish-swatch { width:17px; height:17px; padding:0; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px #d6d6d9; }
.finish-swatch[aria-pressed=true] { box-shadow:0 0 0 2px #111; }
.finish-night { background:linear-gradient(135deg,#111827,#5c6f99); }
.finish-star { background:linear-gradient(135deg,#fff,#d7d9df); }
.controls { min-width:0; flex:1; display:flex; align-items:center; gap:20px; padding-left:24px; border-left:1px solid #e5e5e8; }
.control-actions { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.secondary-action { display:inline-flex; align-items:center; gap:5px; min-height:32px; padding:0 8px; border:0; border-radius:9px; background:transparent; color:#717178; font-size:10px; font-weight:600; }
.secondary-action:hover { background:#f0f0f2; color:#111; }
.play { width:46px; height:46px; flex:0 0 auto; display:grid; place-items:center; border:0; border-radius:50%; background:#111; color:#fff; transition:transform .2s ease,background .2s ease; }
.play:hover { background:#333; transform:scale(1.03); }
.play svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.play #play-icon { fill:currentColor; stroke:none; }
.play svg[hidden] { display:none; }
.slider-wrap { min-width:0; flex:1; }
.slider-meta { display:flex; justify-content:space-between; margin:0 1px 3px; color:#9a9a9f; font-size:9px; }
.slider-meta output { color:#17171a; font-variant-numeric:tabular-nums; }
input[type=range] { width:100%; height:30px; margin:0; appearance:none; -webkit-appearance:none; display:block; background:transparent; cursor:ew-resize; touch-action:none; }
input[type=range]::-webkit-slider-runnable-track { height:6px; border-radius:999px; background:linear-gradient(to right,#111 var(--progress,100%),#dddde1 var(--progress,100%)); }
input[type=range]::-moz-range-track { height:6px; border-radius:999px; background:linear-gradient(to right,#111 var(--progress,100%),#dddde1 var(--progress,100%)); }
input[type=range]::-webkit-slider-thumb { width:20px; height:20px; margin-top:-7px; appearance:none; border:3px solid #111; border-radius:50%; background:#fff; box-shadow:0 2px 7px rgba(0,0,0,.16); }
input[type=range]::-moz-range-thumb { width:14px; height:14px; border:3px solid #111; border-radius:50%; background:#fff; }
.preset-row { display:flex; align-items:center; gap:5px; margin-top:5px; }
.preset-row > button { border:0; border-radius:7px; padding:5px 7px; background:#f0f0f2; color:#77777e; font-size:9px; }
.preset-row > button:hover { background:#e4e4e7; color:#111; }
.speed-select { display:inline-flex; align-items:center; gap:4px; margin-left:auto; color:#99999f; font-size:9px; white-space:nowrap; }
.speed-select select { border:0; border-radius:7px; padding:5px 6px; background:#f0f0f2; color:#55555c; font:inherit; }
button:focus-visible,input:focus-visible { outline:3px solid rgba(0,113,227,.25); outline-offset:3px; }
@keyframes pulse { 0%,100% { transform:scale(.72); opacity:.45; } 50% { transform:scale(1); opacity:1; } }
@media (max-width:700px) {
  main { min-height:560px; }
  #viewport { inset:0 0 218px; }
  .stage-hint { top:12px; }
  .hint-desktop { display:none; }
  .hint-mobile { display:inline; }
  .control-dock { width:calc(100% - 24px); bottom:calc(12px + env(safe-area-inset-bottom)); flex-direction:column; align-items:stretch; gap:14px; padding:14px; border-radius:20px; }
  .screen-panel { width:auto; }
  .panel-heading { margin-bottom:7px; }
  .ui-themes { overflow-x:auto; }
  .ui-themes button { min-width:58px; min-height:38px; font-size:11px; }
  .controls { flex:none; gap:14px; padding:13px 0 0; border-left:0; border-top:1px solid #e5e5e8; }
  .play { width:44px; height:44px; }
  .control-actions { gap:4px; }
  .secondary-action { padding:0 6px; }
  .preset-row { flex-wrap:wrap; }
  .speed-select { margin-left:0; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}