/* thern·cdn — light theme
   Palette: the register study. Layout: the soft study.
   Serves BOTH the hand-written index.html and the pages cdn-reindex
   generates under /app/ and /tcl/ (legacy class names, further down). */
:root{
  /* This theme is a committed light one — there is no dark variant to fall back
     to. Without this, Chrome's "auto dark mode for web contents" inverts the
     whole site and the code blocks end up dark text on dark. `light` alone is
     not enough to opt out; `only light` is what actually stops it. */
  color-scheme: only light;
  --bg:#bdc7d1; --bg2:#c9d1da; --card:#d5dce3; --sunk:#c4cdd6;
  --line:#a6b3c0; --line2:#8f9dac;
  --ink:#0f151a; --ink2:#333f49; --muted:#4e5c67; --faint:#5c6a75;
  --navy:#2b4a79; --navy-dark:#1f3860; --navy-soft:#c3d3e8;
  --stamp:#8f3f2e; --stamp-soft:#e0c9c2;
  --green:#2b6b4f; --green-soft:#c6ddd3;
  --mono:ui-monospace,"JetBrains Mono","Cascadia Code","SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:18px;
  --lift:0 1px 2px rgba(16,21,25,.04), 0 10px 24px -18px rgba(16,21,25,.5);
  --lift2:0 2px 6px rgba(16,21,25,.06), 0 26px 44px -28px rgba(43,74,121,.42);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(900px 560px at 84% -12%,rgba(222,229,236,.55),transparent 60%),
             radial-gradient(760px 460px at -8% 104%,rgba(143,63,46,.09),transparent 60%)}
.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 22px}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.mono,code,pre{font-family:var(--mono)}
:focus-visible{outline:2.5px solid var(--navy);outline-offset:3px;border-radius:6px}
.topo{display:none}                       /* contour lines belong to the dark theme */

/* ─── header ───────────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:20;background:rgba(189,199,209,.9);
  backdrop-filter:blur(12px);border-bottom:1px solid rgba(143,157,172,.8)}
.bar{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;letter-spacing:-.015em;
  font-size:17px;color:var(--ink);font-family:var(--sans)}
.brand:hover{text-decoration:none;opacity:.82}
.brand b{font-weight:650}
.brand .sl,.brand .dot{color:var(--navy)}
.brand .mark{width:26px;height:26px;border-radius:9px;background:var(--navy-soft);
  display:grid;place-items:center;flex:0 0 auto}
.brand .glyph{width:19px;height:19px;flex:0 0 auto}
.brand .glyph path{stroke:var(--navy)}     /* overrides the inline dark-theme strokes */
.brand .glyph path+path{stroke:var(--stamp)}
.bar nav{margin-left:auto;display:flex;gap:6px;align-items:center;font-size:14.5px}
.bar nav a{color:var(--muted);padding:8px 13px;border-radius:11px;white-space:nowrap}
.bar nav a:hover{color:var(--ink);background:var(--card);text-decoration:none}
.bar nav a.active{color:var(--navy);background:var(--navy-soft)}
.bar .pill{font-size:13px;color:var(--green);background:var(--green-soft);border-radius:999px;
  padding:6px 13px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.bar .pill .d{width:7px;height:7px;border-radius:50%;background:var(--green)}
@media(max-width:860px){.bar .pill{display:none}.bar nav a{padding:8px 10px}}
@media(max-width:520px){.bar{gap:10px}.bar nav{gap:0}.bar nav a{padding:8px 7px;font-size:14px}
  .bar nav a[href="/#system"],.bar nav a[href="#system"]{display:none}}

/* ─── front page: hero ─────────────────────────────────────────────── */
.hero{padding:74px 0 20px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:52px;align-items:center}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:34px;padding-top:48px}}
.hero h1{font-size:clamp(31px,5.6vw,60px);line-height:1.06;margin:0 0 18px;
  letter-spacing:-.032em;font-weight:680}
