.sdk{--sd-paper: #F7F4EE;--sd-hint: #b8860b;--sd-hover: #33249a;--sd-hover-given: #1b1626;--sd-paper-given: #EDE8DE;--sd-rule: #C9C1B3;--sd-rule-box: #3B3152;--sd-ink: #1B1626;--sd-entry: #33249A;--sd-note: #453E5A;--sd-bad: #B5113F;--sd-bad-fill: #FBD9E4;--sd-peer: #E2DAF4;--sd-same: #C6B9F0;--sd-sel: #B5A5EE;--sd-hint: #FFC145;--sd-win: #C6FF4A;--sd-ease-out: cubic-bezier(.2,.8,.3,1);--sd-ease-back: cubic-bezier(.2,.8,.3,1.3);--sd-chip: rgb(0 0 0 / .3);--sd-line: rgb(255 255 255 / .2);--sd-board: 320px;--sd-gap: clamp(var(--sp-1),1.3cqi,var(--sp-3));display:flex;flex-direction:column;align-items:stretch;gap:var(--sd-gap);padding:clamp(var(--sp-2),1.6cqi,var(--sp-4));inline-size:100%;position:relative;color:#fff;font:500 15px/1.3 inherit;font-family:inherit;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.sdk__bar{display:grid;grid-template-columns:auto auto minmax(5.5rem,1fr) auto;align-items:center;gap:var(--sp-1)}.sdk__stat{display:flex;flex-direction:column;justify-content:center;min-height:44px;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);background:var(--sd-chip);box-shadow:var(--e-sink)}.sdk__stat span{font-size:var(--fs-1);letter-spacing:.07em;text-transform:uppercase;opacity:.66;font-weight:700}.sdk__stat b{font-size:var(--fs-3);font-variant-numeric:tabular-nums;font-weight:800;line-height:1.15}.sdk__stat.is-marked b{color:#ff9ec4}.sdk__level{display:flex;align-items:center;min-width:0}.sdk__level .sdk__chip{flex:1 1 0;min-width:0;white-space:normal}@container (max-width: 20rem){.sdk__bar{grid-template-columns:auto auto minmax(0,1fr)}.sdk__level{grid-column:1 / -1;flex-wrap:wrap;gap:var(--sp-1)}}.sdk__seg{min-height:50px}.sdk__seg .gk-seg__opt{min-height:44px}.sdk__chip{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-2) var(--sp-2);border-radius:var(--r-chip);background:color-mix(in srgb,var(--cat-board) 16%,transparent);color:var(--sd-hint);font-weight:800;font-size:var(--fs-1);white-space:nowrap}.sdk__btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:44px;min-width:44px;padding:0 var(--sp-2);border-width:1px;border-style:solid;border-color:var(--sd-line);border-radius:var(--r-sm);background:var(--wash-3);color:#fff;font:inherit;font-weight:700;font-size:var(--fs-1);cursor:pointer;white-space:nowrap;transition:background-color .11s,transform .11s var(--sd-ease-out),border-color .11s}.sdk__btn:hover:not(:disabled){background:var(--wash-4)}.sdk__btn:disabled{opacity:.38;cursor:default}.sdk__btn.is-press:not(:disabled){background:var(--wash-5);border-color:#fff;transform:scale(.94);transition-duration:0s}.sdk__btn[aria-pressed=true]{background:var(--sd-hint);border-color:var(--sd-hint);color:#12101c}.sdk__btn[aria-pressed=true].is-press{background:#ffd37a}.sdk__btn:focus-visible,.sdk__key:focus-visible{outline:3px solid var(--sd-win);outline-offset:-3px}.sdk__cell:focus-visible{outline:none}.sdk__btn svg{flex:none}.sdk__btn.is-confirm{background:color-mix(in srgb,var(--cat-board) 26%,transparent);border-color:var(--sd-hint);color:var(--sd-hint)}.sdk__main{display:flex;flex-direction:column;align-items:center;gap:var(--sd-gap);min-width:0}.sdk__side{display:flex;flex-direction:column;gap:var(--sp-1);width:100%;min-width:0}.sdk__board{--sd-rule-w: max(1px, .3cqi);--sd-box-w: max(2px, .85cqi);inline-size:var(--sd-board);block-size:var(--sd-board);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:var(--sd-box-w);padding:var(--sd-box-w);border-radius:clamp(var(--r-sm),2.4cqi,var(--r-md));background:var(--sd-rule-box);box-shadow:var(--e-2),0 0 0 1px var(--scrim-3);overflow:hidden;container-type:inline-size;touch-action:manipulation}.sdk__box{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:var(--sd-rule-w);background:var(--sd-rule);min-width:0;min-height:0}.sdk__cell{all:unset;box-sizing:border-box;display:grid;place-items:center;min-width:0;min-height:0;background:var(--sd-paper);color:var(--sd-entry);font-weight:650;font-size:max(var(--fs-1),6cqi);font-variant-numeric:tabular-nums;line-height:1;cursor:pointer;position:relative;transition:background-color 90ms linear}.sdk__cell>b{display:block;font-weight:inherit}.sdk__cell.is-given{background:var(--sd-paper-given);color:var(--sd-ink);font-weight:800;cursor:default}.sdk__cell.is-peer{background:var(--sd-peer)}.sdk__cell.is-given.is-peer{background:#d8d0e8}.sdk__cell.is-same{background:var(--sd-same)}.sdk__cell.is-selected{background:var(--sd-sel);box-shadow:inset 0 0 0 max(2px,.6cqi) var(--sd-entry);z-index:2}.sdk__cell.is-wrong{background:var(--sd-bad-fill);color:var(--sd-bad)}.sdk__cell.is-wrong.is-selected{box-shadow:inset 0 0 0 max(2px,.6cqi) var(--sd-bad)}.sdk__cell.is-wrong:after{content:"";position:absolute;left:22%;right:22%;top:50%;height:max(1.5px,.4cqi);background:var(--sd-bad);border-radius:var(--r-sm);transform:translateY(-50%) rotate(-12deg)}.sdk__cell.is-hint{box-shadow:inset 0 0 0 max(2px,.6cqi) var(--sd-hint);background:#ffe9b0;z-index:3}@media(hover:hover)and (pointer:fine){.sdk__cell:hover:not(.is-selected){box-shadow:inset 0 0 0 max(2px,.5cqi) color-mix(in srgb,var(--sd-hover) 50%,transparent)}.sdk__cell.is-given:hover:not(.is-selected){box-shadow:inset 0 0 0 max(2px,.5cqi) color-mix(in srgb,var(--sd-hover-given) 35%,transparent)}}.sdk__cell.is-press:not(.is-selected){background:var(--sd-same);transition-duration:0s}.sdk__notes{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:100%;height:100%;padding:4%}.sdk__notes i{font-style:normal;font-size:max(var(--fs-1),2.75cqi);line-height:1;color:var(--sd-note);display:grid;place-items:center;font-weight:700}.sdk--notes .sdk__cell.is-selected{background:#f5d99a;box-shadow:inset 0 0 0 max(2px,.6cqi) var(--sd-hint)}.sdk__status{display:grid;place-items:center;margin:0;padding:var(--sp-1) var(--sp-2);min-height:calc(2.6em + 8px);border-radius:var(--r-sm);background:var(--scrim-1);text-align:center;font-size:var(--fs-1);font-weight:600;line-height:1.3;color:var(--wash-8)}.sdk__status>*{grid-area:1 / 1;max-width:100%}.sdk__msg{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.sdk__msg[hidden],.sdk__left[hidden]{display:none}.sdk__msg.is-warn{color:#ff9ec4}.sdk__msg.is-hint{color:var(--sd-hint)}.sdk__left{color:var(--wash-7);font-weight:700;letter-spacing:.02em}.sdk__keys{display:grid;grid-template-columns:repeat(9,1fr);gap:var(--sp-1)}.sdk__key{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--sd-keyh, 52px);border-radius:var(--r-sm);background:var(--sd-paper-given);color:var(--sd-ink);cursor:pointer;box-shadow:var(--e-1);transition:background-color 90ms linear,transform 90ms var(--sd-ease-out),box-shadow 90ms;position:relative}.sdk__key b{font-size:clamp(var(--fs-4),4.4cqi,var(--fs-5));font-weight:800;line-height:1}.sdk__key small{font-size:var(--fs-1);line-height:1;color:var(--sd-note);margin-top:3px;min-height:.6rem;font-weight:700}@media(hover:hover)and (pointer:fine){.sdk__key:hover:not(.is-done){background:#fffdf7}}.sdk__key.is-press{background:var(--sd-sel);transform:translateY(2px) scale(.95);box-shadow:0 0 0 var(--scrim-3);transition-duration:0s}.sdk__key.is-buzz{animation:sdk-shake .3s linear both;background:var(--sd-bad-fill);color:var(--sd-bad)}.sdk__key.is-done{background:var(--wash-3);color:var(--wash-7);box-shadow:none}.sdk__key.is-done small{color:var(--sd-win);font-size:var(--fs-1)}.sdk--notes .sdk__key{background:#f6e4be}.sdk--notes .sdk__key b{font-size:clamp(var(--fs-1),3.2cqi,var(--fs-3));align-self:flex-start;margin-left:22%}.sdk--notes .sdk__key.is-done{background:var(--wash-3)}.sdk__tools{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-1)}.sdk--done .sdk__keys,.sdk--done .sdk__tools{display:none}.sdk__tools .sdk__btn{flex-direction:column;gap:var(--sp-1);min-height:var(--sd-toolh, 46px);padding:0 var(--sp-1);font-size:var(--fs-1);letter-spacing:.01em}@container (min-width: 36rem){.sdk__main{flex-direction:row;align-items:stretch;justify-content:center;gap:clamp(var(--sp-3),2.2cqi,var(--sp-6))}.sdk__side{width:clamp(200px,27cqi,300px);max-width:none;flex:none}.sdk__status{min-height:calc(5.2em + 8px);flex:0 1 auto;overflow:hidden}.sdk__msg{-webkit-line-clamp:5}.sdk__side{gap:var(--sp-2)}.sdk__keys{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:clamp(var(--sp-1),1cqi,var(--sp-3));flex:2 1 auto}.sdk__key{min-height:0;min-width:0;border-radius:var(--r-md)}.sdk__key b{font-size:clamp(var(--fs-4),2.6cqi,var(--fs-6))}.sdk__key small{font-size:var(--fs-1);margin-top:5px}.sdk__tools{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:var(--sp-2);flex:1 1 auto}.sdk--done .sdk__keys{display:grid}.sdk--done .sdk__tools{display:grid;opacity:.5}.sdk__tools .sdk__btn{flex-direction:row;min-height:52px;font-size:var(--fs-1)}.sdk__bar{gap:var(--sp-2)}.sdk__stat{padding:var(--sp-1) var(--sp-3);min-width:4.6rem}}@container (max-aspect-ratio: 1/1){.sdk__main{flex-direction:column;align-items:center}.sdk__side{width:100%;flex:0 0 auto}.sdk__status{min-height:calc(2.6em + 8px);flex:0 0 auto}.sdk__msg{-webkit-line-clamp:2}.sdk__keys{grid-template-columns:repeat(9,1fr);grid-template-rows:none;flex:0 0 auto}.sdk__tools{grid-template-columns:repeat(4,1fr);grid-template-rows:none;flex:0 0 auto}}@keyframes sdk-land{0%{transform:scale(.4);opacity:.3}55%{transform:scale(1.22);opacity:1}to{transform:scale(1)}}@keyframes sdk-flash{0%{opacity:.85}to{opacity:0}}@keyframes sdk-shake{0%,to{transform:translate(0)}15%{transform:translate(-6px)}33%{transform:translate(6px)}52%{transform:translate(-4px)}70%{transform:translate(4px)}86%{transform:translate(-2px)}}@keyframes sdk-wave{0%{transform:scale(1)}45%{transform:scale(1.18)}to{transform:scale(1)}}@keyframes sdk-tick{0%{opacity:.45}to{opacity:0}}@keyframes sdk-rise{0%{transform:translateY(0)}45%{transform:translateY(-14%)}to{transform:translateY(0)}}.sdk__cell.is-land>b{animation:sdk-land .24s var(--sd-ease-back) both}.sdk__cell.is-land:before,.sdk__cell.is-wave:before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--sd-win);animation:sdk-flash .32s ease-out both}.sdk__cell.is-wave:before{animation-delay:var(--sd-d, 0ms)}.sdk__cell.is-note:before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--sd-hint);animation:sdk-tick .22s ease-out both}.sdk__cell.is-bad,.sdk__cell.is-deny{animation:sdk-shake .3s linear both;z-index:4}.sdk__cell.is-bad:before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--sd-bad);animation:sdk-flash .3s ease-out both}.sdk__cell.is-deny:before{content:"";position:absolute;inset:0;pointer-events:none;background:#9a8fa8;animation:sdk-flash .26s ease-out both}.sdk__cell.is-wave{animation:sdk-wave .32s var(--sd-ease-back) var(--sd-d, 0ms) both;z-index:3}.sdk__cell.is-rise{animation:sdk-rise .42s var(--sd-ease-back) var(--sd-d, 0ms) both;z-index:3}.sdk__board.is-won{box-shadow:var(--e-2),0 0 0 max(2px,.6cqi) var(--sd-win),0 0 40px color-mix(in srgb,var(--action) 50%,transparent)}@media(prefers-reduced-motion:reduce){.sdk__btn,.sdk__key,.sdk__cell{transition-duration:1ms}.sdk__cell.is-land>b,.sdk__cell.is-wave,.sdk__cell.is-rise{animation:none}.sdk__cell.is-bad,.sdk__cell.is-deny,.sdk__key.is-buzz{animation-duration:1ms}.sdk__cell.is-land:before,.sdk__cell.is-wave:before,.sdk__cell.is-note:before{animation-duration:.14s;animation-delay:0ms}.sdk__key.is-press{transform:none}}