@font-face {
  font-family: 'NB International';
  src: url('/fonts/ui/noto-ui.woff2') format('woff2');
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Noto Sans SC';
  src: url('/fonts/ui/noto-ui.woff2') format('woff2');
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Zhuque Fangsong';
  src: url('/fonts/ui/zhuque-ui.woff2') format('woff2');
  font-style: normal; font-weight: 400; font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #fafafa;
  --ink: #000;
  --text: #272727;
  --secondary: #555;
  --muted: #666;
  --line: #dedede;
  --control-surface: rgb(250 250 250 / .9);
  --font-ui: 'NB International', 'Noto Sans SC', sans-serif;
  --font-art: 'NB International', 'Zhuque Fangsong', 'Noto Sans SC', serif;
  --font-brand: 'Zhuque Fangsong', 'Noto Sans SC', serif;
  --gutter: clamp(16px, 1.875vw, 24px);
  --edge-top: max(12px, env(safe-area-inset-top, 0px));
  --edge-right: max(12px, env(safe-area-inset-right, 0px));
  --edge-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  --edge-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  color: var(--ink); background: var(--paper);
  font-family: var(--font-ui); font-size: 16px; font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; overflow: hidden; font-size: 14px; line-height: 22px; letter-spacing: .01em; font-weight: 400; }
a, button, input, select, textarea { color: inherit; font: inherit; letter-spacing: inherit; }
a { text-decoration: none; }
button { appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer; touch-action: manipulation; }
a, button { -webkit-tap-highlight-color: transparent; }
h1, h2, p, figure { margin: 0; font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; top: -100px; left: var(--edge-left); z-index: 30; padding: 12px; background: var(--paper); }
.skip:focus { top: var(--edge-top); }

