:root{
  color-scheme:dark;
  --bg:#080b1c;--bg2:#111638;--ink:#f5f2ff;--muted:#aaa8c6;--line:rgba(255,255,255,.12);
  --glass:rgba(17,22,56,.56);--glass-strong:rgba(14,18,48,.82);--accent:#d7b9ff;--accent2:#86d8ff;
  --gold:#ffe5a8;--danger:#ff9aa9;--radius:28px;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);overscroll-behavior:none;touch-action:manipulation}
body{margin:0;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 20% 0%,#283069 0,transparent 38%),linear-gradient(160deg,#070919,#111538 55%,#0b1027);overflow-x:hidden}
button,input,select{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
button{border:0;cursor:pointer}.hidden{display:none!important}.glass{background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.035));border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 24px 70px rgba(0,0,0,.22);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.deep-shadow{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 90px rgba(0,0,0,.42)}
#visualCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:-3}.noise{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.app-shell{width:min(1440px,100%);margin:auto;min-height:100vh;padding:calc(16px + var(--safe-t)) 24px calc(118px + var(--safe-b))}
.topbar{position:sticky;top:calc(10px + var(--safe-t));z-index:30;height:72px;border-radius:24px;display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 18px;margin-bottom:28px}
.brand-button{display:flex;gap:13px;align-items:center;background:none;text-align:left}.brand-button strong{display:block;font-size:17px;letter-spacing:.06em}.brand-button small{display:block;font-size:10px;letter-spacing:.22em;color:var(--muted);margin-top:2px}.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#fff 0,#e6c9ff 22%,#9b7cff 56%,#4e3a97 100%);box-shadow:0 0 30px rgba(197,159,255,.42);font-size:20px}.top-actions{display:flex;gap:8px}.icon-button{width:46px;height:46px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:20px}
.view{display:none;animation:viewIn .42s ease both}.view.active{display:block}@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero-player{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.68fr);gap:24px;align-items:start}.now-card{border-radius:34px;padding:26px 32px 28px}.now-label{font-size:11px;letter-spacing:.22em;color:#c9c3de;display:flex;align-items:center;gap:8px}.live-dot{width:7px;height:7px;border-radius:50%;background:#d9c1ff;box-shadow:0 0 12px #d9c1ff;animation:pulse 1.6s infinite}@keyframes pulse{50%{opacity:.38;transform:scale(.75)}}
.artwork-wrap{position:relative;margin:18px auto 24px;width:min(72vw,430px);aspect-ratio:1}.artwork{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.4),transparent 2%),radial-gradient(circle at 28% 20%,#a9dfff 0,transparent 1.3%),radial-gradient(circle at 72% 15%,#ead8ff 0,transparent 1.2%),radial-gradient(circle at 50% 52%,#68558f 0,#252950 38%,#10142f 68%,#070a1c 100%);box-shadow:0 0 0 1px rgba(255,255,255,.16),0 0 90px rgba(154,114,255,.25),inset 0 0 90px rgba(0,0,0,.6)}.artwork:before{content:"";position:absolute;inset:8%;border:1px solid rgba(255,255,255,.09);border-radius:50%}.artwork:after{content:"";position:absolute;left:8%;right:8%;bottom:8%;height:26%;background:radial-gradient(ellipse at center,#7b6a91 0,#2b3155 55%,transparent 70%);filter:blur(7px);opacity:.65}.moon{position:absolute;width:23%;aspect-ratio:1;border-radius:50%;right:18%;top:16%;background:radial-gradient(circle at 35% 35%,#fff,#fff0c6 38%,#c4b7f4 72%);box-shadow:0 0 38px rgba(255,245,201,.5)}.music-box-body{position:absolute;left:24%;right:24%;bottom:23%;height:25%;border-radius:16px 16px 24px 24px;background:linear-gradient(145deg,#d2b07a,#714632 58%,#2f1f27);border:1px solid rgba(255,235,194,.45);box-shadow:0 18px 30px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.28);z-index:3}.music-box-lid{position:absolute;left:28%;right:27%;bottom:46%;height:17%;border-radius:50% 50% 10px 10px;background:linear-gradient(145deg,#f0d1a0,#805039 62%,#3a2230);transform:perspective(300px) rotateX(-48deg);transform-origin:bottom;z-index:2;border:1px solid rgba(255,244,215,.42)}.music-cylinder{position:absolute;left:18%;right:18%;top:18%;height:34%;border-radius:999px;background:repeating-linear-gradient(90deg,#d8c5a4 0 3px,#6a5a4d 3px 5px),linear-gradient(#fff,#776);box-shadow:inset 0 3px 5px rgba(255,255,255,.34),0 3px 8px #1d1217}.music-key{position:absolute;right:-16%;top:48%;width:25%;height:5px;border-radius:5px;background:#cfbd9c;box-shadow:0 0 0 2px #5b493b}.music-key:after{content:"";position:absolute;right:-8px;top:-7px;width:15px;height:15px;border:4px solid #cfbd9c;border-radius:50%}.floating-note{position:absolute;z-index:5;color:#f4ddff;text-shadow:0 0 18px #cbb4ff;animation:floatNote 4s ease-in-out infinite}.note-a{left:17%;top:26%;font-size:27px}.note-b{right:18%;top:41%;font-size:22px;animation-delay:-1.4s}.note-c{left:26%;top:15%;font-size:18px;animation-delay:-2.2s}@keyframes floatNote{50%{transform:translateY(-14px) rotate(8deg);opacity:.55}}
.favorite-button{position:absolute;right:4%;bottom:5%;width:50px;height:50px;border-radius:17px;background:rgba(13,17,44,.74);border:1px solid rgba(255,255,255,.16);font-size:28px;z-index:8}.favorite-button.active{color:#ffd4e3;background:rgba(98,39,74,.7)}.track-meta{text-align:center}.track-meta p{margin:0 0 7px;color:#bfa8e9;font-size:10px;letter-spacing:.22em}.track-meta h1{margin:0;font-family:Georgia,"Yu Mincho",serif;font-size:clamp(26px,4vw,42px);font-weight:500;letter-spacing:.08em}.track-meta span{display:block;color:var(--muted);font-size:13px;margin-top:9px}.progress-area{margin:26px 0 8px}.range{appearance:none;width:100%;height:5px;border-radius:999px;background:linear-gradient(90deg,var(--accent2) var(--range,0%),rgba(255,255,255,.15) var(--range,0%));outline:0}.range::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(210,185,255,.14),0 0 18px #c4a8ff}.range::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff}.range.slim{height:4px}.time-row{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:8px}.transport{display:flex;align-items:center;justify-content:center;gap:18px;margin:8px 0 20px}.transport button{background:none}.transport-small{font-size:20px;color:#b7b2ca;width:40px;height:40px}.transport-small.active{color:var(--accent2);text-shadow:0 0 12px var(--accent2)}.transport-medium{width:50px;height:50px;font-size:20px}.play-button{width:76px;height:76px;border-radius:50%;font-size:28px;background:linear-gradient(145deg,#f8f0ff,#cbb4ff 54%,#8c75de);color:#26203e;box-shadow:0 0 0 8px rgba(255,255,255,.06),0 18px 38px rgba(116,77,220,.35)}.player-options{display:flex;justify-content:space-between;align-items:center;gap:16px}.volume-control{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;flex:1}.volume-control .range{max-width:170px}.pill-button,.text-button{background:none;color:#d9d4e7}.pill-button{border:1px solid var(--line);padding:10px 15px;border-radius:999px;background:rgba(255,255,255,.04);font-size:12px}.text-button{font-size:12px;text-decoration:none}.text-button.full{width:100%;padding:14px}.queue-card{border-radius:30px;padding:23px;position:sticky;top:112px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px}.section-heading span,.page-heading>div>span{font-size:10px;letter-spacing:.2em;color:#ac9ad1}.section-heading h2{margin:4px 0 0;font-size:22px}.up-next-list{display:grid;gap:10px}.queue-item{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:9px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid transparent}.queue-item:hover{border-color:var(--line);background:rgba(255,255,255,.07)}.queue-art,.track-art{display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,var(--c1,#745a9d),var(--c2,#202a55));box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}.queue-art{width:52px;height:52px}.queue-copy strong{display:block;font-size:13px}.queue-copy small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.queue-time{font-size:10px;color:var(--muted)}
.page-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:18px 4px 26px}.page-heading h1{font-family:Georgia,"Yu Mincho",serif;font-weight:500;letter-spacing:.05em;font-size:clamp(28px,4vw,44px);margin:5px 0}.page-heading p{color:var(--muted);margin:0;font-size:13px}.primary-button,.secondary-button,.danger-button{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border-radius:16px;font-weight:700;font-size:13px}.primary-button{background:linear-gradient(145deg,#eee6ff,#c5adff 60%,#9b82e7);color:#2c2346;box-shadow:0 10px 24px rgba(130,92,225,.25)}.secondary-button{background:rgba(255,255,255,.065);border:1px solid var(--line)}.danger-button{background:rgba(255,99,122,.1);border:1px solid rgba(255,128,145,.25);color:#ffc0ca}.full{width:100%}.library-toolbar{border-radius:24px;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.search-box{display:flex;align-items:center;gap:8px;background:rgba(5,8,24,.48);border:1px solid var(--line);border-radius:15px;padding:0 14px;min-width:220px}.search-box input,.composer-controls input,.composer-controls select{width:100%;border:0;background:transparent;color:var(--ink);outline:0}.search-box input{height:43px}.filter-row{display:flex;gap:8px;overflow:auto;padding:2px;scrollbar-width:none}.filter-chip{white-space:nowrap;border-radius:999px;padding:9px 13px;background:transparent;border:1px solid transparent;color:var(--muted);font-size:12px}.filter-chip.active{background:rgba(212,188,255,.14);border-color:rgba(212,188,255,.25);color:#f2eaff}.library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.track-card{border-radius:24px;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.032));border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.18);transition:.25s ease}.track-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.25)}.track-art{height:160px;border-radius:0;position:relative;font-size:38px}.track-art:before{content:"";position:absolute;width:88px;height:88px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.36),transparent 65%);filter:blur(2px)}.track-art span{position:relative;text-shadow:0 0 28px rgba(255,255,255,.6)}.track-body{padding:15px}.track-body h3{font-size:15px;margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-body p{font-size:11px;color:var(--muted);margin:0}.track-actions{display:flex;justify-content:space-between;align-items:center;margin-top:14px}.round-play{width:38px;height:38px;border-radius:13px;background:rgba(255,255,255,.11)}.more-button{background:none;color:var(--muted);font-size:20px}.badge{font-size:9px;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.08);color:#d7d0e8}.empty-state{text-align:center;padding:60px 20px;border-radius:28px}.empty-orb,.guide-orb,.modal-icon{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;background:radial-gradient(circle at 35% 25%,#fff,#c7b0ff 35%,#7251ba);box-shadow:0 0 34px rgba(196,160,255,.35);color:#251b43;font-size:26px}.empty-state p{color:var(--muted)}
.studio-top-actions{display:flex;gap:10px}.studio-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px}.composer-card,.studio-guide,.settings-card{border-radius:28px;padding:22px}.composer-controls{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:12px;margin-bottom:20px}.composer-controls label{display:grid;gap:7px;color:var(--muted);font-size:11px}.composer-controls input,.composer-controls select{height:44px;border-radius:13px;padding:0 12px;background:rgba(4,7,24,.48);border:1px solid var(--line)}.inline-control{display:flex;align-items:center;gap:10px;height:44px}.inline-control output{white-space:nowrap;color:#ddd6ee}.sequencer-shell{overflow:auto;padding-bottom:4px}.sequencer-info{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin:0 0 7px}.sequencer-info.bottom{margin:7px 0 0}.sequencer{min-width:760px;display:grid;grid-template-columns:48px repeat(16,1fr);gap:5px}.note-label{display:grid;place-items:center;color:#aaa4bf;font-size:10px}.step-cell{aspect-ratio:1.12;border-radius:9px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);position:relative}.step-cell.beat{background:rgba(255,255,255,.072)}.step-cell.active{background:radial-gradient(circle at 35% 30%,#fff 0,#d7c1ff 12%,#9f7fe6 45%,#4b3f8c 100%);box-shadow:0 0 16px rgba(189,151,255,.45);border-color:#e4d5ff}.step-cell.playing:after{content:"";position:absolute;inset:-3px;border-radius:11px;border:2px solid #9ee8ff;box-shadow:0 0 14px #7adfff}.studio-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px;flex-wrap:wrap}.studio-play-button{padding:13px 20px;border-radius:16px;background:linear-gradient(145deg,#dff8ff,#9edfff 58%,#79afe5);color:#14324a;font-weight:800}.studio-guide h2{font-family:Georgia,"Yu Mincho",serif;text-align:center}.studio-guide ol{list-style:none;padding:0;margin:22px 0;display:grid;gap:14px;counter-reset:steps}.studio-guide li{position:relative;padding-left:45px;min-height:34px;counter-increment:steps}.studio-guide li:before{content:counter(steps);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:rgba(214,189,255,.14);border:1px solid rgba(214,189,255,.22);color:#e8dcff}.studio-guide li strong,.studio-guide li span{display:block}.studio-guide li strong{font-size:13px}.studio-guide li span{font-size:10px;color:var(--muted);margin-top:3px}.tip-card{border-radius:18px;padding:15px;background:rgba(255,230,169,.08);border:1px solid rgba(255,230,169,.16)}.tip-card span{font-size:9px;letter-spacing:.16em;color:#ffe8af}.tip-card p{font-size:11px;line-height:1.7;margin:7px 0 0;color:#d6cfbf}.key-legend{margin-top:17px;display:flex;flex-wrap:wrap;gap:6px}.key-pill{font-size:9px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.05);color:var(--muted)}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.settings-card h2{margin:0 0 14px;font-size:18px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;border-top:1px solid rgba(255,255,255,.08)}.setting-row strong,.setting-row small{display:block}.setting-row strong{font-size:13px}.setting-row small{font-size:10px;color:var(--muted);margin-top:4px}.setting-row input[type=checkbox]{appearance:none;width:48px;height:28px;border-radius:999px;background:rgba(255,255,255,.12);position:relative;transition:.2s;flex:none}.setting-row input:after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;top:3px;left:3px;background:#f3f0f9;transition:.2s}.setting-row input:checked{background:linear-gradient(90deg,#9174d8,#74c9ea)}.setting-row input:checked:after{transform:translateX(20px)}.data-actions{display:grid;gap:9px}.about-copy{color:var(--muted);line-height:1.8;font-size:12px}.version-row{display:flex;justify-content:space-between;margin-top:18px;padding-top:15px;border-top:1px solid var(--line);font-size:12px}
.bottom-nav{position:fixed;left:50%;bottom:calc(14px + var(--safe-b));transform:translateX(-50%);z-index:40;width:min(570px,calc(100% - 28px));height:72px;border-radius:24px;padding:7px 9px;display:grid;grid-template-columns:repeat(4,1fr)}.nav-item{background:none;border-radius:17px;display:grid;place-items:center;align-content:center;gap:3px;color:#9792ad}.nav-item span{font-size:19px}.nav-item small{font-size:9px}.nav-item.active{background:rgba(217,196,255,.13);color:#f2eaff}.nav-item.create span{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#e8dbff,#9d81e3);color:#2b2145;box-shadow:0 8px 20px rgba(130,89,224,.28)}
.toast{position:fixed;z-index:100;left:50%;bottom:calc(100px + var(--safe-b));transform:translate(-50%,20px);padding:11px 17px;border-radius:999px;background:rgba(9,12,31,.9);border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.35);font-size:12px;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
.modal{max-width:390px;width:calc(100% - 32px);border-radius:28px;color:var(--ink);padding:24px;border:1px solid var(--line);background:rgba(14,18,48,.92)}.modal::backdrop{background:rgba(3,5,15,.72);backdrop-filter:blur(7px)}.modal h2,.modal p{text-align:center}.modal h2{margin:0}.modal p{color:var(--muted);font-size:12px;line-height:1.7}.timer-options{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:18px 0}.timer-options button{padding:14px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid var(--line)}
@media(max-width:1050px){.hero-player{grid-template-columns:1fr}.queue-card{position:static}.library-grid{grid-template-columns:repeat(3,1fr)}.studio-layout{grid-template-columns:1fr}.studio-guide{display:grid;grid-template-columns:80px 1fr 1fr;align-items:start;gap:16px}.studio-guide h2{text-align:left}.studio-guide ol{margin:0}.tip-card{grid-column:3}.key-legend{grid-column:1/-1}.composer-controls{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.app-shell{padding-left:12px;padding-right:12px;padding-top:calc(8px + var(--safe-t))}.topbar{height:62px;border-radius:20px;margin-bottom:16px;top:calc(6px + var(--safe-t))}.brand-mark{width:37px;height:37px}.brand-button strong{font-size:14px}.brand-button small{font-size:8px}.icon-button{width:40px;height:40px;border-radius:14px}.hero-player{gap:14px}.now-card{padding:19px 15px 22px;border-radius:26px}.artwork-wrap{width:min(78vw,360px);margin-top:12px;margin-bottom:18px}.track-meta h1{font-size:28px}.transport{gap:10px}.play-button{width:68px;height:68px}.player-options{display:grid}.volume-control .range{max-width:none}.pill-button{width:100%}.queue-card{border-radius:24px;padding:16px}.page-heading{align-items:stretch;flex-direction:column;margin-top:10px}.page-heading .primary-button,.upload-button{width:100%}.library-toolbar{align-items:stretch;flex-direction:column}.search-box{min-width:0}.library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.track-art{height:124px}.track-body{padding:12px}.composer-card,.studio-guide,.settings-card{padding:16px;border-radius:23px}.composer-controls{grid-template-columns:1fr}.studio-actions{display:grid;grid-template-columns:repeat(2,1fr)}.studio-actions button{width:100%}.studio-guide{display:block}.studio-guide h2{text-align:center}.studio-guide ol{margin:22px 0}.settings-grid{grid-template-columns:1fr}.bottom-nav{height:66px}.top-actions #openSettingsButton{display:none}}
@media(max-width:390px){.library-grid{grid-template-columns:1fr 1fr}.track-art{height:106px}.track-body h3{font-size:13px}.track-body p{font-size:9px}.queue-item{grid-template-columns:46px 1fr auto}.queue-art{width:46px;height:46px}.page-heading h1{font-size:30px}.studio-top-actions{display:grid;grid-template-columns:1fr 1fr}.primary-button,.secondary-button,.danger-button{font-size:11px;padding:12px 10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

.hero-note{margin:0 auto 12px;display:inline-flex;align-items:center;justify-content:center;max-width:100%;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#e7ddfb;font-size:12px;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.favorite-button,.round-play,.transport-medium{display:grid;place-items:center}
.play-button{display:grid;place-items:center;gap:0;line-height:1}
.play-button small{display:block;font-size:10px;letter-spacing:.14em;margin-top:2px}
.transport-medium,.transport-small{border-radius:50%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.transport-medium{width:54px;height:54px}
.round-play{font-size:18px}
.player-tip{margin-top:18px}
.player-tip .text-button.full{justify-content:flex-start;padding:12px 0 0}
.artwork{animation:artGlow 7s ease-in-out infinite}
@keyframes artGlow{50%{box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 120px rgba(154,114,255,.38),inset 0 0 90px rgba(0,0,0,.55)}}
.sequencer{min-width:1760px;display:grid;grid-template-columns:48px repeat(64,22px);gap:4px}
.step-cell{aspect-ratio:1/1;border-radius:7px}
.modal form{margin-top:16px}
@media(max-width:700px){.hero-note{font-size:11px;padding:8px 12px}.transport-medium{width:48px;height:48px}.sequencer{min-width:1560px;grid-template-columns:42px repeat(64,20px)}}

/* --- v1.2 luxe player refresh --- */
:root{--track-accent:#c6a4ff;--track-accent-2:#26386d}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.hero-player{grid-template-columns:minmax(0,1fr)!important;max-width:880px;margin:0 auto;gap:18px}
.luxe-player{padding:18px 16px 18px;border-radius:34px;background:linear-gradient(180deg,rgba(14,20,64,.86),rgba(8,12,39,.94));border:1px solid rgba(201,189,255,.18);box-shadow:0 30px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.1)}
.topbar{background:linear-gradient(145deg,rgba(22,29,78,.74),rgba(9,13,45,.88))}
.menu-button{font-size:16px;letter-spacing:2px;font-weight:700}
.hero-art-shell{position:relative;margin-bottom:26px}
#artwork.artwork{position:relative;width:100%;aspect-ratio:860/490;border-radius:34px;background:
  radial-gradient(circle at 50% 0%,rgba(255,255,255,.12),transparent 32%),
  linear-gradient(180deg,rgba(16,19,52,.08),rgba(2,5,16,.24)),
  url('./hero-artwork-clean.png') center/cover no-repeat !important;
  box-shadow:0 18px 55px rgba(7,9,29,.55), inset 0 0 0 1px rgba(255,255,255,.16);
  overflow:hidden;
}
#artwork.artwork::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0 40%,rgba(255,255,255,.11) 50%,transparent 60%);mix-blend-mode:screen;opacity:.55;animation:artSweep 8s ease-in-out infinite}
#artwork.artwork::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 22%,rgba(255,245,180,.2),transparent 6%),radial-gradient(circle at 69% 29%,rgba(255,255,255,.14),transparent 10%),radial-gradient(circle at 58% 61%,rgba(255,255,255,.09),transparent 6%);pointer-events:none}
@keyframes artSweep{0%,100%{transform:translateX(-35%) skewX(-15deg);opacity:.25}50%{transform:translateX(38%) skewX(-15deg);opacity:.65}}
.hero-note-overlay{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);z-index:5;min-width:min(90%,530px);text-align:center;padding:11px 18px;border-radius:999px;font-size:13px;letter-spacing:.03em;background:rgba(16,20,60,.82);border:1px solid rgba(212,200,255,.16);box-shadow:0 14px 32px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.1)}
.favorite-button{position:absolute!important;right:16px;bottom:22px;width:94px;height:94px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,rgba(121,93,241,.42),rgba(29,28,75,.84) 70%);border:2px solid rgba(190,171,255,.45);box-shadow:0 0 28px rgba(166,122,255,.28),inset 0 0 0 1px rgba(255,255,255,.16);font-size:50px;color:#fff;z-index:6}
.favorite-button.active{background:radial-gradient(circle at 50% 40%,rgba(255,105,180,.38),rgba(46,24,64,.88) 70%);color:#ffdbe9}
.luxe-track-meta{padding-top:14px;text-align:center;position:relative}
.luxe-track-meta p{margin:0;color:#ae94f2;letter-spacing:.24em;font-size:12px}
.luxe-track-meta h1{position:relative;display:inline-block;margin:16px 0 10px;font-family:Georgia,"Yu Mincho",serif;font-weight:500;font-size:clamp(42px,6vw,78px);letter-spacing:.08em;line-height:1.08;text-shadow:0 2px 18px rgba(178,144,255,.16)}
.luxe-track-meta h1::before,.luxe-track-meta h1::after{content:"";position:absolute;top:50%;width:min(12vw,82px);height:1px;background:linear-gradient(90deg,transparent,rgba(198,164,255,.7));box-shadow:0 0 12px rgba(198,164,255,.3)}
.luxe-track-meta h1::before{right:100%;margin-right:22px}.luxe-track-meta h1::after{left:100%;margin-left:22px;transform:scaleX(-1)}
.luxe-track-meta span{display:block;color:#d2c6eb;font-size:17px;margin-top:0;letter-spacing:.02em}
.luxe-progress-area{margin:24px 6px 16px}.luxe-progress-area .range{height:8px;background:linear-gradient(90deg,#d0b0ff var(--range,0%),rgba(255,255,255,.11) var(--range,0%));box-shadow:0 0 0 1px rgba(255,255,255,.04) inset}
.luxe-progress-area .range::-webkit-slider-thumb{width:22px;height:22px;background:#fdfcff;box-shadow:0 0 0 8px rgba(199,164,255,.15),0 0 22px rgba(212,183,255,.65)}
.luxe-progress-area .time-row{font-size:14px;color:#dad0f6;margin-top:11px}
.transport-luxe{display:grid;grid-template-columns:1fr auto auto auto 1fr;align-items:end;gap:18px;margin:12px 0 18px}
.control-labeled{display:grid;place-items:center;gap:8px;align-self:end;background:none;border:none;color:#b690ff;padding:0 4px 8px}
.control-labeled .control-glyph{font-size:36px;line-height:1;filter:drop-shadow(0 0 10px rgba(154,116,255,.25))}
.control-labeled small{font-size:13px;color:#c2b7e8}
.luxe-circle,.play-button{display:grid;place-items:center;border-radius:50%;border:1px solid rgba(197,184,255,.18);background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.08),rgba(18,22,58,.88) 72%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 28px rgba(0,0,0,.18)}
.luxe-circle{width:92px;height:92px;font-size:42px;color:#fff}
.luxe-circle .control-glyph{transform:translateX(1px)}
.play-button{position:relative;width:148px;height:148px;border:2px solid rgba(255,220,180,.38);background:radial-gradient(circle at 45% 38%,#7e68f0 0,#4330a7 35%,#1c214d 74%,#121632 100%);box-shadow:0 0 0 9px rgba(170,144,255,.05),0 0 35px rgba(156,113,255,.42),0 24px 46px rgba(0,0,0,.28)}
.play-button::before{content:"";position:absolute;inset:6px;border-radius:50%;border:2px solid rgba(255,214,149,.62);box-shadow:0 0 22px rgba(255,201,120,.34)}
.play-button::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(255,255,255,.09);box-shadow:0 0 42px rgba(176,119,255,.18)}
#playIcon{position:relative;z-index:2;font-size:62px;line-height:1;color:#fff;text-shadow:0 0 16px rgba(255,255,255,.4)}
.volume-row{padding:0 4px 4px}.volume-row .range{height:7px;background:linear-gradient(90deg,#d0b0ff var(--range,0%),rgba(255,255,255,.1) var(--range,0%))}.volume-row .range::-webkit-slider-thumb{width:20px;height:20px}.speaker-ico{font-size:22px;color:#cdbcf3}
.timer-row{width:100%;margin-top:10px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;border-radius:24px;background:linear-gradient(145deg,rgba(23,29,74,.82),rgba(10,14,43,.9));border:1px solid rgba(207,194,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.18)}
.timer-row.active{box-shadow:0 0 0 1px rgba(190,171,255,.2),0 0 24px rgba(166,122,255,.18), inset 0 1px 0 rgba(255,255,255,.08)}
.timer-copy{display:flex;align-items:center;gap:14px}.timer-copy strong{font-size:16px;font-weight:600}.timer-moon{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,220,160,.12);color:#ffd9a6;font-size:20px}.timer-value{font-size:16px;color:#f0e8ff}
.composer-shortcut{width:100%;margin-top:16px;padding:18px 18px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;border-radius:28px;background:linear-gradient(145deg,rgba(28,34,88,.82),rgba(10,14,43,.92));border:1px solid rgba(207,194,255,.16);text-align:left;box-shadow:0 16px 36px rgba(0,0,0,.2)}
.composer-icon-wrap{width:84px;height:84px;border-radius:22px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.22)}
.composer-icon-img{width:100%;height:100%;object-fit:cover;display:block}
.composer-copy{display:flex;flex-direction:column;gap:4px;min-width:0}.composer-copy em{font-style:normal;color:#c6baf2;font-size:14px}.composer-copy strong{font-size:20px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.composer-copy small{font-size:15px;color:#d1c7eb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.composer-badge{padding:14px 16px;border-radius:22px;background:rgba(54,45,105,.55);border:1px solid rgba(220,206,255,.14);display:grid;gap:3px;justify-items:center;min-width:132px}
.composer-badge b{font-size:16px;color:#e5dbff}.composer-badge small{font-size:14px;color:#d0c5ec}
.player-queue{padding:22px;border-radius:28px;background:linear-gradient(145deg,rgba(19,24,64,.84),rgba(9,12,39,.9));border:1px solid rgba(198,184,255,.12)}
.player-queue .section-heading{margin-bottom:14px}.player-queue .section-heading h2{font-size:26px}.player-queue .section-heading span{font-size:11px;color:#ab96d6}
.queue-item{padding:11px 12px;border-radius:22px;background:rgba(255,255,255,.032);border:1px solid rgba(255,255,255,.04)}
.queue-item:hover{background:rgba(255,255,255,.06);border-color:rgba(202,184,255,.16)}
.queue-art{background:linear-gradient(145deg,var(--track-accent),var(--track-accent-2));border-radius:16px}
.bottom-nav{background:linear-gradient(145deg,rgba(24,30,81,.92),rgba(9,13,44,.94));border:1px solid rgba(201,189,255,.18);height:86px}
.nav-item{gap:6px}.nav-item span{font-size:26px}.nav-item small{font-size:12px}.nav-item.active{background:rgba(195,173,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 24px rgba(158,115,255,.14)}
.nav-item.create span{width:48px;height:48px;border-radius:16px;font-size:34px}
@media(max-width:700px){
  .luxe-player{padding:14px 12px 16px}
  #artwork.artwork{border-radius:28px}
  .favorite-button{width:82px;height:82px;font-size:42px;right:12px;bottom:18px}
  .hero-note-overlay{font-size:12px;min-width:86%;padding:10px 16px;bottom:-16px}
  .luxe-track-meta h1{font-size:30px;display:block}
  .luxe-track-meta h1::before,.luxe-track-meta h1::after{display:none}
  .luxe-track-meta span{font-size:14px}
  .transport-luxe{grid-template-columns:1fr 58px 110px 58px 1fr;gap:10px}
  .luxe-circle{width:64px;height:64px;font-size:28px}
  .play-button{width:112px;height:112px}
  #playIcon{font-size:48px}
  .control-labeled .control-glyph{font-size:28px}.control-labeled small{font-size:11px}
  .timer-row{padding:16px 16px}.timer-copy strong,.timer-value{font-size:15px}
  .composer-shortcut{grid-template-columns:70px 1fr 94px;gap:12px;padding:14px}
  .composer-icon-wrap{width:70px;height:70px;border-radius:18px}
  .composer-copy strong{font-size:18px;white-space:normal;line-height:1.3}
  .composer-copy small{font-size:13px;white-space:normal;line-height:1.35}
  .composer-badge{min-width:94px;padding:10px 8px;border-radius:18px}.composer-badge b{font-size:14px}.composer-badge small{font-size:12px}
  .player-queue .section-heading h2{font-size:22px}
  .bottom-nav{height:76px}
}

/* --- v1.2.1 smart/sleek sizing tune --- */
.favorite-button{width:78px;height:78px;font-size:40px;right:14px;bottom:18px}
.hero-note-overlay{padding:10px 16px;font-size:12px}
.transport-luxe{gap:14px;margin:10px 0 14px}
.control-labeled .control-glyph{font-size:28px}
.control-labeled small{font-size:12px}
.luxe-circle{width:76px;height:76px;font-size:34px}
.play-button{width:126px;height:126px}
#playIcon{font-size:54px}
.timer-row{margin-top:8px;padding:15px 18px;border-radius:21px}
.timer-copy strong,.timer-value{font-size:15px}
.timer-moon{width:32px;height:32px;font-size:18px}
.composer-shortcut{margin-top:14px;padding:15px 16px;border-radius:24px;grid-template-columns:72px 1fr auto;gap:14px}
.composer-icon-wrap{width:72px;height:72px;border-radius:18px}
.composer-copy em{font-size:12px}.composer-copy strong{font-size:18px}.composer-copy small{font-size:13px}
.composer-badge{min-width:112px;padding:11px 12px;border-radius:18px}.composer-badge b{font-size:14px}.composer-badge small{font-size:12px}
.player-queue{padding:18px 20px;border-radius:24px}
.bottom-nav{width:min(560px,calc(100% - 34px));height:70px;padding:6px 8px;border-radius:22px;bottom:calc(10px + var(--safe-b))}
.nav-item{border-radius:15px;gap:2px;color:#aca6c3}
.nav-item span{font-size:22px}.nav-item small{font-size:10px}
.nav-item.active{background:rgba(195,173,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 20px rgba(0,0,0,.12)}
.nav-item.create span{width:38px;height:38px;border-radius:12px;font-size:28px;box-shadow:0 6px 18px rgba(130,89,224,.22)}
@media(max-width:700px){
  .favorite-button{width:68px;height:68px;font-size:34px;right:12px;bottom:16px}
  .transport-luxe{grid-template-columns:1fr 52px 98px 52px 1fr;gap:8px}
  .luxe-circle{width:56px;height:56px;font-size:24px}
  .play-button{width:98px;height:98px}
  #playIcon{font-size:42px}
  .control-labeled .control-glyph{font-size:24px}.control-labeled small{font-size:10px}
  .timer-row{padding:13px 14px;border-radius:18px}.timer-copy{gap:10px}.timer-copy strong,.timer-value{font-size:14px}
  .timer-moon{width:28px;height:28px;font-size:16px}
  .composer-shortcut{grid-template-columns:60px 1fr 84px;gap:10px;padding:13px;border-radius:20px}
  .composer-icon-wrap{width:60px;height:60px;border-radius:16px}
  .composer-copy strong{font-size:16px}.composer-copy small{font-size:12px}
  .composer-badge{min-width:84px;padding:9px 8px;border-radius:16px}.composer-badge b{font-size:12px}.composer-badge small{font-size:11px}
  .bottom-nav{height:62px;width:min(540px,calc(100% - 26px));padding:5px 7px;border-radius:20px;bottom:calc(8px + var(--safe-b))}
  .nav-item span{font-size:20px}.nav-item small{font-size:9px}
  .nav-item.create span{width:34px;height:34px;border-radius:11px;font-size:25px}
}