:root{--header-bg: #000000;--header-border: #222222;--color-primary: #FF0055;--color-met-accent: #FACF4F;--color-rhythm-accent: #F05481;--color-bpm-accent: #7BEEE1;--font-serif: "Playfair Display", serif;--font-sans: "Aront", "Inter", sans-serif;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 24px;--radius-pill: 9999px;--grid-gap: 16px;--color-bg: #ffffff;--color-surface: #f7f7f7;--color-text: #111111;--color-text-dim: #666666;--color-border: #e0e0e0;--sidebar-bg: #fafafa;--slot-bg: #f0f0f0;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1)}[data-theme=dark]{--color-bg: #121212;--color-surface: #1e1e1e;--color-text: #ffffff;--color-text-dim: #a0a0a0;--color-border: #333333;--sidebar-bg: #1e1e1e;--slot-bg: #222222;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .4)}body{margin:0;font-family:var(--font-sans);background-color:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}button{font-family:inherit;cursor:pointer;border:1px solid transparent;background:var(--color-surface);color:var(--color-text);padding:10px 20px;border-radius:var(--radius-sm);transition:all .2s cubic-bezier(.2,.8,.2,1);font-weight:500}button:hover{filter:brightness(.95);transform:translateY(-1px)}button:active{transform:translateY(1px);filter:brightness(.9)}button.primary{background:var(--color-primary);color:#fff;font-weight:600;box-shadow:var(--shadow-sm)}button.primary:hover{filter:brightness(1.05);box-shadow:var(--shadow-md)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;background:transparent;height:24px;margin:0;padding:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:18px;width:18px;border-radius:50%;background:var(--color-primary);cursor:pointer;margin-top:-7px;box-shadow:0 0 8px #ff005580;transition:transform .1s,background .1s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;cursor:pointer;background:#333;border-radius:var(--radius-pill)}input[type=range]:focus{outline:none}.app-header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:20px 40px;background:var(--color-surface);box-shadow:var(--shadow-sm);z-index:10}.logo{font-size:24px;font-weight:800;color:var(--color-primary);letter-spacing:-.5px}.controls{display:flex;gap:32px;align-items:center}.control-group{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:140px}.control-group label{font-size:12px;font-weight:600;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.5px}.sound-select{padding:6px 10px;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text);font-size:14px;outline:none;cursor:pointer}.sound-select:hover{border-color:var(--color-primary)}.toggle-switch{display:flex;align-items:center;gap:12px;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-weight:500}.toggle-switch input{display:none}.toggle-switch .track{width:44px;height:24px;background:var(--color-border);border-radius:var(--radius-pill);position:relative;transition:background .2s ease}.toggle-switch .track:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 2px #0003}.toggle-switch input:checked+.track{background:var(--color-primary)}.toggle-switch input:checked+.track:after{transform:translate(20px)}.toggle-switch:hover .track{background:#ccc}.toggle-switch:hover input:checked+.track{filter:brightness(1.1)}.container{max-width:800px;margin:0 auto;padding:40px 20px;min-height:100vh;display:flex;flex-direction:column}.screen{flex:1;display:flex;flex-direction:column;align-items:center;width:100%;gap:32px;animation:fadeIn .4s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.count-in-display{display:flex;gap:20px;margin-bottom:20px;padding:10px;background:var(--color-surface);border-radius:var(--radius-pill);justify-content:center}.count-light{width:20px;height:20px;border-radius:50%;background:#ccc;transition:background .1s,transform .1s;box-shadow:inset 0 2px 4px #0003}.sequencer-screen{height:100vh;display:flex;flex-direction:column;background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans)}.app-header{padding:0;background:var(--header-bg);display:flex;flex-direction:column;border-bottom:1px solid var(--header-border);z-index:100;flex-shrink:0;position:relative}.header-top{padding:15px 40px;display:flex;align-items:center;justify-content:space-between}.mobile-toolbar{display:none}.desktop-only{display:block}.logo-container{position:absolute;top:25px;left:40px}.logo{font-family:Aront,sans-serif;font-size:34px;color:var(--color-primary);letter-spacing:-.5px;pointer-events:none;-webkit-user-select:none;user-select:none}.theme-toggle-btn{background:#1a1a1a;color:#888;border:none;border-radius:6px}.controls{padding:10px 40px 25px;display:flex;gap:0;align-items:flex-start;justify-content:flex-start}@media (max-width: 768px){.controls{overflow-x:auto;padding:10px 15px 15px;width:100%;scrollbar-width:none}.controls::-webkit-scrollbar{display:none}}.control-section{padding:0 25px;border-right:1px solid #222;display:flex;flex-direction:column;gap:12px;min-width:140px;flex-shrink:0}.control-section:last-child{border-right:none}@media (max-width: 768px){.control-section{padding:0 15px;border-right:1px solid #333}}.v-divider{width:1px;height:80px;background:#222}@media (max-width: 768px){.v-divider{display:none}}.control-section .section-label{font-size:18px;font-weight:900;letter-spacing:.5px;margin-bottom:8px;text-transform:uppercase}.metronome-section .section-label{color:var(--color-met-accent)}.rhythm-section .section-label{color:var(--color-rhythm-accent)}.bpm-toggles-section .section-label{color:var(--color-bpm-accent)}.section-content{display:flex;flex-direction:column;gap:12px}.control-group{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;text-transform:uppercase;color:#666}.control-group label{color:#888;margin-bottom:2px}.dark-select{background:#111;border:1px solid #333;color:#eee;padding:8px 14px;border-radius:8px;font-size:15px;font-weight:600;width:100%;cursor:pointer}.dark-select:hover{border-color:#555}.accent-yellow::-webkit-slider-thumb{background:var(--color-met-accent);box-shadow:0 0 8px #facf4f66}.accent-pink::-webkit-slider-thumb{background:var(--color-rhythm-accent);box-shadow:0 0 8px #f0548166}.accent-cyan::-webkit-slider-thumb{background:var(--color-bpm-accent);box-shadow:0 0 8px #7beee166}.toggle-row{display:flex;gap:12px;margin-top:4px}.header-toggle{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}.header-toggle .label{font-size:12px;font-weight:800;color:#666}.header-toggle input{display:none}.header-toggle .track{width:32px;height:16px;background:#222;border-radius:16px;position:relative;transition:.2s}.header-toggle .track:after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;background:#fff;border-radius:50%;transition:.2s}.header-toggle input:checked+.track{background:var(--color-primary)}.header-toggle input:checked+.track:after{transform:translate(16px)}.button-layout{display:flex;gap:15px;align-items:flex-start}.side-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.play-btn{background:var(--color-primary);color:#fff!important;border:none;border-radius:8px;width:120px;height:80px;font-weight:900;font-size:20px;cursor:pointer}.play-btn:hover{filter:brightness(1.1);transform:scale(1.02)}.play-btn:active{transform:scale(.98)}.secondary-btn{background:#1a1a1a;color:#888;border:none;border-radius:6px;padding:8px 12px;font-size:12px;font-weight:700;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}.secondary-btn:hover{background:#222;color:#fff}.icon-btn{background:#1a1a1a;color:#888;border:none;border-radius:6px;width:100%;height:38px;padding:0 15px;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;font-weight:700;text-transform:uppercase;font-size:12px}.icon-btn:hover{background:#222;color:#fff}.main-layout{flex:1;display:flex;overflow:hidden;background:var(--color-bg)}.library-sidebar{width:250px;border-right:1px solid var(--color-border);padding:24px;overflow-y:auto;background:var(--sidebar-bg)}.library-sidebar .section-title{font-size:18px;font-weight:900;text-transform:uppercase;color:var(--color-text-dim);margin-bottom:20px;letter-spacing:.5px}.library-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.sequencer-area{flex:1;padding:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--color-bg)}.sequencer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;width:100%;max-width:600px;aspect-ratio:1}.seq-slot{background:var(--slot-bg);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;position:relative;transition:transform .2s,background .2s;box-shadow:var(--shadow-sm);touch-action:none}.seq-slot.active{z-index:10}.seq-slot.over{background:#e0e0e0}.slot-idx{opacity:.2;font-size:1.5rem;font-weight:700}.control-group.toggle{flex-direction:row;gap:8px}@media (max-width: 768px){.sequencer-screen{height:100dvh;overflow:hidden;width:100vw;position:fixed;top:0;left:0}.main-layout{flex-direction:column;flex:1;overflow:hidden;width:100%}.library-sidebar{width:100%;height:auto;min-height:0;flex-shrink:0;border-right:none;border-bottom:1px solid var(--color-surface);padding:10px 4px 4px;background:var(--sidebar-bg);z-index:10}.library-sidebar .section-title{display:none}.library-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:100%;justify-items:center}.library-grid>div{display:flex;align-items:center;justify-content:center;width:100%}.library-grid .tile{width:42px!important;height:42px!important;border-radius:6px!important}.library-grid .tile-sm{width:42px!important;height:42px!important}.sequencer-area{flex:1;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;min-height:0;width:100%;position:relative}.sequencer-grid{width:min(100%,100vh - 220px);max-height:100%;aspect-ratio:1;gap:12px;display:grid;grid-template-columns:repeat(4,1fr)}.app-header{flex-shrink:0;height:auto;min-height:0}.header-top{padding:5px 15px 0;margin-bottom:2px}.logo{font-size:16px;line-height:1.2;margin-bottom:4px;display:block}.mobile-toolbar{display:flex;justify-content:space-between;align-items:center;padding:5px 15px;width:100%;height:60px;background:var(--header-bg);border-bottom:1px solid var(--header-border);z-index:300;position:relative}.mobile-toolbar .logo-container{position:static!important;transform:none!important;padding:0;margin:0;width:auto;height:auto;display:block}.mobile-toolbar .logo{font-size:20px;color:var(--color-primary);white-space:nowrap;margin:0}.mobile-actions{display:flex;align-items:center;gap:12px;margin-left:auto}.bpm-display{display:flex;flex-direction:column;align-items:center;line-height:1;margin-right:5px}.bpm-display .label{font-size:8px;color:#888;font-weight:700;margin-bottom:2px}.bpm-display .value{font-size:16px;font-weight:900;color:var(--color-bpm-accent)}.play-btn-mobile-text{background:var(--color-primary);color:#fff;border:none;border-radius:20px;padding:0 12px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.5px}.play-btn-mobile-text.playing{background:#333;color:#f55;border:1px solid #ff5555}.icon-group{display:flex;align-items:center;gap:8px;margin-left:5px;padding-left:5px;border-left:1px solid rgba(255,255,255,.1)}.header-icon-btn{background:transparent;border:none;color:#fff;opacity:.7;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center}.header-icon-btn:hover,.header-icon-btn:active{opacity:1}.settings-toggle-btn{background:transparent;border:none;color:#fff;padding:4px;opacity:.9;display:flex;align-items:center;justify-content:center;cursor:pointer}.controls{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:200;flex-direction:column;padding:60px 20px 20px;gap:20px;overflow-y:auto;display:none}.controls.mobile-open{display:flex;animation:fadeIn .2s ease-out}.mobile-settings-header{display:none}.control-section{border-right:none;border-bottom:1px solid #333;padding:0 0 15px;width:100%;margin:0;min-width:0;flex-shrink:0}.control-section:last-child{border-bottom:none}.play-btn{display:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.desktop-only{display:none}}.count-in-display{display:flex;gap:20px;margin-bottom:20px;padding:10px;background:var(--slot-bg);border-radius:20px}.count-light{width:20px;height:20px;border-radius:50%;background:#ccc;transition:background .1s;box-shadow:inset 0 2px 4px #0003}.count-light.active{background:#f05;box-shadow:0 0 10px #f05,inset 0 -2px 4px #0000001a;transform:scale(1.2)}