/* Fielder components: tokens → primitives → workspace → overlays → responsive. */
:root {
  color-scheme: dark;
  --frame:#000; --stage:#000; --surface:#121212; --surface-2:#1c1c1c;
  --cream:#292929; --white:#1c1c1c; --chip-hover:#292929;
  --ink:#ecebe6; --ink-hover:#fff; --text:#ecebe6; --muted:#aaa; --faint:#888;
  --line:rgba(255,255,255,.14); --focus:#fff; --tile:#292929; --ring:rgba(255,255,255,.75);
  --signal:#d6ff7f; --signal-deep:#d6ff7f; --ok:#6fcf7f; --busy:#e0a43a; --danger:#ff6a52;
  --r:4px; --r-sm:3px; --gap:32px; --header:68px; --dock-height:44px;
  --edge-1:inset 0 0 0 1px var(--line); --shadow:0 12px 40px #0009;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; height:100%; overflow:hidden; background:var(--frame); color:var(--text); font:400 12px/1.45 Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
button,input,textarea,a { font:inherit; color:inherit; }
button,a,input,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.45; }
:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
button { transition:background-color .15s, color .15s; }
button:active:not(:disabled) { transform:scale(.96); }
.row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.row.nowrap { flex-wrap:nowrap; }
.text-btn,.value-btn { border:0; background:none; min-height:32px; padding:4px 8px; border-radius:var(--r-sm); }
.text-btn:hover,.value-btn:hover { background:var(--surface-2); }
.value-btn { text-decoration:underline; text-underline-offset:3px; }
.chip { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:28px; padding:4px 10px; background:var(--surface-2); box-shadow:var(--edge-1); border:0; border-radius:var(--r-sm); text-decoration:none; white-space:nowrap; }
.chip:hover { background:var(--chip-hover); }
.chip.lg { min-height:36px; padding:6px 12px; }
.chip.dark,.cta { background:var(--ink); color:#111; box-shadow:none; }
.chip.dark:hover,.cta:hover { background:#fff; }
.chip.danger { background:var(--danger); color:#111; }
.cta { border:0; border-radius:var(--r); padding:0 18px; min-height:44px; font-size:14px; white-space:nowrap; }
.cta span { font-size:22px; margin-inline-end:8px; vertical-align:-1px; }
.cta.sm { min-height:36px; padding:6px 12px; font-size:13px; }
.field,.space-name { min-width:0; width:100%; min-height:36px; padding:8px 12px; background:var(--surface-2); box-shadow:var(--edge-1); border:0; border-radius:var(--r); }
textarea.field { resize:vertical; }
.field::placeholder { color:var(--faint); }
.label { display:block; color:var(--text); }
.hint { color:var(--muted); margin:0; }
.count { color:var(--muted); font-size:11px; white-space:nowrap; }
.danger-text { color:var(--danger); }
/* Header owns its three columns; collections scroll within their column. */
.frame-bar { position:fixed; inset:0 0 auto; height:calc(var(--header) + env(safe-area-inset-top)); padding:env(safe-area-inset-top) var(--gap) 0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:24px; }
.brand { display:flex; align-items:center; gap:20px; min-width:0; }

.tagline { color:var(--faint); font-size:11px; white-space:nowrap; }
.bar-right { display:flex; align-items:center; gap:8px; }
.spaces { display:flex; align-items:center; justify-self:center; min-width:0; max-width:100%; overflow-x:auto; gap:4px; scrollbar-width:thin; }
.spaces button { display:flex; align-items:center; gap:6px; flex:none; min-height:32px; padding:4px 8px; border:0; border-radius:var(--r-sm); background:none; color:var(--muted); white-space:nowrap; }
.spaces button:hover { background:var(--surface-2); color:var(--text); }
.spaces button[aria-pressed=true] { background:#202020; color:var(--text); }
.spaces .del { color:var(--danger); }
.space-name { width:140px; }
.stage { position:fixed; top:calc(var(--header) + env(safe-area-inset-top)); inset-inline:0; bottom:0; overflow:hidden; background:var(--stage); }
#field { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
#field.panning { cursor:grabbing; }
.steps { display:flex; align-items:center; gap:4px; padding:4px; min-width:0; overflow-x:auto; scrollbar-width:thin; background:#121212; border-radius:6px; }
.steps button { flex:none; min-height:32px; padding:4px 14px; border:0; border-radius:3px; background:none; color:var(--muted); white-space:nowrap; }
.steps button:hover { background:#222; color:var(--text); }
.steps button[aria-pressed=true] { background:var(--ink); color:#111; }
.key { display:none; }
/* The dock lays out controls together, instead of independent screen coordinates. */
.workspace-dock { position:absolute; left:50%; translate:-50% 0; bottom:54px; z-index:5; width:min(560px,calc(100% - 64px)); display:flex; flex-direction:column; align-items:center; gap:12px; }
.view-tools { order:2; display:flex; align-items:center; gap:2px; padding:2px; background:#0c0c0c; border-radius:4px; }
.view-tools button { min-height:32px; min-width:32px; padding:4px 12px; border:0; border-radius:3px; background:none; color:var(--muted); white-space:nowrap; font-size:11px; }
.view-tools button:hover { background:var(--surface-2); color:var(--text); }
#zoomIn,#zoomOut { font-size:18px; }
.search { position:relative; display:flex; align-items:center; gap:12px; width:100%; min-width:0; min-height:56px; padding:12px 16px; background:#171717; box-shadow:inset 0 0 0 1px #ffffff21,0 8px 32px #000a; border-radius:6px; }
.search svg { width:16px; height:16px; flex:none; fill:none; stroke:var(--muted); stroke-width:1.5; stroke-linecap:round; }
.search input { flex:1; width:0; min-width:40px; border:0; padding:0; background:none; outline:none; font-size:15px; line-height:1.4; }
.search input::placeholder { color:var(--muted); }
.search input::-webkit-search-cancel-button { display:none; }
.search:focus-within { box-shadow:inset 0 0 0 1px var(--focus); }
.result { display:flex; align-items:center; gap:8px; min-width:0; max-width:55%; color:var(--muted); }
#resultLabel { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.meta { position:absolute; top:88px; right:32px; z-index:7; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px 24px; width:280px; margin:0; padding:20px; background:#171717; box-shadow:var(--edge-1),var(--shadow); border-radius:6px; }
.meta dt { color:var(--muted); }
.meta dd { display:flex; align-items:center; gap:8px; min-width:0; margin:0; }
.meta input[type=range] { width:110px; height:24px; accent-color:var(--ink); margin:0; cursor:pointer; }
.meta output { color:var(--muted); }
#status { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dot { flex:none; width:6px; height:6px; border-radius:50%; background:var(--ok); }
.dot.busy { background:var(--busy); }
/* Panels share one surface and spacing vocabulary. */
.intro,.panel { position:absolute; top:88px; right:32px; width:320px; z-index:6; display:flex; flex-direction:column; gap:16px; padding:20px; max-height:calc(100% - var(--dock-height) - 168px); overflow-y:auto; overscroll-behavior:contain; background:#151515; box-shadow:var(--edge-1),var(--shadow); border-radius:6px; }
.intro h2,.p-name { font-size:14px; font-weight:500; line-height:1.35; margin:0; overflow-wrap:anywhere; }
.intro p { margin:0; color:var(--muted); }
.intro ol { display:grid; gap:8px; padding-inline-start:18px; margin:0; }
.intro li::marker { color:var(--faint); }
.panel-head { display:flex; align-items:start; justify-content:space-between; gap:12px; }
.p-titles { min-width:0; }
.p-meta { color:var(--muted); margin-top:4px; }
.p-img { display:flex; align-items:center; justify-content:center; min-height:120px; background:var(--surface-2); border-radius:var(--r-sm); overflow:hidden; }
.p-img img { display:block; max-width:100%; max-height:35dvh; object-fit:contain; }
.swatches { display:flex; gap:3px; min-height:28px; }
.swatch { flex-basis:0; min-width:24px; min-height:28px; padding:0; border:0; border-radius:2px; box-shadow:inset 0 0 0 1px #ffffff26; }
.p-hint { margin:0; color:var(--muted); }
.p-hint:empty { display:none; }
.empty { position:absolute; inset:64px 16px calc(var(--dock-height) + 170px); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; z-index:2; pointer-events:none; }
.empty>* { pointer-events:auto; }
.empty h2 { font-size:24px; font-weight:400; margin:0 0 12px; letter-spacing:-.03em; }
.empty p { max-width:360px; color:var(--muted); margin:0 0 20px; }
.empty .row { justify-content:center; }
/* Dialog header stays visible while its own content scrolls. */
.dlg { width:min(460px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; overflow-y:auto; overscroll-behavior:contain; background:var(--surface); color:var(--text); border:0; border-radius:var(--r); box-shadow:var(--edge-1),var(--shadow); }
.dlg::backdrop { background:#000b; backdrop-filter:blur(8px); }
.dlg-head { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; background:var(--surface); }
.dlg-head h2 { margin:0; font-size:14px; font-weight:500; }
.dlg-sec { display:flex; flex-direction:column; gap:10px; padding:12px 16px 20px; }
.browse-dlg { width:min(800px,calc(100vw - 32px)); }
.browse-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px; padding:16px; }
.browse-list button { min-width:0; padding:8px; border:0; border-radius:var(--r-sm); background:var(--surface-2); text-align:start; }
.browse-list button:hover { box-shadow:var(--edge-1); }
.browse-list img { display:block; width:100%; height:110px; object-fit:contain; margin-bottom:8px; }
.browse-list span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.browse-empty { color:var(--muted); grid-column:1/-1; margin:0; }
.lens-label { position:absolute; top:0; left:0; z-index:2; pointer-events:none; display:flex; align-items:center; gap:10px; max-width:calc(100% - 32px); white-space:nowrap; font-size:28px; letter-spacing:-.03em; text-shadow:0 0 16px #000,0 0 6px #000; }
.strip { position:absolute; bottom:calc(var(--dock-height) + 72px); left:50%; translate:-50% 0; z-index:3; width:min(420px,calc(100% - 64px)); margin:0; padding:12px 16px; background:#111e; border-radius:4px; box-shadow:var(--edge-1); }
.strip figcaption { display:flex; justify-content:space-between; gap:16px; margin-bottom:8px; font-size:10px; color:var(--muted); }
.strip figcaption span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.strip svg { display:block; width:100%; height:40px; overflow:visible; }
.strip line { stroke:#555; stroke-width:1; vector-effect:non-scaling-stroke; }
.strip line.hot { stroke:var(--ink); }
.strip circle { fill:var(--signal); }
.strip text { fill:var(--muted); font:10px Helvetica,Arial,sans-serif; }
.lens-label span { overflow:hidden; text-overflow:ellipsis; }
.lens-label span:first-child { color:var(--muted); }
.lens-label i { color:var(--signal); font-style:normal; }

.axis-word { position:absolute; left:0; top:0; z-index:3; field-sizing:content; min-width:3ch; max-width:180px; font-size:14px; padding:4px 8px; border:0; border-radius:var(--r-sm); background:#000b; text-shadow:0 0 6px #000; }
.axis-word:hover,.axis-word:focus { background:var(--surface-2); }
.drop { position:absolute; inset:16px; z-index:10; display:flex; align-items:center; justify-content:center; pointer-events:none; background:#000b; border:1px dashed var(--ink); border-radius:var(--r); font-size:16px; }

.wordmark { font:italic 28px/1 Georgia,serif; letter-spacing:-.06em; }
.frame-bar { box-shadow: none; } /* no dividers */
.cta { min-height:36px; padding-inline:14px; font-size:12px; border-radius:4px; }
.cta span { font-size:18px; margin-inline-end:6px; }
.viewbar { position:absolute; top:24px; left:32px; right:32px; z-index:4; display:grid; grid-template-columns:minmax(160px,1fr) auto minmax(160px,1fr); align-items:center; gap:24px; }
.collection-heading { min-width:0; }
.eyebrow { display:block; font-size:9px; letter-spacing:.12em; color:var(--faint); margin-bottom:4px; }
.collection-heading h1 { font-size:17px; font-weight:400; letter-spacing:-.02em; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#settingsBtn { justify-self:end; display:flex; align-items:center; gap:14px; min-height:36px; border:0; border-radius:4px; background:none; padding:6px 10px; font-size:11px; color:var(--muted); }
#settingsBtn:hover,#settingsBtn[aria-expanded=true] { background:#1c1c1c; color:var(--text); }
#settingsBtn span { color:var(--faint); font-size:16px; }
#settingsBtn[aria-expanded=true] span { rotate:180deg; }
.settings-heading { font-size:13px; color:var(--text) !important; }
.library-status { position:absolute; bottom:20px; left:32px; z-index:3; display:flex; align-items:center; gap:8px; max-width:60%; font-size:10px; color:var(--muted); }
.library-status .count { margin-inline-start:8px; font-size:10px; }
.canvas-hint { position:absolute; bottom:20px; right:32px; margin:0; font-size:10px; color:var(--faint); }
.canvas-hint span { margin-inline:8px; }
.search-label { position:absolute; bottom:calc(100% + 10px); left:0; width:100%; color:var(--faint); text-align:center; font-size:10px; pointer-events:none; }
#motionBtn[aria-pressed=true] { color:var(--signal); }
.panel-head .text-btn { color:var(--muted); }
.p-name { font-size:17px; letter-spacing:-.02em; }
.p-meta { font-size:11px; line-height:1.5; }
.p-img { background:#0c0c0c; min-height:180px; }
.swatches { min-height:24px; }
.swatch { min-height:24px; }
.p-hint { font-size:11px; line-height:1.6; }
.intro h2 { font-size:20px; font-weight:400; letter-spacing:-.03em; }
.intro p,.intro li { line-height:1.6; }
.dlg-head h2 { font-size:18px; font-weight:400; letter-spacing:-.02em; }
.dlg-head { padding:20px 24px 12px; }
.dlg-sec { padding:12px 24px 24px; }
.stage:has(.panel:not([hidden])) .strip { display:none; }
.stage:has(.result:not([hidden])) .search-label { visibility:hidden; }
@media(max-width:1100px) {
  .tagline { display:none; }
  .viewbar { grid-template-columns:minmax(120px,1fr) auto; gap:16px; }
  .steps { grid-column:1; grid-row:2; justify-self:start; }
  #settingsBtn { grid-column:2; grid-row:2; }
  .intro,.panel,.meta { top:132px; }
}
@media(max-width:640px) {
  :root { --gap:20px; --header:104px; }
  .frame-bar { grid-template-columns:1fr auto; grid-template-rows:52px 44px; gap:0 12px; align-content:start; }
  .brand { grid-column:1; grid-row:1; }
  .wordmark { font-size:26px; }
  .bar-right { grid-column:2; grid-row:1; gap:4px; }
  .bar-right .text-btn { padding-inline:6px; font-size:11px; }
  .spaces { grid-column:1/-1; grid-row:2; justify-self:stretch; }
  .viewbar { top:16px; left:20px; right:20px; grid-template-columns:minmax(0,1fr) auto; gap:12px; }
  .eyebrow { display:none; }
  .collection-heading h1 { font-size:16px; }
  .steps { grid-column:1/-1; grid-row:2; width:100%; justify-self:stretch; gap:0; padding:3px; }
  .steps button { flex:1; min-width:0; min-height:34px; padding:4px 8px; font-size:11px; }
  #settingsBtn { grid-column:2; grid-row:1; min-height:32px; padding:4px 0 4px 8px; gap:8px; }
  .workspace-dock { width:calc(100% - 40px); bottom:max(54px,calc(env(safe-area-inset-bottom) + 36px)); gap:10px; }
  .search { min-height:52px; padding:12px; gap:8px; }
  .search input,.field,.axis-word { font-size:16px; }
  .search-label { font-size:10px; bottom:calc(100% + 8px); }
  .view-tools { justify-content:center; width:100%; }
  .view-tools button { padding:4px 12px; min-height:36px; }
  .library-status { left:20px; right:20px; bottom:max(16px,env(safe-area-inset-bottom)); max-width:none; font-size:9px; }
  .library-status .count { font-size:9px; margin-inline-start:auto; }
  .canvas-hint { display:none; }
  .intro,.panel { top:112px; left:20px; right:20px; width:auto; max-height:calc(100% - var(--dock-height) - 190px); padding:16px; }
  .meta { top:112px; right:20px; width:min(280px,calc(100% - 40px)); }
  .lens-label,.strip { display:none; }
  .empty { top:112px; bottom:calc(var(--dock-height) + 90px); }
  .swatch { min-height:28px; }
}
@media(max-width:360px) {
  .view-tools button { padding-inline:8px; }
  .steps button { padding-inline:6px; font-size:10px; }
  #resultLabel { display:none; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } }
@media(forced-colors:active) { button,input,textarea { border:1px solid ButtonText; } :focus-visible { outline:2px solid Highlight; } }
/* Views share the dark canvas; links use the existing ink and signal tokens. */
@media(max-width:640px) { .steps button { flex:none; padding-inline:12px; font-size:11px; } }

/* Bottom-left notes removed from view (Renaise, 2026-10-22). The status stays in the page,
   visually hidden, so screen readers still hear progress such as the model download. */
.library-status { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ================= one system =================
   Measured 2026-10-22: three typefaces, radii 3/4/6, seven heights, eight text sizes, four panel
   tones and two different selected states. Everything below resolves to one set. Later rules win.
   type: Inter Tight · 12px controls, 14px search, 17px headings · radius 4px everywhere
   heights: 32 buttons, 40 groups, 44 search · one surface + one hairline · one selected state */
:root { --font: "Inter Tight", ui-sans-serif, system-ui, sans-serif; --surf: #141414; --sel: #262626; --hair: inset 0 0 0 1px rgba(236,235,230,.1); --r: 4px; }
html, body, button, input, textarea, select { font-family: var(--font); }

/* brand: rabbit + capsule wordmark (the one exception to the single typeface) */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand .rabbit { width: 20px; height: 20px; display: block; }
.logotype { height: 22px; width: auto; display: block; color: var(--ink); }
.tagline { font-size: 12px; color: var(--muted); margin-left: 4px; }

/* every button */
.frame-bar button, .steps button, .view-tools button, #settingsBtn, .text-btn, .chip, .chip.lg, .cta, .cta.sm, #addBtn, #pSimilar, #pLink {
  height: 32px; min-height: 32px; border-radius: var(--r); font-size: 12px; font-weight: 400;
}
.chip.lg, .chip { padding: 0 12px; }
#zoomIn, #zoomOut { font-size: 16px; min-width: 32px; }
#addBtn, .cta:not(.sm) { padding: 0 14px; }

/* groups: one surface, one edge, 4px inner padding → 40px */
.steps, .view-tools { background: var(--surf); box-shadow: var(--hair); border: 0; border-radius: var(--r); padding: 4px; min-height: 40px; }

/* one selected state for views and collections */
.steps button[aria-pressed="true"], .spaces button[aria-pressed="true"] { background: var(--sel); color: var(--ink); box-shadow: none; }
.steps button[aria-pressed="true"]::before { content: none; }
.steps button { color: var(--muted); background: transparent; }

/* surfaces */
.search, .intro, .panel, .strip, .dlg, #librarySettings { background: var(--surf); box-shadow: var(--hair); border: 0; border-radius: var(--r); }
.search { height: 44px; min-height: 44px; }
.search input, #q { font-size: 14px; }

/* headings */
#spaceHeading, .p-name, .dlg-head h2 { font-size: 17px; font-weight: 400; letter-spacing: -0.01em; }

/* small text */
.search-label, .canvas-hint, .hint, .p-meta, .p-hint { font-size: 12px; }
@media (max-width: 640px) { .search input, #q, .axis-word { font-size: 16px; } .tagline { display: none; } }

#q { height: 100%; }

/* ================= omnibar =================
   Search and the canvas tools in one rounded, nested bar. Radii are concentric: the outer pill is
   26px with 6px padding, so everything nested inside is 20px (40px tall). The omnibar is the one
   rounded element; the rest of the system keeps 4px corners. */
.workspace-dock {
  flex-direction: row; align-items: center; gap: 4px;
  width: min(760px, calc(100% - 64px)); bottom: 28px; padding: 6px;
  background: var(--surf); box-shadow: var(--hair), 0 10px 32px #000a; border-radius: 26px;
}
.workspace-dock #search { order: 0; flex: 1; min-width: 0; height: 40px; min-height: 40px; padding: 0 14px; gap: 10px;
  border-radius: 20px; background: #0b0b0b; box-shadow: inset 0 0 0 1px rgba(236,235,230,.07); }
.workspace-dock #search:focus-within { box-shadow: inset 0 0 0 1px var(--focus); }
.workspace-dock .view-tools { order: 1; background: transparent; box-shadow: none; padding: 0; min-height: 40px; gap: 2px; border-radius: 20px; }
.workspace-dock .view-tools button { height: 40px; min-height: 40px; border-radius: 20px; padding: 0 13px; font-size: 12px; }
.workspace-dock #zoomIn, .workspace-dock #zoomOut { width: 40px; min-width: 40px; padding: 0; }
.workspace-dock .chip { border-radius: 14px; height: 28px; }
/* The label stays for screen readers; the placeholder carries the meaning on screen. */
.search-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 640px) {
  /* Two nested rows inside one rounded container: search, then the tools. */
  .workspace-dock { flex-wrap: wrap; width: calc(100% - 32px); border-radius: 24px; padding: 6px; bottom: max(16px, env(safe-area-inset-bottom)); }
  .workspace-dock #search { flex-basis: 100%; height: 44px; border-radius: 18px; }
  .workspace-dock .view-tools { width: 100%; justify-content: space-between; }
  .workspace-dock .view-tools button { padding: 0 10px; }
}

/* Logo: the supplied FIELDER capsule (fielder-logo.png, white on transparent, 284×116). */
.logotype { height: 28px; width: auto; display: block; }
@media (max-width: 640px) { .logotype { height: 26px; } }

/* ================= hotbar omnibar =================
   Views, search and tools share one bar, after game HUD hotbars: the views are slots, the equipped
   slot glows, and ‹ › cycle through them like shoulder buttons ([ and ] on the keyboard).
   Concentric radii: outer 26, nested segments 20, slots inside the view segment 17. */
.workspace-dock { width: min(1180px, calc(100% - 48px)); }
.workspace-dock .hotbar { order: -1; position: static; translate: none; display: flex; align-items: center; gap: 2px;
  height: 40px; min-height: 40px; padding: 3px; border-radius: 20px; background: #0b0b0b; box-shadow: inset 0 0 0 1px rgba(236,235,230,.07); flex: none; overflow-x: auto; scrollbar-width: none; }
.workspace-dock .hotbar button { height: 34px; min-height: 34px; border-radius: 17px; padding: 0 12px; font-size: 12px; color: var(--muted); background: transparent; white-space: nowrap; transition: background-color .15s, box-shadow .2s, color .15s; }
.workspace-dock .hotbar button:hover { color: var(--text); }
.workspace-dock .hotbar button[aria-pressed="true"] { color: var(--ink); background: var(--sel);
  box-shadow: inset 0 0 0 1px var(--signal), 0 0 14px color-mix(in srgb, var(--signal) 35%, transparent); }
.workspace-dock .hotbar .cycle { width: 30px; min-width: 30px; padding: 0; font-size: 16px; color: var(--faint); }
.workspace-dock #search { min-width: 200px; }
#settingsBtn { color: var(--muted); }
#settingsBtn[aria-expanded="true"] { color: var(--ink); background: var(--sel); }
/* The settings popover opens above the bar now that its button lives there. */
#librarySettings { top: auto; bottom: calc(28px + 52px + 12px); right: auto; left: 50%; translate: -50% 0; }
.viewbar { grid-template-columns: 1fr; }

@media (max-width: 900px) {
  .workspace-dock { flex-wrap: wrap; border-radius: 24px; }
  .workspace-dock .hotbar { flex-basis: 100%; justify-content: space-between; }
  .workspace-dock #search { flex-basis: 100%; }
  .workspace-dock .view-tools { width: 100%; justify-content: space-between; }
  #librarySettings { bottom: 190px; width: min(320px, calc(100% - 32px)); }
}

/* ================= buttons after tame.ooo =================
   Replaces the 4px rule. Measured on tame.ooo: full pills ~34px tall, generous side padding, ~15px
   type; primary is a solid pill, secondary a soft frosted pill with no border; a segmented control is
   a frosted group with a lighter pill for the selected item. Cards use soft 14px corners.
   Dark translation: primary = light pill / dark text; secondary = rgba(255,255,255,.08) + blur. */
:root { --pill: 9999px; --card: 14px; --glass-2: rgba(255,255,255,.08); --glass-3: rgba(255,255,255,.14); }

.chip, .chip.lg, #addBtn, .cta, .cta.sm, #pSimilar, #pLink, .spaces button, #settingsBtn, .dlg .chip {
  height: 34px; min-height: 34px; padding: 0 18px; border-radius: var(--pill); border: 0;
  font-size: 13.5px; font-weight: 400; letter-spacing: -0.005em;
  background: var(--glass-2); color: var(--text); box-shadow: none;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: background-color .15s, transform .12s, opacity .15s;
}
.chip:hover, .spaces button:hover, #settingsBtn:hover { background: var(--glass-3); }
.chip:active, #addBtn:active, .cta:active, #pSimilar:active, #pLink:active { transform: scale(.97); }
.chip { height: 28px; min-height: 28px; padding: 0 12px; font-size: 12.5px; }

/* primary: solid light pill */
#addBtn, .cta, .cta.sm, #pSimilar, .chip.dark { background: var(--ink); color: #111; }
#addBtn:hover, .cta:hover, #pSimilar:hover, .chip.dark:hover { background: #fff; }
#addBtn span { font-size: 15px; margin-right: 6px; }

/* collection tabs: a segmented control, selected = lighter pill */
.spaces { gap: 2px; padding: 3px; border-radius: var(--pill); background: var(--glass-2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.spaces button { height: 28px; min-height: 28px; padding: 0 12px; background: transparent; color: var(--muted); }
.spaces button[aria-pressed="true"] { background: var(--glass-3); color: var(--ink); }
.spaces .add { color: var(--faint); }

/* hotbar views and omnibar tools: same segmented treatment, no glow */
.workspace-dock .hotbar button[aria-pressed="true"] { background: var(--glass-3); color: var(--ink); box-shadow: none; }
.workspace-dock .view-tools button:hover, .workspace-dock .hotbar button:hover { background: var(--glass-2); color: var(--text); }
.workspace-dock { background: rgba(20,20,20,.72); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }

/* cards and dialogs: soft corners */
.intro, .panel, .strip, .dlg, #librarySettings, .browse-list button { border-radius: var(--card); }
.p-img { border-radius: 10px; }
.field, textarea.field { border-radius: 10px; }

/* the canvas hint sat under the wider omnibar */
.canvas-hint { display: none; }

.intro-examples { display: flex; flex-direction: column; gap: 8px; }
.intro-examples[hidden] { display: none; }
/* Settings in the omnibar is a tool like Fit or Browse: transparent until its menu is open. */
.workspace-dock #settingsBtn { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; height: 40px; min-height: 40px; border-radius: 20px; padding: 0 13px; font-size: 12px; color: var(--muted); }
.workspace-dock #settingsBtn:hover { background: var(--glass-2); color: var(--text); }
.workspace-dock #settingsBtn[aria-expanded="true"] { background: var(--glass-3); color: var(--ink); }
/* Tabs sit inside one frosted group; a per-tab blur drew a pill behind every tab. */
.spaces button { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Many collections scroll sideways; the fade shows there is more. */
.spaces { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 24px; }

/* ================= color tags, nested Add images, loading screen ================= */

/* Tags step aside while typing or while results show, so the field never crowds. */

.workspace-dock #addBtn { order: 2; height: 40px; min-height: 40px; border-radius: 20px; padding: 0 16px; flex: none; }
.workspace-dock #addBtn span:first-child { margin-right: 6px; }

.loader { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: #000; perspective: 700px; transition: opacity .45s ease; }
.loader[hidden] { display: none; }
.loader.done { opacity: 0; pointer-events: none; }
.loader img { width: 76px; height: 76px; animation: rabbit-spin 1.6s linear infinite; transform-style: preserve-3d; }
@keyframes rabbit-spin { to { transform: rotateY(360deg); } }
@keyframes rabbit-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .loader img { animation: rabbit-pulse 1.6s ease-in-out infinite !important; } }

@media (max-width: 900px) {
  .workspace-dock #search { flex-basis: calc(100% - 48px); }
  .workspace-dock #addBtn { order: 0; width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 22px; }
  .workspace-dock #addBtn .add-label { display: none; }
  .workspace-dock #addBtn span:first-child { margin: 0; font-size: 18px; }

}

.workspace-dock { width: min(1380px, calc(100% - 48px)); }
.workspace-dock #search { min-width: 300px; }

/* ================= elevation, no dividers =================
   No outlines or hairlines anywhere. Surfaces separate by elevation: each level is a lighter tone
   with a deeper, softer shadow.
   0 field #000 · 1 bars #111 · 2 nested segments #1b1b1b · 3 cards and dialogs #181818, deepest shadow ·
   hover #242424 · selected #2c2c2c */
:root {
  --e1: #111111; --e2: #1b1b1b; --e3: #181818; --e-hover: #242424; --e-sel: #2c2c2c;
  --lift-1: 0 6px 20px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.6);
  --lift-2: 0 2px 6px rgba(0,0,0,.45);
  --lift-3: 0 24px 64px rgba(0,0,0,.7), 0 4px 14px rgba(0,0,0,.5);
  --hair: none; --edge-1: none; --edge: none;
}
.workspace-dock { background: var(--e1); box-shadow: var(--lift-1); }
.workspace-dock .hotbar, .workspace-dock #search { background: var(--e2); box-shadow: var(--lift-2); }
.workspace-dock #search:focus-within { background: #202020; box-shadow: var(--lift-2), 0 0 0 2px rgba(236,235,230,.22); }
.spaces { background: var(--e1); box-shadow: var(--lift-1); }
.intro, .panel, .strip, .dlg, #librarySettings, .browse-list button { background: var(--e3); box-shadow: var(--lift-3); border: 0; }
.chip, .chip.lg, #pLink, .spaces button:hover, .view-tools button:hover, .workspace-dock .hotbar button:hover { box-shadow: none; }
.chip, .chip.lg, #pLink { background: var(--e-hover); }
.chip:hover, #pLink:hover { background: var(--e-sel); }
.spaces button[aria-pressed="true"], .workspace-dock .hotbar button[aria-pressed="true"], .workspace-dock #settingsBtn[aria-expanded="true"] { background: var(--e-sel); box-shadow: var(--lift-2); }
.field, textarea.field, .space-name { background: var(--e2); box-shadow: none; }
.field:focus, .space-name:focus { box-shadow: 0 0 0 2px rgba(236,235,230,.22); }
.p-img { background: var(--e2); box-shadow: none; }
.swatch { box-shadow: none; }
.view-tools, .steps { box-shadow: none; }

/* Logo: rabbit + plain FIELDER logotype, no stroke. The capsule mark (fielder-logo.png) now lives
   on the loading screen, under the spinning rabbit. */
.brand .rabbit { width: 22px; height: 22px; display: block; }
.logotype { height: auto; display: block; font-size: 15px; font-weight: 500; letter-spacing: 0.14em; line-height: 1; color: var(--ink); }
.loader { flex-direction: column; gap: 22px; }
.loader .loader-rabbit { width: 76px; height: 76px; animation: rabbit-spin 1.6s linear infinite; }
.loader .loader-mark { width: 96px; height: auto; animation: none; opacity: .9; }
.loader img:not(.loader-rabbit) { animation: none; }

/* ================= capsule components, from the FIELDER mark =================
   The logo's capsule (white hairline stroke, transparent fill, text centered with wide side room)
   is now the treatment for tags and secondary controls. Measured from fielder-logo.png: stroke ≈ 1.1%
   of width, text cap height ≈ 30% of capsule height, side padding ≈ 1.4× capsule height ÷ 2.
   Selected = the capsule stroke appears; unselected = text only. Primary actions stay solid. */
:root { --capsule: inset 0 0 0 1.5px var(--ink); --capsule-soft: inset 0 0 0 1.5px rgba(236,235,230,.38); }

.chip, .chip.lg, #pLink, .intro-examples .chip {
  background: transparent !important; box-shadow: var(--capsule-soft) !important; color: var(--ink);
  -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0 16px;
}
.chip:hover, .chip.lg:hover, #pLink:hover { box-shadow: var(--capsule) !important; background: transparent !important; }
.chip.dark, #pSimilar, #addBtn { box-shadow: none !important; }

/* tabs and view slots: selected item gets the capsule stroke, no fill */
.spaces button[aria-pressed="true"], .workspace-dock .hotbar button[aria-pressed="true"],
.workspace-dock #settingsBtn[aria-expanded="true"] {
  background: transparent !important; box-shadow: var(--capsule) !important; color: var(--ink);
}
.spaces button:hover, .workspace-dock .hotbar button:hover, .workspace-dock .view-tools button:hover { background: transparent !important; box-shadow: var(--capsule-soft) !important; }

/* color tags read as tiny capsules: a filled dot inside a stroke when chosen */

@media (prefers-reduced-motion: reduce) { .loader .loader-mark { animation: none !important; } }

/* ================= scope: capsules are for tags only =================
   Tags (collection tabs, example and add-to-collection chips, color tags) keep the capsule stroke.
   Every other component follows tame.ooo in dark mode: frosted pills with no stroke, the selected item
   a lighter filled pill, primary actions solid light. */
.workspace-dock .hotbar button[aria-pressed="true"], .workspace-dock #settingsBtn[aria-expanded="true"] {
  background: rgba(255,255,255,.14) !important; box-shadow: none !important; color: var(--ink);
}
.workspace-dock .hotbar button:hover, .workspace-dock .view-tools button:hover, .workspace-dock #settingsBtn:hover {
  background: rgba(255,255,255,.08) !important; box-shadow: none !important;
}
#pLink, .chip.lg:not(#pSimilar):not(.dark) {
  background: rgba(255,255,255,.08) !important; box-shadow: none !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
#pLink:hover, .chip.lg:not(#pSimilar):not(.dark):hover { background: rgba(255,255,255,.14) !important; }
/* tags stay capsules */
.spaces button[aria-pressed="true"], .intro-examples .chip, #pSpaces .chip:not(.dark), .chip:not(.lg) { box-shadow: var(--capsule-soft) !important; background: transparent !important; }
.spaces button[aria-pressed="true"], #pSpaces .chip.dark { box-shadow: var(--capsule) !important; background: transparent !important; color: var(--ink) !important; }
.spaces button:not([aria-pressed="true"]) { box-shadow: none !important; }
.spaces button:not([aria-pressed="true"]):hover { box-shadow: var(--capsule-soft) !important; }

/* ================= components after Lunor / Stack AI / Memo (dark) =================
   Non-tag components are soft rounded rectangles, not pills: 8px for controls, 12px for cards and
   bars. Filled tones carry hierarchy; a faint top highlight gives lift. No outlines, no dividers.
   Segmented controls follow Stack AI: a darker well, the selected item a lighter filled block.
   Tags (collections, example chips, color dots) keep the FIELDER capsule. */
:root { --rc: var(--r-control); --rb: var(--r-card); /* old names for the radius system at the end of the file */ --well: #0d0d0d; --fill: #1c1c1c; --fill-hi: #262626; --fill-sel: #2b2b2b;
  --lift-top: inset 0 1px 0 rgba(255,255,255,.05); }

.workspace-dock { border-radius: 16px !important; padding: 6px; background: #111 !important; box-shadow: var(--lift-top), 0 12px 40px rgba(0,0,0,.6) !important; }
.workspace-dock .hotbar, .workspace-dock #search { border-radius: 10px !important; background: var(--well) !important; box-shadow: none !important; }
.workspace-dock #search:focus-within { background: #141414 !important; box-shadow: 0 0 0 1px rgba(236,235,230,.18) !important; }
.workspace-dock .hotbar { padding: 3px; }
.workspace-dock .hotbar button, .workspace-dock .view-tools button, .workspace-dock #settingsBtn { border-radius: var(--rc) !important; }
.workspace-dock .hotbar button[aria-pressed="true"], .workspace-dock #settingsBtn[aria-expanded="true"] {
  background: var(--fill-sel) !important; box-shadow: var(--lift-top) !important; color: var(--ink) !important; }
.workspace-dock .hotbar button:hover, .workspace-dock .view-tools button:hover, .workspace-dock #settingsBtn:hover { background: var(--fill) !important; box-shadow: none !important; }
.workspace-dock #addBtn { border-radius: 10px !important; }

#addBtn, .cta, .cta.sm, #pSimilar, .chip.dark:not(#pSpaces .chip) { border-radius: var(--rc) !important; }
#pLink, .chip.lg:not(#pSimilar):not(.dark) { border-radius: var(--rc) !important; background: var(--fill) !important; box-shadow: var(--lift-top) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
#pLink:hover, .chip.lg:not(#pSimilar):not(.dark):hover { background: var(--fill-hi) !important; }

.intro, .panel, .strip, .dlg, #librarySettings { border-radius: var(--rb) !important; background: #161616 !important; box-shadow: var(--lift-top), 0 24px 64px rgba(0,0,0,.7) !important; }
.browse-list button { border-radius: 10px !important; background: var(--fill) !important; box-shadow: var(--lift-top) !important; }
.field, textarea.field { border-radius: var(--rc) !important; background: var(--well) !important; }
.p-img { border-radius: 10px !important; }
.text-btn { border-radius: var(--rc); }

/* Lunor-style key hint inside search */
.key-hint { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 6px; background: var(--fill); box-shadow: var(--lift-top); color: var(--muted); font: 11px var(--font); }
.search:focus-within .key-hint, .search:has(.result:not([hidden])) .key-hint { display: none; }
@media (max-width: 900px) { .key-hint { display: none; } }

/* fixes: primary chips keep their fill; the phone ＋ sits beside search; placeholder has room */
.chip.dark, #pSimilar { background: var(--ink) !important; color: #111 !important; box-shadow: none !important; }
.chip.dark:hover, #pSimilar:hover { background: #fff !important; }
#pSpaces .chip.dark { background: transparent !important; color: var(--ink) !important; box-shadow: var(--capsule) !important; }

@media (max-width: 900px) {
  .workspace-dock #search { flex: 1 1 0 !important; flex-basis: auto !important; min-width: 0 !important; }
  .workspace-dock #addBtn { order: 0; }
  .workspace-dock .hotbar, .workspace-dock .view-tools { flex-basis: 100%; }
}

@media (max-width: 900px) { .workspace-dock #search { width: auto !important; flex: 1 1 0 !important; } }

/* ---------- 3D rabbit ----------
   The flat mark stacked as layers along z, so it reads as a solid when it turns. The back layers
   are darkened to give the extruded side its shade; the last layer is the face. */
.rabbit3d { position: relative; display: inline-block; transform-style: preserve-3d; flex: none; }
.rabbit3d img { position: absolute; inset: 0; width: 100%; height: 100%; animation: none !important;
  transform: translateZ(calc((var(--z) - var(--layers) / 2) * var(--depth)));
  filter: brightness(calc(.35 + var(--z) / var(--layers) * .45)); }
.rabbit3d img:last-child { filter: none; }
.loader .rabbit3d { --layers: 17; --depth: 1.3px; width: 76px; height: 76px; perspective: none;
  animation: rabbit-turn 2.4s cubic-bezier(.45,.05,.55,.95) infinite !important; }
.loader { perspective: 600px; }
@keyframes rabbit-turn { from { transform: rotateX(-12deg) rotateY(0deg); } to { transform: rotateX(-12deg) rotateY(360deg); } }
.brand .rabbit3d { --layers: 5; --depth: .5px; width: 22px; height: 22px;
  transform: rotateY(-24deg) rotateX(-8deg); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.brand { perspective: 300px; }
.brand:hover .rabbit3d { transform: rotateY(28deg) rotateX(-8deg); }
@media (prefers-reduced-motion: reduce) {
  .loader .rabbit3d { animation: none !important; transform: rotateX(-12deg) rotateY(-28deg); }
  .brand .rabbit3d { transition: none; }
}
/* WebGL rabbit (rabbit3d.js) replaces the stacked layers once three.js loads. */
.rabbit3d.is-gl { animation: none !important; transform: none !important; transition: none; }
.rabbit-gl { display: block; width: 100%; height: 100%; }
.loader .rabbit3d.is-gl { width: 96px; height: 96px; filter: drop-shadow(0 0 18px rgba(140, 255, 60, .35)); }
.brand .rabbit3d.is-gl { width: 28px; height: 28px; margin: -3px -3px -3px -4px; }

/* ---------- sample collection cards (intro) ---------- */
.sample-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sample-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 8px 10px 8px 8px; border: 0; border-radius: var(--rc, 8px); background: var(--fill, #1c1c1c);
  box-shadow: var(--lift-top, none); color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  transition: background .15s; min-width: 0; }
.sample-card:hover { background: var(--fill-sel, #2b2b2b); }
.sample-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sample-stack { position: relative; width: 34px; height: 30px; flex: none; }
.sample-stack img { position: absolute; width: 22px; height: 22px; object-fit: cover; border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.sample-stack img:nth-child(1) { left: 0; top: 6px; transform: rotate(-8deg); }
.sample-stack img:nth-child(2) { left: 6px; top: 3px; transform: rotate(2deg); }
.sample-stack img:nth-child(3) { left: 12px; top: 0; transform: rotate(9deg); }
.sample-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sample-card .count { color: var(--muted, #8a8a8a); font-variant-numeric: tabular-nums; }
/* One column so names never truncate. The intro already scrolls above the dock (see .intro,.panel). */
.sample-grid { grid-template-columns: 1fr; gap: 4px; }
.sample-card { padding: 5px 10px 5px 6px; }

/* ================= pills (2026-10-22, supersedes the rounded-rectangle layer above) =================
   Every button is a pill and the omnibar is a full capsule, with its wells and segments nested as
   smaller pills (concentric: outer radius = inner radius + padding). Cards and dialogs keep 12px. */
.workspace-dock { border-radius: 999px !important; padding: 6px 6px 6px 8px; }
.workspace-dock .hotbar, .workspace-dock #search, .workspace-dock .view-tools { border-radius: 999px !important; }
button, .chip, .chip.lg, .cta, .cta.sm, #addBtn, #pSimilar, #pLink, .text-btn, .value-btn, .workspace-dock .hotbar button, .workspace-dock .view-tools button, .workspace-dock #settingsBtn, .workspace-dock #addBtn, .sample-card, .key-hint, .spaces button { border-radius: 999px !important; }
.sample-card { padding-left: 8px; }
.browse-list button { border-radius: revert-layer; }
.browse-list button { border-radius: 10px !important; }

/* A wrapped two-row omnibar on narrow screens cannot be a capsule; it keeps a large round corner. */
@media (max-width: 900px) { .workspace-dock { border-radius: 26px !important; } }

/* Color tags stay out of sight until search is in use, so the bar stays neutral. */

/* The open collection is already marked in the tabs; no second heading. */
.collection-heading { display: none; }

/* No visible scrollbars anywhere; areas still scroll by wheel, touch and keyboard. */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

/* ================= Geist + the FIELDER lockup (2026-10-22) =================
   One typeface everywhere. The lockup follows Renaise's CF-FIELDER artwork: FIELDER in a thin capsule,
   VISUAL RESEARCHER centered beneath it. The lockup is the one place uppercase is used. */
:root { --font: "Geist", ui-sans-serif, system-ui, sans-serif; }
html, body, button, input, textarea, select, kbd, .key-hint { font-family: var(--font) !important; }
.brand { align-items: center; gap: 4px; }
.lockup { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.lockup .logotype { padding: 3px 13px 3px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.25px var(--ink);
  font-size: 15px; font-weight: 400; letter-spacing: .04em; line-height: 1.15; }
.lockup .tagline { margin: 0; font-size: 8.5px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); opacity: .85; }
@media (max-width: 640px) { .lockup .tagline { display: block; } }
/* Toggles show "on" with the same neutral fill as a selected view, not a signal color. */
.workspace-dock #motionBtn[aria-pressed="true"] { color: var(--ink) !important; background: var(--fill-sel) !important; }

/* Visual collections sheet: rises from the omnibar at bottom center instead of covering the map's right side. */

/* ================= The rabbit is the logo (2026-10-23) =================
   One cutout (rabbit.png) serves as header logo, loading mascot and favicon. It replaces the
   FIELDER capsule lockup and the three.js rabbit (rabbit3d.js, no longer loaded). */
.brand-rabbit { display: block; height: 30px; width: auto; }
@media (max-width: 640px) { .brand-rabbit { height: 26px; } }
.loader .loader-rabbit { width: 104px; height: auto; transform-style: preserve-3d;
  animation: rabbit-turn 2.4s cubic-bezier(.45,.05,.55,.95) infinite;
  filter: drop-shadow(0 0 18px rgba(140, 255, 60, .3)); }
@media (prefers-reduced-motion: reduce) { .loader .loader-rabbit { animation: rabbit-pulse 1.6s ease-in-out infinite !important; } }

/* ================= Light mode, gray (2026-10-23) =================
   Dark stays the default. <html data-theme="light"> swaps the tokens here and overrides the rules
   above that hardcode dark values. Elevation reads the same way in both: wells sit darker than the
   bar, raised fills sit lighter. The field reads --tile/--ink/--ring/--signal on resize(). */
:root[data-theme="light"] {
  color-scheme: light;
  --frame:#dcdcdc; --stage:#dcdcdc; --surface:#ececec; --surface-2:#f4f4f4;
  --cream:#e6e6e6; --white:#f4f4f4; --chip-hover:#e6e6e6; --tile:#c9c9c9;
  --ink:#161616; --ink-hover:#000; --text:#161616; --muted:#555; --faint:#6b6b6b;
  --line:rgba(0,0,0,.14); --focus:#000; --ring:rgba(0,0,0,.55); --signal:#4a8700; --signal-deep:#3a6b00;
  --surf:#ececec; --sel:#e0e0e0; --glass-2:rgba(0,0,0,.06); --glass-3:rgba(0,0,0,.1);
  --e1:#ececec; --e2:#e0e0e0; --e3:#f1f1f1; --e-hover:#e6e6e6; --e-sel:#fff;
  --lift-1:0 6px 20px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.08); --lift-2:0 1px 3px rgba(0,0,0,.08);
  --lift-3:0 24px 64px rgba(0,0,0,.14), 0 4px 14px rgba(0,0,0,.08);
  --well:#dedede; --fill:#f6f6f6; --fill-hi:#fff; --fill-sel:#fff; --lift-top:inset 0 1px 0 rgba(255,255,255,.7);
  --capsule-soft: inset 0 0 0 1.5px rgba(22,22,22,.35); --shadow:0 12px 40px rgba(0,0,0,.12);
}
[data-theme="light"] .workspace-dock { background:#ececec !important; box-shadow:var(--lift-top), 0 12px 40px rgba(0,0,0,.12) !important; }
[data-theme="light"] .workspace-dock #search:focus-within { background:#f6f6f6 !important; box-shadow:0 0 0 1px rgba(0,0,0,.18) !important; }
[data-theme="light"] .intro, [data-theme="light"] .panel, [data-theme="light"] .strip,
[data-theme="light"] .dlg, [data-theme="light"] #librarySettings, [data-theme="light"] .meta, [data-theme="light"] .search {
  background:#f1f1f1 !important; box-shadow:var(--lift-top), 0 24px 64px rgba(0,0,0,.14) !important; }
[data-theme="light"] .hotbar, [data-theme="light"] .workspace-dock .hotbar, [data-theme="light"] .workspace-dock #search,
[data-theme="light"] .steps, [data-theme="light"] .view-tools { background:#dedede; box-shadow:inset 0 1px 2px rgba(0,0,0,.06); }
[data-theme="light"] .spaces button[aria-pressed=true], [data-theme="light"] .steps button:hover,
[data-theme="light"] #settingsBtn:hover, [data-theme="light"] #settingsBtn[aria-expanded=true] { background:#fff; color:var(--text); }
[data-theme="light"] .p-img { background:#d2d2d2; }
/* Primary pills invert: dark fill, light text. Secondary pills are a translucent dark wash. */
[data-theme="light"] #addBtn, [data-theme="light"] .cta, [data-theme="light"] .chip.dark, [data-theme="light"] #pSimilar, [data-theme="light"] .chip.danger { color:#f4f4f4 !important; }
[data-theme="light"] #addBtn:hover, [data-theme="light"] .cta:hover, [data-theme="light"] .chip.dark:hover, [data-theme="light"] #pSimilar:hover { background:#000 !important; }
[data-theme="light"] .chip.lg:not(#pSimilar):not(.dark), [data-theme="light"] #pLink { background:rgba(0,0,0,.07) !important; }
[data-theme="light"] #pLink:hover, [data-theme="light"] .chip.lg:not(#pSimilar):not(.dark):hover { background:rgba(0,0,0,.12) !important; }

[data-theme="light"] .dlg::backdrop, [data-theme="light"] .drop { background:rgba(220,220,220,.72); }
[data-theme="light"] .axis-word { background:rgba(236,236,236,.85); text-shadow:none; }
[data-theme="light"] .lens-label { text-shadow:0 0 12px rgba(220,220,220,.9); }
[data-theme="light"] .strip line { stroke:#999; }
[data-theme="light"] .sample-card img { box-shadow:0 1px 3px rgba(0,0,0,.18); }
[data-theme="light"] .loader { background:var(--frame); }
[data-theme="light"] .loader .loader-rabbit { filter:drop-shadow(0 6px 18px rgba(0,0,0,.18)); }

/* ================= Fewer controls in the bar (2026-10-23) =================
   The bar holds views, search, the View menu and a round +. Zoom is scroll, pinch and + / −;
   Fit, Motion and Browse sit in the View menu; Collections moved to the header. */
.workspace-dock #addBtn { width: 40px; min-width: 40px; height: 40px; padding: 0; border-radius: 999px !important; }
.workspace-dock #addBtn span:first-child { margin: 0; font-size: 18px; }
@media (max-width: 900px) { .workspace-dock #addBtn { width: 44px; min-width: 44px; height: 44px; } }
.workspace-dock #settingsBtn { padding: 0 16px; }
#librarySettings .settings-actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 4px; }
#librarySettings .settings-actions .chip { flex: 1; justify-content: center; }
@media (max-width: 900px) {
  /* Two rows: views, then search · View · +. */
  .workspace-dock .hotbar { order: -2; }
  .workspace-dock #search { order: -1; }
  .workspace-dock .view-tools { order: 0; flex: none !important; flex-basis: auto !important; width: auto !important; }
  .workspace-dock #addBtn { order: 1 !important; }
  #librarySettings { bottom: 148px; }
}

/* ================= Primary button (2026-10-23) =================
   One filled treatment for every primary action: + in the bar, Add images in the sheet, Similar in
   the image panel. A drawn plus replaces the text glyph so the stroke is even and optically centered.
   States: hover lifts and brightens, press sinks, keyboard focus gets a ring offset from the fill. */
.workspace-dock #addBtn { display: grid; place-items: center; }
#addBtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#addBtn, #pSimilar, .chip.dark, .cta {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.25) !important;
  transition: background-color .15s ease, transform .15s cubic-bezier(.2,.7,.3,1), box-shadow .15s ease; }
#addBtn:hover, #pSimilar:hover, .chip.dark:hover, .cta:hover {
  background: #fff !important; transform: translateY(-1px);
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(0,0,0,.35), 0 8px 22px rgba(0,0,0,.3) !important; }
#addBtn:active, #pSimilar:active, .chip.dark:active, .cta:active {
  transform: translateY(0) scale(.96); box-shadow: inset 0 1px 2px rgba(0,0,0,.18) !important; }
#addBtn:focus-visible, #pSimilar:focus-visible, .chip.dark:focus-visible, .cta:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px; }
[data-theme="light"] #addBtn, [data-theme="light"] #pSimilar, [data-theme="light"] .chip.dark, [data-theme="light"] .cta {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.2), 0 4px 14px rgba(0,0,0,.14) !important; }
[data-theme="light"] #addBtn:hover, [data-theme="light"] #pSimilar:hover, [data-theme="light"] .chip.dark:hover, [data-theme="light"] .cta:hover {
  background: #000 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 4px rgba(0,0,0,.2), 0 8px 22px rgba(0,0,0,.18) !important; }
@media (prefers-reduced-motion: reduce) { #addBtn, #pSimilar, .chip.dark, .cta { transition: none; } #addBtn:hover, #pSimilar:hover, .chip.dark:hover, .cta:hover { transform: none; } }
/* Collection tags in the image panel reuse .chip.dark but are capsules, not primary buttons. */
#pSpaces .chip.dark, #pSpaces .chip.dark:hover, #pSpaces .chip.dark:active { background: transparent !important; color: var(--ink) !important; box-shadow: var(--capsule) !important; transform: none; }
[data-theme="light"] .workspace-dock .view-tools { background: transparent; box-shadow: none; }

/* ================= Three controls in the bar (2026-10-23) =================
   The bar is: current view ▾ · search · +. The view pill opens one menu: the four views as a
   segmented row on top, then Motion, Fit, Browse and the sliders. Phones get a single row. */
.workspace-dock #settingsBtn { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 16px; color: var(--ink); background: var(--fill) !important; }
.workspace-dock #settingsBtn:hover { background: var(--fill-hi) !important; }
.workspace-dock #settingsBtn[aria-expanded="true"] { background: var(--fill-sel) !important; }
#settingsBtn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform .15s ease; }
#settingsBtn[aria-expanded="true"] svg.chev { transform: rotate(180deg); }
.workspace-dock .view-tools { order: 0; }
.workspace-dock #search { order: 1; flex: 1 1 auto; }
.workspace-dock #addBtn { order: 2; }
#librarySettings { left: 24px !important; right: auto !important; translate: none !important; bottom: calc(28px + 52px + 12px) !important; width: 320px; }
#librarySettings .settings-views { grid-column: 1 / -1; margin-bottom: 4px; }
.view-switch { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--well); }
.view-switch button { flex: 1; height: 32px; padding: 0 8px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 12px; cursor: pointer; }
.view-switch button:hover { color: var(--text); }
.view-switch button[aria-pressed="true"] { background: var(--fill-sel); color: var(--ink); box-shadow: var(--lift-top), 0 1px 2px rgba(0,0,0,.3); }
@media (max-width: 900px) {
  .workspace-dock { flex-wrap: nowrap !important; }
  .workspace-dock .view-tools { order: 0 !important; }
  .workspace-dock #search { order: 1 !important; flex: 1 1 auto !important; height: 44px; }
  .workspace-dock #addBtn { order: 2 !important; }
  .workspace-dock #settingsBtn { height: 44px; padding: 0 10px 0 14px; }
  #librarySettings { left: 16px !important; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 68px) !important; width: min(340px, calc(100% - 32px)); }
}
#settingsBtn[aria-expanded=true] span { rotate: none; }
#librarySettings .settings-views { display: block; }
.view-switch { width: 100%; box-sizing: border-box; }
.workspace-dock #settingsBtn { font-size: 14px !important; }
@media (min-width: 901px) { .workspace-dock { width: min(720px, calc(100% - 64px)) !important; left: 50% !important; right: auto !important; translate: -50% 0 !important; } }
@media (min-width: 901px) { #librarySettings { left: max(24px, calc(50% - 360px)) !important; } }
/* An old rule styled the button's span as a faint 16px glyph; the span is now the view name. */
#settingsBtn #viewName { color: inherit; font-size: inherit; }
/* The search pill reads as one input: text cursor across it, buttons inside keep the pointer. */
.workspace-dock #search { cursor: text; }
.workspace-dock #search button { cursor: pointer; }
/* On phones the color dots would squeeze the text to a sliver, so while searching the field takes the
   whole bar; the view pill and + come back on blur. */
@media (max-width: 640px) {
  .workspace-dock:has(#search:focus-within) .view-tools,
  .workspace-dock:has(#search:focus-within) #addBtn { display: none !important; }
  
}

/* ================= Fluid panels, no modals (2026-10-23) =================
   Omnibar suggestions, the view menu, visual collections and adding images all grow out of the bar:
   anchored just above it (--dock-top, measured in ui.js), one at a time, no backdrop. They fade and rise
   in, and fold back down on close (display is transitioned discretely; older browsers just toggle). */
#omni.tray-panel, #librarySettings.tray-panel, #addDlg.tray-panel, #worldPanel.tray-panel {
  position: absolute !important; top: auto !important; right: auto !important; margin: 0 !important;
  bottom: calc(var(--dock-top, 80px) + 10px) !important; left: 50% !important; translate: -50% 0 !important;
  width: var(--dock-w, min(720px, calc(100% - 32px))) !important; max-width: calc(100% - 32px) !important;
  max-height: min(64vh, 580px) !important; overflow-y: auto; overscroll-behavior: contain; z-index: 8;
  border-radius: 18px !important; transform: none; opacity: 1; transform-origin: 50% 100%;
  transition: opacity .18s ease, transform .24s cubic-bezier(.2,.8,.2,1), display .24s allow-discrete; }
#omni.tray-panel[hidden], #librarySettings.tray-panel[hidden], #addDlg.tray-panel[hidden], #worldPanel.tray-panel[hidden] {
  display: none !important; opacity: 0; transform: translateY(10px) scale(.98); }
@starting-style {
  #omni.tray-panel:not([hidden]), #librarySettings.tray-panel:not([hidden]), #addDlg.tray-panel:not([hidden]), #worldPanel.tray-panel:not([hidden]) {
    opacity: 0; transform: translateY(10px) scale(.98); } }
/* The view menu is narrow and opens over its own pill at the left end of the bar. */
#librarySettings.tray-panel { width: min(360px, var(--dock-w, 360px)) !important; left: calc(50% - var(--dock-w, 360px) / 2) !important; translate: none !important; transform-origin: 0 100%; }

#omni.tray-panel, #addDlg.tray-panel, #worldPanel.tray-panel { background: #161616; box-shadow: var(--lift-top), 0 24px 64px rgba(0,0,0,.7); }
[data-theme="light"] #omni.tray-panel, [data-theme="light"] #addDlg.tray-panel, [data-theme="light"] #worldPanel.tray-panel { background: #f1f1f1 !important; box-shadow: var(--lift-top), 0 24px 64px rgba(0,0,0,.14) !important; }
#panel { transition: opacity .18s ease, transform .24s cubic-bezier(.2,.8,.2,1), display .24s allow-discrete; }
#panel[hidden] { display: none !important; opacity: 0; transform: translateX(12px); }
@starting-style { #panel:not([hidden]) { opacity: 0; transform: translateX(12px); } }
@media (prefers-reduced-motion: reduce) { .tray-panel, #panel { transition: none !important; } }

/* Add images, now a panel */
#addDlg .dlg-head { position: static; background: none; padding: 18px 20px 6px; }
#addDlg .dlg-sec { padding: 10px 20px 16px; }

/* ---------- View menu: one aligned column of rows ---------- */
.view-menu { display: flex !important; flex-direction: column; gap: 4px; padding: 10px !important; }
.view-menu[hidden] { display: none !important; }
.view-menu .view-switch { margin-bottom: 6px; }
.vm-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 40px; align-items: center; gap: 12px; min-height: 40px; padding: 0 8px; }
.vm-label { color: var(--muted); font-size: 13px; white-space: nowrap; }
.vm-value { color: var(--muted); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.vm-row .vm-seg { grid-column: 2 / 4; }
.vm-row .switch { grid-column: 3; justify-self: end; }
.vm-actions { display: flex; gap: 8px; padding: 8px 8px 2px; }
.vm-actions .chip { flex: 1; justify-content: center; }

/* Slider: a 4px track filled to --pct, with a notch at the default (--def) and a 14px thumb
   (Renaise 2026-10-26: 20px was too big). Replaces the browser's default range control. */
.view-menu input.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; accent-color: auto; --pct: 50%; --def: 50%; touch-action: pan-y; }
.view-menu input.slider:focus-visible { outline: none; }
.slider::-webkit-slider-runnable-track { height: 4px; border-radius: 999px;
  background:
    linear-gradient(var(--muted), var(--muted)) calc(var(--def) - 1px) 50% / 2px 8px no-repeat,
    linear-gradient(to right, var(--ink) var(--pct), var(--fill-hi) var(--pct));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.slider::-moz-range-track { height: 4px; border-radius: 999px; background: var(--fill-hi); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.slider::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--ink); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--ink);
  box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.45); transition: transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .14s ease; }
.slider::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.45); }
.slider:hover::-webkit-slider-thumb { transform: scale(1.1); }
.slider:active::-webkit-slider-thumb { transform: scale(1.1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 14%, transparent), 0 2px 8px rgba(0,0,0,.5); }
.slider:active::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 14%, transparent), 0 2px 8px rgba(0,0,0,.5); }
.slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 30%, transparent), 0 2px 6px rgba(0,0,0,.45); }
.slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 30%, transparent); }
[data-theme="light"] .slider::-webkit-slider-thumb { box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.22); }
/* The value doubles as a reset once the slider has moved off its default. */
.vm-value { border: 0; padding: 4px 0; margin: 0; background: none; font: inherit; font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; border-radius: 999px; }
.vm-value:not(:disabled) { cursor: pointer; color: var(--text); }
.vm-value:not(:disabled):hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.vm-value:disabled { cursor: default; opacity: 1; color: var(--muted); }
.vm-row:has(.slider:active) .vm-value { color: var(--ink); }
.vm-row:has(.slider) { grid-template-columns: 96px minmax(0, 1fr) 44px; }

/* Segmented choice and switch, same well-and-fill language as the view row */
.vm-seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--well); }
.vm-seg button { flex: 1; height: 28px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer; }
.vm-seg button:hover { color: var(--text); }
.vm-seg button[aria-checked="true"] { background: var(--fill-sel); color: var(--ink); box-shadow: var(--lift-top), 0 1px 2px rgba(0,0,0,.3); }
.switch { width: 36px; height: 20px; padding: 2px; border: 0; border-radius: 999px; background: var(--fill-hi); cursor: pointer; transition: background-color .15s ease; }
.switch span { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .2s cubic-bezier(.2,.8,.2,1), background-color .15s ease; }
.switch[aria-checked="true"] { background: var(--ink); }
.switch[aria-checked="true"] span { transform: translateX(16px); background: var(--frame); }
.switch:focus-visible, .vm-seg button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Omnibar suggestions ---------- */
.omni { display: flex !important; flex-direction: column; padding: 8px !important; }
.omni[hidden] { display: none !important; }
.omni-group { padding: 10px 10px 4px; color: var(--faint); font-size: 11px; }
.omni-row { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 10px; color: var(--text); font-size: 13px; cursor: pointer; user-select: none; }
.omni-row[aria-selected="true"] { background: var(--fill); }
.omni-row .label { color: inherit; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omni-row .kind { margin-left: auto; padding-left: 12px; color: var(--faint); font-size: 12px; white-space: nowrap; }
.omni-row .dot { width: 12px; height: 12px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.omni-colors { padding: 0 0 6px; }
.omni-colors[hidden] { display: none; }

.view-menu { align-items: stretch !important; }
.view-menu > * { width: auto; align-self: stretch; }

/* ================= Panels expand the omnibar (2026-10-23) =================
   An open panel is the bar's own upper half: same width and fill, flush against it, top corners
   rounded, while the bar squares off its top corners. Bar and panel read as one surface that grew. */
#omni.tray-panel, #librarySettings.tray-panel, #addDlg.tray-panel, #worldPanel.tray-panel {
  bottom: var(--dock-top, 80px) !important; left: 50% !important; translate: -50% 0 !important;
  width: var(--dock-w, min(720px, calc(100% - 32px))) !important; max-width: none !important;
  background: #111 !important; border-radius: 26px 26px 0 0 !important; padding-bottom: 4px !important;
  box-shadow: 0 -28px 40px -14px rgba(0,0,0,.55) !important; transform-origin: 50% 100%; }
#omni.tray-panel[hidden], #librarySettings.tray-panel[hidden], #addDlg.tray-panel[hidden], #worldPanel.tray-panel[hidden] { transform: translateY(12px); }
@starting-style {
  #omni.tray-panel:not([hidden]), #librarySettings.tray-panel:not([hidden]), #addDlg.tray-panel:not([hidden]), #worldPanel.tray-panel:not([hidden]) { transform: translateY(12px); } }
#workspaceDock { transition: border-radius .2s ease; }
#workspaceDock.expanded { border-radius: 0 0 26px 26px !important; z-index: 9; }
[data-theme="light"] #omni.tray-panel, [data-theme="light"] #librarySettings.tray-panel, [data-theme="light"] #addDlg.tray-panel, [data-theme="light"] #worldPanel.tray-panel { background: #ececec !important; box-shadow: 0 -28px 40px -14px rgba(0,0,0,.12) !important; }
/* Inside the expanded bar the panel content lines up with the bar's own controls. */
#librarySettings.tray-panel { padding: 12px 14px 8px !important; }
#librarySettings .vm-row { grid-template-columns: 120px minmax(0, 1fr) 48px; }
#librarySettings .vm-actions .chip { flex: none; padding: 0 20px; }
#librarySettings .vm-actions { justify-content: flex-start; }
@media (max-width: 900px) { #workspaceDock.expanded { border-radius: 0 0 24px 24px !important; }
  #omni.tray-panel, #librarySettings.tray-panel, #addDlg.tray-panel, #worldPanel.tray-panel { border-radius: 24px 24px 0 0 !important; } }
/* Panel and bar each cast only away from the seam (offset = blur - spread), so neither shadow lands on
   the other and the pair reads as one surface. Equal blur and spread keep the sides continuous. */
#workspaceDock.expanded { box-shadow: 0 28px 40px -14px rgba(0,0,0,.6) !important; }
[data-theme="light"] #workspaceDock.expanded { box-shadow: 0 28px 40px -14px rgba(0,0,0,.14) !important; }

/* Omnibar web search: the sites sit on one line of pills under the library search. */
.omni-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 8px; }
.omni-row.omni-chip { min-height: 32px; padding: 0 12px 0 14px; gap: 6px; border-radius: 999px; background: var(--fill); }
.omni-row.omni-chip[aria-selected="true"] { background: var(--ink); color: var(--frame); }
.omni-chip .ext { color: inherit; opacity: .5; font-size: 12px; }
@media (max-width: 520px) {
  .omni-chips { flex-wrap: nowrap; }
  .omni-row.omni-chip { flex: 1 1 auto; justify-content: center; padding: 0 10px; gap: 4px; min-width: 0; }
  .omni-chip .label { overflow: hidden; text-overflow: ellipsis; } }

/* ================= Visual collections (2026-10-24) =================
   The Collections panel is images, not words: groups Fielder found in what is on screen first, each a
   four-image mosaic with a Keep pill, then the person's own collections with Share. Tabs carry covers. */

#spaces .tab-cover { width: 16px; height: 16px; margin: 0 7px 0 -3px; border-radius: 50%; object-fit: cover; vertical-align: -3px; flex: none; }
#spaces .tab-cover[hidden] { display: none; }
#result #resultKeep[hidden] { display: none; }

/* ================= Controls and ambience (2026-10-24) ================= */

/* Close is a round X. */
.x-btn { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50% !important;
  background: var(--fill) !important; color: var(--text); cursor: pointer; transition: background .15s ease, transform .15s ease; }
.x-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.x-btn:hover { background: var(--fill-hi) !important; transform: rotate(90deg); }
.x-btn:active { transform: rotate(90deg) scale(.92); }
.x-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[data-theme="light"] .x-btn { background: rgba(0,0,0,.06) !important; }

.workspace-dock #addBtn[aria-expanded="true"] svg { transform: rotate(45deg); }
.workspace-dock #addBtn svg { transition: transform .3s cubic-bezier(.2,.8,.2,1); }

/* Ambient light: a soft glow follows the pointer across the bar and the collection cards (--mx/--my from app.js). */
.workspace-dock { --mx: 50%; --my: -200px; }
.workspace-dock::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255,59,31,.07), transparent 70%); opacity: 0; transition: opacity .3s ease; }
.workspace-dock:hover::after { opacity: 1; }

.omni-row { transition: background .12s ease; }
[data-theme="light"] .workspace-dock::after { background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255,255,255,.55), transparent 70%); }

@media (prefers-reduced-motion: reduce) { .x-btn:hover, .x-btn:active { transform: none; }  }

/* Naming a collection: the field widens and glows, the map dims, and the keys are spelled out. */
.naming { position: relative; display: inline-flex; align-items: center; flex: none; }
.spaces .naming .space-name { width: min(320px, 62vw) !important; height: 34px; min-height: 34px; padding: 0 128px 0 16px; border: 0; border-radius: 999px !important;
  background: rgba(255,59,31,.06) !important; color: var(--text); font: 500 13px var(--font, inherit); outline: none;
  box-shadow: inset 0 0 0 1px rgba(255,59,31,.45), 0 0 0 4px rgba(255,59,31,.07), 0 0 28px rgba(255,59,31,.16) !important;
  animation: naming-in .35s cubic-bezier(.2,.8,.2,1), naming-breathe 2.8s ease-in-out .35s infinite; }
.naming .space-name::placeholder { color: var(--faint); }
.naming-keys { position: absolute; right: 14px; color: var(--faint); font-size: 11px; white-space: nowrap; pointer-events: none; transition: color .2s ease; }
.naming.has-name .naming-keys { color: var(--signal); }
#pSpaces .naming .space-name { width: min(280px, 70vw) !important; height: 34px; padding: 0 128px 0 14px; border-radius: 999px !important; border: 0; outline: none;
  background: rgba(255,59,31,.06) !important; color: var(--text); box-shadow: inset 0 0 0 1px rgba(255,59,31,.45), 0 0 24px rgba(255,59,31,.14) !important; }
@keyframes naming-in { from { width: 120px; opacity: .4; } }
@keyframes naming-breathe { 50% { box-shadow: inset 0 0 0 1px rgba(255,59,31,.6), 0 0 0 6px rgba(255,59,31,.05), 0 0 40px rgba(255,59,31,.24); } }
body.is-naming #field { opacity: .4; filter: saturate(.6); }
#field { transition: opacity .4s ease, filter .4s ease; }
body.is-naming .frame-bar .spaces > :not(.naming) { opacity: .45; }
.frame-bar .spaces > * { transition: opacity .3s ease; }
[data-theme="light"] .spaces .naming .space-name, [data-theme="light"] #pSpaces .naming .space-name { background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(80,120,0,.45), 0 0 0 4px rgba(120,180,0,.1), 0 0 24px rgba(120,180,0,.18) !important; }
[data-theme="light"] .naming.has-name .naming-keys { color: #4d7a00; }
@media (prefers-reduced-motion: reduce) { .spaces .naming .space-name { animation: none; } }

/* Try: suggestions in the empty omnibar are pills. */
.omni-row.omni-chip:not(:has(.ext)) { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.omni-row.omni-chip:not(:has(.ext))[aria-selected="true"] { background: var(--ink); color: var(--frame); box-shadow: none; }
@media (max-width: 640px) {
  .naming-keys { display: none; }
  .spaces .naming .space-name, #pSpaces .naming .space-name { width: min(240px, 64vw) !important; padding: 0 16px !important; } }
/* The 3D rabbit replaces the flat cutout in the loader once its model is ready. */
.loader .loader-rabbit-3d { width: 200px; height: 200px; filter: drop-shadow(0 0 28px rgba(160, 255, 70, .28)); animation: rabbit-arrive .5s ease both; }
@keyframes rabbit-arrive { from { opacity: 0; transform: scale(.94); } }
[data-theme="light"] .loader .loader-rabbit-3d { filter: drop-shadow(0 10px 24px rgba(0,0,0,.18)); }
/* Colors in the omnibar are the collection's own, sized by how much of it each covers. */

/* ================= One collection control (2026-10-24) =================
   The header names the current collection; pressing it opens Visual collections. No tab strip. */
.frame-bar .space-switch { display: inline-flex; align-items: center; gap: 8px; height: 34px; margin-left: 14px; padding: 0 12px 0 14px; border: 0;
  border-radius: 999px !important; background: transparent !important; box-shadow: none !important; color: var(--text); font: 400 15px var(--font, inherit);
  letter-spacing: -.01em; cursor: pointer; transition: background .15s ease; max-width: min(60vw, 420px); }
.frame-bar .space-switch:hover, .frame-bar .space-switch[aria-expanded="true"] { background: var(--fill) !important; }

.space-switch svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.space-switch[aria-expanded="true"] svg { transform: rotate(180deg); }
.space-switch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.frame-bar { justify-content: flex-start; }
.frame-bar .bar-right { margin-left: auto; }

/* New collection: a quiet card at the end of the grid. */

/* Naming: liquid glass, neutral, large. It spans the grid and flows open from the card. */

.naming .space-name, .spaces .naming .space-name, #pSpaces .naming .space-name {
  width: 100% !important; height: 60px !important; min-height: 60px; padding: 0 84px 0 24px !important; border: 0; outline: none; border-radius: 999px !important;
  color: var(--text); font: 400 20px var(--font, inherit) !important; letter-spacing: -.02em; caret-color: var(--ink);
  background: linear-gradient(110deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.13) 38%, rgba(255,255,255,.05) 62%, rgba(255,255,255,.09) 100%) !important;
  background-size: 260% 100% !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.04), inset 0 0 0 1px rgba(255,255,255,.12), 0 18px 48px rgba(0,0,0,.45) !important;
  animation: liquid-open .7s cubic-bezier(.2, 1.35, .35, 1) both, liquid-flow 7s ease-in-out .7s infinite !important; }
#pSpaces .naming { flex: 1 1 100%; }
#pSpaces .naming .space-name { height: 48px !important; min-height: 48px; font-size: 16px !important; }
.naming .space-name::placeholder { color: var(--faint); }
.naming-keys { position: absolute; right: 22px; display: inline-flex !important; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.08);
  color: var(--faint) !important; font-size: 11px; transition: opacity .25s ease, color .25s ease; opacity: .6; }
.naming.has-name .naming-keys { opacity: 1; color: var(--text) !important; }
@keyframes liquid-open {
  0% { transform: scale(.42, .7); border-radius: 22px; opacity: 0; filter: blur(6px); }
  55% { opacity: 1; filter: blur(0); }
  100% { transform: none; } }
@keyframes liquid-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
body.is-naming #field { opacity: .35; filter: saturate(.5) blur(1px); }
[data-theme="light"] .naming .space-name, [data-theme="light"] #pSpaces .naming .space-name {
  background: linear-gradient(110deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.9) 38%, rgba(255,255,255,.55) 62%, rgba(255,255,255,.75) 100%) !important;
  background-size: 260% 100% !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(0,0,0,.08), 0 18px 48px rgba(0,0,0,.12) !important; }
[data-theme="light"] .naming-keys { background: rgba(0,0,0,.06); }
@media (prefers-reduced-motion: reduce) { .naming .space-name { animation: none !important; } }
@media (max-width: 640px) {
  .naming .space-name { height: 52px !important; min-height: 52px; font-size: 17px !important; padding: 0 72px 0 18px !important; }
  .naming-keys { display: inline-flex !important; right: 16px; }
  .frame-bar .space-switch { margin-left: 8px; font-size: 14px; } }
/* One row on every screen now that the tab strip is gone. */
.frame-bar { display: flex !important; align-items: center; gap: 4px !important; }
@media (max-width: 640px) { :root { --header: 60px; } .frame-bar { align-content: center; } }
/* The panel header stays on top while the cards scroll under it, so it carries the panel's fill. */

/* ================= Actions within reach (2026-10-25) =================
   The image panel's actions sit right under the image, ahead of the palette and the collections, so
   they never scroll out of view. Delete is pushed to the far end, away from the primary action. */
.p-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.p-actions #pRemove { margin-left: auto; }
/* The header rabbit in 3D replaces the cutout at the same footprint. */
.brand-rabbit-3d { display: block; width: 40px !important; height: 40px !important; margin: -5px -4px -5px -5px; cursor: pointer; }
@media (max-width: 640px) { .brand-rabbit-3d { width: 36px !important; height: 36px !important; margin: -5px -4px; } }

/* Visual collections as a list: a small mosaic, the name with one line saying what it holds, the
   count, then the action. Sections are labeled so made, example and found are never confused. */

.figma-row { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.figma-row[hidden] { display: none; }

/* ================= Collection strip (2026-10-26) =================
   After daisychainstudio.net: the top of the page is a row of square tiles, one per visual collection,
   running from the rabbit to the edge and scrolling sideways. Ringed and named = what the map shows. */
:root { --header: 96px; }
@media (max-width: 640px) { :root { --header: 72px; } }
.frame-bar { display: flex !important; align-items: center; gap: 12px !important; padding-right: 0 !important; }
.frame-bar .brand { flex: none; }
.frame-bar .bar-right { flex: none; margin: 0 var(--gap) 0 0; }
.frame-bar .bar-right:not(:has(:not([hidden]))) { display: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.coll-strip { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 8px; padding: 0 var(--gap) 0 8px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 8px;
  mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 40px), transparent); }
.coll-strip::-webkit-scrollbar { display: none; }

.strip-gap { flex: none; width: 1px; height: 40px; margin: 0 6px; }

@media (max-width: 640px) {

  .coll-strip { gap: 6px; padding-right: 16px; } }

/* The header's generic button rule (32px pills) must not reach the strip's square tiles. */

/* ================= One DNA in both modes (2026-10-26) =================
   Light mode is the same system with tones flipped, never a different one: every color token has a
   light value, and a control's states keep the same relationship (open = raised fill + ink text). */
[data-theme="light"] { --ok: #2f8a3e; --busy: #a86a00; --danger: #c4321c; }
.workspace-dock #settingsBtn[aria-expanded="true"], .workspace-dock #settingsBtn[aria-expanded="true"] #viewName { color: var(--ink) !important; }
[data-theme="light"] .workspace-dock #settingsBtn[aria-expanded="true"] { background: #fff !important; box-shadow: 0 1px 2px rgba(0,0,0,.12) !important; }
[data-theme="light"] .chip.danger { color: #fff; }
/* The pointer glow lifts the surface, never the text: in light mode a plain white wash greyed out the
   labels under the pointer, so it blends as soft light, which leaves dark ink dark. */
[data-theme="light"] .workspace-dock::after { mix-blend-mode: soft-light; }
[data-theme="light"] .workspace-dock::after { background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255,255,255,.9), transparent 70%); }

/* Tile names wrap to two lines rather than cutting off ("All ima…"). */

/* All images is four images in one square, set a step apart from the collections after it. */

/* The collection's title, top left of the map. Your own collections rename in place. */
.viewbar .collection-heading { display: block !important; min-width: 0; }
#spaceHeading { font-size: 20px; font-weight: 400; letter-spacing: -.02em; line-height: 32px; margin: 0; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#spaceHeading .title-btn, #spaceHeading .title-input { display: inline-block; max-width: 100%; height: 32px; margin: 0 -10px; padding: 0 10px; border: 0; border-radius: 999px;
  font: inherit; letter-spacing: inherit; color: inherit; background: transparent; cursor: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#spaceHeading .title-btn:hover { background: var(--fill); }
#spaceHeading .title-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
#spaceHeading .title-input { width: min(28ch, 100%); background: var(--fill-hi); outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
@media (max-width: 640px) { #spaceHeading { font-size: 17px; } }
/* An empty collection of yours still has its square: a quiet fill with its name always showing. */

/* The rename pill's padding hangs into the gutter, so the name lines up with plain titles. */
.viewbar .collection-heading { margin-left: -10px; }
#spaceHeading { overflow: visible; }
#spaceHeading:not(:has(button, input)) { padding-left: 10px; overflow: hidden; }
#spaceHeading .title-btn, #spaceHeading .title-input { margin: 0; }

/* ================= Squares never crop (2026-10-26) =================
   Every square unit (rail tiles, the four-image mosaics) shows the whole image. One that is not square
   is made smaller to fit, on a blurred copy of itself that fills the square. */
.unit { position: relative; display: block; min-width: 0; min-height: 0; overflow: hidden; background: var(--fill); }
.unit::before { content: ""; position: absolute; inset: -20%; background: var(--src) center / cover no-repeat; filter: blur(10px) saturate(1.1); }
.unit img { position: relative !important; display: block; width: 100% !important; height: 100% !important; object-fit: contain !important; border-radius: 0; }

/* ================= Collections and actions live in the bar (2026-10-27) =================
   Visual collections is no longer a page or a dropdown: like search, View and Add, it expands the whole
   bar upward, at the bar's full width. That width holds the collections as columns of rows. */

/* The empty omnibar reads top to bottom in the order you use it: Try, Colors, then Actions. Every
   button in it is the bar's own shape (a 999px pill) at the bar's control height (40px); only the
   color dots are circles. Section labels share one style and one rhythm. */
#omni .omni-group { padding: 14px 10px 6px; color: var(--muted); font-size: 12px; font-weight: 400; }
#omniList > .omni-group:first-child { padding-top: 6px; }
#omni .omni-chips { padding: 0 6px 4px; gap: 6px; }
#omni .omni-row.omni-chip { min-height: 40px; padding: 0 16px; border-radius: 999px; }

/* On a phone the Try words wrap to a second line instead of cutting to "embr…". */
@media (max-width: 640px) { .omni-chips { flex-wrap: wrap !important; }
  .omni-row.omni-chip { flex: 0 1 auto !important; }
  .omni-chip .label { overflow: visible; text-overflow: clip; } }

/* ================= Deep press to delete (2026-10-27) =================
   Holding a collection fills it from the bottom over --hold; at the top the confirm opens beside it. */

.del-pop { position: fixed; z-index: 30; width: min(280px, calc(100vw - 24px)); padding: 14px; border-radius: 14px;
  background: var(--e3, #1c1c1c); box-shadow: var(--lift-3, 0 12px 40px rgba(0,0,0,.6)); }
.del-pop[hidden] { display: none; }
.del-pop p { margin: 0 0 12px; font-size: 13px; line-height: 1.4; color: var(--text); }
.del-pop .row { display: flex; justify-content: flex-end; gap: 8px; }
[data-theme="light"] .del-pop { background: #fff; }

/* The generic .chip overrides above turn every small chip transparent; the confirm's Delete keeps its fill. */
.del-pop #delPopYes { background: var(--danger) !important; color: #111 !important; box-shadow: none !important; }
.del-pop #delPopYes:hover { filter: brightness(1.08); }
.del-pop #delPopShare { margin-right: auto; }
.del-pop p { overflow: hidden; text-overflow: ellipsis; }

/* The account in the header: its name and a dot that says whether the library is saved. */
.acct-badge { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 0; border-radius: 16px;
  background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.acct-badge:hover { background: var(--fill); color: var(--text); }
.acct-badge[hidden] { display: none; }
.acct-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.acct-badge[data-state="busy"] .dot { background: var(--busy); }
.acct-badge[data-state="error"] .dot { background: var(--danger); }
@media (max-width: 640px) { .acct-badge #acctName { display: none; } .acct-badge { padding: 0 10px; } }

/* Icons on the controls that own each action: the View button shows its arrangement, Fit its corners. */
#settingsBtn { gap: 6px; }
#settingsBtn svg.view-icon { opacity: 1; stroke-width: 1.4; }
#fitField { display: inline-flex; align-items: center; gap: 6px; }
#fitField svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ================= Sources are modules (2026-10-27) =================
   The Add panel opens on a row of sources, each with its own mark; choosing one shows its form alone. */
.sources { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 6px 20px 4px; }
.sources button { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 12px 4px 10px; border: 0;
  border-radius: var(--card); background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line); transition: background-color .15s, color .15s, box-shadow .15s; }
.sources button:hover { background: var(--fill); color: var(--text); }
.sources button[aria-pressed="true"] { background: var(--fill); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.sources button > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-mark { display: grid; place-items: center; width: 28px; height: 28px; }
.src-mark svg { width: 24px; height: 24px; display: block; }
/* Are.na's mark is wide and short; at the shared 24px width it reads smaller than the others. */
.src-mark .mark-wide { width: 32px; height: 19px; }
.src-pane[hidden] { display: none !important; }
#addDlg .hint.err { color: var(--danger); }
@media (max-width: 640px) {
  .sources { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px 12px; }
}

/* ================= One radius system (2026-10-27) =================
   Three radii, by what a thing is, set last so the older layers above cannot drift it:
   --r-control  every control: buttons, chips, text fields, switches (a pill)
   --r-card     every card: collection tiles and rows, mosaics, source modules, the image panel,
                popovers, multi-line fields
   --r-tray     the dock and the panels that grow out of it (set in the tray rules above)
   Color dots stay circles. */
:root { --r-control: 999px; --r-card: 12px; --r-tray: 26px; }
textarea.field { border-radius: var(--r-card) !important; }
.sources button, #panel, .del-pop, .strip { border-radius: var(--r-card) !important; }

#panel .p-img, #panel .p-img img { border-radius: var(--r-card); overflow: hidden; }

/* ================= Settings under the rabbit (2026-10-27) =================
   The rabbit is a button; Settings drops from it. Appearance is a two-way segmented control. */
.frame-bar .brand { border: 0; padding: 4px; margin: -4px; background: transparent; border-radius: var(--r-card); cursor: pointer; }
.frame-bar .brand:hover, .frame-bar .brand[aria-expanded="true"] { background: var(--fill); }
.frame-bar .brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.home-menu { position: fixed; z-index: 30; width: 220px; padding: 12px; border-radius: var(--r-card);
  background: var(--e3, #1c1c1c); box-shadow: var(--lift-3, 0 12px 40px rgba(0,0,0,.6)); display: flex; flex-direction: column; gap: 8px; }
.home-menu[hidden] { display: none; }
.home-menu .label { color: var(--muted); font-size: 12px; }
.home-menu .seg, #addDlg .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; border-radius: var(--r-control); background: var(--fill); }
.home-menu .seg button, #addDlg .seg button { height: 32px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.home-menu .seg button:hover, #addDlg .seg button:hover { color: var(--text); }
.home-menu .seg button[aria-pressed="true"], #addDlg .seg button[aria-pressed="true"] { background: var(--ink); color: var(--frame); }
[data-theme="light"] .home-menu { background: #fff; }

/* Collections in the omnibar are the strip's own tiles, on one line that scrolls sideways. */

/* The + is a tile too: filled, so it reads as the next card rather than an icon floating in the bar. */

/* ---------- collection cards ----------
   One card everywhere. At rest it is a single square cover, like the strip on daisychainstudio.net;
   hovered or focused, the two images behind it fan out into a pile. The strip uses it compact; the
   omnibar uses it full, with text under. Sizes and the spread are variables, set once. */
.strip-tile, .strip-new { --cw: 72px; --sw: 64px; --dx: 0px; --tilt: 0deg; --lift: 0px;
  position: relative; flex: none; display: flex; flex-direction: column; align-items: center; width: var(--cw); height: auto !important; min-height: 0 !important;
  padding: 0 !important; border: 0; background: none !important; box-shadow: none !important; cursor: pointer; color: var(--text);
  -webkit-touch-callout: none; user-select: none; }
.strip-tile.full, .strip-new.full { --cw: 132px; --sw: 116px; width: var(--cw); gap: 8px; }
.strip-tile:hover, .strip-tile:focus-visible { z-index: 5; --dx: calc(var(--cw) * .3); --tilt: 9deg; --lift: -3px; }
.fan { position: relative; display: block; width: var(--cw); height: var(--cw); }
.fan > * { position: absolute; left: 50%; top: 50%; display: block; object-fit: cover; border-radius: var(--r-card, 12px); background: var(--fill);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .15s ease, opacity .2s ease; }
.fan .fan-c { z-index: 2; width: var(--cw); height: var(--cw); transform: translate(-50%, calc(-50% + var(--lift))); }
.fan .fan-l, .fan .fan-r { z-index: 1; width: var(--sw); height: var(--sw); opacity: 0; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.fan .fan-l { transform: translate(calc(-50% - var(--dx)), -50%) rotate(calc(var(--tilt) * -1)); }
.fan .fan-r { transform: translate(calc(-50% + var(--dx)), -50%) rotate(var(--tilt)); }
.strip-tile:hover .fan-l, .strip-tile:hover .fan-r, .strip-tile:focus-visible .fan-l, .strip-tile:focus-visible .fan-r { opacity: 1; }
.strip-tile:hover .fan-c, .strip-tile:focus-visible .fan-c { box-shadow: 0 8px 22px rgba(0,0,0,.45); }
[data-theme="light"] .fan .fan-l, [data-theme="light"] .fan .fan-r { box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.strip-tile:active .fan { transform: scale(.97); }
.strip-tile.found .fan img { filter: saturate(.85); }
.fan .fan-empty { background: var(--fill-hi); }
/* The current collection: a ring on its front card. Hairline in light mode, where dark ink reads heavier. */
.strip-tile[aria-current="true"] .fan-c { box-shadow: 0 0 0 2px var(--frame), 0 0 0 3.5px var(--ink); }
[data-theme="light"] .strip-tile[aria-current="true"] .fan-c { box-shadow: 0 0 0 2px var(--frame), 0 0 0 3px var(--ink); }
.strip-tile:focus-visible, .strip-new:focus-visible { outline: none; }
.strip-tile:focus-visible .fan-c, .strip-new:focus-visible .fan-c { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Compact: the name shows on the front card while hovered, focused or current. */
.strip-name { position: absolute; z-index: 3; left: 50%; bottom: 5px; max-width: calc(var(--cw) - 8px); padding: 2px 6px; border-radius: 6px; transform: translate(-50%, 4px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: rgba(0,0,0,.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: 11px; line-height: 1.25; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.strip-tile:hover .strip-name, .strip-tile:focus-visible .strip-name, .strip-tile[aria-current="true"] .strip-name, .strip-tile:has(.fan-empty) .strip-name { opacity: 1; transform: translate(-50%, 0); }
/* Full: name and count on one line, then what is in it and when it last changed. */
.card-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; width: 100%; padding: 0 4px; text-align: left; }
.card-name { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.card-count { align-self: center; padding: 1px 7px; border-radius: 999px; background: var(--fill); color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.card-meta { grid-column: 1 / -1; overflow: hidden; color: var(--faint); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
/* Hold to open Share and Delete: the front card fills from the bottom while held. */
.strip-tile .fan-c::after { content: none; }
.strip-tile.holding .fan-c { box-shadow: inset 0 calc(var(--cw) * -1) 0 rgba(220,38,38,.35); transition: box-shadow var(--hold, 550ms) linear; }
/* New collection: a card-shaped slot with the same filled + as Add images, so it reads as an action. */
.strip-new .fan .fan-c { display: grid; place-items: center; background: transparent; box-shadow: inset 0 0 0 1px var(--line, rgba(255,255,255,.18)); }
.strip-new .plus-dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--frame); transition: transform .15s ease; }
.strip-new .plus-dot svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.strip-new:hover .fan-c { box-shadow: inset 0 0 0 1px var(--ink); }
.strip-new:hover .plus-dot { transform: scale(1.08); }
.strip-new:active .plus-dot { transform: scale(.94); }
.strip-new .new-label { position: absolute; left: 0; right: 0; bottom: 6px; color: var(--muted); font-size: 11px; text-align: center; }
[data-theme="light"] .strip-new .fan .fan-c { box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.omni-cards { display: flex; gap: 10px; padding: 8px 8px 12px; overflow-x: auto; scrollbar-width: none; }
.omni-cards::-webkit-scrollbar { display: none; }
.omni-cards .strip-tile[aria-selected="true"] .fan-c { outline: 2px solid var(--ink); outline-offset: 3px; }
.frame-bar .coll-strip { gap: 4px; }
@media (max-width: 640px) {
  .strip-tile:not(.full), .strip-new:not(.full) { --cw: 54px; --sw: 48px; }
  .strip-name, .strip-new .new-label { font-size: 10px; bottom: 3px; } }
@media (prefers-reduced-motion: reduce) { .fan > *, .strip-name, .strip-new .plus-dot { transition: none; } }

/* ---------- color picker ----------
   Labeled pills: the collection's colors as dots with a › for the rest, then a spectrum for any hue. */
.color-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 12px; padding: 6px 10px 10px; }
.cp-group { display: grid; gap: 8px; min-width: 0; }
.cp-any { flex: 1 1 200px; }
.cp-label { padding-left: 6px; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.cp-pill { display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 6px; border-radius: 999px; background: var(--fill); }
.cp-pill.open { flex-wrap: wrap; height: auto; min-height: 48px; padding: 6px; border-radius: 26px; max-width: 360px; }
.cp-dot { flex: none; width: 36px !important; height: 36px !important; min-height: 0 !important; padding: 0 !important; border: 0; border-radius: 50% !important;
  cursor: pointer; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14); transition: transform .15s ease, box-shadow .15s ease; }
.cp-dot[hidden] { display: none; }
.cp-dot:hover { transform: scale(1.08); }
.cp-dot:active { transform: scale(.94); }
.cp-dot[aria-pressed="true"], .cp-dot:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--fill), 0 0 0 3.5px var(--ink); }
[data-theme="light"] .cp-dot { box-shadow: inset 0 0 0 .5px rgba(0,0,0,.16); }
[data-theme="light"] .cp-dot[aria-pressed="true"], [data-theme="light"] .cp-dot:focus-visible { box-shadow: 0 0 0 2px var(--fill), 0 0 0 3px var(--ink); }
.cp-more { flex: none; display: grid; place-items: center; width: 30px !important; height: 36px !important; min-height: 0 !important; padding: 0 !important;
  border: 0; border-radius: 999px !important; background: var(--fill-hi) !important; color: var(--text); cursor: pointer; }
.cp-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.cp-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.cp-more:hover { color: var(--ink); }
.cp-any .cp-pill { padding: 0 18px; }
.spectrum { position: relative; flex: 1; height: 12px; border-radius: 999px; cursor: pointer; touch-action: none; outline: none;
  background: linear-gradient(90deg, hsl(0 62% 50%), hsl(60 62% 50%), hsl(120 62% 50%), hsl(180 62% 50%), hsl(240 62% 50%), hsl(300 62% 50%), hsl(359 62% 50%)); }
.spectrum-thumb { position: absolute; top: 50%; width: 24px; height: 24px; border-radius: 50%; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2.5px var(--ink), 0 2px 8px rgba(0,0,0,.4); pointer-events: none; transition: transform .12s ease; }
.spectrum.dragging .spectrum-thumb, .spectrum:focus-visible .spectrum-thumb { transform: translate(-50%, -50%) scale(1.12); }
[data-theme="light"] .spectrum-thumb { box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.15); }
@media (prefers-reduced-motion: reduce) { .cp-dot, .cp-more svg, .spectrum-thumb { transition: none; } }
/* Filing the open image: drop targets in the strip answer as it passes over them. */
body.filing #collStrip .strip-tile[data-space]:not([data-space=""]) .fan-c, body.filing #newColl .fan-c { transition: transform .15s ease, box-shadow .15s ease; }
#collStrip .drop-on .fan-c { box-shadow: 0 0 0 2px var(--frame), 0 0 0 3.5px var(--ink) !important; transform: translate(-50%, -50%) scale(1.08) !important; }
#pImg { cursor: grab; }
/* ---------- add sources ----------
   One row of segments in a single pill, the chosen one filled (the Touch Bar's segmented control).
   Its controls open underneath as labeled rows: the label on the left, the field and action beside it. */
#addDlg .sources { display: flex !important; gap: 2px; margin: 6px 20px 4px; padding: 4px !important; border-radius: 999px; background: var(--fill);
  overflow-x: auto; scrollbar-width: none; }
#addDlg .sources::-webkit-scrollbar { display: none; }
#addDlg .sources button { flex: 1 0 auto; flex-direction: row !important; justify-content: center; gap: 7px !important; height: 40px; min-height: 0;
  padding: 0 10px !important; border-radius: 999px !important; background: transparent; box-shadow: none !important; color: var(--muted); font-size: 13px; white-space: nowrap; }
#addDlg .sources button:hover { background: var(--fill-hi); color: var(--text); }
#addDlg .sources button[aria-pressed="true"] { background: var(--ink) !important; color: var(--frame) !important; box-shadow: none !important; }
#addDlg .sources .src-mark { width: 20px; height: 20px; }
#addDlg .sources .src-mark svg { width: 18px; height: 18px; }
#addDlg .sources .src-mark .mark-wide { width: 24px; height: 14px; }
#addDlg .bar-pane:not([hidden]) { display: grid !important; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 10px 14px; }
#addDlg .bar-pane > .label { margin: 0; color: var(--muted); font-size: 13px; }
#addDlg .bar-pane > .hint { grid-column: 2; margin: 0; }
#addDlg .bar-pane > .row { margin: 0; }
#addDlg #figmaDepth { grid-template-columns: repeat(3, 1fr); }
#addDlg .bar-pane .row.nowrap > .field, #addDlg .bar-pane .row.nowrap > .at-field { flex: 1; min-width: 0; }
#addDlg .bar-pane textarea.field { min-height: 40px; resize: vertical; }
.at-field { position: relative; display: flex; align-items: center; }
.at-field > span { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.at-field > .field { width: 100%; padding-left: 30px !important; }
@media (max-width: 640px) {
  #addDlg .sources { margin: 4px 12px; }
  #addDlg .sources button { padding: 0 12px !important; }
  #addDlg .bar-pane:not([hidden]) { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #addDlg .bar-pane > .hint { grid-column: 1; } }

/* ================= Bar and panel: three values (2026-10-27) =================
   The bar and its panels had seven fills and three near-black buttons competing. Now:
     surface  the bar and panel themselves
     well     every secondary control: one translucent fill, so it reads the same on any surface
     ink      one primary per view (Choose files, and the + at rest)
   The chosen source is raised on the surface (lighter, faint shadow) instead of filled with ink, so it
   no longer competes with the primary. Shadows are short and faint, and each half of an expanded bar
   still casts only away from the seam (offset = blur - spread). */
:root { --well: rgba(255,255,255,.06); --well-hi: rgba(255,255,255,.1); --raised: #303030;
  --lift-soft: 0 1px 2px rgba(0,0,0,.4); --dock-rest: 0 0 0 .5px rgba(255,255,255,.07), 0 8px 24px -8px rgba(0,0,0,.7); }
[data-theme="light"] { --well: rgba(0,0,0,.045); --well-hi: rgba(0,0,0,.075); --raised: #fbfbfb;
  --lift-soft: 0 0 0 .5px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.08); --dock-rest: 0 0 0 .5px rgba(0,0,0,.06), 0 8px 24px -8px rgba(0,0,0,.16); }

.workspace-dock, [data-theme="light"] .workspace-dock { box-shadow: var(--dock-rest) !important; }
#workspaceDock.expanded { box-shadow: 0 14px 20px -6px rgba(0,0,0,.5) !important; }
[data-theme="light"] #workspaceDock.expanded { box-shadow: 0 14px 20px -6px rgba(0,0,0,.09) !important; }
#omni.tray-panel, #librarySettings.tray-panel, #addDlg.tray-panel, #worldPanel.tray-panel { box-shadow: 0 -14px 20px -6px rgba(0,0,0,.45) !important; }
[data-theme="light"] #omni.tray-panel, [data-theme="light"] #librarySettings.tray-panel, [data-theme="light"] #addDlg.tray-panel, [data-theme="light"] #worldPanel.tray-panel { box-shadow: 0 -14px 20px -6px rgba(0,0,0,.07) !important; }

/* Wells: search, Similar, the source track, secondary chips, close, the / hint. */
.workspace-dock #search, [data-theme="light"] .workspace-dock #search,
.workspace-dock #settingsBtn, [data-theme="light"] .workspace-dock #settingsBtn,
#addDlg .sources, #addDlg .chip.lg:not(.dark), #addDlg .x-btn, #addDlg .seg {
  background: var(--well) !important; box-shadow: none !important; }
.workspace-dock #settingsBtn:hover, #addDlg .chip.lg:not(.dark):hover, #addDlg .x-btn:hover { background: var(--well-hi) !important; }
.workspace-dock .key-hint { background: transparent !important; box-shadow: inset 0 0 0 1px var(--well-hi) !important; }

/* The chosen segment is raised, not inked. */
#addDlg .sources button[aria-pressed="true"], #addDlg .seg button[aria-pressed="true"] {
  background: var(--raised) !important; color: var(--text) !important; box-shadow: var(--lift-soft) !important; }

/* Primary: ink, flat, no glow. */
#addDlg .chip.dark, .workspace-dock #addBtn { box-shadow: none !important; }
.workspace-dock #addBtn { background: var(--ink) !important; color: var(--frame) !important; }
.workspace-dock #addBtn:hover { background: var(--ink-hover) !important; }
/* Open, the + becomes a close: a well, not a second primary. */
#workspaceDock.expanded #addBtn { background: var(--well) !important; color: var(--text) !important; }
#workspaceDock.expanded #addBtn:hover { background: var(--well-hi) !important; }

/* Remove all is destructive and rare: text only, until it asks to confirm. */
#addDlg #clearAll { background: transparent !important; box-shadow: none !important; color: var(--muted) !important; padding-left: 0; }
#addDlg #clearAll:hover { color: var(--danger, #dc2626) !important; }

/* ================= Menus (2026-10-27) =================
   After Variant's export menu: a quiet panel with a hairline, compact rows of icon + label, a hairline
   between groups. The collection menu (#delPop) is the first; destructive rows are red text, not a red
   button. */
.del-pop { width: 232px !important; padding: 4px !important; border-radius: 12px !important; background: #1a1a1a !important;
  box-shadow: 0 0 0 .5px rgba(255,255,255,.1), 0 10px 28px -10px rgba(0,0,0,.7) !important; }
[data-theme="light"] .del-pop { background: #fff !important; box-shadow: 0 0 0 .5px rgba(0,0,0,.1), 0 10px 28px -10px rgba(0,0,0,.18) !important; }
.del-pop p { margin: 0 !important; padding: 8px 10px 6px; font-size: 12px !important; color: var(--muted) !important; white-space: nowrap; }
.del-pop[data-step="confirm"] p { white-space: normal; }
.del-pop hr { border: 0; height: .5px; margin: 4px 6px; background: var(--well-hi); }
.del-pop hr[hidden] { display: none; }
.menu-row { display: flex !important; align-items: center; gap: 10px; width: 100%; height: 34px !important; min-height: 0 !important; padding: 0 10px !important;
  border: 0; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; color: var(--text) !important;
  font: inherit; font-size: 13px !important; text-align: left; cursor: pointer; transform: none !important; }
.menu-row[hidden] { display: none !important; }
.menu-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-row svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.menu-row:hover, .menu-row:focus-visible { background: var(--well) !important; outline: none; }
.menu-row.danger, .menu-row.danger svg { color: var(--danger, #dc2626) !important; stroke: var(--danger, #dc2626); }
.menu-row.danger:hover, .menu-row.danger:focus-visible { background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent) !important; }

/* Capsules are filled, not outlined: the same well as every other secondary control. */
.chip:not(.dark):not(.danger):not(.menu-row), .chip.lg:not(.dark), #pLink, .spaces button, #pSpaces .chip:not(.dark) {
  background: var(--well) !important; box-shadow: none !important; }
.chip:not(.dark):not(.danger):hover, .chip.lg:not(.dark):hover, #pLink:hover, .spaces button:hover { background: var(--well-hi) !important; box-shadow: none !important; }
.spaces button[aria-pressed="true"], #pSpaces .chip.dark { background: var(--raised) !important; box-shadow: var(--lift-soft) !important; color: var(--text) !important; }
.del-pop #delPopYes, .del-pop #delPopShare, .del-pop #delPopNo { background: transparent !important; filter: none; margin: 0; }
.del-pop #delPopYes { color: var(--danger) !important; }
.del-pop #delPopYes:hover, .del-pop #delPopYes:focus-visible { background: color-mix(in srgb, var(--danger) 12%, transparent) !important; }
.del-pop #delPopShare:hover, .del-pop #delPopNo:hover, .del-pop #delPopShare:focus-visible, .del-pop #delPopNo:focus-visible { background: var(--well) !important; }
[data-theme="light"] .menu-row.danger, [data-theme="light"] .del-pop #delPopYes { color: #d43f2a !important; }
[data-theme="light"] .menu-row.danger svg { stroke: #d43f2a; }

/* Rail: room between collections, so each reads as its own object and a hover pile has space to fan. */
.frame-bar .coll-strip, .coll-strip { gap: 14px !important; }
@media (max-width: 640px) { .frame-bar .coll-strip, .coll-strip { gap: 10px !important; } }
/* A hovered pile fans by --dx each side; the tile makes that much room so it never covers a neighbor. */
.coll-strip .strip-tile { transition: margin .22s cubic-bezier(.2,.8,.2,1); }
.coll-strip .strip-tile:hover, .coll-strip .strip-tile:focus-visible { margin-inline: calc(var(--cw) * .3 + 4px); }
@media (prefers-reduced-motion: reduce) { .coll-strip .strip-tile { transition: none; } }
/* The rail scrolls sideways, which clips it top and bottom too. Padding inside the clip (taken back with
   a negative margin) leaves room for a lifted pile, its shadow and the current ring. */
.coll-strip { padding-block: 16px !important; margin-block: -16px; height: calc(100% + 32px) !important; padding-left: 12px !important; mask-image: none; }
.coll-strip.more-r { mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.coll-strip.more-l { mask-image: linear-gradient(to right, transparent, #000 32px); }
.coll-strip.more-l.more-r { mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 48px), transparent); }
.strip-tile:hover .fan-c, .strip-tile:focus-visible .fan-c { box-shadow: 0 6px 14px -4px rgba(0,0,0,.4); }
[data-theme="light"] .strip-tile:hover .fan-c, [data-theme="light"] .strip-tile:focus-visible .fan-c { box-shadow: 0 6px 14px -4px rgba(0,0,0,.22); }
.coll-strip { padding-block: 24px !important; margin-block: -24px; height: calc(100% + 48px) !important; }
/* The stage starts where the bar ends and is opaque; above it in paint order, it cut the rail's overflow
   (a lifted pile's shadow) along the bar's bottom edge. The bar sits over the stage, under everything
   that sets its own z-index. */
.frame-bar { z-index: 2; }

/* Segmented rows: a segment's fill fits its label (even padding), and spare width goes between segments,
   not into the chosen one. */
#addDlg .sources { justify-content: space-between; }
#addDlg .sources button { flex: 0 0 auto !important; padding: 0 10px !important; }
#addDlg #figmaDepth { display: inline-flex !important; justify-self: start; gap: 2px; width: auto; }
#addDlg #figmaDepth button { flex: none; padding: 0 16px; }
@media (max-width: 640px) { #addDlg .sources { justify-content: flex-start; } #addDlg .sources button { padding: 0 12px !important; } }

/* ================= Owners, locks, Fielder world (2026-10-27) =================
   Every collection shows its name, and under it who it belongs to. A lock means closed: private
   (yours or sent to you, not published) or curated by Fielder. */
:root { --header: 124px; }
@media (max-width: 640px) { :root { --header: 108px; } }
.strip-tile, .strip-new { gap: 6px; }
.tile-text { display: flex; flex-direction: column; align-items: center; gap: 1px; width: calc(var(--cw) + 12px); min-width: 0; line-height: 1.25; }
.tile-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--text); }
.tile-owner { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: var(--muted); }
.tile-owner svg { width: 10px; height: 10px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.card-text .tile-owner { grid-column: 1 / -1; justify-content: flex-start; font-size: 12px; }
.card-text .tile-owner svg { width: 11px; height: 11px; }
.strip-tile[aria-current="true"] .tile-name { font-weight: 500; }
/* The old name label over the cover is replaced by the text under it. */
.strip-tile .strip-name { display: none; }
.strip-new .new-label { position: static !important; transform: none !important; opacity: 1 !important; font-size: 11.5px; color: var(--muted); }
.strip-world .plus-dot { background: transparent !important; color: var(--text); }
.strip-world .plus-dot svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* Collection menu: World row and the name step. */
.menu-row svg circle { fill: none; }
.menu-name { display: grid; gap: 8px; padding: 8px; }
.menu-name[hidden] { display: none; }
.menu-name .chip { width: 100%; }
.menu-note { margin: 0; padding: 0 2px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.menu-note.err { color: var(--danger); }

/* Settings: your name. */
.home-menu .me-line { margin: 4px 0 8px; font-size: 13px; color: var(--text); }
.home-menu .me-actions { display: flex; gap: 6px; margin-bottom: 8px; }
.home-menu .me-key { display: flex; gap: 6px; margin-bottom: 8px; }
.home-menu .me-key[hidden] { display: none; }
.home-menu .menu-note { max-width: 240px; margin-bottom: 10px; }
.home-menu .menu-note:empty { display: none; }

/* World panel. */
.world-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px 4px; }
.world-bar .seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--well); }
.world-bar .seg button { height: 32px; padding: 0 16px; border: 0; border-radius: 999px !important; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.world-bar .seg button[aria-pressed="true"] { background: var(--raised); color: var(--text); box-shadow: var(--lift-soft); }
.world-me { font-size: 12px; color: var(--muted); }
.world-cards { padding: 12px 20px 8px !important; gap: 16px !important; }
#worldPanel .hint { padding: 0 20px 16px; margin: 0; }
#worldPanel .hint:empty { display: none; }
.del-pop .menu-note { white-space: normal !important; padding: 0 2px !important; font-size: 12px !important; }
.del-pop .menu-note.err { color: var(--danger) !important; }

/* World shimmers: a slow iridescent edge turning around the slot, and a soft sheen that crosses it
   now and then. It is the one door out of your own library, so it is the one thing on the rail that moves. */
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.strip-world .fan-c { position: relative; overflow: hidden; isolation: isolate; box-shadow: none !important; }
.strip-world .fan-c::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.25px; z-index: 1; pointer-events: none;
  background: conic-gradient(from var(--spin), #7cf2ff, #b48cff, #ff8fd1, #ffd27a, #b6ff8a, #7cf2ff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: world-spin 6s linear infinite; opacity: .85; }
.strip-world .fan-c::after { content: ""; position: absolute; inset: -40%; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  transform: translateX(-70%); animation: world-sheen 4.8s cubic-bezier(.4,0,.2,1) infinite; }
[data-theme="light"] .strip-world .fan-c::after { background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.75) 50%, transparent 60%); }
.strip-world .plus-dot { position: relative; z-index: 2; }
.strip-world:hover .fan-c::before { animation-duration: 2.4s; opacity: 1; }
@keyframes world-spin { to { --spin: 360deg; } }
@keyframes world-sheen { 0%, 55% { transform: translateX(-70%); } 85%, 100% { transform: translateX(70%); } }
@media (prefers-reduced-motion: reduce) { .strip-world .fan-c::before, .strip-world .fan-c::after { animation: none; } .strip-world .fan-c::after { display: none; } }

/* ================= View panel: controls beside their labels (2026-10-27) =================
   Top: the arrangement (each option as wide as its word) and Fit to screen. Below: image size as a
   filled capsule with its label and value inside, and Motion with its switch right after the word. */
#librarySettings.tray-panel { display: flex !important; flex-direction: column; gap: 12px; padding: 14px 14px 10px !important; }
#librarySettings .vm-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#librarySettings .view-switch { display: inline-flex !important; width: auto !important; gap: 2px; padding: 2px; border-radius: 999px; background: var(--well) !important; box-shadow: none !important; }
#librarySettings .view-switch button { flex: none !important; height: 34px; padding: 0 18px !important; }
#librarySettings .view-switch button[aria-pressed="true"] { background: var(--raised) !important; color: var(--text) !important; box-shadow: var(--lift-soft) !important; }
#librarySettings .vm-controls { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.cap-slider { position: relative; flex: 0 1 340px; min-width: 200px; height: 38px; --p: 25%;
  --cap-fill: rgba(236,235,230,.2); }
[data-theme="light"] .cap-slider { --cap-fill: rgba(0,0,0,.13); }
#librarySettings .cap-slider #tile { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 38px; margin: 0; border-radius: 999px; cursor: ew-resize;
  background: linear-gradient(to right, var(--cap-fill) var(--p), var(--well) var(--p)); }
#librarySettings .cap-slider #tile::-webkit-slider-runnable-track { height: 38px; background: transparent; border: 0; }
#librarySettings .cap-slider #tile::-moz-range-track { height: 38px; background: transparent; border: 0; }
/* The thumb is a short bar at the fill's edge: you can see where to grab, and it never covers the label. */
#librarySettings .cap-slider #tile::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 18px; margin-top: 10px; border-radius: 2px; background: var(--text); opacity: .55; box-shadow: none; transform: translateX(-6px); }
#librarySettings .cap-slider #tile::-moz-range-thumb { width: 4px; height: 18px; border: 0; border-radius: 2px; background: var(--text); opacity: .55; box-shadow: none; }
#librarySettings .cap-slider #tile:active::-webkit-slider-thumb { opacity: .9; transform: translateX(-6px); box-shadow: none; }
#librarySettings .cap-slider #tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cap-label { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text); pointer-events: none; }
#librarySettings .cap-slider .vm-value { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 26px; min-height: 0; padding: 0 10px; border: 0;
  border-radius: 999px !important; background: transparent !important; box-shadow: none !important; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer; }
#librarySettings .cap-slider .vm-value:not(:disabled):hover { background: var(--well-hi) !important; color: var(--text); }
#librarySettings .cap-slider .vm-value:disabled { pointer-events: none; }
#librarySettings .vm-motion { display: flex; align-items: center; gap: 10px; }
#librarySettings .vm-motion .vm-label { font-size: 13px; color: var(--text); }
@media (max-width: 640px) { #librarySettings .vm-top { flex-wrap: wrap; } .cap-slider { flex: 1 1 100%; } }
/* The label owns the capsule's first stretch, always filled; the range starts after it, so the fill runs
   on from the label and the grab bar never lands on the text. */
.cap-slider { display: flex; align-items: stretch; border-radius: 999px; overflow: hidden; background: var(--well); }
.cap-label { position: static; transform: none; display: flex; align-items: center; flex: none; padding: 0 10px 0 16px; background: var(--cap-fill); }
#librarySettings .cap-slider #tile { flex: 1; min-width: 0; width: auto; border-radius: 0 999px 999px 0; background: linear-gradient(to right, var(--cap-fill) var(--p), transparent var(--p)); }
#librarySettings .cap-slider:has(#tile:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
#librarySettings .cap-slider #tile:focus-visible { outline: none; }
#librarySettings .cap-slider { order: 0; }
#librarySettings .cap-slider #tile { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline-offset: 0; }
.cap-slider { box-shadow: none !important; }
#librarySettings .cap-slider #tile::-webkit-slider-runnable-track { border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }
#librarySettings .cap-slider #tile::-moz-range-track { border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }

/* Title and owner. Every label starts on the same line under its cover: World and New have no
   owner, so they align to the top instead of centering against the two-line tiles. The lock hangs
   left of the owner (padding on the right balances it), so the owner word centers under the title. */
.strip-new:not(.full) .new-label { padding-bottom: calc(10.5px * 1.2 + 2px); } /* the owner line it does not have */
.strip-tile:not(.full), .strip-new:not(.full) { justify-content: flex-start; }
.strip-new .new-label { line-height: 1.25; }
.tile-text { gap: 2px; }
.tile-name { letter-spacing: -0.005em; }
.tile-owner { gap: 3px; line-height: 1.2; }
.tile-owner:has(svg) { padding-right: 12px; }
.tile-owner svg { width: 9px; height: 9px; stroke-width: 1.4; opacity: .8; transform: translateY(-0.5px); }

/* Depth view: the blob replaces the pointer over the canvas. It inverts what it sits on, so it reads
   on light and dark images alike. The ring fills as you go further in; the count shows while scrolling. */
#field.deep, #field.deep.panning { cursor: none; }
@media (pointer: coarse) { #field.deep { cursor: grab; } }
.depth-blob { position: fixed; left: 0; top: 0; z-index: 40; width: 0; height: 0; pointer-events: none;
  mix-blend-mode: difference; opacity: 0; transition: opacity .2s ease; will-change: transform; }
.depth-blob.on { opacity: 1; }
.depth-blob i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #fff;
  transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.depth-blob.over i { transform: scale(3.2); }
.depth-blob svg { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; overflow: visible;
  fill: none; stroke: #fff; stroke-width: 1.5; transform: rotate(-90deg); opacity: .7; transition: opacity .25s ease; }
.depth-blob.busy svg, .depth-blob.over svg { opacity: 1; }
.depth-blob .track { stroke-opacity: .35; }
.depth-blob .arc { stroke-dasharray: calc(var(--p, 0) * 1) 100; stroke-linecap: round; }
.depth-blob b { position: absolute; left: 30px; top: -7px; font-size: 11px; font-weight: 500; line-height: 14px; font-variant-numeric: tabular-nums;
  color: #fff; white-space: nowrap; opacity: 0; transition: opacity .25s ease; }
.depth-blob.busy b { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .depth-blob i, .depth-blob svg, .depth-blob b { transition: none; } }
.depth-blob.flat svg, .depth-blob.flat b { display: none; }