:root{--color-bg:#f5f5f0;--color-bg-alt:#eeeee8;--color-text:#1a1a1a;--color-accent:#000;--color-muted:#6b6b6b;--color-error:#8b0000;--color-border:#d4d4d0;--color-suggestion-bg:#e8e8e4;--color-overlay:#0006;--font-mono:"IBM Plex Mono", "Courier New", monospace;--font-typewriter:"Special Elite", "Courier New", serif;--font-size-counter:clamp(3rem, 8vw, 6rem);--font-size-input:1.25rem;--font-size-body:1rem;--font-size-small:.85rem;--font-size-xs:.75rem;--font-weight-light:300;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height:1.5;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:2rem;--space-xl:4rem;--max-width:640px;--input-height:3.5rem;--border-radius:2px;--transition-fast:.1s ease-out;--transition-normal:.2s ease-out;--transition-slow:.4s ease-out;--shadow-subtle:0 1px 2px #0000000d;--shadow-input:inset 0 1px 3px #0000000f}@keyframes blink{0%,49%{opacity:1}50%,to{opacity:0}}@keyframes counterPulse{0%{transform:scale(1)}40%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes milestonePulse{0%{transform:scale(1)}30%{transform:scale(1.3)}to{transform:scale(1)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideDown{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}@keyframes milestoneFlash{0%{opacity:0}20%{opacity:.08}to{opacity:0}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-mono);font-size:var(--font-size-body);font-weight:var(--font-weight-regular);line-height:var(--line-height);color:var(--color-text);background-color:var(--color-bg);min-height:100dvh;overflow-x:hidden}#root{flex-direction:column;min-height:100dvh;display:flex}input,button{font-family:inherit;font-size:inherit;color:inherit;background:0 0;border:none;outline:none}button{cursor:pointer;-webkit-tap-highlight-color:transparent}input::placeholder{color:var(--color-muted);opacity:.6}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}::selection{background-color:var(--color-accent);color:var(--color-bg)}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:2px}body{overscroll-behavior:none}.word-counter{text-align:center;-webkit-user-select:none;user-select:none}.word-counter-number{font-size:var(--font-size-counter);font-weight:var(--font-weight-bold);letter-spacing:-.03em;color:var(--color-text);transition:transform var(--transition-normal);line-height:1;display:inline-block}.word-counter-number.pulse{animation:.3s ease-out counterPulse}.word-counter-label{font-size:var(--font-size-xs);color:var(--color-muted);margin-top:var(--space-xs);letter-spacing:.1em;text-transform:uppercase}.milestone-section{text-align:center;width:100%}.progress-bar-container{background-color:var(--color-border);width:100%;height:2px;margin-bottom:var(--space-sm);position:relative}.progress-bar-fill{background-color:var(--color-accent);height:100%;transition:width var(--transition-slow)}.milestone-label{font-size:var(--font-size-xs);color:var(--color-muted);letter-spacing:.05em}.milestone-label span{color:var(--color-text);font-weight:var(--font-weight-medium)}.milestone-celebration{font-size:var(--font-size-small);color:var(--color-text);font-weight:var(--font-weight-semibold);margin-top:var(--space-sm);letter-spacing:.02em;animation:.4s ease-out fadeUp}.milestone-celebration-sub{font-size:var(--font-size-xs);color:var(--color-muted);font-weight:var(--font-weight-regular);margin-top:var(--space-xs);font-style:italic}.milestone-flash{pointer-events:none;z-index:100;background:#fff;animation:.6s ease-out forwards milestoneFlash;position:fixed;inset:0}.autocomplete{width:100%;min-height:2rem}.autocomplete-list{gap:var(--space-xs);flex-wrap:wrap;list-style:none;animation:.15s ease-out fadeIn;display:flex}.autocomplete-label{font-size:var(--font-size-xs);color:var(--color-muted);margin-bottom:var(--space-xs);letter-spacing:.05em}.autocomplete-item{font-size:var(--font-size-xs);color:var(--color-muted);padding:2px var(--space-sm);background:var(--color-suggestion-bg);border-radius:var(--border-radius);white-space:nowrap;transition:color var(--transition-fast)}.autocomplete-item:hover{color:var(--color-text)}.recent-words{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 10% 90%,#0000);mask-image:linear-gradient(90deg,#0000,#000 10% 90%,#0000)}.recent-words-inner{gap:var(--space-md);scrollbar-width:none;padding:var(--space-sm) var(--space-md);flex-wrap:wrap;justify-content:center;display:flex;overflow-x:auto}.recent-words-inner::-webkit-scrollbar{display:none}.recent-word{font-size:var(--font-size-xs);color:var(--color-muted);white-space:nowrap;opacity:.6;flex-shrink:0}.recent-word:first-child{opacity:1;color:var(--color-text);animation:.2s ease-out fadeIn}.recent-word:nth-child(2){opacity:.8}.recent-word:nth-child(3){opacity:.6}.recent-words-separator{color:var(--color-border);-webkit-user-select:none;user-select:none}.auth-wrapper{align-items:center;gap:var(--space-xs);display:flex;position:relative}.auth-buttons-row{gap:var(--space-xs);display:flex}.auth-button{font-size:var(--font-size-xs);color:var(--color-muted);padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--border-radius);transition:all var(--transition-fast);letter-spacing:.03em;cursor:pointer;background:0 0}.auth-button:hover{color:var(--color-text);border-color:var(--color-text)}.auth-button:disabled{opacity:.5;cursor:default}.auth-info-trigger{font-size:var(--font-size-xs);color:var(--color-muted);cursor:pointer;border:1px solid var(--color-border);width:18px;height:18px;transition:all var(--transition-fast);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.auth-info-trigger:hover{color:var(--color-text);border-color:var(--color-text)}.auth-tooltip{bottom:calc(100% + var(--space-sm));font-size:var(--font-size-xs);color:var(--color-muted);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius);padding:var(--space-sm) var(--space-md);text-align:center;z-index:10;max-width:260px;line-height:1.5;position:absolute;left:50%;transform:translate(-50%)}.auth-email-form{gap:var(--space-xs);flex-direction:column;display:flex}.auth-email-input{font-size:var(--font-size-xs);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--border-radius);padding:var(--space-sm) var(--space-md);letter-spacing:.03em;background:0 0;outline:none;font-family:inherit}.auth-email-input:focus{border-color:var(--color-text)}.auth-email-input::placeholder{color:var(--color-muted)}.auth-email-error{font-size:var(--font-size-xs);color:var(--color-muted);opacity:.8}.auth-email-actions{gap:var(--space-xs);align-items:center;display:flex}.auth-back{font-size:var(--font-size-xs);color:var(--color-muted);cursor:pointer;padding:var(--space-sm);opacity:.6;transition:opacity var(--transition-fast);background:0 0;border:none}.auth-back:hover{opacity:1}.auth-user{font-size:var(--font-size-xs);color:var(--color-muted);align-items:center;gap:var(--space-sm);display:flex}.auth-user-name{text-overflow:ellipsis;white-space:nowrap;max-width:120px;overflow:hidden}.auth-signout{font-size:var(--font-size-xs);color:var(--color-muted);opacity:.6;transition:opacity var(--transition-fast);cursor:pointer;background:0 0;border:none;padding:0}.auth-signout:hover{opacity:1}.layout{min-height:100dvh;max-width:var(--max-width);padding:0 var(--space-md);flex-direction:column;width:100%;margin:0 auto;display:flex}.header{padding:var(--space-md) 0;flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.header-title{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);letter-spacing:-.02em;color:var(--color-text);text-transform:lowercase}.header-actions{align-items:center;gap:var(--space-sm);display:flex}.header-btn{font-size:var(--font-size-small);color:var(--color-muted);padding:var(--space-xs) var(--space-sm);transition:color var(--transition-fast)}.header-btn:hover{color:var(--color-text)}.main-content{padding:var(--space-lg) 0;justify-content:center;align-items:center;gap:var(--space-lg);flex-direction:column;flex:1;display:flex}.footer{padding:var(--space-md) 0;flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.footer-tagline{font-size:var(--font-size-xs);color:var(--color-muted);letter-spacing:.05em;font-style:italic}.sound-toggle{font-size:var(--font-size-xs);color:var(--color-muted);padding:var(--space-xs) var(--space-sm);transition:color var(--transition-fast);align-items:center;gap:var(--space-xs);display:flex}.sound-toggle:hover{color:var(--color-text)}.sound-toggle-icon{font-style:normal}.word-input-area{width:100%;position:relative}.word-input-form{width:100%}.word-input-wrapper{width:100%;position:relative}.word-input{width:100%;height:var(--input-height);padding:var(--space-sm) var(--space-md);font-family:var(--font-typewriter);font-size:var(--font-size-input);font-weight:var(--font-weight-regular);background-color:var(--color-bg);border-bottom:2px solid var(--color-accent);caret-color:var(--color-accent);letter-spacing:.05em;transition:border-color var(--transition-fast)}.word-input::placeholder{letter-spacing:.04em;font-style:italic}.word-input:focus{outline:none}.word-input.error{border-color:var(--color-error);animation:.4s ease-out shake}.word-input.accepted{border-color:var(--color-accent)}.word-input.validating{border-color:var(--color-muted)}.validation-feedback{font-size:var(--font-size-xs);margin-top:var(--space-xs);height:1.2em;animation:.15s ease-out fadeIn}.validation-feedback.error{color:var(--color-error)}.validation-feedback.validating{color:var(--color-muted)}.validation-feedback.hint{color:var(--color-muted);font-style:italic}@media (width<=767px){.word-input{height:3rem;font-size:1rem}}