/* The playground as a contact sheet (DESIGN.md): Paper pages, real frames on Film, edge
   print in Edge, one Marker ring where the alert fired. Archivo in three widths. */
@font-face { font-family: Archivo; src: url("fonts/archivo-latin-wdth-normal.woff2") format("woff2");
             font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
:root { --paper: #F4F5F2; --film: #000000; --edge: #E2DFD3; --marker: #D1332B;
        --ink: #1D1E20; --graphite: #6E7176; --rule: rgba(29, 30, 32, 0.14);
        --bg: var(--paper); --text: var(--ink); --soft: var(--graphite);
        --primary-bg: var(--ink); --primary-text: var(--paper); color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root { --bg: var(--film); --text: var(--paper); --soft: #9A9DA2;
          --rule: rgba(244, 245, 242, 0.16); --primary-bg: var(--paper);
          --primary-text: var(--ink); }
}
* { box-sizing: border-box; }
[hidden]:not(.spoken) { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Archivo, system-ui,
       -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.45;
       font-stretch: 100%; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-underline-offset: 3px; }
.page { padding: 0 64px; }
@media (max-width: 720px) { .page { padding: 0 16px; } }
.measure { max-width: 72ch; }

/* type: Display for titles only, Text for everything else, Edge for times and scores */
h1, h2 { font-weight: 800; font-stretch: 125%; letter-spacing: -0.02em; line-height: 1;
         margin: 0; }
h1 { font-size: clamp(48px, 9vw, 92px); }
h2 { font-size: clamp(30px, 4.6vw, 42px); margin-bottom: 18px; }
p { margin: 0 0 12px; }
.promise { font-size: clamp(21px, 2.6vw, 32px); margin: 14px 0 0; letter-spacing: -0.005em; }
.soft { color: var(--soft); }
.small { font-size: 15px; }
.edge { font-stretch: 62%; font-weight: 500; letter-spacing: 0.12em; font-size: 12px;
        color: var(--edge); font-variant-numeric: tabular-nums; white-space: nowrap; }

header.masthead { padding-top: 56px; padding-bottom: 8px; }
nav { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; }
nav a { color: var(--soft); text-decoration: none; }
nav a:hover { color: var(--text); text-decoration: underline; }
section { padding-top: 64px; }
section:last-of-type { padding-bottom: 96px; }

/* text buttons for every choice; one Ink button for the one primary action */
button { font: inherit; color: inherit; background: none; border: 0; padding: 4px 0;
         cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
         text-decoration-color: var(--rule); }
button:hover { text-decoration-color: currentColor; }
button[aria-pressed="true"] { font-weight: 650; text-decoration-color: currentColor; }
button.primary { background: var(--primary-bg); color: var(--primary-text);
                 text-decoration: none; padding: 12px 22px; font-weight: 650; }
button:disabled { opacity: 0.45; cursor: default; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.choices { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 14px; font-size: 15px; }

/* film: full-bleed strips of real frames, sprocket holes in both rebates */
.bleed { margin-left: -64px; margin-right: -64px; }
@media (max-width: 720px) { .bleed { margin-left: -16px; margin-right: -16px; } }
.film { position: relative; background: var(--film); padding: 22px 0;
        overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.film::-webkit-scrollbar { display: none; }
.track { position: relative; display: flex; gap: 8px; padding: 0 12px; width: max-content;
         min-width: 100%; }
.holes { position: absolute; left: 0; right: 0; height: 6px; }
.holes.top { top: -16px; }
.holes.bottom { bottom: -16px; }
.hole { position: absolute; top: 0; width: 8px; height: 6px; border-radius: 1.5px;
        background: var(--paper); opacity: 0.9; }
.cell { position: relative; flex: none; width: var(--fw, 96px); }
.cell .frame { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
               background: #111; }
.cell .frame img, .cell .frame canvas { width: 100%; height: 100%; object-fit: cover;
                                        display: block; }
.cell .edge { display: block; padding: 4px 0 0 3px; font-size: 10.5px; }
.sam { position: absolute; border: 1.5px solid var(--marker); pointer-events: none; }
.cell.dim .frame { opacity: 0.35; }

/* the hero: the clip above its film; the ring draws itself when the alert fires */
.stage { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 32px;
         align-items: end; margin: 8px 0 28px; }
@media (max-width: 720px) { .stage { grid-template-columns: 1fr; gap: 16px; } }
.stage video { width: 100%; max-height: 62vh; background: var(--film); display: block; }
.spoken { min-height: 120px; }
.spoken q { display: block; font-size: clamp(26px, 3.4vw, 32px); font-weight: 650;
            font-stretch: 112%; letter-spacing: -0.01em; line-height: 1.15;
            quotes: "\201C" "\201D"; }
.spoken span { display: block; margin-top: 8px; font-size: 15px; color: var(--soft); }
.spoken[hidden] { display: block; visibility: hidden; }
#hero-film { margin-top: 70px; margin-bottom: 64px; overflow-x: clip; overflow-y: visible; }
#hero-film .film { overflow: visible; clip-path: inset(-90px 0 -90px 0); }
#hero-film .cell { --fw: 120px; cursor: pointer; }
#hero-film .track { transition: transform 0.25s linear; }
@media (prefers-reduced-motion: reduce) { #hero-film .track { transition: none; } }
.marks { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.marks path { fill: none; stroke: var(--marker); stroke-linecap: round; stroke-linejoin: round; }

/* how it learned: the contact sheet and its log */
.sheet { display: grid; gap: 18px; }
ol.steps { list-style: none; padding: 0; margin: 28px 0 0; counter-reset: step; }
ol.steps li { counter-increment: step; position: relative; padding-left: 40px;
              margin-bottom: 18px; }
ol.steps li::before { content: counter(step); position: absolute; left: 0; top: -3px;
                      font-size: 24px; font-weight: 800; font-stretch: 125%;
                      color: var(--marker); }
ol.steps b { font-weight: 650; }
q { quotes: "\201C" "\201D"; }

/* teach it yourself */
label.ask { display: block; font-weight: 650; margin-bottom: 8px; }
input[type="text"] { font: inherit; color: var(--text); background: transparent; width: 100%;
                     max-width: 72ch; border: 0; border-bottom: 1.5px solid var(--text);
                     padding: 8px 0; border-radius: 0; }
input[type="text"]::placeholder { color: var(--soft); }
.pick-note { margin-top: 22px; }
.pick .cell { cursor: pointer; }
.pick .cell input { position: absolute; opacity: 0; pointer-events: none; }
.pick .cell .frame { opacity: 0.5; transition: opacity 0.15s; }
.pick .cell:has(input:checked) .frame, .pick .cell:hover .frame { opacity: 1; }
.pick .cell input:focus-visible + .frame { outline: 2px solid var(--edge); outline-offset: 2px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 22px; }
.status { min-height: 1.45em; margin-top: 14px; }
.status.bad { color: var(--marker); }
.readback { font-size: 21px; font-weight: 650; }
/* teaching's progress: the share of variations done, or a sliding bar while it waits */
.progress { position: relative; height: 4px; margin-top: 10px; overflow: hidden;
            background: var(--rule); }
.progress span { position: absolute; left: 0; top: 0; bottom: 0; width: 0;
                 background: var(--text); transition: width 0.4s ease; }
.progress.waiting span { width: 30%; animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { from { left: -30%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .progress.waiting span { animation: none; left: 0; width: 100%; opacity: 0.3; }
}

/* results and privacy */
figure { margin: 0 0 40px; }
figure img { width: 100%; max-width: 720px; display: block; }
figcaption { margin-top: 10px; color: var(--soft); max-width: 72ch; }
details summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
                  text-decoration-color: var(--rule); }
pre { white-space: pre-wrap; font-size: 13px; line-height: 1.5; max-width: 100%;
      overflow-x: auto; }
.empty { color: var(--soft); }