:root{--background:#f6f5ff;--foreground:#1f1b3a;--muted:#6f6a8f;--panel:#fff;--line:#e6e1ff;--green:#7c4dff;--green-dark:#5b21d8;--coral:#ff5d8f;--yellow:#ffd23f;--blue:#3ec6e0;--mist:#f0ecff}*{box-sizing:border-box}html{min-height:100%}body{min-height:100%;color:var(--foreground);background:radial-gradient(circle at 15% 10%, #ffd23f38, transparent 26rem), radial-gradient(circle at 86% 8%, #3ec6e033, transparent 22rem), radial-gradient(circle at 50% 100%, #7c4dff1f, transparent 30rem), var(--background);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,textarea{font:inherit}button{cursor:pointer}:root{--header-height:76px}.site-header{z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);background:#f6f5ffd1;position:sticky;top:0}.site-header-inner{width:min(1180px,100% - 32px);height:var(--header-height);justify-content:space-between;align-items:center;gap:16px;margin:0 auto;display:flex}.site-header .brand-row{color:inherit;margin-bottom:0;text-decoration:none}.banner-logo{width:auto;height:52px;display:block;overflow:visible}.banner-key{transform-origin:50%;animation:3.4s ease-in-out infinite banner-key-float}.banner-key-2{animation-delay:.6s}.banner-key-3{animation-delay:1.2s}.banner-spark circle{animation:2.4s ease-in-out infinite banner-spark-pulse}.banner-spark circle:nth-child(2){animation-delay:.5s}.banner-spark circle:nth-child(3){animation-delay:1s}.banner-cursor{animation:1.1s step-end infinite cursor-blink}@keyframes banner-key-float{0%,to{transform:translateY(0)rotate(-4deg)}50%{transform:translateY(-6px)rotate(4deg)}}@keyframes banner-spark-pulse{0%,to{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}@media (prefers-reduced-motion:reduce){.banner-key,.banner-spark circle,.banner-cursor{animation:none}}.site-nav{gap:8px;display:flex}.site-nav a{color:var(--green-dark);background:var(--mist);border-radius:999px;align-items:center;padding:8px 18px;font-size:.92rem;font-weight:800;text-decoration:none;transition:background .16s,color .16s,transform .16s;display:inline-flex}.site-nav a:hover{background:var(--green);color:#fff;transform:translateY(-1px)}@media (max-width:640px){.banner-logo{height:40px}.site-nav a{padding:8px 12px;font-size:.82rem}}.page-shell{width:min(1180px,100% - 32px);height:calc(100vh - var(--header-height));max-height:calc(100vh - var(--header-height));place-items:start center;margin:0 auto;padding:24px 0;display:grid;overflow:hidden}.hero-panel{width:100%}.page-shell.page-shell-results{height:auto;max-height:none;overflow:visible}.typing-history{z-index:1;border-top:1px solid var(--line);width:100%;max-width:820px;margin:16px auto 0;padding-top:24px;position:relative}.typing-history h2{margin-bottom:8px}.history-note{color:var(--muted);line-height:1.5}.result-metrics.history-bests{grid-template-columns:repeat(2,minmax(0,1fr))}.history-table{border-collapse:collapse;text-align:left;width:100%;margin-top:20px}.history-table th,.history-table td{border-bottom:1px solid var(--line);padding:12px 8px}.history-table th{color:var(--muted)}.history-table th:last-child,.history-table td:last-child{text-align:right;white-space:nowrap}@media (max-width:480px){.result-metrics.history-bests{grid-template-columns:1fr}.history-table{font-size:.85rem}}.brand-row{align-items:center;gap:16px;margin-bottom:14px;display:flex}.brand-mark{color:#fff;isolation:isolate;background:linear-gradient(135deg, #ffffff29, transparent 46%), linear-gradient(135deg, #17372c, var(--green));letter-spacing:0;border-radius:16px;place-items:center;width:58px;height:58px;font-weight:850;display:grid;position:relative;box-shadow:0 16px 36px #235d492e}.brand-mark:after{content:"";z-index:-1;border:2px solid #ffffff38;border-radius:10px;position:absolute;inset:10px}.logo-key{font-size:1.55rem;line-height:1}.logo-caret{background:var(--yellow);border-radius:99px;width:3px;height:25px;position:absolute;top:16px;left:15px;box-shadow:21px 0 #ffffff38}.logo-large{border-radius:26px;width:108px;height:108px}.logo-large:after{border-radius:16px;inset:16px}.logo-large .logo-key{font-size:3.2rem}.logo-large .logo-caret{width:5px;height:48px;top:29px;left:27px;box-shadow:41px 0 #ffffff38}.eyebrow{color:var(--green-dark);text-transform:uppercase;letter-spacing:.08em;margin:0 0 3px;font-size:.82rem;font-weight:800}h1,h2,p{margin-top:0}h1{letter-spacing:0;margin-bottom:0;font-size:clamp(2.35rem,5.4vw,4.4rem);line-height:.94}.workspace,.start-layout{display:block}.hero-banner{cursor:pointer;color:#fff;background:linear-gradient(135deg, var(--coral), var(--green) 55%, var(--blue));border-radius:8px;justify-content:space-between;align-items:center;gap:24px;margin-bottom:22px;padding:clamp(22px,4vw,38px) clamp(24px,5vw,48px);display:flex;position:relative;overflow:hidden;box-shadow:0 24px 60px #7c4dff52}.hero-banner:before,.hero-banner:after{content:"";background:#ffffff2e;border-radius:999px;position:absolute}.hero-banner:before{width:220px;height:220px;top:-90px;right:-60px}.hero-banner:after{background:#ffd23f4d;width:140px;height:140px;bottom:-80px;left:10%}.hero-banner-text{z-index:1;position:relative}.hero-banner-text p.eyebrow{color:#fff;opacity:.85}.hero-banner h2{margin:0 0 8px;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.05}.hero-banner p:last-child{color:#ffffffeb;max-width:480px;margin:0;line-height:1.6}.hero-banner-badge{z-index:1;background:#ffffff2e;border:2px solid #ffffff59;border-radius:24px;flex-shrink:0;place-items:center;width:96px;height:96px;font-size:2.6rem;animation:2.6s ease-in-out infinite badge-float;display:grid;position:relative;box-shadow:0 16px 36px #1f1b3a33}@media (max-width:860px){.hero-banner{text-align:left;flex-direction:column;align-items:flex-start}.hero-banner-badge{align-self:flex-end}}.start-card,.test-card,.encouragement{background:#ffffffdb;border:1px solid #17211c14;border-radius:8px;box-shadow:0 24px 70px #17211c1a}.start-card{padding:clamp(22px,3vw,32px)}.start-header{justify-content:space-between;align-items:end;gap:18px;display:flex}.start-card h2{letter-spacing:0;margin-bottom:0;font-size:clamp(2rem,4vw,3.4rem);line-height:1}.start-card>p:not(.result-label){max-width:620px;color:var(--muted);margin-bottom:24px;line-height:1.6}.time-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0 0;display:grid}.time-options button{border:1px solid var(--line);min-height:132px;color:var(--foreground);text-align:left;background:#fbfdfb;border-radius:8px;padding:18px;transition:background .16s,border-color .16s,box-shadow .16s,transform .16s;position:relative}.time-options button:hover,.time-options button.selected{border-color:var(--green);box-shadow:0 0 0 4px #2f7d5f1f}.time-options button:hover{transform:translateY(-2px)}.time-options button.selected{background:linear-gradient(135deg,#2f7d5f21,#0000 52%),#fbfdfb}.time-options strong,.time-options span,.time-options em{display:block}.time-options strong{margin-bottom:10px;font-size:clamp(1.8rem,3vw,2.4rem);line-height:1}.time-options span{color:var(--muted);font-size:1rem;font-weight:700}.time-options em{color:#fff;background:var(--green-dark);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:6px 10px;font-size:.76rem;font-style:normal;font-weight:850;position:absolute;bottom:16px;right:16px}.result-screen{background:linear-gradient(135deg,#f7c94829,#0000 34%),linear-gradient(145deg,#2f7d5f24,#0000 58%),#ffffffe6;border:1px solid #17211c14;border-radius:8px;flex-direction:column;justify-content:center;gap:16px;height:100%;max-height:100%;padding:clamp(16px,2.5vw,32px);animation:.52s ease-out both result-rise;display:flex;position:relative;overflow:hidden;box-shadow:0 24px 70px #17211c1a}.result-hero{z-index:1;text-align:center;max-width:800px;margin:0 auto;position:relative}.result-logo{width:64px;height:64px;margin:0 auto 10px;animation:1.4s ease-in-out infinite logo-pop}.result-logo:after{border-radius:10px;inset:10px}.result-logo .logo-key{font-size:1.9rem}.result-logo .logo-caret{width:3px;height:28px;top:17px;left:16px;box-shadow:24px 0 #ffffff38}.result-hero h2{letter-spacing:0;margin-bottom:8px;font-size:clamp(1.6rem,4vw,3.2rem);line-height:1.05}.result-hero p:last-child{max-width:620px;color:var(--muted);margin:0 auto;font-size:.96rem;line-height:1.5}.result-metrics{z-index:1;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:100%;max-width:820px;margin:0 auto;display:grid;position:relative}.result-metrics div{border:1px solid var(--line);text-align:center;background:#ffffffc2;border-radius:8px;min-height:90px;padding:14px}.result-metrics span{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;font-weight:850;display:block}.result-metrics strong{margin-top:6px;font-size:clamp(1.6rem,3vw,2.6rem);line-height:1;display:block}.result-actions{z-index:1;flex-wrap:wrap;justify-content:center;gap:12px;display:flex;position:relative}.celebration{pointer-events:none;position:absolute;inset:0}.celebration span{background:var(--yellow);opacity:0;border-radius:99px;width:12px;height:34px;animation:1.8s ease-in-out infinite celebrate;position:absolute}.celebration span:first-child{background:var(--coral);animation-delay:.1s;top:18%;left:12%}.celebration span:nth-child(2){background:var(--green);animation-delay:.35s;top:74%;left:24%}.celebration span:nth-child(3){background:var(--yellow);animation-delay:.2s;top:16%;left:78%}.celebration span:nth-child(4){background:var(--blue);animation-delay:.5s;top:58%;left:88%}.celebration span:nth-child(5){background:var(--green-dark);animation-delay:.72s;top:11%;left:42%}.celebration span:nth-child(6){background:var(--coral);animation-delay:.9s;top:82%;left:62%}.test-card{padding:clamp(18px,3vw,28px)}.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px;display:grid}.stats-grid div{border:1px solid var(--line);background:#fbfdfb;border-radius:8px;min-height:60px;padding:10px 14px}.stats-grid span{color:var(--muted);font-size:.82rem;font-weight:700;display:block}.stats-grid strong{margin-top:7px;font-size:clamp(1.35rem,3vw,2rem);line-height:1;display:block}.progress-track{background:var(--mist);border-radius:999px;height:10px;margin-bottom:12px;overflow:hidden}.progress-track div{border-radius:inherit;background:linear-gradient(90deg, var(--green), var(--yellow), var(--coral));height:100%;transition:width .18s}.typing-board{color:#6c7174;letter-spacing:.13em;cursor:text;background:linear-gradient(#ffffffc7,#fafdfce6),#f8fbfb;border:1px solid #0f687775;border-radius:8px;min-height:220px;padding:clamp(18px,3vw,32px) clamp(24px,6vw,64px);font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:clamp(1.1rem,2.2vw,1.8rem);font-weight:700;line-height:1.45;position:relative;overflow:hidden}.active-line-group{gap:12px;min-height:100px;display:grid}.target-line,.typed-line,.preview-line{white-space:pre;min-height:1.55em}.target-line{color:#4a5053d1;text-shadow:0 2px 5px #17211c14}.target-line span,.typed-line span{border-radius:4px;min-width:.72em;display:inline-block}.target-line .current{color:#0f9eb4;background:#0f9eb41f;box-shadow:inset 0 -4px #f7c948e6}.typing-cursor{width:0;animation:1s step-end infinite cursor-blink;display:inline-block;position:relative;overflow:visible}.typing-cursor:before{content:"";background:var(--green);width:2px;height:1.1em;position:absolute;top:.05em;left:0}@keyframes cursor-blink{0%,49%{opacity:1}50%,to{opacity:0}}.typed-line{color:#0f9eb4e6}.typed-line .pending{color:#0000}.typed-line .correct{color:#0f9eb4e6}.typed-line .incorrect{color:#a92f25;background:#f06f5f2e}.line-ruler{background:#6c717447;height:2px;margin:10px 0 14px}.preview-lines{color:#4a5053a3;gap:14px;display:grid}.preview-line{border-bottom:2px solid #6c71743d;padding-bottom:10px}.typing-input{opacity:0;pointer-events:none;width:1px;height:1px;position:fixed;top:0;left:0;overflow:hidden}textarea:not(.typing-input){resize:vertical;border:1px solid var(--line);width:100%;min-height:132px;color:var(--foreground);letter-spacing:.025em;background:#fff;border-radius:8px;outline:none;margin-top:16px;padding:18px;line-height:1.6;display:block}textarea:not(.typing-input):focus{border-color:var(--green);box-shadow:0 0 0 4px #2f7d5f24}textarea:not(.typing-input):disabled{color:var(--muted);background:#f8faf8}.actions{justify-content:flex-end;margin-top:10px;display:flex}.primary-button,.secondary-button{border:0;border-radius:8px;min-height:48px;padding:0 20px;font-weight:850}.primary-button{color:#fff;background:var(--green-dark)}.primary-button:hover{background:#1b4939}.start-now{letter-spacing:.02em;background:linear-gradient(135deg, var(--coral), var(--green) 55%, var(--blue));background-position:0%;background-size:200% 200%;border-radius:999px;min-width:200px;min-height:64px;padding:0 30px;font-size:1.15rem;transition:transform .18s,box-shadow .18s,background-position .4s;position:relative;overflow:hidden;box-shadow:0 16px 36px #7c4dff59}.start-now:after{content:"";background:linear-gradient(120deg,#0000 30%,#ffffff59 50%,#0000 70%);transition:transform .6s;position:absolute;inset:0;transform:translate(-100%)}.start-now:hover{background-position:100%;transform:translateY(-2px)scale(1.02);box-shadow:0 20px 44px #7c4dff73}.start-now:hover:after{transform:translate(100%)}.start-now:active{transform:translateY(0)scale(.99)}.secondary-button{color:var(--green-dark);background:var(--mist)}.encouragement{flex-direction:column;justify-content:space-between;gap:28px;padding:24px;display:flex;position:relative;overflow:hidden}.encouragement:before,.encouragement:after{content:"";background:var(--yellow);opacity:.55;border-radius:999px;position:absolute}.encouragement:before{width:18px;height:18px;top:34px;right:34px}.encouragement:after{background:var(--coral);width:28px;height:28px;bottom:34px;left:32px}.mascot{width:180px;height:146px;margin:10px auto 0;position:relative}.screen{background:#dff3e8;border:8px solid #17372c;border-radius:18px;justify-content:center;align-items:center;gap:14px;width:132px;height:88px;margin:0 auto;display:flex}.screen span{background:var(--green);border-radius:999px;width:14px;height:14px;animation:1.6s ease-in-out infinite blink}.screen span:nth-child(2){animation-delay:.15s}.screen span:nth-child(3){animation-delay:.3s}.keys{background:#17372c;border-radius:20px;grid-template-columns:repeat(4,1fr);gap:8px;height:50px;padding:13px;display:grid;position:absolute;bottom:0;left:18px;right:18px}.keys i{background:#f5fbf7;border-radius:8px}.result-label{color:var(--green-dark);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;font-size:.8rem;font-weight:850}.encouragement h2{letter-spacing:0;margin-bottom:12px;font-size:clamp(1.9rem,3.5vw,3.2rem);line-height:.98}.encouragement p:last-child{color:var(--muted);margin-bottom:0;line-height:1.6}@keyframes blink{0%,80%,to{transform:translateY(0)}40%{transform:translateY(-5px)}}@keyframes result-rise{0%{opacity:.45;transform:translateY(18px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes badge-float{0%,to{transform:translateY(0)rotate(-4deg)}50%{transform:translateY(-8px)rotate(4deg)}}@keyframes logo-pop{0%,to{transform:scale(1);box-shadow:0 16px 36px #235d492e}50%{transform:scale(1.04);box-shadow:0 22px 46px #235d4940}}@keyframes celebrate{0%{opacity:0;transform:translateY(18px)rotate(0)scale(.7)}25%,70%{opacity:.95}to{opacity:0;transform:translateY(-24px)rotate(190deg)scale(1)}}@media (prefers-reduced-motion:reduce){.result-screen,.result-logo,.celebration span,.screen span{animation:none}}@media (max-width:860px){.page-shell{place-items:start center;width:min(100% - 24px,680px);padding:22px 0}.workspace,.start-layout{grid-template-columns:1fr}.start-header{flex-direction:column;align-items:stretch}.start-now{width:100%}.time-options,.stats-grid,.result-metrics{grid-template-columns:1fr}.result-screen{min-height:auto}.typing-board{min-height:240px}}