:root{
color-scheme:dark light;
--sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
--display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Monaco,monospace;
--label:#f2f2f4;--secondaryLabel:#98989f;--tertiaryLabel:#88888d;
--systemBackground:#0b0b0c;--secondarySystemBackground:#222223;--tertiarySystemBackground:#303031;
--fill:rgba(127,127,128,.24);--separator:rgba(127,127,128,.60);--hairline:#2a2a30;
--bar:rgba(11,11,12,.78);--tint:#00ff88;--onTint:#0b0b0c;--link:#478fe6;
--tintGreen:#093c25;--tintGold:#352609;--stateGold:#c98500;
}
@media (prefers-color-scheme:light){:root{
--label:#16161a;--secondaryLabel:#5c5c66;--tertiaryLabel:#65656b;
--systemBackground:#fcfcfd;--secondarySystemBackground:#e5e5e6;--tertiarySystemBackground:#d7d7d9;
--fill:rgba(137,137,140,.12);--separator:rgba(137,137,140,.24);--hairline:#e3e3e8;
--bar:rgba(252,252,253,.82);--tint:#096c41;--onTint:#fcfcfd;--link:#2f67ac;
--tintGreen:#caeadc;--tintGold:#f1e2c5;--stateGold:#895d09;
}}
:root{
--t-caption1:400 12px/16px var(--sans);--t-footnote:400 13px/18px var(--sans);
--t-subheadline:400 15px/20px var(--sans);--t-callout:400 16px/21px var(--sans);
--t-body:400 17px/24px var(--sans);--t-headline:600 17px/22px var(--sans);
--t-title3:400 20px/25px var(--display);--t-title2:700 22px/28px var(--display);
--t-title1:700 28px/34px var(--display);--t-largeTitle:700 34px/41px var(--display);
--sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp6:24px;--sp8:32px;--sp10:40px;--hit:44px;
--r7:7px;--r9:9px;--r12:12px;--r16:16px;
--blur:saturate(180%) blur(20px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{background:var(--systemBackground);color:var(--label)}
body{margin:0;min-height:100dvh;font:var(--t-body);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
a{color:var(--tint)}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--tint);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.skip{position:absolute;left:var(--sp2);top:-60px;z-index:50;padding:var(--sp2) var(--sp3);border-radius:var(--r9);background:var(--tertiarySystemBackground);color:var(--label)}
.skip:focus{top:var(--sp2)}

.cmark{font-family:var(--display);font-weight:600;letter-spacing:.14em;font-size:13px;color:var(--label);text-decoration:none;white-space:nowrap}
.cmark .cap{color:var(--tint);font-weight:400;margin-right:.15em}

nav.family{display:flex;flex-wrap:wrap;gap:var(--sp1) var(--sp4);align-items:center;padding:6px var(--sp4);font:var(--t-caption1);background:var(--secondarySystemBackground);border-bottom:.5px solid var(--separator)}
nav.family a{color:var(--secondaryLabel);text-decoration:none}
nav.family a:hover{color:var(--label)}
nav.family a[aria-current]{color:var(--label);font-weight:600}

header.top{position:sticky;top:0;z-index:8;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp2) var(--sp4);min-height:44px;padding:6px var(--sp4);background:var(--bar);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:.5px solid var(--separator)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){header.top{background:var(--systemBackground)}}
header.top nav{display:flex;flex-wrap:wrap;gap:var(--sp1)}
header.top nav a{display:inline-flex;align-items:center;min-height:32px;padding:6px 10px;border-radius:var(--r7);color:var(--secondaryLabel);text-decoration:none;font:var(--t-footnote);font-weight:600}
header.top nav a:hover{color:var(--label)}
header.top nav a[aria-current]{color:var(--tint);background:var(--fill)}

.review-banner{margin:0;padding:var(--sp2) var(--sp4);background:var(--tintGold);color:var(--label);font:var(--t-footnote);font-weight:600;letter-spacing:.04em;text-align:center}

main.view{max-width:1040px;margin:0 auto;padding:var(--sp4) var(--sp4) var(--sp10)}
main.view h1{font:var(--t-largeTitle);letter-spacing:.37px;margin:var(--sp6) 0 var(--sp2)}
main.view h2{font:var(--t-title2);margin:var(--sp8) 0 var(--sp3)}
main.view h3{font:var(--t-headline);margin:0 0 var(--sp1)}
main.view p{margin:0 0 var(--sp3);max-width:72ch}
.lede{color:var(--secondaryLabel);font:var(--t-title3);margin:0 0 var(--sp4);max-width:60ch}
.small,.src{color:var(--secondaryLabel);font:var(--t-footnote)}

section.pane{background:var(--secondarySystemBackground);border-radius:var(--r12);padding:var(--sp4) var(--sp4);margin:0 0 var(--sp3);border-left:4px solid var(--tint);min-width:0}
section.pane h2{font:var(--t-headline);margin:0 0 var(--sp2)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:var(--sp3);margin:0 0 var(--sp4)}
.tile{background:var(--secondarySystemBackground);border-radius:var(--r12);padding:var(--sp4);min-width:0}
.tile p{font:var(--t-callout);color:var(--label)}
.tile .small{display:block;margin-top:var(--sp2)}

.pill{display:inline-flex;align-items:center;min-height:var(--hit);background:var(--fill);border-radius:var(--r16);padding:6px 16px;font:var(--t-subheadline);font-weight:600;color:var(--tint);text-decoration:none}

.person{display:flex;gap:var(--sp4);align-items:flex-start}
.person img{flex:none;width:88px;height:88px;border-radius:50%;object-fit:cover;object-position:50% 25%;background:var(--tertiarySystemBackground)}
.person .role{color:var(--secondaryLabel);font:var(--t-footnote);margin:0 0 var(--sp2)}
@media (max-width:480px){.person{flex-direction:column}}

ol.library{list-style:none;margin:0 0 var(--sp4);padding:0;background:var(--secondarySystemBackground);border-radius:var(--r12);overflow:hidden}
ol.library li{padding:var(--sp3) var(--sp4)}
ol.library li+li{border-top:.5px solid var(--separator)}
ol.library .t{font:var(--t-headline);display:block}
ol.library .m{color:var(--secondaryLabel);font:var(--t-footnote);display:block;margin-top:2px}

.roadmap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--sp3)}
.roadmap h3{font:var(--t-caption1);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--secondaryLabel)}
.roadmap ul{margin:0;padding-left:1.1em}
.roadmap li{margin:0 0 var(--sp2)}

