:root{--color-page:#f5f5f4;--color-surface:#fff;--color-surface-muted:#eeeeec;--color-text:#1c1917;--color-muted:#6b6761;--color-border:#d8d6d2;--color-primary:#1c1917;--color-primary-hover:#1c1917;--color-primary-text:#fafaf9;--color-focus:#78716c;--color-inactive:#a8a29e;--space-page:24px;--space-panel:24px;--radius:0;--panel-width:560px;color:var(--color-text);background:var(--color-page);font-synthesis:none;text-rendering:optimizelegibility;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}[data-theme=dark]{--color-page:#000;--color-surface:#1c1b1a;--color-surface-muted:#242321;--color-text:#f2f1ef;--color-muted:#aaa6a0;--color-border:#353330;--color-primary:#f2f1ef;--color-primary-hover:#d6d3d1;--color-primary-text:#1c1b1a;--color-focus:#a8a29e;--color-inactive:#57534e}*{box-sizing:border-box}body{background:var(--color-page);min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}.player-shell{min-height:100vh;padding:var(--space-page);background:var(--color-page);place-items:center;display:grid}.player-panel{width:min(100%, var(--panel-width));padding:var(--space-panel);border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface)}.player-header{justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:24px;display:flex}.header-actions{flex:none;align-items:center;gap:8px;display:flex}.intro{min-width:0}.eyebrow,.label{color:var(--color-muted);letter-spacing:0;text-transform:uppercase;margin:0 0 6px;font-size:.78rem;font-weight:700}h1,h2,p{margin-top:0}h1{margin-bottom:0;font-size:2.25rem;line-height:1}#app-title{align-items:center;gap:10px;display:flex}.app-title-icon{flex:none;place-items:center;width:32px;height:32px;display:inline-grid}.app-title-icon svg{width:32px;height:32px;display:block}.app-title-icon svg path{fill:var(--color-text)}h2{margin-bottom:6px;font-size:1.35rem}button{transition:border-color .16s,background-color .16s,color .16s}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}.more-button,.theme-toggle{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface-muted);min-width:74px;min-height:38px;color:var(--color-text);cursor:pointer;padding:0 14px;font-size:.88rem;font-weight:700}.more-button{background:var(--color-surface);min-width:66px}.more-button:hover,.theme-toggle:hover{border-color:var(--color-muted)}.track-row{grid-template-columns:1fr 3fr;align-items:stretch;gap:14px;margin-bottom:18px;display:grid}.track-dropdown{min-width:0;position:relative}.track-dropdown-trigger{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);width:100%;min-height:68px;color:inherit;text-align:left;cursor:pointer;grid-template-columns:1fr auto;align-items:center;gap:6px 14px;padding:12px 16px;display:grid}.track-dropdown-trigger:hover,.track-dropdown.is-open .track-dropdown-trigger{border-color:var(--color-primary);background:var(--color-surface-muted)}.track-dropdown-label{color:var(--color-muted);letter-spacing:0;text-transform:uppercase;font-size:.78rem;font-weight:700}.track-dropdown-value{grid-column:1;font-size:1.08rem;font-weight:750}.track-dropdown-chevron{border-bottom:2px solid;border-right:2px solid;grid-area:1/2/span 2;width:10px;height:10px;transition:transform .16s;transform:translateY(-3px)rotate(45deg)}.track-dropdown.is-open .track-dropdown-chevron{transform:translateY(3px)rotate(225deg)}.track-dropdown-menu{z-index:10;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);max-height:280px;padding:6px;display:grid;position:absolute;top:calc(100% + 8px);left:0;right:0;overflow-y:auto;box-shadow:0 16px 36px #00000029}.track-dropdown-menu[hidden]{display:none}.track-option{width:100%;min-height:46px;color:inherit;text-align:left;background:0 0;border:0;border-radius:0;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;display:grid;position:relative}.track-option:hover,.track-option[aria-selected=true]{background:var(--color-surface-muted)}.track-select-button{min-width:0;min-height:46px;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:10px 4px 10px 12px;display:grid}.track-name{flex-wrap:wrap;align-items:center;gap:6px;min-width:0;display:flex}.track-name span:first-child{overflow-wrap:anywhere;min-width:0}.track-option span,.track-select-button{font-weight:750}.track-badge{border:1px solid var(--color-border);min-height:20px;color:var(--color-muted);text-transform:uppercase;place-items:center;padding:2px 6px;font-size:.68rem;line-height:1;display:inline-grid}.track-info{width:32px;height:32px;color:var(--color-muted);flex:none;place-items:center;display:inline-grid}.track-info svg{fill:currentColor;width:20px;height:20px}.track-tooltip{color:var(--color-muted);opacity:0;grid-column:1/-1;grid-template-rows:0fr;font-size:.78rem;font-weight:600;line-height:1.35;transition:grid-template-rows .16s,opacity .14s,padding-top .14s;display:grid;overflow:hidden}.track-option.is-tooltip-open .track-tooltip{opacity:1;grid-template-rows:1fr;padding-top:2px}.track-tooltip-text{min-height:0;overflow:hidden}.track-favorite{width:34px;height:34px;color:var(--color-muted);cursor:pointer;background:0 0;border:0;place-items:center;margin-right:4px;padding:0;display:inline-grid}.track-favorite:hover{color:var(--color-text)}.track-favorite svg{width:20px;height:20px;overflow:visible}.track-favorite-fill{fill:#0000;transition:fill .16s}.track-favorite-stroke{stroke:currentColor}.track-favorite[aria-pressed=true] .track-favorite-fill{fill:#ffba08}.track-favorite[aria-pressed=true] .track-favorite-stroke{stroke:#ffba08}.track-group-label,.track-divider{min-height:28px;color:var(--color-muted);letter-spacing:0;text-transform:uppercase;align-items:center;padding:8px 10px 6px;font-size:.68rem;font-weight:800;display:flex}.track-divider{gap:10px;padding-top:12px}.track-divider:before,.track-divider:after{content:"";background:var(--color-border);flex:1;height:1px}.wave-loader{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);min-width:0;min-height:68px;color:var(--color-inactive);justify-content:center;align-items:center;display:flex}.wave-loader-icon{fill:currentColor;width:min(54px,72%);height:46px}.wave-bar{opacity:.7;transform-box:fill-box;transform-origin:50%}.wave-loader.is-playing{color:var(--color-primary)}.wave-loader.is-playing .wave-bar{opacity:1;animation:2s ease-in-out infinite wave-pulse}.wave-loader.is-playing .wave-bar-1{animation-delay:.15s}.wave-loader.is-playing .wave-bar-2{animation-delay:.3s}.wave-loader.is-playing .wave-bar-3{animation-delay:.45s}.wave-loader.is-playing .wave-bar-4{animation-delay:.6s}.wave-loader.is-playing .wave-bar-5{animation-delay:.75s}.wave-loader.is-playing .wave-bar-6{animation-delay:.9s}.wave-loader.is-playing .wave-bar-7{animation-delay:1.05s}.wave-loader.is-playing .wave-bar-8{animation-delay:1.2s}.wave-loader.is-playing .wave-bar-9{animation-delay:1.35s}@keyframes wave-pulse{0%,to{transform:scaleY(1)}50%{transform:scaleY(2)}}.controls{grid-template-columns:1fr 3fr;align-items:center;gap:14px;margin-top:20px;display:grid}.control-settings{grid-template-columns:5fr 7fr;align-items:center;gap:14px;min-width:0;display:grid}.play-button{border:1px solid var(--color-primary);border-radius:var(--radius);background:var(--color-primary);height:48px;min-height:48px;color:var(--color-primary-text);cursor:pointer;font-weight:750}.play-button:hover{border-color:var(--color-primary-hover);background:var(--color-primary-hover)}.timer-control,.volume-control{color:var(--color-muted);gap:8px;height:48px;min-height:48px;font-size:.9rem;font-weight:700;display:grid}.volume-control{flex-direction:column;justify-content:space-between;padding:2px 0;display:flex}.timer-trigger{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);width:100%;color:var(--color-text);cursor:pointer;place-items:center;display:grid}.timer-trigger:hover{border-color:var(--color-primary);background:var(--color-surface-muted)}.timer-status{font-variant-numeric:tabular-nums;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace}.timer-modal{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);width:min(100% - 32px,400px);color:var(--color-text);padding:0;box-shadow:0 24px 60px #0000003d}.project-modal{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);width:min(100% - 32px,800px);color:var(--color-text);padding:0;box-shadow:0 24px 60px #0000003d}.timer-modal::backdrop,.project-modal::backdrop{background:#00000061}.timer-modal-panel,.project-modal-panel{gap:18px;padding:18px;display:grid}.timer-modal-header,.project-modal-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.timer-modal-header h2,.project-modal-header h2{margin:0}.timer-modal-actions,.project-modal-actions{align-items:center;gap:8px;display:flex}.project-modal-copy{color:var(--color-muted);margin:0;font-size:.96rem;font-weight:600;line-height:1.55}.project-modal-copy a{color:var(--color-text)}.project-modal-copy a:hover{color:var(--color-muted)}.project-modal-actions{justify-content:flex-end}.timer-modal-status{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface-muted);min-height:58px;color:var(--color-text);place-items:center;font-size:1.45rem;display:grid}.timer-modal-clear,.timer-modal-close,.project-modal-close,.project-modal-action{border:1px solid var(--color-border);background:var(--color-surface-muted);min-height:34px;color:var(--color-text);cursor:pointer;border-radius:0;padding:0 12px;font-size:.86rem;font-weight:700}.project-modal-action{place-items:center;text-decoration:none;display:inline-grid}.timer-modal-clear,.project-modal-close{background:0 0}.timer-modal-clear:hover,.timer-modal-close:hover,.project-modal-close:hover,.project-modal-action:hover{border-color:var(--color-primary)}.project-modal-action:disabled{color:var(--color-muted);cursor:default}.project-modal-action:disabled:hover{border-color:var(--color-border)}.timer-picker{gap:8px;display:grid}.timer-option-group{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;display:grid}.timer-option-group[aria-label=Minutes]{grid-template-columns:repeat(4,minmax(0,1fr))}.timer-option{border:1px solid var(--color-border);background:var(--color-surface);width:100%;min-height:34px;color:var(--color-text);text-align:center;cursor:pointer;border-radius:0;padding:0 8px}.timer-option:hover,.timer-option[aria-pressed=true]{border-color:var(--color-primary);background:var(--color-primary);color:var(--color-primary-text)}.volume-control input{appearance:none;cursor:pointer;background:0 0;width:100%;height:48px}.volume-control input::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) var(--volume-progress,45%), var(--color-border) var(--volume-progress,45%), var(--color-border) 100%);border-radius:0;height:4px}.volume-control input::-webkit-slider-thumb{appearance:none;background:0 0;border:0;width:4px;height:4px;margin-top:-12px}.volume-control input::-moz-range-track{background:var(--color-border);border-radius:0;height:4px}.volume-control input::-moz-range-progress{background:var(--color-primary);border-radius:0;height:4px}.volume-control input::-moz-range-thumb{cursor:grab;background:0 0;border:0;width:4px;height:4px}@media (width<=520px){.player-shell{place-items:stretch stretch;padding:14px}.player-panel{align-self:center;padding:20px}.player-header{align-items:stretch}h1{font-size:2rem}.track-row{grid-template-columns:1fr;gap:10px}.wave-loader{display:none}.track-dropdown-trigger,.wave-loader{min-height:62px}.wave-loader-icon{width:min(46px,76%);height:40px}.controls{grid-template-columns:1fr 3fr;gap:10px}.control-settings{gap:10px}.timer-option-group{grid-template-columns:repeat(3,minmax(0,1fr))}.play-button{width:100%}.project-modal-actions{grid-template-columns:1fr;display:grid}}