:root {
  --ou-bg-deep:#121816;
  --ou-bg-navy:#0d2230;
  --ou-charcoal:#1a1e1d;
  --ou-moss:#2bd576;
  --ou-blue:#00b3ff;
  --ou-terra:#b86a4a;
  --ou-cream:#f0ebe1;
  --ou-line:#3a4742;
  --ou-pale-moss:#a3e6bb;
  --ou-steel:#7cc4ff;
  --ou-font-head:"Space Grotesk", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ou-font-body:"Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ou-font-mono:"JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --ou-rail:15.5rem;
  --ou-ease:cubic-bezier(.22,.61,.36,1);
}

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

html {
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body {
  margin:0;
  background:var(--ou-bg-deep);
  color:var(--ou-cream);
  font-family:var(--ou-font-body);
  font-size:1rem;
  line-height:1.75;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

::selection {
  background:var(--ou-moss);
  color:#07120c;
}

h1, h2, h3, h4 {
  font-family:var(--ou-font-head);
  font-weight:600;
  line-height:1.2;
  color:var(--ou-cream);
}

p, ul, ol, figure {
  margin:0 0 1rem;
}

ul, ol {
  padding-left:1.25rem;
}

img {
  max-width:100%;
  height:auto;
  display:block;
}

a {
  color:var(--ou-blue);
  text-decoration:none;
}

a:hover {
  color:var(--ou-moss);
  text-decoration:none;
}

button {
  font:inherit;
}

:focus-visible {
  outline:2px solid var(--ou-moss);
  outline-offset:3px;
  border-radius:2px;
}

.ou-container {
  width:min(76rem, 100% - 2rem);
  margin-inline:auto;
}

.ou-visually-hidden {
  position:absolute !important;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

.ou-skip {
  position:fixed;
  top:.8rem;
  left:.8rem;
  z-index:4000;
  padding:.65rem 1.1rem;
  background:var(--ou-moss);
  border:0;
  color:#07120c;
  font-family:var(--ou-font-head);
  font-weight:700;
  font-size:.85rem;
  border-radius:0;
  transform:translateY(-300%);
  transition:transform .25s var(--ou-ease);
  box-shadow:0 4px 30px rgba(43,213,118,.3);
}

.ou-skip:focus {
  transform:translateY(0);
  outline:none;
}

.ou-header {
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  z-index:900;
  width:min(21rem, 86vw);
  height:100vh;
  height:100dvh;
  background:linear-gradient(160deg, var(--ou-bg-navy), var(--ou-bg-deep) 52%, var(--ou-charcoal));
  border-right:1px solid var(--ou-line);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  transform:translateX(-105%);
  transition:transform .35s var(--ou-ease), box-shadow .35s var(--ou-ease);
}

.ou-header::before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:1.1rem;
  width:1px;
  background:repeating-linear-gradient(180deg, var(--ou-line) 0 6px, transparent 6px 12px);
  opacity:.8;
  pointer-events:none;
}

.ou-header[data-open] {
  transform:translateX(0);
  box-shadow:20px 0 60px rgba(0,0,0,.45);
}

.ou-header__inner {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  height:100%;
  padding:1.5rem 1rem 1.25rem;
}

.ou-brand {
  display:flex;
  align-items:center;
  gap:.75rem;
  color:var(--ou-cream);
  font-family:var(--ou-font-head);
}

.ou-brand:hover {
  color:var(--ou-cream);
}

.ou-brand__mark {
  width:2.4rem;
  height:2.4rem;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, var(--ou-moss), var(--ou-blue));
  color:#07120c;
  font-family:var(--ou-font-head);
  font-weight:700;
  font-size:1.2rem;
  border-radius:2px;
  flex:0 0 auto;
}

.ou-brand__body {
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.ou-brand__title {
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.04em;
}

.ou-brand__sub {
  font-size:.68rem;
  font-family:var(--ou-font-mono);
  color:var(--ou-blue);
  letter-spacing:.3em;
  text-transform:uppercase;
}

.ou-nav {
  margin-top:2.25rem;
  flex:1;
}

.ou-nav__list {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.2rem;
}

.ou-nav__link {
  position:relative;
  display:flex;
  align-items:baseline;
  gap:.7rem;
  padding:.6rem .7rem;
  color:var(--ou-cream);
  font-family:var(--ou-font-head);
  font-size:.95rem;
  letter-spacing:.02em;
  border-left:2px solid transparent;
  transition:background .2s, color .2s;
}

.ou-nav__link::after {
  content:"";
  position:absolute;
  top:0;
  right:-4px;
  width:6px;
  height:100%;
  background:linear-gradient(180deg, var(--ou-moss), var(--ou-blue));
  transform:skewX(-14deg);
  opacity:0;
  transition:opacity .2s;
}

.ou-nav__link:hover {
  background:rgba(43,213,118,.06);
  color:var(--ou-moss);
}

.ou-nav__link:hover::after {
  opacity:.6;
}

.ou-nav__index {
  font-family:var(--ou-font-mono);
  font-size:.7rem;
  color:var(--ou-blue);
  min-width:1.7rem;
  opacity:.8;
}

.ou-nav__label {
  letter-spacing:.06em;
}

.ou-nav__link[aria-current="page"] {
  background:linear-gradient(90deg, rgba(43,213,118,.12), transparent);
  border-left-color:var(--ou-moss);
  color:var(--ou-moss);
}

.ou-nav__link[aria-current="page"] .ou-nav__index {
  color:var(--ou-moss);
  opacity:1;
}

.ou-nav__link[aria-current="page"]::before {
  content:"●";
  position:absolute;
  right:.7rem;
  font-size:.5rem;
  color:var(--ou-blue);
}

.ou-header__footer {
  margin-top:auto;
  padding-top:1.25rem;
  border-top:1px solid var(--ou-line);
  display:grid;
  gap:.6rem;
}

.ou-header__cta {
  width:100%;
  justify-content:center;
}

.ou-version {
  display:flex;
  align-items:center;
  gap:.45rem;
  font-family:var(--ou-font-mono);
  font-size:.66rem;
  color:rgba(240,235,225,.45);
  letter-spacing:.08em;
}

.ou-marker {
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--ou-moss);
  border-radius:50%;
  box-shadow:0 0 8px rgba(43,213,118,.9);
}

.ou-nav-toggle {
  position:fixed;
  top:.9rem;
  right:.9rem;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  width:2.9rem;
  height:2.9rem;
  background:var(--ou-charcoal);
  border:1px solid var(--ou-line);
  color:var(--ou-cream);
  cursor:pointer;
  padding:.65rem;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}

.ou-nav-toggle__bar {
  display:block;
  width:100%;
  height:2px;
  background:currentColor;
  transition:transform .25s var(--ou-ease), opacity .2s;
}

.ou-nav-toggle__bar + .ou-nav-toggle__bar {
  margin-top:5px;
}

.ou-nav-toggle[aria-expanded="true"] .ou-nav-toggle__bar:nth-child(1) {
  transform:translateY(7px) rotate(45deg);
}

.ou-nav-toggle[aria-expanded="true"] .ou-nav-toggle__bar:nth-child(2) {
  opacity:0;
}

.ou-nav-toggle[aria-expanded="true"] .ou-nav-toggle__bar:nth-child(3) {
  transform:translateY(-7px) rotate(-45deg);
}

.ou-nav-toggle:hover {
  border-color:var(--ou-moss);
  color:var(--ou-moss);
}

.ou-scrim {
  position:fixed;
  inset:0;
  z-index:880;
  background:rgba(5,10,8,.62);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ou-ease);
}

