.board{aspect-ratio:1;-webkit-user-select:none;user-select:none;border-radius:6px;grid-template-columns:repeat(8,1fr);width:100%;display:grid;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}.square--last-move.square--light{background:#ced26b}.square--last-move.square--dark{background:#aba23a}.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{pointer-events:none;width:92%;height:92%}.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}.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}.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}: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}