@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-display: swap;
}
:root {
  color-scheme: dark;
  --ink: #f4f3ed;
  --muted: #c5d1c8;
  --leaf: #b6e85d;
  --background: #15251f;
  --surface: #1c3028;
  --action: #ff7055;
  --line: #40544a;
  --display: "Instrument Serif", Georgia, serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--background) radial-gradient(ellipse at 78% 0, var(--surface), transparent 44rem);
  color: var(--ink);
  font: 1rem/1.55 system-ui, sans-serif;
}
a { color: inherit; }
a:hover { color: var(--leaf); }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--leaf); outline-offset: 5px; }
.wrap { width: min(100% - 2.5rem, 76rem); margin-inline: auto; }
.masthead, footer { display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; }
.masthead { justify-content: space-between; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: .7rem; font: 2rem/1 var(--display); text-decoration: none; }
.brand img { border-radius: 9px; }
.hero { display: grid; grid-template-columns: 4fr 6fr; align-items: center; gap: 2.5rem; padding-block: clamp(3rem, 8vw, 7rem); }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; line-height: 1; }
h1 { font-size: clamp(3.6rem, 6.8vw, 7rem); max-width: 9ch; }
h2 { font-size: clamp(2.5rem, 5vw, 4.4rem); max-width: 22ch; }
h3 { font-size: 2rem; }
p { color: var(--muted); margin: .8rem 0 0; }
.hero p { max-width: 36ch; font-size: 1.12rem; }
.stores { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.stores a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: .6rem .9rem;
  border: 1px solid var(--action);
  background: var(--action);
  border-radius: .5rem;
  color: var(--background);
  font-weight: 650;
  text-decoration: none;
}
.stores a:hover { background: var(--ink); border-color: var(--ink); }
small { display: block; margin-top: .8rem; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.45rem, 1.4vw, 1.1rem); }
figure { margin: 0; }
figure:nth-child(2) { margin-top: -1.4rem; }
figure img { display: block; width: 100%; height: auto; border-radius: .5rem; box-shadow: 0 8px 20px #080604a0; }
figcaption { margin-top: .5rem; text-align: center; font-size: .85rem; }
.showcase p { max-width: none; text-align: center; font-size: .8rem; }
.guide, .faq, .download { border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 6vw, 5rem); }
.guide ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; padding-left: 1.5rem; margin: 2rem 0 0; }
.guide li::marker { color: var(--leaf); }
.library { padding: clamp(1.75rem, 5vw, 4rem); background: #1c3028; border-radius: .5rem; }
.library p { max-width: 54ch; }
.faq { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem; margin-top: clamp(2.5rem, 6vw, 5rem); }
details { border-bottom: 1px solid var(--line); padding: .8rem 0; }
summary { cursor: pointer; min-height: 24px; }
footer { border-top: 1px solid var(--line); color: var(--muted); padding-block: 1.5rem; font-size: .9rem; }
@media (max-width: 55rem) {
  .hero, .faq { grid-template-columns: 1fr; }
  .hero { gap: 3.5rem; }
  .showcase { max-width: 40rem; }
}
@media (max-width: 40rem) {
  .guide ol { grid-template-columns: 1fr; }
}

.showcase { position: relative; isolation: isolate; width: min(100%, 32rem); margin-inline: auto; }
.showcase::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -14% -2% 0;
  background: radial-gradient(ellipse at 50% 42%, #81a44030, transparent 66%);
  pointer-events: none;
}
.cards { padding-block: 1rem; }
.look-picker:not([hidden]) { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }
.look-picker button {
  padding: .45rem .75rem;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #1c3028;
  color: var(--ink);
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
}
.look-picker button[aria-pressed="true"] { background: var(--leaf); color: #15251f; border-color: var(--leaf); }
.look-picker button:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; }
.showcase.is-interactive figure { margin-top: 0; position: relative; transform-origin: center 42%; }
.showcase.is-interactive figcaption { visibility: hidden; margin: 0; height: 0; }
.showcase.is-interactive figure:first-child { --lean: -6deg; --drift: 28%; }
.showcase.is-interactive figure:nth-child(2) { --lean: 0deg; --drift: 0%; }
.showcase.is-interactive figure:last-child { --lean: 6deg; --drift: -28%; }
.showcase.is-interactive figure { transform: translateX(var(--drift)) rotate(var(--lean)) scale(.88); filter: brightness(.73); }
.showcase.is-interactive figure.is-selected {
  z-index: 1;
  filter: brightness(1);
  transform: translateY(-5%) scale(1.12);
}
.showcase.is-interactive figure.is-selected img { box-shadow: 0 18px 42px #080604b0, 0 0 0 1px #b6e85d72; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero > div:first-child { animation: house-lights .75s ease-out both; }
  .showcase { animation: house-lights .9s .12s ease-out both; }
  .showcase.is-interactive figure { transition: transform .58s cubic-bezier(.22,.85,.28,1.1), filter .45s; }
  .stores a, .look-picker button { transition: background-color .2s, color .2s, border-color .2s; }
  .reveal-pending { opacity: .5; transform: translateY(18px); }
  .reveal-visible { animation: house-lights .65s ease-out both; }
  @keyframes house-lights {
    from { opacity: .5; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

.walkthrough-link { display: inline-block; margin-top: 1rem; text-underline-offset: .2em; }
.walkthrough {
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 6vw, 5rem);
}
.walkthrough > p { max-width: 60ch; }
.platforms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.platform { padding: clamp(.75rem, 2vw, 1.4rem); background: var(--surface); border: 1px solid var(--line); border-radius: .75rem; }
.platform h3 { color: var(--leaf); }
.screens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 8rem));
  align-items: start;
  gap: clamp(.45rem, 1vw, .9rem);
  margin-top: .8rem;
}
.screens figure:nth-child(2) { margin-top: 0; }
.screens button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: .5rem;
  background: none;
}
.screens button:enabled { cursor: zoom-in; }
.screens button:hover:enabled img { border-color: var(--leaf); }
.screens img { border: 1px solid var(--line); max-height: 17rem; object-fit: contain; }
.screens figcaption { text-align: left; line-height: 1.3; }
@media (max-width: 45rem) {
  .platforms { grid-template-columns: 1fr; }
  .screens { grid-template-columns: repeat(3, minmax(0, 6.4rem)); }
}

