:root{--bg-0:#071019;--bg-1:#0d1a2a;--surface:#081018b3;--surface-strong:#0a1522db;--line:#a8e4ff38;--text:#eaf7ff;--muted:#cfeaf8b8;--accent:#32d4ff;--accent-strong:#6affd9;--warn:#ff9d5a;--ui-shadow:0 20px 70px #0000008c;--font-display:"Sora", "Avenir Next", "Trebuchet MS", sans-serif;--font-body:"Space Grotesk", "Segoe UI", sans-serif}*{box-sizing:border-box}html,body{background:radial-gradient(95vmax 80vmax at 15% 10%, #2c75a647, transparent 66%), radial-gradient(70vmax 65vmax at 85% 95%, #20c49733, transparent 68%), linear-gradient(135deg, var(--bg-0), var(--bg-1));width:100%;height:100%;color:var(--text);font-family:var(--font-body);margin:0;overflow:hidden}#app{width:100vw;height:100vh;position:relative}#app:before,#app:after{content:"";pointer-events:none;z-index:2;position:absolute;inset:0}#app:before{background:radial-gradient(55vmax 40vmax at 22% 10%,#20c3ff2e,#0000 65%);animation:14s ease-in-out infinite alternate sweep}#app:after{background:radial-gradient(70vmax 65vmax at 88% 96%,#6affd926,#0000 62%);animation:16s ease-in-out infinite alternate-reverse sweep}#nca-canvas{cursor:crosshair;touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.scene-noise{pointer-events:none;z-index:3;opacity:.09;mix-blend-mode:soft-light;background-image:linear-gradient(#ffffff26,#ffffff26),repeating-linear-gradient(90deg,#0000 0 2px,#ffffff4d 3px 4px);position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle,#000 55%,#0000 100%);mask-image:radial-gradient(circle,#000 55%,#0000 100%)}.overlay{z-index:6;border:1px solid var(--line);background:linear-gradient(140deg, #2656793d, transparent 28%), linear-gradient(18deg, var(--surface), var(--surface-strong));width:min(360px,100vw - 28px);box-shadow:var(--ui-shadow);-webkit-backdrop-filter:blur(18px)saturate(130%);backdrop-filter:blur(18px)saturate(130%);border-radius:20px;flex-direction:column;gap:14px;padding:16px;animation:.62s cubic-bezier(.2,.8,.22,1) panel-in,5s ease-in-out .62s infinite alternate overlay-glow;display:flex;position:absolute;top:clamp(14px,2.2vw,26px);left:clamp(14px,2.2vw,26px)}.overlay-body{flex-direction:column;gap:14px;display:flex}.overlay.is-minimized{gap:8px;width:min(250px,100vw - 28px);padding:12px 14px}.overlay.is-minimized .overlay-body,.overlay.is-minimized .header h1,.overlay.is-minimized .header .subtitle{display:none}.header-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.header h1{font-family:var(--font-display);letter-spacing:-.04em;background:linear-gradient(90deg, var(--text) 0%, var(--accent-strong) 38%, var(--accent) 50%, var(--accent-strong) 62%, var(--text) 100%);-webkit-text-fill-color:transparent;background-size:250% 100%;-webkit-background-clip:text;background-clip:text;margin:3px 0 0;font-size:clamp(1.45rem,2.6vw,1.86rem);line-height:1.08;animation:6s linear infinite title-shimmer}.eyebrow{letter-spacing:.16em;text-transform:uppercase;color:var(--accent-strong);margin:0;font-size:.72rem;font-weight:700;animation:3.5s ease-in-out infinite alternate eyebrow-glow}.menu-toggle{border-radius:999px;min-width:92px;height:30px;padding:0 10px;font-size:.72rem;animation:none}.subtitle{color:var(--muted);margin:9px 0 0;font-size:.86rem;line-height:1.34}.status-bar{gap:8px;display:flex}.status-chip{letter-spacing:.03em;color:var(--muted);background:#06111c8c;border:1px solid #81cae659;border-radius:999px;flex:1;padding:7px 11px;font-size:.75rem}.status-chip span{color:var(--text);font-weight:700}.controls{grid-template-columns:1fr 1fr;gap:10px;display:grid}.control-group{flex-direction:column;gap:6px;display:flex}.control-group label{color:var(--muted);justify-content:space-between;align-items:baseline;font-size:.77rem;display:flex}.control-select{grid-column:span 2}input[type=range]{appearance:none;background:linear-gradient(90deg,#2eb1e83d,#6affd942);border:1px solid #66c0dd59;border-radius:999px;width:100%;height:5px}input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:radial-gradient(circle at 30% 30%,#e8fcff,#54d6ff 65%,#0fa6db 100%);border:1px solid #ffffffa3;border-radius:50%;width:15px;height:15px;box-shadow:0 0 0 4px #54d6ff29}input[type=range]::-moz-range-thumb{cursor:pointer;background:#54d6ff;border:1px solid #ffffffa3;border-radius:50%;width:15px;height:15px;box-shadow:0 0 0 4px #54d6ff29}select{width:100%;height:34px;color:var(--text);background:#0a1a27bd;border:1px solid #8fd5eb61;border-radius:10px;padding:0 10px;font-family:inherit;font-size:.84rem}.buttons{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}button{height:36px;color:var(--text);letter-spacing:.03em;cursor:pointer;background:#0b1b29bf;border:1px solid #91cde659;border-radius:10px;font-family:inherit;font-size:.78rem;font-weight:700;transition:transform .14s,filter .18s,background-color .18s}button:hover{filter:brightness(1.15);transform:translateY(-1px)}button#pause-btn{color:#ffd7bc;border-color:#ff9d5ab3}button#seed-btn{color:#072437;background:linear-gradient(120deg,#2ec3ff,#33e9ca);border-color:#0000;animation:2s cubic-bezier(.4,0,.6,1) infinite seed-pulse}.hint{color:#ceeaf6b8;margin:0;font-size:.73rem;line-height:1.35}kbd{background:#04111bad;border:1px solid #b3e6fa59;border-bottom-width:2px;border-radius:5px;padding:1px 5px;font-size:.7rem}@keyframes sweep{0%{opacity:.65;transform:translate(-4%,-1.5%)scale(.95)}to{opacity:1;transform:translate(4%,2%)scale(1.09)}}@keyframes panel-in{0%{opacity:0;transform:translate(-12px,10px)scale(.98)}to{opacity:1;transform:translate(0,0)scale(1)}}@keyframes title-shimmer{0%{background-position:200%}to{background-position:-50%}}@keyframes eyebrow-glow{0%{text-shadow:none}to{text-shadow:0 0 10px #6affd9d9,0 0 22px #32d4ff73;color:#b8fff2}}@keyframes overlay-glow{0%{box-shadow:var(--ui-shadow)}to{box-shadow:var(--ui-shadow), 0 0 32px #32d4ff2e, inset 0 0 28px #32d4ff0d}}@keyframes seed-pulse{0%{box-shadow:0 0 #2ec3ff8c}70%{box-shadow:0 0 0 9px #2ec3ff00}to{box-shadow:0 0 #2ec3ff00}}@media (width<=820px){.overlay{border-radius:18px;width:min(560px,100vw - 20px);padding:14px;top:auto;bottom:12px;left:50%;transform:translate(-50%)}.overlay.is-minimized{width:min(280px,100vw - 20px)}.header h1{font-size:1.35rem}.controls{grid-template-columns:1fr}.control-select{grid-column:span 1}.buttons{grid-template-columns:repeat(3,minmax(0,1fr))}}