@layer gooo {
:root { --gooo-ink:#173440; --gooo-teal:#007f91; --gooo-paper:#fffefb; --gooo-line:#d6e2e4; --gooo-soft:#edf6f6; color-scheme:light; }
* { box-sizing:border-box; }
body { margin:0; color:var(--gooo-ink); background:var(--gooo-paper); font-family:Figtree,"Trebuchet MS",sans-serif; font-size:17px; line-height:1.65; }
a { color:var(--gooo-teal); text-underline-offset:4px; }
a:hover { text-decoration:underline; }
:focus-visible { outline:3px solid #d28a08; outline-offset:5px; }
.wrap { width:min(1160px,calc(100% - 64px)); margin:auto; }
header { background:#fff; border-bottom:1px solid var(--gooo-line); }
nav { display:flex; align-items:center; justify-content:space-between; min-height:88px; gap:24px; }
.brand { color:var(--gooo-ink); font-size:34px; font-weight:800; letter-spacing:-1.5px; text-decoration:none; }
.brand span { font-size:13px; font-weight:500; letter-spacing:1px; margin-left:12px; }
.navlinks { display:flex; flex-wrap:wrap; gap:30px; }
.navlinks a { font-size:16px; color:var(--gooo-ink); text-decoration:none; }
.hero { padding:84px 0 80px; background:radial-gradient(ellipse at 95% 15%,#d5eded 0,transparent 56%),linear-gradient(115deg,#f7fbf7,#ecf5f7); border-bottom:1px solid var(--gooo-line); }
.hero-grid { display:grid; grid-template-columns:1.04fr 1fr; gap:68px; align-items:center; }
.eyebrow { color:var(--gooo-teal); font-size:12px; font-weight:700; letter-spacing:1.7px; margin:0 0 22px; }
h1 { font-size:clamp(48px,6vw,76px); font-weight:700; letter-spacing:-3px; line-height:1.05; margin:0 0 26px; }
h2 { font-size:clamp(30px,3.3vw,42px); font-weight:600; line-height:1.18; letter-spacing:-1.3px; margin:0 0 24px; }
h3 { font-size:23px; font-weight:600; line-height:1.3; margin:18px 0 12px; }
p { margin:0 0 20px; }
.lede { font-size:21px; line-height:1.6; }
.small { font-size:13px; color:#506b75; margin-top:23px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.button { padding:12px 18px; border:1px solid var(--gooo-teal); border-radius:4px; text-decoration:none; font-size:15px; font-weight:700; }
.primary { background:var(--gooo-teal); color:white; }
.code-window { background:#fff; border:1px solid #b8d2d7; border-radius:7px; box-shadow:9px 12px 0 #badcdf55; overflow:hidden; }
.window-heading { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:15px 22px; border-bottom:1px solid var(--gooo-line); background:#f5f9f9; }
.file-label { font-family:monospace; font-size:13px; }
.tag { font-size:9px; letter-spacing:1px; color:var(--gooo-teal); }
pre { overflow:auto; padding:24px; margin:0; font-size:12px; line-height:1.85; tab-size:2; }
code { font-family:"SFMono-Regular",Consolas,monospace; }
.keyword { color:#08798c; font-weight:700; }
.code-caption { border-top:1px solid var(--gooo-line); padding:12px 22px; font-size:11px; color:#5b7078; margin:0; }
.section { padding-top:76px; padding-bottom:76px; }
.section-title { margin-bottom:40px; }
.three-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.three-columns article { border-top:2px solid var(--gooo-line); padding-top:24px; }
.number { font-size:11px; letter-spacing:1.7px; color:var(--gooo-teal); font-weight:700; }
.three-columns p { color:#4a636d; }
.tinted { background:var(--gooo-soft); border-block:1px solid var(--gooo-line); }
.story,.status-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:90px; align-items:start; }
.pipeline { list-style:none; padding:0; margin:0; counter-reset:step; }
.pipeline li { position:relative; padding:0 0 27px 48px; border-left:1px solid #9bbfc5; margin-left:15px; }
.pipeline li:before { counter-increment:step; content:counter(step); position:absolute; left:-15px; top:0; width:29px; height:29px; border-radius:3px; background:#fff; border:1px solid #8dafb6; text-align:center; font-size:13px; }
.pipeline li:last-child { border-left-color:transparent; padding-bottom:0; }
.pipeline strong,.pipeline span { display:block; }
.pipeline span { font-size:14px; color:#516c77; }
aside { border:1px solid var(--gooo-line); padding:26px; border-radius:5px; background:#f9fbf9; }
footer { border-top:1px solid var(--gooo-line); background:#f4f7f7; padding:40px 0; font-size:13px; }
footer .wrap { display:flex; gap:24px; flex-wrap:wrap; align-items:center; }
footer p { margin:0; flex:1; } footer span { color:#627680; }
.skip { position:absolute; top:-90px; background:white; padding:12px; z-index:9; }.skip:focus { top:5px; }
.document { max-width:860px; padding-top:66px; padding-bottom:80px; }
.document h1 { font-size:54px; }.document h2 { margin-top:48px; font-size:30px; }
.document pre { background:#edf4f5; border:1px solid var(--gooo-line); border-radius:4px; font-size:14px; margin:24px 0; }
.document ul { padding-left:24px; }.document li { margin:10px 0; }
.note { border-left:3px solid var(--gooo-teal); background:#edf6f6; padding:18px 22px; }
table { width:100%; border-collapse:collapse; margin:24px 0; font-size:15px; }th,td { padding:13px 12px; border-bottom:1px solid var(--gooo-line); text-align:left; }
@media(max-width:760px) { .wrap { width:calc(100% - 36px); }nav { align-items:flex-start; flex-direction:column; gap:12px; padding:17px 0; }.navlinks { gap:22px; }.brand span { display:none; }.hero { padding:48px 0; }.hero-grid,.story,.status-grid,.three-columns { grid-template-columns:1fr; gap:36px; }h1 { letter-spacing:-2px; }.section { padding-block:48px; }.document h1 { font-size:43px; }footer .wrap { flex-direction:column; align-items:flex-start; }table { font-size:12px; }th,td { padding:9px 5px; } }
@media(prefers-reduced-motion:no-preference) { .hero-grid { animation:appear .55s ease-out both; }@keyframes appear { from { opacity:0; transform:translateY(10px); }to { opacity:1; transform:translateY(0); } } }
}