/* ============================================================================
   byaitoai.com — site theme
   ----------------------------------------------------------------------------
   This is the SAME stylesheet the homepage uses, extracted so every page shares
   one visual language instead of drifting. It is the source of truth for:

     --bg  --ti  --mut  --cy  --ice  --am  --ln     colour
     --d   --u   --m                                 type
     .btn .btn.p  .card  .chip  .k  .lead  .mut      components

   Page-specific rules (the homepage's canvas stage, the harness page's
   architecture list) stay in their own <style> block. Everything shared lives
   here.

   The homepage inlines this same CSS rather than linking it, on purpose: it is
   the landing page and must render correctly even if /assets is unreachable.
   ========================================================================== */


:root{--bg:#05070a;--g:#0c1016;--g2:#151b24;--ti:#c7d0d9;--mut:#8591a0;--cy:#5fe3ff;--ice:#9cc8ff;--am:#ffb454;--ln:rgba(199,208,217,.15);--d:"Syncopate","Arial Narrow",Arial,sans-serif;--u:"IBM Plex Sans",system-ui,sans-serif;--m:"IBM Plex Mono",ui-monospace,Menlo,monospace;color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px);background:var(--bg)}
body{background:var(--bg);color:var(--ti);font:400 16px/1.6 var(--u);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:rgba(5,7,10,.7);backdrop-filter:blur(10px)}
:focus-visible{outline:2px solid var(--cy);outline-offset:3px}
#cv{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.vig{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 60% 45%,transparent 35%,#05070a 105%)}
nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(14px + env(safe-area-inset-top,0px)) 5vw 14px;background:linear-gradient(#05070acc,transparent)}
nav b{font:700 .8rem var(--d);letter-spacing:.2em}
nav div{display:flex;gap:22px;align-items:center;font:400 .78rem var(--m)}
nav a,nav button{color:var(--ti);text-decoration:none;background:none;border:0;font:inherit;cursor:pointer}
nav a:hover,nav button:hover{color:var(--cy)}
main{position:relative;z-index:1}
section{position:relative;padding:14vh 5vw}
h1,h2,h3{font-family:var(--d);font-weight:700;text-transform:uppercase}
h1{font-size:clamp(1.7rem,5.4vw,5rem);line-height:1.1;letter-spacing:-.01em;max-width:min(100%,920px)}
h2{font-size:clamp(1.3rem,3.6vw,3rem);line-height:1.15;max-width:min(100%,900px)}
h3{font-size:.8rem;line-height:1.4;letter-spacing:.06em;margin-bottom:8px}
.k{font:400 .72rem var(--m);letter-spacing:.2em;color:var(--cy);text-transform:uppercase}
.mut{color:var(--mut)}
.lead{max-width:56ch;font-size:1.1rem;color:var(--ti);margin:1.4rem 0 2.2rem}
.btn{display:inline-block;border:1px solid var(--ln);padding:.9rem 1.4rem;font:400 .76rem var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--ti);background:rgba(12,16,22,.6);text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s}
.btn:hover{border-color:var(--cy)}
.btn.p{background:var(--ti);color:#05070a;border-color:var(--ti)}
.btn.p:hover{background:#fff}
/* Reveal states are gated on html.js: a visitor without JS, or a crawler, sees
   the whole page. Without the gate a script failure blanks the site — a bug
   this project already hit once. */
html.js .r{opacity:0;transform:translateY(24px);transition:opacity .9s var(--d,0s),transform .9s var(--d,0s)}
html.js .r.in{opacity:1;transform:none}
#void{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.wm{display:flex;align-items:center;gap:12px;font:700 1rem var(--d);margin-bottom:2rem;animation:find 2.8s .5s both cubic-bezier(.2,.7,.2,1)}
.wm svg{width:28px;height:28px;color:var(--cy)}
@keyframes find{from{letter-spacing:1em;filter:blur(10px);opacity:0}to{letter-spacing:.3em;filter:none;opacity:1}}
.cta{display:flex;gap:14px;flex-wrap:wrap}
#build{height:230svh;padding:0}
#build .st{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:0 5vw}
.answer{display:block;opacity:calc(1 - var(--b,0)*.75)}
.builds{display:block;color:var(--cy);opacity:var(--b,0);transform:translateY(calc((1 - var(--b,0))*30px))}
.cap{opacity:var(--b,0);margin-top:1.6rem;max-width:52ch;color:var(--mut)}
.tiles,.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;background:var(--ln);border:1px solid var(--ln);margin-top:2.4rem}
.tile,.card{background:var(--g);color:inherit;font:inherit;text-align:left;padding:24px;cursor:pointer;border:0;display:block;text-decoration:none;transition:background .2s}
.tile:hover,.card:hover{background:var(--g2)}
.art{width:84px;height:84px;color:var(--c,var(--cy));margin-bottom:18px}
.card .art{width:64px;height:64px}
.art svg{width:100%;height:100%}
.tiles .art svg *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.7s cubic-bezier(.2,.7,.2,1)}
.tiles .in .art svg *{stroke-dashoffset:0}
.tile p,.card p{font-size:.92rem}
.meta{display:flex;justify-content:space-between;gap:10px;margin-top:14px;font:400 .72rem var(--m);color:var(--mut)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:5vw;align-items:start}
.steps{list-style:none;padding:0;counter-reset:s;border-left:1px solid var(--ln)}
.steps li{counter-increment:s;padding:14px 18px;background:rgba(5,7,10,.65);position:relative}
.steps li::before{content:counter(s);position:absolute;left:-10px;top:16px;width:19px;height:19px;border-radius:50%;background:var(--bg);border:1px solid var(--cy);font:.65rem/17px var(--m);text-align:center;color:var(--cy)}
.steps b{font:500 1rem var(--u)}
.badge{font:.64rem var(--m);letter-spacing:.1em;border:1px solid var(--ln);padding:1px 7px;margin-left:8px;color:var(--mut);text-transform:uppercase}
.badge.on{color:var(--am);border-color:var(--am)}
.leg{margin-top:1.4rem;font:.76rem var(--m)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 6px 0 14px}
.dot.a{background:var(--am)}.dot.c{background:var(--cy)}
.demo{border:1px solid var(--am);color:var(--am);padding:10px 14px;font:.76rem var(--m);margin:1.4rem 0;max-width:70ch}
.sr{position:absolute;left:-9999px}
input,select,textarea{width:100%;background:#070a0e;border:1px solid var(--ln);color:var(--ti);padding:.8rem 1rem;font:inherit;margin-top:6px}
#q{font-size:1.1rem;padding:1.1rem 1.3rem}
.bar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.chip{background:none;border:1px solid var(--ln);color:var(--ti);padding:.4rem .9rem;font:.76rem var(--m);cursor:pointer}
.chip[aria-pressed=true]{background:var(--ti);color:#05070a}
.tools{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font:.76rem var(--m);color:var(--mut)}
.empty{background:var(--g);padding:40px;grid-column:1/-1}
.json{background:var(--g);grid-column:1/-1;max-height:70vh;overflow:auto;margin:0;border:0}
pre{font:400 .78rem/1.6 var(--m);background:#070a0e;border:1px solid var(--ln);padding:14px;overflow-x:auto;color:var(--ice);margin:.5rem 0 1rem}
#open h2{margin:1rem 0 2.4rem}
.big{font:700 clamp(1rem,2.4vw,1.6rem) var(--d);color:var(--cy);margin-bottom:1.6rem}
footer{margin-top:12vh;padding-top:24px;border-top:1px solid var(--ln);font:.74rem var(--m);color:var(--mut)}
dialog{width:min(860px,94vw);max-height:90svh;background:var(--g);color:var(--ti);border:1px solid var(--ln);padding:0;overflow:auto}
dialog::backdrop{background:rgba(2,3,5,.82);backdrop-filter:blur(6px)}
#dc{padding:clamp(20px,4vw,40px)}
dialog h2{font-size:clamp(1.1rem,2.6vw,1.6rem);margin:.5rem 0 1rem}
.x{position:absolute;top:10px;right:14px;background:none;border:0;color:var(--ti);font-size:1.8rem;cursor:pointer;line-height:1}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px;margin:22px 0}
h4{font:400 .7rem var(--m);letter-spacing:.14em;color:var(--cy);text-transform:uppercase;margin:0 0 6px}
ul{list-style:none;padding:0}
label{display:block;font:.75rem var(--m);color:var(--mut);margin:.9rem 0}
.note{font:.74rem var(--m);color:var(--mut);margin-top:16px}
@media(max-width:640px){nav div a{display:none}section{padding:12vh 6vw}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.r{opacity:1;transform:none;transition:none}.wm{animation:none}.answer,.builds,.cap{opacity:1;transform:none}.tiles .art svg *{stroke-dashoffset:0;transition:none}}

/* ---------------------------------------------------------------- rtl
   The layout is centred and grid-based, so most of it is already direction
   agnostic. Only the handful of rules that imply a reading direction need
   flipping, plus the Persian typography overrides. */
html[dir="rtl"] nav,
html[dir="rtl"] .tools,
html[dir="rtl"] .bar,
html[dir="rtl"] .cols { direction: rtl; }
html[dir="rtl"] .k,
html[dir="rtl"] nav b,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 { letter-spacing: 0; }
html[dir="rtl"] .steps li { text-align: right; }
html[lang="fa"] body {
  font-family: "Vazirmatn", system-ui, sans-serif;
  line-height: 1.85;
}
html[lang="fa"] h1,
html[lang="fa"] h2,
html[lang="fa"] h3,
html[lang="fa"] nav b,
html[lang="fa"] .k,
html[lang="fa"] .btn {
  font-family: "Vazirmatn", system-ui, sans-serif;
  text-transform: none;
  letter-spacing: 0;
}
html[lang="fa"] .lead { font-size: 1.06rem; }

footer .fl{display:inline-flex;gap:18px;margin-inline-start:18px;flex-wrap:wrap}
footer .fl a{color:var(--mut);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
footer .fl a:hover{color:var(--cy);border-bottom-color:var(--cy)}

/* Language switcher: inherits the nav's mono type so it does not look bolted on. */
nav .lang{position:relative}
nav .lang-btn{font:400 .78rem var(--m);letter-spacing:.14em;padding:.35rem .55rem;border:1px solid var(--ln);color:var(--ti)}
nav .lang-btn:hover{border-color:var(--cy);color:var(--cy)}
nav .lang-menu{position:absolute;inset-inline-end:0;top:calc(100% + 10px);min-width:150px;padding:6px;background:rgba(12,16,22,.96);backdrop-filter:blur(16px);border:1px solid var(--ln);display:none;flex-direction:column;gap:2px;z-index:40}
nav .lang.open .lang-menu{display:flex}
nav .lang-menu button{text-align:start;padding:.5rem .6rem;font:400 .78rem var(--m);color:var(--mut)}
nav .lang-menu button:hover{color:var(--cy);background:rgba(95,227,255,.06)}
nav .lang-menu button[aria-current="true"]{color:var(--cy)}


/* ---------------------------------------------------------------- shared page
   Building blocks the sub-pages need. Kept minimal and in the same language as
   the homepage: mono labels, hairline borders, no rounded corners, no shadows. */

/* A page hero that matches the homepage's #void without its canvas. */
.phero{min-height:78svh;display:flex;flex-direction:column;justify-content:center;padding:16vh 5vw 10vh;position:relative}
.phero h1{max-width:min(100%,1000px)}
.phero .lead{margin-top:1.4rem}

/* Section wrapper used by sub-pages. */
.sec{padding:12vh 5vw;position:relative}
.sec > .inner{max-width:1240px;margin-inline:auto}

/* A grid of bordered cells — the homepage's .tiles/.grid grammar. */
.cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--ln);border:1px solid var(--ln)}
.cell{background:var(--bg);padding:1.6rem}
.cell h3{font-family:var(--d);font-size:.78rem;letter-spacing:.1em;margin-bottom:.5rem}
.cell p{color:var(--mut);font-size:.92rem;line-height:1.65}

/* Numbered steps, matching the homepage's .steps. */
.flow{display:grid;gap:1px;background:var(--ln);border:1px solid var(--ln);margin-top:2rem}
.flow > li{list-style:none;background:var(--bg);padding:1.5rem 1.6rem;display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start}
.flow > li > .n{font-family:var(--m);font-size:.72rem;letter-spacing:.18em;color:var(--cy);padding-top:.25rem}
.flow h3{font-family:var(--d);font-size:.82rem;letter-spacing:.08em;margin-bottom:.4rem}
.flow p{color:var(--mut);font-size:.92rem;margin:0}

/* A code block in the site's mono type. */
pre.code, .code{background:var(--g);border:1px solid var(--ln);padding:1.1rem 1.2rem;overflow-x:auto;font:400 .8rem/1.7 var(--m);color:var(--ti);tab-size:2}
pre.code::selection, .code::selection{background:rgba(95,227,255,.25)}

/* Small inline badge, same as the homepage's .badge. */
.tag{display:inline-block;font:400 .66rem var(--m);letter-spacing:.14em;text-transform:uppercase;padding:.25rem .5rem;border:1px solid var(--ln);color:var(--mut)}
.tag.on{color:var(--cy);border-color:rgba(95,227,255,.4)}

/* A two-column split that collapses on narrow screens. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:2rem}}

/* Table in the site's grammar. */
table.t{width:100%;border-collapse:collapse;font-size:.9rem}
table.t th,table.t td{text-align:start;padding:.7rem .9rem;border-bottom:1px solid var(--ln)}
table.t th{font:400 .7rem var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
table.t td.mono{font-family:var(--m);font-size:.82rem;color:var(--cy)}

/* ---------------------------------------------------------------- rtl block */
/* The theme is centred and grid based, so most of it is already direction
   agnostic. These are the rules that imply a reading direction. */
html[dir="rtl"] nav,
html[dir="rtl"] .flow,
html[dir="rtl"] .split { direction: rtl; }
html[dir="rtl"] .flow > li { grid-template-columns:auto 1fr; }
html[dir="rtl"] .k,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] .btn { letter-spacing: 0; }
html[dir="rtl"] table.t th,
html[dir="rtl"] table.t td { text-align: right; }
html[dir="rtl"] .cell,
html[dir="rtl"] .flow > li { text-align: right; }
html[dir="rtl"] pre.code { direction: ltr; text-align: left; }

html[lang="fa"] body { font-family: "Vazirmatn", system-ui, sans-serif; line-height: 1.85; }
html[lang="fa"] h1,
html[lang="fa"] h2,
html[lang="fa"] h3,
html[lang="fa"] nav b,
html[lang="fa"] .k,
html[lang="fa"] .btn,
html[lang="fa"] .cell h3,
html[lang="fa"] .flow h3 {
  font-family: "Vazirmatn", system-ui, sans-serif;
  text-transform: none;
  letter-spacing: 0;
}