/*
 * The photo tool (2026-11-03) on ui/ToolBox: its own desk canvas (the box, the views' crossfade, the panes and the chips
 * are the ui parts'), the empty desk's viewfinder, the visitor's own page, the day's limit, the score/photo switch, and
 * the foot's own pieces: the way in by camera, the drag hint and the three samples.
 */


/* ---------- the canvas: a desk under a soft lamp, the same in both themes ---------- */
.scn-canvas { aspect-ratio: 16 / 11;
  background: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--main-dark-from) 16%, transparent), transparent 70%), radial-gradient(90% 70% at 30% 8%, var(--white-12), transparent 60%), linear-gradient(160deg, var(--desk-top), var(--desk-bottom)); }
.scn-canvas::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(130% 120% at 50% 45%, transparent 55%, var(--black-55)); }

/* empty: a viewfinder over a ghost page, the whole desk a button */
.scn-empty { position: relative; display: grid; place-items: center; width: 100%; height: 100%; cursor: pointer; border-radius: 18px; }
.scn-empty:focus-visible { outline: 2px solid var(--main-dark-from); outline-offset: -6px; }
.scn-ghost { position: absolute; inset: 0; }
.scn-ghost-page { position: absolute; top: 12%; bottom: -6%; inset-inline: 27%; display: grid; align-content: start; gap: 4.2cqi; padding: 6cqi 5cqi; border-radius: 4px 4px 0 0; background: var(--white-7); border: 1px solid var(--white-18); box-shadow: 0 30px 60px -30px var(--black-80);
  transition: translate var(--d-enter) var(--ease-out), background-color var(--d-enter) ease, border-color var(--d-enter) ease; }
.scn-ghost-page i { display: block; height: 3.4cqi; background: repeating-linear-gradient(180deg, var(--white-18) 0 1px, transparent 1px 0.85cqi); }
.scn-vf { position: absolute; width: 6cqi; height: 6cqi; border: 0 solid var(--white-60); transition: translate var(--d-enter) var(--ease-out), border-color var(--d-enter) ease; }
.scn-vf[data-c='1'] { top: 6%; inset-inline-start: 21%; border-top-width: 2.5px; border-inline-start-width: 2.5px; border-start-start-radius: 10px; }
.scn-vf[data-c='2'] { top: 6%; inset-inline-end: 21%; border-top-width: 2.5px; border-inline-end-width: 2.5px; border-start-end-radius: 10px; }
.scn-vf[data-c='3'] { bottom: 6%; inset-inline-start: 21%; border-bottom-width: 2.5px; border-inline-start-width: 2.5px; border-end-start-radius: 10px; }
.scn-vf[data-c='4'] { bottom: 6%; inset-inline-end: 21%; border-bottom-width: 2.5px; border-inline-end-width: 2.5px; border-end-end-radius: 10px; }
.scn-empty-t { position: relative; z-index: 3; display: grid; justify-items: center; gap: 6px; max-width: 78%; padding: 18px 26px 16px; border-radius: 22px; text-align: center; background: color-mix(in srgb, var(--desk-bottom) 55%, transparent); border: 1px solid var(--white-15); box-shadow: 0 18px 40px -20px var(--black-90); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  transition: translate var(--d-enter) var(--ease-out), border-color var(--d-enter) ease; }
.scn-empty-ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 16px; background: linear-gradient(160deg, var(--main-dark-from), var(--main-dark-to)); color: var(--on-main-dark); box-shadow: inset 0 1px 0 var(--white-30), 0 10px 22px -10px var(--black-80); transition: scale var(--d-enter) var(--ease-out); }
.scn-empty-ico .i { width: 25px; height: 25px; }
.scn-empty-t b { font-size: var(--text-title-3); line-height: var(--lh-title-3); font-weight: 800; }
.scn-empty-t small { color: var(--white-65); font-size: var(--text-footnote); line-height: var(--lh-footnote); }
@media (hover: hover) and (pointer: fine) {
  .scn-empty:hover .scn-ghost-page { translate: 0 -6px; background: var(--white-7); }
  .scn-empty:hover .scn-vf[data-c='1'], .scn-empty:hover .scn-vf[data-c='2'] { translate: 0 6px; }
  .scn-empty:hover .scn-vf[data-c='3'], .scn-empty:hover .scn-vf[data-c='4'] { translate: 0 -6px; }
  .scn-empty:hover .scn-empty-ico { scale: 1.06; }
}
.scn-empty:active .scn-empty-t { translate: 0 1px; }
/* a file over the box: the frame closes in and lights */
.scn-canvas.drag .scn-vf { border-color: var(--main-dark-from); }
/* the page is right to left: the start corners (1, 3) stand on the right and close in leftwards */
.scn-canvas.drag .scn-vf[data-c='1'], .scn-canvas.drag .scn-vf[data-c='3'] { translate: -3cqi 0; }
.scn-canvas.drag .scn-vf[data-c='2'], .scn-canvas.drag .scn-vf[data-c='4'] { translate: 3cqi 0; }
.scn-canvas.drag .scn-ghost-page { background: color-mix(in srgb, var(--main-dark-from) 16%, transparent); border-color: color-mix(in srgb, var(--main-dark-from) 60%, transparent); }
.scn-canvas.drag .scn-empty-t { border-color: color-mix(in srgb, var(--main-dark-from) 60%, transparent); }

