:root{
 --bg:#0a0f0d;--s1:#111713;--s2:#18201b;--s3:#1f2a23;--bd:#232f29;--bd2:#2d3a33;
 --fg:#eef3f0;--mut:#a4b0b9;--dim:#8a95a0;--acc:#3ee06a;--acc-ink:#04140a;--acc-deep:#1f9e4b;
 --blue:#6cc0ff;--gold:#e6b23a;--ad:#0e1512;--ad-bd:#232f29;
 --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.28);
 /* Action colour, separate from --acc. Green is the brand and it is
    everywhere — borders, chips, the active tab — so a green button reads as
    more of the same rather than as the thing to press. Copper is what
    buildschematics uses for exactly this job and nothing else on the page
    competes with it. */
 --cta:#e1a46f;--cta-hover:#f2c59d;--cta-ink:#20140d;
}
:root[data-theme="light"]{
 --bg:#f4f7f5;--s1:#ffffff;--s2:#eef3f0;--s3:#e3ece6;--bd:#dde6e0;--bd2:#cdd9d1;
 --fg:#0c1611;--mut:#3e4a44;--dim:#5c6a62;--acc:#17a34a;--acc-ink:#ffffff;--acc-deep:#0d7d38;
 --blue:#1f6fd6;--gold:#b7841c;--ad:#eef2f0;--ad-bd:#d7e0da;
 --shadow:0 1px 2px rgba(20,40,30,.06),0 10px 26px rgba(20,40,30,.08);
 --cta:#a85f32;--cta-hover:#8f4f2a;--cta-ink:#ffffff;
}
@media (prefers-color-scheme: light){:root:not([data-theme]){--bg:#f4f7f5;--s1:#fff;--s2:#eef3f0;--s3:#e3ece6;--bd:#dde6e0;--bd2:#cdd9d1;--fg:#0c1611;--mut:#3e4a44;--dim:#5c6a62;--acc:#17a34a;--acc-ink:#fff;--acc-deep:#0d7d38;--blue:#1f6fd6;--gold:#b7841c;--ad:#eef2f0;--ad-bd:#d7e0da;--cta:#a85f32;--cta-hover:#8f4f2a;--cta-ink:#fff}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:'Inter',system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 22px}
h1,h2,h3,.dspl{font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
.mono{font-family:'JetBrains Mono',monospace}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);font-weight:600}
header.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--bd)}
/* Three columns, 1fr auto 1fr, so the link group is centred on the PAGE rather
   than pushed off-centre by whatever the brand and the right-hand controls
   happen to measure. A flex row with a spacer (what this was) centres nothing —
   it just glues the links to the brand. */
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;height:60px}
.nav .nav-right{display:flex;align-items:center;gap:10px;justify-self:end}
/* Mark and wordmark read as one lockup, the way buildschematics sets its own:
   a larger mark, tight to the text, and the name heavy enough to anchor the bar. */
/* The wordmark is one flex item, not two. `ez<b>seed</b>` put a text node and
   an element side by side, so the flex gap opened a space inside the word.
   Padding + negative margin give the only link back to the homepage a real
   hit area without moving it off the grid line. */
.brand{display:flex;align-items:center;gap:9px;font-family:'Space Grotesk';font-weight:800;font-size:25px;letter-spacing:-.02em;color:var(--fg);padding:6px 12px 6px 6px;margin-left:-6px;border-radius:10px}
.brand:hover{background:var(--s2)}
.brand .wm{display:inline-block;white-space:nowrap}
.brand .cube{width:38px;height:38px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.brand b{color:var(--acc)}
/* One bordered group rather than four loose links — the same segmented pill the
   2D/3D control uses, so the header reads as two controls and a brand. */
.nav .links{display:flex;gap:2px;justify-self:center;background:var(--s1);border:1px solid var(--bd);border-radius:11px;padding:4px}
.nav .links a{padding:8px 15px;border-radius:7px;font-size:15.5px;font-weight:700;color:var(--fg);white-space:nowrap}
.nav .links a:hover{color:var(--fg);background:var(--s2)}
.nav .links a[aria-current]{color:var(--acc);background:var(--s2)}
.nav .sp{display:none}
.viewseg{display:inline-flex;background:var(--s1);border:1px solid var(--bd);border-radius:9px;padding:3px;gap:2px}
.viewseg a{padding:7px 13px;border-radius:6px;font-size:14px;font-weight:800;color:var(--mut)}
.viewseg a:hover{color:var(--fg);background:var(--s2)}
.iconbtn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:9px;border:1px solid var(--bd);background:var(--s1);color:var(--mut);cursor:pointer;font-size:15px}
.iconbtn:hover{color:var(--fg);border-color:var(--bd2)}
@media(max-width:860px){
  .nav{grid-template-columns:auto minmax(0,1fr) auto;gap:8px}
  .nav .links{display:flex;padding:3px;gap:1px;min-width:0}
  .nav .links a{padding:7px 10px;font-size:13.5px}
  /* Apps is the one that gives way — it is reachable from both remaining
     links and from every footer. */
  .nav .links a[href$="/apps/"]{display:none}
  .brand{font-size:19px;padding:6px 6px 6px 4px}
  .cube{width:32px;height:32px}
}
/* Small phones only. At 360px the full-size row does not fit: the links pill
   clipped mid-word behind the view toggle. Nothing here applies above 400px. */
