.harf,.harf-demo,.harf-key,.harf-race,.harf-ring,.harf-totals{--harf-ok:#3f9a5c;--harf-bad:#c4454f;--harf-pass:#d4a338;--harf-accent:#f2c46d}.harf{display:grid;gap:12px}.harf-score{display:flex;justify-content:flex-end;gap:6px;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}.harf-score span{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 11px;border-radius:999px;border:1px solid hsl(var(--border));background:hsl(var(--card))}.harf-score i{width:9px;height:9px;border-radius:999px;background:var(--dot)}.harf-ring{position:relative;width:min(100%,440px,58dvh);aspect-ratio:1;margin:0 auto;container-type:inline-size}.harf-ring__letter{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:9.4cqw;height:9.4cqw;margin:-4.7cqw 0 0 -4.7cqw;border-radius:999px;border:1px solid hsl(var(--border));background:hsl(var(--card));color:hsl(var(--foreground));font-size:4.3cqw;font-weight:800;line-height:1;transform:rotate(var(--a)) translateY(-45cqw) rotate(calc(var(--a) * -1));transition:background .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease}.harf-ring__letter[data-mark=correct]{background:var(--harf-ok);border-color:transparent;color:#fff}.harf-ring__letter[data-mark=wrong]{background:var(--harf-bad);border-color:transparent;color:#fff}.harf-ring__letter[data-mark=pass]{background:var(--harf-pass);border-color:transparent;color:#2b1d05}.harf-ring__letter[data-current]{border-color:var(--harf-accent);box-shadow:0 0 0 2px var(--harf-accent),0 0 18px -2px var(--harf-accent);transform:rotate(var(--a)) translateY(-45cqw) rotate(calc(var(--a) * -1)) scale(1.18);z-index:1}.harf-ring__center{position:absolute;inset:13cqw;display:grid;align-content:center;justify-items:center;gap:1.6cqw;padding:4cqw;border-radius:999px;background:radial-gradient(circle at 50% 35%,hsl(var(--card)),hsl(var(--background)));border:1px solid hsl(var(--border));text-align:center}.harf-clock{font-size:clamp(14px,4.4cqw,19px);font-weight:800;font-variant-numeric:tabular-nums;color:hsl(var(--muted-foreground))}.harf-clock[data-low]{color:var(--harf-bad)}.harf-letter{font-size:clamp(13px,4cqw,16px);font-weight:700;color:hsl(var(--muted-foreground))}.harf-letter b{display:inline-grid;place-items:center;min-width:1.9em;height:1.9em;margin-right:4px;border-radius:999px;background:var(--harf-accent);color:#2b1d05;font-size:1.25em}.harf-clue{font-size:clamp(14px,4.5cqw,19px);font-weight:700;line-height:1.32;color:hsl(var(--foreground));overflow-wrap:anywhere}.harf-countdown{font-size:22cqw;font-weight:900;line-height:1;color:var(--harf-accent);animation:harf-pop .9s ease-out infinite}.harf-flash{min-height:22px;text-align:center;font-size:14px;font-weight:800}.harf-flash[data-kind=correct]{color:var(--harf-ok)}.harf-flash[data-kind=wrong]{color:var(--harf-bad)}.harf-flash[data-kind=pass]{color:var(--harf-pass)}.harf-form{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;width:min(100%,440px);margin:0 auto}.harf-form input{min-width:0;min-height:50px;padding:0 14px;border-radius:14px;border:1px solid hsl(var(--border));background:hsl(var(--card));color:hsl(var(--foreground));font-size:18px;font-weight:800;letter-spacing:.02em;text-transform:uppercase}.harf-form input::-moz-placeholder{text-transform:none;font-weight:600;letter-spacing:0}.harf-form input::placeholder{text-transform:none;font-weight:600;letter-spacing:0}.harf-form input:focus-visible{outline:2px solid var(--harf-accent);outline-offset:1px}.harf-form button{min-height:50px;padding:0 15px;border-radius:14px;font-size:15px;font-weight:800}.harf-send{background:#d9541e;color:#fff}.harf-pass{background:color-mix(in srgb,var(--harf-pass) 22%,hsl(var(--card)));border:1px solid var(--harf-pass);color:hsl(var(--foreground))}.harf-form button:disabled{opacity:.5}.harf-foot{display:flex;justify-content:center;gap:8px;font-size:12px}.harf-foot button{display:inline-flex;align-items:center;gap:5px;min-height:40px;padding:0 12px;border-radius:10px;font-weight:700;color:hsl(var(--muted-foreground))}.harf-foot button[data-confirm]{background:var(--harf-bad);color:#fff}.harf-race{display:grid;gap:6px}.harf-race li{display:grid;grid-template-columns:minmax(64px,7.5rem) minmax(0,1fr) auto;align-items:center;gap:8px;min-height:30px;font-size:12px;font-weight:700}.harf-race__nick{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.harf-race__dots{display:grid;grid-template-columns:repeat(27,minmax(0,1fr));gap:2px}.harf-race__dots i{aspect-ratio:1;max-width:10px;border-radius:999px;background:hsl(var(--muted-foreground)/.25)}.harf-race__dots i[data-mark=correct]{background:var(--harf-ok)}.harf-race__dots i[data-mark=wrong]{background:var(--harf-bad)}.harf-race__dots i[data-mark=pass]{background:var(--harf-pass)}.harf-race__dots i[data-current]{box-shadow:0 0 0 1.5px var(--harf-accent)}.harf-race__count{font-variant-numeric:tabular-nums;color:hsl(var(--muted-foreground))}.harf-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center}.harf-totals div{padding:12px 6px;border-radius:16px;border:1px solid hsl(var(--border));background:hsl(var(--card))}.harf-totals b{display:block;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}.harf-totals small{font-size:12px;font-weight:700;color:hsl(var(--muted-foreground))}.harf-totals [data-kind=correct] b{color:var(--harf-ok)}.harf-totals [data-kind=wrong] b{color:var(--harf-bad)}.harf-totals [data-kind=pass] b{color:var(--harf-pass)}.harf-key{display:grid;gap:4px}.harf-key li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;padding:8px 10px;border-radius:12px;border:1px solid hsl(var(--border));background:hsl(var(--card))}.harf-key__letter{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;font-weight:800;background:hsl(var(--muted-foreground)/.2)}.harf-key__letter[data-mark=correct]{background:var(--harf-ok);color:#fff}.harf-key__letter[data-mark=wrong]{background:var(--harf-bad);color:#fff}.harf-key__letter[data-mark=pass]{background:var(--harf-pass);color:#2b1d05}.harf-key__clue{font-size:13px;line-height:1.35;color:hsl(var(--muted-foreground))}.harf-key__answer{font-size:15px;font-weight:800}.harf-key__given{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:2px;font-size:12px;font-weight:700}.harf-key__given span[data-mark=correct]{color:var(--harf-ok)}.harf-key__given span[data-mark=wrong]{color:var(--harf-bad)}.harf-key__given span[data-mark=pass]{color:hsl(var(--muted-foreground))}@keyframes harf-pop{0%{transform:scale(.7);opacity:.2}30%{transform:scale(1.05);opacity:1}to{transform:scale(1);opacity:1}}@media (prefers-reduced-motion:reduce){.harf-ring__letter{transition:none}.harf-countdown{animation:none}}.harf-top{display:flex;align-items:center;gap:12px;width:min(100%,440px);margin:0 auto}.harf-timer{flex:1;display:grid;gap:5px;min-width:0}.harf-timer__digits{font-size:34px;font-weight:900;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:hsl(var(--foreground));transition:color .3s ease}.harf-timer__bar{position:relative;height:7px;overflow:hidden;border-radius:999px;background:hsl(var(--muted-foreground)/.2)}.harf-timer__bar i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--harf-accent);transition:width .25s linear,background .3s ease}.harf-timer[data-phase=ready] .harf-timer__digits{color:var(--harf-accent)}.harf-timer[data-phase=half] .harf-timer__digits{color:#f59e0b}.harf-timer[data-phase=half] .harf-timer__bar i{background:#f59e0b}.harf-timer[data-phase=low] .harf-timer__digits{color:var(--harf-bad);animation:harf-beat 1s ease-in-out infinite}.harf-timer[data-phase=low] .harf-timer__bar i{background:var(--harf-bad)}.harf-timer[data-pulse] .harf-timer__digits{animation:harf-half 1.6s ease-out}@keyframes harf-beat{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes harf-half{0%{transform:scale(1);text-shadow:none}20%{transform:scale(1.18);text-shadow:0 0 18px #f59e0b}to{transform:scale(1);text-shadow:none}}.harf-done{font-size:clamp(14px,4.4cqw,19px);font-weight:800;color:hsl(var(--muted-foreground))}.harf[data-compact]{gap:8px}.harf[data-compact] .harf-timer__digits{font-size:28px}.harf[data-compact] .harf-flash{min-height:18px;font-size:13px}.harf-strip{display:flex;gap:4px;width:min(100%,440px);margin:0 auto;padding:3px 50%;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}.harf-strip::-webkit-scrollbar{display:none}.harf-strip span{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:999px;border:1px solid hsl(var(--border));background:hsl(var(--card));font-size:12px;font-weight:800}.harf-strip span[data-mark=correct]{background:var(--harf-ok);border-color:transparent;color:#fff}.harf-strip span[data-mark=wrong]{background:var(--harf-bad);border-color:transparent;color:#fff}.harf-strip span[data-mark=pass]{background:var(--harf-pass);border-color:transparent;color:#2b1d05}.harf-strip span[data-current]{border-color:var(--harf-accent);box-shadow:0 0 0 2px var(--harf-accent);transform:scale(1.12)}.harf-card{display:grid;justify-items:center;gap:6px;width:min(100%,440px);margin:0 auto;padding:14px 16px;border-radius:18px;border:1px solid hsl(var(--border));background:hsl(var(--card));text-align:center}.harf-card .harf-clue{font-size:17px}.harf-card .harf-letter{font-size:14px}.harf-card .harf-countdown{font-size:56px}@media (prefers-reduced-motion:reduce){.harf-timer[data-phase=low] .harf-timer__digits,.harf-timer[data-pulse] .harf-timer__digits{animation:none}}.harf-demo{display:grid;gap:7px}.harf-demo__timer{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px}.harf-demo__timer b{font-size:17px;font-weight:900;font-variant-numeric:tabular-nums;transition:color .3s ease}.harf-demo__timer span{position:relative;height:5px;overflow:hidden;border-radius:999px;background:hsl(var(--muted-foreground)/.2)}.harf-demo__timer i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--harf-accent);transition:width .55s ease,background .3s ease}.harf-demo__timer[data-phase=half] b{color:#f59e0b}.harf-demo__timer[data-phase=half] i{background:#f59e0b}.harf-demo__timer[data-phase=low] b{color:var(--harf-bad)}.harf-demo__timer[data-phase=low] i{background:var(--harf-bad)}.harf-demo .harf-ring__letter{transition:background .25s ease,color .25s ease,box-shadow .25s ease}.harf-demo .harf-clue{font-size:11px;line-height:1.25}.harf-demo .harf-letter{font-size:10px}.harf-demo .harf-done{font-size:11px}.harf-demo__flash{min-height:15px;text-align:center;font-size:11px;font-weight:800}.harf-demo__flash[data-kind=correct]{color:var(--harf-ok)}.harf-demo__flash[data-kind=wrong]{color:var(--harf-bad)}.harf-demo__flash[data-kind=pass]{color:var(--harf-pass)}.harf-demo__form{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:5px}.harf-demo__input{display:flex;align-items:center;min-height:30px;padding:0 9px;border-radius:9px;border:1px solid var(--harf-accent);background:hsl(var(--card));font-size:13px;font-weight:800;text-transform:uppercase}.harf-demo__input i{width:1.5px;height:15px;margin-left:1px;background:hsl(var(--foreground));animation:harf-caret 1s steps(1) infinite}.harf-demo__btn{display:grid;place-items:center;min-height:30px;padding:0 9px;border-radius:9px;font-size:11px;font-weight:800;transition:transform .15s ease,filter .15s ease}.harf-demo__btn[data-kind=send]{background:#d9541e;color:#fff}.harf-demo__btn[data-kind=pass]{background:color-mix(in srgb,var(--harf-pass) 22%,hsl(var(--card)));border:1px solid var(--harf-pass)}.harf-demo__btn[data-pressed]{transform:scale(.88);filter:brightness(1.25);box-shadow:0 0 0 3px hsl(var(--foreground)/.25)}@keyframes harf-caret{50%{opacity:0}}@media (prefers-reduced-motion:reduce){.harf-demo__input i{animation:none}}