:root{--bg: #0b0c0d;--panel: rgba(19, 22, 24, .88);--panel-strong: rgba(28, 31, 34, .96);--line: rgba(222, 232, 223, .12);--line-strong: rgba(227, 237, 228, .24);--text: #ecf1ea;--muted: #9ca59d;--accent: #c8c1a4;--accent-strong: #ddd1a8;--danger: #b08a7c;--shadow: 0 24px 80px rgba(0, 0, 0, .45);--ease-out: cubic-bezier(.2, 0, 0, 1);--ease-standard: cubic-bezier(.4, 0, .2, 1);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--radius: 24px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at top,rgba(72,78,78,.12),transparent 38%),linear-gradient(180deg,#131517,#0b0c0d);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{min-height:100vh}button,input{font:inherit}button{min-height:48px;border-radius:999px;border:1px solid rgba(231,238,224,.22);padding:.85rem 1rem;background:#ffffff0d;color:var(--text);box-shadow:inset 0 1px #ffffff0a;transition:transform .2s var(--ease-out),opacity .2s var(--ease-standard),border-color .2s var(--ease-standard),background-color .2s var(--ease-standard),box-shadow .2s var(--ease-standard)}button:active{transform:scale(.97)}@media (hover: hover) and (pointer: fine){button:hover{transform:translateY(-1px);border-color:#e3ede457}}button:focus-visible,input:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px}input[type=range]{width:100%;accent-color:var(--accent)}.app-shell{width:min(1280px,calc(100vw - 24px));margin:0 auto;padding:20px 0 32px}.topbar{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:1.2rem;align-items:end;margin-bottom:16px;padding:.9rem 1rem .3rem}.eyebrow{margin:0 0 .45rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-size:.74rem}h1{margin:0;font-size:clamp(1.8rem,3.4vw,2.9rem);letter-spacing:-.05em}.topbar-copy{margin:0;max-width:40ch;color:#d5ddd6;line-height:1.55;justify-self:end}.layout{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(340px,.88fr);gap:16px;align-items:stretch}.viewport-card,.control-panel{border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);border-radius:var(--radius);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.viewport-card{position:relative;min-height:64vh;overflow:hidden}#scene{display:block;width:100%;height:100%;min-height:64vh;touch-action:none;cursor:crosshair}.viewport-note{position:absolute;top:14px;left:14px;z-index:2;display:grid;gap:.45rem;width:min(300px,calc(100% - 28px));padding:.9rem 1rem;border:1px solid rgba(236,241,234,.12);border-radius:18px;background:#0b0c0db8;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.viewport-note p{margin:0;color:#dde4dc;line-height:1.45}.live-pill{display:inline-flex;align-items:center;gap:.55rem;width:fit-content;padding:.36rem .72rem;border-radius:999px;background:#c8c1a424;color:#f0ead7;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}.live-dot{width:.58rem;height:.58rem;border-radius:999px;background:#ddd1a8;box-shadow:0 0 #ddd1a857}.terrain-reticle{position:absolute;top:0;left:0;z-index:2;width:28px;height:28px;margin-top:-14px;margin-left:-14px;border:1px solid rgba(221,209,168,.9);border-radius:999px;opacity:0;transform:translate3d(-999px,-999px,0) scale(.82);pointer-events:none;transition:transform .18s var(--ease-out),opacity .18s var(--ease-standard)}.terrain-reticle:before,.terrain-reticle:after{content:"";position:absolute;inset:50% auto auto 50%;background:#ddd1a8e0;transform:translate(-50%,-50%)}.terrain-reticle:before{width:1px;height:18px}.terrain-reticle:after{width:18px;height:1px}.terrain-reticle.visible{opacity:.82;transform:translate3d(var(--reticle-x, -999px),var(--reticle-y, -999px),0) scale(1)}.terrain-reticle.pulse{opacity:1;transform:translate3d(var(--reticle-x, -999px),var(--reticle-y, -999px),0) scale(1.16)}.viewport-hud{position:absolute;inset:auto 12px 12px 12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.viewport-hud>div,.panel-block{border:1px solid rgba(255,255,255,.1);border-radius:18px;background:#0b0c0dad}.viewport-hud>div{padding:.9rem 1rem}.hud-label,.stats-block span,.range-row span{display:block;color:#c2cac2;font-size:.8rem;letter-spacing:.04em}.viewport-hud strong,.stats-block strong,.range-row strong{display:block;margin-top:.2rem;font-size:.98rem}.control-panel{padding:14px;display:grid;gap:14px}.panel-block{padding:1.1rem}.panel-block p,.panel-block label{margin:0}.panel-block label{display:block;margin-bottom:.82rem;font-weight:600}.range-row{display:flex;justify-content:space-between;align-items:center;margin-top:.7rem;gap:12px}.button-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.primary-btn{background:#c8c1a43d;border-color:#ddd1a89e}.secondary-btn{background:#ffffff12}.button-grid button{font-weight:600}.stats-block{display:grid;gap:.8rem}.stats-block strong{font-size:1rem}.stats-block div{display:grid;gap:.16rem}@media (max-width: 1100px){.topbar{grid-template-columns:1fr;gap:.7rem}.topbar-copy{justify-self:start;max-width:60ch}.layout{grid-template-columns:1fr}.viewport-card,#scene{min-height:52vh}.viewport-hud,.button-grid{grid-template-columns:1fr}}@media (max-width: 640px){.app-shell{width:min(100vw - 16px,100%);padding-top:12px}.topbar{padding:.8rem .35rem .1rem}.topbar-copy{font-size:.96rem}.control-panel{padding:10px}.viewport-note{width:calc(100% - 24px);padding:.8rem .85rem}.viewport-hud{grid-template-columns:1fr}}@media (prefers-reduced-motion: no-preference){.live-dot{animation:livePulse 3.8s var(--ease-standard) infinite}}@keyframes livePulse{0%,to{transform:scale(1);box-shadow:0 0 #ddd1a847}50%{transform:scale(1.16);box-shadow:0 0 0 12px #ddd1a800}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}