/* Generated by the site editor (Design settings). */
:root {
  color-scheme: light;
  --accent: #ff9500;
  --bg: #f6f7f9; --panel: #ffffff; --fg: #1b212c; --muted: #5d6677; --line: #e3e6ec;
  --notice-bg: #fff4d6; --notice-fg: #6b4d00;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);
  --shadow-hover: 0 2px 4px rgba(16, 24, 40, .08), 0 16px 36px rgba(16, 24, 40, .12);
  --radius: 14px; --radius-sm: 10px; --radius-pill: 999px;
  --maxw: 1100px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: var(--font);
}
html[data-theme="dark"] {
  --bg: #0f1216; --panel: #181c23; --fg: #e8eaef; --muted: #9aa3b2; --line: #272c36;
  --notice-bg: rgba(230, 179, 64, .15); --notice-fg: #f0cd78;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, .45), 0 16px 36px rgba(0, 0, 0, .4);
  color-scheme: dark;

}
/* no JavaScript: follow the visitor's device unless the site forces a theme */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
  --bg: #0f1216; --panel: #181c23; --fg: #e8eaef; --muted: #9aa3b2; --line: #272c36;
  --notice-bg: rgba(230, 179, 64, .15); --notice-fg: #f0cd78;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, .45), 0 16px 36px rgba(0, 0, 0, .4);
  color-scheme: dark;

  }
}
html.font-serif { --font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; }
html.font-rounded { --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, sans-serif; }
html.font-mono { --font: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace; }
html.corners-soft { --radius: 8px; --radius-sm: 6px; --radius-pill: 8px; }
html.corners-square { --radius: 2px; --radius-sm: 2px; --radius-pill: 2px; }
html.width-narrow { --maxw: 860px; }
html.width-wide { --maxw: 1380px; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 var(--font); transition: background .2s, color .2s; }
img, video { max-width: 100%; display: block; }
a { color: var(--accent); }
main { max-width: var(--maxw); margin: 0 auto; padding: 0 20px 64px; }
h1, h2, h3 { font-family: var(--font-head); }

.preview-bar { background: var(--notice-bg); color: var(--notice-fg); text-align: center; font-size: 14px; padding: 6px 12px; }

/* ---------------------------------------------------------------- header / footer zones */
.zones { max-width: var(--maxw); margin: 0 auto; padding: 18px 20px; display: grid;
         grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px 20px; }
.zone { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; min-width: 0; }
.zone-left { justify-self: start; }
.zone-center { justify-self: center; justify-content: center; }
.zone-right { justify-self: end; justify-content: flex-end; }
.zone:empty { display: none; }
@media (max-width: 720px) {
  .zones { grid-template-columns: 1fr auto; }
  .zone-center { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
}
.topnav.bar { background: var(--panel); box-shadow: var(--shadow); margin-bottom: 8px; }
.topnav.sticky { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent);
                 backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.topnav.bar.sticky { background: color-mix(in srgb, var(--panel) 92%, transparent); }
/* frosted glass over a moving canvas makes the browser re-blur every frame; a page with the animated hero gets a plain bar */
body:has(.lab-canvas) .topnav.sticky { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--bg) 96%, transparent); }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: var(--fg);
         text-decoration: none; letter-spacing: -.02em; }
.brand-logo { height: 36px; width: auto; border-radius: var(--radius-sm); }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { color: var(--muted); text-decoration: none; padding: 6px 12px; border-radius: var(--radius-pill); font-weight: 600; font-size: 15px; }
.nav a:hover { color: var(--fg); background: var(--panel); }
.nav a.on { color: var(--fg); background: var(--panel); box-shadow: var(--shadow); }
.topnav.bar .nav a:hover, .topnav.bar .nav a.on { background: var(--bg); box-shadow: none; }
.zone-text { color: var(--muted); font-size: 14px; }
.zone-links { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; }
.zone-links a { color: var(--muted); font-size: 14px; }
.zone-links a:hover { color: var(--accent); }
.zones .btn { padding: 8px 14px; font-size: 14px; }

