:root {
  color-scheme: dark;
  --os-canvas: oklch(6.4% 0.018 250);
  --os-canvas-2: oklch(9.8% 0.024 246);
  --bg-cyan-field: oklch(70% 0.17 205 / 0.2);
  --bg-violet-field: oklch(68% 0.17 286 / 0.17);
  --bg-rose-field: oklch(66% 0.18 24 / 0.13);
  --bg-amber-field: oklch(78% 0.16 78 / 0.13);
  --bg-lime-field: oklch(78% 0.17 145 / 0.13);
  --surface: oklch(15% 0.018 244 / 0.78);
  --surface-elevated: oklch(19% 0.02 244 / 0.82);
  --surface-card: oklch(23% 0.024 244 / 0.74);
  --surface-strong: oklch(29% 0.026 244 / 0.7);
  --hairline: oklch(82% 0.04 232 / 0.13);
  --hairline-strong: oklch(88% 0.05 220 / 0.24);
  --ink: oklch(96% 0.006 232);
  --body: oklch(82% 0.014 232);
  --muted: oklch(66% 0.016 232);
  --dim: oklch(49% 0.016 232);
  --cyan: oklch(78% 0.14 205);
  --lime: oklch(82% 0.16 145);
  --amber: oklch(80% 0.17 76);
  --violet: oklch(76% 0.15 292);
  --rose: oklch(73% 0.16 24);
  --blue-soft: oklch(72% 0.14 215 / 0.16);
  --green-soft: oklch(78% 0.15 145 / 0.14);
  --amber-soft: oklch(80% 0.16 76 / 0.15);
  --violet-soft: oklch(74% 0.15 292 / 0.15);
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 49% 43%, oklch(73% 0.16 205 / 0.09), transparent 22rem),
    radial-gradient(ellipse at 14% 12%, var(--bg-cyan-field), transparent 34rem),
    radial-gradient(ellipse at 83% 15%, var(--bg-violet-field), transparent 38rem),
    radial-gradient(ellipse at 74% 91%, var(--bg-amber-field), transparent 42rem),
    radial-gradient(ellipse at 18% 86%, var(--bg-lime-field), transparent 36rem),
    radial-gradient(ellipse at 94% 55%, var(--bg-rose-field), transparent 32rem),
    conic-gradient(from 212deg at 50% 45%, oklch(5.6% 0.018 248), oklch(8.4% 0.028 222), oklch(7.4% 0.024 286), oklch(8% 0.022 34), oklch(5.6% 0.018 248)),
    linear-gradient(132deg, oklch(4.5% 0.018 248), var(--os-canvas) 36%, oklch(7.8% 0.03 262) 68%, oklch(4.8% 0.017 234));
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Microsoft YaHei", sans-serif;
  font-feature-settings: "calt", "kern", "liga";
  letter-spacing: 0;
}

body::selection {
  background: oklch(76% 0.14 205 / 0.28);
}

button,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
textarea:focus-visible {
  outline: 2px solid oklch(80% 0.14 205 / 0.9);
  outline-offset: 3px;
}

svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.ambient {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambient::before,
.ambient::after {
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
}

.ambient::before {
  background:
    radial-gradient(ellipse at 50% 43%, oklch(76% 0.15 205 / 0.16), transparent 19rem),
    linear-gradient(116deg, transparent 0 12%, oklch(78% 0.14 205 / 0.14) 12.6%, transparent 13.3% 35%, oklch(76% 0.15 292 / 0.11) 35.8%, transparent 36.5% 100%),
    linear-gradient(64deg, transparent 0 27%, oklch(82% 0.16 145 / 0.105) 27.6%, transparent 28.4% 61%, oklch(80% 0.17 76 / 0.095) 61.6%, transparent 62.4% 100%),
    linear-gradient(158deg, transparent 0 45%, oklch(73% 0.16 24 / 0.078) 45.5%, transparent 46.2% 100%);
  filter: blur(0.35px);
  opacity: 0.86;
  mask-image: radial-gradient(ellipse at 50% 48%, black 0 58%, transparent 83%);
  animation: modelFieldShift 20s var(--ease) infinite;
}

.ambient::after {
  background:
    radial-gradient(circle at 18% 22%, oklch(78% 0.14 205 / 0.5) 0 2px, transparent 3px),
    radial-gradient(circle at 34% 43%, oklch(82% 0.16 145 / 0.28) 0 1.5px, transparent 3px),
    radial-gradient(circle at 51% 42%, oklch(90% 0.05 220 / 0.2) 0 1.5px, transparent 3px),
    radial-gradient(circle at 76% 24%, oklch(76% 0.15 292 / 0.42) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 55%, oklch(73% 0.16 24 / 0.38) 0 2px, transparent 3px),
    radial-gradient(circle at 66% 80%, oklch(80% 0.17 76 / 0.36) 0 2px, transparent 3px),
    radial-gradient(circle at 29% 72%, oklch(82% 0.16 145 / 0.39) 0 2px, transparent 3px),
    radial-gradient(circle at 8% 61%, oklch(70% 0.16 205 / 0.22) 0 1.5px, transparent 3px),
    radial-gradient(circle at 91% 82%, oklch(80% 0.16 78 / 0.26) 0 1.5px, transparent 3px),
    radial-gradient(circle at 58% 12%, oklch(76% 0.15 292 / 0.2) 0 1px, transparent 2px);
  filter:
    drop-shadow(0 0 14px oklch(78% 0.14 205 / 0.36))
    drop-shadow(0 0 24px oklch(76% 0.15 292 / 0.12));
  opacity: 0.74;
  animation: nodePulse 6.4s var(--ease) infinite;
}

.mesh-plane {
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(oklch(86% 0.04 230 / 0.048) 1px, transparent 1px),
    linear-gradient(90deg, oklch(86% 0.04 230 / 0.044) 1px, transparent 1px),
    linear-gradient(63deg, transparent 0 48%, oklch(78% 0.14 205 / 0.07) 49%, transparent 50% 100%),
    linear-gradient(119deg, transparent 0 49%, oklch(76% 0.15 292 / 0.05) 50%, transparent 51% 100%);
  background-size: 72px 72px, 72px 72px, 210px 210px, 260px 260px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 0 58%, transparent 79%);
  transform: perspective(920px) rotateX(57deg) translateY(5%);
  transform-origin: center;
  animation: meshDrift 22s linear infinite;
}

