.tools-page {
    }
.tools-hero {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    min-height:240px;
    padding:22px 28px;
    border-radius:18px;
    color:white;
    background:radial-gradient(ellipse at 85% 5%,#adf0ff,transparent 55%),linear-gradient(115deg,#1234ad,#3679ff 55%,#8bddff)}
.tools-hero:after {
    content:"";
    position:absolute;
    z-index:-1;
    width:500px;
    height:220px;
    border-radius:50%;
    background:#ffffff12;
    left:-50px;
    bottom:-170px;
    box-shadow:330px -10px 0 20px #ffffff12}
.tools-crumb {
    font-size:13px;
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap}
.tools-hero a {
    color:inherit}
.tools-hero-copy {
    position:relative;
    z-index:2;
    max-width:52%;
    margin:25px 0 12px}
.tools-hero h1 {
    font-size:clamp(28px,3.3vw,46px);
    margin:0 0 12px;
    color:white}
.tools-hero p {
    font-size:16px;
    line-height:1.8;
    margin:0}
.tools-hero-art {
    position:absolute;
    right:7%;
    bottom:-30px;
    width:43%;
    height:260px;
    object-fit:contain;
    z-index:-1}
.tools-hero-note {
    position:absolute;
    right:24px;
    top:25px;
    transform:rotate(-9deg);
    font-weight:700;
    color:#13276b;
    font-size:19px}
.tool-tabs {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin:18px 0}
.tool-tabs a {
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:8px;
    border-radius:28px;
    border:1px solid #e4edff;
    background:white;
    color:#101d64;
    font-weight:600;
    font-size:14px;
    box-shadow:0 3px 12px #518cff08}
.tool-tabs a[aria-current] {
    color:white;
    background:linear-gradient(110deg,#287bff,#2255ff);
    box-shadow:0 0 0 3px white,0 0 0 5px #e3edff}
.tool-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px}
.tool-card {
    min-width:0;
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px 12px;
    background:#fff;
    border:1px solid #e5efff;
    border-radius:14px;
    box-shadow:0 3px 14px #459aff05;
    transition:transform .15s,box-shadow .15s;
    color:#10185e}
.tool-card:hover {
    transform:translateY(-3px);
    box-shadow:0 7px 20px #397cef18}
.tool-card-art {
    display:flex;
    flex:0 0 84px;
    height:92px;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#c9f6ff,#d3dfff);
    border-radius:13px;
    font-size:53px;
    line-height:1;
    text-shadow:2px 5px 2px #5392da30}
.tool-card:nth-child(4n+2) .tool-card-art {
    background:linear-gradient(135deg,#ffcef9,#e5d4ff)}
.tool-card:nth-child(4n+3) .tool-card-art {
    background:linear-gradient(135deg,#fff4ae,#b6ecff)}
.tool-card:nth-child(4n) .tool-card-art {
    background:linear-gradient(135deg,#dcd1ff,#fde2fc)}
.tool-card-copy {
    min-width:0;
    display:flex;
    flex:1;
    flex-direction:column;
    align-items:flex-start;
    min-height:145px}
.tool-card strong {
    font-size:16px;
    margin:4px 0 8px}
.tool-card-description {
    font-size:12px;
    color:#657398;
    line-height:1.65}
.tool-card-action {
    margin-top:auto;
    display:inline-flex;
    gap:14px;
    align-items:center;
    background:linear-gradient(120deg,#3193ff,#2152ff);
    color:white;
    padding:6px 16px;
    border-radius:24px;
    font-size:12px}
.is-upcoming .tool-card-action {
    background:#819cdc}
.tool-card-arrow {
    display:none}
.tools-finale {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:60px;
    margin:24px 0 0;
    min-height:150px;
    background:radial-gradient(ellipse at bottom,#d6eaff,transparent 70%);
    border-radius:20px;
    overflow:hidden}
.tools-finale>span {
    font-size:45px}
.tools-finale p {
    font-size:22px;
    font-weight:600;
    color:#172060;
    transform:rotate(-6deg)}
.tools-finale img {
    object-fit:contain;
    align-self:flex-end}
.tools-legacy {
    margin-top:24px;
    border-top:1px solid #dde9fa;
    padding-top:20px}
.tools-legacy summary {
    cursor:pointer;
    color:#586b91}
.tool-group {
    margin:24px 0}
.tool-group h2 {
    font-size:20px}
.tool-page {
    padding-top:24px;
    padding-bottom:40px}
.tool-heading {
    display:flex;
    align-items:center;
    gap:18px;
    margin:28px auto;
    max-width:900px}
.tool-heading h1 {
    font-size:clamp(24px,4vw,34px);
    margin:0 0 8px}
.tool-heading p {
    margin:0;
    color:#627293}
.tool-symbol {
    font-size:54px}
.tool-workspace {
    max-width: var(--container-width);
    margin-top:8px;
    background:white;
    border:1px solid #e1ebff;
    border-radius:20px;
    box-shadow:0 8px 35px #387afa0a}
.tool-form {
    display:grid;
    gap:18px;
    text-align:left}
.tool-form label {
    display:grid;
    gap:8px;
    font-weight:600}
.tool-form input,.tool-form textarea,.tool-form select {
    width:100%;
    min-width:0;
    padding:12px;
    border:1px solid #cddbf4;
    border-radius:10px;
    background:#fff;
    color:#17234e;
    font:inherit}
.tool-form input[type=color] {
    height:70px;
    padding:4px}
.tool-form input[type=checkbox] {
    width:22px;
    height:22px}
.tool-form .check-label {
    display:flex;
    align-items:center;
    gap:10px}
.tool-form textarea {
    resize:vertical}
.tool-fields {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px}
.tool-button,.tool-workspace button {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-height:44px;
    padding:10px 20px;
    border:0;
    border-radius:12px;
    background:#2464f5;
    color:white;
    font:inherit;
    cursor:pointer}
.tool-workspace button:disabled {
    background:#93a6cf;
    cursor:default}
.tool-result {
    display:block;
    padding:20px;
    margin-top:20px;
    background:#f0f6ff;
    border-radius:12px;
    font-size:20px;
    overflow-wrap:anywhere;
    white-space:pre-wrap}
.tool-result:empty {
    display:none}
.tool-error {
    padding:14px;
    background:#fff0f1;
    color:#a42745;
    border-radius:10px}
.typing-game { color: var(--color-text); }
.typing-game__topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.typing-game__eyebrow { margin:0 0 4px; color:var(--color-primary); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.typing-game__topbar h2 { margin:0; font-size:clamp(22px,4vw,32px); line-height:1.2; }
.typing-game__stats { display:flex; gap:8px; }
.typing-game__stats span { min-width:62px; padding:8px 10px; border:1px solid var(--color-border); border-radius:12px; background:var(--color-background-soft); text-align:center; }
.typing-game__stats b,.typing-game__stats small { display:block; }
.typing-game__stats b { color:var(--color-primary); font-size:18px; line-height:1.2; }
.typing-game__stats small { color:var(--color-text-secondary); font-size:11px; }
.typing-game__arena { position:relative; height:390px; overflow:hidden; border:1px solid #d8e3fb; border-radius:18px; background:linear-gradient(180deg,#f6f8ff 0%,#edf6ff 100%); box-shadow:inset 0 -35px 70px rgba(111,214,193,.12); }
.typing-game__arena:focus-visible { outline:3px solid var(--color-accent); outline-offset:3px; }
.typing-game__floor { position:absolute; right:0; bottom:0; left:0; height:10px; background:linear-gradient(90deg,var(--color-mint),var(--color-primary),var(--color-accent)); opacity:.65; }
.typing-game__start { position:absolute; z-index:3; top:50%; left:50%; width:min(86%,380px); padding:26px; transform:translate(-50%,-50%); border:1px solid var(--color-border); border-radius:18px; background:rgba(255,255,255,.92); box-shadow:var(--shadow-md); text-align:center; }
.typing-game__start[hidden] { display:none; }
.typing-game__start-icon { display:block; margin-bottom:8px; color:var(--color-primary); font-size:34px; }
.typing-game__start h3 { margin:0 0 6px; font-size:22px; }
.typing-game__start p { margin:0 0 16px; color:var(--color-text-secondary); }
.typing-game__message { position:absolute; z-index:2; top:15px; left:50%; min-height:24px; transform:translateX(-50%); font-weight:800; opacity:0; transition:opacity .2s ease,transform .2s ease; }
.typing-game__message.is-correct,.typing-game__message.is-wrong { opacity:1; transform:translate(-50%,4px); }
.typing-game__message.is-correct { color:#168b70; }.typing-game__message.is-wrong { color:#c34e65; }
.typing-letter { position:absolute; top:0; z-index:1; display:flex; width:46px; height:46px; align-items:center; justify-content:center; transform:translate(-50%,-10px); border:3px solid var(--color-primary); border-radius:50%; background:#fff; color:var(--color-primary); box-shadow:0 7px 16px rgba(79,109,245,.22); font-size:23px; font-weight:800; transition:background .15s ease,color .15s ease,transform .18s ease,opacity .18s ease; }
.typing-letter.is-hit { background:var(--color-mint); color:#fff; opacity:0; }
.typing-game__controls { display:flex; align-items:center; gap:12px; margin:16px 0; }
.tool-button--secondary { background:var(--color-background-soft); color:var(--color-primary); border:1px solid #cfdbf5; }
.typing-game__speed { display:flex; align-items:center; gap:8px; margin-left:auto; color:var(--color-text-secondary); font-size:14px; font-weight:700; }
.typing-game__speed select { min-height:40px; padding:7px 10px; border:1px solid #cddbf4; border-radius:10px; background:#fff; color:var(--color-text); font:inherit; }
.typing-keyboard { display:grid; gap:7px; padding:16px 10px; border:1px solid var(--color-border); border-radius:16px; background:#f7f9ff; }
.typing-keyboard__row { display:flex; justify-content:center; gap:6px; }
.typing-key { width:clamp(28px,7vw,56px); min-height:44px!important; padding:5px!important; border:1px solid #d1dcf2!important; border-radius:9px!important; background:#fff!important; color:var(--color-text)!important; box-shadow:0 3px 0 #dbe4f5; font-size:14px!important; font-weight:800; transition:transform .12s ease,background .12s ease,box-shadow .12s ease; }
.typing-key:hover { background:#edf3ff!important; }.typing-key.is-correct { background:var(--color-mint)!important; border-color:var(--color-mint)!important; color:#fff!important; box-shadow:0 0 18px rgba(111,214,193,.65); transform:translateY(2px); }
.typing-key.is-wrong { background:#ffedf0!important; border-color:#e6768b!important; color:#b83e58!important; animation:typing-key-shake .28s ease; }
.typing-game__hint { margin-bottom:0; text-align:center; }
@keyframes typing-key-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
@media (max-width:640px) { .typing-game__topbar { align-items:flex-start; flex-direction:column; }.typing-game__stats { width:100%; }.typing-game__stats span { flex:1; }.typing-game__arena { height:330px; }.typing-game__controls { flex-wrap:wrap; }.typing-game__speed { margin-left:0; }.typing-keyboard { margin-inline:-4px; padding-inline:4px; }.typing-keyboard__row { gap:3px; }.typing-key { min-height:40px!important; } }
.tool-hint {
    font-size:14px;
    color:#677798;
    line-height:1.8;
    margin-top:20px}
.tool-placeholder {
    text-align:center;
    padding:30px 0}
.color-preview {
    height:130px;
    border-radius:14px}
.tool-workspace canvas {
    max-width:100%;
    height:auto}
.tool-preview {
    display:block;
    max-width:100%;
    max-height:350px;
    object-fit:contain;
    margin:20px auto}
.tool-workspace [hidden] {
    display:none!important}
.bit-lights {
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:8px}
.bit-lights button {
    display:flex;
    flex-direction:column;
    padding:12px 3px;
    background:#edf2fa;
    color:#46547b}
.bit-lights button[aria-pressed=true] {
    background:#ffe582;
    color:#6b4b05}
.bit-lights small {
    font-size:11px}
.piano {
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:5px}
.piano button {
    min-height:150px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background:linear-gradient(white,#e1edff);
    border:1px solid #b4c8ee;
    color:#2049ab;
    padding:15px 2px}
.piano button:active {
    background:#bfd4ff}
.clock-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px}
.clock-tile {
    padding:20px;
    background:#f0f6ff;
    border-radius:16px}
.clock-tile time {
    display:block;
    font-size:28px;
    color:#1f54cc}
.clock-tile small {
    color:#657398}
.tool-workspace pre {
    overflow:auto}
.tool-card:focus-visible,.tool-tabs a:focus-visible,.tool-workspace :focus-visible {
    outline:3px solid #ffbd30;
    outline-offset:4px}

@media(min-width:1400px) {
    .tool-card-art {
    flex-basis:96px;
    height:104px}
}

@media(max-width:1100px) {
    .tool-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))}
.tools-hero-note {
    font-size:15px;
    right:16px}
.tool-card-art {
    flex-basis:72px;
    height:80px;
    font-size:46px}
}

@media(max-width:800px) {
    .tool-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))}
.tools-hero-copy {
    max-width:65%}
.tools-hero-art {
    right:0;
    width:45%;
    opacity:.8}
.tools-hero-note {
    display:none}
.tool-tabs a {
    font-size:13px}
.tool-tabs i {
    display:none}
}

@media(max-width:540px) {
    .tools-page {
    padding-top:10px}
.tools-hero {
    min-height:205px;
    padding:16px;
    border-radius:12px}
.tools-hero .tools-crumb {
    display:none}
.tools-hero-copy {
    margin:0;
    max-width:76%}
.tools-hero h1 {
    font-size:27px;
    margin-bottom:10px}
.tools-hero p {
    font-size:13px;
    max-width:220px;
    text-shadow:0 1px 3px #1544b9}
.tools-hero-art {
    width:63%;
    height:170px;
    bottom:-25px;
    right:-10px;
    opacity:1}
.tool-tabs {
    gap:6px;
    margin:14px 0}
.tool-tabs a {
    min-height:40px;
    padding:6px 3px;
    font-size:12px;
    white-space:nowrap}
.tab-count {
    display:none}
.tool-grid {
    grid-template-columns:1fr;
    gap:7px}
.tool-card {
    align-items:center;
    padding:8px 10px;
    gap:12px;
    border-radius:12px}
.tool-card-art {
    flex-basis:52px;
    height:52px;
    font-size:35px;
    border-radius:9px}
.tool-card-copy {
    min-height:0;
    display:block}
.tool-card strong {
    display:block;
    font-size:14px;
    margin:0 0 5px}
.tool-card-description {
    display:block;
    font-size:12px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis}
.tool-card-action {
    display:none}
.tool-card-arrow {
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 30px;
    height:30px;
    border-radius:50%;
    background:#edf3ff;
    color:#2863f5;
    font-size:25px}
.tools-finale {
    gap:18px;
    min-height:115px;
    margin-top:15px}
.tools-finale p {
    font-size:16px}
.tools-finale>span {
    font-size:26px}
.tools-finale img {
    width:85px;
    height:100px}
.tool-heading {
    gap:12px;
    margin:20px 0}
.tool-symbol {
    font-size:40px}
.tool-heading p {
    font-size:13px}
.tool-fields {
    grid-template-columns:1fr}
.tool-result {
    font-size:17px;
    padding:15px}
.clock-grid {
    grid-template-columns:1fr}
.bit-lights {
    gap:4px}
.tool-workspace .bit-lights button {
    padding:10px 1px}
.piano button {
    min-height:110px;
    font-size:12px}
.tools-legacy summary {
    font-size:13px}
}

@media(prefers-reduced-motion:reduce) {
    .tool-card {
    transition:none}
.tool-card:hover {
    transform:none}
}


.tool-card-art i,.tool-symbol i {
    color:#2864ed;
    text-shadow:2px 3px 0 #fff8}

/* Full-screen typing adventure */
.typing-intro{position:relative;display:grid;grid-template-columns:1fr;gap:26px;overflow:hidden;padding:clamp(24px,4vw,48px);border:1px solid #dce5ff;border-radius:24px;background:radial-gradient(circle at 5% 10%,#74ebda38,transparent 27%),radial-gradient(circle at 75% 0,#796aff29,transparent 34%),linear-gradient(145deg,#fbfdff,#f3f6ff)}
.typing-intro:before,.typing-intro:after{content:"";position:absolute;border-radius:50%;pointer-events:none}.typing-intro:before{right:38%;bottom:-80px;width:190px;height:190px;border:35px solid #4f6df50d}.typing-intro:after{top:22px;left:48%;width:9px;height:9px;background:#ffc857;box-shadow:35px 26px 0 #72d9c5,-20px 55px 0 #9278ff}
.typing-intro__copy{position:relative;z-index:1;align-self:center}.typing-game__eyebrow{margin:0 0 8px;color:var(--color-primary);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.typing-game__eyebrow i{margin-right:5px;color:#7458ea}.typing-intro h2{max-width:650px;margin:0;color:#152858;font-size:clamp(30px,4.6vw,52px);line-height:1.1;letter-spacing:-.035em}.typing-intro__lead{max-width:650px;margin:16px 0 24px;color:#637397;font-size:clamp(15px,1.8vw,18px);line-height:1.75}
.typing-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.typing-rules div{display:grid;grid-template-columns:42px 1fr;column-gap:10px;align-items:center;min-width:0;padding:13px;border:1px solid #d8e2f9e6;border-radius:15px;background:#ffffffbf;box-shadow:0 8px 24px #2a407d0d}.typing-rules span{grid-row:1/3;display:grid;width:42px;height:42px;place-items:center;border-radius:13px;background:#e9efff;color:#526cf2;font-size:18px}.typing-rules div:nth-child(2) span{background:#fff5d9;color:#e7a400}.typing-rules div:nth-child(3) span{background:#ffebef;color:#e65c78}.typing-rules strong,.typing-rules small{min-width:0}.typing-rules strong{color:#1c2e5d;font-size:14px}.typing-rules small{color:#7685a3;font-size:11px;line-height:1.4}
.typing-launch-card{position:relative;z-index:1;display:grid;grid-template-columns:120px minmax(180px,1fr) auto minmax(190px,260px);grid-template-areas:"mascot title title title" "mascot copy speed button";column-gap:22px;row-gap:5px;align-items:center;padding:24px 30px;border:1px solid #ffffffd9;border-radius:22px;background:linear-gradient(120deg,#667bf7,#674dcc);color:#fff;box-shadow:0 18px 45px #4e4cb940;text-align:left}.typing-launch-card__mascot{grid-area:mascot;position:relative;display:grid;width:100px;height:100px;margin:0;place-items:center;border-radius:50%;background:#ffffff21;font-size:46px;animation:typing-float 3s ease-in-out infinite}.typing-launch-card__mascot>span{position:absolute;display:grid;width:28px;height:28px;place-items:center;border:2px solid #fff;border-radius:8px;background:#fff5bf;color:#4f56b4;box-shadow:0 4px 0 #181f5b38;font-size:13px;font-weight:900}.typing-launch-card__mascot>span:nth-of-type(1){top:0;right:-5px;transform:rotate(8deg)}.typing-launch-card__mascot>span:nth-of-type(2){right:-13px;bottom:8px;transform:rotate(-8deg)}.typing-launch-card__mascot>span:nth-of-type(3){bottom:-8px;left:4px;transform:rotate(5deg)}.typing-launch-card h3{grid-area:title;align-self:end;margin:0 0 5px;font-size:23px}.typing-launch-card p{grid-area:copy;align-self:center;min-height:0;margin:0;color:#e7eaff;font-size:13px;line-height:1.6}
.typing-launch-card .typing-game__speed{grid-area:speed;display:flex;align-items:center;justify-content:flex-end;margin:0;color:#fff;font-size:13px;font-weight:800}.typing-launch-card .typing-game__speed select{width:132px;min-height:44px;padding:7px 32px 7px 14px;border:1px solid #ffffff73;border-radius:11px;background:#fff;color:#273764;font:inherit}.typing-launch-card__button{grid-area:button;display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:44px;background:#ffd25a!important;color:#3e3977!important;box-shadow:0 5px 0 #e4ad2c!important}.typing-launch-card__button:hover{transform:translateY(-2px);box-shadow:0 7px 0 #e4ad2c!important}
.typing-play[hidden],.typing-game__overlay[hidden],.typing-game__final-score[hidden],.typing-game__overlay button[hidden]{display:none!important}.typing-play{position:fixed;z-index:9999;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:10px;padding:clamp(10px,2vw,22px);background:linear-gradient(145deg,#111b48,#16265d 52%,#102f59);color:#fff}.typing-play:fullscreen{width:100vw;height:100vh}.typing-game-open{overflow:hidden}.typing-play__header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px}.typing-play__brand{display:flex;align-items:center;gap:10px;font-size:17px}.typing-play__brand>span{display:grid;width:38px;height:38px;place-items:center;border-radius:12px;background:linear-gradient(135deg,#786fff,#46ccdc);box-shadow:0 6px 18px #36d0e038}
.typing-play .typing-game__stats{display:flex;width:auto;justify-content:center;gap:8px}.typing-play .typing-game__stats>span{display:grid;grid-template-columns:auto auto;column-gap:7px;align-items:center;min-width:88px;padding:7px 13px;border:1px solid #ffffff1f;border-radius:13px;background:#ffffff14;text-align:left;backdrop-filter:blur(10px)}.typing-play .typing-game__stats small{grid-column:1;display:block;color:#aebce4;font-size:10px;font-weight:700;text-transform:uppercase}.typing-play .typing-game__stats b{grid-column:2;grid-row:1;display:block;color:#fff;font-size:21px;line-height:1}.typing-game__stats b em{font-style:normal}.typing-game__stats b i{color:#84ebd5;font-size:12px;font-style:normal}.typing-play .typing-game__stats .typing-lives{color:#ff6f91;font-size:18px;letter-spacing:2px}.typing-play__actions{display:flex;justify-content:flex-end;gap:8px}.typing-play__actions button{display:grid;width:40px;height:40px;min-height:0;padding:0;place-items:center;border:1px solid #ffffff26;border-radius:12px;background:#ffffff14;color:#fff;font-size:16px}.typing-play__actions button:hover{background:#ffffff2b}
.typing-play .typing-game__arena{position:relative;height:auto;min-height:220px;overflow:hidden;border:1px solid #9ebaff3d;border-radius:22px;background:radial-gradient(circle at 50% -10%,#6876ff52,transparent 46%),linear-gradient(180deg,#182760,#19376a 60%,#15516b);box-shadow:inset 0 -55px 90px #46e1ca1c,0 16px 40px #03082347}.typing-game__arena:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.8%,#ffffff0a 50%,transparent 50.2%);background-size:20% 100%}.typing-game__arena.is-missed{animation:typing-arena-shake .28s ease}.typing-game__sky i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;opacity:.65;animation:typing-twinkle 2.4s ease-in-out infinite}.typing-game__sky i:nth-child(1){top:16%;left:8%}.typing-game__sky i:nth-child(2){top:28%;left:31%;animation-delay:.7s}.typing-game__sky i:nth-child(3){top:12%;right:25%;animation-delay:1.1s}.typing-game__sky i:nth-child(4){top:44%;right:9%;animation-delay:.4s}.typing-game__sky i:nth-child(5){top:60%;left:17%;animation-delay:1.5s}
.typing-play .typing-game__floor{position:absolute;z-index:2;right:18px;bottom:20px;left:18px;width:auto;height:3px;border-radius:99px;background:linear-gradient(90deg,transparent,#72ead2 10%,#91a0ff 50%,#72ead2 90%,transparent);box-shadow:0 0 16px #64e1d1;opacity:1}.typing-game__arena.is-missed .typing-game__floor{animation:typing-floor-alert .6s ease-out}.typing-game__floor span{position:absolute;right:0;bottom:8px;color:#93dddc;font-size:9px;font-weight:800;letter-spacing:.18em}.typing-game__arena.is-missed .typing-game__floor span{color:#ff9caf}.typing-play .typing-game__message{position:absolute;z-index:4;top:18px;left:50%;min-height:0;padding:7px 15px;transform:translate(-50%,-8px);border-radius:99px;background:#091237c7;font-weight:900;opacity:0;transition:opacity .18s ease,transform .18s ease}.typing-play .typing-game__message.is-correct,.typing-play .typing-game__message.is-wrong{opacity:1;transform:translate(-50%,0)}.typing-play .typing-game__message.is-correct{color:#83f1d7}.typing-play .typing-game__message.is-wrong{color:#ff91aa}
.typing-play .typing-letter{position:absolute;top:0;z-index:3;display:flex;width:54px;height:54px;align-items:center;justify-content:center;transform:translate(-50%,-58px);border:2px solid #fff;border-radius:17px;background:linear-gradient(145deg,#fff,#e9eeff);color:#5369eb;box-shadow:0 8px 0 #1925686b,0 13px 25px #060d354d;font-size:25px;font-weight:900;text-transform:uppercase;transition:background .15s ease,color .15s ease,opacity .3s ease,filter .3s ease,box-shadow .3s ease}.typing-play .typing-letter--1{color:#a74ed4}.typing-play .typing-letter--2{color:#ec7b35}.typing-play .typing-letter--3{color:#168e83}.typing-play .typing-letter.is-hit{background:#fff;color:#fff;filter:brightness(2);box-shadow:0 0 30px #fff,0 0 48px #76e1c8;opacity:0}.typing-play .typing-letter.is-failed{z-index:6;border-color:#ff8aa1;background:#ffdae2;color:#b82f50;box-shadow:0 0 0 6px #ff668536,0 0 30px #ff496e;animation:typing-letter-fail .55s ease-out forwards}.typing-letter-particle{position:absolute;z-index:5;width:8px;height:8px;border-radius:2px;pointer-events:none;box-shadow:0 0 8px currentColor;animation:typing-letter-burst .58s cubic-bezier(.12,.7,.25,1) forwards}
.typing-game__overlay{position:absolute;z-index:10;inset:0;display:grid;align-content:center;justify-items:center;padding:25px;background:#091236c2;backdrop-filter:blur(9px);text-align:center}.typing-game__result-icon{display:grid;width:68px;height:68px;margin-bottom:14px;place-items:center;border-radius:22px;background:linear-gradient(145deg,#7a72ff,#54d1d2);box-shadow:0 12px 35px #42d6d240;font-size:28px}.typing-game__overlay h3{margin:0 0 7px;color:#fff;font-size:28px}.typing-game__overlay p{max-width:420px;margin:0 0 13px;color:#c2cdec}.typing-game__final-score{margin-bottom:16px;color:#ffe27e;font-size:22px}.typing-game__overlay>div{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.typing-game__text-button{padding:10px 14px;border:0;background:transparent;color:#c6d2ef;text-decoration:none}.typing-game__text-button:hover{color:#fff;background:#ffffff12}
.typing-play .typing-keyboard{display:grid;gap:6px;width:min(100%,700px);margin:0 auto;padding:7px;border:1px solid #ffffff1a;border-radius:17px;background:#ffffff0e}.typing-keyboard.is-display-only .typing-key{pointer-events:none;cursor:default}.typing-play .typing-keyboard__row{display:flex;justify-content:center;gap:5px}.typing-play .typing-key{width:min(8.8vw,58px);min-height:42px!important;padding:3px!important;border:1px solid #ffffff47!important;border-radius:9px!important;background:linear-gradient(180deg,#f9fbff,#dfe7ff)!important;color:#293767!important;box-shadow:0 3px 0 #8795c7;font-size:clamp(11px,2.8vw,16px)!important;font-weight:900;touch-action:manipulation;transition:transform .1s ease,background .1s ease,box-shadow .1s ease}.typing-play .typing-key:active,.typing-play .typing-key.is-correct{background:#78e0c7!important;border-color:#8cf2db!important;color:#fff!important;box-shadow:0 1px 0 #3fae98,0 0 18px #6fd6c18c;transform:translateY(2px)}.typing-play .typing-key.is-wrong{background:#ffccd6!important;border-color:#ff8fa4!important;color:#aa3450!important;animation:typing-key-shake .28s ease}.typing-play__hint{margin:0;color:#aebce4;font-size:11px;text-align:center}.typing-play__hint i{margin-right:4px;color:#72dccb}
@keyframes typing-arena-shake{0%,100%{transform:translateX(0)}30%{transform:translateX(-5px)}70%{transform:translateX(5px)}}@keyframes typing-floor-alert{0%,100%{background:linear-gradient(90deg,transparent,#72ead2 10%,#91a0ff 50%,#72ead2 90%,transparent);box-shadow:0 0 16px #64e1d1}25%,65%{height:6px;background:linear-gradient(90deg,transparent,#ff496e 10%,#ff9a78 50%,#ff496e 90%,transparent);box-shadow:0 0 14px #ff496e,0 0 34px #ff234f}}@keyframes typing-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}@keyframes typing-twinkle{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:.9;transform:scale(1.4)}}@keyframes typing-letter-burst{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--burst-x)),calc(-50% + var(--burst-y))) scale(.25) rotate(var(--burst-r))}}@keyframes typing-letter-fail{0%{opacity:1;filter:brightness(1)}30%{filter:brightness(1.7)}55%{opacity:1;width:60px;height:44px;margin-top:10px;border-radius:22px}100%{opacity:0;width:68px;height:16px;margin-top:34px;border-radius:50%;filter:brightness(.7)}}
@media(max-width:760px){.typing-intro{grid-template-columns:1fr;padding:22px}.typing-rules{grid-template-columns:1fr}.typing-launch-card{grid-template-columns:1fr;grid-template-areas:"mascot" "title" "copy" "speed" "button";gap:13px;padding:22px;text-align:center}.typing-launch-card__mascot{margin:0 auto 5px}.typing-launch-card h3{margin:0}.typing-launch-card .typing-game__speed{width:100%;max-width:330px;margin:3px auto 0}.typing-launch-card .typing-game__speed select{width:100%}.typing-launch-card__button{max-width:330px;margin:0 auto}.typing-play{gap:7px;padding:8px}.typing-play__header{grid-template-columns:1fr auto}.typing-play__brand{display:none}.typing-play .typing-game__stats{width:auto;justify-content:flex-start}.typing-play .typing-game__stats>span{min-width:0;padding:6px 8px}.typing-play .typing-game__stats b{font-size:17px}.typing-play .typing-game__stats .typing-lives{font-size:14px}.typing-play .typing-game__arena{height:auto;border-radius:16px}.typing-play .typing-letter{width:46px;height:46px;border-radius:14px;font-size:21px}.typing-game__overlay h3{font-size:24px}}
@media(min-width:761px) and (max-width:980px){.typing-launch-card{grid-template-columns:105px minmax(0,1fr) auto;grid-template-areas:"mascot title title" "mascot copy copy" "mascot speed button"}.typing-launch-card__button{min-width:190px}}
@media(max-height:600px) and (hover:none){.typing-play{grid-template-rows:auto minmax(160px,1fr) auto}.typing-play__hint{display:none}.typing-play .typing-key{min-height:34px!important}.typing-play .typing-game__stats small{display:none}.typing-play .typing-game__stats>span{display:block;text-align:center}}
@media(hover:none),(pointer:coarse){.typing-play__hint{display:none}}

/* Keep the full-screen typing game inside narrow mobile viewports. */
.typing-play{box-sizing:border-box;width:100%;max-width:100vw;height:100vh;height:100dvh;min-width:0;overflow:hidden;padding-left:max(clamp(10px,2vw,22px),env(safe-area-inset-left));padding-right:max(clamp(10px,2vw,22px),env(safe-area-inset-right));padding-top:max(clamp(10px,2vw,22px),env(safe-area-inset-top));padding-bottom:max(clamp(10px,2vw,22px),env(safe-area-inset-bottom))}.typing-play:fullscreen{box-sizing:border-box;width:100%;max-width:100vw;height:100vh;height:100dvh}.typing-play>*{min-width:0;max-width:100%}.typing-play .typing-keyboard{box-sizing:border-box;min-width:0;max-width:700px}.typing-play .typing-keyboard__row{width:100%;min-width:0}.typing-play .typing-key{flex:1 1 0;width:auto;min-width:0;max-width:58px}
@media(max-width:760px){.typing-play{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right));padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}.typing-play__header{width:100%;min-width:0;gap:6px}.typing-play .typing-game__stats{min-width:0;gap:4px;overflow:hidden}.typing-play .typing-game__stats>span{flex:1 1 0;grid-template-columns:1fr;min-width:0;padding:5px 4px;text-align:center}.typing-play .typing-game__stats small,.typing-play .typing-game__stats b{grid-column:1}.typing-play .typing-game__stats b{grid-row:2;margin-top:2px}.typing-play .typing-game__stats .typing-lives{font-size:13px;letter-spacing:0}.typing-play__actions{flex:0 0 auto;gap:4px}.typing-play__actions button{width:34px;height:34px;border-radius:10px}.typing-play .typing-keyboard{width:100%;padding:6px 4px;gap:5px}.typing-play .typing-keyboard__row{width:100%;gap:3px;justify-content:center}.typing-play .typing-key{flex:0 0 calc((100% - 27px)/10);width:calc((100% - 27px)/10);max-width:none;min-height:38px!important;padding:2px!important}.typing-play .typing-game__arena{width:100%;min-width:0}.typing-play__hint{display:none}}
@media(max-width:360px){.typing-play{padding-left:max(5px,env(safe-area-inset-left));padding-right:max(5px,env(safe-area-inset-right));gap:5px}.typing-play .typing-game__stats small{font-size:9px}.typing-play .typing-game__stats b{font-size:15px}.typing-play__actions button{width:31px;height:31px}.typing-play .typing-key{min-height:35px!important;font-size:11px!important}}

.typing-launch-card__options{grid-area:speed;display:flex;align-items:center;justify-content:flex-end;gap:8px}.typing-launch-card__options .typing-game__speed{grid-area:auto}.typing-mode-option{display:block;margin:0}.typing-mode-option select{width:132px;min-height:44px;padding:7px 30px 7px 12px;border:1px solid #ffffff73;border-radius:11px;background:#fff;color:#273764;font:inherit;font-size:13px;font-weight:800}.typing-key.is-target{animation:typing-target-key 1s ease-in-out infinite;background:#fff1a8!important;border-color:#ffe46c!important;color:#5b438d!important;box-shadow:0 0 0 3px #ffe46c55,0 0 22px #ffe46c!important}
.typing-finger-guide{display:grid;grid-template-columns:minmax(220px,1fr) minmax(150px,240px) minmax(220px,1fr);gap:14px;align-items:center;width:min(100%,900px);margin:0 auto;padding:9px 14px;border:1px solid #ffffff1f;border-radius:18px;background:#ffffff0d}.typing-finger-guide[hidden]{display:none}.typing-finger-guide>p{margin:0;color:#ffe77d;font-size:14px;font-weight:900;text-align:center}.typing-hand{position:relative;min-width:0;padding:7px 10px 12px;border-radius:14px;background:#ffffff0b;text-align:center}.typing-hand>strong{display:block;margin-bottom:6px;color:#aebce4;font-size:10px;text-transform:uppercase}.typing-hand__fingers{position:relative;z-index:2;display:flex;justify-content:center;gap:4px}.typing-hand__fingers span{display:grid;width:42px;height:48px;place-items:center;padding:3px;border:1px solid #ffffff24;border-radius:14px 14px 9px 9px;background:#7787bd38;color:#c9d2ed;font-size:9px;transition:transform .2s ease,background .2s ease,box-shadow .2s ease,color .2s ease}.typing-hand__fingers span:nth-child(2){height:57px}.typing-hand__fingers span:nth-child(3){height:62px}.typing-hand__fingers span:nth-child(4){height:54px}.typing-hand__fingers span.is-active{background:linear-gradient(180deg,#ffe97a,#ffb84d);color:#49345f;box-shadow:0 0 18px #ffd75c;transform:translateY(-8px);animation:typing-finger-pulse .85s ease-in-out infinite}.typing-hand__palm{position:absolute;z-index:1;bottom:4px;left:50%;width:150px;height:28px;transform:translateX(-50%);border-radius:50% 50% 12px 12px;background:#7787bd24}
@keyframes typing-target-key{0%,100%{filter:brightness(1);transform:translateY(0)}50%{filter:brightness(1.12);transform:translateY(-2px)}}@keyframes typing-finger-pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
@media(max-width:900px){.typing-launch-card__options{flex-wrap:wrap}.typing-finger-guide{grid-template-columns:1fr 1fr}.typing-finger-guide>p{grid-column:1/-1;grid-row:1}.typing-hand{grid-row:2}}
@media(max-width:760px){.typing-launch-card__options{width:100%;max-width:330px;margin:3px auto 0}.typing-launch-card__options label{flex:1 1 140px;max-width:none!important;margin:0!important}.typing-launch-card__options select{width:100%!important}.typing-finger-guide{display:none!important}.typing-play.is-fingering{grid-template-rows:auto minmax(0,1fr) auto}.typing-mode-option{display:none}}

/* Recognizable animated hand silhouettes for desktop fingering practice. */
.typing-hand{height:116px;padding:4px 10px 8px;background:transparent;overflow:visible}.typing-hand>strong{position:absolute;z-index:5;bottom:9px;left:50%;margin:0;transform:translateX(-50%);color:#71513d;font-size:9px;white-space:nowrap}.typing-hand__fingers{position:absolute;z-index:3;top:5px;left:50%;display:flex;align-items:flex-end;gap:2px;width:104px;height:74px;transform:translateX(-50%)}.typing-hand__fingers span{display:block;flex:1;width:auto;height:54px;padding:0;border:1px solid #f5c6a7;border-bottom:0;border-radius:14px 14px 5px 5px;background:linear-gradient(90deg,#ffd6bd,#ffe5d2 55%,#efb995);box-shadow:inset -3px 0 5px #d99a7950;color:transparent;font-size:0}.typing-hand__fingers span:nth-child(1){height:47px}.typing-hand__fingers span:nth-child(2){height:62px}.typing-hand__fingers span:nth-child(3){height:70px}.typing-hand__fingers span:nth-child(4){height:59px}.typing-hand__palm{position:absolute;z-index:2;bottom:8px;left:50%;display:block;width:112px;height:57px;transform:translateX(-50%);border:1px solid #f5c6a7;border-radius:18px 18px 26px 26px;background:linear-gradient(135deg,#ffe4d1,#f6c3a4);box-shadow:inset -7px -5px 10px #d8946e40,0 7px 18px #050b2833}.typing-hand__palm:before{content:"";position:absolute;bottom:-16px;left:37px;width:38px;height:24px;border:1px solid #efb795;border-top:0;border-radius:0 0 10px 10px;background:#f4c2a4}.typing-hand__palm:after{content:"";position:absolute;top:9px;width:38px;height:25px;border:1px solid #f5c6a7;background:linear-gradient(135deg,#ffe4d1,#efb995)}.typing-hand--left .typing-hand__palm:after{right:-22px;transform:rotate(34deg);border-radius:8px 18px 18px 8px}.typing-hand--right .typing-hand__palm:after{left:-22px;transform:rotate(-34deg);border-radius:18px 8px 8px 18px}.typing-hand--right .typing-hand__fingers{flex-direction:row}.typing-hand__fingers span.is-active{border-color:#ffe571;background:linear-gradient(180deg,#fff39a,#ffb94f);box-shadow:0 0 0 3px #ffe77455,0 0 24px #ffd650,inset -3px 0 5px #d98d4655;color:transparent;transform:translateY(-9px);animation:typing-finger-pulse .85s ease-in-out infinite}
.typing-hand--right .typing-hand__fingers span:nth-child(1){height:59px}.typing-hand--right .typing-hand__fingers span:nth-child(2){height:70px}.typing-hand--right .typing-hand__fingers span:nth-child(3){height:62px}.typing-hand--right .typing-hand__fingers span:nth-child(4){height:47px}
.typing-play .typing-key{position:relative}.typing-key[data-key="F"]:after,.typing-key[data-key="J"]:after{content:"";position:absolute;bottom:5px;left:50%;width:8px;height:2px;transform:translateX(-50%);border-radius:99px;background:#7280aa;box-shadow:0 1px 0 #fff}.typing-keyboard__row--space{padding-top:2px}.typing-play .typing-key--space{flex:0 1 44%;width:44%;max-width:360px;min-height:36px!important}.typing-key--space span{font-size:10px;letter-spacing:.16em}.typing-play .typing-letter--space{width:76px;border-radius:14px;font-size:13px;letter-spacing:.08em}.typing-hand.is-thumb-active .typing-hand__palm:after{border-color:#ffe571;background:linear-gradient(180deg,#fff39a,#ffb94f);box-shadow:0 0 0 3px #ffe77455,0 0 24px #ffd650;animation:typing-finger-pulse .85s ease-in-out infinite}
@media(max-width:760px){.typing-play .typing-key--space{flex-basis:48%;width:48%;max-width:260px}.typing-key[data-key="F"]:after,.typing-key[data-key="J"]:after{bottom:4px}}
/* Soft illustrated hands: rounded fingers, nails and contrasting wrist cuffs. */
.typing-hand{height:146px;filter:drop-shadow(0 5px 6px #080e2430)}
.typing-hand>strong{bottom:0;color:#cbd7f4;font-size:11px;letter-spacing:.08em}
.typing-hand__fingers{top:4px;height:77px;width:106px;gap:3px}
.typing-hand__fingers span{position:relative;border:0;border-radius:15px 15px 0 0;background:linear-gradient(90deg,#f2b793,#ffdbbd 45%,#ffd2af);box-shadow:inset 2px 0 2px #fff2}
.typing-hand__fingers span:before{content:"";position:absolute;top:5px;left:5px;right:5px;height:15px;border-radius:9px 9px 5px 5px;background:linear-gradient(#fff0df,#f9dbc8);border-bottom:1px solid #e5aa8d60}
.typing-hand__fingers span:after{content:"";position:absolute;bottom:19px;left:6px;right:6px;height:4px;border-top:1px solid #cf926a40;border-bottom:1px solid #cf926a25;border-radius:50%}
.typing-hand__palm{bottom:30px;width:112px;height:62px;border:0;border-radius:16px 18px 34px 32px;background:radial-gradient(ellipse at 35% 25%,#ffe2c9,transparent 65%),linear-gradient(110deg,#f5bf9b,#ffd4b1 60%,#efb38f);box-shadow:inset -3px -3px 6px #c9845826}
.typing-hand__palm:before{bottom:-13px;left:32px;width:48px;height:21px;border:0;border-top:3px solid #a1ccf8;border-radius:4px 4px 9px 9px;background:linear-gradient(90deg,#547bbb,#84ace7);box-shadow:0 2px 2px #060e2930}
.typing-hand--right .typing-hand__palm:before{border-top-color:#9ce3d3;background:linear-gradient(90deg,#449e9e,#7ccbb8)}
.typing-hand__palm:after{top:4px;width:29px;height:48px;border:0;background:linear-gradient(100deg,#ffe2c5,#f2bb96);box-shadow:inset -2px -2px 4px #bd784a20}
.typing-hand--left .typing-hand__palm:after{right:-16px;transform:rotate(35deg);border-radius:16px 16px 19px 7px}
.typing-hand--right .typing-hand__palm:after{left:-16px;transform:rotate(-35deg);border-radius:16px 16px 7px 19px}
.typing-hand__fingers span.is-active{transform:translateY(-4px);background:linear-gradient(90deg,#ffc766,#fff0a0);box-shadow:0 0 13px #ffdf6a90}
.typing-hand__fingers span.is-active:before{background:#fff9d8}
.typing-play.is-fingering{grid-template-rows:auto minmax(0,1fr) auto auto auto}
.typing-finger-guide>p{display:flex;justify-content:center;align-items:center;gap:12px;font-size:20px;letter-spacing:.08em}
.typing-finger-guide>p>span{color:#cbd7f4;font-weight:500}
.typing-finger-guide>p>span.is-left{color:#84ace7;font-weight:800}.typing-finger-guide>p>span.is-right{color:#7ccbb8;font-weight:800}.typing-finger-guide>p>span.is-both{font-weight:800;background:linear-gradient(90deg,#84ace7 15%,#7ccbb8 85%);background-clip:text;-webkit-background-clip:text;color:transparent}
.typing-finger-guide>p>strong{color:#ffe477;font-weight:800}

/* Compact the game controls on small desktop resolutions and give the arena
   the saved space without changing the familiar vertical layout. */
@media (min-width:761px) and (max-width:1100px),
       (min-width:761px) and (max-height:820px) {
    .typing-play {
        gap:7px;
        padding-top:10px;
        padding-bottom:10px;
    }
    .typing-play .typing-keyboard {
        width:min(100%,620px);
        gap:4px;
        padding:5px;
    }
    .typing-play .typing-keyboard__row {
        gap:4px;
    }
    .typing-play .typing-key {
        max-width:48px;
        min-height:32px!important;
        border-radius:8px!important;
        font-size:13px!important;
    }
    .typing-play .typing-key--space {
        max-width:260px;
        min-height:28px!important;
    }
    .typing-play .typing-letter {
        width:44px;
        height:44px;
        border-radius:14px;
        font-size:21px;
    }
    .typing-play .typing-letter--space {
        width:68px;
        font-size:12px;
    }
    .typing-play.is-fingering .typing-finger-guide {
        box-sizing:border-box;
        width:min(100%,760px);
        height:100px;
        gap:6px;
        padding:4px 10px;
        border-radius:15px;
        overflow:hidden;
    }
    .typing-play.is-fingering .typing-hand {
        height:146px;
        min-height:0;
        transform:translateY(-14px) scale(.70);
        transform-origin:center;
    }
    .typing-play.is-fingering .typing-finger-guide>p {
        gap:8px;
        font-size:16px;
    }
}

@media (min-width:761px) and (max-height:650px) {
    .typing-play {
        gap:5px;
        padding-top:6px;
        padding-bottom:6px;
    }
    .typing-play .typing-key {
        min-height:28px!important;
    }
    .typing-play .typing-key--space {
        min-height:25px!important;
    }
    .typing-play .typing-letter {
        width:40px;
        height:40px;
        font-size:19px;
    }
    .typing-play.is-fingering .typing-finger-guide {
        height:88px;
        padding-block:2px;
    }
    .typing-play.is-fingering .typing-hand {
        height:146px;
        transform:translateY(-12px) scale(.58);
    }
    .typing-play.is-fingering .typing-finger-guide>p {
        font-size:14px;
    }
}
@media(prefers-reduced-motion:reduce){.typing-launch-card__mascot,.typing-game__sky i,.typing-hand__fingers span.is-active,.typing-hand.is-thumb-active .typing-hand__palm:after{animation:none}}