/* Semantic palettes apply to the app, conversation surfaces and dialogs together. */
@property --glow-a{syntax:'<color>';inherits:true;initial-value:#456b30}
@property --glow-b{syntax:'<color>';inherits:true;initial-value:#235c55}
:root{transition:--glow-a .65s ease,--glow-b .65s ease}:root:has(body.no-motion){transition:none}
:root,[data-theme=moss]{--bg:#101412;--surface:#191f1b;--raised:#252e27;--text:#f1f5ef;--muted:#a8b5a7;--accent:#d5f5a3;--accent-ink:#172216;--glow-a:#456b30;--glow-b:#235c55;--border:#ffffff12;--ambient-opacity:.45}
[data-theme=nocturne]{--bg:#0c111c;--surface:#151e30;--raised:#233149;--text:#edf3ff;--muted:#a4b5cf;--accent:#a3c9ff;--accent-ink:#112441;--glow-a:#294d9d;--glow-b:#2d5271}
[data-theme=iris]{--bg:#15101e;--surface:#211a2e;--raised:#32283f;--text:#f5efff;--muted:#bbaaca;--accent:#d5b5ff;--accent-ink:#2b1743;--glow-a:#70409d;--glow-b:#39358a}
[data-theme=ember]{--bg:#19120e;--surface:#251d17;--raised:#3a2b21;--text:#fff3e8;--muted:#c5b2a1;--accent:#ffc396;--accent-ink:#3d210e;--glow-a:#914923;--glow-b:#6e2b43}
[data-theme=rosewater]{--bg:#191116;--surface:#281c25;--raised:#3d2936;--text:#fff0f7;--muted:#c6aeba;--accent:#ffb5d1;--accent-ink:#42172b;--glow-a:#8c355d;--glow-b:#63397f}
[data-theme=porcelain]{color-scheme:light;--bg:#f3f3ed;--surface:#fff;--raised:#e5e9df;--text:#19251f;--muted:#506156;--accent:#315d3d;--accent-ink:#fff;--glow-a:#bad2a6;--glow-b:#a4cecb;--border:#1a39221c}
body{isolation:isolate}#luma-ambience{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:var(--ambient-opacity);transition:opacity .5s}
#luma-ambience:before,#luma-ambience:after{content:"";position:absolute;width:65vw;height:70vh;border-radius:50%;filter:blur(90px);opacity:.27;animation:ambient-drift 24s ease-in-out infinite alternate}
#luma-ambience:before{background:var(--glow-a);top:-30vh;right:-20vw}#luma-ambience:after{background:var(--glow-b);bottom:-42vh;left:10vw;animation-delay:-12s}
@keyframes ambient-drift{to{transform:translate(-5vw,6vh) scale(1.08)}}
body,.sidebar,.topbar,.player,.mobile-nav,dialog,.drawer,.chat-shell,.chat-directory,.chat-stage,.chat-composer,.chat-message,.theme-card,.preview-mini-player,.appearance-options,.auth-copy,.np-controls{transition:background-color .45s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease}
.sidebar,.mobile-nav{background:color-mix(in srgb,var(--bg) 94%,transparent);border-color:var(--border)}.topbar{background:transparent}.player{background:color-mix(in srgb,var(--surface) 94%,transparent);border-color:var(--border)}
dialog,.drawer{background:var(--surface);color:var(--text);border-color:var(--border)}.search-field,.modal-input,.auth-input,.search-filter-grid select,.search-filter-grid input,.chat-composer textarea{background:color-mix(in srgb,var(--bg) 75%,var(--surface));color:var(--text);border-color:var(--border)}
.nav-item,.nav-label,.count,.breadcrumbs,.sidebar-help,.sidebar-bottom,.card-artist,.row-title small,.source-credit,.bottom-source,.local-label,.section-note,.subtitle,dialog p,.chat-room-item small,.person-open small,.chat-message time,.conversation-header small,.directory-hint,.directory-empty,.chat-empty p,.chat-empty-conversation,.message-track small,.chat-encryption-note,.auth-copy>p,.auth-form>p{color:var(--muted)}
.nav-item.active,.nav-item[aria-current=page],.small-pill,.chat-room-item.active{background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--accent)}
.chat-shell,.chat-directory,.chat-stage,.chat-composer,.auth-copy{background:var(--surface);border-color:var(--border)}.conversation-header{border-color:var(--border)}.chat-empty h2,.auth-copy h2{color:var(--text)}
.chat-message{background:var(--raised);border-color:var(--border)}.chat-message.mine{background:color-mix(in srgb,var(--accent) 13%,var(--surface));border-color:color-mix(in srgb,var(--accent) 15%,transparent)}
.message-author,.message-track>svg,.friend-listening{color:var(--accent)}.message-track,.chat-composer textarea{background:color-mix(in srgb,var(--bg) 60%,transparent)}
.primary-btn,.send-message,.play-main{background:var(--accent);color:var(--accent-ink)}.secondary-btn,.auth-provider,.profile-listening{background:var(--raised);color:var(--text);border-color:var(--border)}.person-avatar,.avatar{background:var(--raised);color:var(--accent);border-color:var(--border)}
.home-welcome,.welcome-wave,.made-card,.mix-card,.collection,.mix-copy{border-color:var(--border)}.home-welcome{background:linear-gradient(120deg,var(--surface),color-mix(in srgb,var(--glow-a) 20%,var(--bg)))}
#now-playing{background:var(--bg)}.np-shell{background:linear-gradient(0deg,color-mix(in srgb,var(--bg) 96%,transparent),transparent 65%)}.np-controls{background:color-mix(in srgb,var(--bg) 85%,transparent)}
.np-track-heading h1,.np-line.current{color:var(--text)}.np-track-heading a,.np-no-lyrics,.np-line,.plain-lyrics{color:var(--muted)}.album-atmosphere{opacity:calc(.35 + var(--ambient-opacity)*.65)}
.appearance-link{display:flex;align-items:center;gap:10px;margin-top:auto;min-height:44px;color:var(--muted)}.appearance-link svg{width:18px}.appearance-link+#about-button{margin-top:0}.appearance-dialog{width:min(820px,calc(100% - 32px));max-height:90dvh;padding:32px;overflow:auto}.appearance-heading h2{font-size:32px;letter-spacing:-1.1px;margin:8px 0 4px}.appearance-heading p{font-size:13px;margin-bottom:25px}.appearance-heading .eyebrow{color:var(--accent)}
.appearance-preview{height:190px;isolation:isolate;position:relative;overflow:hidden;border:1px solid var(--border);border-radius:18px;background:var(--bg);display:flex;align-items:center;justify-content:space-between;padding:34px;margin-bottom:26px}
.preview-orbit{position:absolute;inset:-100%;z-index:-1;background:conic-gradient(from 45deg,transparent,var(--glow-a),var(--glow-b),transparent 70%);filter:blur(35px);opacity:calc(.12 + var(--ambient-opacity)*.6);animation:preview-orbit 26s linear infinite}
@keyframes preview-orbit{to{transform:rotate(360deg)}}.preview-word{font-size:60px;letter-spacing:-4px;line-height:1;font-weight:800;color:var(--text)}.preview-word>span{display:block;font-size:9px;letter-spacing:2.2px;margin-top:15px;font-weight:500;color:var(--muted)}
.preview-mini-player{display:flex;align-items:center;gap:13px;padding:14px;background:color-mix(in srgb,var(--surface) 85%,transparent);border:1px solid var(--border);border-radius:13px;backdrop-filter:blur(20px)}.preview-cover{height:48px;width:48px;display:grid;place-items:center;background:linear-gradient(135deg,var(--glow-a),var(--glow-b));color:var(--text);border-radius:8px}.preview-mini-player>span:nth-child(2){display:grid;gap:5px}.preview-mini-player b{font-size:13px}.preview-mini-player small{font-size:10px;color:var(--muted)}.preview-mini-player>i{border-radius:50%;background:var(--accent);color:var(--accent-ink);height:30px;width:30px;display:grid;place-items:center;margin-left:10px}.preview-mini-player>i svg{height:13px;width:13px}
.theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.theme-card{text-align:left;border:1px solid var(--border);border-radius:12px;padding:9px 9px 13px;background:color-mix(in srgb,var(--bg) 25%,transparent);min-width:0;position:relative}.theme-card:hover{transform:translateY(-3px);border-color:var(--muted)}.theme-card[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.theme-card strong{font-size:13px;display:block;margin:11px 3px 4px}.theme-card>small{font-size:10px;display:block;color:var(--muted);margin:0 3px;white-space:normal}.theme-swatch{display:flex;position:relative;height:80px;overflow:hidden;background:radial-gradient(ellipse at 95% 10%,var(--swatch-a),transparent 70%),linear-gradient(125deg,var(--swatch-bg) 35%,var(--swatch-b));border-radius:7px;padding:19px;gap:5px;align-items:flex-end}.theme-swatch>i{display:block;background:var(--swatch-accent);width:8px;border-radius:5px;height:23px;opacity:.9}.theme-swatch>i:nth-child(2){height:37px}.theme-swatch>i:nth-child(3){height:29px}.theme-check{position:absolute;right:9px;top:9px;height:23px;width:23px;display:grid;place-items:center;border-radius:50%;color:var(--swatch-bg)}.theme-card[aria-pressed=true] .theme-check{background:var(--swatch-accent)}.theme-check svg{height:14px;width:14px}
.appearance-options{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:25px;border:1px solid var(--border);border-radius:13px;padding:20px;background:color-mix(in srgb,var(--bg) 50%,transparent)}.ambient-control{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.ambient-control label{margin:0;font-size:12px;color:var(--text)}.ambient-control output{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.ambient-control input{grid-column:1/-1;width:100%;accent-color:var(--accent);height:18px}.appearance-motion{display:flex;align-items:center;justify-content:space-between;gap:14px;border-left:1px solid var(--border);padding-left:24px}.appearance-motion>span{display:grid;gap:7px}.appearance-motion strong{font-size:12px;font-weight:500}.appearance-motion small{font-size:10px;color:var(--muted)}.appearance-switch{border:1px solid var(--border);background:var(--raised);width:44px;height:26px;border-radius:20px;padding:3px;flex-shrink:0}.appearance-switch>span{display:block;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .25s,background .25s}.appearance-switch[aria-checked=true]{background:var(--accent)}.appearance-switch[aria-checked=true]>span{background:var(--accent-ink);transform:translateX(18px)}.appearance-footer{display:flex;align-items:center;justify-content:space-between;margin-top:14px;color:var(--muted);font-size:10px}.appearance-footer .text-btn{font-size:11px;color:var(--muted)}
.desktop-titlebar{position:fixed;inset:0 0 auto;height:36px;display:flex;align-items:center;gap:12px;padding:0 17px;background:var(--bg);z-index:150;-webkit-app-region:drag;user-select:none;border-bottom:1px solid var(--border)}.desktop-titlebar>span{font-size:16px;font-weight:800;letter-spacing:-.8px}.desktop-titlebar>small{font-size:8px;letter-spacing:2px;color:var(--muted)}.desktop-app .workspace{padding-top:36px}.desktop-app .sidebar{top:36px}.desktop-app #now-playing{top:36px}.desktop-app .chat-shell{height:calc(100dvh - 301px)}
[data-theme=porcelain] .nav-item:hover,[data-theme=porcelain] .icon-btn:hover,[data-theme=porcelain] .list-row:hover,[data-theme=porcelain] .chat-room-item:hover{background:#19251f0b}[data-theme=porcelain] .auth-art{background:linear-gradient(130deg,#e5e9df,#c8d9ba);color:var(--text)}[data-theme=porcelain] .auth-form label,[data-theme=porcelain] .auth-legal,[data-theme=porcelain] .check-row{color:var(--muted)}[data-theme=porcelain] .auth-form input{background:var(--bg);color:var(--text);border-color:var(--border)}[data-theme=porcelain] .np-lyrics .np-line.current{color:var(--text)}[data-theme=porcelain] .album-atmosphere{filter:blur(65px) brightness(1.3) saturate(.6);opacity:.3}
@media(max-width:850px) and (min-width:601px){.appearance-link{justify-content:center;padding:0}.appearance-link>span{display:none}}
@media(max-width:600px){.appearance-dialog{padding:23px 18px;max-height:90dvh;border-radius:20px}.appearance-heading h2{font-size:28px}.appearance-heading p{font-size:12px}.appearance-preview{height:140px;padding:20px;margin-bottom:20px}.preview-word{font-size:43px}.preview-word>span{font-size:7px;letter-spacing:1px}.preview-mini-player{padding:9px;gap:8px}.preview-mini-player small{display:none}.preview-mini-player>i{margin-left:0}.preview-cover{height:36px;width:36px}.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.theme-swatch{height:73px}.appearance-options{grid-template-columns:1fr;gap:20px;padding:17px}.appearance-motion{padding:18px 0 0;border-left:0;border-top:1px solid var(--border)}#appearance-button{width:36px;min-width:36px;height:40px}.appearance-heading{padding-right:18px}}
.no-motion #luma-ambience:before,.no-motion #luma-ambience:after,.no-motion .preview-orbit{animation:none}.no-motion *{scroll-behavior:auto!important}.no-motion .appearance-panel *,.no-motion .sidebar,.no-motion .player{transition:none}
#ambient-strength{height:20px;background:linear-gradient(to right,var(--accent) var(--progress,45%),var(--raised) var(--progress,45%));background-size:100% 3px;background-position:center;background-repeat:no-repeat}#ambient-strength::-webkit-slider-thumb{opacity:1;width:13px;height:13px;background:var(--accent)}#ambient-strength::-moz-range-thumb{opacity:1;width:13px;height:13px;background:var(--accent);border:0}
.no-motion *,.no-motion *::before,.no-motion *::after{transition-duration:.01ms!important}
dialog{transition:background-color .45s ease,color .35s ease,border-color .35s ease,opacity .18s ease,display .18s allow-discrete,overlay .18s allow-discrete}
@media(prefers-reduced-motion:reduce){#luma-ambience:before,#luma-ambience:after,.preview-orbit{animation:none}*,*::before,*::after{transition-duration:.01ms!important}}

/* Keep moving layers bounded and composite transforms instead of repainting blur. */
.preview-orbit{inset:-20%;filter:none;background:radial-gradient(ellipse at 25% 35%,var(--glow-a),transparent 65%),radial-gradient(ellipse at 75% 65%,var(--glow-b),transparent 65%);animation:preview-float 12s ease-in-out infinite alternate;will-change:transform}
@keyframes preview-float{from{transform:translate3d(-2%,0,0)}to{transform:translate3d(2%,3%,0)}}
.preview-mini-player{backdrop-filter:none}
.theme-card{transition:transform .18s ease,border-color .2s ease,background-color .25s ease;box-shadow:none}
.theme-card[aria-pressed=true]{box-shadow:none;outline:1px solid var(--accent);outline-offset:-2px}
.appearance-preview{contain:paint}.appearance-dialog{scrollbar-gutter:stable}
body:has(.appearance-dialog[open]) #luma-ambience::before,body:has(.appearance-dialog[open]) #luma-ambience::after{animation-play-state:paused}
#luma-ambience:before,#luma-ambience:after{filter:none;background:radial-gradient(ellipse,var(--glow-a),transparent 68%);will-change:transform}
#luma-ambience:after{background:radial-gradient(ellipse,var(--glow-b),transparent 68%)}
@media(prefers-reduced-motion:reduce){.preview-orbit{animation:none;will-change:auto}}
.no-motion .preview-orbit{animation:none;will-change:auto}
