.fits-page{--fits-ink:#272921;--fits-muted:#77796f;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);color:var(--fits-ink);overscroll-behavior:none;background:#f7f7f2;flex-direction:column;font-size:14px;display:flex;position:fixed;inset:0 0 auto;overflow:hidden}.fits-page button,.fits-page input{font:inherit}.fits-page button{cursor:pointer;touch-action:manipulation}.fits-page button:disabled{cursor:default;opacity:.5}.fits-page button,.fits-page a{-webkit-tap-highlight-color:transparent}.fits-page :focus-visible{outline-offset:6px;outline:2px solid #77824c}.fits-header{z-index:4;flex:none;justify-content:space-between;align-items:center;padding:clamp(10px,2.5dvh,27px) clamp(18px,3vw,40px);display:flex;position:relative}.fits-logo{width:155px;height:auto}.fits-header nav{align-items:center;gap:34px;display:flex}.fits-header nav button{background:0 0;border:0;min-height:44px;padding:8px 0}.fits-header nav button:hover,.fits-footer a:hover{opacity:.55}.fits-header nav button span{margin-left:8px}.fits-header nav .fits-sound{color:var(--fits-muted)}.fits-header nav .fits-sound span{margin:0 7px 0 0}.fits-playground{flex:1;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;display:grid;position:relative}.fits-eyebrow{letter-spacing:.13em;font-size:10px;font-weight:500}.fits-score{z-index:2;pointer-events:none;flex-direction:column;grid-row:1;align-items:center;margin:0 auto;padding-top:4px;display:flex;position:relative}.fits-score>span:first-child{color:var(--fits-muted)}.fits-score strong{letter-spacing:-.075em;font-variant-numeric:tabular-nums;margin:clamp(3px,1dvh,13px) 0 5px;font-size:clamp(32px,6dvh,60px);font-weight:400;line-height:1.1}.fits-score .fits-score-summary{color:var(--fits-muted);font-size:12px}.fits-score .fits-score-gain{text-align:center;color:#717960;letter-spacing:.06em;white-space:nowrap;margin:13px auto 0;font-size:10px;animation:1s ease-out both fits-gain;position:absolute;top:100%;left:0;right:0}.fits-score .fits-score-gain.is-perfect{color:#627a39}@keyframes fits-gain{0%{opacity:0;transform:translateY(6px)}18%,65%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-7px)}}.fits-score i{padding:0 7px;font-style:normal}.fits-canvas{pointer-events:none;grid-row:2;width:100%;min-width:0;height:100%;min-height:0;transition:opacity .4s;position:relative}.fits-canvas-over{opacity:.12;position:absolute;inset:0}.fits-tap-area{z-index:1;background:0 0;border:0;width:100%;position:absolute;inset:0}.fits-tap-area:focus-visible{outline-offset:-12px}.fits-bottom-controls{text-align:center;z-index:3;grid-row:3;justify-self:center;width:max-content;max-width:calc(100% - 40px);position:relative}.fits-feedback{min-height:22px;margin:0 0 clamp(8px,1.8dvh,17px);font-size:15px}.fits-feedback.is-perfect{color:#65763b}.fits-primary{color:#fafaf5;background:#2d3027;border:0;border-radius:999px;justify-content:space-between;align-items:center;gap:42px;min-width:185px;margin:0 auto;padding:16px 24px;transition:background .2s,transform .2s;display:flex}.fits-primary:not(:disabled):hover{background:#49513b;transform:translateY(-2px)}.fits-primary:not(:disabled):active{transform:translateY(1px)}.fits-primary>span{font-size:20px;font-weight:400;line-height:1}.fits-hint{color:var(--fits-muted);min-height:22px;margin:clamp(8px,1.8dvh,17px) 0 0;font-size:11px}.fits-hint kbd{font:inherit;border:1px solid #d9dad1;border-radius:3px;margin-left:3px;padding:1px 5px}.fits-hint button{color:var(--fits-ink);background:0 0;border:0;margin-left:14px;padding:0 10px}.fits-timer{opacity:0;background:#e5e6dc;width:120px;height:2px;margin:-7px auto 18px}.fits-timer.is-visible{opacity:1}.fits-timer>div{transform-origin:0;background:#8c986c;height:100%}.fits-footer{color:var(--fits-muted);z-index:2;flex:none;justify-content:space-between;align-items:center;gap:20px;padding:clamp(10px,2.5dvh,26px) clamp(18px,3vw,40px);font-size:11px;display:flex}.fits-footer b{color:var(--fits-ink);font-variant-numeric:tabular-nums;margin-left:12px;font-weight:500}.fits-footer a{color:var(--fits-ink);text-decoration:none}.fits-result{overscroll-behavior:contain;text-align:center;z-index:3;width:min(370px,100% - 40px);max-height:100%;padding:8px;position:absolute;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%)}.fits-result>.fits-eyebrow,.fits-result-summary>.fits-eyebrow{color:var(--fits-muted)}.fits-result h2{font-family:var(--font-serif);letter-spacing:-.06em;margin:14px 0;font-size:76px;font-weight:400;line-height:1}.fits-result>p:not(.fits-eyebrow),.fits-result-summary>p:not(.fits-eyebrow),.fits-result-actions>p{color:var(--fits-muted);font-size:13px;line-height:1.5}.fits-result-score{letter-spacing:-.055em;margin:16px 0 23px;font-size:38px}.fits-result-score span{color:#6e8050;letter-spacing:0;letter-spacing:.08em;margin-top:5px;font-size:11px;display:block}.fits-result .fits-miss-detail{margin:-10px 0 18px;font-size:11px}.fits-result .fits-restart-hint{margin:12px 0 5px;font-size:10px}.fits-restart-hint kbd{font:inherit;border:1px solid #d9dad1;border-radius:3px;padding:1px 5px}.fits-result .fits-save{border-top:1px solid #dedfd4;margin-top:25px;padding-top:19px}.fits-save{text-align:left;max-width:315px;margin:0 auto 15px}.fits-save label{margin-bottom:9px;font-size:12px;display:block}.fits-save>div{background:#fafaf7;border:1px solid #d6d8cc;border-radius:6px;display:flex}.fits-save input{width:50%;min-width:0;color:var(--fits-ink);background:0 0;border:0;flex:1;padding:13px 12px;font-size:16px}.fits-save button{white-space:nowrap;background:0 0;border:0;padding:8px 12px;font-size:12px}.fits-save small{color:var(--fits-muted);margin-top:7px;font-size:9px;display:block}.fits-message{color:var(--fits-muted);max-width:320px;margin:10px auto;font-size:11px!important}.fits-message:empty{display:none}.fits-result .fits-primary{margin-top:20px}.fits-text-link{color:var(--fits-ink);text-underline-offset:4px;background:0 0;border:0;margin:8px 0;text-decoration:underline;font-size:12px!important}.fits-no-webgl{text-align:center;padding:40px}.fits-board{width:440px;max-width:100%;height:100dvh;max-height:100dvh;color:var(--fits-ink);background:#fafaf6;border:0;margin:0 0 0 auto;padding:0;box-shadow:-10px 0 80px #25271d10}.fits-board::backdrop{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#25271d25}.fits-board-inner{flex-direction:column;min-height:100%;padding:26px 34px;display:flex}.fits-board-top{color:var(--fits-muted);justify-content:space-between;align-items:center;display:flex}.fits-board-top button{width:36px;height:36px;color:var(--fits-ink);background:0 0;border:0;font-size:29px;line-height:1}.fits-board h2{font-family:var(--font-serif);letter-spacing:-.045em;margin:40px 0 16px;font-size:47px;font-weight:400;line-height:1.06}.fits-board h2+p{color:var(--fits-muted);font-size:13px}.fits-board-tabs{border-bottom:1px solid #dedfd4;gap:20px;margin-top:32px;display:flex}.fits-board-tabs button{color:var(--fits-muted);background:0 0;border:0;border-bottom:1px solid #0000;margin-bottom:-1px;padding:13px 0}.fits-board-tabs button[aria-pressed=true]{border-color:var(--fits-ink);color:var(--fits-ink)}.fits-board-labels{color:var(--fits-muted);letter-spacing:.09em;grid-template-columns:1fr 55px 65px;padding:24px 0 10px;font-size:9px;display:grid}.fits-board-labels span:not(:first-child){text-align:right}.fits-board-list{margin:0;padding:0;list-style:none}.fits-board-list li{border-bottom:1px solid #e7e8df;align-items:center;gap:10px;min-height:56px;padding:12px 0;font-size:12px;display:flex}.fits-board-list li.is-you{background:#edf0e3;border-radius:5px;margin:0 -12px;padding-left:12px;padding-right:12px}.fits-rank{color:#989b8d;width:20px;font-size:10px}.fits-player{overflow-wrap:anywhere;flex:1}.fits-player small{color:#70804d;margin-top:3px;font-size:8px;display:block}.fits-streak{text-align:right;width:32px;color:var(--fits-muted)}.fits-board-list strong{text-align:right;font-variant-numeric:tabular-nums;width:55px;font-weight:500}.fits-miniature{flex-shrink:0;width:30px;height:32px;display:inline-block;position:relative}.fits-miniature i{background:linear-gradient(160deg,#fff,#c9cabe);border:1px solid #d1d3c8;border-radius:50%;width:26px;height:10px;position:absolute;left:2px;box-shadow:0 1px 2px #282b2310}.fits-miniature b{background:radial-gradient(at 30% 20%,#fff,#bcbfaf);border-radius:50%;width:9px;height:9px;position:absolute;left:11px}.fits-board-empty{text-align:center;color:var(--fits-muted);padding:54px 0;font-size:13px;line-height:1.6}.fits-board-empty .fits-miniature{margin:16px 0 22px;transform:scale(1.8)}.fits-board-empty h3{color:var(--fits-ink);margin:0 0 9px;font-size:18px;font-weight:400}.fits-board-note{color:var(--fits-muted);margin:17px 0 23px;font-size:10px;line-height:1.7}.fits-own-rank{background:#edf0e3;gap:10px;padding:15px 12px;font-size:12px;display:flex}.fits-own-rank span{margin-left:auto}.fits-board .fits-primary{justify-content:space-between;margin:auto 0 0}.fits-board-privacy{color:var(--fits-muted);text-align:center;margin-top:20px;font-size:10px}@media (max-width:760px){.fits-logo{width:124px}.fits-header nav{gap:16px;font-size:12px}.fits-header nav .fits-sound{min-width:44px;font-size:0}.fits-header nav .fits-sound span{margin:0;font-size:18px}.fits-score .fits-eyebrow{font-size:9px}.fits-score .fits-score-summary{text-align:center;font-size:10px}.fits-feedback{font-size:12px}.fits-primary{min-height:48px;padding:14px 22px;font-size:13px!important}.fits-hint{font-size:10px}.fits-footer{gap:10px;font-size:10px}.fits-footer>span:first-child{display:none}.fits-footer b{margin-left:7px}.fits-result{background:#f7f7f2ed}.fits-result h2{font-size:59px}.fits-result>p:not(.fits-eyebrow),.fits-result-summary>p:not(.fits-eyebrow){font-size:12px}.fits-board-inner{padding:23px 26px}.fits-board h2{font-size:44px}}@media (max-height:740px){.fits-header{padding-block:8px}.fits-footer{padding-block:10px}.fits-score strong{margin-block:3px}.fits-feedback{margin-bottom:8px}.fits-timer{margin:0 auto 10px}.fits-hint{min-height:16px;margin-top:8px}.fits-result h2{margin:8px 0;font-size:52px}.fits-result-score{margin:10px 0;font-size:32px}.fits-result .fits-miss-detail{margin:0 0 8px}.fits-result .fits-primary{margin-top:12px}.fits-result .fits-restart-hint{margin:8px 0 0}.fits-result .fits-save{margin-top:14px;margin-bottom:0;padding-top:12px}}@media (max-height:600px){.fits-result h2{margin-block:6px;font-size:44px}.fits-result-score{margin-block:8px;font-size:28px;line-height:1.15}.fits-result-score span{line-height:1.5}.fits-result .fits-primary{min-height:44px;padding-block:12px}.fits-result .fits-save{margin-top:10px;padding-top:10px}.fits-save input{padding-block:10px}}@media (max-height:500px) and (min-width:500px){.fits-playground{display:block}.fits-score{width:130px;position:absolute;top:50%;left:20px;transform:translateY(-50%)}.fits-score .fits-score-summary{font-size:9px}.fits-canvas{width:auto;position:absolute;inset:0 180px}.fits-bottom-controls{width:160px;position:absolute;top:50%;right:16px;transform:translateY(-50%)}.fits-bottom-controls .fits-primary{gap:20px;min-width:145px;padding-inline:18px}.fits-hint{line-height:1.5}.fits-hint button{margin-left:4px}.fits-feedback{line-height:1.4}.fits-result{grid-template-columns:1fr 1fr;align-items:center;gap:24px;width:min(680px,100% - 40px);display:grid}.fits-result-summary,.fits-result-actions{min-width:0}.fits-result h2{font-size:46px}.fits-result .fits-primary{margin-top:0}.fits-result .fits-save{margin-top:10px;padding-top:10px}.fits-save label{margin-bottom:6px}.fits-result:not(:has(.fits-result-summary)){max-width:370px;display:block}}@media (max-width:370px){.fits-header nav{gap:8px}.fits-logo{width:112px}.fits-save button{padding-inline:9px}}@media (prefers-reduced-motion:reduce){.fits-page *,.fits-page :before,.fits-page :after{transition:none!important;animation:none!important}}