:root{color:#f4f2ed;background:#050608;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{background:#050608}button,input{font:inherit}.shell{--accent: #ff6b20;--accent-soft: rgba(255, 107, 32, .18);--accent-rgb: 255, 107, 32;position:relative;width:100%;height:100%;isolation:isolate;background:radial-gradient(circle at 50% 70%,rgba(var(--accent-rgb),.09),transparent 40%),#050608}.shell[data-element=water]{--accent: #27c4ff;--accent-soft: rgba(39, 196, 255, .18);--accent-rgb: 39, 196, 255}.shell[data-element=wind]{--accent: #b8ddf5;--accent-soft: rgba(184, 221, 245, .17);--accent-rgb: 184, 221, 245}.shell[data-element=earth]{--accent: #d89136;--accent-soft: rgba(216, 145, 54, .18);--accent-rgb: 216, 145, 54}.shell[data-element=arcane]{--accent: #c05cff;--accent-soft: rgba(192, 92, 255, .2);--accent-rgb: 192, 92, 255}#gpu-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:grab;touch-action:none}#gpu-canvas:active{cursor:grabbing}.topbar{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;padding:22px 24px;pointer-events:none;background:linear-gradient(to bottom,rgba(5,6,8,.88),transparent)}.eyebrow,.prototype-number,.key-hint{color:#d7a57b;font:600 10px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.16em;text-transform:uppercase}.brand h1{margin:5px 0 0;font-size:clamp(18px,2.2vw,28px);font-weight:480;letter-spacing:-.035em}.status-cluster{display:flex;align-items:center;gap:9px}.badge{display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:0 10px;border:1px solid rgba(255,255,255,.11);border-radius:99px;color:#ffffffad;background:#0b0d109e;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em}.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}.inspector{position:absolute;z-index:3;top:90px;right:24px;width:220px;max-height:calc(100vh - 106px);overflow-y:auto;padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#080a0db8;box-shadow:0 14px 50px #00000057;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.inspector-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.inspector h2{margin:0;font-size:12px;font-weight:650;letter-spacing:.02em}.element-picker,.shape-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:7px}.element-picker button,.shape-picker button{min-width:0;padding:7px 4px;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#ffffff85;background:#ffffff09;cursor:pointer;font-size:9px}.element-picker button:hover,.shape-picker button:hover{color:#fff;background:#ffffff14}.element-picker button[aria-pressed=true],.shape-picker button[aria-pressed=true]{color:#fff;border-color:rgba(var(--accent-rgb),.44);background:var(--accent-soft)}.shape-title{margin-top:12px;padding-top:9px}.mix-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.mix-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px}.mix-picker button,.mix-presets button{min-width:0;padding:7px 3px;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#ffffff7a;background:#ffffff09;cursor:pointer;font-size:9px}.mix-presets button{padding:5px 2px;font-size:8px}.mix-picker button:hover,.mix-presets button:hover{color:#fff;background:#ffffff14}.mix-picker button[aria-pressed=true],.mix-presets button[aria-pressed=true]{color:#fff;border-color:rgba(var(--accent-rgb),.44);background:var(--accent-soft)}.element-description{min-height:30px;margin:8px 0 3px;color:#ffffff75;font-size:9px;line-height:1.45}.icon-button{display:grid;width:28px;height:28px;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:7px;color:#fff;background:#ffffff0e;cursor:pointer}.icon-button:hover{background:#ffffff1c}.control{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 10px;margin-top:12px}.control label{color:#ffffff9e;font-size:11px}.control output{color:#ffffffe6;font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.control input{grid-column:1 / -1;width:100%;height:3px;accent-color:var(--accent);cursor:pointer}.modifier-title{margin-top:17px;padding-top:12px;border-top:1px solid rgba(255,255,255,.09);color:#ffffff6b;font:600 9px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}.restart{width:100%;margin-top:15px;padding:9px 10px;border:1px solid rgba(255,255,255,.11);border-radius:8px;color:#ffffffc2;background:#ffffff0b;cursor:pointer;font-size:11px}.restart:hover{color:#fff;background:#ffffff17}.standalone-links{display:grid;gap:5px;margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.09)}.standalone-kicker{margin-bottom:2px;color:#fff6;font:600 9px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}.standalone-links a{color:#ffffff9e;font-size:10px;text-decoration:none}.standalone-links a:hover,.standalone-links a:focus-visible{color:#ffad7c}.overview-labels{position:absolute;z-index:2;inset:0;pointer-events:none}.scene-label{position:absolute;min-width:124px;padding:17px 8px 0;opacity:.82;text-shadow:0 2px 10px #000;transform:translate(-50%)}.scene-label strong{display:block;margin-top:4px;font-size:12px;font-weight:580}.focus-card{position:absolute;z-index:3;left:24px;bottom:92px;max-width:370px;padding:14px 15px;border-left:1px solid var(--accent);background:linear-gradient(90deg,rgba(5,6,8,.82),transparent);pointer-events:none}.focus-card h2{margin:5px 0;font-size:18px;font-weight:520}.focus-card p{margin:0;color:#ffffff94;font-size:12px;line-height:1.5}.switcher{position:absolute;z-index:4;left:50%;bottom:22px;display:flex;align-items:center;gap:5px;padding:6px;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:#080a0cd6;box-shadow:0 16px 55px #00000073;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transform:translate(-50%)}.switcher button{min-width:34px;height:32px;padding:0 10px;border:0;border-radius:7px;color:#ffffff7a;background:transparent;cursor:pointer;font-size:11px}.switcher button:hover{color:#fff;background:#ffffff12}.switcher button[aria-pressed=true]{color:#fff;background:var(--accent-soft);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.28)}.switcher .arrow{min-width:30px;padding:0;font-size:16px}.loading,.error-panel{position:absolute;z-index:10;inset:0;display:grid;place-items:center;padding:24px;background:#050608}.loading-inner{width:min(340px,80vw)}.loading-title{margin-bottom:12px;font-size:13px;letter-spacing:.02em}.loading-track{height:2px;overflow:hidden;background:#ffffff14}.loading-bar{width:38%;height:100%;background:var(--accent);box-shadow:0 0 16px var(--accent);animation:load 1.1s ease-in-out infinite alternate}@keyframes load{to{transform:translate(165%)}}.error-panel{text-align:center}.error-panel div{max-width:520px}.error-panel h1{margin:0 0 10px;font-size:25px;font-weight:520}.error-panel p{color:#ffffff94;line-height:1.6}.hidden{display:none!important}@media(max-width:760px){.topbar{padding:16px}.inspector{top:76px;right:12px;width:190px}.status-cluster .badge:last-child{display:none}.focus-card{left:16px;right:16px;bottom:80px}.switcher{bottom:14px;max-width:calc(100vw - 16px)}.switcher button{min-width:24px;padding:0 5px}.switcher button span{display:none}}