@import "https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap";
:root{--bg-color:#faf9fe;--bg-card:#fff;--bg-card-hover:#fff;--border-color:#2c2c54;--border-focus:#6c5ce7;--text-main:#2c2c54;--text-muted:#4b4b75;--text-highlight:#ff7675;--color-primary:#6c5ce7;--color-primary-hover:#5b4cc4;--color-secondary:#00cec9;--color-accent:#ff7675;--gradient-peach-lavender:linear-gradient(135deg, #ffbe76, #e056fd);--gradient-mint-sky:linear-gradient(135deg, #55efc4, #81ecec);--gradient-butter-coral:linear-gradient(135deg, #ffeaa7, #ff7675);--gradient-text:linear-gradient(135deg, #6c5ce7, #ff7675);--char-correct:#10ac84;--char-mistake:#ee5253;--char-mistake-bg:#ee525326;--char-untyped:#57606f;--char-current-bg:#6c5ce726;--char-cursor:#6c5ce7;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-heading:"Fredoka", cursive, sans-serif;--font-mono:"JetBrains Mono", "Courier New", Courier, monospace;--shadow-sm:3px 3px 0px var(--border-color);--shadow-md:6px 6px 0px var(--border-color);--shadow-lg:10px 10px 0px var(--border-color);--radius-sm:8px;--radius-md:20px;--radius-lg:24px}[data-theme=dark]{--bg-color:#15132d;--bg-card:#1d1b3c;--bg-card-hover:#222045;--border-color:#f5f6fa;--border-focus:#00cec9;--text-main:#f5f6fa;--text-muted:#a4b0be;--text-highlight:#ffbe76;--color-primary:#e056fd;--color-primary-hover:#be2edd;--color-secondary:#00cec9;--color-accent:#ff7675;--gradient-text:linear-gradient(135deg, #e056fd, #ffbe76);--char-correct:#2ecc71;--char-mistake:#ff7675;--char-mistake-bg:#ff767533;--char-untyped:#8b92b5;--char-current-bg:#e056fd38;--char-cursor:#00cec9;--shadow-sm:3px 3px 0px var(--border-color);--shadow-md:6px 6px 0px var(--border-color);--shadow-lg:10px 10px 0px var(--border-color)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);font-family:var(--font-sans);background-image:radial-gradient(circle at 8% 18%,#ffbe7629 0%,#0000 40%),radial-gradient(circle at 92% 78%,#e056fd26 0%,#0000 45%),radial-gradient(circle at 45% 45%,#00cec914 0%,#0000 35%);flex-direction:column;min-height:100vh;display:flex;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);letter-spacing:-.5px;font-weight:600;line-height:1.2}a{color:inherit;text-decoration:none}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-color)}::-webkit-scrollbar-thumb{background:var(--color-primary);border-radius:var(--radius-sm);border:3px solid var(--bg-color)}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.container{width:100%;max-width:1100px;margin:0 auto;padding:0 2rem}.glass-card{background:var(--bg-card);border:3px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-md);transition:transform .2s cubic-bezier(.175,.885,.32,1.275),box-shadow .2s}.glass-card:hover{background:var(--bg-card-hover);box-shadow:var(--shadow-lg);transform:translate(-3px,-3px)}.btn{border-radius:var(--radius-md);border:3px solid var(--border-color);font-family:var(--font-heading);cursor:pointer;background:var(--bg-card);color:var(--text-main);box-shadow:var(--shadow-sm);justify-content:center;align-items:center;gap:.5rem;padding:.8rem 1.6rem;font-size:1rem;font-weight:600;transition:all .15s cubic-bezier(.175,.885,.32,1.275);display:inline-flex}.btn:hover{box-shadow:var(--shadow-md);transform:translate(-2px,-2px)}.btn:active{box-shadow:1px 1px 0px var(--border-color);transform:translate(1px,1px)}.btn-primary{background:var(--color-primary);color:#fff}.btn-secondary{background:0 0}.typing-box-container{background:var(--bg-card);border:3px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-md);cursor:text;min-height:150px;padding:1.75rem;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative}.typing-box-container:focus-within{border-color:var(--color-primary);box-shadow:7px 7px 0px var(--color-primary);transform:translate(-3px,-3px)}header{border-bottom:3px solid var(--border-color);background:var(--bg-color);z-index:100;padding:1.25rem 0;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;display:flex}.logo{font-family:var(--font-heading);background:var(--gradient-peach-lavender);-webkit-text-fill-color:transparent;-webkit-background-clip:text;align-items:center;gap:.5rem;font-size:1.8rem;font-weight:700;display:flex}nav{align-items:center;gap:1.8rem;display:flex}nav a{font-family:var(--font-heading);color:var(--text-muted);border-radius:var(--radius-sm);border:2px solid #0000;padding:.4rem .8rem;font-size:1.05rem;font-weight:600;transition:all .2s}nav a:hover{color:var(--text-main);border-color:var(--border-color);background:#6c5ce714;transform:translateY(-2px)}nav a.active{color:#fff;background:var(--color-primary);border-color:var(--border-color);box-shadow:2px 2px 0px var(--border-color)}footer{border-top:3px solid var(--border-color);color:#2c2c54;background:#ffeaa7;margin-top:5rem;padding:4rem 0}[data-theme=dark] footer{color:#fff;background:#1b163e}.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem;display:grid}@media (max-width:768px){.footer-grid{grid-template-columns:1fr;gap:2rem}}.footer-col h4{color:#2c2c54;margin-bottom:1.25rem;font-size:1.25rem}[data-theme=dark] .footer-col h4{color:#fff}.footer-col ul{list-style:none}.footer-col ul li{margin-bottom:.75rem}.footer-col ul li a{font-weight:500;transition:all .2s;display:inline-block}.footer-col ul li a:hover{color:var(--color-primary);text-decoration:underline;transform:translate(4px)}.ad-slot{border:3px solid var(--border-color);border-radius:var(--radius-md);text-align:center;color:var(--text-muted);min-height:100px;box-shadow:var(--shadow-sm);background:#fff;justify-content:center;align-items:center;margin:2.5rem 0;padding:1.5rem;font-size:.85rem;display:flex}.ad-label{text-transform:uppercase;letter-spacing:1.5px;color:var(--color-primary);margin-bottom:.4rem;font-size:.75rem;font-weight:700}.floating-icon{pointer-events:none;opacity:.15;-webkit-user-select:none;user-select:none;font-size:1.5rem;animation:5s ease-in-out infinite float;position:absolute}.skip-link{background:var(--color-primary);color:#fff;z-index:1000;border:3px solid var(--border-color);border-radius:0 0 var(--radius-sm) var(--radius-sm);font-family:var(--font-heading);padding:1rem;position:absolute;top:-100px;left:0}.skip-link:focus{top:0}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.playful-select{appearance:none;cursor:pointer;font-family:var(--font-heading);color:var(--text-main);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c2c54' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");background-position:right .8rem center;background-repeat:no-repeat;background-size:1.1rem;background-color:var(--bg-card);border:3px solid var(--border-color);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);font-size:.95rem;font-weight:600;transition:all .15s;padding:.5rem 2.2rem .5rem 1rem!important}[data-theme=dark] .playful-select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f5f6fa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>")}.playful-select:hover{box-shadow:var(--shadow-md);transform:translate(-1px,-1px)}.playful-select:active,.playful-select:focus{border-color:var(--color-primary);outline:none}