/* 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 comment at the top of index2.html.

   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;
  --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:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 56px;
  right: 56px;
  height: 1px;
  background: var(--rule);
}

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

.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;
}

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

.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  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: 73px;
  padding-bottom: 46px;
  display: grid;
  grid-template-columns: .9fr 1.25fr;
  gap: 18px;
  align-items: center;
  min-height: 638px;
}

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

.hero h1 {
  font-size: clamp(42px,4.35vw,65px);
  letter-spacing: -3.4px;
  line-height: 1.08;
  margin-top: 29px;
  white-space: nowrap;
}

.hero h1 em {
  color: var(--red);
  letter-spacing: -3px;
}

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 37px;
  padding: 15px 21px;
  font-size: 12px;
  transition: background .18s,transform .18s;
}

.button:hover {
  transform: translateY(-2px);
}

.button-ink {
  background: var(--ink);
  color: var(--paper);
  margin-top: 31px;
}

.button-ink:hover {
  background: #3c4749;
}

.button .icon {
  width: 17px;
  height: 17px;
}

.hero-footnote {
  font-size: 10px;
  margin-top: 15px;
  color: var(--muted);
}

/* 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 {
  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: 9px;
  letter-spacing: 1px;
  color: var(--muted);
}

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

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

.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%;
}

.computer-label {
  position: absolute;
  top: calc(44% + 28px);
  right: 6px;
  font-size: 11px;
}

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

.connection-trace {
  position: absolute;
  top: 61px;
  left: 21%;
  width: 78px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.connection-trace span {
  height: 20px;
  border-left: 1px dashed #bbc0b3;
}

.connection-trace .icon {
  width: 16px;
  height: 16px;
  color: #879180;
}

.tablet {
  position: absolute;
  left: 0;
  bottom: 68px;
  width: 85%;
  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;
}

.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: 7%;
  bottom: 54px;
  width: 11px;
  height: 233px;
  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: rotate(22deg);
  transform-origin: bottom center;
  pointer-events: none;
}

.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;
}

.tablet-label {
  position: absolute;
  left: 17%;
  bottom: 26px;
  font-size: 13px;
}

.tablet-label span {
  display: inline-block;
  transform: translate(4px,-10px);
  font-family: Inter,sans-serif;
  color: #8b9583;
}

.demo-caption {
  position: absolute;
  bottom: -17px;
  left: 0;
  right: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 9px;
  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: 9px;
}

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

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

#sample-stroke {
  margin-left: auto;
}

#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: 9px;
  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: 9px;
  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: 11px;
  color: var(--muted);
  min-height: 65px;
}

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

#mode-description>span {
  font-family: var(--mono);
  font-size: 9px;
  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;
}

.section-number {
  color: var(--red);
  margin-right: 5px;
}

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

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

.connection-section {
  background: #e9ebe1;
  border-top: 1px solid #dce0d4;
  border-bottom: 1px solid #dce0d4;
  padding-block: 77px;
}

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

.connection-copy h2 {
  margin-top: 25px;
}

.connection-copy>p:not(.eyebrow) {
  font-size: 12px;
  color: #606b5c;
  line-height: 1.85;
  margin-top: 22px;
}

/* The transport is a real choice, so the control sits under the drawing it
   changes and is large enough to read as the next thing to do. */
.transport-switch {
  position: relative;
  display: inline-flex;
  border: 1px solid #aeb8a5;
  padding: 5px;
  margin-top: 30px;
  margin-right: calc(var(--computer-w) - var(--tablet-w));
}

/* One highlight travels between the two transports, so the switch reads as a
   single moving choice. Both halves are the same width, thus 100% is one half.
   The pressed button is the only state: nothing can fall out of step with it. */
.transport-thumb {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc(50% - 5px);
  background: var(--ink);
  transition: transform .46s cubic-bezier(.65,.03,.31,1);
}

.transport-switch:has(button[data-transport=usb][aria-pressed=true]) .transport-thumb {
  transform: translateX(100%);
}

/* Without :has() the highlight cannot follow, so the button carries it. */
@supports not selector(:has(*)) {
  .transport-thumb {
    display: none;
  }

  .transport-switch button[aria-pressed=true] {
    background: var(--ink);
  }
}

