.question-content{padding-top:clamp(10px,2.5svh,24px)}
.question-screen{position:relative}
.question-meta{display:flex;align-items:center;justify-content:center;gap:22px;padding-top:clamp(12px,3svh,27px)}
.question-meta .category{padding-top:0}
.question-sketch{position:relative;color:var(--blue);font:400 9px "Space Mono",monospace;letter-spacing:.15em;transform:rotate(-1.5deg)}
.question-content>h1{max-width:650px;font-size:clamp(27px,3vw,37px);line-height:1.2}
.question-screen:has(#revealPanel:not([hidden])) .question-content{padding-top:8px}
.question-screen:has(#revealPanel:not([hidden])) .question-content>h1{max-width:600px;font-size:clamp(23px,2.5vw,31px);line-height:1.16}
.guess-panel{padding-top:clamp(24px,5svh,52px)}
.guess-panel label{margin-bottom:clamp(12px,2svh,20px)}
.guess-control .number-entry{margin-bottom:clamp(24px,4svh,38px)}
.reveal-panel{padding-top:clamp(34px,5svh,46px);animation:none}
.reveal-panel .comparison-line{height:160px}
.reveal-panel .comparison-line .line-rule{top:102px}
.reveal-panel .comparison-line .line-marker{top:102px}
.reveal-panel .comparison-line .label-upper{top:0}
.reveal-panel .comparison-line .label-above{top:48px}
.reveal-panel .comparison-line .label-below{top:120px}
.reveal-panel .comparison-line .comparison-label{z-index:3;padding-inline:5px;background:var(--paper)}
.reveal-panel .comparison-line .line-rule{z-index:0}
.reveal-panel .comparison-line .line-marker{z-index:1;animation:result-marker-slide 2s cubic-bezier(.22,1,.36,1) both}
.reveal-panel .comparison-line .average-marker{top:43px;height:59px}
.reveal-panel .comparison-line .player-marker{top:88px;height:14px}
.reveal-panel #averageSummary,.reveal-panel #guessSummary,.reveal-panel #answerSummary{animation:result-label-in .25s ease 2s both}
.reveal-panel #averageSummary{color:var(--yellow)}
.reveal-panel #answerSummary{color:var(--ink)}
.reveal-panel .average-marker{background:var(--yellow)}
.reveal-panel .answer-marker{background:var(--ink)}
.reveal-panel .accuracy{margin-top:clamp(20px,3svh,30px)}
.reveal-panel .fact{margin-bottom:clamp(18px,3svh,28px)}
.reveal-panel .next-action{display:block;margin:0 auto clamp(13px,2svh,18px)}
.reveal-panel .source-link{display:inline-block;font-size:8px;letter-spacing:.14em;text-underline-offset:5px}
.reveal-panel .source-meta{margin-top:8px;font-size:8px}
.guess-panel>.text-action,.reveal-panel .next-action{position:absolute;z-index:4;left:50%;bottom:clamp(105px,16svh,135px);margin:0;transform:translateX(-50%)}
.reveal-panel .source-link{position:absolute;left:50%;bottom:clamp(67px,10svh,84px);transform:translateX(-50%);white-space:nowrap}
.reveal-panel .source-meta{position:absolute;left:50%;bottom:clamp(43px,6svh,55px);width:100%;margin:0;transform:translateX(-50%)}
.comparison-line .line-rule{height:1px;border:0;background:linear-gradient(90deg,transparent 0%,rgba(65,105,232,.36) 10%,var(--blue) 28%,var(--blue) 72%,rgba(65,105,232,.36) 90%,transparent 100%)}

.magic-slider{position:relative;width:min(100%,650px);height:34px;margin:0 auto clamp(30px,8svh,72px)}
.magic-slider svg{position:absolute;z-index:0;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--blue);stroke-linecap:round;pointer-events:none;opacity:.78;transition:opacity .25s ease;-webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent)}
.magic-slider .magic-line-main{fill:none;stroke-width:1.25;vector-effect:non-scaling-stroke}
.magic-slider .magic-line-echo{fill:none;stroke-width:.55;stroke-dasharray:5 12;opacity:.38;vector-effect:non-scaling-stroke;animation:daily-line-drift 9s linear infinite}
.daily-magic-orb{position:absolute;z-index:2;left:50%;top:50%;width:11px;height:11px;border:1.5px solid var(--blue);border-radius:50%;background:var(--paper);transform:translate(-50%,-50%);pointer-events:none;transition:width .2s ease,height .2s ease,background .3s ease}
.magic-slider:hover .daily-magic-orb,.magic-slider:focus-within .daily-magic-orb{width:17px;height:17px}
.magic-slider.is-dragging .daily-magic-orb{width:21px;height:21px;background:color-mix(in srgb,var(--paper) 88%,var(--blue))}
.magic-slider:hover .magic-line-main,.magic-slider:focus-within .magic-line-main,.magic-slider.is-dragging .magic-line-main{stroke-width:1.7}
.magic-slider.is-dragging .magic-line-echo{opacity:.7;animation-duration:3s}
.magic-trail{position:absolute;z-index:1;width:3px;height:3px;border:1px solid var(--blue);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;animation:magic-trail-fade .65s ease-out forwards}
.range-limit{position:absolute;top:33px;color:var(--muted);font:400 11px "Space Mono",monospace;letter-spacing:.1em;pointer-events:none}
.range-limit::before{content:"";position:absolute;top:-17px;width:1px;height:10px;background:rgba(65,105,232,.62)}
.range-min{left:0}.range-min::before{left:0}
.range-max{right:0}.range-max::before{right:0}
.page-shell .guess-control .guess-slider{position:absolute;z-index:3;inset:0;width:100%;height:34px;margin:0;opacity:.001;cursor:grab}
.page-shell .guess-control .guess-slider:active{cursor:grabbing}
.page-shell .guess-control .guess-slider::-webkit-slider-runnable-track{
 height:1px;
 background:transparent;
}
.page-shell .guess-control .guess-slider::-moz-range-track{
 height:1px;
 background:transparent;
}
@keyframes daily-line-drift{to{stroke-dashoffset:-68}}
@keyframes magic-trail-fade{to{opacity:0;transform:translate(-50%,-50%) scale(2.2)}}
@keyframes result-marker-slide{from{left:50%;opacity:.25}to{opacity:1}}
@keyframes result-label-in{from{opacity:0}to{opacity:1}}
@media(max-width:600px){.question-meta{gap:16px}.question-sketch{font-size:8px}.question-sketch::before{inset:-6px -9px}.guess-panel>.text-action,.reveal-panel .next-action{bottom:95px}.reveal-panel .source-link{bottom:58px}.reveal-panel .source-meta{bottom:35px}}
@media(prefers-reduced-motion:reduce){.magic-line-echo{animation:none}}

@media(max-height:720px){.question-content>h1{font-size:28px}.guess-panel{padding-top:22px}}
@media(max-height:720px){.reveal-panel{padding-top:24px}.reveal-panel .comparison-line{height:145px}.reveal-panel .comparison-line .line-rule,.reveal-panel .comparison-line .line-marker{top:92px}.reveal-panel .comparison-line .label-upper{top:-4px}.reveal-panel .comparison-line .label-above{top:40px}.reveal-panel .comparison-line .label-below{top:108px}.reveal-panel .comparison-line .average-marker{top:37px;height:55px}.reveal-panel .comparison-line .player-marker{top:80px;height:12px}}
@media(max-width:600px){.question-content>h1{font-size:clamp(24px,7vw,29px)}.guess-panel{padding-top:clamp(22px,4svh,38px)}}