/* style.css — layout and type. the moving parts live in sky.css. */

@font-face {
  font-family: skypx;
  src: url(fonts/skypx.woff2) format("woff2");
  font-display: block;
}

:root {
  --bg: #070615;
  --bg-2: #0b0920;
  --panel: #0e0b26;
  --line: #2a2558;
  --ink: #f4eeff;
  --dim: #b3abd6;
  --faint: #7a73a6;
  --pink: #ff6fc4;
  --blue: #62b6ff;
  --vio: #a88bff;
  --pixel: skypx, ui-monospace, monospace;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --gutter: clamp(16px, 4vw, 40px);
  /* a pixel-rounded frame, as a nine-slice border image; one svg unit is two css pixels */
  --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges' fill='%232a2558'%3E%3Cpath d='M2 0h3v1h-3zM1 1h1v1h-1zM5 1h1v1h-1zM0 2h1v3h-1zM6 2h1v3h-1zM1 5h1v1h-1zM5 5h1v1h-1zM2 6h3v1h-3z'/%3E%3C/svg%3E");
  --frame-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges' fill='%23ff6fc4'%3E%3Cpath d='M2 0h3v1h-3zM1 1h1v1h-1zM5 1h1v1h-1zM0 2h1v3h-1zM6 2h1v3h-1zM1 5h1v1h-1zM5 5h1v1h-1zM2 6h3v1h-3z'/%3E%3C/svg%3E");
  --frame-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges' fill='%2362b6ff'%3E%3Cpath d='M2 0h3v1h-3zM1 1h1v1h-1zM5 1h1v1h-1zM0 2h1v3h-1zM6 2h1v3h-1zM1 5h1v1h-1zM5 5h1v1h-1zM2 6h3v1h-3z'/%3E%3C/svg%3E");
  /* a one-pixel checkerboard, for dithered fills */
  --dither: repeating-conic-gradient(currentColor 0 25%, transparent 0 50%) 0 0 / 4px 4px;
  color-scheme: dark;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.65 var(--mono);
  overflow-x: clip;
}

a { color: inherit }
p a, .lede a { color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 3px }
p a:hover, .lede a:hover { color: var(--pink) }
::selection { background: var(--pink); color: var(--bg) }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px }
h1, h2, h3 { font-weight: 400 }
code { font: inherit; color: var(--vio) }
ul { list-style: none; margin: 0; padding: 0 }

.wrap { width: min(1120px, 100% - 2 * var(--gutter)); margin-inline: auto }

.skip {
  position: fixed;
  z-index: 30;
  left: 12px;
  top: -60px;
  padding: 10px 14px;
  background: var(--pink);
  color: var(--bg);
  font: 16px/1 var(--pixel);
}
.skip:focus { top: 12px }

/* ------------------------------------------------------------------------------------ nav -- */

.top {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  display: flex;
  gap: 4px 22px;
  align-items: center;
  padding: 14px var(--gutter);
  font: 16px/1 var(--pixel);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.top::-webkit-scrollbar { display: none }
.top::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 -18px;
  background: linear-gradient(to bottom, rgb(7 6 21 / .92) 55%, rgb(7 6 21 / 0));
  pointer-events: none;
}
.top a {
  flex: none;
  text-decoration: none;
  color: var(--ink);
  padding: 8px 2px;
  text-shadow: 2px 2px 0 rgb(5 4 16 / .85);
}
.top a:hover { color: var(--pink) }
.top .brand { margin-right: auto; padding-right: 14px; color: var(--pink) }
.top .ext { color: var(--blue) }

