:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #111; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body, #app { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #111; }
#camera { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: center; background: #090a13; }
#artboard { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
#reference { position: absolute; left: 50%; top: 50%; max-width: none; max-height: none; display: none; transform-origin: center; user-select: none; -webkit-user-drag: none; pointer-events: auto; }
header { position: fixed; top: max(15px, env(safe-area-inset-top)); left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; text-shadow: 0 1px 4px #000; }
h1 { margin: 0; font-size: 18px; letter-spacing: .02em; }
#lockState { font-size: 13px; padding: 6px 9px; border-radius: 20px; background: #0008; }
.controls { position: fixed; bottom: max(10px, env(safe-area-inset-bottom)); left: 50%; right: auto; width: min(calc(100% - 24px), 340px); transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 6px; border: 1px solid #779aff66; border-radius: 12px; background: #151515e8; box-shadow: 0 0 13px #375cff2b; }
.controls.hidden { display: none; }
.controls-toggle { position: fixed; right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 4; min-height: 31px; border: 1px solid #718effaa; border-radius: 17px; background: #151515df; color: white; padding: 0 10px; font: 600 11px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; box-shadow: 0 0 10px #4169e133; opacity: .9; }
.button, .upload { display: flex; justify-content: center; align-items: center; gap: 5px; min-height: 32px; border: 0; border-radius: 7px; background: #30313b; color: white; font: inherit; font-size: 10.5px; cursor: pointer; }
.icon { display: inline-block; width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: #78efff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px #26d7ff); }
.primary .icon { stroke: #fff; filter: drop-shadow(0 0 3px #fff); }
.primary { background: #1478f5; font-weight: 600; }
.button.selected { background: #263e64; box-shadow: inset 0 0 0 1px #79efff, 0 0 10px #36dfff55; }
.subtle { background: transparent; border: 1px solid #ffffff3c; }
.upload input { display: none; }
.opacity { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 7px; padding: 1px 2px; font-size: 11px; }
.opacity span { display: inline-flex; align-items: center; gap: 5px; }
.camera-zoom { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 7px; padding: 1px 2px; font-size: 11px; }
.camera-zoom span { display: inline-flex; align-items: center; gap: 5px; }
.camera-zoom input { width: 100%; height: 14px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; }
.camera-zoom input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, #7551ff, #53f6ff); box-shadow: 0 0 7px #54eaff99; }
.camera-zoom input::-webkit-slider-thumb { width: 13px; height: 13px; margin-top: -4.5px; border: 1px solid #d8fdff; border-radius: 50%; background: #1c2340; box-shadow: 0 0 8px #62f7ff; -webkit-appearance: none; appearance: none; }
.opacity input { width: 100%; height: 14px; margin: 0; accent-color: #72f7ff; }
.opacity input { -webkit-appearance: none; appearance: none; background: transparent; }
.opacity input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, #a74dff, #53f6ff); box-shadow: 0 0 7px #54eaff99; }
.opacity input::-webkit-slider-thumb { width: 13px; height: 13px; margin-top: -4.5px; border: 1px solid #d8fdff; border-radius: 50%; background: #1c2340; box-shadow: 0 0 8px #62f7ff; -webkit-appearance: none; appearance: none; }
#resetButton { grid-column: 1 / -1; }
output { font-variant-numeric: tabular-nums; color: #bbb; }
.hint, .message { position: fixed; left: 25px; right: 25px; text-align: center; font-size: 13px; text-shadow: 0 1px 3px #000; }
.hint { z-index: 3; bottom: max(170px, calc(env(safe-area-inset-bottom) + 170px)); display: flex; justify-content: center; align-items: center; gap: 7px; color: #d9eaff; opacity: .48; font-size: 11px; line-height: 1.3; pointer-events: none; }
.hint.hidden { display: none; }
.hint button { width: 17px; height: 17px; flex: 0 0 17px; padding: 0; border: 1px solid #b0dcff99; border-radius: 50%; background: #121727a8; color: #dffbff; font: 16px/13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; pointer-events: auto; }
.message { top: 46%; color: #eee; }
.message.hidden { display: none; }
body.locked #artboard { touch-action: auto; }
.welcome { position: fixed; z-index: 5; inset: 0; display: grid; place-items: center; overflow: hidden; padding: 28px; background: radial-gradient(circle at 50% 35%, #1d254b 0, #11142a 33%, #090a13 72%); }
.welcome.hidden { display: none; }
.welcome-content { position: relative; z-index: 1; width: min(100%, 340px); text-align: center; }
.eyebrow { margin: 0 0 12px; color: #79fbff; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.welcome h2 { margin: 0; font-size: clamp(34px, 10vw, 48px); line-height: .95; letter-spacing: -.06em; text-shadow: 0 0 18px #5d7dff; }
.welcome p:not(.eyebrow) { margin: 20px 0; color: #d8d9e7; font-size: 15px; line-height: 1.45; }
.welcome .welcome-steps { color: #9ea5d4; font-size: 13px; }
.welcome .button { width: 100%; box-shadow: 0 0 18px #1785f588; }
.neon-orbit { position: absolute; width: 410px; height: 410px; border: 2px solid #42e8ff; border-radius: 50%; opacity: .55; box-shadow: 0 0 14px #00cfff, inset 0 0 14px #00cfff; transform: rotate(-24deg); }
.orbit-one { top: -180px; right: -210px; }.orbit-two { bottom: -270px; left: -180px; border-color: #b04dff; box-shadow: 0 0 14px #9e45ff, inset 0 0 14px #9e45ff; transform: rotate(38deg) scale(.82); }
.neon-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 15px 6px #4cf5ff; }.dot-one { top: 21%; left: 14%; }.dot-two { bottom: 18%; right: 16%; background: #f1c2ff; box-shadow: 0 0 15px 6px #b64cff; }
@media (min-width: 700px) { .controls { width: 340px; } }