@media(max-width:400px){
  .wrap{padding:0 10px}
  .nav{gap:5px}
  .nav .links a{padding:7px 7px;font-size:12.5px}
  .nav-right{gap:5px}
  .viewseg{padding:2px}
  .viewseg a,.viewseg .view-mode-btn{padding:6px 8px;font-size:12.5px}
  .iconbtn{width:32px;height:32px;font-size:14px}
  .brand .wm{display:none}
}
/* Ad slots: reserve height (no CLS) but stay invisible until public/js/ads.js
   fills them, so a 0%-fill slot shows no empty box. The loader supplies the
   creative. (Was aj1559 until 2026-08-17; that module is gone.) */
.ad{position:relative;display:flex;justify-content:center;align-items:flex-start;overflow:hidden}
.ad-lead{min-height:100px;margin:14px 0}
.ad-rect{min-height:280px;margin:6px 0}
.ad-rail{min-height:600px;position:sticky;top:76px;margin-bottom:16px}
.hero{padding:34px 0 8px}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}
@media(max-width:900px){.hero .grid{grid-template-columns:1fr;gap:22px}}
.hero h1{font-size:clamp(32px,4.6vw,52px);font-weight:700;margin:12px 0 14px}
.hero h1 .g{color:var(--acc)}
.hero p.sub{font-size:clamp(15px,1.6vw,18px);color:var(--mut);max-width:52ch;margin:0 0 20px}
.hero .facts{display:flex;flex-wrap:wrap;gap:8px}
.hero .facts span{font-size:12.5px;font-weight:500;color:var(--fg);background:var(--s2);border:1px solid var(--bd);border-radius:999px;padding:6px 12px}
.console{background:var(--s1);border:1px solid var(--bd);border-radius:18px;padding:20px;box-shadow:var(--shadow)}
.console .hd{display:flex;align-items:center;gap:8px;font-family:'Space Grotesk';font-weight:600;font-size:15px;margin-bottom:14px}
.console .hd .dot{width:9px;height:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 22%,transparent)}
.seedform{margin:0}
.seedrow{display:flex;gap:9px;margin-bottom:11px}
.seedrow input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--bd2);border-radius:11px;color:var(--fg);font-family:'JetBrains Mono',monospace;font-size:15px;padding:13px 14px}
.seedrow input::placeholder{color:var(--dim)}
.seedrow input:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:transparent}
.seedrow .dice{width:48px;flex:none;border:1px solid var(--bd2);background:var(--s2);border-radius:11px;color:var(--mut);cursor:pointer;font-size:17px}
.segs{display:flex;gap:7px;margin-bottom:11px}
.segs .seg{flex:1;display:flex;background:var(--bg);border:1px solid var(--bd);border-radius:11px;padding:4px;gap:3px}
.segs .seg button{flex:1;border:0;background:transparent;color:var(--mut);font:inherit;font-size:13px;font-weight:600;padding:7px;border-radius:8px;cursor:pointer}
.segs .seg button.on{background:var(--acc);color:var(--acc-ink)}
.segs select{flex:1;min-width:0;background:var(--bg);border:1px solid var(--bd);border-radius:11px;color:var(--fg);font:inherit;font-size:13.5px;font-weight:600;padding:0 12px;cursor:pointer}
.cta{display:flex;gap:9px;margin-top:4px}
.btn{border:0;border-radius:12px;font:inherit;font-weight:700;font-size:14.5px;padding:13px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;justify-content:center;text-decoration:none}
.btn.primary{flex:1;background:var(--acc);color:var(--acc-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:var(--s2);color:var(--fg);border:1px solid var(--bd)}
.btn.ghost:hover{border-color:var(--bd2)}
.console .hint{margin:12px 0 0;font-size:12px;color:var(--dim)}
section.blk{padding:30px 0}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.sec-head h2{font-size:clamp(21px,2.4vw,27px);font-weight:700;margin:6px 0 0}
.sec-head p{margin:4px 0 0;color:var(--mut);font-size:14.5px}
.sec-head a.more{font-size:13.5px;font-weight:600;color:var(--acc);white-space:nowrap}
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:11px}
@media(max-width:1000px){.cats{grid-template-columns:repeat(4,1fr)}}
@media(max-width:620px){.cats{grid-template-columns:repeat(3,1fr)}}
.cat{background:var(--s1);border:1px solid var(--bd);border-radius:13px;padding:14px 12px;display:flex;flex-direction:column;gap:9px;transition:border-color .12s,transform .12s}
.cat:hover{border-color:var(--acc);transform:translateY(-2px)}
.cat .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:17px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.cat .nm{font-weight:600;font-size:13.5px;line-height:1.25;color:var(--fg)}
.cat .ct{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim)}
.tag.j{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 40%,var(--bd))}

