/* ==========================================================================
   Knowless reading screen — a small recreation of one interaction, for the web.
   Prefix: pk-   Mount: <div class="screen pk" data-play-knowless>…</div>
   Everything is sized in cqw against the root, so it holds from 200px to 360px.
   Sample transcript only. No dependencies, no network, system fonts.
   ========================================================================== */

.pk {
  --pk-bg: #0c0c0b;
  --pk-ink: #f3efe6;
  --pk-dim: #8d8a84;
  --pk-amber: #ffb42e;
  --pk-size: 1;                      /* text size, 0.5 – 3 (set by the script) */
  --pk-p: 0.2;                       /* slider progress, 0 – 1 (set by the script) */
  --pk-btn: max(18cqw, 44px);        /* the round control never drops below 44px */
  --pk-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pk-geo: Montserrat, "Avenir Next", Avenir, "Century Gothic", "URW Gothic", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pk-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 904 / 1964;
  overflow: hidden;
  container-type: inline-size;
  border-radius: 13.8% / 6.35%;
  isolation: isolate;
  /* Text inside grows and shifts; the page must not re-anchor its scroll position to it. */
  overflow-anchor: none;
  background:
    radial-gradient(95% 40% at 90% 97%, rgba(255, 180, 46, 0.12), rgba(255, 180, 46, 0) 72%),
    radial-gradient(80% 32% at 4% 101%, rgba(255, 96, 84, 0.1), rgba(255, 96, 84, 0) 72%),
    radial-gradient(70% 30% at 0% 74%, rgba(70, 120, 150, 0.06), rgba(70, 120, 150, 0) 72%),
    var(--pk-bg);
  color: var(--pk-ink);
  font: 400 16px/1.2 var(--pk-sans);
  font-kerning: normal;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  direction: ltr;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.pk *,
.pk *::before,
.pk *::after {
  box-sizing: border-box;
}

/* Fallback content, shown until the script replaces it. */
.pk > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.pk .pk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- status bar (decorative) ---------- */

.pk .pk-bar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 11.6cqw;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.pk .pk-time {
  position: absolute;
  left: 14.1cqw;
  top: 3.25cqw;
  font: 600 4.35cqw/1.15 var(--pk-sans);
  letter-spacing: -0.01em;
  color: #fff;
}

.pk .pk-island {
  position: absolute;
  left: 50%;
  top: 1.45cqw;
  width: 29cqw;
  height: 8.4cqw;
  margin-left: -14.5cqw;
  border-radius: 4.2cqw;
  background: #000;
}

.pk .pk-sys {
  position: absolute;
  right: 8.6cqw;
  top: 4.05cqw;
  display: block;
  width: auto;
  max-width: none;
  height: 3.2cqw;
  color: #fff;
}

/* ---------- state label ---------- */

.pk .pk-state {
  position: absolute;
  left: 4.5cqw;
  right: 4.5cqw;
  top: 14.4cqw;
  display: flex;
  align-items: center;
  gap: 1.5cqw;
  height: 4cqw;
  font: 500 max(3.1cqw, 9.5px)/1 var(--pk-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(243, 239, 230, 0.62);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.pk .pk-pips {
  display: flex;
  gap: max(0.7cqw, 2px);
}

.pk .pk-pip {
  width: max(1.15cqw, 3px);
  height: max(1.15cqw, 3px);
  border-radius: 50%;
  background: rgba(243, 239, 230, 0.26);
}

.pk[data-pk-state="guess"] .pk-pip:nth-child(1),
.pk[data-pk-state="corrected"] .pk-pip:nth-child(-n + 2),
.pk[data-pk-state="context"] .pk-pip {
  background: var(--pk-amber);
}

.pk[data-pk-state="guess"] .pk-state {
  color: var(--pk-amber);
}

.pk[data-pk-state="corrected"] .pk-state,
.pk[data-pk-state="context"] .pk-state {
  color: rgba(243, 239, 230, 0.82);
}

/* ---------- transcript ---------- */

.pk .pk-view {
  position: absolute;
  left: 0;
  right: 0;
  top: 22.4cqw;
  bottom: 0;
  padding: 0 4.5cqw;
  overflow: hidden;
  overflow: clip;                    /* clipped, and never a scroll container of its own */
  /* One finger still scrolls the page; two fingers are read as a pinch by the script. */
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36cqw - var(--pk-btn)), rgba(0, 0, 0, 0) calc(100% - 12cqw - var(--pk-btn)));
  mask-image: linear-gradient(to bottom, #000 calc(100% - 36cqw - var(--pk-btn)), rgba(0, 0, 0, 0) calc(100% - 12cqw - var(--pk-btn)));
}

.pk .pk-lines {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: calc(5.1cqw * var(--pk-size));
}

.pk .pk-line {
  margin: 0 0 calc(2.6cqw + 0.56em);
  padding: 0;
}

.pk .pk-tr,
.pk .pk-or {
  position: relative;
  padding: 0;
  overflow-wrap: break-word;
  text-wrap: wrap;
}

/* The translation leads. */
.pk .pk-tr {
  margin: 0;
  font: 400 1em/1.22 var(--pk-geo);
  color: var(--pk-ink);
}

/* The original follows: smaller, grey, italic. */
.pk .pk-or {
  margin: calc(0.9cqw + 0.06em) 0 0;
  font: italic 400 0.64em/1.3 var(--pk-sans);
  color: var(--pk-dim);
}

/* While a line arrives, the final reading sits unseen in the same cell as what is shown,
   so the line has its full height from the start. */
.pk .pk-live {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.pk .pk-now,
.pk .pk-ghost {
  grid-area: 1 / 1;
  min-width: 0;
}

.pk .pk-ghost {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Reduced motion: the guess is the plain line, in amber. */
.pk .pk-guessing .pk-tr {
  color: var(--pk-amber);
}

.pk .pk-guessing .pk-or {
  color: rgba(255, 180, 46, 0.58);
}

/* While a line arrives: the settled part, the part still to come, and the glyphs over it. */
.pk .pk-rest {
  color: transparent;
}

.pk .pk-fx {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  font-style: normal;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.pk .pk-g {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pk-amber);
}

.pk .pk-g::before {
  content: attr(data-g);
  font: 500 0.64em/1 var(--pk-mono);
  white-space: pre;
}

.pk .pk-or .pk-g::before {
  font-size: 0.74em;
}

.pk .pk-or .pk-g,
.pk .pk-or .pk-cur {
  color: rgba(255, 180, 46, 0.74);
}

.pk .pk-g[hidden],
.pk .pk-cur[hidden] {
  display: none;
}

.pk .pk-cur {
  position: absolute;
  left: 0;
  top: 0;
  width: 0.46em;
  height: 0.52em;
  margin-top: -0.26em;
  border-radius: 0.05em;
  background: currentColor;
  color: var(--pk-amber);
}

/* The one word that context changes. */
.pk .pk-fix {
  position: relative;
}

.pk .pk-fix-new {
  opacity: 0;
}

.pk .pk-fix-old,
.pk .pk-fix-hi {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.pk .pk-fix-old {
  opacity: 0;
}

.pk .pk-fix-hi {
  color: var(--pk-amber);
}

/* ---------- controls ---------- */

.pk .pk-dock {
  position: absolute;
  left: 4.5cqw;
  right: 4.5cqw;
  bottom: 10.4cqw;
  display: flex;
  align-items: center;
  gap: 3cqw;
}

.pk .pk-say {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--pk-btn);
  height: var(--pk-btn);
  margin: 0;
  padding: 0;
  border: max(0.3cqw, 1px) solid rgba(255, 180, 46, 0.62);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 180, 46, 0.32), rgba(255, 180, 46, 0.17) 72%),
    #15120c;
  box-shadow: 0 0 7cqw rgba(255, 180, 46, 0.17), inset 0 0.3cqw 0.7cqw rgba(255, 255, 255, 0.07);
  color: var(--pk-amber);
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.pk .pk-say svg {
  display: block;
  width: 44%;
  height: 44%;
  max-width: none;
  pointer-events: none;
}

/* A faint ring: an invitation before the first press. */
.pk .pk-say::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--pk-amber);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.pk .pk-say:focus-visible {
  outline: max(0.5cqw, 2px) solid var(--pk-ink);
  outline-offset: max(0.8cqw, 2px);
  border-radius: 50%;
}

.pk .pk-size {
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  height: max(11.4cqw, 44px);
  padding: 0 3.8cqw 0 3.6cqw;
}

.pk .pk-pill {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 50%;
  height: 11.4cqw;
  margin-top: -5.7cqw;
  border: max(0.22cqw, 1px) solid rgba(243, 239, 230, 0.14);
  border-radius: 5.7cqw;
  background: rgba(24, 23, 20, 0.8);
  pointer-events: none;
}

.pk .pk-a {
  flex: none;
  font: 500 max(3.1cqw, 8px)/1 var(--pk-geo);
  color: rgba(243, 239, 230, 0.62);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.pk .pk-val {
  flex: none;
  min-width: 4.3ch;
  font: 700 max(3.3cqw, 9px)/1 var(--pk-geo);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-align: right;
  color: var(--pk-amber);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* The native range. Its inner parts are sized in em off this font-size. */
.pk .pk-range {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--pk-amber);
  font-size: max(4cqw, 12px);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: pan-y;
}

.pk .pk-range::-webkit-slider-runnable-track {
  height: 2em;
  border: 0;
  background:
    linear-gradient(to right, var(--pk-amber) calc(var(--pk-p) * 100%), rgba(243, 239, 230, 0.22) 0)
    center / calc(100% - 2em) 0.17em no-repeat;
}

.pk .pk-range::-webkit-slider-thumb {
  width: 2em;
  height: 2em;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: radial-gradient(circle at center, var(--pk-amber) 0, var(--pk-amber) calc(0.5em - 0.7px), rgba(255, 180, 46, 0) 0.5em);
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.pk .pk-range::-moz-range-track {
  height: 2em;
  border: 0;
  background:
    linear-gradient(to right, var(--pk-amber) calc(var(--pk-p) * 100%), rgba(243, 239, 230, 0.22) 0)
    center / calc(100% - 2em) 0.17em no-repeat;
}

.pk .pk-range::-moz-range-thumb {
  width: 2em;
  height: 2em;
  border: 0;
  border-radius: 0;
  background: radial-gradient(circle at center, var(--pk-amber) 0, var(--pk-amber) calc(0.5em - 0.7px), rgba(255, 180, 46, 0) 0.5em);
  box-shadow: none;
}

/* Keyboard focus: a ring round the thumb, and the pill lights up. */
.pk .pk-range:focus-visible::-webkit-slider-thumb {
  background: radial-gradient(circle at center, var(--pk-amber) 0, var(--pk-amber) calc(0.5em - 0.7px), rgba(255, 180, 46, 0) 0.5em, rgba(243, 239, 230, 0) calc(0.5em + 2px), var(--pk-ink) calc(0.5em + 2.6px), var(--pk-ink) calc(0.5em + 4px), rgba(243, 239, 230, 0) calc(0.5em + 4.7px));
}

.pk .pk-range:focus-visible::-moz-range-thumb {
  background: radial-gradient(circle at center, var(--pk-amber) 0, var(--pk-amber) calc(0.5em - 0.7px), rgba(255, 180, 46, 0) 0.5em, rgba(243, 239, 230, 0) calc(0.5em + 2px), var(--pk-ink) calc(0.5em + 2.6px), var(--pk-ink) calc(0.5em + 4px), rgba(243, 239, 230, 0) calc(0.5em + 4.7px));
}

.pk .pk-range:focus-visible ~ .pk-pill {
  border-color: var(--pk-ink);
  outline: max(0.3cqw, 1px) solid var(--pk-ink);
}

@media (hover: hover) and (pointer: fine) {
  .pk .pk-say:hover {
    border-color: rgba(255, 180, 46, 0.95);
  }

  .pk .pk-size:hover .pk-pill {
    border-color: rgba(243, 239, 230, 0.26);
  }
}

/* ---------- motion: transform and opacity only ---------- */

@media (prefers-reduced-motion: no-preference) {
  .pk .pk-say svg {
    transition: transform 0.16s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .pk .pk-say:active svg {
    transform: scale(0.86);
  }

  .pk:not(.pk-touched) .pk-say::after {
    animation: pk-ring 3.2s cubic-bezier(0.2, 0.7, 0.2, 1) 1.2s infinite;
  }

  /* The page's own Pause stops the ring too, and it waits while its picture is off the stage. */
  html.is-paused .pk .pk-say::after {
    animation-play-state: paused;
  }

  .pk .pk-state-t {
    animation: pk-tick 0.22s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .pk .pk-fx {
    animation: pk-arrive 0.22s linear 0.1s both;
  }

  .pk .pk-fix-old {
    animation: pk-fix-old 0.22s cubic-bezier(0.4, 0, 1, 1) both;
  }

  .pk .pk-fix-hi {
    animation: pk-fix-hi 1.35s linear both;
  }

  .pk .pk-fix-new {
    animation: pk-fix-new 1.35s linear both;
  }
}

@keyframes pk-ring {
  0% { opacity: 0; transform: scale(1); }
  12% { opacity: 0.5; }
  46%, 100% { opacity: 0; transform: scale(1.34); }
}

@keyframes pk-tick {
  from { opacity: 0; transform: translateY(0.5em); }
  to { opacity: 1; transform: none; }
}

@keyframes pk-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pk-fix-old {
  from { opacity: 1; transform: translateY(-50%); }
  to { opacity: 0; transform: translateY(calc(-50% - 0.16em)); }
}

@keyframes pk-fix-hi {
  0%, 5% { opacity: 0; }
  20%, 55% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes pk-fix-new {
  0%, 55% { opacity: 0; }
  100% { opacity: 1; }
}