/* koona.app, the root site: one sheet of paper under one window.
   The pages are that sheet. The photographs on the home page are renders of the same sheet from straight
   above, at one scale (design/sheet/scene.py), so the objects lie on the page itself; the words sit on
   their empty paper. Every edge, key and shadow takes the window's light from the upper left. At night
   it is the same sheet under a desk lamp. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
  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: "Literata";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("/fonts/literata-latin-wght-normal.woff2") format("woff2");
  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: "Literata";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("/fonts/literata-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------------------------------------------------------------- the sheet by day */
:root {
  --paper: #dbd5c9;
  --ink: #23201c;
  --ink-2: #4b463f;
  /* the grey inks hold 4.5:1 on the paper also inside the window's shadow (design/sheet/convert.mjs DEPTH) */
  --ink-3: #46423c;
  --pencil: #4a4640;
  --rule: rgb(35 32 28 / .17);
  --hi: rgb(255 253 247 / .62);
  --lo: rgb(64 50 32 / .30);
  --cast: rgb(58 44 28 / .30);
  --glass: rgb(236 232 224 / .46);
  --glass-rim: rgb(255 255 255 / .75);
  --glass-rim-lo: rgb(70 60 45 / .18);
  --key-1: #3b3833;
  --key-2: #1f1d1a;
  --key-skirt: #0f0e0c;
  --key-fg: #f1ece3;
  --cap-1: #f7f4ee;
  --cap-2: #e4ded3;
  --cap-skirt: #b9b1a3;
  --pin: #2f7d5b;
  --notes: #2346e0;
  --books: #7a2f28;
  --lightcal: #c8363b;
  --blend: multiply;
  --scrim: transparent;
  --scrim-mid: transparent;
  --day: block;
  --night: none;
  --day-on: linear-gradient(160deg, var(--key-1), var(--key-2));
  --night-on: transparent;
  --day-fg: var(--key-fg);
  --night-fg: var(--ink-3);
  --day-lift: inset 1px 1px 0 rgb(255 255 255 / .16), 1px 2px 0 var(--key-skirt), 2px 5px 8px -3px var(--cast);
  --night-lift: none;
  /* the Ko Notes line */
  --ko-ink: #1f1d1a;
  --ko-ink-2: #5b564f;
  --ko-glass: rgb(255 255 255 / .10);
  --ko-rim: rgb(255 255 255 / .9);
  --ko-rim-lo: rgb(70 60 45 / .24);
  --ko-hair: rgb(40 34 26 / .12);
  --ko-sheet: rgb(252 251 248 / .86);
  --ko-sel: #e7ebfd;
  --ko-on-sel: #1a2f9e;
  --ko-match: rgb(35 70 224 / .16);
  --ko-plate: rgb(255 255 255 / .78);
  --ko-caustic: rgb(255 248 232 / .55);

  --display: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --text: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --width: 1120px;
  color-scheme: light;
}

/* ---------------------------------------------------------------- the same sheet at night, under a lamp:
   only when it is chosen (site.js sets data-theme), whatever the system's mode: by default the page
   is always by day. */