/* ===== The seed card. ONE definition for every surface that lists seeds: the
   home strip, /popular/, the category pages and the related strip on an
   article. It lives here rather than in popular/style.css because the home page
   inlines this file and does not load that one. Markup comes from cardHtml() in
   backend/popular-html.mjs (mirrored in popular/main.js for hydration) — change
   the class names in one and you change them in all four places at once. ===== */
.pop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:900px){.pop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
  /* Two per row. At one per row a 45-card page was 45 screens of scrolling. The
     card pays for the halved width by dropping its description and tightening
     the seed row. Title clamps to three lines so heights stay equal. */
  .pop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pop-card-body{padding:9px 10px 8px}
  .pop-card-h1{font-size:13.5px;margin-bottom:4px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3.9em}
  .pop-card-sub{display:none}
  .pop-card-meta{padding:8px 10px;gap:6px}
  .pop-card-seed{font-size:11.5px}
  .pop-card-copy{width:28px;height:28px}
}
.pop-card{position:relative;background:var(--pop-surface);border:1px solid var(--pop-border);border-radius:var(--pop-radius);overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.pop-card:hover{transform:translateY(-2px);border-color:var(--bd2);box-shadow:var(--pop-shadow)}
.pop-card-link{display:block;color:inherit;text-decoration:none}
.pop-card-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--s2);border-bottom:1px solid var(--pop-border)}
.pop-card-body{padding:14px 16px 12px}
.pop-card-sub{margin:0 0 4px;font-size:13px;line-height:1.5;color:var(--pop-text-dim)}
.pop-card-h1{margin:0 0 6px;font-size:16px;font-weight:700;line-height:1.35;color:var(--pop-text)}
/* Meta row sits OUTSIDE the card link so the seed text is selectable without
   triggering navigation. */
