:root,:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--sheet:#f4f2ea;--sheet-deep:#e9e6dc;--card:#fffef9;--pencil:#2f2c28;--pencil-soft:#5b574f;--pencil-faint:#6e6a63;--seam:#d7d3c9;--pen:#1f4fa8;--pen-wash:#1f4fa812;--pen-echo:#1f4fa829;--red:#c62d1f;--red-wash:#c62d1f1a;--marker:#ffe066;--marker-ink:#2f2c28;--grid-line:#96aac24d;--margin-line:#c62d1f4d;--paper-shadow:#2f2c288c}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--sheet:#1f2329;--sheet-deep:#171b20;--card:#262b32;--pencil:#e9e4da;--pencil-soft:#a8a196;--pencil-faint:#a49d92;--seam:#474e58;--pen:#84b6f7;--pen-wash:#84b6f71a;--pen-echo:#84b6f733;--red:#f4938a;--red-wash:#f4938a29;--marker:#cba52f;--marker-ink:#1f2329;--grid-line:#a0b9d717;--margin-line:#f4938a38;--paper-shadow:#000000b3}:root{--font-hand:"Gaegu", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;--line-hair:1px;--line-bold:2px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:40px;--radius-hand:13px 10px 14px 9px;--radius-hand-sm:10px 7px 11px 8px;--duration:.12s;--duration-slow:.24s;--duration-cheer:.62s;--cheer-stagger:45ms;--ease:cubic-bezier(.2, 0, .2, 1);--ease-pop:cubic-bezier(.34, 1.56, .64, 1)}*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0}#root{flex-direction:column;min-height:100dvh;display:flex}body{background-color:var(--sheet);color:var(--pencil);font-family:var(--font-hand);-webkit-font-smoothing:antialiased;font-size:17px;font-weight:700;line-height:1.5}body:before{content:"";z-index:0;pointer-events:none;background-image:linear-gradient(to right, var(--grid-line) var(--line-hair), transparent var(--line-hair)), linear-gradient(to bottom, var(--grid-line) var(--line-hair), transparent var(--line-hair));background-size:19px 19px;position:fixed;inset:0}body:after{content:"";z-index:0;width:var(--line-hair);pointer-events:none;background-color:var(--margin-line);position:fixed;top:0;bottom:0;left:32px}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none;padding:0}:focus-visible{outline:var(--line-bold) solid var(--pen);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:.01ms!important}}.board{--border:var(--line-bold);--board-size:min(92vw, 58vh, 520px);--inner:calc(var(--board-size) - var(--border) * 2);--cell-size:calc(var(--inner) / 9);width:var(--board-size);height:var(--board-size);border:var(--border) solid var(--pencil);background-color:var(--card);box-shadow:0 9px 18px -13px var(--paper-shadow);border-radius:3px;grid-template-rows:repeat(9,minmax(0,1fr));grid-template-columns:repeat(9,minmax(0,1fr));display:grid;position:relative;overflow:hidden;transform:rotate(-.45deg)}.board__row{display:contents}.board:after{content:"";z-index:1;pointer-events:none;background-image:linear-gradient(var(--pencil), var(--pencil)), linear-gradient(var(--pencil), var(--pencil)), linear-gradient(var(--pencil), var(--pencil)), linear-gradient(var(--pencil), var(--pencil));background-size:var(--line-bold) 100%, var(--line-bold) 100%, 100% var(--line-bold), 100% var(--line-bold);background-position:calc(var(--inner) / 3 - var(--line-bold) / 2) 0, calc(var(--inner) / 3 * 2 - var(--line-bold) / 2) 0, 0 calc(var(--inner) / 3 - var(--line-bold) / 2), 0 calc(var(--inner) / 3 * 2 - var(--line-bold) / 2);background-repeat:no-repeat;position:absolute;inset:0}.cell{background-color:var(--card);min-width:0;min-height:0;box-shadow:inset calc(var(--line-hair) * -1) 0 0 var(--seam), inset 0 calc(var(--line-hair) * -1) 0 var(--seam);font-size:calc(var(--cell-size) * .68);cursor:pointer;transition:background-color var(--duration) var(--ease);justify-content:center;align-items:center;line-height:1;display:flex;position:relative;overflow:hidden}.cell--last-col{box-shadow:inset 0 calc(var(--line-hair) * -1) 0 var(--seam)}.cell--last-row{box-shadow:inset calc(var(--line-hair) * -1) 0 0 var(--seam)}.cell--last-col.cell--last-row{box-shadow:none}.cell--peer{background-color:var(--pen-wash)}.cell--same-digit{background-color:var(--pen-echo)}.cell--wrong{background-color:var(--red-wash)}.cell--selected{background-color:var(--marker)}.cell__value{animation:pen-down var(--duration-slow) var(--ease-pop)}.cell--given .cell__value{color:var(--pencil)}.cell--entered .cell__value{color:var(--pen)}.cell--wrong .cell__value{color:var(--red);text-decoration:line-through;text-decoration-thickness:var(--line-bold)}.cell--selected .cell__value,.cell--selected .cell__notes{color:var(--marker-ink)}.cell--wrong:after{content:"";bottom:calc(var(--cell-size) * .08);width:calc(var(--cell-size) * .1);height:calc(var(--cell-size) * .1);background-color:var(--red);border-radius:50%;position:absolute}.cell__notes{width:100%;height:100%;padding:calc(var(--cell-size) * .05);color:var(--pencil-faint);font-size:calc(var(--cell-size) * .36);grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:repeat(3,minmax(0,1fr));place-items:center;display:grid}@keyframes pen-down{0%{opacity:0;transform:translateY(-12%)scale(.86)}60%{opacity:1;transform:translateY(0)scale(1.06)}to{opacity:1;transform:none}}.cell__notes{animation:notes-in var(--duration-slow) var(--ease)}@keyframes notes-in{0%{opacity:0}to{opacity:1}}.cell--cheer .cell__value,.cell--cheer .cell__notes{z-index:1;position:relative}.cell--cheer:before{content:"";pointer-events:none;animation-delay:calc(var(--cheer-order,0) * var(--cheer-stagger));animation-fill-mode:both;position:absolute;inset:0}.cell--cheer-unit:before{background-color:var(--marker);animation-name:cheer-sweep;animation-duration:var(--duration-cheer);animation-timing-function:var(--ease)}@keyframes cheer-sweep{0%{opacity:0;transform:scaleY(.2)}40%{opacity:.7;transform:scaleY(1)}to{opacity:0;transform:scaleY(1)}}.cell--cheer-error{animation:paper-shake var(--duration-slow) var(--ease)}@keyframes paper-shake{0%,to{transform:translate(0)}20%{transform:translate(-3px)}50%{transform:translate(3px)}80%{transform:translate(-2px)}}@media (width>=900px){.board{--board-size:min(52vw, 74vh, 560px)}}.controls{gap:var(--space-sm);flex-direction:column;width:min(92vw,520px);display:flex}.controls__group{gap:var(--space-sm);display:flex}.controls__action{min-height:48px;padding:var(--space-sm) var(--space-xs);border:1.5px solid var(--pencil);border-radius:var(--radius-hand);background-color:var(--card);color:var(--pencil);white-space:nowrap;transition:color var(--duration) var(--ease), background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);flex:1;place-items:center;font-size:18px;display:grid;position:relative}.controls__action:hover:not(:disabled){background-color:var(--sheet-deep)}.controls__action[aria-pressed=true]{border-color:var(--pen);background-color:var(--pen);color:var(--card)}.controls__action:disabled{color:var(--pencil-soft);opacity:.55;cursor:not-allowed}.controls__badge{border:1.5px solid var(--pen);border-radius:var(--radius-hand-sm);background-color:var(--card);min-width:19px;height:19px;color:var(--pen);place-items:center;padding:0 3px;font-size:13px;line-height:1;display:grid;position:absolute;top:4px;right:4px}.number-pad{justify-content:center;gap:var(--space-sm);flex-wrap:wrap;width:min(92vw,520px);display:flex}.number-pad__key{flex:0 0 calc((100% - var(--space-sm) * 4) / 5);border:1.5px solid var(--pencil);border-radius:var(--radius-hand);background-color:var(--card);min-height:48px;transition:background-color var(--duration) var(--ease), opacity var(--duration) var(--ease);place-items:center;display:grid}.number-pad__key:hover:not(:disabled){background-color:var(--sheet-deep)}.number-pad__key:disabled{opacity:.5;cursor:not-allowed}.number-pad__digit{color:var(--pen);font-size:30px;line-height:1.15}.number-pad__key--done{background-color:#0000;border-style:dashed}.number-pad__key--done .number-pad__digit{color:var(--pencil-faint);text-decoration:line-through}.timer{align-items:center;gap:var(--space-sm);display:flex}.timer__value{min-width:4.6ch;color:var(--pencil);text-align:center;font-size:26px;display:inline-block}.timer__toggle{width:32px;height:32px;color:var(--pencil-soft);transition:color var(--duration) var(--ease);place-items:center;display:grid}.timer__toggle:hover:not(:disabled){color:var(--pencil)}.timer__toggle[aria-pressed=true]{color:var(--pen)}.timer__toggle:disabled{opacity:.4;cursor:not-allowed}@media (width<=420px){.controls__action{padding:var(--space-sm) 2px;font-size:16px}.number-pad__digit{font-size:26px}}@media (width>=900px){.controls,.number-pad{width:100%}.controls__group{grid-template-columns:1fr 1fr;display:grid}.controls__action{flex:none}.number-pad__key{flex:0 0 calc((100% - var(--space-sm) * 2) / 3);min-height:56px}.number-pad__digit{font-size:34px}}.dialog{z-index:10;padding:var(--space-md);background-color:color-mix(in srgb, var(--sheet-deep) 80%, transparent);animation:veil-in var(--duration) var(--ease);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.dialog__sheet{gap:var(--space-lg);width:min(92vw,440px);max-height:86vh;padding:var(--space-lg);border:1.5px solid var(--pencil);background-color:var(--card);box-shadow:0 12px 22px -16px var(--paper-shadow);border-radius:4px;flex-direction:column;display:flex;overflow-y:auto;transform:rotate(.4deg)}.dialog__header{justify-content:space-between;align-items:center;gap:var(--space-md);display:flex}.dialog__title{margin:0;font-size:30px;font-weight:700;line-height:1.1}.dialog__close{border:1.5px solid var(--pencil);border-radius:var(--radius-hand-sm);width:32px;height:32px;color:var(--pencil);transition:background-color var(--duration) var(--ease);flex:none;place-items:center;font-size:17px;line-height:1;display:grid}.dialog__close:hover{background-color:var(--sheet-deep)}@media (width<=420px){.dialog__sheet{gap:var(--space-md);padding:var(--space-md)}}.exit__message{color:var(--pencil);margin:0;font-size:18px;font-weight:400;line-height:1.6}.exit__actions{gap:var(--space-sm);display:flex}.exit__actions .controls__action{flex:1}.exit__actions .exit__leave{border-color:var(--red);color:var(--red)}.help__section{gap:var(--space-sm);flex-direction:column;display:flex}.help__heading{border-bottom:var(--line-bold) solid var(--marker);width:fit-content;color:var(--pen);margin:0;padding-bottom:1px;font-size:21px;font-weight:700;line-height:1.2}.help__list{gap:var(--space-xs);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.help__item{color:var(--pencil);margin:0;font-size:18px;font-weight:400;line-height:1.6}.help__list .help__item{gap:var(--space-sm);grid-template-columns:14px 1fr;display:grid}.help__list .help__item:before{content:"·";color:var(--red);font-weight:700}.help__keys{gap:var(--space-sm) var(--space-md);grid-template-columns:auto 1fr;align-items:center;margin:0;display:grid}.help__key{padding:2px var(--space-sm);border:1.5px solid var(--pencil);border-radius:var(--radius-hand-sm);color:var(--pencil);white-space:nowrap;justify-self:start;font-size:16px}.help__action{color:var(--pencil-soft);margin:0;font-size:17px;font-weight:400}@media (width<=420px){.help__keys{gap:var(--space-xs) var(--space-sm)}}.game{z-index:1;justify-content:center;align-items:center;gap:var(--space-md);padding:var(--space-lg) var(--space-md) var(--space-xl);flex-direction:column;flex:1;display:flex;position:relative}.game__header{align-items:center;gap:var(--space-sm);grid-template-columns:1fr auto 1fr;width:min(92vw,520px);display:grid}.game__status{align-items:baseline;gap:var(--space-sm);display:flex}.game__difficulty{color:var(--pen);font-size:22px}.game__tools{justify-self:end;gap:var(--space-sm);display:flex}.game__nav{width:40px;height:40px;color:var(--pencil-soft);transition:color var(--duration) var(--ease);place-items:center;display:grid}.game__nav:hover{color:var(--pen)}.game__board{position:relative}.veil{z-index:2;inset:calc(var(--space-sm) * -1);justify-content:center;align-items:center;gap:var(--space-sm);background-color:color-mix(in srgb, var(--sheet) 88%, transparent);animation:veil-in var(--duration) var(--ease);flex-direction:column;display:flex;position:absolute}.veil--pause{cursor:pointer}.veil .controls__action{padding-inline:var(--space-md);flex:none}.veil__actions{gap:var(--space-sm);margin-top:var(--space-xs);display:flex}.veil__text{color:var(--pencil-soft);margin:0;font-size:20px;font-weight:400}.veil__hint{color:var(--pencil-faint);font-size:17px;font-weight:400}.veil--done{background-color:color-mix(in srgb, var(--sheet) 82%, transparent)}.veil__circle{width:min(96%,460px);color:var(--red);opacity:.9;pointer-events:none;position:absolute}.veil__circle path{stroke-dasharray:1;stroke-dashoffset:1px;animation:circle-draw var(--duration-cheer) var(--ease) forwards}.veil__title{color:var(--red);margin:0;font-size:34px;line-height:1.1;position:relative}.veil--done .veil__title,.veil--done .veil__text,.veil--done .veil__actions{animation:veil-in var(--duration-slow) var(--ease) backwards;animation-delay:var(--duration-cheer)}.veil--done .veil__text{animation-delay:calc(var(--duration-cheer) + 80ms)}.veil--done .veil__actions{animation-delay:calc(var(--duration-cheer) + .16s)}@keyframes veil-in{0%{opacity:0}to{opacity:1}}@keyframes circle-draw{to{stroke-dashoffset:0}}@media (width<=420px){.game{gap:var(--space-sm);padding:var(--space-md) var(--space-sm) var(--space-lg)}.veil__title{font-size:28px}.veil__text{font-size:17px}}@media (width>=900px){.game{place-content:center;column-gap:var(--space-xl);row-gap:var(--space-lg);grid-template-columns:auto minmax(280px,340px);grid-template-areas:"board status""board controls""board pad";display:grid}.game__header{width:auto;padding-bottom:var(--space-sm);border-bottom:var(--line-bold) solid var(--pencil);grid-area:status}.game__board{grid-area:board;align-self:center}.controls{grid-area:controls}.number-pad{grid-area:pad}}.start{z-index:1;justify-content:center;align-items:center;gap:var(--space-lg);padding:var(--space-xl) var(--space-md);flex-direction:column;flex:1;display:flex;position:relative}.start__head{align-items:center;gap:var(--space-xs);text-align:center;flex-direction:column;display:flex}.start__title{margin:0;font-size:clamp(48px,15vw,68px);font-weight:700;line-height:1}.start__tagline{color:var(--pencil-soft);margin:0;font-size:20px;font-weight:400}.start__difficulties{gap:var(--space-sm);flex-direction:column;width:min(88vw,340px);display:flex}.start__difficulty{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border:1.5px solid var(--pencil);border-radius:var(--radius-hand);background-color:var(--card);text-align:left;transition:background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);grid-template-columns:auto 1fr auto;display:grid}.start__box{border:1.5px solid var(--pencil);border-radius:var(--radius-hand-sm);width:24px;height:24px;transition:background-color var(--duration) var(--ease)}.start__name{color:var(--pencil);font-size:24px;line-height:1.1}.start__hint{color:var(--pencil-faint);font-size:15px;font-weight:400}.start__difficulty:hover{background-color:var(--marker);border-color:var(--marker-ink)}.start__difficulty:hover .start__box{background-color:var(--card)}.start__difficulty:hover .start__hint{color:var(--marker-ink)}.settings{align-items:center;gap:var(--space-sm);flex-direction:column;width:min(88vw,340px);display:flex}.settings__row{justify-content:space-between;align-items:center;gap:var(--space-sm);width:100%;display:flex}.settings__label{color:var(--pencil-soft);font-size:17px;font-weight:400}.settings__options{gap:var(--space-xs);display:flex}.settings__option{padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-hand-sm);color:var(--pencil-soft);transition:color var(--duration) var(--ease), border-color var(--duration) var(--ease);border:1.5px solid #0000;font-size:17px;font-weight:400}.settings__option:hover{color:var(--pencil)}.settings__option[aria-pressed=true]{border-color:var(--pencil);background-color:var(--card);color:var(--pencil);font-weight:700}.settings__help{margin-top:var(--space-xs);padding:var(--space-xs);color:var(--pen);text-underline-offset:4px;font-size:19px;font-weight:400;text-decoration:underline}.settings__help:hover{color:var(--pencil)}@media (width<=420px){.start{gap:var(--space-md)}}