/* Shared tokens apply to the live page and to isolated owner previews. */
[data-platform-palette] {
  --navy: #142337;
  --ink: #1c2d3e;
  --muted: #627283;
  --blue: #315edf;
  --blue-dark: #244cc1;
  --lime: #b9ed86;
  --bg: #f4f6f8;
  --line: #dce3e9;
  --theme-soft: #edf2fc;
  --theme-highlight-ink: #203928;
  --theme-dark-muted: #b6c4d4;
  --theme-dark-line: #42546b;
  --theme-dark-panel: #243b51;
  --theme-stage: #111c30;
  --theme-stage-glow: #3648a94d;
  --theme-stage-glow-two: #50885929;
  --theme-stage-panel: #26344c;
  --theme-motif: none;
}
[data-platform-palette="halloween"] {
  --navy: #29203d;
  --ink: #33283f;
  --muted: #71647b;
  --blue: #7144a1;
  --blue-dark: #5d348a;
  --lime: #f4c08a;
  --bg: #f8f4fa;
  --line: #e5dce9;
  --theme-soft: #f1e9f7;
  --theme-highlight-ink: #442b23;
  --theme-dark-muted: #d1c5df;
  --theme-dark-line: #655478;
  --theme-dark-panel: #463453;
  --theme-stage: #21182e;
  --theme-stage-glow: #9260c74d;
  --theme-stage-glow-two: #eda96d26;
  --theme-stage-panel: #3e2d51;
}
[data-platform-palette="winter"] {
  --navy: #17324a;
  --ink: #223849;
  --muted: #5f7383;
  --blue: #226b87;
  --blue-dark: #19576f;
  --lime: #b5e9f4;
  --bg: #f0f7fa;
  --line: #d4e4eb;
  --theme-soft: #e3f1f6;
  --theme-highlight-ink: #173d4c;
  --theme-dark-muted: #b9d5e2;
  --theme-dark-line: #48728a;
  --theme-dark-panel: #25485f;
  --theme-stage: #102c40;
  --theme-stage-glow: #479fb34d;
  --theme-stage-glow-two: #85b5ea26;
  --theme-stage-panel: #24465c;
}
[data-platform-palette="spring"] {
  --navy: #183f37;
  --ink: #273e35;
  --muted: #617467;
  --blue: #286950;
  --blue-dark: #1e5540;
  --lime: #d0e69a;
  --bg: #f3f8f1;
  --line: #d9e5d4;
  --theme-soft: #e7f0e3;
  --theme-highlight-ink: #2c4227;
  --theme-dark-muted: #c1d9cc;
  --theme-dark-line: #547a66;
  --theme-dark-panel: #2c5648;
  --theme-stage: #142f29;
  --theme-stage-glow: #6aa77a42;
  --theme-stage-glow-two: #e3a9c82b;
  --theme-stage-panel: #294c3f;
}
[data-platform-palette="summer"] {
  --navy: #164047;
  --ink: #263d43;
  --muted: #627478;
  --blue: #126c80;
  --blue-dark: #0d5567;
  --lime: #ffdf85;
  --bg: #fffaf0;
  --line: #e4e1ce;
  --theme-soft: #f6efd9;
  --theme-highlight-ink: #424028;
  --theme-dark-muted: #bedbdd;
  --theme-dark-line: #4b7980;
  --theme-dark-panel: #28565e;
  --theme-stage: #11323b;
  --theme-stage-glow: #4ba4af47;
  --theme-stage-glow-two: #e5c06029;
  --theme-stage-panel: #254d57;
}
[data-platform-palette="autumn"] {
  --navy: #3d2c29;
  --ink: #46322d;
  --muted: #7a6960;
  --blue: #995136;
  --blue-dark: #7d402a;
  --lime: #f2ce93;
  --bg: #fcf7f0;
  --line: #e8ddd0;
  --theme-soft: #f6eadc;
  --theme-highlight-ink: #493127;
  --theme-dark-muted: #decbbd;
  --theme-dark-line: #866454;
  --theme-dark-panel: #594037;
  --theme-stage: #30211f;
  --theme-stage-glow: #bb714b45;
  --theme-stage-glow-two: #a4b16d29;
  --theme-stage-panel: #51382f;
}

