:root { --bg: #fafafa; --fg: #2e2e2e; --mute: #9b9b9b; --header-height: 92px;
    --filter-gap: 10px; --filter-button-height: 42px; --filter-button-bottom: max(10px, env(safe-area-inset-bottom)); }
  @media (prefers-color-scheme: dark) { :root { --bg: #0e0e0e; --fg: #dcdcdc; --mute: #6b6b6b; } }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  [hidden] { display: none !important; }
  body { background: var(--bg); color: var(--fg);
    font: 16px/1.5 ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-decoration: none; }
  .mono, h1 { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; }
  main { max-width: 1200px; margin: 0 auto; padding: 0 16px 96px; }
  @keyframes tab-content-in { from { opacity: 0; } to { opacity: 1; } }
  main.is-tab-leaving { opacity: 0; transition: opacity 180ms ease-out; }
  .tab-transition main { opacity: 0; }
  .tab-transition.tab-content-visible main { animation: tab-content-in 200ms ease-out both; }
  .read-order-pending main > section { visibility: hidden; }
  header { display: flex; align-items: flex-start; justify-content: space-between;
    height: var(--header-height); padding: 32px 20px 28px; }
  .gallery-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  @media (min-width: 641px) {
    header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; }
    .gallery-header { display: contents; }
    .gallery-header > h1 { position: fixed; top: 15px; left: 20px; z-index: 10;
      display: flex; height: 36px; align-items: center; }
    .gallery-header > .utility-nav { position: fixed; top: 15px; right: 20px; z-index: 10;
      height: 36px; }
    .gallery-header + .primary-nav { position: fixed; top: 15px; left: 0; right: 0; z-index: 20;
      width: max-content; margin: 0 auto; }
    main { padding-top: var(--header-height); }
    .gallery-header + .primary-nav + main { padding-top: 66px; }
  }
  h1 { color: var(--mute); }
  .pill { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(18, 18, 18, 0.85); color: rgba(255, 255, 255, 0.85); }
  .pill:hover { color: #fff; }
  @media (prefers-color-scheme: dark) { .pill { background: rgba(237, 237, 237, 0.14); } }
  .nav { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--mute); }
  .nav:hover { color: var(--fg); }
  .nav-icon { display: grid; width: 24px; height: 24px; place-items: center; line-height: 0; }
  .nav-icon svg { width: 18px; height: 18px; display: block; }
  /* The icons beside it are 18px glyphs centred in 24px boxes, so they carry
     their own optical inset. This pads the text label to match. */
  .nav-about { padding-right: 6px; }
  .nav-about-icon { display: none; }
  .phone-device .screensaver-open { display: none; }
  .primary-nav { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); align-items: center;
    gap: 0; margin-top: -6px; padding: 1px;
    overflow: hidden; isolation: isolate; border-radius: 999px;
    background: rgba(128, 128, 128, 0.58);
    -webkit-backdrop-filter: blur(48px);
    backdrop-filter: blur(48px); }
  .has-bookmarks .primary-nav { grid-template-columns: repeat(3, 1fr); }
  .bookmark-nav { display: none; }
  .has-bookmarks .bookmark-nav { display: block; }
  .primary-nav-indicator { position: absolute; top: 1px; bottom: 1px; left: 0; z-index: -1;
    border-radius: 999px; background: rgba(255, 255, 255, 0.96);
    transform-origin: left center; pointer-events: none; }
  .primary-nav-indicator.is-ready { transition: transform 160ms ease-out; }
  .primary-nav .nav { position: relative; z-index: 1; padding: 8px 16px; border-radius: 999px; color: #555;
    width: 100%; min-width: 0; text-align: center; mix-blend-mode: normal; transition: color 160ms ease-out; }
  .primary-nav-label { display: block; }
  .primary-nav .nav:hover { color: #111; }
  .primary-nav .nav[aria-current="page"] { background: rgba(255, 255, 255, 0.96); color: #111;
    font-weight: 500; text-shadow: none; }
  .primary-nav.has-tab-indicator .nav[aria-current="page"] { background: transparent; }
  .primary-nav .nav:not([aria-current="page"]) { color: #fff; font-weight: 500;
    mix-blend-mode: normal; text-shadow: none; }
  .primary-nav .nav:not([aria-current="page"]):hover { color: #fff; }
  .primary-nav.has-tab-indicator .nav.is-entering,
  .primary-nav.has-tab-indicator .nav.is-entering:hover { color: #111; }
  .primary-nav.has-tab-indicator .nav.is-leaving,
  .primary-nav.has-tab-indicator .nav.is-leaving:hover { color: #fff; }
  .utility-nav { display: flex; align-items: center; justify-self: end; gap: 18px; }
  button.nav { border: 0; background: transparent; padding: 0; cursor: pointer; }
  button.nav:focus-visible, .nav:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; border-radius: 2px; }
  .filter-open { position: fixed; z-index: 20; right: var(--filter-gap); bottom: var(--filter-button-bottom);
    display: grid; width: var(--filter-button-height); height: var(--filter-button-height);
    place-items: center; border: 1px solid rgba(18, 18, 18, 0.08); border-radius: 999px; padding: 0;
    background: rgba(255, 255, 255, 0.96); color: rgba(18, 18, 18, 0.86); cursor: pointer;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18); }
  .filter-open:hover, .filter-open.active { color: #111; background: #fff; }
  .filter-open:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
  .filter-open svg { width: 20px; height: 20px; display: block; }
  body > .gallery-header h1, body > .gallery-header .utility-nav {
    color: #fff; mix-blend-mode: difference; text-shadow: none; }
  body > .gallery-header .utility-nav .nav { color: inherit; mix-blend-mode: normal; }
  body > .gallery-header .nav-icon svg { filter: none; }
  body > .gallery-header h1 a, body > .gallery-header h1 a:hover,
  body > .gallery-header .nav:hover { color: inherit; }
  body > .gallery-header h1 a,
  body > .gallery-header .utility-nav .nav {
    opacity: 0.58; transition: opacity 140ms ease-out; }
  body > .gallery-header h1 a:hover,
  body > .gallery-header h1 a:focus-visible,
  body > .gallery-header .utility-nav .nav:hover,
  body > .gallery-header .utility-nav .nav:focus-visible { opacity: 1; }
  section { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; }
  .all-list { max-width: none; }
  .all-list > section, .bookmarks-list { --masonry-column-count: 1; display: grid;
    grid-template-columns: repeat(var(--masonry-column-count, 1), minmax(0, 1fr));
    align-items: start; gap: 20px; margin-bottom: 20px; }
  @media (min-width: 641px) {
    .all-list > section, .bookmarks-list { --masonry-column-count: 2; }
  }
  @media (min-width: 761px) {
    .all-list > section, .bookmarks-list { --masonry-column-count: 3; }
  }
  .masonry-column { display: flex; min-width: 0; flex-direction: column; gap: 20px; }
  .all-list .item, .bookmarks-list .item {
    content-visibility: auto; contain-intrinsic-size: auto 480px; }
  .all-list .feed-view-count { display: none; }
  .item { --photo-meta-inset: 20px; position: relative; }
  .item::after { content: ""; position: absolute; z-index: 1; right: 0; bottom: 0; left: 0;
    height: 30%; border-radius: 0 0 16px 16px; pointer-events: none;
    background: linear-gradient(to top,
      rgba(0, 0, 0, 0.52) 0%,
      rgba(0, 0, 0, 0.505) 10%,
      rgba(0, 0, 0, 0.466) 20%,
      rgba(0, 0, 0, 0.408) 30%,
      rgba(0, 0, 0, 0.337) 40%,
      rgba(0, 0, 0, 0.26) 50%,
      rgba(0, 0, 0, 0.183) 60%,
      rgba(0, 0, 0, 0.112) 70%,
      rgba(0, 0, 0, 0.054) 80%,
      rgba(0, 0, 0, 0.015) 90%,
      transparent 100%); }
  .photo { display: block; width: 100%; padding: 0; border: 0; border-radius: 16px;
    overflow: hidden; cursor: zoom-in; background: transparent; text-align: inherit;
    transform: translateZ(0); }
  .photo img { width: 100%; height: auto; display: block; }
  .photo:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
  .item.x { display: none; }
  section.open .item.x { display: block; }
  body.filtering .item.is-filtered-out { display: none; }
  body.filtering section .item.x:not(.is-filtered-out) { display: block; }
  body.filtering .more { display: none; }
  .filter-empty { padding: 72px 0; color: var(--mute); text-align: center; }
  .gallery-empty { padding: 72px 0; color: var(--mute); text-align: center; }
  .gallery-empty a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
  .featured-list:not(.is-ready) { display: none; }
  .featured-list .item { width: min(100%, var(--photo-native-width)); margin-inline: auto; }
  .featured-list .item.is-portrait { width: 100%; }
  .featured-list:not(:has(.item)) ~ .filter-open { display: none; }
  .nav[aria-current="page"] { color: var(--fg); }
  .bookmarks-list:not(.is-ready) { visibility: hidden; }
  .photo-controls, .who { position: absolute; bottom: var(--photo-meta-inset);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    opacity: 0; transition: opacity 0.15s ease; }
  .photo-controls { z-index: 2; right: var(--photo-meta-inset); display: flex; height: 32px; align-items: center; gap: 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 12px rgba(0, 0, 0, 0.35); }
  .info, .feed-like-button { border: 0; cursor: pointer; background: transparent; color: inherit; }
  .info { display: grid; width: 24px; height: 32px; place-items: center; padding: 0; }
  .info svg { width: 18px; height: 18px; display: block; }
  .feed-like-button { display: flex; height: 32px; min-width: 24px; align-items: center; gap: 5px;
    padding: 0; font: inherit; font-variant-numeric: tabular-nums; }
  .feed-like-button svg { width: 18px; height: 18px; display: block; }
  .bookmark-icon-checked { display: none !important; }
  .is-liked .bookmark-icon-default { display: none; }
  .is-liked .bookmark-icon-checked { display: block !important; }
  .feed-like-button.is-liked { color: #fff; }
  .feed-like-button:disabled { cursor: default; opacity: 0.55; }
  .view-count { display: flex; height: 32px; min-width: 24px; align-items: center; gap: 5px;
    font: inherit; font-variant-numeric: tabular-nums; color: inherit; }
  .view-count svg { width: 18px; height: 18px; display: block; }
  .view-count.is-loading .view-count-value { opacity: 0.45; }
  .feed-like-button:focus-visible, .info:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }
  .who { z-index: 2; bottom: 8px; left: 12px; height: 32px; display: flex; align-items: center; gap: 10px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 12px rgba(0, 0, 0, 0.35); }
  .who img { width: 22px; height: 22px; border-radius: 999px; object-fit: cover; display: block;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); }
  .who { opacity: 1; }
  .item:hover .photo-controls, .item.show .photo-controls, .item:hover .who { opacity: 1; }
  .info:hover, .feed-like-button:hover, .item.show .photo-controls { color: rgba(255, 255, 255, 0.92); }
  .who:hover { color: #fff; }
  .author-permalink-icon { display: block; width: 14px; height: 14px; flex: 0 0 auto;
    opacity: 0; transform: translate(-2px, 2px);
    transition: opacity 0.14s ease, transform 0.14s ease; }
  .who .author-permalink-icon { width: 13px; height: 13px; }
  .who:hover .author-permalink-icon, .who:focus-visible .author-permalink-icon,
  .viewer-author:hover .author-permalink-icon, .viewer-author:focus-visible .author-permalink-icon {
    opacity: 1; transform: translate(0, 0); }
  .who:focus-visible, .viewer-author:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }
  @media (hover: none) { .photo-controls, .who { opacity: 1; } }
  @media (max-width: 640px) {
    .item { --photo-meta-inset: 14px; }
    .who { height: 26px; font-size: 11px; gap: 8px; }
    .who img { width: 18px; height: 18px; }
    .photo-controls { height: 26px; opacity: 1; }
    .all-list .feed-view-count { display: flex; }
    .info, .feed-like-button, .view-count { height: 26px; }
    .who { z-index: 2; }
  }
  .card { position: absolute; right: 20px; bottom: calc(20px + 42px); display: none;
    width: min(452px, calc(100% - 40px)); padding: 12px; border-radius: 24px;
    background: rgba(24, 24, 24, 0.96); color: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    z-index: 3; cursor: grab; touch-action: none; will-change: transform, opacity; }
  .item.show .card { display: block; }
  .card.is-info-dragging { cursor: grabbing; transition: none; }
  @media (min-width: 641px) and (hover: hover) and (pointer: fine) {
    .photo-controls { transition: opacity 0.18s ease, background-color 0.15s ease; }
    .item.show .photo-controls, .item.show:hover .photo-controls { opacity: 1; pointer-events: auto;
      transform: none; }
    .card { display: block; opacity: 0; pointer-events: none;
      transform: scale(0.94); transform-origin: bottom right;
      transition: opacity 0.22s ease, transform 0.22s ease; }
    .item.show .card { opacity: 1; pointer-events: auto; transform: scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .photo-controls, .card, .author-permalink-icon { transition: none; }
  }
  body.viewer-open { overflow: hidden; }
  .viewer { position: fixed; z-index: 1000; inset: 0; width: 100dvw; max-width: none; height: 100dvh; max-height: none;
    margin: 0; padding: 0; border: 0; overflow: hidden; background: transparent; color: #fff; }
  .viewer::backdrop { background: transparent; }
  .viewer-backdrop { position: absolute; inset: 0; background: rgba(8, 8, 8, 0.98);
    will-change: opacity; }
  .viewer-stage { position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; overflow: hidden; touch-action: none; outline: none;
    contain: layout paint style; }
  .viewer.zoomed .viewer-stage { cursor: grab; }
  .viewer.zooming .viewer-stage, .viewer.zoomed .viewer-stage:active { cursor: grabbing; }
  .viewer-image { display: block; width: auto; max-width: 100dvw; height: auto;
    max-height: 100dvh; object-fit: contain; transform-origin: top left; user-select: none;
    -webkit-user-drag: none; will-change: transform, clip-path; }
  .viewer-image-outgoing { position: absolute; inset: auto; pointer-events: none; }
  .viewer.dragging .viewer-image { transition: none; }
  .viewer.dragging .viewer-close, .viewer.dragging .viewer-meta { opacity: 0; }
  .viewer-close { position: fixed; z-index: 20; top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right)); display: grid; place-items: center;
    width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
    background: rgba(18, 18, 18, 0.72); color: rgba(255, 255, 255, 0.9);
    line-height: 0; opacity: 0; transition: opacity 0.15s ease; }
  .viewer-close svg { width: 18px; height: 18px; display: block; }
  .viewer.ready .viewer-close, .viewer.ready .viewer-meta { opacity: 1; }
  .viewer-close:hover { color: #fff; background: rgba(18, 18, 18, 0.88); }
  .viewer-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  .viewer-meta { position: fixed; z-index: 10; right: max(20px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom)); left: max(20px, env(safe-area-inset-left));
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
    opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
  .viewer-meta a { display: flex; min-width: 0; align-items: center; gap: 9px;
    color: rgba(255, 255, 255, 0.82); pointer-events: auto; transition: color 0.15s ease; }
  .viewer-meta a:hover { color: rgba(255, 255, 255, 1); text-decoration: none; }
  .viewer-avatar { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 999px;
    object-fit: cover; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); }
  .viewer-author-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .viewer-meta-end { display: flex; flex: 0 0 auto; height: 24px; align-items: center; gap: 12px; }
  .viewer-info-button { display: grid; width: 24px; height: 24px; place-items: center; padding: 0; border: 0;
    border-radius: 999px; cursor: pointer; pointer-events: auto;
    background: transparent; color: inherit; }
  .viewer-info-button svg { width: 18px; height: 18px; display: block; }
  .viewer-info-button[hidden] { display: none; }
  .viewer-info-button:hover { color: inherit; }
  .viewer-info-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  .viewer-like-button { display: flex; height: 24px; min-width: 24px; align-items: center;
    gap: 5px; padding: 0; border: 0; border-radius: 999px; background: transparent;
    color: inherit; cursor: pointer; pointer-events: auto;
    font: inherit; font-variant-numeric: tabular-nums; }
  .viewer-like-button svg { width: 18px; height: 18px; display: block; }
  .viewer-like-button.is-liked { color: #fff; }
  .viewer-like-button:disabled { cursor: default; opacity: 0.55; }
  .viewer-like-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  .viewer-view-count { height: 24px; }
  .viewer-info-popover { position: fixed; inset: auto max(20px, env(safe-area-inset-right))
    calc(max(18px, env(safe-area-inset-bottom)) + 42px) auto; width: calc(100dvw - 40px);
    max-width: 452px; margin: 0; padding: 12px; border: 0; border-radius: 24px;
    background: rgba(24, 24, 24, 0.96); color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.24); opacity: 0;
    cursor: grab; touch-action: none; transform: scale(0.94); transform-origin: bottom right;
    will-change: transform, opacity;
    transition: opacity 0.18s ease, transform 0.18s ease,
      display 0.18s allow-discrete, overlay 0.18s allow-discrete; }
  .viewer-info-popover:popover-open { opacity: 1; transform: scale(1); }
  .viewer-info-popover.is-info-dragging { cursor: grabbing; transition: none; }
  @starting-style {
    .viewer-info-popover:popover-open { opacity: 0; transform: scale(0.94); }
  }
  .viewer-info-popover::backdrop { background: transparent; }
  @media (prefers-reduced-motion: reduce) {
    .viewer-close, .viewer-meta, .viewer-info-popover, .viewer-like-button { transition: none; }
  }
  .card-handle { display: flex; justify-content: center; padding: 4px 36px 12px; }
  .card-handle span { width: 40px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); }
  .card .card-handle, .viewer-info-popover .card-handle { cursor: grab; touch-action: none; }
  .card.is-info-dragging .card-handle, .viewer-info-popover.is-info-dragging .card-handle { cursor: grabbing; }
  .card .tiles, .viewer-info-popover .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .card .tile, .viewer-info-popover .tile { min-width: 0; overflow-wrap: anywhere;
    background: rgba(255, 255, 255, 0.07); border-radius: 12px; padding: 10px 16px 12px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 15px; line-height: 1.2; }
  .card .tile.primary, .viewer-info-popover .tile.primary { grid-column: span 2; }
  .card .tile:only-child, .viewer-info-popover .tile:only-child { grid-column: 1 / -1; }
  .card .tile span, .viewer-info-popover .tile span { display: block; font-size: 11px; line-height: 1.2;
    color: rgba(255, 255, 255, 0.45); margin-bottom: 2px; }
  @media (max-width: 640px) {
    .item.has-info { overflow: hidden; border-radius: 16px; isolation: isolate; }
    .card { display: block; left: 0; right: 0; bottom: 0; width: 100%; max-width: none;
      max-height: calc(100% - 18px); padding: 14px 12px 16px;
      border-radius: 22px 22px 16px 16px; overflow: auto; opacity: 0; pointer-events: none;
      transform: translate3d(0, 100%, 0); transform-origin: bottom center;
      box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.22);
      overscroll-behavior: contain;
      transition: transform 0.28s cubic-bezier(.16, 1, .3, 1), opacity 0.18s ease; }
    .item.show .card { opacity: 1; pointer-events: auto; transform: translate3d(0, 0, 0); }
    .card.is-info-dragging { transition: none; }
    .card .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card .tile.primary { grid-column: span 1; }
    .card .tile:only-child { grid-column: 1 / -1; }
    .card .tile, .viewer-info-popover .tile { padding: 10px 8px 12px; font-size: 13px; }
    .card .tile span, .viewer-info-popover .tile span { font-size: 10px; }
    .viewer-info-popover { border-radius: 24px; }
  }
  .more { display: inline-flex; align-items: center; justify-content: center;
    align-self: center; max-width: 100%; margin: -8px 0 24px; border: 0; cursor: pointer;
    padding: 2px 8px; border-radius: 999px;
    -webkit-appearance: none; appearance: none;
    background: none; color: var(--mute);
    font: 14px/1.35 ui-sans-serif, system-ui, sans-serif; text-align: center; }
  .more:hover { color: var(--fg); }
  @media (prefers-color-scheme: dark) {
    .more { background: none; }
  }
  .notify-modal { --notify-padding: 24px; --notify-control-radius: 12px; --notify-radius: 28px;
    position: fixed; top: 50%; left: 50%; width: min(420px, calc(100% - 32px));
    max-height: calc(100dvh - 32px); margin: 0; padding: 0; border: 0; border-radius: var(--notify-radius);
    overflow: visible; background: transparent; color: var(--fg); opacity: 0;
    transform: translate3d(-50%, calc(-50% + 14px), 0) scale(0.96);
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(.22, 1, .36, 1); }
  .notify-modal.is-open { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
  .notify-modal.is-closing { opacity: 0; transform: translate3d(-50%, calc(-50% + 10px), 0) scale(0.97); }
  .notify-modal::backdrop { background: rgba(0, 0, 0, 0);
    -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
    transition: background-color 0.18s ease, backdrop-filter 0.18s ease, -webkit-backdrop-filter 0.18s ease; }
  .notify-modal.is-open::backdrop { background: rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .notify-modal.is-closing::backdrop { background: rgba(0, 0, 0, 0);
    -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
  .notify-panel { position: relative; display: grid; gap: 16px; padding: var(--notify-padding); border-radius: var(--notify-radius);
    max-height: inherit; overflow: auto; background: var(--bg);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18); }
  .notify-panel h2 { margin: 0; padding-right: 36px; font-size: 22px; font-weight: 500; letter-spacing: 0; }
  .notify-copy { margin: -6px 0 0; color: var(--mute); font-size: 14px; line-height: 1.6; text-wrap: pretty; }
  .notify-form { display: grid; gap: 12px; }
  .notify-row { display: flex; align-items: stretch; gap: 10px; }
  .notify-field { display: grid; gap: 7px; color: var(--mute); font-size: 13px; }
  .notify-row .notify-field { flex: 1 1 auto; min-width: 0; }
  .notify-field input { width: 100%; border: 1px solid rgba(127, 127, 127, 0.18); outline: 0;
    padding: 11px 14px; border-radius: var(--notify-control-radius); background: rgba(127, 127, 127, 0.08);
    color: var(--fg); font: inherit; font-size: 14px; }
  .notify-field input:focus { border-color: var(--mute); }
  .notify-field input::placeholder { color: var(--mute); }
  .notify-trap { position: absolute; left: -10000px; }
  .notify-submit { width: fit-content; border: 0; cursor: pointer; padding: 10px 16px; border-radius: var(--notify-control-radius);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
    background: rgba(18, 18, 18, 0.85); color: rgba(255, 255, 255, 0.85); }
  .notify-submit:hover { color: #fff; }
  .notify-submit:disabled { cursor: wait; opacity: 0.55; }
  .notify-message { margin: 0; color: var(--mute); font-size: 13px; text-wrap: pretty; }
  .notify-message:empty { display: none; }
  .notify-close { position: absolute; top: 18px; right: 18px; display: grid; width: 30px; height: 30px;
    place-items: center; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
    background: rgba(127, 127, 127, 0.12); color: var(--mute); line-height: 0; }
  .notify-close svg { width: 16px; height: 16px; display: block; }
  .notify-close:hover { color: var(--fg); background: rgba(127, 127, 127, 0.18); }
  .screensaver-modal { --screensaver-dialog-width: 780px; --screensaver-artwork-share: 50.5%;
    --screensaver-copy-width: 345px;
    --screensaver-gap: 36px; --screensaver-screen-inset: -1px; --screensaver-mask-width: 100%;
    --screensaver-image-y: 50px; --screensaver-image-zoom: 1.5;
    --screensaver-mask-radius: 20px;
    width: min(var(--screensaver-dialog-width), calc(100% - 32px)); }
  .screensaver-panel { grid-template-columns: minmax(0, var(--screensaver-artwork-share))
    minmax(0, min(var(--screensaver-copy-width), calc(100% - var(--screensaver-artwork-share) - var(--screensaver-gap))));
    justify-content: space-between; gap: var(--screensaver-gap); align-items: stretch; padding: 20px; }
  .screensaver-mask { position: relative; width: var(--screensaver-mask-width);
    height: auto; min-width: 0; justify-self: center; align-self: stretch;
    overflow: hidden; border-radius: var(--screensaver-mask-radius); background: #090909; }
  .screensaver-visual { position: absolute; top: 50%; left: 0; width: 100%; min-width: 0;
    aspect-ratio: 1326 / 1186; overflow: hidden; background: #090909;
    transform: translateY(calc(-50% + var(--screensaver-image-y))) scale(var(--screensaver-image-zoom)); }
  .screensaver-room-picture { position: absolute; inset: 0 -1px 0 0; display: block;
    transform: translateX(-1px); }
  .screensaver-room { display: block; width: 100%; height: 100%; object-fit: cover; }
  .screensaver-demo { position: absolute;
    top: calc(20.91% + var(--screensaver-screen-inset));
    left: calc(30.32% + var(--screensaver-screen-inset) - 1px);
    width: calc(41.25% - var(--screensaver-screen-inset) - var(--screensaver-screen-inset));
    height: calc(26.39% - var(--screensaver-screen-inset) - var(--screensaver-screen-inset));
    box-sizing: border-box; overflow: hidden; border: 1px solid #090909; border-radius: 2px; background: #090909; }
  .screensaver-slide { position: absolute; inset: 0; display: block; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; transform: translateX(1px); transition: opacity 0.6s ease; }
  .screensaver-slide.is-visible { opacity: 1; }
  .screensaver-content { display: grid; gap: 16px; padding: 24px 24px 24px 0; }
  .screensaver-steps { margin: -4px 0 0; padding-left: 20px;
    color: var(--mute); font-size: 14px; line-height: 1.55; text-wrap: pretty; }
  .screensaver-steps li + li { margin-top: 6px; }
  .screensaver-download { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
  .screensaver-download:hover { text-decoration-thickness: 2px; }
  .screensaver-close { z-index: 2; }
  .filter-modal { z-index: 30; inset: auto var(--filter-gap)
    calc(var(--filter-button-bottom) + var(--filter-button-height) + var(--filter-gap)) auto;
    --filter-date-width: 332px; --filter-section-inline: 24px; --filter-section-row: 52px;
    --filter-divider: rgba(127, 127, 127, 0.14);
    width: min(calc(var(--filter-date-width) + (var(--filter-section-inline) * 2)), calc(100dvw - 20px)); height: auto;
    max-height: calc(100dvh - var(--filter-button-bottom) - var(--filter-button-height) - 30px);
    border-radius: 20px; transform: translate3d(0, 14px, 0) scale(0.92);
    transform-origin: bottom right;
    transition: opacity 0.16s ease, transform 0.24s cubic-bezier(.22, 1, .36, 1); }
  .filter-modal.is-open { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  .filter-modal.is-closing { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.96); }
  .filter-modal::backdrop { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .filter-panel { display: flex; height: auto; max-height: inherit; flex-direction: column;
    gap: 0; padding: 0; overflow: hidden; border-radius: 20px;
    background: rgba(250, 250, 250, 0.88);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    backdrop-filter: blur(20px) saturate(1.2); }
  .filter-head { display: flex; min-height: var(--filter-section-row); align-items: center;
    justify-content: space-between; gap: 16px; padding: 0 var(--filter-section-inline);
    background-image: linear-gradient(var(--filter-divider), var(--filter-divider));
    background-position: left bottom; background-repeat: no-repeat; background-size: 100% 1px; }
  .filter-head h2 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: 0; }
  .filter-controls { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
  .filter-controls .filter-close { position: static; flex: 0 0 auto; width: 8px; height: 28px;
    margin-right: 8px;
    place-items: center; overflow: visible; background: transparent; }
  .filter-controls .filter-close:hover { background: transparent; color: var(--fg); }
  .filter-groups { display: block; min-width: 0; max-height: calc(100dvh - var(--filter-button-bottom) - var(--filter-button-height) - 118px);
    overflow-x: hidden; overflow-y: auto; }
  .filter-section { min-width: 0; }
  .filter-section:not(:first-child) { background-image: linear-gradient(var(--filter-divider), var(--filter-divider));
    background-position: left top; background-repeat: no-repeat; background-size: 100% 1px; }
  .filter-section-header { display: flex; min-height: var(--filter-section-row); align-items: center;
    gap: 8px; padding: 0 var(--filter-section-inline); }
  .filter-section-toggle { display: flex; flex: 1 1 auto; min-width: 0; min-height: var(--filter-section-row); align-items: center;
    justify-content: space-between; gap: 12px; border: 0; padding: 0;
    background: transparent; color: var(--fg); cursor: pointer; font: inherit; line-height: 1; text-align: left; }
  .filter-section-toggle:hover .filter-section-title { color: var(--fg); }
  .filter-section-toggle:focus-visible, .filter-section-clear:focus-visible, .filter-section-chevron-button:focus-visible {
    outline: 2px solid var(--fg); outline-offset: 3px; }
  .filter-section-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1; }
  .filter-section-meta { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
  .filter-section-clear { flex: 0 0 auto; border: 0; border-radius: 999px; cursor: pointer;
    padding: 7px 10px; background: rgba(127, 127, 127, 0.12); color: var(--fg);
    font: 12px/1.2 ui-sans-serif, system-ui, sans-serif; }
  .filter-section-clear[hidden] { display: none; }
  .filter-section-clear:hover { background: rgba(127, 127, 127, 0.18); }
  .filter-section-chevron-button { display: grid; flex: 0 0 auto; width: 8px; height: 28px; margin-right: 4px;
    place-items: center; overflow: visible; border: 0; border-radius: 999px; padding: 0;
    background: transparent; color: var(--fg); cursor: pointer; }
  .filter-section-chevron-button:hover { background: transparent; color: var(--fg); }
  .filter-section-chevron { width: 8px; height: 8px; border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor; opacity: 0.55; transform: translateY(1px) rotate(-135deg);
    transition: transform 0.18s cubic-bezier(.16, 1, .3, 1), opacity 0.18s ease-out; }
  .filter-section-chevron-button:hover .filter-section-chevron, .filter-section.has-selection .filter-section-chevron { opacity: 0.9; }
  .filter-section.is-collapsed .filter-section-chevron, .filter-section.is-collapsing .filter-section-chevron { transform: translateY(-1px) rotate(45deg); }
  .filter-section-content { min-width: 0; overflow: hidden; }
  .filter-section.is-animating .filter-section-content { will-change: height, opacity, transform; }
  .filter-section:not(.is-collapsed) .filter-section-content { min-width: 0; padding: 0 var(--filter-section-inline) 10px; }
  .filter-section-content[hidden] { display: none; }
  .filter-date-archive { position: relative; width: 100%; min-width: 0; max-width: 100%;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    padding-block: 24px 2px; touch-action: pan-x; }
  .filter-date-scrub-tooltip { position: absolute; top: 0; left: var(--scrub-tooltip-x, 50%);
    max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis;
    padding: 2px 5px; border-radius: 4px; background: var(--fg); color: var(--bg);
    font: 11px/1.2 ui-sans-serif, system-ui, sans-serif; white-space: nowrap;
    opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(2px);
    transition: opacity 0.12s ease, transform 0.12s ease; }
  .filter-date-scrub-tooltip.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
  .filter-date-bars { display: flex; width: max-content; min-width: 100%; min-height: 46px;
    align-items: flex-end; justify-content: flex-start; gap: 1px; overflow: visible; touch-action: pan-x; }
  .filter-date-bar { position: relative; display: grid; flex: 0 0 4px; width: 4px; min-width: 4px; height: 46px; place-items: end center;
    padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--fg);
    cursor: pointer; overflow: visible; touch-action: pan-x; }
  .filter-date-line { display: block; width: 2px; height: var(--date-line-height);
    min-height: 10px; border-radius: 999px; background: currentColor; opacity: 0.58;
    transition: width 0.14s ease, opacity 0.14s ease; }
  .filter-date-bar:hover .filter-date-line { width: 3px; opacity: 1; }
  .filter-date-bar.active .filter-date-line { width: 4px; opacity: 1; }
  .filter-date-bar:disabled { color: var(--mute); cursor: default; opacity: 0.28; }
  .filter-date-bar:disabled { pointer-events: none; }
  .filter-date-bar:disabled .filter-date-line { width: 2px; opacity: 0.5; }
  .filter-date-bar:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
  .filter-pill-content { display: grid; gap: 10px; }
  .filter-chips { display: flex; flex-wrap: wrap; gap: 10px; }
  .filter-chips.is-truncated { overflow: hidden; }
  .filter-chip { border: 1px solid rgba(127, 127, 127, 0.26); border-radius: 999px;
    padding: 9px 14px; background: transparent; color: var(--fg); cursor: pointer;
    font: 14px/1.2 ui-sans-serif, system-ui, sans-serif; }
  .filter-chip:hover { border-color: var(--fg); }
  .filter-chip.active { border-color: var(--fg); background: var(--fg); color: var(--bg); }
  .filter-chip:disabled { border-color: rgba(127, 127, 127, 0.16); color: var(--mute); cursor: default; opacity: 0.42; }
  .filter-chip:disabled:hover { border-color: rgba(127, 127, 127, 0.16); }
  .filter-chip:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
  .filter-pill-more { border: 1px solid rgba(127, 127, 127, 0.26); border-radius: 999px; cursor: pointer;
    padding: 9px 14px; background: transparent; color: var(--fg);
    font: 14px/1.2 ui-sans-serif, system-ui, sans-serif; }
  .filter-pill-more:hover { border-color: var(--fg); }
  .filter-pill-more[hidden] { display: none; }
  .filter-pill-more:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
  .filter-clear { border: 0; border-radius: 999px; cursor: pointer;
    padding: 8px 12px; font: 13px/1.2 ui-sans-serif, system-ui, sans-serif; }
  .filter-clear { background: rgba(127, 127, 127, 0.12); color: var(--fg); }
  .filter-clear[hidden] { display: none; }
  .filter-clear:hover { background: rgba(127, 127, 127, 0.18); }
  @media (prefers-color-scheme: dark) {
    .notify-panel { box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42); }
    .notify-submit { background: rgba(237, 237, 237, 0.14); }
    .filter-open { border-color: rgba(237, 237, 237, 0.12);
      background: rgba(237, 237, 237, 0.22); color: rgba(255, 255, 255, 0.88); }
    .filter-open:hover, .filter-open.active { color: #fff; background: rgba(237, 237, 237, 0.3); }
    .filter-panel { background: rgba(24, 24, 24, 0.88); }
  }
  @media (prefers-reduced-motion: reduce) {
    .notify-modal, .notify-modal::backdrop { transition: none; }
    .screensaver-slide { transition: none; }
    .filter-section-chevron { transition: none; }
    .primary-nav-indicator { transition: none; }
    .primary-nav .nav { transition: none; }
    .bookmark-nav { animation: none; }
    main.is-tab-leaving, .tab-transition main { opacity: 1; animation: none; transition: none; }
  }
  @media (max-width: 760px) {
    .screensaver-panel { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 14px; }
    .screensaver-mask { width: 100%; height: auto; aspect-ratio: 1326 / 1186; }
    .screensaver-visual { inset: 0; width: 100%; transform: none; }
    .screensaver-content { gap: 14px; padding: 20px 4px 4px; }
  }
  @media (max-width: 640px) {
    header { align-items: center; padding-inline: 16px; }
    .gallery-header { display: contents; }
    .gallery-header > h1 { position: fixed; top: max(15px, env(safe-area-inset-top)); left: 12px; z-index: 10;
      display: flex; height: 31px; align-items: center; font-size: 10px; }
    .gallery-header > .utility-nav { position: fixed; top: max(15px, env(safe-area-inset-top)); right: 12px;
      z-index: 10; height: 31px; gap: 8px; }
    /* Collapse About to a glyph so it costs the same width as the other icons.
       (Supersedes hiding the label outright — the link stays reachable.) */
    .gallery-header > .utility-nav .nav-about { display: grid; width: 24px; height: 24px;
      padding-right: 0; place-items: center; line-height: 0; }
    .gallery-header > .utility-nav .nav-about .nav-about-label { display: none; }
    .gallery-header > .utility-nav .nav-about .nav-about-icon { display: block; line-height: 0; }
    .gallery-header > .utility-nav .nav-about svg { width: 18px; height: 18px; display: block; }
    .gallery-header > .utility-nav .nav:not(.nav-icon) { font-size: 10px; }
    .gallery-header + .primary-nav { position: fixed; top: max(15px, env(safe-area-inset-top)); left: 0;
      right: 0; z-index: 20; width: max-content; margin: 0 auto;
      background: rgba(128, 128, 128, 0.38);
      -webkit-backdrop-filter: blur(24px) saturate(140%);
      backdrop-filter: blur(24px) saturate(140%); }
    .gallery-header + .primary-nav .nav { padding: 7px 8px; font-size: 10px; }
    .gallery-header + .primary-nav + main { padding-top: calc(61px + env(safe-area-inset-top)); }
    .notify-row { flex-direction: column; }
    .filter-modal { --filter-date-width: 280px; --filter-section-inline: 20px; }
  }