@font-face {
  font-family: "Owners";
  src: url("./public/fonts/owners-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Owners";
  src: url("./public/fonts/owners-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: oklch(0.2264 0 264.480011);
  --bg-deep: #0f1110;
  --surface: #202321;
  --surface-raised: #2c2f2e;
  --line: #414746;
  --line-soft: #303433;
  --text: rgb(229, 234, 222);
  --text-warm: rgb(229, 234, 222);
  --divider: rgb(229 234 222 / .3);
  --muted: #aab3ad;
  --quiet: #737d77;
  --green: #29ffa4;
  --blue: #3d73ff;
  --black: #050606;
  --column: 720px;
  --wide: 980px;
  --display: "Owners", "Helvetica Neue", Arial, sans-serif;
  --body: "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: linear-gradient(rgb(41 255 164 / .025) 1px, transparent 1px), linear-gradient(90deg, rgb(41 255 164 / .025) 1px, transparent 1px), var(--bg);
  background-size: 48px 48px;
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.skip-link { position: fixed; z-index: 100; left: 12px; top: 12px; transform: translateY(-150%); background: var(--green); color: var(--black); padding: 8px 12px; font-family: var(--mono); font-size: 13px; }
.skip-link:focus { transform: translateY(0); }
.shell { width: min(var(--column), calc(100% - 40px)); margin-inline: auto; }
.shell-wide { width: min(var(--wide), calc(100% - 40px)); margin-inline: auto; }
.signal-bar { min-height: 36px; padding: 7px 20px; display: flex; justify-content: center; gap: 22px; background: var(--blue); color: var(--text-warm); font-family: var(--mono); font-size: 12px; line-height: 22px; letter-spacing: .08em; text-transform: uppercase; }
.signal-bar span + span { opacity: .72; }
.signal-bar .countdown { display: inline-flex; gap: 8px; opacity: .72; }
.signal-bar time { min-width: 86px; color: var(--text-warm); font-variant-numeric: tabular-nums; }
.site-header { min-height: 84px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--divider); }
.brand { display: inline-flex; align-items: center; text-decoration: none; font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: normal; }
.brand-dot { color: var(--green); }
nav { display: flex; align-items: center; gap: 22px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover, nav a:focus-visible { color: var(--green); }
.nav-cta { height: 32px; padding: 4px 10px 4px 5px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--green); color: var(--green); }
.github-avatar { width: 22px; height: 22px; display: block; border: 2px solid var(--green); border-radius: 50%; background: var(--green); object-fit: cover; }
.nav-cta:hover, .nav-cta:focus-visible { background: var(--green); border-color: var(--green); color: var(--black); }
.nav-cta:hover .github-avatar, .nav-cta:focus-visible .github-avatar { border-color: var(--black); }
.hero { position: relative; z-index: 1; min-height: 43.3vw; padding: 64px 0 0; display: flex; align-items: flex-start; overflow: visible; isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: 2; bottom: 0; left: 50%; width: min(var(--column),100%); transform: translateX(-50%); border-bottom: 1px solid var(--divider); pointer-events: none; }
.hero::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg,var(--bg) 0%,oklch(0.2264 0 264.480011 / .96) 43%,oklch(0.2264 0 264.480011 / .2) 82%,transparent 100%); pointer-events: none; }
.hero-copy-block { position: relative; z-index: 4; width: min(var(--column),100%); margin-inline: auto; }
.title-measure { --measure-top: clamp(4px,.4vw,6px); --measure-bottom: clamp(11px,1vw,14px); position: relative; width: min(560px,100%); margin-block: 20px; padding-block: 0; }
.title-measure::before, .title-measure::after { content: ""; position: absolute; z-index: 3; right: 0; left: 0; border-top: 1px solid var(--green); pointer-events: none; }
.title-measure::before { top: var(--measure-top); }
.title-measure::after { bottom: var(--measure-bottom); }
.title-measure h1 { margin: 0; }
.hero-dimension { position: absolute; z-index: 4; top: var(--measure-top); right: 18px; bottom: var(--measure-bottom); width: 1px; display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom, var(--green) 0 calc(50% - 16px), transparent calc(50% - 16px) calc(50% + 16px), var(--green) calc(50% + 16px) 100%); color: var(--green); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
.hero-dimension::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); border-right: 4px solid transparent; border-bottom: 9px solid var(--green); border-left: 4px solid transparent; }
.hero-dimension::after { content: ""; position: absolute; right: auto; bottom: 0; left: 50%; transform: translateX(-50%); border-top: 9px solid var(--green); border-right: 4px solid transparent; border-left: 4px solid transparent; }
.eyebrow, .section-index { margin: 0; color: var(--green); font-family: var(--mono); font-size: 12px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.status-dot { width: 8px; height: 8px; margin-right: 8px; display: inline-block; border-radius: 50%; background: var(--green); box-shadow: 0 0 16px rgb(41 255 164 / .75); }
h1, h2, h3, p { text-wrap: pretty; }
h1 { max-width: 560px; margin: 20px 0; color: var(--text-warm); font-family: var(--display); font-size: clamp(42px,5.6vw,62px); font-weight: 700; letter-spacing: normal; line-height: 1; }
.accent-copy { color: var(--green); }
.hero-copy { max-width: 430px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; letter-spacing: -.02em; }
.hero-copy-block > .button { margin-top: 28px; }
.beaver-figure { position: absolute; z-index: 3; top: 20.4vw; right: auto; bottom: auto; left: 92.8%; width: 45.8vw; margin: 0; opacity: 1; transform: translate(-50%,-50%); }
.beaver-reveal { --x: -9999px; --y: -9999px; --r: 112px; display: grid; cursor: crosshair; filter: none; }
.beaver-reveal > img { grid-area: 1 / 1; display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; opacity: 1; mix-blend-mode: normal; }
.beaver-top { z-index: 2; pointer-events: none; opacity: 1; filter: none; mix-blend-mode: normal; -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y),rgb(0 0 0 / var(--spotlight-cover,0)) 0%,rgb(0 0 0 / var(--spotlight-cover,0)) 55%,#000 75%,#000 100%); mask-image: radial-gradient(circle var(--r) at var(--x) var(--y),rgb(0 0 0 / var(--spotlight-cover,0)) 0%,rgb(0 0 0 / var(--spotlight-cover,0)) 55%,#000 75%,#000 100%); }
.beaver-figure figcaption { position: absolute; right: 120px; bottom: 82px; margin: 0; padding: 4px 7px; background: rgb(15 17 16 / .82); border: 1px solid var(--line); color: var(--quiet); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.button { height: 32px; min-height: 32px; padding: 5px 12px; display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; border: 1px solid var(--green); border-radius: 0; font-family: var(--mono); font-size: 12px; line-height: 20px; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; }
.button-primary { background: var(--green); color: var(--black); }
.button:hover, .button:focus-visible { background: transparent; border-color: var(--green); color: var(--green); }
.button-outline { background: transparent; color: var(--green); }
.button-outline:hover, .button-outline:focus-visible { background: var(--green); color: var(--black); }
.section { position: relative; z-index: 0; padding-block: 64px; border-top: 1px solid var(--divider); }
#projects { border-top: 0; }
.section h2, .closing h2 { margin: 14px 0 18px; color: var(--text-warm); font-family: var(--display); font-size: clamp(28px,4vw,38px); font-weight: 500; line-height: 1; letter-spacing: .01em; }
.section-heading-row { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; text-align: left; }
.section-heading-row h2 { margin: 0; padding-bottom: 24px; }
.project-panel { --project-accent: var(--green); --project-band: #173b2e; position: relative; margin-top: 0; border: 1px solid var(--project-accent); background: var(--bg-deep); }
.project-info { padding: 20px 28px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 28px; background: var(--project-band); border-top: 1px solid var(--project-accent); }
.project-title-row { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.project-title-row { grid-column: 1; grid-row: 1; }
.project-title-row h3 { margin: 0; color: var(--text-warm); font-family: var(--display); font-size: 34px; font-weight: 500; line-height: 1; letter-spacing: .01em; }
.project-lede { grid-column: 1; grid-row: 2; max-width: 400px; margin: 8px 0 0; color: rgb(229 234 222 / .84); font-size: 15px; line-height: 1.4; letter-spacing: -.02em; }
.project-tags { grid-column: 2; grid-row: 2; width: 100%; margin: 0; display: flex; flex-wrap: wrap; align-self: end; align-content: flex-end; gap: 7px; }
.project-tags span { padding: 5px 8px; border: 1px solid var(--divider); color: rgb(229 234 222 / .76); font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.project-link { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; margin: 0; align-self: start; justify-self: end; background: var(--project-accent); border-color: var(--project-accent); color: var(--black); }
.project-link:hover, .project-link:focus-visible { background: transparent; border-color: var(--project-accent); color: var(--project-accent); }
.panel-corner { position: absolute; z-index: 5; width: 8px; height: 8px; border-radius: 50%; background: var(--project-accent); pointer-events: none; }
.panel-corner.corner-tl { top: 0; left: 0; transform: translate(-50%,-50%); }
.panel-corner.corner-tr { top: 0; right: 0; transform: translate(50%,-50%); }
.panel-corner.corner-bl { bottom: 0; left: 0; transform: translate(-50%,50%); }
.panel-corner.corner-br { right: 0; bottom: 0; transform: translate(50%,50%); }
.stage-frame { position: relative; width: 100%; aspect-ratio: 8 / 5; overflow: hidden; background: var(--bg-deep); }
.workflow-screenshot { width: 100%; height: 100%; display: block; object-fit: contain; }
.closing { position: relative; min-height: calc(11.8vw + 132px); padding-block: 40px; display: flex; align-items: center; overflow: visible; border-top: 1px solid var(--divider); isolation: isolate; }
.closing-copy { position: relative; z-index: 2; width: 58%; }
.closing h2 { max-width: 420px; margin: 0; font-size: clamp(32px,5vw,46px); }
.closing-accent { color: var(--blue); }
.closing-accent-green { color: var(--green); }
.closing-reveal { --x: -9999px; --y: -9999px; --r: 86px; position: absolute; z-index: 3; top: 11.8vw; right: auto; bottom: auto; left: 78.7%; width: 330px; display: grid; transform: translate(-50%,-50%); cursor: crosshair; filter: drop-shadow(0 18px 24px rgb(0 0 0 / .24)); }
.closing-reveal > img { grid-area: 1 / 1; display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.dam-top { z-index: 2; pointer-events: none; -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y),rgb(0 0 0 / var(--spotlight-cover,0)) 0%,rgb(0 0 0 / var(--spotlight-cover,0)) 55%,#000 75%,#000 100%); mask-image: radial-gradient(circle var(--r) at var(--x) var(--y),rgb(0 0 0 / var(--spotlight-cover,0)) 0%,rgb(0 0 0 / var(--spotlight-cover,0)) 55%,#000 75%,#000 100%); }
.site-footer { min-height: 122px; padding-block: 25px; border-top: 1px solid var(--divider); color: var(--quiet); font-family: var(--mono); font-size: 11px; text-transform: uppercase; }
.legal-note { width: 100%; margin: 0 0 18px; display: block; color: rgb(115 125 119 / .62); font-size: 11px; line-height: 1.55; text-align: justify; text-align-last: justify; }
.footer-row { display: flex; justify-content: space-between; align-items: center; }
.site-footer div { display: flex; gap: 20px; }
.site-footer a { text-decoration: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

@media (max-width: 800px) {
  .signal-bar > span:first-child, nav a:not(.nav-cta) { display: none; }
  .signal-bar { padding-inline: 12px; }
  .site-header { min-height: 72px; }
  .nav-cta { height: 44px; }
  .hero { min-height: 68.8vw; padding-block: 52px; }
  .hero::after { background: linear-gradient(90deg,var(--bg) 0%,oklch(0.2264 0 264.480011 / .9) 60%,oklch(0.2264 0 264.480011 / .3) 100%); }
  h1 { font-size: clamp(36px,11vw,42px); }
  .hero-copy { font-size: 15px; }
  .button { height: auto; min-height: 44px; padding-block: 10px; }
  .beaver-figure { top: 46.7vw; right: auto; bottom: auto; left: 89.1%; width: 44.1vw; opacity: 1; transform: translate(-50%,-50%); }
  .beaver-reveal { --r: 78px; }
  .beaver-figure figcaption { display: none; }
  .section-heading-row { align-items: stretch; flex-direction: column; }
  .project-panel { min-height: 0; }
  .project-info { padding: 24px; display: block; }
  .project-title-row h3 { font-size: 34px; }
  .project-lede { max-width: none; font-size: 16px; }
  .project-tags { width: 100%; margin-top: 14px; }
  .project-link { width: 100%; min-width: 0; margin-top: 22px; }
  .stage-frame { aspect-ratio: 8 / 5; }
  .closing { min-height: 39.4vw; padding-block: 64px 48px; display: block; }
  .closing-copy { width: 100%; }
  .closing-reveal { --r: 74px; position: absolute; top: 22.3vw; right: auto; bottom: auto; left: 78.8%; width: 42.7vw; margin: 0; opacity: .9; transform: translate(-50%,-50%); transform-origin: center; }
  .site-footer { padding-block: 24px; }
  .legal-note { text-align: left; text-align-last: auto; }
  .footer-row { align-items: center; flex-direction: row; gap: 10px; white-space: nowrap; }
  .footer-row > div { gap: 12px; }
}

@media (max-width: 800px), (hover: none), (pointer: coarse) {
  .beaver-reveal, .closing-reveal { touch-action: none; }
}

@media (max-width: 480px) {
  .hero { min-height: 123.8vw; }
  .beaver-figure { top: 96.3vw; left: 82.9%; width: 55vw; }
  .closing { min-height: 66vw; }
  .closing-reveal { top: 44.4vw; left: 78.2%; width: 53vw; }
}

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