/* Trusted, monochrome SVG masks inherit the selected palette. */
[data-platform-motif="beats"] { --theme-motif: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M44%2067V25l35-8v40M44%2036l35-8%22%2F%3E%3Cellipse%20cx%3D%2233%22%20cy%3D%2267%22%20rx%3D%2211%22%20ry%3D%228%22%2F%3E%3Cellipse%20cx%3D%2268%22%20cy%3D%2257%22%20rx%3D%2211%22%20ry%3D%228%22%2F%3E%3Cpath%20d%3D%22M15%2036v12m-8-6h16M72%2082v8m-4-4h8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
[data-platform-motif="pumpkins"] { --theme-motif: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M49%2026c-2-12%208-16%2011-13M53%2025c5-9%2015-9%2018-5-6%207-12%207-18%205%22%2F%3E%3Cpath%20d%3D%22M50%2029C13%2012%206%2075%2034%2083q16%207%2032%200c28-8%2022-71-16-54Z%22%2F%3E%3Cpath%20d%3D%22M42%2032c-12%2013-15%2036-6%2049m22-49c12%2013%2015%2036%206%2049M39%2054v3m22-3v3m-19%209q8%209%2016%200%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
[data-platform-motif="snowflakes"] { --theme-motif: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M50%2011v78M16%2030l68%2040M16%2070l68-40M39%2017l11%2010%2011-10M39%2083l11-10%2011%2010M17%2042l14-3-4-14M73%2075l-4-14%2014-3M27%2075l4-14-14-3M83%2042l-14-3%204-14%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%228%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
[data-platform-motif="blossoms"] { --theme-motif: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M50%2037c-27-36-41%206-16%2014-40%2014-7%2041%2012%2016%203%2041%2042%2019%2024-7%2039-6%2016-42-8-21-3-29-26-27-12-2Z%22%2F%3E%3Ccircle%20cx%3D%2252%22%20cy%3D%2252%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M20%2017c13-2%2018%207%2017%2014-12%201-17-4-17-14M81%2080l7%206m-1-12v12%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
[data-platform-motif="sunshine"] { --theme-motif: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2224%22%2F%3E%3Cpath%20d%3D%22M50%206v9m0%2070v9M6%2050h9m70%200h9M19%2019l7%207m48%2048%207%207M19%2081l7-7m48-48%207-7M42%2046v2m16-2v2m-16%209q8%208%2016%200%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
[data-platform-motif="leaves"] { --theme-motif: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M26%2076C3%2044%2038%2013%2073%2014c3%2035-10%2072-47%2062ZM20%2085l39-48M31%2072l1-23m9%2010%2021-2%22%2F%3E%3Cpath%20d%3D%22M76%2072c-3-13%205-22%2017-24%202%2014-5%2025-17%2024m-6%208%2014-22%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

/* Keep the original classic/beats appearance intact. */
:root[data-platform-palette]:not([data-platform-palette="classic"]) .login-art,
:root[data-platform-palette]:not([data-platform-palette="classic"]) .sidebar {
  background: radial-gradient(ellipse at 100% 0, var(--theme-stage-glow), transparent 65%), var(--navy);
  color: var(--theme-dark-muted);
}
:root[data-platform-palette]:not([data-platform-palette="classic"]) :is(.workspace-label, .workspace-switch, .sidebar-note, .login-copy .eyebrow, .login-copy p, .login-art small) {
  color: var(--theme-dark-muted);
}
:root[data-platform-palette]:not([data-platform-palette="classic"]) .workspace-switch select {
  background: var(--theme-dark-panel);
  border-color: var(--theme-dark-line);
}
:root[data-platform-palette]:not([data-platform-palette="classic"]) .nav-item:hover,
:root[data-platform-palette]:not([data-platform-palette="classic"]) .profile .icon-button:hover {
  background: var(--theme-dark-panel);
}
:root[data-platform-palette]:not([data-platform-palette="classic"]) .nav-item.active {
  background: var(--lime);
  color: var(--theme-highlight-ink);
}
:root[data-platform-palette]:not([data-platform-palette="classic"]) .profile { border-color: var(--theme-dark-line); }
:root[data-platform-palette]:not([data-platform-palette="classic"]) .profile .icon-button { color: var(--theme-dark-muted); }
:root[data-platform-palette]:not([data-platform-palette="classic"]) .eyebrow,
:root[data-platform-palette]:not([data-platform-palette="classic"]) .seasonal-tabs button[aria-current="page"],
:root[data-platform-palette]:not([data-platform-palette="classic"]) .rewards-choice[aria-pressed="true"] .rewards-choice-state { color: var(--blue-dark); }
:root[data-platform-palette]:not([data-platform-palette="classic"]) .login-copy .eyebrow { color: var(--theme-dark-muted); }
:root[data-platform-palette]:not([data-platform-palette="classic"]) .login-art { color: #fff; }
:root[data-platform-palette]:not([data-platform-palette="classic"]) :is(.seasonal-collection-card, .rewards-avatar-panel) { background: linear-gradient(155deg, var(--theme-soft), #fff 65%); }
:root[data-platform-palette]:not([data-platform-palette="classic"]) :is(.seasonal-tabs, .rewards-tabs, .rewards-choice[aria-pressed="true"]) { background: var(--theme-soft); }
:root[data-platform-palette]:not([data-platform-palette="classic"]) :is(.primary, .text-button, input, select, textarea, button, a):focus-visible { outline-color: var(--blue); }
:root[data-platform-palette]:not([data-platform-palette="classic"]) :is(input, select, textarea):focus { box-shadow: 0 0 0 3px var(--theme-soft); }
:root[data-platform-palette]:not([data-platform-palette="classic"]) :is(.sidebar, .login-art) :is(button, a, select):focus-visible { outline-color: var(--lime); }

/* Motifs sit behind content and never intercept pointer input. */
:root[data-platform-motif]:not([data-platform-motif="beats"]) .login-art,
:root[data-platform-motif]:not([data-platform-motif="beats"]) .topbar { position: relative; isolation: isolate; }
:root[data-platform-motif]:not([data-platform-motif="beats"]) .sidebar { isolation: isolate; }
:root[data-platform-motif]:not([data-platform-motif="beats"]) .login-art::after,
:root[data-platform-motif]:not([data-platform-motif="beats"]) .sidebar::after,
:root[data-platform-motif]:not([data-platform-motif="beats"]) .topbar::after,
:root[data-platform-motif]:not([data-platform-motif="beats"]) .stage-surface::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background: var(--lime);
  -webkit-mask: var(--theme-motif) center / contain no-repeat;
  mask: var(--theme-motif) center / contain no-repeat;
}
:root[data-platform-motif]:not([data-platform-motif="beats"]) .login-art::after { width: 270px; height: 270px; right: -55px; bottom: 6%; opacity: .085; transform: rotate(-14deg); }
:root[data-platform-motif]:not([data-platform-motif="beats"]) .sidebar::after { width: 114px; height: 114px; right: 0; bottom: 116px; opacity: .075; transform: rotate(14deg); }
:root[data-platform-motif]:not([data-platform-motif="beats"]) .topbar::after { width: 80px; height: 80px; right: 26%; top: -2px; opacity: .07; background: var(--blue); transform: rotate(-15deg); }

/* Dark music controls need light links and focus rings in every palette. */
:root[data-platform-palette]:not([data-platform-palette="classic"]) .beat-panel { background: var(--navy); }
:root[data-platform-palette]:not([data-platform-palette="classic"]) .beat-panel select { background: var(--theme-dark-panel); border-color: var(--theme-dark-line); }
:root[data-platform-palette]:not([data-platform-palette="classic"]) .beat-panel .text-button { color: var(--lime); }
:root[data-platform-palette]:not([data-platform-palette="classic"]) .beat-panel .play-button { color: var(--theme-highlight-ink); }
:root[data-platform-palette]:not([data-platform-palette="classic"]) .beat-panel :is(button, input, select):focus-visible { outline-color: var(--lime); }

/* Stage stays dark with uninterrupted space for performers and the visualizer. */
:root[data-platform-palette]:not([data-platform-palette="classic"]) .stage-surface {
  --stage-muted: var(--theme-dark-muted);
  border-color: var(--theme-dark-line);
  background: radial-gradient(ellipse at 12% 5%, var(--theme-stage-glow), transparent 48%), radial-gradient(ellipse at 95% 35%, var(--theme-stage-glow-two), transparent 45%), var(--theme-stage);
}
:root[data-platform-palette]:not([data-platform-palette="classic"]) .stage-surface::backdrop { background: var(--theme-stage); }
:root[data-platform-motif]:not([data-platform-motif="beats"]) .stage-surface::before { width: clamp(150px, 23vw, 260px); height: clamp(150px, 23vw, 260px); top: 120px; right: -60px; opacity: .045; transform: rotate(14deg); }
:root[data-platform-palette]:not([data-platform-palette="classic"]) .stage-topbar { background: var(--navy); }
:root[data-platform-palette]:not([data-platform-palette="classic"]) .stage-control-deck { background: var(--navy); border-color: var(--theme-dark-line); }
:root[data-platform-palette]:not([data-platform-palette="classic"]) :is(.stage-secondary, .stage-track-badge) { background: var(--theme-stage-panel); border-color: var(--theme-dark-line); }
:root[data-platform-palette]:not([data-platform-palette="classic"]) .stage-secondary:hover { background: var(--theme-dark-panel); }
:root[data-platform-palette]:not([data-platform-palette="classic"]) .stage-play { color: var(--theme-highlight-ink); }
:root[data-platform-palette]:not([data-platform-palette="classic"]) .stage-play:hover { background: var(--lime); filter: brightness(1.07); }
:root[data-platform-palette]:not([data-platform-palette="classic"]) .stage-equalizer i { background: linear-gradient(var(--lime), var(--theme-dark-muted)); }
:root[data-platform-palette]:not([data-platform-palette="classic"]) .stage-surface :is(input:not([type="range"]):not([type="checkbox"]), select) { background: var(--theme-stage-panel); border-color: var(--theme-dark-line); }
:root[data-platform-palette]:not([data-platform-palette="classic"]) .stage-surface :is(input, select):focus { border-color: var(--lime); box-shadow: 0 0 0 3px var(--theme-stage-panel); }
:root[data-platform-palette]:not([data-platform-palette="classic"]) .stage-surface :is(button, input, select):focus-visible { outline-color: var(--lime); }
:root[data-platform-palette]:not([data-platform-palette="classic"]) .stage-horn-deck { border-color: var(--theme-dark-line); }

/* Isolated previews use their own local tokens, regardless of the active theme. */
.platform-theme-preview { width: 100%; min-width: 0; container-type: inline-size; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-align: left; line-height: 1.35; }
.pt-preview-window { width: 100%; font-size: clamp(7px, 2.5cqi, 11px); }
.pt-preview-chrome { display: flex; align-items: center; gap: 4px; height: 27px; padding: 0 11px; border-bottom: 1px solid var(--line); background: white; }
.pt-preview-chrome > span { width: 5px; height: 5px; border-radius: 50%; background: var(--line); }
.pt-preview-chrome b { margin-left: auto; font-size: .7em; color: var(--muted); font-weight: 600; letter-spacing: .2px; }
.pt-preview-workspace { display: grid; grid-template-columns: 29% 1fr; min-height: 133px; }
.pt-preview-sidebar { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 8px; overflow: hidden; padding: 16px 9px; color: var(--theme-dark-muted); background: var(--navy); }
.pt-preview-sidebar > b { white-space: nowrap; color: white; font-size: .96em; margin-bottom: 10px; letter-spacing: -.4px; }
.pt-preview-sidebar > b > i { color: var(--lime); font-style: normal; }
.pt-preview-nav { padding: 5px 6px; font-size: .73em; border-radius: 4px; white-space: nowrap; }
.pt-preview-nav.is-active { color: var(--theme-highlight-ink); background: var(--lime); font-weight: 700; }
.pt-preview-studio { position: relative; isolation: isolate; overflow: hidden; padding: 17px 13px 13px; }
.pt-preview-studio > small { display: block; color: var(--blue-dark); font-size: .58em; font-weight: 750; letter-spacing: .55px; margin-bottom: 5px; }
.pt-preview-studio > strong { display: block; font-size: 1.62em; letter-spacing: -.45px; line-height: 1.15; margin-bottom: 13px; }
.pt-preview-lesson { display: flex; align-items: center; gap: 7px; padding: 9px; border: 1px solid var(--line); background: white; border-radius: 7px; margin-bottom: 10px; }
.pt-preview-note { display: grid; place-items: center; flex: 0 0 23px; height: 23px; background: var(--theme-soft); color: var(--blue); font-size: 1.5em; border-radius: 6px; }
.pt-preview-lesson > div { flex: 1; }
.pt-preview-lesson b { display: block; font-size: .76em; }
.pt-preview-lesson > div > span { display: block; width: 66%; height: 3px; margin-top: 5px; border-radius: 5px; background: var(--line); }
.pt-preview-lesson > i { font-style: normal; color: var(--muted); }
.pt-preview-button { display: inline-block; background: var(--blue); color: white; border-radius: 5px; font-size: .7em; font-weight: 700; padding: 6px 10px; }
.pt-preview-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding-top: 1px; background: var(--line); }
.pt-preview-signin { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 99px; background: white; overflow: hidden; }
.pt-preview-signin-art { position: relative; isolation: isolate; display: flex; align-items: center; background: var(--navy); color: white; padding: 12px 9px 17px; }
.pt-preview-signin-art > b { font-size: 1.32em; letter-spacing: -.3px; line-height: 1.15; }
.pt-preview-signin-art em { color: var(--lime); font-style: normal; }
.pt-preview-signin-form { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 11px 9px 16px; }
.pt-preview-signin-form b { font-size: .73em; letter-spacing: -.2px; margin-bottom: 3px; }
.pt-preview-signin-form i { display: block; height: 7px; background: var(--bg); border: 1px solid var(--line); border-radius: 2px; }
.pt-preview-signin-form em { display: block; padding: 3px; border-radius: 2px; background: var(--blue); color: white; font-style: normal; text-align: center; font-size: .52em; }
.pt-preview-signin > small { position: absolute; bottom: 5px; left: 8px; color: var(--theme-dark-muted); font-size: .55em; }
.pt-preview-stage { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 13px 10px 9px; color: white; background: radial-gradient(ellipse at 10% 0, var(--theme-stage-glow), transparent 90%), var(--theme-stage); }
.pt-preview-stage > small { font-size: .56em; letter-spacing: .8px; color: var(--lime); font-weight: 700; }
.pt-preview-stage > b { font-size: 1.5em; margin: 3px 0 4px; letter-spacing: -.45px; }
.pt-preview-bars { display: flex; align-items: center; justify-content: center; height: 26px; gap: 3px; }
.pt-preview-bars i { height: 13px; width: 3px; border-radius: 3px; background: var(--lime); }
.pt-preview-bars i:nth-child(2n) { height: 23px; }
.pt-preview-bars i:nth-child(3n) { height: 17px; }
.pt-preview-bars i:nth-child(4n) { height: 9px; }
.pt-preview-sidebar-motif, .pt-preview-studio-motif, .pt-preview-signin-motif, .pt-preview-stage-motif { position: absolute; z-index: -1; pointer-events: none; width: 62px; height: 62px; background: var(--lime); -webkit-mask: var(--theme-motif) center / contain no-repeat; mask: var(--theme-motif) center / contain no-repeat; }
.pt-preview-sidebar-motif { bottom: -8px; right: -9px; transform: rotate(-18deg); opacity: .2; }
.pt-preview-studio-motif { top: -7px; right: -5px; transform: rotate(16deg); width: 75px; height: 75px; background: var(--blue); opacity: .08; }
.pt-preview-signin-motif { width: 40px; height: 40px; right: -8px; bottom: 1px; transform: rotate(10deg); opacity: .18; }
.pt-preview-stage-motif { width: 74px; height: 74px; right: -18px; top: -7px; transform: rotate(12deg); opacity: .13; }
.platform-theme-preview[data-platform-motif="beats"] :is(.pt-preview-sidebar-motif, .pt-preview-studio-motif, .pt-preview-signin-motif, .pt-preview-stage-motif) { display: none; }
@media (max-width: 700px) {
  :root[data-platform-motif]:not([data-platform-motif="beats"]) .topbar::after { display: none; }
  :root[data-platform-motif]:not([data-platform-motif="beats"]) .sidebar::after { width: 70px; height: 70px; right: 8px; bottom: 12px; }
  :root[data-platform-motif]:not([data-platform-motif="beats"]) .stage-surface::before { opacity: .025; }
}
@media (prefers-reduced-motion: reduce) {
  .platform-theme-preview *, .platform-theme-preview *::before, .platform-theme-preview *::after { animation: none !important; transition: none !important; }
}
@media print {
  :root[data-platform-motif] .login-art::after, :root[data-platform-motif] .sidebar::after, :root[data-platform-motif] .topbar::after, :root[data-platform-motif] .stage-surface::before { display: none; }
}