.routing-field {
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(ellipse at 50% 45%, oklch(70% 0.055 210 / 0.075), transparent 11rem),
    radial-gradient(ellipse at 50% 45%, oklch(64% 0.12 205 / 0.05), transparent 24rem),
    linear-gradient(28deg, transparent 0 41%, oklch(66% 0.12 205 / 0.052) 41.35%, transparent 41.85% 100%),
    linear-gradient(146deg, transparent 0 43%, oklch(62% 0.12 292 / 0.044) 43.35%, transparent 43.85% 100%),
    linear-gradient(2deg, transparent 0 47%, oklch(68% 0.13 145 / 0.04) 47.25%, transparent 47.75% 100%),
    radial-gradient(circle at 39% 44%, oklch(70% 0.13 205 / 0.28) 0 1.5px, transparent 3px),
    radial-gradient(circle at 61% 45%, oklch(66% 0.13 292 / 0.22) 0 1.5px, transparent 3px),
    radial-gradient(circle at 48% 57%, oklch(70% 0.14 145 / 0.19) 0 1px, transparent 2.5px),
    radial-gradient(circle at 53% 32%, oklch(70% 0.14 76 / 0.16) 0 1px, transparent 2.5px);
  opacity: 0.6;
  mix-blend-mode: screen;
  filter: blur(0.15px);
  mask-image: radial-gradient(ellipse at 50% 49%, black 0 46%, transparent 76%);
  animation: routingFieldBreathe 8.4s var(--ease) infinite;
}

.chromatic-pane {
  display: none;
}

.pane-a {
  top: 9%;
  right: 7%;
  width: min(28vw, 420px);
  height: 180px;
  opacity: 0.42;
  animation: paneFloat 8s var(--ease) infinite;
}

.pane-b {
  left: 5%;
  bottom: 10%;
  width: min(34vw, 520px);
  height: 210px;
  opacity: 0.34;
  animation: paneFloat 10s var(--ease) infinite reverse;
}

.scan-lane {
  position: absolute;
  width: 44rem;
  height: 2px;
  background:
    linear-gradient(90deg, transparent, oklch(78% 0.14 205 / 0.08), var(--cyan), var(--violet), oklch(82% 0.16 145 / 0.12), transparent);
  opacity: 0.3;
  filter:
    blur(0.2px)
    drop-shadow(0 0 10px oklch(78% 0.14 205 / 0.42));
  transform: rotate(-24deg);
  animation: laneTravel 7.8s linear infinite;
}

.lane-a {
  left: 10%;
  top: 22%;
}

.lane-b {
  right: 14%;
  top: 52%;
  background:
    linear-gradient(90deg, transparent, oklch(82% 0.16 145 / 0.12), var(--lime), var(--cyan), transparent);
  filter:
    blur(0.2px)
    drop-shadow(0 0 10px oklch(82% 0.16 145 / 0.36));
  animation-delay: -2.2s;
}

.lane-c {
  left: 42%;
  bottom: 15%;
  background:
    linear-gradient(90deg, transparent, oklch(80% 0.17 76 / 0.12), var(--amber), var(--rose), transparent);
  filter:
    blur(0.2px)
    drop-shadow(0 0 10px oklch(80% 0.17 76 / 0.34));
  animation-delay: -4.1s;
}

.app-shell {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
}

.portal-screen,
.workspace-screen {
  min-height: 100dvh;
}

.portal-screen {
  position: relative;
  display: grid;
  place-items: center;
  padding: 28px;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}

.os-launcher {
  width: min(1480px, calc(100vw - 56px));
  min-height: min(820px, calc(100dvh - 56px));
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  position: relative;
  overflow: visible;
}

.os-launcher::before {
  content: "";
  position: absolute;
  inset: 8% 6% 14%;
  background:
    radial-gradient(circle at 50% 38%, oklch(62% 0.12 205 / 0.12), transparent 24%),
    radial-gradient(circle at 42% 52%, oklch(66% 0.13 145 / 0.075), transparent 21%),
    radial-gradient(circle at 62% 58%, oklch(60% 0.13 292 / 0.09), transparent 24%);
  filter: blur(38px);
  opacity: 0.58;
  pointer-events: none;
}

.os-launcher > * {
  position: relative;
  z-index: 1;
}

.launcher-layout {
  display: grid;
  grid-template-columns: minmax(420px, 0.92fr) minmax(520px, 1.08fr);
  align-items: center;
  gap: 22px;
  min-height: 0;
  position: relative;
  z-index: 3;
  pointer-events: none;
}

.launcher-layout-centered {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.core-stack {
  display: grid;
  gap: 16px;
  justify-items: center;
  padding: 0;
}

.brand-logo-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(650px, 92vw);
  min-height: 510px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  overflow: visible;
  isolation: isolate;
  pointer-events: auto;
  z-index: 5;
  transform-origin: 50% 38%;
  animation: logoFloat 5.8s var(--ease) infinite;
  transition: transform 240ms var(--ease), filter 240ms var(--ease);
}

.brand-logo-entry:hover {
  filter: saturate(1.08);
  transform: translateY(-4px) scale(1.012);
}

.brand-logo-entry::before {
  content: "";
  position: absolute;
  inset: 8% 9% 22%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, oklch(66% 0.1 205 / 0.15), transparent 27%),
    radial-gradient(circle at 38% 60%, oklch(66% 0.13 145 / 0.105), transparent 30%),
    radial-gradient(circle at 64% 62%, oklch(62% 0.13 292 / 0.1), transparent 32%),
    conic-gradient(from 180deg, transparent, oklch(66% 0.12 205 / 0.11), transparent 34%, oklch(66% 0.13 145 / 0.085), transparent 68%, oklch(62% 0.13 292 / 0.1), transparent);
  filter: blur(22px);
  opacity: 0.46;
  animation: logoAura 4.8s var(--ease) infinite;
  pointer-events: none;
}

.brand-logo-entry::after {
  content: "";
  position: absolute;
  left: 28%;
  right: 28%;
  bottom: 28%;
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(78% 0.14 205 / 0.62), oklch(82% 0.16 145 / 0.45), transparent);
  filter: blur(0.2px);
  opacity: 0.72;
  pointer-events: none;
}

.logo-aura,
.logo-orbit {
  position: absolute;
  pointer-events: none;
}

.brand-symbol-wrap {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: min(392px, 70vw);
  height: min(282px, 42vw);
  isolation: isolate;
  transform: scale(1);
  transform-origin: center;
}

.brand-symbol-wrap::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 17% 20% 19%;
  border-radius: 50%;
  background:
    linear-gradient(110deg, transparent 0 38%, oklch(100% 0 0 / 0.2) 46%, transparent 55% 100%),
    conic-gradient(from 240deg, oklch(78% 0.14 205 / 0.22), transparent 22%, oklch(82% 0.16 145 / 0.18), transparent 58%, oklch(76% 0.15 292 / 0.2), transparent);
  filter: blur(5px);
  mix-blend-mode: screen;
  opacity: 0.68;
  transform: rotate(-14deg);
  animation: logoSheen 5.6s var(--ease) infinite;
  pointer-events: none;
}

