@property --border-angle{syntax:"<angle>";inherits:true;initial-value:0turn}@keyframes bg-spin{to{--border-angle:1turn}}@keyframes soft-hue{50%{filter:hue-rotate(-10deg)}}icon[data-icon]:before{content:attr(data-icon);font-family:lichess}.learn{grid-area:main;gap:10px;display:grid}.learn__side{grid-area:side}.learn__main{grid-area:main}.learn--map{grid-template-areas:"side""main"}@media (width>=800px){.learn--map{grid-template-columns:240px auto;grid-template-areas:"side main"}}@media (width>=1400px){.learn--map{grid-template-columns:240px 960px}}.learn--run{grid-template-areas:"main""table""side"}@media (width>=800px){.learn--run{grid-template-columns:minmax(0,1fr) 380px;grid-template-areas:"main table""side table"}}@media (width>=1200px){.learn--run{grid-template-columns:300px minmax(0,1fr) 380px;grid-template-areas:"side main table"}}@media (width<=800px){.learn-board{max-width:100vw}}.learn__side-home{background:var(--c-bg-box);color:var(--c-font);text-align:center;border-radius:7px;padding:1em 0;box-shadow:0 2px 2px #00000024,0 3px 1px -2px #0003,0 1px 5px #0000001f}.learn__side-home__header{flex-flow:column;align-items:center;padding:1em 0;display:flex}.learn__side-home__header .decoration{opacity:.8;width:200px;height:200px}@keyframes fat-glide{50%{transform:translateY(-4px)}}.learn__side-home:hover .decoration{animation:1.2s ease-in-out infinite fat-glide}.learn__side-home h1{margin:0;font-size:2.5em}.learn__side-home h2{margin:.4em 0 1em;font-size:1.8em}.learn__side-home .progress{background:var(--c-primary);width:100%;height:30px;position:relative;overflow:hidden;box-shadow:inset 0 1px 1px #0000001a}@keyframes animated-bar{0%{transform:translate(-100px)}to{transform:translate(0)}}.learn__side-home .progress .bar{background:var(--c-primary-dim);border-radius:0 5px 5px 0;height:100%;animation:1s forwards animated-bar;transform:translate(-100px)}.learn__side-home .progress .text{z-index:3;width:100%;line-height:30px;position:absolute;top:0;left:0}.learn__side-home .actions{padding:20px 10px}html.light .learn__side-home .progress .text{color:var(--c-over)}html.light .learn__side-home__header .decoration{filter:brightness(.15)}.learn__side-home a{opacity:.6;color:var(--c-over);cursor:pointer}html.light .learn__side-home a{color:var(--c-font)}.learn__side-home a:hover{opacity:1}.learn-stages{padding-top:10px}.learn-stages .categ>h2{text-shadow:0 1px 0 var(--c-font-shadow);letter-spacing:8px;text-transform:uppercase;color:var(--c-font-dim);text-align:center;font-family:Roboto,sans-serif;font-size:2em;font-weight:300}.learn-stages .categ_stages{--min-width:400px;grid-template-columns:repeat(auto-fill, minmax(var(--min-width), 1fr));gap:1em;margin:1.5em 0 3em;display:grid}@media (width<=420px){.learn-stages .categ_stages{--min-width:calc(100vw - 2em);padding:0 .5em}}.learn-stages .stage{min-height:90px;color:var(--c-over);border:1px solid var(--c-border);background:var(--c-bg-box);border-radius:7px;flex-flow:row;align-items:center;padding-right:3em;font-size:1.2em;transition:transform .15s;display:flex;position:relative;box-shadow:0 3px 5px #00000012}html.light .learn-stages .stage{color:var(--c-font)}@media (width<=420px){.learn-stages .stage{min-height:fit-content;padding:6px 3em 6px 0}.learn-stages .stage p{margin-top:2px}}.learn-stages .stage img{opacity:.6;width:70px;height:70px;margin:0 1em}html.light .learn-stages .stage img{filter:brightness(.15)}@media (width<=420px){.learn-stages .stage img{width:50px;height:64px}}.learn-stages .stage h3{font-size:1.6em;line-height:1}.learn-stages .stage p{opacity:.8;margin:4px 0 0;line-height:1.2}.learn-stages .stage.ongoing{border-color:var(--m-primary--fade-50);background:linear-gradient(0deg, var(--m-primary--fade-60), var(--m-primary--fade-80) 100px)}html.light .learn-stages .stage.ongoing{background:linear-gradient(180deg, var(--m-primary--fade-60), var(--m-primary--fade-80) 100px)}.learn-stages .stage.done{border-color:var(--m-secondary--fade-35);background:linear-gradient(0deg, var(--m-secondary--fade-60), var(--m-secondary--fade-80) 100px)}.learn-stages .stage.done img{filter:brightness(0)saturate()invert(81%)sepia(42%)saturate(529%)hue-rotate(38deg)brightness(94%)contrast(90%)}html.light .learn-stages .stage.done{background:linear-gradient(180deg, var(--m-secondary--fade-60), var(--m-secondary--fade-80) 100px)}html.light .learn-stages .stage.done img{filter:brightness(0)saturate()invert(41%)sepia(14%)saturate(1540%)hue-rotate(47deg)brightness(97%)contrast(93%)}.learn-stages .stage.future{border-color:var(--m-future--fade-35);background:linear-gradient(0deg, var(--m-future--fade-60), var(--m-future--fade-80) 100px)}html.light .learn-stages .stage.future{background:linear-gradient(180deg, var(--m-future--fade-60), var(--m-future--fade-80) 100px)}.learn-stages .stage.active,.learn-stages .stage:hover{transform:scale(1.025)}.learn-stages .attention-effect{--border-angle:0turn;z-index:-1;background:conic-gradient(from var(--border-angle), transparent 25%, var(--m-primary--lighten-30), var(--m-primary--fade-80)) border-box, transparent border-box;background-position:50%;border:3px solid #0000;border-radius:7px;animation:3.5s linear infinite bg-spin;position:absolute;inset:-1px;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}html.light .learn-stages .attention-effect{background:conic-gradient(from var(--border-angle), transparent 25%, var(--m-primary--darken-25), var(--m-primary--fade-80)) border-box, transparent border-box}.learn-stages .stage .ribbon-wrapper{width:88px;height:88px;display:block;position:absolute;top:-4px;right:-3px;overflow:hidden}.learn-stages .ribbon{--ribbon-fade:#1111116e;text-align:center;text-shadow:0 1px #ffffff80;color:#5c5c5c;width:120px;padding:7px 0;font-size:15px;font-weight:700;display:block;position:relative;top:15px;left:-4px;transform:rotate(45deg);box-shadow:1px 0 3px #0000004d}html.light .learn-stages .ribbon{--ribbon-fade:#1111113e}.learn-stages .ribbon icon{color:var(--c-brag);text-shadow:0 -.5px 1px #00000080;animation:.6s ease-in-out infinite soft-hue}.learn-stages .ribbon icon:nth-child(2){animation-delay:.2s}.learn-stages .ribbon icon:nth-child(3){animation-delay:.4s}.learn-stages .ribbon:before,.learn-stages .ribbon:after{content:"";mix-blend-mode:overlay;width:32px;height:100%;position:absolute;top:0}.learn-stages .ribbon:before{background:linear-gradient(90deg, var(--ribbon-fade), transparent);left:0}.learn-stages .ribbon:after{background:linear-gradient(270deg, var(--ribbon-fade), transparent);right:0}.learn-stages .ribbon.done{box-shadow:1px 0 3px var(--m-secondary--fade-50);background-color:#c5e791}.learn-stages .ribbon.ongoing{box-shadow:1px 0 3px var(--m-primary--fade-50);background-color:#bddffa}.learn-stages .ribbon.future{background-color:var(--m-future--lighten-22);box-shadow:1px 0 3px var(--m-future--fade-50)}.learn-stages .what_next>p{text-shadow:0 1px 0 var(--c-font-shadow);text-align:center;width:100%;margin:.5em 0 1.5em;font-size:1.2em}.learn__side-map{-webkit-user-select:none;user-select:none}.learn__side-map .back,.learn__side-map .categ>h2{text-indent:15px;cursor:pointer;opacity:.81;height:50px;font-size:1.3em;line-height:50px;display:block}.learn__side-map .back{color:var(--c-font);align-items:center;display:flex}.learn__side-map .back img{opacity:.9;background:#787878;width:50px;height:50px;margin-inline-end:10px;padding:10px;display:block}.learn__side-map .back:hover{background:#78787833}.learn__side-map .categ>h2{border-top:1px solid var(--c-border)}.learn__side-map .categ>h2:hover{background:var(--m-primary--fade-80)}.learn__side-map .categ.active{border:1px solid var(--c-border);border-width:0 1px}.learn__side-map .categ.active:last-child{border-bottom-width:1px}.learn__side-map .categ.active>h2{cursor:default;background:var(--c-primary);color:var(--c-over)}.learn__side-map .categ:not(.active) .categ_stages{display:none}.learn__side-map .stage{opacity:.9;color:var(--c-font);align-items:center;font-family:Roboto,sans-serif;font-size:1.1em;transition:all .2s;display:flex}.learn__side-map .stage img{opacity:.9;width:50px;height:50px;margin-inline-end:10px;padding:10px}.learn__side-map .stage.active{background:var(--m-primary--fade-80)}.learn__side-map .stage.active img{background:var(--c-primary)}.learn__side-map .stage.done img{background:var(--c-good)}.learn__side-map .stage.done:hover{background:var(--m-secondary--fade-80)}.learn__side-map .stage.future img{opacity:.7;background:var(--c-primary)}.learn__side-map .stage.future:hover{background:var(--m-primary--fade-80)}.learn__side-map .stage:hover{filter:brightness(.9)}.learn__main{position:relative}.learn-board{aspect-ratio:1;width:100%;max-height:calc(100svh - 130px)}.learn__screen-overlay{z-index:200;cursor:pointer;background:#000000a6;display:grid;position:fixed;inset:0}@keyframes slide-in{0%{opacity:0;filter:blur(15px)}to{opacity:1;filter:blur()}}.learn__screen{background-color:var(--c-bg-box);text-align:center;border-radius:7px;width:350px;max-height:100%;margin:auto;padding-top:36px;overflow:auto;box-shadow:0 5px 20px #00000080}.learn__screen>:first-child{animation:1s cubic-bezier(.37,.82,.2,1) slide-in}.learn__screen>:nth-child(2){animation:1.5s cubic-bezier(.37,.82,.2,1) slide-in}.learn__screen>:nth-child(3){animation:2s cubic-bezier(.37,.82,.2,1) slide-in}.learn__screen>:nth-child(4){animation:2.5s cubic-bezier(.37,.82,.2,1) slide-in}.learn__screen>:nth-child(5){animation:3s cubic-bezier(.37,.82,.2,1) slide-in}.learn__screen h1{color:var(--c-font-clear);margin-bottom:22px;font-size:24px;font-weight:700}.learn__screen .no-square{width:100px;height:100px;margin:0 auto 22px;position:relative}.learn__screen .no-square img{width:100%;height:100%}html.light .learn__screen .no-square img{filter:brightness(.15)}.learn__screen p{margin-bottom:17px;padding:0 15%;line-height:24px}.learn__screen .buttons{flex-direction:column;gap:8px;margin:8px 10% 24px;display:flex}.learn__screen .buttons .button{justify-content:center;align-items:center;gap:4px;height:48px;display:flex}.learn__screen .stars{justify-content:center;gap:12px;margin-bottom:8px;display:flex}icon.star:before{content:"★";color:var(--c-font-dim);opacity:0;font-size:4em;animation:.5s cubic-bezier(.37,.82,.2,1) both star-pop;display:block}.learn__screen .star-wrap:first-child icon.star:before{animation-delay:.6s}.learn__screen .star-wrap:nth-child(2) icon.star:before{animation-delay:.9s}.learn__screen .star-wrap:nth-child(3) icon.star:before{animation-delay:1.2s}@keyframes star-pop{0%{opacity:0;transform:scale(0)rotate(-120deg)}70%{opacity:1;transform:scale(1.2)rotate(10deg)}to{opacity:1;transform:scale(1)rotate(0)}}.learn__table{grid-area:table;align-self:center}.learn__table .wrap{border-radius:7px;overflow:hidden;box-shadow:0 2px 2px #00000024,0 3px 1px -2px #0003,0 1px 5px #0000001f}.learn__table .title{background:var(--c-primary);color:var(--c-over);display:flex}.learn__table .title h2,.learn__table .title h3{white-space:nowrap;margin:15px 0 5px -3px;font-size:2.3em}.learn__table .title img{width:80px;height:80px;margin:5px 8px 5px 5px}.learn__table .subtitle{margin-bottom:1em}.learn__table .goal{background:var(--c-bg-box);border:1px solid var(--c-border);text-align:center;border-top:none;justify-content:center;align-items:center;padding:1em;display:flex}.learn__table .progress{text-align:center;border:1px solid var(--c-border);border-top:0;flex-wrap:nowrap;align-items:center;display:flex}.learn__table .progress button{text-align:center;background:var(--c-bg-high);border:none;border-inline-start:1px solid var(--c-border);opacity:.8;cursor:pointer;border-radius:0;flex:100%;justify-content:center;align-items:center;height:3em;font-size:.9em;transition:all .2s;display:flex}.learn__table .progress button:first-child{border-inline-start:0}.learn__table .progress button:hover:not(:disabled){opacity:1}.learn__table .progress button.done{color:var(--c-over);background:var(--c-good)}.learn__table .progress button.active{opacity:1;color:var(--c-over);background:var(--c-primary)}.learn__table .progress button.future{cursor:default}.learn__table .goal{transition:background .2s,color .2s}.learn__table .goal.celebrating{background:var(--c-good);color:var(--c-over);border-radius:4px}.learn__table .goal.failed{background:var(--c-bad);color:var(--c-over);border-radius:4px}.learn__table .fail-message{text-align:center;font-size:1.1em;font-weight:700;animation:.25s ease-out affirmation-pop;display:block}.learn__table .affirmation{text-align:center;font-size:1.3em;font-weight:700;animation:.25s ease-out affirmation-pop,1s text-shadow-glow;display:block}@keyframes text-shadow-glow{50%{text-shadow:0 0 10px #fff;transform:scale(1.05)}}@keyframes affirmation-pop{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.learn__table .pass-btn{margin:1rem auto;padding:.65em 4em;font-size:1.15em;display:block}@keyframes pass-hint-pulse{0%,to{box-shadow:0 0 0 3px var(--c-primary), 0 0 0 5px transparent}50%{box-shadow:0 0 0 3px var(--c-primary), 0 0 8px 5px var(--c-primary)}}.learn__table .pass-btn.pass-hint{animation:1.2s ease-in-out infinite pass-hint-pulse}.learn-score-bar{background:var(--c-bg-zebra);border-top:1px solid var(--c-border);align-items:center;width:100%;padding:.5em;font-size:.85em;display:flex}.learn-score-bar__verdict{min-width:5em;font-weight:700}.learn-score-bar__label{text-align:center;color:var(--c-font-dim);flex:1}.learn__table .learn-score-display{flex-direction:column;gap:.2em;padding:.3em 1rem;font-size:.85em;display:flex}.learn__table .scoring-approvals{color:var(--c-font-dim);gap:1rem;padding:.1rem 1rem .4rem;font-size:.85em;display:flex}.learn__table .scoring-approval--done{color:var(--c-secondary);font-weight:700}.learn__table .goal.passing{background:var(--c-bg-high);transition:background .2s}.pass-message{text-align:center;opacity:.75;font-size:1.1em;font-weight:700;animation:.25s ease-out affirmation-pop;display:block}.author-panel{background:var(--c-bg-high);border-top:2px dashed #f0a000;padding:1rem}.author-panel h3{color:#f0a000;margin:0 0 .5rem}.author-controls{flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:.5rem;display:flex}.author-controls label{align-items:center;gap:.25rem;display:flex}.author-controls input[type=text]{width:280px}.author-phase{align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:.9em;display:flex}.author-phase button.active{color:#000;background:#f0a000}.author-body{gap:1rem;display:flex}.author-board{flex-shrink:0;width:320px;height:320px}.author-output{resize:vertical;flex:1;min-height:320px;font-family:monospace;font-size:11px}