/* The site's shell and shared components: paper, ink and vermilion.
   Every page links this file. The home page adds css/home-demo.css for the
   interactive illustration; every other page adds css/pages.css.

   Hand-written CSS, no build step. SERVE THE PAGE YOU JUDGE: a file:// origin
   cannot fetch the two faces below, so the page falls back to a system font and
   draws the product name's no-break space at twice the width of an ordinary
   space. See the serve target in the Makefile.

   Inter, self-hosted. SIL Open Font License 1.1, full text in fonts/LICENSE.txt.
   One variable file covers weights 100-900. latin-ext is gated by unicode-range
   and is fetched only for a character outside Latin-1 -- "Pawel Kuna" on
   licenses.html is one, so do not drop the second face. */
@font-face {
  font-family: Inter;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #f5f4ee;
  --paper-deep: #eeede5;
  --ink: #242e31;
  --muted: #686d68;
  --rule: #d9dbd2;
  --red: #b54332;
  --blue: #254553;
  --traffic: #087dff;
  --traffic-glow: #087dff99;
  --mono: "SFMono-Regular",Consolas,"Liberation Mono",monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 30px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter,Arial,sans-serif;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

button,input,a {
  -webkit-tap-highlight-color: transparent;
}

button,input {
  font: inherit;
}

button,a {
  touch-action: manipulation;
}

button {
  color: inherit;
  cursor: pointer;
}

button {
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button:disabled {
  opacity: .35;
  cursor: default;
}

button:focus-visible,a:focus-visible,canvas:focus-visible,input:focus-visible,[tabindex]:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 5px;
}

button:disabled:hover {
  transform: none;
}

h1,h2,h3,p {
  margin: 0;
}

h1,h2,h3 {
  font-weight: 500;
}

em {
  font-family: Georgia,"Times New Roman",serif;
  font-weight: 400;
}

svg {
  display: block;
}

img {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.wrap {
  max-width: 1376px;
  margin-inline: auto;
  padding-inline: 56px;
}

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.icon-library {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 650;
  font-size: 23px;
  letter-spacing: -1.1px;
  white-space: nowrap;
  line-height: 1;
}

.brand-mark {
  width: 28px;
  height: 28px;
  display: inline-block;
  flex-shrink: 0;
  background: var(--ink);
  mask: url("../icons/tinypad-logo.svg") center/contain no-repeat;
}

.brand-period {
  color: var(--red);
  margin-left: -10px;
}

.masthead {
  display: flex;
  align-items: center;
  height: 105px;
  gap: 40px;
  position: relative;
}

.masthead nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 12px;
  white-space: nowrap;
}

.nav-get {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--ink);
}

.nav-get .icon {
  width: 17px;
  height: 17px;
}

/* The pages other than the home page lead back to it, so the arrow points
   back, close to the word. */
.nav-home {
  gap: 12px;
}

.nav-home .icon {
  transform: scaleX(-1);
}

.masthead a:hover {
  color: var(--red);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.25px;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.6;
}

.red-tick {
  width: 6px;
  height: 6px;
  background: var(--red);
  display: block;
}

.hero {
  padding-top: 22px;
  padding-bottom: 46px;
  display: grid;
  gap: 18px;
  align-items: center;
  grid-template-columns: minmax(0,.94fr) minmax(0,1.25fr);
}

.hero-intro {
  padding-bottom: 27px;
  position: relative;
  z-index: 2;
}

.hero h1,.get-title {
  font-family: Georgia,"Times New Roman",serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(21px,2.075vw,31px);
  letter-spacing: -1.5px;
  line-height: 1.08;
  white-space: nowrap;
}

.hero h1 em {
  color: var(--red);
}

.hero-description {
  line-height: 1.85;
  color: #616863;
  margin-top: 28px;
  font-size: 15px;
}

/* A drawing is shared by two devices. Their geometry stays fixed so direct
   manipulation maps accurately to the tablet canvas at every screen size. */

.demo-stage {
  align-self: start;
  height: 505px;
  position: relative;
  min-width: 0;
  isolation: isolate;
  scroll-margin-top: 30px;
}

