/* Uncle Polar Spanish: shared look for the home and Words pages.
   The Pronunciation page keeps its own copy of these rules inline. */
:root{
  --bg:#0f3d2e; --bg2:#0c3325; --surface:#15523c; --frost:#2c6b50; --ink:#f4ecd6; --muted:#9fc4b3;
  --cobalt:#6ec6e8; --saffron:#ffd23e; --saffron-soft:rgba(255,210,62,.22);
  --poppy:#ff5d8f; --ok:#7bd88f; --mango:#ff8e3c; --lilac:#b89cff; --mind:#3bbf9e;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Fredoka',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px; line-height:1.5; -webkit-text-size-adjust:100%;
}
.wrap{max-width:720px; margin:0 auto; padding:24px max(18px, env(safe-area-inset-right,0px)) 96px max(18px, env(safe-area-inset-left,0px))}
@media (min-width:1000px){ .wrap.wide{max-width:1200px; padding-left:32px; padding-right:32px} }
h1,h2,h3{font-family:'Baloo 2','Segoe UI',system-ui,sans-serif; font-weight:800; margin:0}
p{margin:0}
a{color:var(--cobalt)}
.muted{color:var(--muted)}
.small{font-size:.9rem}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--saffron); outline-offset:2px}

/* Header and navigation */
.top{display:flex; gap:11px; align-items:center; flex-wrap:wrap}
.home-link{display:flex; gap:11px; align-items:center; color:inherit; text-decoration:none; border-radius:14px; min-height:44px}
.home-link svg{flex:none}
.brand{font-family:'Baloo 2',system-ui,sans-serif; font-weight:800; font-size:2.275rem; line-height:1.1; color:var(--lilac); white-space:nowrap}
/* Below 1200 px the wordmark shares its row with the trophy only, so it scales with the screen (about 9 px of width per px of font) */
@media (max-width:1199px){ .brand{font-size:clamp(1.2rem, calc((100vw - 175px) / 9), 2.275rem)} }
.site-nav{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.site-nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 14px; white-space:nowrap; border-radius:999px; font-family:'Baloo 2',sans-serif; font-weight:800; color:var(--muted); text-decoration:none; border:1.5px solid transparent}
/* Language tags (Peter, 4 October 2026: make it obvious which language a word is in). Spanish in the colours of the
   Spanish flag, English in blue. Words, not flag emoji, because Windows shows flag emoji as letters. */
