#training-desk{--td-bg:light-dark(#f4f5f7,#14171c);--td-paper:light-dark(#fff,#1e232b);--td-ink:light-dark(#1a2534,#edf1f6);--td-muted:light-dark(#657183,#b1bdcd);--td-line:light-dark(#dfe3e9,#37404e);--td-soft:light-dark(#f0f2f5,#292f39);--td-brand:light-dark(#263f5c,#adc6e8);--td-brand-ink:light-dark(#fff,#142335);--td-lime:#d5f366;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;color:var(--td-ink);background:var(--td-bg);border-radius:16px;overflow:hidden;position:relative;width:100%}
#training-desk *{box-sizing:border-box}#training-desk [hidden]{display:none!important}#training-desk button,#training-desk input,#training-desk select{font:inherit;color:inherit;overflow-wrap:anywhere}#training-desk button{border:1px solid var(--td-line);background:var(--td-paper);border-radius:9px;min-height:44px;padding:9px 14px}#training-desk button:disabled{opacity:.5}#training-desk button:focus-visible,#training-desk input:focus-visible,#training-desk select:focus-visible{outline:3px solid #81a8e4;outline-offset:2px}
#training-desk .td-header{padding:24px 30px 18px;display:flex;justify-content:space-between;align-items:center;gap:20px}#training-desk .td-header b{font-size:21px;letter-spacing:1px}#training-desk .td-header span:not(.td-edition){font-size:12px;color:var(--td-muted);margin-left:14px}#training-desk .td-edition{font-size:10px;letter-spacing:2px;color:var(--td-muted);margin-right:80px}
#training-desk nav{display:flex;gap:8px;margin:0 30px 26px;padding:5px;background:var(--td-soft);width:fit-content;border-radius:11px}#training-desk nav button{border:0;background:transparent;color:var(--td-muted);padding:10px 29px;font-weight:600}#training-desk nav button[aria-pressed=true]{background:var(--td-paper);color:var(--td-ink);box-shadow:0 2px 5px #0000000b}
#training-desk .td-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:28px;padding:0 30px 30px;align-items:start}#training-desk .td-editor{min-width:0}#training-desk .td-section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:22px}#training-desk h2{margin:0;font-size:19px;font-weight:650}#training-desk p{margin:5px 0 0;color:var(--td-muted);font-size:12px}#training-desk #td-stage-count{white-space:nowrap;font-size:12px;color:var(--td-muted)}
#training-desk .td-row{display:grid;grid-template-columns:26px minmax(0,1fr) 76px 27px;align-items:center;gap:9px;background:var(--td-paper);border:1px solid var(--td-line);padding:12px;border-radius:11px;margin-bottom:8px}#training-desk .td-index{color:var(--td-muted);font-size:13px;font-variant-numeric:tabular-nums}#training-desk input[type=text]{width:100%;min-width:0;border:0;background:transparent;font-weight:600;padding:8px 0}#training-desk .td-seconds{position:relative}#training-desk input[type=number]{width:100%;border:1px solid var(--td-line);border-radius:7px;padding:9px;background:var(--td-paper);font-variant-numeric:tabular-nums;font-size:16px;min-height:44px}#training-desk .td-seconds input{padding-right:23px;text-align:center}#training-desk .td-seconds span{position:absolute;right:9px;top:12px;font-size:12px;color:var(--td-muted);pointer-events:none}#training-desk .td-row .td-delete{padding:0;border:0;background:transparent;font-size:22px;min-width:27px;color:var(--td-muted)}
#training-desk #td-add{width:100%;border-style:dashed;background:transparent;color:var(--td-brand);margin:4px 0 20px}#training-desk .td-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:8px 0 18px}#training-desk .td-label{display:block;font-size:12px;color:var(--td-muted);margin-bottom:7px}#training-desk .td-grid small{display:block;font-size:11px;color:var(--td-muted);margin-top:5px}#training-desk .td-check{display:flex;align-items:center;gap:9px;min-height:38px;font-size:12px}#training-desk input[type=checkbox]{width:17px;height:17px;accent-color:var(--td-brand)}
#training-desk .td-sound{border-top:1px solid var(--td-line);margin-top:20px;padding-top:15px;color:var(--td-muted);font-size:12px}#training-desk summary{min-height:38px;padding:5px 0}#training-desk .td-sound-body{display:grid;gap:8px;padding:10px 0}#training-desk input[type=range]{width:100%;accent-color:var(--td-brand)}#training-desk #dc-audio-label{font-size:11px}
#training-desk .td-display{background:#18283c;color:#f7f9fc;border-radius:15px;padding:21px 24px 20px;min-height:435px;display:flex;flex-direction:column}#training-desk .td-display-top{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#bfccdc;font-size:12px}#training-desk .td-display-top button{background:transparent;border:1px solid #546478;color:#d7e1ee;min-height:34px;padding:5px 10px;font-size:11px}#training-desk .td-main-number{text-align:center;padding:32px 0 25px;flex:1}#training-desk #td-caption{font-size:12px;color:#bfccdc}#training-desk #td-action{font-size:28px;letter-spacing:1px;margin-top:7px}#training-desk #td-value{font-size:clamp(72px,9vw,110px);font-weight:650;letter-spacing:-5px;line-height:1.25;font-variant-numeric:tabular-nums;color:var(--td-lime);margin:8px 0}#training-desk #td-subvalue{font-size:13px;color:#d1dceb}#training-desk .td-next{text-align:center;font-size:12px;color:#bfccdc;margin-bottom:23px;overflow-wrap:anywhere}#training-desk .td-track{height:5px;background:#ffffff1f;border-radius:4px;overflow:hidden}#training-desk #td-fill{height:100%;width:0;background:var(--td-lime)}#training-desk .td-display-bottom{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#bfccdc;margin-top:13px}
#training-desk .td-controls{display:grid;grid-template-columns:1fr 86px;gap:10px;margin-top:14px}#training-desk .td-controls button{min-height:54px;font-weight:600}#training-desk #td-start{background:var(--td-brand);color:var(--td-brand-ink);border:0}#training-desk .td-sequence{display:flex;gap:6px;margin-top:18px;flex-wrap:wrap}#training-desk .td-sequence span{padding:6px 9px;font-size:11px;color:var(--td-muted);border-radius:5px;background:var(--td-soft)}#training-desk .td-sequence span.active{background:var(--td-brand);color:var(--td-brand-ink)}
#training-desk .td-toggle{display:flex;gap:6px;background:var(--td-soft);padding:4px;border-radius:9px;margin-bottom:20px}#training-desk .td-toggle button{flex:1;border:0;background:transparent;color:var(--td-muted)}#training-desk .td-toggle button[aria-pressed=true]{background:var(--td-paper);color:var(--td-ink)}#training-desk .td-field{display:block;margin-bottom:18px}#training-desk select{width:100%;padding:11px;min-height:44px;background:var(--td-paper);border:1px solid var(--td-line);border-radius:8px}#training-desk .td-speeds{display:flex;gap:8px}#training-desk .td-speeds button{flex:1;font-size:20px;font-weight:600}#training-desk .td-speeds button[aria-pressed=true]{background:var(--td-brand);color:var(--td-brand-ink);border-color:var(--td-brand)}
#training-desk.td-large .td-header,#training-desk.td-large nav,#training-desk.td-large .td-editor,#training-desk.td-large .td-sequence{display:none}#training-desk.td-large .td-layout{display:block;padding:20px}#training-desk.td-large .td-display{min-height:550px}#training-desk.td-large #td-value{font-size:clamp(90px,22vw,210px)}
@media(max-width:730px){#training-desk .td-header{padding:20px}#training-desk .td-edition{display:none}#training-desk nav{margin:0 20px 20px;width:calc(100% - 40px)}#training-desk nav button{flex:1;padding:9px 12px}#training-desk .td-layout{grid-template-columns:1fr;padding:0 20px 22px;gap:25px}#training-desk .td-display{min-height:380px}#training-desk #td-value{font-size:96px}#training-desk[data-running=true] .td-editor{display:none}#training-desk input[type=text],#training-desk select{font-size:16px}#training-desk .td-row{grid-template-columns:18px minmax(0,1fr) 71px 24px;padding:9px;gap:7px}}
@media(prefers-reduced-motion:reduce){#training-desk *{scroll-behavior:auto}}
#training-desk .td-grid.td-timer-fields{grid-template-columns:1fr 1fr;gap:24px 18px;margin-top:30px}#training-desk .td-timer-fields input{font-size:28px;min-height:64px;font-weight:600}#training-desk #td-sequence:empty{display:none}
:root{color-scheme:light dark}body{margin:0;padding:24px;background:light-dark(#e8ecf1,#0e1218)}#training-desk{max-width:1240px;margin:0 auto;box-shadow:0 12px 50px #00000008}#training-desk #audio-state{font-size:11px;color:var(--td-muted);margin:0 80px 0 8px}#training-desk nav{max-width:calc(100% - 60px);width:auto;justify-content:flex-start}#training-desk nav button{min-width:0;padding:10px 22px}#training-desk .td-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr)}#training-desk .td-music-panel{border-top:1px solid var(--td-line);margin-top:24px;padding-top:18px}#training-desk h3{font-size:14px;margin:0 0 14px;font-weight:600}#training-desk .td-music-actions{display:flex;align-items:center;gap:14px;margin-top:10px}#training-desk .td-music-actions button{min-height:38px;padding:6px 15px;font-size:12px}#training-desk a{color:var(--td-brand);font-size:12px}#training-desk #music-status,#training-desk #session-message{font-size:12px;color:var(--td-muted);overflow-wrap:anywhere}#training-desk #music-status:empty,#training-desk #session-message:empty{display:none}#training-desk .td-preview{position:sticky;top:20px;min-width:0}#training-desk .td-preview .td-next{min-height:18px}#training-desk .td-beats{display:flex;justify-content:center;gap:6px;margin-top:14px}#training-desk .td-beats span{display:grid;place-items:center;width:30px;height:30px;border-radius:5px;background:var(--td-soft);color:var(--td-muted);font-size:12px;font-variant-numeric:tabular-nums}#training-desk .td-beats span.on{background:var(--td-brand);color:var(--td-brand-ink)}#training-desk .td-beats span.heavy{font-weight:750}#training-desk .td-beats span.heavy::after{content:'•';line-height:7px;font-size:9px}#training-desk .td-pitch-note{font-size:12px;color:var(--td-muted);margin-top:8px}#training-desk .td-controls{grid-template-columns:1fr 86px}#training-desk .td-sound-body p{margin-top:2px}#training-desk .td-duration-note{padding:12px 0;color:var(--td-muted);font-size:12px}#training-desk.td-large .td-preview{position:static}#training-desk.td-large .td-layout{display:block}#training-desk[data-running=true] .td-editor{opacity:.7}#training-desk #volume-value{float:right}
@media(max-width:730px){body{padding:10px}#training-desk .td-layout{grid-template-columns:1fr;gap:22px;padding:0 18px 22px}#training-desk .td-header{padding:18px}#training-desk .td-header b{font-size:19px}#training-desk #audio-state{display:none}#training-desk nav{margin:0 12px 22px;max-width:calc(100% - 24px);padding:4px;gap:2px}#training-desk nav button{font-size:13px;padding:9px 6px;flex:1;white-space:normal}#training-desk .td-preview{position:static}#training-desk .td-grid.td-timer-fields{gap:18px 12px;margin-top:20px}#training-desk .td-timer-fields input{font-size:25px;min-height:58px}#training-desk[data-running=true] .td-editor{display:none}#training-desk .td-value{overflow-wrap:anywhere}#training-desk .td-sequence{gap:4px}#training-desk .td-beats{gap:4px}#training-desk .td-beats span{width:27px}}
@media(max-width:370px){#training-desk #td-value{font-size:80px;letter-spacing:-4px}#training-desk.td-large #td-value{font-size:80px}#training-desk .td-display{padding-left:17px;padding-right:17px}#training-desk .td-display-bottom{flex-wrap:wrap}}
/* Phone layout: separate setup from the training screen. Safe areas also work in Safari home-screen mode. */
#training-desk .td-mobile-toolbar,#training-desk #mobile-settings-done{display:none}
#training-desk button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media(max-width:730px){
 body{padding:0;background:var(--td-bg,#f4f5f7)}
 #training-desk{border-radius:0;min-height:100svh;box-shadow:none;padding:env(safe-area-inset-top) 0 max(14px,env(safe-area-inset-bottom));overflow:visible}
 #training-desk .td-header{min-height:62px;padding:16px 18px 12px}
 #training-desk .td-header b{font-size:20px}#training-desk .td-header span{font-size:12px}
 #training-desk nav{margin:0 14px 10px;max-width:calc(100% - 28px);width:calc(100% - 28px);border-radius:12px;padding:4px;gap:2px}
 #training-desk nav button{min-height:48px;line-height:1.3;font-size:13px;padding:8px 5px;font-weight:600;border-radius:9px;white-space:nowrap}
 #training-desk .td-mobile-toolbar{display:flex;margin:0 18px 12px;min-height:44px;gap:8px;align-items:center;justify-content:space-between}
 #training-desk #mobile-summary{font-size:12px;min-width:0;color:var(--td-muted);line-height:1.4}
 #training-desk #mobile-settings{min-height:42px;min-width:65px;padding:8px 13px;font-size:14px;border-radius:9px}
 #training-desk .td-layout{display:block;padding:0 14px;gap:0}
 #training-desk .td-editor{display:none}
 #training-desk[data-view=settings] .td-editor{display:block;padding:8px 4px 0}
 #training-desk[data-view=settings] .td-preview{display:none}
 #training-desk[data-view=settings] #mobile-settings-done{display:block;width:100%;min-height:58px;margin:20px 0 6px;border:0;background:var(--td-brand);color:var(--td-brand-ink);font-size:16px;font-weight:600}
 #training-desk .td-preview{position:static}
 #training-desk .td-display{min-height:clamp(330px,48svh,470px);padding:18px 20px 20px;border-radius:17px}
 #training-desk .td-display-top{font-size:13px;min-height:36px}
 #training-desk .td-display-top button{min-height:38px;padding:7px 11px;font-size:12px}
 #training-desk .td-main-number{padding:24px 0 22px}
 #training-desk #td-caption{font-size:13px}
 #training-desk #td-action{font-size:29px;margin-top:8px}
 #training-desk #td-value{font-size:clamp(76px,27vw,118px);letter-spacing:-4px;line-height:1.2;margin:12px 0}
 #training-desk #td-subvalue{font-size:14px}
 #training-desk .td-next{font-size:12px;line-height:1.7;margin-bottom:20px;min-height:21px}
 #training-desk .td-display-bottom{font-size:12px;margin-top:15px;flex-wrap:wrap}
 #training-desk .td-controls{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:10px;margin-top:12px}
 #training-desk .td-controls button{min-height:62px;font-size:17px;border-radius:12px}
 #training-desk .td-sequence{justify-content:center;margin-top:15px;margin-bottom:8px}
 #training-desk .td-beats{gap:7px;margin-top:0}
 #training-desk .td-beats span{width:31px;height:33px;font-size:13px}
 #training-desk .td-grid.td-timer-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 14px;margin:24px 0}
 #training-desk .td-timer-fields input{min-height:62px;font-size:29px;padding:10px 12px}
 #training-desk .td-label{font-size:13px;margin-bottom:8px}
 #training-desk input[type=number],#training-desk select{font-size:17px;min-height:50px}
 #training-desk select{padding:12px 11px;border-radius:9px}
 #training-desk .td-speeds button{min-height:55px;font-size:22px}
 #training-desk .td-toggle button{min-height:46px;font-size:15px}
 #training-desk .td-sound{font-size:13px;margin-top:18px}
 #training-desk summary{min-height:44px;padding:10px 0}
 #training-desk input[type=range]{min-height:44px}
 #training-desk .td-check{font-size:13px;min-height:44px}
 #training-desk.td-large .td-mobile-toolbar{display:none}
 #training-desk.td-large .td-layout{padding:8px 12px 0}
 #training-desk.td-large .td-display{min-height:calc(100svh - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
 #training-desk.td-large #td-value{font-size:clamp(86px,29vw,130px)}
}
@media(max-width:370px){#training-desk .td-header{padding-left:15px;padding-right:15px}#training-desk nav{margin-left:10px;margin-right:10px;width:calc(100% - 20px);max-width:calc(100% - 20px)}#training-desk nav button{font-size:12px}#training-desk .td-layout{padding:0 10px}#training-desk .td-display{padding-left:16px;padding-right:16px}#training-desk .td-beats{gap:4px}#training-desk .td-beats span{width:29px}#training-desk #td-value{font-size:82px}}

#training-desk .td-music-panel{border-top:1px solid var(--td-line);margin-top:24px;padding-top:18px}
#training-desk .td-music-panel h3{font-size:16px;margin:0 0 14px}
#training-desk .td-music-panel .td-toggle{margin-bottom:16px}
#training-desk .td-music-panel input[type=range]{width:100%;min-height:44px}
#training-desk #music-volume-value{float:right}
#training-desk .td-music-nowplaying{display:flex;align-items:center;gap:8px;margin-top:14px;padding:12px;background:var(--td-paper);border-radius:12px}
#training-desk .td-music-nowplaying>div{flex:1;min-width:0}
#training-desk #music-now-title{display:block;font-size:13px;overflow-wrap:anywhere}
#training-desk #music-state{display:block;font-size:12px;color:var(--td-muted);margin-top:4px}
#training-desk .td-music-nowplaying button{flex-shrink:0;font-size:12px;min-height:44px;padding:8px}
@media(max-width:370px){#training-desk .td-music-nowplaying{flex-wrap:wrap}#training-desk .td-music-nowplaying>div{flex-basis:100%}}