style.css

:root{--paper:#f7f4eb;--ink:#474c40;--muted:#888b7d;--rule:#dfdfd0;--accent:#737b65;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit;color:inherit}button{border:0;background:none;cursor:pointer}button:hover,a:hover{color:#242e1e}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:5px}a{color:inherit}header{height:66px;padding:0 4vw;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:24px;font-size:10px;letter-spacing:.13em}.wordmark{text-decoration:none;display:flex;gap:13px;font-size:11px}.wordmark span{color:var(--muted)}.study-label{margin-left:auto;color:var(--muted)}header button{border-left:1px solid var(--rule);padding-left:22px;font-size:11px}header button span{margin-left:12px}main{width:min(640px,calc(100% - 48px));margin:27px auto 25px}.title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.eyebrow{font-size:8px;letter-spacing:.17em;color:var(--muted);margin:0 0 8px}h1{font:normal 31px Georgia,"Times New Roman",serif;letter-spacing:-.02em;margin:0}.format{text-align:right;font-size:11px;letter-spacing:.15em}.format small{display:block;margin-top:7px;font-size:7px;color:var(--muted)}.stage{position:relative;aspect-ratio:1;width:100%;background:#000;overflow:hidden;isolation:isolate}#lotus{display:block;width:100%;height:100%;object-fit:contain}#lotus{filter:saturate(1.2) contrast(1.08);transform:translate(.5222222222%,-2%)}#film{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}.graded #film{opacity:1}.graded #lotus{opacity:0}#error{position:absolute;inset:0;margin:0;padding:20%;background:#000b;color:#fff;font-size:14px;line-height:1.6}#error:not([hidden]){display:grid;place-content:center}.transport{display:flex;align-items:center;gap:15px;height:48px;margin-top:3px}.transport button{font-size:23px;min-width:28px}.transport input{flex:1;min-width:0}.transport output{font-size:10px;font-variant-numeric:tabular-nums;color:var(--muted);min-width:64px;text-align:right}input[type=range]{appearance:none;height:3px;background:#d6d9cb;border-radius:2px;cursor:pointer;margin:0;width:100%}input[type=range]::-webkit-slider-thumb{appearance:none;width:9px;height:9px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 3px var(--paper)}input[type=range]::-moz-range-thumb{width:9px;height:9px;background:var(--accent);border:0;border-radius:50%}.adjustments{border-top:1px solid var(--rule);padding-top:17px;display:flex;align-items:center;gap:22px;font-size:10px}.look-control{width:140px}.look-control>span{display:flex;justify-content:space-between;margin-bottom:14px}.look-control output{color:var(--muted);font-variant-numeric:tabular-nums}.speed-control{display:flex;gap:8px;align-items:center}select{font-size:10px;border:1px solid var(--rule);border-radius:0;padding:6px;background:transparent}#reset{margin-left:auto;font-size:10px;text-decoration:underline;text-underline-offset:3px;color:var(--muted);padding:0}.caption{display:flex;justify-content:space-between;gap:12px;margin-top:24px;font-size:9px;color:var(--muted)}.caption>span:first-child{font:italic 13px Georgia,serif}footer{border-top:1px solid var(--rule);padding-top:16px;margin-top:24px;font-size:8px;color:var(--muted);display:flex;justify-content:space-between;gap:18px;line-height:1.8}footer a{text-decoration:none}footer a:hover{text-decoration:underline}kbd{font:inherit;border:1px solid var(--rule);padding:1px 3px}.separator{padding:0 5px}.focus-mode #controls,.focus-mode .title-row,.focus-mode footer{display:none}.focus-mode main{width:min(calc(100vh - 110px),calc(100% - 40px));margin-top:22px}.focus-mode .study-label{display:none}.focus-mode header button{margin-left:auto}[hidden]{display:none!important}
@media(min-height:1000px){main{width:min(700px,calc(100% - 48px));margin-top:34px}}
@media(max-width:620px){header{padding:0 20px;height:58px}.study-label{display:none}header button{margin-left:auto}main{width:calc(100% - 32px);margin-top:24px}.eyebrow{font-size:7px}h1{font-size:28px}.adjustments{gap:18px;flex-wrap:wrap}.look-control{flex:1;min-width:130px}.speed-control{margin-left:auto}#reset{margin-left:auto}.caption{flex-wrap:wrap}footer{flex-wrap:wrap;gap:8px}.focus-mode main{width:calc(100% - 24px)}}

.adjustments{flex-wrap:wrap}#export{font-size:10px;padding:7px 10px;border:1px solid var(--rule)}#export:disabled{opacity:.6;cursor:wait}

#stack-icons{opacity:0;position:absolute;left:50%;top:50%;width:13%;height:auto;transform:translate(-50%,-50%);pointer-events:none;user-select:none}

.fade-controls{border:0;border-top:1px solid var(--rule);margin:22px 0 0;padding:17px 0 0;min-width:0}.fade-controls legend{padding:0 12px 0 0;font:italic 13px Georgia,serif}.fade-controls legend output{font:10px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--muted);margin-left:12px;font-variant-numeric:tabular-nums}.fade-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.fade-grid label{font-size:10px}.fade-grid label>span{display:flex;justify-content:space-between;margin-bottom:15px}.fade-grid output{color:var(--muted);font-variant-numeric:tabular-nums}.fade-controls p{font-size:9px;color:var(--muted);margin:15px 0 0;line-height:1.5}@media(max-width:480px){.fade-grid{gap:16px}.fade-grid label{font-size:9px}}
.music-controls legend>span{font:9px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--muted);margin-left:8px}.music-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;align-items:center}.music-grid label{font-size:10px}.music-grid label>span{display:flex;justify-content:space-between;margin-bottom:15px}.music-grid output{color:var(--muted);font-variant-numeric:tabular-nums}#music-play{border:1px solid var(--rule);font-size:10px;padding:10px 8px}#music-status{display:block;margin-top:5px;color:var(--ink)}@media(max-width:480px){.music-grid{gap:16px}.music-controls legend>span{display:block;margin:5px 0 0}}
.icon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}