/* the visitor's own page: shown as it is, a band reads it */
.scn-own { position: relative; display: grid; place-items: center; padding: 7% 8% 5%; overflow: hidden; }
.scn-own img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 3px; box-shadow: 0 30px 50px -24px var(--black-90), 0 2px 6px var(--black-20); }
.scn-own-band { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 14cqi; opacity: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--main-dark-from) 38%, transparent), transparent); }
.scn-canvas[data-phase='reading'][data-step='1'] .scn-own-band { animation: scn-band 1900ms linear forwards; }
.scn-pdf { display: grid; justify-items: center; gap: 12px; }
.scn-pdf-page { position: relative; display: grid; align-content: start; gap: 2.2cqi; width: 26cqi; aspect-ratio: 0.72; padding: 5cqi 3.4cqi; border-radius: 4px; background: var(--paper); box-shadow: 0 24px 40px -20px var(--black-90); rotate: -3deg; }
.scn-pdf-page b { position: absolute; top: 1.6cqi; inset-inline-end: 1.6cqi; padding: 2px 8px; border-radius: 6px; background: var(--danger); color: var(--white); font-size: var(--text-caption); font-weight: 800; }
.scn-pdf-page i { display: block; height: 2.2cqi; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--paper-ink) 55%, transparent) 0 1px, transparent 1px 0.55cqi); }
.scn-pdf small { max-width: 60cqi; color: var(--white-65); font-size: var(--text-footnote); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the day's limit */
.scn-limit { position: relative; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 8%; text-align: center; }
.scn-limit-ico { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--white-10); border: 1px solid var(--white-15); color: var(--main-dark-from); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.scn-limit-ico .i { width: 28px; height: 28px; }
.scn-limit b { font-size: var(--text-title-2); line-height: var(--lh-title-2); font-weight: 800; }

/* the chips on the desk: the state at the start, the trial or the score/photo switch at the end */
.scn-switch { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 4; display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--desk-bottom) 60%, transparent); border: 1px solid var(--white-15); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.scn-switch button { height: 28px; padding: 0 12px; border-radius: var(--radius-pill); color: var(--white-65); font-size: var(--text-label); font-weight: 700; transition: background-color var(--d-default) ease, color var(--d-default) ease; }
.scn-switch button[aria-pressed='true'] { background: var(--white); color: var(--score-ink); box-shadow: 0 2px 6px var(--black-20); }
@media (hover: hover) and (pointer: fine) { .scn-switch button[aria-pressed='false']:hover { color: var(--white); } }
.scn-switch button:active { scale: 0.96; }
@keyframes scn-band { 0% { transform: translateX(7cqi); opacity: 0; } 6%, 94% { opacity: 1; } 100% { transform: translateX(79cqi); opacity: 0; } }
@media (max-width: 479px) { .scn-trial { display: none; } .scn-empty-t { padding: 14px 18px 12px; } .scn-empty-ico { width: 44px; height: 44px; } }
/* a phone: a square desk, the page lower, so the chips sit above it and never on its title */
@media (max-width: 559px) { .scn-canvas { aspect-ratio: 1 / 1; } }

