:root {
  color-scheme: light;
  --background: #f1eee8;
  --surface: #fffdf9;
  --surface-muted: #e8eeeb;
  --line: #d4ddd9;
  --ink: #17242b;
  --muted: #617079;
  --accent: #156f68;
  --accent-soft: #d7ece6;
  --orange: #d97846;
  --blue: #355e8a;
}

html { scroll-behavior: smooth; }
body {
  background: var(--background);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.wrap { max-width: 1260px; padding: 0 32px; }
.topbar {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.brand { color: var(--ink); letter-spacing: .16em; }
.brand small { color: var(--muted); }
.monogram { border-color: #a9bbb5; }
.top-links { gap: 22px; }
.top-links a { color: var(--muted); font-weight: 600; }
.top-links a:hover { color: var(--accent); }
.share-button {
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  padding: 9px 16px;
  font-weight: 650;
}
.share-button span { color: #b7e1d5; }
.share-button:hover { background: #2b3c45; }
.intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 405px;
  margin-top: 28px;
  padding: 60px 54px;
  border: 1px solid #c5d1cd;
  border-radius: 22px;
  align-items: end;
  background:
    linear-gradient(90deg, rgba(10, 29, 38, .98) 0%, rgba(10, 29, 38, .88) 34%, rgba(10, 29, 38, .22) 74%, rgba(10, 29, 38, .1) 100%),
    url("hero-higgsfield.png") center / cover no-repeat;
  box-shadow: 0 18px 50px rgba(21, 43, 48, .12);
}
.intro > * { position: relative; z-index: 1; }
.intro > div:first-child { max-width: 720px; }
.eyebrow { color: #a9e2d4; letter-spacing: .19em; }
h1 { color: #fff; font-size: clamp(2.25rem, 4.4vw, 4.05rem); line-height: 1.05; letter-spacing: -.055em; }
h1 em { color: #c3e6dc; }
.intro p:last-child { max-width: 590px; color: #d3e1df; font-size: 1.02rem; }
.collection-count {
  color: #d3e1df;
  border-left-color: rgba(217, 238, 232, .35);
  padding-left: 26px;
}
.collection-count strong { color: #fff; font-size: 3.3rem; }
.collection-nav { padding: 22px 0 34px; }
.collection-nav a {
  border-color: #b4c6c2;
  border-radius: 999px;
  padding: 9px 15px;
  color: var(--ink);
  background: rgba(255, 253, 249, .7);
}
.collection-nav a:first-child { background: var(--accent-soft); border-color: #96c9bc; }
.collection-nav a:hover { background: #dce9e5; }
.collection-nav a span { color: var(--accent); }
.nav-note { color: var(--muted); }
.section-heading { margin-bottom: 18px; }
.section-index { color: var(--accent); font-weight: 700; }
.section-heading h2 { font-size: 1.75rem; }
.section-heading > p { color: var(--muted); }
.project {
  border-color: var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(30, 54, 58, .06);
}
.project-visual { background: #cad5d2; }
.visual-tag {
  border: 0;
  border-radius: 999px;
  background: rgba(20, 34, 40, .82);
  color: #fff;
  padding: 6px 10px;
}
.practice-card { border-color: #b8d3cb; background: var(--surface); }
.practice-card .project-visual { border-right-color: var(--line); }
.practice-card .project-body { padding: 30px 32px; }
.category { color: var(--accent); }
.description { color: var(--muted); }
.topics li { border-color: #c7d6d2; color: #53656b; }
.open-lab {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 11px 17px;
}
.open-lab:hover { background: #0f5d57; }
.project-bottom small { color: var(--muted); }
.practice-code {
  border: 1px solid rgba(169, 226, 212, .5);
  border-radius: 10px;
  background: rgba(12, 34, 43, .9);
  color: #cbefe5;
}
.course-link { border-top-color: var(--line); }
.course-link .book-icon, .course-link b { color: var(--accent); }
.course-link strong { color: var(--ink); }
.course-link small { color: var(--muted); }
.demo-card { background: var(--surface); }
.demo-card .project-visual { border-right-color: var(--line); }
.demo-card .open-lab { background: transparent; color: var(--accent); }
.demo-card .open-lab:hover { color: var(--blue); }
.robots .category { color: var(--orange); }
.portique .category { color: var(--blue); }
.satellite .category { color: #7562a0; }
.guide { border-color: var(--line); }
.guide-icon, .guide a { color: var(--accent); }
.guide p { color: var(--muted); }
footer { color: #77868b; }
.share-panel { border-color: var(--line); background: var(--surface); }
.share-panel input { border-color: #becdc8; background: #fff; color: var(--ink); }
.share-panel p { color: var(--muted); }
.skip { background: var(--accent); color: #fff; }
@media (max-width: 680px) {
  .wrap { padding: 0 17px; }
  .intro { min-height: 470px; margin-top: 17px; padding: 32px 24px; border-radius: 17px; align-items: end; background-position: 62% center; }
  h1 { font-size: 2.35rem; }
  .intro p:last-child { font-size: .92rem; }
  .collection-nav { padding-top: 18px; }
  .collection-nav a { padding: 8px 12px; }
}