:root{--accent: #8edfff;--panel: rgba(5, 10, 16, .68);--panel-strong: rgba(7, 13, 20, .88);--line: rgba(219, 248, 255, .22)}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:#04060a;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#f4fbff}body{min-width:320px}canvas{display:block;cursor:grab}canvas:active{cursor:grabbing}button,select,input{font:inherit}button,select{height:36px;border:1px solid var(--line);border-radius:6px;background:#080f17e6;color:#f4fbff}button{cursor:pointer;padding:0 12px;font-weight:760}button:not(.secondary){background:#d9faff;color:#061017}button.secondary:hover,.mode-tab:hover{border-color:color-mix(in srgb,var(--accent),white 28%)}select{max-width:228px;padding:0 10px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;background:linear-gradient(180deg,#05080ce0,#030509f5),radial-gradient(circle at 50% 42%,rgba(142,223,255,.24),transparent 44%)}.panel{width:min(720px,calc(100vw - 32px));padding:28px;border:1px solid rgba(220,249,255,.25);border-radius:8px;background:#070d15e0;box-shadow:0 24px 80px #0000008c}h1{margin:0 0 12px;font-size:clamp(2rem,5vw,4.4rem);line-height:.98;letter-spacing:0}p{max-width:62ch;margin:0 0 20px;color:#c2d8de;line-height:1.5}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.readout{position:fixed;top:16px;left:16px;z-index:8;width:min(390px,calc(100vw - 32px));box-sizing:border-box;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:#f5fdff;font-size:13px;line-height:1.46;text-shadow:0 2px 8px #000;pointer-events:none;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.readout strong{color:var(--accent);letter-spacing:.08em}.toolbar{position:fixed;top:16px;right:16px;z-index:10;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:min(860px,calc(100vw - 420px))}.toolbar button,.toolbar select{height:34px;font-size:13px}.toolbar select:first-child{max-width:210px}.mode-panel{position:fixed;right:16px;bottom:16px;z-index:10;display:grid;gap:10px;width:min(460px,calc(100vw - 32px));box-sizing:border-box;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.mode-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.mode-tab{min-width:0;padding:0 8px;overflow:hidden;background:#0a1119eb;color:#f5fbff;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.06em}.mode-tab.active{border-color:var(--mode-accent);background:color-mix(in srgb,var(--mode-accent),#071019 78%);color:#fff}.blend-control{display:grid;grid-template-columns:auto minmax(120px,1fr);gap:12px;align-items:center;color:#d4e7ed;font-size:13px}.blend-control input{width:100%;accent-color:var(--accent)}.mode-copy{display:grid;gap:5px;color:#d4e7ed;font-size:13px;line-height:1.38}.mode-title{color:#fff;font-size:15px;font-weight:780}.status-line{position:fixed;left:50%;bottom:18px;z-index:9;width:min(760px,calc(100vw - 520px));min-height:18px;transform:translate(-50%);color:#eefbffd1;font-size:13px;text-align:center;text-shadow:0 2px 10px #000;pointer-events:none}.render-meter{position:fixed;left:16px;bottom:16px;z-index:9;width:190px;height:22px;box-sizing:border-box;border:1px solid var(--line);border-radius:6px;background:#04080da3;overflow:hidden;pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.render-meter:after{content:attr(data-label);position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#f5fdffdb;font-size:11px;font-weight:720;text-shadow:0 1px 5px #000}.render-bar{width:100%;height:100%;transform:scaleX(1);transform-origin:left;background:linear-gradient(90deg,color-mix(in srgb,var(--accent),#ffffff 12%),transparent);transition:transform .1s linear}.reticle{position:fixed;left:50%;top:50%;z-index:6;width:34px;height:34px;transform:translate(-50%,-50%);border:1px solid color-mix(in srgb,var(--accent),transparent 25%);border-radius:50%;box-shadow:0 0 28px color-mix(in srgb,var(--accent),transparent 55%);pointer-events:none}.reticle:before,.reticle:after{content:"";position:absolute;background:color-mix(in srgb,var(--accent),white 18%)}.reticle:before{left:50%;top:-12px;width:1px;height:58px}.reticle:after{left:-12px;top:50%;width:58px;height:1px}.path-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none;opacity:.65}.trail-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:4;pointer-events:none}.trail-layer span{position:absolute;width:7px;height:7px;border:1px solid color-mix(in srgb,var(--accent),white 16%);border-radius:50%;background:#ffffff1a;box-shadow:0 0 12px color-mix(in srgb,var(--accent),transparent 30%);opacity:0;transition:left .12s linear,top .12s linear,opacity .16s ease,transform .16s ease}.path-layer:before{content:"";position:absolute;left:50%;top:50%;width:45vmin;height:1px;transform:translate(-5%,-50%) rotate(var(--path-rotation));transform-origin:5% 50%;background:linear-gradient(90deg,var(--accent),transparent);box-shadow:0 0 16px color-mix(in srgb,var(--accent),transparent 35%)}.path-layer:after{content:"";position:absolute;left:var(--probe-x, 50%);top:var(--probe-y, 50%);width:10px;height:10px;transform:translate(-50%,-50%);border:1px solid var(--accent);border-radius:50%;background:#ffffff1f;box-shadow:0 0 18px color-mix(in srgb,var(--accent),transparent 30%)}.path-layer.camera:before{width:30vmin;transform:translate(-50%,-50%) rotate(0);background:radial-gradient(circle,color-mix(in srgb,var(--accent),transparent 10%),transparent 68%)}.path-layer.microscope:before{width:30vmin;height:30vmin;transform:translate(-50%,-50%);border:1px solid color-mix(in srgb,var(--accent),transparent 50%);border-radius:50%;background:transparent}.hidden{display:none}@media (max-width: 920px){.toolbar{top:auto;right:12px;bottom:190px;max-width:calc(100vw - 24px)}.readout{top:12px;left:12px;width:min(420px,calc(100vw - 24px))}.mode-panel{right:12px;bottom:12px}.status-line,.render-meter{display:none}}@media (max-width: 560px){.panel{padding:22px}.toolbar{left:12px;justify-content:flex-start}.toolbar select{max-width:100%;flex:1 1 180px}.toolbar button{flex:1 1 auto}.mode-tabs{grid-template-columns:1fr}.readout{font-size:12px}}