/* The AI Engineering Guide — shared landing-site styles.
   Used by the root hub (index.html) and every /browse/<category>/ page.
   Page-specific structure lives in the HTML shells; behaviour in site.js. */
:root{
  --bg:#101513; --bg-2:#131a17; --ink:#f4f1e8; --soft:#c7d0c8; --muted:#9fb0a8;
  --line:rgba(255,255,255,.10); --card:#18221e; --card-2:#212d28;
  --teal:#7fd8c4; --purple:#c3a8ee; --sky:#8fc4f0; --indigo:#8fc4f0; --green:#a8dc8f; --amber:#f5d76e;
  --sans:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --hand:'Caveat',cursive; --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="light"]{
  --bg:#f7f8fb; --bg-2:#eef1f6; --ink:#12151b; --soft:#333b48; --muted:#5b6472;
  --line:rgba(10,15,25,.12); --card:rgba(255,255,255,.7); --card-2:#fff;
}
/* per-level page themes — the whole page shifts, exactly like the home page */
html[data-lv="advanced"]{--bg:#141416;--bg-2:#17171a;--card:#1c1c20;--card-2:#26262b;--line:rgba(255,255,255,.10)}
html[data-lv="executive"]{--bg:#0c0c0f;--bg-2:#131316;--card:#17171b;--card-2:#202027;--ink:#ffffff;--soft:#d6d6d6;--muted:#adadad;--line:rgba(255,255,255,.12)}
html{--hoveracc:#7fd8c4}
html[data-lv="advanced"]{--hoveracc:#f5b183}
html[data-lv="executive"]{--hoveracc:#8764B8}
/* ambient background layers — copied from the home page for a matching feel */
.bggrid{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(244,241,232,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(244,241,232,.022) 1px,transparent 1px);background-size:52px 52px;-webkit-mask-image:radial-gradient(ellipse 92% 82% at 50% 28%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 92% 82% at 50% 28%,#000 55%,transparent 100%)}
.bgvign{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 94% 88% at 50% 32%,transparent 56%,rgba(0,0,0,.5) 100%)}
.bgglow{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(820px 480px at 84% -12%,color-mix(in srgb,var(--acc,var(--teal)) 17%,transparent),transparent 60%),radial-gradient(720px 560px at 6% 112%,color-mix(in srgb,var(--acc,var(--teal)) 12%,transparent),transparent 62%),radial-gradient(1300px 1000px at 50% 46%,color-mix(in srgb,var(--acc,var(--teal)) 6%,transparent),transparent 72%);transition:background .5s ease}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 50%,color-mix(in srgb,var(--acc,var(--teal)) 13%,var(--bg)) 100%) fixed; color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100dvh; padding-bottom:56px; transition:background .5s ease; }
a{ color:inherit; transition:background .15s ease,box-shadow .15s ease,color .15s ease; }
a:not(.lvpill):not(.brand):hover{ text-decoration:none; color:var(--hoveracc); background:color-mix(in srgb,var(--hoveracc) 13%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--hoveracc) 55%,transparent); border-radius:8px; padding:4px 10px; margin:-4px -10px; }
.amb{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 40%,transparent 100%);
          mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 40%,transparent 100%); }
[data-theme="light"] .amb{ background-image:linear-gradient(rgba(10,15,25,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(10,15,25,.03) 1px,transparent 1px); }

/* topbar — brand left, search centered, controls right (applies everywhere) */
.topbar{ position:sticky; top:0; z-index:40; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
  padding:14px clamp(16px,4vw,40px); background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line); transition:background-color .5s ease; }
.brand{ justify-self:start; display:flex; align-items:center; gap:10px; font-weight:700; text-decoration:none; color:inherit; }
.logo{ width:38px; align-self:stretch; border-radius:9px; background:#0e1613; display:grid; place-items:center; border:1px solid var(--line); }
.brand-name{ display:flex; flex-direction:column; line-height:1.15; font-weight:700; font-size:15px; }
.brand-name small{ display:block; font-weight:500; color:var(--muted); font-size:12px; margin-top:5px; }
.tb-sp{ flex:1; }
/* centered header search (mirrors the home page .hsbar) */
.hsearch{ justify-self:center; position:relative; width:100%; max-width:540px; }
.hsbar{ display:flex; align-items:center; gap:9px; background:color-mix(in srgb,var(--ink) 5%,transparent);
  border:1px solid var(--line); border-radius:11px; padding:9px 13px; transition:border-color .18s,box-shadow .18s; }
.hsbar:focus-within{ border-color:var(--acc,var(--teal)); box-shadow:0 0 0 3px color-mix(in srgb,var(--acc,var(--teal)) 16%,transparent); }
.hsbar svg{ width:17px; height:17px; color:var(--muted); flex:none; }
.hsbar input{ flex:1; min-width:0; background:none; border:0; outline:0; color:var(--ink); font:inherit; font-size:14px; }
.hsbar .hintk{ font:600 11px var(--sans); color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:2px 7px; }
.tb-right{ justify-self:end; display:inline-flex; align-items:center; gap:10px; }
.lvpill{ display:inline-flex; align-items:center; font:700 12.5px var(--sans); letter-spacing:.03em; padding:6px 15px; border-radius:999px; color:var(--acc,var(--teal)); background:color-mix(in srgb,var(--acc,var(--teal)) 20%,transparent); border:1px solid color-mix(in srgb,var(--acc,var(--teal)) 48%,transparent); white-space:nowrap; text-decoration:none; cursor:pointer; transition:background .16s, border-color .16s; }
.lvpill:hover{ background:color-mix(in srgb,var(--acc,var(--teal)) 32%,transparent); border-color:color-mix(in srgb,var(--acc,var(--teal)) 72%,transparent); }
/* level pill carries its brand colour (identity), matching the home nav toggle */
html[data-lv="foundational"] .lvpill{ color:#14201b; background:#7fd8c4; border-color:transparent; }
html[data-lv="advanced"] .lvpill{ color:#14201b; background:#f5b183; border-color:transparent; }
html[data-lv="executive"] .lvpill{ color:#ffffff; background:#8764B8; border-color:transparent; }
html[data-lv="foundational"] .lvpill:hover{ background:color-mix(in srgb,#7fd8c4 86%,#000); border-color:transparent; }
html[data-lv="advanced"] .lvpill:hover{ background:color-mix(in srgb,#f5b183 86%,#000); border-color:transparent; }
html[data-lv="executive"] .lvpill:hover{ background:color-mix(in srgb,#8764B8 82%,#fff); border-color:transparent; }
/* header search results dropdown (mirrors the home page) */
.results{ position:absolute; left:50%; right:auto; transform:translateX(-50%); top:calc(100% + 8px);
  width:min(760px,92vw); background:var(--bg-2); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.5); overflow:hidden; display:none; text-align:left; max-height:70vh; overflow-y:auto; z-index:60; }
.results.show{ display:block; }
.rgroup{ padding:8px; } .rgroup+.rgroup{ border-top:1px solid var(--line); }
.rglab{ font:600 11px var(--sans); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:6px 10px 4px; }
.ri{ display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:9px; cursor:pointer; color:inherit; text-decoration:none; }
.ri:hover{ background:var(--card); }
.ri .d{ width:8px; height:8px; border-radius:50%; flex:none; }
.ri .tx{ min-width:0; }
.ri .tt{ font-size:14px; color:var(--ink); line-height:1.3; text-decoration:none; display:block; }
.ri .sn{ font-size:12.5px; color:var(--muted); line-height:1.3; margin-top:1px; }
.ri .sn .trk{ color:var(--acc); font-weight:600; }
.lvl{ display:inline-block; font:700 9px system-ui,sans-serif; letter-spacing:.05em; text-transform:uppercase; padding:1px 6px; border-radius:5px; border:1px solid transparent; white-space:nowrap; vertical-align:middle; margin-right:2px; }
.lvl-foundational{ color:#dce1dc; background:color-mix(in srgb,#dce1dc 14%,transparent); border-color:color-mix(in srgb,#dce1dc 30%,transparent); }
.lvl-advanced{ color:#d8cfbe; background:color-mix(in srgb,#d8cfbe 14%,transparent); border-color:color-mix(in srgb,#d8cfbe 30%,transparent); }
.lvl-executive{ color:#cbcbd4; background:color-mix(in srgb,#cbcbd4 14%,transparent); border-color:color-mix(in srgb,#cbcbd4 30%,transparent); }
.ri .sn mark,.ri .tt mark{ background:color-mix(in srgb,var(--acc) 30%,transparent); color:var(--ink); border-radius:3px; padding:0 2px; }
.ri .m{ margin-left:auto; font-size:11px; color:var(--muted); flex:none; }
.ri .racts{ margin-left:auto; display:inline-flex; gap:6px; flex:none; }
.rl{ font:600 11px var(--sans); padding:4px 9px; border-radius:7px; border:1px solid var(--line); color:var(--muted); text-decoration:none; white-space:nowrap; }
.rl:hover{ color:var(--ink); border-color:var(--acc); }
.rl.watch{ color:var(--amber); border-color:color-mix(in srgb,var(--amber) 40%,var(--line)); }
.rl.watch:hover{ border-color:var(--amber); }
.rfoot{ padding:8px 14px; border-top:1px solid var(--line); color:var(--muted); font-size:11.5px; display:flex; justify-content:space-between; }
@media(max-width:760px){ .topbar{ grid-template-columns:1fr auto; } .hsearch{ grid-column:1/-1; order:3; max-width:none; } .hsbar .hintk{ display:none; } }
.tb-btn{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border-radius:9px;
  border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:13px; font-weight:600;
  cursor:pointer; text-decoration:none; }
.tb-btn:hover{ border-color:var(--teal); }
.tb-btn svg{ width:16px; height:16px; }
.tb-kbd{ font-size:10px; font-weight:700; letter-spacing:.03em; border:1px solid var(--line); border-radius:5px; padding:2px 5px; color:var(--muted); }

/* full-text search modal (Pagefind) */
.pf-modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:flex-start; justify-content:center; padding:9vh 16px 16px; }
.pf-modal[hidden]{ display:none; }
.pf-backdrop{ position:absolute; inset:0; background:rgba(2,4,8,.6); backdrop-filter:blur(4px); }
.pf-panel{ position:relative; width:min(660px,100%); max-height:82vh; overflow:auto; background:var(--bg-2);
  border:1px solid var(--line); border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.pf-panel-head{ position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px; border-bottom:1px solid var(--line); background:var(--bg-2); font-size:13px; font-weight:600; color:var(--muted); }
.pf-close{ border:none; background:none; color:var(--muted); cursor:pointer; width:30px; height:30px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center; }
.pf-close:hover{ background:var(--card); color:var(--ink); }
.pf-close svg{ width:16px; height:16px; }
#pf-ui{ padding:14px 16px 18px; }
:root{
  --pagefind-ui-scale:.88;
  --pagefind-ui-primary:var(--ink);
  --pagefind-ui-text:var(--ink);
  --pagefind-ui-background:var(--bg-2);
  --pagefind-ui-border:var(--line);
  --pagefind-ui-tag:var(--card);
  --pagefind-ui-border-width:1px;
  --pagefind-ui-border-radius:10px;
  --pagefind-ui-font:var(--sans);
}

.wrap{ position:relative; z-index:1; max-width:1160px; margin:0 auto; padding:0 clamp(16px,4vw,40px); }

/* hero */
.hero{ padding:clamp(40px,7vh,76px) 0 18px; }
.kicker{ display:inline-flex; align-items:center; gap:9px; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--teal); margin:0 0 16px; font-weight:700; }
.kicker::before{ content:""; width:18px; height:2px; border-radius:2px; background:currentColor; }
.hero h1{ font-size:clamp(32px,6vw,60px); line-height:1.03; margin:0 0 16px; font-weight:700; letter-spacing:-.025em; }
.hero h1 .hand{ font-family:var(--hand); font-weight:700; letter-spacing:0;
  background:linear-gradient(120deg,var(--teal),var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; padding:0 .06em; }
.lede{ font-size:clamp(16px,2vw,20px); line-height:1.6; color:var(--soft); max-width:60ch; margin:0 0 26px; }
.stats{ display:flex; flex-wrap:wrap; gap:10px; }
.stat{ display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:999px;
  border:1px solid var(--line); background:var(--card); font-size:13px; color:var(--soft); }
.stat b{ color:var(--ink); }
.stat .dot{ width:7px; height:7px; border-radius:50%; background:var(--teal); }

/* category-page hero */
.hero-cat{ padding:clamp(16px,2.6vh,28px) 0 4px; position:relative; }
.hero-cat .kicker{ color:var(--acc,var(--teal)); position:absolute; top:clamp(16px,2.6vh,28px); right:0; margin:0; }
.hero-cat h1{ font-size:clamp(22px,3.2vw,32px); margin:0 0 8px; }
.hero-cat .lede{ font-size:clamp(14px,1.5vw,16px); margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
@media(max-width:640px){ .hero-cat .kicker{ position:static; margin:0 0 10px; } .hero-cat .lede{ white-space:normal; } }
.cat-count{ font-size:13px; color:var(--muted); margin:0 0 4px; letter-spacing:.01em; }
.cat-count b{ color:var(--acc,var(--teal)); font-weight:700; }
.back{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--muted);
  text-decoration:none; margin:0 0 12px; }
.back svg{ width:15px; height:15px; }
.back:hover{ color:var(--ink); }

/* browse-by-category cards (home) */
.browse{ margin:30px 0 6px; }
.browse-h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 14px; }
.browse-h h2{ font-size:15px; margin:0; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); }
.cats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.catcard{ display:flex; flex-direction:column; gap:6px; padding:16px 18px; border-radius:14px; text-decoration:none;
  border:1px solid var(--line); background:var(--card); transition:transform .18s var(--ease),border-color .18s; }
.catcard:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--acc) 55%,var(--line)); }
.catcard .cdot{ width:9px; height:9px; border-radius:50%; background:var(--acc); }
.catcard b{ font-size:15px; color:var(--ink); }
.catcard span{ font-size:12.5px; color:var(--muted); }

/* parts + cards */
.part{ margin:22px 0 0; }
.part:first-child{ margin-top:14px; }
.part-h{ display:flex; align-items:center; gap:10px; margin:0 0 14px; }
.part-h::before{ content:""; width:10px; height:10px; border-radius:3px; background:var(--acc,var(--teal)); flex:none; }
.part-h h2{ font-size:19px; margin:0; font-weight:700; letter-spacing:-.01em; }
.part-h .cnt{ font-size:13px; color:var(--muted); }
.part-h .seeall{ margin-left:auto; font-size:13px; font-weight:600; color:var(--acc,var(--teal)); text-decoration:none; white-space:nowrap; }
.part-h .seeall:hover{ text-decoration:none; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.card{ position:relative; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px;
  background:var(--card);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 2px 5px rgba(0,0,0,.2),0 12px 26px -10px rgba(0,0,0,.4);
  padding:18px 20px; overflow:hidden; transition:transform .18s var(--ease),border-color .18s,box-shadow .18s; }
.card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--acc) 55%,var(--line)); box-shadow:0 16px 40px rgba(0,0,0,.36); }
.card-hint{ position:absolute; left:20px; right:auto; bottom:46px; top:auto; z-index:5; pointer-events:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
  font:500 12.5px var(--sans); letter-spacing:.01em; color:var(--ink);
  background:color-mix(in srgb,var(--hoveracc,var(--teal)) 32%,transparent);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  border:1px solid color-mix(in srgb,var(--hoveracc,var(--teal)) 55%,var(--line));
  border-radius:11px; padding:11px 14px;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.4);
  opacity:0; transform:translateY(6px); transform-origin:bottom left;
  transition:opacity .2s var(--ease), transform .2s var(--ease); }
.card-hint::after{ content:""; position:absolute; left:20px; bottom:-6px; width:11px; height:11px;
  background:inherit; border-right:1px solid color-mix(in srgb,var(--hoveracc,var(--teal)) 55%,var(--line)); border-bottom:1px solid color-mix(in srgb,var(--hoveracc,var(--teal)) 55%,var(--line));
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transform:rotate(45deg); }
.card.show-hint .card-hint{ opacity:1; transform:none; }
.card.show-hint .act{ color:var(--hoveracc,var(--teal)); }
.card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.parts{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.badge{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 10px;
  border-radius:7px; color:var(--acc); background:color-mix(in srgb,var(--acc) 15%,transparent); white-space:nowrap; }
.card h3{ font-size:18px; margin:0 0 12px; line-height:1.25; }
.arts{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:3px; }
.arts li{ display:flex; gap:9px; font-size:13.5px; color:var(--soft); padding:3px 0; }
.arts .i{ color:var(--acc); font-variant-numeric:tabular-nums; font-weight:600; flex:none; }
.acts{ margin-top:auto; padding-top:12px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:flex-start; gap:18px; }
.act{ display:inline-flex; align-items:center; gap:6px; height:auto; padding:0; border:none; background:none;
  font-size:13px; font-weight:600; text-decoration:none; color:var(--acc); transition:gap .16s ease,color .16s ease; }
.act svg{ width:15px; height:15px; }
.act.read:hover{ gap:9px; color:var(--hoveracc); }
.act.listen{ color:var(--soft); }
.act.listen:hover{ gap:9px; color:var(--hoveracc); }

.noresult{ display:none; text-align:center; color:var(--muted); padding:60px 20px; font-size:16px; }
.noresult.show{ display:block; }

/* controls */
.controls{ position:sticky; top:65px; z-index:30; padding:6px 0 12px; margin-top:2px;
  background:linear-gradient(var(--bg) 70%,transparent); }
.search{ position:relative; max-width:520px; }
.search svg{ position:absolute; left:15px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--muted); pointer-events:none; }
.search input{ width:100%; height:48px; padding:0 44px 0 44px; border-radius:12px; border:1px solid var(--line);
  background:var(--card-2); color:var(--ink); font-family:inherit; font-size:15px; outline:none; }
.search input:focus{ border-color:var(--teal); box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 22%,transparent); }
.search .clr{ position:absolute; right:10px; top:50%; transform:translateY(-50%); border:none; background:none;
  color:var(--muted); cursor:pointer; width:28px; height:28px; border-radius:7px; display:none; align-items:center; justify-content:center; }
.search .clr:hover{ background:var(--card); color:var(--ink); }
.search .clr svg{ position:static; transform:none; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
.chip{ border:1px solid var(--line); background:var(--card); color:var(--soft); font-family:inherit;
  font-size:13px; font-weight:600; padding:8px 15px; border-radius:999px; cursor:pointer; text-decoration:none; }
.chip:hover{ color:var(--ink); border-color:var(--muted); }
.chip.on{ background:var(--ink); color:var(--bg); border-color:var(--ink); }

/* category tabs (home) */
.tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.tab{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--card);
  color:var(--soft); font-family:inherit; font-size:13px; font-weight:600; padding:8px 14px; border-radius:999px;
  cursor:pointer; transition:color .16s,border-color .16s,background .16s,box-shadow .16s; }
.tab:hover{ color:var(--ink); border-color:var(--muted); }
.tab .tdot{ width:8px; height:8px; border-radius:50%; flex:none; }
.tab.on{ color:var(--ink); border-color:color-mix(in srgb,var(--tacc,var(--teal)) 60%,transparent);
  background:color-mix(in srgb,var(--tacc,var(--teal)) 15%,var(--card));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tacc,var(--teal)) 13%,transparent); }

/* roadmap teaser */
.soon{ margin:44px 0 10px; padding:24px 26px; border:1px dashed var(--line); border-radius:16px; background:var(--card); }
.soon h3{ margin:0 0 8px; font-size:15px; }
.soon p{ margin:0 0 14px; color:var(--muted); font-size:14px; }
.soon .tags{ display:flex; flex-wrap:wrap; gap:8px; }
.soon .tag{ font-size:12.5px; color:var(--soft); border:1px solid var(--line); border-radius:999px; padding:6px 13px; }

footer{ position:fixed; left:0; right:0; bottom:0; z-index:20; border-top:1px solid var(--line); background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px); }
footer .wrap{ padding:13px clamp(16px,4vw,40px); display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; color:var(--muted); font-size:13px; }
footer a{ color:var(--soft); text-decoration:none; }
footer a:hover{ color:var(--ink); }

@media (max-width:560px){ .controls{ top:60px; } footer .wrap{ flex-direction:column; gap:4px; text-align:center; padding:12px 20px; } body{ padding-bottom:84px; } }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }