:root{
  color-scheme: light;
  --ink:#16181d; --muted:#5b6170; --line:#d9dce3; --card:#fff; --bg:#f6f7f9;
  --blue:#2563eb; --blue-soft:rgba(37,99,235,.18); --red:#dc2626; --red-soft:rgba(220,38,38,.16);
  --ok:#15803d; --ok-bg:#ecfdf3; --no:#b91c1c; --no-bg:#fef2f2; --ask:#334155; --ask-bg:#f1f5f9;
  --accent:#111827;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
.wrap{max-width:680px;margin:0 auto;padding:28px 16px 120px}
header .crumb{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
header h1{font-size:26px;margin:4px 0 6px;font-weight:650}
header p{margin:0 0 22px;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 18px 16px;margin:0 0 18px;
  animation:arrive .45s ease-out}
.card.locked{opacity:.78}
.card.locked .plane-wrap{pointer-events:none}
@keyframes arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.card .num{font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.card p{margin:0 0 10px}
.card.read{background:#fbfbf8}
.card.read .src{font-size:13px;color:var(--muted);margin-bottom:8px;font-style:italic}
.plane-wrap{margin:10px auto 6px;max-width:420px}
.plane-wrap svg{width:100%;height:auto;display:block;touch-action:none;user-select:none;-webkit-user-select:none;background:#fff;border:1px solid var(--line);border-radius:10px}
.readout{font-size:15px;color:var(--muted);min-height:1.5em;text-align:center;margin:4px 0}
.note{background:var(--ask-bg);color:var(--ask);border-radius:8px;padding:9px 12px;font-size:15.5px;margin:8px 0 4px}
.note:empty{display:none}
.answer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 6px}
.matrix{display:inline-grid;grid-template-columns:auto auto;gap:6px 10px;padding:6px 14px;position:relative}
.matrix::before,.matrix::after{content:"";position:absolute;top:0;bottom:0;width:10px;border:2px solid var(--ink)}
.matrix::before{left:0;border-right:none;border-radius:10px 0 0 10px}
.matrix::after{right:0;border-left:none;border-radius:0 10px 10px 0}
.vec{display:inline-flex;align-items:center;gap:6px;font-size:20px}
input.entry{width:68px;font:inherit;font-size:17px;padding:6px 8px;border:1px solid #b9bec9;border-radius:6px;text-align:center}
input.entry.wide{width:150px}
input.entry:focus{outline:2px solid var(--blue);outline-offset:1px}
input.entry.bad{border-color:var(--no);background:var(--no-bg)}
.lbl{font-size:14px;color:var(--muted)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
button{font:inherit;font-size:16px;border-radius:8px;padding:8px 16px;cursor:pointer;border:1px solid var(--accent);background:var(--accent);color:#fff}
button.ghost{background:#fff;color:var(--accent);border-color:#b9bec9}
button:disabled{opacity:.38;cursor:not-allowed}
.verdict{border-radius:8px;padding:9px 12px;margin:10px 0 0;font-size:16px}
.verdict.ok{background:var(--ok-bg);color:var(--ok)}
.verdict.no{background:var(--no-bg);color:var(--no)}
.verdict.slip{background:var(--ask-bg);color:var(--ask)}
.verdict:empty{display:none}
.hints{margin:8px 0 0;padding:0;list-style:none}
.hints li{background:#fffbeb;border-left:3px solid #f59e0b;padding:7px 11px;margin:6px 0;border-radius:0 6px 6px 0;font-size:15.5px}
.ending h2{font-size:20px;margin:0 0 6px}
.ending .caption{text-align:center;min-height:3.2em;margin-top:6px}
.sr{position:absolute;left:-9999px}
@media (max-width:420px){input.entry{width:58px}input.entry.wide{width:130px}}