@font-face{font-family:Walsheim;src:url('assets/regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Walsheim;src:url('assets/medium.ttf') format('truetype');font-weight:600;font-display:swap}
:root{--pink:#ec66c7;--border:#a3a3a3;--muted:#c6c6c6;--hover:#e22baf;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:#000;color:var(--muted);font:400 17px/1.35 Walsheim,Arial,sans-serif;letter-spacing:-.01em}
button,input{font:inherit}
.page{max-width:1280px;padding:0 40px;margin:auto}
.site-header{display:flex;align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid #6a6a6a}
.bc-logo{width:200px;height:42px;object-fit:contain;object-position:left}
.site-header span{font-size:15px;margin-left:auto}
.ud-logo{width:94px;height:28px;object-fit:contain}
main{padding-top:32px}
.slider-intro{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:start;margin-bottom:32px}
h1{font-size:48px;line-height:1.08;font-weight:600;letter-spacing:-.01em;margin:0}
h1 em{font-style:normal;color:white}
.slider-intro p{font-size:20px;line-height:1.45;letter-spacing:-.02em;margin:3px 0 0;max-width:480px}
.preview{border:1px solid var(--border);border-radius:24px;overflow:hidden}
.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 32px}
h2{font-size:24px;line-height:1.3;letter-spacing:.01em;font-weight:600;margin:0;color:white}
.preview-heading>span,.actual-row,.hint,footer{font-size:15px;letter-spacing:0}
.scene{padding:20px 24px 24px;display:flex;flex-direction:column;align-items:center;gap:20px}
.slider-group{display:flex;align-items:center;gap:30px;max-width:100%}
.slider-arrows{display:flex;align-items:center;gap:8px;flex:none}
.indicator{--scale:3;position:relative;width:calc(144px * var(--scale));aspect-ratio:144/44;flex-shrink:1;min-width:0;isolation:isolate}
.indicator svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.indicator button{position:absolute;top:0;height:100%;width:16.6666667%;border:0;background:none;border-radius:8px;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.indicator button:focus-visible{outline:1px solid var(--pink);outline-offset:1px}
.arrow{background:none;border:2px solid white;border-radius:200px;width:44px;height:44px;flex:none;display:grid;place-items:center;padding:7px;cursor:pointer;transition:border-color .15s}
.arrow:hover{border-color:var(--hover)}
.arrow svg{width:24px;height:24px;fill:none;stroke:white;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hint{margin:0;text-align:center}
.actual-row{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px;padding:16px 32px;border-top:1px solid #6a6a6a}
.actual-row>span,.actual-row>output{flex:1}
.actual-row>output{text-align:right;white-space:nowrap}
.actual{--scale:1;flex:none}
.controls{display:flex;align-items:center;gap:28px;margin-top:24px;flex-wrap:wrap}
.controls p{font-size:15px;margin:0 0 0 auto}
.primary,.secondary{border-radius:200px;min-height:44px;font-size:16px;line-height:1;font-weight:600;letter-spacing:.02em;padding:14px 24px;cursor:pointer;transition:background .15s,border-color .15s}
.primary{color:black;background:white;border:2px solid transparent}
.primary:hover{background:var(--pink)}
.secondary{background:none;color:white;border:2px solid white}
.secondary:hover{border-color:var(--hover)}
.slow{display:flex;align-items:center;gap:10px;font-size:15px;cursor:pointer}
.slow input{accent-color:var(--pink);width:18px;height:18px;margin:0}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--pink);outline-offset:5px}
.review{margin-top:30px;font-size:15px}
.review summary{width:fit-content;cursor:pointer;color:var(--muted)}
.scrub{display:flex;align-items:center;gap:20px;padding:24px 0 0}
.scrub input{flex:1;accent-color:var(--pink);min-width:80px}
.scrub output{width:4ch;font-variant-numeric:tabular-nums}
footer{display:flex;justify-content:space-between;gap:24px;border-top:1px solid #6a6a6a;padding:24px 0;margin-top:36px}
footer a{color:white;text-decoration:underline;text-underline-offset:4px}
footer a:hover{color:var(--pink)}
@media(max-width:800px){.page{padding:0 24px}.site-header{padding:24px 0}.site-header span{display:none}.ud-logo{margin-left:auto}.slider-intro{grid-template-columns:1fr;gap:20px}h1{font-size:40px}.slider-intro p{max-width:560px}.indicator{--scale:2.2}.actual{--scale:1}.controls p{width:100%;margin:0}.scene{padding-top:28px;padding-bottom:32px}.slider-group{gap:20px}main{padding-top:36px}}
@media(max-width:520px){.page{padding:0 20px}.bc-logo{width:172px;height:36px}.ud-logo{width:76px}.slider-intro{margin-bottom:28px}h1{font-size:36px}.slider-intro p{font-size:20px}.preview-heading{padding:24px 20px;align-items:start;flex-direction:column;gap:6px}h2{font-size:20px}.preview-heading>span{font-size:13px}.scene{padding:12px 12px 28px;gap:18px}.indicator{--scale:1.5}.actual{--scale:1}.slider-group{gap:8px}.arrow{width:32px;height:32px;border-width:1px;padding:3px}.actual-row{padding:16px 20px;display:grid;grid-template-columns:1fr auto;gap:8px}.actual-row .actual{grid-row:2;grid-column:1/-1;justify-self:center}.actual-row output{grid-column:2;grid-row:1}.controls{gap:20px}.scrub{flex-wrap:wrap}.scrub label{width:100%}.scrub .secondary{width:100%}footer{flex-direction:column;gap:12px;font-size:13px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Study shell integration. */
.slider-study .site-header .back-link{flex:none;margin-left:0}
.slider-study .handoff{padding:32px;margin-bottom:0}
.slider-study .handoff h2{color:#c6c6c6;font-weight:600}
.slider-study .handoff h2 em{color:#fff;font-style:normal}
.slider-study .handoff h3{font-weight:600}
.slider-study .copy-button{font-weight:600}
.slider-study .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:800px){.slider-study .site-header .back-link{margin-left:auto}}
@media(max-width:520px){.slider-study .site-header{gap:16px}.slider-study .site-header .bc-logo{width:140px}.slider-study .site-header .back-link{font-size:14px;min-height:44px;padding:12px 16px}.slider-study .handoff{padding:24px}}