@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{color-scheme:dark;--ds-color-brand-50: #fdf3e9;--ds-color-brand-100: #fbe4cd;--ds-color-brand-200: #f6c892;--ds-color-brand-300: #f0a95c;--ds-color-brand-400: #e68a3a;--ds-color-brand-500: #cc6f22;--ds-color-brand-600: #a85518;--ds-color-brand-700: #7c3c12;--ds-color-accent-green-300: #8fd6ad;--ds-color-accent-green-400: #5cbf85;--ds-color-accent-green-500: #3da267;--ds-color-accent-green-600: #2c7a4d;--ds-color-bg-950: #0c0c0f;--ds-color-bg-900: #0f0f12;--ds-color-bg-850: #141418;--ds-color-bg-800: #1a1a20;--ds-color-surface-1: #17171d;--ds-color-surface-2: #1d1d24;--ds-color-surface-3: #23232b;--ds-color-surface-hover: #1e1e26;--ds-color-text: #f5f5f5;--ds-color-text-muted: #8a8a92;--ds-color-text-muted-strong: #b5b5bd;--ds-color-text-on-accent: #1d0f02;--ds-color-text-inverse: #ffffff;--ds-color-border-weak: rgba(255, 255, 255, .06);--ds-color-border-strong: rgba(255, 255, 255, .1);--ds-color-border-stronger: rgba(255, 255, 255, .16);--ds-color-success-bg: rgba(60, 170, 110, .14);--ds-color-success-border: rgba(80, 200, 130, .28);--ds-color-success-text: #7bd8a3;--ds-color-warning-bg: rgba(230, 138, 58, .13);--ds-color-warning-border: rgba(230, 138, 58, .3);--ds-color-warning-text: #f0a95c;--ds-color-danger-bg: rgba(230, 72, 72, .13);--ds-color-danger-border: rgba(240, 96, 96, .3);--ds-color-danger-text: #f58a8a;--ds-color-danger-solid: #c63939;--ds-color-danger-solid-strong: #8f1e1e;--ds-color-info-bg: rgba(96, 130, 246, .13);--ds-color-info-border: rgba(110, 140, 250, .3);--ds-color-info-text: #9db0ff;--ds-font-family: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;--ds-font-family-mono: "SF Mono", "Menlo", "Consolas", monospace;--ds-font-size-eyebrow: 12px;--ds-font-size-label: 12px;--ds-font-size-caption: 13px;--ds-font-size-body-sm: 14px;--ds-font-size-body: 15px;--ds-font-size-body-lg: 16px;--ds-font-size-title-3: 16px;--ds-font-size-title-2: 20px;--ds-font-size-title-1: 26px;--ds-font-size-display: 34px;--ds-font-weight-regular: 400;--ds-font-weight-medium: 500;--ds-font-weight-semibold: 600;--ds-font-weight-bold: 700;--ds-font-weight-extrabold: 800;--ds-line-height-tight: 1.2;--ds-line-height-heading: 1.3;--ds-line-height-body: 1.5;--ds-letter-spacing-tight: -.02em;--ds-letter-spacing-label: .06em;--ds-letter-spacing-eyebrow: .08em;--ds-space-0: 0;--ds-space-1: 4px;--ds-space-2: 8px;--ds-space-3: 12px;--ds-space-4: 16px;--ds-space-5: 20px;--ds-space-6: 24px;--ds-space-7: 32px;--ds-space-8: 40px;--ds-space-9: 48px;--ds-space-10: 64px;--ds-radius-sm: 6px;--ds-radius-md: 10px;--ds-radius-lg: 12px;--ds-radius-xl: 16px;--ds-radius-pill: 999px;--ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--ds-shadow-md: 0 4px 14px rgba(0, 0, 0, .28);--ds-shadow-lg: 0 8px 28px rgba(0, 0, 0, .32);--ds-shadow-xl: 0 14px 44px rgba(0, 0, 0, .38);--ds-focus-ring: 0 0 0 2px rgba(230, 138, 58, .35);--ds-duration-fast: .12s;--ds-duration-base: .16s;--ds-duration-slow: .26s;--ds-easing: ease;--ds-z-dropdown: 500;--ds-z-modal: 1000;--ds-container-max: 1440px;--ds-topnav-height: 64px;--ds-breakpoint-sm: 560px;--ds-breakpoint-md: 760px;--ds-breakpoint-lg: 1024px}:root{--bg: var(--ds-color-bg-900);--panel-border: var(--ds-color-border-weak);--panel-border-strong: var(--ds-color-border-strong);--text: var(--ds-color-text);--muted: var(--ds-color-text-muted);--muted-strong: var(--ds-color-text-muted-strong);--accent: var(--ds-color-brand-400);--accent-strong: var(--ds-color-brand-300);--shadow: var(--ds-shadow-lg)}:root{color-scheme:dark;font-family:var(--ds-font-family);line-height:var(--ds-line-height-body);font-weight:var(--ds-font-weight-regular)}*{box-sizing:border-box}html{min-height:100%;background:var(--ds-color-bg-900)}body{margin:0;min-height:100vh;color:var(--text);background:transparent}a{color:inherit;text-decoration-color:var(--ds-color-text-muted);text-underline-offset:.18em}button,input,select{font:inherit}button{-webkit-appearance:none;-moz-appearance:none;appearance:none}button,input,select,textarea{outline:none}input,select{width:100%;height:44px;padding:0 14px;border-radius:var(--ds-radius-md);border:1px solid var(--ds-color-border-strong);background:var(--ds-color-bg-900);color:var(--text);font-size:var(--ds-font-size-body);transition:border-color var(--ds-duration-base) var(--ds-easing),background var(--ds-duration-base) var(--ds-easing),box-shadow var(--ds-duration-base) var(--ds-easing)}select{-moz-appearance:none;appearance:none;-webkit-appearance:none}input::placeholder{color:#8a8a92b8}input:focus,select:focus{border-color:var(--ds-color-brand-400);box-shadow:var(--ds-focus-ring);background:var(--ds-color-bg-850)}input:disabled{opacity:.4;cursor:not-allowed}.shell{position:relative;max-width:var(--ds-container-max);margin:0 auto;padding:24px 24px 64px}.topnav{position:sticky;top:0;z-index:var(--ds-z-dropdown);height:var(--ds-topnav-height);background:#0f0f12d1;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--ds-color-border-weak)}.topnav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;max-width:var(--ds-container-max);margin:0 auto;padding:0 24px;height:100%}.topnav-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-size:15px;font-weight:600;letter-spacing:var(--ds-letter-spacing-tight)}.brand-chip{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:var(--ds-color-brand-400);color:var(--ds-color-text-on-accent);font-size:12px;font-weight:700}.topnav-nav{display:flex;gap:4px;justify-self:center}.nav-link{position:relative;display:inline-flex;align-items:center;padding:8px 12px;border-radius:var(--ds-radius-md);color:var(--ds-color-text-muted);font-size:var(--ds-font-size-body);font-weight:500;text-decoration:none;transition:color var(--ds-duration-base) var(--ds-easing),background var(--ds-duration-base) var(--ds-easing)}.nav-link:hover{color:var(--text);background:var(--ds-color-surface-1)}.nav-link.active{color:var(--ds-color-brand-400)}.nav-link.active:after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;background:var(--ds-color-brand-400)}.topnav-right{justify-self:end;display:flex;align-items:center;gap:12px}.account-menu{position:relative}.avatar-btn{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--ds-color-surface-3);color:var(--text);border:1px solid var(--ds-color-border-strong);font-size:12px;font-weight:600;cursor:pointer;transition:background var(--ds-duration-base) var(--ds-easing),border-color var(--ds-duration-base) var(--ds-easing)}.avatar-btn:hover{background:var(--ds-color-surface-hover)}.account-dropdown{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;z-index:var(--ds-z-dropdown);overflow:hidden;border-radius:var(--ds-radius-md);border:1px solid var(--ds-color-border-strong);background:var(--ds-color-surface-2);box-shadow:var(--ds-shadow-xl)}.account-dropdown-head{padding:12px 14px;border-bottom:1px solid var(--ds-color-border-weak);display:flex;flex-direction:column;gap:3px}.account-dropdown-name{font-weight:600;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-dropdown-email{color:var(--muted);font-size:var(--ds-font-size-caption);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-dropdown-item{display:block;width:100%;padding:10px 14px;text-align:left;font:inherit;font-size:var(--ds-font-size-body-sm);font-weight:500;color:var(--text);background:none;border:0;border-top:1px solid var(--ds-color-border-weak);text-decoration:none;cursor:pointer}.account-dropdown-item:hover{background:var(--ds-color-surface-hover)}.account-dropdown-item-btn{color:var(--ds-color-danger-text)}.account-dropdown-item-btn:hover{background:var(--ds-color-danger-bg)}.page-header{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}.page-title{margin:0;font-size:var(--ds-font-size-display);font-weight:var(--ds-font-weight-bold);letter-spacing:var(--ds-letter-spacing-tight);line-height:var(--ds-line-height-tight)}.eyebrow{display:inline-block;color:var(--ds-color-brand-400);font-size:var(--ds-font-size-eyebrow);font-weight:var(--ds-font-weight-semibold);letter-spacing:var(--ds-letter-spacing-eyebrow);text-transform:uppercase}.card{position:relative;background:var(--ds-color-surface-1);border:1px solid var(--ds-color-border-weak);border-radius:var(--ds-radius-md);padding:16px}.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.card-head h3{margin:0;font-size:var(--ds-font-size-title-2);font-weight:var(--ds-font-weight-semibold);letter-spacing:var(--ds-letter-spacing-tight)}.badge{display:inline-flex;align-items:center;min-width:22px;height:20px;justify-content:center;padding:0 7px;border-radius:var(--ds-radius-pill);background:var(--ds-color-surface-3);color:var(--ds-color-text-muted);font-size:var(--ds-font-size-caption);font-weight:500}.mini-panel{padding:16px;border-radius:var(--ds-radius-md);background:var(--ds-color-surface-1);border:1px solid var(--ds-color-border-weak)}.mini-panel h3,.mini-panel h2{margin:0 0 10px;font-size:var(--ds-font-size-title-2);font-weight:var(--ds-font-weight-semibold)}.panel-stack{display:grid;gap:18px}.muted{color:var(--muted);font-size:var(--ds-font-size-body-sm)}.muted-strong{color:var(--muted-strong)}.error{color:var(--ds-color-danger-text);background:var(--ds-color-danger-bg);border:1px solid var(--ds-color-danger-border);border-radius:var(--ds-radius-md);padding:12px 14px;font-size:var(--ds-font-size-body-sm)}.back-link{color:var(--ds-color-text-muted);text-decoration:none;font-size:var(--ds-font-size-body-sm)}.back-link:hover{color:var(--text)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border:none;border-radius:var(--ds-radius-md);background:var(--ds-color-brand-400);color:var(--ds-color-text-on-accent);font-size:var(--ds-font-size-body);font-weight:500;cursor:pointer;transition:filter var(--ds-duration-base) var(--ds-easing),transform var(--ds-duration-base) var(--ds-easing),background var(--ds-duration-base) var(--ds-easing),border-color var(--ds-duration-base) var(--ds-easing)}.btn:hover{filter:brightness(1.1)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:none}.btn.secondary{background:var(--ds-color-surface-2);color:var(--text);border:1px solid var(--ds-color-border-strong)}.btn.secondary:hover{filter:none;background:var(--ds-color-surface-hover)}.btn.danger-btn{background:var(--ds-color-danger-solid);color:var(--ds-color-text-inverse)}.btn.danger-btn:hover{filter:none;background:#d64a4a}.icon-btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:.95rem;border-radius:var(--ds-radius-md);border:1px solid var(--ds-color-border-strong);background:var(--ds-color-surface-2);color:var(--text);cursor:pointer;transition:background var(--ds-duration-base) var(--ds-easing),border-color var(--ds-duration-base) var(--ds-easing),opacity var(--ds-duration-base) var(--ds-easing)}.icon-btn:hover{background:var(--ds-color-surface-hover);border-color:var(--ds-color-border-stronger)}.icon-btn:disabled{opacity:.4;cursor:not-allowed}.icon-btn.danger{color:var(--ds-color-danger-text);background:var(--ds-color-danger-bg);border-color:var(--ds-color-danger-border)}.icon-btn.danger:hover{background:#e6484838;border-color:var(--ds-color-danger-text)}.field{display:flex;flex-direction:column;gap:6px;min-width:220px;flex:1}.field span{color:var(--muted);font-size:var(--ds-font-size-label);font-weight:500;text-transform:uppercase;letter-spacing:var(--ds-letter-spacing-label)}.select-wrap{position:relative}.select-input{padding-right:2.6rem}.select-input option{background:var(--ds-color-surface-2);color:var(--text)}.select-caret{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted-strong);font-size:.8rem}.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--ds-radius-pill);background:var(--ds-color-surface-3);color:var(--ds-color-text-muted-strong);border:1px solid var(--ds-color-border-strong);font-size:var(--ds-font-size-caption);font-weight:500}.pill-live,.tier-pill{color:var(--ds-color-warning-text);background:var(--ds-color-warning-bg);border-color:var(--ds-color-warning-border)}.tier-pill-paid{color:var(--ds-color-success-text);background:var(--ds-color-success-bg);border-color:var(--ds-color-success-border)}.tier-pill-unlimited{color:var(--ds-color-info-text);background:var(--ds-color-info-bg);border-color:var(--ds-color-info-border)}.song-list{display:flex;flex-direction:column;gap:10px}.song-item{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;border-radius:var(--ds-radius-md);background:var(--ds-color-surface-1);border:1px solid var(--ds-color-border-weak);transition:background var(--ds-duration-base) var(--ds-easing),border-color var(--ds-duration-base) var(--ds-easing)}.song-item:hover{background:var(--ds-color-surface-hover);border-color:var(--ds-color-border-strong)}.song-meta{display:flex;flex-direction:column;gap:3px;min-width:0}.song-title{font-size:var(--ds-font-size-body);font-weight:500;text-decoration:none;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}.practice-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}.practice-main,.practice-sidebar{display:flex;flex-direction:column;gap:20px;min-width:0}.url-form{display:flex;align-items:center;gap:10px}.url-form input{flex:1;min-width:0}.url-form .btn{flex-shrink:0}.player-card{padding:12px}.player-frame{position:relative;aspect-ratio:16 / 9;background:#000;border:1px solid var(--ds-color-border-weak);border-radius:var(--ds-radius-md);overflow:hidden}.player-frame iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.player-empty{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--ds-color-text-muted);font-size:var(--ds-font-size-body)}.player-empty-icon{width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--ds-color-surface-2);border:1px solid var(--ds-color-border-strong);color:var(--ds-color-brand-400);font-size:20px}.controls-card{display:flex;flex-direction:column;gap:14px}.timeline{position:relative;display:flex;align-items:center;height:20px;cursor:pointer}.timeline-track{position:relative;width:100%;height:4px;border-radius:2px;background:var(--ds-color-surface-3)}.timeline-window{position:absolute;top:0;bottom:0;background:#e68a3a29;border-left:1px solid rgba(230,138,58,.55);border-right:1px solid rgba(230,138,58,.55)}.timeline-record{position:absolute;top:0;bottom:0;background:#e68a3a4d;border-left:1px solid var(--ds-color-brand-400);border-right:1px solid rgba(230,138,58,.55)}.timeline-marker{position:absolute;top:-6px;bottom:-6px;width:2px;border-radius:1px;background:var(--ds-color-brand-400);box-shadow:0 0 0 1px #e68a3a4d}.timeline-handle{position:absolute;top:50%;width:10px;height:22px;padding:0;transform:translate(-50%,-50%);border-radius:4px;border:1px solid var(--ds-color-brand-600);background:var(--ds-color-brand-400);box-shadow:0 0 0 1px #0f0f12d9,0 2px 6px #00000080;cursor:ew-resize;z-index:3}.timeline-handle:hover{background:var(--ds-color-brand-300)}.timeline-progress{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--ds-color-brand-400)}.timeline-thumb{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--ds-color-brand-400);transform:translate(-50%,-50%);box-shadow:0 0 0 2px #0f0f12e6}.times-row{display:flex;justify-content:space-between;color:var(--ds-color-text-muted);font-size:var(--ds-font-size-caption);font-variant-numeric:tabular-nums}.controls-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.transport-buttons{display:flex;gap:10px}.circular-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--ds-color-border-strong);background:var(--ds-color-surface-2);color:var(--ds-color-brand-400);font-size:14px;cursor:pointer;transition:background var(--ds-duration-base) var(--ds-easing),border-color var(--ds-duration-base) var(--ds-easing),opacity var(--ds-duration-base) var(--ds-easing),transform var(--ds-duration-base) var(--ds-easing)}.circular-btn:hover{background:var(--ds-color-surface-hover);border-color:var(--ds-color-border-stronger);transform:translateY(-1px)}.circular-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.circular-btn.active{background:var(--ds-color-warning-bg);border-color:var(--ds-color-brand-400)}.controls-right{display:flex;align-items:center;gap:10px}.speed-select{width:auto;min-width:96px;height:44px}.loop-toggle{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:var(--ds-radius-md);border:1px solid var(--ds-color-border-strong);background:var(--ds-color-surface-2);color:var(--ds-color-text-muted);font-size:var(--ds-font-size-body);font-weight:500;cursor:pointer;transition:background var(--ds-duration-base) var(--ds-easing),border-color var(--ds-duration-base) var(--ds-easing),color var(--ds-duration-base) var(--ds-easing),opacity var(--ds-duration-base) var(--ds-easing)}.loop-toggle:hover{background:var(--ds-color-surface-hover);border-color:var(--ds-color-border-stronger)}.loop-toggle:disabled{opacity:.4;cursor:not-allowed}.loop-toggle.active{color:var(--ds-color-brand-300);background:var(--ds-color-warning-bg);border-color:var(--ds-color-brand-400)}.loop-toggle-dot{width:8px;height:8px;border-radius:50%;background:currentColor}.loop-toggle.active .loop-toggle-dot{animation:ds-pulse 1.4s ease-in-out infinite}.loop-markers{display:grid;grid-template-columns:1fr 1fr;gap:12px}.loop-marker{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:var(--ds-radius-md);background:var(--ds-color-surface-1);border:1px solid var(--ds-color-border-weak);color:var(--text);text-align:left;cursor:pointer;transition:background var(--ds-duration-base) var(--ds-easing),border-color var(--ds-duration-base) var(--ds-easing)}.loop-marker:hover{background:var(--ds-color-surface-hover);border-color:var(--ds-color-border-strong)}.loop-marker:disabled{opacity:.4;cursor:not-allowed}.loop-marker-label{display:inline-flex;align-items:center;gap:10px;font-size:var(--ds-font-size-body);font-weight:500}.loop-marker-icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;font-size:12px}.loop-marker-start .loop-marker-icon{background:var(--ds-color-warning-bg);color:var(--ds-color-brand-400)}.loop-marker-end .loop-marker-icon{background:var(--ds-color-info-bg);color:var(--ds-color-info-text)}.loop-marker.is-live{border-color:var(--ds-color-brand-400);background:var(--ds-color-warning-bg)}.loop-marker.is-live .loop-marker-icon{background:var(--ds-color-brand-400);color:var(--ds-color-text-on-accent)}.loop-marker.is-live .loop-marker-time{color:var(--ds-color-brand-400)}@keyframes ds-pulse{0%,to{box-shadow:0 0 #e68a3a73}50%{box-shadow:0 0 0 5px #e68a3a00}}.loop-marker.is-live .loop-marker-icon{animation:ds-pulse 1.4s ease-in-out infinite}.loop-marker-time{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text)}.save-loop{display:flex;align-items:center;gap:10px}.save-loop input{flex:1;min-width:0}.save-loop .btn{flex-shrink:0}.saved-loop-list{display:grid;gap:10px}.saved-loop-item{padding:12px 14px;border-radius:var(--ds-radius-md);background:var(--ds-color-surface-2);border:1px solid var(--ds-color-border-weak);cursor:pointer;transition:background var(--ds-duration-base) var(--ds-easing),border-color var(--ds-duration-base) var(--ds-easing),box-shadow var(--ds-duration-base) var(--ds-easing)}.saved-loop-item:hover{background:var(--ds-color-surface-hover);box-shadow:var(--ds-shadow-sm)}.saved-loop-item.selected{border-color:var(--ds-color-brand-400)}.saved-loop-main{display:flex;align-items:center;justify-content:space-between;gap:10px}.saved-loop-info{display:flex;flex-direction:column;gap:3px;min-width:0}.saved-loop-name{font-size:var(--ds-font-size-body);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.saved-loop-range{color:var(--muted);font-size:var(--ds-font-size-caption);font-variant-numeric:tabular-nums}.trash-btn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--ds-radius-sm);border:none;background:transparent;color:var(--ds-color-text-muted);font-size:.9rem;cursor:pointer;transition:color var(--ds-duration-base) var(--ds-easing),background var(--ds-duration-base) var(--ds-easing)}.trash-btn:hover{color:var(--ds-color-danger-text);background:var(--ds-color-danger-bg)}.link-form{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:12px}.link-form .btn{width:100%;flex-shrink:0}.link-list{display:grid;gap:8px}.link-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--ds-radius-md);background:var(--ds-color-surface-2);border:1px solid var(--ds-color-border-weak);transition:background var(--ds-duration-base) var(--ds-easing),border-color var(--ds-duration-base) var(--ds-easing)}.link-item:hover{background:var(--ds-color-surface-hover)}.link-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;color:var(--text);text-decoration:none}.link-main:hover .link-label{color:var(--ds-color-brand-400)}.link-label{font-size:var(--ds-font-size-body);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.link-host{color:var(--muted);font-size:var(--ds-font-size-caption);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.quick-guide ol{margin:0;padding-left:18px}.quick-guide li{color:var(--muted);font-size:var(--ds-font-size-body-sm);line-height:1.6;margin-bottom:8px}.quick-guide li::marker{color:var(--ds-color-brand-400);font-weight:600}.quick-guide li:last-child{margin-bottom:0}.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:20px;align-items:stretch}.hero-copy{display:flex;flex-direction:column;gap:16px;justify-content:center}.hero-title{margin:0;font-size:var(--ds-font-size-title-1);font-weight:var(--ds-font-weight-bold);letter-spacing:var(--ds-letter-spacing-tight);line-height:var(--ds-line-height-tight)}.hero-lead{max-width:46ch;color:var(--muted-strong);font-size:var(--ds-font-size-body-lg)}.hero-actions{display:flex;flex-wrap:wrap;gap:12px}.hero-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.stat-card{padding:16px;border-radius:var(--ds-radius-md);background:var(--ds-color-surface-1);border:1px solid var(--ds-color-border-weak)}.stat-value{font-size:var(--ds-font-size-title-1);font-weight:var(--ds-font-weight-semibold);letter-spacing:var(--ds-letter-spacing-tight)}.stat-label{margin-top:4px;color:var(--muted);font-size:var(--ds-font-size-body-sm)}.section-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px}.profile-grid{grid-template-columns:minmax(0,1fr) 320px;align-items:start}.section-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.section-title{margin:0;font-size:var(--ds-font-size-display);font-weight:var(--ds-font-weight-bold);letter-spacing:var(--ds-letter-spacing-tight);line-height:var(--ds-line-height-tight)}.section-copy{color:var(--muted);max-width:55ch;font-size:var(--ds-font-size-body-sm)}.profile-list{margin:0;display:flex;flex-direction:column}.profile-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--ds-color-border-weak)}.profile-row:last-child{border-bottom:0}.profile-row dt{color:var(--muted);font-size:var(--ds-font-size-label);font-weight:500;text-transform:uppercase;letter-spacing:var(--ds-letter-spacing-label)}.profile-row dd{margin:0;font-size:var(--ds-font-size-body);font-weight:500;text-align:right;overflow-wrap:anywhere}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:var(--ds-space-5);background:#08080bb3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:var(--ds-z-modal)}.modal-card{width:min(100%,440px);padding:20px;border-radius:var(--ds-radius-lg);border:1px solid var(--ds-color-border-strong);background:var(--ds-color-surface-2);box-shadow:var(--ds-shadow-xl)}.modal-card h2{margin:8px 0;font-size:var(--ds-font-size-title-2);font-weight:var(--ds-font-weight-semibold)}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.loading-shell{display:grid;place-items:center;min-height:70vh}@media (max-width: 920px){.hero,.section-grid,.practice-layout{grid-template-columns:1fr}}@media (max-width: 640px){.shell{padding:16px 14px 56px}.topnav-inner{padding:0 14px}.nav-link{padding:8px 10px}.url-form,.save-loop{flex-direction:column;align-items:stretch}.url-form .btn,.save-loop .btn{width:100%}.loop-markers{grid-template-columns:1fr}.controls-row{flex-wrap:wrap}.hero-grid{grid-template-columns:1fr}.song-item{align-items:flex-start;flex-direction:column}.song-actions{width:100%;justify-content:space-between}}@media (max-width: 760px){.profile-grid{grid-template-columns:1fr}.profile-row{flex-direction:column;gap:6px}.profile-row dd{text-align:left}.account-dropdown{position:fixed;top:auto;right:18px;left:18px}}.ds-page{display:flex;flex-direction:column;gap:20px}.ds-hero{display:flex;flex-direction:column;gap:8px}.ds-section{display:flex;flex-direction:column;gap:16px}.ds-section-head{display:flex;flex-direction:column;gap:6px}.ds-grid{display:grid;gap:12px}.ds-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.ds-swatch-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.ds-swatch{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:var(--ds-radius-md);background:var(--ds-color-surface-2);border:1px solid var(--ds-color-border-weak)}.ds-swatch-color{height:56px;border-radius:var(--ds-radius-sm);border:1px solid var(--ds-color-border-weak)}.ds-swatch-name{font-size:var(--ds-font-size-body-sm);font-weight:500}.ds-swatch-token{font-family:var(--ds-font-family-mono);font-size:var(--ds-font-size-caption);color:var(--ds-color-text-muted)}.ds-typography{display:flex;flex-direction:column;gap:12px}.ds-type-row{border-bottom:1px solid var(--ds-color-border-weak);padding-bottom:10px}.ds-type-display{font-size:var(--ds-font-size-display);line-height:var(--ds-line-height-tight);font-weight:var(--ds-font-weight-bold);letter-spacing:var(--ds-letter-spacing-tight)}.ds-type-title1{font-size:var(--ds-font-size-title-1);line-height:var(--ds-line-height-tight);font-weight:var(--ds-font-weight-bold);letter-spacing:var(--ds-letter-spacing-tight)}.ds-type-title2{font-size:var(--ds-font-size-title-2);line-height:var(--ds-line-height-heading);font-weight:var(--ds-font-weight-semibold);letter-spacing:var(--ds-letter-spacing-tight)}.ds-type-title3{font-size:var(--ds-font-size-title-3);font-weight:var(--ds-font-weight-medium)}.ds-type-body{font-size:var(--ds-font-size-body);color:var(--ds-color-text-muted-strong)}.ds-type-caption{font-size:var(--ds-font-size-caption);color:var(--ds-color-text-muted)}.ds-space-scale{display:flex;flex-direction:column;gap:10px}.ds-space-step{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:12px}.ds-space-bar{height:12px;border-radius:var(--ds-radius-sm);background:var(--ds-color-brand-400)}.ds-radius{display:flex;flex-direction:column;align-items:center;gap:8px}.ds-radius-box{width:64px;height:64px;background:var(--ds-color-surface-2);border:1px solid var(--ds-color-border-strong)}.ds-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.ds-surface-demo{min-width:200px}.ds-player-demo{padding:16px;border-radius:var(--ds-radius-md);background:var(--ds-color-surface-2);border:1px solid var(--ds-color-border-weak);display:flex;flex-direction:column;gap:16px}.ds-token-list{display:flex;flex-direction:column;gap:8px}.ds-token-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--ds-color-border-weak)}.ds-token-name{font-family:var(--ds-font-family-mono);font-size:var(--ds-font-size-body-sm);color:var(--ds-color-text-muted-strong)}.ds-token-value{font-family:var(--ds-font-family-mono);font-size:var(--ds-font-size-body-sm);color:var(--ds-color-text-muted)}