:root {
  --bg: #101112;
  --surface: #151719;
  --surface-2: #1b1d20;
  --surface-3: #22252a;
  --text: #f4f6f8;
  --muted: #a4a8ae;
  --quiet: #747a83;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --accent: #8ab4f8;
  --accent-glow: rgba(138, 180, 248, 0.16);
  --brand: #8ab4f8;
  --brand-rgb: 138, 180, 248;
  --success: #81c995;
  --success-glow: rgba(129, 201, 149, 0.16);
  --blue: #8ab4f8;
  --green: #81c995;
  --amber: #fdd663;
  --red: #f28b82;
  --shadow: 0 32px 100px rgba(0, 0, 0, 0.52);
  --page-gradient: linear-gradient(180deg, #17191b 0%, #111214 58%, #0d0e0f 100%);
  --grid-line: rgba(255, 255, 255, 0.052);
  --ambient-overlay:
    linear-gradient(180deg, rgba(16, 17, 18, 0.08), rgba(16, 17, 18, 0.72) 72%, #0d0e0f),
    linear-gradient(115deg, rgba(138, 180, 248, 0.12), transparent 34%),
    linear-gradient(250deg, rgba(129, 201, 149, 0.09), transparent 31%);
  --header-text: rgba(255, 255, 255, 0.94);
  --nav-text: rgba(255, 255, 255, 0.66);
  --nav-hover: rgba(255, 255, 255, 0.94);
  --glass-bg: rgba(255, 255, 255, 0.1);
  --hero-copy: rgba(255, 255, 255, 0.58);
  --panel-bg: rgba(0, 0, 0, 0.28);
  --mono-panel-bg: rgba(0, 0, 0, 0.36);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    var(--page-gradient);
  background-size: 32px 32px, 32px 32px, 100% 100%;
  color: var(--text);
  font-family: "Google Sans Flex", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  overflow-x: hidden;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  content: "";
  background: var(--ambient-overlay);
}

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

svg {
  display: block;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.studio-header {
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: 20;
  display: grid;
  width: min(1180px, calc(100% - 56px));
  grid-template-columns: minmax(210px, 1fr) auto minmax(150px, 1fr);
  align-items: center;
  transform: translateX(-50%);
}

.brand-link,
.top-nav,
.header-action {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.brand-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  color: var(--header-text);
  font-size: 1.04rem;
  font-weight: 700;
}

.brand-mark {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: var(--glass-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.brand-mark svg {
  width: 30px;
  height: 30px;
}

.brand-ring {
  fill: none;
  stroke: var(--brand);
  stroke-linecap: round;
  stroke-width: 4;
}

.brand-spark {
  fill: var(--text);
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 34px);
  color: var(--nav-text);
  font-size: 0.92rem;
  font-weight: 550;
}

.top-nav a {
  transition: color 180ms ease;
}

.top-nav a:hover {
  color: var(--nav-hover);
}

.header-action {
  justify-self: end;
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--glass-bg);
  color: var(--header-text);
  font-size: 0.9rem;
  font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.header-action:hover {
  border-color: rgba(138, 180, 248, 0.36);
  transform: translateY(-1px);
}

.hero {
  position: relative;
  display: grid;
  min-height: 760px;
  padding: 112px 24px 42px;
  place-items: start center;
  overflow: hidden;
}

.grid-blocks {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.grid-blocks span {
  position: absolute;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.075);
  animation: blockPulse 8s ease-in-out infinite;
}

/* The blocks always referenced this keyframe, but it was never declared —
   so all eight sat frozen. Opacity + scale keep it on the compositor. */
@keyframes blockPulse {
  0%,
  100% {
    opacity: 0.16;
    transform: scale3d(0.8, 0.8, 1);
  }
  44%,
  58% {
    opacity: 0.92;
    transform: scale3d(1, 1, 1);
  }
}

.grid-blocks span:nth-child(1) {
  top: 0;
  left: 38%;
}

.grid-blocks span:nth-child(2) {
  top: 0;
  right: 44%;
  animation-delay: -3s;
}

.grid-blocks span:nth-child(3) {
  top: 17%;
  left: 41%;
  animation-delay: -1s;
}

.grid-blocks span:nth-child(4) {
  top: 21%;
  right: 16%;
  animation-delay: -4s;
}

.grid-blocks span:nth-child(5) {
  top: 44%;
  left: 10%;
  animation-delay: -2s;
}

.grid-blocks span:nth-child(6) {
  top: 46%;
  right: 10%;
  animation-delay: -5s;
}

.grid-blocks span:nth-child(7) {
  bottom: 14%;
  left: 23%;
  animation-delay: -2.6s;
}

.grid-blocks span:nth-child(8) {
  bottom: 18%;
  right: 24%;
  animation-delay: -6s;
}

/* Tinting a few blocks reads as background grid cells being activated. */
.grid-blocks span:nth-child(3),
.grid-blocks span:nth-child(6) {
  border-color: rgba(138, 180, 248, 0.2);
  background: rgba(138, 180, 248, 0.15);
}

.grid-blocks span:nth-child(5) {
  border-color: rgba(129, 201, 149, 0.2);
  background: rgba(129, 201, 149, 0.13);
}

.hero-copy {
  width: min(100%, 1050px);
  margin: 0 auto;
  text-align: center;
}

.release-pill {
  display: inline-grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  width: min(500px, 100%);
  min-height: 50px;
  margin: 0 auto 24px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--text);
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 36px rgba(0, 0, 0, 0.32);
}

.status-dot {
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

.pill-label {
  margin-right: 12px;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
}

.pill-copy {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.hero-copy h1 {
  margin-bottom: 14px;
  background: linear-gradient(135deg, #ffffff 20%, #b8d4ff 60%, #8ab4f8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 5.8rem !important;
  font-weight: 800 !important;
  line-height: 0.98 !important;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: 0 15px 40px rgba(138, 180, 248, 0.14) !important;
}

.hero-copy > p {
  width: min(760px, 100%);
  margin: 0 auto;
  color: var(--muted) !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  text-wrap: balance;
  letter-spacing: 0;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.primary-action,
.secondary-action {
  display: inline-flex;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  padding: 0 19px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.primary-action {
  border: 1px solid rgba(138, 180, 248, 0.55);
  background: linear-gradient(180deg, #dce8ff 0%, #96bdff 100%);
  color: #101317;
  box-shadow: 0 16px 36px rgba(138, 180, 248, 0.2);
}

.secondary-action {
  border: 1px solid var(--line-strong);
  background: var(--glass-bg);
  color: var(--header-text);
}

.primary-action:hover,
.secondary-action:hover {
  transform: translateY(-2px);
}

.primary-action:hover {
  background: linear-gradient(180deg, #fff 0%, #bcd1ff 100%);
  box-shadow: 0 20px 42px rgba(138, 180, 248, 0.32);
}

.workspace-shell {
  position: relative;
  width: min(1080px, calc(100vw - 48px));
  margin: 34px auto 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    var(--surface);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.workspace-shell::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 48%, transparent 100%),
    linear-gradient(180deg, rgba(138, 180, 248, 0.08), transparent 38%);
  opacity: 0.42;
  transform: translate3d(-84%, 0, 0);
  will-change: transform;
  animation: stageSweep 11s cubic-bezier(0.5, 0, 0.2, 1) infinite;
}

.workspace-shell::after {
  position: absolute;
  inset: auto 0 0;
  height: 120px;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.09));
  pointer-events: none;
}

.workspace-chrome {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 52px;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}

.window-controls {
  display: flex;
  gap: 7px;
}

.window-controls span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

.window-controls span:nth-child(1) {
  background: rgba(242, 139, 130, 0.9);
}

.window-controls span:nth-child(2) {
  background: rgba(253, 214, 99, 0.9);
}

.window-controls span:nth-child(3) {
  background: rgba(129, 201, 149, 0.9);
}

.workspace-title {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--quiet);
  font-size: 0.82rem;
  font-weight: 650;
}

.workspace-title strong {
  overflow: hidden;
  color: var(--text);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.run-state span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 10px var(--success);
}

.workspace-grid {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 338px;
  grid-template-columns: 220px minmax(0, 1fr) 260px;
}

.workspace-sidebar,
.analysis-panel,
.evidence-panel {
  padding: 20px;
}

.workspace-sidebar,
.evidence-panel {
  background: rgba(0, 0, 0, 0.16);
}

.workspace-sidebar {
  border-right: 1px solid var(--line);
}

.evidence-panel {
  border-left: 1px solid var(--line);
}

.panel-label {
  display: block;
  margin-bottom: 12px;
  color: var(--quiet);
  font-family: "Inter", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.side-item {
  display: block;
  padding: 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--muted);
  transition: border-color 180ms ease, background 180ms ease;
}

.side-item + .side-item {
  margin-top: 8px;
}

.side-item strong {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.92rem;
}

.side-item small {
  display: block;
  color: var(--quiet);
  font-size: 0.78rem;
  line-height: 1.25;
}

.side-item.active,
.side-item:hover {
  border-color: rgba(0, 229, 255, 0.25);
  background: rgba(0, 229, 255, 0.06);
}

.panel-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.model-pill {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 6px;
  background: rgba(0, 229, 255, 0.05);
  color: #cceeff;
  font-family: "Inter", monospace;
  font-size: 0.72rem;
  font-weight: 600;
}

.sequence-board {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 16px;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
  position: relative;
  overflow: hidden;
}

.sequence-board span {
  display: inline-grid;
  width: 20px;
  height: 26px;
  place-items: center;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}

.sequence-board span:nth-child(even) {
  color: #fff;
}

.sequence-board span:hover {
  background: rgba(0, 229, 255, 0.15);
  color: var(--accent) !important;
}

.signal-map {
  position: relative;
  height: 94px;
  margin: 18px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    rgba(0, 0, 0, 0.2);
  background-size: 20px 20px, 20px 20px;
}

.map-line {
  position: absolute;
  top: 48px;
  left: 12px;
  right: 12px;
  height: 1px;
  background: var(--line-strong);
}

.map-line::after {
  content: "";
  position: absolute;
  top: -24px;
  left: 0;
  right: 0;
  height: 48px;
  background: transparent;
  border-bottom: 2px solid var(--accent);
  clip-path: polygon(0% 60%, 15% 30%, 30% 85%, 45% 15%, 60% 50%, 75% 90%, 90% 25%, 100% 60%);
}

.map-node {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid #000;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 8px #fff;
}

.node-a {
  left: 15%;
  top: 26px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

.node-b {
  left: 45%;
  top: 51px;
  background: var(--success);
  box-shadow: 0 0 10px var(--success);
}

.node-c {
  right: 10%;
  top: 21px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.metric {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.12);
}

.metric small {
  display: block;
  margin-bottom: 6px;
  color: var(--quiet);
  font-size: 0.75rem;
  font-weight: 700;
}

.metric strong {
  color: white;
  font-size: 1.2rem;
}

.score-ring {
  display: grid;
  width: 96px;
  height: 96px;
  margin: 4px 0 18px;
  place-items: center;
  border-radius: 999px;
  background:
    conic-gradient(var(--success) 0deg 313deg, rgba(255, 255, 255, 0.09) 313deg 360deg);
  color: white;
  font-size: 1.6rem;
  font-weight: 780;
}

.score-ring span {
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  border-radius: 999px;
  background: var(--surface);
}

.evidence-panel h2 {
  margin-bottom: 10px;
  color: white;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.18;
}

.evidence-panel p {
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.9rem;
  line-height: 1.48;
}

.evidence-bars {
  display: grid;
  gap: 9px;
}

.evidence-bars span {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
}

.evidence-bars span::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--value);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--success));
  content: "";
  animation: barBreathe 4s ease-in-out infinite;
}

.workflows {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 34px 0 88px;
}

.section-heading {
  display: grid;
  grid-template-columns: 0.56fr 1.44fr;
  gap: 28px;
  align-items: end;
  margin-bottom: 24px;
}

.section-heading span {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.section-heading h2 {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 2.5rem;
  font-weight: 520;
  line-height: 1.08;
  text-wrap: balance;
}

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.workflow-card {
  --spot-x: 50%;
  --spot-y: 50%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  min-height: 270px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(138, 180, 248, 0.13), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.workflow-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-4px) perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}

.workflow-card::after {
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.2), transparent);
  content: "";
}

.workflow-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.workflow-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.workflow-icon.blue {
  color: var(--brand);
  border-color: rgba(var(--brand-rgb), 0.24);
}

.workflow-icon.green {
  color: var(--brand);
  border-color: rgba(var(--brand-rgb), 0.24);
}

.workflow-icon.amber {
  color: var(--brand);
  border-color: rgba(var(--brand-rgb), 0.24);
}

.workflow-card h3 {
  margin-bottom: 11px;
  color: white;
  font-size: 1.18rem;
  font-weight: 700;
}

.workflow-card p {
  margin-bottom: 24px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.96rem;
  line-height: 1.52;
}

.workflow-link {
  position: absolute;
  left: 24px;
  bottom: 22px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.9rem;
  font-weight: 750;
}

.quality-strip {
  display: grid;
  width: min(1180px, calc(100% - 48px));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 auto 90px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.quality-strip div {
  min-height: 164px;
  padding: 24px;
  background: var(--surface);
}

.quality-strip span {
  display: block;
  margin-bottom: 22px;
  color: var(--accent);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  font-weight: 800;
}

.quality-strip strong {
  display: block;
  margin-bottom: 8px;
  color: white;
  font-size: 1rem;
}

.quality-strip p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.cli-console {
  margin-top: 14px;
  background: #040506;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
  font-size: 0.72rem;
  color: var(--muted);
  min-height: 52px;
  text-align: left;
}

.cli-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
}

.cli-prompt {
  color: var(--accent);
  font-weight: 700;
}

.cli-text {
  color: #fff;
}

.cli-cursor {
  width: 5px;
  height: 11px;
  background: var(--accent);
  display: inline-block;
  vertical-align: middle;
  animation: blinkCursor 1s steps(2, start) infinite;
}

@keyframes blinkCursor {
  to { visibility: hidden; }
}

@keyframes scanline {
  0% { left: 0%; }
  100% { left: 100%; }
}

@keyframes stageSweep {
  0%,
  24% {
    transform: translate3d(-84%, 0, 0);
  }
  76%,
  100% {
    transform: translate3d(84%, 0, 0);
  }
}

@keyframes nodePulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.22);
  }
}

