/* Bridge Labs: the frame around every lab (bar, home page, lab plate, share panel, footer).
   Colors come from the Bridge HQ palette. Everything here uses the bl- prefix and never styles
   bare elements such as h1 or p, which belong to the labs themselves. Labs is dark by design. */

:root{
  color-scheme:dark;
  --bl-ink:#141720;
  --bl-deep:#11141b;
  --bl-panel:#1b1f2a;
  --bl-panel-2:#222633;
  --bl-text:#f4f1ea;
  --bl-text-2:#c7c4bd;
  --bl-muted:#9295a0;
  --bl-gold:#ffac2d;
  --bl-gold-2:#ffc062;
  --bl-on-gold:#141720;
  --bl-orange:#f47a1f;
  --bl-line:rgba(255,172,45,.18);
  --bl-line-2:rgba(255,172,45,.34);
  --bl-hair:rgba(244,241,234,.09);
  --bl-grid:rgba(255,172,45,.045);
  --bl-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 18px 40px -24px rgba(0,0,0,.8);
  --bl-display:"Poppins","Vazirmatn",system-ui,-apple-system,"Segoe UI",sans-serif;
  --bl-font:"Geist","Vazirmatn",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bl-font-fa:"Vazirmatn",Tahoma,system-ui,-apple-system,"Segoe UI",sans-serif;
  --bl-font-zh:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --bl-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --bl-max:1200px;
  --bl-gutter:28px;
  --bl-r:10px;
  --bl-ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:560px){:root{--bl-gutter:16px}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bl-ink)}
body{
  margin:0;
  min-height:100vh;
  background-color:var(--bl-ink);
  background-image:
    radial-gradient(1200px 520px at 78% -8%,rgba(255,172,45,.10),transparent 60%),
    linear-gradient(var(--bl-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--bl-grid) 1px,transparent 1px);
  background-size:auto,32px 32px,32px 32px;
  background-position:0 0,-1px -1px,-1px -1px;
  color:var(--bl-text);
  font-family:var(--bl-font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
html[lang="fa"] body,html[lang="ar"] body{font-family:var(--bl-font-fa);line-height:1.85}
html[lang="zh-Hans"]{--bl-display:"Poppins",var(--bl-font-zh);--bl-font:"Geist",var(--bl-font-zh)}
html[lang="zh-Hans"] body{line-height:1.75}
html[lang="zh-Hans"] .bl-label{font-family:var(--bl-font);letter-spacing:.04em}
html[lang="zh-Hans"] :is(.bl-feature-title,.bl-card-title,.bl-about-title,.bl-share-title,.bl-404-title,.bl-tag){letter-spacing:0}
::selection{background:rgba(255,172,45,.32);color:var(--bl-text)}

.bl-wrap{width:100%;max-width:calc(var(--bl-max) + 2 * var(--bl-gutter));margin-inline:auto;padding-inline:var(--bl-gutter)}
.bl-ico{width:18px;height:18px;flex:none;display:block}
html[dir="rtl"] .bl-flip{transform:scaleX(-1)}
.bl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* skip link and focus */
.bl-skip{position:absolute;top:-120px;inset-inline-start:12px;z-index:50;padding:10px 16px;border-radius:8px;background:var(--bl-gold);color:var(--bl-on-gold);font-weight:600;text-decoration:none}
.bl-skip:focus{top:12px}
:where(.bl-top,.bl-bar,.bl-hero,.bl-section,.bl-about,.bl-plate,.bl-after,.bl-foot,.bl-404) :is(a,button,input,summary):focus-visible,.bl-skip:focus-visible{outline:2px solid var(--bl-gold);outline-offset:3px;border-radius:6px}
@supports selector(:has(*)){
  .bl-stretch:focus-visible{outline:none!important}
  .bl-feature:has(.bl-stretch:focus-visible),.bl-card:has(.bl-stretch:focus-visible){outline:2px solid var(--bl-gold);outline-offset:4px}
}

/* reading progress on lab pages */
.bl-progress{position:fixed;inset-inline:0;top:0;height:2px;z-index:40;pointer-events:none}
.bl-progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--bl-orange),var(--bl-gold));transform-origin:0 50%;transform:scaleX(0)}
html[dir="rtl"] .bl-progress i{transform-origin:100% 50%}