.demo-stage:before {
  content: "";
  position: absolute;
  inset: 34px -12px 68px 14px;
  background-image: radial-gradient(#b5b9ad .7px,transparent .7px);
  background-size: 17px 17px;
  opacity: .5;
  mask-image: linear-gradient(90deg,transparent,#000 22%,#000 85%,transparent);
}

.stage-index {
  position: absolute;
  top: 0;
  left: 23px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
}

.stage-index span:first-child {
  color: var(--red);
}

.stage-index span:last-child {
  font-size: 16px;
  color: var(--red);
}

.computer {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 370px;
  width: 37%;
}

.monitor-frame {
  padding: 7px 7px 0;
  background: #303739;
  border: 1px solid #6e7370;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 18px 30px -20px #1c282533;
}

.desktop-title {
  height: 17px;
  background: #414847;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #e4e6df;
  font-size: 5.5px;
}

.window-dots {
  position: absolute;
  display: flex;
  left: 5px;
  gap: 3px;
}

.window-dots i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #929891;
}

.monitor-screen {
  aspect-ratio: 800/500;
  position: relative;
  overflow: hidden;
  background: #e7e6df;
}

.desktop-art {
  position: absolute;
  inset: 0;
}

.desktop-art img,.desktop-art canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.monitor-chin {
  height: 15px;
  border-radius: 0 0 9px 9px;
  background: linear-gradient(#c4c7bf,#d6d8d0);
  border: 1px solid #a8ada6;
  border-top: 0;
}

.monitor-stand {
  height: 39px;
  width: 54px;
  margin: auto;
  background: linear-gradient(90deg,#a6aba3,#d4d8cf 50%,#b4b9b0);
  clip-path: polygon(25% 0,75% 0,90% 100%,10% 100%);
}

.monitor-base {
  height: 5px;
  width: 114px;
  margin: auto;
  background: #b5bbb0;
  border-radius: 50% 50% 20% 20%;
}

/* demo.js puts each label above the top-left corner of its device. */
.computer-label,.tablet-label {
  position: absolute;
  font-size: 13px;
  line-height: 1;
  transform: translateY(-100%);
  white-space: nowrap;
}

.annotation {
  font-family: Georgia,"Times New Roman",serif;
  font-style: italic;
  color: #6c756d;
}

/* demo.js draws the path from the device to the monitor, with the wifi glyph
   on its middle. The monitor and the tablet paint over the ends of the path.
   While input travels, the path turns blue, its dashes flow to the computer,
   and the glyph pulses. The change has no transition: it must not look late. */
.connection-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.trace-line {
  fill: none;
  stroke: #bbc0b3;
  stroke-dasharray: 3 3;
}

.trace-wifi-pad {
  fill: var(--paper);
}

.trace-wifi-glyph {
  fill: none;
  stroke: #879180;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.connection-trace.live .trace-line,.connection-trace.live .trace-wifi-glyph {
  stroke: var(--traffic);
}

/* The path runs from the device to the computer. A negative offset moves the
   dashes along it, so they flow towards the computer: one dash period (6 px)
   in each cycle. */
.connection-trace.live .trace-line {
  animation: traffic-flow .15s linear infinite;
}

.connection-trace.live .trace-wifi-glyph {
  filter: drop-shadow(0 0 .8px var(--traffic-glow));
  animation: traffic-glow .9s ease-in-out infinite alternate;
}

@keyframes traffic-flow {
  to {
    stroke-dashoffset: -6;
  }
}

@keyframes traffic-glow {
  from {
    filter: drop-shadow(0 0 .3px var(--traffic-glow));
  }

  to {
    filter: drop-shadow(0 0 1.2px var(--traffic-glow));
  }
}

/* Leave both screens readable, with only their frame corners overlapping. One
   geometry serves all four modes, so the illustration does not resize when the
   reader moves between them. */
.tablet {
  position: absolute;
  left: 0;
  bottom: 61px;
  padding: 11px 16px 7px;
  background: #283132;
  border: 1px solid #778077;
  border-radius: 21px;
  box-shadow: 0 1px 0 2px #b7bdb3,0 2px 0 4px #d7d9d0,0 22px 40px -23px #19312899;
  overflow: hidden;
  width: 60%;
}

.tablet-camera {
  position: absolute;
  top: 50%;
  left: 5px;
  width: 5px;
  height: 5px;
  background: #131a1c;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px #475050;
}

.tablet-topbar {
  height: 27px;
  background: #252d2e;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #d2d7ce;
  font-size: 7px;
  padding: 0 3px 7px;
}

.tablet-connected {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-right: auto;
}

.tablet-connected i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #a4b593;
}

.tablet-tools {
  display: flex;
  gap: 13px;
}

.tablet-tools .icon {
  width: 11px;
  height: 11px;
  color: #a3aca1;
}

.tablet-mode {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #5a6358;
  border-radius: 3px;
  padding: 2px 7px;
  font-size: 6px;
}

.tablet-mode .icon {
  width: 9px;
  height: 9px;
}

.tablet-screen {
  aspect-ratio: 800/520;
  position: relative;
  overflow: hidden;
  background: #efeee7;
}

.pencil-surface, .tablet-art, .touch-surface, .gamepad-surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tablet-art {
  object-fit: fill;
}

#draw-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

.drawing-tools {
  position: absolute;
  top: 11px;
  left: 9px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  background: #293436ed;
  border: 1px solid #5a6157;
  border-radius: 5px;
}

.tool {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  background: transparent;
  color: #e8eadd;
  border-radius: 3px;
}

.tool.active {
  background: #59665a;
}

.tool:hover:not(:disabled) {
  background: #697363;
}

.tool .icon {
  width: 13px;
  height: 13px;
}

.tool-rule {
  height: 1px;
  background: #6f7868;
  margin: 2px;
}

.canvas-hint {
  position: absolute;
  bottom: 26px;
  right: 20px;
  pointer-events: none;
  font-family: Georgia,serif;
  font-style: italic;
  color: #7a8374;
  font-size: 12px;
  transition: opacity .2s;
}

.has-drawing .canvas-hint {
  opacity: 0;
}

.tablet-bottom {
  height: 17px;
  padding-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 5px;
  color: #c4cdc0;
  position: relative;
}

.home-indicator {
  position: absolute;
  left: 40%;
  width: 20%;
  height: 2px;
  border-radius: 3px;
  background: #96a08f;
}

.pencil-object {
  position: absolute;
  right: 34%;
  bottom: 46px;
  width: 11px;
  background: linear-gradient(90deg,#c9cec3,#fffef4 45%,#eceee2 70%,#c7cec0);
  border: 1px solid #c5cbbd;
  box-shadow: 2px 7px 6px #424e3924;
  border-radius: 7px 7px 1px 1px;
  transform-origin: bottom center;
  pointer-events: none;
  height: 175px;
  transform: rotate(16deg);
}

.pencil-object:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -17px;
  height: 17px;
  background: linear-gradient(90deg,#c8cebe,#fffff4);
  clip-path: polygon(0 0,100% 0,55% 100%,40% 100%);
}

.pencil-object span {
  position: absolute;
  top: 22px;
  width: 100%;
  border-top: 1px solid #bfc6b5;
}

.demo-caption {
  position: absolute;
  bottom: -17px;
  left: 0;
  right: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}

.demo-caption-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.demo-caption-label i {
  width: 4px;
  height: 4px;
  background: var(--red);
  border-radius: 50%;
}

.demo-caption button {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  padding: 7px 0;
  color: var(--muted);
  font-size: 12px;
}

.demo-caption button:hover {
  color: var(--red);
}

.demo-caption button .icon {
  width: 12px;
  height: 12px;
}

#reset-demo {
  margin-left: 7px;
  padding: 8px;
}

.mode-section {
  padding-top: 20px;
}

.mode-tabs {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.mode-tab {
  padding: 25px 19px 26px 0;
  display: flex;
  gap: 15px;
  align-items: center;
  text-align: left;
  background: transparent;
  position: relative;
}

.mode-tab:not(:first-child) {
  padding-left: 21px;
  border-left: 1px solid var(--rule);
}

.mode-tab:before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
}

.mode-tab.active:before {
  background: var(--red);
}

.mode-number {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  align-self: flex-start;
  padding-top: 2px;
}

.mode-tab>.icon {
  width: 21px;
  height: 21px;
}

.mode-tab>span:nth-last-child(2) {
  font-size: 14px;
  line-height: 1.3;
}

.mode-tab small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 7px;
  white-space: nowrap;
}

.mode-tab-arrow {
  font-size: 16px;
  color: var(--muted);
  margin-left: auto;
  align-self: flex-start;
}

.mode-tab.active>.icon,.mode-tab.active .mode-tab-arrow,.mode-tab.active .mode-number {
  color: var(--red);
}

.mode-tab:hover {
  background: #eeeee5;
}

#mode-description {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: baseline;
  padding-top: 19px;
  font-size: 13px;
  color: var(--muted);
  min-height: 65px;
}

