@font-face {
  font-family: Mulish;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./media/mulish-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Mulish;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./media/mulish-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --paper: #f1f6fa;
  --ink: #0d2240;
  --muted: #435d78;
  --line: #cedce9;
  --action: #235e9f;
  --night: #142f51;
  font-family: Mulish, system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
::selection { color: var(--ink); background: #c4e3ff; }

body {
  margin: 0;
  background: radial-gradient(ellipse 65rem 32rem at 38% 12rem, #fbfdff, transparent);
}

h1, h2, p, dd { margin: 0; }
a { color: inherit; }
button, select { font: inherit; }
[id] { scroll-margin-top: 1.25rem; }

:focus-visible {
  outline: 2px solid #2869ba;
  outline-offset: 4px;
}

.shell { width: min(100% - 6rem, 76rem); margin-inline: auto; }

.site-header, .site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-header { min-height: 4.9rem; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .52rem; font-size: 1.14rem; font-weight: 760; text-decoration: none; }
.brand img { flex: none; }
.site-header nav { display: flex; gap: clamp(.9rem, 4vw, 2rem); }
.site-header nav a, .site-footer > a:last-child {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  font-size: .89rem;
  font-weight: 600;
  text-decoration: none;
}
.site-header nav a:hover, .site-footer > a:last-child:hover { color: var(--action); text-decoration: underline; text-underline-offset: .23em; }
.site-header .nav-buy { color: var(--ink); font-weight: 780; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  align-items: start;
  gap: clamp(1.9rem, 4vw, 3.8rem);
  padding-block: clamp(2.6rem, 6vw, 5.8rem) clamp(2.25rem, 5vw, 4.25rem);
}

.hero-intro { padding-top: clamp(1.9rem, 5.6vw, 4.45rem); }

h1 {
  max-width: 11ch;
  font-size: clamp(3rem, 5.25vw, 4.8rem);
  font-weight: 800;
  line-height: 1.015;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.hero-copy {
  max-width: 37ch;
  margin: 1.12rem 0 1.65rem;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.19rem);
  line-height: 1.58;
  text-wrap: pretty;
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1.05rem; }

.primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .29em;
  min-height: 3.25rem;
  padding: .72rem 1.15rem;
  border: 1px solid transparent;
  border-radius: .6rem;
  color: white;
  background: var(--night);
  font-weight: 760;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.primary:not(:disabled):hover { background: var(--action); }
button.primary { cursor: pointer; }
button.primary:disabled { cursor: wait; opacity: .7; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  color: var(--action);
  background: transparent;
  font-weight: 730;
  text-decoration: none;
}
.text-link:hover { text-decoration: underline; text-underline-offset: .22em; }
.requirements { margin-top: .72rem; color: var(--muted); font-size: .84rem; line-height: 1.6; }

.demo-heading { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-height: 44px; margin-bottom: .58rem; }
.demo-heading h2 { font-size: clamp(1rem, 1.8vw, 1.19rem); font-weight: 760; letter-spacing: -.018em; }
.demo-actions { display: flex; align-items: center; gap: .24rem; }
.icon-button {
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: .64rem;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}
.icon-button:hover { color: var(--ink); background: #e2edf7; border-color: #d4e2ee; }
.icon-button svg { width: 1.34rem; height: 1.34rem; }
.play-icon, .is-paused .pause-icon { display: none; }
.is-paused .play-icon { display: block; }

.desktop {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1.68;
  min-height: 260px;
  border-radius: .95rem;
  background: #162e52 url("./media/winter.webp") center 48% / cover no-repeat;
  box-shadow: 0 1rem 2.5rem #112b4b2a;
  user-select: none;
  touch-action: pan-y;
}

.menubar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 2vw, 1.15rem);
  height: clamp(22px, 3.1vw, 34px);
  padding-inline: clamp(.7rem, 2vw, 1.42rem);
  background: #101f3bdc;
  color: #eff7ff;
  font-size: clamp(.56rem, 1.5vw, .76rem);
  pointer-events: none;
}

.menubar span:first-child { font-weight: 760; }
.menu-snow { width: 1.05rem; height: 1.05rem; margin-left: auto; }
.finder {
  position: absolute;
  inset: 24% auto auto 26%;
  width: 48%;
  min-width: 192px;
  overflow: hidden;
  border-radius: .68rem;
  background: #e8f0fd;
  color: #172944;
  box-shadow: 0 1rem 2rem #0008;
}

.titlebar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  min-height: clamp(31px, 4.1vw, 47px);
  padding-inline: clamp(.47rem, 1.5vw, .9rem);
  border: 0;
  background: #f5f8fe;
  color: var(--ink);
  font-size: clamp(.67rem, 1.6vw, .86rem);
  font-weight: 680;
  cursor: grab;
  touch-action: none;
}

.titlebar:disabled { cursor: default; }
.titlebar:focus-visible { outline-offset: -3px; }
.titlebar:active { cursor: grabbing; }
.traffic { display: flex; gap: clamp(3px, .7vw, 7px); }
.traffic i { width: clamp(6px, 1vw, 11px); aspect-ratio: 1; border-radius: 50%; background: #f4817b; }
.traffic i:nth-child(2) { background: #efbd65; }
.traffic i:nth-child(3) { background: #73c58a; }
.grip { width: 15px; height: 8px; justify-self: end; border-block: 1px solid #8293ab; }
.finder-body { display: grid; grid-template-columns: 28% 1fr; min-height: clamp(90px, 14vw, 159px); }
.finder-sidebar {
  display: grid;
  align-content: start;
  gap: .48em;
  padding: .9em .6em;
  border-top: 1px solid #d6e2f2;
  color: #344e6e;
  font-size: clamp(.48rem, 1.32vw, .73rem);
}
.finder-sidebar span { padding: .27em .5em; }
.finder-sidebar span:first-child { font-weight: 700; }
.finder-sidebar .selected { border-radius: .25em; background: #d1e4fa; font-weight: 680; }
.finder-files {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: clamp(.25rem, 1.4vw, .8rem);
  padding: clamp(.6rem, 2vw, 1.28rem);
  background: #fbfdff;
  border-top: 1px solid #e0e9f5;
  font-size: clamp(.49rem, 1.4vw, .73rem);
  text-align: center;
}
.thumbnail {
  display: block;
  width: 100%;
  aspect-ratio: 1.28;
  margin-bottom: .45em;
  border-radius: .25rem;
  background-image: url("./media/winter.webp");
  background-size: 245%;
}
.mountain { background-position: 100% 40%; }
.forest { background-position: 0 100%; }
.moon { background-position: 82% 10%; }

.dock {
  position: absolute;
  inset: auto auto 5% 50%;
  display: flex;
  align-items: center;
  gap: clamp(4px, .8vw, 9px);
  padding: clamp(4px, .58vw, 7px);
  border: 1px solid #c3d8f88c;
  border-radius: clamp(.48rem, 2vw, .94rem);
  background: #c5d9fa69;
  backdrop-filter: blur(11px);
  transform: translateX(-50%);
  pointer-events: none;
}

.dock-app { flex: none; position: relative; width: clamp(19px, 3.55vw, 39px); height: auto; aspect-ratio: 1; border-radius: 24%; }
.dock-finder { background: linear-gradient(90deg, #55affe 50%, #d9edff 50%); }
.dock-finder::before { position: absolute; inset: 29% auto auto 30%; width: 8%; height: 14%; background: #143885; box-shadow: .38em 0 #143885; content: ""; }
.dock-finder::after { position: absolute; inset: auto 23% 24%; height: 31%; border-bottom: 1.5px solid #143885; border-radius: 50%; content: ""; }
.dock-browser { background: radial-gradient(circle, #4aa9fb 48%, #f3faff 51%); }
.dock-browser::after { position: absolute; inset: 20% 44%; border-radius: 60%; background: linear-gradient(#f87179 50%, white 50%); transform: rotate(34deg); content: ""; }
.dock-photos { background: radial-gradient(circle, #fff 18%, transparent 19%), conic-gradient(#f49981, #ffdb82, #badf89, #8acdfa, #b4a1e3, #f49981); }
.dock-music { background: linear-gradient(#f36e95, #ce4073); }
.dock-music::after {
  position: absolute;
  inset: 23% 20% 20% 27%;
  background:
    linear-gradient(white, white) 56% 5% / 65% 17% no-repeat,
    linear-gradient(white, white) 40% 9% / 13% 76% no-repeat,
    linear-gradient(white, white) 90% 8% / 13% 67% no-repeat,
    radial-gradient(ellipse, white 61%, transparent 65%) 8% 100% / 48% 35% no-repeat,
    radial-gradient(ellipse, white 61%, transparent 65%) 95% 81% / 48% 35% no-repeat;
  transform: rotate(-9deg);
  content: "";
}
.dock-divider { width: 1px; align-self: stretch; background: #e1edff99; }
#snow { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.snowman-target { position: absolute; z-index: 2; padding: 0; border: 0; border-radius: 40%; background: transparent; cursor: pointer; touch-action: manipulation; }
.snowman-target:focus-visible { outline-color: #f4fbff; }


.demo-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .85rem; }
.demo-control {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  gap: .4rem;
  padding: .35rem .65rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: #f5f9fd;
  color: var(--ink);
  font-size: .84rem;
  font-weight: 720;
  cursor: pointer;
}
.demo-control:hover { background: #e2edf8; border-color: #acc6df; }
.demo-control svg { width: 1.05rem; height: 1.05rem; }
.make-button { color: #173f6f; background: #e5f0fc; border-color: #c6dbef; }
.intensity-control { padding: 0; }
.intensity-control select { min-height: 42px; padding: .35rem .45rem; border: 0; border-radius: inherit; color: inherit; background: transparent; cursor: pointer; }
.demo-help, .demo-status { margin-top: .65rem; color: var(--muted); font-size: .86rem; line-height: 1.5; text-wrap: pretty; }
.demo-status { min-height: 1.3em; margin-top: .18rem; color: var(--ink); }

.features { padding-block: clamp(1.8rem, 5vw, 3.2rem) clamp(2.4rem, 7vw, 5.2rem); border-top: 1px solid var(--line); }
.features h2, .purchase h2, .install h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.75rem);
  line-height: 1.13;
  letter-spacing: -.036em;
  text-wrap: balance;
}
.feature-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem clamp(1rem, 5vw, 4rem); margin: 1.55rem 0 0; }
.feature-list div { padding-top: .8rem; border-top: 1px solid var(--line); }
.feature-list dt { margin-bottom: .3rem; font-size: 1.06rem; font-weight: 800; }
.feature-list dd, .purchase-copy { color: var(--muted); font-size: .95rem; line-height: 1.6; text-wrap: pretty; }

.purchase {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: 1.35rem clamp(2rem, 8vw, 7rem);
  align-items: center;
  padding: clamp(1.45rem, 4.3vw, 3.6rem);
  border-radius: .95rem;
  color: #f3f8ff;
  background: var(--night);
}
.purchase h2 { max-width: 20ch; }
.purchase-copy { max-width: 42ch; margin-top: .75rem; color: #cbdcf0; }
.purchase .text-link { color: #e0eeff; cursor: pointer; }
.purchase :focus-visible { outline-color: #b5dbff; }
.price { font-size: clamp(2.25rem, 5vw, 3.8rem); line-height: 1; letter-spacing: -.036em; font-weight: 800; font-variant-numeric: tabular-nums; }
.order { display: grid; max-width: 25rem; justify-items: start; gap: .65rem; }
.order-button { margin-top: .15rem; color: var(--night); background: #f4f9ff; }
.order-button:not(:disabled):hover { background: #dcecff; }
.order-status { color: #d9e8f9; font-size: .9rem; line-height: 1.53; }

.install {
  display: grid;
  grid-template-columns: minmax(0, .73fr) minmax(0, 1fr);
  gap: clamp(1.3rem, 6vw, 5.1rem);
  margin-top: clamp(2.6rem, 7vw, 5.5rem);
  padding-bottom: clamp(2rem, 5.5vw, 3.7rem);
}
.install-copy { max-width: 36ch; margin-top: .8rem; color: var(--muted); line-height: 1.65; }
.steps { list-style: none; counter-reset: steps; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: .66rem; counter-increment: steps; }
.steps li + li { margin-top: 1.2rem; }
.steps li::before { content: counter(steps); display: grid; place-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #dceaf8; color: var(--action); font-size: .8rem; font-weight: 720; }
.steps strong { display: block; padding-top: .16rem; font-weight: 690; }
.steps p, .install-help p { margin-top: .35rem; color: var(--muted); font-size: .91rem; line-height: 1.64; }
.install-help { margin-top: .85rem; padding-block: .38rem; border-top: 1px solid var(--line); }
.install-help summary { display: list-item; padding-block: .55rem; font-weight: 740; cursor: pointer; }
.install-help p a { color: var(--action); text-underline-offset: .19em; }
.site-footer { min-height: 4.4rem; border-top: 1px solid var(--line); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 57rem) {
  .shell { width: calc(100% - 3rem); }
  .hero { grid-template-columns: 1fr; gap: 1.8rem; }
  .hero-intro { padding-top: 0; }
  h1 { max-width: 14ch; font-size: clamp(3rem, 8vw, 4.65rem); }
  .desktop { aspect-ratio: 1.78; }
}

@media (max-width: 40rem) {
  .shell { width: calc(100% - 2rem); }
  .site-header { min-height: 4.25rem; }
  .site-header nav { gap: .75rem; }
  .site-header nav a { font-size: .8rem; }
  .site-header .brand img { width: 32px; height: 32px; }
  .site-header .brand { gap: .34rem; font-size: 1.02rem; }
  .site-header nav a:first-child { display: none; }
  h1 { max-width: 12ch; font-size: clamp(2.6rem, 10.4vw, 3.6rem); }
  .hero-actions { gap: .25rem .65rem; }
  .hero-actions .primary { padding-inline: .95rem; }
  .hero-actions .text-link { font-size: .9rem; }
  .desktop { aspect-ratio: 1.36; min-height: 220px; border-radius: .8rem; }
  .finder { left: max(8%, calc(50% - 112px)); width: 58%; }
  .install, .features .feature-list, .purchase { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .primary { transition: none; }
}