/*
  Pantograph Layout site.
  The page is built with the technique it describes: pantograph.css sets the
  font-size of html, and every size below is the px value from the mockups
  (375 / 768 / 1440) written in rem. Mobile first; layout changes only at
  500px and 1152px, the same borders as in pantograph.css.
*/

:root {
  --black: #000000;
  --white: #ffffff;
  --violet: #8377F1;
  --violet-hover: #9286FF;
  --violet-light: #B0ACF8;
  --lavender: #D1D5ED;
  --grey: #E6E6E6;
  --text-2: #3d3d3d;
  --line: #262626;
  --line-2: #3a3a3a;
  --mid: #5c5c5c;
  --font: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  font-size: 16rem;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
a { color: inherit; }
a:hover { color: var(--violet); }
button { font: inherit; color: inherit; cursor: pointer; }
svg { display: block; }
:focus-visible { outline: 2rem solid var(--violet); outline-offset: 2rem; }
[hidden] { display: none !important; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip:focus {
  left: 16rem;
  top: 16rem;
  z-index: 100;
  padding: 10rem 14rem;
  border-radius: 8rem;
  background: var(--white);
  color: var(--black);
}

.wrap {
  width: 100%;
  max-width: 1440rem;
  margin: 0 auto;
  padding-left: 20rem;
  padding-right: 20rem;
}

/* ---------------------------------------------------------------- header */

.header {
  position: relative;
  z-index: 30;
  background: var(--black);
  color: var(--white);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  height: 56rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10rem;
  color: var(--white);
  text-decoration: none;
  font-size: 17rem;
  font-weight: 700;
}
.brand:hover { color: var(--white); }
.i-logo { width: 24rem; height: 24rem; flex-shrink: 0; }
.nav { display: none; }

.lang { position: relative; }
.lang__btn {
  height: 44rem;
  padding: 0 10rem 0 12rem;
  border: 1.5rem solid var(--mid);
  border-radius: 10rem;
  background: transparent;
  color: var(--white);
  font-size: 15rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6rem;
}
.lang__btn:hover { border-color: var(--white); }
.i-globe { width: 16rem; height: 16rem; }
.i-chev { width: 12rem; height: 12rem; }
.lang__menu {
  position: absolute;
  right: 0;
  top: 52rem;
  width: 200rem;
  margin: 0;
  padding: 6rem;
  list-style: none;
  background: var(--white);
  color: var(--black);
  border-radius: 12rem;
  box-shadow: 0 12rem 32rem rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.lang__menu a {
  height: 44rem;
  padding: 0 12rem;
  border-radius: 8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--black);
  text-decoration: none;
  font-size: 16rem;
}
.lang__menu a:hover { background: var(--grey); color: var(--black); }
.lang__menu a[aria-current="true"] { background: var(--lavender); }
.lang__menu small { font-size: 14rem; color: var(--text-2); }

/* ---------------------------------------------------------------- hero */

.hero { background: var(--black); color: var(--white); }
.hero__inner {
  padding-top: 20rem;
  padding-bottom: 24rem;
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
.hero__head { display: flex; flex-direction: column; gap: 16rem; }
.hero__kicker { display: none; color: var(--lavender); font-weight: 500; }
.hero__title {
  font-size: 34rem;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.hero__title span { display: block; }
.accent { color: var(--violet); }
.hero__row { display: flex; flex-direction: column; gap: 16rem; }
.hero__lead { font-size: 15rem; line-height: 1.45; }
.hero__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12rem;
}
.hero__hint { font-size: 13rem; line-height: 1.35; color: var(--lavender); }

.btn-play {
  height: 44rem;
  padding: 0 14rem;
  border: 1.5rem solid var(--white);
  border-radius: 10rem;
  background: transparent;
  color: var(--white);
  font-size: 15rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8rem;
  flex-shrink: 0;
}
.btn-play svg { width: 14rem; height: 14rem; }
.btn-play .i-play { display: none; }
.btn-play[data-state="paused"] .i-play { display: block; }
.btn-play[data-state="paused"] .i-pause { display: none; }

/* demo: preview frame, graph and scrubber; positions come from app.js in rem */
.demo { position: relative; display: flex; flex-direction: column; gap: 16rem; }
.demo__stage { position: relative; width: 100%; height: 194rem; }
.demo__frame {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  background: var(--mid);
  border-radius: 8rem 8rem 0 0;
  overflow: hidden;
}
.demo__screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.demo__graph { position: absolute; left: 0; top: 0; }
.demo__svg { position: absolute; left: 0; top: 0; overflow: visible; }

.g-grid { stroke: var(--line); stroke-width: 1; fill: none; }
.g-borders { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 4; fill: none; }
.g-one { stroke: var(--mid); stroke-width: 1; stroke-dasharray: 4 4; fill: none; }
.g-full { stroke: var(--white); stroke-opacity: 0.18; stroke-width: 2.5; fill: none; stroke-linecap: round; }
.g-trail { stroke: var(--violet); stroke-width: 3; fill: none; stroke-linecap: round; }
.g-dots { fill: var(--white); }
.g-marker { fill: var(--black); stroke: var(--violet); stroke-width: 3; }

.gl {
  position: absolute;
  font-size: 11rem;
  line-height: 1.2;
  color: var(--lavender);
  white-space: nowrap;
}
.gl--mock { color: var(--white); font-weight: 700; }
.gl--y { transform: translateY(-50%); }
.gl--seg { top: 0; transform: translateX(-50%); }

.demo__marker {
  position: absolute;
  width: 2rem;
  margin-left: -1rem;
  background: var(--violet);
  pointer-events: none;
}
.band { position: absolute; height: 6rem; border-radius: 3rem; }

.scrub {
  position: absolute;
  height: 44rem;
  margin: 0;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.scrub::-webkit-slider-runnable-track { height: 44rem; background: transparent; }
.scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22rem;
  height: 22rem;
  margin-top: 11rem;
  border-radius: 50%;
  background: var(--violet);
  border: 3rem solid var(--black);
  box-shadow: 0 0 0 2rem var(--violet);
}
.scrub::-moz-range-track { height: 44rem; background: transparent; }
.scrub::-moz-range-thumb {
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  background: var(--violet);
  border: 3rem solid var(--black);
  box-shadow: 0 0 0 2rem var(--violet);
}
.scrub:focus-visible { outline: 2rem solid var(--white); outline-offset: 2rem; border-radius: 8rem; }

.legend {
  display: flex;
  gap: 14rem;
  margin: -6rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 12rem;
  color: var(--lavender);
}
.legend li { display: flex; align-items: center; gap: 6rem; }
.sw { display: block; width: 10rem; height: 10rem; border-radius: 3rem; }
.sw--m { background: var(--violet); }
.sw--t { background: var(--lavender); }
.sw--d { background: var(--white); }

.readouts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14rem 16rem;
  padding-top: 14rem;
  border-top: 1px solid var(--line);
}
.ro { display: flex; flex-direction: column; gap: 2rem; min-width: 0; }
.ro__label { font-size: 12rem; color: var(--lavender); }
.ro__value { font-size: 26rem; font-weight: 700; line-height: 1.1; }
.ro--bp .ro__value { font-size: 16rem; line-height: 1.3; }
.ro--rem .ro__value { color: var(--violet); }
.ro--px .ro__value {
  display: flex;
  align-items: baseline;
  gap: 8rem;
  height: 38rem;
  font-size: 15rem;
  font-weight: 500;
}
.aa { font-weight: 700; line-height: 1; }
.desk { display: none; }

/* ---------------------------------------------------------------- sections */

.sec { padding: 64rem 0; }
.sec--white { background: var(--white); }
.sec--lavender { background: var(--lavender); }
.sec--black { background: var(--black); color: var(--white); }
.sec__inner { display: flex; flex-direction: column; gap: 28rem; }
.sec__head { display: flex; flex-direction: column; gap: 12rem; }

.kicker {
  display: flex;
  align-items: center;
  gap: 10rem;
  font-size: 14rem;
  font-weight: 500;
}
.kicker i { display: block; width: 8rem; height: 8rem; border-radius: 50%; background: var(--violet); }
.kicker--dark i { background: var(--black); }
.sec--black .kicker { color: var(--lavender); }

.h2 { font-size: 30rem; line-height: 1.1; letter-spacing: -0.01em; font-weight: 700; }
.h3 { font-size: 24rem; line-height: 1.15; font-weight: 700; }
.lead { font-size: 16rem; line-height: 1.45; }
.p { font-size: 16rem; line-height: 1.5; }
.note { font-size: 15rem; line-height: 1.5; }

.num {
  width: 40rem;
  height: 40rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18rem;
  font-weight: 700;
}
.num--s { width: 36rem; height: 36rem; font-size: 16rem; }

.code {
  margin: 0;
  min-width: 0;
  background: var(--black);
  color: var(--white);
  border-radius: 14rem;
  padding: 16rem 18rem;
  font-family: var(--mono);
  font-size: 12rem;
  line-height: 19rem;
  white-space: pre;
  overflow-x: auto;
  tab-size: 2;
}
.code code { font: inherit; }
.code--sm { border-radius: 12rem; padding: 14rem 16rem; }
.c-prop { color: var(--violet-light); }
.c-com { color: #A3A3A3; }
.c-h { color: var(--white); font-weight: 500; }

/* ---------------------------------------------------------------- 01 the idea */

.cmp__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4rem;
  padding: 4rem;
  background: var(--grey);
  border-radius: 12rem;
}
.cmp__tab {
  height: 44rem;
  padding: 0 4rem;
  border: 0;
  border-radius: 9rem;
  background: transparent;
  color: var(--black);
  font-size: 13rem;
  font-weight: 500;
  line-height: 1.1;
}
.cmp__tab[aria-pressed="true"] { background: var(--white); }

.cmp__items { display: flex; flex-direction: column; align-items: center; }
.cmp__item { display: none; width: 100%; flex-direction: column; align-items: center; gap: 12rem; }
.cmp__items[data-active="0"] .cmp__item:nth-child(1),
.cmp__items[data-active="1"] .cmp__item:nth-child(2),
.cmp__items[data-active="2"] .cmp__item:nth-child(3) { display: flex; }
.cmp__w { font-size: 14rem; font-weight: 500; }
.cmp__frame {
  position: relative;
  width: 331rem;
  height: 460rem;
  overflow: hidden;
  background: var(--white);
  border-radius: 16rem;
  box-shadow: 0 0 0 2rem var(--black);
}
.cmp__item:nth-child(1) .cmp__frame { width: 259rem; }
.cmp__frame--accent { box-shadow: 0 0 0 3rem var(--violet); }
.cmp__mini { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.cmp__cap { align-self: stretch; display: flex; flex-direction: column; gap: 6rem; margin-top: 16rem; }
.cmp__t { font-size: 20rem; font-weight: 700; }
.cmp__x { font-size: 16rem; line-height: 1.45; }

.cmp__sum { display: flex; flex-direction: column; gap: 12rem; margin-top: 8rem; }
.card { border-radius: 16rem; padding: 20rem; display: flex; flex-direction: column; gap: 8rem; }
.card--grey { background: var(--grey); }
.card--violet { background: var(--violet); }
.card__t { font-size: 20rem; font-weight: 700; }
.card__x { font-size: 16rem; line-height: 1.5; }

/* ---------------------------------------------------------------- 02 algorithm */

.algo { gap: 48rem; }

.s1 { display: flex; flex-direction: column; gap: 16rem; }
.s1__text { display: flex; flex-direction: column; gap: 16rem; }

.tbl { background: var(--white); border-radius: 14rem; padding: 4rem 14rem; }
.tbl__row {
  display: grid;
  grid-template-columns: 1.2fr 0.7fr 1.5fr;
  gap: 8rem;
  padding: 12rem 0;
  border-bottom: 1px solid var(--grey);
  font-size: 14rem;
}
.tbl__row:last-child { border-bottom: 0; }
.tbl__head { padding: 10rem 0; border-bottom-color: var(--black); font-size: 13rem; font-weight: 500; }

.s2 { display: flex; flex-direction: column; gap: 20rem; }
.s2__head { display: flex; flex-direction: column; gap: 16rem; }
.chunk { display: flex; flex-direction: column; gap: 10rem; }
.chunk__text { display: flex; flex-direction: column; gap: 10rem; }
.chunk__t { font-size: 18rem; font-weight: 700; }
.chunk__x { font-size: 15rem; line-height: 1.5; }
.chunk__e { font-family: var(--mono); font-size: 13rem; line-height: 1.6; }

.s3 {
  background: var(--violet);
  border-radius: 18rem;
  padding: 22rem 20rem;
  display: flex;
  flex-direction: column;
  gap: 18rem;
}
.s3__head { display: flex; align-items: center; gap: 12rem; }
.s3__t { font-size: 18rem; font-weight: 700; }
.deriv {
  margin: 0;
  font-family: var(--mono);
  font-size: 12rem;
  line-height: 20rem;
  white-space: pre;
  overflow-x: auto;
}
.deriv--long { display: none; }
.s3__big { font-size: 30rem; line-height: 1.1; letter-spacing: -0.01em; font-weight: 700; }
.s3__x { font-size: 16rem; line-height: 1.45; }
.chips { display: flex; flex-wrap: wrap; gap: 8rem; margin: 0; padding: 0; list-style: none; }
.chips li {
  background: var(--black);
  color: var(--white);
  border-radius: 10rem;
  padding: 10rem 12rem;
  font-size: 15rem;
}

.live {
  background: var(--white);
  border-radius: 18rem;
  padding: 22rem 20rem;
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
.live__side { display: flex; flex-direction: column; gap: 16rem; }
.live__p { font-size: 15rem; line-height: 1.5; }
.presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6rem; }
.presets button {
  height: 44rem;
  padding: 0;
  border: 1.5rem solid var(--black);
  border-radius: 10rem;
  background: transparent;
  color: var(--black);
  font-size: 14rem;
  font-weight: 500;
}
.presets button[aria-pressed="true"] { background: var(--black); color: var(--white); }
.live__now { display: flex; flex-direction: column; gap: 4rem; }
.live__vw { font-size: 36rem; font-weight: 700; line-height: 1; }
.live__bp { font-size: 15rem; }
.rows { border-top: 1px solid var(--black); display: flex; flex-direction: column; }
.row {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding: 10rem 0;
  border-bottom: 1px solid var(--grey);
}
.row__l { font-size: 13rem; color: var(--text-2); }
.row__v { font-family: var(--mono); font-size: 13rem; line-height: 1.5; display: flex; flex-direction: column; gap: 4rem; }
.clamped { font-family: var(--font); font-size: 13rem; color: var(--text-2); }
.row--res { border-bottom: 0; padding: 12rem 0 0; }
.row--res .row__v { font-family: var(--font); font-size: 20rem; font-weight: 700; line-height: 1.35; gap: 0; }
.row--res .sep { display: none; }

.s4 { display: flex; flex-direction: column; gap: 16rem; }
.s4__head { display: flex; align-items: center; gap: 12rem; }
.cards3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16rem; }
.wcard { background: var(--white); border-radius: 16rem; padding: 20rem; display: flex; flex-direction: column; gap: 8rem; }
.wcard--grey { background: var(--grey); }
.wcard__t { font-size: 19rem; font-weight: 700; }
.wcard__x { font-size: 15rem; line-height: 1.5; }

/* ---------------------------------------------------------------- 03 designers */

.des__grid { display: flex; flex-direction: column; gap: 28rem; }
.gcard {
  background: var(--grey);
  border-radius: 16rem;
  padding: 20rem;
  display: flex;
  flex-direction: column;
  gap: 12rem;
}
.gcard__t { font-size: 20rem; font-weight: 700; line-height: 1.2; }
.gcard__x { font-size: 16rem; line-height: 1.5; }

.devices { display: flex; align-items: flex-end; gap: 12rem; margin-top: 8rem; }
.dev { display: flex; flex-direction: column; align-items: flex-start; gap: 6rem; }
.dev__box { border-radius: 8rem; }
.dev--m .dev__box { width: 38rem; height: 76rem; background: var(--violet); }
.dev--t .dev__box { width: 78rem; height: 100rem; background: var(--lavender); box-shadow: inset 0 0 0 1.5rem var(--black); }
.dev--d .dev__box { width: 146rem; height: 94rem; background: var(--black); }
.dev__n { font-size: 15rem; font-weight: 700; }
.dev__r { font-size: 12rem; }

.etbl { background: var(--white); border-radius: 12rem; padding: 2rem 12rem; }
.etbl__row {
  display: grid;
  grid-template-columns: 0.9fr 0.9fr 1fr 1.1fr;
  gap: 6rem;
  padding: 10rem 0;
  border-bottom: 1px solid var(--grey);
  font-size: 14rem;
}
.etbl__row:last-child { border-bottom: 0; }
.etbl__head { border-bottom-color: var(--black); font-size: 12rem; font-weight: 500; }
.etbl__row.is-strong { font-weight: 700; }

.des__off { display: flex; flex-direction: column; gap: 28rem; margin-top: 12rem; }
.des__bgrid { display: flex; flex-direction: column; gap: 28rem; }
.ocard {
  border: 1.5rem solid var(--black);
  border-radius: 16rem;
  padding: 20rem;
  display: flex;
  flex-direction: column;
  gap: 12rem;
  min-width: 0;
}

/* ---------------------------------------------------------------- 04 developers */

.codegrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "s1" "css" "s2" "s3";
  gap: 28rem;
}
.scard--1 { grid-area: s1; }
.scard--2 { grid-area: s2; }
.scard--3 { grid-area: s3; }
.code--full { grid-area: css; }
.scard {
  background: var(--white);
  border-radius: 16rem;
  padding: 20rem;
  display: flex;
  flex-direction: column;
  gap: 10rem;
}
.scard__t { font-size: 20rem; font-weight: 700; }
.scard__x { font-size: 16rem; line-height: 1.5; }
.btn-copy {
  height: 48rem;
  margin-top: 4rem;
  padding: 0 18rem;
  border: 0;
  border-radius: 12rem;
  background: var(--black);
  color: var(--white);
  font-size: 16rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rem;
}
.btn-copy:hover { background: #222222; }
.i-btn { width: 18rem; height: 18rem; flex-shrink: 0; }

.ex { display: flex; flex-direction: column; gap: 28rem; margin-top: 12rem; }
.ex__grid { display: flex; flex-direction: column; gap: 28rem; }
.notes { display: flex; flex-direction: column; gap: 18rem; }
.note-i { display: flex; flex-direction: column; gap: 6rem; }
.note-i__t { font-size: 18rem; font-weight: 700; }
.note-i__x { font-size: 15rem; line-height: 1.5; }

/* ---------------------------------------------------------------- 05 skill */

.skill__text { display: flex; flex-direction: column; gap: 16rem; }
.skill__lead { font-size: 16rem; line-height: 1.5; }
.skill__in { display: flex; flex-direction: column; gap: 10rem; margin-top: 4rem; }
.skill__inT { font-size: 14rem; font-weight: 500; color: var(--lavender); }
.ticks { display: flex; flex-direction: column; gap: 10rem; margin: 0; padding: 0; list-style: none; }
.ticks li { display: flex; align-items: baseline; gap: 10rem; font-size: 16rem; line-height: 1.4; }
.ticks li::before {
  content: "";
  flex-shrink: 0;
  width: 7rem;
  height: 7rem;
  border-radius: 2rem;
  background: var(--violet);
  transform: translateY(-2rem);
}
.skill__btns { display: flex; flex-direction: column; gap: 10rem; margin-top: 8rem; }
.btn {
  height: 52rem;
  padding: 0 20rem;
  border-radius: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rem;
  font-size: 17rem;
  font-weight: 500;
  text-decoration: none;
}
.btn--violet { background: var(--violet); color: var(--black); border: 0; }
.btn--violet:hover { background: var(--violet-hover); color: var(--black); }
.btn--outline { background: transparent; color: var(--white); border: 1.5rem solid var(--white); }
.btn--outline:hover { background: #1a1a1a; }

.preview {
  min-width: 0;
  border-radius: 14rem;
  background: #111111;
  border: 1px solid var(--line);
  overflow: hidden;
}
.preview__bar {
  height: 40rem;
  padding: 0 16rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8rem;
  font-family: var(--mono);
  font-size: 12rem;
  color: var(--lavender);
}
.i-file { width: 14rem; height: 14rem; }
.code--skill { background: transparent; color: var(--lavender); border-radius: 0; padding: 14rem 16rem 18rem; }

/* ---------------------------------------------------------------- 06 limits, footer */

.lim { gap: 24rem; }
.lim__cards { display: flex; flex-direction: column; gap: 16rem; }

.footer { background: var(--black); color: var(--white); }
.footer__inner { padding-top: 40rem; padding-bottom: 40rem; display: flex; flex-direction: column; gap: 20rem; }
.footer__why { display: flex; flex-direction: column; gap: 6rem; }
.footer__whyT { font-size: 16rem; font-weight: 700; }
.footer__whyX { font-size: 15rem; line-height: 1.5; color: var(--lavender); }
.footer__repo { margin-top: 8rem; font-size: 15rem; }

/* ================================================================ tablet: 768 mockup */

@media (min-width: 500px) {
  .wrap { padding-left: 32rem; padding-right: 32rem; }

  .header__inner { height: 64rem; }
  .brand { font-size: 18rem; }
  .i-logo { width: 26rem; height: 26rem; }
  .lang__btn { padding: 0 12rem 0 14rem; font-size: 16rem; gap: 8rem; }
  .i-globe { width: 18rem; height: 18rem; }
  .lang__menu { width: 220rem; }

  .hero__inner { padding-top: 32rem; padding-bottom: 36rem; gap: 24rem; }
  .hero__head { gap: 12rem; }
  .hero__kicker { display: block; font-size: 16rem; }
  .hero__title { font-size: 48rem; line-height: 1; }
  .hero__row { gap: 16rem; margin-top: 4rem; }
  .hero__lead { font-size: 18rem; }
  .hero__hint { font-size: 15rem; }
  .btn-play { padding: 0 18rem; font-size: 16rem; gap: 10rem; }
  .btn-play svg { width: 16rem; height: 16rem; }

  .demo { gap: 24rem; }
  .demo__stage { height: 406rem; }
  .demo__frame { display: block; }
  .gl { font-size: 12rem; }
  .g-full { stroke-width: 3; }
  .g-trail { stroke-width: 3.5; }
  .g-borders { stroke-dasharray: 3 5; }
  .legend { display: none; }

  .readouts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16rem; padding-top: 0; border-top: 0; }
  .ro { gap: 4rem; }
  .ro__label { font-size: 14rem; }
  .ro--bp .ro__value { font-size: 18rem; white-space: nowrap; }
  .ro--px .aa { display: none; }
  .ro--px .ro__value { display: block; height: auto; font-size: 26rem; font-weight: 700; }

  .sec { padding: 80rem 0; }
  .sec__inner { gap: 40rem; }
  .sec__head { gap: 16rem; }
  .kicker { font-size: 16rem; }
  .kicker i { width: 10rem; height: 10rem; }
  .h2 { font-size: 40rem; line-height: 1.08; }
  .h3 { font-size: 30rem; line-height: 1.12; }
  .lead { font-size: 18rem; }
  .p { font-size: 18rem; }
  .note { font-size: 16rem; }
  .num { width: 44rem; height: 44rem; font-size: 20rem; }
  .num--s { width: 40rem; height: 40rem; font-size: 18rem; }

  .code { border-radius: 16rem; padding: 24rem 28rem; font-size: 13rem; line-height: 20rem; }
  .code--sm { border-radius: 12rem; padding: 20rem 24rem; }

  .cmp__tabs { display: none; }
  .cmp__items { flex-direction: row; align-items: flex-start; gap: 18rem; }
  .cmp__items[data-active] .cmp__item:nth-child(n) { display: flex; }
  .cmp__item { align-items: flex-start; gap: 10rem; width: 240rem; }
  .cmp__item:nth-child(1) { width: 188rem; }
  .cmp__frame,
  .cmp__item:nth-child(1) .cmp__frame { width: 100%; height: 400rem; border-radius: 14rem; }
  .cmp__w { font-size: 15rem; }
  .cmp__cap { margin-top: 4rem; gap: 10rem; }
  .cmp__t { font-size: 18rem; }
  .cmp__x { font-size: 15rem; }
  .cmp__sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16rem; margin-top: 0; }
  .card { padding: 24rem; gap: 10rem; }
  .card__t { font-size: 22rem; }
  .card__x { font-size: 17rem; }

  .algo { gap: 56rem; }
  .s1 { gap: 20rem; }
  .s1__text { gap: 20rem; }
  .tbl { border-radius: 16rem; padding: 6rem 20rem; }
  .tbl__row { grid-template-columns: 1.3fr 0.7fr 1.4fr; gap: 12rem; padding: 14rem 0; font-size: 18rem; }
  .tbl__head { padding: 12rem 0; font-size: 15rem; }
  .s2 { gap: 24rem; }
  .s2__head { gap: 20rem; }
  .chunk { gap: 14rem; }
  .chunk__t { font-size: 20rem; }
  .chunk__x { font-size: 17rem; }
  .chunk__e { font-size: 14rem; }
  .s3 { border-radius: 20rem; padding: 32rem; gap: 24rem; }
  .s3__head { gap: 14rem; }
  .s3__t { font-size: 22rem; }
  .deriv--short { display: none; }
  .deriv--long { display: block; font-size: 14rem; line-height: 24rem; }
  .s3__big { font-size: 44rem; line-height: 1.08; }
  .s3__x { font-size: 18rem; }
  .chips { gap: 10rem; }
  .chips li { padding: 12rem 16rem; font-size: 17rem; }
  .live { border-radius: 20rem; padding: 32rem; gap: 20rem; }
  .live__side { gap: 20rem; }
  .live__p { font-size: 17rem; }
  .presets { display: flex; flex-wrap: wrap; gap: 8rem; }
  .presets button { min-width: 60rem; padding: 0 12rem; font-size: 15rem; }
  .live__now { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 16rem; }
  .live__vw { font-size: 44rem; }
  .live__bp { font-size: 17rem; }
  .row { display: grid; grid-template-columns: 140rem minmax(0, 1fr); gap: 12rem; padding: 12rem 0; align-items: baseline; }
  .row__l { font-size: 15rem; }
  .row__v { font-size: 14rem; }
  .clamped { font-size: 14rem; }
  .row--res { padding: 16rem 0; }
  .row--res .row__v { display: block; font-size: 24rem; line-height: 1.3; }
  .row--res .sep { display: inline; }
  .s4 { gap: 24rem; }
  .s4__head { gap: 14rem; }
  .cards3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards3 > :first-child { grid-column: span 2; }
  .wcard { padding: 24rem; gap: 10rem; }
  .wcard__t { font-size: 22rem; }
  .wcard__x { font-size: 17rem; }

  .des__grid { gap: 40rem; }
  .gcard { padding: 32rem; gap: 16rem; }
  .gcard__t { font-size: 24rem; }
  .gcard__x { font-size: 18rem; }
  .devices { gap: 16rem; }
  .dev { gap: 8rem; }
  .dev__box { border-radius: 10rem; }
  .dev--m .dev__box { width: 60rem; height: 120rem; }
  .dev--t .dev__box { width: 124rem; height: 160rem; }
  .dev--d .dev__box { width: 232rem; height: 150rem; }
  .dev__n { font-size: 17rem; }
  .dev__r { font-size: 14rem; }
  .etbl { padding: 4rem 20rem; }
  .etbl__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12rem; padding: 11rem 0; font-size: 17rem; }
  .etbl__head { padding: 12rem 0; font-size: 15rem; }
  .des__off { gap: 40rem; margin-top: 16rem; }
  .des__bgrid { gap: 40rem; }
  .ocard { padding: 32rem; gap: 16rem; }

  .codegrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "s1 s1" "css css" "s2 s3";
    gap: 40rem 16rem;
  }
  .scard { padding: 28rem; gap: 12rem; }
  .scard__t { font-size: 22rem; }
  .scard__x { font-size: 17rem; }
  .btn-copy { align-self: flex-start; padding: 0 20rem; }
  .ex { gap: 40rem; margin-top: 16rem; }
  .ex__grid { gap: 40rem; }
  .notes { gap: 24rem; }
  .note-i__t { font-size: 20rem; }
  .note-i__x { font-size: 17rem; }

  .skill__text { gap: 20rem; }
  .skill__lead { font-size: 18rem; }
  .skill__in { gap: 12rem; }
  .skill__inT { font-size: 16rem; }
  .ticks { gap: 12rem; }
  .ticks li { gap: 12rem; font-size: 17rem; }
  .ticks li::before { width: 8rem; height: 8rem; }
  .skill__btns { flex-direction: row; gap: 12rem; }
  .btn { padding: 0 22rem; }
  .preview { border-radius: 16rem; }
  .preview__bar { height: 44rem; padding: 0 20rem; gap: 10rem; font-size: 13rem; }
  .i-file { width: 16rem; height: 16rem; }
  .code--skill { padding: 20rem 24rem 24rem; }

  .lim { gap: 32rem; }
  .footer__inner { padding-top: 48rem; padding-bottom: 48rem; gap: 24rem; }
  .footer__why { gap: 8rem; }
  .footer__whyT { font-size: 17rem; }
  .footer__whyX { font-size: 16rem; }
}

