:root { --ink:#233044; --paper:#f3eedf; --red:#dd4b39; --blue:#4a6d91; --line:#b9b4a6; font-family: Georgia, 'Songti SC', serif; color:var(--ink); background:#c8c1ad; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:linear-gradient(135deg,#bbb39f,#d7d0bd); }
button,input,select { font:inherit; }
button { color:inherit; }
.shell { width:min(1180px,calc(100% - 36px)); min-height:calc(100vh - 36px); margin:18px auto; background-color:var(--paper); background-image:linear-gradient(rgba(74,109,145,.11) 1px,transparent 1px); background-size:100% 29px; box-shadow:0 18px 60px #514c4070; border-radius:3px; overflow:hidden; }
header { min-height:78px; display:flex; align-items:center; justify-content:space-between; padding:0 42px; background:var(--paper); border-bottom:2px solid var(--ink); }
.wordmark { color:var(--ink); text-decoration:none; font-family:'Times New Roman',serif; font-size:34px; font-weight:900; letter-spacing:.15em; }
.wordmark span { display:inline-block; margin-left:14px; font:700 9px Arial,sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--red); transform:rotate(-3deg); }
.text-button { border:0; border-bottom:1px dashed var(--ink); background:transparent; padding:4px 0; cursor:pointer; font-size:13px; }
main { display:grid; grid-template-columns:100px 1fr; min-height:760px; }
.rail { position:relative; border-right:1px solid var(--red); display:flex; flex-direction:column; align-items:center; gap:50px; padding-top:45px; }
.rail::after { content:''; position:absolute; top:0; bottom:0; right:5px; border-right:1px solid #e7a79f; }
.stamp { width:60px; height:60px; display:grid; place-items:center; text-align:center; border:2px solid var(--red); color:var(--red); font-size:13px; line-height:1.25; transform:rotate(-7deg); border-radius:50%; }
.vertical { writing-mode:vertical-rl; letter-spacing:.55em; font-size:12px; }
.content { padding:60px clamp(28px,6vw,88px) 70px; }
.heading { display:flex; justify-content:space-between; align-items:end; gap:30px; }
.kicker { margin:0 0 12px; font:700 11px Arial,sans-serif; color:var(--blue); letter-spacing:.3em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(46px,6.5vw,86px); line-height:.92; font-weight:500; letter-spacing:-.07em; }
h1 i { display:inline-block; color:var(--red); font-style:normal; transform:rotate(7deg); }
.progress-card { width:210px; padding:18px 20px; border:1px solid var(--ink); background:#f3eedfe8; box-shadow:4px 4px 0 var(--ink); font-family:Arial,sans-serif; }
.progress-card>span { font-size:10px; letter-spacing:.18em; }
.progress-card strong { display:block; margin:8px 0 11px; font-size:24px; }
.progress-track { height:5px; background:#d2cbb9; }
.progress-track i { display:block; width:0; height:100%; background:var(--red); transition:width .3s; }
.category-tabs { display:flex; flex-wrap:wrap; gap:0; margin:52px 0 22px; border-bottom:1px solid var(--ink); }
.category-tabs button { border:0; background:transparent; padding:12px 22px; cursor:pointer; font-size:14px; }
.category-tabs button.active { color:var(--paper); background:var(--ink); transform:translateY(1px); }
.question-card { padding:34px clamp(20px,4vw,54px) 44px; background:#faf7ec; border:1px solid #a49f91; box-shadow:7px 7px 0 #778397; }
.card-top { display:flex; justify-content:space-between; align-items:center; font:700 10px Arial,sans-serif; letter-spacing:.18em; }
.tag { padding:7px 12px; border:1px solid var(--red); color:var(--red); transform:rotate(2deg); }
.sequence { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:clamp(9px,2vw,24px); min-height:155px; padding:28px 0; }
.term { display:flex; align-items:center; gap:clamp(9px,2vw,24px); font:italic 44px 'Times New Roman',serif; }
.term:not(:last-child)::after { content:'·'; color:#9a9486; font-size:24px; }
.term.missing { width:68px; height:62px; justify-content:center; border-bottom:3px solid var(--red); color:var(--red); }
.term.missing::after { display:none; }
.answer-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:20px; }
label span { display:block; margin-bottom:8px; font:700 11px Arial,sans-serif; letter-spacing:.08em; }
input,select { width:100%; min-height:50px; border:1px solid #aaa393; background:var(--paper); padding:0 15px; color:var(--ink); border-radius:0; }
input:focus,select:focus { outline:2px solid var(--blue); outline-offset:2px; }
.form-error { min-height:20px; margin:9px 0 3px; color:var(--red); font:700 12px Arial,sans-serif; }
.submit-button { width:100%; min-height:58px; border:0; background:var(--red); color:#fff9ed; display:flex; align-items:center; justify-content:space-between; padding:0 22px; cursor:pointer; font-weight:700; letter-spacing:.08em; }
.submit-button:hover { background:#c33c2c; }
.submit-button b { font-size:24px; }
.reveal { margin-top:28px; padding-top:26px; border-top:2px dashed #a49f91; }
.verdict-row { display:flex; justify-content:space-between; gap:20px; align-items:center; }
.verdict-row>div { display:flex; align-items:center; gap:12px; }
#verdictMark { width:40px; height:40px; display:grid; place-items:center; color:#fff; background:var(--blue); border-radius:50%; font-family:Arial,sans-serif; }
#verdictTitle { font-size:22px; }
#nextButton { border:0; background:var(--ink); color:#fff; padding:12px 17px; cursor:pointer; }
#verdictCopy { margin:16px 0 22px; line-height:1.6; }
.workings { padding:18px 22px; background:#e9e3d2; border-left:4px solid var(--blue); }
.workings>span { font:700 10px Arial,sans-serif; letter-spacing:.18em; color:var(--blue); }
.workings ol { margin:12px 0 0; padding-left:22px; line-height:1.8; }
footer { min-height:56px; display:flex; justify-content:space-between; align-items:center; padding:0 42px; background:var(--ink); color:#eee8d8; font:700 9px Arial,sans-serif; letter-spacing:.18em; }
@media (max-width:700px) {
  .shell { width:100%; min-height:100vh; margin:0; }
  header { padding:0 20px; }
  .wordmark { font-size:27px; }
  .wordmark span { display:none; }
  main { grid-template-columns:1fr; }
  .rail { display:none; }
  .content { padding:38px 18px 50px; }
  .heading { align-items:start; }
  .progress-card { width:130px; padding:12px; }
  .progress-card strong { font-size:17px; }
  .category-tabs { margin-top:38px; overflow-x:auto; flex-wrap:nowrap; }
  .category-tabs button { padding:11px 15px; white-space:nowrap; }
  .question-card { padding:25px 18px 34px; box-shadow:4px 4px 0 #778397; }
  .sequence { gap:10px; min-height:125px; }
  .term { font-size:32px; gap:10px; }
  .term.missing { width:52px; height:50px; }
  .answer-grid { grid-template-columns:1fr; }
  footer { padding:0 18px; }
}