.socratic { --soc-bg: #0b0f17; --soc-panel: rgba(14, 19, 29, 0.94); --soc-fg: #eef1f6; --soc-dim: #9aa4b5;
  --soc-rule: #2a3344; --soc-accent: #f2c14e; --soc-right: #5fd3a0; --soc-wrong: #ff8a6b;
  color: var(--soc-fg); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.soc-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; background: #000; border-radius: 14px;
  overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
.socratic.is-asking .soc-stage { box-shadow: 0 0 0 2px var(--soc-accent), 0 30px 80px rgba(0, 0, 0, 0.45); }
@media (max-width: 700px) { .soc-stage { aspect-ratio: 2 / 3; } }
.soc-card[hidden] { display: none; }
.soc-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.soc-card { margin-top: 14px; background: var(--soc-panel); border: 1px solid var(--soc-accent);
  border-radius: 16px; padding: clamp(14px, 3vw, 24px); display: grid; gap: 12px; animation: soc-in .22s ease-out; }
@keyframes soc-in { from { opacity: 0; transform: translateY(6px); } }
.soc-kicker { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--soc-accent); }
.soc-prompt { font-size: clamp(17px, 2.6vw, 24px); line-height: 1.3; font-weight: 600; text-wrap: balance; }
.soc-choices { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.soc-choice { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; font-size: clamp(15px, 2.2vw, 18px);
  color: var(--soc-fg); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--soc-rule); border-radius: 10px;
  padding: 10px 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.soc-choice:hover:not(:disabled), .soc-choice:focus-visible { border-color: var(--soc-accent); background: rgba(242, 193, 78, 0.08); outline: none; }
.soc-choice:disabled { cursor: default; opacity: .55; }
.soc-choice.is-right { opacity: 1; border-color: var(--soc-right); box-shadow: inset 0 0 0 1px var(--soc-right); background: rgba(95, 211, 160, 0.16); }
.soc-choice.is-right::after { content: "\2713"; margin-left: auto; color: var(--soc-right); font-weight: 700; }
.soc-choice.is-wrong { opacity: 1; border-color: var(--soc-wrong); box-shadow: inset 0 0 0 1px var(--soc-wrong); background: rgba(255, 138, 107, 0.14); }
.soc-choice.is-wrong::after { content: "\2717"; margin-left: auto; color: var(--soc-wrong); font-weight: 700; }
.soc-key { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; flex: none;
  font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, 0.08); color: var(--soc-dim); }
.soc-hint { font-size: 13px; color: var(--soc-dim); }
.soc-feedback { font-size: 15px; line-height: 1.45; }
.soc-feedback.is-right strong { color: var(--soc-right); }
.soc-feedback.is-wrong strong { color: var(--soc-wrong); }
.soc-go { justify-self: start; font: inherit; font-weight: 600; font-size: 15px; color: #11151c; background: var(--soc-accent);
  border: 0; border-radius: 10px; padding: 10px 18px; cursor: pointer; }
.soc-go:focus-visible { outline: 2px solid var(--soc-fg); outline-offset: 2px; }
.soc-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; font-size: 14px; color: var(--soc-dim); }
.soc-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--soc-rule); }
.soc-dot.is-right { background: var(--soc-right); border-color: var(--soc-right); }
.soc-dot.is-wrong { background: var(--soc-wrong); border-color: var(--soc-wrong); }
.soc-score { margin-left: 4px; font-variant-numeric: tabular-nums; }