.term { border-radius: 14px; background: #14110f; color: #e9e2d0; box-shadow: 0 0 0 2px #000, 0 22px 50px rgba(0,0,0,.55); overflow: hidden; text-align: left; }
.term-bar { display: flex; gap: 6px; align-items: center; padding: 8px 12px; background: #2a2420; font: 700 12px/1 system-ui, sans-serif; color: #b9a98c; letter-spacing: .08em; text-transform: uppercase; }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #c2412d; } .term-bar i:nth-child(2) { background: #e0a93b; } .term-bar i:nth-child(3) { background: #3f9d6b; } .term-bar span { margin-left: auto; }
.err { margin: 0; padding: 22px 16px 18px; min-height: 96px; font: 600 clamp(15px, 4.2vw, 19px)/1.5 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: #ff9d86; white-space: pre-wrap; overflow-wrap: anywhere; }
.err::before { content: '$ '; color: #7d7466; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 14px 16px; }
.opt { min-height: 52px; padding: 10px 12px; border: 2px solid #4a3f35; border-radius: 12px; background: #231d18; color: #efe3c8; cursor: pointer; font: 700 16px system-ui, sans-serif; text-align: center; }
.opt:hover { border-color: var(--gold); }
.opt:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.opt.right { background: #1f4d36; border-color: #3f9d6b; color: #dff5e7; } .opt.wrong { background: #5a2018; border-color: #c2412d; color: #ffd9d1; } .opt[disabled] { cursor: default; opacity: .85; }
.opt[disabled]:hover { border-color: #4a3f35; } .opt.right[disabled]:hover { border-color: #3f9d6b; } .opt.wrong[disabled]:hover { border-color: #c2412d; }
.reveal { margin: 0; padding: 0 16px 16px; min-height: 22px; font: 600 15px/1.4 system-ui, sans-serif; color: #d9c6a0; }
.prog { display: flex; gap: 8px; justify-content: center; list-style: none; margin: 0 0 12px; padding: 0; }
.prog li { width: 38px; height: 10px; border-radius: 6px; background: #ffffff26; } .prog li.now { background: var(--gold); } .prog li.ok { background: #3f9d6b; } .prog li.no { background: #c2412d; }
.nextq { display: flex; justify-content: center; padding: 0 14px 18px; }
.intro-w { padding: 34px 18px 28px; text-align: center; color: #efe3c8; } .intro-w p { margin: 0 0 18px; font: 600 16px system-ui, sans-serif; color: #d9c6a0; }
@media (max-width: 420px) { .opts { grid-template-columns: 1fr; } }
.result .next a { color: #8a3d12; font-weight: 700; }