/* FORGE — one stylesheet for the whole site.
   ==========================================
   The palette is lifted straight from the app's own UI (harness/forge-ui.html).
   That is the entire design idea: the site and the product should look like one
   thing, so the page you download from and the window that opens afterwards do
   not feel like they came from different companies. */

:root{
  --bg:#0b0e14;          /* app background */
  --panel:#11151d;       /* app panels */
  --raise:#141a24;       /* hover / raised */
  --line:#1e2530;        /* app borders */
  --txt:#dce3ec;         /* app text */
  --dim:#7d8896;         /* app muted */
  --acc:#4c8dff;         /* app accent */
  --acc-dim:#4c8dff22;
  --ok:#3fb950;
  --warn:#d29922;
  --bad:#f85149;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
  --wrap:1080px;
  --r:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font:16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--acc-dim);color:#fff}

/* ------------------------------------------------------------- structure -- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
section{padding:76px 0}
section.tight{padding:48px 0}

/* --------------------------------------------------------------- header --- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,14,20,.82);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
}
header .wrap{display:flex;align-items:center;gap:26px;height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--txt);
       font-weight:680;letter-spacing:.2px}
.brand .mark{font-size:20px;opacity:.75;line-height:1}
nav{display:flex;gap:22px;margin-left:auto;align-items:center}
nav a{color:var(--dim);text-decoration:none;font-size:14px;transition:color .15s}
nav a:hover,nav a.on{color:var(--txt)}
@media(max-width:720px){nav a.hide-sm{display:none}}

/* ----------------------------------------------------------------- hero --- */
.hero{padding:88px 0 60px;position:relative;overflow:hidden}
.hero:before{
  content:"";position:absolute;inset:-40% 0 auto;height:520px;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 0%,#4c8dff1f,transparent 70%);
}
.hero .wrap{position:relative}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font:12px/1 var(--mono);color:var(--dim);
  border:1px solid var(--line);border-radius:100px;padding:7px 14px;margin-bottom:22px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--ok)}
h1{
  font-size:clamp(34px,5.4vw,58px);line-height:1.06;letter-spacing:-1.4px;
  font-weight:700;margin:0 0 20px;max-width:16ch;
}
h1 .fade{color:var(--dim)}
.lede{font-size:clamp(16px,2vw,19px);color:var(--dim);max-width:56ch;margin:0 0 32px}
.lede b{color:var(--txt);font-weight:600}