/* ================================================================ desktop: 1440 mockup */

@media (min-width: 1152px) {
  .wrap { padding-left: 80rem; padding-right: 80rem; }

  .header__inner { height: 72rem; }
  .brand { font-size: 20rem; gap: 12rem; }
  .i-logo { width: 28rem; height: 28rem; }
  .nav { display: flex; align-items: center; gap: 28rem; margin-left: auto; font-size: 16rem; }
  .nav a { padding: 12rem 0; text-decoration: none; }

  .hero__inner { padding-top: 40rem; padding-bottom: 44rem; gap: 28rem; }
  .hero__head { gap: 14rem; }
  .hero__kicker { font-size: 18rem; }
  .hero__title { font-size: 64rem; }
  .hero__row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48rem; margin-top: 6rem; }
  .hero__lead { font-size: 19rem; max-width: 760rem; }
  .hero__controls { gap: 16rem; flex-shrink: 0; }

  .demo { display: block; }
  .demo__stage { height: 436rem; }
  .demo__frame { border-radius: 10rem 10rem 0 0; }
  .gl--x, .gl--seg { font-size: 13rem; }

  .readouts {
    position: absolute;
    left: 0;
    top: 250rem;
    width: 168rem;
    display: flex;
    flex-direction: column;
    gap: 6rem;
  }
  .ro__label { display: none; }
  .desk { display: inline; }
  .ro--vw .ro__value { font-size: 34rem; line-height: 1; }
  .ro--bp .ro__value { font-size: 15rem; font-weight: 400; color: var(--lavender); }
  .ro--rem .ro__value { font-size: 20rem; }
  .ro--px { display: block; font-size: 14rem; line-height: 1.35; color: var(--lavender); }
  .ro--px .ro__label { display: inline; font-size: 14rem; }
  .ro--px .ro__label::after { content: ": "; }
  .ro--px .ro__value { display: inline; font-size: 14rem; font-weight: 400; }

  .sec { padding: 120rem 0; }
  .sec__inner { gap: 56rem; }
  .sec__head { gap: 20rem; }
  .kicker { font-size: 18rem; gap: 12rem; }
  .h2 { font-size: 56rem; line-height: 1.05; }
  .h3 { font-size: 36rem; line-height: 1.1; }
  .lead { font-size: 22rem; max-width: 920rem; }
  .p { font-size: 20rem; }
  .note { font-size: 18rem; }
  .num { width: 48rem; height: 48rem; font-size: 22rem; }
  .num--s { width: 44rem; height: 44rem; font-size: 20rem; }

  .code { padding: 28rem 32rem; font-size: 14rem; line-height: 22rem; }
  .code--sm { padding: 24rem 28rem; }

  .cmp__title { max-width: 1000rem; }
  .cmp__items { justify-content: center; gap: 64rem; }
  .cmp__item { gap: 14rem; width: 384rem; }
  .cmp__item:nth-child(1) { width: 300rem; }
  .cmp__frame,
  .cmp__item:nth-child(1) .cmp__frame { height: 560rem; border-radius: 20rem; }
  .cmp__w { font-size: 18rem; }
  .cmp__cap { margin-top: 6rem; gap: 8rem; }
  .cmp__t { font-size: 22rem; }
  .cmp__x { font-size: 18rem; }
  .cmp__sum { gap: 24rem; margin-top: 16rem; }
  .card { padding: 32rem; gap: 12rem; }
  .card__t { font-size: 28rem; }
  .card__x { font-size: 20rem; }

  .algo { gap: 80rem; }
  .s1 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48rem; align-items: start; }
  .tbl { padding: 8rem 24rem; }
  .tbl__row { grid-template-columns: 1.3fr 0.8fr 1.4fr; gap: 16rem; padding: 16rem 0; font-size: 20rem; }
  .tbl__head { padding: 14rem 0; font-size: 16rem; }
  .s2 { gap: 32rem; }
  .s2__head { max-width: 900rem; }
  .chunk { display: grid; grid-template-columns: 760rem minmax(0, 1fr); gap: 40rem; align-items: start; }
  .chunk__text { padding-top: 8rem; }
  .chunk__t { font-size: 22rem; }
  .chunk__x { font-size: 18rem; }
  .chunk__e { font-size: 15rem; }
  .s3 { border-radius: 24rem; padding: 56rem; gap: 32rem; }
  .s3__head { gap: 16rem; }
  .s3__t { font-size: 24rem; }
  .deriv--long { font-size: 20rem; line-height: 32rem; }
  .s3__big { font-size: 72rem; line-height: 1.05; }
  .s3__x { font-size: 22rem; max-width: 980rem; }
  .chips { gap: 16rem; }
  .chips li { border-radius: 12rem; padding: 16rem 22rem; font-size: 20rem; }
  .live { display: grid; grid-template-columns: 440rem minmax(0, 1fr); gap: 56rem; align-items: start; border-radius: 24rem; padding: 48rem; }
  .live__p { font-size: 18rem; }
  .presets button { min-width: 64rem; padding: 0 14rem; font-size: 16rem; }
  .live__now { flex-direction: column; align-items: flex-start; gap: 4rem; margin-top: 8rem; }
  .live__vw { font-size: 56rem; }
  .live__bp { font-size: 18rem; }
  .row { grid-template-columns: 170rem minmax(0, 1fr); gap: 16rem; padding: 14rem 0; }
  .row__l { font-size: 16rem; }
  .row__v { font-size: 16rem; }
  .clamped { font-size: 15rem; }
  .row--res { padding: 18rem 0; }
  .row--res .row__v { font-size: 28rem; }
  .s4 { gap: 32rem; }
  .s4__head { gap: 16rem; }
  .cards3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24rem; }
  .cards3 > :first-child { grid-column: auto; }
  .wcard { padding: 32rem; gap: 12rem; }
  .wcard__t { font-size: 24rem; }
  .wcard__x { font-size: 18rem; }

  .des__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24rem; align-items: start; }
  .gcard { padding: 40rem; gap: 20rem; }
  .gcard__t { font-size: 28rem; line-height: 1.15; }
  .gcard__x { font-size: 20rem; }
  .devices { margin-top: 12rem; }
  .dev { gap: 10rem; }
  .dev__n { font-size: 18rem; }
  .dev__r { font-size: 15rem; }
  .etbl__row { font-size: 18rem; }
  .des__off { gap: 24rem; margin-top: 0; }
  .des__bgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24rem; align-items: start; }
  .ocard { padding: 40rem; gap: 20rem; }

  .codegrid {
    grid-template-columns: 440rem minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "s1 css" "s2 css" "s3 css";
    gap: 24rem 40rem;
    align-items: start;
  }
  .scard { padding: 32rem; gap: 14rem; }
  .scard__t { font-size: 24rem; }
  .scard__x { font-size: 18rem; }
  .btn-copy { margin-top: 6rem; font-size: 17rem; }
  .ex { gap: 24rem; margin-top: 0; }
  .ex__grid { display: grid; grid-template-columns: 760rem minmax(0, 1fr); gap: 40rem; align-items: start; }
  .notes { gap: 28rem; padding-top: 8rem; }
  .note-i { gap: 8rem; }
  .note-i__t { font-size: 22rem; }
  .note-i__x { font-size: 18rem; }

  .skill { display: grid; grid-template-columns: minmax(0, 1fr) 600rem; gap: 64rem; align-items: start; }
  .skill__text { gap: 24rem; }
  .skill__lead { font-size: 20rem; }
  .skill__in { gap: 14rem; margin-top: 8rem; }
  .skill__inT { font-size: 18rem; }
  .ticks { gap: 14rem; }
  .ticks li { gap: 14rem; font-size: 19rem; }
  .skill__btns { margin-top: 12rem; }
  .preview__bar { height: 48rem; font-size: 14rem; }
  .code--skill { padding: 24rem 24rem 28rem; }

  .lim { gap: 48rem; }
  .lim__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24rem; }

  .footer__inner {
    padding-top: 56rem;
    padding-bottom: 56rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 600rem;
    gap: 64rem;
    align-items: start;
  }
  .footer__whyT { font-size: 18rem; }
}