/* CLATTER Pocket's site. CLATTER's 1-bit language at the scale of a web page: a black desktop,
   heavy frames, titles in tabs with a slanted edge, dither, inverted selection. The one colour
   is the amber of the firmware's start screen (0xFBE0). */

@font-face { font-family: 'Silkscreen'; src: url('assets/fonts/silkscreen-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; src: url('assets/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; src: url('assets/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); font-display: swap; }

:root {
  color-scheme: dark;
  --desktop: #000;
  --panel: #0c0c0c;
  --ink: #f4f4f0;
  --dim: #b4b4ae;
  --line: #5c5c58;
  --amber: #ff9a1f;
  --paper: #eef2ea;
  --paper-ink: #0a0a0a;
  --frame: 3px;
  --gutter: clamp(16px, 4vw, 48px);
  --pixel: 'Silkscreen', ui-monospace, Menlo, Consolas, monospace;
  --prose: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%23fff'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23fff'/%3E%3C/svg%3E");
  --grey: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%23fff'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23fff'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--desktop); scroll-behavior: smooth; scroll-padding-top: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--desktop); color: var(--ink); font: 400 17px/1.55 var(--prose); overflow-wrap: break-word; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

h1, h2, h3, p, ol, ul, dl, figure { margin: 0; }
p + p { margin-top: .7em; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--amber); }
b { font-weight: 600; }
code { font: .9em ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }
kbd { display: inline-block; padding: 0 .4em; border: 1px solid var(--line); border-bottom-width: 2px; font: .82em/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; }
img { max-width: 100%; height: auto; image-rendering: pixelated; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dim { color: var(--dim); }

.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 10; padding: 8px 12px; background: var(--paper); color: var(--paper-ink); }
.skip:focus { top: 8px; }

/* the status line stays in the page's first breath on every page */
.strip { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; padding: 8px var(--gutter); background: var(--amber); color: #000; font-size: 15px; }
.strip b { font: 400 14px/1.4 var(--pixel); }
.strip a { color: #000; margin-left: auto; }

.top { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; justify-content: space-between; padding: 14px var(--gutter); border-bottom: var(--frame) solid var(--ink); }
.brand { font: 400 18px/1.3 var(--pixel); text-decoration: none; }
.top nav { display: flex; flex-wrap: wrap; gap: 2px 18px; font-size: 15px; }
.top nav a { padding: 6px 0; text-decoration: none; }
.top nav a:hover { text-decoration: underline; }

main > section, .hero { padding: clamp(40px, 7vw, 88px) var(--gutter) 0; max-width: 1280px; margin: 0 auto; }
#source, main > section:last-of-type { padding-bottom: clamp(40px, 7vw, 88px); }
.section { display: flex; gap: .7em; align-items: baseline; padding-bottom: 10px; margin-bottom: 24px; font: 400 clamp(26px, 4.4vw, 44px)/1.15 var(--pixel); border-bottom: var(--frame) solid var(--ink); position: relative; }
.section span { color: var(--amber); }
.section::after { content: ''; position: absolute; left: 0; right: 0; bottom: -11px; height: 8px; background: var(--dither); }
.intro { max-width: 66ch; margin-bottom: 24px; }
.source-note { margin-top: 16px; color: var(--dim); font-size: 15px; }
.source-note a { color: var(--dim); }

/* hero */
.hero { padding-top: clamp(28px, 5vw, 64px); }
.pixel { display: block; width: 100%; height: auto; fill: var(--ink); }
.title-stack { display: none; }
.sub { margin-top: clamp(20px, 3vw, 32px); font: 400 clamp(19px, 3.1vw, 30px)/1.25 var(--pixel); color: var(--amber); }
.lede { max-width: 58ch; margin-top: 14px; font-size: clamp(17px, 1.8vw, 20px); }
.cta { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 28px; }
.link { font: 400 14px/1.4 var(--pixel); padding: 8px 0; }

.button { display: inline-block; padding: 13px 20px; border: var(--frame) solid var(--ink); background: var(--desktop); color: var(--ink); font: 400 16px/1.2 var(--pixel); text-decoration: none; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); transition: transform .06s steps(2), box-shadow .06s steps(2); }
.button.primary { background: var(--amber); border-color: var(--amber); color: #000; box-shadow: 4px 4px 0 #8a4f00; }
.button:hover:not(:disabled) { background: var(--ink); color: #000; border-color: var(--ink); }
.button:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.button:disabled { background: repeating-linear-gradient(135deg, #000 0 6px, #2a2a2a 6px 12px); border-color: var(--line); color: var(--dim); box-shadow: none; cursor: not-allowed; }

.hero-panel { margin-top: clamp(36px, 6vw, 64px); }
.hero-panel figcaption { margin-top: 12px; color: var(--dim); font-size: 14px; max-width: 70ch; }

/* the FM-1 as line art */
.fm1 { display: block; width: 100%; height: auto; font: 400 14px var(--pixel); user-select: none; -webkit-user-select: none; }
.fm1 text { fill: var(--ink); pointer-events: none; }
.fm1 .body { fill: #000; stroke: var(--ink); stroke-width: 4; }
.fm1 .tray { fill: url(#none); fill: #0a0a0a; stroke: var(--line); stroke-width: 2; }
.fm1 .knob { fill: #000; stroke: var(--ink); stroke-width: 3; }
.fm1 .cap { fill: #1c1c1c; stroke: var(--line); stroke-width: 2; }
.fm1 .ptr { stroke: var(--ink); stroke-width: 4; stroke-linecap: square; }
.fm1 .btn { fill: #161616; stroke: var(--ink); stroke-width: 2.5; }
.fm1 .key { fill: #1b1b1b; stroke: var(--ink); stroke-width: 2.5; }
.fm1 .key.blk { fill: #000; }
.fm1 .lcd { fill: #000; stroke: var(--ink); stroke-width: 3; }
.fm1 .screen { image-rendering: pixelated; }
.fm1 .hit { fill: transparent; }

.interactive.live .ctl { cursor: pointer; }
.interactive .ctl:hover .btn, .interactive .ctl:hover .key, .interactive .ctl:hover .knob { stroke: var(--amber); }
.interactive .ctl.chord .btn, .interactive .ctl.chord .knob { stroke: var(--amber); stroke-dasharray: 7 5; }
.interactive .ctl.chord text { fill: var(--amber); }
.interactive .ctl.modifier .btn { fill: var(--amber); stroke: var(--amber); }
.interactive .ctl.modifier text { fill: #000; }
.interactive .ctl.on .btn, .interactive .ctl.on .key { fill: var(--amber); stroke: var(--amber); stroke-dasharray: none; }
.interactive .ctl.on .knob, .interactive .ctl.on .cap { fill: var(--amber); stroke: var(--amber); stroke-dasharray: none; }
.interactive .ctl.on .ptr { stroke: #000; }
.interactive .ctl.on text { fill: var(--amber); }
.interactive .ctl.on .btn ~ text { fill: #000; }

/* windows */
.windows { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 30px 22px; padding-top: 24px; }
.window { position: relative; display: block; padding: 18px; border: var(--frame) solid var(--ink); background: var(--panel); font-size: 16px; }
.window.wide { grid-column: 1 / -1; background: linear-gradient(90deg, var(--panel) 62%, transparent), var(--dither), var(--panel); }
.window.wide p { max-width: 62ch; }
.window .tab { margin: -18px 0 14px -18px; }
.tab { width: fit-content; max-width: calc(100% + 18px); padding: 7px 34px 6px 14px; background: var(--ink); color: #000; font: 400 15px/1.25 var(--pixel); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0 100%); }
.tags { color: var(--amber); font: 400 12.5px/1.75 var(--pixel); }

/* control guide */
.guide { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px 24px; align-items: start; }
.guide-body { display: contents; }
.guide-fm1, #guide-fm1 { grid-column: 1; }
.guide-list { grid-column: 1; }
.readout { grid-column: 2; grid-row: 1 / span 2; }
.table-wrap { grid-column: 1 / -1; }
.chip-group { margin-top: 14px; }
.chip-group h3 { margin-bottom: 6px; color: var(--dim); font: 400 13px/1.3 var(--pixel); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 40px; padding: 8px 11px; border: 2px solid var(--ink); background: #000; color: var(--ink); font: 400 13px/1.2 var(--pixel); cursor: pointer; }
.chip:hover { border-color: var(--amber); color: var(--amber); }
.chip.on { background: var(--amber); border-color: var(--amber); color: #000; }
.chip.hold { background: #000; border-style: dashed; border-color: var(--amber); color: var(--amber); }
.chip.hold[aria-pressed="true"] { background: var(--amber); border-style: solid; color: #000; }

/* the readout is the FM-1's own screen colours */
.readout { position: sticky; top: 16px; padding: 14px 16px 16px; border: var(--frame) solid var(--ink); background: var(--paper); color: var(--paper-ink); font-size: 16px; min-height: 280px; }
.readout p { margin: 0 0 .55em; }
.readout-name { margin: -14px -16px 10px !important; padding: 8px 16px; background: var(--paper-ink); color: var(--paper); font: 400 22px/1.2 var(--pixel); }
.readout-kind { color: #3c3c38; font-size: 14px; }
.readout-does { font-size: 18px; font-weight: 600; }

details summary { cursor: pointer; }
.table-wrap summary { padding: 8px 0; font: 400 14px/1.4 var(--pixel); }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 9px 12px 9px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
thead th { font: 400 13px/1.3 var(--pixel); border-bottom: var(--frame) solid var(--ink); white-space: nowrap; }
tbody th { font-weight: 600; white-space: nowrap; }
.table-wrap td:last-child { white-space: nowrap; }

/* demo teaser */
.demo-teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; }
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.shots img { display: block; width: 100%; border: 2px solid var(--ink); }

/* steps */
.steps { list-style: none; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 0 0 14px 44px; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: grid; place-items: center; background: var(--ink); color: #000; font: 400 15px/1 var(--pixel); }
.steps.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 8px 32px; }

/* install */
.notice { padding: 18px 20px; border: var(--frame) solid var(--amber); background: repeating-linear-gradient(135deg, #1d1000 0 10px, #000 10px 20px); }
.notice-head { display: inline-block; padding: 3px 9px; background: var(--amber); color: #000; font: 400 15px/1.35 var(--pixel); }
.notice-body { margin: 12px 0 10px !important; font-size: clamp(19px, 2.4vw, 25px); font-weight: 600; line-height: 1.3; }
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px 40px; margin-top: 28px; }
.columns h3 { margin-bottom: 8px; font: 400 18px/1.3 var(--pixel); }
.plain { padding-left: 1.2em; }
.plain li { margin: .35em 0; }
.columns .button { margin-top: 14px; }
.link-list { list-style: none; padding: 0; }
.link-list li { padding: 8px 0; border-bottom: 1px solid var(--line); margin: 0; }
.columns-list { columns: 2 280px; gap: 32px; margin-top: 24px; }
.columns-list li { break-inside: avoid; }
.tiers tbody tr:last-child td:last-child b { color: var(--amber); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { padding: 13px 0; font-weight: 600; }
.faq summary:hover { color: var(--amber); }
.faq details p { padding: 0 0 15px; max-width: 70ch; }

.foot { padding: 26px var(--gutter) 36px; border-top: var(--frame) solid var(--ink); color: var(--dim); font-size: 14px; }
.foot a { color: var(--dim); }
.foot > * { max-width: 1184px; margin-inline: auto; }

/* demo page */
.demo-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; padding: 20px var(--gutter) 40px; align-items: start; }
main.demo-main > section { padding: 0; max-width: none; margin: 0; }
.device iframe { display: block; width: 100%; height: 640px; border: var(--frame) solid var(--ink); background: #111; }
.note { margin-top: 10px; color: var(--dim); font-size: 14px; }
.note a { color: var(--dim); }
.try { font-size: 15px; }
.try .tab { margin: 20px 0 10px; }
.try .tab:first-of-type { margin-top: 0; }
.try .steps li { padding-left: 38px; padding-bottom: 10px; }
.try .steps li::before { width: 26px; height: 26px; font-size: 13px; }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.keys div { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; border-bottom: 1px solid #2c2c2a; padding: 2px 0; }
.keys dd { margin: 0; font: 400 11.5px/1.3 var(--pixel); text-align: right; }

/* installer page */
.warning { padding: 14px 16px; border: var(--frame) solid var(--amber); background: #1d1000; }
.warning p { margin-top: 8px; }
.warning .notice-head { margin-top: 0; }
.device-state { padding-left: 10px; border-left: 3px solid var(--line); }
.device-state[data-state="ready"], .device-state[data-state="done"] { border-color: var(--ink); font-weight: 600; }
.device-state[data-state="blocked"], .device-state[data-state="failed"] { border-color: var(--amber); font-weight: 600; }
.stopped { color: var(--amber); font-weight: 600; }
.after { margin-top: 12px; padding: 10px 14px; border: 2px solid var(--amber); }
.installer-main section { margin: 8px 0 20px; }
.installer-main section .tab { margin-bottom: 10px; }
.installer-main { max-width: 880px; margin: 0 auto; padding: 32px var(--gutter) 48px; }
.facts { margin-top: 22px; }
.facts div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.facts dt { font: 400 13px/1.5 var(--pixel); color: var(--dim); }
.facts dd { margin: 0; }
.wizard { list-style: none; padding: 0; margin-top: 26px; counter-reset: stage; }
.stage { counter-increment: stage; position: relative; padding: 0 0 22px 52px; }
.stage::before { content: counter(stage); position: absolute; left: 0; top: 0; width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--ink); font: 400 15px/1 var(--pixel); }
.stage:not(:last-child)::after { content: ''; position: absolute; left: 16px; top: 38px; bottom: 4px; width: 2px; background: var(--line); }
.stage h2 { margin-bottom: 4px; font: 400 16px/1.4 var(--pixel); }
.stage p { margin-top: 6px; }
.check { display: flex; gap: 10px; align-items: flex-start; }
.check input { margin-top: .35em; width: 18px; height: 18px; flex: none; accent-color: var(--amber); }
.check:has(input:disabled) { color: var(--dim); }
.progress { margin-top: 12px; }
.bar { height: 16px; border: 2px solid var(--ink); }
.bar span { display: block; height: 100%; width: 0; background: var(--amber); }
.log { padding: 10px; border: 1px solid var(--line); white-space: pre-wrap; font: 13px/1.45 ui-monospace, Menlo, Consolas, monospace; }
.refusals { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 15px; }
.refusals summary { font: 400 14px/1.4 var(--pixel); padding: 6px 0; }

@media (max-width: 980px) {
  .demo-main { grid-template-columns: minmax(0, 1fr); }
  .guide { grid-template-columns: minmax(0, 1fr); }
  /* under the diagram, staying in view while the chips scroll: a tap has to show its answer */
  .readout { grid-column: 1; grid-row: auto; order: 1; top: 0; z-index: 1; min-height: 210px; }
  .guide-list { order: 2; }
  .table-wrap { order: 3; }
  .demo-teaser { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .title-wide { display: none; }
  .title-stack { display: block; }
  .fm1 { font-size: 20px; }
  .strip a { margin-left: 0; }
  .cta .button { flex: 1 1 100%; text-align: center; }
  .facts div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .window.wide { background: var(--panel); }
}