.drill-shell { width: min(1040px, 92vw); margin: 0 auto; padding: 28px 0 64px; }
.drill-intro { max-width: 760px; margin: 42px 0 24px; }
.drill-intro h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.08; letter-spacing: -.045em; margin-bottom: 18px; }
.drill-intro > p:last-child { color: var(--muted); font-size: 1.1rem; line-height: 1.6; }
.quick-starts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.setup-panel { padding: 26px; }
.setup-panel h2 { font-size: 1.2rem; margin: 0; }
.small { font-size: .85rem; line-height: 1.5; }
.group-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 20px 0 24px; }
.group-button { font: inherit; color: var(--ink); text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 15px; cursor: pointer; }
.group-button:hover { border-color: var(--brand); }
.group-button[aria-pressed="true"] { border: 2px solid var(--brand); padding: 14px; background: #f0efff; }
.group-button strong, .group-button span { display: block; }
.group-button strong { margin: 8px 0; font-size: .95rem; }
.group-button span { font-size: .78rem; line-height: 1.45; color: var(--muted); }
.group-button .stage-number { color: var(--brand); font-weight: 800; font-size: .8rem; }
.group-button:last-child { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
.drill-settings { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
.drill-settings label { display: grid; gap: 7px; font-size: .85rem; font-weight: 700; }
.drill-settings select { width: 100%; min-width: 0; border: 1px solid #bfc6d3; border-radius: 8px; padding: 11px; color: var(--ink); font: inherit; background: #fff; }
#coverage-note { margin-top: 18px; }
.resume-area { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 18px 0; padding: 16px; border: 1px solid #b9b6ef; border-radius: 12px; background: #f0efff; }
.resume-area p { margin: 0; }
.drill-details { margin-top: 20px; border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: #fff; line-height: 1.6; }
.drill-details summary { font-weight: 750; cursor: pointer; color: var(--brand-dark); }
.drill-details[open] summary { margin-bottom: 18px; }
.session-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 32px; }
.session-top p { margin-bottom: 6px; }
.session-stats { display: flex; flex-wrap: wrap; gap: 24px; margin: 18px 0; color: var(--muted); font-size: .9rem; }
.session-stats strong { color: var(--ink); font-size: 1.15rem; }
.drill-card { padding: clamp(22px, 4vw, 42px); }
.drill-card #prompt { font-size: clamp(1.4rem, 3.8vw, 2.15rem); line-height: 1.4; letter-spacing: -.02em; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; margin: 24px 0; }
.assumption { color: #515d71; background: #f5f7fb; border-left: 3px solid #a5b4fc; padding: 9px 13px; font-size: .84rem; line-height: 1.6; margin: 14px 0 0; }
#typed-answer label { display: block; font-size: .9rem; font-weight: 750; margin-bottom: 8px; }
#answer { display: block; width: min(100%, 520px); padding: 14px 16px; border: 2px solid #adb6c8; border-radius: 10px; font: 1.3rem ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--ink); background: #fff; }
#input-help { margin: 8px 0; }
#input-error { margin: 0 0 8px; font-size: .85rem; }
.answer-actions, .next-row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.next-row { justify-content: space-between; margin-top: 20px; }
.drill-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.drill-choices button { margin: 0; min-height: 60px; }
.drill-card .feedback { margin-bottom: 0; }
.feedback p { margin: 8px 0 0; white-space: pre-wrap; }
#answer-correct { font: 700 1.2rem ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.keyboard-note { margin: 22px 0 0; }
.session-bottom { display: flex; justify-content: space-between; align-items: start; gap: 14px; padding: 16px 0; }
.reference-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.reference-grid h2 { font-size: 1rem; }
.reference-grid p { font-size: .9rem; }
.reference-grid pre { font-size: .82rem; overflow-x: auto; background: #f5f7fb; padding: 12px; border-radius: 8px; }
.hex-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.hex-grid span { background: #f5f7fb; padding: 8px 4px; border-radius: 6px; text-align: center; font: .76rem/1.5 ui-monospace, monospace; white-space: pre-line; }
.stat-row { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
#summary-stats { margin: 20px 0 28px; }
button:disabled { opacity: .65; cursor: default; }
:focus-visible { outline: 3px solid #2563eb; outline-offset: 4px; }
@media (max-width: 800px) { .group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .drill-settings, .reference-grid, .drill-choices { grid-template-columns: 1fr; } .setup-panel { padding: 18px; } .row-between { align-items: start; flex-wrap: wrap; } .resume-area { align-items: start; flex-direction: column; } .session-top .secondary-button { padding: 0 12px; } .session-stats { gap: 16px; } .drill-intro { margin-top: 28px; } .quiz-links .secondary-button { font-size: .8rem; padding: 0 12px; } }