@media (max-width: 40rem) {
  .hero { gap: 2rem; padding-block: 2.5rem; }
  h1 { font-size: clamp(3.1rem, 12vw, 4.2rem); max-width: 12ch; }
}

.viewer {
  width: min(31rem, calc(100% - 1.25rem));
  max-height: calc(100dvh - 1.25rem);
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: .9rem;
  background: var(--surface);
  color: var(--ink);
}
.viewer::backdrop { background: #08130ee6; }
.viewer header, .viewer nav { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.viewer h2 { font-size: clamp(1.4rem, 4.5vw, 1.9rem); }
.viewer img { display: block; width: 100%; height: min(68dvh, 40rem); object-fit: contain; margin-block: .75rem; }
.viewer button {
  min-height: 44px;
  padding-inline: .7rem;
  border: 1px solid var(--line);
  border-radius: .45rem;
  background: var(--background);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.viewer button:hover { border-color: var(--leaf); }
.viewer nav span { font-size: .85rem; color: var(--muted); }

.skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 5; padding: .65rem; background: var(--ink); color: var(--background); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.masthead nav { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; font-size: .9rem; }
.masthead nav a { text-underline-offset: .25em; }
.edition, .hero .edition { margin: 0 0 .75rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--leaf); font-weight: 650; }
.walkthrough, .guide, .faq { scroll-margin-top: 1rem; }
.platform { background: linear-gradient(145deg, #223b31, var(--surface) 65%); }
.guide ol { list-style: none; counter-reset: screening; padding: 0; }
.guide li { counter-increment: screening; border-top: 1px solid var(--line); padding: 1rem 0 0; }
.guide li::before { content: "0" counter(screening); display: block; margin-bottom: .65rem; color: var(--leaf); font-size: .8rem; }
.library { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: clamp(1.25rem, 4vw, 3rem); background: var(--ink); color: var(--background); }
.library p { color: #2d493d; }
.library .edition { color: #36574a; }
.library .device-note { border-top: 1px solid #bcc6be; padding-top: .85rem; margin-top: 1rem; }
.library figure img { box-shadow: 0 8px 20px #08130e44; }
.faq details[open] { padding-bottom: 1rem; }
.faq summary { color: var(--ink); padding: .2rem 0; }
.download { background: var(--surface); border: 1px solid var(--line); border-radius: .75rem; padding-inline: clamp(1.25rem, 5vw, 4rem); margin-bottom: 2rem; }
.policy .wrap { max-width: 46rem; padding-block: 2rem 4rem; }
.policy header { padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.policy .brand { display: inline-flex; margin-bottom: 1.75rem; }
.policy h1 { max-width: none; }
.policy h2 { font-size: 2rem; margin-top: 1.65rem; }
.policy a:not(.brand) { color: var(--leaf); }
.policy .tldr { margin-top: 1rem; padding: 1rem; border-radius: .6rem; background: var(--surface); }
.policy footer { display: block; margin-top: 2rem; }
@media (max-width: 45rem) {
  .library { grid-template-columns: 1fr; }
}