/* home: a compact top header holding the language selector (the scene draws its own brand) */
.bl-top-in{display:flex;min-height:60px;padding-block:8px}
/* top bar */
.bl-bar{position:relative;z-index:5;background:linear-gradient(rgba(17,20,27,.92),rgba(17,20,27,.72));border-bottom:1px solid var(--bl-hair)}
.bl-bar-in{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 16px;min-height:68px;padding-block:12px}
.bl-bar-in>.bl-brand,.bl-bar-in>.bl-nav{min-height:44px}
.bl-brand{display:inline-flex;align-items:center;gap:11px;color:var(--bl-text);text-decoration:none;white-space:nowrap}
.bl-mark{width:34px;height:34px;flex:none;display:block;border-radius:50%;box-shadow:0 0 0 1px rgba(255,172,45,.25)}
.bl-word{font-family:var(--bl-display);font-weight:600;font-size:19px;letter-spacing:-.02em;line-height:1;direction:ltr}
.bl-word b{font-weight:600;color:var(--bl-gold)}
.bl-nav{display:flex;align-items:center;gap:6px}
.bl-nav-link{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border-radius:999px;color:var(--bl-text-2);text-decoration:none;font-size:15px;font-weight:500}
.bl-nav-link:hover{color:var(--bl-text);background:rgba(244,241,234,.05)}
@media (max-width:560px){.bl-nav-link{display:none}.bl-word{font-size:17px}}

/* small uppercase labels (Persian drops the tracking and the uppercase: it would break joined letters) */
.bl-label{font-family:var(--bl-mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--bl-muted)}
html[lang="fa"] .bl-label,html[lang="ar"] .bl-label{font-family:var(--bl-font-fa);font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none}

/* home: hero */
.bl-hero{padding-top:clamp(44px,8vw,96px)}
.bl-hero-text{display:grid;gap:22px;justify-items:start}
.bl-kicker{margin:0;display:inline-flex;align-items:center;gap:12px;color:var(--bl-gold)}
.bl-live{position:relative;width:9px;height:9px;border-radius:50%;background:var(--bl-orange);flex:none}
.bl-live::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--bl-orange);opacity:0;animation:bl-ping 2.4s var(--bl-ease) infinite}
@keyframes bl-ping{0%{transform:scale(.4);opacity:.9}80%,100%{transform:scale(1.5);opacity:0}}
.bl-title{margin:0;padding-bottom:.06em;font-family:var(--bl-display);font-weight:700;font-size:clamp(58px,12.4vw,172px);line-height:.9;letter-spacing:-.05em;color:var(--bl-text);text-wrap:balance}
.bl-title b{font-weight:700;color:var(--bl-gold)}
.bl-dot{display:inline-block;width:.14em;height:.14em;margin-inline-start:.04em;border-radius:.02em;background:var(--bl-orange)}
.bl-lede{margin:0;max-width:36ch;font-size:clamp(19px,2.2vw,23px);line-height:1.5;color:var(--bl-text-2)}
html[lang="fa"] .bl-lede,html[lang="ar"] .bl-lede{max-width:40ch;line-height:1.9}
.bl-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:6px}
.bl-facts{margin:0;display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--bl-muted);font-size:14.5px}
.bl-facts span{display:inline-flex;align-items:center;gap:8px}
.bl-facts span::before{content:"";width:5px;height:5px;border-radius:1px;background:var(--bl-gold);opacity:.8}