@keyframes barBreathe {
  0%,
  100% {
    opacity: 0.72;
  }
  50% {
    opacity: 1;
  }
}

@media (max-width: 980px) {
  .studio-header {
    grid-template-columns: 1fr auto;
  }

  .top-nav {
    display: none;
  }

  .hero {
    min-height: auto;
    padding-top: 104px;
  }

  .release-pill {
    margin-right: auto;
  }

  .workspace-grid {
    grid-template-columns: 1fr;
  }

  .workspace-sidebar {
    display: none;
  }

  .evidence-panel {
    border-left: none;
    border-top: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.16);
  }

  .analysis-panel {
    min-height: 330px;
  }

  .section-heading,
  .workflow-grid,
  .quality-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 780px) and (min-width: 981px) {
  .studio-header {
    top: 18px;
  }

  .hero {
    min-height: 720px;
    padding-top: 88px;
    padding-bottom: 28px;
  }

  .release-pill {
    min-height: 48px;
    margin-bottom: 20px;
  }

  .hero-copy h1 {
    margin-bottom: 10px;
    font-size: 4.6rem;
  }

  .hero-copy > p {
    font-size: 1.06rem;
    line-height: 1.34;
  }

  .hero-actions {
    margin-top: 17px;
  }

  .primary-action,
  .secondary-action {
    min-height: 40px;
  }

  .workspace-shell {
    margin-top: 24px;
  }

  .workspace-chrome {
    min-height: 48px;
  }

  .workspace-grid {
    min-height: 268px;
    grid-template-columns: 190px minmax(0, 1fr) 230px;
  }

  .workspace-sidebar,
  .analysis-panel,
  .evidence-panel {
    padding: 16px;
  }

  .side-item {
    padding: 10px;
  }

  .sequence-board {
    gap: 5px;
    margin-top: 12px;
  }

  .sequence-board span {
    height: 28px;
  }

  .signal-map {
    height: 58px;
    margin: 16px 0 12px;
  }

  .map-line {
    top: 28px;
  }

  .map-node {
    top: 19px;
  }

  .metric {
    padding: 10px;
  }

  .score-ring {
    width: 72px;
    height: 72px;
    margin-bottom: 12px;
    font-size: 1.25rem;
  }

  .score-ring span {
    width: 55px;
    height: 55px;
  }

  .evidence-panel h2 {
    font-size: 1rem;
  }

  .evidence-panel p {
    margin-bottom: 14px;
    font-size: 0.82rem;
  }

  .workflows {
    padding-top: 28px;
  }
}