body[data-nav-locked] .ou-scrim {
  opacity:1;
  pointer-events:auto;
}

.ou-progress {
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:3px;
  z-index:3000;
  background:linear-gradient(90deg, var(--ou-moss), var(--ou-blue));
  transform:scaleX(0);
  transform-origin:left center;
  pointer-events:none;
  will-change:transform;
}

#main-content {
  scroll-margin-top:1.5rem;
}

.ou-main {
  min-height:70vh;
}

.ou-btn {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.85rem 1.4rem;
  background:var(--ou-charcoal);
  border:1px solid var(--ou-line);
  color:var(--ou-cream);
  font-family:var(--ou-font-head);
  font-weight:600;
  font-size:.95rem;
  line-height:1;
  cursor:pointer;
  text-decoration:none;
  border-radius:0;
  transition:background .2s, border-color .2s, color .2s, transform .2s;
}

.ou-btn:hover {
  color:var(--ou-moss);
  border-color:var(--ou-moss);
  text-decoration:none;
}

.ou-btn--primary {
  background:var(--ou-moss);
  border-color:var(--ou-moss);
  color:#07120c;
}

.ou-btn--primary:hover {
  background:var(--ou-pale-moss);
  border-color:var(--ou-pale-moss);
  color:#07120c;
}

.ou-btn--outline {
  background:transparent;
}

