:root{color-scheme:dark;--bg:#070809;--panel:#191a1e;--line:#2b2c31;--text:#e5e5e8;--muted:#93949f;--red:#f04a53;--red-soft:#f04a5318}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible,[role="slider"]:focus-visible{outline:2px solid var(--red);outline-offset:5px}
button:disabled{opacity:.45;cursor:default}
.app-shell{max-width:1480px;padding:18px 48px 28px;margin:0 auto;isolation:isolate}
.music-waves{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.music-waves canvas{display:block;width:100%;height:100%}
.menu{position:relative;width:36px;margin-bottom:16px;z-index:5}
.menu summary{width:36px;height:36px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;list-style:none;border-radius:6px}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover,.menu[open] summary{background:#24252a}
.menu summary span{width:18px;height:2px;background:var(--text);border-radius:1px}
.menu nav{position:absolute;top:43px;left:0;display:grid;min-width:170px;padding:6px;border:1px solid var(--line);border-radius:9px;background:var(--panel);box-shadow:0 12px 30px #0006}
.menu nav a{padding:12px;border-radius:5px;font-size:13px;color:var(--muted)}
.menu nav a:hover,.menu nav a[aria-current]{background:var(--red-soft);color:var(--red)}
.page-heading{display:flex;justify-content:space-between;align-items:center;padding:36px 0 30px;gap:24px}
.eyebrow{font-size:10px;letter-spacing:2px;font-weight:650;color:var(--muted);margin:0;display:flex;align-items:center;gap:9px}
.red-dash{height:2px;width:21px;background:var(--red)}
h1{font-size:clamp(28px,3vw,42px);line-height:1.15;letter-spacing:-1.6px;margin:14px 0 0;font-weight:750}
h1>span{color:var(--muted)}
.session-label{text-align:right}
.session-number{color:var(--red);letter-spacing:2px;font-size:9px;font-weight:700}
.session-label h2{font-size:30px;font-weight:850;letter-spacing:1px;margin:10px 0}
.red-text{color:var(--red)}
.session-label p{color:var(--muted);font-size:12px;margin:0}
.session-label p>span{margin:0 9px;color:#55565f}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#0b0c0eb8;border:1px solid var(--line);border-radius:12px;padding:22px 0;margin-bottom:22px}
.metrics>div{padding:0 28px;border-right:1px solid var(--line);position:relative}
.metrics>div:last-child{border:0}
.metric-label{display:block;color:var(--muted);letter-spacing:1.5px;font-size:9px;font-weight:600;margin:0;line-height:normal}
.metrics strong{font-size:32px;letter-spacing:-1px;display:inline-block;margin-top:8px;font-weight:650;font-variant-numeric:tabular-nums}
.metric-total{color:#64656f;font-size:21px;font-weight:400}
.mini-progress{position:absolute;height:3px;background:#303138;border-radius:4px;bottom:9px;right:28px;width:34%}
.mini-progress>span{display:block;height:100%;width:0;background:var(--red);border-radius:4px}
.ride-grid{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:22px}
.panel{border:1px solid var(--line);border-radius:13px;background:linear-gradient(130deg,#0e0f119c,#0a0b0db3);overflow:hidden}
.interval-card{padding:23px 26px;display:flex;flex-direction:column;justify-content:space-between}
.panel-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.state-badge{color:#b4b5bc;background:#ffffff06;border:1px solid #3c3d44;border-radius:5px;padding:5px 8px;font-size:8px;font-weight:600;letter-spacing:1px}
.state-badge.running{color:var(--red);background:var(--red-soft);border-color:#f04a5344}
.phase-heading{display:flex;align-items:center;gap:10px;margin:20px 0}
.phase-index{color:var(--red);background:var(--red-soft);padding:6px 7px;border-radius:5px;font-size:11px;font-weight:700}
.phase-heading h2{font-size:23px;font-weight:600;letter-spacing:-.4px;margin:0}
.effort-bars{display:flex;gap:3px;align-items:flex-end;margin-left:auto;height:17px}
.effort-bars i{width:4px;background:#3a3b42;border-radius:1px}
.effort-bars i:nth-child(1){height:6px;background:var(--red)}.effort-bars i:nth-child(2){height:10px}.effort-bars i:nth-child(3){height:14px}.effort-bars i:nth-child(4){height:18px}
.interval-clock{font-size:clamp(64px,6.6vw,92px);line-height:1.2;font-weight:650;letter-spacing:-5px;font-variant-numeric:tabular-nums;margin:9px 0 0}
.targets{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:24px;padding-top:18px;gap:12px}
.targets strong{display:block;font-size:19px;font-weight:550;margin-top:9px}.targets small{color:var(--muted);font-size:10px;font-weight:400;margin-left:5px}
.ride-controls{display:flex;gap:10px;margin-top:23px}
.primary-button{background:var(--red);color:#fff;border:1px solid transparent;border-radius:7px;padding:13px 22px;display:inline-flex;justify-content:center;align-items:center;gap:12px;font-size:12px;font-weight:650;transition:background .15s}
.primary-button:hover{background:#ff626a}
.ride-controls .primary-button{flex:1}
.icon-button{width:43px;min-width:36px;height:43px;color:#c5c6cf;background:#24252a;border:1px solid #35363c;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:21px}
.icon-button:hover{background:#313239;color:#fff}
.small-muted{color:var(--muted);font-size:8px;letter-spacing:1.3px}
.video-container{position:relative;width:100%;aspect-ratio:16/9;background:#08090b;border-bottom:1px solid var(--line)}
.video-container iframe{width:100%;height:100%;border:0;display:block}
.track-info{display:flex;align-items:center;gap:14px;padding:19px 22px}
.track-text{min-width:0}
.track-text h2{font-size:17px;margin:5px 0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-text p{font-size:11px;color:var(--muted);margin:0}
.track-controls{margin-left:auto;display:flex;gap:6px}.track-controls .icon-button{border:0;background:transparent;width:32px;min-width:30px;font-size:15px}
.track-controls .icon-button:hover{background:#303137}
.video-note{font-size:9px;color:var(--muted);margin:12px 22px 16px;line-height:1.5}
.terrain-panel{margin-top:22px;padding:16px 26px 20px}
.terrain-chart{margin-top:5px}
.terrain-chart svg{display:block;width:100%;height:auto;overflow:visible;cursor:crosshair;touch-action:manipulation}
.chart-grid{fill:none;stroke:#ffffff08;stroke-width:1;stroke-dasharray:4 5}
.terrain-line{stroke:#64656f;stroke-width:2.5;fill:none;stroke-linejoin:round;stroke-linecap:round}
.terrain-completed{stroke:var(--red);stroke-width:3;fill:none;stroke-linejoin:round;stroke-linecap:round}
.position-line{stroke:var(--red);stroke-width:1;stroke-dasharray:3 4;opacity:.5}
.position-halo{fill:var(--red);opacity:.15}.position-dot{fill:var(--red);stroke:#ffd5d8;stroke-width:2}
.time-axis{display:flex;justify-content:space-between;margin:0 1.5%;color:#92939e;font-size:9px;font-variant-numeric:tabular-nums}
.playlist-notice{padding:30px;margin-bottom:22px;max-width:850px}
.coming-soon{font-size:9px;color:var(--red);letter-spacing:2px}
.playlist-notice h2{font-size:24px;margin:15px 0}
.playlist-notice p{font-size:14px;color:var(--muted);line-height:1.8;max-width:640px;margin-bottom:24px}
.playlist-panel{padding:25px;max-width:850px}.playlist-panel h2{font-size:16px;margin:0}
.song-list{list-style:none;padding:0;margin:20px 0 0}.song-list li{display:flex;align-items:center;gap:20px;border-top:1px solid var(--line);padding:17px 0}
.song-number{color:var(--red);font-size:12px;font-variant-numeric:tabular-nums}
.song-list h3{margin:0 0 5px;font-size:14px;font-weight:550}.song-list p{margin:4px 0 0;font-size:12px;color:var(--muted)}
.song-list a{margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap}.song-list a:hover{color:var(--red)}
.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#303138;border:1px solid #62636c;border-radius:9px;padding:16px 22px;max-width:90vw;font-size:13px;z-index:10;box-shadow:0 10px 40px #0008}
@media(min-width:1450px){.interval-card{padding:28px 32px}}
@media(max-width:1000px){.app-shell{padding-inline:28px}.metrics>div{padding:0 20px}.ride-grid{grid-template-columns:1fr 1.15fr;gap:16px}.interval-card{padding:20px}.phase-heading h2{font-size:20px}.interval-clock{font-size:72px}.metric-label{font-size:8px}.targets strong{font-size:17px}.mini-progress{display:none}.fullscreen-button{display:none}.terrain-panel{padding-inline:20px}.track-info{padding-inline:16px}}
@media(max-width:720px){.app-shell{padding:12px 18px 24px}.page-heading{padding:28px 0;align-items:flex-start}h1{font-size:31px;letter-spacing:-1px}.page-heading .eyebrow{font-size:7px;letter-spacing:1.5px}.session-label{padding-top:3px}.session-number{font-size:7px;letter-spacing:1px}.session-label h2{font-size:20px;margin-top:12px}.session-label p{font-size:9px;max-width:120px;line-height:1.8;margin-left:auto}.session-label p>span{margin:0 3px}.metrics{padding:18px 0;margin-bottom:16px}.metrics>div{padding:0 10px}.metrics strong{font-size:25px}.metrics .metric-label{font-size:7px;letter-spacing:.8px}.metrics .metric-total{font-size:13px}.ride-grid{grid-template-columns:1fr}.interval-card{padding:23px}.interval-clock{font-size:85px}.metric-label{font-size:9px}.targets strong{font-size:20px}.track-text h2{font-size:16px}.terrain-panel{padding-inline:15px;margin-top:16px}.terrain-chart svg{min-height:110px}.playlist-panel{padding:20px}.playlist-panel .panel-top{align-items:flex-start}.playlist-panel .small-muted{max-width:105px;text-align:right;font-size:7px;line-height:1.7}.song-list li{gap:12px}.song-list h3{font-size:12px}.song-list a{font-size:9px}.playlist-notice{padding:25px}.playlist-notice h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.editor-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:12px 0 25px}
.editor-heading h1{font-size:30px;margin:0}.editor-heading>a{font-size:12px;color:var(--muted)}
.editor-summary{position:sticky;top:10px;z-index:3;display:grid;grid-template-columns:1fr 1.5fr auto;align-items:center;gap:15px 25px;padding:22px;background:#0d0e10f5;margin-bottom:22px}
.editor-summary strong{display:inline-block;font-size:30px;margin-top:8px;font-variant-numeric:tabular-nums}
.editor-goal{display:inline-block;font-size:10px;color:var(--muted);margin-left:12px}
#save-hint{grid-column:1/-1;margin:0;color:var(--muted);font-size:11px;line-height:1.6}
#save-hint.warning{color:#ff777d;font-weight:650}
.editor-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px}
.editor-search,.editor-tracklist{padding:25px;align-self:start}
.editor-search h2{margin:12px 0 8px;font-size:27px}
.editor-muted{font-size:11px;line-height:1.7;color:var(--muted);margin:8px 0 15px}
.editor-muted a{color:var(--red)}
#search-form label{display:block;font-size:12px;margin:22px 0 10px}
.search-input-row{display:flex;gap:9px}
.search-input-row input{min-width:0;flex:1;background:#08090b;border:1px solid #3b3c44;border-radius:7px;color:var(--text);padding:12px;font:inherit;font-size:12px}
input:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.search-input-row .primary-button{padding:12px}
#search-status{font-size:12px;line-height:1.6;color:var(--muted)}
.search-result{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 0;border-top:1px solid var(--line)}
.search-result h3,.editor-track h3{margin:0;font-size:13px;font-weight:550;overflow-wrap:anywhere;line-height:1.5}
.search-result .editor-muted,.editor-track .editor-muted{margin:5px 0 0}
.result-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}.result-actions a{font-size:10px;color:var(--muted)}
.secondary-button{padding:8px 11px;background:#1a1b20;border:1px solid #35363c;border-radius:6px;color:var(--text);font-size:11px}
.secondary-button:hover{border-color:var(--red)}
.secondary-button.selected{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.step-controls{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
.section-tabs{display:flex;gap:7px;flex-wrap:wrap}
.section-total{display:flex;justify-content:space-between;align-items:center;margin-top:25px}
.section-total h2{font-size:20px;margin:0}.section-total strong{font-size:24px;font-variant-numeric:tabular-nums}
.selected-tracks{list-style:none;padding:0;margin:20px 0}
.editor-track{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding:16px 0}
.editor-track-controls{display:flex;align-items:center;gap:7px}
.editor-track-controls label{font-size:10px;color:var(--muted);margin-right:auto}
.editor-track-controls input{width:63px;background:#08090b;border:1px solid #3b3c44;border-radius:5px;padding:6px;color:var(--text);font:inherit}
.editor-empty{padding:20px 0;font-size:12px;color:var(--muted)}
@media(max-width:900px){.editor-grid{grid-template-columns:1fr}.editor-summary{gap:15px;padding:18px}.editor-summary strong{font-size:25px}.editor-goal{display:block;margin:5px 0 0}}
@media(max-width:550px){.editor-heading h1{font-size:25px}.editor-summary{grid-template-columns:1fr 1fr}.editor-summary .primary-button{grid-column:1/-1}.editor-summary .metric-label{font-size:7px;letter-spacing:.8px}.editor-search,.editor-tracklist{padding:18px}.step-controls .primary-button{padding:10px 12px}.editor-summary{position:static}.editor-heading>a{font-size:10px}}
.playlist-library{display:flex;align-items:flex-end;flex-wrap:wrap;gap:14px;padding:20px;margin-bottom:20px}
.library-field{display:flex;flex-direction:column;gap:8px;flex:1 1 200px;min-width:0}
.library-field label{font-size:11px;color:var(--muted)}
.library-field input,.library-field select{width:100%;min-width:0;background:#08090b;border:1px solid #3b3c44;border-radius:6px;color:var(--text);font:inherit;font-size:12px;padding:10px}
.playlist-name-field{flex-basis:100%}
select:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.panel,.metrics{border-radius:6px;border-color:#50515a80;background:linear-gradient(130deg,#34363c70,#24262c66)}
.track-timing{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.track-timing label{font-size:11px;color:var(--muted)}
.track-timing input{width:78px;background:#08090b;border:1px solid #3b3c44;border-radius:4px;padding:7px;color:var(--text);font:inherit}
.track-timing .editor-muted{margin:0;font-size:10px}
.dashboard-page .app-shell{max-width:calc(50% + 880px);padding:10px clamp(12px,2vw,38px) 14px}
.dashboard-page .menu{margin-bottom:8px}
.dashboard-page .metrics{padding:12px 0;margin-bottom:12px}
.dashboard-page .metrics strong{font-size:28px;margin-top:5px}
.dashboard-page .terrain-panel{margin-top:12px;padding:8px 18px 10px}
.dashboard-page .terrain-chart{margin-top:0}
.dashboard-page .terrain-chart svg{height:clamp(85px,14vh,150px);min-height:0}
.dashboard-page .terrain-chart path,.dashboard-page .position-dot,.dashboard-page .position-line{vector-effect:non-scaling-stroke}
.track-youtube-link{display:inline-block;margin-top:8px;font-size:11px;color:var(--red)}
.track-youtube-link:hover{text-decoration:underline}
.phase-heading .track-text{flex:1}
.phase-heading .track-text h2{white-space:normal;overflow-wrap:anywhere;line-height:1.25}
.phase-heading .effort-bars{flex-shrink:0}
#play-icon{position:relative;display:block;width:20px;height:20px}
#play-icon::before{content:"";position:absolute;left:5px;top:2px;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid currentColor}
#toggle-session[aria-pressed="true"] #play-icon::before,#toggle-session[aria-pressed="true"] #play-icon::after{content:"";position:absolute;top:2px;width:5px;height:16px;border:0;border-radius:1px;background:currentColor}
#toggle-session[aria-pressed="true"] #play-icon::before{left:3px}
#toggle-session[aria-pressed="true"] #play-icon::after{left:12px}
.dashboard-page #session-state{display:none}
.dashboard-page .interval-card .phase-heading{margin:0}
.dashboard-page .interval-card .phase-heading h2{margin-top:0}
.dashboard-page .ride-grid .interval-card{padding-block:clamp(24px,3.5vh,38px)}
.dashboard-page .primary-button,.dashboard-page .icon-button{border-radius:4px}
@media(min-width:901px) and (min-height:500px){
  .dashboard-page .app-shell{height:100vh;height:100dvh;display:grid;grid-template-rows:36px minmax(0,1fr);gap:8px}
  .dashboard-page main{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px}
  .dashboard-page .metrics,.dashboard-page .terrain-panel{margin:0}
  .dashboard-page .ride-grid{min-height:0;grid-template-columns:minmax(280px,.54fr) minmax(0,1.46fr);gap:16px;container-type:size}
  .dashboard-page .interval-card{padding:clamp(12px,2vh,24px) 22px;min-height:0}
  .dashboard-page .phase-heading{margin:8px 0}
  .dashboard-page .phase-heading h2{font-size:clamp(16px,1.3vw,20px);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  .dashboard-page .interval-clock{font-size:clamp(42px,6.5vh,68px);letter-spacing:-2px;margin:0;line-height:1.05}
  .dashboard-page .targets{margin-top:10px;padding-top:10px}
  .dashboard-page .targets strong{margin-top:5px}
  .dashboard-page .ride-controls{margin-top:10px}
  .dashboard-page .ride-controls .primary-button{padding:10px;gap:8px;white-space:nowrap}
  .dashboard-page .music-card{min-height:0;width:min(100%,calc(100cqh * 16 / 9));aspect-ratio:16/9;align-self:center;justify-self:center}
  .dashboard-page .video-container{width:100%;height:100%;aspect-ratio:auto}
  .dashboard-page .track-info{flex-shrink:0;padding:10px 18px;min-height:64px}
  .dashboard-page .video-note{flex-shrink:0;margin:0 18px 8px}
  .dashboard-page .fullscreen-button{display:inline-flex}
}
.dashboard-page .music-card{position:relative}
.dashboard-page .video-container{border-bottom:0}
.dashboard-page .music-card .video-note{position:absolute;bottom:0;left:0;right:0;margin:0;padding:8px 12px;background:#08090be6}
@media(min-width:901px) and (min-height:500px) and (max-height:650px){
  .dashboard-page .app-shell{grid-template-rows:28px minmax(0,1fr);gap:6px;padding:8px clamp(12px,2vw,38px) 10px}
  .dashboard-page .menu,.dashboard-page .menu summary{height:28px}
  .dashboard-page main{gap:8px}
  .dashboard-page .metrics{padding:8px 0}
  .dashboard-page .metrics strong{font-size:24px}
  .dashboard-page .interval-card{padding:12px 16px}
  .dashboard-page .phase-heading h2{font-size:16px}
  .dashboard-page .interval-clock{font-size:clamp(38px,7vh,46px)}
  .dashboard-page .targets{margin-top:8px;padding-top:8px}
  .dashboard-page .targets strong{font-size:16px}
  .dashboard-page .phase-heading{margin:4px 0}
  .dashboard-page .phase-heading h2{-webkit-line-clamp:2}
  .dashboard-page .ride-controls .primary-button{padding:8px;font-size:11px}
  .dashboard-page .ride-controls .icon-button{width:36px;height:36px}
  .dashboard-page .track-info{min-height:52px;padding:6px 14px}
  .dashboard-page .track-text h2{font-size:15px;margin:3px 0}
  .dashboard-page .terrain-panel{padding:6px 12px 8px}
  .dashboard-page .terrain-chart svg{height:64px}
}