/* r8p382 → r8p384 — PRACTICE: THE TUTOR (docs/2026-10-24-practice-PROPOSAL.md). The view IS Pressey's teaching
   machine (US 1,670,480, 1928), drawn in the house patent register: a cabinet with a top rail (PAT. 1928 riveted on),
   a lever on a quadrant, a window over a drum of cards, a counter of rolling wheels, an instruction slip, and a bed
   of four keys that stand up when they are the answer and sit flush when they aren't. One variable per part:
   the lever's angle (--tutor-lever), the drum's turn (src/tutor.js _place), a key's height (.is-sunk), the wheels. */
.tutor-ov{ position:fixed; inset:0; z-index:4100; display:flex; align-items:center; justify-content:center;
  background:rgba(42,28,18,.22); opacity:0; transition:opacity .25s ease; padding:16px; box-sizing:border-box; }
.tutor-ov.is-on{ opacity:1; }
.tutor-ov.is-aside{ visibility:hidden; }   /* Pressey's patent page is open: the machine steps aside, the round kept */
html[data-skin="blueprint"] .tutor-ov{ background:rgba(4,9,15,.55); }

.tutor-shell{ position:relative; width:min(720px, 100%); max-height:100%; overflow:auto; box-sizing:border-box;
  background:var(--vellum); border:1px solid var(--gold2); padding:18px 22px 16px; color:var(--text);
  font-family:'Space Mono',monospace; box-shadow:0 18px 48px rgba(42,28,18,.22); }
.tutor-shell::before{ content:""; position:absolute; inset:5px; border:1px solid var(--gold2); opacity:.35; pointer-events:none; }
html[data-skin="blueprint"] .tutor-shell{ box-shadow:0 18px 48px rgba(0,0,0,.45); }
.tutor-close{ position:absolute; top:12px; right:12px; z-index:2; padding:3px 8px; font-size:13px; }
.tutor-head{ padding-right:40px; margin:0 0 12px; }
.tutor-h{ font-family:'Playfair Display',serif; font-style:italic; font-size:24px; line-height:1.1; color:var(--text); }

/* the cabinet: a box in ink line with a bevelled face, a top rail and two feet */
.tutor-cab{ --cab-ink:var(--gold2); --cab-face:rgba(255,248,226,.32); position:relative; margin:0 6px 14px;
  border:1.5px solid var(--cab-ink); background:var(--cab-face);
  box-shadow:inset 0 0 0 4px var(--cab-face), inset 0 0 0 5px rgba(106,64,16,.28), 0 2px 0 rgba(106,64,16,.25); }
.tutor-cab::before, .tutor-cab::after{ content:""; position:absolute; bottom:-9px; width:44px; height:8px;
  border:1.5px solid var(--cab-ink); border-top:0; background:var(--cab-face); }