:root[data-theme="dark"] {
  --paper: #13110e;
  --ink: #ece4d6; --ink-2: #c6bcad; --ink-3: #a0978a; --pencil: #8e877c;
  --rule: rgb(236 228 214 / .15);
  --hi: rgb(255 238 210 / .09); --lo: rgb(0 0 0 / .6); --cast: rgb(0 0 0 / .55);
  --glass: rgb(28 24 20 / .5); --glass-rim: rgb(255 232 200 / .2); --glass-rim-lo: rgb(0 0 0 / .5);
  --key-1: #efe7d8; --key-2: #d6cab5; --key-skirt: #8d7f68; --key-fg: #1c1915;
  --cap-1: #3a352e; --cap-2: #27231e; --cap-skirt: #0c0a08;
  --pin: #62b58c; --notes: #93a6ff; --books: #d9786a; --lightcal: #ef7f7f;
  --blend: normal;
  --scrim: rgb(19 17 14 / .92); --scrim-mid: rgb(19 17 14 / .6);
  --day: none; --night: block;
  --day-on: transparent; --night-on: linear-gradient(160deg, var(--key-1), var(--key-2));
  --day-fg: var(--ink-3); --night-fg: var(--key-fg);
  --day-lift: none; --night-lift: inset 1px 1px 0 rgb(255 255 255 / .16), 1px 2px 0 var(--key-skirt), 2px 5px 8px -3px var(--cast);
  --ko-ink: #f1ebe0; --ko-ink-2: #b9b0a2; --ko-glass: rgb(24 20 16 / .58);
  --ko-rim: rgb(255 238 210 / .4); --ko-rim-lo: rgb(0 0 0 / .45); --ko-hair: rgb(255 255 255 / .09);
  --ko-sheet: rgb(30 27 23 / .86); --ko-sel: #262d4e; --ko-on-sel: #c9d2ff; --ko-match: rgb(143 162 255 / .26);
  --ko-plate: rgb(255 255 255 / .14); --ko-caustic: rgb(255 214 160 / .22);
  color-scheme: dark;
}
/* Without the script the Night radio still chooses, through :has, for the visit. */
:root:not(.js):has(#time-night:checked) {
  --paper: #13110e;
  --ink: #ece4d6; --ink-2: #c6bcad; --ink-3: #a0978a; --pencil: #8e877c;
  --rule: rgb(236 228 214 / .15);
  --hi: rgb(255 238 210 / .09); --lo: rgb(0 0 0 / .6); --cast: rgb(0 0 0 / .55);
  --glass: rgb(28 24 20 / .5); --glass-rim: rgb(255 232 200 / .2); --glass-rim-lo: rgb(0 0 0 / .5);
  --key-1: #efe7d8; --key-2: #d6cab5; --key-skirt: #8d7f68; --key-fg: #1c1915;
  --cap-1: #3a352e; --cap-2: #27231e; --cap-skirt: #0c0a08;
  --pin: #62b58c; --notes: #93a6ff; --books: #d9786a; --lightcal: #ef7f7f;
  --blend: normal;
  --scrim: rgb(19 17 14 / .92); --scrim-mid: rgb(19 17 14 / .6);
  --day: none; --night: block;
  --day-on: transparent; --night-on: linear-gradient(160deg, var(--key-1), var(--key-2));
  --day-fg: var(--ink-3); --night-fg: var(--key-fg);
  --day-lift: none; --night-lift: inset 1px 1px 0 rgb(255 255 255 / .16), 1px 2px 0 var(--key-skirt), 2px 5px 8px -3px var(--cast);
  --ko-ink: #f1ebe0; --ko-ink-2: #b9b0a2; --ko-glass: rgb(24 20 16 / .58);
  --ko-rim: rgb(255 238 210 / .4); --ko-rim-lo: rgb(0 0 0 / .45); --ko-hair: rgb(255 255 255 / .09);
  --ko-sheet: rgb(30 27 23 / .86); --ko-sel: #262d4e; --ko-on-sel: #c9d2ff; --ko-match: rgb(143 162 255 / .26);
  --ko-plate: rgb(255 255 255 / .14); --ko-caustic: rgb(255 214 160 / .22);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background-color: var(--paper);
  /* the sheet's own fibre, matched to the renders */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .40 0 0 0 0 .33 0 0 0 .55 -.2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)'/%3E%3C/svg%3E");
  color: var(--ink);
  font: 400 17px/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
a { color: inherit; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: fixed; z-index: 40; left: var(--gutter); top: calc(env(safe-area-inset-top, 0px) + 12px);
  padding: 10px 16px; border-radius: 10px; background: var(--paper); color: var(--ink);
  transform: translateY(-200%); transition: transform .2s;
}
.skip:focus { transform: none; }

