/* Reference Library: one quiet bar, search first, an image-led grid, and a viewer tinted by the reference itself.
   Colour pairs follow the contrast checks in tests/theme.test.mjs; spacing, corners and line heights keep a 4 px rhythm. */
@font-face { font-family: "Inter Library"; src: url("assets/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap }

:root {
  --canvas: #F5F5F6; --surface: #FFFFFF; --sunken: #ECECEE; --ink: #141518; --soft: #5A5D66; --line: #E3E3E7; --line-strong: #C8C9CF;
  --accent: #3F50AE; --accent-wash: #E9ECFF; --on-accent: #FFFFFF; --danger: #BC4249;
  --stage: #121316; --stage-ink: #F2F3F5; --stage-soft: #B5BAC2; --stage-glass: rgba(18, 19, 22, .62);
  --shadow-pop: 0 1px 2px rgba(22, 24, 27, .06), 0 12px 32px rgba(22, 24, 27, .12);
  --font: "Inter Library", Inter, "Helvetica Neue", Arial, sans-serif;
  /* Five type levels */
  --t-meta: 400 13px/20px var(--font); --t-ui: 400 15px/24px var(--font); --t-lead: 500 17px/24px var(--font);
  --t-title: 600 22px/28px var(--font); --t-display: 600 36px/44px var(--font);
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --gap: 20px; --bar-h: 76px;
  --edge: inset 0 0 0 1px rgba(22, 24, 27, .07);
  --ease: cubic-bezier(.2, .8, .2, 1); --quick: 160ms; --slow: 240ms;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --canvas: #0E0F11; --surface: #17181B; --sunken: #1F2024; --ink: #EDEDEF; --soft: #A0A3AC; --line: #26272C; --line-strong: #3B3D44;
  --accent: #A9B4FF; --accent-wash: #2A3050; --on-accent: #121316; --danger: #EE9A9F;
  --shadow-pop: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px rgba(0, 0, 0, .45); --edge: inset 0 0 0 1px rgba(255, 255, 255, .08); color-scheme: dark } }
:root[data-theme="dark"] {
  --canvas: #0E0F11; --surface: #17181B; --sunken: #1F2024; --ink: #EDEDEF; --soft: #A0A3AC; --line: #26272C; --line-strong: #3B3D44;
  --accent: #A9B4FF; --accent-wash: #2A3050; --on-accent: #121316; --danger: #EE9A9F;
  --shadow-pop: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px rgba(0, 0, 0, .45); --edge: inset 0 0 0 1px rgba(255, 255, 255, .08); color-scheme: dark }

* { box-sizing: border-box }
[hidden] { display: none !important }
html { scroll-padding-top: 140px }
body { margin: 0; background: var(--canvas); color: var(--ink); font: var(--t-ui); -webkit-font-smoothing: antialiased; text-wrap: pretty }
body.locked { overflow: hidden }
button, input, select { font: inherit; color: inherit }
button { cursor: pointer }
a { color: inherit }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-s) }
::selection { background: var(--accent-wash); color: var(--ink) }
.wrap { padding-inline: max(32px, env(safe-area-inset-left, 0px)) max(32px, env(safe-area-inset-right, 0px)); max-width: 1840px; margin-inline: auto }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 }
.cat { font: italic 400 12px/16px var(--font); color: var(--soft) }
.note { font: var(--t-meta); color: var(--soft); margin: 0 }
.hint { font: var(--t-meta); color: var(--soft) }
.label, .eyebrow { font: 500 12px/16px var(--font); color: var(--soft) }

/* Buttons share one shape; their weight says how important they are. */
.btn, .vbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 500 14px/20px var(--font); text-decoration: none; white-space: nowrap; transition: background var(--quick), border-color var(--quick) }
.btn:hover, .vbtn:hover { border-color: var(--line-strong) }
.btn.dark, .btn.primary { background: var(--ink); color: var(--canvas); border-color: var(--ink) }
.btn svg { width: 16px; height: 16px }
.btn.ghost, .quiet { border-color: transparent; background: none; color: var(--soft) }
.btn.ghost:hover, .quiet:hover { color: var(--ink); background: var(--sunken) }
.btn:disabled { opacity: .45; cursor: default }
.icon-btn { display: inline-grid; place-items: center; position: relative; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r-s); background: none; color: var(--soft) }
.icon-btn:hover, .icon-btn[aria-expanded="true"] { background: var(--sunken); color: var(--ink) }
.icon-btn .badge { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--ink); color: var(--canvas); font: 600 10px/16px var(--font); font-variant-numeric: tabular-nums }

/* The bar: name, search, views, a few icons. */
/* The bar: name on the left, the four views in the middle, a few icons on the right. */
.app-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--ink); color: var(--canvas); box-shadow: 0 1px 2px rgba(22, 24, 27, .18), inset 0 1px 0 rgba(255, 255, 255, .12) }
.app-icon svg { width: 18px; height: 18px; stroke-width: 2 }
/* The three views sit under the search as tabs, with the count and view tools on the same line. */
.brand { display: inline-flex; align-items: center; gap: 10px; justify-self: start; min-width: 0; border: 0; background: none; padding: 0; text-align: left }
.right { display: flex; align-items: center; justify-content: flex-end; gap: 4px }
/* Search is the instrument: tags appear as you type, each with its kind, its count and three of its images. */
.search-clear { width: 28px; height: 28px }
.suggest h4 { margin: 8px 8px 4px; font: 500 12px/16px var(--font); color: var(--soft) }
.sug { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 96px; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-s); background: none; text-align: left }
.sug[aria-selected="true"], .sug:hover { background: var(--sunken) }
.sug b { font: 500 14px/20px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sug b mark { background: none; color: var(--accent); font-weight: 600 }
.sug .kind { font: var(--t-meta); color: var(--soft); white-space: nowrap }
.sug .kind em { font-style: normal; font-variant-numeric: tabular-nums; margin-left: 8px; color: var(--ink) }
.sug .peek { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; height: 32px; border-radius: 4px; overflow: hidden }
.sug .peek i { background: var(--sunken) center/cover no-repeat }
.sug.text { grid-template-columns: 20px minmax(0, 1fr) auto }
.sug.text b { font-weight: 400 }
.sug-icon { display: grid; place-items: center; color: var(--soft) }
.sug-icon svg { width: 16px; height: 16px }
.sug b { font-size: 15px }
.suggest .tip { margin: 8px 8px 4px; font: var(--t-meta); color: var(--soft) }
.suggest .tip code, .sug .kind code { font: 500 12px/16px var(--font); background: var(--sunken); border-radius: 4px; padding: 0 4px; color: var(--ink) }
.sug.text .kind { overflow: hidden; text-overflow: ellipsis; min-width: 0 }

/* Under the bar: a pill for each kind of tag on the left, the count, View and Select on the right. */
.dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); flex: none }
.tools { display: flex; align-items: center; gap: 4px; flex: none }
.tool { border-color: transparent; background: none; color: var(--soft) }
.tool:hover, .tool[aria-expanded="true"] { background: var(--surface); color: var(--ink) }
.tool[aria-pressed="true"] { background: var(--accent-wash); color: var(--ink) }

/* Popovers: one filter at a time, a flat list under More, and the View settings. */
.pop { position: fixed; z-index: 90; width: min(400px, calc(100vw - 32px)); max-height: min(70vh, 560px); display: grid; grid-template-rows: minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-pop); overflow: hidden }
.pop.narrow { width: min(300px, calc(100vw - 32px)) }
.pop.view { width: min(380px, calc(100vw - 32px)) }
.view-row > span { white-space: nowrap }
.facet-body { display: grid; align-content: start; gap: 12px; min-height: 0; padding: 16px; overflow-y: auto; overscroll-behavior: contain }
.facet-body header { display: grid; gap: 2px; padding: 0 4px }
.facet-body header b { display: inline-flex; align-items: center; gap: 8px; font: var(--t-lead) }
.facet-body header b svg { width: 18px; height: 18px; color: var(--soft) }
.facet-body input[type="search"] { height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--canvas); font: var(--t-ui) }
.opts { display: grid; gap: 2px }
.opt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-s); background: none; text-align: left; font: var(--t-ui) }
.opt:hover { background: var(--canvas) }
.opt .box { width: 18px; height: 18px; border: 1.5px solid var(--line-strong); border-radius: 5px; display: grid; place-items: center }
.opt[aria-pressed="true"] .box { background: var(--ink); border-color: var(--ink) }
.opt[aria-pressed="true"] .box::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--canvas); border-top: 0; border-right: 0; rotate: -45deg; translate: 0 -1px }
.opt .n { font: var(--t-meta); color: var(--soft); font-variant-numeric: tabular-nums }
.opt .sub { display: block; font: var(--t-meta); color: var(--soft) }
.opt[disabled] { opacity: .4; cursor: default }
.opt[disabled]:hover { background: none }
.swgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 12px 8px }
.sw { display: grid; justify-items: center; gap: 6px; border: 0; background: none; padding: 4px 0; font: var(--t-meta); color: var(--soft) }
.sw i { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12) }
.sw[aria-pressed="true"] { color: var(--ink) }
.sw[aria-pressed="true"] i { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink) }
.sw[disabled] { opacity: .3; cursor: default }
/* More: every other kind of tag down the left, the chosen kind's values on the right. One panel, no second level. */
.pop.more { width: min(680px, calc(100vw - 32px)) }
.more-grid { display: grid; grid-template-columns: 208px minmax(0, 1fr); min-height: 0 }
.more-kinds { display: grid; align-content: start; gap: 2px; min-height: 0; overflow-y: auto; padding: 12px 8px; border-right: 1px solid var(--line); background: var(--canvas) }
.more-kinds button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: var(--r-s); background: none; text-align: left; font: var(--t-ui); color: var(--soft) }
.more-kinds button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.more-kinds button:hover { color: var(--ink) }
.more-kinds button[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--edge) }
.more-kinds svg { width: 16px; height: 16px }
.more-kinds .n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: var(--canvas); font: 600 11px/18px var(--font); text-align: center; font-style: normal }
@media (max-width: 860px) {
  .more-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) }
  .more-kinds { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none }
  .more-kinds button { flex: none; height: 32px; padding: 0 10px; border-radius: 999px; font: 500 13px/20px var(--font) }
  .more-kinds button span { overflow: visible }
}
.view-body { gap: 4px; padding: 12px }
.view-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 0 8px; font: var(--t-ui) }
.view-row input[type="range"] { width: 120px; accent-color: var(--ink) }
.view-row input[type="checkbox"]:not(.switch-input) { width: 18px; height: 18px; accent-color: var(--ink) }
.switch { cursor: pointer; border-radius: var(--r-s) }
.switch:hover { background: var(--canvas) }
.seg { display: inline-flex; padding: 2px; border-radius: 999px; background: var(--sunken) }
.seg button { height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--soft); font: 500 14px/20px var(--font) }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(22, 24, 27, .1) }
.tag-backup { display: flex; flex-wrap: wrap; gap: 16px; border-top: 1px solid var(--line); padding-top: 12px }
.tag-backup button { border: 0; padding: 0; background: none; color: var(--soft); font: var(--t-meta) }
.tag-backup button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px }

