.board{aspect-ratio:1;-webkit-user-select:none;user-select:none;border-radius:6px;grid-template-columns:repeat(8,1fr);width:100%;display:grid;position:relative;overflow:hidden;box-shadow:0 2px 12px #00000040;container-type:inline-size}.square{aspect-ratio:1;cursor:pointer;touch-action:manipulation;font:inherit;border:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex;position:relative}.square--light{background:#f0d9b5}.square--dark{background:#b58863}.board__arrow{z-index:3;pointer-events:none;color:#10264a;width:100%;height:100%;position:absolute;inset:0}.square--from.square--light,.square--to.square--light{background:#ccd6e8}.square--from.square--dark,.square--to.square--dark{background:#8b99b6}.square--correct.square--light{background:#9dcf8a}.square--correct.square--dark{background:#77ad63}.square--wrong.square--light{background:#e29a92}.square--wrong.square--dark{background:#c4756c}.square--selected{box-shadow:inset 0 0 0 max(2.5px,.5cqw) #3f7dd6}.square:focus-visible{outline:none;box-shadow:inset 0 0 0 max(2.5px,.5cqw) #1d4f9e}.piece{z-index:2;pointer-events:none;width:92%;height:92%;position:relative}.coord{pointer-events:none;font-size:clamp(7px,2.4cqw,13px);font-weight:600;line-height:1;position:absolute}.coord--rank{top:3%;left:5%}.coord--file{bottom:3%;right:5%}.square--light .coord{color:#b58863}.square--dark .coord{color:#f0d9b5}.square__dot{pointer-events:none;background:#1e5a3c66;border-radius:50%;width:32%;height:32%;margin:auto;position:absolute;inset:0}.square--dotted:has(.piece) .square__dot{background:0 0;border-radius:50%;width:100%;height:100%;box-shadow:inset 0 0 0 max(3px,.6cqw) #1e5a3c8c}.profile{flex-direction:column;gap:1rem;display:flex}.profile__status,.profile__empty{text-align:center;opacity:.75;padding:1.5rem 0}.profile__totals{gap:.75rem;display:flex}.profile__total{background:#80808012;border:1px solid #8080804d;border-radius:10px;flex-direction:column;flex:1;align-items:center;gap:.15rem;padding:.75rem .5rem;display:flex}.profile__total strong{font-size:1.4rem}.profile__total span{opacity:.75;font-size:.8rem}.profile h2{margin:.25rem 0 0;font-size:1.05rem}.profile__skills{flex-direction:column;gap:.9rem;margin:0;padding:0;list-style:none;display:flex}.profile__skill-head{justify-content:space-between;align-items:baseline;gap:.5rem;display:flex}.profile__skill-name{font-size:.95rem;font-weight:600}.profile__skill-area{text-transform:uppercase;letter-spacing:.04em;opacity:.6;font-size:.7rem;font-weight:500;display:block}.profile__skill-stats{align-items:center;gap:.35rem;font-weight:600;display:flex}.profile__trend--up{color:#4d8b3a}.profile__trend--down{color:#b3453b}.profile__trend--flat{opacity:.6}.profile__bar{background:#80808033;border-radius:4px;height:8px;margin-top:.3rem;overflow:hidden}.profile__bar-fill{background:#4d8b3a;border-radius:4px;height:100%}.profile__skill-detail{opacity:.7;font-size:.8rem}.profile__history{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.profile__history li{font-variant-numeric:tabular-nums;border-bottom:1px solid #80808026;justify-content:space-between;padding:.45rem 0;font-size:.9rem;display:flex}.profile__legend{opacity:.75;margin:-.25rem 0 .75rem;font-size:.8rem}.profile__mastery{flex-wrap:wrap;align-items:center;gap:.35rem;margin:.3rem 0 .15rem;font-size:.78rem;display:flex}.profile__ladder{gap:2px;display:inline-flex}.profile__step{background:#80808040;border-radius:2px;width:.5rem;height:.85rem}.profile__step--on{background:#3f7dd6}.profile__level{font-weight:600}.profile__level--4{color:#3d7a2c}.profile__next{opacity:.7}.daily{border:1px solid #80808040;border-radius:10px;margin-bottom:.9rem;padding:.6rem .75rem}.daily__head,.daily__foot{justify-content:space-between;align-items:center;gap:.6rem;display:flex}.daily__title{font-size:.9rem;font-weight:600}.daily__count{font-variant-numeric:tabular-nums;font-size:.9rem}.daily__bar{background:#80808033;border-radius:999px;height:8px;margin:.45rem 0;overflow:hidden}.daily__fill{background:#3f7dd6;border-radius:999px;height:100%;transition:width .22s ease-out}.daily__fill--done{background:#4f9c3a}.daily__streak{opacity:.85;font-size:.8rem}.daily__week{gap:.25rem;margin:0;padding:0;list-style:none;display:flex}.daily__day{opacity:.75;background:#8080802e;border-radius:50%;place-items:center;width:1.15rem;height:1.15rem;font-size:.65rem;font-weight:600;display:grid}.daily__day--done{color:#fff;opacity:1;background:#4f9c3a}.update-notice{color:inherit;opacity:.9;background:#8080801f;border-radius:8px;margin:0;padding:.4rem .7rem;font-size:.82rem}.update-notice--updated{color:#3d7a2c;background:#69ad5233;font-weight:600}.update-notice--downloading,.update-notice--applying{color:#96600f;background:#e0a0302e;font-weight:600}.update-notice__version{font-variant-numeric:tabular-nums;font-weight:400}.update-notice--available{color:#1d4f9e;background:#3f7dd629;flex-wrap:wrap;align-items:center;gap:.5rem;font-weight:600;display:flex}.update-notice__apply{color:inherit;font:inherit;cursor:pointer;background:0 0;border:1px solid;border-radius:6px;padding:.25rem .6rem;font-size:.8rem}.setup__title{margin:.2rem 0 .6rem;font-size:1.05rem}.setup__subtitle{opacity:.75;margin:1rem 0 .4rem;font-size:.85rem;font-weight:600}.setup__picks,.setup__sizes{flex-direction:column;gap:.35rem;margin:0;padding:0;list-style:none;display:flex}.setup__sizes{flex-flow:wrap;gap:.5rem}.setup__pick{width:100%;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:1px solid #8080804d;border-radius:8px;justify-content:space-between;align-items:baseline;gap:.6rem;padding:.55rem .7rem;display:flex}.setup__pick--on{background:#3f7dd61f;border-color:#3f7dd6;font-weight:600}.setup__pick-detail{opacity:.7;white-space:nowrap;font-size:.75rem;font-weight:400}.setup__size{min-width:3.2rem;color:inherit;font:inherit;cursor:pointer;background:0 0;border:1px solid #8080804d;border-radius:8px;padding:.45rem .7rem}.setup__size--on{background:#3f7dd61f;border-color:#3f7dd6;font-weight:700}.setup__start{margin-top:1rem}.setup__note{opacity:.75;margin:.5rem 0 0;font-size:.8rem}.setup__pick-name{flex-direction:column;gap:.1rem;display:flex}.setup__pick-area{letter-spacing:.04em;text-transform:uppercase;opacity:.55;font-size:.62rem;font-weight:600}.session{flex-direction:column;gap:.75rem;display:flex}.session__status{text-align:center;opacity:.7}.session__meta{opacity:.75;justify-content:space-between;font-size:.85rem;display:flex}.session__timer{font-variant-numeric:tabular-nums}.session__prompt{margin:0;font-size:1.05rem;font-weight:600}.session__board{align-self:center;width:100%;max-width:min(85vw,62vh,520px)}.session__options{flex-direction:column;gap:.5rem;display:flex}.session__option{color:inherit;font:inherit;text-align:left;cursor:pointer;touch-action:manipulation;background:#8080801a;border:1px solid #80808080;border-radius:8px;padding:.6rem .9rem;font-size:.92rem}.session__option:hover:enabled{background:#80808033}.session__option:disabled{cursor:default;opacity:.85}.session__option--correct{background:#69ad5240;border-color:#4d8b3a}.session__option--wrong{background:#c4756c4d;border-color:#b3453b}.session__hint{opacity:.7;text-align:center;margin:0;font-size:.85rem}.session__feedback{border:1px solid;border-radius:8px;padding:.75rem 1rem}.session__feedback--ok{background:#69ad5226;border-color:#4d8b3a}.session__feedback--fail{background:#c4756c26;border-color:#b3453b}.session__feedback p{margin:.35rem 0 .75rem;font-size:.92rem}.session__action{color:inherit;font:inherit;cursor:pointer;touch-action:manipulation;background:#80808026;border:1px solid #80808080;border-radius:8px;align-self:flex-start;padding:.5rem 1rem;font-size:.9rem}.session__action:hover{background:#80808040}.session__score{margin:0;font-size:1rem}.session__attempts{flex-direction:column;gap:.25rem;margin:0;padding-left:1.25rem;font-size:.9rem;display:flex}.session__attempts .ok{color:#4d8b3a}.session__attempts .fail{color:#b3453b}.session__stats{align-items:center;gap:.75rem;display:flex}.session__streak{font-weight:600}.session__score strong{font-size:1.35rem}.session__substats{opacity:.75;margin:0;font-size:.85rem}.session__reinforcing{color:#a06510;background:#e0a03026;border-radius:6px;align-self:flex-start;margin:0;padding:.3rem .6rem;font-size:.8rem;font-weight:600}.session__actions{flex-wrap:wrap;gap:.5rem;display:flex}.session__action--secondary{color:inherit;background:0 0;border:1px solid #80808066;font-weight:500}.session__change{color:inherit;font:inherit;opacity:.65;cursor:pointer;background:0 0;border:none;padding:0;font-size:.75rem;text-decoration:underline}.app{flex-direction:column;gap:1rem;max-width:640px;margin:0 auto;padding:1rem 1rem 2.5rem;display:flex}.app__header h1{margin:0;font-size:1.5rem}.app__header p{opacity:.75;margin:.25rem 0 0;font-size:.9rem}.app__tabs{border-bottom:1px solid #8080804d;gap:.4rem;padding-bottom:.5rem;display:flex}.app__tab{color:inherit;font:inherit;cursor:pointer;opacity:.7;touch-action:manipulation;background:0 0;border:none;border-radius:6px;padding:.4rem .9rem;font-size:.9rem}.app__tab--active{opacity:1;background:#80808026;font-weight:600}.app__board{align-self:center;width:100%;max-width:min(85vw,78vh,600px)}.app__controls{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.app__fen{align-items:center;gap:.5rem;display:flex}.app__fen input{min-width:0;color:inherit;background:0 0;border:1px solid #80808080;border-radius:6px;flex:1;padding:.45rem .5rem;font-family:ui-monospace,monospace;font-size:.8rem}.app__controls button,.app__fen button{color:inherit;font:inherit;cursor:pointer;touch-action:manipulation;background:#8080801f;border:1px solid #80808080;border-radius:6px;padding:.45rem .9rem;font-size:.85rem}.app__controls button:hover,.app__fen button:hover{background:#80808038}.app__error{color:#c33c3c;margin:0;font-size:.85rem}.app__footer{opacity:.6;text-align:center;font-variant-numeric:tabular-nums;border-top:1px solid #80808033;margin-top:1.5rem;padding-top:.75rem;font-size:.75rem}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}body{min-height:100dvh;margin:0}main{padding:2rem}