/* ---------------------------------------------------------------- materials */

/* a graphite key with real travel: lit from the upper left, its skirt and shadow fall lower right */
.key {
  --travel: 4px;
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 48px; padding: 0 1.25em;
  border: 0; border-radius: 11px;
  font: 500 15px/1 var(--text); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  color: var(--key-fg);
  background: linear-gradient(160deg, var(--key-1), var(--key-2));
  box-shadow:
    inset 1px 1px 0 rgb(255 255 255 / .16),
    inset -1px -1px 0 rgb(0 0 0 / .35),
    1px var(--travel) 0 var(--key-skirt),
    4px calc(var(--travel) + 6px) 14px -4px var(--cast);
  transition: transform .07s ease-out, box-shadow .07s ease-out;
  cursor: pointer;
}
/* pressed, the key travels down, as a key does (under the pointer: the hover block by the header) */
.key:active { --travel: 1px; transform: translateY(3px); }
.key svg { width: 18px; height: 18px; flex: none; }
.key[aria-disabled="true"] { cursor: default; opacity: .62; }
.key[aria-disabled="true"]:hover, .key[aria-disabled="true"]:active { --travel: 4px; transform: none; }

/* raised from the sheet itself; pressed, it sinks into it */
.emboss {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 48px; padding: 0 1.2em;
  border: 0; border-radius: 11px;
  font: 500 15px/1 var(--text); text-decoration: none; white-space: nowrap;
  color: var(--ink); background: transparent;
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo), 1px 1px 2px var(--lo), -1px -1px 1px var(--hi);
  transition: box-shadow .12s ease-out;
  cursor: pointer;
}
.emboss:active { box-shadow: inset 2px 2px 3px var(--lo), inset -1px -1px 0 var(--hi); }

/* keycaps, for the shortcuts the apps run on */
.cap {
  display: inline-grid; place-items: center; min-width: 2.1em; height: 2.1em; padding: 0 .55em;
  border-radius: 7px; font: 500 .82em/1 var(--text); color: var(--ink);
  background: linear-gradient(160deg, var(--cap-1), var(--cap-2));
  box-shadow: inset 1px 1px 0 rgb(255 255 255 / .55), 1px 3px 0 var(--cap-skirt), 3px 6px 8px -4px var(--cast);
  vertical-align: .1em; margin: 0 .12em .2em;
}
.cap.wide { min-width: 4.6em; }

/* an enamel bead in the app's colour */
.bead {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 32%, rgb(255 255 255 / .75) 0 12%, transparent 30%), var(--c);
  box-shadow: 1px 2px 2px var(--cast), inset -1px -1px 1px rgb(0 0 0 / .25);
}
.pin { --c: var(--pin); } .notes { --c: var(--notes); } .books { --c: var(--books); } .lightcal { --c: var(--lightcal); }