footer.shell{color:var(--secondaryLabel);font:var(--t-caption1);padding:var(--sp6) var(--sp4) var(--sp10);border-top:.5px solid var(--separator);text-align:center}
footer.shell nav{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp1) var(--sp4);margin:0 0 var(--sp2)}
footer.shell a{color:var(--link);text-decoration:none}
footer.shell a[aria-current]{color:var(--label);font-weight:600}

body.review .rv{background:var(--tintGold);border-bottom:1px dashed var(--stateGold)}
body.review .rv::after{content:" [" attr(data-flag) "]";font:var(--t-caption1);font-family:var(--mono);color:var(--stateGold)}
.person .initials{flex:none;display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:var(--tertiarySystemBackground);color:var(--secondaryLabel);font:var(--t-title2)}
a.tile{display:block;color:var(--label);text-decoration:none}
a.tile h3{color:var(--tint)}
a.tile:hover{background:var(--tertiarySystemBackground)}
cite{font-style:italic}

.hero{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp10);align-items:center;margin:calc(-1*var(--sp6)) calc(-1*var(--sp4)) var(--sp10);padding:var(--sp10) var(--sp6);border-radius:0 0 var(--r16) var(--r16);
  background:radial-gradient(1200px 500px at 0% 0%,color-mix(in srgb,var(--tint) 22%,transparent),transparent 60%),radial-gradient(900px 500px at 100% 100%,color-mix(in srgb,var(--link) 20%,transparent),transparent 60%),var(--secondarySystemBackground)}
