/* tiny clawd: a product sheet. paper, ink, one red. black is only for screens. */

@font-face {
  font-family: "Archivo";
  src: url(fonts/archivo.woff2) format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Departure Mono";
  src: url(fonts/departure-mono.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #f1eee6;
  --ink: #151515;
  --grey: #5e5a53;
  --red: #c8372d;
  --screen: #0a0a0a;
  --rule: rgba(21, 21, 21, 0.16);
  --lit: #e8f0ff;
  --dim-lit: #8f8f8f;
  --sans: "Archivo", sans-serif;
  --mono: "Departure Mono", monospace;
  --top: 56px;
  --gut: 24px;
  --side: 40px;
  --cols: 12;
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='34' viewBox='0 0 12 17' shape-rendering='crispEdges'%3E%3Cpath fill='%23f1eee6' d='M1 2h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM1 5h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM1 7h1v1h-1zM2 7h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1zM6 7h1v1h-1zM1 8h1v1h-1zM2 8h1v1h-1zM3 8h1v1h-1zM4 8h1v1h-1zM5 8h1v1h-1zM6 8h1v1h-1zM7 8h1v1h-1zM1 9h1v1h-1zM2 9h1v1h-1zM3 9h1v1h-1zM4 9h1v1h-1zM5 9h1v1h-1zM6 9h1v1h-1zM7 9h1v1h-1zM8 9h1v1h-1zM1 10h1v1h-1zM2 10h1v1h-1zM3 10h1v1h-1zM4 10h1v1h-1zM5 10h1v1h-1zM1 11h1v1h-1zM2 11h1v1h-1zM4 11h1v1h-1zM5 11h1v1h-1zM1 12h1v1h-1zM5 12h1v1h-1zM6 12h1v1h-1zM5 13h1v1h-1zM6 13h1v1h-1zM6 14h1v1h-1zM7 14h1v1h-1zM6 15h1v1h-1zM7 15h1v1h-1z'/%3E%3Cpath fill='%23151515' d='M0 0h1v1h-1zM0 1h1v1h-1zM1 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM0 4h1v1h-1zM4 4h1v1h-1zM0 5h1v1h-1zM5 5h1v1h-1zM0 6h1v1h-1zM6 6h1v1h-1zM0 7h1v1h-1zM7 7h1v1h-1zM0 8h1v1h-1zM8 8h1v1h-1zM0 9h1v1h-1zM9 9h1v1h-1zM0 10h1v1h-1zM6 10h1v1h-1zM7 10h1v1h-1zM8 10h1v1h-1zM9 10h1v1h-1zM10 10h1v1h-1zM0 11h1v1h-1zM3 11h1v1h-1zM6 11h1v1h-1zM0 12h1v1h-1zM2 12h1v1h-1zM4 12h1v1h-1zM7 12h1v1h-1zM0 13h1v1h-1zM1 13h1v1h-1zM4 13h1v1h-1zM7 13h1v1h-1zM0 14h1v1h-1zM5 14h1v1h-1zM8 14h1v1h-1zM5 15h1v1h-1zM8 15h1v1h-1zM6 16h1v1h-1zM7 16h1v1h-1z'/%3E%3C/svg%3E") 1 1;
}

* { box-sizing: border-box; }

html { cursor: var(--cursor), auto; scroll-padding-top: var(--top); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, ol, ul, table, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }

h2 {
  font-size: 2.75rem;
  font-weight: 650;
  font-stretch: 112%;
  letter-spacing: -0.015em;
  line-height: 1.08;
}

h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 120ms linear;
}
a:hover { color: var(--red); }
a, button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.film-play:focus-visible { outline-offset: -4px; }

code { font-family: var(--sans); font-weight: 600; font-size: inherit; }

img { image-rendering: pixelated; }

.label {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 22px;
  letter-spacing: 0.02em;
  color: var(--grey);
}

.small { font-size: 0.9375rem; line-height: 1.5; color: var(--grey); }

.btn {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  padding: 14px 22px;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  transition: background-color 120ms linear;
}
.btn:hover { background: #b0301f; color: #fff; }
.btn.line { background: transparent; color: var(--ink); padding: 13px 21px; border: 1px solid var(--ink); }
.btn.line:hover { background: var(--ink); color: var(--paper); }
.actions .btn { display: inline-flex; align-items: center; gap: 10px; }
.gh { width: 18px; height: 18px; flex: none; }

/* the grid: 12 columns, 8 on tablets, 4 on phones */

.wrap {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gut);
  max-width: calc(1200px + 2 * var(--side));
  margin: 0 auto;
  padding: 0 var(--side);
}