.eyebrow { font: 500 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* ---------------------------------------------------------------- the header: a bar of the same clear glass
   as Ko Notes (glass.js bends what lies under it in Chromium; elsewhere a blur) */
.top {
  position: fixed; z-index: 20;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: var(--gutter); right: var(--gutter-r);
  max-width: var(--width); margin: 0 auto;
  display: flex; align-items: center; gap: 8px;
  height: 58px; padding: 0 8px 0 22px; border-radius: 29px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
  box-shadow:
    inset 1.5px 1.5px 0 var(--glass-rim),
    inset -1px -1px 0 var(--glass-rim-lo),
    6px 14px 26px -12px var(--cast);
}
.lg-on .top { -webkit-backdrop-filter: var(--lg); backdrop-filter: var(--lg); }
.wordmark { display: flex; color: var(--ink); margin-right: auto; padding: 8px 0; }
.wordmark svg { width: 88px; height: auto; display: block; }
.nav { display: flex; gap: 2px; }
/* the header's links lie flat in the glass; under the pointer they rise like the sheet's raised
   controls (.emboss), and pressed they sink into it */
.nav a { font: 500 14.5px/1 var(--text); color: var(--ink-2); text-decoration: none; padding: 11px 13px; border-radius: 20px; transition: box-shadow .12s ease-out, color .12s ease-out; }
.nav a:active { color: var(--ink); box-shadow: inset 2px 2px 3px var(--lo), inset -1px -1px 0 var(--hi); }
.nav a[aria-current="page"] { color: var(--ink); }

/* The Koona menu: koona.app and its apps, the same menu as on /pin and /notes (shared/koona.mjs), in
   the root's own materials. The button lies flat in the glass like the links, open it sinks; the menu is
   a card of the sheet's paper, raised, its rows rise under the pointer. A <details>: it opens without a
   script; site.js closes it on a click outside, Escape or a chosen row. */
.apps { position: relative; }
.apps summary {
  list-style: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 20px;
  color: var(--ink-2); cursor: pointer; transition: box-shadow .12s ease-out, color .12s ease-out;
}
.apps summary::-webkit-details-marker { display: none; }
.apps summary svg { width: 16px; height: 16px; }
.apps summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.apps[open] summary, .apps summary:active { color: var(--ink); box-shadow: inset 2px 2px 3px var(--lo), inset -1px -1px 0 var(--hi); }
.apps-menu {
  position: absolute; right: -8px; top: calc(100% + 16px); width: 210px; padding: 6px;
  display: grid; gap: 2px; border-radius: 18px;
  background: linear-gradient(160deg, var(--cap-1), var(--cap-2));
  box-shadow: inset 1px 1px 0 var(--hi), 0 1px 0 var(--cap-skirt), 6px 16px 30px -12px var(--cast);
}
.apps-menu a {
  display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-radius: 13px;
  font: 500 14.5px/1 var(--text); color: var(--ink-2); text-decoration: none;
  transition: box-shadow .12s ease-out, color .12s ease-out;
}
.apps-menu a[aria-current] { color: var(--ink); font-weight: 600; }
.apps-menu a svg { width: 15px; height: 15px; }
.apps-menu a:active { color: var(--ink); box-shadow: inset 2px 2px 3px var(--lo), inset -1px -1px 0 var(--hi); }

/* Day and Night: a rocker of two radios; it moves only when pressed */
.rocker {
  display: inline-flex; margin: 0 0 0 6px; padding: 4px; border: 0; border-radius: 22px;
  box-shadow: inset 2px 2px 4px var(--lo), inset -1px -1px 0 var(--hi);
}
.rocker label {
  font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 10px 12px; border-radius: 18px; cursor: pointer;
}
.rocker label[for="time-day"] { color: var(--day-fg); background: var(--day-on); box-shadow: var(--day-lift); }
.rocker label[for="time-night"] { color: var(--night-fg); background: var(--night-on); box-shadow: var(--night-lift); }
.rocker input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Under a pointer that can hover (not after a tap on a touch screen, where hover would stay), the
   controls answer alike: raised ones stand a little higher, the header's flat links and the legal
   pages' back link rise like them, the key rises on its skirt, the other half of Day / Night inks in.
   Pressed, each sinks (:active, next to each control). */
@media (hover: hover) {
  .apps:not([open]) summary:hover, .apps-menu a:hover, .nav a:hover, .doc .back:hover { color: var(--ink); box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo), 1px 1px 2px var(--lo), -1px -1px 1px var(--hi); }
  .emboss:hover { box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo), 2px 3px 5px var(--lo), -1px -1px 1px var(--hi); }
  .key:hover { --travel: 5px; transform: translateY(-1px); }
  .js .rocker input:not(:checked) + label:hover { color: var(--ink); }
}
/* a choice of Day or Night fades the whole page from one light to the other (site.js) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: ease; }

/* ---------------------------------------------------------------- photographs of the sheet */
.shot {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; container-type: size;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
}
/* the 2:1 render, sized and placed exactly as object-fit: cover with object-position var(--ox), so the
   Ko Notes line can lie on it in the render's own coordinates */
