.site-login.account-dialog,.account-dialog{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:32px 28px;border:1px solid var(--xb-line);border-radius:var(--xb-radius);color:var(--xb-ink);background:var(--xb-surface);box-shadow:var(--xb-shadow-card)}.account-dialog::backdrop{background:var(--xb-scrim)}.account-dialog .account-close{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--xb-radius);color:var(--xb-muted-strong);background:transparent}.account-dialog .account-close:hover{background:var(--xb-bg);color:var(--xb-ink)}.account-close svg{width:20px;height:20px}.account-dialog-mark{display:flex;align-items:center;justify-content:flex-start;width:48px;margin-bottom:16px}.account-dialog-mark svg{width:28px;height:28px}.account-dialog h2{margin:0 0 8px;font-family:var(--xb-font-serif);font-size:24px;font-weight:600;line-height:1.4}.account-dialog>.account-description{margin:0 0 24px;color:var(--xb-muted-strong);font-size:13px;line-height:1.8}.account-dialog .account-form{display:grid;gap:8px}.account-dialog label{color:var(--xb-ink);font-size:13px;font-weight:600}.account-dialog input,.account-dialog textarea{width:100%;min-width:0;height:44px;margin:0 0 8px;padding:11px 12px;border:1px solid var(--xb-line);border-radius:var(--xb-radius);background:var(--xb-surface);color:var(--xb-ink);font:inherit;font-size:14px;line-height:1.5}.account-dialog .account-type-choice{display:grid;gap:8px;min-width:0;margin:0 0 8px;padding:0;border:0}.account-dialog .account-type-choice legend{padding:0;margin-bottom:8px;color:var(--xb-ink);font-size:13px;font-weight:600}.account-dialog .account-type-choice label{display:flex;align-items:flex-start;font-size:14px;font-weight:400;line-height:1.5}.account-dialog .account-type-choice input{flex:none;width:auto;height:auto;margin:3px 8px 0 0;padding:0;border-radius:50%}.account-dialog .account-type-choice input:focus,.account-dialog .account-type-choice input:focus-visible{box-shadow:none;outline:2px solid var(--xb-ink);outline-offset:2px}.account-dialog .account-type-hint{color:var(--xb-muted-strong);font-size:12px}.account-dialog textarea{resize:vertical;height:auto;min-height:72px}.account-dialog input::placeholder,.account-dialog textarea::placeholder{color:var(--xb-muted-strong);font-size:12px}.account-dialog input:focus,.account-dialog textarea:focus{border-color:var(--xb-ink);outline:none;box-shadow:0 0 0 1px var(--xb-ink);background:var(--xb-surface)}.account-label-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.account-dialog .account-text-button{min-height:32px;padding:4px 0;border:0;color:var(--xb-ink);background:transparent;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:4px}.account-dialog .account-text-button:hover{opacity:.7}.account-dialog .account-signout-all .account-text-button{color:var(--xb-danger)}.account-dialog .account-submit{width:100%;margin-top:4px;min-height:46px;border:1px solid var(--xb-ink);border-radius:var(--xb-radius);background:var(--xb-ink);color:var(--xb-surface)}.account-dialog .account-submit:hover{background:var(--xb-ink);opacity:.88}.account-dialog-footer{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;padding-top:16px;border-top:1px solid var(--xb-line);color:var(--xb-muted-strong);font-size:13px}.account-optional{margin-left:5px;color:var(--xb-muted-strong);font-size:12px;font-weight:400}.account-dialog .account-info{margin:0 0 4px;padding:10px 12px;border-radius:var(--xb-radius);background:var(--xb-bg);color:var(--xb-ink);font-size:12px;line-height:1.7}.account-dialog .account-message{margin:14px 0 0;padding:10px 12px;border-radius:var(--xb-radius);background:var(--xb-bg);color:var(--xb-ink);font-size:13px;overflow-wrap:anywhere}.account-dialog .account-message[data-error=true],.account-dialog #login-error:not([data-error=false]){border:1px solid var(--xb-danger);background:var(--xb-surface);color:var(--xb-danger)}.account-dialog .account-username{display:flex;gap:16px;margin:0 0 16px;font-size:13px;color:var(--xb-muted-strong);overflow-wrap:anywhere}.account-dialog h3{margin:0 0 8px;font-size:14px;font-weight:650}.account-dialog .account-signout-all{display:flex;align-items:center;justify-content:space-between;gap:12px}@media(max-width:640px){.site-login.account-dialog,.account-dialog{padding:24px 20px}.account-dialog-mark{margin-bottom:12px}}.cm-chessboard .board.input-enabled .square{cursor:pointer}.cm-chessboard .coordinates,.cm-chessboard .markers-layer,.cm-chessboard .pieces-layer,.cm-chessboard .markers-top-layer{pointer-events:none}.cm-chessboard.xb .board .square.white{fill:#f4f8ea}.cm-chessboard.xb .board .square.black{fill:#79bf92}.cm-chessboard.xb .board .border{fill:#79bf92;stroke-width:0}.cm-chessboard-draggable-piece{z-index:40}.xb-board{--coord: 26px;position:relative;display:grid;grid-template-columns:var(--coord) minmax(0,1fr);grid-template-rows:auto var(--coord);width:100%;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.xb-board-grid{grid-column:2;grid-row:1;min-width:0;border-radius:8px;overflow:hidden;box-shadow:0 0 0 4px var(--green-deep)}.xb-board-grid>div{display:block}.xb-board-ranks{grid-column:1;grid-row:1;display:grid;grid-template-rows:repeat(8,1fr);padding-right:6px}.xb-board-files{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(8,1fr);padding-top:4px}.xb-board-corner{grid-column:1;grid-row:2}.xb-board-ranks span,.xb-board-files span{display:flex;align-items:center;justify-content:center;color:var(--navy-soft);font-size:18px;font-weight:800;line-height:1}.xb-mark-last rect{fill:var(--sun);opacity:.5}.xb-mark-selected rect{fill:var(--sky);opacity:.45}.xb-mark-warn rect{fill:var(--coral);opacity:.6}.xb-mark-hint-from>rect:first-child,.xb-mark-hint-to>rect{fill:var(--purple);opacity:.35}.xb-mark-ring{fill:none;stroke:var(--purple-deep);stroke-width:3}.xb-mark-dot circle{fill:var(--navy);opacity:.38}.xb-mark-capture circle{fill:none;stroke:var(--navy);stroke-width:3.5;opacity:.38}.xb-mark-target path{fill:var(--sun);stroke:#2a1a12;stroke-width:1.6;stroke-linejoin:round}.xb-mark-done circle{fill:var(--green-deep);stroke:#fff;stroke-width:1.4}.xb-mark-done .xb-mark-tick{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.xb-mark-tap circle{fill:#5b6b822e;stroke:var(--navy-soft);stroke-width:3}.xb-mark-wobble{transform-box:fill-box;transform-origin:center;animation:xb-wobble .5s ease-in-out}@keyframes xb-wobble{20%{transform:translate(-3px) rotate(-6deg)}40%{transform:translate(3px) rotate(6deg)}60%{transform:translate(-2px) rotate(-3deg)}80%{transform:translate(2px)}}@media(prefers-reduced-motion:reduce){.xb-mark-wobble{animation:none}}.xb-promotion{position:absolute;z-index:5;top:0;right:0;bottom:var(--coord);left:var(--coord);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;border-radius:8px;background:#ffffff9e}.xb-promotion-choices{display:grid;grid-template-columns:repeat(4,auto);gap:12px}.xb-promotion-choices button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:92px;min-height:112px;border:3px solid var(--sky);border-radius:22px;background:#fff;color:var(--navy);font-size:22px;font-weight:800;box-shadow:0 5px 0 var(--sky-deep)}.xb-promotion-choices button:active{transform:translateY(3px);box-shadow:0 2px 0 var(--sky-deep)}.xb-promotion-choices svg{width:68px;height:68px}.xb-promotion-cancel{min-height:52px;padding:0 26px;border:2px solid var(--cloud-line);border-radius:999px;background:#fff;color:var(--navy-soft);font-size:18px;font-weight:700}.quiet-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 26px;border:2px solid var(--cloud-line);border-radius:999px;background:#fff;color:var(--navy);font-size:19px;font-weight:700;text-decoration:none}.speaker.speaker-row{flex-direction:row;align-items:center;gap:18px}.speaker-row .mascot-stage{width:96px}.speaker-row .bubble{text-align:left}.speaker-row .bubble:before{top:50%;left:-11px;margin:-9px 0 0;border:0;border-bottom:2px solid var(--cloud-line);border-left:2px solid var(--cloud-line)}.opponent-level{display:inline-flex;gap:3px}.opponent-level i{width:8px;height:8px;border-radius:50%;background:var(--sun);box-shadow:inset 0 0 0 1.5px #d9a514}.avatar{display:block}.page.opponents{gap:18px}.opponent-picker{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}.resume-ask{display:flex;flex-direction:column;align-items:center;gap:22px;min-height:calc(100vh - 136px);min-height:calc(100dvh - 136px);justify-content:center}.resume-actions,.result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}.color-choice button{display:inline-flex;align-items:center;gap:8px;min-width:96px}.color-swatch{width:22px;height:22px;border:2px solid var(--navy);border-radius:50%}.color-swatch-white{background:#fff}.color-swatch-black{background:var(--navy)}.color-choice button[aria-pressed=true] .color-swatch{border-color:#fff}.opponent-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;width:100%;max-width:980px;margin:0;padding:0;list-style:none}.opponent-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;min-height:176px;padding:14px 8px;border:3px solid var(--cloud-line);border-radius:26px;background:var(--cloud);color:var(--navy)}.opponent-card:active{transform:translateY(3px)}.opponent-card.is-recommended{border-color:var(--orange);background:#fff6ec;box-shadow:0 5px 0 var(--orange-deep)}.opponent-card:disabled{opacity:.6}.opponent-avatar{width:96px;height:96px}.opponent-name{font-size:22px;font-weight:800}.recommend-tag{position:absolute;top:-12px;right:10px;padding:2px 12px;border-radius:999px;background:var(--sun);color:var(--navy);font-size:16px;font-weight:800}.badge-won{position:absolute;top:8px;left:10px;color:var(--sun)}.badge-won .icon{width:28px;height:28px}.page.play{display:grid;grid-template-columns:min(calc(100vh - 108px),60%) minmax(0,1fr);grid-template-columns:min(calc(100dvh - 108px),60%) minmax(0,1fr);grid-template-areas:"board strip" "board side";grid-template-rows:auto 1fr;align-items:start;gap:18px 32px;padding-top:0}.play-main{display:contents}.board-host{grid-area:board;width:100%;min-width:0}.opponent-strip{grid-area:strip;display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 16px 6px 6px;border-radius:999px;background:var(--cloud)}.strip-avatar{width:52px;height:52px}.strip-name{font-size:22px;font-weight:800}.practice-tag{margin-left:auto;padding:4px 12px;border-radius:999px;background:#efeafd;color:var(--purple-deep);font-size:16px;font-weight:800}.play-side{grid-area:side;display:flex;flex-direction:column;align-items:stretch;gap:18px;min-width:0}.speaker.play-speaker{align-self:center;flex-direction:column}.play-speaker .mascot-stage{width:150px}.play-speaker .bubble{text-align:center}.play-speaker .bubble:before{top:-11px;left:50%;margin:0 0 0 -9px;border:0;border-top:2px solid var(--cloud-line);border-left:2px solid var(--cloud-line)}.play-actions{display:grid;grid-template-columns:1fr 1fr auto;gap:12px}.action-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:64px;padding:0 16px;border:0;border-radius:22px;color:#fff;font-size:21px;font-weight:800}.action-button .icon{width:28px;height:28px}.action-hint{background:var(--purple);box-shadow:0 5px 0 var(--purple-deep)}.action-undo{background:var(--sky-deep);box-shadow:0 5px 0 var(--sky-shade)}.action-more{width:64px;background:var(--cloud);color:var(--navy);box-shadow:0 5px 0 var(--cloud-line)}.action-button:active:not(:disabled){transform:translateY(3px);box-shadow:none}.action-button:disabled,.nudge-button:disabled{opacity:.5}.menu-wrap{position:relative}.play-menu{position:absolute;z-index:10;right:0;bottom:calc(100% + 10px);padding:8px;border-radius:20px;background:#fff;box-shadow:0 10px 30px #23324a38}.menu-item{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 22px;border:0;border-radius:14px;background:#fff1ef;color:#b63b2f;font-size:19px;font-weight:800;white-space:nowrap}.nudge-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:64px;border:0;border-radius:22px;background:var(--orange-deep);box-shadow:0 5px 0 var(--orange-shade);color:#fff;font-size:22px;font-weight:800}.nudge-button .icon{width:28px;height:28px}.play-dialog{position:fixed;z-index:30;inset:0;display:flex;align-items:center;justify-content:flex-end;padding:16px max(16px,calc((100vw - 1200px)/2 + 16px));background:#23324a2e}.play-dialog-card{display:flex;flex-direction:column;align-items:center;gap:16px;width:min(420px,100%);padding:24px 22px;border-radius:32px;background:#fff;box-shadow:0 20px 50px #23324a4d}.play-dialog-card .mascot-stage{width:120px}.dialog-answers{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}.play-stuck{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.play-stuck .quiet-button{display:inline-flex;align-items:center;gap:8px}.page.play-waiting{min-height:calc(100vh - 120px);min-height:calc(100dvh - 120px);justify-content:center;gap:22px}.page.result{min-height:calc(100vh - 120px);min-height:calc(100dvh - 120px);justify-content:center;gap:18px}.page-title.result-title{font-size:40px}.result-won .result-title{color:var(--orange-deep)}.result-faces{display:flex;align-items:center;gap:24px}.result-avatar{width:120px;height:120px}.result-gains{display:flex;flex-direction:column;align-items:center;gap:10px}.result-stars{display:flex;align-items:center;gap:4px;margin:0;color:var(--sun)}.result-stars .icon{width:44px;height:44px}.result-stars b{margin-left:8px;color:var(--navy);font-size:26px}.result-badge{display:flex;align-items:center;gap:10px;margin:0;padding:6px 18px 6px 6px;border-radius:999px;background:#fff6ec;font-size:19px;font-weight:800}.badge-avatar{width:48px;height:48px;padding:3px;border:3px solid var(--sun);border-radius:50%;background:#fff}.result-rating{display:flex;align-items:center;gap:8px;margin:0;padding:8px 20px;border-radius:999px;background:var(--cloud);font-size:19px}.result-rating .icon{color:var(--sky)}.result-rating b{font-size:24px;font-variant-numeric:tabular-nums}.result-note{margin:0;padding:8px 20px;border-radius:999px;background:#efeafd;color:var(--purple-deep);font-size:18px;font-weight:700;text-align:center}@media(max-width:760px){.xb-board{--coord: 18px}.xb-board-ranks{padding-right:3px}.xb-board-ranks span,.xb-board-files span{font-size:16px}.xb-promotion-choices{gap:8px}.xb-promotion-choices button{width:70px;min-height:92px;font-size:20px}.xb-promotion-choices svg{width:52px;height:52px}.speaker-row .mascot-stage{width:72px}.opponent-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.opponent-card{min-height:150px}.opponent-avatar{width:76px;height:76px}.color-choice{width:100%}.color-choice button{flex:1;min-width:0}.page.play{grid-template-columns:minmax(0,1fr);grid-template-areas:"strip" "board" "side";grid-template-rows:auto;gap:12px}.board-host{width:100%;min-width:0}.opponent-strip{min-height:52px}.strip-avatar{width:44px;height:44px}.speaker.play-speaker{flex-direction:row;align-self:stretch}.play-speaker .mascot-stage{width:64px}.play-speaker .bubble{flex:1;font-size:18px;text-align:left}.play-speaker .bubble:before{top:50%;left:-11px;margin:-9px 0 0;border:0;border-bottom:2px solid var(--cloud-line);border-left:2px solid var(--cloud-line)}.play-side{gap:12px}.play-dialog{align-items:flex-end;justify-content:center;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}.play-dialog-card{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:12px;padding:18px 16px}.play-dialog-card .mascot-stage{width:72px}.play-dialog-card .bubble{flex:1;font-size:18px}.play-dialog-card .bubble:before{display:none}.action-button{min-height:58px;font-size:19px}.action-more{width:58px}.result-faces{flex-direction:column;gap:10px}.result-avatar{width:96px;height:96px}.page-title.result-title{font-size:34px}}.page.map{gap:12px}.map-speaker{position:sticky;z-index:3;top:0;align-self:stretch;justify-content:center;padding:6px 0;background:#fff;box-shadow:0 8px 12px -10px #23324a40}.map-speaker .mascot-stage{width:84px}.map-path{position:relative;width:100%;max-width:640px}.map-road{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.map-road polyline{fill:none;stroke:var(--cloud-line);stroke-width:26px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.map-road .map-road-dash{stroke:#fff;stroke-width:4px;stroke-dasharray:2 14}.map-stops{position:relative;display:flex;flex-direction:column-reverse;margin:0;padding:0;list-style:none}.map-row{position:relative;height:140px}.map-stop{position:absolute;top:50%;left:var(--x);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;min-width:76px;padding:0;border:0;background:transparent;color:var(--navy);font:inherit;text-decoration:none}.map-dot{position:relative;display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--sky-deep);box-shadow:0 5px 0 var(--sky-shade);color:#fff}.map-number{font-size:30px;font-weight:800;line-height:1}.map-title{padding:1px 10px;border-radius:999px;background:#fff;font-size:18px;font-weight:800;white-space:nowrap}.map-stars{display:inline-flex;align-items:center;gap:3px;padding:0 10px;border-radius:999px;background:#fff6dc;color:var(--navy);font-size:16px}.map-stars .icon{width:18px;height:18px;color:var(--sun)}.map-badge{position:absolute;right:-6px;bottom:-4px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:3px solid #fff;border-radius:50%}.map-badge .icon{width:16px;height:16px}.map-lock{background:var(--navy-soft);color:#fff}.map-tick{background:var(--purple);color:#fff}.is-locked .map-dot{background:#d7dee7;box-shadow:0 5px #b9c3cf;color:var(--navy-soft)}.is-locked .map-title{color:var(--navy-soft)}.is-done .map-dot{background:var(--green-deep);box-shadow:0 5px 0 var(--green-shade)}.is-mastered .map-dot{background:var(--purple);box-shadow:0 5px 0 var(--purple-deep)}.is-next .map-dot{width:84px;height:84px;background:var(--orange-deep);box-shadow:0 5px 0 var(--orange-shade),0 0 0 8px #ffc93c73}.map-stop:active .map-dot{transform:translateY(3px)}@media(prefers-reduced-motion:no-preference){.is-next .map-dot{animation:map-pulse 1.6s ease-in-out infinite}}@keyframes map-pulse{50%{box-shadow:0 5px 0 var(--orange-shade),0 0 0 14px #ffc93c40}}.page.lesson{display:grid;grid-template-columns:min(calc(100vh - 110px),58%) minmax(0,1fr);grid-template-columns:min(calc(100dvh - 110px),58%) minmax(0,1fr);grid-template-areas:"board head" "board side";grid-template-rows:auto 1fr;align-items:start;gap:16px 32px;padding-top:0}.lesson-board{grid-area:board}.lesson .xb-board{--coord: 32px}.lesson .xb-board-ranks span,.lesson .xb-board-files span{font-size:22px;color:var(--navy)}.lesson .xb-board.is-tappable .xb-board-grid{cursor:pointer}.lesson-head{grid-area:head;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;min-width:0}.map-link{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 18px;border-radius:999px;background:var(--cloud);color:var(--navy);font-size:18px;font-weight:700;text-decoration:none}.map-link .icon{transform:scaleX(-1)}.lesson-title{margin:0;font-size:28px;font-weight:800}.lesson-dots{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}.lesson-dot{width:16px;height:16px;border-radius:50%;background:var(--cloud-line)}.lesson-dot.is-past{background:var(--green)}.lesson-dot.is-current{background:var(--orange);box-shadow:0 0 0 4px #ff8b3d40}.placement-count{color:var(--navy-soft);font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}.lesson-side{grid-area:side;display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0}.speaker.lesson-speaker{flex-direction:column}.lesson-speaker .mascot-stage{width:150px}.lesson-speaker .bubble{text-align:center}.lesson-speaker .bubble:before{top:-11px;left:50%;margin:0 0 0 -9px;border:0;border-top:2px solid var(--cloud-line);border-left:2px solid var(--cloud-line)}.replay-button .icon{color:var(--sky)}.lesson-done,.lesson-guided{display:flex;flex-direction:column;align-items:center;gap:14px}.task-stars{display:flex;gap:6px;margin:0}.task-star{color:var(--cloud-line)}.task-star .icon{width:52px;height:52px}.task-star.is-on{color:var(--sun)}.lesson-done .primary:disabled{opacity:.55}.guided-ask{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}.lesson.is-guided .lesson-board{display:none}.lesson.is-guided{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "side";justify-items:center}.lesson.is-guided .lesson-speaker .mascot-stage{width:190px}.lesson.is-done .replay-button{display:none}.lesson-celebrate{position:fixed;z-index:30;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:#23324a38}.celebrate-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;width:min(480px,100%);padding:28px 22px;border-radius:32px;background:#fff;box-shadow:0 20px 50px #23324a4d}.celebrate-stars{display:flex;align-items:center;gap:6px;margin:0;font-size:26px}.celebrate-stars .icon{width:40px;height:40px;color:var(--sun)}.celebrate-sparkles{position:absolute;inset:0;pointer-events:none}.celebrate-sparkles .icon{position:absolute;width:30px;height:30px;color:var(--sun)}.celebrate-sparkles .icon:nth-child(1){top:18px;left:22px}.celebrate-sparkles .icon:nth-child(2){top:40px;right:30px;color:var(--coral)}.celebrate-sparkles .icon:nth-child(3){bottom:90px;left:30px;color:var(--sky)}.celebrate-sparkles .icon:nth-child(4){bottom:110px;right:24px}.celebrate-sparkles .icon:nth-child(5){top:12px;left:50%;color:var(--green)}@media(prefers-reduced-motion:no-preference){.celebrate-sparkles .icon{animation:twinkle 1.2s ease-in-out infinite alternate}.celebrate-sparkles .icon:nth-child(2n){animation-delay:.5s}}@keyframes twinkle{0%{transform:scale(.7) rotate(-10deg);opacity:.6}to{transform:scale(1.15) rotate(10deg);opacity:1}}.page.placement-result{min-height:calc(100vh - 120px);min-height:calc(100dvh - 120px);justify-content:center;gap:18px}.placement-known{margin:0;font-size:26px;font-weight:800;text-align:center}.placement-known b{color:var(--orange-deep);font-size:34px}.placement-opponent{display:flex;align-items:center;gap:16px;padding:10px 26px 10px 10px;border-radius:999px;background:#fff6ec}.placement-opponent p{display:flex;flex-direction:column;margin:0}.placement-opponent span{color:var(--navy-soft);font-size:17px}.placement-opponent b{font-size:26px}.placement-avatar{width:84px;height:84px}.about{padding:14px 22px;border-radius:24px;background:var(--cloud)}.about h2{margin:0 0 2px;font-size:20px}.about p{margin:0;color:var(--navy-soft);font-size:16px}.about p+p{margin-top:6px}.about-url{overflow-wrap:anywhere}@media(max-width:760px){.map-speaker .mascot-stage{width:60px}.map-speaker .bubble{font-size:18px}.map-dot{width:64px;height:64px}.is-next .map-dot{width:74px;height:74px}.map-number{font-size:26px}.page.lesson{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "board" "side";grid-template-rows:auto;gap:12px}.lesson .xb-board{--coord: 22px}.lesson .xb-board-ranks span,.lesson .xb-board-files span{font-size:17px}.lesson-head{gap:8px 12px}.lesson-title{font-size:24px}.map-link span{display:none}.map-link{width:48px;padding:0;justify-content:center}.lesson-side{gap:12px}.speaker.lesson-speaker{flex-direction:row;align-self:stretch}.lesson-speaker .mascot-stage{width:64px}.lesson-speaker .bubble{flex:1;font-size:19px;text-align:left}.lesson-speaker .bubble:before{top:50%;left:-11px;margin:-9px 0 0;border:0;border-bottom:2px solid var(--cloud-line);border-left:2px solid var(--cloud-line)}.lesson.is-guided .speaker.lesson-speaker{flex-direction:column}.lesson.is-guided .lesson-speaker .mascot-stage{width:140px}.lesson.is-guided .lesson-speaker .bubble{text-align:center}.task-star .icon{width:44px;height:44px}.placement-known{font-size:22px}}.lesson-side button:disabled{opacity:.5}.has-listen .route{padding-bottom:96px}body:has(#listen:not([hidden])) .route{padding-bottom:96px}@media(min-width:761px){body:has(.page.lesson) .listen{left:auto;right:max(16px,calc((100vw - 1200px)/2 + 16px));transform:none}}:root{--sky: #3aa7f5;--sky-deep: #1f86d1;--green: #2cc28e;--green-deep: #1d9a6f;--orange: #ff8b3d;--orange-deep: #e06f22;--purple: #8a6cf6;--purple-deep: #6a4fd6;--sky-shade: #17679f;--green-shade: #137452;--orange-shade: #b4561a;--sun: #ffc93c;--coral: #ff6f61;--navy: #23324a;--navy-soft: #5b6b82;--cloud: #f3f7fb;--cloud-line: #e3eaf1;--round: 28px;background:#fff;color:var(--navy)}body{background:#fff;color:var(--navy);font-size:17px;line-height:1.5;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}:focus-visible{outline:3px solid var(--navy);outline-offset:3px}.app{max-width:1200px;margin:0 auto;padding:0 16px calc(24px + env(safe-area-inset-bottom))}.icon{flex:none;width:24px;height:24px}.mascot-stage{flex:none;width:120px}.mascot-stage .xb-mascot{width:100%;height:auto}.topbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;min-height:72px;padding-top:env(safe-area-inset-top)}.bar-side{display:flex;align-items:center;gap:10px;min-width:0}.bar-right{justify-content:flex-end}.account-button{min-width:0;max-width:240px;padding:0 16px 0 6px;border:0;font:inherit;font-size:17px;font-weight:600}.account-initial{display:inline-grid;flex:none;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;font-size:17px;font-weight:800}.account-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-card{width:min(420px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;margin:auto;padding:24px 22px 22px;border:0;border-radius:32px;background:#fff;color:var(--navy);box-shadow:0 20px 50px #23324a4d}.account-card[open]{display:flex;flex-direction:column;gap:16px}.account-card::backdrop{background:#23324a4d}.account-card-close{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:var(--cloud);color:var(--navy)}.account-card-head{display:flex;align-items:center;gap:14px;min-width:0;padding-right:56px}.account-card-avatar{display:grid;flex:none;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--navy);color:#fff;font-size:26px;font-weight:800}.account-card-who{min-width:0}.account-card-name{margin:0;overflow-wrap:anywhere;font-size:24px;font-weight:800;line-height:1.3}.account-card-user{margin:2px 0 0;color:var(--navy-soft);font-size:16px;overflow-wrap:anywhere}.account-card-note{margin:0;padding:12px 16px;border-radius:20px;background:var(--cloud);color:var(--navy);font-size:16px;line-height:1.6}.account-card-logout{min-height:56px;padding:0 24px;border:2px solid var(--navy);border-radius:999px;background:#fff;color:var(--navy);box-shadow:0 4px 0 var(--cloud-line);font:inherit;font-size:18px;font-weight:800}.account-card-logout:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 var(--cloud-line)}.account-card-logout:disabled{opacity:.5}.account-card-message{margin:0;padding:10px 16px;border-radius:16px;background:#fff1ef;color:#b63b2f;font-size:16px;font-weight:700;text-align:center}.brand-title{margin:0;font-family:var(--xb-font-serif);font-size:26px;font-weight:700;letter-spacing:.04em;color:var(--navy)}.bar-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:48px;min-height:48px;padding:0 16px;border-radius:999px;background:var(--cloud);color:var(--navy);font-size:17px;font-weight:600;text-decoration:none}.bar-button .icon{width:22px;height:22px}.bar-spacer{visibility:hidden;width:96px}.page{display:flex;flex-direction:column;align-items:center;gap:20px;padding:8px 0 24px}.page-title{display:flex;align-items:center;gap:10px;margin:0;font-size:30px;font-weight:800}.page-title .icon{width:30px;height:30px;color:var(--sky)}.speaker{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%}.speaker-big .mascot-stage{width:190px}.bubble{position:relative;max-width:min(560px,100%);margin:0;padding:14px 24px;border:2px solid var(--cloud-line);border-radius:24px;background:var(--cloud);color:var(--navy);font-size:22px;font-weight:700;text-align:center;overflow-wrap:anywhere}.bubble:before{content:"";position:absolute;top:-11px;left:50%;width:18px;height:18px;margin-left:-9px;transform:rotate(45deg);border-top:2px solid var(--cloud-line);border-left:2px solid var(--cloud-line);background:var(--cloud)}.primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 30px;border:0;border-radius:999px;background:var(--orange-deep);box-shadow:0 5px 0 var(--orange-shade);color:#fff;font-size:20px;font-weight:800;text-decoration:none}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 var(--orange-shade)}.note{min-height:1.5em;margin:0;color:var(--navy-soft);font-size:17px;text-align:center}.text-button{min-height:48px;padding:0 6px;border:0;background:transparent;color:var(--sky-deep);font-size:17px;font-weight:700;text-decoration:underline;text-underline-offset:4px}.home,.triage,.problem{min-height:calc(100vh - 120px);min-height:calc(100dvh - 120px);justify-content:center;align-content:center}.login{max-width:420px;margin:0 auto;padding-top:48px}.login .mascot-stage{width:140px}.login .brand-title{font-size:34px}.login-form{display:grid;gap:8px;width:100%}.login-form label{font-size:17px;font-weight:700}.login-form input{width:100%;min-height:54px;margin-bottom:8px;padding:0 16px;border:2px solid var(--cloud-line);border-radius:16px;background:#fff;color:var(--navy);font:inherit;font-size:18px}.login-form input:focus{border-color:var(--sky);outline:none}.login-form .primary{width:100%;margin-top:8px}.form-error,.form-note{margin:0;padding:10px 14px;border-radius:14px;font-size:17px}.form-error{background:#fff1ef;color:#b63b2f}.form-note{background:var(--cloud)}.login-foot{margin:0;color:var(--navy-soft);font-size:17px}.home{display:grid;grid-template-columns:1fr minmax(360px,1.25fr) 1fr;grid-template-areas:"learn hero play" "stats stats stats";align-items:center;gap:28px;padding-top:16px}.hero{grid-area:hero;display:flex;flex-direction:column;align-items:center;gap:18px;min-width:0}.suggest{display:inline-flex;align-items:center;justify-content:center;gap:10px;max-width:100%;min-height:64px;padding:10px 30px;border-radius:999px;background:var(--orange-deep);box-shadow:0 6px 0 var(--orange-shade);color:#fff;font-size:24px;font-weight:800;text-align:center;text-decoration:none}.suggest .icon{width:28px;height:28px}.suggest:active{transform:translateY(3px);box-shadow:0 3px 0 var(--orange-shade)}.suggest-detail{margin:-6px 0 0;color:var(--navy-soft);font-size:18px;text-align:center}.entry{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-width:0;height:300px;border-radius:36px;color:#fff;text-decoration:none}.entry .icon{width:104px;height:104px}.entry-label{font-size:36px;font-weight:800;letter-spacing:.08em}.entry-learn{grid-area:learn;background:var(--sky-deep);box-shadow:0 8px 0 var(--sky-shade)}.entry-play{grid-area:play;background:var(--green-deep);box-shadow:0 8px 0 var(--green-shade)}.entry:active{transform:translateY(4px);box-shadow:none}.stats{grid-area:stats;display:flex;justify-content:center;gap:16px;margin:0;padding:0;list-style:none}.stat{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 22px;border-radius:999px;background:var(--cloud)}.stat .icon{width:28px;height:28px}.stat-stars .icon{color:var(--sun)}.stat-rating .icon{color:var(--sky)}.stat-streak .icon{color:var(--coral)}.stat-value{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}.stat-name{color:var(--navy-soft);font-size:17px}.choices{display:flex;justify-content:center;gap:24px;width:100%}.choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;flex:0 1 260px;min-height:220px;border:0;border-radius:var(--round);color:#fff;font-size:30px;font-weight:800}.choice .icon{width:84px;height:84px}.choice-new{background:var(--sky-deep);box-shadow:0 7px 0 var(--sky-shade)}.choice-mover{background:var(--green-deep);box-shadow:0 7px 0 var(--green-shade)}.choice-player{background:var(--purple);box-shadow:0 7px 0 var(--purple-deep)}.choice:active{transform:translateY(4px);box-shadow:none}.settings{align-items:stretch;max-width:760px;margin:0 auto}.settings .page-title{align-self:center}.setting{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px;border-radius:24px;background:var(--cloud)}.setting h2{margin:0 0 2px;font-size:22px}.setting p{margin:0;color:var(--navy-soft);font-size:16px}.segmented{display:flex;flex:none;gap:6px;padding:5px;border-radius:999px;background:#fff;border:2px solid var(--cloud-line)}.segmented button{min-width:64px;min-height:48px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--navy);font-size:18px;font-weight:700}.segmented button[aria-pressed=true]{background:var(--sky-deep);color:#fff}.logout{align-self:center;min-height:52px;padding:0 28px;border:2px solid var(--cloud-line);border-radius:999px;background:#fff;color:var(--navy-soft);font-size:18px;font-weight:700}.listen{position:fixed;z-index:20;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%);display:inline-flex;align-items:center;gap:10px;min-height:60px;padding:0 28px;border:0;border-radius:999px;background:var(--navy);color:#fff;font-size:20px;font-weight:800;white-space:nowrap;box-shadow:0 10px 28px #23324a47}.listen .icon{width:28px;height:28px;color:var(--sun)}.busy{position:fixed;z-index:20;top:calc(12px + env(safe-area-inset-top));left:50%;transform:translate(-50%);max-width:calc(100vw - 32px);margin:0;padding:12px 22px;border-radius:999px;background:var(--sun);color:var(--navy);font-size:18px;font-weight:700;text-align:center}.account-dialog>.account-description,.account-dialog label,.account-dialog input,.account-dialog textarea,.account-dialog .account-type-choice legend,.account-dialog .account-type-choice label,.account-dialog .account-type-hint,.account-dialog .account-info,.account-dialog .account-message,.account-dialog-footer,.account-dialog .account-text-button,.account-dialog input::placeholder,.account-dialog textarea::placeholder,.account-dialog .account-username{font-size:16px}.account-dialog .account-text-button{min-height:44px}@supports not (height: 100dvh){.account-dialog{max-height:calc(100vh - 32px)}}@media(max-width:760px){.topbar{min-height:64px}.brand-title{font-size:22px}.bar-button span{display:none}.bar-button{padding:0}.bar-spacer{width:48px}.account-button{width:48px;padding:0}.account-button .account-name{display:none}.account-button .account-initial{display:inline-grid}.account-initial{width:48px;height:48px;background:var(--cloud);color:var(--navy);font-size:20px}.speaker-big .mascot-stage{width:140px}.bubble{font-size:20px;padding:12px 18px}.home{grid-template-columns:1fr 1fr;grid-template-areas:"hero hero" "learn play" "stats stats";gap:16px;padding-top:4px}.suggest{font-size:21px;min-height:60px;padding:8px 24px}.entry{height:150px;border-radius:28px;gap:8px}.entry .icon{width:64px;height:64px}.entry-label{font-size:28px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat{flex-direction:column;gap:0;padding:10px 4px;border-radius:20px;text-align:center}.stat .icon{width:24px;height:24px}.stat-value{font-size:22px}.stat-name{font-size:16px}.choices{flex-direction:column;gap:14px}.choice{flex:none;flex-direction:row;justify-content:flex-start;gap:18px;min-height:96px;padding:0 28px;font-size:26px}.choice .icon{width:56px;height:56px}.setting{flex-direction:column;align-items:stretch;gap:12px;padding:16px}.segmented button{flex:1}.login{padding-top:24px}}