@media (max-width: 1199px) { :root { --gut: 20px; } }
@media (max-width: 899px) { :root { --gut: 16px; --side: 24px; --cols: 8; } }
@media (max-width: 599px) { :root { --side: 20px; --cols: 4; } }

/* the grid, drawn as hairlines over everything. multiply keeps it off the black */


.mark { display: block; width: 16px; height: 16px; shape-rendering: crispEdges; }

/* top bar */

.top {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--top);
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}
.top .wrap { height: 100%; align-items: center; }

.brand {
  grid-column: 1 / 6;
  display: flex;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
}
.brand .name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
}
.brand .name:hover { color: var(--ink); }
.by a { color: var(--grey); text-decoration: none; margin-left: 6px; }
.by a:hover { color: var(--red); }

.top nav {
  grid-column: 6 / -1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
}
.top nav a { font-size: 15px; text-decoration: none; }
.top nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink); }
.top nav .build { text-decoration: underline; text-decoration-color: var(--red); font-weight: 600; }

@media (max-width: 1099px) {
  .by a[href*="deepakpopli.in"] { display: none; }
}
@media (max-width: 899px) {
  .brand { grid-column: 1 / 5; }
  .top nav { grid-column: 5 / -1; gap: 16px; }
  .top nav .wide { display: none; }
  body { font-size: 1.0625rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.125rem; }
}
@media (max-width: 599px) {
  .brand { grid-column: 1 / 3; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.2; }
  .by { line-height: 16px; }
  .by a { margin-left: 0; }
  .top nav { grid-column: 3 / -1; }
}

/* the story. the stage holds the 3D Clawd. it sits above the text so in the hero
   the model stands in front of the big type. after the hero it moves to columns 6 to 12 */

.story { position: relative; }

.stage {
  position: sticky;
  top: var(--top);
  height: calc(100vh - var(--top));
  height: calc(100svh - var(--top));
  z-index: 2;
  pointer-events: none;
}
.stage .wrap { height: 100%; }
.stage-box {
  --colw: calc((100% - (var(--cols) - 1) * var(--gut)) / var(--cols));
  grid-column: 1 / -1;
  position: relative;
  height: 100%;
}

#clawd3d {
  position: absolute;
  top: 0;
  height: 100%;
  left: calc(5 * (var(--colw) + var(--gut)));
  width: calc(7 * var(--colw) + 6 * var(--gut));
  display: block;
  opacity: 0;
  transition: opacity 0.6s linear, left 0.7s cubic-bezier(0.65, 0, 0.35, 1), width 0.7s cubic-bezier(0.65, 0, 0.35, 1), top 0.7s cubic-bezier(0.65, 0, 0.35, 1), height 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
#clawd3d.is-ready { opacity: 1; }

.at-hero #clawd3d {
  left: calc(2 * (var(--colw) + var(--gut)));
  width: calc(8 * var(--colw) + 7 * var(--gut));
  top: 7%;
  height: 72%;
}

