/* Site footer (owner 2026-10-22, after reducto.ai: "that footer is beautiful").
   One look for every page: the static <footer class="foot"> of the home page, the hand-written pages and the generated
   course and locale pages, and the #sx-foot that /_style/site.js puts on the original pages. The markup stays as it is;
   this file rearranges it with a grid (.foot-grid, .foot-about and .legal become display:contents) into
   Reducto's layout: a deep green-black full-bleed band, the logo, the one-line description, the social icons and the
   copyright on the left, the four link columns in the middle, the legal lines below, and (owner 20:07) a band of
   hand-drawn chalk doodles standing on the bottom of the page, in place of the old giant halftone "stellar".
   Every selector starts with footer:is(.foot,#sx-foot): the id inside :is() lifts these rules above rework.css,
   base.css section 6 and the route files without !important. */
footer:is(.foot,#sx-foot){
  --fo-bg:var(--foot-bg,#0f1713); --fo-hi:#eef3ef; --fo-text:#c2ccc6; --fo-link:#a9b6af; --fo-dim:#86948d; --fo-line:#24302a;
  display:block;position:relative;overflow:hidden;margin-top:0;padding:88px 0 0;background:var(--fo-bg);border-top:0;
  color:var(--fo-text);font:400 15px/1.6 var(--font,"Inter",system-ui,sans-serif);text-align:start
}
footer:is(.foot,#sx-foot) .wrap{
  display:grid;grid-template-columns:minmax(0,1.55fr) repeat(4,minmax(0,1fr));column-gap:40px;align-items:start
}
footer:is(.foot,#sx-foot) :is(.foot-grid,.foot-about,.legal){display:contents}

/* left column: logo, line, icons, mail, copyright */
footer:is(.foot,#sx-foot) .brand{grid-column:1;grid-row:1;display:inline-flex;align-items:center;gap:10px;justify-self:start;
  border-radius:6px;font:500 20px/1 var(--font,"Inter",sans-serif);letter-spacing:-.01em;color:var(--fo-hi)}
footer:is(.foot,#sx-foot) .brand img{width:32px;height:32px}
footer:is(.foot,#sx-foot) .foot-about>p:not(.small){grid-column:1;grid-row:2;margin:20px 0 0;max-width:330px;
  font:400 15px/1.6 var(--font,"Inter",sans-serif);color:var(--fo-text)}
footer:is(.foot,#sx-foot) .social{grid-column:1;grid-row:3;display:flex;flex-wrap:wrap;gap:1px;margin:24px 0 0;margin-inline:-7px -12px;padding:0;border:0}
footer:is(.foot,#sx-foot) .social>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
footer:is(.foot,#sx-foot) .social a{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;
  padding:0;border-radius:6px;background:none;box-shadow:none;font-size:0;line-height:0;color:var(--fo-link);transition:color .15s ease,background-color .15s ease}
footer:is(.foot,#sx-foot) .social a::before{content:"";width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
footer:is(.foot,#sx-foot) .social a:hover{color:var(--fo-hi);background:#1b2620;box-shadow:none}
footer:is(.foot,#sx-foot) .foot-about a.mail{grid-column:1;grid-row:4;justify-self:start;margin:15px 0 -3px;padding-block:3px;border-radius:6px;
  font:400 14.5px/1.4 var(--font,"Inter",sans-serif);color:var(--fo-link);text-decoration:none;text-underline-offset:3px;overflow-wrap:anywhere;transition:color .15s ease}
footer:is(.foot,#sx-foot) .foot-about a.mail:hover{color:var(--fo-hi);text-decoration:underline;text-underline-offset:3px}
footer:is(.foot,#sx-foot) .legal p:first-child{grid-column:1;grid-row:5;margin:18px 0 0;font:400 13.5px/1.5 var(--font,"Inter",sans-serif);color:var(--fo-dim)}

/* middle: the link columns */
footer:is(.foot,#sx-foot) .foot-grid>nav{grid-row:1/span 5;min-width:0}
footer:is(.foot,#sx-foot) :is(h3,h4){margin:4px 0 20px;font:500 14.5px/1.2 var(--font,"Inter",sans-serif);letter-spacing:0;text-transform:none;color:var(--fo-hi)}
footer:is(.foot,#sx-foot) ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
footer:is(.foot,#sx-foot) ul a{font:400 14.5px/1.35 var(--font,"Inter",sans-serif);color:var(--fo-link);text-decoration:none;
  padding-block:4px;border-radius:6px;transition:color .15s ease}   /* swarm R13: inline padding grows the 17px tap target to 28px without moving the rows */
footer:is(.foot,#sx-foot) ul a:hover{color:var(--fo-hi)}
/* swarm R10: long single words (de "Wettbewerbsmathematik", da, no, hy, ru) ran up to 25px past their column at 375
   and 768 into the next one. Hyphenate by the page's lang, and break as a last resort. */
footer:is(.foot,#sx-foot) :is(h3,h4,ul a){overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
footer:is(.foot,#sx-foot) ul{grid-template-columns:minmax(0,1fr)}   /* the auto track grew to the long word's width */
footer:is(.foot,#sx-foot) :is(a,.brand):focus-visible{outline:2px solid #6fbf8c;outline-offset:3px;border-radius:6px}
/* swarm R9: rework.css's :focus-visible{...!important} won, so in light mode the ring on this always-dark band was the
   light-theme #13863f (dim on #0f1713). Use the dark-surface green in both themes, as html.dark already does. */
footer:is(.foot,#sx-foot) :is(a,button,.brand):focus-visible{outline-color:#3fb26b!important}

/* bottom: the nonprofit line and the trademark notice, under one hairline */
footer:is(.foot,#sx-foot) .foot-about .small{grid-column:1/-1;grid-row:6;max-width:none;margin:64px 0 0;padding-top:24px;border-top:1px solid var(--fo-line);
  font:400 13px/1.6 var(--font,"Inter",sans-serif);color:var(--fo-dim)}
footer:is(.foot,#sx-foot) .legal p:last-child{grid-column:1/-1;grid-row:7;max-width:980px;margin:8px 0 0;font:400 12.5px/1.6 var(--font,"Inter",sans-serif);color:var(--fo-dim)}

/* corner doodles (owner 20:40: "the doodles should be on the corners and smaller and less in number; it should be
   like an extra layer"; before that, 18:51 and 20:07, a full-width band replaced the giant "stellar"): four small
   chalk doodles in each bottom corner (pencil, notebook, star, check on the left; bulb, sigma, spark, pi on the right),
   40 to 84px, faint, behind the footer content. The tall ones stay in the side margin, the rest sit in the bottom
   padding, so they never cover text. On phones only one or two tiny ones per corner. Static SVG data URIs from the
   lab's doodles (shots/fix-foot2040/gen_corners.js writes the --fo-d* values). The footer is dark in both themes. */
footer:is(.foot,#sx-foot){
  --fo-dl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 220'%3E%3Cfilter id='c' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' seed='3' result='g'/%3E%3CfeColorMatrix in='g' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.9' result='a'/%3E%3CfeComposite in='d' in2='a' operator='in'/%3E%3C/filter%3E%3Cg filter='url(%23c)' fill='none' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23a6d8b6' opacity='.34' transform='translate(10 128) rotate(-14 42 42) scale(1.75)'%3E%3Cpath vector-effect='non-scaling-stroke' d='M10.5 37.5L14 27.2 32.6 8.6c1.3-1.2 3-1.1 4.2.1l2.6 2.7c1.1 1.2 1 3-.2 4.1L20.6 34 10.5 37.5z'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M14.2 27.4l6.3 6.4M29.8 11.6l6.6 6.5M12.4 32.6l3 3'/%3E%3C/g%3E%3Cg stroke='%23e6eee8' opacity='.26' transform='translate(112 156) rotate(7 32 32) scale(1.3330000000000002)'%3E%3Cpath vector-effect='non-scaling-stroke' d='M5.5 12c6.4-3 12.6-3.1 18.5 1 6-4.1 12.2-4 18.5-1v26.3c-6.3-2.6-12.5-2.5-18.5 1.4-6-3.9-12.1-4-18.5-1.4z'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M24 13.2v26'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M10 18.5c3.4-1.1 6.4-1 9.2.4M10 24.2c3.4-1.1 6.4-1 9.2.4'/%3E%3C/g%3E%3Cg stroke='%23c8e6d2' opacity='.22' transform='translate(54 64) rotate(-10 20 20) scale(0.833)'%3E%3Cpath vector-effect='non-scaling-stroke' d='M24 6.5l5 11.6 12.6 1.1-9.7 8.2 3 12.4L24 33.1l-10.8 6.6 2.9-12.3-9.6-8.3 12.6-1z'/%3E%3C/g%3E%3Cg stroke='%23c8e6d2' opacity='.22' transform='translate(206 176) rotate(9 22 22) scale(0.917)'%3E%3Cpath vector-effect='non-scaling-stroke' d='M8.5 25.6l9.8 9.6L40 12.2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --fo-dr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 220'%3E%3Cfilter id='c' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' seed='3' result='g'/%3E%3CfeColorMatrix in='g' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.9' result='a'/%3E%3CfeComposite in='d' in2='a' operator='in'/%3E%3C/filter%3E%3Cg filter='url(%23c)' fill='none' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23a6d8b6' opacity='.34' transform='translate(214 120) rotate(10 40 40) scale(1.6669999999999998)'%3E%3Cpath vector-effect='non-scaling-stroke' d='M17.4 31.4c-4.8-3.6-6.7-8.2-5.5-13.4 1.3-5.2 6-8.8 12.1-8.8 6.1.1 10.7 3.7 12 8.8 1.2 5.3-.8 9.8-5.6 13.4l-.6 4.4H18z'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M18.6 39.8c3.6.4 7.3.4 10.9 0M20.5 43.6c2.4.3 4.8.3 7.1 0M24 2.8v3.4M8.5 9l2.4 2.4M39.5 9l-2.4 2.4M22 25.8l2 3.2 2-3.2'/%3E%3C/g%3E%3Cg stroke='%23e6eee8' opacity='.26' transform='translate(128 160) rotate(-8 28 28) scale(1.167)'%3E%3Cpath vector-effect='non-scaling-stroke' d='M36.5 11.5c-7.8-1.6-16.3-1.2-24.6-.6l13.6 13.2-13.8 13.5c8.4.3 16.4.5 25 .2'/%3E%3C/g%3E%3Cg stroke='%23c8e6d2' opacity='.22' transform='translate(206 56) rotate(12 20 20) scale(0.833)'%3E%3Cpath vector-effect='non-scaling-stroke' d='M24 7.6c.3 6.2-.2 11.6-.2 16.6 0 5.4.3 10.4.4 16.2M8.6 24.4c5.8-.6 10.8-.3 15.6-.4 5.2-.1 10.1.2 15.2.6M13.4 13.6c3.6 3.4 7.1 6.8 10.6 10.4 3.4 3.5 7 6.9 10.7 10.2M34.4 13.4c-3.6 3.6-7 7.2-10.4 10.6-3.4 3.4-7.1 6.6-10.8 9.8'/%3E%3C/g%3E%3Cg stroke='%23c8e6d2' opacity='.22' transform='translate(52 178) rotate(-6 20 20) scale(0.833)'%3E%3Cpath vector-effect='non-scaling-stroke' d='M8.4 15.2c6.6-1.9 21.2-2.4 31.8-1.5'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M17.6 14.5c.4 9.2-1.4 17.2-6.2 23.5M30 14c-.6 8.7-.1 17.8 6.1 24'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --fo-ml:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cfilter id='c' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' seed='3' result='g'/%3E%3CfeColorMatrix in='g' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.9' result='a'/%3E%3CfeComposite in='d' in2='a' operator='in'/%3E%3C/filter%3E%3Cg filter='url(%23c)' fill='none' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23a6d8b6' opacity='.34' transform='translate(4 8) rotate(-14 26 26) scale(1.083)'%3E%3Cpath vector-effect='non-scaling-stroke' d='M10.5 37.5L14 27.2 32.6 8.6c1.3-1.2 3-1.1 4.2.1l2.6 2.7c1.1 1.2 1 3-.2 4.1L20.6 34 10.5 37.5z'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M14.2 27.4l6.3 6.4M29.8 11.6l6.6 6.5M12.4 32.6l3 3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --fo-mr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cfilter id='c' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' seed='3' result='g'/%3E%3CfeColorMatrix in='g' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.9' result='a'/%3E%3CfeComposite in='d' in2='a' operator='in'/%3E%3C/filter%3E%3Cg filter='url(%23c)' fill='none' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23c8e6d2' opacity='.22' transform='translate(30 26) rotate(-10 15 15) scale(0.625)'%3E%3Cpath vector-effect='non-scaling-stroke' d='M24 6.5l5 11.6 12.6 1.1-9.7 8.2 3 12.4L24 33.1l-10.8 6.6 2.9-12.3-9.6-8.3 12.6-1z'/%3E%3C/g%3E%3Cg stroke='%23a6d8b6' opacity='.34' transform='translate(66 6) rotate(10 25 25) scale(1.042)'%3E%3Cpath vector-effect='non-scaling-stroke' d='M17.4 31.4c-4.8-3.6-6.7-8.2-5.5-13.4 1.3-5.2 6-8.8 12.1-8.8 6.1.1 10.7 3.7 12 8.8 1.2 5.3-.8 9.8-5.6 13.4l-.6 4.4H18z'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M18.6 39.8c3.6.4 7.3.4 10.9 0M20.5 43.6c2.4.3 4.8.3 7.1 0M24 2.8v3.4M8.5 9l2.4 2.4M39.5 9l-2.4 2.4M22 25.8l2 3.2 2-3.2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
footer:is(.foot,#sx-foot) .wrap{position:relative;z-index:1}
footer:is(.foot,#sx-foot)::after{
  content:"";position:absolute;z-index:0;left:0;right:0;bottom:0;display:block;width:auto;height:220px;margin:0;padding:0;
  font:400 0/0 var(--font,"Inter",sans-serif);letter-spacing:0;text-indent:0;transform:none;opacity:1;
  color:transparent;-webkit-text-fill-color:transparent;user-select:none;-webkit-user-select:none;pointer-events:none;
  background:var(--fo-dl) left 4px bottom 0/300px 220px no-repeat,var(--fo-dr) right 4px bottom 0/300px 220px no-repeat;
  -webkit-mask:none;mask:none
}
html body footer:is(.foot,#sx-foot)::after{font-size:0!important}   /* outranks marketing-shell.css's old wordmark min(22vw,420px)!important */
/* a soft fade-in as the footer scrolls into view (where scroll-driven animations exist and motion is welcome) */
@keyframes fo-chalk{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    footer:is(.foot,#sx-foot)::after{animation:fo-chalk linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  }
}
/* swarm R42 site-shared-footer: on very wide screens (2560) the corner tiles sat at the viewport walls, 550px from the
   1200px column, and read as stray marks. Keep each 300px tile at most 20px outside the column (no change below ~1850px). */
@media (min-width:1860px){
  footer:is(.foot,#sx-foot)::after{background-position:left max(4px,calc(50% - 920px)) bottom 0,right max(4px,calc(50% - 920px)) bottom 0}
}

/* swarm R28 site-shared: the tall side doodles in --fo-dl/--fo-dr reach 98px in from each viewport edge and 164px up
   from the bottom; below 1340px the outer margin beside the 1136px .wrap is under 102px, so they drew across the
   nonprofit and legal lines (both LTR and RTL). Use the compact 135x72 bottom-padding pair whenever side margins are narrower. */
@media (max-width:1339px){
  footer:is(.foot,#sx-foot)::after{height:72px;background:var(--fo-ml) left 4px bottom 0/135px 72px no-repeat,var(--fo-mr) right 4px bottom 0/135px 72px no-repeat}
}
@media (max-width:1100px){
  footer:is(.foot,#sx-foot) .wrap{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:0;column-gap:24px}   /* R10: 12px more per link column for long words */
  footer:is(.foot,#sx-foot) :is(.brand,.foot-about>p:not(.small),.social,.foot-about a.mail,.legal p:first-child){grid-column:1/-1}
  footer:is(.foot,#sx-foot) .foot-grid>nav{grid-row:6;margin-top:48px}
  footer:is(.foot,#sx-foot) .foot-about .small{grid-row:7}
  footer:is(.foot,#sx-foot) .legal p:last-child{grid-row:8}
}
@media (max-width:720px){
  footer:is(.foot,#sx-foot){padding-top:64px}
  footer:is(.foot,#sx-foot) .wrap{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;padding:0 24px}
  footer:is(.foot,#sx-foot) .foot-grid>nav{grid-row:auto;margin-top:40px}
  footer:is(.foot,#sx-foot) .foot-grid>nav:nth-of-type(1),footer:is(.foot,#sx-foot) .foot-grid>nav:nth-of-type(2){grid-row:6}
  footer:is(.foot,#sx-foot) .foot-grid>nav:nth-of-type(3),footer:is(.foot,#sx-foot) .foot-grid>nav:nth-of-type(4){grid-row:7}
  footer:is(.foot,#sx-foot) .foot-about .small{grid-row:8;margin-top:48px}
  footer:is(.foot,#sx-foot) .legal p:last-child{grid-row:9}
  footer:is(.foot,#sx-foot)::after{height:64px;background:var(--fo-ml) left 2px bottom 0/120px 64px no-repeat,var(--fo-mr) right 2px bottom 0/120px 64px no-repeat}
}

/* social icons: Stellar's own footer icons (from the original site footer), drawn as masks so the link text stays the accessible name */
footer:is(.foot,#sx-foot) .social a[href*="twitter.com"]{--ico:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/%3E%3C/svg%3E')}
footer:is(.foot,#sx-foot) .social a[href*="instagram.com"]{--ico:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"/%3E%3C/svg%3E')}
footer:is(.foot,#sx-foot) .social a[href*="facebook.com"]{--ico:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/%3E%3C/svg%3E')}
footer:is(.foot,#sx-foot) .social a[href*="youtube.com"]{--ico:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/%3E%3C/svg%3E')}
footer:is(.foot,#sx-foot) .social a[href*="discord.gg"]{--ico:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/%3E%3C/svg%3E')}
footer:is(.foot,#sx-foot) .social a[href*="tiktok.com"]{--ico:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"%3E%3Cpath d="M8.45095 19.7926C8.60723 18.4987 9.1379 17.7743 10.1379 17.0317C11.5688 16.0259 13.3561 16.5948 13.3561 16.5948V13.2197C13.7907 13.2085 14.2254 13.2343 14.6551 13.2966V17.6401C14.6551 17.6401 12.8683 17.0712 11.4375 18.0775C10.438 18.8196 9.90623 19.5446 9.7505 20.8385C9.74562 21.5411 9.87747 22.4595 10.4847 23.2536C10.3345 23.1766 10.1815 23.0889 10.0256 22.9905C8.68807 22.0923 8.44444 20.7449 8.45095 19.7926ZM22.0352 6.97898C21.0509 5.90039 20.6786 4.81139 20.5441 4.04639H21.7823C21.7823 4.04639 21.5354 6.05224 23.3347 8.02482L23.3597 8.05134C22.8747 7.7463 22.43 7.38624 22.0352 6.97898ZM28 10.0369V14.293C28 14.293 26.42 14.2312 25.2507 13.9337C23.6179 13.5176 22.5685 12.8795 22.5685 12.8795C22.5685 12.8795 21.8436 12.4245 21.785 12.3928V21.1817C21.785 21.6711 21.651 22.8932 21.2424 23.9125C20.709 25.246 19.8859 26.1212 19.7345 26.3001C19.7345 26.3001 18.7334 27.4832 16.9672 28.28C15.3752 28.9987 13.9774 28.9805 13.5596 28.9987C13.5596 28.9987 11.1434 29.0944 8.96915 27.6814C8.49898 27.3699 8.06011 27.0172 7.6582 26.6277L7.66906 26.6355C9.84383 28.0485 12.2595 27.9528 12.2595 27.9528C12.6779 27.9346 14.0756 27.9528 15.6671 27.2341C17.4317 26.4374 18.4344 25.2543 18.4344 25.2543C18.5842 25.0754 19.4111 24.2001 19.9423 22.8662C20.3498 21.8474 20.4849 20.6247 20.4849 20.1354V11.3475C20.5435 11.3797 21.2679 11.8347 21.2679 11.8347C21.2679 11.8347 22.3179 12.4734 23.9506 12.8889C25.1204 13.1864 26.7 13.2483 26.7 13.2483V9.91314C27.2404 10.0343 27.7011 10.0671 28 10.0369Z"/%3E%3Cpath d="M26.7009 9.91314V13.2472C26.7009 13.2472 25.1213 13.1853 23.9515 12.8879C22.3188 12.4718 21.2688 11.8337 21.2688 11.8337C21.2688 11.8337 20.5444 11.3787 20.4858 11.3464V20.1364C20.4858 20.6258 20.3518 21.8484 19.9432 22.8672C19.4098 24.2012 18.5867 25.0764 18.4353 25.2553C18.4353 25.2553 17.4337 26.4384 15.668 27.2352C14.0765 27.9539 12.6788 27.9357 12.2604 27.9539C12.2604 27.9539 9.84473 28.0496 7.66995 26.6366L7.6591 26.6288C7.42949 26.4064 7.21336 26.1717 7.01177 25.9257C6.31777 25.0795 5.89237 24.0789 5.78547 23.7934C5.78529 23.7922 5.78529 23.791 5.78547 23.7898C5.61347 23.2937 5.25209 22.1022 5.30147 20.9482C5.38883 18.9122 6.10507 17.6625 6.29444 17.3494C6.79597 16.4957 7.44828 15.7318 8.22233 15.0919C8.90538 14.5396 9.6796 14.1002 10.5132 13.7917C11.4144 13.4295 12.3794 13.2353 13.3565 13.2197V16.5948C13.3565 16.5948 11.5691 16.028 10.1388 17.0317C9.13879 17.7743 8.60812 18.4987 8.45185 19.7926C8.44534 20.7449 8.68897 22.0923 10.0254 22.991C10.1813 23.0898 10.3343 23.1775 10.4845 23.2541C10.7179 23.5576 11.0021 23.8221 11.3255 24.0368C12.631 24.8632 13.7249 24.9209 15.1238 24.3842C16.0565 24.0254 16.7586 23.2167 17.0842 22.3206C17.2888 21.7611 17.2861 21.1978 17.2861 20.6154V4.04639H20.5417C20.6763 4.81139 21.0485 5.90039 22.0328 6.97898C22.4276 7.38624 22.8724 7.7463 23.3573 8.05134C23.5006 8.19955 24.2331 8.93231 25.1734 9.38216C25.6596 9.61469 26.1722 9.79285 26.7009 9.91314Z"/%3E%3Cpath d="M4.48926 22.7568V22.7594L4.57004 22.9784C4.56076 22.9529 4.53074 22.8754 4.48926 22.7568Z"/%3E%3Cpath d="M10.5128 13.7916C9.67919 14.1002 8.90498 14.5396 8.22192 15.0918C7.44763 15.7332 6.79548 16.4987 6.29458 17.354C6.10521 17.6661 5.38897 18.9168 5.30161 20.9528C5.25223 22.1068 5.61361 23.2983 5.78561 23.7944C5.78543 23.7956 5.78543 23.7968 5.78561 23.798C5.89413 24.081 6.31791 25.0815 7.01191 25.9303C7.2135 26.1763 7.42963 26.4111 7.65924 26.6334C6.92357 26.1457 6.26746 25.5562 5.71236 24.8839C5.02433 24.0451 4.60001 23.0549 4.48932 22.7626C4.48919 22.7605 4.48919 22.7584 4.48932 22.7564V22.7527C4.31677 22.2571 3.95431 21.0651 4.00477 19.9096C4.09213 17.8736 4.80838 16.6239 4.99775 16.3108C5.4985 15.4553 6.15067 14.6898 6.92509 14.0486C7.608 13.4961 8.38225 13.0567 9.21598 12.7484C9.73602 12.5416 10.2778 12.3891 10.8319 12.2934C11.6669 12.1537 12.5198 12.1415 13.3588 12.2575V13.2196C12.3808 13.2349 11.4148 13.4291 10.5128 13.7916Z"/%3E%3Cpath d="M20.5438 4.04635H17.2881V20.6159C17.2881 21.1983 17.2881 21.76 17.0863 22.3211C16.7575 23.2167 16.058 24.0253 15.1258 24.3842C13.7265 24.923 12.6326 24.8632 11.3276 24.0368C11.0036 23.823 10.7187 23.5594 10.4844 23.2567C11.5962 23.8251 12.5913 23.8152 13.8241 23.341C14.7558 22.9821 15.4563 22.1734 15.784 21.2774C15.9891 20.7178 15.9864 20.1546 15.9864 19.5726V3H20.4819C20.4819 3 20.4315 3.41188 20.5438 4.04635ZM26.7002 8.99104V9.9131C26.1725 9.79263 25.6609 9.61447 25.1755 9.38213C24.2352 8.93228 23.5026 8.19952 23.3594 8.0513C23.5256 8.1559 23.6981 8.25106 23.8759 8.33629C25.0192 8.88339 26.1451 9.04669 26.7002 8.99104Z"/%3E%3C/svg%3E')}
footer:is(.foot,#sx-foot) .social a[href*="linkedin.com"]{--ico:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 382 382"%3E%3Cpath d="M347.445,0H34.555C15.471,0,0,15.471,0,34.555v312.889C0,366.529,15.471,382,34.555,382h312.889  C366.529,382,382,366.529,382,347.444V34.555C382,15.471,366.529,0,347.445,0z M118.207,329.844c0,5.554-4.502,10.056-10.056,10.056  H65.345c-5.554,0-10.056-4.502-10.056-10.056V150.403c0-5.554,4.502-10.056,10.056-10.056h42.806  c5.554,0,10.056,4.502,10.056,10.056V329.844z M86.748,123.432c-22.459,0-40.666-18.207-40.666-40.666S64.289,42.1,86.748,42.1  s40.666,18.207,40.666,40.666S109.208,123.432,86.748,123.432z M341.91,330.654c0,5.106-4.14,9.246-9.246,9.246H286.73  c-5.106,0-9.246-4.14-9.246-9.246v-84.168c0-12.556,3.683-55.021-32.813-55.021c-28.309,0-34.051,29.066-35.204,42.11v97.079  c0,5.106-4.139,9.246-9.246,9.246h-44.426c-5.106,0-9.246-4.14-9.246-9.246V149.593c0-5.106,4.14-9.246,9.246-9.246h44.426  c5.106,0,9.246,4.14,9.246,9.246v15.655c10.497-15.753,26.097-27.912,59.312-27.912c73.552,0,73.131,68.716,73.131,106.472  L341.91,330.654L341.91,330.654z"/%3E%3C/svg%3E')}
footer:is(.foot,#sx-foot) .social a[href*="github.com"]{--ico:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/%3E%3C/svg%3E')}
/* normal bottom padding again (the doodles sit in the corners, not in a band of their own) */
footer:is(.foot,#sx-foot){overflow:hidden;padding-bottom:72px!important;margin-bottom:0!important}
@media (max-width:720px){footer:is(.foot,#sx-foot){padding-bottom:64px!important}}
/* final global pass 2026-10-22: header on translated pages (shares this file, loaded after /_home/rework.css).
   gen_locale.py collapses the nav to the menu button below a width it estimates per language. For ru, hu, ha, bg and el
   that estimate is 3 to 14 px short, so the header ran past the page edge just above it. Slightly tighter link padding
   on translated pages between 900 and 1180 px gives that margin back (English pages keep their spacing). */
@media (min-width:900px) and (max-width:1180px){
  html:not([lang|="en"]) .nav-in :is(.nav-link,.dd-btn){padding-inline:6px}
}
/* the dropdown chevrons were shrunk to nothing when long labels filled the row (ru, hy): keep them whole */
.nav-in .dd-btn svg{flex:none}
@media (min-width:900px) and (max-width:1060px){
  html:not([lang|="en"]) .nav-in :is(.nav-link,.dd-btn){padding-inline:5px;font-size:13.5px}
  html:not([lang|="en"]) .nav-in .dd-btn{gap:3px}
}
/* swarm R14 site-shared: the 13.5px squeeze above shrank every translated header at 1024 (de, ja), though only bg, el,
   hu and ha need it, and only below 980px (t/sw14ss_loc.py over all 62 locales). From 980px they get 14px, the
   English header's own step down, with every locale still inside the 32px page margin. Tamil keeps 14px to 1072px:
   at 15px its Launch App ran 8px into the right margin between 1061 and 1069px. */
@media (min-width:980px) and (max-width:1060px){
  html:not([lang|="en"]) .nav-in :is(.nav-link,.dd-btn){padding-inline:6px;font-size:14px}
}
@media (min-width:1061px) and (max-width:1072px){
  html[lang|="ta"] .nav-in :is(.nav-link,.dd-btn){padding-inline:6px;font-size:14px}
}
/* swarm round 1 (site-shared, 2026-10-23): the open group's chevron in the phone menu was green, which only carries
   meaning on this site (checks, correct answers, focus); it turns ink like the open label next to it */
.nav .mm-btn[aria-expanded=true] svg{color:var(--ink)}
/* swarm round 2 (site-shared): opening the phone menu below the top of a page showed nothing. The menu locks scrolling
   with overflow:hidden on <html>, which stops body's overflow-x:hidden passing to the viewport, so body became its own
   scroll box and the sticky header (and the menu hung under it) stayed up at the page top, off screen, while the rest
   of the page went inert. clip trims sideways overflow the same way but never makes a scroll box. */
html body{overflow-x:clip}
/* Skip link (swarm R5 site-shared): "Skip to content" scrolled #main to the very top of the screen, so its first 69px
   sat under the sticky header. The margin keeps the jump clear of the header (on these pages main starts right under
   it, so the page simply stays at the top and the next Tab lands in the content). */
main#main{scroll-margin-top:88px}
/* swarm R6 site-shared: hover in the open menus was invisible. Dropdown items and the "Courses"/"AP Score Calculator"
   row hovered to --soft, which in dark mode is the same colour as the panel (#1a1f1d on #1a1f1d) and in light mode is
   one shade off white. Phone menu sub-links hovered to --soft on the --paper menu (1 shade off). All of them now take
   --soft-2, the shade the header's own nav pills use on hover, in both themes.
   swarm R26 site-shared: html gives (0,2,2), outranking the inline <style> .mm-sub a:hover{background:var(--soft)} (0,2,1)
   loaded after this file on the 11 wide-breakpoint locale pages. */
html :is(.dd-item,.mm-sub a):is(:hover,:focus-visible),html .dd-foot:hover{background-color:var(--soft-2)}
html.dark .nav :is(.dd-item:hover,.dd-item:focus-visible,.dd-foot:hover){background-color:var(--soft-2)}
.nav :is(.dd-item,.dd-foot):focus-visible{border-radius:10px}
/* swarm R7 site-shared: "Skip to content" appeared on top of the header at 12px and covered only the logo mark, whose
   tail still peeked out beside it, so the header looked broken for the first Tab. It now drops in just below the
   header (69px, 65px under 900) as a pill like every other button, with the float shadow, and the header stays whole. */
html .skip{border-radius:999px;box-shadow:none}
/* R7 verifier: the float shadow only while the pill is shown; at rest (top -60px) its 24px drop left a grey smudge at the top-left */
html .skip:focus,html .skip:focus-visible{border-radius:999px;box-shadow:var(--shadow-float)}
html .skip:focus{top:77px}
@media (max-width:899px){html .skip:focus{top:73px}}
html[dir=rtl] .skip{left:auto;right:16px}   /* ar, he, fa, ur: starts on the reading side */
/* swarm R9: site-keys.js moves focus onto <main> when the skip pill is used; the page itself gets no ring */
main#main[tabindex="-1"]:focus{outline:none!important}   /* over rework.css's :focus-visible{...!important} */
/* swarm R8 site-shared: where am I. Only About, Donate, Get Involved, Blog and Our Story marked the current page, each
   from its own page file (and the dropdown item with --soft, invisible on the dark panel). The menu buttons never did.
   site-keys.js now sets aria-current on the exact link and .sx-cur on the group that holds the page (Courses on
   /courses/, a category or a course; Features on a feature or calculator; Resources on the blog, a post, Our Story,
   Why Stellar). One look everywhere: the hover pill held on, and in the phone menu the same small dot as About. */
.nav .nav-in :is(.nav-link[aria-current=page],.dd-btn.sx-cur){color:var(--ink);background:var(--soft-2)}
html:is(.dark,:not(.dark)) .nav .dd-panel a[aria-current=page]{background-color:var(--soft-2)}   /* above rework.css's dark .dd-foot list */
/* swarm R12 site-shared: the "Courses" and "AP Score Calculator" rows at the bottom of the Courses and Features
   dropdowns were a bordered card inside the panel (box in a box). They are an open row now, set off from the items by
   a 1px hairline like the site's dividers, and hover to the same --soft-2 box as the items above them. */
html:is(.dark,:not(.dark)) .nav .dd .dd-panel .dd-foot{position:relative;margin-top:11px;background-color:transparent;border-color:transparent}
html:is(.dark,:not(.dark)) .nav .dd .dd-panel .dd-foot::before{content:"";position:absolute;left:12px;right:12px;top:-6px;height:1px;background:var(--line);pointer-events:none}
html:is(.dark,:not(.dark)) .nav .dd .dd-panel .dd-foot:is(:hover,:focus-visible,[aria-current=page]){background-color:var(--soft-2)}
.nav .mobile-menu :is(.mm-link[aria-current=page],.mm-btn.sx-cur,.mm-sub a[aria-current=page]){color:var(--ink)}
.nav .mobile-menu :is(.mm-link[aria-current=page],.mm-btn.sx-cur,.mm-sub a[aria-current=page])::after{content:"";flex:none;
  width:6px;height:6px;margin-inline-start:auto;border-radius:50%;background:currentColor}
.nav .mobile-menu .mm-btn.sx-cur::after{order:1;margin-inline-end:14px}
.nav .mobile-menu .mm-btn.sx-cur svg{order:2}
.nav .mobile-menu .mm-btn.sx-cur-has[aria-expanded=true]::after{visibility:hidden}
/* swarm R8 site-shared: light/dark switches in one frame. site-keys.js sets html.sx-flip for the two frames around a
   toggle click or Ctrl/Cmd+Shift+L, so nothing (the header bar above all) fades from the old theme's colours. */
html.sx-flip,html.sx-flip *,html.sx-flip *::before,html.sx-flip *::after{transition:none!important}
/* swarm R14 site-shared: at 320px (iPhone SE, small Androids) the logo box shrank and "Stellar" ran 13px under the
   theme button's tap area. Below 340px the header trims 17px of spacing so the wordmark stays whole, clear of it. */
@media (max-width:339px){
  .nav .nav-cta{gap:4px}
  .nav .nav-cta .sx-theme{width:36px}
  .nav .nav-cta .btn{padding:0 10px}
  .nav .nav-in>.brand{gap:6px;flex:none}
  .nav .nav-in>.brand img{width:28px;height:28px}
}
/* swarm R15 site-shared: in the phone menu the Resources links (Blog, Our Story, Why Stellar) started 4px right of the
   Courses and Features links above them (rework.css gives the icon-less .mm-plain list 12px, the others have 8px since
   their tiles are hidden). One 8px start for every group. */
.nav .mobile-menu .mm-plain a{padding-left:8px}
/* swarm R16 site-shared: (1) an in-page link or a #link from another page (why-stellar #g-math, feature #flow-title,
   course #final-title, home #how-title) scrolled its heading up to 15px under the 69px sticky header, so it was hidden.
   Every public page now stops 88px short, the same offset base.css gives the old #sx-nav pages. Tab focus scrolling
   honours it too. :where keeps it at zero weight, so pages with their own offset (get-involved, our-story) keep theirs.
   (2) From 380px to 899px the menu button was a 44px box beside the 40px theme button and 40px Launch App pill,
   4px taller and 2px higher. It is 40px like them now (it already was below 380px). */
:where(html){scroll-padding-top:88px}
.nav .nav-cta .menu-btn{width:40px;height:40px}
/* swarm R43 site-shared: sr-only utility for accessible headings and landmark outlines */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* swarm R43 site-shared: in the open phone menu the close button was a boxed button with a border and background while the theme button beside it was borderless. Give both the same borderless look with standard hover box. Also ensure the 44px minimum touch target on touch screens matches the theme button. */
:is(.nav,#sx-nav) .menu-btn[aria-expanded=true]{background:none!important;border:0!important;color:var(--text)}
:is(.nav,#sx-nav) .menu-btn[aria-expanded=true]:hover{background:var(--soft-2)!important;color:var(--ink);border:0!important}
:is(.nav,#sx-nav) .menu-btn[aria-expanded=true]:active{background:var(--soft-2)!important;color:var(--ink);border:0!important}
/* swarm R45 site-shared: on phones the tap that opens the menu leaves the button in :hover, so the close button kept a
   grey box (plain in light, nearly invisible in dark) while the theme button beside it is plain. Touch screens get the
   grey only while the finger is down, as tokens.css does for the theme button. */
@media (hover:none){
  html :is(.nav,#sx-nav) .menu-btn[aria-expanded=true]:hover{background:none!important;color:var(--text)}
  html :is(.nav,#sx-nav) .menu-btn[aria-expanded=true]:active{background:var(--soft-2)!important;color:var(--ink)}
}
@media (hover:none){
  html .nav .nav-cta .menu-btn,html #sx-nav .nav-cta .menu-btn{position:relative}
  html .nav .nav-cta .menu-btn::after,html #sx-nav .nav-cta .menu-btn::after{content:"";position:absolute;inset:-2px}
}
@media (max-width:339px){
  html .nav .nav-cta .menu-btn::after,html #sx-nav .nav-cta .menu-btn::after{inset:-2px -4px}
}
/* swarm R16 site-shared (b): at 340px to 379px (375 = most iPhones) the theme button, Launch App and the menu button
   sat 6px apart, so the 2px focus ring at its 3px offset touched the neighbouring control. The same 8px gap as at every
   other width, and the ring 2px out on these three controls (1px in the 4px-gap layout below 340px), leave clear space. */
@media (min-width:340px) and (max-width:379px){.nav .nav-cta{gap:8px}}
.nav .nav-cta>:focus-visible{outline-offset:2px}
@media (max-width:339px){.nav .nav-cta>:focus-visible{outline-offset:1px}}
/* swarm R16 site-shared (c): the translated-header squeeze above (5 to 6px link padding, 13.5 to 14px type, 900 to
   1180px) was applied to every language, though only the long ones need it, so Japanese, Arabic, Spanish and the rest got
   hover boxes that hugged their labels at laptop widths. t/sw16ss_loc.py forced the English spacing (15px, 8px padding
   below 1024px, 10px above) on all 62 locales at 900 to 1180px: these 31 language codes (35 locale pages) fit at every width with the logo,
   the links and Launch App clear of each other and inside the 32px margin, so they keep the English header. */
@media (min-width:900px) and (max-width:1180px){
  html:is([lang|="ar"],[lang|="bn"],[lang|="cs"],[lang|="da"],[lang|="es"],[lang|="et"],[lang|="fa"],[lang|="gu"],[lang|="he"],[lang|="hi"],[lang|="hr"],[lang|="id"],[lang|="it"],[lang|="ja"],[lang|="kn"],[lang|="ko"],[lang|="lv"],[lang|="mr"],[lang|="ms"],[lang|="ne"],[lang|="no"],[lang|="or"],[lang|="pa"],[lang|="pt"],[lang|="sk"],[lang|="sl"],[lang|="sw"],[lang|="te"],[lang|="th"],[lang|="ur"],[lang|="zh"]) .nav-in :is(.nav-link,.dd-btn){padding-inline:8px;font-size:15px}
  html:is([lang|="ar"],[lang|="bn"],[lang|="cs"],[lang|="da"],[lang|="es"],[lang|="et"],[lang|="fa"],[lang|="gu"],[lang|="he"],[lang|="hi"],[lang|="hr"],[lang|="id"],[lang|="it"],[lang|="ja"],[lang|="kn"],[lang|="ko"],[lang|="lv"],[lang|="mr"],[lang|="ms"],[lang|="ne"],[lang|="no"],[lang|="or"],[lang|="pa"],[lang|="pt"],[lang|="sk"],[lang|="sl"],[lang|="sw"],[lang|="te"],[lang|="th"],[lang|="ur"],[lang|="zh"]) .nav-in .dd-btn{gap:5px}
}
@media (min-width:1024px) and (max-width:1180px){
  html:is([lang|="ar"],[lang|="bn"],[lang|="cs"],[lang|="da"],[lang|="es"],[lang|="et"],[lang|="fa"],[lang|="gu"],[lang|="he"],[lang|="hi"],[lang|="hr"],[lang|="id"],[lang|="it"],[lang|="ja"],[lang|="kn"],[lang|="ko"],[lang|="lv"],[lang|="mr"],[lang|="ms"],[lang|="ne"],[lang|="no"],[lang|="or"],[lang|="pa"],[lang|="pt"],[lang|="sk"],[lang|="sl"],[lang|="sw"],[lang|="te"],[lang|="th"],[lang|="ur"],[lang|="zh"]) .nav-in :is(.nav-link,.dd-btn){padding-inline:10px}
}
/* swarm R16 site-shared (d): from 721px to 1100px the logo, the line, the icons, the mail link and the copyright were
   one narrow stack on the left (about 330px of 700 to 1040px), with the right two thirds of the top block empty. The
   icons, mail and copyright now sit in columns 3 and 4, left-aligned on the Company column below, beside the logo and
   the line. The mail link is one line at every width here, so the copyright starts a fixed 58px down the same cell. */
@media (min-width:721px) and (max-width:1100px){
  footer:is(.foot,#sx-foot) :is(.brand,.foot-about>p:not(.small)){grid-column:1/3}
  footer:is(.foot,#sx-foot) .wrap .social:not(.sx-z){grid-column:3/-1;grid-row:1;align-self:center;margin-top:0}   /* outranks the 1/-1 rule above */
  footer:is(.foot,#sx-foot) .foot-about a.mail{grid-column:3/-1;grid-row:2;align-self:start;margin-top:20px}
  footer:is(.foot,#sx-foot) .legal p:first-child{grid-column:3/-1;grid-row:2;align-self:start;margin-top:58px}
}
/* swarm R17 site-shared (e): in light mode the header links were #474f4c on the 32 pages that load
   pages/about/marketing-shell.css (about, donate, blog, legal, why-stellar, features ...), whose ".nav-link,.dd-btn
   {color:var(--text)}" comes after rework.css, and #2d3531 on the home page and everywhere else. li> gives (0,1,1): above
   that (0,1,0) rule, below the hover, open and current-page rules (0,2,0 and up) and html.dark (0,2,1). */
li>:is(.nav-link,.dd-btn){color:#2d3531}
/* swarm R17 site-shared (f): the footer stayed #0f1713 in dark mode, a shade from the #121614 page above it.
   DESIGN-PRINCIPLES "Current system" 10 and tokens.css --foot-bg give #0c120f in dark mode. */
html.dark footer:is(.foot,#sx-foot){--fo-bg:#0c120f}
/* swarm R17 site-shared (g): in dark mode a hovered or open header link kept its resting #c3cbc7, because rework.css's
   "html.dark .nav-link{color:var(--text)}" (0,2,1) outranks its own :hover and [aria-expanded] rules (0,2,0). Light
   mode turns them ink, so dark mode does too (the current-page link already is). */
html.dark li>:is(.nav-link,.dd-btn):is(:hover,[aria-expanded=true]){color:var(--ink)}
/* swarm R18 site-shared (h): from 900 to 979px every translated header without its own menu breakpoint was squeezed to
   13.5px type and 5px link padding, though t/sw18ss_f.py (14px, 6px padding, logo 16px+ clear, Launch App 12px clear
   and inside the 32px margin) shows most fit at 14px, the English header's own step down. These get 14px from the
   first width where they fit. Below those widths bg, el, hu, pl, si, fr and ha keep the squeeze, and uk keeps it to
   979px (it only fits at 14px from 980px). */
@media (min-width:900px) and (max-width:979px){
  html:is([lang|="de"],[lang|="fi"],[lang|="la"],[lang|="lt"],[lang|="nl"],[lang|="ro"],[lang|="sr"],[lang|="sv"],[lang|="tr"],[lang|="vi"]) .nav-in :is(.nav-link,.dd-btn){padding-inline:6px;font-size:14px}
}
@media (min-width:910px) and (max-width:979px){html[lang|="si"] .nav-in :is(.nav-link,.dd-btn){padding-inline:6px;font-size:14px}}
@media (min-width:920px) and (max-width:979px){html[lang|="pl"] .nav-in :is(.nav-link,.dd-btn){padding-inline:6px;font-size:14px}}
@media (min-width:930px) and (max-width:979px){html:is([lang|="bg"],[lang|="el"],[lang|="hu"]) .nav-in :is(.nav-link,.dd-btn){padding-inline:6px;font-size:14px}}
@media (min-width:950px) and (max-width:979px){html[lang|="fr"] .nav-in :is(.nav-link,.dd-btn){padding-inline:6px;font-size:14px}}
@media (min-width:970px) and (max-width:979px){html[lang|="ha"] .nav-in :is(.nav-link,.dd-btn){padding-inline:6px;font-size:14px}}
/* swarm R19 site-shared (i): in the phone menu the links inside an open group ("All courses", "AP Courses" ...) started
   4px right of their group title ("Courses"), which read as a misalignment, not a level. They now sit a clear 12px in
   (16px inside their 8px-wider hover box), so the group reads as a tree, and the hover box keeps its padding.
   swarm R26 site-shared: border-radius:10px here (0,3,1) outranks the inline <style> on the 11 wide-breakpoint locale
   pages, which repeated the old 12px off-scale radius above 900px. */
.nav .mobile-menu .mm-sub a{padding-inline:16px 12px;border-radius:10px}
/* swarm R20 site-shared (j): the phone menu's course search row (added by site-keys.js). Course search had no way in
   without a keyboard. It reads as the site's input: 48px, 10px corners, 1px --line-2 edge, muted 16px words, the same
   search icon as the palette. Only shown inside the phone menu, so no breakpoint is needed. */
.nav .mobile-menu .sx-mm-search{display:flex;align-items:center;gap:10px;width:100%;height:48px;margin:8px 0 6px;padding-inline:14px;
  border:1px solid var(--line-2);border-radius:10px;background:var(--sheet,#fff);color:var(--muted);font:400 16px/1 var(--font);
  text-align:start;cursor:pointer;transition:border-color 160ms cubic-bezier(.2,.7,.2,1),background-color 160ms cubic-bezier(.2,.7,.2,1)}
.nav .mobile-menu .sx-mm-search svg{width:18px;height:18px;flex:none}
.nav .mobile-menu .sx-mm-search:hover{background:var(--soft);border-color:var(--muted)}
/* swarm R21 site-shared (k): Tab onto a control at the bottom edge of the window left it cut off (the /courses/ search
   field at 1440x860 sat 829 to 873, 13px below the window). Chrome counts a mostly visible control as in view and does
   not scroll. A 64px bottom inset makes the edge strip count as hidden, so Tab scrolls such a control fully into view.
   Zero weight like the top inset above. footer.css is not loaded in /app/. */
:where(html){scroll-padding-bottom:64px}
/* swarm R22 site-shared (l): the focus ring on a footer column link or the mail link sat 7px above and below the words
   but 3px from the first and last letter, so it read as squeezed at the sides. 6px of side padding, given back by a
   -6px margin, balances the ring (9px at the sides) without moving any text or changing the columns. */
footer:is(.foot,#sx-foot) ul a,footer:is(.foot,#sx-foot) .foot-about a.mail{padding-inline:6px;margin-inline:-6px}
/* swarm R23 site-shared (m): the focus ring on the "Stellar" logo link (header on every public page, footer brand)
   ended 3px after the last letter while the nav items' rings sit in padded boxes, so it hugged the "r". Same cure as
   (l): 6px of side padding given back by a -6px margin, so the ring clears the word by 9px and nothing moves. */
.nav .nav-in>.brand,footer:is(.foot,#sx-foot) .brand{padding-inline:6px;margin-inline:-6px}
/* swarm R29 site-shared footer: (1) the focus ring on a social icon sat 3px outside its 32px box (38px ring in a row
   with 1px gaps), so it ran up to 4px from the next icon and read as crowded. The box already pads the 18px glyph by
   7px, so the ring now traces the box itself, the same rounded square as the hover fill, 8px clear of each neighbour.
   (2) At tablet and phone widths the footer's short paragraphs ended on a lone word or two ("States.", "rights
   reserved.", "any way."). text-wrap:pretty evens the last line (a handful of paragraphs, no layout cost). */
footer:is(.foot,#sx-foot) .social a:focus-visible{outline-offset:0}
footer:is(.foot,#sx-foot) :is(.foot-about>p,.legal p){text-wrap:pretty}
footer:is(.foot,#sx-foot) .legal p:first-child{text-wrap:balance}   /* the copyright: pretty leaves "All / rights reserved." */
/* swarm R30 site-shared footer: the hairline over the nonprofit line was a fixed #24302a in both themes, though the
   band darkens to #0c120f in dark mode, so it sat a step brighter there than in light mode. It now uses tokens.css
   --foot-line (white at 10%), the same faint step above the band in both themes. */
footer:is(.foot,#sx-foot){--fo-line:var(--foot-line,#24302a)}
/* swarm R25 site-shared (n): (1) 11 locale pages (bg, el, fr-CA, fr-FR, ha, hu, hy, pl, ru, ta, uk) carry an inline
   <style> after this file that repeats rework.css's mobile-menu block up to their wider menu breakpoints (919 to
   1179px), with .mobile-menu{background:#fff} (0,1,0), which outranked rework.css's .mobile-menu{background:var(--paper)}
   and painted a white menu sheet in dark mode. .nav .mobile-menu (0,2,0) keeps --paper in both themes.
   (2) On RTL pages (ar, he, fa, ur) the dropdown chevron's -3px pull sat on the physical right (into the label), the
   bottom-row arrow (.dd-go) pointed right into the text, and the phone menu buttons used text-align:left. */
.nav .mobile-menu{background:var(--paper)}
.nav .mobile-menu :is(.mm-btn,.mm-link){text-align:start}
.nav .dd-btn svg{margin-inline:0 -3px}
html[dir=rtl] .nav .dd-go{scale:-1 1}
html[dir=rtl] .nav .dd-foot:hover .dd-go{translate:-3px 0}
/* swarm R27 site-shared (o): .dd-panel and .mobile-menu delay visibility:hidden by 180 to 220ms so their fade-out can
   play; without pointer-events:none when closed, a fading panel or phone sheet caught clicks on the page under it. */
.nav .dd:not(.open) .dd-panel,.nav .mobile-menu:not(.open){pointer-events:none}
/* swarm R29 site-shared keys (p): two focus rings were cut off by an overflow:hidden parent. The /courses/ category
   tiles (.pb-catl clips to its 16px frame) showed only one 2px green edge, and the home reviews region (#reviews-list
   inside the capped .sx-rvcap, full bleed on phones) lost its sides. Both rings now sit inside their box. */
html .pb-catl a:focus-visible{outline-offset:-4px;border-radius:16px}
html #reviews-list:focus-visible{outline-offset:-2px;border-radius:16px}
/* swarm R31 site-shared keys: two more clipped rings, found by a Tab walk at 390. The home "Ways to help" rows run the
   full width of the overflow:hidden .mission sheet, so their ring lost both sides, and the /competitive-math/ filter
   chips sit 2px below the top of their scroller, so the ring at its 2px offset lost its top edge. */
html .mission a:not(.btn):focus-visible{outline-offset:-3px}
html .cm-chips .cm-chip:focus-visible{outline-offset:0}

/* swarm R30 content / site-shared: language picker button and menu (Inventory row 56 & 130) */
footer:is(.foot,#sx-foot) .locale-picker,
.locale-picker.lang-picker{display:flex;flex-direction:column;gap:10px;margin-top:18px;align-items:flex-start}
.locale-back-en{display:inline-flex;align-items:center;gap:6px;font:500 13px/1.3 var(--font);color:var(--muted);text-decoration:none;padding:5px 9px;border-radius:var(--radius-s,6px);background:var(--soft,#f0f2f1);border:1px solid var(--line,#e7eae8);transition:color var(--dur-1,.15s) var(--ease,ease),border-color var(--dur-1,.15s) var(--ease,ease)}
.locale-back-en:hover{color:var(--ink,#121614);border-color:var(--muted,#69726e);text-decoration:none}
.locale-back-en:focus-visible{outline:2px solid var(--green,#13863f);outline-offset:2px}
.locale-select-wrap{position:relative;display:inline-flex;align-items:center;max-width:100%}
.locale-globe-icon{position:absolute;left:10px;pointer-events:none;color:var(--muted,#69726e)}
html[dir=rtl] .locale-globe-icon{left:auto;right:10px}
html[dir=rtl] .locale-back-en svg{transform:scaleX(-1)}
.locale-select{appearance:none;-webkit-appearance:none;max-width:260px;padding:6px 28px 6px 30px;font:400 13px/1.4 var(--font);color:var(--ink,#121614);background-color:var(--sheet,#fff);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2369726e' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;border:1px solid var(--line,#e7eae8);border-radius:var(--radius-s,6px);cursor:pointer;transition:border-color var(--dur-1,.15s) var(--ease,ease)}
html[dir=rtl] .locale-select{padding:6px 30px 6px 28px;background-position:left 8px center}
.locale-select:hover{border-color:var(--muted,#69726e)}
.locale-select:focus-visible{outline:2px solid var(--green,#13863f);outline-offset:2px}
html.dark .locale-select{background-color:var(--sheet,#161d19);border-color:var(--line,#24302a);color:var(--ink,#eef1ef)}
html.dark .locale-back-en{background:var(--soft,#1e2622);border-color:var(--line,#24302a)}
/* swarm R31 site-shared footer: (1) the language picker on the 62 locale pages used the page's light tokens, so in
   light mode a white select and a pale grey "English" chip sat on the always-dark band, and its auto-placed grid cell
   moved it between the brand block and the link columns at 721 to 1100px but under the legal lines elsewhere. It is
   now one row of two outlined pills in the band's own colours, placed last at every width (the legal-bar pattern of
   Stripe and Reducto footers), with a dark native list (color-scheme) and the footer's #3fb26b focus ring.
   (2) Phone footer links were 25px tap targets. Inline links take 8px block padding below 721px, so each hit box
   fills its whole 33px row with no layout change (inline padding does not move lines). */
footer:is(.foot,#sx-foot) .locale-picker{grid-column:1/-1;grid-row:8;flex-flow:row wrap;align-items:center;gap:10px 12px;margin:28px 0 0}
footer:is(.foot,#sx-foot) :is(.locale-back-en,.locale-select){min-height:44px;border:1px solid rgba(255,255,255,.16);border-radius:999px;
  background-color:transparent;color:var(--fo-link);font:400 13.5px/1.3 var(--font,"Inter",sans-serif);
  transition:color .15s ease,border-color .15s ease,background-color .15s ease}
footer:is(.foot,#sx-foot) .locale-back-en{padding-block:0;padding-inline:12px 14px;gap:7px}
footer:is(.foot,#sx-foot) .locale-select{color-scheme:dark;padding:0 32px 0 34px;max-width:min(280px,100%);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a9b6af' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-position:right 12px center}
html[dir=rtl] footer:is(.foot,#sx-foot) .locale-select{padding:0 34px 0 32px;background-position:left 12px center}
footer:is(.foot,#sx-foot) .locale-select option{background:#0f1713;color:#eef3ef}
footer:is(.foot,#sx-foot) .locale-globe-icon{left:13px;color:var(--fo-link)}
html[dir=rtl] footer:is(.foot,#sx-foot) .locale-globe-icon{left:auto;right:13px}
footer:is(.foot,#sx-foot) :is(.locale-back-en,.locale-select):hover{color:var(--fo-hi);border-color:rgba(255,255,255,.34);background-color:#1b2620}
footer:is(.foot,#sx-foot) :is(.locale-back-en,.locale-select):focus-visible{outline:2px solid #3fb26b!important;outline-offset:2px}
@media (max-width:1100px){footer:is(.foot,#sx-foot) .locale-picker{grid-row:9}}
/* swarm R52 site-shared (idle 1027-0206 locale item 9, idle 1027-0350 item 8): the two language pills were 36px, under the
   site's 44px tap target, and the select's 13.5px text made iPhones zoom the page when it opened. 44px everywhere, and
   16px text on phones (the shared rule for public fields in tokens.css (r52)). */
@media (max-width:767px){footer:is(.foot,#sx-foot) :is(.locale-back-en,.locale-select){font-size:16px}}
@media (max-width:720px){
  footer:is(.foot,#sx-foot) .locale-picker{grid-row:10}
  footer:is(.foot,#sx-foot) :is(.locale-back-en,.locale-select){min-height:44px}
  footer:is(.foot,#sx-foot) ul a{padding-block:8px}
}
/* swarm R59 site-shared footer (idle 1027-1939 locale item 1): the language select was capped at 280px, so 21 of 130
   locale/width checks cut the current label off mid-word with no ellipsis ("简体中文 (Chinese (Simplifie" at 390,
   "Español (Latinoamérica) (Spanish (Latin..." even at 1440). The pill now sizes to its own label (field-sizing) and
   may grow to the picker row, with an ellipsis only if a label is wider than a phone. */
footer:is(.foot,#sx-foot) .locale-select-wrap{min-width:0}
footer:is(.foot,#sx-foot) .locale-select{field-sizing:content;max-width:100%;min-width:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
/* swarm R32 site-shared footer (scout R28 item 18): on phones and tablets the eight social icons were 32px boxes 1px
   apart. Up to 1100px each is a 44px box (Apple HIG / Material 3 tap target) in one row that never wraps, shrinking
   evenly below 375px. The 18px glyphs stay put: -13px side margins keep the first glyph on the text edge and -6px block
   margins keep the row's 32px footprint, so nothing above or below moves. */
@media (max-width:1100px){
  footer:is(.foot,#sx-foot) .wrap .social:not(.sx-z){flex-wrap:nowrap;gap:0;margin-inline:-13px;margin-block:18px -6px}
  footer:is(.foot,#sx-foot) .social a{width:44px;height:44px;flex:0 1 44px;min-width:0}
}
@media (min-width:721px) and (max-width:1100px){footer:is(.foot,#sx-foot) .wrap .social:not(.sx-z){margin-block:-6px}}
/* swarm R33 site-shared footer: (1) R32 verdict: footer column links were 33px tap targets on phones and 25px on
   tablets. Up to 1100px (touch widths) each link is a 44px row (Apple HIG / Material 3), its words centred where they
   were, so the row pitch grows from 33 to 44px and the first and last words stay on their old lines (-12px ul margins).
   Wrapped long labels (de, ru) keep 4px above and below. (2) Idle 01:02 item 7: "Sponsorship Prospectus" opened a PDF
   with no cue. Links to a .pdf now carry a small outlined "PDF" tag in the band's dim colour. */
footer:is(.foot,#sx-foot) ul a[href$=".pdf"]::after{content:"PDF";display:inline-block;margin-inline-start:7px;padding:2px 5px;
  border:1px solid rgba(255,255,255,.18);border-radius:6px;font:500 10.5px/1.2 var(--font,"Inter",sans-serif);letter-spacing:.04em;
  color:var(--fo-dim);vertical-align:1px}
@media (max-width:1100px){
  footer:is(.foot,#sx-foot) ul{gap:0;margin-block:-12px}
  footer:is(.foot,#sx-foot) ul a{display:flex;align-items:center;flex-wrap:wrap;width:fit-content;max-width:calc(100% + 12px);
    min-width:44px;min-height:44px;padding-block:4px;box-sizing:border-box}
  footer:is(.foot,#sx-foot) ul a[href$=".pdf"]::after{vertical-align:baseline}
}

/* swarm R34 site-shared footer: (1) Scout R32 item 18: on touch screens (<=1100px), brand and support email links were
   under the 44px minimum touch target (32px and 26px). Both now have 44px hit areas, and on tablet widths (721-1100px)
   the copyright paragraph clears the expanded mail link with 72px margin-top without overlap. Also elevates locale picker
   to 44px touch height on tablets. (2) Desktop column balance: column 5 was 175px wide, causing the R33 "PDF" badge to
   break onto an orphaned line alone under "Sponsorship Prospectus". Rebalanced grid columns and 28px gap keep the link
   and badge together on one clean line at desktop widths. */
@media (min-width:1101px){
  footer:is(.foot,#sx-foot) .wrap{grid-template-columns:minmax(0,1.44fr) repeat(3,minmax(0,0.90fr)) minmax(0,1.16fr);column-gap:28px}
}
@media (max-width:1100px){
  footer:is(.foot,#sx-foot) .brand{min-height:44px;display:inline-flex;align-items:center}
  footer:is(.foot,#sx-foot) .foot-about a.mail{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box}
  footer:is(.foot,#sx-foot) :is(.locale-back-en,.locale-select){min-height:44px}
}
@media (min-width:721px) and (max-width:1100px){
  footer:is(.foot,#sx-foot) .legal p:first-child{margin-top:72px}
}

/* swarm R36 site-shared footer (R34 scout item 18, R35 verdict open item): on touch screens (<=1100px),
   ul a used display:flex with flex-wrap:wrap, causing the text node and ::after pseudo-element to be separate
   flex items. On narrow columns (320-390px phones and 768px tablet), the text node wrapped and forced the "PDF"
   badge onto an orphaned 3rd line (66px tall). Using display:block with align-content:center keeps single-line
   links vertically centered at 44px minimum touch height while allowing multi-line text and the inline-block
   "PDF" badge to flow naturally together on line 2 (48px tall). */
@media (max-width:1100px){
  footer:is(.foot,#sx-foot) ul a{display:block;align-content:center}
  footer:is(.foot,#sx-foot) ul a[href$=".pdf"]::after{vertical-align:1px}
}

/* swarm R38 site-shared footer: (1) Idle 0601 item 9: up to 1100px a link that wraps to two lines ("Sponsorship
   Prospectus PDF" at 320 to 768, "Sponsoring-Unterlagen" on de) was 47 to 48px tall, so every row under it sat 3 to 4px
   lower than the row beside it in the next column. 1px block padding fits two 19.6px lines in the same 44px row, so
   both columns keep one 44px pitch (the grid-rows pattern of the Stripe and Linear footers), single lines stay centred.
   (2) R37 verdict open item: the mail link was a 26px target at desktop widths, under the 32px social icons beside it.
   It is 32px now, its words where they were (6px block padding given back by the margins). */
@media (max-width:1100px){
  footer:is(.foot,#sx-foot) ul a{padding-block:1px}
  footer:is(.foot,#sx-foot) ul a[href$=".pdf"]::after{vertical-align:0;line-height:1.1}
}
@media (min-width:1101px){
  footer:is(.foot,#sx-foot) .foot-about a.mail{padding-block:6px;margin-block:12px -6px}
}

/* swarm R39 site-shared footer: (1) Hover consistency on external document links: when hovering the Sponsorship
   Prospectus link, the text eased to #eef3ef while the PDF badge remained dimmed (#86948d) with static border.
   Added smooth transition:color .15s ease, border-color .15s ease to ::after and brightened color to var(--fo-hi)
   and border to rgba(255,255,255,.34) on hover. (2) Tactile click and press feedback (DESIGN-REFERENCES.md button
   and interactive control pattern): added :active states for social icons (scale .94), locale return pill (scale .97),
   and footer brand logo (opacity .85), disabled under prefers-reduced-motion. */
footer:is(.foot,#sx-foot) ul a[href$=".pdf"]::after{transition:color .15s ease,border-color .15s ease}
footer:is(.foot,#sx-foot) ul a[href$=".pdf"]:is(:hover,:focus-visible)::after{color:var(--fo-hi);border-color:rgba(255,255,255,.34)}
footer:is(.foot,#sx-foot) .social a:active{transform:scale(.94)}
footer:is(.foot,#sx-foot) .locale-back-en:active{transform:scale(.97)}
footer:is(.foot,#sx-foot) .brand:active{opacity:.85}
@media (prefers-reduced-motion:reduce){
  footer:is(.foot,#sx-foot) :is(.social a,.locale-back-en):active{transform:none}
}

/* swarm R40 site-shared footer: (1) Active press states on remaining interactive footer controls: column links (ul a)
   and support email link (a.mail) drop opacity to .72 on active press, and locale dropdown (.locale-select) brightens
   border to rgba(255,255,255,.45), providing instant tactile feedback on touch and click (DESIGN-REFERENCES.md button
   and control guidelines). (2) Landscape tablet touch targets: coarse pointer devices at viewports > 1100px (e.g. iPad Pro
   12.9 in landscape at 1366px, iPad Air at 1180px, touchscreen laptops) maintain 44px minimum tap targets for column links,
   mail, brand, and social icons, matching Apple HIG and Material 3 without affecting desktop mouse users. (3) Token and option
   consistency: tied --fo-bg and option background to var(--foot-bg) token. */
footer:is(.foot,#sx-foot) :is(ul a,.foot-about a.mail):active{opacity:.72}
footer:is(.foot,#sx-foot) .locale-select:active{border-color:rgba(255,255,255,.45)}
footer:is(.foot,#sx-foot) .locale-select option{background:var(--fo-bg,#0f1713)}
@media (min-width:1101px){
  footer:is(.foot,#sx-foot) ul{gap:0;margin-block:-12px}
  footer:is(.foot,#sx-foot) ul a{display:block;align-content:center;min-height:44px;box-sizing:border-box;padding-block:1px}
  footer:is(.foot,#sx-foot) ul a[href$=".pdf"]::after{vertical-align:0;line-height:1.1}
  footer:is(.foot,#sx-foot) .foot-about a.mail{min-height:44px;display:inline-flex;align-items:center}
  footer:is(.foot,#sx-foot) .brand{min-height:44px;display:inline-flex;align-items:center}
  footer:is(.foot,#sx-foot) .social{display:inline-grid;grid-template-columns:repeat(4,44px);gap:4px 6px;width:fit-content;margin-inline-start:-6px}
  footer:is(.foot,#sx-foot) .social a{width:44px;height:44px}
}

/* swarm R41 site-shared footer: from 1200px (where the .wrap reaches its full 1136px) the tagline's first line
   "Transforming education with AI-powered" is 250.6px in a 250.7px brand column, so it broke at the hyphen into
   "AI- / powered" (de "KI- / gestützten" the same). 16px moves from the Organization column, whose widest line
   (Sponsorship Prospectus + PDF tag, 208px) still fits in its 225px, to the brand column. Link columns 2 to 4 keep
   their 177px, so no translated label wraps anew. */
@media (min-width:1200px){
  footer:is(.foot,#sx-foot) .wrap{grid-template-columns:minmax(0,1.385fr) repeat(3,minmax(0,.92fr)) minmax(0,1.165fr)}
}

/* swarm R44 site-shared footer: (1) Balanced coarse-pointer social matrix above 1100px: on iPad Pro in landscape and
   touch laptops, setting 44px icon widths in the 260px brand column caused arbitrary 6+2 and 5+3 wrapping. Arranged
   coarse-pointer icons into a symmetrical 4x2 matrix (44x44 tap targets) that fits within 194px and aligns with the
   brand margin. (2) Desktop tagline balance at 1101px to 1199px: adjusted initial desktop column share to 1.44fr for
   column 1 so the tagline stays on 3 clean lines without breaking into 4 lines with a trailing orphan word. (3) RTL
   locale return pill padding: switched .locale-back-en to logical padding (padding-inline 12px 14px) so the icon-first
   spacing mirrors properly in RTL reading directions. (4) Document badge focus-visible parity: elevated the PDF badge
   border and color on keyboard focus matching hover. */





/* swarm R45 site-shared (r45): the header's course search button (added by site-keys.js). The light/dark button's
   twin: 40px box, 10px corners, no edge, --text icon at 19px with the same 1.7 stroke, the --soft-2 hover box, the same
   44px tap area on touch. Shown from 561px to 899px (phone menu closed) and from 1121px; below 561px the phone menu has
   its own search row, and from 900px to 1120px the six nav links fill the bar (Russian needs 1108px). */
.nav .nav-cta .sx-search{order:-1;display:none;align-items:center;justify-content:center;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;
  border:0;border-radius:var(--radius-m,10px);background:none;color:var(--text);cursor:pointer;
  transition:background-color 160ms cubic-bezier(.2,.7,.2,1),color 160ms cubic-bezier(.2,.7,.2,1)}
.nav .nav-cta .sx-search svg{width:19px;height:19px;transition:scale 160ms cubic-bezier(.2,.7,.2,1)}
.nav .nav-cta .sx-search:hover{background:var(--soft-2);color:var(--ink)}
.nav .nav-cta .sx-search:active svg{scale:.92}
@media (min-width:561px){.nav .nav-cta .sx-search{display:inline-flex}}
.nav.menu-open .nav-cta .sx-search{display:none}
@media (hover:none){
  .nav .nav-cta .sx-search:hover{background:none;color:var(--text)}
  .nav .nav-cta .sx-search:active{background:var(--soft-2);color:var(--ink)}
}
@media (pointer:coarse),(max-width:1024px){
  .nav .nav-cta .sx-search{position:relative}
  .nav .nav-cta .sx-search::after{content:"";position:absolute;inset:-2px}
}
@media (prefers-reduced-motion:reduce){.nav .nav-cta .sx-search,.nav .nav-cta .sx-search svg{transition:none}}

/* swarm R47 site-shared: desktop header interactive controls hit area (>=44px), tablet nav fit, and mega-menu scrim/centering (scout R45 items 15 and 19) */
:is(.nav,#sx-nav) .nav-in>.brand{min-height:44px;display:inline-flex;align-items:center}
:is(.nav,#sx-nav) :is(.nav-link,.dd-btn){height:44px;min-height:44px}
:is(.nav,#sx-nav) :is(.sx-search,.sx-theme){width:44px;height:44px;min-width:44px;min-height:44px}
:is(.nav,#sx-nav) .nav-cta .btn{height:44px;min-height:44px}

@media (min-width:900px) and (max-width:1120px){
  :is(.nav,#sx-nav) .nav-in{gap:8px}
  :is(.nav,#sx-nav) :is(.nav-link,.dd-btn){padding-inline:6px;font-size:13.5px}
  :is(.nav,#sx-nav) .nav-cta{gap:6px}
}

:is(.nav,#sx-nav):has(.dd.open)::after{content:"";position:fixed;inset:68px 0 0 0;background:rgba(15,20,18,.18);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none;z-index:1}
html.dark :is(.nav,#sx-nav):has(.dd.open)::after{background:rgba(0,0,0,.35)}
@media (min-width:900px){
  :is(.nav,#sx-nav) .dd-wide{left:calc(50% - 330px)!important}
}