.hero h1 .l1{display:block}
@media(max-width:560px){.hero h1 .l1{display:inline}}
.hero h1 em{font-style:normal;color:var(--navy)}
.hero p{margin:0;color:var(--ink2);font-size:clamp(16.5px,1.6vw,19px);max-width:46ch}
.hero .meta{margin-top:26px;display:flex;gap:26px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.hero .meta b{display:block;color:var(--ink);font-size:19px;font-weight:650;letter-spacing:-.02em}

/* the get-it card — the page's one loud object */
.get{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:26px;
  box-shadow:var(--lift2);min-width:0;max-width:100%}
.get .lbl{font-size:13px;color:var(--muted);margin:0 0 4px}
.get .sys{font-size:22px;font-weight:650;letter-spacing:-.02em;margin:0 0 18px;
  display:flex;align-items:baseline;gap:9px}
.get .sys .arch{font-family:var(--mono);font-size:13px;color:var(--faint);font-weight:400}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;background:var(--sunk);
  border-radius:14px;padding:5px;margin-bottom:18px}
@media(max-width:520px){.seg{grid-template-columns:repeat(2,1fr)}}
.seg button{min-width:0;border:none;background:none;font:inherit;font-size:13px;color:var(--muted);
  padding:8px 6px;border-radius:10px;cursor:pointer;transition:.16s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--navy);font-weight:600;
  box-shadow:0 1px 3px rgba(16,21,25,.09)}
.cta{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  background:var(--navy);color:#fff;border:none;border-radius:15px;padding:15px 20px;
  font:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:.16s;
  box-shadow:0 10px 22px -14px rgba(31,56,96,.9)}