/* dark mode toggle: only shown when JavaScript can make it work */
.theme-toggle { display: none; align-items: center; gap: 8px; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 14px;
                background: var(--panel); color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--line);
                border-radius: var(--radius-pill); height: 38px; min-width: 38px; padding: 0 10px; justify-content: center; }
html.js .theme-toggle { display: inline-flex; }
.theme-toggle:hover { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); }
.theme-toggle .tt-icon { font-size: 17px; line-height: 1; }
html[data-theme="dark"] .tt-moon, html[data-theme="dark"] .tt-to-dark,
html:not([data-theme="dark"]) .tt-sun, html:not([data-theme="dark"]) .tt-to-light { display: none; }

/* ---------------------------------------------------------------- home page sections */
.block { margin: 0 0 28px; }
.align-center { text-align: center; }
.align-center .tagline, .align-center .intro { margin-left: auto; margin-right: auto; }
.hero { padding: 48px 0 12px; }
.hero h1 { font-size: clamp(2.4rem, 7vw, 4.2rem); line-height: 1.05; margin: 0; letter-spacing: -.035em; }
.hero h1::after { content: ""; display: block; width: 56px; height: 5px; margin-top: 18px; background: var(--accent); border-radius: 3px; }
.hero.align-center h1::after { margin-left: auto; margin-right: auto; }
.tagline { font-size: 1.25rem; color: var(--muted); margin: 18px 0 0; max-width: 40em; }
.intro { margin-top: 12px; max-width: 42em; }
.hero .btn { margin-top: 24px; }
.section-title { font-size: 1.5rem; letter-spacing: -.02em; margin: 12px 0 16px; }
.text-block h2 { font-size: 1.5rem; letter-spacing: -.02em; margin: 0 0 4px; }
.text-block .prose { margin-top: 8px; max-width: 46em; }
.text-block.align-center .prose { margin-left: auto; margin-right: auto; }
.image-block { margin-left: 0; margin-right: 0; }
.image-block img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
.video-block { margin-left: 0; margin-right: 0; }
.video-block video { display: block; width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); background: #000; }
.video-block.width-normal { max-width: 760px; margin-left: auto; margin-right: auto; }
.image-block.width-normal { max-width: 760px; margin-left: auto; margin-right: auto; }
.image-block.width-full img { border-radius: 0; }
.image-block.width-full { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.image-block figcaption { color: var(--muted); font-size: 14px; margin-top: 8px; text-align: center; }
.buttons-block { display: flex; flex-wrap: wrap; gap: 10px; }
.buttons-block.align-center { justify-content: center; }
.divider { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
.spacer-small { height: 16px; } .spacer-medium { height: 48px; } .spacer-large { height: 96px; }
.demo-block .demo { margin-bottom: 14px; }

.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; font-weight: 700;
       text-decoration: none; padding: 11px 18px; border-radius: var(--radius-sm); border: 0; cursor: pointer; font-size: 15px; }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); filter: none; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }
.card { background: var(--panel); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
        text-decoration: none; color: inherit; display: flex; flex-direction: column;
        transition: transform .18s ease, box-shadow .18s ease; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.grid .card.featured { grid-column: span 2; }
@media (max-width: 680px) { .grid .card.featured { grid-column: auto; } }
.card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--line); }
.card-img.placeholder { display: grid; place-items: center; font-size: 56px; font-weight: 800; color: #fff;
                        background: linear-gradient(135deg, var(--accent), #2b3445); }
.card-body { padding: 16px 18px 18px; }
.card-body h3 { margin: 0 0 6px; font-size: 1.2rem; letter-spacing: -.01em; }
.card-body p { margin: 0 0 12px; color: var(--muted); font-size: 15px; }
.list { display: flex; flex-direction: column; gap: 14px; }
.list .card { flex-direction: row; align-items: stretch; }
.list .card-img { width: 240px; flex: none; aspect-ratio: 4 / 3; }
@media (max-width: 600px) { .list .card { flex-direction: column; } .list .card-img { width: 100%; aspect-ratio: 16 / 10; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--bg); color: var(--muted);
        box-shadow: inset 0 0 0 1px var(--line); }
.chip.accent { background: var(--accent); color: #fff; box-shadow: none; }
.chip.warn { background: var(--notice-bg); color: var(--notice-fg); box-shadow: none; }
.empty { color: var(--muted); font-size: 1.1rem; padding: 40px 0; }

/* ---------------------------------------------------------------- project pages */
.project { max-width: 860px; margin: 0 auto; padding-top: 12px; }
.back { display: inline-block; margin: 8px 0 18px; color: var(--muted); text-decoration: none; font-weight: 600; }
.back:hover { color: var(--accent); }
.project h1, .demo-page h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0; letter-spacing: -.03em; line-height: 1.1; }
.lede { font-size: 1.2rem; color: var(--muted); margin: 12px 0 16px; }
.links { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.notice { background: var(--notice-bg); color: var(--notice-fg); padding: 10px 14px; border-radius: var(--radius-sm); }
.hero-img { border-radius: var(--radius); margin: 28px 0; box-shadow: var(--shadow); width: 100%; }
.try h2, .gallery h2, .videos h2 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 36px 0 12px; }

.prose { margin-top: 28px; font-size: 1.05rem; }
.prose h1, .prose h2, .prose h3 { letter-spacing: -.02em; line-height: 1.25; margin: 1.6em 0 .5em; }
.prose img { border-radius: var(--radius-sm); margin: 1.2em 0; }
.prose pre { background: var(--panel); padding: 14px 16px; border-radius: var(--radius-sm); overflow-x: auto; box-shadow: inset 0 0 0 1px var(--line); }
.prose code { font-size: .92em; }
.prose blockquote { margin: 1.2em 0; padding: 4px 18px; border-left: 4px solid var(--accent); color: var(--muted); }
.prose table { border-collapse: collapse; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 6px 10px; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.gallery-grid img { aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); width: 100%; transition: transform .15s; }
.gallery-grid a:hover img { transform: scale(1.02); }
.video-item { margin: 0 0 22px; }
.video-item video { display: block; width: 100%; max-height: 80vh; background: #000; border-radius: var(--radius-sm); }
.video-item figcaption { margin-top: 8px; color: var(--muted); font-size: 15px; }
.video-item figcaption b { display: block; color: inherit; font-weight: 600; filter: brightness(1.4); }
.lightbox-overlay { position: fixed; inset: 0; background: rgba(8, 10, 14, .9); display: grid; place-items: center;
                    z-index: 50; padding: 24px; cursor: zoom-out; }
.lightbox-overlay img { max-height: 92vh; border-radius: 8px; }

/* ---------------------------------------------------------------- demos */
.demo { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.demo video { width: 100%; background: #000; }
.demo-caption { margin: 0; padding: 12px 16px; color: var(--muted); font-size: 15px; }
.viewer { position: relative; height: min(62vh, 520px); background: radial-gradient(ellipse at 50% 35%, var(--panel), var(--bg)); }
.demo-big .viewer { height: min(74vh, 720px); }
.viewer canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.viewer canvas:active { cursor: grabbing; }
.viewer-status { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); pointer-events: none; }
.viewer-status:empty { display: none; }
.viewer-picker { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.viewer-picker button { border: 0; padding: 6px 12px; border-radius: var(--radius-pill); font-weight: 600; cursor: pointer;
                        background: var(--panel); color: var(--fg); box-shadow: var(--shadow); font-size: 13px; }
.viewer-picker button.on { background: var(--accent); color: #fff; }
.viewer-hint { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; margin: 0; font-size: 12.5px; color: var(--muted); pointer-events: none; }
.slideshow { position: relative; aspect-ratio: 16 / 9; background: #000; }
.demo-big .slideshow { aspect-ratio: 16 / 8; }
.slideshow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .6s ease; }
.slideshow img.on { opacity: 1; }
.slide-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.slide-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, .45); cursor: pointer; }
.slide-dots button.on { background: #fff; }
.webapp iframe { width: 100%; height: min(70vh, 640px); border: 0; display: block; background: #fff; }
.demo-big .webapp iframe { height: min(78vh, 800px); }
.webapp .btn { margin: 12px 16px; }
.demo-page { padding-top: 24px; }
.demo-page .demo { margin: 24px 0; }
.kicker { text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 700; color: var(--accent); margin: 0 0 6px; }

/* ---------------------------------------------------------------- pages, menus, embeds */
.nav-group { position: relative; }
.nav-group summary { list-style: none; cursor: pointer; color: var(--muted); padding: 6px 12px; border-radius: var(--radius-pill);
                     font-weight: 600; font-size: 15px; user-select: none; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after { content: " \25BE"; font-size: 12px; }
.nav-group summary:hover, .nav-group[open] summary, .nav-group.on summary { color: var(--fg); background: var(--panel); }
.nav-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 190px; z-index: 40; background: var(--panel);
            border-radius: var(--radius-sm); box-shadow: var(--shadow-hover); padding: 6px; display: flex; flex-direction: column; }
.zone-left .nav-menu, .zone-center .nav-menu { right: auto; left: 0; }
.nav-menu a { border-radius: calc(var(--radius-sm) - 2px); }
.crumbs { font-size: 14px; color: var(--muted); padding-top: 18px; }
.crumbs a { color: var(--muted); }
.crumbs span { margin: 0 4px; opacity: .6; }
.page-head { padding: 28px 0 8px; }
.page-head h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0; letter-spacing: -.03em; line-height: 1.1; }
.page-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.page-link { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--panel); border-radius: var(--radius);
             box-shadow: var(--shadow); text-decoration: none; color: var(--fg); transition: transform .15s; }
.page-link:hover { transform: translateY(-2px); }
.page-link span { color: var(--muted); font-size: 14px; }
.embed { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.embed-frame { width: 100%; height: 640px; border: 0; display: block; background: #fff; }
/* browser-app demos: on the project page a button to its own page; on that page the app, then the write-up */
.app-launch { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 22px 24px; background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); }
.app-launch p { margin: 0; color: var(--muted); }
.demo-page-app .gt-app { margin-top: 18px; }
.demo-page .app-about { margin: 36px 0 24px; }
.support-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  margin: 28px 0; padding: 16px 20px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--panel); }
.support-card p { margin: 0; flex: 1 1 260px; }
.foot-support { text-align: center; margin: 10px 0 0; font-size: 14px; }
.foot-support a { color: var(--muted); text-decoration: none; }
.foot-support a:hover { color: var(--accent); }
/* an uploaded browser app (a game): its own page in a frame, with a Full screen button */
.app-frame-wrap { margin-top: 18px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #000; }
.app-frame { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 82vh; min-height: 420px; border: 0; background: #000; }
.app-frame-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px;
  background: var(--panel); color: var(--muted); font-size: 13.5px; }
.app-frame-bar .btn { padding: 6px 12px; font-size: 13.5px; }
.app-frame-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* phones: a Play button to the full-page version instead of the framed app */
.app-phone-play { display: none; }
@media (pointer: coarse) and (max-width: 1024px) {
  .app-frame-wrap { display: none; }
  .app-phone-play { display: grid; place-items: center; gap: 6px; position: relative; margin-top: 18px; padding: 28px 16px;
    min-height: 200px; border-radius: var(--radius); overflow: hidden; background: #000; color: #fff; text-decoration: none;
    box-shadow: var(--shadow); text-align: center; }
  .app-phone-play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
  .app-phone-play-btn { position: relative; padding: 12px 22px; border-radius: 999px; background: var(--accent); color: #111;
    font-weight: 700; font-size: 17px; }
  .app-phone-play-sub { position: relative; font-size: 13.5px; opacity: .9; }
}
.embed-frame.bare { background: transparent; }
.embed-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13.5px; color: var(--muted); border-bottom: 1px solid var(--line); }
.embed-bar a { margin-left: auto; color: var(--muted); }
.embed-bar a:hover { color: var(--accent); }
.embed-bar.end { border-bottom: 0; border-top: 1px solid var(--line); }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); animation: livepulse 2s infinite; }
@keyframes livepulse { 50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } }
/* the Demos menu item stands out: an accent pill with a pulsing live dot */
.nav a.nav-demo, .nav-group.nav-demo > summary { color: #fff; background: var(--accent); box-shadow: var(--shadow); }
.nav a.nav-demo:hover, .nav a.nav-demo.on, .nav-group.nav-demo > summary:hover, .nav-group.nav-demo[open] > summary,
.nav-group.nav-demo.on > summary { color: #fff; background: var(--accent); filter: brightness(1.08); }
.nav a.nav-demo::before, .nav-group.nav-demo > summary::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px;
  border-radius: 50%; background: #fff; vertical-align: 1px; animation: navlive 2s infinite; }
@keyframes navlive { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 60%, 100% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .nav a.nav-demo::before, .nav-group.nav-demo > summary::before { animation: none; } }
/* "Try it" on a demo card (the projects section showing only live demos) */
.card-go { display: inline-block; margin-top: 10px; font-weight: 700; color: var(--accent); }
/* in the live-demos section every demo gets the same size card (a featured project would take two columns) */
.demos-block .grid .card.featured { grid-column: auto; }
/* the demo cards share the row between them (two demos = two wide cards, no empty third column) */
.demos-block .grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.demo .live-embed { border-radius: 0; box-shadow: none; }

/* ---------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.foot .zones { padding-top: 26px; padding-bottom: 40px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------------------------------------------------------------- engineering hero ("lab" section) */
/* the hero is edge to edge (100vw), which is a scrollbar's width wider than the page: clip it */
html:has(.lab) { overflow-x: clip; }
.lab { --lab-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
       position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center;
       margin: 0 0 40px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
       min-height: min(84vh, 780px); border-bottom: 1px solid var(--line);
       background: var(--bg) radial-gradient(ellipse 70% 60% at 30% 40%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); }
.lab-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; }
/* faint drafting grid over the board, faded toward the edges */
.lab::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
               background-image: linear-gradient(color-mix(in srgb, var(--fg) 6%, transparent) 1px, transparent 1px),
                                 linear-gradient(90deg, color-mix(in srgb, var(--fg) 6%, transparent) 1px, transparent 1px);
               background-size: 52px 52px; background-position: center;
               -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 40%, transparent 100%);
               mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 40%, transparent 100%); }