.transport-switch button {
  position: relative;
  flex: 1;
  min-width: 152px;
  background: transparent;
  padding: 13px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-size: 14px;
  letter-spacing: .2px;
  transition: color .2s ease .12s;
}

.transport-switch button[aria-pressed=true] {
  color: var(--paper);
}

.transport-switch .icon {
  width: 19px;
  height: 19px;
}

.connection-figure {
  --tablet-w: 66px;
  --computer-w: 128px;
  text-align: center;
  padding: 25px 13px 0;
}

.connection-drawing {
  height: 122px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.line-tablet {
  width: var(--tablet-w);
  height: 91px;
  border: 1.5px solid #5c6d58;
  border-radius: 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.line-tablet:before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid #b2bca8;
  border-radius: 3px;
}

.line-tablet i {
  position: absolute;
  bottom: 9px;
  width: 15px;
  height: 2px;
  background: #8a9b7f;
}

.mini-brand {
  display: block;
  width: 24px;
  height: 24px;
  background: #607456;
  mask: url("../icons/tinypad-logo.svg") center/contain no-repeat;
}

.line-computer {
  width: var(--computer-w);
  height: 83px;
  border: 1.5px solid #5c6d58;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: -15px;
}

.line-computer:before {
  content: "";
  position: absolute;
  inset: 5px 5px 11px;
  border: 1px solid #b2bca8;
  border-radius: 1px;
}

.line-computer:after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  border-bottom: 1px solid #5c6d58;
}

.line-computer i {
  position: absolute;
  width: 1px;
  height: 17px;
  background: #5c6d58;
  bottom: -17px;
}

.line-computer i:after {
  content: "";
  position: absolute;
  width: 44px;
  height: 1px;
  background: #5c6d58;
  left: -22px;
  bottom: 0;
}

.link-path {
  flex: 1;
  max-width: 190px;
  margin: 0 8px;
  position: relative;
  display: flex;
  align-items: center;
  color: #809274;
}

/* Wi-Fi is arcs through the air; USB is one unbroken line, the cable. */
.link-signal {
  width: 100%;
  height: 58px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.link-signal circle {
  fill: currentColor;
  stroke: none;
}

/* The waves and the cable occupy the same box, so one crosses into the other
   over the time the highlight takes to travel. */
.signal-waves,
.signal-cable {
  transition: opacity .42s ease;
}

/* The label is text, not linework: the old one leaves before the new one
   arrives, so the two never overlap as letters. */
.link-label b {
  transition: opacity .2s ease .22s;
}

.connection-figure[data-transport=wifi] .signal-cable,
.connection-figure[data-transport=usb] .signal-waves {
  opacity: 0;
}

.connection-figure[data-transport=wifi] .link-label [data-for=usb],
.connection-figure[data-transport=usb] .link-label [data-for=wifi] {
  opacity: 0;
  transition: opacity .18s ease;
}

.signal-cable {
  stroke-width: 2.5;
}

.link-label {
  position: absolute;
  bottom: calc(50% + 22px);
  left: 0;
  right: 0;
  height: 1.6em;
  font: 8px var(--mono);
  letter-spacing: 1.3px;
  color: #5b7050;
}

.link-label b {
  position: absolute;
  left: 0;
  right: 0;
  font-weight: 400;
}

.connection-device-labels {
  display: flex;
  justify-content: space-between;
  font: 9px var(--mono);
  color: #63725a;
  padding: 9px 3px 0;
}

.connection-figure>p {
  font-size: 11px;
  color: #576650;
  line-height: 1.85;
  margin-top: 28px;
}

.connection-figure>a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  margin-top: 15px;
  border-bottom: 1px solid #a3b198;
  padding-bottom: 4px;
}

.connection-figure>a .icon {
  width: 13px;
  height: 13px;
}

.connection-figure>a:hover {
  color: var(--red);
}

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

/* 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: 10px var(--mono);
  color: var(--red);
}

.panel-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 10px 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: 11px;
  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: 9px 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: 9px 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: 11px;
  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: 11px;
  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: 9px;
}

.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;
}