#mode-description p {
  max-width: 760px;
}

#mode-description>span {
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
  color: var(--red);
}

/* Working views for the other three inputs. */

.desktop-work {
  position: absolute;
  inset: 0;
  background: #d8dcd3;
  overflow: hidden;
}

.mini-sidebar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 24px;
  background: #677367;
  padding: 13px 7px;
}

.mini-sidebar i {
  display: block;
  width: 9px;
  height: 3px;
  background: #bcc4b6;
  margin-bottom: 10px;
}

.mini-document {
  position: absolute;
  inset: 11px 20px auto 34px;
  background: #f9f8ef;
  min-height: 260px;
  padding: 16px;
  transition: transform .18s;
}

.mini-document>span {
  font: 4px var(--mono);
  letter-spacing: 1px;
  color: var(--red);
}

.mini-document h3 {
  font: 15px Georgia,serif;
  margin: 5px 0 8px;
}

.mini-document img {
  width: 100%;
  margin-bottom: 8px;
}

.mini-document p {
  font-size: 5px;
}

.remote-cursor {
  position: absolute;
  width: 13px;
  height: 16px;
  left: 55%;
  top: 40%;
  fill: var(--red);
  stroke: var(--paper);
  stroke-width: 1.5;
  filter: drop-shadow(0 1px 1px #0004);
  transition: left .04s,top .04s;
}

.click-ring {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1px solid var(--red);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-25%,-25%);
}

