/*
  HOW TO CUSTOMIZE
  1. Replace bracketed copy such as [Your Full Name] in the HTML files.
  2. Replace each project illustration/photo placeholder with your own media.
  3. Adjust colors, type, and spacing from the design tokens below.
  4. Update links and contact details, then open index.html or serve this folder.
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
    color-scheme:dark;
    --bg:#101513;
    --bg-raised:#151d19;
    --surface:#1a2420;
    --surface-soft:#202b26;
    --text:#e8ede9;
    --muted:#a3afa8;
    --dim:#748079;
    --line:rgba(219,237,225,.12);
    --line-strong:rgba(219,237,225,.22);
    --accent:#80d4bc;
    --accent-strong:#a6ead5;
    --accent-deep:#367a67;
    --display:'Manrope',system-ui,sans-serif;
    --body:'Manrope',system-ui,sans-serif;
    --mono:'DM Mono',ui-monospace,monospace;
    --page:1220px;
    --ease:cubic-bezier(.22,.78,.18,1);
    --shadow:0 28px 80px rgba(0,0,0,.26);
    font-family:var(--body);
    font-optical-sizing:auto;
    font-weight:400;
    background:var(--bg);
    color:var(--text);
    scroll-behavior:smooth
}
:root[data-theme="light"] {
    color-scheme:light;
    --bg:#f1f4f0;
    --bg-raised:#e7ece7;
    --surface:#fff;
    --surface-soft:#f5f8f5;
    --text:#15211b;
    --muted:#536258;
    --dim:#728077;
    --line:rgba(21,42,31,.13);
    --line-strong:rgba(21,42,31,.23);
    --accent:#287c67;
    --accent-strong:#216c59;
    --accent-deep:#d2e9df;
    --shadow:0 28px 80px rgba(22,41,30,.12)
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:92px
}
body {
    margin:0;
    min-width:320px;
    background:var(--bg);
    color:var(--text);
    font-family:var(--body);
    line-height:1.6;
    transition:background .5s var(--ease),color .5s var(--ease);
    overflow-x:hidden
}
a {
    color:inherit;
    text-decoration:none
}
button,input,textarea,select {
    font:inherit
}
button {
    color:inherit
}
.skip-link {
    position:fixed;
    z-index:1000;
    top:10px;
    left:10px;
    padding:10px 14px;
    background:var(--accent);
    color:#06110d;
    transform:translateY(-160%);
    transition:transform .2s
}
.skip-link:focus {
    transform:translateY(0)
}
:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:4px
}
::selection {
    background:var(--accent);
    color:#0d1712
}
.site-header {
    position:fixed;
    z-index:40;
    top:0;
    left:0;
    right:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:84px;
    padding:0 max(5vw,24px);
    border-bottom:1px solid transparent;
    background:linear-gradient(180deg,rgba(16,21,19,.92),rgba(16,21,19,.65));
    backdrop-filter:blur(18px);
    transition:border-color .4s,background .4s
}
:root[data-theme="light"] .site-header {
    background:rgba(241,244,240,.88)
}
.site-header.scrolled {
    border-color:var(--line)
}
.brand {
    display:inline-flex;
    align-items:center;
    gap:11px;
    flex-shrink:0
}
.brand-mark {
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border:1px solid var(--line-strong);
    border-radius:12px;
    font:700 15px var(--display);
    letter-spacing:-.08em
}
.brand-mark span {
    color:var(--accent)
}
.brand-name {
    font:700 12px var(--display);
    letter-spacing:.025em;
    line-height:1.25
}
.brand-name small {
    display:block;
    margin-top:4px;
    color:var(--dim);
    font:9px var(--mono);
    letter-spacing:.1em
}
.primary-nav {
    display:flex;
    align-items:center;
    gap:clamp(15px,2vw,30px)
}
.nav-link {
    position:relative;
    padding:9px 0;
    color:var(--muted);
    font-size:11px;
    font-weight:600;
    transition:color .25s
}
.nav-link::after {
    position:absolute;
    content:"";
    left:0;
    right:100%;
    bottom:0;
    height:1px;
    background:var(--accent);
    transition:right .35s var(--ease)
}
.nav-link:hover,.nav-link.is-active {
    color:var(--text)
}
.nav-link:hover::after,.nav-link.is-active::after {
    right:0
}
.theme-toggle,.menu-toggle {
    display:grid;
    place-items:center;
    padding:0;
    background:none;
    border:0;
    cursor:pointer
}
.theme-toggle {
    width:38px;
    height:38px;
    border:1px solid var(--line);
    border-radius:50%;
    transition:transform .4s var(--ease),border-color .25s
}
.theme-toggle:hover {
    transform:rotate(45deg);
    border-color:var(--accent)
}
.theme-toggle svg {
    width:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.5;
    stroke-linecap:round
}
.menu-toggle {
    display:none
}
.home-hero {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);
    align-items:center;
    min-height:100svh;
    padding:142px max(8vw,6vw) 74px;
    overflow:hidden
}
.hero-grid {
    position:absolute;
    inset:0;
    opacity:.24;
    background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:76px 76px;
    mask-image:linear-gradient(90deg,black,transparent 92%);
    pointer-events:none
}
.hero-content {
    position:relative;
    z-index:2;
    max-width:660px
}
.eyebrow {
    margin:0 0 22px;
    color:var(--dim);
    font:10px var(--mono);
    letter-spacing:.11em;
    line-height:1.7
}
.status-dot {
    display:inline-block;
    width:7px;
    height:7px;
    margin:0 9px 1px 0;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 13px var(--accent);
    animation:pulse 2.4s infinite
}
.eyebrow-divider {
    padding:0 8px;
    color:var(--accent)
}
h1,h2,h3,p {
    margin-top:0
}
h1,h2,h3 {
    font-family:var(--display);
    letter-spacing:-.055em
}
h1 em,h2 em {
    font-family:Georgia,serif;
    font-weight:400;
    letter-spacing:-.065em;
    color:var(--accent);
    font-style:italic
}
.hero-title {
    margin:0;
    font-size:clamp(68px,9vw,130px);
    font-weight:600;
    line-height:.94;
    letter-spacing:-.085em
}
.hero-title em {
    font-size:1.08em
}
.hero-lede {
    max-width:490px;
    margin:30px 0 0;
    color:var(--muted);
    font-size:clamp(15px,1.5vw,18px);
    line-height:1.8
}
.hero-lede strong {
    color:var(--text);
    font-weight:600
}
.hero-actions {
    display:flex;
    flex-wrap:wrap;
    gap:13px;
    margin-top:35px
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    min-height:48px;
    padding:0 20px;
    border:1px solid transparent;
    border-radius:3px;
    font-size:11px;
    font-weight:700;
    transition:transform .35s var(--ease),background .35s,border-color .35s,color .35s
}
.button span {
    font-size:15px;
    transition:transform .35s var(--ease)
}
.button:hover {
    transform:translateY(-3px)
}
.button:hover span {
    transform:translate(3px,-2px)
}
.button-primary {
    background:var(--accent);
    color:#102018
}
.button-primary:hover {
    background:var(--accent-strong);
    box-shadow:0 12px 34px rgba(95,195,162,.17)
}
.button-quiet {
    color:var(--text)
}
.button-quiet:hover {
    color:var(--accent)
}
.button-outline {
    border-color:var(--line-strong);
    color:var(--text)
}
.button-outline:hover {
    border-color:var(--accent);
    color:var(--accent)
}
.hero-meta {
    display:flex;
    justify-content:space-between;
    max-width:620px;
    margin-top:72px;
    color:var(--dim);
    font:9px var(--mono);
    letter-spacing:.11em
}
.hero-meta i {
    padding:0 5px;
    color:var(--accent);
    font-style:normal
}
.scroll-cue {
    display:inline-flex;
    align-items:center;
    gap:12px
}
.scroll-line {
    width:36px;
    height:1px;
    background:var(--accent);
    transform-origin:left;
    animation:linePulse 2.3s infinite
}
.hero-visual {
    position:relative;
    z-index:1;
    justify-self:end;
    width:min(100%,560px);
    margin-left:-20px
}
.visual-frame {
    position:relative;
    display:grid;
    place-items:center;
    aspect-ratio:1;
    border:1px solid var(--line);
    background:radial-gradient(circle at 50% 48%,rgba(86,160,134,.1),transparent 58%),linear-gradient(140deg,rgba(255,255,255,.018),transparent 55%);
    box-shadow:var(--shadow)
}
.visual-frame:before,.visual-frame:after {
    position:absolute;
    content:"";
    width:24px;
    height:24px;
    border-color:var(--accent);
    opacity:.65
}
.visual-frame:before {
    top:-1px;
    left:-1px;
    border-top:1px solid;
    border-left:1px solid
}
.visual-frame:after {
    right:-1px;
    bottom:-1px;
    border-right:1px solid;
    border-bottom:1px solid
}
.visual-frame svg {
    width:86%;
    overflow:visible;
    animation:slowRotate 42s linear infinite
}
.svg-ring {
    fill:none;
    stroke:var(--line-strong);
    stroke-width:1
}
.svg-ring-dash {
    stroke-dasharray:3 9
}
.svg-shape {
    fill:none;
    stroke:rgba(151,215,191,.68);
    stroke-width:1.3
}
.svg-shape-soft {
    stroke:rgba(151,215,191,.22)
}
.svg-beam {
    fill:rgba(94,175,147,.11);
    stroke:url(#beam);
    stroke-width:2
}
.svg-tick {
    fill:none;
    stroke:var(--accent);
    stroke-width:2
}
.frame-label,.frame-coord,.frame-index {
    position:absolute;
    color:var(--dim);
    font:9px var(--mono);
    letter-spacing:.1em
}
.frame-label {
    top:20px;
    left:22px
}
.frame-coord {
    left:20px;
    bottom:21px;
    line-height:1.9
}
.frame-index {
    right:21px;
    bottom:21px
}
.frame-dot {
    position:absolute;
    top:19%;
    right:23%;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 14px var(--accent)
}
.hero-orbit {
    position:absolute;
    border:1px solid var(--line);
    border-radius:50%;
    pointer-events:none
}
.orbit-one {
    width:670px;
    height:670px;
    right:-330px;
    top:14%;
    animation:orbit 36s linear infinite
}
.orbit-two {
    width:850px;
    height:850px;
    right:-416px;
    top:5%;
    border-style:dashed;
    opacity:.42;
    animation:orbit 60s linear infinite reverse
}
.section-wrap {
    width:min(var(--page),calc(100% - 12vw));
    margin-inline:auto
}
.intro-strip {
    display:grid;
    grid-template-columns:1fr minmax(250px,660px) auto;
    align-items:start;
    gap:48px;
    padding-top:128px;
    padding-bottom:130px;
    border-top:1px solid var(--line)
}
.intro-strip .eyebrow {
    margin:7px 0
}
.intro-copy {
    margin:0;
    font-size:clamp(22px,3.1vw,40px);
    font-weight:500;
    line-height:1.5;
    letter-spacing:-.045em
}
.intro-copy span {
    font-family:Georgia,serif;
    color:var(--accent);
    font-style:italic
}
.text-link {
    display:inline-flex;
    align-items:center;
    gap:17px;
    color:var(--muted);
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
    transition:color .25s
}
.text-link span {
    color:var(--accent);
    transition:transform .25s
}
.text-link:hover {
    color:var(--text)
}
.text-link:hover span {
    transform:translate(3px,-3px)
}
.featured-section {
    padding-bottom:140px
}
.section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    margin-bottom:36px
}
.section-heading .eyebrow {
    margin-bottom:16px
}
.section-heading h2,.about-copy h2,.story-block h2 {
    margin:0;
    font-size:clamp(36px,5vw,62px);
    font-weight:500;
    line-height:1.08
}
.featured-grid,.projects-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}
.project-card {
    display:block;
    min-width:0
}
.project-art {
    position:relative;
    display:grid;
    place-items:center;
    aspect-ratio:1.26;
    overflow:hidden;
    background:var(--surface);
    border:1px solid var(--line);
    transition:transform .55s var(--ease),border-color .35s
}
.project-card:hover .project-art {
    transform:translateY(-6px);
    border-color:rgba(128,212,188,.5)
}
.project-art:before {
    position:absolute;
    content:"";
    inset:0;
    background:radial-gradient(ellipse at 50% 80%,rgba(81,158,130,.14),transparent 57%)
}
.project-art svg {
    position:relative;
    width:86%;
    height:78%;
    overflow:visible;
    transition:transform .7s var(--ease)
}
.project-card:hover .project-art svg {
    transform:scale(1.035) rotate(-1deg)
}
.art-tag,.art-index {
    position:absolute;
    z-index:1;
    color:var(--dim);
    font:8px var(--mono);
    letter-spacing:.1em
}
.art-tag {
    top:17px;
    left:17px
}
.art-index {
    right:17px;
    bottom:15px
}
.art-outline,.art-detail,.art-line-faint,.art-wave,.art-panel-line {
    fill:none;
    stroke:rgba(207,225,214,.74);
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round
}
.art-detail {
    stroke:var(--accent);
    stroke-width:1.3
}
.art-line-faint {
    stroke:var(--line-strong);
    stroke-dasharray:3 5
}
.art-wheel {
    fill:var(--bg-raised);
    stroke:var(--accent);
    stroke-width:2
}
.art-accent-fill {
    fill:var(--accent)
}
.art-sun {
    fill:rgba(128,212,188,.2);
    stroke:var(--accent);
    stroke-width:1
}
.art-panel {
    fill:rgba(128,212,188,.07);
    stroke:rgba(207,225,214,.74);
    stroke-width:1.4
}
.art-panel-line {
    stroke:var(--line-strong);
    stroke-width:1
}
.art-joint {
    fill:var(--surface);
    stroke:var(--accent);
    stroke-width:2
}
.art-wave {
    stroke:rgba(128,212,188,.45);
    stroke-width:1
}
.card-copy {
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:19px 2px 0
}
.card-kicker {
    margin:0 0 7px;
    color:var(--dim);
    font:9px var(--mono);
    letter-spacing:.07em
}
.card-copy h3 {
    margin:0;
    font-size:19px;
    font-weight:600;
    letter-spacing:-.04em
}
.card-description {
    max-width:290px;
    margin:10px 0 0;
    color:var(--muted);
    font-size:12px;
    line-height:1.75
}
.card-arrow {
    display:grid;
    place-items:center;
    flex:0 0 32px;
    width:32px;
    height:32px;
    border:1px solid var(--line);
    border-radius:50%;
    color:var(--accent);
    transition:background .3s,transform .3s
}
.project-card:hover .card-arrow {
    transform:rotate(45deg);
    background:rgba(128,212,188,.1)
}
.home-note {
    position:relative;
    overflow:hidden;
    background:var(--bg-raised)
}
.note-inner {
    position:relative;
    min-height:440px;
    padding-block:104px
}
.note-inner:before {
    position:absolute;
    content:"";
    width:440px;
    height:440px;
    right:4%;
    top:0;
    border:1px solid var(--line);
    border-radius:50%;
    box-shadow:0 0 0 52px rgba(128,212,188,.018),0 0 0 104px rgba(128,212,188,.014)
}
.note-inner h2 {
    position:relative;
    margin:0 0 30px;
    font-size:clamp(48px,7vw,84px);
    font-weight:500;
    line-height:.98
}
.note-inner .button {
    position:relative
}
.note-coordinate {
    position:absolute;
    right:0;
    bottom:29px;
    color:var(--dim);
    font:8px var(--mono);
    letter-spacing:.1em
}
.site-footer {
    padding:38px max(6vw,24px) 22px;
    border-top:1px solid var(--line)
}
.footer-top,.footer-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    max-width:var(--page);
    margin:auto
}
.footer-top>p {
    margin:0;
    color:var(--muted);
    font-size:11px
}
.back-top {
    color:var(--muted);
    font-size:10px
}
.back-top span {
    margin-left:10px;
    color:var(--accent)
}
.footer-bottom {
    margin-top:37px;
    padding-top:17px;
    border-top:1px solid var(--line);
    color:var(--dim);
    font:8px var(--mono);
    letter-spacing:.03em
}
.page-main {
    padding-top:84px
}
.page-hero {
    position:relative;
    display:flex;
    align-items:end;
    justify-content:space-between;
    min-height:450px;
    padding-top:100px;
    padding-bottom:78px;
    border-bottom:1px solid var(--line)
}
.page-title-wrap h1 {
    margin:0;
    font-size:clamp(58px,8vw,102px);
    font-weight:550;
    line-height:.98;
    letter-spacing:-.085em
}
.page-title-wrap .eyebrow {
    margin-bottom:23px
}
.page-lede {
    max-width:550px;
    margin:24px 0 0;
    color:var(--muted);
    font-size:15px;
    line-height:1.85
}
.page-number {
    padding-bottom:6px;
    color:var(--dim);
    font:10px var(--mono);
    white-space:nowrap
}
.page-number span {
    padding:0 6px;
    color:var(--accent)
}
.about-grid {
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    align-items:center;
    gap:clamp(50px,9vw,130px);
    padding-top:90px;
    padding-bottom:112px
}
.portrait-placeholder {
    position:relative;
    display:grid;
    place-items:center;
    aspect-ratio:.88;
    background:linear-gradient(145deg,var(--surface-soft),var(--surface));
    overflow:hidden
}
.portrait-placeholder:before {
    position:absolute;
    content:"";
    width:70%;
    aspect-ratio:1;
    border:1px solid rgba(128,212,188,.4);
    border-radius:50%;
    box-shadow:0 0 0 36px rgba(128,212,188,.03),0 0 0 72px rgba(128,212,188,.025)
}
.portrait-placeholder:after {
    position:absolute;
    content:"";
    inset:0;
    background:linear-gradient(135deg,transparent 49.8%,rgba(128,212,188,.18) 50%,transparent 50.2%),linear-gradient(45deg,transparent 49.8%,rgba(128,212,188,.1) 50%,transparent 50.2%)
}
.portrait-letters {
    position:relative;
    z-index:1;
    color:var(--accent);
    font:10px/1.8 var(--mono);
    letter-spacing:.18em;
    text-align:center
}
.portrait-cross {
    position:absolute;
    z-index:2;
    color:var(--accent);
    font:15px var(--mono)
}
.cross-a {
    top:14px;
    left:17px
}
.cross-b {
    right:18px;
    bottom:15px
}
.portrait-arc {
    position:absolute;
    z-index:1;
    width:46%;
    aspect-ratio:1;
    border:1px solid rgba(128,212,188,.5);
    border-radius:50%;
    border-left-color:transparent;
    transform:rotate(45deg)
}
.image-caption {
    display:flex;
    justify-content:space-between;
    margin-top:12px;
    color:var(--dim);
    font:8px var(--mono);
    letter-spacing:.08em
}
.about-copy .eyebrow {
    margin-bottom:17px
}
.about-copy h2 {
    margin-bottom:28px
}
.about-copy>p:not(.eyebrow) {
    color:var(--muted);
    font-size:13px;
    line-height:1.95
}
.about-copy .text-link {
    margin-top:13px
}
.facts-section {
    padding-top:48px;
    padding-bottom:114px;
    border-top:1px solid var(--line)
}
.facts-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px
}
.fact-card {
    min-height:175px;
    padding:24px;
    border:1px solid var(--line);
    background:var(--surface-soft);
    transition:transform .35s var(--ease),border-color .35s
}
.fact-card:hover {
    transform:translateY(-5px);
    border-color:var(--accent)
}
.fact-number {
    display:block;
    margin-bottom:24px;
    color:var(--accent);
    font:9px var(--mono)
}
.fact-card strong {
    font-size:13px
}
.fact-card p {
    margin:8px 0 0;
    color:var(--muted);
    font-size:11px
}
.quote-band {
    padding-block:92px;
    background:var(--bg-raised)
}
.quote-band .section-wrap {
    position:relative;
    max-width:850px
}
.quote-mark {
    color:var(--accent);
    font:90px/.7 Georgia,serif
}
.quote-band blockquote {
    margin:12px 0 20px;
    font:italic clamp(25px,4vw,42px)/1.4 Georgia,serif;
    letter-spacing:-.025em
}
.quote-credit {
    color:var(--dim);
    font:9px var(--mono);
    letter-spacing:.1em
}
.skills-layout {
    display:grid;
    grid-template-columns:.68fr 1.32fr;
    gap:clamp(50px,10vw,140px);
    padding-top:74px;
    padding-bottom:82px
}
.skills-intro {
    position:sticky;
    top:120px;
    align-self:start
}
.skills-intro>p:not(.eyebrow) {
    max-width:310px;
    color:var(--muted);
    font-size:13px;
    line-height:1.95
}
.skill-key {
    display:grid;
    gap:12px;
    margin-top:32px;
    color:var(--dim);
    font:9px var(--mono)
}
.skill-key span {
    display:flex;
    align-items:center;
    gap:9px
}
.key-dot {
    width:9px;
    height:9px;
    border:1px solid var(--accent);
    border-radius:50%
}
.key-solid {
    background:var(--accent)
}
.skill-group {
    padding:28px 0 32px;
    border-top:1px solid var(--line)
}
.skill-group:last-child {
    border-bottom:1px solid var(--line)
}
.skill-heading {
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:23px
}
.skill-index {
    color:var(--accent);
    font:9px var(--mono)
}
.skill-heading h2 {
    margin:0;
    font-size:22px;
    font-weight:550;
    letter-spacing:-.04em
}
.skill-symbol {
    margin-left:auto;
    color:var(--dim);
    font:22px Georgia,serif
}
.skill-chips {
    display:flex;
    flex-wrap:wrap;
    gap:9px
}
.skill-chip {
    padding:9px 12px;
    border:1px solid rgba(128,212,188,.36);
    border-radius:2px;
    color:var(--text);
    font-size:10px;
    transition:background .3s,transform .3s
}
.skill-chip:hover {
    transform:translateY(-3px);
    background:rgba(128,212,188,.08)
}
.skill-chip.learning {
    border-style:dashed;
    border-color:var(--line-strong);
    color:var(--muted)
}
.skills-note {
    display:flex;
    align-items:center;
    gap:26px;
    padding-block:22px 100px
}
.note-rule {
    width:32px;
    height:1px;
    background:var(--accent);
    flex-shrink:0
}
.skills-note p {
    max-width:580px;
    margin:0;
    color:var(--muted);
    font-size:12px
}
.skills-note p strong {
    color:var(--text)
}
.skills-note .text-link {
    margin-left:auto
}
.projects-section {
    padding-top:38px;
    padding-bottom:112px
}
.filter-bar {
    display:flex;
    align-items:center;
    gap:9px;
    flex-wrap:wrap;
    margin-bottom:30px
}
.filter-label {
    margin-right:10px;
    color:var(--dim);
    font:9px var(--mono);
    letter-spacing:.12em
}
.filter-button {
    padding:8px 12px;
    border:1px solid var(--line);
    border-radius:2px;
    background:none;
    color:var(--muted);
    font-size:10px;
    cursor:pointer;
    transition:color .25s,border-color .25s,background .25s
}
.filter-button:hover,.filter-button.is-selected {
    border-color:var(--accent);
    color:var(--accent)
}
.filter-button.is-selected {
    background:rgba(128,212,188,.08)
}
.filter-button span {
    margin-left:6px;
    color:var(--dim);
    font:9px var(--mono)
}
.projects-grid {
    grid-template-columns:repeat(2,1fr);
    row-gap:40px
}
.project-overview-card .project-art {
    aspect-ratio:1.63
}
.project-overview-card .card-copy h3 {
    font-size:23px
}
.project-overview-card.is-hidden {
    display:none
}
.project-count {
    margin:44px 0 0;
    color:var(--dim);
    font:9px var(--mono);
    letter-spacing:.08em
}
.project-count span {
    color:var(--accent)
}
.timeline-section {
    padding-top:70px;
    padding-bottom:80px
}
.timeline-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:16px;
    border-bottom:1px solid var(--line)
}
.timeline-head .eyebrow {
    margin:0
}
.timeline-head>span {
    color:var(--dim);
    font:9px var(--mono)
}
.timeline {
    position:relative;
    padding:8px 0 30px
}
.timeline:before {
    position:absolute;
    content:"";
    left:200px;
    top:18px;
    bottom:30px;
    width:1px;
    background:var(--line)
}
.timeline-item {
    position:relative;
    display:grid;
    grid-template-columns:170px 1fr;
    gap:60px;
    padding:36px 0
}
.timeline-date {
    padding-top:4px;
    color:var(--dim);
    font:9px var(--mono);
    letter-spacing:.05em
}
.timeline-dot {
    position:absolute;
    left:195px;
    top:38px;
    width:11px;
    height:11px;
    border:1px solid var(--accent);
    border-radius:50%;
    background:var(--bg);
    box-shadow:0 0 0 5px var(--bg)
}
.timeline-content {
    max-width:650px
}
.timeline-type {
    margin:0 0 10px;
    color:var(--accent);
    font:9px var(--mono);
    letter-spacing:.1em
}
.timeline-content h2,.education-card h2 {
    margin:0 0 7px;
    font-size:23px;
    font-weight:550
}
.timeline-org {
    margin:0 0 14px;
    color:var(--muted);
    font-size:11px
}
.timeline-content>p:not(.timeline-type):not(.timeline-org),.education-card>div>p:not(.timeline-type):not(.timeline-org) {
    max-width:560px;
    color:var(--muted);
    font-size:12px;
    line-height:1.85
}
.timeline-tags {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:18px
}
.timeline-tags span {
    padding:5px 9px;
    border:1px solid var(--line);
    color:var(--dim);
    font:8px var(--mono)
}
.education-block {
    margin-top:28px
}
.education-card {
    display:grid;
    grid-template-columns:170px 1fr auto;
    gap:60px;
    align-items:start;
    padding:34px 0;
    border-bottom:1px solid var(--line)
}
.education-years {
    padding-top:4px;
    color:var(--dim);
    font:9px var(--mono)
}
.education-card>div {
    max-width:620px
}
.education-mark {
    color:var(--accent);
    font:italic 24px Georgia,serif
}
.resume-cta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-block:42px 110px;
    border-top:1px solid var(--line)
}
.resume-cta .eyebrow {
    margin-bottom:10px
}
.resume-cta h2 {
    margin:0;
    font-size:25px;
    font-weight:550
}
.contact-page {
    position:relative
}
.contact-page:before {
    position:absolute;
    z-index:-1;
    content:"";
    width:660px;
    height:660px;
    top:290px;
    right:-370px;
    border:1px solid var(--line);
    border-radius:50%;
    box-shadow:0 0 0 70px rgba(128,212,188,.018),0 0 0 140px rgba(128,212,188,.013)
}
.contact-layout {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:clamp(50px,10vw,140px);
    padding-top:70px;
    padding-bottom:85px
}
.contact-side h2 {
    margin:0 0 17px;
    font-size:clamp(28px,4vw,43px);
    font-weight:500;
    line-height:1.18
}
.contact-side>p:not(.eyebrow) {
    max-width:330px;
    color:var(--muted);
    font-size:12px;
    line-height:1.9
}
.contact-methods {
    display:grid;
    gap:18px;
    margin-top:38px
}
.contact-methods>a {
    display:flex;
    align-items:center;
    gap:14px
}
.contact-icon {
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border:1px solid var(--line);
    border-radius:50%;
    color:var(--accent);
    font-size:12px;
    transition:border-color .25s,transform .25s
}
.contact-methods>a:hover .contact-icon {
    transform:translateY(-2px);
    border-color:var(--accent)
}
.contact-methods small,.contact-methods strong {
    display:block
}
.contact-methods small {
    margin-bottom:3px;
    color:var(--dim);
    font:8px var(--mono);
    letter-spacing:.1em
}
.contact-methods strong {
    font-size:11px;
    font-weight:600
}
.availability {
    display:flex;
    align-items:center;
    margin-top:35px;
    color:var(--dim);
    font-size:10px
}
.availability .status-dot {
    width:6px;
    height:6px
}
.contact-form {
    padding:30px;
    border:1px solid var(--line);
    background:var(--surface-soft)
}
.contact-form label {
    display:block;
    margin-bottom:22px;
    color:var(--muted);
    font-size:10px;
    font-weight:600
}
.contact-form label>span {
    color:var(--accent)
}
.form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px
}
.contact-form input,.contact-form textarea,.contact-form select {
    display:block;
    width:100%;
    margin-top:9px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:2px;
    background:var(--bg);
    color:var(--text);
    font-size:11px;
    outline:none;
    transition:border-color .25s,box-shadow .25s
}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus {
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(128,212,188,.08)
}
.contact-form input::placeholder,.contact-form textarea::placeholder {
    color:var(--dim)
}
.contact-form textarea {
    resize:vertical;
    min-height:130px
}
.contact-form select:invalid {
    color:var(--dim)
}
.field-error {
    display:block;
    min-height:14px;
    margin-top:4px;
    color:#f29b88;
    font-size:9px;
    font-weight:400
}
.contact-form .button {
    width:auto;
    border:0;
    cursor:pointer
}
.form-note {
    display:inline-block;
    margin:0 0 0 15px;
    color:var(--dim);
    font-size:9px;
    vertical-align:middle
}
.form-success {
    display:none;
    align-items:center;
    gap:12px;
    margin-top:18px;
    padding:14px;
    background:rgba(128,212,188,.1);
    color:var(--text);
    animation:successIn .5s var(--ease)
}
.form-success.is-visible {
    display:flex
}
.form-success>span {
    display:grid;
    place-items:center;
    width:25px;
    height:25px;
    border-radius:50%;
    background:var(--accent);
    color:#102018
}
.form-success p {
    margin:0;
    font-size:11px
}
.contact-bottom {
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:18px 0 68px;
    border-top:1px solid var(--line);
    color:var(--dim);
    font:8px var(--mono);
    letter-spacing:.08em
}
.project-hero {
    padding-top:80px;
    padding-bottom:64px
}
.back-link {
    display:inline-flex;
    gap:12px;
    margin-bottom:48px;
    color:var(--muted);
    font-size:10px;
    transition:color .2s
}
.back-link span {
    color:var(--accent)
}
.back-link:hover {
    color:var(--text)
}
.project-hero-grid {
    display:grid;
    grid-template-columns:1fr .9fr;
    gap:7vw;
    align-items:center
}
.project-heading h1 {
    margin:0;
    font-size:clamp(62px,8vw,100px);
    font-weight:550;
    line-height:.93;
    letter-spacing:-.09em
}
.project-heading h1 em {
    font-size:1.04em
}
.project-summary {
    max-width:480px;
    margin:25px 0;
    color:var(--muted);
    font-size:14px;
    line-height:1.85
}
.project-facts {
    display:flex;
    flex-wrap:wrap;
    gap:28px;
    margin-top:34px;
    padding-top:19px;
    border-top:1px solid var(--line)
}
.project-facts div span,.project-facts div strong {
    display:block
}
.project-facts div span {
    margin-bottom:7px;
    color:var(--dim);
    font:8px var(--mono);
    letter-spacing:.1em
}
.project-facts div strong {
    font-size:10px;
    font-weight:600
}
.project-hero-art {
    position:relative;
    display:grid;
    place-items:center;
    aspect-ratio:1.08;
    background:var(--surface);
    border:1px solid var(--line);
    overflow:hidden
}
.project-hero-art:before {
    position:absolute;
    content:"";
    inset:0;
    background:radial-gradient(ellipse at 50% 68%,rgba(81,158,130,.19),transparent 60%),linear-gradient(140deg,rgba(255,255,255,.018),transparent)
}
.project-hero-art svg {
    position:relative;
    width:84%;
    height:74%;
    animation:slowRotate 50s linear infinite
}
.project-hero-art .art-tag {
    top:20px;
    left:20px
}
.project-hero-art .art-index {
    right:20px;
    bottom:20px;
    font-size:10px
}
.project-story {
    display:grid;
    grid-template-columns:.45fr 1.55fr;
    gap:80px;
    padding-top:92px;
    padding-bottom:105px;
    border-top:1px solid var(--line)
}
.story-aside {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:start;
    min-height:100%;
    padding-right:20px
}
.story-aside .eyebrow {
    color:var(--accent)
}
.story-id {
    margin-top:32px;
    color:var(--dim);
    font:9px/1.7 var(--mono);
    letter-spacing:.12em
}
.story-aside .text-link {
    margin-top:auto
}
.story-block {
    max-width:730px
}
.story-block h2 {
    margin:0 0 20px
}
.story-block h3 {
    margin:0 0 16px;
    font-size:26px;
    font-weight:500;
    line-height:1.2
}
.story-block>p:not(.eyebrow) {
    max-width:680px;
    color:var(--muted);
    font-size:12px;
    line-height:1.95
}
.story-split {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:42px;
    margin-top:56px;
    padding-top:32px;
    border-top:1px solid var(--line)
}
.story-split .story-block h3 {
    font-size:22px
}
.gallery-section {
    padding-top:55px;
    padding-bottom:112px;
    border-top:1px solid var(--line)
}
.gallery-counter {
    color:var(--dim);
    font:9px var(--mono)
}
.gallery-grid {
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr;
    gap:16px
}
.gallery-item {
    margin:0
}
.gallery-placeholder {
    position:relative;
    display:grid;
    place-items:center;
    aspect-ratio:1.25;
    padding:20px;
    border:1px solid var(--line);
    background-color:var(--surface);
    overflow:hidden
}
.gallery-large .gallery-placeholder {
    aspect-ratio:1.1
}
.gallery-placeholder span {
    position:relative;
    z-index:1;
    max-width:150px;
    color:var(--muted);
    font-size:10px;
    text-align:center
}
.gallery-placeholder b {
    position:absolute;
    right:12px;
    bottom:12px;
    color:var(--dim);
    font:8px var(--mono);
    letter-spacing:.08em
}
.gallery-lines {
    background-image:linear-gradient(30deg,transparent 49.7%,rgba(128,212,188,.14) 50%,transparent 50.3%),linear-gradient(150deg,transparent 49.7%,rgba(128,212,188,.12) 50%,transparent 50.3%)
}
.gallery-dots {
    background-image:radial-gradient(rgba(128,212,188,.23) 1px,transparent 1px);
    background-size:18px 18px
}
.gallery-grid-bg {
    background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:28px 28px
}
.gallery-item figcaption {
    padding-top:10px;
    color:var(--dim);
    font-size:9px
}
.train-hero-art {
    background:#f4f6f7
}
.train-hero-art:before {
    background:none
}
.train-hero-art .art-tag {
    z-index:2;
    padding:7px 9px;
    color:#e9f6f1;
    background:rgba(16,21,19,.88)
}
.project-hero-image {
    position:relative;
    display:block;
    width:100%;
    height:100%;
    padding:42px 12px 18px;
    object-fit:contain;
    background:#f4f6f7
}
.visually-hidden {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
.train-gallery {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px
}
.gallery-media {
    display:grid;
    place-items:center;
    overflow:hidden;
    aspect-ratio:1.58;
    border:1px solid var(--line);
    background:#f4f6f7
}
.gallery-media img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain
}
.train-video-section {
    padding-top:72px;
    padding-bottom:88px;
    border-top:1px solid var(--line)
}
.train-video-frame {
    padding:12px;
    border:1px solid var(--line);
    background:var(--surface)
}
.train-video-frame video {
    display:block;
    width:100%;
    max-height:72vh;
    background:#070909;
    object-fit:contain
}
.video-note {
    margin:12px 0 0;
    color:var(--dim);
    font-size:10px
}
.finance-copy>p {
    max-width:760px
}
.train-outcome-section {
    border-top:1px solid var(--line)
}
.outcome-section {
    padding-block:90px;
    background:var(--bg-raised)
}
.outcome-inner {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:10vw
}
.outcome-inner h2 {
    margin:0;
    font-size:clamp(42px,6vw,65px);
    font-weight:500;
    line-height:1.05
}
.outcome-copy>p {
    color:var(--muted);
    font-size:13px;
    line-height:1.9
}
.tech-row {
    margin-top:30px;
    padding-top:20px;
    border-top:1px solid var(--line)
}
.tech-row span {
    color:var(--dim);
    font:8px var(--mono);
    letter-spacing:.1em
}
.tech-row p {
    margin:10px 0 0;
    font-size:11px
}
.project-links {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:28px
}
.project-pagination {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding-block:40px 70px
}
.project-pagination a {
    display:grid;
    gap:8px
}
.project-pagination a:last-child {
    text-align:right
}
.project-pagination span {
    color:var(--dim);
    font:8px var(--mono);
    letter-spacing:.1em
}
.project-pagination strong {
    font-size:14px;
    font-weight:600;
    transition:color .25s
}
.project-pagination a:hover strong {
    color:var(--accent)
}
.reveal {
    opacity:0;
    transform:translateY(24px);
    transition:opacity .75s var(--ease),transform .75s var(--ease)
}
.reveal.is-visible {
    opacity:1;
    transform:translateY(0)
}
.featured-grid .reveal:nth-child(2),.facts-grid .reveal:nth-child(2) {
    transition-delay:.08s
}
.featured-grid .reveal:nth-child(3),.facts-grid .reveal:nth-child(3) {
    transition-delay:.16s
}
body.is-leaving .page-main,body.is-leaving .home-hero {
    opacity:0;
    transform:translateY(-8px);
    transition:opacity .18s,transform .18s
}
::view-transition-old(root) {
    animation:pageOut .25s var(--ease) both
}
::view-transition-new(root) {
    animation:pageIn .45s var(--ease) both
}
@keyframes pageOut {
    to {
        opacity:0;
        transform:translateY(-8px)
    }
}
@keyframes pageIn {
    from {
        opacity:0;
        transform:translateY(12px)
    }
}
@keyframes pulse {
    0%,100% {
        box-shadow:0 0 0 0 rgba(128,212,188,.4)
    }
    50% {
        box-shadow:0 0 0 6px rgba(128,212,188,0)
    }
}
@keyframes linePulse {
    50% {
        transform:scaleX(.4);
        opacity:.45
    }
}
@keyframes slowRotate {
    to {
        transform:rotate(360deg)
    }
}
@keyframes orbit {
    to {
        transform:rotate(360deg)
    }
}
@keyframes successIn {
    from {
        opacity:0;
        transform:translateY(7px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}
@media(prefers-reduced-motion:no-preference) {
    html:active-view-transition-type(root) {
        view-transition-name:root
    }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important
    }
    .reveal {
        opacity:1;
        transform:none
    }
}
@media(max-width:1050px) {
    .home-hero {
        grid-template-columns:1.1fr .9fr;
        padding-inline:6vw
    }
    .hero-visual {
        width:min(100%,440px)
    }
    .primary-nav {
        gap:16px
    }
    .section-wrap {
        width:calc(100% - 10vw)
    }
    .intro-strip {
        grid-template-columns:1fr 2fr;
        gap:26px
    }
    .intro-strip .text-link {
        grid-column:2
    }
    .project-story {
        gap:45px
    }
    .contact-layout {
        gap:55px
    }
}
@media(max-width:760px) {
    html {
        scroll-padding-top:75px
    }
    .site-header {
        height:70px;
        padding-inline:22px
    }
    .menu-toggle {
        display:flex;
        flex-direction:column;
        gap:5px;
        width:40px;
        height:40px;
        border:1px solid var(--line);
        border-radius:50%
    }
    .menu-toggle span {
        width:14px;
        height:1px;
        background:var(--text);
        transition:transform .3s
    }
    .menu-toggle[aria-expanded="true"] span:first-child {
        transform:translateY(3px) rotate(45deg)
    }
    .menu-toggle[aria-expanded="true"] span:last-child {
        transform:translateY(-3px) rotate(-45deg)
    }
    .primary-nav {
        position:absolute;
        top:70px;
        left:0;
        right:0;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:8px 24px 22px;
        border-bottom:1px solid var(--line);
        background:var(--bg);
        opacity:0;
        visibility:hidden;
        transform:translateY(-8px);
        transition:opacity .3s,transform .3s,visibility .3s
    }
    .primary-nav.is-open {
        opacity:1;
        visibility:visible;
        transform:translateY(0)
    }
    .nav-link {
        padding:13px 4px;
        border-bottom:1px solid var(--line);
        font-size:13px
    }
    .nav-link::after {
        display:none
    }
    .theme-toggle {
        position:absolute;
        right:24px;
        bottom:24px
    }
    .primary-nav {
        padding-bottom:72px
    }
    .home-hero {
        display:block;
        min-height:auto;
        padding:147px 8vw 55px
    }
    .hero-content {
        max-width:100%
    }
    .hero-title {
        font-size:clamp(65px,15vw,105px)
    }
    .hero-lede {
        font-size:15px
    }
    .hero-meta {
        margin-top:47px
    }
    .hero-meta>span:first-child {
        display:none
    }
    .hero-visual {
        width:min(82vw,430px);
        margin:55px auto 0
    }
    .hero-orbit {
        right:-480px
    }
    .orbit-one {
        top:20%
    }
    .section-wrap {
        width:84%
    }
    .intro-strip {
        grid-template-columns:1fr;
        padding-top:76px;
        padding-bottom:80px;
        gap:20px
    }
    .intro-copy {
        font-size:29px
    }
    .intro-strip .text-link {
        grid-column:1;
        margin-top:4px
    }
    .featured-section {
        padding-bottom:86px
    }
    .section-heading {
        align-items:start;
        gap:20px
    }
    .section-heading>.text-link {
        margin-top:12px
    }
    .featured-grid {
        grid-template-columns:1fr;
        gap:35px
    }
    .project-art {
        aspect-ratio:1.45
    }
    .note-inner {
        min-height:360px;
        padding-block:80px
    }
    .note-inner:before {
        width:270px;
        height:270px;
        right:-120px;
        top:45px
    }
    .site-footer {
        padding-inline:8vw
    }
    .footer-top {
        flex-wrap:wrap
    }
    .footer-top>p {
        display:none
    }
    .footer-bottom {
        align-items:flex-start;
        flex-direction:column;
        gap:8px
    }
    .page-main {
        padding-top:70px
    }
    .page-hero {
        min-height:370px;
        padding-top:80px;
        padding-bottom:52px
    }
    .page-title-wrap h1 {
        font-size:clamp(54px,12vw,84px)
    }
    .page-lede {
        max-width:440px;
        font-size:13px
    }
    .page-number {
        font-size:8px
    }
    .about-grid {
        grid-template-columns:1fr;
        gap:45px;
        padding-top:60px;
        padding-bottom:72px
    }
    .portrait-placeholder {
        max-height:420px;
        aspect-ratio:1.15
    }
    .about-copy h2 {
        font-size:44px
    }
    .facts-section {
        padding-top:34px;
        padding-bottom:75px
    }
    .facts-grid {
        grid-template-columns:1fr;
        gap:9px
    }
    .fact-card {
        min-height:0;
        padding:17px
    }
    .fact-number {
        margin-bottom:13px
    }
    .quote-band {
        padding-block:65px
    }
    .skills-layout {
        grid-template-columns:1fr;
        gap:45px;
        padding-top:55px;
        padding-bottom:45px
    }
    .skills-intro {
        position:static
    }
    .skills-intro>p:not(.eyebrow) {
        max-width:500px
    }
    .skill-key {
        grid-template-columns:1fr 1fr
    }
    .skill-heading h2 {
        font-size:19px
    }
    .skills-note {
        align-items:start;
        flex-wrap:wrap;
        padding-bottom:75px
    }
    .skills-note .text-link {
        margin-left:58px
    }
    .projects-section {
        padding-top:28px;
        padding-bottom:75px
    }
    .filter-bar {
        gap:6px
    }
    .filter-label {
        flex-basis:100%;
        margin-bottom:3px
    }
    .filter-button {
        padding:7px 9px;
        font-size:9px
    }
    .projects-grid {
        grid-template-columns:1fr;
        gap:34px
    }
    .project-overview-card .project-art {
        aspect-ratio:1.4
    }
    .project-overview-card .card-copy h3 {
        font-size:21px
    }
    .timeline-section {
        padding-top:52px;
        padding-bottom:55px
    }
    .timeline:before {
        left:5px
    }
    .timeline-item {
        grid-template-columns:1fr;
        gap:10px;
        padding:27px 0 27px 30px
    }
    .timeline-dot {
        left:0;
        top:29px
    }
    .timeline-date {
        font-size:8px
    }
    .timeline-content h2,.education-card h2 {
        font-size:20px
    }
    .education-card {
        grid-template-columns:1fr auto;
        gap:14px;
        padding:25px 0
    }
    .education-years {
        grid-column:1 / -1
    }
    .education-card>div {
        grid-column:1
    }
    .education-mark {
        grid-column:2;
        grid-row:2
    }
    .resume-cta {
        align-items:flex-start;
        flex-direction:column;
        gap:25px;
        padding-block:30px 75px
    }
    .contact-layout {
        grid-template-columns:1fr;
        gap:48px;
        padding-top:55px;
        padding-bottom:55px
    }
    .contact-form {
        padding:22px
    }
    .contact-bottom {
        flex-direction:column;
        gap:10px;
        padding-bottom:50px
    }
    .project-hero {
        padding-top:52px;
        padding-bottom:48px
    }
    .back-link {
        margin-bottom:35px
    }
    .project-hero-grid {
        grid-template-columns:1fr;
        gap:35px
    }
    .project-heading h1 {
        font-size:clamp(60px,13vw,90px)
    }
    .project-summary {
        font-size:13px
    }
    .project-hero-art {
        aspect-ratio:1.22
    }
    .project-story {
        grid-template-columns:1fr;
        gap:34px;
        padding-top:60px;
        padding-bottom:65px
    }
    .story-aside {
        min-height:0;
        display:grid;
        grid-template-columns:1fr auto;
        align-items:center
    }
    .story-aside .eyebrow {
        margin:0
    }
    .story-id {
        margin:0;
        text-align:right
    }
    .story-aside .text-link {
        display:none
    }
    .story-block h2 {
        font-size:39px
    }
    .story-split {
        grid-template-columns:1fr;
        gap:20px;
        margin-top:30px;
        padding-top:25px
    }
    .gallery-section {
        padding-top:42px;
        padding-bottom:70px
    }
    .gallery-grid {
        grid-template-columns:1fr 1fr
    }
    .gallery-large {
        grid-column:1 / -1
    }
    .gallery-large .gallery-placeholder {
        aspect-ratio:1.45
    }
    .gallery-placeholder {
        aspect-ratio:1.08
    }
    .outcome-section {
        padding-block:63px
    }
    .outcome-inner {
        grid-template-columns:1fr;
        gap:32px
    }
    .project-pagination {
        padding-block:29px 48px
    }
    .project-pagination strong {
        font-size:12px
    }
}
@media(max-width:430px) {
    .brand-name {
        font-size:11px
    }
    .hero-title {
        font-size:62px
    }
    .hero-actions {
        gap:7px
    }
    .hero-actions .button {
        min-height:44px;
        padding-inline:13px;
        gap:12px;
        font-size:10px
    }
    .hero-meta {
        font-size:8px
    }
    .page-title-wrap h1 {
        font-size:51px
    }
    .page-number {
        display:none
    }
    .form-row {
        grid-template-columns:1fr;
        gap:0
    }
    .form-note {
        display:block;
        margin:13px 0 0
    }
    .project-facts {
        gap:18px
    }
    .project-facts div strong {
        font-size:9px
    }
    .gallery-grid {
        gap:10px
    }
}
@view-transition {
    navigation:auto
}

/* Aiden's personal identity and school/CTE sections */
.brand-mark { overflow: hidden; padding: 4px; border-color: rgba(128,212,188,.38); }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bayside-section { padding: 84px 0 112px; background: var(--bg-raised); }
.bayside-section .section-heading { margin-bottom: 34px; }
.bayside-edition { color: var(--dim); font: 8px var(--mono); letter-spacing: .12em; }
.bayside-grid { display: grid; grid-template-columns: .94fr 1.06fr; gap: clamp(38px, 7vw, 92px); align-items: center; }
.school-figure { margin: 0; }
.school-photo-wrap { position: relative; overflow: hidden; aspect-ratio: 1.24; border: 1px solid var(--line); background: var(--surface); }
.school-photo-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,20,16,.72), transparent 45%), linear-gradient(135deg, rgba(128,212,188,.1), transparent 65%); pointer-events: none; }
.school-photo-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; filter: saturate(.7) contrast(1.03); transition: transform .75s var(--ease), filter .5s; }
.school-figure:hover img { transform: scale(1.035); filter: saturate(.9) contrast(1.03); }
.school-photo-label { position: absolute; z-index: 1; left: 20px; bottom: 17px; color: #eef4ef; font: 9px/1.7 var(--mono); letter-spacing: .12em; }
.school-corner { position: absolute; z-index: 2; width: 25px; height: 25px; border-color: var(--accent); }
.school-corner-a { top: 12px; left: 12px; border-top: 1px solid; border-left: 1px solid; }
.school-corner-b { right: 12px; bottom: 12px; border-right: 1px solid; border-bottom: 1px solid; }
.school-figure figcaption { margin-top: 10px; color: var(--dim); font: 8px/1.7 var(--mono); }
.school-figure figcaption a, .source-note a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(128,212,188,.4); text-underline-offset: 3px; }
.bayside-copy .eyebrow { margin-bottom: 14px; color: var(--accent); }
.bayside-copy h3 { margin: 0 0 21px; font-size: clamp(32px, 4vw, 49px); font-weight: 500; line-height: 1.12; letter-spacing: -.06em; }
.bayside-copy h3 em { color: var(--accent); font-family: Georgia, serif; font-weight: 400; }
.bayside-copy > p:not(.eyebrow):not(.source-note) { max-width: 610px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.cte-flow { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin: 25px 0 19px; padding: 15px 13px; border: 1px solid var(--line); background: rgba(255,255,255,.015); color: var(--text); font: 8px var(--mono); letter-spacing: .08em; }
.cte-flow i { color: var(--accent); font: normal 13px var(--body); }
.source-note { margin: 0; color: var(--dim); font-size: 9px; line-height: 1.7; }
.note-copy { position: relative; max-width: 520px; margin: -8px 0 26px; color: var(--muted); font-size: 12px; line-height: 1.85; }
.about-schematic { background: radial-gradient(circle at 50% 58%, rgba(81,158,130,.14), transparent 58%), var(--surface); }
.about-schematic::before { width: 78%; border-color: rgba(128,212,188,.24); }
.about-schematic svg { position: relative; z-index: 1; width: 92%; }
.about-schematic-lines { fill: none; stroke: rgba(201,224,210,.72); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.about-schematic-node { fill: var(--accent); }
.schematic-label { position: absolute; z-index: 2; color: var(--accent); font: 7px/1.5 var(--mono); letter-spacing: .08em; }
.schematic-label-a { left: 10%; top: 24%; }
.schematic-label-b { right: 9%; top: 25%; text-align: right; }
.schematic-label-c { right: 9%; bottom: 17%; text-align: right; }
@media(max-width:760px) {
 .bayside-section { padding: 62px 0 76px; }
 .bayside-section .section-heading { align-items: start; }
 .bayside-grid { grid-template-columns: 1fr; gap: 34px; }
 .school-photo-wrap { aspect-ratio: 1.35; }
 .bayside-edition { max-width: 105px; line-height: 1.6; text-align: right; }
 .cte-flow { flex-wrap: wrap; justify-content: center; }
}
@media(max-width:430px) {
 .cte-flow { gap: 8px; font-size: 7px; }
 .cte-flow i { font-size: 11px; }
}

@media(min-width:761px) { .hero-title { font-size: clamp(68px, 8vw, 116px); } }

/* Train case-study media and featured project cards. */
.project-art.has-image::before { display: none; }
.project-art-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #f4f6f7;
}
.project-art.has-image .art-tag {
  z-index: 2;
  padding: 7px 9px;
  color: #e9f6f1;
  background: rgba(16,21,19,.88);
}
.project-art.has-image .art-index { z-index: 2; }
.featured-grid-two { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media(max-width:760px) {
  .train-gallery { grid-template-columns: 1fr; }
  .featured-grid-two { grid-template-columns: 1fr; }
}

/* Cross-disciplinary infographic on the landing page. */
.systems-lens {
  position: relative;
  padding-top: 88px;
  padding-bottom: 100px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(128,212,188,.025) 48%, transparent);
}
.systems-lens-head { align-items: end; margin-bottom: 0; }
.systems-lens-head h2 { margin: 0; font-size: clamp(36px,5vw,62px); font-weight: 500; line-height: 1.08; }
.systems-lens-head h2 em { color: var(--accent); font-family: Georgia,serif; font-weight: 400; }
.systems-lens-lede { max-width: 355px; margin: 0 0 3px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.systems-map { position: relative; padding-top: 88px; }
.systems-route { position: absolute; z-index: 0; top: -19px; left: 0; width: 100%; height: 105px; overflow: visible; }
.systems-route-base,.systems-route-flow { fill: none; stroke-linecap: round; stroke-width: 1.3; }
.systems-route-base { stroke: var(--line-strong); }
.systems-route-flow { stroke: var(--accent); stroke-dasharray: 3 13; opacity: .8; }
.systems-route-points circle { fill: var(--bg); stroke: var(--accent); stroke-width: 1.4; }
.systems-steps { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin: 0; padding: 0; list-style: none; }
.system-step { position: relative; min-height: 174px; padding: 18px 17px 21px; border: 1px solid var(--line); background: var(--surface-soft); transition: transform .4s var(--ease), border-color .35s, background .35s; }
.system-step:hover { transform: translateY(-5px); border-color: rgba(128,212,188,.55); background: var(--surface); }
.system-step-label { display: block; color: var(--dim); font: 8px var(--mono); letter-spacing: .11em; }
.system-step-icon { display: grid; place-items: center; width: 34px; height: 34px; margin: 19px 0 12px; border: 1px solid rgba(128,212,188,.38); border-radius: 50%; color: var(--accent); font: 17px Georgia,serif; }
.system-step h3 { margin: 0 0 6px; font-size: 15px; font-weight: 550; letter-spacing: -.025em; }
.system-step p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }

/* Skills network: a visual map, not a quantitative proficiency chart. */
.skills-network { position: relative; max-width: 340px; margin-top: 35px; aspect-ratio: 1.52; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle at center, rgba(128,212,188,.09), transparent 45%), var(--surface-soft); }
.skills-network svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.network-lines { fill: none; stroke: rgba(128,212,188,.42); stroke-width: 1.2; stroke-dasharray: 4 6; }
.network-point { fill: var(--bg); stroke: var(--accent); stroke-width: 1.7; }
.network-hub { fill: rgba(128,212,188,.08); stroke: var(--accent); stroke-width: 1.2; }
.network-label { position: absolute; color: var(--text); font: 8px var(--mono); letter-spacing: .13em; }
.network-label-top { top: 11%; left: 50%; transform: translateX(-50%); }
.network-label-right { top: 48%; right: 7%; }
.network-label-bottom { bottom: 10%; left: 50%; transform: translateX(-50%); }
.network-label-left { top: 48%; left: 7%; }
.network-core { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 48px; height: 48px; transform: translate(-50%,-50%); border: 1px solid rgba(128,212,188,.42); border-radius: 50%; color: var(--accent); background: var(--bg); font: 10px var(--mono); letter-spacing: .12em; }
.skills-network-caption { margin: 10px 0 0; color: var(--dim); font: 8px var(--mono); letter-spacing: .08em; }