.brand-symbol-wrap::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 8% 8% 10%;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent, oklch(78% 0.14 205 / 0.18), transparent),
    linear-gradient(0deg, transparent, oklch(82% 0.16 145 / 0.12), transparent);
  mask-image:
    linear-gradient(90deg, transparent 0 47%, black 47% 53%, transparent 53% 100%),
    linear-gradient(0deg, transparent 0 47%, black 47% 53%, transparent 53% 100%);
  opacity: 0.34;
  transform: rotate(-18deg);
  pointer-events: none;
}

.logo-aura {
  inset: 1% 4% 2%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, oklch(72% 0.05 218 / 0.055), transparent 22%),
    radial-gradient(circle at 54% 54%, oklch(64% 0.12 205 / 0.07), transparent 35%),
    radial-gradient(circle at 42% 62%, oklch(66% 0.13 145 / 0.045), transparent 29%);
  filter: blur(28px);
  opacity: 0.48;
  animation: logoAura 5.6s var(--ease) infinite reverse;
}

.logo-orbit {
  left: 50%;
  top: 50%;
  border: 2px solid oklch(82% 0.08 220 / 0.26);
  border-radius: 50%;
  opacity: 0.84;
  box-shadow: 0 0 18px oklch(78% 0.12 205 / 0.16), inset 0 0 18px oklch(82% 0.12 240 / 0.1);
  transform: translate(-50%, -50%) rotate(var(--orbit-tilt, 0deg));
  transform-origin: center;
  animation: logoOrbit var(--orbit-speed, 12s) linear infinite;
}

.logo-orbit::after {
  content: "";
  position: absolute;
  right: 10%;
  top: 28%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--orbit-color, var(--cyan));
  box-shadow: 0 0 18px var(--orbit-color, var(--cyan));
}

.orbit-a {
  width: min(392px, 66vw);
  height: min(160px, 26vw);
  --orbit-tilt: -12deg;
  --orbit-speed: 13s;
  --orbit-color: var(--cyan);
}

.orbit-b {
  width: min(348px, 58vw);
  height: min(132px, 22vw);
  --orbit-tilt: 24deg;
  --orbit-speed: 16s;
  --orbit-color: var(--lime);
  animation-direction: reverse;
}

.orbit-c {
  width: min(302px, 50vw);
  height: min(104px, 18vw);
  --orbit-tilt: 58deg;
  --orbit-speed: 18s;
  --orbit-color: var(--violet);
  opacity: 0.54;
}

.brand-symbol-image {
  position: relative;
  z-index: 3;
  display: block;
  width: min(258px, 44vw);
  height: auto;
  border-radius: 0;
  background: transparent;
  filter:
    saturate(1.14)
    contrast(1.08)
    drop-shadow(0 22px 46px oklch(4% 0.02 250 / 0.5))
    drop-shadow(0 0 14px oklch(78% 0.14 205 / 0.16))
    drop-shadow(0 0 26px oklch(76% 0.15 292 / 0.1));
  animation: logoBreath 4.9s var(--ease) infinite;
}

.brand-text-lockup {
  position: relative;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 11px;
  margin-top: 30px;
  color: var(--ink);
  text-align: center;
  text-shadow:
    0 2px 0 oklch(5% 0.018 248 / 0.64),
    0 0 6px oklch(78% 0.14 205 / 0.24),
    0 8px 14px oklch(3% 0.02 250 / 0.46);
}

.brand-wordmark {
  position: relative;
  display: block;
  color: oklch(94% 0.055 205);
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: Helvetica, "Helvetica Neue", Arial, "Microsoft YaHei UI", "Noto Sans SC", sans-serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.02em;
  white-space: nowrap;
  filter:
    drop-shadow(0 0 3px oklch(80% 0.16 190 / 0.32))
    drop-shadow(0 0 7px oklch(70% 0.18 285 / 0.14));
  animation: none;
}

.brand-tagline {
  position: relative;
  display: block;
  color: oklch(83% 0.13 198);
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: Helvetica, "Helvetica Neue", Arial, system-ui, sans-serif;
  font-size: 21px;
  font-stretch: normal;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.18em;
  white-space: nowrap;
  filter:
    drop-shadow(0 0 3px oklch(80% 0.16 190 / 0.32))
    drop-shadow(0 0 7px oklch(70% 0.18 285 / 0.14));
  animation: none;
}

.brand-wordmark::after,
.brand-tagline::after {
  content: none;
}

.brand-promise {
  display: block;
  max-width: min(520px, 86vw);
  margin-top: 4px;
  color: oklch(88% 0.052 205);
  font-family: Helvetica, "Helvetica Neue", Arial, "Microsoft YaHei UI", "Noto Sans SC", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.03em;
  text-shadow:
    0 0 10px oklch(78% 0.14 205 / 0.18),
    0 6px 16px oklch(3% 0.02 250 / 0.38);
}

.nexus-status {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: min(560px, 88vw);
  margin-top: 18px;
  pointer-events: none;
}

.nexus-status span {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px 0 24px;
  border: 1px solid oklch(82% 0.08 215 / 0.18);
  border-radius: 999px;
  background:
    linear-gradient(112deg, oklch(100% 0 0 / 0.055), transparent 42%),
    oklch(7% 0.018 248 / 0.58);
  color: oklch(82% 0.045 210);
  font-size: 12px;
  font-weight: 520;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.035);
}

.nexus-status span::before {
  content: "";
  position: absolute;
  left: 10px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: oklch(82% 0.16 145);
  box-shadow: 0 0 12px oklch(82% 0.16 145 / 0.74);
}

.brand-tagline::after {
  content: none;
}

.brand-mark {
  position: relative;
  display: block;
  flex: 0 0 auto;
  border-radius: 50%;
  background:
    conic-gradient(from 145deg, var(--cyan), var(--violet), var(--lime), var(--amber), var(--cyan));
  animation: logoTurn 9s linear infinite;
}

.brand-mark::before {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  background: var(--os-canvas);
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 26% 12% 26% 38%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ink), var(--cyan));
  transform: rotate(-34deg);
}

.entry-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 62px;
  padding: 0 25px 0 14px;
  border: 1px solid oklch(78% 0.14 205 / 0.46);
  border-radius: 999px;
  background:
    linear-gradient(110deg, oklch(100% 0 0 / 0.11), transparent 34%),
    linear-gradient(92deg, oklch(78% 0.14 205 / 0.16), oklch(76% 0.15 292 / 0.1), oklch(82% 0.16 145 / 0.1)),
    oklch(7% 0.018 248 / 0.76);
  color: oklch(94% 0.07 205);
  font-size: 14px;
  font-weight: 620;
  letter-spacing: 0;
  backdrop-filter: blur(18px) saturate(150%);
  overflow: hidden;
  transition:
    border-color 180ms var(--ease),
    background 180ms var(--ease),
    color 180ms var(--ease),
    box-shadow 180ms var(--ease),
    transform 180ms var(--ease);
}

.brand-name {
  display: block;
  margin-top: 12px;
  font-size: 56px;
  font-weight: 760;
  line-height: 1.05;
  text-wrap: balance;
}