/* --------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--acc);color:#fff;text-decoration:none;
  font:600 15px var(--sans);padding:14px 26px;border:0;border-radius:11px;
  cursor:pointer;transition:transform .12s,filter .15s,box-shadow .15s;
  box-shadow:0 1px 0 #ffffff22 inset,0 8px 24px -12px #4c8dffcc;
}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--raise);border-color:#2b3545}
.btn.small{font-size:13.5px;padding:9px 16px;border-radius:9px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ----------------------------------------------------------------- cards -- */
.card{
  border:1px solid var(--line);background:var(--panel);
  border-radius:var(--r);padding:24px;
}
.card.hi{border-color:#4c8dff3d;background:linear-gradient(180deg,#101a2c,var(--panel))}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.g2,.g3{grid-template-columns:1fr}}
.card h3{margin:0 0 8px;font-size:16px;font-weight:650;letter-spacing:-.2px}
.card p{margin:0;color:var(--dim);font-size:14.5px}
.card .ico{font-size:19px;opacity:.85;margin-bottom:12px;display:block}

/* --------------------------------------------------------------- headings - */
h2{font-size:clamp(24px,3.2vw,32px);line-height:1.2;letter-spacing:-.7px;
   font-weight:680;margin:0 0 12px}
.sub{color:var(--dim);font-size:16px;margin:0 0 34px;max-width:62ch}
.kicker{font:12px/1 var(--mono);color:var(--acc);text-transform:uppercase;
        letter-spacing:1.4px;margin:0 0 14px}

/* ------------------------------------------------------------------ code -- */
code{font:13px var(--mono);background:#0d1117;border:1px solid var(--line);
     border-radius:6px;padding:2px 7px;color:#9db1c5}
pre{background:#0d1117;border:1px solid var(--line);border-radius:12px;
    padding:16px 18px;overflow:auto;font:13px/1.7 var(--mono);color:#9db1c5;margin:0}
pre .c{color:#5c6773}
pre .k{color:var(--acc)}
pre .s{color:var(--ok)}

/* ------------------------------------------------------------- terminal --- */
.term{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0d1117}
.term .bar{display:flex;align-items:center;gap:7px;padding:10px 14px;
           background:#10141c;border-bottom:1px solid var(--line)}
.term .bar i{width:11px;height:11px;border-radius:50%;display:block}
.term .bar .t{margin-left:8px;font:11.5px var(--mono);color:var(--dim)}
.term pre{border:0;border-radius:0;background:transparent}

/* ---------------------------------------------------------------- lists --- */
ul.clean{list-style:none;margin:0;padding:0}
ul.clean li{position:relative;padding-left:24px;margin:11px 0;color:var(--dim);font-size:15px}
ul.clean li:before{content:"";position:absolute;left:6px;top:10px;width:6px;height:6px;
                   border-radius:50%;background:var(--acc);opacity:.75}
ul.clean li b{color:var(--txt);font-weight:600}

/* ---------------------------------------------------------------- table --- */
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--dim);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.7px}
td b{font-weight:600}

/* ----------------------------------------------------------------- pills -- */
.pill{display:inline-block;font:11px/1 var(--mono);text-transform:uppercase;
      letter-spacing:.6px;border:1px solid var(--line);border-radius:100px;
      padding:5px 11px;color:var(--dim)}
.pill.ok{color:var(--ok);border-color:#3fb95055;background:#12261a}
.pill.acc{color:var(--acc);border-color:#4c8dff55;background:#101a2c}
.pill.warn{color:var(--warn);border-color:#d2992255;background:#2b2410}

/* ---------------------------------------------------------------- footer -- */
footer{border-top:1px solid var(--line);padding:40px 0 56px;margin-top:40px}
footer .wrap{display:flex;gap:28px;flex-wrap:wrap;align-items:center}
footer a{color:var(--dim);text-decoration:none;font-size:14px}
footer a:hover{color:var(--txt)}
footer .sp{margin-left:auto;color:var(--dim);font-size:13px}

.hint{color:var(--dim);font-size:13.5px}
.mono{font-family:var(--mono)}
a.link{color:var(--acc);text-decoration:none}
a.link:hover{text-decoration:underline}
/* Any anchor inside page content, not just the ones remembering to ask for
   .link. The download page's "Other downloads" list shipped with raw browser
   defaults - underlined blue turning purple once visited - because nothing
   here styled a bare <a>, and it looked like a broken link on a dark page. */
.card a:not(.btn):not(.brand),
ul.clean a:not(.btn){color:var(--acc);text-decoration:none}
.card a:not(.btn):not(.brand):hover,
ul.clean a:not(.btn):hover{text-decoration:underline}
hr.sep{border:0;border-top:1px solid var(--line);margin:0}

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

/* ============================================================ the forge ====
   The hero background. Deliberately CSS and SVG rather than a video: it is
   about 2 KB instead of several megabytes, it is sharp on any display, it
   costs nothing on a metered connection, and it does not stall a first visit
   while a file downloads. Motion stops entirely under prefers-reduced-motion. */

.brand .mark img,.brandmark{width:22px;height:22px;display:block}

.forge-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
/* the coal bed: a wide, slow-breathing pool of heat under the content */
.forge-bg .coals{
  position:absolute;left:50%;top:-12%;width:min(1100px,120%);height:560px;
  transform:translateX(-50%);
  background:
    radial-gradient(ellipse 46% 40% at 50% 34%,#4c8dff2e,transparent 68%),
    radial-gradient(ellipse 22% 26% at 34% 48%,#2f6fe024,transparent 70%),
    radial-gradient(ellipse 20% 24% at 68% 44%,#7fb4ff1c,transparent 72%);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.85;transform:translateX(-50%) scale(1)}
                   50%{opacity:1;transform:translateX(-50%) scale(1.04)}}

/* embers drifting up off the coals */
.forge-bg .ember{
  position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;
  background:#8cc0ff;box-shadow:0 0 7px 2px #4c8dff88;opacity:0;
  animation:rise linear infinite;
}
@keyframes rise{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.6)}
  12%{opacity:.85}
  70%{opacity:.5}
  100%{opacity:0;transform:translate3d(var(--dx,14px),-460px,0) scale(.25)}
}

/* a hairline of hot metal under the header, like a bar cooling */
.heatline{height:1px;background:linear-gradient(90deg,transparent,#4c8dff66 22%,#8cc0ff99 50%,#4c8dff66 78%,transparent);opacity:.7}

@media(prefers-reduced-motion:reduce){
  .forge-bg .coals,.forge-bg .ember{animation:none}
  .forge-bg .ember{opacity:.35}
}

/* ============================================================== reveal =====
   Sections fade up once as they enter the viewport. One transition, driven by
   IntersectionObserver adding .in — no scroll listeners, and nothing at all
   under prefers-reduced-motion (the media block above zeroes transitions). */
/* hidden-until-revealed applies only once the script has tagged <html> with
   .js — with scripts blocked or broken, every section stays plainly visible */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}

/* =============================================================== bento =====
   One grid, uneven cells — content decides the size, not the template. */
.bento{display:grid;gap:16px;grid-template-columns:repeat(6,1fr)}
.bento .card{margin:0}
.b4{grid-column:span 4}.b3{grid-column:span 3}.b2{grid-column:span 2}.b6{grid-column:span 6}
@media(max-width:860px){.b4,.b3,.b2,.b6{grid-column:span 6}}

/* ======================================================== library page =====
   These classes were referenced by library.html and never defined anywhere —
   the page has been shipping half-unstyled. They live here now, in the same
   token system as everything else. */
.filters{display:flex;gap:8px;margin:18px 0 26px;flex-wrap:wrap}
.filters button{background:transparent;border:1px solid var(--line);color:var(--dim);
  padding:8px 18px;border-radius:100px;font:600 13.5px var(--sans);cursor:pointer;
  transition:color .15s,border-color .15s}
.filters button:hover{color:var(--txt)}
.filters button.on{color:var(--txt);border-color:var(--acc);background:var(--acc-dim)}
.filters .n{color:var(--dim);font-weight:400}
.lib-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin:14px 0 8px}
.lib-grid .card{display:flex;flex-direction:column;gap:8px}
.kind{font:11px/1 var(--mono);text-transform:uppercase;letter-spacing:.6px;color:var(--dim)}
.badge{display:inline-block;font:700 11px/1 var(--sans);letter-spacing:.4px;
  border-radius:100px;padding:5px 11px;margin-left:auto}
.badge.v{color:var(--ok);background:#12261a;border:1px solid #3fb95055}
.badge.c{color:var(--warn);background:#2b2410;border:1px solid #d2992255}
.lib-grid .card .head{display:flex;align-items:center;gap:10px}
.lib-grid .card h3{margin:0;font-size:15.5px}
.by{color:var(--dim);font-size:12.5px}
.lib-grid .card p{margin:0;color:var(--dim);font-size:13.5px;flex:1}
.lib-grid .card pre{font-size:11.5px;padding:9px 12px}
.cwarn{color:var(--warn);font-size:12.5px;margin:0;border-top:1px solid var(--line);padding-top:10px}
.warn{border:1px solid #d2992244;background:#2b241033;color:var(--dim);
  border-radius:var(--r);padding:14px 18px;font-size:14px;margin:0 0 18px}
.warn b{color:var(--warn)}
.submit{border-top:1px solid var(--line);margin-top:44px;padding-top:36px}

/* ====================================================== discovery page ==== */
.tabs{display:flex;gap:8px;margin-bottom:20px}
.tab{padding:9px 20px;border-radius:100px;border:1px solid var(--line);color:var(--dim);
  cursor:pointer;font:600 14px var(--sans);transition:color .15s,border-color .15s}
.tab:hover{color:var(--txt)}
.tab.on{color:var(--txt);border-color:var(--acc);background:var(--acc-dim)}
.srch{display:flex;gap:10px;margin-bottom:20px}
.srch input{flex:1;background:var(--panel);border:1px solid var(--line);color:var(--txt);
  padding:12px 16px;border-radius:11px;font:15px var(--sans)}
.srch input:focus{outline:none;border-color:var(--acc)}
.hit{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:15px 18px;margin-bottom:10px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hit .nm{font-weight:700;font-family:var(--mono);font-size:14px}
.hit .meta{color:var(--dim);font-size:12.5px}
.hit .desc{flex-basis:100%;color:var(--dim);font-size:13.5px}
.hit .cmd{background:#0d1117;border:1px solid var(--line);border-radius:7px;padding:4px 10px;
  font:12px var(--mono);color:#8ec2ff}
.err{border:1px solid #f8514966;background:#f8514911;color:#ffa198;border-radius:10px;
  padding:12px 16px;font-size:14px}

/* =============================================================== forms ==== */
label{display:block;font-size:13px;color:var(--dim);margin:14px 0 5px;font-weight:600}
input.field,select.field{width:100%;background:#0d1117;border:1px solid var(--line);
  border-radius:9px;padding:11px 13px;color:var(--txt);font:15px var(--sans)}
input.field:focus,select.field:focus{outline:none;border-color:var(--acc)}

/* =============================================================== ingot =====
   The Ingots mark: a bar of forged metal on a dark stage, blue-hot aura
   behind it, a specular sheen passing over the faces. Pure CSS on purpose —
   the whole object costs ~1 KB and zero requests, and it freezes cleanly
   under prefers-reduced-motion. */
.ingot-stage{position:relative;width:230px;height:190px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;perspective:700px}
.ingot-aura{position:absolute;inset:-30px;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 50% 58%,#4c8dff2e,transparent 65%),
    radial-gradient(ellipse 30% 25% at 50% 60%,#8cc0ff24,transparent 70%);
  filter:blur(2px);animation:aura 5s ease-in-out infinite}
@keyframes aura{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
.ingot{position:relative;width:170px;height:64px;transform-style:preserve-3d;
  transform:rotateX(56deg) rotateZ(-14deg);animation:ingotfloat 6s ease-in-out infinite}
@keyframes ingotfloat{0%,100%{transform:rotateX(56deg) rotateZ(-14deg) translateZ(0)}
                      50%{transform:rotateX(56deg) rotateZ(-11deg) translateZ(10px)}}
.ingot i{position:absolute;display:block}
/* top face: the mould taper drawn with a clip-path, brushed metal gradient */
.ingot .top{inset:0;clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);
  background:linear-gradient(105deg,#57606d 0%,#8b95a4 30%,#c9d2dd 48%,#78828f 62%,#4a525e 100%);
  border-radius:6px;overflow:hidden}
.ingot .top:after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,#ffffff59 46%,#ffffffcc 50%,#ffffff59 54%,transparent 70%);
  transform:translateX(-120%);animation:sheen 4.2s ease-in-out infinite}
@keyframes sheen{0%,55%{transform:translateX(-130%)}75%,100%{transform:translateX(130%)}}
/* front face: the extrusion, darker, catching the aura from below */
.ingot .side{left:0;right:0;bottom:-16px;height:16px;border-radius:0 0 6px 6px;
  background:linear-gradient(180deg,#3a424d,#232932);
  transform:rotateX(-90deg);transform-origin:top;
  box-shadow:0 10px 30px -6px #4c8dff66}
/* the stamp, like a proofmark struck into the metal */
.ingot .stamp{inset:0;display:flex;align-items:center;justify-content:center;
  font:700 13px/1 var(--mono);letter-spacing:3px;color:#1d232c;
  text-shadow:0 1px 0 #ffffff40}
@media(prefers-reduced-motion:reduce){
  .ingot,.ingot-aura,.ingot .top:after{animation:none}
}