/* keeps the words readable over the busy part of the board */
.lab::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
              background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 78%, transparent) 0%, color-mix(in srgb, var(--bg) 40%, transparent) 55%, transparent 100%); }
.lab.align-center::after { background: radial-gradient(ellipse 60% 70% at 50% 50%, color-mix(in srgb, var(--bg) 78%, transparent), transparent 100%); }
.lab-inner { position: relative; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(56px, 10vh, 120px) 20px clamp(72px, 12vh, 140px); }
.lab.align-center .lab-inner { text-align: center; }
.lab-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; font-family: var(--lab-mono); font-size: 12.5px;
              font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
              padding: 6px 12px 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill);
              background: color-mix(in srgb, var(--panel) 92%, transparent); }
.lab-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .22); animation: livepulse 2s infinite; }
.lab-title { margin: 0; font-size: clamp(2.7rem, 8.5vw, 5.6rem); line-height: .98; letter-spacing: -.045em; font-weight: 800; max-width: 12em; }
.lab.align-center .lab-title { margin-left: auto; margin-right: auto; }
.lab-rotator { margin: 18px 0 0; font-family: var(--lab-mono); font-size: clamp(1.15rem, 3vw, 1.85rem); font-weight: 600;
               color: var(--accent); letter-spacing: -.01em; min-height: 1.5em; }
