:root{color-scheme:dark;--bg:#121622;--ink:#f1e9db;--muted:#a0a7bb;--line:#323a4b;--gold:#e9be85;--lilac:#c4b2ee;--mint:#96d9d3}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 15% 4%,#29324977,transparent 55%),var(--bg);color:var(--ink);font:14px/1.55 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}main{max-width:1160px;margin:auto;padding:25px 40px}button,select{font:inherit}button{border:1px solid var(--line);background:#1e2534;color:var(--ink);border-radius:8px;cursor:pointer;transition:background .15s}button:hover{background:#30394b}button:disabled{opacity:.4;cursor:default}button:focus-visible,select:focus-visible,canvas:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}[hidden]{display:none!important}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:22px}.brand{color:var(--ink);text-decoration:none;letter-spacing:5px;font-size:23px;font-weight:550}.brand span{display:block;color:var(--muted);letter-spacing:2.3px;font-size:9px;margin-top:3px}header button{font-size:11px;padding:10px 14px}header button span{color:var(--gold);margin-left:15px}.intro{display:grid;grid-template-columns:1fr 280px;gap:60px;align-items:end;padding:34px 0 30px}.eyebrow{font-size:9px;letter-spacing:2px;color:var(--gold);margin:0 0 16px;font-weight:650}h1{font:normal 57px/1.02 Georgia,serif;letter-spacing:-1.8px;margin:0 0 18px}.lede{font-size:14px;color:var(--muted);margin:0;line-height:1.7}.case-picker{padding-bottom:5px}.case-picker label{font-size:10px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;display:block;margin-bottom:7px}select{width:100%;color:var(--ink);background:#232b3a;padding:12px;border:1px solid #50596c;border-radius:9px}.case-picker p{font-size:12px;color:var(--muted);margin:10px 0 7px}.case-picker>span{font-size:10px;color:var(--mint)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:35px;align-items:start}.exposure{min-width:0}.frame-label{display:flex;justify-content:space-between;gap:10px;font-size:8px;letter-spacing:1.7px;color:var(--muted);margin:0 0 10px}.canvas-wrap{position:relative;border:1px solid #42495a;border-radius:14px;overflow:hidden;background:#03060b;aspect-ratio:1}.canvas-wrap:before{content:'';pointer-events:none;position:absolute;inset:12px;border:1px solid #ffffff13;border-radius:4px;z-index:2}#view{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}#markers,#ghosts{position:absolute;inset:0;pointer-events:none}.marker,.ghost{position:absolute;transform:translate(-50%,-50%);width:25px;height:25px;border:1px solid var(--gold);border-radius:50%;color:var(--gold);box-shadow:0 0 12px #e9be8522;display:flex;align-items:center;justify-content:center;font-size:9px}.marker:after{content:'';position:absolute;width:5px;height:5px;border-radius:50%;background:currentColor}.marker b{position:absolute;left:23px;top:-5px;font-size:9px;font-weight:500;text-shadow:0 1px 4px #000}.marker.selected{border-width:2px;box-shadow:0 0 0 4px #e9be8518}.marker.violet{color:var(--lilac);border-color:var(--lilac)}.marker.violet.selected{box-shadow:0 0 0 4px #c4b2ee22}.ghost{width:39px;height:39px;border:1px dashed var(--mint);background:#96d9d314;color:var(--mint);font-size:9px}.canvas-caption{pointer-events:none;position:absolute;bottom:18px;left:22px;right:22px;display:flex;justify-content:space-between;gap:15px;font-size:8px;letter-spacing:1.5px;text-shadow:0 2px 4px #000;color:#d3d6df}.canvas-caption>span:last-child{font-size:6px;color:var(--muted)}.exposure-bottom{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:9px 0 20px}.exposure-bottom p{font-size:10px;margin:0;color:var(--muted)}.exposure-bottom button{font-size:10px;padding:6px 9px;background:transparent}.alignment{border:1px solid var(--line);padding:16px 18px;border-radius:10px;background:#1d2331}.alignment>div{display:flex;justify-content:space-between;align-items:center}.alignment span{font-size:9px;letter-spacing:1.8px;color:var(--muted)}.alignment strong{font:25px Georgia,serif;color:var(--mint)}meter{width:100%;height:7px;display:block;margin:10px 0}meter::-webkit-meter-bar{border:0;background:#343e50}meter::-webkit-meter-optimum-value{background:var(--mint)}.alignment p{font-size:10px;color:var(--muted);margin:0}.reference{background:#e8dfce;color:#252d3a;border-radius:3px;padding:17px 20px 13px;box-shadow:0 5px 15px #0003;display:grid;grid-template-columns:1fr 146px;gap:10px;align-items:center;transform:rotate(1deg);margin:18px 0 26px}.reference p{font-size:7px;letter-spacing:1.1px;margin:0 0 8px;color:#655f5c}.reference h2{font:21px/1.15 Georgia,serif;margin:0}.reference canvas{width:146px;height:146px;background:#02050b;border:1px solid #a8a092}.reference>span{font-size:6px;letter-spacing:1px;grid-column:1/-1;color:#655f5c}.control-heading{display:flex;justify-content:space-between;align-items:center}.control-heading h2{font:23px Georgia,serif;margin:0 0 12px}.control-heading span{font-size:9px;color:var(--muted)}.lens-tabs{display:flex;gap:7px;margin-bottom:17px}.lens-tabs button{flex:1;padding:10px;font-size:11px}.lens-tabs button.selected{border-color:var(--gold);background:#58473155;color:var(--gold)}.lens-tabs button.violet.selected{border-color:var(--lilac);background:#4b3d6055;color:var(--lilac)}.reach>div:first-child{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}.reach-buttons{display:flex;align-items:center;gap:16px;margin:7px 0 16px}.reach-buttons button{width:40px;height:34px;font-size:20px}#reach-dots{display:flex;flex:1;gap:5px}#reach-dots span{height:5px;flex:1;background:#364052;border-radius:2px}#reach-dots span.on{background:var(--gold)}.position>p{font-size:8px;letter-spacing:1.5px;color:var(--muted);margin:0 0 7px;display:flex;justify-content:space-between}.position>p span{letter-spacing:0;font-size:9px}#grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:16px}#grid button{height:22px;position:relative;font-size:10px;background:#192130;border-radius:4px;color:#7b8aa1}#grid button.selected{color:var(--gold);background:#56443066;border-color:var(--gold)}#grid button.other{color:var(--lilac);border-color:#8d7ab8}.primary{display:block;width:100%;border:0;background:var(--gold);color:#172131;font-weight:650;padding:12px 15px;text-align:left}.primary:hover{background:#f3ce9e}.primary span{float:right}#message{font-size:11px;color:var(--gold);min-height:32px;margin:9px 0 12px;line-height:1.5}.tools{display:flex;gap:6px}.tools button{flex:1;padding:8px 2px;font-size:10px}#next{margin-top:10px}.footnote{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;padding:28px 0 23px;border-top:1px solid var(--line);margin-top:30px}.footnote span{font-size:8px;letter-spacing:1.4px;color:var(--gold)}.footnote p{color:var(--muted);font-size:11px;margin:7px 0 0}footer{border-top:1px solid var(--line);padding:18px 0;display:flex;gap:20px;align-items:center;justify-content:space-between}footer p{max-width:700px;font-size:9px;color:var(--muted);margin:0}footer button{font-size:9px;border:0;background:transparent;color:var(--gold);white-space:nowrap;text-decoration:underline}.preload{display:none}dialog{max-width:610px;width:calc(100% - 32px);padding:32px;background:#222b3b;color:var(--ink);border:1px solid #6a758a;border-radius:16px}dialog::backdrop{background:#060a15d9}dialog h2{font:31px Georgia,serif}dialog p{color:#c7cbd6;font-size:13px;line-height:1.75}dialog a{color:var(--gold)}.close{position:absolute;right:12px;top:8px;border:0;background:transparent;font-size:25px}@media(max-width:850px){main{padding:22px}.intro{gap:30px;grid-template-columns:1fr 230px}h1{font-size:50px}.workspace{grid-template-columns:minmax(0,1fr) 300px;gap:22px}.reference{padding:15px 13px;grid-template-columns:1fr 125px}.reference canvas{width:125px;height:125px}.reference h2{font-size:19px}.canvas-caption>span:last-child{display:none}.footnote{gap:15px}}@media(max-width:650px){main{padding:18px 16px}.brand{font-size:20px}.brand span{font-size:7px}header{padding-bottom:17px}header button{font-size:9px;padding:9px}header button span{margin-left:6px}.intro{display:block;padding:27px 0 24px}h1{font-size:48px}.eyebrow{font-size:8px}.lede{font-size:12px}.case-picker{padding:23px 0 0}.case-picker p{margin-bottom:4px}.workspace{display:flex;flex-direction:column;gap:8px}.exposure,aside{width:100%}.reference{grid-template-columns:1fr 160px;max-width:350px;margin:18px auto 23px;transform:rotate(.7deg)}.reference canvas{width:160px;height:160px}.reference h2{font-size:24px}.alignment{padding:13px 16px}.exposure-bottom{margin-bottom:14px}#grid button{height:30px}.reach-buttons button{height:40px}.lens-tabs button{padding:12px}.tools button{padding:10px}.footnote{grid-template-columns:1fr;gap:14px;padding:22px 0;margin-top:24px}.footnote p{margin-top:3px}footer{align-items:start}dialog{padding:25px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
