@layer ui-sdk;:root{--ui-bg:#000;--ui-surface:#0a0a0a;--ui-surface-hover:#141414;--ui-surface-active:#1f1f1f;--ui-border:#1f1f1f;--ui-border-hover:#333;--ui-text:#ededed;--ui-text-muted:#737373;--ui-text-dim:#404040;--ui-accent:#fff;--ui-ring:#fff;--ui-radius-sm:0px;--ui-radius-md:2px;--ui-font-mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--ui-font-sans:"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--ui-bg:#fff;--ui-surface:#fafafa;--ui-surface-hover:#f4f4f5;--ui-surface-active:#e4e4e7;--ui-border:#e4e4e7;--ui-border-hover:#a1a1a1;--ui-text:#0a0a0a;--ui-text-muted:#737373;--ui-text-dim:#a1a1a1;--ui-accent:#0a0a0a;--ui-ring:#0a0a0a}}[role=listbox]{-webkit-user-select:none;user-select:none;outline:none}[role=option]{cursor:pointer;color:var(--ui-text-muted);border-radius:var(--ui-radius-sm);background:0 0;border:1px solid #0000;outline:none;justify-content:center;align-items:center;transition:color .1s,background-color .1s;display:inline-flex;position:relative}[role=option]:hover,[role=option][data-hovered]{background:var(--ui-surface-hover);color:var(--ui-text)}[role=option]:focus-visible,[role=option][data-focused]{outline:2px solid var(--ui-ring);outline-offset:1px;z-index:3;color:var(--ui-text)}[role=option][aria-selected=true],[role=option][data-picked]{color:var(--ui-text);background:0 0}[role=option][aria-selected=true]:after,[role=option][data-picked]:after{content:"";background-color:var(--ui-accent);pointer-events:none;border-radius:50%;width:3px;height:3px;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}[role=option][data-highlighted]{background:var(--ui-surface-hover);color:var(--ui-text)}[role=option][aria-disabled=true],[disabled]{opacity:.3;cursor:not-allowed;pointer-events:none}:focus-visible{outline:2px solid var(--ui-ring);outline-offset:2px}body{background-color:var(--ui-bg);color:var(--ui-text);font-family:var(--ui-font-sans);-webkit-font-smoothing:antialiased;min-height:100vh;margin:0}#root{flex-direction:column;min-height:100vh;display:flex}.demo-page{box-sizing:border-box;flex-direction:column;flex:1;gap:24px;width:100%;max-width:860px;margin:0 auto;padding:48px 24px 110px;display:flex}.demo-header{flex-direction:column;gap:6px;display:flex}.demo-title{letter-spacing:-.02em;color:var(--ui-text);margin:0;font-size:16px;font-weight:600}.demo-pitch{color:var(--ui-text-muted);margin:0;font-size:13px;line-height:1.5}[data-slot=loadout-picker]{flex-direction:column;gap:16px;width:100%;display:flex}.search-row{align-items:center;width:100%;display:flex;position:relative}[data-slot=loadout-picker-search]{box-sizing:border-box;border:none;border-bottom:1px solid var(--ui-border);width:100%;height:36px;color:var(--ui-text);font-size:13px;font-family:var(--ui-font-sans);background:0 0;border-radius:0;outline:none;padding:0 36px 0 0;transition:border-color .1s}[data-slot=loadout-picker-search]:focus{border-bottom-color:var(--ui-text)}[data-slot=loadout-picker-search]::placeholder{color:var(--ui-text-dim)}.search-shortcut{font-family:var(--ui-font-mono);color:var(--ui-text-dim);border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);pointer-events:none;padding:1px 6px;font-size:11px;position:absolute;right:0}.canvas-split{grid-template-columns:1fr 220px;align-items:start;gap:28px;display:grid}@media (width<=760px){.canvas-split{grid-template-columns:1fr;gap:20px}}[data-slot=loadout-picker-grid]{box-sizing:border-box;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;display:grid}@media (width<=560px){[data-slot=loadout-picker-grid]{grid-template-columns:repeat(8,minmax(0,1fr))}}[data-slot=loadout-picker-item]{aspect-ratio:1;width:100%;padding:0}[data-slot=loadout-picker-preview]{border-left:1px solid var(--ui-border);box-sizing:border-box;flex-direction:column;padding-left:24px;display:flex}@media (width<=760px){[data-slot=loadout-picker-preview]{border-left:none;border-top:1px solid var(--ui-border);padding-top:16px;padding-left:0}}.preview-pane{flex-direction:column;gap:12px;display:flex}.preview-icon{color:var(--ui-text);justify-content:flex-start;align-items:center;display:flex}.preview-meta{flex-direction:column;gap:2px;display:flex}.preview-name{letter-spacing:-.01em;color:var(--ui-text);font-size:14px;font-weight:600}.preview-id{font-family:var(--ui-font-mono);color:var(--ui-text-dim);font-size:11px}.preview-keywords{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.preview-keyword{font-family:var(--ui-font-mono);color:var(--ui-text-dim);font-size:11px}.preview-keyword+.preview-keyword:before{content:"· ";color:var(--ui-text-dim);margin-right:4px}.loadout-bar{z-index:50;background:var(--ui-bg);border-top:1px solid var(--ui-border);box-sizing:border-box;padding:12px 24px;position:fixed;bottom:0;left:0;right:0}.loadout-bar-inner{justify-content:space-between;align-items:center;gap:16px;max-width:860px;margin:0 auto;display:flex}[data-slot=loadout-picker-loadout]{flex-wrap:nowrap;align-items:center;gap:4px;display:flex}[data-slot=loadout-picker-loadoutItem],[data-slot=loadout-picker-loadout-item]{cursor:pointer;width:32px;height:32px;color:var(--ui-text);border-radius:var(--ui-radius-sm);background:0 0;border:1px solid #0000;outline:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:background-color .1s,color .1s;display:inline-flex;position:relative}[data-slot=loadout-picker-loadoutItem]:after,[data-slot=loadout-picker-loadout-item]:after{content:"";background-color:var(--ui-text);border-radius:1px;height:2px;position:absolute;bottom:0;left:6px;right:6px}[data-slot=loadout-picker-loadoutItem]:hover,[data-slot=loadout-picker-loadout-item]:hover{background:var(--ui-surface-hover)}[data-slot=loadout-picker-loadoutItem]:focus-visible,[data-slot=loadout-picker-loadout-item]:focus-visible{outline:2px solid var(--ui-ring);outline-offset:1px;z-index:2}.loadout-slot-empty{box-sizing:border-box;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;display:inline-flex;position:relative}.loadout-slot-empty:after{content:"";background-color:var(--ui-border);height:1px;position:absolute;bottom:0;left:8px;right:8px}[data-slot=loadout-picker-clear]{height:32px;color:var(--ui-text-muted);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);font-size:12px;font-weight:500;font-family:var(--ui-font-sans);cursor:pointer;white-space:nowrap;background:0 0;outline:none;padding:0 12px;transition:color .1s,border-color .1s,background-color .1s}[data-slot=loadout-picker-clear]:hover:not([disabled]):not([data-disabled]){color:var(--ui-text);border-color:var(--ui-border-hover);background:var(--ui-surface-hover)}[data-slot=loadout-picker-clear]:focus-visible{outline:2px solid var(--ui-ring);outline-offset:2px}[data-slot=loadout-picker-clear][data-disabled],[data-slot=loadout-picker-clear][disabled]{opacity:.3;cursor:not-allowed}.demo-footnote{border-top:1px solid var(--ui-border);font-family:var(--ui-font-mono);color:var(--ui-text-dim);padding-top:16px;font-size:11px;line-height:1.6}.demo-footnote code{color:var(--ui-text-muted);font-family:inherit}