:root{--bg: #06070f;--bg-alt: #0c1220;--surface: rgba(20, 28, 50, .85);--surface-strong: rgba(24, 36, 64, .95);--border: rgba(120, 140, 220, .18);--text: #e6ecff;--muted: rgba(230, 236, 255, .65);--accent: #7ad7ff;--accent-2: #c88bff;--accent-3: #7bffba;--danger: #ff7a9d;--glow: rgba(122, 215, 255, .35)}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;background:radial-gradient(circle at top,#101935,#05060d 55%,#03040a);color:var(--text);font-family:SF Pro Display,Inter,system-ui,sans-serif}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.app{max-width:1280px;margin:0 auto;padding:24px;display:flex;flex-direction:column;gap:20px}.hero{padding:20px 24px;border-radius:20px;background:linear-gradient(135deg,#0f1934f2,#090c1acc);border:1px solid var(--border);display:grid;grid-template-columns:1.2fr 1fr;gap:16px}.hero h1{font-size:32px;letter-spacing:.08em;text-transform:uppercase}.hero p{color:var(--muted);line-height:1.6;margin-top:10px}.hero-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-items:center}.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--accent) 15%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.btn{border:1px solid var(--border);background:#0e152ad9;color:var(--text);padding:8px 14px;border-radius:12px;font-size:13px;letter-spacing:.04em;cursor:pointer;transition:all .2s ease}.btn:hover{border-color:var(--accent);box-shadow:0 0 16px var(--glow)}.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#041016;border-color:transparent}.btn.ghost{background:transparent}.layout{display:grid;grid-template-columns:280px 1fr 280px;gap:18px}.panel{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:16px}.panel h2{font-size:14px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.control{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--muted)}.control input[type=range]{width:100%;accent-color:var(--accent)}.toggle{display:flex;align-items:center;gap:10px}.toggle input{width:16px;height:16px}.select{padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:#0b1124e6;color:var(--text)}.canvas-shell{position:relative;border-radius:24px;padding:12px;background:linear-gradient(180deg,#141c32e6,#060810e6);border:1px solid rgba(122,215,255,.2);box-shadow:0 24px 50px #040a1899}.canvas-stage{width:100%;height:520px;border-radius:20px;background:radial-gradient(circle at center,#212948cc,#050810f2);border:1px solid rgba(122,215,255,.15);display:block;touch-action:none}.hint{position:absolute;bottom:18px;left:18px;padding:10px 14px;background:#0c1220b3;border:1px solid rgba(122,215,255,.2);border-radius:12px;font-size:12px;color:var(--muted)}.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.stat-card{padding:12px;border-radius:12px;background:#0f162ad9;border:1px solid rgba(122,215,255,.2)}.stat-card span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.stat-card strong{font-size:18px}.footer{text-align:center;font-size:12px;color:var(--muted);padding-bottom:10px}@media(max-width:1100px){.layout,.hero{grid-template-columns:1fr}.hero-actions{justify-content:flex-start}.canvas-stage{height:420px}}