:root{color-scheme:dark;--ink:#f4f6f5;--muted:#b6c0c2;--accent:#b7dedd;--paper:#0c1217;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;font-size:16px}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000;color:var(--ink)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button:disabled{opacity:.4;cursor:wait}button{color:inherit}button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
#montage,#stage,#shade,#blackout,.frame{position:absolute;inset:0}#montage{isolation:isolate;background:#000}#stage{overflow:hidden}.frame{display:flex;opacity:0;will-change:opacity;overflow:hidden;background:#000}.frame .photo{flex:1;min-width:0;position:relative;overflow:hidden;background:#05090c}.frame img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform;transform-origin:center center}.frame.diptych{gap:10px;padding:0 10px}.frame.diptych .photo{height:100%}.frame.contain img{object-fit:contain}.frame img.failed{opacity:0}
#shade{background:linear-gradient(90deg,rgba(1,8,14,.53),rgba(0,0,0,.04) 75%),linear-gradient(0deg,rgba(0,0,0,.5),transparent 45%);opacity:0;transition:opacity .8s;pointer-events:none}.idle #shade{opacity:1}#blackout{background:#000;opacity:0;pointer-events:none;z-index:4}#welcome{position:absolute;left:7.2vw;bottom:18vh;z-index:5;transition:opacity .65s,transform .65s}.started #welcome{opacity:0;transform:translateY(-12px);pointer-events:none}.course{font-size:.85rem;letter-spacing:.2em;font-weight:550;margin:0 0 14px;text-transform:uppercase;color:#dae5e8}h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.04em;line-height:1.04;font-size:clamp(76px,12.8vw,200px);margin:0 0 26px}.music-credit p{margin:0;line-height:1.55;font-size:clamp(17px,1.8vw,24px);font-weight:400}.music-credit p+p{font-size:clamp(15px,1.25vw,18px);color:#d2dadb}.start-button{margin-top:32px;padding:15px 24px;display:flex;align-items:center;gap:12px;border:0;border-radius:3px;background:#f3f6f5;color:#13212a;font-weight:550;box-shadow:0 4px 22px #0002}.start-button:hover{background:#d5e9e8}.start-button svg{fill:currentColor;stroke:none;width:19px;height:19px}.welcome-hint{font-size:.8rem;color:#d1dadc;margin-top:20px}.welcome-hint span{margin-left:22px}
#caption{position:absolute;left:4vw;bottom:5vh;z-index:3;max-width:75vw;text-shadow:0 2px 8px #000;opacity:0;transition:opacity .25s;pointer-events:none}.show-captions:not(.idle):not(.finished) #caption{opacity:1}.controls-visible.show-captions #caption{bottom:120px}#caption p{margin:0;line-height:1.55}#caption-place{font-size:clamp(18px,1.8vw,26px);font-weight:550}#caption-date{font-size:15px;color:#e0e7e7}
#controls{position:absolute;bottom:0;left:0;right:0;padding:36px 3vw 22px;background:linear-gradient(0deg,rgba(0,0,0,.86),rgba(0,0,0,.52) 65%,transparent);z-index:8;opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s;pointer-events:none}.controls-visible #controls,#controls:focus-within{opacity:1;transform:none;pointer-events:auto}.idle #controls .timeline-wrap{opacity:.45}.timeline-wrap{height:20px;display:flex;align-items:center}input[type=range]{appearance:none;-webkit-appearance:none;height:3px;border-radius:4px;background:#ffffff45;accent-color:var(--accent);cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff}input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}#timeline{width:100%;margin:0;padding:0;background:linear-gradient(to right,var(--accent) var(--progress,0%),#ffffff40 var(--progress,0%))}.control-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:9px}.control-group{display:flex;align-items:center;gap:12px;min-width:0}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:40px;background:none;border:0;border-radius:3px;flex-shrink:0;padding:6px}.icon-button:hover,.text-button:hover{background:#ffffff18}.time{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:14px;color:#eef3f3}.shot-count{font-size:13px;color:#c2cbce;margin-left:5px;white-space:nowrap}.text-button{height:38px;padding:8px 10px;border:0;background:none;border-radius:3px;font-size:14px}.text-button[aria-pressed=true]{color:var(--accent);background:#b7dedd20}.finish-button{font-size:14px;white-space:nowrap;background:#f3f6f5;color:#17252d;border:0;border-radius:3px;padding:11px 15px;font-weight:550}.finish-button:hover{background:#d5e9e8}.volume-wrap{display:flex;align-items:center;gap:8px;margin-right:10px}.volume-wrap svg{width:20px;height:20px;stroke:#fff;stroke-width:1.7;fill:none;stroke-linejoin:round}.volume-wrap input{width:68px}
#message{position:absolute;top:5vh;left:50%;transform:translateX(-50%);padding:10px 16px;border-radius:4px;background:#070c10c9;color:#fff;font-size:15px;z-index:12;opacity:0;transition:opacity .2s;pointer-events:none;max-width:85vw;text-align:center}#message.visible{opacity:1}.playing:not(.controls-visible){cursor:none}.playing:not(.controls-visible) #controls{cursor:default}
#source-panel{position:absolute;top:0;bottom:0;right:0;width:min(560px,100vw);z-index:20;background:rgba(9,16,22,.98);border-left:1px solid #ffffff22;overflow:auto;padding:30px 28px;box-shadow:-20px 0 90px #0005;cursor:auto}#source-panel[hidden]{display:none}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.panel-heading .course{font-size:12px;margin-bottom:10px}.panel-heading h2{font-family:Georgia,"Times New Roman",serif;font-size:30px;font-weight:400;margin:0}.panel-intro,.panel-footer{font-size:14px;line-height:1.65;color:#b8c5cc}.panel-intro{margin:20px 0}.panel-music{display:flex;flex-direction:column;gap:5px;font-size:14px;padding:18px 0;border-top:1px solid #ffffff22;border-bottom:1px solid #ffffff22}.panel-music span{color:#bac7ce}#source-list{list-style:none;padding:0;margin:0}#source-list li{padding:20px 0;border-bottom:1px solid #ffffff1a}#source-list li.current{border-left:2px solid var(--accent);padding-left:12px}.source-jump{border:0;background:transparent;padding:0;text-align:left;display:flex;width:100%;align-items:flex-start;gap:15px}.source-jump img{width:95px;height:62px;object-fit:cover;border-radius:2px}.source-jump span{font-size:15px;line-height:1.4}.source-jump time{display:block;font-size:12px;color:var(--accent);margin:0 0 5px;font-variant-numeric:tabular-nums}.source-details{padding:10px 0 0 110px;font-size:12px;line-height:1.6;color:#a8b7be}.source-details p{margin:2px 0}.source-details a{color:#d4e4e8;text-decoration:underline;text-underline-offset:3px;margin-right:12px}.panel-footer{padding-top:20px}
@media(min-width:1800px){:root{font-size:19px}.icon-button{width:46px;height:46px}.icon-button svg{width:27px;height:27px}.text-button,.finish-button,.time{font-size:16px}.shot-count{font-size:15px}#caption-date{font-size:17px}}
@media(max-width:1000px){.shot-count,.volume-wrap{display:none}.control-group{gap:6px}.control-row{gap:8px}#controls{padding:28px 20px 14px}.text-button,.finish-button{font-size:13px}.source-details{padding-left:0}}
@media(max-width:680px){#welcome{left:8vw;bottom:25vh}.welcome-hint span{display:block;margin:6px 0 0}.control-row{flex-wrap:wrap}.main-controls{flex:1}.auxiliary-controls{justify-content:flex-end;flex:1}.secondary,.time{display:none}.text-button{padding:6px}.finish-button{padding:10px}.icon-button{width:32px}.frame.diptych{gap:5px;padding:0 5px}#caption{max-width:85vw}#caption-place{font-size:18px}#caption-date{font-size:13px}#source-panel{padding:22px}.panel-heading h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}#welcome,#controls,#caption,#message{transition:none}.frame img{will-change:auto}}