/* Fusion Dev Wiki — static rebuild 2026 */
:root{
  --night:#0A0B10;        /* brand ground, from fusiondev.net */
  --night-2:#15171F;
  --night-line:#262935;
  --night-text:#A9AEBA;
  --fusion:#FF6A00;       /* brand orange: fills + accents on dark */
  --fusion-ink:#B23F00;   /* brand orange for text/lines on white (5.8:1) */
  --fusion-wash:#FFF4EC;
  --paper:#FFFFFF;
  --mist:#F3F4F6;
  --ink:#16181F;
  --muted:#5D6270;
  --line:#E3E5EA;
  --done:#13804F;
  --note:#B4231B;         /* the original "important" red, darkened for contrast */
  --note-wash:#FFF4EE;
  --radius:10px;
  --wrap:1200px;
  --head:"Yantramanav","Helvetica Neue",Arial,sans-serif;
  --body:"PT Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--fusion-ink);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--fusion);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--head);line-height:1.1;margin:0;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 .9em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--fusion);color:var(--night);padding:10px 14px;border-radius:6px;font-weight:700}
.skip:focus{top:12px}

/* ---------- header ---------- */
.top{background:var(--night);color:#fff;border-bottom:1px solid var(--night-line)}
.top-row{display:flex;align-items:center;gap:28px;min-height:72px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;flex:none}
.brand img{width:132px}
.brand span{font:500 21px/1 var(--head);color:var(--night-text);padding-left:10px;border-left:1px solid var(--night-line)}
.nav{margin-left:auto}
.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:8px 12px;border-radius:6px;color:#E6E8EE;text-decoration:none;font-size:16px}
.nav a:hover{background:var(--night-2)}
.nav a[aria-current=page]{color:var(--fusion)}
.call{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--fusion);color:var(--night);font-weight:700;text-decoration:none;font-size:16px;flex:none}
.call svg{width:16px;height:16px;fill:currentColor}
.call:hover{background:#FF7F26}

/* ---------- search ---------- */
.search{position:relative}
.search input{width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.search input::placeholder{color:#7B8190}
.search-mini{flex:1;max-width:340px}
.search-mini input{background:var(--night-2);border-color:var(--night-line);color:#fff;font-size:16px;padding:9px 12px}
.search-mini input::placeholder{color:var(--night-text)}
.results{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 18px 40px -12px rgba(10,11,16,.35);max-height:min(70vh,520px);overflow:auto;padding:6px}
.results a{display:block;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--ink)}
.results a[aria-selected=true],.results a:hover{background:var(--fusion-wash)}
.results .r-t{display:block;font-weight:700;color:var(--ink)}
.results .r-c{display:block;font-size:14px;color:var(--muted)}
.results .r-x{display:block;font-size:15px;color:var(--muted);margin-top:2px}
.results mark{background:none;color:var(--fusion-ink);font-weight:700}
.results .r-none{padding:12px;color:var(--muted);font-size:16px}
.search-inline{max-width:560px;margin-top:20px}

/* ---------- hero ---------- */
.hero{color:#fff;padding:72px 0 0;position:relative;isolation:isolate;background-color:var(--night);
  /* brand glow + faint dot grid (echoes the grid on fusiondev.net) */
  background-image:radial-gradient(ellipse 55% 75% at 86% 12%,rgba(255,106,0,.22),transparent 70%),radial-gradient(ellipse 45% 60% at 0% 100%,rgba(255,106,0,.08),transparent 70%),radial-gradient(circle at 1px 1px,rgba(255,255,255,.10) 1px,transparent 1.6px);
  background-size:auto,auto,24px 24px}
/* connected nodes, after the FusionDev mark; fades out toward the headline */
.hero::before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;width:min(760px,70%);pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 420' fill='none'%3E %3Cg stroke='%23ffffff' stroke-opacity='.13' stroke-width='1.2' stroke-linecap='round'%3E %3Cpath d='M118 92 230 150 212 270 330 330 452 248 566 300M230 150 382 108 452 248M382 108 522 58M212 270 92 336M452 248 522 160 606 190M522 160 522 58'/%3E %3C/g%3E %3Cg fill='%23ffffff' fill-opacity='.14'%3E %3Ccircle cx='118' cy='92' r='5'/%3E%3Ccircle cx='212' cy='270' r='7'/%3E%3Ccircle cx='330' cy='330' r='4'/%3E%3Ccircle cx='566' cy='300' r='6'/%3E %3Ccircle cx='382' cy='108' r='8'/%3E%3Ccircle cx='92' cy='336' r='3.5'/%3E%3Ccircle cx='606' cy='190' r='4'/%3E%3Ccircle cx='522' cy='58' r='5'/%3E %3C/g%3E %3Cg fill='%23FF6A00'%3E %3Ccircle cx='230' cy='150' r='11' fill-opacity='.75'/%3E%3Ccircle cx='452' cy='248' r='14' fill-opacity='.85'/%3E%3Ccircle cx='522' cy='160' r='6' fill-opacity='.6'/%3E %3C/g%3E %3C/svg%3E") right 4% top 18px/min(640px,100%) auto no-repeat;-webkit-mask-image:linear-gradient(to left,#000 45%,transparent 100%);mask-image:linear-gradient(to left,#000 45%,transparent 100%)}
/* the dark band ends exactly at the middle of the search bar (bar is shifted down by half its own height) */
.hero h1{font-weight:900;font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:.96;letter-spacing:-.025em;max-width:14ch}
.hero .lede{color:var(--night-text);font-size:clamp(1.1rem,1.6vw,1.3rem);margin:22px 0 34px}
.hero .lede em{color:#fff;font-style:italic}
.search-hero{max-width:780px;position:relative;z-index:2;transform:translateY(50%)}
.hero+.wrap>.directory{margin-top:92px}
.search-hero svg{position:absolute;left:20px;top:50%;width:22px;height:22px;transform:translateY(-50%);fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
.search-hero input{font-size:19px;padding:20px 20px 20px 54px;border:2px solid var(--fusion);border-radius:12px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.search-hero .results{top:calc(100% + 8px)}

/* ---------- directory (home, docs, 404) ---------- */
.directory{margin:56px 0 88px;border-top:2px solid var(--ink)}
.dir-row{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:24px 48px;padding:30px 0;border-bottom:1px solid var(--line)}
.dir-head{display:flex;gap:18px;align-items:flex-start}
.cat-icon{flex:none;object-fit:contain}
.dir-head h2,.dir-head h3{font-size:1.6rem}
.dir-head h2 a,.dir-head h3 a{color:var(--ink);text-decoration:none}
.dir-head h2 a:hover,.dir-head h3 a:hover{color:var(--fusion-ink);text-decoration:underline}
.dir-head p{margin:6px 0 0;color:var(--muted);font-size:16px}
.dir-list{list-style:none;margin:0;padding:0;columns:2;column-gap:40px}
.dir-list li{break-inside:avoid}
.dir-list a{display:block;padding:8px 0 8px 18px;position:relative;color:var(--ink);text-decoration:none;border-bottom:1px dashed var(--line)}
.dir-list a::before{content:"";position:absolute;left:0;top:1.05em;width:7px;height:7px;border-radius:50%;background:var(--fusion)}
.dir-list a:hover{color:var(--fusion-ink);text-decoration:underline}

/* ---------- inner page heads ---------- */
.page-head{padding-top:28px}
.page-head h1{font-size:clamp(2rem,4vw,3rem);margin-top:14px}
.page-head.narrow{max-width:760px;margin-left:0}
.lede-sm{color:var(--muted);margin:8px 0 0}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;font-size:15px;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:6px;color:#A6ABB6}
.crumbs a{color:var(--muted)}
.crumbs [aria-current]{color:var(--ink)}

/* category */
.cat-title{display:flex;gap:20px;align-items:center;margin-top:14px}
.cat-title h1{margin:0}
.cat-layout{display:grid;grid-template-columns:1fr 300px;gap:56px;margin:40px auto 96px}
.article-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink);counter-reset:a}
.article-list a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font:700 1.25rem/1.25 var(--head)}
.article-list a::after{content:"";flex:none;width:10px;height:10px;border-top:2px solid var(--fusion-ink);border-right:2px solid var(--fusion-ink);transform:rotate(45deg)}
.article-list a:hover .t{color:var(--fusion-ink);text-decoration:underline}
.other-cats h2{font-size:1.1rem;margin-bottom:10px}
.other-cats ul{list-style:none;margin:0;padding:0}
.other-cats a{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:17px}
.other-cats .count{margin-left:auto;color:var(--muted);font-size:15px}
.other-cats a:hover span:nth-child(2){color:var(--fusion-ink);text-decoration:underline}

/* ---------- article ---------- */
.doc-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:64px;margin:28px auto 96px;align-items:start}
.doc-side{position:sticky;top:24px;font-size:16px}
.doc-side h2{font-size:1.05rem;margin-bottom:8px}
.doc-side h2 a{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.doc-side ul{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.doc-side li a{display:block;padding:7px 0 7px 16px;margin-left:-2px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;line-height:1.35}
.doc-side li a:hover{color:var(--ink)}
.doc-side li a[aria-current=page]{border-left-color:var(--fusion);color:var(--ink);font-weight:700}
.doc{max-width:760px}
.doc h1{font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.04}
.meta{color:var(--muted);font-size:16px;margin:14px 0 0;display:flex;gap:14px;flex-wrap:wrap}
.meta .cnt{padding-left:14px;border-left:1px solid var(--line)}
.track-hint{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:22px 0 0;padding:12px 16px;background:var(--mist);border-radius:8px;font-size:16px;color:var(--muted)}
.reset{font:inherit;font-size:15px;color:var(--fusion-ink);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
.doc-body{margin-top:36px}
.doc-body>p{max-width:68ch}

/* steps — the one bold thing */
.steps{list-style:none;margin:0 0 28px;padding:0}
.step{display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 18px;padding:0 0 26px;position:relative}
.step::before{content:"";position:absolute;left:23px;top:50px;bottom:4px;width:2px;background:var(--line)}
.step:last-child::before{display:none}
.step-n{width:48px;height:48px;border-radius:50%;border:2px solid var(--fusion-ink);background:#fff;color:var(--fusion-ink);font:900 20px/1 var(--head);display:grid;place-items:center;cursor:pointer;padding:0;position:relative;z-index:1;transition:background-color .15s,border-color .15s,color .15s}
.step-n:hover{background:var(--fusion-wash)}
.step-n[aria-pressed=true]{background:var(--done);border-color:var(--done);color:#fff}
.step-n[aria-pressed=true] span{display:none}
.step-n[aria-pressed=true]::after{content:"";width:16px;height:9px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:translateY(-2px) rotate(-45deg)}
.step-body{padding-top:9px;min-width:0;overflow-wrap:anywhere}
.step-body>p{margin:0 0 .5em;max-width:66ch}
.step.is-done .step-body>p{color:var(--muted)}
.hl{color:var(--note)}
.detail{margin:10px 0 4px;padding:12px 16px;background:var(--note-wash);border-left:3px solid var(--note);border-radius:0 8px 8px 0;font-size:17px;max-width:66ch}
.detail p{margin:0}
.detail .hl{color:var(--ink)}
.ways{margin:0 0 24px;padding-left:1.3em;max-width:68ch}
.ways li{margin-bottom:14px;padding-left:6px}
.ways li::marker{font:900 1.1em var(--head);color:var(--fusion-ink)}
.done-line{font:700 1.25rem/1.35 var(--head);padding:18px 20px;border-radius:var(--radius);background:#EAF6F0;color:#0D5C39;margin:6px 0 24px}
.shot{margin:16px 0 10px}
.shot a{display:inline-block;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--mist);cursor:zoom-in;max-width:100%}
.shot img{max-height:720px;width:auto}
.fig-narrow img{max-width:min(100%,420px)}
.video{margin:20px 0 32px;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--night)}
.video iframe{width:100%;height:100%;border:0;display:block}
.code{position:relative;margin:14px 0 8px}
.code pre{margin:0;padding:18px 18px 18px 18px;background:var(--night);color:#E8E9EE;border-radius:var(--radius);overflow:auto;font:14px/1.6 ui-monospace,"Cascadia Mono",Consolas,monospace;white-space:pre-wrap;word-break:break-all}
.code .copy{position:absolute;top:10px;right:10px;font:700 14px var(--body);background:var(--fusion);color:var(--night);border:0;border-radius:6px;padding:7px 12px;cursor:pointer}
.code pre{padding-top:52px}
.callout-wait{padding:24px;border:2px solid var(--fusion);border-radius:var(--radius);background:var(--fusion-wash)}
.callout-wait p:last-child{margin:0}
.video-missing{margin:8px 0 32px}
.stuck{margin-top:48px;padding:28px;border-radius:12px;background:var(--night);color:#fff}
.stuck h2{font-size:1.5rem}
.stuck p{color:var(--night-text);margin:8px 0 0}
.stuck-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px!important}
.btn{display:inline-block;padding:11px 18px;border-radius:999px;background:var(--fusion);color:var(--night);font-weight:700;text-decoration:none}
.btn:hover{background:#FF7F26}
.btn-ghost{background:transparent;color:#fff;border:1px solid var(--night-line)}
.btn-ghost:hover{background:var(--night-2)}

/* ---------- footer ---------- */
.foot{background:var(--night);color:var(--night-text);font-size:16px;padding-top:64px}
.foot-grid{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:40px}
.foot h2{font:700 1.05rem var(--head);color:#fff;margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:8px}
.foot a{color:var(--night-text);text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.fabout img{width:150px;margin-bottom:16px}
.fabout p{max-width:30ch}
.fphone{display:inline-block;font:700 1.4rem var(--head);color:var(--fusion)!important}
.fbase{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:20px;padding-bottom:28px;border-top:1px solid var(--night-line);font-size:14px}
.fbase p{margin:0}

/* ---------- lightbox ---------- */
.lightbox{border:0;padding:0;background:transparent;max-width:96vw;max-height:94vh}
.lightbox::backdrop{background:rgba(10,11,16,.88)}
.lightbox img{max-width:96vw;max-height:94vh;width:auto;border-radius:8px}
.lb-close{position:fixed;top:14px;right:18px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--night);font-size:28px;line-height:1;cursor:pointer}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .search-mini{display:none}
  .doc-layout{grid-template-columns:1fr;gap:0}
  .doc-side{display:none}
  .cat-layout{grid-template-columns:1fr;gap:40px}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
  .fabout{grid-column:1/-1}
}
@media (max-width:760px){
  body{font-size:17px}
  .wrap{padding:0 16px}
  .top-row{gap:12px;min-height:64px}
  .brand img{width:112px}
  .brand span{font-size:18px;padding-left:8px}
  .nav{display:none}
  .call{margin-left:auto;padding:8px 13px;font-size:15px}
  .hero{padding-top:44px}
  .hero::before{width:100%;opacity:.38;background-size:420px auto;background-position:right -60px top 8px}
  .search-hero input{font-size:17px;padding:16px 14px 16px 46px}
  .search-hero svg{left:15px}
  .dir-row{grid-template-columns:1fr;gap:14px;padding:24px 0}
  .dir-list{columns:1}
  .directory{margin:44px 0 64px}
  .hero+.wrap>.directory{margin-top:76px}
  .crumbs li[aria-current]{display:none}
  .crumbs li:nth-last-child(2)::after{content:""}
  .step{grid-template-columns:40px minmax(0,1fr);gap:0 12px}
  .step-n{width:40px;height:40px;font-size:17px}
  .step::before{left:19px;top:42px}
  .step-body{padding-top:6px}
  .shot img{max-height:none}
  .stuck{padding:22px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.top,.foot,.doc-side,.stuck,.track-hint,.search{display:none}.step-n{border-color:#000;color:#000}.shot img{max-height:none}}