html:has(.section-nav-workspace){overflow-anchor:none}
.section-nav-workspace{display:grid!important;grid-template-columns:218px minmax(0,1fr);gap:var(--section-nav-gap,18px);align-items:start;grid-column:1/-1;min-width:0;margin:0;scroll-margin-top:20px;overflow-anchor:none}
.section-nav-sidebar{position:sticky;top:18px;align-self:start;padding:3px 10px;background:linear-gradient(150deg,rgba(24,34,52,.97),rgba(10,16,29,.97));border:1px solid #334155;border-radius:20px;box-shadow:0 10px 32px #0002}
.section-nav-caption{display:flex;align-items:center;justify-content:space-between;padding:9px 10px 13px;color:#94a3b8;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.section-nav-tag{font-size:10px;color:#94a3b8;border:1px solid #475569;border-radius:6px;letter-spacing:.03em;padding:2px 5px}
.section-nav-button{--section-nav-accent:#60a5fa;display:flex!important;align-items:center;gap:11px;width:100%;padding:10px 11px!important;border:2px solid transparent!important;background:transparent!important;color:#b7c4d6!important;border-radius:11px!important;text-align:left!important;box-shadow:none!important;min-height:47px;font:inherit!important;cursor:pointer;margin:2px 0}
.section-nav-button[data-section="guide"]{--section-nav-accent:#38bdf8;color:#7dd3fc!important}
.section-nav-button[data-section="premium"]{--section-nav-accent:#a78bfa;color:#c4b5fd!important}
.section-nav-button:hover{background:#ffffff08!important;color:#f8fafc!important}
.section-nav-button[aria-current="page"]{background:color-mix(in srgb,var(--section-nav-accent) 7%,transparent)!important;border-color:var(--section-nav-accent)!important;color:#f1f5f9!important;box-shadow:none!important}
.section-nav-icon{width:20px;min-width:20px;height:23px;display:grid;place-items:center;color:#94a3b8}
.section-nav-icon svg,.section-nav-icon img{width:20px;height:20px}
.section-nav-copy{display:flex;flex-direction:column;gap:3px;line-height:1.2}
.section-nav-name{font-size:14px;font-weight:750}
.section-nav-meta{font-size:11px;font-weight:500;color:#8998ad}
.section-nav-button[aria-current="page"] .section-nav-icon{color:var(--section-nav-accent)}
.section-nav-button[aria-current="page"] .section-nav-icon .otl-section-icon{background-color:var(--section-nav-accent)!important;filter:none!important}
.section-nav-divider{height:1px;background:#33415580;margin:4px 8px}
.section-nav-stage{min-width:0;min-height:0;height:var(--section-nav-pane-height,calc(100dvh - 36px));container-type:inline-size;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#475569 transparent;border-radius:20px}
.section-nav-stage:focus-visible{outline:2px solid #60a5fa;outline-offset:3px}
.section-nav-sidebar{max-height:calc(100dvh - 36px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#475569 transparent;box-sizing:border-box}
.section-nav-stage>.section-nav-panel{margin:0!important;width:100%!important;grid-column:1/-1!important}
#sectionNavigation .section-nav-stage>.section-nav-panel{box-shadow:none!important;min-height:100%!important;box-sizing:border-box}
#sectionNavigation .section-nav-stage>.section-nav-panel[hidden]{display:none!important}
#sectionNavigation .section-nav-stage>.section-nav-panel:not([hidden]){display:block!important}
.section-nav-always-open>summary{cursor:default!important}
.section-nav-always-open>summary>.settings-summary-action{display:none!important}
.section-nav-panel>summary{cursor:default!important;pointer-events:none}
.section-nav-panel>summary>.settings-summary-action{display:none!important}
.section-nav-mobile{display:none}
.section-nav-footer{color:#8998ad;font-size:11px;line-height:1.5;padding:12px 10px 5px;border-top:1px solid #33415580;margin-top:10px}
@media(min-width:1000px){body:not(.theater-mode) main.app{max-width:1660px!important}.section-nav-workspace .event-grid,.section-nav-workspace .otl-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.section-nav-workspace{display:flex!important;flex-direction:column;gap:14px;margin-top:0}.section-nav-sidebar{display:none}.section-nav-mobile{display:flex;position:sticky;top:8px;z-index:40;align-items:center;gap:14px;width:100%;padding:10px 13px;border:1px solid #475569;border-radius:14px;background:rgba(15,23,42,.96);backdrop-filter:blur(18px);box-shadow:0 8px 24px #0004}.section-nav-mobile label{font-size:12px;color:#94a3b8;white-space:nowrap;font-weight:650}.section-nav-mobile select{flex:1;min-width:0;font:inherit;font-size:16px;font-weight:700;background:#0b1220;color:#f1f5f9;border:1px solid #475569;border-radius:9px;padding:9px}.section-nav-stage{width:100%;min-height:0;height:calc(100dvh - 110px)}.section-nav-workspace{scroll-margin-top:88px}.section-nav-stage>.section-nav-panel{scroll-margin-top:84px}}

/* Panels respond to their available width beside the navigation. */
#sectionNavigation .section-nav-stage>.uploads-card:not([hidden]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;align-items:start}
#sectionNavigation .section-nav-stage>.uploads-card{align-content:start}
#sectionNavigation .section-nav-stage>.uploads-card{--otl-section-rgb:96,165,250;border-color:rgba(var(--otl-section-rgb),.30)!important;border-radius:var(--otl-top-section-radius,22px)!important;background:linear-gradient(120deg,rgba(var(--otl-section-rgb),.045),transparent 42%),linear-gradient(145deg,rgba(17,24,39,.96),rgba(15,23,42,.90))!important}
#sectionNavigation .section-nav-media-heading{grid-column:1/-1;display:flex!important;align-items:center;box-sizing:border-box;height:var(--otl-top-section-height,80px);min-height:var(--otl-top-section-height,80px);margin:-18px -18px 0;padding:0 var(--otl-top-section-padding-x,20px);border-bottom:1px solid rgba(96,165,250,.16);background:linear-gradient(135deg,rgba(59,130,246,.07),transparent 62%)}
#sectionNavigation .section-nav-media-heading h2{display:flex;align-items:center;gap:12px;margin:0;color:#f8fafc;font-size:clamp(1.55rem,2.1vw,1.95rem);font-weight:850;line-height:1.1;letter-spacing:-.018em}
#sectionNavigation .section-nav-media-heading svg{width:28px;height:28px;flex:0 0 28px;color:#cbd5e1}
#sectionNavigation .section-nav-panel:not(#otlGetStarted):not(#otlPremium)>summary .otl-section-icon{background-color:#cbd5e1!important;filter:none!important}
#sectionNavigation .section-nav-media-heading{background:linear-gradient(90deg,rgba(var(--otl-section-rgb),.065),rgba(2,6,23,.10) 58%,transparent)!important;box-shadow:inset 0 -1px 0 rgba(var(--otl-section-rgb),.09)}
#sectionNavigation .section-nav-media-heading{cursor:default!important;pointer-events:none}
@media(max-width:560px){#sectionNavigation .section-nav-media-heading h2{font-size:1.45rem}}
#sectionNavigation .uploads-card>.otl-combined-media-card{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"media" "soundtrack" "settings"!important;row-gap:18px!important;min-width:0;margin:0!important}
#sectionNavigation .uploads-card>.otl-combined-media-card{border-top-color:rgba(var(--otl-pair-rgb),.48)!important;box-shadow:0 0 0 1px rgba(2,6,23,.12)!important;transform-origin:top center!important;animation:otl-shared-section-reveal 190ms ease-out both!important}
@media(prefers-reduced-motion:reduce){#sectionNavigation .uploads-card>.otl-combined-media-card{animation:none!important}}
#sectionNavigation .uploads-card>.otl-combined-media-card:not(:has(>.otl-media-options:not([hidden]))){grid-template-areas:"media" "soundtrack"!important;grid-template-rows:auto auto!important}
#sectionNavigation .uploads-card>.otl-combined-media-card::after,#sectionNavigation .uploads-card>.otl-combined-media-card>.otl-soundtrack-subzone::before{content:none!important;display:none!important}
#sectionNavigation .uploads-card>.otl-combined-media-card>.otl-media-subzone{padding-right:0!important}
#sectionNavigation .uploads-card>.otl-combined-media-card>.otl-soundtrack-subzone{padding:18px 0 0!important;border-left:0!important;border-top:1px solid rgba(var(--otl-pair-rgb),.3)!important}
#sectionNavigation #otlQuickStart .otl-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
#sectionNavigation #otlTrainings .otl-training-workspace{grid-template-columns:minmax(0,1fr) minmax(280px,320px)!important}
#sectionNavigation #otlTrainings .otl-training-primary-row{grid-template-columns:46px minmax(0,1fr) auto minmax(330px,1.25fr)!important;grid-template-areas:"name-label name identity actions"!important}
#sectionNavigation #otlTrainings .otl-training-primary-actions .otl-training-editor-action-icon{display:none!important}
#sectionNavigation #otlTrainings .otl-training-primary-actions>button{gap:0!important;padding-inline:16px!important}
#sectionNavigation #otlTrainings .otl-media-library-title strong{white-space:normal!important;max-width:100%;min-width:0;line-height:1.3}
#sectionNavigation #otlTrainings .otl-media-library-heading,#sectionNavigation #otlTrainings .otl-media-library-title{max-width:100%;box-sizing:border-box}
@container(max-width:980px){
  #sectionNavigation #otlTrainings .otl-training-workspace{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"save" "list" "message" "media"!important}
  #sectionNavigation #otlTrainings .otl-media-library{padding:16px 0 0!important;border-left:0!important;border-top:1px solid rgba(100,116,139,.2)!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto!important;gap:14px!important}
  #sectionNavigation #otlTrainings .otl-media-library-actions{grid-column:2;grid-row:1;display:flex!important;width:auto!important;margin:0!important}
}
@container(max-width:760px){
  #sectionNavigation .section-nav-stage>.uploads-card:not([hidden]){grid-template-columns:minmax(0,1fr)!important}
  #sectionNavigation #otlQuickStart .otl-card-grid{grid-template-columns:minmax(0,1fr)!important}
  #sectionNavigation #otlTrainings .otl-training-primary-row{grid-template-columns:44px minmax(0,1fr) auto!important;grid-template-areas:"name-label name identity" ". actions actions"!important}
}
@container(max-width:520px){
  #sectionNavigation #otlTrainings .otl-media-library{grid-template-columns:minmax(0,1fr)!important}
  #sectionNavigation #otlTrainings .otl-media-library-actions{grid-column:1;grid-row:auto;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%!important}
}
@media(min-width:761px){
  .section-nav-sidebar{height:var(--section-nav-pane-height,auto)}
}

/* Patreon remains the primary route; its benefits fill the main card. */
#sectionNavigation #otlPremium .premium-content{grid-template-columns:minmax(0,2fr) minmax(260px,1fr)!important;align-items:start!important;gap:18px!important}
#sectionNavigation #otlPatreonAccess{padding:20px!important}
#sectionNavigation #otlPatreonAccess .otl-patreon-head{display:flex;align-items:center;justify-content:space-between;gap:12px!important;flex-wrap:wrap;margin-bottom:8px!important}
#sectionNavigation .nav-premium-price{flex:0 0 auto;color:#fdc5bb;font-size:.88rem;font-weight:750;white-space:nowrap;padding:6px 10px;border:1px solid rgba(249,104,84,.35);border-radius:8px;background:rgba(249,104,84,.07)}
#sectionNavigation #otlPatreonAccess .otl-patreon-copy{font-size:.94rem!important;line-height:1.5;margin:0!important;color:#b9c5d5}
#sectionNavigation .nav-premium-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;list-style:none;padding:12px 0 0;margin:12px 0 0;border-top:1px solid rgba(249,104,84,.19)}
#sectionNavigation .nav-premium-benefits li{display:flex;align-items:center;gap:10px;min-width:0;font-size:.95rem;font-weight:650;line-height:1.4;color:#edf0f6}
#sectionNavigation #otlPatreonAccess .nav-premium-benefits{margin-bottom:20px}
#sectionNavigation .nav-premium-cancel{display:block;text-align:center;margin:10px 0 0;color:#b9aebf;font-size:.8rem;font-weight:500;line-height:1.4;text-decoration:none}
#sectionNavigation .nav-premium-cancel:hover{color:#f1e8f6;text-decoration:underline}
#sectionNavigation .nav-premium-benefit-icon{display:grid;place-items:center;flex:0 0 23px;width:23px;font-size:1.05rem}
#sectionNavigation .nav-premium-future{font-size:.82rem;line-height:1.5;color:#b7a9c9;margin:18px 0 20px}
#sectionNavigation #otlPremiumAccess{padding:20px!important}
#sectionNavigation #otlPremiumAccess .otl-premium-access-head{margin-bottom:8px!important}
#sectionNavigation #otlPremiumAccess .otl-premium-copy{font-size:.9rem!important;line-height:1.5;margin-bottom:12px!important}
#sectionNavigation #otlPremiumAccessExpiry[hidden]{display:none!important}
#sectionNavigation #otlPremiumAccessDetails{padding-top:12px!important}
#sectionNavigation [data-volume-group]>.nav-volume-customize{grid-column:1/-1;grid-row:3;display:inline-flex!important;align-items:center;gap:8px;width:fit-content;margin:0!important;color:#b8c5d6;font-size:.84rem;font-weight:600;cursor:pointer}
#sectionNavigation [data-volume-group]>.otl-volume-by-light{grid-row:2}
@container(max-width:760px){
  #sectionNavigation #otlPremium .premium-content{grid-template-columns:minmax(0,1fr)!important}
}
@container(max-width:420px){
  #sectionNavigation .nav-premium-benefits{grid-template-columns:minmax(0,1fr);gap:12px}
  #sectionNavigation #otlPatreonAccess,#sectionNavigation #otlPremiumAccess{padding:16px!important}
}

/* Larger, simplified Media cards: each light is named once. */
#sectionNavigation #mediaSelection > .otl-combined-media-card{
  grid-template-areas:"heading" "media" "soundtrack" "settings"!important;
  grid-template-rows:auto auto auto auto!important;
  padding:20px!important;row-gap:16px!important;
}
#sectionNavigation #mediaSelection > .otl-combined-media-card:not(:has(>.otl-media-options:not([hidden]))){
  grid-template-areas:"heading" "media" "soundtrack"!important;
  grid-template-rows:auto auto auto!important;
}
#sectionNavigation .section-nav-media-light-heading{
  grid-area:heading;display:flex;align-items:center;gap:11px;
  font-size:1.5rem;font-weight:850;line-height:1.2;letter-spacing:-.015em;
  color:#f8fafc;margin:0 0 2px;
}
#sectionNavigation .section-nav-media-light-dot{
  flex:0 0 11px;width:11px;height:11px;border-radius:50%;background:rgb(var(--otl-pair-rgb));
}
#sectionNavigation #mediaSelection .otl-media-source-header{
  gap:12px!important;margin-bottom:0!important;min-height:42px;align-items:center!important;
}
#sectionNavigation #mediaSelection .otl-media-source-header > h2{
  font-size:1.125rem!important;line-height:1.3!important;font-weight:750!important;
}
#sectionNavigation #mediaSelection .otl-media-functional-title-icon{width:22px!important;height:22px!important;flex:0 0 22px!important}
#sectionNavigation #mediaSelection .otl-media-source-switch{padding:3px!important;gap:2px!important;flex-shrink:0}
#sectionNavigation #mediaSelection .otl-media-source-option{
  font-size:1rem!important;line-height:1.25!important;padding:9px 13px!important;min-height:38px!important;
}
#sectionNavigation #mediaSelection .otl-upload-subzone{gap:12px!important}
#sectionNavigation #mediaSelection .otl-soundtrack-subzone{padding-top:16px!important}
#sectionNavigation #mediaSelection .otl-library-picker-controls{gap:8px!important}
#sectionNavigation #mediaSelection .otl-library-picker-controls input{
  font-size:1.0625rem!important;min-height:50px!important;height:50px!important;padding:12px 14px!important;
}
#sectionNavigation #mediaSelection .otl-library-picker-controls [data-library-browse],
#sectionNavigation #mediaSelection .otl-local-file-row > button{
  font-size:1rem!important;min-height:50px!important;padding:10px 15px!important;
}
#sectionNavigation #mediaSelection .otl-local-file-control{
  min-height:50px!important;padding:5px 8px!important;gap:12px!important;
}
#sectionNavigation #mediaSelection .otl-local-file-button{
  font-size:1rem!important;line-height:1.25!important;padding:9px 12px!important;white-space:nowrap;
}
#sectionNavigation #mediaSelection .otl-local-file-status{font-size:1rem!important;line-height:1.3!important}
#sectionNavigation #mediaSelection .otl-online-tag-chip,
#sectionNavigation #mediaSelection .otl-online-soundtrack-chip{font-size:.9375rem!important;padding:7px 10px!important;line-height:1.25!important}
#sectionNavigation #mediaSelection [data-otl-online-clear-tags]{font-size:.9375rem!important}
/* One compact type scale and shared control baseline for Media settings. */
#sectionNavigation #mediaSelection .otl-media-options,
#sectionNavigation #mediaSelection .otl-media-options > summary,
#sectionNavigation #mediaSelection .otl-media-options :is(.otl-media-setting,label,input,select){font-size:.875rem!important}
#sectionNavigation #mediaSelection .otl-media-options .otl-media-setting{line-height:20px}
#sectionNavigation #mediaSelection .otl-media-options-body > :is(label.otl-media-setting,.otl-photo-duration-row){grid-template-rows:20px 40px;gap:6px;align-content:start}
#sectionNavigation #mediaSelection .otl-media-options .otl-photo-chance{height:auto;max-width:none;grid-template-rows:20px 40px;row-gap:6px;align-items:center}
#sectionNavigation #mediaSelection .otl-media-options .otl-photo-chance > span:first-child{align-self:start;white-space:nowrap}
#sectionNavigation #mediaSelection .otl-media-options :is(select,input[type="number"]){height:40px!important;font-weight:500!important;line-height:1.25;padding:8px 10px}
#sectionNavigation #mediaSelection .otl-media-options .otl-photo-duration{height:40px}
@container(max-width:420px){
  #sectionNavigation #mediaSelection > .otl-combined-media-card{padding:16px!important}
  #sectionNavigation #mediaSelection .otl-media-source-option{padding-inline:10px!important}
  #sectionNavigation #mediaSelection .otl-local-file-control{flex-wrap:wrap!important;gap:6px!important}
  #sectionNavigation #mediaSelection .otl-library-picker-controls [data-library-browse],
  #sectionNavigation #mediaSelection .otl-local-file-row > button{padding-inline:10px!important}
}

/* Centered Light names with matching rules. */
#sectionNavigation .section-nav-media-light-heading{justify-content:center;gap:14px;text-align:center}
#sectionNavigation .section-nav-media-light-dot{display:none}
#sectionNavigation .section-nav-media-light-heading::before,
#sectionNavigation .section-nav-media-light-heading::after{
  content:"";height:1px;flex:1;min-width:18px;background:rgba(var(--otl-pair-rgb),.6);
}
/* Top-layer pickers keep the scroll pane from cutting off their choices. */
#sectionNavigation #mediaSelection .nav-media-picker-popover{
  position:fixed!important;inset:auto!important;margin:0!important;box-sizing:border-box!important;
  overflow:auto!important;overscroll-behavior:contain;min-height:0!important;
  color:#e2e8f0;background:#0f172a;border:1px solid #475569;border-radius:12px;
  box-shadow:0 12px 32px #0006;
}
#sectionNavigation #mediaSelection .nav-media-picker-popover::backdrop{background:transparent;pointer-events:none}
#sectionNavigation #mediaSelection .nav-media-picker-popover button,
#sectionNavigation #mediaSelection .nav-media-picker-popover .otl-library-picker-heading{font-size:1rem!important}

/* Panels exist in HTML; choose one before account or setup scripts run. */
html[data-otl-section] #sectionNavigation .section-nav-stage > [data-section-panel]{display:none!important}
html[data-otl-section="guide"] #sectionNavigation .section-nav-stage > [data-section-panel="guide"]{display:block!important}
html[data-otl-section="media"] #sectionNavigation .section-nav-stage > [data-section-panel="media"]{display:grid!important}
html[data-otl-section="settings"] #sectionNavigation .section-nav-stage > [data-section-panel="settings"]{display:block!important}
html[data-otl-section="tasks"] #sectionNavigation .section-nav-stage > [data-section-panel="tasks"]{display:block!important}
html[data-otl-section="trainers"] #sectionNavigation .section-nav-stage > [data-section-panel="trainers"]{display:block!important}
html[data-otl-section="curated"] #sectionNavigation .section-nav-stage > [data-section-panel="curated"]{display:block!important}
html[data-otl-section="saved"] #sectionNavigation .section-nav-stage > [data-section-panel="saved"]{display:block!important}
html[data-otl-section="community"] #sectionNavigation .section-nav-stage > [data-section-panel="community"]{display:block!important}
html[data-otl-section="achievements"] #sectionNavigation .section-nav-stage > [data-section-panel="achievements"]{display:block!important}
html[data-otl-section="premium"] #sectionNavigation .section-nav-stage > [data-section-panel="premium"]{display:block!important}

#sectionNavigation .section-nav-dynamic{--otl-section-rgb:96,165,250;border-radius:22px;background:linear-gradient(120deg,rgba(var(--otl-section-rgb),.045),transparent 42%),linear-gradient(145deg,rgba(17,24,39,.96),rgba(15,23,42,.90));border:1px solid #60a5fa4d;overflow:hidden}
/* The full-height panel owns the surface; its shorter content stays transparent. */
#sectionNavigation .section-nav-dynamic > details{margin:0!important;min-height:100%;background:transparent!important;box-shadow:none!important;border:0!important}
#sectionNavigation .section-nav-dynamic > details > summary{pointer-events:none;cursor:default}
#sectionNavigation .section-nav-dynamic > details > summary .settings-summary-action{display:none!important}
#sectionNavigation .section-nav-dynamic > details > summary .otl-section-icon{background-color:#cbd5e1!important;filter:none!important}
.section-nav-loading{padding:28px;color:#94a3b8}
#sectionNavigation .section-nav-dynamic:has(>details)>.section-nav-loading{display:none}
#sectionNavigation .section-nav-stage>.section-nav-panel{scroll-margin-top:0}

html:not([data-otl-section]) #sectionNavigation .section-nav-stage > [data-section-panel="guide"]{display:block!important}

#sectionNavigation .section-nav-panel > summary > .settings-summary-action{display:none!important}

/* Yellow is selected with the normal next-light flow; one flat Chance control. */
#sectionNavigation .yellow-controls-grid{display:block!important;margin:0!important;padding:0!important;gap:0!important}
#sectionNavigation .yellow-chance-control{display:grid;grid-template-columns:1fr auto;gap:12px 16px;margin:0;padding:0;border:0;background:none;box-shadow:none}
#sectionNavigation .yellow-chance-control label,#sectionNavigation .yellow-chance-control output{font-size:1rem;font-weight:700;line-height:1.3;color:#cbd5e1}
#sectionNavigation .yellow-chance-control output{color:#fcd34d;font-variant-numeric:tabular-nums}
#sectionNavigation #yellowFrequencyInput{--otl-yellow-chance:15%;grid-column:1/-1;width:100%;margin:0;direction:ltr}
#sectionNavigation #yellowFrequencyInput::-webkit-slider-runnable-track{height:8px;background-origin:border-box;background-repeat:no-repeat;background-image:linear-gradient(to right,#eab308 0%,#eab308 var(--otl-yellow-chance),#334155 var(--otl-yellow-chance),#334155 100%)}
#sectionNavigation #yellowFrequencyInput::-webkit-slider-thumb{margin-top:-5.5px;border-color:#facc15}
#sectionNavigation #yellowFrequencyInput::-moz-range-track{height:8px;background-origin:border-box;background-repeat:no-repeat;background-image:linear-gradient(to right,#eab308 0%,#eab308 var(--otl-yellow-chance),#334155 var(--otl-yellow-chance),#334155 100%)}
#sectionNavigation #yellowFrequencyInput::-moz-range-progress{background:transparent}
#sectionNavigation #yellowFrequencyInput::-moz-range-thumb{border-color:#facc15}

/* Use the panel width, rather than the device width, for compact controls. */
#sectionNavigation :is(#eventsPanel,#trainerPanel) .otl-tier{grid-template-columns:minmax(0,1fr)!important}
@container(max-width:760px){
  #sectionNavigation #eventsPanel .event-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))!important}
  #sectionNavigation #trainerPanel .trainer-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))!important}
}
#sectionNavigation #trainerPanel .trainer-option{min-width:0}
#sectionNavigation #eventsPanel .event-setting > .inline-setting{min-width:0}
#sectionNavigation .otl-playback-short-replay-card{container-type:inline-size}
@container(max-width:500px){
  #sectionNavigation .otl-playback-short-replay-card .otl-short-replay-tier{grid-template-columns:minmax(0,1fr);gap:6px}
}
@container(max-width:620px){
  #sectionNavigation .audio-effects-setting .otl-afx-toolbar [role=tablist]{flex-wrap:wrap}
  #sectionNavigation .audio-effects-setting .otl-afx-toolbar [role=tab]{flex:1 0 auto;white-space:nowrap}
  #sectionNavigation .otl-fx-effect-head label{flex-wrap:wrap}
}
@container(max-width:520px){
  #sectionNavigation #otlTrainings .otl-training-primary-row{grid-template-areas:"name-label name identity" "actions actions actions"!important}
  #sectionNavigation #otlTrainings .otl-training-primary-actions>button{padding-inline:8px!important}
}
@container(max-width:360px){
  #sectionNavigation #mediaSelection .otl-media-source-header{grid-template-columns:minmax(0,1fr)!important;gap:8px!important}
  #sectionNavigation #mediaSelection .otl-media-source-switch{justify-self:start}
}

@container(max-width:620px){
  #sectionNavigation :is(#eventsPanel,#trainerPanel) .otl-tier-heading{flex-wrap:wrap}
  #sectionNavigation #eventsPanel .event-setting > .inline-setting:first-child{flex-wrap:wrap}
  #sectionNavigation #eventsPanel .event-setting > .inline-setting:first-child > strong{min-width:min-content}
}
@container(max-width:520px){
  #sectionNavigation #otlTrainings .otl-training-actions{display:grid!important;grid-template-columns:repeat(3,minmax(44px,1fr));gap:8px;overflow:visible;justify-content:stretch}
  #sectionNavigation #otlTrainings .otl-training-actions > button{width:100%!important;max-width:none!important}
}

@container(max-width:420px){
  #sectionNavigation #otlTrainings .otl-training-primary-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #sectionNavigation #otlTrainingCustomize{grid-column:1/-1}
  #sectionNavigation #metronomeOptions{grid-template-columns:minmax(0,1fr)}
}
#sectionNavigation .otl-audio-metronome-panel select{min-width:0;width:100%;max-width:100%}

/* Neither the desktop sidebar nor the sticky mobile selector belongs over playback. */
body.theater-mode #sectionNavigation { display: none !important; }