@font-face {
  font-family:'Golos Text';
  src:url('assets/golos-400.ttf?v=c716bee20362') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:'Golos Text';
  src:url('assets/golos-500.ttf?v=c716bee20362') format('truetype');
  font-style:normal;
  font-weight:500;
  font-display:swap;
}
@font-face {
  font-family:'Golos Text';
  src:url('assets/golos-600.ttf?v=c716bee20362') format('truetype');
  font-style:normal;
  font-weight:600;
  font-display:swap;
}
@font-face {
  font-family:'Golos Text';
  src:url('assets/golos-700.ttf?v=c716bee20362') format('truetype');
  font-style:normal;
  font-weight:700;
  font-display:swap;
}
*,*::before,*::after {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:0;
}
body {
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font:400 var(--font-body)/var(--line-body) var(--font-family);
  -webkit-font-smoothing:antialiased;
}
button,select,a {
  -webkit-tap-highlight-color:transparent;
}
button,select {
  font:inherit;
}
button,a,select {
  touch-action:manipulation;
}
button {
  border:0;
  cursor:pointer;
  background:none;
  color:inherit;
}
a {
  color:inherit;
  text-decoration:none;
}
button,a,select {
  transition:background var(--duration-fast),color var(--duration-fast),border-color var(--duration-fast),box-shadow var(--duration-fast);
}
:focus-visible {
  outline:3px solid var(--color-focus);
  outline-offset:4px;
}
button:disabled {
  cursor:default;
}
h1,h2,h3,p {
  margin:0;
}
.icon {
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}
.svg-sprite {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
[hidden] {
  display:none!important;
}
.skip-link {
  position:fixed;
  top:-70px;
  left:24px;
  z-index:100;
  padding:12px 20px;
  background:var(--color-text);
  color:white;
  border-radius:10px;
}
.skip-link:focus {
  top:16px;
}
.eyebrow {
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-muted);
  padding:0 12px;
  margin-bottom:12px;
}
.sidebar {
  position:fixed;
  left:clamp(24px,3.5vw,64px);
  top:155px;
  bottom:32px;
  width:var(--sidebar-width);
  display:flex;
  flex-direction:column;
  z-index:20;
}
.sections {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.section-button {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding:10px 12px;
  border-radius:var(--radius-control);
  font-size:var(--font-label);
  color:var(--color-secondary);
  text-align:left;
  width:100%;
}
.section-button .chevron {
  margin-left:auto;
  width:14px;
  opacity:0;
}
.section-button:hover {
  background:var(--color-surface);
  color:var(--color-text);
}
.section-button.active {
  background:var(--color-surface);
  color:var(--color-text);
  font-weight:500;
}
.section-button.active .chevron {
  opacity:1;
}
.year-nav {
  margin-top:64px;
  min-height:0;
  flex:1;
  max-height:440px;
  display:flex;
  flex-direction:column;
}
.year-nav .eyebrow {
  margin-bottom:18px;
}
#year-rail {
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow-y:auto;
  scrollbar-width:none;
  padding:4px 10px 4px 8px;
  flex:1;
  max-height:360px;
}
#year-rail::-webkit-scrollbar {
  display:none;
}
.year-tick {
  min-height:8px;
  flex:1;
  max-height:22px;
  display:flex;
  align-items:center;
  gap:13px;
  text-align:left;
  padding:0 4px;
  position:relative;
  color:var(--color-muted);
}
.year-tick::before {
  content:'';
  display:block;
  height:2px;
  border-radius:2px;
  width:15px;
  flex:none;
  background:#d5d5d9;
  transition:width .24s var(--ease),background .24s,transform .24s;
}
.year-tick span {
  font-size:12px;
  line-height:1;
  opacity:0;
  transform:translateX(-4px);
  transition:opacity .18s,transform .24s;
  pointer-events:none;
}
.year-tick.major::before {
  width:24px;
}
.year-tick.major span {
  opacity:1;
  transform:none;
}
.year-tick.active::before {
  width:37px;
  background:var(--color-text);
}
.year-tick.active span {
  font-weight:600;
  color:var(--color-text);
  opacity:1;
  transform:none;
}
.year-tick:hover::before,.year-tick:focus-visible::before {
  width:43px;
  background:var(--color-text);
}
.year-tick:hover span,.year-tick:focus-visible span {
  opacity:1;
  transform:none;
  color:var(--color-text);
}
.year-tick.near::before {
  width:27px;
  background:#a4a4aa;
}
.made-by {
  margin-top:auto;
  padding:32px 12px 0;
  font-size:12px;
  color:var(--color-secondary);
}
.made-by span {
  color:var(--color-text);
  font-weight:500;
}
.made-by:hover,.made-by:hover span {
  color:var(--color-accent);
}
main {
  max-width:calc(var(--content-width) + 80px);
  margin:0 auto 0 max(268px,calc((100vw - 920px)/2));
  padding:0 40px;
}
.intro {
  padding-top:64px;
  text-align:center;
}
.intro-mark {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  height:24px;
  margin-bottom:16px;
}
h1 {
  font-size:var(--font-title);
  letter-spacing:-.055em;
  font-weight:600;
  line-height:1.2;
}
.intro p {
  margin-top:12px;
  color:var(--color-secondary);
  font-size:1rem;
  line-height:1.6;
  letter-spacing:-.015em;
}
.mobile-break {
  display:none;
}
.categories {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  padding:34px 0 48px;
}
.category-button {
  font-size:var(--font-label);
  white-space:nowrap;
  padding:10px 17px;
  background:var(--color-surface);
  border-radius:var(--radius-control);
  line-height:22px;
}
.category-button:hover {
  background:var(--color-surface-hover);
}
.category-button.active {
  background:var(--color-selected);
  color:var(--color-on-selected);
}
.category-button.active:hover {
  background:#3a3a3c;
}
.timeline-toolbar {
  position:sticky;
  top:0;
  z-index:15;
  background:color-mix(in srgb,var(--color-bg) 94%,transparent);
  backdrop-filter:blur(18px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:24px 0;
  margin-bottom:30px;
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.timeline-toolbar.stuck {
  border-color:var(--color-border);
}
.collection-heading {
  display:flex;
  align-items:baseline;
  gap:11px;
  min-width:0;
}
.collection-heading h2 {
  font-size:1rem;
  letter-spacing:-.025em;
  font-weight:600;
  line-height:1.4;
}
.heading-dot {
  color:#d0d0d5;
  font-weight:500;
}
.collection-heading p {
  font-size:var(--font-label);
  color:var(--color-secondary);
  line-height:1.4;
}
/* Year and sort controls share typography, colour, icon size and target height. */
.toolbar-actions {
  --toolbar-control-size:var(--font-label);
  display:flex;
  align-items:center;
  flex-shrink:0;
  gap:10px;
  color:var(--color-secondary);
  font:400 var(--toolbar-control-size)/1.55 var(--font-family);
}
.year-picker {
  display:flex;
  align-items:center;
  position:relative;
  flex-shrink:0;
  border-radius:8px;
}
.year-picker select,.sort-button {
  font:inherit;
  color:inherit;
  min-height:44px;
}
.year-picker select {
  appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  width:calc(4ch + 30px);
  min-width:0;
  max-width:none;
  padding:10px 24px 10px 6px;
  border-radius:8px;
  font-variant-numeric:tabular-nums;
}
.year-picker .icon {
  pointer-events:none;
  position:absolute;
  right:4px;
  width:18px;
  height:18px;
}
.sort-button {
  display:flex;
  align-items:center;
  gap:6px;
  padding:9px 8px;
  white-space:nowrap;
  border-radius:8px;
  margin-right:-8px;
}
.sort-button .icon {
  width:18px;
  height:18px;
  transition:transform .3s;
}
.year-picker:hover {
  color:var(--color-text);
  background:var(--color-surface);
}
@media(max-width:700px) {
  .toolbar-actions {
    --toolbar-control-size:13px;
    gap:8px;
  }
}
.sort-button:hover {
  color:var(--color-text);
  background:var(--color-surface);
}
.sort-button.ascending .icon {
  transform:rotate(180deg);
}
#timeline {
  outline:none;
  min-height:420px;
}
.year-group {
  scroll-margin-top:103px;
  margin-bottom:40px;
}
.year-heading {
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:20px;
  font-size:14px;
  line-height:24px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.year-heading::after {
  content:'';
  height:1px;
  background:var(--color-border);
  flex:1;
}
.year-heading small {
  font-size:12px;
  color:var(--color-muted);
  font-weight:400;
}
.cards {
  display:grid;
  gap:18px;
}
.product-card {
  display:grid;
  grid-template-columns:36% minmax(0,1fr);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  overflow:hidden;
  transition:border-color .2s,box-shadow .25s;
  background:var(--color-bg);
  min-height:var(--media-height);
}
.product-card:hover {
  border-color:var(--color-border-hover);
  box-shadow:var(--shadow-hover);
}
.product-media {
  background:var(--color-surface);
  height:var(--media-height);
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  align-self:stretch;
  height:100%;
  min-height:var(--media-height);
}
.product-media img {
  display:block;
  width:84%;
  height:224px;
  object-fit:contain;
  transition:transform .6s var(--ease);
  mix-blend-mode:multiply;
}
.product-media img.app-icon {
  width:120px;
  height:120px;
  filter:drop-shadow(0 8px 9px #0000000a);
  mix-blend-mode:normal;
}
.product-content {
  padding:26px 28px 22px;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.product-top {
  display:flex;
  align-items:flex-start;
  gap:12px;
  justify-content:space-between;
}
.product-top h3 {
  font-size:21px;
  font-weight:600;
  line-height:1.27;
  letter-spacing:-.04em;
  overflow-wrap:anywhere;
}
.status {
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  font-size:10px;
  line-height:17px;
  padding:3px 9px;
  letter-spacing:.01em;
  border-radius:var(--radius-pill);
  background:var(--color-archived-bg);
  color:var(--color-archived-text);
  margin-top:2px;
}
.status.current {
  color:var(--color-current-text);
  background:var(--color-current-bg);
}
.status.vintage {
  background:var(--color-vintage-bg);
  color:var(--color-vintage-text);
}
.product-description {
  color:var(--color-secondary);
  font-size:15px;
  line-height:1.52;
  margin-top:12px;
  letter-spacing:-.012em;
}
.specs {
  display:flex;
  flex-wrap:wrap;
  gap:8px 0;
  list-style:none;
  padding:0;
  margin:22px 0 25px;
  font-size:11px;
  line-height:1.4;
  color:#55555b;
}
.specs li {
  padding:0 10px;
  border-right:1px solid var(--color-border);
}
.specs li:first-child {
  padding-left:0;
}
.specs li:last-child {
  padding-right:0;
  border-right:0;
}
.product-bottom {
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  color:var(--color-secondary);
}
.date-prefix {
  color:var(--color-muted);
  margin-right:5px;
}
.source-link {
  display:flex;
  align-items:center;
  gap:5px;
  padding:5px 0;
  color:var(--color-muted);
  font-size:11px;
}
.source-link .icon {
  width:12px;
  height:12px;
}
.source-link:hover {
  color:var(--color-accent);
}
.end-note {
  text-align:center;
  color:var(--color-muted);
  font-size:12px;
  margin:58px 0 80px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.end-note::before {
  content:'';
  width:5px;
  height:5px;
  background:#d1d1d6;
  border-radius:50%;
}
footer {
  border-top:1px solid var(--color-border);
  padding:32px 0 38px;
  font-size:11px;
  line-height:1.7;
  color:var(--color-muted);
}
.footer-top {
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
  font-size:12px;
}
.footer-top span:first-child {
  font-weight:500;
  color:var(--color-secondary);
}
footer p {
  max-width:760px;
}
footer a {
  color:var(--color-secondary);
  text-decoration:underline;
  text-decoration-color:#d5d5da;
  text-underline-offset:3px;
}
footer a:hover {
  color:var(--color-accent);
}
footer .method-note {
  margin-top:10px;
}
.back-to-top {
  position:fixed;
  right:26px;
  bottom:28px;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:44px;
  min-height:44px;
  border:1px solid var(--color-border);
  background:var(--color-bg);
  box-shadow:var(--shadow-floating);
  border-radius:var(--radius-pill);
  padding:12px;
}
.back-to-top span {
  display:none;
  font-size:12px;
}
.back-to-top:hover {
  background:var(--color-surface);
  border-color:var(--color-border-hover);
}
.back-to-top:hover span {
  display:block;
}
.mobile-top {
  display:none;
}
.skeleton {
  display:grid;
  grid-template-columns:36% 1fr;
  gap:20px;
  margin-bottom:18px;
  min-height:280px;
  border:1px solid var(--color-border);
  border-radius:20px;
  overflow:hidden;
  padding-right:28px;
}
.skeleton div {
  grid-row:span 3;
  height:280px;
  background:var(--color-surface);
}
.skeleton span {
  height:20px;
  background:var(--color-surface);
  margin-top:24px;
  border-radius:5px;
  animation:pulse 1.3s infinite alternate;
}
.error-state {
  text-align:center;
  padding:80px 20px;
}
.error-state p {
  margin:8px 0 20px;
  color:var(--color-secondary);
}
.error-state button {
  background:var(--color-text);
  color:white;
  padding:12px 22px;
  border-radius:10px;
}
.noscript {
  padding:32px;
  text-align:center;
}
@keyframes pulse {
  to {
    opacity:.35;
  }
}
@keyframes appear {
  from {
    opacity:0;
    transform:translateY(6px);
  }
  to {
    opacity:1;
    transform:none;
  }
}
.enter {
  animation:appear .28s var(--ease);
}
@media(min-width:1600px) {
  main {
    margin:0 auto;
    transform:translateX(65px);
  }
  .sidebar {
    left:56px;
  }
  .back-to-top {
    right:42px;
  }
  .product-content {
    padding:30px 32px;
  }
  .product-media img {
    height:230px;
  }
}
@media(max-width:1190px) {
  :root {
    --sidebar-width:152px;
    --media-height:264px;
  }
  .sidebar {
    left:24px;
    top:153px;
  }
  main {
    margin-left:204px;
    padding:0 30px;
  }
  .product-card {
    grid-template-columns:35% minmax(0,1fr);
  }
  .product-content {
    padding:24px;
  }
  .product-top {
    flex-wrap:wrap;
    gap:6px;
  }
  .product-top h3 {
    font-size:20px;
  }
  .product-description {
    font-size:14px;
  }
  .product-media img {
    height:200px;
  }
  .specs {
    font-size:10px;
    margin:18px 0;
  }
  .specs li {
    padding:0 7px;
  }
  .categories {
    gap:7px;
  }
  .category-button {
    padding:9px 14px;
  }
}
@media(max-width:900px) {
  :root {
    --sidebar-width:132px;
  }
  .sidebar {
    left:16px;
    top:153px;
  }
  main {
    margin-left:166px;
    padding:0 24px;
  }
  .section-button {
    padding:10px;
    gap:9px;
  }
  .collection-heading {
    flex-wrap:wrap;
    gap:2px 9px;
  }
  .collection-heading p {
    flex-basis:100%;
    font-size:12px;
  }
  .heading-dot {
    display:none;
  }
  .product-card {
    grid-template-columns:34% minmax(0,1fr);
  }
  .product-content {
    padding:22px;
  }
  .specs {
    gap:8px;
  }
  .specs li,.specs li:first-child {
    border:none;
    padding:0;
  }
  .specs li:not(:last-child)::after {
    content:'·';
    padding-left:8px;
    color:#bbb;
  }
  .product-top h3 {
    font-size:19px;
  }
  .product-media img {
    height:180px;
  }
  .product-description {
    font-size:14px;
  }
  .intro {
    padding-top:52px;
  }
}
@media(max-width:700px) {
  :root {
    --font-title:1.9rem;
    --media-height:230px;
    --radius-card:18px;
  }
  html {
    scroll-padding-top:0;
  }
  .sidebar {
    display:none;
  }
  main {
    margin:0;
    max-width:none;
    transform:none;
    padding:0 20px;
  }
  .mobile-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 20px 0;
    position:relative;
    z-index:40;
  }
  .section-picker {
    position:relative;
  }
  #section-toggle {
    display:flex;
    align-items:center;
    gap:9px;
    font-size:13px;
    padding:10px 12px;
    border-radius:10px;
    background:var(--color-surface);
    min-height:42px;
  }
  #section-toggle .icon:last-child {
    width:14px;
    height:14px;
    margin-left:6px;
    transition:transform .2s;
  }
  #section-toggle[aria-expanded=true] .icon:last-child {
    transform:rotate(180deg);
  }
  #section-toggle:hover {
    background:var(--color-surface-hover);
  }
  #mobile-sections {
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    background:var(--color-bg);
    border:1px solid var(--color-border);
    border-radius:14px;
    box-shadow:var(--shadow-floating);
    padding:6px;
    min-width:190px;
  }
  .intro {
    text-align:left;
    padding-top:32px;
  }
  .intro-mark {
    display:none;
  }
  .intro p {
    font-size:15px;
    line-height:1.6;
    margin-top:10px;
  }
  .categories {
    flex-wrap:nowrap;
    justify-content:flex-start;
    margin:0 -20px;
    padding:25px 20px 32px;
    overflow-x:auto;
    scrollbar-width:none;
    scroll-padding:20px;
  }
  .categories::-webkit-scrollbar {
    display:none;
  }
  .category-button {
    padding:9px 15px;
    border-radius:10px;
    font-size:13px;
  }
  .timeline-toolbar {
    padding:16px 0;
    margin-bottom:24px;
    min-height:76px;
    gap:12px;
  }
  .collection-heading h2 {
    font-size:15px;
  }
  .collection-heading p {
    font-size:11px;
    line-height:1.5;
  }
  .year-group {
    scroll-margin-top:92px;
    margin-bottom:32px;
  }
  .year-heading {
    font-size:13px;
    margin-bottom:14px;
    gap:12px;
  }
  .year-heading small {
    font-size:11px;
  }
  .cards {
    gap:16px;
  }
  .product-card {
    grid-template-columns:1fr;
    min-height:0;
  }
  .product-media {
    height:var(--media-height);
    min-height:var(--media-height);
  }
  .product-media img {
    width:75%;
    height:188px;
  }
  .product-media img.app-icon {
    width:112px;
    height:112px;
  }
  .product-content {
    padding:24px;
  }
  .product-top {
    flex-wrap:nowrap;
    gap:12px;
    align-items:flex-start;
  }
  .product-top h3 {
    font-size:22px;
  }
  .status {
    font-size:10px;
    margin-top:3px;
    padding:3px 8px;
  }
  .product-description {
    font-size:14px;
    line-height:1.55;
    margin-top:12px;
  }
  .specs {
    margin:21px 0 24px;
    font-size:10px;
    gap:7px;
  }
  .specs li,.specs li:first-child {
    border:0;
    padding:0;
  }
  .product-bottom {
    font-size:11px;
  }
  .source-link {
    font-size:10px;
  }
  .back-to-top {
    bottom:20px;
    right:18px;
    padding:11px;
  }
  .back-to-top:hover span {
    display:none;
  }
  .end-note {
    margin:40px 0 58px;
  }
  footer {
    padding-bottom:30px;
  }
  .footer-top {
    font-size:11px;
    flex-wrap:wrap;
  }
  footer p {
    font-size:10px;
    line-height:1.8;
  }
  .skeleton {
    grid-template-columns:1fr;
    padding:0 20px 20px;
    gap:8px;
  }
  .skeleton div {
    grid-row:auto;
    margin:0 -20px;
    height:230px;
  }
  .skeleton span {
    margin:8px 0;
  }
  .mobile-break {
    display:none;
  }
}
@media(max-width:374px) {
  main {
    padding:0 16px;
  }
  .mobile-top {
    padding-left:16px;
    padding-right:16px;
  }
  .categories {
    margin:0 -16px;
    padding-left:16px;
    padding-right:16px;
  }
  .intro p {
    font-size:14px;
  }
  .mobile-break {
    display:block;
  }
  .product-content {
    padding:20px;
  }
  .product-top {
    flex-wrap:wrap;
  }
  .product-top h3 {
    font-size:21px;
  }
  .collection-heading p {
    max-width:140px;
  }
  .specs {
    font-size:10px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
}
/* Readability and invariant media sizing across all catalogue records. */
.eyebrow {
  font-size:12px;
}
.product-media {
  height:var(--media-height);
  min-height:var(--media-height);
  align-self:start;
}
.product-description {
  font-size:16px;
}
.specs {
  font-size:12px;
  line-height:1.5;
}
.status {
  font-size:12px;
  line-height:18px;
}
.source-link {
  font-size:12px;
}
.product-bottom {
  font-size:13px;
}
.product-top {
  flex-wrap:wrap;
}
.product-card {
  background:var(--color-bg);
}
.product-media {
  align-self:stretch;
  height:auto;
}
.product-media img {
  max-height:230px;
}
.product-media::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
}
.service-state {
  font-size:12px;
  line-height:1.5;
  color:var(--color-secondary);
  margin:-10px 0 12px;
  align-self:flex-start;
}
.service-state span {
  color:var(--color-muted);
}
.service-state:hover {
  color:var(--color-accent);
}
.image-caption,.image-credit {
  position:absolute;
  bottom:12px;
  left:14px;
  right:14px;
  text-align:center;
  font-size:11px;
  line-height:1.4;
  color:var(--color-muted);
}
.image-credit:hover {
  color:var(--color-accent);
}
footer,footer p {
  font-size:12px;
}
.footer-top {
  font-size:12px;
}
.specs li {
  overflow-wrap:anywhere;
}
.product-content {
  min-height:var(--media-height);
}
.category-button:focus-visible {
  outline-offset:-3px;
}
.year-tick:focus-visible {
  outline-offset:0;
}
.year-picker:focus-within {
  outline:2px solid var(--color-focus);
  border-radius:5px;
}
.year-picker select:focus-visible {
  outline:none;
}
@media(min-width:701px) {
  .product-media {
    height:var(--media-height);
    min-height:var(--media-height);
    align-self:start;
  }
  .product-card {
    grid-template-columns:36% minmax(0,1fr);
    background:linear-gradient(to right,var(--color-surface) 36%,var(--color-bg) 36%);
  }
  .product-content {
    background:var(--color-bg);
  }
}
@media(max-width:1190px) and (min-width:701px) {
  .product-media img {
    height:200px;
  }
  .product-top h3 {
    font-size:20px;
  }
  .specs {
    font-size:12px;
  }
  .product-content {
    padding:24px;
  }
  .product-card {
    min-height:320px;
  }
}
@media(max-width:700px) {
  .product-description {
    font-size:16px;
  }
  .product-media {
    height:230px;
    min-height:230px;
  }
  .product-content {
    min-height:0;
  }
  .specs,.status,.source-link,.collection-heading p {
    font-size:12px;
  }
  .product-bottom {
    font-size:12px;
  }
  .status {
    padding:3px 9px;
  }
  .product-top h3 {
    font-size:22px;
  }
  .image-caption,.image-credit {
    font-size:11px;
  }
  .product-media img {
    height:188px;
  }
  .collection-heading p {
    line-height:1.5;
  }
  .source-link .icon {
    width:12px;
  }
}
.media-notes {
  position:absolute;
  bottom:12px;
  left:14px;
  right:14px;
  display:flex;
  flex-direction:column;
  gap:3px;
  text-align:center;
  color:var(--color-muted);
  font-size:11px;
  line-height:1.4;
}
.media-notes .image-caption,.media-notes .image-credit {
  position:static;
  font-size:inherit;
  color:inherit;
}
.media-notes a:hover {
  color:var(--color-accent);
  text-decoration:underline;
  text-underline-offset:3px;
}
.media-dark {
  background:var(--color-photo-dark);
}
.media-dark img {
  mix-blend-mode:normal;
}
.media-dark .media-notes {
  color:#b6b6bb;
}
.product-media img.wordmark {
  width:72%;
  height:110px;
  mix-blend-mode:multiply;
}
.product-media img.product-box {
  width:150px;
  height:210px;
}
.product-media:has(.credit-line) img {
  max-height:195px;
}
.product-bottom {
  flex-wrap:wrap;
}
.credit-line {
  font-size:10px;
}
@media(max-width:700px) {
  .product-media:has(.credit-line) img {
    max-height:150px;
  }
  .product-media img.product-box {
    height:170px;
    width:125px;
  }
  .product-media img.wordmark {
    height:95px;
  }
}
.year-tick.suppress-label:not(.active) span {
  opacity:0;
}
#year-rail:hover .year-tick:not(:hover) span {
  opacity:0;
}
#year-rail .year-tick:hover span,#year-rail .year-tick:focus-visible span {
  opacity:1;
}
/* Shared navigation glyphs and the home mark. */
.sidebar {
  left:var(--sidebar-left);
}
.nav-icon {
  width:var(--icon-nav-size);
  height:var(--icon-nav-size);
  flex:0 0 var(--icon-nav-size);
  fill:none;
  stroke:currentColor;
  stroke-width:var(--icon-nav-stroke);
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
  transition:transform var(--duration-normal) var(--ease);
}
.nav-icon .glyph-detail {
  transform-box:fill-box;
  transform-origin:center;
  transition:transform var(--duration-normal) var(--ease),opacity var(--duration-normal);
}
.category-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
:is(.category-button,.section-button,#section-toggle):is(:hover,:focus-visible) .nav-icon {
  transform:translateY(-1px);
}
:is(.category-button,.section-button,#section-toggle):is(:hover,:focus-visible) .motion-tilt {
  transform:rotate(-7deg);
}
:is(.category-button,.section-button,#section-toggle):is(:hover,:focus-visible) .motion-turn .glyph-detail {
  transform:rotate(18deg);
}
:is(.category-button,.section-button,#section-toggle):is(:hover,:focus-visible) .motion-lift .glyph-detail {
  transform:translateY(-1.5px);
}
:is(.category-button,.section-button,#section-toggle):is(:hover,:focus-visible) .motion-pulse .glyph-detail {
  animation:icon-pulse 520ms var(--ease) both;
}
:is(.category-button,.section-button,#section-toggle):is(:hover,:focus-visible) .motion-scan .glyph-detail {
  animation:icon-scan 480ms var(--ease) both;
}
:is(.category-button,.section-button,#section-toggle):is(:hover,:focus-visible) .motion-float .glyph-detail {
  animation:icon-float 540ms var(--ease) both;
}
@keyframes icon-pulse {
  45% {
    transform:scale(.84);
    opacity:.55;
  }
  100% {
    transform:scale(1);
    opacity:1;
  }
}
@keyframes icon-scan {
  45% {
    transform:translateX(1.5px);
    opacity:.55;
  }
  100% {
    transform:translateX(0);
    opacity:1;
  }
}
@keyframes icon-float {
  45% {
    transform:translateY(2px);
  }
  100% {
    transform:translateY(0);
  }
}
.brand-home {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:44px;
  flex-shrink:0;
  border-radius:10px;
  color:var(--color-text);
}
.timeline-mark {
  display:grid;
  gap:2px;
  width:21px;
  transform:skewY(-12deg);
  flex-shrink:0;
}
.timeline-mark i {
  display:block;
  width:100%;
  height:3px;
  background:#1d1d1f;
  transform-origin:left center;
  transition:transform .42s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--stripe)*24ms);
}
.timeline-mark i:nth-child(1) {
  --stripe:0;
  background:#61bb46;
}
.timeline-mark i:nth-child(2) {
  --stripe:1;
  background:#fdb827;
}
.timeline-mark i:nth-child(3) {
  --stripe:2;
  background:#f5821f;
}
.timeline-mark i:nth-child(4) {
  --stripe:3;
  background:#e03a3e;
}
.timeline-mark i:nth-child(5) {
  --stripe:4;
  background:#963d97;
}
.timeline-mark i:nth-child(6) {
  --stripe:5;
  background:#009ddc;
}
.timeline-mark i:nth-child(7) {
  --stripe:6;
  width:70%;
}
@media(hover:hover) and (pointer:fine) {
  .brand-home:hover .timeline-mark i {
    transform:translateX(3px);
    transition-delay:calc(var(--stripe)*24ms);
  }
  .brand-home:hover .timeline-mark i:nth-child(even) {
    transform:translateX(6px);
  }
}
.brand-home:focus-visible .timeline-mark i {
  transform:translateX(3px);
}
.brand-home:focus-visible .timeline-mark i:nth-child(even) {
  transform:translateX(6px);
}
.intro-mark {
  display:flex;
  height:58px;
  margin:-10px auto 14px;
}
.intro-mark .timeline-mark {
  width:28px;
  gap:3px;
}
.intro-mark .timeline-mark i {
  height:4px;
}
.sidebar-home {
  position:fixed;
  left:calc(var(--sidebar-left) + 2px);
  top:22px;
  z-index:25;
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  pointer-events:none;
  transition:opacity var(--duration-fast),transform var(--duration-normal) var(--ease),background var(--duration-fast),visibility var(--duration-fast);
}
.sidebar-home.visible {
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}
.representative-note {
  font-style:italic;
}
/* Version-name panels are an explicit fallback, never a reconstructed OS image. */
.archive-label {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:28px;
  max-width:100%;
  text-align:center;
  color:var(--color-text);
}
.archive-label-kind {
  font-size:10px;
  line-height:1.5;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-muted);
}
.archive-label-name {
  max-width:250px;
  font-size:26px;
  line-height:1.18;
  font-weight:500;
  letter-spacing:-.035em;
  text-wrap:balance;
  overflow-wrap:anywhere;
}
.archive-label-year {
  font-size:12px;
  color:var(--color-secondary);
  font-variant-numeric:tabular-nums;
}
@media(max-width:700px) {
  .archive-label {
    gap:12px;
    padding:20px;
  }
  .archive-label-name {
    font-size:22px;
  }
}
.release-panel {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:140px;
  height:140px;
  padding:12px;
  gap:6px;
  color:var(--color-text);
  text-align:center;
}
.release-family {
  font-size:18px;
  letter-spacing:-.025em;
  font-weight:500;
  line-height:1.3;
}
.release-number {
  font-size:70px;
  line-height:1.05;
  font-weight:400;
  letter-spacing:-.065em;
  margin-left:-.065em;
  font-variant-numeric:lining-nums;
}
.product-media img.release-logo {
  width:120px;
  height:120px;
  filter:none;
  mix-blend-mode:normal;
}
.release-family-mark {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.release-family-mark .logo-version-label {
  font-size:13px;
  line-height:1.4;
  color:var(--color-secondary);
}
.product-media img.release-artwork {
  width:88%;
  height:238px;
  max-height:238px;
  mix-blend-mode:normal;
  border-radius:8px;
}
.product-media:has(.release-artwork) img {
  transform:translateY(-10px);
  max-height:220px;
}
.product-media:has(.release-artwork):has(.image-caption) img {
  max-height:195px;
  transform:translateY(-18px);
}
/* The entire rail accepts mouse drags; touch keeps its native scrolling. */
#year-rail {
  position:relative;
  max-height:min(360px,calc(var(--year-count,20) * 22px + 8px));
  overflow:visible;
  cursor:grab;
  user-select:none;
  touch-action:pan-y;
}
.year-tick {
  min-height:3px;
  cursor:grab;
  width:100%;
  padding-right:12px;
}
.year-tick:active,#year-rail.scrubbing,#year-rail.scrubbing .year-tick {
  cursor:grabbing;
}
#year-rail::after {
  content:'';
  position:absolute;
  top:var(--scrub-y,0px);
  left:12px;
  height:2px;
  width:43px;
  border-radius:2px;
  pointer-events:none;
  background:var(--color-text);
  opacity:0;
  transform:translateY(-1px);
}
#year-rail.scrubbing::after {
  opacity:1;
}
#year-rail.scrubbing .year-tick.active::before {
  opacity:.25;
}
#year-rail.scrubbing .year-tick.active span {
  opacity:1;
}
html.is-scrubbing {
  scroll-behavior:auto!important;
  cursor:grabbing;
}
html.is-scrubbing * {
  user-select:none!important;
  cursor:grabbing!important;
}
@media(min-width:1600px) {
  :root {
    --sidebar-left:56px;
  }
}
@media(max-width:1190px) {
  :root {
    --sidebar-left:24px;
  }
}
@media(max-width:900px) {
  :root {
    --sidebar-left:16px;
  }
}
@media(max-height:760px) and (min-width:701px) {
  .sidebar {
    top:130px;
    bottom:20px;
  }
  .year-nav {
    margin-top:26px;
  }
  .made-by {
    padding-top:14px;
  }
}
@media(max-width:700px) {
  .intro-mark,.sidebar-home {
    display:none;
  }
  .mobile-top {
    position:sticky;
    top:0;
    min-height:var(--mobile-header-height);
    height:var(--mobile-header-height);
    padding:10px 20px;
    background:color-mix(in srgb,var(--color-bg) 94%,transparent);
    backdrop-filter:blur(18px);
    z-index:40;
  }
  .mobile-home {
    margin-left:-10px;
  }
  .timeline-toolbar {
    top:var(--mobile-header-height);
  }
  .year-group {
    scroll-margin-top:calc(var(--mobile-header-height) + 92px);
  }
  .product-media img.release-artwork {
    height:190px;
    max-height:190px;
    width:88%;
  }
  .product-media:has(.release-artwork) img {
    max-height:175px;
  }
  .product-media:has(.release-artwork):has(.image-caption) img {
    max-height:155px;
  }
  .release-panel {
    width:132px;
    height:132px;
    padding:10px;
    gap:6px;
  }
  .release-family {
    font-size:17px;
  }
  .release-number {
    font-size:64px;
  }
  .product-media img.release-logo {
    width:112px;
    height:112px;
  }
}
@media(max-width:374px) {
  .mobile-top {
    padding-left:16px;
    padding-right:16px;
  }
}
@media(prefers-reduced-motion:reduce) {
  .nav-icon,.nav-icon .glyph-detail,.timeline-mark i {
    animation:none!important;
    transform:none!important;
    transition:none!important;
  }
}
.coverage-note {
  font-size:12px;
  line-height:1.6;
  color:var(--color-secondary);
  margin:-10px 0 18px;
  overflow-wrap:anywhere;
}
.product-card {
  scroll-margin-top:100px;
}
.sort-short {
  display:none;
}
.category-button {
  min-height:44px;
}
.source-link {
  min-height:32px;
}
.source-link,.credit-line {
  overflow-wrap:anywhere;
}
.loading-state {
  text-align:center;
  padding:80px 20px;
  color:var(--color-secondary);
}
button:disabled,select:disabled {
  opacity:.6;
  cursor:wait;
}
.year-group,.product-card,#timeline {
  scroll-margin-top:var(--timeline-offset,103px);
}
@media(max-width:400px) {
  .sort-label {
    display:none;
  }
  .sort-short {
    display:inline;
  }
  .sort-button span {
    max-width:none;
    white-space:nowrap;
  }
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .product-card:hover .product-media img {
    transform:scale(1.035);
  }
  .product-card:hover .product-media img.release-artwork {
    transform:translateY(-10px) scale(1.025);
  }
  .product-card:hover .product-media:has(.release-artwork):has(.image-caption) img {
    transform:translateY(-18px) scale(1.025);
  }
  .back-to-top:hover {
    transform:translateY(-2px);
  }
}