/* QuireOS website: the page is a QuireOS device. Paper and ink only, the design system's tones,
   Inter for the interface and Literata for reading, and content that pages rather than scrolls.
   Tones follow the OS's 0–15 scale (design/tokens): level v mixes ink and paper by v / 15, so the
   page has the warm paper and soft ink of a real panel rather than screen white and black. */

/* The faces the firmware compiles (firmware/fonts), by the names the renderer draws with, set up as
   design/preview/index.html sets them: Inter's figures tabular (tnum) and its l tailed (cv05). */
@font-face { font-family: "Quire Inter"; font-weight: 400; font-display: swap; src: url(../vendor/fonts/Inter-Regular.ttf) format("truetype"); unicode-range: U+30-39; font-feature-settings: "tnum", "cv05"; }
@font-face { font-family: "Quire Inter"; font-weight: 400; font-display: swap; src: url(../vendor/fonts/Inter-Regular.ttf) format("truetype"); unicode-range: U+0-2F, U+3A-10FFFF; font-feature-settings: "cv05"; }
@font-face { font-family: "Quire Inter"; font-weight: 600; font-display: swap; src: url(../vendor/fonts/Inter-SemiBold.ttf) format("truetype"); unicode-range: U+30-39; font-feature-settings: "tnum", "cv05"; }
@font-face { font-family: "Quire Inter"; font-weight: 600; font-display: swap; src: url(../vendor/fonts/Inter-SemiBold.ttf) format("truetype"); unicode-range: U+0-2F, U+3A-10FFFF; font-feature-settings: "cv05"; }
@font-face { font-family: "Quire Inter Display"; font-weight: 600; font-display: swap; src: url(../vendor/fonts/InterDisplay-SemiBold.ttf) format("truetype"); unicode-range: U+30-39; font-feature-settings: "tnum", "cv05"; }
@font-face { font-family: "Quire Inter Display"; font-weight: 600; font-display: swap; src: url(../vendor/fonts/InterDisplay-SemiBold.ttf) format("truetype"); unicode-range: U+0-2F, U+3A-10FFFF; font-feature-settings: "cv05"; }
@font-face { font-family: "Quire Literata"; font-weight: 400; font-display: swap; src: url(../vendor/fonts/Literata-Regular.ttf) format("truetype"); }
@font-face { font-family: "Quire Literata"; font-weight: 700; font-display: swap; src: url(../vendor/fonts/Literata-Bold.ttf) format("truetype"); }
@font-face { font-family: "Quire Literata 7pt"; font-weight: 400; font-display: swap; src: url(../vendor/fonts/Literata7pt-Regular.ttf) format("truetype"); }
@font-face { font-family: "Quire Literata 7pt"; font-weight: 700; font-display: swap; src: url(../vendor/fonts/Literata7pt-Bold.ttf) format("truetype"); }

:root {
  --ink-rgb: 28 28 26;
  --paper-rgb: 236 235 230;
  --ink: rgb(var(--ink-rgb));
  --paper: rgb(var(--paper-rgb));
  /* the named tones, light theme: secondary 5, tertiary 9, outline 8, hairline 10, fill_subtle 13 */
  --secondary: color-mix(in srgb, var(--paper) 33%, var(--ink));
  --tertiary: color-mix(in srgb, var(--paper) 60%, var(--ink));
  --outline: color-mix(in srgb, var(--paper) 53%, var(--ink));
  --hairline: color-mix(in srgb, var(--paper) 67%, var(--ink));
  --fill-subtle: color-mix(in srgb, var(--paper) 87%, var(--ink));
  --bezel: #2b2b2a;
  --bezel-edge: #3a3a38;
  --desk: #d9d7d0;
  --sans: "Quire Inter", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Quire Inter Display", "Quire Inter", Inter, system-ui, sans-serif;
  --serif: "Quire Literata", Literata, Georgia, serif;
  /* the hi band's unit is 4 px and its rhythm 8 px; the web uses the same grid */
  --u: 4px;
  --rhythm: 8px;
  --page: 24px;
  --nav: 56px;
  --status: 48px;
  --pager: 56px;
  --radius: 12px;
  --line: 1px;
  color-scheme: light;
}
/* Dark is the OS's dark theme: the tones inverted (15 − v), not a different palette. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink-rgb: 232 231 226;
    --paper-rgb: 25 25 24;
    --bezel: #0d0d0d;
    --bezel-edge: #222;
    --desk: #121211;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink-rgb: 232 231 226;
  --paper-rgb: 25 25 24;
  --bezel: #0d0d0d;
  --bezel-edge: #222;
  --desk: #121211;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--desk);
  color: var(--ink);
  font: 400 17px/1.5 var(--sans);
  font-feature-settings: "cv05";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img, svg, canvas { display: block; }
code, kbd {
  font: 400 0.88em/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: var(--fill-subtle);
  border-radius: 4px;
  padding: 0.05em 0.3em;
}
pre {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: var(--line) solid var(--hairline);
  border-radius: 8px;
  overflow: auto;
  font: 400 13px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  break-inside: avoid;
}
pre code { background: none; padding: 0; font-size: inherit; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 10;
  background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 8px;
}
.skip:focus { top: 16px; }

/* ------------------------------------------------------------------------------- the device --- */
.device {
  position: relative;
  height: 100vh;
  height: 100dvh;
  padding: 24px;
  display: grid;
}
.bezel {
  position: relative;
  background: var(--bezel);
  border-radius: 36px;
  padding: 28px 28px 40px;
  box-shadow: 0 1px 0 var(--bezel-edge) inset, 0 24px 60px -24px rgb(0 0 0 / 0.45), 0 2px 6px rgb(0 0 0 / 0.2);
  display: grid;
  min-height: 0;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}