/* the foot's own pieces */
.scn-hint { color: var(--fg-muted); font-size: var(--text-subhead); line-height: var(--lh-subhead); }
.scn-cam { display: none; }
@media (pointer: coarse) { .scn-cam { display: inline-flex; } }
/* the samples: three small photographed pages */
.scn-samples { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--fg) 8%, transparent); }
.scn-samples-t { color: var(--fg-muted); font-size: var(--text-footnote); line-height: var(--lh-footnote); font-weight: 600; }
.scn-samples-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.scn-sample { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 10px; border-radius: 14px; text-align: start; background: color-mix(in srgb, var(--surface) 60%, transparent); border: 1px solid var(--edge);
  transition: translate var(--d-default) var(--ease-out), border-color var(--d-default) ease, background-color var(--d-default) ease, box-shadow var(--d-default) ease; }
.scn-sample:active { scale: 0.97; }
.scn-thumb { display: grid; align-content: center; gap: 4px; flex: none; width: 30px; height: 38px; padding: 0 4px; border-radius: 2px; background: var(--paper); rotate: -5deg; box-shadow: 0 6px 10px -5px var(--black-55), 0 0 0 1px var(--black-6); transition: rotate var(--d-enter) var(--ease-out); }
.scn-thumb i { display: block; height: 7px; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--paper-ink) 55%, transparent) 0 1px, transparent 1px 1.5px); }
.scn-sample[data-look='old'] .scn-thumb { background: var(--paper-old); rotate: 4deg; }
.scn-sample[data-look='phone'] .scn-thumb { background: linear-gradient(118deg, var(--paper) 55%, color-mix(in srgb, var(--paper) 78%, var(--paper-ink))); rotate: -9deg; }
.scn-sample-t { display: grid; min-width: 0; line-height: 1.35; }
.scn-sample-t b { font-size: var(--text-subhead); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a foreign title (a sample's piece is the CMS's, its name the library's) reads from its own start, cut at its own end */
.scn-sample-t b[dir='ltr'] { text-align: end; }
.scn-sample-t small { color: var(--fg-muted); font-size: var(--text-footnote); }
@media (hover: hover) and (pointer: fine) {
  .scn-sample:hover { translate: 0 -1px; border-color: var(--edge-strong); background: var(--surface); box-shadow: var(--shadow-tile); }
  .scn-sample:hover .scn-thumb { rotate: 0deg; }
  .scn-sample:hover b { color: var(--accent-ink); }
}
@media (max-width: 559px) { .scn-samples-row { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
/*
 * The sample page (Sheet.tsx), a music box (dir=ltr: inline-start is left). Three photographs of a page, each its own
 * paper, ink, tilt and light (`data-look`); then the reading, one class a stage: `prep` (corners found, the page turns
 * flat into them), `reading` (a band crosses it, each note lights as the band reaches it), `again` (rings on the hard
 * spots, amber then green), `clean` (white paper, black ink, the hands' rails). Sizes in the canvas's container units,
 * so the page scales as one picture.
 */

.scn-view { position: relative; }
.scn-sheet { position: absolute; inset: 0; perspective: 1400px;
  --look-paper: var(--paper); --look-ink: var(--paper-ink); --look-filter: blur(0.35px) saturate(0.9); --tilt: rotate(-2.4deg); --fx: 1; --grain: 0.12; }
.scn-sheet[data-look='old'] { --look-paper: var(--paper-old); --look-ink: var(--paper-old-ink); --look-filter: blur(0.5px) contrast(0.88) sepia(0.18); --tilt: rotate(2.8deg) translateY(1cqi); --grain: 0.32; }
.scn-sheet[data-look='phone'] { --look-filter: blur(0.45px) saturate(0.85) brightness(0.96); --tilt: rotateX(15deg) rotate(-4.2deg) scale(0.92); --grain: 0.16; }
.scn-sheet.flat { --tilt: none; --fx: 0.5; }
.scn-sheet.clean { --look-paper: var(--white); --look-ink: var(--score-ink); --look-filter: none; --fx: 0; --grain: 0; }

.scn-paper { position: absolute; top: 7%; inset-inline: 10%; min-height: 104%; padding: 4.4cqi 4cqi 0; border-radius: 2px; background-color: var(--look-paper); color: var(--look-ink); filter: var(--look-filter);
  box-shadow: 0 2.6cqi 5cqi -2cqi var(--black-90), 0 0.3cqi 0.8cqi var(--black-20); transform: var(--tilt); transform-origin: 50% 35%;
  transition: transform 1100ms var(--ease-in-out), background-color 800ms ease, color 800ms ease, filter 800ms ease; }
.scn-sheet.prep .scn-paper { transition-delay: 420ms, 0s, 0s, 0s; }

/* the page's head: the title in the middle, the composer at the end, as a printed score has them */
.scn-head { display: grid; justify-items: center; gap: 0.3cqi; margin-bottom: 0.8cqi; }
.scn-head b { font-size: 2.6cqi; line-height: 1.25; font-weight: 800; }
.scn-head small { justify-self: end; font-size: 1.4cqi; line-height: 1.3; font-weight: 500; opacity: 0.78; }

/* a system: two staves held by one line at the start; the bass staff drawn up to its treble */
.scn-sys { position: relative; display: grid; margin-bottom: 0.4cqi; border-radius: 4px; outline: 1px solid transparent; outline-offset: 0.4cqi; transition: outline-color 400ms ease; }
.scn-sys::before { content: ''; position: absolute; inset-inline-start: 0; top: 3.94cqi; bottom: 3.94cqi; width: 1px; background: currentColor; opacity: 0.7; }
.scn-st { position: relative; }
.scn-st + .scn-st { margin-top: -2.4cqi; }
.scn-st svg { display: block; width: 100%; height: auto; overflow: visible; }
/* each hand's rail, in its colour once the score is clean */
.scn-st::before { content: ''; position: absolute; inset-inline-start: -1.4cqi; top: 3.94cqi; height: 3.15cqi; width: 0.45cqi; border-radius: 1cqi; background: var(--hand-right); opacity: 0; scale: 1 0.4; transition: opacity 500ms ease, scale 500ms var(--ease-out); }
.scn-st[data-hand='left']::before { background: var(--hand-left); }
.scn-sheet.clean .scn-st::before { opacity: 1; scale: 1; transition-delay: 300ms; }

.scn-st .staff .line { stroke: var(--look-ink); stroke-opacity: 0.55; transition: stroke 800ms ease; }
.scn-st .staff :is(.glyph, .stem, .beam, .ledger, .barline) { fill: var(--look-ink); stroke: var(--look-ink); transition: fill 800ms ease, stroke 800ms ease; }
.scn-st .staff .tie { stroke: var(--look-ink); transition: stroke 800ms ease; }
.scn-st .staff .ev :is(.glyph, .stem, .beam) { transition: fill 700ms ease, stroke 700ms ease; }

/* the photo's own light: a book's binding, an old copy's fold and dark edges, a phone's shadow; corrected, then gone */
.scn-fx { position: absolute; inset: 0; pointer-events: none; opacity: var(--fx); transition: opacity 900ms ease;
  background: linear-gradient(90deg, var(--black-20), transparent 8%), radial-gradient(120% 70% at 75% 0%, var(--white-12), transparent 60%), linear-gradient(180deg, transparent 60%, var(--black-8)); }
.scn-sheet[data-look='old'] .scn-fx { background: radial-gradient(150% 110% at 50% 40%, transparent 52%, color-mix(in srgb, var(--paper-old-ink) 28%, transparent)), linear-gradient(180deg, transparent 49.6%, var(--black-8) 49.8%, var(--white-15) 50.2%, transparent 50.6%); }
.scn-sheet[data-look='phone'] .scn-fx { background: linear-gradient(118deg, transparent 54%, var(--black-18) 56%, var(--black-20) 74%, var(--black-18)), radial-gradient(90% 60% at 20% 0%, var(--white-12), transparent 60%); }
.scn-grain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: multiply; opacity: var(--grain); transition: opacity 800ms ease; }

/* step 0: the page's corners are found; the page turns flat into them */
.scn-corner { position: absolute; z-index: 3; width: 4.4cqi; height: 4.4cqi; border: 0 solid var(--main-dark-from); opacity: 0; scale: 1.4; transition: opacity 300ms ease, scale 500ms var(--ease-out); filter: drop-shadow(0 0 6px var(--black-55)); }
.scn-corner[data-c='1'] { top: 5.4%; inset-inline-start: 8.6%; border-top-width: 2.5px; border-inline-start-width: 2.5px; }
.scn-corner[data-c='2'] { top: 5.4%; inset-inline-end: 8.6%; border-top-width: 2.5px; border-inline-end-width: 2.5px; }
.scn-corner[data-c='3'] { bottom: 4%; inset-inline-start: 8.6%; border-bottom-width: 2.5px; border-inline-start-width: 2.5px; }
.scn-corner[data-c='4'] { bottom: 4%; inset-inline-end: 8.6%; border-bottom-width: 2.5px; border-inline-end-width: 2.5px; }
.scn-sheet.prep .scn-corner { opacity: 1; scale: 1; }
.scn-sheet.prep .scn-corner:nth-of-type(2) { transition-delay: 60ms; }
.scn-sheet.prep .scn-corner:nth-of-type(3) { transition-delay: 120ms; }
.scn-sheet.prep .scn-corner:nth-of-type(4) { transition-delay: 180ms; }

/* step 1: a band crosses the page; each note takes the accent as the band reaches it (its x, the same on each system) */
.scn-band { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; z-index: 2; width: 14cqi; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 22%, transparent), transparent); }
.scn-sheet.reading .scn-band { animation: scn-band 1900ms linear forwards; }
.scn-sheet.read .scn-sys { outline-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.scn-sheet.read .scn-st .staff .ev :is(.glyph, .stem, .beam) { fill: var(--accent); stroke: var(--accent); transition: fill 160ms ease, stroke 160ms ease; transition-delay: calc(var(--x, 0) * 1900ms); }

/* step 2: the hard spots, looked at again: a ring, amber, then green */
.scn-ring { position: absolute; z-index: 2; inset-inline-start: calc(var(--rx) * 100%); top: calc(var(--ry) * 100%); width: 4.4cqi; height: 4.4cqi; translate: -50% -50%; border-radius: var(--radius-pill); border: 2px solid var(--reward); opacity: 0; scale: 0.6; }
.scn-sheet.again .scn-ring { animation: scn-ring 1300ms var(--ease-out) calc(var(--ri) * 180ms) forwards; }
@keyframes scn-ring {
  0% { opacity: 0; scale: 0.6; }
  22% { opacity: 1; scale: 1; border-color: var(--reward); box-shadow: 0 0 0 0.6cqi color-mix(in srgb, var(--reward) 22%, transparent); }
  60% { border-color: var(--reward); }
  78%, 100% { opacity: 1; scale: 1; border-color: var(--success); box-shadow: 0 0 0 0.6cqi color-mix(in srgb, var(--success) 22%, transparent); }
}

/* played: each sounding note in its hand's colour, at once */
.scn-st[data-hand='right'] .staff .ev.on :is(.glyph, .stem, .beam) { fill: var(--hand-right); stroke: var(--hand-right); transition: none; }
.scn-st[data-hand='left'] .staff .ev.on :is(.glyph, .stem, .beam) { fill: var(--hand-left); stroke: var(--hand-left); transition: none; }

@media (prefers-reduced-motion: reduce) {
  .scn-paper { transition-duration: 0s, 600ms, 600ms, 600ms; }
  .scn-sheet.reading .scn-band { animation: none; }
  .scn-sheet.read .scn-st .staff .ev :is(.glyph, .stem, .beam) { transition-delay: 0s; }
}
@media (max-width: 559px) {
  .scn-paper { top: 16%; inset-inline: 7%; }
  .scn-corner[data-c='1'], .scn-corner[data-c='2'] { top: 14%; }
  .scn-corner[data-c='1'], .scn-corner[data-c='3'] { inset-inline-start: 5.4%; }
  .scn-corner[data-c='2'], .scn-corner[data-c='4'] { inset-inline-end: 5.4%; }
}
/*
 * «پیانوم چطور نت رو می‌خونه؟»: four ui/StepCards in one row from 1200 px, two from 768, one below; this file draws their
 * close-ups. The close-ups play as their card scrolls in; where a browser cannot tie motion to the scroll, or motion is
 * reduced, they show their end.
 */

.phw { padding-block: 0 var(--section); }
.phw-cards { display: grid; gap: 16px; }
@media (min-width: 768px) { .phw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .phw-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* the cards are ui/StepCard; this file draws only their close-ups */

/* 1: a page turns flat into the frame that was found around it */
.phw-frame { position: absolute; inset: 14% 22%; }
.phw-frame i { position: absolute; width: 14%; aspect-ratio: 1; border: 0 solid var(--main-dark-from); }
.phw-frame i:nth-child(1) { top: -2%; inset-inline-start: -3%; border-top-width: 2px; border-inline-start-width: 2px; }
.phw-frame i:nth-child(2) { top: -2%; inset-inline-end: -3%; border-top-width: 2px; border-inline-end-width: 2px; }
.phw-frame i:nth-child(3) { bottom: -2%; inset-inline-start: -3%; border-bottom-width: 2px; border-inline-start-width: 2px; }
.phw-frame i:nth-child(4) { bottom: -2%; inset-inline-end: -3%; border-bottom-width: 2px; border-inline-end-width: 2px; }
.phw-page { position: absolute; inset: 14% 22%; display: grid; align-content: center; gap: 9%; padding: 0 10%; border-radius: 2px; background: var(--paper); box-shadow: 0 18px 30px -16px var(--black-90); }
.phw-page i { display: block; height: 4.4cqi; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--paper-ink) 60%, transparent) 0 1px, transparent 1px 1.1cqi); }

