@charset "UTF-8";
/* Integrated portrait direction: paper, cobalt and a clear sans-serif hierarchy. */
:root { --bg: #f8f8f5; --surface: #eef1f6; --text: #101820; --muted: #58616e; --line: #dce0e3; --accent: #dce7ff; --accent-ink: #1452d6; --paper: #f8f8f5; --ink: #101820; --ease: cubic-bezier(.22,1,.36,1); --max: 1280px; color-scheme: light; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 16px; scroll-behavior: smooth; scroll-padding-top: 112px; scrollbar-gutter: stable; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.65; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
:is(a,button,summary,input):focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 5px; }
img { display: block; max-width: 100%; height: auto; }
p,h1,h2,h3,figure { margin: 0; }
p { color: var(--muted); }
p + p { margin-top: 1rem; }
h1,h2,h3 { font-weight: 600; line-height: 1.08; letter-spacing: -.04em; }
h2 { font-size: clamp(2.25rem,4.2vw,3.75rem); text-wrap: balance; }
h3 { font-size: 1.5rem; }
.wrap { width: min(var(--max),calc(100% - 96px)); margin-inline: auto; }
.section { padding-block: clamp(64px,7vw,100px); }
.eyebrow,.project-kind,.skill-number,.filter-status,.case-stack { font-family: "SFMono-Regular",Consolas,monospace; font-size: .875rem; letter-spacing: .04em; line-height: 1.6; }
.eyebrow { color: var(--accent-ink); }
.subtle { font-size: .875rem; color: var(--muted); }
.skip-link { position: fixed; top: 10px; left: 16px; z-index: 100; padding: 12px 20px; background: var(--accent); color: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.header { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(16px)) { .header { background: #f8f8f5ed; backdrop-filter: blur(16px); } }
.header-inner { min-height: 96px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.wordmark { font-size: 2.2rem; font-weight: 700; letter-spacing: -.09em; line-height: 1; }
.wordmark span { color: var(--accent-ink); }
.desktop-nav { display: flex; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 40px; background: var(--surface); font-size: 1rem; }
.desktop-nav a { position: relative; padding: 10px 18px; border-radius: 30px; transition: background .25s, color .25s; }
.desktop-nav a:hover { background: var(--accent); }
.desktop-nav a[aria-current="location"] { color: white; background: var(--accent-ink); }
.header-controls,.language-switch { display: flex; align-items: center; gap: 12px; }
.language-switch { padding: 2px; border: 1px solid var(--line); border-radius: 30px; }
.language-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 40px; border-radius: 24px; font-size: .875rem; font-weight: 600; }
.language-switch a[aria-current="page"] { background: var(--accent); color: var(--ink); }
.mobile-nav { display: none; }
/* A native top-layer navigation scene. No modal or focus-trap dependency. */
.menu-trigger,.menu-close { min-height: 52px; display: inline-flex; justify-content: space-between; align-items: center; gap: 28px; border-radius: 32px; padding: 10px 22px; font-weight: 600; border: 1px solid transparent; }
.menu-trigger { background: var(--ink); color: white; }
.menu-symbol { font-size: 1.65rem; font-weight: 400; line-height: 1; transition: transform .45s var(--ease); }
.menu-trigger:hover .menu-symbol { transform: rotate(90deg); }
.site-menu { display: none; position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #124ac4; color: white; overflow: auto; overscroll-behavior: contain; }
.site-menu[open] { display: block; }
.site-menu::backdrop { background: #10182099; }
.site-menu :is(a,button):focus-visible { outline-color: #fff; outline-offset: 4px; }
html[data-nav-open] { overflow: hidden; }
.menu-shell { min-height: 100%; display: flex; flex-direction: column; }
.menu-top { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding-block: 24px; border-bottom: 1px solid #ffffff50; }
.menu-top p { color: white; font-size: .9rem; letter-spacing: .04em; }
.menu-close { color: white; background: transparent; border-color: #ffffff80; }
.menu-close > span:last-child { font-size: 1.8rem; line-height: 1; font-weight: 400; }
.menu-close:hover { background: #ffffff18; }
.menu-body { flex: 1; display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); align-items: center; gap: clamp(32px,6vw,96px); padding-block: 48px; }
.menu-links { display: grid; }
.menu-links > a { display: block; padding: 8px 0; border-bottom: 1px solid #ffffff50; }
.menu-row { display: flex; align-items: baseline; gap: clamp(14px,2vw,30px); font-size: clamp(3rem,6.4vw,6.5rem); font-weight: 500; letter-spacing: -.055em; line-height: 1.18; }
.menu-row small { font: 400 .8rem/1.5 "SFMono-Regular",Consolas,monospace; letter-spacing: 0; }
.menu-row > span:not(.menu-arrow) { min-width: 0; overflow-wrap: anywhere; }
.menu-arrow { margin-left: auto; font-size: .55em; transition: transform .45s var(--ease); }
.menu-links a:hover .menu-arrow,.menu-links a:focus-visible .menu-arrow { transform: translate(8px,-8px); }
.menu-links a[aria-current="location"] { color: #d2e4ff; }
.menu-links a[aria-current="location"] small { text-decoration: underline; text-underline-offset: 6px; }
.menu-feature { align-self: center; }
.menu-label { color: #d2e4ff; font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 20px; }
.menu-project { display: grid; grid-template-columns: 1fr auto; gap: 18px; font-size: 1.3rem; line-height: 1.3; }
.menu-project img { grid-column: 1 / -1; width: 100%; aspect-ratio: 1.6; object-fit: cover; border-radius: 4px; }
.menu-project:hover { text-decoration: underline; text-underline-offset: 5px; }
.menu-caption { color: #d2e4ff; font-size: .875rem; margin-top: 16px; max-width: 35ch; }
.menu-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; border-top: 1px solid #ffffff50; padding-block: 24px; }
.menu-bottom > p { color: white; margin-right: auto; line-height: 1.5; }
.menu-bottom > p span { display: block; color: #d2e4ff; font-size: .85rem; }
.menu-bottom > a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 6px; }
.menu-bottom .language-switch { border-color: #ffffff80; }
.menu-bottom .language-switch a[aria-current="page"] { color: #124ac4; background: white; }
.menu-motion { color: white; background: transparent; min-height: 44px; padding: 10px 16px; border: 1px solid #ffffff80; border-radius: 28px; font-size: .875rem; }
.menu-motion[aria-pressed="true"] { background: white; color: #124ac4; }
@media (prefers-reduced-motion: no-preference) {
  /* Discrete display/overlay transitions keep the closing panel in the top layer. */
  .site-menu { clip-path: inset(0 0 100% 0); transition: clip-path .45s var(--ease), display .45s allow-discrete, overlay .45s allow-discrete; }
  .site-menu[open] { clip-path: inset(0); transition-duration: .7s; }
  @starting-style { .site-menu[open] { clip-path: inset(0 0 100% 0); } }
  .site-menu[open] .menu-row { animation: menu-arrive .8s var(--ease) both; }
  .menu-links > a:nth-child(1) .menu-row { animation-delay: .12s; }
  .menu-links > a:nth-child(2) .menu-row { animation-delay: .20s; }
  .menu-links > a:nth-child(3) .menu-row { animation-delay: .28s; }
  .menu-links > a:nth-child(4) .menu-row { animation-delay: .36s; }
  .site-menu[open] .menu-feature { animation: menu-arrive .9s .3s var(--ease) both; }
}
@keyframes menu-arrive { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } }
@media screen and (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) and selector(::details-content) {
    .project-details { interpolate-size: allow-keywords; }
    .project-details::details-content { height: 0; overflow: clip; transition: height .45s var(--ease), content-visibility .45s allow-discrete; }
    .project-details[open]::details-content { height: auto; }
  }
}
/* The portrait shares the page surface and terminates at the work divider. */
.hero { display: grid; grid-template-columns: minmax(0,1.32fr) minmax(0,1fr); gap: 0; padding-block: 24px 0; align-items: end; isolation: isolate; }
.hero-copy { min-width: 0; align-self: center; padding-block: 32px 48px; position: relative; z-index: 1; }
.hero-name { color: var(--accent-ink); font-size: .875rem; letter-spacing: .1em; }
h1 { margin-block: 24px 20px; font-size: clamp(3rem,5.25vw,4.8rem); font-weight: 700; line-height: 1.01; letter-spacing: -.055em; }
.hero-word { display: block; }
/* Keep the professional title readable without forcing a single long line. */
.hero h1 { font-size: clamp(2.45rem,4.55vw,4.3rem); overflow-wrap: anywhere; hyphens: auto; }
.hero-stop { color: var(--accent-ink); }
.hero-role { color: #424c5b; font-size: clamp(1.15rem,1.9vw,1.6rem); line-height: 1.3; letter-spacing: -.02em; }
/* A separate, captioned artwork keeps the engineering hero readable. */
.engineering-hero { grid-column: 1 / -1; margin: 12px 0 0; }
.hero-orbit { height: clamp(300px, 37vw, 480px); position: relative; overflow: hidden; border-radius: 20px; background: radial-gradient(ellipse at 50% 40%, #233f58, #0a1625 74%); }
.hero-orbit canvas, .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-poster { display: grid; place-items: center; color: #8ab4bd; font-size: .7rem; letter-spacing: .22em; }
.hero-orbit canvas { opacity: 0; transition: opacity .4s; }
html[data-hero-3d="ready"] .hero-orbit canvas { opacity: 1; }
html[data-hero-3d="ready"] .hero-poster { visibility: hidden; }
 .engineering-hero figcaption { color: var(--muted); font-size: .85rem; padding-top: 12px; }
.hero-visual-header { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.hero-visual-header p { max-width: 65ch; }
.hero-view-controls:not([hidden]) { display: flex; gap: 6px; }
.hero-view-controls button { width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--accent-ink); font-size: 1.2rem; cursor: pointer; }
.hero-view-controls button:hover { border-color: var(--accent-ink); }
.hero-project-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-block: 1px solid var(--line); margin-top: 14px; }
.hero-project-links a { min-height: 58px; display: flex; align-items: center; padding: 12px 16px; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 4px; }
.hero-project-links a:first-child { padding-left: 0; }
.hero-project-links a + a { border-left: 1px solid var(--line); }
@media (max-width: 600px) { .hero-project-links { grid-template-columns: 1fr; } .hero-project-links a,.hero-project-links a:first-child { padding: 8px 0; min-height: 44px; } .hero-project-links a + a { border-left: 0; border-top: 1px solid var(--line); } }
@media (prefers-reduced-motion: reduce) { .hero-orbit canvas { transition: none; } }
@media print { .engineering-hero { display: none; } }
#study-focus { scroll-margin-top: 112px; }
.hero-intro { margin-top: 16px; }
.hero-intro { max-width: 47ch; margin-top: 16px; font-size: 1.1rem; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 52px; padding: 12px 24px; border: 1px solid transparent; border-radius: 36px; font-size: .95rem; transition: transform .3s var(--ease),background .25s; }
.primary { color: white; background: var(--accent-ink); }
.primary:hover { background: #103fa5; }
.icon { width: 22px; height: 22px; flex-shrink: 0; }
.primary .icon { filter: invert(1); }
.secondary { padding-inline: 14px; }
.secondary span { text-decoration: underline; text-decoration-color: var(--accent-ink); text-underline-offset: 7px; }
.secondary:hover { background: var(--surface); }
.portrait-panel { width: 100%; min-width: 0; margin: 0; align-self: end; mix-blend-mode: multiply; }
.portrait-frame { overflow: hidden; }
.portrait-frame > img { width: 100%; height: auto; display: block; }
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero { view-timeline-name: --hero-exit; view-timeline-axis: block; }
    html:not([data-motion="off"]) .portrait-panel { animation: hero-depth linear both; animation-timeline: --hero-exit; animation-range: exit 0% exit 100%; }
  }
}
@keyframes hero-depth { from { transform: translateY(0) scale(1); } to { transform: translateY(-80px) scale(.92); } }
:lang(de) h1 { font-size: clamp(2.4rem,4.35vw,4rem); line-height: 1.06; overflow-wrap: anywhere; hyphens: auto; }
.work-section { background: #eef1f6; border-block: 1px solid var(--line); }
.work-section > .section { padding-top: 64px; }
.section-heading { display: grid; grid-template-columns: 1fr 2.1fr; gap: 50px; align-items: start; margin-bottom: 42px; }
.section-heading > .eyebrow { padding-top: 10px; }
.section-heading h2 + p { margin-top: 20px; max-width: 52ch; }
.work-section .section-heading { display: block; margin-bottom: 32px; }
.work-section .section-heading > div { display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: 40px; margin-top: 0; }
.work-section .section-heading h2 { font-size: clamp(2.5rem,5vw,4.4rem); font-weight: 500; line-height: 1.05; letter-spacing: -.055em; color: var(--ink); }
.work-section .section-heading h2 + p { margin: 0; font-size: 1rem; }
.work-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.project-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.project-filters button { min-height: 44px; padding: 8px 14px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: .875rem; }
.project-filters button[aria-pressed="true"],.project-filters button:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.filter-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.project-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.project { min-width: 0; display: grid; grid-template-columns: 36px minmax(0,1fr) minmax(0,1.3fr); gap: 28px; padding: 32px; border: 1px solid #dce2ed; border-radius: 24px; background: var(--bg); align-items: start; }
.project-featured,.project-production { grid-column: 1 / -1; }
.project-featured { background: #fff; box-shadow: 0 24px 60px -40px #14336355; }
.project-production { background: #e0e9fc; border-color: #cedbf5; }
.project-index { font-size: 2rem; font-weight: 400; line-height: 1; letter-spacing: -.04em; color: #7b8492; }
.project-kind { display: block; color: var(--muted); font-size: .8rem; letter-spacing: .025em; }
.project h3 { font-size: clamp(1.9rem,3.2vw,3rem); margin-block: 12px 18px; overflow-wrap: anywhere; }
.project h3[id] { scroll-margin-top: 64px; }
.project h3:target { color: var(--accent-ink); }
.project:has(:target) { border-color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent-ink); }
.project p { font-size: .95rem; line-height: 1.6; }
.project .project-summary { max-width: 54ch; }
.project-preview { overflow: hidden; border-radius: 14px; min-width: 0; }
.project-preview img { width: 100%; aspect-ratio: 1.7 / 1; object-fit: cover; object-position: center; transition: transform .8s var(--ease); }
.project-production .project-preview img { object-position: top; }
.project-preview figcaption { padding: 10px 4px 0; font-size: .75rem; color: var(--muted); background: inherit; position: relative; }
.project-details { margin-top: 12px; }
.project-details summary { min-height: 44px; padding-block: 10px; cursor: pointer; font-size: .875rem; }
.project-details p { padding-block: 8px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tags span { padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; font: .8rem/1.5 Consolas,monospace; color: var(--muted); }
.project .project-footnote { margin-top: 14px; font-size: .875rem; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; padding-block: 9px; border-bottom: 1px solid var(--accent-ink); font-size: .9rem; font-weight: 500; margin-top: 6px; text-underline-offset: 5px; }
.text-link:hover { text-decoration: underline; }
.case-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.case-story { display: grid; gap: 20px; margin: 12px 0; }
.case-story dt { font-size: .875rem; font-weight: 600; color: var(--accent-ink); }
.case-story dd { margin: 6px 0 0; font-size: .9rem; color: var(--muted); }
.project .case-stack { font-size: .875rem; }
.project-compact { grid-template-columns: 36px minmax(0,1fr); gap: 20px; }
.project-compact h3 { font-size: clamp(1.8rem,2.5vw,2.4rem); }
.project-compact .project-index { font-size: 2rem; }
.github-link { display: inline-flex; min-height: 44px; align-items: center; margin-top: 26px; border-bottom: 1px solid; font-size: .95rem; }
.career-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; border-top: 1px solid var(--line); margin-top: 28px; }
.career-strip a { padding: 24px 28px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; min-width: 0; transition: background .25s; }
.career-strip a:first-child { padding-left: 0; }
.career-strip a + a { border-left: 1px solid var(--line); }
.career-strip strong { font-size: 1.15rem; font-weight: 500; letter-spacing: -.03em; }
.career-strip span { grid-column: 1; font-size: .85rem; color: var(--muted); }
.career-strip small { grid-column: 2; grid-row: 1; color: var(--accent-ink); font: .75rem/1.5 monospace; }
.career-strip a:hover { background: #e6edfa; }
.earlier-spotlight { border: 1px solid var(--line); border-radius: 20px; padding: 28px; margin-top: 36px; background: #eef1f6; }
.earlier-spotlight .earlier-grid { margin-top: 20px; }
.earlier-spotlight .text-link { margin-top: 20px; }
.credential { display: inline-block; padding: 5px 10px; margin-top: 16px; background: #dce7ff; border-radius: 20px; color: var(--accent-ink); font-size: .8rem; }
/* A single player: scene first, legend and controls in normal document flow. */
/* The experiment belongs to its project and stays closed until requested. */
.project-lab { grid-column: 1 / -1; min-width: 0; border-top: 1px solid var(--line); }
.project-lab > summary { cursor: pointer; padding-block: 18px; font-size: 1rem; font-weight: 500; }
.project-lab > summary::marker { color: var(--accent-ink); }
.project-lab-meta { display: block; margin: 4px 0 0 20px; color: var(--muted); font-size: .875rem; font-weight: 400; }
.project-lab[open] > summary { border-bottom: 1px solid var(--line); }
.lab-section { padding-block: 28px 12px; }
.lab-section h4,.lab-section h5 { margin: 0; font-weight: 500; line-height: 1.15; letter-spacing: -.035em; }
.lab-section .simulation-heading h4 { font-size: clamp(1.75rem,3vw,2.5rem); }

.engineering-story { position: relative; }
.simulation-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 16px 40px; margin-bottom: 24px; }
.demo-entry { margin-top: 20px; }
.demo-back { grid-column: 1 / -1; justify-self: start; font-size: .875rem; }
.simulation-heading h4 { margin-top: 16px; }
.simulation-heading > p { max-width: 42ch; }
.simulation-toolbar { margin-block: 24px; }
.scenario-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 0; margin: 0; border: 0; min-width: 0; }
.scenario-choices legend { font-size: .875rem; margin-bottom: 12px; color: var(--muted); }
.scenario-choice { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.scenario-choice:has(:checked) { border-color: var(--accent-ink); background: #e7efff; box-shadow: inset 0 0 0 1px var(--accent-ink); }
.scenario-choice input { width: 18px; height: 18px; accent-color: var(--accent-ink); flex-shrink: 0; }
.scenario-choice strong { display: block; font-size: .95rem; }
.scenario-choice small { display: block; margin-top: 3px; color: var(--muted); font-size: .875rem; line-height: 1.4; }
.scene-panel { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; align-items: start; }
.scene-viewport { position: relative; isolation: isolate; min-width: 0; min-height: clamp(380px,45vw,560px); scroll-margin-top: 110px; border: 1px solid #3a525e; border-radius: 16px; overflow: hidden; background: #172b35; color: #f2f5ef; }
.engineering-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.scene-fallback { position: relative; padding: 32px; min-height: inherit; display: flex; flex-direction: column; justify-content: center; }
.scene-fallback .eyebrow { color: var(--accent); }
.scene-fallback h5 { margin-block: 12px 24px; font-size: clamp(1.8rem,3vw,2.8rem); }
.scene-fallback p { color: #becdd2; font-size: .875rem; max-width: 72ch; }
.process-map { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; list-style: none; padding: 0; margin: 0 0 24px; }
.process-map li { display: grid; align-content: start; gap: 8px; padding: 16px; border: 1px solid #587580; border-radius: 10px; color: #d6e3e9; }
.process-map li > span { color: #9db5be; font: .8rem/1.4 Consolas,monospace; }
.process-map small { font-size: .8rem; line-height: 1.4; }
.process-map li[aria-current="step"] { border-color: #72ddf5; background: #214652; color: #fff; }
.process-map li[data-status="rejected"] { border-color: #ff806b; }
.process-map li[data-status="confirmed"],.process-map li[data-status="reverted"] { border-color: #d0ea84; }
html[data-scene="ready"]:not([data-motion="off"]) .engineering-canvas { opacity: 1; }
html[data-scene="ready"]:not([data-motion="off"]) .scene-fallback { visibility: hidden; }
.flow-label { display: none; position: absolute; transform: translate(-50%,-100%); width: 30px; height: 30px; padding: 5px 0; border: 1px solid #8fb4bf; border-radius: 50%; background: #0c1318ed; font: .875rem/1.3 Consolas,monospace; text-align: center; color: #f2f5ef; pointer-events: none; }
.flow-label[data-active="true"] { color: var(--ink); border-color: var(--accent); background: var(--accent); }
.flow-label::after { content: ""; position: absolute; width: 1px; height: 14px; top: 100%; left: 50%; background: #8fb4bf; }
.flow-legend { display: none; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px 20px; padding: 0 4px; font: .8rem/1.5 Consolas,monospace; color: var(--muted); }
html[data-scene="ready"]:not([data-motion="off"]) .scene-viewport[data-simulating="true"] .flow-label { display: block; }
html[data-scene="ready"]:not([data-motion="off"]) .flow-legend { display: grid; }
.simulation-connection { margin: 0; padding-block: 0 16px; border-bottom: 1px solid var(--line); font-size: .95rem; color: var(--text); }
.scene-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.scene-controls button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 30px; background: transparent; color: var(--text); font-size: .875rem; }
.scene-controls button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.scene-controls button:disabled { cursor: default; opacity: .55; }
.scene-note { grid-column: 1 / -1; font-size: .875rem; }
.simulation-console { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 16px 28px; min-width: 0; }
.simulation-actions,.simulation-manual { display: flex; align-items: start; flex-wrap: wrap; gap: 8px; }
.simulation-actions button,.simulation-manual button { min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); padding: 8px 12px; font-size: .875rem; }
.simulation-actions [data-sim-run] { min-width: 140px; min-height: 48px; font-size: 1rem; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.simulation-actions :disabled,.simulation-manual :disabled { opacity: .55; cursor: default; }
.simulation-result { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.simulation-result h5 { font-size: 1.5rem; }
[data-sim-status] { font: .8rem/1.5 Consolas,monospace; padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px; }
[data-status="pass"],[data-status="confirmed"],[data-status="reverted"] { color: #346021; }
[data-status="rejected"],[data-status="unavailable"] { color: #a22b1e; }
.simulation-detail { margin: 10px 0 0; font-size: .95rem; max-width: 80ch; }
.simulation-tools { grid-column: 1 / -1; border-top: 1px solid var(--line); }
.simulation-tools > summary { padding-block: 16px; cursor: pointer; font-size: .875rem; }
.simulation-tools-content { display: grid; gap: 16px; padding-bottom: 12px; }
.simulation-tools-content .simulation-metrics { margin: 0; }
.simulation-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 20px 0 0; padding: 16px 0; border-block: 1px solid var(--line); }
.simulation-metrics dt { font-size: .875rem; color: var(--muted); }
.simulation-metrics dd { margin: 6px 0 0; font: 1.8rem/1.3 Consolas,monospace; }
.simulation-ledger { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; list-style: none; counter-reset: verification; padding: 0; margin-block: 20px 12px; }
.simulation-ledger li { counter-increment: verification; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 8px; padding: 8px; border-top: 2px solid var(--line); font-size: .875rem; }
.simulation-ledger li[aria-current="step"] { border-color: var(--accent-ink); background: #e7efff; }
.simulation-ledger li::before { content: counter(verification,decimal-leading-zero); grid-row: span 2; font: .8rem/1.4 Consolas,monospace; color: var(--muted); }
.simulation-ledger li > span:last-child { font-size: .8rem; }
.simulation-ledger [data-status="pending"] { color: var(--muted); }
.simulation-reference { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 16px; }
.simulation-reference summary { padding-block: 10px; cursor: pointer; font-size: .95rem; }
.simulation-reference-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-block: 24px; }
.simulation-reference h5 { margin-block: 24px 12px; font-size: 1.4rem; }
.simulation-reference p,.simulation-sources { font-size: .9rem; }
.simulation-sources { padding-left: 18px; line-height: 2; }
.simulation-sources a { text-decoration: underline; text-underline-offset: 4px; }
.simulation-evidence { min-width: 0; }
.simulation-evidence h4 { color: var(--muted); font: .875rem/1.5 Consolas,monospace; margin-block: 24px 10px; }
.simulation-evidence pre { font: .8rem/1.7 Consolas,monospace; white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px; background: var(--surface); border-radius: 8px; }
/* Career and toolkit carry the same editorial rhythm. */
.experience-layout { display: grid; grid-template-columns: 1fr 2.1fr; gap: 50px; }
.company-block { position: sticky; top: 116px; align-self: start; border-top: 1px solid var(--line); padding-top: 28px; }
.company-name { font-size: 2.6rem; letter-spacing: -.06em; line-height: 1.1; }
.company-name span { display: block; font-size: .85rem; letter-spacing: 0; color: var(--muted); margin-top: 8px; }
.company-block > p { font-size: .85rem; margin-top: 18px; max-width: 26ch; }
.company-block .company-period { color: var(--accent-ink); font: .72rem/1.5 Consolas, monospace; }
.timeline-item { border-top: 1px solid var(--line); padding-block: 28px 40px; }
.role-heading { display: flex; justify-content: space-between; align-items: start; gap: 18px; }
.role-heading h3 { font-size: 1.5rem; margin-top: 16px; }
.role-badge { padding: 3px 11px; border: 1px solid #9eafd7; color: var(--accent-ink); border-radius: 20px; font-size: .875rem; }
.role-context { font-size: .875rem; margin-top: 16px; }
.timeline ul { padding-left: 18px; margin: 24px 0 0; color: var(--muted); font-size: .92rem; }
.timeline li { padding-left: 6px; margin-top: 12px; }
.timeline li::marker { color: var(--accent-ink); }
.earlier { border-top: 1px solid var(--line); padding-top: 18px; }
.earlier summary { cursor: pointer; min-height: 44px; padding: 10px 0; color: var(--muted); }
.earlier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-top: 24px; }
.earlier-grid h3 { font-size: 1.4rem; margin: 12px 0; }
.earlier-grid p:not(.eyebrow) { font-size: .9rem; }
#skills { border-top: 1px solid var(--line); }
.skill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.skill-grid article { min-width: 0; padding: 28px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; transition: background .3s, border-color .3s; }
.skill-number { color: var(--accent-ink); }
.skill-grid h3 { font-size: 1.3rem; margin: 40px 0 20px; line-height: 1.15; overflow-wrap: anywhere; }
.skill-grid p { font-size: .875rem; line-height: 1.9; }
.support-tools { display: flex; justify-content: space-between; gap: 28px; border-top: 1px solid var(--line); margin-top: 28px; padding-top: 24px; }
.support-tools span { color: var(--accent-ink); font-size: .875rem; }
.support-tools p { font-size: .875rem; max-width: 620px; }
.about-section { background: var(--surface); border-block: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 100px; }
.about-grid h2 { margin-top: 28px; }
.about-copy { margin-top: 28px; font-size: .96rem; }
.education-list article { padding: 22px 0; border-bottom: 1px solid var(--line); }
.education-list article:first-child { padding-top: 0; }
.education-list article:last-child { border-bottom: 0; }
.education-list h3 { font-size: 1.2rem; margin-top: 10px; }
.education-list p:not(.eyebrow) { font-size: .85rem; margin-top: 12px; }
.education-list .subtle { font-size: .875rem; }
.contact h2 { font-size: clamp(3.4rem, 7.7vw, 7rem); margin-top: 28px; max-width: 1000px; }
.contact > p:not(.eyebrow) { max-width: 50ch; margin-top: 28px; }
.contact-email { display: inline-block; max-width: 100%; overflow-wrap: anywhere; font-size: clamp(1.1rem, 2.7vw, 2rem); color: var(--accent-ink); margin-top: 36px; text-decoration: underline; text-underline-offset: 10px; }
.contact-links { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-top: 32px; font-size: .875rem; color: var(--muted); }
.footer { display: flex; gap: 24px; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-block: 26px 90px; }
.footer p { font-size: .875rem; }
.footer p + p { margin: 0; }
.motion-toggle { position: fixed; bottom: 18px; right: 20px; z-index: 25; min-height: 44px; padding: 10px 17px; background: #f8f8f5f5; color: var(--text); border: 1px solid #65767e; border-radius: 28px; font-size: .875rem; box-shadow: 0 8px 30px #0003; }
.motion-toggle[aria-pressed="true"] { color: var(--ink); background: var(--accent); border-color: var(--accent-ink); }

/* Native motion: static, readable base; feature detection and preference gates. */
.reading-progress { display: none; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .reading-progress { display: block; position: fixed; z-index: 50; inset: 0 0 auto; height: 3px; background: var(--accent-ink); transform-origin: left; animation: reading linear both; animation-duration: auto; animation-timeline: scroll(root block); }
  }
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration: .4s; animation-timing-function: var(--ease); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
}
@keyframes reading { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .button:hover { transform: translateY(-3px); }
  html:not([data-motion="off"]) .project-preview:hover img { transform: scale(1.06); }
  .skill-grid article:hover { background: #e5edfb; border-color: #9eafd7; }
}

/* Responsive layouts preserve reading order and full-size touch controls. */
@media (max-width: 1100px) {
  .wrap { width: calc(100% - 64px); }
  .hero { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); padding-top: 20px; }
  .hero-copy { padding-block: 28px 40px; }
  h1 { font-size: clamp(2.75rem,5.2vw,3.6rem); }
  .desktop-nav { gap: 0; }
  .desktop-nav a { padding-inline: 8px; }
  .desktop-nav { font-size: .875rem; }
  .project { grid-template-columns: 36px minmax(0,1fr) minmax(0,1fr); gap: 20px; padding: 24px; }
  .project-compact { grid-template-columns: 45px minmax(0,1fr); }
  .skill-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .about-grid { gap: 50px; }
}
@media (max-width: 760px) {
  :root { scroll-padding-top: 88px; }
  .wrap { width: calc(100% - 40px); }
  .header-inner { min-height: 80px; gap: 12px; }
  .desktop-nav { display: none; }
  .header-controls { gap: 8px; }
  .mobile-nav { display: block; position: relative; }
  .mobile-nav summary { cursor: pointer; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 30px; font-size: .875rem; }
  .mobile-nav[open] summary { background: var(--surface); }
  .mobile-nav nav { position: absolute; top: 54px; right: 0; width: 220px; display: flex; flex-direction: column; padding: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 40px #101d2415; }
  .mobile-nav nav a { padding: 12px; }
  .mobile-nav nav a[aria-current="location"] { text-decoration: underline; }
  .header-controls > .language-switch { display: flex; }
  .header-controls .language-switch { gap: 0; }
  .header-controls .language-switch a { min-width: 36px; }
  .menu-trigger,.menu-close { padding-inline: 18px; gap: 18px; }
  .menu-top { padding-block: 16px; }
  .menu-body { grid-template-columns: 1fr; gap: 32px; padding-block: 24px 32px; }
  .menu-row { font-size: clamp(2.6rem,10.5vw,4.8rem); padding-block: 4px; }
  .menu-links > a { padding-block: 12px; }
  .menu-feature .menu-project img,.menu-caption { display: none; }
  .menu-label { margin-bottom: 10px; }
  .menu-project { font-size: 1.1rem; }
  .menu-bottom { gap: 16px; padding-block: 20px; }
  .menu-bottom > p { flex-basis: calc(100% - 100px); }
  .hero { grid-template-columns: 1fr; gap: 16px; padding-top: 20px; }
  .hero-copy { padding-block: 14px 0; }
  h1 { margin-block: 20px 16px; font-size: clamp(2.3rem,9vw,4rem); }
  :lang(de) h1 { font-size: clamp(1.9rem,7.5vw,3.25rem); }
  .hero-role { font-size: 1.12rem; }
  .hero-intro { font-size: 1rem; margin-top: 12px; max-width: 42ch; }
  .hero-actions { margin-top: 24px; gap: 8px; }
  .button { padding-inline: 16px; gap: 12px; }
  .portrait-panel { width: min(340px,88%); justify-self: center; }
  .section-heading,.experience-layout,.about-grid,.work-section .section-heading > div { grid-template-columns: 1fr; gap: 24px; }
  .section-heading { margin-bottom: 30px; }
  .section-heading > .eyebrow { padding-top: 0; }
  .work-section .section-heading > div { gap: 16px; }
  .project-grid { grid-template-columns: 1fr; }
  .project { grid-template-columns: 28px minmax(0,1fr); gap: 16px; padding: 20px; border-radius: 18px; }
  .project-index { font-size: 2rem; }
  .project-preview { grid-column: 1 / -1; }
  .project-preview img { aspect-ratio: 1.7 / 1; }
  .project h3 { font-size: 1.8rem; }
  .project-kind { font-size: .8rem; }
  .company-block { position: static; }
  .company-block > p { max-width: none; }
  .role-heading h3 { font-size: 1.3rem; }
  .earlier-grid { grid-template-columns: 1fr; gap: 24px; }
  .earlier-spotlight { padding: 24px; }
  .career-strip { grid-template-columns: 1fr; margin-top: 8px; }
  .career-strip a,.career-strip a:first-child { padding: 18px 0; }
  .career-strip a + a { border-left: 0; border-top: 1px solid var(--line); }
  .support-tools { display: block; }
  .support-tools p { margin-top: 12px; }
  .about-grid { gap: 40px; }
  .simulation-heading { display: block; }
  .simulation-heading > p { margin-top: 20px; }
  .scenario-choices { gap: 6px; }
  .scenario-choice { flex-direction: column; align-items: start; gap: 8px; }
  .scenario-choice strong { font-size: .8rem; overflow-wrap: anywhere; }
  .scenario-choice small { display: none; }
  .scenario-choice { padding: 10px; }
  .scene-viewport { min-height: 420px; }
  .simulation-console { grid-template-columns: 1fr; gap: 16px; }
  .simulation-actions button { width: 100%; }
  .scene-fallback { padding: 20px; }
  .scene-fallback h5 { font-size: 1.6rem; margin-block: 10px 16px; }
  .process-map { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
  .process-map li { padding: 10px; gap: 4px; font-size: .875rem; }
  .scene-fallback > p:last-of-type { font-size: .8rem; }
  .demo-back { margin-top: 16px; }
  .simulation-ledger { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .simulation-reference-grid { grid-template-columns: 1fr; gap: 20px; }
  .flow-legend { grid-template-columns: repeat(2,minmax(0,1fr)); font-size: .75rem; gap: 6px 12px; }
  .footer { flex-wrap: wrap; gap: 12px; }
  .footer p:last-child { flex-basis: 100%; }
}
@media (max-width: 400px) {
  .skill-grid { grid-template-columns: 1fr; }
  .project-preview { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reading-progress { display: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; }
html[data-motion="off"] .reading-progress { display: none; }
html[data-motion="off"]::view-transition-group(*), html[data-motion="off"]::view-transition-old(*), html[data-motion="off"]::view-transition-new(*) { animation: none !important; }

@media print {
  body { background: white; color: #111; }
  .header,.site-menu,.hero-actions,.work-toolbar,.motion-toggle,.reading-progress,.footer,.project-lab { display: none !important; }
  .wrap { width: 100%; }
  .section,.hero { padding-block: 20px; }
  .hero { grid-template-columns: 2fr 1fr; gap: 20px; }
  h1,:lang(de) h1 { font-size: 2.5rem; }
  h2,.contact h2 { font-size: 1.7rem; }
  .portrait-frame { max-width: 200px; }
  .portrait-panel { display: block; width: 100%; }
  .project-grid,.skill-grid { display: block; }
  .project,.project[hidden] { display: block !important; background: white; color: #111; margin-block: 16px; padding: 20px; border-color: #aaa; }
  .project-preview { max-width: 340px; margin-top: 16px; }
  .project,.timeline-item,.skill-grid article,.education-list article { break-inside: avoid; }
  .about-section,.skill-grid article { background: white; }
  .project h3 { font-size: 1.6rem; }
  .section-heading { margin-bottom: 24px; }
  .company-block { position: static; }
  .project-details::details-content { content-visibility: visible; }
  .project-details > :not(summary) { display: block; }
  .about-grid { gap: 30px; }
  .contact { display: none; }
}
/* Compact, semantic comparison lives below the player, never on its canvas. */
.case-study-entry { margin-right: 24px; }
.simulation-comparison { margin-top: 24px; border-top: 1px solid var(--line); }
.simulation-comparison > summary { padding-block: 18px; cursor: pointer; font-weight: 500; }
.outcome-comparison { margin-top: 24px; }
.outcome-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .9rem; }
.outcome-table caption { text-align: left; font-size: 1.25rem; font-weight: 500; margin-bottom: 18px; color: var(--text); }
.outcome-table th,.outcome-table td { text-align: left; vertical-align: top; padding: 18px 16px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; hyphens: auto; }
.outcome-table thead th { font-size: .8rem; font-weight: 400; color: var(--muted); background: var(--surface); }
.outcome-table th:first-child { width: 28%; }
.outcome-table th:last-child { width: 28%; }
.outcome-table tbody th { font-weight: 500; }
.outcome-play { display: block; margin-top: 12px; min-height: 44px; padding-block: 6px; font-size: .8rem; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 4px; }
.outcome-state { margin: 0; font-size: .8rem; }
.outcome-state > div { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.outcome-state dt { color: var(--muted); }
.outcome-state dd { margin: 0; font-family: Consolas,monospace; }
.outcome-observed { display: inline-block; margin-top: 12px; padding: 4px 8px; background: #e3eddc; color: #315722; border-radius: 5px; font-size: .8rem; }
.outcome-observed[data-match="false"] { color: #a22b1e; background: #fae7e1; }
.comparison-footnote,.comparison-session { margin-top: 16px; font-size: .8rem; max-width: 90ch; }
@media (max-width: 760px) {
  .outcome-table { font-size: .8rem; }
  .outcome-table th,.outcome-table td { padding: 12px 6px; }
  .outcome-table thead th { font-size: .75rem; }
  .outcome-table th:first-child { width: 30%; }
  .outcome-table th:last-child { width: 27%; }
  .outcome-state > div { display: block; margin-bottom: 12px; }
  .outcome-state dd { margin-top: 2px; }
  .outcome-play,.outcome-state { font-size: .75rem; }
}

/* Robotics and current hardware study are visible alongside firmware work. */
.project-robotics { grid-column: 1 / -1; background: #eff4ff; }
.robotics-feature { min-height: 240px; display: flex; flex-direction: column; justify-content: space-between; padding: 28px; border-radius: 14px; color: #eaf1ff; background: radial-gradient(circle at 75% 25%,#396bd5,#162d5c 48%,#0c1930); }
.robotics-feature > span,.robotics-feature small { font: .75rem/1.5 Consolas,monospace; letter-spacing: .06em; }
.robotics-feature strong { font-size: clamp(5rem,9vw,8rem); line-height: 1; font-weight: 500; letter-spacing: -.08em; }
.robotics-feature strong span { font-size: .3em; letter-spacing: 0; }
.study-focus { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 24px; padding: 28px; margin-bottom: 24px; background: #e2eaff; border: 1px solid #c9d8fa; border-radius: 18px; }
.study-focus h3 { margin-top: 10px; font-size: clamp(1.4rem,2vw,1.8rem); }
@media (max-width: 760px) {
  .project-robotics { grid-template-columns: 28px minmax(0,1fr); }
  .project-robotics .robotics-feature { grid-column: 2; min-height: 200px; }
  .study-focus { grid-template-columns: 1fr; padding: 22px; }
}

/* The engineering scene is part of the introduction, not a second banner. */
@media screen {
  .hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; column-gap: clamp(24px,4vw,72px); padding-top: 34px; }
  .hero-copy { padding: 30px 0; }
  .hero-identity { display: flex; align-items: center; gap: 12px; }
  .hero-identity .portrait-panel { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; overflow: hidden; align-self: center; }
  .hero-identity .portrait-frame, .hero-identity .portrait-frame img { width: 100%; height: 100%; object-fit: cover; }
  .hero-name span { color: var(--muted); letter-spacing: .04em; font-weight: 400; }
  .engineering-hero { grid-column: auto; min-width: 0; margin: 0; }
  .hero-orbit { height: clamp(410px, 42vw, 580px); border-radius: 18px; background: radial-gradient(ellipse at 48% 36%, #203c4e 0%, #101f30 48%, #08131f 100%); }
  .hero-orbit::after { content: ''; position: absolute; inset: 16px; pointer-events: none; border: 1px solid #b2d7dc1a; border-radius: 10px; }
  .hero-orbit canvas { touch-action: pan-y; cursor: grab; }
  .hero-orbit canvas:active { cursor: grabbing; }
  .hero-scene-label { position: absolute; inset: 25px 27px auto; display: flex; justify-content: space-between; gap: 10px; color: #a9c4ca; font: 500 10px/1.4 monospace; letter-spacing: .12em; pointer-events: none; }
  .hero-scene-label span:last-child { color: #6b929c; text-align: right; }
  .engineering-hero figcaption { font-size: .78rem; padding-top: 14px; }
  .hero-visual-header { align-items: center; }
  .hero-visual-header p { max-width: 42ch; line-height: 1.45; }
  .hero-view-controls button { width: 44px; min-height: 44px; }
  .hero-explode:not([hidden]) { display: flex; align-items: center; gap: 12px; margin-top: 12px; color: var(--muted); font-size: .75rem; }
  .hero-explode input { flex: 1; min-width: 60px; accent-color: #2367be; }
  .hero-project-links { display: flex; flex-wrap: wrap; gap: 0 18px; border: 0; margin-top: 8px; }
  .hero-project-links a, .hero-project-links a:first-child { min-height: 38px; padding: 6px 0; font-size: .78rem; }
  .hero-project-links a + a { border: 0; }
  .career-strip { grid-column: 1 / -1; }
  @media (max-width: 760px) {
    .hero { grid-template-columns: 1fr; gap: 22px; padding-top: 20px; }
    .hero-copy { padding: 8px 0 0; }
    .hero-orbit { height: clamp(320px, 90vw, 440px); }
    .hero-scene-label { inset: 22px 23px auto; font-size: 9px; }
    .career-strip { grid-column: auto; }
  }
}

@media screen {
  .hero-scene-hint { position: absolute; bottom: 26px; right: 28px; color: #a9c4ca; font: 500 10px/1.4 monospace; letter-spacing: .12em; opacity: 0; pointer-events: none; transition: opacity .3s; }
  html[data-hero-3d="ready"] .hero-scene-hint { opacity: 1; }
  .hero-view-controls button:focus-visible, .hero-explode input:focus-visible { outline: 3px solid #3b77d8; outline-offset: 3px; }
}

/* Interactive topics stay in HTML, with a direct link to the underlying work. */
@media screen {
  .hero-explore:not([hidden]) { margin-top: 14px; padding: 15px 16px; border: 1px solid #d5dfe6; border-radius: 14px; background: #f5f8fa; }
  .hero-explore-label { margin: 0 0 9px; color: #5a6b75; font: 600 .65rem/1.4 monospace; letter-spacing: .12em; text-transform: uppercase; }
  .hero-focus-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
  .hero-focus-buttons button { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 7px 11px; border: 1px solid #cad6dc; border-radius: 8px; color: #334c58; background: transparent; font-family: inherit; font-size: .76rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; cursor: pointer; }
  .hero-focus-buttons button span:first-child { color: #607c85; font: 500 .65rem/1 monospace; }
  .hero-focus-buttons button[aria-pressed="true"] { background: #123744; color: #fff; border-color: #123744; }
  .hero-focus-buttons button[aria-pressed="true"] span:first-child { color: #8ad7ce; }
  .hero-focus-buttons button:focus-visible { outline: 3px solid #3b77d8; outline-offset: 2px; }
  .hero-focus-detail { color: #42535e; font-size: .8rem; line-height: 1.55; margin-top: 11px; }
  .hero-focus-detail a { color: #174d98; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
  @media (max-width: 760px) {
    .hero-focus-buttons { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
    .hero-focus-buttons button { min-height: 48px; justify-content: center; padding: 6px; }
    .hero-focus-buttons button span:first-child { display: none; }
    .motion-toggle { width: 44px; height: 44px; padding: 0; right: 10px; bottom: max(10px,env(safe-area-inset-bottom)); font-size: 0; }
    .motion-toggle::after { content: 'Ⅱ'; font: 600 1.05rem/1 sans-serif; }
    .motion-toggle[aria-pressed="true"]::after { content: '▶'; font-size: .85rem; }
  }
}

/* A direct entry into the working firmware experiment, available without 3D. */
.hero-demo { display: inline-flex; align-items: center; gap: 13px; width: min(100%, 390px); margin-top: 22px; padding: 13px 16px; border: 1px solid #d4dfe7; border-radius: 14px; color: #122d3b; background: #edf4f5; text-decoration: none; }
.hero-demo-mark { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: #163c4b; color: #d9f7f3; font-size: 1.2rem; }
.hero-demo strong, .hero-demo small { display: block; }
.hero-demo strong { font-size: .9rem; font-weight: 600; }
.hero-demo small { color: #52666f; font-size: .76rem; line-height: 1.4; margin-top: 3px; }
.hero-demo:focus-visible { outline: 3px solid #3b77d8; outline-offset: 3px; }

/* Grid and light are CSS layers behind the actual WebGL assembly. */
.hero-orbit::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(#80cbd21c 1px,transparent 1px),linear-gradient(90deg,#80cbd21c 1px,transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(ellipse at center,#000 10%,transparent 76%); }
.project { position: relative; }
.project::after { content: ''; position: absolute; top: -1px; left: 32px; width: min(32%, 220px); height: 2px; border-radius: 2px; background: linear-gradient(90deg,#2674b6,#73c9c4,transparent); opacity: .5; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html:not([data-motion="off"]) .project { view-timeline-name: --work-card; view-timeline-axis: block; }
    html:not([data-motion="off"]) .project::after { transform-origin: left; animation: work-line linear both; animation-timeline: --work-card; animation-range: entry 5% entry 90%; }
  }
}
@keyframes work-line { from { transform: scaleX(.12); opacity: .12; } to { transform: scaleX(1); opacity: .75; } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .hero-demo { transition: transform .25s, border-color .25s, box-shadow .25s; }
  html:not([data-motion="off"]) .hero-demo:hover { transform: translateY(-3px); border-color: #85b7bb; box-shadow: 0 12px 28px #123c4915; }
}
@media (max-width: 760px) {
  .hero-demo { margin-top: 18px; }
  .hero-view-controls { flex-wrap: wrap; }
  .project::after { left: 20px; }
}

/* A spatial, code-built illustration remains visible if WebGL is unavailable. */
.hero-poster { overflow: hidden; perspective: 800px; }
.fallback-stage { position: absolute; inset: 0; display: grid; place-items: center; perspective: 800px; }
.fallback-assembly { position: relative; width: min(56%, 300px); aspect-ratio: 1; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-35deg); }
.fallback-plane { position: absolute; inset: 0; border-radius: 8px; transform-style: preserve-3d; }
.fallback-board { transform: translateZ(-38px); background: linear-gradient(145deg,#183e4a,#0b202e); border: 2px solid #80d1c9; box-shadow: 0 0 0 6px #0c2630, 0 0 0 8px #476e6b, 0 18px 65px #0009; }
.fallback-board::before { content: ''; position: absolute; inset: 9%; border: 1px solid #76c9c866; background: repeating-linear-gradient(90deg,transparent 0 15px,#67b9b833 16px 17px),repeating-linear-gradient(0deg,transparent 0 15px,#67b9b822 16px 17px); }
.fallback-board i { position: absolute; width: 7%; aspect-ratio: 1; border: 2px solid #c3a67b; border-radius: 50%; }
.fallback-board i:nth-child(1) { top: 4%; left: 4%; }
.fallback-board i:nth-child(2) { top: 4%; right: 4%; }
.fallback-board i:nth-child(3) { bottom: 4%; left: 4%; }
.fallback-board i:nth-child(4) { bottom: 4%; right: 4%; }
.fallback-circuit { inset: 12%; transform: translateZ(-18px); border: 1px solid #6fdedb88; background: repeating-linear-gradient(90deg,transparent 0 12px,#6ac6c333 13px 14px),repeating-linear-gradient(0deg,transparent 0 12px,#6ac6c333 13px 14px); }
.fallback-package { inset: 28%; transform: translateZ(12px); background: linear-gradient(135deg,#385561,#101c28); border: 3px solid #bba47f; box-shadow: 0 0 0 8px #112a35, 0 0 0 10px #78d5cd88, 0 18px 35px #0008; }
.fallback-package span { position: absolute; inset: 10%; border: 1px solid #8ddbd5; background: repeating-linear-gradient(90deg,transparent 0 9px,#85d6cd33 10px 11px),repeating-linear-gradient(0deg,transparent 0 9px,#85d6cd33 10px 11px); }
.fallback-die { inset: 38%; transform: translateZ(52px); border: 1px solid #a7eff0; background: linear-gradient(135deg,#d7c59b,#438c91 45%,#172f40); box-shadow: 0 0 28px #58e5d988; }
.fallback-die span { position: absolute; inset: 17%; border: 1px solid #e5f9f0aa; background: repeating-linear-gradient(90deg,transparent 0 5px,#c3ffeb88 6px 7px); }
.fallback-frame { inset: 19%; transform: translateZ(76px); border: 1px solid #a0e9e570; box-shadow: 0 0 20px #6ce4d529; }
.fallback-caption { position: absolute; inset: auto 27px 25px; display: flex; justify-content: space-between; gap: 1em; width: auto; color: #9dc9cc; font: 500 10px/1.4 monospace; letter-spacing: .12em; }
@keyframes fallback-orbit { 0%,100% { transform: rotateX(58deg) rotateZ(-35deg); } 50% { transform: rotateX(53deg) rotateZ(-22deg); } }
@media (prefers-reduced-motion: no-preference) { html[data-hero-active="true"]:not([data-hero-3d="ready"]) .fallback-assembly { animation: fallback-orbit 12s ease-in-out infinite; } }
@media (max-width: 760px) { .fallback-assembly { width: min(58%, 250px); } .fallback-caption { inset: auto 23px 23px; font-size: 9px; } }

/* A small, real convolution calculation presented as an engineering instrument. */
.convolution-invite { display:flex; align-items:center; gap:14px; max-width:385px; margin:10px 0 0; padding:14px 20px; border:1px solid #b9d5d5; border-radius:14px; color:#173746; text-decoration:none; background:#e8f2f1; }
.convolution-invite > span:first-child { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#c3fff1; background:#123944; }
.convolution-invite strong,.convolution-invite small { display:block; }
.convolution-invite small { color:#526b70; margin-top:3px; }
.convolution-lab { margin:0 0 24px; padding:clamp(22px,4vw,48px); border-radius:22px; color:#e7f4f3; background:radial-gradient(ellipse at 75% 35%,#1a4350,#0b1927 65%); overflow:hidden; }
.convolution-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; padding-bottom:30px; border-bottom:1px solid #8cbec633; }
.convolution-kicker,.conv-label { color:#86c9c8; font:600 .68rem/1.4 monospace; letter-spacing:.14em; }
.convolution-heading h3 { margin:.7rem 0; font-size:clamp(1.8rem,3.3vw,3rem); line-height:1.05; letter-spacing:-.04em; }
.convolution-heading p:not(.convolution-kicker) { max-width:35rem; color:#b7cace; line-height:1.55; }
.convolution-heading a { color:#abebe3; font-size:.84rem; white-space:nowrap; }
.convolution-layout { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,1.5fr); gap:clamp(24px,5vw,72px); padding:30px 0; }
.conv-label { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.conv-label button { background:none; border:0; padding:4px; color:#a8d8d5; font:inherit; letter-spacing:0; cursor:pointer; }
.convolution-controls > p { color:#b7cace; font-size:.85rem; margin:10px 0 15px; }
.convolution-input { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; max-width:230px; }
.convolution-pixel { display:block; aspect-ratio:1; border:1px solid #41616a; border-radius:5px; background:#1b3442; cursor:pointer; }
.convolution-pixel[aria-pressed="true"] { background:#72e4d2; border-color:#b2fff0; box-shadow:0 0 12px #50dcca44; }
.convolution-pixel:focus-visible,.convolution-kernels button:focus-visible,.conv-label button:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.conv-filter-label { margin:30px 0 12px; }
.convolution-kernels { display:flex; flex-wrap:wrap; gap:6px; }
.convolution-kernels button { border:1px solid #54727b; border-radius:100px; background:transparent; color:#c7d8da; padding:8px 12px; cursor:pointer; font-size:.8rem; }
.convolution-kernels button[aria-pressed="true"] { color:#102b32; border-color:#9ceadd; background:#9ceadd; }
.conv-equation { display:flex; align-items:center; gap:14px; margin-top:15px; color:#9dbdbf; font:500 .8rem monospace; }
.kernel-grid { display:grid; grid-template-columns:repeat(3,1.8rem); gap:3px; }
.kernel-grid span { padding:4px; text-align:center; background:#294451; color:#c3e6e3; border-radius:3px; }
.convolution-result { min-width:0; }
.convolution-viewport { height:clamp(250px,30vw,365px); position:relative; overflow:hidden; margin-top:12px; border:1px solid #709c9e55; border-radius:14px; background:radial-gradient(ellipse at center,#1c4b57 0,#102631 70%); }
.convolution-viewport canvas,.convolution-fallback { position:absolute; inset:0; width:100%; height:100%; }
.convolution-viewport canvas { opacity:0; }
.convolution-viewport[data-ready="true"] canvas { opacity:1; }
.convolution-viewport[data-ready="true"] .convolution-fallback { visibility:hidden; }
.convolution-fallback { display:flex; gap:9%; align-items:center; justify-content:center; perspective:650px; }
.conv-fallback-map { width:40%; display:grid; grid-template-columns:repeat(5,1fr); gap:4px; transform:rotateX(52deg) rotateZ(-30deg); transform-style:preserve-3d; }
.conv-fallback-map.conv-fallback-output { width:24%; grid-template-columns:repeat(3,1fr); }
.conv-fallback-map i { aspect-ratio:1; border:1px solid #5c8e92; background:#294753; transform:translateZ(var(--height,0px)); box-shadow:0 5px 0 #142d38; }
.conv-fallback-map i[data-sign="positive"] { background:#65d9c8; border-color:#b5fff0; box-shadow:0 5px 0 #286c6a,0 0 14px #61ebd644; }
.conv-fallback-map i[data-sign="negative"] { background:#b8a0f7; border-color:#e1d5ff; box-shadow:0 5px 0 #4c3b78,0 0 14px #bd8fff44; }
.conv-viewport-labels { position:absolute; inset:auto 16px 15px; display:flex; justify-content:space-between; gap:12px; color:#a4c7c6; font:500 .6rem monospace; letter-spacing:.1em; pointer-events:none; }
.conv-output-wrap { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:18px; }
.conv-output-wrap p { color:#b7cace; font-size:.8rem; }
.convolution-output { display:grid; grid-template-columns:repeat(3,2.5rem); gap:3px; font:500 .7rem monospace; }
.convolution-value { padding:5px 2px; text-align:center; background:#27404d; border-radius:3px; }
.convolution-value[data-sign="positive"] { color:#adfbea; }.convolution-value[data-sign="negative"] { color:#d6c6ff; }
.conv-legend { display:flex; gap:12px; color:#b7cace; font-size:.7rem; }
.conv-legend span::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; background:#72e4d2; }.conv-legend span:last-child::before { background:#b8a0f7; }
.convolution-note,.convolution-noscript { color:#a9bfc3; font-size:.78rem; line-height:1.55; }
.convolution-note { border-top:1px solid #8cbec633; padding-top:18px; }
@media (max-width:760px) { .convolution-heading { display:block; }.convolution-heading a { display:inline-block; margin-top:15px; }.convolution-layout { grid-template-columns:1fr; }.convolution-input { max-width:250px; }.convolution-viewport { height:270px; }.convolution-invite { width:100%; } }
@media (prefers-reduced-motion:no-preference) { html:not([data-motion="off"]) .convolution-pixel,html:not([data-motion="off"]) .conv-fallback-map i { transition:transform .35s,background .35s,box-shadow .35s; } }
.convolution-viewport canvas { touch-action:pan-y; cursor:grab; }
.conv-view-controls:not([hidden]) { display:flex; align-items:center; justify-content:flex-end; gap:6px; margin-top:10px; }
.conv-view-controls span { margin-right:auto; color:#b7cace; font-size:.72rem; }
.conv-view-controls button { min-width:44px; min-height:44px; border:1px solid #54727b; border-radius:50%; color:#b8f2ea; background:#193440; cursor:pointer; font-size:1rem; }
.conv-view-controls button:focus-visible { outline:3px solid #fff; outline-offset:3px; }
@media (max-width:760px) {
  .convolution-layout { display:flex; flex-direction:column; gap:0; }
  .convolution-controls,.convolution-result { display:contents; }
  .convolution-result > .conv-label { order:0; }
  .convolution-viewport { order:1; width:100%; }
  .conv-view-controls { order:2; }
  .convolution-controls > .conv-label:first-child { order:3; margin-top:26px; }
  .convolution-controls > p { order:4; }
  .convolution-input { order:5; }
  .conv-filter-label { order:6; }
  .convolution-kernels { order:7; }
  .conv-equation { order:8; }
  .conv-output-wrap { order:9; }
}
#convolution-lab { scroll-margin-top:100px; }
.convolution-pixel[data-window="true"] { outline:1px solid #f6d58e; outline-offset:-2px; }
.convolution-output .convolution-value { border:1px solid transparent; color:#cfdddd; cursor:pointer; min-height:36px; }
.convolution-output .convolution-value[aria-pressed="true"] { border-color:#f6d58e; box-shadow:0 0 0 1px #f6d58e; }
.convolution-output .convolution-value:focus-visible { outline:3px solid white; outline-offset:2px; }
.conv-fallback-output i[data-selected="true"] { outline:2px solid #f6d58e; outline-offset:2px; }
.conv-calculation { margin:0 0 22px; padding:15px 17px; border:1px solid #80b8b533; border-radius:10px; color:#adc9c9; background:#102733; font:.75rem/1.6 monospace; overflow-wrap:anywhere; }
.conv-calculation p:first-child { color:#f6d58e; margin-bottom:6px; }
.convolution-kernels button { min-height:44px; }
.convolution-output .convolution-value { min-height:44px; }
.conv-scan { min-height:44px; padding:8px 12px; border:1px solid #799c9b; border-radius:99px; color:#baf3e9; background:#1c3c46; cursor:pointer; font-size:.78rem; }
.conv-scan:disabled { opacity:.45; cursor:not-allowed; }
.conv-scan:focus-visible { outline:3px solid white; outline-offset:3px; }
.conv-motion-note { color:#c4d8d9; font-size:.75rem; }

/* Keep the firmware experiment readable in narrow and translated layouts. */
.simulation-heading > * { min-width: 0; }
.demo-back { display: block; width: fit-content; max-width: 100%; overflow-wrap: anywhere; }
.scenario-choice > span,.process-map li { min-width: 0; }
.scenario-choice strong,.scenario-choice small,.process-map strong,.process-map small {
  overflow-wrap: anywhere;
  hyphens: auto;
}
.process-map { grid-template-columns: repeat(auto-fit,minmax(min(100%, 12rem),1fr)); }
@media (max-width: 760px) {
  .simulation-heading .demo-back { margin-top: 14px; }
  .scenario-choices { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .scenario-choice { flex-direction: row; align-items: center; gap: 12px; padding: 12px; }
  .scenario-choice strong { font-size: .95rem; overflow-wrap: anywhere; hyphens: auto; }
  .scenario-choice small { display: block; }
  .scene-fallback { min-width: 0; }
  .process-map { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .process-map li { grid-template-columns: 2rem minmax(0,1fr); gap: 3px 10px; padding: 12px; }
  .process-map li > span { grid-row: span 2; }
  .simulation-ledger li { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
  .motion-toggle:not([hidden]) { position: static; display: block; width: auto; height: auto; margin: 16px auto; padding: 10px 17px; font-size: .875rem; }
  .motion-toggle::after { content: none; }
}


/* Engineering observatory: one instrument, four different areas of work. */
@media screen {
  .hero-orbit {
    --observatory-glow: #3ca7a2;
    isolation: isolate;
    background: radial-gradient(ellipse at 50% 56%, #214957 0%, #102535 42%, #09131f 78%);
    box-shadow: inset 0 1px #c7f4ed22, 0 22px 60px #142a3d1c;
  }
  .hero-orbit[data-focus="security"] { --observatory-glow: #8399ed; }
  .hero-orbit[data-focus="robotics"] { --observatory-glow: #e4aa64; }
  .hero-orbit[data-focus="automation"] { --observatory-glow: #69b7ef; }
  .hero-orbit::before {
    opacity: .32;
    background-image: radial-gradient(ellipse at center, var(--observatory-glow), transparent 62%);
    filter: blur(50px);
    transform: scale(.75);
    mask-image: none;
  }
  .hero-orbit::after { inset: 13px; border-color: #b8f0e021; border-radius: 12px; }
  .hero-scene-label { z-index: 2; color: #d2e7e8; font-size: .61rem; letter-spacing: .14em; }
  .hero-scene-label span:last-child { color: #9bbdc2; }
  .hero-scene-hint { z-index: 2; color: #cae4e2; }
  .hero-visual-header { gap: 12px; }
  .hero-visual-header p { color: #50616b; font-size: .8rem; line-height: 1.5; }
  .hero-explore:not([hidden]) { padding: 17px; background: #f1f6f5; border-color: #cbdcda; }
  .hero-explore-label { color: #44645f; margin-bottom: 11px; }
  .hero-focus-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .hero-focus-buttons button {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
    min-width: 0; min-height: 70px; padding: 10px; text-align: left;
    border-color: #c8d8d5; border-radius: 9px; background: #fff; color: #334b50;
    font-size: .76rem; line-height: 1.2;
  }
  .hero-focus-buttons button span:first-child { display: block; font-size: .63rem; color: #647d7c; }
  .hero-focus-buttons button[aria-pressed="true"] { color: #fff; background: #123844; border-color: #123844; box-shadow: 0 5px 14px #12384424; }
  .hero-focus-buttons button[aria-pressed="true"] span:first-child { color: #95e3d6; }
  .hero-focus-detail { margin-top: 14px; font-size: .84rem; color: #3b5358; }
  .hero-focus-detail p { margin: 0; }
  .hero-focus-detail a { display: inline-block; margin-top: 5px; color: #14596b; font-weight: 600; white-space: normal; }
  .hero-explode:not([hidden]) { margin: 11px 2px 0; padding: 8px 0; color: #455e63; }
  .hero-explode input { accent-color: #227f79; }
  .hero-project-links { margin-top: 8px; }
  .hero-project-links a { color: #36525b; }
  .hero-view-controls button { border-radius: 50%; }
  .hero-view-controls button:focus-visible, .hero-focus-buttons button:focus-visible, .hero-focus-detail a:focus-visible { outline: 3px solid #2b6fba; outline-offset: 3px; }
  @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
    html:not([data-motion="off"]) .hero-focus-buttons button { transition: background .22s, color .22s, border-color .22s, transform .22s; }
    html:not([data-motion="off"]) .hero-focus-buttons button:hover { transform: translateY(-2px); border-color: #438d86; }
    html:not([data-motion="off"]) .hero-orbit::before { transition: background .55s; }
  }
  @media (max-width: 760px) {
    .hero-orbit { height: clamp(300px, 87vw, 430px); }
    .hero-focus-buttons { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .hero-focus-buttons button { min-height: 57px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px; padding: 9px 11px; }
    .hero-focus-buttons button span:first-child { display: block; flex: 0 0 1.5em; }
    .hero-focus-detail { font-size: .86rem; line-height: 1.55; }
    .hero-view-controls { justify-content: flex-start; }
    .hero-scene-label { gap: 12px; font-size: .56rem; }
  }
}

/* A focus-aware illustration keeps the topic selector useful without WebGL. */
.observatory-fallback { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; perspective: 700px; }
.fallback-orbit { position: absolute; width: 54%; max-width: 280px; aspect-ratio: 1; border: 1px solid var(--observatory-glow); border-radius: 50%; opacity: .68; box-shadow: 0 0 30px #6de3d322, inset 0 0 30px #6de3d322; }
.fallback-orbit-one { transform: rotateX(64deg) rotateZ(20deg); }
.fallback-orbit-two { transform: rotateY(64deg) rotateZ(-25deg); }
.fallback-core { display: grid; place-items: center; position: absolute; z-index: 1; width: clamp(90px, 24%, 155px); aspect-ratio: 1; color: #d7fcf4; background: linear-gradient(145deg,#658e94,#1b384a 47%,#0c1f2d); border: 1px solid var(--observatory-glow); box-shadow: 0 0 45px #55cabe55, 16px 22px 30px #0006, inset 0 0 24px #8de6e32a; transform: rotate(45deg); border-radius: 24%; }
.fallback-core span { transform: rotate(-45deg); font: 500 clamp(1.4rem,4vw,2.4rem)/1 monospace; letter-spacing: -.08em; }
.fallback-platform { position: absolute; width: 58%; max-width: 300px; aspect-ratio: 1; border-radius: 50%; border: 8px double #78bab75c; background: radial-gradient(circle,#32687055,#112e3e); transform: translateY(65px) rotateX(70deg); box-shadow: 0 30px 45px #0008; }
.observatory-fallback > i { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--observatory-glow); box-shadow:0 0 18px var(--observatory-glow); }
.observatory-fallback > i:nth-of-type(1) { transform:translate(-110px,-52px); }
.observatory-fallback > i:nth-of-type(2) { transform:translate(100px,-88px); }
.observatory-fallback > i:nth-of-type(3) { transform:translate(120px,64px); }
.hero-orbit[data-focus="security"] .fallback-core { border-radius: 45% 45% 48% 48%; }
.hero-orbit[data-focus="robotics"] .fallback-core { border-radius: 50%; }
.hero-orbit[data-focus="automation"] .fallback-core { border-radius: 5%; }
@media (prefers-reduced-motion:no-preference) {
  html[data-hero-active="true"]:not([data-hero-3d="ready"]):not([data-motion="off"]) .fallback-orbit-one { animation: observatory-orbit-one 10s linear infinite; }
  html[data-hero-active="true"]:not([data-hero-3d="ready"]):not([data-motion="off"]) .fallback-orbit-two { animation: observatory-orbit-two 12s linear infinite; }
  html:not([data-motion="off"]) .fallback-core { transition: border-radius .45s, border-color .45s; }
}
@keyframes observatory-orbit-one { to { transform: rotateX(64deg) rotateZ(380deg); } }
@keyframes observatory-orbit-two { to { transform: rotateY(64deg) rotateZ(-385deg); } }
.hero-detail-kicker { margin: 0 0 7px !important; color: #587b76; font: 600 .62rem/1.45 monospace; letter-spacing: .1em; }
.hero-detail-path { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 11px 0 4px; }
.hero-detail-path span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid #cbdeda; border-radius: 5px; background: #fff; color: #375b58; font: 500 .67rem/1.2 monospace; }
.hero-detail-path span + span::before { content: '→'; color: #62a296; }
.hero-scene-topic { display: none; }
.hero-orbit:not([data-focus]) [data-scene-topic="hardware"],
.hero-orbit[data-focus="hardware"] [data-scene-topic="hardware"],
.hero-orbit[data-focus="security"] [data-scene-topic="security"],
.hero-orbit[data-focus="robotics"] [data-scene-topic="robotics"],
.hero-orbit[data-focus="automation"] [data-scene-topic="automation"] { display: inline; }
.hero-scene-label .hero-scene-topics { color: #d2e7e8; text-align: left; }
@media (max-width: 760px) { .hero-detail-path span { padding: 6px 7px; font-size: .66rem; } }
.hero-explode output { min-width: 3ch; text-align: right; font: 600 .7rem/1 monospace; color: #345e5a; }
.hero-explode input { min-height: 44px; cursor: pointer; }
@media (max-width: 380px) { .hero-explode:not([hidden]) { flex-wrap: wrap; gap: 3px 10px; } .hero-explode > span { flex-basis: 100%; } }

/* The opening copy and the two interactive projects share a calmer hierarchy. */
@media screen {
  .hero-copy { max-width: 46rem; }
  .hero-identity { gap: 13px; }
  .hero-identity .portrait-panel { box-shadow: 0 0 0 3px #d7ebe6; }
  .hero-name { font-size: .75rem; letter-spacing: .13em; }
  .hero h1 { max-width: 12ch; font-weight: 600; letter-spacing: -.06em; line-height: 1.04; text-wrap: balance; }
  .hero-role { max-width: 30ch; color: #36505a; font-size: clamp(1.08rem,1.55vw,1.34rem); line-height: 1.38; }
  .hero-intro { max-width: 39ch; color: #566672; }
  .hero-actions .primary { background: #143c4b; }
  .hero-actions .primary:hover { background: #235967; }
  .hero-demo, .convolution-invite { width: min(100%, 390px); max-width: 390px; min-height: 72px; margin-top: 10px; padding: 12px 14px; border: 1px solid #d0e1df; border-radius: 12px; background: #f0f6f4; }
  .hero-demo { margin-top: 24px; }
  .hero-demo-mark, .convolution-invite > span:first-child { width: 38px; height: 38px; flex: 0 0 38px; background: #173f49; color: #ccf9ef; }
  .convolution-invite > span:first-child { font-size: 1.1rem; }
  .convolution-invite strong, .hero-demo strong { color: #173a44; font-size: .88rem; font-weight: 600; }
  .convolution-invite small, .hero-demo small { color: #536d70; font-size: .76rem; line-height: 1.4; }
  .career-strip { margin-top: clamp(26px,3vw,42px); }
  .career-strip a { transition: color .2s; }
  .career-strip a:hover, .career-strip a:focus-visible { color: #197f78; }
  @media (max-width: 760px) {
    .hero h1, :lang(de) .hero h1 { max-width: 100%; font-size: clamp(2.35rem, 9vw, 3.7rem); overflow-wrap: anywhere; }
    .hero-role { max-width: 32ch; }
    .hero-demo, .convolution-invite { max-width: none; }
    .hero-actions { gap: 8px 12px; }
    .hero-actions .button { min-height: 48px; }
    .career-strip { margin-top: 6px; }
  }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html:not([data-motion="off"]) .convolution-invite { transition: transform .25s, border-color .25s, box-shadow .25s; }
  html:not([data-motion="off"]) .convolution-invite:hover { transform: translateY(-3px); border-color: #85b7bb; box-shadow: 0 12px 28px #123c4915; }
}
@media screen { .hero-view-controls:not([hidden]) { flex-wrap: wrap; } }
/* Put the interactive scene before the secondary demo links on phones. */
@media screen and (max-width:760px) {
  .hero { gap: 0; }
  .hero-copy { display: contents; }
  .hero-identity { order: 1; }
  .hero h1 { order: 2; margin: 20px 0 14px; }
  .hero-role { order: 3; }
  .hero-intro { order: 4; margin-top: 10px; }
  .hero-actions { order: 5; margin: 22px 0 26px; }
  .engineering-hero { order: 6; }
  .hero-demo { order: 7; margin-top: 18px; }
  .convolution-invite { order: 8; }
  .career-strip { order: 9; margin-top: 22px; }
}
@media screen {
  .robotics-feature { position: relative; overflow: hidden; min-height: 270px; background: radial-gradient(circle at 75% 20%, #4473c6, #173353 52%, #0e2230); }
  .robotics-feature::after { content: ''; position: absolute; width: 230px; aspect-ratio: 1; right: -65px; top: -70px; border: 1px solid #b8f3ee55; border-radius: 50%; box-shadow: 0 0 0 25px #a2ede80e, 0 0 0 50px #a2ede809; pointer-events: none; }
  .robotics-feature strong { position: relative; z-index: 1; }
  .robotics-signal { display: flex; align-items: flex-end; height: 30px; gap: 5px; margin: 6px 0 4px; }
  .robotics-signal i { display: block; width: 5px; height: 30%; border-radius: 3px; background: #9ee8dd; opacity: .75; }
  .robotics-signal i:nth-child(4n+1) { height: 50%; }.robotics-signal i:nth-child(4n+2) { height: 95%; }.robotics-signal i:nth-child(4n+3) { height: 65%; }
  .robotics-feature .robotics-signal-label { color: #a8dcd7; font-size: .59rem; letter-spacing: .08em; }
  @media (prefers-reduced-motion:no-preference) {
    html:not([data-motion="off"]) .robotics-signal i { animation: robot-signal 2.2s ease-in-out infinite alternate; transform-origin: bottom; }
    html:not([data-motion="off"]) .robotics-signal i:nth-child(3n) { animation-delay: -.8s; }
    html:not([data-motion="off"]) .robotics-signal i:nth-child(3n+1) { animation-delay: -1.4s; }
  }
  @media (max-width:760px) { .robotics-feature { min-height: 250px; } }
}
@keyframes robot-signal { from { transform: scaleY(.45); opacity: .45; } to { transform: scaleY(1); opacity: .9; } }
.hero-detail-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.hero-detail-links a { min-height: 36px; display: inline-flex; align-items: center; }
.hero-explore[data-focus="security"] { background: #f3f4fc; border-color: #d5d9ee; }
.hero-explore[data-focus="security"] .hero-focus-buttons button[aria-pressed="true"] { background: #354781; border-color: #354781; }
.hero-explore[data-focus="robotics"] { background: #faf5ef; border-color: #eadbc8; }
.hero-explore[data-focus="robotics"] .hero-focus-buttons button[aria-pressed="true"] { background: #704929; border-color: #704929; }
.hero-explore[data-focus="automation"] { background: #eff6fa; border-color: #cfdfe8; }
.hero-explore[data-focus="automation"] .hero-focus-buttons button[aria-pressed="true"] { background: #24516c; border-color: #24516c; }
.hero-scene-instruction { position:absolute; z-index:2; left:27px; bottom:26px; display:flex; align-items:center; gap:8px; color:#c8e5e1; font:500 10px/1.4 monospace; letter-spacing:.1em; pointer-events:none; }
.hero-scene-instruction i { width:7px; height:7px; border-radius:50%; background:var(--observatory-glow); box-shadow:0 0 12px var(--observatory-glow); }
@media (max-width:760px) { .hero-scene-instruction { left:23px; bottom:24px; font-size:9px; max-width:50%; } .hero-scene-hint { right:23px; bottom:24px; max-width:38%; text-align:right; font-size:9px; } }
.robotics-story { margin: 16px 0; border-block: 1px solid #c8d6e2; }
.robotics-story summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; color: #22445b; cursor: pointer; font-size: .85rem; font-weight: 600; list-style: none; }
.robotics-story summary::-webkit-details-marker { display: none; }
.robotics-story summary::after { content: '+'; font-size: 1.3rem; font-weight: 400; }
.robotics-story[open] summary::after { content: '−'; }
.robotics-story summary:focus-visible { outline: 3px solid #3b77d8; outline-offset: 3px; }
.robotics-story ol { display: grid; gap: 12px; padding: 1px 0 17px; list-style: none; counter-reset: robotics-step; }
.robotics-story li { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 2px 10px; counter-increment: robotics-step; color: #516774; font-size: .82rem; line-height: 1.45; }
.robotics-story li::before { content: counter(robotics-step,decimal-leading-zero); grid-row: span 2; color: #548682; font: 600 .7rem/1.8 monospace; }
.robotics-story li strong { color: #274655; font-size: .84rem; }
html[data-hero-3d="ready"] .hero-orbit[data-engaged="true"] .hero-scene-hint { opacity: 0; }
@media (prefers-reduced-motion:no-preference) {
  html:not([data-motion="off"]) .hero-focus-detail > [data-hero-detail]:not([hidden]) { animation: topic-arrive .32s ease-out both; }
}
@keyframes topic-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.fallback-core span::after { content: 'SYS'; }
.hero-orbit[data-focus="security"] .fallback-core { clip-path: polygon(50% 0, 95% 17%, 91% 65%, 75% 84%, 50% 100%, 25% 84%, 9% 65%, 5% 17%); transform: rotate(0); border-radius: 0; }
.hero-orbit[data-focus="security"] .fallback-core span { transform: none; }
.hero-orbit[data-focus="security"] .fallback-core span::after { content: 'SIG'; }
.hero-orbit[data-focus="robotics"] .fallback-core span::after { content: 'ARM'; }
.hero-orbit[data-focus="automation"] .fallback-core span::after { content: 'FLOW'; font-size: .7em; letter-spacing: 0; }
.hero-focus-detail .hero-detail-note { margin: 9px 0 1px; color: #587175; font-size: .75rem; line-height: 1.45; }
@media screen {
  .study-focus { position: relative; overflow: hidden; background: #e8f1f0; border-color: #cbdeda; }
  .study-focus::after { content: ''; position: absolute; width: 170px; aspect-ratio: 1; right: -55px; top: -80px; border: 1px solid #83b9b066; border-radius: 50%; box-shadow: 0 0 0 22px #9ccfc522,0 0 0 44px #9ccfc511; pointer-events: none; }
  .study-focus > div { position: relative; z-index: 1; min-width: 0; }
  .study-experiment-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; color: #18566a; font-size: .85rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
  .study-experiment-link:focus-visible { outline: 3px solid #3b77d8; outline-offset: 3px; }
}
@media screen {
  .hero-focus-buttons button { font-size: .81rem; }
  .hero-detail-kicker { font-size: .68rem; }
  .hero-focus-detail .hero-detail-note { font-size: .8rem; }
  .hero-detail-path span { font-size: .73rem; }
  .hero-explode:not([hidden]) { font-size: .8rem; }
  .hero-project-links a, .hero-project-links a:first-child { font-size: .82rem; }
  @media (max-width:760px) { .hero-detail-path span { font-size: .72rem; } }
}
@media (prefers-contrast: more) {
  .hero-focus-buttons button { border-width: 2px; border-color: #1d4549; }
  .hero-focus-buttons button[aria-pressed="true"] { outline: 2px solid currentColor; outline-offset: -5px; }
  .hero-focus-detail, .hero-focus-detail .hero-detail-note { color: #203b40; }
  .hero-detail-path span { border-color: #416c68; color: #1f4641; }
}
@media (forced-colors: active) {
  .hero-focus-buttons button { border: 1px solid ButtonText; }
  .hero-focus-buttons button[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: -4px; }
  .hero-view-controls button, .hero-explode input { forced-color-adjust: auto; }
}
.hero-interaction-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 0 12px; }
.hero-interaction-controls .hero-explode:not([hidden]) { flex: 1 1 240px; min-width: 0; }
.hero-parameter-reset:not([hidden]) { min-height: 44px; margin-top: 11px; padding: 7px 10px; border: 1px solid #c0d2d0; border-radius: 8px; color: #315b5b; background: transparent; font: inherit; font-size: .75rem; cursor: pointer; }
.hero-parameter-reset:focus-visible { outline: 3px solid #3b77d8; outline-offset: 3px; }
@media (max-width: 760px) { .hero-interaction-controls .hero-explode:not([hidden]) { flex-basis: 100%; } .hero-parameter-reset:not([hidden]) { margin: 0 0 4px auto; } }
.hero-view-controls:not([hidden]) { margin-top: 13px; }
.hero-camera-label { flex-basis: 100%; color: #56716f; font: 600 .65rem/1.4 monospace; letter-spacing: .1em; margin-bottom: 2px; }
.hero-noscript { margin: 12px 0; color: #455e63; font-size: .85rem; line-height: 1.5; }
/* Keep touch targets responsive and make every route from the scene visible on focus. */
.hero-focus-buttons button, .hero-view-controls button, .hero-parameter-reset { touch-action: manipulation; }
.hero-project-links a:focus-visible, .hero-detail-links a:focus-visible { outline: 3px solid #3b77d8; outline-offset: 3px; border-radius: 3px; }
@media (hover:hover) and (pointer:fine) {
  .hero-project-links a:hover, .hero-detail-links a:hover { color: #1b7774; text-decoration-thickness: 2px; }
}

/* Signal instrument: a real browser calculation, shown alongside its limits. */
.signal-section { position:relative; overflow:hidden; color:#e6f4f3; background:#0a1b29; border-block:1px solid #385261; }
.signal-section::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.6; background:radial-gradient(ellipse at 15% 10%,#214e5a 0,transparent 42%),radial-gradient(ellipse at 90% 90%,#21375b 0,transparent 40%); }
.signal-shell { position:relative; padding-block:clamp(58px,7vw,100px); }
.signal-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:32px; }
.signal-heading > div { max-width:55rem; }
.signal-eyebrow,.signal-control-kicker { color:#87d6cb; font:600 .71rem/1.4 monospace; letter-spacing:.14em; }
.signal-heading h2 { max-width:16ch; margin:12px 0 14px; color:#f2f9f7; font-size:clamp(2.3rem,4.8vw,4.4rem); line-height:1.02; letter-spacing:-.055em; font-weight:500; text-wrap:balance; }
.signal-heading p:not(.signal-eyebrow) { max-width:54ch; color:#bed0d1; font-size:1rem; line-height:1.6; }
.signal-heading > a { min-height:44px; display:inline-flex; align-items:center; color:#acf1e2; font-size:.84rem; text-decoration:underline; text-underline-offset:4px; }
.signal-instrument { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.72fr); gap:18px; }
.signal-instrument[hidden],.signal-fallback[hidden] { display:none; }
.signal-plot-panel,.signal-controls { min-width:0; border:1px solid #8ac5c137; border-radius:18px; background:#0e2835d9; }
.signal-plot-panel { padding:clamp(16px,2.5vw,28px); }
.signal-plot-top { display:flex; justify-content:space-between; align-items:center; gap:12px; color:#b0cecc; font:600 .66rem/1.4 monospace; letter-spacing:.1em; }
.signal-live { display:inline-flex; align-items:center; gap:7px; text-align:right; }
.signal-live i { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#8ae6cf; box-shadow:0 0 12px #8ae6cf; }
.signal-plot-panel svg { display:block; width:100%; height:auto; margin:18px 0 8px; overflow:visible; }
.signal-grid path { fill:none; stroke:#accfd0; stroke-width:.8; opacity:.16; }
.signal-original { fill:none; stroke:#b2c9cb; stroke-width:2; opacity:.75; }
.signal-sampled { fill:none; stroke:#80ebd4; stroke-width:2; stroke-dasharray:5 6; opacity:.8; }
.signal-dots circle { fill:#9cf6e2; stroke:#112e3a; stroke-width:2; }
.signal-axis { fill:#a1bfbd; font:11px monospace; }
.signal-legend { display:flex; flex-wrap:wrap; gap:8px 18px; color:#c0d3d1; font-size:.76rem; line-height:1.5; }
.signal-legend > span { display:inline-flex; align-items:center; gap:7px; }
.signal-legend > span:last-child { flex-basis:100%; color:#9eb7b8; }
.signal-legend i { width:19px; height:2px; background:#b2c9cb; }
.signal-legend span:nth-child(2) i { width:8px; height:8px; border-radius:50%; background:#9cf6e2; }
.signal-controls { padding:clamp(18px,2.2vw,26px); }
.signal-control-kicker { margin:0 0 12px; }
.signal-presets { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:25px; }
.signal-presets button { min-height:44px; padding:8px 13px; border:1px solid #658d8c; border-radius:100px; color:#d7e9e7; background:transparent; font:inherit; font-size:.8rem; cursor:pointer; }
.signal-presets button[aria-pressed="true"] { color:#10332e; background:#a2eddd; border-color:#a2eddd; }
.signal-slider { display:block; margin:18px 0; color:#c4d9d7; font-size:.85rem; }
.signal-slider > span { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.signal-slider strong { font-weight:500; }.signal-slider output { color:#a4f0df; font:600 .85rem/1.4 monospace; }
.signal-slider input { width:100%; min-height:44px; accent-color:#8ce5d1; cursor:pointer; }
.signal-result { padding:16px; border-radius:12px; background:#173844; border:1px solid #78b5aa3d; }
.signal-result > div:first-child { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.signal-result > div:first-child span { color:#a1c7c3; font:600 .64rem/1.4 monospace; letter-spacing:.1em; }
.signal-result > div:first-child strong { color:#9ff4df; font-size:.83rem; }
.signal-result p { color:#c5d9d7; font-size:.81rem; line-height:1.5; margin:10px 0 14px; }
.signal-result dl { display:grid; gap:7px; margin:0; }.signal-result dl div { display:flex; justify-content:space-between; gap:12px; font-size:.78rem; }
.signal-result dt { color:#a6c1c0; }.signal-result dd { margin:0; color:#f1fbf9; font:600 .8rem monospace; }
.signal-section[data-signal-state="folded"] .signal-result { border-color:#f3c17e88; background:#3a342c; }
.signal-section[data-signal-state="folded"] .signal-result > div:first-child strong { color:#ffd49a; }
.signal-section[data-signal-state="boundary"] .signal-result > div:first-child strong { color:#d4c5ff; }
.signal-note,.signal-fallback { margin-top:18px; color:#a9c4c3; font-size:.78rem; line-height:1.55; max-width:80ch; }
.signal-section a:focus-visible,.signal-section button:focus-visible,.signal-section input:focus-visible { outline:3px solid #fff; outline-offset:3px; }
@media (max-width:760px) {
  .signal-heading { display:block; }.signal-heading > a { margin-top:12px; }
  .signal-instrument { grid-template-columns:minmax(0,1fr); }.signal-plot-panel,.signal-controls { border-radius:14px; }
  .signal-plot-top { font-size:.58rem; }.signal-plot-top > span:first-child { max-width:40%; }
  .signal-heading h2 { font-size:clamp(2.2rem,9vw,3.4rem); }
  .signal-legend { font-size:.78rem; }.signal-presets button { flex:1 1 auto; }
}
@media (prefers-reduced-motion:no-preference) {
  html:not([data-motion="off"]) .signal-presets button { transition:background .2s,color .2s,border-color .2s; }
  html:not([data-motion="off"]) .signal-live i { animation:signal-beacon 2.8s ease-in-out infinite; }
}
@keyframes signal-beacon { 50% { opacity:.45; box-shadow:0 0 3px #8ae6cf; } }
/* A layered horizon gives the connected stations a shared spatial setting. */
.hero-world-grid { position:absolute; left:-15%; right:-15%; bottom:-25%; height:65%; pointer-events:none; opacity:.22; transform:perspective(500px) rotateX(60deg); transform-origin:50% 100%; background-image:linear-gradient(#97d8d93a 1px,transparent 1px),linear-gradient(90deg,#97d8d93a 1px,transparent 1px); background-size:38px 38px; mask-image:linear-gradient(transparent,#000 35%,transparent 90%); }
.hero-focus-buttons button { position:relative; }
.hero-focus-buttons button::after { content:''; position:absolute; top:11px; right:11px; width:7px; height:7px; border-radius:50%; background:#65c9bd; box-shadow:0 0 0 3px #65c9bd22; }
.hero-focus-buttons [data-hero-focus="security"]::after { background:#879af0; box-shadow:0 0 0 3px #879af033; }
.hero-focus-buttons [data-hero-focus="robotics"]::after { background:#d79a54; box-shadow:0 0 0 3px #d79a5433; }
.hero-focus-buttons [data-hero-focus="automation"]::after { background:#6eb9e9; box-shadow:0 0 0 3px #6eb9e933; }
@media (max-width:760px) { .hero-focus-buttons button { padding-right:24px; }.hero-focus-buttons button::after { top:50%; transform:translateY(-50%); } }
.signal-cursor-line { fill:none; stroke:#f4c884; stroke-width:1; stroke-dasharray:4 5; opacity:.8; }
.signal-dots .signal-dot-selected { fill:#f9d390; stroke:#fff0d2; stroke-width:2; }
.signal-inspector { display:block; margin:2px 0 12px; color:#c8dfdc; font-size:.78rem; }
.signal-inspector > span { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:5px 10px; }
.signal-inspector strong { font-weight:500; }.signal-inspector output { color:#f6d69f; font:600 .75rem/1.4 monospace; }
.signal-inspector input { width:100%; min-height:44px; accent-color:#e9c486; cursor:pointer; }
.hero-journey { margin-top:14px; padding-top:13px; border-top:1px solid #ccdcd8; }
.hero-journey-intro { display:flex; justify-content:space-between; gap:12px; color:#58736f; font:600 .67rem/1.4 monospace; letter-spacing:.09em; }
.hero-journey-track { height:3px; overflow:hidden; margin-top:8px; background:#c8dbd7; border-radius:4px; }
.hero-journey-track i { display:block; width:var(--journey-progress,25%); height:100%; border-radius:4px; background:#2a8c80; }
.hero-journey-actions { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:3px; }
.hero-journey-actions > span { flex:1; text-align:center; color:#5b716e; font-size:.72rem; line-height:1.3; }
.hero-journey-actions button { min-height:44px; padding:8px 3px; border:0; color:#235a56; background:transparent; font:inherit; font-size:.75rem; font-weight:600; line-height:1.2; cursor:pointer; }
.hero-journey-actions button:disabled { opacity:.38; cursor:default; }
.hero-journey-actions button:focus-visible { outline:3px solid #3b77d8; outline-offset:2px; }
@media (prefers-reduced-motion:no-preference) { html:not([data-motion="off"]) .hero-journey-track i { transition:width .55s cubic-bezier(.2,.7,.2,1); } }
@media (max-width:380px) { .hero-journey-actions > span { font-size:.68rem; } }
.signal-scan-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0 0 12px; }
.signal-scan-row button { min-height:44px; padding:8px 13px; border:1px solid #9bc7bd; border-radius:9px; background:#1c4651; color:#d7f7ef; font:inherit; font-size:.8rem; cursor:pointer; }
.signal-scan-row button[aria-pressed="true"] { background:#a2eddd; border-color:#a2eddd; color:#10332e; }
.signal-scan-row button:disabled { opacity:.5; cursor:not-allowed; }
.signal-scan-row span:not([hidden]) { color:#c1d3d0; font-size:.76rem; line-height:1.4; }
@media print { .signal-section { display:none; } }
.world-return { display:inline-flex; align-items:center; min-height:44px; margin:4px 15px 4px 0; color:#286c69; font-size:.81rem; font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.world-return:focus-visible { outline:3px solid #3b77d8; outline-offset:3px; border-radius:3px; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) { html:not([data-motion="off"]) .world-return { transition:color .2s,transform .2s; } html:not([data-motion="off"]) .world-return:hover { color:#154c4d; transform:translateY(-2px); } }
.signal-math { margin-top:12px; border-top:1px solid #8ac5c133; color:#c7ddda; }
.signal-math summary { display:flex; align-items:center; justify-content:space-between; min-height:44px; color:#c6f2e9; font-size:.8rem; font-weight:600; cursor:pointer; list-style:none; }
.signal-math summary::-webkit-details-marker { display:none; }.signal-math summary::after { content:'+'; font-size:1.2rem; }.signal-math[open] summary::after { content:'−'; }
.signal-math summary:focus-visible { outline:3px solid white; outline-offset:3px; }
.signal-math p { font-size:.78rem; line-height:1.55; margin:0 0 9px; }
.signal-math .signal-equation { padding:10px; border-radius:7px; background:#0d2630; color:#b8f2e5; font:500 .72rem/1.6 monospace; overflow-wrap:anywhere; }
.signal-alternative { fill:none; stroke:#c6a8ff; stroke-width:2.5; opacity:.95; }
.signal-alternative[hidden],.signal-legend > span[hidden],.signal-scan-row button[hidden] { display:none; }
.signal-legend [data-signal-alternative-legend] i { width:19px; height:2px; border-radius:0; background:#c6a8ff; }
.signal-time-axis { display:flex; justify-content:space-between; margin:-15px 4.8% 12px; color:#b8d1ce; font:500 .72rem/1.3 monospace; }
@media (max-width:760px) { .signal-time-axis { font-size:.75rem; margin-top:-10px; } }
.signal-heading-links { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.signal-heading-links a { min-height:44px; display:inline-flex; align-items:center; color:#acf1e2; font-size:.84rem; text-decoration:underline; text-underline-offset:4px; }
@media (max-width:760px) { .signal-heading-links { margin-top:12px; } }
@media screen {
  .hero { position:relative; }
  .hero::before { content:''; position:absolute; z-index:-1; inset:-3rem -8vw 0; pointer-events:none; background:radial-gradient(ellipse at 18% 17%,#d5ebe777,transparent 40%),radial-gradient(ellipse at 76% 28%,#dae7ee66,transparent 45%); }
  .hero h1 .hero-word:last-child { color:#24575b; }
  .hero-manifesto { margin-top:18px; padding-left:13px; border-left:2px solid #6bb8ae; color:#3d6764; font-size:.9rem; font-weight:500; line-height:1.5; }
  .hero-orbit { border:1px solid #6ea5a451; box-shadow:inset 0 1px #d2f7ed30,0 28px 65px -32px #142e3a70; }
  .hero-orbit canvas { z-index:1; }.hero-poster,.hero-world-grid { z-index:0; }
  .hero-scene-label,.hero-scene-hint,.hero-scene-instruction { z-index:2; }
  @media (max-width:760px) { .hero-manifesto { order:5; margin-top:12px; }.hero-actions { order:6; }.engineering-hero { order:7; }.hero-demo { order:8; }.convolution-invite { order:9; }.career-strip { order:10; } }
}
.hero-world-tooltip:not([hidden]) { position:absolute; z-index:3; transform:translate(-50%,-140%); padding:7px 10px; border:1px solid #9fe2d899; border-radius:6px; background:#102b38ee; color:#e7faf5; box-shadow:0 8px 24px #0006; font:600 .7rem/1.2 monospace; letter-spacing:.03em; white-space:nowrap; pointer-events:none; }
.hero-camera-disclosure:not([hidden]) { margin-top:10px; border-bottom:1px solid #d0dedb; }
.hero-camera-disclosure summary { display:flex; align-items:center; justify-content:space-between; min-height:44px; color:#315e5a; font-size:.8rem; font-weight:600; cursor:pointer; list-style:none; }
.hero-camera-disclosure summary::-webkit-details-marker { display:none; }.hero-camera-disclosure summary::after { content:'+'; font-size:1.2rem; font-weight:400; }.hero-camera-disclosure[open] summary::after { content:'−'; }
.hero-camera-disclosure summary:focus-visible { outline:3px solid #3b77d8; outline-offset:2px; }
.hero-camera-disclosure .hero-view-controls:not([hidden]) { margin:0 0 12px; }
html:not([data-hero-3d="ready"]) .signal-scene-note { display:none; }
.hero-explore[data-focus="security"] .hero-journey-track i { background:#697cca; }
.hero-explore[data-focus="robotics"] .hero-journey-track i { background:#b77a3d; }
.hero-explore[data-focus="automation"] .hero-journey-track i { background:#448db9; }
@media (hover:hover) and (pointer:fine) {
  .signal-presets button:hover:not([aria-pressed="true"]),.signal-scan-row button:hover:not(:disabled):not([aria-pressed="true"]) { border-color:#c8fff0; background:#28525c; }
}
@media (prefers-reduced-motion:no-preference) {
  @supports (animation-timeline:view()) {
    html:not([data-motion="off"]) .signal-plot-panel { animation:signal-enter linear both; animation-timeline:view(); animation-range:entry 0% entry 45%; }
    html:not([data-motion="off"]) .signal-controls { animation:signal-enter linear both; animation-timeline:view(); animation-range:entry 0% entry 45%; }
  }
}
@keyframes signal-enter { from { opacity:.65; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
.signal-slider strong,.signal-inspector strong { min-width:0; overflow-wrap:anywhere; }
@media (forced-colors:active) {
  .signal-grid path { stroke:CanvasText; opacity:.4; }
  .signal-original { stroke:CanvasText; opacity:1; }
  .signal-alternative,.signal-cursor-line { stroke:Highlight; opacity:1; }
  .signal-sampled { stroke:LinkText; opacity:1; }
  .signal-dots circle { fill:Highlight; stroke:Canvas; }
  .signal-presets button,.signal-scan-row button { border:1px solid ButtonText; }
  .signal-presets button[aria-pressed="true"] { outline:3px solid Highlight; outline-offset:-4px; }
}
.signal-preset-note { margin:-14px 0 18px; color:#aecbc7; font-size:.76rem; line-height:1.5; }
#signal-lab { scroll-margin-top:90px; }
.hero-journey-actions button,.signal-presets button,.signal-scan-row button { touch-action:manipulation; }
@media (max-width:360px) { .signal-plot-panel,.signal-controls { padding:15px; }.signal-heading h2 { font-size:2.15rem; }.hero-journey-actions { gap:4px; } }

/* The frequency-domain studio extends the sampling instrument without another GPU canvas. */
.spectral-lab { margin-top:26px; border:1px solid #83b7bd55; border-radius:20px; background:#102b3a; overflow:hidden; }
.spectral-summary { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:112px; padding:clamp(20px,3vw,32px); cursor:pointer; list-style:none; background:linear-gradient(110deg,#183e4b,#172b47); }
.spectral-summary::-webkit-details-marker { display:none; }.spectral-summary > span { display:grid; gap:6px; }
.spectral-summary small { color:#9be3d7; font:600 .68rem/1.4 monospace; letter-spacing:.12em; }
.spectral-summary strong { color:#f0faf7; font-size:clamp(1.25rem,2vw,1.8rem); letter-spacing:-.035em; line-height:1.2; }
.spectral-summary span span { color:#bdd2d1; font-size:.84rem; line-height:1.45; }
.spectral-summary b { display:grid; place-items:center; width:44px; height:44px; flex:0 0 44px; border:1px solid #9bcac6; border-radius:50%; color:#c5f6e9; font-size:1.2rem; font-weight:400; }
.spectral-lab[open] .spectral-summary b { transform:rotate(135deg); }
.spectral-summary:focus-visible,.spectral-lab button:focus-visible,.spectral-lab input:focus-visible,.spectral-lab select:focus-visible,.spectral-lab a:focus-visible { outline:3px solid white; outline-offset:-3px; }
.spectral-body { padding:clamp(18px,3vw,34px); }.spectral-body[hidden],.spectral-fallback[hidden] { display:none; }
.spectral-fallback { padding:20px 30px; color:#c4d9d7; font-size:.86rem; }
.spectral-intro { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:28px; }
.spectral-intro h3 { max-width:24ch; margin:9px 0 10px; color:#f0faf7; font-size:clamp(1.65rem,3.2vw,2.7rem); letter-spacing:-.045em; line-height:1.08; }
.spectral-intro p:not(.signal-eyebrow) { max-width:55ch; color:#c2d6d3; font-size:.9rem; line-height:1.55; }
.spectral-intro > a { display:inline-flex; align-items:center; min-height:44px; color:#acf1e2; text-decoration:underline; text-underline-offset:4px; font-size:.82rem; }
.spectral-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.75fr); gap:16px; }
.spectral-visual,.spectral-controls { min-width:0; border:1px solid #8ac5c133; border-radius:14px; background:#0b2230; padding:clamp(16px,2vw,24px); }
.spectral-header,.spectral-waterfall-label { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; color:#a9cecb; font:600 .65rem/1.4 monospace; letter-spacing:.08em; }
.spectral-header span:last-child { color:#91d9cd; text-align:right; }
.spectral-plot { display:block; width:100%; height:auto; margin-top:10px; overflow:visible; }
.spectral-curve { fill:none; stroke:#91ead9; stroke-width:2.4; stroke-linejoin:round; }
.spectral-guide { fill:none; stroke:#e4bf8a; stroke-width:1.2; stroke-dasharray:4 5; }.spectral-dot { fill:#f0c98e; stroke:#fff3dd; stroke-width:2; }
.spectral-axis { display:flex; justify-content:space-between; margin:-3px 4.5% 12px; color:#b9d0ce; font:500 .7rem/1.3 monospace; }
.spectral-cursor { display:block; margin:12px 0 20px; color:#c9dfdc; font-size:.78rem; }
.spectral-cursor > span { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:7px; }.spectral-cursor strong { font-weight:500; }.spectral-cursor output { color:#f3d39e; font:600 .76rem/1.4 monospace; }
.spectral-cursor input { width:100%; min-height:44px; accent-color:#e9c486; }
.spectral-waterfall { display:block; width:100%; height:120px; margin-top:9px; border:1px solid #6e9c9a66; border-radius:8px; image-rendering:pixelated; background:#091d2a; }
.spectral-waterfall-ends { display:flex; justify-content:space-between; gap:8px; color:#aac4c1; margin-top:6px; font:500 .68rem monospace; }
.spectral-visual-note,.spectral-note { color:#a9c7c3; font-size:.78rem; line-height:1.55; margin:15px 0 0; }
.spectral-modes { display:flex; flex-wrap:wrap; gap:6px; }.spectral-modes button { min-height:44px; padding:8px 12px; border:1px solid #668c8c; border-radius:100px; color:#d7ece8; background:transparent; font:inherit; font-size:.8rem; cursor:pointer; }.spectral-modes button[aria-pressed="true"] { color:#10332e; background:#a2eddd; border-color:#a2eddd; }
.spectral-lab:not([data-spectrum-mode="dual"]) .spectral-separation { display:none; }
.spectral-selects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0; }
.spectral-selects label { display:grid; gap:6px; color:#c4d9d7; font-size:.8rem; }.spectral-selects select { width:100%; min-height:44px; padding:7px 10px; border:1px solid #698f8e; border-radius:8px; color:#eefbf7; background:#173b47; font:inherit; }
.spectral-results { margin-top:18px; padding:15px; border:1px solid #80beb244; border-radius:10px; background:#173844; }
.spectral-result-header { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }.spectral-result-header span { color:#a6c9c4; font:600 .65rem/1.4 monospace; letter-spacing:.1em; }.spectral-result-header strong { color:#a7f0dd; font-size:.77rem; }
.spectral-results dl { display:grid; gap:8px; margin:14px 0 0; }.spectral-results dl div { display:flex; justify-content:space-between; gap:10px; font-size:.78rem; }.spectral-results dt { color:#b0cdca; }.spectral-results dd { margin:0; color:#effbf7; font:600 .78rem monospace; }
.spectral-note { border-top:1px solid #8ac5c133; padding-top:16px; }
#spectral-lab { scroll-margin-top:90px; }
@media (max-width:760px) { .spectral-intro { display:block; }.spectral-intro > a { margin-top:9px; }.spectral-grid { grid-template-columns:minmax(0,1fr); }.spectral-modes button { flex:1 1 auto; }.spectral-waterfall { height:105px; }.spectral-summary { align-items:flex-start; }.spectral-summary b { width:40px; height:40px; flex-basis:40px; } }
@media (prefers-reduced-motion:no-preference) { html:not([data-motion="off"]) .spectral-summary b { transition:transform .35s; } html:not([data-motion="off"]) .spectral-modes button { transition:background .2s,color .2s,border-color .2s; } }
@media (forced-colors:active) { .spectral-curve,.spectral-guide { stroke:Highlight; }.spectral-dot { fill:Highlight; }.spectral-modes button { border:1px solid ButtonText; }.spectral-modes button[aria-pressed="true"] { outline:3px solid Highlight; outline-offset:-4px; } }
@media print { .spectral-lab { display:none; } }
html:not([data-hero-3d="ready"]) .spectrum-scene-note,html:not([data-spectrum-ready="true"]) .spectrum-scene-note { display:none; }
.spectral-bin-presets { display:flex; flex-wrap:wrap; gap:6px; margin-top:-8px; }
.spectral-bin-presets button { min-height:40px; padding:7px 10px; border:1px solid #638a89; border-radius:7px; color:#c8ebe3; background:#163944; font:inherit; font-size:.75rem; cursor:pointer; }
.spectral-preset-note { margin:7px 0 12px; color:#a9c5c1; font-size:.75rem; line-height:1.4; }
.signal-spectrum-link { display:inline-flex; align-items:center; min-height:44px; margin-top:16px; color:#b9f4e6; font-size:.86rem; font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.signal-spectrum-link:focus-visible { outline:3px solid white; outline-offset:3px; }
.signal-spectrum-note { margin:0; color:#abc7c4; font-size:.77rem; line-height:1.5; }
.spectral-compare-curve { fill:none; stroke:#c1a9f0; stroke-width:2; stroke-dasharray:5 5; opacity:.9; }.spectral-compare-curve[hidden],.spectral-legend span[hidden] { display:none; }
.spectral-legend { display:flex; flex-wrap:wrap; gap:8px 16px; color:#bad3cf; font-size:.72rem; margin-top:0; }.spectral-legend span { display:inline-flex; align-items:center; gap:6px; }.spectral-legend i { width:15px; height:2px; background:#91ead9; }.spectral-legend span:nth-child(2) i { background:#c1a9f0; }
.spectral-compare-toggle { display:flex; align-items:center; gap:8px; min-height:44px; color:#cbe1dd; font-size:.8rem; cursor:pointer; }.spectral-compare-toggle input { width:19px; height:19px; accent-color:#9ee6d7; }
.spectral-plot { touch-action:pan-y; cursor:crosshair; }
.spectral-waterfall-wrap { position:relative; margin-top:9px; }.spectral-waterfall-wrap .spectral-waterfall { margin:0; touch-action:pan-y; cursor:crosshair; }
.spectral-waterfall[hidden],.spectral-frame-marker[hidden],.spectral-visual-note[hidden] { display:none; }
.spectral-frame-marker { position:absolute; left:0; right:0; height:2px; background:#fff0cf; box-shadow:0 0 5px #fff; transform:translateY(-50%); pointer-events:none; }
.spectral-frame-control { display:block; margin-top:14px; color:#c9dfdc; font-size:.78rem; }.spectral-frame-control > span { display:flex; flex-wrap:wrap; justify-content:space-between; gap:7px; }.spectral-frame-control strong { font-weight:500; }.spectral-frame-control output { color:#f3d39e; font:600 .76rem/1.4 monospace; }.spectral-frame-control input { width:100%; min-height:44px; accent-color:#e9c486; }
.spectral-plot-wrap { position:relative; }.spectral-fill { fill:url(#spectral-fill-gradient); stroke:none; pointer-events:none; }
.spectral-scale { position:absolute; z-index:1; inset:15% auto 13% 0; display:flex; flex-direction:column; justify-content:space-between; color:#b7cfcb; font:500 .64rem/1 monospace; pointer-events:none; }
@media (forced-colors:active) { .spectral-fill { fill:none; } }
.spectral-dual-note { color:#a9c5c1; font-size:.76rem; line-height:1.5; margin:-5px 0 12px; }
.spectral-lab:not([data-spectrum-mode="dual"]) .spectral-dual-note { display:none; }
.spectral-waterfall-row { display:grid; grid-template-columns:auto minmax(0,1fr); gap:9px; align-items:stretch; margin-top:9px; }
.spectral-waterfall-row .spectral-waterfall-wrap { margin:0; }
.spectral-waterfall-row .spectral-waterfall-ends { display:flex; flex-direction:column; justify-content:space-between; gap:8px; margin:0; padding:3px 0; color:#b5cfca; font:500 .66rem/1.25 monospace; max-width:4.5rem; }
.spectral-comparison-value:not([hidden]) { color:#cdbef0; font-size:.75rem; line-height:1.4; margin:-10px 0 15px; }.spectral-comparison-value strong { font:600 .76rem monospace; }
.spectral-lab[data-spectrum-busy="true"] .spectral-plot-wrap,.spectral-lab[data-spectrum-busy="true"] .spectral-waterfall-row { opacity:.55; }
.spectral-cursor input:disabled,.spectral-frame-control input:disabled { opacity:.5; }
@media (prefers-reduced-motion:no-preference) { html:not([data-motion="off"]) .spectral-plot-wrap,html:not([data-motion="off"]) .spectral-waterfall-row { transition:opacity .2s; } }
.spectral-play-row { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin:0 0 12px; }.spectral-play-row button { min-height:44px; padding:8px 12px; border:1px solid #9bc7bd; border-radius:8px; background:#1c4651; color:#d7f7ef; font:inherit; font-size:.8rem; cursor:pointer; }.spectral-play-row button[aria-pressed="true"] { background:#a2eddd; color:#10332e; }.spectral-play-row button:disabled { opacity:.5; cursor:not-allowed; }.spectral-play-row span:not([hidden]) { color:#c1d3d0; font-size:.76rem; line-height:1.4; }.spectral-lab:not([data-spectrum-mode="sweep"]) .spectral-play-row { display:none; }
.spectral-download:not([hidden]) { width:100%; min-height:44px; margin:8px 0 0; padding:9px 12px; border:1px solid #6d9c96; border-radius:8px; background:#193d47; color:#d9f6ef; font:inherit; font-size:.78rem; cursor:pointer; }.spectral-download:disabled { opacity:.48; cursor:not-allowed; }
.spectral-scale-note { margin:7px 0 0; color:#a9c5c1; font-size:.72rem; line-height:1.4; }
.spectral-legend b { color:#e5f5f1; font-weight:600; }
.spectral-dual-presets { display:flex; flex-wrap:wrap; gap:6px; margin:-8px 0 12px; }.spectral-dual-presets button { min-height:40px; padding:7px 10px; border:1px solid #638a89; border-radius:7px; color:#c8ebe3; background:#163944; font:inherit; font-size:.75rem; cursor:pointer; }.spectral-lab:not([data-spectrum-mode="dual"]) .spectral-dual-presets { display:none; }
.spectral-mode-description { color:#a9c5c1; font-size:.78rem; line-height:1.5; margin:10px 0 0; }
@media (hover:hover) and (pointer:fine) {
  .spectral-bin-presets button:hover,.spectral-dual-presets button:hover,.spectral-download:hover:not(:disabled) { border-color:#baf4e6; background:#28525c; }
}
.spectral-bin-presets button,.spectral-dual-presets button,.spectral-modes button,.spectral-play-row button,.spectral-download { touch-action:manipulation; }
@media (max-width:360px) {
  .spectral-body { padding:14px; }.spectral-visual,.spectral-controls { padding:14px; }
  .spectral-results dl div { flex-wrap:wrap; }.spectral-header { font-size:.61rem; }
  .spectral-intro h3 { font-size:1.7rem; }.spectral-cursor output,.spectral-frame-control output { overflow-wrap:anywhere; }
}

/* Field lenses: an optional control surface for the existing engineering world. */
.hero-stage-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 44px; padding: .55rem .8rem; border: 1px solid #b6ccc9; border-radius: 9px;
  background: #f6fbf9; color: #214c4b; font-family: inherit; font-size: .76rem; font-weight: 650; line-height: 1.2; cursor: pointer;
}
.hero-stage-toggle[hidden], .hero-field-panel[hidden] { display: none; }
.hero-stage-toggle span:last-child { color: #198173; font-size: 1rem; }
.hero-stage-toggle[aria-pressed="true"] { background: #183e43; border-color: #183e43; color: #fff; }
.engineering-hero[data-stage-expanded] .hero-orbit { height: clamp(460px, 62vw, 720px); }
.hero-field-panel {
  margin-top: 14px; padding: 19px; border: 1px solid #c6dcd8; border-radius: 14px;
  color: #e6f5f2; background: radial-gradient(ellipse at 100% 0, #255a5b 0, transparent 55%), #102e36;
  box-shadow: 0 16px 36px -30px #072b34;
}
.hero-field-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hero-field-kicker { margin: 0 0 6px; color: #87c7bc; font: 600 .63rem/1.4 monospace; letter-spacing: .11em; }
.hero-field-heading h3 { margin: 0; color: #fff; font-size: 1.08rem; line-height: 1.25; letter-spacing: -.025em; }
.hero-field-badge { flex: none; padding: 5px 7px; border: 1px solid #83d1be4d; border-radius: 5px; color: #a6dfd1; font: .58rem/1 monospace; letter-spacing: .06em; }
.hero-field-intro { margin: 9px 0 14px; color: #b9d6d1; font-size: .78rem; line-height: 1.5; }
.hero-field-lenses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hero-field-lenses button {
  min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px 5px; border: 1px solid #9ac6be50; border-radius: 8px; color: #d8ece7;
  background: #ffffff09; font-family: inherit; font-size: .75rem; font-weight: 650; cursor: pointer;
}
.hero-field-lenses button span:first-child { color: #88d8c8; font-size: 1rem; }
.hero-field-lenses button[aria-pressed="true"] { background: #d8f4e9; border-color: #d8f4e9; color: #163b3c; }
.hero-field-lenses button[aria-pressed="true"] span:first-child { color: #176d63; }
.hero-field-description { min-height: 3.8em; display: flex; align-items: center; }
.hero-field-description p { margin: 9px 0; color: #c5ddd8; font-size: .73rem; line-height: 1.45; }
.hero-field-intensity { display: grid; gap: 7px; color: #e0f0ec; font-size: .75rem; }
.hero-field-intensity > span { display: flex; justify-content: space-between; gap: 10px; }
.hero-field-intensity output { color: #a2d8c8; font-variant-numeric: tabular-nums; }
.hero-field-intensity input { width: 100%; min-height: 32px; margin: 0; accent-color: #8cdecb; cursor: pointer; }
.hero-field-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 3px; color: #c3f4e6; font-size: .76rem; font-weight: 650; text-decoration: underline; text-underline-offset: 4px; }
.hero-field-panel button:focus-visible, .hero-field-panel input:focus-visible, .hero-field-link:focus-visible, .hero-stage-toggle:focus-visible { outline: 3px solid #f3c77e; outline-offset: 3px; }
.hero-orbit canvas { touch-action: pan-y pinch-zoom; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .hero-field-lenses button, html:not([data-motion="off"]) .hero-stage-toggle { transition: background .2s, color .2s, border-color .2s; }
  html:not([data-motion="off"]) .hero-orbit { transition: height .45s cubic-bezier(.2,.8,.2,1); }
}
@media (min-width: 761px) {
  .engineering-hero[data-stage-expanded] { grid-column: 1 / -1; }
  .engineering-hero[data-stage-expanded] figcaption { max-width: 900px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .engineering-hero[data-stage-expanded] .hero-orbit { height: clamp(430px, 115vw, 65vh); }
  .hero-field-panel { padding: 16px; }
  .hero-field-lenses button { min-height: 50px; }
  .hero-field-description { min-height: 4.5em; }
}
@media (forced-colors: active) {
  .hero-field-panel, .hero-field-lenses button, .hero-stage-toggle { border: 1px solid ButtonText; }
  .hero-field-lenses button[aria-pressed="true"], .hero-stage-toggle[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: -4px; }
}
.hero-field-sector-panel { padding: 2px 0 12px; }
.hero-field-sector-panel[hidden] { display: none; }
.hero-field-sector-panel > p { margin: 0 0 9px; color: #c5ddd8; font-size: .72rem; line-height: 1.45; }
.hero-field-sectors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.hero-field-sectors button {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0; min-height: 52px; padding: 7px 4px;
  border: 1px solid #9ac6be50; border-radius: 6px; background: #081f29; color: #e4f4ef;
  font: inherit; text-align: center; cursor: pointer;
}
.hero-field-sectors button span, .hero-field-sectors button strong { display: block; position: relative; z-index: 1; }
.hero-field-sectors button span { font-size: .61rem; white-space: nowrap; }
.hero-field-sectors button strong { margin-top: 3px; font-size: .72rem; font-variant-numeric: tabular-nums; }
.hero-field-sectors button i { position: absolute; z-index: 0; inset: auto 0 0; height: var(--band-level, 0%); background: #407d7980; pointer-events: none; }
.hero-field-sectors button[aria-pressed="true"] { border-color: #b4f5e2; box-shadow: inset 0 0 0 1px #b4f5e2; }
.hero-field-sectors button[aria-pressed="true"] i { background: #68b6a899; }
@media (max-width: 360px) { .hero-field-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hero-field-readout:not([hidden]) {
  position: absolute; z-index: 3; top: 64px; right: 24px; display: grid;
  grid-template-columns: 22px auto; align-items: center; gap: 2px 8px; max-width: min(44%, 180px);
  padding: 9px 11px; border: 1px solid #9cddce38; border-radius: 8px;
  background: #0b2334d9; color: #e3f5f0; pointer-events: none;
}
.hero-field-readout > span:nth-child(2) { min-width: 0; }
.hero-field-readout small, .hero-field-readout strong, .hero-field-readout em { display: block; }
.hero-field-readout small { color: #91bdb5; font: 600 .54rem/1.2 monospace; letter-spacing: .09em; }
.hero-field-readout strong { margin-top: 3px; font-family: inherit; font-weight: 600; font-size: .72rem; line-height: 1.2; overflow-wrap: anywhere; }
.hero-field-readout em { grid-column: 2; color: #a8c7c3; font-family: inherit; font-style: normal; font-size: .6rem; line-height: 1.2; }
.hero-field-readout-icon { position: relative; grid-row: 1 / 3; width: 22px; height: 22px; border: 1px solid #77cfc1a3; border-radius: 50%; }
.hero-field-readout-icon i { position: absolute; inset: 3px; border: 1px solid #86dfd0a3; border-radius: 50%; }
.hero-field-readout-icon i:nth-child(2) { inset: 7px; background: #a7f7df; }
.hero-field-readout-icon i:nth-child(3) { inset: 0; border-color: transparent; border-left-color: #c1fff0; transform: rotate(42deg); }
@media (max-width: 760px) { .hero-field-readout:not([hidden]) { top: 57px; right: 20px; padding: 7px; } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .hero-field-readout-icon i:nth-child(3) { animation: field-compass-spin 7s linear infinite; }
  html[data-hero-active="false"] .hero-field-readout-icon i:nth-child(3) { animation-play-state: paused; }
}
@keyframes field-compass-spin { to { transform: rotate(402deg); } }
/* Quick controls live over the stage so a phone user can see each change. */
.hero-stage { position: relative; min-width: 0; }
.hero-stage-dock:not([hidden]) { position: absolute; z-index: 4; inset: auto 16px 14px; display: grid; justify-items: center; gap: 6px; pointer-events: none; }
.hero-stage-dock button { pointer-events: auto; cursor: pointer; font-family: inherit; }
.hero-stage-lenses { display: flex; gap: 4px; max-width: 100%; padding: 4px; border: 1px solid #a0dfd242; border-radius: 11px; background: #09212eeF; box-shadow: 0 8px 25px #0005; pointer-events: auto; }
.hero-stage-lenses button { min-height: 44px; min-width: 76px; padding: 7px 9px; border: 0; border-radius: 7px; background: transparent; color: #d0e5e1; font-size: .72rem; font-weight: 650; }
.hero-stage-lenses button[aria-pressed="true"] { background: #ddf6ed; color: #173d3d; }
.hero-stage-band:not([hidden]) { display: flex; align-items: center; gap: 7px; padding: 3px; border: 1px solid #a0dfd242; border-radius: 10px; background: #09212eeF; color: #e2f5ef; pointer-events: auto; }
.hero-stage-band button { min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 7px; background: #ffffff12; color: inherit; font-size: 1rem; }
.hero-stage-band span { min-width: 108px; padding-inline: 4px; text-align: center; }
.hero-stage-band small, .hero-stage-band strong { display: block; }
.hero-stage-band small { color: #a0c9c0; font: .55rem/1.2 monospace; letter-spacing: .05em; }
.hero-stage-band strong { margin-top: 3px; font-size: .68rem; font-variant-numeric: tabular-nums; }
.hero-stage-dock button:focus-visible { outline: 3px solid #f5cd8d; outline-offset: 2px; }
html[data-hero-3d="ready"] .hero-stage[data-field-ready] .hero-scene-hint,
html[data-hero-3d="ready"] .hero-stage[data-field-ready] .hero-scene-instruction { opacity: 0; }
@media (max-width: 360px) { .hero-stage-lenses button { min-width: 0; padding-inline: 10px; } }

/* A visual hand-off from the model to the actual portfolio and experiments. */
.world-bridge { --bridge-accent: #1e6b61; background: #e9f1ee; border-block: 1px solid #cadbd5; }
.world-bridge[data-focus="security"] { --bridge-accent: #4c5897; background: #eef0f8; }
.world-bridge[data-focus="robotics"] { --bridge-accent: #87562c; background: #f6f0e8; }
.world-bridge[data-focus="automation"] { --bridge-accent: #286b8b; background: #eaf2f5; }
.world-bridge-inner { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(26px,6vw,90px); padding-block: clamp(34px,5vw,68px); }
.world-bridge-index, .world-bridge-content > div:not(.world-bridge-rail) > span { color: var(--bridge-accent); font: 700 .66rem/1.4 monospace; letter-spacing: .1em; }
.world-bridge-heading h2 { margin: 10px 0 8px; color: #18343a; font-size: clamp(1.7rem,3vw,2.75rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.1; }
.world-bridge-heading p { max-width: 37ch; margin: 0; color: #516966; font-size: .85rem; line-height: 1.55; }
.world-bridge-content { min-width: 0; }
.world-bridge-content > div[hidden] { display: none; }
.world-bridge-content h3 { margin: 8px 0; color: #17383b; font-size: clamp(1.2rem,2vw,1.65rem); font-weight: 550; letter-spacing: -.03em; }
.world-bridge-content p { max-width: 60ch; margin: 0; color: #455e5e; font-size: .87rem; line-height: 1.55; }
.world-bridge-content > div:not(.world-bridge-rail) > div { display: flex; flex-wrap: wrap; gap: 2px 20px; margin-top: 8px; }
.world-bridge-content a { display: inline-flex; min-height: 44px; align-items: center; color: #1b605f; font-size: .82rem; font-weight: 650; text-decoration: underline; text-underline-offset: 4px; }
.world-bridge-content a:focus-visible { outline: 3px solid #2b6fba; outline-offset: 3px; }
.world-bridge-rail { position: relative; display: flex; justify-content: space-between; margin: 9px 0 22px; }
.world-bridge-rail::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--bridge-accent); opacity: .55; transform-origin: left; }
.world-bridge-rail i { position: relative; width: 9px; height: 9px; border: 2px solid var(--bridge-accent); border-radius: 50%; background: #e9f1ee; }
.world-bridge[data-focus="hardware"] .world-bridge-rail i:nth-child(1), .world-bridge[data-focus="security"] .world-bridge-rail i:nth-child(2), .world-bridge[data-focus="robotics"] .world-bridge-rail i:nth-child(3), .world-bridge[data-focus="automation"] .world-bridge-rail i:nth-child(4) { background: var(--bridge-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bridge-accent) 17%, transparent); }
@media (max-width: 760px) { .world-bridge-inner { grid-template-columns: 1fr; gap: 22px; }.world-bridge-rail { margin-top: 2px; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="off"]) .world-bridge-rail::before { animation: world-bridge-draw linear both; animation-timeline: view(); animation-range: entry 5% entry 80%; }
  }
}
@keyframes world-bridge-draw { from { transform: scaleX(.08); } to { transform: scaleX(1); } }
.hero-field-anchor:not([hidden]) { position: absolute; z-index: 3; top: 0; left: 0; pointer-events: none; color: #edfff8; will-change: transform; }
.hero-field-anchor span { display: block; padding: 6px 8px; border: 1px solid #a9f5dd99; border-radius: 5px; background: #102e39ee; box-shadow: 0 5px 18px #0014; white-space: nowrap; font: 600 .66rem/1.2 monospace; }
.hero-field-anchor i { display: block; width: 6px; height: 6px; margin: 5px auto 0; border-radius: 50%; background: #d5fff0; box-shadow: 0 0 10px #a2ffda; }
.hero-stage-open:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 5px 13px; border: 1px solid #a0dfd269; border-radius: 9px; background: #09212eef; color: #dbfff1; font-size: .73rem; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; pointer-events: auto; }
.hero-stage-open:focus-visible { outline: 3px solid #f5cd8d; outline-offset: 2px; }
.hero-field-about { border-top: 1px solid #a6d9ce38; }
.hero-field-about summary { min-height: 44px; display: flex; align-items: center; gap: 8px; color: #d4eee7; font-size: .75rem; font-weight: 650; cursor: pointer; list-style: none; }
.hero-field-about summary::-webkit-details-marker { display: none; }
.hero-field-about summary::before { content: '+'; display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid #a8dcd366; border-radius: 50%; font-size: .8rem; }
.hero-field-about[open] summary::before { content: '−'; }
.hero-field-about p { margin: 0 0 11px; color: #c5ddd8; font-size: .74rem; line-height: 1.55; }
.hero-field-about summary:focus-visible { outline: 3px solid #f3c77e; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .world-bridge { transition: background-color .45s; }
  html:not([data-motion="off"]) .world-bridge-content > [data-bridge-detail]:not([hidden]) { animation: world-bridge-arrive .35s ease-out both; }
}
@keyframes world-bridge-arrive { from { opacity: .65; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.hero-stage-still { display: none; }
html[data-hero-3d="ready"][data-hero-active="false"] .hero-stage-still { position: absolute; z-index: 3; left: 24px; top: 64px; display: block; max-width: 48%; margin: 0; padding: 6px 8px; border: 1px solid #9cddce38; border-radius: 6px; background: #0b2334e8; color: #d7eee8; font-size: .65rem; line-height: 1.3; pointer-events: none; }
@media (max-width: 760px) { html[data-hero-3d="ready"][data-hero-active="false"] .hero-stage-still { left: 20px; top: 57px; } }
.hero-field-reset { min-height: 44px; padding: 4px 12px; margin: 3px 8px 3px 0; border: 1px solid #9ac6be66; border-radius: 7px; background: transparent; color: #e4f7f1; font-family: inherit; font-size: .74rem; font-weight: 650; cursor: pointer; }
.hero-fallback-note:not([hidden]) { margin: 12px 0 0; padding: 11px 13px; border-left: 3px solid #4c8e84; border-radius: 3px 8px 8px 3px; background: #eaf3ef; color: #31534e; font-size: .78rem; line-height: 1.5; }
.hero-stage-lenses .hero-stage-camera-toggle { min-width: 44px; border-left: 1px solid #a0dfd242; border-radius: 0 7px 7px 0; font-size: 1rem; }
.hero-stage-lenses .hero-stage-camera-toggle[aria-expanded="true"] { background: #d8f4e9; color: #173d3d; }
.hero-stage-camera:not([hidden]) { display: flex; align-items: center; gap: 5px; padding: 3px; border: 1px solid #a0dfd242; border-radius: 10px; background: #09212eef; color: #e2f5ef; pointer-events: auto; }
.hero-stage-camera button { min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 7px; background: #ffffff12; color: inherit; font-size: 1rem; }
.hero-stage-camera span { min-width: 44px; color: #a0c9c0; text-align: center; font: .58rem/1.2 monospace; }
@media (max-width: 380px) { .hero-stage-lenses button { min-width: 0; padding-inline: 8px; }.hero-stage-lenses .hero-stage-camera-toggle { min-width: 44px; } }
.hero-stage-lenses { width: min(100%, 390px); }
.hero-stage-lenses button[data-stage-lens] { flex: 1 1 0; min-width: 0; white-space: nowrap; }
.hero-stage-lenses .hero-stage-camera-toggle { flex: 0 0 44px; }
.hero-stage-camera:not([hidden]) { flex-wrap: wrap; justify-content: center; max-width: min(100%, 285px); }
.hero-stage-strength { display: flex; flex: 1 0 100%; align-items: center; gap: 7px; padding: 2px 6px 5px; color: #d6eee7; }
.hero-stage-strength span { min-width: 0; flex: none; font-family: inherit; font-weight: 600; font-size: .6rem; line-height: 1.2; }
.hero-stage-strength input { flex: 1 1 40px; min-width: 40px; min-height: 34px; margin: 0; accent-color: #9ae9d3; }
.hero-stage-strength output { min-width: 2.5em; font-size: .65rem; font-variant-numeric: tabular-nums; text-align: right; }
.hero-stage-strength input:focus-visible { outline: 3px solid #f5cd8d; outline-offset: 2px; }
@media (forced-colors: active) {
  .hero-stage-lenses, .hero-stage-camera, .hero-stage-band, .hero-field-panel, .world-bridge { border: 1px solid CanvasText; }
  .hero-stage-lenses button, .hero-stage-camera button, .hero-stage-band button, .hero-field-sectors button { border: 1px solid ButtonText; }
  .hero-stage-lenses button[aria-pressed="true"], .hero-stage-lenses button[aria-expanded="true"], .hero-field-sectors button[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: -4px; }
  .world-bridge-rail::before { background: CanvasText; }
}
@media print { .hero-stage-dock, .hero-field-panel, .hero-stage-still, .hero-stage-toggle, .world-bridge { display: none !important; } }

/* Portfolio wayfinding: persistent HTML links, including without JavaScript. */
.explore-region { background: #f7f8f5; border-block: 1px solid #dbe7e1; }
.explore-index { padding-block: clamp(52px, 6vw, 90px); scroll-margin-top: 105px; }
.explore-index-heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr); align-items: end; gap: 20px clamp(24px, 6vw, 85px); margin-bottom: 26px; }
.explore-index-kicker { margin-bottom: 10px; color: #34746b; font: 700 .68rem/1.4 monospace; letter-spacing: .12em; }
.explore-index h2 { max-width: 17ch; font-size: clamp(2rem, 3.5vw + 1rem, 3.6rem); color: #142d35; }
.explore-index-heading > p { max-width: 44ch; color: #536a69; font-size: .95rem; line-height: 1.6; }
.explore-index-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.explore-card { --card-accent: #28766e; min-width: 0; min-height: 235px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 19px; border: 1px solid #c6ddd7; border-radius: 16px; background: linear-gradient(155deg, #fff, #ecf5f1); color: #14343b; }
.explore-card-security { --card-accent: #515f9e; background: linear-gradient(155deg,#fff,#edf0fc); border-color: #d4d9ee; }
.explore-card-spectrum { --card-accent: #68559a; background: linear-gradient(155deg,#fff,#f1ecfa); border-color: #e0d6ef; }
.explore-card-cnn { --card-accent: #91613b; background: linear-gradient(155deg,#fff,#faf1e9); border-color: #ecdac9; }
.explore-card-top { align-self: stretch; display: flex; justify-content: space-between; gap: 8px; color: var(--card-accent); font: 700 .67rem/1.3 monospace; letter-spacing: .05em; }
.explore-card-top span:last-child { font: 500 1.25rem/1 sans-serif; }
.explore-card strong { margin-top: 12px; color: #19353c; font-size: 1.17rem; line-height: 1.2; letter-spacing: -.025em; }
.explore-card > span:nth-of-type(2) { color: #4c6263; font-size: .82rem; line-height: 1.5; }
.explore-card-action { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; color: #1a5d59; font-size: .8rem; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.explore-index-note { max-width: 75ch; margin-top: 16px; color: #596d6a; font-size: .78rem; line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .explore-card { transition: transform .25s, box-shadow .25s, border-color .25s; }
  html:not([data-motion="off"]) .explore-card:hover { transform: translateY(-4px); border-color: var(--card-accent); box-shadow: 0 15px 32px -22px #193d43aa; }
}
@media (max-width: 1000px) { .explore-index-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 760px) {
  .engineering-hero { order: 8; }
  .hero-demo { order: 9; }
  .convolution-invite { order: 10; }
  .career-strip { order: 11; }
  .explore-index-heading { grid-template-columns: 1fr; gap: 12px; }
  .explore-card { min-height: 205px; padding: 16px; }
}
@media (max-width: 420px) { .explore-index-grid { grid-template-columns: 1fr; gap: 9px; } .explore-card { min-height: 0; gap: 7px; } .explore-card strong { margin-top: 3px; } .explore-card-action { min-height: 40px; } }
@media (forced-colors: active) { .explore-card { border: 1px solid LinkText; } }
/* Keep advanced scene controls available without making them dominate the page. */
.hero-field-summary { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center; min-height: 48px; color: #f1fffb; cursor: pointer; list-style: none; }
.hero-field-summary::-webkit-details-marker { display: none; }
.hero-field-summary span:first-child { font-size: .91rem; font-weight: 700; }
.hero-field-summary span:nth-child(2) { grid-column: 1; color: #b8d7ce; font-size: .72rem; line-height: 1.35; }
.hero-field-summary::after { content: '+'; grid-column: 2; grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #a8dcd366; border-radius: 50%; color: #d7fff3; font-size: 1.1rem; }
.hero-field-panel[open] > .hero-field-summary { padding-bottom: 15px; margin-bottom: 17px; border-bottom: 1px solid #a6d9ce38; }
.hero-field-panel[open] > .hero-field-summary::after { content: '−'; }
.hero-field-summary:focus-visible { outline: 3px solid #f3c77e; outline-offset: 4px; }
@media screen {
  .hero { column-gap: clamp(28px, 4.5vw, 76px); }
  .hero h1 { max-width: 13ch; font-size: clamp(2.6rem, 3.4vw + 1rem, 4.7rem); line-height: 1.03; letter-spacing: -.055em; overflow-wrap: normal; }
  .hero-role { max-width: 36ch; color: #21444b; }
  .hero-intro { max-width: 42ch; color: #425d63; }
  .hero-identity .portrait-panel { box-shadow: 0 0 0 3px #d7ebe6, 0 9px 22px -10px #27595188; }
  .hero-orbit { border-radius: 18px; background: radial-gradient(ellipse at 50% 32%, #254c54, #102633 52%, #071621 100%); }
  .hero-visual-header { padding: 2px 0; }
  .hero-focus-detail { max-width: 70ch; }
  .hero-focus-detail .hero-detail-note { max-width: 68ch; }
  .hero-detail-links a { min-height: 44px; }
}
@media screen and (max-width: 760px) {
  .hero h1, :lang(de) .hero h1 { max-width: 100%; font-size: clamp(2.2rem, 1.25rem + 5vw, 3.7rem); overflow-wrap: normal; hyphens: none; }
  .hero-role { max-width: 34ch; line-height: 1.45; }
  .hero-orbit { height: clamp(330px, 95vw, 460px); }
  .hero-visual-header p { font-size: .83rem; line-height: 1.55; }
  .hero-focus-buttons button { min-height: 54px; }
  .hero-field-summary span:nth-child(2) { font-size: .76rem; }
}
@media (max-width: 360px) { .hero h1, :lang(de) .hero h1 { font-size: 2.1rem; } }
.mobile-rail { display: none; }
@media screen and (max-width: 760px) {
  .header-inner { min-height: 62px; }
  .mobile-rail { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 4px; padding-bottom: 3px; }
  .mobile-rail a { flex: 1 1 auto; display: inline-flex; min-height: 44px; justify-content: center; align-items: center; padding: 6px 2px; border-bottom: 2px solid transparent; color: #34555b; font-size: .72rem; font-weight: 650; line-height: 1.25; text-align: center; }
  .mobile-rail a[aria-current="location"] { border-color: #216d65; color: #104f49; }
  :root { scroll-padding-top: 138px; }
  :is(#experiments,#signal-lab,#spectral-lab,#work,#experience,#skills,#convolution-lab,#contact) { scroll-margin-top: 0; }
}
@media (max-width: 360px) { .mobile-rail { gap: 0 2px; } .mobile-rail a { font-size: .68rem; } }
@media print { .mobile-rail { display: none; } }

/* Project shortcuts and connected next actions use the same visual grammar. */
.work-shortcuts { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 18px; margin: 0 0 20px; padding: 9px 0 12px; border-block: 1px solid #d8e4df; }
.work-shortcuts > span, .lab-next > span { color: #476f69; font: 700 .67rem/1.4 monospace; letter-spacing: .08em; }
.work-shortcuts a, .lab-next a { display: inline-flex; align-items: center; min-height: 44px; font-size: .82rem; font-weight: 650; text-decoration: underline; text-underline-offset: 4px; }
.work-shortcuts a { color: #285d59; }
.lab-next { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 18px; margin-top: 24px; padding-top: 13px; border-top: 1px solid #9fcfc73d; }
.lab-next-dark > span { color: #9bccc1; }
.lab-next-dark a { color: #c6f4e7; }
.lab-next-light { border-color: #d6e2df; }
.lab-next-light a { color: #165d5a; }
.lab-next a:focus-visible, .work-shortcuts a:focus-visible { outline: 3px solid #3475b6; outline-offset: 3px; }
.lab-next-dark a:focus-visible { outline-color: #fff; }
@media (max-width: 760px) {
  .work-shortcuts { gap: 0 16px; }
  .work-shortcuts > span, .lab-next > span { flex-basis: 100%; }
  .lab-next { align-items: flex-start; gap: 0 16px; }
}

/* Shared component rhythm across projects, firmware and browser instruments. */
@media screen {
  .project-grid { gap: clamp(14px, 2vw, 24px); }
  .project { border-color: #d7e4df; background: #fff; box-shadow: 0 18px 42px -38px #183b3b80; }
  .project-featured { background: linear-gradient(145deg, #fff 68%, #f3f8f6); }
  .project-production { background: linear-gradient(145deg, #f8fbff, #e7effb); border-color: #d0def0; }
  .project-index { color: #53726e; font-variant-numeric: tabular-nums; }
  .project-kind { color: #526c6b; font-weight: 650; line-height: 1.5; }
  .project h3 { color: #14323a; overflow-wrap: break-word; text-wrap: balance; }
  .project .project-summary { color: #40595d; line-height: 1.7; }
  .project-details > summary, .robotics-story > summary { min-height: 48px; color: #1b625b; font-weight: 650; text-decoration: underline; text-underline-offset: 4px; }
  .project-preview { border: 1px solid #d7e5e0; background: #f6f9f7; }
  .project-preview figcaption { color: #506a66; line-height: 1.45; }
  .project-filters { gap: 7px; }
  .project-filters button { min-height: 48px; padding: 8px 15px; border: 1px solid #becfca; border-radius: 9px; background: #f7fbf9; color: #365753; font-weight: 650; }
  .project-filters button[aria-pressed="true"] { border-color: #193f44; color: #fff; background: #193f44; }
  .project-filters button:hover:not([aria-pressed="true"]) { border-color: #2a7770; color: #164f49; background: #ebf5f0; }
  .filter-status { color: #4c6662; }
  .scenario-choice { min-height: 78px; border-color: #cadbd6; background: #f8fbf9; }
  .scenario-choice:has(:checked) { border-color: #216b64; background: #e6f3ed; box-shadow: inset 0 0 0 1px #216b64; }
  .scenario-choice input { accent-color: #216b64; }
  .scenario-choice:focus-within { outline: 3px solid #2b6fba; outline-offset: 3px; }
  .simulation-result h5 { margin: 0; color: #173d40; line-height: 1.25; }
  .simulation-narration { min-width: 0; padding: 16px; border: 1px solid #d5e6df; border-radius: 12px; background: #f4f9f6; }
  .simulation-detail { color: #3e5d5a; }
  .simulation-actions [data-sim-run] { min-height: 50px; border-color: #174943; border-radius: 9px; background: #174943; color: #fff; font-weight: 700; }
  .simulation-ledger li { border-radius: 8px; background: #f2f7f4; }
  .simulation-ledger li[aria-current="step"] { border-color: #2a8274; background: #dff1e8; }
  .signal-plot-panel, .signal-controls, .spectral-visual, .spectral-controls { box-shadow: inset 0 1px #c4fff01a, 0 18px 35px -32px #000; }
  .signal-result, .spectral-results, .conv-calculation { border-color: #8bd8c64a; border-radius: 12px; }
  .signal-result dt, .spectral-results dt { line-height: 1.4; }
  .signal-result dd, .spectral-results dd { line-height: 1.4; overflow-wrap: anywhere; }
  .convolution-input { width: min(100%, 270px); max-width: none; }
  .convolution-pixel { min-width: 0; min-height: 44px; }
  .convolution-viewport, .scene-viewport { box-shadow: inset 0 1px #ccfff01c, 0 14px 30px -28px #030e14; }
  .convolution-kernels button, .signal-presets button, .spectral-modes button { min-height: 48px; }
  .spectral-bin-presets button, .spectral-dual-presets button { min-height: 44px; }
  .convolution-viewport canvas, .spectral-plot, .spectral-waterfall-wrap .spectral-waterfall { touch-action: pan-y pinch-zoom; }
}
@media (max-width: 760px) {
  .project h3 { font-size: clamp(1.7rem, 1.25rem + 2.6vw, 2.7rem); hyphens: auto; }
  .project-filters button { flex: 1 1 auto; }
  .simulation-narration { padding: 14px; }
  .scenario-choices { grid-template-columns: minmax(0,1fr); }
  .scenario-choice { min-height: 70px; }
  .simulation-result { flex-wrap: wrap; }
  /* Keep input, filter and result in the same order visually and for keyboard users. */
  .convolution-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; }
  .convolution-controls, .convolution-result { display: block; }
  .convolution-controls > .conv-label:first-child { margin-top: 0; }
  .signal-slider > span, .spectral-cursor > span, .spectral-frame-control > span { flex-wrap: wrap; }
  .signal-result dl div, .spectral-results dl div { flex-wrap: wrap; }
}
@media (forced-colors: active) {
  .project-filters button[aria-pressed="true"], .scenario-choice:has(:checked) { outline: 3px solid Highlight; outline-offset: -4px; }
}
/* A short, consistent orientation precedes each hands-on experience. */
.lab-steps { counter-reset: lab-step; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 0; margin: 0 0 24px; list-style: none; }
.lab-steps li { counter-increment: lab-step; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 52px; padding: 9px 12px; border: 1px solid #b5d4cc; border-radius: 10px; background: #f1f7f3; color: #254d4a; }
.lab-steps li::before { content: counter(lab-step,decimal-leading-zero); flex: 0 0 auto; color: #39776d; font: 700 .7rem/1.2 monospace; }
.lab-steps strong { font-size: .8rem; line-height: 1.35; font-weight: 650; }
.lab-steps-dark li { border-color: #8ac5c144; background: #12323be0; color: #e1f2ed; }
.lab-steps-dark li::before { color: #9de5d4; }
@media (max-width: 760px) { .lab-steps { grid-template-columns: 1fr; gap: 5px; margin-bottom: 18px; } .lab-steps li { min-height: 44px; padding-block: 7px; } }
@media (forced-colors: active) { .lab-steps li { border: 1px solid CanvasText; } }
.hero-scene-jump { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 9px 3px; color: #205d59; font-size: .87rem; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.hero-scene-jump > span:first-child { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #86bab0; border-radius: 50%; color: #267a6e; font-size: .85rem; text-decoration: none; }
.engineering-hero:focus { outline: none; }
.engineering-hero:focus-visible { outline: 3px solid #3475b6; outline-offset: 6px; }
@media (max-width: 760px) { .hero-actions { gap: 5px 15px; } .hero-scene-jump { flex-basis: 100%; } }
/* The enhanced offset follows the actual header height, including text zoom. */
:root { scroll-padding-top: var(--header-offset, 112px); }
@media (max-width: 760px) { :root { scroll-padding-top: var(--header-offset, 138px); } }

/* One palette and a consistent interaction language across the portfolio. */
:root { --accent: #dcefe8; --accent-ink: #17645d; --ui-ink: #16353b; --ui-muted: #4c6766; --ui-line: #d3e2dc; --ui-soft: #f0f7f3; }
@media screen {
  .header { border-color: #d4e3dd; }
  .desktop-nav { background: #edf5f0; border-color: #d3e2dc; }
  .desktop-nav a:hover { background: #dcefe8; }
  .language-switch { border-color: #cadfd5; }
  .language-switch a[aria-current="page"] { background: #dcefe8; color: #164e48; }
  .site-menu { background: #123e46; }
  .menu-label, .menu-caption, .menu-bottom > p span { color: #c2e3da; }
  .menu-bottom .language-switch a[aria-current="page"] { color: #164e48; background: #fff; }
  .section-heading h2, .about-grid h2, .contact h2 { color: var(--ui-ink); text-wrap: balance; }
  .section-heading p:not(.eyebrow), .about-copy { max-width: 60ch; color: var(--ui-muted); line-height: 1.7; }
  .eyebrow, .project-kind, .skill-number { letter-spacing: .08em; }
  .timeline-item, .company-block, .education-list article { border-color: var(--ui-line); }
  .timeline-item { padding-block: 28px 38px; }
  .timeline-item h3, .earlier-grid h3 { color: var(--ui-ink); }
  .timeline-item li, .earlier-grid p { color: #425d5d; line-height: 1.65; }
  .skill-grid { gap: 12px; }
  .skill-grid article { min-width: 0; border-color: #d3e2dc; border-radius: 15px; background: #f5f9f6; }
  .skill-grid article h3 { color: #183c3f; line-height: 1.25; }
  .skill-grid article p { color: #4b6563; line-height: 1.75; overflow-wrap: break-word; }
  .study-focus { background: linear-gradient(145deg,#e7f3ed,#f3f9f6); border-color: #cbded5; }
  .contact { border-top: 1px solid #d3e2dc; }
  .contact-email { display: inline-flex; align-items: center; min-height: 52px; line-height: 1.35; text-underline-offset: 5px; }
  .contact-links a { display: inline-flex; align-items: center; min-height: 44px; color: #285b58; text-decoration: underline; text-underline-offset: 4px; }
  .footer { border-color: #d3e2dc; }
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .project, html:not([data-motion="off"]) .skill-grid article { transition: border-color .22s, box-shadow .22s; }
  html:not([data-motion="off"]) .project:hover, html:not([data-motion="off"]) .skill-grid article:hover { border-color: #97c7b8; box-shadow: 0 15px 30px -28px #123e39aa; }
}
@media (max-width: 760px) {
  .contact h2 { font-size: clamp(2.5rem, 1.5rem + 5.5vw, 4.2rem); }
  .contact-email { font-size: clamp(1rem, .8rem + 1.2vw, 1.35rem); overflow-wrap: anywhere; }
  .contact-links { gap: 0 18px; }
  .skill-grid article { padding: 20px; }
}
.convolution-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.convolution-presets > span { flex-basis: 100%; color: #a1ccc4; font: 700 .64rem/1.4 monospace; letter-spacing: .08em; }
.convolution-presets button { min-height: 44px; padding: 7px 10px; border: 1px solid #6d9b94; border-radius: 8px; background: #143d43; color: #ddf5ed; font-family: inherit; font-size: .77rem; font-weight: 650; cursor: pointer; }
.convolution-presets button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (hover: hover) { .convolution-presets button:hover { border-color: #b1efdb; background: #24534f; } }
@media (forced-colors: active) { .convolution-presets button { border: 1px solid ButtonText; } }

/* Results and selected controls should communicate state without color alone. */
.simulation-result [data-sim-status] { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 9px; border: 1px solid #b6cec3; border-radius: 7px; color: #335a53; background: #fff; font-weight: 700; }
.simulation-result [data-sim-status]::before { content: ''; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: currentColor; }
.simulation-result [data-sim-status][data-status="pass"], .simulation-result [data-sim-status][data-status="confirmed"] { color: #246137; border-color: #a7ceb4; background: #edf9ef; }
.simulation-result [data-sim-status][data-status="rejected"], .simulation-result [data-sim-status][data-status="unavailable"] { color: #9a3529; border-color: #e2afa8; background: #fff4f1; }
.spectral-results dl div, .signal-result dl div { padding-block: 5px; border-top: 1px solid #b6e9db24; }
.spectral-results dd, .signal-result dd { font-variant-numeric: tabular-nums; }
.signal-presets button, .spectral-modes button, .convolution-kernels button { font-weight: 650; }
.signal-presets button[aria-pressed="true"], .spectral-modes button[aria-pressed="true"], .convolution-kernels button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px currentColor; }
.convolution-output .convolution-value[aria-pressed="true"] { background: #52644f; color: #fff8e7; }
@media (forced-colors: active) {
  .simulation-result [data-sim-status], .signal-result, .spectral-results, .conv-calculation { border: 1px solid CanvasText; }
  .signal-presets button[aria-pressed="true"], .spectral-modes button[aria-pressed="true"], .convolution-kernels button[aria-pressed="true"], .convolution-output .convolution-value[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: -4px; }
}
@media screen and (min-width: 961px) { .desktop-nav a { padding-inline: clamp(8px, 1vw, 16px); font-size: .86rem; } }
@media screen and (max-width: 960px) {
  .desktop-nav { display: none; }
  .header-inner { min-height: 64px; }
  .mobile-rail { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 4px; padding-bottom: 3px; }
  .mobile-rail a { flex: 1 1 auto; display: inline-flex; min-height: 44px; justify-content: center; align-items: center; padding: 6px 3px; border-bottom: 2px solid transparent; color: #34555b; font-size: .75rem; font-weight: 650; line-height: 1.25; text-align: center; }
  .mobile-rail a[aria-current="location"] { border-color: #216d65; color: #104f49; }
  :root { scroll-padding-top: var(--header-offset, 138px); }
  :is(#experiments,#signal-lab,#spectral-lab,#work,#experience,#skills,#convolution-lab,#contact) { scroll-margin-top: 0; }
}
@media screen and (max-width: 360px) { .mobile-rail { gap: 0 2px; } .mobile-rail a { padding-inline: 2px; font-size: .68rem; } }
.convolution-presets button[data-pixel-draw-mode][aria-pressed="true"] { border-color: #b7f6e3; background: #b7f6e3; color: #103b36; }
.convolution-draw-hint:not([hidden]) { max-width: 38ch; margin: 2px 0 11px; color: #c8e9df; font-size: .78rem; line-height: 1.45; }
.convolution-lab[data-draw-mode="true"] .convolution-input { touch-action: pinch-zoom; }
.convolution-lab[data-draw-mode="true"] .convolution-pixel { cursor: crosshair; }
@media (forced-colors: active) { .convolution-presets button[data-pixel-draw-mode][aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: -4px; } }
/* The root offset already clears the header; avoid doubling it at targets. */
:is(#experiments,#signal-lab,#spectral-lab,#engineering-scene,#work,#lab,#demo-player,#experience,#skills,#study-focus,#convolution-lab,#contact), .project h3[id] { scroll-margin-top: 0; }
.convolution-pattern-status:not(:empty) { margin: 0 0 10px; color: #d0f5e9; font-size: .78rem; line-height: 1.4; }

/* The 3D world is presented as a navigable study with readable explanations. */
@media screen {
  .engineering-hero figcaption { padding-top: 14px; }
  .hero-explore:not([hidden]) { padding: clamp(16px, 2vw, 22px); border-color: #c7dbd3; border-radius: 15px; background: #f2f8f4; }
  .hero-explore-label { color: #35665e; font-size: .7rem; }
  .hero-focus-buttons button { min-height: 54px; background: #ffffffb8; border-color: #bfd3ca; color: #274c48; }
  .hero-focus-buttons button[aria-pressed="true"] { color: #fff; background: #164c48; border-color: #164c48; }
  .hero-focus-buttons button[aria-pressed="true"] span:first-child { color: #b7f4e2; }
  .hero-focus-detail { color: #2d4c4b; font-size: .89rem; line-height: 1.6; }
  .hero-focus-detail .hero-detail-note { color: #486965; font-size: .8rem; line-height: 1.55; }
  .hero-detail-path { gap: 6px; }
  .hero-detail-path span { color: #315e56; background: #fff; }
  .hero-scene-label { color: #c8e2dc; }
  .hero-scene-label span:last-child { color: #a5c9c1; }
  .hero-stage-lenses button { min-height: 48px; }
  .hero-stage-band button, .hero-stage-camera button { min-height: 48px; min-width: 48px; }
  .hero-stage-toggle { min-height: 48px; font-size: .8rem; }
  .hero-project-links a { min-height: 48px; }
}
@media (max-width: 760px) {
  .hero-focus-detail { font-size: .9rem; }
  .hero-focus-detail .hero-detail-note { font-size: .83rem; }
  .hero-stage-lenses button { padding-inline: 5px; font-size: .7rem; }
  .hero-stage-lenses .hero-stage-camera-toggle { min-width: 48px; flex-basis: 48px; }
}
.convolution-controls > .convolution-pattern-status:empty { margin: 0; line-height: 0; }
/* At very narrow effective widths (including high zoom), let the taller header scroll away. */
@media screen and (max-width: 320px) { .header { position: relative; } :root { scroll-padding-top: 16px; } }
:root { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
@media screen {
  .hero-intro, .section-heading p, .project-summary, .signal-heading p, .convolution-heading p { text-wrap: pretty; }
  .project-summary, .timeline-item li, .about-copy { letter-spacing: -.005em; }
  .project h3, .convolution-heading h3, .spectral-intro h3 { line-height: 1.12; }
}
/* Keep the persistent small-screen navigation opaque and inexpensive to paint. */
@media screen and (max-width: 960px) { .header { background: #f8f8f5; backdrop-filter: none; } }
@media (prefers-reduced-transparency: reduce) { .header { background: #f8f8f5; backdrop-filter: none; } }
@media screen {
  .contact { position: relative; }
  .contact-email { max-width: 100%; padding: 12px 16px; border: 1px solid #a8cec0; border-radius: 11px; background: #e8f4ed; color: #145e55; font-weight: 650; }
  .contact-links { border-top: 1px solid #d3e2dc; padding-top: 12px; }
  .contact-links a { min-height: 48px; }
  .earlier-grid article { min-width: 0; padding: 22px; border: 1px solid #d3e2dc; border-radius: 14px; background: #f7faf7; }
  .role-badge { border: 1px solid #a7d3bd; background: #e5f4e9; color: #246347; }
}
@media (prefers-reduced-motion: no-preference) { html:not([data-motion="off"]) .contact-email { transition: background .2s, border-color .2s; } }
@media (hover:hover) { .contact-email:hover { border-color: #24776a; background: #d9eee3; } }
.convolution-presets button:disabled { opacity: .5; cursor: not-allowed; }
.conv-label { flex-wrap: wrap; gap: 6px 12px; }
.conv-label button { min-height: 44px; white-space: normal; }
@media screen {
  .signal-legend, .spectral-legend, .spectral-axis, .spectral-header, .spectral-waterfall-label { font-size: .76rem; line-height: 1.45; }
  .spectral-visual-note, .spectral-note, .signal-note, .convolution-note { font-size: .82rem; line-height: 1.6; }
  .signal-preset-note, .spectral-preset-note, .spectral-dual-note, .spectral-mode-description { font-size: .8rem; line-height: 1.5; }
}
@media (max-width: 760px) {
  .signal-plot-top, .spectral-header { flex-wrap: wrap; font-size: .7rem; line-height: 1.45; }
  .signal-plot-top > span:first-child { max-width: none; }
  .spectral-waterfall-row .spectral-waterfall-ends { font-size: .72rem; max-width: 5rem; }
  .spectral-scale { font-size: .7rem; }
}

/* Editorial engineering direction: warm paper, precise type and a dark stage. */
:root {
  --bg: #f4f1ea; --paper: #f4f1ea; --surface: #ebe8e0;
  --ink: #182321; --text: #182321; --muted: #53615c;
  --line: #cdd3c9; --accent: #f0ded0; --accent-ink: #913e27;
  --max: 1360px;
}
@media screen {
  body { background: #f4f1ea; }
  .header { background: #f4f1ea; border-color: #cbd1c6; backdrop-filter: none; }
  .header-inner { min-height: 78px; }
  .wordmark { color: #182321; letter-spacing: -.09em; }
  .wordmark span { color: #a74f33; }
  .desktop-nav { gap: 3px; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .desktop-nav a { min-height: 46px; display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 0; border-bottom: 2px solid transparent; color: #3d504a; font-size: .85rem; font-weight: 650; }
  .desktop-nav a:hover { background: transparent; border-color: #bd795f; color: #813923; }
  .desktop-nav a[aria-current="location"] { color: #813923; background: transparent; border-color: #a74f33; }
  .header .language-switch { border-color: #c3cdc2; background: transparent; }
  .header .language-switch a[aria-current="page"] { color: #193a34; background: #dce9de; }
  .menu-trigger { background: #203d38; color: #fff; }
  .site-menu { background: #173c37; }
  .hero { position: relative; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: clamp(28px, 5vw, 84px); align-items: start; padding-top: clamp(32px,5vw,72px); }
  .hero-copy { max-width: 40rem; padding: 18px 0 28px; }
  .hero-identity { align-items: center; gap: 13px; }
  .hero-name { color: #586b60; font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
  .hero-identity .portrait-panel { width: 54px; height: 54px; flex-basis: 54px; box-shadow: 0 0 0 1px #b6c6b8; }
  .hero h1 { margin: 28px 0 20px; max-width: 11ch; color: #162b26; font-size: clamp(3rem, 4.5vw, 5.4rem); font-weight: 650; line-height: .99; letter-spacing: -.065em; }
  .hero h1 .hero-word:last-child { color: #9b4d34; }
  .hero-role { max-width: 33ch; color: #334f47; font-size: clamp(1rem, 1.15vw + .55rem, 1.3rem); line-height: 1.45; }
  .hero-intro { max-width: 38ch; margin-top: 20px; color: #53675e; font-size: 1.03rem; }
  .hero-manifesto { margin-top: 20px; color: #87624e; font-size: .9rem; font-weight: 600; }
  .hero-actions { gap: 8px 18px; margin-top: 28px; }
  .hero-actions .primary { min-height: 52px; border-radius: 5px; border-color: #203f38; background: #203f38; color: #fff; }
  .hero-actions .primary:hover { background: #315c51; }
  .hero-actions .secondary { min-height: 52px; border-radius: 5px; border-color: #a7b6aa; color: #24453c; background: transparent; }
  .hero-scene-jump { color: #78402c; }
  .hero-scene-jump > span:first-child { border-color: #c38d73; color: #a84f32; }
  .engineering-hero { min-width: 0; }
  .hero-orbit { height: clamp(450px, 46vw, 650px); border: 1px solid #68817a; border-radius: 8px; background: radial-gradient(ellipse at 50% 38%, #31564f 0, #142d2c 51%, #071b1d 100%); box-shadow: 0 24px 70px -42px #17342dcc; }
  .hero-orbit::before { opacity: .18; }
  .hero-orbit::after { inset: 12px; border-color: #dcead329; border-radius: 3px; }
  .hero-scene-label { inset: 26px 27px auto; color: #c6dcd1; }
  .hero-stage-dock:not([hidden]) { bottom: 20px; }
  .hero-stage-lenses { border-radius: 7px; background: #0d2928ed; }
  .hero-stage-lenses button { border-radius: 4px; }
  .hero-stage-lenses button[aria-pressed="true"] { background: #e7eee1; color: #193b32; }
  .hero-visual-header { padding: 4px 0; }
  .hero-visual-header p { max-width: 54ch; color: #586a60; }
  .hero-explore:not([hidden]) { padding: 19px 0 14px; border: 0; border-top: 1px solid #c7d2c5; border-radius: 0; background: transparent; }
  .hero-explore[data-focus="security"], .hero-explore[data-focus="robotics"], .hero-explore[data-focus="automation"] { background: transparent; border-color: #c7d2c5; }
  .hero-explore-label { color: #63756a; font-size: .68rem; }
  .hero-focus-buttons { gap: 0; border: 1px solid #bfcec2; border-radius: 6px; overflow: hidden; }
  .hero-focus-buttons button { min-height: 56px; border: 0; border-right: 1px solid #bfcec2; border-radius: 0; background: #f7f6f0; color: #314a40; }
  .hero-focus-buttons button:last-child { border-right: 0; }
  .hero-focus-buttons button[aria-pressed="true"], .hero-explore[data-focus] .hero-focus-buttons button[aria-pressed="true"] { background: #244b40; color: #fff; box-shadow: none; }
  .hero-focus-buttons button::after { display: none; }
  .hero-focus-detail { color: #314a42; }
  .hero-focus-detail .hero-detail-note { color: #506860; }
  .hero-visual-notes { margin-top: 11px; border-top: 1px solid #d1ddd2; }
  .hero-visual-notes summary { min-height: 44px; display: flex; align-items: center; color: #4c6961; font-size: .8rem; font-weight: 650; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
  .hero-visual-notes[open] { padding-bottom: 10px; }
  .hero-visual-notes summary:focus-visible { outline: 3px solid #a94a2d; outline-offset: 3px; }
  .career-strip { border-color: #c4d0c4; }
  .career-strip a { padding-block: 20px; }
  .career-strip strong { color: #24483d; }
}
@media screen and (max-width: 760px) {
  .header-inner { min-height: 60px; }
  .mobile-rail { background: #f4f1ea; border-bottom: 1px solid #d4d9cf; }
  .mobile-rail a { color: #40594d; }
  .mobile-rail a[aria-current="location"] { color: #813923; border-color: #a74f33; }
  .hero { grid-template-columns: minmax(0,1fr); padding-top: 26px; }
  .hero h1, :lang(de) .hero h1 { max-width: 12ch; margin: 22px 0 14px; font-size: clamp(2.55rem, 1.4rem + 5vw, 4.1rem); line-height: 1.02; }
  .hero-role { max-width: 33ch; }
  .hero-intro { margin-top: 12px; }
  .hero-actions { margin: 20px 0 24px; }
  .engineering-hero { margin-top: 0; }
  .hero-orbit { height: clamp(360px, 105vw, 515px); }
  .hero-focus-buttons { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero-focus-buttons button { min-height: 54px; border-bottom: 1px solid #bfcec2; }
  .hero-focus-buttons button:nth-child(2) { border-right: 0; }
  .hero-focus-buttons button:nth-child(n+3) { border-bottom: 0; }
  .hero-visual-header p { font-size: .82rem; }
  .career-strip { margin-top: 26px; }
}
@media screen and (max-width: 360px) {
  .hero h1, :lang(de) .hero h1 { font-size: 2.35rem; }
  .hero-focus-buttons button { font-size: .78rem; }
}
@media screen {
  .world-bridge { --bridge-accent: #9a5037; background: #e7e7dd; border-color: #cbd4c7; }
  .world-bridge[data-focus="security"] { --bridge-accent: #576895; background: #e8eaf0; }
  .world-bridge[data-focus="robotics"] { --bridge-accent: #97603e; background: #f0e8dc; }
  .world-bridge[data-focus="automation"] { --bridge-accent: #357769; background: #e3eee7; }
  .world-bridge-inner { grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); padding-block: clamp(36px,4.5vw,60px); }
  .world-bridge-heading h2 { color: #1c3b32; }
  .world-bridge-content h3 { color: #1d3a31; }
  .world-bridge-content a { color: #76422f; }
  .world-bridge-rail i { background: #f0f0e8; }
  .explore-region { background: #f4f1ea; border-color: #ccd4ca; }
  .explore-index { padding-block: clamp(70px,7vw,110px); }
  .explore-index-heading { margin-bottom: 32px; border-bottom: 1px solid #becbc0; padding-bottom: 22px; }
  .explore-index-kicker { color: #9b4d34; }
  .explore-index h2 { color: #1c362f; font-weight: 600; letter-spacing: -.055em; }
  .explore-index-heading > p { color: #50645b; }
  .explore-index-grid { gap: 0; border-left: 1px solid #c7d2c5; border-top: 1px solid #c7d2c5; }
  .explore-card, .explore-card-security, .explore-card-signal, .explore-card-spectrum, .explore-card-cnn { --card-accent: #944a30; min-height: 245px; padding: 23px; border: 0; border-right: 1px solid #c7d2c5; border-bottom: 1px solid #c7d2c5; border-radius: 0; background: #f8f7f1; }
  .explore-card:nth-child(2) { background: #e9eee5; }
  .explore-card:nth-child(3) { background: #ece9e1; }
  .explore-card:nth-child(4) { background: #f1e9dd; }
  .explore-card strong { margin-top: 22px; color: #19382d; font-size: 1.3rem; line-height: 1.2; }
  .explore-card > span:nth-of-type(2) { color: #4c6158; }
  .explore-card-action { color: #8e4029; }
  .explore-card-top { color: #8e4932; }
  .explore-card:focus-visible { outline: 3px solid #973f29; outline-offset: -4px; }
  .explore-index-note { color: #5d6e61; }
  .work-section { background: #ebece3; border-block: 1px solid #d3d8ce; }
  .work-section .section-heading h2 { color: #1b3930; font-size: clamp(2.5rem,4.8vw,4.4rem); }
  .work-shortcuts { border-color: #c9d3c8; }
  .work-shortcuts a { color: #88422e; }
  .project-grid { gap: 16px; }
  .project, .project-featured, .project-production { border-color: #c9d3c8; border-radius: 8px; background: #f8f7f1; box-shadow: none; }
  .project-featured { background: #f9f8f3; }
  .project-production { background: #e3ede6; }
  .project-index { color: #9c593d; font-family: Georgia,serif; font-style: italic; }
  .project-kind { color: #66776c; font-size: .72rem; letter-spacing: .09em; }
  .project h3 { color: #193a2f; letter-spacing: -.045em; }
  .project .project-summary { color: #455d50; }
  .project-preview { border: 0; border-radius: 4px; background: #f1f1e9; }
  .project-preview figcaption { color: #5d7063; }
  .project-filters button { border-color: #b4c5b7; border-radius: 4px; background: transparent; color: #385348; }
  .project-filters button[aria-pressed="true"] { background: #244b40; border-color: #244b40; color: #fff; }
  .project-details > summary, .robotics-story > summary { color: #87432d; }
  .project-lab > summary { color: #183e33; font-weight: 700; }
  .timeline-item, .company-block { border-color: #bbc9bc; }
  .timeline-item h3, .earlier-grid h3, .skill-grid article h3 { color: #1d3d31; }
  .company-name { color: #22493b; }
  .role-badge { color: #28573b; border-color: #aecab3; background: #e0eee0; }
  .skill-grid { gap: 0; border-left: 1px solid #c7d2c5; border-top: 1px solid #c7d2c5; }
  .skill-grid article { border: 0; border-right: 1px solid #c7d2c5; border-bottom: 1px solid #c7d2c5; border-radius: 0; background: #f9f8f2; }
  .skill-grid article p { color: #4e6457; }
  .study-focus { border-radius: 6px; border-color: #c2d5c3; background: #e1ede2; }
  .earlier-grid article { border-radius: 6px; border-color: #c9d6c9; background: #f9f8f1; }
  .about-section { border-block: 1px solid #cbd4c8; background: #e8ede3; }
  .contact { border-color: #c4d0c4; }
  .contact-email { border-radius: 5px; border-color: #a7c6ae; background: #e0eee1; color: #285c41; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  html:not([data-motion="off"]) .explore-card { transition: background-color .22s, color .22s; }
  html:not([data-motion="off"]) .explore-card:hover { transform: none; background: #dfece1; box-shadow: inset 0 -4px #ab6445; }
  html:not([data-motion="off"]) .project:hover, html:not([data-motion="off"]) .skill-grid article:hover { border-color: #87aa96; box-shadow: none; }
}
@media screen and (max-width: 760px) {
  .world-bridge-inner { grid-template-columns: 1fr; }
  .explore-index { padding-block: 58px; }
  .explore-index-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .explore-card, .explore-card-security, .explore-card-signal, .explore-card-spectrum, .explore-card-cnn { min-height: 195px; padding: 15px; }
  .explore-card strong { margin-top: 10px; font-size: 1.08rem; }
  .explore-card > span:nth-of-type(2) { font-size: .8rem; }
}
@media screen and (max-width: 340px) { .explore-index-grid { grid-template-columns: 1fr; } .explore-card, .explore-card-security, .explore-card-signal, .explore-card-spectrum, .explore-card-cnn { min-height: 0; } }
/* Compact evidence lets visitors understand the work before opening details. */
.case-facts { display: flex; flex-wrap: wrap; gap: 12px 0; margin: 22px 0 16px; padding: 15px 0; border-block: 1px solid #c9d5c9; }
.case-facts > div { flex: 1 1 115px; min-width: 0; padding-right: 12px; }
.case-facts dt { color: #60756a; font: 700 .63rem/1.4 monospace; letter-spacing: .09em; }
.case-facts dd { margin: 5px 0 0; color: #244c3d; font-size: .83rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
@media (max-width: 480px) { .case-facts { gap: 12px 0; margin-block: 16px; } .case-facts > div { flex-basis: 45%; } }
.hero-guided { border-bottom: 1px solid #d0dbd0; }
.hero-guided > summary { min-height: 44px; display: flex; align-items: center; color: #506b60; font-size: .8rem; font-weight: 650; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.hero-guided > summary:focus-visible { outline: 3px solid #9b4d34; outline-offset: 3px; }
.hero-guided .hero-journey { margin-bottom: 14px; }
.editorial-section-label { margin-bottom: 16px; color: #965037; font: 700 .7rem/1.4 monospace; letter-spacing: .12em; }
.project-featured .case-study-entry { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 15px; margin: 4px 12px 4px 0; border: 1px solid #254b3f; border-radius: 5px; background: #254b3f; color: #fff; font-weight: 700; text-decoration: none; }
.project-featured .case-study-entry:hover { background: #376655; }
.project-featured .case-study-entry:focus-visible { outline: 3px solid #a54a2e; outline-offset: 3px; }
.project-featured .demo-entry, .project-featured .world-return, .project-robotics .world-return { min-height: 48px; align-items: center; color: #83402b; font-weight: 650; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) { .project-featured .case-study-entry { width: 100%; margin: 2px 0 8px; } }
@media screen {
  .hero h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.055em; }
  .work-section .section-heading h2, .explore-index h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.045em; }
  .world-bridge-heading h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
}
/* Give the instruments a common dark surface while keeping their controls intact. */
@media screen {
  .signal-section { background: #0d2523; border-color: #345448; }
  .signal-section::before { background: radial-gradient(ellipse at 12% 8%,#355b4d 0,transparent 42%),radial-gradient(ellipse at 85% 90%,#293f43 0,transparent 42%); }
  .signal-plot-panel, .signal-controls, .spectral-visual, .spectral-controls { background: #142f2c; border-color: #a9d7bb35; border-radius: 8px; }
  .signal-result, .spectral-results, .conv-calculation { background: #21433b; border-color: #a1d5b74d; border-radius: 7px; }
  .spectral-lab { border-radius: 8px; }
  .convolution-lab { border-radius: 8px; background: radial-gradient(ellipse at 78% 25%,#285248,#102a28 65%); }
  .convolution-viewport { border-radius: 6px; background: radial-gradient(ellipse at center,#325d50,#122d2a 70%); }
  .lab-steps li { border-radius: 5px; }
  .lab-next { border-color: #a9d7bb40; }
}
@media (min-width: 341px) and (max-width: 760px) {
  .lab-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .lab-steps li { display: block; min-height: 62px; padding: 8px; }
  .lab-steps li::before { display: block; margin-bottom: 4px; }
  .lab-steps strong { font-size: .75rem; }
}
@media screen {
  .hero-focus-detail [data-hero-detail] > a, .hero-focus-detail .hero-detail-links a:first-child { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 9px 13px; margin: 8px 8px 3px 0; border: 1px solid #285040; border-radius: 4px; background: #285040; color: #fff; font-size: .8rem; font-weight: 700; line-height: 1.3; text-decoration: none; }
  .hero-focus-detail [data-hero-detail] > a:hover, .hero-focus-detail .hero-detail-links a:first-child:hover { background: #3c6a54; color: #fff; }
  .hero-focus-detail .hero-detail-links a:not(:first-child) { min-height: 46px; color: #87432d; text-decoration: underline; text-underline-offset: 4px; }
}
@media (max-width: 760px) { .hero-focus-detail .hero-detail-links { gap: 0 12px; } }
.hero-labs-jump { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; color: #83422d; font-size: .87rem; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.hero-labs-jump span:last-child { text-decoration: none; }
@media (max-width: 760px) { .hero-labs-jump { min-height: 44px; } }
@media screen and (max-width: 760px) {
  .career-strip { border-top: 1px solid #c4d0c4; }
  .career-strip a, .career-strip a:first-child { padding: 13px 0; }
  .career-strip strong { font-size: 1rem; }
  .career-strip span { font-size: .78rem; line-height: 1.4; }
  .career-strip small { font-size: .68rem; }
}
@media screen {
  .case-facts dt, .explore-card-top, .hero-explore-label { font-size: .7rem; }
  .hero-focus-buttons button { font-size: .82rem; line-height: 1.35; }
  .hero-field-summary span:nth-child(2), .hero-visual-notes summary { font-size: .8rem; line-height: 1.45; }
  .world-bridge-content p, .project .project-summary { line-height: 1.65; }
}
@media screen and (max-width: 760px) {
  .hero { padding-top: 20px; }
  .hero-identity .portrait-panel { width: 46px; height: 46px; flex-basis: 46px; }
  .hero h1, :lang(de) .hero h1 { margin: 16px 0 10px; }
  .hero-role { font-size: 1rem; line-height: 1.4; }
  .hero-intro { margin-top: 8px; font-size: .95rem; line-height: 1.45; }
  .hero-manifesto { margin-top: 8px; font-size: .82rem; }
  .hero-actions { gap: 4px 12px; margin: 14px 0 20px; }
  .hero-actions .primary, .hero-actions .secondary { min-height: 48px; }
  .hero-labs-jump { min-height: 42px; }
}
/* The stage changes with the selected discipline, complementing the 3D focus. */
@media screen {
  .hero-orbit { background-color: #102b29; background-image: radial-gradient(ellipse at 50% 32%,#8bb99a32 0,transparent 63%),linear-gradient(0deg,#071918 0,transparent 70%); }
  .hero-orbit[data-focus="hardware"] { background-color: #12332d; }
  .hero-orbit[data-focus="security"] { background-color: #202b46; }
  .hero-orbit[data-focus="robotics"] { background-color: #433126; }
  .hero-orbit[data-focus="automation"] { background-color: #173747; }
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .hero-orbit { transition: height .45s cubic-bezier(.2,.8,.2,1), background-color .6s ease; }
}
@media screen {
  .contact { margin-top: clamp(18px,3vw,42px); margin-bottom: clamp(35px,5vw,65px); padding: clamp(26px,5vw,70px); border: 1px solid #335a4b; border-radius: 8px; background: #183a30; color: #f5f5eb; }
  .contact .eyebrow { color: #c5ddc9; }
  .contact h2 { margin-top: 18px; color: #f7f6ed; font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.045em; }
  .contact > p:not(.eyebrow) { color: #c4d9cb; }
  .contact-email { display: block; width: fit-content; max-width: 100%; padding: 12px 16px; border-color: #c6d9c1; border-radius: 4px; background: #e4eee0; color: #1c4a36; line-height: 1.4; overflow-wrap: anywhere; }
  .contact-links { border-color: #a4c5ae55; }
  .contact-links a { color: #dbf2df; }
  .contact :is(a,button):focus-visible { outline-color: #f3c18a; outline-offset: 4px; }
}
@media (hover:hover) { .contact-email:hover { background: #cfe4d0; } }
.footer-back { display: inline-flex; align-items: center; min-height: 48px; color: #85412c; font-size: .82rem; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
@media screen and (max-width: 760px) { .footer { gap: 8px 20px; } }
@media screen {
  .robotics-feature { border-radius: 4px; color: #e6f2e5; background: radial-gradient(circle at 78% 20%,#416b4f,#1b4034 52%,#102921); }
  .robotics-feature::after { border-color: #cae4bd55; box-shadow: 0 0 0 25px #d6efcb0e,0 0 0 50px #d6efcb09; }
  .robotics-feature strong { font-family: Georgia,"Times New Roman",serif; font-weight: 400; }
  .robotics-signal i { background: #d3ebc2; }
  .robotics-feature .robotics-signal-label { color: #c9dec2; font-size: .66rem; }
  .world-bridge-inner { gap: clamp(20px,4vw,58px); }
  .world-bridge-heading h2 { font-size: clamp(1.6rem,2.8vw,2.4rem); }
  .world-bridge-content p { font-size: .84rem; }
}
/* Consistent affordances for the disclosures used throughout the page. */
@media screen {
  .project-lab > summary, .simulation-tools > summary, .simulation-reference > summary, .signal-math > summary, .robotics-story > summary { min-height: 48px; line-height: 1.4; }
  .project-lab > summary { padding-inline: 4px; }
  .simulation-tools > summary, .simulation-reference > summary { color: #275b4a; font-weight: 650; }
  .signal-math > summary { color: #d2ecda; }
  .project-lab > summary:focus-visible, .simulation-tools > summary:focus-visible, .simulation-reference > summary:focus-visible, .robotics-story > summary:focus-visible { outline: 3px solid #a54a2e; outline-offset: 3px; }
  .signal-section :is(summary,button,a,input,select):focus-visible, .convolution-lab :is(summary,button,a,input,select):focus-visible { outline: 3px solid #fff3d8; outline-offset: 3px; }
}
@media screen {
  .work-shortcuts { gap: 0 22px; margin-bottom: 22px; padding: 7px 0; border-color: #bdccbe; }
  .work-shortcuts > span { color: #708074; font-size: .68rem; }
  .work-shortcuts a { color: #87432d; font-weight: 700; }
  .filter-status { color: #536a5d; }
  .project-grid > .project { min-width: 0; }
  .project .text-link:not(.case-study-entry), .github-link { color: #87432d; text-underline-offset: 4px; }
  .project .text-link:not(.case-study-entry):focus-visible, .github-link:focus-visible { outline: 3px solid #a54a2e; outline-offset: 3px; }
}
@media screen and (max-width: 760px) {
  .engineering-hero[data-stage-expanded] .hero-orbit { height: clamp(440px, 75vh, 700px); height: clamp(440px, 75svh, 700px); }
}
@media (prefers-contrast: more) {
  .hero-focus-buttons, .hero-focus-buttons button, .explore-index-grid, .explore-card, .project, .skill-grid article { border-color: #355847; }
  .hero-focus-buttons button[aria-pressed="true"] { outline: 3px solid currentColor; outline-offset: -4px; }
  .hero-focus-detail a, .work-shortcuts a, .lab-next a, .footer-back { text-decoration-thickness: 2px; }
}
@media (forced-colors: active) {
  .hero-focus-buttons button[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: -4px; }
  .case-facts, .explore-card, .project, .skill-grid article { border: 1px solid CanvasText; }
  .contact { border: 1px solid CanvasText; }
}
@media screen {
  .project h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: clamp(2rem,3.2vw,3.2rem); line-height: 1.06; letter-spacing: -.045em; }
  .project-compact h3 { font-size: clamp(1.7rem,2.3vw,2.35rem); }
  .project-preview img { border-radius: 4px; }
  .project-footnote { color: #65756b; }
  .project-lab { margin-top: 8px; border-color: #c6d3c5; }
  .project-lab > summary { padding-block: 20px; }
}
@media screen and (max-width: 760px) {
  .project h3 { font-size: clamp(1.75rem,1.1rem + 3vw,2.6rem); }
  .project-preview { margin-top: 4px; }
}
@media screen {
  .hero-project-links { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 12px; padding-block: 5px; border-color: #cbd5c9; }
  .hero-project-links a, .hero-project-links a:first-child { min-height: 44px; padding: 6px 0; color: #7c402d; font-size: .8rem; font-weight: 650; }
  .hero-project-links a + a { border-left: 0; }
  .hero-project-links a:focus-visible { outline-color: #a54a2e; }
}
@media screen and (max-width: 760px) { .hero-project-links { gap: 0 16px; } .hero-project-links a { flex: 0 1 auto; } }
@media screen and (min-width: 340px) and (max-width: 760px) {
  .skill-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .skill-grid article { padding: 17px 14px; }
  .skill-grid article h3 { font-size: 1rem; line-height: 1.3; overflow-wrap: break-word; }
  .skill-grid article p { font-size: .79rem; line-height: 1.65; }
}
@media screen {
  .study-focus h3, .timeline-item h3 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem); letter-spacing: -.035em; }
  .study-focus .tags, .project .tags { gap: 6px; }
  .study-focus .tags span, .project .tags span { border-color: #bdcfbf; border-radius: 4px; background: #f5f8f2; color: #38584a; }
  .study-experiment-link, .world-return { color: #86432c; text-underline-offset: 4px; }
}
@media screen {
  .explore-card:focus-visible .explore-card-top span:last-child { transform: translate(3px,-3px); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .explore-card-top span:last-child { transition: transform .2s ease; }
  html:not([data-motion="off"]) .explore-card:hover .explore-card-top span:last-child { transform: translate(3px,-3px); }
}
@media screen {
  .hero-field-panel { border: 1px solid #42685b; border-radius: 6px; background: #193b32; box-shadow: none; }
  .hero-field-summary::after { border-color: #a7cead88; }
  .hero-field-lenses button, .hero-field-sectors button { border-radius: 4px; }
  .hero-camera-disclosure > summary { min-height: 48px; color: #506b60; font-weight: 650; }
  .hero-explode input { accent-color: #3a8066; }
  .hero-field-intensity input { accent-color: #b0e3c2; }
  .hero-view-controls button { border-color: #aac4ae; color: #285243; }
  .hero-parameter-reset { border-radius: 4px; }
}
@media screen and (max-width: 760px) {
  .world-bridge-inner { gap: 14px; padding-block: 28px; }
  .world-bridge-heading h2 { margin: 7px 0 5px; font-size: 1.6rem; }
  .world-bridge-heading p { font-size: .8rem; }
  .world-bridge-rail { margin: 4px 0 14px; }
  .world-bridge-content h3 { margin: 5px 0; font-size: 1.15rem; }
  .world-bridge-content p { font-size: .82rem; }
  .world-bridge-content a { min-height: 44px; }
}
@media screen {
  .hero-stage-toggle, .hero-parameter-reset, .hero-field-reset { border-radius: 4px; }
  .hero-stage-toggle[aria-pressed="true"] { border-color: #2c5948; background: #2c5948; color: #fff; }
  .hero-stage-toggle:focus-visible, .hero-parameter-reset:focus-visible { outline-color: #a54a2e; }
  .hero-journey-track { background: #d0ddd0; }
  .hero-journey-track i { background: #628f73; }
  .hero-journey-actions button { color: #385e4b; }
  .hero-field-summary { min-height: 50px; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  html:not([data-motion="off"]) .hero-focus-buttons button { transition: background-color .22s ease, color .22s ease; }
  html:not([data-motion="off"]) .hero-focus-buttons button:hover:not([aria-pressed="true"]) { background: #e2ede1; color: #214c39; }
  html:not([data-motion="off"]) .hero-stage-toggle, html:not([data-motion="off"]) .hero-labs-jump { transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
}
@media (hover: hover) { .hero-focus-buttons button:hover { transform: none; } }
@media (hover: hover) { html:not([data-motion="off"]) .hero-focus-buttons button:hover { transform: none; } }
@media screen {
  .hero-stage { isolation: isolate; }
  .hero-scene-label { font-weight: 700; letter-spacing: .08em; }
  .hero-field-readout:not([hidden]) { border-color: #d0e4c655; border-radius: 4px; background: #102c27ee; }
  .hero-field-anchor span { border-color: #d1e8bcaa; border-radius: 4px; background: #142f29f2; }
  .hero-stage-band:not([hidden]), .hero-stage-camera:not([hidden]), .hero-stage-open:not([hidden]) { border-radius: 5px; background: #102c27f2; }
  .hero-stage-band button, .hero-stage-camera button { border-radius: 3px; }
}
.hero-guided > summary::after, .hero-visual-notes > summary::after { content: '+'; display: inline-grid; place-items: center; width: 25px; height: 25px; margin-left: auto; border: 1px solid #b6cbb8; border-radius: 50%; color: #476b55; font-size: .95rem; font-weight: 500; text-decoration: none; }
.hero-guided[open] > summary::after, .hero-visual-notes[open] > summary::after { content: '−'; }
@media (prefers-contrast: more) {
  .hero-guided > summary, .hero-visual-notes > summary, .hero-labs-jump, .footer-back { text-decoration-thickness: 2px; }
  .hero-guided > summary::after, .hero-visual-notes > summary::after { border-color: currentColor; }
}
@media screen {
  #experience .section-heading h2, #skills .section-heading h2, .about-grid h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.045em; color: #1c392f; }
  .timeline-item h3, .skill-grid article h3 { letter-spacing: -.025em; }
}