.ou-btn--sm {
  padding:.55rem .95rem;
  font-size:.8rem;
}

.ou-eyebrow {
  font-family:var(--ou-font-mono);
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ou-blue);
  margin:0 0 1rem;
}

.ou-section {
  padding-block:clamp(2.5rem, 7vh, 5.5rem);
}

.ou-section__head {
  display:flex;
  align-items:baseline;
  gap:1rem;
  margin-bottom:2rem;
  border-bottom:1px solid var(--ou-line);
  padding-bottom:.75rem;
}

.ou-section__index {
  font-family:var(--ou-font-mono);
  font-size:.78rem;
  color:var(--ou-moss);
  letter-spacing:.1em;
}

.ou-section__title {
  margin:0;
  font-size:clamp(1.8rem, 4vw, 3.2rem);
  letter-spacing:.02em;
  text-transform:uppercase;
}

.ou-grid {
  display:grid;
  gap:1.25rem;
  grid-template-columns:1fr;
}

.ou-card {
  position:relative;
  background:linear-gradient(180deg, var(--ou-charcoal), #141a18);
  border:1px solid var(--ou-line);
  padding:1.5rem;
  border-radius:0;
  overflow:hidden;
  transition:transform .3s var(--ou-ease), border-color .3s, box-shadow .3s;
}

.ou-card::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:44px;
  height:3px;
  background:linear-gradient(90deg, var(--ou-moss), var(--ou-blue));
}

.ou-card::after {
  content:"";
  position:absolute;
  top:0;
  right:0;
  border-style:solid;
  border-width:0 14px 14px 0;
  border-color:transparent var(--ou-blue) transparent transparent;
  opacity:.55;
}

.ou-card:hover {
  transform:translateY(-5px);
  border-color:#4d6357;
  box-shadow:0 14px 44px rgba(0,0,0,.35);
}

.ou-table {
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
}

.ou-table th,
.ou-table td {
  padding:.85rem 1rem;
  border-bottom:1px solid var(--ou-line);
  text-align:left;
}

.ou-table thead th {
  font-family:var(--ou-font-mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ou-blue);
  border-bottom:2px solid var(--ou-moss);
}

.ou-table tbody tr:hover {
  background:rgba(43,213,118,.045);
}

.ou-media {
  position:relative;
  overflow:hidden;
  background:var(--ou-bg-navy);
  border:1px solid var(--ou-line);
  aspect-ratio:16/9;
}

.ou-media::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(115deg, transparent 32%, rgba(43,213,118,.1) 48%, transparent 64%);
  opacity:.8;
}

.ou-media img {
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
}

.ou-media--wide {
  aspect-ratio:21/9;
}

.ou-media--portrait {
  aspect-ratio:3/4;
}

.ou-media--square {
  aspect-ratio:1;
}

.ou-crumbs {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem;
  margin:0 0 1.5rem;
  padding:0;
  list-style:none;
  font-family:var(--ou-font-mono);
  font-size:.75rem;
  color:rgba(240,235,225,.5);
}

.ou-crumbs__sep {
  color:var(--ou-line);
}

.ou-crumbs a {
  color:var(--ou-blue);
  font-size:.75rem;
}

.ou-crumbs a:hover {
  color:var(--ou-moss);
}

.ou-toc {
  list-style:none;
  margin:1rem 0 2rem;
  padding:0;
  border:1px solid var(--ou-line);
  background:var(--ou-charcoal);
}

.ou-toc__item {
  border-bottom:1px solid var(--ou-line);
}

.ou-toc__item:last-child {
  border-bottom:0;
}

.ou-toc__link {
  position:relative;
  display:flex;
  gap:.6rem;
  align-items:baseline;
  padding:.7rem 1rem;
  color:var(--ou-cream);
  border-left:3px solid transparent;
  font-size:.9rem;
}

.ou-toc__link:hover {
  color:var(--ou-moss);
  background:rgba(43,213,118,.05);
}

.ou-toc__link.is-active {
  border-left-color:var(--ou-moss);
  background:rgba(43,213,118,.1);
  color:var(--ou-moss);
}

