:root {
  --bg: #141414;
  --fg: #F2F2EE;
  --muted: #A3A3A0;
  --dim: #5A5A58;
  --accent: #FF6A2B;
  --dur: 4800ms;
  --sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, Menlo, Consolas, monospace;
}

body { margin: 0; background: var(--bg); }

a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--dim); text-decoration-thickness: 2px; text-underline-offset: 7px; }
a:hover { color: #FFFFFF; text-decoration-color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

.page { position: relative; min-height: 100vh; min-height: 100svh; box-sizing: border-box; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--sans); }

.grid { position: absolute; top: -6px; left: -14px; display: flex; font-family: var(--mono); font-size: 14px; line-height: 20px; color: #212121; white-space: pre; pointer-events: none; user-select: none; }
.grid > div { width: 3ch; flex-shrink: 0; animation-duration: var(--dur); }

.content { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; box-sizing: border-box; padding: clamp(28px, 5vw, 72px); display: flex; flex-direction: column; justify-content: space-between; gap: 72px; }

.intro { display: flex; flex-direction: column; gap: 36px; }
.headline { display: flex; flex-direction: column; gap: 22px; }
h1 { margin: 0; font-weight: 500; font-size: clamp(56px, 9.4vw, 148px); line-height: 0.95; letter-spacing: -0.02em; text-wrap: balance; }
.status { margin: 0; display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: clamp(13px, 1.1vw, 16px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.swatch { width: 0.6em; height: 0.6em; flex-shrink: 0; background: var(--accent); }
.lede { margin: 0; max-width: 26ch; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.45; color: var(--muted); text-wrap: pretty; }

.foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 48px; }
.contact { display: flex; flex-direction: column; gap: 14px; }
.label { margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.contact-row { display: flex; align-items: center; gap: 14px; font-size: clamp(18px, 1.6vw, 22px); }
.mail { display: block; width: 28px; height: 20px; flex-shrink: 0; shape-rendering: crispEdges; fill: var(--muted); }

.servo { display: flex; flex-direction: column; gap: 14px; flex-shrink: 0; margin-left: auto; width: 240px; }
@media (min-width: 720px) { .servo { width: min(320px, 60svh); } }
@media (min-width: 1200px) { .servo { width: min(400px, 60svh); } }
@media (max-width: 719px), (orientation: portrait) and (max-width: 1023px) {
  .content { gap: 48px; }
  .foot { flex: 1; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-end; }
  .servo { order: -1; margin: auto; width: min(100%, 420px); }
}
.servo svg { display: block; width: 100%; height: auto; shape-rendering: crispEdges; }
.servo .acc { fill: var(--accent); }
.servo .arm { fill: var(--fg); }
.readout { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.values { display: grid; justify-items: end; }
.values > span { grid-area: 1 / 1; }
.hex { color: var(--accent); }

.tx { animation-iteration-count: infinite; animation-timing-function: linear; }
.tx00 { animation-name: tx00; } .tx2D { animation-name: tx2D; } .tx5A { animation-name: tx5A; } .tx87 { animation-name: tx87; } .txB4 { animation-name: txB4; }
.sv { opacity: 0; animation-duration: var(--dur); animation-iteration-count: infinite; animation-timing-function: step-end; }
.sv-a0 { animation-name: a0; } .sv-a45 { animation-name: a45; } .sv-a90 { animation-name: a90; } .sv-a135 { animation-name: a135; } .sv-a180 { animation-name: a180; }

@media (prefers-reduced-motion: reduce) {
  .tx, .sv { animation: none; }
  .sv-a90 { opacity: 1; }
}

@keyframes tx00 { 0% { color: #3E3E3B } 12.5% { color: #3E3E3B } 25% { color: #212121 } 100% { color: #212121 } }
@keyframes tx2D { 0% { color: #3E3E3B } 12.49% { color: #212121 } 12.5% { color: #3E3E3B } 25% { color: #3E3E3B } 37.5% { color: #212121 } 87.49% { color: #212121 } 87.5% { color: #3E3E3B } 100% { color: #3E3E3B } }
@keyframes tx5A { 0% { color: #212121 } 24.99% { color: #212121 } 25% { color: #3E3E3B } 37.5% { color: #3E3E3B } 50% { color: #212121 } 74.99% { color: #212121 } 75% { color: #3E3E3B } 87.5% { color: #3E3E3B } 100% { color: #212121 } }
@keyframes tx87 { 0% { color: #212121 } 37.49% { color: #212121 } 37.5% { color: #3E3E3B } 50% { color: #3E3E3B } 62.49% { color: #212121 } 62.5% { color: #3E3E3B } 75% { color: #3E3E3B } 87.5% { color: #212121 } 100% { color: #212121 } }
@keyframes txB4 { 0% { color: #212121 } 49.99% { color: #212121 } 50% { color: #3E3E3B } 62.5% { color: #3E3E3B } 75% { color: #212121 } 100% { color: #212121 } }
@keyframes a0 { 0% { opacity: 1 } 12.5% { opacity: 0 } 100% { opacity: 0 } }
@keyframes a45 { 0% { opacity: 0 } 12.5% { opacity: 1 } 25% { opacity: 0 } 87.5% { opacity: 1 } 100% { opacity: 1 } }
@keyframes a90 { 0% { opacity: 0 } 25% { opacity: 1 } 37.5% { opacity: 0 } 75% { opacity: 1 } 87.5% { opacity: 0 } 100% { opacity: 0 } }
@keyframes a135 { 0% { opacity: 0 } 37.5% { opacity: 1 } 50% { opacity: 0 } 62.5% { opacity: 1 } 75% { opacity: 0 } 100% { opacity: 0 } }
@keyframes a180 { 0% { opacity: 0 } 50% { opacity: 1 } 62.5% { opacity: 0 } 100% { opacity: 0 } }

@media (orientation: landscape) and (max-height: 500px) {
  .content { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; gap: 24px 48px; }
  h1 { font-size: clamp(40px, 7vw, 148px); }
  .foot { display: contents; }
  .contact { grid-column: 1; grid-row: 2; }
  .servo { grid-column: 2; grid-row: 1 / 3; align-self: end; margin: 0; width: min(320px, 70svh); }
}