:root {
  color-scheme: dark;
  --ink: #f2f4f8;
  --muted: #b5bdca;
  --accent: #b3c9f5;
  --page: #14171c;
  --page-glow: #363c486e;
  --page-shade: #2c30425c;
  --line: #c7d0e325;
  --glass-fill: #49536545;
  --glass-edge: #cad5e946;
  --glass-hover-edge: #dce7fc80;
  --bar-fill: #191e26ed;
  --bar-live: #1c212ba3;
  --panel-fill: #1c222ce8;
  --panel-live: #202632bd;
  --chat-shell-fill: #252d3ce6;
  --chat-shell-live: #2730447d;
  --chat-rail-fill: #30394bec;
  --chat-rail-live: #3540579e;
  --chat-compose-fill: #252d3cee;
  --chat-compose-live: #29354aad;
  --selection-start: #edf3ff3f;
  --selection-end: #c4d2ee23;
  --selection-edge: #f3f6ff55;
  --active-fill: #60769e52;
  --active-edge: #a9bde682;
  --hover-fill: #c5d3f322;
  --field-fill: #10141da1;
  --field-edge: #65728b;
  --card-top: #272d39;
  --card-bottom: #1d222c;
  --viewer-top: #272e3a;
  --viewer-bottom: #1c212c;
  --dialog-backdrop: #0d111bb3;
  --shadow: #05081261;
  --subtle-shadow: #0b102224;
  --primary-ink: #1a2538;
  --primary-top: #edf2fd;
  --primary-bottom: #cbd7ee;
  --primary-edge: #edf4ffce;
  --primary-hover: #f7f9ff;
  --hero-ink: #f5f6fa;
  --hero-muted: #e3e7ef;
  --hero-text-shadow: #0b101caf;
  --hero-panel: #141924bd;
  --hero-panel-live: #1419247d;
  --warning: #ffbdab;
  --liked-ink: #ffb8c5;
  --liked-fill: #63384885;
  --liked-edge: #fdb4c27a;
  --shell: 1360px;
  --gutter: clamp(20px, 4.15vw, 68px);
  --header-height: 78px;
  --text-font: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --display-font: "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", "SimSun", Georgia, serif;
  font-family: var(--text-font);
  color: var(--ink);
  background: var(--page);
  scroll-padding-top: calc(var(--header-height) + 16px);
  scroll-behavior: smooth;
}
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #1b2330;
  --muted: #505c6f;
  --accent: #31568d;
  --page: #edf0f4;
  --page-glow: #fffffff2;
  --page-shade: #d1d9e779;
  --line: #3e4d692d;
  --glass-fill: #fdfdffb8;
  --glass-edge: #40537342;
  --glass-hover-edge: #4c659789;
  --bar-fill: #f4f6fafa;
  --bar-live: #eff2f8c9;
  --panel-fill: #f7f8fcee;
  --panel-live: #f1f4fac7;
  --chat-shell-fill: #f7f9fde8;
  --chat-shell-live: #f4f7fc91;
  --chat-rail-fill: #f2f6fcec;
  --chat-rail-live: #f8faffab;
  --chat-compose-fill: #f4f7fced;
  --chat-compose-live: #f5f8fcb8;
  --selection-start: #fefefff0;
  --selection-end: #d7e0f2d9;
  --selection-edge: #fff;
  --active-fill: #d9e4f6;
  --active-edge: #607aa565;
  --hover-fill: #576d9a18;
  --field-fill: #ffffffd9;
  --field-edge: #79869b;
  --card-top: #fff;
  --card-bottom: #f6f8fb;
  --viewer-top: #f9fafc;
  --viewer-bottom: #e9edf5;
  --dialog-backdrop: #18213580;
  --shadow: #2334523d;
  --subtle-shadow: #23345219;
  --primary-ink: #fff;
  --primary-top: #365d91;
  --primary-bottom: #294872;
  --primary-edge: #315282;
  --primary-hover: #294872;
  --hero-ink: #1b2433;
  --hero-muted: #28364a;
  --hero-text-shadow: #f3f6ff44;
  --hero-panel: #f0f3fad9;
  --hero-panel-live: #edf2f9a7;
  --warning: #9e3c25;
  --liked-ink: #9d2e50;
  --liked-fill: #fae5ed;
  --liked-edge: #b64c6d67;
}
:root[lang="en"] {
  --text-font: "Times New Roman", Times, serif;
  --display-font: var(--text-font);
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background:
    radial-gradient(ellipse 55% 500px at 13% 145px, var(--page-glow), transparent),
    radial-gradient(ellipse 60% 620px at 98% 370px, var(--page-shade), transparent),
    var(--page);
}
body:has(dialog[open]) { overflow: hidden; }
button, input, textarea { font: inherit; color: inherit; }
button, summary { cursor: pointer; }
button { border: 0; }
button:disabled, button[aria-disabled="true"] { cursor: default; opacity: .48; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
p, h1, h2, h3 { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.shell { width: min(var(--shell), calc(100% - var(--gutter) * 2)); margin-inline: auto; }

.glass {
  --glass-tint: var(--glass-fill);
  position: relative;
  border: 1px solid var(--glass-edge);
  background: var(--glass-tint);
  box-shadow: 0 5px 18px var(--subtle-shadow);
}
:where(.sidebar-glass, .chat-glass, .chat-glass-rail) { background-color: var(--glass-tint); }
[data-refraction="live"] {
  background-color: var(--glass-live-tint, var(--glass-tint));
  backdrop-filter: var(--live-refraction);
}
@supports (backdrop-filter: saturate(1)) or (-webkit-backdrop-filter: saturate(1)) {
  :is(.site-header, .hero-intro, .hero-controls, .sidebar-glass, .chat-glass, .chat-glass-rail):not([data-refraction="live"]) {
    background-color: var(--glass-live-tint, var(--glass-tint));
    -webkit-backdrop-filter: saturate(1.18) contrast(1.04);
    backdrop-filter: saturate(1.18) contrast(1.04);
  }
}
.glass:hover:is(button, summary, a):not(:disabled) { border-color: var(--glass-hover-edge); }
:is(.photo-index, .hero-expand, .hero-controls, .card-type, .card-link, .viewer-close, .viewer-stage .icon-button) {
  --glass-tint: #151b25b8;
  --glass-edge: #edf2fc65;
  --glass-hover-edge: #edf2fca8;
  --accent: #c5d8ff;
  color: #f5f7fc;
}
.site-header {
  --glass-live-tint: var(--bar-live);
  --sidebar-toggle-size: 40px;
  --sidebar-toggle-gap: 10px;
  --dock-progress: 0;
  position: sticky; top: 0; z-index: 10;
  background-color: var(--bar-fill); border-bottom: 1px solid var(--line);
}
.site-header[data-refraction="live"] { background-color: var(--glass-live-tint); }
.header-inner { min-height: var(--header-height); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.header-start { display: flex; min-width: 0; align-items: center; }
.sidebar-dock {
  position: relative; flex: none;
  width: calc((var(--sidebar-toggle-size) + var(--sidebar-toggle-gap)) * var(--dock-progress));
  height: var(--sidebar-toggle-size);
}
.brand { display: inline-flex; min-width: 0; align-items: center; justify-self: start; gap: 10px; }
.brand-mark {
  flex: none;
  transform: rotate(var(--brand-rotation, 0deg)); transform-origin: center;
}
.brand strong {
  display: -webkit-box; min-width: 0; overflow: hidden; overflow-wrap: anywhere;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-size: clamp(15px, 1.4vw, 19px); line-height: 1.2; letter-spacing: .055em;
}
:is(.top-nav, .catalog-view) { --segment-inset: 4px; }
.segment-highlight {
  position: absolute; inset-block: var(--segment-inset); left: 0; z-index: 0;
  width: var(--segment-width, 0px); border-radius: 999px; pointer-events: none;
  transform: translateX(var(--segment-offset, 0px));
  background: linear-gradient(155deg, var(--selection-start), var(--selection-end));
  box-shadow: inset 0 1px 1px var(--selection-edge), 0 2px 5px var(--subtle-shadow);
  transition: transform .32s cubic-bezier(.22,.8,.24,1), width .32s cubic-bezier(.22,.8,.24,1);
}
:not([data-highlight-ready]) > .segment-highlight { display: none; }
:is(.top-nav a, .catalog-view button) { position: relative; z-index: 1; transition: color .18s ease; }
.top-nav { display: flex; padding: var(--segment-inset); border-radius: 25px; gap: 2px; }
.top-nav a { display: grid; place-items: center; min-height: 34px; padding: 5px 17px; border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.top-nav a:hover { color: var(--ink); }
.top-nav a[aria-current] { color: var(--ink); }
:is(.top-nav:not([data-highlight-ready]) a[aria-current], .catalog-view:not([data-highlight-ready]) button[aria-pressed="true"]) {
  background: var(--selection-end); box-shadow: inset 0 1px 1px var(--selection-edge), 0 2px 5px var(--subtle-shadow);
}
.header-actions { --header-action-gap: 9px; display: flex; align-items: center; justify-self: end; gap: var(--header-action-gap); }
.top-search, .theme-toggle, .language-toggle, .nickname-toggle, .announcement-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 12px; min-height: 41px; border-radius: 23px; font-size: 13px; white-space: nowrap; }
.theme-toggle { width: 42px; padding: 0; }
.nickname-toggle { min-width: 44px; min-height: 44px; }
.announcement-toggle .icon { color: var(--accent); }
.top-search kbd { border: 1px solid var(--line); color: var(--muted); font: 10px var(--text-font); padding: 3px 5px; border-radius: 6px; }

.visitor-guide {
  margin-top: clamp(14px, 2vw, 24px);
  padding: clamp(12px, 2vw, 22px);
  border-radius: clamp(17px, 2vw, 26px);
  --glass-tint: var(--panel-fill);
}
.visitor-guide-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.visitor-guide-header h2 { font: 650 clamp(20px, 3vw, 27px)/1.2 var(--display-font); }
.visitor-guide-header button { min-height: 44px; flex: none; }
.visitor-guide-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  list-style: none; margin: 10px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line);
}
.visitor-guide-steps li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.visitor-guide-steps .icon { width: 17px; height: 17px; margin-top: 2px; color: var(--accent); }
.visitor-guide-steps h3 { font-size: 14px; line-height: 1.35; }
.visitor-guide-steps p { margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.5; }
@media (max-width: 700px) {
  .visitor-guide-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

.hero {
  --hero-control-inset: clamp(16px, 2.1vw, 31px);
  --hero-intro-inset: clamp(17px, 3vw, 45px);
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr);
  min-height: clamp(430px, 36vw, 530px);
  margin-top: 23px;
  border: 1px solid var(--glass-edge);
  border-radius: clamp(23px, 3vw, 40px);
  background: var(--card-top);
  box-shadow: 0 24px 62px -25px var(--shadow);
}
.hero-photo {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  isolation: isolate; overflow: hidden; padding: 0; border-radius: inherit;
  text-align: left; background: transparent; color: white;
}
.hero-photo:disabled { opacity: 1; }
.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  object-fit: cover; object-position: center; opacity: 0;
  transition: transform .85s cubic-bezier(.2,.7,.2,1);
}
.hero-slide[src$="braies.jpg"] { object-position: 50% 19%; }
.hero-slide[data-outgoing] { opacity: 1; }
.hero-slide[data-active] {
  z-index: 1; opacity: 1;
  transition: opacity .65s ease, transform .85s cubic-bezier(.2,.7,.2,1);
}
@media (hover: hover) {
  .hero-photo:hover .hero-slide { transform: scale(1.018); }
}
.hero-photo > :not(.hero-slide, .hero-shade) { z-index: 3; }
.hero-shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(0deg, #10141eaa, transparent 48%), linear-gradient(180deg, #10141e5c, transparent 28%); }
.photo-index { position: absolute; top: var(--hero-control-inset); left: var(--hero-control-inset); display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 20px; font-size: 12px; font-weight: 550; }
.photo-index > span:first-child { width: 6px; height: 6px; background: #e4ecfa; border-radius: 50%; box-shadow: 0 0 9px #f4f7ffbe; }
.hero-intro {
  position: relative; align-self: end; justify-self: start;
  margin: 120px var(--hero-intro-inset) var(--hero-intro-inset);
  max-width: calc(100% - 2 * var(--hero-intro-inset)); width: max-content;
  padding: clamp(24px, 3vw, 42px) clamp(23px, 3.5vw, 52px) clamp(22px, 2.7vw, 36px);
  border-radius: clamp(20px, 2.5vw, 35px);
  --glass-tint: var(--hero-panel);
  --glass-live-tint: var(--hero-panel-live);
  color: var(--hero-ink);
  box-shadow: 0 15px 36px var(--shadow);
}
.hero h1 { font: 620 clamp(42px, 6.1vw, 94px)/1.02 var(--display-font); letter-spacing: -.055em; overflow-wrap: anywhere; text-wrap: balance; text-shadow: 0 2px 12px var(--hero-text-shadow); }
.hero-copy { font-size: clamp(13px, 1.3vw, 17px); color: var(--hero-muted); line-height: 1.45; margin: 14px 0 23px; white-space: pre-wrap; overflow-wrap: anywhere; text-shadow: 0 1px 6px var(--hero-text-shadow); }
.hero-copy[hidden] + .primary-button { margin-top: 16px; }
.primary-button, .secondary-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 15px; border-radius: 30px; font-size: 13px; font-weight: 650; }
.primary-button { color: var(--primary-ink); background: linear-gradient(170deg, var(--primary-top), var(--primary-bottom)); border: 1px solid var(--primary-edge); box-shadow: inset 0 1px 0 #ffffff45, 0 4px 13px var(--subtle-shadow); transition: background .2s, transform .2s; }
.primary-button:hover:enabled, a.primary-button:hover { background: var(--primary-hover); transform: translateY(-1px); }
.hero-caption { position: absolute; bottom: clamp(25px, 3.3vw, 47px); right: clamp(74px, 7vw, 109px); text-align: right; font-size: 12px; letter-spacing: .045em; color: #eef2f9; }
.hero-expand { position: absolute; bottom: clamp(23px, 3.1vw, 45px); right: clamp(20px, 2.7vw, 38px); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; }
.hero-controls {
  position: absolute; top: var(--hero-control-inset); right: var(--hero-control-inset);
  display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 26px;
  --glass-live-tint: #161b257d;
}
.hero-control {
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border-radius: 50%; background: transparent;
}
.hero-control:is(:hover, :focus-visible):enabled { background: #edf2fc26; }
.hero-control:focus-visible { outline-offset: -2px; }

.catalog { margin-top: clamp(31px, 4vw, 56px); }
.catalog-entry {
  position: relative; height: clamp(58px, 6.2vw, 82px);
  margin-bottom: clamp(13px, 1.5vw, 19px);
}
.catalog-banner {
  --catalog-banner-radius: 22px;
  --catalog-dock-radius: 13px;
  --catalog-title-inset: clamp(15px, 2.3vw, 29px);
  --catalog-control-fill: var(--glass-fill);
  --catalog-control-ink: var(--muted);
  --glass-tint: var(--bar-fill);
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; overflow: hidden; text-align: start; color: var(--ink);
  border-radius: var(--catalog-banner-radius);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.catalog-banner[aria-expanded="true"] {
  --catalog-control-fill: var(--active-fill);
  --catalog-control-ink: var(--accent);
}
.catalog-banner:is([data-morphing], [data-docked]) {
  position: fixed; inset: 0 auto auto 0;
  z-index: 12; width: var(--morph-width); height: var(--morph-height);
  transform: translate3d(var(--morph-x), var(--morph-y), 0);
}
.catalog-banner[data-morphing] {
  border-radius: calc(var(--catalog-banner-radius) + (var(--catalog-dock-radius) - var(--catalog-banner-radius)) * var(--morph-shape));
  background-color: color-mix(in srgb, var(--catalog-control-fill) var(--morph-fill, 0%), var(--bar-fill));
}
.catalog-banner[data-docked] {
  --glass-tint: var(--catalog-control-fill);
  border-radius: var(--catalog-dock-radius);
}
.catalog-banner-title {
  position: absolute; top: 50%; left: var(--catalog-title-inset);
  font: 620 clamp(28px, 3.15vw, 46px)/1.12 var(--display-font);
  letter-spacing: -.035em; white-space: nowrap;
  transform: translateY(-50%); transform-origin: left center;
}
.catalog-banner-icon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 20px; height: 20px; color: var(--catalog-control-ink); opacity: 0;
}
.catalog-banner[data-morphing] .catalog-banner-title {
  left: var(--morph-title-left, var(--catalog-title-inset));
  opacity: var(--morph-title-opacity, 1);
  transform: translateY(-50%) scale(var(--morph-title-scale, 1));
}
.catalog-banner[data-morphing] .catalog-banner-icon {
  opacity: var(--morph-icon-opacity, 0);
  transform: translate(-50%, -50%) scale(var(--morph-icon-scale, 1));
}
.catalog-banner[data-docked] .catalog-banner-title { opacity: 0; }
.catalog-banner[data-docked] .catalog-banner-icon { opacity: 1; }
.catalog-banner[data-docked]:hover .catalog-banner-icon { color: var(--ink); }
.catalog-workspace {
  --sidebar-width: clamp(224px, 19vw, 248px);
  --sidebar-ease: cubic-bezier(.22,.8,.24,1);
  display: grid; grid-template-columns: 0px minmax(0, 1fr); align-items: start; column-gap: 0;
  transition: grid-template-columns .28s var(--sidebar-ease), column-gap .28s var(--sidebar-ease);
}
.catalog-workspace[data-sidebar-open] {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  column-gap: clamp(13px, 1.5vw, 22px);
}
.catalog-main { min-width: 0; container: catalog-results / inline-size; }
.result-count { color: var(--muted); font-size: 12px; }
.sidebar-close {
  display: grid; flex: none; place-items: center; padding: 0;
  width: 40px; height: 40px; border-radius: 13px; color: var(--muted);
}
.sidebar-close:hover { color: var(--ink); }
.catalog-view { display: flex; flex: none; gap: 2px; padding: var(--segment-inset); border-radius: 26px; }
.catalog-view button { display: inline-flex; flex: 1; min-width: 0; align-items: center; justify-content: center; gap: 6px; min-height: 35px; padding: 6px 9px; border-radius: 21px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.catalog-view button:hover { color: var(--ink); }
.catalog-view button[aria-pressed="true"] { color: var(--ink); }
.catalog-view .icon { width: 15px; height: 15px; color: var(--accent); }
.catalog-sidebar, .catalog-drawer { background: transparent; }
/* The lens sits beside the content so chat can also sample the surface underneath it. */
.sidebar-glass {
  --glass-tint: var(--panel-fill); --glass-live-tint: var(--panel-live);
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
}
.catalog-sidebar {
  position: sticky; top: calc(var(--header-height) + 6px); min-width: 0;
  height: max(370px, calc(100dvh - var(--sidebar-top-in-view, var(--header-height)) - 16px)); border-radius: 22px;
  overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.catalog-workspace[data-sidebar-open] .catalog-sidebar { opacity: 1; pointer-events: auto; }
.catalog-sidebar .sidebar-content { min-width: calc(var(--sidebar-width) - 16px); }
.sidebar-content { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 370px; padding: 12px; }
.sidebar-heading { display: flex; flex: none; justify-content: space-between; align-items: center; gap: 8px; padding-inline: 2px; }
.sidebar-controls {
  display: flex; flex-direction: column; gap: 9px; min-height: 92px;
  overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 3px;
}
.sidebar-controls > * { flex-shrink: 0; }
.sidebar-title { display: grid; gap: 4px; min-width: 0; }
.sidebar-title h2 { font: 620 22px/1.15 var(--display-font); letter-spacing: -.025em; }
.sidebar-close { width: 34px; height: 34px; border-radius: 50%; }
.sidebar-close .icon { width: 16px; height: 16px; }
.sidebar-results { display: none; }
.filter-disclosure-toggle, .filter-button {
  display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 36px;
  padding: 5px 9px; border-radius: 10px; text-align: start; font-size: 13px; font-weight: 550;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.filter-disclosure-toggle { width: 100%; }
.filter-disclosure-label, .filter-button span { flex: 1; min-width: 0; }
.filter-disclosure-toggle .icon, .filter-button .icon { width: 15px; height: 15px; color: var(--accent); }
.filter-disclosure-toggle .chevron { width: 12px; height: 12px; transition: transform .2s ease; }
.filter-disclosure-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.filter-count {
  display: grid; place-items: center; min-width: 20px; min-height: 20px; padding-inline: 4px;
  border-radius: 10px; background: var(--active-fill); color: var(--accent); font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.sidebar-reveal { display: flow-root; min-height: 0; }
.sidebar-reveal[data-revealing] { overflow: hidden; }
.sidebar-filters { margin-top: 5px; }
.filter-buttons {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 5px;
  /* Keep the second button beside the first when the options follow the first in the DOM. */
  grid-auto-flow: row dense;
}
.filter-buttons > .sidebar-reveal { grid-column: 1 / -1; }
.filter-buttons > .filter-button:nth-of-type(n + 3) { margin-top: 5px; }
.filter-button .filter-chevron { display: none; }
.filter-disclosure[data-full-size] > .filter-disclosure-toggle { display: none; }
.filter-disclosure[data-full-size] .sidebar-filters { margin-top: 0; }
.filter-disclosure[data-full-size] .filter-buttons { display: flex; flex-direction: column; gap: 0; }
.filter-disclosure[data-full-size] .filter-button:not(:first-child) { margin-top: 6px; }
.filter-disclosure[data-full-size] .filter-button { min-height: 41px; padding: 7px 10px; border-radius: 12px; }
.filter-disclosure[data-full-size] .filter-button .filter-chevron {
  display: block; width: 12px; height: 12px; transition: transform .2s ease;
}
.filter-disclosure[data-full-size] .filter-button[aria-expanded="true"] .filter-chevron { transform: rotate(180deg); }
.filter-disclosure[data-full-size] .filter-button[data-active]::after { display: none; }
.filter-button:focus-visible, .filter-disclosure-toggle:focus-visible { outline-offset: -3px; }
.filter-button[aria-expanded="true"], .filter-button[data-active] {
  border-color: var(--active-edge); --glass-tint: var(--active-fill);
}
.filter-button[data-active]::after {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.filter-menu {
  margin-top: 5px; max-height: min(190px, 32dvh); overflow: auto; scrollbar-width: thin; padding: 4px;
  border-radius: 10px; --glass-tint: var(--field-fill); box-shadow: inset 0 1px 1px var(--selection-edge);
}
.filter-menu label { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 8px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.filter-menu label:hover { background: var(--hover-fill); }
.filter-options-empty { padding: 6px 8px; color: var(--muted); font-size: 12px; }
.sort-hint { display: block; border-top: 1px solid var(--line); padding: 7px 8px 3px; color: var(--muted); font-size: 11px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.catalog-search { display: flex; align-items: center; gap: 7px; min-width: 0; width: 100%; min-height: 42px; padding: 0 10px; border-radius: 12px; color: var(--muted); }
.catalog-search .icon { width: 17px; height: 17px; }
.catalog-search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.catalog-search input { font-size: 14px; color: var(--ink); width: 100%; min-width: 0; min-height: 40px; border: 0; background: transparent; outline: none; }
.catalog-search input::placeholder, .comment-form textarea::placeholder { color: var(--muted); }
.catalog-tools { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-bottom: 13px; }
.sort-popular {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 6px 12px;
  border-radius: 20px; font-size: 13px; font-weight: 600; touch-action: manipulation;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.sort-popular .icon { width: 15px; height: 15px; color: var(--accent); }
.sort-popular[aria-pressed="true"] { --glass-tint: var(--active-fill); border-color: var(--active-edge); color: var(--accent); }
.active-filters { display: flex; gap: 7px; flex-wrap: wrap; min-width: 0; }
.active-filters button { display: inline-flex; align-items: center; gap: 6px; border-radius: 17px; padding: 5px 8px; font-size: 12px; }
.active-filters .icon { width: 13px; height: 13px; }
.catalog-status { margin-bottom: 13px; color: var(--warning); font-size: 13px; }

.photo-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(13px, 1.6vw, 23px); align-items: stretch; }
@container catalog-results (max-width: 760px) {
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.photo-card { min-width: 0; display: flex; flex-direction: column; padding: 5px; background: linear-gradient(145deg, var(--card-top), var(--card-bottom) 56%); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 11px 24px -13px var(--shadow); }
.card-picture { position: relative; display: block; width: 100%; padding: 0; aspect-ratio: 1.48; overflow: hidden; border-radius: 14px; background: var(--card-bottom); }
.card-picture img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.card-picture:hover img { transform: scale(1.035); }
.card-type, .card-link { position: absolute; }
.card-type { left: 10px; top: 10px; font-size: 11px; font-weight: 600; padding: 5px 9px; border-radius: 20px; }
.card-link { right: 10px; bottom: 10px; display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; }
.card-link .icon { width: 16px; height: 16px; }
.card-caption { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 5px 10px; padding: 11px 10px 7px; }
.card-date, .card-location { font-size: 12px; color: var(--muted); }
.card-date { font-variant-numeric: tabular-nums; }
.card-location { display: flex; gap: 4px; align-items: center; overflow-wrap: anywhere; }
.card-location .icon { flex: none; width: 14px; height: 14px; }
.card-reactions { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 8px 7px; margin-top: auto; }
.reaction { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 49px; min-height: 34px; padding: 4px 9px; border-radius: 20px; color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; touch-action: manipulation; }
.reaction .icon { width: 17px; height: 17px; }
.reaction[aria-pressed="true"] { color: var(--liked-ink); --glass-edge: var(--liked-edge); --glass-hover-edge: var(--liked-edge); --glass-tint: var(--liked-fill); }
.reaction[aria-pressed="true"] .icon { fill: currentColor; }
.group-list { display: grid; gap: clamp(10px, 1.25vw, 17px); }
.photo-group {
  --group-print-radius: 12px;
  --group-print-rim: #d8e1efb8;
  --group-print-edge: #8795ad;
  position: relative;
}
:root[data-theme="light"] .photo-group {
  --group-print-rim: #f9fafee8;
  --group-print-edge: #8492a8;
}
.photo-group[data-drawing] { z-index: 2; }
.group-toggle {
  display: grid; width: 100%; grid-template-columns: clamp(160px, 24vw, 288px) minmax(0, 1fr) auto;
  align-items: center; gap: clamp(18px, 3vw, 46px);
  padding: 16px clamp(18px, 3vw, 38px) 16px 18px; border-radius: 23px; text-align: start;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.group-stack {
  position: relative; display: block; height: clamp(90px, 10.5vw, 144px);
  perspective: 800px; perspective-origin: 50% 36%;
}
.group-stack img, .group-flight {
  position: absolute;
  border: 1px solid var(--group-print-rim); border-radius: var(--group-print-radius);
  background: var(--card-bottom);
  box-shadow: 0 2px 0 var(--group-print-edge), 0 8px 20px -5px var(--shadow);
}
.group-stack img {
  top: 6%; left: 2%; width: 88%; height: 76%; object-fit: cover;
}
.group-stack img:nth-last-child(2) {
  transform: translate3d(2%, 13%, -8px) rotateX(8deg) rotateZ(-1.5deg);
  filter: brightness(.9);
}
.group-stack img:nth-last-child(3) {
  transform: translate3d(4%, 26%, -16px) rotateX(12deg) rotateZ(-2.5deg);
  filter: brightness(.78);
}
.group-flight-layer {
  position: absolute; inset: 0; z-index: 3; overflow: visible; pointer-events: none;
}
.group-flight {
  overflow: hidden; transform-origin: center; backface-visibility: hidden;
}
.group-flight img {
  width: 100%; height: 100%; object-fit: cover;
}
.group-caption { display: grid; gap: 8px; min-width: 0; }
.group-caption strong { font: 620 clamp(22px, 2.6vw, 37px)/1.15 var(--display-font); overflow-wrap: anywhere; }
.group-caption small { color: var(--muted); font-size: 13px; font-weight: 500; }
.group-arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.group-arrow .icon { transition: transform .3s ease; }
.photo-group[data-expanded] .group-arrow .icon { transform: rotate(180deg); }
.group-panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .42s cubic-bezier(.2,.72,.22,1), opacity .23s ease; }
.photo-group[data-expanded] .group-panel { grid-template-rows: 1fr; opacity: 1; }
.group-panel-inner { min-height: 0; overflow: hidden; }
.group-photos { padding: 14px 5px 8px; }
.group-photos .photo-card {
  position: relative;
  isolation: isolate;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.group-photos .photo-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border: 1px solid var(--line);
  border-radius: inherit;
  background: rgb(128 128 128 / .08);
  box-shadow: 0 8px 20px -14px var(--shadow);
  pointer-events: none;
}
.group-photos .card-picture { background: transparent; }
.group-photos .photo-card::before,
.group-photos .photo-card :is(.card-caption, .card-reactions, .card-type, .card-link) {
  transition: opacity .19s ease-out;
}
.group-photos .photo-card[data-awaiting-draw] { visibility: hidden; }
.group-photos .photo-card[data-awaiting-draw]::before,
.group-photos .photo-card[data-awaiting-draw] :is(.card-caption, .card-reactions, .card-type, .card-link) {
  opacity: 0;
}
.empty { text-align: center; padding: 36px 14px; border-radius: 24px; }
.empty p { margin: 8px 0 14px; }
.footer { margin-top: 42px; padding: 23px 0 28px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.footer-brand { color: var(--ink); font-weight: 650; }
.footer p { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.footer-guide { padding: 0 4px; min-height: 44px; flex: none; color: var(--accent); background: none; }
.footer-guide:hover { text-decoration: underline; text-underline-offset: 3px; }
.nickname-dialog {
  width: min(420px, calc(100% - 32px)); padding: 22px; border-radius: 21px;
  max-height: calc(100dvh - 32px); overflow: auto;
  --glass-tint: var(--panel-fill);
}
:is(.nickname-dialog, .photo-viewer, .catalog-drawer) { color: var(--ink); }
.nickname-dialog::backdrop { background: var(--dialog-backdrop); }
.nickname-dialog[open] { animation: viewer-in .24s ease both; }
.nickname-form { display: grid; gap: 10px; }
.nickname-form > p { font-size: 14px; color: var(--muted); line-height: 1.4; }
.nickname-form label { font-size: 14px; color: var(--muted); }
.nickname-form input {
  width: 100%; min-width: 0; min-height: 44px; padding: 9px 10px; border: 1px solid var(--field-edge);
  border-radius: 11px; background: var(--field-fill); font-size: 16px;
}
.editor-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.nickname-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.nickname-actions .editor-actions { margin-inline-start: auto; }
.nickname-actions button { min-height: 44px; }
.nickname-actions .icon { width: 16px; height: 16px; }

.announcement-dialog {
  --glass-tint: var(--panel-fill);
  position: fixed; inset: 0;
  width: min(540px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; padding: clamp(17px, 4vw, 28px); overflow: auto; overscroll-behavior: contain;
  border-radius: 24px; color: var(--ink); box-shadow: 0 18px 60px var(--shadow);
  backdrop-filter: blur(16px) saturate(1.18);
}
.announcement-dialog[open] { animation: viewer-in .24s ease both; }
.announcement-dialog::backdrop { background: var(--dialog-backdrop); }
.announcement-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.announcement-label { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 13px; font-weight: 650; }
.announcement-dialog h2 { font: 650 clamp(23px, 4vw, 31px)/1.25 var(--display-font); overflow-wrap: anywhere; }
.announcement-dialog h2:focus { outline: none; }
.announcement-dialog p { margin-top: 13px; color: var(--muted); font-size: 15px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }

.photo-viewer {
  width: min(1180px, calc(100% - 36px)); max-width: none;
  max-height: calc(100dvh - 30px); margin: auto; padding: 0; overflow: hidden;
  border: 1px solid var(--glass-edge); border-radius: 26px;
  background: linear-gradient(145deg, var(--viewer-top), var(--viewer-bottom) 77%);
  box-shadow: 0 16px 80px var(--shadow);
}
.photo-viewer[open] { animation: viewer-in .24s ease both; }
.photo-viewer::backdrop { background: var(--dialog-backdrop); }
@keyframes viewer-in { from { opacity: 0; transform: translateY(8px) scale(.99); } }
.icon-button { display: inline-grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; }
.viewer-close { position: absolute; top: 11px; right: 11px; z-index: 1; }
.viewer-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(265px, 30%); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; }
.viewer-main { min-width: 0; padding: 11px; align-content: center; }
.viewer-stage { position: relative; container-type: inline-size; }
.viewer-stage .icon-button { position: absolute; top: 50%; transform: translateY(-50%); }
.previous-photo { left: 9px; }
.next-photo { right: 9px; }
.viewer-picture {
  display: grid; place-items: center; width: max-content; max-width: 100%; min-height: 120px;
  margin-inline: auto; overflow: hidden; border-radius: 17px; background: var(--card-bottom);
}
.viewer-picture:has(#viewer-image[hidden]) { width: 100%; min-height: clamp(140px, 38dvh, 340px); }
.viewer-picture img {
  width: auto; height: auto; max-width: 100cqw;
  max-height: clamp(180px, calc(100dvh - 160px), 650px);
}
.viewer-picture p { padding: 24px 58px; color: var(--muted); font-size: 14px; text-align: center; }
.viewer-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 8px 5px; }
.viewer-caption-text { flex: 1 1 140px; min-width: 0; color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.viewer-photo-actions { display: flex; flex: none; align-items: center; gap: 8px; margin-inline-start: auto; }
.viewer-photo-actions .secondary-button { min-height: 44px; }
.viewer-original-error { margin: 0 8px 5px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.photo-note { display: grid; gap: 8px; margin: 7px 8px 3px; padding-top: 9px; border-top: 1px solid var(--line); }
.photo-note h3 { font-size: 14px; color: var(--muted); }
#viewer-description { line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.viewer-main:has(.photo-note:not([hidden])) .viewer-picture img { max-height: clamp(160px, calc(100dvh - 245px), 600px); }
.viewer-count { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.viewer-discussion { display: flex; flex-direction: column; min-height: 0; min-width: 0; max-height: min(calc(100dvh - 32px), 740px); padding: 15px; border-left: 1px solid var(--line); }
.discussion-heading { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-height: 44px; margin-right: 45px; margin-bottom: 9px; }
.discussion-heading h3 { font-size: 18px; }
.discussion-heading > span { font-size: 12px; color: var(--muted); }
.discussion-heading .reaction { margin-left: auto; }
.comment-stream { flex: 1; min-height: 64px; overflow: auto; padding: 8px 1px; border-block: 1px solid var(--line); }
.comment-stream > p { color: var(--muted); font-size: 13px; padding: 8px 0; }
.comments { list-style: none; margin: 0; padding: 0; }
.comments li { padding: 10px 0; overflow-wrap: anywhere; }
.comments li + li { border-top: 1px solid var(--line); }
.comments li div { display: flex; gap: 5px 8px; align-items: baseline; flex-wrap: wrap; }
.comments li strong { font-size: 13px; }
.comments time { font-size: 11px; color: var(--muted); }
.comments li p { font-size: 14px; line-height: 1.5; white-space: pre-wrap; margin-top: 4px; }
.comment-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 10px; }
.comment-form textarea { grid-column: 1 / -1; resize: vertical; min-height: 67px; border: 1px solid var(--field-edge); border-radius: 11px; min-width: 0; padding: 8px 10px; background: var(--field-fill); font-size: 14px; }
.comment-form .primary-button { justify-self: end; min-height: 44px; }
.comment-form .form-status { grid-column: 1 / -1; }
.nickname-chip {
  display: inline-flex; align-items: center; justify-self: start; gap: 6px;
  min-width: 0; max-width: 100%; min-height: 44px; padding: 6px 10px; border-radius: 22px;
  color: var(--muted); font-size: 13px;
}
.nickname-chip:hover { color: var(--ink); }
.nickname-chip .icon { width: 15px; height: 15px; }
.nickname-chip .nickname-edit-icon { width: 13px; height: 13px; margin-inline-start: 2px; }
.nickname-chip [data-current-nickname] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-status { color: var(--accent); font-size: 12px; line-height: 1.4; }

.site-chat {
  --chat-glass-lip: 13px;
  position: relative;
  display: flex; flex-direction: column; flex: 1 2 46%; min-height: 202px;
  margin-top: auto; border: 1px solid var(--glass-edge); border-radius: 16px; overflow: hidden;
}
.chat-glass {
  --glass-tint: var(--chat-shell-fill); --glass-live-tint: var(--chat-shell-live);
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 var(--selection-edge), inset 0 -1px 0 var(--line);
}
.chat-glass-rail {
  --glass-tint: var(--chat-rail-fill); --glass-live-tint: var(--chat-rail-live);
  position: absolute; inset-inline: 0; z-index: -1; border-radius: 14px; pointer-events: none;
  box-shadow: inset 0 1px 0 var(--selection-edge), inset 0 -1px 0 var(--line);
}
/* The short lips sample the messages as they move underneath, without moving the controls. */
.chat-glass-rail-top { top: 0; bottom: calc(-1 * var(--chat-glass-lip)); }
.chat-glass-rail-bottom {
  --glass-tint: var(--chat-compose-fill); --glass-live-tint: var(--chat-compose-live);
  top: calc(-1 * var(--chat-glass-lip)); bottom: 0;
}
.site-chat[data-mode="minimized"] { flex: none; min-height: 0; }
.chat-header {
  position: relative; z-index: 2;
  display: grid; flex: none; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 8px; padding: 3px 4px 3px 8px;
}
.chat-header h3 { font: 650 15px/1.2 var(--text-font); }
.chat-window-controls { display: flex; align-items: center; gap: 2px; }
.chat-window-grip { display: none; }
.chat-emblem {
  display: grid; place-items: center; width: 27px; height: 27px;
  border-radius: 8px; background: var(--active-fill); color: var(--accent);
}
.chat-emblem .icon, .chat-toggle .icon { width: 16px; height: 16px; }
.chat-toggle {
  display: grid; place-items: center; width: 36px; height: 36px;
  padding: 0; border-radius: 9px; background: transparent; color: var(--muted);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.chat-toggle:hover { background: var(--hover-fill); color: var(--ink); }
.chat-toggle:focus-visible { outline-offset: -2px; }
.chat-toggle[aria-expanded="true"] .chat-toggle-stroke { display: none; }
.site-chat[data-mode="floating"] .chat-maximize { color: var(--accent); }
.site-chat[data-mode="docked"] .chat-dock-icon,
.site-chat[data-mode="floating"] .chat-maximize-icon { display: none; }
.chat-panel {
  position: relative; z-index: 1;
  display: grid; flex: 1; grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0; border-top: 1px solid transparent;
}
.sidebar-content[data-resizing-chat] > :is(.sidebar-controls, .site-chat) { flex: none; min-height: 0; }
.sidebar-content[data-resizing-chat] > .sidebar-controls { overflow: hidden; }
.chat-panel[hidden][data-exiting] { display: grid !important; }
.chat-history {
  display: flex; flex-direction: column; gap: 8px; min-height: 0;
  overflow: auto; overscroll-behavior: contain; overflow-anchor: none; scrollbar-width: thin;
  padding: calc(var(--chat-glass-lip) + 4px) 8px;
}
.chat-history > * { flex-shrink: 0; }
.chat-history:focus-visible { outline-offset: -3px; }
@media (max-height: 540px) {
  .site-chat { --chat-glass-lip: 6px; }
  .chat-history { padding-block: 9px; }
}
.chat-history-feedback { display: grid; justify-items: center; gap: 5px; text-align: center; }
.chat-history-feedback:not(:has(> :not([hidden]))) { display: none; }
.chat-history-feedback p { color: var(--muted); font-size: 12px; line-height: 1.4; }
.chat-history:not(:has(.chat-message)) .chat-history-feedback { margin: auto; }
.chat-history-action { align-self: center; min-height: 32px; padding: 4px 10px; font-size: 12px; }
.chat-messages { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.chat-messages:empty { display: none; }
.chat-message { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.chat-avatar {
  --avatar-hue: 214;
  display: grid; flex: none; place-items: center; width: 25px; height: 25px;
  border: 1px solid hsl(var(--avatar-hue) 55% 59% / .26); border-radius: 8px;
  background: hsl(var(--avatar-hue) 55% 62% / .2); color: var(--ink); font-size: 12px; font-weight: 650;
}
.chat-avatar[data-tone="1"] { --avatar-hue: 164; }
.chat-avatar[data-tone="2"] { --avatar-hue: 38; }
.chat-avatar[data-tone="3"] { --avatar-hue: 285; }
.chat-message-content { display: grid; justify-items: start; gap: 3px; min-width: 0; }
.chat-message-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 5px; min-width: 0; }
.chat-message strong { color: var(--muted); font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; }
.chat-message time { color: var(--muted); font-size: 10px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.chat-message p {
  max-width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 3px 10px 10px;
  background: var(--card-top); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap;
}
.chat-message[data-own] { flex-direction: row-reverse; }
.chat-message[data-own] .chat-message-content { justify-items: end; }
.chat-message[data-own] .chat-message-meta { justify-content: flex-end; }
.chat-message[data-own] p { border-color: var(--active-edge); border-radius: 10px 3px 10px 10px; background: var(--active-fill); }
.chat-form {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px;
  padding: 7px; border-top: 1px solid transparent;
}
.chat-form textarea {
  grid-column: 1 / -1; width: 100%; min-width: 0; max-height: 88px; padding: 6px 8px;
  resize: none; border: 1px solid var(--field-edge); border-radius: 9px;
  background: var(--field-fill); color: var(--ink); font-size: 14px; line-height: 1.35;
}
.chat-form textarea::placeholder { color: var(--muted); }
.chat-form textarea:focus-visible { outline-offset: 1px; }
.chat-form .nickname-chip { gap: 4px; min-height: 34px; padding: 4px 7px; font-size: 11px; }
.chat-form .nickname-chip .icon { width: 13px; height: 13px; }
.chat-form .nickname-chip .nickname-edit-icon { display: none; }
.chat-send { min-height: 34px; gap: 4px; padding: 4px 9px; font-size: 12px; white-space: nowrap; }
.chat-send .icon { width: 12px; height: 12px; }
.chat-form .form-status { grid-column: 1 / -1; font-size: 11px; }

.floating-chat {
  --floating-chat-width: min(380px, calc(100vw - 24px));
  --floating-chat-height: min(480px, 55dvh);
  position: fixed; z-index: 20;
  inset: max(12px, calc(100dvh - var(--floating-chat-height) - 12px)) auto auto max(12px, calc(100vw - var(--floating-chat-width) - 12px));
  width: var(--floating-chat-width); max-width: var(--chat-viewport-width, calc(100vw - 24px));
  height: var(--floating-chat-height); max-height: var(--chat-viewport-height, calc(100dvh - 24px));
  margin: 0; padding: 0; border: 0; border-radius: 20px; overflow: visible;
  color: var(--ink); background: transparent;
}
.floating-chat::backdrop { background: transparent; pointer-events: none; }
.floating-chat > .site-chat {
  height: 100%; min-height: 0; margin: 0; border-radius: inherit;
  box-shadow: 0 16px 48px var(--shadow), 0 3px 12px var(--subtle-shadow);
}
.floating-chat[data-frosted] .chat-glass:where([data-refraction="live"]) {
  backdrop-filter: blur(var(--chat-frost-blur)) var(--live-refraction);
}
.floating-chat[data-frosted] .chat-glass:where(:not([data-refraction="live"])) {
  -webkit-backdrop-filter: blur(var(--chat-frost-blur)) saturate(1.18) contrast(1.04);
  backdrop-filter: blur(var(--chat-frost-blur)) saturate(1.18) contrast(1.04);
}
.floating-chat[data-resizing] :is(.chat-glass, .chat-glass-rail),
.floating-chat :is(.chat-glass, .chat-glass-rail)[data-refraction-pending] {
  -webkit-backdrop-filter: blur(max(16px, var(--chat-frost-blur, 0px))) saturate(1.18) contrast(1.04);
  backdrop-filter: blur(max(16px, var(--chat-frost-blur, 0px))) saturate(1.18) contrast(1.04);
}
.floating-chat .chat-header { padding-inline: 11px 5px; cursor: grab; touch-action: none; user-select: none; }
.floating-chat[data-dragging] .chat-header { cursor: grabbing; }
.floating-chat .chat-header:focus-visible { outline-offset: -3px; }
.floating-chat .chat-window-grip {
  display: block; width: 12px; height: 18px; margin-inline-end: 5px;
  color: var(--muted); opacity: .7;
  background: radial-gradient(circle, currentColor 1px, transparent 1.5px) center / 5px 5px;
}
.chat-toggle[aria-controls="chat-frost-panel"][aria-expanded="true"] {
  background: var(--active-fill); color: var(--accent);
}
.chat-frost-panel {
  --glass-tint: var(--panel-fill);
  position: absolute; top: calc(100% + 1px); inset-inline-end: 8px;
  width: min(220px, calc(100% - 16px)); padding: 9px 12px 5px;
  border-radius: 12px; cursor: default;
}
.chat-frost-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 13px; line-height: 1.3;
}
.chat-frost-heading span { color: var(--muted); font-variant-numeric: tabular-nums; }
.chat-frost-panel input {
  display: block; width: 100%; min-height: 32px; margin: 2px 0 0;
  accent-color: var(--accent); cursor: pointer;
}
.floating-chat .chat-history { padding-inline: 12px; }
.floating-chat .chat-form { padding-inline: 10px 26px; }
.floating-chat [data-chat-resize] { position: absolute; z-index: 4; touch-action: none; }
.floating-chat :is([data-chat-resize="n"], [data-chat-resize="s"]) {
  inset-inline: 18px 30px; height: 10px; cursor: ns-resize;
}
.floating-chat [data-chat-resize="n"] { top: -5px; }
.floating-chat [data-chat-resize="s"] { bottom: -5px; }
.floating-chat :is([data-chat-resize="w"], [data-chat-resize="e"]) {
  inset-block: 18px 30px; width: 10px; cursor: ew-resize;
}
.floating-chat [data-chat-resize="w"] { left: -5px; }
.floating-chat [data-chat-resize="e"] { right: -5px; }
.floating-chat :is([data-chat-resize="ne"], [data-chat-resize="sw"], [data-chat-resize="nw"]) {
  width: 22px; height: 22px;
}
.floating-chat [data-chat-resize="ne"] { right: -4px; top: -4px; cursor: nesw-resize; }
.floating-chat [data-chat-resize="sw"] { left: -4px; bottom: -4px; cursor: nesw-resize; }
.floating-chat [data-chat-resize="nw"] { left: -4px; top: -4px; cursor: nwse-resize; }
.chat-resize-corner {
  right: 2px; bottom: 2px; display: grid; place-items: center;
  width: 24px; height: 24px; padding: 0; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: nwse-resize;
}
.chat-resize-corner:hover, .chat-resize-corner:focus-visible, .floating-chat[data-resizing] .chat-resize-corner {
  background: var(--hover-fill); color: var(--accent);
}
.chat-resize-corner:focus-visible { outline-offset: -2px; }
.chat-resize-corner .icon { width: 16px; height: 16px; }

@media (max-width: 1000px) {
  .nickname-toggle { width: 44px; padding: 0; }
  .announcement-toggle { width: 42px; padding: 0; }
  .nickname-toggle span, .announcement-toggle span { display: none; }
}
@media (max-width: 900px) {
  .header-inner { gap: 10px; }
  .top-search kbd { display: none; }
  .hero { min-height: clamp(390px, 57vw, 500px); }
  .hero h1 { font-size: clamp(42px, 7vw, 66px); }
  .hero-caption { top: calc(var(--hero-control-inset) + 42px); bottom: auto; left: var(--hero-control-inset); right: 74px; text-align: left; }
  .hero-caption { text-shadow: 0 1px 7px #0b101c; }
  .hero-expand { top: calc(var(--hero-control-inset) + 56px); bottom: auto; right: var(--hero-control-inset); width: 42px; height: 42px; }
  .photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .viewer-discussion { padding: 12px; }
}
@media (max-width: 800px) {
  .floating-chat {
    --floating-chat-width: min(300px, 84vw);
    --floating-chat-height: min(380px, max(205px, 43dvh), calc(100dvh - 24px));
  }
  .chat-resize-corner { width: 30px; height: 30px; }
  .floating-chat .chat-form { padding-inline-end: 32px; }
  .catalog-workspace { display: block; }
  .catalog-sidebar { display: none; }
  .catalog-drawer {
    position: fixed; inset: 0 auto 0 0; margin: 0; padding: 0;
    width: min(328px, calc(100% - 28px)); max-width: none;
    height: 100dvh; max-height: 100dvh; border-radius: 0 24px 24px 0;
    overflow: hidden auto; overscroll-behavior: contain;
  }
  .catalog-drawer[open] { animation: catalog-drawer-in .28s cubic-bezier(.22,.8,.24,1) both; }
  .catalog-drawer[open][data-closing] { animation: catalog-drawer-out .22s ease-in both; }
  .catalog-drawer::backdrop {
    background: var(--dialog-backdrop);
    animation: catalog-backdrop-in .23s ease-out both;
  }
  .catalog-drawer[data-closing]::backdrop { animation: catalog-backdrop-out .22s ease-in both; }
  .catalog-drawer .sidebar-content {
    min-height: 430px;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  }
  .sidebar-close { width: 40px; height: 40px; }
  .sidebar-results { display: flex; flex: none; justify-content: center; }
  .catalog-search input, .chat-form textarea { font-size: 16px; }
  .sort-popular { min-height: 44px; }
  .filter-disclosure-toggle, .filter-button { min-height: 42px; }
  .filter-disclosure[data-full-size] .filter-button { min-height: 43px; }
  .filter-menu label { min-height: 40px; }
  .chat-toggle, .chat-send, .chat-form .nickname-chip { min-height: 44px; }
  .chat-toggle { width: 44px; }
  .chat-form .nickname-chip .nickname-edit-icon { display: block; }
}
@keyframes catalog-drawer-in { from { transform: translateX(-100%); } }
@keyframes catalog-drawer-out { to { transform: translateX(-100%); } }
@keyframes catalog-backdrop-in { from { opacity: 0; } }
@keyframes catalog-backdrop-out { to { opacity: 0; } }
@media (max-width: 660px) {
  :root { --gutter: 14px; --header-height: 61px; }
  .site-header { --sidebar-toggle-size: 38px; --sidebar-toggle-gap: 7px; }
  .header-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .brand { gap: 7px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand strong { font-size: 15px; line-height: 1.1; }
  .top-nav { display: none; }
  .header-actions { --header-action-gap: 6px; }
  .top-search, .theme-toggle, .language-toggle, .announcement-toggle { min-height: 42px; }
  .top-search {
    flex: none; width: calc(42px * (1 - var(--dock-progress))); padding: 0; overflow: hidden;
    margin-inline-end: calc(-1 * var(--header-action-gap) * var(--dock-progress));
    opacity: calc(1 - var(--dock-progress));
  }
  .top-search span { display: none; }
  .site-header[data-catalog-docked] .top-search { visibility: hidden; border-width: 0; }
  .language-toggle { padding: 6px 10px; }
  .hero { --hero-control-inset: 14px; --hero-intro-inset: 11px; margin-top: 13px; min-height: clamp(350px, 103vw, 485px); }
  .hero-slide[src$="braies.jpg"] { object-position: 53% 50%; }
  .hero-intro { justify-self: stretch; max-width: none; width: auto; padding: 18px; }
  .hero h1 { font-size: clamp(38px, 10.3vw, 62px); text-wrap: initial; }
  :root[lang="en"] .hero h1 { font-size: clamp(34px, 9.1vw, 54px); }
  .hero-copy { margin: 8px 0 14px; }
  .hero-caption { right: 69px; }
  .hero-shade { background: linear-gradient(0deg, #10141ea8, transparent 52%), linear-gradient(180deg, #10141ebc, transparent 38%); }
  .catalog-entry { height: 54px; }
  .catalog-banner { --catalog-banner-radius: 17px; }
  .catalog-banner-title { font-size: clamp(24px, 5.6vw, 28px); }
  .catalog-banner-icon { width: 19px; height: 19px; }
  .catalog-view { --segment-inset: 3px; gap: 1px; }
  .catalog-view button { gap: 4px; min-height: 37px; padding: 5px 9px; font-size: 12px; }
  .comment-form textarea { font-size: 16px; }
  .photo-grid { gap: 10px; }
  .photo-card { padding: 4px; border-radius: 16px; }
  .card-picture { aspect-ratio: 1.18; border-radius: 12px; }
  .card-type { left: 6px; top: 6px; font-size: 10px; padding: 4px 6px; }
  .card-link { bottom: 6px; right: 6px; width: 30px; height: 30px; }
  .card-caption { grid-template-columns: 1fr; padding: 8px 4px 5px; gap: 4px; }
  .card-date, .card-location { font-size: 11px; }
  .card-reactions { padding: 3px 4px 4px; gap: 5px; }
  .group-toggle { grid-template-columns: minmax(70px, 32%) minmax(0, 1fr) auto; gap: 11px; padding: 9px 10px; border-radius: 18px; }
  .group-stack { height: clamp(59px, 20vw, 95px); }
  .photo-group { --group-print-radius: 8px; }
  .group-caption { gap: 4px; }
  .group-caption strong { font-size: clamp(17px, 4.6vw, 23px); }
  .group-caption small { font-size: 12px; }
  .group-arrow { width: 34px; height: 34px; }
  .group-arrow .icon { width: 15px; height: 15px; }
  .group-photos { padding: 10px 3px 6px; }
  .footer { align-items: flex-start; flex-direction: column; margin-top: 27px; }
  .photo-viewer { width: calc(100% - 14px); max-height: calc(100dvh - 14px); border-radius: 21px; }
  .viewer-layout { grid-template-columns: minmax(0,1fr); max-height: calc(100dvh - 16px); }
  .viewer-main { padding: 6px; }
  .viewer-picture img { max-height: min(42dvh, 340px); }
  .viewer-main:has(.photo-note:not([hidden])) .viewer-picture img { max-height: min(38dvh, 325px); }
  .viewer-caption { padding: 10px 7px; }
  .viewer-discussion { border-left: 0; border-top: 1px solid var(--line); padding: 11px; max-height: none; }
  .discussion-heading { margin-right: 0; }
  .comment-stream { flex: auto; max-height: 230px; }
}
@media (max-width: 660px), (any-pointer: coarse) {
  .reaction { min-height: 44px; }
}
@media (max-width: 370px) {
  :root { --gutter: 10px; }
  .header-inner { gap: 7px; }
  .header-actions { --header-action-gap: 4px; }
  .brand strong { min-width: 0; overflow-wrap: anywhere; }
  .language-toggle { min-width: 42px; padding-inline: 7px; }
  .language-toggle .icon { display: none; }
  .site-header:has(.announcement-toggle:not([hidden])) .brand { gap: 5px; }
  .site-header:has(.announcement-toggle:not([hidden])) .brand-mark { width: 27px; height: 27px; }
  .header-actions:has(.announcement-toggle:not([hidden])) :is(.theme-toggle, .language-toggle, .nickname-toggle, .announcement-toggle) { width: 38px; min-width: 38px; }
  .header-actions:has(.announcement-toggle:not([hidden])) .top-search { width: calc(38px * (1 - var(--dock-progress))); }
  .card-reactions { gap: 4px; }
  .card-reactions .reaction { min-width: 44px; gap: 4px; padding-inline: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .brand-mark, .hero-photo:hover .hero-slide { transform: none; }
}