/* hero.css: every rule that draws the hero, the in-context previews, and the
   ?render=1 export view. This file is the pixel firewall for the wizard
   redesign: the export must stay pixel-identical, so nothing here changes
   without a deliberate, parity-tested decision. Base tokens and fonts live
   at the top because everything else depends on them; hero.css loads after
   studio.css so original cascade order is preserved for the hero rules.
   Both stylesheets live at the public root, not a css/ subfolder: their
   url(...) references (fonts, adom-logo.svg, comp images) resolve relative
   to the stylesheet, and only the root keeps those identical to the old
   inline styles under the reverse proxy. */


@font-face { font-family: 'Familjen Grotesk'; src: url('fonts/familjen-grotesk-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

@font-face { font-family: 'Familjen Grotesk'; src: url('fonts/familjen-grotesk-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

@font-face { font-family: 'Satoshi'; src: url('fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }

@font-face { font-family: 'Satoshi'; src: url('fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }


:root {
  --bg:#0d1117; --surface:#161b22; --elevated:#1c2128; --overlay:#21262d; --border:#30363d;
  --text:#e6edf3; --text-2:#8b949e; --text-3:#484f58;
  --accent:#00b8b0; --accent-bright:#00e6dc; --purple:#8c6bf7; --blue:#58a6ff;
  --green:#3fb950; --red:#f85149; --yellow:#d29922;
  --grad:linear-gradient(100deg,#00e6dc,#39b8ff 60%,#8c6bf7);
}

* { box-sizing:border-box; margin:0; padding:0; }

html,body { height:100%; }

body {
  background:var(--bg); color:var(--text);
  font-family:'Satoshi',sans-serif; font-size:14px;
  display:flex; flex-direction:column; overflow:hidden;
}


.hero[data-theme=image] .bg { background-color:#0a0e14; background-image:var(--bgimg, none); background-repeat:repeat; background-size:var(--bgtile, 22cqw); }

.hero[data-theme=image].bg-cover .bg { background-repeat:no-repeat; background-size:cover; background-position:center; }

.hero {
  /* equal safe-area margins on all four sides (John, hero-studio#1 ask 7);
     corner badges keep their own uniform tighter inset */
  --inset:4.5cqw; --badge-inset:2.6cqw;
  aspect-ratio:16/10; position:relative; overflow:hidden;
  border-radius:12px; border:1px solid var(--border); container-type:inline-size;
  --ga:155deg;
}

#hero { width:100%; max-width:1000px; flex:0 0 auto; box-shadow:0 24px 70px rgba(0,0,0,.5); }


/* backgrounds: continue to the very bottom, per the new rule */
.bg { position:absolute; inset:0; }

/* mirror mode flips the whole background composition (glows, tiles, corner motifs) */
.hero[data-layout=mirror] .bg { transform:scaleX(-1); }

.hero[data-theme=midnight] .bg {
  background:
    radial-gradient(1200px 800px at 88% -10%, rgba(0,184,177,.22), transparent 60%),
    radial-gradient(900px 700px at -5% 110%, rgba(140,107,247,.18), transparent 55%),
    linear-gradient(var(--ga),#0a0e14 0%,#0d1117 45%,#071318 100%);
}

.hero[data-theme=midnight] .bg::after {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
  background-size:2.2cqw 2.2cqw;
  -webkit-mask-image:radial-gradient(700px 560px at 30% 30%, #000, transparent 75%);
          mask-image:radial-gradient(700px 560px at 30% 30%, #000, transparent 75%);
}

.hero[data-theme=pcb] .bg {
  background:
    radial-gradient(1100px 760px at 85% -8%, rgba(0,230,220,.14), transparent 60%),
    linear-gradient(var(--ga),#031b19 0%,#04302c 55%,#02211e 100%);
}

.hero[data-theme=pcb] .bg::after {
  content:''; position:absolute; inset:0; opacity:.5;
  --motif:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><g stroke="%2300e6dc" stroke-opacity=".09" fill="none" stroke-width="1.4"><path d="M10 20 h56 l18 18 v50"/><path d="M84 150 v-36 l22 -22 h44"/><path d="M20 140 v-48 l14 -14"/><circle cx="10" cy="20" r="3.2"/><circle cx="84" cy="88" r="3.2"/><circle cx="150" cy="92" r="3.2"/><circle cx="20" cy="140" r="3.2"/><circle cx="34" cy="78" r="3.2"/></g></svg>'); background-image:var(--motif);
  background-size:10cqw 10cqw;
}

.hero[data-theme=onion] .bg {
  background:
    radial-gradient(900px 700px at -5% 112%, rgba(140,107,247,.16), transparent 55%),
    linear-gradient(var(--ga),#0b1322 0%,#101a2c 55%,#0a111e 100%);
}

/* authentic Kickstand corner dome (brand deck onion motif), teal-to-purple stroke */
.hero[data-theme=onion] .bg::after {
  content:''; position:absolute; inset:0;
  --motif:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><defs><linearGradient id="g" x1="0" y1="1" x2="1" y2="0"><stop offset="0" stop-color="%238c6bf7"/><stop offset=".55" stop-color="%2339b8ff"/><stop offset="1" stop-color="%2300e6dc"/></linearGradient></defs><g fill="none" stroke="url(%23g)" stroke-width="4" opacity=".5"><path d="M356 400 V234 Q356 60 200 60 Q44 60 44 234 V400"/><path d="M312 400 V250 Q312 110 200 110 Q88 110 88 250 V400"/><path d="M268 400 V266 Q268 160 200 160 Q132 160 132 266 V400"/><path d="M224 400 V282 Q224 210 200 210 Q176 210 176 282 V400"/></g></svg>'); background-image:var(--motif);
  background-repeat:no-repeat;
  background-position:right -7cqw bottom -9cqw;
  background-size:50cqw auto;
}

.hero[data-theme=pill] .bg {
  background:
    radial-gradient(1000px 720px at 90% -8%, rgba(0,184,177,.12), transparent 60%),
    linear-gradient(var(--ga),#082a29 0%,#0c3a3c 55%,#062220 100%);
}

/* authentic pattern-pill: scattered capsule + circle outlines, mixed brand strokes */
.hero[data-theme=pill] .bg::after {
  content:''; position:absolute; inset:0;
  --motif:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="260" height="200"><g fill="none" stroke-width="2"><rect x="16" y="22" width="26" height="62" rx="13" stroke="%2364ABFF" stroke-opacity=".3"/><circle cx="112" cy="38" r="12" stroke="%2300e6dc" stroke-opacity=".28"/><rect x="196" y="14" width="28" height="72" rx="14" stroke="%2339b8ff" stroke-opacity=".3"/><rect x="84" y="128" width="62" height="26" rx="13" stroke="%2300b8b1" stroke-opacity=".28"/><circle cx="226" cy="150" r="10" stroke="%238c6bf7" stroke-opacity=".26"/><rect x="20" y="150" width="26" height="40" rx="13" stroke="%2300e6dc" stroke-opacity=".2"/></g></svg>'); background-image:var(--motif);
  background-size:16cqw auto;
}

.hero[data-theme=grid] .bg {
  background:
    radial-gradient(1000px 700px at 85% -10%, rgba(0,230,220,.10), transparent 60%),
    linear-gradient(var(--ga),#07302e 0%,#0c3a3c 55%,#052220 100%);
}

/* authentic pattern-grid: fine outlined-square field */
.hero[data-theme=grid] .bg::after {
  content:''; position:absolute; inset:0; opacity:.55;
  --motif:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"><rect x="4" y="4" width="18" height="18" fill="none" stroke="%23ffffff" stroke-opacity=".13" stroke-width="1.3"/></svg>'); background-image:var(--motif);
  background-size:2.4cqw 2.4cqw;
}

.hero[data-theme=gradient] .bg {
  background:
    linear-gradient(155deg, rgba(5,10,18,.42), rgba(5,10,18,.14) 55%, rgba(5,10,18,.5)),
    linear-gradient(var(--ga),#00c8bf 0%,#2f9dfa 55%,#8c6bf7 100%);
}


/* ---------- image-zone text column ---------- */
.textzone {
  position:absolute; left:var(--inset); top:var(--inset); width:34cqw; z-index:3;
  padding-right:1.5cqw;
}

.hero[data-layout=mirror] .textzone { left:auto; right:var(--inset); }

.wordmark { display:flex; align-items:flex-start; height:1.72cqw; margin-bottom:3.2cqw; }

/* the official Adom wordmark (adom-logo.svg), recolored white for dark heroes via mask */
.wordmark .wmark {
  display:block; width:7.8cqw; height:1.72cqw; background:#e6edf3;
  -webkit-mask:url('adom-logo.svg') no-repeat left top / contain;
          mask:url('adom-logo.svg') no-repeat left top / contain;
}

.h-title {
  font-family:'Familjen Grotesk'; font-weight:700; font-size:var(--fs-title, 8cqw); line-height:1.04;
  letter-spacing:-.14cqw; color:#e6edf3; margin-bottom:calc(1.8cqw * var(--fs-gap, 1));
  /* the ink never moves: leading is fixed (no control), and cap trimming
     removes the size-dependent gap above the capitals, so the first cap
     sits exactly at the anchor at any font size */
  text-box-trim: trim-start;
  text-box-edge: cap alphabetic;
}

.h-title { max-width:30cqw; }

.h-sub { font-size:var(--fs-sub, 2.5cqw); line-height:1.45; color:#e8eef4; margin-bottom:calc(1.2cqw * var(--fs-gap, 1));
  max-width:30cqw; text-shadow:0 1px 6px rgba(0,0,0,.45); }

.hero[data-theme=gradient] .h-sub { color:#f6fafd; }

.h-sub .accent { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:500; }

.h-sub b { color:#e6edf3; font-weight:500; }

.h-desc { font-size:var(--fs-desc, 1.35cqw); line-height:1.5; color:#8b949e; max-width:30cqw; }


/* ---------- the app-window mock (the "screenshot") ---------- */
.window {
  position:absolute; z-index:2; border-radius:.9cqw .9cqw 0 0; overflow:hidden;
  background:#10151c; border:1px solid rgba(255,255,255,.09);
  box-shadow:0 1.7cqw 5cqw rgba(0,0,0,.62), 0 0 8cqw rgba(0,184,177,.07);
  display:flex; flex-direction:column;
}

.hero[data-layout=bleed-bottom] .window { right:4.5cqw; top:6cqw; width:56cqw; height:64cqw; }

.hero[data-layout=bleed-right] .window { right:-8cqw; top:6cqw; width:56cqw; height:44cqw; border-radius:.9cqw 0 0 .9cqw; }

.hero[data-layout=bleed-top] .window { right:4.5cqw; top:-6cqw; width:52cqw; height:42cqw; border-radius:0 0 .9cqw .9cqw; }

.hero[data-layout=bleed-corner-br] .window { right:-7cqw; top:14cqw; width:56cqw; height:52cqw; border-radius:.9cqw 0 0 0; }

.hero[data-layout=bleed-corner-tr] .window { right:-7cqw; top:-6cqw; width:56cqw; height:44cqw; border-radius:0 0 0 .9cqw; }

.hero[data-layout=contained] .window { right:4.5cqw; top:6cqw; width:50cqw; height:33cqw; border-radius:.9cqw; }

.hero[data-layout=mirror] .window { left:4.5cqw; top:6cqw; width:56cqw; height:64cqw; }

.hero[data-layout=showcase] .window { right:-4cqw; top:4cqw; width:66cqw; height:58cqw; border-radius:.9cqw 0 0 .9cqw; }

.hero[data-layout=showcase]::after {
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(100deg, rgba(5,9,14,.88) 0%, rgba(5,9,14,.55) 30%, rgba(5,9,14,0) 55%);
}

.hero[data-layout=showcase] .textzone { z-index:3; width:30cqw; }

.titlebar {
  flex:0 0 2.1cqw; background:#181f28; border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; padding:0 .9cqw; gap:.6cqw;
}

.titlebar .t { font-family:'Satoshi'; font-size:.82cqw; color:#8b949e; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.winbtns { margin-left:auto; display:flex; gap:.9cqw; align-items:center; }

.winbtns svg { width:.72cqw; height:.72cqw; stroke:#8b949e; stroke-width:2; fill:none; }

.appbody { flex:1; display:flex; min-height:0; position:relative; }

.showcase-img { display:none; position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:top center; background:#0d1117; z-index:2; }

.hero.showcase-cover .showcase-img { object-fit:cover; }

.hero.has-showcase .showcase-img { display:block; }

.fullimport-img { display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }

.hero.fullimport .fullimport-img { display:block; }

.hero.fullimport .textzone, .hero.fullimport .window { display:none; }

.sidebar { flex:0 0 11cqw; background:#131920; border-right:1px solid rgba(255,255,255,.05); padding:.8cqw .7cqw; }

.srow { height:1.5cqw; border-radius:.35cqw; background:rgba(255,255,255,.05); margin-bottom:.55cqw; }

.srow.on { background:rgba(0,184,176,.18); border:1px solid rgba(0,184,176,.35); }

.content { flex:1; padding:1cqw 1.1cqw; display:flex; flex-direction:column; gap:.8cqw; }

.crow { display:flex; gap:.6cqw; align-items:center; }

.chipk { height:1.3cqw; border-radius:999px; background:rgba(255,255,255,.07); }

.bars { flex:1; display:flex; align-items:flex-end; gap:.5cqw; min-height:0; }

.bar { flex:1; border-radius:.3cqw .3cqw 0 0; background:linear-gradient(180deg, rgba(0,230,220,.55), rgba(0,184,176,.12)); }

.tbl { display:flex; flex-direction:column; gap:.45cqw; }

.trow { display:flex; gap:.5cqw; }

.tcell { height:1.05cqw; border-radius:.25cqw; background:rgba(255,255,255,.06); }


/* ---------- the lower-third textual overlay ---------- */
#mqoverlay { display:none; position:absolute; left:0; right:0; bottom:0; z-index:5;
  padding:3cqw 3cqw 2.2cqw;
  background:linear-gradient(180deg, rgba(5,9,14,0) 0%, rgba(5,9,14,.55) 35%, rgba(5,9,14,.9) 100%); }

.hero.show-mq #mqoverlay { display:block; }

#mqoverlay .mqo-badges { display:flex; gap:1cqw; align-items:center; margin-bottom:.9cqw; }

#mqoverlay .mqo-title { font-family:'Familjen Grotesk'; font-weight:700; font-size:3.2cqw; color:#fff; margin:0 0 .5cqw; }

#mqoverlay .mqo-brief { font-size:1.5cqw; color:#c9d1d9; margin:0 0 .7cqw; max-width:60cqw; }

#mqoverlay .mqo-owner { font-family:'JetBrains Mono',monospace; font-size:1.1cqw; color:#00b8b1; }

.pill-tr { position:absolute; top:var(--badge-inset); right:var(--badge-inset); z-index:6; }

.slug-br { position:absolute; right:var(--badge-inset); bottom:var(--badge-inset); z-index:6; }

.lower {
  position:absolute; left:0; right:0; bottom:0; height:33.4%; z-index:4;
  background:linear-gradient(180deg, rgba(10,14,20,0) 0%, rgba(10,14,20,.62) 22%, rgba(10,14,20,.94) 62%, rgba(10,14,20,.98) 100%);
  display:flex; align-items:flex-end;
}

.lowerin {
  width:100%; padding:0 5.75cqw 3.1cqw; display:flex; align-items:flex-end; gap:2cqw;
}

.lmain { min-width:0; flex:1; }

.badges { display:flex; align-items:center; gap:.9cqw; margin-bottom:1cqw; }

.pill {
  font-family:'Familjen Grotesk'; font-weight:700; font-size:.85cqw; letter-spacing:.14em;
  padding:.3cqw .85cqw; border-radius:999px; border:1px solid; text-transform:uppercase;
}

.pill.app { color:#00e6dc; border-color:rgba(0,230,220,.45); background:rgba(0,184,176,.10); }

.pill.skill { color:#b39dfb; border-color:rgba(140,107,247,.5); background:rgba(140,107,247,.12); }

.pill.bootstrap { color:#79b8ff; border-color:rgba(88,166,255,.5); background:rgba(88,166,255,.12); }

.pill.component { color:#e3b341; border-color:rgba(210,153,34,.5); background:rgba(210,153,34,.12); }

.pill.service { color:#ff9d76; border-color:rgba(248,110,73,.5); background:rgba(248,110,73,.12); }

.pill.bridge { color:#00e6dc; border-color:rgba(0,230,220,.45); background:rgba(0,184,176,.10); }

/* pill group (#19): multi-type pages render one clustered badge box */
.pill-tr { display:flex; gap:.5cqw; }

/* pill over showcase (#17): the scrim makes it read as a deliberate badge, not
   debris on the app's own corner UI. Placement stays top-right per contract. */
.pill-tr.scrim .pill { background:rgba(8,12,18,.72); backdrop-filter:blur(5px); box-shadow:0 .2cqw 1cqw rgba(0,0,0,.5); }

/* dynamic-vs-baked (#16): the overlay breathes, tags itself, and hold-hides */
.hero.show-mq #mqoverlay { animation:mqbreathe 3.4s ease-in-out infinite; cursor:pointer; }

@keyframes mqbreathe { 0%,100% { opacity:1; } 50% { opacity:.5; } }

.hero.mq-hold #mqoverlay { display:none !important; }

#mqoverlay .mqo-prompt { display:flex; gap:.8cqw; align-items:center; margin-top:.6cqw; font-family:'JetBrains Mono',monospace; font-size:1.05cqw; color:#c9d1d9; }

#mqoverlay .mqo-prompt button { font-size:.95cqw; padding:.2cqw .8cqw; border-radius:.5cqw; border:1px solid rgba(232,161,60,.6); background:rgba(232,161,60,.12); color:#e8a13c; cursor:pointer; }

.hero.show-mq #mqoverlay { outline:2px dashed rgba(232,161,60,.85); outline-offset:-2px; background:rgba(232,161,60,.045); }

.obadge {
  display:flex; align-items:center; gap:.42cqw; font-family:'JetBrains Mono',monospace;
  font-size:.95cqw; color:#aeb8c4;
}

.obadge svg { width:1cqw; height:1cqw; stroke:#8b949e; stroke-width:1.8; fill:none; }

.obadge b { color:#e6edf3; font-weight:500; }

.l-title { display:block; font-family:'Familjen Grotesk'; font-weight:700; font-size:2.3cqw; line-height:1.1; color:#e6edf3; text-decoration:none; margin-bottom:.55cqw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.l-title:hover { color:#00e6dc; }

.l-desc { font-size:1.2cqw; color:#c3ccd6; line-height:1.4; max-width:58cqw; margin-bottom:.35cqw; }

.l-author { font-size:1.05cqw; color:#8b949e; }

.l-author a { color:#aeb8c4; text-decoration:none; }

.l-author a:hover { color:#00e6dc; }

.l-right { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:.4cqw; padding-bottom:.15cqw; }

.l-mpn { font-family:'JetBrains Mono',monospace; font-size:.95cqw; color:#aeb8c4; display:none; }

.l-slug { font-family:'JetBrains Mono',monospace; font-size:.95cqw; color:#00b8b1; text-decoration:none; }

.l-slug:hover { color:#00e6dc; }

/* long refs shrink a step instead of eating the overlay (the studio-side answer to wiki#59) */
.l-mpn.fit, .l-slug.fit { font-size:.78cqw; }


/* ---------- component mode ---------- */
.hero[data-mode=component] .textzone, .hero[data-mode=component] .window { display:none; }

.hero[data-mode=app] .comp-side, .hero[data-mode=app] .ctextzone { display:none; }

body[data-mode=app] .mode-component { display:none; }

body[data-mode=component] .mode-app { display:none; }

.comp-side { position:absolute; top:0; bottom:0; right:0; width:56%; z-index:1; }

.comp-img {
  position:absolute; inset:0; background-size:cover; background-position:center;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 26%);
          mask-image:linear-gradient(90deg, transparent 0, #000 26%);
}

.hero[data-imgsrc=photo] .comp-img { background-image:url('comp/photo.png'); }

.hero[data-imgsrc=raytrace] .comp-img { background-image:url('comp/raytrace.png'); }

.hero[data-imgsrc=phong] .comp-img { background-image:url('comp/phong.png'); background-size:contain; background-repeat:no-repeat; background-position:center 40%; }

.hero[data-clayout=photo-left] .comp-side { left:0; right:auto; }

.hero[data-clayout=photo-left] .comp-img {
  -webkit-mask-image:linear-gradient(270deg, transparent 0, #000 26%);
          mask-image:linear-gradient(270deg, transparent 0, #000 26%);
}

.hero[data-clayout=photo-left] .ctextzone { left:auto; right:var(--inset); }

.hero[data-clayout=photo-full] .comp-side { left:0; width:100%; }

.hero[data-clayout=photo-full] .comp-img { -webkit-mask-image:none; mask-image:none; }

.hero[data-clayout=photo-full] .comp-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,14,20,.88), rgba(10,14,20,.3) 55%, rgba(10,14,20,.12));
}

.ctextzone { position:absolute; left:var(--inset); top:var(--inset); width:37cqw; z-index:3; }

.c-chips { display:flex; gap:.8cqw; margin-bottom:2cqw; flex-wrap:wrap; }

.c-family {
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:.9cqw; letter-spacing:.12em;
  color:#00e6dc; background:rgba(5,9,14,.55); border:1px solid rgba(0,230,220,.3);
  border-radius:999px; padding:.35cqw 1cqw; text-transform:uppercase;
}

.c-mpnchip { color:#aeb8c4; border-color:rgba(255,255,255,.16); display:none; }

.c-name { font-family:'Familjen Grotesk'; font-weight:700; font-size:5.5cqw; line-height:1.02; letter-spacing:-.08cqw; color:#e6edf3; margin-bottom:.9cqw; text-shadow:0 2px 12px rgba(0,0,0,.5); }

.c-mpn { font-family:'JetBrains Mono',monospace; font-size:1.05cqw; color:#8b949e; margin-bottom:1cqw; display:none; }

.c-spec { font-size:2cqw; color:#aeb8c4; line-height:1.45; max-width:30cqw; text-shadow:0 1px 8px rgba(0,0,0,.5); }

.hero[data-mpn=eyebrow] .c-mpnchip { display:inline-block; }

.hero[data-mpn=under-title] .c-mpn { display:block; }

.hero[data-mpn=overlay] .l-mpn { display:block; }


/* guides */
.guide { position:absolute; left:0; right:0; top:66.6%; z-index:6; border-top:1.5px dashed rgba(0,230,220,.55); pointer-events:none; display:none; }

.guide span {
  position:absolute; right:1cqw; top:.4cqw; font-family:'JetBrains Mono',monospace; font-size:.8cqw;
  color:#00e6dc; background:rgba(10,14,20,.7); padding:.2cqw .6cqw; border-radius:.35cqw;
}

.hero.guides .guide { display:block; }


/* ---------- in-context previews (chrome copied 1:1 from git-wiki style.css) ---------- */
#contexts { display:flex; flex-wrap:wrap; gap:16px; width:100%; max-width:1000px; align-items:flex-start; }

.ctx { min-width:0; }

.ctxlabel { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-2); margin-bottom:6px; }

.ctxframe { background:#0d1117; border:1px solid var(--border); border-radius:10px; padding:14px; }

.clone-slot { position:absolute; inset:0; }

.clone-slot .hero { width:100%; border-radius:0; border:none; }

.heroslot .hero { width:100%; border-radius:8px; }

.hero.preview .guide { display:none !important; }

.hero.preview a { pointer-events:none; }


/* wiki type badges (style.css .badge) */
#contexts .badge { display:inline-block; padding:2px 10px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; border-radius:12px; line-height:1.6; text-align:center; }

#contexts .badge-app { background:rgba(56,139,253,.15); color:#58a6ff; border:1px solid rgba(56,139,253,.3); }

#contexts .badge-skill { background:rgba(188,140,255,.15); color:#bc8cff; border:1px solid rgba(188,140,255,.3); }

#contexts .badge-component { background:rgba(210,153,34,.15); color:#d29922; border:1px solid rgba(210,153,34,.3); }

#contexts .badge-bootstrap { background:rgba(0,184,176,.15); color:#00b8b0; border:1px solid rgba(0,184,176,.3); }


/* homepage marquee (style.css .popular-marquee / .mq-* / .ts-slide-*) */
.mqwrap { height:430px; overflow:hidden; position:relative; }

.mqwrap::before, .mqwrap::after { content:""; position:absolute; left:0; right:0; height:64px; z-index:3; pointer-events:none; }

.mqwrap::before { top:0; background:linear-gradient(to bottom,#0d1117,transparent); }

.mqwrap::after { bottom:0; background:linear-gradient(to top,#0d1117,transparent); }

.mqcol { transform:perspective(900px) rotateY(15deg); }

.mq-track { display:flex; flex-direction:column; gap:20px; will-change:transform; animation:mq-roll-up 130s linear infinite; }

.mqwrap:hover .mq-track { animation-play-state:paused; }

@keyframes mq-roll-up { from { transform:translateY(0); } to { transform:translateY(-50%); } }

.ts-slide { position:relative; aspect-ratio:16/10; display:block; overflow:hidden; background:#161b22; color:#fff; border-radius:14px; flex:none; text-decoration:none; }

.ts-hero-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:32px; text-align:center; background:linear-gradient(135deg,#0f766e,#1d4ed8 60%,#6d28d9); font-size:26px; font-weight:700; color:#fff; font-family:'Familjen Grotesk'; }

.ts-slide-shade { position:absolute; inset:0; background:linear-gradient(to top, rgba(5,9,14,.95) 0%, rgba(5,9,14,.82) 28%, rgba(5,9,14,.5) 55%, rgba(5,9,14,0) 82%); }

.ts-slide-info { position:absolute; left:0; right:0; bottom:0; padding:20px 26px; }

.ts-slide-badges { position:absolute; top:12px; right:14px; display:flex; align-items:center; gap:10px; }

#contexts .ts-slide-badges .badge { background:rgba(5,9,14,.72); box-shadow:0 1px 4px rgba(0,0,0,.4); }

.ts-slide-score { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:#fff; background:rgba(5,9,14,.72); padding:2px 9px; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,.4); }

.ts-slide-stars { display:inline-flex; align-items:center; gap:3px; font-size:12px; color:rgba(255,255,255,.85); background:rgba(5,9,14,.72); padding:2px 9px; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,.4); }

.ts-slide-title { font-size:23px; font-weight:700; margin:6px 0 3px; color:#fff; font-family:'Familjen Grotesk'; text-shadow:0 1px 2px rgba(0,0,0,.85), 0 2px 14px rgba(0,0,0,.55); }

.ts-slide-brief { font-size:15px; line-height:1.5; color:rgba(255,255,255,.88); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0 0 4px; text-shadow:0 1px 2px rgba(0,0,0,.85), 0 2px 10px rgba(0,0,0,.6); }

.ts-slide-owner { font-size:12px; color:rgba(255,255,255,.72); text-shadow:0 1px 2px rgba(0,0,0,.85); }


/* index page card grid (style.css .page-grid / .page-card-*) */
.page-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }

.page-card { position:relative; display:flex; flex-direction:column; text-decoration:none; color:#e6edf3; padding:0; overflow:hidden; background:#161b22; border:1px solid #30363d; border-radius:6px; transition:border-color .2s, box-shadow .2s; }

.page-card:hover { border-color:rgba(0,184,176,.3); box-shadow:0 4px 12px rgba(0,0,0,.2); }

.page-card-hero { aspect-ratio:16/10; background:#1c2128; display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:1px solid #30363d; position:relative; }

.page-card-hero-placeholder { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }

.page-card-body { padding:16px; display:flex; flex-direction:column; gap:6px; flex:1; }

.page-card-top { position:absolute; top:8px; right:10px; z-index:2; display:flex; align-items:center; gap:8px; }

.page-card-title { font-size:15px; font-weight:600; line-height:1.3; margin:0; }

.page-card-brief { color:#8b949e; font-size:13px; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.page-card-meta { font-size:12px; color:#484f58; display:flex; align-items:center; gap:4px; margin-top:auto; }

.page-card-stars { display:inline-flex; align-items:center; gap:3px; }

.page-card-tags { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }

.chip-sm { display:inline-block; padding:1px 8px; font-size:11px; background:rgba(0,184,176,.15); color:#00b8b0; border-radius:12px; border:1px solid rgba(0,184,176,.3); line-height:1.5; }

.page-card-install { margin-top:8px; padding:6px 8px; background:#0d1117; border:1px solid #30363d; border-radius:6px; font-family:'JetBrains Mono',monospace; font-size:11px; color:#8b949e; display:flex; align-items:center; gap:8px; }

.page-card-install code { background:transparent; color:#8b949e; flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

.dot-sep { color:#484f58; }


/* adom-desktop right bar (proposed v2 overlay style) */
.deskmock { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:10px; }

.deskhead { font-family:'Familjen Grotesk'; font-weight:500; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-2); }


/* Other owners never get the Adom mark, and there is NO placeholder: the
   logo slot renders nothing in preview and export alike. Non-adom owners
   bring their own palette via the Owner brand controls; the placement grid
   is the consistency we keep, not the colors. */
.wordmark.noadom { visibility:hidden; } /* the slot is RESERVED: the title anchor holds with or without a logo */

/* full-import wordmark stamp (#37): the ONE standard logo (same size and
   position as every composed hero: 7.8cqw at the --inset corner) baked over
   an import, so builders stop drawing their own at improvised sizes */
.fi-logo {
  position:absolute; left:var(--inset); top:var(--inset); z-index:4; display:none;
  width:7.8cqw; height:1.72cqw; background:#e6edf3;
  -webkit-mask:url('adom-logo.svg') no-repeat left center / contain;
          mask:url('adom-logo.svg') no-repeat left center / contain;
}

.hero.fullimport.stamp-logo .fi-logo { display:block; }


/* The page owner's brand guide, applied to the whole hero (adom/wiki brand
   guides). Every value falls back to the studio's Adom defaults, so a page
   with no usable guide renders exactly as before; a page WITH one wears its
   owner's colors, type and logo end to end. */
#hero.branded { background: var(--brand-bg, #0d1117) !important; }

/* The theme layer paints OVER the hero's own background, so a branded hero
   sets its ground there too: the owner's background, with a soft wash of
   their primary for depth instead of Adom's teal and purple glows. */
#hero.branded .bg {
  background:
    radial-gradient(1200px 800px at 88% -10%, color-mix(in srgb, var(--brand-primary, #00b8b1) 18%, transparent), transparent 60%),
    radial-gradient(900px 700px at -5% 110%, color-mix(in srgb, var(--brand-accent, #8c6bf7) 14%, transparent), transparent 55%),
    var(--brand-bg, #0d1117);
}
#hero.branded .bg::after { opacity:.35; }

#hero.branded .h-title { font-family: var(--brand-display, 'Familjen Grotesk'); color: var(--brand-text, #e6edf3); }
#hero.branded .h-sub    { font-family: var(--brand-body, 'Satoshi'); color: var(--brand-text, #e8eef4); }
#hero.branded .h-desc   { font-family: var(--brand-body, 'Satoshi'); color: var(--brand-text-2, #8b949e); }
#hero.branded .h-sub b  { color: var(--brand-text, #e6edf3); }

#hero.branded .bar { background: linear-gradient(180deg,
  color-mix(in srgb, var(--brand-primary, var(--brand-accent, #00e6dc)) 55%, transparent),
  color-mix(in srgb, var(--brand-primary, var(--brand-accent, #00b8b0)) 12%, transparent)); }

#hero.branded .h-sub .accent { background: var(--brand-grad, linear-gradient(90deg,
  var(--brand-primary, #00e6dc),
  color-mix(in srgb, var(--brand-primary, #00e6dc) 45%, #fff)));
  -webkit-background-clip:text; background-clip:text; color:transparent; }

/* the owner's own logo replaces the Adom wordmark, at the same anchor and
   height so the title's ink edge does not move */
/* The owner's own logo replaces the Adom wordmark. The slot's height grows
   with it (the container clips at the Adom wordmark's 1.72cqw otherwise), and
   the title's ink edge still starts at the same anchor below it. */
/* An owner's own logo takes the wordmark slot at the SAME height the Adom
   wordmark uses (#37: one standard size on every hero). The box is left-
   aligned and `contain`, so the logo's own aspect sets how wide it actually
   draws and nothing is stretched: Adom's 4.55:1 wordmark lands at exactly
   the standard 7.8cqw, and a square mark simply draws narrower. A fixed
   width here instead drew every owner's logo at double the standard. */
#hero.branded .wordmark .wmark.owner-logo {
  background: var(--owner-logo) no-repeat left center / contain;
  -webkit-mask: none; mask: none;
  width: 16cqw; height: 1.72cqw; max-width: 16cqw;
}
/* The type pill (APP / SKILL / COMPONENT) is a REGISTRY convention, not the
   page owner's decoration: it tells a reader what kind of page this is, and
   it must read the same on every hero regardless of owner. So it keeps the
   Adom standard even on a branded hero, deliberately. */

/* ---- every background theme in the OWNER's colors ----------------------
   The themes above are Adom's: their grounds, washes and motif strokes are
   Adom hexes, including inside the inline SVGs. On a page whose owner has a
   brand guide that is the same leak the guide exists to stop, just one layer
   further down (it is what the human sees in the Background step's
   thumbnails). So when a guide resolves, every theme is re-derived from it.

   Each theme keeps its own IDENTITY: its ground VALUE (how dark), its wash
   geometry and its motif shapes are untouched. Only the hues change, mixed
   out of the guide's own colors. The motifs are repainted by masking the same
   --motif SVG and filling with a brand color, so nothing has to be generated
   per owner and the geometry can never drift from the unbranded version. */

#hero.branded[data-theme=midnight] .bg {
  background:
    radial-gradient(1200px 800px at 88% -10%, color-mix(in srgb, var(--brand-primary) 22%, transparent), transparent 60%),
    radial-gradient(900px 700px at -5% 110%, color-mix(in srgb, var(--brand-accent) 18%, transparent), transparent 55%),
    linear-gradient(var(--ga),
      color-mix(in srgb, var(--brand-bg) 88%, black) 0%,
      var(--brand-bg) 45%,
      color-mix(in srgb, var(--brand-bg) 82%, var(--brand-primary)) 100%);
}

#hero.branded[data-theme=pcb] .bg {
  background:
    radial-gradient(1100px 760px at 85% -8%, color-mix(in srgb, var(--brand-primary) 16%, transparent), transparent 60%),
    linear-gradient(var(--ga),
      color-mix(in srgb, var(--brand-bg) 86%, var(--brand-primary)) 0%,
      color-mix(in srgb, var(--brand-bg) 70%, var(--brand-primary)) 55%,
      color-mix(in srgb, var(--brand-bg) 88%, var(--brand-primary)) 100%);
}

#hero.branded[data-theme=onion] .bg {
  background:
    radial-gradient(900px 700px at -5% 112%, color-mix(in srgb, var(--brand-accent) 16%, transparent), transparent 55%),
    linear-gradient(var(--ga),
      color-mix(in srgb, var(--brand-bg) 88%, var(--brand-accent)) 0%,
      color-mix(in srgb, var(--brand-bg) 74%, var(--brand-accent)) 55%,
      color-mix(in srgb, var(--brand-bg) 90%, var(--brand-accent)) 100%);
}

#hero.branded[data-theme=pill] .bg {
  background:
    radial-gradient(1000px 720px at 90% -8%, color-mix(in srgb, var(--brand-primary) 14%, transparent), transparent 60%),
    linear-gradient(var(--ga),
      color-mix(in srgb, var(--brand-bg) 86%, var(--brand-primary)) 0%,
      color-mix(in srgb, var(--brand-bg) 72%, var(--brand-accent)) 55%,
      color-mix(in srgb, var(--brand-bg) 88%, var(--brand-primary)) 100%);
}

#hero.branded[data-theme=grid] .bg {
  background:
    radial-gradient(1000px 700px at 85% -10%, color-mix(in srgb, var(--brand-primary) 12%, transparent), transparent 60%),
    linear-gradient(var(--ga),
      color-mix(in srgb, var(--brand-bg) 84%, var(--brand-primary)) 0%,
      color-mix(in srgb, var(--brand-bg) 72%, var(--brand-primary)) 55%,
      color-mix(in srgb, var(--brand-bg) 88%, var(--brand-primary)) 100%);
}

/* the bold gradient IS the guide's gradient when it names one */
#hero.branded[data-theme=gradient] .bg {
  background:
    linear-gradient(155deg,
      color-mix(in srgb, var(--brand-bg) 58%, transparent),
      color-mix(in srgb, var(--brand-bg) 18%, transparent) 55%,
      color-mix(in srgb, var(--brand-bg) 64%, transparent)),
    var(--brand-grad, linear-gradient(var(--ga), var(--brand-primary) 0%, var(--brand-accent) 100%));
}

#hero.branded[data-theme=aurora] {
  background:
    radial-gradient(90cqw 60cqw at 12% -10%, color-mix(in srgb, var(--brand-primary) 28%, transparent), transparent 60%),
    radial-gradient(70cqw 55cqw at 95% 20%, color-mix(in srgb, var(--brand-accent) 22%, transparent), transparent 65%),
    radial-gradient(80cqw 70cqw at 55% 115%, color-mix(in srgb, var(--brand-primary) 20%, transparent), transparent 60%),
    var(--brand-bg);
}

#hero.branded[data-theme=mesh] {
  background:
    conic-gradient(from var(--ga) at 28% 30%, color-mix(in srgb, var(--brand-primary) 16%, transparent), transparent 32%),
    conic-gradient(from calc(var(--ga) + 120deg) at 75% 65%, color-mix(in srgb, var(--brand-accent) 13%, transparent), transparent 36%),
    conic-gradient(from calc(var(--ga) + 240deg) at 45% 90%, color-mix(in srgb, var(--brand-primary) 12%, transparent), transparent 30%),
    var(--brand-bg);
}

#hero.branded[data-theme=circuitry] { background: var(--brand-bg); }

/* Motifs: same geometry, brand ink. The SVG becomes a mask and a brand color
   is painted through it, so an owner never needs a generated copy. */
#hero.branded[data-theme=pcb] .bg::after,
#hero.branded[data-theme=onion] .bg::after,
#hero.branded[data-theme=pill] .bg::after {
  background-image: none;
  -webkit-mask-image: var(--motif);
          mask-image: var(--motif);
  -webkit-mask-repeat: inherit; mask-repeat: inherit;
  -webkit-mask-size: inherit;   mask-size: inherit;
  -webkit-mask-position: inherit; mask-position: inherit;
}
#hero.branded[data-theme=pcb] .bg::after  { background-color: var(--brand-primary); opacity:.22; }
#hero.branded[data-theme=pill] .bg::after { background-color: var(--brand-accent);  opacity:.30; }
/* the onion arcs carry a gradient stroke in Adom's version, so the guide's
   own gradient is the honest counterpart */
#hero.branded[data-theme=onion] .bg::after {
  background: var(--brand-grad, linear-gradient(var(--ga), var(--brand-primary), var(--brand-accent)));
  opacity:.55;
}

/* new background families so heroes stop looking identical */
.hero[data-theme=aurora] {
  background:
    radial-gradient(90cqw 60cqw at 12% -10%, rgba(0,184,177,.28), transparent 60%),
    radial-gradient(70cqw 55cqw at 95% 20%, rgba(88,101,242,.22), transparent 65%),
    radial-gradient(80cqw 70cqw at 55% 115%, rgba(140,107,247,.20), transparent 60%),
    #0a0f16;
}

.hero[data-theme=mesh] {
  background:
    conic-gradient(from var(--ga) at 28% 30%, rgba(0,184,177,.16), transparent 32%),
    conic-gradient(from calc(var(--ga) + 120deg) at 75% 65%, rgba(88,166,255,.13), transparent 36%),
    conic-gradient(from calc(var(--ga) + 240deg) at 45% 90%, rgba(140,107,247,.12), transparent 30%),
    #0b1016;
}

.hero[data-theme=circuitry] { background:#080d13; }

#circuitcanvas { display:none; position:absolute; inset:0; width:100%; height:100%; z-index:0; }

.hero[data-theme=circuitry] #circuitcanvas { display:block; }

/* A separate transparent composition layer; no baked text or showcase. */
.trace-art { display:none; position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.hero[data-theme=circuit-field] .trace-art, .hero[data-theme=circuit-tile] .trace-art { display:block; }
.hero.fullimport .trace-art { display:none; }
.hero[data-theme=circuit-field] .bg, .hero[data-theme=circuit-tile] .bg,
#hero.branded[data-theme=circuit-field] .bg, #hero.branded[data-theme=circuit-tile] .bg {
  background:var(--brand-bg, #0d1117);
}

.hero.no-chrome .window .titlebar { display:none; }

/* bare (#34.1): the import IS the artwork; no frame, no bg, no shadow, alpha kept */
.hero.bare-chrome .window .titlebar { display:none; }

.hero.bare-chrome .window { background:transparent; border:none; box-shadow:none; border-radius:0; }

/* simulated-overlay fence (#32.3): overlays re-enabled OVER a full import are
   sims of elements the import may already carry; amber marks them as such */
.sim-fenced { outline:2px dashed #d29922; outline-offset:3px; }

/* the fence is studio chrome: it must never bake into the exported PNG */
body[data-render] .sim-fenced { outline:none !important; }

/* the review-tour spotlight is studio chrome too: never in the PNG */
body[data-render] .tour-glow { outline:none !important; box-shadow:none !important; }


/* render mode: ?render=1 strips all chrome for the server-side PNG shot */
body[data-render] header, body[data-render] #panel, body[data-render] #contexts,
body[data-render] #toasts, body[data-render] .guide, body[data-render] #verifybar,
body[data-render] #approvedbar,
body[data-render] #tourpop { display:none !important; }

/* Per Colby (2026-07-23): the image carries the title, the type pill (top
   right), and the full slug (bottom right); the pill and slug BAKE into the
   PNG. The page shows the image bare. Only the homepage marquee overlays
   dynamic info (stats, author), and it brings its own, so the lower band
   sim never exports. */
body[data-render] .hero .lower { display:none !important; }

body[data-render] #mqoverlay { display:none !important; }

/* The dashed YOUR LOGO box is a posing placeholder, not content. No logo
   posed = nothing exported, not a placeholder. */
body[data-render] .wordmark.noadom { display:none !important; }

body[data-render] main, body[data-render] #stage { display:block; padding:0; overflow:hidden; }

body[data-render] #hero { width:1600px; max-width:none; aspect-ratio:auto; height:1000px; border-radius:0; border:none; box-shadow:none; }