@charset "UTF-8";

/* ===== styles.css ===== */
:root {
  color-scheme: dark;
  --bg: #0a1122;
  --surface: #111c30;
  --surface-raised: #17243a;
  --surface-deep: #080f1d;
  --line: #263248;
  --line-light: #35445e;
  --text: #f1f3ed;
  --muted: #a0acc1;
  --subtle: #73819b;
  --accent: #d9fc49;
  --accent-dark: #1d2b0a;
  --blue: #86a8ff;
  --purple: #b39aff;
  --radius: 20px;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; min-width: 280px; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: absolute; z-index: -1; top: 0; right: 0; width: 70%; height: 740px; pointer-events: none; background: radial-gradient(ellipse at 78% 4%, #253b6428, transparent 65%); }
body.dialog-open { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
a { color: inherit; text-decoration: none; }
button, input, a { touch-action: manipulation; }
button, input { border-radius: 0; }
button { appearance: none; }
button svg, a svg { flex-shrink: 0; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
img { color: var(--muted); font-size: 13px; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
.sr-only, .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 12px; padding: 10px 18px; background: var(--accent); color: var(--bg); border-radius: 8px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.section-shell, .header-inner { width: min(1200px, calc(100% - 80px)); margin-inline: auto; }

/* A small event identity, with the works always one scroll away. */
.site-header { border-bottom: 1px solid #22304999; }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 84px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.brand-mark { width: 32px; height: 32px; color: var(--accent); stroke: none; }
.brand-wordmark { font-family: "Arial Black", "Arial", sans-serif; font-size: 25px; line-height: 1; font-weight: 900; font-style: italic; letter-spacing: -1.2px; }
.brand-year { margin-left: 5px; font-weight: 700; font-size: 20px; color: var(--accent); letter-spacing: -.8px; }
.brand-divider { width: 1px; height: 22px; background: var(--line-light); margin-inline: 5px; }
.brand-caption { font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.header-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 0 8px 12px; background: none; border: 0; font-size: 13px; color: var(--muted); white-space: nowrap; }
.header-link svg { width: 17px; height: 17px; }
.header-link:hover { color: var(--text); }
.hero { display: grid; grid-template-columns: 1.65fr 1fr; align-items: center; gap: 40px; padding-block: 64px 62px; }
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #c4cedc; font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.status-dot { display: inline-block; width: 6px; height: 6px; flex-shrink: 0; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 4px #d9fc4912; }
.eyebrow-separator { color: #5b6880; margin-inline: 2px; }
.hero h1 { margin-top: 23px; font-size: clamp(36px, 4.8vw, 61px); line-height: 1.25; letter-spacing: -.055em; font-weight: 850; }
.hero h1 > span:first-of-type { color: var(--accent); }
.pixel-spark { display: inline-block; position: relative; width: 30px; height: 30px; margin-left: 18px; vertical-align: 10px; transform: rotate(12deg); }
.pixel-spark::before, .pixel-spark::after, .pixel-spark i { content: ""; position: absolute; background: var(--accent); }
.pixel-spark::before { width: 8px; height: 30px; top: 0; left: 11px; }
.pixel-spark::after { width: 30px; height: 8px; top: 11px; left: 0; }
.pixel-spark i { width: 16px; height: 16px; top: 7px; left: 7px; }
.hero-description { margin-top: 23px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.hero-bottom { display: flex; align-items: center; gap: 28px; margin-top: 30px; }
.browse-button { display: inline-flex; align-items: center; gap: 24px; min-height: 46px; padding: 10px 18px 10px 20px; border: 1px solid #627336; border-radius: 10px; font-size: 13px; font-weight: 650; color: var(--accent); transition: background .18s, border-color .18s, transform .18s; }
.browse-button svg { width: 17px; height: 17px; }
.browse-button:hover { background: #d9fc4910; border-color: var(--accent); transform: translateY(-2px); }
.stats { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; color: var(--muted); font-size: 12px; }
.stats-loading { color: var(--subtle); }
.stat-item, .stat { display: flex; align-items: baseline; gap: 7px; }
.stat-item + .stat-item, .stat + .stat { padding-left: 20px; border-left: 1px solid var(--line-light); }
.stat-number, .stats strong, .stats b { color: var(--text); font-family: "Arial", sans-serif; font-size: 25px; font-weight: 700; line-height: 1; }
.stat-label { font-size: 12px; white-space: nowrap; }
.hero-art { height: 310px; position: relative; display: grid; place-items: center; isolation: isolate; }
.hero-art::before { content: ""; position: absolute; z-index: -2; inset: -30px -15px; background-image: radial-gradient(#53698255 .8px, transparent .8px); background-size: 14px 14px; mask-image: radial-gradient(ellipse, #000 20%, transparent 70%); }
.art-orbit { position: absolute; z-index: -1; width: 340px; height: 210px; max-width: 100%; border: 1px solid #6989c43d; border-radius: 50%; transform: rotate(-33deg); }
.orbit-two { transform: rotate(40deg); height: 260px; width: 310px; border-color: #6989c426; }
.event-ticket { position: relative; width: 226px; padding: 19px 22px 0; border: 1px solid #53647d; border-radius: 6px; background: linear-gradient(140deg, #22344a, #14233b 65%); transform: rotate(7deg); box-shadow: 12px 16px 0 #070e1a50, 0 20px 50px #0003; }
.event-ticket::before { content: ""; position: absolute; inset: 5px; border: 1px solid #7390b02b; border-radius: 2px; pointer-events: none; }
.ticket-top { display: flex; align-items: center; justify-content: space-between; color: #dde8f7; font-size: 16px; font-weight: 800; font-style: italic; letter-spacing: -.5px; }
.ticket-top b { margin-left: 3px; color: var(--accent); }
.ticket-top svg { width: 19px; height: 19px; color: var(--accent); }
.ticket-date { display: flex; align-items: center; gap: 4px; margin-top: 15px; font-family: "Arial", sans-serif; font-size: 67px; font-weight: 800; line-height: 1.25; letter-spacing: -5px; color: var(--accent); }
.ticket-date .date-slash { font-size: 43px; margin-inline: 3px; font-weight: 300; color: #95a4bb; }
.ticket-label { margin-top: 8px; font-size: 20px; line-height: 1.4; font-weight: 500; letter-spacing: -.02em; }
.ticket-label strong { font-weight: 750; }
.ticket-bottom { display: flex; align-items: center; justify-content: space-between; padding: 15px 0 14px; margin-top: 20px; border-top: 1px dashed #697d9477; color: #b4c5dc; font-size: 10px; letter-spacing: .04em; }
.pixel-arrow { font-size: 26px; font-weight: 800; line-height: 1; color: var(--accent); }
.art-coordinate { position: absolute; font-family: "SFMono-Regular", Consolas, monospace; font-size: 8px; letter-spacing: .17em; color: #8da4c6; }
.coordinate-top { top: -1px; left: 20px; }
.coordinate-bottom { bottom: 0; right: 0; }
.art-pixel { position: absolute; width: 22px; height: 22px; stroke: none; fill: var(--accent); }
.pixel-one { right: 16px; top: 52px; transform: rotate(12deg); }
.pixel-two { bottom: 23px; left: 20px; width: 14px; height: 14px; fill: var(--purple); transform: rotate(-12deg); }
.hero-preview:empty { display: none; }
.hero-preview { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; }
.hero-art:has(.hero-work) .event-ticket { visibility: hidden; }
.hero-work { position: absolute; width: 166px; height: 218px; padding: 0; overflow: hidden; border: 1px solid #61768e; border-radius: 10px; background: #16253b; box-shadow: 0 16px 30px #0006; transition: transform .22s, border-color .22s; }
.hero-work img { width: 100%; height: 100%; object-fit: cover; }
.hero-work > span { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 12px 11px; color: #f7f9f2; font-size: 11px; font-weight: 650; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(transparent, #061024ee); }
.hero-work-1 { z-index: 1; left: 4px; transform: translateY(8px) rotate(-13deg); }
.hero-work-2 { z-index: 3; transform: translateY(-2px) rotate(3deg); }
.hero-work-3 { z-index: 2; right: 0; transform: translateY(14px) rotate(16deg); }
.hero-work:hover { z-index: 4; transform: translateY(-12px) rotate(0); border-color: var(--accent); }

/* The gallery uses comfortable reading sizes and restrained borders. */
.gallery { padding-top: 28px; padding-bottom: 72px; border-top: 1px solid var(--line); }
.gallery-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.section-kicker { margin-bottom: 7px; font-family: "SFMono-Regular", Consolas, monospace; color: var(--subtle); font-size: 9px; font-weight: 500; letter-spacing: .16em; }
.gallery h2 { font-size: 25px; font-weight: 750; line-height: 1.4; letter-spacing: -.035em; }
.heading-dot { color: var(--accent); margin-left: 3px; }
.search-box { display: flex; position: relative; align-items: center; width: min(100%, 320px); min-height: 44px; padding-left: 15px; border: 1px solid var(--line-light); border-radius: 10px; background: #111b2c; transition: border-color .2s, box-shadow .2s; }
.search-box:focus-within { border-color: #bbd949; box-shadow: 0 0 0 3px #d9fc4910; }
.search-icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--subtle); }
.search-box input { min-width: 0; width: 100%; height: 44px; padding: 10px 40px 10px 10px; background: transparent; border: 0; outline: none; font-size: 12px; color: var(--text); }
.search-box input::placeholder { color: #8896af; opacity: 1; }
.search-box input::-webkit-search-cancel-button { -webkit-appearance: none; }
.clear-search { position: absolute; right: 2px; top: 2px; width: 40px; height: 40px; }
.clear-search svg { width: 18px; height: 18px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 24px 20px; }
.filters button, .filter-button, .filter-chip { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 15px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: #abb8cc; font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap; transition: color .18s, background .18s, border-color .18s; }
.filters button:hover { border-color: #61708a; color: var(--text); }
.filters button[aria-pressed="true"], .filters button.active, .filter-chip.active, .filter-button.active { background: var(--accent); border-color: var(--accent); color: #172008; font-weight: 700; }
.filter-count, .filters button .count { font-family: "Arial", sans-serif; font-size: 11px; opacity: .65; }
.filters svg { width: 14px; height: 14px; }
.filter-chip > span { font-family: "Arial", sans-serif; font-size: 10px; opacity: .65; }
.results-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.result-summary { color: #8999b2; font-size: 12px; }
.result-summary strong { color: #d5dfe9; font-weight: 600; }
.gallery-hint { color: var(--subtle); font-size: 10px; white-space: nowrap; }
.gallery-hint > span { margin-right: 4px; }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; }
.work-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #111b2c; transition: transform .22s, border-color .22s, box-shadow .22s; }
.work-card:hover { transform: translateY(-4px); border-color: #65744a; box-shadow: 0 10px 30px #0003; }
.work-card:focus-within { border-color: var(--accent); }
.card-open { display: flex; flex-direction: column; width: 100%; height: 100%; text-align: left; padding: 0; border: 0; background: none; }
.card-open:focus-visible { outline-offset: -4px; border-radius: 14px; }
.card-media { position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; background: #18273c; isolation: isolate; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.work-card:hover .card-media img { transform: scale(1.035); }
.card-media::after { content: ""; pointer-events: none; position: absolute; inset: 0; border-bottom: 1px solid #ffffff09; }
.card-media.contain img, .card-media img.contain { object-fit: contain; }
.card-number { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; min-width: 31px; height: 25px; padding: 0 7px; border: 1px solid #ffffff3b; border-radius: 5px; background: #0a1122c4; color: #f4f8ee; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; line-height: 1; backdrop-filter: blur(8px); }
.favorite-button { position: absolute; z-index: 3; top: 9px; right: 9px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #ffffff30; border-radius: 50%; background: #0a1122c7; color: #eef1e9; backdrop-filter: blur(8px); }
.favorite-button svg { width: 17px; height: 17px; }
.favorite-button[aria-pressed="true"], .favorite-button.active { color: var(--accent); background: #192517ed; border-color: #a5bd4a99; }
.favorite-button[aria-pressed="true"] svg, .favorite-button.active svg { fill: currentColor; }
.cover-placeholder { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 150px; padding: 32px; overflow: hidden; color: #d5e7fb; background: radial-gradient(ellipse at 30% 20%, #45668c70, transparent 70%), #1a314c; text-align: center; }
.cover-placeholder::before { content: ""; position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(#9ab2cb25 1px, transparent 1px), linear-gradient(90deg, #9ab2cb25 1px, transparent 1px); background-size: 24px 24px; }
.cover-placeholder::after { content: ""; position: absolute; width: 150px; height: 150px; border: 1px solid #ffffff12; border-radius: 50%; top: -60px; right: -20px; box-shadow: 0 0 0 30px #ffffff04, 0 0 0 60px #ffffff03; }
.cover-placeholder > * { position: relative; z-index: 1; }
.cover-placeholder svg { width: 48px; height: 48px; margin-bottom: 12px; opacity: .7; stroke-width: 1.2; }
.cover-placeholder .cover-title, .cover-placeholder strong { font-size: 23px; font-weight: 650; line-height: 1.45; letter-spacing: -.035em; }
.cover-placeholder .cover-label, .cover-placeholder small { margin-top: 11px; color: #c5d9ec99; font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; letter-spacing: .12em; }
.cover-placeholder[data-category="AI向善"], .cover-placeholder.theme-green { background: radial-gradient(ellipse at 25% 20%, #4b775e80, transparent 75%), #153b35; color: #d6f2d1; }
.cover-placeholder[data-category="未来生活"], .cover-placeholder.theme-blue { background: radial-gradient(ellipse at 25% 20%, #426ca780, transparent 75%), #193550; }
.cover-placeholder[data-category="学习重设计"], .cover-placeholder[data-category="AI重塑学习"], .cover-placeholder.theme-purple { background: radial-gradient(ellipse at 25% 20%, #72549380, transparent 75%), #342647; color: #e6dafa; }
.cover-placeholder[data-category="科学探索"], .cover-placeholder.theme-yellow { background: radial-gradient(ellipse at 25% 20%, #82733c80, transparent 75%), #393820; color: #eeefc7; }
.cover-placeholder[data-category="玩起来"], .cover-placeholder.theme-pink { background: radial-gradient(ellipse at 25% 20%, #914e7980, transparent 75%), #42233e; color: #f1cce9; }
.cover-placeholder[data-category="AI非遗"], .cover-placeholder.theme-indigo { background: radial-gradient(ellipse at 25% 20%, #64539180, transparent 75%), #292948; color: #dbd5f7; }
.cover-placeholder { color: var(--card-accent, #c1dbf7); background: radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--card-accent, #7dadda) 20%, transparent), transparent 80%), #152638; }
.cover-glyph { display: grid; place-items: center; width: 88px; height: 88px; border: 1px solid color-mix(in srgb, var(--card-accent, #7dadda) 30%, transparent); border-radius: 23px; font-family: "Arial", sans-serif; font-size: 68px; font-weight: 300; line-height: 1; transform: rotate(-7deg); background: #ffffff04; }
.cover-caption { margin-top: 19px; font-size: 12px; font-weight: 550; opacity: .85; }
.cover-orbit { position: absolute; width: 230px; height: 120px; border: 1px solid color-mix(in srgb, var(--card-accent, #7dadda) 18%, transparent); border-radius: 50%; transform: rotate(-25deg); }
.cover-large { min-height: 300px; }
.card-body { display: flex; flex-direction: column; flex: 1; width: 100%; padding: 20px 20px 17px; }
.card-category { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-bottom: 10px; color: var(--card-accent, #b7ce8e); font-size: 10px; font-weight: 550; }
.card-category::before { content: ""; width: 4px; height: 4px; background: currentColor; border-radius: 1px; }
.card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 18px; font-weight: 700; letter-spacing: -.025em; line-height: 1.5; overflow-wrap: anywhere; }
.card-tagline { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 45px; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.85; margin-top: 8px; overflow-wrap: anywhere; }
.card-author { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin-top: 19px; padding-top: 13px; border-top: 1px solid #263248aa; color: #a4b2c8; font-size: 11px; line-height: 1.6; }
.card-author strong, .author-name { color: #d5dce6; font-weight: 600; }
.card-author .school { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.card-author svg { width: 15px; height: 15px; color: #8293ac; }
.card-author .card-arrow { margin-left: auto; color: var(--accent); font-size: 17px; line-height: 1; }
.card-author > span:last-child[aria-hidden] { margin-left: auto; color: var(--card-accent, var(--accent)); font-size: 17px; line-height: 1; }
.card-school { margin-top: 4px; color: #7487a2; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.favorite-button { font-family: "Arial", sans-serif; font-size: 23px; line-height: 1; }
.favorite-button.is-saved, .detail-actions .is-saved { color: var(--accent); border-color: #9cba4a88; }
mark { color: #f1ffcb; background: #d9fc4928; border-radius: 2px; }
.card-badges, .media-badges { display: flex; flex-wrap: wrap; gap: 5px; position: absolute; bottom: 10px; left: 12px; z-index: 2; }
.card-badges span, .media-badges span, .media-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border: 1px solid #ffffff20; border-radius: 4px; background: #0a1122c9; color: #e3e9f1; font-size: 9px; backdrop-filter: blur(5px); }
.card-badges svg, .media-badges svg { width: 11px; height: 11px; }
.card-media > .media-badge { position: absolute; bottom: 11px; left: 12px; z-index: 2; }
.load-error { grid-column: 1/-1; padding: 50px 20px; text-align: center; border: 1px dashed var(--line-light); border-radius: 14px; }
.load-error p { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.empty-state { padding: 72px 20px 84px; text-align: center; border: 1px dashed var(--line-light); border-radius: var(--radius); background: #111b2c66; }
.empty-state > svg { width: 55px; height: 55px; margin: 0 auto 22px; color: #778ba8; stroke-width: 1.5; }
.empty-state h3 { font-size: 19px; font-weight: 650; }
.empty-state p { margin-top: 9px; color: var(--muted); font-size: 13px; }
.empty-state button { margin-top: 24px; }

/* Dialogs share their visual language, but keep clear task-specific actions. */
dialog { color: var(--text); background: var(--surface); border: 1px solid var(--line-light); padding: 0; box-shadow: 0 24px 110px #0009; overscroll-behavior: contain; }
dialog::backdrop { background: #030711cc; backdrop-filter: blur(7px); }
dialog[open] { animation: dialog-enter .2s ease-out; }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
.icon-button { display: grid; place-items: center; flex-shrink: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #b7c3d6; }
.icon-button:hover { color: var(--text); background: #ffffff0c; }
.dialog-close { position: absolute; z-index: 10; top: 16px; right: 16px; width: 40px; height: 40px; background: #0a1223e8; border: 1px solid #3b4a62; color: var(--text); backdrop-filter: blur(8px); }
.dialog-close svg { width: 20px; height: 20px; }
.dialog-close:hover { border-color: #a7b7d1; background: #22324a; }
.work-dialog { width: min(1050px, calc(100% - 48px)); max-width: 1050px; max-height: min(90dvh, 1000px); border-radius: 22px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #46566d transparent; }
.detail-content { padding: 36px; min-height: 240px; }
.detail-header { padding-right: 40px; margin-bottom: 25px; }
.detail-category { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-size: 11px; font-weight: 600; margin-bottom: 9px; }
.detail-eyebrow { display: inline-flex; gap: 9px; margin-bottom: 11px; color: var(--card-accent, var(--accent)); font-size: 11px; font-weight: 550; }
.detail-eyebrow > span { color: #64738c; }
.detail-category .card-number { position: static; display: inline-flex; margin-right: 4px; border-color: #b2d04455; color: var(--accent); background: #d9fc490b; }
.detail-title, #detail-title { font-size: clamp(25px, 3vw, 34px); font-weight: 750; line-height: 1.35; letter-spacing: -.04em; overflow-wrap: anywhere; }
.detail-tagline { margin-top: 12px; color: #b7c5d7; font-size: 14px; line-height: 1.85; overflow-wrap: anywhere; }
.detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 15px; margin-top: 13px; color: #a7b6cd; font-size: 12px; line-height: 1.7; }
.detail-meta > span, .detail-meta .meta-item { display: inline-flex; align-items: center; gap: 6px; }
.detail-meta strong { color: #e1e8f0; font-weight: 600; }
.detail-meta svg { width: 14px; height: 14px; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 26px; align-items: start; }
.detail-main, .detail-sidebar { min-width: 0; }
.detail-media { overflow: hidden; background: var(--surface-deep); border: 1px solid #2d3d56; border-radius: 12px; }
.detail-media img, .detail-media video { width: 100%; max-height: 560px; object-fit: contain; margin: 0 auto; }
.detail-media img { cursor: zoom-in; }
.detail-media video { aspect-ratio: 16/9; background: #030711; }
.detail-media video[poster] { object-fit: contain; }
.video-wrap { width: 100%; }
.media-help, .media-error { padding: 10px 13px; background: #142139; color: #92a7c4; font-size: 10px; line-height: 1.8; }
.media-error { color: #e9c695; }
.image-expand { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #091323; cursor: zoom-in; }
.image-expand > img { width: 100%; object-fit: contain; }
.image-expand > span { position: absolute; right: 10px; bottom: 10px; display: inline-flex; padding: 4px 8px; border: 1px solid #ffffff20; border-radius: 5px; background: #091323cc; color: #e1e8f3; font-size: 10px; backdrop-filter: blur(4px); }
.image-strip { display: flex; gap: 9px; padding: 12px; overflow-x: auto; background: #111e33; scrollbar-width: thin; scrollbar-color: #536782 transparent; }
.image-strip .image-expand { flex: 0 0 98px; width: 98px; height: 72px; overflow: hidden; border: 1px solid #526179; border-radius: 6px; }
.image-strip .image-expand img { width: 100%; height: 100%; object-fit: cover; }
.image-strip .image-expand:hover { border-color: var(--accent); }
.work-documents { margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line); }
.work-documents h3 { font-size: 14px; margin-bottom: 10px; }
.document-link { display: block; max-width: 100%; padding: 9px 0; border: 0; background: none; color: var(--blue); font-size: 12px; text-align: left; line-height: 1.8; overflow-wrap: anywhere; }
.document-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.detail-media figcaption, .media-caption { padding: 9px 12px; background: #162239; color: var(--muted); font-size: 11px; }
.detail-media + .detail-media { margin-top: 16px; }
.media-tabs, .media-switcher { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.media-tabs button, .media-switcher button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 12px; border: 1px solid var(--line-light); border-radius: 7px; background: #16233a; color: #a5b4cc; font-size: 11px; }
.media-tabs button.active, .media-tabs button[aria-selected="true"], .media-tabs button[aria-pressed="true"], .media-switcher button.active { color: var(--text); background: #27374e; border-color: #76859c; }
.media-tabs svg { width: 14px; height: 14px; }
.detail-description { padding-top: 25px; color: #bac6d7; font-size: 14px; line-height: 1.95; overflow-wrap: anywhere; white-space: normal; }
.detail-description h3, .detail-sidebar h3, .detail-section-title { margin: 0 0 11px; color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.6; }
.detail-description p + p { margin-top: 14px; }
.detail-description .description-text, .detail-description .preserve-lines { white-space: pre-line; }
.detail-description ul, .detail-description ol { padding-left: 21px; }
.detail-description li + li { margin-top: 7px; }
.detail-description a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.detail-sidebar { display: flex; flex-direction: column; gap: 18px; padding: 20px; border: 1px solid #354359; border-radius: 13px; background: #17243a; }
.detail-sidebar > p { color: var(--muted); font-size: 12px; line-height: 1.85; }
.detail-sidebar .action-primary, .detail-sidebar .action-secondary { width: 100%; }
.experience-box { min-width: 0; }
.experience-box > .section-kicker { display: block; margin-bottom: 6px; }
.experience-box > h3 { margin-bottom: 17px; font-size: 17px; }
.experience-link + .experience-link { padding-top: 17px; margin-top: 19px; border-top: 1px solid var(--line-light); }
.experience-link .link-row { padding: 0; border: 0; background: none; gap: 7px; }
.experience-link .link-row > .action-primary, .experience-link .link-row > .action-secondary { flex: 1; min-width: 0; padding-inline: 10px; }
.experience-link .link-row > .copy-button { width: 42px; min-height: 44px; border: 1px solid #4a5b74; border-radius: 8px; font-family: "Arial", sans-serif; font-size: 22px; color: #c2d0e4; }
.experience-link .link-row > .copy-button:hover { background: #ffffff09; color: var(--accent); }
.experience-link > .link-address { margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: #0e192b; font-size: 10px; }
.experience-link > .platform-note { margin-top: 10px; }
.access-pending { color: #b5c5db; font-size: 12px; line-height: 1.85; }
.access-notes { margin-top: 16px; padding: 11px 12px; border: 1px solid #3b4b64; border-radius: 7px; color: #b8c9df; font-size: 11px; line-height: 1.8; }
.access-notes summary { min-height: 22px; cursor: pointer; color: #d1dced; }
.access-notes p { margin-top: 9px; white-space: normal; overflow-wrap: anywhere; }
.work-qr { margin-top: 18px; padding: 16px 13px 12px; border-top: 1px solid #36465f; text-align: center; }
.work-qr > p { margin-top: 10px; color: #94a7c1; font-size: 10px; line-height: 1.8; }
.qr-expand { width: fit-content; max-width: 100%; margin-inline: auto; border-radius: 9px; background: white; }
.qr-expand img { max-height: 260px; }
.save-note { color: #7e92ae !important; font-size: 10px !important; text-align: center; line-height: 1.75 !important; }
.detail-actions { display: flex; flex-direction: column; gap: 9px; }
.action-primary, .action-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 16px; border-radius: 8px; font-size: 12px; font-weight: 650; line-height: 1.55; text-align: center; transition: background .16s, border-color .16s, transform .16s; }
.action-primary { border: 1px solid var(--accent); background: var(--accent); color: #172008; }
.action-primary:hover { background: #e5ff7f; border-color: #e5ff7f; }
.action-primary:active, .action-secondary:active { transform: translateY(1px); }
.action-secondary { border: 1px solid #4b5a71; background: transparent; color: #d4deec; }
.action-secondary:hover { border-color: #94a6be; background: #ffffff07; }
.action-primary svg, .action-secondary svg { width: 16px; height: 16px; }
.link-row { display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: #0e192b; border: 1px solid #2c3c55; border-radius: 8px; }
.link-address { flex: 1; min-width: 0; font-size: 10px; color: #98aeca; line-height: 1.6; overflow-wrap: anywhere; word-break: break-all; user-select: text; }
.link-row .copy-button { padding-inline: 5px; flex-shrink: 0; font-size: 10px; }
.platform-note { padding: 12px 13px; background: #24375488; border-left: 2px solid #89a9da; border-radius: 2px 7px 7px 2px; color: #b8c9e0; font-size: 11px; line-height: 1.85; overflow-wrap: anywhere; }
.platform-note strong { font-weight: 650; color: #dce8f8; }
.platform-label, .platform-badge { display: inline-flex; align-items: center; width: fit-content; gap: 5px; padding: 3px 7px; border: 1px solid #566d5377; border-radius: 5px; background: #a7c88b0b; color: #c1d9a7; font-size: 10px; }
.unavailable-note { padding: 14px; background: #111c2e; border: 1px dashed #3c4c63; border-radius: 8px; color: #b5c2d5; font-size: 12px; line-height: 1.8; }
.qr-image { display: block; width: min(100%, 200px); max-height: 230px; object-fit: contain; border: 10px solid white; border-radius: 10px; margin-inline: auto; background: white; }
.qr-caption { color: var(--muted); font-size: 11px; text-align: center; margin-top: 10px; }
.detail-qr { padding-block: 6px; }
.detail-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-light); }
.detail-nav button { display: flex; align-items: center; gap: 7px; min-height: 40px; max-width: 47%; padding: 8px 0; border: 0; background: transparent; color: #aabbd2; font-size: 11px; text-align: left; }
.detail-nav button:hover { color: var(--accent); }
.detail-nav button:last-child { text-align: right; margin-left: auto; }
.detail-nav svg { width: 17px; height: 17px; }
.detail-nav span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-nav .nav-label { color: var(--subtle); }
.detail-nav > span { flex-shrink: 0; color: #6f829f; font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; }
.small-dialog { width: min(460px, calc(100% - 36px)); max-height: min(90dvh, 900px); border-radius: 20px; padding: 32px; overflow-y: auto; }
.small-dialog h2 { color: var(--text); font-size: 25px; font-weight: 750; line-height: 1.4; letter-spacing: -.03em; }
.dialog-icon { width: 48px; height: 48px; display: grid; place-items: center; background: #d9fc4911; border: 1px solid #d9fc4933; border-radius: 13px; color: var(--accent); margin-bottom: 23px; }
.dialog-icon svg { width: 24px; height: 24px; }
.dialog-eyebrow { color: var(--accent); font-size: 10px; font-weight: 600; letter-spacing: .05em; margin-bottom: 9px; }
.dialog-description { margin-top: 14px; color: #b0bed2; font-size: 13px; line-height: 1.9; }
.leave-address-row { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 10px 12px; border: 1px solid #36465f; border-radius: 9px; background: #0c1627; }
.leave-url { flex: 1; min-width: 0; max-height: 80px; overflow: auto; overflow-wrap: anywhere; word-break: break-all; color: #8faaca; font-size: 11px; line-height: 1.7; user-select: all; }
.copy-button { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 6px 2px; border: 0; background: none; color: #d5e0f0; font-size: 11px; }
.copy-button:hover { color: var(--accent); }
.copy-button svg { width: 14px; height: 14px; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1.15fr; gap: 10px; margin-top: 24px; }
.dialog-footnote { margin-top: 16px; color: #7d8da5; font-size: 10px; text-align: center; line-height: 1.8; }
.share-dialog { padding-top: 36px; text-align: center; }
.share-dialog h2 { padding-inline: 20px; }
.share-content > p { color: var(--muted); font-size: 12px; margin-top: 12px; }
.share-content > .action-primary, .share-content > .action-secondary { margin-top: 14px; width: 100%; }
.share-preview { margin: 22px 0 16px; border: 1px solid var(--line-light); border-radius: 13px; overflow: hidden; background: #0c1627; }
.share-preview img { width: 100%; }
.share-preview { padding: 20px; }
.share-preview > .qr-image { width: 205px; height: auto; margin: 0 auto; }
.share-preview > p { color: var(--muted); font-size: 11px; margin-top: 13px; }
.share-content > .link-address { padding: 9px 11px; border: 1px solid var(--line-light); border-radius: 7px; background: #0d1729; text-align: left; }
.share-content > .platform-note { margin-top: 17px; text-align: left; }
.lightbox-image { width: 100%; max-height: 70dvh; object-fit: contain; margin-top: 20px; border-radius: 6px; }
.share-content .qr-image { margin-top: 22px; }
.share-content .link-row { margin-top: 18px; text-align: left; }
.about-dialog { padding-top: 40px; }
.about-dialog h2 { font-size: 23px; padding-right: 8px; }
.about-content { margin-top: 23px; color: #bbc7d8; font-size: 13px; line-height: 1.95; }
.about-content p + p { margin-top: 16px; }
.about-content a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.about-content img { margin-block: 18px; border-radius: 9px; }
.about-signoff { display: flex; align-items: center; gap: 10px; color: #d3dfbd; font-size: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-light); }
.toast { position: fixed; z-index: 1000; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 40px); padding: 12px 20px; border: 1px solid #52663a; border-radius: 12px; background: #203020f5; color: #e2f5d6; font-size: 13px; line-height: 1.6; text-align: center; opacity: 0; visibility: hidden; transform: translate(-50%, 12px); transition: opacity .2s, transform .2s, visibility .2s; box-shadow: 0 12px 50px #0005; pointer-events: none; }
.toast.show, .toast.visible, .toast[data-visible="true"] { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.site-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 25px; border-top: 1px solid var(--line); padding-block: 28px 34px; color: var(--subtle); }
.footer-brand { font-family: "Arial", sans-serif; font-size: 16px; font-weight: 800; font-style: italic; color: #b7c6dd; white-space: nowrap; }
.footer-brand > span:first-child { font-size: 13px; color: #8b9b67; margin-left: 3px; }
.footer-brand .footer-separator { color: #45536b; font-size: 13px; font-style: normal; margin-inline: 11px; }
.footer-title { font: 500 11px var(--font); color: #8494ad; }
.site-footer p { font-size: 10px; }
.back-to-top { margin-left: auto; color: #9babc4; font-size: 11px; padding: 9px 0 9px 12px; }
.back-to-top span { margin-left: 9px; }
.back-to-top:hover { color: var(--accent); }

@media (min-width: 1450px) {
  .section-shell, .header-inner { width: min(1280px, calc(100% - 100px)); }
  .hero { grid-template-columns: 1.7fr 1fr; gap: 80px; padding-block: 70px; }
  .hero h1 { font-size: 65px; }
  .card-media { aspect-ratio: 16/9.5; }
}

@media (max-width: 1050px) {
  .section-shell, .header-inner { width: calc(100% - 48px); }
  .hero { grid-template-columns: 1.5fr 1fr; gap: 18px; padding-block: 50px; }
  .hero h1 { font-size: 47px; }
  .hero-art { transform: scale(.9); }
  .hero-bottom { gap: 22px; }
  .stats { gap: 13px; }
  .stat-item + .stat-item, .stat + .stat { padding-left: 13px; }
  .work-grid { gap: 18px 15px; }
  .card-body { padding: 17px 16px 15px; }
  .card-title { font-size: 16px; }
  .detail-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; }
  .detail-content { padding: 30px; }
}

@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr .7fr; padding-block: 42px; }
  .hero h1 { font-size: 39px; }
  .hero-art { transform: scale(.8); transform-origin: center right; margin-left: -25px; }
  .pixel-spark { width: 20px; height: 20px; margin-left: 8px; transform: scale(.65) rotate(12deg); vertical-align: 2px; }
  .hero-bottom { flex-wrap: wrap; gap: 17px 22px; }
  .stats .stat-item:nth-child(n+3) { display: none; }
  .hero-description { font-size: 12px; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .card-title { font-size: 18px; }
  .card-body { padding: 20px; }
  .detail-layout { grid-template-columns: minmax(0, 1fr); }
  .detail-sidebar { display: grid; grid-template-columns: 1fr; }
  .detail-media img { max-height: 480px; }
  .detail-content { padding: 30px; }
  .gallery-heading { gap: 20px; }
  .search-box { width: 270px; }
  .gallery h2 { font-size: 23px; }
}

@media (max-width: 600px) {
  html { scroll-padding-top: 16px; }
  .section-shell, .header-inner { width: calc(100% - 40px); }
  .header-inner { min-height: 67px; gap: 10px; }
  .brand { gap: 8px; }
  .brand-mark { width: 26px; height: 26px; }
  .brand-wordmark { font-size: 23px; }
  .brand-year { font-size: 17px; margin-left: 4px; }
  .brand-divider, .brand-caption { display: none; }
  .header-link { gap: 5px; font-size: 11px; }
  .header-link svg { width: 15px; height: 15px; }
  .hero { display: block; position: relative; padding-top: 36px; padding-bottom: 32px; }
  .hero h1 { margin-top: 20px; font-size: clamp(31px, 8.4vw, 47px); line-height: 1.3; letter-spacing: -.055em; }
  .eyebrow { font-size: 10px; gap: 8px; letter-spacing: .03em; }
  .eyebrow-separator { margin: 0; }
  .hero-description { margin-top: 19px; font-size: 12px; line-height: 1.9; max-width: 320px; }
  .hero-art { display: none; }
  .hero-bottom { margin-top: 23px; gap: 18px; }
  .browse-button { min-height: 42px; padding: 9px 13px 9px 15px; font-size: 11px; gap: 15px; }
  .browse-button svg { width: 15px; height: 15px; }
  .stats { gap: 14px; font-size: 10px; }
  .stat-item, .stat { gap: 5px; }
  .stat-item + .stat-item, .stat + .stat { padding-left: 14px; }
  .stat-number, .stats strong, .stats b { font-size: 22px; }
  .stat-label { font-size: 10px; }
  .gallery { padding-top: 27px; padding-bottom: 44px; }
  .gallery-heading { display: block; }
  .section-kicker { font-size: 8px; letter-spacing: .13em; margin-bottom: 5px; }
  .gallery h2 { font-size: 23px; }
  .search-box { width: 100%; margin-top: 20px; border-radius: 9px; }
  .search-box input { font-size: 13px; }
  .filters { gap: 7px; padding-block: 15px 18px; }
  .filters button, .filter-button, .filter-chip { min-height: 36px; padding: 7px 11px; font-size: 11px; border-radius: 7px; }
  .filter-count, .filters button .count { font-size: 10px; }
  .results-bar { margin-bottom: 14px; }
  .result-summary { font-size: 11px; }
  .gallery-hint { font-size: 9px; }
  .work-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .work-card { border-radius: 13px; }
  .work-card:hover { transform: none; }
  .card-media { aspect-ratio: 16/9.5; }
  .card-body { padding: 18px 19px 16px; }
  .card-category { font-size: 10px; margin-bottom: 8px; }
  .card-title { font-size: 20px; }
  .card-tagline { margin-top: 7px; min-height: 0; font-size: 13px; line-height: 1.8; }
  .card-author { margin-top: 16px; padding-top: 12px; font-size: 11px; }
  .favorite-button { width: 38px; height: 38px; }
  .empty-state { padding: 48px 20px; }
  .empty-state h3 { font-size: 18px; }
  .site-footer { display: block; padding-block: 25px; }
  .site-footer p { margin-top: 9px; font-size: 10px; }
  .back-to-top { display: inline-block; padding: 15px 0 0; font-size: 11px; }
  .work-dialog { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .work-dialog .dialog-close { position: sticky; top: max(13px, env(safe-area-inset-top)); float: right; right: 16px; margin: max(13px, env(safe-area-inset-top)) 16px -53px 0; width: 40px; height: 40px; }
  .detail-content { padding: max(24px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom)); }
  .detail-header { padding-top: 3px; padding-right: 42px; margin-bottom: 23px; }
  .detail-category { font-size: 10px; margin-bottom: 11px; }
  .detail-title, #detail-title { font-size: 27px; line-height: 1.4; }
  .detail-tagline { margin-top: 11px; font-size: 13px; }
  .detail-meta { gap: 4px 11px; margin-top: 12px; font-size: 11px; }
  .detail-layout { gap: 24px; }
  .detail-media img { max-height: 60dvh; }
  .detail-description { font-size: 14px; line-height: 1.95; padding-top: 23px; }
  .detail-description h3, .detail-sidebar h3 { font-size: 15px; }
  .detail-sidebar { padding: 20px; gap: 17px; border-radius: 12px; }
  .detail-actions { gap: 10px; }
  .action-primary, .action-secondary { min-height: 46px; font-size: 13px; }
  .link-address { font-size: 11px; }
  .link-row .copy-button { font-size: 11px; min-height: 36px; }
  .platform-note { font-size: 12px; }
  .detail-nav { gap: 20px; margin-top: 26px; padding-top: 17px; }
  .detail-nav button { font-size: 11px; }
  .small-dialog { max-height: calc(100dvh - 40px); padding: 28px 23px; border-radius: 17px; }
  .small-dialog h2 { font-size: 23px; }
  .dialog-description { font-size: 13px; line-height: 1.9; }
  .dialog-actions { gap: 9px; }
  .dialog-actions .action-primary, .dialog-actions .action-secondary { padding-inline: 10px; font-size: 12px; }
  .dialog-icon { margin-bottom: 20px; }
  .share-dialog, .about-dialog { padding-top: 37px; }
  .toast { bottom: max(22px, env(safe-area-inset-bottom)); padding: 11px 16px; font-size: 12px; }
}

@media (max-width: 359px) {
  .section-shell, .header-inner { width: calc(100% - 32px); }
  .hero h1 { font-size: 30px; }
  .pixel-spark { margin-left: 1px; transform: scale(.55) rotate(12deg); }
  .hero-description { font-size: 11px; }
  .hero-bottom { gap: 14px; }
  .stats { gap: 9px; }
  .stat-item + .stat-item, .stat + .stat { padding-left: 9px; }
  .stat-number, .stats strong, .stats b { font-size: 20px; }
  .browse-button { gap: 10px; padding-inline: 11px; }
  .filters button { padding-inline: 9px; font-size: 10px; }
  .gallery-hint { display: none; }
  .detail-content { padding-inline: 16px; }
  .detail-title, #detail-title { font-size: 25px; }
  .small-dialog { width: calc(100% - 24px); padding-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .work-card:hover, .work-card:hover .card-media img, .browse-button:hover { transform: none; }
}

@media print {
  body { background: white; color: #111; }
  .site-header, .hero-art, .search-box, .filters, .favorite-button, .browse-button, .back-to-top, .toast, dialog { display: none !important; }
  .section-shell { width: 100%; }
  .hero { display: block; padding: 15px 0 30px; }
  .hero h1, .hero h1 > span:first-of-type { color: #111; font-size: 30px; }
  .hero-description, .stats, .result-summary { color: #555; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .work-card { break-inside: avoid; border-color: #ccc; background: white; }
  .card-title { color: #111; }
  .card-tagline, .card-author, .card-category { color: #555; }
}

.mobile-action-bar{display:none}
@media(max-width:600px){
 .work-dialog .detail-content{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
 .mobile-action-bar{display:flex;position:fixed;z-index:10;bottom:0;left:0;right:0;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(14,23,42,.97);border-top:1px solid rgba(255,255,255,.12);backdrop-filter:blur(18px)}
 .mobile-action-bar>.action-primary{flex:1;min-width:0;min-height:48px;font-size:13px;padding:12px}
 .mobile-action-bar>.action-secondary{min-height:48px;padding:12px 14px}
 .mobile-action-bar>.copy-button{width:48px;min-height:48px}
}
.manual-copy-address{display:block;box-sizing:border-box;width:100%;min-height:130px;margin-top:18px;padding:14px;color:#edf4ed;background:#0b1425;border:1px solid #5b718e;border-radius:10px;font:14px/1.7 ui-monospace,monospace;resize:vertical;overflow-wrap:anywhere;white-space:pre-wrap;user-select:text}
@media(max-width:600px){.work-dialog>.toast{bottom:calc(88px + env(safe-area-inset-bottom))}}


/* ===== exhibition.css ===== */
/* One fitted scene on desktop; readable theme galleries on a small screen. */
.exhibition-page { --exhibition-header: 62px; --exhibition-footer: 58px; background: #071123; }
.exhibition-page::before { display: none; }
.exhibition-page .site-header { position: sticky; top: 0; z-index: 30; background: #081225; border-color: #243247; }
.exhibition-page .header-inner { width: min(1540px, calc(100% - 48px)); min-height: var(--exhibition-header); gap: 22px; }
.exhibition-page .brand { gap: 10px; flex-shrink: 0; }
.exhibition-page .brand-mark { width: 25px; height: 25px; }
.exhibition-page .brand-wordmark { font-size: 23px; }
.exhibition-page .brand-year { font-size: 17px; }
.exhibition-page .brand-caption { font-size: 11px; font-weight: 500; color: #d1d9e5; }
.exhibition-page .brand-divider { height: 18px; margin-inline: 3px; }
.exhibition-page .header-link { margin-left: auto; font-size: 11px; }
.exhibition { position: relative; width: 100%; }
.exhibition-view-switch { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid #2c3c51; border-radius: 7px; background: #101b2c; flex-shrink: 0; }
.exhibition-view-switch button { display: inline-flex; justify-content: center; align-items: center; gap: 6px; min-height: 32px; padding: 5px 10px; border: 0; border-radius: 4px; background: transparent; color: #93a5bd; font-size: 11px; font-weight: 500; white-space: nowrap; }
.exhibition-view-switch button[aria-pressed="true"] { background: #26364a; color: #eff6e7; }
.exhibition-view-switch button:hover { color: #f2f7e7; }
.exhibition-view-switch svg { width: 13px; height: 13px; }
.map-status { color: #7f94ae; font-size: 11px; line-height: 1.5; white-space: nowrap; }
.map-mobile-caption { display: none; }
.map-viewport { position: relative; display: grid; place-items: center; width: 100%; height: min(50vw, calc(100svh - var(--exhibition-header) - var(--exhibition-footer))); min-height: 0; overflow: clip; background: #071321 url("assets/scene/acc-world-surround.webp") center center / cover no-repeat; isolation: isolate; }
.map-viewport::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #06122436, transparent 22%, transparent 78%, #06122436); pointer-events: none; }
.map-viewport:focus-visible { outline-offset: -3px; }
.exhibition-map { position: relative; width: min(100%, calc((100svh - var(--exhibition-header) - var(--exhibition-footer)) * 2)); margin-inline: auto; aspect-ratio: 2 / 1; container-type: inline-size; isolation: isolate; overflow: visible; }
.exhibition-scene { position: absolute; z-index: 0; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: fill; user-select: none; -webkit-user-drag: none; pointer-events: none; mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent); }
.mobile-scenery { display: none; }
.map-event-meta { position: absolute; z-index: 1; right: 2.5%; top: 1.6%; color: #f3f4fc; font-size: .88cqw; font-weight: 500; line-height: 1.5; letter-spacing: .005em; text-shadow: 0 .05cqw .2cqw #000; white-space: nowrap; pointer-events: none; }
.map-event-meta > span { margin-inline: .55cqw; color: #e1dfed; }
.map-masthead { position: absolute; z-index: 1; top: 4.15%; left: 18.1%; width: 65.6%; text-align: center; pointer-events: none; }
.map-masthead h1 { display: flex; align-items: center; justify-content: center; gap: 1.3cqw; width: 100%; color: #f5fbff; font-weight: 900; line-height: 1.03; letter-spacing: -.045em; white-space: nowrap; }
.map-acc-logo { display: inline-flex; align-items: baseline; gap: .1cqw; font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif; font-size: 6.4cqw; font-style: italic; font-weight: 950; color: #edff26; letter-spacing: -.065em; transform: skew(-4deg); text-shadow: .07cqw .06cqw 0 #b6bd13, .17cqw .16cqw 0 #465215, 0 0 .7cqw #b5cf2e3b; }
.map-acc-logo > span { font-size: 5.75cqw; color: #f2f5ff; letter-spacing: -.065em; text-shadow: .07cqw .08cqw 0 #b6ceff, .17cqw .2cqw 0 #284c94, 0 0 .6cqw #719dff65; }
.map-event-title { display: inline-flex; align-items: center; color: #f6fbff; font-size: 3.12cqw; font-style: italic; letter-spacing: -.045em; text-shadow: .06cqw .08cqw 0 #89b5e9, .13cqw .16cqw 0 #164580, 0 0 .7cqw #3779d9b3; }
.map-title-divider { margin-inline: .45cqw; font-size: 2.8cqw; font-style: normal; font-weight: 500; color: #c6fff9; text-shadow: 0 0 .4cqw #31d6ff; }
.map-premiere { color: #f6f5ff; text-shadow: .05cqw .08cqw 0 #dcadff, .12cqw .16cqw 0 #5e2782, 0 0 .7cqw #9f5de6; }
.map-slogan { display: flex; align-items: center; justify-content: center; gap: 2cqw; position: absolute; top: 5.4cqw; left: 5%; width: 90%; color: #c0f9ff; font-size: 2.13cqw; line-height: 1.25; font-weight: 850; font-style: italic; letter-spacing: .07em; text-shadow: .04cqw .08cqw 0 #4e84a0, .12cqw .13cqw 0 #183b5d, 0 0 .6cqw #55bbdf7a; }
.map-chevrons { font-family: Arial, sans-serif; font-size: 2.2cqw; color: #408dff; letter-spacing: -.28em; transform: scaleX(1.3); text-shadow: .05cqw .08cqw 0 #1b3b71, 0 0 .6cqw #1464ee66; }
.map-chevrons:last-child { color: #bd68e2; text-shadow: .05cqw .08cqw 0 #452473, 0 0 .6cqw #814af766; }

.island-layer { position: absolute; z-index: 2; inset: 0; overflow: visible; }
.map-island { position: absolute; left: var(--island-x); top: var(--island-y); width: var(--island-w); height: 17.6%; z-index: 1; color: var(--island-color, #cefa62); overflow: visible; scroll-margin-top: 22px; }
.map-island:hover, .map-island:focus-within { z-index: 20; }
.island-label { display: flex; align-items: baseline; gap: .6cqw; position: absolute; left: 17%; bottom: calc(100% + .55cqw); width: 85%; margin: 0; color: var(--island-color, #cefa62); font-size: 1.73cqw; font-weight: 850; line-height: 1.25; letter-spacing: -.04em; white-space: nowrap; text-shadow: .04cqw .06cqw 0 #172933, 0 0 .24cqw #071321, 0 0 .5cqw color-mix(in srgb, var(--island-color, #cefa62) 60%, transparent); }
.island-note { color: #f4f7ee; font-size: 1cqw; font-weight: 600; letter-spacing: -.025em; text-shadow: 0 .05cqw .12cqw #000, 0 0 .2cqw #000; }
.island-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: .32cqw; position: relative; isolation: isolate; width: 100%; height: 100%; min-height: 0; overflow: visible; }
.map-island { --island-frame-color: var(--island-color, #cefa62); }
.map-island[data-island="3"] { --island-frame-color: #f5ba4c; }
.map-island[data-island="5"] { --island-frame-color: #f5bf53; }
/* The live panel masks generated frame variation and always fits the six cards. */
.island-cards::before { content: ""; position: absolute; inset: -.45cqw; z-index: -1; pointer-events: none; border: .09cqw solid color-mix(in srgb, var(--island-frame-color) 78%, #fff); border-radius: .55cqw; background: linear-gradient(150deg, color-mix(in srgb, var(--island-frame-color) 22%, #081627), color-mix(in srgb, var(--island-frame-color) 7%, #091423)); box-shadow: 0 0 .2cqw var(--island-frame-color), inset 0 0 .45cqw color-mix(in srgb, var(--island-frame-color) 25%, transparent), 0 .2cqw .45cqw #0008; }
.map-card { display: flex; flex-direction: column; position: relative; min-width: 0; min-height: 0; width: 100%; height: 100%; margin: 0; padding: .14cqw; border: .065cqw solid #d8e5df; border-radius: .4cqw; background: #102339; color: #eef8ec; text-align: left; box-shadow: 0 0 0 .07cqw color-mix(in srgb, var(--island-color, #cefa62) 75%, #071328), 0 0 .25cqw color-mix(in srgb, var(--island-color, #cefa62) 45%, transparent); transition: transform .18s, box-shadow .18s; overflow: hidden; -webkit-font-smoothing: antialiased; }
button.map-card { cursor: pointer; }
.map-card-media { display: grid; place-items: center; position: relative; flex: 1 1 80%; width: 100%; min-height: 0; overflow: hidden; border-radius: .2cqw .2cqw 0 0; background: #142131; }
.map-card-media img { width: 100%; height: 100%; object-fit: contain; }
.map-glyph { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(ellipse at 30% 15%, color-mix(in srgb, var(--island-color, #cefa62) 20%, #293d5b), #14273c); color: var(--island-color, #cefa62); font-family: Arial, sans-serif; font-size: 2.2cqw; font-weight: 400; line-height: 1; }
.map-card-info { display: flex; align-items: center; flex: 0 0 20%; min-height: 0; width: 100%; padding: .12cqw .24cqw; background: #ecf0e9; color: #263d37; overflow: hidden; }
.map-card-info h3 { display: block; width: 100%; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(8px, .62cqw, 12px); font-weight: 550; line-height: 1.3; letter-spacing: 0; }
.map-card-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5cqw; border-color: color-mix(in srgb, var(--island-color, #cefa62) 48%, #d9e6d9); background: color-mix(in srgb, var(--island-color, #cefa62) 9%, #102137); color: #b8c9ce; box-shadow: 0 0 .2cqw color-mix(in srgb, var(--island-color, #cefa62) 30%, transparent); font-size: .5cqw; text-align: center; cursor: default; }
.map-empty-plus { display: block; color: color-mix(in srgb, var(--island-color, #cefa62) 60%, white); font-family: Arial, sans-serif; font-size: 1.6cqw; font-weight: 200; line-height: 1; opacity: .6; }
.map-card-empty > p, .map-card-empty > span:not(.map-empty-plus) { padding-inline: .2cqw; font-size: .45cqw; line-height: 1.5; }
.map-card:focus-visible { z-index: 30; outline: 2px solid #fff; outline-offset: 2px; transform: translateY(-3px); box-shadow: 0 5px 18px #0009; }
.map-island.is-active .island-label { filter: brightness(1.25); }
.map-island.is-active .island-cards { outline: 1px solid color-mix(in srgb, var(--island-color) 65%, transparent); outline-offset: 5px; border-radius: 4px; }
.map-below { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: min(1540px, calc(100% - 48px)); height: var(--exhibition-footer); padding-block: 9px; }
.map-help { display: flex; align-items: center; gap: 6px; color: #87a0bc; font-size: 10px; white-space: nowrap; }
.map-help svg { width: 15px; height: 15px; }
.map-help-mobile { display: none; }
.map-quick-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.map-quick-nav:empty { display: none; }
.map-quick-nav button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 32px; padding: 6px 10px; border: 1px solid #283b52; border-radius: 5px; background: #0e1d31; color: #a8bfd4; font-size: 10px; line-height: 1.4; white-space: nowrap; }
.map-quick-nav button::before { content: ""; width: 4px; height: 4px; background: var(--island-color, #b3d784); border-radius: 1px; }
.map-quick-nav button:hover, .map-quick-nav button[aria-pressed="true"], .map-quick-nav button.active { border-color: var(--island-color, #9abf74); color: #e5f3df; background: #1a2c3d; }
.map-quick-nav button > span { opacity: .65; font-size: 9px; }
.exhibition-page .gallery { margin-top: 13px; padding-top: 29px; }
.exhibition-page .work-card { border-radius: 7px; background: #101c2b; }
.exhibition-page .card-media { aspect-ratio: 21 / 9; background: #142131; }
.exhibition-page .card-media img { object-fit: contain; }
.exhibition-page .work-card:hover .card-media img { transform: none; }
.exhibition-page .card-body { justify-content: center; min-height: 62px; padding: 11px 15px; }
.exhibition-page .card-title { font-size: 14px; line-height: 1.45; font-weight: 550; }

/* The pointer preview carries the information omitted from poster cards. */
.map-card-preview { position: fixed; z-index: 90; width: 440px; max-width: calc(100vw - 28px); padding: 12px; border: 1px solid #d2ddd6; border-radius: 7px; background: #f4f4ed; color: #183832; box-shadow: 0 12px 45px #0008; pointer-events: none; }
.map-card-preview img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: contain; border-radius: 3px; margin-bottom: 10px; background: #e7ebe5; }
.map-card-preview h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.45; margin-bottom: 6px; }
.map-card-preview p { color: #52635d; font-size: 11px; line-height: 1.65; }
.map-card-preview > p:not(.preview-meta):not(.preview-cta) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.map-card-preview .preview-meta { color: #37604b; font-size: 10px; line-height: 1.55; margin-bottom: 7px; }
.map-card-preview .preview-cta { margin-top: 9px; padding-top: 8px; border-top: 1px solid #d6ded4; color: #244b3a; font-size: 10px; font-weight: 550; }
.map-card-preview[hidden] { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  button.map-card:hover { z-index: 30; transform: translateY(-3px); border-color: #fff; box-shadow: 0 0 0 1px #fff, 0 6px 18px #0009; }
}
@media (max-width: 1150px) {
  .exhibition-page .header-inner { gap: 15px; }
  .exhibition-page .brand-caption, .exhibition-page .brand-divider { display: none; }
  .map-below { gap: 10px; }
  .map-help { font-size: 9px; }
  .map-quick-nav { gap: 4px; }
  .map-quick-nav button { padding-inline: 7px; }
}
@media (max-width: 1100px) {
  .exhibition-page { --exhibition-header: 56px; }
  .exhibition-page .header-inner { width: calc(100% - 28px); gap: 12px; }
  .exhibition-page .brand { gap: 7px; }
  .exhibition-page .brand-wordmark { font-size: 21px; }
  .exhibition-page .brand-year { font-size: 15px; }
  .exhibition-page .brand-mark { width: 22px; height: 22px; }
  .exhibition-page .header-link { font-size: 10px; padding-left: 0; }
  .map-status { display: none; }
  .exhibition { display: flex; flex-direction: column; }
  .map-mobile-caption { order: 0; display: block; width: calc(100% - 36px); padding-block: 19px 8px; }
  .map-mobile-caption > p { color: #eaf3dd; font-size: 15px; font-weight: 650; letter-spacing: -.02em; }
  .map-mobile-caption > p > span { color: #b3c2d8; margin-left: 7px; font-size: 12px; font-weight: 500; }
  .map-mobile-caption > span { display: block; margin-top: 5px; color: #8fa6c2; font-size: 11px; }
  .map-below { order: 1; flex-direction: column; align-items: stretch; height: auto; width: calc(100% - 36px); gap: 8px; padding-block: 10px 18px; }
  .map-help { display: none; }
  .map-quick-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; width: 100%; margin: 0; }
  .map-quick-nav button { min-width: 0; min-height: 38px; padding: 7px 5px; font-size: 11px; border-radius: 5px; }
  .map-viewport { order: 2; display: block; height: auto; overflow: visible; background: #081323; }
  .map-viewport::before { display: none; }
  .exhibition-map { width: 100%; aspect-ratio: auto; }
  .exhibition-scene { display: none; }
  /* Crop the added forest and waterfall scenery, outside the six empty panels. */
  .mobile-scenery { display: block; width: 100%; height: 34vw; background: url("assets/scene/acc-world-surround.webp") left 58% / 500% auto no-repeat; mask-image: linear-gradient(transparent, #000 10%, #000 78%, transparent); pointer-events: none; }
  .map-event-meta { display: none; }
  .map-masthead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .island-layer { position: relative; inset: auto; padding: 12px 18px 24px; }
  .map-island { position: relative; inset: auto; width: 100%; height: auto; margin: 0 0 30px; padding: 17px 14px 14px; border: 1px solid color-mix(in srgb, var(--island-color) 25%, #213044); border-radius: 9px; background: linear-gradient(150deg, color-mix(in srgb, var(--island-color) 6%, #142035), #101b2d); scroll-margin-top: 18px; }
  .map-island:last-child { margin-bottom: 0; }
  .island-label { position: static; flex-wrap: wrap; gap: 5px 12px; width: 100%; margin-bottom: 15px; font-size: 21px; line-height: 1.3; letter-spacing: -.03em; white-space: normal; text-shadow: none; }
  .island-note { width: 100%; font-size: 11px; color: #a8b9c8; font-weight: 400; letter-spacing: 0; text-shadow: none; }
  .island-cards { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: 1fr; gap: 12px; height: auto; }
  .island-cards::before { display: none; }
  .map-card { height: auto; aspect-ratio: auto; padding: 2px; border: 1px solid #becdc7; border-radius: 5px; box-shadow: none; }
  .map-card-media { flex: none; aspect-ratio: 21 / 9; border-radius: 3px 3px 0 0; }
  .map-card-info { flex: none; min-height: 32px; padding: 7px 8px; }
  .map-card-info h3 { display: block; white-space: nowrap; font-size: 12px; line-height: 1.2; letter-spacing: 0; }
  .map-glyph { font-size: 36px; }
  .map-card-empty { aspect-ratio: auto; height: 100%; min-height: 120px; gap: 12px; border-color: #526574; background: #ffffff06; }
  .map-empty-plus { font-size: 31px; }
  .map-card-empty > p, .map-card-empty > span:not(.map-empty-plus) { padding-inline: 8px; font-size: 10px; line-height: 1.5; }
  .map-card-preview { display: none !important; }
  .map-island.is-active .island-cards { outline: 0; }
  .map-island.is-active { border-color: var(--island-color); }
  .exhibition-page .gallery { margin-top: 0; padding-top: 24px; }
}
@media (max-width: 500px) {
  .exhibition-page .header-inner { gap: 8px; width: calc(100% - 24px); }
  .exhibition-page .brand-mark { display: none; }
  .exhibition-page .brand-wordmark { font-size: 19px; }
  .exhibition-page .brand-year { font-size: 14px; margin-left: 3px; }
  .exhibition-view-switch { margin-left: auto; gap: 0; padding: 2px; }
  .exhibition-view-switch button { gap: 0; min-height: 34px; padding: 6px 8px; font-size: 10px; }
  .exhibition-view-switch svg { display: none; }
  .exhibition-page .header-link { gap: 0; margin-left: 0; font-size: 10px; }
  .exhibition-page .header-link svg { display: none; }
}
@media (min-width: 600px) and (max-width: 1100px) {
  .island-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .map-card { aspect-ratio: auto; }
  .map-card-info h3 { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .map-card { transition: none; }
}
@media print {
  .map-below, .map-mobile-caption { display: none; }
  .map-viewport { height: auto; max-height: none; overflow: visible; border: 0; background: none; }
  .exhibition-map { width: 100% !important; }
  .exhibition { break-inside: avoid; }
}
.map-viewport, .gallery { scroll-margin-top: 72px; }
@media (max-width: 1100px) {
 .map-island { scroll-margin-top: 74px; }
 .map-quick-nav button { min-height: 44px; }
 .exhibition-view-switch button { min-height: 40px; }
}

/* Six equal exhibition cards fill two complete rows of three. */
@media (min-width: 1101px) {
  .island-label { left: 22%; width: 78%; gap: .55cqw; }
  .map-island[data-island="1"] .island-label, .map-island[data-island="4"] .island-label { left: 26%; width: 74%; }
  .map-island[data-island="2"] .island-note { font-size: .85cqw; }
  .island-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .island-cards > .map-card { grid-column: auto; grid-row: auto; }
}


/* ===== interaction.css ===== */
/* Desktop keeps its floating dock; mobile owns an independent footer row. */
.interaction-flow-lane { display: none; }
.work-dialog > .work-interaction {
  position: absolute; z-index: 16;
  right: calc(var(--rail-width) + var(--stage-gap) + 18px); bottom: 18px;
  width: max-content; max-width: calc(100% - 32px); height: 46px;
  color: #425747; color-scheme: light; pointer-events: none;
}
.work-interaction [hidden] { display: none !important; }
.work-dialog:has(> .work-interaction) .detail-sheet { padding-bottom: 92px; }
.work-dialog:has(> .work-interaction) .detail-nav { padding-right: 160px; }
.interaction-dock {
  position: relative; z-index: 3; display: flex; align-items: center; gap: 2px;
  height: 46px; padding: 2px; border: 1px solid #d7ddcf; border-radius: 24px;
  background: #fcfcf6f5; box-shadow: 0 4px 18px #30412d15; pointer-events: auto;
  backdrop-filter: blur(12px); overflow: visible;
}
.work-interaction button { font-family: inherit; cursor: pointer; }
.work-interaction button:disabled { cursor: default; }
.work-interaction button:focus-visible { outline: 2px solid #8ba772; outline-offset: 3px; }
.reaction-button {
  position: relative; display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; min-width: 40px; max-width: 40px; min-height: 40px; max-height: 40px; aspect-ratio: 1;
  padding: 3px; border: 0; border-radius: 50%; background: transparent; color: #658454;
  transition: background .18s; overflow: visible;
}
.reaction-button:hover { background: #ecf0e4; }
.reaction-button.is-reacted { background: #f9e1ec; }
.reaction-heart { display: block; width: 26px; height: 26px; fill: none; stroke: #879b8d; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; transition: fill .18s, stroke .18s; }
.reaction-button.is-reacted .reaction-heart { fill: #e54260; stroke: #e54260; }
.reaction-art { display: grid; place-items: center; width: 30px; height: 30px; font-size: 25px; line-height: 1; }
.interaction-comment-button {
  display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 12px 8px 9px;
  border: 0; border-left: 1px solid #e4e7dc; border-radius: 0 20px 20px 0;
  background: transparent; color: #5b6e54; font-size: 11px; line-height: 1.5;
}
.interaction-comment-button:hover, .interaction-comment-button[aria-expanded="true"] { background: #eef2e7; }
.interaction-comment-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.interaction-unread-dot { display: none; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #96ac7e; }
.has-messages .interaction-unread-dot { display: inline-block; }
.interaction-dismiss-layer { position: fixed; z-index: 0; inset: 0; pointer-events: auto; background: transparent; cursor: default; }
.interaction-panel {
  position: absolute; z-index: 4; right: 0; bottom: 56px; width: 340px; max-width: calc(100vw - 32px);
  max-height: min(430px,calc(var(--interaction-available-height,100dvh) - 98px));
  display: flex; flex-direction: column; overflow: hidden; padding: 40px 14px 14px;
  border: 1px solid #d4ddcc; border-radius: 13px; background: #fafbf5;
  box-shadow: 0 15px 54px #18301e26,0 2px 8px #18301e0d; pointer-events: auto; overflow-wrap: anywhere;
}
.interaction-panel-close { position: absolute; top: 1px; right: 3px; display: grid; place-items: center; width: 40px; height: 38px; padding: 0; border: 0; border-radius: 50%; color: #8e9f83; background: none; font-size: 23px; font-weight: 300; line-height: 1; }
.interaction-panel-close:hover { background: #eaf0e1; color: #4d7048; }
.interaction-form { min-height: 0; margin: 0; padding: 2px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c4cfb7 transparent; }
.work-dialog .interaction-form textarea { display: block; width: 100%; min-height: 80px; max-height: 145px; padding: 10px 11px; resize: vertical; border: 1px solid #d4ddca; border-radius: 7px; background: #fffef9; color: #4c6144; font: inherit; font-size: 13px; line-height: 1.65; box-shadow: none; }
.interaction-form textarea::placeholder { color: #8c9b81; }
.interaction-form textarea:focus { outline: 2px solid #c4d1b4; outline-offset: 1px; border-color: #a5b991; }
.interaction-suggestions { display: flex; flex-direction: column; align-items: stretch; gap: 5px; margin: 9px 0; }
.interaction-suggestions button { min-height: 36px; padding: 7px 10px; border: 1px solid #dce5d2; border-radius: 7px; background: #f2f6eb; color: #63795a; font-size: 12px; line-height: 1.5; text-align: left; }
.interaction-suggestions button:hover { border-color: #bacbad; background: #e8f1df; color: #456138; }
.interaction-form [data-interaction-send] { display: block; margin-left: auto; min-width: 68px; min-height: 40px; padding: 8px 16px; border: 1px solid #6d875b; border-radius: 7px; background: #6d875b; color: #fff; font-size: 12px; font-weight: 500; }
.interaction-form [data-interaction-send]:hover { background: #7d986a; }
.interaction-form [data-interaction-send]:disabled { border-color: #e1e7d7; background: #e1e7d7; color: #a6b09b; }
.interaction-source-note { margin: 10px 0 0; color: #64755c; font-size: 11px; line-height: 1.6; }
.interaction-status { margin: 7px 0 0; color: #a05e42; font-size: 11px; line-height: 1.6; }
.interaction-status:empty { display: none; }
.interaction-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.work-dialog > .interaction-effects { position: fixed; z-index: 2147483647; inset: 0; overflow: visible; pointer-events: none; user-select: none; }
.interaction-effects, .interaction-effects * { pointer-events: none !important; }
.reaction-particle { position: absolute; z-index: 5; left: calc(50% - 12px); top: -12px; width: 24px; height: 24px; font-size: 23px; line-height: 1; pointer-events: none; user-select: none; opacity: var(--particle-opacity,.6); animation: acc-reaction-float 2.2s ease-out both; animation-delay: var(--delay,0ms); }
@keyframes acc-reaction-float { 0% { opacity: var(--particle-opacity,.6); transform: translate(0,0) scale(calc(.8 * var(--particle-scale,1))); } 65% { opacity: calc(var(--particle-opacity,.6) * .55); } 100% { opacity: 0; transform: translate(var(--drift),calc(-1 * var(--rise))) rotate(var(--turn)) scale(calc(1.08 * var(--particle-scale,1))); } }
.interaction-message-float { position: absolute; z-index: 6; width: max-content; max-width: calc(100vw - 24px); margin: 0; padding: 5px 10px; border: 1px solid #d4dfca; border-radius: 16px 16px 2px 16px; background: #f6faef; box-shadow: 0 8px 28px #1c331c20; color: #416038; font-size: 12px; line-height: 18px; white-space: pre-wrap; overflow-wrap: anywhere; pointer-events: none; animation: acc-message-float 6s ease-out both; }
@keyframes acc-message-float { 0% { opacity: 0; transform: translateY(0); } 8%,80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px); } }
.interaction-praise-float { position: absolute; z-index: 5; width: 214px; max-width: calc(100vw - 24px); margin: 0; padding: 5px 10px; border: 1px solid #d1dfcc; border-radius: 13px 13px 3px 13px; background: #f4faeff0; box-shadow: 0 4px 18px #1b38191c; color: #47613e; font-size: 12px; line-height: 18px; overflow-wrap: anywhere; pointer-events: none; user-select: none; animation: acc-praise-float 4s ease-out both; }
.interaction-praise-text { color: inherit; }
.interaction-praise-float, .interaction-message-float { box-sizing: border-box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 48px; overflow: hidden; }
@keyframes acc-praise-float { 0% { opacity: 0; transform: translateY(0); } 12%,70% { opacity: .88; } 100% { opacity: 0; transform: translateY(-18px); } }
@media (max-width: 800px) {
  .detail-mobile-praise-slot .work-interaction.is-flow {
    position: relative; display: flex; flex-direction: column; align-items: flex-end;
    width: 100%; max-width: none; height: 70px; min-height: 70px; margin: 0;
    padding: 3px 4px; right: auto; bottom: auto; color: #425747;
    pointer-events: none; overflow: hidden; isolation: isolate;
  }
  .work-interaction.is-flow .interaction-flow-lane { position: absolute; display: block; top: 3px; left: 4px; width: calc(100% - 132px); height: 64px; pointer-events: none; }
  .work-interaction.is-flow .interaction-dock { flex: 0 0 46px; width: max-content; max-width: 124px; margin-top: auto; }
  .work-interaction.is-flow .interaction-dismiss-layer { display: none; }
  .detail-mobile-praise-slot .work-interaction.is-panel-open { height: auto; min-height: 0; padding-block: 4px; }
  .work-interaction.is-flow.is-panel-open .interaction-flow-lane, .work-interaction.is-flow.is-panel-open .interaction-dock { display: none; }
  .work-interaction.is-flow .interaction-panel {
    position: relative; flex: 0 1 auto; width: 100%; max-width: none;
    right: auto; bottom: auto; margin: 0; max-height: var(--interaction-panel-max-height,calc(var(--interaction-available-height,100dvh) - 186px));
    box-shadow: 0 3px 12px #18301e16;
  }
  .work-interaction.is-flow .interaction-praise-float, .work-interaction.is-flow .interaction-message-float { padding: 3px 8px; font-size: 11px; line-height: 16px; max-height: 40px; }
  .interaction-comment-button { min-height: 40px; padding-right: 13px; font-size: 12px; }
  .interaction-comment-button svg { width: 17px; height: 17px; }
  .interaction-panel { width: min(340px,calc(100vw - 32px)); max-width: none; bottom: 57px; border-radius: 14px; }
  .interaction-panel-close { min-width: 44px; min-height: 40px; }
  .work-dialog .interaction-form textarea { font-size: 16px; }
  .interaction-suggestions button { min-height: 40px; font-size: 12px; }
  .interaction-form [data-interaction-send] { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .reaction-button, .reaction-heart { transition: none; } .reaction-particle { display: none; animation: none; } .interaction-message-float { animation: none; } .interaction-praise-float { display: none; animation: none; } }

/* 共享互动：点赞总数角标与留言列表 */
.reaction-count {
  position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: #e54260; color: #fff; font-size: 9px; font-weight: 600;
  line-height: 16px; text-align: center; box-shadow: 0 1px 3px #00000022; pointer-events: none;
}
.interaction-messages {
  margin: 0 0 10px; padding: 0 0 8px; max-height: 168px; overflow-y: auto; overscroll-behavior: contain;
  border-bottom: 1px solid #e6ebde; scrollbar-width: thin; scrollbar-color: #c4cfb7 transparent;
}
.interaction-messages-title { margin: 0 0 7px; color: #6b7f60; font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.interaction-message-row { margin-bottom: 5px; padding: 7px 9px; border-radius: 7px; background: #f2f6eb; }
.interaction-message-row:last-child { margin-bottom: 0; }
.interaction-message-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.interaction-message-author { color: #5b7350; font-size: 11px; font-weight: 500; }
.interaction-message-remove { padding: 2px 5px; border: 0; border-radius: 4px; background: none; color: #a08b72; font-size: 10px; line-height: 1.4; }
.interaction-message-remove:hover { background: #e8ddcf; color: #8a5a3a; }
.interaction-message-text { margin: 0; color: #4c6144; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
@media (max-width: 800px) {
  .interaction-messages { max-height: 132px; }
  .interaction-message-text { font-size: 13px; }
}


/* ===== world-life.css ===== */
/* A separate, non-interactive layer between the landscape and the work cards. */
.wl-environment { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; user-select: none; }
.wl-star { position: absolute; left: var(--wl-x); top: var(--wl-y); width: .15cqw; height: .15cqw; min-width: 2px; min-height: 2px; border-radius: 50%; color: #c6efff; background: currentColor; opacity: .18; box-shadow: 0 0 .3cqw currentColor; animation: wl-starlight var(--wl-cycle, 6s) ease-in-out var(--wl-delay, 0s) infinite; }
.wl-star:nth-child(3n)::before { content: ""; position: absolute; inset: -130% 32%; background: currentColor; opacity: .6; }
.wl-star:nth-child(3n)::after { content: ""; position: absolute; inset: 32% -130%; background: currentColor; opacity: .6; }
.wl-meteor { position: absolute; left: 92%; top: 8%; width: 6cqw; height: .09cqw; min-height: 1px; border-radius: 50%; opacity: 0; background: linear-gradient(90deg, #e2fbff, #80d7ff60 24%, transparent); transform: rotate(-28deg); transform-origin: left center; animation: wl-meteor-pass 27s linear 9s infinite; }
.wl-routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wl-road-light { fill: none; stroke: #b4ecff; stroke-width: 1.35; stroke-linecap: round; stroke-dasharray: 16 984; opacity: 0; filter: drop-shadow(0 0 2px #65cfff); animation: wl-road-pass 24s linear infinite; }
.wl-road-right { stroke: #dfc4ff; filter: drop-shadow(0 0 2px #a78bff); animation-duration: 31s; animation-delay: -11s; }
.wl-environment.is-paused *, .wl-motion-suspended .wl-theme-effect, .wl-motion-suspended .wl-theme-effect *, .wl-motion-suspended .wl-theme-effect::before { animation-play-state: paused !important; }

/* The semantic h2 text stays intact; its transparent button includes the icon area. */
.wl-interactive-title { isolation: isolate; }
.wl-title-trigger { position: absolute; z-index: 4; inset: -.22cqw -.2cqw -.24cqw -28%; padding: 0; border: 0; border-radius: .35cqw; background: transparent; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wl-title-trigger:focus-visible { outline: 2px solid #efffff; outline-offset: 3px; box-shadow: 0 0 0 5px #061725b3; }
.wl-interactive-title > span:first-child { transition: filter .18s; }
.wl-interactive-title:hover > span:first-child, .wl-interactive-title:focus-within > span:first-child { filter: brightness(1.16); }
.wl-theme-effect { position: absolute; z-index: 3; right: calc(100% + .35cqw); bottom: -.18cqw; width: 3.3cqw; height: 3.3cqw; color: var(--island-color, #b9f86a); opacity: 0; pointer-events: none; transform-origin: center; filter: drop-shadow(0 0 .16cqw currentColor); }
.wl-theme-effect svg { position: relative; z-index: 1; overflow: visible; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* The scene's illustrated logo and title/frame remain in place. These temporary
   shapes echo each logo in its existing icon area, without moving live text. */
.wl-theme-effect::before { content: ""; position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, currentColor 46%, transparent), color-mix(in srgb, currentColor 8%, transparent) 55%, transparent 72%); opacity: 0; }
.wl-theme-ring { position: absolute; inset: -12%; border: max(1px, .085cqw) solid currentColor; border-radius: 50%; opacity: 0; box-shadow: 0 0 .32cqw currentColor, inset 0 0 .2cqw currentColor; }
.wl-pixel-spark { position: absolute; z-index: 2; width: .23cqw; height: .23cqw; min-width: 3px; min-height: 3px; opacity: 0; background: currentColor; box-shadow: .22cqw 0 0 color-mix(in srgb, currentColor 45%, transparent); }
.wl-pixel-a { left: 0; top: 2%; --wl-dx: -.95cqw; --wl-dy: -.75cqw; }
.wl-pixel-b { right: 1%; top: 22%; --wl-dx: .9cqw; --wl-dy: -.5cqw; }
.wl-pixel-c { left: 26%; bottom: 0; --wl-dx: -.45cqw; --wl-dy: .7cqw; }
.wl-theme-effect[data-wl-theme="0"] { color: #ffb8de; }
.wl-theme-effect[data-wl-theme="1"] { color: #93e7ff; }
.wl-theme-effect[data-wl-theme="2"] { color: #d8b5ff; }
.wl-theme-effect[data-wl-theme="3"] { color: #ffe8a8; }
.wl-theme-effect[data-wl-theme="5"] { color: #ffd987; }
.is-wl-replied .wl-theme-effect { animation: wl-theme-reply 2s ease-out both; }
.is-wl-replied .wl-theme-effect::before { animation: wl-halo-reply 2s ease-out both; }
.is-wl-replied .wl-theme-ring { animation: wl-ring-reply 2s cubic-bezier(.16,.7,.3,1) both; }
.is-wl-replied .wl-pixel-spark { animation: wl-pixel-reply 2s ease-out both; }
.is-wl-replied .wl-pixel-b { animation-delay: .08s; }
.is-wl-replied .wl-pixel-c { animation-delay: .14s; }
.wl-theme-effect[data-wl-theme="0"] .wl-theme-ring { border-radius: 38% 42% 45% 42%; transform: rotate(-20deg); }
.wl-theme-effect[data-wl-theme="2"] .wl-theme-ring { border-radius: 22%; }
.wl-theme-effect[data-wl-theme="3"] .wl-theme-ring { border-style: dashed; }
.wl-theme-effect[data-wl-theme="4"] .wl-theme-ring { border-radius: 30%; }
.wl-theme-effect[data-wl-theme="5"] .wl-theme-ring { inset: -18% 0; border-radius: 40%; }
.is-wl-replied .wl-theme-effect[data-wl-theme="0"] .wl-motif-main { transform-origin: center; animation: wl-heart-reply 2s ease-out; }
.is-wl-replied .wl-theme-effect[data-wl-theme="1"] .wl-motif-lights { animation: wl-window-reply 2s ease-out; }
.is-wl-replied .wl-theme-effect[data-wl-theme="2"] .wl-motif-main { transform-origin: center; animation: wl-key-reply 2s ease-out; }
.is-wl-replied .wl-motif-bubbles circle { animation: wl-bubble-reply 2s ease-out both; }
.is-wl-replied .wl-motif-bubbles circle:nth-child(2) { animation-delay: .08s; }
.is-wl-replied .wl-motif-bubbles circle:nth-child(3) { animation-delay: .14s; }
.is-wl-replied .wl-motif-bubbles circle:nth-child(4) { animation-delay: .19s; }
.is-wl-replied .wl-theme-effect[data-wl-theme="4"] .wl-motif-button { fill: currentColor; animation: wl-game-reply 2s ease-out; }
.is-wl-replied .wl-theme-effect[data-wl-theme="4"] .wl-motif-key { animation: wl-key-reply 2s ease-out; }
.is-wl-replied .wl-theme-effect[data-wl-theme="5"] .wl-motif-main { transform-origin: 24px 8px; animation: wl-lantern-reply 2s ease-out; }
.is-wl-replied .wl-motif-spark { animation: wl-spark-reply 2s ease-out; }

@keyframes wl-starlight { 0%, 100% { opacity: .14; } 50% { opacity: .6; } }
@keyframes wl-meteor-pass { 0%, 81% { opacity: 0; transform: translate(0, 0) rotate(-28deg); } 82% { opacity: .6; } 87%, 100% { opacity: 0; transform: translate(-17cqw, 9cqw) rotate(-28deg); } }
@keyframes wl-road-pass { 0% { opacity: 0; stroke-dashoffset: 0; } 65% { opacity: 0; } 72%, 88% { opacity: .6; } 98%, 100% { opacity: 0; stroke-dashoffset: -1000; } }
@keyframes wl-theme-reply { 0% { opacity: 0; transform: translateY(3px) scale(.84); } 12% { opacity: 1; transform: translateY(-4px) scale(1.13); } 24% { transform: translateY(1px) scale(.98); } 38%, 70% { opacity: 1; transform: translateY(0) scale(1.03); } 86% { opacity: .8; } 100% { opacity: 0; transform: translateY(-2px) scale(1); } }
@keyframes wl-halo-reply { 0%, 100% { opacity: 0; transform: scale(.6); } 18% { opacity: .95; transform: scale(1.08); } 42% { opacity: .55; transform: scale(.97); } 65% { opacity: .8; transform: scale(1.08); } }
@keyframes wl-ring-reply { 0% { opacity: 0; scale: .55; } 18% { opacity: .95; } 65% { opacity: .65; } 100% { opacity: 0; scale: 1.6; } }
@keyframes wl-pixel-reply { 0%, 10% { opacity: 0; transform: translate(0,0) rotate(0); } 25%, 55% { opacity: 1; } 90%, 100% { opacity: 0; transform: translate(var(--wl-dx),var(--wl-dy)) rotate(90deg); } }
@keyframes wl-heart-reply { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.1); } 60% { transform: scale(.98); } }
@keyframes wl-window-reply { 0%, 100% { fill: transparent; } 28%, 75% { fill: #fff5b8; stroke: #fff5b8; } }
@keyframes wl-key-reply { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(2px); } 65% { transform: translateY(-1px); } }
@keyframes wl-bubble-reply { 0% { opacity: 0; transform: translateY(5px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-7px); } }
@keyframes wl-game-reply { 0%, 100% { opacity: .4; } 40%, 70% { opacity: 1; } }
@keyframes wl-lantern-reply { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(5deg); } 60% { transform: rotate(-3deg); } }
@keyframes wl-spark-reply { 0%, 100% { opacity: 0; } 35%, 65% { opacity: .9; } }

@media (max-width: 1100px) {
  .wl-environment { bottom: auto; height: 34vw; }
  .wl-star { width: 2px; height: 2px; opacity: .12; animation-duration: 8s; }
  .wl-star:nth-child(n + 5), .wl-meteor, .wl-routes { display: none; }
  .wl-interactive-title { position: relative; inset: auto; }
  .wl-title-trigger { inset: -5px -4px; min-height: 44px; border-radius: 5px; }
  .wl-theme-effect { right: 0; bottom: 9px; width: 34px; height: 34px; filter: none; }
  .wl-interactive-title .island-note { padding-right: 35px; }
  .is-wl-replied .wl-theme-effect { animation-duration: 2s; }
}

@media (max-width: 600px) {
  /* Do not transform the orbit node: its x/y positioning belongs to the orbit. */
  .wl-mobile-theme .wl-theme-effect { right: 2px; bottom: auto; top: -13px; width: 28px; height: 28px; color: var(--theme-color); filter: drop-shadow(0 0 5px currentColor); }
  .wl-mobile-theme .wl-theme-ring { border-width: 1px; }
  .wl-mobile-theme .wl-pixel-spark { width: 3px; height: 3px; box-shadow: none; }
  .wl-mobile-theme .wl-pixel-a { --wl-dx: -11px; --wl-dy: -8px; }
  .wl-mobile-theme .wl-pixel-b { --wl-dx: 10px; --wl-dy: -6px; }
  .wl-mobile-theme .wl-pixel-c { --wl-dx: -5px; --wl-dy: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .wl-environment *, .wl-theme-effect, .wl-theme-effect *, .wl-theme-effect::before { animation: none !important; }
  .wl-star { opacity: .12; }
  .wl-meteor, .wl-routes, .wl-theme-effect { display: none; }
  .wl-interactive-title > span:first-child { transition: none; }
  .is-wl-replied .wl-title-trigger { outline: 1px solid currentColor; outline-offset: 2px; }
}

@media print {
  .wl-environment, .wl-theme-effect, .wl-title-trigger { display: none !important; }
}


/* ===== guide.css ===== */
.adventure-controls { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.adventure-controls button { font-family: inherit; pointer-events: auto; cursor: pointer; }
.adventure-controls button:disabled { opacity: .45; cursor: wait; }
.guide-trigger { position: absolute; left: 1.3%; bottom: 2.5%; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0; border: 0; background: transparent; color: #e8f3eb; }
.guide-trigger > img { width: clamp(46px,4.5cqw,76px); height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 3px 8px #020a22a8); animation: guide-float 4.2s ease-in-out infinite; }
.guide-trigger > span { padding: 5px 10px; border: 1px solid #708b9d; border-radius: 15px; background: #0b1c30ee; font-size: clamp(9px,.72cqw,12px); line-height: 1.5; white-space: nowrap; }
.guide-trigger > span > span { margin-left: 3px; color: #c4ee84; }
.guide-trigger:hover > span { border-color: #c4ee84; color: #fff; }
.discovery-portal { position: absolute; left: 43.2%; top: 80.4%; width: 13.6%; height: 18.8%; padding: 0; border: 0; border-radius: 50% 50% 8px 8px; background: transparent; color: #e0ffff; }
.discovery-portal > svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: #a6f6ff; stroke-width: 1.5; filter: drop-shadow(0 0 3px #58d8ff); animation: portal-breathe 4.8s ease-in-out infinite; pointer-events: none; }
.discovery-portal > span { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: block; padding: 5px 10px; border: 1px solid #79bec7; border-radius: 15px; background: #082637f0; font-size: clamp(9px,.72cqw,12px); line-height: 1.5; white-space: nowrap; }
.discovery-portal:hover > span { background: #124655; border-color: #c6ffff; }
.adventure-controls button:focus-visible { outline: 2px solid #ddff90; outline-offset: 4px; }
.guide-dialog { position: fixed; inset: auto auto 24px max(24px,calc((100vw - 1500px)/2)); width: 414px; max-width: calc(100vw - 32px); max-height: min(640px,calc(100dvh - 48px)); margin: 0; padding: 24px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #cbd6c8; border-radius: 14px; color: #304b3a; color-scheme: light; background: #f7f8ef; box-shadow: 0 18px 70px #00111d4d; scrollbar-width: thin; }
.guide-dialog::backdrop { background: #020c1b85; backdrop-filter: blur(3px); }
.guide-dialog button { font-family: inherit; cursor: pointer; }
.guide-dialog button:focus-visible { outline: 2px solid #69895b; outline-offset: 3px; }
.guide-close { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #7b8c76; font-size: 25px; font-weight: 300; }
.guide-close:hover { background: #e9eee1; }
.guide-heading { display: flex; align-items: center; gap: 11px; padding-right: 14px; margin: 1px 0 20px; }
.guide-heading > img { width: 54px; height: 54px; object-fit: contain; }
.guide-kicker { margin: 0 0 5px; color: #8a9a7f; font-size: 10px; letter-spacing: .04em; }
.guide-dialog #guide-title { margin: 0; color: #30513b; font-size: 21px; line-height: 1.4; font-weight: 600; letter-spacing: -.03em; }
.guide-routes { display: grid; gap: 9px; }
.guide-route { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 77px; padding: 13px 12px; text-align: left; border: 1px solid #d8e1d1; border-radius: 8px; background: #fdfdf7; color: #3b5841; }
.guide-route:hover { border-color: #99b487; background: #f0f5e8; }
.guide-route-mark { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 34px; color: #88a26d; font-size: 26px; }
.guide-route-words { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.guide-route-words strong { font-size: 13px; font-weight: 550; }
.guide-route-words small { color: #8b9980; font-size: 10px; line-height: 1.6; }
.guide-route-arrow { margin-left: auto; color: #99aa8d; font-size: 16px; }
.guide-random { display: block; width: 100%; min-height: 44px; margin-top: 14px; padding: 9px; border: 0; border-top: 1px solid #dbe2d3; border-radius: 0; background: transparent; color: #718964; font-size: 11px; text-align: center; }
.guide-random:hover { color: #2c5739; }
.guide-route-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: -4px 0 14px; color: #96a38a; font-size: 9px; }
.guide-back { padding: 5px 0; min-height: 32px; border: 0; background: transparent; color: #718964; font-size: 11px; }
.guide-recommendations { display: grid; gap: 9px; }
.guide-work { display: grid; grid-template-columns: 108px minmax(0,1fr) 12px; align-items: center; gap: 11px; width: 100%; min-height: 88px; padding: 9px; border: 1px solid #d8e1d1; border-radius: 7px; background: #fdfdf7; color: #3d5c46; text-align: left; }
.guide-work:hover { border-color: #99b487; background: #f0f5e8; }
.guide-work-media { display: grid; place-items: center; width: 108px; aspect-ratio: 21/9; overflow: hidden; border-radius: 3px; background: #e8eee2; color: #829d6f; font-size: 24px; }
.guide-work-media img { width: 100%; height: 100%; object-fit: contain; }
.guide-work-words { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.guide-work-words small { color: #8ba079; font-size: 9px; }
.guide-work-words strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 12px; line-height: 1.5; font-weight: 550; overflow-wrap: anywhere; }
.guide-work-words > span { color: #9aa68f; font-size: 9px; line-height: 1.5; }
.guide-work-arrow { color: #8a9d79; font-size: 12px; }
.guide-announcement:empty { display: none; }
.guide-announcement { margin: 8px 0 0; color: #849377; font-size: 11px; line-height: 1.7; }
@keyframes guide-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes portal-breathe { 0%,100% { opacity: .12; } 50% { opacity: .55; } }
.adventure-controls.is-paused *, body:has(dialog[open]) .adventure-controls * { animation-play-state: paused !important; }
@media (max-width: 1100px) {
  .adventure-controls { position: static; inset: auto; order: 1; z-index: auto; display: flex; gap: 8px; width: calc(100% - 36px); margin: 8px auto 0; }
  .adventure-controls .guide-trigger, .adventure-controls .discovery-portal { position: static; inset: auto; flex: 1; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 6px; min-width: 0; width: auto; height: 46px; padding: 6px 8px; border: 1px solid #2d455b; border-radius: 7px; background: #101f33; color: #d9e8e1; }
  .adventure-controls .guide-trigger > img { width: 30px; height: 30px; animation: none; }
  .adventure-controls .guide-trigger > span, .adventure-controls .discovery-portal > span { position: static; inset: auto; transform: none; padding: 0; border: 0; background: transparent; font-size: 11px; }
  .adventure-controls .discovery-portal > svg { width: 22px; height: 26px; flex-shrink: 0; stroke-width: 3; animation: none; }
  .guide-dialog { inset: auto 14px 14px; width: auto; max-width: none; max-height: min(640px,calc(100dvh - 28px)); padding: 22px 18px 14px; border-radius: 14px; }
  .guide-close { width: 44px; height: 44px; top: 3px; right: 3px; }
  .guide-route { min-height: 80px; }
  .guide-route-words strong { font-size: 14px; }
  .guide-route-words small { font-size: 11px; }
  .guide-back { min-height: 44px; }
}
@media (max-width: 360px) { .guide-work { grid-template-columns: 86px minmax(0,1fr) 9px; gap: 8px; } .guide-work-media { width: 86px; } .guide-route-heading > span { font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { .adventure-controls *, .guide-dialog { animation: none !important; transition: none !important; } }


/* ===== music.css ===== */
/* A quiet soundtrack control; the record turns only while native audio plays. */
.music-control { position: relative; z-index: 40; flex: 0 0 auto; margin-left: auto; }
.exhibition-page .music-control + .header-link { margin-left: 0; }
.music-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0; width: 38px; min-height: 38px; padding: 8px; border: 1px solid #31435b; border-radius: 6px; background: #112035; color: #9aacc5; font: inherit; font-size: 11px; line-height: 1; white-space: nowrap; cursor: pointer; transition: color .18s, border-color .18s, background .18s; }
.music-toggle:hover { color: #e9f4e2; border-color: #718064; background: #1b2e3b; }
.music-toggle:focus-visible { outline: 2px solid #cefa69; outline-offset: 3px; }
.music-icon { width: 17px; height: 17px; overflow: visible; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 50%; animation: music-record-turn 8s linear infinite; animation-play-state: paused; }
.music-off { display: none; stroke: #9aacc5; stroke-width: 2.5; }
.music-control[data-state="off"] .music-off { display: inline; }
.music-play { display: none; fill: currentColor; stroke: #112035; stroke-width: 2; paint-order: stroke fill; }
.music-control[data-state="blocked"] .music-play, .music-control[data-state="loading"] .music-play { display: inline; }
.music-control[data-state="playing"] .music-toggle { color: #d9eea8; border-color: #63784e; background: #23362d; }
.music-control[data-state="playing"] .music-icon { animation-play-state: running; }
.music-control[data-state="paused"] .music-toggle { color: #a6b796; }
.music-control[data-state="blocked"] .music-toggle, .music-control[data-state="loading"] .music-toggle { color: #a6b796; }
.music-control[data-state="error"] .music-toggle { color: #e3b889; border-color: #80654e; }
.music-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; }
.music-context-mute { flex: 0 0 auto; margin-left: auto; padding: 3px 5px; border: 0; border-radius: 3px; background: transparent; color: #667c6d; font: inherit; font-size: 10px; font-weight: 450; line-height: 1.3; letter-spacing: 0; white-space: nowrap; cursor: pointer; }
.music-context-mute::before { content: '♫'; margin-right: 4px; }
.music-context-mute:hover { color: #254b38; background: #dfe7dc; }
.music-context-mute:focus-visible { outline: 2px solid #47705a; outline-offset: 2px; }
.music-context-mute:disabled { opacity: .6; cursor: default; }
.guide-kicker .music-context-mute { margin-left: 8px; color: #627754; }
.guide-kicker .music-context-mute:hover { background: #31503d; color: #e9f3df; }
.music-context-fallback { display: block; margin: 14px 0 0 auto; color: #a8bca8; }
@media (max-width: 800px) {
  .music-control { margin-left: 0; }
  .music-toggle { padding-inline: 7px; }
}
@media (max-width: 500px) {
  .music-toggle { width: 44px; min-height: 44px; padding: 7px; gap: 0; }
}
@media (max-width: 360px) {
  .exhibition-page .header-inner { gap: 6px; }
  .exhibition-view-switch button { padding-inline: 6px; }
}
@keyframes music-record-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .music-toggle { transition: none; } .music-icon { animation: none; } }
@media print { .music-control { display: none !important; } }


/* ===== mobile-explore.css ===== */
/* Phone-only six-planet discovery over its dedicated portrait scene.
   Retired featured-card/selection/event modules are deliberately absent. */
.mobile-explore { display: none; }
.mobile-about-icon { display: none; }
@media (max-width: 600px) {
  .exhibition-page { --mobile-accent: #c8ff77; background: #080f14; }
  .exhibition-page #exhibition { display: none !important; }
  .mobile-explore { display: block; position: relative; isolation: isolate; padding: 25px 18px 0; overflow: clip; background: #071525 url("assets/scene/acc-mobile-world-r15.webp") center center / cover no-repeat; color: #edf4eb; scroll-margin-top: 65px; }
  .mobile-intro { position: relative; z-index: 1; padding-inline: 4px; }
  .mobile-eyebrow { display: none; }

  .mobile-intro h1 { margin-top: 18px; font-size: clamp(31px, 8.3vw, 45px); line-height: 1.3; letter-spacing: -.055em; font-weight: 550; }
  .mobile-intro h1 em { color: var(--mobile-accent); font-style: normal; }
  .mobile-intro-note { margin-top: 13px; color: #92a799; font-size: 11px; line-height: 1.8; }
  .mobile-intro-note > span { color: #d2e5cf; }
  .mobile-orbit-stage { position: relative; width: 100%; height: clamp(350px, 95vw, 440px); margin-top: 9px; isolation: isolate; }
  .mobile-orbit-stage::before { content: none; }
  .mobile-orbit-stage::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, #b4f39b0c, #08132200 60%); }
  .mobile-cosmic-backdrop { position: absolute; z-index: -1; inset: -20px -18px; overflow: hidden; pointer-events: none; mask-image: linear-gradient(transparent, #000 12%, #000 86%, transparent); }
  #mobile-cosmos { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: .51; mix-blend-mode: screen; }
  .mobile-planet { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; transform: translate(-50%, -50%); border: 1px solid #a0e2ad33; border-radius: 50%; background: radial-gradient(circle at 32% 25%, #305b3e77, #112a1d55 35%, #030d0cb8 72%); box-shadow: inset -14px -9px 35px #0008, 0 0 45px #8fea7b15; opacity: .72; }
  .mobile-cosmos-ready .mobile-planet { opacity: .12; }
  .mobile-orbit-ring { position: absolute; left: 50%; top: 50%; width: 85%; height: 60%; border: 1px solid #b4e6b728; border-radius: 50%; transform: translate(-50%, -50%) rotate(-30deg); }
  .mobile-ring-b { width: 92%; height: 38%; transform: translate(-50%, -50%) rotate(24deg); border-style: dashed; border-color: #8ad6c21c; }
  .mobile-ring-c { width: 69%; height: 74%; transform: translate(-50%, -50%) rotate(42deg); border-color: #a4e4b212; }
  .mobile-orbit-coordinate { display: none; }
  .mobile-orbit-core { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; justify-content: center; align-items: center; width: clamp(88px, 25vw, 112px); height: clamp(88px, 25vw, 112px); padding: 0; border: 1px solid #c4f4c755; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #244a3044, #07130fa8); box-shadow: 0 0 24px #b5ec8010, inset 0 0 25px #b2ef9b0a; color: #e4f5dc; animation: mobile-core-breathe 5.8s ease-in-out infinite; }
  .mobile-orbit-core > span { font-size: 9px; color: #a7c9b0; letter-spacing: .06em; }
  .mobile-orbit-core > strong { margin-top: 5px; font-size: clamp(15px, 4.2vw, 19px); font-weight: 500; letter-spacing: .04em; }
  .mobile-orbit-core > i { display: none; }
  .mobile-orbit-core:active { background: #284630d9; }
  .is-orbit-paused .mobile-orbit-core { animation-play-state: paused; }
  .mobile-orbit-nodes { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
  .mobile-theme-node { position: absolute; display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: clamp(80px, 24vw, 108px); height: clamp(72px, 20vw, 86px); min-height: 44px; padding: 4px; border: 1px solid color-mix(in srgb, var(--theme-color) 45%, #8eaaa2); border-radius: 8px; background: linear-gradient(145deg, #1b302af5, #0b1a20ee); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 5px 16px #0005, inset 0 1px 0 #e9fff513; transform: translate(-50%, -50%); color: #d4e5d7; text-align: left; pointer-events: auto; touch-action: manipulation; }
  .mobile-theme-node:disabled { opacity: .6; }
  .mobile-theme-node:focus-visible { outline: 2px solid #e9fff1; outline-offset: 3px; }
  .mobile-theme-node:active, .mobile-theme-node.is-selected { border-color: var(--theme-color); background: #233b32f2; box-shadow: 0 0 16px color-mix(in srgb, var(--theme-color) 18%, transparent); }
  .mobile-orbit-poster { display: grid; place-items: center; flex: 0 0 auto; width: 100%; aspect-ratio: 21 / 9; overflow: hidden; border-radius: 4px; background: #08121b; color: var(--theme-color); }
  .mobile-orbit-poster > img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .mobile-orbit-glyph { font: 22px/1 Arial, sans-serif; }
  .mobile-orbit-label { display: flex; flex-direction: column; justify-content: center; flex: 1; min-height: 0; min-width: 0; padding-inline: 2px; gap: 1px; }
  .mobile-orbit-label > strong { color: var(--theme-color); font-size: 10px; line-height: 1.4; font-weight: 600; white-space: nowrap; }
  .mobile-orbit-label > small { overflow: hidden; text-overflow: ellipsis; color: #c2d4cd; font-size: 8px; line-height: 1.3; white-space: nowrap; }
  /* First paint stays legible before layout measurements; JS then moves only x/y. */
  .mobile-theme-node:nth-child(1) { left: 50%; top: 13%; }
  .mobile-theme-node:nth-child(2) { left: 82%; top: 31%; }
  .mobile-theme-node:nth-child(3) { left: 82%; top: 69%; }
  .mobile-theme-node:nth-child(4) { left: 50%; top: 87%; }
  .mobile-theme-node:nth-child(5) { left: 18%; top: 69%; }
  .mobile-theme-node:nth-child(6) { left: 18%; top: 31%; }
  .exhibition-page .gallery { width: calc(100% - 36px); margin-top: 0; padding-top: 28px; border-top-color: #8eae8d25; background: #080f14; }
  .exhibition-page .gallery .section-kicker { color: #65826f; }
  .exhibition-page .gallery .search-box { background: #101e18; border-color: #375044; }
  .exhibition-page .gallery .filters button { border-color: #32483a; color: #96b19f; }
  .exhibition-page .gallery .filters button[aria-pressed="true"] { color: #13200d; border-color: #c8ff77; background: #c8ff77; }
  .exhibition-page .gallery .work-card { background: #101d19; border-color: #355045; }
  .exhibition-page .gallery .card-media { aspect-ratio: 21 / 9; background: #142019; }
  .exhibition-page .gallery .card-media img { object-fit: contain; }
  .exhibition-page .site-footer { border-top-color: #8eae8d25; }
  @keyframes mobile-core-breathe { 0%, 100% { box-shadow: 0 0 22px #b5ec8014, inset 0 0 25px #b2ef9b0a; border-color: #c4f4c755; } 50% { box-shadow: 0 0 39px #b5ec803b, inset 0 0 30px #b2ef9b1c; border-color: #dcffd399; } }
}
@media (max-width: 359px) {
  .mobile-orbit-label > strong { font-size: 9px; }
  .mobile-orbit-label > small { font-size: 7.5px; }
}
@media (prefers-reduced-motion: reduce) {
 .mobile-explore *, .mobile-explore *::before, .mobile-explore *::after { animation: none !important; transition: none !important; }
}
@media print {
 .mobile-explore { display: none !important; }
 .exhibition-page #exhibition { display: block !important; }
}


/* ===== spotlight.css ===== */
/* Desktop discovery light: only the perimeter glows; posters stay untouched. */
@media (min-width: 1101px) {
  .map-card.is-spotlight-scan {
    z-index: 5; border-color: #eeffff; transform: translateY(-1.5px);
    box-shadow: 0 0 0 1px #cff8ff, 0 0 8px #5ed8ffad, 0 2px 12px color-mix(in srgb, var(--island-color, #cefa62) 55%, transparent);
    transition-duration: .065s;
  }
  .map-card.is-spotlight-picked {
    z-index: 12; overflow: visible; border-color: #f0ffff;
    transform: translateY(-2px) scale(1.055); transform-origin: center;
    box-shadow: 0 0 0 1px #e9ffff, 0 0 0 3px #70dfffaa, 0 0 18px 2px #31cfffba, 0 4px 21px 2px color-mix(in srgb, var(--island-color, #cefa62) 65%, transparent), 0 7px 14px #00182b9c;
    animation: spotlight-breathe 2s ease-in-out infinite;
  }
  .map-card.is-spotlight-picked::before {
    content: ""; position: absolute; z-index: -1; inset: -5px;
    border: 1px solid #b1f7ffb3; border-radius: calc(.4cqw + 5px);
    background: transparent; box-shadow: 0 0 16px 7px #31cfffad, 0 0 29px 8px #7bd7ff91;
    filter: blur(2px); pointer-events: none; animation: spotlight-halo 2s ease-in-out infinite;
  }
  .map-card.is-spotlight-picked::after {
    content: ""; position: absolute; z-index: -1; inset: -3px; border: 1px solid #d4fdff;
    border-radius: calc(.4cqw + 3px); background: transparent; pointer-events: none;
    animation: spotlight-ring 2s ease-out infinite;
  }
  .map-card.is-spotlight-picked .map-card-media { overflow: hidden; }
  .map-card.is-spotlight-picked .map-card-info { border-radius: 0 0 .22cqw .22cqw; }
  .spotlight-paused .map-card.is-spotlight-picked,
  .spotlight-paused .map-card.is-spotlight-picked::before,
  .spotlight-paused .map-card.is-spotlight-picked::after { animation-play-state: paused; }
}

@keyframes spotlight-breathe {
  0%, 100% { transform: translateY(-2px) scale(1.055); box-shadow: 0 0 0 1px #dffcff, 0 0 0 3px #55d8ff9c, 0 0 15px 2px #1ec5ffb3, 0 4px 19px 2px color-mix(in srgb, var(--island-color, #cefa62) 55%, transparent), 0 7px 14px #00182b9c; }
  50% { transform: translateY(-3px) scale(1.07); box-shadow: 0 0 0 1px #fff, 0 0 0 4px #99eeffe0, 0 0 23px 4px #40d9ffe0, 0 4px 30px 3px color-mix(in srgb, var(--island-color, #cefa62) 82%, transparent), 0 8px 16px #00182ba8; }
}
@keyframes spotlight-halo { 0%, 100% { opacity: .54; transform: scale(.99); } 50% { opacity: .95; transform: scale(1.025); } }
@keyframes spotlight-ring { 0% { opacity: .78; transform: scale(1); } 78%, 100% { opacity: 0; transform: scale(1.085); } }

@media (prefers-reduced-motion: reduce) {
  .map-card.is-spotlight-picked { animation: none; box-shadow: 0 0 0 2px #d3faff; }
  .map-card.is-spotlight-picked::before, .map-card.is-spotlight-picked::after { animation: none; opacity: .35; }
  .map-card.is-spotlight-scan, .map-card.is-spotlight-picked { transition: none; transform: none; }
}

@media print {
  .map-card.is-spotlight-scan, .map-card.is-spotlight-picked { animation: none !important; transform: none; box-shadow: none; }
  .map-card.is-spotlight-picked::before, .map-card.is-spotlight-picked::after { display: none; }
}


/* ===== gallery-life.css ===== */
/* A module-bounded native sticky scene. gallery-life.js adds only its two
   decorative nodes; no page-wide fixed layer, transform, or scroll listener. */
.exhibition-page #gallery {
  --gallery-bleed: max(0px, calc((100vw - 100%) / 2 - 12px));
  --gallery-scene-top: max(72px, calc(var(--exhibition-header, 62px) + 10px));
  --gallery-scene-max: 760px;
  --gallery-scene-height: min(var(--gallery-scene-max), calc(100vh - var(--gallery-scene-top) - 20px));
  position: relative;
  isolation: isolate;
  border-top-color: #72b9cc26;
  background:
    radial-gradient(1px 1px at 23px 28px, #b4dff52b 70%, transparent 100%) 0 0 / 177px 149px,
    radial-gradient(1px 1px at 73px 61px, #9dc9e021 70%, transparent 100%) 0 0 / 251px 203px,
    linear-gradient(180deg, #10263973, #0c1b2b3d 480px, #09162742 1200px);
}
.exhibition-page #gallery > :not(.sr-only) { position: relative; z-index: 1; }
.exhibition-page #gallery > .gallery-scenery-layer {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  left: calc(-1 * var(--gallery-bleed));
  right: calc(-1 * var(--gallery-bleed));
  pointer-events: none;
  /* overflow:hidden would create a scroll container and break sticky. The
     simple clip is also the fallback on Safari without overflow:clip. */
  clip-path: inset(0);
  overflow: clip;
}
.exhibition-page #gallery .gallery-scenery-frame {
  position: -webkit-sticky;
  position: sticky;
  top: var(--gallery-scene-top);
  width: 100%;
  height: var(--gallery-scene-height);
  pointer-events: none;
}
.exhibition-page #gallery .gallery-scenery-frame::before,
.exhibition-page #gallery .gallery-scenery-frame::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  width: clamp(112px, 18vw, 280px);
  height: 100%;
  pointer-events: none;
  background-image: linear-gradient(180deg, #07112308, #07112324 55%, #071123bf), url("assets/scene/acc-world-surround.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%, auto 100%;
  opacity: .49;
  -webkit-mask-image: var(--gallery-edge-mask), linear-gradient(180deg, transparent, #000 18%, #000 72%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: var(--gallery-edge-mask), linear-gradient(180deg, transparent, #000 18%, #000 72%, transparent);
  mask-composite: intersect;
  mask-mode: alpha;
}
.exhibition-page #gallery .gallery-scenery-frame::before {
  --gallery-edge-mask: linear-gradient(90deg, transparent, #000 12%, #000b 39%, transparent);
  left: 0;
  background-position: center, left bottom;
}
.exhibition-page #gallery .gallery-scenery-frame::after {
  --gallery-edge-mask: linear-gradient(270deg, transparent, #000 12%, #000b 39%, transparent);
  right: 0;
  background-position: center, right bottom;
}
/* A tiny composited light field: the landscapes and full catalogue stay static. */
.exhibition-page #gallery .gallery-heading::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 6px;
  top: -8px;
  width: 3px;
  height: 3px;
  border-radius: 1px;
  pointer-events: none;
  background: #a9dcea;
  box-shadow:
    -77px 7px 0 -1px #ddedb8,
    -158px -9px 0 -1px #a4dff5,
    -249px 13px 0 -1px #9ca9f1,
    -334px -3px 0 -1px #9de1dc;
  opacity: .3;
  animation: gallery-light-breathe 8s ease-in-out infinite;
}
.exhibition-page #gallery .section-kicker { color: #8ebfcb; }
.exhibition-page #gallery .gallery-hint { color: #91aab9; }
.exhibition-page #gallery .search-box {
  background: #0d2033f2;
  border-color: #47677b8c;
}
.exhibition-page #gallery .filters button:not([aria-pressed="true"]) {
  background: #0c1b2aeb;
  border-color: #3b586c;
  color: #b7cbd6;
}
.exhibition-page #gallery .filters button:not([aria-pressed="true"]):hover {
  border-color: #81b9c8;
  color: #f0fbf4;
}
.exhibition-page #gallery .work-card {
  box-shadow: 0 7px 22px #020b1230, 0 0 0 1px #91b9c408;
}
@keyframes gallery-light-breathe {
  0%, 100% { opacity: .24; transform: translateY(0); }
  50% { opacity: .53; transform: translateY(-3px); }
}
html[data-ambient-paused="true"] #gallery .gallery-heading::after,
body[data-ambient-paused="true"] #gallery .gallery-heading::after,
body.dialog-open #gallery .gallery-heading::after { animation-play-state: paused; }

@supports (height: 100svh) {
  .exhibition-page #gallery { --gallery-scene-height: min(var(--gallery-scene-max), calc(100svh - var(--gallery-scene-top) - 20px)); }
}
@supports not ((position: sticky) or (position: -webkit-sticky)) {
  .exhibition-page #gallery .gallery-scenery-frame { position: relative; top: 0; }
}
@media (max-width: 1100px) {
  .exhibition-page #gallery { --gallery-scene-max: 560px; }
  .exhibition-page #gallery .gallery-scenery-frame::before,
  .exhibition-page #gallery .gallery-scenery-frame::after { width: 150px; opacity: .32; }
}
@media (max-width: 600px) {
  /* Phone exploration already has the full scene. The long list uses only
     small, static CSS stars and does not request this 2.8 MB surround image. */
  .exhibition-page #gallery {
    background:
      radial-gradient(1px 1px at 23px 28px, #c4edd422 70%, transparent 100%) 0 0 / 177px 173px,
      linear-gradient(180deg, #10271f63, #080f1400 540px);
  }
  .exhibition-page #gallery > .gallery-scenery-layer,
  .exhibition-page #gallery .gallery-scenery-frame::before,
  .exhibition-page #gallery .gallery-scenery-frame::after,
  .exhibition-page #gallery .gallery-heading::after { display: none; background-image: none; animation: none; }
  .exhibition-page #gallery .section-kicker { color: #8fac99; }
  .exhibition-page #gallery .search-box { background: #101e18; border-color: #375044; }
  .exhibition-page #gallery .filters button:not([aria-pressed="true"]) { background: #0f2119; border-color: #355342; color: #a9c4b2; }
}
@media (prefers-reduced-motion: reduce) {
  .exhibition-page #gallery .gallery-heading::after { animation: none; opacity: .3; }
}
@media print {
  .exhibition-page #gallery { background: none; }
  .exhibition-page #gallery > .gallery-scenery-layer,
  .exhibition-page #gallery .gallery-heading::after { display: none; }
}


/* ===== brand-life.css ===== */
/* The existing 40×40 mark keeps its original header footprint. */
.brand-bot-live { overflow: visible; }
.brand-bot-live .brand-bot-eyes { transform-box: fill-box; transform-origin: center; }
.brand-bot-mouth-smile, .brand-bot-cheeks { opacity: 0; }
.is-brand-happy .brand-bot-mouth-rest { opacity: 0; }
.is-brand-happy .brand-bot-mouth-smile { opacity: 1; }
.is-brand-happy .brand-bot-cheeks { opacity: .75; }
.is-brand-happy .brand-bot-shell { animation: brand-bot-hop .76s ease-in-out both; }
.is-brand-blinking .brand-bot-eyes { animation: brand-bot-blink .22s ease-in-out both; }
.brand-life-paused .brand-bot-shell, .brand-life-paused .brand-bot-eyes { animation-play-state: paused; }
@keyframes brand-bot-blink { 0%, 100% { transform: scaleY(1); } 38%, 65% { transform: scaleY(.17); } }
@keyframes brand-bot-hop { 0%, 100% { transform: translateY(0); } 27% { transform: translateY(-1.2px); } 52% { transform: translateY(.3px); } 75% { transform: translateY(-.4px); } }

.brand-stage-lettering { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; user-select: none; }
.brand-stage-acc { fill: #edff51; font: italic 900 23px "Arial Black", Arial, sans-serif; letter-spacing: -.8px; paint-order: stroke fill; stroke: #123b85; stroke-width: 1.4px; }
.brand-stage-year { fill: #f0fcff; font: 800 14px Arial, sans-serif; letter-spacing: 1.7px; paint-order: stroke fill; stroke: #164886; stroke-width: 1.1px; }
@media (max-width: 1100px) { .brand-stage-lettering { display: none; } }

/* Native static cursors: exact arrow hotspot, no hidden OS pointer or follower. */
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .exhibition-page { cursor: url("assets/ui/acc-cursor.svg") 1 1, auto; }
  .exhibition-page button:not(:disabled),
  .exhibition-page [role="button"],
  .exhibition-page .map-card[data-open],
  .exhibition-page .card-open,
  .exhibition-page a:not([href^="http:"]):not([href^="https:"]):not([target="_blank"]):not([download]) { cursor: url("assets/ui/acc-cursor-hover.svg") 1 1, pointer; }
  .exhibition-page :is(h1, h2, h3, h4, p, input, textarea, [contenteditable="true"], [role="textbox"], .link-address, .leave-url) { cursor: text; }
  .exhibition-page :is(button, [role="button"], a) * { cursor: inherit; }
  .exhibition-page :is(a[href^="http:"], a[href^="https:"], a[target="_blank"], a[download], [data-external]) { cursor: pointer !important; }
  .exhibition-page :is(input, textarea, [contenteditable="true"], [role="textbox"]) { cursor: text !important; }
  .exhibition-page :is(video, audio, iframe, canvas, select, option, input[type="range"], input[type="checkbox"], input[type="radio"], input[type="file"], input[type="color"], input[type="date"], input[type="time"]) { cursor: auto !important; }
  .exhibition-page :is(input[type="button"], input[type="submit"], input[type="reset"]) { cursor: pointer !important; }
  .exhibition-page :is(button:disabled, [aria-disabled="true"]) { cursor: not-allowed !important; }
  .exhibition-page [draggable="true"] { cursor: grab; }
  .exhibition-page [draggable="true"]:active { cursor: grabbing; }
  .exhibition-page textarea::-webkit-resizer { cursor: nwse-resize; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-bot-live .brand-bot-shell, .brand-bot-live .brand-bot-eyes { animation: none !important; transform: none !important; }
}
@media print { .brand-stage-lettering { display: none; } }


/* ===== experience.css ===== */
/* r11: readable titles and regular liquid-glass viewing surfaces. */
.exhibition-page { --exhibition-footer: 0px; }
.exhibition-page .site-header { background: #081626ba; border-bottom: 1px solid #d6f3ff26; backdrop-filter: blur(26px) saturate(155%); -webkit-backdrop-filter: blur(26px) saturate(155%); box-shadow: inset 0 1px 0 #ffffff18; transition: background .25s, box-shadow .25s; }
.exhibition-page.is-scrolled .site-header { background: #0a192b83; box-shadow: inset 0 1px 0 #ffffff1f, 0 8px 24px #01081328; }
.exhibition-page .header-inner { gap: 16px; }
.footer-about { display: none; }
/* Titles get two deliberate lines; JS reduces only long text within a small range. */
.map-card-info { flex: 0 0 36%; min-height: 21px; padding: .07cqw .2cqw; }
.map-card-info h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; text-overflow: clip; font-size: clamp(9px,.66cqw,12px); line-height: 1.14; letter-spacing: -.015em; overflow-wrap: anywhere; }
.map-card-preview h3 { display: block; -webkit-line-clamp: unset; white-space: normal; overflow-wrap: anywhere; }
.exhibition-page .card-body { min-height: 62px; align-items: center; }
.exhibition-page .card-title { display: block; -webkit-line-clamp: unset; overflow: visible; white-space: normal; overflow-wrap: anywhere; }
.exhibition-page .gallery { margin-top: 0; padding-top: 52px; }
/* A single regular radius, with a clear glass rim and a readable milky interior. */
@media (min-width: 801px) {
 .work-dialog .detail-sheet { position: relative; border-radius: 24px; border: 1px solid #f2fff4c7; background: linear-gradient(135deg,#f5fff0c9,#e8f3e7d6 52%,#deeee5c9); backdrop-filter: blur(38px) saturate(150%); -webkit-backdrop-filter: blur(38px) saturate(150%); box-shadow: inset 0 1px 0 #fff, inset 1px 0 0 #ffffff80, inset 0 -1px 0 #f0fff04d, 0 28px 100px #0007; }
 .work-dialog .detail-media, .work-dialog .detail-media > .image-expand { background: #d8e4db5c; }
 .work-dialog > .dialog-close { background: #f9fff0a6; border: 1px solid #ffffff9c; backdrop-filter: blur(14px); }
 .work-dialog .detail-reading { scrollbar-color: #75927b70 transparent; }
 .work-dialog .detail-neighbor { border-radius: 12px; }
}
@media (max-width: 1100px) {
 .map-card-info { flex: none; min-height: 44px; padding: 5px 8px; }
 .map-card-info h3 { font-size: 12px; line-height: 1.3; }
}
@media (max-width: 600px) {
 .exhibition-page .header-inner { gap: 4px; width: calc(100% - 24px); }
 .exhibition-page #open-about { display: none; }
 .exhibition-page .exhibition-view-switch { margin-left: auto; }
 .exhibition-page .exhibition-view-switch button { padding-inline: 6px; }
 .exhibition-page .music-control { margin-left: 0; }
 .exhibition-page .gallery { padding-top: 30px; }
 .footer-about { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 8px; border: 0; background: transparent; color: #9ab9b2; font: inherit; font-size: 11px; }
}
@media (prefers-reduced-transparency: reduce) {
 .exhibition-page .site-header, .exhibition-page.is-scrolled .site-header { background: #0c1a2c; backdrop-filter: none; -webkit-backdrop-filter: none; }
 .work-dialog .detail-sheet { background: #f0f5ec; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
 .exhibition-page .site-header, .exhibition-page.is-scrolled .site-header { background: #0c1a2cf5; }
 .work-dialog .detail-sheet { background: #f0f5ec; }
}
@media (prefers-reduced-motion: reduce) { .exhibition-page .site-header { transition: none; } }

/* Give the title and its invitation independent breathing room. */
@media (min-width: 1101px) {
 .map-masthead { top: 2.2%; }
 .map-masthead h1 { line-height: 1.06; }
 .map-slogan { top: 7.55cqw; font-size: 1.93cqw; line-height: 1.25; letter-spacing: .075em; }
}

@media (min-width: 1101px) {
 .map-island { height: 19.2%; }
 .map-card:has(h3[data-title-lines="3"]) .map-card-info { flex-basis: 46%; }
 .map-card-info h3[data-title-lines="3"] { -webkit-line-clamp: 3; }
}
@media (max-width: 1100px) {
 .map-card-info:has(h3[data-title-lines="3"]) { min-height: 54px; }
 .map-card-info h3[data-title-lines="3"] { -webkit-line-clamp: 3; }
}

@media (min-width: 1101px) {
 .map-slogan { background: radial-gradient(ellipse at center,#061628da,transparent 72%); text-shadow: 0 .08cqw 0 #173c4d, 0 0 .18cqw #061221, 0 0 .42cqw #061221, 0 0 .75cqw #06233a; }
}

/* A playful editorial heading, without another line of instructional copy. */
.exhibition-page #gallery .gallery-heading { margin-bottom: 26px; }
.exhibition-page #gallery #gallery-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .12em; font-size: clamp(25px,2.35vw,38px); line-height: 1.35; letter-spacing: -.045em; }
.gallery-title-glow { color: #d8f78f; }
.gallery-title-spark { width: .65em; height: .65em; margin-left: .2em; fill: #d8f78f; flex: 0 0 auto; filter: drop-shadow(0 0 8px #b8ee6a45); }
.exhibition-page #gallery .work-grid { margin-top: 26px; }
@media (max-width:600px) {
 .exhibition-page #gallery .gallery-heading { margin-bottom: 20px; }
 .exhibition-page #gallery #gallery-title { font-size: 26px; }

}

/* The phone keeps the same brand, view names, work count and activity entrance. */
@media (max-width: 600px) {
 .exhibition-page { --exhibition-header: 108px; }
 html { scroll-padding-top: 115px; }
 .exhibition-page .header-inner { display: grid; grid-template-columns: minmax(0,1fr) 44px 106px; gap: 2px 7px; width: calc(100% - 28px); min-height: 108px; padding-block: 7px; }
 .exhibition-page .brand { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: 22px auto; gap: 1px 7px; align-content: center; width: max-content; }
 .exhibition-page .brand-mark { display: block; grid-column: 1; grid-row: 1 / 3; width: 22px; height: 26px; }
 .exhibition-page .brand-wordmark { grid-column: 2; font-size: 20px; line-height: 1.1; }
 .exhibition-page .brand-year { font-size: 14px; }
 .exhibition-page .brand-caption { display: block; grid-column: 2; font-size: 9px; letter-spacing: .04em; line-height: 1.6; }
 .exhibition-page .brand-divider { display: none; }
 .exhibition-page .music-control { grid-column: 2; grid-row: 1; margin: 0; }
 .exhibition-page #open-about { grid-column: 3; grid-row: 1; display: inline-flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: 11px; min-height: 44px; }
 .exhibition-page #open-about svg { display: block; width: 14px; height: 14px; }
 .exhibition-page .exhibition-view-switch { grid-column: 1 / 3; grid-row: 2; width: max-content; margin: 0; }
 .exhibition-page .exhibition-view-switch button { padding: 7px 11px; font-size: 11px; }
 .exhibition-page .exhibition-view-switch button svg { display: block; width: 13px; height: 13px; margin-right: 5px; }
 .exhibition-page .map-status { display: block; grid-column: 3; grid-row: 2; font-size: 9px; text-align: right; }
 .mobile-explore { scroll-margin-top: 108px; }
 .mobile-intro h1 { font-size: clamp(30px,8.2vw,42px); line-height: 1.34; }
 .mobile-intro-note { margin-top: 10px; color: #c1dec7; letter-spacing: .12em; }
 .mobile-featured-region, .mobile-featured-card { scroll-margin-top: 118px; }
}


/* ===== theme-frame.css ===== */
/* r13 compatibility entry: retain the original six-island artwork and UI.
   The scene supplies each illustrated title panel and pixel icon; exhibition.css
   supplies the rounded live card frame and labels. Its two-row card height still
   follows experience.css, matching the frozen r11 presentation.
   No overlay, replacement icon or replacement label is added. */
/* A small gap above the lower island icons; the original rounded frame stays. */
@media (min-width: 1101px) {
 .map-island[data-island="0"],
 .map-island[data-island="1"],
 .map-island[data-island="2"] { top: 31.2%; height: 18%; }
}


/* ===== about-activity.css ===== */
/* Only the existing activity dialog is restyled. Work/share/leave dialogs are unaffected. */
#about-dialog.acc-about-ready {
  --about-ink: #1c3530;
  --about-muted: #60726a;
  width: min(800px, calc(100vw - 48px));
  height: min(790px, calc(100dvh - 72px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  padding: 32px 36px 0;
  overflow: hidden;
  color: var(--about-ink);
  background: #f5f8efeF;
  border: 1px solid #f4fff5cf;
  border-radius: 24px;
  box-shadow: inset 0 1px 0 #fff, 0 30px 100px #0007;
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
}
#about-dialog.acc-about-ready[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
#about-dialog.acc-about-ready::backdrop { background: #020a14b3; backdrop-filter: blur(8px); }
#about-dialog.acc-about-ready > .dialog-close { top: 17px; right: 17px; width: 44px; height: 44px; color: #385248; background: #e8eee5dc; border: 1px solid #cfdacc; border-radius: 50%; }
#about-dialog.acc-about-ready > .dialog-close:hover { background: #dde8d9; border-color: #9bb297; }
#about-dialog.acc-about-ready > .dialog-eyebrow { margin: 0 54px 10px 0; color: #5b795c; font-size: 10px; font-weight: 750; letter-spacing: .15em; line-height: 1.5; }
#about-dialog.acc-about-ready > #about-title { margin: 0; padding-right: 34px; max-width: 650px; color: #17392d; font-size: clamp(27px, 3.1vw, 36px); font-weight: 750; line-height: 1.35; letter-spacing: -.035em; text-wrap: balance; }
#about-dialog.acc-about-ready > #about-content { min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; margin: 20px -10px 0 0; padding: 0 10px 24px 0; color: var(--about-ink); font-size: 14px; line-height: 1.8; scrollbar-width: thin; scrollbar-color: #b7c8b3 transparent; scrollbar-gutter: stable; }
#about-dialog.acc-about-ready .acc-about-intro { padding-bottom: 24px; }
#about-dialog.acc-about-ready .acc-about-lead { margin: 0; color: #52665c; font-size: 15px; line-height: 1.85; }
#about-dialog.acc-about-ready .acc-about-lead + .acc-about-lead { margin-top: 8px; }
#about-dialog.acc-about-ready .acc-about-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 29px; padding: 0; border-top: 1px solid #ccdbca; border-left: 1px solid #ccdbca; border-radius: 12px; overflow: hidden; }
#about-dialog.acc-about-ready .acc-about-fact { min-width: 0; padding: 16px 18px; border-right: 1px solid #ccdbca; border-bottom: 1px solid #ccdbca; background: #eaf0e4b3; }
#about-dialog.acc-about-ready .acc-about-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
#about-dialog.acc-about-ready .acc-about-fact-label { margin: 0 0 6px; color: #6a7d69; font-size: 11px; line-height: 1.4; letter-spacing: .05em; }
#about-dialog.acc-about-ready .acc-about-fact-value { margin: 0; color: #284738; font-size: 15px; line-height: 1.6; font-weight: 650; overflow-wrap: anywhere; }
#about-dialog.acc-about-ready .acc-about-fact-note { margin: 5px 0 0; color: #6a796f; font-size: 11px; line-height: 1.65; }
#about-dialog.acc-about-ready .acc-about-sections { display: grid; gap: 24px; }
#about-dialog.acc-about-ready .acc-about-section { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; }
#about-dialog.acc-about-ready .acc-about-section-number { padding-top: 3px; color: #87a271; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; line-height: 1.6; }
#about-dialog.acc-about-ready .acc-about-section-title { margin: 0 0 8px; color: #294a39; font-size: 17px; font-weight: 680; line-height: 1.55; letter-spacing: -.02em; }
#about-dialog.acc-about-ready .acc-about-section-text { margin: 0; color: #607065; font-size: 13px; line-height: 1.95; }
#about-dialog.acc-about-ready .acc-about-section-text + .acc-about-section-text { margin-top: 7px; }
#about-dialog.acc-about-ready .acc-about-jury { margin-top: 27px; border-top: 1px solid #d5dfce; border-bottom: 1px solid #d5dfce; }
#about-dialog.acc-about-ready .acc-about-jury-summary { padding: 16px 2px; color: #496044; font-size: 12px; font-weight: 600; cursor: pointer; }
#about-dialog.acc-about-ready .acc-about-jury-summary::marker { color: #93a57c; }
#about-dialog.acc-about-ready .acc-about-jury-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 0; padding: 3px 2px 20px; list-style: none; }
#about-dialog.acc-about-ready .acc-about-jury-person { display: grid; gap: 4px; }
#about-dialog.acc-about-ready .acc-about-jury-name { color: #3c563b; font-size: 12px; font-weight: 650; line-height: 1.6; }
#about-dialog.acc-about-ready .acc-about-jury-role { color: #798372; font-size: 10px; line-height: 1.75; }
#about-dialog.acc-about-ready .acc-about-invitation { margin-top: 26px; padding: 19px 21px; border-left: 3px solid #9db471; border-radius: 0 8px 8px 0; background: #e7efdd; }
#about-dialog.acc-about-ready .acc-about-invitation-title { margin: 0; color: #315534; font-size: 16px; font-weight: 650; line-height: 1.6; }
#about-dialog.acc-about-ready .acc-about-invitation-copy { margin: 7px 0 0; color: #687760; font-size: 12px; line-height: 1.85; }
#about-dialog.acc-about-ready .acc-about-notice { margin: 19px 0 0; color: #879080; font-size: 10px; line-height: 1.75; }
#about-dialog.acc-about-ready > .about-signoff { display: flex; justify-content: flex-end; align-items: center; margin: 0 -36px; padding: 16px 36px 20px; border-top: 1px solid #d7e0d1; background: #f1f5eb; }
#about-dialog.acc-about-ready .acc-about-source { display: inline-flex; justify-content: center; align-items: center; flex: 0 0 auto; gap: 14px; min-height: 44px; padding: 10px 17px; border: 1px solid #314a34; border-radius: 9px; background: #304b35; color: #f4f7ec; font-size: 12px; line-height: 1.5; text-decoration: none; }
#about-dialog.acc-about-ready .acc-about-source:hover { background: #203c29; border-color: #203c29; }
#about-dialog.acc-about-ready .acc-about-source-arrow { font-size: 17px; line-height: 1; }
#about-dialog.acc-about-ready :focus-visible { outline: 2px solid #547c43; outline-offset: 3px; }
#about-dialog.acc-about-ready .acc-about-fallback { padding: 16px 0 30px; }
#about-dialog.acc-about-ready .acc-about-fallback-note { margin-top: 10px; color: var(--about-muted); font-size: 13px; }
#about-dialog.acc-about-ready .acc-about-organizer { margin: 26px 0 0; padding: 0; }
#about-dialog.acc-about-ready .acc-about-image-button { display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid #d7dfd2; border-radius: 10px; background: #fff; cursor: zoom-in; }
#about-dialog.acc-about-ready .acc-about-image-button:hover { border-color: #9aad8d; }
#about-dialog.acc-about-ready .acc-about-organizer-image { display: block; width: 100%; height: auto; max-height: none; margin: 0; aspect-ratio: 2 / 1; object-fit: contain; border-radius: 0; }
body.about-activity-open { overflow: hidden; overscroll-behavior: none; }
@media (max-width: 600px) {
  #about-dialog.acc-about-ready { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); padding: max(24px, env(safe-area-inset-top)) 23px 0; border-radius: 20px; background: #f5f8ef; }
  #about-dialog.acc-about-ready > .dialog-close { top: 12px; right: 12px; }
  #about-dialog.acc-about-ready > .dialog-eyebrow { margin-bottom: 12px; font-size: 9px; }
  #about-dialog.acc-about-ready > #about-title { padding-right: 10px; font-size: 27px; }
  #about-dialog.acc-about-ready > #about-content { margin-top: 18px; padding-bottom: 22px; }
  #about-dialog.acc-about-ready .acc-about-lead { font-size: 14px; }
  #about-dialog.acc-about-ready .acc-about-fact { padding: 14px 13px; }
  #about-dialog.acc-about-ready .acc-about-fact-value { font-size: 13px; }
  #about-dialog.acc-about-ready .acc-about-section { grid-template-columns: 23px minmax(0, 1fr); gap: 10px; }
  #about-dialog.acc-about-ready .acc-about-section-title { font-size: 16px; }
  #about-dialog.acc-about-ready > .about-signoff { margin-inline: -23px; gap: 9px; padding: 14px 20px max(17px, calc(env(safe-area-inset-bottom) + 10px)); }
  #about-dialog.acc-about-ready .acc-about-source { gap: 8px; padding-inline: 12px; font-size: 11px; }
}
@media (max-height: 480px) and (min-width: 601px) {
  #about-dialog.acc-about-ready { height: calc(100dvh - 20px); max-height: calc(100dvh - 20px); padding-top: 20px; }
  #about-dialog.acc-about-ready > #about-title { font-size: 25px; }
  #about-dialog.acc-about-ready > #about-content { margin-top: 12px; }
  #about-dialog.acc-about-ready > .about-signoff { padding-block: 11px; }
}
@media (prefers-reduced-transparency: reduce) {
  #about-dialog.acc-about-ready { background: #f5f8ef; backdrop-filter: none; -webkit-backdrop-filter: none; }
  #about-dialog.acc-about-ready::backdrop { backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #about-dialog.acc-about-ready { background: #f5f8ef; }
}


/* ===== detail-refinement.css ===== */
/* Complete poster above two equal reading and media columns. */
/* Wrappers introduce no desktop boxes: the original three-column grid stays intact. */
.detail-scroll, .detail-mobile-nav, .detail-access-slot { display: contents; }
.detail-mobile-praise-slot, .detail-mobile-action-slot { display: none; }
.work-dialog { --rail-width: 228px; --stage-gap: 20px; --poster-sheet: min(900px, calc(100vw - 2 * (var(--rail-width) + var(--stage-gap)) - 40px), max(520px, calc((100dvh - 450px) * 21 / 9))); width: calc(var(--poster-sheet) + 2 * (var(--rail-width) + var(--stage-gap))); max-width: calc(100vw - 28px); height: fit-content; max-height: calc(100dvh - 28px); margin: auto; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #213b32; color-scheme: light; }
.work-dialog::backdrop { background: #020b14aa; backdrop-filter: blur(10px); }
.work-dialog .detail-stage { display: grid; grid-template-columns: var(--rail-width) minmax(0,1fr) var(--rail-width); gap: var(--stage-gap); align-items: center; height: auto; min-height: 0; padding: 0; }
.work-dialog .detail-sheet { position: relative; grid-column: 2; grid-row: 1; display: block; width: 100%; height: auto; max-height: calc(100dvh - 28px); min-height: 0; padding: 0; overflow: visible; border: 1px solid #f2fff4cf; border-radius: 24px; background: linear-gradient(135deg,#f5fff0eb,#e8f3e7ed 52%,#deeee5e6); backdrop-filter: blur(38px) saturate(150%); -webkit-backdrop-filter: blur(38px) saturate(150%); box-shadow: inset 0 1px 0 #fff, 0 28px 100px #0007; }
.exhibition-page .work-dialog:has(> .work-interaction) .detail-sheet { padding-bottom: 0; }
.work-dialog > .dialog-close { position: absolute; z-index: 12; top: 0; right: calc(var(--rail-width) + var(--stage-gap) + 8px); margin: 0; float: none; width: 44px; height: 44px; min-height: 44px; border: 0; background: transparent; color: #415b4f; border-radius: 50%; }
.work-dialog > .dialog-close:hover { background: #fff8; color: #19382a; }
.detail-toolbar { display: flex; align-items: center; justify-content: flex-end; min-height: 44px; padding: 0 10px; }
.detail-toolbar-actions { display: flex; align-items: center; gap: 5px; }
.detail-toolbar-actions button { min-height: 44px; padding: 6px 10px; border: 0; border-radius: 20px; background: transparent; color: #486958; font: inherit; font-size: 11px; }
.detail-toolbar-actions button:hover { background: #fff8; }
.detail-share-button { display: flex; align-items: center; gap: 5px; }
.detail-share-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.detail-close-space { width: 44px; }
.detail-poster { width: 100%; aspect-ratio: 21 / 9; background: #102a2a; }
.detail-poster .image-expand, .detail-poster .cover-placeholder { display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; aspect-ratio: 21 / 9; }
.detail-poster .image-expand > img { display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; }
.detail-story { padding: 16px 22px 18px; }
.detail-lower-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 22px; align-items: start; }
.detail-maker { min-width: 0; }
.detail-lower-grid.is-single-column { grid-template-columns: minmax(0,1fr); }
.detail-praise-lane { height: 76px; min-height: 76px; position: relative; pointer-events: none; }
.detail-resources-space { min-width: 0; align-self: stretch; }
.detail-identity { display: flex; align-items: center; gap: 13px; min-height: 76px; }
.work-dialog .detail-author-photos { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.work-dialog .detail-author-photo { display: grid; place-items: center; flex: 0 0 auto; width: 76px; height: 76px; padding: 0; border: 1px solid #b5cbbd; border-radius: 13px; background: #102d40; overflow: hidden; cursor: zoom-in; }
.work-dialog .detail-author-photos:has(> :nth-child(2)) .detail-author-photo { width: 55px; height: 55px; }
.work-dialog .detail-author-photo > .detail-author-portrait { display: block; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; object-fit: contain; object-position: center; image-rendering: pixelated; }
.detail-identity-copy { min-width: 0; }
.work-dialog #detail-title { margin: 0; color: #1b392e; font-size: clamp(18px,1.6vw,24px); font-weight: 650; line-height: 1.35; letter-spacing: -.035em; overflow-wrap: anywhere; outline: none; }
.work-dialog #detail-title.detail-title-long { font-size: clamp(16px,1.35vw,20px); }
.work-dialog .detail-meta { margin: 6px 0 0; gap: 1px 9px; color: #637e6e; font-size: 10px; line-height: 1.6; }
.detail-description-scroll { height: 88px; max-height: 88px; margin-top: 12px; padding-right: 9px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #92aa97 transparent; color: #536f5e; font-size: 12px; line-height: 22px; overflow-wrap: anywhere; }
.detail-description-scroll p { margin: 0; }
.detail-description-scroll:focus-visible, .detail-resources-scroll:focus-visible { outline: 1px solid #82a78d; outline-offset: 3px; }
.detail-resources { min-width: 0; padding-left: 21px; border-left: 1px solid #95b09b40; }
.detail-resources h3 { margin: 0 0 10px; color: #496953; font-size: 12px; font-weight: 600; line-height: 20px; letter-spacing: .05em; }
.detail-resources-scroll { height: 124px; min-width: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #92aa97 transparent; }
.detail-resources-scroll.has-media-and-extras { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); gap: 10px; overflow: visible; }
.detail-resource-extras { min-width: 0; max-height: 124px; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.detail-resources-scroll video { display: block; width: auto; height: auto; min-width: 0; max-width: 100%; max-height: 124px; justify-self: start; align-self: start; border-radius: 7px; background: #091621; object-fit: contain; }
.detail-resources-scroll .resource-images { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 3px; }
.detail-resources-scroll video + .resource-images { margin-top: 10px; }
.detail-resources-scroll .resource-images .image-expand { flex: 0 0 120px; width: 120px; height: 85px; min-height: 0; border: 1px solid #a5bbaa5e; border-radius: 7px; overflow: hidden; background: #dbe8df; }
.has-media-and-extras .resource-images .image-expand { flex-basis: 96px; width: 96px; height: 67px; }
.detail-resources-scroll .resource-images img { display: block; width: 100%; height: 100%; object-fit: contain; }
.detail-resources-scroll .resource-links { display: flex; flex-wrap: wrap; gap: 7px; }
.detail-resources-scroll video + .resource-links, .detail-resources-scroll .resource-images + .resource-links { margin-top: 9px; }
.detail-resources-scroll .resource-links .action-secondary { min-height: 38px; padding: 8px 10px; border-color: #a6beac80; border-radius: 7px; background: #ffffff40; color: #3e6650; font-size: 11px; line-height: 1.5; text-align: left; overflow-wrap: anywhere; }
.detail-resources-scroll .resource-links .action-secondary:hover { background: #ffffff9c; }
.detail-access-row { display: flex; align-items: center; gap: 9px; position: relative; min-height: 44px; margin-top: 15px; padding-right: 168px; }
.work-dialog .detail-access-row button { min-height: 44px; border-radius: 9px; font: inherit; font-size: 11px; line-height: 1.4; }
.work-dialog .detail-access-row .action-primary { flex: 1; min-width: 0; padding: 9px 14px; background: #245343; border: 1px solid #245343; color: #fff; font-weight: 550; }
.work-dialog .detail-access-row .action-primary:hover { background: #346954; }
.work-dialog .detail-access-row .action-secondary, .work-dialog .detail-access-row .copy-button { flex: 0 0 auto; padding: 9px 12px; border: 1px solid #99b5a570; background: #fff4; color: #466d58; }
.work-dialog .detail-access-row .copy-button { display: flex; align-items: center; justify-content: center; gap: 5px; width: auto; }
.detail-access-row .copy-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.work-dialog .detail-access-row .action-secondary:hover, .work-dialog .detail-access-row .copy-button:hover { background: #fff9; }
.detail-qr-control { position: relative; flex: 0 0 auto; }
.detail-qr-popover { position: absolute; z-index: 20; bottom: calc(100% + 10px); left: 0; width: 254px; padding: 12px; border: 1px solid #dce9dc; border-radius: 15px; background: #fffffafc; box-shadow: 0 10px 40px #1235283d; color: #627563; }
.detail-qr-popover[hidden] { display: none; }
.detail-qr-popover::after { content: ''; position: absolute; inset: 100% 0 -12px; }
.detail-qr-popover .qr-image { width: 228px; height: 228px; max-height: none; padding: 0; border: 0; border-radius: 0; object-fit: contain; background: #fff; }
.detail-qr-popover p { margin-top: 8px; font-size: 11px; text-align: center; line-height: 1.6; }
.work-dialog .access-pending { flex: 1; color: #6c8371; font-size: 12px; }
.work-dialog > .work-interaction { right: calc(var(--rail-width) + var(--stage-gap) + 22px); bottom: 18px; }
.detail-neighbor { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 12px; background: #19313db3; border: 1px solid #c5e7e240; border-radius: 13px; backdrop-filter: blur(16px); color: #e3eeea; text-align: left; opacity: .9; transition: opacity .2s, transform .2s; animation: neighbor-invitation 10s ease-in-out infinite; }
.detail-neighbor:hover, .detail-neighbor:focus-visible { opacity: 1; transform: translateY(-3px); }
.neighbor-direction { font-size: 13px; line-height: 1.6; }
.neighbor-image { display: grid; place-items: center; width: 100%; aspect-ratio: 21 / 9; overflow: hidden; border-radius: 5px; background: #213238; }
.neighbor-image img { width: 100%; height: 100%; object-fit: contain; }
.neighbor-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 14px; line-height: 1.6; }
.detail-neighbor-prev { --neighbor-drift: -6px; grid-column: 1; grid-row: 1; }
.detail-neighbor-next { --neighbor-drift: 6px; animation-delay: -5s; grid-column: 3; grid-row: 1; text-align: right; }
/* Activity remains an explicit button on both header layouts. */
.exhibition-page #open-about { justify-content: center; min-height: 38px; padding: 7px 15px; border: 1px solid #c6dfd84a; border-radius: 9px; background: #d1e9e412; color: #d5e6e0; font-size: 11px; transition: background .2s, border-color .2s; }
.exhibition-page #open-about:hover, .exhibition-page #open-about:focus-visible { border-color: #c6dfd898; background: #d1e9e429; }
/* Desktop image viewing uses the viewport, independent of the small share sheet. */
#share-dialog.is-image-viewer { width: 94vw; height: 94dvh; max-width: none; max-height: none; margin: auto; padding: 52px 18px 18px; overflow: hidden; border: 1px solid #c1d8df35; border-radius: 18px; background: #080f16f5; box-shadow: 0 32px 120px #000b; }
#share-dialog.is-image-viewer::backdrop { background: #010508e6; backdrop-filter: blur(12px); }
#share-dialog.is-image-viewer > .dialog-close { width: 44px; height: 44px; top: 5px; right: 8px; border: 0; background: #1d2a35a8; color: #f0f5f4; }
#share-dialog.is-image-viewer .share-content { display: flex; flex-direction: column; height: 100%; min-height: 0; }
#share-dialog.is-image-viewer .lightbox-canvas { position: relative; flex: 1; min-width: 0; min-height: 0; }
#share-dialog.is-image-viewer .lightbox-image { position: absolute; inset: 0; display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto; border-radius: 0; object-fit: contain; -webkit-touch-callout: default; user-select: auto; }
#share-dialog.is-image-viewer .lightbox-mobile-hint { display: none; }
@media (min-width: 1600px) { .work-dialog { --rail-width: 260px; --stage-gap: 22px; } }
@media (max-width: 1100px) and (min-width: 801px) {
 .work-dialog { --rail-width: 144px; --stage-gap: 14px; --poster-sheet: min(calc(100vw - 2 * (var(--rail-width) + var(--stage-gap)) - 36px), max(500px,calc((100dvh - 450px) * 21 / 9))); }
 .detail-story { padding-inline: 17px; }
 .detail-lower-grid { gap: 16px; }
 .detail-resources { padding-left: 15px; }
 .work-dialog .detail-author-photo { width: 64px; height: 64px; }
 .work-dialog .detail-author-photos:has(> :nth-child(2)) .detail-author-photo { width: 45px; height: 45px; }
 .detail-identity { gap: 9px; }
 .work-dialog #detail-title { font-size: 18px; }
 .work-dialog #detail-title.detail-title-long { font-size: 15px; }
 .work-dialog .detail-access-row .copy-button span { display: none; }
 .detail-access-row { padding-right: 157px; gap: 7px; }
 .work-dialog .detail-access-row .action-primary { padding-inline: 9px; }
 .neighbor-direction { font-size: 11px; }
 .neighbor-title { font-size: 12px; }
}
@media (max-width: 800px) {
 .work-dialog { position: fixed; inset: var(--detail-viewport-top,0px) 0 auto; width: 100%; max-width: none; height: 100vh; height: var(--detail-viewport-height,100dvh); max-height: var(--detail-viewport-height,100dvh); margin: 0; background: #eff5ec; overflow: hidden; }
 .work-dialog[open], #share-dialog.is-image-viewer[open] { animation: none; }
 .work-dialog .detail-stage { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 0; padding: 0; }
 .work-dialog .detail-scroll { display: block; flex: 1 1 auto; min-height: 0; width: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-padding-bottom: 16px; }
 .work-dialog .detail-sheet, .exhibition-page .work-dialog:has(> .work-interaction) .detail-sheet { display: block; height: auto; max-height: none; min-height: 0; padding: env(safe-area-inset-top) 0 0; overflow: visible; border: 0; border-radius: 0; background: #eff5ec; box-shadow: none; backdrop-filter: none; }
 .work-dialog > .dialog-close { z-index: 13; top: calc(env(safe-area-inset-top) + 6px); right: 25px; border-radius: 6px; background: transparent; box-shadow: none; backdrop-filter: none; }
 /* The phone action header occupies its own row before the complete poster. */
 .detail-toolbar { position: sticky; z-index: 12; top: env(safe-area-inset-top); right: auto; min-height: 56px; height: 56px; padding: 6px 25px; pointer-events: none; background: #eff5ec; }
 .detail-toolbar-actions { gap: 0; flex-shrink: 0; }
 .detail-toolbar-actions button { pointer-events: auto; padding-inline: 8px; font-size: 11px; background: transparent; box-shadow: none; backdrop-filter: none; }
 .detail-share-button { justify-content: center; }
 .detail-poster { width: calc(100% - 42px); margin-inline: auto; }
 .detail-story { padding: 17px 18px 15px; }
 .detail-lower-grid { display: block; }
 .detail-resources-space, .detail-praise-lane { display: none; }
 .work-dialog .detail-mobile-praise-slot { position: relative; z-index: 15; display: block; flex: 0 0 auto; width: 100%; padding: 0 18px; background: #eff5ec; }
 .work-dialog .detail-mobile-praise-slot:empty { display: none; }
 .detail-identity { gap: 12px; align-items: center; min-height: 64px; }
 .work-dialog .detail-author-photo { width: 64px; height: 64px; border-radius: 11px; }
 .work-dialog .detail-author-photos:has(> :nth-child(2)) { gap: 4px; }
 .work-dialog .detail-author-photos:has(> :nth-child(2)) .detail-author-photo { width: 56px; height: 56px; }
 .work-dialog #detail-title { font-size: 21px; line-height: 1.35; }
 .work-dialog #detail-title.detail-title-long { font-size: 18px; }
 .work-dialog .detail-meta { gap: 1px 8px; margin-top: 7px; font-size: 11px; }
 /* Keep media beside a bounded six-line introduction; text-only works expand. */
 .detail-description-scroll { margin-top: 14px; height: 132px; max-height: 132px; font-size: 12px; line-height: 22px; }
 .detail-lower-grid.is-single-column .detail-description-scroll { height: auto; max-height: none; padding-right: 0; overflow: visible; overscroll-behavior: auto; }
 .detail-resources { margin-top: 12px; padding: 8px 0 0; border-left: 0; border-top: 1px solid #95b09b40; }
 .detail-resources h3 { margin-bottom: 8px; }
 .detail-resources-scroll { height: 124px; }
 .detail-resources-scroll video { max-height: 100px; }
 .detail-resources-scroll:not(.has-media-and-extras):has(> video) { height: 100px; }
 .detail-resources-scroll.has-media-and-extras { display: block; height: auto; max-height: 230px; overflow-y: auto; }
 .detail-resources-scroll.has-media-and-extras .detail-resource-extras { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; max-height: 90px; }
 .has-media-and-extras .detail-resource-extras .resource-images { flex: 1; min-width: 0; }
 .has-media-and-extras .detail-resource-extras .resource-links { flex: 0 0 43%; min-width: 0; margin-top: 0; }
 .detail-access-slot { display: none; }
 .work-dialog .detail-mobile-action-slot { position: relative; z-index: 16; display: block; flex: 0 0 auto; width: 100%; min-height: 66px; padding: 10px 18px; border-top: 1px solid #b5c9ba70; background: #eff5ec; }
 .work-dialog .detail-mobile-action-slot:empty { display: none; }
 .detail-access-row { padding-right: 0; gap: 7px; margin-top: 0; }
 .work-dialog .detail-access-row button { font-size: 11px; min-height: 46px; }
 .work-dialog .detail-access-row .action-primary { padding-inline: 8px; }
 .work-dialog .detail-access-row .action-secondary { padding-inline: 9px; }
 .work-dialog .detail-access-row .copy-button { width: 44px; padding-inline: 8px; }
 .work-dialog .detail-access-row .copy-button span { display: none; }
 .detail-qr-popover { width: min(254px,calc(100vw - 36px)); left: 0; max-height: var(--detail-qr-max-height,calc(var(--detail-viewport-height,100dvh) - 150px)); overflow-y: auto; overscroll-behavior: contain; }
 .detail-qr-popover .qr-image { display: block; width: min(228px,max(0px,calc(var(--detail-qr-max-height,380px) - 66px))); height: auto; max-width: 100%; aspect-ratio: 1; margin-inline: auto; }
 .work-dialog .detail-mobile-nav { position: relative; z-index: 15; display: block; flex: 0 0 calc(56px + env(safe-area-inset-bottom)); width: 100%; height: calc(56px + env(safe-area-inset-bottom)); min-height: 56px; margin: 0; border-top: 0; box-shadow: inset 0 1px 0 #b5c9ba; background: #e3ede4; }
 .work-dialog .detail-mobile-nav .detail-neighbor { position: absolute; top: 0; bottom: auto; display: flex; align-items: center; justify-content: center; width: 50%; height: 100%; min-height: 56px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); margin: 0; border: 0; border-radius: 0; background: #e3ede4; color: #395d49; opacity: 1; text-align: center; box-shadow: none; backdrop-filter: none; transform: none; }
 .work-dialog .detail-mobile-nav .detail-neighbor-prev { left: 0; right: auto; }
 .work-dialog .detail-mobile-nav .detail-neighbor-next { left: 50%; right: 0; border-left: 1px solid #b5c9ba; }
 .work-dialog .detail-mobile-nav .detail-neighbor:hover, .work-dialog .detail-mobile-nav .detail-neighbor:focus-visible { background: #d5e4d7; }
 .neighbor-direction { font-size: 12px; }
 .detail-neighbor .neighbor-image, .detail-neighbor .neighbor-title { display: none; }
 .work-dialog .interaction-comment-button { padding-right: 8px; padding-left: 6px; }
 .work-dialog .interaction-comment-button small { display: none; }
 .work-dialog .reaction-button { flex: 0 0 40px; width: 40px; height: 40px; min-width: 40px; max-width: 40px; min-height: 40px; max-height: 40px; aspect-ratio: 1; border-radius: 50%; }
 .work-dialog > .toast { bottom: 78px; }
 .exhibition-page #open-about { min-height: 38px; padding: 7px 13px; }
 #share-dialog.is-image-viewer { width: 100vw; height: 100dvh; margin: 0; padding: max(58px,calc(env(safe-area-inset-top) + 50px)) 12px max(14px,env(safe-area-inset-bottom)); border: 0; border-radius: 0; }
 #share-dialog.is-image-viewer > .dialog-close { top: max(6px,env(safe-area-inset-top)); right: 8px; }
 #share-dialog.is-image-viewer .lightbox-mobile-hint { display: block; flex: 0 0 auto; margin: 12px 0 0; color: #b8c7ce; font-size: 11px; line-height: 1.6; }
}
@media (max-width: 359px) { .neighbor-direction { font-size: 11px; } .work-dialog .interaction-comment-button { font-size: 11px; } }
@media (max-height: 620px) and (min-width: 801px) { .work-dialog .detail-sheet { max-height: calc(100dvh - 28px); overflow-y: auto; } .detail-qr-popover { bottom: 100%; } }
@media (prefers-reduced-motion: reduce) { .detail-neighbor, .exhibition-page #open-about { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .work-dialog .detail-sheet { background: #eff5ec; backdrop-filter: none; } .detail-neighbor { background: #19313d; backdrop-filter: none; } }
#share-dialog.is-image-viewer .lightbox-portrait { image-rendering: pixelated; }

@keyframes neighbor-invitation { 0%,100% { translate: 0 0; } 50% { translate: var(--neighbor-drift,6px) -5px; } }
@media (max-width:800px), (prefers-reduced-motion:reduce) { .detail-neighbor { animation:none; translate:none; } }


/* ===== mobile-header.css ===== */
/* Phone overrides loaded last. Scene tint never affects work poster colors. */
@media (max-width: 600px) {
 html:root { scroll-padding-top: 66px; }
 body.exhibition-page { --exhibition-header: 56px; }
 .exhibition-page .site-header { background: #071625db; border-bottom-color: #d6f3ff26; backdrop-filter: blur(20px) saturate(130%); }
 .exhibition-page .site-header .header-inner { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; width: calc(100% - 20px); min-height: 56px; padding-block: 4px; }
 .exhibition-page .site-header .brand { display: flex; flex: 0 0 auto; align-items: center; width: auto; min-height: 44px; padding-inline: 0; gap: 5px; }
 .exhibition-page .site-header .brand-wordmark { display: inline-flex; align-items: baseline; font-size: 20px; line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
 .exhibition-page .site-header .brand-mark { display: block; flex: 0 0 20px; width: 20px; height: 20px; }
 .exhibition-page .site-header .brand-year { display: inline; font-size: 14px; margin-left: 3px; line-height: 1; letter-spacing: -.035em; }
 .exhibition-page .site-header .brand-caption, .exhibition-page .site-header .brand-divider, .exhibition-page .site-header .map-status { display: none; }
 .exhibition-page .site-header .exhibition-view-switch { display: inline-flex; flex: 0 1 auto; gap: 1px; width: auto; min-width: 0; margin: 0 auto 0 0; padding: 1px; border-color: #92b4b038; border-radius: 9px; background: #10262f8f; }
 .exhibition-page .site-header .exhibition-view-switch button { display: inline-flex; flex: 0 0 auto; justify-content: center; align-items: center; gap: 4px; min-height: 44px; padding: 6px 7px; font-size: 11px; line-height: 1.3; white-space: nowrap; border-radius: 6px; }
 .exhibition-page .site-header .exhibition-view-switch button svg { display: block; flex: 0 0 auto; width: 13px; height: 13px; margin: 0; }
 .exhibition-page .site-header .exhibition-view-switch button[aria-pressed="true"] { background: #2b4b4de6; color: #efffe8; box-shadow: inset 0 0 0 1px #c8f5ca28; }
 .exhibition-page .site-header .music-control { flex: 0 0 40px; width: 40px; margin: 0; }
 .exhibition-page .site-header .music-toggle { display: grid; place-items: center; width: 40px; min-width: 40px; height: 44px; min-height: 44px; padding: 8px; gap: 0; border: 0; border-radius: 8px; background: transparent; color: #bad6ca; }
 .exhibition-page .site-header .music-icon { width: 21px; height: 21px; }
 .exhibition-page .site-header #open-about { display: inline-flex; flex: 0 0 40px; justify-content: center; align-items: center; width: 40px; height: 44px; min-width: 40px; min-height: 44px; padding: 0; margin: 0; border: 0; border-radius: 8px; background: transparent; color: #bad6ca; }
 .exhibition-page .site-header #open-about .mobile-about-label, .exhibition-page .site-header #open-about > svg { display: none; }
 .exhibition-page .site-header #open-about .mobile-about-icon { display: grid; place-items: center; width: 19px; height: 19px; border: 1.5px solid currentColor; border-radius: 50%; font-family: Georgia,serif; font-size: 13px; font-style: italic; font-weight: 700; line-height: 1; }
 .exhibition-page .site-header .music-toggle:hover, .exhibition-page .site-header #open-about:hover { background: #c9e6df12; }
 #mobile-explore { display: flex; flex-direction: column; height: calc(100svh - 56px); min-height: max(500px, calc(clamp(350px,95vw,440px) + 124px)); max-height: 930px; padding: 21px 18px 24px; scroll-margin-top: 56px; background:#071525; }
 #mobile-explore::before { content: ""; position: absolute; z-index: -2; inset: 0; pointer-events: none; background:linear-gradient(180deg,#04101c65,#04101c00 28%,#03132300 75%,#07152570),url("assets/scene/acc-mobile-world-r15.webp") center center/cover no-repeat; filter:saturate(.62); opacity:.5; }
 #mobile-explore .mobile-scene-lights { position:absolute; z-index:-1; inset:0; pointer-events:none; overflow:hidden; }
 .scene-beacon { position:absolute; display:block; width:26px; height:26px; border-radius:50%; background:radial-gradient(circle,#d6f9ff8f, #72dfff20 35%,transparent 72%); filter:blur(1px); opacity:.2; animation:mobile-scene-glimmer 7s ease-in-out infinite; }
 .scene-beacon-heart { left:10%; top:22%; background:radial-gradient(circle,#ffcef780,#ff84d924 40%,transparent 72%); }
 .scene-beacon-city { left:48%; top:24%; width:42px; height:42px; animation-delay:-2.2s; }
 .scene-beacon-waterfall { left:16%; top:59%; width:14px; height:54px; animation:mobile-scene-flow 6s ease-in-out infinite; }
 .scene-beacon-wheel { left:63%; top:68%; background:radial-gradient(circle,#f4db9a75,#ddc66b18 40%,transparent 72%); animation-delay:-4s; }
 .scene-beacon-star { left:85%; top:12%; width:13px; height:13px; animation-delay:-1.2s; }
 .is-scene-paused .scene-beacon { animation-play-state:paused; }
 #mobile-explore .mobile-intro { padding: 0 2px; text-align: center; }
 #mobile-explore .mobile-eyebrow { display: none; }
 #mobile-explore .mobile-intro h1 { margin: 0; font-size: clamp(21px,6.1vw,31px); line-height: 1.35; letter-spacing: -.045em; font-weight: 650; white-space: nowrap; color: #f3f8ed; text-shadow: 0 2px 16px #031020c9; }
 #mobile-explore .mobile-intro-note { margin-top: 9px; color: #d2e6dc; font-size: 10px; line-height: 1.7; letter-spacing: .025em; text-shadow: 0 1px 8px #031020; }
 #mobile-explore .mobile-orbit-stage { flex: 1 1 auto; min-height: clamp(350px,95vw,440px); max-height: 650px; height: auto; margin: 10px 0 0; }
 #mobile-explore .mobile-cosmic-backdrop { inset: -15px -18px; }
 #mobile-explore #mobile-cosmos { opacity: .34; }
 #mobile-explore .mobile-planet { opacity: .36; }
 #mobile-explore.mobile-cosmos-ready .mobile-planet, .mobile-cosmos-ready #mobile-explore .mobile-planet { opacity: .12; }
 #mobile-explore .mobile-orbit-core { width: clamp(88px,25vw,112px); height: clamp(88px,25vw,112px); background: radial-gradient(circle at 40% 30%,#244a3070,#071d23e0); backdrop-filter: blur(9px); }
 #mobile-explore .mobile-orbit-core > span { font-size: 9px; }
 #mobile-explore .mobile-orbit-core > strong { font-size: 17px; }
 #mobile-explore .mobile-theme-node { background: linear-gradient(145deg,#163844ed,#081d2af0); border-color: color-mix(in srgb,var(--theme-color) 58%,#66868d); }
 .exhibition-page #gallery { scroll-margin-top: 66px; }
}
@media (max-width: 399px) {
 .exhibition-page .site-header .header-inner { width: calc(100% - 16px); gap: 4px; }
 .exhibition-page .site-header .brand { gap: 4px; }
 .exhibition-page .site-header .brand-wordmark { font-size: 17px; }
 .exhibition-page .site-header .brand-mark { flex-basis: 18px; width: 18px; height: 18px; }
 .exhibition-page .site-header .brand-year { font-size: 12.5px; margin-left: 2px; }
 .exhibition-page .site-header .exhibition-view-switch button { padding-inline: 5px; gap: 3px; font-size: 10.5px; }
 .exhibition-page .site-header .exhibition-view-switch button svg { width: 12px; height: 12px; }
 .exhibition-page .site-header .music-control { flex-basis: 36px; width: 36px; }
 .exhibition-page .site-header .music-toggle { width: 36px; min-width: 36px; padding: 6px; }
 .exhibition-page .site-header #open-about { flex-basis: 36px; width: 36px; min-width: 36px; }
}
@media (max-width: 359px) {
 .exhibition-page .site-header .header-inner { width: calc(100% - 12px); gap: 3px; }
 .exhibition-page .site-header .brand { gap: 3px; }
 .exhibition-page .site-header .brand-wordmark { font-size: 16px; }
 .exhibition-page .site-header .brand-mark { flex-basis: 16px; width: 16px; height: 16px; }
 .exhibition-page .site-header .brand-year { font-size: 11.5px; }
 .exhibition-page .site-header .exhibition-view-switch button { padding-inline: 4px; gap: 2px; font-size: 10px; }
 .exhibition-page .site-header .exhibition-view-switch button svg { width: 11px; height: 11px; }
 .exhibition-page .site-header .music-control { flex-basis: 32px; width: 32px; }
 .exhibition-page .site-header .music-toggle { width: 32px; min-width: 32px; padding: 5px; }
 .exhibition-page .site-header #open-about { flex-basis: 32px; width: 32px; min-width: 32px; }
 #mobile-explore { padding-inline: 15px; }
 #mobile-explore .mobile-intro h1 { font-size: 21px; }
 #mobile-explore .mobile-intro-note { font-size: 9px; }
}
@media (max-width: 600px) and (max-height: 620px) {
 #mobile-explore { min-height: max(480px, calc(clamp(350px,95vw,440px) + 110px)); padding-top: 15px; padding-bottom: 17px; }
 #mobile-explore .mobile-orbit-stage { min-height: clamp(350px,95vw,440px); }
}
@media (max-width: 600px) and (prefers-reduced-transparency: reduce) {
 .exhibition-page .site-header { background: #0a192b; backdrop-filter: none; }
 #mobile-explore .mobile-orbit-core, #mobile-explore .mobile-theme-node { backdrop-filter: none; background-color: #102b39; }
}

@media (max-width:600px) {
 #mobile-explore .mobile-orbit-core { width:clamp(76px,22vw,112px); height:clamp(76px,22vw,112px); isolation:isolate; overflow:visible; border-color:#8de9ffc2; background:radial-gradient(circle at 40% 25%,#245a6fdf,#092938ef 62%,#061d2cf5); box-shadow:0 0 14px #70dfff55,inset 0 0 24px #71e4ff2b; animation:mobile-core-signal 4.8s ease-in-out infinite; }
 #mobile-explore .mobile-orbit-core::before { content:""; position:absolute; z-index:-1; inset:-7px; border:1px dashed #a3edff8f; border-radius:50%; background:conic-gradient(from 30deg,transparent 30%,#90e9ff44 48%,transparent 65%); animation:mobile-core-turn 16s linear infinite; pointer-events:none; }
 #mobile-explore .mobile-orbit-core::after { content:""; position:absolute; z-index:-2; inset:-15px; border-radius:50%; background:radial-gradient(circle,#8eeaff6b 15%,#59d8ff28 48%,transparent 72%); filter:blur(7px); animation:mobile-core-diffuse 4.8s ease-in-out infinite; pointer-events:none; }
 #mobile-explore .mobile-orbit-core > strong { color:#effeff; text-shadow:0 0 12px #8eeaff7d; }
 #mobile-explore .mobile-orbit-core > span { color:#b7dfec; font-size:8px; }
 #mobile-explore .mobile-theme-orbit { position:absolute; z-index:1; inset:0; pointer-events:none; user-select:none; }
 .mobile-theme-orbit::before { content:""; position:absolute; left:50%; top:50%; width:var(--theme-orbit-diameter,122px); height:var(--theme-orbit-diameter,122px); transform:translate(-50%,-50%); border:1px solid #9addff50; border-radius:50%; box-shadow:0 0 12px #79d8ff13,inset 0 0 12px #79d8ff0c; }
 .mobile-theme-logo { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:16px; height:16px; padding:1px; color:var(--logo-color); border:1px solid color-mix(in srgb,var(--logo-color) 66%,transparent); border-radius:6px; background:#092438ef; box-shadow:0 0 9px color-mix(in srgb,var(--logo-color) 28%,transparent); transform:translate(-50%,-50%); pointer-events:none; }
 .mobile-theme-logo svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
 .is-orbit-paused .mobile-orbit-core,.is-orbit-paused .mobile-orbit-core::before,.is-orbit-paused .mobile-orbit-core::after { animation-play-state:paused!important; }
}
@media (max-width:359px) { #mobile-explore .mobile-theme-node { width:76px; } .mobile-theme-logo { width:12px; height:12px; padding:1px; } #mobile-explore .mobile-orbit-core > strong { font-size:15px; } }
@keyframes mobile-core-signal { 0%,100% { box-shadow:0 0 14px #70dfff45,inset 0 0 20px #71e4ff22; border-color:#8de9ff8f; } 50% { box-shadow:0 0 25px #70dfff9c,0 0 52px #62ddff3b,inset 0 0 28px #71e4ff45; border-color:#c6f8ff; } }
@keyframes mobile-core-diffuse { 0%,100% { opacity:.3; transform:scale(.95); } 50% { opacity:.85; transform:scale(1.42); } }
@keyframes mobile-core-turn { to { rotate:360deg; } }
@keyframes mobile-scene-glimmer { 0%,100% { opacity:.12; transform:scale(.75); } 50% { opacity:.6; transform:scale(1.2); } }
@keyframes mobile-scene-flow { 0%,100% { opacity:.12; transform:translateY(-4px) scaleY(.85); } 50% { opacity:.5; transform:translateY(5px) scaleY(1.15); } }

@media (min-width:400px) and (max-width:600px) { .mobile-theme-logo { width:18px; height:18px; } }
@media (min-width:520px) and (max-width:600px) { .mobile-theme-logo { width:20px; height:20px; padding:2px; } }


/* 视频直开兜底：静态托管不回 206，iOS 偶发播不动/拖不动进度 */
.media-help.media-fallback { padding: 6px 2px 0; background: transparent; color: #46614f; font-size: 11px; }
.media-help a { color: #2f6b52; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* 视频+兜底文案同格，保持两列栅格不被撑开 */
.detail-resources-scroll .resource-media { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-self: start; }

/* 图片解码前的骨架微光：img 覆盖后自动消失，不需要 JS 配合 */
.card-media { background-image: linear-gradient(100deg, #18273c 22%, #22374f 44%, #18273c 66%); background-size: 220% 100%; animation: acc-card-shimmer 1.5s linear infinite; }
.detail-poster { background-image: linear-gradient(100deg, #18273c 22%, #22374f 44%, #18273c 66%); background-size: 220% 100%; animation: acc-card-shimmer 1.5s linear infinite; }
.card-media img, .detail-poster img { position: relative; z-index: 1; }
.card-media::after { z-index: 2; }
@keyframes acc-card-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .card-media, .detail-poster { animation: none; } }

/* 点赞只做鼓励、不显示数量 */
.reaction-count, [data-reaction-count] { display: none !important; }

/* ===== 赞美面板：左侧输入 / 右侧留言墙 ===== */
.interaction-panel { width: min(760px, calc(100vw - 40px)); max-width: none; max-height: min(560px, calc(var(--interaction-available-height, 100dvh) - 140px)); }
.interaction-panel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 6px 14px 14px; align-items: stretch; }
.interaction-compose-head { margin: 0 0 8px; color: #46614f; font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.interaction-form { display: flex; flex-direction: column; }
.interaction-wall { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid #e6ebde; padding-left: 16px; }
.interaction-wall-head { margin: 0 0 8px; color: #46614f; font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.interaction-wall-count:not(:empty)::before { content: " · "; color: #97a794; font-weight: 400; }
.interaction-wall-list { flex: 1 1 auto; min-height: 110px; max-height: 262px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #c4cfb7 transparent; }
.interaction-wall-list:focus-visible { outline: 2px solid #c4d1b4; outline-offset: 2px; border-radius: 8px; }
.interaction-message-row { position: relative; margin: 0; padding: 9px 30px 9px 11px; border: 1px solid #e3ece5; border-radius: 10px; background: #fffef9; }
.interaction-message-text { margin: 0; color: #33483c; font-size: 13px; line-height: 1.6; word-break: break-word; }
.interaction-message-remove { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #c2cec3; font-size: 15px; line-height: 1; cursor: pointer; }
.interaction-message-remove:hover, .interaction-message-remove:focus-visible { background: #eef3ea; color: #6b7f60; }
.interaction-wall-empty { margin: 0; padding: 18px 2px; color: #93a293; font-size: 12px; line-height: 1.7; }
@media (max-width: 760px) {
  .interaction-panel { width: calc(100vw - 24px); max-height: min(80dvh, 640px); }
  .interaction-panel-grid { grid-template-columns: 1fr; gap: 10px; padding: 4px 10px 12px; }
  .interaction-wall { border-left: 0; border-top: 1px solid #e6ebde; padding-left: 0; padding-top: 10px; }
  .interaction-wall-list { max-height: 168px; min-height: 84px; }
}

/* 赞美面板 · 移动端修正：整块可滚，不能让留言墙被挤出可视区 */
@media (max-width: 760px) {
  .interaction-panel { max-height: min(82dvh, 668px); }
  .interaction-panel-grid { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .interaction-form { overflow: visible; }
  .work-dialog .interaction-form textarea { min-height: 64px; max-height: 108px; }
  .interaction-wall-list { max-height: 196px; min-height: 88px; }
}

/* 赞美面板 · 移动端改用块级流，避免 grid 轨道塌陷造成的叠字 */
@media (max-width: 760px) {
  .interaction-panel-grid { display: block; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .interaction-form { display: block; overflow: visible; }
  .interaction-wall { display: block; margin-top: 12px; border-left: 0; border-top: 1px solid #e6ebde; padding: 10px 0 0; }
  .interaction-wall-list { max-height: 196px; min-height: 0; }
  .interaction-wall-empty { padding: 10px 2px 4px; }
}

/* ACC 20261020 desktop video viewer — sync this complete block to bundle.css. */
.resource-video-open { display: none; }
@media (min-width: 801px) {
  .detail-resources-scroll .resource-inline-video { display: none; }
  .detail-resources-scroll .resource-video-open { position: relative; display: grid; place-items: center; align-self: flex-start; width: 100%; max-width: 290px; height: 124px; min-height: 0; padding: 0; overflow: hidden; border: 1px solid #a5bbaa70; border-radius: 7px; background: #10212a; cursor: zoom-in; }
  .resource-video-open > img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .resource-video-open .resource-video-play { position: absolute; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #ffffff80; border-radius: 50%; background: #10212ac9; color: #fff; box-shadow: 0 3px 16px #0005; }
  .resource-video-play svg { width: 24px; height: 24px; fill: currentColor; }
  .resource-video-open:hover .resource-video-play { background: #245343; }
  .resource-video-open:focus-visible { outline: 2px solid #47705a; outline-offset: 3px; }
}
#share-dialog.is-video-viewer { width: 94vw; height: 94dvh; max-width: none; max-height: none; margin: auto; padding: 52px 18px 18px; overflow: hidden; border: 1px solid #c1d8df35; border-radius: 18px; background: #080f16f5; box-shadow: 0 32px 120px #000b; color: #edf3f0; }
#share-dialog.is-video-viewer::backdrop { background: #010508e6; backdrop-filter: blur(12px); }
#share-dialog.is-video-viewer > .dialog-close { position: absolute; z-index: 2; width: 44px; height: 44px; top: 5px; right: 8px; border: 0; background: #1d2a35a8; color: #f0f5f4; }
#share-dialog.is-video-viewer .share-content { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 8px; }
.lightbox-video-canvas { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; }
.lightbox-video-canvas > .lightbox-video { position: absolute; inset: 0; display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto; border-radius: 6px; background: #000; object-fit: contain; }
#share-dialog.is-video-viewer .media-fallback, #share-dialog.is-video-viewer .video-viewer-status { flex: 0 0 auto; margin: 0; color: #b8c7ce; font-size: 12px; line-height: 1.7; }
#share-dialog.is-video-viewer .media-fallback a { color: #d9efb3; text-decoration: underline; text-underline-offset: 3px; }
#share-dialog.is-video-viewer .video-viewer-status:empty { display: none; }
@media (max-width: 800px) {
  /* A viewer already open during a resize stays usable; phone entry is inline. */
  #share-dialog.is-video-viewer { width: 100vw; height: 100dvh; margin: 0; padding: max(58px,calc(env(safe-area-inset-top) + 50px)) 12px max(14px,env(safe-area-inset-bottom)); border: 0; border-radius: 0; }
}
/* End ACC 20261020 desktop video viewer. */

/* 20261020 praise panel: canonical layout and controls; append this block after legacy bundle rules. */
.interaction-panel {
  position: absolute; z-index: 4; right: 0; bottom: 56px; width: min(760px, calc(100vw - 40px)); max-width: none;
  max-height: min(560px,calc(var(--interaction-available-height,100dvh) - 140px));
  display: flex; flex-direction: column; overflow: hidden; padding: 40px 14px 14px;
  border: 1px solid #d4ddcc; border-radius: 13px; background: #fafbf5;
  box-shadow: 0 15px 54px #18301e26,0 2px 8px #18301e0d; pointer-events: auto; overflow-wrap: anywhere;
}
.interaction-panel-close { position: absolute; top: 1px; right: 3px; display: grid; place-items: center; width: 40px; height: 38px; padding: 0; border: 0; border-radius: 50%; color: #8e9f83; background: none; font-size: 23px; font-weight: 300; line-height: 1; }
.interaction-panel-close:hover { background: #eaf0e1; color: #4d7048; }
.interaction-form { display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: 0; padding: 2px; overflow: visible; }
.interaction-compose-box { position: relative; }
.work-dialog .interaction-form textarea { display: block; width: 100%; min-height: 132px; max-height: 200px; padding: 10px 11px 58px; resize: vertical; border: 1px solid #d4ddca; border-radius: 7px; background: #fffef9; color: #4c6144; font: inherit; font-size: 13px; line-height: 1.65; box-shadow: none; }
.interaction-form textarea::placeholder { color: #8c9b81; }
.interaction-form textarea:focus { outline: 2px solid #c4d1b4; outline-offset: 1px; border-color: #a5b991; }
.interaction-suggestions-head { margin: 12px 0 5px; color: #7b8d73; font-size: 11px; }
.interaction-suggestions-footer { display: flex; justify-content: flex-end; margin-top: 4px; }
.interaction-suggestions-footer [data-interaction-refresh] { min-height: 34px; padding: 5px 2px 5px 10px; border: 0; background: transparent; color: #7b8d73; font-size: 11px; line-height: 1.5; }
.interaction-suggestions-footer [data-interaction-refresh]:hover { color: #456138; text-decoration: underline; text-underline-offset: 3px; }
.interaction-suggestions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 1px 0 0; }
.interaction-suggestions button { min-height: 36px; padding: 7px 10px; border: 1px solid #dce5d2; border-radius: 7px; background: #f2f6eb; color: #63795a; font-size: 12px; line-height: 1.5; text-align: left; }
.interaction-suggestions button:hover { border-color: #bacbad; background: #e8f1df; color: #456138; }
.interaction-form [data-interaction-send] { position: absolute; right: 8px; bottom: 8px; display: block; margin: 0; min-width: 68px; min-height: 40px; padding: 8px 16px; border: 1px solid #6d875b; border-radius: 7px; background: #6d875b; color: #fff; font-size: 12px; font-weight: 500; }
.interaction-form [data-interaction-send]:hover { background: #7d986a; }
.interaction-form [data-interaction-send]:disabled { border-color: #e1e7d7; background: #e1e7d7; color: #a6b09b; }
.interaction-status { margin: 7px 0 0; color: #a05e42; font-size: 11px; line-height: 1.6; }
.interaction-status:empty { display: none; }
.interaction-panel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; min-height: 0; padding: 6px 0 0; align-items: stretch; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.interaction-compose-head { margin: 0 0 8px; color: #46614f; font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.interaction-wall { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid #e6ebde; padding-left: 16px; }
.interaction-wall-head { margin: 0 0 8px; color: #46614f; font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.interaction-wall-list { flex: 1 1 auto; min-height: 110px; max-height: 420px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #c4cfb7 transparent; }
.interaction-wall-list:focus-visible { outline: 2px solid #c4d1b4; outline-offset: 2px; border-radius: 8px; }
.interaction-message-row { position: relative; flex: 0 0 auto; margin: 0; padding: 9px 30px 9px 11px; border: 1px solid #e3ece5; border-radius: 10px; background: #fffef9; }
.interaction-message-text { margin: 0; color: #33483c; font-size: 13px; line-height: 1.6; word-break: break-word; }
.interaction-message-remove { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #c2cec3; font-size: 15px; line-height: 1; cursor: pointer; }
.interaction-message-remove:hover, .interaction-message-remove:focus-visible { background: #eef3ea; color: #6b7f60; }
.interaction-message-preset { padding-right: 11px; }
.interaction-message-source { display: block; margin-bottom: 3px; color: #85947d; font-size: 10px; font-weight: 400; line-height: 1.5; }
.interaction-wall-empty { margin: 0; padding: 18px 2px; color: #93a293; font-size: 12px; line-height: 1.7; }
@media (max-width: 800px) {
  .interaction-panel { width: calc(100vw - 24px); bottom: 57px; border-radius: 14px; }
  .interaction-panel-close { min-width: 44px; min-height: 40px; }
  .work-dialog .interaction-form textarea { height: 116px; min-height: 116px; max-height: 176px; padding-bottom: 60px; font-size: 16px; }
  .interaction-suggestions button { min-height: 40px; font-size: 12px; }
  .interaction-form [data-interaction-send] { min-height: 44px; }
  .interaction-message-text { font-size: 13px; }

  /* One block flow inside the panel scroller avoids shrinking grid tracks
     when the keyboard reduces the available footer height. */
  .interaction-panel-grid { display: block; padding: 4px 0 0; }
  .interaction-form { display: block; }
  .interaction-suggestions-footer [data-interaction-refresh] { min-height: 40px; }
  .interaction-wall { display: block; margin-top: 14px; border-left: 0; border-top: 1px solid #e6ebde; padding: 12px 0 0; }
  .interaction-wall-list { max-height: 220px; min-height: 0; }
  .interaction-message-remove { width: 32px; height: 32px; }
  .interaction-wall-empty { padding: 10px 2px 4px; }
}

/* ACC-20261020-BRANDING-BEGIN
   Header uses the approved transparent logo; partner originals remain unchanged.
   Root appends this independent block after the existing bundle overrides. */
.exhibition-page .site-header .brand.brand--provided {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  width: auto;
  min-height: 44px;
  padding: 0;
}
.brand--provided .brand-logo-window {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 118px;
  height: auto;
  aspect-ratio: 1448 / 704;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
/* Transparent 1448x1086 artwork: retain the existing y≈240..944 crop. */
.brand--provided .brand-logo-original {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  transform: translateY(-22.1%);
}
.exhibition-page footer.site-footer.brand-partners-footer {
  position: relative;
  display: block;
  visibility: visible;
  width: 100%;
  margin: 0;
  padding: 38px 0 22px;
  border-top: 1px solid #b9d2d523;
  background: linear-gradient(180deg, #091724, #08131e);
  color: #b5c8c5;
}
.brand-partners-footer .partners-inner {
  width: min(1100px, calc(100% - 48px));
  margin-inline: auto;
}
.brand-partners-footer .partners-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 22px;
  text-align: center;
}
.brand-partners-footer .partners-eyebrow {
  margin: 0;
  color: #9db9b2;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .22em;
  line-height: 1.7;
}
.brand-partners-footer #partners-title {
  margin: 0;
  color: #e3ede5;
  font-size: 18px;
  font-weight: 550;
  letter-spacing: .1em;
  line-height: 1.6;
}
.brand-partners-footer .partner-logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brand-partners-footer .partner-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 132px;
  margin: 0;
  padding: 18px 22px;
  overflow: hidden;
  border: 1px solid #e7ece7;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 18px #0109121a;
}
.brand-partners-footer .partner-card img {
  display: block;
  width: 100%;
  height: 90px;
  max-width: 290px;
  margin: 0;
  object-fit: contain;
  object-position: center;
}
.brand-partners-footer .partner-card--silicon img { max-width: 146px; }
.brand-partners-footer .partner-card--ai img { max-width: 250px; }
.brand-partners-footer .partners-signoff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 22px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid #aec6c418;
}
.brand-partners-footer .partners-signoff > p {
  margin: 0;
  color: #a1b7b2;
  font-size: 11px;
  line-height: 1.7;
}
.brand-partners-footer .partners-links { display: flex; align-items: center; gap: 16px; }
.brand-partners-footer .footer-about,
.brand-partners-footer .back-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: #c3d4ca;
  font: inherit;
  font-size: 11px;
  line-height: 1.5;
}
.brand-partners-footer .back-to-top span { margin-left: 7px; }
.brand-partners-footer .footer-about:hover,
.brand-partners-footer .back-to-top:hover { color: #e2fc84; }
@media (max-width: 600px) {
  .exhibition-page .site-header .header-inner { flex-wrap: nowrap; }
  .brand--provided .brand-logo-window { width: clamp(82px, 23vw, 98px); }
  .exhibition-page .site-header .brand.brand--provided { gap: 0; }
  .exhibition-page .site-header .brand--provided .brand-divider,
  .exhibition-page .site-header .brand--provided .brand-caption { display: none; }
  .exhibition-page footer.site-footer.brand-partners-footer { padding-block: 30px 18px; }
  .brand-partners-footer .partners-inner { width: calc(100% - 32px); }
  .brand-partners-footer .partners-heading { margin-bottom: 18px; }
  .brand-partners-footer .partner-logos { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .brand-partners-footer .partner-card { min-height: 112px; padding: 12px 24px; }
  .brand-partners-footer .partner-card img { height: 84px; max-width: 290px; }
  .brand-partners-footer .partner-card--silicon img { max-width: 140px; }
  .brand-partners-footer .partner-card--ai img { max-width: 252px; }
  .brand-partners-footer .partners-signoff { flex-direction: column; gap: 4px; margin-top: 18px; padding-top: 16px; text-align: center; }
  .brand-partners-footer .partners-links { justify-content: center; gap: 28px; }
}
/* ACC-20261020-BRANDING-END */

/* ===== share-poster.css ===== */
/* Static, approved sharing posters. Scoped to the existing share dialog. */
#share-dialog.is-poster-share {
  width: min(980px, calc(100vw - 48px));
  height: min(860px, calc(100dvh - 48px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 52px 24px 24px;
  overflow: hidden;
  border: 1px solid #a3bfcc38;
  border-radius: 22px;
  background: #0b1727;
  color: #e9f1f1;
}
#share-dialog.is-poster-share::backdrop { background: #02080ede; backdrop-filter: blur(10px); }
#share-dialog.is-poster-share > .dialog-close { top: 7px; right: 10px; width: 40px; height: 40px; background: #1c2b3b; color: #e4efef; border: 0; }
#share-dialog.is-poster-share .share-content { height: 100%; min-height: 0; }
#share-dialog.is-poster-share .poster-share-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; grid-template-rows: minmax(0, 1fr); align-items: center; gap: 28px; height: 100%; min-height: 0; }
#share-dialog.is-poster-share .poster-share-stage { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; height: 100%; }
#share-dialog.is-poster-share .poster-share-image { display: block; width: auto; height: auto; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 12px 44px #0006; -webkit-touch-callout: default; user-select: auto; }
#share-dialog.is-poster-share .poster-share-load { position: absolute; max-width: 280px; padding: 16px; color: #c2d5de; font-size: 13px; line-height: 1.8; }
#share-dialog.is-poster-share [hidden] { display: none !important; }
#share-dialog.is-poster-share .poster-share-info { min-width: 0; padding: 25px 20px; border: 1px solid #e4eee180; border-radius: 18px; background: #eff5ec; color: #1b392e; text-align: left; }
#share-dialog.is-poster-share .poster-share-eyebrow { margin: 0 0 14px; color: #667e70; font-size: 12px; }
#share-dialog.is-poster-share h2 { margin: 0; padding: 0; color: #1b392e; font-size: 26px; line-height: 1.5; font-weight: 650; }
#share-dialog.is-poster-share .poster-share-work { margin-top: 22px; color: #365b4c; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
#share-dialog.is-poster-share .poster-share-author { margin-top: 6px; color: #6a8073; font-size: 12px; line-height: 1.6; }
#share-dialog.is-poster-share .poster-share-actions { display: grid; gap: 10px; margin-top: 24px; }
#share-dialog.is-poster-share .poster-share-actions > * { width: 100%; min-width: 0; min-height: 46px; margin: 0; font-size: 13px; text-decoration: none; }
#share-dialog.is-poster-share .action-primary { border-color: #235441; background: #235441; color: #fff; }
#share-dialog.is-poster-share .action-primary:hover { background: #326a53; }
#share-dialog.is-poster-share .action-secondary { border: 1px solid #bbcec0; background: transparent; color: #365b4c; }
#share-dialog.is-poster-share .action-secondary:hover { background: #e2ebdf; }
#share-dialog.is-poster-share .poster-share-original { display: inline-block; margin-top: 17px; padding: 5px 0; color: #507361; font-size: 12px; text-underline-offset: 4px; }
#share-dialog.is-poster-share .poster-share-note { margin-top: 12px; color: #718477; font-size: 11px; line-height: 1.8; }
@media (max-width: 800px) {
  #share-dialog.is-poster-share { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-radius: 0; animation: none; }
  #share-dialog.is-poster-share > .dialog-close { top: max(7px, env(safe-area-inset-top)); right: 10px; }
  #share-dialog.is-poster-share .poster-share-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 0; }
  #share-dialog.is-poster-share .poster-share-stage { padding: max(54px, calc(env(safe-area-inset-top) + 48px)) 18px 16px; }
  #share-dialog.is-poster-share .poster-share-image { min-height: 0; }
  #share-dialog.is-poster-share .poster-share-info { padding: 16px 20px max(16px, env(safe-area-inset-bottom)); border: 0; border-radius: 20px 20px 0 0; text-align: center; }
  #share-dialog.is-poster-share .poster-share-eyebrow { display: none; }
  #share-dialog.is-poster-share h2 { font-size: 18px; line-height: 1.5; }
  #share-dialog.is-poster-share h2 br { display: none; }
  #share-dialog.is-poster-share .poster-share-work { margin-top: 5px; font-size: 12px; line-height: 1.6; }
  #share-dialog.is-poster-share .poster-share-author { margin-top: 2px; font-size: 11px; }
  #share-dialog.is-poster-share .poster-share-actions { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 13px; }
  #share-dialog.is-poster-share .poster-share-original { margin-top: 8px; }
  #share-dialog.is-poster-share .poster-share-note { margin-top: 2px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #share-dialog.is-poster-share { width: 100vw; height: 100dvh; margin: 0; padding: 46px 16px 12px; border: 0; border-radius: 0; }
  #share-dialog.is-poster-share .poster-share-layout { grid-template-columns: minmax(0, 1fr) minmax(220px, 36%); grid-template-rows: minmax(0, 1fr); gap: 18px; }
  #share-dialog.is-poster-share .poster-share-stage { padding: 0; }
  #share-dialog.is-poster-share .poster-share-info { max-height: 100%; padding: 12px; border-radius: 14px; overflow-y: auto; }
  #share-dialog.is-poster-share h2 { font-size: 17px; }
  #share-dialog.is-poster-share .poster-share-work { margin-top: 8px; }
  #share-dialog.is-poster-share .poster-share-actions { gap: 8px; margin-top: 10px; }
  #share-dialog.is-poster-share .poster-share-actions > * { min-height: 40px; padding: 8px; font-size: 12px; }
}