:root{color-scheme:dark;--bg:#17162a;--panel:#222137;--ink:#edeaf5;--muted:#b6afc9;--lime:#d4e6aa;--violet:#b2a3ed;--pink:#eea5bf}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 system-ui,sans-serif}main{max-width:1190px;margin:auto;padding:32px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #45405c;padding-bottom:22px;font-size:10px;letter-spacing:2px;color:var(--muted)}.brand{font-size:20px;font-weight:bold;letter-spacing:5px;color:var(--ink)}.brand span{display:block;font-size:10px;letter-spacing:10px}.intro{padding:25px 0;max-width:850px}.eyebrow{font-size:10px;color:var(--lime);letter-spacing:2px;font-weight:bold}h1{font:48px/1.1 Georgia,serif;margin:14px 0}h2{font:25px Georgia,serif;margin:0 0 16px}p{color:var(--muted)}b{color:var(--ink)}.workspace{display:grid;grid-template-columns:1.35fr 1fr;gap:24px}.detector,aside{background:var(--panel);border:1px solid #45405c;border-radius:15px;padding:24px}.heading{display:flex;justify-content:space-between;align-items:center}.heading span{font-size:10px;color:var(--muted)}canvas{width:100%;height:auto;display:block;background:#080815;border:1px solid #55506c;border-radius:9px;touch-action:none;cursor:crosshair}.legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;font-size:10px}.source{color:var(--lime)}.sky{color:var(--violet)}.mask{color:var(--pink)}#position{font:11px ui-monospace,monospace}.brief{padding:16px;background:#302c47;border-left:3px solid var(--lime);margin-bottom:18px}.brief span,.brief small{display:block;font-size:11px;color:var(--muted)}.brief strong{font:25px ui-monospace,monospace;color:var(--lime)}.modes,.actions{display:flex;gap:8px;flex-wrap:wrap}button,select{min-height:44px;border:1px solid #645b80;background:#312d49;color:var(--ink);border-radius:6px;padding:10px 14px;font:13px system-ui;cursor:pointer}button[aria-pressed=true]{background:var(--lime);color:#252b1c}button:hover{border-color:var(--lime)}button:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid var(--pink);outline-offset:3px}#mode-help,.hint{font-size:11px}label{display:flex;justify-content:space-between;margin-top:14px;font-size:12px}output{color:var(--lime);font-weight:bold}input[type=range]{width:100%;accent-color:var(--lime);height:35px}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:1px solid #45405c;padding:15px 0}.metrics small{display:block;font-size:10px;color:var(--muted)}.metrics strong{display:block;font:22px ui-monospace,monospace}.primary{width:100%;background:var(--lime);color:#252b1c;font-weight:bold}#feedback{font-size:12px;border-left:3px solid var(--pink);padding-left:12px;min-height:58px}nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:24px 0;font-size:12px}nav label{margin:0}nav span{margin-left:auto;color:var(--lime)}details{font-size:12px;border-top:1px solid #45405c;padding:20px 0}summary{cursor:pointer}a{color:var(--lime)}footer{font:italic 16px Georgia;color:var(--muted);padding:15px 0}@media(max-width:760px){main{padding:18px}header>span{display:none}h1{font-size:36px}.intro p{font-size:14px}.workspace{grid-template-columns:1fr;gap:16px}.detector,aside{padding:16px}h2{font-size:22px}.heading span{font-size:8px}.legend{font-size:9px;gap:8px}nav{gap:8px}nav span{margin-left:0}}