/* how far down the page you are, in lamps */
.progress {
  position: fixed;
  z-index: 21;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(to right, var(--blue), var(--vio), var(--pink));
  -webkit-mask: repeating-linear-gradient(to right, #000 0 6px, transparent 0 8px);
  mask: repeating-linear-gradient(to right, #000 0 6px, transparent 0 8px);
  transform-origin: 0 0;
  scale: 0 1;
}

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

.intro {
  position: absolute;
  z-index: 4;
  left: calc(var(--tc) * var(--cell));
  top: calc((var(--tr) + 21.5) * var(--cell));
  width: min(calc(100% - 2 * var(--tc) * var(--cell)), 540px);
  padding: 14px 16px 15px;
  background: rgb(7 6 21 / .66);
  border-left: 4px solid var(--pink);
  pointer-events: none;
}
.intro p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink) }
.intro .handle { margin-bottom: 10px; font: 24px/1 var(--pixel); color: var(--blue) }
/* on short, wide windows the words go beside the wordmark instead of under it */
@media (min-aspect-ratio: 2/1) {
  .intro { left: calc((var(--tc) + 38) * var(--cell)); top: calc((var(--tr) + 6) * var(--cell)); width: min(calc(100% - (var(--tc) + 44) * var(--cell)), 460px) }
}

.down {
  position: absolute;
  z-index: 4;
  right: calc(var(--tc) * var(--cell));
  bottom: 14px;
  padding: 6px 2px;
  font: 16px/1 var(--pixel);
  color: var(--dim);
  text-decoration: none;
  animation: bob 1.6s steps(2) infinite;
}
.down:hover { color: var(--pink) }
@keyframes bob { 50% { translate: 0 4px } }

@counter-style pad5 { system: extends decimal; pad: 5 "0" }
@counter-style pad2 { system: extends decimal; pad: 2 "0" }
.hud {
  position: absolute;
  z-index: 4;
  left: calc(var(--tc) * var(--cell));
  right: calc(var(--tc) * var(--cell));
  bottom: 18px;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  font: 16px/1 var(--pixel);
  color: var(--faint);
  pointer-events: none;
  counter-reset: strips var(--n) mx round(var(--mx), 1) my round(var(--my), 1);
}
.hud b { font-weight: inherit; color: var(--pink) }
.hud-strips::after { content: counter(strips); color: var(--dim) }
.hud-frame { animation: sky-t 3600s steps(36000) infinite; counter-reset: frame round(calc(var(--t) * 10), 1) }
.hud-frame::after { content: counter(frame, pad5); color: var(--dim) }
.hud-ptr::after { content: counter(mx, pad2) "," counter(my, pad2); color: var(--dim) }
@media (hover: none) { .hud-ptr { display: none } }

/* --------------------------------------------------------------------------------- ticker -- */

.ticker {
  overflow: clip;
  border-block: 2px solid var(--line);
  background: var(--bg-2);
  font: 16px/1 var(--pixel);
  color: var(--dim);
}
.ticker p {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 14px 0;
  animation: ticker 60s linear infinite;
}
.ticker span { padding-inline: 18px 0; white-space: nowrap }
.ticker span::after { content: "✦"; margin-left: 18px; color: var(--pink) }
.ticker span:nth-child(even)::after { color: var(--blue) }
@keyframes ticker { to { translate: -50% 0 } }

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

section { padding-block: clamp(72px, 10vw, 132px) }
section + section { border-top: 2px solid var(--line) }

.head { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: start; margin-bottom: clamp(32px, 5vw, 56px) }
.head .no {
  grid-row: span 2;
  margin: 0;
  padding: 8px 8px 4px;
  font: 32px/1 var(--pixel);
  color: var(--bg);
  background: var(--pink);
  box-shadow: 4px 4px 0 var(--blue);
}
.head h2 {
  margin: 0;
  font: 32px/1.25 var(--pixel);
  text-wrap: balance;
  text-shadow: 4px 4px 0 #2c2468;
}
.head .lede { margin: 6px 0 0; max-width: 62ch; color: var(--dim) }