/* The grid: images first, their own colour while they load, words only when asked for. */
.masonry { display: flex; gap: var(--gap); align-items: flex-start; padding-block: 4px 96px }
.col { flex: 1 1 0; min-width: 0; display: grid; gap: var(--gap) }
.item { position: relative; display: grid; gap: 8px; min-width: 0 }
.frame { position: relative; display: block; width: 100%; border: 0; padding: 0; border-radius: var(--r-m); overflow: hidden; cursor: zoom-in; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color var(--quick) }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity var(--slow) var(--ease) }
.frame img.on { opacity: 1 }
.frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--edge); pointer-events: none }
.frame.long img { object-fit: cover; object-position: top }
.frame .hover { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-rows: auto 1fr auto; padding: 12px; opacity: 0; transition: opacity var(--quick); background: linear-gradient(rgba(0, 0, 0, .28), transparent 28%, transparent 56%, rgba(0, 0, 0, .55)); color: #fff; pointer-events: none }
.frame .hover .acts-row { display: flex; justify-content: flex-end; gap: 4px; pointer-events: auto }
.frame .hover .who { grid-row: 3; display: grid; gap: 0; text-align: left; min-width: 0 }
.frame .hover .who span { font: 500 14px/20px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.frame .hover .who .cat { color: rgba(255, 255, 255, .8) }
@media (hover: hover) { .frame:hover .hover, .frame:focus-visible .hover { opacity: 1 } }
.frame:focus-visible { outline-color: var(--accent) }
.ibtn { width: 36px; height: 36px; border-radius: 999px; border: 0; display: grid; place-items: center; background: rgba(18, 19, 22, .55); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-decoration: none }
.ibtn:hover { background: rgba(18, 19, 22, .8) }
.ibtn svg { width: 16px; height: 16px }
.ibtn.saved svg { fill: currentColor }
.saved-dot { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(18, 19, 22, .55); color: #fff; pointer-events: none }
.saved-dot svg { width: 14px; height: 14px; fill: currentColor }
@media (hover: hover) { .frame:hover .saved-dot { display: none } }
.badge-tl { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 4px; background: rgba(18, 19, 22, .62); color: #fff; font: 500 12px/16px var(--font) }
.under { display: none; gap: 0; min-width: 0; padding-inline: 2px }
.captions .under { display: grid }
.under { padding-top: 2px }
.under .who { font: 500 14px/20px var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.empty { width: 100%; padding: 96px 0; text-align: center; color: var(--soft); display: grid; gap: 12px; justify-items: center }
.empty h3 { font: var(--t-title); margin: 0; color: var(--ink) }
.empty p { margin: 0 }

/* Selection: a workspace beside the grid. */
:root { --selection-width: 360px; --selection-top: 0px }
.ref-select { position: absolute; top: 8px; left: 8px; z-index: 3; width: 28px; height: 28px; border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 50%; background: rgba(18, 19, 22, .45); color: #fff; padding: 0; display: grid; place-items: center; font: 600 14px/1 var(--font); backdrop-filter: blur(8px) }
.ref-select[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent) }
.is-selected .frame { outline-color: var(--accent) }
.selecting .frame { cursor: pointer }
.selecting .frame .hover { display: none }
.selection-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px }
.selection-heading h3 { margin: 4px 0 0; font: var(--t-title) }
.close-selection { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--r-s); background: none; color: var(--soft) }
.close-selection:hover { background: var(--sunken); color: var(--ink) }
.selection-scope p { margin: 0 0 12px; font: var(--t-meta); color: var(--soft) }
.selection-actions { display: flex; flex-wrap: wrap; gap: 8px 16px }
.selection-actions button { border: 0; padding: 0; background: none; color: var(--accent); font: 500 13px/20px var(--font) }
.selection-actions button:hover { text-decoration: underline; text-underline-offset: 3px }
.selection-actions button:disabled { opacity: .4; cursor: default }
.selection-previews { display: flex; gap: 4px }
.selection-previews button { flex: 0 0 48px; height: 48px; min-width: 0; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: var(--sunken); color: var(--soft); font: var(--t-meta) }
.selection-previews img { display: block; width: 100%; height: 100%; object-fit: cover }
.bulk-tag-form { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 20px }
.bulk-tag-form label { font: 500 14px/20px var(--font) }
.bulk-tag-form input { width: 100%; height: 40px; padding: 0 12px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-s) }
.bulk-tag-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.undo-selection { justify-self: start; height: auto; padding: 4px 0 }
.selected-tag-list { display: grid }
.selected-tag-list > span { margin-bottom: 8px }
.selected-tag-list > button { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border: 0; border-top: 1px solid var(--line); padding: 8px 0; background: none; text-align: left; font: var(--t-ui) }
.selected-tag-list small { color: var(--soft); font: var(--t-meta) }
.selection-footer { margin-top: auto }
.selection-note { margin: 0; font: var(--t-meta); color: var(--soft) }
.selection-footer .tag-backup { margin-top: 12px }

/* Index: the ways into the library, plainly listed. */
.index-head { display: grid; gap: 8px; padding-block: 56px 32px; max-width: 760px }
.index-head h1 { margin: 0; font: var(--t-display); letter-spacing: -.01em }
.index-head p { margin: 0; color: var(--soft); font: 400 16px/24px var(--font) }
.index-sec { display: grid; gap: 20px; padding-block: 32px 40px; border-top: 1px solid var(--line) }
.index-sec h2 { display: flex; align-items: center; gap: 12px; margin: 0; font: var(--t-title) }
.index-sec h2 svg { width: 22px; height: 22px; color: var(--soft) }
.terms { display: flex; flex-wrap: wrap; gap: 8px }
.term { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: var(--t-ui) }
.term:hover { border-color: var(--line-strong) }
.term.more { border-style: dashed; color: var(--soft) }
.term span { font: var(--t-meta); color: var(--soft); font-variant-numeric: tabular-nums }
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px }
.pal { display: grid; gap: 8px; border: 0; background: none; padding: 0; text-align: left }
.pal i { height: 56px; border-radius: var(--r-s); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08) }
.pal span { display: flex; justify-content: space-between; font: var(--t-meta); color: var(--soft) }
.pal b { font-weight: 500; color: var(--ink) }

