@import"https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap";:root{color-scheme:light;font-family:Plus Jakarta Sans,Space Grotesk,Segoe UI,sans-serif;line-height:1.5;font-weight:400;color:#121827;background-color:#eaf1fb;--ink: #0f1b2d;--muted: #4f6382;--surface: #ffffff;--surface-soft: rgba(255, 255, 255, .82);--surface-strong: rgba(255, 255, 255, .95);--surface-dim: rgba(255, 255, 255, .62);--accent: #2f61d8;--accent-strong: #1f49b7;--accent-2: #ff7b53;--accent-soft: rgba(47, 97, 216, .16);--border-soft: rgba(15, 27, 45, .14);--glow: rgba(47, 97, 216, .3);--ring: rgba(47, 97, 216, .45);--shadow: rgba(8, 21, 40, .24);--success-soft: rgba(47, 179, 114, .16);--warning-soft: rgba(255, 152, 73, .2);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--bg-radial-one: radial-gradient(880px 520px at 7% -8%, #ffe7b8 0%, transparent 60%);--bg-radial-two: radial-gradient(880px 640px at 93% 0%, #d4e7ff 0%, transparent 62%);--bg-radial-three: radial-gradient(900px 680px at 50% 115%, #d7e7ff 0%, transparent 64%);--bg-linear: linear-gradient(160deg, #f8f5ee 0%, #e6effb 52%, #d7e4f7 100%)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg-radial-one),var(--bg-radial-two),var(--bg-radial-three),var(--bg-linear);color:var(--ink);background-attachment:fixed}body[data-theme=sunrise]{--ink: #131f33;--muted: #576885;--surface: #ffffff;--surface-soft: rgba(255, 255, 255, .83);--accent: #2f61d8;--accent-strong: #1f49b7;--accent-2: #ff7b53;--accent-soft: rgba(47, 97, 216, .16);--border-soft: rgba(19, 31, 51, .14);--glow: rgba(47, 97, 216, .3);--ring: rgba(47, 97, 216, .45);--shadow: rgba(11, 23, 42, .24);--bg-radial-one: radial-gradient(900px 520px at 8% -10%, #ffe4ad 0%, transparent 58%);--bg-radial-two: radial-gradient(900px 700px at 90% 0%, #d7e8ff 0%, transparent 62%);--bg-radial-three: radial-gradient(880px 660px at 48% 112%, #dce8ff 0%, transparent 66%);--bg-linear: linear-gradient(160deg, #f8f4eb 0%, #e7eef9 52%, #d9e3f5 100%)}body[data-theme=ocean]{--ink: #0f1f33;--muted: #4f6989;--surface: #fdfdff;--surface-soft: rgba(255, 255, 255, .87);--accent: #1b72e2;--accent-strong: #0853b8;--accent-2: #23b4b1;--accent-soft: rgba(27, 114, 226, .16);--border-soft: rgba(11, 29, 49, .14);--glow: rgba(27, 114, 226, .28);--ring: rgba(27, 114, 226, .45);--shadow: rgba(8, 22, 43, .25);--bg-radial-one: radial-gradient(980px 620px at 7% -10%, #dbf7ff 0%, transparent 60%);--bg-radial-two: radial-gradient(900px 680px at 94% 0%, #d3e8ff 0%, transparent 63%);--bg-radial-three: radial-gradient(900px 660px at 45% 110%, #d6e2ff 0%, transparent 68%);--bg-linear: linear-gradient(160deg, #e9fbff 0%, #d9ebff 55%, #c8ddf8 100%)}body[data-theme=candy]{--ink: #2a1630;--muted: #74597c;--surface: #fffafb;--surface-soft: rgba(255, 250, 251, .9);--accent: #b44694;--accent-strong: #8f3273;--accent-2: #ff7f7f;--accent-soft: rgba(180, 70, 148, .18);--border-soft: rgba(42, 22, 48, .16);--glow: rgba(180, 70, 148, .28);--ring: rgba(180, 70, 148, .45);--shadow: rgba(64, 16, 57, .26);--bg-radial-one: radial-gradient(960px 600px at 8% -10%, #ffe5f4 0%, transparent 60%);--bg-radial-two: radial-gradient(900px 700px at 91% 0%, #ffdff4 0%, transparent 63%);--bg-radial-three: radial-gradient(900px 660px at 47% 112%, #f4d8ff 0%, transparent 66%);--bg-linear: linear-gradient(160deg, #fff3fb 0%, #fbe2f6 52%, #f0d5f0 100%)}body[data-theme=forest]{--ink: #11241a;--muted: #4f6d61;--surface: #fdfefc;--surface-soft: rgba(253, 254, 252, .9);--accent: #23865f;--accent-strong: #1b6649;--accent-2: #8ebf4b;--accent-soft: rgba(35, 134, 95, .16);--border-soft: rgba(15, 34, 24, .14);--glow: rgba(35, 134, 95, .26);--ring: rgba(35, 134, 95, .42);--shadow: rgba(11, 30, 21, .26);--bg-radial-one: radial-gradient(980px 620px at 9% -10%, #e6f9e5 0%, transparent 60%);--bg-radial-two: radial-gradient(920px 700px at 92% 0%, #d8f1df 0%, transparent 63%);--bg-radial-three: radial-gradient(900px 680px at 48% 111%, #d7ead9 0%, transparent 67%);--bg-linear: linear-gradient(160deg, #f0faf1 0%, #d9ecde 52%, #cde3d3 100%)}button,select{font:inherit}select{padding:7px 11px;border-radius:12px;border:1px solid var(--border-soft);background:var(--surface-strong);color:var(--ink);min-width:140px;box-shadow:inset 0 1px #ffffffd1,0 10px 20px -20px var(--shadow)}select:disabled{opacity:.6;cursor:not-allowed}.app{min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:12px 20px;border-bottom:1px solid var(--border-soft);background:linear-gradient(150deg,#ffffffe6,#f2f8ffdb),linear-gradient(90deg,#ffffffbd,#ffffffbd);-webkit-backdrop-filter:blur(18px) saturate(135%);backdrop-filter:blur(18px) saturate(135%);position:sticky;top:0;z-index:5;box-shadow:0 20px 40px -34px var(--shadow)}.topbar-brand{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.app-home{margin:0;padding:0;border:none;background:none;box-shadow:none;cursor:pointer;font-size:36px;letter-spacing:.01em;line-height:1;text-transform:none;font-family:Dancing Script,Plus Jakarta Sans,Space Grotesk,cursive;font-weight:700;color:var(--accent-strong);background:linear-gradient(120deg,var(--accent-strong),var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 8px 18px rgba(31,73,183,.18);white-space:nowrap}.app-home:hover{transform:none;box-shadow:none}.theme-picker{display:flex;align-items:center;gap:6px;min-height:36px;padding:0;border:none;background:transparent;font-size:12px;color:var(--muted);text-transform:none;letter-spacing:normal;box-shadow:none}.theme-picker span{font-weight:600}.theme-picker-compact{gap:6px;padding:0}.theme-swatch{width:13px;height:13px;border-radius:50%;background:conic-gradient(from 0deg,#ffd06a,#ffd06a 120deg,#4ea0ff 120deg,#4ea0ff 240deg,#45b87b 240deg,#45b87b 360deg);border:1px solid rgba(15,27,45,.2);box-shadow:0 0 0 2px #ffffff9e}.theme-picker select{height:34px;padding:4px 10px;border-radius:12px;min-width:120px;text-transform:none;letter-spacing:normal;background:linear-gradient(170deg,#fffffff2,#f4f9ffe6);border:1px solid rgba(15,27,45,.16);box-shadow:0 10px 20px -19px var(--shadow)}.profile-picker select{min-width:132px}.profile-picker-compact{gap:6px;padding:0}.profile-badge{position:relative;width:13px;height:13px;border-radius:50%;border:1px solid rgba(15,27,45,.26);background:#ffffffc2}.profile-badge:before{content:"";position:absolute;top:2px;left:4px;width:3px;height:3px;border-radius:50%;background:#1e2f4ab8}.profile-badge:after{content:"";position:absolute;left:2px;bottom:2px;width:7px;height:4px;border-radius:4px 4px 3px 3px;background:#1e2f4a80}.profile-create{height:36px;padding:0 14px;white-space:nowrap}.topbar-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.topbar-primary{display:inline-flex;gap:var(--space-2);align-items:center}.settings-cluster{display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border-radius:14px;border:1px solid rgba(15,27,45,.12);background:linear-gradient(180deg,#ffffffd6,#f3f8ffbd);box-shadow:0 14px 26px -26px var(--shadow)}.settings-panel{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;justify-content:flex-end}.topbar .ghost,.topbar .icon-button{height:36px;font-weight:700}.topbar .ghost,.topbar .icon-button{border-radius:12px}.topbar .topbar-controls{display:none}.topbar.practice-active .topbar-controls{display:flex}.view{display:none;padding:22px 28px 28px;flex:1}.view.active{display:block;animation:view-enter .26s cubic-bezier(.21,.78,.31,1)}#practice-view{padding-top:10px}.view-header{max-width:720px;margin-bottom:20px}.view-header h2{margin:0 0 6px;font-size:34px;font-family:Fraunces,Manrope,serif;font-weight:650;color:var(--accent-strong);text-shadow:0 10px 20px rgba(31,73,183,.14)}.view-header p{margin:0;color:var(--muted)}.library-hero{margin-bottom:16px}.library-eyebrow{margin:0 0 8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:color-mix(in srgb,var(--accent) 65%,var(--ink))}.library-hero-main{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 20px;border-radius:20px;border:1px solid color-mix(in srgb,var(--accent) 24%,white);background:radial-gradient(120px 80px at 95% -20%,color-mix(in srgb,var(--accent-2) 26%,white) 0%,transparent 72%),linear-gradient(138deg,color-mix(in srgb,var(--accent-2) 16%,white),color-mix(in srgb,var(--accent) 8%,white) 42%,#fffffff0);box-shadow:0 24px 44px -34px var(--shadow);overflow:hidden}.library-hero-main:after{content:"";position:absolute;right:-40px;bottom:-44px;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,var(--glow) 0%,transparent 72%);pointer-events:none}.library-header{margin:0}.library-hero-metrics{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.library-metric{display:inline-flex;align-items:center;height:30px;padding:0 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 24%,white);background:#ffffffe0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--accent-strong);box-shadow:inset 0 1px #ffffffbd}#progress-view{max-width:1120px;margin:0 auto;padding-top:18px}.progress-header{margin-bottom:18px;padding:18px 20px 22px;border-radius:20px;border:1px solid color-mix(in srgb,var(--accent) 20%,white);background:radial-gradient(180px 120px at 92% -12%,color-mix(in srgb,var(--accent-2) 30%,white) 0%,transparent 70%),linear-gradient(136deg,color-mix(in srgb,var(--accent) 10%,white),color-mix(in srgb,var(--accent-2) 10%,white) 58%,#fffffff2);box-shadow:0 26px 46px -36px var(--shadow)}.progress-eyebrow{margin:0 0 8px;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700;color:var(--muted)}.progress-updated{margin-top:10px;font-size:13px;color:var(--muted);font-weight:500}.progress-cta-row{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}.progress-empty{display:none;border:1px dashed color-mix(in srgb,var(--accent) 35%,white);border-radius:16px;padding:17px 18px;background:linear-gradient(170deg,#ffffffd6,#f5faffc2);color:var(--muted);margin-bottom:14px;box-shadow:inset 0 1px #ffffffd9}.progress-empty-title{margin:0;font-size:16px;font-weight:600;color:var(--accent)}.progress-empty-copy{margin:6px 0 0;font-size:13px;color:var(--muted)}.progress-empty.active{display:block}.progress-track-grid{display:grid;gap:12px}.progress-tabs{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}.progress-tab{min-height:32px;padding:4px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 20%,white);background:#ffffffc7;color:var(--accent-strong);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 9px 18px -20px var(--shadow)}.progress-tab.active{background:linear-gradient(140deg,var(--accent-strong),var(--accent));color:#fff;border-color:color-mix(in srgb,var(--accent-strong) 65%,white);box-shadow:0 14px 24px -20px var(--shadow)}.progress-card{border:1px solid color-mix(in srgb,var(--accent) 18%,white);border-radius:18px;padding:16px;background:linear-gradient(180deg,#ffffffe6,#f6faffcc);box-shadow:0 24px 38px -32px var(--shadow)}.progress-card.preview{background:linear-gradient(180deg,#ffffffd1,#f8fbffbd);border-style:dashed;border-color:color-mix(in srgb,var(--accent) 34%,white)}.progress-card-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.progress-card-heading h3{margin:0;font-size:18px;font-family:Space Grotesk,Plus Jakarta Sans,sans-serif;color:var(--accent-strong)}.progress-track-summary{margin:8px 0 0;color:var(--muted);font-size:14px}.progress-badge{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--muted);background:#ffffffc7;border:1px solid color-mix(in srgb,var(--accent) 18%,white);border-radius:999px;padding:4px 8px}.progress-badge.mastered{color:#1f6f47;border-color:#2e885d52;background:var(--success-soft)}.progress-mastery{margin-top:10px}.progress-mastery-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}.progress-mastery-head strong{color:var(--accent);font-size:18px;font-family:Space Grotesk,Plus Jakarta Sans,sans-serif}.progress-mastery-bar{margin-top:6px;height:12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 16%,white);background:#fffc;overflow:hidden}.progress-mastery-fill{height:100%;width:0%;border-radius:inherit;background:linear-gradient(92deg,var(--accent),var(--accent-2));transition:width .18s ease}.progress-key-metrics{margin-top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.progress-key-metric{border:1px solid color-mix(in srgb,var(--accent) 15%,white);border-radius:11px;background:#ffffffc7;padding:8px 9px;display:grid;gap:2px;box-shadow:inset 0 1px #ffffffd1}.progress-key-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.progress-key-value{color:var(--accent);font-size:16px;font-family:Space Grotesk,Plus Jakarta Sans,sans-serif}.progress-track-grid.preview .progress-key-metric{border-color:var(--border-soft);background:#ffffff9e}.progress-chart{margin-top:12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 18%,white);background:linear-gradient(180deg,#ffffffd6,#f8fbffb8);padding:8px}.progress-chart.preview .progress-chart-line{stroke:color-mix(in srgb,var(--accent) 58%,var(--ink));stroke-dasharray:3 4}.progress-chart svg{width:100%;height:64px;display:block}.progress-chart-baseline{stroke:color-mix(in srgb,var(--accent) 18%,#8692ae);stroke-width:1}.progress-chart-line{fill:none;stroke:var(--accent-strong);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 3px 4px rgba(0,0,0,.12))}.progress-metrics{margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.progress-details{margin-top:10px;border:1px solid color-mix(in srgb,var(--accent) 15%,white);border-radius:13px;background:#ffffffb8;padding:7px 9px 9px}.progress-details>summary{cursor:pointer;font-size:12px;color:var(--accent-strong);font-weight:700;letter-spacing:.06em}.progress-details[open]>summary{margin-bottom:8px}.progress-metric{border:1px solid color-mix(in srgb,var(--accent) 14%,white);border-radius:10px;padding:8px 9px;background:#ffffffc2;display:flex;align-items:center;justify-content:space-between}.progress-metric-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.progress-metric-value{font-size:13px;color:var(--ink);font-weight:700}.timeline-strip{display:grid;grid-template-columns:minmax(180px,1fr) auto auto;grid-template-rows:auto auto;align-items:center;gap:9px;padding:7px 2px 12px}.timeline-actions{grid-column:2;grid-row:1 / span 2;display:flex;gap:var(--space-1);flex-wrap:nowrap}.loop-actions-context{justify-content:flex-end}button.tiny{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px}.timeline-track{grid-column:1;grid-row:1;position:relative;height:14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 24%,white);background:#ffffffd1;box-shadow:inset 0 1px 2px #0a14261f;cursor:pointer;touch-action:none}.timeline-feedback{grid-column:1;grid-row:2;height:5px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 20%,white);background:#fffc;box-shadow:inset 0 1px 2px #0a142614}.timeline-progress{position:absolute;top:0;left:0;height:100%;border-radius:999px;background:linear-gradient(92deg,var(--accent-strong),var(--accent),var(--accent-2));width:0%;z-index:1}.timeline-loop{position:absolute;top:1px;height:calc(100% - 2px);border-radius:999px;background:#ffa85373;box-shadow:inset 0 0 0 1px #ff963bdb;display:none;z-index:2}.timeline-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:17px;height:17px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 6px 12px -6px #0a142675;pointer-events:none;z-index:4}.timeline-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:11px;height:20px;border-radius:6px;background:#fff2df;border:1px solid rgba(255,161,76,.88);box-shadow:0 3px 8px -4px #0a142657;display:none;z-index:3}.loop-picker{grid-column:3;grid-row:1 / span 2;position:relative}.loop-picker-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:5;min-width:170px;max-width:min(240px,60vw);display:grid;gap:4px;padding:6px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 20%,white);background:#fffffff7;box-shadow:0 16px 30px -22px var(--shadow)}.loop-picker-item{border:1px solid transparent;background:transparent;color:var(--accent-strong);box-shadow:none;border-radius:9px;padding:6px 8px;text-align:left;font-size:12px;font-weight:600}.loop-picker-item.active{background:color-mix(in srgb,var(--accent) 12%,white);border-color:color-mix(in srgb,var(--accent) 34%,white)}.loop-picker-action{border-bottom:1px solid var(--border-soft);border-radius:0;padding-bottom:8px;margin-bottom:2px}.loop-picker-empty{font-size:12px;color:var(--muted);padding:4px 8px}.library-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}.library-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:12px 0 20px;padding:13px 15px;border-radius:18px;background:linear-gradient(170deg,#ffffffdb,#f6fbffc7);border:1px solid color-mix(in srgb,var(--accent) 16%,white);box-shadow:0 18px 32px -30px var(--shadow)}#library-search{flex:1 1 240px;padding:11px 14px;border-radius:13px;border:1px solid color-mix(in srgb,var(--accent) 16%,white);background:#fffffff2;font-size:14px;color:inherit;box-shadow:inset 0 1px #ffffffe6}#library-search::placeholder{color:var(--muted)}.library-breadcrumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.library-breadcrumb .song-meta{background:none;border:none;padding:0;cursor:pointer;color:#1d3f7a}.library-breadcrumb span.song-meta{cursor:default;color:var(--muted)}.library-breadcrumb .library-up-button{padding:4px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 20%,white);background:#fffffff0;font-size:12px;font-weight:600}.library-breadcrumb .current-folder-label{font-size:13px;font-weight:600;color:var(--accent)}.library-section{grid-column:1 / -1;text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:700;color:color-mix(in srgb,var(--accent) 72%,var(--ink));margin:12px 0 4px}.library-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;border-radius:16px;border:1px solid color-mix(in srgb,var(--accent) 18%,white);background:linear-gradient(132deg,#fffffffa,color-mix(in srgb,var(--accent) 8%,white) 78%);color:inherit;text-align:left;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease;position:relative;overflow:hidden;box-shadow:0 18px 30px -28px #0913256b}.library-row:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:7px;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 80%,white),transparent)}.library-row:hover{background:#fff;border-color:color-mix(in srgb,var(--accent) 32%,white);transform:translateY(-2px);box-shadow:0 24px 36px -30px #09132580}.library-row.folder{background:linear-gradient(132deg,color-mix(in srgb,var(--accent) 10%,white),#f7fbffcc);border-color:color-mix(in srgb,var(--accent) 24%,white);box-shadow:none}.library-row.folder .library-action{background:color-mix(in srgb,var(--accent) 12%,white);color:color-mix(in srgb,var(--accent-strong) 82%,black)}.library-row.folder:before{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 85%,white),transparent)}.library-row.song:before{background:linear-gradient(180deg,color-mix(in srgb,var(--accent-2) 85%,white),transparent)}.library-row.song{border-color:color-mix(in srgb,var(--accent-2) 30%,white);background:linear-gradient(132deg,#fffffffa,color-mix(in srgb,var(--accent-2) 12%,white))}.library-details{display:flex;flex-direction:column;gap:4px}.library-title{font-weight:650;font-size:17px;color:var(--accent-strong)}.library-meta{color:var(--muted);font-size:13px}.library-action{padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,white);color:var(--accent-strong);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.empty-state{margin-top:24px;padding:20px 22px;border-radius:16px;background:linear-gradient(170deg,#ffffffd6,#f5faffc2);color:var(--muted);display:none;border:1px dashed color-mix(in srgb,var(--accent) 30%,white)}.empty-state.active{display:block}.practice-meta h2{margin:2px 0 0;font-size:26px;font-family:Fraunces,Manrope,serif;font-weight:650;color:var(--accent-strong)}.eyebrow{margin:0;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}.practice-controls{display:flex;gap:12px;align-items:center}.field{display:flex;flex-direction:column;font-size:11px;color:var(--muted);gap:4px}button{min-height:36px;padding:8px 15px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent-strong) 60%,white);background:linear-gradient(160deg,color-mix(in srgb,var(--accent-2) 22%,var(--accent-strong)),var(--accent-strong)),linear-gradient(15deg,var(--accent),var(--accent-2));color:#fff;cursor:pointer;font-weight:700;letter-spacing:.015em;box-shadow:0 14px 24px -18px var(--shadow),inset 0 1px #ffffff38;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}button:hover{transform:translateY(-1px);box-shadow:0 18px 30px -20px var(--shadow),inset 0 1px #ffffff42}button:active{transform:translateY(0);filter:brightness(.95)}button.ghost{background:linear-gradient(175deg,#fffffff0,#f6fbffd6);color:var(--accent-strong);border:1px solid color-mix(in srgb,var(--accent) 18%,white);box-shadow:0 9px 18px -19px var(--shadow)}button.ghost:hover{background:linear-gradient(175deg,#fffffffc,#f7fcffe6)}button.ghost.active{background:color-mix(in srgb,var(--accent) 14%,white);border-color:color-mix(in srgb,var(--accent) 34%,white);color:var(--accent-strong)}.icon-button{min-width:40px;height:36px;padding:0;font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center}#practice-reset{font-size:20px}.segmented{display:inline-flex;align-items:center;gap:0}.segmented+.segmented{margin-left:4px;padding-left:10px;border-left:1px solid color-mix(in srgb,var(--accent) 18%,white)}.segment-group{display:flex;gap:4px;padding:0;border:none;background:transparent}.segment-group button{min-height:32px;padding:4px 11px;border-radius:11px;background:#ffffffc7;color:var(--accent-strong);border:1px solid color-mix(in srgb,var(--accent) 20%,white);font-weight:700;font-size:11px;letter-spacing:.06em;box-shadow:0 10px 20px -20px var(--shadow)}.segment-group-hands button{min-width:46px;padding:4px 8px}.hands-text{font-size:10px;letter-spacing:.1em}.hands-glyph{position:relative;display:inline-block;width:14px;height:8px;margin-right:4px;vertical-align:middle}.hands-glyph:before,.hands-glyph:after{content:"";position:absolute;top:0;width:5px;height:8px;border-radius:5px;background:currentColor;opacity:.5}.hands-glyph:before{left:0}.hands-glyph:after{right:0}.hands-glyph.left:after,.hands-glyph.right:before{opacity:.2}.segment-group-hands button.active .hands-glyph:before,.segment-group-hands button.active .hands-glyph:after{opacity:.92}button:focus-visible,select:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.segment-group button.active{background:linear-gradient(140deg,var(--accent-strong),var(--accent));color:#fff;border-color:color-mix(in srgb,var(--accent-strong) 60%,white);box-shadow:0 14px 22px -16px var(--shadow)}.status{margin-bottom:2px;color:var(--muted)}.status-primary{margin:0;font-size:14px;font-weight:700;color:var(--accent-strong)}.canvas-shell{position:relative;background:radial-gradient(220px 140px at 84% -10%,color-mix(in srgb,var(--accent) 24%,transparent) 0%,transparent 72%),linear-gradient(180deg,#071a30,#091f39);border-radius:20px;padding:10px;height:calc(100vh - 190px);min-height:320px;box-shadow:0 32px 54px -34px #08101fc7;border:1px solid rgba(255,255,255,.18)}.canvas-shell.sheet-mode{display:flex;flex-direction:column}.canvas-shell.sheet-mode .sheet-container{flex:1;height:auto}.canvas-shell.sheet-mode canvas{flex:0 0 auto;height:150px}.practice-hud{position:absolute;top:16px;left:16px;z-index:2;display:grid;gap:9px;padding:12px;border-radius:16px;background:#f6faffde;box-shadow:0 20px 34px -24px #07162c9e;border:1px solid rgba(255,255,255,.8);max-width:min(320px,44vw);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.practice-hud.collapsed{display:flex;align-items:center;gap:10px;max-width:min(560px,66vw);padding:8px 10px;opacity:.94}.hud-lockups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}.hud-lockup{display:grid;gap:2px;padding:7px 8px;border-radius:10px;background:#ffffffd6;border:1px solid color-mix(in srgb,var(--accent) 18%,white)}.lockup-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.lockup-value{font-size:12px;color:var(--accent-strong);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.keys-zoom{position:absolute;right:16px;top:16px;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;background:#f6faffe0;border:1px solid rgba(255,255,255,.76);box-shadow:0 14px 24px -18px #07162c94;z-index:2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.keys-zoom-label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-strong);font-weight:700;white-space:nowrap}.sheet-zoom{position:absolute;right:16px;top:16px;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;background:#f6faffe0;border:1px solid rgba(255,255,255,.76);box-shadow:0 14px 24px -18px #07162c94;z-index:2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.sheet-zoom-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-strong);font-weight:700;white-space:nowrap}.hud-toggle{justify-self:start;min-height:28px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 24%,white);padding:0 10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:#ffffffe6;color:var(--accent-strong);cursor:pointer;box-shadow:0 9px 16px -16px var(--shadow)}.practice-hud.collapsed .hud-toggle{justify-self:auto}.practice-hud.collapsed .status,.practice-hud.collapsed .hud-lockups,.practice-hud.collapsed .midi-panel,.practice-hud.collapsed .practice-meta .eyebrow{display:none}.practice-hud.collapsed .practice-meta h2{font-size:19px;margin:0;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-alert{border:1px solid rgba(255,153,74,.4);border-radius:10px;padding:6px 8px;font-size:12px;color:#6f3e18f2;background:var(--warning-soft)}.midi-panel{border:1px solid color-mix(in srgb,var(--accent) 18%,white);border-radius:12px;background:#ffffffbd;padding:8px}.midi-panel[open]{background:#ffffffd1}.midi-panel-summary{display:inline-flex;align-items:center;justify-content:center;height:32px;width:100%;list-style:none;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 18%,white);background:#fffffff5;color:var(--accent-strong);cursor:pointer;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}.midi-panel-summary::-webkit-details-marker{display:none}.midi-panel .midi-row{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin-top:8px}.midi-panel select{min-width:145px}.midi-status{font-size:12px;color:var(--muted)}.canvas-shell canvas{width:100%;height:100%;display:block;border-radius:15px;background:#0b1e33}.canvas-shell .is-hidden{display:none}.sheet-container{width:100%;height:100%;border-radius:15px;background:#fbf7f1;overflow:auto;padding:16px}.is-hidden{display:none}.confetti-overlay{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:2500}@keyframes view-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes float-glow{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}.library-hero-main,.progress-header,.library-row,.progress-card{animation:float-glow 8s ease-in-out infinite}.library-row:nth-child(2n),.progress-card.preview{animation-delay:.8s}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media (max-width: 900px){.library-hero-main{flex-direction:column;align-items:flex-start}.library-hero-metrics{justify-content:flex-start}.timeline-strip{grid-template-columns:minmax(140px,1fr)}.timeline-actions,.loop-picker{grid-column:1 / -1;grid-row:auto}.timeline-actions{flex-wrap:wrap}.loop-picker-menu{left:0;right:auto}.canvas-shell{height:calc(100vh - 230px)}}@media (max-width: 1000px){.settings-cluster{width:100%;justify-content:space-between;padding:6px}.settings-panel{flex-wrap:wrap;justify-content:flex-end}.settings-panel .segmented{flex:0 0 auto}}@media (max-width: 600px){.view{padding:16px}.topbar{padding:12px 16px;align-items:center}.app-home{font-size:30px}.topbar-controls{justify-content:flex-end;width:100%}.topbar-primary{margin-left:auto}.topbar-brand{gap:10px}.theme-picker{padding:4px 8px}.hud-lockups{grid-template-columns:repeat(2,minmax(0,1fr))}}