:root{--font-family-title: "Limelight", sans-serif;--font-family-body: "Anonymous Pro", monospace;--font-family-mono: "Anonymous Pro", monospace;--font-size-2xs: .6rem;--font-size-xs: .65rem;--font-size-sm: .68rem;--font-size-base: .7rem;--font-size-md: .72rem;--font-size-lg: .73rem;--font-size-xl: .75rem;--font-size-2xl: .78rem;--font-size-3xl: .8rem;--font-size-4xl: .875rem;--font-size-5xl: 1.1rem;--font-size-6xl: 1.35rem;--font-size-7xl: 1.5rem;--font-size-8xl: 1.6rem;--font-size-9xl: 2.2rem;--font-size-display: 4rem;--font-weight-normal: 400;--font-weight-medium: 700;--font-weight-bold: 700;--space-1: 4px;--space-2: 5px;--space-3: 6px;--space-4: 7px;--space-5: 8px;--space-6: 9px;--space-7: 10px;--space-8: 12px;--space-9: 14px;--space-10: 16px;--space-11: 18px;--space-12: 20px;--space-13: 24px;--space-14: 28px;--space-15: 44px;--space-16: 160px;--radius-sm: 1px;--radius-md: 3px;--radius-lg: 5px;--radius-xl: 6px;--radius-2xl: 7px;--radius-3xl: 8px;--radius-full: 50%;--transition-fast: .1s;--transition-base: .15s;--transition-slow: .22s;--ease-default: ease;--layout-max-width: 960px;--layout-max-width-wide: 1280px;--layout-padding-x: 24px;--layout-padding-y: 44px;--layout-bottom-padding: 160px;--z-timeline: 100;--z-tempo-toggle: 110;--z-toast: 999;--color-accent: #ff4f00;--color-background-page: #f9f9f7;--color-background-surface: #ffffff;--color-background-surface-hover: #f5f5f5;--color-text-primary: #121212;--color-text-secondary: #8a8a8a;--color-text-muted: #8a8a8a;--color-text-inverse: #fff;--color-text-placeholder: #8a8a8a;--color-border-default: #e2e2de;--color-border-strong: #8a8a8a;--color-border-divider: #e2e2de;--color-background-button-primary: #121212;--color-background-button-primary-hover: #333;--color-text-button-primary: #fff;--color-text-button-primary-hover: #fff;--color-background-button-secondary: #ffffff;--color-background-button-secondary-hover: #f5f5f5;--color-text-button-secondary: #121212;--color-text-button-secondary-hover: #121212;--color-background-button-ghost: transparent;--color-background-button-ghost-hover: #f5f5f5;--color-text-button-ghost: #8a8a8a;--color-text-button-ghost-hover: #121212;--color-background-button-active: #121212;--color-background-button-active-hover: #333;--color-text-button-active: #fff;--color-text-button-active-hover: #fff;--color-text-button-danger: #c92a2a;--color-text-button-clear: #8a8a8a;--color-background-input: #ffffff;--color-background-input-focus: #ffffff;--color-text-input: #121212;--color-border-input: #e2e2de;--color-border-input-focus: #8a8a8a;--color-background-toggle: transparent;--color-background-toggle-hover: #f5f5f5;--color-text-toggle: #8a8a8a;--color-border-toggle: #e2e2de;--color-background-toggle-active: #fff0e6;--color-text-toggle-active: #ff4f00;--color-border-toggle-active: #ffccb3;--color-background-play-button: #121212;--color-background-play-button-hover: #333;--color-text-play-button: #fff;--color-background-tab: #ffffff;--color-background-tab-hover: #f5f5f5;--color-text-tab: #8a8a8a;--color-background-tab-active: #121212;--color-text-tab-active: #fff;--color-border-tab-group: #e2e2de;--color-background-card-hover: #f5f5f5;--color-background-card-active: #f5f5f5;--color-border-card-active: #e2e2de;--color-background-saved-loop-chip: #ffffff;--color-background-saved-loop-chip-active: #f5f5f5;--color-border-saved-loop-chip-active: #121212;--color-background-timeline: #f9f9f7;--color-background-progress-track: #e2e2de;--color-background-progress-fill: #121212;--color-background-dim: #f9f9f7;--color-background-handle-a: #ff4f00;--color-background-handle-b: #00c2d1;--color-background-handle-playhead: #121212;--color-background-tempo-toggle: #f9f9f7;--color-background-tempo-toggle-hover: #ffffff;--color-text-tempo-toggle: #121212;--color-border-tempo-toggle: #e2e2de;--color-background-tempo-toggle-active: #121212;--color-text-tempo-toggle-active: #fff;--color-border-tempo-toggle-active: #121212;--color-background-player: #1a1a1a;--color-text-player-placeholder: rgba(255, 255, 255, .3);--color-icon-player-placeholder: rgba(255, 255, 255, .18);--color-background-waveform: #ffffff;--color-background-waveform-wave: #b8b0a6;--color-background-waveform-progress: #121212;--color-background-waveform-cursor: #121212;--color-background-waveform-handle-a: #ff4f00;--color-background-waveform-handle-b: #00c2d1;--color-outline-waveform-handle: rgba(255, 255, 255, .55);--color-background-dropzone: transparent;--color-background-dropzone-hover: rgba(120, 100, 80, .05);--color-background-dropzone-home: #ffffff;--color-background-dropzone-home-hover: #f5f5f5;--color-border-dropzone: #e2e2de;--color-border-dropzone-dashed-hover: #8a8a8a;--color-text-marker: #8c7128;--color-background-marker-hover: #8c7128;--color-text-marker-hover: #fff;--color-border-marker: #8c7128;--color-border-marker-edit: #8c7128;--color-background-marker-tick: #c4a35a;--color-text-a: #ff4f00;--color-text-b: #00c2d1;--color-background-a: #ff4f00;--color-background-b: #00c2d1;--color-background-loop-active-region: rgba(255, 79, 0, .2);--color-background-loop-active-region-start: rgba(255, 79, 0, .3);--color-background-loop-active-region-end: rgba(0, 194, 209, .3);--color-background-saved-loop-region-default: rgba(120, 100, 80, .1);--color-background-marker-region: rgba(196, 163, 90, .55);--color-loop-palette-0: #e03e3e;--color-loop-palette-1: #2383e2;--color-loop-palette-2: #2f9e44;--color-loop-palette-3: #f08c00;--color-loop-palette-4: #9c36b5;--color-loop-palette-5: #0c8599;--color-loop-palette-6: #e8590c;--color-loop-palette-7: #5f3dc4;--color-loop-default: #786450;--color-background-warning: #fff8e1;--color-border-warning: #ffe082;--color-text-warning: #5d4037;--color-text-error: rgba(255, 80, 80, .8);--color-text-error-strong: rgba(200, 60, 60, .9);--color-background-tooltip: #121212;--color-text-tooltip: #fff;--color-background-slider-track: #e2e2de;--color-background-slider-thumb: #121212;--color-outline-slider-thumb: #fff;--color-shadow-slider-thumb: #e2e2de;--color-background-kbd: #ffffff;--color-border-kbd: #e2e2de;--color-text-kbd: #121212;--color-shadow-timeline: rgba(18, 18, 18, .06);--color-shadow-tempo-toggle: rgba(18, 18, 18, .08);--color-shadow-loop-hover: rgba(18, 18, 18, .18);--color-shadow-loop-active: rgba(18, 18, 18, .25);--color-shadow-white-soft: rgba(255, 255, 255, .55);--shadow-timeline: 0 -2px 12px var(--color-shadow-timeline);--shadow-tempo-toggle: 0 1px 6px var(--color-shadow-tempo-toggle);--shadow-loop-hover: 0 0 0 1px var(--color-shadow-loop-hover);--shadow-loop-active: 0 0 0 1.5px var(--color-shadow-loop-active);--shadow-playhead: 0 0 0 2px var(--color-background-page);--shadow-slider-thumb: 0 0 0 1.5px var(--color-border-default);--shadow-ws-handle: 0 0 0 2px var(--color-shadow-white-soft)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{overflow-x:hidden;background-color:var(--color-background-page);color:var(--color-text-primary);font-family:var(--font-family-body);font-size:16px;min-height:100vh}body{margin:0;padding:0}.layout{max-width:var(--layout-max-width);margin:0 auto;padding:var(--layout-padding-y) var(--layout-padding-x) var(--layout-bottom-padding)}.content-row{display:block}.main{width:100%;min-width:0}.screen{display:none}.screen.active{display:block}.protocol-warning{background:var(--color-background-warning);border:1px solid var(--color-border-warning);border-radius:var(--radius-3xl);padding:var(--space-8) var(--space-10);margin-bottom:var(--space-12);font-size:var(--font-size-base);line-height:1.6;color:var(--color-text-warning)}.sidebar-label{font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);margin-bottom:var(--space-7)}.sidebar-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-7)}.sidebar-row .sidebar-label{margin:0}.marker-add{width:100%;background:var(--color-background-surface);border:1px solid var(--color-border-default);color:var(--color-text-primary);padding:var(--space-4) var(--space-7);border-radius:var(--radius-xl);font-size:var(--font-size-2xl);text-align:left;margin-bottom:var(--space-7);font-family:inherit;cursor:pointer}.marker-add:hover{background:var(--color-border-default)}.marker-list{display:flex;flex-direction:column;gap:var(--space-2)}.marker-item{display:flex;align-items:center;gap:var(--space-2);min-height:34px}.marker-time{background:var(--color-background-surface);border:1px solid var(--color-border-default);color:var(--color-text-marker);border-radius:var(--radius-lg);font-size:var(--font-size-base);padding:var(--space-1) var(--space-3);font-family:var(--font-family-mono);white-space:nowrap;cursor:pointer;flex-shrink:0;font-weight:var(--font-weight-medium)}.marker-time:hover{background:var(--color-background-marker-hover);color:var(--color-text-marker-hover);border-color:var(--color-border-marker)}.marker-time-edit{width:52px;flex-shrink:0;background:var(--color-background-surface);border:1px solid var(--color-border-marker-edit);color:var(--color-text-marker);border-radius:var(--radius-lg);font-size:var(--font-size-base);padding:var(--space-1) var(--space-3);font-family:var(--font-family-mono);font-weight:var(--font-weight-medium);outline:none}.marker-label{flex:1;min-width:0;background:transparent;border:none;border-bottom:1px solid transparent;color:var(--color-text-primary);font-size:var(--font-size-3xl);font-family:inherit;outline:none;padding:var(--space-3) var(--space-1);min-height:30px}.marker-label:focus{border-bottom-color:var(--color-border-default)}.marker-label::placeholder{color:var(--color-text-placeholder)}.marker-ab{background:var(--color-background-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);padding:var(--space-3) var(--space-7);min-height:30px;min-width:36px;font-family:inherit;color:var(--color-text-muted);cursor:pointer;flex-shrink:0;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;touch-action:manipulation}.marker-ab:hover{background:var(--color-border-default);color:var(--color-text-primary)}.marker-ab.ab-a:hover{color:var(--color-text-a);border-color:var(--color-text-a)}.marker-ab.ab-b:hover{color:var(--color-text-b);border-color:var(--color-text-b)}.marker-del{background:none;border:none;color:var(--color-text-muted);font-size:.85rem;padding:var(--space-1);line-height:1;flex-shrink:0;cursor:pointer}.marker-del:hover{color:var(--color-text-button-danger)}.loop-add{width:100%;background:var(--color-background-surface);border:1px solid var(--color-border-default);color:var(--color-text-primary);padding:var(--space-4) var(--space-7);border-radius:var(--radius-xl);font-size:var(--font-size-2xl);text-align:left;margin-bottom:var(--space-3);font-family:inherit;cursor:pointer}.loop-add:hover{background:var(--color-border-default)}.loop-endpoints-row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-7)}.loop-endpoints-row .loop-add{margin-bottom:0;font-size:var(--font-size-md);padding:var(--space-2) var(--space-5)}@media (min-width: 768px){.loop-endpoints-row .loop-add{width:auto;flex:0 0 auto}}.saved-loop-list{display:flex;flex-direction:column;gap:var(--space-2);max-height:260px;overflow-y:auto}.saved-loop-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-lg);border:1px solid transparent;cursor:pointer}.saved-loop-item:hover,.saved-loop-item.hover{background:var(--color-background-card-hover)}.saved-loop-item.active{background:var(--color-background-card-active);border-color:var(--color-border-card-active)}.saved-loop-item.hover:not(.active){border-color:var(--color-border-card-active)}.loop-swatch{display:inline-block;width:8px;height:8px;border-radius:var(--radius-full);flex-shrink:0;align-self:center;margin-right:2px}.saved-loop-times{display:flex;align-items:center;gap:var(--space-1);font-family:var(--font-family-mono);font-size:var(--font-size-sm);color:var(--color-text-muted);flex-shrink:0}.saved-loop-times .sl-sep{color:var(--color-border-default)}.saved-loop-label{flex:1;min-width:0;background:transparent;border:none;border-bottom:1px solid transparent;color:var(--color-text-primary);font-size:var(--font-size-lg);font-family:inherit;outline:none;padding:var(--space-1)}.saved-loop-label:focus{border-bottom-color:var(--color-border-default)}.saved-loop-label::placeholder{color:var(--color-text-placeholder)}.saved-loop-del{background:none;border:none;color:var(--color-text-muted);font-size:.85rem;padding:var(--space-1);line-height:1;flex-shrink:0;cursor:pointer}.saved-loop-del:hover{color:var(--color-text-button-danger)}.playlist-list{display:flex;flex-direction:column;gap:var(--space-3);max-height:220px;overflow-y:auto}.playlist-item{display:flex;align-items:center;gap:var(--space-4);cursor:pointer;padding:var(--space-2) var(--space-3);border-radius:var(--radius-xl);border:1px solid transparent}.playlist-item:hover{background:var(--color-background-card-hover)}.playlist-item.active{background:var(--color-background-card-active);border-color:var(--color-border-card-active)}.playlist-thumb{width:48px;height:27px;object-fit:cover;border-radius:var(--radius-md);flex-shrink:0;background:var(--color-border-default)}.playlist-thumb-icon{width:48px;height:27px;border-radius:var(--radius-md);flex-shrink:0;background:var(--color-border-default);display:flex;align-items:center;justify-content:center;font-size:.95rem;color:var(--color-text-muted)}.playlist-info{flex:1;min-width:0}.playlist-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--color-text-primary)}.playlist-meta{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:1px}.playlist-del{background:none;border:none;color:var(--color-text-muted);font-size:.85rem;padding:var(--space-1);flex-shrink:0;line-height:1;cursor:pointer}.playlist-del:hover{color:var(--color-text-button-danger)}header{padding-bottom:var(--space-12);border-bottom:1px solid var(--color-border-default);margin-bottom:var(--space-13);display:flex;align-items:flex-end;gap:var(--space-10)}header .header-text h1{font-size:var(--font-size-display);font-weight:var(--font-weight-normal);font-family:var(--font-family-title);letter-spacing:.02em;line-height:1}header .header-text p{font-size:var(--font-size-md);color:var(--color-text-muted);margin-top:var(--space-1)}#homeScreen header .header-text{text-align:center;width:100%}#homeScreen header{justify-content:center}.project-header{align-items:flex-start;flex-direction:column;gap:var(--space-5)}.project-header .header-text{min-width:0;width:100%}.project-title-wrap{position:relative;display:flex;align-items:flex-start;gap:var(--space-5)}#projectTitle{font-size:var(--font-size-8xl);font-weight:var(--font-weight-normal);line-height:1.25;background:transparent;border:none;border-bottom:1px solid transparent;color:var(--color-text-primary);font-family:var(--font-family-title);flex:1;min-width:0;padding:0;margin:0;outline:none;border-radius:0;white-space:normal;word-break:break-word;transition:opacity var(--transition-base) var(--ease-default)}.project-title-wrap:hover #projectTitle:not(:focus){opacity:.2}.title-edit-btn{position:absolute;right:0;top:0;background:none;border:none;color:var(--color-text-muted);font-size:var(--font-size-5xl);line-height:1;padding:var(--space-1);cursor:pointer;opacity:0;transition:opacity var(--transition-base) var(--ease-default);pointer-events:none}.project-title-wrap:hover .title-edit-btn{opacity:1;pointer-events:auto}.title-edit-btn:hover{color:var(--color-text-primary)}#projectTitle:focus{border-bottom-color:var(--color-border-default)}#projectTitle::placeholder{color:var(--color-text-placeholder)}.home-above-title{padding:var(--space-1) var(--space-7);font-size:var(--font-size-xl)}.url-row{display:flex;gap:var(--space-5);margin-bottom:var(--space-12)}input[type=text]{flex:1;background:var(--color-background-input);border:1px solid var(--color-border-input);color:var(--color-text-input);padding:var(--space-5) var(--space-8);border-radius:var(--radius-xl);font-size:var(--font-size-4xl);font-family:inherit;outline:none}input[type=text]:focus{border-color:var(--color-border-input-focus);background:var(--color-background-input-focus)}input[type=text]::placeholder{color:var(--color-text-placeholder)}button{cursor:pointer;border:none;border-radius:var(--radius-xl);font-size:var(--font-size-3xl);padding:var(--space-4) var(--space-8);font-weight:var(--font-weight-medium);font-family:inherit;transition:background var(--transition-fast)}.btn-dark{background:var(--color-background-button-primary);color:var(--color-text-button-primary)}.btn-dark:hover{background:var(--color-background-button-primary-hover)}.btn-ghost{background:var(--color-background-button-ghost);color:var(--color-text-button-ghost);border:1px solid var(--color-border-default)}.btn-ghost:hover{background:var(--color-background-button-ghost-hover);color:var(--color-text-button-ghost-hover)}.player-shell{width:100%;aspect-ratio:16/9;background:var(--color-background-player);border-radius:var(--radius-3xl);overflow:hidden;position:relative;margin-bottom:0}#player-mount{width:100%;height:100%}#player-mount iframe{width:100%;height:100%;display:block}.placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-7)}.placeholder-icon{font-size:var(--font-size-9xl);opacity:.18;color:var(--color-icon-player-placeholder)}.placeholder-text{font-size:var(--font-size-2xl);color:var(--color-text-player-placeholder)}.zone{padding:var(--space-11) 0;border-bottom:1px solid var(--color-border-default)}.zone:last-child{border-bottom:none}#zone-timeline{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-timeline);background:var(--color-background-timeline);border-bottom:none;border-top:1px solid transparent;transition:border-top-color var(--transition-base) ease;padding:var(--space-5) max(var(--layout-padding-x),calc((100vw - var(--layout-max-width)) / 2 + var(--layout-padding-x))) var(--space-8)}#zone-timeline.scroll-border{border-top-color:var(--color-border-default);box-shadow:var(--shadow-timeline)}#zone-timeline:has(.tempo-drawer.open){border-top-color:var(--color-border-default);box-shadow:var(--shadow-timeline)}.tempo-drawer{overflow:hidden;max-height:0;opacity:0;transition:max-height var(--transition-slow) var(--ease-default),opacity .3s var(--ease-default),margin var(--transition-slow) var(--ease-default);margin:0;pointer-events:none}.tempo-drawer.open{max-height:220px;opacity:1;margin-bottom:var(--space-7);pointer-events:auto}.tempo-drawer-inner{padding:var(--space-1) 0 var(--space-5);margin-bottom:var(--space-1)}.tempo-toggle{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);z-index:var(--z-tempo-toggle);width:40px;height:40px;border-radius:var(--radius-full);background:var(--color-background-tempo-toggle);border:1.5px solid var(--color-border-tempo-toggle);color:var(--color-text-tempo-toggle);font-size:var(--font-size-6xl);line-height:1;padding:0;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;box-shadow:var(--shadow-tempo-toggle)}.tempo-toggle:hover{background:var(--color-background-tempo-toggle-hover);border-color:var(--color-border-strong);color:var(--color-text-tempo-toggle)}.tempo-toggle.active{background:var(--color-background-tempo-toggle-active);color:var(--color-text-tempo-toggle-active);border-color:var(--color-border-tempo-toggle-active)}.zone-label{font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);margin-bottom:var(--space-8)}.transport{display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap;row-gap:var(--space-5)}.nav-group{display:flex;gap:var(--space-1);margin-left:auto}.nav-btn{background:transparent;border:1px solid var(--color-border-default);color:var(--color-text-primary);font-size:var(--font-size-md);padding:var(--space-1) var(--space-3);border-radius:var(--radius-xl);cursor:pointer;font-family:inherit;white-space:nowrap}.nav-btn:hover:not(:disabled){background:var(--color-background-surface-hover)}.nav-btn:disabled{opacity:.35;cursor:default}#playBtn{width:30px;height:30px;border-radius:var(--radius-full);background:var(--color-background-play-button);color:var(--color-text-play-button);font-size:var(--font-size-3xl);padding:0;flex-shrink:0;display:flex;align-items:center;justify-content:center}#playBtn:hover{background:var(--color-background-play-button-hover)}.time{font-family:var(--font-family-mono);font-size:var(--font-size-lg);color:var(--color-text-muted);min-width:86px}.prog-stack{width:100%;margin-bottom:var(--space-3)}.prog-wrap{width:100%;height:36px;display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.prog-track{width:100%;height:5px;background:var(--color-background-progress-track);border-radius:var(--radius-md);position:relative;overflow:visible}.prog-fill{position:absolute;top:0;left:0;height:100%;background:var(--color-background-progress-fill);border-radius:var(--radius-sm);width:0%;pointer-events:none;z-index:2}.loop-dim{position:absolute;top:-10px;height:calc(100% + 20px);background:var(--color-background-dim);opacity:.6;pointer-events:none;z-index:4;display:none;border-radius:var(--radius-sm)}.loop-lane{position:relative;width:100%;height:18px;margin-top:var(--space-1);touch-action:manipulation}.loop-lane-bar{position:absolute;top:3px;height:12px;border-radius:var(--radius-lg);cursor:pointer;pointer-events:auto;opacity:.8;filter:brightness(1);transition:opacity .12s,box-shadow .12s,height .12s,top .12s,filter .12s;z-index:1;box-sizing:border-box}.loop-lane-bar:before{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}.loop-lane-bar:hover,.loop-lane-bar.hover{opacity:1;filter:brightness(1.25) saturate(1.15);top:1px;height:16px;box-shadow:var(--shadow-loop-hover)}.loop-lane-bar.active{opacity:1;top:1px;height:16px;box-shadow:var(--shadow-loop-active);z-index:2}.loop-lane-bar.active:hover,.loop-lane-bar.active.hover{filter:brightness(1.2) saturate(1.1)}.marker-tick{position:absolute;top:-6px;width:2px;height:calc(100% + 12px);background:var(--color-background-marker-tick);pointer-events:auto;cursor:pointer;z-index:3;transform:translate(-50%);border-radius:var(--radius-sm)}.marker-tick.outside-loop{opacity:.4}.marker-tick:hover:before{content:attr(data-label);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);background:var(--color-background-tooltip);color:var(--color-text-tooltip);padding:var(--space-1) var(--space-3);border-radius:var(--radius-lg);font-size:var(--font-size-sm);white-space:nowrap;font-family:inherit;pointer-events:none}.marker-tick[data-label=""]:before{display:none}.loop-markers-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);margin-top:var(--space-10);align-items:start}.loop-markers-grid .sidebar-label,.loop-markers-grid .loop-add,.loop-markers-grid .marker-add{margin-bottom:var(--space-5)}.handle{position:absolute;top:-14px;width:20px;height:calc(100% + 28px);cursor:ew-resize;touch-action:none;transform:translate(-50%);display:none;z-index:20}.handle:before{content:"";position:absolute;left:50%;top:0;transform:translate(-50%);width:2px;height:100%;border-radius:var(--radius-sm)}.handle:after{content:"";position:absolute;left:50%;top:0;transform:translate(-50%);width:8px;height:8px;border-radius:var(--radius-full)}.handle-a:before{background:var(--color-background-handle-a)}.handle-a:after{background:var(--color-background-handle-a)}.handle-b:before{background:var(--color-background-handle-b)}.handle-b:after{background:var(--color-background-handle-b)}.playhead-handle{position:absolute;top:-10px;width:14px;height:calc(100% + 18px);cursor:ew-resize;touch-action:none;transform:translate(-50%);display:none;z-index:18}.playhead-handle:before{content:"";position:absolute;left:50%;top:0;transform:translate(-50%);width:1px;height:100%;border-radius:var(--radius-sm);background:var(--color-background-handle-playhead);opacity:.85}.playhead-handle:after{content:"";position:absolute;left:50%;bottom:0;transform:translate(-50%);width:8px;height:8px;border-radius:var(--radius-full);background:var(--color-background-handle-playhead);box-shadow:var(--shadow-playhead)}.active-loop-region{background:linear-gradient(90deg,var(--color-background-loop-active-region-start),var(--color-background-loop-active-region-end))!important}.loop-row{display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap}.loop-times{flex:1;display:flex;align-items:center;gap:var(--space-1);font-family:var(--font-family-mono);font-size:var(--font-size-xl);color:var(--color-text-muted)}.loop-label-a,.loop-label-b{font-size:var(--font-size-md)}.loop-label-a{color:var(--color-text-a)}.loop-label-b{color:var(--color-text-b)}.loop-input-a,.loop-input-b{color:inherit}.loop-input-a{color:var(--color-text-a)}.loop-input-b{color:var(--color-text-b)}.loop-time-input{width:52px;background:var(--color-background-input);border:1px solid var(--color-border-input);border-radius:var(--radius-lg);padding:var(--space-1) var(--space-2);font-size:var(--font-size-md);font-family:var(--font-family-mono);text-align:center;outline:none}.loop-time-input:focus{border-color:var(--color-border-input-focus);background:var(--color-background-input-focus)}.loop-time-input::placeholder{color:var(--color-text-placeholder)}#loopToggle,#countdownToggle{background:var(--color-background-toggle);color:var(--color-text-toggle);border:1px solid var(--color-border-toggle);font-size:var(--font-size-xl);padding:var(--space-2) var(--space-7)}#loopToggle:hover,#countdownToggle:hover{background:var(--color-background-toggle-hover)}#loopToggle.active,#countdownToggle.active{background:var(--color-background-toggle-active);color:var(--color-text-toggle-active);border-color:var(--color-border-toggle-active)}.btn-clear{background:transparent;color:var(--color-text-button-clear);border:none;font-size:var(--font-size-xl);padding:var(--space-2) var(--space-3);cursor:pointer}.btn-clear:hover{color:var(--color-text-button-danger)}.hint{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-top:var(--space-6)}.speed-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--space-9)}.speed-big{font-size:var(--font-size-7xl);font-weight:600;color:var(--color-text-primary);line-height:1}.speed-small-label{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-top:var(--space-1)}.speed-unit{font-size:.9rem;font-weight:var(--font-weight-normal);color:var(--color-text-muted)}.bpm-right{text-align:right}.bpm-num{font-size:var(--font-size-7xl);font-weight:600;color:var(--color-text-primary);line-height:1}.bpm-small-label{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-top:var(--space-1)}.slider-wrap{margin-bottom:var(--space-2);display:flex;align-items:center;gap:var(--space-6)}.slider-end{font-size:var(--font-size-sm);color:var(--color-text-muted)}.slider-inner{flex:1;position:relative}input[type=range]{-webkit-appearance:none;width:100%;height:3px;background:var(--color-background-slider-track);border-radius:var(--radius-sm);outline:none;cursor:pointer;display:block}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:var(--radius-full);background:var(--color-background-slider-thumb);cursor:pointer;border:2px solid var(--color-outline-slider-thumb);box-shadow:var(--shadow-slider-thumb)}.speed-dots{position:relative;height:6px;margin-top:var(--space-1)}.speed-dot-mark{position:absolute;top:50%;transform:translate(-50%,-50%);width:1.5px;border-radius:var(--radius-sm);background:var(--color-background-slider-track)}.speed-dot-mark.minor{height:3px}.speed-dot-mark.major{height:5px;background:var(--color-text-muted)}.speed-ticks{position:relative;height:18px;margin-bottom:var(--space-10)}.speed-tick{position:absolute;top:0;transform:translate(-50%);font-size:var(--font-size-2xs);color:var(--color-text-muted);display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.speed-tick:before{content:"";width:1px;height:5px;background:var(--color-background-slider-track);display:block}.bpm-row{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}.bpm-row-label{font-size:var(--font-size-md);color:var(--color-text-muted)}input[type=number]{width:66px;background:var(--color-background-input);border:1px solid var(--color-border-input);color:var(--color-text-input);padding:var(--space-3) var(--space-5);border-radius:var(--radius-xl);font-size:.85rem;text-align:center;outline:none;font-family:inherit}input[type=number]:focus{border-color:#bbb}#tapBtn{background:var(--color-background-button-secondary);color:var(--color-text-button-secondary);border:1px solid var(--color-border-default)}#tapBtn:hover{background:var(--color-background-button-secondary-hover)}#detectBtn{background:var(--color-background-button-secondary);color:var(--color-text-button-secondary);border:1px solid var(--color-border-default)}#detectBtn:hover{background:var(--color-background-button-secondary-hover)}#detectBtn.detecting{background:var(--color-background-button-active);color:var(--color-text-button-active)}.skip-btn{display:none}.shortcuts-grid{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-12);align-items:center}.sc{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-lg);color:var(--color-text-primary)}kbd{background:var(--color-background-kbd);border:1px solid var(--color-border-kbd);border-radius:var(--radius-lg);padding:var(--space-1) var(--space-3);font-size:var(--font-size-md);font-family:inherit;color:var(--color-text-kbd);min-width:28px;text-align:center;display:inline-block}@media (max-width: 799px){.loop-markers-grid{grid-template-columns:1fr;gap:var(--space-11)}.lm-loops .saved-loop-list{flex-direction:row;flex-wrap:wrap;max-height:none;overflow-y:visible;gap:var(--space-3)}.lm-loops .saved-loop-item{width:100%;max-width:100%;padding:var(--space-2) var(--space-5);border:1px solid var(--color-border-default);background:var(--color-background-saved-loop-chip);border-radius:var(--radius-xl);gap:var(--space-1)}.lm-loops .saved-loop-item.active{border-color:var(--color-border-saved-loop-chip-active);background:var(--color-background-saved-loop-chip-active)}.lm-loops .saved-loop-item .marker-time{border:none;background:transparent;padding:0 var(--space-1)}.lm-loops .saved-loop-item .marker-time:hover{background:transparent}.lm-loops .saved-loop-label{font-size:var(--font-size-md)}.lm-loops .sl-sep{color:var(--color-text-muted);font-size:var(--font-size-xs)}.lm-markers .marker-list{max-height:200px}}#zone-shortcuts{display:block}@media (max-width: 799px){#zone-shortcuts{display:none}}@media (max-width: 680px){html,body{font-size:17px}.layout{padding:20px 16px 200px}#zone-timeline{padding:var(--space-3) var(--layout-padding-x) var(--space-6)}header .header-text h1{font-size:2.6rem}.bpm-row{gap:var(--space-3)}.bpm-row button,.bpm-row input{font-size:var(--font-size-2xl)}.speed-ticks{display:none}.shortcuts-grid{gap:var(--space-3) var(--space-8)}.skip-btn{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:42px;padding:var(--space-5) var(--space-8);font-size:.85rem;background:var(--color-background-page);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);color:var(--color-text-primary);font-family:inherit;cursor:pointer}.skip-btn:hover{background:var(--color-background-surface-hover)}}#toast{position:fixed;bottom:var(--space-13);left:50%;transform:translate(-50%);background:var(--color-background-tooltip);color:var(--color-text-tooltip);padding:var(--space-3) var(--space-9);border-radius:var(--radius-xl);font-size:var(--font-size-lg);pointer-events:none;opacity:0;transition:opacity var(--transition-base);white-space:nowrap;z-index:var(--z-toast)}#toast.show{opacity:1}.view-tabs{display:flex;margin-bottom:var(--space-2);border:1px solid var(--color-border-tab-group);border-radius:var(--radius-2xl);overflow:hidden;align-self:flex-start;width:fit-content}.view-tab{background:var(--color-background-tab);color:var(--color-text-tab);border:none;border-radius:0;padding:var(--space-2) var(--space-9);font-size:var(--font-size-base);font-family:inherit;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast);letter-spacing:.03em}.view-tab+.view-tab{border-left:1px solid var(--color-border-tab-group)}.view-tab.active{background:var(--color-background-tab-active);color:var(--color-text-tab-active)}.view-tab:hover:not(.active){background:var(--color-background-tab-hover);color:var(--color-text-tab-active)}.waveform-shell{width:100%;border-radius:var(--radius-3xl);background:var(--color-background-waveform);border:1px solid var(--color-border-default);overflow:hidden;margin-bottom:0;position:relative}#waveform-el{min-height:266px;padding:var(--space-5) 0;display:block;position:relative}#wave-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;background:var(--color-background-waveform);border-radius:var(--radius-3xl);display:flex;align-items:center;justify-content:center}.waveform-zoom-row{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-3) var(--space-8);border-top:1px solid var(--color-border-default)}.zoom-label{font-size:var(--font-size-xs);color:var(--color-text-muted);flex-shrink:0}.change-file-btn{font-size:var(--font-size-xs);padding:var(--space-1) var(--space-3)}.wave-loading-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:266px;gap:var(--space-7);padding:0 var(--space-14);width:100%;max-width:360px}.wave-loading-label{font-size:var(--font-size-lg);color:var(--color-text-muted);text-align:center}.wave-prog-track{width:100%;height:4px;background:var(--color-background-progress-track);border-radius:var(--radius-sm);overflow:hidden}.wave-prog-fill{height:100%;background:var(--color-background-progress-fill);border-radius:var(--radius-sm);width:0%;transition:width .2s linear}.wave-prog-pct{font-size:var(--font-size-sm);color:var(--color-text-muted);letter-spacing:.04em}.wave-error-ui{text-align:center;padding:0 var(--space-10)}.wave-error-message{font-size:var(--font-size-lg);color:var(--color-text-error-strong);line-height:1.7;margin-bottom:var(--space-7)}.wave-retry-btn{font-size:var(--font-size-md)}.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;align-self:stretch;gap:var(--space-5);padding:var(--space-14) var(--space-13);cursor:pointer;text-align:center;border-radius:var(--radius-3xl);transition:background var(--transition-base)}.dropzone:hover,.dropzone.drag-over{background:var(--color-background-dropzone-hover)}.dropzone-icon{font-size:var(--font-size-7xl);color:var(--color-text-muted);opacity:.4;line-height:1}.dropzone-title{font-size:var(--font-size-3xl);color:var(--color-text-primary);font-weight:var(--font-weight-medium);margin-top:var(--space-1)}.dropzone-hint{font-size:var(--font-size-base);color:var(--color-text-muted);line-height:1.65}#homeDropzone{border:1px dashed var(--color-border-dropzone);background:var(--color-background-dropzone-home);margin-top:var(--space-5)}#homeDropzone:hover,#homeDropzone.drag-over{background:var(--color-background-dropzone-home-hover);border-color:var(--color-border-dropzone-dashed-hover)}.wavesurfer-handle{overflow:visible!important}.wavesurfer-handle:after{content:"";position:absolute;left:50%;top:2px;transform:translate(-50%);width:10px;height:10px;border-radius:var(--radius-full);box-shadow:var(--shadow-ws-handle)}.wavesurfer-handle-start:after{background:var(--color-background-waveform-handle-a)}.wavesurfer-handle-end:after{background:var(--color-background-waveform-handle-b)}#ws-playhead-tri{position:absolute;top:0;left:0;pointer-events:none;z-index:20;display:none}#ws-playhead-tri:after{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--color-background-progress-fill)}@media (min-width: 1700px){html,body{font-size:16px}.layout{max-width:var(--layout-max-width-wide);width:88%}}