/* home: the bridge stage */
.bl-stage{position:relative;height:clamp(230px,30vw,380px);margin-top:clamp(18px,4vw,40px);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.bl-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
.bl-stage.is-grabbing canvas{cursor:grabbing}
.bl-stage-fallback{position:absolute;inset:0;width:100%;height:100%}
.bl-stage-label{position:absolute;bottom:14px;color:var(--bl-gold);opacity:.75}
.bl-stage-label.is-start{inset-inline-start:var(--bl-gutter)}
.bl-stage-label.is-end{inset-inline-end:var(--bl-gutter)}
.bl-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px solid var(--bl-line);background:rgba(17,20,27,.8);color:var(--bl-text-2);font-size:13px;white-space:nowrap;transition:opacity .6s var(--bl-ease)}
.bl-hint .bl-ico{width:15px;height:15px;color:var(--bl-gold)}
.bl-stage.is-touched .bl-hint{opacity:0}
@media (max-width:560px){.bl-stage-label{display:none}}

/* section headers */
.bl-section{padding-block:clamp(40px,6vw,72px) 8px}
.bl-head{display:flex;align-items:center;gap:16px;margin:0 0 22px}
.bl-head::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--bl-line-2),transparent)}
html[dir="rtl"] .bl-head::after{background:linear-gradient(270deg,var(--bl-line-2),transparent)}

/* number tag */
.bl-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:6px;background:var(--bl-gold);color:var(--bl-on-gold);font-family:var(--bl-mono);font-size:12px;font-weight:500;letter-spacing:.08em;line-height:1.2}
html[lang="fa"] .bl-tag,html[lang="ar"] .bl-tag{font-family:var(--bl-font-fa);font-size:13px;font-weight:700;letter-spacing:0;padding:3px 10px}

/* buttons */
.bl-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:1px solid var(--bl-gold);border-radius:999px;background:var(--bl-gold);color:var(--bl-on-gold);font:inherit;font-size:15.5px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .2s,border-color .2s,transform .2s var(--bl-ease)}
.bl-btn:hover{background:var(--bl-gold-2);border-color:var(--bl-gold-2)}
.bl-btn:active{transform:translateY(1px)}
.bl-btn .bl-ico{transition:transform .25s var(--bl-ease)}
.bl-btn:hover .bl-ico.bl-go{transform:translateX(3px)}
html[dir="rtl"] .bl-btn:hover .bl-ico.bl-go{transform:scaleX(-1) translateX(3px)}
.bl-btn-ghost{background:transparent;color:var(--bl-text);border-color:var(--bl-line-2)}
.bl-btn-ghost:hover{background:rgba(255,172,45,.08);border-color:var(--bl-gold)}
.bl-btn-sm{min-height:40px;padding:0 16px;font-size:14.5px}
.bl-cta{pointer-events:none}