img.clawd3d-fallback {
  position: absolute;
  left: calc(6 * (var(--colw) + var(--gut)));
  width: auto;
  height: auto;
  max-width: calc(6 * var(--colw) + 5 * var(--gut));
  top: 50%;
  transform: translateY(-50%);
  image-rendering: auto;
}
.at-hero img.clawd3d-fallback { top: 42%; left: 50%; transform: translate(-50%, -50%); }
.fallback {
  position: absolute;
  top: 44%;
  left: 50%;
  width: min(60%, 420px);
  transform: translate(-50%, -50%);
  display: none;
}
html:not(.js) .fallback,
.stage.empty .fallback { display: block; }
.clawd3d-ready .stage .fallback,
.stage:has(img#clawd3d) .fallback { display: none; }
.fallback .body { position: relative; background: var(--red); padding: 9% 8% 12%; }
.fallback .body::before,
.fallback .body::after { content: ""; position: absolute; top: 36%; width: 9%; height: 26%; background: var(--red); }
.fallback .body::before { left: -8%; }
.fallback .body::after { right: -8%; }
.fallback .screen { background: var(--screen); padding: 4%; }
.fallback .screen img, .fallback .screen canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.fallback .legs { display: flex; justify-content: space-between; padding: 0 12%; }
.fallback .legs i { width: 7%; aspect-ratio: 1 / 2.4; background: var(--red); }

.scenes { position: relative; margin-top: calc(var(--top) - 100vh); margin-top: calc(var(--top) - 100svh); }

/* hero */

.hero {
  height: calc(100vh - var(--top));
  height: calc(100svh - var(--top));
  min-height: 640px;
  position: relative;
  overflow: hidden;
}
.hero > .wrap {
  height: 100%;
  grid-template-rows: auto auto 1fr auto auto;
}

.lead {
  grid-column: 1 / 6;
  grid-row: 2;
  margin-top: 56px;
  font-size: 1.25rem;
  line-height: 1.45;
}

.hero-act {
  grid-column: 10 / -1;
  grid-row: 2;
  margin-top: 56px;
  justify-self: end;
  text-align: right;
}
.actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.hero-act .small { margin-top: 12px; }

.wordmark {
  grid-column: 1 / -1;
  grid-row: 5;
  font-size: calc(min(100vw - 2 * var(--side), 1200px) * 0.1915);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.045em;
  line-height: 0.92;
  white-space: nowrap;
  padding-bottom: 0.02em;
  text-align: center;
}

/* key numbers, under the hero */

.strip {
  position: relative;
  z-index: 3;
  background: var(--paper);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.strip dl { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.strip dl div { grid-column: span 2; padding: 12px 0 16px; border-left: 1px solid var(--rule); padding-left: 12px; }
.strip dl div:first-child { border-left: 0; padding-left: 0; }
.strip dd { font-family: var(--mono); font-size: 22px; line-height: 33px; }

/* the story sections: the words on the left, the model on the right */

.scene:not(.hero) {
  position: relative;
  min-height: calc(100vh - var(--top));
  min-height: calc(100svh - var(--top));
  display: flex;
  align-items: center;
  padding: 96px 0;
}
.scene:not(.hero) > .wrap { width: 100%; align-items: start; }

.copy { grid-column: 1 / 6; }
.copy > h2 + p { margin-top: 24px; }
.copy > p + p { margin-top: 16px; }
.copy > p { max-width: 34em; }

.sheet { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.copy > .sheet { margin-top: 32px; }
.sheet th, .sheet td {
  text-align: left;
  vertical-align: baseline;
  padding: 8px 16px 8px 0;
  border-bottom: 1px solid var(--rule);
}
.sheet tr:first-child th, .sheet tr:first-child td { border-top: 1px solid var(--ink); }
.sheet th { font-weight: 400; white-space: nowrap; }
.sheet .key { font-family: var(--mono); font-size: 11px; line-height: 22px; white-space: nowrap; }
.sheet .gap td { padding-top: 24px; }
.sheet .total td { font-weight: 600; border-bottom: 0; border-top: 1px solid var(--ink); }

.pet-btn { display: none; margin-top: 32px; }
.clawd3d-ready .pet-btn { display: inline-block; }

/* bands */

.band, .oled {
  position: relative;
  z-index: 3;
  background: var(--paper);
  padding: 128px 0;
}
.band + .band { border-top: 1px solid var(--rule); }

.band-head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  border-top: 2px solid var(--ink);
  padding-top: 12px;
  margin-bottom: 48px;
  align-items: start;
}
.band-head .label { grid-column: 1 / 3; }
.band-head h2, .band-head h3 { grid-column: 3 / 9; }
.band-head p:not(.label) { grid-column: 9 / -1; color: var(--grey); font-size: 0.9375rem; line-height: 1.5; padding-top: 6px; }

/* the screen band: the real frame data, scaled up pixel by pixel */

.oled { background: var(--screen); color: var(--paper); }
.oled .band-head { border-top-color: var(--paper); }
.oled .label { color: var(--dim-lit); }
.oled .band-head p:not(.label) { color: var(--dim-lit); }
.oled a { color: var(--paper); }

.matrix { grid-column: 1 / -1; }
.matrix-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 8px;
}
.matrix-box canvas {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  display: block;
  image-rendering: pixelated;
}
.mx.bl { grid-row: 3; color: var(--lit); }

.picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 32px;
  padding-top: 12px;
  border-top: 1px solid #2a2a2a;
}
.picker button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--dim-lit);
  text-decoration: none;
}
.picker button:hover { color: var(--lit); }
.picker button.on { color: var(--lit); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }

.band-head.sub { margin-top: 128px; }
.band-head.sub h3 { font-weight: 500; }