.click-ring.clicking {
  animation: click .45s ease-out;
}

@keyframes click {
  0% {
    opacity: 1;
    scale: .5;
  }

  100% {
    opacity: 0;
    scale: 1.5;
  }
}

.touch-surface {
  user-select: none;
  -webkit-user-select: none;
  background: #d9dfd0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  touch-action: none;
  cursor: grab;
  overflow: hidden;
}

.touch-surface:active {
  cursor: grabbing;
}

.touch-crosshair {
  position: absolute;
  inset: 18px;
  border: 1px solid #a2b09a;
  border-radius: 8px;
  pointer-events: none;
}

.touch-crosshair:after,.touch-crosshair:before {
  content: "";
  position: absolute;
  background: #9eac95;
  opacity: .5;
}

.touch-crosshair:after {
  width: 1px;
  top: 0;
  bottom: 0;
  left: 50%;
}

.touch-crosshair:before {
  height: 1px;
  left: 0;
  right: 0;
  top: 50%;
}

.touch-surface p {
  font: italic 23px Georgia,serif;
  color: #3d5543;
  z-index: 1;
  margin-top: 0;
}

.touch-surface>span {
  font-size: 8px;
  color: #57714f;
  z-index: 1;
  margin-top: 12px;
}

.touch-orbits {
  display: flex;
  position: absolute;
  left: 42%;
  top: 15%;
  gap: 13px;
}

.touch-orbits i {
  width: 16px;
  height: 22px;
  border: 1px solid #9aaa8e;
  border-radius: 50%;
}

.demo-text-button {
  position: relative;
  z-index: 1;
  font-size: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  background: #d9dfd0;
  color: #3f5940;
  border-bottom: 1px solid #8f9f80;
  padding: 6px;
}

.demo-text-button .icon {
  width: 12px;
  height: 12px;
}

.pointer-buttons,.modifier-buttons {
  display: flex;
  gap: 8px;
}

.pointer-buttons button {
  flex: 1;
  background: #f2f2e9;
  border: 1px solid #aab5a1;
  padding: 14px 3px;
  font-size: 10px;
  box-shadow: 0 2px 0 #b1bca7;
}

.modifier-buttons button {
  flex: 1;
  padding: 6px;
  background: #c4cebc;
  font: 9px var(--mono);
}

.modifier-buttons button[aria-pressed=true] {
  background: var(--blue);
  color: var(--paper);
}

.pointer-buttons button:active,.gamepad-surface button:active {
  transform: translateY(2px);
  box-shadow: none;
}

.gamepad-surface {
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
  caret-color: transparent;
  cursor: default;
  background: #313e3b;
  padding: 17px 26px;
  color: #d8e1d1;
}

.gamepad-surface * {
  user-select: none;
  -webkit-user-select: none;
  caret-color: transparent;
}

.shoulder-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.shoulder-buttons button {
  color: #dce3d3;
  background: #4e5b51;
  border: 1px solid #6f7f65;
  border-radius: 2px;
  font: 10px var(--mono);
  padding: 0;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.game-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  left: 26px;
  right: 26px;
  top: 29%;
  bottom: 21%;
}

.analog-pad,.abxy {
  width: 94px;
  height: 94px;
  position: relative;
  flex-shrink: 0;
}

.abxy { justify-self: end; }

.analog-pad {
  border: 1px solid #71806a;
  border-radius: 50%;
  background: transparent;
  touch-action: none;
  user-select: none;
  cursor: grab;
}

.analog-pad.engaged { cursor: grabbing; }