.pop-card-meta{display:flex;align-items:center;gap:12px;padding:14px 18px;border-top:1px solid var(--pop-border);background:var(--s2);font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
.pop-card-seed{flex:1;color:var(--pop-text);font-size:15px;font-weight:700;letter-spacing:.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:text;-webkit-user-select:text;cursor:text}
.pop-card-copy{width:36px;height:36px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--s2);color:var(--pop-text);border:1px solid var(--pop-border);border-radius:8px;cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease}
.pop-card-copy:hover{background:var(--s3);color:var(--fg);border-color:var(--bd2)}
.pop-card-copy.copied{color:var(--pop-accent);border-color:var(--pop-accent);transform:scale(1.06)}
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:1000px){.tools{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tools{grid-template-columns:1fr}}
.tool{background:var(--s1);border:1px solid var(--bd);border-radius:13px;padding:15px;display:flex;flex-direction:column;gap:8px;transition:border-color .12s;color:var(--fg)}
.tool:hover{border-color:var(--acc)}
.tool .ic{width:40px;height:40px;border-radius:10px;background:rgba(88,166,255,.10);border:1px solid rgba(88,166,255,.16);display:grid;place-items:center}
.tool .ic.killer{background:color-mix(in srgb,var(--acc) 12%,transparent);border-color:color-mix(in srgb,var(--acc) 26%,var(--bd))}
.tool .ic img{image-rendering:pixelated;display:block;width:24px;height:24px}
.tool h3{font-size:14.5px;font-weight:600;margin:2px 0 0}
.tool p{font-size:12.5px;color:var(--mut);margin:0;line-height:1.5}
.lower{display:grid;grid-template-columns:1fr 300px;gap:30px;align-items:start}
@media(max-width:1080px){.lower{grid-template-columns:1fr}.rail{display:none}}
.prose h2{font-size:24px;font-weight:700;margin:0 0 12px}
.prose h3{font-size:16px;font-weight:600;margin:22px 0 7px;font-family:'Space Grotesk'}
.prose p{color:var(--mut);font-size:15px;margin:0 0 13px;max-width:68ch}
.prose b{color:var(--fg)}
.callout{background:color-mix(in srgb,var(--acc) 9%,var(--s1));border:1px solid color-mix(in srgb,var(--acc) 30%,var(--bd));border-radius:12px;padding:13px 15px;font-size:13px;color:var(--fg);margin:16px 0}
.callout b{color:var(--acc)}
ol.howto{padding-left:0;list-style:none;counter-reset:step;margin:0}
ol.howto li{counter-increment:step;position:relative;padding:11px 14px 11px 46px;margin:8px 0;background:var(--s1);border:1px solid var(--bd);border-radius:11px;color:var(--mut);font-size:14px}
ol.howto li::before{content:counter(step);position:absolute;left:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:var(--acc);color:var(--acc-ink);font-weight:800;display:grid;place-items:center;font-size:12px}
.faq{margin-top:8px;border-top:1px solid var(--bd)}
.faq details{border-bottom:1px solid var(--bd)}
.faq summary{list-style:none;cursor:pointer;padding:15px 2px;font-weight:600;font-size:15px;display:flex;justify-content:space-between;gap:12px;color:var(--fg)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--acc);font-family:'JetBrains Mono';font-weight:700}
.faq details[open] summary::after{content:"\2212"}
.faq p{color:var(--mut);font-size:14px;margin:0 2px 15px;max-width:68ch}
.rail .card{background:var(--s1);border:1px solid var(--bd);border-radius:14px;padding:15px 16px;margin-bottom:16px}
.rail h4{font-family:'Space Grotesk';font-size:14px;font-weight:600;margin:0 0 12px;letter-spacing:-.01em}
.news{display:flex;flex-direction:column;gap:4px}
.news .it{display:flex;gap:10px;padding:7px 0;border-radius:8px}
.news .it:hover .t{color:var(--acc)}
.news .d{font-family:'JetBrains Mono';font-size:10.5px;color:var(--dim);white-space:nowrap;padding-top:2px}
.news .t{font-size:13px;color:var(--mut);line-height:1.4}
footer{border-top:1px solid var(--bd);margin-top:26px;padding:30px 0 44px;color:var(--dim);font-size:13px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;margin-bottom:22px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
footer h5{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 11px;font-weight:700;font-family:'JetBrains Mono'}
footer a{display:block;color:var(--mut);padding:4px 0;font-size:13.5px}
footer a:hover{color:var(--fg)}
footer .brand{font-size:19px}
.disc{border-top:1px solid var(--bd);padding-top:16px;color:var(--dim);font-size:12px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ===== content pages (legacy markup) — scoped under .page so the home is untouched ===== */
.page{background:var(--bg);color:var(--fg)}
.page a{color:var(--acc)}
.page #site-nav{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:50;display:inline-flex;align-items:center;gap:2px;padding:6px 8px 6px 6px;border:1px solid var(--bd);border-radius:14px;background:color-mix(in srgb,var(--s1) 90%,transparent);box-shadow:var(--shadow);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--fg);width:max-content;max-width:calc(100vw - 40px)}
.page .site-nav-brand{display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 14px 0 10px;border-radius:11px;color:var(--fg);font:700 19px/1 'Space Grotesk','Inter',sans-serif;letter-spacing:-.02em;white-space:nowrap}
.page .site-nav-brand:hover{background:var(--s2)}
.page .site-nav-brand img{width:28px;height:28px;border-radius:7px}
.page .site-nav-brand-tld{color:var(--acc);font-weight:700}
.page .site-nav-btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 15px;border:0;border-radius:10px;background:transparent;color:var(--mut);font:600 13.5px/1 'Inter',sans-serif;white-space:nowrap;cursor:pointer}
.page .site-nav-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.page .site-nav-btn:hover{color:var(--fg);background:var(--s2)}
.page .site-nav-btn.active,.page .site-nav-btn.active:hover{color:var(--acc);background:transparent}
.page .site-nav-btn.active svg{stroke:var(--acc)}
.page .site-nav-view{display:inline-flex;align-items:center;margin-left:6px;padding:3px;border-radius:11px;background:var(--bg);border:1px solid var(--bd)}
.page .view-mode-btn{height:40px;min-width:50px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;color:var(--mut);font:700 14px/1 'Inter',sans-serif}
.page .view-mode-btn:hover{color:var(--fg)}
@media(max-width:560px){.page #site-nav{max-width:calc(100vw - 16px);gap:0;padding:4px}.page .site-nav-brand{padding:0 8px 0 6px;height:42px;font-size:16px}.page .site-nav-btn{padding:0 10px;height:42px}.page .site-nav-btn svg+span{display:none}.page .site-nav-view{display:none}}
.page main{max-width:1000px;margin:0 auto;padding:84px 22px 50px}
.page h1{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;font-size:clamp(28px,5vw,42px);letter-spacing:-.02em;line-height:1.07;margin:20px 0 14px;color:var(--fg)}
.page .intro{font-size:17px;color:var(--mut);max-width:70ch;margin:0}
.page main h2{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;font-size:23px;margin:34px 0 14px;letter-spacing:-.02em;color:var(--fg)}
.page main h3{font-family:'Space Grotesk','Inter',sans-serif}
.page .cta-row{display:flex;flex-wrap:wrap;gap:11px;margin:22px 0 8px}
.page .cta{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:12px;background:var(--acc);color:var(--acc-ink);font-weight:700;font-size:15px;text-decoration:none}
.page .cta.secondary{background:var(--s2);border:1px solid var(--bd);color:var(--fg)}
.page .cta:hover{filter:brightness(1.06)}
.page .hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:13px;margin-top:20px}
.page .hub-card{display:block;background:var(--s1);border:1px solid var(--bd);border-radius:14px;padding:16px;color:var(--fg);transition:border-color .12s}
.page .hub-card:hover{border-color:var(--acc)}
.page .hub-card h3{font-family:'Space Grotesk','Inter',sans-serif;font-size:15.5px;font-weight:600;margin:0 0 6px;letter-spacing:-.01em;color:var(--fg)}
.page .hub-card p{font-size:13px;color:var(--mut);margin:0;line-height:1.5}
.page .tool-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;margin-bottom:12px;background:rgba(88,166,255,.10);border:1px solid rgba(88,166,255,.16)}
.page .tool-icon.killer{background:color-mix(in srgb,var(--acc) 12%,transparent);border-color:color-mix(in srgb,var(--acc) 26%,var(--bd))}
.page .tool-icon img{image-rendering:pixelated;display:block}
.page .page-icon{width:56px;height:56px;border-radius:14px;margin:20px 0 0}
.page ol.howto{padding-left:0;list-style:none;counter-reset:step;margin:0}
.page ol.howto li{counter-increment:step;position:relative;padding:12px 14px 12px 48px;margin:8px 0;background:var(--s1);border:1px solid var(--bd);border-radius:12px;color:var(--mut)}
.page ol.howto li::before{content:counter(step);position:absolute;left:13px;top:50%;transform:translateY(-50%);width:25px;height:25px;border-radius:50%;background:var(--acc);color:var(--acc-ink);font-weight:800;display:grid;place-items:center;font-size:12px}
.page main details{background:var(--s1);border:1px solid var(--bd);border-radius:12px;margin:10px 0}
.page main summary{cursor:pointer;font-weight:600;padding:14px 16px;color:var(--fg);font-size:15px;list-style:none}
.page main summary::-webkit-details-marker{display:none}
.page main details p{padding:0 16px 14px;color:var(--mut);margin:0;font-size:14px}
.page footer{max-width:1000px;margin:20px auto 40px;padding:22px;border-top:1px solid var(--bd);color:var(--dim);font-size:14px}
.page footer .links{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:10px}
.page footer a{color:var(--mut);display:inline}
.page footer a:hover{color:var(--fg)}
.page .seed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:20px}
.page .seed-card{display:block;background:var(--s1);border:1px solid var(--bd);border-radius:14px;overflow:hidden;color:var(--fg);transition:border-color .12s,transform .12s}
.page .seed-card:hover{border-color:var(--bd2);transform:translateY(-2px)}
.page .seed-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#0a1024}
.page .seed-body{padding:13px 15px 15px}
.page .seed-card h3{font-family:'Space Grotesk','Inter',sans-serif;font-size:15px;line-height:1.3;margin:0 0 6px;color:var(--fg);font-weight:600}
.page .seed-card p{font-size:13px;color:var(--mut);margin:0}
.page .seed-id{display:block;margin-top:9px;font:600 12px/1 'JetBrains Mono',monospace;color:var(--acc)}
.page .section-more{display:inline-block;margin-top:16px;font-weight:700;color:var(--acc)}
.page [data-ads-slot]{display:block;min-height:90px;margin:16px 0}

