:root{color-scheme:light;--ink:#171717;--muted:#706d67;--bg:#f5f3ee;--panel:#ffffff;--line:#e4e0d8;--yellow:#c9a227;--red:#9b3a34;--cyan:#866b18;--shadow:0 14px 40px rgba(23,23,23,.09);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-width:320px;color:var(--ink);background:var(--bg);min-height:100vh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}button,input,select{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #c9a227;outline-offset:3px}.app-shell{width:min(1220px,calc(100% - 32px));margin:0 auto;padding:28px 0 64px}.topbar{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.eyebrow{margin:0 0 5px;color:var(--yellow);font-size:.72rem;letter-spacing:.12em;font-weight:800}h1,h2{margin:0;letter-spacing:-.025em}h1{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:760}h2{font-size:1.25rem;font-weight:750}.save-state{color:var(--muted);font-size:.83rem;display:flex;align-items:center;gap:8px}.save-state span{width:8px;height:8px;border-radius:50%;background:#4f8b62;box-shadow:0 0 10px rgba(79,139,98,.3)}.save-state.saving span{background:var(--yellow)}
.console{position:relative;overflow:hidden;background:linear-gradient(145deg,#111b26,#0a1017 64%);border:1px solid #2b3946;border-radius:20px;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05)}.console:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;background-image:repeating-linear-gradient(90deg,transparent 0 39px,rgba(255,255,255,.018) 40px)}.readout{min-height:172px;padding:24px 30px;display:flex;justify-content:space-between;align-items:center;gap:28px;border-bottom:1px solid var(--line)}.readout-main{display:grid;grid-template-columns:auto auto;align-items:end;column-gap:12px}.readout-main p{grid-column:1/-1;margin:0 0 -8px;color:var(--cyan);letter-spacing:.2em;font-weight:800;font-size:.78rem}.readout-main strong{color:var(--yellow);font:800 clamp(4.8rem,12vw,8rem)/.9 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.09em;text-shadow:0 0 28px rgba(245,213,71,.15)}.readout-main span{color:var(--muted);font-size:.78rem;font-weight:800;margin-bottom:10px;letter-spacing:.14em}.measure-readout{min-width:150px;padding:18px 24px;background:rgba(0,0,0,.23);border:1px solid var(--line);border-radius:12px;display:grid;grid-template-columns:1fr auto;align-items:end}.measure-readout span{grid-column:1/-1;color:var(--muted);font-size:.72rem;font-weight:800;letter-spacing:.16em}.measure-readout strong{font:760 2.7rem/1 ui-monospace,monospace;margin-top:12px}.measure-readout small{color:var(--yellow);font-size:1rem;font-weight:750;margin-bottom:3px}.beat-track{padding:14px 30px;min-height:47px;display:flex;gap:10px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.14)}.beat-light{height:8px;flex:1;max-width:82px;border-radius:999px;background:#24303a;transition:background .04s,box-shadow .04s,transform .04s}.beat-light.active{background:var(--yellow);box-shadow:0 0 14px rgba(245,213,71,.58);transform:scaleY(1.35)}.beat-light.active:first-child{background:var(--red);box-shadow:0 0 14px rgba(255,87,79,.6)}.transport-row{position:relative;display:flex;gap:12px;padding:22px 30px 14px;align-items:stretch}.transport{min-height:58px;padding:0 24px;border:1px solid #334451;background:#15212b;border-radius:10px;font-weight:820;display:flex;align-items:center;justify-content:center;gap:10px}.transport:hover:not(:disabled){background:#1b2a35}.transport.primary{min-width:190px;color:#17150a;background:var(--yellow);border-color:var(--yellow)}.transport.primary:hover{background:#ffe56e}.transport:disabled{opacity:.38;cursor:not-allowed}.play-icon{width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid currentColor}.stop-icon{width:13px;height:13px;background:currentColor}.countin-badge{margin-left:auto;min-width:126px;display:flex;align-items:center;gap:9px;padding:0 14px;color:var(--muted);border-left:1px solid var(--line)}.countin-badge strong{color:var(--cyan);font:760 2.3rem/1 ui-monospace,monospace}.countin-badge span{font-size:.66rem;line-height:1.25;font-weight:850;letter-spacing:.1em}.range-panel{position:relative;display:grid;grid-template-columns:170px 26px 170px auto;align-items:end;gap:12px;padding:14px 30px 24px}.range-panel label,.name-block label,.select-field,.volume-field{color:var(--muted);font-size:.73rem;letter-spacing:.08em;font-weight:800;text-transform:uppercase}.range-panel input,#programName,select,.segment-row input{width:100%;min-height:43px;margin-top:7px;padding:0 12px;background:#080d12;border:1px solid #34434f;border-radius:8px;color:var(--ink)}.range-arrow{align-self:center;margin-top:22px;color:var(--muted);text-align:center}.text-button{justify-self:start;align-self:center;margin-top:21px;border:0;background:transparent;color:var(--cyan);font-weight:750}
.quick-strip{position:relative;padding:15px 30px;display:grid;grid-template-columns:minmax(150px,1fr) auto 150px;gap:22px;align-items:end;border-bottom:1px solid var(--line);background:rgba(6,11,16,.62)}.quick-context{align-self:center;display:grid;gap:3px}.quick-context span,.quick-control>span{color:var(--muted);font-size:.66rem;letter-spacing:.11em;font-weight:850}.quick-context strong{font-size:.9rem}.quick-control{display:grid;gap:6px}.quick-tempo>div{display:flex;gap:5px;align-items:stretch}.quick-tempo button{min-width:40px;border:1px solid #3a4b58;border-radius:7px;background:#15212b;font-weight:850}.quick-tempo button:hover{border-color:var(--yellow);color:var(--yellow)}.quick-tempo label{position:relative;display:flex;align-items:center}.quick-tempo input{width:82px;min-height:42px;padding:0 35px 0 10px;border:1px solid #4a5a67;border-radius:7px;background:#080d12;font:750 1.1rem/1 ui-monospace,monospace}.quick-tempo small{position:absolute;right:8px;color:var(--muted);font-size:.58rem;font-weight:850}.quick-meter select{min-height:42px;margin:0;padding:0 10px;background:#080d12;border:1px solid #4a5a67;border-radius:7px;font-weight:750}
.program-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin:34px 2px 18px}.name-block{width:min(520px,100%)}#programName{margin-top:4px;padding:0;border:0;border-radius:0;min-height:auto;background:transparent;font-size:clamp(1.3rem,3vw,1.75rem);font-weight:780}.name-block p{margin:5px 0 0;color:var(--muted);font-size:.82rem}.utility-actions{display:flex;flex-wrap:wrap;justify-content:end;gap:8px}.utility-actions button,.add-button{min-height:40px;padding:0 14px;border:1px solid #334451;border-radius:8px;background:#101922;font-weight:730}.utility-actions button:hover,.add-button:hover{border-color:#657583;background:#15212b}.workspace,.sound-panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.workspace-title{padding:20px 22px 17px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.add-button{color:var(--yellow)}.column-headings,.segment-row{display:grid;grid-template-columns:88px minmax(140px,1.5fr) 90px 190px 130px 150px 92px;gap:12px;align-items:center}.column-headings{padding:12px 18px 9px;color:#71808d;font-size:.63rem;letter-spacing:.09em;font-weight:850}.section-list{padding:0 10px 10px}.segment-row{position:relative;padding:13px 8px;border-top:1px solid rgba(36,49,61,.74)}.segment-range{font:720 .83rem/1.2 ui-monospace,monospace;color:var(--cyan)}.segment-row label{display:block;color:var(--muted);font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.segment-row label>span{display:none}.segment-row input,.segment-row select{min-height:40px;margin-top:0;background:#090f15}.field-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center}.field-pair input{min-width:0}.field-pair span{color:#647380}.meter-pair{grid-template-columns:1fr 8px 1fr}.row-actions{display:flex;justify-content:end;gap:4px}.icon-button{width:38px;height:38px;border:1px solid transparent;background:transparent;color:var(--muted);border-radius:7px;font-size:1rem}.icon-button:hover{color:var(--ink);border-color:#34434f;background:#141f28}.icon-button.delete:hover{color:#ff837d;border-color:rgba(255,87,79,.38)}
.sound-panel{margin-top:18px;padding:22px;display:grid;grid-template-columns:minmax(220px,1.3fr) minmax(150px,.8fr) minmax(150px,.9fr) repeat(4,minmax(105px,.65fr));gap:20px;align-items:end}.sound-note{max-width:430px;margin:7px 0 0;color:var(--muted);font-size:.83rem;line-height:1.5}.select-field select{display:block;margin-top:7px;width:100%;min-height:42px;background:#080d12;border:1px solid #34434f;border-radius:8px;padding:0 10px}.accent-toggle{min-height:52px;padding:8px 11px;display:flex;align-items:center;gap:10px;border:1px solid #34434f;border-radius:8px;background:#080d12;color:var(--ink);cursor:pointer}.accent-toggle input{width:19px;height:19px;margin:0;accent-color:var(--yellow)}.accent-toggle span{display:grid;gap:2px}.accent-toggle strong{font-size:.78rem;line-height:1.1}.accent-toggle small{color:var(--muted);font-size:.65rem;line-height:1.1}.volume-field{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px}.volume-field output{color:var(--ink);letter-spacing:0}.volume-field input{grid-column:1/-1;width:100%;accent-color:var(--yellow)}.keyboard-hint{margin:18px 2px 0;color:var(--muted);font-size:.8rem}kbd{padding:2px 7px;border:1px solid #465562;border-bottom-width:3px;border-radius:5px;background:#111a22;color:var(--ink)}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:5;padding:11px 16px;border:1px solid #3b4a57;border-radius:9px;background:#121c25;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1040px){.column-headings{display:none}.segment-row{grid-template-columns:90px minmax(130px,1.4fr) 90px 180px}.row-actions{grid-column:4}.sound-panel{grid-template-columns:1.4fr 1fr 1fr}}@media(max-width:720px){.app-shell{width:min(100% - 20px,620px);padding-top:18px}.topbar{align-items:start}.save-state{margin-top:7px}.readout{min-height:150px;padding:20px}.readout-main strong{font-size:clamp(4.4rem,25vw,7rem)}.measure-readout{min-width:112px;padding:15px}.transport-row{padding:18px 18px 12px}.transport{padding:0 16px}.transport.primary{min-width:0;flex:1}.countin-badge{min-width:auto;padding:0 0 0 10px}.countin-badge span{display:none}.range-panel{padding:12px 18px 20px;grid-template-columns:1fr 18px 1fr}.range-panel .text-button{grid-column:1/-1;margin:2px 0 0}.program-heading{align-items:start;flex-direction:column}.utility-actions{justify-content:start}.segment-row{margin-top:10px;padding:15px;grid-template-columns:1fr 1fr;gap:13px;border:1px solid var(--line);border-radius:11px;background:#0a1118}.segment-range{grid-column:1/-1}.segment-row label>span{display:block;margin-bottom:6px}.segment-name{grid-column:1/-1}.row-actions{grid-column:1/-1;justify-content:start;border-top:1px solid var(--line);padding-top:8px}.sound-panel{grid-template-columns:1fr 1fr}.sound-panel>div:first-child{grid-column:1/-1}}@media(max-width:470px){.topbar{display:block}.save-state{margin-top:10px}.readout{align-items:stretch;flex-direction:column;gap:14px}.measure-readout{grid-template-columns:auto 1fr auto;align-items:center;gap:12px}.measure-readout span{grid-column:auto}.measure-readout strong{margin:0;font-size:2rem}.beat-track{padding-inline:20px;gap:6px}.sound-panel{grid-template-columns:1fr}.sound-panel>div:first-child{grid-column:auto}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}
.tempo-edit{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:5px;align-items:center}.tempo-edit>button{height:40px;padding:0;border:1px solid #34434f;border-radius:7px;background:#141f28;font-weight:850}.tempo-edit>button:hover{color:var(--yellow);border-color:var(--yellow)}.tempo-edit .field-pair{gap:4px}.tempo-edit input{padding-inline:7px}
@media(max-width:900px){.quick-strip{grid-template-columns:1fr auto}.quick-meter{grid-column:2}.quick-context{grid-row:1 / span 2}.quick-tempo{grid-column:2}}
@media(max-width:720px){.quick-strip{padding:15px 18px;grid-template-columns:1fr}.quick-context,.quick-tempo,.quick-meter{grid-column:1;grid-row:auto}.quick-tempo>div{display:grid;grid-template-columns:42px 42px minmax(82px,1fr) 42px 42px}.quick-tempo button{min-height:42px}.quick-tempo input{width:100%}}
@media(max-width:470px){.quick-tempo>div{grid-template-columns:38px 38px minmax(76px,1fr) 38px 38px}.quick-tempo button{min-width:0;font-size:.78rem}}
.segment-row{align-items:end;padding-block:17px;gap:10px}.segment-row.tempo-steady{grid-template-columns:140px 120px 150px 150px 90px 130px 105px}.segment-row.tempo-ramp{grid-template-columns:135px 112px 145px 140px 95px 82px 125px 105px}.segment-row .field-label,.action-field>.field-label{display:block;margin-bottom:7px;color:var(--muted);font-size:.875rem;font-weight:850;line-height:1.1;text-transform:uppercase;letter-spacing:.04em}.segment-row label>.range-edit{display:grid;grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr);gap:5px;align-items:center;margin:0}.segment-row label>.tempo-edit{display:grid;margin:0}.range-edit>span{color:#647380;text-align:center}.range-edit input{min-width:0;padding-inline:7px;color:var(--cyan);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800}.tempo-change-field select{padding-inline:8px}.target-tempo-field input{color:var(--yellow);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800}.action-field{min-width:0}.action-field .row-actions{justify-content:start}.action-field .icon-button{width:32px}
@media(max-width:1040px){.segment-row.tempo-steady,.segment-row.tempo-ramp{grid-template-columns:150px minmax(160px,1.3fr) 120px minmax(190px,1fr)}}
@media(max-width:720px){.segment-row.tempo-steady,.segment-row.tempo-ramp{grid-template-columns:1fr 1fr}.measure-range-field,.action-field{grid-column:1/-1}.segment-row .field-label,.action-field>.field-label{display:block;margin-bottom:7px}.action-field{padding-top:2px;border-top:1px solid var(--line)}}

/* Split standard metronome and Program Mode */
.topbar{display:grid;grid-template-columns:minmax(220px,1fr) auto;align-items:end}.mode-nav{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:11px;background:#0b1219}.mode-nav a{min-height:40px;padding:0 15px;display:flex;align-items:center;justify-content:center;border-radius:7px;color:var(--muted);font-size:.82rem;font-weight:800;text-decoration:none;white-space:nowrap}.mode-nav a:hover{color:var(--ink);background:#131f29}.mode-nav-standard{color:#17150a!important;background:var(--yellow)}.mode-nav-standard:hover{color:#17150a!important;background:#ffe56e!important}.program-route .mode-nav-standard{color:var(--muted)!important;background:transparent}.program-route .mode-nav-standard:hover{color:var(--ink)!important;background:#131f29!important}.program-route .mode-nav-program{color:#17150a;background:var(--yellow)}.program-route .mode-nav-program:hover{color:#17150a;background:#ffe56e}.app-shell .program-mode{display:none}.program-route .app-shell .standard-mode{display:none}.program-route .app-shell .program-mode{display:block;margin-top:0;padding-top:0;border-top:0}.program-route main{display:flex;flex-direction:column}.program-route .program-mode{order:1}.program-route .shared-sound{order:2}.program-route .keyboard-hint{order:3}.program-page-hint{display:none}.program-route .standard-page-hint{display:none}.program-route .program-page-hint{display:inline}
@media(max-width:860px){.topbar{grid-template-columns:1fr;align-items:start}.mode-nav{grid-column:1;grid-row:2;justify-self:start}}
@media(max-width:520px){.app-shell .topbar{display:grid;grid-template-columns:1fr}.mode-nav{width:100%;display:grid;grid-template-columns:1fr 1fr}.mode-nav a{padding-inline:8px;text-align:center;white-space:normal}}
.mode-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:0 2px 16px}.mode-heading>p{max-width:440px;margin:0;color:var(--muted);font-size:.88rem;line-height:1.5;text-align:right}.standard-console{overflow:hidden;display:grid;grid-template-columns:230px minmax(0,1fr);grid-template-rows:auto auto;background:linear-gradient(145deg,#111b26,#0a1017 64%);border:1px solid #2b3946;border-radius:18px;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05)}.standard-readout{grid-row:1/3;padding:25px 28px;display:grid;grid-template-columns:1fr auto;align-content:center;align-items:end;border-right:1px solid var(--line);background:rgba(0,0,0,.17)}.standard-readout>span{grid-column:1/-1;color:var(--cyan);font-size:.72rem;font-weight:850;letter-spacing:.18em}.standard-readout strong{color:var(--yellow);font:800 clamp(4rem,8vw,6.2rem)/.92 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.09em;text-shadow:0 0 26px rgba(245,213,71,.15)}.standard-readout small{margin:0 0 8px 8px;color:var(--muted);font-size:.7rem;font-weight:850;letter-spacing:.12em}.standard-beat-track{min-height:44px;padding:17px 22px 11px;display:flex;gap:9px;border-bottom:1px solid var(--line)}.standard-controls{padding:17px 22px 21px;display:grid;grid-template-columns:minmax(290px,1.5fr) 125px minmax(160px,.8fr) auto;gap:14px;align-items:end}.standard-field{display:grid;gap:7px}.control-label,.library-block>label{color:var(--muted);font-size:.72rem;letter-spacing:.09em;font-weight:850}.standard-field>select,.standard-field>input,.standard-tempo-control input,.library-block>select{width:100%;height:44px;padding:0 11px;border:1px solid #3a4b58;border-radius:8px;background:#080d12;color:var(--ink)}.standard-tempo-control>div{display:grid;grid-template-columns:42px 42px minmax(76px,1fr) 42px 42px;gap:5px}.standard-tempo-control button{min-width:0;border:1px solid #3a4b58;border-radius:8px;background:#15212b;font-weight:850}.standard-tempo-control button:hover{color:var(--yellow);border-color:var(--yellow)}.standard-tempo-control input{text-align:center;font:760 1.08rem/1 ui-monospace,SFMono-Regular,Menlo,monospace}.standard-transport{display:flex;gap:8px}.standard-transport .transport{min-height:44px;padding-inline:16px}.standard-transport .transport.primary{min-width:112px}.shared-sound{margin-top:18px}.program-mode{margin-top:46px;padding-top:38px;border-top:1px solid #31404c}.program-mode-heading{margin-bottom:16px}.program-heading{margin:0 0 18px;padding:18px 20px;display:grid;grid-template-columns:minmax(220px,.8fr) minmax(300px,1.35fr) auto;align-items:end;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.library-block{display:grid;grid-template-columns:1fr;gap:7px}.library-actions{display:flex;flex-wrap:wrap;gap:7px}.library-actions button,.confirm-dialog button{min-height:36px;padding:0 12px;border:1px solid #334451;border-radius:8px;background:#101922;font-weight:730}.library-actions button:hover,.confirm-dialog button:hover{border-color:#657583;background:#15212b}.library-actions .danger-button,.utility-actions .danger-button,.confirm-dialog .danger-button{color:#ff8b85;border-color:rgba(255,87,79,.38)}.library-actions .danger-button:hover,.confirm-dialog .danger-button:hover{color:#fff;background:#6e2927;border-color:#b94a45}.library-actions button:disabled{opacity:.38;cursor:not-allowed}.program-heading .name-block{width:100%}.program-heading .utility-actions{align-self:center}.program-console{margin-bottom:18px}.confirm-dialog{width:min(440px,calc(100% - 32px));padding:0;color:var(--ink);background:#111a22;border:1px solid #3a4b58;border-radius:14px;box-shadow:0 28px 90px rgba(0,0,0,.6)}.confirm-dialog::backdrop{background:rgba(2,5,8,.72);backdrop-filter:blur(3px)}.confirm-dialog form{padding:24px}.confirm-dialog h2{margin-bottom:10px}.confirm-dialog p:not(.eyebrow){margin:0;color:var(--muted);line-height:1.5}.dialog-actions{display:flex;justify-content:end;gap:9px;margin-top:24px}.save-state.offline span:first-child{background:var(--yellow);box-shadow:0 0 14px rgba(245,213,71,.55)}.save-state.error span:first-child{background:var(--red);box-shadow:0 0 14px rgba(255,87,79,.55)}

@media(max-width:1100px){.standard-console{grid-template-columns:205px minmax(0,1fr)}.standard-controls{grid-template-columns:minmax(270px,1.4fr) 110px minmax(150px,.8fr)}.standard-transport{grid-column:1/-1}.standard-transport .transport{flex:1}.program-heading{grid-template-columns:minmax(210px,.75fr) minmax(280px,1.25fr)}.program-heading .utility-actions{grid-column:1/-1;justify-content:start}}
@media(max-width:760px){.mode-heading{align-items:start;flex-direction:column;gap:7px}.mode-heading>p{text-align:left}.standard-console{grid-template-columns:1fr}.standard-readout{grid-row:auto;grid-template-columns:auto 1fr auto;padding:20px 22px;border-right:0;border-bottom:1px solid var(--line);align-items:center}.standard-readout>span{grid-column:auto}.standard-readout strong{justify-self:end;font-size:4.4rem}.standard-readout small{margin:0 0 5px 8px}.standard-controls{grid-template-columns:1fr 1fr}.standard-tempo-control,.standard-transport{grid-column:1/-1}.program-mode{margin-top:34px;padding-top:30px}.program-heading{grid-template-columns:1fr}.program-heading .utility-actions{grid-column:auto}.library-block,.program-heading .name-block{padding-bottom:15px;border-bottom:1px solid var(--line)}}@media(max-width:470px){.standard-controls{grid-template-columns:1fr}.standard-field,.standard-tempo-control,.standard-transport{grid-column:1}.standard-tempo-control>div{grid-template-columns:38px 38px minmax(72px,1fr) 38px 38px}.standard-tempo-control button{font-size:.78rem}.standard-transport{display:grid;grid-template-columns:1fr 1fr}.program-heading{padding:15px}}

/* Compact one-screen controls */
.app-shell{padding-top:20px}.topbar{margin-bottom:16px}.mode-heading{margin-bottom:10px}.keyboard-hint{margin-top:10px}
.sound-disclosure,.workspace-disclosure{overflow:visible;border:1px solid var(--line);border-radius:13px;background:var(--panel);box-shadow:var(--shadow)}
.sound-disclosure{margin-top:12px}.sound-disclosure>summary,.workspace-disclosure>summary{min-height:48px;padding:0 16px;display:flex;align-items:center;gap:9px;list-style:none;cursor:pointer;font-size:.9rem;font-weight:800}.sound-disclosure>summary::-webkit-details-marker,.workspace-disclosure>summary::-webkit-details-marker,.program-options>summary::-webkit-details-marker{display:none}.sound-disclosure>summary span,.workspace-disclosure>summary span{color:var(--ink)}.sound-disclosure>summary small,.workspace-disclosure>summary small{color:var(--muted);font-size:.75rem;font-weight:650}.sound-disclosure>summary small{margin-left:2px}.sound-disclosure>summary:after,.workspace-disclosure>summary:after{content:"▾";margin-left:auto;color:var(--yellow);transition:transform .16s}.sound-disclosure[open]>summary:after,.workspace-disclosure[open]>summary:after{transform:rotate(180deg)}
.sound-disclosure .sound-panel{margin:0;padding:16px;border:0;border-top:1px solid var(--line);border-radius:0 0 12px 12px;box-shadow:none}.sound-intro .sound-note{margin:0}.program-route .sound-disclosure{order:2}.program-route .keyboard-hint{order:3}
.program-mode-heading{margin-bottom:10px}.program-heading{margin:0 0 10px;padding:12px 14px;grid-template-columns:minmax(210px,.75fr) minmax(280px,1.25fr) auto;gap:14px;border-radius:12px}.program-heading .name-block p{margin-top:3px}.program-options{position:relative;align-self:end;justify-self:end}.program-options>summary{min-height:42px;padding:0 13px;display:flex;align-items:center;gap:9px;list-style:none;border:1px solid #334451;border-radius:8px;background:#101922;cursor:pointer;font-size:.875rem;font-weight:780}.program-options>summary:after{content:"▾";color:var(--yellow)}.program-options[open]>summary{border-color:#657583;background:#15212b}.program-options[open]>summary:after{transform:rotate(180deg)}.program-options-menu{position:absolute;right:0;top:calc(100% + 7px);z-index:8;width:220px;padding:9px;display:grid;grid-template-columns:1fr;gap:6px;border:1px solid #3a4b58;border-radius:10px;background:#101922;box-shadow:0 20px 55px rgba(0,0,0,.48)}.program-options-menu button{width:100%;justify-content:flex-start;text-align:left}.program-options-menu .danger-button{margin-top:3px}
.program-console{margin-bottom:10px}.program-console .readout{min-height:118px;padding:16px 24px}.program-console .readout-main strong{font-size:clamp(4rem,8vw,5.8rem)}.program-console .measure-readout{padding:13px 18px}.program-console .beat-track{min-height:36px;padding:11px 24px}.program-console .quick-strip{padding:10px 24px}.program-console .transport-row{padding:14px 24px 8px}.program-console .transport{min-height:48px}.program-console .range-panel{padding:8px 24px 14px}
.workspace-disclosure{margin-top:10px}.workspace-disclosure>summary{display:grid;grid-template-columns:auto 1fr auto}.workspace-disclosure>summary span{grid-column:1}.workspace-disclosure>summary small{grid-column:2}.workspace-disclosure>summary:after{grid-column:3}.workspace-disclosure .workspace{border:0;border-top:1px solid var(--line);border-radius:0 0 12px 12px;box-shadow:none}.workspace-disclosure .workspace-title{padding:12px 16px}.workspace-note{margin:0;color:var(--muted);font-size:.82rem}.compact-workspace-title{gap:16px}
@media(max-width:1100px){.program-heading{grid-template-columns:minmax(200px,.8fr) minmax(260px,1.2fr) auto}.program-options-menu{width:210px}}
@media(max-width:760px){.app-shell{padding-top:14px}.topbar{margin-bottom:12px}.program-heading{grid-template-columns:1fr;padding:12px}.program-options{width:100%;justify-self:stretch}.program-options>summary{justify-content:space-between}.program-options-menu{left:0;right:auto;width:min(260px,100%)}.program-console .readout{min-height:132px;padding:16px 18px}.program-console .quick-strip{padding:10px 18px}.program-console .transport-row{padding:12px 18px 8px}.program-console .range-panel{padding:8px 18px 14px}.sound-disclosure .sound-panel{padding:14px}}

/* Mobile-first visual refresh */
.console,.standard-console{background:linear-gradient(145deg,#1a2028,#11161c 70%);border-color:#303a45}
.mode-nav{background:#12171d;border-color:var(--line)}
.mode-nav a:hover,.program-route .mode-nav-standard:hover{background:#202731!important}
.mode-nav-standard,.program-route .mode-nav-program,.transport.primary{color:#07111c!important;background:var(--yellow);border-color:var(--yellow)}
.mode-nav-standard:hover,.program-route .mode-nav-program:hover,.transport.primary:hover{color:#07111c!important;background:#78bbff!important}
.program-route .mode-nav-standard{color:var(--muted)!important;background:transparent}
.standard-readout strong,.readout-main strong{color:#d8ecff;text-shadow:0 0 24px rgba(90,174,255,.18)}
.beat-light.active{background:var(--yellow);box-shadow:0 0 14px rgba(90,174,255,.5)}
.transport,.standard-tempo-control button,.quick-tempo button,.program-options>summary,.library-actions button,.utility-actions button,.add-button{background:#202731;border-color:#3a4652}
.transport:hover:not(:disabled),.standard-tempo-control button:hover,.quick-tempo button:hover,.program-options[open]>summary{background:#29323d}
.standard-field>select,.standard-field>input,.standard-tempo-control input,.library-block>select,.range-panel input,.quick-tempo input,.quick-meter select,.select-field select,.accent-toggle{background:#0f141a;border-color:#38424d}

@media(max-width:600px){
  body{font-size:16px}
  .app-shell{width:min(100% - 20px,480px);padding:12px 0 calc(24px + env(safe-area-inset-bottom))}
  .topbar{gap:12px;margin-bottom:14px}
  .topbar h1{font-size:1.5rem}
  .mode-nav{width:100%;padding:3px;border-radius:12px}
  .mode-nav a{min-height:44px;padding:0 8px;font-size:.9rem;line-height:1.15}
  .mode-heading{margin:0 2px 10px}
  .mode-heading h2{font-size:1.15rem}
  .standard-console,.console,.program-heading,.sound-disclosure,.workspace-disclosure{border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.22)}
  .standard-readout{min-height:100px;padding:14px 16px}
  .standard-readout>span,.control-label,.library-block>label,.range-panel label,.name-block label,.select-field,.volume-field{font-size:.875rem;letter-spacing:.035em}
  .standard-readout strong{font-size:4rem}
  .standard-controls{padding:14px;gap:12px}
  .standard-field>select,.standard-tempo-control input,.library-block>select,.range-panel input,.quick-meter select{min-height:46px}
  .standard-tempo-control button,.quick-tempo button{min-height:46px}
  .standard-transport .transport,.transport{min-height:50px}
  .sound-disclosure>summary,.workspace-disclosure>summary{min-height:50px;font-size:.95rem}
  .sound-disclosure>summary small,.workspace-disclosure>summary small{font-size:.8rem}
  .program-mode-heading{margin-bottom:8px}
  .program-heading{gap:12px;padding:12px}
  #programName{font-size:1.15rem}
  .program-console .readout{min-height:104px;padding:14px 16px;flex-direction:row;align-items:center;gap:12px}
  .program-console .readout-main strong{font-size:4rem}
  .program-console .measure-readout{min-width:105px;padding:12px;grid-template-columns:1fr auto}
  .program-console .measure-readout span{grid-column:1/-1;font-size:.75rem}
  .program-console .quick-strip{padding:12px 14px;gap:12px}
  .quick-context span,.quick-control>span{font-size:.78rem;letter-spacing:.045em}
  .program-console .transport-row{padding:12px 14px 8px}
  .program-console .range-panel{padding:8px 14px 14px}
  .countin-badge{padding-left:8px}
  .keyboard-hint{display:none}
  .program-options>summary{min-height:46px;font-size:.9rem}
  .program-options-menu{width:100%}
  .sound-panel{grid-template-columns:1fr}
  .sound-panel>div:first-child{grid-column:auto}
}
@media(max-width:390px){.sound-disclosure>summary small{display:none}}
@media(max-width:370px){.program-console .readout{flex-direction:column;align-items:stretch}.program-console .measure-readout{min-width:0}}

/* The selected toggle follows aria-current so instant mode changes stay in sync. */
.mode-nav a:not([aria-current="page"]){color:var(--muted)!important;background:transparent!important}
.mode-nav a[aria-current="page"]{color:#07111c!important;background:var(--yellow)!important}
.mode-nav a[aria-current="page"]:hover{color:#07111c!important;background:#78bbff!important}
.simplified-program-heading{grid-template-columns:minmax(220px,1fr) auto}
.simplified-program-heading .program-options{grid-column:2}
@media(max-width:760px){.simplified-program-heading{grid-template-columns:1fr}.simplified-program-heading .program-options{grid-column:1}}
.quick-strip[hidden]{display:none!important}
.dialog-field{display:grid;gap:8px;margin-top:18px;color:var(--muted);font-size:.875rem;font-weight:750}.dialog-field input{width:100%;min-height:48px;padding:0 12px;color:var(--ink);background:#0f141a;border:1px solid #38424d;border-radius:8px;font-size:1rem}

/* Tempo Map cards stay compact while remaining easy to scan and edit on iPhone. */
@media(max-width:600px){
  .workspace-disclosure>summary{grid-template-columns:1fr auto}
  .workspace-disclosure>summary:after{grid-column:2}
  .workspace-disclosure .workspace-title{padding:11px 12px}
  .workspace-note{font-size:.8rem;line-height:1.3}
  .add-button{min-height:44px;padding-inline:12px;white-space:nowrap}
  .section-list{padding:8px}
  .segment-row.tempo-steady,.segment-row.tempo-ramp{margin:0 0 10px;padding:14px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px;row-gap:14px;border:1px solid #35414d;border-radius:12px;background:#0d1319}
  .segment-row.tempo-steady{grid-template-areas:"entry entry" "range range" "total meter" "tempo tempo" "change subdivision" "actions actions"}
  .segment-row.tempo-ramp{grid-template-areas:"entry entry" "range range" "total meter" "tempo tempo" "change target" "subdivision subdivision" "actions actions"}
  .segment-row:before{content:"ENTRY " attr(data-entry);grid-area:entry;padding-bottom:9px;border-bottom:1px solid var(--line);color:var(--cyan);font-size:.78rem;font-weight:850;letter-spacing:.08em}
  .measure-range-field{grid-area:range}.total-measures-field{grid-area:total}.tempo-field{grid-area:tempo}.tempo-change-field{grid-area:change}.target-tempo-field{grid-area:target}.meter-field{grid-area:meter}.subdivision-field{grid-area:subdivision}.action-field{grid-area:actions}
  .segment-row label,.action-field{min-width:0}
  .segment-row .field-label,.action-field>.field-label{margin-bottom:7px;font-size:.78rem;letter-spacing:.035em}
  .segment-row input,.segment-row select,.tempo-edit>button{min-height:46px}
  .segment-row input,.segment-row select{font-size:16px}
  .tempo-edit{grid-template-columns:44px minmax(0,1fr) 44px}
  .action-field{padding-top:10px}
  .action-field .row-actions{gap:8px}
  .action-field .icon-button{width:44px;height:44px;border-color:#34434f;background:#141f28;font-size:1.1rem}
}


/* Rhythm Lens palette */
.topbar{padding:14px 16px;border-bottom:3px solid var(--yellow);border-radius:12px;background:#151515;color:#f5f3ee}
.brand-copy{display:grid;gap:3px;line-height:1.1}.brand-copy h1{color:#fff;text-transform:lowercase}.brand-tagline{color:var(--yellow);font-size:.68rem;font-weight:750;letter-spacing:.025em;opacity:1}
.mode-nav{background:#efece5;border-color:#e4e0d8}
.mode-nav a:not([aria-current="page"]){color:#706d67!important}
.mode-nav a[aria-current="page"],.transport.primary{color:#e1bd4e!important;background:#171717!important;border-color:#171717!important}
.mode-nav a[aria-current="page"]:hover,.transport.primary:hover{color:#f5efd9!important;background:#000!important}
.mode-nav a:hover,.program-route .mode-nav-standard:hover{background:#f5efd9!important;color:#171717!important}
.console,.standard-console{background:linear-gradient(145deg,#242424,#151515 70%);border-color:#171717;color:#f5f3ee}
.standard-readout strong,.readout-main strong{color:#e1bd4e;text-shadow:none}.standard-readout>span,.readout-main p,.countin-badge strong{color:#e4dcc6}
.beat-light{background:#4b4945}.beat-light.active{background:#c9a227;box-shadow:0 0 12px rgba(201,162,39,.45)}.beat-light.active:first-child{background:#e1bd4e;box-shadow:0 0 12px rgba(225,189,78,.5)}
.sound-disclosure,.workspace-disclosure,.program-heading,.workspace,.sound-panel{background:#fff;border-color:#e4e0d8}
.standard-controls,.range-panel,.transport-row{color:#f5f3ee}
.standard-field>select,.standard-field>input,.standard-tempo-control input,.range-panel input,.quick-tempo input,.quick-meter select{background:#fff;color:#171717;border-color:#e4e0d8}
.library-block>select,.select-field select,.accent-toggle,.segment-row input,.segment-row select,.dialog-field input{background:#fff;color:#171717;border-color:#e4e0d8}
.transport,.standard-tempo-control button,.quick-tempo button,.program-options>summary,.library-actions button,.utility-actions button,.add-button{background:#efece5;color:#171717;border-color:#e4e0d8}
.transport:hover:not(:disabled),.standard-tempo-control button:hover,.quick-tempo button:hover,.program-options[open]>summary,.library-actions button:hover,.utility-actions button:hover,.add-button:hover{background:#f5efd9;border-color:#c9a227}
.program-options-menu,.confirm-dialog{background:#fff;color:#171717;border-color:#e4e0d8;box-shadow:0 20px 55px rgba(23,23,23,.18)}
.confirm-dialog::backdrop{background:rgba(21,21,21,.55)}
.password-error{min-height:1.25em;margin:9px 0 0!important;color:#9b3a34!important;font-size:.82rem;font-weight:700}
.toast{background:#171717;color:#f5f3ee;border-color:#c9a227}
.segment-row.tempo-steady,.segment-row.tempo-ramp{background:#fffaf0;border-color:#e4dcc6}
.segment-row:before,.segment-range,.range-edit input{color:#866b18}.target-tempo-field input{color:#96791f}
.icon-button:hover,.action-field .icon-button{background:#efece5;border-color:#e4e0d8}
@media(max-width:600px){.topbar{padding:12px}.segment-row.tempo-steady,.segment-row.tempo-ramp{background:#fffaf0;border-color:#e4dcc6}}