/* Groups: a white card holding a small fanned stack, a title and a count. Single references stay flat. */
.groups, .masonry.collections-layout { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 20px; align-items: start }
.masonry.collections-layout { padding-top: 4px }
.group-card { display: grid; gap: 2px; padding: 16px 16px 18px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); text-align: left; transition: border-color var(--quick), box-shadow var(--quick) }
.group-card:hover { border-color: var(--line-strong); box-shadow: 0 8px 24px rgba(22, 24, 27, .06) }
.group-card b { margin-top: 12px; font: 600 16px/24px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.group-card .meta { font: var(--t-meta); color: var(--soft) }
.stack { position: relative; display: block; height: 152px }
.stack img { position: absolute; left: 50%; top: 50%; width: 112px; height: 124px; margin: -62px 0 0 -56px; object-fit: cover; border-radius: 10px; opacity: 1; box-shadow: 0 1px 2px rgba(22, 24, 27, .12), 0 6px 18px rgba(22, 24, 27, .14), var(--edge); transition: transform var(--slow) var(--ease) }
.stack img:not(.on) { opacity: 1 }
.stack img:nth-last-child(1) { transform: rotate(-2deg); z-index: 3 }
.stack img:nth-last-child(2) { transform: translateX(14px) rotate(6deg); z-index: 2 }
.stack img:nth-last-child(3) { transform: translateX(-14px) rotate(-9deg); z-index: 1 }
.group-card:hover .stack img:nth-last-child(1) { transform: translateY(-4px) rotate(0deg) }
.group-card:hover .stack img:nth-last-child(2) { transform: translateX(34px) rotate(10deg) }
.group-card:hover .stack img:nth-last-child(3) { transform: translateX(-34px) rotate(-12deg) }

/* Viewer: the reference on a stage washed with its own colours; details on a plain panel. */
.viewer { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: minmax(0, 1fr) 420px; background: var(--stage); color: var(--stage-ink); overflow: hidden }
.stage { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; padding: 64px 72px 48px; isolation: isolate; overflow: hidden }
.stage .wash { position: absolute; inset: -80px; z-index: -1; background: var(--stage) center/cover no-repeat; filter: blur(72px) saturate(1.3) brightness(.55); transform: scale(1.1); transition: background-image var(--slow) }
.stage .pic { position: relative; width: 100%; height: 100%; display: grid; place-items: center; min-height: 0; overscroll-behavior: contain; scrollbar-width: thin }
/* Fit shows the whole image, however tall: the picture is laid over the stage and contained by both its width and its height. */
.stage.fit .pic { position: relative; display: block; overflow: hidden }
.stage.fit img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain }
.stage img { transition: filter var(--slow) }
.stage img.low { filter: blur(6px) }
.stage.long { place-items: stretch; padding-bottom: 0 }
.stage.long .pic { display: block; overflow-y: auto; padding-bottom: 48px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .28) transparent }
.stage .pic::-webkit-scrollbar { width: 8px }
.stage .pic::-webkit-scrollbar-track { background: transparent }
.stage .pic::-webkit-scrollbar-thumb { border-radius: 8px; background: rgba(255, 255, 255, .24) }
.stage .pic::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .42) }
.info { scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent }
.stage.long img { display: block; margin: 0 auto; max-height: none; height: auto; box-shadow: 0 24px 64px rgba(0, 0, 0, .4) }
.vtop { position: absolute; top: 16px; left: 16px; right: 16px; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none }
.vtop > * { pointer-events: auto }
.viewer-position { display: inline-flex; gap: 8px; max-width: calc(100% - 56px); padding: 6px 12px; border-radius: var(--r-s); background: var(--stage-glass); backdrop-filter: blur(8px); color: var(--stage-ink); font: 500 12px/16px var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.stage .vbtn { border: 0; background: var(--stage-glass); color: var(--stage-ink); backdrop-filter: blur(8px) }
.stage .vbtn:hover { background: rgba(18, 19, 22, .85) }
.stage .vbtn:disabled { opacity: .3; cursor: default }
.close-image { width: 36px; padding: 0 }
.arrow { position: absolute; top: 50%; translate: 0 -50%; width: 40px; height: 40px; padding: 0; opacity: 0; transition: opacity var(--quick) }
.arrow.prev { left: 16px }
.arrow.next { right: 16px }
.stage:hover .arrow, .stage:focus-within .arrow, .stage:hover .image-mode, .stage:focus-within .image-mode { opacity: 1 }
.image-mode { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: flex; gap: 2px; padding: 2px; border-radius: var(--r-s); background: var(--stage-glass); backdrop-filter: blur(8px); opacity: .6; transition: opacity var(--quick) }
.image-mode button { height: 28px; padding: 0 10px; border: 0; border-radius: 4px; background: none; color: var(--stage-soft); font: 500 12px/16px var(--font) }
.image-mode button[aria-pressed="true"] { background: rgba(255, 255, 255, .14); color: var(--stage-ink) }
.image-mode span { display: none }
.stage.sequence { padding-bottom: 96px }
.stage.sequence .image-mode { bottom: 88px }
.sequence-strip { position: absolute; bottom: 12px; left: 72px; right: 72px; display: flex; gap: 4px; overflow-x: auto; padding: 4px; scrollbar-width: thin }
.sequence-thumb { flex: 0 0 56px; height: 60px; position: relative; padding: 0; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 4px; overflow: hidden }
.sequence-thumb img { width: 100%; height: 100%; object-fit: contain }
.sequence-thumb span { position: absolute; bottom: 2px; right: 2px; padding: 0 4px; border-radius: 2px; background: rgba(18, 19, 22, .8); color: #fff; font: 500 10px/14px var(--font) }
.sequence-thumb[aria-current] { border: 2px solid var(--stage-ink) }
.info { min-width: 0; min-height: 0; overflow: auto; padding: 32px 28px 40px; display: grid; gap: 24px; align-content: start; background: var(--surface); color: var(--ink); overscroll-behavior: contain; scrollbar-width: thin }
.info-heading { display: grid; gap: 4px }
.info-heading h2 { margin: 0; font: var(--t-title); text-wrap: pretty }
.info .by { font: var(--t-ui); color: var(--soft) }
.text-tag { background: none; border: 0; color: inherit; padding: 0; text-align: left; font: inherit; text-decoration: none }
.text-tag:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px }
.acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.figma-actions { display: inline-flex }
.acts .vbtn.primary { background: var(--ink); color: var(--canvas); border-color: var(--ink); border-radius: var(--r-s) 0 0 var(--r-s) }
.figma-actions #vcopyfigma { background: var(--ink); color: var(--canvas); border-color: var(--ink); border-left: 1px solid color-mix(in srgb, var(--canvas) 30%, transparent); border-radius: 0 var(--r-s) var(--r-s) 0 }
.acts .icon-action { width: 36px; padding: 0 }
.acts svg { width: 16px; height: 16px }
.acts #vsave[aria-pressed="true"] svg { fill: currentColor }
.info-section, .auspicious-context { display: grid; gap: 12px }
.info-section { border-top: 1px solid var(--line); padding-top: 20px }
.auspicious-context { padding: 16px; border-radius: var(--r-m); background: var(--canvas); border: 1px solid var(--line) }
.context-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.context-heading button, .personal-heading button, .detail-preference button { border: 0; padding: 0; background: none; color: var(--accent); font: 500 12px/16px var(--font) }
.context-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 8px }
.context-row > span { font: var(--t-meta); color: var(--soft); padding-top: 6px }
.context-row .hint { display: block }
.tags { display: flex; flex-wrap: wrap; gap: 6px }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 400 13px/20px var(--font); text-decoration: none }
.tag:hover { border-color: var(--line-strong); background: var(--canvas) }
.tag em { font-style: normal; color: var(--soft) }
.tag svg { width: 14px; height: 14px; color: var(--soft) }
.board-tag { max-width: 100%; overflow-wrap: anywhere }
.purpose-tags .tag { background: var(--canvas) }
.personal-tags { display: grid; gap: 8px }
.personal-heading { display: flex; gap: 12px; align-items: center; font: 500 12px/16px var(--font); color: var(--soft) }
.personal-heading > span { margin-right: auto }
.own-tag { display: inline-flex; align-items: center; border-radius: var(--r-s); background: var(--accent-wash); max-width: 100% }
.own-tag button { border: 0; background: none; padding: 4px 8px 4px 10px; color: var(--ink); font: 400 13px/20px var(--font) }
.own-tag button + button { padding: 4px 8px 4px 0; color: var(--soft) }
#reference-tag-form { display: flex; flex-wrap: wrap; gap: 8px }
#reference-tag-form input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--canvas) }
#reference-tag-form button { height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-s); background: var(--ink); color: var(--canvas); font-weight: 500 }
#reference-tag-form > span { flex-basis: 100%; font: var(--t-meta); color: var(--soft) }
.colors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px }
.colors button { display: grid; gap: 4px; border: 0; background: none; padding: 0; text-align: left; color: var(--soft); font: var(--t-meta) }
.colors i { height: 36px; border-radius: var(--r-s); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08) }
.colors button:hover i { outline: 2px solid var(--line-strong); outline-offset: 1px }
.colors span:last-child { display: none }
.detail-preference { display: flex; justify-content: flex-end; margin-bottom: -16px }
.reference-disclosure { border-top: 1px solid var(--line); padding-top: 16px }
.reference-disclosure summary { list-style: none; display: flex; justify-content: space-between; gap: 12px; cursor: pointer; font: 500 14px/20px var(--font) }
.reference-disclosure summary::-webkit-details-marker { display: none }
.reference-disclosure summary::after { content: "+"; color: var(--soft) }
.reference-disclosure[open] summary::after { content: "−" }
.detail-content { padding-top: 12px; display: grid; gap: 12px }
.full-caption { margin: 0; color: var(--soft) }
.dl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 12px; margin: 0; font: var(--t-ui) }
.dl dt { color: var(--soft) }
.dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere }
.dl .mono { font-variant-numeric: tabular-nums }
.similar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px }
.similar button { aspect-ratio: 1; border: 0; padding: 0; border-radius: 4px; background: var(--sunken) center/cover no-repeat }
.similar button:hover { outline: 2px solid var(--line-strong); outline-offset: 1px }
.collection-info { display: grid; gap: 8px }
.collection-info .vbtn { justify-self: start }
.review-note { font: var(--t-meta); color: var(--soft) }