.wall-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, 256px);
  justify-content: space-between;
  gap: 32px 24px;
}
.wall-grid figure, .plates figure { margin: 0; }
.wall-grid img, .wall-grid canvas { display: block; width: 256px; height: 128px; background: var(--screen); image-rendering: pixelated; }
.wall-grid figcaption, .plates figcaption { margin-top: 8px; }

/* games: 7 plates and the one rule worth knowing */

.plates {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px var(--gut);
}
.plates img, .plates canvas { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; background: var(--screen); image-rendering: pixelated; }
.plates b { font-weight: 400; color: var(--ink); margin-right: 6px; }
.plate-note { border-top: 2px solid var(--ink); padding-top: 12px; }
.plate-note p:not(.label) { margin-top: 12px; font-size: 1.375rem; line-height: 1.35; font-weight: 500; font-stretch: 112%; }

/* film: a still with a play button. the YouTube player only loads on click */

.player {
  grid-column: 1 / -1;
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--screen);
}
.player iframe, .film-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.film-play { padding: 0; background: var(--screen); }
.film-play img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: auto; }
.play-mark {
  position: absolute;
  left: 24px;
  bottom: 24px;
  width: 72px;
  height: 72px;
  background: var(--red);
  transition: background-color 120ms linear;
}
.play-mark::after {
  content: "";
  position: absolute;
  left: 29px;
  top: 24px;
  border-style: solid;
  border-width: 12px 0 12px 18px;
  border-color: transparent transparent transparent #fff;
}
.film-play:hover .play-mark { background: #b0301f; }
.play-text {
  position: absolute;
  left: 112px;
  bottom: 49px;
  line-height: 22px;
  padding: 0 8px;
  background: var(--paper);
  color: var(--ink);
}
.film-note { grid-column: 1 / -1; margin-top: 16px; }

/* photos. until a file is there, a crossed box says what goes in it */

.photo { display: flex; flex-direction: column; }
.photo figcaption { margin-top: 8px; }
.frame { position: relative; flex: 1; }
.r32 { aspect-ratio: 3 / 2; }
.r45 { aspect-ratio: 4 / 5; }
.frame img, .frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: auto;
}
.frame:not(:has(img, video)) {
  border: 1px solid var(--rule);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 100M100 0L0 100' stroke='rgba(21,21,21,0.12)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.ph {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 12px;
  background: var(--paper);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 22px;
  color: var(--grey);
}
.frame:has(img, video) .ph { visibility: hidden; }

.photos .photo { grid-column: 7 / 10; }
.photos .photo.big { grid-column: 1 / 7; }
.photos .photo:last-child { grid-column: 10 / 13; }
.photos .r45 { aspect-ratio: auto; }

/* specifications and the parts list, side by side */

.spec-l { grid-column: 1 / 7; }
.spec-r { grid-column: 8 / -1; }
.sheet.spec th { width: 34%; }
.knoll { margin-top: 48px; }

/* build: three numbered steps */

.steps { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.steps li { grid-column: span 4; border-top: 1px solid var(--ink); padding-top: 12px; }
.steps .num { font-family: var(--mono); font-size: 22px; line-height: 33px; color: var(--red); }
.steps h3 { margin-top: 24px; }
.steps h3 + p { margin-top: 12px; font-size: 1rem; line-height: 1.55; }

.install { grid-column: 1 / -1; margin-top: 64px; }
.install + .install { margin-top: 48px; }
.install > .label { border-top: 2px solid var(--ink); padding-top: 12px; margin-bottom: 16px; }
.install > .small { margin-top: 16px; max-width: 46em; }

.code {
  position: relative;
  background: var(--screen);
  color: var(--lit);
}
.code pre {
  margin: 0;
  padding: 24px 112px 24px 24px;
  white-space: pre-wrap;
  word-break: break-all;
  font-family: var(--mono);
  font-size: 22px;
  line-height: 33px;
}
.code pre code { font-family: inherit; font-weight: 400; }
.code pre code::before { content: "$ "; color: var(--dim-lit); }
.copy-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 22px;
  color: var(--paper);
  background: var(--screen);
  border: 1px solid var(--dim-lit);
  border-radius: 0;
  padding: 4px 12px;
}
.copy-btn:hover { border-color: var(--paper); }

/* the prompt is words, not a shell line: paper, ink, a hairline box */
.code.prompt { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.code.prompt pre { font-family: var(--mono); font-size: 13px; line-height: 22px; word-break: normal; overflow-wrap: anywhere; }
.code.prompt pre code::before { content: none; }
.code.prompt .copy-btn { color: var(--ink); background: var(--paper); border-color: var(--ink); }
.code.prompt .copy-btn:hover { color: var(--red); border-color: var(--red); }

/* footer: a colophon */

.foot {
  position: relative;
  z-index: 3;
  background: var(--paper);
  border-top: 2px solid var(--ink);
  padding: 48px 0 32px;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.foot-mark { grid-column: 1 / 4; }
.maker { grid-column: 5 / 9; }
.credits { grid-column: 9 / -1; }
.foot-brand { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 1.0625rem; }
.foot-mark .small { margin-top: 12px; }
.foot .label { margin-bottom: 8px; }
.maker-name { font-size: 2rem; font-weight: 650; font-stretch: 112%; letter-spacing: -0.015em; line-height: 1.1; }
.maker-name a { text-decoration: none; }
.maker-name a:hover { text-decoration: underline; text-decoration-color: var(--red); }
.maker-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 12px; }
.maker-links.label { margin-bottom: 0; }
.maker .small { margin-top: 8px; }
.foot-line {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 64px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}
.foot-line.label { margin-bottom: 0; }

/* tablets and phones: the model sits on top, the text scrolls under it */

@media (max-width: 899px) {
  .stage {
    height: 42vh;
    height: 42svh;
    z-index: 4;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
  #clawd3d, .at-hero #clawd3d { left: 0; width: 100%; top: 0; height: 100%; }
  .scenes { margin-top: 0; z-index: 1; }

  .hero { height: auto; min-height: 0; overflow: visible; }
  .hero > .wrap { grid-template-rows: none; }
  .wordmark { grid-row: 2; font-size: calc((100vw - 2 * var(--side)) * 0.19); margin: 32px 0 0; text-align: left; }
  .lead { grid-row: 3; grid-column: 1 / -1; font-size: 1.1875rem; margin-top: 24px; }
  .hero-act { grid-row: 4; grid-column: 1 / -1; justify-self: start; text-align: left; margin-top: 24px; }
  .actions { justify-content: flex-start; }

  .strip { z-index: 5; }
  .strip dl div { grid-column: span 4; border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
  .strip dl div:nth-child(-n + 2) { border-top: 0; }
  .strip dd { font-size: 11px; line-height: 22px; }

  .scene:not(.hero) { display: block; min-height: 0; padding: 64px 0 32px; }
  .copy { grid-column: 1 / -1; }

  .band, .oled { z-index: 5; padding: 64px 0; }
  .band-head .label, .band-head h2, .band-head h3, .band-head p:not(.label) { grid-column: 1 / -1; }
  .band-head h2, .band-head h3 { margin-top: 12px; }
  .band-head p:not(.label) { margin-top: 16px; }
  .band-head.sub { margin-top: 64px; }

  .wall-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .wall-grid img, .wall-grid canvas { width: 100%; height: auto; }
  /* scaled down, so blend the dots instead of dropping every other one */
  .wall-grid img, .wall-grid canvas, .plates img, .plates canvas { image-rendering: auto; }
  .plates { grid-template-columns: 1fr 1fr; gap: 24px 16px; }

  .play-mark { left: 16px; bottom: 16px; width: 56px; height: 56px; }
  .play-mark::after { left: 22px; top: 18px; border-width: 10px 0 10px 15px; }
  .play-text { left: 84px; bottom: 33px; }
  .photos .photo.big { grid-column: 1 / -1; margin-bottom: 24px; }
  .photos .photo { grid-column: 1 / 5; }
  .photos .photo:last-child { grid-column: 5 / -1; }
  .photos .r45 { aspect-ratio: 4 / 5; }
  .ph { white-space: normal; text-align: center; width: 80%; }

  .spec-l, .spec-r { grid-column: 1 / -1; }
  .spec-r { margin-top: 48px; }
  .steps li { grid-column: 1 / -1; margin-bottom: 32px; }
  .install { margin-top: 32px; }
  .code pre { font-size: 11px; line-height: 22px; padding: 16px 80px 16px 16px; }
  .code.prompt pre { font-size: 11px; padding: 56px 16px 16px; }
  .copy-btn { top: 16px; right: 16px; }

  .foot .wrap > div { grid-column: 1 / -1; margin-top: 32px; }
  .foot .wrap > div:first-child { margin-top: 0; }
  .foot-line { flex-direction: column; gap: 0; }
}

@media (max-width: 599px) {
  .photos .photo { grid-column: 1 / 3; }
  .photos .photo:last-child { grid-column: 3 / -1; }
  .strip dl div { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  #clawd3d, a, .btn { transition: none; }
}