.brand-subtitle {
  display: block;
  margin-top: 10px;
  color: var(--body);
  font-size: 17px;
  font-weight: 650;
}

.entry-action {
  position: relative;
  z-index: 3;
  margin-top: 24px;
  min-height: 62px;
  min-width: 184px;
  color: oklch(94% 0.07 205);
  box-shadow:
    inset 0 0 0 1px oklch(100% 0 0 / 0.045),
    0 0 24px oklch(78% 0.14 205 / 0.2),
    0 14px 30px oklch(3% 0.02 250 / 0.38);
  transform: translateY(0);
}

.entry-action::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, oklch(78% 0.17 180), oklch(78% 0.14 205), oklch(70% 0.16 285), oklch(78% 0.17 180));
  background-size: 240% 100%;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.72;
  pointer-events: none;
  animation: entryBorderFlow 7.6s linear infinite;
}

.entry-action::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 0 42%, oklch(100% 0 0 / 0.08) 48%, transparent 56% 100%);
  transform: translateX(-120%);
  opacity: 0.78;
  pointer-events: none;
  animation: entrySheen 7.6s var(--ease) infinite;
}

.entry-action-icon,
.entry-action-copy {
  position: relative;
  z-index: 1;
}

.entry-action-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: oklch(6% 0.018 248 / 0.78);
  color: oklch(78% 0.15 198);
  box-shadow:
    inset 0 0 0 1px oklch(78% 0.14 205 / 0.22),
    0 0 14px oklch(78% 0.14 205 / 0.18);
}

.entry-action-icon svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.9;
}

.entry-action-copy {
  display: grid;
  justify-items: center;
  gap: 0;
  text-align: center;
}

.entry-action-copy strong,
.entry-action-copy small {
  display: block;
  line-height: 1.2;
}

.entry-action-copy strong {
  color: oklch(96% 0.03 205);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.entry-action-copy small {
  color: oklch(76% 0.095 205);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand-logo-entry:hover .entry-action {
  border-color: oklch(82% 0.14 205 / 0.58);
  color: oklch(96% 0.06 205);
  box-shadow:
    inset 0 0 0 1px oklch(100% 0 0 / 0.06),
    0 0 26px oklch(78% 0.14 205 / 0.24),
    0 16px 34px oklch(3% 0.02 250 / 0.42);
  transform: translateY(-2px);
}

.module-dock {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  pointer-events: none;
  perspective: 900px;
  perspective-origin: 50% 45%;
}

.module-dock::before,
.module-dock::after {
  content: "";
  position: absolute;
  left: 49%;
  top: 48%;
  width: min(62vw, 920px);
  height: min(34vw, 470px);
  border-radius: 50%;
  border: 1px solid oklch(78% 0.12 205 / 0.075);
  transform: translate(-50%, -50%) rotate(-23deg);
  opacity: 0.5;
  filter: drop-shadow(0 0 18px oklch(78% 0.14 205 / 0.08));
}

.module-dock::after {
  left: 51%;
  top: 52%;
  width: min(70vw, 1040px);
  height: min(24vw, 340px);
  border-color: oklch(76% 0.14 285 / 0.06);
  transform: translate(-50%, -50%) rotate(13deg);
  opacity: 0.38;
}

.dock-tile {
  --node-index: "00";
  --tile-width: clamp(188px, 14.2vw, 260px);
  --tile-tilt: 0deg;
  --float-speed: 8.5s;
  --float-delay: 0s;
  --tile-scale: 1;
  --flip-depth: 8deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--tile-width);
  min-width: 0;
  min-height: 104px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid oklch(90% 0.05 220 / 0.28);
  border-radius: 8px;
  background:
    linear-gradient(124deg, oklch(100% 0 0 / 0.075), transparent 30%),
    linear-gradient(96deg, transparent 0 46%, oklch(100% 0 0 / 0.045) 51%, transparent 58% 100%),
    radial-gradient(circle at 86% 16%, var(--tile-soft, var(--blue-soft)), transparent 38%),
    oklch(8% 0.016 246 / 0.82);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow:
    inset 0 0 0 1px oklch(100% 0 0 / 0.035),
    inset 0 0 20px oklch(78% 0.14 205 / 0.045),
    0 0 0 1px oklch(3% 0.02 250 / 0.62),
    0 14px 28px oklch(3% 0.02 250 / 0.28);
  color: var(--body);
  text-align: left;
  overflow: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--tile-tilt)) scale(var(--tile-scale));
  will-change: transform;
  animation: fragmentFloatDrift var(--float-speed) var(--ease) infinite;
  animation-delay: var(--float-delay);
  transition: filter 180ms var(--ease);
}

.dock-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent, var(--tile-accent, var(--cyan)), transparent) top / 100% 1px no-repeat,
    linear-gradient(112deg, transparent 0 42%, oklch(100% 0 0 / 0.065) 48%, transparent 56% 100%);
  opacity: 0.68;
  pointer-events: none;
}

.dock-tile::after {
  content: var(--node-index);
  position: absolute;
  right: 10px;
  top: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 16px;
  border-radius: 999px;
  background: oklch(4.5% 0.014 248 / 0.72);
  color: var(--tile-accent, var(--cyan));
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.08em;
  box-shadow:
    inset 0 0 0 1px oklch(100% 0 0 / 0.055),
    0 0 14px var(--tile-accent, var(--cyan));
}

.dock-tile:nth-child(1) {
  left: 5%;
  top: 72%;
  --node-index: "01";
  --tile-tilt: -8deg;
  --tile-width: clamp(188px, 14vw, 248px);
  --tile-scale: 0.96;
  --flip-depth: -7deg;
  --float-delay: -0.6s;
}

.dock-tile:nth-child(2) {
  left: 7%;
  top: 29%;
  --node-index: "02";
  --tile-tilt: 7deg;
  --tile-width: clamp(190px, 14.2vw, 252px);
  --tile-scale: 1.02;
  --flip-depth: 9deg;
  --float-speed: 8.5s;
  --float-delay: -2.4s;
}

.dock-tile:nth-child(3) {
  left: 27%;
  top: 8%;
  --node-index: "03";
  --tile-tilt: -4deg;
  --tile-width: clamp(184px, 13.4vw, 238px);
  --tile-scale: 0.88;
  --flip-depth: -6deg;
  --float-speed: 8.5s;
  --float-delay: -1.2s;
}

.dock-tile:nth-child(4) {
  left: 90%;
  top: 19%;
  --node-index: "04";
  --tile-tilt: 8deg;
  --tile-width: clamp(198px, 14.8vw, 270px);
  --tile-scale: 1.06;
  --flip-depth: 10deg;
  --float-speed: 8.5s;
  --float-delay: -3s;
}

