/* MountedStorage website.
   Structure: one framed column with hairline guide lines and corner marks,
   like a technical drawing. Type is the system font, so Apple devices render
   SF Pro to match the Finder shown (each system's own font elsewhere). Blue for trust, and
   because it is the colour of a selected file in Finder.
   Every animation in this file is CSS, and all of it stops under
   prefers-reduced-motion. The explainer (#how) and the Try it demo have their
   own stylesheets and scripts. Photos and footage are Pexels stock, served
   from /media. */
:root {
  --bg: #0a0b0d;
  --panel: #111215;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --mark: rgba(255, 255, 255, 0.32);
  --ink: #f3f4f6;
  --ink-2: #a2a7b0;
  --ink-3: #7b8089;
  --brand: #2b5cff;
  --brand-2: #1e44d8;
  --brand-3: #142e9e;
  --brand-tint: #8fb0ff;
  --logo: #3f6dff;
  --logo-l: var(--brand-tint);
  --ok: #32d74b;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --pad: clamp(16px, 4vw, 3rem);
  --radius: 20px;
  --measure: 66ch;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* html clips sideways overflow. body must not set overflow itself: that
   would make it a scroll container and break every position: sticky. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.55 var(--sans);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; text-underline-offset: 0.2em; }
a:focus-visible { outline: 2px solid var(--brand-tint); outline-offset: 3px; border-radius: 8px; }
::selection { background: color-mix(in srgb, var(--brand) 55%, transparent); }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; }
p { margin: 0 0 1rem; text-wrap: pretty; }
img { display: block; }
code { font-family: var(--mono); font-size: 0.875em; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); padding: 0.05em 0.35em; border-radius: 5px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The frame: one column with guide lines down both sides, and a pulse of
   light that travels down each line. */
.frame {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  border-inline: 1px solid var(--line);
}
main.frame { position: relative; flex: 1; display: flex; flex-direction: column; }
main.frame::before, main.frame::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 14rem;
  background: linear-gradient(180deg, transparent, var(--brand-tint), transparent);
  opacity: 0.7;
  pointer-events: none;
  animation: travel 9s linear infinite;
}
main.frame::before { left: -1px; }
main.frame::after { right: -1px; animation-delay: -4.5s; }
@keyframes travel { from { top: -14rem; } to { top: 100%; } }

/* Corner marks where a section's top rule meets the guide lines. */
.section, .story { position: relative; }
.section::before, .section::after, .story::before, .story::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 9px;
  height: 9px;
  background:
    linear-gradient(var(--mark), var(--mark)) center / 1px 100% no-repeat,
    linear-gradient(var(--mark), var(--mark)) center / 100% 1px no-repeat;
  pointer-events: none;
}
.section::before, .story::before { left: -5px; }
.section::after, .story::after { right: -5px; }

/* Header and logo: a mounted folder in two blues (the back plate in the tint,
   the front in the logo blue, the eject cut through it); "Mounted" bold,
   "Storage" light. Contexts that want one colour set --logo-l to currentColor. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(1.8) blur(16px);
  -webkit-backdrop-filter: saturate(1.8) blur(16px);
  border-bottom: 1px solid var(--line);
}
.site-header .frame { display: flex; align-items: center; gap: 2.5rem; height: 4rem; padding-inline: var(--pad); }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.mark { width: 2rem; height: 2rem; flex: none; color: var(--logo); }
.lg-d { fill: currentColor; }
.lg-l { fill: var(--logo-l, currentColor); }
.lg-d, .lg-l { stroke: none; }
.lg-tile { --logo-l: rgba(255, 255, 255, 0.62); }
.wordmark { font: 400 1.125rem/1 var(--display); letter-spacing: -0.015em; }
.wordmark b { font-weight: 700; }
.site-header .frame > nav { display: flex; gap: 1.75rem; font-size: 0.875rem; margin-right: auto; }
.site-header .frame > nav a { text-decoration: none; white-space: nowrap; color: var(--ink-2); transition: color 0.15s; }
.site-header .frame > nav a:hover { color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* On narrower screens the links fold into a menu: a <details> element, so it
   works without script (nav.js only closes it after a tap). The button is
   two lines that turn into a cross; the links drop down under the header. */
.nav-menu { display: none; border: 0; }
.nav-menu summary { display: grid; place-content: center; gap: 5px; width: 2.5rem; height: 2.5rem; margin-right: -0.5rem; padding: 0; border-radius: 999px; cursor: pointer; }
.nav-menu summary::after { content: none; }
.nav-menu summary:hover { background: rgba(255, 255, 255, 0.07); }
.nav-menu summary:focus-visible { outline: 2px solid var(--brand-tint); outline-offset: 0; }
.nav-menu summary i { display: block; width: 18px; height: 1.5px; border-radius: 1px; background: var(--ink); transition: translate 0.2s, rotate 0.2s; }
.nav-menu[open] summary i:first-of-type { translate: 0 3.25px; rotate: 45deg; }
.nav-menu[open] summary i:last-of-type { translate: 0 -3.25px; rotate: -45deg; }
.nav-menu nav { position: absolute; top: 100%; left: 0; right: 0; display: grid; padding: 0.25rem var(--pad) 1rem; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.8); }
.nav-menu nav a { display: flex; align-items: center; min-height: 3.25rem; border-bottom: 1px solid var(--line); font-size: 1.0625rem; color: var(--ink); text-decoration: none; }
.nav-menu nav a:last-child { border-bottom: 0; }
.nav-menu nav a:focus-visible { outline-offset: -2px; }

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.875rem;
  padding: 0 1.35rem;
  border-radius: 999px;
  background: var(--ink);
  color: #0a0b0d;
  font: 500 0.9375rem/1 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.button svg { width: 1rem; height: 1rem; margin-top: -2px; }
