:root{--bg-primary:#0d0d0d;--bg-secondary:#1a1a1a;--bg-tertiary:#252525;--bg-elevated:#2d2d2d;--text-primary:#f0e6d3;--text-secondary:#a89f8c;--text-muted:#6b6459;--accent-primary:#e07020;--accent-secondary:#c45c18;--accent-glow:#e0702066;--border-color:#3a3a3a;--border-subtle:#2a2a2a;--success:#4ade80;--warning:#fbbf24;--error:#ef4444;--panel-gap:8px;--border-radius:8px;--border-radius-lg:12px;--font-display:"Outfit",sans-serif;--font-mono:"JetBrains Mono",monospace}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:var(--font-display);background:var(--bg-primary);color:var(--text-primary);line-height:1.5}.app-container{gap:var(--panel-gap);height:100vh;padding:var(--panel-gap);background:linear-gradient(135deg,var(--bg-primary)0%,#141414 100%);grid-template-columns:1fr 1fr;display:grid}.right-panels{gap:var(--panel-gap);grid-template-rows:1fr 1fr;height:100%;display:grid}.panel{background:var(--bg-secondary);border-radius:var(--border-radius-lg);border:1px solid var(--border-color);position:relative;overflow:hidden}.panel:before{content:"";background:linear-gradient(90deg,#0000,#ffffff1a,#0000);height:1px;position:absolute;top:0;left:0;right:0}.panel-tab{flex-direction:column;display:flex}tab-viewer{flex:1;min-height:0}.panel-video{flex-direction:column;display:flex}youtube-player{flex:1;min-height:0}.panel-metronome{flex-direction:column;display:flex}metronome-app{flex:1;min-height:0}.panel-header{background:var(--bg-tertiary);border-bottom:1px solid var(--border-color);flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.panel-title{text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);align-items:center;gap:8px;font-size:.85rem;font-weight:600;display:flex}.panel-title:before{content:"";background:var(--accent-primary);width:8px;height:8px;box-shadow:0 0 8px var(--accent-glow);border-radius:50%}.panel-content{flex:1;position:relative;overflow:hidden}button{font-family:var(--font-display);cursor:pointer;border-radius:var(--border-radius);border:none;font-weight:500;transition:all .2s}.btn-primary{background:var(--accent-primary);color:var(--bg-primary);padding:8px 16px;font-size:.875rem}.btn-primary:hover{background:var(--accent-secondary);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-color);padding:8px 16px;font-size:.875rem}.btn-secondary:hover{background:var(--bg-tertiary);border-color:var(--text-muted)}.btn-icon{background:var(--bg-elevated);border:1px solid var(--border-color);width:36px;height:36px;color:var(--text-primary);justify-content:center;align-items:center;font-size:1.25rem;display:flex}.btn-icon:hover{background:var(--bg-tertiary);border-color:var(--accent-primary);color:var(--accent-primary)}input[type=text],input[type=number],input[type=url]{font-family:var(--font-display);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-primary);padding:8px 12px;font-size:.875rem;transition:border-color .2s}input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-glow);outline:none}input::placeholder{color:var(--text-muted)}select{font-family:var(--font-display);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-primary);cursor:pointer;padding:8px 12px;font-size:.875rem}select:focus{border-color:var(--accent-primary);outline:none}label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:4px;font-size:.75rem;font-weight:500;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.visually-hidden{clip:rect(0,0,0,0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=900px){.app-container{grid-template-rows:1fr 1fr;grid-template-columns:1fr}.right-panels{grid-template-rows:1fr 1fr}}@media (width<=768px){body{overflow-y:auto}.app-container{gap:var(--panel-gap);flex-direction:column;height:auto;min-height:100vh;display:flex}.panel-tab{flex:1;order:1;min-height:400px}.right-panels{gap:var(--panel-gap);flex-direction:column;order:2;height:auto;display:flex}.panel-video,.panel-metronome{order:unset;height:auto;min-height:0}}@media (width<=768px) and (orientation:landscape){body{overflow:hidden}.app-container{grid-template-rows:1fr;grid-template-columns:1fr 1fr;height:100vh;display:grid}.panel-tab{order:unset;min-height:unset;height:100%}.right-panels{gap:var(--panel-gap);grid-template-rows:1fr 1fr;height:100%;display:grid}.panel-video,.panel-metronome{order:unset;height:100%;min-height:unset}}