*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(135deg,#4338ca,#7c3aed);font-family:system-ui,-apple-system,'Noto Sans TC',sans-serif;color:#1f2937;display:grid;place-items:center;padding:18px}.card{width:min(100%,550px);background:#fff;border-radius:20px;padding:24px;box-shadow:0 20px 55px #1e1b4b55}header{display:flex;align-items:center;justify-content:space-between;gap:10px}h1{font-size:25px;margin:0 0 18px}h1 small{font-size:13px;display:block;font-weight:400}h2{font-size:21px;margin:0 0 15px}label{display:grid;gap:6px;margin:12px 0;font-weight:600}select,input:not([type=checkbox]):not([type=color]){width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:10px;font:inherit}header select{width:auto;max-width:150px}.check{display:flex;align-items:center}.colors{display:flex;gap:25px}.colors label{flex:1}input[type=color]{width:100%;height:40px}button{width:100%;border:0;background:#4f46e5;color:#fff;padding:13px;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;margin-top:10px}button:hover{background:#4338ca}.note{font-size:13px;color:#64748b;line-height:1.5}#stage{height:200px;border:2px solid #e2e8f0;border-radius:14px;display:grid;place-items:center;margin:20px 0;overflow:hidden}#stimulus{font-size:clamp(28px,8vw,58px);font-weight:800;letter-spacing:.05em;font-variant-numeric:tabular-nums;white-space:nowrap}#answer{text-align:center;text-transform:uppercase;font-size:25px;letter-spacing:.1em}#feedback{text-align:center;min-height:24px}#summary{line-height:1.9}#mistakes{font-size:14px;max-height:220px;overflow:auto}#mistakes p{border-bottom:1px solid #e5e7eb;padding-bottom:6px}[hidden]{display:none!important}@media(max-width:400px){.card{padding:16px}h1{font-size:20px}}

.intro{background:#f5f3ff;border:1px solid #ddd6fe;border-radius:14px;padding:16px;margin:0 0 20px;line-height:1.65}.intro h2{font-size:18px;margin:0 0 8px;color:#4338ca}.intro p{margin:8px 0;font-size:14px}.intro #introSteps{font-weight:700;color:#4338ca}.intro #introCaution{font-size:12px;color:#64748b}

.leaderboard{margin-top:24px;border-top:1px solid #ddd;padding-top:18px}.board-controls{display:flex;gap:12px}.board-controls label{flex:1}.board-entry{border-bottom:1px solid #e5e7eb;padding:9px 3px;font-size:14px}#boardMore{background:#64748b}

.landing .hero{background:linear-gradient(145deg,#312e81,#6d28d9);color:#fff;padding:24px 18px;border-radius:16px;text-align:center}.landing .hero h2{font-size:clamp(23px,5vw,29px);line-height:1.4;margin:12px 0}.landing .hero p{line-height:1.65;font-size:14px;color:#e9d5ff}.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:800;color:#ddd6fe}.landing h3{text-align:center;margin:22px 0 12px}.speed-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.speed{border:1px solid #ddd6fe;background:#f5f3ff;border-radius:12px;padding:14px 5px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.speed strong{font-size:20px;color:#4338ca}.speed span{font-size:13px;font-weight:700}.speed small{font-size:11px;color:#64748b}.intro-note{font-size:14px;line-height:1.7;margin-top:18px}.secondary-btn{background:#e2e8f0;color:#334155}.secondary-btn:hover{background:#cbd5e1}#landing[hidden]{display:none!important}

/* v0.2.3: keep the flash and mask at the same screen coordinates.
   The page must not re-center when the answer form becomes visible. */
body{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.card{flex:0 0 auto}
#play #stage{position:relative;width:100%;height:200px;min-height:200px;max-height:200px;flex-shrink:0;contain:layout;}
#play #stimulus{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1;letter-spacing:.05em;text-align:center;font-variant-numeric:tabular-nums;}
/* Keep the answer controls' space reserved before and after each flash. */
#play #answerForm[hidden]{display:block!important;visibility:hidden;pointer-events:none}
#play #answerForm:not([hidden]){visibility:visible}
#play #answer{font-size:25px}
#play #feedback{min-height:24px}

/* v0.2.5: portal visual system; flash-stage geometry above remains untouched */
body{background:radial-gradient(ellipse at 50% 18%,#15375b 0,#07182c 50%,#020b17 100%);color:#f2f6fa;font-family:system-ui,-apple-system,"Noto Sans Devanagari","Noto Sans",sans-serif;padding:16px}
.card{background:#091e33;border:1px solid #2a526c;color:#f2f6fa;box-shadow:0 20px 65px #0008;width:min(100%,650px)}
.quicknav{display:flex;justify-content:space-between;gap:12px;margin-bottom:22px}.quicknav a{color:#8be4f1;text-decoration:none;font-size:14px}
.landing .hero{background:linear-gradient(135deg,#102e49,#0a2138);border:1px solid #245575}
.landing .hero p{color:#b8d7e7}.eyebrow{color:#52d6e8}.speed{background:#102c45;border-color:#315c76}.speed strong{color:#52d6e8}.speed small,.note{color:#a6bdcc}
button{background:#52d6e8;color:#061a2a}button:hover{background:#8ae9f2}.secondary-btn{background:#18364d;color:#e4f6ff}.secondary-btn:hover{background:#234963}
select,input:not([type=checkbox]):not([type=color]){background:#112b42;border-color:#42647a;color:#fff}label{color:#dcecf7}.intro{background:#102c45;border-color:#315c76}.intro h2,.intro #introSteps{color:#52d6e8}.intro p,.intro #introCaution{color:#bbd1de}
#stage{background:#fff;color:#111827}#feedback{color:#e7f4fc}#mistakes p,.board-entry{border-color:#31516a}
@media(max-width:500px){.card{padding:15px}.quicknav a{font-size:12px}.landing .hero{padding:18px 12px}.speed-grid{gap:5px}.speed{padding:10px 3px}.speed strong{font-size:16px}}

/* v0.2.5c: ten-language UI and Devanagari layout; preserve flash geometry */
:lang(hi){font-family:"Noto Sans Devanagari","Mangal",system-ui,sans-serif;line-height:1.65}
.quicknav a,button,select{overflow-wrap:anywhere}
#results #summary{overflow-wrap:anywhere}
@media(max-width:380px){.quicknav{flex-wrap:wrap}header{flex-wrap:wrap}.speed-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v0.3.0 — calm UI only; flash stimulus and timing rules remain unchanged */
body{background:radial-gradient(ellipse at 50% 5%,#e1e9e0,#f3f0e8 56%,#e9e8df);color:#2d4036}
.card{background:#fdfcf7;color:#2d4036;border:1px solid #d4ddd1;box-shadow:0 16px 55px #283e3424}
.quicknav a{color:#3c574b}.landing .hero{background:linear-gradient(135deg,#e8eee6,#f6f4ec);border:1px solid #d4ddd1}
.landing .hero p{color:#53695a}.eyebrow{color:#64816c}.speed{background:#eff3eb;border-color:#d2dfd0}.speed strong{color:#3c574b}.speed small,.note{color:#647568}
button{background:#3c574b;color:#fff}button:hover{background:#506d5a;color:#fff}.secondary-btn{background:#e1e8df;color:#2d4036}.secondary-btn:hover{background:#d0ded0}
select,input:not([type=checkbox]):not([type=color]){background:#fff;border-color:#b9c9ba;color:#283c31}label{color:#3b5546}.intro{background:#edf2eb;border-color:#d1ded1}.intro h2,.intro #introSteps{color:#3c574b}.intro p,.intro #introCaution{color:#607364}
/* High contrast stimulus surface intentionally stays white/dark; user-selected stimulus colors win. */
#stage{background:#fff;color:#111827}#feedback{color:#3c574b}#mistakes p,.board-entry{border-color:#d4ddd1}

/* v0.3.2: readable heading on the pale challenge introduction panel; no effect on test stimulus. */
.landing .hero #landingHeadline{color:#2d483a!important;text-shadow:none}
.landing .hero #landingLead{color:#53685a}