@media (max-width: 640px) {
  .studio-header {
    top: 16px;
    width: calc(100% - 28px);
  }

  .brand-link span:last-child {
    display: none;
  }

  .header-action {
    min-height: 36px;
    padding: 0 12px;
    font-size: 0.84rem;
  }

  .hero {
    padding: 92px 14px 32px;
  }

  .release-pill {
    grid-template-columns: auto auto;
    width: 100%;
  }

  .pill-copy {
    grid-column: 1 / -1;
    margin-top: 7px;
  }

  .hero-copy h1 {
    font-size: 3rem;
  }

  .hero-actions {
    flex-direction: column;
  }

  .primary-action,
  .secondary-action {
    width: 100%;
  }

  .workspace-shell {
    width: calc(100vw - 24px);
    margin-top: 28px;
    border-radius: 15px;
  }

  .workspace-chrome {
    grid-template-columns: 58px minmax(0, 1fr);
    padding: 0 12px;
  }

  .workspace-title {
    justify-content: start;
  }

  .workspace-title span,
  .run-state {
    display: none;
  }

  .analysis-panel {
    padding: 16px;
  }

  .sequence-board {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .metric-row {
    grid-template-columns: 1fr;
  }

  .workflows,
  .quality-strip {
    width: calc(100% - 28px);
  }
}

.prompt-side {
  padding: 24px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
}

.output-side {
  padding: 24px;
  background: rgba(255, 255, 255, 0.01);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.model-badge {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  border: 1px solid var(--line);
}

.model-badge.success {
  background: rgba(0, 255, 136, 0.08);
  color: var(--success);
  border-color: rgba(0, 255, 136, 0.2);
}

.prompt-input-area {
  flex-grow: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  font-family: "JetBrains Mono", monospace;
  text-align: left;
}

.fasta-header {
  color: var(--accent);
  font-size: 0.75rem;
  margin-bottom: 8px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fasta-sequence {
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.6;
  word-break: break-all;
  letter-spacing: 0;
}

.prompt-actions {
  margin-top: 14px;
  text-align: left;
}

.status-indicator {
  font-size: 0.75rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  display: inline-block;
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(0, 255, 136, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); }
}

.inference-output-area {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.prediction-main-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 8px;
  padding: 14px;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.pred-meta {
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 4px;
}

.prediction-main-card h3 {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 6px;
}

.prediction-main-card p {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
  margin-bottom: 0;
}

.prediction-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.stat-box {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  text-align: left;
}

.stat-box small {
  display: block;
  font-size: 0.68rem;
  color: var(--quiet);
  text-transform: uppercase;
  margin-bottom: 4px;
  font-weight: 700;
}

.stat-box strong {
  display: block;
  font-size: 1.2rem;
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
}

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

/* Custom additions for the Prompt & Structured Response Stage */
.prompt-side {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
}

.output-side {
  padding: 24px;
  background: rgba(255, 255, 255, 0.015);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
}

@media (min-width: 981px) {
  .prompt-side {
    border-right: 1px solid var(--line);
  }
}

@media (max-width: 980px) {
  .prompt-side {
    border-bottom: 1px solid var(--line);
  }
}

.prompt-box {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.prompt-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.88rem;
  line-height: 1.48;
  margin-bottom: 14px;
}

.input-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.input-main {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid rgba(138, 180, 248, 0.16);
  border-radius: 10px;
  background: rgba(138, 180, 248, 0.045);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
}

.input-badge {
  display: flex;
  min-width: 72px;
  height: 72px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(138, 180, 248, 0.28);
  border-radius: 50%;
  background: rgba(138, 180, 248, 0.08);
  box-shadow: 0 0 16px rgba(138, 180, 248, 0.11);
}

.input-badge strong {
  color: var(--accent);
  font-size: 1.35rem;
  font-weight: 800;
}

.input-badge span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
}

.input-details {
  text-align: left;
}

.input-details h4 {
  margin: 0 0 4px;
  color: white;
  font-size: 0.92rem;
  font-weight: 700;
}

.input-details p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.fasta-block {
  background: rgba(0, 0, 0, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
  line-height: 1.5;
}

.fasta-hdr {
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 6px;
}

.fasta-seq {
  color: #fff;
  letter-spacing: 0;
  word-break: break-all;
}

.epitope-highlight {
  position: relative;
  background: rgba(253, 214, 99, 0.15);
  color: #fdd663;
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid rgba(253, 214, 99, 0.3);
  font-weight: 700;
  box-shadow: 0 0 8px rgba(253, 214, 99, 0.1);
}

.fasta-sparkline {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.sparkline-label {
  display: block;
  font-size: 0.6rem;
  color: var(--quiet);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4px;
}

.sparkline-svg {
  width: 100%;
  height: 24px;
}

.sparkline-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sparkline-svg path.sparkline-line {
  stroke: url(#sparkline-gradient);
}

.sparkline-dot {
  fill: #fdd663;
  stroke: #101112;
  stroke-width: 1;
}

.sparkline-dot-pulse {
  animation: sparkPulse 2s infinite ease-in-out;
}

@keyframes sparkPulse {
  0% { r: 2.5; opacity: 1; }
  50% { r: 4.5; opacity: 0.7; }
  100% { r: 2.5; opacity: 1; }
}

.predictor-section {
  padding-top: 2px;
}

.prompt-status {
  margin-top: 16px;
  text-align: left;
}

.inference-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-grow: 1;
}

.inference-main {
  display: flex;
  gap: 16px;
  background: rgba(0, 255, 136, 0.03);
  border: 1px solid rgba(0, 255, 136, 0.15);
  border-radius: 10px;
  padding: 14px;
  align-items: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
}

.score-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.3);
  box-shadow: 0 0 16px rgba(0, 255, 136, 0.1);
}

.score-badge strong {
  font-size: 1.35rem;
  color: var(--success);
  font-weight: 800;
}

.score-badge span {
  font-size: 0.58rem;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 2px;
}

.prediction-details {
  text-align: left;
}

.prediction-details h4 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
}

.prediction-details p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.metric-row-new {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.metric-box-new {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  text-align: left;
}

.metric-box-new small {
  display: block;
  font-size: 0.65rem;
  color: var(--quiet);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4px;
}

.metric-box-new strong {
  font-size: 1rem;
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
}

.log-console-new {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  line-height: 1.48;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.console-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
}

.console-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.console-dot.red { background: #f28b82; opacity: 0.75; }
.console-dot.yellow { background: #fdd663; opacity: 0.75; }
.console-dot.green { background: #81c995; opacity: 0.75; }

.console-title {
  margin-left: 6px;
  font-size: 0.6rem;
  color: var(--quiet);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0;
}

.console-body {
  padding: 10px 12px;
}

.log-line-new {
  color: var(--muted);
}

.log-line-new + .log-line-new {
  margin-top: 4px;
}

.log-line-new.ok {
  color: var(--success);
}

.log-line-new.info {
  color: var(--blue);
}

.evidence-details-new {
  margin-top: 6px;
  text-align: left;
}

/* Final composition overrides for the prompt/result workbench. */
.prompt-side {
  justify-content: flex-start;
  gap: 18px;
}

.prompt-status {
  margin-top: auto;
}

.predictor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
}

.predictor-chip {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: flex-start;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  gap: 8px;
  transition: all 180ms ease;
  cursor: pointer;
}

.predictor-chip:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
}

.chip-status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: all 180ms ease;
}

.predictor-chip.active {
  border-color: rgba(138, 180, 248, 0.26);
  background: rgba(138, 180, 248, 0.08);
  color: #d8e6ff;
  box-shadow: inset 0 1px 0 rgba(138, 180, 248, 0.05);
}

.predictor-chip.active .chip-status {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: activePulse 2s infinite ease-in-out;
}

@keyframes activePulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.prompt-side .metric-box-new {
  border-color: rgba(138, 180, 248, 0.12);
}

.prompt-side .metric-box-new strong {
  color: #d8e6ff;
}

.model-badge.success {
  border-color: rgba(129, 201, 149, 0.25);
  background: rgba(129, 201, 149, 0.08);
  color: #bfe8ca;
}

.inference-main {
  border-color: rgba(129, 201, 149, 0.16);
  background: rgba(129, 201, 149, 0.045);
}

.score-badge {
  border-color: rgba(129, 201, 149, 0.28);
  background: rgba(129, 201, 149, 0.08);
  box-shadow: 0 0 16px rgba(129, 201, 149, 0.11);
}

.evidence-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
}

.site-footer {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 6px 0 44px;
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) auto;
  gap: 48px;
  align-items: start;
  padding: 28px;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
  background:
    radial-gradient(circle at 8% 0%, rgba(138, 180, 248, 0.08), transparent 34%),
    rgba(255, 255, 255, 0.026);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.footer-brand {
  display: grid;
  gap: 18px;
}

.footer-brand-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.footer-mark {
  width: 40px;
  height: 40px;
}

.footer-mark svg {
  width: 29px;
  height: 29px;
}

.footer-brand strong {
  display: block;
  color: white;
  font-size: 1.05rem;
  font-weight: 750;
}

.footer-brand p {
  margin: 6px 0 0;
  color: var(--muted);
  max-width: 360px;
  font-size: 0.9rem;
  line-height: 1.45;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(112px, 1fr));
  gap: 42px;
}

