@font-face {
  font-family: Roboto;
  src: url('../../assets/fonts/roboto-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root,
.sh-root {
  --bg: #f4f4f4;
  --bg-panel: #ececea;
  --bg-subtle: #e5e5e2;
  --surface: #ffffff;
  --ink: #1c1c1c;
  --ink-secondary: #4a4a4a;
  --rule: #c8c8c5;
  --rule-strong: #1c1c1c;
  --accent: #1f5c46;
  --accent-tint: rgba(31, 92, 70, 0.075);
  --accent-border: rgba(31, 92, 70, 0.38);
  --font-sans: "Helvetica Neue", "Inter", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --grid-max: 1360px;
  /* Swissheart tokens: geometry only, no new colours */
  --cut: 12px;
  --cut-bg: var(--bg);
  --cut-line: var(--rule-strong);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--ink);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background-color: var(--bg);
  overflow-x: clip;
}

.sh-root {
  font: 400 17px/1.55 var(--font-sans);
  color: var(--ink);
  background-color: var(--bg);
}

/* ==========================================================================
   ACCESSIBILITY & BASE TYPOGRAPHY
   ========================================================================== */
.skip-link {
  position: fixed;
  top: -120px;
  left: 16px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: top 0.2s var(--ease-out);
}

.skip-link:focus {
  top: 10px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

h1, h2, h3, h4, p, dl, dd, ol, ul, figure, pre {
  margin: 0;
}

h1, h2, h3, h4 {
  font-weight: 500;
  color: var(--ink);
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: rgba(28, 28, 28, 0.06);
  padding: 1px 5px;
}

main,
.site-footer {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding-left: clamp(20px, 4.2vw, 56px);
  padding-right: clamp(20px, 4.2vw, 56px);
}

.nav-link,
.inline-link,
.action-link {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  transition: background-size 0.28s var(--ease-out), color 0.2s ease;
}

.inline-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background-image: linear-gradient(var(--ink-secondary), var(--ink-secondary));
  background-size: 100% 1px;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-active,
.inline-link:hover,
.inline-link:focus-visible,
.action-link:hover,
.action-link:focus-visible {
  color: var(--accent);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 1.5px;
}

.ext,
.arrow {
  display: inline-block;
  font-size: 0.9em;
  line-height: 1;
  margin-left: 4px;
  transition: transform 0.22s var(--ease-out), color 0.2s ease;
}

a:hover .ext,
a:focus-visible .ext {
  transform: translate(2px, -2px);
}

a:hover .arrow,
a:focus-visible .arrow {
  transform: translateX(3px);
}

/* ==========================================================================
   1. COMPACT STICKY HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 244, 244, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.2s ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--rule-strong);
}

.header-inner {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 10px clamp(20px, 4.2vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.brand-group {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.brand-name {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.brand-name:hover,
.brand-name:focus-visible {
  color: var(--accent);
}

.brand-role {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-secondary);
  padding-left: 12px;
  border-left: 1px solid var(--rule);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 6px 22px;
  flex-wrap: wrap;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14.5px;
  letter-spacing: -0.01em;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--surface);
  background: var(--accent);
  border: 1px solid var(--accent);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
}

/* ==========================================================================
   2. HERO (5-SECOND CLARITY + HOW I WORK)
   ========================================================================== */
.hero {
  padding: 36px 0 88px;
  border-bottom: 1px solid var(--rule-strong);
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}

.status-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.kicker-text {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-secondary);
  letter-spacing: 0.01em;
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}

.hero-copy {
  grid-column: 1 / 7;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

h1 {
  font-size: clamp(38px, 4.6vw, 66px);
  line-height: 1.06;
  letter-spacing: -0.042em;
  font-weight: 500;
}

.hero-sub {
  font-size: clamp(16.5px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--ink-secondary);
  max-width: 54ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  padding-top: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 1px solid var(--rule-strong);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-tint);
}

.mono-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-secondary);
  font-weight: 500;
}

.mono-tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.arch-svg,
.boundary-svg {
  display: block;
  width: 100%;
  height: auto;
}

.work-process {
  border: 1px solid var(--rule-strong);
  background: var(--bg-panel);
  padding: 12px;
}
.work-process-head {
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.work-steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.work-step {
  position: relative;
  padding: 10px 8px;
  border: 1px solid var(--rule);
  background: var(--surface);
  min-width: 0;
}
.work-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  left: calc(100% + 1px);
  top: 50%;
  width: 14px;
  text-align: center;
  font: 12px var(--font-mono);
  color: var(--ink-secondary);
}
.work-step-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.work-step-heading::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.work-step-number { font: 11px var(--font-mono); color: var(--ink-secondary); }
.work-step h3 { flex-basis: 100%; font: 600 11px var(--font-mono); margin-top: 3px; }
.work-step p { font-size: 12px; line-height: 1.4; color: var(--ink-secondary); margin-top: 6px; }
.work-step:hover, .work-step:focus-visible { border-color: var(--accent); }
.work-step:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.work-process-foot {
  border-top: 1px solid var(--rule);
  margin-top: 12px;
  padding-top: 10px;
  font-size: 12px;
  color: var(--ink-secondary);
}

@media (max-width: 680px) {
  .work-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-step:nth-child(2)::after { content: none; }
  .work-step h3 { font-size: 12px; }
}

/* ==========================================================================
   EDITORIAL EVIDENCE FRAMES & CAPTIONS
   ========================================================================== */
.evidence-frame {
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.frame-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.frame-path {
  color: var(--ink-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.frame-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #ffffff;
  background: var(--accent);
  padding: 2px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

.frame-media-link {
  display: block;
  overflow: hidden;
  background: var(--bg-subtle);
  line-height: 0;
}

.frame-media-link img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top center;
  transition: opacity 0.2s ease;
}

.frame-media-link:hover img,
.frame-media-link:focus-visible img {
  opacity: 0.96;
}

.frame-caption {
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-secondary);
  background: var(--bg-panel);
  border-top: 1px solid var(--rule);
  margin-top: auto;
}

.frame-caption strong {
  color: var(--ink);
  font-weight: 600;
}

/* ==========================================================================
   3. WORK SECTION & PROJECT RHYTHM
   ========================================================================== */
.section-block {
  margin-top: 112px;
}

.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  padding-bottom: 18px;
  border-bottom: 1.5px solid var(--rule-strong);
}

.section-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.section-index {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
}

h2 {
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.section-meta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-secondary);
}

.project-list {
  list-style: none;
  padding: 0;
}

.project-entry {
  padding: 64px 0;
  border-bottom: 1px solid var(--rule-strong);
}

.project-entry--featured {
  background: var(--bg-panel);
  margin-left: -20px;
  margin-right: -20px;
  padding: 64px 20px;
}

.project-top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px 32px;
  margin-bottom: 32px;
  align-items: start;
}

.project-identity {
  grid-column: 1 / 7;
  min-width: 0;
}

.project-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-secondary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mono-num {
  color: var(--accent);
  font-weight: 600;
}

h3 {
  font-size: clamp(30px, 2.9vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: 12px;
}

.project-title-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color 0.2s ease;
}

.project-title-link:hover,
.project-title-link:focus-visible {
  color: var(--accent);
}

.project-problem {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 58ch;
}

.project-facts {
  grid-column: 7 / 13;
  min-width: 0;
  border-top: 1px solid var(--rule);
}

.fact-row {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14.5px;
  line-height: 1.45;
}

.fact-row dt {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-secondary);
  padding-top: 2px;
}

.fact-row dd {
  color: var(--ink);
  min-width: 0;
}

.inline-cli {
  display: inline-block;
  word-break: break-all;
  font-size: 12px;
  padding: 3px 7px;
  background: var(--surface);
  border: 1px solid var(--rule);
}

.media-stage--pair {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  margin-bottom: 24px;
}

.evidence-frame--main {
  grid-column: 1 / 10;
}

.evidence-frame--mobile {
  grid-column: 10 / 13;
}

.frame-media-link--mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: var(--bg-subtle);
  flex: 1;
}

.frame-media-link--mobile img {
  width: 100%;
  max-width: 240px;
  height: auto;
  border: 1px solid var(--rule-strong);
}

.split-showcase,
.protocol-stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  margin-bottom: 24px;
}

.split-showcase > .evidence-frame,
.protocol-stage > .mcp-interaction-card {
  grid-column: 1 / 8;
}

.split-showcase > .diagram-box--stacked,
.protocol-stage > .diagram-box--stacked {
  grid-column: 8 / 13;
  margin-bottom: 0;
}

/* ==========================================================================
   EDITORIAL DIAGRAMS (INPUT -> CONTEXT -> POLICY -> ACTION)
   ========================================================================== */
.diagram-box {
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  padding: 18px 20px;
  margin-bottom: 28px;
  min-width: 0;
}

.diagram-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

.diag-stage {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.diag-text {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-secondary);
}

.diagram-footnote {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-secondary);
}

.contract-stages {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contract-stage {
  padding: 11px 14px;
  border: 1px solid var(--rule);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contract-stage--policy {
  border-color: var(--accent);
  background: var(--accent-tint);
}

.stage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.stage-code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 1px 6px;
}

.tool-scope-summary {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-arch-steps {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 8px;
}

.mobile-arch-node {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mobile-arch-node--policy {
  border: 1px dashed var(--accent);
  background: var(--accent-tint);
}

.mobile-arch-step {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.mobile-arch-node strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.mobile-arch-node span:not(.mobile-arch-step) {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-secondary);
  line-height: 1.35;
}

/* ==========================================================================
   PROJECT 04 · SANITIZED TYPESET MCP INTERACTION CARD
   ========================================================================== */
.mcp-interaction-card {
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mcp-trace-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg);
  flex: 1;
}

.trace-turn {
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
}

.trace-turn--call {
  border-left: 3px solid var(--ink);
}

.trace-turn--result {
  border-left: 3px solid var(--accent);
}

.trace-turn--reply {
  background: var(--accent-tint);
  border-color: var(--accent-border);
}

.trace-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}

.trace-role {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-secondary);
}

.trace-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
}

.trace-msg {
  font-size: 15.5px;
  line-height: 1.45;
  margin-top: 4px;
}

.trace-code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.trace-code code {
  background: none;
  padding: 0;
  font-size: inherit;
}

/* ==========================================================================
   ENGINEERING DECISIONS & PROJECT LINKS
   ========================================================================== */
.project-bottom {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px 32px;
  padding-top: 8px;
}

.project-disclosure > summary {
  display: none;
  min-height: 44px;
  padding: 12px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-secondary);
  cursor: pointer;
}

.project-disclosure > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.decisions-block {
  grid-column: 1 / 9;
  min-width: 0;
}

.project-links-panel {
  grid-column: 9 / 13;
  min-width: 0;
}

.sub-heading {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-secondary);
  margin-bottom: 12px;
}

.decision-list {
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.decision-list li {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
}

.link-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.action-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15.5px;
  font-weight: 500;
  border-bottom: 1px solid var(--rule);
}

/* ==========================================================================
   4. SKILLS SECTION (CONNECT · GROUND · CONTROL)
   ========================================================================== */
.skills-grid {
  padding-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.skill-col {
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.skill-col-top {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

.skill-col h3 {
  font-size: 24px;
  margin-top: 6px;
  margin-bottom: 0;
}

.skill-summary {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-secondary);
}

.skill-items {
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
}

/* ==========================================================================
   5. ABOUT SECTION
   ========================================================================== */
.about-grid {
  padding-top: 32px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
}

.about-prose {
  grid-column: 1 / 7;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-lead {
  font-size: 19px;
  line-height: 1.5;
  font-weight: 500;
}

/* About: "What I work by" principles, → markers in the accent colour */
.about-principles-head {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-secondary);
  margin-bottom: 10px;
}
.about-principles-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--rule);
  padding-top: 12px;
}
.about-principles-list li {
  position: relative;
  padding-left: 24px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-secondary);
}
.about-principles-list li::before {
  content: "→";
  content: "→" / "";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent);
}
.about-principles-list strong { font-weight: 600; color: var(--ink); }

.about-meta-list {
  margin-top: 8px;
  border-top: 1px solid var(--rule);
}

.about-meta-list > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14.5px;
}

.about-meta-list dt {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

.about-timeline {
  grid-column: 7 / 13;
  min-width: 0;
}

.ops-list {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.ops-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
}

.ops-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.ops-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}

.ops-item p {
  color: var(--ink-secondary);
  line-height: 1.45;
}

/* ==========================================================================
   6. CONTACT SECTION (TWO CLEAR PATHS)
   ========================================================================== */
.contact-grid {
  padding-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.contact-card {
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.contact-card h3 {
  font-size: 26px;
  margin-bottom: 0;
}

.contact-copy {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-secondary);
  max-width: 54ch;
}

.contact-cta-row {
  margin-top: auto;
  padding-top: 8px;
}

.contact-links {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

/* ==========================================================================
   7. FOOTER
   ========================================================================== */
.site-footer {
  margin-top: 112px;
  padding-top: 20px;
  padding-bottom: 44px;
  border-top: 1px solid var(--rule-strong);
  font-size: 13.5px;
  color: var(--ink-secondary);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}

/* ==========================================================================
   SWISSHEART LAYER
   Vectorheart traits on top of the Swiss base: 45° chamfers, technical
   rulers, hatching, barcodes, HUD frames and stepped (digital) motion. Colours and fonts are the tokens above, untouched.
   ========================================================================== */

::selection { background: var(--accent); color: #ffffff; }

/* --- Buttons: 45° chamfer + shadow-pop --------------------------------
   The link carries a hard drop-shadow that follows the chamfered face.
   Rest: 3px. Hover/focus: the face lifts and the shadow grows to 6px
   (primary swaps to an accent shadow). Active: pressed flat. */
.btn,
.nav-cta {
  --pop: 3px;
  --pop-c: var(--ink);
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  filter: drop-shadow(var(--pop) var(--pop) 0 var(--pop-c));
  transition: filter 0.18s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn:hover,
.btn:focus-visible,
.nav-cta:hover,
.nav-cta:focus-visible {
  --pop: 6px;
  background: none;
  border-color: transparent;
}
.btn-primary:hover,
.btn-primary:focus-visible,
.nav-cta:hover,
.nav-cta:focus-visible {
  --pop-c: var(--accent);
}
.btn:active,
.nav-cta:active {
  --pop: 0px;
}
.btn-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 10px 20px;
  border: 1px solid var(--rule-strong);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: transform 0.18s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:hover .btn-face,
.btn:focus-visible .btn-face,
.nav-cta:hover .btn-face,
.nav-cta:focus-visible .btn-face {
  transform: translate(-3px, -3px);
}
.btn:active .btn-face,
.nav-cta:active .btn-face {
  transform: translate(3px, 3px);
}
.btn-primary .btn-face,
.nav-cta .btn-face {
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
}
.btn-primary:hover .btn-face,
.btn-primary:focus-visible .btn-face,
.nav-cta:hover .btn-face,
.nav-cta:focus-visible .btn-face {
  background: var(--ink);
  border-color: var(--ink);
}
.nav-cta .btn-face {
  min-height: 44px;
  padding: 0 14px;
}
/* Outlined chamfer: an ink face with an inset fill keeps the diagonal edge */
.btn-secondary .btn-face,
.nav-cta--ghost .btn-face {
  position: relative;
  z-index: 0;
  color: var(--ink);
  background: var(--rule-strong);
  border: 0;
  padding: 11px 21px;
}
.btn-secondary .btn-face::before,
.nav-cta--ghost .btn-face::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--bg);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9.41px), calc(100% - 9.41px) 100%, 0 100%);
}
.btn-secondary:hover .btn-face,
.btn-secondary:focus-visible .btn-face,
.nav-cta--ghost:hover .btn-face,
.nav-cta--ghost:focus-visible .btn-face {
  color: var(--accent);
  background: var(--accent);
}
.btn-secondary:hover .btn-face::before,
.btn-secondary:focus-visible .btn-face::before,
.nav-cta--ghost:hover .btn-face::before,
.nav-cta--ghost:focus-visible .btn-face::before {
  background: linear-gradient(var(--accent-tint), var(--accent-tint)), var(--bg);
}
/* Header GitHub link: outlined twin of the header CTA */
.nav-cta--ghost .btn-face {
  min-height: 44px;
  padding: 0 15px;
}
.nav-cta--ghost:hover,
.nav-cta--ghost:focus-visible {
  --pop-c: var(--ink);
}
/* Icon-only variant: square face with the GitHub mark (user-supplied file),
   used as a mask so it takes the text colour: ink, accent on hover. */
.nav-cta--icon .btn-face {
  width: 44px;
  padding: 0;
}
.gh-mark {
  display: block;
  width: 20px;
  height: 20px;
  background: url('img/github-mark.png') center / contain no-repeat;
}
.li-mark {
  display: block;
  width: 18px;
  height: 18px;
  background: url('img/linkedin-mark.svg') center / contain no-repeat;
}
.frame-badge {
  padding-left: 10px;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px);
}
.mono-num {
  color: var(--surface);
  background: var(--accent);
  padding: 2px 9px 2px 7px;
  letter-spacing: 0.06em;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}

/* --- 45° chamfer: outlined boxes get a masked corner + diagonal rule -- */
.work-process,
.evidence-frame,
.mcp-interaction-card,
.diagram-box,
.skill-col,
.contact-card {
  position: relative;
}
/* The corner mask is extended by --pop-room along the same 45° line, so a
   hard shadow behind a box is chamfered too. */
.work-process::before,
.evidence-frame::before,
.mcp-interaction-card::before,
.diagram-box::before,
.skill-col::before,
.contact-card::before {
  content: "";
  position: absolute;
  top: -1px;
  right: calc(-1px - var(--pop-room, 0px));
  width: calc(var(--cut) + var(--pop-room, 0px));
  height: calc(var(--cut) + var(--pop-room, 0px));
  background:
    linear-gradient(45deg, transparent calc(50% - 0.6px), var(--cut-line) calc(50% - 0.6px) calc(50% + 0.6px), transparent calc(50% + 0.6px)) left top / var(--cut) var(--cut) no-repeat,
    linear-gradient(45deg, transparent 50%, var(--cut-bg) 50%);
  pointer-events: none;
  z-index: 3;
}
.project-entry--featured {
  --cut-bg: var(--bg-panel);
  background:
    repeating-linear-gradient(-45deg, var(--rule) 0 1px, transparent 1px 6px) left top / 100% 8px no-repeat,
    var(--bg-panel);
}

/* --- Brand mark & LED ------------------------------------------------- */
.brand-name::before {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-right: 10px;
  background: var(--accent);
  clip-path: polygon(0 0, 55% 0, 100% 45%, 100% 100%, 0 100%);
  transition: transform 0.3s steps(3, end);
}
.brand-name:hover::before,
.brand-name:focus-visible::before {
  transform: rotate(90deg);
}
.status-indicator {
  border-radius: 0;
  transform: rotate(45deg);
  animation: sh-blink 1.4s steps(1, end) infinite;
}

/* --- Header scroll progress (HUD bar) --------------------------------- */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .site-header::after {
    animation-name: sh-progress;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root block);
  }
}

/* --- Micro-typography markers ----------------------------------------- */
.mono-label::before,
.sub-heading::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  background: var(--accent);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  vertical-align: 0.04em;
}
.decision-list,
.skill-items {
  list-style: none;
  padding-left: 0;
}
.decision-list li,
.skill-items li {
  position: relative;
  padding-left: 20px;
}
.decision-list li::before,
.skill-items li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.58em;
  width: 7px;
  height: 7px;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.sh-dot { color: var(--accent); }

