:root{--bg0:#070b18;--bg1:#0b1531;--panel: rgba(255,255,255,.08);--panel2: rgba(255,255,255,.12);--stroke: rgba(255,255,255,.14);--text: rgba(255,255,255,.92);--muted: rgba(255,255,255,.72);--shadow: 0 18px 70px rgba(0,0,0,.4);--shadow2: 0 10px 30px rgba(0,0,0,.28)}*{box-sizing:border-box}html,body{height:100%;margin:0;background:radial-gradient(1200px 800px at 30% 20%,#1b2a6a,#0a1026 45%,#060914);color:var(--text)}body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial}a{color:inherit}.app{min-height:100vh;display:flex;align-items:stretch;justify-content:center;padding:22px}.shell{width:min(1200px,100%);display:grid;grid-template-columns:1.25fr .75fr;gap:18px}@media(max-width:980px){.shell{grid-template-columns:1fr}}.stage{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--stroke);background:linear-gradient(180deg,#ffffff12,#ffffff08)}.stageHeader{position:absolute;inset:14px 14px auto;display:flex;gap:10px;align-items:center;justify-content:space-between;pointer-events:none}.badge{pointer-events:none;display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:#00000047;border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.dot{width:10px;height:10px;border-radius:999px;background:radial-gradient(circle at 30% 30%,#fff,#ffffff26);box-shadow:0 0 14px #ffffff59}.badge h1{font-size:14px;margin:0;letter-spacing:.3px}.badge p{margin:0;font-size:12px;color:var(--muted)}.canvasWrap{width:100%;aspect-ratio:16/9}canvas{width:100%;height:100%;display:block}.panel{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--stroke);background:linear-gradient(180deg,#ffffff12,#ffffff08)}.panelInner{padding:16px}.panelTitle{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.panelTitle h2{margin:0;font-size:14px;letter-spacing:.25px}.kicker{font-size:12px;color:var(--muted);margin:6px 0 12px;line-height:1.45}.row{display:flex;gap:10px;align-items:center;margin:10px 0}label{width:110px;font-size:12px;color:var(--muted)}input[type=text]{flex:1;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#00000038;color:var(--text);padding:10px 12px;outline:none}input[type=range]{flex:1}.value{width:56px;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}.btnRow{display:flex;gap:10px;margin-top:14px}button{flex:1;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:#ffffff14;color:var(--text);padding:10px 12px;cursor:pointer;transition:transform .08s ease,background .15s ease,border-color .15s ease}button:hover{background:#ffffff1f;border-color:#ffffff38}button:active{transform:translateY(1px)}.smallNote{margin-top:12px;font-size:12px;color:var(--muted);line-height:1.45;padding:12px;border-radius:14px;background:#00000038;border:1px solid rgba(255,255,255,.12)}