/* Settings: a centred window with sections on the left. */
.modal { position: fixed; inset: 0; z-index: 97; display: grid; place-items: center; padding: 24px }
.modal-in { position: relative; display: grid; grid-template-columns: 248px minmax(0, 1fr); width: min(920px, 100%); height: min(640px, calc(100dvh - 48px)); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-pop); overflow: hidden; animation: rise var(--slow) var(--ease) }
.modal-nav { display: grid; align-content: start; gap: 2px; padding: 20px 12px; background: var(--canvas); border-right: 1px solid var(--line) }
.modal-nav .label { padding: 4px 12px 10px }
.modal-nav button { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--soft); text-align: left; font: 500 15px/20px var(--font) }
.modal-nav button:hover { color: var(--ink) }
.modal-nav button[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(22, 24, 27, .08), var(--edge) }
.modal-nav svg { width: 18px; height: 18px }
.modal-body { overflow: auto; padding: 40px 40px 48px; display: grid; align-content: start; gap: 8px }
.modal-body h2 { margin: 0; font: 600 28px/36px var(--font); letter-spacing: -.01em }
.modal-body .lede { margin: 0 0 24px; max-width: 56ch; color: var(--soft) }
.modal-close { position: absolute; top: 16px; right: 16px }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 0; border-top: 1px solid var(--line) }
.set-row > div:first-child { display: grid; gap: 2px }
.set-row b { font: 500 15px/24px var(--font) }
.set-row span, .muted { font: var(--t-meta); color: var(--soft) }
.set-control { flex: none }
.set-control input[type="range"] { width: 180px; accent-color: var(--ink) }
.switch-input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 40px; height: 24px; margin: 0; border: 0; border-radius: 12px; background: var(--line-strong); cursor: pointer; transition: background var(--quick) }
.switch-input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: translate var(--quick) var(--ease) }
.switch-input:checked { background: var(--ink) }
.switch-input:checked::after { translate: 16px 0; background: var(--canvas) }
.themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.theme-card { min-width: 0; display: grid; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); text-align: left }
.theme-card:hover { border-color: var(--line-strong) }
.theme-card.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) }
.theme-preview { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 14px 12px; height: 96px; border-radius: 10px; background: #F3F3F0; box-shadow: var(--edge) }
.theme-preview i { border-radius: 6px; background: #D9D9D4 }
.theme-preview i:nth-child(2) { background: #B9B3A6 }
.theme-preview.dark { background: #121316 }
.theme-preview.dark i { background: #2C2F35 }
.theme-preview.dark i:nth-child(2) { background: #545A63 }
.theme-preview.system { background: linear-gradient(90deg, #F3F3F0 50%, #121316 50%) }
.theme-preview.system i:nth-child(3) { background: #2C2F35 }
.theme-name { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/24px var(--font) }
.theme-name svg { width: 16px; height: 16px; color: var(--soft) }
.set-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 4px 20px; padding: 16px 20px 16px 8px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--r-l) }
.set-card .stack { height: 112px }
.stack-empty { display: grid; place-items: center; justify-self: center; width: 72px; height: 80px; border: 1.5px dashed var(--line-strong); border-radius: 10px; color: var(--soft) }
.set-card .stack img { width: 72px; height: 80px; margin: -40px 0 0 -36px; border-radius: 8px }
.set-card > div:nth-child(2) { display: grid }
.set-card b { font: 600 17px/24px var(--font) }
.set-card span { font: var(--t-meta); color: var(--soft) }
.set-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px }
.set-actions .btn, .set-links .btn { border-radius: 999px }
.keys-list { display: grid; margin: 0 }
.keys-list div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line) }
.keys-list dd { display: flex; gap: 6px; margin: 0 }
.keys-list kbd { min-width: 28px; padding: 2px 8px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--canvas); font: 500 13px/20px var(--font); text-align: center }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px }
.stats div { display: grid; padding: 16px; border-radius: var(--r-m); background: var(--canvas) }
.stats b { font: 600 24px/32px var(--font); font-variant-numeric: tabular-nums }
.stats span { font: var(--t-meta); color: var(--soft) }
.set-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px }

/* Shortlist drawer */
.drawer { position: fixed; z-index: 96; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px; padding: 24px; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-pop) }
.drawer header { display: flex; justify-content: space-between; align-items: center; gap: 12px }
.drawer h3 { margin: 0; font: var(--t-title) }
.drawer .list { overflow: auto; display: grid; gap: 12px; align-content: start }
.drawer .row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center }
.drawer .row i { width: 56px; height: 56px; border-radius: var(--r-s); background: var(--sunken) center/cover no-repeat }
.drawer .row div { min-width: 0; font: var(--t-ui) }
.drawer .row small { display: block; font: var(--t-meta); color: var(--soft) }
.drawer footer { display: flex; gap: 8px; flex-wrap: wrap }
.veil { position: fixed; inset: 0; z-index: 95; background: rgba(18, 19, 22, .32) }
.toast { position: fixed; z-index: 110; right: 24px; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 14px; width: min(380px, calc(100vw - 32px)); padding: 14px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); animation: rise var(--slow) var(--ease) }
.toast:not(:has(.notice-img)) { grid-template-columns: minmax(0, 1fr) }
.notice-img { width: 56px; height: 56px; border-radius: 10px; background: var(--sunken) center/cover no-repeat; box-shadow: var(--edge) }
.notice-text { display: grid; min-width: 0 }
.notice-text b { font: 600 15px/24px var(--font) }
.notice-text span { font: var(--t-meta); color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.notice-acts { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 4px; margin-top: 6px }
.notice-acts .btn { height: 36px; border-radius: 999px; padding: 0 16px }
@keyframes rise { from { opacity: 0; translate: 0 8px } }
.loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 96px 0; color: var(--soft) }
.spinner { width: 20px; height: 20px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite }
@keyframes spin { to { rotate: 360deg } }

/* Footer */
body.is-loading .foot { display: none }
.foot { border-top: 1px solid var(--line); padding-block: 32px 48px; font: var(--t-meta); color: var(--soft) }
.foot-in { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px }
.foot b { font: var(--t-lead); color: var(--ink) }
.foot p { margin: 8px 0 0; max-width: 48ch }
.foot nav { display: grid; gap: 6px; align-content: start }
.foot .eyebrow { font: 500 12px/16px var(--font); color: var(--ink); margin-bottom: 4px }
.foot a { text-decoration: none }
.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px }

@media (max-width: 1280px) {
  .viewer { grid-template-columns: minmax(0, 1fr) 360px }
  :root { --selection-width: 320px }
}
@media (max-width: 860px) {
  :root { --bar-h: auto; --gap: 10px }
  .wrap { padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)) }
  .right { margin-left: auto }
  .modal { padding: 0; place-items: end stretch }
  .modal-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); width: 100%; height: 88dvh; border-radius: 20px 20px 0 0 }
  .modal-nav { display: flex; overflow-x: auto; padding: 12px 60px 12px 12px; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none }
  .modal-close { top: 12px; right: 12px; background: var(--canvas) }
  .modal-nav .label { display: none }
  .modal-nav button { white-space: nowrap }
  .modal-body { padding: 24px 20px 40px }
  .themes, .stats { grid-template-columns: 1fr 1fr }
  .set-card { grid-template-columns: 1fr }
  .set-actions { grid-column: 1 }
  .set-row { flex-wrap: wrap }
  .toast { right: 16px }
  .views { margin-right: 0 }
  .views button { padding: 0 10px }
  .hide-narrow { display: none !important }
  .pop, .pop.narrow { position: fixed; left: 16px !important; right: 16px; top: auto !important; bottom: 16px; width: auto; max-height: 70dvh }
  .sug, .sug.text { grid-template-columns: 20px minmax(0, 1fr) auto }
  .sug .peek { display: none }
  .frame .hover { display: none }
  .index-head { padding-block: 32px 24px }
  .index-head h1 { font: var(--t-title) }
  .spaces { grid-template-columns: minmax(0, 1fr) }
  .viewer { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(200px, 48dvh) minmax(0, 1fr) }
  .stage { padding: 56px 12px 12px }
  .arrow, .keys { display: none }
  .image-mode { opacity: .9; bottom: 12px; left: 12px }
  .info { padding: 24px max(20px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) }
  .sequence-strip { left: 12px; right: 12px; bottom: 8px }
  .stage.sequence { padding-bottom: 88px }
  .stage.sequence .image-mode { bottom: 84px }
  .selection-previews, .range-hint { display: none }
  .foot-in { grid-template-columns: 1fr 1fr }
  .foot-in > div:first-child { grid-column: 1 / -1 }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important } }
.collections-layout .empty { grid-column: 1 / -1 }

