/* Geist and Geist Mono (SIL OFL 1.1), served from /fonts/; fetched by fetch_fonts.py */
/* Geist, cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/geist-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Geist, cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/geist-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Geist, vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/geist-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Geist, latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist, latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Geist Mono, cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/geist-mono-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Geist Mono, cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/geist-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Geist Mono, symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/geist-mono-symbols2.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* Geist Mono, vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/geist-mono-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Geist Mono, latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/geist-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist Mono, latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/geist-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face { font-family: "Skywake Pixel Mono"; src: url("/fonts/skywake-pixel-mono.woff2") format("woff2"); font-display: block; }
:root {
  color-scheme: light;
  --body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --px-serif: "Skywake Pixel Serif", Georgia, serif;
  --px-mono: "Skywake Pixel Mono", "Geist Mono", ui-monospace, monospace;
}
:root {
  --paper: #f1f0e7;
  --paper-2: #e3e4d5;
  --card: #fbfbf6;
  --ink: #14261c;
  --ink-2: #44554a;
  --ink-3: #7f8b7c;
  --line: rgba(20, 38, 28, 0.12);
  --line-2: rgba(20, 38, 28, 0.22);
  --accent: #bfd66b;
  --on-accent: #14261c;
  --accent-2: #2f6b3d;
  --live: #b8662b;
  --halo: rgba(247, 247, 240, 0.9);
  --halo-2: rgba(247, 247, 240, 0.5);
  --shade: #14261c;  /* shadows, mixed thin */
  --w-shadow: 0 24px 60px rgba(40, 36, 20, 0.1), 0 2px 6px rgba(40, 36, 20, 0.05);
  --glass-hi: rgba(255, 255, 255, 0.8);  /* the frosted header's top edge */
  --frost-b: 1.18;
  --film-ink: #14261c;  /* the glyphs of the ASCII ink film and page images */
}
@media (prefers-color-scheme: dark) { :root {
  color-scheme: dark;
  --paper: #0b0b0b;
  --paper-2: #050505;
  --card: #171717;
  --ink: #f1f0e7;
  --ink-2: #b5b4ad;
  --ink-3: #8a8983;
  --line: rgba(241, 240, 231, 0.12);
  --line-2: rgba(241, 240, 231, 0.22);
  --accent: #bfd66b;
  --on-accent: #14261c;
  --accent-2: #77b682;
  --live: #d58047;
  --halo: rgba(11, 11, 11, 0.9);
  --halo-2: rgba(11, 11, 11, 0.5);
  --shade: #000;
  --w-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --glass-hi: rgba(241, 240, 231, 0.08);
  --frost-b: 0.9;
  --film-ink: #8f8e88;  /* a neutral grey, dimmer than the text, so the words stand clear of the picture */
} }
/* bonsai., kallo. and glowpro.skywakelabs.com (session 06): one screen per company until its own product is deployed there.
   The company's logo from its own kit, its status and line from the Portfolio page, and the way back to the lab. The palette
   comes from site.css (the build copies it); these pages have no script, so they follow the system's light or dark setting.
   The eyebrow, tag, line and arcade buttons are the Portfolio's and homepage's, repeated here. */
/* Each logo in its kit's light and dark versions: the one for the system's setting (!important: the logo rules below set display) */
.lg-dark { display: none !important; }
@media (prefers-color-scheme: dark) { .lg-light { display: none !important; } .lg-dark { display: block !important; } }
*, *::before, *::after { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; }

.cp { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto;
  padding: max(20px, env(safe-area-inset-top, 0px)) max(20px, 5vw, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(20px, 5vw, env(safe-area-inset-left, 0px)); }
.cp-top { display: flex; align-items: center; min-height: 44px; }
.brand { display: inline-flex; border-radius: 2px; }
.brand svg { display: block; height: 30px; width: auto; }
.cp-co { align-self: center; display: grid; justify-items: start; gap: 22px; max-width: 46rem; padding: 9vh 0 11vh; }
.cp-co > .tag { margin-top: 2px; }

/* The company's name: its kit's logo (Bonsai, Kallo), or for GlowPro the blob above and the name set in Geist, as on the Portfolio */
.cp-name { margin: 0; font-weight: 400; font-size: clamp(52px, 9vw, 112px); line-height: 1; letter-spacing: -0.04em; }
.cp-name svg { display: block; width: auto; }
.cp-name-bonsai, .cp-name-kallo { --h: clamp(52px, 8vw, 96px); line-height: 0; }
.cp-name-bonsai svg { height: calc(var(--h) * 2.1); margin: calc(var(--h) * -0.39) 0 calc(var(--h) * -0.25) calc(var(--h) * -0.39); }
.cp-name-kallo svg { height: calc(var(--h) * 1.4); margin: calc(var(--h) * -0.24) 0 0 calc(var(--h) * -0.24); }  /* the space below is Kallo's clear space: kept */
.cp-mark { width: clamp(150px, 20vw, 220px); margin-bottom: 4px; }
.cp-mark svg { display: block; width: 100%; height: auto; }

.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 12px/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2); }
.eyebrow::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.tag { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 8px; font: 400 17px/1 var(--px-mono); color: var(--ink-2); background: var(--paper-2); }
.tag.live::before { content: ""; width: 8px; height: 8px; background: var(--accent-2); }
.tag.soon::after { content: ""; width: 7px; height: 13px; background: var(--live); animation: blink 1.1s steps(1) infinite; }  /* an arcade cursor */
@keyframes blink { 50% { opacity: 0; } }
.co-line { margin: 0; max-width: 48ch; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.5; letter-spacing: -0.01em; color: var(--ink-2); }
.co-line b { font-weight: 500; color: var(--ink); }

.ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.btn { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 6px 0 16px; border-radius: 2px; font: 500 15px/1 var(--body); text-decoration: none;
  transition: transform 120ms steps(2, end), box-shadow 120ms steps(2, end); }
.btn i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 4px; transition: transform 120ms steps(2, end); }
.btn i svg { width: 12px; height: 12px; }
.btn-a { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--accent-2); }
.btn-a i { background: var(--accent); color: var(--on-accent); }
.btn-b { color: var(--ink); background: var(--halo); box-shadow: inset 0 0 0 1.5px var(--ink), 4px 4px 0 var(--ink); }
.btn-b i { background: var(--line); }
.btn:is(:hover, :focus-visible) { transform: translate(-2px, -2px); }
.btn:is(:hover, :focus-visible) i { transform: translateX(3px); }
.btn-a:is(:hover, :focus-visible) { box-shadow: 6px 6px 0 var(--accent-2); }
.btn-b:is(:hover, :focus-visible) { box-shadow: inset 0 0 0 1.5px var(--ink), 6px 6px 0 var(--ink); }
.btn:active { transform: translate(4px, 4px); transition-duration: 90ms; }
.btn-a:active { box-shadow: 0 0 0 var(--accent-2); }
.btn-b:active { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 var(--ink); }
:is(.btn, .brand, .cp-foot a):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.cp-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-top: 18px; border-top: 1px solid var(--line); font: 400 13px/1.5 var(--mono); color: var(--ink-3); }
.cp-foot a { color: var(--ink-2); text-decoration: underline 1px var(--line-2); text-underline-offset: 0.22em; }
.cp-foot a:hover { text-decoration-color: var(--accent-2); }

@media (prefers-reduced-motion: reduce) { .tag.soon::after { animation: none; } .btn, .btn i { transition: none; } }