/* YoYo Vibes action palette and precision video study deck. */
:root{
 --paper:#f7f5ef;--ink:#101114;--muted:#5f626b;--line:#cfd0ca;
 --blue:#1649ff;--blue-hover:#0b34c8;--orange:#ff5a1f;--orange-hover:#e8460a;
 --coral:#e61e3a;--vermilion:#e61e3a;--pale:#e9edff;--ground:#eeede7;
 --warning:#c61832;--selection:#ffd0bf;--footer-ink:#08090b;--inverse-muted:#a9abb2;
}
html{scrollbar-color:var(--orange) var(--paper)}
::selection{background:var(--selection);color:var(--ink)}
input,textarea{caret-color:var(--orange)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline-color:var(--orange)}

/* Orange owns action. Blue owns navigation and active learning state. Red stays urgent. */
.btn{background:var(--orange);color:var(--ink)}
.btn:hover{background:var(--orange-hover);color:var(--ink)}
.btn.secondary{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn.secondary:hover{background:var(--ink);color:#fff}
.site-nav .btn,.mobile-account-link{background:var(--orange);color:var(--ink)}
.site-nav .btn:hover,.mobile-account-link:hover{background:var(--orange-hover);color:var(--ink)}
.home-search-line .btn{border-color:var(--orange);background:var(--orange);color:var(--ink)}
.home-search-line .btn:hover{background:var(--orange-hover);color:var(--ink)}
.brand-hero-actions a:first-child{background:var(--orange);color:var(--ink)}
.brand-hero-actions a:first-child:hover{background:var(--orange-hover)}
.newsletter-fields .btn,.mobile-filter-done{background:var(--orange);color:var(--ink)}
.newsletter-fields .btn:hover,.mobile-filter-done:hover{background:var(--orange-hover);color:var(--ink)}

/* The video stays wide; its controls read as one centered console. */
.tutorial-video{min-width:0;margin:32px 0 46px;overflow:hidden;border:1px solid var(--line);background:var(--paper);color:var(--ink)}
#main.wrap:has(.tutorial-video){width:min(1920px,calc(100% - 2*var(--yv-gutter)))}
#main.wrap:has(.tutorial-video) :is(.editorial-reader,.source-reader,.competition-detail){max-width:none!important}
#main.wrap:has(.tutorial-video) .yoyo-detail>.tutorial-video{width:min(1920px,calc(100vw - 2*var(--yv-gutter)));margin-left:50%;transform:translateX(-50%)}
.tutorial-video-frame{position:relative;width:100%;min-width:0;aspect-ratio:16/9;overflow:hidden;background:var(--footer-ink)}
.tutorial-video[data-video-layout=tall] .tutorial-video-frame{width:min(100%,520px);aspect-ratio:9/16;margin-inline:auto}
.tutorial-video-frame .youtube-mount,.tutorial-video-frame iframe{display:block;width:100%;height:100%;border:0}
.tutorial-video-frame iframe{transform:rotate(var(--video-rotation,0deg))}
.tutorial-video-panel{min-width:0;background:var(--paper);color:var(--ink)}
.tutorial-console{width:min(1120px,calc(100% - 48px));margin:0 auto;padding:22px 0 8px}
.tutorial-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tutorial-titlebar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 0 18px}
.tutorial-title-copy{min-width:0}
.tutorial-titlebar h2{max-width:46ch;margin:0;font:700 clamp(1.35rem,1.9vw,1.85rem)/1.13 var(--display);letter-spacing:-.025em;overflow-wrap:anywhere}
.tutorial-video-byline{display:flex;align-items:baseline;gap:4px 18px;flex-wrap:wrap;margin-top:7px;font-size:.82rem;line-height:1.35}
.tutorial-video-meta{color:var(--muted)}
.tutorial-video-source{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.tutorial-video-source:hover{color:var(--blue-hover)}
.tutorial-title-actions{display:flex;gap:8px;flex:none}
.tutorial-title-actions button{display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid var(--line);border-radius:5px;background:var(--white);color:var(--ink);cursor:pointer}
.tutorial-title-actions .tutorial-save{display:inline-flex;gap:7px;width:auto;padding:0 12px;font:700 .82rem/1 var(--body);white-space:nowrap}
.tutorial-title-actions button:hover{border-color:var(--blue);color:var(--blue)}
.tutorial-title-actions svg,.tutorial-bookmarks svg,.tutorial-loop svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tutorial-save-status{margin:0;color:var(--ink);font-size:.82rem}
.tutorial-save-status:not(:empty){padding:0 0 12px}

/* Play and seeking are the only large controls. */
.tutorial-transport{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:18px;padding:14px 18px;border:1px solid var(--line);border-radius:10px;background:var(--ground)}
.tutorial-play{display:grid;place-items:center;width:54px;height:54px;padding:0;border:0;border-radius:5px;background:var(--orange);color:#101114;cursor:pointer}
.tutorial-play:hover:not(:disabled){background:var(--orange-hover)}
.tutorial-play:disabled{opacity:.55;cursor:wait}
.tutorial-play svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tutorial-play svg path[d^="m8.5"]{fill:currentColor;stroke:none}
.tutorial-scrubber{min-width:0}
.tutorial-scrubber-time{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.78rem;font-weight:700}
.tutorial-scrubber output{color:var(--ink);font-size:.95rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.tutorial-scrubber input{display:block;width:100%;height:29px;margin:2px 0 0;padding:0;appearance:none;background:transparent;cursor:pointer}
.tutorial-scrubber input::-webkit-slider-runnable-track{height:7px;border-radius:8px;background:linear-gradient(90deg,var(--blue),var(--blue)) 0/var(--seek-progress,0%) 100% no-repeat,var(--line)}
.tutorial-scrubber input::-moz-range-track{height:7px;border-radius:8px;background:var(--line)}
.tutorial-scrubber input::-moz-range-progress{height:7px;border-radius:8px;background:var(--blue-action,var(--blue))}
.tutorial-scrubber input::-webkit-slider-thumb{width:20px;height:20px;margin-top:-6.5px;appearance:none;border:3px solid var(--paper);border-radius:50%;background:var(--blue-action,var(--blue));box-shadow:0 0 0 1px var(--ink)}
.tutorial-scrubber input::-moz-range-thumb{width:14px;height:14px;border:3px solid var(--paper);border-radius:50%;background:var(--blue-action,var(--blue));box-shadow:0 0 0 1px var(--ink)}
.tutorial-video-status{margin:0;color:var(--warning);font-size:.82rem}
.tutorial-video-status:not(:empty){padding:10px 0 0}

/* Every study tool lives in one responsive control bar. */
.tutorial-quickbar{display:grid;grid-template-columns:repeat(6,max-content);justify-content:space-between;align-items:start;gap:16px 10px;padding:21px 0 18px;border-bottom:1px solid var(--line)}
.tutorial-quickbar h3,.tutorial-quickbar legend{margin:0 0 9px;padding:0;color:var(--muted);font:700 .82rem/1.2 var(--body)}
.tutorial-quickbar fieldset{min-width:0;margin:0;padding:0;border:0}
.tutorial-quickbar fieldset>div,.tutorial-steps,.tutorial-loop-controls,.tutorial-layout>div{display:flex;gap:5px}
.tutorial-quickbar button{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-height:44px;padding:9px 12px;border:1px solid var(--line);border-radius:5px;background:var(--white);color:var(--ink);font:700 .8rem/1 var(--body);white-space:nowrap;cursor:pointer}
.tutorial-quickbar button:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
.tutorial-quickbar button:disabled{opacity:.48;cursor:not-allowed}
.tutorial-quickbar button.is-active,.tutorial-quickbar button.is-active:hover{border-color:var(--blue-action,var(--blue));background:var(--blue-action,var(--blue));color:#fff}
.tutorial-step-zone .tutorial-steps button{min-width:71px}
.tutorial-steps svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tutorial-speed button{min-width:52px}
.tutorial-loop{min-width:0}
.tutorial-loop-controls button:not(:last-child){min-width:68px}
.tutorial-loop-controls button:last-child{width:44px;padding:0}
.tutorial-loop [data-loop-status]{display:block;max-width:24ch;margin-top:6px;color:var(--muted);font-size:.72rem;line-height:1.3}
.tutorial-loop [data-loop-status][hidden]{display:none}
.tutorial-bookmarks{min-width:0}
.tutorial-bookmarks button{gap:7px}
.tutorial-moment-actions{display:flex;align-items:start;gap:5px}
.tutorial-moment-actions [data-bookmark-add]{min-width:74px}
.tutorial-moment-menu summary{display:flex;align-items:center;justify-content:center;gap:3px;min-height:44px;padding:9px 10px;border:1px solid var(--line);border-radius:5px;background:var(--white);color:var(--ink);font:700 .8rem/1 var(--body);list-style:none;cursor:pointer}
.tutorial-moment-menu summary::-webkit-details-marker{display:none}
.tutorial-moment-menu summary:hover{border-color:var(--blue);color:var(--blue)}
.tutorial-moment-menu summary span{color:var(--muted);font-variant-numeric:tabular-nums}
.tutorial-moment-menu [data-bookmark-list]{display:grid;gap:5px;max-height:180px;min-width:160px;padding:8px 0;overflow-y:auto}
.tutorial-moment-menu [data-bookmark-list]>span{color:var(--muted);font-size:.76rem;line-height:1.35}
.tutorial-moment-menu [data-bookmark]{justify-content:flex-start;width:100%;text-align:left}
.tutorial-moment-menu [data-bookmark] span{color:var(--blue);font-variant-numeric:tabular-nums}
.tutorial-moment-form{display:flex;align-items:center;gap:9px;padding:14px 0;border-bottom:1px solid var(--line)}
.tutorial-moment-form[hidden]{display:none}
.tutorial-moment-form label{flex:none;font-size:.82rem;font-weight:700}
.tutorial-moment-form output{font-variant-numeric:tabular-nums}
.tutorial-moment-form input{flex:1;min-width:0;min-height:44px;padding:9px 11px;border:1px solid var(--line);border-radius:5px;background:var(--white);color:var(--ink);font:inherit}
.tutorial-moment-form button{min-height:44px;padding:9px 13px;border:1px solid var(--line);border-radius:5px;background:var(--white);color:var(--ink);font:700 .82rem/1 var(--body);cursor:pointer}
.tutorial-moment-form button[type=submit]{border-color:var(--orange);background:var(--orange);color:#101114}
.tutorial-moment-form button:hover{border-color:var(--blue)}

.tutorial-frame-pair h3{display:flex;align-items:center;gap:7px}
.tutorial-frame-pair .tutorial-steps button{width:44px;padding:8px}
.tutorial-layout button{min-width:52px;padding-inline:8px}
.tutorial-video button:focus-visible,.tutorial-video input:focus-visible,.tutorial-video a:focus-visible,.tutorial-moment-menu summary:focus-visible{outline:3px solid var(--orange);outline-offset:3px}


@media(max-width:1100px){
 .tutorial-quickbar{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 16px}
}
@media(max-width:760px){
 #main.wrap:has(.tutorial-video) .yoyo-detail>.tutorial-video{width:100vw}
 .editorial-reader .tutorial-video,.source-reader>.tutorial-video,.competition-detail>.tutorial-video{margin:0 -16px 30px}
 .tutorial-video{border-right:0;border-left:0}
 .tutorial-console{width:calc(100% - 32px);padding-top:17px}
 .tutorial-titlebar{align-items:flex-start;gap:12px;padding-bottom:15px}
 .tutorial-titlebar h2{font-size:1.2rem}
 .tutorial-video-byline{font-size:.76rem}
 .tutorial-title-actions{gap:5px}
 .tutorial-title-actions button{width:44px;height:44px}
 .tutorial-title-actions .tutorial-save{width:auto;padding:0 9px;font-size:.76rem}
 .tutorial-transport{grid-template-columns:48px minmax(0,1fr);gap:12px;padding:10px 12px}
 .tutorial-play{width:48px;height:48px}
 .tutorial-scrubber-time>span{display:none}
 .tutorial-scrubber output{font-size:.82rem}
 .tutorial-quickbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px;padding:18px 0}
 .tutorial-quickbar button{padding:8px 7px}
 .tutorial-step-zone .tutorial-steps button{min-width:0;flex:1}
 .tutorial-speed button{min-width:0;flex:1}
 .tutorial-loop{grid-column:auto}
 .tutorial-loop-controls button:not(:last-child){min-width:52px;padding-inline:8px}
 .tutorial-bookmarks{grid-column:auto}
 .tutorial-moment-actions{flex-wrap:wrap}
 .tutorial-moment-form{flex-wrap:wrap}
 .tutorial-moment-form label{width:100%}
 .tutorial-moment-form input{flex-basis:100%}
 .tutorial-moment-form button{flex:1}
}
@media(max-width:380px){.tutorial-titlebar h2{font-size:1.08rem}.tutorial-video-byline{gap:3px 10px}.tutorial-loop{grid-column:1/-1}.tutorial-layout button{min-width:42px;padding-inline:5px}}
@media(prefers-reduced-motion:reduce){.tutorial-video *{scroll-behavior:auto;transition:none!important}}
@media print{.tutorial-video{display:none}}