:root{color-scheme:dark;--bg:#0d0c10;--panel:#151219;--panel-2:#1b1720;--text:#f2edf0;--muted:#aaa4ad;--line:rgba(242,237,240,.13);--right:#ed9a9d;--left:#a98fdd;--accent:#e8b1b8;--serif:"DM Serif Display",serif;--sans:"Be Vietnam Pro",sans-serif}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;color:var(--text);background:radial-gradient(circle at 78% 0,rgba(169,143,221,.13),transparent 32rem),radial-gradient(circle at 12% 34%,rgba(237,154,157,.07),transparent 30rem),var(--bg);font-family:var(--sans);min-height:100vh}button,input,select{font:inherit}a{color:inherit;text-decoration:none}.player-header{height:78px;padding:0 clamp(18px,4.5vw,70px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line);background:#0d0c10db;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);position:relative;z-index:5}.player-brand{display:flex;align-items:center;gap:11px}.player-brand strong{font:1.25rem var(--serif);display:block;line-height:1}.player-brand small{display:block;margin-top:4px;color:var(--muted);font-size:.45rem;font-weight:700;letter-spacing:.2em}.brand-bars{width:29px;height:29px;display:flex;gap:3px;align-items:flex-end;transform:skew(-8deg)}.brand-bars i{width:8px;border-radius:1px;background:var(--right)}.brand-bars i:first-child{height:70%}.brand-bars i:nth-child(2){height:100%}.brand-bars i:last-child{height:50%}.header-copy{text-align:center;display:grid;gap:2px}.header-copy span{color:var(--accent);font-size:.55rem;font-weight:700;letter-spacing:.18em}.header-copy strong{font-size:.72rem;font-weight:500}.back-link{justify-self:end;color:var(--muted);font-size:.7rem;font-weight:600}.back-link span{margin-left:10px}.intro{min-height:calc(100vh - 78px);padding:clamp(50px,8vw,110px) clamp(20px,7vw,110px);display:grid;grid-template-columns:1fr minmax(340px,.8fr);gap:clamp(40px,8vw,120px);align-items:center}.eyebrow{margin:0 0 14px;color:var(--accent);font-size:.61rem;font-weight:700;letter-spacing:.22em}.intro h1{font:400 clamp(3.6rem,6.5vw,6.5rem)/.94 var(--serif);letter-spacing:-.035em;margin:0 0 25px}.intro h1 em{color:var(--right);font-weight:400}.intro-copy>p:not(.eyebrow){max-width:660px;color:var(--muted);font-size:.86rem;line-height:1.9}.legend{display:flex;gap:25px;flex-wrap:wrap;margin-top:36px;color:var(--muted);font-size:.68rem}.legend span{display:flex;align-items:center;gap:8px}.legend i{width:10px;height:10px;border-radius:50%}.legend i.right{background:var(--right);box-shadow:0 0 16px var(--right)}.legend i.left{background:var(--left);box-shadow:0 0 16px var(--left)}.legend b{color:var(--text)}.drop-zone{min-height:410px;padding:45px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px dashed rgba(232,177,184,.38);border-radius:26px;background:linear-gradient(145deg,#1e1923db,#110f15eb);box-shadow:0 30px 85px #0006;cursor:pointer;transition:.25s}.drop-zone:hover,.drop-zone.dragging{border-color:var(--right);transform:translateY(-3px);background:#1c1720}.drop-zone input,.replace-file input{position:absolute;width:1px;height:1px;opacity:0}.upload-icon{width:82px;height:82px;display:grid;place-items:center;border-radius:50%;margin-bottom:24px;color:#171217;background:linear-gradient(135deg,var(--right),#d0b7e0);font:2rem var(--serif);box-shadow:0 16px 45px #ed9a9d33}.drop-zone strong{font:1.75rem var(--serif)}.drop-zone small{color:var(--muted);font-size:.68rem;margin:10px 0 26px}.drop-zone em{padding:13px 20px;border:1px solid var(--line);border-radius:999px;font-size:.68rem;font-style:normal;font-weight:700}.drop-zone em span{margin-left:25px}.studio{padding:36px clamp(14px,4vw,62px) 70px}.studio-topbar{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:25px;margin-bottom:22px}.studio-topbar h1{font:400 clamp(1.9rem,3.5vw,3.1rem)/1 var(--serif);margin:0}.studio-topbar>div:first-child>p:last-child{color:var(--muted);font-size:.64rem;margin:7px 0 0}.practice-tip{display:flex;align-items:center;gap:12px;padding:9px 15px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.practice-tip>span{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:#171217;background:var(--right);font-weight:800}.practice-tip div{display:grid}.practice-tip small{color:var(--muted);font-size:.48rem;letter-spacing:.14em}.practice-tip strong{margin-top:3px;font-size:.72rem}.replace-file,.secondary-button{padding:11px 15px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font-size:.65rem;font-weight:700;cursor:pointer}.visualizer-shell{height:min(58vh,620px);min-height:390px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#09080b;box-shadow:0 28px 70px #0007}.visualizer-shell canvas{display:block;width:100%;height:100%}.canvas-message{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);padding:10px 15px;border:1px solid var(--line);border-radius:999px;color:#d8d0d7;background:#100e13cc;font-size:.66rem;pointer-events:none;transition:.25s}.canvas-message.hidden{opacity:0}.fullscreen-button{position:absolute;right:12px;top:12px;width:37px;height:37px;border:1px solid var(--line);border-radius:9px;color:var(--text);background:#111014b8;font-size:1rem;cursor:pointer}.transport{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}.play-button{width:54px;height:54px;border:0;border-radius:50%;color:#171217;background:linear-gradient(135deg,var(--right),#d5b8df);font-size:1rem;cursor:pointer;box-shadow:0 10px 30px #ed9a9d38}.timeline input{width:100%;accent-color:var(--right)}.timeline>div{display:flex;justify-content:space-between;color:var(--muted);font-size:.58rem;margin-top:3px}.speed-control{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:.62rem}.speed-control select{padding:8px 25px 8px 10px;border:1px solid var(--line);border-radius:8px;color:var(--text);background:var(--panel)}.practice-controls{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 0}.control-group{display:flex;align-items:center;gap:7px;margin-right:auto}.control-group>span{color:var(--muted);font-size:.62rem;margin-right:6px}.hand-toggle{padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:transparent;font-size:.61rem;cursor:pointer}.hand-toggle.active.right{color:#1b1216;background:var(--right);border-color:var(--right)}.hand-toggle.active.left{color:#15111b;background:var(--left);border-color:var(--left)}.switch{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.62rem;cursor:pointer}.switch input{position:absolute;opacity:0}.switch>span{width:32px;height:18px;padding:2px;border-radius:20px;background:#34303a;transition:.2s}.switch>span:after{content:"";display:block;width:14px;height:14px;border-radius:50%;background:#8f8992;transition:.2s}.switch input:checked+span{background:#785764}.switch input:checked+span:after{transform:translate(14px);background:#f1dce0}.guidance{margin-top:35px;padding:30px;display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;gap:35px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(120deg,#17141a,#1b1720)}.guidance h2{font:400 1.65rem/1.1 var(--serif);margin:0}.guidance>p{color:var(--muted);font-size:.63rem;line-height:1.75}.finger-guide{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.finger-guide span{padding:12px 5px;border:1px solid var(--line);border-radius:10px;text-align:center;color:var(--muted);font-size:.52rem}.finger-guide b{display:block;color:var(--text);font:1.3rem var(--serif)}.toast{position:fixed;z-index:20;left:50%;bottom:24px;transform:translate(-50%,20px);padding:11px 17px;border-radius:999px;color:#171217;background:#e9dce7;font-size:.67rem;opacity:0;transition:.22s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%)}.visualizer-shell:fullscreen{height:100vh;border:0;border-radius:0}.visualizer-shell:fullscreen canvas{height:100%}@media (max-width:900px){.player-header{grid-template-columns:1fr auto}.header-copy{display:none}.intro{grid-template-columns:1fr;padding-top:60px}.drop-zone{min-height:300px}.guidance{grid-template-columns:1fr}.studio-topbar{grid-template-columns:1fr auto}.practice-tip{display:none}.visualizer-shell{min-height:340px}.transport{grid-template-columns:auto 1fr}.speed-control{grid-column:1/-1;justify-content:flex-end}.control-group{width:100%;margin:0}.practice-controls{gap:13px}}@media (max-width:560px){.player-header{height:66px}.player-brand small,.back-link span{display:none}.back-link{font-size:.62rem}.intro{min-height:calc(100vh - 66px);padding:42px 16px}.intro h1{font-size:3.25rem}.drop-zone{padding:28px 18px}.drop-zone strong{font-size:1.45rem}.legend{gap:14px}.studio{padding:23px 8px 48px}.studio-topbar{padding-inline:7px}.replace-file{padding:9px 11px}.visualizer-shell{height:53vh;min-height:320px;border-radius:12px}.play-button{width:48px;height:48px}.transport{gap:10px}.guidance{padding:22px 16px}.finger-guide{gap:4px}.finger-guide span{font-size:.44rem;padding:10px 2px}}