.ou-toc__index {
  font-family:var(--ou-font-mono);
  font-size:.72rem;
  color:var(--ou-blue);
}

.ou-footer {
  background:var(--ou-charcoal);
  border-top:1px solid var(--ou-line);
  position:relative;
  margin-top:auto;
  color:rgba(240,235,225,.72);
}

.ou-footer::before {
  content:"";
  display:block;
  height:4px;
  background:linear-gradient(90deg, var(--ou-moss), var(--ou-blue));
}

.ou-footer__inner {
  width:min(80rem, 100% - 2rem);
  margin-inline:auto;
}

.ou-footer__grid {
  display:grid;
  grid-template-columns:2.2fr 1fr 1fr 1.5fr;
  gap:2.5rem;
  padding:3rem 0 2.5rem;
}

.ou-footer__brand-block .ou-brand {
  margin-bottom:1.1rem;
}

.ou-footer__desc {
  font-size:.88rem;
  line-height:1.7;
  color:rgba(240,235,225,.6);
  max-width:30em;
}

.ou-footer__heading {
  margin:0 0 1rem;
  font-size:.8rem;
  font-family:var(--ou-font-mono);
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ou-blue);
}

.ou-footer__links {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.55rem;
}

.ou-footer__link {
  color:var(--ou-cream);
  font-size:.9rem;
}

.ou-footer__link::before {
  content:"›";
  color:var(--ou-moss);
  margin-right:.45rem;
  font-family:var(--ou-font-mono);
}

.ou-footer__link:hover {
  color:var(--ou-moss);
}

.ou-footer__contact-line {
  position:relative;
  padding-left:.9rem;
  margin:.25rem 0;
  font-size:.86rem;
  line-height:1.65;
  color:rgba(240,235,225,.68);
}

.ou-footer__contact-line::before {
  content:"";
  position:absolute;
  left:0;
  top:.6em;
  width:.4rem;
  height:1px;
  background:var(--ou-blue);
}

.ou-footer__bottom {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:.8rem;
  border-top:1px solid var(--ou-line);
  padding:1.25rem 0 1.5rem;
  font-family:var(--ou-font-mono);
  font-size:.75rem;
  color:rgba(240,235,225,.48);
}

.ou-footer__copyright,
.ou-footer__icp {
  margin:0;
}

.ou-to-top {
  position:fixed;
  right:1.1rem;
  bottom:1.1rem;
  z-index:950;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.6rem .85rem;
  background:var(--ou-moss);
  color:#07120c;
  border:1px solid var(--ou-moss);
  font-family:var(--ou-font-head);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.06em;
  cursor:pointer;
  text-transform:uppercase;
  box-shadow:0 8px 30px rgba(43,213,118,.2);
}

.ou-to-top:hover {
  background:var(--ou-pale-moss);
  border-color:var(--ou-pale-moss);
}

.ou-to-top[hidden] {
  display:none;
}

@media (min-width: 37.5em) {
  .ou-grid--2 {
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (min-width: 62em) {
  .ou-header {
    width:var(--ou-rail);
    transform:none;
    box-shadow:10px 0 40px rgba(0,0,0,.25);
  }

  .ou-main,
  .ou-footer {
    margin-left:var(--ou-rail);
  }

  .ou-nav-toggle {
    display:none;
  }

  .ou-scrim {
    display:none;
  }

  .ou-grid--3 {
    grid-template-columns:repeat(3, 1fr);
  }

  .ou-grid--4 {
    grid-template-columns:repeat(4, 1fr);
  }
}

@media (max-width: 64em) {
  .ou-footer__grid {
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 42em) {
  .ou-footer__grid {
    grid-template-columns:1fr;
  }

  .ou-footer__bottom {
    justify-content:flex-start;
  }
}

@media (max-width: 61.98em) {
  .ou-nav-toggle {
    display:inline-flex;
  }
}

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity:0;
    transform:translateY(16px);
    transition:opacity .6s var(--ou-ease), transform .6s var(--ou-ease);
  }
}

[data-reveal-in] {
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: reduce) {
  .ou-header,
  .ou-nav-toggle__bar,
  .ou-card,
  .ou-scrim,
  [data-reveal] {
    transition:none;
  }

  [data-reveal] {
    opacity:1;
    transform:none;
  }
}