:root{--color-bg-inner:#14121f;--color-bg-outer:#0a0910;--color-text:#e8e6f0;--color-text-muted:#9a94ad;--color-text-faint:#6c6680;--color-accent:#7c3aed;--color-accent-2:#06b6d4;--color-error-bg:#b4283cd9;--color-surface:#100e1899;--color-border:#ffffff14;--space-hud-y:1.5rem;--space-hud-x:1.75rem;--radius-sm:.625rem;--radius-md:.875rem;--radius-lg:1.125rem;--font-sans:"Google Sans", system-ui, -apple-system, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font-sans);background:radial-gradient(75rem 50rem at 50% 40%, var(--color-bg-inner) 0%, var(--color-bg-outer) 70%);color:var(--color-text);overflow:hidden}.stage{position:fixed;inset:0}.gl{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.hud{padding:var(--space-hud-y) var(--space-hud-x);pointer-events:none;justify-content:space-between;align-items:flex-start;display:flex;position:absolute;top:0;left:0;right:0}.hud .title{align-items:center;gap:.375rem;display:flex}.wordmark-icon{width:2.25rem;height:2.75rem;display:block}.wordmark{width:11rem;height:3rem;display:block}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.actions{pointer-events:auto;align-items:center;gap:.625rem;display:flex}.text-input{font:inherit;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);outline:none;width:13rem;padding:.625rem .875rem;font-size:.875rem;transition:border-color .15s}.text-input::placeholder{color:var(--color-text-faint)}.text-input:focus{border-color:#7c3aed99}.upload{font:inherit;color:#fff;background:linear-gradient(135deg, var(--color-accent), var(--color-accent-2));border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;border:none;padding:.625rem 1.25rem;font-size:.875rem;font-weight:600}.controls{bottom:var(--space-hud-y);left:var(--space-hud-x);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);flex-direction:column;gap:.625rem;width:13.75rem;padding:1rem 1.125rem;display:flex;position:absolute}.controls label{text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);flex-direction:column;gap:.25rem;font-size:.6875rem;display:flex}.controls input[type=range]{accent-color:var(--color-accent);cursor:pointer}.controls .checkbox{cursor:pointer;flex-direction:row;align-items:center;gap:.5rem}.controls .checkbox input{accent-color:var(--color-accent);cursor:pointer}.controls .meta{color:var(--color-text-faint);text-align:right;font-size:.6875rem}.error{bottom:calc(var(--space-hud-y) + 2.75rem);right:var(--space-hud-x);background:var(--color-error-bg);border-radius:var(--radius-sm);padding:.75rem 1.125rem;font-size:.8125rem;position:absolute}.links{bottom:var(--space-hud-y);right:var(--space-hud-x);align-items:center;gap:.875rem;display:flex;position:absolute}.links a{color:var(--color-text-muted);transition:color .15s;display:block}.links a:hover{color:var(--color-text)}.links svg{fill:currentColor;width:1.375rem;height:1.375rem;display:block}.links .npm-mark{width:2.7rem;height:1.05rem}.stage.dragging:after{content:"";border-radius:var(--radius-lg);pointer-events:none;border:2px dashed #7c3aedcc;position:absolute;inset:.75rem}.drop-hint{color:#e8e6f0e6;pointer-events:none;font-size:1.75rem;font-weight:600;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (width<=40em){.hud{flex-direction:column;gap:.875rem}.actions{width:100%}.actions form{flex:1}.text-input{width:100%}.controls{display:none}}