:root{color-scheme:dark;--bg:#080b14;--surface:#101421;--surface2:#151a2a;--border:#292f43;--text:#f7f7fc;--muted:#adb4c5;--subtle:#8490a5;--violet:#9f99ff;--cyan:#82e3e6;--good:#8de0cc;--danger:#fb8f9f;--wrap:1120px;font-family:Inter,"Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #b9a9ff;outline-offset:3px}[hidden]{display:none!important}.wrap{width:min(var(--wrap),calc(100% - 48px));margin-inline:auto}.skip{position:absolute;left:12px;top:-80px;padding:12px;background:white;color:#080b14;z-index:999}.skip:focus{top:12px}
.header{position:relative;z-index:5;height:82px;border-bottom:1px solid #ffffff14;background:#080b14d9;backdrop-filter:blur(20px);position:sticky;top:0}.header-inner{height:100%;display:flex;align-items:center;gap:28px}.brand{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}.brand-icon{display:block;height:39px}.brand-name{font-weight:800;letter-spacing:-.5px;font-size:18px}.brand-name strong{color:var(--violet)}.header-nav{display:flex;gap:26px;margin-left:auto}.header-nav a{font-size:12px;color:#abb4c8;font-weight:700}.header-nav a:hover,.footer a:hover{color:#fff}.header-actions{display:flex;align-items:center;gap:15px}.language{background:none;border:0;color:#d3d0ff;padding:9px;font-size:12px;font-weight:850}.btn{display:inline-flex;justify-content:center;align-items:center;gap:11px;padding:13px 19px;border-radius:11px;font-weight:780;font-size:13px;border:1px solid transparent;transition:background .18s,transform .18s,box-shadow .18s}.btn:hover{transform:translateY(-1px)}.btn.small{padding:11px 15px}.btn.primary{background:#938afc;color:#101124;box-shadow:0 4px 30px #8578f72b}.btn.primary:hover{background:#b3aaff}.btn.ghost{background:#ffffff08;color:#e6e8f7;border-color:#43445f}.btn.ghost:hover{background:#ffffff16}
.hero{min-height:390px;position:relative;isolation:isolate;display:flex;align-items:center;overflow:hidden;padding-top:42px;padding-bottom:58px}.hero::before{content:"";position:absolute;inset:0;z-index:-3;background-image:linear-gradient(#7582ac10 1px,transparent 1px),linear-gradient(90deg,#7582ac10 1px,transparent 1px);background-size:66px 66px;mask-image:linear-gradient(90deg,transparent 10%,#000)}.light{position:absolute;z-index:-2;pointer-events:none;filter:blur(28px);border-radius:50%}.light-a{width:500px;height:400px;background:radial-gradient(circle,#6551b44a,transparent 68%);right:0;top:-90px}.light-b{width:390px;height:360px;background:radial-gradient(circle,#248d9b26,transparent 70%);right:10%;bottom:-150px}.hero-content{width:59%;position:relative;z-index:2}.eyebrow,.section-kicker{font-size:11px;font-weight:850;letter-spacing:2px;color:#a9a2dc;display:flex;align-items:center;gap:10px}.pulse-dot{display:inline-block;background:var(--good);height:8px;width:8px;border-radius:100%;box-shadow:0 0 14px #79c8c0a0;flex:none}.line{display:inline-block;height:1px;width:25px;background:#827da8}.hero h1{font-size:clamp(37px,4.65vw,60px);letter-spacing:-2.4px;line-height:1.3;margin:25px 0 19px;font-weight:900}.gradient{background:linear-gradient(95deg,#cbb9ff,#9893ff 52%,#9de9e8);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-sub{color:#bcc1d2;line-height:1.9;max-width:560px;font-size:14px}.hero-flags{display:flex;flex-wrap:wrap;gap:15px;margin-top:22px;font-size:11px;color:#a1abc0;font-weight:700}.tick{border:1px solid #5b8c8c;border-radius:100%;color:#96dacc;font-size:10px;display:inline-grid;place-items:center;width:16px;height:16px;margin-right:6px}.hero-graphic{margin-left:auto;width:38%;height:235px;position:relative;display:grid;place-items:center}.glass{width:min(100%,400px);border-radius:16px;overflow:hidden;border:1px solid #494467;background:linear-gradient(135deg,#22233e,#111729);box-shadow:0 25px 65px #0008;transform:rotate(-6deg);padding:0 15px 20px}.glass-header{display:flex;align-items:center;justify-content:space-between;height:44px;border-bottom:1px solid #ffffff16;color:#a6abc5}.glass-header small{font-size:10px;letter-spacing:1.4px}.dots{display:flex;gap:5px}.dots i{height:7px;width:7px;background:#7f789c;border-radius:50%}.dots i:first-child{background:#af98fe}.dots i:nth-child(2){background:#74d6ca}.keys{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;padding-top:20px}.keys span{display:grid;place-items:center;width:29px;height:31px;border-radius:5px;background:#32354b;box-shadow:0 3px 0 #131522;color:#c7c7da;font-size:10px;font-weight:800}.keys .key-lit{color:#16112f;background:#b2a3ff;box-shadow:0 3px 0 #6f64bf}.keys .key-lit.blue{background:#92ddd8;box-shadow:0 3px 0 #4e8f8e}.space-key{height:17px;width:60%;border-radius:4px;margin:11px auto 0;background:#34374e}.tiny-tile{position:absolute;background:#21213b;border:1px solid #4e4b77;border-radius:11px;padding:13px;color:#c9b8ff;font-weight:900;box-shadow:0 15px 40px #0008;z-index:2}.tiny-tile-1{top:-8px;right:0}.tiny-tile-1 span{font-weight:400;margin:0 9px;color:#7e82ae}.tiny-tile-2{bottom:0;left:0}.tiny-tile small{color:#a8abc8;font-size:9px;margin-left:7px}
.practice-section{padding-bottom:88px}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:23px}.section-head h2{font-size:30px;letter-spacing:-1px;margin:10px 0}.section-head p{font-size:13px;color:var(--muted);margin:0}.version-pill{border:1px solid #3f435c;border-radius:30px;color:#a6aacb;padding:10px 14px;font-size:10px;font-weight:800;letter-spacing:.7px;white-space:nowrap}.settings-bar{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:14px;align-items:end;background:#141827;border:1px solid var(--border);border-radius:18px 18px 0 0;padding:22px 24px}.setting{display:flex;flex-direction:column;gap:9px;min-width:0}.setting label{font-size:11px;color:#adb6cc;font-weight:750}.setting select{color:#eef0ff;background:#1c2336;border:1px solid #3a415a;padding:13px 12px;border-radius:10px;min-width:0;width:100%;appearance:auto;font-size:13px}.settings-bar .start-button{height:47px;white-space:nowrap}.game{background:linear-gradient(180deg,#121623,#0f1421);border:1px solid var(--border);border-top:0;border-radius:0 0 18px 18px;overflow:hidden}.game-top{display:flex;align-items:center;justify-content:space-between;padding:25px 30px 19px}.game-title{display:flex;align-items:center;gap:11px;color:#e8ebfa;font-size:13px;font-weight:750}.muted-dot{background:#777c97;box-shadow:none}.muted-dot.on{background:#91e0cc;box-shadow:0 0 18px #7ad7b450}.game-time{display:flex;align-items:baseline;gap:6px;color:#9fa6bc;font-size:11px}.game-time strong{font-variant-numeric:tabular-nums;color:#f0eaff;font-size:28px;letter-spacing:-1px}.game-time small{font-size:11px}.progress-track{height:5px;width:calc(100% - 60px);margin:0 30px;background:#31334c;border-radius:4px;overflow:hidden}.progress-track>div{height:100%;width:100%;background:linear-gradient(90deg,#7ee5d6,#b4a1ff);transition:width .1s linear}.challenge{padding:34px 32px 30px}.challenge-label{display:flex;align-items:center;gap:9px;color:#9da6c1;font-size:10px;letter-spacing:1.2px;font-weight:900}.number{background:#2b2947;color:#c3b9ff;border-radius:6px;padding:5px 8px}.separator{color:#646d84}.phrase{font-weight:800;font-size:clamp(21px,2.75vw,34px);line-height:1.45;margin-top:20px;min-height:48px;word-break:break-word;letter-spacing:-.6px}.reading{color:#96a7c9;font-size:14px;min-height:24px;margin:3px 0 20px}.target-label{color:#979db3;font-size:11px;font-weight:800;margin-bottom:10px}.target{min-height:60px;display:block;line-height:1.6;background:#0b0e19;border:1px solid #333650;border-radius:11px;padding:13px 14px;color:#bbc0d3;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(15px,1.95vw,21px);letter-spacing:1px;white-space:pre-wrap;overflow-wrap:anywhere}.target span{border-radius:2px}.target span.correct{color:#8cdecc}.target span.wrong{color:#ffadb5;background:#792e4166}.target span.next{border-bottom:2px solid #b7a8ff;background:#9f93ff15}.input-label{display:block;margin:20px 0 8px;color:#adb6cb;font-size:11px;font-weight:700}.challenge input{width:100%;border:1px solid #454b69;background:#1a2030;color:white;border-radius:10px;padding:16px;font:18px ui-monospace,Consolas,monospace;letter-spacing:.5px}.challenge input::placeholder{color:#7f8aa3}.challenge input:disabled{opacity:.65}.input-help{margin-top:10px;font-size:11px;line-height:1.7;color:#949eb8}.error-message{min-height:17px;margin-top:8px;color:#ffb2bd;font-size:12px}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#171b2b;border-top:1px solid #2b3145}.metric{padding:22px 30px;border-right:1px solid #2b3145}.metric:last-child{border-right:0}.metric>span{font-size:11px;color:#99a5c0;font-weight:650}.metric>div{margin-top:8px}.metric strong{font-size:33px;font-weight:850;letter-spacing:-1px;font-variant-numeric:tabular-nums}.metric small{color:#8894af;font-size:12px}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}.info-card{background:#121624;border:1px solid #292f43;border-radius:14px;padding:24px 26px;min-height:199px}.card-head{display:flex;align-items:center;gap:10px}.card-head h3{font-size:14px;margin:0}.card-glyph{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;background:#333056;color:#b8afff;font-size:20px}.card-glyph.cyan{background:#183d47;color:#9adcdc}.best-score{display:inline-block;font-size:44px;letter-spacing:-1px;margin-top:18px;line-height:1.1}.best-unit{font-size:12px;color:#9ca9c4;margin-left:8px}.info-card p{font-size:11px;line-height:1.7;color:#9da9bf;margin-bottom:4px}.text-button{font-size:11px;background:none;border:0;padding:0;color:#c1b5ff;text-decoration:underline;margin-top:8px}.tips{padding-left:20px;color:#a8b2c5;font-size:12px;line-height:2.2;margin:12px 0 0}
.results-layer{position:fixed;inset:0;z-index:300;background:#050713db;display:grid;place-items:center;padding:20px;backdrop-filter:blur(10px)}.result-panel{background:#181b2b;border:1px solid #575477;box-shadow:0 28px 100px #000c;width:min(100%,460px);border-radius:20px;padding:34px;text-align:center}.result-panel .section-kicker{justify-content:center}.result-panel h2{font-size:29px;margin:12px 0}.result-number{font-size:70px;line-height:1.2;color:#b7a8ff;font-weight:850;font-variant-numeric:tabular-nums}.result-number small{font-size:13px;color:#a4adbe}.result-details{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #373b52;border-bottom:1px solid #373b52;padding:20px 0;gap:6px}.result-details div{display:grid;gap:8px}.result-details span{font-size:10px;color:#aeb3ca}.result-details b{font-size:17px}.record-message{color:#9fe0d4;font-weight:800}.result-buttons{display:flex;justify-content:center;gap:11px;margin-top:25px}.footer{border-top:1px solid #ffffff12;padding:25px 0;background:#0d111d}.footer-inner{display:flex;justify-content:space-between;gap:20px;color:#8691a8;font-size:11px}.footer-inner>div{display:flex;flex-wrap:wrap;gap:20px}.footer button{background:none;color:#9f91ec;border:0;padding:0;font-size:11px}
@media(max-width:950px){.hero-graphic{display:none}.hero-content{width:100%}.hero{min-height:350px}.header-nav{display:none}.settings-bar{grid-template-columns:repeat(3,minmax(0,1fr))}.settings-bar .start-button{grid-column:1/-1}.brand-name{font-size:16px}.header-actions{margin-left:auto}}
@media(max-width:620px){.wrap{width:calc(100% - 30px)}.header{height:69px}.header-actions .btn{display:none}.hero{padding-top:30px;min-height:280px;padding-bottom:40px}.hero h1{font-size:38px}.hero-sub{font-size:13px}.eyebrow{font-size:9px}.section-head{align-items:flex-start}.version-pill{display:none}.section-head h2{font-size:25px}.settings-bar{padding:14px;gap:10px;grid-template-columns:1fr 1fr}.setting:last-of-type{grid-column:1/-1}.setting select{font-size:13px}.settings-bar .start-button{grid-column:1/-1}.game-top{padding:20px 18px 15px}.progress-track{margin:0 18px;width:calc(100% - 36px)}.challenge{padding:24px 18px 22px}.phrase{font-size:23px}.reading{font-size:12px}.target{font-size:16px;letter-spacing:.2px}.metric{padding:17px 13px}.metric strong{font-size:25px}.metric>span{font-size:10px}.bottom-grid{grid-template-columns:1fr}.footer-inner{flex-direction:column}.footer-inner>div{gap:13px}.result-panel{padding:23px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Operating Typing v4 — prompt selection protection */
#phrase, #reading, #target, #target *, #promptLevel {
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
#target { cursor:default; }