.stage {
  --ox: 50%;
  position: absolute; top: 50%; left: var(--ox);
  width: max(100cqw, 200cqh); height: max(50cqw, 100cqh);
  transform: translate(calc(var(--ox) * -1), -50%);
  container-type: size;
}
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* a browser without container units (before Safari 16, Chrome 105) gets the photograph cropped by
   object-fit alone, and no line on it: the line is laid out in the render’s own units */
@supports not (width: 1cqw) {
  .stage { left: 0; width: 100%; height: 100%; transform: translateY(-50%); }
  .stage img { object-fit: cover; object-position: var(--ox) 50%; }
  .stage .koline, .stage .kotray { display: none; }
}
.day { display: var(--day); }
.night { display: var(--night); }
/* at night the lamp falls on the object; the words sit where its light runs out */
.shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, var(--scrim) 0%, var(--scrim-mid) 32%, transparent 58%); }
.plate[data-side="right"] .shot::after { background: linear-gradient(to left, var(--scrim) 0%, var(--scrim-mid) 32%, transparent 58%); }

/* ---------------------------------------------------------------- the Ko Notes line, live: the line from the
   app, in the glass of its own site (koona.app/notes), lying on the sheet. Sizes are in cqw of the stage,
   so the line keeps its place and size on the render at every width. */