/* ===== popular pages: remap their palette vars to the new tokens (recolors list/category/detail, keeps layout) ===== */
:root{--pop-bg:var(--bg);--pop-surface:var(--s1);--pop-surface-2:var(--s2);--pop-border:var(--bd);--pop-text:var(--fg);--pop-text-dim:var(--mut);--pop-accent:var(--acc);--pop-amber:var(--gold);--pop-shadow:var(--shadow);--pop-radius:14px}
.pop-header{text-align:center;padding:78px 16px 8px}
.pop-header h1{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;letter-spacing:-.02em}
.pop-detail-h1,.pop-cat-nav-h2,.pop-art-section h2,.pop-art-section h3{font-family:'Space Grotesk','Inter',sans-serif}
.pop-site-footer{border-top:1px solid var(--bd)!important;background:var(--s1)!important;color:var(--dim)!important}
.pop-site-footer a{color:var(--acc)!important}
.ez-adslot{max-width:1100px;margin:10px auto;padding:0 16px;min-height:100px}

.page iframe{max-width:100%;border:1px solid var(--bd);border-radius:12px;background:var(--s1)}
.page .cta.secondary,.page .cta{margin-top:0}

/* Bottom exit from the home seed strip. Solid, because the reader is at the end
   of four rows of cards with nowhere obvious to go, and a text link does not
   read as somewhere to go. Matches .pop-rel-all on the seed articles. */
