*{margin:0;padding:0;box-sizing:border-box}body{background:transparent;color:var(--fg-neutral-1-rest);font-family:var(--font-family-base);overflow:hidden;width:100vw;height:100vh}[data-theme=light] body{background:var(--bg-neutral-6-rest)}canvas{display:block;width:100%;height:100%;cursor:grab}canvas.grabbing{cursor:grabbing}#hud{position:fixed;top:16px;inset-inline-start:16px;background:var(--bg-neutral-3-rest);color:var(--fg-neutral-1-rest);border:1px solid var(--stroke-neutral-2-rest);padding:var(--spacing-80) var(--spacing-160);border-radius:20px;font-size:var(--font-size-body-1);font-weight:var(--font-weight-subtitle-2);z-index:10;pointer-events:none;user-select:none}#controls{position:fixed;bottom:20px;inset-inline-end:20px;display:flex;flex-direction:column;gap:var(--spacing-80);z-index:10}#controls.collapsed .ctrl-body{display:none}.ctrl-toggle{align-self:flex-end;padding:8px 14px;background:var(--bg-neutral-3-rest);color:var(--fg-neutral-2-rest);border:1px solid var(--stroke-neutral-2-rest);border-radius:var(--radius-large);font-family:inherit;font-size:var(--font-size-body-1);cursor:pointer;transition:background .15s,color .15s}.ctrl-toggle:hover{background:var(--bg-neutral-4-rest, #333);color:var(--fg-neutral-1-rest)}.ctrl-body{background:var(--bg-neutral-3-rest);border:1px solid var(--stroke-neutral-2-rest);border-radius:8px;padding:var(--spacing-160);display:flex;flex-direction:column;gap:var(--spacing-120);min-width:220px}.ctrl-body label{font-size:var(--font-size-caption-1);color:var(--fg-neutral-2-rest);display:flex;flex-direction:column;gap:var(--spacing-40)}.ctrl-body input[type=range]{width:100%;accent-color:var(--fg-brand-1-rest)}.ctrl-body button{padding:8px 14px;background:var(--bg-neutral-2-rest);color:var(--fg-neutral-2-rest);border:1px solid var(--stroke-neutral-2-rest);border-radius:var(--radius-large);font-family:inherit;font-size:var(--font-size-body-1);cursor:pointer;transition:background .15s,color .15s}.ctrl-body button:hover{background:var(--bg-neutral-4-rest, #333);color:var(--fg-neutral-1-rest)}#picker-overlay{position:fixed;inset:0;background:var(--overlay-background);z-index:100;display:flex;align-items:center;justify-content:center}#picker-overlay.hidden{display:none}#picker{background:var(--bg-neutral-2-rest);border:1px solid var(--stroke-neutral-2-rest);border-radius:12px;width:90vw;max-width:720px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}#picker-header{padding:var(--spacing-160) var(--spacing-200);border-bottom:1px solid var(--stroke-neutral-2-rest);font-size:var(--font-size-body-2-stronger);font-weight:var(--font-weight-subtitle-2);flex-shrink:0}#picker-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--spacing-40);padding:var(--spacing-120);overflow-y:auto;flex:1}.picker-thumb{aspect-ratio:1;background:var(--stroke-neutral-2-rest);border-radius:var(--radius-medium);cursor:pointer;overflow:hidden;border:2px solid transparent;transition:border-color .12s,transform .12s}.picker-thumb:hover{border-color:var(--fg-brand-1-rest)}.picker-thumb img{width:100%;height:100%;object-fit:cover;display:block}#picker-footer{padding:var(--spacing-120) var(--spacing-200);border-top:1px solid var(--stroke-neutral-2-rest);display:flex;justify-content:center;gap:var(--spacing-80);flex-shrink:0}#picker-footer button{padding:var(--spacing-80) var(--spacing-160);background:var(--bg-neutral-3-rest);color:var(--fg-neutral-2-rest);border:1px solid var(--stroke-neutral-2-rest);border-radius:var(--radius-large);font-family:inherit;font-size:var(--font-size-body-1);cursor:pointer;transition:background .15s}#picker-footer button:hover{background:var(--bg-neutral-4-rest, #333);color:var(--fg-neutral-1-rest)}#picker-footer button:disabled{opacity:.3;cursor:default}#complete-overlay{position:fixed;inset:0;background:#000000b3;z-index:50;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .5s}#complete-overlay.show{opacity:1;pointer-events:auto}#complete-overlay .msg{font-size:var(--font-size-large-title-2);font-weight:var(--font-weight-subtitle-2);color:var(--fg-neutral-inverted-rest);text-shadow:0 0 40px rgba(123,157,255,.6)}