.koline {
  position: absolute; z-index: 2; left: var(--kx); top: var(--ky);
  width: 27.4cqw; height: 4.52cqw; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: .75cqw; padding: 0 .55cqw 0 1.25cqw; border-radius: 3cqw;
  font: 400 1.42cqw/1 var(--ui);
  color: var(--ko-ink); isolation: isolate;
  background: var(--ko-glass);
  -webkit-backdrop-filter: blur(.18cqw) saturate(1.3); backdrop-filter: blur(.18cqw) saturate(1.3);
  box-shadow:
    inset .13cqw .13cqw 0 var(--ko-rim), inset -.08cqw -.08cqw 0 var(--ko-rim-lo),
    0 0 0 .04cqw var(--ko-hair),
    .7cqw 1.1cqw 1.3cqw -.35cqw var(--cast);
}
/* the light that came through the glass, gathered in its shadow */
.koline::before {
  content: ""; position: absolute; z-index: -1; inset: 18% 6% 8% 10%; border-radius: inherit;
  transform: translate(.55cqw, .9cqw);
  background: radial-gradient(60% 55% at 50% 45%, var(--ko-caustic), transparent 72%);
  filter: blur(.35cqw); pointer-events: none;
}
.lg-on .koline, .lg-on .kotray { -webkit-backdrop-filter: var(--lg); backdrop-filter: var(--lg); }
/* a picture of the app, not text to pick up: a stray drag must not select it */
.koline, .kotray { -webkit-user-select: none; user-select: none; }
.ko-glyph { width: 1.6cqw; height: 1.6cqw; flex: none; opacity: .72; }
.ko-field { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.005em; }
.ko-ph { color: var(--ko-ink-2); }
.ko-caret { display: inline-block; width: .14cqw; height: 1.75cqw; margin-left: .05cqw; vertical-align: -.36cqw; border-radius: .1cqw; background: var(--notes); }
@media (prefers-reduced-motion: no-preference) { .ko-caret { animation: koblink 1.05s steps(1) infinite; } }
@keyframes koblink { 50% { opacity: 0; } }
.ko-plate {
  flex: none; font: 600 .86cqw/1 var(--ui); white-space: nowrap;
  padding: .6cqw .72cqw; border-radius: 1.1cqw; color: var(--ko-ink); background: var(--ko-plate);
  box-shadow: inset .06cqw .06cqw 0 rgb(255 255 255 / .6), .06cqw .14cqw .2cqw -.05cqw var(--cast);
}
.ko-mic { flex: none; width: 3.1cqw; height: 3.1cqw; border-radius: 50%; display: grid; place-items: center; color: var(--ko-ink); background: var(--ko-plate); transition: background .25s ease, color .25s ease; }
.ko-mic svg { width: 1.25cqw; height: 1.25cqw; }
.ko-mic.live { background: #e5483a; color: #fff; }
.ko-wave { display: none; gap: .2cqw; align-items: center; height: 1.6cqw; }
.ko-wave.on { display: flex; }
.ko-wave i { width: .2cqw; height: 30%; border-radius: .1cqw; background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .ko-wave i { animation: kowave .9s ease-in-out infinite alternate; }
  .ko-wave i:nth-child(2n) { animation-delay: .25s; }
  .ko-wave i:nth-child(3n) { animation-delay: .5s; }
}
@keyframes kowave { to { height: 100%; } }
.kotray {
  position: absolute; z-index: 2; left: var(--kx); top: calc(var(--ky) + 3cqw);
  width: 27.4cqw; transform: translateX(-50%); padding: .42cqw; border-radius: 2.5cqw;
  background: var(--ko-glass); isolation: isolate;
  -webkit-backdrop-filter: blur(.5cqw) saturate(1.3); backdrop-filter: blur(.5cqw) saturate(1.3);
  box-shadow: inset .13cqw .13cqw 0 var(--ko-rim), inset -.08cqw -.08cqw 0 var(--ko-rim-lo), 0 0 0 .04cqw var(--ko-hair), .8cqw 1.3cqw 1.6cqw -.4cqw var(--cast);
  transition: opacity .25s ease, transform .4s cubic-bezier(.2, .9, .3, 1.1);
}
.kotray.closed { opacity: 0; transform: translateX(-50%) translateY(-.8cqw) scale(.98); }
.ko-sheet { border-radius: 2.1cqw; overflow: hidden; background: var(--ko-sheet); color: var(--ko-ink); font: 400 .98cqw/1.35 var(--ui); }
.ko-group { font-weight: 600; font-size: .8cqw; color: var(--ko-ink-2); padding: .85cqw 1.1cqw .25cqw; }
.ko-row { display: grid; grid-template-columns: 1fr auto; gap: .05cqw .8cqw; margin: 0 .42cqw; padding: .55cqw .7cqw; border-radius: 1cqw; }
.ko-row .t { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ko-row .s { grid-column: 1; color: var(--ko-ink-2); font-size: .88cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ko-row .d { color: var(--ko-ink-2); font-size: .82cqw; font-variant-numeric: tabular-nums; }
.ko-row.sel { background: var(--ko-sel); }
.ko-row.sel .t, .ko-row.sel .d { color: var(--ko-on-sel); }
.ko-gap { height: .5cqw; }
.ko-sheet mark { background: var(--ko-match); color: inherit; border-radius: .2cqw; }
.ko-note { display: grid; gap: .4cqw; padding: 1.1cqw 1.5cqw 1.2cqw; min-height: 11cqw; align-content: start; }
.ko-note .ttl { font: 600 1.25cqw/1.3 var(--ui); }
/* an AI draft is in pencil until it is accepted, as in the app */
.ko-pen { display: grid; gap: .3cqw; color: var(--pencil); font-family: var(--display); font-style: italic; border-left: .14cqw solid var(--notes); border-left-color: color-mix(in srgb, var(--notes) 55%, transparent); padding-left: .8cqw; margin-left: -.94cqw; transition: color .6s ease, border-color .6s ease; }
.ko-pen.ink { color: var(--ko-ink); font-family: inherit; font-style: normal; border-left-color: transparent; }
.ko-foot { display: flex; justify-content: space-between; gap: .6cqw; padding: .6cqw 1.5cqw .7cqw; border-top: .06cqw solid var(--rule); color: var(--ko-ink-2); font-size: .8cqw; }
.ko-foot .acc { color: var(--notes); font-weight: 600; }

/* where the line lies on the Ko Notes photograph, in the render's own coordinates (design/sheet/render.sh:
   the empty place left for it on the sheet) */
#notes .koline, #notes .kotray { --kx: 73.21%; --ky: 26.19%; }

/* ---------------------------------------------------------------- the window over the home page by day:
   one map of its light (design/sheet: the bare sheet with the window over the sheet without it), laid
   over the plates, their words and controls and multiplied, so its shadow runs on from plate to plate.
   The plates' own renders have no window. The map covers <main> whatever its height (narrower screens,
   more plates): a taller page sees a larger window, never its edge. At night the lamps light each plate,
   and the map is off. */
main.sheet { position: relative; }
main.sheet::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: url(/img/sheet/light.webp?v=b8ffb89388) top center / cover no-repeat; mix-blend-mode: multiply;
}
:root[data-theme="dark"] main.sheet::after, :root:not(.js):has(#time-night:checked) main.sheet::after { display: none; }

/* ---------------------------------------------------------------- plates: one app each, the object on one
   side, the words on the other */
.plate { position: relative; width: 100%; aspect-ratio: 5 / 2; min-height: 560px; max-height: 860px; display: grid; align-items: center; }
.plate .copy { position: relative; z-index: 1; width: min(500px, 38vw); display: grid; gap: 18px; }
.plate[data-side="right"] .copy { justify-self: end; margin-right: max(var(--gutter-r), calc((100vw - var(--width)) / 2)); }
.plate[data-side="left"] .copy { margin-left: max(var(--gutter), calc((100vw - var(--width)) / 2)); }
/* the first plate opens the page: its words start below the header */
.plate:first-child .copy { padding-top: 96px; padding-bottom: 32px; }
.plate[data-side="right"] .stage { --ox: 0%; }
.plate[data-side="left"] .stage { --ox: 100%; }
.plate h2 { font: 380 clamp(40px, 4vw, 58px)/1 var(--display); letter-spacing: -.025em; mix-blend-mode: var(--blend); }
.copy > p { color: var(--ink-2); max-width: 31em; mix-blend-mode: var(--blend); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
/* a plate's status keeps one row in its column: a little less spacing than other eyebrows */
.status { display: flex; align-items: center; gap: 10px; letter-spacing: .1em; }

/* the specification: facts only, set like a maker's plate; what is planned is in pencil */
.spec { display: grid; border-top: 1px solid var(--rule); mix-blend-mode: var(--blend); }
.spec div { display: grid; grid-template-columns: 9.5em 1fr; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.spec dt { font: 400 12px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.spec dd { font-size: 15px; line-height: 1.5; color: var(--ink); min-width: 0; }
.spec .planned { color: var(--pencil); font-family: var(--display); font-style: italic; }

/* ---------------------------------------------------------------- the other pages: a document on the sheet */
.doc {
  max-width: 720px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 140px) var(--gutter-r) 40px var(--gutter);
  display: grid; gap: 16px;
}
.doc .back { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--text); color: var(--ink-2); text-decoration: none; padding: 10px 14px 10px 10px; margin-left: -10px; border-radius: 10px; transition: box-shadow .12s ease-out, color .12s ease-out; }
.doc .back:active { color: var(--ink); box-shadow: inset 2px 2px 3px var(--lo), inset -1px -1px 0 var(--hi); }
.doc .back svg { width: 16px; height: 16px; transform: scaleX(-1); }
.doc h1 { font: 360 clamp(40px, 5vw, 60px)/1.04 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.doc .updated { font: 400 12.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.doc h2 { font: 420 25px/1.2 var(--display); letter-spacing: -.012em; margin-top: 22px; text-wrap: balance; }
.doc p { color: var(--ink-2); max-width: 66ch; }
.doc p a, .doc .more a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc strong { color: var(--ink); font-weight: 600; }
/* a price is set into the sheet, like a stamped panel */
.slab { padding: 20px 22px; border-radius: 14px; box-shadow: inset 2px 2px 4px var(--lo), inset -1px -1px 0 var(--hi); }
.slab p { color: var(--ink-2); }
.doc .actions { margin-top: 18px; }
.doc .eyebrow { margin-bottom: -4px; }
.doc .status { margin-bottom: -4px; }
.doc .lede { font-size: 18px; line-height: 1.55; }
.doc .spec { margin-top: 8px; }
.doc ul.list { display: grid; gap: 8px; padding-left: 1.1em; list-style: disc; color: var(--ink-2); max-width: 66ch; }
.doc ul.list li::marker { color: var(--ink-3); }
.doc code { font: 400 .9em/1 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
/* the app's own window, at the size it opens, laid on the sheet: a print with the window's shadow */
.window { display: grid; gap: 10px; justify-items: start; margin: 10px 0 4px; }
.window img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--rule), 3px 6px 0 -2px var(--lo), 10px 18px 28px -14px var(--cast); }
.window figcaption { font-size: 14px; color: var(--ink-3); max-width: 44ch; }
.window.calendar img { max-width: 352px; }
.window.settings img { max-width: 448px; }
.windows { display: flex; flex-wrap: wrap; gap: 28px 40px; align-items: start; margin: 10px 0 4px; }
.windows .window { margin: 0; flex: 0 1 auto; }
.windows .window.calendar { width: min(352px, 100%); }
.windows .window.settings { width: min(448px, 100%); }

/* ---------------------------------------------------------------- the foot: the maker's mark, blind-stamped
   into the sheet */
.foot { max-width: var(--width); margin: 0 auto; padding: 90px var(--gutter-r) 64px var(--gutter); display: grid; gap: 44px; }
.stamp { color: var(--paper); filter: drop-shadow(-1px -1px 0 var(--lo)) drop-shadow(1px 1px 0 var(--hi)); }
.stamp svg { width: min(520px, 80vw); height: auto; display: block; }
.foot-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; font-size: 14.5px; }
.foot-cols h2 { font: 400 12px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.foot-cols a { display: block; padding: 4px 0; color: var(--ink-2); text-decoration: none; }
.foot-cols a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-cols a[aria-current="page"] { color: var(--ink); }
.foot-cols .addr { font: 400 14px/1.4 var(--mono); }
.foot-base { font-size: 13px; color: var(--ink-3); }

/* ---------------------------------------------------------------- narrow screens: words first, then the object */
@media (max-width: 960px) {
  .nav { display: none; }
  .plate { aspect-ratio: auto; min-height: 0; max-height: none; display: flex; flex-direction: column; align-items: stretch; }
  .shot { position: relative; inset: auto; order: 2; aspect-ratio: 1 / 1; max-height: 70vh; }
  .shot::after, .plate[data-side="right"] .shot::after { display: none; }
  .plate[data-side="right"] .stage { --ox: 4%; }
  .plate[data-side="left"] .stage { --ox: 96%; }
  .plate .copy { width: auto; margin: 0; padding: 64px var(--gutter-r) 8px var(--gutter); justify-self: stretch; }
  .plate:first-child .copy { padding-top: 110px; }
  .plate[data-side="right"] .copy { margin: 0; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .doc { padding-top: calc(env(safe-area-inset-top, 0px) + 110px); }
}
@media (max-width: 520px) {
  .top { padding-left: 16px; }
  /* the Koona menu spans the header (the fixed bar is its containing block), as on /pin and /notes */
  .apps { position: static; }
  .apps-menu { left: 8px; right: 8px; width: auto; top: calc(100% + 10px); }
  .rocker label { padding: 9px 9px; }
  .spec div { grid-template-columns: 1fr; gap: 2px; }
}
/* the narrowest phones: the wordmark, the Koona menu and Day / Night keep one row */
@media (max-width: 360px) {
  .top { gap: 4px; }
  .rocker { margin-left: 0; }
}