.dock-tile:nth-child(5) {
  left: 94%;
  top: 62%;
  --node-index: "05";
  --tile-tilt: -9deg;
  --tile-width: clamp(184px, 13.4vw, 238px);
  --tile-scale: 0.9;
  --flip-depth: -9deg;
  --float-speed: 8.5s;
  --float-delay: -1.8s;
}

.dock-tile:nth-child(6) {
  left: 86%;
  top: 92%;
  --node-index: "06";
  --tile-tilt: 6deg;
  --tile-width: clamp(190px, 14vw, 254px);
  --tile-scale: 0.95;
  --flip-depth: 8deg;
  --float-speed: 8.5s;
  --float-delay: -4s;
}

.dock-tile:nth-child(7) {
  left: 27%;
  top: 95%;
  --node-index: "07";
  --tile-tilt: -7deg;
  --tile-width: clamp(190px, 14vw, 254px);
  --tile-scale: 0.98;
  --flip-depth: -8deg;
  --float-speed: 8.5s;
  --float-delay: -2.8s;
}

.module-dock.media-only .dock-tile:nth-child(1) {
  left: 20%;
  top: 67%;
  --node-index: "01";
  --tile-tilt: -5deg;
  --tile-scale: 1;
}

.module-dock.media-only .dock-tile:nth-child(2) {
  left: 80%;
  top: 33%;
  --node-index: "02";
  --tile-tilt: 5deg;
  --tile-scale: 1;
}

.dock-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, var(--tile-soft, var(--blue-soft)), transparent 65%),
    oklch(4.5% 0.014 248 / 0.86);
  color: var(--tile-accent, var(--cyan));
  transform-origin: center;
  position: relative;
  z-index: 1;
  box-shadow:
    inset 0 0 0 1px oklch(100% 0 0 / 0.045),
    0 0 14px var(--tile-soft, var(--blue-soft));
}

.dock-copy strong,
.dock-copy span {
  display: block;
  min-width: 0;
  transform-origin: left center;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  position: relative;
  z-index: 1;
}

.dock-copy strong {
  color: var(--ink);
  font-size: 22px;
  font-weight: 850;
  line-height: 1.05;
  text-shadow: 0 1px 0 oklch(3% 0.02 248 / 0.86);
}

.dock-copy span {
  margin-top: 6px;
  color: oklch(82% 0.018 232);
  font-size: 15px;
  font-weight: 680;
  line-height: 1.22;
}

.workspace-screen {
  display: none;
  width: 100%;
  padding: 16px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}

.workspace-grid {
  display: grid;
  grid-template-columns: 88px 264px minmax(0, 1fr);
  gap: 12px;
  min-height: calc(100dvh - 32px);
  width: 100%;
}

.app-shell.is-entered .portal-screen {
  position: fixed;
  inset: 0;
  opacity: 0;
  transform: scale(0.985);
  pointer-events: none;
}

.app-shell.is-entered .workspace-screen {
  display: block;
  opacity: 1;
  transform: none;
}

.primary-rail,
.model-drawer,
.creator-stage {
  min-height: calc(100dvh - 32px);
}

.primary-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 14px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  background: oklch(9% 0.014 248 / 0.62);
  backdrop-filter: blur(22px) saturate(150%);
}

.home-trigger {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: oklch(15% 0.018 244 / 0.62);
  color: var(--ink);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
}

.home-trigger:hover {
  transform: translateY(-1px);
  border-color: var(--hairline-strong);
  background: oklch(21% 0.02 244 / 0.74);
}

.rail-logo {
  width: 34px;
  height: 34px;
}

.primary-menu {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.module-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted);
  transition: color 170ms var(--ease), background 170ms var(--ease), border-color 170ms var(--ease), transform 170ms var(--ease);
}

.module-button:hover,
.module-button.is-active {
  border-color: var(--hairline-strong);
  background:
    linear-gradient(135deg, var(--tile-soft, var(--blue-soft)), transparent 60%),
    oklch(21% 0.02 244 / 0.74);
  color: var(--ink);
  transform: translateY(-1px);
}

.module-button.is-active::after {
  content: "";
  position: absolute;
  right: -17px;
  width: 3px;
  height: 28px;
  border-radius: 999px;
  background: var(--tile-accent, var(--cyan));
  box-shadow: 0 0 14px var(--tile-accent, var(--cyan));
}

.module-copy {
  display: none;
}

.rail-telemetry {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--dim);
  font-size: 11px;
}

.rail-telemetry span {
  width: 24px;
  height: 52px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background:
    linear-gradient(180deg, var(--lime) 0 42%, transparent 42%),
    oklch(18% 0.018 244 / 0.64);
}

.model-drawer {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(145deg, oklch(100% 0 0 / 0.06), transparent 40%),
    oklch(12% 0.016 246 / 0.74);
  backdrop-filter: blur(28px) saturate(150%);
  position: relative;
  overflow: hidden;
}

.model-drawer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 50%, oklch(100% 0 0 / 0.09) 54%, transparent 62%);
  transform: translateX(-120%);
  animation: panelSweep 8s var(--ease) infinite;
  pointer-events: none;
}

.drawer-head,
.model-menu {
  position: relative;
  z-index: 1;
}

.drawer-head {
  padding: 2px 2px 14px;
  border-bottom: 1px solid var(--hairline);
}

.drawer-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 680;
}

.drawer-head strong {
  display: block;
  margin-top: 8px;
  font-size: 22px;
  font-weight: 760;
}

.drawer-head p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.model-menu {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.model-button {
  display: flex;
  width: 100%;
  min-height: 64px;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--body);
  text-align: left;
  transition: color 170ms var(--ease), background 170ms var(--ease), border-color 170ms var(--ease), transform 170ms var(--ease);
}

.model-button:hover,
.model-button.is-active {
  border-color: var(--hairline-strong);
  background: oklch(22% 0.02 244 / 0.72);
  color: var(--ink);
  transform: translateX(2px);
}

.model-button.is-active {
  background:
    linear-gradient(135deg, var(--tile-soft, var(--blue-soft)), transparent 64%),
    oklch(24% 0.022 244 / 0.78);
}

.model-dot {
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--tile-accent, var(--cyan));
  box-shadow: 0 0 0 5px oklch(78% 0.12 205 / 0.1);
  animation: statusPulse 2.4s var(--ease) infinite;
}

.model-copy strong {
  display: block;
  color: currentColor;
  font-size: 14px;
  font-weight: 720;
}

.model-copy span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.creator-stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  min-width: 0;
}

.command-capsule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  min-height: 68px;
  padding: 10px 12px 10px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  background: oklch(13% 0.016 246 / 0.76);
  backdrop-filter: blur(24px) saturate(150%);
  overflow: hidden;
  position: relative;
}

.command-capsule::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, oklch(100% 0 0 / 0.07), transparent);
  transform: translateX(-80%);
  animation: capsuleScan 6.5s var(--ease) infinite;
  pointer-events: none;
}

.capsule-route {
  position: relative;
  z-index: 1;
}

