.learn-xq{width:min(1120px,100%);color:var(--site-text);margin:0 auto;padding:20px 16px 48px}.learn-xq--map{grid-template-columns:220px 1fr;align-items:start;gap:24px;display:grid}.learn-xq-side-card{background:var(--site-panel);border:1px solid var(--site-border-soft);text-align:center;border-radius:10px;padding:24px 16px;position:sticky;top:16px}.learn-xq-side-card h1{color:var(--site-heading);margin:12px 0 0;font-size:1.35rem}.learn-xq-side-card p{color:var(--site-muted);margin:2px 0 14px}.learn-xq-mascot :is(svg){width:96px;height:96px}.learn-xq-progress-bar{background:color-mix(in srgb, var(--site-accent) 42%, white);border-radius:6px;height:30px;position:relative;overflow:hidden;box-shadow:inset 0 1px 1px #0000001f}.learn-xq-progress-fill{background:var(--site-accent);transition:width .4s;position:absolute;inset:0 auto 0 0}.learn-xq-progress-bar span{z-index:1;color:#fff;text-shadow:0 1px 1px #0000004d;place-items:center;font-size:.85rem;font-weight:600;display:grid;position:absolute;inset:0}.learn-xq-reset{color:var(--site-muted);cursor:pointer;background:0 0;border:none;margin-top:12px;font-size:.85rem;text-decoration:underline}.learn-xq-categ h2{text-align:center;letter-spacing:.35em;text-transform:uppercase;color:var(--site-muted);margin:34px 0 18px;font-weight:400}.learn-xq-categ:first-child h2{margin-top:0}.learn-xq-tile-grid{grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:16px;display:grid}.learn-xq-tile{border-radius:var(--site-radius);border:1px solid var(--site-border-soft);background:var(--site-panel);min-height:90px;color:inherit;isolation:isolate;align-items:center;gap:0;padding:10px 48px 10px 0;text-decoration:none;transition:transform .12s,box-shadow .12s;display:flex;position:relative;box-shadow:0 3px 5px #00000012}.learn-xq-tile>:not(.learn-xq-ribbon-wrap){z-index:1;position:relative}.learn-xq-tile:hover{transform:scale(1.02)}.learn-xq-tile-text h3{color:var(--site-heading);margin:0;font-family:Roboto,Noto Sans,sans-serif;font-size:1.6rem;font-weight:400;line-height:1}.learn-xq-tile-text p{color:var(--site-muted);margin:4px 0 0;font-size:1rem;line-height:1.2}.learn-xq-tile-illus{opacity:.68;flex:0 0 102px;place-items:center;display:grid}.learn-xq-tile-illus :is(svg){width:70px;height:70px}.learn-xq-tile-glyph{font-size:40px;line-height:1}.learn-xq-tile--done,.learn-xq-tile--link{border-color:color-mix(in srgb, var(--site-accent) 65%, var(--site-border-soft));background:linear-gradient(180deg, color-mix(in srgb, var(--site-accent) 40%, var(--site-panel)), color-mix(in srgb, var(--site-accent) 20%, var(--site-panel)) 100px)}.learn-xq-tile--done .learn-xq-tile-illus{color:var(--site-accent);opacity:.82}.learn-xq-tile--ongoing{border-color:color-mix(in srgb, var(--site-link) 65%, var(--site-border-soft));background:linear-gradient(180deg, color-mix(in srgb, var(--site-link) 40%, var(--site-panel)), color-mix(in srgb, var(--site-link) 20%, var(--site-panel)) 100px)}.learn-xq-tile--ongoing:after{--learn-xq-border-angle:0turn;z-index:2;border-radius:var(--site-radius);background:conic-gradient(from var(--learn-xq-border-angle), transparent 25%, color-mix(in srgb, var(--site-link) 72%, #12283c), color-mix(in srgb, var(--site-link) 20%, transparent)) border-box;content:"";pointer-events:none;border:3px solid #0000;animation:3.5s linear infinite learn-xq-border-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}.learn-xq-tile--future{--learn-xq-future:#b981e4;border-color:color-mix(in srgb, var(--learn-xq-future) 65%, var(--site-border-soft));background:linear-gradient(180deg, color-mix(in srgb, var(--learn-xq-future) 40%, var(--site-panel)), color-mix(in srgb, var(--learn-xq-future) 20%, var(--site-panel)) 100px)}@property --learn-xq-border-angle{syntax:"<angle>";inherits:true;initial-value:0turn}@keyframes learn-xq-border-spin{to{--learn-xq-border-angle:1turn}}.learn-xq-ribbon-wrap{pointer-events:none;z-index:3;width:88px;height:88px;position:absolute;top:-4px;right:-3px;overflow:hidden}.learn-xq-ribbon{--learn-xq-ribbon-fade:#1111113d;z-index:1;text-align:center;color:#4a4636;text-shadow:0 1px #ffffff73;width:120px;padding:7px 0;font-size:.94rem;font-weight:700;position:relative;top:15px;left:-4px;transform:rotate(45deg);box-shadow:1px 0 3px #0000004d}.learn-xq-ribbon:before,.learn-xq-ribbon:after{content:"";mix-blend-mode:overlay;pointer-events:none;width:32px;height:100%;position:absolute;top:0}.learn-xq-ribbon:before{background:linear-gradient(90deg, var(--learn-xq-ribbon-fade), transparent);left:0}.learn-xq-ribbon:after{background:linear-gradient(270deg, var(--learn-xq-ribbon-fade), transparent);right:0}.learn-xq-ribbon--done{background:#c5e791}.learn-xq-ribbon--ongoing{background:#bddffa}.learn-xq-ribbon .learn-xq-star{font-size:.92rem}.learn-xq-ribbon .learn-xq-check{font-size:1.15rem;line-height:1;display:inline-block;transform:rotate(-45deg)}.learn-xq-what-next-copy{text-align:center;color:var(--site-muted);margin:-6px 0 16px}