.cta:hover{background:var(--navy-dark);color:#fff;text-decoration:none;transform:translateY(-1px)}
.cta .sz{font-weight:400;font-size:13.5px;opacity:.86;font-family:var(--mono);white-space:nowrap}
.get .whatfor{margin:9px 2px 0;font-family:var(--mono);font-size:12.5px;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.get .or{margin:18px 0 8px;font-size:13.5px;color:var(--muted)}
.get .fine{margin:14px 0 0;font-size:12.5px;color:var(--faint)}
.snip{position:relative;background:var(--sunk);border-radius:13px;padding:13px 46px 13px 15px;
  overflow-x:auto;font-family:var(--mono);font-size:12.2px;line-height:1.72;color:var(--ink2);
  margin:0;max-width:100%}
.snip .v{color:var(--stamp)} .snip .c{color:var(--faint)} .snip .k{color:var(--navy)}

/* ─── front page: sections ─────────────────────────────────────────── */
section{padding:56px 0 0;scroll-margin-top:80px}
.shead{display:flex;align-items:baseline;gap:14px;margin:0 0 8px;flex-wrap:wrap}
.shead h2{font-size:26px;font-weight:650;letter-spacing:-.025em;margin:0}
.shead .c{color:var(--faint);font-size:14px;margin-left:auto}
.slede{color:var(--muted);font-size:15.5px;margin:0 0 26px;max-width:62ch}
.slede .mono{color:var(--ink2);font-size:14.5px}

.filter{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:8px 14px;margin:0 0 20px;max-width:340px;box-shadow:var(--lift)}
.filter input{flex:1;min-width:0;background:none;border:none;outline:none;font:inherit;
  font-size:14px;color:var(--ink)}
.filter input::placeholder{color:var(--faint)}
.filter .k{font-family:var(--mono);font-size:12px;color:var(--faint)}

/* app rows */
.apps{display:flex;flex-direction:column;gap:16px}
.app{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--lift);overflow:hidden;transition:box-shadow .2s,border-color .2s}
.app:hover{box-shadow:var(--lift2);border-color:var(--line2)}
.app-top{display:flex;align-items:center;gap:18px;padding:20px 22px}
.avatar{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  font-weight:700;font-size:20px;flex:0 0 auto;letter-spacing:-.02em;
  background:var(--navy-soft);color:var(--navy)}
.avatar.alt{background:var(--stamp-soft);color:var(--stamp)}
.app-id{min-width:0;flex:1}
.app-n{font-size:18.5px;font-weight:650;letter-spacing:-.02em;display:flex;
  align-items:baseline;gap:10px;flex-wrap:wrap}
.app-v{font-family:var(--mono);font-size:13px;color:var(--stamp);background:var(--stamp-soft);
  padding:2px 8px;border-radius:8px}
.app-sub{color:var(--muted);font-size:14px;margin-top:2px}
.app-plats{display:flex;gap:6px;flex-wrap:wrap}
.plat{font-size:12.5px;color:var(--ink2);background:var(--sunk);border-radius:9px;
  padding:5px 10px;white-space:nowrap}
.app-go{border:1px solid var(--line);background:var(--card);color:var(--navy);font:inherit;
  font-size:14px;font-weight:600;border-radius:12px;padding:10px 16px;cursor:pointer;
  white-space:nowrap;transition:.16s}
.app-go:hover{background:var(--navy-soft);border-color:var(--navy-soft)}
@media(max-width:780px){.app-top{flex-wrap:wrap;gap:14px}.app-plats{order:3;width:100%}.app-go{order:4}}
.app-body{display:none;border-top:1px solid var(--line);background:var(--bg2);padding:20px 22px 22px}
.app-body.open{display:block}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.tab{border:1px solid var(--line);background:var(--card);color:var(--muted);font:inherit;
  font-size:13.5px;padding:7px 13px;border-radius:11px;cursor:pointer;transition:.16s}
.tab:hover{color:var(--ink)}
.tab[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.applink{display:inline-block;margin-top:14px;font-size:13.5px;color:var(--muted)}
.applink:hover{color:var(--navy)}

/* script cards (class must not collide with the .tag.tcl category badge) */
.tcl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 20px 18px;box-shadow:var(--lift);color:inherit;display:flex;flex-direction:column;
  gap:10px;transition:.2s}
.tcard:hover{box-shadow:var(--lift2);border-color:var(--line2);text-decoration:none;transform:translateY(-2px)}
.tcard h3{margin:0;font-size:17px;font-weight:650;letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:9px}
.tcard h3 span{font-family:var(--mono);font-size:12.5px;color:var(--faint);font-weight:400}
.tcard p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
.tcard .req{font-family:var(--mono);font-size:12px;color:var(--faint);margin-top:auto;padding-top:6px}

/* ─── footer (shared with generated pages) ─────────────────────────── */
footer{margin-top:70px;border-top:1px solid var(--line);background:var(--bg2)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:28px 40px;padding:34px 0 56px}
.flabel{font-size:13px;font-weight:650;color:var(--ink);margin:0 0 8px;
  letter-spacing:0;text-transform:none;font-family:var(--sans)}
.fkey,.ftxt{font-family:var(--mono);font-size:12.5px;color:var(--faint);line-height:1.75;
  word-break:break-word;margin:0;max-width:48ch}
.fkey b{color:var(--muted);font-weight:600}
.fkey a,.ftxt a,.flabel a{color:var(--muted)}
.fkey a:hover,.ftxt a:hover{color:var(--navy)}

/* ═══ pages generated by cdn-reindex: /app/<slug> and /tcl/<slug> ════
   Same markup as before, restyled for the light palette. */
main.wrap>.detail-back{margin-top:8px}
.detail-back{display:inline-block;cursor:pointer;background:none;border:none;color:var(--muted);
  font-size:14px;padding:2px 0;margin-bottom:18px;font-family:var(--sans)}
.detail-back:hover{color:var(--navy);text-decoration:none}
.detail-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.detail-n{font-size:30px;font-weight:680;letter-spacing:-.03em}
.detail-v{font-family:var(--mono);font-size:14px;color:var(--stamp);background:var(--stamp-soft);
  padding:2px 9px;border-radius:9px}
.detail-meta{color:var(--faint);font-size:13px;margin-left:auto}
.detail-body{margin-top:14px}
.picklabel{font-family:var(--mono);font-size:12.5px;color:var(--faint);margin:18px 0 10px;letter-spacing:.03em}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:inherit;font-size:13.5px;color:var(--muted);background:var(--card);
  border:1px solid var(--line);padding:7px 13px;border-radius:11px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:.16s}