.footer-nav div {
  display: grid;
  gap: 8px;
}

.footer-nav h2 {
  margin: 0 0 4px;
  color: white;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.footer-nav a,
.footer-bottom a {
  color: var(--muted);
  font-size: 0.86rem;
  transition: color 160ms ease;
}

.footer-nav a:hover,
.footer-bottom a:hover {
  color: white;
}

.footer-bottom {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border: 1px solid var(--line);
  border-radius: 0 0 14px 14px;
  background: rgba(0, 0, 0, 0.12);
  color: var(--quiet);
  font-size: 0.78rem;
}

/* Desktop-specific layout spacing optimizations */
@media (min-width: 981px) {
  .workspace-grid {
    grid-template-columns: 1.15fr 0.85fr !important;
  }
}

@media (max-width: 760px) {
  .footer-inner {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .footer-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .predictor-grid,
  .metric-row-new {
    grid-template-columns: 1fr;
  }

  .input-main,
  .inference-main {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-nav {
    grid-template-columns: 1fr;
  }
}

/* BIOINFORMATICS WORKBENCH CUSTOM STYLES */
.codon-container {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.codon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}

.codon-triplet {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 32px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 3px;
  padding: 2px 0;
  border: 1px dashed rgba(255, 255, 255, 0.05);
}

.codon-triplet.active-codon {
  color: #fdd663;
  border-color: rgba(253, 214, 99, 0.2);
  background: rgba(253, 214, 99, 0.04);
}

.bio-seq-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 0;
}

.bio-residue {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 32px;
  height: 46px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
  justify-content: center;
  position: relative;
  transition: transform 150ms ease, border-color 150ms ease;
  cursor: pointer;
}

.bio-residue:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.25);
  z-index: 2;
}

