@font-face{font-family:Space;src:url('./fonts/space-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Space;src:url('./fonts/space-bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Jet;src:url('./fonts/jet-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Jet;src:url('./fonts/jet-bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{color-scheme:dark;--bg:#111512;--surface:#121713;--text:#f5f5ee;--muted:#a9afa3;--line:#4b5342;--accent:#c8fa65;--accent-ink:#111512;--sans:Space,Arial,sans-serif;--mono:Jet,Consolas,monospace}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;color:var(--text);font-family:var(--sans);min-height:100svh;display:flex;flex-direction:column}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:5px}button,select,input{touch-action:manipulation}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-library{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}
.header{min-height:108px;padding:24px 3.125%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{min-width:0}.brand-name{display:block;font-size:34px;font-weight:700;letter-spacing:.025em;line-height:1.1;overflow-wrap:anywhere}.brand-caption{display:block;font-size:14px;letter-spacing:.16em;margin-top:5px;color:#d0d3ca}.toolbar{display:flex;gap:23px;align-items:center;flex-shrink:0}.customize{display:flex;align-items:center;gap:16px;padding:12px 20px;background:transparent;border:1px solid #777e63;border-radius:10px;font-size:16px}.customize:hover,.icon-button:hover{background:#ffffff0c}.icon-button{width:40px;height:42px;display:grid;place-items:center;border:0;background:transparent;border-radius:7px}.icon-button svg{width:28px;height:28px}.divider{width:1px;height:37px;background:var(--line)}
.main{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:3.55%;padding:24px 2.5% 23px 3.125%;flex:1;width:100%;max-width:1920px;align-self:center}.intro{padding-top:22px;display:flex;flex-direction:column}.intro h1{font-size:clamp(54px,6.6vw,108px);font-weight:700;letter-spacing:-.062em;line-height:.97;margin:0}.tagline{font-size:clamp(20px,2.14vw,34px);line-height:1.3;letter-spacing:-.02em;margin:28px 0 0}.steps{list-style:none;padding:36px 0 12px;margin:38px 0 0;border-top:1px solid #6c735d;display:flex;flex-direction:column;justify-content:space-between;gap:40px;flex:1;max-height:310px}.steps li{position:relative;display:flex;gap:24px;align-items:center;font-size:clamp(16px,1.4vw,23px)}.step-number{width:53px;height:53px;border:1.5px solid var(--accent);border-radius:50%;display:grid;place-items:center;font-size:23px;flex-shrink:0}.steps li:not(:last-child):after{content:'';position:absolute;top:calc(100% + 12px);left:26px;width:1px;height:24px;background:#b7bda8}
.game{background:var(--surface);position:relative;border:1px solid #62694f;border-radius:20px;display:flex;flex-direction:column;text-align:center;min-width:0;overflow:hidden;padding:58px 35px 36px;justify-content:center;min-height:690px}.game-top{margin-bottom:25px}.target{font:400 18px var(--mono);letter-spacing:.19em;margin:0}.target span{text-transform:none}.rule{font-size:13px;color:var(--muted);margin:10px 0 0;letter-spacing:.02em}.timer{font-family:var(--mono);font-size:clamp(80px,10.4vw,170px);font-weight:700;letter-spacing:-.065em;line-height:1.15;display:flex;justify-content:center;align-items:baseline;white-space:nowrap;font-variant-numeric:tabular-nums;user-select:none}.decimal{color:var(--accent);margin:0 .035em}.feedback{margin-top:12px;min-height:76px;display:flex;flex-direction:column;justify-content:center;gap:7px}#status{font-size:clamp(20px,1.8vw,28px);margin:0;line-height:1.2;overflow-wrap:anywhere}.detail{font-size:14px;color:var(--muted);margin:0;min-height:18px}.scale-wrap{margin:23px auto 36px;width:92%;max-width:800px}.scale{height:30px;position:relative;background:repeating-linear-gradient(to right,transparent 0,transparent calc(1.6667% - 1px),#818875 calc(1.6667% - 1px),#818875 1.6667%);background-size:100% 12px;background-position:center;background-repeat:no-repeat;border-left:2px solid #9a9e90;border-right:2px solid #9a9e90}.scale:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(to right,transparent 0,transparent calc(5% - 1px),#939b85 calc(5% - 1px),#939b85 5%);background-size:100% 22px;background-position:center;background-repeat:no-repeat}.target-tick{position:absolute;left:50%;width:3px;top:0;height:30px;background:var(--accent)}.result-marker{position:absolute;top:-10px;left:50%;width:10px;height:10px;background:var(--accent);transform:translateX(-50%) rotate(45deg);transition:left .45s cubic-bezier(.2,.8,.2,1)}.scale-labels{display:flex;justify-content:space-between;font:12px var(--mono);letter-spacing:.03em;padding-top:12px;margin:0 -20px}.action-wrap{width:75%;max-width:670px;align-self:center}.action{width:100%;min-height:86px;border:0;border-radius:16px;background:var(--accent);color:var(--accent-ink);display:flex;justify-content:center;align-items:center;gap:22px;font-size:24px;font-weight:700;letter-spacing:.065em;box-shadow:0 0 0 0 transparent;transition:transform .12s,filter .15s;user-select:none}.action:hover{filter:brightness(1.06);transform:translateY(-2px)}.action:active{transform:translateY(2px) scale(.995)}.action svg{width:32px;height:32px}.input-hint{font-size:14px;color:#c4c9bd;letter-spacing:.075em;margin:18px 0 0}.stats{margin:40px 0 0;border-top:1px solid var(--line);padding:30px 0 0;display:grid;grid-template-columns:repeat(3,1fr)}.stats>div+div{border-left:1px solid var(--line)}.stats dt{font-size:13px;letter-spacing:.16em;color:#d0d3ca}.stats dd{font:700 clamp(22px,2.4vw,38px) var(--mono);margin:9px 0 0;letter-spacing:-.06em}.stats dd small{font:400 13px var(--sans);letter-spacing:0}.game[data-state=running]{border-color:var(--accent)}.game[data-state=running] .target-tick{animation:pulse 1s ease-in-out infinite}.game[data-success=true] #status{color:var(--accent)}.timer.blind{letter-spacing:.01em;opacity:.65}.footer{padding:24px 3.125%;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:18px;color:#d3d7cc;font:12px var(--mono);letter-spacing:.1em;line-height:1.6}.footer a{color:inherit;text-decoration:none}.footer a:hover{color:var(--accent)}
dialog{width:min(540px,calc(100% - 32px));max-height:calc(100svh - 32px);padding:28px;background:#191f19;border:1px solid #5e6850;border-radius:22px;color:var(--text);box-shadow:0 30px 100px #0008}dialog::backdrop{background:#060a08c9;backdrop-filter:blur(7px)}.dialog-header{display:flex;justify-content:space-between;gap:16px;margin-bottom:24px}.dialog-header h2{font-size:36px;letter-spacing:-.045em;line-height:1.1;margin:0}.dialog-header p{margin:8px 0 0;color:var(--muted);font-size:15px}.field{display:flex;flex-direction:column;gap:8px;font-size:14px;color:#d8ddcf;margin-bottom:19px}.field input,.field select{width:100%;border:1px solid #4e5947;border-radius:9px;background:#111710;color:var(--text);padding:12px;font-size:16px;height:48px;min-width:0}.field input[type=color]{padding:5px;cursor:pointer}.field-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:16px}.checkbox{display:flex;align-items:center;gap:12px;font-size:16px}.checkbox input{width:20px;height:20px;accent-color:var(--accent);flex-shrink:0}.checkbox small{display:block;color:var(--muted);font-size:13px;margin-top:4px}.settings-note{font-size:12px;color:var(--muted);line-height:1.6;margin:20px 0}.apply-button,.secondary-button{width:100%;min-height:48px;border:0;border-radius:9px;font-weight:700;font-size:14px;letter-spacing:.03em}.apply-button{background:var(--accent);color:var(--accent-ink)}.secondary-button{margin-top:12px;background:transparent;border:1px solid #68745a}.secondary-button:hover{background:#ffffff07}.dialog-bottom{display:flex;gap:16px;justify-content:space-between;margin-top:22px}.dialog-bottom button{font-size:12px;color:#a9b69b;background:none;border:0;text-decoration:underline;text-underline-offset:3px;padding:3px}.settings-status{color:var(--accent);font-size:13px;line-height:1.5;margin:15px 0 0}.settings-status:empty{display:none}.share-fallback{width:100%;padding:8px;margin-top:10px;font-size:12px}.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:14px 22px;border-radius:10px;box-shadow:0 6px 30px #0007;max-width:calc(100% - 32px);font-size:14px;z-index:10}.celebration{position:absolute;inset:0;pointer-events:none;overflow:hidden}.confetti{position:absolute;left:var(--x);top:-15px;width:6px;height:12px;background:var(--accent);animation:fall 1.7s var(--delay) ease-in forwards;opacity:0}.confetti:nth-child(3n){background:var(--text)}.confetti:nth-child(2n){width:5px;height:5px;border-radius:50%}
@keyframes fall{0%{opacity:1;transform:translateY(-10px) rotate(0)}95%{opacity:.8}100%{opacity:0;transform:translateY(850px) rotate(520deg)}}@keyframes pulse{50%{opacity:.35}}
@media(min-width:1450px) and (min-height:900px){.main{min-height:calc(100svh - 177px)}.game{padding-top:54px;padding-bottom:40px}.game-top{margin-bottom:25px}.feedback{margin-top:14px}.scale-wrap{margin-top:20px;margin-bottom:40px}.stats{margin-top:40px;padding-top:32px}.steps{margin-top:38px;max-height:310px}.intro{padding-top:20px}}
@media(max-width:1200px){.header{min-height:90px}.brand-name{font-size:28px}.main{gap:3%;padding-top:24px}.game{min-height:600px;padding:34px 24px 26px}.action-wrap{width:86%}.action{min-height:74px;font-size:21px}.steps{gap:27px;padding-top:26px;margin-top:26px}.steps li{gap:16px}.step-number{width:44px;height:44px;font-size:20px}.steps li:not(:last-child):after{left:21px;top:calc(100% + 6px);height:15px}.stats{margin-top:28px;padding-top:22px}.target{font-size:15px}.scale-wrap{margin-top:14px;margin-bottom:25px}.footer{font-size:10px}}
@media(max-width:850px){.header{padding:20px 24px;min-height:84px}.brand-name{font-size:25px}.brand-caption{font-size:10px;letter-spacing:.08em}.toolbar{gap:10px}.customize{gap:8px;padding:10px 12px;font-size:13px}.divider{display:none}.icon-button{width:34px}.icon-button svg{width:23px;height:23px}.main{grid-template-columns:1fr;padding:24px;gap:24px}.intro{display:block;padding-top:0}.intro h1{font-size:clamp(40px,6.4vw,62px);letter-spacing:-.055em;line-height:1.05}.intro h1 br{display:none}.intro h1 br:after{content:' '}.tagline{font-size:17px;margin-top:12px}.tagline br{display:none}.steps{display:none}.game{min-height:580px;padding:32px}.timer{font-size:clamp(86px,17vw,142px)}.game-top{margin-bottom:20px}.feedback{margin-top:7px;min-height:65px}.scale-wrap{max-width:550px}.action-wrap{max-width:540px}.stats{margin-top:32px}.stats dd{font-size:28px}.footer{padding:20px 24px;flex-wrap:wrap}.footer span:last-child{letter-spacing:.03em}}
@media(max-width:520px){.header{padding:17px 18px;gap:8px;min-height:79px}.brand-name{font-size:22px;max-width:180px}.brand-caption{font-size:8px;letter-spacing:.065em}.toolbar{gap:4px}.customize{padding:8px;border:0}.customize span{display:none}.customize svg{width:22px}.icon-button{width:30px;height:36px}.main{padding:25px 16px 20px;gap:22px}.intro{padding:0 6px}.intro h1{font-size:37px;max-width:330px;line-height:1.02}.intro h1 br:first-of-type{display:block}.tagline{font-size:15px;line-height:1.5;margin-top:10px;max-width:270px}.game{min-height:0;padding:28px 16px 25px;border-radius:18px}.target{font-size:12px;letter-spacing:.13em}.rule{font-size:11px;margin-top:9px}.game-top{margin-bottom:24px}.timer{font-size:clamp(64px,19vw,99px);letter-spacing:-.075em}.feedback{min-height:68px;margin-top:11px}#status{font-size:19px}.detail{font-size:12px;line-height:1.5}.scale-wrap{width:85%;margin:18px auto 26px}.scale-labels{font-size:10px;margin:0 -15px}.action-wrap{width:100%}.action{min-height:68px;font-size:18px;gap:12px;border-radius:12px}.action svg{width:25px;height:25px}.input-hint{font-size:11px;letter-spacing:.03em;margin-top:14px}.stats{padding-top:23px;margin-top:24px}.stats dt{font-size:8px;letter-spacing:.1em}.stats dd{font-size:21px;letter-spacing:-.07em}.stats dd small{font-size:10px}.footer{padding:16px 22px;gap:5px;font-size:9px}.footer span{width:100%}dialog{padding:24px 20px;border-radius:18px}.dialog-header h2{font-size:31px}.field-row{gap:10px}.field input,.field select{font-size:14px}.dialog-bottom{gap:8px}.dialog-bottom button{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.celebration{display:none}}
.timer{font-family:var(--sans);font-variant-numeric:tabular-nums;font-feature-settings:'tnum';font-size:clamp(80px,12vw,190px);line-height:1.04;letter-spacing:-.055em}
@media(min-width:1450px) and (min-height:900px){.game{padding-top:54px;padding-bottom:32px}.game-top{margin-bottom:10px}.feedback{min-height:55px;margin-top:0}.scale-wrap{margin-top:18px;margin-bottom:36px}.stats{margin-top:36px}}
@media(min-width:851px) and (max-height:850px){.header{min-height:78px;padding-top:17px;padding-bottom:17px}.brand-name{font-size:28px}.brand-caption{font-size:10px}.main{padding-top:18px;padding-bottom:18px}.intro{padding-top:15px}.intro h1{font-size:clamp(54px,5.8vw,82px)}.tagline{font-size:23px;margin-top:22px}.steps{margin-top:25px;padding-top:22px;gap:20px;max-height:245px}.steps li{font-size:16px}.game{min-height:520px;padding:24px 28px}.game-top{margin-bottom:12px}.target{font-size:14px}.rule{font-size:12px;margin-top:7px}.timer{font-size:clamp(90px,10vw,138px);line-height:1}.feedback{min-height:52px;margin-top:4px}#status{font-size:22px}.detail{font-size:12px}.scale-wrap{margin-top:10px;margin-bottom:20px}.scale{height:24px}.target-tick{height:24px}.scale-labels{padding-top:7px;font-size:10px}.action{min-height:64px;font-size:20px}.input-hint{margin-top:12px;font-size:12px}.stats{margin-top:24px;padding-top:20px}.stats dt{font-size:11px}.stats dd{font-size:27px;margin-top:6px}.footer{padding-top:17px;padding-bottom:17px}}
@media(max-width:850px){.timer{font-size:clamp(86px,19vw,160px)}}
@media(max-width:520px){.timer{font-size:clamp(64px,21vw,110px);line-height:1.05}}
@media(min-width:851px) and (max-height:850px){.steps li:not(:last-child):after{top:calc(100% + 5px);height:12px}}