/* 2: one measure, each sign numbered where it stands, named in the legend under it */
.phw-bar { position: absolute; top: 6%; inset-inline: 10%; }
.phw-bar > div svg { display: block; width: 100%; height: auto; }
.phw-mark { position: absolute; inset-inline-start: calc(var(--x) * 100%); translate: -50% 0; display: grid; place-items: center; width: 5.6cqi; height: 5.6cqi; border-radius: var(--radius-pill); background: var(--main-dark-from); color: var(--on-main-dark); font-size: 3.6cqi; font-weight: 800; box-shadow: 0 0 0 3px color-mix(in srgb, var(--main-dark-from) 25%, transparent); }
/* the marks stand above and below the staff by turns, so neighbours never touch */
.phw-mark[data-side='high'] { top: 4%; }
.phw-mark[data-side='low'] { top: 74%; }
.phw-legend { position: absolute; inset-inline: 6%; bottom: 6%; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqi 4cqi; }
.phw-legend li { display: flex; align-items: center; gap: 2.4cqi; color: var(--white); font-size: 3.9cqi; font-weight: 700; white-space: nowrap; }
.phw-legend span { display: grid; place-items: center; flex: none; width: 5.6cqi; height: 5.6cqi; border-radius: var(--radius-pill); background: var(--white-12); color: var(--main-dark-from); font-size: 3.2cqi; font-weight: 800; }