.bio-residue .aa-letter {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
}

.bio-residue .aa-idx {
  font-size: 0.52rem;
  color: var(--quiet);
  margin-top: 1px;
}

/* Residue properties coloring */
.bio-residue.acidic {
  background: rgba(242, 139, 130, 0.08);
  border-color: rgba(242, 139, 130, 0.22);
}
.bio-residue.acidic .aa-letter {
  color: #f28b82;
}

.bio-residue.basic {
  background: rgba(138, 180, 248, 0.08);
  border-color: rgba(138, 180, 248, 0.22);
}
.bio-residue.basic .aa-letter {
  color: #8ab4f8;
}

.bio-residue.hydrophobic {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
.bio-residue.hydrophobic .aa-letter {
  color: rgba(255, 255, 255, 0.85);
}

.bio-residue.polar {
  background: rgba(129, 201, 149, 0.08);
  border-color: rgba(129, 201, 149, 0.22);
}
.bio-residue.polar .aa-letter {
  color: #81c995;
}

/* Highlighted region */
.bio-residue.epitope-marked {
  border-color: rgba(253, 214, 99, 0.35);
  background: rgba(253, 214, 99, 0.12);
  box-shadow: 0 0 10px rgba(253, 214, 99, 0.15);
}
.bio-residue.epitope-marked .aa-letter {
  color: #fdd663;
  text-shadow: 0 0 4px rgba(253, 214, 99, 0.4);
}

/* Secondary structure styles */
.structure-preview-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

.sec-struct-svg {
  width: 100%;
  height: 38px;
  margin-top: 6px;
}

.struct-helix {
  fill: none;
  stroke: #8ab4f8;
  stroke-width: 2;
  stroke-linecap: round;
}

.struct-sheet {
  fill: none;
  stroke: #81c995;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.struct-coil {
  fill: none;
  stroke: var(--quiet);
  stroke-width: 1.5;
  stroke-dasharray: 2 2;
}

/* Annotations & Features Table */
.feature-table-container {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.feature-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  text-align: left;
}

.feature-table th,
.feature-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.feature-table th {
  background: rgba(255, 255, 255, 0.02);
  color: var(--quiet);
  font-weight: 700;
  text-transform: uppercase;
}

.feature-table tr:last-child td {
  border-bottom: none;
}

.feature-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
}