/* An independent wordmark and quiet navigation, with the exhibition as the image. */
.exhibition-header { position: fixed; top: var(--edge-top); left: var(--edge-left); z-index: 10; display: flex; width: 580px; max-width: calc(100% - var(--edge-left) - var(--edge-right)); background: var(--control-surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav-item { position: relative; display: flex; flex: 1; align-items: flex-end; min-width: 0; height: 64px; padding: 0 10px 12px; font-size: 13px; line-height: 20px; white-space: nowrap; text-align: left; color: var(--secondary); }
.nav-item:not(.brand)::after { content: ''; position: absolute; left: 10px; bottom: 8px; width: 26px; height: 1px; background: currentColor; opacity: 0; transition: opacity .18s; pointer-events: none; }
.nav-item:hover, .nav-item:focus-visible, .nav-item.is-active { color: var(--ink); }
.nav-item:hover::after, .nav-item:focus-visible::after { opacity: 1; }
.nav-item:active { color: var(--ink); }
.nav-item:disabled { color: var(--muted); cursor: progress; }
.brand { flex: 0 0 200px; gap: 12px; padding-left: 0; color: var(--ink); }
.brand-name { font-family: var(--font-brand); font-size: 28px; line-height: 34px; letter-spacing: .06em; }
.brand-latin { margin-bottom: 2px; font-family: 'NB International', sans-serif; font-size: 11px; line-height: 18px; letter-spacing: .025em; }

#exhibition-stage, #canvas-mount { position: fixed; inset: 0; }
#canvas-mount canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; cursor: grab; }
#canvas-mount canvas:active { cursor: grabbing; }
#canvas-mount canvas:focus-visible { outline: 1px solid var(--muted); outline-offset: -8px; }
.loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: 'NB International', sans-serif; font-size: 12px; pointer-events: none; }
#hover-title { position: absolute; z-index: 2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; max-width: min(240px,calc(100vw - 32px)); overflow: hidden; font-family: var(--font-art); font-size: 16px; line-height: 24px; color: var(--text); opacity: 0; white-space: normal; overflow-wrap: anywhere; pointer-events: none; transition: opacity .2s; }
#hover-title.visible { opacity: 1; }
#empty-state { position: absolute; top: 152px; left: var(--edge-left); display: grid; grid-template-columns: 200px minmax(0,320px); }
#empty-state h2 { font-family: var(--font-art); font-size: 24px; line-height: 32px; }
#empty-state p { margin-bottom: 24px; }
#empty-state button { display: block; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
#drop-hint { position: fixed; inset: 0; z-index: 15; display: grid; place-items: center; background: rgb(250 250 250 / .93); pointer-events: none; }

.exhibition-footer { position: fixed; right: var(--edge-right); bottom: var(--edge-bottom); z-index: 10; }
.collection-note { position: fixed; bottom: calc(var(--edge-bottom) + 9px); left: var(--edge-left); z-index: 2; max-width: calc(100vw - 190px); padding: 2px 6px; margin-left: -6px; background: var(--control-surface); color: var(--secondary); font-size: 12px; line-height: 22px; pointer-events: none; }
body[data-focus] .collection-note { visibility: hidden; }
body[data-detail] .exhibition-footer { visibility: hidden; }
body[data-detail] #canvas-mount { pointer-events: none; }
#model-view-panel { position: fixed; left: var(--edge-left); right: var(--edge-right); bottom: var(--edge-bottom); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; }
#model-view-panel button { min-height: 44px; text-decoration: underline; text-underline-offset: 5px; }
#model-view-panel p { color: var(--secondary); }
body[data-model-view] .exhibition-footer { visibility: hidden; }
.view-controls { display: flex; align-items: center; gap: 16px; padding: 0 12px; background: var(--control-surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.view-controls button { position: relative; min-width: 44px; min-height: 44px; color: var(--secondary); font-size: 13px; line-height: 20px; }
.view-controls button.is-active::after { content: ''; position: absolute; bottom: 5px; left: calc(50% - 8px); width: 16px; height: 1px; background: currentColor; }
.view-controls button:hover, .view-controls button.is-active { color: var(--ink); }

#work-detail { position: fixed; top: 154px; left: var(--edge-left); z-index: 3; display: grid; grid-template-columns: 200px minmax(0,320px); align-items: start; max-height: calc(100dvh - 230px); pointer-events: none; }
#detail-kind { grid-column: 1; grid-row: 1; padding-right: 20px; color: var(--muted); font-size: 12px; line-height: 20px; margin-bottom: 12px; }
#detail-title { grid-column: 1; grid-row: 2; padding-right: 20px; font-family: var(--font-art); font-size: 24px; line-height: 32px; letter-spacing: .015em; text-wrap: balance; overflow-wrap: anywhere; }
.detail-copy { grid-column: 2; grid-row: 1 / span 2; max-width: 320px; padding-left: 2px; color: var(--text); font-size: 14px; line-height: 24px; pointer-events: auto; }
#detail-description { white-space: pre-wrap; overflow-wrap: anywhere; }
#detail-interaction { margin-top: 16px; color: var(--muted); font-size: 13px; line-height: 20px; }
#detail-interaction:empty { display: none; }
.detail-actions { display: flex; gap: 24px; margin-top: 16px; }
.detail-actions button { min-height: 44px; text-decoration: underline; text-underline-offset: 5px; font-size: 13px; }
#focus-close { position: fixed; top: calc(var(--edge-top) + 72px); left: var(--edge-left); min-height: 44px; color: var(--secondary); font-size: 13px; line-height: 20px; pointer-events: auto; }
#focus-close:hover { color: var(--ink); }

/* The catalogue reads by work name, with dates and media as supporting matter. */
#index-dialog { position: fixed; inset: 0; z-index: 3; padding: 236px var(--edge-left) 130px; overflow-y: auto; scrollbar-width: none; pointer-events: none; }
#index-dialog::-webkit-scrollbar { display: none; }
#index-title { position: absolute; top: 138px; left: var(--edge-left); font-family: var(--font-brand); font-size: 26px; line-height: 34px; letter-spacing: .025em; }
.index-heading, .index-row { display: grid; grid-template-columns: 68px minmax(220px,340px) minmax(0,1fr); width: 100%; text-align: left; }
.index-heading { margin-bottom: 16px; color: var(--muted); font-size: 12px; line-height: 20px; }
.index-heading span:nth-child(2), .index-name { padding-left: 12px; padding-right: 16px; }
.index-heading span:nth-child(3), .index-type { padding-left: 12px; }
.index-row { align-items: baseline; min-height: 44px; padding-block: 10px; color: var(--text); line-height: 24px; pointer-events: auto; }
.index-year { color: var(--muted); font-family: 'NB International', sans-serif; font-size: 12px; line-height: 24px; }
.index-name { font-family: var(--font-art); font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.index-type { color: var(--muted); font-family: var(--font-ui); font-size: 12px; line-height: 22px; }
.index-row:hover .index-name, .index-row:focus-visible .index-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.index-empty { padding-block: 12px; color: var(--muted); }
.search-label { position: absolute; top: 145px; left: calc(var(--edge-left) + 300px); display: flex; align-items: baseline; gap: 12px; color: var(--muted); font-size: 12px; line-height: 24px; pointer-events: auto; }
.search-label input { width: 220px; min-height: 32px; padding: 2px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text); font-size: 14px; line-height: 24px; }
.search-label input::placeholder { color: var(--muted); opacity: 1; }
#index-provenance { max-width: 352px; margin-top: 36px; color: var(--muted); font-size: 13px; line-height: 22px; pointer-events: auto; }
#index-preview-container { position: fixed; top: var(--edge-top); right: var(--edge-right); z-index: 2; width: min(45vw,640px); height: calc(50svh - 3.5rem); pointer-events: none; }
#index-preview { width: 100%; height: 100%; object-fit: contain; object-position: right top; }

dialog { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 154px var(--edge-left) 80px; border: 0; background: var(--paper); color: var(--ink); overflow-y: auto; }
dialog[open] { display: grid; grid-template-columns: 200px minmax(0,320px); align-content: start; }
dialog::backdrop { background: var(--paper); }
dialog form { position: absolute; top: var(--edge-top); right: var(--edge-right); }
.dialog-close { min-width: 80px; min-height: 60px; color: var(--secondary); font-size: 13px; line-height: 20px; text-align: right; }
.dialog-close:hover { color: var(--ink); }
dialog h2 { font-family: var(--font-art); font-size: 24px; line-height: 32px; }
.upload-copy { padding-left: 2px; font-size: 14px; line-height: 24px; }
.file-zone { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; cursor: pointer; }
.file-zone strong { font: inherit; text-decoration: underline; text-underline-offset: 4px; }
.file-zone span { line-height: 24px; }
.file-zone small { color: var(--muted); font: inherit; font-size: 13px; line-height: 22px; }
.file-zone:hover strong { color: var(--secondary); }
#artwork-files:focus-visible + .upload-note { outline: 2px solid var(--ink); }
.upload-note { margin-top: 32px; color: var(--muted); font-size: 13px; line-height: 22px; }
#upload-status { margin-top: 24px; white-space: pre-wrap; line-height: 24px; }
#toast { position: fixed; left: var(--edge-left); bottom: 20px; z-index: 25; max-width: min(470px,calc(100vw - 180px)); padding: 4px 0; background: var(--paper); color: var(--text); font-size: 13px; line-height: 22px; white-space: pre-wrap; opacity: 0; pointer-events: none; transition: opacity .2s; }
#toast.visible { opacity: 1; }
#toast.has-action { bottom: 76px; display: flex; align-items: center; gap: 24px; padding: 8px 16px; border: 1px solid var(--line); }
#toast.has-action.visible { pointer-events: auto; }
#toast button { flex: 0 0 auto; min-width: 44px; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.rules-dialog[open] { grid-template-columns: 200px minmax(0,580px); }
.rules-dialog h2 { padding-right: 24px; }
.rules-copy { color: var(--text); font-size: 14px; line-height: 26px; }
.rules-intro { max-width: 500px; }
.rules-types { margin: 36px 0; }
.rules-types > div { display: grid; grid-template-columns: 100px 1fr; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); }
.rules-types dt { font-family: var(--font-art); font-size: 18px; line-height: 26px; }
.rules-types dd { margin: 0; }
.rules-copy h3 { margin: 36px 0 12px; font-family: var(--font-art); font-weight: 400; font-size: 22px; line-height: 30px; }
.rules-source { margin-top: 36px; color: var(--muted); font-size: 12px; line-height: 22px; }
.rules-source a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width:767px) {
  .exhibition-header { width: calc(100% - var(--edge-left) - var(--edge-right)); }
  .nav-item { padding-inline: 4px; }
  .nav-item::after { left: 4px; }
  .brand { flex: 1; gap: 8px; padding-left: 0; }
  .brand-name { font-size: 24px; line-height: 30px; }
  #work-detail { top: 144px; left: var(--edge-left); right: var(--edge-right); grid-template-columns: minmax(0,1fr); row-gap: 12px; max-height: min(38dvh,280px); overflow-y: auto; pointer-events: auto; }
  #detail-kind { grid-column: 1; grid-row: 1; margin: 0; padding: 0; }
  #detail-title { grid-column: 1; grid-row: 2; padding-right: 0; font-size: 22px; line-height: 30px; }
  .detail-copy { grid-column: 1; grid-row: 3; width: 100%; max-width: none; padding-left: 0; font-size: 16px; line-height: 24px; }
  .detail-actions { margin-top: 8px; }
  #empty-state { right: var(--edge-right); grid-template-columns: 1fr; row-gap: 24px; }
  dialog[open] { grid-template-columns: 1fr; row-gap: 28px; }
  .rules-dialog[open] { grid-template-columns: 1fr; }
  .rules-copy { font-size: 16px; line-height: 28px; }
  .rules-types > div { grid-template-columns: 1fr; gap: 8px; }
  .upload-copy { padding-left: 0; font-size: 16px; line-height: 24px; }
  .search-label { left: auto; right: var(--edge-right); gap: 8px; }
  .search-label input { width: 140px; font-size: 16px; }
  #toast { max-width: calc(100vw - 32px); bottom: 72px; }
}
@media (max-width:479px) { .brand-latin { display: none; } }
@media (max-width:639px) {
  #index-dialog { padding-top: 216px; }
  #index-title { top: 136px; }
  .index-heading, .index-row { grid-template-columns: 52px minmax(0,1fr); }
  .index-type, .index-heading span:nth-child(3) { display: none; }
  .search-label { top: 142px; }
  .search-label input { width: 124px; }
}
@media (max-width:1023px) { #index-preview-container { display: none; } }
@media (max-height:500px) and (max-width:767px) and (orientation:landscape) {
  .nav-item { height: 52px; padding-bottom: 8px; }
  .brand-name { font-size: 22px; line-height: 28px; }
  #work-detail { top: 108px; right: auto; width: 210px; max-height: calc(100dvh - 132px); row-gap: 8px; }
  .detail-copy { font-size: 14px; line-height: 22px; }
  #detail-title { font-size: 20px; line-height: 28px; }
  #focus-close { top: 68px; min-height: 36px; }
  #detail-interaction { margin-top: 12px; }
  #index-dialog { padding-top: 160px; }
  #index-title { top: 96px; }
  .search-label { top: 100px; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }


/* Collections keep the exhibition's type and generous margins. */
.collection-note { display: flex; align-items: center; gap: 12px; pointer-events: auto; }
#scope-picker { min-height: 32px; max-width: min(260px,32vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; text-underline-offset: 4px; text-align: left; }
#scope-count { flex: 0 0 auto; }
body[data-index] .collection-note { display: none; }
.detail-actions { flex-wrap: wrap; gap: 4px 20px; }
.upload-album-field { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 16px; margin-bottom: 36px; }
.upload-album-field label { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
.upload-album-field select { min-width: 0; width: 100%; min-height: 44px; padding: 6px 8px; border: 1px solid var(--line); background: var(--paper); border-radius: 0; }
.upload-album-field button { min-height: 44px; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
#index-dialog { padding: 132px var(--edge-left) 160px; pointer-events: auto; }
.catalogue-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; max-width: 1160px; }
#index-title { position: static; font-family: var(--font-brand); font-size: 28px; line-height: 38px; letter-spacing: .025em; }
.catalogue-title-row > button { flex: 0 0 auto; min-height: 44px; font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }
.catalogue-tabs { display: flex; gap: 32px; margin-top: 12px; margin-bottom: 32px; border-bottom: 1px solid var(--line); max-width: 1160px; }
.catalogue-tabs button { min-height: 52px; margin-bottom: -1px; color: var(--muted); font-size: 14px; border-bottom: 1px solid transparent; }
.catalogue-tabs button[aria-selected=true] { color: var(--ink); border-bottom-color: var(--ink); }
.album-intro { color: var(--secondary); margin-bottom: 24px; font-size: 14px; line-height: 24px; }
#album-load-status:not(:empty) { margin-block: 20px; color: var(--text); }
#album-overview { display: flex; flex-wrap: wrap; gap: 12px 32px; max-width: 1160px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
#album-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 44px 40px; max-width: 1160px; margin-top: 24px; }
.album-tile { min-width: 0; }
.album-tile-open { display: block; width: 100%; text-align: left; }
.album-cover { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; max-height: 240px; margin-bottom: 20px; }
.album-cover img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.album-cover > span { display: grid; place-items: center; width: 100%; height: 100%; border: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.album-tile h3 { margin: 0; font-family: var(--font-art); font-size: 24px; font-weight: 400; line-height: 34px; overflow-wrap: anywhere; }
.album-tile-open:hover h3 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.album-tile-meta { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 22px; overflow-wrap: anywhere; }
.album-tile-actions { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 8px; }
.album-tile-actions button { min-width: 44px; min-height: 44px; color: var(--secondary); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.album-tile-actions button:disabled { opacity: .45; cursor: wait; }
.album-visibility { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 22px; }
.album-tile.is-builtin { display: block; }
.is-builtin .album-tile-open { display: flex; align-items: baseline; gap: 12px; min-height: 44px; padding-block: 8px; }
.is-builtin .album-cover { display: none; }
.is-builtin h3 { font-family: var(--font-ui); font-size: 14px; line-height: 26px; }
.is-builtin .album-tile-meta { margin: 0; }
.is-builtin .album-tile-actions { flex: 0 0 auto; margin: 0; }
.album-empty-message { grid-column: 1 / -1; padding-block: 16px; color: var(--muted); font-size: 14px; line-height: 24px; }
#album-trash { max-width: 1160px; margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--secondary); }
#album-trash summary { min-height: 44px; cursor: pointer; }
#album-trash-list { display: flex; flex-direction: column; align-items: flex-start; }
#album-trash-list button { min-height: 44px; text-decoration: underline; text-underline-offset: 4px; text-align: left; }
.catalogue-context { display: flex; justify-content: space-between; gap: 24px; max-width: 1160px; margin-bottom: 28px; }
.catalogue-context h3 { margin: 0; font-family: var(--font-art); font-size: 26px; line-height: 36px; font-weight: 400; overflow-wrap: anywhere; }
#scope-meta { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 22px; }
.scope-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: start; gap: 4px 24px; }
.scope-actions button { min-height: 44px; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.catalogue-toolbar { display: flex; justify-content: space-between; gap: 24px; max-width: 1160px; margin-bottom: 24px; }
.catalogue-toolbar > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 24px; }
.catalogue-toolbar button { min-height: 44px; font-size: 13px; }
.catalogue-toolbar .search-label { position: static; display: block; margin: 0; font-size: 14px; }
.catalogue-toolbar .search-label input { width: 240px; min-height: 44px; }
#selection-instruction { margin-block: 20px; color: var(--secondary); }
#collection-index, .index-heading { max-width: 1160px; }
.catalogue-record-row { display: grid; grid-template-columns: minmax(0,1fr); }
.is-selecting .catalogue-record-row { grid-template-columns: 44px minmax(0,1fr); }
.record-select { display: grid; place-items: center; align-self: stretch; min-height: 44px; cursor: pointer; }
.record-select input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.catalogue-record-row.is-selected { background: #efefec; }
.is-selecting .index-heading { padding-left: 44px; }
#album-empty-actions { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 20px; }
#album-empty-actions button { min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
#bulk-actions { position: fixed; z-index: 11; bottom: var(--edge-bottom); left: var(--edge-left); right: 190px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 28px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--paper); box-shadow: 0 -12px 20px var(--paper); }
#bulk-actions p { color: var(--secondary); font-size: 13px; }
#bulk-actions button { min-height: 44px; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; text-align: left; }
#bulk-actions button:disabled { color: var(--muted); cursor: default; text-decoration: none; }
@media (max-width: 900px) { #album-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 24px; } }
@media (max-width: 639px) {
  #index-dialog { padding-top: 116px; padding-bottom: 240px; }
  #index-title { font-size: 26px; line-height: 36px; }
  .catalogue-tabs { gap: 28px; margin-top: 8px; margin-bottom: 24px; }
  .catalogue-tabs button { font-size: 14px; }
  .album-intro { font-size: 15px; line-height: 26px; }
  #album-grid { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .album-cover { aspect-ratio: 4 / 3; max-height: 320px; }
  .album-tile h3 { font-size: 23px; line-height: 32px; }
  .is-builtin h3 { font-family: var(--font-ui); font-size: 14px; line-height: 26px; }
  .is-builtin .album-tile-open { gap: 8px; }
  .catalogue-context { flex-direction: column; gap: 12px; }
  .scope-actions { justify-content: flex-start; }
  .catalogue-toolbar { gap: 12px; flex-wrap: wrap; }
  .catalogue-toolbar .search-label { flex: 1 1 180px; }
  .catalogue-toolbar .search-label input { width: 100%; font-size: 16px; }
  .catalogue-toolbar > div { flex: 1 1 auto; justify-content: flex-start; gap: 16px; }
  body[data-index] .exhibition-footer { left: 0; right: 0; bottom: 0; display: flex; justify-content: flex-end; padding: 12px var(--edge-right) var(--edge-bottom); background: var(--paper); }
  #bulk-actions { bottom: calc(56px + var(--edge-bottom)); right: var(--edge-right); padding: 8px 12px; gap: 4px 20px; }
  #scope-picker { max-width: 125px; }
  .collection-note { gap: 8px; font-size: 12px; }
}
@media (max-height:500px) and (orientation:landscape) { #index-dialog { padding-top: 92px; } }

/* Explicit row actions stay separate from selection and opening a work. */
.is-selecting .catalogue-record-row { grid-template-columns: 44px minmax(0,1fr) 60px; }
.catalogue-record-delete { align-self: stretch; min-height: 44px; font-size: 13px; color: var(--secondary); text-decoration: underline; text-underline-offset: 4px; }
.catalogue-record-delete:hover { color: var(--ink); }
.catalogue-record-delete:disabled { opacity: .45; cursor: wait; }
#photo-trash { max-width: 1160px; margin-top: 40px; border-top: 1px solid var(--line); }
#photo-trash summary { min-height: 44px; padding-block: 12px; color: var(--secondary); cursor: pointer; font-size: 13px; }
.photo-trash-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 52px; border-top: 1px solid var(--line); font-size: 13px; }
.photo-trash-row span { min-width: 0; overflow-wrap: anywhere; }
.photo-trash-row button { flex: 0 0 auto; min-height: 44px; min-width: 44px; text-decoration: underline; text-underline-offset: 4px; }
.photo-delete-dialog { inset: 0; width: min(560px,calc(100vw - 32px)); height: fit-content; max-height: 80dvh; margin: auto; padding: 24px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-family: var(--font-ui); }
.photo-delete-dialog[open] { display: block; }
.photo-delete-dialog::backdrop { background: rgb(0 0 0 / .25); }
.photo-delete-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.photo-delete-header h2 { font-family: var(--font-ui); font-size: 18px; font-weight: 400; }
.photo-delete-dialog button { min-height: 44px; min-width: 44px; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.photo-delete-row { display: grid; grid-template-columns: 64px minmax(0,1fr) 44px; align-items: center; gap: 16px; padding-block: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.photo-delete-row img { width: 64px; height: 72px; object-fit: contain; }
.photo-delete-status { color: var(--secondary); font-size: 13px; }
.photo-delete-status:empty { display: none; }

.browser-backup { max-width: 1160px; margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.browser-backup summary { min-height: 44px; cursor: pointer; color: var(--secondary); }
.browser-backup p { max-width: 640px; line-height: 1.8; color: var(--muted); }
.browser-backup-actions { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-block: 10px; }
.browser-backup button { min-height: 44px; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.browser-backup button:disabled { opacity: .45; cursor: wait; }

/* First visit: the same glass exhibition, with a quiet place to begin. */
#welcome-exhibition{position:fixed;z-index:3;left:var(--edge,24px);top:31%;width:min(340px,36vw);pointer-events:none}
#welcome-exhibition>*{pointer-events:auto}.welcome-kicker{font-size:12px;color:#666;letter-spacing:.08em;margin:0 0 26px}
#welcome-heading{font-family:'Zhuque Fangsong',serif;font-size:clamp(46px,5.2vw,76px);font-weight:400;line-height:1.22;margin:0;letter-spacing:.06em}
#welcome-heading span{display:block;margin-left:1em}.welcome-copy{font-size:13px;color:#555;margin:25px 0 30px}
.welcome-actions{display:flex;align-items:center;gap:22px}.welcome-actions button{display:flex;justify-content:space-between;gap:28px;align-items:center;background:#111;color:#fff;border:0;padding:0 18px;min-height:46px;font:inherit;font-size:13px;cursor:pointer}.welcome-actions a{font-size:12px;text-decoration:none;border-bottom:1px solid #aaa;padding-block:12px;color:inherit;white-space:nowrap}
.welcome-restore{display:block;background:none;border:0;padding:0;min-height:44px;margin-top:12px;color:#777;font:inherit;font-size:11px;cursor:pointer}
#welcome-caption{position:fixed;z-index:2;bottom:20px;left:var(--edge,24px);margin:0;font-size:11px;color:#666}#welcome-caption span{margin-left:20px;color:#888}
body[data-welcome] #collection-note{display:none}body[data-welcome][data-index] #welcome-exhibition,body[data-welcome][data-index] #welcome-caption{display:none}
.welcome-sample{width:min(940px,calc(100vw - 32px));max-height:90dvh;border:0;background:#fafafa;padding:45px;overflow:auto;color:#111}.welcome-sample::backdrop{background:#fafafad9;backdrop-filter:blur(12px)}.welcome-sample-close{display:block;margin-left:auto;border:0;background:none;font:inherit;min-height:44px;cursor:pointer}.welcome-sample>img{display:block;max-height:57dvh;max-width:100%;width:auto;object-fit:contain;margin:0 auto 25px}.welcome-sample-info{max-width:620px;margin:auto}.welcome-sample-info small{font-size:11px;color:#777}.welcome-sample-info h2{font-family:'Zhuque Fangsong',serif;font-size:28px;font-weight:400;margin:12px 0}.welcome-sample-info p{font-size:12px;color:#666;line-height:1.8}.welcome-sample-info a{display:inline-block;margin-top:18px;color:#666;font-size:11px}
@media(max-width:640px){#welcome-exhibition{top:112px;width:calc(100% - 40px);left:20px}.welcome-kicker{margin-bottom:13px;font-size:10px}#welcome-heading{font-size:42px;display:flex;gap:18px;align-items:baseline}#welcome-heading span{display:inline;margin:0;font-size:32px}.welcome-copy{margin:12px 0 18px;font-size:12px}.welcome-actions button{min-height:44px}.welcome-restore{position:absolute;right:0;bottom:0;font-size:10px}#welcome-caption{bottom:22px;left:20px}.welcome-sample{padding:18px}}
@media(max-width:640px){body[data-welcome]:not([data-index]) #canvas-mount{mask-image:linear-gradient(to bottom,transparent 270px,#000 375px)}.welcome-restore{position:static;margin-top:4px}body[data-welcome] #welcome-caption{background:#fafafae6;padding:6px 8px;left:12px}}

/* Alternate the result and the invitation; never compete for the same attention. */
body[data-welcome] #canvas-mount{transition:opacity 1.3s ease,filter 1.3s ease}
body[data-welcome-phase="invite"] #canvas-mount{opacity:.07;filter:blur(8px)}
#welcome-exhibition{left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100% - 40px));text-align:center;opacity:0;transition:opacity 1.3s ease;pointer-events:none}
#welcome-exhibition>*{pointer-events:none}body[data-welcome-phase="invite"] #welcome-exhibition{opacity:1}body[data-welcome-phase="invite"] #welcome-exhibition>*{pointer-events:auto}
#welcome-heading{font-size:60px}#welcome-heading span{display:inline;font-size:42px;margin-left:22px}.welcome-actions{justify-content:center}.welcome-restore{margin-inline:auto}.welcome-kicker{margin-bottom:20px}.welcome-copy{margin-block:24px}.welcome-actions button{min-width:158px}
body[data-welcome-phase="invite"] #welcome-caption{opacity:0}#welcome-caption{transition:opacity 1s ease}
@media(max-width:640px){body[data-welcome]:not([data-index]) #canvas-mount{mask-image:none}#welcome-exhibition{left:50%;top:44%;width:calc(100% - 40px)}#welcome-heading{display:block;font-size:52px}#welcome-heading span{font-size:36px;margin-left:18px}.welcome-kicker{font-size:11px;margin-bottom:22px}.welcome-copy{margin-block:22px}.welcome-restore{position:static;margin:10px auto 0}}
@media(prefers-reduced-motion:reduce){body[data-welcome] #canvas-mount,#welcome-exhibition,#welcome-caption{transition:none}}

body[data-focus] #welcome-exhibition,body[data-focus] #welcome-caption{visibility:hidden}