/* --- Barcode: real Code 128-B, scans as "/augbastos" ------------------
   145 modules at 1px each. Keep at least 10px of clear space on both
   sides and don't scale it below 1px per module, or it stops scanning. */
.sh-barcode {
  display: inline-block;
  flex-shrink: 0;
  width: 145px;
  height: 20px;
  fill: var(--ink);
  shape-rendering: crispEdges;
}
.hero-kicker .sh-barcode { margin-left: auto; }
.footer-inner .sh-barcode { height: 14px; margin-right: 16px; vertical-align: -3px; }
/* Template credit (CC BY 4.0): kept, but tiny and dimmed; full strength on hover/focus */
.footer-inner .inline-link {
  font-size: 10.5px;
  letter-spacing: 0.01em;
  opacity: 0.55;
  transition: opacity 0.2s ease, color 0.2s ease, background-size 0.28s var(--ease-out);
}
.footer-inner .inline-link:hover,
.footer-inner .inline-link:focus-visible {
  opacity: 1;
}

/* --- Section headers: index tab, accent segment, ruler ---------------- */
.section-header { position: relative; }
.section-index {
  align-self: center;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px 0 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--bg);
  background: var(--ink);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.section-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(100% - 1.25px);
  width: 72px;
  height: 4px;
  background: var(--accent);
  z-index: 1;
}
.section-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 1.5px);
  height: 6px;
  background:
    repeating-linear-gradient(90deg, var(--rule-strong) 0 1px, transparent 1px 64px) left top / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 8px) left top / 100% 3px no-repeat;
  pointer-events: none;
}

/* --- How I work: full hero width, scaled proportionally ---------------
   --u is 1px up to a 960px-wide box and grows with it (max 1.32px), so
   type, padding and gaps keep the same proportions while staying compact. */
.work-process {
  --u: clamp(1px, calc(100cqi / 960), 1.32px);
  padding: calc(10 * var(--u)) calc(12 * var(--u));
}
.work-process-head {
  font-size: calc(11.5 * var(--u));
  padding-bottom: calc(10 * var(--u));
  margin-bottom: calc(12 * var(--u));
}
.work-process-head::before {
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  margin-right: calc(8 * var(--u));
}
.work-steps { gap: calc(14 * var(--u)); }
.work-step {
  padding: calc(9 * var(--u)) calc(10 * var(--u));
  isolation: isolate;
}
.work-step:not(:last-child)::after {
  width: calc(14 * var(--u));
  font-size: calc(12 * var(--u));
}
.work-step-heading { gap: calc(4 * var(--u)); }
.work-step-heading::before {
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  border-radius: 0;
  transform: rotate(45deg);
}
.work-step-number { font-size: calc(11 * var(--u)); }
.work-step h3 { font-size: calc(11 * var(--u)); margin-top: calc(3 * var(--u)); }
.work-step p { font-size: calc(12 * var(--u)); margin-top: calc(4 * var(--u)); }
.work-process-foot {
  font-size: calc(12 * var(--u));
  margin-top: calc(10 * var(--u));
  padding-top: calc(8 * var(--u));
}

/* Pictograms: flat 45° Vectorheart marks, semi-transparent, bleeding off
   and cropped by the top-right corner of each card, behind the text. */
.sh-picto {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.sh-picto svg {
  position: absolute;
  top: calc(-16 * var(--u));
  right: calc(-16 * var(--u));
  width: calc(78 * var(--u));
  height: calc(78 * var(--u));
  color: var(--accent);
  opacity: 0.16;
  overflow: visible;
  animation: sh-picto 6s linear 2.5s 1 both;
}
.work-step:nth-child(2) .sh-picto svg { animation-delay: 2.66s; }
.work-step:nth-child(3) .sh-picto svg { animation-delay: 2.82s; }
.work-step:nth-child(4) .sh-picto svg { animation-delay: 2.98s; }
.sh-picto .p-line { fill: none; stroke: currentColor; stroke-width: 8; stroke-linecap: square; stroke-linejoin: miter; }
.sh-picto .p-fill { fill: currentColor; }
@media (max-width: 680px) {
  .sh-picto svg { width: 64px; height: 64px; top: -14px; right: -14px; }
}
@media (max-width: 680px) {
  .work-step h3 { font-size: calc(12 * var(--u)); }
}

/* --- How I work: ident choreography -----------------------------------
   Timed like a Y2K / Vectorheart TV ident: a rule draws, the box snaps
   open, cards strobe in, then one 6s pass of bars that shoot across and
   exit right, nodes that spin with overshoot, arrows that fire in
   sequence and a 45° glint. It plays once per load and rests on its
   final frame; afterwards each numbered card gives a short tube flicker
   now and then (prime-length cycles, so they rarely line up). */
.work-process { animation: sh-box-open 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0.95s both; }
.work-step { animation: sh-card-in 0.55s cubic-bezier(0.19, 1, 0.22, 1) 1.55s backwards, sh-flicker 0.6s steps(1, end) 1.55s backwards, sh-step-glitch 13s steps(1, end) 3s infinite; }
.work-step:nth-child(2) { animation-delay: 1.67s, 1.67s, 6.5s; animation-duration: 0.55s, 0.6s, 17s; }
.work-step:nth-child(3) { animation-delay: 1.79s, 1.79s, 2.2s; animation-duration: 0.55s, 0.6s, 19s; }
.work-step:nth-child(4) { animation-delay: 1.91s, 1.91s, 8.8s; animation-duration: 0.55s, 0.6s, 23s; }
.work-process-foot { animation: sh-foot-in 0.5s cubic-bezier(0.19, 1, 0.22, 1) 2.15s both; }

.work-step::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: calc(3 * var(--u));
  background: var(--accent);
  animation: sh-bar 6s linear 2.5s 1 both;
}
.work-step-heading::before { animation: sh-node 6s linear 2.5s 1 both; }
.work-step:not(:last-child)::after { animation: sh-arrow 6s linear 2.5s 1 both; }
.work-step:nth-child(2)::before,
.work-step:nth-child(2) .work-step-heading::before,
.work-step:nth-child(2):not(:last-child)::after { animation-delay: 2.66s; }
.work-step:nth-child(3)::before,
.work-step:nth-child(3) .work-step-heading::before,
.work-step:nth-child(3):not(:last-child)::after { animation-delay: 2.82s; }
.work-step:nth-child(4)::before,
.work-step:nth-child(4) .work-step-heading::before { animation-delay: 2.98s; }

.work-process::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(-60deg, transparent 0 44%, var(--accent-tint) 44% 52%, var(--accent-border) 52% 52.6%, transparent 52.6%) 120% 0 / 260% 100% no-repeat;
  animation: sh-glint 6s linear 2.5s 1 both;
}

/* --- Evidence frames: hatched HUD bar, viewfinder ---------------------- */
.frame-bar::after {
  content: "";
  order: 1;
  flex: 1 1 0;
  min-width: 0;
  height: 7px;
  margin: 0 2px;
  background: repeating-linear-gradient(-45deg, var(--ink-secondary) 0 1px, transparent 1px 4px);
  opacity: 0.5;
}
.frame-badge { order: 2; }
.frame-media-link { position: relative; }
.frame-media-link--mobile {
  background:
    repeating-linear-gradient(-45deg, var(--rule) 0 1px, transparent 1px 7px),
    var(--bg-subtle);
}
.frame-media-link::before {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(var(--accent), var(--accent)) left top / 22px 2px,
    linear-gradient(var(--accent), var(--accent)) left top / 2px 22px,
    linear-gradient(var(--accent), var(--accent)) right top / 22px 2px,
    linear-gradient(var(--accent), var(--accent)) right top / 2px 22px,
    linear-gradient(var(--accent), var(--accent)) left bottom / 22px 2px,
    linear-gradient(var(--accent), var(--accent)) left bottom / 2px 22px,
    linear-gradient(var(--accent), var(--accent)) right bottom / 22px 2px,
    linear-gradient(var(--accent), var(--accent)) right bottom / 2px 22px,
    linear-gradient(var(--accent), var(--accent)) center / 18px 1px,
    linear-gradient(var(--accent), var(--accent)) center / 1px 18px;
  background-repeat: no-repeat;
  transition: opacity 0.18s steps(2, end), inset 0.18s steps(2, end);
}
.frame-media-link:hover::before,
.frame-media-link:focus-visible::before {
  opacity: 1;
  inset: 8px;
}

/* --- Diagrams: arrowheads, data flow, marching boundary --------------- */
.sh-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.arch-svg path,
.arch-svg line,
.boundary-svg line {
  stroke-dasharray: 5 3;
  animation: sh-flow 0.9s linear infinite;
}
.arch-svg rect[stroke-dasharray],
.boundary-svg rect[stroke-dasharray] {
  animation: sh-ants 3s linear infinite;
}
.contract-stage { position: relative; }
.contract-stage:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 22px;
  top: -11px;
  width: 1px;
  height: 10px;
  background: var(--rule-strong);
}

/* --- MCP trace: terminal cursor --------------------------------------- */
.trace-turn--reply .trace-msg::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1.05em;
  margin-left: 4px;
  vertical-align: -0.17em;
  background: var(--accent);
  animation: sh-blink 1.1s steps(1, end) infinite;
}

/* --- About: node rail ------------------------------------------------- */
.ops-list { border-left: 1px solid var(--rule-strong); }
.ops-item { position: relative; padding-left: 22px; }
.ops-item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 21px;
  width: 9px;
  height: 9px;
  background: var(--bg);
  border: 1px solid var(--accent);
  transform: rotate(45deg);
}
.ops-item:first-child::before { background: var(--accent); }

/* --- Contact: hazard band --------------------------------------------- */
.contact-card {
  background:
    repeating-linear-gradient(-45deg, var(--accent) 0 2px, transparent 2px 7px) left top / 100% 6px no-repeat,
    var(--surface);
}

/* --- Shadow-pop: hard offset shadows ----------------------------------
   Contact cards sit on a permanent 6px shadow (final CTA). Screenshot
   frames and How-I-Work steps lift on hover/focus. */
.contact-card {
  --pop-room: 6px;
  box-shadow: 6px 6px 0 var(--ink);
}
.evidence-frame {
  --pop-room: 6px;
  transition: transform 0.18s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.18s cubic-bezier(0.19, 1, 0.22, 1);
}
.evidence-frame:hover,
.evidence-frame:focus-within {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--ink);
}
.work-step {
  transition: transform 0.18s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.18s cubic-bezier(0.19, 1, 0.22, 1), border-color 0.2s ease;
}
.work-step:hover,
.work-step:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--accent);
}

/* --- Hero: type-on, ticker -------------------------------------------- */
.hero { position: relative; }

/* Load sequence: every block powers on with a tube-style flicker */
.brand-group { animation: sh-flicker 0.7s steps(1, end) 0.05s both; }
.site-nav { animation: sh-flicker 0.7s steps(1, end) 0.2s both; }
.hero-kicker { animation: sh-flicker 0.7s steps(1, end) 0.3s both; }
.hero h1 { animation: sh-type 0.9s steps(14, end) 0.1s both, sh-flicker 0.8s steps(1, end) 0.1s both; }
.hero-sub { animation: sh-rise 0.45s steps(5, end) 0.75s both, sh-flicker 0.6s steps(1, end) 0.75s both; }
.hero-actions { animation: sh-rise 0.45s steps(5, end) 0.9s both, sh-flicker 0.6s steps(1, end) 0.9s both; }
.work-process-head { animation: sh-flicker 0.6s steps(1, end) 1.3s both; }

.sh-has-ticker .hero { padding-bottom: 0; border-bottom: 0; }
.sh-ticker {
  position: relative;
  margin-top: 72px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 32px;
  overflow: hidden;
  animation: sh-flicker 0.7s steps(1, end) 2.1s both;
  background: var(--ink);
  color: var(--bg);
  display: flex;
  align-items: center;
}
.sh-ticker::before,
.sh-ticker::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44px;
  z-index: 1;
  background: repeating-linear-gradient(-45deg, var(--bg) 0 2px, transparent 2px 7px), var(--ink);
}
.sh-ticker::before { left: 0; }
.sh-ticker::after { right: 0; }
.sh-ticker-scan {
  position: absolute;
  top: 50%;
  left: 44px;
  width: 72px;
  height: 2px;
  margin-top: -1px;
  background: var(--bg);
  opacity: 0;
  animation: sh-scanbar 6s linear 2.5s infinite both;
}

/* --- Scroll entrances: stepped wipe + flicker -------------------------
   The logic class adds .sh-io once its IntersectionObserver is running and
   .is-in to each block as it enters the viewport. [data-rv] animates the
   block itself; [data-rvg] staggers its children. Without JS, with Motion
   off or with reduced motion, nothing is hidden. */
.sh-io [data-rv]:not(.is-in),
.sh-io [data-rvg]:not(.is-in) > * {
  opacity: 0;
}
.sh-io [data-rv].is-in,
.sh-io [data-rvg].is-in > * {
  animation: sh-wipe 0.5s steps(6, end) both, sh-flicker 0.7s steps(1, end) both;
}
.sh-io [data-rvg].is-in > :nth-child(2) { animation-delay: 0.12s; }
.sh-io [data-rvg].is-in > :nth-child(3) { animation-delay: 0.24s; }
.sh-io [data-rvg].is-in > :nth-child(4) { animation-delay: 0.36s; }
.sh-io .section-header.is-in::before {
  transform-origin: 0 50%;
  animation: sh-grow 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0.3s both;
}
.sh-io .section-header.is-in::after {
  animation: sh-flicker 0.7s steps(1, end) 0.2s both;
}