.feature-tag.blue { background: rgba(138, 180, 248, 0.12); color: #8ab4f8; }
.feature-tag.amber { background: rgba(253, 214, 99, 0.12); color: #fdd663; }

/* Real-time score details */
.model-metrics-matrix {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 14px;
}

.matrix-row {
  display: grid;
  grid-template-columns: 110px 1fr 45px;
  align-items: center;
  gap: 12px;
}

.matrix-lbl {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
}

.matrix-bar-bg {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

.matrix-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.matrix-bar-fill.blue { background: #8ab4f8; }
.matrix-bar-fill.green { background: #81c995; }
.matrix-bar-fill.amber { background: #fdd663; }

.matrix-val {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: right;
  color: #fff;
}

/* MOLECULAR MECHANISM VISUAL STYLES */
.mechanism-model-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 14px;
}

.mechanism-visual {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mechanism-svg {
  width: 100%;
  max-width: 320px;
  height: auto;
}

.peptide-ligand {
  animation: floatPeptide 4s infinite ease-in-out;
}

@keyframes floatPeptide {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* RADICAL BIOINFORMATICS PIPELINE DASHBOARD */
.workspace-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 16px !important;
  padding: 16px !important;
  background: rgba(10, 10, 12, 0.4) !important;
  border-top: 1px solid var(--line-strong) !important;
}

@media (max-width: 1024px) {
  .workspace-grid {
    grid-template-columns: 1fr !important;
  }
}

.pipeline-col {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  text-align: left;
}

.pipeline-col:hover {
  border: none;
  box-shadow: none;
}

.col-subtitle {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 4px;
  opacity: 0.85;
}

.col-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 8px;
}

/* stage 1: sequence components */
.input-stage-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}

/* stage 2: attention heatmap matrix */
.attention-heatmap {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
  flex-grow: 1;
}

.attention-grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 2px;
  width: 100%;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.02);
  padding: 4px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.att-cell {
  aspect-ratio: 1;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.03);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.att-cell:hover {
  transform: scale(1.3);
  z-index: 10;
  filter: brightness(1.4);
}

/* Heatmap weights */
.att-low { background: rgba(138, 180, 248, 0.08); }
.att-med { background: rgba(138, 180, 248, 0.35); }
.att-high { background: rgba(129, 201, 149, 0.7); }
.att-max {
  background: #fdd663;
  box-shadow: 0 0 8px rgba(253, 214, 99, 0.8);
}

.matrix-legend {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  color: var(--quiet);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.legend-color {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

/* active predictions indicators */
.neural-flow-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  padding: 10px;
}

.flow-stat-row {
  display: flex;
  justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
}

.flow-lbl {
  color: var(--quiet);
}

.flow-val {
  color: #fff;
  font-weight: 700;
}

.flow-val.amber { color: #fdd663; }
.flow-val.blue { color: #8ab4f8; }

/* residue customization inside columns */
.codon-container {
  max-height: 100px;
  overflow-y: auto;
  padding: 6px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.bio-seq-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  padding: 8px;
}


/* A small subset of cells pulses using compositor-friendly properties. */
@keyframes embeddingCellPulse {
  0%, 100% {
    opacity: 0.48;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.embed-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  width: 100%;
  aspect-ratio: 1;
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: none;
  /* Clips the scan band to the matrix and isolates it from the rest of the page. */
  contain: layout paint;
}

.embed-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 5.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.22);
  user-select: none;
  overflow: hidden;
  /* Lets cells fade in and out of activation as site-ui.js rotates them,
     instead of popping. Only a handful of 20px cells cross-fade at a time. */
  transition: background 520ms ease, box-shadow 520ms ease, color 520ms ease;
}

.embed-cell::after {
  content: attr(data-code);
  position: relative;
  z-index: 1;
  color: currentColor;
  line-height: 1;
  opacity: 0.86;
  text-shadow: 0 0 6px currentColor;
}

.col-left .embed-cell {
  --cell-rgb: 138, 180, 248;
  background: rgba(138, 180, 248, 0.04);
  color: rgba(138, 180, 248, 0.48);
}

.col-middle .embed-cell {
  --cell-rgb: 253, 214, 99;
  background: rgba(253, 214, 99, 0.04);
  color: rgba(253, 214, 99, 0.48);
}

.col-right .embed-cell {
  --cell-rgb: 129, 201, 149;
  background: rgba(129, 201, 149, 0.04);
  color: rgba(129, 201, 149, 0.48);
}

.embed-cell.is-active {
  background: rgba(var(--cell-rgb), 0.82);
  box-shadow: 0 0 10px rgba(var(--cell-rgb), 0.58);
  color: #0c0e10;
  /* No will-change here: 24 permanently promoted layers cost more than they
     save. The browser promotes them for the duration of the pulse anyway. */
  animation: embeddingCellPulse var(--pulse-duration, 3.8s) infinite ease-in-out;
  animation-delay: var(--pulse-delay, 0s);
}

.cell-p-1, .cell-m-1, .cell-a-1 {
  --pulse-duration: 3.2s;
  --pulse-delay: -0.4s;
}

.cell-p-2, .cell-m-2, .cell-a-2 {
  --pulse-duration: 4s;
  --pulse-delay: -1.2s;
}

.cell-p-3, .cell-m-3, .cell-a-3 {
  --pulse-duration: 3.6s;
  --pulse-delay: -2.1s;
}

.cell-p-4, .cell-m-4, .cell-a-4 {
  --pulse-duration: 4.4s;
  --pulse-delay: -0.8s;
}

.bridge-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-grow: 1;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* Neural Synapse Traveling Signal Animation */
.active-synapse {
  stroke-dasharray: 5 3;
  animation: synapseFlow 1.5s infinite linear;
}

@keyframes synapseFlow {
  from {
    stroke-dashoffset: 20;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@supports (content-visibility: auto) {
  .workflows {
    content-visibility: auto;
    contain-intrinsic-size: auto 720px;
  }

  .quality-strip {
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
  }
}

/* Mobile home refinements: keep the studio hero inside the viewport. */
@media (max-width: 640px) {
  body.studio-home-page {
    overflow-x: hidden;
  }

  body.studio-home-page main,
  body.studio-home-page .hero {
    overflow-x: hidden;
  }

  body.studio-home-page .navbar {
    top: 12px;
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    border-radius: 14px;
  }

  body.studio-home-page .navbar > .container {
    min-height: 54px;
    max-width: 100%;
    padding-right: 10px;
    padding-left: 10px;
  }

  body.studio-home-page .navbar-brand {
    min-width: 0;
    max-width: calc(100% - 52px);
    gap: 8px;
    font-size: 0.98rem;
    white-space: nowrap;
  }

  body.studio-home-page .navbar-logo {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    padding: 6px;
  }

  body.studio-home-page .navbar-toggler {
    display: inline-flex;
    flex: 0 0 42px;
    width: 42px;
    height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  body.studio-home-page .navbar-collapse {
    max-height: calc(100vh - 92px);
    overflow-y: auto;
  }

  body.studio-home-page .hero {
    width: 100%;
    padding: 86px 12px 30px;
  }

  body.studio-home-page .hero-copy,
  body.studio-home-page .workspace-shell,
  body.studio-home-page .workflow-card,
  body.studio-home-page .section-heading {
    min-width: 0;
    max-width: 100%;
  }

  body.studio-home-page .hero-copy,
  body.studio-home-page .hero-actions,
  body.studio-home-page .release-pill,
  body.studio-home-page .workspace-shell {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }

  body.studio-home-page .release-pill {
    overflow: hidden;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 0;
    gap: 5px 8px;
    padding: 10px 12px;
  }

  body.studio-home-page .status-dot,
  body.studio-home-page .pill-label {
    margin-right: 0;
  }

  body.studio-home-page .pill-label {
    min-width: 0;
    font-size: 0.74rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  body.studio-home-page .pill-copy {
    grid-column: 1 / -1;
    min-width: 0;
    margin-top: 2px;
    font-size: 0.76rem;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  body.studio-home-page .hero-copy h1 {
    max-width: 100%;
    font-size: 2rem !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  body.studio-home-page .hero-copy > p {
    max-width: 32rem;
    font-size: 0.98rem !important;
    line-height: 1.45 !important;
    overflow-wrap: break-word;
  }

  body.studio-home-page .hero-actions {
    width: 100%;
    gap: 10px;
  }

  body.studio-home-page .primary-action,
  body.studio-home-page .secondary-action {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    padding: 0 14px;
    text-align: center;
    white-space: normal;
  }

  body.studio-home-page .workspace-shell {
    overflow: hidden;
    margin-top: 24px;
    border-radius: 14px;
  }

  body.studio-home-page .workspace-chrome {
    min-height: 50px;
    grid-template-columns: 50px minmax(0, 1fr);
    padding: 0 12px;
  }

  body.studio-home-page .window-controls {
    gap: 5px;
  }

  body.studio-home-page .window-controls span {
    width: 8px;
    height: 8px;
  }

  body.studio-home-page .workspace-title {
    min-width: 0;
    justify-content: start;
  }

  body.studio-home-page .workspace-title strong {
    font-size: 0.78rem;
  }

  body.studio-home-page .workspace-title span,
  body.studio-home-page .run-state {
    display: none;
  }

  body.studio-home-page .workspace-grid {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  body.studio-home-page .pipeline-col,
  body.studio-home-page .embed-grid {
    min-width: 0;
    max-width: 100%;
  }

  body.studio-home-page .embed-grid {
    gap: 2px;
  }

  body.studio-home-page .embed-cell {
    border-radius: 1px;
    font-size: 4.6px;
  }

  body.studio-home-page .workflows,
  body.studio-home-page .quality-strip {
    width: calc(100% - 24px);
  }

  body.studio-home-page .section-heading {
    gap: 12px;
  }

  body.studio-home-page .section-heading h2 {
    font-size: 1.8rem;
    line-height: 1.12;
    overflow-wrap: break-word;
  }

  body.studio-home-page .workflow-card {
    padding: 18px;
  }
}

/* ---------------------------------------------------------------------------
   HERO MOTION SYSTEM
   Every looping animation below drives only `transform` and `opacity`, so the
   compositor handles them off the main thread. `site-ui.js` adds `.is-idle` to
   the hero whenever it scrolls out of view or the tab is hidden, which parks
   the whole system at zero cost. Entrance animations are deliberately left out
   of the pause set so a hero can never be frozen mid-fade at opacity 0.
   ------------------------------------------------------------------------ */

@keyframes heroRise {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.release-pill,
.hero-copy h1,
.hero-copy > p,
.hero-actions,
.workspace-shell {
  animation: heroRise 760ms cubic-bezier(0.22, 0.68, 0, 1) both;
}

.release-pill {
  animation-delay: 60ms;
}

.hero-copy h1 {
  animation-delay: 150ms;
}

.hero-copy > p {
  animation-delay: 250ms;
}

.hero-actions {
  animation-delay: 340ms;
}

.workspace-shell {
  animation-delay: 430ms;
}

/* Expanding rings turn the two status dots into a heartbeat instead of a
   static glow. The ring is a pseudo-element, so the dot itself never repaints. */
.status-dot,
.run-state span {
  position: relative;
}

.status-dot::after,
.run-state span::after {
  position: absolute;
  inset: -2px;
  border: 1px solid currentColor;
  border-radius: 999px;
  content: "";
  color: var(--accent);
  /* Base state is invisible so reduced-motion never leaves a static ring. */
  opacity: 0;
  animation: dotRing 2.8s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}

.run-state span::after {
  color: var(--success);
  animation-delay: -1.4s;
}

@keyframes dotRing {
  0% {
    opacity: 0.75;
    transform: scale3d(0.7, 0.7, 1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale3d(2.6, 2.6, 1);
  }
}

/* A scan band crossing each embedding matrix. One composited element per
   column beats animating 192 individual cells, and the staggered delays make
   the three panels read left-to-right as one pipeline. */
.embed-grid::after {
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  z-index: 2;
  width: 46%;
  content: "";
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(var(--wave-rgb, 138, 180, 248), 0.28) 38%,
    rgba(var(--wave-rgb, 138, 180, 248), 0.62) 50%,
    rgba(var(--wave-rgb, 138, 180, 248), 0.28) 62%,
    transparent 100%
  );
  mix-blend-mode: screen;
  /* Same reason as the status rings: invisible unless the animation drives it. */
  opacity: 0;
  will-change: transform, opacity;
  animation: embedWave 6.4s cubic-bezier(0.55, 0, 0.35, 1) infinite;
}

@keyframes embedWave {
  0% {
    opacity: 0;
    transform: translate3d(-125%, 0, 0) skewX(-10deg);
  }
  14%,
  84% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(345%, 0, 0) skewX(-10deg);
  }
}

.col-left .embed-grid {
  --wave-rgb: 138, 180, 248;
}

.col-middle .embed-grid {
  --wave-rgb: 253, 214, 99;
}

.col-right .embed-grid {
  --wave-rgb: 129, 201, 149;
}

.col-middle .embed-grid::after {
  animation-delay: 0.85s;
}

.col-right .embed-grid::after {
  animation-delay: 1.7s;
}

/* Off-screen or backgrounded: park everything and release the layers. */
.hero.is-idle .grid-blocks span,
.hero.is-idle .workspace-shell::before,
.hero.is-idle .embed-grid::after,
.hero.is-idle .embed-cell.is-active,
.hero.is-idle .status-dot::after,
.hero.is-idle .run-state span::after {
  animation-play-state: paused;
  will-change: auto;
}

/* While the pointer drives a card, transform and background follow it every
   frame — transitioning them would fight the pointer and force extra repaints. */
.workflow-card.is-pointing {
  transition: border-color 180ms ease;
}

@media (max-width: 380px) {
  body.studio-home-page .hero-copy h1 {
    font-size: 1.86rem !important;
  }

  body.studio-home-page .pill-label {
    font-size: 0.7rem;
  }

  body.studio-home-page .workspace-grid {
    gap: 10px !important;
    padding: 10px !important;
  }

  body.studio-home-page .embed-cell {
    font-size: 4px;
  }
}

/* ---------------------------------------------------------------------------
   MIXED PLATFORM HOME
   The Home now routes visitors between open tools, commercial products, and
   evidence-led Insights while preserving the original scientific studio.
   ------------------------------------------------------------------------ */

body.studio-home-page .release-pill {
  width: min(570px, 100%);
}

body.studio-home-page .hero-copy h1 {
  width: min(940px, 100%);
  margin-right: auto;
  margin-left: auto;
  font-size: clamp(3.25rem, 7vw, 5.15rem) !important;
  line-height: 1.02 !important;
}

body.studio-home-page .hero-copy > p {
  width: min(800px, 100%);
}

body.studio-home-page .workspace-grid {
  min-height: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.studio-home-page .pipeline-col {
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
    rgba(0, 0, 0, 0.14);
}

body.studio-home-page .pipeline-col:hover {
  border: 1px solid rgba(138, 180, 248, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.studio-home-page .col-subtitle {
  display: block;
  min-height: 1rem;
}

body.studio-home-page .col-title {
  display: block;
  min-height: 2.85rem;
  margin-bottom: 12px;
  font-size: 0.95rem;
  line-height: 1.3;
}

body.studio-home-page .workflow-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.studio-home-page .workflow-card {
  min-height: 312px;
}

body.studio-home-page .workflow-type {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
}

body.studio-home-page .workflow-card-commercial {
  background:
    radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(174, 139, 255, 0.15), transparent 34%),
    linear-gradient(180deg, rgba(174, 139, 255, 0.07), rgba(255, 255, 255, 0.025));
}

body.studio-home-page .workflow-icon.violet {
  color: #c6a9ff;
  border-color: rgba(198, 169, 255, 0.28);
}

body.studio-home-page .workflow-link span,
body.studio-home-page .text-action span {
  display: inline-block;
  transition: transform 180ms ease;
}

body.studio-home-page .workflow-card:hover .workflow-link span,
body.studio-home-page .text-action:hover span {
  transform: translateX(3px);
}

body.studio-home-page .featured-product {
  display: grid;
  width: min(1180px, calc(100% - 48px));
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
  margin: 0 auto 32px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 18%, rgba(138, 180, 248, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    var(--surface);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.studio-home-page .featured-product-media {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 470px;
  padding: 24px;
  place-items: center;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    #0a0b0d;
  background-size: 24px 24px;
}

body.studio-home-page .featured-product-media::before {
  position: absolute;
  inset: 12% 8%;
  border-radius: 999px;
  background: rgba(138, 180, 248, 0.12);
  content: "";
  filter: blur(54px);
  pointer-events: none;
}

body.studio-home-page .featured-product-media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-height: 430px;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: #08090a;
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.56);
}

body.studio-home-page .product-screen-label {
  position: absolute;
  right: 36px;
  bottom: 36px;
  z-index: 2;
  max-width: calc(100% - 72px);
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(12, 14, 16, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.studio-home-page .product-screen-label span,
body.studio-home-page .product-screen-label strong {
  display: block;
}

body.studio-home-page .product-screen-label span {
  margin-bottom: 3px;
  color: var(--accent);
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
}

body.studio-home-page .product-screen-label strong {
  color: var(--text);
  font-size: 0.78rem;
}

body.studio-home-page .featured-product-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 4vw, 54px);
}

body.studio-home-page .product-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

body.studio-home-page .product-kicker > span {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

body.studio-home-page .product-status {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(253, 214, 99, 0.3);
  border-radius: 999px;
  background: rgba(253, 214, 99, 0.08);
  color: var(--amber);
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}

body.studio-home-page .product-status.is-available {
  border-color: rgba(129, 201, 149, 0.3);
  background: rgba(129, 201, 149, 0.08);
  color: var(--success);
}

body.studio-home-page .featured-product-copy h2 {
  margin-bottom: 16px;
  color: var(--text);
  font-size: clamp(2rem, 2.5vw, 2.75rem);
  font-weight: 560;
  line-height: 1.08;
  text-wrap: balance;
}

body.studio-home-page .featured-product-copy > p {
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.58;
}

body.studio-home-page .product-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 14px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

body.studio-home-page .product-facts li {
  position: relative;
  padding-left: 16px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8rem;
  line-height: 1.42;
}

body.studio-home-page .product-facts li::before {
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(138, 180, 248, 0.55);
  content: "";
}

body.studio-home-page .product-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

body.studio-home-page .text-action {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.85rem;
  font-weight: 700;
}

body.studio-home-page .text-action:hover {
  color: var(--text);
}

body.studio-home-page .quality-strip {
  margin-top: 0;
}

@supports (content-visibility: auto) {
  body.studio-home-page .featured-product {
    content-visibility: auto;
    contain-intrinsic-size: auto 560px;
  }
}

@media (max-width: 1024px) {
  body.studio-home-page .workflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.studio-home-page .workspace-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.studio-home-page .featured-product {
    grid-template-columns: 1fr;
  }

  body.studio-home-page .featured-product-media {
    min-height: 410px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 640px) {
  body.studio-home-page .release-pill,
  body.studio-home-page .hero-copy h1,
  body.studio-home-page .hero-copy > p,
  body.studio-home-page .hero-actions,
  body.studio-home-page .workspace-shell {
    animation: none;
  }

  body.studio-home-page .hero-copy h1 {
    font-size: clamp(2.15rem, 10vw, 2.8rem) !important;
    line-height: 1.05 !important;
  }

  body.studio-home-page .workspace-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 9px !important;
  }

  body.studio-home-page .pipeline-col {
    padding: 7px;
    border-radius: 7px;
  }

  body.studio-home-page .col-subtitle {
    min-height: 2.2rem;
    margin: 0;
    font-size: 0.54rem;
    line-height: 1.2;
    text-align: center;
  }

  body.studio-home-page .col-title {
    display: none;
  }

  body.studio-home-page .workflow-grid {
    grid-template-columns: 1fr;
  }

  body.studio-home-page .workflow-card {
    min-height: 278px;
    padding: 20px;
  }

  body.studio-home-page .featured-product {
    width: calc(100% - 24px);
    border-radius: 10px;
  }

  body.studio-home-page .featured-product-media {
    min-height: 250px;
    padding: 12px;
  }

  body.studio-home-page .featured-product-media img {
    max-height: 230px;
  }

  body.studio-home-page .product-screen-label {
    display: none;
  }

  body.studio-home-page .featured-product-copy {
    padding: 24px 20px 26px;
  }

  body.studio-home-page .product-kicker {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  body.studio-home-page .featured-product-copy h2 {
    font-size: 1.85rem;
  }

  body.studio-home-page .product-facts {
    grid-template-columns: 1fr;
  }

  body.studio-home-page .product-actions {
    align-items: stretch;
    flex-direction: column;
  }

  body.studio-home-page .product-actions .primary-action {
    width: 100%;
  }

  body.studio-home-page .text-action {
    padding: 4px 0;
    text-align: center;
  }
}

@media (max-width: 380px) {
  body.studio-home-page .hero-copy h1 {
    font-size: 2.05rem !important;
  }

  body.studio-home-page .col-subtitle {
    font-size: 0.49rem;
  }
}