.bezel::after {
  /* the maker's mark on the chin */
  content: "QuireOS";
  position: absolute; left: 0; right: 0; bottom: 12px;
  text-align: center;
  font: 600 11px/16px var(--display);
  letter-spacing: 0.12em;
  color: #6c6b67;
  pointer-events: none;
}
.screen {
  position: relative;
  background: var(--paper);
  border-radius: 6px;
  overflow: hidden;
  min-height: 0;
  display: grid;
  grid-template-rows: var(--status) 1fr;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.35) inset, 0 2px 8px rgb(0 0 0 / 0.25) inset;
}
/* The function button on the case's right edge: short = next page, double = previous, hold = Home. */
.fn-button {
  position: absolute;
  right: -7px;
  top: 96px;
  width: 7px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 0 4px 4px 0;
  background: #4a4a47;
  box-shadow: 0 1px 0 #5a5a56 inset;
  cursor: pointer;
}
.fn-button:hover { background: #575753; }
.fn-button:active { transform: translateX(-2px); }
.fn-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Opening an app hints at an e-paper redraw: a faint grey wash that clears at once. Turning a page
   does not. */
.flash {
  position: absolute; inset: 0; z-index: 5;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
}
.flash.on { animation: flash 180ms ease-out; }
@keyframes flash {
  0% { opacity: 0.08; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .flash.on { animation: none; } }

/* ---------------------------------------------------------------------------- status bar --- */
.status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--page);
  font: 400 15px/1 var(--sans);
  font-variant-numeric: tabular-nums;
}
.status .time { flex: 1; }
.status .glyphs { display: flex; gap: 8px; align-items: center; }
.status svg { width: 22px; height: 22px; fill: currentColor; }
.status .brand {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  font: 600 15px/1 var(--display);
}
.status .brand svg { width: 20px; height: 20px; }
/* The links shared with the app store (site/README.md): same words and order as its header. */
.global { display: flex; align-items: center; gap: 2px; margin-right: 8px; }
.global a {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 10px; border-radius: 8px;
  text-decoration: none; font-size: 14px;
  -webkit-tap-highlight-color: transparent;
}
.global a:hover { background: var(--fill-subtle); }
.global a:active, .global a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.global svg { width: 18px; height: 18px; }
@media (max-width: 860px) {
  .global span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .global a { padding: 0 8px; }
}

