| :root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background:#090b10; color:#edf1f7; } |
| * { box-sizing:border-box; } |
| html, body, main { width:100%; height:100%; margin:0; overflow:hidden; } |
| main { display:grid; grid-template-columns:minmax(0,1fr) 320px; } |
| #viewport { min-width:0; background:radial-gradient(circle at 50% 36%,#20293a 0,#10141d 38%,#080a0f 76%); } |
| #viewport canvas { display:block; width:100%; height:100%; } |
| aside { padding:36px 28px; border-left:1px solid #2a3240; background:rgba(11,14,20,.96); box-shadow:-18px 0 60px #0008; } |
| .eyebrow { margin:0 0 10px; color:#6be6ba; letter-spacing:.18em; font-size:11px; font-weight:750; } |
| h1 { margin:0 0 12px; font-size:30px; letter-spacing:-.04em; } |
| .lede { color:#9eabbc; line-height:1.45; margin:0 0 18px; } |
| .legend { display:flex; gap:16px; margin:0 0 24px; color:#aeb9c8; font-size:12px; } |
| .legend span { display:flex; align-items:center; gap:7px; } |
| .legend i { display:block; width:20px; height:5px; border-radius:4px; box-shadow:0 0 10px currentColor; } |
| .animated-swatch { color:#55efc4; background:#55efc4; } |
| .target-swatch { color:#ff763b; background:#ff763b; transform:rotate(-8deg); } |
| label { display:block; color:#c8d1dd; font-size:12px; font-weight:700; margin-bottom:8px; } |
| select { width:100%; color:#f2f6fb; background:#171c26; border:1px solid #343d4d; border-radius:8px; padding:11px; font:inherit; } |
| .target-frame-control { margin-top:16px; } |
| .target-frame-control label { display:flex; justify-content:space-between; margin-bottom:6px; } |
| .target-frame-control output { color:#ff9a68; font-variant-numeric:tabular-nums; } |
| #target-frame { display:block; width:100%; margin:0; accent-color:#ff763b; } |
| .view-options { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; } |
| .view-options label { display:flex; align-items:center; gap:7px; margin:0; font-weight:600; color:#b7c2d0; } |
| .view-options input { accent-color:#ff763b; } |
| #reset-camera { color:#dbe4ef; background:#171c26; border:1px solid #343d4d; border-radius:7px; padding:7px 9px; font:inherit; font-size:11px; white-space:nowrap; } |
| #reset-camera:hover { border-color:#59677b; background:#202735; } |
| .target-help, .camera-help { margin:9px 0 0; color:#647286; font-size:11px; line-height:1.35; } |
| .pad { margin:28px auto; width:176px; display:grid; grid-template:52px 52px / 52px 52px 52px; gap:8px; } |
| .pad button { border:1px solid #3b4658; border-radius:10px; background:#181e29; color:#dae3ed; font-weight:800; font-size:16px; box-shadow:0 4px 12px #0005; } |
| .pad button:first-child { grid-column:2; } |
| .pad button:nth-child(2) { grid-row:2; grid-column:1; } |
| .pad button:nth-child(3) { grid-row:2; grid-column:2; } |
| .pad button:nth-child(4) { grid-row:2; grid-column:3; } |
| .pad button.active { background:#2e735f; border-color:#77f0c4; transform:translateY(1px); } |
| dl { border-top:1px solid #2b3341; margin-top:30px; padding-top:10px; } |
| dl div { display:flex; justify-content:space-between; gap:10px; padding:8px 0; } |
| dt { color:#778599; } dd { margin:0; text-align:right; color:#dce4ee; } |
| #test-result { min-height:1.3em; color:#6be6ba; font-size:12px; } |
| @media (max-width:760px) { main { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; } aside { padding:16px 20px; border-left:0; border-top:1px solid #2a3240; } .lede, dl, .target-help, .camera-help { display:none; } .legend { margin-bottom:12px; } .view-options { max-width:420px; } .pad { position:absolute; right:18px; bottom:12px; margin:0; transform:scale(.8); transform-origin:bottom right; } } |
|
|