/* Hero search: the page's title space holds the search, over a slow, soft orb of colour. */
/* No stacking context and no clipping here: the docked search must rise above the bar, and the dropdown must hang below. */
.orb { position: absolute; inset: -80px 0 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: .9; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent) }
.orb i { position: absolute; border-radius: 50%; will-change: transform; animation: drift 26s ease-in-out infinite alternate }
.orb i:nth-child(1) { left: 6%; top: 30%; width: 34vw; height: 34vw; background: radial-gradient(circle, rgba(246, 170, 140, .55) 0%, transparent 62%) }
.orb i:nth-child(2) { left: 30%; top: 10%; width: 30vw; height: 30vw; background: radial-gradient(circle, rgba(190, 172, 250, .5) 0%, transparent 62%); animation-duration: 32s; animation-delay: -6s }
.orb i:nth-child(3) { left: 52%; top: 34%; width: 28vw; height: 28vw; background: radial-gradient(circle, rgba(244, 160, 200, .45) 0%, transparent 62%); animation-duration: 29s; animation-delay: -12s }
.orb i:nth-child(4) { left: 70%; top: 14%; width: 26vw; height: 26vw; background: radial-gradient(circle, rgba(150, 196, 246, .5) 0%, transparent 62%); animation-duration: 35s; animation-delay: -3s }
@keyframes drift { 0% { transform: translate(0, 0) scale(1) } 50% { transform: translate(4vw, -3vw) scale(1.12) } 100% { transform: translate(-3vw, 2vw) scale(.94) } }
:root[data-theme="dark"] .orb { opacity: .55 } :root[data-theme="dark"] .orb i { mix-blend-mode: screen }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .orb { opacity: .55 } :root:not([data-theme="light"]) .orb i { mix-blend-mode: screen } }
/* Once the hero scrolls away, the same search docks, smaller, into the bar. */
/* While suggestions are open, the box and the list are one card. */
.save-search { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 13px/20px var(--font); white-space: nowrap }
.save-search svg { width: 16px; height: 16px; color: var(--soft) }
.save-search:hover { border-color: var(--line-strong) }
.ring { display: inline-block; flex: none; width: 14px; height: 14px; border: 3px solid var(--ring, var(--ink)); border-radius: 50% }
.hero-meta .try { font: var(--t-meta); color: var(--soft); margin-right: 4px }
.try-chip, .ring-chip, .sug-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(10px); color: var(--ink); font: 500 14px/20px var(--font) }
.try-chip svg, .sug-chip svg { width: 15px; height: 15px; color: var(--soft) }
.try-chip:hover, .ring-chip:hover, .sug-chip:hover, .sug-chip[aria-selected="true"] { border-color: var(--line-strong); background: var(--surface) }
.text-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; padding: 0; background: none; color: var(--soft); font: 500 13px/20px var(--font) }
.text-btn:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px }
.text-btn svg { width: 14px; height: 14px }
.sug-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 8px 8px }
.sug-chip span { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.suggest h4 { display: flex; align-items: center; gap: 12px }

/* Recent */
.continue-card { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; gap: 24px; width: 100%; padding: 16px 24px 16px 8px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); text-align: left }
.continue-card:hover { border-color: var(--line-strong) }
.continue-text { display: grid; gap: 2px }
.continue-text b { font: 600 20px/28px var(--font) }
.continue-text span { font: var(--t-meta); color: var(--soft) }
.saved-card { padding: 0; overflow: hidden }
.saved-open { display: grid; gap: 2px; padding: 16px 16px 8px; border: 0; background: none; text-align: left }
.saved-open b { display: flex; align-items: center; gap: 8px; margin-top: 12px; font: 600 16px/24px var(--font) }
.saved-open .meta { font: var(--t-meta); color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.saved-acts { display: flex; justify-content: space-between; padding: 8px 16px 14px; border-top: 1px solid var(--line) }
.empty-card { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-l); color: var(--soft) }
.empty-card p { margin: 0; max-width: 60ch }
.empty-card b { color: var(--ink) }
.index-sec h2 .text-btn { margin-left: auto }
.history { display: grid; gap: 8px }
.history-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 4px 16px 4px 0; border: 1px solid transparent; border-radius: var(--r-m); background: none; text-align: left }
.history-row:hover { border-color: var(--line); background: var(--surface) }
.history-row .stack { height: 72px }
.history-row .stack img { width: 44px; height: 52px; margin: -26px 0 0 -22px; border-radius: 6px }
.history-row > span:nth-child(2) { display: grid; min-width: 0 }
.history-row b { font: 500 15px/24px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.history-row span span, .history-row .when { font: var(--t-meta); color: var(--soft) }
.continue-card .stack { height: 120px }
.continue-card .stack img { width: 84px; height: 96px; margin: -48px 0 0 -42px }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: 140px; gap: 12px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin }
.strip-tile { height: 168px; padding: 0; border: 0; border-radius: var(--r-m); overflow: hidden; box-shadow: var(--edge) }
.strip-tile img { width: 100%; height: 100%; object-fit: cover }
.strip-tile:hover { outline: 2px solid var(--line-strong); outline-offset: 2px }

/* Small dialog: save a search, with a ring of colours. */
.modal.small .dialog-in { width: min(460px, 100%); display: grid; gap: 12px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-pop); animation: rise var(--slow) var(--ease) }
.dialog-in h2 { margin: 0; font: 600 22px/28px var(--font) }
.dialog-in .lede { margin: 0; color: var(--soft) }
.field { display: grid; gap: 6px }
.field span { font: 500 13px/20px var(--font); color: var(--soft) }
.field input, .field textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--canvas); font: var(--t-ui); resize: vertical }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash) }
.colour-ring { position: relative; justify-self: center; width: 216px; height: 216px; margin: 8px 0 }
.colour-ring button { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; padding: 0; border: 3.5px solid var(--ring); border-radius: 50%; background: none; transform: rotate(var(--a)) translate(88px) rotate(calc(-1 * var(--a))); transition: transform var(--quick) var(--ease) }
.colour-ring button:hover { transform: rotate(var(--a)) translate(88px) rotate(calc(-1 * var(--a))) scale(1.15) }
.colour-ring button[aria-checked="true"] { background: var(--ring); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ring) }
.ring-preview { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none }
.ring-preview .ring { width: 56px; height: 56px; border-width: 7px }
.dialog-acts { display: flex; align-items: center; gap: 8px; margin-top: 8px }
.dialog-acts .btn { border-radius: 999px }
.btn.danger { color: var(--danger) }

/* Notes and to-dos in the drawer */
.drawer h3 { display: flex; align-items: center; gap: 10px }
.notes { gap: 16px }
.notes > .btn { justify-self: start; border-radius: 999px }
.todos { display: grid; gap: 4px }
.todo { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 4px 0 8px; border-radius: var(--r-s) }
.todo:hover { background: var(--canvas) }
.todo input { width: 18px; height: 18px; accent-color: var(--ink) }
.todo span { flex: 1 }
.todo.done span { color: var(--soft); text-decoration: line-through }
.todo .icon-btn { width: 32px; height: 32px; opacity: 0 }
.todo:hover .icon-btn, .todo .icon-btn:focus-visible { opacity: 1 }
.todo-add { display: flex; gap: 8px; margin-top: 4px }
.todo-add input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--canvas) }
.todo-add .btn { border-radius: 999px }

/* Viewer additions */
.vtop-left { display: flex; align-items: center; gap: 8px; min-width: 0 }
.vtop .image-mode { position: static; opacity: 1 }
.stage.long { padding: 0 }
.stage.long .pic { position: absolute; inset: 0; padding: 72px 72px 84px; -webkit-mask-image: linear-gradient(transparent, #000 64px, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(transparent, #000 64px, #000 calc(100% - 72px), transparent); overscroll-behavior: contain }
.summary { position: relative; display: grid; gap: 8px; padding: 16px 18px; border-radius: var(--r-m); background: var(--surface) }
.summary::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; background: linear-gradient(120deg, #F08A3E, #E85A9B 35%, #7A5AE0 65%, #3D8FE0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none }
.summary .label { display: inline-flex; align-items: center; gap: 6px }
.summary .label svg { width: 14px; height: 14px }
.summary p { margin: 0; font: 400 15px/24px var(--font); color: var(--ink) }
.section-head { display: flex; justify-content: space-between; align-items: center }
.add-tag { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--ink); color: var(--canvas); font: 500 13px/20px var(--font) }
.add-tag svg { width: 14px; height: 14px }
.tag-wrap { position: relative; display: inline-flex }
.tag-wrap .tag { background: var(--canvas); border-color: transparent }
.tag-wrap.kind .tag { background: var(--surface); border-color: var(--line-strong); font-weight: 500 }
.tag-wrap.kind .tag svg { color: var(--ink) }
.tag-wrap.is-hidden .tag { opacity: .45; text-decoration: line-through }
.tag-x { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--soft); opacity: 0; transition: opacity var(--quick) }
.tag-x svg { width: 11px; height: 11px }
.tag-wrap:hover .tag-x, .tag-x:focus-visible { opacity: 1 }
.tag-x:hover { color: var(--danger); border-color: var(--danger) }
.info-section.soon .eyebrow { display: inline-flex; align-items: center; gap: 6px }
.info-section.soon .eyebrow svg { width: 14px; height: 14px }
.soon-badge { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--accent-wash); color: var(--accent); font: 600 11px/18px var(--font); font-style: normal; letter-spacing: .02em; vertical-align: 1px }