/* Subtle motion ties diagrams, cards, and timeline details together. */
.project-art-image,.gallery-media img { transition: transform .85s var(--ease), filter .5s; }
.project-card:hover .project-art-image,.gallery-item:hover .gallery-media img { transform: scale(1.035); }
.project-art::after { position: absolute; z-index: 1; content: ""; inset: -60% auto -60% -28%; width: 20%; transform: rotate(18deg); opacity: 0; background: linear-gradient(90deg,transparent,rgba(255,255,255,.11),transparent); transition: transform .75s var(--ease),opacity .25s; pointer-events: none; }
.project-card:hover .project-art::after { transform: translateX(650%) rotate(18deg); opacity: 1; }
.timeline-dot { transition: box-shadow .35s,border-color .35s,transform .35s; }
.timeline-item:hover .timeline-dot { transform: scale(1.2); border-color: var(--accent); box-shadow: 0 0 0 6px rgba(128,212,188,.07),0 0 20px rgba(128,212,188,.16); }
.contact-page:before { transform-origin: center; }

@keyframes routeDrift { to { stroke-dashoffset: -160; } }
@keyframes schematicDrift { to { stroke-dashoffset: -90; } }
@keyframes nodeBloom { 0%,100% { opacity: .8; filter: drop-shadow(0 0 0 rgba(128,212,188,0)); } 50% { opacity: 1; filter: drop-shadow(0 0 7px rgba(128,212,188,.55)); } }
@keyframes chipRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slowRing { to { transform: rotate(360deg); } }
@media(prefers-reduced-motion:no-preference) {
  .systems-route-flow { animation: routeDrift 12s linear infinite; }
  .systems-route-points circle,.network-point { animation: nodeBloom 3.3s ease-in-out infinite; }
  .systems-route-points circle:nth-child(2),.network-point:nth-of-type(2) { animation-delay: .45s; }
  .systems-route-points circle:nth-child(3),.network-point:nth-of-type(3) { animation-delay: .9s; }
  .systems-route-points circle:nth-child(4),.network-point:nth-of-type(4) { animation-delay: 1.35s; }
  .portrait-panel.is-visible .about-schematic-lines { stroke-dasharray: 5 5; animation: schematicDrift 16s linear infinite; }
  .portrait-panel.is-visible .about-schematic-node circle { animation: nodeBloom 3.1s ease-in-out infinite; }
  .portrait-panel.is-visible .about-schematic-node circle:nth-child(2) { animation-delay: .55s; }
  .portrait-panel.is-visible .about-schematic-node circle:nth-child(3) { animation-delay: 1.1s; }
  .skills-intro.is-visible .network-lines { animation: schematicDrift 10s linear infinite; }
  .skills-intro.is-visible .network-point { animation: nodeBloom 3.3s ease-in-out infinite; }
  .skill-group.is-visible .skill-chip { animation: chipRise .45s var(--ease) both; }
  .skill-group.is-visible .skill-chip:nth-child(2) { animation-delay: .05s; }
  .skill-group.is-visible .skill-chip:nth-child(3) { animation-delay: .1s; }
  .skill-group.is-visible .skill-chip:nth-child(4) { animation-delay: .15s; }
  .skill-group.is-visible .skill-chip:nth-child(5) { animation-delay: .2s; }
  .contact-page:before { animation: slowRing 110s linear infinite; }
}
@media(max-width:900px) {
  .systems-lens-head { align-items: start; }
  .systems-lens-lede { max-width: 285px; }
  .systems-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .systems-route { display: none; }
  .systems-map { padding-top: 34px; }
}
@media(max-width:560px) {
  .systems-lens { padding-top: 64px; padding-bottom: 70px; }
  .systems-lens-head { display: block; }
  .systems-lens-lede { margin-top: 17px; }
  .systems-steps { grid-template-columns: 1fr; gap: 9px; }
  .system-step { min-height: 0; padding: 15px 16px; }
  .system-step-icon { float: right; margin: 2px 0 0; }
  .system-step h3 { margin-top: 13px; }
  .skills-network { max-width: 100%; }
}

