:root{--radius: 9px;--safe-bottom: env(safe-area-inset-bottom, 0px);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}:root,.onboarding,.auth,.auth-page,.player-screen,.story-view,.player-mini{--bg: #0a0a0b;--surface: #141414;--surface2: #1b1b1c;--surface3: #252027;--plum: #39243b;--purple: #6f2d86;--lilac: #ca92f2;--accent: #b96cff;--accent2: #d28eff;--pink: #d65b9f;--nav: #27272d;--text: #f7f7f8;--muted: #9b969f;--muted2: #89838c;--line: rgba(255, 255, 255, .07);--danger: #ff6b81;--ok: #3ecf8e;--page: #08070a;--glow1: rgba(130, 60, 255, .18);--glow2: rgba(214, 91, 159, .11);--home-bg: linear-gradient(180deg, #141414, #0b0b0c);--shadow-lg: rgba(0, 0, 0, .45);--shadow-md: rgba(0, 0, 0, .4);--scrim: rgba(0, 0, 0, .55);--card: rgba(255, 255, 255, .03);--hover: rgba(255, 255, 255, .05);--sheet: #17151c;--toast: #2a2531;--field: #14121a;--on-field: #fff;--field-line: rgba(255, 255, 255, .09);--focus-line: rgba(202, 146, 242, .55);--placeholder: #8f8999;--bar-bg: #0e0c12;--glass: rgba(24, 20, 30, .92);--glass-line: rgba(255, 255, 255, .1);--line-soft: rgba(255, 255, 255, .06);--track: rgba(255, 255, 255, .08);--seek: rgba(255, 255, 255, .14);--thumb: rgba(255, 255, 255, .13);--grab: rgba(255, 255, 255, .2);--dash: rgba(255, 255, 255, .22);--spin-track: rgba(255, 255, 255, .15);--soft: #d8d2de;--icon-bg: rgba(255, 255, 255, .07);--icon: #fff;--over-btn: rgba(255, 255, 255, .07);--btn: linear-gradient(90deg, #b969f6, #d28eff);--on-btn: #241626;--tonal: rgba(202, 146, 242, .16);--on-tonal: #f4efff;--tonal-line: rgba(202, 146, 242, .14);--outline-bg: rgba(30, 12, 35, .28);--outline-line: #b970e8;--on-outline: #d699ff;--white-btn: #fff;--on-white-btn: #171717;--pp: #fff;--on-pp: #111;--danger-line: rgba(255, 107, 129, .3);--danger-line-strong: rgba(255, 107, 129, .4);--on-accent: #1a0f22;--on-active: #fff;--on-fab: #2b134f;--fab-shadow: rgba(202, 146, 242, .25);--chip: #16141c;--on-chip: #d4cfe0;--chip-on: #f2ebfb;--on-chip-on: #161118;--tag: #32233a;--on-tag: #c9accf;--badge-accent: rgba(202, 146, 242, .18);--switch-off: #3a3542;--switch-on: #7752c7;--ring-seen: #3a3540;--ring-gap: #151515;--drop-line: rgba(202, 146, 242, .3);--drop-bg: linear-gradient(180deg, rgba(202, 146, 242, .06), rgba(255, 255, 255, .02));--drop-up: rgba(202, 146, 242, .14);--search: #f5f1fb;--on-search: #1f1a26;--on-search-input: #201a27;--wave: rgba(238, 238, 238, .85);--wave-on: #be6ff0;--nav-bg: linear-gradient(180deg, #2b2e33, #202329);--nav-shadow: none;--nav-item: #a3a4a9;--nav-on: #fff;--banner-veil: linear-gradient(180deg, rgba(0, 0, 0, .2) 0%, transparent 34%, #0a0a0b 100%);color-scheme:dark}:root[data-theme=light]{--bg: #f7f4fb;--surface: #ffffff;--surface2: #eee9f5;--surface3: #e5ddf0;--plum: #e6d6fa;--purple: #6f2d86;--lilac: #6420bd;--accent: #7429d6;--accent2: #8b3ff0;--pink: #c2478a;--nav: #ffffff;--text: #17121d;--muted: #6d6577;--muted2: #7a7284;--line: rgba(30, 10, 60, .1);--danger: #c4264a;--ok: #12805a;--page: #efeaf6;--glow1: rgba(116, 41, 214, .1);--glow2: rgba(214, 91, 159, .07);--home-bg: linear-gradient(180deg, #ffffff, #f7f4fb);--shadow-lg: rgba(60, 20, 110, .16);--shadow-md: rgba(60, 20, 110, .18);--scrim: rgba(30, 15, 50, .42);--card: rgba(60, 20, 110, .04);--hover: rgba(60, 20, 110, .06);--sheet: #ffffff;--toast: #ffffff;--field: #eee9f5;--on-field: #17121d;--field-line: rgba(30, 10, 60, .14);--focus-line: rgba(116, 41, 214, .55);--placeholder: #8a8294;--bar-bg: #ffffff;--glass: rgba(255, 255, 255, .92);--glass-line: rgba(30, 10, 60, .12);--line-soft: rgba(30, 10, 60, .1);--track: rgba(60, 20, 110, .1);--seek: rgba(60, 20, 110, .14);--thumb: rgba(60, 20, 110, .18);--grab: rgba(30, 10, 60, .2);--dash: rgba(30, 10, 60, .25);--spin-track: rgba(60, 20, 110, .15);--soft: #3d3547;--icon-bg: rgba(60, 20, 110, .07);--icon: #17121d;--over-btn: rgba(0, 0, 0, .38);--btn: linear-gradient(90deg, #7429d6, #9b4dff);--on-btn: #fff;--tonal: rgba(116, 41, 214, .1);--on-tonal: #4a1a96;--tonal-line: rgba(116, 41, 214, .16);--outline-bg: rgba(116, 41, 214, .04);--outline-line: #7429d6;--on-outline: #6420bd;--white-btn: #17121d;--on-white-btn: #fff;--pp: #17121d;--on-pp: #fff;--danger-line: rgba(196, 38, 74, .35);--danger-line-strong: rgba(196, 38, 74, .45);--on-accent: #fff;--on-active: #2a1245;--on-fab: #fff;--fab-shadow: rgba(116, 41, 214, .28);--chip: #ffffff;--on-chip: #3d3547;--chip-on: #2a1245;--on-chip-on: #fff;--tag: #e6d6fa;--on-tag: #5a2a9a;--badge-accent: rgba(116, 41, 214, .12);--switch-off: #cfc6dc;--switch-on: #7429d6;--ring-seen: #cfc6dc;--ring-gap: #ffffff;--drop-line: rgba(116, 41, 214, .35);--drop-bg: linear-gradient(180deg, rgba(116, 41, 214, .06), rgba(116, 41, 214, .02));--drop-up: rgba(116, 41, 214, .1);--search: #eee9f5;--on-search: #17121d;--on-search-input: #17121d;--wave: rgba(60, 20, 110, .22);--wave-on: #7429d6;--nav-bg: linear-gradient(180deg, #ffffff, #ffffff);--nav-shadow: 0 -1px 0 rgba(30, 10, 60, .08), 0 -8px 24px rgba(60, 20, 110, .08);--nav-item: #7a7284;--nav-on: #7429d6;--banner-veil: linear-gradient(180deg, rgba(0, 0, 0, .2) 0%, transparent 30%, rgba(247, 244, 251, .86) 66%, #f7f4fb 100%);color-scheme:light}.onboarding,.auth,.auth-page,.player-screen,.story-view,.player-mini{color:var(--text)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{margin:0;color:var(--text);background:radial-gradient(900px 520px at 12% -8%,var(--glow1),transparent 60%),radial-gradient(760px 460px at 90% 0%,var(--glow2),transparent 60%),var(--page)}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer;background:none;border:0;padding:0}button:disabled{opacity:.5;cursor:default}a{color:inherit;text-decoration:none}img{display:block}:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}.shell{position:relative;height:100%;margin:0 auto;overflow:hidden;background:var(--bg);box-shadow:0 0 0 1px var(--line),0 30px 80px var(--shadow-lg)}.screen{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;overflow-x:hidden;padding:16px 16px calc(160px + var(--safe-bottom));scrollbar-width:none}.screen::-webkit-scrollbar{display:none}.screen.no-chrome{padding-bottom:calc(32px + var(--safe-bottom))}.row{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}.grow{flex:1;min-width:0}.muted{color:var(--muted)}.small{font-size:11px}.tiny{font-size:10px;letter-spacing:.13em;text-transform:uppercase}.h1{font-size:34px;line-height:1.03;font-weight:950;letter-spacing:-.045em;margin:0}.h2{font-size:19px;font-weight:780;letter-spacing:-.02em;margin:0}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.center{text-align:center}.spacer{height:16px}.icon-btn{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:var(--icon-bg);color:var(--icon)}.icon-btn.plain{background:transparent}.icon-btn.lg{width:44px;height:44px}svg.i{width:20px;height:20px;display:block}.btn{height:46px;padding:0 22px;border-radius:23px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}.btn.block{width:100%}.btn.primary{background:var(--btn);color:var(--on-btn)}.btn.tonal{background:var(--tonal);color:var(--on-tonal);border:1px solid var(--tonal-line)}.btn.outline{border:1.5px solid var(--outline-line);color:var(--on-outline);background:var(--outline-bg)}.btn.white{background:var(--white-btn);color:var(--on-white-btn)}.btn.ghost{color:var(--lilac);height:40px;padding:0 12px}.btn.danger{color:var(--danger);border:1px solid var(--danger-line)}.btn.sm{height:34px;padding:0 14px;font-size:12px}.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}.chip{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;white-space:nowrap;height:34px;padding:0 14px;border-radius:17px;font-size:12px;font-weight:700;background:var(--chip);color:var(--on-chip);border:1px solid var(--line-soft)}.chip.active{background:var(--chip-on);color:var(--on-chip-on)}.field{width:100%;min-height:54px;padding:0 16px;margin-top:10px;border-radius:16px;border:1px solid var(--field-line);background:var(--field);color:var(--on-field);outline:none}textarea.field{padding:14px 16px;min-height:96px;resize:vertical}select.field{-webkit-appearance:none;-moz-appearance:none;appearance:none}.field:focus{border-color:var(--focus-line)}.field::placeholder{color:var(--placeholder)}.label{display:block;font-size:12px;color:var(--muted);margin:16px 2px -4px}.card{border:1px solid var(--line);background:var(--card);border-radius:20px;padding:16px}.card+.card{margin-top:12px}.switch{width:48px;height:28px;border-radius:999px;background:var(--switch-off);padding:4px;flex:0 0 auto;transition:background .2s}.switch:after{content:"";display:block;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}.switch.on{background:var(--switch-on)}.switch.on:after{transform:translate(20px)}.segmented{display:grid;grid-template-columns:1fr 1fr;background:var(--field);border-radius:14px;padding:4px;margin-top:12px}.segmented button{height:36px;border-radius:10px;font-weight:700;font-size:13px;color:var(--muted)}.segmented button.on{background:var(--plum);color:var(--on-active)}.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45}.check input{width:18px;height:18px;accent-color:var(--accent);margin-top:1px;flex:0 0 auto}.dropzone{border-radius:22px;border:1px dashed var(--drop-line);padding:22px 16px;text-align:center;background:var(--drop-bg);display:block;cursor:pointer}.dropzone input{display:none}.dropzone .up{width:46px;height:46px;border-radius:16px;background:var(--drop-up);display:grid;place-items:center;margin:0 auto 10px}.error-text{color:var(--danger);font-size:13px;margin-top:10px}.progress-bar{height:6px;border-radius:3px;background:var(--track);overflow:hidden;margin-top:12px}.progress-bar>i{display:block;height:100%;background:var(--btn)}.onboarding{padding:0;background:#000;display:flex;flex-direction:column}.onboarding-visual{height:48%;min-height:300px;position:relative;overflow:hidden;flex:0 0 auto;background:radial-gradient(circle at 24% 24%,rgba(255,205,180,.65),transparent 15%),radial-gradient(circle at 64% 44%,rgba(236,98,174,.23),transparent 22%),linear-gradient(120deg,#3b241e,#151f2c 52%,#522425)}.onboarding-visual:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent 0 23%,rgba(255,255,255,.1) 23.5% 24%,transparent 24.5%),radial-gradient(ellipse at 20% 30%,rgba(255,225,210,.85) 0 9%,transparent 9.5%),radial-gradient(ellipse at 74% 49%,rgba(255,136,95,.35) 0 14%,transparent 14.5%)}.onboarding-visual:after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(180deg,transparent,#000)}.brand-ring{width:76px;height:76px;border-radius:50%;border:3px solid #fff;display:grid;place-items:center;font-weight:900;font-size:22px;letter-spacing:-.06em}.onboarding-visual .brand-ring{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:3}.onboarding-body{padding:28px 20px calc(26px + var(--safe-bottom))}.onboarding-title{font-size:44px;line-height:1.03;letter-spacing:-.05em;font-weight:480;max-width:320px}.onboarding-copy{font-size:13px;line-height:1.5;color:#aaa3ad;margin-top:24px;max-width:290px}.cta{width:100%;height:58px;border-radius:29px;margin-top:26px;background:var(--btn);color:var(--on-btn);font-weight:850}.auth{background:linear-gradient(180deg,#000000ad,#000000c2),radial-gradient(circle at 27% 30%,rgba(220,150,120,.56),transparent 19%),linear-gradient(135deg,#39251f,#15202b 48%,#4d2328)}.auth-inner{padding:72px 6px 24px;text-align:center}.auth-inner .brand-ring{margin:0 auto 18px}.auth h2{font-size:31px;font-weight:520;letter-spacing:-.035em;margin:20px 0 28px}.auth-btn{width:100%;height:56px;border-radius:28px;margin-top:10px;font-weight:760;display:flex;align-items:center;justify-content:center;gap:10px}.auth-btn.white{background:var(--white-btn);color:var(--on-white-btn)}.auth-btn.outline{background:var(--outline-bg);color:var(--on-outline);border:1.5px solid var(--outline-line)}.or{font-size:13px;color:#aaa;margin:18px 0 8px}.terms{font-size:11px;line-height:1.45;color:#aaa;margin-top:20px}.auth form{text-align:left}.home{padding-top:12px}.topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.wordmark{font-weight:950;letter-spacing:.14em;font-size:17px}.wordmark b{color:var(--lilac)}.story-strip{display:flex;gap:11px;overflow-x:auto;margin:0 -16px;padding:0 16px 14px;border-bottom:1px solid var(--line-soft);scrollbar-width:none}.story-strip::-webkit-scrollbar{display:none}.story{width:64px;flex:0 0 64px;text-align:center}.story .label{display:block;margin-bottom:5px;font-size:8px;padding:4px 5px;border-radius:4px;background:var(--tag);color:var(--on-tag);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.story-ring{width:58px;height:58px;border-radius:50%;padding:2px;margin:auto;background:linear-gradient(135deg,#9a54e9,#d669b5);position:relative}.story-ring.seen{background:var(--ring-seen)}.story-ring.add:after{content:"+";position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:900;font-size:15px;line-height:19px;border:2px solid var(--surface)}.story-ring .avatar{width:100%;height:100%;border:2px solid var(--ring-gap)}.story b{display:block;font-size:9px;font-weight:600;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.section{margin-top:22px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}.section-head .see{font-size:11px;color:var(--muted2)}.playlist-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.playlist-card{height:60px;border-radius:var(--radius);background:var(--plum);display:grid;grid-template-columns:58px 1fr;gap:8px;align-items:center;overflow:hidden;text-align:left;padding-right:8px}.playlist-card .cover{width:58px;height:60px;border-radius:0}.playlist-card b{font-size:10px;font-weight:560;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.recent-hero{color:#f7f7f8;height:150px;border-radius:var(--radius);overflow:hidden;position:relative;display:block;width:100%;text-align:left}.recent-hero .cover{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border-radius:0}.recent-hero:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,#0000008c,#00000026)}.recent-copy{position:absolute;left:16px;bottom:14px;z-index:1;right:70px}.recent-copy b{display:block;font-size:14px}.recent-copy span{display:block;font-size:10px;color:#d5cfd9;margin-top:4px}.round-play{position:absolute;right:14px;bottom:14px;width:38px;height:38px;border-radius:50%;background:#fff;color:#181818;display:grid;place-items:center;z-index:1}.cover-row{display:flex;gap:12px;overflow-x:auto;margin-right:-16px;padding-right:16px;scrollbar-width:none}.cover-row::-webkit-scrollbar{display:none}.cover-card{width:145px;flex:0 0 145px;text-align:left}.cover-card .cover{width:145px;height:145px}.cover-card b{display:block;font-size:11px;font-weight:500;line-height:1.25;margin-top:7px}.cover-card span{display:block;font-size:10px;color:var(--muted);margin-top:3px}.cover{border-radius:var(--radius);position:relative;overflow:hidden;background-size:cover;background-position:center;flex:0 0 auto}.cover.fallback:after{content:"";position:absolute;left:50%;top:52%;width:37%;height:58%;border-radius:30px 30px 12px 12px;transform:translate(-50%,-50%);background:#ffffff59}.avatar{border-radius:50%;background-size:cover;background-position:center;flex:0 0 auto;display:grid;place-items:center;font-weight:800;color:#ffffffe6}.artist-strip{display:flex;gap:14px;overflow-x:auto;margin-right:-16px;padding-right:16px;scrollbar-width:none}.artist-strip::-webkit-scrollbar{display:none}.artist-chip{width:76px;flex:0 0 76px;text-align:center}.artist-chip b{display:block;margin-top:7px;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-list{display:grid;gap:2px}.track{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:7px 6px;border-radius:14px;width:100%;text-align:left}.track:hover{background:var(--card)}.track.playing .t-title{color:var(--lilac)}.track .cover{width:52px;height:52px;border-radius:10px}.t-title{font-size:13px;font-weight:700}.t-sub{font-size:11px;color:var(--muted);margin-top:3px}.badge{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 6px;border-radius:6px;background:var(--track);color:var(--soft)}.badge.accent{background:var(--badge-accent);color:var(--lilac)}.empty{padding:26px 16px;text-align:center;color:var(--muted);font-size:13px;line-height:1.5;border:1px dashed var(--line);border-radius:18px}.searchbox{height:54px;border-radius:18px;background:var(--search);color:var(--on-search);display:flex;align-items:center;gap:10px;padding:0 16px;margin-top:16px}.searchbox input::-webkit-search-cancel-button{display:none}.searchbox input{flex:1;border:0;outline:0;background:transparent;color:var(--on-search-input);font-size:14px;min-width:0}.genre-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.genre{color:#f7f7f8;height:96px;border-radius:18px;padding:14px;position:relative;overflow:hidden;font-weight:900;font-size:17px;letter-spacing:-.03em;text-align:left;align-items:flex-start;display:flex}.genre:after{content:"";position:absolute;width:76px;height:76px;border-radius:20px;background:#ffffff29;right:-14px;bottom:-18px;transform:rotate(20deg)}.profile-banner{margin:-16px -16px 0;height:300px;position:relative;background-size:cover;background-position:center}.profile-banner:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--banner-veil)}.profile-banner .topbar .icon-btn{background:var(--over-btn);color:#fff}.profile-banner .topbar{position:absolute;top:12px;left:12px;right:12px;z-index:2;display:flex;justify-content:space-between}.profile-content{position:absolute;left:20px;right:20px;bottom:16px;z-index:1}.profile-name{font-size:30px;font-weight:940;letter-spacing:-.045em;margin-top:10px;display:flex;align-items:center;gap:8px}.stats{display:flex;gap:24px;margin:14px 0 16px}.stat b{display:block;font-size:15px;font-weight:830}.stat span{display:block;font-size:10px;color:var(--muted2);margin-top:4px;letter-spacing:.08em;text-transform:uppercase}.player-screen{background:radial-gradient(circle at 25% 16%,rgba(213,89,158,.45),transparent 31%),radial-gradient(circle at 78% 35%,rgba(74,108,177,.22),transparent 29%),linear-gradient(180deg,#744257,#432837 52%,#1d1c1f);z-index:40}.player-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.player-heading{text-align:center;min-width:0}.player-heading span{display:block;font-size:10px;color:#d8c8d1}.player-heading b{display:block;font-size:14px;font-weight:500;margin-top:3px}.player-art{width:100%;aspect-ratio:1;height:auto!important;margin-top:25px;border-radius:10px;box-shadow:0 28px 60px #00000059}.track-title{font-size:18px;font-weight:700}.track-artist{font-size:12px;color:#d6c7d0;margin-top:4px}.waveform{display:flex;align-items:center;gap:2px;height:34px;margin-top:18px;cursor:pointer}.waveform i{flex:1;border-radius:2px;background:var(--wave);min-width:2px}.waveform i.on{background:var(--wave-on)}.time{display:flex;justify-content:space-between;font-size:10px;color:#d3c8d0;margin-top:6px;font-variant-numeric:tabular-nums}.controls{display:flex;align-items:center;justify-content:space-around;margin-top:18px}.controls .ctl{width:44px;height:44px;display:grid;place-items:center;color:#fff;opacity:.9}.controls .ctl.on{color:var(--accent2)}.main-play{width:64px;height:64px;border-radius:50%;background:var(--white-btn);color:var(--on-white-btn);display:grid;place-items:center}.main-play svg.i{width:26px;height:26px}.lyrics{margin:24px -16px 0;padding:18px 16px;background:#1f122273;border-top:1px solid rgba(255,255,255,.04)}.lyrics p{font-size:12px;line-height:1.9;text-align:center;color:#cdb9c8;margin:14px 0 0;white-space:pre-line}.about-card{height:146px;border-radius:8px;width:100%}.dl-card{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#140c1873}.player-mini{position:absolute;left:10px;right:10px;bottom:calc(74px + var(--safe-bottom));height:58px;border-radius:var(--radius);background:linear-gradient(90deg,#4b075d,#621381 54%,#741195);display:grid;grid-template-columns:46px 1fr auto;align-items:center;padding:6px 9px;gap:10px;z-index:20;overflow:hidden}.player-mini .cover{width:44px;height:44px;border-radius:7px}.player-mini b{display:block;font-size:11px}.player-mini span{display:block;font-size:10px;color:#cabbd0;margin-top:2px}.player-mini .bar{position:absolute;left:0;bottom:0;height:2px;background:#ffffffd9}.nav{position:absolute;left:0;right:0;bottom:0;height:calc(70px + var(--safe-bottom));padding-bottom:var(--safe-bottom);border-radius:25px 25px 0 0;background:var(--nav-bg);box-shadow:var(--nav-shadow);display:grid;grid-template-columns:repeat(4,1fr);z-index:19}.nav button{color:var(--nav-item);font-size:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.nav button.active{color:var(--nav-on)}.nav svg.i{width:22px;height:22px}.fab{position:absolute;right:18px;bottom:calc(146px + var(--safe-bottom));width:54px;height:54px;border-radius:18px;background:var(--lilac);color:var(--on-fab);display:grid;place-items:center;z-index:21;box-shadow:0 14px 30px var(--fab-shadow)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--scrim);z-index:60;display:flex;align-items:flex-end;animation:fade .15s}.sheet{width:100%;max-height:86%;overflow-y:auto;background:var(--sheet);border-radius:24px 24px 0 0;padding:10px 16px calc(24px + var(--safe-bottom));animation:up .2s ease-out}.sheet .grab{width:40px;height:4px;border-radius:2px;background:var(--grab);margin:0 auto 14px}.menu-item{display:flex;align-items:center;gap:14px;width:100%;padding:14px 4px;font-size:14px;border-bottom:1px solid var(--line);text-align:left}.toast{position:absolute;left:16px;right:16px;top:16px;z-index:90;background:var(--toast);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:13px;animation:fade .2s;box-shadow:0 10px 30px var(--shadow-md)}.toast.error{border-color:var(--danger-line-strong)}@keyframes fade{0%{opacity:0}}@keyframes up{0%{transform:translateY(40px);opacity:.5}}.story-view{z-index:50;background:radial-gradient(circle at 20% 10%,rgba(154,84,233,.45),transparent 35%),radial-gradient(circle at 90% 30%,rgba(214,105,181,.3),transparent 35%),linear-gradient(180deg,#2a1733,#120d16 60%,#0a0a0b)}.story-progress{display:flex;gap:4px;margin-bottom:12px}.story-progress i{flex:1;height:3px;border-radius:2px;background:#ffffff40}.story-progress i.on{background:#fff}.comment{display:flex;gap:10px;padding:10px 0}.comment .body{font-size:13px;line-height:1.45;margin-top:2px;white-space:pre-wrap;word-break:break-word}.comment .actions{display:flex;gap:14px;font-size:11px;color:var(--muted);margin-top:6px;align-items:center}.replies{margin-left:42px}.comment-box{position:sticky;bottom:0;display:flex;gap:8px;padding:10px 0;background:linear-gradient(180deg,transparent,var(--bg) 30%)}.comment-box input{flex:1;height:44px;border-radius:22px;border:1px solid var(--line);background:var(--sheet);padding:0 16px;outline:none;min-width:0}.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--spin-track);border-top-color:var(--accent2);animation:spin .8s linear infinite;margin:40px auto}@keyframes spin{to{transform:rotate(360deg)}}.analysis-card .waveform{margin-top:12px}.analysis-stats{margin:12px 0 0}.analysis-stats .stat b{font-size:18px}.terms a,.check a{color:var(--lilac);text-decoration:underline}.cover-picker{display:flex;align-items:center;gap:16px;cursor:pointer}.cover-picker img,.cover-picker .cover-empty{width:132px;height:132px;flex:none;border-radius:18px;object-fit:cover}.cover-picker .cover-empty{display:grid;place-items:center;border:1.5px dashed var(--dash);color:var(--muted, #aaa)}.cover-picker .cover-text{display:flex;flex-direction:column;gap:6px;min-width:0}.cover-picker:active img,.cover-picker:active .cover-empty{transform:scale(.98)}.side-nav,.player-bar{display:none}@media(min-width:700px){html.wide .shell{max-width:none;height:100%;margin:0;border-radius:0;box-shadow:none;background:transparent;--side: 236px;--bar: 78px}html.wide .screen{left:var(--side);bottom:var(--bar);padding:22px clamp(20px,3vw,44px) 40px;scrollbar-width:thin;scrollbar-color:var(--thumb) transparent}html.wide .screen>*{max-width:1180px;margin-inline:auto}html.wide .screen::-webkit-scrollbar{display:block;width:10px}html.wide .screen::-webkit-scrollbar-track{background:transparent}html.wide .screen::-webkit-scrollbar-thumb{border-radius:99px;border:3px solid transparent;background:linear-gradient(180deg,transparent,var(--thumb) 22%,var(--thumb) 78%,transparent) padding-box}html.wide .screen::-webkit-scrollbar-thumb:hover{background:var(--accent) padding-box}html.wide .screen.no-chrome{padding-bottom:40px}html.wide .nav,html.wide .player-mini,html.wide .fab{display:none}html.wide .side-nav{display:flex;flex-direction:column;gap:4px;position:absolute;left:0;top:0;bottom:var(--bar);width:var(--side);padding:18px 10px;overflow-y:auto;border-right:1px solid var(--line);scrollbar-width:none;z-index:22}.side-nav::-webkit-scrollbar{display:none}.side-brand{display:flex;align-items:center;gap:8px;padding:2px 10px 14px;font-weight:800;font-size:19px}.side-brand svg{width:26px;color:var(--accent);flex:none}.side-brand i{font-style:normal;color:var(--accent)}.side-item{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border-radius:10px;color:var(--muted);font-weight:600;font-size:14px;text-align:left;transition:background .2s,color .2s}.side-item svg.i{width:20px;height:20px;flex:none}.side-item:hover{color:var(--text);background:var(--hover)}.side-item.active{color:var(--on-active);background:var(--plum)}.side-publish{display:flex;align-items:center;justify-content:center;gap:8px;flex:none;height:42px;margin:10px;border-radius:12px;font-weight:700;font-size:13px;background:var(--btn);color:var(--on-btn)}.side-publish svg.i{width:18px;height:18px}.side-nav h6{margin:14px 10px 4px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.side-playlist{display:flex;align-items:center;gap:10px;width:100%;padding:6px 10px;border-radius:10px;text-align:left}.side-playlist:hover{background:var(--hover)}.side-playlist .cover{width:38px;height:38px;border-radius:8px;flex:none}.side-playlist span{min-width:0}.side-playlist b{display:block;font-size:13px;font-weight:600}.side-playlist small{display:block;font-size:11px;color:var(--muted)}html.wide .player-bar{display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:center;gap:16px;position:absolute;left:0;right:0;bottom:0;height:var(--bar);padding:0 18px;background:var(--bar-bg);border-top:1px solid var(--line);z-index:23}.pb-track{display:flex;align-items:center;gap:12px;min-width:0;text-align:left}.pb-track .cover{width:52px;height:52px;border-radius:8px;flex:none}.pb-track span{min-width:0}.pb-track b{display:block;font-size:13px}.pb-track small{display:block;font-size:12px;color:var(--muted)}.pb-center{display:flex;flex-direction:column;align-items:center;gap:6px}.pb-controls{display:flex;align-items:center;gap:18px;color:var(--soft)}.pb-controls button.on{color:var(--accent2)}.pb-play{width:38px;height:38px;border-radius:50%;background:var(--pp);color:var(--on-pp);display:grid;place-items:center;transition:transform .15s}.pb-play:active{transform:scale(.94)}.pb-seek{display:flex;align-items:center;gap:10px;width:100%;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.pb-seek button{flex:1;height:14px;display:flex;align-items:center;position:relative}.pb-seek button:before{content:"";position:absolute;left:0;right:0;height:4px;border-radius:9px;background:var(--seek)}.pb-seek i{position:relative;height:4px;border-radius:9px;background:var(--accent)}.pb-right{display:flex;justify-content:flex-end;color:var(--muted)}html.wide .overlay{align-items:center;justify-content:center}html.wide .sheet{width:min(520px,92%);border-radius:24px;padding-bottom:24px}html.wide .sheet .grab{display:none}html.wide .player-screen>*{max-width:760px}html.wide .player-art{max-width:420px;margin-inline:auto}}@media(min-width:700px)and (max-width:1180px){html.wide .shell{--side: 72px}.side-nav{align-items:center}.side-brand span,.side-item span,.side-publish span,.side-playlist span,.side-nav h6{display:none}.side-brand{padding-inline:0}.side-item,.side-playlist{justify-content:center;padding:10px}.side-publish{width:44px;margin-inline:0}}.home-hello{font-size:24px;margin:18px 0 0;letter-spacing:-.02em}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.quick{display:flex;align-items:center;gap:10px;min-width:0;padding-right:10px;border-radius:10px;overflow:hidden;background:var(--card);text-align:left;font-size:12px;transition:background .2s}.quick:hover{background:var(--hover)}.quick .cover{width:52px;height:52px;border-radius:0;flex:none}.quick b{min-width:0;font-weight:700}.genre span{position:relative;z-index:1}.genre small{display:block;margin-top:4px;font-size:11px;font-weight:600;letter-spacing:0;opacity:.85}.dialog-scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;display:grid;place-items:center;padding:16px;background:#08050e9e;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade .25s ease}.dialog{width:min(400px,100%);border-radius:28px;overflow:hidden;background:var(--sheet);color:var(--text);box-shadow:0 24px 80px #00000080;animation:dialog-in .4s cubic-bezier(.2,0,0,1)}@keyframes dialog-in{0%{opacity:0;transform:translateY(18px) scale(.96)}}.dialog-hero{position:relative;height:150px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(240px 140px at 50% 120%,rgba(185,108,255,.45),transparent 70%),#0b0a0e}.dialog-hero svg{position:relative;z-index:1;width:74px;color:#b991ee}.dialog-hero i{position:absolute;left:50%;top:50%;width:90px;aspect-ratio:1;border-radius:50%;border:1px solid rgba(185,145,238,.5);translate:-50% -50%;opacity:0;animation:ripple 4.5s cubic-bezier(.2,0,0,1) infinite}.dialog-hero i+i{animation-delay:1.5s}@keyframes ripple{0%{scale:.4;opacity:0}18%{opacity:.34}to{scale:3.1;opacity:0}}.dialog-body{display:grid;gap:10px;padding:22px 24px 18px;text-align:center}.dialog-body h2{margin:0;font-size:22px;text-wrap:balance}.dialog-body p{margin:0 0 6px;color:var(--muted);font-size:14px;line-height:1.45}.dialog-body .btn{height:48px;width:100%;justify-content:center}.dialog-google{background:#fff;color:#1f1f1f;border:1px solid rgba(0,0,0,.12)}.dialog-later{height:40px;font-weight:700;color:var(--accent)}@media(prefers-reduced-motion:reduce){.dialog,.dialog-scrim,.dialog-hero i{animation:none}}.side-join{display:none}@media(min-width:700px){html.wide .home .topline{display:none}html.wide .home-hello{font-size:30px;margin-top:22px}html.wide .quick-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}html.wide .quick{font-size:14px}html.wide .quick .cover{width:60px;height:60px}html.wide .genre-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}html.wide .cover-row{margin-right:0;padding-right:0;gap:16px;scrollbar-width:none}html.wide .cover-card{width:168px;flex-basis:168px;padding:10px;margin:-10px 0;border-radius:14px;transition:background .2s,transform .2s cubic-bezier(.2,0,0,1);box-sizing:content-box}html.wide .cover-card:hover{background:var(--hover);transform:translateY(-2px)}html.wide .cover-card .cover{width:168px;height:168px}html.wide .cover-card b{font-size:13px;font-weight:600}html.wide .cover-card span{font-size:12px}html.wide .side-join{display:grid;gap:6px;margin:12px 10px;padding:14px;border-radius:14px;background:var(--tonal);font-size:12px;color:var(--muted)}html.wide .side-join b{font-size:13px;color:var(--text)}html.wide .side-join .btn{margin-top:6px;justify-content:center}}@media(min-width:700px)and (max-width:1180px){html.wide .side-join{display:none}}.coin-fx{position:fixed;left:0;top:0;width:11px;height:11px;border-radius:50%;pointer-events:none;z-index:400;background:radial-gradient(circle at 35% 30%,#fff,var(--tone) 55%,rgba(0,0,0,.35));box-shadow:0 0 10px var(--tone)}.bump-fx{animation:bump-fx .32s cubic-bezier(.2,0,0,1)}@keyframes bump-fx{40%{transform:scale(1.14)}}.coin-dot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px}.coin-dot.bonus{background:radial-gradient(circle at 35% 30%,#fff,#5ee6d0 55%,#1f8f80)}.bonus-line{margin-top:10px;font-size:13px;color:var(--muted)}.bonus-line b{color:#5ee6d0}.gift-landing{display:grid;place-items:center}.gift-card{width:min(380px,100%);display:flex;flex-direction:column;gap:12px}.gift-from{margin:0;color:var(--soft);font-size:14px}.gift-cover{width:100%;aspect-ratio:1 / 1;height:auto;border-radius:18px;box-shadow:0 18px 40px var(--shadow-lg)}.gift-title{margin:4px 0 0;font-size:24px;line-height:1.15}.gift-cta{height:54px;margin-top:6px}.gift-row{display:flex;align-items:center;gap:12px;text-align:left;margin-bottom:14px}.gift-welcome{z-index:300}.gift-chip{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:16px;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 9px;border-radius:99px;background:var(--glass);border:1px solid var(--glass-line);color:var(--text);font-weight:600;font-size:13px;font-variant-numeric:tabular-nums}.gift-big{font-size:40px;font-weight:700;line-height:1;color:#5ee6d0;font-variant-numeric:tabular-nums}.gift-big small{font-size:14px;letter-spacing:.12em;color:var(--text);margin-left:8px}.gift-video{position:relative;aspect-ratio:16 / 9;border-radius:14px;background:var(--surface3);display:grid;place-items:center;margin:12px 0}.gift-play{width:46px;height:46px;border-radius:50%;background:#ffffffeb;color:#111;display:grid;place-items:center}.gift-video-label{position:absolute;left:10px;bottom:8px;font-size:11px;font-weight:600;color:var(--soft)}.gift-why{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:6px;font-size:13px;color:var(--soft);text-align:left}.gift-why b{color:#5ee6d0}.top-bonus{display:inline-flex;align-items:center;gap:5px;margin-right:10px}@media(prefers-reduced-motion:reduce){.bump-fx{animation:none}}.top-credits .top-bonus,.top-credits .top-paid{display:inline-flex;align-items:center;gap:6px;line-height:1;white-space:nowrap}.top-credits .top-bonus{margin-right:0;padding-right:10px;border-right:1px solid var(--glass-line);color:#5ee6d0;font-variant-numeric:tabular-nums}.top-credits .top-paid{font-variant-numeric:tabular-nums}.top-credits .coin-dot{flex:none;width:13px;height:13px;vertical-align:0}.coin-dot.paid{background:radial-gradient(circle at 35% 30%,#fff,#b96cff 55%,#5a1fa0)}html.wide .top-credits{gap:10px}