/* Rediscover: one card at a time, on a wash of its own colours. */
.rediscover { position: fixed; inset: 0; z-index: 105; display: grid; place-items: center; overflow: hidden; background: var(--stage); color: var(--stage-ink); touch-action: none }
.rd-wash { position: absolute; inset: -80px; background: center/cover no-repeat; filter: blur(80px) saturate(1.3) brightness(.5); transform: scale(1.1); transition: background-image var(--slow) }
.rd-top { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; z-index: 3 }
.rd-stack { position: relative; width: min(420px, 78vw); height: min(520px, 62vh); z-index: 2 }
.rd-card { position: absolute; inset: 0; display: grid; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .08); transition: transform var(--slow) var(--ease); cursor: grab; user-select: none }
.rd-card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none }
.rd-card[data-depth="1"] { transform: translateY(14px) scale(.95) rotate(3deg) }
.rd-card[data-depth="2"] { transform: translateY(26px) scale(.9) rotate(-4deg) }
.rd-card[data-depth="0"]:active { cursor: grabbing }
.rd-cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; padding: 40px 18px 16px; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); color: #fff }
.rd-cap b { font: 600 16px/24px var(--font) }
.rd-cap span { font: var(--t-meta); opacity: .8 }
.rd-card:not([data-depth="0"]) .rd-cap { display: none }
.rd-target { position: absolute; z-index: 1; display: grid; justify-items: center; gap: 8px; font: 500 13px/20px var(--font); color: var(--stage-soft); transition: color var(--quick), transform var(--quick) }
.rd-target span { display: grid; place-items: center; width: 64px; height: 64px; border: 1.5px dashed rgba(255, 255, 255, .3); border-radius: 18px }
.rd-target.left { left: 6vw; top: 50%; translate: 0 -50% } .rd-target.right { right: 6vw; top: 50%; translate: 0 -50% } .rd-target.up { top: 10vh; left: 50%; translate: -50% 0 }
.rediscover[data-lean="left"] .rd-target.left, .rediscover[data-lean="right"] .rd-target.right, .rediscover[data-lean="up"] .rd-target.up { color: var(--stage-ink); transform: scale(1.08) }
.rediscover[data-lean="left"] .rd-target.left span, .rediscover[data-lean="right"] .rd-target.right span, .rediscover[data-lean="up"] .rd-target.up span { border-style: solid; border-color: var(--stage-ink); background: rgba(255, 255, 255, .1) }
.rd-buttons { position: absolute; bottom: 72px; z-index: 3; display: flex; gap: 12px }
.glass { height: 48px; padding: 0 22px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .12); backdrop-filter: blur(14px); color: #fff; font: 500 15px/24px var(--font) }
.glass:hover { background: rgba(255, 255, 255, .22) }
.rd-hint { position: absolute; bottom: 24px; z-index: 3; margin: 0; font: var(--t-meta); color: var(--stage-soft) }
.rd-hint kbd { padding: 1px 7px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 6px; font: 500 12px/18px var(--font) }
.rd-done { position: relative; z-index: 2; display: grid; justify-items: center; gap: 12px; max-width: 440px; text-align: center }
.rd-done h2 { margin: 0; font: 600 36px/44px var(--font) }
.rd-done p { margin: 0; color: var(--stage-soft) }

/* Selection, polished */
.selection-heading p { margin: 2px 0 0; font: var(--t-meta); color: var(--soft) }
.selection-previews { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 12px; padding: 4px 0 }
.selection-previews .stack { height: 104px }
.selection-previews .stack img { width: 64px; height: 76px; margin: -38px 0 0 -32px; border-radius: 8px }
.selection-previews .selection-actions { display: grid; gap: 6px }
.selection-actions .btn { justify-content: flex-start; border-radius: 999px; color: var(--ink); font: 500 13px/20px var(--font) }
.bulk-tag-form label { display: inline-flex; align-items: center; gap: 8px }
.bulk-tag-form label svg { width: 16px; height: 16px; color: var(--soft) }
.bulk-tag-form input { border-radius: 999px; padding: 0 16px }
.bulk-tag-actions .btn { border-radius: 999px }
.selection-empty { display: grid; justify-items: start; gap: 16px; padding: 8px 0 }
.selection-empty ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--soft) }
.selection-empty li { display: flex; gap: 10px }
.selection-empty li::before { content: ""; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--line-strong); flex: none }
.selection-empty .btn { border-radius: 999px }

@media (max-width: 860px) {
  .continue-card { grid-template-columns: 1fr; padding: 16px }
  .vibe-btn span, .vibe { bottom: 12px; left: 12px }
  .rd-target.left, .rd-target.right { display: none }
  .stage.long .pic { padding: 56px 12px 72px }
}
@media (prefers-reduced-motion: reduce) { .orb i { animation: none } }

/* Dark mode: glass with a faint top light, so the top area has depth instead of flat grey boxes. */
:root[data-theme="dark"] .try-chip, :root[data-theme="dark"] .ring-chip { background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border-color: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 12px 32px rgba(0, 0, 0, .35) }
:root[data-theme="dark"] .pill-main, :root[data-theme="dark"] .tool:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border-color: rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .try-chip, :root:not([data-theme="light"]) .ring-chip { background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border-color: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 12px 32px rgba(0, 0, 0, .35) }
  :root:not([data-theme="light"]) .pill-main { background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border-color: rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) } }
:root[data-theme="dark"] .orb i:nth-child(1) { background: radial-gradient(circle, rgba(255, 112, 80, .55), transparent 62%) }
:root[data-theme="dark"] .orb i:nth-child(2) { background: radial-gradient(circle, rgba(130, 90, 250, .55), transparent 62%) }
:root[data-theme="dark"] .orb i:nth-child(3) { background: radial-gradient(circle, rgba(236, 72, 153, .45), transparent 62%) }
:root[data-theme="dark"] .orb i:nth-child(4) { background: radial-gradient(circle, rgba(59, 130, 246, .5), transparent 62%) }

/* Keycaps */
kbd, .kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: linear-gradient(180deg, var(--surface), var(--sunken)); color: var(--soft); font: 500 12px/1 var(--font); font-variant-numeric: tabular-nums }
.rd-hint kbd { margin: 0 2px; border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: var(--stage-ink) }

/* Image size: five steps drawn as columns */
.density { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--sunken) }
.density button { display: grid; place-items: center; width: 40px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--soft); transition: background var(--quick), color var(--quick) }
.density button:hover { color: var(--ink) }
.density button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 21, 24, .12) }
.cols-icon { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 1.5px; width: 20px; height: 14px }
.cols-icon i { border-radius: 1.5px; background: currentColor; opacity: .85 }

/* Tabs: the underline slides */

/* Micro-interactions: answer a press, appear from where they come from */
.pop:not([hidden]) { animation: drop var(--quick) var(--ease); transform-origin: top left }
@keyframes drop { from { opacity: 0; transform: translateY(-4px) scale(.985) } }
.frame img { transform: scale(1.02); transition: opacity 320ms var(--ease), transform 600ms var(--ease) }
.frame img.on { transform: none }
.group-card { transition: border-color var(--quick), box-shadow var(--quick), transform var(--slow) var(--ease) }
.group-card:hover { transform: translateY(-2px) }
.try-set .try-chip { animation: chip-in 360ms var(--ease) both; animation-delay: var(--d) }
@keyframes chip-in { from { opacity: 0; transform: translateY(6px) } }
.ibtn.saved svg, #vsave[aria-pressed="true"] svg { animation: pop 320ms var(--ease) }
@keyframes pop { 40% { transform: scale(1.3) } }
.history-item.leaving { opacity: 0; transform: translateX(-12px); transition: opacity 180ms, transform 180ms }

/* Loading screen */
.splash { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden; background: var(--canvas); transition: opacity 400ms var(--ease), visibility 400ms }
.splash.gone { opacity: 0; visibility: hidden }
.splash-orb { position: absolute; inset: 0; opacity: .9 }
.splash-orb i { position: absolute; left: 50%; top: 50%; width: 46vmax; height: 46vmax; margin: -23vmax; border-radius: 50%; background: radial-gradient(circle, rgba(246, 170, 140, .5), transparent 62%); animation: drift 6s ease-in-out infinite alternate }
.splash-orb i:nth-child(2) { background: radial-gradient(circle, rgba(190, 172, 250, .5), transparent 62%); animation-delay: -2s; translate: 12vmax -6vmax }
.splash-orb i:nth-child(3) { background: radial-gradient(circle, rgba(150, 196, 246, .5), transparent 62%); animation-delay: -4s; translate: -12vmax 6vmax }
.splash-in { position: relative; display: grid; justify-items: center; gap: 14px; animation: rise 500ms var(--ease) both }
.splash-in b { font: 600 20px/28px var(--font); letter-spacing: -.01em }
.app-icon.big { width: 56px; height: 56px; border-radius: 16px }
.app-icon.big svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2 }
.splash-bar { position: relative; width: 120px; height: 3px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--ink) 10%, transparent) }
.splash-bar i { position: absolute; inset: 0; width: 40%; border-radius: inherit; background: var(--ink); animation: slide 1.1s var(--ease) infinite }
@keyframes slide { from { transform: translateX(-100%) } to { transform: translateX(260%) } }
.splash-note { font: var(--t-meta); color: var(--soft) }
.splash.failed .splash-bar { display: none }

/* Recent: remove one at a time */
.history-item { display: flex; align-items: center; gap: 4px; transition: opacity 180ms, transform 180ms }
.history-item .history-row { flex: 1; min-width: 0 }
.history-item > .icon-btn { opacity: 0 }
.history-item:hover > .icon-btn, .history-item > .icon-btn:focus-visible { opacity: 1 }
.sug-chip-wrap { position: relative; display: inline-flex }
.chip-x { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--soft); opacity: 0; transition: opacity var(--quick) }
.chip-x svg { width: 11px; height: 11px }
.sug-chip-wrap:hover .chip-x, .chip-x:focus-visible { opacity: 1 }