.analog-knob {
  position: absolute;
  left: calc(50% + var(--stick-x, 0%));
  top: calc(50% + var(--stick-y, 0%));
  width: 52%;
  height: 52%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 27%, #b1bfa0, #7c8d6b 58%, #526247);
  box-shadow: 0 3px 5px #13251d66;
  pointer-events: none;
}

.abxy button {
  position: absolute;
  width: 31%;
  height: 31%;
  border-radius: 50%;
  background: #6d7b66;
  color: #e3ead8;
  font: 12px var(--mono);
  box-shadow: 0 3px 0 #1c2925;
}

.key-y {
  left: 34.5%;
  top: 0;
}

.key-x {
  left: 0;
  top: 34.5%;
}

.key-b {
  right: 0;
  top: 34.5%;
}

.key-a {
  left: 34.5%;
  bottom: 0;
  background: #aa5741 !important;
}

.gamepad-tip {
  position: absolute;
  bottom: 17px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 8px;
  color: #afc0a2;
}

/* THE DRIVE SCENE.
 *
 * One number holds the picture together: --horizon, the distance from the top
 * of the screen down to the horizon line. The road converges on it, each ridge
 * stands on it, and js/demo.js reads the same two properties from this rule to
 * put the dashes, the trees and the bushes in the same perspective. Change a
 * value here and the script follows. Do not repeat either number in the script.
 *
 * The projection: a thing at world depth z, where z = 0 is the bottom edge of
 * the screen, has screen depth d = 1 / (1 + z). Its foot sits at
 * horizon + (1 - horizon) * d, and it is d times its size at the camera. A
 * straight road on a flat plane projects to straight lines, so the road and its
 * shoulder are plain trapezoids that meet at a point on the horizon.
 */
.desktop-game {
  --horizon: 45%;
  --road-half: 34%;
  --bend: 0px;
  position: absolute;
  inset: 0;
  background: #c9d5c0;
  overflow: hidden;
}

.game-sky {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--horizon);
  background: linear-gradient(#bccfbd,#cfd8c1 58%,#e4d6ba);
}

.game-sun {
  position: absolute;
  left: 68%;
  top: 15%;
  transform: translateX(var(--bend,0px));
  width: 25px;
  height: 25px;
  background: #b75a42;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgb(183 90 66/.14),0 0 18px 7px rgb(183 90 66/.22);
}

/* Clouds drift on their own. They are far away, so the car's speed does not
 * move them; js/demo.js gives each one a direction, a height and a pause. */
.game-clouds {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--horizon);
  overflow: hidden;
}

.game-clouds i {
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 8px;
  background: #eef1e3;
  border-radius: 8px;
  transform-origin: 0 0;
  opacity: .8;
  will-change: transform;
}

.game-clouds i::before,.game-clouds i::after {
  content: "";
  position: absolute;
  background: inherit;
  border-radius: 50%;
}

.game-clouds i::before {
  width: 16px;
  height: 16px;
  left: 6px;
  bottom: 1px;
}

.game-clouds i::after {
  width: 11px;
  height: 11px;
  right: 6px;
  bottom: 2px;
}

/* Both ridges stand ON the horizon rather than replacing it, so the road can
 * vanish at the line instead of climbing above it. The near ridge keeps a
 * valley at its centre for the road to run into. */
/* Each ridge reaches one pixel BELOW the horizon and the ground starts one
 * pixel above it. Without that overlap a rounded edge leaves a bright line of
 * sky across the whole width. The ground is drawn last of the three, so it
 * covers what it overlaps. */
.game-ridge {
  position: absolute;
  left: -16%;
  right: -16%;
  bottom: calc(100% - var(--horizon) - 1px);
  transform: translateX(var(--bend,0px));
}

.game-ridge.far {
  height: 12%;
  background: #9cb094;
  clip-path: polygon(0 100%,9% 62%,19% 30%,31% 70%,42% 44%,50% 58%,60% 26%,71% 66%,82% 38%,92% 68%,100% 50%,100% 100%);
}

.game-ridge.near {
  height: 19%;
  background: #6f8866;
  clip-path: polygon(0 100%,6% 56%,16% 14%,27% 64%,36% 86%,45% 97%,52% 94%,58% 82%,67% 38%,77% 6%,87% 56%,95% 34%,100% 66%,100% 100%);
}

.game-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: calc(var(--horizon) - 1px);
  background: linear-gradient(#88a17b,#9cb488);
}

/* The road is drawn, not shaped by a rule, because it BENDS: js/demo.js walks
 * its two edges down the screen every frame and fills the ribbon between them,
 * with the shoulder under it and the dashes on top. A clip-path cannot hold a
 * curve that changes, and one canvas costs less than the fifteen boxes the
 * dashes used to need. */
