:root{color-scheme:dark;--red:#ed174c;--blue:#1666d8;--navy:#020916;--panel:#06162b;--line:#233b5e;--muted:#96a8c3}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;background:#020712;color:#fff}.studio{min-height:100vh;display:grid;grid-template-columns:390px 1fr;background:radial-gradient(circle at 0 0,#490018,transparent 32%),linear-gradient(135deg,#020712,#062759)}.editor{height:100vh;overflow:auto;padding:24px;background:#04101fee;border-right:1px solid var(--line)}header span{color:var(--red);font-size:10px;font-weight:900;letter-spacing:2px}h1{font-size:42px;margin:3px 0;letter-spacing:-2px}header p{color:var(--muted);line-height:1.5;margin:0 0 18px}.tabs{display:flex;gap:7px;overflow:auto;padding-bottom:12px;position:sticky;top:-24px;z-index:3;background:#04101f;padding-top:10px}.tabs button,.choice,.actions button,.camera{border:1px solid var(--line);background:#0a1e3a;color:#fff;border-radius:10px;padding:10px 12px;font-weight:800}.tabs button.active,.choice.active{border-color:var(--red);box-shadow:inset 0 -2px var(--red)}.group{border-top:1px solid #1d3150;padding:16px 0}.group h2{font-size:11px;letter-spacing:1.2px;margin:0 0 10px}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.choice{text-align:left;font-size:12px}.colors{display:flex;gap:9px;flex-wrap:wrap}.choice.color{width:38px;height:38px;border-radius:50%;padding:0;background:var(--color);font-size:0}.range{width:100%;accent-color:var(--red)}.range-row{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:sticky;bottom:-24px;background:#04101f;padding:15px 0 24px}.actions .primary{grid-column:1/-1;background:linear-gradient(135deg,var(--red),#b70b39);border:0}.viewport{height:100vh;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 38%,#173d72 0,#06142c 44%,#020712 76%)}#canvas,canvas{width:100%;height:100%;display:block}.hud{position:absolute;left:18px;right:18px;bottom:18px;display:flex;justify-content:space-between;gap:16px;color:#b8c7dc;font-size:11px;letter-spacing:.5px;pointer-events:none}.camera{position:absolute;right:18px;top:18px}.error{color:#ff6d8e}.loading{position:absolute;inset:0;display:grid;place-content:center;gap:12px;text-align:center;color:#b8c7dc;font-size:12px;letter-spacing:.8px}.loading span{width:34px;height:34px;margin:auto;border:3px solid #294566;border-top-color:var(--red);border-radius:50%;animation:spin .8s linear infinite}.loading.hidden{display:none}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:850px){.studio{grid-template-columns:1fr}.viewport{height:70vh;order:-1}.editor{height:auto;border-right:0}.hud{flex-direction:column}.tabs{top:0}.actions{bottom:0}}