:root {
  color-scheme: light;
  --paper: #f7f6ee;
  --white: #fffefa;
  --ink: #142037;
  --muted: #4e596b;
  --line: #d9dcd2;
  --lime: #dbf975;
  --navy: #15223b;
  --navy-light: #202e4a;
  --coral: #f79c89;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --frame: 75rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 1.25rem; }
body { margin: 0; overflow-wrap: anywhere; background: var(--paper); color: var(--ink); font: 1rem/1.55 var(--body); }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
svg { display: block; }
code, kbd { font-family: var(--mono); }

:focus-visible { outline: .1875rem solid #af3e24; outline-offset: .3125rem; }

.container { width: min(var(--frame), 100% - 2rem); margin-inline: auto; }

.skip-link {
  position: absolute;
  z-index: 5;
  top: .75rem;
  left: 1rem;
  transform: translateY(calc(-100% - 1rem));
  padding: .65rem 1rem;
  border-radius: .4rem;
  background: var(--white);
  font-weight: 800;
}
.skip-link:focus { transform: translateY(0); }

.portal-header { border-bottom: 1px solid var(--line); }
.header-inner {
  min-height: 4.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  justify-content: space-between;
  align-items: center;
  padding-block: .55rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  width: fit-content;
  font-weight: 850;
  font-size: 1.15rem;
  letter-spacing: -.055em;
  text-decoration: none;
  white-space: nowrap;
}
.brand img { width: 2.35rem; height: 2.35rem; flex: 0 0 auto; }
.brand-dev { color: #526042; }
.portal-nav {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}
.portal-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .4rem .6rem;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}
.portal-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .24em; }
.portal-nav .module-link {
  border: 1px solid #c9cfc3;
  border-radius: .62rem;
  background: var(--white);
  color: var(--ink);
}
.portal-nav .module-link:hover { background: #eceee5; }

.button {
  display: inline-flex;
  gap: .65rem;
  justify-content: center;
  align-items: center;
  min-height: 3.125rem;
  padding: .7rem 1.03rem;
  border: 1px solid transparent;
  border-radius: .62rem;
  font-weight: 750;
  line-height: 1.3;
  text-decoration: none;
}
.button { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.button-secondary { border-color: #c9cfc3; background: var(--white); }
.button-secondary:hover { background: #eceee5; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  padding-block: clamp(2.65rem, 7vw, 6rem) clamp(2rem, 4vw, 3.8rem);
}
.eyebrow {
  display: flex;
  gap: .65rem;
  align-items: center;
  font: 750 clamp(.66rem, 1.45vw, .77rem)/1.55 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.eyebrow-mark {
  width: .68rem;
  height: .68rem;
  flex: 0 0 auto;
  border-radius: .17rem;
  background: var(--lime);
  box-shadow: inset 0 0 0 1px #83964b;
}
.hero h1 {
  margin-block: 1rem 1.05rem;
  font-size: clamp(3rem, 10vw, 6.5rem);
  line-height: .93;
  letter-spacing: -.084em;
  font-weight: 870;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.hero h1 .highlight {
  display: inline-block;
  padding: .015em .095em .105em .07em;
  margin: 0 .02em -.105em -.07em;
  border-radius: .105em;
  background: var(--lime);
}
.hero-copy > p {
  max-width: 31rem;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.17rem);
  line-height: 1.58;
}
.hero-actions { display: grid; gap: .6rem; max-width: 37rem; margin-top: 1.5rem; }
.hero-offer {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: fit-content;
  max-width: 100%;
  margin-bottom: .2rem;
  padding: .55rem .72rem;
  border: 1px solid #bdd45d;
  border-radius: .55rem;
  background: var(--lime);
  color: var(--ink);
  font-size: .89rem;
  line-height: 1.3;
}
.hero-offer svg { flex: 0 0 auto; }
.hero-actions h2 { font-size: .95rem; font-weight: 800; }
.hero-workshops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.hero-workshop {
  justify-content: space-between;
  min-height: 3.6rem;
  padding: .55rem .7rem;
  gap: .35rem;
  font-size: .9rem;
}
.hero-workshop small { display: block; margin-top: .18rem; color: var(--muted); font-size: .74rem; font-weight: 650; }
.hero-workshop-arrow { flex: 0 0 auto; color: #526042; }
.hero-workshop[data-resume] { background: #eef5d7; border-color: #a4b573; }
.hero-workshop[data-resume]:hover { background: #e0edb6; }
.hero-actions-note { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .8rem; }
.hero-actions-note > a { font-size: .82rem; font-weight: 700; text-underline-offset: .2em; }
@media (min-width: 66rem) {
  .hero-workshops { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hero-caption {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  color: var(--muted);
  font-size: .77rem;
  font-weight: 620;
}
.hero-caption::before {
  content: "";
  height: .4rem;
  width: .4rem;
  flex: 0 0 auto;
  margin-top: .4rem;
  border-radius: 50%;
  background: #67784a;
}

.visual {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  min-height: 18.3rem;
  margin: 0;
  overflow: hidden;
  border: 1px solid #33415a;
  border-radius: 1rem;
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 1.1rem 2.2rem #141f3521;
}
.visual-top, .visual-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .65rem;
  align-items: center;
  justify-content: space-between;
  padding: .72rem 1rem;
  font: 650 clamp(.57rem, 1.4vw, .69rem)/1.5 var(--mono);
  letter-spacing: .075em;
  color: #d2dbe8;
}
.visual-top { border-bottom: 1px solid #485773; }
.visual-bottom { border-top: 1px solid #485773; }
.visual-leds { display: inline-flex; gap: .28rem; }
.visual-leds i { height: .46rem; width: .46rem; border-radius: 50%; background: #8193b0; }
.visual-leds i:first-child { background: var(--coral); }
.visual-leds i:nth-child(2) { background: #f8cf82; }
.visual-leds i:nth-child(3) { background: var(--lime); }
.visual-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 12.8rem;
  overflow: hidden;
  background-image: radial-gradient(circle at 51% 46%, #263650 0%, #17253d 67%), linear-gradient(#8192af26 1px, transparent 1px);
}
.visual-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#9db1d02c 1px, transparent 1px), linear-gradient(90deg, #9db1d02c 1px, transparent 1px);
  background-size: 1.75rem 1.75rem;
  mask-image: radial-gradient(ellipse, black, #0008 73%, transparent);
}
.visual-spiral { position: relative; width: min(72%, 25rem); height: auto; padding-block: .7rem; }
.visual-tag {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .37rem .55rem;
  border: 1px solid #536480;
  border-radius: .35rem;
  background: #1b2942;
  color: var(--white);
  box-shadow: 0 .4rem 1rem #101a2f50;
  font: 700 clamp(.59rem, 1.35vw, .78rem)/1.2 var(--mono);
}
.visual-tag code { color: var(--lime); }
.visual-tag.tag-structure { top: 13%; left: 5%; transform: rotate(-5deg); }
.visual-tag.tag-main { bottom: 12%; left: 8%; transform: rotate(3deg); }
.visual-tag.tag-form { top: 23%; right: 5%; transform: rotate(5deg); }
.visual-tag.tag-form code { color: #ffc0b1; }

.numbers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: #efefe7;
  border-radius: .7rem;
  overflow: hidden;
}
.stat { min-width: 0; padding: .72rem .82rem .8rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat:nth-child(2n) { border-right: 0; }
.stat:nth-last-child(-n+2) { border-bottom: 0; }
.stat strong { display: block; font-size: clamp(1.5rem, 3.5vw, 2.15rem); line-height: 1.1; font-weight: 830; letter-spacing: -.065em; }
.stat span { display: block; margin-top: .22rem; color: var(--muted); font: 700 clamp(.61rem, 1.6vw, .75rem)/1.4 var(--mono); }

.section { padding-block: clamp(3rem, 7vw, 5.9rem); }
.section-title { max-width: 44rem; margin-bottom: clamp(1.45rem, 3.3vw, 2.3rem); }
.section-title h2, .project h2 {
  margin-block: .46rem .65rem;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 850;
  line-height: .99;
  letter-spacing: -.07em;
  text-wrap: balance;
}
.section-title > p, .project-copy > p { max-width: 42rem; color: var(--muted); }

.workshops { display: grid; grid-template-columns: minmax(0,1fr); gap: .75rem; }
.workshop {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: clamp(.98rem, 2.5vw, 1.4rem);
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: var(--white);
}
.workshop.live { border-color: var(--navy); background: var(--navy); color: var(--white); }
.workshop-top { display: flex; align-items: center; justify-content: space-between; gap: .45rem; }
.workshop-logo {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  border-radius: .65rem;
  background: #faf8ef;
}
.workshop-logo img { width: 42px; height: 42px; object-fit: contain; }
.workshop.live.workshop-logic {
  container-type: inline-size;
  background: radial-gradient(ellipse at 95% 80%, #23483f 0%, var(--navy) 64%);
}
.workshop-logic .workshop-top { min-height: 3.5rem; }
.logic-kicker {
  padding: .35rem .6rem;
  border: 1px solid #769583;
  border-radius: .4rem;
  color: var(--lime);
  font: 700 .68rem/1.3 var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.logic-card-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(33%, 11rem);
  grid-template-areas: "title art" "description art";
  align-items: center;
  gap: .65rem clamp(.45rem, 1.5vw, 1rem);
}
.logic-card-content h3 { grid-area: title; align-self: end; }
.logic-card-content p { grid-area: description; align-self: start; }
.logic-illustration { grid-area: art; display: block; width: 100%; height: auto; }
@container (max-width: 24rem) {
  .logic-card-content { grid-template-areas: "title art" "description description"; }
  .logic-card-content h3 { align-self: center; }
}
.workshop-state { color: var(--muted); font: 700 .66rem/1.35 var(--mono); letter-spacing: .045em; text-transform: uppercase; }
.live .workshop-state { color: var(--lime); }
.workshop h3 { font-size: 1.58rem; font-weight: 820; line-height: 1.12; letter-spacing: -.05em; }
.workshop p { max-width: 34rem; color: var(--muted); font-size: .93rem; }
.live p { color: #dce4f2; }
.workshop-link { align-self: flex-start; display: inline-flex; min-height: 2.75rem; align-items: center; gap: .5rem; font-weight: 760; text-underline-offset: .24em; }
.workshop-link:hover { color: var(--lime); }
.live :focus-visible { outline-color: var(--lime); }

.project-section { padding-top: 0; }
.project {
  display: grid;
  align-items: center;
  gap: 1.6rem;
  padding: clamp(1.15rem, 4.8vw, 3.55rem);
  border: 1px solid #d8ddc5;
  border-radius: 1rem;
  background: #eaf0d8;
}
.project-copy { min-width: 0; }
.project-copy > p { margin-bottom: .7rem; }
.project-copy a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-weight: 760; text-underline-offset: .24em; }
.project-links { display: flex; flex-wrap: wrap; column-gap: 1rem; }
.project-copy a:hover { color: #3c4e26; }
.project-steps { display: grid; gap: .44rem; list-style: none; padding: 0; margin: 0; counter-reset: build-step; }
.project-steps li {
  counter-increment: build-step;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .48rem .66rem;
  align-items: start;
  padding: .65rem .75rem;
  border: 1px solid #d4dac2;
  border-radius: .48rem;
  background: #fbfcf5;
}
.project-steps li::before { content: "0" counter(build-step); margin-top: .16rem; color: #536347; font: 750 .75rem/1.2 var(--mono); }
.project-steps strong { display: block; font-size: .92rem; line-height: 1.25; }
.project-steps span { display: block; margin-top: .12rem; color: var(--muted); font-size: .78rem; line-height: 1.45; }

.portal-footer { border-top: 1px solid var(--line); }
.footer-inner {
  display: flex;
  gap: .8rem 1.2rem;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding-block: 1rem;
}
.footer-inner p { color: var(--muted); font-size: .79rem; }
.footer-company {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .45rem;
  margin-block-start: .3rem;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.4;
}
.brand-credit a { text-underline-offset: .2em; }
.footer-inner .brand { font-size: 1.03rem; }
.footer-inner .brand img { width: 1.9rem; height: 1.9rem; }

@media (min-width: 39rem) {
  .container { width: min(var(--frame), 100% - 3rem); }
  .portal-nav { display: flex; width: auto; flex-wrap: wrap; }
  .numbers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat, .stat:nth-child(2n) { padding: .95rem 1.15rem; border-bottom: 0; border-right: 1px solid var(--line); }
  .stat:last-child { border-right: 0; }
}

@media (min-width: 53rem) {
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4.1rem); }
  .hero h1 { font-size: clamp(4rem, 7.35vw, 6.5rem); }
  .visual { min-height: 23.5rem; }
  .workshops { grid-template-columns: 1.18fr 1fr 1fr; }
  .workshops-foundations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workshop { min-height: 13rem; }
  .workshop-link { margin-top: auto; }
  .project { grid-template-columns: 1.08fr 1fr; gap: 2.8rem; }
}

@media (max-width: 23rem) {
  .header-inner { gap: .25rem .65rem; }
  .portal-nav a { padding-inline: .32rem; font-size: .77rem; }
  .brand { font-size: 1.04rem; white-space: normal; }
  .brand img { width: 2rem; height: 2rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .button, .workshop-link { transition: background-color .16s ease, color .16s ease; }
}

.method-summary {
  display: grid;
  gap: .7rem 1.35rem;
  align-items: center;
  margin-top: 1rem;
  padding: 1rem clamp(1rem, 2.5vw, 1.4rem);
  border: 1px solid var(--line);
  border-radius: .8rem;
}
.method-summary h3 { margin-top: .25rem; font-size: clamp(1.15rem, 3vw, 1.55rem); line-height: 1.14; letter-spacing: -.045em; }
.method-summary > p { max-width: 45rem; color: var(--muted); font-size: .9rem; }
@media (min-width: 53rem) {
  .method-summary { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}