/* ---------- W8 the Memorize phone you can try (How it works only; src/memorize.js). The app's Memorize screen
   (app/memorize.tsx) in the app's own points: --u is one iPhone point, as in the other working phones of style.css.
   Text never under 14 px inside (older readers), the boxes you type in are 16 px so the iPhone does not zoom in.
   Without JavaScript noscript.css hides the phone and the still picture shows. ---------- */
.memo-app { --mz-yellow: #ffe9a8; }
@media (prefers-color-scheme: dark) { .memo-app { --mz-yellow: rgba(255, 214, 64, 0.3); } }
.memo-app button { -webkit-tap-highlight-color: transparent; }
.mz-head { display: flex; align-items: center; gap: calc(var(--u) * 12); padding: 0 calc(var(--u) * 16) calc(var(--u) * 8); }
.mz-back { flex: none; position: relative; width: max(30px, calc(var(--u) * 38)); height: max(30px, calc(var(--u) * 38)); border-radius: 50%; background: var(--faint); }
.mz-back::after { content: ""; position: absolute; left: 42%; top: 50%; width: 8px; height: 8px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translate(-25%, -50%) rotate(45deg); }
.mz-h1 { font-weight: 700; font-size: max(20px, calc(var(--u) * 26)); line-height: 1.2; }
.mz-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 calc(var(--u) * 20) calc(var(--u) * 40); }
.mz-ref { margin: calc(var(--u) * 4) 0 0; font-weight: 600; font-size: max(15px, calc(var(--u) * 17)); }
/* the 4 step bars: thin to look at, 24 px tall to tap */
.mz-steps { display: flex; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 6); }
.mz-bar { flex: 1; position: relative; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.mz-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(5px, calc(var(--u) * 6)); margin-top: -3px; border-radius: 3px; background: var(--faint); transition: background-color 0.2s ease; }
.mz-bar.done::before { background: var(--green); }
.mz-bar.on::before { background: var(--red); }
.mz-bar:disabled { cursor: default; }
.mz-step-t { margin: 2px 0 0; font-weight: 600; font-size: 14px; }
.mz-in.in { animation: mz-in 0.28s ease-out both; }
.mz-in.pop { animation: mz-pop 0.25s ease-out both; }
@keyframes mz-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes mz-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.mz-lead { margin: calc(var(--u) * 10) 0 calc(var(--u) * 12); color: var(--muted); font-size: max(14px, calc(var(--u) * 15)); line-height: 1.45; }
.mz-card { padding: max(12px, calc(var(--u) * 18)); border: 1px solid var(--hair); border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
.mz-tap { cursor: text; }
.mz-verse { margin: 0; font-family: var(--serif); font-size: max(17px, calc(var(--u) * 21)); line-height: 1.5; }
.mz-flow { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: max(5px, calc(var(--u) * 6)); row-gap: max(6px, calc(var(--u) * 8)); }
.mz-w { padding: 0 1px; border-radius: 4px; font-family: var(--serif); font-size: max(16px, calc(var(--u) * 20)); line-height: 1.4; }
.mz-w.fill, .mz-w.right { color: var(--green); }
.mz-w.help { background: var(--mz-yellow); color: var(--ink); }
.mz-w.miss { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.mz-gap { display: inline-block; width: max(calc(var(--gw) * 0.8px), calc(var(--u) * var(--gw))); height: max(20px, calc(var(--u) * 26)); margin-bottom: 2px; border-bottom: 2px solid var(--edge); border-radius: 4px 4px 0 0; transition: background-color 0.15s ease; }
.mz-gap.now { border-bottom-color: var(--red); background: var(--tint); }
.mz-gap.bad { background: color-mix(in srgb, var(--red) 22%, transparent); }
.mz-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: calc(var(--u) * 18); }
.mz-chip { min-height: 44px; padding: 0 max(12px, calc(var(--u) * 14)); border: 1px solid var(--hair); border-radius: 14px; background: var(--card); color: var(--ink); font-family: var(--serif); font-size: max(16px, calc(var(--u) * 18)); cursor: pointer; box-shadow: var(--shadow); transition: transform 0.12s ease, border-color 0.15s ease; }
.mz-chip:active { transform: scale(0.96); }
.mz-chip.wrong { border-color: var(--red); color: var(--red); }
.mz-wrong { margin: 10px 0 0; text-align: center; color: var(--red); font-weight: 600; font-size: 14px; opacity: 0; transition: opacity 0.15s ease; }
.mz-wrong.on { opacity: 1; }
.mz-main { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: calc(var(--u) * 18); padding: 0 16px; border: 0; border-radius: 14px; background: var(--action); color: #fff; font: 600 max(15px, calc(var(--u) * 16))/1.25 var(--sans); text-align: center; text-decoration: none; cursor: pointer; transition: transform 0.12s ease, opacity 0.15s ease; }
.mz-main:active:not(:disabled) { transform: scale(0.97); }
.mz-main:disabled { opacity: 0.4; cursor: default; }
.mz-second { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 max(12px, calc(var(--u) * 18)); border: 1px solid var(--hair); border-radius: 14px; background: var(--card); color: var(--ink); font: 600 15px/1.25 var(--sans); cursor: pointer; transition: transform 0.12s ease; }
.mz-second:active { transform: scale(0.97); }
.mz-row { display: flex; gap: 10px; margin-top: calc(var(--u) * 14); }
.mz-row .mz-main { flex: 1; margin-top: 0; }
.mz-count { width: 100%; margin-top: 10px; }
.mz-quiet { display: block; min-height: 44px; margin: 4px auto 0; padding: 0 12px; border: 0; background: none; color: var(--red); font: 600 14px/1.25 var(--sans); cursor: pointer; }
.mz-letters { display: block; width: 100%; height: 48px; margin-top: calc(var(--u) * 16); padding: 0 14px; border: 1px solid var(--hair); border-radius: 14px; background: var(--card); color: var(--ink); font: 500 16px var(--sans); text-align: center; }
.mz-recite { display: block; width: 100%; min-height: max(112px, calc(var(--u) * 150)); padding: max(12px, calc(var(--u) * 16)); border: 1px solid var(--hair); border-radius: 14px; background: var(--card); color: var(--ink); font: 16px/1.45 var(--serif); resize: none; box-shadow: var(--shadow); }
.mz-letters::placeholder, .mz-recite::placeholder { color: var(--muted); }
.mz-letters:focus, .mz-recite:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--tint); }
.mz-small { margin: 10px 0 0; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.4; }
.mz-result { margin: calc(var(--u) * 18) 0 0; text-align: center; font-weight: 600; font-size: 15px; }
.mz-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; color: var(--muted); font-size: 14px; }
.mz-key { display: inline-flex; align-items: center; gap: 6px; }
.mz-dot { width: 10px; height: 10px; border-radius: 50%; }
.mz-dot.right { background: var(--green); }
.mz-dot.help { background: var(--mz-yellow); box-shadow: inset 0 0 0 1px var(--edge); }
.mz-dot.miss { background: var(--red); }
.mz-result-t { margin: calc(var(--u) * 20) 0 0; font-weight: 700; font-size: max(18px, calc(var(--u) * 20)); }
.mz-result-t:focus { outline: none; }
.mz-result-s { margin: 4px 0 0; color: var(--muted); font-size: max(14px, calc(var(--u) * 15)); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) {
  .mz-in.in, .mz-in.pop { animation: none; }
  .mz-bar::before, .mz-gap, .mz-chip, .mz-wrong, .mz-main, .mz-second { transition: none; }
}