.od1-palette-page {
  --palette-page:#f7f4f5;
  --palette-ink:#171316;
  --palette-muted:#6f666b;
  --palette-panel:#fffafd;
  --palette-line:rgba(34,23,29,.11);
  --palette-accent:#f33f79;
  --palette-accent-ink:#fff;
  --palette-shadow:rgba(84,30,53,.18);
  display:grid;
  padding:max(72px,calc(env(safe-area-inset-top) + 62px)) max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  place-items:center;
  overflow:hidden;
  color:var(--palette-ink);
  background:radial-gradient(circle at 50% -12%,color-mix(in srgb,var(--od1-game-accent) 20%,transparent),transparent 35rem),var(--palette-page);
  touch-action:manipulation;
  user-select:none;
}
.od1-palette-layout { display:grid; width:min(100%,560px); height:100%; min-height:0; grid-template-rows:auto auto minmax(280px,1fr) auto; gap:10px; }
.od1-palette-header { text-align:center; }
.od1-palette-header p { margin:0 0 3px; color:var(--palette-accent); font-size:.62rem; font-weight:950; letter-spacing:.18em; text-transform:uppercase; }
.od1-palette-header h1 { margin:0; font-size:clamp(1.55rem,5vw,2.35rem); letter-spacing:-.055em; line-height:1; }
.od1-palette-hud { display:flex; align-items:end; justify-content:space-between; gap:18px; }
.od1-palette-hud div:last-child { text-align:right; }
.od1-palette-hud span { display:block; margin-bottom:2px; color:var(--palette-muted); font-size:.65rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.od1-palette-hud strong { display:block; font-size:clamp(1.7rem,6vw,2.55rem); font-variant-numeric:tabular-nums; letter-spacing:-.045em; line-height:1; }
.od1-palette-shell { position:relative; min-height:0; overflow:hidden; border:1px solid var(--palette-line); border-radius:28px 28px 14px 14px; background:var(--palette-panel); box-shadow:0 18px 48px var(--palette-shadow); isolation:isolate; transition:border-color .22s ease,box-shadow .22s ease,filter .22s ease; }
.od1-palette-shell.is-beat { border-color:color-mix(in srgb,var(--palette-accent) 65%,var(--palette-line)); box-shadow:0 18px 52px var(--palette-shadow),0 0 28px color-mix(in srgb,var(--palette-accent) 28%,transparent); }
.od1-palette-page[data-palette-phase="1"] .od1-palette-shell { --palette-accent:#ff6b57; }
.od1-palette-page[data-palette-phase="2"] .od1-palette-shell { --palette-accent:#19a7ce; }
.od1-palette-page[data-palette-phase="3"] .od1-palette-shell { --palette-accent:#b05be6; }
.od1-palette-shell canvas { display:block; width:100%; height:100%; min-height:280px; outline:0; cursor:pointer; touch-action:none; }
.od1-palette-shell canvas:focus-visible { box-shadow:inset 0 0 0 3px var(--palette-accent); }
.od1-palette-curtain { position:absolute; z-index:2; inset:0; display:grid; padding:22px; place-items:center; overflow:auto; background:linear-gradient(to bottom,transparent 12%,color-mix(in srgb,var(--palette-panel) 96%,transparent) 48%); transition:opacity .18s ease; cursor:pointer; }
.od1-palette-curtain.is-hidden { visibility:hidden; opacity:0; pointer-events:none; }
.od1-palette-card { width:min(100%,360px); margin-top:18%; text-align:center; }
.od1-palette-card h2 { margin:0 0 9px; color:var(--palette-ink); font-size:clamp(2rem,8vw,3rem); letter-spacing:-.06em; line-height:.95; }
.od1-palette-card>p:not(.od1-game-eyebrow) { margin:0 auto 18px; max-width:31ch; color:var(--palette-muted); font-size:.85rem; line-height:1.5; }
.od1-palette-page .od1-game-eyebrow { color:var(--palette-accent)!important; }
.od1-palette-card .od1-game-song-picker { width:min(100%,330px); margin:0 auto 16px; gap:5px; }
.od1-palette-card .od1-game-song-picker label { color:var(--palette-muted); }
.od1-palette-card .od1-game-song-picker select { min-height:44px; color:var(--palette-ink); border-color:var(--palette-line); background:var(--palette-panel); }
.od1-palette-card .od1-game-song-picker small { color:var(--palette-muted); }
.od1-palette-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.od1-palette-actions button,.od1-palette-actions a { display:inline-grid; min-width:150px; min-height:48px; margin:0!important; padding:0 20px; place-items:center; border:1px solid var(--palette-accent); border-radius:999px; color:var(--palette-accent-ink); background:var(--palette-accent); box-shadow:0 6px 0 color-mix(in srgb,var(--palette-accent) 68%,#62072d); font-family:inherit; font-size:.86rem; font-weight:900; line-height:1; text-decoration:none; cursor:pointer; }
.od1-palette-actions button:active,.od1-palette-actions a:active { transform:translateY(3px); box-shadow:0 3px 0 color-mix(in srgb,var(--palette-accent) 68%,#62072d); }
.od1-palette-actions a { min-width:90px; color:var(--palette-ink); border-color:var(--palette-line); background:var(--palette-panel); box-shadow:none; }
.od1-palette-actions [hidden] { display:none!important; }
.od1-palette-perfect { position:absolute; z-index:1; top:17%; left:50%; color:var(--palette-ink); font-size:.82rem; font-weight:950; opacity:0; transform:translate(-50%,-8px); pointer-events:none; }
.od1-palette-perfect.is-pop { animation:od1-palette-pop .55s ease-out; }
@keyframes od1-palette-pop { 0%{opacity:0;transform:translate(-50%,8px) scale(.86)}25%{opacity:1;transform:translate(-50%,0) scale(1.08)}100%{opacity:0;transform:translate(-50%,-20px)} }
.od1-palette-status { min-height:18px; margin:0; color:var(--palette-muted); font-size:.68rem; font-weight:700; text-align:center; }
@media (prefers-color-scheme:dark) {
  .od1-palette-page { --palette-page:#151114;--palette-ink:#fff8fb;--palette-muted:#b9adb3;--palette-panel:#20191d;--palette-line:rgba(255,255,255,.1);--palette-accent:#ff5c91;--palette-accent-ink:#1d0710;--palette-shadow:rgba(0,0,0,.35); }
}
@media (max-height:650px) {
  .od1-palette-page { padding-top:max(60px,calc(env(safe-area-inset-top) + 52px)); }
  .od1-palette-layout { gap:6px; grid-template-rows:auto auto minmax(220px,1fr) auto; }
  .od1-palette-header p,.od1-palette-hud span { display:none; }
  .od1-palette-header h1 { font-size:1.35rem; }
  .od1-palette-hud strong { font-size:1.55rem; }
  .od1-palette-card { margin-top:6%; }
}
@media (prefers-reduced-motion:reduce) { .od1-palette-curtain{transition:none}.od1-palette-perfect.is-pop{animation-duration:.01ms} }