/* feature card (latest lab) */
.bl-feature{position:relative;display:grid;background:linear-gradient(180deg,rgba(255,172,45,.05),transparent 40%),var(--bl-panel);border:1px solid var(--bl-line);border-radius:18px;overflow:hidden;box-shadow:var(--bl-shadow);transition:border-color .25s,transform .25s var(--bl-ease)}
.bl-feature:hover{border-color:var(--bl-line-2);transform:translateY(-3px)}
.bl-feature-media{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--bl-deep)}
.bl-feature-media img,.bl-card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--bl-ease)}
.bl-feature:hover .bl-feature-media img,.bl-card:hover .bl-card-media img{transform:scale(1.035)}
.bl-feature-media .bl-tag,.bl-card-media .bl-tag{position:absolute;top:16px;inset-inline-start:16px;z-index:1}
.bl-corners::before,.bl-corners::after{content:"";position:absolute;width:22px;height:22px;z-index:1;pointer-events:none;border-color:var(--bl-gold);border-style:solid;opacity:.85}
.bl-corners::before{top:12px;inset-inline-end:12px;border-width:1.5px 1.5px 0 0}
.bl-corners::after{bottom:12px;inset-inline-start:12px;border-width:0 0 1.5px 1.5px}
html[dir="rtl"] .bl-corners::before{border-width:1.5px 0 0 1.5px}
html[dir="rtl"] .bl-corners::after{border-width:0 1.5px 1.5px 0}
.bl-feature-body{padding:clamp(22px,3.2vw,40px);display:flex;flex-direction:column;gap:16px;align-items:flex-start;min-width:0}
@media (min-width:900px){
  .bl-feature{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .bl-feature-media{aspect-ratio:auto;min-height:380px}
}
.bl-meta{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.bl-new{display:inline-flex;align-items:center;gap:8px;color:var(--bl-orange)}
.bl-new::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(244,122,31,.18)}
.bl-feature-title{margin:0;font-family:var(--bl-display);font-weight:600;font-size:clamp(30px,3.4vw,44px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
html[lang="fa"] .bl-feature-title,html[lang="ar"] .bl-feature-title{font-family:var(--bl-font-fa);font-weight:800;letter-spacing:0;line-height:1.45}
.bl-feature-title a,.bl-card-title a{color:inherit;text-decoration:none}
.bl-stretch::after{content:"";position:absolute;inset:0;z-index:2}
.bl-feature-text{margin:0;color:var(--bl-text-2);font-size:17px;max-width:46ch}
.bl-topics{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.bl-topics li{padding:5px 11px;border-radius:999px;border:1px solid var(--bl-hair);background:rgba(244,241,234,.04);color:var(--bl-text-2);font-size:13px;line-height:1.3}
.bl-feature-foot{margin-top:auto;padding-top:6px;width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.bl-mins{display:inline-flex;align-items:center;gap:8px;color:var(--bl-muted);font-size:14.5px}
.bl-mins .bl-ico{width:16px;height:16px;color:var(--bl-gold)}
.bl-feature:hover .bl-cta{background:var(--bl-gold-2);border-color:var(--bl-gold-2)}
.bl-feature:hover .bl-cta .bl-go{transform:translateX(3px)}
html[dir="rtl"] .bl-feature:hover .bl-cta .bl-go{transform:scaleX(-1) translateX(3px)}

/* grid of labs */
.bl-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.bl-card{position:relative;display:flex;flex-direction:column;background:var(--bl-panel);border:1px solid var(--bl-hair);border-radius:14px;overflow:hidden;transition:border-color .25s,transform .25s var(--bl-ease)}
.bl-card:hover{border-color:var(--bl-line-2);transform:translateY(-3px)}
.bl-card-media{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--bl-deep)}
.bl-card-body{flex:1;display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px}
.bl-card-title{margin:0;font-family:var(--bl-display);font-size:21px;font-weight:600;line-height:1.25;letter-spacing:-.02em}
html[lang="fa"] .bl-card-title,html[lang="ar"] .bl-card-title{font-family:var(--bl-font-fa);font-weight:800;letter-spacing:0;line-height:1.5}
.bl-card-text{margin:0;color:var(--bl-text-2);font-size:15px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bl-card-foot{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--bl-hair)}

/* topic filter and paging (appear once there are enough labs) */
.bl-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 20px}
.bl-chip{min-height:36px;padding:0 15px;border:1px solid var(--bl-hair);border-radius:999px;background:rgba(244,241,234,.03);color:var(--bl-text-2);font:inherit;font-size:14px;cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.bl-chip:hover{border-color:var(--bl-line-2);color:var(--bl-text)}
.bl-chip[aria-pressed="true"]{background:var(--bl-gold);border-color:var(--bl-gold);color:var(--bl-on-gold);font-weight:600}
.bl-more{display:flex;justify-content:center;margin-top:26px}

/* home: about */
.bl-about{padding-block:clamp(56px,8vw,96px) clamp(56px,8vw,88px);display:grid;gap:30px}
@media (min-width:900px){.bl-about{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:start}}
.bl-about-title{margin:10px 0 14px;font-family:var(--bl-display);font-size:clamp(28px,3.4vw,40px);font-weight:600;line-height:1.12;letter-spacing:-.03em;text-wrap:balance}
html[lang="fa"] .bl-about-title,html[lang="ar"] .bl-about-title{font-family:var(--bl-font-fa);font-weight:800;letter-spacing:0;line-height:1.5}
.bl-about-text{margin:0;max-width:48ch;color:var(--bl-text-2);font-size:17px}
.bl-principles{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bl-principles li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 16px;align-items:start;padding:18px 20px;background:var(--bl-panel);border:1px solid var(--bl-hair);border-radius:14px}
.bl-principles .bl-pico{grid-row:span 2;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,172,45,.1);color:var(--bl-gold)}
.bl-principles .bl-pico .bl-ico{width:21px;height:21px}
.bl-principles strong{font-size:16.5px;font-weight:600}
.bl-principles span{color:var(--bl-text-2);font-size:15px}

/* lab page: plate above the exhibit */
.bl-plate{background:var(--bl-deep);border-block:1px solid var(--bl-hair)}
.bl-plate-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;min-height:54px;padding-block:10px}
.bl-crumb{display:inline-flex;align-items:center;gap:10px;color:var(--bl-text-2);text-decoration:none}
.bl-crumb:hover{color:var(--bl-gold)}
.bl-crumb .bl-ico{width:15px;height:15px}
.bl-plate-item{display:inline-flex;align-items:center;gap:8px}
.bl-plate-item .bl-ico{width:15px;height:15px;color:var(--bl-gold)}
.bl-plate-sep{width:1px;height:18px;background:var(--bl-hair)}
@media (max-width:560px){.bl-plate-sep{display:none}}

/* lab page: the exhibit (the lab's own styles take over inside) */
.bl-exhibit:focus{outline:none}

/* lab page: after the exhibit */
.bl-after{padding-block:clamp(20px,3vw,36px) clamp(48px,7vw,80px)}
.bl-share{position:relative;display:grid;gap:18px;padding:clamp(24px,3.4vw,40px);background:radial-gradient(600px 240px at 90% 0%,rgba(255,172,45,.12),transparent 70%),var(--bl-panel);border:1px solid var(--bl-line);border-radius:18px;overflow:hidden}
@media (min-width:900px){.bl-share{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.bl-share-title{margin:0 0 6px;font-family:var(--bl-display);font-size:clamp(26px,3vw,36px);font-weight:600;line-height:1.15;letter-spacing:-.03em;text-wrap:balance}
html[lang="fa"] .bl-share-title,html[lang="ar"] .bl-share-title{font-family:var(--bl-font-fa);font-weight:800;letter-spacing:0;line-height:1.5}
.bl-share-text{margin:0;color:var(--bl-text-2);max-width:46ch}
.bl-share-actions{display:grid;gap:12px;justify-items:start}
@media (min-width:900px){.bl-share-actions{justify-items:end}}
.bl-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.bl-social{display:flex;flex-wrap:wrap;gap:8px}
.bl-social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--bl-hair);color:var(--bl-text-2);transition:border-color .2s,color .2s,background-color .2s}
.bl-social a:hover{border-color:var(--bl-gold);color:var(--bl-gold);background:rgba(255,172,45,.06)}
.bl-social .bl-ico{width:18px;height:18px}
.bl-status{margin:0;min-height:1.5em;font-size:14px;font-weight:600;color:var(--bl-gold)}
.bl-copy{width:min(100%,440px);padding:11px 14px;border:1px solid var(--bl-line);border-radius:10px;background:var(--bl-deep);color:var(--bl-text);font:inherit;font-size:14px;direction:ltr}
.bl-related{margin-top:clamp(40px,6vw,64px)}
.bl-soon{margin:28px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;color:var(--bl-muted);font-size:14.5px}
.bl-soon a{color:var(--bl-gold);text-decoration:none;border-bottom:1px solid var(--bl-line-2)}
.bl-soon a:hover{border-color:var(--bl-gold)}

/* 404 */
.bl-404{min-height:62vh;padding-block:clamp(48px,10vw,110px);display:grid;gap:20px;align-content:start;justify-items:start}
.bl-404-art{width:min(100%,560px);height:auto;color:var(--bl-gold)}
.bl-404-title{margin:0;font-family:var(--bl-display);font-size:clamp(34px,6vw,60px);font-weight:700;line-height:1.05;letter-spacing:-.04em}
html[lang="fa"] .bl-404-title,html[lang="ar"] .bl-404-title{font-family:var(--bl-font-fa);font-weight:800;letter-spacing:0;line-height:1.4}
.bl-404-text{margin:0;max-width:44ch;color:var(--bl-text-2);font-size:18px}

/* footer */
/* the language selector, in the top header of every page (a native details menu). It takes the free width of
   the header row, with its button at the end; the chips open below it in the page flow. Where the row is too
   narrow it wraps to a full-width row of its own. */
.bl-langs{flex:1 1 220px;min-width:0;text-align:end}
.bl-langs-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--bl-line-2);border-radius:999px;color:var(--bl-text);font-size:15px;font-weight:500;line-height:1;cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none;transition:border-color .2s,background-color .2s}
.bl-langs-btn::-webkit-details-marker{display:none}
.bl-langs-btn::marker{content:""}
.bl-langs-btn:hover,.bl-langs[open] .bl-langs-btn{border-color:var(--bl-gold);background:rgba(255,172,45,.06)}
.bl-langs-btn .bl-ico{width:17px;height:17px;color:var(--bl-gold)}
.bl-langs-chev{transition:transform .2s}
.bl-langs[open] .bl-langs-chev{transform:rotate(180deg)}
.bl-langs-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.bl-langs-list a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--bl-line);border-radius:999px;color:var(--bl-text-2);text-decoration:none;font-size:15px;line-height:1}
.bl-langs-list a:hover{border-color:var(--bl-gold);color:var(--bl-text)}
.bl-langs-list a[aria-current]{border-color:var(--bl-gold);color:var(--bl-text);background:rgba(255,172,45,.08)}
.bl-langs-check{width:15px;height:15px;color:var(--bl-gold)}
.bl-langs :lang(fa),.bl-langs :lang(ar){font-family:var(--bl-font-fa)}
.bl-langs :lang(en),.bl-langs :lang(tr){font-family:"Geist",system-ui,sans-serif}
.bl-langs :lang(zh-Hans){font-family:var(--bl-font-zh)}
@media (prefers-reduced-motion: reduce){.bl-langs-btn,.bl-langs-chev{transition:none}}
.bl-foot{background:var(--bl-deep);border-top:1px solid var(--bl-hair);padding-block:36px 44px;color:var(--bl-muted);font-size:14px}
.bl-foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;padding-bottom:22px;margin-bottom:18px;border-bottom:1px solid var(--bl-hair)}
.bl-foot-brand{display:grid;gap:6px}
.bl-foot-brand .bl-mark{width:30px;height:30px}
.bl-foot-brand .bl-word{font-size:17px}
.bl-foot-tag{margin:0;color:var(--bl-muted);font-size:14px}
.bl-foot-nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.bl-foot-nav a{color:var(--bl-text-2);text-decoration:none}
.bl-foot-nav a:hover{color:var(--bl-gold)}
.bl-legal{margin:0 0 4px;max-width:90ch;font-size:13px;line-height:1.7}
.bl-legal a{color:inherit}