.button:hover { background: #fff; }
.button-sm { height: 2.125rem; padding: 0 1rem; font-size: 0.875rem; }
/* The hero's and closing section's buttons: a filled white primary and an
   outlined secondary. Both press in a little when clicked. */
.button-light, .button-glass {
  height: 3rem;
  padding: 0 1.5rem;
  font-size: 1rem;
  transition: scale 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94), translate 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.16s, border-color 0.16s;
}
.button-light:active, .button-glass:active { scale: 0.98; translate: 0 1px; }
.button-light { background: #fff; color: #0a0b0d; }
.button-light:hover { background: #e6e7eb; }
.button-glass { background: transparent; border: 1px solid var(--line-2); color: var(--ink); }
.button-glass:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.4); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

/* Hero: the headline on the page, then Finder on the laptop, set on a
   dimmed crop of a desktop so the dark window has something to sit on.
   The closing call to action uses the same type and buttons. */
.hero-copy { max-width: 48rem; margin-inline: auto; }
.lede { max-width: 34rem; margin: 0 auto 1.75rem; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.5; color: var(--ink-2); }
.fineprint { margin: 1rem 0 0; font-size: 0.8125rem; color: var(--ink-3); }
.hero-in, .cta-in { position: relative; text-align: center; }
.hero-in { padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 3.5rem); }
.hero-in h1 {
  margin: 0 auto 1rem;
  font-size: clamp(2.5rem, 1.2rem + 4.2vw, 4.25rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: #fff;
}

.hero-shot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  width: min(100%, 72rem);
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding: clamp(1rem, 4vw, 3rem) clamp(0.75rem, 4vw, 3rem);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--line);
  background: #0b1a30;
}
/* The desktop picture, dimmed, so it reads as a place and not a light. */
.hero-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(/media/wallpaper.svg) 30% 70% / cover no-repeat;
  opacity: 0.36;
}
.hf { width: 100%; height: 24.5rem; text-align: left; }
.hf .fs > span.on { background: rgba(255, 255, 255, 0.11); }
.hf .ftitle b { opacity: 0; }
.hf .ftitle .hf-t1 { opacity: 1; }
.hf .cap.views { width: auto; gap: 2px; }
.hf .cap.views > svg { margin: 0 calc(7 * var(--u)); }
.hf .cap.views b svg { margin: 0 calc(7.5 * var(--u)); }
.hf .cap.round { width: calc(32 * var(--u)); justify-content: center; padding: 0; }
.hf .cap.round svg { margin: 0; color: #e6e6e6; }
.hf .fm { min-height: 0; }
.fcols { flex: 1; display: grid; grid-template-columns: 11rem 11.75rem 12rem minmax(0, 1fr); min-height: 0; border-top: 0.5px solid rgba(255, 255, 255, 0.09); }
.fcol { display: grid; align-content: start; gap: 1px; padding: 6px; border-right: 0.5px solid rgba(255, 255, 255, 0.09); min-width: 0; }
.fcol p { display: flex; align-items: center; gap: 6px; height: 24px; margin: 0; padding: 0 4px 0 6px; border-radius: 6px; white-space: nowrap; }
.fcol p span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fcol .sel { background: #464649; }
.fcol .sel.on { background: #0a5fd0; }
.fcol svg { flex: none; }
.fcol .ic-d, .fcol .ic-f, .fpath .pd, .fpath .pf { stroke: none; }
.fcol .ic-d { width: 19px; height: 16px; }
.fcol .ic-f { width: 18px; height: 15px; }
.fcol .go { width: 11px; height: 11px; color: rgba(255, 255, 255, 0.45); stroke-width: 2; }
.fcol .sel .go { color: rgba(255, 255, 255, 0.8); }
.fcol img { flex: none; width: 19px; height: 13px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.25); }
.fprev { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 16px 18px; }
.fprev img { width: 100%; max-width: 15rem; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.2), 0 6px 16px rgba(0, 0, 0, 0.45); }
.fprev p { margin: 0; }
.fp-n { margin-top: 14px !important; font-size: 14px; font-weight: 600; }
.fp-k { margin-top: 2px !important; font-size: 11px; color: rgba(255, 255, 255, 0.55); }
.fp-h { align-self: stretch; margin-top: 16px !important; padding-bottom: 5px; border-bottom: 0.5px solid rgba(255, 255, 255, 0.12); font-size: 12px; font-weight: 600; }
.fprev dl { align-self: stretch; display: grid; gap: 4px; margin: 7px 0 0; font-size: 11px; }
.fprev dl div { display: flex; justify-content: space-between; gap: 10px; }
.fprev dt { color: rgba(255, 255, 255, 0.5); }
.fprev dd { margin: 0; text-align: right; color: #ececec; white-space: nowrap; }
.hf .fpath { padding-left: 14px; }
.hf .fpath .ms { color: var(--logo); }
/* Narrower windows drop columns from the right, the way the view scrolls. */
@container (max-width: 60rem) { .fcols { grid-template-columns: 11rem 11.75rem minmax(0, 1fr) 0; } .fprev { display: none; } }
@container (max-width: 46rem) {
  .fcols { grid-template-columns: 10.5rem minmax(0, 1fr) 0 0; }
  .fc3 { display: none; }
  .hf .cap.acts { display: none; }
}
/* On a phone: the sidebar and the Studio Mac column, at full size. */
@container (max-width: 34rem) {
  .hf { height: auto; grid-template-columns: 8.5rem minmax(0, 1fr); }
  .hf .fs > span:nth-of-type(-n+4), .hf .fs > .fs-head:first-of-type { display: none; }
  .fcols { grid-template-columns: minmax(0, 1fr) 0 0 0; }
  .fc2 { display: none; }
  .fc1 { border-right: 0; }
  .fcol .sel { background: #0a5fd0; }
  .fcol .sel .go { color: #fff; }
  .hf .ftitle .hf-t1 { opacity: 0; }
  .hf .ftitle .hf-t2 { opacity: 1; }
  .hf .cap.views, .hf .cap.acts, .hf .cap.round { display: none; }
  .hf .fpath .hf-p { display: none; }
}

/* ------------------------------------------------------------------------
   Finder, macOS 27 Golden Gate, dark appearance, icon view. Proportions are
   measured from a real window (13 pt traffic lights with a bright top rim,
   29 pt rows, 32 pt toolbar capsules, a 100 pt icon grid); colours are the
   neutral system greys rather than one desktop's tint. Every size is a
   multiple of --u, one point: the hero sets it to 1px, the animation shrinks
   the same window by changing it. */
.finder {
  --u: 1px;
  position: relative;
  display: grid;
  grid-template-columns: calc(156 * var(--u)) minmax(0, 1fr);
  border-radius: calc(26 * var(--u));
  overflow: hidden;
  background: #262627;
  font: 400 calc(13 * var(--u)) / 1.15 var(--sans);
  letter-spacing: -0.006em;
  color: #f5f5f5;
  text-align: left;
  box-shadow:
    0 0 0 calc(0.5 * var(--u)) rgba(0, 0, 0, 0.85),
    inset 0 0 0 calc(0.5 * var(--u)) rgba(255, 255, 255, 0.13),
    0 calc(50 * var(--u)) calc(100 * var(--u)) calc(-30 * var(--u)) rgba(0, 0, 0, 0.75);
}
.finder svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.fs {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: calc(17 * var(--u)) calc(9.5 * var(--u)) calc(14 * var(--u));
  background: #2b2b2c;
}
.lights { display: flex; gap: calc(7.75 * var(--u)); padding-left: calc(7 * var(--u)); margin-bottom: calc(17 * var(--u)); }
.lights i { width: calc(13 * var(--u)); height: calc(13 * var(--u)); border-radius: 50%; box-shadow: inset 0 0 0 calc(0.5 * var(--u)) rgba(0, 0, 0, 0.28); }
.lights i:nth-child(1) { background: linear-gradient(180deg, #f7948d 0%, #f55a4d 18%, #f2574a 52%, #ef6a61 84%, #ed817a 100%); }
.lights i:nth-child(2) { background: linear-gradient(180deg, #ffe28a 0%, #fec50e 18%, #fbbe0b 52%, #f8c43b 84%, #f7cf67 100%); }
.lights i:nth-child(3) { background: linear-gradient(180deg, #87e765 0%, #20c102 18%, #14bb00 52%, #43c42f 84%, #64d54f 100%); }
.fs > span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex: none;
  gap: calc(7 * var(--u));
  height: calc(29 * var(--u));
  padding: 0 calc(8 * var(--u)) 0 calc(7 * var(--u));
  border-radius: calc(9 * var(--u));
  white-space: nowrap;
  overflow: hidden;
}
.fs > span svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); flex: none; color: #bdbdc1; stroke-width: 1.5; }
.fs > span.b svg { color: #3a92ef; }
/* Studio Mac wears the MountedStorage mark, so the remote computer stands apart from the laptop's own disk. */
.fs > span svg.ms, .fpath svg.ms { color: var(--logo); }
.fs .eject { width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin-left: auto; }
.fs > span svg.eject { color: #8e8e93; }
.fs-head { display: flex; align-items: flex-end; flex: none; height: calc(29 * var(--u)); margin: 0; padding: 0 0 calc(4 * var(--u)) calc(4.5 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 600; color: #78787c; }

.fm { position: relative; display: flex; flex-direction: column; min-width: 0; }
.ftb { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(47 * var(--u)); padding: 0 calc(7.5 * var(--u)) 0 calc(8 * var(--u)); }
.cap {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: calc(32 * var(--u));
  padding: 0 calc(3 * var(--u));
  border-radius: 999px;
  background: #434345;
  color: #f2f2f2;
  box-shadow:
    inset 0 calc(0.5 * var(--u)) 0 rgba(255, 255, 255, 0.15),
    inset 0 calc(-0.5 * var(--u)) 0 rgba(255, 255, 255, 0.08),
    0 calc(0.5 * var(--u)) calc(1 * var(--u)) rgba(0, 0, 0, 0.4);
}
.cap svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin: 0 calc(6.5 * var(--u)); stroke-width: 1.6; }
.cap .dim { color: #8a8a8e; }
.cap .div { width: calc(1 * var(--u)); height: calc(16 * var(--u)); background: rgba(255, 255, 255, 0.2); }
.cap.nav { width: calc(65.5 * var(--u)); justify-content: space-between; }
.cap.nav svg { margin: 0 calc(4.5 * var(--u)); }
.cap.views { width: calc(143 * var(--u)); justify-content: space-between; }
.cap.views b { display: inline-flex; align-items: center; height: calc(25.5 * var(--u)); border-radius: 999px; background: #58585b; }
.cap.views b svg { margin: 0 calc(6.5 * var(--u)); }
.cap.group .chev { width: calc(10 * var(--u)); margin: 0 calc(5 * var(--u)) 0 calc(-5 * var(--u)); }
.cap.acts svg { margin: 0 calc(7.5 * var(--u)); }
.cap.search { width: calc(202 * var(--u)); padding-left: calc(10 * var(--u)); gap: calc(7 * var(--u)); color: rgba(255, 255, 255, 0.5); }
.cap.search svg { margin: 0; color: #e6e6e6; }
.ftitle { display: grid; margin-left: calc(3.5 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 700; color: #ececec; white-space: nowrap; }
.ftitle b { grid-area: 1 / 1; font-weight: 700; }
.ftb-right { display: flex; gap: calc(8 * var(--u)); margin-left: auto; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, calc(100 * var(--u)));
  grid-auto-rows: calc(101 * var(--u));
  align-content: start;
  padding: calc(10 * var(--u)) 0 calc(20 * var(--u)) calc(9 * var(--u));
}
.it { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ib { display: grid; place-items: center; width: calc(64 * var(--u)); height: calc(56 * var(--u)); }
/* Finder's folder, at its true size in a 64 pt icon: 59 x 48. */
.fold { width: calc(59 * var(--u)); height: calc(48 * var(--u)); }
.drv { width: calc(64 * var(--u)); height: calc(52 * var(--u)); filter: drop-shadow(0 calc(1 * var(--u)) calc(1.4 * var(--u)) rgba(0, 0, 0, 0.4)); }
.tile { width: calc(52 * var(--u)); height: calc(52 * var(--u)); filter: drop-shadow(0 calc(1 * var(--u)) calc(1.2 * var(--u)) rgba(0, 0, 0, 0.3)); }
/* Video and photo thumbnails keep their own shape, like Finder's previews. */
.vt { width: auto; height: auto; max-width: calc(62 * var(--u)); max-height: calc(54 * var(--u)); border-radius: calc(3 * var(--u)); box-shadow: 0 0 0 calc(0.5 * var(--u)) rgba(255, 255, 255, 0.22), 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.4); }
.it span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: calc(92 * var(--u));
  padding: 0 calc(3 * var(--u));
  border-radius: calc(4 * var(--u));
  margin-top: calc(7 * var(--u));
  line-height: calc(14.5 * var(--u));
  color: #ececec;
  overflow-wrap: break-word;
}

.fpath { display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(26 * var(--u)); padding: 0 calc(14 * var(--u)); border-top: calc(0.5 * var(--u)) solid rgba(255, 255, 255, 0.09); font-size: calc(11 * var(--u)); color: #c8c8cc; }
.fpath span { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); }
.fpath svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: #a9a9ad; stroke-width: 1.5; }
.fpath .pf, .fpath .pd { width: calc(16 * var(--u)); height: calc(13 * var(--u)); }
.fpath b { font-weight: 400; color: #7a7a7e; }
.fstatus { display: flex; align-items: center; justify-content: center; height: calc(24 * var(--u)); border-top: calc(0.5 * var(--u)) solid rgba(255, 255, 255, 0.09); font-size: calc(11 * var(--u)); color: rgba(255, 255, 255, 0.5); }

/* Sections */
.section { border-top: 1px solid var(--line); padding: clamp(3.5rem, 7vw, 5.5rem) var(--pad); }
.section-head { text-align: center; max-width: 46rem; margin-inline: auto; }
.section-head h2 {
  margin: 0 0 0.85rem;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.section-head p { margin: 0 auto; max-width: 38rem; color: var(--ink-2); font-size: 1.0625rem; }
.section-link { margin: 2rem 0 0; text-align: center; }
.section-link a { color: var(--brand-tint); text-decoration: none; font-weight: 500; }
.section-link a:hover { text-decoration: underline; }

/* Three-up grid that runs edge to edge of the frame, split by hairlines. */
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(2.5rem, 5vw, 3.5rem) calc(-1 * var(--pad)) 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.section:has(> .grid3:last-child) { padding-bottom: 0; }
.section:has(> .grid3:last-child) .grid3 { border-bottom: 0; }
.cell { padding: clamp(1.5rem, 3vw, 2.25rem) var(--pad); background: var(--bg); transition: background 0.2s; }
.cell:hover { background: #0e0f12; }
.cell > svg { width: 22px; height: 22px; fill: none; stroke: var(--brand-tint); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cell h3 { margin: 1.1rem 0 0.45rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; }
.cell p { margin: 0; font-size: 0.9375rem; color: var(--ink-2); }

/* Finder: a drive shared from the Studio Mac wears the MountedStorage badge. */
.ib.rm { position: relative; }
.ib.rm::after { content: ""; position: absolute; right: calc(4 * var(--u)); bottom: calc(10 * var(--u)); width: calc(13 * var(--u)); height: calc(13 * var(--u)); border-radius: 50%; background: var(--logo); box-shadow: 0 0 0 calc(1.5 * var(--u)) #262627; }

/* QuickTime and the copy progress window, shared with the Try it demo. */
.player { position: absolute; z-index: 5; left: calc(192 * var(--u)); top: calc(92 * var(--u)); width: calc(540 * var(--u)); height: calc(304 * var(--u)); overflow: hidden; border-radius: calc(14 * var(--u)); background: #000; box-shadow: 0 0 0 calc(0.5 * var(--u)) rgba(0, 0, 0, 0.9), inset 0 0 0 calc(0.5 * var(--u)) rgba(255, 255, 255, 0.18), 0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, 0.65); opacity: 0; }
.player video { width: 100%; height: 100%; object-fit: cover; }
.ptitle { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; height: calc(30 * var(--u)); padding: 0 calc(10 * var(--u)); background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent); font-size: calc(11 * var(--u)); font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.ptitle .lights { position: absolute; left: calc(10 * var(--u)); margin: 0; padding: 0; }
.pctl { position: absolute; left: 50%; bottom: calc(14 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); width: calc(400 * var(--u)); height: calc(36 * var(--u)); padding: 0 calc(16 * var(--u)); transform: translateX(-50%); border-radius: 999px; background: linear-gradient(180deg, rgba(60, 60, 64, 0.62), rgba(30, 30, 32, 0.62)); box-shadow: inset 0 calc(0.75 * var(--u)) 0 rgba(255, 255, 255, 0.35), inset 0 calc(-0.5 * var(--u)) 0 rgba(255, 255, 255, 0.1), 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, 0.45); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); color: #fff; }
.pctl svg { flex: none; width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.pctl .tc { font-size: calc(10 * var(--u)); color: rgba(255, 255, 255, 0.72); font-variant-numeric: tabular-nums; white-space: nowrap; }
.track { position: relative; flex: 1; height: calc(4 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, 0.25); }
.played { position: absolute; left: 0; top: 0; bottom: 0; width: 34%; border-radius: 999px; background: #fff; }
.head { position: absolute; top: 50%; left: 34%; width: calc(9 * var(--u)); height: calc(9 * var(--u)); margin: calc(-4.5 * var(--u)) 0 0 calc(-4.5 * var(--u)); border-radius: 50%; background: #fff; }

.copy { position: absolute; z-index: 6; left: calc(312 * var(--u)); top: calc(445 * var(--u)); width: calc(300 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(14 * var(--u)); background: rgba(52, 52, 54, 0.94); box-shadow: inset 0 calc(0.5 * var(--u)) 0 rgba(255, 255, 255, 0.18), 0 0 0 calc(0.5 * var(--u)) rgba(0, 0, 0, 0.7), 0 calc(16 * var(--u)) calc(32 * var(--u)) rgba(0, 0, 0, 0.5); font-size: calc(12 * var(--u)); color: #f5f5f5; }
.copy p { margin: 0; font-weight: 600; }
.copy .cnote { margin-top: calc(5 * var(--u)); font-weight: 400; font-size: calc(11 * var(--u)); color: rgba(255, 255, 255, 0.55); }
.copy .cx { position: absolute; right: calc(12 * var(--u)); top: calc(12 * var(--u)); width: calc(14 * var(--u)); height: calc(14 * var(--u)); fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1.6; stroke-linecap: round; }
.copy .cbar { margin-top: calc(9 * var(--u)); height: calc(5 * var(--u)); }
.cbar { position: relative; display: block; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
.cbar i { position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 999px; background: #0a84ff; }

/* Search: MountedStorage's Library window. Four searches take turns, each
   lighting up what it matched: the camera and lens, a word that was said,
   the picture itself, text in the picture. */
.lib { --u: 1px; max-width: 68rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; overflow: hidden; border-radius: 22px; background: #262627; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.85), inset 0 0 0 0.5px rgba(255, 255, 255, 0.13), 0 40px 80px -30px rgba(0, 0, 0, 0.85); font: 400 13px / 1.3 var(--sans); letter-spacing: -0.006em; color: #f5f5f5; }
.lib-bar { display: flex; align-items: center; gap: 16px; height: 54px; padding: 0 12px 0 17px; }
.lib-bar .lights { margin: 0; padding: 0; }
.lib-q { position: relative; flex: 1; height: 34px; overflow: hidden; border-radius: 999px; background: #3a3a3c; box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.15); }
.lib-q > svg { position: absolute; left: 11px; top: 8.5px; width: 17px; height: 17px; fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: 1.7; stroke-linecap: round; }
.lq { position: absolute; inset: 0 10px 0 35px; display: flex; align-items: center; opacity: 0; }
.lq0 { opacity: 1; }
.lq-in { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; white-space: nowrap; }
.lq-in::after { content: ""; width: 1.5px; height: 17px; margin-left: 1px; background: var(--brand-tint); animation: caret 1.1s steps(1) infinite; }
.lchip { display: inline-flex; align-items: center; gap: 5px; height: 23px; padding: 0 8px; border-radius: 7px; background: rgba(10, 132, 255, 0.24); font-style: normal; font-size: 12.5px; }
.lchip b { font-weight: 600; color: var(--brand-tint); }
.lib-modes { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 12px; border-bottom: 0.5px solid rgba(255, 255, 255, 0.09); font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.seg { display: inline-flex; padding: 2px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); }
.seg i { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 6px; font-style: normal; color: rgba(255, 255, 255, 0.78); }
.seg svg { width: 12px; height: 12px; fill: currentColor; }
.seg .lm-auto { background: #5b5b5e; color: #fff; }
.lib-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
/* Across a wide frame, the inspector sets the picture beside its details. */
@media (min-width: 75.01rem) {
  .lib-insp { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 18px; align-content: start; }
  .li-pic { grid-row: 1; grid-column: 1; }
  .li-name { grid-row: 2; grid-column: 1; align-self: start; }
  .li-kv { grid-row: 1 / 3; grid-column: 2; align-content: start; }
}
.lib-hits { display: grid; align-content: start; gap: 4px; padding: 10px; }
.lh, .lh-x > .lw { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border-radius: 10px; }
.lh:first-child { background: #0a5fd0; }
.lh-x { grid-template-columns: minmax(0, 1fr); padding: 0; }
.lh-x > .lw { grid-area: 1 / 1; }
.lh img { align-self: start; width: 96px; height: 54px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.2); }
.lh span { display: grid; min-width: 0; }
.lh b { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.lh em { overflow: hidden; font-style: normal; font-size: 11.5px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; color: rgba(255, 255, 255, 0.58); }
.lh:first-child em { grid-area: 2 / 1; color: rgba(255, 255, 255, 0.86); }
.lw { opacity: 0; }
.lw0 { opacity: 1; }
.lib-insp { padding: 14px 16px 18px; border-left: 0.5px solid rgba(255, 255, 255, 0.09); background: #222223; }
.li-pic { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.li-name { margin: 10px 0 6px; font-weight: 600; }
.li-kv { display: grid; margin: 0; }
.li-kv div { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); gap: 8px; margin: 0 -6px; padding: 3px 6px; border-radius: 5px; font-size: 11.5px; line-height: 1.35; }
.li-kv dt { color: rgba(255, 255, 255, 0.5); }
.li-kv dd { margin: 0; color: #f2f2f2; }
.li-kv .li-0 { background: rgba(10, 132, 255, 0.3); }
/* One cycle is four searches of 3.5 s each; every part that belongs to a
   search shows (or lights) for its quarter. Without motion, the first. */
.lq, .lw, .li-kv .li-0, .li-kv .li-1, .li-kv .li-3, .li-pic, .seg .lm-auto, .seg .lm-mean { animation: 14s infinite both; }
.lq-in { animation: q-type 14s infinite both; }
.lq, .lw { animation-name: q-show; }
.li-kv .li-0, .li-kv .li-1, .li-kv .li-3 { animation-name: q-light; }
.li-pic { animation-name: q-ring; }
.seg .lm-auto { animation-name: q-auto; }
.seg .lm-mean { animation-name: q-mean; }
.lq1, .lq1 .lq-in, .lw1, .li-kv .li-1 { animation-delay: 3.5s; }
.lq2, .lq2 .lq-in, .lw2, .li-pic { animation-delay: 7s; }
.lq3, .lq3 .lq-in, .lw3, .li-kv .li-3 { animation-delay: 10.5s; }
@keyframes caret { 50% { opacity: 0; } }
@keyframes q-show { 0% { opacity: 0; } 2%, 23% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes q-type { 0% { clip-path: inset(0 100% 0 0); } 8%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes q-light { 0%, 3% { background-color: transparent; } 5%, 23% { background-color: rgba(10, 132, 255, 0.3); } 25%, 100% { background-color: transparent; } }
@keyframes q-ring { 0%, 3% { box-shadow: 0 0 0 0 rgba(10, 132, 255, 0); } 5%, 23% { box-shadow: 0 0 0 2.5px #0a84ff; } 25%, 100% { box-shadow: 0 0 0 0 rgba(10, 132, 255, 0); } }
@keyframes q-auto { 0%, 49% { background-color: #5b5b5e; color: #fff; } 50%, 74% { background-color: transparent; color: rgba(255, 255, 255, 0.78); } 75%, 100% { background-color: #5b5b5e; color: #fff; } }
@keyframes q-mean { 0%, 49% { background-color: transparent; color: rgba(255, 255, 255, 0.78); } 50%, 74% { background-color: #5b5b5e; color: #fff; } 75%, 100% { background-color: transparent; color: rgba(255, 255, 255, 0.78); } }

/* Trust: who handles what, drawn flat. A 1000 x 410 drawing on a wide
   screen and its own upright 340 x 574 one on a phone, both at about one
   unit to the pixel so the type stays its real size. */
.net2 { width: min(100%, 62rem); margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; padding: clamp(1rem, 2.5vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.net2 svg { display: block; width: 100%; height: auto; overflow: visible; }
.net2-m { display: none !important; max-width: 22rem; margin-inline: auto; }
.net2 path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ln-direct { stroke: var(--brand-tint); stroke-width: 2; }
.ln-relay { stroke: var(--brand-tint); stroke-opacity: 0.7; stroke-width: 1.5; stroke-dasharray: 6 6; }
.ln-acct { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; }
.nd rect { fill: var(--bg); stroke: var(--line-2); }
.nd-mac rect { stroke: color-mix(in srgb, var(--brand-tint) 55%, transparent); }
.nd-off rect { fill: none; stroke-dasharray: 3 4; }
.nd-off .nd-t { fill: var(--ink-2); }
.net2 text { font-family: var(--sans); text-anchor: middle; }
.nd-t { font-size: 15px; font-weight: 600; fill: var(--ink); }
.nd-s { font-size: 12.5px; fill: var(--ink-2); }
/* Labels sit on their lines, with the panel's colour knocked out behind. */
.lb { font-size: 12.5px; fill: var(--ink-2); paint-order: stroke; stroke: var(--panel); stroke-width: 8px; stroke-linejoin: round; }
.lb-direct { font-size: 13.5px; font-weight: 500; fill: #dbe5ff; }
.lb-l { text-anchor: start !important; }
.lb-r { text-anchor: end !important; }
.section-link { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 2rem; }

.cell > svg.filled { fill: var(--brand-tint); stroke: none; }
/* Four points: four across the full frame, two by two below it. */
@media (min-width: 78.01rem) { .grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 44.01rem) and (max-width: 78rem) { .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Closing call to action. */
.cta { border-top: 1px solid var(--line); }
.cta-in h2 { margin: 0 auto 1rem; max-width: 17ch; font-size: clamp(2.25rem, 1.3rem + 4vw, 4rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; color: #fff; }
.cta-in { padding: clamp(4rem, 8vw, 6rem) var(--pad); }
.cta-in > p { margin-bottom: 2rem; font-size: 1.0625rem; color: var(--ink-2); }
.cta-in .fineprint { margin: 1.5rem 0 0; }
.cta-in .fineprint-2 { margin-top: 0.35rem; }
.cta-icon { display: block; width: 4.5rem; height: 4.5rem; margin: 0 auto 1.5rem; }
.cta-in .fineprint a { color: inherit; text-decoration: underline; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); }
.footer-cols { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 2rem; padding: 3rem var(--pad); font-size: 0.875rem; }
.footer-brand { display: grid; align-content: start; gap: 0.9rem; }
.footer-brand p { margin: 0; color: var(--ink-3); }
.footer-cols nav { display: grid; align-content: start; gap: 0.6rem; }
.footer-cols nav p { margin: 0 0 0.25rem; color: var(--ink-3); }
.footer-cols nav a, .footer-cols nav span { color: var(--ink-2); text-decoration: none; }
.footer-cols nav a:hover { color: var(--ink); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding: 1.25rem var(--pad); border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--ink-3); }

/* Inner pages: a title block, then a reading column. */
.page-hero { border-bottom: 1px solid var(--line); padding: clamp(4rem, 9vw, 6.5rem) max(var(--pad), calc((100% - 44rem) / 2)) clamp(2.5rem, 6vw, 4rem); }
.page-hero h1 { margin: 0 0 1.25rem; font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4.25rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.035em; max-width: 16ch; }
.page-hero p { margin: 0; max-width: 38rem; color: var(--ink-2); font-size: 1.125rem; }
.page-hero a, .prose a { color: var(--ink); }
.prose { padding: clamp(2.5rem, 6vw, 4.5rem) max(var(--pad), calc((100% - 44rem) / 2)) clamp(4rem, 8vw, 6rem); }
.prose > * { max-width: var(--measure); }
.prose h2 { margin: 3rem 0 0.85rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.prose li { margin-bottom: 0.4rem; }
.prose li::marker { color: var(--ink-3); }

.faq { margin-top: 1.5rem; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
details summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.1rem; cursor: pointer; font-weight: 500; color: var(--ink); list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; font-size: 1.375rem; font-weight: 300; line-height: 1; color: var(--ink-3); transition: transform 0.2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding-bottom: 1.1rem; margin: 0; }

/* ------------------------------------------------------------------------
   Show sections: after the story, each section makes one point with a
   headline, a sentence and one picture. */
.show-head { text-align: center; max-width: 46rem; margin-inline: auto; }
.show-head h2 {
  margin: 0 0 0.85rem;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.show-head p { margin: 0 auto; max-width: 38rem; color: var(--ink-2); font-size: 1.0625rem; }
.show-head .show-note { margin-top: 1.25rem; font-size: 1rem; color: var(--ink-3); }
/* Search breaks the run of centred heads: the headline on the left, its
   words on the right, the window across the frame below. */
@media (min-width: 60.01rem) {
  .show-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3rem; align-items: start; max-width: 68rem; text-align: left; }
  .show-split h2 { margin: 0; max-width: 13ch; }
  .show-split p { margin: 0; max-width: none; }
  .show-split .show-note { margin-top: 1rem; }
}
.show-note a { color: var(--brand-tint); text-decoration: none; font-weight: 500; }
.show-note a::after { content: "\a0→"; }
.show-note a:hover { text-decoration: underline; }
.show-foot { max-width: 36rem; margin: 2rem auto 0; text-align: center; font-size: 0.8125rem; color: var(--ink-3); }
.show > .grid3 { margin-top: clamp(3rem, 6vw, 4.5rem); }
.show:has(> .grid3:last-child) { padding-bottom: 0; }

/* Cost: the same 12 TB both ways, a year at a time, then what it doesn't
   give you. Both figures are facts, so both are in full ink. */
.cost { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: clamp(2.5rem, 5vw, 3.5rem) calc(-1 * var(--pad)) 0; border-block: 1px solid var(--line); }
.cost-col { padding: clamp(2rem, 4vw, 3rem) var(--pad); text-align: center; }
.cost-col + .cost-col { border-left: 1px solid var(--line); }
.cost-k { margin: 0 0 0.9rem; font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); }
.cost-n { margin: 0 0 0.75rem; font: 600 clamp(2.5rem, 1.6rem + 3.5vw, 4rem) / 1 var(--display); letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cost-n span { font-size: 0.32em; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-2); }
.cost-d { max-width: 21rem; margin: 0 auto; color: var(--ink-2); }
.cost-row { grid-column: 1 / -1; margin: 0; padding: 1.5rem max(var(--pad), calc((100% - 44rem) / 2)); border-top: 1px solid var(--line); text-align: center; color: var(--ink-2); }
.cost-row a { color: var(--ink); }

/* Questions on the homepage. */
.faq-home { max-width: 44rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; }
.faq-home summary { font-size: 1.125rem; padding-block: 1.35rem; }
.faq-home p { color: var(--ink-2); max-width: 40rem; }

/* /try */
.page-hero-center { text-align: center; padding-inline: var(--pad); }
.page-hero-center h1, .page-hero-center p { margin-inline: auto; }
.try-section { border-top: 0; padding-top: clamp(2rem, 4vw, 3rem); }

/* Narrower desktops: Finder drops the controls it would drop itself. */
/* When the frame meets the window edge, its guide lines would read as a stray border. */
@media (max-width: 81rem) {
  .frame { border-inline-color: transparent; }
  main.frame::before, main.frame::after, .section::before, .section::after, .story::before, .story::after { display: none; }
}
@media (max-width: 60rem) {
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-header .frame > nav { display: none; }
  .nav-menu { display: block; }
  .site-header .frame { gap: 1rem; }
  .brand { margin-right: auto; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

/* The trust diagram turns upright before its words get too small. */
@media (max-width: 52rem) {
  .net2 { max-width: 26rem; }
  .net2-d { display: none !important; }
  .net2-m { display: block !important; }
}

/* Phone */
@media (max-width: 44rem) {
  .frame { border-inline: 0; }
  main.frame::before, main.frame::after, .section::before, .section::after, .story::before, .story::after { display: none; }
  .hero-shot { border-radius: 16px; }
  .actions .button { flex: 1 1 100%; }
  .grid3 { grid-template-columns: minmax(0, 1fr); }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .footer-contact { grid-column: 1 / -1; }
  .cost { grid-template-columns: minmax(0, 1fr); }
  .cost-col + .cost-col { border-left: 0; border-top: 1px solid var(--line); }
  .lib-body { grid-template-columns: minmax(0, 1fr); }
  .lib-insp { border-left: 0; border-top: 0.5px solid rgba(255, 255, 255, 0.09); }
  .lib-bar { gap: 12px; padding-left: 14px; }
  .lh:not(.lh-x), .lh-x > .lw { grid-template-columns: 72px minmax(0, 1fr); }
  .lh img { width: 72px; height: 41px; }
  .li-kv div:is(:nth-child(3), :nth-child(7), :nth-child(8), :nth-child(10)) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}