:root{--ink:#1c2330;--muted:#667080;--paper:#f5f2e9;--card:#fffdf8;--accent-local:#dd5b45;--line:#ddd8cc}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,sans-serif}main{width:min(1160px,calc(100% - 32px));margin:auto;padding:75px 0 110px}.hero{display:grid;grid-template-columns:1.5fr .6fr;gap:40px;align-items:end;margin:45px 0 56px}.eyebrow{margin:0 0 10px;color:var(--accent-local);font-size:.74rem;font-weight:850;letter-spacing:.17em;text-transform:uppercase}.hero .eyebrow{grid-column:1/-1}.hero h1{margin:0;font:500 clamp(3.4rem,7vw,6.8rem)/.87 Georgia,serif;letter-spacing:-.06em}.hero h1 em{color:var(--accent-local);font-weight:500}.hero>p:last-child{margin:0;color:var(--muted);font-size:1.04rem;line-height:1.65}.sprint{overflow:hidden;border:1px solid var(--line);border-radius:26px;background:var(--card);box-shadow:0 28px 65px #28303a18}.sprint>header{display:flex;justify-content:space-between;align-items:end;gap:25px;padding:27px 30px;border-bottom:1px solid var(--line)}.sprint h2{margin:0;font:500 2rem Georgia,serif}.setup{display:flex;gap:10px}.setup label{font-size:.7rem}.setup select{min-width:130px;margin-top:5px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}.metrics article{padding:20px 30px}.metrics article+article{border-left:1px solid var(--line)}.metrics span,.metrics small{display:block;color:var(--muted);font-size:.7rem}.metrics strong{display:block;margin:4px 0;font:600 2rem Georgia,serif;font-variant-numeric:tabular-nums}.desk{display:grid;grid-template-columns:1fr 280px}.desk>section,.desk>aside{padding:30px}.desk>aside{border-left:1px solid var(--line);background:#f0eee6}.passage-head{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.passage-head button{min-height:34px;padding:5px 10px;font-size:.72rem}#prompt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.typing-label{font-size:.77rem}.typing-label textarea{margin-top:8px;resize:vertical;font:1.05rem/1.7 Georgia,serif}.actions{display:flex;gap:10px;margin-top:14px}.actions button{flex:1}.final-result{margin-top:16px;padding:16px;border-left:4px solid #438c67;border-radius:8px;background:#e8f3eb;font-weight:800}#history{display:grid;gap:8px}#history article{display:grid;gap:3px;padding:12px;border-radius:10px;background:white}#history article span,.empty,.privacy{color:var(--muted);font-size:.72rem;line-height:1.5}.privacy{margin:20px 0 0}@media(max-width:760px){.hero{grid-template-columns:1fr}.hero .eyebrow{grid-column:auto}.sprint>header{align-items:flex-start;flex-direction:column}.setup{width:100%}.setup label{flex:1}.metrics article{padding:16px}.desk{grid-template-columns:1fr}.desk>aside{border-left:0;border-top:1px solid var(--line)}}@media(max-width:420px){main{width:calc(100% - 20px);padding-top:35px}.setup{flex-direction:column}.metrics{grid-template-columns:1fr 1fr}.metrics article+article{border-left:1px solid var(--line)}.metrics article:last-child{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}.desk>section,.desk>aside,.sprint>header{padding:20px}.actions{flex-direction:column}}

/* Live Character Highlighting */
#prompt-display { min-height: 115px; margin: 20px 0; padding: 22px; border-radius: 16px; background: #1a222f; color: #8e9bb0; font: 500 1.28rem/1.8 Georgia, serif; letter-spacing: 0.01em; user-select: none; }
.char-span { transition: color 0.08s ease, background-color 0.08s ease; border-radius: 2px; }
.char-correct { color: #5eead4; background: transparent; }
.char-error { color: #fca5a5; background: #7f1d1d88; text-decoration: underline wavy #f87171 2px; }
.char-current { color: #ffffff; background: #3b82f6; border-radius: 2px; }
.char-pending { color: #94a3b8; }

/* Exam Benchmark Badge & Result */
.benchmark-badge { margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 0.8rem; line-height: 1.45; font-weight: 700; }
.benchmark-badge.qualified { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.benchmark-badge.unqualified { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* Certificate Card Modal / Section */
.cert-section { margin-top: 24px; padding: 24px; border-radius: 16px; border: 2px solid #c7d2fe; background: #ffffff; box-shadow: 0 10px 25px rgba(0,0,0,0.06); }
.cert-box { padding: 30px; border: 3px double #3730a3; border-radius: 12px; text-align: center; background: #fafaf9; }
.cert-header { font: 500 1.8rem Georgia, serif; color: #1e1b4b; margin: 0 0 6px; }
.cert-sub { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: #6b7280; margin: 0 0 18px; }
.cert-recipient { font: 600 1.5rem Georgia, serif; color: #111827; border-bottom: 2px solid #e5e7eb; display: inline-block; padding: 0 20px 4px; margin-bottom: 14px; }
.cert-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 30px; margin: 20px 0; }
.cert-stat-item strong { display: block; font: 700 1.8rem Georgia, serif; color: #1e1b4b; }
.cert-stat-item span { font-size: 0.72rem; text-transform: uppercase; color: #6b7280; }
.cert-seal { margin-top: 16px; font-size: 0.75rem; color: #047857; font-weight: 800; padding: 6px 14px; background: #ecfdf5; border-radius: 999px; display: inline-block; border: 1px solid #a7f3d0; }

/* Mobile Portrait Orientation Gate */
.typing-orientation-gate {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 18px;
  background: #f8fafc;
  border: 2px dashed #94a3b8;
  border-radius: 16px;
  margin: 12px 0 20px;
}
.orientation-gate-icon {
  font-size: 2.2rem;
  margin-bottom: 8px;
}
.typing-orientation-gate h3 {
  font: 600 1.2rem Georgia, serif;
  color: #0f172a;
  margin: 0 0 6px;
}
.typing-orientation-gate p {
  color: #475569;
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0 0 10px;
  max-width: 380px;
}
.orientation-chip {
  display: inline-block;
  padding: 4px 12px;
  background: #e2e8f0;
  color: #334155;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
}

@media (max-width: 768px) and (orientation: portrait) {
  .typing-orientation-gate { display: flex; }
  .passage-head, #prompt-display, .typing-label, .actions { display: none !important; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: clamp(1.4rem, 5.5vw, 1.8rem); line-height: 1.2; text-wrap: pretty; }
  .passage-head { flex-wrap: wrap; gap: 8px; }
  #prompt-display { padding: 16px; font-size: 1.08rem; }
  .cert-section, .cert-box { padding: 16px; }
}

@media print {
  body * { visibility: hidden; }
  .cert-section, .cert-section * { visibility: visible; }
  .cert-section { position: absolute; left: 0; top: 0; width: 100%; border: none; box-shadow: none; padding: 0; }
}