/* Public entry points share the learning workspace's light, rounded language.
   Scope these rules so the studio's dark performance canvas remains intact. */
:root .login {
  --navy: inherit; --ink: inherit; --muted: inherit; --blue: inherit;
  --blue-dark: inherit; --lime: inherit; --line: inherit;
  background: var(--surface, #fff);
  color: var(--ink, #342c45);
}
:root .login-header .brand { color: var(--ink, #342c45); }
:root .login-header .brand :is(.icon, .brand-dot) { color: var(--blue, #7850b6); }
:root .login-nav a { color: var(--muted, #746d7f); }
:root .login-nav a:hover { color: var(--blue-dark, #613c9a); }
:root .login-story {
  color: var(--ink, #342c45);
  background: var(--theme-soft, #f0eafa);
  border: 1px solid var(--line, #e5e1eb);
  border-bottom: 4px solid var(--card-edge, #ded5eb);
  border-radius: 22px;
}
:root .login-story h1 { color: var(--ink, #342c45); font-size: clamp(40px, 4.5vw, 60px); letter-spacing: -2px; }
:root .login-story h1 span,
:root .login-story .login-eyebrow,
:root .login-demo-link > .icon { color: var(--blue-dark, #613c9a); }
:root .login-story-copy > p:last-child,
:root .login-demo-link small { color: var(--muted, #746d7f); }
:root .login-demo-link { color: var(--blue-dark, #613c9a); border-color: var(--card-edge, #ded5eb); }
:root .login-record-art { align-self: center; }
:root .login-card { border-color: var(--line, #e5e1eb); border-bottom-width: 3px; border-radius: 20px; box-shadow: none; }
:root .login :is(.login-eyebrow, .login-description, .login-hint, .login-resend, .login-note, .login-footer) { color: var(--muted, #746d7f); }
:root .login-methods { background: var(--surface-soft, #faf8fd); border-color: var(--line, #e5e1eb); border-radius: 13px; }
:root .login-methods button { border-radius: 10px; color: var(--muted, #746d7f); }
:root .login-methods button[aria-pressed="true"] { color: var(--blue-dark, #613c9a); background: var(--theme-soft, #f0eafa); box-shadow: none; }
:root .login-form input { background: var(--surface, #fff); border-color: var(--line, #e5e1eb); border-radius: 12px; }
:root .login-form input:focus { border-color: var(--blue, #7850b6); box-shadow: 0 0 0 3px var(--theme-soft, #f0eafa); }
:root .login-form input::placeholder { color: var(--muted, #746d7f); opacity: .8; }
:root .login-card .primary { border-radius: 13px; border-bottom: 4px solid var(--accent-edge, #613c9a); }
:root .login-status { background: var(--theme-soft, #f0eafa); color: var(--blue-dark, #613c9a); border-radius: 12px; }

/* Guest Jams use the same welcoming entry and quiet workspace header. */
:root .jg-join { background: var(--surface, #fff); color: var(--ink, #342c45); }
:root .jg-join-art { background: var(--theme-soft, #f0eafa); color: var(--ink, #342c45); border-right: 1px solid var(--line, #e5e1eb); }
:root .jg-join-art .eyebrow { color: var(--blue-dark, #613c9a); }
:root .jg-join-art p, :root .jg-join-note { color: var(--muted, #746d7f); }
:root :is(.jg-join-art, .jg-header) .brand { color: var(--ink, #342c45); }
:root :is(.jg-join-art, .jg-header) .brand :is(.icon, .brand-dot) { color: var(--blue, #7850b6); }
:root .jg-stage-bars i { background: var(--blue, #7850b6); }
:root .jg-join-card { width: min(460px, calc(100% - 48px)); margin-block: 24px; border: 1px solid var(--line, #e5e1eb); border-bottom: 3px solid var(--card-edge, #ded5eb); border-radius: 20px; background: var(--surface, #fff); }
:root .jg-header { background: var(--surface, #fff); color: var(--ink, #342c45); border-bottom: 1px solid var(--line, #e5e1eb); }
:root .jg-header .secondary { color: var(--ink, #342c45); }
:root .jg-found-jam, :root .jg-name-choice { border-color: var(--line, #e5e1eb); }
:root .jg-join-modes button[aria-pressed="true"],
:root .jg-name-choice:has(input:checked),
:root .jg-avatar-option[aria-pressed="true"] { background: var(--theme-soft, #f0eafa); color: var(--blue-dark, #613c9a); border-color: var(--selection-line, #d6c6ec); }
:root .jg-name-choice:focus-within { outline-color: var(--blue, #7850b6); }
:root .jg-name-choice small { color: var(--muted, #746d7f); }
:root .jg-temporary { background: var(--surface-soft, #faf8fd); color: var(--muted, #746d7f); border: 1px solid var(--line, #e5e1eb); }

/* The demo retains its own component vocabulary but uses the same palette. */
:root .demo-page {
  --navy: inherit; --ink: inherit; --muted: inherit; --blue: inherit; --blue-dark: inherit;
  --demo-cream: var(--surface, #fff); --demo-paper: var(--surface, #fff);
  --demo-ink: var(--ink, #342c45); --demo-muted: var(--muted, #746d7f);
  --demo-line: var(--line, #e5e1eb); --demo-lime: var(--lime, #d0efa8);
  background: var(--surface, #fff);
}
:root .demo-page .brand :is(.icon, .brand-dot),
:root .demo-page .demo-kicker,
:root .demo-page .demo-hero h1 span,
:root .demo-page .demo-beaty-note strong { color: var(--blue-dark, #613c9a); }
:root .demo-page .demo-live-dot { background: var(--blue, #7850b6); }
:root .demo-page :is(button, a, summary, input, select, textarea):focus-visible,
:root .demo-page [role="tabpanel"]:focus-visible { outline-color: var(--blue, #7850b6); }
:root .demo-page .demo-button { background: var(--blue, #7850b6); border-radius: 13px; border-bottom: 4px solid var(--accent-edge, #613c9a); }
:root .demo-page .demo-button:hover { background: var(--blue-dark, #613c9a); }
:root .demo-page .demo-button--secondary { background: var(--surface, #fff); border-color: var(--line, #e5e1eb); color: var(--blue-dark, #613c9a) !important; }
:root .demo-page .demo-button--secondary:hover { background: var(--theme-soft, #f0eafa); border-color: var(--card-edge, #ded5eb); }
:root .demo-page .demo-workbench { border-radius: 20px; border-bottom-width: 3px; box-shadow: none; }
:root .demo-page :is(.demo-workbench-heading, .demo-memory-note, .demo-editor-footer) { background: var(--surface-soft, #faf8fd); color: var(--muted, #746d7f); border-color: var(--line, #e5e1eb); }
:root .demo-page .demo-steps > button { color: var(--muted, #746d7f); }
:root .demo-page .demo-steps > button > span:first-child { color: inherit; }
:root .demo-page .demo-steps > button:hover,
:root .demo-page .demo-steps > button[aria-selected="true"] { color: var(--blue-dark, #613c9a); background: var(--theme-soft, #f0eafa); }
:root .demo-page .demo-steps > button[aria-selected="true"]::after { background: var(--blue, #7850b6); }
:root .demo-page #demo-studio { --rw-accent: var(--blue, #7850b6); --rw-soft: var(--theme-soft, #f0eafa); --rw-border: var(--line, #e5e1eb); --rw-muted: var(--muted, #746d7f); }
:root .demo-page #demo-studio .rw-kicker { color: var(--blue-dark, #613c9a); }
:root .demo-page #demo-studio .rw-header-actions button { border-color: var(--line, #e5e1eb); color: var(--blue-dark, #613c9a) !important; border-radius: 12px; }
:root .demo-page #demo-studio .rw-header-actions button[aria-pressed="true"] { background: var(--theme-soft, #f0eafa); border-color: var(--blue, #7850b6); }
:root .demo-page #demo-studio .rw-editor { border-radius: 16px; border-bottom-width: 3px; }
:root .demo-page #demo-studio .rw-line:focus-within { border-color: var(--card-edge, #ded5eb); background: var(--surface-soft, #faf8fd); }
:root .demo-page #demo-studio .rw-line textarea { color: var(--ink, #342c45); }
:root .demo-page #demo-studio .lc-controls button:not(.lc-delete),
:root .demo-page .demo-text-button { color: var(--blue-dark, #613c9a); }
:root .demo-page #demo-studio .lc-controls button:hover:not(:disabled) { background: var(--theme-soft, #f0eafa); border-color: var(--card-edge, #ded5eb); }
:root .demo-page #demo-studio .rw-editor-bottom > button { color: var(--blue-dark, #613c9a) !important; border-color: var(--line, #e5e1eb); border-radius: 10px; }
:root .demo-page .demo-character-preview { border-color: var(--line, #e5e1eb); border-bottom-width: 3px; border-radius: 20px; background: var(--theme-soft, #f0eafa); }
:root .demo-page :is(.demo-preview-label, .demo-character-preview p, .demo-character-controls legend, .demo-look-options > label) { color: var(--muted, #746d7f); }
:root .demo-page .demo-shapes button { border-color: var(--line, #e5e1eb); border-bottom-width: 3px; border-radius: 13px; color: var(--ink, #342c45); }
:root .demo-page .demo-shapes button:hover { background: var(--surface-soft, #faf8fd); }
:root .demo-page .demo-shapes button[aria-pressed="true"] { background: var(--theme-soft, #f0eafa); border-color: var(--blue, #7850b6); box-shadow: none; color: var(--blue-dark, #613c9a); }
:root .demo-page .demo-color[aria-pressed="true"] { outline-color: var(--blue, #7850b6); }
:root .demo-page .demo-look-options select { border-color: var(--line, #e5e1eb); border-radius: 12px; }
:root .demo-page .demo-footer .public-info-links { color: var(--muted, #746d7f); }
/* Music controls remain deliberately dark with a contrasting transport button. */
:root .demo-page :is(.demo-stage, .rw-dock) .demo-button { background: var(--demo-lime); border-color: color-mix(in srgb, var(--demo-lime) 75%, #253f2e); color: var(--theme-highlight-ink, #253f2e) !important; }
:root .demo-page :is(.demo-stage, .rw-dock) .demo-button:hover { filter: brightness(1.05); }
:root .demo-page :is(.demo-stage, .rw-dock) :is(button, a, select, input):focus-visible { outline-color: var(--demo-lime); }

/* These pages are also served independently of the application shell. Fallback
   values keep the same family styling without publishing gated information. */
body.public-page {
  --public-ink: var(--ink, #342c45); --public-muted: var(--muted, #746d7f);
  --public-purple: var(--blue, #7850b6); --public-lime: var(--lime, #d0efa8);
  --public-paper: var(--surface, #fff); --public-line: var(--line, #e5e1eb);
  --public-radius: 20px;
}
.public-page .public-header { min-height: 82px; }
.public-page .public-brand { font-size: 23px; }
.public-page .public-brand > svg { color: var(--public-purple); }
.public-page :is(.public-eyebrow, .feature-number, .plan-features li::before, .pricing-faq summary::after) { color: var(--public-purple); }
.public-page .public-button { border-radius: 13px; border-bottom: 4px solid var(--accent-edge, #613c9a); background: var(--public-purple); }
.public-page .public-button:hover { background: var(--blue-dark, #613c9a); }
.public-page .public-button--outline { background: var(--public-paper); border-color: var(--public-line); color: var(--public-ink); }
.public-page .public-button--outline:hover { background: var(--theme-soft, #f0eafa); }
.public-page :is(.price-card, .contact-card, .public-callout) { border-bottom-width: 3px; border-radius: 20px; box-shadow: none; }
.public-page .price-card--featured { border-color: var(--card-edge, #ded5eb); background: var(--theme-soft, #f0eafa); color: var(--public-ink); }
.public-page .price-card--featured :is(.plan-description, .price-period, .price-billing, .plan-footnote, .plan-alternative) { color: var(--public-muted); }
.public-page .price-card--featured .plan-alternative { border-color: var(--public-line); background: var(--public-paper); }
.public-page .price-card--featured .plan-alternative strong { color: var(--public-ink); }
.public-page .price-card--featured .plan-features { border-color: var(--card-edge, #ded5eb); }
.public-page .price-card--featured .plan-features li::before { color: var(--public-purple); }
.public-page :is(.public-button--light, .price-card--featured .public-button) { color: var(--theme-highlight-ink, #334b29); background: var(--public-lime); border-color: color-mix(in srgb, var(--public-lime) 75%, var(--public-ink)); }
.public-page :is(.public-button--light, .price-card--featured .public-button):hover { background: var(--public-lime); filter: brightness(1.04); }
.public-page :is(.plan-label, .currency-switch, .feature-band, .public-notice, .draft-note, .document-content th) { background: var(--theme-soft, #f0eafa); border-color: var(--public-line); color: var(--public-ink); }
.public-page .currency-switch :is(button,a) { color: var(--public-muted); }
.public-page .currency-switch :is(button[aria-pressed="true"],a[aria-current="page"]) { color: var(--public-purple); box-shadow: none; }
.public-page .document-content :is(p, ul, ol) { color: var(--public-muted); }
.public-page .document-content a { color: var(--public-purple); }
@media (min-width: 761px) {
  :root .login-layout { flex: none; margin-block: auto; }
}
@media (max-width: 760px) {
  :root .login-card { border-radius: 20px; }
}
@media (max-width: 750px) {
  :root .jg-join-art { border-right: 0; border-bottom: 1px solid var(--line, #e5e1eb); }
}
@media print {
  .public-page :is(.price-card--featured, .feature-band, .public-notice, .draft-note, .public-button) { color: #000; background: #fff; border-color: #ccc; }
}