/* about */
.about { padding-block: clamp(64px, 9vw, 112px) }
.hi { margin: 0 0 28px; font: 48px/1.25 var(--pixel); text-shadow: 6px 6px 0 #2c2468 }
.hi span { color: var(--pink) }
.about-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px 56px; align-items: start }
.about-grid p { margin: 0; color: var(--dim) }
.about-grid .lead { font-size: clamp(18px, 2.1vw, 23px); line-height: 1.5; color: var(--ink) }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(40px, 6vw, 64px) }
.facts a {
  display: block;
  height: 100%;
  padding: 16px 16px 14px;
  border: 6px solid transparent;
  border-image: var(--frame) 3 / 6px;
  background: var(--panel) padding-box;
  text-decoration: none;
}
.facts b {
  display: block;
  font: 40px/1.1 var(--pixel);
  font-weight: 400;
  color: transparent;
  background: linear-gradient(100deg, var(--blue), #e9e2ff 55%, var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
}
.facts small { font-size: 24px }
.facts span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--dim) }
.facts a:hover { border-image-source: var(--frame-pink) }
.facts a:hover span { color: var(--ink) }

/* ---------------------------------------------------------------------------------- tiles -- */

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px }
.tile {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 6px solid transparent;
  border-image: var(--frame) 3 / 6px;
  background: var(--panel) padding-box;
  min-width: 0;
}
.tile.wide { grid-column: 1 / -1; grid-template: none / minmax(0, 5fr) minmax(0, 6fr) }
.tile:hover { border-image-source: var(--frame-blue) }
.tile:target { border-image-source: var(--frame-pink) }

.screen {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 250px;
  padding: 26px 22px;
  background:
    linear-gradient(to right, rgb(42 37 88 / .35) 1px, transparent 0) 0 0 / 15px 15px,
    linear-gradient(to bottom, rgb(42 37 88 / .35) 1px, transparent 0) 0 0 / 15px 15px,
    #06050f;
}
.screen.flush { padding: 0; display: block; place-items: normal; min-height: 0 }
.tile.wide .screen { min-height: 300px }

.info { padding: 22px 24px 24px; min-width: 0 }
.info h3 { margin: 0 0 12px; font: 32px/1.1 var(--pixel); overflow-wrap: anywhere }
.info p { margin: 0 0 14px; color: var(--dim) }
.info .note { margin: 14px 0 0; font-size: 12.5px; color: var(--faint) }
.kicker { margin: 0 0 10px !important; font: 16px/1 var(--pixel); color: var(--pink) !important }

.spec { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 18px; font-size: 13px; color: var(--dim) }
.spec b { font: 16px/1 var(--pixel); font-weight: 400; color: var(--blue); margin-right: 3px }

.links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 18px 0 0 !important }
.btn {
  display: inline-block;
  padding: 9px 12px 7px;
  font: 16px/1 var(--pixel);
  color: var(--bg);
  background: var(--pink);
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--blue);
  transition: translate .08s, box-shadow .08s;
}
.btn:hover { color: var(--bg); translate: -1px -1px; box-shadow: 5px 5px 0 var(--blue) }
.btn:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--blue) }
.src { font: 16px/1 var(--pixel); color: var(--dim) !important; text-decoration-thickness: 2px; text-underline-offset: 4px }
.src:hover { color: var(--ink) !important }

.cap {
  margin: 0;
  font: 16px/1 var(--pixel);
  color: var(--faint);
}

/* ----------------------------------------------------------------------------------- rows -- */

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 48px; align-items: start }