/* 3: two engines read a passage; where they part, a third look decides */
.phw-again { display: grid; align-content: center; gap: 1cqi; padding: 3cqi 5cqi; }
.phw-eng { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4cqi; }
.phw-eng-t { justify-self: start; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--white-10); color: var(--white-65); font-size: var(--text-caption); font-weight: 700; white-space: nowrap; }
.phw-eng[data-k='2'] .phw-eng-t { background: color-mix(in srgb, var(--success) 26%, transparent); color: var(--white); }
.phw-eng-st svg { margin-block: -10% -8%; }
.phw-eng[data-k='0'] .staff .ev[data-i='2'] :is(.glyph, .stem) { fill: var(--main-dark-from); stroke: var(--main-dark-from); }
.phw-eng[data-k='1'] .staff .ev[data-i='2'] :is(.glyph, .stem) { fill: var(--reward); stroke: var(--reward); }
.phw-eng[data-k='2'] .staff .ev[data-i='2'] :is(.glyph, .stem) { fill: var(--hand-left-light); stroke: var(--hand-left-light); }

/* 4: the score, each hand in its colour */
.phw-gs { position: absolute; inset-inline: 9% 7%; top: 50%; translate: 0 -46%; display: grid; }
.phw-gs > div + div { margin-top: -9%; }
.phw-gs [data-hand='right'] .staff .ev :is(.glyph, .stem, .beam) { fill: var(--main-dark-from); stroke: var(--main-dark-from); }
.phw-gs [data-hand='left'] .staff .ev :is(.glyph, .stem, .beam) { fill: var(--hand-left-light); stroke: var(--hand-left-light); }
.phw-hand { position: absolute; inset-inline-end: 5%; display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--white-10); font-size: var(--text-caption); font-weight: 700; }
.phw-hand::before { content: ''; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--main-dark-from); }
.phw-hand[data-hand='left']::before { background: var(--hand-left-light); }
.phw-hand[data-hand='right'] { top: 7%; }
.phw-hand[data-hand='left'] { bottom: 7%; }

