.sg-wrap{box-sizing:border-box;aspect-ratio:1;width:100%;position:relative}sg-board{width:100%;height:100%;display:block;position:absolute;top:0;left:0}sg-board piece{z-index:3;pointer-events:none;will-change:auto;background-position:50%;background-repeat:no-repeat;background-size:cover;width:22.2222%;height:22.2222%;margin:-5.55556%;position:absolute;top:0;left:0;transform:scale(.5)}sg-squares,sg-pieces,sg-promotion{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;box-sizing:border-box;width:100%;height:100%;line-height:0;display:block;position:absolute;top:0;left:0}sg-pieces{cursor:pointer}sg-promotion{z-index:5;background-color:#0000003f}sg-promotion.active{pointer-events:auto;display:block}sg-promotion sg-promotion-square{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;width:11.1111%;height:11.1111%;position:absolute;top:0;left:0}sg-promotion sg-promotion-choices{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background-color:#2e2e2e;border-radius:10px;flex-direction:column;width:100%;height:200%;display:flex;box-shadow:3px 3px 7px #000a}sg-promotion sg-promotion-choices.reversed{flex-direction:column-reverse;margin:-109.091% 0}sg-promotion sg-promotion-choices piece{pointer-events:auto;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background-color:#2e2e2e;border-radius:10px;width:100%;height:50%;margin:0;transition:all .2s;display:block;position:relative;transform:scale(1)}sg-promotion sg-promotion-choices piece:hover{border-radius:0}sg-squares{pointer-events:none;background-size:cover;grid-template:repeat(9,1fr)/repeat(9,1fr);display:grid}sg-squares sq.dest{background:radial-gradient(#14551e80 22%,#208530 0,#0000004d 0,#0000 0)}sg-squares sq.pre-dest{background:radial-gradient(#141e5580 22%,#203085 0,#0000004d 0,#0000 0)}sg-squares sq.oc.dest{background:radial-gradient(#0000 0% 80%,#1455004d 80%)}sg-squares sq.oc.pre-dest{background:radial-gradient(#0000 0% 80%,#141e5533 80%)}sg-squares sq.last-dest.oc.dest{background:radial-gradient(#9bc70069 0% 80%,#1455004d 80%)}sg-squares sq.last-dest.oc.pre-dest{background:radial-gradient(#9bc70069 0% 80%,#141e5533 80%)}sg-squares sq.dest.hover,sg-squares sq.last-dest.oc.dest.hover{background:#14551e4d}sg-squares sq.pre-dest.hover,sg-squares sq.last-dest.oc.pre-dest.hover{background:#141e5533}sg-squares sq.last-dest{background-color:#9bc70069}sg-squares sq.check{background:radial-gradient(red 0%,#e70000 25%,#a9000000 89%,#9e000000 100%)}sg-squares sq.selected{background-color:#14551e80}sg-squares sq.preselected,sg-squares sq.current-pre{background-color:#141e5580}sg-pieces piece.anim{z-index:4}sg-pieces piece.fading{z-index:2;opacity:.5}sg-pieces piece.ghost{opacity:.3}piece.dragging{z-index:10}piece.dragging.touch{top:-50px}sg-square-over{will-change:transform;pointer-events:none;z-index:3;background:#00000050;border-radius:50%;width:11.1111%;height:11.1111%;margin:-6%;padding:6%;position:absolute;top:0;left:0}.sg-wrap sg-free-pieces,.sg-wrap .sg-shapes,.sg-wrap .sg-custom-svgs{pointer-events:none;z-index:4;width:100%;height:100%;position:absolute;top:0;left:0;overflow:visible}.sg-wrap sg-free-pieces{z-index:3}.sg-wrap sg-free-pieces piece{opacity:.6}.sg-wrap .sg-custom-svgs{z-index:9}.sg-wrap .sg-custom-svgs svg{overflow:visible}.sg-wrap coords{pointer-events:none;opacity:.8;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;font-size:9px;display:flex;position:absolute}.sg-wrap coords.ranks{text-transform:uppercase;flex-flow:column-reverse;width:12px;height:100%;top:0;right:-15px}.sg-wrap coords.ranks.gote{flex-flow:column}.sg-wrap coords.files{text-align:center;flex-flow:row;width:100%;height:12px;top:-12px;left:0}.sg-wrap coords.files.gote{flex-flow:row-reverse}.sg-wrap coords coord{flex:auto}.sg-wrap coords.ranks coord{transform:translateY(39%)}.sg-wrap .sg-shapes>g>g{opacity:.7}.sg-wrap .sg-shapes ellipse{fill:none}.sg-wrap .sg-shapes g.description ellipse{fill:#15781b}.sg-wrap .sg-shapes g.description text{fill:#fff;font-size:60%}.sg-wrap .sg-shapes g.current line{opacity:.9}.sg-wrap .sg-shapes g.outside line{opacity:.4}.sg-wrap .sg-shapes g.primary ellipse,.sg-wrap .sg-shapes g.primary line{stroke:#15781b}.sg-wrap .sg-shapes marker#arrowhead-primary path{fill:#15781b}.sg-wrap .sg-shapes g.alternative0 ellipse,.sg-wrap .sg-shapes g.alternative0 line{stroke:#882020}.sg-wrap .sg-shapes marker#arrowhead-alternative0 path{fill:#882020}.sg-wrap .sg-shapes g.alternative1 ellipse,.sg-wrap .sg-shapes g.alternative1 line{stroke:#003088}.sg-wrap .sg-shapes marker#arrowhead-alternative1 path{fill:#003088}.sg-wrap .sg-shapes g.alternative2 ellipse,.sg-wrap .sg-shapes g.alternative2 line{stroke:#e68f00}.sg-wrap .sg-shapes marker#arrowhead-alternative2 path{fill:#e68f00}.wrap--learn{max-width:1260px;min-height:100svh}.learn-island{margin:20px 0 8px}.learn{grid-template-columns:minmax(0,1fr);gap:20px;margin:20px 0 8px;display:grid}.learn__side{grid-area:side;min-width:0}.learn__main{grid-area:main;min-width:0}.learn__table{grid-area:table;min-width:0}.learn__map{grid-area:map;min-width:0}.learn--run{grid-template-areas:"main""table""side"}.learn--map{grid-template-areas:"side""map"}.learn--map .learn__main,.learn--map .learn__table,.learn--run .learn__map{display:none}@media (width>=860px){.learn--run{grid-template:"main table""main side"1fr/minmax(0,560px) minmax(260px,320px);align-items:start;column-gap:28px}.learn--map{grid-template-columns:240px minmax(0,1fr);grid-template-areas:"side map";align-items:start;column-gap:32px}}@media (width>=1180px){.learn--run{grid-template-columns:220px minmax(0,560px) minmax(260px,320px);grid-template-areas:"side main table"}}@media (width>=860px) and (width<=1179.98px){.learn--run .learn__table{margin-top:110px}}@media (width>=1180px){.learn--run :is(.learn__table,.learn__side){margin-top:62px}}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}.learn__board{touch-action:none;max-width:560px;padding:62px 20px 46px 6px;position:relative}@media (width<=600px){.learn__board{max-width:none;margin-inline:calc(-1 * var(--gutter));padding-left:2px;padding-right:15px}:is(.learn,.play) .sg-wrap coords.ranks{width:12px;right:-14px}}@media (width>=600.02px) and (width<=859.98px){:is(.learn--run,.play){--tab-board:clamp(420px, calc(100svh - 280px), 100%)}.play.tsume{--tab-board:clamp(420px, calc(100svh - 440px), 100%)}:is(.learn--run,.play) :is(.learn__board,.play__board){max-width:var(--tab-board);margin-inline:auto}.learn--run :is(.learn__table,.learn__side,.learn__back-narrow),.play__table{width:100%;max-width:var(--tab-board);margin-inline:auto}.learn--run .learn__coach{width:min(var(--tab-board), calc(100vw - 2 * var(--gutter)) + 20px);left:50%;right:auto;transform:translate(-50%)}}@media (width>=860px) and (hover:none) and (pointer:coarse){.learn--run{--bmax:clamp(560px, calc(100svh - 260px), 720px);grid-template-columns:minmax(0, var(--bmax)) minmax(260px, 320px)}.learn__board{max-width:var(--bmax,560px)}}@media (width>=1180px) and (hover:none) and (pointer:coarse){.learn--run{grid-template-columns:220px minmax(0, var(--bmax)) minmax(260px, 320px)}}.learn__sg.sg-wrap{border:2px solid var(--grid);box-shadow:var(--shadow-board);border-radius:2px}:is(.learn,.play) sg-squares{--dot:var(--grid) 2.5px, transparent 3px;background-color:var(--kaya);background-image:radial-gradient(circle at 33.333% 33.333%, var(--dot)), radial-gradient(circle at 66.667% 33.333%, var(--dot)), radial-gradient(circle at 33.333% 66.667%, var(--dot)), radial-gradient(circle at 66.667% 66.667%, var(--dot)), linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px);background-position:0 0,0 0,0 0,0 0,-1px -1px,-1px -1px;background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat,repeat;background-size:100% 100%,100% 100%,100% 100%,100% 100%,11.1111% 11.1111%,11.1111% 11.1111%}:is(.learn,.play) .sg-wrap coords{font:600 11px/1 var(--f-body);color:var(--muted);opacity:1}:is(.learn,.play) .sg-wrap coords.files{height:14px;top:-18px}:is(.learn,.play) .sg-wrap coords.ranks{width:14px;right:-17px}:is(.learn,.play) .sg-wrap coords.files coord{text-align:center}:is(.learn,.play) piece{--h:"";--l:"";--k:""}:is(.learn,.play) piece:before,:is(.learn,.play) piece:after{content:"";clip-path:polygon(50% 0,86% 16%,100% 100%,0 100%,14% 16%);position:absolute}:is(.learn,.play) piece:before{background:var(--piece-line);inset:4% 8% 3%}:is(.learn,.play) piece:after{background-color:var(--piece);background-image:var(--arrows,none);content:var(--h);color:var(--piece-ink);font:var(--fw-piece) clamp(13px, 4.4vw, 22px)/1 var(--f-piece);letter-spacing:-.5px;direction:rtl;unicode-bidi:isolate;background-repeat:no-repeat;background-size:100% 100%;justify-content:center;align-items:center;padding-top:16%;display:flex;inset:calc(4% + 1.5px) calc(8% + 1.5px) calc(3% + 1.5px)}:is(.learn,.play) sg-pieces piece:after,:is(.learn,.play) piece.dragging:after{font-size:clamp(26px,8.8vw,44px)}html[data-pieces=letters] :is(.learn,.play) piece:after{content:var(--l);font-family:var(--f-body);direction:ltr;font-weight:800}html[data-pieces=kanji] :is(.learn,.play) piece:after{content:var(--k);font-family:var(--f-kanji);font-weight:800}html[data-pieces=chess] :is(.learn,.play) piece:after{content:var(--c,var(--h));font-family:var(--f-chess), var(--f-piece)}html[data-pieces=chess] :is(.learn,.play) piece:is(.king,.rook,.bishop,.gold,.silver,.knight,.lance,.pawn):after{padding-top:10%;font-size:clamp(13px,4.2vw,21px)}html[data-pieces=chess] :is(.learn,.play) sg-pieces piece:is(.king,.rook,.bishop,.gold,.silver,.knight,.lance,.pawn):after{font-size:clamp(30px,10vw,50px)}html[data-pieces=chess] :is(.learn,.play) piece:is(.dragon,.horse,.promotedsilver,.promotedknight,.promotedlance,.tokin):after{letter-spacing:-.2em;font-size:clamp(11px,3.8vw,19px)}html[data-pieces=chess] :is(.learn,.play) sg-pieces piece:is(.dragon,.horse,.promotedsilver,.promotedknight,.promotedlance,.tokin):after{font-size:clamp(22px,7.6vw,38px)}html[data-pieces=hebrew] :is(.learn,.play) piece:is(.bishop,.promotedsilver,.promotedknight,.promotedlance,.tokin):after{font-size:clamp(11px,3.8vw,19px)}html[data-pieces=hebrew] :is(.learn,.play) sg-pieces piece:is(.bishop,.promotedsilver,.promotedknight,.promotedlance,.tokin):after{font-size:clamp(22px,7.6vw,38px)}html[data-pieces=hebrew] :is(.learn,.play) piece.king:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath fill='%231C1B19' d='M1 3.2 5.6 7 10 .8 14.4 7 19 3.2 17.2 11.2H2.8Z'/%3E%3C/svg%3E"), var(--arrows,none);background-position:50% 28%,50%;background-repeat:no-repeat;background-size:36%,100% 100%;padding-top:22%}:is(.learn,.play) piece{filter:drop-shadow(0 1px 1px #28190a66)}:is(.learn,.play) .orientation-sente piece.gote:before,:is(.learn,.play) .orientation-sente piece.gote:after,:is(.learn,.play) .orientation-gote piece.sente:before,:is(.learn,.play) .orientation-gote piece.sente:after{transform:rotate(180deg)}:is(.learn,.play) piece.gote:after{background-color:var(--piece-gote)}:is(.learn,.play) piece.king{--h:"מ";--l:"K";--k:"王"}:is(.learn,.play) piece.gote.king{--k:"玉"}:is(.learn,.play) piece.rook{--h:"צ";--l:"R";--k:"飛"}:is(.learn,.play) piece.bishop{--h:"רץ";--l:"B";--k:"角"}:is(.learn,.play) piece.gold{--h:"ז";--l:"G";--k:"金"}:is(.learn,.play) piece.silver{--h:"כ";--l:"S";--k:"銀"}:is(.learn,.play) piece.knight{--h:"פ";--l:"N";--k:"桂"}:is(.learn,.play) piece.lance{--h:"ר";--l:"L";--k:"香"}:is(.learn,.play) piece.pawn{--h:"ח";--l:"P";--k:"歩"}:is(.learn,.play) piece.dragon{--h:"ד";--l:"+R";--k:"龍"}:is(.learn,.play) piece.horse{--h:"ס";--l:"+B";--k:"馬"}:is(.learn,.play) piece.promotedsilver{--h:"כ+";--l:"+S";--k:"全"}:is(.learn,.play) piece.promotedknight{--h:"פ+";--l:"+N";--k:"圭"}:is(.learn,.play) piece.promotedlance{--h:"ר+";--l:"+L";--k:"杏"}:is(.learn,.play) piece.tokin{--h:"ח+";--l:"+P";--k:"と"}:is(.learn,.play) piece.king{--c:"♚︎"}:is(.learn,.play) piece.rook{--c:"♜︎"}:is(.learn,.play) piece.bishop{--c:"♝︎"}:is(.learn,.play) piece.knight{--c:"♞︎"}:is(.learn,.play) piece.pawn{--c:"♟︎"}:is(.learn,.play) piece.gold{--c:""}:is(.learn,.play) piece.silver{--c:""}:is(.learn,.play) piece.lance{--c:""}:is(.learn,.play) piece.promotedsilver{--c:"+"}:is(.learn,.play) piece.promotedlance{--c:"+"}:is(.learn,.play) piece.dragon{--c:"♜︎+"}:is(.learn,.play) piece.horse{--c:"♝︎+"}:is(.learn,.play) piece.promotedknight{--c:"♞︎+"}:is(.learn,.play) piece.tokin{--c:"♟︎+"}:is(.learn,.play) piece:is(.dragon,.horse,.promotedsilver,.promotedknight,.promotedlance,.tokin):after{color:var(--piece-seal)}:is(.learn,.play) sg-squares sq{position:relative}:is(.learn,.play) sg-squares sq.dest{background:radial-gradient(#1c1b1961 18%,#0000 20%)}:is(.learn,.play) sg-squares sq.oc.dest{background:radial-gradient(#0000 76%,#1c1b1959 78%)}:is(.learn,.play) sg-squares sq.dest.hover{background:#1c1b192e}:is(.learn,.play) sg-squares sq.last-dest{background-color:#b8361f29}:is(.learn,.play) sg-squares sq.selected{background-color:#2f6b2a59}:is(.learn,.play) sg-squares sq.check{background:radial-gradient(#b8361fe6 0%,#b8361f00 75%)}:is(.learn,.play) sg-squares sq.help{background-color:#2f6b2a38;box-shadow:inset 0 0 0 2px #2f6b2a8c}:is(.learn,.play) sg-squares sq.star:after{content:"★";color:var(--seal);justify-content:center;align-items:center;font-size:clamp(16px,5vw,28px);line-height:1;display:flex;position:absolute;inset:0}:is(.learn,.play) .sg-shapes g.green line{stroke:#2f6b2a}:is(.learn,.play) .sg-shapes marker#arrowhead-green path{fill:#2f6b2a}:is(.learn,.play) .sg-shapes g.red line{stroke:var(--seal)}:is(.learn,.play) .sg-shapes marker#arrowhead-red path{fill:var(--seal)}:is(.learn,.play) .sg-shapes g.green ellipse{stroke:#2f6b2a;stroke-width:1px;opacity:.8}:is(.learn,.play) .sg-shapes g.red ellipse{stroke:var(--seal);stroke-width:1px;opacity:.8}:is(.learn,.play) sg-promotion{background-color:#17150f59}:is(.learn,.play) sg-promotion sg-promotion-choices{background:var(--washi);border:2px solid var(--grid);border-radius:8px;box-shadow:0 8px 20px -8px #0009}:is(.learn,.play) sg-promotion sg-promotion-choices piece{background:var(--washi);border-radius:6px}:is(.learn,.play) sg-promotion sg-promotion-choices piece:hover{background:var(--washi-2)}:is(.learn,.play) .sg-hand-wrap{z-index:2;position:absolute;left:0;right:0}:is(.learn,.play) .sg-hand-wrap.hand-top{top:auto;bottom:calc(100% + 18px)}:is(.learn,.play) .sg-hand-wrap.hand-bottom{top:calc(100% + 4px);bottom:auto}:is(.learn,.play) sg-hand{gap:2px;height:40px;display:flex}:is(.learn,.play) sg-hand sg-hp-wrap{flex:0 40px;min-width:0;height:40px;position:relative}:is(.learn,.play) sg-hand sg-hp-wrap[data-nb="0"]{display:none}:is(.learn,.play) sg-hand piece{width:100%;height:100%;display:block;position:relative}:is(.learn,.play) sg-hand sg-hp-wrap:after{content:attr(data-nb);font:700 11px/1 var(--f-body);background:var(--ink);color:var(--washi);border-radius:3px;padding:2px 4px;position:absolute;top:0;right:0}.learn__sgbox{position:relative}.learn.no-coords .sg-wrap coords,.play.no-coords .sg-wrap coords{display:none}.learn__board:focus{outline:none}.learn__board:focus-visible .learn__sg.sg-wrap{outline:3px solid var(--focus);outline-offset:3px}.kbd-cursor{z-index:5;pointer-events:none;width:11.1111%;height:11.1111%;box-shadow:inset 0 0 0 3px var(--focus), inset 0 0 0 5px var(--washi);display:none;position:absolute}.learn__board:focus-visible .kbd-cursor{display:block}.learn__back-narrow{margin-bottom:4px}@media (width>=1180px){.learn__back-narrow{display:none}}.learn__phone-hint{background:var(--glass);border:1px solid var(--glass-edge);backdrop-filter:blur(10px);font:500 14.5px/1.5 var(--f-body);color:var(--ink);border-radius:12px;align-items:center;gap:8px;margin:2px 0 8px;padding:8px 12px;display:none;box-shadow:0 6px 18px -10px #28190a59}.learn__phone-hint .icon{color:var(--seal);flex-shrink:0}@media (width<=859.98px){.learn--run:not(.is-starting):not(.is-completed) .learn__phone-hint{display:flex}}.back-narrow{min-height:44px;color:var(--ink);align-items:center;gap:8px;font-weight:700;text-decoration:none;display:inline-flex}.back-narrow .stage-img{width:30px;height:30px;font-size:16px}.back-narrow:before{content:"→";font-size:18px}.learn__info{text-align:start;border:1.5px dashed var(--ink);background:var(--washi-2);width:calc(100% - 26px);color:var(--ink);font:600 16px/1.6 var(--f-body);cursor:pointer;border-radius:6px;margin:10px 20px 0 6px;padding:12px 16px;display:block}.learn__info:after{content:" ←";color:var(--seal)}.learn__overlay{z-index:20;background:var(--overlay-learn);backdrop-filter:blur(2px);cursor:pointer;direction:rtl;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.learn__overlay[hidden]{display:none}.learn__overlay .screen{text-align:center;cursor:default;max-width:400px;padding:20px}.learn__overlay .stage-img{width:72px;height:72px;margin:0 auto 8px;font-size:38px}.learn__overlay h2{margin:2px 0 10px}.learn__overlay p{color:var(--ink-2);margin:0 0 16px;line-height:1.7}.learn__overlay .buttons{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.learn__overlay .stars{margin-bottom:4px;font-size:38px;display:block}.learn__overlay .chess-note{text-align:start;border-inline-start:3px solid var(--seal);padding-inline-start:10px;font-size:15px}.learn__overlay .route-switch{margin-top:-8px}.learn__overlay .route-switch .linkish{color:var(--ink-2);font:inherit;cursor:pointer;background:0 0;border:0;padding:4px;text-decoration:underline}@media (width<=480px){.learn__overlay p{font-size:15px;line-height:1.55}.learn__overlay .stage-img{display:none}}.learn .stage-img{flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:inline-flex}.learn .piece-img piece{width:100%;height:100%;display:block;position:relative}.learn .piece-img piece:after{padding-top:18%;font-size:20px}.learn .seal-img{border:2px solid var(--seal);color:var(--seal);font:800 22px/1 var(--f-kanji);background:var(--washi);border-radius:8px}.learn__table .wrap{border:1.5px solid var(--ink);background:var(--washi);border-radius:6px;max-width:none;padding:0;overflow:hidden}.learn__table .title{background:var(--seal);color:var(--on-seal);text-align:center;padding:14px 18px 16px}.learn__table .title .eyebrow{color:inherit;opacity:.85;font-size:13px}.learn__table .title h1{color:inherit;margin:2px 0 4px;font-size:clamp(30px,5vw,40px)}.learn__table .title h1:focus{outline:none}.learn__table .title .subtitle{margin:0;font-size:16px;line-height:1.5}.learn__table .status{border-bottom:1px solid var(--rule);flex-direction:column;justify-content:center;min-height:120px;padding:16px 18px;display:flex}.learn__table .goal p{font:600 18px/1.6 var(--f-body);margin:0}.learn__table .goal .counter{font:500 14px var(--f-body);color:var(--muted);margin-top:8px}.learn__table .goal .seg{margin-top:12px}mark.learn-task{color:inherit;background:#b8361f24;background:color-mix(in srgb, var(--seal) 18%, transparent);border-bottom:2px solid var(--seal);-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:3px 3px 0 0;padding:0 .2em;font-weight:700}@media (forced-colors:active){mark.learn-task{color:marktext;background:mark}}.learn__table .result{border-radius:4px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;display:flex}.learn__table .result strong{font:800 22px/1.3 var(--f-display)}.learn__table .result .stars{font-size:26px}.learn__table .result.completed{background:var(--won-bg);color:var(--won-fg)}.learn__table .result.failed{background:var(--lost-bg);color:var(--lost-fg)}.learn__table .levels{padding:12px 18px 4px}.learn__table .lvl{color:var(--muted);margin:0 0 8px}.learn .progress{flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;list-style:none;display:flex}.learn .progress button{border:1px solid var(--rule);background:var(--washi-2);min-width:44px;min-height:44px;color:var(--ink);font:700 15px var(--f-body);cursor:pointer;border-radius:4px;padding:0 6px}.learn .progress button.active{border-color:var(--seal);box-shadow:inset 0 0 0 1.5px var(--seal);background:var(--washi)}.learn .progress button.done{background:var(--washi)}.learn .progress .stars{letter-spacing:-1px;font-size:11px}:is(.learn,.play) .stars .on{color:#c99a1e}:is(.learn,.play) .stars .off{color:var(--rule)}.learn__table .tools{border-top:1px solid var(--rule);display:flex}.learn__table .tool{min-height:48px;color:var(--ink);font:600 15px var(--f-body);cursor:pointer;background:0 0;border:0;flex:1;justify-content:center;align-items:center;gap:8px;display:inline-flex}.learn__table .tool+.tool{border-inline-start:1px solid var(--rule)}.learn__table .tool:hover{background:var(--washi-2)}:is(.learn,.play) .icon{display:inline-flex}.learn__side-map{user-select:none}.learn__side-map .back{background:var(--washi-2);min-height:52px;color:var(--ink);font:700 18px var(--f-body);border-radius:6px;align-items:center;gap:10px;padding-inline-end:12px;text-decoration:none;display:flex}.learn__side-map .back .stage-img{background:var(--ink);width:52px;height:52px;color:var(--washi);border:0;border-radius:0 6px 6px 0}.learn__side-map .back:hover{background:var(--rule)}.learn__side-map .categ{margin:8px 0}.learn__side-map .categ-head{text-align:start;background:var(--washi-2);width:100%;min-height:46px;color:var(--ink);font:700 17px var(--f-body);cursor:pointer;border:0;border-radius:6px;padding:0 14px;display:block}.learn__side-map .categ-head:hover{background:var(--rule)}.learn__side-map .categ.active .categ-head{background:var(--ink);color:var(--washi);cursor:default;border-radius:6px 6px 0 0}.learn__side-map .categ_stages{border:1px solid var(--rule);border-top:0;border-radius:0 0 6px 6px;margin:0 0 0 4%;padding:0;list-style:none;overflow:hidden}.learn__side-map .stage{border-inline-start:3px solid var(--rule);min-height:48px;color:var(--ink);align-items:center;gap:10px;padding:2px 8px;font-size:16px;text-decoration:none;display:flex}.learn__side-map .stage .stage-img{width:36px;height:36px;font-size:17px}.learn__side-map .stage .piece-img piece:after{font-size:16px}.learn__side-map .stage:hover{background:var(--washi-2)}.learn__side-map .stage.active{border-inline-start-color:var(--seal);background:var(--washi-2);font-weight:700}.learn__side-map .stage.done{border-inline-start-color:#3e7d37}@media (width>=860px) and (width<=1179px){.learn__side-map .back{display:none}}.learn__side-home{text-align:center;padding:8px 0}.learn__side-home .fat{background:var(--seal);width:96px;height:96px;color:var(--on-seal);font:800 56px/1 var(--f-kanji);border-radius:14px;justify-content:center;align-items:center;margin:0 auto 10px;display:flex}.learn__side-home h1{font-size:clamp(34px,6vw,44px)}.learn__side-home h1:focus{outline:none}.learn__side-home .by-playing{font:500 20px var(--f-display);color:var(--ink-2);margin:4px 0 16px}.learn__side-home .progress-bar{max-width:260px;margin:0 auto 12px}.learn__side-home .progress-bar .text{margin-bottom:6px;font-weight:700}.learn__side-home .track{background:var(--washi-2);border:1px solid var(--rule);border-radius:99px;height:10px;overflow:hidden}.learn__side-home .bar{background:#3e7d37;height:100%;transition:width .4s}@media (width>=860px){.learn__side-home{position:sticky;top:20px}}.learn__map .categ{margin:0 0 28px}.learn__map .categ>h2{border-bottom:2px solid var(--ink);margin:0 0 12px;padding-bottom:6px;font-size:26px}.learn__map .categ>p{color:var(--ink-2);margin:-4px 0 12px}.learn__map .categ_stages{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;display:grid}.learn__map .stage{border:1.5px solid var(--rule);background:var(--surface);min-height:92px;color:var(--ink);box-shadow:var(--shadow-1);-webkit-tap-highlight-color:transparent;transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .15s ease;border-radius:12px;align-items:center;gap:12px;padding:12px 14px;text-decoration:none;display:flex;position:relative}.learn__map .stage:hover{border-color:var(--ink);color:var(--ink)}@media (hover:hover) and (pointer:fine){.learn__map .stage:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}}.learn__map .stage:active{box-shadow:var(--shadow-1);transition-duration:.1s;transform:scale(.98)}@media (prefers-reduced-motion:reduce){.learn__map .stage:hover,.learn__map .stage:active{transform:none}}.learn__map .stage .stage-img{width:52px;height:52px;font-size:26px}.learn__map .stage .piece-img piece:after{font-size:24px}.learn__map .stage .text{flex-direction:column;min-width:0;display:flex}.learn__map .stage h3{margin:0;font-size:18px}.learn__map .stage .subtitle{color:var(--ink-2);font-size:14px;line-height:1.4}.learn__map .stage.ongoing{border-color:var(--seal)}.learn__map .stage.done{background:var(--washi-2)}.learn__map .stage.future{opacity:.72}.learn__map .stage.future:hover{opacity:1}.learn__map .ribbon{top:-10px;font:700 13px/1.5 var(--f-body);background:var(--seal);color:var(--on-seal);border-radius:99px;padding:2px 10px;position:absolute;inset-inline-end:10px}.learn__map .ribbon.done{background:var(--ink)}.learn__map .ribbon .stars{letter-spacing:1px;font-size:13px}.learn__map .ribbon.done .stars .off{color:var(--star-off)}@media (prefers-reduced-motion:reduce){.learn__map .stage{transition:none}.learn__map .stage:hover{transform:none}}.learn__settings{border:1.5px solid var(--ink);background:var(--washi);width:min(440px,100vw - 32px);color:var(--ink);direction:rtl;border-radius:10px;padding:0}.learn__settings::backdrop{background:#17150f73}.learn__settings form{padding:18px 20px 20px}.learn__settings .head{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.learn__settings h2{font-size:26px}.learn__settings .close{width:44px;height:44px;color:var(--ink);cursor:pointer;background:0 0;border:0;border-radius:6px;justify-content:center;align-items:center;display:inline-flex}.learn__settings .close:hover{background:var(--washi-2)}.learn__settings fieldset{border:0;border-top:1px solid var(--rule);margin:0;padding:12px 0}.learn__settings legend{float:inline-start;width:100%;margin-bottom:8px;padding:0;font-weight:700}.learn__settings legend+*{clear:both}.learn__settings .pref{cursor:pointer;align-items:center;gap:10px;min-height:44px;display:flex}.learn__settings .pref input{width:22px;height:22px;accent-color:var(--seal);margin:0}.learn__settings .sound-rest[hidden]{display:none}.learn__settings .sound-vol{align-items:center;gap:12px;min-height:44px;display:flex}.learn__settings .sound-vol input{max-width:240px;accent-color:var(--seal);flex:1}.learn__settings .pref.sound-sub{min-height:40px;padding-inline-start:18px}.learn__settings .kbd{border-top:1px solid var(--rule);padding:12px 0}.learn__settings .kbd summary{cursor:pointer;min-height:32px;font-weight:700}.learn__settings .kbd ul{margin:8px 0 0;padding-inline-start:18px;font-size:15px}.learn__settings kbd{border:1px solid var(--rule);background:var(--washi-2);min-width:28px;font:600 13px/1.8 var(--f-body);text-align:center;border-bottom-width:2px;border-radius:4px;padding:0 6px;display:inline-block}.learn__settings .foot{border-top:1px solid var(--rule);justify-content:space-between;align-items:center;gap:12px;padding-top:14px;display:flex}:is(.learn,.play) .btn{cursor:pointer;border:1px solid var(--ink);min-height:44px;color:var(--ink);font:700 16px var(--f-body);background:0 0;border-radius:4px;justify-content:center;align-items:center;padding:0 18px;text-decoration:none;display:inline-flex}:is(.learn,.play) .btn.primary{background:var(--seal);border-color:var(--seal);color:var(--on-seal)}:is(.learn,.play) .btn.primary:hover{background:var(--seal-hover);border-color:var(--seal-hover)}:is(.learn,.play) .link{min-height:44px;color:var(--seal);font:600 15px var(--f-body);cursor:pointer;text-underline-offset:3px;background:0 0;border:0;padding:0;text-decoration:underline}.learn__table .why{border-top:1px solid var(--line,#0000001f);text-align:start;color:inherit;margin-top:12px;padding-top:10px}.learn__table .why .eyebrow{opacity:.75;margin:0 0 6px;font-size:.8rem}.learn__table .why ol{margin:0;padding-inline-start:1.3em;font-size:.92rem;line-height:1.5}.learn__table .why li{opacity:.7;margin-bottom:4px}.learn__table .why li.latest{opacity:1;font-weight:600}.learn bdi[dir=ltr]{white-space:nowrap}.learn__coach[hidden],.learn__bubble[hidden]{display:none}.learn__coach{z-index:6;grid-area:table;align-self:start;min-width:0}.learn__coach .coach-card{background:var(--washi);color:var(--ink);border:2px solid var(--ink);box-shadow:var(--shadow-3);animation:coach-in .2s var(--ease-out);touch-action:pan-y;border-radius:12px;padding:12px 18px 14px;position:relative}.learn__coach.coach-done .coach-card{border-color:#2f6b2a}.learn__coach.coach-fail .coach-card{border-color:var(--seal)}.learn__coach .coach-card.older{border-style:dashed}@keyframes coach-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.learn__coach .coach-card{animation:none}}.learn__coach .coach-head{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.learn__coach .eyebrow{font:600 13px var(--f-body);color:var(--muted);margin:0}.learn__coach .coach-min{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:6px;margin-inline-end:-8px;padding:6px;display:inline-flex}.learn__coach .coach-min:hover{background:var(--washi-2);color:var(--ink)}.learn__coach h2{font:800 22px/1.3 var(--f-display);margin:0 0 8px}.learn__coach h2.bad{color:var(--seal)}.learn__coach h2 .tick{color:#2f6b2a}.learn__coach h2 .stars{white-space:nowrap;font-size:22px}.learn__coach .lead{font:500 17px/1.65 var(--f-body);margin:0 0 12px}.learn__coach .hint{font:500 14px/1.5 var(--f-body);color:var(--muted);margin:-4px 0 12px}.learn__coach .muted{color:var(--muted)}.learn__coach .steps{gap:5px;margin:0 0 14px;display:flex}.learn__coach .steps span{background:var(--rule);border-radius:3px;flex:1;height:5px}.learn__coach .steps span.on{background:#2f6b2a}.learn__coach .recap ol{font:500 15px/1.55 var(--f-body);margin:4px 0 14px;padding-inline-start:1.2em}.learn__coach .recap li{margin-bottom:6px}.learn__coach .recap .mv{font-weight:800}.learn__coach .recap .rep{color:var(--muted);margin-top:2px;font-size:14px;display:block}.learn__coach .recap .mv.opp:before,.learn__coach .reply .mv:before{content:"△ "}.learn__coach .reply{background:var(--washi-2);border-radius:8px;margin:0 0 12px;padding:10px 12px}.learn__coach .reply p{font:500 15px/1.55 var(--f-body);margin:0}.learn__coach .reply .eyebrow{margin-bottom:2px}.learn__coach .buttons{flex-wrap:wrap;gap:10px;display:flex}.learn__coach .buttons .btn{flex:auto;justify-content:center}.learn__coach .coach-nav{border-top:1px solid var(--rule);justify-content:center;align-items:center;gap:14px;margin-top:12px;padding-top:10px;display:flex}.learn__coach .coach-nav .count{font:600 14px var(--f-body);color:var(--muted);text-align:center;min-width:48px}.learn__coach .coach-nav .arrow{border:1.5px solid var(--ink);background:var(--washi);width:40px;height:36px;color:var(--ink);font:700 18px/1 var(--f-body);cursor:pointer;border-radius:8px}.learn__coach .coach-nav .arrow:disabled{opacity:.3;cursor:default}.learn__bubble{bottom:calc(18px + env(safe-area-inset-bottom));z-index:41;border:2px solid var(--washi);touch-action:none;user-select:none;background:var(--seal);height:52px;color:var(--on-seal);font:800 17px var(--f-body);cursor:grab;border-radius:26px;align-items:center;gap:8px;padding:0 18px 0 14px;display:inline-flex;position:fixed;inset-inline-end:18px;box-shadow:0 10px 24px -8px #00000080}.learn__bubble.dragging{cursor:grabbing;box-shadow:0 16px 30px -8px #0000008c}.learn__bubble.open{background:var(--ink)}.learn__bubble .icon svg{width:26px;height:26px}.learn__bubble .dot{top:-3px;border:2px solid var(--washi);background:#2f6b2a;border-radius:50%;width:16px;height:16px;display:none;position:absolute;inset-inline-start:-3px}.learn__bubble.unread .dot{display:block}.learn__bubble.unread,.learn__bubble.new{animation:1.6s ease-in-out infinite bubble-pulse}@keyframes bubble-pulse{0%,to{box-shadow:0 10px 24px -8px #00000080,0 0 #b8361f73}50%{box-shadow:0 10px 24px -8px #00000080,0 0 0 12px #b8361f00}}@media (prefers-reduced-motion:reduce){.learn__bubble.unread,.learn__bubble.new{animation:none}}.learn__coach .score-why{font:600 15px/1.55 var(--f-body);margin:-2px 0 12px}.learn__table .result .score-why{margin:6px 0 0}.learn__coach .how{background:var(--washi-2);border-radius:8px;align-items:flex-start;gap:10px;margin:0 0 12px;padding:10px 12px;display:flex}.learn__coach .how .icon{color:var(--seal);flex-shrink:0;margin-top:2px}.learn__coach .how p{font:500 14.5px/1.55 var(--f-body);margin:0}@media (width<=859.98px){.learn__coach{z-index:40;max-height:46vh;padding:0 10px calc(10px + env(safe-area-inset-bottom));position:fixed;bottom:0;left:0;right:0;overflow-y:auto}.learn__coach .coach-card{padding:10px 16px 14px}.learn__coach h2{font-size:20px}.learn__coach .lead{font-size:16px;line-height:1.6}.learn.has-coach{padding-bottom:48vh}.learn.has-coach .learn__bubble{display:none}}.learn__map .phase,.learn__overlay .phase{margin:0 0 10px;font-size:14px}.learn__map .phase a,.learn__overlay .phase a{border:1px solid var(--rule);color:var(--ink-2);border-radius:999px;padding:2px 12px;text-decoration:none;display:inline-block}.learn__map .phase a:hover,.learn__overlay .phase a:hover{color:var(--seal);border-color:var(--seal)}.sg-wrap .sg-custom-svgs .rep-digit circle{fill:var(--seal);opacity:.85}.sg-wrap .sg-custom-svgs .rep-digit path{fill:var(--on-seal)}.learn__map .course-level{color:var(--seal);align-items:baseline;gap:10px;margin:36px 0 14px;font-size:30px;font-weight:800;display:flex}.learn__map .course-level:first-child{margin-top:0}.learn__map .course-level span{color:var(--ink-2);letter-spacing:.02em;font-size:14px;font-weight:600}