.seeds-all{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:22px;padding:12px 26px;border-radius:11px;background:var(--cta);color:var(--cta-ink);font-weight:800;font-size:15px;box-shadow:var(--shadow);transition:filter .15s ease,transform .15s ease}
.seeds-all:hover{filter:brightness(1.06);transform:translateY(-1px)}

/* aj1559 places its top banner as the next sibling of the page's <nav> (it looks
   for nav#site-nav, then nav.site-nav, then nav, then header). Since the header
   became header.top > .wrap > .nav, "next sibling of the nav" is INSIDE the
   header — the banner was adding 106px to a 61px bar on every page, which on the
   viewer pushed the Layers and Finder panels' close buttons underneath it.
   Taking it out of the header's flow puts it back where a top banner belongs,
   directly under the bar, and the header keeps its own height.
   It cannot be pre-placed instead: the module returns early if a
   [data-ajg="top"] already exists, so claiming the marker means no ad at all. */
header.top { position: sticky; }
header.top .wrap { position: relative; }
header.top .wrap > [data-ajg="top"] { position: absolute; top: 100%; left: 0; right: 0; }

/* The viewer builds its 2D/3D pair and its theme button as <button>s that
   src/styles/layout.css skins on its own — same header, visibly different
   controls. These bring them onto the shared look; layout.css is loaded after
   this file, so they need the id to win. */
#site-nav .viewseg .view-mode-btn{border:0;font:inherit;padding:7px 13px;border-radius:6px;font-size:14px;font-weight:800;color:var(--mut);background:transparent;cursor:pointer;height:auto;min-width:0;text-transform:none;letter-spacing:normal;box-shadow:none}
#site-nav .viewseg .view-mode-btn:hover{color:var(--fg);background:var(--s2)}
#site-nav .viewseg .view-mode-btn.active{background:var(--acc);color:var(--acc-ink)}
#site-nav .nav-right #themeToggle{display:inline-grid;place-items:center;width:38px;height:38px;padding:0;border-radius:9px;border:1px solid var(--bd);background:var(--s1);color:var(--mut);cursor:pointer}
#site-nav .nav-right #themeToggle:hover{color:var(--fg);background:var(--s1);border-color:var(--bd2)}
#site-nav .nav-right #themeToggle svg{width:17px;height:17px}