.rows { border-top: 2px solid var(--line) }
.rows.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px }
.rows li { border-bottom: 2px solid var(--line) }
.rows a {
  position: relative;
  display: grid;
  gap: 8px;
  height: 100%;
  padding: 20px 34px 18px 0;
  text-decoration: none;
  transition: padding .12s;
}
.rows a::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  color: var(--pink);
  background: var(--dither);
  transition: width .12s;
}
.rows a::after {
  content: "↗";
  position: absolute;
  right: 4px;
  top: 22px;
  font: 24px/1 var(--pixel);
  color: var(--line);
}
.rows a:hover { padding-left: 22px; padding-right: 12px }
.rows a:hover::before { width: 10px }
.rows a:hover::after { color: var(--pink) }
.rows h3 { margin: 0; font: 24px/1.1 var(--pixel); overflow-wrap: anywhere }
.rows a:hover h3 { color: var(--pink) }
.rows p { margin: 0; font-size: 14px; color: var(--dim) }
.tags { display: flex; flex-wrap: wrap; gap: 6px 14px; align-self: end; font: 16px/1 var(--pixel); color: var(--faint) }
.tags i { font-style: normal }
.tags i::before { content: "▸"; margin-right: 4px; color: var(--blue) }

/* the device with the little oled */
.device { margin: 0; position: sticky; top: 92px }
.device figcaption { margin-top: 16px; font-size: 13px; color: var(--faint) }

/* ----------------------------------------------------------------------------- the feature -- */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 28px 44px;
  margin-bottom: 36px;
  padding: clamp(22px, 4vw, 40px);
  border: 6px solid transparent;
  border-image: var(--frame-pink) 3 / 6px;
  background:
    radial-gradient(90% 120% at 0% 0%, rgb(255 111 196 / .13), transparent 60%),
    radial-gradient(80% 120% at 100% 100%, rgb(98 182 255 / .12), transparent 60%),
    var(--panel);
  background-clip: padding-box;
}
.feature h3 { margin: 0 0 14px; font: clamp(32px, 5vw, 48px)/1.1 var(--pixel); overflow-wrap: anywhere; text-shadow: 4px 4px 0 #2c2468 }
.feature-text p { margin: 0 0 14px; max-width: 52ch; color: var(--dim) }
.feature-text p:nth-of-type(2) { font-size: 17px; color: var(--ink) }
.feature-side { display: grid; gap: 14px; align-content: center }
.feature-side a { display: block; padding: 14px 16px; background: rgb(7 6 21 / .55); text-decoration: none; border-left: 4px solid var(--blue) }
.feature-side a:hover { border-left-color: var(--pink) }
.feature-side b { display: block; margin-bottom: 6px; font: 16px/1 var(--pixel); font-weight: 400; color: var(--ink) }
.feature-side span { font-size: 13px; color: var(--dim) }

/* ---------------------------------------------------------------------------------- chips -- */

.chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
.chips a {
  display: block;
  height: 100%;
  padding: 16px;
  border: 6px solid transparent;
  border-image: var(--frame) 3 / 6px;
  background: var(--panel) padding-box;
  text-decoration: none;
}
.chips a:hover { border-image-source: var(--frame-blue) }
.chips b { display: block; margin-bottom: 8px; font: 24px/1.1 var(--pixel); font-weight: 400 }
.chips a:hover b { color: var(--blue) }
.chips span { font-size: 13px; color: var(--dim) }
.more { margin: 28px 0 0; font: 16px/1 var(--pixel) }
.more a { color: var(--blue) }

/* --------------------------------------------------------------------------------- footer -- */

.foot {
  padding-block: clamp(64px, 9vw, 112px) 48px;
  border-top: 2px solid var(--line);
  background:
    radial-gradient(60% 80% at 15% 0%, rgb(98 182 255 / .1), transparent 70%),
    radial-gradient(60% 80% at 85% 0%, rgb(255 111 196 / .1), transparent 70%),
    var(--bg-2);
}
.foot h2 { margin: 0 0 32px; font: 48px/1.25 var(--pixel); text-shadow: 6px 6px 0 #2c2468 }
.foot h2 span { color: var(--pink) }
.contact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.45fr); gap: 14px }
.contact a {
  display: block;
  height: 100%;
  padding: 14px 14px 12px;
  background: var(--bg);
  border-bottom: 4px solid var(--line);
  text-decoration: none;
  transition: translate .08s;
}
.contact a:hover { border-bottom-color: var(--pink); translate: 0 -2px }
.contact b { display: block; margin-bottom: 6px; font: 16px/1 var(--pixel); font-weight: 400; color: var(--pink) }
.contact li:nth-child(even) b { color: var(--blue) }
.contact span { font-size: 13px; color: var(--dim); overflow-wrap: anywhere }
.colophon { margin-top: 56px; max-width: 78ch; font-size: 13px; color: var(--faint) }
.colophon b { font: 16px/1 var(--pixel); font-weight: 400; color: var(--dim) }
.colophon .tiny { margin-top: 20px; font: 16px/1 var(--pixel) }
.colophon .tiny a { color: var(--blue) }

