/* Circin marketing pages — shared styles */
@font-face{font-family:'Comfortaa';font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/comfortaa-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2212;}
@font-face{font-family:'Comfortaa';font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/comfortaa-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F;}
:root{--ink:#090A0A;--soft:#5B6668;--teal:#0E5A64;--teal-soft:#EAF3F4;--bg:#FCFCFA;--line:rgba(0,0,0,.08);--dark:#0B2226;}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:'Comfortaa',system-ui,-apple-system,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 24px;}

/* nav */
header.top{position:sticky;top:0;background:rgba(252,252,250,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);z-index:90;}
.nav{display:flex;align-items:center;gap:26px;height:62px;}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:18px;letter-spacing:3px;color:var(--teal);}
.brand img{height:28px;width:auto;}
.nav .links{display:flex;gap:22px;font-size:13.5px;font-weight:700;color:var(--soft);flex:1;justify-content:center;}
.nav .links a,.nav .cta-nav{white-space:nowrap;}
.nav .links a:hover{color:var(--teal);}
.btn{display:inline-block;font-weight:700;border-radius:999px;text-align:center;}
.btn-primary{background:var(--teal);color:#fff;padding:13px 28px;font-size:15px;box-shadow:0 6px 18px rgba(14,90,100,.22);}
.btn-primary:hover{background:#0C4E57;}
.btn-ghost{border:1.5px solid var(--line);background:#fff;color:var(--ink);padding:12px 26px;font-size:15px;}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal);}
.btn-sm{padding:9px 18px;font-size:13px;}
/* The nav items stay on screen at every width; a window that is not full screen
   used to lose them behind a ☰ button below 1140px. Six items and the two
   prelaunch pills fill 1140px at the sizes above, so from there to 901px they
   sit closer and a little smaller (about 890px wide on a page with both pills;
   launch.js shortens the launch pill to "Notify me" at 1000px and under). At
   900px and under, where the hero goes to one column too, they move to a strip
   under the logo row that scrolls sideways: #mm, which already holds every
   item, the way .mnav does on the generated routes. "Open the beta" shows in
   the strip only where its pill is hidden (640px and under). */
@media(max-width:1140px){.nav{gap:12px;}.nav .links{gap:14px;font-size:12.5px;}.nav .cta-nav.btn-ghost{padding:9px 14px;}}
.mobile-menu{display:none;}
@media(max-width:900px){.nav .links{display:none;}.nav .links+.cta-nav{margin-left:auto;}.mobile-menu{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding:10px 24px;font-size:13px;font-weight:700;color:var(--soft);border-bottom:1px solid var(--line);background:#fff;}.mobile-menu a{white-space:nowrap;}}
@media(min-width:641px){.mobile-menu a[href$="/demo/"]{display:none!important;}}
/* functions/c/[handle].js uses the generated routes' header (.appbtn pills and a
   .mnav strip) but loads only this stylesheet, so both need rules here too. */
.appbtn{font-size:13px;font-weight:700;background:var(--teal);color:#fff;padding:8px 16px;border-radius:999px;white-space:nowrap;}
.mnav{display:none;}
@media(max-width:900px){.nav .links+.appbtn{margin-left:auto;}.mnav{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding:10px 24px;font-size:13px;font-weight:700;color:var(--soft);border-bottom:1px solid var(--line);background:#fff;}.mnav a{white-space:nowrap;}}
@media(max-width:640px){.nav .appbtn[data-prelaunch-only]{display:none!important;}}

/* sections */
section{padding:84px 0;}
section.tight{padding:56px 0;}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--teal);margin-bottom:14px;}
h1{font-size:clamp(34px,5vw,58px);line-height:1.15;letter-spacing:-.5px;}
h2.sec{font-size:clamp(26px,3.4vw,40px);line-height:1.2;margin-bottom:14px;letter-spacing:-.3px;}
p.sub{color:var(--soft);font-size:17px;max-width:52ch;}
.center{text-align:center;}
.center p.sub{margin:0 auto;}
/* p.sub is max-width:52ch, so on its own it sits hard left and only its TEXT
   centres -- which looks like a bug every time. Centre the box too when the
   paragraph itself carries .center rather than sitting inside a .center. */
p.sub.center{margin-left:auto;margin-right:auto;}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:64px;padding-bottom:80px;}
.hero-copy p.sub{margin:20px 0 32px;}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.trust{margin-top:18px;font-size:13px;color:var(--soft);letter-spacing:1px;}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:40px;padding-bottom:56px;}.hero-phone{order:2;margin:0 auto;}}

/* phone frame */
.phone{width:300px;background:#101112;border-radius:46px;padding:10px;box-shadow:0 30px 70px rgba(11,34,38,.30);position:relative;}
.phone .screen{border-radius:36px;overflow:hidden;background:#0B2226;height:606px;position:relative;}
.phone .screen iframe{position:absolute;top:0;left:0;width:390px;height:844px;border:0;transform:scale(0.7179);transform-origin:top left;pointer-events:none;}
.float-card{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-size:12.5px;font-weight:700;box-shadow:0 10px 30px rgba(11,34,38,.14);}
@media(max-width:900px){.float-card{display:none;}}
/* The right-hand card hangs 46px past the phone's column, which only has that
   room once the window is wider than the 1240px page; narrower, it was cut off
   at the window's edge. It pulls in by what the margin lacks, down to sitting
   flush with the column (8px kept for a scrollbar). */
.float-card.fc-right{top:64px;right:calc(-1 * clamp(0px, (100vw - 1240px) / 2 + 16px, 46px));}
.float-card.fc-left{bottom:120px;left:-58px;}
/* The hero's decorative glow is inset:-60px, so it reached 36px past the right
   edge of the viewport and gave the whole home page a horizontal scrollbar --
   at every width, since long before this line was written. overflow-x:clip on
   the root stops the scroll without creating a scroll container, so anything
   position:sticky keeps working (overflow:hidden would break it). */
html{overflow-x:clip;}

/* about, for-users, safety, advertise and support carry TWO header CTAs -- the
   launch CTA plus an "Open the beta" ghost button. Below 640px the pair squeeze
   past the brand and each other and render as two overlapping circles. The
   second one moves into the mobile menu instead, the same way gen_site.py
   already handles .nav-beta on the generated routes. */
@media(max-width:640px){
  .nav .cta-nav.btn-ghost{display:none!important;}
}

/* ---- Mission-page "moments" -------------------------------------------
   The mission page is a manifesto, not a features page, so it is set much
   more openly than the rest of the site: a few statements get a whole screen
   to themselves and everything else breathes around them. */
.moment{padding:clamp(72px,11vw,132px) 0;text-align:center;}
.moment .q{font-size:clamp(15px,2vw,17px);font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--soft);margin:0 0 20px;}
.moment h2{font-size:clamp(30px,6vw,58px);line-height:1.1;letter-spacing:-1px;margin:0 auto;max-width:18ch;font-weight:700;color:var(--ink);}
.moment h2.long{max-width:26ch;font-size:clamp(26px,4.6vw,44px);}
.moment .after{margin:26px auto 0;font-size:clamp(16px,2.2vw,19px);line-height:1.6;color:var(--soft);max-width:44ch;}
.moment .strike{color:var(--soft);font-weight:700;font-size:clamp(19px,3vw,26px);text-decoration:line-through;text-decoration-thickness:2px;display:block;margin-bottom:16px;max-width:26ch;margin-left:auto;margin-right:auto;}
.moment.dark{background:var(--dark);}
.moment.dark h2{color:#fff;}
.moment.dark .q{color:rgba(255,255,255,.6);}
.moment.dark .after{color:rgba(255,255,255,.74);}
.moment.dark .strike{color:rgba(255,255,255,.45);}

/* The six-part mission, set as a list of promises rather than a card grid. */
.vows{max-width:760px;margin:44px auto 0;text-align:left;}
.vow{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:24px 0;border-top:1px solid var(--line);}
.vow:first-child{border-top:0;}
.vow h3{margin:0;font-size:clamp(21px,3.2vw,28px);font-weight:700;letter-spacing:-.4px;color:var(--teal);}
.vow p{margin:0;font-size:16px;line-height:1.65;color:var(--soft);}
.dark .vow{border-color:rgba(255,255,255,.14);}
.dark .vow h3{color:#5FC2CE;}
.dark .vow p{color:rgba(255,255,255,.74);}

/* Prose on the mission page runs wider and looser than elsewhere. */
.mprose p{font-size:17px;line-height:1.75;color:var(--soft);margin:0 0 14px;}
.mprose p:last-child{margin-bottom:0;}
.mprose p strong{color:var(--ink);}
.mprose .lead{font-size:19px;line-height:1.65;color:var(--ink);font-weight:600;}
.mprose h2{font-size:clamp(24px,3.4vw,32px);letter-spacing:-.5px;margin:0 0 18px;font-weight:700;color:var(--ink);}
.mprose .note-inline{margin-top:18px;padding:14px 16px;border-left:3px solid var(--teal);background:var(--teal-soft);border-radius:0 10px 10px 0;font-size:15px;line-height:1.6;color:var(--soft);}
.mprose .beat{margin:0 0 6px;font-size:17px;line-height:1.6;color:var(--soft);}
.mprose .beat:last-of-type{margin-bottom:0;}


/* The line the brand hangs on. Sits under the hero sub rather than in the
   eyebrow, because launch.js rewrites the eyebrow during prelaunch and the
   line would never have been seen before 21 November. */
.hero-line{margin:16px 0 0;font-size:16.5px;font-weight:700;line-height:1.5;color:var(--teal);max-width:34ch;}
@media(max-width:900px){.hero-line{margin-left:auto;margin-right:auto;}}

.hero-atmo{position:absolute;inset:-60px;background:radial-gradient(closest-side,rgba(95,194,206,.16),transparent 70%);z-index:-1;border-radius:50%;}
.hero-phone{position:relative;}
@media(max-width:640px){.hero-phone{overflow:hidden;}}

/* knowledge strip */
.strip{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;background:#fff;}
.strip-inner{display:flex;gap:38px;width:max-content;animation:marquee 36s linear infinite;font-size:14px;font-weight:700;color:var(--soft);white-space:nowrap;}
.strip-inner span::before{content:"·";margin-right:38px;color:var(--teal);}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.strip-inner{animation:none;}html{scroll-behavior:auto;}.reveal{opacity:1!important;transform:none!important;}}

/* demo section */
.demo{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center;}
@media(max-width:900px){.demo{grid-template-columns:1fr;justify-items:center;}}
.dscreen{border-radius:36px;overflow:hidden;height:610px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;color:#fff;transition:background .5s;}
.dscreen .dsub{font-size:11px;letter-spacing:2.5px;opacity:.65;text-transform:uppercase;}
.dscreen .dtitle{font-size:20px;font-weight:700;line-height:1.35;margin:8px 0 6px;}
.dscreen .dcre{font-size:13px;opacity:.85;}
.dscreen .rail{position:absolute;right:16px;bottom:100px;display:flex;flex-direction:column;gap:18px;text-align:center;font-size:11px;}
.dscreen .rail button{background:none;border:0;color:#fff;font-family:inherit;font-size:22px;cursor:pointer;line-height:1;}
.dscreen .rail span{display:block;font-size:10px;margin-top:3px;opacity:.85;}
.dlist{display:flex;flex-direction:column;gap:6px;max-width:520px;width:100%;}
.drow{display:flex;gap:18px;align-items:baseline;padding:16px 18px;border-radius:14px;cursor:pointer;border:1.5px solid transparent;}
.drow .n{font-size:13px;font-weight:700;color:var(--soft);min-width:26px;}
.drow .t{font-weight:700;font-size:16.5px;line-height:1.4;}
.drow .s{display:block;font-size:12.5px;color:var(--soft);font-weight:400;margin-top:2px;}
.drow.on{background:#fff;border-color:var(--line);box-shadow:0 6px 20px rgba(11,34,38,.06);}
.drow.on .n{color:var(--teal);}
.teach{background:var(--teal-soft);border:1px solid rgba(14,90,100,.18);color:var(--teal);border-radius:12px;padding:12px 16px;font-size:13.5px;display:none;margin-top:14px;max-width:520px;}
.teach a{font-weight:700;text-decoration:underline;}
.demo-end{margin-top:18px;font-weight:700;color:var(--teal);font-size:15px;}

/* subjects */
.subjects-viz{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:860px;margin:36px auto 0;}
.sj{font-size:14.5px;font-weight:700;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:10px 20px;cursor:pointer;font-family:inherit;transition:all .2s;}
.sj:hover{border-color:var(--teal);color:var(--teal);}
.sj.on{background:var(--teal);border-color:var(--teal);color:#fff;}
.subcats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin-top:22px;min-height:44px;}
.subcats a{display:inline-flex;align-items:center;line-height:1.2;font-size:13px;font-weight:700;color:var(--teal);background:var(--teal-soft);border-radius:999px;padding:8px 16px;opacity:0;transform:translateY(8px);transition:all .35s;}
.subcats a.in{opacity:1;transform:none;}

/* go deeper */
.deeper{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center;}
@media(max-width:900px){.deeper{grid-template-columns:1fr;justify-items:center;}}
.gd-panel{max-width:480px;width:100%;}
.gd-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:12px;}
.gd-card .k{font-size:11.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal);}
.gd-card .path{font-size:15.5px;font-weight:700;margin-top:6px;}
.gd-rel{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.gd-rel a{font-size:12.5px;font-weight:700;border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;transition:all .2s;}
.gd-rel a:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-soft);}

/* creators */
.cre-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:40px;}
.cre-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:12px;}
.cre-top{display:flex;gap:13px;align-items:center;}
.cav{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:17px;flex-shrink:0;}
.cre-name{font-weight:700;font-size:16px;}
.vb{display:inline-block;width:15px;height:15px;border-radius:50%;background:var(--teal);color:#fff;font-size:9px;line-height:15px;text-align:center;vertical-align:1px;margin-left:5px;}
.cre-role{font-size:12.5px;color:var(--soft);}
.cre-line{font-size:13.5px;color:var(--soft);line-height:1.55;}
.cre-thumbs{display:flex;gap:7px;}
.cre-thumbs a{flex:1;aspect-ratio:9/13;border-radius:10px;position:relative;overflow:hidden;display:block;transition:transform .25s;}
.cre-thumbs a:hover{transform:translateY(-3px);}
.cre-thumbs .tt{position:absolute;left:6px;right:6px;bottom:6px;font-size:9.5px;color:#fff;font-weight:700;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.55);}

/* library / community / sources visuals */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
@media(max-width:900px){.split{grid-template-columns:minmax(0,1fr);}}
.folder-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:420px;}
.folder{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;font-size:14px;font-weight:700;}
.folder .fc{display:block;font-size:11.5px;color:var(--soft);font-weight:400;margin-top:3px;}
.folder .fi{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;margin-bottom:10px;}
.convo{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;max-width:520px;}
.convo .vt{font-size:13px;color:var(--soft);border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px;}
.convo .vt strong{color:var(--ink);font-size:14.5px;}
.msg{margin-bottom:14px;font-size:14px;}
.msg .who{font-weight:700;font-size:12.5px;}
.msg.creator{background:var(--teal-soft);border-radius:12px;padding:12px 14px;}
.msg .q{color:var(--teal);font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;margin-right:6px;}
.src-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:10px;font-size:14px;max-width:480px;}
.src-card .sk{font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal);}
.src-card .sm{color:var(--soft);font-size:12.5px;}

/* dark creator section */
section.dark{background:var(--dark);color:#E8F1F2;}
section.dark h2.sec{color:#fff;}
section.dark p.sub{color:#9FBEC2;}
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:40px;}
.tool{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:20px;}
.tool .tk{font-size:11.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#5FC2CE;}
.tool .tv{font-size:22px;font-weight:700;margin:6px 0 2px;color:#fff;}
.tool .td{font-size:12.5px;color:#9FBEC2;line-height:1.5;}

/* showcase */
.showcase{display:flex;gap:26px;justify-content:center;align-items:flex-start;flex-wrap:wrap;margin-top:44px;}
.showcase .mini-phone{width:216px;background:#101112;border-radius:34px;padding:7px;box-shadow:0 18px 44px rgba(11,34,38,.22);}
.showcase .mini-screen{border-radius:27px;overflow:hidden;height:437px;position:relative;background:#F4F6F5;}
.showcase .mini-screen iframe{position:absolute;top:0;left:0;width:390px;height:844px;border:0;transform:scale(0.5179);transform-origin:top left;pointer-events:none;}
.showcase .lbl{text-align:center;font-size:13px;font-weight:700;color:var(--soft);margin-top:12px;}
@media(max-width:700px){.showcase .mini-phone:nth-child(n+3){display:none;}}

/* final cta */
.final{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;}
@media(max-width:820px){.final{grid-template-columns:1fr;}}
.qr-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;text-align:center;max-width:300px;margin:0 auto;box-shadow:0 14px 40px rgba(11,34,38,.08);}
.qr-card img{width:190px;height:190px;}
.qr-card .ql{font-size:13.5px;font-weight:700;margin-top:10px;}
.qr-card .qs{font-size:12px;color:var(--soft);margin-top:4px;}

/* footer */
footer{border-top:1px solid var(--line);padding:44px 0 34px;background:#fff;}
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;font-size:13.5px;}
@media(max-width:700px){.fcols{grid-template-columns:1fr 1fr;}}
.fcols h4{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--soft);margin-bottom:12px;}
.fcols a{display:block;color:var(--soft);padding:4px 0;}
.fcols a:hover{color:var(--teal);}
.fbottom{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}

/* launch list */
.signup-row{display:flex;gap:10px;max-width:460px;flex-wrap:wrap;}
.signup-row>*{max-width:100%;min-width:0;}
.signup-row input[type=email],.signup-row input[type=text]{flex:1 1 220px;min-width:0;max-width:100%;font-family:inherit;font-size:15px;padding:13px 20px;border-radius:999px;border:1.5px solid var(--line);background:#fff;outline-color:var(--teal);}
.signup-msg{display:none;margin-top:14px;font-size:14.5px;color:var(--teal);background:var(--teal-soft);border:1px solid rgba(14,90,100,.18);border-radius:12px;padding:14px 18px;max-width:460px;}
.signup-msg.err{color:#A03A2E;background:#FDF1EF;border-color:rgba(160,58,46,.25);}
.signup-note{font-size:12px;color:var(--soft);margin-top:10px;}
.launch-moment{text-align:center;padding:40px 0;}
.launch-moment .lm-k{font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--teal);}
.launch-moment .lm-date{font-size:clamp(34px,6vw,64px);font-weight:700;letter-spacing:-.5px;margin:10px 0 6px;}
.launch-moment .lm-days{font-size:16px;color:var(--soft);font-weight:700;}

/* day one */
.dayone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;max-width:900px;margin:36px auto 0;}
.dayone-row{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 20px;}
.dayone-row:hover{border-color:var(--teal);}
.d-name{font-weight:700;font-size:15px;}
.d-state{font-size:11.5px;font-weight:700;letter-spacing:.5px;padding:5px 12px;border-radius:999px;}
.d-state.open{color:#A05A10;background:#FFF3E0;}
.d-state.joining{color:var(--teal);background:var(--teal-soft);}
.d-state.growing{color:#1E7A3C;background:#E8F5EC;}
/* build status */
.bs-list{max-width:680px;margin:32px auto 0;border-top:1px solid var(--line);}
.bs-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 4px;border-bottom:1px solid var(--line);}
.bs-area{font-weight:700;font-size:14.5px;}
.bs-note{display:block;font-weight:400;font-size:12.5px;color:var(--soft);}
.bs-badge{font-size:10.5px;font-weight:700;letter-spacing:1px;padding:5px 12px;border-radius:999px;flex-shrink:0;}
.bs-badge.ready{color:#1E7A3C;background:#E8F5EC;}
.bs-badge.testing{color:var(--teal);background:var(--teal-soft);}
.bs-badge.building{color:#A05A10;background:#FFF3E0;}
.bs-badge.planned{color:var(--soft);background:#F0F1EF;}
/* help without money */
.help3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;max-width:960px;margin:36px auto 0;}
.help3 > div{padding:8px 28px;border-left:1px solid var(--line);}
.help3 > div:first-child{border-left:0;}
@media(max-width:760px){.help3 > div{border-left:0;border-top:1px solid var(--line);padding:20px 4px;}.help3 > div:first-child{border-top:0;}}
.help3 .hk{font-size:11.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin-bottom:8px;}
.help3 p{font-size:14px;color:var(--soft);margin-bottom:14px;}
/* three paths */
.paths{max-width:760px;margin:44px auto 0;}
.paths .path{padding:30px 4px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:18px;align-items:center;}
@media(max-width:640px){.paths .path{grid-template-columns:1fr;gap:10px;}}
.paths .path .p-id{font-size:clamp(19px,2.4vw,24px);font-weight:700;letter-spacing:-.2px;}
.paths .path .p-body p{font-size:14.5px;color:var(--soft);margin-bottom:14px;}
/* ask */
.askrow{display:flex;gap:10px;max-width:560px;margin:22px auto 0;flex-wrap:wrap;}
.askrow input{flex:1;min-width:240px;font-family:inherit;font-size:15px;padding:13px 20px;border-radius:999px;border:1.5px solid var(--line);background:#fff;outline-color:var(--teal);}

/* chips (shared with generated pages' look) */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{font-size:12.5px;font-weight:700;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 15px;color:var(--ink);}
.chip:hover{border-color:var(--teal);color:var(--teal);}

/* How it works — feature grid */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px;}
/* Four cards read better two-up than as a row of three with an orphan. */
.fgrid.g2{grid-template-columns:repeat(2,1fr);gap:16px;}
.fcard{background:#fff;border:1px solid rgba(14,90,100,.12);border-radius:18px;padding:20px 20px 18px;}
/* --- Cards that carry an icon -------------------------------------------
   The feature grids were wall-to-wall text at one weight, which reads as a
   spec sheet rather than a product. A tinted badge gives each card a place for
   the eye to land, and a hairline of accent along the top edge stops a grid of
   six looking like one grey block. */
.icard{position:relative;background:#fff;border:1px solid rgba(14,90,100,.12);border-radius:18px;
  padding:22px 20px 20px;overflow:hidden;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.icard::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent,var(--teal));opacity:.9;}
.icard:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(11,34,38,.09);border-color:rgba(14,90,100,.22);}
.icard .ic{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--tint,var(--teal-soft));color:var(--accent,var(--teal));margin-bottom:13px;}
.icard .ic svg{width:21px;height:21px;}
.icard h3{font-size:16.5px;font-weight:700;color:var(--ink);margin:0 0 7px;letter-spacing:-.1px;}
.icard p{font-size:13.5px;line-height:1.6;color:var(--soft);margin:0;}
.icard em{font-style:normal;font-weight:700;color:var(--teal);}
.fcard{transition:transform .18s ease, box-shadow .18s ease;}
.fcard:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(11,34,38,.08);}

/* A numbered sequence that reads as one flow rather than four separate cards. */
.steps{display:grid;gap:0;margin-top:28px;}
.step{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:20px 0;border-top:1px solid var(--line);align-items:start;}
.step:first-child{border-top:0;}
.step .n{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:16px;background:var(--teal);color:#fff;}
.step.soft .n{background:var(--teal-soft);color:var(--teal);}
.step h3{font-size:17px;font-weight:700;margin:8px 0 6px;color:var(--ink);}
.step p{font-size:14.5px;line-height:1.6;color:var(--soft);margin:0;}

/* The eight Subjects, in their own colours. Real taxonomy, and the fastest way
   to show breadth without a paragraph claiming it. */
/* Spark -> Curiosity -> Explanation -> Question -> Connection -> Deeper learning.
   The signature Circin chain: one idea leading into the next, which is the whole
   argument for short-form having somewhere to go. Wraps on a phone, and the
   arrows are drawn rather than typed so a screen reader hears the words only. */
.chain{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;max-width:840px;margin:32px auto 0;}
.chain .lk{position:relative;font-size:13.5px;font-weight:700;color:var(--c);
  background:color-mix(in srgb, var(--c) 10%, #fff);border:1px solid color-mix(in srgb, var(--c) 30%, #fff);
  border-radius:999px;padding:9px 16px;white-space:nowrap;}
.chain .lk + .lk::before{content:"";position:absolute;left:-15px;top:50%;width:7px;height:7px;
  border-top:2px solid var(--line);border-right:2px solid var(--line);transform:translateY(-50%) rotate(45deg);}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .chain .lk{background:var(--teal-soft);border-color:rgba(14,90,100,.18);color:var(--teal);}
}
.dark .chain .lk{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff;}

/* A plain list that reads as prose rather than as a spec sheet. */
.mlist{margin:16px 0 0;padding:0;list-style:none;}
.mlist li{position:relative;padding:10px 0 10px 26px;border-top:1px solid var(--line);
  font-size:15px;line-height:1.65;color:var(--soft);}
.mlist li:first-child{border-top:0;}
.mlist li::before{content:"";position:absolute;left:4px;top:19px;width:6px;height:6px;border-radius:50%;background:var(--teal);}
.dark .mlist li{border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.72);}

/* A soft wash behind an audience-page hero, so the first screen isn't
   flat white with type floating in it. */
.hero-band{position:relative;overflow:hidden;}
.hero-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(820px 420px at 50% -6%, rgba(14,90,100,.13), rgba(14,90,100,0) 70%);}
.hero-band > .wrap{position:relative;z-index:1;}

/* The creator's own address on Circin. Real: handles are unique and the
   page at /c/<handle> exists the moment something is live. */
.url-claim{display:inline-flex;align-items:baseline;gap:0;margin:30px auto 0;background:#fff;
  border:1.5px solid var(--line);border-radius:999px;padding:12px 22px;box-shadow:0 8px 22px rgba(11,34,38,.07);
  font-size:clamp(15px,2.4vw,19px);font-weight:700;max-width:100%;}
.url-claim .uc-dom{color:var(--soft);}
.url-claim .uc-you{color:var(--teal);}
.url-claim .uc-car{display:inline-block;margin-left:2px;width:2px;height:1.05em;background:var(--teal);border-radius:1px;
  animation:ucblink 1.1s steps(1,end) infinite;vertical-align:-.16em;}
@keyframes ucblink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.url-claim .uc-car{animation:none}}
@media(max-width:420px){.url-claim{padding:11px 16px;}}

.sj-strip{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:620px;margin:26px auto 0;}
.sj-chip{font-size:13px;font-weight:700;color:var(--ct,var(--c));background:color-mix(in srgb, var(--c) 9%, #fff);
  border:1px solid color-mix(in srgb, var(--c) 26%, #fff);border-radius:999px;padding:7px 14px;white-space:nowrap;
  text-decoration:none;transition:transform .15s ease, box-shadow .15s ease;}
a.sj-chip:hover{transform:translateY(-1px);box-shadow:0 4px 12px color-mix(in srgb, var(--c) 22%, transparent);}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .sj-chip{background:var(--teal-soft);border-color:rgba(14,90,100,.18);}
}

/* A row of small facts under a heading, for things that are lists not cards. */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--teal);
  background:var(--teal-soft);border:1px solid rgba(14,90,100,.16);border-radius:999px;padding:8px 14px;}
.pill svg{width:15px;height:15px;}

/* Icon cards on a dark band. */
.dark .icard{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);}
.dark .icard h3{color:#fff;}
.dark .icard p{color:#9FBEC2;}
.dark .icard .ic{background:rgba(255,255,255,.08);color:#5FC2CE;}
.dark .icard::before{background:#5FC2CE;}
.dark .icard:hover{box-shadow:0 10px 28px rgba(0,0,0,.25);border-color:rgba(255,255,255,.2);}
.dark .sub{color:#9FBEC2;}
.dark .eyebrow{color:#5FC2CE;}
@media(prefers-reduced-motion:reduce){.icard,.fcard{transition:none;}.icard:hover,.fcard:hover{transform:none;}}
@media(max-width:640px){.step{grid-template-columns:42px 1fr;gap:14px;}}
.fcard h3{font-size:16px;font-weight:700;color:var(--ink);margin:0 0 8px;}
.fcard p{font-size:13.5px;line-height:1.55;color:var(--soft);margin:0;}
.fcard em{font-style:normal;color:var(--teal);font-weight:700;}
@media(max-width:900px){.fgrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr;}}

/* ---- unique features: one phone, one screen per feature ---- */
.inside{display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:start;margin-top:44px;}
.inside-phone{position:sticky;top:24px;}
.inside .phone .screen iframe{pointer-events:auto;}
.inside .lbl{text-align:center;font-size:13px;font-weight:700;color:var(--soft);margin-top:14px;}
.inside-list{border-top:1px solid var(--line);}
.ft{border-bottom:1px solid var(--line);}
.ft-h{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:0;padding:16px 6px;font-family:inherit;font-size:19px;font-weight:600;color:#0B2226;text-align:left;cursor:pointer;}
.ft-t{flex:1;display:flex;align-items:center;gap:14px;}
.ft-ic{flex-shrink:0;color:var(--teal);}
.ft-h .chev{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:#0B2226;transition:transform .2s,background .2s,color .2s;}
.ft-h .chev::before{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);margin-left:-2px;}
.ft.open{background:linear-gradient(90deg,rgba(14,90,100,.06),transparent 70%);}
.ft.open .ft-h .chev{background:var(--teal);border-color:var(--teal);color:#fff;transform:rotate(90deg);}
.ft-b{display:none;padding:0 6px 18px 42px;color:var(--soft);font-size:15px;line-height:1.55;max-width:540px;}
.ft-b p{margin:0;}
.ft.open .ft-b{display:block;}
.ft-hint{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:var(--teal);}
@media(max-width:900px){.inside{grid-template-columns:1fr;gap:28px;}.inside-phone{position:static;margin:0 auto;}}

/* === VISUALS (figures) — begin === */
/* One vocabulary for every figure on circin.org. A visual is a claim: a
   diagram draws only behaviour the code has, an example is labelled as an
   example, and the caption concedes the limit. Teal = the active path,
   amber = not built yet, dashed red-brown = something Circin refuses.
   The same block lives in gen_site.py's CSS constant; keep them identical. */

/* ---- the figure wrapper, its caption, and the honesty pill ---- */
figure.fig{margin:28px 0 0;padding:0;}
figure.fig.narrow{margin-left:auto;margin-right:auto;max-width:720px;}
.fig-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px;}
.fig-box.tint{background:var(--teal-soft,#EAF3F4);border-color:rgba(14,90,100,.14);}
.figc{margin:12px 2px 0;text-align:left;font-size:13px;line-height:1.6;color:var(--soft);max-width:64ch;}
figure.fig.narrow .figc{margin-left:auto;margin-right:auto;}
.figc strong{color:var(--ink);font-weight:700;}
.figc em{font-style:normal;font-weight:700;color:var(--teal);}
.figc a{color:var(--teal);font-weight:700;}
.fpill{display:inline-block;margin-right:8px;padding:2px 9px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;white-space:nowrap;vertical-align:1px;color:#A96319;background:rgba(224,138,46,.13);border:1px solid rgba(224,138,46,.3);}
.fpill.drawn{color:var(--teal);background:var(--teal-soft,#EAF3F4);border-color:rgba(14,90,100,.2);}
.fpill.live{color:#1E7A3C;background:#E8F5EC;border-color:rgba(30,122,60,.28);}
.fpill.none{color:var(--soft);background:#F0F1EF;border-color:var(--line);}

/* ---- a figure wider than the column scrolls in its own box ---- */
.fig-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.fig-scroll svg.flow{min-width:520px;max-width:640px;}
.fig-scroll.w680 svg.flow{min-width:680px;max-width:820px;}
.fig-swipe{display:none;margin:8px 2px 0;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--soft);}
@media(max-width:600px){.fig-scroll + .fig-swipe,.cmp-wrap + .fig-swipe{display:block;}}
@media(max-width:760px){.fig-scroll.w680 + .fig-swipe{display:block;}}
@media(max-width:560px){.fig-box{padding:16px 10px;}}

/* ---- svg.flow: soft boxes joined by connections ---- */
svg.flow{display:block;width:100%;height:auto;max-width:400px;margin:0 auto;overflow:visible;}
svg.flow text{font-family:'Comfortaa',system-ui,-apple-system,sans-serif;fill:var(--ink);}
svg.flow .t-lbl{font-size:13.5px;font-weight:700;}
svg.flow .t-sub{font-size:11.5px;font-weight:400;fill:var(--soft);}
svg.flow .t-kick{font-size:10.5px;font-weight:700;letter-spacing:1.2px;fill:var(--teal);}
svg.flow .t-kick.wait{fill:#A05A10;}
svg.flow .t-kick.no{fill:#A03A2E;}
svg.flow .t-kick.quiet{fill:var(--soft);}
svg.flow .t-chip{font-size:11px;font-weight:700;fill:var(--teal);}
svg.flow .t-num{font-size:11.5px;font-weight:700;fill:#fff;}
svg.flow .node{fill:#fff;stroke:rgba(14,90,100,.22);stroke-width:1.5;}
svg.flow .node-on{fill:var(--teal-soft,#EAF3F4);stroke:var(--teal);stroke-width:1.5;}
svg.flow .node-off{fill:#F7F7F5;stroke:rgba(0,0,0,.12);stroke-width:1.5;}
svg.flow .node-wait{fill:#FFF6E8;stroke:rgba(224,138,46,.5);stroke-width:1.5;}
svg.flow .node-no{fill:#FDF4F2;stroke:rgba(160,58,46,.55);stroke-width:1.5;stroke-dasharray:5 4;}
svg.flow .group{fill:none;stroke:rgba(14,90,100,.2);stroke-width:1.5;stroke-dasharray:2 5;stroke-linecap:round;}
svg.flow .eg-chip{fill:var(--teal-soft,#EAF3F4);stroke:rgba(14,90,100,.2);stroke-width:1;}
svg.flow .edge{stroke:rgba(9,10,10,.26);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;}
svg.flow .edge-on{stroke:var(--teal);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;}
svg.flow .edge-soft{stroke:rgba(9,10,10,.2);stroke-width:1.5;fill:none;stroke-dasharray:4 5;stroke-linecap:round;}
svg.flow .edge-no{stroke:rgba(160,58,46,.6);stroke-width:1.5;fill:none;stroke-dasharray:5 4;stroke-linecap:round;}
svg.flow .arrow{fill:rgba(9,10,10,.36);stroke:none;}
svg.flow .arrow-on{fill:var(--teal);stroke:none;}
svg.flow .arrow-no{fill:rgba(160,58,46,.7);stroke:none;}
svg.flow .dot{fill:var(--teal);stroke:none;}
svg.flow .num{fill:var(--teal);stroke:none;}
svg.flow .cross{stroke:#A03A2E;stroke-width:1.8;fill:none;stroke-linecap:round;}
svg.flow .wall{stroke:var(--teal);stroke-width:2.5;fill:none;stroke-linecap:round;}

/* ---- .anat: a live phone frame or a drawn surface beside a numbered key ---- */
.anat{display:grid;grid-template-columns:300px minmax(0,1fr);gap:44px;align-items:start;}
.anat.drawn{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px;}
@media(max-width:820px){.anat,.anat.drawn{grid-template-columns:minmax(0,1fr);gap:24px;justify-items:center;}.anat > .anat-key,.anat > .anat-card{justify-self:stretch;}}
.anat-key{margin:0;padding:0;list-style:none;counter-reset:anat;}
.anat-key li{position:relative;counter-increment:anat;padding:14px 0 14px 44px;border-top:1px solid var(--line);}
.anat-key li:first-child{border-top:0;padding-top:0;}
.anat-key li::before{content:counter(anat);position:absolute;left:0;top:13px;width:28px;height:28px;border-radius:50%;background:var(--teal-soft,#EAF3F4);color:var(--teal);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.anat-key li:first-child::before{top:0;}
.anat-key li.absent{counter-increment:none;}
.anat-key li.absent::before{content:"–";background:#F0F1EF;color:var(--soft);}
.anat-key b{display:block;font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.1px;}
.anat-key span{display:block;font-size:14px;line-height:1.6;color:var(--soft);margin-top:3px;}
.anat-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:0 8px 24px rgba(11,34,38,.06);}
.anat-hd{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding-bottom:11px;border-bottom:1px solid var(--line);}
.anat-av{width:30px;height:30px;border-radius:50%;flex-shrink:0;background:linear-gradient(150deg,#123A34,#2E6E63);}
.anat-who{font-size:13px;font-weight:700;color:var(--ink);}
.anat-when{font-size:11.5px;font-weight:400;color:var(--soft);}
.anat-tag{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--teal);background:var(--teal-soft,#EAF3F4);border:1px solid rgba(14,90,100,.2);border-radius:999px;padding:3px 9px;white-space:nowrap;}
.anat-tag.amber{color:#A05A10;background:#FFF3E0;border-color:rgba(224,138,46,.34);}
.anat-body{margin:11px 0 0;font-size:14px;line-height:1.6;color:var(--ink);}
.anat-body .pre{color:var(--teal);font-weight:700;}
.anat-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:11px;border-top:1px solid var(--line);font-size:12px;color:var(--soft);}
.anat-pin{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;flex-shrink:0;background:var(--teal);color:#fff;font-size:11px;font-weight:700;line-height:1;vertical-align:2px;}

/* ---- .cmp: a side-by-side comparison, every cell already true in prose ---- */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.cmp{width:100%;min-width:560px;border-collapse:separate;border-spacing:0;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;}
table.cmp th,table.cmp td{text-align:left;vertical-align:top;padding:13px 16px;border-top:1px solid var(--line);line-height:1.55;}
table.cmp thead th{border-top:0;background:var(--teal-soft,#EAF3F4);color:var(--teal);font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;}
table.cmp tbody th{font-weight:700;color:var(--ink);width:24%;}
table.cmp td{color:var(--soft);}
table.cmp td.yes{color:var(--ink);font-weight:700;}
table.cmp td.no{color:var(--soft);}
table.cmp td.no::before{content:"–";font-weight:700;margin-right:7px;}

/* ---- .eg: a worked example in HTML, alone or two side by side in .eg-pair ---- */
.eg-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
@media(max-width:640px){.eg-pair{grid-template-columns:minmax(0,1fr);}}
.eg{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;}
.eg.on{background:var(--teal-soft,#EAF3F4);border-color:rgba(14,90,100,.22);}
.eg.no{background:#FDF4F2;border:1.5px dashed rgba(160,58,46,.5);}
.eg-k{display:block;margin-bottom:8px;font-size:10.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--teal);}
.eg.no .eg-k{color:#A03A2E;}
.eg p{margin:0;font-size:14.5px;line-height:1.6;color:var(--soft);}
.eg p + p{margin-top:8px;}
.eg p strong{color:var(--ink);}

/* ---- on a dark section ---- */
.dark .fig-box{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);}
.dark .figc{color:#9FBEC2;}
.dark .figc strong{color:#fff;}
.dark .figc em,.dark .figc a{color:#5FC2CE;}
.dark .fig-swipe{color:#9FBEC2;}
.dark svg.flow text{fill:#E8F1F2;}
.dark svg.flow .t-sub{fill:#9FBEC2;}
.dark svg.flow .t-kick,.dark svg.flow .t-chip{fill:#5FC2CE;}
.dark svg.flow .node{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.2);}
.dark svg.flow .node-on{fill:rgba(95,194,206,.14);stroke:#5FC2CE;}
.dark svg.flow .node-off{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.14);}
.dark svg.flow .eg-chip{fill:rgba(95,194,206,.12);stroke:rgba(95,194,206,.3);}
.dark svg.flow .edge{stroke:rgba(255,255,255,.34);}
.dark svg.flow .edge-soft{stroke:rgba(255,255,255,.24);}
.dark svg.flow .edge-on,.dark svg.flow .wall{stroke:#5FC2CE;}
.dark svg.flow .arrow{fill:rgba(255,255,255,.44);}
.dark svg.flow .arrow-on,.dark svg.flow .dot,.dark svg.flow .num{fill:#5FC2CE;}
.dark svg.flow .t-num{fill:#0B2226;}
.dark svg.flow .group{stroke:rgba(255,255,255,.22);}
.dark .anat-key li{border-color:rgba(255,255,255,.14);}
.dark .anat-key b{color:#fff;}
.dark .anat-key span{color:#9FBEC2;}
/* === VISUALS (figures) — end === */