@media (prefers-reduced-motion: reduce){
  .bl-live::after{animation:none}
  .bl-feature,.bl-card,.bl-btn,.bl-lang,.bl-feature-media img,.bl-card-media img,.bl-hint{transition:none}
  .bl-feature:hover,.bl-card:hover{transform:none}
  .bl-feature:hover .bl-feature-media img,.bl-card:hover .bl-card-media img{transform:none}
}

/* home: the approved scene (drawn by labs.js; source-originals/advisory-sketch-fragment.html).
   The stage and bar keep the sample's own inline styles; these rules are the host page around it. */
.bl-sketch{max-width:704px;margin:24px auto 0;padding:0 12px}
/* larger screens (class set by labs.js once the scene runs): the section grows smoothly from 704 px at 1024 px
   wide to 1384 px, and labs.js shows the 680 px scene and its controls at one uniform scale inside it (at most 2x) */
.bl-sketch.bl-sk-fluid{max-width:clamp(704px,calc(75vw - 64px),1384px)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bl-sketch :is(a,button,input):focus-visible{outline:2px solid var(--bl-gold);outline-offset:2px}
.bl-sk-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--bl-line-2);border-radius:8px;background:transparent;color:var(--bl-text);font:inherit;font-size:14px;line-height:1.4;text-decoration:none;cursor:pointer}
.bl-sk-btn:hover{border-color:var(--bl-gold)}
.bl-sk-btn .ti{display:inline-block;width:16px;height:16px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ti-volume{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 8a5 5 0 0 1 0 8'/%3E%3Cpath d='M17.7 5a9 9 0 0 1 0 14'/%3E%3Cpath d='M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a.8 .8 0 0 1 1.5 .5v14a.8 .8 0 0 1 -1.5 .5l-3.5 -4.5'/%3E%3C/svg%3E")}
.ti-volume-off{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 8a5 5 0 0 1 1.912 4.934m-1.377 2.602a5 5 0 0 1 -.535 .464'/%3E%3Cpath d='M17.7 5a9 9 0 0 1 2.362 11.086m-1.676 2.299a9 9 0 0 1 -.686 .615'/%3E%3Cpath d='M9.069 5.054l.431 -.554a.8 .8 0 0 1 1.5 .5v2m0 4v8a.8 .8 0 0 1 -1.5 .5l-3.5 -4.5h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l1.294 -1.664'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E")}
.ti-refresh{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4'/%3E%3Cpath d='M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4'/%3E%3C/svg%3E")}
/* with scripts: the canvas is the picture; the HTML stays for screen readers and the card link sits over the drawn card */
html:not(.bl-js) #bl-cv{display:none!important}
.bl-js .bl-sk-flat>:not(.bl-sk-card){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bl-js .bl-sk-card{position:absolute;left:24px;top:394px;z-index:1;display:block;overflow:hidden;color:transparent;background:transparent;border:0;text-decoration:none}
.bl-js .bl-sk-card *{color:transparent}
/* without scripts: a still version of the same scene */
html:not(.bl-js) .bl-sk-flat{display:grid;justify-items:center;gap:14px;padding:44px 20px 28px;text-align:center}
.bl-sk-title{margin:0;font-family:"Poppins",sans-serif;font-size:46px;font-weight:700;line-height:1;letter-spacing:0;color:#f4f1ea}
.bl-sk-title b{color:#ffac2d;font-weight:700}
.bl-sk-dot{display:inline-block;width:.19em;height:.19em;margin-left:.06em;border-radius:50%;background:#f47a1f}
.bl-sk-lede{margin:0;color:#c7c4bd;font-size:17px}
.bl-sk-still{width:100%;height:auto}
.bl-sk-words{margin:-8px 0 0;width:100%;display:flex;justify-content:space-between;color:#c7c4bd;font-family:"Poppins",sans-serif;font-size:15px}
html:not(.bl-js) .bl-sk-card{display:grid;gap:8px;width:100%;padding:20px;background:#1b1f2a;color:#f4f1ea;text-align:start;text-decoration:none;border:2px solid transparent;border-image:linear-gradient(#ffac2d,#ffac2d) 1}
.bl-sk-meta{color:rgba(255,172,45,.85);font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:1.2px}
html[lang="fa"] .bl-sk-meta,html[lang="ar"] .bl-sk-meta{font-family:"Vazirmatn",sans-serif;letter-spacing:0}
.bl-sk-meta em{font-style:normal;color:#f47a1f}
.bl-sk-ctitle{font-family:"Poppins","Vazirmatn",sans-serif;font-size:20px;font-weight:600}
.bl-sk-tag{color:#c7c4bd;font-size:14px}
.bl-sk-next{margin:0;width:100%;padding:12px;border:1px dashed rgba(255,172,45,.3);color:#9295a0;font-family:"Geist Mono","Vazirmatn",monospace;font-size:11px;letter-spacing:1.2px}
/* without scripts, the scene's words in Arabic and Chinese use their script's fonts (the title stays in Latin) */
html[lang="ar"] :is(.bl-sk-words,.bl-sk-ctitle,.bl-sk-next){font-family:var(--bl-font-fa);letter-spacing:0}
html[lang="zh-Hans"] :is(.bl-sk-words,.bl-sk-ctitle,.bl-sk-next,.bl-sk-meta){font-family:"Geist",var(--bl-font-zh);letter-spacing:0}
/* the home page sits on the sample's plain ink, without the site grid and glow */
body.bl-home{background-image:none}