:root { color-scheme: dark; --paper:#e8e2d5; --ink:#131716; --muted:#8e928b; --line:rgba(232,226,213,.18); --accent:#eabf72; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; background:#101413; color:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 22%,#2b332f 0,transparent 38%),linear-gradient(115deg,rgba(234,191,114,.06),transparent 35%); }
.shell { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:34px 0 22px; position:relative; }
header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:18px; }
.eyebrow { margin:0 0 6px; color:var(--accent); font:600 11px/1.2 ui-monospace,SFMono-Regular,monospace; letter-spacing:.18em; text-transform:uppercase; }
h1 { margin:0; font:400 clamp(30px,4vw,56px)/.95 Georgia,serif; letter-spacing:-.035em; }
.hint { margin:0 0 4px; color:var(--muted); font-size:13px; }
.touch { display:none; }
.filmstrip { display:flex; gap:10px; margin:0 0 12px; overflow-x:auto; scrollbar-width:thin; padding:1px; }
.thumb { flex:0 0 158px; display:grid; grid-template-columns:54px 1fr; align-items:center; gap:10px; padding:5px; border:1px solid var(--line); background:rgba(255,255,255,.025); color:var(--muted); text-align:left; cursor:pointer; transition:border-color .2s,background .2s,color .2s; }
.thumb img { width:54px; height:40px; object-fit:cover; filter:saturate(.62); }
.thumb span { font-size:11px; line-height:1.25; }
.thumb b { display:block; margin-bottom:2px; color:#686e69; font:10px ui-monospace,SFMono-Regular,monospace; }
.thumb:hover,.thumb:focus-visible { border-color:rgba(234,191,114,.55); outline:none; }
.thumb.active { color:var(--paper); border-color:var(--accent); background:rgba(234,191,114,.08); }
.thumb.active img { filter:none; }
.thumb.active b { color:var(--accent); }
.viewer { position:relative; width:100%; aspect-ratio:1188/950; max-height:68vh; border:1px solid var(--line); background:#090c0b; overflow:hidden; cursor:grab; touch-action:none; box-shadow:0 30px 70px rgba(0,0,0,.35); user-select:none; transition:aspect-ratio .25s; }
.viewer:active { cursor:grabbing; }
canvas { display:block; width:100%; height:100%; }
.frame-corners::before,.frame-corners::after { content:""; position:absolute; width:42px; height:42px; border-color:rgba(255,255,255,.55); pointer-events:none; }
.frame-corners::before { left:12px; top:12px; border-left:1px solid; border-top:1px solid; }
.frame-corners::after { right:12px; bottom:12px; border-right:1px solid; border-bottom:1px solid; }
.loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; background:#090c0b; color:var(--muted); font-size:13px; letter-spacing:.04em; transition:opacity .5s; }
.loading span { width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 1s infinite alternate; }
.loading.done { opacity:0; pointer-events:none; }
@keyframes pulse { to { transform:scale(1.8); opacity:.35; } }
.fallback { position:absolute; inset:0; background:#090c0b; }
.fallback img { width:100%; height:100%; object-fit:contain; }
.fallback p { position:absolute; left:16px; bottom:8px; margin:0; padding:8px 10px; background:rgba(0,0,0,.72); font-size:12px; }
.reset-float { position:absolute; top:18px; right:18px; border:1px solid rgba(255,255,255,.28); border-radius:99px; padding:9px 13px; background:rgba(8,12,10,.6); color:var(--paper); backdrop-filter:blur(8px); cursor:pointer; opacity:.68; }
.reset-float:hover,.reset-float:focus-visible { opacity:1; border-color:var(--accent); outline:none; }
.controls { display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:clamp(22px,4vw,60px); padding:19px 2px 17px; border-bottom:1px solid var(--line); }
.controls label:not(.toggle) span { display:flex; justify-content:space-between; margin-bottom:9px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.controls b { color:var(--paper); font-weight:600; }
output { font-variant-numeric:tabular-nums; }
input[type=range] { width:100%; height:2px; appearance:none; background:linear-gradient(90deg,var(--accent) var(--fill,52%),rgba(255,255,255,.16) var(--fill,52%)); outline:none; }
input[type=range]::-webkit-slider-thumb { appearance:none; width:15px; height:15px; border-radius:50%; border:2px solid var(--ink); background:var(--accent); box-shadow:0 0 0 1px var(--accent); cursor:ew-resize; }
.toggle { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; white-space:nowrap; cursor:pointer; }
.toggle input { position:absolute; opacity:0; }
.toggle span { width:36px; height:20px; border-radius:99px; border:1px solid rgba(255,255,255,.22); position:relative; transition:.2s; }
.toggle span::after { content:""; position:absolute; width:12px; height:12px; left:3px; top:3px; border-radius:50%; background:var(--muted); transition:.2s; }
.toggle input:checked+span { border-color:var(--accent); background:rgba(234,191,114,.16); }
.toggle input:checked+span::after { transform:translateX(16px); background:var(--accent); }
.tilt-control { border:1px solid var(--accent); border-radius:99px; padding:9px 14px; background:rgba(234,191,114,.1); color:var(--paper); font:600 11px/1 ui-sans-serif,system-ui,sans-serif; white-space:nowrap; cursor:pointer; }
.tilt-control.enabled { border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.04); color:var(--accent); }
.tilt-control:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
footer { display:flex; justify-content:space-between; gap:20px; padding-top:13px; color:#666c67; font:11px/1.4 ui-monospace,SFMono-Regular,monospace; }
footer p { margin:0; }
.status { text-align:right; }
@media(max-width:700px){ .shell{width:calc(100% - 22px);padding-top:22px}.mouse{display:none}.touch{display:inline}.thumb{flex-basis:145px}.viewer{max-height:none}.controls{grid-template-columns:1fr 1fr}.toggle{grid-column:1}.tilt-control{justify-self:end}.status{display:none} }
@media(prefers-reduced-motion:reduce){ .loading span{animation:none} }