/* --- Keyframes -------------------------------------------------------- */
@keyframes sh-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.18; } }
@keyframes sh-spin { to { transform: rotate(360deg); } }
@keyframes sh-progress { to { transform: scaleX(1); } }
@keyframes sh-flow { from { stroke-dashoffset: 8; } to { stroke-dashoffset: 0; } }
@keyframes sh-ants { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -14; } }
@keyframes sh-scan { from { top: 0; } to { top: calc(100% - 2px); } }
@keyframes sh-box-open {
  0% { clip-path: inset(0 100% calc(100% - 2px) 0); }
  38% { clip-path: inset(0 0 calc(100% - 2px) 0); }
  100% { clip-path: inset(-24px -24px -24px -24px); }
}
@keyframes sh-card-in {
  0% { opacity: 0; transform: translateX(-28px); }
  30% { opacity: 1; }
  40% { opacity: 0.15; }
  50% { opacity: 1; transform: translateX(3px); }
  100% { opacity: 1; transform: none; }
}
@keyframes sh-foot-in {
  from { clip-path: inset(-4px 100% -4px 0); }
  to { clip-path: inset(-4px -4px -4px 0); }
}
@keyframes sh-bar {
  0% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  7% { clip-path: inset(0 0 0 0); opacity: 1; }
  8% { opacity: 0.15; }
  9.5% { opacity: 1; }
  10.5% { opacity: 0.3; }
  12% { opacity: 1; }
  60% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1); }
  67%, 100% { clip-path: inset(0 0 0 100%); }
}
@keyframes sh-node {
  0% { transform: rotate(45deg) scale(1); }
  5% { transform: rotate(45deg) scale(1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  12% { transform: rotate(225deg) scale(1.35); background: var(--ink); }
  18%, 100% { transform: rotate(225deg) scale(1); background: var(--accent); }
}
@keyframes sh-picto {
  0% { transform: none; opacity: 0.16; }
  5% { transform: translate(6px, -6px); opacity: 0.34; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  14%, 100% { transform: none; opacity: 0.16; }
}
@keyframes sh-arrow {
  0%, 6% { opacity: 0.55; transform: translateX(0); color: var(--ink-secondary); }
  8% { opacity: 1; transform: translateX(3px); color: var(--accent); }
  20% { opacity: 1; transform: translateX(0); color: var(--accent); }
  30%, 100% { opacity: 0.55; transform: translateX(0); color: var(--ink-secondary); }
}
@keyframes sh-glint {
  0%, 70% { background-position: 100% 0; animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1); }
  80%, 100% { background-position: 0% 0; }
}
@keyframes sh-scanbar {
  0%, 69% { left: 44px; opacity: 0; }
  70% { left: 44px; opacity: 1; animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1); }
  71% { opacity: 0.2; }
  72% { opacity: 1; }
  73% { opacity: 0.35; }
  74% { opacity: 1; }
  80% { left: calc(100% - 116px); opacity: 1; }
  81%, 100% { left: calc(100% - 116px); opacity: 0; }
}
@keyframes sh-type {
  from { clip-path: inset(-12% 100% -12% 0); }
  to { clip-path: inset(-12% -4% -12% 0); }
}
@keyframes sh-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes sh-wipe {
  from { clip-path: inset(-24px -24px 100% -24px); }
  to { clip-path: inset(-24px); }
}
@keyframes sh-step-glitch {
  0%, 40% { opacity: 1; }
  40.4% { opacity: 0.22; }
  40.9% { opacity: 1; }
  41.3% { opacity: 0.5; }
  41.7%, 100% { opacity: 1; }
}
@keyframes sh-flicker {
  0% { opacity: 0; }
  10% { opacity: 1; }
  16% { opacity: 0.08; }
  26% { opacity: 0.85; }
  32% { opacity: 0.15; }
  44% { opacity: 1; }
  52% { opacity: 0.45; }
  60%, 100% { opacity: 1; }
}
@keyframes sh-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Motion switch (Tweaks) */
.sh-still *,
.sh-still *::before,
.sh-still *::after {
  animation: none !important;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (1240px, 1080px, 768px, 680px, 480px, 359px)
   ========================================================================== */
@media (max-width: 1080px) {
  .hero-grid,
  .project-top,
  .split-showcase,
  .protocol-stage,
  .project-bottom,
  .about-grid,
  .skills-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .hero-copy,
  .project-identity,
  .project-facts,
  .decisions-block,
  .project-links-panel,
  .about-prose,
  .about-timeline,
  .split-showcase > .evidence-frame,
  .split-showcase > .diagram-box--stacked,
  .protocol-stage > .mcp-interaction-card,
  .protocol-stage > .diagram-box--stacked {
    grid-column: 1 / -1;
  }

  .evidence-frame--main {
    grid-column: 1 / 9;
  }

  .evidence-frame--mobile {
    grid-column: 9 / 13;
  }
}

@media (max-width: 768px) {
  .sh-root {
    font-size: 16px;
  }

  .header-inner {
    padding-top: 6px;
    padding-bottom: 6px;
    gap: 4px 12px;
  }

  .brand-role,
  .nav-cta {
    display: none;
  }

  .site-nav {
    gap: 4px 14px;
  }

  .hero {
    padding: 24px 0 56px;
  }

  .hero-kicker {
    margin-bottom: 20px;
  }

  .hero-kicker .sh-barcode {
    display: none;
  }

  .sh-ticker {
    margin-top: 48px;
  }

  .section-block,
  .site-footer {
    margin-top: 68px;
  }

  .project-entry {
    padding: 44px 0;
  }

  .project-entry--featured {
    margin-left: -16px;
    margin-right: -16px;
    padding: 44px 16px;
  }

  .media-stage--pair,
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .evidence-frame--main,
  .evidence-frame--mobile {
    grid-column: 1 / -1;
  }

  .frame-media-link--mobile img {
    max-width: 200px;
  }

  .fact-row,
  .about-meta-list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

@media (max-width: 680px) {
  .section-block,
  .site-footer {
    margin-top: 64px;
  }

  .evidence-frame--mobile,
  .decisions-block > .sub-heading {
    display: none;
  }

  .project-disclosure > summary {
    display: list-item;
  }

  .project-disclosure[open] > summary {
    margin-bottom: 12px;
  }

  .project-entry,
  .project-entry--featured {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .arch-svg,
  .boundary-svg {
    display: none;
  }

  .mobile-arch-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  main,
  .site-footer,
  .header-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .header-inner {
    flex-wrap: wrap;
  }

  .brand-name {
    font-size: 17.5px;
    min-height: 44px;
  }

  .site-nav {
    gap: 2px 12px;
  }

  .nav-link {
    font-size: 13.5px;
  }

  .hero {
    padding: 18px 0 16px;
  }

  .hero-kicker {
    margin-bottom: 16px;
    padding-bottom: 10px;
  }

  .hero-copy {
    gap: 14px;
  }

  h1 {
    font-size: clamp(32px, 8.8vw, 40px);
  }

  .hero-actions {
    gap: 10px;
  }

  .hero-actions .btn {
    flex: 1 1 140px;
    padding: 0;
  }

  .hero-actions .btn-face {
    padding: 10px 14px;
  }

  .hero-actions .btn-secondary .btn-face {
    padding: 11px 15px;
  }

  .sh-ticker {
    margin-top: 28px;
  }

  .frame-bar::after {
    display: none;
  }

  .contact-card,
  .skill-col,
  .diagram-box,
  .mcp-trace-body {
    padding: 16px;
  }
}

@media (max-width: 359px) {
  .hero-actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  a:hover .ext,
  a:hover .arrow {
    transform: none !important;
  }
}

.hero-grid--single { grid-template-columns: minmax(0, 1fr); }
.hero-grid--single .hero-copy { max-width: none; container-type: inline-size; }
.hero-grid--single .hero-copy > h1 { max-width: 760px; }

/* ==========================================================================
   PROPORTION & RESPONSIVE HARDENING
   ========================================================================== */
/* Side-by-side media rows: the main screenshot sets the row height and the
   phone frame fits inside it, so no frame ever gets an empty white gap. */
@media (min-width: 769px) {
  .evidence-frame--mobile { contain: size; }
  .evidence-frame--mobile .frame-media-link--mobile {
    min-height: 0;
    overflow: hidden;
  }
  .evidence-frame--mobile .frame-media-link--mobile img {
    width: auto;
    max-width: min(240px, 100%);
    height: auto;
    max-height: 100%;
    object-fit: contain;
  }
}
/* Screenshot + diagram rows: each column keeps its natural height. */
.split-showcase,
.protocol-stage {
  align-items: start;
}
/* Container-query fallback for the How-I-Work scale. */
@supports not (width: 1cqi) {
  .work-process { --u: 1px; }
}
/* Header stays on one row on tablets and small laptops. */
@media (max-width: 1080px) {
  .brand-role { display: none; }
}
/* Wide diagrams switch to the step list before their text gets too small. */
@media (max-width: 900px) {
  .arch-svg { display: none; }
  .arch-svg ~ .mobile-arch-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}
/* How I Work: 2×2 on tablets in portrait, single column on tiny phones. */
@media (max-width: 820px) {
  .work-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-step:nth-child(2)::after { content: none; }
}
@media (max-width: 359px) {
  .work-steps { grid-template-columns: minmax(0, 1fr); }
  .work-step:not(:last-child)::after { content: none; }
}
/* Touch screens: no sticky hover lifts or HUD overlays after a tap. */
@media (hover: none) {
  .evidence-frame:hover,
  .evidence-frame:focus-within,
  .work-step:hover {
    transform: none;
    box-shadow: none;
  }
  .frame-media-link:hover::before { opacity: 0; }
  .btn:hover,
  .nav-cta:hover { --pop: 3px; }
  .btn:hover .btn-face,
  .nav-cta:hover .btn-face { transform: none; }
}

/* ==========================================================================
   SWISSHEART · ART LAYER (v6)
   From the reference board: technical wireframe plates and perspective fans,
   stepped isometric blocks, spec-sheet micro-type with ▲ markers, 5×7
   dot-matrix columns, menu indices, hatched numerals, flat 45° shards and
   circuit traces with circle terminals. Palette and fonts: the tokens above.
   ========================================================================== */

/* --- Hero plate: FIG. 01 agent action stack ---------------------------- */
.hero-grid--single { position: relative; }
.sh-plate {
  position: absolute;
  top: 4px;
  right: 0;
  width: clamp(240px, calc(100% - 800px), 480px);
  aspect-ratio: 480 / 300;
  pointer-events: none;
  user-select: none;
}
.sh-plate-svg { display: block; width: 100%; height: 100%; }
@media (max-width: 1199px) { .sh-plate { display: none; } }

.pl-frame { animation: sh-flicker 0.7s steps(1, end) 0.25s backwards; }
.pl-fan path {
  stroke-dasharray: 1;
  animation: pl-draw 0.7s steps(7, end) 0.3s backwards;
}
.pl-fan path:nth-child(2) { animation-delay: 0.335s; }
.pl-fan path:nth-child(3) { animation-delay: 0.37s; }
.pl-fan path:nth-child(4) { animation-delay: 0.405s; }
.pl-fan path:nth-child(5) { animation-delay: 0.44s; }
.pl-fan path:nth-child(6) { animation-delay: 0.475s; }
.pl-fan path:nth-child(7) { animation-delay: 0.51s; }
.pl-fan path:nth-child(8) { animation-delay: 0.545s; }
.pl-fan path:nth-child(9) { animation-delay: 0.58s; }
.pl-fan path:nth-child(10) { animation-delay: 0.615s; }
.pl-fan path:nth-child(11) { animation-delay: 0.65s; }
.pl-fan path:nth-child(12) { animation-delay: 0.685s; }
.pl-fan path:nth-child(13) { animation-delay: 0.72s; }
.pl-fan path:nth-child(14) { animation-delay: 0.755s; }
.pl-fan path:nth-child(15) { animation-delay: 0.79s; }
.pl-disc { animation: sh-flicker 0.7s steps(1, end) 0.6s backwards; }
.pl-slab { animation: pl-drop 0.55s steps(5, end) 0.75s backwards; }
.pl-slab:nth-child(2) { animation-delay: 0.9s; }
.pl-slab:nth-child(3) { animation-delay: 1.05s; }
.pl-slab:nth-child(4) { animation-delay: 1.2s; }
/* Punched paper tape (5-hole ITA2, spells AUGUSTO BASTOS AI ENGINEER):
   one 27-row period is 243 units; the strip feeds down past the read head
   in a slow loop. Still / reduced motion: it simply stops. */
.pl-tape { animation: sh-flicker 0.7s steps(1, end) 1.1s backwards; }
.pl-tape-feed { animation: pl-feed 48s linear 1.1s infinite; }
.pl-head { animation: sh-flicker 0.6s steps(1, end) 1.4s backwards; }
.pl-bound { animation: sh-flicker 0.7s steps(1, end) 1.45s backwards; }
.pl-bound path { animation: sh-ants 3s linear infinite; }
.pl-labels > g { animation: sh-flicker 0.6s steps(1, end) 1.5s backwards; }
.pl-labels > g:nth-child(2) { animation-delay: 1.62s; }
.pl-labels > g:nth-child(3) { animation-delay: 1.74s; }
.pl-labels > g:nth-child(4) { animation-delay: 1.86s; }
.pl-live { animation: sh-blink 1.4s steps(1, end) infinite; }
.pl-shards { animation: pl-shard 0.5s steps(4, end) 1.9s backwards; }
.pl-out path {
  stroke-dasharray: 1;
  animation: pl-draw 0.6s steps(6, end) 2.05s backwards;
}
.pl-out rect { animation: sh-flicker 0.5s steps(1, end) 2.05s backwards; }
.pl-out circle { animation: sh-flicker 0.5s steps(1, end) 2.6s backwards; }
.pl-chevs polygon { animation: pl-chev 6s linear 2.5s infinite both; }
.pl-chevs polygon:nth-child(2) { animation-delay: 2.66s; }
.pl-chevs polygon:nth-child(3) { animation-delay: 2.82s; }

@keyframes pl-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes pl-drop {
  0% { opacity: 0; transform: translateY(-22px); }
  30% { opacity: 1; }
  45% { opacity: 0.2; }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes pl-shard {
  from { opacity: 0; transform: translate(-14px, 14px); }
  to { opacity: 1; transform: none; }
}
@keyframes pl-feed {
  from { transform: translateY(-243px); }
  to { transform: translateY(0); }
}
@keyframes pl-chev {
  0%, 6% { opacity: 1; }
  8% { opacity: 0.2; }
  10% { opacity: 1; }
  12% { opacity: 0.3; }
  14%, 100% { opacity: 1; }
}

/* ==========================================================================
   HERO ROTATION — one of six plates is picked at random on each load
   (never the same one twice in a row). Tweak "variant" pins one.
   ========================================================================== */
/* --- Hero E2 · Systems, connected: art layer --- */
@keyframes e2-drop-k {
  0% { opacity: 0; transform: translateY(-24px); }
  40% { opacity: 1; }
  55% { opacity: 0.3; }
  70% { opacity: 1; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.e2-drop { animation: e2-drop-k 0.6s steps(6, end) 0.2s backwards; }
.e2-d1 { animation-delay: 0.35s; }
.e2-d2 { animation-delay: 0.5s; }
.e2-d3 { animation-delay: 0.65s; }
.e2-d4 { animation-delay: 0.8s; }
.e2-d5 { animation-delay: 0.95s; }
.e2-bound { animation: sh-ants 3s linear infinite; }
@keyframes e2-lamp-k {
  0% { opacity: 0.15; }
  8% { opacity: 1; }
  30% { opacity: 1; }
  38% { opacity: 0.15; }
  100% { opacity: 0.15; }
}
.e2-lamp0 { animation: e2-lamp-k 1.5s steps(1, end) 0.00s infinite; }
.e2-lamp1 { animation: e2-lamp-k 1.5s steps(1, end) 0.15s infinite; }
.e2-lamp2 { animation: e2-lamp-k 1.5s steps(1, end) 0.30s infinite; }
.e2-lamp3 { animation: e2-lamp-k 1.5s steps(1, end) 0.45s infinite; }
.e2-lamp4 { animation: e2-lamp-k 1.5s steps(1, end) 0.60s infinite; }
.e2-beacon { animation: sh-blink 0.9s steps(1, end) infinite; }
@keyframes e2-sweep-k {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.e2-sweep { animation: e2-sweep-k 2.6s linear infinite; }
@keyframes e2-hit-k {
  0% { opacity: 0; }
  6% { opacity: 1; }
  40% { opacity: 1; }
  46% { opacity: 0; }
  100% { opacity: 0; }
}
.e2-hit0 { opacity: 0; animation: e2-hit-k 2.6s steps(1, end) 0.00s infinite; }
.e2-hit1 { opacity: 0; animation: e2-hit-k 2.6s steps(1, end) 0.43s infinite; }
.e2-hit2 { opacity: 0; animation: e2-hit-k 2.6s steps(1, end) 0.86s infinite; }
.e2-hit3 { opacity: 0; animation: e2-hit-k 2.6s steps(1, end) 1.29s infinite; }
.e2-hit4 { opacity: 0; animation: e2-hit-k 2.6s steps(1, end) 1.72s infinite; }
.e2-hit5 { opacity: 0; animation: e2-hit-k 2.6s steps(1, end) 2.15s infinite; }
@keyframes e2-cap-k {
  0% { transform: translateY(0px); }
  40% { transform: translateY(0px); }
  50% { transform: translateY(20.8px); }
  85% { transform: translateY(20.8px); }
  95% { transform: translateY(0px); }
  100% { transform: translateY(0px); }
}
.e2-cap { animation: e2-cap-k 2.2s steps(4, end) infinite; }
@keyframes e2-shaft-k {
  0% { transform: scaleY(1); }
  40% { transform: scaleY(1); }
  50% { transform: scaleY(0.24); }
  85% { transform: scaleY(0.24); }
  95% { transform: scaleY(1); }
  100% { transform: scaleY(1); }
}
.e2-shaft { transform-box: fill-box; transform-origin: 50% 100%; animation: e2-shaft-k 2.2s steps(4, end) infinite; }
@keyframes e2-crate-k {
  0% { opacity: 0; transform: translate(0px, 0px); }
  6% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translate(58.2px, 33.6px); }
}
.e2-crate0 { animation: e2-crate-k 4s linear 0.0s infinite; }
.e2-crate1 { animation: e2-crate-k 4s linear -1.0s infinite; }
.e2-crate2 { animation: e2-crate-k 4s linear -2.0s infinite; }
.e2-crate3 { animation: e2-crate-k 4s linear -3.0s infinite; }
@keyframes e2-pk0-k {
  0% { opacity: 0; transform: translate(0px, 0px); }
  5% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translate(6.9px, 4.0px); }
}
.e2-pk0 { animation: e2-pk0-k 0.70s linear 0.0s infinite; }
@keyframes e2-pk1-k {
  0% { opacity: 0; transform: translate(0px, 0px); }
  5% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translate(16.6px, 9.6px); }
}
.e2-pk1 { animation: e2-pk1-k 0.95s linear 0.2s infinite; }
@keyframes e2-pk2-k {
  0% { opacity: 0; transform: translate(0px, 0px); }
  5% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translate(34.6px, -20.0px); }
}
.e2-pk2 { animation: e2-pk2-k 1.20s linear 0.4s infinite; }
@keyframes e2-evt-k {
  0% { opacity: 0; transform: translate(0px, 0px); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translate(8px, -40px); }
}
.e2-evt0 { opacity: 0; animation: e2-evt-k 2.5s steps(8, end) 0.0s infinite; }
.e2-evt1 { opacity: 0; animation: e2-evt-k 2.5s steps(8, end) 0.5s infinite; }
.e2-evt2 { opacity: 0; animation: e2-evt-k 2.5s steps(8, end) 1.0s infinite; }
.e2-evt3 { opacity: 0; animation: e2-evt-k 2.5s steps(8, end) 1.5s infinite; }
.e2-evt4 { opacity: 0; animation: e2-evt-k 2.5s steps(8, end) 2.0s infinite; }
.e2-tag { animation: sh-flicker 0.6s steps(1, end) 1.3s backwards; }
/* --- Hero J2 · Documents to answer: art layer --- */
@keyframes j2-s0-k {
  0% { opacity: 0; transform: translate(-52.0px, -30.0px); }
  2.5% { opacity: 0; transform: translate(-52.0px, -30.0px); }
  11.25% { opacity: 1; transform: translate(0px, 0px); }
  77.5% { opacity: 1; transform: translate(0px, 0px); }
  86.25% { opacity: 0; transform: translate(52.0px, 30.0px); }
  100% { opacity: 0; transform: translate(52.0px, 30.0px); }
}
.j2-s0 { animation: j2-s0-k 8s cubic-bezier(0.7, 0, 0.2, 1) infinite; }
@keyframes j2-t0-k {
  0% { transform: scaleX(0); }
  12.5% { transform: scaleX(0); }
  20% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
.j2-type0 { transform-box: fill-box; transform-origin: 0% 50%; animation: j2-t0-k 8s steps(8, end) infinite; }
@keyframes j2-d0-k {
  0% { opacity: 0; }
  17.5% { opacity: 0; }
  18.75% { opacity: 1; }
  20% { opacity: 0.2; }
  21.25% { opacity: 1; }
  76.25% { opacity: 1; }
  78.75% { opacity: 0; }
  100% { opacity: 0; }
}
.j2-drop0 { animation: j2-d0-k 8s steps(1, end) infinite; }
@keyframes j2-ix0-k {
  0% { opacity: 0.25; }
  12.5% { opacity: 0.25; }
  13.75% { opacity: 1; }
  78.75% { opacity: 1; }
  80% { opacity: 0.25; }
  100% { opacity: 0.25; }
}
.j2-ix0 { animation: j2-ix0-k 8s steps(1, end) infinite; }
@keyframes j2-s1-k {
  0% { opacity: 0; transform: translate(-52.0px, -30.0px); }
  5.625% { opacity: 0; transform: translate(-52.0px, -30.0px); }
  14.375% { opacity: 1; transform: translate(0px, 0px); }
  79.375% { opacity: 1; transform: translate(0px, 0px); }
  88.125% { opacity: 0; transform: translate(52.0px, 30.0px); }
  100% { opacity: 0; transform: translate(52.0px, 30.0px); }
}
.j2-s1 { animation: j2-s1-k 8s cubic-bezier(0.7, 0, 0.2, 1) infinite; }
@keyframes j2-t1-k {
  0% { transform: scaleX(0); }
  15.625% { transform: scaleX(0); }
  23.125% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
.j2-type1 { transform-box: fill-box; transform-origin: 0% 50%; animation: j2-t1-k 8s steps(8, end) infinite; }
@keyframes j2-d1-k {
  0% { opacity: 0; }
  20.625% { opacity: 0; }
  21.875% { opacity: 1; }
  23.125% { opacity: 0.2; }
  24.375% { opacity: 1; }
  76.25% { opacity: 1; }
  78.75% { opacity: 0; }
  100% { opacity: 0; }
}
.j2-drop1 { animation: j2-d1-k 8s steps(1, end) infinite; }
@keyframes j2-ix1-k {
  0% { opacity: 0.25; }
  15.625% { opacity: 0.25; }
  16.875% { opacity: 1; }
  78.75% { opacity: 1; }
  80% { opacity: 0.25; }
  100% { opacity: 0.25; }
}
.j2-ix1 { animation: j2-ix1-k 8s steps(1, end) infinite; }
@keyframes j2-s2-k {
  0% { opacity: 0; transform: translate(-52.0px, -30.0px); }
  8.75% { opacity: 0; transform: translate(-52.0px, -30.0px); }
  17.5% { opacity: 1; transform: translate(0px, 0px); }
  81.25% { opacity: 1; transform: translate(0px, 0px); }
  90% { opacity: 0; transform: translate(52.0px, 30.0px); }
  100% { opacity: 0; transform: translate(52.0px, 30.0px); }
}
.j2-s2 { animation: j2-s2-k 8s cubic-bezier(0.7, 0, 0.2, 1) infinite; }
@keyframes j2-t2-k {
  0% { transform: scaleX(0); }
  18.75% { transform: scaleX(0); }
  26.25% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
.j2-type2 { transform-box: fill-box; transform-origin: 0% 50%; animation: j2-t2-k 8s steps(8, end) infinite; }
@keyframes j2-d2-k {
  0% { opacity: 0; }
  23.75% { opacity: 0; }
  25% { opacity: 1; }
  26.25% { opacity: 0.2; }
  27.5% { opacity: 1; }
  76.25% { opacity: 1; }
  78.75% { opacity: 0; }
  100% { opacity: 0; }
}
.j2-drop2 { animation: j2-d2-k 8s steps(1, end) infinite; }
@keyframes j2-ix2-k {
  0% { opacity: 0.25; }
  18.75% { opacity: 0.25; }
  20% { opacity: 1; }
  78.75% { opacity: 1; }
  80% { opacity: 0.25; }
  100% { opacity: 0.25; }
}
.j2-ix2 { animation: j2-ix2-k 8s steps(1, end) infinite; }
@keyframes j2-s3-k {
  0% { opacity: 0; transform: translate(-52.0px, -30.0px); }
  11.875% { opacity: 0; transform: translate(-52.0px, -30.0px); }
  20.625% { opacity: 1; transform: translate(0px, 0px); }
  83.125% { opacity: 1; transform: translate(0px, 0px); }
  91.875% { opacity: 0; transform: translate(52.0px, 30.0px); }
  100% { opacity: 0; transform: translate(52.0px, 30.0px); }
}
.j2-s3 { animation: j2-s3-k 8s cubic-bezier(0.7, 0, 0.2, 1) infinite; }
@keyframes j2-t3-k {
  0% { transform: scaleX(0); }
  21.875% { transform: scaleX(0); }
  29.375% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
.j2-type3 { transform-box: fill-box; transform-origin: 0% 50%; animation: j2-t3-k 8s steps(8, end) infinite; }
@keyframes j2-d3-k {
  0% { opacity: 0; }
  26.875% { opacity: 0; }
  28.125% { opacity: 1; }
  29.375% { opacity: 0.2; }
  30.625% { opacity: 1; }
  76.25% { opacity: 1; }
  78.75% { opacity: 0; }
  100% { opacity: 0; }
}
.j2-drop3 { animation: j2-d3-k 8s steps(1, end) infinite; }
@keyframes j2-ix3-k {
  0% { opacity: 0.25; }
  21.875% { opacity: 0.25; }
  23.125% { opacity: 1; }
  78.75% { opacity: 1; }
  80% { opacity: 0.25; }
  100% { opacity: 0.25; }
}
.j2-ix3 { animation: j2-ix3-k 8s steps(1, end) infinite; }
.j2-cite { animation: sh-blink 0.8s steps(1, end) infinite; }
/* --- Hero N2 · Built with limits: art layer --- */
@keyframes n2-p0-k {
  0% { opacity: 0; transform: translate(0.0px, -73.8px); }
  1.875% { opacity: 0; transform: translate(0.0px, -73.8px); }
  7.5% { opacity: 1; transform: translate(0px, 0px); }
  89% { opacity: 1; transform: translate(0px, 0px); }
  95.25% { opacity: 0; transform: translate(0.0px, -73.8px); }
  100% { opacity: 0; transform: translate(0.0px, -73.8px); }
}
.n2-p0 { animation: n2-p0-k 8s cubic-bezier(0.2, 0.9, 0.2, 1) infinite; }
@keyframes n2-p3-k {
  0% { opacity: 0; transform: translate(63.9px, 36.9px); }
  3% { opacity: 0; transform: translate(63.9px, 36.9px); }
  8.625% { opacity: 1; transform: translate(0px, 0px); }
  88.5% { opacity: 1; transform: translate(0px, 0px); }
  94.75% { opacity: 0; transform: translate(63.9px, 36.9px); }
  100% { opacity: 0; transform: translate(63.9px, 36.9px); }
}
.n2-p3 { animation: n2-p3-k 8s cubic-bezier(0.2, 0.9, 0.2, 1) infinite; }
@keyframes n2-p4-k {
  0% { opacity: 0; transform: translate(63.9px, -36.9px); }
  4.125% { opacity: 0; transform: translate(63.9px, -36.9px); }
  9.75% { opacity: 1; transform: translate(0px, 0px); }
  88% { opacity: 1; transform: translate(0px, 0px); }
  94.25% { opacity: 0; transform: translate(63.9px, -36.9px); }
  100% { opacity: 0; transform: translate(63.9px, -36.9px); }
}
.n2-p4 { animation: n2-p4-k 8s cubic-bezier(0.2, 0.9, 0.2, 1) infinite; }
@keyframes n2-p17-k {
  0% { opacity: 0; transform: translate(-63.9px, 36.9px); }
  5.25% { opacity: 0; transform: translate(-63.9px, 36.9px); }
  10.875% { opacity: 1; transform: translate(0px, 0px); }
  87.5% { opacity: 1; transform: translate(0px, 0px); }
  93.75% { opacity: 0; transform: translate(-63.9px, 36.9px); }
  100% { opacity: 0; transform: translate(-63.9px, 36.9px); }
}
.n2-p17 { animation: n2-p17-k 8s cubic-bezier(0.2, 0.9, 0.2, 1) infinite; }
@keyframes n2-p12-k {
  0% { opacity: 0; transform: translate(0.0px, -73.8px); }
  6.375% { opacity: 0; transform: translate(0.0px, -73.8px); }
  12% { opacity: 1; transform: translate(0px, 0px); }
  87% { opacity: 1; transform: translate(0px, 0px); }
  93.25% { opacity: 0; transform: translate(0.0px, -73.8px); }
  100% { opacity: 0; transform: translate(0.0px, -73.8px); }
}
.n2-p12 { animation: n2-p12-k 8s cubic-bezier(0.2, 0.9, 0.2, 1) infinite; }
@keyframes n2-p5-k {
  0% { opacity: 0; transform: translate(63.9px, 36.9px); }
  7.5% { opacity: 0; transform: translate(63.9px, 36.9px); }
  13.125% { opacity: 1; transform: translate(0px, 0px); }
  86.5% { opacity: 1; transform: translate(0px, 0px); }
  92.75% { opacity: 0; transform: translate(63.9px, 36.9px); }
  100% { opacity: 0; transform: translate(63.9px, 36.9px); }
}
.n2-p5 { animation: n2-p5-k 8s cubic-bezier(0.2, 0.9, 0.2, 1) infinite; }
@keyframes n2-p6-k {
  0% { opacity: 0; transform: translate(63.9px, -36.9px); }
  8.625% { opacity: 0; transform: translate(63.9px, -36.9px); }
  14.25% { opacity: 1; transform: translate(0px, 0px); }
  86% { opacity: 1; transform: translate(0px, 0px); }
  92.25% { opacity: 0; transform: translate(63.9px, -36.9px); }
  100% { opacity: 0; transform: translate(63.9px, -36.9px); }
}
.n2-p6 { animation: n2-p6-k 8s cubic-bezier(0.2, 0.9, 0.2, 1) infinite; }
@keyframes n2-p1-k {
  0% { opacity: 0; transform: translate(0.0px, -73.8px); }
  9.75% { opacity: 0; transform: translate(0.0px, -73.8px); }
  15.375% { opacity: 1; transform: translate(0px, 0px); }
  85.5% { opacity: 1; transform: translate(0px, 0px); }
  91.75% { opacity: 0; transform: translate(0.0px, -73.8px); }
  100% { opacity: 0; transform: translate(0.0px, -73.8px); }
}
.n2-p1 { animation: n2-p1-k 8s cubic-bezier(0.2, 0.9, 0.2, 1) infinite; }
@keyframes n2-p2-k {
  0% { opacity: 0; transform: translate(0.0px, -73.8px); }
  10.875% { opacity: 0; transform: translate(0.0px, -73.8px); }
  16.5% { opacity: 1; transform: translate(0px, 0px); }
  85% { opacity: 1; transform: translate(0px, 0px); }
  91.25% { opacity: 0; transform: translate(0.0px, -73.8px); }
  100% { opacity: 0; transform: translate(0.0px, -73.8px); }
}
.n2-p2 { animation: n2-p2-k 8s cubic-bezier(0.2, 0.9, 0.2, 1) infinite; }
@keyframes n2-p9-k {
  0% { opacity: 0; transform: translate(-63.9px, 36.9px); }
  12% { opacity: 0; transform: translate(-63.9px, 36.9px); }
  17.625% { opacity: 1; transform: translate(0px, 0px); }
  84.5% { opacity: 1; transform: translate(0px, 0px); }
  90.75% { opacity: 0; transform: translate(-63.9px, 36.9px); }
  100% { opacity: 0; transform: translate(-63.9px, 36.9px); }
}
.n2-p9 { animation: n2-p9-k 8s cubic-bezier(0.2, 0.9, 0.2, 1) infinite; }
@keyframes n2-p10-k {
  0% { opacity: 0; transform: translate(-63.9px, -36.9px); }
  13.125% { opacity: 0; transform: translate(-63.9px, -36.9px); }
  18.75% { opacity: 1; transform: translate(0px, 0px); }
  84% { opacity: 1; transform: translate(0px, 0px); }
  90.25% { opacity: 0; transform: translate(-63.9px, -36.9px); }
  100% { opacity: 0; transform: translate(-63.9px, -36.9px); }
}
.n2-p10 { animation: n2-p10-k 8s cubic-bezier(0.2, 0.9, 0.2, 1) infinite; }
@keyframes n2-p14-k {
  0% { opacity: 0; transform: translate(-63.9px, 36.9px); }
  14.25% { opacity: 0; transform: translate(-63.9px, 36.9px); }
  19.875% { opacity: 1; transform: translate(0px, 0px); }
  83.5% { opacity: 1; transform: translate(0px, 0px); }
  89.75% { opacity: 0; transform: translate(-63.9px, 36.9px); }
  100% { opacity: 0; transform: translate(-63.9px, 36.9px); }
}
.n2-p14 { animation: n2-p14-k 8s cubic-bezier(0.2, 0.9, 0.2, 1) infinite; }
@keyframes n2-p15-k {
  0% { opacity: 0; transform: translate(0.0px, -73.8px); }
  15.375% { opacity: 0; transform: translate(0.0px, -73.8px); }
  21% { opacity: 1; transform: translate(0px, 0px); }
  83% { opacity: 1; transform: translate(0px, 0px); }
  89.25% { opacity: 0; transform: translate(0.0px, -73.8px); }
  100% { opacity: 0; transform: translate(0.0px, -73.8px); }
}
.n2-p15 { animation: n2-p15-k 8s cubic-bezier(0.2, 0.9, 0.2, 1) infinite; }
@keyframes n2-p16-k {
  0% { opacity: 0; transform: translate(-63.9px, 36.9px); }
  16.5% { opacity: 0; transform: translate(-63.9px, 36.9px); }
  22.125% { opacity: 1; transform: translate(0px, 0px); }
  82.5% { opacity: 1; transform: translate(0px, 0px); }
  88.75% { opacity: 0; transform: translate(-63.9px, 36.9px); }
  100% { opacity: 0; transform: translate(-63.9px, 36.9px); }
}
.n2-p16 { animation: n2-p16-k 8s cubic-bezier(0.2, 0.9, 0.2, 1) infinite; }
@keyframes n2-p13-k {
  0% { opacity: 0; transform: translate(-63.9px, -36.9px); }
  17.625% { opacity: 0; transform: translate(-63.9px, -36.9px); }
  23.25% { opacity: 1; transform: translate(0px, 0px); }
  82% { opacity: 1; transform: translate(0px, 0px); }
  88.25% { opacity: 0; transform: translate(-63.9px, -36.9px); }
  100% { opacity: 0; transform: translate(-63.9px, -36.9px); }
}
.n2-p13 { animation: n2-p13-k 8s cubic-bezier(0.2, 0.9, 0.2, 1) infinite; }
@keyframes n2-p7-k {
  0% { opacity: 0; transform: translate(-63.9px, 36.9px); }
  18.75% { opacity: 0; transform: translate(-63.9px, 36.9px); }
  24.375% { opacity: 1; transform: translate(0px, 0px); }
  81.5% { opacity: 1; transform: translate(0px, 0px); }
  87.75% { opacity: 0; transform: translate(-63.9px, 36.9px); }
  100% { opacity: 0; transform: translate(-63.9px, 36.9px); }
}
.n2-p7 { animation: n2-p7-k 8s cubic-bezier(0.2, 0.9, 0.2, 1) infinite; }
@keyframes n2-p8-k {
  0% { opacity: 0; transform: translate(-63.9px, -36.9px); }
  19.875% { opacity: 0; transform: translate(-63.9px, -36.9px); }
  25.5% { opacity: 1; transform: translate(0px, 0px); }
  81% { opacity: 1; transform: translate(0px, 0px); }
  87.25% { opacity: 0; transform: translate(-63.9px, -36.9px); }
  100% { opacity: 0; transform: translate(-63.9px, -36.9px); }
}
.n2-p8 { animation: n2-p8-k 8s cubic-bezier(0.2, 0.9, 0.2, 1) infinite; }
@keyframes n2-p11-k {
  0% { opacity: 0; transform: translate(0.0px, -73.8px); }
  21% { opacity: 0; transform: translate(0.0px, -73.8px); }
  26.625% { opacity: 1; transform: translate(0px, 0px); }
  80.5% { opacity: 1; transform: translate(0px, 0px); }
  86.75% { opacity: 0; transform: translate(0.0px, -73.8px); }
  100% { opacity: 0; transform: translate(0.0px, -73.8px); }
}
.n2-p11 { animation: n2-p11-k 8s cubic-bezier(0.2, 0.9, 0.2, 1) infinite; }
@keyframes n2-w-k {
  0% { opacity: 0; }
  30% { opacity: 0; }
  32.5% { opacity: 1; }
  82.5% { opacity: 1; }
  86.25% { opacity: 0; }
  100% { opacity: 0; }
}
.n2-w { animation: n2-w-k 8s steps(1, end) infinite; }
@keyframes n2-knock-k {
  0% { transform: translate(0px, 0px); }
  37.5% { transform: translate(0px, 0px); }
  41.875% { transform: translate(-15.6px, -9.0px); }
  45% { transform: translate(0px, 0px); }
  50% { transform: translate(0px, 0px); }
  53.75% { transform: translate(-15.6px, -9.0px); }
  57.5% { transform: translate(0px, 0px); }
  100% { transform: translate(0px, 0px); }
}
.n2-knock { animation: n2-knock-k 8s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
@keyframes n2-hit-k {
  0% { opacity: 0; }
  41.25% { opacity: 0; }
  41.875% { opacity: 1; }
  46.25% { opacity: 0; }
  53.125% { opacity: 0; }
  53.75% { opacity: 1; }
  70% { opacity: 1; }
  72.5% { opacity: 0; }
  100% { opacity: 0; }
}
.n2-wall, .n2-lock { opacity: 0; animation: n2-hit-k 8s steps(1, end) infinite; }
@keyframes n2-tag-k {
  0% { opacity: 0; }
  30% { opacity: 0; }
  31% { opacity: 1; }
  33% { opacity: 0.2; }
  35% { opacity: 1; }
  78% { opacity: 1; }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
.n2-tag { animation: n2-tag-k 8s steps(1, end) infinite; }
@media (prefers-reduced-motion: reduce) { .n2-wall, .n2-lock, .n2-w, .n2-tag { opacity: 1; } }
/* --- Hero L3 · Agent tools: art layer --- */
.sh-plate { container-type: inline-size; }
.l3-stage { position: absolute; left: 56%; top: 14%; width: 24cqw; height: 24cqw; perspective: 90cqw; pointer-events: none; }
.l3-spin { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-22deg) rotateY(38deg); animation: l3-rot 16s linear infinite; }
.l3-cube { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.l3-cube-b { animation: l3-rot2 7s linear infinite; }
.l3-f { position: absolute; display: block; box-sizing: border-box; }
.l3-fa { width: 20cqw; height: 20cqw; left: -10cqw; top: -10cqw; border: 1px solid #c8c8c5; }
.l3-fa.l3-f0 { transform: translateZ(10cqw); } .l3-fa.l3-f1 { transform: rotateY(180deg) translateZ(10cqw); } .l3-fa.l3-f2 { transform: rotateY(90deg) translateZ(10cqw); } .l3-fa.l3-f3 { transform: rotateY(-90deg) translateZ(10cqw); } .l3-fa.l3-f4 { transform: rotateX(90deg) translateZ(10cqw); } .l3-fa.l3-f5 { transform: rotateX(-90deg) translateZ(10cqw); }
.l3-fb { width: 10cqw; height: 10cqw; left: -5cqw; top: -5cqw; border: 1.5px solid #1f5c46; }
.l3-fb.l3-f0 { transform: translateZ(5cqw); } .l3-fb.l3-f1 { transform: rotateY(180deg) translateZ(5cqw); } .l3-fb.l3-f2 { transform: rotateY(90deg) translateZ(5cqw); } .l3-fb.l3-f3 { transform: rotateY(-90deg) translateZ(5cqw); } .l3-fb.l3-f4 { transform: rotateX(90deg) translateZ(5cqw); } .l3-fb.l3-f5 { transform: rotateX(-90deg) translateZ(5cqw); }
.l3-fb.l3-f0 { background: rgba(31, 92, 70, 0.35); }
@keyframes l3-rot {
  0% { transform: rotateX(-22deg) rotateY(0deg); }
  100% { transform: rotateX(-22deg) rotateY(360deg); }
}
@keyframes l3-rot2 {
  0% { transform: rotateX(0deg) rotateZ(0deg); }
  100% { transform: rotateX(360deg) rotateZ(180deg); }
}
@keyframes l3-odo-k {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-300px); }
}
@keyframes l3-odo6-k {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-180px); }
}
.l3-odo1 { animation: l3-odo-k 10s steps(10, end) infinite; } .l3-odo0 { animation: l3-odo6-k 60s steps(6, end) infinite; }
@keyframes l3-ping-k {
  0% { opacity: 1; transform: scale(0.3); }
  70% { opacity: 0; transform: scale(1.8); }
  100% { opacity: 0; transform: scale(1.8); }
}
.l3-ping { transform-box: fill-box; transform-origin: 50% 50%; animation: l3-ping-k 1.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .l3-spin { transform: rotateX(-22deg) rotateY(38deg); } }
.l3-e0 { animation: l3-e-k 4.8s steps(1, end) 0.00s infinite; }
.l3-e1 { animation: l3-e-k 4.8s steps(1, end) 0.37s infinite; }
.l3-e2 { animation: l3-e-k 4.8s steps(1, end) 0.74s infinite; }
.l3-e3 { animation: l3-e-k 4.8s steps(1, end) 1.11s infinite; }
.l3-e4 { animation: l3-e-k 4.8s steps(1, end) 1.48s infinite; }
.l3-e5 { animation: l3-e-k 4.8s steps(1, end) 1.85s infinite; }
.l3-e6 { animation: l3-e-k 4.8s steps(1, end) 2.22s infinite; }
.l3-e7 { animation: l3-e-k 4.8s steps(1, end) 2.59s infinite; }
.l3-e8 { animation: l3-e-k 4.8s steps(1, end) 2.96s infinite; }
.l3-e9 { animation: l3-e-k 4.8s steps(1, end) 3.33s infinite; }
.l3-e10 { animation: l3-e-k 4.8s steps(1, end) 3.70s infinite; }
.l3-e11 { animation: l3-e-k 4.8s steps(1, end) 4.07s infinite; }
.l3-e12 { animation: l3-e-k 4.8s steps(1, end) 4.44s infinite; }
@keyframes l3-e-k {
  0% { opacity: 0.55; stroke: #c8c8c5; }
  8% { opacity: 1; stroke: #ffffff; }
  16% { opacity: 0.55; stroke: #c8c8c5; }
  100% { opacity: 0.55; stroke: #c8c8c5; }
}
.l3-n0 { animation: sh-flicker 0.6s steps(1, end) 0.20s backwards; }
.l3-n1 { animation: sh-flicker 0.6s steps(1, end) 0.28s backwards; }
.l3-n2 { animation: sh-flicker 0.6s steps(1, end) 0.36s backwards; }
.l3-n3 { animation: sh-flicker 0.6s steps(1, end) 0.44s backwards; }
.l3-n4 { animation: sh-flicker 0.6s steps(1, end) 0.52s backwards; }
.l3-n5 { animation: sh-flicker 0.6s steps(1, end) 0.60s backwards; }
.l3-n6 { animation: sh-flicker 0.6s steps(1, end) 0.68s backwards; }
.l3-n7 { animation: sh-flicker 0.6s steps(1, end) 0.76s backwards; }
.l3-n8 { animation: sh-flicker 0.6s steps(1, end) 0.84s backwards; }
.l3-n9 { animation: sh-flicker 0.6s steps(1, end) 0.92s backwards; }
.l3-n10 { animation: sh-flicker 0.6s steps(1, end) 1.00s backwards; }
.l3-n11 { animation: sh-flicker 0.6s steps(1, end) 1.08s backwards; }
@keyframes l3-on-k {
  0% { opacity: 0; }
  30% { opacity: 0; }
  32% { opacity: 1; }
  34% { opacity: 0.2; }
  36% { opacity: 1; }
  90% { opacity: 1; }
  92% { opacity: 0; }
  100% { opacity: 0; }
}
.l3-on, .l3-onl { opacity: 0; animation: l3-on-k 6s steps(1, end) infinite; }
@keyframes l3-q-k {
  0% { opacity: 0; }
  6% { opacity: 1; }
  8% { opacity: 0.2; }
  10% { opacity: 1; }
  92% { opacity: 1; }
  94% { opacity: 0; }
  100% { opacity: 0; }
}
.l3-strip-r { animation: l3-q-k 6s steps(1, end) infinite; }
@media (prefers-reduced-motion: reduce) { .l3-on, .l3-onl, .l3-strip-r { opacity: 1; } }
/* --- Hero L4 · Tenant orbit: art layer --- */
.sh-plate { container-type: inline-size; }
.l4-stage { position: absolute; left: 56%; top: 14%; width: 24cqw; height: 24cqw; perspective: 90cqw; pointer-events: none; }
.l4-spin { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-22deg) rotateY(38deg); animation: l4-rot 16s linear infinite; }
.l4-cube { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.l4-cube-b { animation: l4-rot2 7s linear infinite; }
.l4-f { position: absolute; display: block; box-sizing: border-box; }
.l4-fa { width: 20cqw; height: 20cqw; left: -10cqw; top: -10cqw; border: 1px solid #c8c8c5; }
.l4-fa.l4-f0 { transform: translateZ(10cqw); } .l4-fa.l4-f1 { transform: rotateY(180deg) translateZ(10cqw); } .l4-fa.l4-f2 { transform: rotateY(90deg) translateZ(10cqw); } .l4-fa.l4-f3 { transform: rotateY(-90deg) translateZ(10cqw); } .l4-fa.l4-f4 { transform: rotateX(90deg) translateZ(10cqw); } .l4-fa.l4-f5 { transform: rotateX(-90deg) translateZ(10cqw); }
.l4-fb { width: 10cqw; height: 10cqw; left: -5cqw; top: -5cqw; border: 1.5px solid #1f5c46; }
.l4-fb.l4-f0 { transform: translateZ(5cqw); } .l4-fb.l4-f1 { transform: rotateY(180deg) translateZ(5cqw); } .l4-fb.l4-f2 { transform: rotateY(90deg) translateZ(5cqw); } .l4-fb.l4-f3 { transform: rotateY(-90deg) translateZ(5cqw); } .l4-fb.l4-f4 { transform: rotateX(90deg) translateZ(5cqw); } .l4-fb.l4-f5 { transform: rotateX(-90deg) translateZ(5cqw); }
.l4-fb.l4-f0 { background: rgba(31, 92, 70, 0.35); }
.l4-card { position: absolute; display: block; width: 6cqw; height: 9cqw; left: -3cqw; top: -4.5cqw; border: 1.5px solid #1f5c46; transform: rotateY(45deg) translateZ(2cqw); animation: l4-card 5s steps(10, end) infinite; }
@keyframes l4-rot {
  0% { transform: rotateX(-22deg) rotateY(0deg); }
  100% { transform: rotateX(-22deg) rotateY(360deg); }
}
@keyframes l4-rot2 {
  0% { transform: rotateX(0deg) rotateZ(0deg); }
  100% { transform: rotateX(360deg) rotateZ(180deg); }
}
@keyframes l4-card {
  0% { transform: rotateY(45deg) rotateX(0deg) translateZ(2cqw); }
  100% { transform: rotateY(45deg) rotateX(360deg) translateZ(2cqw); }
}
@keyframes l4-odo-k {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-300px); }
}
@keyframes l4-odo6-k {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-180px); }
}
.l4-odo1 { animation: l4-odo-k 10s steps(10, end) infinite; } .l4-odo0 { animation: l4-odo6-k 60s steps(6, end) infinite; }
@keyframes l4-ping-k {
  0% { opacity: 1; transform: scale(0.3); }
  70% { opacity: 0; transform: scale(1.8); }
  100% { opacity: 0; transform: scale(1.8); }
}
.l4-ping { transform-box: fill-box; transform-origin: 50% 50%; animation: l4-ping-k 1.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .l4-spin { transform: rotateX(-22deg) rotateY(38deg); } }
.l4-lane { stroke-dasharray: 9 91; stroke-dashoffset: 9; opacity: 0; }
@keyframes l4-lane-k {
  0% { opacity: 1; stroke-dashoffset: 9; }
  35% { opacity: 1; stroke-dashoffset: -91; }
  35.1% { opacity: 0; stroke-dashoffset: -91; }
  100% { opacity: 0; stroke-dashoffset: -91; }
}
@keyframes l4-sd-k {
  0% { opacity: 1; }
  6% { opacity: 0.15; }
  12% { opacity: 1; }
  100% { opacity: 1; }
}
.l4-lane0 { animation: l4-lane-k 4.2s linear 1.60s infinite; } .l4-sd0 { animation: l4-sd-k 4.2s steps(1, end) 1.60s infinite; }
.l4-lane7 { animation: l4-lane-k 4.2s linear 2.02s infinite; } .l4-sd7 { animation: l4-sd-k 4.2s steps(1, end) 2.02s infinite; }
.l4-lane3 { animation: l4-lane-k 4.2s linear 2.44s infinite; } .l4-sd3 { animation: l4-sd-k 4.2s steps(1, end) 2.44s infinite; }
.l4-lane9 { animation: l4-lane-k 4.2s linear 2.86s infinite; } .l4-sd9 { animation: l4-sd-k 4.2s steps(1, end) 2.86s infinite; }
.l4-lane1 { animation: l4-lane-k 4.2s linear 3.28s infinite; } .l4-sd1 { animation: l4-sd-k 4.2s steps(1, end) 3.28s infinite; }
.l4-lane5 { animation: l4-lane-k 4.2s linear 3.70s infinite; } .l4-sd5 { animation: l4-sd-k 4.2s steps(1, end) 3.70s infinite; }
.l4-lane8 { animation: l4-lane-k 4.2s linear 4.12s infinite; } .l4-sd8 { animation: l4-sd-k 4.2s steps(1, end) 4.12s infinite; }
.l4-lane2 { animation: l4-lane-k 4.2s linear 4.54s infinite; } .l4-sd2 { animation: l4-sd-k 4.2s steps(1, end) 4.54s infinite; }
.l4-lane6 { animation: l4-lane-k 4.2s linear 4.96s infinite; } .l4-sd6 { animation: l4-sd-k 4.2s steps(1, end) 4.96s infinite; }
.l4-lane4 { animation: l4-lane-k 4.2s linear 5.38s infinite; } .l4-sd4 { animation: l4-sd-k 4.2s steps(1, end) 5.38s infinite; }
.l4-n0 { animation: sh-flicker 0.6s steps(1, end) 0.20s backwards; }
.l4-n1 { animation: sh-flicker 0.6s steps(1, end) 0.28s backwards; }
.l4-n2 { animation: sh-flicker 0.6s steps(1, end) 0.36s backwards; }
.l4-n3 { animation: sh-flicker 0.6s steps(1, end) 0.44s backwards; }
.l4-n4 { animation: sh-flicker 0.6s steps(1, end) 0.52s backwards; }
.l4-n5 { animation: sh-flicker 0.6s steps(1, end) 0.60s backwards; }
.l4-n6 { animation: sh-flicker 0.6s steps(1, end) 0.68s backwards; }
.l4-n7 { animation: sh-flicker 0.6s steps(1, end) 0.76s backwards; }
.l4-n8 { animation: sh-flicker 0.6s steps(1, end) 0.84s backwards; }
.l4-n9 { animation: sh-flicker 0.6s steps(1, end) 0.92s backwards; }
@keyframes l4-x-k {
  0% { opacity: 0; }
  60% { opacity: 0; }
  61% { opacity: 1; }
  63% { opacity: 0.2; }
  65% { opacity: 1; }
  67% { opacity: 0.2; }
  69% { opacity: 1; }
  90% { opacity: 1; }
  91% { opacity: 0; }
  100% { opacity: 0; }
}
.l4-x { opacity: 0; animation: l4-x-k 6s steps(1, end) infinite; }
.l4-strip-r { animation: sh-blink 1.4s steps(1, end) infinite; }
/* --- Hero L6 · White-label RAG: art layer --- */
.sh-plate { container-type: inline-size; }
.l6-stage { position: absolute; left: 56%; top: 14%; width: 24cqw; height: 24cqw; perspective: 90cqw; pointer-events: none; }
.l6-spin { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-22deg) rotateY(38deg); animation: l6-rot 16s linear infinite; }
.l6-cube { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.l6-cube-b { animation: l6-rot2 7s linear infinite; }
.l6-f { position: absolute; display: block; box-sizing: border-box; }
.l6-fa { width: 20cqw; height: 20cqw; left: -10cqw; top: -10cqw; border: 1px solid #c8c8c5; }
.l6-fa.l6-f0 { transform: translateZ(10cqw); } .l6-fa.l6-f1 { transform: rotateY(180deg) translateZ(10cqw); } .l6-fa.l6-f2 { transform: rotateY(90deg) translateZ(10cqw); } .l6-fa.l6-f3 { transform: rotateY(-90deg) translateZ(10cqw); } .l6-fa.l6-f4 { transform: rotateX(90deg) translateZ(10cqw); } .l6-fa.l6-f5 { transform: rotateX(-90deg) translateZ(10cqw); }
.l6-fb { width: 10cqw; height: 10cqw; left: -5cqw; top: -5cqw; border: 1.5px solid #1f5c46; }
.l6-fb.l6-f0 { transform: translateZ(5cqw); } .l6-fb.l6-f1 { transform: rotateY(180deg) translateZ(5cqw); } .l6-fb.l6-f2 { transform: rotateY(90deg) translateZ(5cqw); } .l6-fb.l6-f3 { transform: rotateY(-90deg) translateZ(5cqw); } .l6-fb.l6-f4 { transform: rotateX(90deg) translateZ(5cqw); } .l6-fb.l6-f5 { transform: rotateX(-90deg) translateZ(5cqw); }
.l6-fb.l6-f0 { background: rgba(31, 92, 70, 0.35); }
.l6-card { position: absolute; display: block; width: 6cqw; height: 9cqw; left: -3cqw; top: -4.5cqw; border: 1.5px solid #1f5c46; transform: rotateY(45deg) translateZ(2cqw); animation: l6-card 5s steps(10, end) infinite; }
@keyframes l6-rot {
  0% { transform: rotateX(-22deg) rotateY(0deg); }
  100% { transform: rotateX(-22deg) rotateY(360deg); }
}
@keyframes l6-rot2 {
  0% { transform: rotateX(0deg) rotateZ(0deg); }
  100% { transform: rotateX(360deg) rotateZ(180deg); }
}
@keyframes l6-card {
  0% { transform: rotateY(45deg) rotateX(0deg) translateZ(2cqw); }
  100% { transform: rotateY(45deg) rotateX(360deg) translateZ(2cqw); }
}
@keyframes l6-odo-k {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-300px); }
}
@keyframes l6-odo6-k {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-180px); }
}
.l6-odo1 { animation: l6-odo-k 10s steps(10, end) infinite; } .l6-odo0 { animation: l6-odo6-k 60s steps(6, end) infinite; }
@keyframes l6-ping-k {
  0% { opacity: 1; transform: scale(0.3); }
  70% { opacity: 0; transform: scale(1.8); }
  100% { opacity: 0; transform: scale(1.8); }
}
.l6-ping { transform-box: fill-box; transform-origin: 50% 50%; animation: l6-ping-k 1.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .l6-spin { transform: rotateX(-22deg) rotateY(38deg); } }
.l6-lane { stroke-dasharray: 9 91; stroke-dashoffset: 9; opacity: 0; }
@keyframes l6-lane-k {
  0% { opacity: 1; stroke-dashoffset: 9; }
  35% { opacity: 1; stroke-dashoffset: -91; }
  35.1% { opacity: 0; stroke-dashoffset: -91; }
  100% { opacity: 0; stroke-dashoffset: -91; }
}
@keyframes l6-sd-k {
  0% { opacity: 1; }
  6% { opacity: 0.15; }
  12% { opacity: 1; }
  100% { opacity: 1; }
}
.l6-lane0 { animation: l6-lane-k 4.2s linear 1.60s infinite; } .l6-sd0 { animation: l6-sd-k 4.2s steps(1, end) 1.60s infinite; }
.l6-lane7 { animation: l6-lane-k 4.2s linear 2.02s infinite; } .l6-sd7 { animation: l6-sd-k 4.2s steps(1, end) 2.02s infinite; }
.l6-lane3 { animation: l6-lane-k 4.2s linear 2.44s infinite; } .l6-sd3 { animation: l6-sd-k 4.2s steps(1, end) 2.44s infinite; }
.l6-lane9 { animation: l6-lane-k 4.2s linear 2.86s infinite; } .l6-sd9 { animation: l6-sd-k 4.2s steps(1, end) 2.86s infinite; }
.l6-lane1 { animation: l6-lane-k 4.2s linear 3.28s infinite; } .l6-sd1 { animation: l6-sd-k 4.2s steps(1, end) 3.28s infinite; }
.l6-lane5 { animation: l6-lane-k 4.2s linear 3.70s infinite; } .l6-sd5 { animation: l6-sd-k 4.2s steps(1, end) 3.70s infinite; }
.l6-lane8 { animation: l6-lane-k 4.2s linear 4.12s infinite; } .l6-sd8 { animation: l6-sd-k 4.2s steps(1, end) 4.12s infinite; }
.l6-lane2 { animation: l6-lane-k 4.2s linear 4.54s infinite; } .l6-sd2 { animation: l6-sd-k 4.2s steps(1, end) 4.54s infinite; }
.l6-lane6 { animation: l6-lane-k 4.2s linear 4.96s infinite; } .l6-sd6 { animation: l6-sd-k 4.2s steps(1, end) 4.96s infinite; }
.l6-lane4 { animation: l6-lane-k 4.2s linear 5.38s infinite; } .l6-sd4 { animation: l6-sd-k 4.2s steps(1, end) 5.38s infinite; }
.l6-n0 { animation: sh-flicker 0.6s steps(1, end) 0.20s backwards; }
.l6-n1 { animation: sh-flicker 0.6s steps(1, end) 0.28s backwards; }
.l6-n2 { animation: sh-flicker 0.6s steps(1, end) 0.36s backwards; }
.l6-n3 { animation: sh-flicker 0.6s steps(1, end) 0.44s backwards; }
.l6-n4 { animation: sh-flicker 0.6s steps(1, end) 0.52s backwards; }
.l6-n5 { animation: sh-flicker 0.6s steps(1, end) 0.60s backwards; }
.l6-n6 { animation: sh-flicker 0.6s steps(1, end) 0.68s backwards; }
.l6-n7 { animation: sh-flicker 0.6s steps(1, end) 0.76s backwards; }
.l6-n8 { animation: sh-flicker 0.6s steps(1, end) 0.84s backwards; }
.l6-n9 { animation: sh-flicker 0.6s steps(1, end) 0.92s backwards; }
@keyframes l6-x-k {
  0% { opacity: 0; }
  60% { opacity: 0; }
  61% { opacity: 1; }
  63% { opacity: 0.2; }
  65% { opacity: 1; }
  67% { opacity: 0.2; }
  69% { opacity: 1; }
  90% { opacity: 1; }
  91% { opacity: 0; }
  100% { opacity: 0; }
}
.l6-x { opacity: 0; animation: l6-x-k 6s steps(1, end) infinite; }
.l6-strip-r { animation: sh-blink 1.4s steps(1, end) infinite; }

/* --- Ticker band: mono marquee, dot cluster, tick ruler ---------------- */
.sh-ticker-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 64px;
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: sh-marquee 90s linear 2.6s infinite;
}
.sh-ticker-group {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-right: 18px;
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bg);
}
.tk-dim { opacity: 0.5; }
.tk-dots {
  flex: 0 0 auto;
  width: 28px;
  height: 12px;
  background: radial-gradient(circle, var(--bg) 0 1.5px, transparent 2px) 0 0 / 6px 6px;
}
.tk-bar {
  flex: 0 0 auto;
  width: 48px;
  height: 9px;
  background:
    repeating-linear-gradient(90deg, var(--bg) 0 1px, transparent 1px 16px) left bottom / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--bg) 0 1px, transparent 1px 4px) left bottom / 100% 4px no-repeat;
  opacity: 0.7;
}
.sh-ticker-scan { z-index: 2; }
@keyframes sh-marquee { to { transform: translateX(-50%); } }

/* --- Section numerals: oversized, hatched, hung above each section rule - */
.section-block { position: relative; }
.section-block::before {
  position: absolute;
  right: 0;
  bottom: calc(100% + 4px);
  font: 500 clamp(56px, 7.6vw, 108px)/0.74 var(--font-sans);
  letter-spacing: -0.06em;
  color: transparent;
  background: repeating-linear-gradient(-45deg, var(--rule-strong) 0 1px, transparent 1px 5px);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px var(--rule-strong);
  pointer-events: none;
}
#work::before { content: "01"; content: "01" / ""; }
#skills::before { content: "02"; content: "02" / ""; }
#about::before { content: "03"; content: "03" / ""; }
#contact::before { content: "04"; content: "04" / ""; }
.sh-io .section-block:has(> .section-header:not(.is-in))::before { opacity: 0; }
.sh-io .section-block:has(> .section-header.is-in)::before {
  animation: sh-wipe 0.6s steps(6, end) 0.15s both, sh-flicker 0.7s steps(1, end) 0.15s both;
}

/* --- Menu indices (.01 .02 …) on the primary nav ---------------------- */
.site-nav { counter-reset: sh-nav; }
.nav-link { counter-increment: sh-nav; }
.nav-link::before {
  content: "." counter(sh-nav, decimal-leading-zero);
  content: "." counter(sh-nav, decimal-leading-zero) / "";
  margin-right: 3px;
  transform: translateY(-0.5em);
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--accent);
}
@media (max-width: 480px) {
  .nav-link::before { content: none; }
}

/* --- Spec-sheet ▲ markers on metadata labels ---------------------------- */
.fact-row dt::after,
.about-meta-list dt::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 5px;
  margin-left: 6px;
  vertical-align: 0.1em;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* --- Skill pictograms: same flat 45° marks as How I Work, larger -------- */
.skill-col { isolation: isolate; }
.skill-col > .sh-picto svg {
  top: -20px;
  right: -20px;
  width: 128px;
  height: 128px;
  opacity: 0.1;
  animation: none;
}

/* --- Dot-grid fields behind panels -------------------------------------
   How I Work: the field runs edge to edge between the two rules; the
   negative margins cancel the head/foot margins, so nothing moves. */
.work-process-body {
  margin: calc(-12 * var(--u)) calc(-12 * var(--u)) calc(-10 * var(--u));
  padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u));
  background: radial-gradient(circle, var(--rule) 0 1px, transparent 1.5px) 0 0 / 9px 9px;
}
.mcp-trace-body {
  background:
    radial-gradient(circle, var(--rule) 0 1px, transparent 1.5px) 0 0 / 10px 10px,
    var(--bg);
}
/* The reply turn's tint is translucent: back it with the old ground so
   the dots never run behind its text. */
.trace-turn--reply {
  background: linear-gradient(var(--accent-tint), var(--accent-tint)), var(--bg);
}
/* ==========================================================================
   ANIMATED EVIDENCE
   SVG re-creations of the public demos replace the static screenshots.
   Base styles are the finished frame, so Motion off / reduced motion show a
   complete, still screen.
   ========================================================================== */
.frame-media-link .anim-svg { display: block; width: 100%; height: auto; }
.frame-media-link--mobile .anim-svg { max-width: 240px; border: 1px solid var(--rule-strong); }
@media (max-width: 768px) {
  .frame-media-link--mobile .anim-svg { max-width: 200px; }
}
@media (min-width: 769px) {
  .evidence-frame--mobile .frame-media-link--mobile .anim-svg {
    width: auto;
    height: auto;
    max-width: min(240px, 100%);
    max-height: 100%;
  }
}
/* ANIMATED EVIDENCE: generated keyframes start */
@keyframes syn-tab0-k {
  0% { opacity: 1; }
  33.148% { opacity: 1; }
  33.333% { opacity: 0; }
  100% { opacity: 0; }
}
.syn-tab0 { animation: syn-tab0-k 27s linear 0s infinite both; opacity: 0; }
@keyframes syn-lab0-k {
  0% { opacity: 1; }
  33.148% { opacity: 1; }
  33.333% { opacity: 0; }
  100% { opacity: 0; }
}
.syn-lab0 { animation: syn-lab0-k 27s linear 0s infinite both; opacity: 0; }
@keyframes syn-tab1-k {
  0% { opacity: 1; }
  33.148% { opacity: 1; }
  33.333% { opacity: 0; }
  100% { opacity: 0; }
}
.syn-tab1 { animation: syn-tab1-k 27s linear -18s infinite both; opacity: 1; }
@keyframes syn-lab1-k {
  0% { opacity: 1; }
  33.148% { opacity: 1; }
  33.333% { opacity: 0; }
  100% { opacity: 0; }
}
.syn-lab1 { animation: syn-lab1-k 27s linear -18s infinite both; opacity: 1; }
@keyframes syn-tab2-k {
  0% { opacity: 1; }
  33.148% { opacity: 1; }
  33.333% { opacity: 0; }
  100% { opacity: 0; }
}
.syn-tab2 { animation: syn-tab2-k 27s linear -9s infinite both; opacity: 0; }
@keyframes syn-lab2-k {
  0% { opacity: 1; }
  33.148% { opacity: 1; }
  33.333% { opacity: 0; }
  100% { opacity: 0; }
}
.syn-lab2 { animation: syn-lab2-k 27s linear -9s infinite both; opacity: 0; }
@keyframes syn-reply-k {
  0% { opacity: 0; transform: translateY(8px); }
  66.667% { opacity: 0; transform: translateY(8px); }
  70.556% { opacity: 1; transform: translateY(0px); }
  93.333% { opacity: 1; transform: translateY(0px); }
  97.778% { opacity: 0; transform: translateY(0px); }
  100% { opacity: 0; transform: translateY(0px); }
}
.syn-reply { animation: syn-reply-k 9s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes syn-q-k {
  0% { opacity: 0; transform: translateY(89px); }
  1.667% { opacity: 0; transform: translateY(89px); }
  5% { opacity: 1; transform: translateY(81px); }
  65.556% { opacity: 1; transform: translateY(81px); }
  70% { opacity: 1; transform: translateY(0px); }
  93.333% { opacity: 1; transform: translateY(0px); }
  97.778% { opacity: 0; transform: translateY(0px); }
  100% { opacity: 0; transform: translateY(0px); }
}
.syn-q { animation: syn-q-k 9s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes syn-qcover-k {
  0% { transform: scaleX(1); }
  4.444% { transform: scaleX(1); }
  13.333% { transform: scaleX(0); }
  100% { transform: scaleX(0); }
}
.syn-qcover { animation: syn-qcover-k 9s linear 0s infinite both; transform-box: fill-box; transform-origin: 100% 50%; transform: scaleX(0); }
@keyframes syn-dots-k {
  0% { opacity: 0; }
  13.333% { opacity: 0; }
  15% { opacity: 1; }
  65% { opacity: 1; }
  66.667% { opacity: 0; }
  100% { opacity: 0; }
}
.syn-dots { animation: syn-dots-k 9s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; opacity: 0; }
@keyframes syn-dot0-k {
  0% { opacity: 0.35; }
  27.778% { opacity: 1; }
  55.556% { opacity: 0.35; }
  100% { opacity: 0.35; }
}
.syn-dot0 { animation: syn-dot0-k 0.9s linear 0.0s infinite both; }
@keyframes syn-dot1-k {
  0% { opacity: 0.35; }
  27.778% { opacity: 1; }
  55.556% { opacity: 0.35; }
  100% { opacity: 0.35; }
}
.syn-dot1 { animation: syn-dot1-k 0.9s linear 0.15s infinite both; }
@keyframes syn-dot2-k {
  0% { opacity: 0.35; }
  27.778% { opacity: 1; }
  55.556% { opacity: 0.35; }
  100% { opacity: 0.35; }
}
.syn-dot2 { animation: syn-dot2-k 0.9s linear 0.3s infinite both; }
@keyframes syn-l1-k {
  0% { stroke-dashoffset: 1; opacity: 1; }
  18.889% { stroke-dashoffset: 1; opacity: 1; }
  24.444% { stroke-dashoffset: 0; opacity: 1; }
  93.333% { stroke-dashoffset: 0; opacity: 1; }
  97.778% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.syn-l1 { animation: syn-l1-k 9s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; stroke-dasharray: 1; }
@keyframes syn-mark-k {
  0% { transform: scale(1); }
  24.444% { transform: scale(1); }
  26.444% { transform: scale(1.16); }
  29.444% { transform: scale(1); }
  100% { transform: scale(1); }
}
.syn-mark { animation: syn-mark-k 9s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes syn-cap-k {
  0% { opacity: 0; }
  26.667% { opacity: 0; }
  30% { opacity: 1; }
  93.333% { opacity: 1; }
  97.778% { opacity: 0; }
  100% { opacity: 0; }
}
.syn-cap { animation: syn-cap-k 9s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes syn-l2-k {
  0% { stroke-dashoffset: 1; opacity: 1; }
  31.111% { stroke-dashoffset: 1; opacity: 1; }
  36.667% { stroke-dashoffset: 0; opacity: 1; }
  93.333% { stroke-dashoffset: 0; opacity: 1; }
  97.778% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.syn-l2 { animation: syn-l2-k 9s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; stroke-dasharray: 1; }
@keyframes syn-row0-k {
  0% { opacity: 0; transform: translateY(6px); }
  40% { opacity: 0; transform: translateY(6px); }
  43.333% { opacity: 1; transform: translateY(0px); }
  93.333% { opacity: 1; transform: translateY(0px); }
  97.778% { opacity: 0; transform: translateY(0px); }
  100% { opacity: 0; transform: translateY(0px); }
}
.syn-row0 { animation: syn-row0-k 9s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes syn-row1-k {
  0% { opacity: 0; transform: translateY(6px); }
  42.778% { opacity: 0; transform: translateY(6px); }
  46.111% { opacity: 1; transform: translateY(0px); }
  93.333% { opacity: 1; transform: translateY(0px); }
  97.778% { opacity: 0; transform: translateY(0px); }
  100% { opacity: 0; transform: translateY(0px); }
}
.syn-row1 { animation: syn-row1-k 9s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes syn-row2-k {
  0% { opacity: 0; transform: translateY(6px); }
  45.556% { opacity: 0; transform: translateY(6px); }
  48.889% { opacity: 1; transform: translateY(0px); }
  93.333% { opacity: 1; transform: translateY(0px); }
  97.778% { opacity: 0; transform: translateY(0px); }
  100% { opacity: 0; transform: translateY(0px); }
}
.syn-row2 { animation: syn-row2-k 9s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes syn-card-k {
  0% { opacity: 0; transform: translateX(12px); }
  36.667% { opacity: 0; transform: translateX(12px); }
  40.556% { opacity: 1; transform: translateX(0px); }
  93.333% { opacity: 1; transform: translateX(0px); }
  97.778% { opacity: 0; transform: translateX(0px); }
  100% { opacity: 0; transform: translateX(0px); }
}
.syn-card { animation: syn-card-k 9s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes syn-badge-k {
  0% { opacity: 0; transform: scale(0.6); }
  50% { opacity: 0; transform: scale(0.6); }
  52.778% { opacity: 1; transform: scale(1.08); }
  55% { opacity: 1; transform: scale(1); }
  93.333% { opacity: 1; transform: scale(1); }
  97.778% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
.syn-badge { animation: syn-badge-k 9s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 0% 50%; }
@keyframes syn-ret-k {
  0% { opacity: 0; transform: translateX(0px); }
  55.556% { opacity: 0; transform: translateX(0px); }
  56.667% { opacity: 1; transform: translateX(0px); }
  65.556% { opacity: 1; transform: translateX(-377px); }
  66.667% { opacity: 0; transform: translateX(-377px); }
  100% { opacity: 0; transform: translateX(-377px); }
}
.syn-ret { animation: syn-ret-k 9s cubic-bezier(0.6, 0, 0.3, 1) 0s infinite both; opacity: 0; }
@keyframes syn-rettext-k {
  0% { opacity: 0; }
  57.778% { opacity: 0; }
  61.667% { opacity: 1; }
  93.333% { opacity: 1; }
  97.778% { opacity: 0; }
  100% { opacity: 0; }
}
.syn-rettext { animation: syn-rettext-k 9s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppd-chipswap-k {
  0% { opacity: 0; }
  60.833% { opacity: 0; }
  62.5% { opacity: 1; }
  91.667% { opacity: 1; }
  93.333% { opacity: 0; }
  100% { opacity: 0; }
}
.ppd-chipswap { animation: ppd-chipswap-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; opacity: 0; }
@keyframes ppd-dim-k {
  0% { opacity: 1; }
  60.833% { opacity: 1; }
  62.917% { opacity: 0.32; }
  91.667% { opacity: 0.32; }
  93.75% { opacity: 1; }
  100% { opacity: 1; }
}
.ppd-dim { animation: ppd-dim-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppd-c4bg-k {
  0% { fill: #f6f8f6; stroke: #e3e8e3; }
  60.833% { fill: #f6f8f6; stroke: #e3e8e3; }
  62.917% { fill: #e9f6ec; stroke: #2f9e44; }
  91.667% { fill: #e9f6ec; stroke: #2f9e44; }
  93.75% { fill: #f6f8f6; stroke: #e3e8e3; }
  100% { fill: #f6f8f6; stroke: #e3e8e3; }
}
.ppd-c4bg { animation: ppd-c4bg-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppd-c4-k {
  0% { transform: scale(1); }
  60.833% { transform: scale(1); }
  62.083% { transform: scale(1.006); }
  63.75% { transform: scale(1); }
  100% { transform: scale(1); }
}
.ppd-c4 { animation: ppd-c4-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes ppd-user-k {
  0% { opacity: 0; transform: translateY(10px); }
  20% { opacity: 0; transform: translateY(10px); }
  22.5% { opacity: 1; transform: translateY(0px); }
  93.333% { opacity: 1; transform: translateY(0px); }
  96.667% { opacity: 0; transform: translateY(0px); }
  100% { opacity: 0; transform: translateY(0px); }
}
.ppd-user { animation: ppd-user-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppd-typing-k {
  0% { opacity: 0; }
  23.333% { opacity: 0; }
  24.583% { opacity: 1; }
  31.25% { opacity: 1; }
  32.5% { opacity: 0; }
  100% { opacity: 0; }
}
.ppd-typing { animation: ppd-typing-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; opacity: 0; }
@keyframes ppd-dot0-k {
  0% { opacity: 0.3; }
  27.778% { opacity: 1; }
  55.556% { opacity: 0.3; }
  100% { opacity: 0.3; }
}
.ppd-dot0 { animation: ppd-dot0-k 0.9s linear 0.0s infinite both; }
@keyframes ppd-dot1-k {
  0% { opacity: 0.3; }
  27.778% { opacity: 1; }
  55.556% { opacity: 0.3; }
  100% { opacity: 0.3; }
}
.ppd-dot1 { animation: ppd-dot1-k 0.9s linear 0.15s infinite both; }
@keyframes ppd-dot2-k {
  0% { opacity: 0.3; }
  27.778% { opacity: 1; }
  55.556% { opacity: 0.3; }
  100% { opacity: 0.3; }
}
.ppd-dot2 { animation: ppd-dot2-k 0.9s linear 0.3s infinite both; }
@keyframes ppd-ans-k {
  0% { opacity: 0; }
  31.667% { opacity: 0; }
  33.75% { opacity: 1; }
  93.333% { opacity: 1; }
  96.667% { opacity: 0; }
  100% { opacity: 0; }
}
.ppd-ans { animation: ppd-ans-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppd-a0-k {
  0% { opacity: 0; }
  32.917% { opacity: 0; }
  34.583% { opacity: 1; }
  93.333% { opacity: 1; }
  96.667% { opacity: 0; }
  100% { opacity: 0; }
}
.ppd-a0 { animation: ppd-a0-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppd-a1-k {
  0% { opacity: 0; }
  35% { opacity: 0; }
  36.667% { opacity: 1; }
  93.333% { opacity: 1; }
  96.667% { opacity: 0; }
  100% { opacity: 0; }
}
.ppd-a1 { animation: ppd-a1-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppd-a2-k {
  0% { opacity: 0; }
  37.083% { opacity: 0; }
  38.75% { opacity: 1; }
  93.333% { opacity: 1; }
  96.667% { opacity: 0; }
  100% { opacity: 0; }
}
.ppd-a2 { animation: ppd-a2-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppd-a3-k {
  0% { opacity: 0; }
  39.167% { opacity: 0; }
  40.833% { opacity: 1; }
  93.333% { opacity: 1; }
  96.667% { opacity: 0; }
  100% { opacity: 0; }
}
.ppd-a3 { animation: ppd-a3-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppd-a4-k {
  0% { opacity: 0; }
  41.25% { opacity: 0; }
  42.917% { opacity: 1; }
  93.333% { opacity: 1; }
  96.667% { opacity: 0; }
  100% { opacity: 0; }
}
.ppd-a4 { animation: ppd-a4-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppd-a5-k {
  0% { opacity: 0; }
  43.333% { opacity: 0; }
  45% { opacity: 1; }
  93.333% { opacity: 1; }
  96.667% { opacity: 0; }
  100% { opacity: 0; }
}
.ppd-a5 { animation: ppd-a5-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppd-chips-k {
  0% { opacity: 0; transform: translateY(6px); }
  45.833% { opacity: 0; transform: translateY(6px); }
  48.333% { opacity: 1; transform: translateY(0px); }
  93.333% { opacity: 1; transform: translateY(0px); }
  96.667% { opacity: 0; transform: translateY(0px); }
  100% { opacity: 0; transform: translateY(0px); }
}
.ppd-chips { animation: ppd-chips-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppd-see-k {
  0% { fill: #e3f2e6; }
  58.333% { fill: #e3f2e6; }
  59% { fill: #bfe3c8; }
  63.333% { fill: #bfe3c8; }
  65.833% { fill: #e3f2e6; }
  100% { fill: #e3f2e6; }
}
.ppd-see { animation: ppd-see-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppd-fu-k {
  0% { opacity: 0; }
  49.167% { opacity: 0; }
  51.667% { opacity: 1; }
  93.333% { opacity: 1; }
  96.667% { opacity: 0; }
  100% { opacity: 0; }
}
.ppd-fu { animation: ppd-fu-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppd-ph-k {
  0% { opacity: 1; }
  3.75% { opacity: 1; }
  4.167% { opacity: 0; }
  19.167% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 1; }
}
.ppd-ph { animation: ppd-ph-k 12s linear 0s infinite both; }
@keyframes ppd-typed-k {
  0% { opacity: 0; }
  4.167% { opacity: 0; }
  4.583% { opacity: 1; }
  18.75% { opacity: 1; }
  19.167% { opacity: 0; }
  100% { opacity: 0; }
}
.ppd-typed { animation: ppd-typed-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; opacity: 0; }
@keyframes ppd-typedcover-k {
  0% { transform: scaleX(1); }
  4.167% { transform: scaleX(1); }
  16.667% { transform: scaleX(0); }
  100% { transform: scaleX(0); }
}
.ppd-typedcover { animation: ppd-typedcover-k 12s linear 0s infinite both; transform-box: fill-box; transform-origin: 100% 50%; transform: scaleX(0); }
@keyframes ppd-send-k {
  0% { transform: scale(1); }
  17.5% { transform: scale(1); }
  18.5% { transform: scale(0.88); }
  20% { transform: scale(1); }
  100% { transform: scale(1); }
}
.ppd-send { animation: ppd-send-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes ppd-rip-k {
  0% { opacity: 0; transform: scale(0.3); }
  58.333% { opacity: 0; transform: scale(0.3); }
  58.75% { opacity: 0.55; transform: scale(0.4); }
  62.917% { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}
.ppd-rip { animation: ppd-rip-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
@keyframes ppd-cur-k {
  0% { opacity: 0; transform: translate(1300px, 730px); }
  50.833% { opacity: 0; transform: translate(1300px, 730px); }
  52.5% { opacity: 1; transform: translate(1300px, 730px); }
  57.5% { opacity: 1; transform: translate(1118px, 622px); }
  58.333% { opacity: 1; transform: translate(1118px, 622px) scale(0.86); }
  59.583% { opacity: 1; transform: translate(1118px, 622px); }
  86.667% { opacity: 1; transform: translate(1118px, 622px); }
  89.167% { opacity: 0; transform: translate(1118px, 622px); }
  100% { opacity: 0; transform: translate(1300px, 730px); }
}
.ppd-cur { animation: ppd-cur-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; opacity: 0; }
@keyframes ppm-v1c-k {
  0% { transform: scaleX(1); }
  6.429% { transform: scaleX(1); }
  12.143% { transform: scaleX(0); }
  100% { transform: scaleX(0); }
}
.ppm-v1c { animation: ppm-v1c-k 14s linear 0s infinite both; transform-box: fill-box; transform-origin: 100% 50%; transform: scaleX(0); }
@keyframes ppm-v2c-k {
  0% { transform: scaleX(1); }
  10.714% { transform: scaleX(1); }
  17.143% { transform: scaleX(0); }
  100% { transform: scaleX(0); }
}
.ppm-v2c { animation: ppm-v2c-k 14s linear 0s infinite both; transform-box: fill-box; transform-origin: 100% 50%; transform: scaleX(0); }
@keyframes ppm-auto-k {
  0% { fill: #e4f3e9; }
  4.286% { fill: #e4f3e9; }
  5% { fill: #c9e8d2; }
  7.857% { fill: #c9e8d2; }
  10% { fill: #e4f3e9; }
  100% { fill: #e4f3e9; }
}
.ppm-auto { animation: ppm-auto-k 14s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppm-plan-k {
  0% { fill: #f5f8f5; stroke: #e1e6df; }
  27.5% { fill: #f5f8f5; stroke: #e1e6df; }
  28.571% { fill: #eef8f0; stroke: #2f9e44; }
  100% { fill: #eef8f0; stroke: #2f9e44; }
}
.ppm-plan { animation: ppm-plan-k 14s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppm-radio-k {
  0% { transform: scale(0); }
  27.5% { transform: scale(0); }
  28.929% { transform: scale(1.2); }
  30% { transform: scale(1); }
  100% { transform: scale(1); }
}
.ppm-radio { animation: ppm-radio-k 14s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes ppm-volc-k {
  0% { transform: scaleX(1); }
  31.429% { transform: scaleX(1); }
  35% { transform: scaleX(0); }
  100% { transform: scaleX(0); }
}
.ppm-volc { animation: ppm-volc-k 14s linear 0s infinite both; transform-box: fill-box; transform-origin: 100% 50%; transform: scaleX(0); }
@keyframes ppm-r0-k {
  0% { opacity: 0; transform: translateX(8px); }
  45% { opacity: 0; transform: translateX(8px); }
  46.786% { opacity: 1; transform: translateX(0px); }
  92.857% { opacity: 1; transform: translateX(0px); }
  95.714% { opacity: 0; transform: translateX(0px); }
  100% { opacity: 0; transform: translateX(0px); }
}
.ppm-r0 { animation: ppm-r0-k 14s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppm-r1-k {
  0% { opacity: 0; transform: translateX(8px); }
  46.143% { opacity: 0; transform: translateX(8px); }
  47.929% { opacity: 1; transform: translateX(0px); }
  92.857% { opacity: 1; transform: translateX(0px); }
  95.714% { opacity: 0; transform: translateX(0px); }
  100% { opacity: 0; transform: translateX(0px); }
}
.ppm-r1 { animation: ppm-r1-k 14s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppm-r2-k {
  0% { opacity: 0; transform: translateX(8px); }
  47.286% { opacity: 0; transform: translateX(8px); }
  49.071% { opacity: 1; transform: translateX(0px); }
  92.857% { opacity: 1; transform: translateX(0px); }
  95.714% { opacity: 0; transform: translateX(0px); }
  100% { opacity: 0; transform: translateX(0px); }
}
.ppm-r2 { animation: ppm-r2-k 14s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppm-r3-k {
  0% { opacity: 0; transform: translateX(8px); }
  48.429% { opacity: 0; transform: translateX(8px); }
  50.214% { opacity: 1; transform: translateX(0px); }
  92.857% { opacity: 1; transform: translateX(0px); }
  95.714% { opacity: 0; transform: translateX(0px); }
  100% { opacity: 0; transform: translateX(0px); }
}
.ppm-r3 { animation: ppm-r3-k 14s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppm-r4-k {
  0% { opacity: 0; transform: translateX(8px); }
  49.571% { opacity: 0; transform: translateX(8px); }
  51.357% { opacity: 1; transform: translateX(0px); }
  92.857% { opacity: 1; transform: translateX(0px); }
  95.714% { opacity: 0; transform: translateX(0px); }
  100% { opacity: 0; transform: translateX(0px); }
}
.ppm-r4 { animation: ppm-r4-k 14s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppm-r5-k {
  0% { opacity: 0; transform: translateX(8px); }
  50.714% { opacity: 0; transform: translateX(8px); }
  52.5% { opacity: 1; transform: translateX(0px); }
  92.857% { opacity: 1; transform: translateX(0px); }
  95.714% { opacity: 0; transform: translateX(0px); }
  100% { opacity: 0; transform: translateX(0px); }
}
.ppm-r5 { animation: ppm-r5-k 14s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppm-r6-k {
  0% { opacity: 0; transform: translateX(8px); }
  51.857% { opacity: 0; transform: translateX(8px); }
  53.643% { opacity: 1; transform: translateX(0px); }
  92.857% { opacity: 1; transform: translateX(0px); }
  95.714% { opacity: 0; transform: translateX(0px); }
  100% { opacity: 0; transform: translateX(0px); }
}
.ppm-r6 { animation: ppm-r6-k 14s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppm-big-k {
  0% { opacity: 0; transform: scale(0.6); }
  55% { opacity: 0; transform: scale(0.6); }
  56.786% { opacity: 1; transform: scale(1.08); }
  58.214% { opacity: 1; transform: scale(1); }
  92.857% { opacity: 1; transform: scale(1); }
  95.714% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
.ppm-big { animation: ppm-big-k 14s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 0% 100%; }
@keyframes ppm-close-k {
  0% { fill: #e4f3e9; }
  67.857% { fill: #e4f3e9; }
  69.643% { fill: #2f9e44; }
  92.857% { fill: #2f9e44; }
  95% { fill: #e4f3e9; }
  100% { fill: #e4f3e9; }
}
.ppm-close { animation: ppm-close-k 14s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes ppm-closet-k {
  0% { opacity: 1; }
  67.857% { opacity: 1; }
  68.571% { opacity: 0; }
  93.571% { opacity: 0; }
  95% { opacity: 1; }
  100% { opacity: 1; }
}
.ppm-closet { animation: ppm-closet-k 14s linear 0s infinite both; }
@keyframes ppm-closed-k {
  0% { opacity: 0; }
  68.571% { opacity: 0; }
  69.643% { opacity: 1; }
  92.857% { opacity: 1; }
  94.286% { opacity: 0; }
  100% { opacity: 0; }
}
.ppm-closed { animation: ppm-closed-k 14s linear 0s infinite both; opacity: 0; }
@keyframes ppm-s1-k {
  0% { opacity: 1; transform: translateX(0px); }
  21.429% { opacity: 1; transform: translateX(0px); }
  24.286% { opacity: 1; transform: translateX(-390px); }
  24.643% { opacity: 0; transform: translateX(-390px); }
  92.143% { opacity: 0; transform: translateX(390px); }
  92.857% { opacity: 1; transform: translateX(390px); }
  95.714% { opacity: 1; transform: translateX(0px); }
  100% { opacity: 1; transform: translateX(0px); }
}
.ppm-s1 { animation: ppm-s1-k 14s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite both; opacity: 0; }
@keyframes ppm-s2-k {
  0% { opacity: 0; transform: translateX(390px); }
  21.071% { opacity: 0; transform: translateX(390px); }
  21.429% { opacity: 1; transform: translateX(390px); }
  24.286% { opacity: 1; transform: translateX(0px); }
  40% { opacity: 1; transform: translateX(0px); }
  42.857% { opacity: 1; transform: translateX(-390px); }
  43.214% { opacity: 0; transform: translateX(-390px); }
  100% { opacity: 0; transform: translateX(-390px); }
}
.ppm-s2 { animation: ppm-s2-k 14s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite both; opacity: 0; }
@keyframes ppm-s3-k {
  0% { opacity: 0; transform: translateX(390px); }
  39.643% { opacity: 0; transform: translateX(390px); }
  40% { opacity: 1; transform: translateX(390px); }
  42.857% { opacity: 1; transform: translateX(0px); }
  92.857% { opacity: 1; transform: translateX(0px); }
  95.714% { opacity: 1; transform: translateX(-390px); }
  96.071% { opacity: 0; transform: translateX(-390px); }
  100% { opacity: 0; transform: translateX(-390px); }
}
.ppm-s3 { animation: ppm-s3-k 14s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite both; }
@keyframes ppm-i1-k {
  0% { opacity: 1; }
  22.857% { opacity: 1; }
  23.214% { opacity: 0; }
  93.929% { opacity: 0; }
  94.286% { opacity: 1; }
  100% { opacity: 1; }
}
.ppm-i1 { animation: ppm-i1-k 14s linear 0s infinite both; opacity: 0; }
@keyframes ppm-i2-k {
  0% { opacity: 0; }
  22.857% { opacity: 0; }
  23.214% { opacity: 1; }
  41.429% { opacity: 1; }
  41.786% { opacity: 0; }
  100% { opacity: 0; }
}
.ppm-i2 { animation: ppm-i2-k 14s linear 0s infinite both; opacity: 0; }
@keyframes ppm-i4-k {
  0% { opacity: 0; }
  41.429% { opacity: 0; }
  41.786% { opacity: 1; }
  93.929% { opacity: 1; }
  94.286% { opacity: 0; }
  100% { opacity: 0; }
}
.ppm-i4 { animation: ppm-i4-k 14s linear 0s infinite both; }
@keyframes ppm-tap0-k {
  0% { opacity: 0; transform: scale(0.3); }
  4.286% { opacity: 0; transform: scale(0.3); }
  4.643% { opacity: 0.55; transform: scale(0.4); }
  8.214% { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}
.ppm-tap0 { animation: ppm-tap0-k 14s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
@keyframes ppm-tap1-k {
  0% { opacity: 0; transform: scale(0.3); }
  19.643% { opacity: 0; transform: scale(0.3); }
  20% { opacity: 0.55; transform: scale(0.4); }
  23.571% { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}
.ppm-tap1 { animation: ppm-tap1-k 14s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
@keyframes ppm-tap2-k {
  0% { opacity: 0; transform: scale(0.3); }
  27.143% { opacity: 0; transform: scale(0.3); }
  27.5% { opacity: 0.55; transform: scale(0.4); }
  31.071% { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}
.ppm-tap2 { animation: ppm-tap2-k 14s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
@keyframes ppm-tap3-k {
  0% { opacity: 0; transform: scale(0.3); }
  38.214% { opacity: 0; transform: scale(0.3); }
  38.571% { opacity: 0.55; transform: scale(0.4); }
  42.143% { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}
.ppm-tap3 { animation: ppm-tap3-k 14s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
@keyframes ppm-tap4-k {
  0% { opacity: 0; transform: scale(0.3); }
  67.5% { opacity: 0; transform: scale(0.3); }
  67.857% { opacity: 0.55; transform: scale(0.4); }
  71.429% { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}
.ppm-tap4 { animation: ppm-tap4-k 14s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
@keyframes own-open14-k {
  0% { opacity: 1; }
  54.167% { opacity: 1; }
  54.583% { opacity: 0; }
  95.417% { opacity: 0; }
  95.833% { opacity: 1; }
  100% { opacity: 1; }
}
.own-open14 { animation: own-open14-k 12s linear 0s infinite both; }
@keyframes own-open13-k {
  0% { opacity: 0; }
  54.167% { opacity: 0; }
  54.583% { opacity: 1; }
  95.417% { opacity: 1; }
  95.833% { opacity: 0; }
  100% { opacity: 0; }
}
.own-open13 { animation: own-open13-k 12s linear 0s infinite both; opacity: 0; }
@keyframes own-cnt0-k {
  0% { opacity: 1; }
  13.333% { opacity: 1; }
  13.75% { opacity: 0; }
  95.417% { opacity: 0; }
  95.833% { opacity: 1; }
  100% { opacity: 1; }
}
.own-cnt0 { animation: own-cnt0-k 12s linear 0s infinite both; }
@keyframes own-cnt1-k {
  0% { opacity: 0; }
  13.333% { opacity: 0; }
  13.75% { opacity: 1; }
  95.417% { opacity: 1; }
  95.833% { opacity: 0; }
  100% { opacity: 0; }
}
.own-cnt1 { animation: own-cnt1-k 12s linear 0s infinite both; opacity: 0; }
@keyframes own-cnt2-k {
  0% { opacity: 1; }
  13.333% { opacity: 1; }
  13.75% { opacity: 0; }
  95.417% { opacity: 0; }
  95.833% { opacity: 1; }
  100% { opacity: 1; }
}
.own-cnt2 { animation: own-cnt2-k 12s linear 0s infinite both; }
@keyframes own-cnt3-k {
  0% { opacity: 0; }
  13.333% { opacity: 0; }
  13.75% { opacity: 1; }
  32.917% { opacity: 1; }
  33.333% { opacity: 0; }
  100% { opacity: 0; }
}
.own-cnt3 { animation: own-cnt3-k 12s linear 0s infinite both; opacity: 0; }
@keyframes own-cnt4-k {
  0% { opacity: 0; }
  33.333% { opacity: 0; }
  33.75% { opacity: 1; }
  95.417% { opacity: 1; }
  95.833% { opacity: 0; }
  100% { opacity: 0; }
}
.own-cnt4 { animation: own-cnt4-k 12s linear 0s infinite both; opacity: 0; }
@keyframes own-cnt5-k {
  0% { opacity: 1; }
  33.333% { opacity: 1; }
  33.75% { opacity: 0; }
  95.417% { opacity: 0; }
  95.833% { opacity: 1; }
  100% { opacity: 1; }
}
.own-cnt5 { animation: own-cnt5-k 12s linear 0s infinite both; }
@keyframes own-cnt6-k {
  0% { opacity: 0; }
  33.333% { opacity: 0; }
  33.75% { opacity: 1; }
  53.75% { opacity: 1; }
  54.167% { opacity: 0; }
  100% { opacity: 0; }
}
.own-cnt6 { animation: own-cnt6-k 12s linear 0s infinite both; opacity: 0; }
@keyframes own-cnt7-k {
  0% { opacity: 0; }
  54.167% { opacity: 0; }
  54.583% { opacity: 1; }
  95.417% { opacity: 1; }
  95.833% { opacity: 0; }
  100% { opacity: 0; }
}
.own-cnt7 { animation: own-cnt7-k 12s linear 0s infinite both; opacity: 0; }
@keyframes own-m-L-k {
  0% { transform: translate(0px, 0px); }
  10.833% { transform: translate(0px, 0px); }
  15% { transform: translate(0px, -140px); }
  95.417% { transform: translate(0px, -140px); }
  95.833% { transform: translate(0px, 0px); }
  100% { transform: translate(0px, 0px); }
}
.own-m-L { animation: own-m-L-k 12s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite both; }
@keyframes own-m-BC-k {
  0% { transform: translate(0px, 0px); }
  10.833% { transform: translate(0px, 0px); }
  15% { transform: translate(0px, -140px); }
  95.417% { transform: translate(0px, -140px); }
  95.833% { transform: translate(0px, 0px); }
  100% { transform: translate(0px, 0px); }
}
.own-m-BC { animation: own-m-BC-k 12s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite both; }
@keyframes own-m-A-k {
  0% { transform: translate(0px, 0px); }
  10.833% { transform: translate(0px, 0px); }
  15% { transform: translate(0px, 140px); }
  30.833% { transform: translate(0px, 140px); }
  35% { transform: translate(0px, -18px); }
  95.417% { transform: translate(0px, -18px); }
  95.833% { transform: translate(0px, 0px); }
  100% { transform: translate(0px, 0px); }
}
.own-m-A { animation: own-m-A-k 12s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite both; }
@keyframes own-m-F-k {
  0% { transform: translate(0px, 0px); }
  10.833% { transform: translate(0px, 0px); }
  15% { transform: translate(0px, 140px); }
  30.833% { transform: translate(0px, 140px); }
  35% { transform: translate(0px, -18px); }
  95.417% { transform: translate(0px, -18px); }
  95.833% { transform: translate(0px, 0px); }
  100% { transform: translate(0px, 0px); }
}
.own-m-F { animation: own-m-F-k 12s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite both; }
@keyframes own-m-N-k {
  0% { transform: translate(0px, 0px); }
  30.833% { transform: translate(0px, 0px); }
  35% { transform: translate(0px, 158px); }
  52.5% { transform: translate(0px, 158px); }
  56.667% { transform: translate(0px, -18px); }
  95.417% { transform: translate(0px, -18px); }
  95.833% { transform: translate(0px, 0px); }
  100% { transform: translate(0px, 0px); }
}
.own-m-N { animation: own-m-N-k 12s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite both; }
@keyframes own-f-P-k {
  0% { opacity: 1; transform: scale(1); }
  51.25% { opacity: 1; transform: scale(1); }
  54.167% { opacity: 0; transform: scale(0.94); }
  95.417% { opacity: 0; transform: scale(0.94); }
  95.833% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
.own-f-P { animation: own-f-P-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes own-m-P-k {
  0% { transform: translate(0px, 0px); }
  30.833% { transform: translate(0px, 0px); }
  35% { transform: translate(0px, 158px); }
  95.417% { transform: translate(0px, 158px); }
  95.833% { transform: translate(0px, 0px); }
  100% { transform: translate(0px, 0px); }
}
.own-m-P { animation: own-m-P-k 12s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite both; }
@keyframes own-b-BD0-k {
  0% { opacity: 1; }
  31.667% { opacity: 1; }
  32.5% { opacity: 0; }
  95.417% { opacity: 0; }
  95.833% { opacity: 1; }
  100% { opacity: 1; }
}
.own-b-BD0 { animation: own-b-BD0-k 12s linear 0s infinite both; }
@keyframes own-b-BD1-k {
  0% { opacity: 0; }
  31.667% { opacity: 0; }
  32.5% { opacity: 1; }
  95.417% { opacity: 1; }
  95.833% { opacity: 0; }
  100% { opacity: 0; }
}
.own-b-BD1 { animation: own-b-BD1-k 12s linear 0s infinite both; opacity: 0; }
@keyframes own-s-BD-k {
  0% { fill: #f5b800; }
  31.667% { fill: #f5b800; }
  33.333% { fill: #1d7d2e; }
  95.417% { fill: #1d7d2e; }
  95.833% { fill: #f5b800; }
  100% { fill: #f5b800; }
}
.own-s-BD { animation: own-s-BD-k 12s linear 0s infinite both; }
@keyframes own-m-BD-k {
  0% { transform: translate(0px, 0px); }
  10.833% { transform: translate(0px, 0px); }
  15% { transform: translate(0px, 140px); }
  30.833% { transform: translate(0px, 140px); }
  35% { transform: translate(270px, 0px); }
  95.417% { transform: translate(270px, 0px); }
  95.833% { transform: translate(0px, 0px); }
  100% { transform: translate(0px, 0px); }
}
.own-m-BD { animation: own-m-BD-k 12s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite both; }
@keyframes own-b-E0-k {
  0% { opacity: 1; }
  11.667% { opacity: 1; }
  12.5% { opacity: 0; }
  95.417% { opacity: 0; }
  95.833% { opacity: 1; }
  100% { opacity: 1; }
}
.own-b-E0 { animation: own-b-E0-k 12s linear 0s infinite both; }
@keyframes own-b-E1-k {
  0% { opacity: 0; }
  11.667% { opacity: 0; }
  12.5% { opacity: 1; }
  95.417% { opacity: 1; }
  95.833% { opacity: 0; }
  100% { opacity: 0; }
}
.own-b-E1 { animation: own-b-E1-k 12s linear 0s infinite both; opacity: 0; }
@keyframes own-s-E-k {
  0% { fill: #c72827; }
  11.667% { fill: #c72827; }
  13.333% { fill: #f5b800; }
  95.417% { fill: #f5b800; }
  95.833% { fill: #c72827; }
  100% { fill: #c72827; }
}
.own-s-E { animation: own-s-E-k 12s linear 0s infinite both; }
@keyframes own-m-E-k {
  0% { transform: translate(0px, 0px); }
  10.833% { transform: translate(0px, 0px); }
  15% { transform: translate(270px, 0px); }
  95.417% { transform: translate(270px, 0px); }
  95.833% { transform: translate(0px, 0px); }
  100% { transform: translate(0px, 0px); }
}
.own-m-E { animation: own-m-E-k 12s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite both; }
@keyframes own-reset-k {
  0% { opacity: 0; }
  92.083% { opacity: 0; }
  94.583% { opacity: 1; }
  97.083% { opacity: 1; }
  99.583% { opacity: 0; }
  100% { opacity: 0; }
}
.own-reset { animation: own-reset-k 12s linear 0s infinite both; opacity: 0; }
@keyframes own-rip0-k {
  0% { opacity: 0; transform: scale(0.3); }
  8.75% { opacity: 0; transform: scale(0.3); }
  9.167% { opacity: 0.55; transform: scale(0.4); }
  13.333% { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}
.own-rip0 { animation: own-rip0-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
@keyframes own-rip1-k {
  0% { opacity: 0; transform: scale(0.3); }
  28.75% { opacity: 0; transform: scale(0.3); }
  29.167% { opacity: 0.55; transform: scale(0.4); }
  33.333% { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}
.own-rip1 { animation: own-rip1-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
@keyframes own-rip2-k {
  0% { opacity: 0; transform: scale(0.3); }
  49.583% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 0.55; transform: scale(0.4); }
  54.167% { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}
.own-rip2 { animation: own-rip2-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
@keyframes own-cur-k {
  0% { opacity: 0; transform: translate(640px, 420px); }
  3.333% { opacity: 1; transform: translate(640px, 420px); }
  8.333% { opacity: 1; transform: translate(470px, 600px); }
  21.667% { opacity: 1; transform: translate(470px, 600px); }
  28.333% { opacity: 1; transform: translate(740px, 758px); }
  41.667% { opacity: 1; transform: translate(740px, 758px); }
  49.167% { opacity: 1; transform: translate(1010px, 794px); }
  70.833% { opacity: 1; transform: translate(1010px, 794px); }
  73.333% { opacity: 0; transform: translate(1010px, 794px); }
  100% { opacity: 0; transform: translate(640px, 420px); }
}
.own-cur { animation: own-cur-k 12s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; opacity: 0; }
@keyframes til-b1a-k {
  0% { opacity: 0; transform: scale(0.4); }
  6.538% { opacity: 0; transform: scale(0.4); }
  8.077% { opacity: 1; transform: scale(1.15); }
  9.231% { opacity: 1; transform: scale(1); }
  29.615% { opacity: 1; transform: scale(1); }
  30% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
.til-b1a { animation: til-b1a-k 13s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
@keyframes til-b1b-k {
  0% { opacity: 0; transform: scale(1); }
  29.615% { opacity: 0; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.2); }
  31.538% { opacity: 1; transform: scale(1); }
  86.154% { opacity: 1; transform: scale(1); }
  88.462% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
.til-b1b { animation: til-b1b-k 13s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
@keyframes til-b2-k {
  0% { opacity: 0; transform: scale(0.4); }
  18.846% { opacity: 0; transform: scale(0.4); }
  20.385% { opacity: 1; transform: scale(1.15); }
  21.538% { opacity: 1; transform: scale(1); }
  86.154% { opacity: 1; transform: scale(1); }
  88.462% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
.til-b2 { animation: til-b2-k 13s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
@keyframes til-bt0-k {
  0% { opacity: 1; }
  0% { opacity: 1; }
  0.385% { opacity: 1; }
  19.231% { opacity: 1; }
  19.615% { opacity: 0; }
  100% { opacity: 0; }
}
.til-bt0 { animation: til-bt0-k 13s linear 0s infinite both; opacity: 0; }
@keyframes til-bt1-k {
  0% { opacity: 0; }
  19.231% { opacity: 0; }
  19.615% { opacity: 1; }
  30% { opacity: 1; }
  30.385% { opacity: 0; }
  100% { opacity: 0; }
}
.til-bt1 { animation: til-bt1-k 13s linear 0s infinite both; opacity: 0; }
@keyframes til-bt2-k {
  0% { opacity: 0; }
  30% { opacity: 0; }
  30.385% { opacity: 1; }
  100% { opacity: 1; }
}
.til-bt2 { animation: til-bt2-k 13s linear 0s infinite both; }
@keyframes til-bar-k {
  0% { opacity: 0; transform: translateY(80px); }
  7.308% { opacity: 0; transform: translateY(80px); }
  7.692% { opacity: 1; transform: translateY(80px); }
  10.385% { opacity: 1; transform: translateY(0px); }
  86.154% { opacity: 1; transform: translateY(0px); }
  89.231% { opacity: 1; transform: translateY(80px); }
  89.615% { opacity: 0; transform: translateY(80px); }
  100% { opacity: 0; transform: translateY(80px); }
}
.til-bar { animation: til-bar-k 13s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; opacity: 0; }
@keyframes til-dim-k {
  0% { opacity: 0; }
  41.538% { opacity: 0; }
  44.615% { opacity: 0.38; }
  80.769% { opacity: 0.38; }
  83.846% { opacity: 0; }
  100% { opacity: 0; }
}
.til-dim { animation: til-dim-k 13s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; opacity: 0; }
@keyframes til-sheet-k {
  0% { transform: translateY(400px); }
  41.538% { transform: translateY(400px); }
  45% { transform: translateY(0px); }
  80.769% { transform: translateY(0px); }
  84.231% { transform: translateY(400px); }
  100% { transform: translateY(400px); }
}
.til-sheet { animation: til-sheet-k 13s cubic-bezier(0.2, 0.8, 0.2, 1) 0s infinite both; transform: translateY(400px); }
@keyframes til-place-k {
  0% { fill: #1f7a2f; }
  57.308% { fill: #1f7a2f; }
  58.462% { fill: #0b2a1f; }
  100% { fill: #0b2a1f; }
}
.til-place { animation: til-place-k 13s linear 0s infinite both; }
@keyframes til-placet-k {
  0% { opacity: 1; }
  57.692% { opacity: 1; }
  58.077% { opacity: 0; }
  100% { opacity: 0; }
}
.til-placet { animation: til-placet-k 13s linear 0s infinite both; }
@keyframes til-placed-k {
  0% { opacity: 0; }
  58.077% { opacity: 0; }
  59.231% { opacity: 1; }
  100% { opacity: 1; }
}
.til-placed { animation: til-placed-k 13s linear 0s infinite both; opacity: 0; }
@keyframes til-tap0-k {
  0% { opacity: 0; transform: scale(0.3); }
  6.154% { opacity: 0; transform: scale(0.3); }
  6.538% { opacity: 0.55; transform: scale(0.4); }
  10.385% { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}
.til-tap0 { animation: til-tap0-k 13s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
@keyframes til-tap1-k {
  0% { opacity: 0; transform: scale(0.3); }
  18.462% { opacity: 0; transform: scale(0.3); }
  18.846% { opacity: 0.55; transform: scale(0.4); }
  22.692% { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}
.til-tap1 { animation: til-tap1-k 13s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
@keyframes til-tap2-k {
  0% { opacity: 0; transform: scale(0.3); }
  29.231% { opacity: 0; transform: scale(0.3); }
  29.615% { opacity: 0.55; transform: scale(0.4); }
  33.462% { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}
.til-tap2 { animation: til-tap2-k 13s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
@keyframes til-tap3-k {
  0% { opacity: 0; transform: scale(0.3); }
  40% { opacity: 0; transform: scale(0.3); }
  40.385% { opacity: 0.55; transform: scale(0.4); }
  44.231% { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}
.til-tap3 { animation: til-tap3-k 13s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
@keyframes til-tap4-k {
  0% { opacity: 0; transform: scale(0.3); }
  56.923% { opacity: 0; transform: scale(0.3); }
  57.308% { opacity: 0.55; transform: scale(0.4); }
  61.154% { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}
.til-tap4 { animation: til-tap4-k 13s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
@keyframes chat-led-k {
  0% { opacity: 1; }
  49.286% { opacity: 1; }
  50% { opacity: 0.25; }
  100% { opacity: 0.25; }
}
.chat-led { animation: chat-led-k 1.4s linear 0s infinite both; }
@keyframes chat-u1-k {
  0% { opacity: 0; transform: translateY(10px); }
  9.412% { opacity: 0; transform: translateY(10px); }
  11.176% { opacity: 1; transform: translateY(0px); }
  91.765% { opacity: 1; transform: translateY(0px); }
  94.118% { opacity: 0; transform: translateY(0px); }
  100% { opacity: 0; transform: translateY(0px); }
}
.chat-u1 { animation: chat-u1-k 17s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes chat-c1d0-k {
  0% { opacity: 0.25; }
  27.778% { opacity: 1; }
  55.556% { opacity: 0.25; }
  100% { opacity: 0.25; }
}
.chat-c1d0 { animation: chat-c1d0-k 0.9s linear 0.0s infinite both; }
@keyframes chat-c1d1-k {
  0% { opacity: 0.25; }
  27.778% { opacity: 1; }
  55.556% { opacity: 0.25; }
  100% { opacity: 0.25; }
}
.chat-c1d1 { animation: chat-c1d1-k 0.9s linear 0.15s infinite both; }
@keyframes chat-c1d2-k {
  0% { opacity: 0.25; }
  27.778% { opacity: 1; }
  55.556% { opacity: 0.25; }
  100% { opacity: 0.25; }
}
.chat-c1d2 { animation: chat-c1d2-k 0.9s linear 0.3s infinite both; }
@keyframes chat-c1r-k {
  0% { opacity: 0; }
  11.765% { opacity: 0; }
  12.647% { opacity: 1; }
  17.059% { opacity: 1; }
  17.941% { opacity: 0; }
  100% { opacity: 0; }
}
.chat-c1r { animation: chat-c1r-k 17s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; opacity: 0; }
@keyframes chat-c1-k {
  0% { opacity: 0; }
  17.647% { opacity: 0; }
  18.529% { opacity: 1; }
  91.765% { opacity: 1; }
  94.118% { opacity: 0; }
  100% { opacity: 0; }
}
.chat-c1 { animation: chat-c1-k 17s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes chat-m1-k {
  0% { opacity: 0; }
  17.941% { opacity: 0; }
  19.118% { opacity: 1; }
  91.765% { opacity: 1; }
  94.118% { opacity: 0; }
  100% { opacity: 0; }
}
.chat-m1 { animation: chat-m1-k 17s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes chat-a1-k {
  0% { opacity: 0; }
  18.118% { opacity: 0; }
  18.235% { opacity: 1; }
  91.765% { opacity: 1; }
  94.118% { opacity: 0; }
  100% { opacity: 0; }
}
.chat-a1 { animation: chat-a1-k 17s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes chat-a1c-k {
  0% { transform: scaleX(1); }
  18.235% { transform: scaleX(1); }
  22.941% { transform: scaleX(0); }
  94.706% { transform: scaleX(0); }
  94.824% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
.chat-a1c { animation: chat-a1c-k 17s linear 0s infinite both; transform-box: fill-box; transform-origin: 100% 50%; transform: scaleX(0); }
@keyframes chat-a2-k {
  0% { opacity: 0; }
  22.824% { opacity: 0; }
  22.941% { opacity: 1; }
  91.765% { opacity: 1; }
  94.118% { opacity: 0; }
  100% { opacity: 0; }
}
.chat-a2 { animation: chat-a2-k 17s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes chat-a2c-k {
  0% { transform: scaleX(1); }
  22.941% { transform: scaleX(1); }
  25.882% { transform: scaleX(0); }
  94.706% { transform: scaleX(0); }
  94.824% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
.chat-a2c { animation: chat-a2c-k 17s linear 0s infinite both; transform-box: fill-box; transform-origin: 100% 50%; transform: scaleX(0); }
@keyframes chat-a3-k {
  0% { opacity: 0; }
  27.059% { opacity: 0; }
  28.824% { opacity: 1; }
  91.765% { opacity: 1; }
  94.118% { opacity: 0; }
  100% { opacity: 0; }
}
.chat-a3 { animation: chat-a3-k 17s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes chat-u2-k {
  0% { opacity: 0; transform: translateY(10px); }
  44.706% { opacity: 0; transform: translateY(10px); }
  46.471% { opacity: 1; transform: translateY(0px); }
  91.765% { opacity: 1; transform: translateY(0px); }
  94.118% { opacity: 0; transform: translateY(0px); }
  100% { opacity: 0; transform: translateY(0px); }
}
.chat-u2 { animation: chat-u2-k 17s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes chat-c2d0-k {
  0% { opacity: 0.25; }
  27.778% { opacity: 1; }
  55.556% { opacity: 0.25; }
  100% { opacity: 0.25; }
}
.chat-c2d0 { animation: chat-c2d0-k 0.9s linear 0.0s infinite both; }
@keyframes chat-c2d1-k {
  0% { opacity: 0.25; }
  27.778% { opacity: 1; }
  55.556% { opacity: 0.25; }
  100% { opacity: 0.25; }
}
.chat-c2d1 { animation: chat-c2d1-k 0.9s linear 0.15s infinite both; }
@keyframes chat-c2d2-k {
  0% { opacity: 0.25; }
  27.778% { opacity: 1; }
  55.556% { opacity: 0.25; }
  100% { opacity: 0.25; }
}
.chat-c2d2 { animation: chat-c2d2-k 0.9s linear 0.3s infinite both; }
@keyframes chat-c2r-k {
  0% { opacity: 0; }
  47.059% { opacity: 0; }
  47.941% { opacity: 1; }
  51.765% { opacity: 1; }
  52.647% { opacity: 0; }
  100% { opacity: 0; }
}
.chat-c2r { animation: chat-c2r-k 17s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; opacity: 0; }
@keyframes chat-c2-k {
  0% { opacity: 0; }
  52.353% { opacity: 0; }
  53.235% { opacity: 1; }
  91.765% { opacity: 1; }
  94.118% { opacity: 0; }
  100% { opacity: 0; }
}
.chat-c2 { animation: chat-c2-k 17s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes chat-m2-k {
  0% { opacity: 0; }
  52.647% { opacity: 0; }
  53.824% { opacity: 1; }
  91.765% { opacity: 1; }
  94.118% { opacity: 0; }
  100% { opacity: 0; }
}
.chat-m2 { animation: chat-m2-k 17s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes chat-b1-k {
  0% { opacity: 0; }
  52.824% { opacity: 0; }
  52.941% { opacity: 1; }
  91.765% { opacity: 1; }
  94.118% { opacity: 0; }
  100% { opacity: 0; }
}
.chat-b1 { animation: chat-b1-k 17s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes chat-b1c-k {
  0% { transform: scaleX(1); }
  52.941% { transform: scaleX(1); }
  57.647% { transform: scaleX(0); }
  94.706% { transform: scaleX(0); }
  94.824% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
.chat-b1c { animation: chat-b1c-k 17s linear 0s infinite both; transform-box: fill-box; transform-origin: 100% 50%; transform: scaleX(0); }
@keyframes chat-b2-k {
  0% { opacity: 0; }
  57.529% { opacity: 0; }
  57.647% { opacity: 1; }
  91.765% { opacity: 1; }
  94.118% { opacity: 0; }
  100% { opacity: 0; }
}
.chat-b2 { animation: chat-b2-k 17s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes chat-b2c-k {
  0% { transform: scaleX(1); }
  57.647% { transform: scaleX(1); }
  62.353% { transform: scaleX(0); }
  94.706% { transform: scaleX(0); }
  94.824% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
.chat-b2c { animation: chat-b2c-k 17s linear 0s infinite both; transform-box: fill-box; transform-origin: 100% 50%; transform: scaleX(0); }
@keyframes chat-b3-k {
  0% { opacity: 0; }
  62.235% { opacity: 0; }
  62.353% { opacity: 1; }
  91.765% { opacity: 1; }
  94.118% { opacity: 0; }
  100% { opacity: 0; }
}
.chat-b3 { animation: chat-b3-k 17s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; }
@keyframes chat-b3c-k {
  0% { transform: scaleX(1); }
  62.353% { transform: scaleX(1); }
  66.471% { transform: scaleX(0); }
  94.706% { transform: scaleX(0); }
  94.824% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
.chat-b3c { animation: chat-b3c-k 17s linear 0s infinite both; transform-box: fill-box; transform-origin: 100% 50%; transform: scaleX(0); }
@keyframes chat-ph-k {
  0% { opacity: 1; }
  1.471% { opacity: 1; }
  1.765% { opacity: 0; }
  9.118% { opacity: 0; }
  9.412% { opacity: 1; }
  35% { opacity: 1; }
  35.294% { opacity: 0; }
  44.412% { opacity: 0; }
  44.706% { opacity: 1; }
  100% { opacity: 1; }
}
.chat-ph { animation: chat-ph-k 17s linear 0s infinite both; }
@keyframes chat-t0-k {
  0% { opacity: 0; }
  1.765% { opacity: 0; }
  2.059% { opacity: 1; }
  9.118% { opacity: 1; }
  9.412% { opacity: 0; }
  100% { opacity: 0; }
}
.chat-t0 { animation: chat-t0-k 17s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; opacity: 0; }
@keyframes chat-t0c-k {
  0% { transform: scaleX(1); }
  1.765% { transform: scaleX(1); }
  7.353% { transform: scaleX(0); }
  100% { transform: scaleX(0); }
}
.chat-t0c { animation: chat-t0c-k 17s linear 0s infinite both; transform-box: fill-box; transform-origin: 100% 50%; }
@keyframes chat-t1-k {
  0% { opacity: 0; }
  35.294% { opacity: 0; }
  35.588% { opacity: 1; }
  44.412% { opacity: 1; }
  44.706% { opacity: 0; }
  100% { opacity: 0; }
}
.chat-t1 { animation: chat-t1-k 17s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; opacity: 0; }
@keyframes chat-t1c-k {
  0% { transform: scaleX(1); }
  35.294% { transform: scaleX(1); }
  42.647% { transform: scaleX(0); }
  100% { transform: scaleX(0); }
}
.chat-t1c { animation: chat-t1c-k 17s linear 0s infinite both; transform-box: fill-box; transform-origin: 100% 50%; }
@keyframes chat-send-k {
  0% { transform: scale(1); }
  8.529% { transform: scale(1); }
  9.118% { transform: scale(0.86); }
  10% { transform: scale(1); }
  43.824% { transform: scale(1); }
  44.412% { transform: scale(0.86); }
  45.294% { transform: scale(1); }
  100% { transform: scale(1); }
}
.chat-send { animation: chat-send-k 17s cubic-bezier(0.2, 0.7, 0.2, 1) 0s infinite both; transform-box: fill-box; transform-origin: 50% 50%; }
.mcp-chat { flex: 1; background: var(--surface); }
.mcp-chat .anim-svg { display: block; width: 100%; height: auto; }
.tool-names {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: -2px;
  font-size: 10.5px;
  line-height: 1.4;
}
.tool-names code { font-size: 10.5px; color: var(--ink-secondary); }
/* ANIMATED EVIDENCE: generated keyframes end */

/* Static export: motion is opt-in after the vanilla controller is ready. */
.sh-still *, .sh-still *::before, .sh-still *::after {
  animation: none !important;
  transition: none !important;
}
.motion-paused, .motion-paused *, .motion-paused::before,
.motion-paused::after, .motion-paused *::before, .motion-paused *::after {
  animation-play-state: paused !important;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.footer-inner .inline-link { opacity: 1; }
/* Retain a static illustration on small screens, too. */
@media (max-width: 1199px) {
  .sh-plate { display: block; position: relative; top: auto; width: min(100%, 480px); margin: 24px auto 0; }
}

/* Dark hero variants (L3, L4, L6) power on with the same tube flicker as the
   light ones: frame first, then the 3D stage and the labels (the nodes already
   flicker in one by one). Only elements without their own looping animation are targeted, so nothing
   already animated is overridden. */
.sh-plate-svg[data-hero^="L"] { animation: sh-flicker 0.7s steps(1, end) 0.25s backwards; }
.sh-plate:has(.sh-plate-svg[data-hero^="L"]) .l3-stage,
.sh-plate:has(.sh-plate-svg[data-hero^="L"]) .l4-stage,
.sh-plate:has(.sh-plate-svg[data-hero^="L"]) .l6-stage { animation: sh-flicker 0.7s steps(1, end) 0.6s backwards; }
.sh-plate-svg[data-hero^="L"] text:not([class]) { animation: sh-flicker 0.6s steps(1, end) 1.1s backwards; }

/* Social links for phones: the header icon is hidden under 768px, so the hero
   gets a row of compact, left-aligned buttons under Discuss / Explore. The row
   has room for more icon buttons (LinkedIn, etc.). */
.hero-social { display: none; }
@media (max-width: 768px) {
  .hero-actions .hero-social { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
  .hero-actions .hero-social .btn { flex: 0 0 auto; width: auto; }
  .hero-social .btn-face { gap: 8px; }
}