.game-road {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Roadside things. Each kind keeps its own box, and the script scales the box
 * by the depth of the place it stands in, so a trunk never stretches. */
.game-scenery {
  position: absolute;
  inset: 0;
  isolation: isolate;
}

.game-scenery i {
  --leaf: #3f5f3d;
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 60px;
  transform-origin: 50% 100%;
  will-change: transform;
}

.game-scenery i::before,.game-scenery i::after {
  content: "";
  position: absolute;
}

.game-scenery i::before {
  left: 50%;
  bottom: 0;
  width: 5px;
  height: 20px;
  margin-left: -2.5px;
  background: #5a4730;
}

.game-scenery i::after {
  left: 0;
  right: 0;
  top: 0;
  height: 45px;
  background: var(--leaf);
  border-radius: 50% 50% 44% 44%;
}

.game-scenery i.pine::before {
  height: 14px;
}

.game-scenery i.pine::after {
  left: 4px;
  right: 4px;
  height: 49px;
  border-radius: 0;
  clip-path: polygon(50% 0,100% 100%,0 100%);
}

.game-scenery i.bush {
  width: 34px;
  height: 24px;
}

.game-scenery i.bush::before {
  display: none;
}

.game-scenery i.bush::after {
  top: 0;
  bottom: 0;
  height: auto;
  border-radius: 54% 46% 50% 50%/64% 62% 40% 40%;
}

/* The shadow is CAST, not centred underneath. An ellipse sitting below a sprite
 * with clear ground between them is the flat-design way of saying "this is
 * hovering", and that is what it looked like.
 *
 * The sun is at 68% of the width and well above the horizon, so it is ahead of
 * the car and off to the right. The shadow therefore lies towards the camera
 * and to the LEFT, tucked mostly under the body with a crescent showing at the
 * near corner. js/demo.js turns it along that same line. */
.car-shadow {
  position: absolute;
  left: calc(50% - 18px);
  bottom: 11px;
  width: 36px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(closest-side,rgb(20 33 24/.62) 0 32%,rgb(20 33 24/.36) 64%,rgb(20 33 24/0));
  transition: transform .18s;
}

/* THE CAR, from behind and a little above.
 *
 * A rounded rectangle cannot be a sports car. At this size the eye reads the
 * OUTLINE first, and an even-width box with faint parts inside it is one blob
 * whatever you put in it. So the shell is a clip-path: a narrow nose, arches
 * over the front wheels, a waist, and rear haunches wider than anything in
 * front of them.
 *
 * It is wider than it is long because the camera sits behind the car and only
 * a little above it, which foreshortens the length. Drawn to a car's real plan
 * it reads as a limousine. Everything inside is a share of the car's own box,
 * so the one smaller size in css/site-responsive.css needs no second set. */
.game-car {
  position: absolute;
  width: 31px;
  height: 28px;
  bottom: 17px;
  left: calc(50% - 15.5px);
  transition: transform .18s;
}

/* Four stubs behind the shell, not two bars across it. A bar shows its whole
 * length wherever the body is narrow, which put a pair of aircraft wings on the
 * nose. Each wheel is placed so the shell hides its inner half and only the
 * tread shows. The rear pair is wider and fatter than the front: seen from
 * above that is most of what separates a sports car from a hatchback. */
.car-axle {
  position: absolute;
  left: 0;
  right: 0;
}

.car-axle::before,.car-axle::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background: #241a15;
  border-radius: 1.5px;
}

.car-axle.front {
  top: 15%;
  height: 13%;
}

.car-axle.front::before,.car-axle.front::after { width: 16%; }
.car-axle.front::before { left: 12%; }
.car-axle.front::after { right: 12%; }

.car-axle.rear {
  bottom: 9%;
  height: 16%;
}

.car-axle.rear::before,.car-axle.rear::after { width: 18%; }
.car-axle.rear::before { left: -2%; }
.car-axle.rear::after { right: -2%; }

