:root{--ink:#111;--paper:#fffdf8;--bg:#f7f4ee;--line:2.5px;--stage:min(86vw, 58vh, 520px);--display:"Black Han Sans", "Pretendard Variable", sans-serif;--mono:"Space Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--ink);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;font-family:Pretendard Variable,Pretendard,system-ui,sans-serif}.screen{flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:100dvh;padding:16px;display:flex}.screen[hidden]{display:none}.mono{font-family:var(--mono);letter-spacing:-.02em;font-weight:700}.spark{fill:var(--ink);pointer-events:none;position:absolute}.spark.outline{fill:var(--paper);stroke:var(--ink);stroke-width:.12px;overflow:visible}.spark-i{fill:currentColor;flex:none;width:14px;height:14px}@keyframes twinkle{0%,to{transform:scale(1)rotate(0)}50%{transform:scale(.7)rotate(45deg)}}.btn{border:var(--line) solid var(--ink);background:var(--paper);min-height:52px;color:var(--ink);font:inherit;cursor:pointer;touch-action:manipulation;border-radius:999px;justify-content:center;align-items:center;gap:14px;padding:0 28px;font-size:17px;font-weight:800;text-decoration:none;transition:transform 80ms;display:inline-flex}.btn[hidden]{display:none}.btn.primary{background:var(--ink);color:var(--paper);font-family:var(--display);letter-spacing:.04em;min-width:200px;font-size:20px;font-weight:400}.btn.primary>span{transform:translateY(.13em)}.btn.wide{justify-content:space-between;width:min(86vw,360px)}.btn:active{transform:scale(.96)}.btn:focus-visible,.link:focus-visible{outline:var(--line) dashed var(--ink);outline-offset:4px}.link{color:var(--ink);font-size:14px;font-weight:700}.best{margin:0;font-size:15px;font-weight:700}.hero{flex-direction:column;align-items:center;padding:72px 36px 8px;display:flex;position:relative}.logo{font-family:var(--display);letter-spacing:-.02em;margin:0;font-size:min(26vw,140px);font-weight:400;line-height:1}.tagline{font-family:var(--mono);margin:6px 0 0;font-size:14px;font-weight:700}.hero .knife{transform-origin:50%;width:min(58vw,280px);height:calc(min(58vw,280px)/3.72727);animation:1.8s ease-in-out infinite chop;position:absolute;top:6px;left:50%}@keyframes chop{0%,to{transform:translate(-50%)rotate(-8deg)}45%{transform:translate(-50%)translateY(10px)rotate(6deg)}55%{transform:translate(-50%)translateY(12px)rotate(6deg)}}.hero .sp1{width:40px;height:40px;animation:2.4s ease-in-out infinite twinkle;top:40px;left:0}.hero .sp2{width:20px;height:20px;animation:2.4s ease-in-out .6s infinite twinkle;top:82px;left:40px}.hero .sp3{width:30px;height:30px;animation:2.4s ease-in-out 1.2s infinite twinkle;bottom:30px;right:0}.hint{margin:0 0 4px;font-size:17px;font-weight:700}#play{gap:14px}.hud{width:var(--stage);grid-template-columns:48px 1fr 48px;align-items:center;display:grid}.box{border:var(--line) solid var(--ink);background:var(--paper);border-radius:14px;place-items:center;width:48px;height:48px;font-size:14px;display:grid}.hud-title{flex-direction:column;align-items:center;gap:2px;display:flex}.hud-title strong{font-family:var(--display);letter-spacing:.04em;font-size:20px;font-weight:400}.level{font-size:13px;font-weight:700}.level:after{content:" ↑"}.level[data-level=easy]:after{content:""}.level[data-level=hard]:after{content:" ↑↑"}.face{--paper:#111;--ink:#fffdf8;background:#111;border-radius:50%;place-items:center;width:48px;height:48px;display:grid}.face svg{width:38px;height:10px;transform:rotate(-30deg)}.stage{width:var(--stage);aspect-ratio:1;border:var(--line) solid var(--ink);background:var(--paper);box-shadow:0 0 0 6px var(--bg), 0 0 0 calc(6px + var(--line)) var(--ink);border-radius:34px;position:relative}#canvas{border-radius:inherit;touch-action:none;cursor:crosshair;width:100%;height:100%;display:block}.stage .st1{width:34px;height:34px;animation:2.6s ease-in-out infinite twinkle;top:16px;left:14px}.stage .st2{width:22px;height:22px;animation:2.6s ease-in-out 1s infinite twinkle;top:22px;right:18px}.miss{border:var(--line) solid var(--ink);background:var(--paper);white-space:nowrap;pointer-events:none;border-radius:16px;margin:0;padding:8px 18px;font-size:18px;font-weight:800;position:absolute;top:12%;left:50%;transform:translate(-50%)rotate(-3deg)}.judge{pointer-events:none;position:absolute;inset:0}.judge[hidden]{display:none}.ratio{background:var(--ink);color:var(--paper);white-space:nowrap;border-radius:999px;margin:0;padding:6px 18px;font-size:min(6.5vw,28px);position:absolute;top:5%;left:50%;transform:translate(-50%)}.stamp{border:var(--line) solid var(--ink);background:var(--paper);width:1.7em;height:1.7em;color:var(--ink);border-radius:50%;place-items:center;font-size:min(10vw,44px);line-height:1;display:inline-grid}.judge .stamp{position:absolute;bottom:4%;right:4%;transform:rotate(-12deg)}.stamp.big{border-width:4px;font-size:min(20vw,84px)}.stamp[data-grade=S],.grades li[data-grade=S]{background:var(--ink);color:var(--paper)}.stamp[data-grade=A]{box-shadow:inset 0 0 0 4px var(--paper), inset 0 0 0 6.5px var(--ink)}.stamp[data-grade=C],.grades li[data-grade=C]{border-style:dashed}.progress-wrap{width:var(--stage);margin-top:6px}.progress{border:var(--line) solid var(--ink);background:var(--paper);border-radius:999px;height:16px;overflow:hidden}#progress-fill{background:var(--ink);border-radius:999px;width:0;height:100%;transition:width .4s cubic-bezier(.34,1.56,.64,1);display:block}.progress-labels{justify-content:space-between;margin-top:6px;font-size:12px;display:flex}.below{flex-direction:column;align-items:center;gap:10px;min-height:96px;display:flex}.reaction{min-height:1.2em;font-family:var(--display);text-align:center;margin:0;font-size:24px}.result-hero{padding:24px 48px;position:relative}.result-hero .rs1{width:36px;height:36px;animation:2.4s ease-in-out infinite twinkle;top:8px;left:0}.result-hero .rs2{width:26px;height:26px;animation:2.4s ease-in-out .8s infinite twinkle;bottom:16px;right:4px}.result-hero .stamp{transform:rotate(-8deg)}.avg{margin:0;font-size:18px;font-weight:800}.avg strong{margin-left:6px;font-size:44px}.grades{gap:10px;margin:0;padding:0;list-style:none;display:flex}.grades li{border:var(--line) solid var(--ink);background:var(--paper);border-radius:50%;place-items:center;width:52px;height:52px;font-size:20px;display:grid}.grades li[data-grade=A]{box-shadow:inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--ink)}.record{background:var(--ink);color:var(--paper);border-radius:999px;margin-left:6px;padding:2px 10px;display:inline-block;transform:rotate(-6deg)}.record[hidden]{display:none}.actions{flex-direction:column;align-items:center;gap:12px;margin-top:8px;display:flex}.actions .row{gap:12px;width:min(86vw,360px);display:flex}.actions .row .btn{flex:1;padding:0 12px}.toast{background:var(--ink);color:var(--paper);opacity:0;pointer-events:none;border-radius:999px;margin:0;padding:10px 20px;font-weight:800;transition:opacity .15s;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.toast.show{opacity:1}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}