.capsule-route {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 680;
}

.capsule-route strong {
  color: var(--ink);
  font-size: 18px;
}

.capsule-route span {
  min-width: 0;
  white-space: nowrap;
}

.capsule-route span:not(:last-child)::after {
  content: "/";
  margin-left: 10px;
  color: var(--dim);
}

.stage-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  grid-template-rows: minmax(280px, auto) auto;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

.task-surface,
.routing-board,
.result-card,
.composer {
  border: 1px solid var(--hairline);
  background:
    linear-gradient(145deg, oklch(100% 0 0 / 0.055), transparent 42%),
    oklch(13% 0.016 246 / 0.74);
  backdrop-filter: blur(24px) saturate(145%);
}

.task-surface {
  min-width: 0;
  min-height: 420px;
  padding: 20px;
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.task-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(oklch(88% 0.04 230 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, oklch(88% 0.04 230 / 0.035) 1px, transparent 1px),
    radial-gradient(circle at 18% 24%, oklch(78% 0.14 205 / 0.12), transparent 28%),
    radial-gradient(circle at 84% 22%, oklch(82% 0.16 145 / 0.08), transparent 25%);
  background-size: 42px 42px, 42px 42px, auto, auto;
  mask-image: linear-gradient(180deg, black, black 62%, transparent 100%);
  pointer-events: none;
}

.task-surface::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -18%;
  width: 62%;
  height: 46%;
  border: 1px solid oklch(88% 0.06 220 / 0.12);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, oklch(80% 0.16 145 / 0.14), transparent 38%),
    conic-gradient(from 210deg, transparent 0 62%, oklch(78% 0.14 205 / 0.2), transparent 76% 100%);
  opacity: 0.9;
  pointer-events: none;
}

.surface-head,
.prompt-card,
.parameter-row {
  position: relative;
  z-index: 1;
}

.surface-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: oklch(18% 0.018 244 / 0.62);
  color: var(--lime);
  font-size: 12px;
  font-weight: 760;
}

.run-meta {
  display: flex;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 680;
}

.prompt-card {
  width: min(100%, 920px);
  margin: 0 0 18px;
  padding: 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: oklch(20% 0.02 244 / 0.74);
  overflow: hidden;
}

.prompt-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 54%, oklch(100% 0 0 / 0.08) 58%, transparent 65%);
  transform: translateX(-120%);
  animation: promptSweep 8.5s var(--ease) infinite;
  pointer-events: none;
}

.prompt-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--ink);
  font-size: 25px;
  font-weight: 740;
  line-height: 1.48;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.parameter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.parameter-row button {
  min-height: 36px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: oklch(16% 0.018 244 / 0.68);
  color: var(--body);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 690;
  transition: color 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease), transform 160ms var(--ease);
}

.parameter-row button:hover {
  color: var(--ink);
  border-color: var(--hairline-strong);
  background: oklch(23% 0.02 244 / 0.72);
  transform: translateY(-1px);
}

.routing-board {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
  border-radius: var(--radius-xl);
  padding: 18px;
  display: grid;
  grid-template-rows: auto minmax(220px, 1fr) auto;
  gap: 16px;
  overflow: hidden;
}

.board-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.board-head strong {
  color: var(--ink);
  font-size: 15px;
}

.route-graph {
  position: relative;
  min-height: 260px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(oklch(86% 0.04 230 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, oklch(86% 0.04 230 / 0.045) 1px, transparent 1px),
    oklch(9% 0.014 248 / 0.42);
  background-size: 32px 32px;
  overflow: hidden;
}

.route-graph::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid oklch(88% 0.05 220 / 0.08);
  border-radius: 50%;
  transform: rotate(-14deg);
}

.route-node {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 68px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: oklch(18% 0.018 244 / 0.82);
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
}

.node-source {
  left: 18px;
  top: 34px;
}

.node-model {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--cyan);
}

.node-output {
  right: 18px;
  bottom: 34px;
}

.route-link {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  transform-origin: left;
  opacity: 0.55;
}

.link-a {
  left: 78px;
  top: 68px;
  width: 170px;
  transform: rotate(26deg);
}

.link-b {
  left: 45%;
  top: 57%;
  width: 190px;
  transform: rotate(29deg);
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
}

.route-pulse {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 16px var(--cyan);
}

.pulse-a {
  left: 82px;
  top: 64px;
  animation: routePulseA 3.8s linear infinite;
}

.pulse-b {
  left: 48%;
  top: 56%;
  background: var(--lime);
  box-shadow: 0 0 16px var(--lime);
  animation: routePulseB 4.6s linear infinite;
}

.model-insight {
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: oklch(18% 0.018 244 / 0.64);
}

.model-insight span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.model-insight strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.15;
}

.model-insight p {
  margin: 10px 0 0;
  color: var(--body);
  font-size: 13px;
  line-height: 1.55;
}

.result-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.result-card {
  min-height: 188px;
  padding: 16px;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: transform 190ms var(--ease), border-color 190ms var(--ease), background 190ms var(--ease);
}

.result-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, var(--tile-soft, var(--blue-soft)), transparent 54%),
    radial-gradient(circle at 84% 18%, var(--tile-soft, var(--blue-soft)), transparent 28%);
  opacity: 0.9;
  pointer-events: none;
}

.result-card:hover {
  transform: translateY(-3px);
  border-color: var(--hairline-strong);
}

.result-card > * {
  position: relative;
  z-index: 1;
}

.result-card span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: oklch(8% 0.014 248 / 0.42);
  color: var(--body);
  font-size: 12px;
}

.result-card strong {
  display: block;
  margin-top: 48px;
  color: var(--ink);
  font-size: 28px;
  line-height: 1.1;
}

.result-card p {
  max-width: 20ch;
  margin: 10px 0 0;
  color: var(--body);
  font-size: 14px;
  line-height: 1.52;
}

.card-a {
  --tile-soft: var(--blue-soft);
}

.card-b {
  --tile-soft: var(--violet-soft);
}

.card-c {
  --tile-soft: var(--amber-soft);
}

.composer {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  min-height: 142px;
  padding: 16px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
}

.composer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, oklch(78% 0.14 205 / 0.08), transparent);
  pointer-events: none;
}

.composer > * {
  position: relative;
  z-index: 1;
}

.attach-button {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: oklch(22% 0.02 244 / 0.72);
  color: var(--body);
  transition: color 170ms var(--ease), border-color 170ms var(--ease), transform 170ms var(--ease);
}

.attach-button:hover {
  color: var(--cyan);
  border-color: oklch(78% 0.14 205 / 0.38);
  transform: translateY(-1px);
}

textarea {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  min-height: 64px;
  resize: none;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.55;
}

textarea::placeholder {
  color: oklch(70% 0.014 232);
}