/* ----------------------------------------------------------------------------- responsive -- */

@media (max-width: 900px) {
  .about-grid, .split, .feature, .tile.wide { grid-template-columns: minmax(0, 1fr) }
  .tile.wide { grid-template: auto 1fr / minmax(0, 1fr) }
  .facts, .chips { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .contact { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .contact li:last-child { grid-column: span 2 }
  .rows.two { grid-template-columns: minmax(0, 1fr) }
  .device { position: static }
}
@media (max-width: 640px) {
  .tiles { grid-template-columns: minmax(0, 1fr) }
  .head { grid-template-columns: minmax(0, 1fr) }
  .head .no { grid-row: auto; justify-self: start; font-size: 24px; padding: 6px 6px 3px }
  .head h2 { font-size: 24px; text-shadow: 3px 3px 0 #2c2468 }
  .hi, .foot h2 { font-size: 32px; text-shadow: 4px 4px 0 #2c2468 }
  .facts b { font-size: 24px }
  .facts small { font-size: 16px }
  .facts a { padding: 12px 10px 10px }
  .feature h3 { font-size: 24px; text-shadow: 3px 3px 0 #2c2468 }
  .info h3 { font-size: 24px }
  .contact { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .contact li:last-child { grid-column: 1 / -1 }
  .down { display: none }
  .chips { grid-template-columns: minmax(0, 1fr) }
  .top { gap: 4px 16px }
  .intro p { font-size: 15px }
}

/* --------------------------------------------------------------------- scroll-driven extras -- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress { animation: progress linear both; animation-timeline: scroll(root) }
    .tile, .feature, .facts li, .rows li, .chips li, .head {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
  }
}
/* the nav lights the section that is crossing the middle of the window: each section is a
   named view timeline squeezed to that one line, and its link plays for exactly that long  */
@supports (animation-timeline: view()) {
  body { timeline-scope: --s-css, --s-hardware, --s-good, --s-models, --s-misc }
  #css { view-timeline: --s-css; view-timeline-inset: 50% }
  #hardware { view-timeline: --s-hardware; view-timeline-inset: 50% }
  #good { view-timeline: --s-good; view-timeline-inset: 50% }
  #models { view-timeline: --s-models; view-timeline-inset: 50% }
  #misc { view-timeline: --s-misc; view-timeline-inset: 50% }
  .top a[href="#css"] { animation: nav-on linear; animation-timeline: --s-css }
  .top a[href="#hardware"] { animation: nav-on linear; animation-timeline: --s-hardware }
  .top a[href="#good"] { animation: nav-on linear; animation-timeline: --s-good }
  .top a[href="#models"] { animation: nav-on linear; animation-timeline: --s-models }
  .top a[href="#misc"] { animation: nav-on linear; animation-timeline: --s-misc }
}
@keyframes nav-on { from, to { color: var(--pink); box-shadow: 0 2px 0 var(--pink) } }
@keyframes progress { to { scale: 1 1 } }
@keyframes rise { from { opacity: 0; translate: 0 26px } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .ticker p, .hud-frame, .down { animation: none }
  .hud-frame { --t: 47 }
  .btn, .contact a, .rows a, .rows a::before { transition: none }
}