:root{--sheet:#dce3ee;--dot:#1b1b3a1f;--ink:#1b1b3a;--muted:#62668a;--white:#fff;--pink:#ff5c8a;--yellow:#ffe14d;--blue:#4d7cfe;--mint:#7be0a6;--orange:#ffb86b;--lilac:#c9b6ff;--hot:#b8f0cf;--gold:#f5c542;--silver:#c9d1de;--shadow:0 3px 6px #1b1b3a40;--font:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light}*{box-sizing:border-box}html,body{min-height:100%}body{background:radial-gradient(circle,var(--dot) 1px,transparent 1.5px) 0 0/16px 16px,var(--sheet);color:var(--ink);font-family:var(--font);-webkit-tap-highlight-color:transparent;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:max(16px,env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-bottom,0px));margin:0;font-size:16px;line-height:1.4}button,input{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--blue);outline-offset:3px}a{color:var(--ink)}.sticker{border:4px solid var(--white);box-shadow:var(--shadow)}.app{gap:18px;max-width:480px;margin:0 auto;display:grid}.top{justify-content:space-between;align-items:center;gap:12px;display:flex}.brand{flex-wrap:wrap;align-items:center;gap:10px;min-width:0;display:flex}.logo{background:var(--pink);color:var(--white);border-radius:16px;padding:8px 14px;font-size:1.6rem;font-weight:800;line-height:1;text-decoration:none;display:inline-block;transform:rotate(-2deg)}.tag{background:var(--yellow);white-space:nowrap;border-radius:999px;padding:4px 12px;font-size:.9rem;font-weight:800}.tools{gap:8px;display:flex}.icon-btn{background:var(--white);cursor:pointer;border-radius:50%;place-items:center;width:44px;height:44px;padding:0;font-size:1.2rem;font-weight:800;display:grid}.icon-btn svg{width:20px;height:20px}.icon-btn:hover{background:var(--yellow)}.btn{background:var(--ink);height:52px;color:var(--white);cursor:pointer;white-space:nowrap;border-radius:999px;place-items:center;padding:0 22px;font-weight:800;text-decoration:none;display:inline-grid}.btn:hover{background:#2c2c5c}.btn:active{transform:translateY(2px);box-shadow:0 1px 3px #1b1b3a40}.btn.alt{background:var(--white);color:var(--ink)}.btn.alt:hover{background:var(--yellow)}.field{background:var(--white);border-radius:999px;width:100%;height:52px;padding:0 18px;font-weight:700}.field::placeholder{color:#9a9eb8;font-weight:500}.field:focus{border-color:var(--yellow);outline:none}.field{scroll-margin-top:12px}.chip{border-radius:999px;padding:4px 10px;font-size:.78rem;font-weight:700}.foot{text-align:center;color:var(--muted);font-size:.8rem}.overlay{z-index:20;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:#1b1b3a73;place-items:center;display:grid;position:fixed;inset:0}.panel{background:var(--white);border-radius:24px;gap:12px;width:min(440px,100%);max-height:100%;padding:22px;display:grid;position:relative;overflow:auto}.panel h2{margin:0;padding-right:36px;font-size:1.4rem;font-weight:800}.panel h3{margin:4px 0 0;font-size:1rem;font-weight:800}.panel p{margin:0}.panel .small{color:var(--muted);font-size:.85rem}.close{cursor:pointer;background:0 0;border:0;border-radius:50%;width:36px;height:36px;font-size:1.6rem;line-height:1;position:absolute;top:10px;right:12px}.close:hover{background:var(--sheet)}.toast{left:50%;top:max(20px,env(safe-area-inset-top,0px));background:var(--ink);color:var(--white);z-index:30;text-align:center;border-radius:999px;max-width:calc(100% - 32px);padding:10px 18px;font-weight:700;animation:.25s pop;position:fixed;transform:translate(-50%)}.preview-note{background:var(--white);border-radius:14px;margin:0;padding:8px 14px;font-size:.85rem;font-weight:600}.game{gap:18px;display:grid}.result{background:var(--white);text-align:center;border-radius:24px;justify-items:center;gap:12px;padding:20px;animation:.4s rise;display:grid}.result h2{text-wrap:balance;margin:0;font-size:1.5rem;font-weight:800}.result p{color:var(--muted);margin:0}.actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.share-preview{background:var(--sheet);text-align:left;white-space:pre-wrap;user-select:all;border-radius:14px;max-width:100%;margin:0;padding:10px 14px;font-family:inherit;font-size:.85rem;line-height:1.5}.result .next{color:var(--ink);font-weight:700}.next b{font-variant-numeric:tabular-nums}.result a{font-size:.9rem;font-weight:700}.rules{gap:6px;margin:0;padding-left:20px;display:grid}.legend{flex-wrap:wrap;gap:6px;display:flex}.stat-grid{text-align:center;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.stat-grid div{background:var(--sheet);border-radius:16px;justify-items:center;gap:2px;padding:10px 4px;display:grid}.stat-grid b{font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:800;line-height:1.1}.stat-grid span{color:var(--muted);font-size:.75rem;font-weight:700}.dist{gap:6px;display:grid}.bar{font-variant-numeric:tabular-nums;grid-template-columns:2.2em 1fr;align-items:center;gap:8px;font-weight:700;display:grid}.bar i{background:var(--sheet);text-align:right;border-radius:999px;min-width:28px;padding:2px 8px;font-size:.85rem;font-style:normal;display:block}.bar.today i{background:var(--mint)}.loading{min-height:60vh;color:var(--muted);place-items:center;font-weight:700;display:grid}.kb{-webkit-user-select:none;user-select:none;gap:7px;width:100%;display:grid}.kb-row{justify-content:center;gap:5px;display:flex}.kb-key{background:var(--white);max-width:46px;height:52px;font:inherit;text-transform:uppercase;cursor:pointer;touch-action:manipulation;border:0;border-radius:10px;flex:1 1 0;padding:0;font-size:1.05rem;font-weight:800;box-shadow:0 2px #1b1b3a38}.kb-key:active{box-shadow:none;transform:translateY(2px)}.kb-row.pl .kb-key:not(.m-ok):not(.m-mid):not(.m-no){background:var(--lilac)}.kb-key.wide{text-transform:none;flex:1.6 1 0;max-width:76px;font-size:.8rem}.kb-key.m-no{background:var(--silver);color:#7a7e98}.m-ok{background:var(--mint)}.m-mid{background:var(--yellow)}.m-no{background:var(--silver)}.kb-key:disabled{cursor:default}@media (width<=400px){.kb-row{gap:4px}.kb-key{height:48px;font-size:.95rem}}@keyframes slap{0%{opacity:0;transform:scale(1.15)rotate(-2deg)}to{opacity:1;transform:none}}@keyframes pop{0%{opacity:0;transform:translate(-50%,4px)}to{opacity:1;transform:translate(-50%)}}@keyframes rise{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}@media (width<=430px){.top{gap:8px}.brand{flex-wrap:nowrap;gap:7px}.logo{border-radius:13px;padding:7px 10px;font-size:1.15rem}.tag{border-width:3px;padding:3px 9px;font-size:.78rem}.tools{gap:6px}.icon-btn{border-width:3px;width:38px;height:38px;font-size:1.05rem}.icon-btn svg{width:17px;height:17px}}@media (width<=400px){.btn{padding:0 16px}}
