/* Tape Journal: the toy recorder in the hero (recorder.js builds it in every [data-recorder]).
   Every rule is scoped under .recorder. Sizes are cqw of .recorder, so the toy is one drawing
   scaled from 288 to 560 px (only legible type is clamped, inside fixed boxes): its height is a
   fixed ratio of its width, which aspect-ratio reserves before the script runs. */

.recorder {
  --rc-mon: #a8364a; --rc-tue: var(--tj-yellow, #dcae3c); --rc-wed: var(--tj-teal, #4cc4a4);
  --rc-thu: #71aff4; --rc-fri: #bd97e7; --rc-sat: #e989a6; --rc-sun: #8fbb69;
  --rc-day: var(--rc-wed); --rc-paper: var(--tj-paper, #f6efe1); --rc-ink: var(--tj-ink, #2b2620);
  --rc-soft: var(--tj-ink-soft, #8a8174); --rc-cream: var(--tj-cream, #efe7d6); --rc-marker: var(--tj-marker, #f3d35a);
  --rc-glyph: #c4bdb1; --rc-travel: 1.35cqw;
  --rc-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  container-type: inline-size; position: relative; display: block;
  width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 1000 / 1267;
  color: var(--rc-cream); -webkit-tap-highlight-color: transparent;
}

.recorder .rc { position: relative; padding-top: 1.6cqw; line-height: 1.2; text-align: left; }
.recorder .rc *, .recorder .rc *::before, .recorder .rc *::after { box-sizing: border-box; }
.recorder .rc-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- The paper ---------- */
.recorder .rc-paper {
  position: relative; display: flex; flex-direction: column;
  height: 60cqw; padding: 5cqw 5.4cqw 0;
  color: var(--rc-ink);
  background-color: var(--rc-paper);
  background-image: radial-gradient(130% 80% at 40% 0%, rgb(255 255 255 / .45), transparent 60%),
    linear-gradient(rgb(255 255 255 / 0) 70%, rgb(120 95 60 / .07)), var(--rc-noise);
  border-radius: .8cqw .8cqw 1.1cqw 1.1cqw;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .75), inset 0 -1px 0 rgb(120 100 70 / .2),
    0 .4cqw .8cqw -.2cqw rgb(0 0 0 / .5), 0 4cqw 6cqw -3cqw rgb(0 0 0 / .6);
}
/* The two clips the sheet hangs from, as in the app. */
.recorder .rc-paper::before, .recorder .rc-paper::after {
  content: ""; position: absolute; top: -1.6cqw; left: 6.5cqw; width: 11cqw; height: 3.9cqw;
  border-radius: .7cqw .7cqw 1cqw 1cqw;
  background: linear-gradient(#0d0c0b, #0d0c0b) 50% 62% / 46% .32cqw no-repeat, linear-gradient(#3a3631, #1c1a17 70%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 .5cqw .8cqw rgb(0 0 0 / .45);
}
.recorder .rc-paper::after { left: auto; right: 6.5cqw; }

.recorder .rc-head { flex: none; display: flex; align-items: center; gap: 2.4cqw; height: 9cqw; }
.recorder .rc-day {
  font: 700 max(2.9cqw, 10px)/1 var(--f-print); letter-spacing: .1em; color: #2b2620;
  background: var(--rc-day); padding: .44em .56em .36em; border-radius: .26em;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / .14); text-shadow: 0 1px 0 rgb(255 255 255 / .25);
}
.recorder .rc-date { font: 700 7.4cqw/1 var(--f-hand); color: var(--rc-ink); padding-top: .14em; white-space: nowrap; }
.recorder .rc-rules { flex: none; height: 1.1cqw; margin-top: 1.4cqw; border-block: 1px solid #c3b8a4; }

/* The words: older lines fade away at the top once the page scrolls; a cut line fades at the foot. */
.recorder .rc-words {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  font: 400 clamp(14px, 4.15cqw, 20.5px)/1.5 var(--f-read);
  -webkit-mask-image: linear-gradient(transparent, #000 26%), linear-gradient(#000 calc(100% - .9em), transparent);
  -webkit-mask-size: 100% 135%, 100% 100%; -webkit-mask-position: 0 100%, 0 0; -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(transparent, #000 26%), linear-gradient(#000 calc(100% - .9em), transparent);
  mask-size: 100% 135%, 100% 100%; mask-position: 0 100%, 0 0; mask-repeat: no-repeat; mask-composite: intersect;
  transition: -webkit-mask-position .35s, mask-position .35s;
}
.recorder .rc-words.is-faded { -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; }
.recorder .rc-flow {
  position: absolute; left: 0; right: 0; top: 0; padding-top: 2.6cqw; color: var(--rc-ink);
  transition: transform .38s cubic-bezier(.25, .75, .25, 1);
}
.recorder .rc-empty { margin: 3.4cqw 0 0; text-align: center; font-style: italic; color: #6e6457; text-wrap: balance; }

.recorder .rc-take + .rc-take { margin-top: .7em; }
.recorder .rc-splice {
  display: flex; align-items: center; gap: 1.6cqw;
  font: 600 clamp(9.5px, 2.55cqw, 13px)/1 var(--f-print); letter-spacing: .06em; text-transform: uppercase;
  color: #6f6557; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* The splice: a strip of translucent tape across the rule, where a take begins. */
.recorder .rc-tape {
  flex: none; width: 7cqw; height: 2.1cqw; transform: rotate(-4deg);
  background: linear-gradient(90deg, rgb(255 255 255 / .4), rgb(255 255 255 / 0) 35%, rgb(255 255 255 / .3)), rgb(221 210 184 / .92);
  box-shadow: inset 0 0 0 1px rgb(140 122 92 / .3), 0 1px 1.5px rgb(60 40 20 / .18);
  clip-path: polygon(0 8%, 6% 0, 12% 10%, 100% 0, 96% 50%, 100% 100%, 8% 92%, 0 100%, 4% 50%);
}
.recorder .rc-rule { flex: 1; height: 1px; background: #c9bea9; }
.recorder .rc-para { margin: .4em 0 0 7cqw; text-wrap: wrap; }   /* greedy: live words never re-flow earlier lines */
.recorder .rc-w { animation: rc-in .12s ease-out; transition: color .3s; border-radius: .15em; }
.recorder .rc-w.is-soft { color: var(--rc-soft); }
.recorder .rc:not(.is-rec) .rc-w[data-w] { cursor: pointer; }
@media (hover: hover) {
  .recorder .rc:not(.is-rec) .rc-w[data-w]:hover { background: rgb(243 211 90 / .28); }
}
.recorder .rc-caret {
  display: inline-block; width: .13em; height: 1.08em; margin-left: .14em; vertical-align: -.2em;
  background: var(--rc-soft); animation: rc-blink 1.05s linear infinite;
}
.recorder .rc-marker {
  position: absolute; left: 0; top: 0; width: 0; height: 1em; pointer-events: none; opacity: 0;
  background: var(--rc-marker); mix-blend-mode: multiply;
  border-radius: .2em .35em .25em .4em / .3em .4em .35em .3em;
  transition: transform .34s cubic-bezier(.3, .7, .2, 1), width .34s cubic-bezier(.3, .7, .2, 1), opacity .2s;
}
.recorder .rc-marker.is-on { opacity: .78; }
.recorder .rc-marker.is-snap { transition: opacity .2s; }

.recorder .rc-folio {
  flex: none; height: 7cqw; display: flex; align-items: center; justify-content: center;
  font: 600 clamp(9.5px, 2.5cqw, 13px)/1 var(--f-print); letter-spacing: .12em; text-transform: uppercase;
  color: #6f6557; font-variant-numeric: tabular-nums;
}

/* ---------- The machine ---------- */
.recorder .rc-machine {
  position: relative; margin-top: 3.4cqw; padding: 3.2cqw;
  display: grid; grid-template-columns: minmax(0, 1fr) 21.5cqw; grid-template-rows: auto auto; column-gap: 2.8cqw;
  border-radius: 4cqw;
  background-color: #322e29;
  background-image: linear-gradient(180deg, rgb(255 244 228 / .08), rgb(255 244 228 / 0) 35%, rgb(0 0 0 / .14)),
    radial-gradient(120% 70% at 20% 0%, rgb(255 236 210 / .06), transparent 60%), var(--rc-noise);
  box-shadow: inset 0 1px 0 rgb(255 240 220 / .16), inset 0 0 0 1px rgb(0 0 0 / .4),
    inset 0 -.5cqw .8cqw rgb(0 0 0 / .28), 0 .9cqw 0 -.15cqw #1b1815, 0 3cqw 5cqw -2cqw rgb(0 0 0 / .75);
}
.recorder .rc-machine.is-jolt { animation: rc-jolt .2s ease-out; }
.recorder .rc-screw {
  position: absolute; left: 1cqw; top: 1cqw; width: 1.9cqw; height: 1.9cqw; border-radius: 50%;
  background: linear-gradient(#24211e, #24211e) 50% 50% / 62% 17% no-repeat,
    linear-gradient(#24211e, #24211e) 50% 50% / 17% 62% no-repeat,
    radial-gradient(circle at 38% 30%, #a8a197, #5b564f 72%);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .5), 0 1px 0 1px rgb(255 240 220 / .07);
  transform: rotate(16deg);
}
.recorder .rc-screw--b { left: auto; top: auto; right: 1cqw; bottom: 1cqw; transform: rotate(-31deg); }

.recorder .rc-well {
  grid-column: 1; grid-row: 1; position: relative; padding: 1.6cqw; border-radius: 2.4cqw;
  background: #1b1916;
  box-shadow: inset 0 .6cqw 1.2cqw rgb(0 0 0 / .75), inset 0 0 0 1px rgb(0 0 0 / .6), 0 1px 0 rgb(255 240 220 / .09);
}
.recorder .rc-well::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(112deg, rgb(255 255 255 / .07) 0 24%, rgb(255 255 255 / 0) 24.3% 61%, rgb(255 255 255 / .035) 61.3% 71%, rgb(255 255 255 / 0) 71.3%);
}
.recorder .rc-cass {
  display: block; width: 100%; height: auto; aspect-ratio: 1000 / 640; overflow: visible;
  border-radius: 3% / 4.6%; box-shadow: 0 .5cqw .9cqw rgb(0 0 0 / .55);
}
.recorder .rc-print { font-family: var(--f-print); font-weight: 600; }
.recorder .rc-title { font-family: var(--f-hand); font-weight: 700; fill: #1f2961; transition: opacity .16s; }
.recorder .rc-title.is-out { opacity: 0; }
.recorder .rc-dayfill { fill: var(--rc-day); }

.recorder .rc-bottom { grid-column: 1; grid-row: 2; display: flex; gap: 2.2cqw; height: 7.6cqw; margin-top: 2.2cqw; }

/* The status LCD: a backlit dot-matrix strip. */
.recorder .rc-lcd {
  position: relative; flex: 1; min-width: 0; margin: .55cqw; padding: 0 2cqw;
  display: flex; align-items: center; overflow: hidden; border-radius: 1cqw;
  font: 700 4.5cqw/1 var(--f-dot); color: #1c2610; white-space: pre;
  background-color: #c2cf63;
  background-image: radial-gradient(circle, rgb(31 42 18 / .07) .035em, transparent .045em),
    linear-gradient(180deg, #cbd86c, #b6c359);
  background-size: .1em .1em, auto;
  box-shadow: inset 0 .5cqw .9cqw rgb(30 40 10 / .5), inset 0 -1px 0 rgb(255 255 255 / .3),
    0 0 0 .55cqw #11100e, 0 1px 0 .55cqw rgb(255 240 220 / .08);
}
.recorder .rc-lcd::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(170deg, rgb(255 255 255 / .2) 0 38%, rgb(255 255 255 / 0) 38.5%);
}
.recorder .rc-lcd-text { position: relative; display: block; padding-top: .06em; filter: drop-shadow(.04em .06em 0 rgb(31 42 18 / .2)); }
.recorder .rc-lcd-text.is-blink { animation: rc-lcdblink 1.2s linear infinite; }
/* Glyphs Doto lacks (● ▮ ▯ ▶ ■), drawn on the same dot grid. */
.recorder .rc-gl { display: inline-block; position: relative; width: .6em; height: .7em; }
.recorder .rc-gl::before {
  content: ""; position: absolute; left: .05em; top: .1em; width: .5em; height: .5em; background: currentColor;
  -webkit-mask: radial-gradient(circle, #000 .038em, transparent .047em) 0 0 / .1em .1em;
  mask: radial-gradient(circle, #000 .038em, transparent .047em) 0 0 / .1em .1em;
}
.recorder .rc-gl-dot::before { border-radius: 50%; }
.recorder .rc-gl-on::before, .recorder .rc-gl-off::before { left: .1em; top: 0; width: .4em; height: .7em; }
.recorder .rc-gl-off::before { background: transparent; border: .1em solid currentColor; }
.recorder .rc-gl-play::before { top: 0; height: .7em; clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* The counter: three white-on-black drums, m:ss. */
.recorder .rc-counter {
  flex: none; display: flex; align-items: center; gap: .35cqw; padding: .9cqw; border-radius: 1.1cqw;
  background: #0e0d0c; box-shadow: inset 0 .4cqw .7cqw rgb(0 0 0 / .85), 0 1px 0 rgb(255 240 220 / .08);
}
.recorder .rc-drum { position: relative; width: 4.3cqw; height: 5.8cqw; overflow: hidden; border-radius: .45cqw; background: #171513; }
.recorder .rc-drum::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgb(0 0 0 / .8), rgb(0 0 0 / 0) 32%, rgb(255 255 255 / .06) 50%, rgb(0 0 0 / 0) 68%, rgb(0 0 0 / .8));
}
.recorder .rc-strip { display: block; will-change: transform; }
.recorder .rc-strip b { display: block; height: 5.8cqw; font: 600 4.6cqw/5.8cqw var(--f-print); color: #f4efe3; text-align: center; }
.recorder .rc-colon { position: relative; width: 1.1cqw; height: 5.8cqw; }
.recorder .rc-colon::before, .recorder .rc-colon::after {
  content: ""; position: absolute; left: .25cqw; top: 1.7cqw; width: .6cqw; height: .6cqw; border-radius: 50%; background: #d8d1c4;
}
.recorder .rc-colon::after { top: 3.5cqw; }

/* ---------- The keys ---------- */
.recorder .rc-keycol { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; min-height: 0; }
.recorder .rc-lampbar {
  flex: none; height: 4.4cqw; display: flex; align-items: center; justify-content: center; gap: 1cqw;
  font: 700 max(2.3cqw, 9px)/1 var(--f-print); letter-spacing: .14em; color: var(--tj-cream-soft, #b3a999);
  transition: color .25s;
}
.recorder .rc-led {
  width: 1.7cqw; height: 1.7cqw; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #7d2e22, #3b120c 72%);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .55), 0 1px 0 rgb(255 255 255 / .08);
  transition: background .25s, box-shadow .25s;
}
.recorder .rc-bank {
  flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 1.1cqw; padding: 1.1cqw;
  border-radius: 2.6cqw; background: #161513;
  box-shadow: inset 0 .5cqw 1cqw rgb(0 0 0 / .75), 0 1px 0 rgb(255 240 220 / .09);
}
.recorder .rc-key {
  -webkit-appearance: none; appearance: none; position: relative; display: block; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; border-radius: 1.8cqw; font: inherit; color: var(--rc-cream); cursor: pointer;
  background: #0a0908; box-shadow: inset 0 .4cqw .7cqw rgb(0 0 0 / .85);
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.recorder .rc-key::-moz-focus-inner { border: 0; }
.recorder .rc-key:focus-visible { outline: 2px solid var(--rc-cream); outline-offset: .5cqw; }
.recorder .rc-cap {
  --d: 0;
  --skirt: calc((1 - var(--d)) * var(--rc-travel) + .15cqw);
  position: absolute; left: 0; right: 0; top: 0; bottom: var(--rc-travel);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  border-radius: 1.7cqw;
  transform: translateY(calc(var(--d) * var(--rc-travel)));
  background: radial-gradient(130% 100% at 30% 8%, #403b36, #2b2825 55%, #242220), var(--rc-noise);
  background-blend-mode: normal, overlay;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .13), inset 0 -.3cqw .5cqw rgb(0 0 0 / .3),
    0 var(--skirt) 0 #12100e, 0 calc(var(--skirt) + .5cqw) .9cqw rgb(0 0 0 / .55);
}
.recorder .rc-key--play .rc-glyph {
  width: 3.7cqw; height: 4.3cqw; margin-left: .7cqw; background: var(--rc-glyph);
  clip-path: polygon(0 0, 100% 50%, 0 100%); transition: background .2s;
}
.recorder .rc-key--stop .rc-glyph { width: 3.5cqw; height: 3.5cqw; border-radius: .25cqw; background: var(--rc-glyph); }
.recorder .rc.is-play .rc-key--play .rc-glyph { background: #f6f0e4; }

.recorder .rc-key--rec .rc-cap {
  background: radial-gradient(130% 100% at 30% 8%, #ec7866, #d65747 50%, #c04637), var(--rc-noise);
  background-blend-mode: normal, overlay;
  box-shadow: inset 0 1px 0 rgb(255 225 205 / .5), inset 0 -.3cqw .5cqw rgb(90 20 10 / .3),
    0 var(--skirt) 0 #7a291f, 0 calc(var(--skirt) + .5cqw) .9cqw rgb(0 0 0 / .55);
}
.recorder .rc-key--rec .rc-cap::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .25s;
  background: radial-gradient(75% 65% at 50% 36%, rgb(255 205 180 / .6), rgb(255 120 90 / 0) 70%);
}
.recorder .rc-key--rec .rc-glyph {
  position: relative; z-index: 1; width: 4.6cqw; height: 4.6cqw; margin-top: -3cqw; border-radius: 50%;
  background: #fff3ea; box-shadow: inset 0 -.2cqw .3cqw rgb(150 60 40 / .25); transition: box-shadow .25s, background .25s;
}
.recorder .rc-hold {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 1.1cqw; height: max(3.3cqw, 13px); overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: .7cqw;
  font: 700 max(2.15cqw, 9px)/1 var(--f-print); letter-spacing: .12em; color: #fff3ea; background: rgb(60 10 0 / .2);
}
.recorder .rc-hold-fill { position: absolute; inset: 0; background: rgb(255 255 255 / .34); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.recorder .rc-hold span { position: relative; }
.recorder .rc-mini { position: relative; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }

/* The ● key's attention cue (until the first take), and the lamp while recording. */
.recorder .rc-key--rec::before {
  content: ""; position: absolute; inset: -.55cqw; border-radius: 2.3cqw; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 .3cqw rgb(255 120 90 / .55), 0 0 2.6cqw rgb(255 80 50 / .5);
}
.recorder .rc.is-hint:not(.is-holding) .rc-key--rec::before { animation: rc-cue 2.8s ease-in-out 1s infinite; }
.recorder .rc.is-rec .rc-key--rec .rc-cap {
  background: radial-gradient(120% 95% at 50% 30%, #ff8f73, #e95a43 50%, #c9412f), var(--rc-noise);
  background-blend-mode: normal, overlay;
}
.recorder .rc.is-rec .rc-led {
  background: radial-gradient(circle at 40% 35%, #ffe6dc 0 12%, #ff5a33 42%, #d02c16 76%);
  box-shadow: 0 0 1.3cqw .3cqw rgb(255 70 30 / .65), 0 0 0 1px rgb(80 10 0 / .5);
}
.recorder .rc.is-rec .rc-lampbar { color: #ff7b5c; }
.recorder .rc.is-rec .rc-key--rec { box-shadow: inset 0 .4cqw .7cqw rgb(0 0 0 / .85), 0 0 2.6cqw rgb(255 70 30 / .35); }
.recorder .rc.is-rec .rc-key--rec .rc-cap::after { opacity: 1; animation: rc-breathe 1.8s ease-in-out infinite; }
.recorder .rc.is-rec .rc-key--rec .rc-glyph {
  background: #fff; box-shadow: 0 0 1.3cqw .35cqw rgb(255 205 185 / .9), 0 0 3.2cqw .7cqw rgb(255 90 50 / .5);
}

@container (max-width: 340px) {
  .recorder .rc-hold { letter-spacing: .06em; }
  .recorder .rc-lampbar { letter-spacing: .08em; }
}

@keyframes rc-in { from { opacity: 0; } }
@keyframes rc-blink { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes rc-lcdblink { 0%, 59.9% { opacity: 1; } 60%, 100% { opacity: .12; } }
@keyframes rc-cue { 0%, 100% { opacity: 0; } 40% { opacity: 1; } 70% { opacity: .15; } }
@keyframes rc-breathe { 50% { opacity: .55; } }
@keyframes rc-jolt { 30% { transform: translateY(.3cqw); } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .recorder .rc-flow, .recorder .rc-marker { transition: opacity .2s; }
  .recorder .rc-title { transition-duration: .4s; }
  .recorder .rc.is-hint .rc-key--rec::before { animation: none; opacity: .7; }
  .recorder .rc.is-rec .rc-key--rec .rc-cap::after, .recorder .rc-lcd-text.is-blink { animation: none; }
  .recorder .rc-machine.is-jolt { animation: none; }
}