.hero .eyebrow{font:var(--t-footnote);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tint)}
.hero h1{font:700 clamp(36px,5.4vw,60px)/1.04 var(--display);letter-spacing:-.02em;margin:var(--sp3) 0 var(--sp4)}
.hero .sub{font:400 clamp(17px,1.6vw,21px)/1.45 var(--sans);color:var(--secondaryLabel);max-width:34em;margin:0 0 var(--sp6)}
.cta{display:flex;flex-wrap:wrap;gap:var(--sp3)}
.btn{display:inline-flex;align-items:center;min-height:var(--hit);padding:0 var(--sp6);border-radius:999px;font:var(--t-headline);text-decoration:none;border:1px solid transparent}
.btn.primary{background:var(--tint);color:var(--onTint)}
.btn.ghost{color:var(--label);border-color:var(--separator)}
.btn:hover{filter:brightness(1.08)}
.chat{background:var(--systemBackground);border:.5px solid var(--separator);border-radius:var(--r16);padding:var(--sp4);box-shadow:0 20px 60px rgba(0,0,0,.28)}
.chat .who{display:flex;align-items:center;gap:var(--sp3);padding-bottom:var(--sp3);margin-bottom:var(--sp3);border-bottom:.5px solid var(--separator)}
.chat .who b{font:var(--t-headline)} .chat .who span{font:var(--t-caption1);color:var(--secondaryLabel)}
.bubble{max-width:88%;padding:10px 14px;border-radius:18px;margin:var(--sp2) 0;font:var(--t-subheadline)}
.bubble.user{margin-left:auto;background:var(--link);color:#fff;border-bottom-right-radius:6px}
.bubble.bot{background:var(--tertiarySystemBackground);border-bottom-left-radius:6px}
.bubble .cite{display:block;margin-top:6px;font:var(--t-caption1);color:var(--secondaryLabel)}
.bubble .cite::before{content:"Source · "}
.chat .note{font:var(--t-caption1);color:var(--tertiaryLabel);margin-top:var(--sp3)}
.avatar{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font:700 18px/1 var(--display);color:#fff;background:linear-gradient(135deg,var(--tint),var(--link))}
.avatar.lg{width:64px;height:64px;font-size:26px}
.avatar.carib{background:linear-gradient(135deg,#0aa1c9,#f4b400)} .avatar.aicha{background:linear-gradient(135deg,#c1272d,#006233)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--sp4);margin:0 0 var(--sp10)}
.stat{padding:var(--sp6) var(--sp4);border-radius:var(--r12);background:var(--fill)}
.stat .n{display:block;font:700 clamp(32px,4vw,44px)/1 var(--display);letter-spacing:-.02em;color:var(--tint)}
.stat .c{display:block;margin-top:var(--sp2);font:var(--t-footnote);color:var(--secondaryLabel)}
.eyebrow-h{font:var(--t-footnote);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tint);margin:0 0 var(--sp2)}
.apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp4);margin:var(--sp4) 0 var(--sp10)}
.app{display:flex;flex-direction:column;gap:var(--sp3);padding:var(--sp6);border-radius:var(--r16);background:var(--secondarySystemBackground);border:.5px solid var(--hairline)}
.app .head{display:flex;align-items:center;gap:var(--sp3)} .app h3{margin:0;font:var(--t-title3);font-weight:700} .app .by{font:var(--t-caption1);color:var(--secondaryLabel)}
.status{align-self:flex-start;font:var(--t-caption1);font-weight:600;padding:3px 10px;border-radius:999px;background:var(--fill);color:var(--secondaryLabel)}
.status.dev{background:var(--tintGold);color:var(--stateGold)}
.strip{display:flex;flex-wrap:wrap;gap:var(--sp2);margin:var(--sp3) 0 var(--sp10)}
.strip span{padding:8px 14px;border-radius:999px;border:.5px solid var(--separator);font:var(--t-footnote);color:var(--secondaryLabel)}
.strip span b{color:var(--label)}
@media (max-width:760px){.hero{grid-template-columns:1fr;padding:var(--sp8) var(--sp4);gap:var(--sp6)}}

:root{--tint:#3cc8e6;--onTint:#0b0b0c}
@media (prefers-color-scheme:light){:root{--tint:#0b6f84;--onTint:#fcfcfd}}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
main.view section{scroll-margin-top:64px}
.app .status{margin-top:auto}

#talk{--gut:max(16px,calc((100vw - 760px)/2))}
.hero .chat{display:flex;flex-direction:column;min-height:480px;max-height:min(78dvh,680px)}
.chat .log{flex:1;display:flex;flex-direction:column;gap:2px;overflow-y:auto;overscroll-behavior:contain;padding:2px}
.chat .log .bubble{width:fit-content;max-width:min(80%,560px);margin:0;border-radius:18px;font:var(--t-callout)}
.chat .log .bubble.bot{align-self:flex-start;border-bottom-left-radius:6px}
.chat .log .bubble.bot+.bubble.bot{border-top-left-radius:6px}
.chat .log .bubble.user{align-self:flex-end;border-bottom-right-radius:6px}
.chat .log .bubble.user+.bubble.user{border-top-right-radius:6px}
.chat .log .bubble.bot+.bubble.user,.chat .log .bubble.user+.bubble.bot,.chat .log .pills+.bubble{margin-top:var(--sp3)}
.bubble p{margin:0 0 6px}.bubble p:last-child{margin:0}
.bubble ul,.bubble ol{margin:2px 0;padding-left:20px}
.bubble .src{font:var(--t-caption1);color:var(--secondaryLabel);white-space:nowrap}
.bubble.user .src{color:rgba(255,255,255,.8)}
.bubble.bot.err{background:var(--tintGold)}
.bubble.pop{animation:pop .22s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.97)}}
.stamp{align-self:center;margin:var(--sp2) 0;font:var(--t-caption1);color:var(--secondaryLabel)}
.bubble.typing{display:flex;gap:5px;align-items:center;padding:14px 16px}
.bubble.typing i{width:7px;height:7px;border-radius:50%;background:var(--secondaryLabel);opacity:.35;animation:dot 1.2s infinite}
.bubble.typing i:nth-child(2){animation-delay:.15s}.bubble.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{30%{opacity:1;transform:translateY(-3px)}}

.pills{align-self:flex-end;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:92%;margin-top:var(--sp3)}
.pills button{font:var(--t-footnote);font-weight:600;color:var(--tint);background:transparent;border:1px solid color-mix(in srgb,var(--tint) 55%,transparent);border-radius:999px;padding:7px 13px;cursor:pointer;text-align:left;animation:drop .32s cubic-bezier(.2,.9,.3,1.25) both}
.pills button:hover{background:color-mix(in srgb,var(--tint) 12%,transparent)}
@keyframes drop{from{opacity:0;transform:translateY(-12px)}}

.ask{display:flex;gap:var(--sp2);align-items:flex-end;margin-top:var(--sp3)}
.ask textarea{flex:1;resize:none;min-height:var(--hit);max-height:140px;padding:11px 16px;border-radius:22px;border:.5px solid var(--separator);background:var(--secondarySystemBackground);color:var(--label);font:var(--t-callout)}
.ask button{min-height:var(--hit);padding:0 18px;border-radius:999px;border:0;background:var(--tint);color:var(--onTint);font:var(--t-headline);cursor:pointer}
.ask button:disabled{opacity:.5;cursor:default}
.chat .close{display:none}

body.convo{overflow:hidden}
body.convo #talk{position:fixed;inset:0;z-index:40;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;min-height:0;max-height:none;height:100dvh;display:flex;flex-direction:column;background:var(--systemBackground)}
body.convo #talk .who{margin:0;padding:max(env(safe-area-inset-top),8px) var(--gut) 8px;background:var(--bar);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
body.convo #talk .log{padding:var(--sp4) var(--gut)}
body.convo #talk .ask{margin:0;padding:8px var(--gut) 6px;border-top:.5px solid var(--separator);background:var(--bar)}
body.convo #talk .note{margin:0;padding:0 var(--gut) max(env(safe-area-inset-bottom),10px);background:var(--bar)}
body.convo .chat .close{display:grid;place-items:center;width:var(--hit);height:var(--hit);margin-left:-12px;border:0;background:none;color:var(--tint);font:400 34px/1 var(--display);cursor:pointer}
.bubble.bot.safety{background:var(--tintGold);border-left:3px solid var(--stateGold)}
@media (prefers-color-scheme:dark){.chat .log .bubble.user{background:#2a64c0}}
.bubble.user .src{color:#fff}
.bubble .src{white-space:normal}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