.car-body {
  position: absolute;
  inset: 0;
  background: linear-gradient(#d55c40,#c04e37 45%,#a23c2a);
  clip-path: polygon(30% 0,70% 0,77% 5%,82% 13%,83% 24%,79% 34%,75% 44%,77% 53%,83% 63%,88% 74%,90% 85%,87% 95%,79% 100%,21% 100%,13% 95%,10% 85%,12% 74%,17% 63%,23% 53%,25% 44%,21% 34%,17% 24%,18% 13%,23% 5%);
  filter: drop-shadow(0 1px 1px rgb(22 36 26/.45));
}

/* The cockpit: narrow at the front, wide at the back, and dark enough to read
 * as a hole in the shell rather than a panel painted on it. */
.car-body::before {
  content: "";
  position: absolute;
  left: 28%;
  right: 28%;
  top: 31%;
  height: 29%;
  background: #2f4239;
  clip-path: polygon(26% 0,74% 0,100% 36%,95% 100%,5% 100%,0 36%);
}

/* Shade down both flanks. A flat fill reads as a cut-out; this gives the shell
 * a top to catch the light and sides that fall away, which is the whole of the
 * modelling at this size. */
.car-body::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgb(46 18 14/.34),rgb(46 18 14/0) 26%,rgb(255 236 214/.1) 50%,rgb(46 18 14/0) 74%,rgb(46 18 14/.34));
}

/* An intake across the leading edge. Without it the bonnet is one unbroken arc
 * of red, and an unbroken arc at this size is a dome, not a car. */
.car-nose {
  position: absolute;
  left: 29%;
  right: 29%;
  top: 3%;
  height: 8%;
  background: rgb(44 17 13/.5);
  border-radius: 1px;
}

/* The wing reaches past the tail on both sides. Nothing else this small says
 * sports car so quickly. */
.car-wing {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 3%;
  height: 8%;
  background: #6f2b1e;
  border-radius: 1px;
  box-shadow: 0 1px 0 rgb(22 36 26/.3);
}

/* Lit, because the sun is going down. */
.car-lamps {
  position: absolute;
  left: 21%;
  right: 21%;
  bottom: 15%;
  height: 9%;
}

.car-lamps::before,.car-lamps::after {
  content: "";
  position: absolute;
  bottom: 0;
  top: 0;
  width: 34%;
  border-radius: 1px;
  background: #f0694a;
  box-shadow: 0 0 4px rgb(240 105 74/.6);
}

.car-lamps::before { left: 0; }
.car-lamps::after { right: 0; }

/* THE SPEEDOMETER.
 *
 * --speed runs 0 to 1 and js/demo.js writes it every frame. One value turns
 * the needle and fills the arc, so the two can never disagree. The dial is the
 * top half of a circle whose centre is the bottom middle of the box, which is
 * why every gradient here is placed `at 50% 100%`. */
.game-speedo {
  --speed: 0;
  position: absolute;
  left: 10px;
  bottom: 7px;
  width: 46px;
  height: 23px;
  z-index: 3;
}

/* A plate under the dial. Without it the arc crosses the road edge and the
 * needle is read against three colours at once. */
.game-speedo::before {
  content: "";
  position: absolute;
  inset: -3px -4px -4px;
  border-radius: 50px 50px 4px 4px;
  background: rgb(21 33 25/.34);
}