.lab-rotator::before { content: "> "; color: var(--muted); }
.lab-caret { display: inline-block; width: .55em; height: 1.05em; margin-left: 3px; vertical-align: -0.15em; background: var(--accent); animation: labcaret 1.05s steps(1) infinite; }
.lab-sub { margin: 22px 0 0; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--muted); max-width: 40em; line-height: 1.55; }
.lab.align-center .lab-sub { margin-left: auto; margin-right: auto; }
.lab-body { margin-top: 14px; max-width: 42em; }
.lab.align-center .lab-body { margin-left: auto; margin-right: auto; }
.lab-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.lab.align-center .lab-actions { justify-content: center; }
.lab-actions .btn { padding: 13px 22px; font-size: 15.5px; }
.lab-actions .btn.ghost { background: color-mix(in srgb, var(--panel) 90%, transparent); }
.lab-chips { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 46em; }
.lab.align-center .lab-chips { justify-content: center; margin-left: auto; margin-right: auto; }
.lab-chips li { font-family: var(--lab-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; padding: 5px 11px;
                border-radius: 6px; color: var(--muted); border: 1px solid var(--line);
                background: color-mix(in srgb, var(--panel) 72%, transparent); transition: color .15s, border-color .15s, transform .15s; }
.lab-chips li::before { content: "#"; opacity: .45; margin-right: 1px; }
.lab-chips li:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
/* the readout: only shown once JavaScript is filling it with real numbers */
.lab-hud { display: none; position: absolute; right: 18px; bottom: 14px; margin: 0; z-index: 1;
           grid-template-columns: auto auto; gap: 2px 12px; font-family: var(--lab-mono); font-size: 11px; line-height: 1.5;
           color: var(--muted); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
           background: color-mix(in srgb, var(--panel) 94%, transparent); }
html.js .lab-ready .lab-hud { display: grid; }
.lab-hud dt { text-transform: uppercase; letter-spacing: .1em; opacity: .7; }
.lab-hud dd { margin: 0; color: var(--fg); font-variant-numeric: tabular-nums; text-align: right; }
@keyframes labcaret { 50% { opacity: 0; } }
@media (max-width: 720px) {
  .lab { min-height: min(78vh, 640px); }
  .lab-hud { display: none !important; }
  .lab-title { max-width: none; }
  .lab-kicker { font-size: 11px; letter-spacing: .09em; padding: 5px 10px 5px 9px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .lab-caret, .lab-dot { animation: none; } }

/* ---------------------------------------------------------------- visitor counter: a split-flap display */
.counter-block { margin: 8px 0 36px; }
.counter-block.size-small .flap { --fh: 48px; --fw: 34px; --ff: 34px; }
.counter-block.size-large .flap { --fh: 96px; --fw: 66px; --ff: 68px; }
.counter-block.align-center { text-align: center; }
.flap { --fh: 72px; --fw: 50px; --ff: 50px; display: inline-flex; gap: 6px; padding: 10px; border-radius: 12px; vertical-align: top;
        background: color-mix(in srgb, var(--panel) 75%, #000 25%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px rgba(0, 0, 0, .25); }
.flap-digit { position: relative; width: var(--fw); height: var(--fh); perspective: 420px; color: var(--fg);
              font: 700 var(--ff)/var(--fh) ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
              font-variant-numeric: tabular-nums; }
/* the hinge */
.flap-digit::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(0, 0, 0, .55); z-index: 4; }
.flap-half { position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; background: var(--panel); backface-visibility: hidden; }
.flap-half.top { top: 0; border-radius: 6px 6px 0 0; transform-origin: 50% 100%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.flap-half.bottom { bottom: 0; border-radius: 0 0 6px 6px; transform-origin: 50% 0; background: color-mix(in srgb, var(--panel) 92%, #000 8%); }
.flap-half > span { position: absolute; left: 0; width: 100%; height: var(--fh); text-align: center; }
.flap-half.bottom > span { top: calc(var(--fh) / -2); }
.flap-half.flip { z-index: 3; }
.flap-half.bottom.flip { transform: rotateX(90deg); }
.flap-digit.go .flap-half.top.flip { animation: flap-top .14s ease-in forwards; }
.flap-digit.go .flap-half.bottom.flip { animation: flap-bottom .14s ease-out .14s forwards; }
@keyframes flap-top { to { transform: rotateX(-90deg); } }
@keyframes flap-bottom { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
.flap-label { margin: 12px 0 0; color: var(--muted); font-size: 15px; letter-spacing: .02em; }
@media (max-width: 720px) {
  .counter-block .flap { --fh: 52px; --fw: 36px; --ff: 36px; }
  .counter-block.size-large .flap { --fh: 64px; --fw: 44px; --ff: 46px; }
  .flap { gap: 4px; padding: 8px; }
}
@media (prefers-reduced-motion: reduce) { .flap-digit.go .flap-half.flip { animation: none; } }
/* the small board in the engineering hero's corner, stacked above the readout */
.flap.flap-small { --fh: 34px; --fw: 24px; --ff: 23px; gap: 3px; padding: 6px; border-radius: 8px; }
.flap.flap-small .flap-half.top { border-radius: 4px 4px 0 0; }
.flap.flap-small .flap-half.bottom { border-radius: 0 0 4px 4px; }
.flap.flap-small .flap-digit::after { height: 1px; margin-top: 0; }
.lab-visitors { position: absolute; right: 18px; bottom: 132px; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.lab-visitors-label { font-family: var(--lab-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lab:has(.lab-visitors) .lab-inner { padding-bottom: clamp(120px, 18vh, 210px); }
@media (max-width: 720px) {
  .lab-visitors { position: static; align-items: flex-start; padding: 0 20px 36px; margin-top: 6px; }
  .lab.align-center .lab-visitors { align-items: center; }
  .lab:has(.lab-visitors) .lab-inner { padding-bottom: 24px; }
}

/* the message form: honeypot hidden, one line after sending */
.site-form .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.site-form.sent > label, .site-form.sent > button { display: none; }
.form-done { margin: 10px 0 0; font-weight: 600; color: var(--accent); }
.form-done.err { color: #ef4444; }

/* the Demos page: every project with a demo, visitors pick one (2026-09-25) */
.demos-page { padding-top: 24px; }
.demos-page h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0; letter-spacing: -.03em; line-height: 1.1; }
.demo-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 28px 0 48px; }
.demo-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--radius); background: var(--panel);
             color: var(--fg); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s, transform .15s; }
.demo-card:hover, .demo-card:focus-visible { box-shadow: inset 0 0 0 1.5px var(--accent); transform: translateY(-2px); }
.demo-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); background: var(--line); }
.demo-card-kind { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.demo-card b { font-size: 1.15rem; }
.demo-card-sum { color: var(--muted); font-size: .95rem; }
.demo-card-go { margin-top: auto; padding-top: 6px; color: var(--accent); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .demo-card { transition: none; } .demo-card:hover { transform: none; } }

/* home screen + notifications panel (site.js) */
.hs-panel { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; max-width: 460px; margin: 0 auto;
            background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px;
            transform: translateY(150%); transition: transform .3s ease; }
.hs-panel.on { transform: none; }
.hs-panel p { margin: 6px 0 12px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.hs-row { display: flex; gap: 8px; justify-content: flex-end; }
.hs-share { width: 18px; height: 18px; vertical-align: -3px; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .hs-panel { transition: none; } }