.lg{display:inline-flex; align-items:center; vertical-align:middle; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.72rem; letter-spacing:.8px; text-transform:uppercase; line-height:1; padding:5px 10px; border-radius:999px; margin-right:8px; white-space:nowrap; position:relative; top:-.1em}
.lg.es{background:linear-gradient(#c60b1e 0 26%, #ffc400 26% 74%, #c60b1e 74%); color:#40001a; box-shadow:0 0 0 1.5px #c60b1e inset}
.lg.en{background:#1f4fbf; color:#fff; box-shadow:0 0 0 1.5px #fff inset}
.prompt .lg, .ans-word .lg, .tx-big .lg{font-size:.95rem; padding:7px 14px; margin-right:12px; top:-.15em}
.site-nav a:hover{color:var(--ink); border-color:var(--frost)}
.site-nav a[aria-current=page]{color:var(--bg2); background:var(--saffron)}
.site-nav a.nav-signup{color:var(--bg2); background:var(--mango)}
.site-nav a.nav-signup:hover{color:var(--bg2); border-color:var(--ink)}
@media (max-width:1199px){ .site-nav{order:3; width:100%; margin-left:0; justify-content:flex-start; flex-wrap:wrap; gap:2px; background:var(--bg2); border-radius:24px; padding:4px} .site-nav a{flex:1 1 auto; justify-content:center; padding:0 6px; font-size:.95rem} }
@media (max-width:600px){ .site-nav{gap:0} .site-nav a{padding:0 5px; font-size:.88rem} }
@media (max-width:380px){ .site-nav a{padding:0 3px; font-size:.8rem} }
h1{font-size:clamp(2rem,6vw,2.8rem); line-height:1.1}
h1 .hi{color:var(--saffron)}
/* "Spanish" in the title: letters alternate Spanish-flag red and sun yellow */
.flag span:nth-child(odd){color:#ff4b3e} .flag span:nth-child(even){color:var(--saffron)}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
h2{font-size:1.45rem}
.eyebrow{display:block; font-family:'Baloo 2',sans-serif; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--mind); font-size:12px; margin:26px 0 8px}
.intro{margin-top:12px; max-width:52ch}

/* Panels */
.panel{background:var(--surface); border:1px solid var(--frost); border-radius:18px; padding:16px 18px}

/* Controls */
button,input,select{font:inherit; color:inherit}
button{
  min-height:44px; padding:0 18px; border-radius:999px; cursor:pointer;
  border:1.5px solid var(--frost); background:none; color:var(--ink); font-family:'Baloo 2',sans-serif; font-weight:800; transition:transform .1s, filter .1s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
button:hover:not(:disabled){filter:brightness(1.06); border-color:var(--muted)}
button:active:not(:disabled){transform:scale(.98)}
button:disabled{opacity:.45; cursor:not-allowed}
button.primary{background:var(--mango); color:var(--bg2); border-color:transparent}
button.sky{background:var(--cobalt); color:var(--bg2); border-color:transparent}
button.quiet{border-color:transparent; background:transparent; color:var(--muted)}
input[type=search],input[type=text],select{
  min-height:48px; padding:0 14px; border-radius:12px; border:1.5px solid var(--frost);
  background:var(--bg2); width:100%;
}
/* Drop-downs (Peter, 4 October 2026: a proper Uncle Polar chevron on every one): the browser's own arrow is
   replaced by a chunky rounded chevron in sun yellow, in a small round badge that fills sun yellow on hover and focus. */
select{-webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; padding-right:48px;
  background-color:var(--bg2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2315523c'/%3E%3Cpath d='M8.5 11.5 14 17l5.5-5.5' fill='none' stroke='%23ffd23e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:26px 26px;
  transition:border-color .15s}
select:hover,select:focus-visible{border-color:var(--saffron);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23ffd23e'/%3E%3Cpath d='M8.5 11.5 14 17l5.5-5.5' fill='none' stroke='%230c3325' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
select::-ms-expand{display:none}
select option{background:var(--bg2); color:var(--ink)}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.check{display:inline-flex; align-items:center; gap:8px; min-height:44px; cursor:pointer}
.check input{width:20px; height:20px; accent-color:var(--mango)}
.seg{display:inline-flex; flex-wrap:wrap; border:1.5px solid var(--frost); border-radius:24px; padding:3px; background:var(--bg2)}
.seg label{position:relative}
.seg input{position:absolute; opacity:0; inset:0; cursor:pointer}
.seg span{display:inline-block; min-width:52px; text-align:center; padding:8px 12px; border-radius:999px; font-family:'Baloo 2',sans-serif; font-weight:800; cursor:pointer}
.seg input:checked + span{background:var(--cobalt); color:var(--bg2)}
.seg input:focus-visible + span{outline:3px solid var(--saffron)}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,20px);
  max-width:min(92vw,520px); background:var(--ink); color:var(--bg2); padding:12px 18px; border-radius:14px;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:10; font-weight:700;
}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* Footer */
.foot{margin-top:56px; padding-top:16px; border-top:1px solid var(--frost)}

/* Scrollbars: sun to mango to flamingo pill on a deep green track */
::-webkit-scrollbar{width:14px; height:14px}
::-webkit-scrollbar-track{background:var(--bg2); border-radius:999px}
::-webkit-scrollbar-thumb{border-radius:999px; border:3px solid var(--bg2); background-clip:padding-box;
  background-color:var(--mango); background-image:linear-gradient(180deg, var(--saffron), var(--mango) 55%, var(--poppy))}
::-webkit-scrollbar-thumb:horizontal{background-image:linear-gradient(90deg, var(--saffron), var(--mango) 55%, var(--poppy))}
::-webkit-scrollbar-thumb:hover{background-image:linear-gradient(180deg, var(--cobalt), var(--lilac) 55%, var(--poppy))}
::-webkit-scrollbar-thumb:horizontal:hover{background-image:linear-gradient(90deg, var(--cobalt), var(--lilac) 55%, var(--poppy))}
::-webkit-scrollbar-button{display:none}
::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){ *{scrollbar-color:var(--mango) var(--bg2)} }

@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }

/* Phones and tablets (Peter, 4 October 2026): each tool opens at the top, straight under the menu, so nobody has to
   scroll down to it. The page's title, intro and time line move below the tool. Pages opt in with .wrap.tool-first
   and mark their tool with .tool-top (or the flashcard pages' .study, .done and #loading). */
@media (max-width:999px){
  .wrap.tool-first{display:flex; flex-direction:column}
  .wrap.tool-first > *{order:6}
  .wrap.tool-first > header.top{order:0}
  .wrap.tool-first > .subnav{order:1; margin-top:14px}
  .wrap.tool-first > .tool-top{order:2}
  .wrap.tool-first > .eyebrow, .wrap.tool-first > h1, .wrap.tool-first > .intro, .wrap.tool-first > .up-time{order:3}
  .wrap.tool-first > .eyebrow{margin-top:30px}
  .wrap.tool-first > footer{order:9}
  /* Flashcard pages: the two columns dissolve so the card can come first. */
  .wrap.tool-first > .layout:not(.tool-top){display:contents}
  .wrap.tool-first .col-main > *, .wrap.tool-first .col-side > *{order:5}
  .wrap.tool-first .study, .wrap.tool-first .done, .wrap.tool-first #loading, .wrap.tool-first .lesson{order:2}
  .wrap.tool-first .stats, .wrap.tool-first #scopeBox, .wrap.tool-first .path{order:4}
  .wrap.tool-first .levels, .wrap.tool-first #groupsBox, .wrap.tool-first #settingsBox, .wrap.tool-first #listBox{order:5}
}

/* After a Wrong: grades not open yet (Hard first, then Good, Easy the next day) */
button.g-off, button.g-off:hover{opacity:.3; cursor:not-allowed; filter:grayscale(.6); transform:none}
.glimit{margin:8px 0 0; font-size:.86rem; color:var(--muted, #9fc4b3); text-align:center; flex-basis:100%}

/* "Your words" levels as a numbered path, 1 to 4 (Peter, 4 October 2026: make the order obvious) */
.levels .lvbar{flex-direction:row-reverse}
.levels .lvpath{margin:10px 0 0}
.levels .lvsteps{display:flex; align-items:stretch; gap:4px; margin-top:6px}
.levels .lvstep{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; padding:8px 4px 7px; border-radius:14px; background:var(--bg2); border-top:3px solid var(--c)}
.levels .lvstep .n{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--c); color:#0c3325; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.78rem; line-height:1}
.levels .lvstep b{font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.3rem; line-height:1.1; font-variant-numeric:tabular-nums}
.levels .lvstep .t{font-size:.8rem; color:var(--muted); line-height:1.2}
.lv-s-new{--c:#5f9a80} .lv-s-new .n{color:var(--ink)} .lv-s-learning{--c:var(--poppy)} .lv-s-familiar{--c:var(--saffron)} .lv-s-known{--c:var(--ok)}
.lvar{flex:none; align-self:center; color:var(--muted); font-weight:700; font-size:1rem}
@media (max-width:380px){ .lvar{display:none} .levels .lvsteps{gap:6px} }

/* Chevrons (Peter, 4 October 2026: proper Uncle Polar chevrons everywhere): the same chunky rounded chevron as the
   drop-downs, drawn in the colour of the text around it, in place of the thin › and ‹ characters. */
.chev{display:inline-block; width:.62em; height:.62em; margin-left:.32em; vertical-align:-.02em; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 2.5 11 8l-5.5 5.5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 2.5 11 8l-5.5 5.5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.chev.l{transform:scaleX(-1); margin:0 .32em 0 0}

/* Spain or Latin America (assets/variant.js; Peter, 5 October 2026) */
.vswitch{display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:#0c3325; border:1px solid #2c6b50; flex-wrap:wrap}
.vswitch button{font-family:'Baloo 2',sans-serif; font-weight:700; font-size:.95rem; color:#9fc4b3; background:transparent; border:0; border-radius:999px; padding:8px 14px; min-height:44px; cursor:pointer; display:inline-flex; align-items:center; gap:6px}
.vswitch button[aria-pressed="true"]{background:#ffd23e; color:#0c3325}
.vswitch button:focus-visible{outline:2px solid #ffd23e; outline-offset:2px}
.vswitch.sm button{font-size:.85rem; padding:5px 10px; min-height:36px}
.vflag{display:inline-block; width:22px; height:15px; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.vflag.es{background:linear-gradient(#c60b1e 0 25%, #ffc400 25% 75%, #c60b1e 75%)}
.vflag.mx{background:linear-gradient(90deg, #006847 0 33.3%, #fff 33.3% 66.6%, #ce1126 66.6%)}
html[data-variant="mx"] .lg.es{background:linear-gradient(90deg, #006847 0 33%, #f4ecd6 33% 67%, #ce1126 67%); color:#0c3325; box-shadow:0 0 0 1.5px #006847 inset}
html[data-variant="mx"] .es-only, html[data-variant="es"] .mx-only, html:not([data-variant]) .mx-only{display:none !important}

/* Gender colours (Peter, 6 October 2026): masculine nouns and their article in sky, feminine in flamingo, wherever a
   noun shows with its article (UPWords.genderHtml). The Vocab setting "Colour nouns by gender" adds html.gn-off. */
.gn.g-m, .gn .g-m{color:var(--cobalt)}
.gn.g-f, .gn .g-f{color:var(--poppy)}
.gn.g-mf{color:inherit}
html.gn-off .gn.g-m, html.gn-off .gn.g-f, html.gn-off .gn .g-m, html.gn-off .gn .g-f{color:inherit}
.gn-legend .gn{font-weight:700}

/* Say it (assets/sayit.js): say your answer, get a pronunciation score */
.front-btns{display:flex; gap:8px; align-items:stretch; flex-wrap:wrap}
.front-btns .show{flex:1 1 200px; width:auto}
.si-wrap{display:flex; flex-direction:column; gap:6px; flex:0 1 auto}
.si-btn{min-height:44px; border-color:var(--frost); color:var(--ink); white-space:nowrap}
.si-btn.primary{background:var(--poppy); color:#40001a; border-color:transparent}
.si-btn.on{background:var(--poppy); color:#40001a; border-color:transparent}
.front-btns.say-first{flex-direction:column}
.front-btns.say-first .si-wrap{order:-1; flex:none}
.front-btns.say-first .si-btn{width:100%; min-height:52px; font-size:1.05rem}
.front-btns.say-first .show{flex:none; width:100%; background:none; color:var(--ink); border-color:var(--frost)}
.si-meter{display:block; height:6px; border-radius:999px; background:var(--bg2); overflow:hidden}
.si-meter i{display:block; height:100%; width:0; background:var(--poppy); transition:width .1s linear}
.si-note{display:block; max-width:44ch}
.si-score{background:var(--bg2); border-radius:14px; padding:10px 12px; margin-bottom:12px}
.si-line{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.si-rate{display:inline-flex; align-items:center; gap:6px; font-family:'Baloo 2',sans-serif; font-weight:800}
.si-rate .st{color:var(--saffron); letter-spacing:1px} .si-rate .st i{font-style:normal; color:var(--frost)}
.si-sc{display:inline-grid; place-items:center; min-width:44px; height:32px; padding:0 8px; border-radius:999px; font-family:'Baloo 2',sans-serif; font-weight:800; color:var(--bg2)}
.si-sc.g{background:var(--ok)} .si-sc.y{background:var(--saffron)} .si-sc.r{background:var(--poppy)}
.si-words{margin-top:6px; font-size:1.1rem}
.si-words b{font-weight:700} .si-words b.g{color:var(--ok)} .si-words b.y{color:var(--saffron)} .si-words b.r{color:var(--poppy)} .si-words b.x{color:var(--poppy); text-decoration:line-through}
.si-score .si-me{min-height:40px; padding:0 10px; margin-top:4px}

/* Memory hooks (Vocab and Phrases): your own reminder on the answer side, and hidden until tapped on the front */
.hook{margin-top:12px}
.hook textarea{width:100%; min-height:64px; margin:6px 0 8px; padding:10px 12px; border-radius:12px; border:1.5px solid var(--frost); background:var(--bg2); color:var(--ink); font:inherit; resize:vertical}
.hook .hk-add{padding:0 10px; color:var(--lilac)}
.hookshow{background:rgba(184,156,255,.12); border:1px dashed var(--lilac); border-radius:14px; padding:8px 12px; overflow-wrap:anywhere}
.hookshow .hk-lab{font-family:'Baloo 2',sans-serif; font-weight:800; color:var(--lilac)}
.hookshow .hk-edit{min-height:36px; padding:0 8px; font-size:.9rem}
.hookfront{margin-top:8px}
.hookhint{min-height:40px; padding:0 12px; color:var(--lilac); border:1px dashed var(--lilac)}
.hooktext{margin-top:6px; color:var(--lilac); overflow-wrap:anywhere}

/* Word families (Vocab answer and Dictionary) */
.family{margin-top:10px; color:var(--ink); overflow-wrap:anywhere}
.family .fam-lab{font-family:'Baloo 2',sans-serif; font-weight:800; color:var(--mind)}
.family a{color:inherit; text-decoration:none; border-bottom:1px dashed var(--frost)}
.family a:hover{border-bottom-color:var(--cobalt)}

/* Grammar from mistakes: one suggested lesson on the finished screens */
.suggest{margin:14px auto 0; max-width:520px; text-align:left; background:var(--bg2); border:1px solid var(--frost); border-left:4px solid var(--saffron); border-radius:14px; padding:12px 14px}
.suggest .sg-title{font-family:'Baloo 2',sans-serif; font-weight:800; color:var(--saffron)}
.suggest .sg-text{margin-top:4px}
.suggest .sg-btns{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px}
.suggest .sg-go{display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px; background:var(--saffron); color:var(--bg2); font-family:'Baloo 2',sans-serif; font-weight:800; text-decoration:none}

/* Where you met it (Vocab answer and the workout's word cards): the Reading sentence kept on the card (ctx) */
.ctx{margin-top:12px; text-align:left; background:var(--bg2); border-left:4px solid var(--cobalt); border-radius:12px; padding:8px 12px}
.ctx .ctx-lab{display:block; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.78rem; letter-spacing:.6px; text-transform:uppercase; color:var(--cobalt)}
.ctx p{margin-top:2px; overflow-wrap:anywhere} .ctx .ctx-w{color:var(--saffron)}
.ctx .ctx-open{display:inline-flex; align-items:center; min-height:44px; color:var(--muted); font-size:.9rem; text-decoration:none}
.ctx .ctx-open:hover{color:var(--ink)}

/* Neat and ordered (Peter, 6 October 2026: "I generally want things neat and ordered rather than freestyle").
   Groups of option buttons sit in equal columns, buttons that belong together share one width and the menu is a grid.
   The html prefix lets these rules win over each page's own looser layout. */
html .site-nav{display:grid; grid-template-columns:repeat(6,auto); justify-content:end; gap:4px 6px}
html .site-nav a{justify-content:center}
@media (max-width:1199px){ html .site-nav{grid-template-columns:repeat(6,1fr); justify-content:stretch} }
@media (max-width:899px){ html .site-nav{grid-template-columns:repeat(4,1fr)} }
@media (max-width:600px){ html .site-nav{grid-template-columns:repeat(3,1fr)} }
html .vswitch{display:inline-grid; grid-template-columns:1fr 1fr}
html .vswitch button{justify-content:center}
html .seg{display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; max-width:100%}
html .seg label{display:grid}
html .seg span{display:flex; align-items:center; justify-content:center; min-width:0}
html .seg.lv{display:grid; grid-auto-flow:row; grid-template-columns:repeat(3,1fr)}
@media (max-width:600px){ html #settingsBox .seg{display:grid; grid-auto-flow:row; grid-template-columns:repeat(auto-fit,minmax(88px,1fr))} }
html .scope #lvlChips{display:grid; grid-template-columns:repeat(4,1fr)}
html .scope #lvlChips button{padding:0 4px; min-width:0}
html #kinds.chips{display:grid; grid-template-columns:repeat(5,1fr)}
html #kinds.chips button{padding:0 4px; min-width:0}
@media (max-width:600px){ html #kinds.chips{grid-template-columns:repeat(3,1fr)} }
html .ltabs{display:grid; grid-template-columns:repeat(4,1fr)}
html .ltabs button{padding:0 6px}
@media (max-width:600px){ html .ltabs{grid-template-columns:repeat(2,1fr)} }
html .lvls{display:grid; grid-template-columns:repeat(4,1fr)}
html .lvls button{padding:0 6px; min-width:0}
@media (max-width:600px){ html .lvls{grid-template-columns:repeat(2,1fr)} }
html .lcard > .row{display:grid; grid-auto-flow:column; grid-auto-columns:1fr}
html .lcard > .row > *{flex:none !important}
html .tk-tabs{display:inline-grid; grid-template-columns:1fr 1fr}
html .tk-speed{display:grid; grid-template-columns:auto repeat(4,1fr); max-width:520px}
@media (max-width:600px){ html .tk-speed{grid-template-columns:repeat(4,1fr); max-width:none} html .tk-speed > span{grid-column:1/-1} html .tk-tabs{display:grid} }
html .gate .row{display:grid; grid-template-columns:1fr 1fr; max-width:520px; width:100%}
@media (max-width:600px){ html .gate .row{grid-template-columns:1fr} }
html .goal-opts{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
html .goal-opts button{justify-content:flex-start}
html .entry .tools{display:grid; grid-template-columns:repeat(3,1fr)}
html .entry .tools > *{justify-content:center}
html .yt > .row{display:grid; grid-template-columns:repeat(auto-fill,minmax(124px,1fr)); gap:8px}
html .ls .stage .yt > .row{display:contents}
html .decw .try{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
html .wp-right > button{min-width:132px; justify-content:center}
@media (max-width:999px){ html .wp-right > button{min-width:118px} }
html .flame .f{justify-content:flex-start}
html .flame{display:grid; grid-template-columns:1fr}
html .morelinks{display:grid; grid-template-columns:1fr 1fr}
html .morelinks a{justify-content:center; white-space:nowrap; padding:0 8px; font-size:.9rem}
html .morelinks:has(#sunLink:not([hidden])){grid-template-columns:repeat(3,1fr)}
@media (max-width:420px){ html .morelinks:has(#sunLink:not([hidden])){grid-template-columns:1fr 1fr} html .morelinks #sunLink{grid-column:1/-1} }
html .gains .gain:last-child:nth-child(odd){grid-column:1/-1}
@media (min-width:780px){ html .gains .gain:last-child:nth-child(odd){grid-column:auto} }
@media (min-width:1000px){ html .grpbtns .grp b{white-space:nowrap; font-size:.84rem} }
html .akeys{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; max-width:360px}
html .akeys button{min-width:0; padding:0}