.tutor-cab::before{ left:22px; } .tutor-cab::after{ right:22px; }
html[data-skin="blueprint"] .tutor-cab{ --cab-ink:#caa84e; --cab-face:rgba(28,48,70,.6); }
.tutor-rail{ display:flex; align-items:center; justify-content:flex-end; gap:10px; height:30px; padding:0 14px;
  border-bottom:1.5px solid var(--cab-ink); box-shadow:0 3px 0 -1.5px rgba(106,64,16,.25); }
.tutor-rail .pat-stamp{ margin:0; }
.tutor-rivet{ width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #f6dc96, #c8952f 55%, #6a4010); box-shadow:0 1px 1px rgba(0,0,0,.3); }
.tutor-rail .tutor-rivet:first-child{ margin-right:auto; }

/* the face: lever | window | counter, then the slip and the key bed across */
.tutor-machine{ --tutor-lever:0; position:relative; display:grid; grid-template-columns:190px 1fr 70px; grid-template-rows:260px auto auto; gap:12px 14px; padding:14px 14px 16px; }

/* the lever: an arm on a pivot swings through three notches on a brass quadrant */
.tutor-lever{ position:relative; height:260px; }
.tutor-quad{ position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }
.tq-plate{ fill:rgba(200,149,47,.16); stroke:var(--gold2); stroke-width:1.2; }
.tq-notch{ stroke:var(--gold2); stroke-width:2.2; stroke-linecap:round; }
.tutor-pivot{ position:absolute; left:5px; top:123px; width:14px; height:14px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 38% 34%, #f6dc96, #c8952f 55%, #6a4010); box-shadow:0 1px 2px rgba(0,0,0,.35); }
.tutor-arm{ position:absolute; left:12px; top:128px; width:70px; height:4px; border-radius:2px; pointer-events:none;
  background:linear-gradient(#e8c76a, #9a6420); box-shadow:0 1px 1px rgba(0,0,0,.3); transform-origin:0 50%;
  transform:rotate(calc((var(--tutor-lever) - 1) * 52deg)); transition:transform .3s cubic-bezier(.3,1.35,.5,1); }
.tutor-knob{ position:absolute; right:-9px; top:-7px; width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #f6dc96, #c8952f 55%, #6a4010); box-shadow:0 1px 3px rgba(0,0,0,.4); }
.tutor-slot{ display:none; }
.tutor-detent{ position:absolute; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; text-align:left;
  background:none; border:0; padding:0 2px; cursor:pointer; min-height:44px; width:104px; margin-top:-22px; color:var(--dim2); }
.tutor-detent[data-i="0"]{ left:80px; top:58px; } .tutor-detent[data-i="1"]{ left:106px; top:130px; width:84px; } .tutor-detent[data-i="2"]{ left:80px; top:202px; }
.tutor-d-n{ font:400 11px/1.2 'Space Mono',monospace; letter-spacing:1.6px; text-transform:uppercase; }
.tutor-d-g{ margin-top:2px; font:italic 11px/1.25 'Playfair Display',serif; letter-spacing:0; color:var(--dim2); }
.tutor-detent.on{ color:var(--gold-ink); } .tutor-detent.on .tutor-d-n{ font-weight:700; } .tutor-detent.on .tutor-d-g{ color:var(--text); }
.tutor-detent:focus-visible{ outline:1.5px solid var(--gold); outline-offset:2px; }

/* the window over the drum: one card shows; the drum turns whole cards; its lips shade like a cylinder */
.tutor-window{ position:relative; height:260px; overflow:hidden; border:1.5px solid var(--gold2); background:#f6efd9; cursor:pointer;
  box-shadow:inset 0 0 0 4px #f6efd9, inset 0 0 0 5px rgba(106,64,16,.35); }
.tutor-window::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(rgba(42,28,18,.13), rgba(42,28,18,0) 9%, rgba(42,28,18,0) 91%, rgba(42,28,18,.13)); }
html[data-skin="blueprint"] .tutor-window{ background:#1c3046; box-shadow:inset 0 0 0 4px #1c3046, inset 0 0 0 5px rgba(215,230,238,.35); }
html[data-skin="blueprint"] .tutor-window::after{ background:linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,0) 9%, rgba(0,0,0,0) 91%, rgba(0,0,0,.3)); }
.tutor-window:focus{ outline:none; }
.tutor-window:focus-visible{ outline:1.5px solid var(--gold); outline-offset:3px; }
.tutor-drum{ position:absolute; inset:0; }
.tutor-card{ height:100%; perspective:900px; }
.tutor-card-in{ position:relative; height:100%; transform-style:preserve-3d; transition:transform .45s ease; }
.tutor-card.is-shown .tutor-card-in{ transform:rotateX(180deg); }
.tutor-face{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; backface-visibility:hidden; -webkit-backface-visibility:hidden; padding:10px; box-sizing:border-box; }
.tutor-back{ transform:rotateX(180deg); }
.tutor-q{ font:700 76px/1 'Playfair Display',serif; color:var(--text); }
.tutor-q-sub{ margin-top:12px; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--dim2); }
.tutor-a-name{ font:700 20px/1 'Playfair Display',serif; color:var(--text); margin-bottom:4px; }
/* the shape as big as the window allows: its labels must clear the 9px floor (persona test: 7–8px) */
.tutor-a-neck{ height:220px; display:flex; align-items:center; justify-content:center; }
.tutor-a-neck svg{ height:100% !important; width:auto !important; max-width:100%; }
.tutor-none{ font-size:11px; color:var(--dim2); }
.tutor-sum .tutor-front{ gap:8px; text-align:center; }
.tutor-sum-h{ font:italic 700 28px/1.1 'Playfair Display',serif; color:var(--text); }
.tutor-sum-n{ font-size:12px; letter-spacing:.4px; color:var(--dim); }
.tutor-sum-m{ font-size:12px; color:var(--gold-ink); }
.tutor-sum-go{ margin-top:8px; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--dim2); }

/* the counter: two wheels each of tens and ones, rolling behind small windows */
.tutor-counter{ display:flex; flex-direction:column; justify-content:center; gap:18px; }
.tutor-ct{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.tutor-ct-l{ font-size:9px; letter-spacing:1.4px; text-transform:uppercase; color:var(--dim2); text-align:center; }
.tutor-wheel{ display:inline-flex; gap:1px; padding:2px; border:1px solid var(--gold2); background:var(--gold2); }
.tw-d{ display:block; width:15px; height:22px; overflow:hidden; background:#f6efd9;
  box-shadow:inset 0 5px 4px -3px rgba(42,28,18,.45), inset 0 -5px 4px -3px rgba(42,28,18,.45); }
.tw-s{ display:block; transition:transform .38s cubic-bezier(.3,.7,.2,1); }
.tw-s i{ display:block; height:22px; font:700 16px/22px 'Space Mono',monospace; font-style:normal; text-align:center; color:var(--text); }
html[data-skin="blueprint"] .tw-d{ background:#1c3046; } html[data-skin="blueprint"] .tw-s i{ color:#e8eef2; }

/* the instruction slip: a paper slip held in the cabinet, the step you're on */
.tutor-say{ grid-column:1 / -1; min-height:34px; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:6px 14px; font-size:12px; letter-spacing:.3px; color:var(--text);
  background:#fbf6e6; border:1px solid rgba(106,64,16,.45); box-shadow:0 1px 0 rgba(106,64,16,.2); position:relative; }
html[data-skin="blueprint"] .tutor-say{ background:#22384f; color:#e8eef2; border-color:rgba(215,230,238,.4); }

/* the key bed: a recess; a key that is the answer stands up, one that isn't sits flush and blank */
.tutor-keybed{ grid-column:1 / -1; padding:6px 8px 0; border:1.5px solid var(--gold2); border-bottom-width:3px;
  background:linear-gradient(rgba(58,34,8,.16), rgba(58,34,8,.05)); box-shadow:inset 0 4px 6px -3px rgba(42,28,18,.45); overflow:hidden; }
html[data-skin="blueprint"] .tutor-keybed{ background:linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.12)); border-color:#caa84e; }
.tutor-keys{ position:relative; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.tutor-key{ position:relative; min-height:56px; margin-bottom:6px; border-radius:8px 8px 4px 4px; border:1.5px solid var(--gold2); cursor:pointer; padding:6px 4px;
  background:linear-gradient(#f3e6c2, #e2cf9c); box-shadow:0 3px 0 var(--gold2), 0 4px 6px rgba(42,28,18,.18);
  transition:transform .3s cubic-bezier(.3,1.3,.5,1) calc(var(--i, 0) * 40ms), box-shadow .2s ease; }
.tutor-key-cap{ font:700 12px/1.2 'Space Mono',monospace; letter-spacing:1px; text-transform:uppercase; color:#2a1c12; transition:opacity .2s ease calc(var(--i, 0) * 40ms + 80ms); }
.tutor-key.is-sunk{ transform:translateY(42px); cursor:default; box-shadow:0 0 0 var(--gold2); }
.tutor-key.is-sunk .tutor-key-cap{ opacity:0; transition-delay:0s; }
/* r8p383 — a narrow screen fits each English grade on one line (Instantly is the longest; longer translations wrap); still above the 9px floor */
@media (max-width: 480px){ .tutor-key-cap{ font-size:10px; letter-spacing:0; overflow-wrap:anywhere; } }
@media (max-width: 340px){ .tutor-keys{ gap:6px; } .tutor-key{ padding:6px 1px; } .tutor-key-cap{ font-size:9.5px; } }
.tutor-key.is-down{ animation:tutor-press .2s ease; }
@keyframes tutor-press{ 0%{ transform:translateY(0); } 40%{ transform:translateY(3px); box-shadow:0 0 0 var(--gold2), 0 1px 2px rgba(42,28,18,.18); } 100%{ transform:translateY(0); } }
html[data-skin="blueprint"] .tutor-key{ background:linear-gradient(#2b4560, #1c3046); border-color:#caa84e; box-shadow:0 3px 0 #caa84e, 0 4px 6px rgba(0,0,0,.4); }
html[data-skin="blueprint"] .tutor-key-cap{ color:#e8eef2; }

/* under the cabinet: where the cards come from, in plain words */
.tutor-deck{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 8px; margin-top:4px; }
.tutor-deck-l{ font:italic 12px/1.2 'Playfair Display',serif; color:var(--dim); margin-right:2px; }
.tutor-seg{ background:none; border:1px solid var(--gold2); border-radius:1px; padding:6px 10px; min-height:32px; cursor:pointer;
  font:400 10px/1.2 'Space Mono',monospace; letter-spacing:1px; color:var(--dim2); }
.tutor-seg-k{ letter-spacing:2px; }
.tutor-seg.on{ color:var(--gold-ink); border-color:var(--gold); background:var(--gold-dim); font-weight:700; }
.tutor-seg:disabled{ opacity:.45; cursor:default; }

/* a phone: the window across the top, the lever a slide in a slot across the cabinet */
@media (max-width: 599px){
  .tutor-ov{ padding:8px; }
  .tutor-shell{ padding:14px 12px 12px; }
  .tutor-cab{ margin:0 2px 14px; }
  .tutor-machine{ grid-template-columns:1fr 60px; grid-template-rows:auto 270px auto auto; padding:10px; gap:10px; }
  .tutor-lever{ grid-column:1 / -1; height:auto; display:flex; gap:4px; padding-bottom:16px; }
  .tutor-quad, .tutor-pivot{ display:none; }
  .tutor-slot{ display:block; position:absolute; left:16.66%; right:16.66%; bottom:4px; height:6px; border:1px solid var(--gold2); border-radius:3px; background:rgba(58,34,8,.14); pointer-events:none; }
  .tutor-arm{ left:calc(16.66% + var(--tutor-lever) * 33.33%); top:auto; bottom:7px; width:0; height:0; background:none; box-shadow:none; transform:none;
    transition:left .3s cubic-bezier(.3,1.35,.5,1); }
  .tutor-knob{ right:auto; left:-9px; top:-9px; }
  .tutor-detent{ position:relative; left:auto !important; top:auto !important; width:auto !important; margin:0; flex:1; align-items:center; text-align:center; padding:4px 2px; }
  .tutor-window{ height:270px; }
  .tutor-close{ min-width:44px; min-height:44px; }
  .tutor-head{ min-height:46px; display:flex; align-items:center; margin-bottom:10px; }   /* the cabinet starts below the close mark */
  .tutor-seg{ min-height:44px; }
  .tutor-q{ font-size:68px; }
}
@media (prefers-reduced-motion: reduce){
  .tutor-ov, .tutor-card-in, .tutor-arm, .tutor-key, .tutor-key-cap, .tw-s{ transition:none; }
  .tutor-key.is-down{ animation:none; }
}

/* NUMBER: the key, and a neck to touch — strings low on the left (mirrored for a lefty), open + five frets */
.tn-q{ font-size:12px; letter-spacing:1px; color:var(--dim2); margin-bottom:4px; }
.tn-key b{ font:700 22px/1 'Playfair Display',serif; color:var(--text); letter-spacing:0; margin-left:4px; }
.tutor-numcard .tutor-front{ justify-content:flex-start; padding-top:8px; }
.tn-neck{ height:206px; width:auto; overflow:visible; touch-action:manipulation; }
.tn-str{ font:700 11px 'Space Mono',monospace; fill:var(--dim); }
.tn-line{ stroke:#2a1c12; stroke-width:1.3; }
.tn-nut{ stroke:#2a1c12; stroke-width:4; }
.tn-fret{ stroke:#2a1c12; stroke-width:1; opacity:.7; }
.tn-cell{ cursor:pointer; }
.tn-cell rect{ fill:transparent; }
.tn-dot{ fill:transparent; stroke:transparent; stroke-width:1.5; transition:fill .15s ease; }
.tn-cell:hover .tn-dot{ stroke:rgba(106,64,16,.45); }
.tn-cell.is-right .tn-dot{ fill:#e8c76a; stroke:#6a4010; }
.tn-cell.is-wrong .tn-dot{ fill:rgba(154,100,32,.18); stroke:#9a6420; }
.tn-dot-t{ font:700 11px 'Space Mono',monospace; fill:#2a1c12; pointer-events:none; }
.tn-move{ stroke:#9a6420; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:4 4; opacity:0; }
.tn-move.on{ opacity:1; }
.tn-ghost{ fill:none; stroke:#9a6420; stroke-width:1.5; stroke-dasharray:3 3; opacity:0; }
.tn-ghost.on{ opacity:1; }
html[data-skin="blueprint"] .tn-line, html[data-skin="blueprint"] .tn-nut, html[data-skin="blueprint"] .tn-fret{ stroke:#d7e6ee; }
html[data-skin="blueprint"] .tn-str{ fill:#b9cdd9; }
html[data-skin="blueprint"] .tn-cell.is-wrong .tn-dot-t, html[data-skin="blueprint"] .tn-cell:not(.is-right) .tn-dot-t{ fill:#e8eef2; }
html[data-skin="blueprint"] .tn-move, html[data-skin="blueprint"] .tn-ghost{ stroke:#e8c76a; }

/* EAR: the key, then the answer as it is given */
.te-key{ font-size:12px; letter-spacing:1px; color:var(--dim2); }
.te-key b{ font:700 26px/1 'Playfair Display',serif; color:var(--text); margin-left:4px; }
.te-ans{ min-height:84px; font:700 80px/1 'Playfair Display',serif; color:var(--gold-ink); margin:8px 0 4px; }
.te-listen{ font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--dim2); }