.chip:hover{color:var(--ink);border-color:var(--line2)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.chip .g{font-family:var(--mono);font-size:11px;color:var(--faint)}
.chip[aria-pressed="true"] .g{color:rgba(255,255,255,.72)}
.chip.you::after{content:"you";font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:var(--green);padding:1px 5px;border-radius:5px}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--lift)}
.panel + .panel{margin-top:16px}
.phead{display:flex;align-items:center;gap:10px;padding:15px 20px;border-bottom:1px solid var(--line)}
.phead .t{font-weight:650;font-size:15.5px;letter-spacing:-.015em}
.phead .mk{font-family:var(--mono);font-size:11.5px;color:var(--navy);background:var(--navy-soft);
  padding:3px 9px;border-radius:8px}
.phead .r{margin-left:auto;font-size:13px;color:var(--faint)}
.pbody{padding:18px 20px}
pre.code{position:relative;margin:0;background:var(--sunk);border-radius:13px;
  padding:14px 52px 14px 15px;overflow-x:auto;max-width:100%;
  font-family:var(--mono);font-size:12.4px;line-height:1.72;color:var(--ink2)}
pre.code .c{color:var(--faint)} pre.code .v{color:var(--stamp)} pre.code .k{color:var(--navy)}
.copy{position:absolute;top:9px;right:9px;border:1px solid var(--line);background:var(--card);
  color:var(--muted);font-family:var(--mono);font-size:11px;padding:5px 9px;border-radius:9px;
  cursor:pointer;transition:.16s}
.copy:hover{color:var(--navy);border-color:var(--line2)}
.copy.done{color:var(--green);border-color:var(--green)}

.files{display:flex;flex-direction:column}
.frow{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto auto auto;gap:14px;
  align-items:center;padding:11px 2px;border-top:1px solid var(--line);font-size:14px}