/* Full SolidWorks train case study. Each section pairs project evidence with a small diagram. */
.train-hero-art { aspect-ratio: 1.18; background: #f4f6f7; }
.train-hero-art:before { background: none; }
.train-hero-art .project-hero-image { padding: 42px 14px 18px; }
.train-hero-guides { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(24,92,73,.42); stroke-width: 1; pointer-events: none; }
.train-hero-guides circle:not(.hero-guide-node) { stroke-dasharray: 2 8; transform-origin: center; animation: slowRing 80s linear infinite; }
.train-hero-guides path { stroke-dasharray: 4 7; opacity: .7; }
.hero-guide-node { fill: #80d4bc; stroke: #17392e; }
.train-hero-stamp { display: flex; align-items: center; gap: 9px; margin-top: 26px; color: var(--dim); font: 8px var(--mono); letter-spacing: .12em; }
.train-hero-stamp b { margin-left: auto; color: var(--accent); font-weight: 400; }
.train-stamp-pulse,.finance-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(128,212,188,.08); }
.train-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 45px; margin-bottom: 38px; }
.train-section-heading .eyebrow { margin-bottom: 15px; }
.train-section-heading h2 { margin: 0; font-size: clamp(37px,5vw,63px); font-weight: 500; line-height: 1.06; letter-spacing: -.055em; }
.train-section-heading h2 em { color: var(--accent); font-family: Georgia,serif; font-weight: 400; }
.train-section-heading>p { max-width: 390px; margin: 0 0 4px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.train-brief { padding-top: 91px; padding-bottom: 100px; border-top: 1px solid var(--line); }
.train-process-map { position: relative; padding-top: 80px; }
.train-process-rail { position: absolute; top: -20px; left: 0; width: 100%; height: 100px; overflow: visible; }
.train-process-rail path { fill: none; stroke-linecap: round; stroke-width: 1.2; }
.train-process-rail .rail-base { stroke: var(--line-strong); }
.train-process-rail .rail-flow { stroke: var(--accent); stroke-dasharray: 3 12; }
.train-process-rail circle { fill: var(--bg); stroke: var(--accent); stroke-width: 1.6; }
.train-process-steps { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.train-process-step { min-height: 135px; padding: 17px 16px; border: 1px solid var(--line); background: var(--surface-soft); transition: transform .35s var(--ease),border-color .35s; }
.train-process-step:hover { transform: translateY(-4px); border-color: var(--accent); }
.train-process-step span { display: block; color: var(--accent); font: 8px var(--mono); letter-spacing: .1em; }
.train-process-step strong { display: block; margin-top: 20px; font-size: 14px; font-weight: 550; }
.train-process-step small { display: block; margin-top: 7px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.train-brief-note { display: flex; align-items: start; gap: 13px; max-width: 700px; margin: 30px 0 0 auto; padding-top: 20px; border-top: 1px solid var(--line); }
.train-brief-note .note-marker { color: var(--accent); font: 18px var(--body); }
.train-brief-note p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.train-brief-note strong { color: var(--text); font-weight: 550; }
.train-components-section { padding: 89px 0 101px; background: var(--bg-raised); }
.train-component-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.train-component-card { min-width: 0; margin: 0; border: 1px solid var(--line); background: var(--surface-soft); transition: transform .45s var(--ease),border-color .35s; }
.train-component-card:hover { transform: translateY(-6px); border-color: rgba(128,212,188,.55); }
.component-image { position: relative; display: grid; place-items: center; aspect-ratio: 1.32; overflow: hidden; background: #f3f5f7; }
.component-image img { width: 100%; height: 100%; padding: 12px; object-fit: contain; transition: transform .75s var(--ease); }
.train-component-card:hover .component-image img { transform: scale(1.055); }
.component-number { position: absolute; z-index: 2; top: 11px; left: 12px; padding: 5px 7px; color: #eaf5f0; background: rgba(16,21,19,.86); font: 8px var(--mono); }
.component-orbit { position: absolute; inset: 13% 17%; border: 1px solid rgba(24,92,73,.15); border-radius: 50%; transform: rotate(-25deg); pointer-events: none; }
.train-component-card:nth-child(2) .component-orbit { inset: 17% 24%; }
.train-component-card:nth-child(3) .component-orbit { inset: 30% 7%; border-radius: 45%; }
.train-component-card figcaption { padding: 18px 18px 20px; }
.train-component-card figcaption>span { color: var(--dim); font: 8px var(--mono); letter-spacing: .12em; }
.train-component-card h3 { margin: 9px 0 6px; font-size: 19px; font-weight: 500; }
.train-component-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.75; }
.train-view-section { padding-top: 88px; padding-bottom: 94px; border-top: 1px solid var(--line); }
.train-view-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.train-view-card { min-width: 0; margin: 0; }
.train-view-card>div { position: relative; display: grid; place-items: center; aspect-ratio: 1.48; overflow: hidden; border: 1px solid var(--line); background: #f3f5f7; }
.train-view-card img { width: 100%; height: 100%; padding: 9px; object-fit: contain; transition: transform .75s var(--ease); }
.train-view-card:hover img { transform: scale(1.045); }
.train-view-card>div>span { position: absolute; top: 10px; left: 10px; padding: 5px 7px; color: #eaf5f0; background: rgba(16,21,19,.85); font: 7px var(--mono); letter-spacing: .08em; }
.train-view-card figcaption { padding-top: 9px; color: var(--dim); font-size: 9px; line-height: 1.6; }
.train-sketch-section { padding-top: 92px; padding-bottom: 100px; }
.train-sketch-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.train-sketch-card { min-width: 0; margin: 0; }
.train-sketch-image { position: relative; display: grid; place-items: center; aspect-ratio: 1.44; overflow: hidden; border: 1px solid var(--line); background: #f4f6f7; }
.train-sketch-image img { width: 100%; height: 100%; padding: 11px; object-fit: contain; transition: transform .7s var(--ease); }
.train-sketch-card:hover img { transform: scale(1.035); }
.train-sketch-image svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(39,129,103,.7); stroke-width: 1.2; stroke-dasharray: 5 8; pointer-events: none; }
.train-sketch-image svg circle { fill: #80d4bc; stroke: #1e705b; }
.sketch-index { position: absolute; right: 12px; bottom: 11px; padding: 5px 7px; color: var(--text); background: rgba(244,246,247,.85); font: 8px var(--mono); letter-spacing: .1em; }
.train-sketch-card figcaption { display: flex; justify-content: space-between; gap: 14px; padding-top: 12px; color: var(--dim); font-size: 9px; }
.train-sketch-card figcaption b { color: var(--text); font-size: 10px; font-weight: 550; }
.train-sketch-flow { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 740px; margin: 38px auto 0; padding: 16px 20px; border: 1px solid var(--line); color: var(--muted); font: 8px var(--mono); letter-spacing: .1em; }
.train-sketch-flow i { color: var(--accent); font: normal 14px var(--body); }
.train-motion-section { padding: 88px 0 98px; background: var(--bg-raised); }
.train-motion-layout { display: grid; grid-template-columns: 1.25fr .75fr; align-items: stretch; gap: 18px; }
.train-video-frame,.train-mechanism-card { min-width: 0; border: 1px solid var(--line); background: var(--surface-soft); }
.train-video-frame { padding: 12px; }
.train-video-frame video { display: block; width: 100%; aspect-ratio: 1.62; background: #070909; object-fit: contain; }
.video-meta { display: flex; justify-content: space-between; gap: 12px; padding: 12px 3px 1px; color: var(--dim); font: 8px var(--mono); letter-spacing: .09em; }
.train-mechanism-card { display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 22px 17px 16px; }
.train-mechanism-card>.eyebrow { color: var(--accent); font: 8px var(--mono); letter-spacing: .1em; }
.mechanism-svg { width: 100%; max-height: 280px; margin: 16px auto; overflow: visible; }
.mechanism-track { fill: none; stroke: var(--line-strong); stroke-width: 1.2; stroke-dasharray: 3 7; }
.mechanism-wheel { fill: none; stroke: rgba(207,225,214,.75); stroke-width: 2; stroke-linecap: round; }
.mechanism-wheel circle:first-child { stroke: var(--accent); }
.mechanism-wheel circle:nth-child(2) { fill: var(--surface); stroke: var(--accent); }
.mechanism-arm { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.mechanism-joint { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
.train-mechanism-card figcaption { color: var(--muted); font-size: 9px; line-height: 1.7; }
.train-finance-section { padding: 91px 0 100px; border-top: 1px solid var(--line); background: var(--bg-raised); }
.train-finance-wrap .train-section-heading { margin-bottom: 32px; }
.finance-documentation-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(32px,6vw,78px); align-items: center; }
.finance-reflection p { max-width: 650px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.finance-reflection p:first-child { margin-top: 0; }
.finance-map { position: relative; min-width: 0; padding: 18px 18px 14px; border: 1px solid var(--line); background: var(--surface-soft); overflow: hidden; }
.finance-map-head { display: flex; align-items: center; justify-content: space-between; color: var(--dim); font: 8px var(--mono); letter-spacing: .1em; }
.finance-map svg { display: block; width: 100%; height: 180px; margin-top: 9px; overflow: visible; }
.finance-map svg circle { fill: var(--bg); stroke: var(--accent); stroke-width: 1.4; }
.finance-path,.finance-path-flow { fill: none; stroke-linecap: round; stroke-width: 1.2; }
.finance-path { stroke: var(--line-strong); }
.finance-path-flow { stroke: var(--accent); stroke-dasharray: 3 10; }
.finance-map-labels { position: absolute; top: 52%; left: 2%; right: 2%; display: grid; grid-template-columns: repeat(4,1fr); transform: translateY(-50%); color: var(--text); font: 7px/1.45 var(--mono); letter-spacing: .05em; text-align: center; }
.finance-map>p { margin: -6px 0 0; color: var(--dim); font: 8px var(--mono); text-align: center; }
.train-outcome-section { padding-top: 92px; padding-bottom: 36px; }
.train-outcome-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.train-outcome-card { position: relative; min-height: 180px; padding: 23px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-soft); }
.train-outcome-card>strong { position: relative; z-index: 1; display: block; color: var(--accent); font: 34px var(--display); letter-spacing: -.06em; }
.train-outcome-card h3 { position: relative; z-index: 1; margin: 14px 0 7px; font-size: 14px; font-weight: 550; }
.train-outcome-card p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.7; }
.outcome-ring { position: absolute; top: -35px; right: -23px; width: 118px; aspect-ratio: 1; border: 1px solid rgba(128,212,188,.25); border-radius: 50%; box-shadow: 0 0 0 18px rgba(128,212,188,.025),0 0 0 37px rgba(128,212,188,.02); }
.train-scope-note { display: grid; grid-template-columns: 150px 1fr; gap: 20px; margin-top: 24px; padding: 18px 0 34px; border-top: 1px solid var(--line); }
.train-scope-note>span { color: var(--accent); font: 8px var(--mono); letter-spacing: .1em; }
.train-scope-note p { max-width: 650px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.8; }
@keyframes trainRailMove { to { stroke-dashoffset: -150; } }
@keyframes wheelTurn { to { transform: rotate(360deg); } }
@keyframes componentOrbit { to { transform: rotate(335deg) scale(.98); } }
@keyframes sketchMarch { to { stroke-dashoffset: -80; } }
@media(prefers-reduced-motion:no-preference) {
  .train-process-rail .rail-flow,.finance-path-flow { animation: trainRailMove 11s linear infinite; }
  .train-process-rail circle,.finance-map svg circle { animation: nodeBloom 3.2s ease-in-out infinite; }
  .train-process-rail circle:nth-child(2) { animation-delay: .4s; }
  .train-process-rail circle:nth-child(3) { animation-delay: .8s; }
  .train-process-rail circle:nth-child(4) { animation-delay: 1.2s; }
  .component-orbit { animation: componentOrbit 24s linear infinite; }
  .train-sketch-image svg { animation: sketchMarch 12s linear infinite; }
  .mechanism-wheel { transform-box: view-box; }
  .wheel-a { transform-origin: 150px 180px; animation: wheelTurn 18s linear infinite; }
  .wheel-b { transform-origin: 350px 180px; animation: wheelTurn 18s linear infinite reverse; }
  .train-stamp-pulse,.finance-live-dot { animation: nodeBloom 2.8s ease-in-out infinite; }
  .outcome-ring { animation: slowRing 44s linear infinite; }
}
@media(max-width:900px) {
  .train-section-heading { align-items: start; }
  .train-section-heading>p { max-width: 320px; }
  .train-process-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .train-process-rail { display: none; }
  .train-process-map { padding-top: 8px; }
  .train-view-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .train-motion-layout,.finance-documentation-grid { grid-template-columns: 1fr; }
  .train-mechanism-card { min-height: 320px; }
  .mechanism-svg { max-width: 520px; }
}
@media(max-width:600px) {
  .train-hero-art { aspect-ratio: 1.1; }
  .train-hero-stamp { margin-top: 18px; }
  .train-section-heading { display: block; margin-bottom: 27px; }
  .train-section-heading>p { margin-top: 15px; }
  .train-brief,.train-view-section,.train-sketch-section,.train-outcome-section { padding-top: 65px; }
  .train-components-section,.train-motion-section,.train-finance-section { padding-top: 64px; padding-bottom: 70px; }
  .train-process-steps,.train-component-grid,.train-view-grid,.train-sketch-layout,.train-outcome-grid { grid-template-columns: 1fr; }
  .train-process-step { min-height: 0; }
  .train-process-step strong { margin-top: 12px; }
  .component-image { aspect-ratio: 1.5; }
  .train-sketch-image { aspect-ratio: 1.15; }
  .train-sketch-card figcaption { flex-direction: column; gap: 5px; }
  .train-sketch-flow { flex-wrap: wrap; justify-content: center; gap: 9px; padding: 14px 10px; font-size: 7px; }
  .train-video-frame { padding: 8px; }
  .video-meta { font-size: 7px; }
  .train-mechanism-card { min-height: 0; padding: 18px 12px; }
  .finance-map { padding-inline: 9px; }
  .finance-map-labels { left: 0; right: 0; font-size: 6px; }
  .train-scope-note { grid-template-columns: 1fr; gap: 8px; }
}

/* SolidWorks explainer and dedicated train thumbnail. */
.train-software-section { padding-top: 84px; padding-bottom: 91px; border-top: 1px solid var(--line); }
.solidworks-explainer { display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: 30px; min-height: 205px; padding: 24px 30px; border: 1px solid var(--line); background: var(--surface-soft); }
.solidworks-explainer-copy .eyebrow { color: var(--accent); font: 8px var(--mono); letter-spacing: .12em; }
.solidworks-explainer-copy p { max-width: 330px; margin: 13px 0 0; color: var(--muted); font-size: 11px; line-height: 1.9; }
.solidworks-explainer-svg { width: 100%; overflow: visible; fill: none; stroke: var(--line-strong); stroke-width: 1.2; }
.solidworks-explainer-svg .sw-flow-track,.solidworks-explainer-svg .sw-flow-pulse { stroke-linecap: round; }
.solidworks-explainer-svg .sw-flow-track { stroke: var(--line-strong); }
.solidworks-explainer-svg .sw-flow-pulse { stroke: var(--accent); stroke-dasharray: 3 14; }
.solidworks-explainer-svg .sw-flow-node circle { fill: var(--bg-raised); stroke: var(--accent); stroke-width: 1.3; }
.solidworks-explainer-svg .sw-flow-node path { stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; }
.solidworks-explainer-svg .sw-flow-labels { fill: var(--dim); stroke: none; font: 8px var(--mono); letter-spacing: 1px; text-anchor: middle; }
.train-component-card figcaption p strong { color: var(--text); font-weight: 550; }
@media(prefers-reduced-motion:no-preference) {
  .solidworks-explainer-svg .sw-flow-pulse { animation: trainRailMove 12s linear infinite; }
  .solidworks-explainer-svg .sw-flow-node { transform-box: fill-box; transform-origin: center; animation: nodeBloom 3.8s ease-in-out infinite; }
  .solidworks-explainer-svg .sw-flow-node:nth-of-type(2) { animation-delay: .35s; }
  .solidworks-explainer-svg .sw-flow-node:nth-of-type(3) { animation-delay: .7s; }
  .solidworks-explainer-svg .sw-flow-node:nth-of-type(4) { animation-delay: 1.05s; }
}
@media(max-width:900px) {
  .solidworks-explainer { grid-template-columns: 1fr; gap: 9px; }
}
@media(max-width:600px) {
  .train-software-section { padding-top: 64px; padding-bottom: 70px; }
  .solidworks-explainer { padding: 20px 16px; }
  .solidworks-explainer-svg { min-height: 130px; }
}

/* VEX V5 Speedbot case study: engineering log, control diagrams, and notebook photographs. */
.vex-hero { padding-top: 28px; padding-bottom: 68px; }
.vex-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(34px,7vw,96px); margin-top: 34px; }
.vex-hero-copy h1 { margin: 16px 0 22px; font-size: clamp(58px,8vw,108px); font-weight: 500; line-height: .9; letter-spacing: -.075em; }
.vex-hero-copy h1 em,.vex-section-heading h2 em,.vex-vision-copy h2 em,.vex-next-copy h2 em { color: var(--accent); font-family: Georgia,serif; font-weight: 400; }
.vex-lede { max-width: 600px; color: var(--muted); font-size: clamp(14px,1.35vw,17px); line-height: 1.85; }
.vex-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 24px; margin-top: 28px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vex-facts div:last-child { grid-column: 1 / -1; }
.vex-facts span,.vex-intro-card>span,.vex-code-card-head,.vex-challenge-card>span { display: block; color: var(--accent); font: 8px var(--mono); letter-spacing: .12em; }
.vex-facts strong { display: block; margin-top: 7px; font-size: 12px; font-weight: 500; }
.vex-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.vex-hero-image { position: relative; aspect-ratio: .92; margin: 0; overflow: hidden; border: 1px solid var(--line-strong); background: #0a302e; }
.vex-hero-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease),filter .45s; }
.vex-hero-image:hover img { transform: scale(1.035); filter: saturate(1.12); }
.vex-image-label { position: absolute; top: 14px; left: 14px; padding: 8px 10px; color: #eff8f3; background: rgba(8,35,33,.86); font: 8px var(--mono); letter-spacing: .1em; }
.vex-image-cross { position: absolute; right: 23px; bottom: 53px; width: 25px; height: 25px; border: 1px solid rgba(177,233,216,.8); border-radius: 50%; }
.vex-image-cross:before,.vex-image-cross:after { position: absolute; content: ""; background: rgba(177,233,216,.8); }
.vex-image-cross:before { top: 12px; left: -8px; width: 39px; height: 1px; }
.vex-image-cross:after { top: -8px; left: 12px; width: 1px; height: 39px; }
.vex-hero-image figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 34px 14px 12px; color: #eef6f1; background: linear-gradient(transparent,rgba(4,22,20,.82)); font-size: 9px; }
.vex-scope-line { display: flex; align-items: center; gap: 13px; margin-top: 34px; padding-top: 17px; border-top: 1px solid var(--line); }
.vex-scope-line p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.vex-scope-line p strong { margin-right: 7px; color: var(--text); font-weight: 550; }
.vex-date { margin-left: auto; color: var(--dim); font: 8px var(--mono); letter-spacing: .1em; white-space: nowrap; }
.vex-pulse,.vex-live-indicator i,.vex-cost-head i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(128,212,188,.1); }
.vex-overview,.vex-control-section,.vex-results-section { padding-top: 88px; padding-bottom: 96px; border-top: 1px solid var(--line); }
.vex-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 34px; }
.vex-section-heading .eyebrow { margin-bottom: 14px; }
.vex-section-heading h2,.vex-vision-copy h2,.vex-next-copy h2 { margin: 0; font-size: clamp(38px,5.4vw,66px); font-weight: 500; line-height: 1.04; letter-spacing: -.055em; }
.vex-section-heading>p { max-width: 410px; margin: 0 0 4px; color: var(--muted); font-size: 12px; line-height: 1.85; }
.vex-system-card { position: relative; margin-bottom: 16px; padding: 17px 22px 16px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-soft); }
.vex-system-heading,.vex-cost-head { display: flex; align-items: center; justify-content: space-between; color: var(--dim); font: 8px var(--mono); letter-spacing: .12em; }
.vex-live-indicator { display: flex; align-items: center; gap: 10px; color: var(--accent); }
.vex-system-svg { width: 100%; margin-top: 8px; fill: none; stroke: var(--line-strong); stroke-width: 1.3; }
.vex-system-svg .vex-route-flow { stroke: var(--accent); stroke-dasharray: 3 13; stroke-linecap: round; }
.vex-system-svg .vex-return-loop { stroke: var(--line); stroke-dasharray: 2 7; }
.vex-system-svg .vex-node circle { fill: var(--bg-raised); stroke: var(--accent); stroke-width: 1.3; }
.vex-system-svg .vex-node path,.vex-system-svg .vex-node rect { stroke: var(--accent); stroke-linejoin: round; }
.vex-system-svg .vex-system-labels,.vex-system-svg .vex-system-caption { fill: var(--dim); stroke: none; font: 8px var(--mono); letter-spacing: 1px; text-anchor: middle; }
.vex-system-svg .vex-system-caption { fill: var(--accent); font-size: 7px; }
.vex-system-foot { display: flex; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font: 8px var(--mono); }
.vex-intro-columns { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.vex-intro-card { min-height: 176px; padding: 20px; border: 1px solid var(--line); background: var(--surface-soft); }
.vex-intro-card h3 { margin: 16px 0 8px; font-size: 17px; font-weight: 500; }
.vex-intro-card p,.vex-challenge-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.8; }
.vex-timeline-section,.vex-iteration-section,.vex-gallery-section,.vex-reflection-section { padding: 88px 0 96px; background: var(--bg-raised); }
.vex-timeline { position: relative; display: grid; gap: 0; max-width: 940px; margin: 0 auto; padding: 0; list-style: none; }
.vex-timeline:before { position: absolute; top: 8px; bottom: 12px; left: 121px; width: 1px; content: ""; background: var(--line-strong); }
.vex-timeline-item { position: relative; display: grid; grid-template-columns: 104px 1fr; gap: 36px; padding: 0 0 28px; }
.vex-timeline-item:before { position: absolute; top: 4px; left: 116px; width: 10px; height: 10px; content: ""; border: 1px solid var(--accent); border-radius: 50%; background: var(--bg-raised); }
.vex-timeline-date { color: var(--accent); font: 8px var(--mono); letter-spacing: .08em; }
.vex-timeline-item h3 { margin: -4px 0 7px; font-size: 17px; font-weight: 500; }
.vex-timeline-item p { max-width: 720px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.85; }
.vex-timeline-tag { display: inline-block; margin-top: 11px; color: var(--dim); font: 7px var(--mono); letter-spacing: .1em; }
.vex-code-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.vex-code-card { padding: 20px; border: 1px solid var(--line); background: var(--surface-soft); }
.vex-code-card-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.vex-code-card-head span:last-child { color: var(--dim); }
.vex-code-card h3 { margin: 18px 0 8px; font-size: 18px; font-weight: 500; }
.vex-code-card p { color: var(--muted); font-size: 10px; line-height: 1.8; }
.vex-code-card pre { margin: 15px 0 10px; padding: 14px; overflow-x: auto; border: 1px solid var(--line); background: #08100e; color: #bfe8d8; font: 9px/1.8 var(--mono); tab-size: 4; }
.vex-code-note { margin-bottom: 0; color: var(--dim) !important; font-size: 8px !important; }
.vex-code-card-wide { grid-column: 1 / -1; }
.vex-code-wide-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; }
.vex-code-wide-layout pre { align-self: center; }
.vex-algorithm { position: relative; margin-top: 24px; padding: 19px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-soft); }
.vex-algorithm-title { display: block; color: var(--accent); font: 8px var(--mono); letter-spacing: .12em; }
.vex-algorithm ol { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin: 19px 0 0; padding: 0; list-style: none; }
.vex-algorithm li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.vex-algorithm li b { color: var(--accent); font: 9px var(--mono); }
.vex-algorithm svg { position: absolute; right: 0; bottom: 16px; left: 0; width: 100%; height: 28px; fill: none; stroke: var(--line-strong); stroke-width: 1; }
.vex-algorithm svg .vex-algorithm-flow { stroke: var(--accent); stroke-dasharray: 3 13; }
.vex-challenge-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.vex-challenge-card { min-height: 228px; padding: 18px; border: 1px solid var(--line); background: var(--surface-soft); transition: transform .35s var(--ease),border-color .35s; }
.vex-challenge-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.vex-challenge-card h3 { margin: 15px 0 8px; font-size: 16px; font-weight: 500; line-height: 1.35; }
.vex-fix-line { display: grid; gap: 4px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 8px; line-height: 1.6; }
.vex-fix-line b { color: var(--accent); font: 7px var(--mono); letter-spacing: .1em; }
.vex-fix-line span { color: var(--dim); }
.vex-debug-note { display: flex; gap: 12px; max-width: 750px; margin: 24px 0 0 auto; padding-top: 17px; border-top: 1px solid var(--line); }
.vex-debug-mark { color: var(--accent); }
.vex-debug-note p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.8; }
.vex-debug-note strong { color: var(--text); font-weight: 550; }
.vex-results-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.vex-result-card { position: relative; min-height: 210px; padding: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-soft); }
.vex-result-card>b { position: relative; z-index: 1; display: block; color: var(--accent); font: 26px var(--display); letter-spacing: -.06em; }
.vex-result-card h3,.vex-result-card p,.vex-result-foot { position: relative; z-index: 1; }
.vex-result-card h3 { margin: 18px 0 7px; font-size: 12px; font-weight: 550; }
.vex-result-card p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.7; }
.vex-result-foot { display: block; margin-top: 12px; color: var(--dim); font: 7px var(--mono); letter-spacing: .1em; }
.vex-result-ring { position: absolute; right: -25px; bottom: -35px; width: 100px; height: 100px; border: 1px solid rgba(128,212,188,.2); border-radius: 50%; }
.vex-result-ring:before,.vex-result-ring:after { position: absolute; content: ""; border: 1px solid rgba(128,212,188,.14); border-radius: 50%; }
.vex-result-ring:before { inset: 12px; }.vex-result-ring:after { inset: 25px; }
.vex-gallery-section { border-top: 1px solid var(--line); }
.vex-gallery-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.vex-gallery-item { min-width: 0; margin: 0; }
.vex-gallery-item>div { position: relative; aspect-ratio: 1.1; overflow: hidden; border: 1px solid var(--line); background: #0b302d; }
.vex-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease),filter .4s; }
.vex-gallery-item:hover img { transform: scale(1.04); filter: saturate(1.12); }
.vex-gallery-item>div>span { position: absolute; top: 10px; left: 10px; padding: 6px 8px; color: #eaf5ef; background: rgba(8,31,29,.86); font: 7px var(--mono); letter-spacing: .08em; }
.vex-gallery-item figcaption { padding-top: 8px; color: var(--dim); font-size: 9px; line-height: 1.6; }
.vex-gallery-wide { grid-column: span 2; grid-row: span 2; }
.vex-gallery-wide>div { aspect-ratio: 1.12; }
.vex-vision-section { display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 54px; padding-top: 88px; padding-bottom: 94px; }
.vex-vision-copy h2 { margin: 14px 0 18px; }
.vex-vision-copy p:not(.eyebrow) { color: var(--muted); font-size: 11px; line-height: 1.9; }
.vex-vision-figure { margin: 0; border: 1px solid var(--line); background: var(--surface-soft); }
.vex-vision-figure img { width: 100%; aspect-ratio: 1.2; object-fit: cover; }
.vex-vision-figure figcaption { display: flex; justify-content: space-between; gap: 8px; padding: 12px; color: var(--accent); font: 7px var(--mono); letter-spacing: .08em; }
.vex-reflection-section { border-top: 1px solid var(--line); }
.vex-reflection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.vex-reflection-copy p { margin: 0 0 14px; color: var(--muted); font-size: 11px; line-height: 1.95; }
.vex-cost-map { padding: 18px; border: 1px solid var(--line); background: var(--surface-soft); }
.vex-cost-head { color: var(--accent); }
.vex-cost-map svg { width: 100%; margin-top: 13px; overflow: visible; fill: none; stroke: var(--line-strong); stroke-width: 1.2; }
.vex-cost-map svg .vex-cost-flow { stroke: var(--accent); stroke-dasharray: 3 12; }
.vex-cost-map svg circle { fill: var(--bg-raised); stroke: var(--accent); }
.vex-cost-labels { display: grid; grid-template-columns: repeat(4,1fr); margin-top: -34px; text-align: center; color: var(--muted); font: 7px/1.5 var(--mono); }
.vex-cost-map>p { margin: 30px 0 0; color: var(--dim); font-size: 8px; text-align: center; }
.vex-next-section { display: grid; grid-template-columns: 1fr .85fr; align-items: center; gap: 52px; padding-top: 89px; padding-bottom: 96px; }
.vex-next-copy h2 { margin: 14px 0; font-size: clamp(34px,4.5vw,55px); }
.vex-next-copy>p:last-child { max-width: 560px; color: var(--muted); font-size: 11px; line-height: 1.9; }
.vex-next-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.vex-next-list li { display: grid; grid-template-columns: 35px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.6; }
.vex-next-list li span { color: var(--accent); font: 8px var(--mono); }
@keyframes vexFlow { to { stroke-dashoffset: -140; } }
@media(prefers-reduced-motion:no-preference) {
  .vex-system-svg .vex-route-flow,.vex-algorithm-flow,.vex-cost-flow { animation: vexFlow 13s linear infinite; }
  .vex-node { transform-box: fill-box; transform-origin: center; animation: nodeBloom 4s ease-in-out infinite; }
  .vex-node:nth-of-type(2) { animation-delay: .45s; }.vex-node:nth-of-type(3) { animation-delay: .9s; }.vex-node:nth-of-type(4) { animation-delay: 1.35s; }
  .vex-pulse,.vex-live-indicator i,.vex-cost-head i { animation: nodeBloom 2.8s ease-in-out infinite; }
  .vex-result-ring { animation: slowRing 38s linear infinite; }
}
@media(max-width:900px) {
  .vex-hero-grid,.vex-vision-section,.vex-reflection-grid,.vex-next-section { grid-template-columns: 1fr; }
  .vex-hero-image { max-height: 620px; aspect-ratio: 1.25; }
  .vex-hero-grid { gap: 32px; }
  .vex-section-heading { align-items: start; }
  .vex-section-heading>p { max-width: 330px; }
  .vex-code-card-wide { grid-column: auto; }
  .vex-challenge-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .vex-results-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .vex-gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .vex-vision-section,.vex-next-section { gap: 26px; }
}
@media(max-width:600px) {
  .vex-hero { padding-bottom: 52px; }
  .vex-hero-copy h1 { font-size: clamp(54px,16vw,80px); }
  .vex-facts { grid-template-columns: 1fr; gap: 14px; }
  .vex-facts div:last-child { grid-column: auto; }
  .vex-scope-line { align-items: start; flex-wrap: wrap; }
  .vex-date { width: 100%; margin-left: 20px; }
  .vex-section-heading { display: block; margin-bottom: 25px; }
  .vex-section-heading>p { margin-top: 13px; }
  .vex-overview,.vex-control-section,.vex-results-section,.vex-vision-section,.vex-next-section { padding-top: 64px; padding-bottom: 70px; }
  .vex-timeline-section,.vex-iteration-section,.vex-gallery-section,.vex-reflection-section { padding-top: 64px; padding-bottom: 70px; }
  .vex-system-card { padding: 14px 10px; }
  .vex-system-svg { min-height: 135px; }
  .vex-system-foot { flex-direction: column; gap: 6px; font-size: 7px; }
  .vex-intro-columns,.vex-code-grid,.vex-code-wide-layout,.vex-challenge-grid,.vex-results-grid,.vex-gallery-grid { grid-template-columns: 1fr; }
  .vex-timeline:before { left: 4px; }
  .vex-timeline-item { grid-template-columns: 1fr; gap: 12px; padding-left: 24px; }
  .vex-timeline-item:before { left: 0; }
  .vex-code-card { padding: 16px; }
  .vex-algorithm ol { grid-template-columns: 1fr; gap: 12px; }
  .vex-algorithm svg { display: none; }
  .vex-gallery-wide { grid-column: auto; grid-row: auto; }
  .vex-gallery-wide>div,.vex-gallery-item>div { aspect-ratio: 1.25; }
  .vex-cost-labels { margin-top: -24px; font-size: 6px; }
  .vex-vision-figure figcaption { flex-direction: column; }
}

/* Arduino RGB LED case study: physical circuit, PWM, color mixing, and interaction. */
.arduino-hero { padding-top: 28px; padding-bottom: 68px; }
.arduino-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(34px,7vw,90px); margin-top: 34px; }
.arduino-hero-copy h1 { margin: 16px 0 22px; font-size: clamp(58px,8vw,104px); font-weight: 500; line-height: .9; letter-spacing: -.075em; }
.arduino-hero-copy h1 em,.arduino-section-heading h2 em,.arduino-next-copy h2 em { color: var(--accent); font-family: Georgia,serif; font-weight: 400; }
.arduino-lede { max-width: 610px; color: var(--muted); font-size: clamp(14px,1.3vw,16px); line-height: 1.85; }
.arduino-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; margin-top: 28px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.arduino-facts span { display: block; color: var(--accent); font: 8px var(--mono); letter-spacing: .12em; }
.arduino-facts strong { display: block; margin-top: 7px; font-size: 11px; font-weight: 500; }
.arduino-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.arduino-hero-art { position: relative; display: grid; place-items: center; aspect-ratio: 1.35; margin: 0; overflow: hidden; border: 1px solid var(--line); background: #073a37; }
.arduino-hero-art img { width: 100%; height: 100%; object-fit: cover; }
.arduino-hero-stamp { position: absolute; top: 13px; left: 13px; padding: 7px 9px; color: #ecf7f2; background: rgba(6,34,32,.83); font: 7px var(--mono); letter-spacing: .09em; }
.arduino-scope { display: flex; align-items: center; gap: 13px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); }
.arduino-scope>i,.arduino-finance-head i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(128,212,188,.1); }
.arduino-scope p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.arduino-scope p strong { color: var(--text); font-weight: 550; margin-right: 6px; }
.arduino-scope>span { margin-left: auto; color: var(--dim); font: 8px var(--mono); letter-spacing: .1em; white-space: nowrap; }
.arduino-overview,.arduino-pwm-section,.arduino-input-section,.arduino-next-section { padding-top: 88px; padding-bottom: 96px; border-top: 1px solid var(--line); }
.arduino-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 34px; }
.arduino-section-heading .eyebrow { margin-bottom: 14px; }
.arduino-section-heading h2,.arduino-next-copy h2 { margin: 0; font-size: clamp(38px,5.2vw,64px); font-weight: 500; line-height: 1.04; letter-spacing: -.055em; }
.arduino-section-heading>p { max-width: 400px; margin: 0 0 4px; color: var(--muted); font-size: 12px; line-height: 1.85; }
.arduino-principle-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.arduino-principle { position: relative; min-height: 154px; padding: 17px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-soft); }
.arduino-principle>span { color: var(--dim); font: 8px var(--mono); letter-spacing: .1em; }
.arduino-principle p { max-width: 190px; margin: 18px 0 0; color: var(--muted); font-size: 9px; line-height: 1.65; }
.rgb-dot { position: absolute; top: 15px; right: 16px; width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 20px currentColor; }
.rgb-dot.red { color: #f46969; background: #f46969; }.rgb-dot.green { color: #77d68c; background: #77d68c; }.rgb-dot.blue { color: #6e9cf2; background: #6e9cf2; }
.arduino-principle-mix { background: linear-gradient(130deg,rgba(40,113,95,.22),transparent 75%),var(--surface-soft); }
.rgb-mix-mark { position: absolute; top: 4px; right: 14px; color: var(--accent); font: 39px Georgia,serif; opacity: .7; }
.arduino-mixing-figure,.arduino-wiring { margin: 15px 0 0; border: 1px solid var(--line); background: #f1f3f5; }
.arduino-mixing-figure { display: grid; grid-template-columns: .55fr 1fr; align-items: center; min-height: 260px; padding: 16px 25px; }
.arduino-mixing-figure img { max-width: 245px; max-height: 230px; margin: auto; object-fit: contain; }
.arduino-mixing-figure figcaption,.arduino-wiring figcaption { display: flex; justify-content: space-between; gap: 14px; padding: 12px; color: var(--dim); font: 7px var(--mono); letter-spacing: .08em; }
.arduino-analysis { display: flex; gap: 12px; max-width: 820px; margin: 25px 0 0 auto; padding-top: 17px; border-top: 1px solid var(--line); }
.arduino-analysis-marker { color: var(--accent); font-size: 16px; }
.arduino-analysis p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.85; }
.arduino-analysis strong { color: var(--text); font-weight: 550; }
.arduino-analysis code,.arduino-code-analysis code { color: var(--accent); font-family: var(--mono); }
.arduino-circuit-section,.arduino-challenge-section,.arduino-demo-section,.arduino-finance-section { padding: 88px 0 96px; background: var(--bg-raised); }
.arduino-wiring { padding: 16px; }
.arduino-wiring img { display: block; width: 100%; max-height: 430px; object-fit: contain; }
.arduino-circuit-notes { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.arduino-circuit-note { min-height: 175px; padding: 17px; border: 1px solid var(--line); background: var(--surface-soft); }
.arduino-circuit-note>span,.arduino-inference>span,.arduino-challenge-card>span { color: var(--accent); font: 7px var(--mono); letter-spacing: .11em; }
.arduino-circuit-note h3 { margin: 15px 0 8px; font-size: 14px; font-weight: 500; }
.arduino-circuit-note p,.arduino-inference p,.arduino-challenge-card p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.75; }
.arduino-component-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.arduino-part { margin: 0; border: 1px solid var(--line); background: var(--surface-soft); }
.arduino-part img { display: block; width: 100%; height: 130px; padding: 12px; object-fit: contain; background: #f4f5f6; }
.arduino-part figcaption { padding: 10px; color: var(--dim); font: 7px var(--mono); letter-spacing: .09em; }
.arduino-safety-note { margin: 20px 0 0; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; line-height: 1.8; }
.arduino-safety-note b { margin-right: 8px; color: var(--accent); font: 7px var(--mono); letter-spacing: .1em; }
.arduino-pwm-visual { padding: 18px 20px 15px; border: 1px solid var(--line); background: var(--surface-soft); }
.arduino-pwm-header,.arduino-pwm-foot { display: flex; justify-content: space-between; gap: 15px; color: var(--dim); font: 8px var(--mono); letter-spacing: .08em; }
.arduino-pwm-header span:first-child { color: var(--accent); }
.arduino-pwm-visual svg { width: 100%; margin-top: 10px; overflow: visible; fill: none; stroke: var(--line-strong); stroke-width: 1; }
.arduino-pwm-visual svg text { fill: var(--muted); stroke: none; font: 9px var(--mono); }
.arduino-pwm-visual svg .pwm-axis { stroke: var(--line); }
.arduino-pwm-visual svg .pwm-pulse { stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.arduino-pwm-visual svg .pwm-zero { stroke-dasharray: 3 7; }
.arduino-pwm-visual svg .pwm-guide { stroke: var(--line); stroke-dasharray: 2 6; }
.arduino-pwm-visual svg .pwm-caption { fill: var(--dim); text-anchor: middle; font-size: 8px; }
.arduino-pwm-foot { padding-top: 12px; border-top: 1px solid var(--line); color: var(--accent); font-size: 7px; }
.arduino-code-layout { display: grid; grid-template-columns: 1.08fr .92fr; gap: 14px; margin-top: 16px; }
.arduino-code-card,.arduino-code-analysis { padding: 20px; border: 1px solid var(--line); background: var(--surface-soft); }
.arduino-code-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--accent); font: 8px var(--mono); letter-spacing: .09em; }
.arduino-code-head span:last-child { color: var(--dim); }
.arduino-code-card>p,.arduino-code-analysis>p { color: var(--muted); font-size: 10px; line-height: 1.8; }
.arduino-code-card pre,.arduino-input-code pre { margin: 14px 0 10px; padding: 14px; overflow-x: auto; border: 1px solid var(--line); background: #08100e; color: #bfe8d8; font: 9px/1.8 var(--mono); tab-size: 2; }
.arduino-code-foot { color: var(--dim) !important; font-size: 8px !important; }
.arduino-code-analysis .eyebrow { color: var(--accent); font: 7px var(--mono); letter-spacing: .1em; }
.arduino-code-analysis h3 { margin: 12px 0; font-size: 19px; font-weight: 500; }
.arduino-color-sequence { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin: 18px 0 14px; }
.arduino-color-sequence span { padding: 9px 5px; border-left: 3px solid var(--swatch); color: var(--muted); background: rgba(255,255,255,.025); font: 7px var(--mono); text-align: center; }
.arduino-mixing-section { padding: 88px 0 96px; }
.arduino-color-table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--surface-soft); }
.arduino-color-table { width: 100%; min-width: 650px; border-collapse: collapse; font-size: 9px; }
.arduino-color-table caption { padding: 14px; color: var(--accent); font: 8px var(--mono); letter-spacing: .1em; text-align: left; }
.arduino-color-table th,.arduino-color-table td { padding: 12px 14px; border-top: 1px solid var(--line); text-align: left; }
.arduino-color-table thead th { color: var(--dim); font: 7px var(--mono); letter-spacing: .08em; }
.arduino-color-table tbody th { color: var(--text); font-weight: 500; white-space: nowrap; }
.arduino-color-table td { color: var(--muted); font-family: var(--mono); }
.swatch { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; vertical-align: -1px; }
.swatch.yellow { background: #e6d853; }.swatch.magenta { background: #ce63bf; }.swatch.white { background: #f1f4ed; }.swatch.orange { background: #f19c42; }
.arduino-inference-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.arduino-inference { min-height: 180px; padding: 18px; border: 1px solid var(--line); background: var(--surface-soft); }
.arduino-inference h3 { margin: 14px 0 8px; font-size: 14px; font-weight: 500; }
.arduino-code-callout { margin-top: 18px; padding: 17px; border: 1px solid var(--line); background: var(--bg-raised); }
.arduino-code-callout>span { color: var(--dim); font: 7px var(--mono); letter-spacing: .1em; }
.arduino-code-callout>div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; color: var(--accent); font: 11px var(--mono); }
.arduino-code-callout i { color: var(--dim); font-style: normal; }
.arduino-code-callout p { margin: 10px 0 0; color: var(--muted); font-size: 9px; }
.arduino-input-grid { display: grid; grid-template-columns: .62fr 1fr; align-items: start; gap: 28px; }
.arduino-input-figure { margin: 0; border: 1px solid var(--line); background: #f4f5f6; }
.arduino-input-figure img { width: 100%; max-height: 360px; padding: 18px; object-fit: contain; }
.arduino-input-figure figcaption { padding: 10px; color: var(--dim); background: var(--surface-soft); font: 7px var(--mono); }
.arduino-conversion-flow { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 15px; border: 1px solid var(--line); background: var(--surface-soft); }
.arduino-conversion-flow div { display: grid; gap: 5px; }
.arduino-conversion-flow span { color: var(--dim); font: 6px var(--mono); letter-spacing: .08em; }
.arduino-conversion-flow b { color: var(--accent); font: 8px var(--mono); }
.arduino-conversion-flow strong { color: var(--text); font-size: 10px; font-weight: 500; }
.arduino-conversion-flow i { color: var(--dim); font: normal 11px var(--mono); }
.arduino-input-copy { margin: 17px 0; color: var(--muted); font-size: 10px; line-height: 1.85; }
.arduino-input-code { padding: 15px; border: 1px solid var(--line); background: var(--surface-soft); }
.arduino-input-code>span { color: var(--accent); font: 7px var(--mono); letter-spacing: .1em; }
.arduino-input-code small { color: var(--dim); font-size: 8px; }
.arduino-serial-analysis { display: flex; gap: 12px; max-width: 820px; margin: 25px 0 0 auto; padding-top: 17px; border-top: 1px solid var(--line); }
.arduino-serial-analysis p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.85; }
.arduino-serial-analysis strong { color: var(--text); font-weight: 550; }
.arduino-challenge-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.arduino-challenge-card { min-height: 230px; padding: 18px; border: 1px solid var(--line); background: var(--surface-soft); transition: transform .35s var(--ease),border-color .35s; }
.arduino-challenge-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.arduino-challenge-card>b { display: block; margin-top: 20px; color: var(--accent); font: 28px var(--display); letter-spacing: -.05em; }
.arduino-challenge-card h3 { margin: 10px 0 8px; font-size: 15px; font-weight: 500; }
.arduino-complexity-card { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 25px; margin-top: 14px; padding: 22px; border: 1px solid var(--line); background: linear-gradient(115deg,rgba(35,113,93,.14),transparent 65%),var(--surface-soft); }
.arduino-complexity-card .eyebrow { color: var(--accent); font: 7px var(--mono); letter-spacing: .1em; }
.arduino-complexity-card h3 { margin: 12px 0; font-size: 20px; font-weight: 500; }
.arduino-complexity-card p { color: var(--muted); font-size: 10px; line-height: 1.8; }
.arduino-complexity-visual { display: flex; align-items: center; justify-content: space-evenly; flex-wrap: wrap; gap: 9px; }
.arduino-complexity-visual span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--accent); font: 10px var(--mono); }
.arduino-complexity-visual>b { flex-basis: 100%; color: var(--text); font: 18px var(--mono); text-align: center; }
.arduino-complexity-visual i { position: absolute; }
.arduino-analysis-foot { margin: 12px 0 0; color: var(--dim); font-size: 9px; text-align: right; }
.arduino-demo-section { border-top: 1px solid var(--line); }
.arduino-demo-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.arduino-demo-card { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); background: var(--surface-soft); }
.arduino-video-wrap { position: relative; display: grid; place-items: center; min-height: 330px; overflow: hidden; background: #060908; }
.arduino-video-wrap video { display: block; width: 100%; max-height: 560px; aspect-ratio: 9 / 16; object-fit: contain; background: #050706; }
.arduino-video-wrap>span { position: absolute; top: 10px; left: 10px; padding: 6px 8px; color: #eff7f2; background: rgba(8,31,29,.84); font: 7px var(--mono); letter-spacing: .1em; pointer-events: none; }
.arduino-demo-card figcaption { display: flex; justify-content: space-between; gap: 10px; padding: 12px 3px 1px; }
.arduino-demo-card figcaption b { color: var(--text); font-size: 10px; font-weight: 500; }
.arduino-demo-card figcaption span { color: var(--dim); font: 7px var(--mono); }
.arduino-finance-section { border-top: 1px solid var(--line); }
.arduino-finance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.arduino-finance-copy p { margin: 0 0 14px; color: var(--muted); font-size: 11px; line-height: 1.9; }
.arduino-finance-map { padding: 18px; border: 1px solid var(--line); background: var(--surface-soft); }
.arduino-finance-head { display: flex; justify-content: space-between; align-items: center; color: var(--accent); font: 7px var(--mono); letter-spacing: .09em; }
.arduino-finance-map svg { width: 100%; margin-top: 12px; overflow: visible; fill: none; stroke: var(--line-strong); stroke-width: 1.2; }
.arduino-finance-map svg .arduino-finance-flow { stroke: var(--accent); stroke-dasharray: 3 12; }
.arduino-finance-map svg circle { fill: var(--bg-raised); stroke: var(--accent); }
.arduino-finance-labels { display: grid; grid-template-columns: repeat(4,1fr); margin-top: -33px; text-align: center; color: var(--muted); font: 7px/1.5 var(--mono); }
.arduino-finance-map>p { margin: 30px 0 0; color: var(--dim); font-size: 8px; text-align: center; }
.arduino-next-section { display: grid; grid-template-columns: 1fr .82fr; align-items: center; gap: 48px; }
.arduino-next-copy h2 { margin: 14px 0; font-size: clamp(35px,4.8vw,58px); }
.arduino-next-copy>p:last-child { max-width: 590px; color: var(--muted); font-size: 11px; line-height: 1.9; }
.arduino-next-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.arduino-next-list li { display: grid; grid-template-columns: 35px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.6; }
.arduino-next-list li span { color: var(--accent); font: 8px var(--mono); }
@keyframes arduinoFlow { to { stroke-dashoffset: -120; } }
@media(prefers-reduced-motion:no-preference) {
  .arduino-pwm-visual svg .pwm-pulse { animation: arduinoFlow 8s linear infinite; }
  .arduino-scope>i,.arduino-finance-head i { animation: nodeBloom 3s ease-in-out infinite; }
  .rgb-dot { animation: nodeBloom 3.5s ease-in-out infinite; }
  .arduino-principle:nth-child(2) .rgb-dot { animation-delay: .5s; }.arduino-principle:nth-child(3) .rgb-dot { animation-delay: 1s; }
  .arduino-finance-map .arduino-finance-flow { animation: arduinoFlow 13s linear infinite; }
}
@media(max-width:900px) {
  .arduino-hero-grid,.arduino-input-grid,.arduino-finance-grid,.arduino-next-section { grid-template-columns: 1fr; }
  .arduino-hero-grid { gap: 30px; }
  .arduino-hero-art { max-width: 650px; }
  .arduino-section-heading { align-items: start; }
  .arduino-section-heading>p { max-width: 340px; }
  .arduino-principle-grid,.arduino-circuit-notes { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .arduino-component-strip { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .arduino-code-layout { grid-template-columns: 1fr; }
  .arduino-inference-grid { grid-template-columns: 1fr; }
}
@media(max-width:600px) {
  .arduino-hero { padding-bottom: 54px; }.arduino-hero-copy h1 { font-size: clamp(56px,16vw,82px); }
  .arduino-facts { grid-template-columns: 1fr; gap: 12px; }
  .arduino-scope { align-items: start; flex-wrap: wrap; }.arduino-scope>span { width: 100%; margin-left: 20px; }
  .arduino-section-heading { display: block; margin-bottom: 24px; }.arduino-section-heading>p { margin-top: 13px; }
  .arduino-overview,.arduino-pwm-section,.arduino-input-section,.arduino-next-section { padding-top: 64px; padding-bottom: 70px; }
  .arduino-circuit-section,.arduino-challenge-section,.arduino-demo-section,.arduino-finance-section,.arduino-mixing-section { padding-top: 64px; padding-bottom: 70px; }
  .arduino-principle-grid,.arduino-circuit-notes,.arduino-component-strip,.arduino-demo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .arduino-mixing-figure { grid-template-columns: 1fr; padding: 14px; }.arduino-mixing-figure img { max-height: 220px; }
  .arduino-mixing-figure figcaption,.arduino-wiring figcaption { flex-direction: column; }
  .arduino-component-strip { gap: 8px; }.arduino-part img { height: 105px; padding: 8px; }
  .arduino-pwm-visual { padding: 13px 9px; }.arduino-pwm-header,.arduino-pwm-foot { font-size: 6px; }.arduino-pwm-visual svg { min-height: 160px; }
  .arduino-color-sequence { grid-template-columns: repeat(2,1fr); }
  .arduino-code-callout>div { flex-wrap: wrap; justify-content: center; font-size: 8px; }
  .arduino-conversion-flow { flex-wrap: wrap; justify-content: center; }.arduino-conversion-flow div { min-width: 72px; }
  .arduino-challenge-grid { grid-template-columns: 1fr; }.arduino-complexity-card { grid-template-columns: 1fr; padding: 17px; }
  .arduino-analysis-foot { text-align: left; }.arduino-video-wrap { min-height: 250px; }
  .arduino-demo-card figcaption { flex-direction: column; }.arduino-finance-labels { font-size: 6px; }
}