/* ---------------------------------------------------------------------------------- apps --- */
.app { display: none; min-height: 0; grid-template-rows: var(--nav) 1fr var(--pager); }
.app.current { display: grid; }
.app[data-kind="launcher"] { grid-template-rows: 1fr var(--pager); }

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 var(--page) 0 12px;
  border-bottom: var(--line) solid var(--outline);
}
.nav h2 {
  flex: 1;
  margin: 0;
  font: 600 19px/1.2 var(--sans);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app:focus { outline: none; }
.nav .count { color: var(--secondary); font-size: 15px; font-variant-numeric: tabular-nums; }

.icon-button, .pager button, .chip, .button {
  -webkit-tap-highlight-color: transparent;
}
.icon-button {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 0; border-radius: 10px;
  background: none; color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.icon-button svg { width: 28px; height: 28px; fill: currentColor; }

/* Tap feedback is inversion: the control's rectangle turns ink with paper on it. */
.icon-button:active, .pager button:active, .tile:active .tile-face, .button:active, .row-link:active,
.chip:active, .icon-button.pressed, .pager button.pressed, .button.pressed {
  background: var(--ink); color: var(--paper);
}
.tile:active .tile-face svg { fill: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* The content region: a fixed page that the text flows across in columns, one page in view. */
.viewport {
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.flow {
  height: 100%;
  margin: 0 var(--page);
  padding: 24px 0 16px;
  column-fill: auto;
  column-gap: calc(var(--page) * 2);
  orphans: 3;
  widows: 3;
}
.js .flow { transition: none; will-change: transform; }

.pager {
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  padding: 0 calc(var(--page) - 8px);
  border-top: var(--line) solid var(--hairline);
}
.pager button {
  height: 48px;
  border: 0; border-radius: 10px;
  background: none; color: inherit;
  display: grid; place-items: center;
  cursor: pointer;
}
.pager button svg { width: 32px; height: 32px; fill: currentColor; }
.pager button:disabled { color: var(--tertiary); cursor: default; background: none; }
.pager .where { text-align: center; color: var(--secondary); font-size: 15px; font-variant-numeric: tabular-nums; }
.pager .hint { display: none; }

/* --------------------------------------------------------------------------- typography --- */
.flow h3 {
  margin: 0 0 8px;
  font: 600 28px/1.15 var(--sans);
  letter-spacing: -0.012em;
  break-after: avoid;
}
.flow h4 {
  margin: 24px 0 8px;
  font: 600 20px/1.25 var(--sans);
  break-after: avoid;
}
.flow h4:first-child { margin-top: 0; }
.flow p, .flow ul, .flow ol, .flow dl { margin: 0 0 16px; }
.flow ul, .flow ol { padding-left: 1.2em; }
.flow li { margin: 0 0 6px; }
.flow li::marker { color: var(--secondary); }
.lede { font: 400 21px/1.45 var(--serif); }
.reading { font-family: var(--serif); font-size: 18px; line-height: 1.6; }
.caption, .meta { color: var(--secondary); font-size: 15px; }
.overline {
  display: block;
  margin: 0 0 6px;
  color: var(--secondary);
  font: 600 13px/1.3 var(--sans);
  letter-spacing: 0.04em;
}
.rule { border: 0; border-top: var(--line) solid var(--hairline); margin: 24px 0; }
.keep { break-inside: avoid; }
.next-col { break-before: column; }

/* Tables: rows separated by hairlines, as the design system's data rows are. */
table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 15px; break-inside: avoid; font-variant-numeric: tabular-nums; }
th { text-align: left; font-weight: 600; color: var(--secondary); font-size: 13px; padding: 6px 8px 6px 0; border-bottom: var(--line) solid var(--outline); }
td { padding: 8px 8px 8px 0; border-bottom: var(--line) solid var(--hairline); vertical-align: top; }
tr.current td { font-weight: 600; }
td .tag { white-space: nowrap; }

/* Steps: a numbered list where the number is inverted, as a selected state is. */
.flow .steps { list-style: none; padding: 0; counter-reset: step; }
.steps > li { position: relative; padding-left: 44px; margin-bottom: 16px; counter-increment: step; break-inside: avoid; }
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  font: 600 15px/28px var(--sans); text-align: center;
}
.steps strong { display: block; }

/* Rows: the list row of the kit. Title, a caption under it, a chevron when it goes somewhere. */
.flow .rows { list-style: none; padding: 0; margin: 0 0 16px; }
.rows li { margin: 0; break-inside: avoid; }
.row-link, .row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: var(--line) solid var(--hairline);
  text-decoration: none;
}
.row-link { margin: 0 -8px; padding: 12px 8px; border-radius: 8px; }
.rows svg { width: 28px; height: 28px; fill: currentColor; }
.rows .title { font-weight: 600; display: block; }
.rows .sub { color: var(--secondary); font-size: 15px; display: block; }
.rows .chev { width: 24px; height: 24px; fill: var(--tertiary); }

.button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border: var(--line) solid var(--ink); border-radius: 10px;
  background: none; color: inherit;
  font: 600 16px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.button.primary { background: var(--ink); color: var(--paper); }
.button.primary:active { background: var(--paper); color: var(--ink); }
.button svg { width: 22px; height: 22px; fill: currentColor; }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; break-inside: avoid; }