/* Save a search: what it holds, a name, a colour */
.save-preview { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px; padding: 4px 12px 4px 0; margin-bottom: 4px; border-radius: var(--r-m); background: var(--canvas) }
.save-preview .stack { height: 96px }
.save-preview .stack img { width: 56px; height: 64px; margin: -32px 0 0 -28px; border-radius: 8px }
.save-parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px }
.part { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: var(--surface); box-shadow: var(--edge); font: 500 13px/24px var(--font) }
.part svg { width: 13px; height: 13px; color: var(--soft) }
.swatch-row { display: flex; flex-wrap: wrap; gap: 8px }
.swatch-row button { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--ring); transition: transform 120ms var(--ease), box-shadow var(--quick) }
.swatch-row button:hover { transform: scale(1.12) }
.swatch-row button[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ring) }

/* Viewer header: source and board on one line; colours that search */
.info .by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 4px }
.info .by .text-tag { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; color: var(--soft) }
.info .by svg { width: 14px; height: 14px }
.board-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tag { max-width: 100%; white-space: nowrap }
.colors { gap: 8px }
.colour { display: grid; gap: 6px }
.colour .swatch { height: 40px; padding: 0; border: 0; border-radius: 10px; box-shadow: var(--edge); transition: transform 120ms var(--ease) }
.colour .swatch:hover { transform: translateY(-2px) }
.colour .hex { border: 0; padding: 0; background: none; color: var(--soft); font: var(--t-meta); text-align: left }
.colour .hex:hover { color: var(--ink) }
.acts { flex-wrap: wrap }