.frow:first-child{border-top:none}
.frow .fn{font-family:var(--mono);font-size:13.5px;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.frow .fn a{color:var(--ink)} .frow .fn a:hover{color:var(--navy)}
.frow .fn .sub{color:var(--faint);font-size:12px}
.frow .a,.frow .dt{font-family:var(--mono);font-size:12.5px;color:var(--faint);white-space:nowrap}
.frow .sz{font-family:var(--mono);font-size:12.5px;color:var(--muted);text-align:right;white-space:nowrap}
.frow .dl{font-size:13.5px;font-weight:600;color:var(--navy);white-space:nowrap}
.tag{font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:6px;
  border:1px solid var(--line);color:var(--muted);background:var(--bg2);white-space:nowrap}
.tag.deb{color:#553a7c;border-color:#ac9cc9} .tag.rpm{color:#84431a;border-color:#c9a68c}
.tag.arch{color:#1c4f7d;border-color:#95b2cd} .tag.alpine{color:#175a69;border-color:#8fb9c4}
.tag.macos{color:#434f59;border-color:#a3b0ba} .tag.windows{color:#2b4a79;border-color:#9aafcd}
.tag.linux{color:var(--stamp);border-color:#c6a297} .tag.tcl{color:var(--green);border-color:#97c0ae}
@media(max-width:720px){
  .frow{grid-template-columns:minmax(0,1fr) auto auto;gap:6px 12px}
  .frow .a,.frow .dt{display:none}
  .frow .sz{grid-column:3;grid-row:1}
  .frow .dl{grid-column:3;grid-row:2}
  .frow .tag{grid-column:2;grid-row:1}
}
.empty{padding:22px 4px;color:var(--faint);font-size:14px}
.empty .mono{font-size:13px;color:var(--ink2)}

/* TCL script pages */
.tcl-desc{margin:0;color:var(--ink2);font-size:15.5px;line-height:1.66;max-width:74ch}
.tcl-note{margin:14px 0 0;color:var(--muted);font-size:14px;max-width:74ch}
.usage{display:flex;flex-direction:column}
.urow{padding:10px 2px;border-top:1px solid var(--line)}
.urow:first-child{border-top:none}
.urow code{font-size:13px;color:var(--navy);word-break:break-word}
.tcl-actions{display:flex;gap:10px;flex-wrap:wrap;padding:14px 0 8px}
.tcl-actions .dl{font-size:13.5px;font-weight:600;color:var(--navy);border:1px solid var(--line);
  background:var(--card);padding:8px 14px;border-radius:11px}
.tcl-actions .dl:hover{background:var(--navy-soft);border-color:var(--navy-soft);text-decoration:none}
.ospanel[hidden]{display:none}

/* ═══ storefront: catalog card + /app/<slug> page for titles that are
   listed but NOT downloadable (see storefront.json / cdn-reindex) ════════ */
.app.store{border-style:dashed;border-color:var(--line2);background:linear-gradient(
  180deg,var(--card),var(--bg2))}
.app.store:hover{border-style:dashed}
.avatar.img{background:var(--sunk);padding:0;overflow:hidden}
.avatar.img img{width:100%;height:100%;object-fit:contain;display:block}
.badge{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--stamp);background:var(--stamp-soft);border-radius:8px;padding:3px 8px;
  white-space:nowrap;font-weight:600}
.app-go.ghost{color:var(--muted);background:var(--bg2)}
.app-go.ghost:hover{color:var(--navy);background:var(--navy-soft);border-color:var(--navy-soft);
  text-decoration:none}

.detail-icon{border-radius:12px;flex:0 0 auto;align-self:center}
.detail-badge{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--stamp);background:var(--stamp-soft);border-radius:9px;padding:3px 9px;font-weight:600}
.store-lede{margin:2px 0 0;color:var(--ink2);font-size:17px;max-width:64ch;line-height:1.5}
.store-desc{margin:0;color:var(--ink2);font-size:15.5px;line-height:1.66;max-width:74ch}
.store-req{margin:0;color:var(--muted);font-size:13px;line-height:1.7;max-width:74ch}

.panel.store-access{border-color:#c6a297;background:linear-gradient(180deg,#e2d3cd 0,var(--card) 62%)}
.panel.store-access .phead{border-bottom-color:#c6a297}
.panel.store-access .phead .mk{color:var(--stamp);background:var(--stamp-soft)}
.store-note{margin:0;color:var(--ink2);font-size:15px;line-height:1.65;max-width:72ch}
.access-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.access-btn{display:inline-block;background:var(--navy);color:#fff;border-radius:13px;
  padding:12px 20px;font-size:15px;font-weight:600;transition:.16s;
  box-shadow:0 10px 22px -14px rgba(31,56,96,.9)}
.access-btn:hover{background:var(--navy-dark);color:#fff;text-decoration:none;transform:translateY(-1px)}

.shot{margin:16px 0 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--lift)}
.shot img{display:block;width:100%;height:auto;border-bottom:1px solid var(--line)}
.shot figcaption{padding:12px 18px;color:var(--muted);font-size:13.5px}

.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px 28px}
.feat h3{margin:0 0 4px;font-size:15px;font-weight:650;letter-spacing:-.015em;color:var(--ink)}
.feat p{margin:0;color:var(--muted);font-size:14.2px;line-height:1.55}

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