/* Layout: an endless 12x12 module grid of projects you drag through; chrome floats in the four corners. */
:root {
  --ink: #090A0C;
  --ground: #FFFFFF;
  --muted: rgba(9, 10, 12, 0.55);
  --line: rgba(9, 10, 12, 0.14);
  --glass-bg: rgba(255, 255, 255, 0.52);
  --glass-bg-strong: rgba(255, 255, 255, 0.72);
  --glass-rim: rgba(255, 255, 255, 0.85);
  --glass-edge: rgba(9, 10, 12, 0.07);
  --glass-blur: blur(20px) saturate(180%);
  --glass-shadow: 0 12px 32px -14px rgba(9, 10, 12, 0.22), 0 2px 6px -2px rgba(9, 10, 12, 0.06);
  --rainbow: linear-gradient(90deg, #ff7a7a, #ffc27a, #f6f07a, #86efb0, #7ad4ff, #9a94ff, #e79aff, #ff7a7a);
  --sans: "Cormorant UI", "Songti SC", "Noto Serif SC", "STSong", Georgia, serif;
  --edge: 32px;
  --nav-top: calc(24px + env(safe-area-inset-top, 0px));
  color-scheme: light;
}
@media (max-width: 699px) { :root { --edge: 16px; --nav-top: calc(16px + env(safe-area-inset-top, 0px)); } }

html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea, option { font-family: inherit; font-variant-numeric: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* Text styles inherit the font stack of their containing interface region. */
.t-label  { font-family: var(--sans); font-size: 14px; font-weight: 400; line-height: 14px; letter-spacing: 0.28px; word-wrap: break-word; }
.t-italic { font-family: var(--sans); font-size: 16px; font-style: italic; font-weight: 400; line-height: 16px; word-wrap: break-word; }
.t-roman  { font-family: var(--sans); font-size: 16px; font-weight: 400; line-height: 16px; word-wrap: break-word; }
.t-light  { font-family: var(--sans); font-size: 16px; font-weight: 300; line-height: 23.2px; word-wrap: break-word; }
.t-made   { font-family: var(--sans); font-size: 16px; font-weight: 400; line-height: 23.2px; }
.t-name   { font-family: var(--sans); font-size: 16px; font-style: italic; font-weight: 400; line-height: 23.2px; }
.muted { color: var(--muted); }

/* Canvas: tiles are drawn to an offscreen 2D canvas, then a WebGL lens bends the edges */
#stage { position: fixed; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
#stage.is-dragging { cursor: grabbing; }
#stage.is-hover { cursor: pointer; }
#stage:focus-visible { outline: 1px solid var(--ink); outline-offset: -8px; }
#stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Chrome: glass pills and panels, Porto Rocha-shaped */
.glass, .chip, .search {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 0 0 1px rgba(255, 255, 255, 0.35), var(--glass-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .chip, .search { background: rgba(255, 255, 255, 0.94); }
}
.chip { padding: 5px 14px; border-radius: 999px; }
.sig, .dock {
  font-family: var(--sans);
  font-weight: 400;
  font-style: normal;
}
.sig {
  position: fixed; z-index: 2;
  top: calc(24px + env(safe-area-inset-top, 0px)); left: var(--edge);
  display: flex; gap: 5px; align-items: baseline;
}
.nav {
  position: fixed; z-index: 2;
  top: var(--nav-top); right: var(--edge);
  display: flex; gap: 12px; align-items: center; min-height: 31px; box-sizing: border-box;
}
.nav { gap: 8px; }
.nav .github-link { gap: 6px; text-decoration: none; white-space: nowrap; }
.github-link svg { flex: none; }
.nav :is(button, a) { display: flex; align-items: center; min-height: 34px; box-sizing: border-box; padding: 0 16px; border-radius: 999px; transition: background-color 200ms ease; }
.nav :is(button, a):hover { background: var(--glass-bg-strong); }
.dock {
  position: fixed; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 0 var(--edge) calc(24px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: 1fr minmax(0, 440px) 1fr; gap: 24px; align-items: end;
  pointer-events: none;
}
.dock > * { pointer-events: auto; }
.cats { justify-self: start; padding: 8px; border-radius: 20px; position: relative; }
.cats-list { display: flex; flex-direction: column; }
.cats-toggle { display: none; }
.cat { display: flex; gap: 14px; padding: 1px 12px; border-radius: 999px; border: 1px solid transparent; font-weight: 300; font-size: 16px; line-height: 23.2px; transition: background-color 200ms ease, border-color 200ms ease; }
.cat:hover { background: rgba(255, 255, 255, 0.45); }
.cat[aria-pressed="true"] { background: var(--glass-bg-strong); border-color: var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-rim); }
.cat .num { width: 22px; font-weight: 300; font-style: normal; }
.dock .cat, .dock .cat .num { font-weight: 400; }
.cat[aria-pressed="true"] .lbl { font-weight: 400; }
.search { border-radius: 22px; padding: 15px 22px 11px; display: flex; flex-direction: column; gap: 8px; min-width: 0; transition: border-color 200ms ease, box-shadow 200ms ease; }
.search label { display: flex; gap: 14px; align-items: center; }
.search label .t-label { flex: none; }
.search input {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 0; margin: 0; height: 28px; color: var(--ink);
  font-family: var(--sans); font-size: 16px; font-style: normal; font-weight: 400; line-height: 28px;
}
.search input::placeholder { color: var(--muted); opacity: 1; }
.dock input::placeholder { font-family: inherit; font-weight: inherit; font-style: normal; }
.search input:focus { outline: none; }
.search:focus-within { border-color: rgba(9, 10, 12, 0.22); box-shadow: inset 0 1px 0 var(--glass-rim), 0 0 0 4px rgba(255, 255, 255, 0.6), var(--glass-shadow); }
.search-wrap { position: relative; min-width: 0; display: flex; flex-direction: column; }
/* Floating glass bars above the search box: each match with its exact kinds of work */
.hits {
  position: absolute; left: -16px; right: -16px; bottom: 100%; padding: 0 16px 10px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 10px;
  /* All matches, four bars tall: the rest scroll, one bar at a time */
  overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hits::-webkit-scrollbar { display: none; }
.haptic { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.hits[hidden] { display: none; }
.hit {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; box-sizing: border-box;
  padding: 9px 22px 8px; border-radius: 18px; text-align: left; cursor: pointer; position: relative; z-index: 0;
  transition: background-color 200ms ease;
  animation: f-rise 260ms cubic-bezier(.2, .7, .2, 1) both;
  flex: none; scroll-snap-align: start;
  /* A tighter shadow than the other glass, so it fits inside the scrolling stack instead of being cut off */
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 5px 12px -7px rgba(9, 10, 12, 0.22), 0 1px 3px rgba(9, 10, 12, 0.05);
}
.hit::before {
  content: ""; position: absolute; z-index: -1; left: 2%; right: 2%; top: -4px; bottom: -4px;
  background: var(--rainbow); background-size: 200% 100%;
  -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.16) 68%, transparent 100%); mask-image: radial-gradient(closest-side, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.16) 68%, transparent 100%);
  opacity: 0; transition: opacity 300ms ease; animation: shimmer 6s linear infinite; pointer-events: none;
}
.hit:hover, .hit:focus-visible { background: var(--glass-bg-strong); outline: none; }
.hit:hover::before, .hit:focus-visible::before { opacity: 0.4; }
.hit .h-title { width: 100%; min-width: 0; overflow-wrap: anywhere; }
.hit .h-tags { width: 100%; overflow-wrap: anywhere; color: var(--muted); }
.hit .h-tags .on { color: var(--ink); }
.dock:has(.cats.is-open) .hits { display: none; }
.status[hidden] { display: none; }
.status { display: flex; justify-content: space-between; gap: 12px; min-width: 0; }
.status span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status span:last-child { white-space: nowrap; }
.hint { justify-self: end; display: flex; flex-direction: row; align-items: center; gap: 8px; }
.sound { display: flex; gap: 5px; align-items: baseline; }
.sound:hover { background: var(--glass-bg-strong); }

@media (max-width: 380px) { .sig .t-made { display: none; } }
@media (max-width: 699px) {
  .dock { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  /* Phones: the dock is one tidy row (Filter, Sound) over the search box.
     Filter opens the i–v list as a small glass panel above it. */
  .dock { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cats hint" "search search"; }
  .cats { grid-area: cats; padding: 0; border-radius: 999px; }
  .hint { grid-area: hint; }
  .search-wrap { grid-area: search; }
  .hits { bottom: calc(100% + 44px); }
  .hit { padding: 8px 18px 7px; }
  .cats-toggle { display: flex; gap: 8px; align-items: baseline; min-height: 36px; padding: 9px 16px 0; box-sizing: border-box; }
  .cats-list {
    display: none; position: absolute; left: 0; bottom: calc(100% + 8px); min-width: 190px; padding: 8px; border-radius: 20px;
    background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-rim), var(--glass-shadow);
  }
  .cats.is-open .cats-list { display: flex; animation: f-rise 240ms cubic-bezier(.2, .7, .2, 1) both; }
  .cat { gap: 14px; padding: 8px 12px; }
  .cat .num { width: 26px; }
  .cat .num { width: auto; }
  .hint { display: flex; justify-self: end; }
  #hint { display: none; }
  .sound { min-height: 36px; align-items: center; }
  .sig { top: calc(16px + env(safe-area-inset-top, 0px)); }
  .nav { top: calc(16px + env(safe-area-inset-top, 0px)); gap: 6px; }
  .nav :is(button, a) { padding: 0 11px; }
  .sig { padding: 5px 11px; }
}

/* Sheets: project, index, about */
dialog.sheet {
  margin: 0; padding: 0; border: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  background: transparent; color: var(--ink); overflow: auto;
}
dialog.sheet:focus, dialog.sheet:focus-visible { outline: none; }
dialog.sheet::backdrop { background: transparent; }
dialog.sheet[open] { animation: sheet-in 360ms cubic-bezier(.2, .7, .2, 1) both; }
@keyframes sheet-in { from { opacity: 0; } }
.sheet-inner {
  position: relative; box-sizing: border-box; min-height: 100%;
  /* Side padding clears the lens band at the screen edges (LENS.sideBand / sideMaxPx) */
  padding: calc(24px + env(safe-area-inset-top, 0px)) calc(min(7vw, 110px) + 24px) calc(32px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 40px;
}
.sheet-title { display: flex; gap: 6px; align-items: baseline; }
.sheet-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 31px; }
/* Focus view: the chosen project in the middle, details and ranked list below */
.sig, .nav, .dock { transition: opacity 300ms ease; }
body.is-focus .sig, body.is-focus .nav, body.is-focus .dock { opacity: 0; pointer-events: none; }
dialog.focus {
  margin: 0; padding: 0; border: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  background: transparent; color: var(--ink); overflow: hidden;
}
/* The content scrolls in its own layer and fades out under the header, so the header needs no white band
   and the rainbow rim stays as visible at the top as at the other edges */
.f-scroll {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding-top: calc(75px + env(safe-area-inset-top, 0px)); box-sizing: border-box;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(34px + env(safe-area-inset-top, 0px)), #000 calc(92px + env(safe-area-inset-top, 0px)));
  mask-image: linear-gradient(to bottom, transparent 0, transparent calc(34px + env(safe-area-inset-top, 0px)), #000 calc(92px + env(safe-area-inset-top, 0px)));
}
.f-scroll:focus { outline: none; }
dialog.focus::backdrop { background: transparent; }
dialog.focus:focus-visible { outline: none; }
.f-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) var(--edge) 28px;
}
/* No band: a soft rainbow light leaks in from the top edge instead */
.f-top::before, .sheet-inner::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 2%; right: 2%; top: 0; height: 130px;
  background: var(--rainbow); background-size: 200% 100%;
  -webkit-mask-image: radial-gradient(50% 100% at 50% 0%, #000 0%, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.22) 60%, transparent 100%);
  mask-image: radial-gradient(50% 100% at 50% 0%, #000 0%, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.22) 60%, transparent 100%);
  opacity: 0.3;
  animation: shimmer 14s linear infinite;
}
.f-sig { justify-self: start; display: flex; gap: 5px; align-items: baseline; white-space: nowrap; }
.f-query { margin: 0; text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-close, .sheet-bar button {
  justify-self: end; padding: 7px 16px; border-radius: 999px;
  background: var(--glass-bg); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-rim), var(--glass-shadow);
  transition: background-color 200ms ease;
}
.f-close:hover, .sheet-bar button:hover { background: var(--glass-bg-strong); }
/* Close sits exactly where "Project & story" sits on the landing page, on every page */
.f-close, .sheet-bar button {
  position: fixed; z-index: 3; top: var(--nav-top); right: var(--edge);
  display: flex; align-items: center; min-height: 34px; box-sizing: border-box; padding: 0 16px;
}
/* Glass controls get a soft ring for keyboard focus, never a black stroke */
.f-close:focus, .sheet-bar button:focus, .nav :is(button, a):focus, .cat:focus, .sound:focus { outline: none; }
.f-close:focus-visible, .sheet-bar button:focus-visible, .nav :is(button, a):focus-visible, .cat:focus-visible, .sound:focus-visible {
  outline: none;
  box-shadow: inset 0 1px 0 var(--glass-rim), 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 4px rgba(9, 10, 12, 0.14), var(--glass-shadow);
}
.f-body {
  width: 100%; max-width: 680px; box-sizing: border-box; margin: -16px auto 0;
  padding: 56px var(--edge) 48px; display: flex; flex-direction: column; align-items: center; gap: 32px;
}
.f-hero { margin: 0; max-width: calc(100vw - 32px); flex: none; overflow: hidden; background: var(--line); transform-origin: 0 0; will-change: transform; }
.f-hero img, .f-hero video { display: block; width: 100%; height: 100%; object-fit: cover; }
.f-hero video { object-fit: contain; }
/* Pause/play and mute, floating on the recording in the same glass as the other buttons */
.f-hero { position: relative; }
.f-ctl { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; z-index: 1; }
.f-btn { min-width: 64px; min-height: 31px; box-sizing: border-box; padding: 4px 14px; border-radius: 999px; text-align: center; cursor: pointer; transition: background-color 200ms ease; }
.f-btn:hover { background: var(--glass-bg-strong); }
.f-btn:focus { outline: none; }
.f-btn:focus-visible { box-shadow: 0 0 0 2px var(--ink); }
/* The hidden attribute must always win over display rules, or the still image covers the playing recording */
[hidden] { display: none !important; }
.f-info { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
.f-info h2, .f-info p { margin: 0; }
.f-info h2 { margin-bottom: 4px; }
#f-overview { max-width: 34em; }
.f-meta { margin: 8px 0 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 16px; align-items: baseline; }
.f-meta dt { color: var(--muted); font-size: 12px; line-height: 23.2px; }
.f-meta dd { margin: 0; }
.f-links { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; }
.f-link { display: inline-flex; align-items: center; min-height: 34px; box-sizing: border-box; padding: 0 16px; color: var(--ink); text-decoration: none; transition: background-color 200ms ease; }
.f-link:hover { background: var(--glass-bg-strong); }
.f-rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.f-results {
  width: 100%; max-width: 680px; box-sizing: border-box; margin: 0 auto;
  padding: 40px var(--edge) calc(72px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px;
}
.f-results .t-label { margin: 0; color: var(--muted); }
.f-list { list-style: none; margin: 0; padding: 0; }
.f-row {
  width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.3fr) 44px; gap: 16px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--muted);
}
.f-row .ttl { color: var(--ink); }
.f-row .row-main { min-width: 0; text-align: left; }
.f-row .row-main .ttl { display: block; }
.f-row .row-description { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; font-style: normal; line-height: 1.5; }
.f-row .tags { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-row .score { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.f-row .num { font-variant-numeric: tabular-nums lining-nums; }
.f-row:hover .ttl { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* Current row: ink text and an extremely thin rainbow line with a faint glow */
.f-row { position: relative; }
.f-row::before, .f-row::after {
  content: ""; position: absolute; left: 0; right: 0; pointer-events: none;
  background: var(--rainbow); background-size: 200% 100%;
  opacity: 0; transition: opacity 400ms ease; animation: shimmer 7s linear infinite;
}
.f-row::after { bottom: -1px; height: 1px; }
.f-row::before { bottom: -8px; height: 16px; -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.16) 68%, transparent 100%); mask-image: radial-gradient(closest-side, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.16) 68%, transparent 100%); }
.f-row[aria-current="true"] { color: var(--ink); }
.f-row[aria-current="true"]::after { opacity: 0.85; }
.f-row[aria-current="true"]::before { opacity: 0.28; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (max-width: 599px) {
  .f-row { grid-template-columns: 34px minmax(0, 1fr) 40px; }
  .f-row .tags { display: none; }
  .f-body { padding-top: 32px; gap: 24px; }
}
.focus.is-in .f-top { animation: f-fade 400ms 80ms both; }
.focus.is-in .f-rise { animation: f-rise 560ms 300ms cubic-bezier(.2, .7, .2, 1) both; }
.focus.is-in .f-results { animation-delay: 380ms; }
.focus.is-in .f-row { animation: f-rise 460ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(440ms + var(--i, 0) * 45ms); }
.focus.is-leaving .f-top, .focus.is-leaving .f-rise, .focus.is-leaving .f-row { animation: none; opacity: 0; transition: opacity 200ms ease; }
@keyframes f-fade { from { opacity: 0; } }
@keyframes f-rise { from { opacity: 0; transform: translateY(10px); } }

.index-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; width: 100%; }
.index-list button {
  width: 100%; display: grid; grid-template-columns: 56px minmax(0, 1fr) 200px 120px; gap: 24px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
@media (max-width: 599px) { .index-list button { grid-template-columns: 34px minmax(0, 1fr) 90px; } .index-list button span:nth-child(3) { display: none; } }
.index-list li:first-child button { border-top: 1px solid var(--line); }
.ix-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ix-note { color: var(--muted); max-width: 62em; }
.index-list button { padding-block: 16px; }
.index-list button:hover .t-italic { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.about { max-width: 34em; display: flex; flex-direction: column; gap: 16px; }
.about p { margin: 0; }
.about-head { padding-top: 12px; }
.greet { display: flex; gap: 10px; align-items: baseline; }
.greet-sky { font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", var(--sans); font-size: 16px; line-height: 23.2px; }
.greet-time { font-family: var(--sans); font-size: 12px; font-weight: 400; line-height: 23.2px; letter-spacing: 0.24px; color: var(--ink); }
/* Plain text links that glow a soft rainbow on hover */
.about-links { display: flex; flex-wrap: wrap; gap: 4px 22px; padding-top: 6px; }
.about-link { position: relative; z-index: 0; display: inline-block; padding: 8px 2px; color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer; }
.about-link::before {
  content: ""; position: absolute; z-index: -1; left: -26px; right: -26px; top: -10px; bottom: -10px;
  background: var(--rainbow); background-size: 200% 100%;
  -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.16) 68%, transparent 100%); mask-image: radial-gradient(closest-side, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.16) 68%, transparent 100%);
  opacity: 0; transition: opacity 300ms ease; animation: shimmer 6s linear infinite; pointer-events: none;
}
.about-link:hover::before, .about-link:focus-visible::before { opacity: 0.42; }
.about-link:focus-visible { outline: none; }
.about-link.is-copied { font-style: normal; }
.load-error { position: fixed; inset: 0; display: grid; place-items: center; padding: 0 16px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  dialog.sheet[open], .focus.is-in .f-top, .focus.is-in .f-rise, .focus.is-in .f-row, .f-row::before, .f-row::after, .f-top::before, .sheet-inner::before, .about-link::before { animation: none; }
  .sig, .nav, .dock { transition: none; }
  .hit { animation: none; }
}

/* gadgets-zh content adaptation. Original lens, glass and transition tokens stay intact. */
.t-label { font-size: 13px; line-height: 1.4; letter-spacing: 0; }
.t-light { font-weight: 400; line-height: 1.65; }
.t-italic, .t-roman { line-height: 1.4; }
#catalog-count { font-size: 13px; margin-left: 4px; }
.cats { padding: 0; border-radius: 999px; }
.cats-toggle { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 7px 16px; }
.cats-toggle, .sound { font-size: 14px; line-height: 20px; white-space: nowrap; }
.cats-toggle > span, .sound > span { font-size: inherit; line-height: inherit; }
#cats-now { max-width: 124px; padding: 2px 4px; margin: -2px -4px; line-height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.filter-panel { display: none; position: absolute; left: 0; bottom: calc(100% + 12px); width: min(340px, calc(100vw - 32px)); max-height: min(580px, calc(100dvh - 210px)); overflow-y: auto; box-sizing: border-box; padding: 18px; border-radius: 24px; background: rgba(255,255,255,.92); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-rim), var(--glass-shadow); backdrop-filter: var(--glass-blur); }
.cats.is-open .filter-panel { display: block; animation: f-rise 240ms cubic-bezier(.2,.7,.2,1) both; }
.cats-list, .cats.is-open .cats-list { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 14px 0 16px; min-width: 0; background: none; box-shadow: none; border: 0; backdrop-filter: none; }
.cat { padding: 6px 10px; font-size: 15px; line-height: 1.5; gap: 7px; }
.cat .num { width: 16px; font-size: 12px; color: var(--muted); }
.cat[aria-pressed="true"] .lbl { font-style: normal; }
.filter-head { display: flex; justify-content: space-between; align-items: baseline; }
.filter-head button { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.filter-selects { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.filter-selects label { display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 10px; font: 13px var(--sans); }
.filter-selects select { color: var(--ink); font: 14px var(--sans); background: rgba(255,255,255,.7); border: 1px solid var(--line); border-radius: 9px; min-height: 34px; padding: 5px 8px; max-width: 100%; }
#clear-search { flex: none; font: 22px/1 var(--sans); color: var(--muted); }
.search input { font-style: normal; }
.search input::-webkit-search-cancel-button { display: none; }
.f-hero { background: transparent; }
.f-hero img { position: absolute; object-fit: fill; max-width: none; }
.f-body { max-width: 740px; padding-bottom: 48px; }
.f-info { gap: 12px; }
.f-info h2 { font-size: 32px; font-style: normal; font-weight: 400; line-height: 1.4; }
.f-title-line { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.recommended-mark { color: var(--muted); font: 12px var(--sans); border-bottom: 1px solid var(--line); padding-bottom: 3px; white-space: nowrap; }
#f-tags { font-size: 14px; }
/* One face and numeral treatment for the interface and Canvas text. */
@font-face {
  font-family: "Cormorant UI";
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url("assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtKky2F7g.woff2") format("woff2");
  font-feature-settings: "lnum" 1, "tnum" 1;
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: "Cormorant UI";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/co3smX5slCNuHLi8bLeY9MK7whWMhyjYrGFEsdtdc62E6zd58jD-iNM8A_6pUKz9.woff2") format("woff2");
  font-feature-settings: "lnum" 1, "tnum" 1;
  unicode-range: U+0000-00FF, U+2000-206F;
}
.f-price, .index-price, .f-row .score {
  font-family: var(--sans);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.f-price { font-size: 28px; line-height: 1.2; }
#f-overview { max-width: none; line-height: 1.85; font-size: 17px; }
.f-meta { grid-template-columns: 52px minmax(0,1fr); margin-top: 0; gap: 6px 18px; }
.f-meta dt { font: 12px/1.8 var(--sans); }
.f-meta dd { font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.gallery-controls { display: flex; align-items: center; gap: 18px; margin-top: -14px; }
.gallery-controls button { font: 24px/1 var(--sans); width: 38px; height: 32px; padding: 0; text-align: center; }
.detail-section { padding-top: 20px; margin-top: 10px; border-top: 1px solid var(--line); }
.detail-section h3 { font: 13px/1.6 var(--sans); margin: 0 0 10px; }
.repositories ul { list-style: none; padding: 0; margin: 0; }
.repositories li + li { border-top: 1px solid var(--line); }
.repository-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 16px; padding: 9px 0; text-decoration: none; color: inherit; }
.repository-name { overflow-wrap: anywhere; font-size: 16px; line-height: 1.5; }
.repository-arrow { font-size: 17px; line-height: 1.5; color: var(--muted); }
.repository-description { grid-column: 1 / -1; font-size: 14px; line-height: 1.6; }
.repository-link:hover .repository-name { text-decoration: underline; text-underline-offset: 3px; }
.repository-link:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
.community-users { overflow-wrap: anywhere; line-height: 1.9; margin-top: 8px !important; font-size: 14px; }
.f-row { grid-template-columns: 28px minmax(0,1fr) minmax(0,.8fr) 90px; gap: 12px; }
.f-row .score { font-size: 15px; white-space: nowrap; }
.index-intro[hidden] { display: none; }
.index-intro { display: flex; align-items: center; gap: 16px; margin-top: -20px; }
.index-intro p { margin: 0; }
.index-list button { grid-template-columns: 70px minmax(0,1fr) 120px 110px; align-items: center; gap: 22px; }
.ix-picture { width: 70px; height: 62px; object-fit: contain; }
.ix-title { font-size: 20px; font-style: normal; }
.ix-note { font-size: 14px; line-height: 1.6; }
.index-price { text-align: right; white-space: nowrap; }
.about { max-width: 38em; }
.about-title { margin: 0; font: 400 54px/1.2 var(--sans); letter-spacing: 3px; }
.about .t-light { font-size: 17px; line-height: 1.9; }
.about a { text-underline-offset: 4px; }
@media (max-width: 900px) { #hint { display: none; } .dock { gap: 18px; grid-template-columns: auto minmax(0,440px) auto; } }
@media (max-width: 699px) {
  .dock { grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
  .sig { min-height: 34px; box-sizing: border-box; align-items: center; }
  .sig .t-made { display: none; }
  .sig .t-name { font-size: 17px; }
  .nav { gap: 6px; }
  .nav :is(button, a) { padding-inline: 10px; font-size: 12px; }
  .search { padding: 13px 17px 10px; }
  .search label { gap: 12px; }
  .search input { font-size: 16px; }
  .status { font-size: 13px; }
  .f-body { gap: 24px; padding-top: 40px; }
  .f-info h2 { font-size: 28px; }
  #f-overview { font-size: 16px; }
  .f-query { display: none; }
  .f-row { grid-template-columns: 24px minmax(0,1fr) 88px; }
  .f-row .tags { display: none; }
  .index-list button { grid-template-columns: 52px minmax(0,1fr) 76px; gap: 12px; }
  .index-list button .index-brand { display: none; }
  .index-list button .ix-main { display: flex; }
  .ix-picture { width: 52px; height: 56px; }
  .ix-title { font-size: 17px; }
  .ix-note { display: none; }
  .index-price { font-size: 14px; }
  .sheet-inner { padding-inline: 24px; gap: 32px; }
  .index-intro { flex-wrap: wrap; }
  .about-title { font-size: 44px; }
}
@media (max-height: 500px) and (min-width: 700px) {
  .filter-panel { bottom: calc(100% + 56px); max-height: calc(100dvh - 160px); width: 430px; }
  .cats-list, .cats.is-open .cats-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .filter-selects { grid-template-columns: 1fr 1fr; }
  .filter-selects label { display: flex; flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .cats.is-open .filter-panel { animation: none; } }

/* Search stays compact until requested; closing preserves the current query. */
.search-wrap { width: 100%; justify-self: center; align-items: center; }
.search-wrap .search { width: 100%; box-sizing: border-box; }
.search[hidden], .search-toggle[hidden] { display: none; }
.search-toggle { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 7px 16px; max-width: 100%; box-sizing: border-box; font-size: 14px; line-height: 20px; }
.search-toggle svg { flex: none; }
#search-toggle-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.search-top { display: flex; align-items: center; gap: 8px; }
.search-top label { flex: 1; min-width: 0; }
.search-close { display: flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; color: var(--muted); }
.search-close:hover { color: var(--ink); background: var(--glass-bg-strong); }
.search-wrap:not(.is-open) .hits { display: none; }
@media (max-width: 699px) {
  .dock:not(:has(.search-wrap.is-open)) { grid-template-columns: auto minmax(0,1fr) auto; grid-template-areas: "cats search hint"; column-gap: 8px; }
  .dock:not(:has(.search-wrap.is-open)) .search-wrap { max-width: 110px; }
  .dock:not(:has(.search-wrap.is-open)) .cats-toggle { padding-inline: 12px; gap: 7px; }
  .dock:not(:has(.search-wrap.is-open)) #cats-now { max-width: 54px; }
  .search-toggle { padding-inline: 12px; }
  .sound { padding-inline: 12px; }
}
@media (max-width: 359px) {
  .dock:not(:has(.search-wrap.is-open)) .sound > .muted { display: none; }
  .dock:not(:has(.search-wrap.is-open)) .cats-toggle { padding-inline: 10px; gap: 5px; }
}

@media (max-width: 699px) {
  .f-links { gap: 6px; }
  .f-link { font-size: 14px; padding-inline: 10px; white-space: nowrap; }
}

/* Compact social links share the navigation glass and touch target size. */
.nav .social-link { width: 36px; height: 36px; min-height: 36px; padding: 0; justify-content: center; flex: 0 0 36px; color: var(--ink); text-decoration: none; }
.social-link svg { width: 18px; height: 18px; flex: none; }
.social-link--xiaohongshu svg { width: 22px; height: 22px; }
@media (pointer: coarse) { .nav .social-link { width: 40px; height: 40px; min-height: 40px; flex-basis: 40px; } }

/* Give clipped serif labels room for their ink without changing label spacing. */
#search-toggle-label { padding: 2px 4px; margin: -2px -4px; line-height: 24px; }
.search-toggle, .sound { min-height: 40px; box-sizing: border-box; align-items: center; }
.cats-toggle > svg { flex: none; }
.cat, .filter-head { align-items: center; }
#clear-filters { display: inline-flex; align-items: center; min-height: 28px; }
#clear-search { display: inline-flex; align-items: center; justify-content: center; width: 28px; min-width: 28px; height: 28px; }
.nav > button, .f-close, .sheet-bar button { min-height: 36px; line-height: 1.5; }
.f-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; line-height: 1.5; }
.gallery-controls button { display: inline-flex; align-items: center; justify-content: center; height: 36px; line-height: 30px; }
.ix-title, .ix-note { overflow-wrap: anywhere; }
@media (pointer: coarse) { .nav > button, .f-close, .sheet-bar button { min-height: 40px; } }