@font-face{font-family:Inter;src:url(../assets/fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:Inter;src:url(../assets/fonts/inter-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}@font-face{font-family:Poppins;src:url(../assets/fonts/poppins-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#2f2f2f;background:#fefdfc;font-synthesis:none;--ink:#2f2f2f;--page-gutter:clamp(16px,3vw,64px)}*{box-sizing:border-box}body{margin:0}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit;color:inherit}button,a{touch-action:manipulation}button{border:0;cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #6f7fb8;outline-offset:3px}button:disabled{cursor:default}#app{height:100dvh;display:flex;flex-direction:column;gap:8px;padding-block:8px}.topbar,main,.page-footer{width:calc(100% - 2 * var(--page-gutter));max-width:1440px;margin-inline:auto;min-width:0}.topbar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px}.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}.brand img{display:block;width:38px;height:38px}.brand span{font-family:Poppins,Segoe UI,sans-serif;font-size:24px;font-weight:600;color:#7ea8c9;line-height:1.2}.tools{display:flex;align-items:center;gap:10px}.tools button,.tools a{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #dee2e3;border-radius:10px;background:#fff;padding:8px 14px;text-decoration:none;color:#2f2f2f;font-size:16px;font-weight:600;min-height:44px;white-space:nowrap}.tools a{background:#eef5ef;border-color:#deecdf}main{display:flex;flex-direction:column;container-type:inline-size;gap:10px;min-height:0;flex:0 1 auto}.activity-bar{flex-shrink:0;display:grid;grid-template-areas:"intro practice round";grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px;padding-block:4px}.intro{grid-area:intro}h1{font-family:Poppins,Segoe UI,sans-serif;font-size:30px;line-height:1.2;letter-spacing:-.6px;margin:0;font-weight:600}.instructions{font-size:16px;line-height:1.4;margin:4px 0 0;color:#596762}.settings{display:contents}.practice-controls{grid-area:practice;display:flex;align-items:center;gap:16px}.setting{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.setting>span,.setting>label{font-size:14px;line-height:1.3;color:#596762;font-weight:600;white-space:nowrap}.segments{display:flex;gap:2px;padding:2px;border:1px solid #dee2e3;border-radius:11px;background:#fff}.segments button{font-family:Poppins,sans-serif;font-weight:600;background:transparent;border-radius:8px;font-size:16px;min-width:60px;min-height:44px;padding:6px 10px;white-space:nowrap}.segments button[aria-pressed=true]{background:#dceaf4}.setting select{background:#fff;border:1px solid #dee2e3;padding:10px 28px 10px 12px;border-radius:10px;font-size:16px;min-height:50px;width:178px}.round-controls{grid-area:round;display:flex;align-items:center;gap:10px}.counter{display:flex;align-items:center;gap:10px;min-height:46px;padding:10px 12px;background:#f8f3cf;border:1px solid #f4edb6;border-radius:11px;white-space:nowrap}.counter span{font-size:14px;line-height:1.4;font-weight:600}#dots{display:flex;gap:5px}#dots i{height:10px;width:10px;border-radius:50%;background:#fff;border:1.5px solid #b89264}#dots i.done{background:#7faf8c;border-color:#7faf8c}.quiet{font-size:16px;background:#fefdfc;border:1px solid #dee2e3;border-radius:10px;font-weight:600;min-height:46px;padding:10px 12px;white-space:nowrap}.play-area{flex:0 1 auto;height:calc(5.2*min(96px,(100cqw - 26px) * .083) + 168px);position:relative;container-type:size;isolation:isolate;min-height:0;border-radius:22px;box-shadow:0 7px 25px #b8926410;border:1px solid #eee9de;background:#fefcf5;padding:10px 12px}#board-content{--block-size:min(96px,8.3cqw,calc((100cqh - 146px) / 5.2));--label-size:clamp(56px,6cqw,80px)}.rows{display:grid;gap:4px}.alphabet-row{display:grid;grid-template-columns:var(--label-size) repeat(7,minmax(0,1fr));align-items:center;justify-items:center;padding:6px 8px 16px;border-radius:15px;background:var(--wash);gap:8px}.row-label{font-size:clamp(16px,1.5cqw,18px);font-weight:600;line-height:1.3;color:#596762;white-space:nowrap}.color-0{--accent:#7ea8c9;--wash:#eef4f8}.color-1{--accent:#7faf8c;--wash:#eef5ef}.color-2{--accent:#dfa05a;--wash:#fbf5e9}.color-3{--accent:#9a86c7;--wash:#f3eff8}.block{position:relative;display:flex;align-items:center;justify-content:center;width:var(--block-size);height:var(--block-size);padding:0;flex-shrink:0;border:2px solid color-mix(in srgb,var(--accent) 70%,white);border-radius:clamp(10px,1.2cqw,15px);background:#fefcf5;box-shadow:0 7px 0 var(--accent),3px 11px #2f2f2f15,inset 0 3px #fff;color:#2f2f2f;font-family:Poppins,Segoe UI,sans-serif;font-weight:600;font-size:calc(var(--block-size) * .58);line-height:1;user-select:none;-webkit-user-select:none}[data-mode=paired] .block{font-size:calc(var(--block-size) * .42)}.block.empty{background:#fefdfcc9;border-color:#a9adb0;color:#8a8f94;box-shadow:none;font-size:calc(var(--block-size) * .44)}.block.drop-ready{outline:3px solid #6f7fb8;outline-offset:3px}.block.correct{outline:3px solid #7faf8c;outline-offset:3px}.block:focus-visible{outline:3px solid #6f7fb8;outline-offset:3px;z-index:2}.tray{position:relative;border-radius:18px;background:#eef4f8;border:1px solid #c7ddf0;margin-top:10px;height:calc(var(--block-size) * 1.2 + 36px)}.tray-label{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:var(--label-size);text-align:center;font-size:16px;font-weight:600;line-height:1.3;color:#596762}#loose-blocks{position:absolute;inset:0 8px 0 calc(var(--label-size) + 24px)}.loose{position:absolute;background:#fefdfc;transform:translate(-50%,-50%) rotate(var(--angle));touch-action:none;cursor:grab}.loose.selected{outline:3px solid #6f7fb8;outline-offset:3px;z-index:3}.loose.dragging{transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) rotate(0);z-index:10;pointer-events:none;cursor:grabbing}.loose.incorrect{outline:3px solid #c96a6a;outline-offset:3px;animation:shake .32s ease-in-out}.confetti{position:absolute;bottom:22%;font-size:20px;color:var(--accent);pointer-events:none;animation:celebrate 1.4s ease-out forwards;z-index:4}.finish{position:absolute;inset:auto 26% 5%;text-align:center;background:#fefdfc;border:2px solid #bfd9b5;box-shadow:0 10px 30px #2f2f2f12;border-radius:23px;padding:16px;z-index:5}.finish[hidden]{display:none}.finish h2{font-family:Poppins,sans-serif;font-size:26px;margin:0}.finish p{font-size:16px;line-height:1.4;margin:4px 0 12px}.finish-icon{font-size:26px;color:#dfa05a;line-height:1.1}.finish button{background:#deecdf;border:1px solid #7faf8c;border-radius:10px;padding:11px 22px;font-size:16px;font-weight:600;min-height:46px}.page-footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:24px}.play-hint{font-size:14px;color:#596762;line-height:1.4;margin:0}footer{text-align:center;font-size:14px;font-weight:600;line-height:1.4;color:#596762;white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes shake{0%,to{translate:0}25%,75%{translate:5px}50%{translate:-5px}}@keyframes celebrate{to{translate:var(--drift) -150px;rotate:100deg;opacity:0}}@media(max-width:1279px){.activity-bar{grid-template-areas:"intro round" "practice practice";grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding-block:0}.practice-controls{gap:24px}.setting{flex-direction:row;align-items:center;gap:10px}.setting select{min-height:46px}.segments{padding:0}h1{font-size:28px}.finish{inset-inline:18%}}@media(max-width:850px){:root{--page-gutter:16px}.activity-bar{gap:6px 12px}.round-controls{gap:8px}.counter{gap:8px;padding-inline:10px}.quiet{padding-inline:10px}.page-footer{gap:12px}.play-hint{max-width:560px}.brand span{font-size:22px}.tools{gap:8px}.tools button,.tools a{padding-inline:10px}}@media(max-height:700px){#app{gap:4px;padding-block:6px}main{gap:4px}.activity-bar{padding-block:0;row-gap:4px}.setting{gap:2px}.setting select{min-height:46px}.segments{padding:0}.instructions{line-height:1.3}}@media(max-height:560px){#app{gap:4px;padding-block:4px}main{gap:6px}.activity-bar{gap:4px 12px}.brand img{width:30px;height:30px}h1{font-size:24px}.instructions{margin-top:2px}.play-area{padding-block:8px}.page-footer{min-height:20px}}@media(max-height:560px)and (min-width:650px){#app{position:relative}.brand span{display:none}h1{position:absolute;top:12px;left:max(calc(var(--page-gutter) + 44px),calc((100% - 1440px)/2 + 44px))}.intro{align-self:center}.instructions{margin:0}}@media(max-width:650px){.brand span{font-size:18px}.brand{gap:6px}.tools button,.tools a{font-size:14px;padding-inline:8px}.activity-bar{grid-template-areas:"intro intro" "practice practice" "round round";grid-template-columns:1fr}.practice-controls{gap:12px;flex-wrap:wrap}.round-controls{justify-content:space-between}.page-footer{flex-wrap:wrap;gap:2px}.page-footer footer{width:100%}}:root{--control-height:50px}.tools button,.tools a,.segments,.setting select,.counter,.quiet{height:var(--control-height);min-height:var(--control-height)}.tools button,.tools a,.setting select,.counter,.quiet{padding-block:0}#sound{width:132px;flex:0 0 132px}@media(min-width:1280px){.practice-controls,.round-controls{align-self:end}}@media(max-width:1279px),(max-height:700px){:root{--control-height:46px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}.activity-bar{grid-template-areas:"intro practice";grid-template-columns:minmax(0,1fr) auto;align-items:end}.practice-controls{grid-area:practice;align-items:end}#letter-case{min-width:150px}#tray.tray{border:3px solid #afc8da}.tray-label{font-weight:600;color:#36566f}@media(max-width:999px){.activity-bar{grid-template-areas:"intro" "practice";grid-template-columns:1fr}.practice-controls{justify-self:start}}select{appearance:none!important;background-color:#f4f8fb!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23516f86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 13px center!important;border:1.5px solid #afc8da!important;border-radius:12px!important;padding-inline:15px 38px!important;color:#36566f!important;box-shadow:0 2px #dce7ef;font:600 16px Inter,sans-serif!important;cursor:pointer;transition:border-color .15s,background-color .15s}select:hover{border-color:#6e9bbd!important;background-color:#eaf2f8!important}select:focus-visible{outline:3px solid #385d86;outline-offset:3px}@supports (appearance:base-select){select,select::picker(select){appearance:base-select!important}select{background-image:none!important;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-inline:14px!important}select::picker-icon{content:"";width:8px;height:8px;border-right:2px solid #516f86;border-bottom:2px solid #516f86;transform:rotate(45deg);margin:0 3px 4px 8px;flex-shrink:0;transition:transform .15s}select:open::picker-icon{transform:rotate(225deg);margin-bottom:-3px}select::picker(select){margin-top:7px;padding:6px;border:1px solid #bfd1df;border-radius:14px;background:#fefdfc;box-shadow:0 10px 25px #294e6926;min-width:anchor-size(width);max-height:320px;overflow:auto;color:#36566f;font:600 16px Inter,sans-serif}select option{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 13px;border-radius:8px;background:transparent;color:#36566f}select option:hover,select option:focus{background:#eef4f8;outline:none}select option:checked{background:#dceaf4;color:#294c68}select option::checkmark{color:#527b9c;order:2;margin-left:auto}}@media(prefers-reduced-motion:reduce){select,select::picker-icon{transition:none}}:root{--game-control-height:48px;--game-control-ink:#36566f;--game-control-border:#afc8da}.game-ui-button{box-sizing:border-box!important;display:inline-flex!important;align-items:center;justify-content:center;gap:7px;height:var(--game-control-height)!important;min-height:var(--game-control-height)!important;padding:0 16px!important;border:1.5px solid var(--game-control-border)!important;border-radius:12px!important;background:#fefdfc!important;color:var(--game-control-ink)!important;font:600 16px Inter,sans-serif!important;line-height:1.2!important;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none!important}.game-ui-button:hover:not(:disabled){background:#eef4f8!important;border-color:#7ea8c9!important}.game-ui-button:focus-visible{outline:3px solid #385d86;outline-offset:3px}.game-ui-button:disabled{opacity:.5;cursor:default}#sound.game-ui-button{width:150px!important;min-width:150px!important;flex:0 0 150px!important}#print.game-ui-button{width:84px!important;min-width:84px!important;flex:0 0 84px!important;background:#eef5ef!important}#print.game-ui-button:hover{background:#deecdf!important}#sound .control-speaker{display:block;width:24px!important;height:24px!important;flex:0 0 24px;overflow:visible}.finish .game-ui-button,.game-ui-button.primary{background:#dceaf4!important}select{box-sizing:border-box;height:var(--game-control-height)!important;min-height:var(--game-control-height)!important;line-height:1.2!important}