/* Cheaper colour wash: a small blurred copy scaled up looks the same and costs far less */
.stage .wash { inset: 0; width: 25%; height: 25%; transform: scale(4.2); transform-origin: 0 0; filter: blur(14px) saturate(1.3) brightness(.55) }
.rd-wash { inset: 0; width: 25%; height: 25%; transform: scale(4.2); transform-origin: 0 0; filter: blur(16px) saturate(1.3) brightness(.5) }
.try-chip, .ring-chip, .sug-chip { backdrop-filter: none }
.theme-preview { background: #F5F5F6 } .theme-preview i { background: #DCDCE0 } .theme-preview i:nth-child(2) { background: #B9BAC2 }
.theme-preview.system { background: linear-gradient(90deg, #F5F5F6 50%, #0E0F11 50%) }
.try-set { display: inline-flex; flex-wrap: nowrap; gap: 8px }

/* Views: a segmented control in the middle of the bar; the highlight slides. */

/* The filter row keeps the count, View and Select beside the filters, and stays under the bar while you scroll. */
/* The pills stay on one line: long values are shortened, and if the row still overflows it scrolls sideways under a soft edge. */
.masonry { padding-top: 12px }

/* The search grows a little when you step into it. */
.sug-line-wrap { position: relative }
.sug.sug-line { grid-template-columns: 20px minmax(0, 1fr) auto; padding-right: 40px }
.sug-line .ring { width: 12px; height: 12px; border-width: 2.5px }
.line-x { position: absolute; right: 8px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--soft); opacity: 0; transition: opacity var(--quick) }
.line-x svg { width: 14px; height: 14px }
.sug-line-wrap:hover .line-x, .line-x:focus-visible { opacity: 1 }
.line-x:hover { background: var(--sunken); color: var(--ink) }

/* The image's colours, overlapped, bottom right of the stage; they fan out on hover. */
.vibe { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: flex; padding: 4px; border-radius: 12px; background: var(--stage-glass) }
.vibe button { width: 28px; height: 34px; margin-left: -12px; padding: 0; border: 2px solid rgba(255, 255, 255, .85); border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: margin var(--quick) var(--ease), transform var(--quick) var(--ease) }
.vibe button:first-child { margin-left: 0 }
.vibe:hover button { margin-left: 4px }
.vibe:hover button:first-child { margin-left: 0 }
.vibe button:hover { transform: translateY(-3px) }
.stage.sequence .vibe { bottom: 92px }

/* Tiles: a faint outline on hover; a clear one, and a check, when selected. */
@media (hover: hover) { .item:hover .frame { outline-color: color-mix(in srgb, var(--ink) 16%, transparent) } .selecting .item:hover .frame { outline-color: color-mix(in srgb, var(--accent) 45%, transparent) } }
.item.is-selected .frame, .item.is-selected:hover .frame { outline: 2px solid var(--accent); outline-offset: 2px }
.selecting .badge-tl { left: 44px }

/* Selection: a panel beside the grid, hanging under the filter row. The grid makes room for it. */
.selection-panel { position: fixed; z-index: 65; top: calc(var(--selection-top) + 8px); right: 16px; bottom: 16px; width: var(--selection-width); display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-pop); animation: rise var(--slow) var(--ease) }
.selection-heading h3 { font-variant-numeric: tabular-nums }
.selection-heading .note { margin: 2px 0 0 }
.sel-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.sel-thumbs { display: inline-flex; padding-left: 10px }
.sel-thumb { display: grid; place-items: center; width: 40px; height: 40px; margin-left: -10px; border: 2px solid var(--surface); border-radius: 10px; background: var(--sunken) center/cover no-repeat; box-shadow: 0 1px 2px rgba(22, 24, 27, .12) }
.sel-thumb.sel-more { background: var(--sunken); color: var(--soft); font: 600 12px/16px var(--font) }
.sel-body { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 20px; padding-top: 16px; border-top: 1px solid var(--line) }
.sel-section { display: grid; gap: 8px }
.sel-section .tag { cursor: default }
.own-tag.partial { background: var(--sunken) }
.own-tag em { font-style: normal; color: var(--soft); margin-left: 6px; font-variant-numeric: tabular-nums }
.own-tag button svg { width: 12px; height: 12px }
.own-tag button + button:hover { color: var(--ink) }
.sel-tag { display: grid; gap: 8px }
.sel-tag input { width: 100%; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--canvas); font: var(--t-ui) }
.sel-tag input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash) }
.sel-tag-acts { display: flex; gap: 8px }
.sel-tag-acts .btn { height: 40px; border-radius: 999px; padding: 0 18px }
.sel-tag-acts .btn.dark { flex: 1 }
.sel-foot { padding-top: 12px; border-top: 1px solid var(--line) }
@media (min-width: 861px) { .selecting-references #v-library { padding-right: calc(var(--selection-width) + 32px) } }

@media (max-width: 860px) {
  .selection-panel { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 60vh; gap: 12px; padding: 16px; border-radius: var(--r-l) }
  .sel-foot { display: none }
  .selecting-references #v-library { padding-bottom: 50vh }
}
.try-chip, .ring-chip { white-space: nowrap; flex: none }

/* The bench: one card at the top of the page. Row one is the search with the views and the count; row two is every filter as a slot showing
   what is chosen. Suggestions open where row two is and soften it; More opens from the left edge. On scroll the card folds to one slim row
   and the chosen filters ride inside the field as tokens. */
:root { --glass: rgba(255, 255, 255, .8) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glass: rgba(23, 24, 27, .78) } }
:root[data-theme="dark"] { --glass: rgba(23, 24, 27, .78) }
.orb { top: 0; height: 520px; bottom: auto }
.bench { position: sticky; top: 0; z-index: 40; padding-block: calc(env(safe-area-inset-top, 0px) + 14px) 8px; transition: padding var(--slow) var(--ease), background var(--quick) }
body.docked .bench { padding-block: calc(env(safe-area-inset-top, 0px) + 10px) 8px; background: color-mix(in srgb, var(--canvas) 84%, transparent); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1) }
.bench-card { position: relative; border: 1px solid color-mix(in srgb, var(--line) 85%, transparent); border-radius: 22px; background: var(--glass); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 1px 2px rgba(20, 21, 24, .04), 0 12px 36px rgba(20, 21, 24, .08); transition: border-radius var(--slow) var(--ease), background var(--quick) }
body.docked .bench-card { border-radius: 16px; background: var(--surface) }
.row1 { display: flex; align-items: center; gap: 16px; height: 76px; padding: 0 14px 0 18px; transition: height var(--slow) var(--ease), padding var(--slow) var(--ease) }
body.docked .row1 { height: 58px; padding-left: 12px }
.brand { display: inline-flex; align-items: center; border: 0; background: none; padding: 0; flex: none; border-radius: 10px }
.app-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--ink); color: var(--canvas); box-shadow: 0 1px 2px rgba(22, 24, 27, .18), inset 0 1px 0 rgba(255, 255, 255, .12) }
.app-icon svg { width: 18px; height: 18px; stroke-width: 2 }
.field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 100%; cursor: text }
.field .tokens { display: none }
body.docked .field .tokens { display: inline-flex; flex-wrap: nowrap; overflow: hidden; max-width: 50%; flex: none; gap: 6px; align-items: center; animation: rise var(--quick) var(--ease) }
.field input { flex: 1; min-width: 80px; height: 48px; border: 0; background: none; outline: none; font: 400 23px/32px var(--font); letter-spacing: -.01em; color: var(--ink); transition: font-size var(--slow) var(--ease) }
.field input::placeholder { color: color-mix(in srgb, var(--soft) 80%, transparent) }
.field input::-webkit-search-cancel-button, .field input::-webkit-search-decoration { -webkit-appearance: none; display: none }
.field input[type="search"] { -webkit-appearance: none; appearance: none }
body.docked .field input { font: 400 16px/24px var(--font); letter-spacing: 0; height: 40px }
.field .count { flex: none; padding: 0 6px; font: var(--t-meta); color: var(--soft); font-variant-numeric: tabular-nums; white-space: nowrap }
.field .count b { color: var(--ink); font-weight: 600; font-size: 14px }
.search-clear { width: 32px; height: 32px }
.token { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px 0 10px; border-radius: 999px; background: var(--ink); color: var(--canvas); font: 500 13px/20px var(--font); white-space: nowrap; cursor: pointer; flex: none }
.token > span { max-width: 160px; overflow: hidden; text-overflow: ellipsis }
.token svg { width: 13px; height: 13px; opacity: .75 }
.token .dot { width: 12px; height: 12px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2) }
.token .like-thumb { width: 18px; height: 18px; border-radius: 5px; background-size: cover; flex: none }
.token .x { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; opacity: .7 }
.token .x:hover { opacity: 1; background: rgba(255, 255, 255, .15) }
.token .x svg { width: 12px; height: 12px; opacity: 1 }
/* Views: a segmented control; the highlight slides. */
.bench .views { position: relative; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--sunken); flex: none }
.bench .views button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--soft); font: 500 14px/20px var(--font); white-space: nowrap; transition: color var(--quick) }
.bench .views button:hover, .bench .views button[aria-current="page"] { color: var(--ink) }
.bench .views .n { font: 400 12px/16px var(--font); color: var(--soft); font-variant-numeric: tabular-nums }
.tab-ink { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 2px rgba(20, 21, 24, .1), var(--edge); transition: transform var(--slow) var(--ease), width var(--slow) var(--ease) }
.right { display: flex; align-items: center; gap: 2px; flex: none }
body.docked #t-rediscover, body.docked #t-settings { display: none }
/* Row two: the slots. It shrinks away when the bench folds, and softens while the suggestions are open (hover brings it back; a slot still opens on click). */
.row2 { display: flex; align-items: stretch; gap: 12px; height: 62px; overflow: hidden; border-top: 1px solid color-mix(in srgb, var(--line) 85%, transparent); padding: 0 10px 0 6px; transition: height var(--slow) var(--ease), opacity var(--slow) var(--ease), filter var(--slow) var(--ease), border-color var(--slow) }
body.docked .row2 { height: 0; opacity: 0; border-top-color: transparent; pointer-events: none }
.bench.searching .row2 { filter: blur(4px); opacity: .45 }
.bench.searching .row2:hover { filter: none; opacity: 1 }
.slots { display: flex; align-items: stretch; gap: 12px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 0 3px; margin: 0 -3px }
.slots::-webkit-scrollbar { display: none }
.slots.overflow { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); padding-right: 48px }
.slot { position: relative; display: grid; align-content: center; gap: 1px; min-width: 128px; padding: 6px 16px; margin: 6px 0; border: 0; border-radius: 14px; background: none; text-align: left; color: var(--ink); flex: none; transition: background var(--quick) }
.slot + .slot::before { content: ""; position: absolute; left: -6px; top: 14px; bottom: 14px; width: 1px; background: var(--line) }
.slot:hover { background: color-mix(in srgb, var(--sunken) 70%, transparent) }
.slot[aria-expanded="true"] { background: var(--surface); box-shadow: var(--edge) }
.slot small { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/16px var(--font); color: var(--soft); letter-spacing: .02em; text-transform: uppercase }
.slot small svg { width: 12px; height: 12px }
.slot small .n { min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; background: var(--ink); color: var(--canvas); font: 600 10px/16px var(--font); text-align: center; letter-spacing: 0; font-style: normal }
.slot b { display: block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 15px/22px var(--font); color: var(--soft) }
.slot.on b { color: var(--ink); font-weight: 500 }
.slot.on small { color: var(--ink) }
.slot b .dot { display: inline-block; width: 10px; height: 10px; vertical-align: -1px; margin-right: 6px }
.slot.like { display: inline-flex; align-items: stretch; padding: 0; margin: 6px 0; gap: 0 }
.slot.like > button { display: grid; align-content: center; gap: 1px; padding: 6px 8px 6px 16px; border: 0; background: none; text-align: left; color: var(--ink); border-radius: 14px 0 0 14px }
.slot.like > button:hover { background: color-mix(in srgb, var(--sunken) 70%, transparent) }
.slot.like b { display: flex; align-items: center; gap: 8px }
.like-thumb { width: 20px; height: 20px; border-radius: 6px; background-size: cover; flex: none }
.slot-x { display: grid; place-items: center; width: 32px; border: 0; background: none; color: var(--soft); border-radius: 0 14px 14px 0 }
.slot-x:hover { color: var(--ink); background: color-mix(in srgb, var(--sunken) 70%, transparent) }
.slot-x svg { width: 14px; height: 14px }
.row2-right { display: flex; align-items: center; gap: 10px; flex: none; padding-left: 12px; border-left: 1px solid var(--line); margin: 12px 0 }
.tools { display: flex; align-items: center; gap: 2px }
.tool { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--soft); font: 500 14px/20px var(--font); white-space: nowrap }
.tool svg { width: 16px; height: 16px }
.tool:hover, .tool[aria-expanded="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--edge) }
.tool[aria-pressed="true"] { background: var(--accent-wash); color: var(--ink) }
.clear-all { height: 36px; padding: 0 10px; border: 0; background: none; color: var(--soft); font: 500 13px/20px var(--font); white-space: nowrap }
.clear-all:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px }
.tool:active, .btn:active, .try-chip:active, .ring-chip:active, .density button:active, .icon-btn:active, .slot:active { transform: scale(.97) }
.tool, .btn, .try-chip, .ring-chip, .icon-btn { transition: transform 120ms var(--ease), border-color var(--quick), background var(--quick), color var(--quick) }
/* Suggestions hang at the top edge of the filter row, under the field, half the bench wide. Once folded they hang under the card. */
.suggest { position: absolute; z-index: 70; width: clamp(380px, 50%, 680px); max-height: min(66vh, 640px); overflow: auto; overscroll-behavior: contain; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-m) var(--r-m) var(--r-l) var(--r-l); background: var(--surface); box-shadow: var(--shadow-pop); animation: drop var(--quick) var(--ease); transform-origin: top }
/* Saved searches as rings, or a few real words to try, under the bench; they scroll away. */
.under-bench { position: relative; z-index: 1; padding: 8px 0 4px }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 36px }
.hero-meta .try { font: var(--t-meta); color: var(--soft); margin-right: 4px }
/* Lists: a slot's pane is half the bench wide; More is wider, from the left edge, at a fixed height so switching kinds never moves it. */
.pop { width: clamp(380px, 50vw, 680px); max-height: min(66vh, 640px) }
.pop.narrow { width: min(300px, calc(100vw - 32px)) }
.pop.view { width: min(380px, calc(100vw - 32px)) }
.pop.more { width: clamp(560px, 62vw, 860px); height: min(74vh, 760px); max-height: none }
.more-grid { grid-template-columns: 240px minmax(0, 1fr) }
.more-kinds { gap: 4px; padding: 12px 10px }
.more-kinds h5 { margin: 4px 10px 8px; font: 500 12px/16px var(--font); color: var(--soft); letter-spacing: .02em; text-transform: uppercase }
.more-kinds button { gap: 12px; padding: 8px 10px; border-radius: var(--r-m); color: var(--ink) }
.more-kinds button i.tile { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--sunken); color: var(--soft); flex: none; font-style: normal }
.more-kinds button i.tile svg { width: 16px; height: 16px }
.more-kinds button span b { display: block; font: 500 14px/20px var(--font); white-space: nowrap }
.more-kinds button span small { display: block; font: 400 12px/16px var(--font); color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.more-kinds button:hover { background: color-mix(in srgb, var(--sunken) 60%, transparent) }
.more-kinds button[aria-current="true"] i.tile { background: var(--ink); color: var(--canvas) }
main { position: relative; z-index: 1 }
#v-library .masonry { padding-top: 12px }
@media (max-width: 860px) {
  .bench { padding-block: calc(env(safe-area-inset-top, 0px) + 8px) 4px }
  .row1 { flex-wrap: wrap; height: auto; padding: 8px 8px 8px 12px; gap: 8px 10px }
  .brand { display: none }
  .field { flex: 1; order: 0; height: 52px }
  .right { order: 1 }
  #t-rediscover { display: none }
  .field input { font: 400 19px/28px var(--font) }
  .field .count { display: none }
  .bench .views { order: 2; flex-basis: 100%; justify-content: space-between }
  .pop, .pop.more { left: 16px !important; right: 16px; top: auto !important; bottom: 16px; width: auto; height: auto; max-height: 70dvh }
  .bench .views button { flex: 1; justify-content: center; padding: 0 6px }
  .bench .views .n { display: none }
  body.docked .row1 { height: auto; padding: 4px 8px }
  body.docked .bench .views, body.docked .right { display: none }
  body.docked .field { height: 46px; flex-basis: auto; flex: 1 }
  body.docked .field .tokens { max-width: 60% }
  .row2 { flex-direction: column; align-items: stretch; height: auto; gap: 0; padding: 0 8px }
  body.docked .row2 { height: 0 }
  .slots { gap: 8px }
  .slot { min-width: 108px; padding: 4px 12px; margin: 4px 0 }
  .row2-right { margin: 0 0 6px; padding: 6px 0 0; border-left: 0; border-top: 1px solid var(--line); justify-content: space-between }
  .save-search span { display: none }
  .suggest { left: -1px !important; right: -1px; width: auto; max-height: 70vh; border-radius: var(--r-l) }
  .hero-meta { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none }
}
@media (max-width: 1100px) { .bench .views .n { display: none } }