:root{--bg: #101820;--bg-soft: #1a2430;--bg-card: #202e3c;--text: #e6edf3;--text-dim: #8fa0b0;--accent: #5ead8e;--accent-dim: #2c4a3d;--warn: #d9a05b;--danger-soft: #b97a6a;--radius: 14px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{margin:0;min-height:100vh;color:var(--text);font-family:-apple-system,PingFang SC,Helvetica Neue,sans-serif;font-size:17px;line-height:1.6}html,body{background:var(--bg)}body{isolation:isolate}body:before{content:"";position:fixed;top:-20%;right:-20%;bottom:-20%;left:-20%;z-index:-1;pointer-events:none;background:radial-gradient(55% 48% at 20% 12%,rgba(94,173,142,.42),transparent 72%),radial-gradient(58% 52% at 84% 10%,rgba(126,168,216,.34),transparent 72%),radial-gradient(60% 50% at 50% 55%,rgba(94,173,142,.12),transparent 75%),radial-gradient(62% 52% at 62% 94%,rgba(217,160,91,.2),transparent 72%);animation:aurora-drift 26s ease-in-out infinite alternate}@keyframes aurora-drift{0%{transform:translate3d(-2.5%,-1.5%,0) scale(1)}to{transform:translate3d(2.5%,2%,0) scale(1.06)}}@media (prefers-reduced-motion: reduce){body:before{animation:none}}.screen{max-width:560px;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) 20px max(32px,env(safe-area-inset-bottom));min-height:100vh;display:flex;flex-direction:column;gap:16px}.card{background:var(--bg-card);border-radius:var(--radius);padding:20px}.word{font-size:40px;font-weight:600;letter-spacing:.02em}.dim{color:var(--text-dim);font-size:14px}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:var(--radius);padding:14px 20px;font-size:17px;background:var(--bg-soft);color:var(--text);width:100%}.btn:active,.btn.primary{background:var(--accent-dim)}.btn.primary:active{background:var(--accent)}.ok-flash{color:var(--accent)}.miss{color:var(--danger-soft)}.gap{color:var(--warn);text-decoration:underline}.extra{color:var(--text-dim);text-decoration:line-through}input,input::placeholder{font-size:20px}input{width:100%;background:var(--bg-soft);color:var(--text);border:none;border-radius:var(--radius);padding:14px}.app-title{padding-top:8vh}.app-title h1{margin:0;text-align:center;font-family:Chalkboard SE,Marker Felt,Comic Sans MS,cursive;font-size:clamp(38px,11vw,56px);letter-spacing:.01em}.app-title .tw{display:inline-block;margin:0 .06em;animation:title-bob 5s ease-in-out infinite alternate}.app-title .tw-0{background:linear-gradient(135deg,#5ead8e,#8fd0b2);-webkit-background-clip:text;background-clip:text;color:transparent;transform:rotate(-3deg);text-shadow:none}.app-title .tw-1{color:var(--warn);transform:rotate(2deg);animation-delay:.5s}.app-title .tw-2{color:#7ea8d8;transform:rotate(-2deg);animation-delay:1s}.app-title .tw-3{background:linear-gradient(135deg,#d9a05b,#e8c68f);-webkit-background-clip:text;background-clip:text;color:transparent;transform:rotate(3deg);animation-delay:1.5s}@keyframes title-bob{0%{translate:0 0}to{translate:0 -6px}}@media (prefers-reduced-motion: reduce){.app-title .tw{animation:none}}.card input{margin-top:10px}.card>.btn:not(:first-child){margin-top:12px}.letters{font-size:30px;font-family:ui-monospace,SF Mono,Menlo,monospace;letter-spacing:.12em;word-break:break-all}.letters-row{display:flex;flex-direction:column;gap:6px}.letters-row div{font-size:22px;font-family:ui-monospace,SF Mono,Menlo,monospace}
