:root {color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;background:#101216;color:#f7f8fa;}
* {box-sizing:border-box;}
body {margin:0;overflow:hidden;width:100vw;height:100vh;height:100dvh;display:grid;place-items:center;touch-action:pan-y;}
#stage {position:relative;width:min(100vw,177.77778vh);width:min(100vw,177.77778dvh);aspect-ratio:16/9;overflow:hidden;outline:none;background:white;}
#backdrop {position:absolute;width:100%;height:100%;inset:0;object-fit:contain;user-select:none;-webkit-user-drag:none;}
#motion,#film,#chart {position:absolute;overflow:hidden;}
#chart {object-fit:fill;}
#motion svg {display:block;width:100%;height:100%;}
#film {object-fit:contain;background:transparent;}
[hidden] {display:none !important;}
#controls {position:fixed;z-index:10;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:6px 8px;background:rgba(24,26,30,.88);border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:0 8px 30px #0003;backdrop-filter:blur(18px);transition:opacity .18s;white-space:nowrap;}
body.idle #controls {opacity:0;pointer-events:none;}
body.idle {cursor:none;}
#controls:focus-within {opacity:1;pointer-events:auto;}
button,a {font:inherit;}
button {background:transparent;border:0;color:inherit;border-radius:8px;padding:9px 13px;cursor:pointer;font-size:14px;line-height:1.2;}
button:hover {background:#ffffff18;}
button:focus-visible,a:focus-visible {outline:2px solid #95d5ba;outline-offset:3px;}
button:disabled {opacity:.3;cursor:default;}
.divider {height:22px;width:1px;background:#ffffff25;margin:0 3px;}
#counter {font-variant-numeric:tabular-nums;}
dialog {width:min(1160px,94vw);max-height:90vh;max-height:90dvh;background:#1b1d22;border:1px solid #ffffff26;border-radius:20px;color:#f7f8fa;padding:26px;box-shadow:0 20px 100px #0008;}
dialog::backdrop {background:#050609b8;backdrop-filter:blur(8px);}
.dialog-header {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px;}
h1 {font-size:25px;font-weight:600;letter-spacing:-.5px;margin:0;}
#slide-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:18px;}
.slide-choice {text-align:left;padding:0 0 8px;overflow:hidden;border-radius:8px;border:2px solid transparent;}
.slide-choice[aria-current=true] {border-color:#78d1ac;}
.slide-choice img {width:100%;aspect-ratio:16/9;display:block;}
.slide-choice span {display:block;padding:10px 10px 0;font-size:13px;line-height:1.4;}
#help {width:min(580px,92vw);}
dt {font-size:14px;color:#c6cbd2;margin-top:18px;}
dd {margin:5px 0 0;font-size:17px;}
#help p {font-size:15px;line-height:1.6;color:#c6cbd2;margin-top:24px;}
#help a {display:inline-block;color:#9cdbbe;padding:6px 0;}
.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:600px) {#controls {gap:0;padding:4px;}button {font-size:12px;padding:9px 8px;}#help-button{display:none;}dialog{padding:18px;}#slide-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}