.callout {
  border: var(--line) solid var(--outline);
  border-radius: var(--radius);
  padding: 16px;
  margin: 0 0 16px;
  break-inside: avoid;
}
.callout > :last-child { margin-bottom: 0; }
.callout.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.callout.ink .caption { color: color-mix(in srgb, var(--paper) 75%, var(--ink)); }
.callout .overline { color: inherit; opacity: 0.75; }

figure { margin: 0 0 16px; break-inside: avoid; }
figcaption { color: var(--secondary); font-size: 14px; margin-top: 8px; }
.shot {
  border: var(--line) solid var(--outline);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.shot canvas { width: 100%; height: auto; }
/* A screen drawn by the OS renderer sits on the page's paper rather than on screen white. */
.paperise { position: relative; isolation: isolate; }
.paperise::after { content: ""; position: absolute; inset: 0; background: var(--paper); mix-blend-mode: multiply; pointer-events: none; }
/* In the dark theme a light screen is turned over (the OS's dark is 15 − v) and lifted onto the paper. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .paperise::after { mix-blend-mode: screen; }
  :root:not([data-theme="light"]) .paperise canvas:not(.dark-doc) { filter: invert(1); }
}
:root[data-theme="dark"] .paperise::after { mix-blend-mode: screen; }
:root[data-theme="dark"] .paperise canvas:not(.dark-doc) { filter: invert(1); }

/* Code never runs past its page: a block taller than a column scrolls inside itself. */
.flow pre { max-height: var(--colh, none); }
pre.json { font-size: 12px; line-height: 1.5; }

/* ------------------------------------------------------------------------------ launcher --- */
.launcher {
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 48px;
  padding: 32px var(--page) 16px;
  align-content: start;
}
.hello { align-self: start; padding-top: 8px; }
.wordmark {
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 24px;
}
.wordmark svg { width: 72px; height: 72px; flex: none; }
.wordmark h1 {
  margin: 0;
  font: 600 64px/1 var(--display);
  letter-spacing: -0.03em;
}
.wordmark h1 span { color: var(--secondary); }
.hello .lede { margin: 0 0 20px; max-width: 30ch; }
.hello .facts { margin: 0 0 24px; color: var(--secondary); font-size: 15px; }
/* A clock, as a QuireOS dashboard draws one: Inter Display digits, redrawn on the minute. Only where
   the screen has room for it. */
.clock-block { margin-top: 48px; padding-top: 24px; border-top: var(--line) solid var(--hairline); max-width: 420px; }
.clock {
  font: 600 108px/1 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.date { color: var(--secondary); margin: 0; }
@media (max-height: 780px), (max-aspect-ratio: 11/10) { .clock-block { display: none; } }

.tiles {
  list-style: none; margin: 0; padding: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 24px 8px;
  align-content: start;
}
.tile {
  display: grid; justify-items: center; gap: 8px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.tile-face {
  position: relative;
  width: 88px; height: 88px;
  display: grid; place-items: center;
  border: var(--line) solid var(--outline);
  border-radius: 18px;
}
.tile-face svg { width: 40px; height: 40px; fill: var(--ink); }
.tile-label { font: 400 16px/1.2 var(--sans); text-align: center; }
.tile .badge {
  position: absolute; top: -8px; right: -10px;
  background: var(--ink); color: var(--paper);
  font: 600 11px/18px var(--sans);
  padding: 0 6px; border-radius: 9px;
}

/* ------------------------------------------------------------------------------ Try it app --- */
.try {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 24px;
  padding: 16px var(--page);
}
.try-stage { min-height: 0; display: grid; place-items: center; }
.try-stage .frame {
  background: var(--bezel);
  border-radius: 18px;
  padding: 14px 14px 22px;
  box-shadow: 0 10px 30px -14px rgb(0 0 0 / 0.5);
}
.try-stage canvas { image-rendering: auto; cursor: pointer; touch-action: manipulation; }
.try-side { min-height: 0; overflow: auto; font-size: 15px; }
.try-side h4 { margin: 0 0 8px; font: 600 13px/1.3 var(--sans); color: var(--secondary); letter-spacing: 0.04em; }
.try-side .group { margin: 0 0 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: var(--line) solid var(--outline);
  border-radius: 999px;
  background: none; color: inherit;
  font: 400 14px/1 var(--sans);
  padding: 8px 12px;
  cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; }
.try-side .log { color: var(--secondary); font-size: 13px; min-height: 3em; }
.try-side .hw { display: flex; gap: 6px; }

/* --------------------------------------------------------------------------- small screens --- */
/* A portrait screen stacks the greeting over the tiles; a landscape one sets them side by side. */
@media (max-aspect-ratio: 11/10) {
  .launcher { grid-template-columns: 1fr; gap: 32px; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}
@media (max-height: 700px) and (min-aspect-ratio: 11/10) {
  .launcher { gap: 32px; padding-top: 20px; }
  .wordmark svg { width: 56px; height: 56px; }
  .wordmark h1 { font-size: 48px; }
  .tiles { gap: 16px 8px; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .tile-face { width: 72px; height: 72px; border-radius: 16px; }
  .tile-face svg { width: 34px; height: 34px; }
  .tile-label { font-size: 14px; }
}
@media (max-width: 820px) {
  .try { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .try-side { max-height: 34vh; }
}
@media (max-width: 720px) {
  :root { --page: 16px; --nav: 52px; --status: 40px; --pager: 52px; }
  body { font-size: 16px; }
  .device { padding: 6px; }
  .bezel { padding: 10px 10px 24px; border-radius: 22px; }
  .bezel::after { bottom: 5px; font-size: 9px; }
  .fn-button { top: 64px; height: 44px; right: -5px; width: 5px; }
  .wordmark svg { width: 52px; height: 52px; }
  .wordmark h1 { font-size: 44px; }
  .wordmark { margin-bottom: 16px; }
  .lede { font-size: 18px; }
  .hello .lede { margin-bottom: 12px; }
  .hello .facts { margin-bottom: 0; }
  .launcher { padding-top: 12px; gap: 20px; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 8px; }
  .tile-face { width: 64px; height: 64px; border-radius: 14px; }
  .tile-face svg { width: 30px; height: 30px; }
  .tile-label { font-size: 13px; }
  .flow h3 { font-size: 24px; }
  .reading { font-size: 17px; }
}
@media (max-height: 640px) and (min-width: 721px) {
  .clock { font-size: 72px; }
}

/* ------------------------------------------------------------------------- without script --- */
/* With no script the device is a plain long page: every app shown, the text scrolling. */
html:not(.js) .device { height: auto; }
html:not(.js) .screen { display: block; }
html:not(.js) .app { display: block; }
html:not(.js) .pager, html:not(.js) .fn-button, html:not(.js) [data-kind="try"] { display: none; }
html:not(.js) .flow { height: auto; columns: auto; padding-bottom: 32px; }
html:not(.js) .launcher { overflow: visible; }

@media print {
  body { background: #fff; }
  .device { height: auto; padding: 0; }
  .bezel { background: none; box-shadow: none; padding: 0; }
  .bezel::after, .fn-button, .pager, .status, [data-kind="try"] { display: none !important; }
  .screen { display: block; box-shadow: none; }
  .app { display: block !important; break-before: page; }
  .flow { height: auto !important; columns: auto !important; transform: none !important; }
}

/* ------------------------------------------------------------------- design app specimens --- */
.tones { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 0; margin: 0 0 8px; border: var(--line) solid var(--outline); border-radius: 8px; overflow: hidden; }
.tones span { aspect-ratio: 1 / 1.6; display: grid; align-items: end; justify-items: center; padding-bottom: 4px; font: 600 11px/1 var(--sans); font-variant-numeric: tabular-nums; }
.tone-names { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 16px; color: var(--secondary); font-size: 14px; }
.icon-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 12px 8px; margin: 0 0 16px; }
.icon-sheet svg { width: 28px; height: 28px; fill: var(--ink); justify-self: center; }
.shot { width: fit-content; max-width: 100%; }
.shot canvas { width: auto; max-width: 100%; max-height: calc(var(--colh, 600px) - 96px); }
.pair .shot canvas { max-height: calc(var(--colh, 600px) - 72px); }