.composer-controls {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mode-chip,
.select-chip {
  min-height: 40px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: oklch(18% 0.018 244 / 0.72);
  color: var(--body);
  padding: 0 13px;
  font-weight: 720;
  transition: color 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease), transform 160ms var(--ease);
}

.mode-chip.is-active {
  color: var(--cyan);
  border-color: oklch(78% 0.14 205 / 0.32);
  background: oklch(23% 0.022 244 / 0.8);
}

.mode-chip:hover,
.select-chip:hover {
  color: var(--ink);
  border-color: var(--hairline-strong);
  background: oklch(24% 0.022 244 / 0.78);
  transform: translateY(-1px);
}

.cost-copy {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  font-weight: 680;
  white-space: nowrap;
}

.send-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--ink);
  color: oklch(10% 0.014 248);
  transition: background 160ms var(--ease), transform 160ms var(--ease);
}

.send-button:hover {
  background: oklch(90% 0.04 205);
  transform: translateY(-1px);
}

.module-button,
.model-button,
.dock-tile {
  --tile-accent: var(--cyan);
  --tile-soft: var(--blue-soft);
}

.accent-image {
  --tile-accent: var(--violet);
  --tile-soft: var(--violet-soft);
}

.accent-video {
  --tile-accent: var(--rose);
  --tile-soft: oklch(73% 0.16 24 / 0.15);
}

@keyframes meshDrift {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  to {
    background-position: 72px 72px, 72px 72px, 210px 210px, -260px 260px;
  }
}

@keyframes routingFieldBreathe {
  0%,
  100% {
    opacity: 0.58;
    transform: scale(0.99) rotate(-0.2deg);
  }
  46% {
    opacity: 0.88;
    transform: scale(1.014) rotate(0.25deg);
  }
}

@keyframes modelFieldShift {
  0%,
  100% {
    opacity: 0.62;
    transform: translate3d(-1.5%, 0, 0) scale(1);
  }
  50% {
    opacity: 0.9;
    transform: translate3d(1.5%, -1%, 0) scale(1.025);
  }
}

@keyframes nodePulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.985);
  }
  48% {
    opacity: 0.82;
    transform: scale(1.015);
  }
}

@keyframes paneFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(10px, -12px, 0);
  }
}

@keyframes laneTravel {
  0% {
    opacity: 0;
    translate: -18vw 0;
  }
  18%,
  78% {
    opacity: 0.34;
  }
  100% {
    opacity: 0;
    translate: 28vw 0;
  }
}

@keyframes orbitSweep {
  to {
    transform: rotate(360deg);
  }
}

@keyframes coreGrid {
  to {
    background-position: 28px 28px, 28px 28px;
  }
}

@keyframes logoTurn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes logoFloat {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -10px;
  }
}

@keyframes logoBreath {
  0%,
  100% {
    filter:
      saturate(1.14)
      contrast(1.08)
      drop-shadow(0 22px 46px oklch(4% 0.02 250 / 0.5))
      drop-shadow(0 0 14px oklch(78% 0.14 205 / 0.16))
      drop-shadow(0 0 26px oklch(76% 0.15 292 / 0.1));
    opacity: 0.96;
  }
  50% {
    filter:
      saturate(1.22)
      contrast(1.12)
      drop-shadow(0 26px 54px oklch(4% 0.02 250 / 0.56))
      drop-shadow(0 0 20px oklch(78% 0.14 205 / 0.2))
      drop-shadow(0 0 34px oklch(76% 0.15 292 / 0.12));
    opacity: 1;
  }
}

@keyframes logoSheen {
  0%,
  100% {
    opacity: 0.42;
    transform: rotate(-18deg) translateX(-6%);
  }
  48%,
  56% {
    opacity: 0.82;
    transform: rotate(-18deg) translateX(8%);
  }
}

@keyframes logoAura {
  0%,
  100% {
    opacity: 0.58;
    scale: 0.96;
  }
  50% {
    opacity: 0.9;
    scale: 1.04;
  }
}

@keyframes logoOrbit {
  from {
    transform: translate(-50%, -50%) rotate(var(--orbit-tilt, 0deg));
  }
  to {
    transform: translate(-50%, -50%) rotate(calc(var(--orbit-tilt, 0deg) + 360deg));
  }
}

@keyframes titleGradientFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 520% 50%;
  }
}

@keyframes titleSheenSweep {
  0% {
    background-position: -140% 50%;
  }
  100% {
    background-position: 160% 50%;
  }
}

@keyframes entryBorderFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 240% 50%;
  }
}

@keyframes entrySheen {
  0%,
  64% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

@keyframes fragmentFloat {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -8px;
  }
}

@keyframes fragmentFloatDrift {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      translate3d(0, 0, 0)
      rotate(var(--tile-tilt))
      scale(var(--tile-scale));
  }
  35% {
    transform:
      translate(-50%, -50%)
      translate3d(2px, -6px, 0)
      rotate(calc(var(--tile-tilt) + 0.45deg))
      scale(var(--tile-scale));
  }
  68% {
    transform:
      translate(-50%, -50%)
      translate3d(-1px, 3px, 0)
      rotate(calc(var(--tile-tilt) - 0.3deg))
      scale(var(--tile-scale));
  }
}