/* the close-ups play as their card scrolls in */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .phw-page { animation: phw-flat linear both; animation-timeline: view(); animation-range: entry 30% cover 42%; }
    .phw-frame i { animation: phw-find linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
    .phw-mark, .phw-legend li { animation: phw-name linear both; animation-timeline: view(); animation-range: entry calc(30% + var(--k) * 12%) cover calc(30% + var(--k) * 5%); }
    .phw-eng { animation: phw-row linear both; animation-timeline: view(); animation-range: entry calc(20% + var(--k, 0) * 15%) cover 35%; }
    .phw-eng[data-k='1'] { --k: 1; } .phw-eng[data-k='2'] { --k: 2; }
    .phw-gs [data-hand] .staff .ev :is(.glyph, .stem, .beam) { animation: phw-ink linear both; animation-timeline: view(); animation-range: entry 40% cover 45%; }
  }
}
@keyframes phw-flat { from { rotate: 11deg; scale: 0.86; translate: 6% 4%; } to { rotate: 0deg; scale: 1; translate: none; } }
@keyframes phw-find { from { opacity: 0; scale: 1.5; } to { opacity: 1; scale: 1; } }
@keyframes phw-name { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
@keyframes phw-row { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: none; } }
@keyframes phw-ink { from { fill: var(--white); stroke: var(--white); } }