:root {
  --sem-ink: #071116;
  --sem-panel: #0d2028;
  --sem-line: rgba(171, 226, 238, 0.16);
  --sem-text: #edf7f8;
  --sem-muted: #91aeb4;
  --sem-cyan: #57d9ef;
  --sem-cyan-pale: #c9f7ff;
  --sem-orange: #ff884f;
  --sem-red: #ff4e3a;
  --sem-paper: #eaf0ed;
  --sem-paper-ink: #102026;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--sem-ink); }
body {
  margin: 0;
  background: var(--sem-ink);
  color: var(--sem-text);
  font-family: "Segoe UI", "Yu Gothic UI", "Hiragino Sans", sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
::selection { background: var(--sem-orange); color: #071116; }

.sem-nav {
  align-items: center;
  backdrop-filter: blur(18px);
  background: rgba(7, 17, 22, .82);
  border-bottom: 1px solid var(--sem-line);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  height: 76px;
  left: 0;
  padding: 0 clamp(22px, 5vw, 74px);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 50;
}
.sem-partsmith { align-items: center; display: flex; width: fit-content; }
.sem-partsmith img { display: block; height: 52px; width: auto; }
.sem-nav-links { display: flex; gap: 30px; }
.sem-nav-links a {
  color: #a9bec2;
  font-size: 12px;
  letter-spacing: .06em;
  transition: color 180ms ease;
}
.sem-nav-links a:hover, .sem-nav-links a:focus-visible { color: #fff; }
.sem-nav-cta {
  border: 1px solid rgba(87,217,239,.45);
  color: var(--sem-cyan-pale);
  font-size: 11px;
  font-weight: 700;
  justify-self: end;
  padding: 10px 15px;
}

.sem-grid, .sem-stage-grid {
  background-image:
    linear-gradient(rgba(105,191,208,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105,191,208,.08) 1px, transparent 1px);
  background-size: 54px 54px;
  inset: 0;
  mask-image: linear-gradient(to bottom, black 0%, transparent 90%);
  pointer-events: none;
  position: absolute;
}
.sem-hero {
  display: grid;
  grid-template-columns: minmax(0,.95fr) minmax(420px,1.05fr);
  min-height: 900px;
  overflow: hidden;
  padding: 150px clamp(24px,6vw,100px) 90px;
  position: relative;
}
.sem-hero::before {
  background: radial-gradient(circle, rgba(32,126,146,.24), transparent 65%);
  content: "";
  filter: blur(24px);
  height: 720px;
  position: absolute;
  right: -180px;
  top: 70px;
  width: 820px;
}
.sem-hero-copy {
  align-self: center;
  max-width: 720px;
  position: relative;
  z-index: 2;
}
.sem-eyebrow, .sem-index {
  color: #93b1b8;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .18em;
  margin: 0 0 24px;
}
.sem-eyebrow { align-items: center; display: flex; gap: 12px; }
.sem-eyebrow span {
  background: var(--sem-orange);
  box-shadow: 0 0 14px rgba(255,136,79,.7);
  height: 6px;
  width: 6px;
}
.sem-hero h1 {
  font-size: clamp(54px,6.2vw,100px);
  font-weight: 540;
  letter-spacing: -.07em;
  line-height: .99;
  margin: 0;
}
.sem-hero h1 em {
  color: var(--sem-cyan-pale);
  font-style: normal;
  text-shadow: 0 0 40px rgba(87,217,239,.16);
}
.sem-lead {
  color: #a8bec3;
  font-size: clamp(15px,1.3vw,18px);
  line-height: 1.95;
  margin: 34px 0 0;
  max-width: 610px;
}
.sem-actions { align-items: center; display: flex; gap: 28px; margin-top: 38px; }
.sem-primary {
  align-items: center;
  background: var(--sem-cyan);
  color: #071116;
  display: inline-flex;
  font-size: 13px;
  font-weight: 750;
  gap: 28px;
  padding: 16px 20px;
  transition: background 180ms ease, transform 180ms ease;
}
.sem-primary:hover, .sem-primary:focus-visible {
  background: #a5f1ff;
  transform: translateY(-2px);
}
.sem-primary span { font-size: 18px; }
.sem-text-link {
  border-bottom: 1px solid rgba(237,247,248,.35);
  color: #d8e7e9;
  font-size: 12px;
  padding-bottom: 5px;
}
.sem-hero-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3,1fr);
  margin: 60px 0 0;
  max-width: 620px;
}
.sem-hero-stats div { border-left: 1px solid var(--sem-line); padding-left: 18px; }
.sem-hero-stats dt {
  color: #fff;
  font-family: ui-monospace, monospace;
  font-size: clamp(16px,1.6vw,23px);
  font-weight: 650;
}
.sem-hero-stats dd {
  color: var(--sem-muted);
  font-size: 10px;
  letter-spacing: .05em;
  margin: 7px 0 0;
}

.sem-hero-visual {
  align-self: center;
  aspect-ratio: 1;
  justify-self: center;
  max-width: 710px;
  position: relative;
  width: 100%;
  z-index: 1;
}
.sem-hero-sphere {
  background:
    radial-gradient(circle at 65% 68%, rgba(255,75,45,.88), transparent 13%),
    radial-gradient(circle at 33% 30%, rgba(255,211,101,.8), transparent 18%),
    radial-gradient(circle at 58% 38%, rgba(255,133,67,.74), transparent 28%),
    radial-gradient(circle at 40% 60%, rgba(37,203,227,.76), transparent 36%),
    radial-gradient(circle at 45% 42%, #246e7c, #0d2932 69%);
  border: 1px solid rgba(191,239,247,.46);
  border-radius: 50%;
  box-shadow: inset -24px -30px 60px rgba(0,0,0,.62), inset 18px 14px 30px rgba(210,248,255,.1), 0 0 80px rgba(53,206,232,.13);
  height: 62%;
  left: 19%;
  overflow: hidden;
  position: absolute;
  top: 19%;
  transform: rotate(-8deg);
  width: 62%;
}
.sem-sphere-lines {
  background-image:
    repeating-radial-gradient(ellipse at 50% 50%, transparent 0 28px, rgba(194,240,248,.23) 29px 30px),
    repeating-linear-gradient(76deg, transparent 0 41px, rgba(207,246,251,.13) 42px 43px),
    repeating-linear-gradient(144deg, transparent 0 48px, rgba(207,246,251,.11) 49px 50px);
  inset: -8%;
  position: absolute;
}
.sem-hot {
  border: 1px solid rgba(255,229,177,.9);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(255,112,53,.8);
  height: 10px;
  position: absolute;
  width: 10px;
}
.sem-hot-a { left: 64%; top: 65%; }
.sem-hot-b { left: 32%; top: 28%; }
.sem-hot-c { left: 58%; top: 38%; }
.sem-orbit {
  border: 1px solid rgba(102,213,233,.28);
  border-radius: 50%;
  height: 80%;
  left: 10%;
  position: absolute;
  top: 10%;
  width: 80%;
}
.sem-orbit-a { transform: rotateX(72deg) rotateZ(-8deg); }
.sem-orbit-b { border-style: dashed; transform: rotateY(70deg) rotateZ(24deg); }
.sem-callout {
  backdrop-filter: blur(12px);
  background: rgba(7,20,25,.82);
  border: 1px solid rgba(147,220,234,.28);
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 180px;
  padding: 13px 15px;
  position: absolute;
}
.sem-callout span {
  color: #83a2a9;
  font-family: ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: .14em;
}
.sem-callout strong { font-family: ui-monospace, monospace; font-size: 13px; }
.sem-callout-a { right: 3%; top: 25%; }
.sem-callout-b { bottom: 17%; left: 3%; }
.sem-hero-note {
  align-items: flex-start;
  bottom: 42px;
  display: flex;
  gap: 18px;
  left: clamp(24px,6vw,100px);
  position: absolute;
}
.sem-hero-note span { color: var(--sem-orange); font: 10px ui-monospace, monospace; }
.sem-hero-note p { color: #68858b; font-size: 10px; line-height: 1.6; margin: 0; max-width: 480px; }

.sem-lab-section, .sem-numbers, .sem-decision { padding: 120px clamp(24px,6vw,100px); }
.sem-lab-section { background: var(--sem-paper); color: var(--sem-paper-ink); }
.sem-section-heading {
  align-items: end;
  display: grid;
  gap: 70px;
  grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr);
  margin-bottom: 70px;
}
.sem-section-heading h2, .sem-decision h2 {
  font-size: clamp(39px,4.8vw,72px);
  font-weight: 560;
  letter-spacing: -.055em;
  line-height: 1.08;
  margin: 0;
}
.sem-section-heading h2 span, .sem-decision h2 span { color: #e7552f; }
.sem-section-heading > p {
  color: #4d6267;
  font-size: 14px;
  line-height: 1.9;
  margin: 0;
  max-width: 470px;
}
.sem-error-lab {
  background: var(--sem-ink);
  box-shadow: 0 36px 70px rgba(5,17,21,.22);
  color: var(--sem-text);
}
.sem-tabs {
  border-bottom: 1px solid var(--sem-line);
  display: grid;
  grid-template-columns: repeat(5,1fr);
}
.sem-tabs button {
  background: #0a191f;
  border: 0;
  border-right: 1px solid var(--sem-line);
  color: #75939a;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 78px;
  padding: 18px 20px;
  text-align: left;
  transition: background 180ms ease, color 180ms ease;
}
.sem-tabs button:last-child { border-right: 0; }
.sem-tabs button:hover, .sem-tabs button:focus-visible { background: #10262f; color: #cceef4; outline: 2px solid var(--sem-cyan); outline-offset: -2px; }
.sem-tabs button.active { background: var(--sem-cyan); color: #071116; }
.sem-tabs span { font: 700 9px ui-monospace, monospace; letter-spacing: .1em; }
.sem-tabs small { font: 11px ui-monospace, monospace; }
.sem-lab-body { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(320px,.65fr); min-height: 620px; }
.sem-model-stage { border-right: 1px solid var(--sem-line); min-height: 620px; overflow: hidden; position: relative; }
.sem-stage-grid { background-size: 42px 42px; mask-image: radial-gradient(circle at center, black, transparent 80%); opacity: .7; }
.sem-stage-topline {
  color: #66858c;
  display: flex;
  font: 8px ui-monospace, monospace;
  justify-content: space-between;
  left: 24px;
  letter-spacing: .14em;
  position: absolute;
  right: 24px;
  top: 22px;
  z-index: 3;
}
.sem-live { color: #9dd8ba; }
.sem-live i { background: #71e69a; border-radius: 50%; box-shadow: 0 0 10px #71e69a; display: inline-block; height: 5px; margin-right: 6px; width: 5px; }
#sphere-error-canvas { display: block; height: 100%; inset: 0; min-height: 620px; position: absolute; width: 100%; }
.sem-color-scale {
  align-items: center;
  bottom: 24px;
  color: #718c92;
  display: flex;
  font: 8px ui-monospace, monospace;
  gap: 8px;
  letter-spacing: .1em;
  position: absolute;
  right: 24px;
  z-index: 3;
}
.sem-color-scale i { background: linear-gradient(90deg,#35d6e7,#f4d94f,#ff503c); height: 5px; width: 120px; }
.sem-panel { background: #0c1e25; padding: 44px 40px; }
.sem-panel-kicker { color: #719198; font: 8px ui-monospace, monospace; letter-spacing: .16em; margin: 0 0 14px; }
.sem-panel h3 { font-size: 25px; font-weight: 560; letter-spacing: -.035em; margin: 0; }
.sem-panel-detail { color: #7e9aa1; font: 10px ui-monospace, monospace; margin: 9px 0 0; }
.sem-primary-reading { border-bottom: 1px solid var(--sem-line); border-top: 1px solid var(--sem-line); margin: 38px 0 28px; padding: 25px 0; }
.sem-primary-reading > span { color: #90aab0; display: block; font-size: 10px; margin-bottom: 10px; }
.sem-primary-reading strong { color: #fff6ee; font: 500 clamp(32px,3vw,48px) ui-monospace, monospace; letter-spacing: -.06em; }
.sem-primary-reading small { color: var(--sem-orange); font-size: 12px; letter-spacing: 0; margin-left: 7px; }
.sem-limit-label, .sem-limit-range, .sem-magnification > span { display: flex; justify-content: space-between; }
.sem-limit-label { color: #99b0b5; font-size: 10px; }
.sem-limit-label strong { color: #f0f8f9; font-family: ui-monospace, monospace; }
.sem-limit-track { background: #18313a; height: 8px; margin: 12px 0 7px; overflow: hidden; }
.sem-limit-track span { background: linear-gradient(90deg,var(--sem-cyan),#f4d94f,var(--sem-red)); display: block; height: 100%; }
.sem-limit-range { color: #526f76; font: 8px ui-monospace, monospace; }
.sem-panel-metrics { display: grid; gap: 12px; margin: 27px 0 30px; }
.sem-panel-metrics div { align-items: center; background: rgba(255,255,255,.025); border: 1px solid rgba(169,224,235,.1); display: flex; justify-content: space-between; padding: 13px 14px; }
.sem-panel-metrics dt { color: #718e95; font-size: 9px; }
.sem-panel-metrics dd { font: 10px ui-monospace, monospace; margin: 0; }
.sem-magnification { display: block; }
.sem-magnification > span { color: #9db2b7; font-size: 10px; }
.sem-magnification strong { color: var(--sem-orange); font-family: ui-monospace, monospace; }
.sem-magnification input { accent-color: var(--sem-orange); cursor: ew-resize; margin: 15px 0 9px; width: 100%; }
.sem-magnification small { color: #59747b; display: block; font-size: 8px; line-height: 1.6; }

.sem-numbers { background: #07161c; }
.sem-light-heading > p { color: #87a2a9; }
.sem-metric-table { border-top: 1px solid var(--sem-line); }
.sem-metric-row {
  align-items: center;
  border-bottom: 1px solid var(--sem-line);
  display: grid;
  gap: 24px;
  grid-template-columns: 1.25fr .8fr .8fr 1.25fr;
  min-height: 88px;
  padding: 14px 10px;
}
.sem-metric-head { color: #658087; font: 8px ui-monospace, monospace; letter-spacing: .13em; min-height: 48px; }
.sem-model-name { display: flex; flex-direction: column; gap: 6px; }
.sem-model-name strong { font-size: 15px; font-weight: 550; }
.sem-model-name small { color: #6e8a91; font: 9px ui-monospace, monospace; }
.sem-mono { color: #edf8f9; font: 15px ui-monospace, monospace; }
.sem-mono small { color: #708990; font-size: 8px; }
.sem-muted { color: #8ba3a8; }
.sem-util { align-items: center; display: grid; gap: 14px; grid-template-columns: 1fr 48px; }
.sem-util i { background: #112b34; height: 6px; overflow: hidden; }
.sem-util b { background: linear-gradient(90deg,var(--sem-cyan),#ffd354,var(--sem-red)); display: block; height: 100%; }
.sem-util strong { font: 11px ui-monospace, monospace; text-align: right; }

.sem-truth { display: grid; grid-template-columns: 1fr 1fr; }
.sem-truth-card { min-height: 500px; overflow: hidden; padding: 90px clamp(28px,6vw,96px); position: relative; }
.sem-precise { background: var(--sem-cyan); color: #071419; }
.sem-practical { background: #ee7750; color: #190d08; }
.sem-truth-card .sem-index { color: currentColor; opacity: .58; }
.sem-truth-number { font: clamp(38px,4.4vw,72px) ui-monospace, monospace; letter-spacing: -.07em; margin: 54px 0 26px; }
.sem-truth-number sup { font-size: .5em; }
.sem-truth-number span { font-size: 12px; letter-spacing: 0; margin-left: 10px; }
.sem-truth-card h3 { font-size: 23px; letter-spacing: -.035em; margin: 0 0 14px; }
.sem-truth-card p:not(.sem-index) { font-size: 13px; line-height: 1.9; margin: 0; max-width: 470px; opacity: .72; }

.sem-decision {
  align-items: center;
  background: #e8ede9;
  color: #112127;
  display: grid;
  gap: 90px;
  grid-template-columns: 1fr .88fr;
}
.sem-decision-copy > p:last-of-type { color: #506267; font-size: 14px; line-height: 1.9; margin: 30px 0 0; max-width: 650px; }
.sem-app-cta { margin-top: 30px; }
.sem-decision-matrix { border-top: 1px solid rgba(17,33,39,.17); }
.sem-decision-item { align-items: center; border-bottom: 1px solid rgba(17,33,39,.17); display: grid; gap: 16px; grid-template-columns: 90px 1fr; min-height: 92px; padding: 16px 0; }
.sem-decision-item > span { font: 700 9px ui-monospace, monospace; grid-row: 1 / 3; letter-spacing: .12em; }
.sem-go > span { color: #168d61; }
.sem-review > span { color: #d56d22; }
.sem-stop > span { color: #d44437; }
.sem-decision-item strong { font-size: 17px; }
.sem-decision-item small { color: #67787c; font-size: 10px; }

.sem-method {
  align-items: center;
  background: #0b1c22;
  border-bottom: 1px solid var(--sem-line);
  border-top: 1px solid var(--sem-line);
  display: flex;
  gap: 60px;
  justify-content: space-between;
  padding: 32px clamp(24px,6vw,100px);
}
.sem-method p { color: #739098; font-size: 10px; line-height: 1.8; margin: 0; max-width: 740px; }
.sem-method p strong { color: #c9dadd; margin-right: 12px; }
.sem-status { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.sem-status span { border: 1px solid rgba(255,136,79,.28); color: #cc8b69; font: 7px ui-monospace, monospace; letter-spacing: .1em; padding: 7px 9px; }
.sem-footer {
  align-items: center;
  background: #071116;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 150px;
  padding: 30px clamp(24px,6vw,100px);
}
.sem-footer img { display: block; height: 54px; width: auto; }
.sem-footer p { color: #57727a; font: 8px ui-monospace, monospace; letter-spacing: .07em; margin: 0; }
.sem-footer > div { display: flex; gap: 18px; justify-self: end; }
.sem-footer > div a { color: #9eb4b9; font: 9px ui-monospace, monospace; letter-spacing: .08em; }

@media (max-width: 1000px) {
  .sem-nav { grid-template-columns: 1fr auto; }
  .sem-nav-links { display: none; }
  .sem-hero { grid-template-columns: 1fr; padding-top: 140px; }
  .sem-hero-copy { max-width: 780px; }
  .sem-hero-visual { margin: 20px auto 40px; max-width: 660px; }
  .sem-section-heading, .sem-decision { gap: 38px; grid-template-columns: 1fr; }
  .sem-section-heading > p { max-width: 650px; }
  .sem-tabs { grid-template-columns: repeat(3,1fr); }
  .sem-lab-body { grid-template-columns: 1fr; }
  .sem-model-stage { border-bottom: 1px solid var(--sem-line); border-right: 0; }
  .sem-truth { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .sem-nav { height: 68px; padding: 0 18px; }
  .sem-partsmith img { height: 42px; }
  .sem-nav-cta { font-size: 9px; padding: 8px; }
  .sem-hero { min-height: auto; padding: 120px 20px 100px; }
  .sem-hero h1 { font-size: 52px; }
  .sem-actions { align-items: flex-start; flex-direction: column; }
  .sem-hero-stats { gap: 22px; grid-template-columns: 1fr; }
  .sem-hero-visual { margin: 30px 0 10px; }
  .sem-callout { min-width: 145px; }
  .sem-hero-note { display: none; }
  .sem-lab-section, .sem-numbers, .sem-decision { padding: 80px 20px; }
  .sem-section-heading { margin-bottom: 44px; }
  .sem-tabs { display: flex; overflow-x: auto; }
  .sem-tabs button { flex: 0 0 155px; }
  .sem-model-stage, #sphere-error-canvas { min-height: 480px; }
  .sem-panel { padding: 36px 24px; }
  .sem-metric-head { display: none; }
  .sem-metric-row { gap: 9px; grid-template-columns: 1fr 1fr; padding: 22px 0; }
  .sem-util { grid-column: 1 / 3; }
  .sem-truth-card { min-height: 450px; padding: 70px 24px; }
  .sem-method { align-items: flex-start; flex-direction: column; gap: 22px; padding: 28px 20px; }
  .sem-status { justify-content: flex-start; }
  .sem-footer { gap: 24px; grid-template-columns: 1fr auto; padding: 28px 20px; }
  .sem-footer p { grid-column: 1 / 3; grid-row: 2; }
  .sem-footer > div { flex-direction: column; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}