@keyframes panelSweep {
  0%,
  62% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

@keyframes promptSweep {
  0%,
  68% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

@keyframes statusPulse {
  0%,
  100% {
    box-shadow: 0 0 0 5px oklch(78% 0.12 205 / 0.1);
  }
  50% {
    box-shadow: 0 0 0 8px oklch(78% 0.12 205 / 0.16);
  }
}

@keyframes capsuleScan {
  0%,
  64% {
    transform: translateX(-80%);
  }
  100% {
    transform: translateX(80%);
  }
}

@keyframes routePulseA {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  15%,
  78% {
    opacity: 1;
  }
  100% {
    transform: translate(150px, 70px);
    opacity: 0;
  }
}

@keyframes routePulseB {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  15%,
  78% {
    opacity: 1;
  }
  100% {
    transform: translate(130px, 76px);
    opacity: 0;
  }
}

@media (max-width: 1280px) {
  .launcher-layout {
    grid-template-columns: minmax(360px, 0.9fr) minmax(440px, 1.1fr);
  }

  .launcher-layout-centered {
    grid-template-columns: minmax(0, 1fr);
  }

  .brand-name {
    font-size: 48px;
  }

  .workspace-grid {
    grid-template-columns: 82px 236px minmax(0, 1fr);
  }

  .stage-content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }

  .routing-board {
    grid-column: 1;
    grid-row: auto;
    grid-template-rows: auto minmax(180px, auto) auto;
  }

  .route-graph {
    min-height: 220px;
  }
}

@media (max-width: 920px) {
  .portal-screen {
    padding: 12px;
  }

  .ambient::before {
    opacity: 0.62;
  }

  .routing-field {
    opacity: 0.58;
  }

  .scan-lane {
    width: 30rem;
    opacity: 0.25;
  }

  .os-launcher {
    width: calc(100vw - 24px);
    min-height: calc(100dvh - 24px);
  }

  .launcher-layout {
    grid-template-columns: 1fr;
  }

  .brand-logo-entry {
    width: min(480px, 88vw);
    min-height: 440px;
  }

  .brand-symbol-wrap {
    width: min(352px, 76vw);
    height: min(246px, 44vw);
    transform: scale(0.825);
  }

  .brand-symbol-image {
    width: min(230px, 46vw);
  }

  .brand-wordmark {
    font-size: 36px;
  }

  .brand-tagline {
    font-size: 19px;
    letter-spacing: 0.13em;
  }

  .brand-promise {
    max-width: min(430px, 84vw);
    font-size: 15px;
  }

  .nexus-status {
    gap: 6px;
    margin-top: 14px;
  }

  .nexus-status span {
    min-height: 26px;
    padding-inline: 9px;
    padding-left: 22px;
    font-size: 11px;
  }

  .brand-name {
    font-size: 40px;
  }

  .dock-tile {
    --tile-width: clamp(168px, 28vw, 218px);
    min-height: 92px;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 13px;
  }

  .dock-icon {
    width: 38px;
    height: 38px;
  }

  .dock-copy strong {
    font-size: 20px;
  }

  .dock-copy span {
    font-size: 14px;
  }

  .dock-tile:nth-child(1) {
    left: 6%;
    top: 74%;
  }

  .dock-tile:nth-child(2) {
    left: 7%;
    top: 29%;
  }

  .dock-tile:nth-child(3) {
    left: 34%;
    top: 6%;
  }

  .dock-tile:nth-child(4) {
    left: 93%;
    top: 22%;
  }

  .dock-tile:nth-child(5) {
    left: 94%;
    top: 68%;
  }

  .dock-tile:nth-child(6) {
    left: 80%;
    top: 94%;
  }

  .dock-tile:nth-child(7) {
    left: 21%;
    top: 95%;
  }

  .workspace-screen {
    padding: 10px;
  }

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

  .primary-rail,
  .model-drawer,
  .creator-stage {
    min-height: auto;
  }

  .primary-rail {
    flex-direction: row;
    justify-content: flex-start;
    padding: 10px;
    overflow-x: auto;
  }

  .home-trigger,
  .module-button {
    flex: 0 0 auto;
  }

  .primary-menu,
  .model-menu {
    flex-direction: row;
    overflow-x: auto;
  }

  .rail-telemetry {
    display: none;
  }

  .module-button.is-active::after {
    right: auto;
    bottom: -7px;
    width: 24px;
    height: 3px;
  }

  .model-menu {
    display: flex;
    scrollbar-width: none;
  }

  .model-menu::-webkit-scrollbar,
  .primary-menu::-webkit-scrollbar {
    display: none;
  }

  .model-button {
    flex: 0 0 226px;
  }

  .command-capsule {
    align-items: stretch;
    flex-direction: column;
  }

  .task-surface {
    min-height: 330px;
  }

  .surface-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .run-meta {
    justify-content: flex-start;
    width: 100%;
  }

  .result-gallery {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .mesh-plane {
    opacity: 0.72;
  }

  .routing-field {
    opacity: 0.46;
  }

  .scan-lane {
    opacity: 0.18;
  }

  .os-launcher {
    padding: 12px;
    gap: 12px;
  }

  .core-stack {
    padding: 6px;
  }

  .brand-logo-entry {
    width: min(350px, 88vw);
    min-height: 328px;
  }

  .brand-symbol-wrap {
    width: min(292px, 84vw);
    height: 188px;
    transform: scale(0.66);
  }

  .brand-symbol-image {
    width: min(194px, 50vw);
  }

  .logo-orbit {
    display: none;
  }

  .brand-name {
    font-size: 32px;
  }

  .brand-subtitle {
    font-size: 14px;
  }

  .brand-wordmark {
    font-size: 28px;
  }

  .brand-tagline {
    max-width: 82vw;
    font-size: 16px;
    letter-spacing: 0.08em;
    white-space: normal;
  }

  .brand-promise {
    max-width: 300px;
    font-size: 13px;
    line-height: 1.35;
  }

  .nexus-status {
    max-width: 310px;
    margin-top: 10px;
  }

  .nexus-status span {
    min-height: 24px;
    padding-left: 20px;
    font-size: 10px;
  }

  .nexus-status span::before {
    left: 8px;
    width: 5px;
    height: 5px;
  }

  .entry-action {
    margin-top: 18px;
    min-height: 52px;
    padding-right: 18px;
  }

  .entry-action-icon {
    width: 31px;
    height: 31px;
  }

  .entry-action-copy strong {
    font-size: 14px;
  }

  .entry-action-copy small {
    font-size: 9px;
  }

  .dock-tile {
    --tile-width: min(154px, 42vw);
    min-height: 78px;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px;
  }

  .dock-icon {
    width: 32px;
    height: 32px;
  }

  .dock-copy span {
    display: none;
  }

  .dock-tile:nth-child(1) {
    left: 7%;
    top: 70%;
  }

  .dock-tile:nth-child(2) {
    left: 8%;
    top: 27%;
  }

  .dock-tile:nth-child(3) {
    left: 38%;
    top: 6%;
  }

  .dock-tile:nth-child(4) {
    left: 92%;
    top: 23%;
  }

  .dock-tile:nth-child(5) {
    left: 92%;
    top: 68%;
  }

  .dock-tile:nth-child(6) {
    left: 78%;
    top: 94%;
  }

  .dock-tile:nth-child(7) {
    left: 20%;
    top: 95%;
  }

  .command-capsule {
    border-radius: var(--radius-lg);
  }

  .capsule-route {
    flex-wrap: wrap;
  }

  .prompt-card {
    padding: 18px;
  }

  .prompt-card p {
    font-size: 19px;
    line-height: 1.55;
  }

  .route-graph {
    min-height: 190px;
  }

  .node-source {
    left: 12px;
    top: 26px;
  }

  .node-output {
    right: 12px;
    bottom: 26px;
  }

  .link-a {
    width: 122px;
  }

  .link-b {
    width: 124px;
  }

  .composer {
    grid-template-columns: 52px minmax(0, 1fr);
    padding: 12px;
  }

  .attach-button {
    width: 48px;
    height: 48px;
  }

  textarea {
    font-size: 16px;
  }

  .composer-controls {
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .mode-chip,
  .select-chip,
  .cost-copy {
    flex: 0 0 auto;
  }
}

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

  .mesh-plane,
  .routing-field,
  .scan-lane,
  .chromatic-pane,
  .route-pulse {
    display: none;
  }

  .brand-wordmark,
  .brand-tagline,
  .brand-wordmark::after,
  .brand-tagline::after,
  .entry-action::before,
  .entry-action::after {
    animation: none !important;
    background-position: 50% 50%;
  }
}