:root{--blue:#123c85;--sky:#eaf2ff;--yel:#ffc933;--grn:#1f8a4c;--red:#e5484d;--ink:#14213d;--mut:#5b6785;--line:#cfdcf5;--board:#20463a;--mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace;--serif:Georgia,"Times New Roman",serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:16px/1.6 "Segoe UI",system-ui,sans-serif;background:var(--sky) repeating-linear-gradient(0deg,transparent 0 31px,#d6e4fb 31px 32px)}
a{color:inherit}.wrap{max-width:1100px;margin:auto;padding:0 20px}
header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:4px solid var(--yel);box-shadow:0 2px 10px #123c8522}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{font:900 24px var(--serif);text-decoration:none;color:var(--blue)}.logo b{color:var(--red)}
nav a{margin-left:20px;text-decoration:none;font-weight:700;font-size:14px;color:var(--blue)}nav a:hover{color:var(--red)}
.hero{background:linear-gradient(135deg,#0d2d66,#1b56b8);color:#fff;text-align:center;padding:54px 0 46px;border-bottom:6px solid var(--yel)}
.hero small{font:700 12px var(--mono);letter-spacing:2px;color:var(--yel)}
h1{font:900 clamp(38px,6.5vw,70px)/1.05 var(--serif);margin:14px 0}h1 span{color:var(--yel);border-right:6px solid #fff;padding-right:6px;animation:bl 1s steps(1) infinite}@keyframes bl{50%{border-color:transparent}}
.hero p{max-width:640px;margin:0 auto 22px;color:#dbe7ff;font-size:18px}
.stats{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}
.stats div{background:#ffffff1f;border:2px solid #ffffff55;border-radius:12px;padding:8px 20px}.stats b{font:900 26px var(--serif);display:block;line-height:1.2;color:var(--yel)}.stats i{font:normal 11px var(--mono);color:#cfe0ff}
.btn{font:800 14px "Segoe UI",sans-serif;border:2px solid var(--blue);background:#fff;color:var(--blue);padding:11px 20px;border-radius:10px;cursor:pointer;box-shadow:0 4px 0 var(--blue);transition:.08s;text-decoration:none;display:inline-block}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--blue)}.btn.p{background:var(--blue);color:#fff;box-shadow:0 4px 0 #071d44}.btn.y{background:var(--yel);color:#3a2b00;border-color:#b58900;box-shadow:0 4px 0 #b58900}.btn.g{background:var(--grn);color:#fff;border-color:#0f5c30;box-shadow:0 4px 0 #0f5c30}.btn:disabled{opacity:.5}
section{padding:36px 0}h2{font:900 34px var(--serif);color:var(--blue);margin:0 0 4px}h2:before{content:"✏️ ";font-size:26px}.sub{color:var(--mut);margin:0 0 18px}
.card{background:#fff;border:3px solid var(--blue);border-radius:18px;padding:22px;box-shadow:0 8px 0 #123c8533}
.bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
select,input{font:inherit;padding:10px 12px;border:2px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}select{font-weight:700;border-color:var(--blue)}input:focus,select:focus{outline:3px solid #ffc93388}
.m{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.m div{border-radius:12px;padding:8px 12px;background:var(--sky);border-left:6px solid var(--yel)}.m i{font:normal 10px var(--mono);letter-spacing:1px;color:var(--mut)}.m b{font:900 28px var(--serif);display:block;line-height:1.2;color:var(--blue)}
#passage{position:relative;height:160px;overflow:hidden;background:var(--board);border:8px solid #9a6b34;border-radius:12px;padding:10px 16px;font:23px/2 var(--mono);color:#d9e8df;user-select:none;box-shadow:inset 0 0 25px #0008}
.w{display:inline-block;margin-right:.55em;border-radius:4px}.w.ok{color:#8ff0b0}.w.bad{color:#ff9d94;text-decoration:underline wavy}.w.cur{background:#ffe28a;color:var(--board)}
.w u{text-decoration:none}.w u.c{color:#1f7a45}.w u.x{color:#fff;background:var(--red)}
#typed,#rin,#racein{width:100%;margin-top:12px;font:20px var(--mono);border-color:var(--blue)}
.res{margin-top:16px;padding:18px;border:3px dashed var(--grn);border-radius:14px;background:#effbf3}.res h3{font:900 24px var(--serif);margin:0 0 6px;color:var(--grn)}
.tabs{display:flex;gap:10px;margin-bottom:14px}.tabs .btn.on{background:var(--blue);color:#fff}
#rain{width:100%;height:auto;border:4px solid var(--blue);border-radius:12px;display:block}
.lane{position:relative;height:40px;border-bottom:3px dashed var(--line);margin-bottom:4px}.lane span{position:absolute;top:0;font-size:26px;transition:left .1s linear}.lane em{position:absolute;right:4px;top:8px;font:normal 12px var(--mono);color:var(--mut)}
#racetext{font:20px/1.8 var(--mono);margin:12px 0;padding:12px;background:var(--board);color:#d9e8df;border:6px solid #9a6b34;border-radius:12px}#racetext b{color:#8ff0b0}
.cg{display:grid;grid-template-columns:320px 1fr;gap:22px;align-items:start}.cg label{display:block;font-weight:700;font-size:13px;margin-bottom:10px}.cg input{width:100%;margin-top:4px}.cg input[readonly]{background:var(--sky)}
#cert{width:100%;height:auto;border:2px solid var(--line);border-radius:8px;background:#fff}
details{background:#fff;border:2px solid var(--line);border-left:6px solid var(--yel);border-radius:12px;padding:12px 16px;margin-bottom:10px}summary{font-weight:800;cursor:pointer;color:var(--blue)}
footer{margin-top:30px;background:var(--blue);color:#dbe7ff;text-align:center;padding:24px 20px;font-size:14px;border-top:6px solid var(--yel)}
@media(max-width:760px){nav a:not(:last-child){display:none}.m{grid-template-columns:repeat(2,1fr)}.cg{grid-template-columns:1fr}#passage{font-size:18px}}
@media print{body{background:#fff}header,footer,.hero,section:not(#certificate),.cg>div:first-child,.sub,h2{display:none!important}.cg{display:block}.card{border:0;box-shadow:none;padding:0}@page{size:landscape;margin:0}#cert{border:0;width:100%}}