.speedo-arc {
  position: absolute;
  inset: 0;
  border-radius: 46px 46px 0 0;
  background: conic-gradient(from 270deg at 50% 100%,#e4a05f 0deg,#e8724a calc(var(--speed) * 180deg),rgb(26 40 30/.4) calc(var(--speed) * 180deg) 180deg,transparent 180deg);
  -webkit-mask: radial-gradient(circle at 50% 100%,transparent 0 61%,#000 62%);
  mask: radial-gradient(circle at 50% 100%,transparent 0 61%,#000 62%);
}

.speedo-ticks {
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from 270deg at 50% 100%,rgb(235 238 218/.75) 0 1.6deg,transparent 1.6deg 30deg);
  -webkit-mask: radial-gradient(circle at 50% 100%,transparent 0 44%,#000 45% 57%,transparent 58%);
  mask: radial-gradient(circle at 50% 100%,transparent 0 44%,#000 45% 57%,transparent 58%);
}

.speedo-needle {
  position: absolute;
  left: calc(50% - .75px);
  bottom: -1px;
  width: 1.5px;
  height: 17px;
  background: #f2ecd6;
  border-radius: 1px;
  transform-origin: 50% calc(100% - 1px);
  transform: rotate(calc(var(--speed) * 180deg - 90deg));
}

.game-speedo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 5px;
  height: 5px;
  margin: 0 0 -2.5px -2.5px;
  border-radius: 50%;
  background: #f2ecd6;
}

.demo-stage:not([data-mode=pencil]) .pencil-object {
  display: none;
}

h2 {
  font-size: clamp(33px,3.15vw,46px);
  line-height: 1.16;
  letter-spacing: -1.8px;
}

h2 em {
  letter-spacing: -1.5px;
}

.uses-section {
  padding-block: 77px;
  background: #283b40;
  color: #edf0e6;
}

.uses-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* The column titles match the demo's slide titles (THE PENCIL). The colour is
   the site's red with only its OKLCH lightness raised, so that it has the same
   5:1 contrast on this band as var(--red) has on the paper. */
.uses-layout .eyebrow {
  margin-bottom: 22px;
  font-size: 16px;
  letter-spacing: 1px;
  color: #ff8772;
}

/* Each use case leads with the icon of the mode that does it, the same icons
   as the mode tabs above. */
.use-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.use-list li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 20px;
  align-items: start;
  padding-block: 22px;
  border-top: 1px solid #415659;
}

.use-list li:last-child {
  border-bottom: 1px solid #415659;
}

.use-icon {
  width: 42px;
  height: 42px;
  border: 1px solid #677d7e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e39b84;
}

.use-icon .icon {
  width: 19px;
  height: 19px;
}

.use-list h3 {
  font-size: 19px;
  letter-spacing: -.3px;
  line-height: 1.3;
}

.use-list p {
  font-size: 13px;
  line-height: 1.7;
  margin-top: 6px;
  color: #b8c6c2;
}

/* The features are short, so they sit two to a row beside the use cases. */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  border-bottom: 1px solid #415659;
}

.feature-list li {
  display: grid;
  grid-template-columns: 17px 1fr;
  gap: 12px;
  align-items: start;
  padding-block: 20px;
  border-top: 1px solid #415659;
}

.feature-list .icon {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: #e39b84;
}

.feature-list h3 {
  font-size: 16px;
  letter-spacing: -.2px;
  line-height: 1.3;
}

.feature-list p {
  font-size: 13px;
  line-height: 1.6;
  margin-top: 5px;
  color: #b8c6c2;
}

.get-section {
  padding-top: 52px;
  padding-bottom: 98px;
}

.get-title {
  margin-bottom: 28px;
}

/* The two ways in sit side by side: the computer on the left, the device in
   your hand on the right. Each column keeps its own rule and number. */
.get-downloads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

.download-panel {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
  padding-top: 27px;
}

.step-number {
  font: 11px var(--mono);
  color: var(--red);
}

.panel-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: 1.25px;
  color: var(--muted);
}

.panel-icon {
  margin-left: auto;
  color: #7d8776;
  width: 24px;
  height: 24px;
}

.download-panel h3 {
  font-size: 21px;
  letter-spacing: -.4px;
  line-height: 1.25;
  margin-top: 17px;
}

.panel-note {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.85;
  margin-top: 9px;
  max-width: 38ch;
}

.download-list {
  list-style: none;
  margin: 23px 0 0;
  padding: 0;
  max-width: 430px;
}

.download-list li+li {
  margin-top: 9px;
}

.download-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #c6cebd;
  background: var(--paper-deep);
  transition: border-color .18s,color .18s,transform .18s;
}

.download-item img {
  width: 17px;
  height: 17px;
  filter: brightness(0);
  opacity: .7;
}

.download-text strong {
  font-size: 13px;
  font-weight: 500;
}

.download-text small {
  display: block;
  font: 11px var(--mono);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

.download-arrow {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}

a.download-item:hover {
  border-color: var(--red);
  color: var(--red);
  transform: translateY(-2px);
}

a.download-item:hover img {
  opacity: 1;
}

a.download-item:hover .download-arrow {
  color: var(--red);
}

/* Nothing to link to before the release, so the row carries the wait
   instead of a dead button. */
.download-item.is-pending {
  border-style: dashed;
  background: none;
  color: var(--muted);
}

.download-item.is-pending strong {
  color: var(--ink);
}

.availability {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 12px var(--mono);
  color: var(--muted);
  margin-top: 17px;
}

.availability i {
  width: 5px;
  height: 5px;
  background: var(--red);
  border-radius: 50%;
}

.get-pairing {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 34px;
  padding-top: 25px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--muted);
}

footer {
  padding-top: 0;
  padding-bottom: 26px;
}

.footer-top {
  display: flex;
  align-items: center;
  gap: 38px;
  border-top: 1px solid var(--rule);
  padding-top: 32px;
}

.footer-top>a:last-child {
  margin-left: auto;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 30px;
}

.footer-top>a:last-child .icon {
  width: 15px;
  height: 15px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 41px;
  color: var(--muted);
  font-size: 12px;
}

.footer-bottom>div {
  display: flex;
  gap: 24px;
}

.footer-bottom>div>span {
  font-family: var(--mono);
  margin-left: 15px;
}

footer a:hover {
  color: var(--red);
}

.noscript-note {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
}