:root {
  --ink: #111218;
  --muted: #6d6e78;
  --line: rgba(22, 19, 36, 0.1);
  --paper: #f6f6f2;
  --violet: #6550f2;
  --violet-dark: #4a35d1;
  --success: #2aa77b;
  --danger: #d96868;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.page-shell { overflow: hidden; }

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 88px;
  padding: 0 clamp(28px, 4.7vw, 84px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  width: max-content;
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.055em;
  text-decoration: none;
}

.brand-o { width: 26px; height: 29px; margin-right: -1px; overflow: visible; transform: translateY(.2px); }
.brand-o path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.9; }
.brand-o-body { stroke: currentColor; }
.brand-o-cut { stroke: #6d54e8; transition: stroke .25s ease,opacity .25s ease; }
.brand:hover .brand-o-cut,.footer-brand:hover .brand-o-cut { stroke: #5136dc; opacity: .82; }

.desktop-nav { display: flex; align-items: center; gap: clamp(22px, 2.2vw, 42px); }
.desktop-nav > a,.nav-capabilities summary {
  position: relative;
  color: #4e4e57;
  font-size: 14px;
  letter-spacing: .02em;
  text-decoration: none;
  transition: color .25s ease;
}
.desktop-nav > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .28s ease;
}
.desktop-nav > a:hover,.nav-capabilities summary:hover { color: var(--ink); }
.desktop-nav > a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-capabilities { position: relative; }
.nav-capabilities summary { display: flex; align-items: center; gap: 6px; padding: 12px 0; list-style: none; cursor: pointer; }
.nav-capabilities summary::-webkit-details-marker { display: none; }
.nav-capabilities summary svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.25; transition: transform .2s; }
.nav-capabilities[open] summary svg { transform: rotate(180deg); }
.nav-capability-links { position: absolute; top: 100%; left: -18px; width: 174px; padding: 8px; border: 1px solid #dedde5; border-radius: 11px; background: #fafaf8; box-shadow: 0 16px 45px -16px #1c153b38; animation: nav-appear .18s ease-out; }
.nav-capability-links a { display: block; padding: 11px 12px; border-radius: 6px; color: #595462; font-size: 14px; text-decoration: none; transition: background .2s,color .2s; }
.nav-capability-links a:hover { background: #6550f20a; color: var(--violet-dark); }
.nav-mobile-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 8px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.nav-mobile-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.site-header a:focus-visible,.site-header button:focus-visible,.site-header summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 5px; }
@keyframes nav-appear { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.header-cta {
  justify-self: end;
  border: 1px solid rgba(17,18,24,.7);
  border-radius: 999px;
  padding: 10px 18px;
  color: var(--ink);
  background: transparent;
  font-size: 13px;
  cursor: pointer;
  transition: color .25s ease, background .25s ease, transform .25s ease;
}
.header-cta:hover { color: white; background: var(--ink); transform: translateY(-1px); }

.hero {
  position: relative;
  min-height: max(760px, 100svh);
  padding: 120px clamp(28px, 6.3vw, 114px) 70px;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(24px, 3vw, 52px);
  isolation: isolate;
}

.grid-lines { opacity: .42;
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image:
    linear-gradient(rgba(29,25,51,.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,25,51,.034) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(to right, transparent 0, black 35%, black 100%);
}

.ambient { position: absolute; z-index: -2; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.ambient-one {
  width: 54vw; height: 54vw; right: -15vw; top: -19vw;
  background: radial-gradient(circle, rgba(121,97,255,.12), rgba(121,97,255,0) 68%);
}
.ambient-two {
  width: 38vw; height: 38vw; left: 30vw; bottom: -31vw;
  background: radial-gradient(circle, rgba(77,203,161,.08), rgba(77,203,161,0) 70%);
}

.hero-copy { position: relative; z-index: 2; transform: translateY(-2vh); }
.eyebrow {
  margin: 0 0 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #5c5c66;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .18em;
}
.eyebrow span { width: 28px; height: 1px; background: var(--violet); }

h1 {
  margin: 0;
  font-size: clamp(58px, 5.2vw, 94px);
  line-height: 1.1;
  letter-spacing: -.055em;
  font-weight: 690;
  white-space: nowrap;
}
h1 span {
  color: var(--violet);
  background: linear-gradient(115deg, #191820 4%, #6650ee 38%, #7c66ff 72%, #4733c7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lede {
  max-width: 620px;
  margin: 32px 0 0;
  color: #565760;
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.85;
  letter-spacing: .015em;
}
.english-line { margin: 17px 0 0; color: #96949e; font: 500 11px/1.4 Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }

.hero-actions { display: flex; align-items: center; gap: 13px; margin-top: 38px; }
.button {
  min-height: 48px;
  padding: 0 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 590;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.button-primary {
  color: white;
  background: var(--ink);
  box-shadow: 0 10px 30px rgba(17,18,24,.14);
}
.button-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(17,18,24,.2); }
.button-secondary { color: var(--ink); border-color: rgba(17,18,24,.16); background: rgba(255,255,255,.3); }
.button-secondary:hover { transform: translateY(-2px); border-color: rgba(17,18,24,.36); background: white; }

.runtime-visual {
  position: relative;
  width: min(100%, 680px);
  aspect-ratio: 1.05;
  justify-self: center;
  transition: transform .18s ease-out;
}
.runtime-label {
  position: absolute;
  top: 4%; left: 8%; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  color: #74737d; font-size: 12px; letter-spacing: .16em;
}
.live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px rgba(42,167,123,.09); animation: live 2s ease-in-out infinite; }

.runtime-stage { position: absolute; inset: 0 0 72px; transition: filter .4s ease; }
.runtime-map { width: 100%; height: 100%; overflow: visible; }
.orbit, .tilted-orbit { fill: none; stroke: rgba(52,44,90,.1); stroke-width: 1; }
.orbit-a { stroke-dasharray: 2 10; animation: rotate-orbit 36s linear infinite; transform-origin: center; }
.orbit-b { stroke-dasharray: 1 7; animation: rotate-orbit 26s linear infinite reverse; transform-origin: center; }
.orbit-c { stroke: rgba(101,80,242,.13); }
.tilted-orbit { transform-origin: center; stroke-dasharray: 5 12; }
.tilted-a { transform: rotate(-24deg); animation: tilt-a 18s ease-in-out infinite alternate; }
.tilted-b { transform: rotate(28deg); animation: tilt-b 20s ease-in-out infinite alternate; }
.route { fill: none; stroke-linecap: round; }
.route-muted { stroke: rgba(101,80,242,.08); stroke-width: 14; filter: blur(7px); }
.route-active { stroke: url(#pathGradient); stroke-width: 1.8; stroke-dasharray: 14 8; animation: path-flow 1.2s linear infinite; }
.route-alternate { stroke: rgba(217,104,104,.5); stroke-width: 1.4; stroke-dasharray: 3 8; opacity: 0; transition: opacity .45s ease; }
.node { fill: var(--paper); stroke: #8d7cff; stroke-width: 2; }
.core { filter: drop-shadow(0 20px 32px rgba(79,55,194,.18)); }
.core-ring { fill: none; stroke: rgba(101,80,242,.2); stroke-width: 1; stroke-dasharray: 2 6; transform-origin: center; animation: rotate-orbit 13s linear infinite; }
.core-copy {
  position: absolute; top: 50%; left: 50%; width: 140px;
  transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.core-copy svg { width: 26px; color: var(--violet); margin-bottom: 7px; }
.core-copy strong { font-size: 21px; letter-spacing: -.035em; }
.core-copy span { min-height: 16px; margin-top: 6px; color: #74717e; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }

.goal-chip, .outcome-chip {
  position: absolute;
  padding: 12px 15px;
  border: 1px solid rgba(49,43,78,.09);
  border-radius: 13px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 14px 35px rgba(65,55,113,.08);
  backdrop-filter: blur(14px);
}
.goal-chip { left: 0; top: 39%; }
.goal-chip span, .outcome-chip span { display: block; margin-bottom: 4px; color: #9997a2; font-size: 10px; letter-spacing: .15em; }
.goal-chip strong, .outcome-chip strong { display: block; font-size: 13px; font-weight: 620; }
.outcome-chip {
  right: 0; top: 62%; display: flex; align-items: center; gap: 10px;
  opacity: .42; transform: translateY(5px); transition: opacity .45s ease, transform .45s ease, border-color .45s ease;
}
.outcome-chip svg { width: 24px; height: 24px; padding: 3px; border-radius: 50%; fill: none; stroke: var(--success); stroke-width: 1.7; background: rgba(42,167,123,.09); }

.runtime-visual.is-failed .route-alternate { opacity: 1; }
.runtime-visual.is-failed .route-active { stroke: var(--danger); }
.runtime-visual.is-failed .moving-probe { opacity: .55; }
.runtime-visual.is-success .outcome-chip { opacity: 1; transform: translateY(0); border-color: rgba(42,167,123,.25); }
.runtime-visual.is-success .core { filter: drop-shadow(0 20px 34px rgba(42,167,123,.22)); }

.runtime-steps {
  position: absolute; left: 4%; right: 4%; bottom: 0;
  margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr);
  list-style: none;
  border-top: 1px solid var(--line);
}
.runtime-steps::after {
  content: ""; position: absolute; top: -1px; left: 0; width: var(--progress, 0%); height: 1px;
  background: var(--violet); box-shadow: 0 0 9px rgba(101,80,242,.45); transition: width .65s cubic-bezier(.4,0,.2,1);
}
.runtime-steps li { position: relative; padding: 15px 6px 0; color: #a3a1aa; transition: color .35s ease; }
.runtime-steps li i { position: absolute; top: -4px; left: 6px; width: 7px; height: 7px; border: 2px solid var(--paper); border-radius: 50%; background: #c4c2ca; transition: background .35s ease, box-shadow .35s ease; z-index: 2; }
.runtime-steps li span, .runtime-steps li small { display: block; }
.runtime-steps li span { font-size: 12px; font-weight: 600; }
.runtime-steps li small { margin-top: 3px; font-size: 10px; letter-spacing: .05em; }
.runtime-steps li.done, .runtime-steps li.active { color: #37343f; }
.runtime-steps li.done i { background: var(--violet); }
.runtime-steps li.active i { background: var(--violet); box-shadow: 0 0 0 5px rgba(101,80,242,.11); }
.runtime-steps li.failed i { background: var(--danger); box-shadow: 0 0 0 5px rgba(217,104,104,.1); }
.runtime-steps li:last-child.active i { background: var(--success); box-shadow: 0 0 0 5px rgba(42,167,123,.11); }

.scroll-cue { position: absolute; left: clamp(28px, 6.3vw, 114px); bottom: 32px; display: flex; align-items: center; gap: 13px; color: #93919a; font-size: 10px; letter-spacing: .17em; }
.scroll-cue i { position: relative; width: 58px; height: 1px; overflow: hidden; background: rgba(17,18,24,.12); }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateX(-100%); animation: scroll-line 2.6s ease-in-out infinite; }
.hero-index { position: absolute; right: clamp(28px, 4.7vw, 84px); bottom: 30px; color: #aaa8b0; font-size: 10px; letter-spacing: .12em; }
.hero-index span { padding: 0 6px; color: var(--violet); }

.problem-section {
  position: relative;
  min-height: max(820px, 100svh);
  padding: clamp(92px, 10vh, 128px) clamp(28px, 6.3vw, 114px) 64px;
  color: #f3f2f7;
  background:
    radial-gradient(circle at 73% 40%, rgba(101,80,242,.13), transparent 27%),
    radial-gradient(circle at 12% 88%, rgba(48,169,126,.06), transparent 28%),
    #101014;
  overflow: hidden;
}

.problem-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: linear-gradient(to bottom, black, transparent 86%);
}

.problem-noise {
  position: absolute;
  inset: 0;
  opacity: .17;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
}

.problem-head { position: relative; z-index: 2; width: min(1200px,100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.8fr) minmax(230px,.8fr); align-items: end; gap: 22px 64px; }
.section-kicker { grid-column: 1 / -1; margin: 0; color: #93909e; font-size: 10px; font-weight: 600; letter-spacing: .16em; }
.section-kicker span { margin-right: 12px; color: #8c79ff; }
.problem-head h2 { margin: 0; font-size: clamp(36px,3.65vw,54px); line-height: 1.18; letter-spacing: -.045em; font-weight: 620; }
.problem-head h2 span { color: #8875ff; }
.problem-head > p:last-child { margin: 0 0 3px; color: #aaa5b3; font-size: 14px; line-height: 1.8; }

.gap-demo {
  position: relative;
  z-index: 2;
  width: min(1200px, 100%);
  margin: clamp(52px, 7vh, 82px) auto 0;
  display: grid;
  grid-template-columns: 1fr 112px 1fr;
  align-items: center;
}
.execution-card, .outcome-card {
  position: relative;
  height: 330px;
  padding: 54px 30px 26px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  box-shadow: 0 28px 70px rgba(0,0,0,.18);
  backdrop-filter: blur(16px);
}
.execution-card {
  display: flex;
  flex-direction: column;
  transform: translateX(30px);
  opacity: 0;
  transition: opacity .8s ease .1s, transform .9s cubic-bezier(.2,.8,.2,1) .1s;
}
.outcome-card { transform: translateX(-30px); opacity: 0; transition: opacity .8s ease .4s, transform .9s cubic-bezier(.2,.8,.2,1) .4s, border-color .45s ease; }
.problem-section.in-view .execution-card, .problem-section.in-view .outcome-card { opacity: 1; transform: translateX(0); }
.execution-card > header, .outcome-card > header {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 36px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.075);
  color: #777680;
  font-size: 10px;
  letter-spacing: .16em;
}
.execution-card header > div { display: flex; gap: 5px; }
.execution-card header i { width: 5px; height: 5px; border-radius: 50%; background: #4b4a52; }
.execution-card header small { color: #5c5b63; font-size: 10px; }
.card-label { color: #777680; font-size: 10px; letter-spacing: .16em; }
.execution-card h3, .outcome-card h3 { margin: 9px 0 23px; font-size: 21px; letter-spacing: -.03em; font-weight: 560; }
.task-log {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 1px;
  list-style: none;
}
.task-log li {
  min-height: 0;
  padding: 0 11px;
  display: grid;
  grid-template-columns: 17px 1fr auto;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.055);
  color: #c7c6ce;
  font-size: 13px;
}
.task-log li b {
  width: 8px; height: 8px;
  border: 1px solid #43ae87;
  border-radius: 50%;
  opacity: 0;
  transform: scale(.4);
}
.task-log li b::after { content: ""; display: block; width: 3px; height: 1.5px; margin: 1.5px; border-left: 1px solid #43ae87; border-bottom: 1px solid #43ae87; transform: rotate(-45deg); }
.task-log li small { color: #66656d; font-size: 10px; letter-spacing: .08em; opacity: 0; }
.problem-section.in-view .task-log li b, .problem-section.in-view .task-log li small { animation: reveal-log .4s ease forwards; }
.problem-section.in-view .task-log li:nth-child(2) b, .problem-section.in-view .task-log li:nth-child(2) small { animation-delay: .45s; }
.problem-section.in-view .task-log li:nth-child(3) b, .problem-section.in-view .task-log li:nth-child(3) small { animation-delay: .8s; }
.problem-section.in-view .task-log li:nth-child(4) b, .problem-section.in-view .task-log li:nth-child(4) small { animation-delay: 1.15s; }
.task-complete {
  position: static;
  flex: 0 0 34px;
  width: 100%;
  margin-top: 9px;
  height: 34px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: #78c6a8;
  border: 1px solid rgba(67,174,135,.13);
  border-radius: 8px;
  background: rgba(48,169,126,.055);
  font-size: 10px; letter-spacing: .12em;
  opacity: 0;
}
.problem-section.in-view .task-complete { animation: reveal-complete .55s ease 1.6s forwards; }

.gap-sign { position: relative; z-index: 4; display: grid; justify-items: center; gap: 10px; }
.equal-line { position: absolute; top: 26px; left: -18px; right: -18px; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.1), #6650f2, rgba(255,255,255,.1)); transform: scaleX(0); }
.problem-section.in-view .equal-line { animation: draw-line .8s ease 2s forwards; }
.gap-sign strong {
  position: relative;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  color: #eeeaff;
  border: 1px solid rgba(134,113,255,.35);
  border-radius: 50%;
  background: #1b1828;
  box-shadow: 0 0 32px rgba(101,80,242,.18);
  font-size: 25px;
  opacity: 0;
  transform: scale(.7);
}
.problem-section.in-view .gap-sign strong { animation: gap-pop .5s cubic-bezier(.2,.9,.2,1.2) 2.45s forwards; }
.gap-sign span { max-width: 88px; color: #6d6b76; font-size: 9px; line-height: 1.5; letter-spacing: .12em; text-align: center; }

.outcome-state { display: flex; align-items: center; gap: 7px; }
.outcome-state i { width: 6px; height: 6px; border-radius: 50%; background: #d86868; box-shadow: 0 0 0 4px rgba(216,104,104,.08); transition: background .4s ease; }
.outcome-state b { color: #c97878; font-size: 10px; font-weight: 600; transition: color .4s ease; }
.criteria { padding: 13px 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.025); }
.criteria span, .outcome-metric span { display: block; margin-bottom: 5px; color: #72717a; font-size: 10px; letter-spacing: .12em; }
.criteria strong { color: #c3c1ca; font-size: 12px; font-weight: 520; }
.outcome-metric { margin-top: 18px; }
.outcome-metric > div:first-child { display: flex; align-items: end; justify-content: space-between; }
.outcome-metric strong { color: #da7777; font-size: 18px; font-weight: 560; transition: color .5s ease; }
.metric-track { height: 2px; margin-top: 7px; overflow: hidden; background: rgba(255,255,255,.08); }
.metric-track i { display: block; width: 42%; height: 100%; background: #d96868; transition: width .9s cubic-bezier(.2,.8,.2,1), background .5s ease; }
.result-message { margin-top: 17px; display: flex; align-items: center; gap: 11px; }
.result-message svg { width: 25px; height: 25px; flex: 0 0 auto; padding: 4px; fill: none; stroke: #d96868; stroke-width: 1.5; border-radius: 50%; background: rgba(217,104,104,.09); transition: stroke .4s ease, background .4s ease; }
.result-message span, .result-message small { display: block; }
.result-message span { color: #d58a8a; font-size: 12px; font-weight: 560; transition: color .4s ease; }
.result-message small { margin-top: 3px; color: #6e6d75; font-size: 10px; }

.oryra-continuation {
  position: absolute;
  left: 22%; right: 22%; bottom: -74px;
  opacity: 0;
  transform: translateY(13px);
  transition: opacity .6s ease, transform .6s ease;
}
.problem-section.is-continuing .oryra-continuation { opacity: 1; transform: translateY(0); }
.continuation-brand { display: flex; align-items: center; justify-content: center; gap: 7px; color: #8875ff; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.continuation-brand svg { width: 18px; }
.continuation-track { position: relative; height: 1px; margin: 12px 0; overflow: hidden; background: rgba(255,255,255,.07); }
.continuation-track i { display: block; width: 35%; height: 100%; background: linear-gradient(90deg, transparent, #7965ff, transparent); animation: continue-flow 2s linear infinite; }
.oryra-continuation ol { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); list-style: none; }
.oryra-continuation li { display: flex; align-items: center; justify-content: center; gap: 7px; color: #76747e; font-size: 10px; }
.oryra-continuation li b { width: 5px; height: 5px; border-radius: 50%; background: #7e69ff; }

.problem-section.is-success .outcome-card { border-color: rgba(49,173,128,.28); }
.problem-section.is-success .outcome-state i { background: var(--success); }
.problem-section.is-success .outcome-state b, .problem-section.is-success .outcome-metric strong, .problem-section.is-success .result-message span { color: #6dc3a3; }
.problem-section.is-success .metric-track i { width: 100%; background: var(--success); }
.problem-section.is-success .result-message svg { stroke: var(--success); background: rgba(42,167,123,.09); }

.problem-statement {
  position: relative;
  z-index: 3;
  margin: 110px 0 0;
  text-align: center;
  font-size: clamp(20px, 1.8vw, 29px);
  letter-spacing: -.035em;
}
.problem-statement span { color: #797780; }
.problem-statement strong { color: #f0eff4; font-weight: 530; }
.section-index { position: absolute; right: clamp(28px, 4.7vw, 84px); bottom: 29px; color: #55545d; font-size: 10px; letter-spacing: .12em; }
.section-index span { padding: 0 6px; color: #8875ff; }

.cognition-section {
  position: relative;
  min-height: max(900px, 100svh);
  padding: clamp(82px, 9vh, 110px) clamp(28px, 6.3vw, 114px) 48px;
  color: var(--ink);
  background:
    radial-gradient(circle at 52% 53%, rgba(105,82,242,.11), transparent 29%),
    linear-gradient(180deg, #f6f5f1, #fafaf7);
  overflow: hidden;
}
.cognition-grid { opacity: .34;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(29,25,51,.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,25,51,.034) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: linear-gradient(to bottom, black, black 84%, transparent);
}
.cognition-head { position: relative; z-index: 2; width: min(1200px,100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.8fr) minmax(230px,.8fr); align-items: end; gap: 22px 64px; }
.cognition-kicker { grid-column: 1 / -1; margin: 0; color: #837e8c; font-size: 10px; font-weight: 600; letter-spacing: .16em; }
.cognition-kicker span { margin-right: 12px; color: var(--violet); }
.cognition-head h2 { margin: 0; font-size: clamp(36px,3.65vw,54px); line-height: 1.18; letter-spacing: -.045em; font-weight: 620; }
.cognition-head h2 span { color: var(--violet); }
.cognition-head > p:last-child { margin: 0 0 3px; color: #77717e; font-size: 14px; line-height: 1.8; }

.cognition-runtime {
  position: relative;
  z-index: 2;
  width: min(1200px, 100%);
  height: 520px;
  margin: clamp(34px, 4.5vh, 50px) auto 0;
  border: 1px solid rgba(35,28,69,.11);
  border-radius: 19px;
  background: rgba(255,255,255,.61);
  box-shadow: 0 30px 80px rgba(47,38,98,.075);
  backdrop-filter: blur(18px);
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
.cognition-section.in-view .cognition-runtime { opacity: 1; transform: translateY(0); }
.cognition-runtime-head { height: 43px; padding: 0 18px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgba(35,28,69,.075); }
.runtime-window-dots { display: flex; gap: 5px; }
.runtime-window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #d3d0d7; }
.runtime-goal { display: flex; align-items: center; gap: 10px; }
.runtime-goal span { color: #99969f; font-size: 10px; letter-spacing: .14em; }
.runtime-goal strong { font-size: 12px; font-weight: 610; }
.cognition-live { justify-self: end; display: flex; align-items: center; gap: 7px; color: #77747d; font-size: 10px; letter-spacing: .13em; }
.cognition-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px rgba(42,167,123,.08); animation: live 2s ease-in-out infinite; }

.work-runtime-stage { height: 420px; display: grid; grid-template-columns: 238px minmax(0,1fr); }
.work-guidance { position: relative; padding: 26px 24px 20px; display: flex; flex-direction: column; align-items: center; border-right: 1px solid rgba(35,28,69,.07); background: linear-gradient(145deg,rgba(101,80,242,.025),rgba(255,255,255,.14)); }
.work-guidance-label { width: 100%; display: flex; align-items: center; justify-content: space-between; color: #88848f; font-size: 9px; letter-spacing: .13em; }
.work-guidance-label small { color: #aaa7af; font-size: 9px; letter-spacing: 0; }
.work-cognition-orbit { position: relative; width: 148px; height: 148px; margin-top: 30px; display: grid; place-items: center; border: 1px solid rgba(101,80,242,.17); border-radius: 50%; }
.work-cognition-orbit::before { content: ""; position: absolute; inset: 16px; border: 1px dashed rgba(101,80,242,.14); border-radius: 50%; animation: rotate-orbit 16s linear infinite; }
.work-cognition-orbit > i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #806af0; box-shadow: 0 0 12px rgba(101,80,242,.45); opacity: .35; transition: opacity .45s ease, box-shadow .45s ease; }
.work-cognition-orbit > i:first-child { top: 18px; right: 28px; }
.work-cognition-orbit > i:nth-child(2) { left: 9px; bottom: 42px; background: #3eaa82; }
.work-cognition-orbit > div { position: relative; z-index: 2; width: 90px; height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(101,80,242,.14); border-radius: 50%; background: radial-gradient(circle at 35% 30%,#fff,#f0ecff 65%,#ddd5ff); box-shadow: 0 15px 36px rgba(65,45,156,.13); }
.work-cognition-orbit small { color: #7d68e5; font-size: 8px; letter-spacing: .19em; }
.work-cognition-orbit strong { margin-top: 4px; color: #3d3945; font-size: 15px; font-weight: 630; letter-spacing: -.04em; }
.work-cognition-orbit span { margin-top: 4px; color: #8e8996; font-size: 5px; letter-spacing: .09em; }
.work-guidance > p { margin: 22px 0 0; color: #918d98; text-align: center; font-size: 11px; line-height: 1.7; }
.work-guidance > p strong { color: #514d58; font-weight: 590; }
.work-guidance-signal { width: 100%; margin-top: auto; display: flex; align-items: center; gap: 9px; color: #8b8792; font-size: 8px; letter-spacing: .13em; }
.work-guidance-signal::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg,rgba(101,80,242,.48),transparent); transform: scaleX(.14); transform-origin: left; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.work-guidance-signal i { width: 5px; height: 5px; border-radius: 50%; background: #7963e9; opacity: .28; }
.cognition-section.is-guiding .work-cognition-orbit > i { opacity: 1; box-shadow: 0 0 0 7px rgba(101,80,242,.07),0 0 15px rgba(101,80,242,.45); }
.cognition-section.is-guiding .work-guidance-signal::after { transform: scaleX(1); }

.work-path-canvas { position: relative; min-width: 0; overflow: hidden; background: radial-gradient(circle at 48% 48%,rgba(101,80,242,.045),transparent 38%); }
.work-path-heading { position: absolute; z-index: 4; top: 20px; left: 25px; right: 25px; display: flex; align-items: center; justify-content: space-between; }
.work-path-heading span { color: #797582; font-size: 9px; letter-spacing: .14em; }
.work-path-heading strong { margin-left: 10px; color: #514d58; font-size: 11px; font-weight: 590; }
.work-path-heading > small { padding: 5px 8px; color: #7963dc; border-radius: 999px; background: rgba(101,80,242,.065); font-size: 8px; letter-spacing: .09em; }
.work-path-lines { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.work-path-line { fill: none; stroke: url(#workPathFlow); stroke-width: 1.15; stroke-dasharray: 4 7; stroke-dashoffset: 34; opacity: .09; transition: opacity .45s ease; }
.work-path-line.active { opacity: .82; animation: work-line-flow 1.5s linear infinite; }
.work-finetask,.work-action,.work-result { position: absolute; z-index: 3; width: 136px; height: 82px; padding: 13px 14px 11px; border: 1px solid rgba(35,28,69,.1); border-radius: 11px; background: rgba(255,255,255,.74); box-shadow: 0 12px 25px rgba(45,35,91,.035); }
.work-finetask { left: 1%; top: 150px; border-color: rgba(35,28,69,.15); }
.work-finetask small,.work-action > small,.work-result small { display: block; color: #96929d; font-size: 8px; letter-spacing: .07em; }
.work-finetask strong,.work-action > strong,.work-result strong { display: block; margin-top: 9px; color: #4b4752; font-size: 13px; font-weight: 620; }
.work-finetask span { display: block; margin-top: 9px; color: #99959f; font-size: 9px; }
.work-runtime-core { position: absolute; z-index: 3; left: 17.3%; top: 136px; width: 110px; height: 110px; display: grid; place-items: center; border: 1px solid rgba(101,80,242,.24); border-radius: 50%; background: rgba(248,246,255,.88); opacity: .42; transform: scale(.92); transition: opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease; }
.work-runtime-core::before { content: ""; position: absolute; inset: -10px; border: 1px solid rgba(101,80,242,.12); border-radius: 50%; }
.work-core-ring { position: absolute; inset: 9px; border: 1px dashed rgba(101,80,242,.28); border-radius: 50%; animation: rotate-orbit 11s linear infinite; }
.work-runtime-core > div { position: relative; z-index: 2; text-align: center; }
.work-runtime-core small { color: #7d68e5; font-size: 7px; letter-spacing: .18em; }
.work-runtime-core strong { display: block; margin-top: 4px; color: #3e3949; font-size: 12px; line-height: 1.15; letter-spacing: .06em; }
.work-runtime-core span { display: block; margin-top: 5px; color: #8a8593; font-size: 6px; letter-spacing: .13em; }
.cognition-section.is-building .work-runtime-core { opacity: 1; transform: scale(1); box-shadow: 0 0 0 10px rgba(101,80,242,.045),0 18px 40px rgba(70,52,169,.14); }

.work-action { opacity: .16; transform: translateY(7px) scale(.97); transition: opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1),border-color .45s ease,box-shadow .45s ease; }
.action-one { left: 33%; top: 69px; }
.action-two { left: 33%; top: 231px; }
.action-three { left: 51.3%; top: 150px; }
.action-four { left: 68%; top: 150px; }
.work-action.is-active { opacity: 1; transform: translateY(0) scale(1); border-color: rgba(101,80,242,.24); box-shadow: 0 15px 34px rgba(76,56,175,.08); }
.action-model-calls { margin-top: 12px; display: flex; align-items: center; gap: 4px; }
.action-model-calls span { margin-right: 2px; color: #9b97a1; font-size: 7px; letter-spacing: .08em; }
.action-model-calls i { width: 5px; height: 5px; border-radius: 50%; background: #d2ceda; }
.action-model-calls b { margin-left: 1px; color: #8975e9; font-size: 8px; font-weight: 620; }
.work-action.is-active .action-model-calls i { animation: work-model-call 1.6s ease-in-out infinite; }
.work-action.is-active .action-model-calls i:nth-of-type(2) { animation-delay: .16s; }
.work-action.is-active .action-model-calls i:nth-of-type(3) { animation-delay: .32s; }
.work-action.is-active .action-model-calls i:nth-of-type(4) { animation-delay: .48s; }
.work-action.is-active .action-model-calls i:nth-of-type(5) { animation-delay: .64s; }
.work-result { right: 1%; top: 150px; opacity: .16; transform: translateY(7px); transition: opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1),border-color .5s ease,box-shadow .5s ease; }
.work-result strong { font-size: 13px; }
.work-result span { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: #399774; font-size: 8px; letter-spacing: .1em; }
.work-result span i { width: 5px; height: 5px; border-radius: 50%; background: var(--success); }
.cognition-section.is-result .work-result { opacity: 1; transform: translateY(0); border-color: rgba(42,167,123,.25); box-shadow: 0 14px 32px rgba(42,167,123,.08); }

.runtime-difference { height: 57px; padding: 0 26px; display: grid; grid-template-columns: 1fr 74px 1fr; align-items: center; border-top: 1px solid rgba(35,28,69,.065); background: rgba(255,255,255,.2); }
.runtime-difference p { margin: 0; display: flex; align-items: baseline; gap: 11px; }
.runtime-difference p:last-child { justify-content: flex-end; }
.runtime-difference p span { color: #9a969f; font-size: 9px; letter-spacing: .12em; }
.runtime-difference p strong { color: #625d69; font-size: 10px; font-weight: 620; letter-spacing: .08em; }
.runtime-difference p:last-child strong { color: #715cda; }
.runtime-difference p small { color: #a6a2aa; font-size: 9px; }
.runtime-difference > i { width: 100%; height: 1px; background: linear-gradient(90deg,transparent,rgba(101,80,242,.34),transparent); }

.cognition-statement { position: relative; z-index: 2; margin: 24px 0 0; text-align: center; font-size: clamp(18px,1.45vw,24px); letter-spacing: -.035em; }
.cognition-statement span { color: #8a8790; }
.cognition-statement strong { margin-left: 8px; color: #27242c; font-weight: 620; }
.cognition-index { position: absolute; right: clamp(28px,4.7vw,84px); bottom: 26px; color: #aaa7b0; font-size: 10px; letter-spacing: .12em; }
.cognition-index span { padding: 0 6px; color: var(--violet); }

@keyframes work-line-flow { to { stroke-dashoffset: 0; } }
@keyframes work-model-call { 0%,70%,100% { background: #d2ceda; box-shadow: none; } 24% { background: #816bec; box-shadow: 0 0 0 4px rgba(101,80,242,.08); } }

.how-section {
  position: relative;
  min-height: max(900px, 100svh);
  padding: clamp(82px,9vh,108px) clamp(28px,6.3vw,114px) 48px;
  color: #f2f1f5;
  background:
    radial-gradient(circle at 67% 53%,rgba(102,78,237,.14),transparent 32%),
    radial-gradient(circle at 16% 78%,rgba(47,169,125,.055),transparent 28%),
    #101014;
  overflow: hidden;
}
.how-grid { opacity: .34; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px); background-size: 78px 78px; mask-image: linear-gradient(to bottom,black,transparent 90%); }
.how-head { position: relative; z-index: 2; width: min(1200px,100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.8fr) minmax(230px,.8fr); align-items: end; gap: 22px 64px; }
.how-kicker { grid-column: 1 / -1; margin: 0; color: #93909e; font-size: 10px; font-weight: 600; letter-spacing: .16em; }
.how-kicker span { margin-right: 12px; color: #8a75ff; }
.how-head h2 { margin: 0; font-size: clamp(36px,3.65vw,54px); line-height: 1.18; letter-spacing: -.045em; font-weight: 620; }
.how-head h2 span { color: #8874ff; }
.mobile-title-break { display: none; }
.how-head > p:last-child { margin: 0 0 3px; color: #aaa5b3; font-size: 14px; line-height: 1.8; }

.mode-tabs { position: relative; z-index: 3; width: 348px; height: 48px; margin: clamp(30px,3.8vh,42px) auto 0; padding: 4px; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(28,27,34,.82); box-shadow: 0 14px 38px rgba(0,0,0,.2); backdrop-filter: blur(16px); }
.mode-tabs button { position: relative; padding: 0 18px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #74727c; border: 0; border-radius: 999px; background: transparent; cursor: pointer; transition: color .35s ease, background .35s ease, box-shadow .35s ease; }
.mode-tabs button:hover { color: #aaa7b1; background: rgba(255,255,255,.025); }
.mode-tabs button.active { color: #f0eff4; background: rgba(255,255,255,.065); box-shadow: inset 0 0 0 1px rgba(255,255,255,.035); }
.mode-tabs button:focus { outline: none; }
.mode-tabs button:focus-visible { box-shadow: inset 0 0 0 1px rgba(136,116,255,.58); }
.mode-tabs button svg { width: 15px; height: 15px; fill: none; stroke: #65626e; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s ease,filter .35s ease,transform .35s ease; }
.mode-tabs button:hover svg { stroke: #918d9a; }
.mode-tabs button.active svg { stroke: #9784ff; filter: drop-shadow(0 0 5px rgba(132,110,255,.34)); transform: translateY(-.5px); }
.mode-tabs button span { font-size: 14px; font-weight: 600; }
.mode-tabs button i { position: absolute; left: 50%; bottom: 3px; width: 28px; height: 1px; overflow: hidden; transform: translateX(-50%); }
.mode-tabs button.active i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,transparent,#846eff,transparent); animation: tab-progress 9s linear forwards; }
.how-section.is-user-controlled .mode-tabs button.active i::after { animation: none; transform: translateX(0); }

.mode-runtime { position: relative; z-index: 2; width: min(1200px,100%); height: 492px; margin: 17px auto 0; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(255,255,255,.035); box-shadow: 0 32px 80px rgba(0,0,0,.24); backdrop-filter: blur(18px); overflow: hidden; }
.mode-panels { height: 100%; }
.mode-panel { height: 100%; display: grid; grid-template-columns: 280px minmax(0,1fr); animation: panel-in .55s cubic-bezier(.2,.8,.2,1) both; }
.mode-panel[hidden] { display: none; }
.mode-summary { position: relative; padding: 35px 26px 32px; border-right: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.012); }
.mode-code { color: #77747f; font-size: 10px; letter-spacing: .14em; }
.mode-summary h3 { margin: 20px 0 0; font-size: 24px; line-height: 1.3; letter-spacing: -.045em; font-weight: 570; }
.mode-summary > p { margin: 19px 0 0; color: #898791; font-size: 13px; line-height: 1.8; }
.mode-principles { margin-top: 23px; display: flex; align-items: center; gap: 9px; color: #756f93; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.mode-principles i { width: 22px; height: 1px; background: #574e7e; }
.mode-summary > button { position: absolute; left: 26px; bottom: 30px; padding: 9px 13px; color: #c4c1cb; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.035); font-size: 10px; cursor: pointer; transition: color .25s ease,border-color .25s ease,transform .25s ease; }
.mode-summary > button:hover { color: white; border-color: rgba(136,116,255,.45); transform: translateY(-2px); }
.mode-summary > button span { margin-left: 8px; color: #8a75ff; }

.discussion-map,.work-map,.project-map { position: relative; min-width: 0; height: 100%; overflow: hidden; }
.discussion-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.discussion-line { fill: none; stroke: rgba(134,112,255,.3); stroke-width: 1; stroke-dasharray: 4 7; animation: discussion-flow 2s linear infinite; }
.depth-line { stroke: rgba(66,179,137,.4); }
.move-pulse { fill: #8973ff; filter: drop-shadow(0 0 7px rgba(137,115,255,.7)); }
.depth-pulse { fill: #43b087; }
.topic-root,.topic-node { position: absolute; border: 1px solid rgba(255,255,255,.1); background: rgba(23,22,29,.91); box-shadow: 0 16px 30px rgba(0,0,0,.16); }
.topic-root { left: 3%; top: 34%; width: 170px; padding: 17px; border-radius: 13px; }
.topic-root span,.topic-root strong,.topic-root small,.topic-node span,.topic-node small { display: block; }
.topic-root > span { color: #706d77; font-size: 9px; letter-spacing: .13em; }
.topic-root strong { margin-top: 8px; font-size: 12px; font-weight: 600; }
.topic-root small { margin-top: 8px; color: #479e7d; font-size: 9px; }
.topic-node { width: 132px; min-height: 57px; padding: 10px 10px 9px 32px; border-radius: 10px; }
.topic-node i { position: absolute; left: 10px; top: 11px; width: 14px; height: 14px; display: grid; place-items: center; color: #9b8aff; border: 1px solid rgba(134,112,255,.28); border-radius: 50%; font-size: 9px; font-style: normal; }
.topic-node span { color: #cac7d0; font-size: 12px; font-weight: 580; }
.topic-node small { margin-top: 5px; color: #74717b; font-size: 9px; }
.node-users { left: 43%; top: 5%; }.node-tech { left: 52%; top: 32%; }.node-model { left: 47%; top: 64%; }.node-channel { left: 59%; top: 80%; }
.depth-one { left: 72%; top: 51%; border-color: rgba(67,176,135,.19); }.depth-two { right: 2%; top: 73%; border-color: rgba(67,176,135,.19); }
.depth-one i,.depth-two i { color: #5ec09a; border-color: rgba(67,176,135,.3); }
.map-caption { position: absolute; color: #615e68; font-size: 9px; letter-spacing: .12em; }
.breadth-caption { top: 7%; right: 4%; }.depth-caption { right: 3%; bottom: 6%; color: #4f7768; }

.work-context { position: absolute; left: 4%; top: 8%; width: 300px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: rgba(255,255,255,.025); }
.work-context span,.work-context strong,.work-context small { display: block; }
.work-context span { color: #716d78; font-size: 9px; letter-spacing: .12em; }.work-context strong { margin-top: 7px; font-size: 12px; font-weight: 580; }.work-context small { margin-top: 5px; color: #726f79; font-size: 9px; }
.work-engine { position: absolute; left: 5%; top: 55%; transform: translateY(-50%); width: 145px; height: 145px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle,rgba(103,81,241,.17),transparent 70%); }
.mini-engine-ring { position: absolute; inset: 11px; border: 1px dashed rgba(136,116,255,.32); border-radius: 50%; animation: rotate-orbit 13s linear infinite; }
.work-engine svg { width: 24px; color: #8b77ff; }.work-engine strong { margin-top: 8px; font-size: 12px; }.work-engine small { margin-top: 5px; color: #77737f; font-size: 9px; }
.work-path { position: absolute; left: max(170px,24%); right: 160px; top: calc(55% - 23px); display: grid; grid-template-columns: repeat(4,1fr); }
.work-path::before { content: ""; position: absolute; left: 8%; right: 8%; top: 23px; height: 1px; background: rgba(255,255,255,.09); }
.work-flow { position: absolute; left: 8%; top: 23px; width: 72%; height: 1px; background: linear-gradient(90deg,#715bed,#967fff); box-shadow: 0 0 9px rgba(113,91,237,.3); animation: work-grow 4.8s ease-in-out infinite; transform-origin: left; }
.work-path div { position: relative; z-index: 2; display: grid; justify-items: center; color: #85818d; }
.work-path div b { line-height: 12px; color: #797580; font-size: 9px; font-weight: 500; }.work-path div b::after { content: ""; display: block; width: 10px; height: 10px; margin: 6px auto 0; border: 3px solid #17161d; border-radius: 50%; background: #806aff; box-shadow: 0 0 0 1px rgba(128,106,255,.25); }
.work-path div span { margin-top: 9px; color: #b2afb9; font-size: 10px; }.work-path div small { margin-top: 4px; font-size: 9px; }
.work-outcome { position: absolute; right: 3%; top: 55%; transform: translateY(-50%); width: 128px; padding: 17px 13px; text-align: center; border: 1px solid rgba(67,176,135,.2); border-radius: 12px; background: rgba(67,176,135,.045); }
.work-outcome i { width: 23px; height: 23px; margin: auto; display: grid; place-items: center; color: #5dc09a; border: 1px solid rgba(67,176,135,.3); border-radius: 50%; font-size: 12px; font-style: normal; }.work-outcome span,.work-outcome strong,.work-outcome small { display: block; }.work-outcome span { margin-top: 10px; color: #4e9c7d; font-size: 9px; letter-spacing: .1em; }.work-outcome strong { margin-top: 7px; font-size: 12px; }.work-outcome small { margin-top: 5px; color: #74717b; font-size: 9px; }

.dag-goal { position: absolute; left: 3%; right: 3%; top: 5%; padding: 11px 15px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.025); }
.dag-goal span { color: #74717b; font-size: 9px; letter-spacing: .12em; }
.dag-goal strong { font-size: 12px; }
.dag-goal small { color: #4da27f; font-size: 9px; }
.dag-goal small i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: #4eae88; box-shadow: 0 0 0 4px rgba(78,174,136,.08); }
.project-dag { position: absolute; left: 3%; right: 3%; top: 18%; bottom: 15%; }
.dag-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dag-lines marker path { fill: #5d5966; }
.dag-edge { fill: none; stroke: #5d5966; stroke-width: 1.2; stroke-dasharray: 4 5; marker-end: url(#dag-arrow); }
.dag-edge.complete { stroke: rgba(70,164,127,.62); }
.dag-edge.active { stroke: rgba(139,118,255,.9); stroke-width: 1.7; animation: discussion-flow 1.8s linear infinite; }
.dag-edge.waiting { stroke: rgba(255,255,255,.13); }
.dag-node { position: absolute; width: min(140px,17%); min-height: 68px; padding: 11px 11px 9px; border: 1px solid rgba(255,255,255,.1); border-left: 2px solid #66636d; border-radius: 9px; background: rgba(24,23,30,.94); box-shadow: 0 12px 26px rgba(0,0,0,.17); }
.dag-node b,.dag-node strong,.dag-node small { display: block; }
.dag-node b { display: flex; justify-content: space-between; color: #77747e; font-size: 9px; font-weight: 580; letter-spacing: .04em; }
.dag-node b em { color: #97909e; font-size: 7px; font-style: normal; font-weight: 520; }
.dag-node strong { margin-top: 7px; color: #c1bec8; font-size: 12px; font-weight: 590; }
.dag-node small { text-wrap: balance; margin-top: 6px; color: #918b9a; font-size: 8px; }
.dag-node.complete { border-left-color: #4da27f; }
.dag-node.complete b em { color: #4f8d75; }
.dag-node.running { border-color: rgba(139,118,255,.48); border-left-color: #8b76ff; background: rgba(71,57,143,.13); box-shadow: 0 0 26px rgba(113,91,237,.1); }
.dag-node.running b em,.dag-node.running strong { color: #a999ff; }
.dag-node.ready { border-left-color: #4f81a2; }
.dag-node.ready b em { color: #5e91b0; }
.dag-node.waiting { opacity: .82; }
.dag-root { left: 0; top: calc(50% - 34px); }
.dag-branch-a { left: 22%; top: calc(18% - 34px); }
.dag-branch-b { left: 22%; top: calc(82% - 34px); }
.dag-merge { left: 44%; top: calc(50% - 34px); }
.dag-branch-c { left: 66%; top: calc(18% - 34px); }
.dag-branch-d { left: 66%; top: calc(82% - 34px); }
.dag-final { right: 0; top: calc(50% - 34px); }
.dag-caption { position: absolute; color: #5d5964; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.split-one { left: 24%; top: 48%; }
.split-two { left: 68%; top: 48%; }
.runtime-dispatch { position: absolute; left: 3%; right: 3%; bottom: 5%; padding: 11px 14px; display: grid; grid-template-columns: 125px minmax(0,1fr); align-items: center; gap: 10px; border: 1px solid rgba(136,116,255,.18); border-radius: 9px; background: rgba(101,80,242,.055); }.runtime-dispatch span { color: #8d7bff; font-size: 9px; letter-spacing: .1em; }.runtime-dispatch span i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: #8a75ff; box-shadow: 0 0 0 4px rgba(138,117,255,.09); }.runtime-dispatch strong { font-size: 10px; font-weight: 580; }.runtime-dispatch small { grid-column: 2; color: #97939f; font-size: 9px; }

.how-statement { position: relative; z-index: 2; margin: 24px 0 0; text-align: center; font-size: clamp(18px,1.45vw,24px); letter-spacing: -.035em; }.how-statement span { color: #77747d; }.how-statement strong { margin-left: 9px; font-weight: 590; }.how-index { position: absolute; right: clamp(28px,4.7vw,84px); bottom: 26px; color: #55535c; font-size: 10px; letter-spacing: .12em; }.how-index span { padding: 0 6px; color: #8874ff; }

.learning-section {
  position: relative;
  min-height: max(900px,100svh);
  padding: clamp(82px,9vh,108px) clamp(28px,6.3vw,114px) 48px;
  color: #25232b;
  background:
    radial-gradient(circle at 42% 55%,rgba(112,91,236,.09),transparent 30%),
    radial-gradient(circle at 82% 75%,rgba(54,164,124,.055),transparent 24%),
    #f4f3ef;
  overflow: hidden;
}
.learning-grid { opacity: .34; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(33,29,48,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(33,29,48,.035) 1px,transparent 1px); background-size: 78px 78px; mask-image: linear-gradient(to bottom,black,transparent 92%); }
.learning-head { position: relative; z-index: 2; width: min(1200px,100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.8fr) minmax(230px,.8fr); align-items: end; gap: 22px 64px; }
.learning-kicker { grid-column: 1 / -1; margin: 0; color: #837e8c; font-size: 10px; font-weight: 600; letter-spacing: .16em; }
.learning-kicker span { margin-right: 12px; color: #705be8; }
.learning-head h2 { margin: 0; font-size: clamp(36px,3.65vw,54px); line-height: 1.18; letter-spacing: -.045em; font-weight: 620; }
.learning-head h2 span { color: #6550db; }
.learning-head > p:last-child { margin: 0 0 3px; color: #77717e; font-size: 14px; line-height: 1.8; }

.learning-runtime { position: relative; z-index: 2; width: min(1200px,100%); height: 560px; margin: clamp(34px,4.4vh,50px) auto 0; border: 1px solid rgba(37,31,56,.1); border-radius: 20px; background: rgba(255,255,255,.52); box-shadow: 0 28px 75px rgba(45,37,73,.08); backdrop-filter: blur(18px); overflow: hidden; }
.learning-status { height: 52px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(37,31,56,.075); }
.learning-status > span { color: #99969f; font-size: 10px; letter-spacing: .15em; }
.learning-status strong { color: #756f7e; font-size: 10px; font-weight: 520; }
.learning-status strong i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #43a980; box-shadow: 0 0 0 5px rgba(67,169,128,.08); animation: live 2s ease-in-out infinite; }
.learning-body { height: 400px; display: grid; grid-template-columns: 1fr 1.08fr; }
.learning-loop-panel,.learning-evolution { position: relative; min-width: 0; overflow: hidden; }
.learning-loop-panel { border-right: 1px solid rgba(37,31,56,.075); background: radial-gradient(circle at 50% 58%,rgba(107,85,221,.055),transparent 35%); }
.learning-loop-panel > header,.learning-evolution > header { position: relative; z-index: 4; height: 56px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; }
.learning-loop-panel > header span,.learning-evolution > header span { color: #9b97a1; font-size: 9px; letter-spacing: .14em; }
.learning-loop-panel > header strong,.learning-evolution > header strong { color: #514d58; font-size: 12px; font-weight: 600; }
.learning-orbit { position: absolute; left: 10px; right: 10px; top: 42px; width: calc(100% - 20px); height: calc(100% - 52px); }
.learning-orbit-track,.learning-orbit-live { fill: none; }
.learning-orbit-track { stroke: rgba(65,55,94,.13); stroke-width: 1; stroke-dasharray: 4 7; }
.learning-orbit-live { stroke: url(#learning-stroke); stroke-width: 1.4; stroke-dasharray: 74 820; stroke-linecap: round; animation: learning-orbit-flow 6.8s linear infinite; }
.learning-pulse { fill: #735eea; filter: drop-shadow(0 0 5px rgba(115,94,234,.45)); }
.learning-core { position: absolute; left: 50%; top: 57%; width: 144px; height: 144px; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translate(-50%,-50%); border: 1px solid rgba(101,80,219,.13); border-radius: 50%; background: radial-gradient(circle,rgba(111,89,231,.12),rgba(255,255,255,.78) 66%,rgba(255,255,255,.22)); box-shadow: 0 18px 42px rgba(82,67,142,.1); }
.learning-core-ring { position: absolute; inset: 8px; border: 1px dashed rgba(101,80,219,.24); border-radius: 50%; animation: rotate-orbit 16s linear infinite; }
.learning-core > svg { width: 21px; color: #6a55df; }
.learning-core > strong { margin-top: 5px; font-size: 13px; font-weight: 650; }
.learning-core > span { margin-top: 2px; color: #8a8593; font-size: 7px; letter-spacing: .12em; }
.learning-core > small { width: 106px; margin-top: 6px; color: #716c79; font-size: 9px; line-height: 1.35; text-align: center; }
.loop-phase { position: absolute; z-index: 3; width: 128px; min-height: 60px; padding: 9px 11px; border: 1px solid rgba(37,31,56,.09); border-radius: 9px; background: rgba(250,249,246,.92); box-shadow: 0 9px 22px rgba(45,37,73,.05); transition: border-color .35s ease,box-shadow .35s ease,transform .35s ease,background .35s ease; }
.loop-phase b,.loop-phase strong { display: block; }
.loop-phase b { color: #87818e; font-size: 8px; font-weight: 600; letter-spacing: .1em; }
.loop-phase strong { margin-top: 5px; font-size: 12px; font-weight: 620; }
.loop-phase.active { border-color: rgba(111,88,231,.32); background: rgba(248,246,255,.96); box-shadow: 0 12px 28px rgba(87,68,168,.11); }
.loop-phase.active b { color: #6f59df; }
.phase-execute { left: 27%; top: 78px; transform: translateX(-50%); }
.phase-observe { left: 73%; top: 78px; transform: translateX(-50%); }
.phase-extract { right: 3%; top: 57%; transform: translateY(-50%); }
.phase-attribute { left: 50%; bottom: 20px; transform: translateX(-50%); }
.phase-update { left: 3%; top: 57%; transform: translateY(-50%); }

.learning-evolution { --goal-progress: 7; background: linear-gradient(160deg,rgba(255,255,255,.2),rgba(103,81,219,.025)); }
.goal-trajectory { position: relative; margin: 12px 32px 0; height: 140px; }
.goal-trajectory > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.goal-track,.goal-progress { fill: none; stroke-linecap: round; }
.goal-track { stroke: rgba(61,54,82,.13); stroke-width: 1.2; stroke-dasharray: 3 7; }
.goal-progress { stroke: url(#goal-stroke); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--goal-progress)); filter: drop-shadow(0 0 3px rgba(106,83,222,.2)); transition: stroke-dashoffset .75s cubic-bezier(.22,.75,.25,1); }
.goal-point { position: absolute; z-index: 2; width: 82px; transform: translateX(-50%); color: #99959f; transition: color .45s ease,opacity .45s ease; }
.goal-point i { display: block; width: 8px; height: 8px; margin: 0 auto 8px; border: 1px solid rgba(74,66,96,.24); border-radius: 50%; background: #f6f5f1; transition: background .4s ease,box-shadow .4s ease,border-color .4s ease,transform .4s ease; }
.goal-point b,.goal-point span,.goal-point small { display: block; text-align: center; }
.goal-point b { font-size: 9px; font-weight: 650; letter-spacing: .11em; }
.goal-point span { margin-top: 4px; color: #736f79; font-size: 10px; font-weight: 590; }
.goal-point small { margin-top: 4px; color: #aaa6af; font-size: 9px; letter-spacing: .08em; }
.goal-point.active { color: #6853da; }
.goal-point.active i { border-color: #7059e5; background: #735de9; box-shadow: 0 0 0 6px rgba(112,89,229,.1),0 0 18px rgba(112,89,229,.24); transform: scale(1.18); }
.goal-point.completed { color: #3c9473; }
.goal-point.completed i { border-color: #3fa27c; background: #43a780; box-shadow: 0 0 0 4px rgba(67,167,128,.08); }
.goal-one { left: 6.33%; top: calc(82.44% - 4px); }.goal-two { left: 36.67%; top: calc(67.32% - 4px); }.goal-three { left: 65%; top: calc(40.49% - 4px); }.goal-four { left: 93.67%; top: calc(13.66% - 4px); }
.goal-learning-detail { position: relative; margin: 94px 22px 0; min-height: 74px; padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 14px; border: 1px solid rgba(91,72,187,.1); border-radius: 10px; background: rgba(250,249,247,.82); box-shadow: 0 9px 24px rgba(56,47,91,.035); }
.goal-learning-detail > div span,.goal-learning-detail > div strong { display: block; }
.goal-learning-detail > div span { color: #7560de; font-size: 9px; letter-spacing: .1em; }
.goal-learning-detail > div strong { margin-top: 6px; font-size: 12px; font-weight: 620; }
.goal-learning-detail > p { margin: 0; display: flex; align-items: center; gap: 8px; }
.goal-learning-detail > p span { color: #6f6a76; font-size: 9px; white-space: nowrap; }
.goal-learning-detail > p i { width: 12px; height: 1px; background: rgba(101,80,219,.22); }
.goal-learning-detail > small { display: none; }
.goal-learning-detail > small i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #43a47d; }
.learning-benefits { height: 108px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(37,31,56,.075); background: rgba(248,247,243,.52); }
.learning-benefits > div { padding: 0 26px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid rgba(37,31,56,.065); }
.learning-benefits > div:last-child { border-right: 0; }
.learning-benefits b { font-size: 17px; font-weight: 630; }
.learning-benefits span { margin-top: 8px; color: #77717e; font-size: 11px; line-height: 1.55; }
.learning-statement { position: relative; z-index: 2; margin: 24px 0 0; text-align: center; font-size: clamp(18px,1.45vw,24px); letter-spacing: -.035em; }
.learning-statement span { color: #8b8791; }
.learning-statement strong { margin-left: 9px; font-weight: 600; }
.learning-index { position: absolute; right: clamp(28px,4.7vw,84px); bottom: 26px; color: #aaa6af; font-size: 10px; letter-spacing: .12em; }
.learning-index span { padding: 0 6px; color: #6b56dd; }

.difference-section {
  position: relative;
  min-height: max(900px,100svh);
  padding: clamp(82px,9vh,108px) clamp(28px,6.3vw,114px) 48px;
  color: #f1f0f4;
  background:
    radial-gradient(circle at 70% 54%,rgba(105,82,231,.14),transparent 31%),
    radial-gradient(circle at 19% 74%,rgba(55,164,124,.05),transparent 24%),
    #101014;
  overflow: hidden;
}
.difference-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px); background-size: 78px 78px; mask-image: linear-gradient(to bottom,black,transparent 92%); }
.difference-head { position: relative; z-index: 2; display: grid; grid-template-columns: .46fr minmax(650px,1.8fr) minmax(260px,.72fr); align-items: end; gap: 34px; }
.difference-kicker { align-self: start; margin: 9px 0 0; color: #6f6d77; font-size: 9px; font-weight: 600; letter-spacing: .17em; }
.difference-kicker span { margin-right: 12px; color: #8a75ff; }
.difference-head h2 { margin: 0; font-size: clamp(40px,3.5vw,60px); line-height: 1.1; letter-spacing: -.055em; font-weight: 620; }
.difference-head h2 span { color: #8874ff; }
.difference-head > p:last-child { margin: 0 0 5px; color: #898691; font-size: 12px; line-height: 1.75; }

.difference-runtime { position: relative; z-index: 2; width: min(1200px,95vw); height: 500px; margin: clamp(34px,4.4vh,50px) auto 0; display: grid; grid-template-columns: 34% 66%; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(255,255,255,.032); box-shadow: 0 32px 80px rgba(0,0,0,.25); backdrop-filter: blur(18px); overflow: hidden; }
.static-skill { position: relative; padding: 0 32px 28px; border-right: 1px solid rgba(255,255,255,.075); background: rgba(255,255,255,.012); }
.static-skill > header { height: 56px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.06); }
.static-skill > header span { color: #77747f; font-size: 7px; letter-spacing: .14em; }
.static-skill > header small { color: #53515a; font-size: 5px; letter-spacing: .1em; }
.skill-lock { position: relative; width: 98px; height: 98px; margin: 34px auto 0; display: grid; place-items: center; border: 1px dashed rgba(255,255,255,.12); border-radius: 22px; background: rgba(255,255,255,.018); }
.skill-lock > span { position: absolute; right: -19px; top: -8px; padding: 5px 7px; color: #77747e; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; background: #18171d; font-size: 5px; letter-spacing: .12em; }
.skill-cube { position: relative; width: 42px; height: 42px; transform: rotate(30deg) skew(-6deg,-6deg); }
.skill-cube i { position: absolute; inset: 0; border: 1px solid #716d79; }
.skill-cube i:nth-child(2) { transform: translate(6px,-6px); opacity: .46; }
.skill-cube i:nth-child(3) { transform: translate(12px,-12px); opacity: .2; }
.static-skill h3 { margin: 20px 0 0; text-align: center; font-size: 18px; font-weight: 590; }
.static-skill > p { width: 245px; margin: 10px auto 0; color: #77747e; font-size: 9px; line-height: 1.65; text-align: center; }
.fixed-flow { margin-top: 25px; display: grid; grid-template-columns: 1fr 22px 1fr 22px 1fr; align-items: center; }
.fixed-flow > div { min-width: 0; padding: 10px 7px; border: 1px solid rgba(255,255,255,.075); border-radius: 8px; background: rgba(255,255,255,.022); text-align: center; }
.fixed-flow > div b,.fixed-flow > div span,.fixed-flow > div small { display: block; }
.fixed-flow > div b { color: #55525d; font-size: 5px; font-weight: 520; }
.fixed-flow > div span { margin-top: 4px; color: #99959f; font-size: 6px; }
.fixed-flow > div small { margin-top: 4px; color: #5f5c66; font-size: 5px; }
.fixed-flow > i { position: relative; height: 1px; overflow: hidden; background: rgba(255,255,255,.1); }
.fixed-flow > i::after { content: ""; display: block; width: 45%; height: 1px; background: #77737f; animation: fixed-flow-pass 1.8s linear infinite; }
.skill-limit { position: absolute; left: 32px; right: 32px; bottom: 25px; padding: 11px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.065); border-radius: 9px; background: rgba(255,255,255,.018); }
.skill-limit i { width: 6px; height: 6px; border: 1px solid #706d77; border-radius: 50%; }
.skill-limit span { color: #716e78; font-size: 7px; }

.adaptive-runtime { min-width: 0; }
.adaptive-runtime > header { height: 56px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.065); }
.adaptive-runtime > header > div:first-child span,.adaptive-runtime > header > div:first-child small { display: block; }
.adaptive-runtime > header > div:first-child span { color: #9988f4; font-size: 7px; letter-spacing: .13em; }
.adaptive-runtime > header > div:first-child small { margin-top: 4px; color: #5e5a67; font-size: 5px; letter-spacing: .08em; }
.runtime-goal-switch { padding: 3px; display: flex; gap: 3px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.018); }
.runtime-goal-switch button { padding: 6px 12px; color: #686570; border: 0; border-radius: 999px; background: transparent; font-size: 6px; cursor: pointer; transition: color .3s ease,background .3s ease; }
.runtime-goal-switch button.active { color: #eeeafc; background: rgba(123,98,239,.2); }
.runtime-goal-switch button:focus { outline: none; }
.runtime-goal-switch button:focus-visible { box-shadow: inset 0 0 0 1px rgba(143,121,255,.6); }
.adaptive-canvas { position: relative; height: calc(100% - 56px); overflow: hidden; }
.active-goal { position: absolute; left: 3%; top: 17px; z-index: 3; width: 215px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(21,20,26,.88); }
.active-goal span,.active-goal strong,.active-goal small { display: block; }
.active-goal span { color: #67636e; font-size: 5px; letter-spacing: .12em; }
.active-goal strong { margin-top: 5px; font-size: 8px; font-weight: 590; }
.active-goal small { margin-top: 5px; color: #756f8f; font-size: 5px; }
.active-goal small i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: #846eff; box-shadow: 0 0 0 4px rgba(132,110,255,.08); }
.runtime-network { position: absolute; inset: 0; width: 100%; height: 100%; }
.runtime-network-mobile { display: none; }
.runtime-route { fill: none; stroke-width: 1; stroke-dasharray: 5 6; opacity: 1; transition: stroke .45s ease,stroke-width .45s ease,filter .45s ease; }
.route-a { stroke: rgba(139,116,255,.34); }
.route-b { stroke: rgba(67,173,132,.34); }
.goal-a .route-a { stroke: #8b74ff; stroke-width: 2.1; filter: drop-shadow(0 0 4px rgba(128,104,244,.38)); animation: runtime-route-flow 2s linear infinite; }
.goal-b .route-b { stroke: #43ad84; stroke-width: 2.1; filter: drop-shadow(0 0 4px rgba(67,173,132,.34)); animation: runtime-route-flow 2s linear infinite; }
.adaptive-core { position: absolute; left: 4%; top: 50%; width: 110px; height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle,rgba(111,87,237,.18),transparent 70%); }
.adaptive-core-ring { position: absolute; inset: 7px; border: 1px dashed rgba(137,116,255,.33); border-radius: 50%; animation: rotate-orbit 14s linear infinite; }
.adaptive-core > svg { width: 23px; color: #8d79ff; }
.adaptive-core > strong { margin-top: 6px; font-size: 10px; }
.adaptive-core > small { margin-top: 4px; color: #716c7a; font-size: 5px; letter-spacing: .08em; }
.runtime-action { position: absolute; z-index: 2; width: 112px; min-height: 56px; padding: 10px 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(23,22,29,.9); opacity: .2; transition: opacity .5s ease,border-color .5s ease,box-shadow .5s ease,transform .5s ease; }
.runtime-action b,.runtime-action strong,.runtime-action small { display: block; }
.runtime-action b { color: #5f5b67; font-size: 5px; font-weight: 550; letter-spacing: .1em; }
.runtime-action strong { margin-top: 5px; color: #c2bec9; font-size: 8px; font-weight: 580; }
.runtime-action small { margin-top: 4px; color: #68646f; font-size: 5px; }
.goal-a .goal-a-node { opacity: 1; border-color: rgba(133,110,247,.3); box-shadow: 0 11px 25px rgba(79,60,163,.1); transform: translateY(-2px); }
.goal-b .goal-b-node { opacity: 1; border-color: rgba(67,173,132,.3); box-shadow: 0 11px 25px rgba(45,125,94,.1); transform: translateY(-2px); }
.action-market,.action-user { left: 23%; }
.action-market { top: 14%; }.action-user { bottom: 14%; }
.action-icp,.action-position { left: 45%; }
.action-icp { top: 6%; }.action-position { bottom: 6%; }
.action-strategy,.action-sales { left: 66%; }
.action-strategy { top: 20%; }.action-sales { bottom: 20%; }
.runtime-outcome { position: absolute; z-index: 3; right: 2%; top: 50%; width: 122px; padding: 14px 10px; transform: translateY(-50%); text-align: center; border: 1px solid rgba(65,175,133,.23); border-radius: 10px; background: rgba(46,135,102,.055); }
.runtime-outcome i { width: 22px; height: 22px; margin: auto; display: grid; place-items: center; color: #57b38f; border: 1px solid rgba(65,175,133,.3); border-radius: 50%; font-size: 9px; font-style: normal; }
.runtime-outcome span,.runtime-outcome strong { display: block; }
.runtime-outcome span { margin-top: 8px; color: #4b987b; font-size: 5px; letter-spacing: .1em; }
.runtime-outcome strong { margin-top: 6px; font-size: 7px; font-weight: 570; }
.feedback-caption { position: absolute; left: 18%; right: 18%; bottom: 15px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 9px; }
.feedback-caption i { height: 1px; background: linear-gradient(90deg,transparent,rgba(62,171,129,.35),transparent); }
.feedback-caption span { color: #537769; font-size: 5px; letter-spacing: .1em; }
.difference-statement { position: relative; z-index: 2; margin: 24px 0 0; text-align: center; font-size: clamp(18px,1.45vw,24px); letter-spacing: -.035em; }
.difference-statement span { color: #77747d; }
.difference-statement strong { margin-left: 9px; font-weight: 590; }
.difference-index { position: absolute; right: clamp(28px,4.7vw,84px); bottom: 26px; color: #55535c; font-size: 8px; letter-spacing: .12em; }
.difference-index span { padding: 0 6px; color: #8874ff; }

@keyframes tab-progress { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes discussion-flow { to { stroke-dashoffset: -22; } }
@keyframes work-grow { 0% { transform: scaleX(.08); } 75%,100% { transform: scaleX(1); } }
@keyframes learning-orbit-flow { to { stroke-dashoffset: -894; } }
@keyframes fixed-flow-pass { from { transform: translateX(-100%); } to { transform: translateX(225%); } }
@keyframes runtime-route-flow { to { stroke-dashoffset: -22; } }

@keyframes reveal-log { to { opacity: 1; transform: scale(1); } }
@keyframes reveal-complete { to { opacity: 1; } }
@keyframes draw-line { to { transform: scaleX(1); } }
@keyframes gap-pop { to { opacity: 1; transform: scale(1); } }
@keyframes continue-flow { from { transform: translateX(-100%); } to { transform: translateX(390%); } }

.release-dialog { width: min(480px,calc(100vw - 40px)); padding: 42px; color: #f2eff9; border: 1px solid #ffffff26; border-radius: 18px; background: #1b1b24; box-shadow: 0 30px 100px #0006; }
.release-dialog::backdrop { background: #0d0c1480; backdrop-filter: blur(8px); }
.release-kicker { margin: 0 0 22px; color: #ac9bdf; font-size: 12px; letter-spacing: .1em; }
.release-dialog h2 { margin: 0; font-size: 32px; font-weight: 580; letter-spacing: -.04em; }
.release-dialog > p:last-of-type { margin: 16px 0 28px; color: #b3adbf; font-size: 16px; line-height: 1.8; }
.release-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #ffffff09; color: #c5bdcf; font-size: 24px; cursor: pointer; }
.release-confirm { padding: 11px 22px; border: 1px solid #ffffff24; border-radius: 8px; background: #f2eff9; color: #24212c; font-size: 14px; cursor: pointer; }
.release-dialog button:focus-visible { outline: 2px solid #b4a4ff; outline-offset: 4px; }

@keyframes rotate-orbit { to { transform: rotate(360deg); } }
@keyframes tilt-a { from { transform: rotate(-24deg) scaleX(.95); } to { transform: rotate(-13deg) scaleX(1.04); } }
@keyframes tilt-b { from { transform: rotate(28deg) scaleY(.96); } to { transform: rotate(39deg) scaleY(1.05); } }
@keyframes path-flow { to { stroke-dashoffset: -22; } }
@keyframes live { 50% { opacity: .45; box-shadow: 0 0 0 8px rgba(42,167,123,.03); } }
@keyframes scroll-line { 0% { transform: translateX(-100%); } 45%,55% { transform: translateX(0); } 100% { transform: translateX(100%); } }

@media (max-width: 1080px) {
  .desktop-nav { display: none; position: absolute; top: calc(100% - 4px); left: 20px; right: 20px; max-height: calc(100svh - 100px); overflow-y: auto; padding: 16px 20px; border: 1px solid #dedde5; border-radius: 12px; background: #fafaf8; box-shadow: 0 16px 45px -16px #1c153b38; }
  .desktop-nav.is-open { display: block; animation: nav-appear .18s ease-out; }
  .desktop-nav > a { display: block; padding: 14px 0; }
  .desktop-nav > a::after { display: none; }
  .nav-capabilities summary { padding: 14px 0; justify-content: space-between; }
  .nav-capability-links { position: static; width: 100%; padding: 2px 0 8px 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .nav-mobile-toggle { display: flex; }
  .site-header { grid-template-columns: 1fr auto auto; gap: 12px; }
  .hero { grid-template-columns: 1fr 1fr; gap: 12px; }
  .runtime-visual { width: 100%; transform: none; }
  .goal-chip { left: 3%; }
  .outcome-chip { right: 3%; }
  .gap-demo { width: 100%; }
  .cognition-runtime { width: 100%; }
  .cognition-upper { gap: 30px; padding-left: 22px; padding-right: 22px; }
  .mode-runtime { width: 100%; }
  .mode-panel { grid-template-columns: 250px minmax(0,1fr); }
  .mode-summary h3 { font-size: 22px; }
  .mode-summary { padding-left: 28px; padding-right: 28px; }
  .mode-summary > button { left: 28px; }
  .learning-runtime { width: 100%; }
  .learning-body { grid-template-columns: 1fr 1fr; }
  .difference-head { grid-template-columns: .2fr 1.55fr .72fr; }
  .difference-runtime { width: 98vw; grid-template-columns: 36% 64%; }
}

@media (max-width: 960px) {
  .learning-section { min-height: 1570px; padding: 76px 22px 58px; }
  .learning-head { display: block; }
  .learning-head h2 { margin-top: 24px; font-size: clamp(31px,5vw,44px); line-height: 1.15; }
  .learning-head > p:last-child { max-width: 620px; margin-top: 18px; font-size: 12px; }
  .learning-runtime { width: 100%; height: 1120px; margin-top: 34px; }
  .learning-status { height: 50px; padding: 0 16px; }
  .learning-status strong { font-size: 9px; }
  .learning-status > span { font-size: 8px; letter-spacing: .07em; }
  .learning-body { height: 896px; display: block; }
  .learning-loop-panel { height: 490px; border-right: 0; border-bottom: 1px solid rgba(37,31,56,.075); }
  .learning-loop-panel > header,.learning-evolution > header { height: 65px; padding: 12px 16px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }
  .learning-loop-panel > header strong,.learning-evolution > header strong { max-width: none; text-align: left; }
  .learning-orbit { left: 0; right: 0; top: 68px; width: 100%; height: 382px; }
  .learning-core { top: 57%; width: 106px; height: 106px; }
  .learning-core > svg { width: 18px; }
  .learning-core > small { width: 82px; font-size: 7px; }
  .loop-phase { width: 106px; min-height: 53px; padding: 9px; }
  .phase-execute { left: 27%; top: 84px; }
  .phase-observe { left: 73%; top: 84px; }
  .phase-extract { right: 1px; top: 56%; }
  .phase-attribute { bottom: 22px; }
  .phase-update { left: 1px; top: 56%; }
  .learning-evolution { height: 406px; }
  .goal-trajectory { margin: 14px 28px 0; height: 140px; }
  .goal-point { width: 68px; }
  .goal-point span { font-size: 10px; }
  .goal-learning-detail { margin: 82px 14px 0; min-height: 90px; padding: 13px; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 10px 12px; }
  .goal-learning-detail > div { grid-column: 1; grid-row: 1; }
  .goal-learning-detail > p { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; }
  .goal-learning-detail > small { grid-column: 2; grid-row: 1; }
  .learning-benefits { height: 174px; grid-template-columns: 1fr; }
  .learning-benefits > div { padding: 0 18px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 15px; border-right: 0; border-bottom: 1px solid rgba(37,31,56,.065); }
  .learning-benefits > div:last-child { border-bottom: 0; }
  .learning-benefits b { width: 76px; flex: 0 0 76px; font-size: 11px; }
  .learning-benefits span { margin-top: 0; font-size: 10px; }
  .learning-statement { margin-top: 28px; font-size: 19px; }
  .learning-statement span,.learning-statement strong { display: block; }
  .learning-statement strong { margin: 6px 0 0; }
  .learning-index { display: none; }
}

@media (max-width: 960px) {
  .site-header { height: 72px; padding: 0 20px; }
  .brand { font-size: 19px; }
  .brand-o { width: 24px; height: 27px; }
  .header-cta { padding: 8px 14px; }
  .hero { min-height: 100svh; padding: 116px 22px 54px; display: block; }
  .hero-copy { transform: none; }
  .eyebrow { margin-bottom: 18px; font-size: 9px; }
  h1 { font-size: clamp(46px, 12.5vw, 62px); line-height: 1.03; }
  .lede { margin-top: 23px; font-size: 14px; line-height: 1.75; }
  .desktop-break { display: none; }
  .english-line { margin-top: 12px; font-size: 8px; }
  .hero-actions { margin-top: 24px; }
  .button { min-height: 44px; padding: 0 18px; font-size: 12px; }
  .runtime-visual { width: min(100%,620px); height: 430px; min-height: 390px; margin: 24px auto 0; transform: none; }
  .runtime-label { left: 4%; top: 4%; }
  .runtime-stage { inset: -2% 0 62px; }
  .goal-chip { left: 0; top: 30%; transform: scale(.86); transform-origin: left; }
  .outcome-chip { right: 4%; transform: scale(.86) translateY(5px); }
  .runtime-visual.is-success .outcome-chip { transform: scale(.86) translateY(0); }
  .runtime-steps { left: 0; right: 0; }
  .runtime-steps li span { font-size: 10px; }
  .runtime-steps li small { display: none; }
  .scroll-cue, .hero-index { display: none; }
  .problem-section { min-height: 1120px; padding: 80px 22px 60px; }
  .problem-head { display: block; }
  .problem-head h2 { margin-top: 24px; font-size: 36px; letter-spacing: -.055em; }
  .problem-head > p:last-child { margin-top: 20px; font-size: 13px; }
  .gap-demo { width: 100%; margin-top: 42px; display: grid; grid-template-columns: 1fr; gap: 64px; }
  .execution-card, .outcome-card { height: 310px; padding-left: 22px; padding-right: 22px; transform: translateY(12px); }
  .gap-sign { position: absolute; top: 322px; left: 50%; transform: translateX(-50%); }
  .gap-sign span { display: none; }
  .equal-line { top: 26px; left: -120px; right: -120px; }
  .oryra-continuation { left: 7%; right: 7%; bottom: -75px; }
  .problem-statement { margin-top: 108px; font-size: 19px; }
  .problem-statement span, .problem-statement strong { display: block; }
  .problem-statement strong { margin-top: 6px; }
  .section-index { display: none; }
  .cognition-section { min-height: 1660px; padding: 76px 22px 58px; }
  .cognition-head { display: block; }
  .cognition-head h2 { margin-top: 24px; font-size: clamp(29px,4.5vw,42px); line-height: 1.22; letter-spacing: -.04em; }
  .cognition-head > p:last-child { margin-top: 20px; font-size: 12px; }
  .cognition-runtime { width: 100%; height: auto; margin-top: 34px; }
  .cognition-runtime-head { height: 68px; grid-template-columns: 1fr; padding: 12px 13px; gap: 7px; }
  .runtime-window-dots { display: none; }
  .runtime-goal { min-width: 0; }
  .runtime-goal span { display: none; }
  .runtime-goal strong { font-size: 11px; line-height: 1.4; white-space: normal; }
  .cognition-live { justify-self: start; font-size: 8px; }
  .work-runtime-stage { height: auto; display: block; }
  .work-guidance { height: 252px; padding: 18px; border-right: 0; border-bottom: 1px solid rgba(35,28,69,.07); }
  .work-cognition-orbit { width: 112px; height: 112px; margin-top: 14px; }
  .work-cognition-orbit::before { inset: 12px; }
  .work-cognition-orbit > div { width: 72px; height: 72px; }
  .work-cognition-orbit strong { font-size: 15px; }
  .work-guidance > p { margin-top: 10px; }
  .work-guidance-signal { width: min(280px,100%); }
  .work-path-canvas { height: 790px; }
  .work-path-canvas::after { content: ""; position: absolute; z-index: 1; top: 104px; bottom: 63px; left: 50%; width: 1px; background: linear-gradient(180deg,rgba(101,80,242,.1),rgba(101,80,242,.4),rgba(42,167,123,.25)); }
  .work-path-heading { left: 14px; right: 14px; }
  .work-path-heading strong { display: none; }
  .work-path-lines { display: none; }
  .work-finetask { top: 74px; left: 50%; width: 132px; transform: translateX(-50%); }
  .work-runtime-core { top: 184px; left: 50%; transform: translateX(-50%) scale(.92); }
  .cognition-section.is-building .work-runtime-core { transform: translateX(-50%) scale(1); }
  .work-action { width: 132px; }
  .action-one { top: 326px; left: 4%; }
  .action-two { top: 326px; left: auto; right: 4%; }
  .action-one::after,.action-two::before { content: ""; position: absolute; top: 50%; width: 28px; height: 1px; background: linear-gradient(90deg,#7761df2e,#7761df75); opacity: .2; transition: opacity .45s ease; }
  .action-one::after { left: 100%; }
  .action-two::before { right: 100%; transform: scaleX(-1); }
  .action-one.is-active::after,.action-two.is-active::before { opacity: .72; }
  .action-three { top: 450px; left: 50%; transform: translateX(-50%) translateY(7px) scale(.97); }
  .action-three.is-active { transform: translateX(-50%) translateY(0) scale(1); }
  .action-four { top: 568px; left: 50%; transform: translateX(-50%) translateY(7px) scale(.97); }
  .action-four.is-active { transform: translateX(-50%) translateY(0) scale(1); }
  .work-result { top: 686px; right: auto; left: 50%; width: 132px; transform: translateX(-50%) translateY(7px); }
  .cognition-section.is-result .work-result { transform: translateX(-50%) translateY(0); }
  .runtime-difference { height: 112px; padding: 12px 15px; grid-template-columns: 1fr 1fr; gap: 12px; }
  .runtime-difference > i { display: none; }
  .runtime-difference p,.runtime-difference p:last-child { display: grid; justify-content: start; gap: 5px; }
  .runtime-difference p:last-child { padding-left: 12px; border-left: 1px solid rgba(35,28,69,.07); }
  .runtime-difference p small { line-height: 1.4; }
  .cognition-statement { margin-top: 28px; font-size: 19px; }
  .cognition-statement span, .cognition-statement strong { display: block; }
  .cognition-statement strong { margin: 6px 0 0; }
  .cognition-index { display: none; }
  .how-section { min-height: 1460px; padding: 76px 22px 58px; }
  .how-head { display: block; }
  .how-head h2 { margin-top: 24px; font-size: 31px; line-height: 1.15; }
  .mobile-title-break { display: block; }
  .how-head > p:last-child { margin-top: 18px; font-size: 12px; }
  .mode-tabs { width: 100%; height: 50px; margin-top: 30px; }
  .mode-tabs button { padding: 0 8px; gap: 7px; }
  .mode-tabs button span { font-size: 14px; }
  .mode-runtime { width: 100%; height: 1010px; margin-top: 14px; }
  .mode-panels { height: 100%; }
  .mode-panel { grid-template-columns: 1fr; grid-template-rows: 285px 1fr; }
  .mode-summary { padding: 32px 24px 25px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .mode-summary h3 { margin-top: 17px; font-size: 24px; }
  .mode-summary > p { margin-top: 15px; font-size: 10px; }
  .mode-principles { margin-top: 16px; }
  .mode-summary > button { left: 24px; bottom: 22px; }
  .discussion-map svg { display: block; }
  .topic-root { left: 50%; top: 35px; width: 190px; transform: translateX(-50%); }
  .topic-node { width: min(42%,180px); }
  .node-users { left: 5%; top: 170px; }.node-tech { left: auto; right: 5%; top: 170px; }.node-model { left: 5%; top: 252px; }.node-channel { left: auto; right: 5%; top: 252px; }
  .depth-one { left: 50%; top: 382px; transform: translateX(-50%); }.depth-two { left: 50%; right: auto; top: 482px; transform: translateX(-50%); }
  .breadth-caption { top: 143px; right: 50%; transform: translateX(50%); }.depth-caption { right: 50%; bottom: 80px; transform: translateX(50%); }
  .work-context { left: 5%; right: 5%; top: 30px; width: auto; }
  .work-engine { left: 50%; top: 135px; transform: translateX(-50%); }
  .work-path { left: 6%; right: 6%; top: 340px; grid-template-columns: 1fr 1fr; gap: 45px 10px; }
  .work-path::before,.work-flow { display: none; }
  .work-path div { padding: 13px 6px; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; background: rgba(255,255,255,.02); }
  .work-path div b::after { display: none; }
  .work-outcome { left: 50%; right: auto; top: auto; bottom: 45px; width: 170px; transform: translateX(-50%); }
  .dag-goal { top: 22px; grid-template-columns: 1fr auto; }
  .dag-goal span { display: none; }
  .dag-goal small { text-align: right; }
  .project-dag { top: 92px; bottom: 92px; }
  .dag-node { width: min(43%,156px); min-height: 76px; }
  .dag-root { left: 50%; top: 0; transform: translateX(-50%); }
  .dag-branch-a { left: 0; top: 90px; }
  .dag-branch-b { left: auto; right: 0; top: 90px; }
  .dag-merge { left: 50%; top: 205px; transform: translateX(-50%); }
  .dag-branch-c { left: 0; top: 320px; }
  .dag-branch-d { left: auto; right: 0; top: 320px; }
  .dag-final { left: 50%; right: auto; top: 435px; transform: translateX(-50%); }
  .dag-caption { display: none; }
  .runtime-dispatch { bottom: 30px; grid-template-columns: 1fr; gap: 6px; }.runtime-dispatch small { display: none; }
  .how-statement { margin-top: 28px; font-size: 19px; }.how-statement span,.how-statement strong { display: block; }.how-statement strong { margin: 6px 0 0; }
  .how-index { display: none; }
  .problem-statement strong,.cognition-statement strong,.how-statement strong,.learning-statement strong { text-wrap: balance; }
}

@media (max-width: 780px) {
  .difference-section { min-height: 1540px; padding: 76px 22px 58px; }
  .difference-head { display: block; }
  .difference-head h2 { margin-top: 24px; font-size: 31px; line-height: 1.15; }
  .difference-head > p:last-child { margin-top: 18px; font-size: 12px; }
  .difference-runtime { width: 100%; height: 1080px; margin-top: 34px; display: block; }
  .static-skill { height: 410px; padding-left: 24px; padding-right: 24px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.075); }
  .static-skill > header { height: 52px; }
  .skill-lock { width: 82px; height: 82px; margin-top: 22px; }
  .static-skill h3 { margin-top: 14px; }
  .static-skill > p { margin-top: 7px; }
  .fixed-flow { margin-top: 18px; }
  .skill-limit { left: 24px; right: 24px; bottom: 20px; }
  .adaptive-runtime { height: 670px; }
  .adaptive-runtime > header { height: 78px; padding: 0 14px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 9px; }
  .runtime-goal-switch { align-self: flex-end; margin-top: -32px; }
  .adaptive-canvas { height: calc(100% - 78px); }
  .runtime-network-desktop { display: none; }
  .runtime-network-mobile { display: block; height: 540px; }
  .active-goal { left: 4%; right: 4%; top: 13px; width: auto; }
  .adaptive-core { left: 50%; top: 50px; width: 105px; height: 105px; transform: translateX(-50%); }
  .runtime-action { width: 116px; opacity: 0; visibility: hidden; }
  .goal-a .goal-a-node,.goal-b .goal-b-node { opacity: 1; visibility: visible; }
  .action-market,.action-user { left: 4%; top: 190px; bottom: auto; }
  .action-icp,.action-position { left: auto; right: 4%; top: 190px; bottom: auto; }
  .action-strategy,.action-sales { left: 50%; top: 315px; bottom: auto; transform: translateX(-50%); }
  .goal-a .action-strategy,.goal-b .action-sales { transform: translateX(-50%) translateY(-2px); }
  .runtime-outcome { left: 50%; right: auto; top: 416px; width: 145px; transform: translateX(-50%); }
  .feedback-caption { left: 8%; right: 8%; bottom: 26px; }
  .difference-statement { margin-top: 28px; font-size: 19px; }
  .difference-statement span,.difference-statement strong { display: block; }
  .difference-statement strong { margin: 6px 0 0; }
  .difference-index { display: none; }
}

@media (max-width: 470px) {
  .hero-actions { align-items: stretch; gap: 8px; }
  .button { padding: 0 15px; }
  .button svg { display: none; }
  .release-dialog { padding: 42px 26px 28px; }
}

.context-section { position: relative; padding: 92px clamp(28px,6.3vw,114px) 58px; background: #f7f7f4; color: var(--ink); }
.context-head { width: min(1200px,100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.65fr) minmax(250px,.78fr); gap: 20px 72px; align-items: end; }
.context-kicker { grid-column: 1 / -1; margin: 0; color: var(--violet); font-size: 12px; font-weight: 550; letter-spacing: .14em; }
.context-kicker span { margin-left: 16px; color: #777782; }
.context-head h2 { max-width: 720px; margin: 0; font-size: clamp(38px,3.25vw,48px); font-weight: 620; letter-spacing: -.045em; line-height: 1.16; }
.context-head h2 span { color: var(--violet); }
.context-intro { max-width: 390px; margin: 0 0 3px; color: #6f707a; font-size: 14px; line-height: 1.8; text-wrap: pretty; }
.context-memory-demo { width: min(1200px,100%); margin: 38px auto 0; overflow: hidden; border: 1px solid #272830; border-radius: 18px; color: #eeecf3; background: #121318; box-shadow: 0 28px 72px -44px #251d3b99; }
.context-memory-toolbar { position: relative; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 58px; padding: 0 18px 0 22px; border-bottom: 1px solid #ffffff0e; background: #15161b; }
.context-current-action { display: flex; align-items: center; gap: 11px; }
.context-live-dot { width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: #9c82ef; box-shadow: 0 0 0 5px #9c82ef12; }
.context-current-action p { display: flex; align-items: baseline; gap: 13px; margin: 0; }
.context-current-action small { color: #777380; font-size: 9px; letter-spacing: .09em; }
.context-current-action strong { font-size: 12px; font-weight: 550; }
.context-controls { display: flex; align-items: center; gap: 10px; }
.context-switch { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: #ffffff08; }
.context-switch button { padding: 7px 13px; border: 0; border-radius: 6px; color: #898491; background: transparent; font-size: 11px; cursor: pointer; transition: color .25s,background .25s,box-shadow .25s; }
.context-switch button[aria-pressed="true"] { color: #d1c6f8; background: #9073de1b; box-shadow: inset 0 0 0 1px #9c82e625; }
.context-play { display: grid; place-items: center; width: 32px; height: 32px; padding: 7px; border: 1px solid #ffffff12; border-radius: 50%; color: #898592; background: transparent; cursor: pointer; }
.context-play svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.context-controls button:focus-visible { outline: 2px solid #a78eef; outline-offset: 3px; }
.context-memory-stage { position: relative; display: grid; grid-template-columns: minmax(0,2.08fr) minmax(275px,.92fr); min-height: 500px; }
.context-links { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; pointer-events: none; }
.context-link-track { stroke: #a68ee4; stroke-width: 1; opacity: 0; transition: opacity .4s; }
.context-links .is-linked .context-link-track { opacity: .42; }
.context-link-pulse { stroke: #b59aff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 7 93; stroke-dashoffset: 8; opacity: 0; filter: drop-shadow(0 0 3px #9b7cec); }
.context-links .is-transferring .context-link-pulse { opacity: 1; animation: context-link-travel 1.15s linear infinite; animation-play-state: paused; }
.context-trunk-track { stroke: #9a82d8; stroke-width: 1; opacity: 0; transition: opacity .4s; }
.context-trunk-pulse { stroke: #b59aff; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 9 91; opacity: 0; filter: drop-shadow(0 0 3px #9b7cec); }
.context-links .context-link-trunk.is-linked .context-trunk-track { opacity: .38; }
.context-links .context-link-trunk.is-transferring .context-trunk-pulse { opacity: .9; animation: context-link-travel 1.3s linear infinite; animation-play-state: paused; }
.context-section.is-playing .is-transferring .context-link-pulse { animation-play-state: running; }
.context-section.is-playing .context-link-trunk.is-transferring .context-trunk-pulse { animation-play-state: running; }
@keyframes context-link-travel { to { stroke-dashoffset: -92; } }
.context-memory-field { position: relative; z-index: 1; min-width: 0; border-right: 1px solid #ffffff0d; background: radial-gradient(circle at 48% 48%,#775bc317,transparent 43%),linear-gradient(#ffffff01,#ffffff00); }
.context-memory-field > header { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 0 24px; border-bottom: 1px solid #ffffff0a; }
.context-memory-field > header > div { display: flex; align-items: baseline; gap: 13px; }
.context-memory-field > header span { color: #9182bf; font-size: 8px; letter-spacing: .1em; }
.context-memory-field > header h3 { margin: 0; font-size: 12px; font-weight: 560; }
.context-memory-field > header p { display: flex; align-items: center; gap: 7px; margin: 0; color: #75717d; font-size: 9px; }
.context-memory-field > header p i { width: 4px; height: 4px; border-radius: 50%; background: #67ae90; box-shadow: 0 0 0 4px #67ae900e; }
.context-memory-canvas { position: relative; height: 400px; overflow: hidden; }
.context-memory-canvas::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#ffffff0d .7px,transparent .7px); background-size: 22px 22px; mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.context-memory-river { position: absolute; inset: 17px 10px 8px; width: calc(100% - 20px); height: calc(100% - 25px); fill: none; stroke: #837496; stroke-width: .8; opacity: .28; }
.context-memory-river path:nth-child(2) { stroke: #678d81; opacity: .65; }
.context-memory-river path:nth-child(3) { stroke-dasharray: 3 6; opacity: .55; }
.context-scan-line { position: absolute; z-index: 3; top: 10px; bottom: 10px; left: -76px; width: 76px; opacity: 0; background: linear-gradient(90deg,transparent,#a78cf20b 45%,#b59aff2e 50%,transparent); }
.context-scan-line::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(transparent,#b59aff99 25%,#b59aff99 75%,transparent); box-shadow: 0 0 16px #9f82ef66; }
.context-scan-line span { position: absolute; left: calc(50% + 7px); top: 13px; color: #a58ddf; font-size: 6px; letter-spacing: .08em; white-space: nowrap; }
.context-memory-demo.is-scanning .context-scan-line { animation: context-memory-scan 4.9s cubic-bezier(.22,.65,.35,1) both; animation-play-state: paused; }
.context-section.is-playing .context-memory-demo.is-scanning .context-scan-line { animation-play-state: running; }
@keyframes context-memory-scan { 0% { left: -76px; opacity: 0; } 8% { opacity: .78; } 88% { left: 100%; opacity: .9; } 100% { left: 100%; opacity: 0; } }
.context-memory-event { position: absolute; z-index: 2; width: 126px; min-height: 57px; padding: 9px 10px 8px 13px; border: 1px solid #ffffff0d; border-radius: 8px; background: #15161bd9; opacity: .48; transition: opacity .45s,border-color .45s,background .45s,box-shadow .45s,transform .45s; }
.context-memory-event > i { position: absolute; left: -3px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: #716d78; transform: translateY(-50%); transition: background .4s,box-shadow .4s; }
.context-memory-event small,.context-memory-event strong,.context-memory-event span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-memory-event small { color: #736d7b; font-size: 6px; letter-spacing: .07em; }
.context-memory-event strong { margin-top: 6px; color: #d5d1da; font-size: 10px; font-weight: 540; }
.context-memory-event span { margin-top: 3px; color: #77727d; font-size: 7px; }
.context-memory-event.is-relevant { opacity: 1; border-color: #9274df70; background: #1e1929e8; box-shadow: 0 10px 24px -18px #8f6cdf; transform: translateY(-2px); }
.context-memory-event.is-relevant > i { background: #aa8df4; box-shadow: 0 0 0 5px #aa8df413,0 0 10px #9676ea; }
.context-memory-event.is-reading { border-color: #b39aff; box-shadow: 0 0 0 3px #a88cf211,0 0 22px #8d6bd533; }
.cm-dialogue { left: 3%; top: 10%; }.cm-reality { left: 26%; top: 3%; }.cm-market { left: 52%; top: 10%; }.cm-audience { right: 14%; top: 19%; }
.cm-budget { left: 8%; top: 59%; }.cm-plan { left: 31%; top: 72%; }.cm-process { left: 58%; top: 45%; }.cm-feedback { right: 14%; top: 82%; }
.cm-criteria { left: 38%; top: 35%; }.cm-delivery { left: 3%; top: 80%; }.cm-new { right: 14%; top: 50%; opacity: 0; transform: translateX(12px); }
.context-memory-demo[data-context-phase="ready"] .cm-new { opacity: .76; border-color: #4f8f7350; background: #17231e; transform: none; }
.context-memory-demo[data-context-phase="ready"] .cm-new > i { background: #67b08f; box-shadow: 0 0 0 5px #67b08f12; }
.context-memory-field > footer { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 20px; border-top: 1px solid #ffffff0a; color: #706c78; font-size: 7px; letter-spacing: .08em; }
.context-memory-field > footer > div { position: relative; display: flex; align-items: center; justify-content: space-between; flex: 1; height: 12px; }
.context-memory-field > footer > div::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: linear-gradient(90deg,#57545e,#8c77c5); }
.context-memory-field > footer i { position: relative; width: 2px; height: 6px; background: #77717f; }
.context-memory-field > footer b { position: relative; width: 5px; height: 5px; border-radius: 50%; background: #72b193; box-shadow: 0 0 0 4px #72b1930e; }
.context-memory-field > footer strong { margin-left: 7px; color: #8d78c3; font-weight: 500; }
.context-assembly { position: relative; z-index: 3; min-width: 0; padding: 24px 22px 20px 30px; background: linear-gradient(90deg,#8c6bd508,transparent 16%),#14151a; }
.context-aperture { position: absolute; z-index: 6; left: -15px; top: 50%; display: grid; place-items: center; width: 30px; height: 118px; border: 1px solid #9676df45; border-radius: 999px; background: #17141e; box-shadow: 0 0 28px #8463d424; transform: translateY(-50%); }
.context-aperture i { width: 5px; height: 5px; border-radius: 50%; background: #a98df3; box-shadow: 0 0 0 5px #a98df313; }
.context-aperture span { color: #76668f; font-size: 5px; line-height: 1.55; letter-spacing: .07em; text-align: center; writing-mode: vertical-rl; }
.context-memory-demo[data-context-phase="mount"] .context-aperture,.context-memory-demo[data-context-phase="ready"] .context-aperture { border-color: #aa8df56e; box-shadow: 0 0 34px #8765dd3d; }
.context-assembly > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #8d78c1; font-size: 8px; letter-spacing: .08em; }
.context-assembly > header b { color: #77727e; font-size: 8px; font-weight: 450; letter-spacing: 0; }
.context-runtime-target { margin: 20px 0 16px; padding-bottom: 16px; border-bottom: 1px solid #ffffff0d; }
.context-runtime-target small { color: #74707c; font-size: 7px; letter-spacing: .08em; }
.context-runtime-target h3 { margin: 8px 0 6px; font-size: 15px; line-height: 1.45; font-weight: 580; }
.context-runtime-target p { margin: 0; color: #85808d; font-size: 9px; line-height: 1.6; }
.context-sources { list-style: none; display: grid; gap: 7px; margin: 0; padding: 0; }
.context-sources li { min-height: 76px; padding: 10px 11px; border: 1px solid #ffffff0d; border-radius: 8px; background: #ffffff02; opacity: .18; transform: translateX(9px); transition: opacity .5s,transform .5s,border-color .5s,background .5s; }
.context-sources li.is-mounted { opacity: 1; transform: none; border-color: #8870bd43; background: #7e64bd09; }
.context-sources li > div { display: flex; justify-content: space-between; gap: 8px; color: #9b83d0; font-size: 7px; }
.context-sources strong { display: block; margin: 7px 0 3px; color: #ddd9e4; font-size: 10px; font-weight: 550; }
.context-sources p { margin: 0; color: #797480; font-size: 8px; line-height: 1.45; }
.context-action-status { display: flex; align-items: center; gap: 7px; margin-top: 14px; color: #a693d1; font-size: 8px; }
.context-action-status > span { width: 4px; height: 4px; border-radius: 50%; background: #a287e9; box-shadow: 0 0 0 4px #a287e90e; }
.context-action-status b { font-weight: 500; }.context-action-status small { margin-left: auto; color: #74707b; }
.context-memory-demo[data-context-phase="ready"] .context-action-status { color: #70ad92; }
.context-memory-demo[data-context-phase="ready"] .context-action-status > span { background: #65ad8d; }
.context-source-note { display: flex; align-items: flex-start; gap: 6px; margin: 14px 0 0; color: #73717b; font-size: 7px; line-height: 1.55; }
.context-source-note svg { width: 12px; height: 13px; flex-shrink: 0; fill: none; stroke: #5ea686; stroke-width: 1.4; }
.context-principles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: min(1200px,100%); margin: 24px auto 0; border-top: 1px solid #dedee2; }
.context-principles > div { padding: 20px 24px 0; border-right: 1px solid #dedee2; }
.context-principles > div:first-child { padding-left: 0; }.context-principles > div:last-child { border-right: 0; }
.context-principles h3 { margin: 0; font-size: 15px; font-weight: 600; }
.context-principles p { margin: 6px 0 0; color: #777782; font-size: 13px; line-height: 1.65; }
@media (max-width: 960px) { .context-memory-stage { display: block; } .context-memory-field { border-right: 0; border-bottom: 1px solid #ffffff0d; } .context-assembly { padding: 26px 28px; } .context-aperture,.context-links { display: none; } .context-sources { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 700px) { .context-section { padding: 70px 22px 46px; } .context-head { display: block; } .context-head h2 { margin: 24px 0 18px; font-size: 36px; } .context-intro { font-size: 15px; } .context-desktop-break { display: none; } .context-memory-demo { margin-top: 28px; } .context-memory-toolbar { align-items: flex-start; padding: 13px 14px; } .context-current-action p { display: block; } .context-current-action strong { display: block; margin-top: 4px; } .context-switch button { padding: 7px 9px; } .context-memory-field > header { padding: 0 14px; } .context-memory-field > header p { display: none; } .context-memory-canvas { height: 420px; } .context-memory-event { width: 116px; } .cm-dialogue { left: 3%; }.cm-reality { left: 36%; }.cm-market { left: 68%; }.cm-audience { right: 4%; top: 24%; }.cm-budget { left: 3%; top: 36%; }.cm-criteria { left: 37%; top: 31%; }.cm-process { left: 68%; top: 48%; }.cm-plan { left: 3%; top: 64%; }.cm-feedback { right: 4%; top: 72%; }.cm-delivery { left: 36%; top: 79%; }.cm-new { right: 4%; top: 88%; } .context-memory-field > footer { padding: 0 12px; } .context-assembly { padding: 24px 16px; } .context-sources { grid-template-columns: 1fr; } .context-principles { grid-template-columns: 1fr; margin-top: 22px; } .context-principles > div { padding: 16px 0; border-right: 0; border-bottom: 1px solid #dedee2; } .context-principles > div:last-child { border-bottom: 0; } }

.project-live-section { padding: 92px clamp(28px,6.3vw,114px) 58px; color: #f0eff6; background: radial-gradient(ellipse at 50% 40%,#2d24401f,transparent 58%),#111216; }
.project-live-head { width: min(1200px,100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.65fr) minmax(250px,.78fr); gap: 20px 72px; align-items: end; }
.project-live-kicker { grid-column: 1 / -1; margin: 0; color: #ad9cff; font-size: 12px; font-weight: 550; letter-spacing: .14em; }
.project-live-kicker span { margin-left: 16px; color: #8d8997; }
.project-live-head h2 { max-width: 720px; margin: 0; font-size: clamp(38px,3.25vw,48px); line-height: 1.16; letter-spacing: -.045em; font-weight: 620; }
.project-live-head h2 span { color: #a894ff; }
.project-live-head > p:last-child { max-width: 390px; margin: 0 0 3px; color: #9d99a7; font-size: 14px; line-height: 1.8; }
.project-live-workspace { width: min(1200px,100%); margin: 38px auto 0; border: 1px solid #ffffff17; border-radius: 18px; background: #15161b; box-shadow: 0 28px 70px -42px #000; overflow: hidden; }
.project-live-goal { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 55px; padding: 0 22px; border-bottom: 1px solid #ffffff0e; }
.project-live-goal > div { display: flex; align-items: center; gap: 17px; }
.project-live-goal span { color: #8d8998; font-size: 11px; letter-spacing: .09em; }
.project-live-goal h3 { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 560; }
.project-live-example { white-space: nowrap; }
.project-live-position { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 22px; border-bottom: 1px solid #ffffff0b; color: #8f8a9a; font-size: 12px; }
.project-live-position strong { color: #b7a4ff; font-size: 13px; font-weight: 550; }
.project-live-position > i { width: 1px; height: 11px; margin: 0 7px; background: #ffffff16; }
.project-live-position b { color: #a5bdb3; font-size: 13px; font-weight: 450; }
.project-live-body { display: grid; grid-template-columns: minmax(0,1fr) 252px; min-height: 464px; }
.project-live-graph { position: relative; min-width: 0; padding: 20px 24px 14px 166px; background: radial-gradient(circle at 84px 50%,#7558c80e,transparent 146px); }
.project-live-graph:focus-visible { outline: 2px solid #a88bd8; outline-offset: -3px; }
.pl-graph-hint { display: none; }
.pl-orchestrator { position: absolute; z-index: 3; left: 28px; top: 50%; display: grid; place-content: center; width: 108px; height: 108px; border: 1px solid #9e85e653; border-radius: 50%; background: radial-gradient(circle,#292233 0 45%,#17171d 72%); color: #a894ed; text-align: center; transform: translateY(-50%); box-shadow: 0 0 44px #7654c819; }
.pl-orchestrator::before,.pl-orchestrator::after { content: ""; position: absolute; border: 1px solid #957cdf22; border-radius: 50%; }
.pl-orchestrator::before { inset: -13px; }
.pl-orchestrator::after { inset: -28px; border-style: dashed; animation: pl-orbit 18s linear infinite; }
.pl-orchestrator span { font-size: 9px; letter-spacing: .12em; }
.pl-orchestrator strong { margin-top: 5px; color: #e8e1f3; font-size: 12px; line-height: 1.35; font-weight: 560; letter-spacing: .04em; }
.pl-orchestrator i { position: absolute; right: -3px; top: 51px; width: 7px; height: 7px; border-radius: 50%; background: #9b7ff0; box-shadow: 0 0 0 5px #9b7ff012; }
@keyframes pl-orbit { to { transform: rotate(360deg); } }
.project-live-edges { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; fill: none; pointer-events: none; }
.pl-edge-base { stroke: #81788e; stroke-width: 1; opacity: .42; marker-end: url(#project-live-arrow); }
.pl-edge-flow { stroke: #a790f5; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 8 92; opacity: 0; }
.pl-edge-new { opacity: 0; }
.project-live-section.is-playing .pl-edge-flow { opacity: .72; animation: pl-flow 1.55s linear infinite; }
@keyframes pl-flow { to { stroke-dashoffset: -100; } }
.project-live-group { position: relative; z-index: 2; padding: 11px 0 13px; border-bottom: 1px solid #ffffff0b; transition: opacity .5s; }
.project-live-group:first-of-type { padding-top: 0; }
.project-live-group:last-of-type { border-bottom: 0; }
.project-live-group > header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.project-live-group > header > div { display: flex; align-items: baseline; gap: 11px; }
.project-live-group header span { color: #807b89; font-size: 11px; letter-spacing: .06em; }
.project-live-group h4 { margin: 0; font-size: 13px; font-weight: 560; }
.project-live-group header > b { color: #8b8695; font-size: 11px; font-weight: 400; }
.pl-node-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); column-gap: 22px; row-gap: 10px; }
.pl-node { position: relative; z-index: 2; min-width: 0; min-height: 56px; padding: 8px 10px; border: 1px solid #ffffff16; border-radius: 7px; background: #ffffff02; transition: opacity .55s,border-color .55s,background .55s,box-shadow .55s; }
.pl-node > small { display: flex; justify-content: space-between; color: #898392; font-size: 10px; line-height: 1; }
.pl-node small b { color: #b4a0ef; font-size: 10px; font-weight: 450; }
.pl-node h5 { margin: 6px 0 4px; font-size: 12px; line-height: 1.3; font-weight: 570; white-space: nowrap; letter-spacing: -.01em; }
.pl-node > p { display: flex; align-items: center; gap: 6px; margin: 0; color: #8e8997; font-size: 11px; line-height: 1.35; white-space: nowrap; }
.pl-node p > i { width: 4px; height: 4px; border-radius: 50%; background: #8f8998; }
.pl-node.pl-done { border-color: #53766855; background: #395c4f0b; }
.pl-node.pl-done > p { color: #82ac9b; }
.pl-node.pl-done p > i { background: #67ad91; }
.pl-node.pl-running { border-color: #8b6fc266; background: #7252ae10; }
.pl-node.pl-running > p { color: #b09bea; }
.pl-node.pl-running p > i { background: #9a7fe9; box-shadow: 0 0 0 3px #9a7fe913; }
.pl-node.pl-waiting { opacity: .58; }
.pl-added { display: none; opacity: 0; visibility: hidden; }
.pl-market-note { display: none; }
.pl-graph-legend { display: flex; justify-content: center; gap: 18px; padding-top: 13px; color: #837e8c; font-size: 10px; }
.pl-graph-legend span { display: flex; align-items: center; gap: 6px; }
.pl-graph-legend i { width: 5px; height: 5px; border-radius: 50%; background: #64a98e; }
.pl-graph-legend span:nth-child(2) i { background: #9a7fe9; }
.pl-graph-legend span:nth-child(3) i { background: #a78964; }
.project-live-judgment { position: relative; padding: 24px 20px; border-left: 1px solid #ffffff0e; background: #ffffff02; }
.pl-judgment-heading { display: flex; align-items: center; gap: 9px; color: #aa94ef; font-size: 11px; letter-spacing: .08em; }
.pl-judgment-heading svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.pl-evidence { margin: 22px 0 23px; padding: 12px 0; border-top: 1px solid #ffffff0d; border-bottom: 1px solid #ffffff0d; }
.pl-evidence > span,.pl-judgment-copy > span,.pl-next-action > span { color: #8e8998; font-size: 11px; }
.pl-evidence > p { margin: 7px 0 0; color: #c1bcc9; font-size: 13px; line-height: 1.65; }
.pl-judgment-copy h4 { margin: 8px 0; font-size: 16px; line-height: 1.45; font-weight: 580; }
.pl-judgment-copy p,.pl-next-action p { margin: 0; color: #aaa5b2; font-size: 13px; line-height: 1.7; }
.pl-next-action { margin-top: 20px; padding-top: 18px; border-top: 1px solid #ffffff0d; }
.pl-next-action p { margin-top: 7px; }
.pl-preserved { display: flex; gap: 8px; align-items: flex-start; margin: 24px 0 0; color: #839d92; font-size: 11px; line-height: 1.55; }
.pl-preserved svg { width: 14px; height: 14px; fill: none; stroke: #6ba58e; stroke-width: 1.4; }
.project-live-playback { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 52px; padding: 0 18px; border-top: 1px solid #ffffff0e; }
.pl-scene-buttons { display: flex; gap: 3px; }
.pl-scene-buttons button { padding: 7px 11px; border: 0; border-radius: 6px; color: #8f8998; background: transparent; font-size: 12px; cursor: pointer; }
.pl-scene-buttons button[aria-pressed="true"] { color: #c8bbff; background: #9d81ed12; }
.pl-playback-controls { display: flex; gap: 7px; }
.pl-playback-controls button { display: grid; place-items: center; width: 31px; height: 31px; padding: 7px; border: 1px solid #ffffff15; border-radius: 50%; color: #938d9d; background: transparent; cursor: pointer; }
.pl-playback-controls svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.project-live-section button:focus-visible { outline: 2px solid #a88bd8; outline-offset: 3px; }
.project-live-principles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: min(1200px,100%); margin: 24px auto 0; border-top: 1px solid #ffffff12; }
.project-live-principles > div { padding: 20px 24px 0; border-right: 1px solid #ffffff10; }
.project-live-principles > div:first-child { padding-left: 0; }
.project-live-principles > div:last-child { border-right: 0; }
.project-live-principles h3 { margin: 0; font-size: 15px; font-weight: 590; }
.project-live-principles p { margin: 6px 0 0; color: #928d9b; font-size: 13px; line-height: 1.65; }
.project-live-section[data-project-scene="2"] .pl-market,.project-live-section[data-project-scene="3"] .pl-market { opacity: 1; }
.project-live-section[data-project-scene="2"] .pl-market header > b,.project-live-section[data-project-scene="3"] .pl-market header > b { color: #bda0f6; }
.project-live-section[data-project-scene="3"] .pl-added { display: block; opacity: 1; visibility: visible; }
.project-live-section[data-project-scene="3"] .pl-market-note { opacity: 0; }
.project-live-section[data-project-scene="2"] #pl-scale,.project-live-section[data-project-scene="3"] #pl-scale { border-color: #756040; background: #29261f; }
.project-live-section[data-project-scene="2"] #pl-scale p,.project-live-section[data-project-scene="3"] #pl-scale p { color: #d0b286; }
.project-live-section[data-project-scene="2"] #pl-price,.project-live-section[data-project-scene="3"] #pl-price { border-color: #8e70c8; background: #292234; box-shadow: 0 0 0 3px #8e70c80b; }
.project-live-section[data-project-scene="3"] .pl-edge-new { opacity: 1; }
.project-live-section[data-project-scene="2"] .pl-edge-gate .pl-edge-base,.project-live-section[data-project-scene="3"] .pl-edge-gate .pl-edge-base { stroke: #b09168; stroke-dasharray: 4 5; }
@media (max-width: 1050px) { .project-live-body { grid-template-columns: 1fr; } .project-live-judgment { display: grid; grid-template-columns: .7fr 1fr 1fr; gap: 22px; border-left: 0; border-top: 1px solid #ffffff0e; } .pl-evidence { margin: 0; } .pl-next-action { margin: 0; padding: 0; border: 0; } .pl-preserved { grid-column: 1 / -1; margin-top: 0; } }
@media (max-width: 700px) { .project-live-section { padding: 70px 22px 46px; } .project-live-head { display: block; } .project-live-head h2 { margin: 24px 0 18px; font-size: 34px; } .project-live-head > p:last-child { font-size: 15px; } .project-live-workspace { margin-top: 28px; } .project-live-goal { align-items: flex-start; padding: 14px 16px; } .project-live-goal > div { display: block; } .project-live-goal h3 { margin-top: 5px; } .project-live-position { padding: 10px 16px; flex-wrap: wrap; } .project-live-position > i { display: none; } .project-live-graph { overflow-x: auto; padding: 20px 18px 20px 150px; } .project-live-graph > * { min-width: 650px; } .project-live-edges { min-width: 650px; } .pl-orchestrator { min-width: 96px !important; left: 26px; width: 96px; height: 96px; } .pl-graph-hint { display: block; min-width: 0 !important; margin: 0 0 14px; color: #86818f; font-size: 11px; } .project-live-judgment { display: block; padding: 24px 20px; } .pl-evidence { margin: 18px 0; } .pl-next-action { margin-top: 18px; padding-top: 18px; border-top: 1px solid #ffffff0d; } .pl-scene-buttons { overflow-x: auto; } .pl-scene-buttons button { white-space: nowrap; } .project-live-principles { grid-template-columns: 1fr; } .project-live-principles > div { padding: 16px 0; border-right: 0; border-bottom: 1px solid #ffffff10; } }
@media (max-width: 700px) { .project-live-playback { min-height: 92px; padding: 9px 12px; display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; } .pl-scene-buttons { grid-column: 1 / -1; width: 100%; justify-content: space-between; overflow: visible; } .pl-scene-buttons button { padding: 6px 7px; font-size: 11px; } .pl-playback-controls { grid-column: 2; justify-self: end; } }

.runtime-handoff-section { padding: 88px clamp(28px,6.3vw,114px) 58px; color: var(--ink); background: radial-gradient(ellipse at 60% 54%,#8168d10b,transparent 46%),#f7f7f4; }
.runtime-handoff-head { width: min(1200px,100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.65fr) minmax(250px,.78fr); gap: 20px 72px; align-items: end; }
.runtime-handoff-kicker { grid-column: 1 / -1; margin: 0; color: #7158c9; font-size: 12px; font-weight: 550; letter-spacing: .14em; }
.runtime-handoff-kicker span { margin-left: 16px; color: #777782; }
.runtime-handoff-head h2 { max-width: 720px; margin: 0; font-size: clamp(38px,3.25vw,48px); line-height: 1.16; letter-spacing: -.045em; font-weight: 620; }
.runtime-handoff-head h2 span { color: var(--violet); }
.runtime-handoff-head > p:last-child { max-width: 390px; margin: 0 0 3px; color: #6f707a; font-size: 14px; line-height: 1.8; }
.runtime-handoff-stage { position: relative; width: min(1200px,100%); margin: 32px auto 0; overflow: hidden; border: 1px solid #292a31; border-radius: 18px; color: #eeecf4; background: radial-gradient(circle at 68% 38%,#7452c414,transparent 34%),#121318; box-shadow: 0 30px 74px -46px #22193380; }
.rh-project-bar { position: relative; z-index: 5; display: grid; grid-template-columns: 190px minmax(0,1fr) auto; align-items: center; gap: 22px; min-height: 54px; padding: 0 62px 0 20px; border-bottom: 1px solid #ffffff10; background: #15161bde; }
.rh-project-bar > div { display: flex; align-items: center; gap: 8px; }
.rh-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #75c6a4; box-shadow: 0 0 0 5px #75c6a412; animation: rh-heartbeat 2.2s ease-in-out infinite; }
.rh-project-bar b { color: #bcaaff; font-size: 10px; letter-spacing: .08em; }
.rh-project-bar small { color: #777481; font-size: 9px; }
.rh-project-bar p { margin: 0; color: #d8d4df; font-size: 12px; }
.rh-project-bar p span { margin-right: 14px; color: #777380; font-size: 9px; letter-spacing: .08em; }
.rh-state { color: #7d7886; font-size: 9px; letter-spacing: .08em; transition: color .4s; }
.rh-project-layer { position: relative; z-index: 2; display: grid; grid-template-columns: 190px minmax(0,1fr); min-height: 248px; padding-right: 52px; }
.rh-project-core { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; border-right: 1px solid #ffffff0c; text-align: center; }
.rh-project-core strong { position: relative; z-index: 2; color: #9d87ee; font-size: 9px; letter-spacing: .18em; }
.rh-project-core > b { position: relative; z-index: 2; margin-top: 8px; font-size: 13px; line-height: 1.36; letter-spacing: .06em; }
.rh-project-core > span { position: relative; z-index: 2; margin-top: 13px; color: #7d7986; font-size: 9px; }
.rh-orbit { position: absolute; width: 126px; height: 126px; border: 1px solid #8e72d72e; border-radius: 50%; }
.rh-orbit::before { content: ""; position: absolute; inset: 13px; border: 1px dashed #9278d51c; border-radius: inherit; }
.rh-orbit i { position: absolute; left: 50%; top: -3px; width: 5px; height: 5px; border-radius: 50%; background: #a58cff; box-shadow: 0 0 9px #9d80ff; transform-origin: 0 66px; }
.rh-orbit i:last-child { top: auto; bottom: -3px; background: #68b595; transform-origin: 0 -60px; }
.runtime-handoff-stage.is-playing .rh-orbit i:first-child { animation: rh-orbit 8s linear infinite; }
.runtime-handoff-stage.is-playing .rh-orbit i:last-child { animation: rh-orbit-reverse 10s linear infinite; }
.rh-project-map { min-width: 0; padding: 18px 24px 20px; }
.rh-domain { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.rh-domain span { color: #74707e; font-size: 9px; letter-spacing: .09em; }
.rh-domain b { font-size: 11px; font-weight: 540; }
.rh-domain small { margin-left: auto; color: #6f6a77; font-size: 9px; }
.rh-subtasks { display: grid; grid-template-columns: .72fr 1.9fr .72fr; gap: 12px; align-items: stretch; }
.rh-subtask { min-width: 0; min-height: 150px; padding: 13px 14px; border: 1px solid #ffffff10; border-radius: 11px; background: #ffffff02; opacity: .55; transition: opacity .45s,border-color .45s,background .45s,box-shadow .45s; }
.rh-subtask header { display: flex; justify-content: space-between; gap: 8px; color: #76717e; font-size: 8px; letter-spacing: .06em; }
.rh-subtask header b { color: #716d79; font-size: 8px; font-weight: 500; }
.rh-subtask h3 { margin: 13px 0 5px; font-size: 13px; font-weight: 560; }
.rh-subtask p { margin: 0; color: #77727f; font-size: 9px; }
.rh-subtask-done { border-color: #4e806b3b; background: #28443618; opacity: .72; }
.rh-subtask-done header b { color: #71a78f; }
.rh-subtask-active { min-height: 162px; border-color: #8e73d75c; background: linear-gradient(145deg,#7656c718,#ffffff02); opacity: 1; box-shadow: 0 18px 34px -28px #8b69e199; }
.rh-subtask-active header b { display: flex; align-items: center; gap: 6px; color: #ac98f2; }
.rh-subtask-active header b i { width: 4px; height: 4px; border-radius: 50%; background: #a88cff; box-shadow: 0 0 0 4px #a88cff14; }
.rh-finetasks { display: grid; grid-template-columns: minmax(0,1fr) 13px minmax(0,1fr) 13px minmax(0,1fr); align-items: center; margin-top: 15px; }
.rh-ft { position: relative; min-width: 0; padding: 9px 10px; border: 1px solid #ffffff12; border-radius: 7px; background: #121319; transition: border-color .45s,background .45s,box-shadow .45s,opacity .45s,transform .45s; }
.rh-ft small,.rh-ft strong,.rh-ft span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-ft small { color: #75717d; font-size: 7px; }
.rh-ft strong { margin-top: 5px; font-size: 10px; font-weight: 550; }
.rh-ft span { margin-top: 5px; color: #77727e; font-size: 7px; }
.rh-ft-done { border-color: #50856c42; }
.rh-ft-done span { color: #71aa91; }
.rh-ft-ready { border-color: #8d6ee280; background: #211b2d; box-shadow: 0 0 0 3px #9574e70b; }
.rh-ft-ready span { color: #b19af8; }
.rh-ft-locked { opacity: .48; }
.rh-ft-link { width: 13px; height: 1px; background: #83758f66; }
.rh-ft-link::after { content: ""; display: block; width: 4px; height: 4px; margin: -1.5px 0 0 auto; border-top: 1px solid #8e829a; border-right: 1px solid #8e829a; transform: rotate(45deg); }
.rh-boundary { position: relative; z-index: 4; display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 12px; height: 40px; padding: 0 62px 0 20px; border-top: 1px solid #ffffff0d; border-bottom: 1px solid #ffffff0d; color: #706c78; background: #0f1014; font-size: 8px; letter-spacing: .08em; }
.rh-boundary > i { height: 1px; background: linear-gradient(90deg,#ffffff08,#9477dc5c,#ffffff08); }
.rh-boundary > b { color: #9d8cb5; font-size: 9px; font-weight: 500; letter-spacing: .02em; }
.rh-payload { position: absolute; z-index: 8; left: 50%; top: 4px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid #9a7de883; border-radius: 6px; background: #221b31; box-shadow: 0 8px 26px #0008,0 0 18px #8b6be22c; opacity: 0; transform: translate(-50%,-80px); }
.rh-payload small { color: #a68cf1; font-size: 7px; }.rh-payload strong { font-size: 9px; }
.runtime-handoff-stage.is-playing .rh-payload { animation: rh-dispatch 11.5s cubic-bezier(.3,.1,.28,1) infinite; }
.rh-work-layer { position: relative; z-index: 2; display: grid; grid-template-columns: 190px minmax(0,1fr) 196px; min-height: 220px; padding-right: 52px; }
.rh-work-core { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; padding: 13px 16px 12px; border-right: 1px solid #ffffff0c; text-align: center; }
.rh-work-kicker,.rh-flow-label,.rh-result > span { color: #74707d; font-size: 8px; letter-spacing: .09em; }
.rh-work-kicker { width: 100%; white-space: nowrap; }
.rh-work-engine { position: relative; width: 112px; height: 112px; margin-top: 8px; opacity: .56; transform: scale(.95); transition: opacity .45s,transform .45s,filter .45s; }
.rh-work-engine::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 22deg,transparent 0 14%,#9f83ee 23%,transparent 33% 58%,#67ad90 67%,transparent 77%); opacity: .4; -webkit-mask: radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px)); mask: radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px)); }
.rh-work-engine::after { content: ""; position: absolute; inset: 25px; border-radius: 50%; background: radial-gradient(circle,#9172e91b,transparent 68%); filter: blur(5px); opacity: .5; transition: opacity .4s; }
.rh-work-engine-ring { position: absolute; border-radius: 50%; }
.rh-work-engine-ring-outer { inset: 0; border: 1px solid #9478dc42; box-shadow: inset 0 0 24px #8464dc08; }
.rh-work-engine-ring-inner { inset: 11px; border: 1px dashed #9578dc32; }
.rh-work-action-nodes i { position: absolute; z-index: 3; width: 5px; height: 5px; border: 1px solid #a58cec88; border-radius: 50%; background: #16141d; box-shadow: 0 0 0 3px #987bdd08; }
.rh-work-action-nodes i:nth-child(1) { left: calc(50% - 2px); top: -2px; }.rh-work-action-nodes i:nth-child(2) { right: 12px; top: 13px; }.rh-work-action-nodes i:nth-child(3) { right: -2px; top: calc(50% - 2px); }.rh-work-action-nodes i:nth-child(4) { right: 12px; bottom: 13px; }.rh-work-action-nodes i:nth-child(5) { left: calc(50% - 2px); bottom: -2px; }.rh-work-action-nodes i:nth-child(6) { left: 12px; bottom: 13px; }.rh-work-action-nodes i:nth-child(7) { left: -2px; top: calc(50% - 2px); }.rh-work-action-nodes i:nth-child(8) { left: 12px; top: 13px; }
.rh-work-engine-center { position: absolute; z-index: 2; inset: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #9276dc52; border-radius: 50%; background: #17141e; box-shadow: 0 10px 28px #0005,inset 0 0 18px #8c6cda0d; transition: border-color .4s,box-shadow .4s,background .4s; }
.rh-work-engine-center small { color: #9c83df; font-size: 6px; letter-spacing: .14em; }
.rh-work-engine-center strong { margin-top: 5px; font-size: 9px; line-height: 1.2; letter-spacing: .055em; }
.rh-work-engine-center b { margin-top: 5px; padding: 2px 5px; border-radius: 999px; color: #88769d; background: #ffffff05; font-size: 6px; font-weight: 500; letter-spacing: .05em; }
.rh-work-engine-copy { display: flex; align-items: center; gap: 6px; margin: 7px 0 0; color: #837f8a; font-size: 7px; line-height: 1.4; white-space: nowrap; }
.rh-work-engine-copy span { color: #a18bdc; font-size: 6px; letter-spacing: .07em; }
.rh-work-core::after { content: ""; position: absolute; z-index: 4; right: -21px; top: 50%; width: 42px; height: 1px; background: linear-gradient(90deg,#9e82e600,#9e82e688,#9e82e600); opacity: 0; transform: translateY(9px) scaleX(.2); transition: opacity .35s,transform .45s; }
.rh-work-flow { min-width: 0; padding: 23px 22px; border-right: 1px solid #ffffff0c; }
.rh-todos { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 13px; }
.rh-todos article { min-width: 0; min-height: 126px; padding: 12px; border: 1px solid #ffffff0d; border-radius: 9px; background: #ffffff02; transition: border-color .35s,background .35s,transform .35s; }
.rh-todos small { color: #756f7c; font-size: 8px; }
.rh-todos strong { display: block; margin-top: 11px; font-size: 10px; font-weight: 540; }
.rh-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; }
.rh-actions i { width: 6px; height: 6px; border: 1px solid #8d7aa466; border-radius: 50%; background: #14151a; }
.runtime-handoff-stage.is-playing[data-runtime-phase="work"] .rh-actions i { animation: rh-action 1.25s ease-in-out infinite; }
.rh-actions i:nth-child(2) { animation-delay: .18s !important; }.rh-actions i:nth-child(3) { animation-delay: .36s !important; }.rh-actions i:nth-child(4) { animation-delay: .54s !important; }.rh-actions i:nth-child(5) { animation-delay: .72s !important; }
.rh-result { align-self: center; margin: 18px; padding: 15px; border: 1px solid #507d6b45; border-radius: 10px; background: linear-gradient(145deg,#20362d4a,#ffffff02); opacity: .46; transform: translateY(5px); transition: opacity .5s,transform .5s,border-color .5s,box-shadow .5s; }
.rh-result h3 { margin: 9px 0 10px; font-size: 13px; font-weight: 570; }
.rh-result p { display: inline-flex; align-items: center; gap: 5px; width: 48%; margin: 3px 0; color: #827d88; font-size: 8px; }
.rh-result p i { width: 3px; height: 3px; border-radius: 50%; background: #69ae90; }
.rh-result > b { display: block; margin-top: 13px; color: #71ae94; font-size: 7px; font-weight: 500; letter-spacing: .06em; }
.rh-result > b span { float: right; }
.rh-return-rail { position: absolute; z-index: 3; top: 54px; right: 0; bottom: 52px; width: 52px; border-left: 1px solid #ffffff0b; background: #111217; }
.rh-return-rail::before { content: ""; position: absolute; left: 25px; top: 24px; bottom: 24px; width: 1px; background: #ffffff10; }
.rh-return-rail i { position: absolute; z-index: 2; left: 22px; bottom: 24px; width: 7px; height: 7px; border: 1px solid #67ac8e; border-radius: 50%; background: #121318; opacity: 0; }
.rh-return-rail span { position: absolute; left: 15px; top: 50%; color: #6f6b76; font-size: 7px; letter-spacing: .08em; white-space: nowrap; transform: rotate(90deg) translate(-50%,-50%); transform-origin: left top; }
.rh-return-rail b { position: absolute; left: 10px; top: 13px; color: #777280; font-size: 7px; font-weight: 500; white-space: nowrap; transform: rotate(90deg) translateY(-100%); transform-origin: left top; }
.runtime-handoff-stage.is-playing .rh-return-rail i { animation: rh-return 11.5s ease-in-out infinite; }
.rh-playback { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 16px 0 20px; border-top: 1px solid #ffffff0e; background: #14151a; }
.rh-phase-labels { display: flex; align-items: center; gap: 7px; }
.rh-phase-labels span { padding: 6px 9px; border-radius: 999px; color: #686571; font-size: 9px; transition: color .35s,background .35s; }
.runtime-handoff-stage[data-runtime-phase="project"] [data-rh-phase-label="project"],.runtime-handoff-stage[data-runtime-phase="dispatch"] [data-rh-phase-label="dispatch"],.runtime-handoff-stage[data-runtime-phase="work"] [data-rh-phase-label="work"],.runtime-handoff-stage[data-runtime-phase="return"] [data-rh-phase-label="return"],.runtime-handoff-stage[data-runtime-phase="update"] [data-rh-phase-label="update"] { color: #c4b5f6; background: #9478dd12; }
.rh-controls { display: flex; gap: 7px; }
.rh-controls button { display: grid; place-items: center; width: 29px; height: 29px; padding: 7px; border: 1px solid #ffffff10; border-radius: 50%; background: transparent; color: #888390; cursor: pointer; }
.rh-controls svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.runtime-handoff-stage[data-runtime-phase="dispatch"] .rh-ft-ready { transform: translateY(-2px); border-color: #b49aff; box-shadow: 0 0 0 4px #9675ed12,0 12px 24px -16px #8d6ae2; }
.runtime-handoff-stage[data-runtime-phase="dispatch"] .rh-work-engine { opacity: .76; transform: scale(.98); }
.runtime-handoff-stage[data-runtime-phase="work"] .rh-todos article { border-color: #7e68b740; background: #7d63ba09; }
.runtime-handoff-stage[data-runtime-phase="work"] .rh-work-engine { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 13px #8d6de12d); }
.runtime-handoff-stage.is-playing[data-runtime-phase="work"] .rh-work-engine::before { animation: rh-work-spin 4.8s linear infinite; }
.runtime-handoff-stage[data-runtime-phase="work"] .rh-work-engine::after { opacity: 1; }
.runtime-handoff-stage[data-runtime-phase="work"] .rh-work-engine-center { border-color: #aa8ff086; background: #1d1728; box-shadow: 0 12px 28px #0006,0 0 20px #8b69dc20,inset 0 0 20px #8c6cda16; }
.runtime-handoff-stage.is-playing[data-runtime-phase="work"] .rh-work-action-nodes i { animation: rh-engine-action 1.65s ease-in-out infinite; }
.runtime-handoff-stage.is-playing[data-runtime-phase="work"] .rh-work-action-nodes i:nth-child(2) { animation-delay: .12s; }.runtime-handoff-stage.is-playing[data-runtime-phase="work"] .rh-work-action-nodes i:nth-child(3) { animation-delay: .24s; }.runtime-handoff-stage.is-playing[data-runtime-phase="work"] .rh-work-action-nodes i:nth-child(4) { animation-delay: .36s; }.runtime-handoff-stage.is-playing[data-runtime-phase="work"] .rh-work-action-nodes i:nth-child(5) { animation-delay: .48s; }.runtime-handoff-stage.is-playing[data-runtime-phase="work"] .rh-work-action-nodes i:nth-child(6) { animation-delay: .6s; }.runtime-handoff-stage.is-playing[data-runtime-phase="work"] .rh-work-action-nodes i:nth-child(7) { animation-delay: .72s; }.runtime-handoff-stage.is-playing[data-runtime-phase="work"] .rh-work-action-nodes i:nth-child(8) { animation-delay: .84s; }
.runtime-handoff-stage[data-runtime-phase="work"] .rh-work-core::after { opacity: 1; transform: translateY(9px) scaleX(1); }
.runtime-handoff-stage[data-runtime-phase="return"] .rh-result { opacity: 1; transform: none; border-color: #6aaf9180; box-shadow: 0 14px 30px -22px #55a07d; }
.runtime-handoff-stage[data-runtime-phase="return"] .rh-work-engine { opacity: .86; filter: drop-shadow(0 0 11px #55a07d24); }
.runtime-handoff-stage[data-runtime-phase="return"] .rh-work-engine-center { border-color: #5fa18362; background: #16211d; }
.runtime-handoff-stage[data-runtime-phase="return"] .rh-work-engine-center b { color: #72b497; background: #5d9f8214; }
.runtime-handoff-stage[data-runtime-phase="update"] .rh-state { color: #72b698; }
.runtime-handoff-stage[data-runtime-phase="update"] .rh-ft-locked { opacity: 1; border-color: #6cab904f; background: #1b2923; }
.runtime-handoff-stage.is-paused * { animation-play-state: paused !important; }
.runtime-handoff-section button:focus-visible { outline: 2px solid #a88bd8; outline-offset: 3px; }
.runtime-handoff-principles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: min(1200px,100%); margin: 24px auto 0; border-top: 1px solid #27232f14; }
.runtime-handoff-principles > div { position: relative; padding: 19px 24px 0; border-right: 1px solid #27232f12; }
.runtime-handoff-principles > div:first-child { padding-left: 0; }.runtime-handoff-principles > div:last-child { border-right: 0; }
.runtime-handoff-principles span { color: #8c79bd; font-size: 9px; }
.runtime-handoff-principles h3 { display: inline; margin: 0 0 0 10px; font-size: 14px; font-weight: 590; }
.runtime-handoff-principles p { margin: 7px 0 0; color: #77737d; font-size: 12px; line-height: 1.6; }
@keyframes rh-heartbeat { 0%,100% { opacity: .55; box-shadow: 0 0 0 3px #75c6a40b; } 50% { opacity: 1; box-shadow: 0 0 0 7px #75c6a414; } }
@keyframes rh-orbit { to { transform: rotate(360deg); } }
@keyframes rh-orbit-reverse { to { transform: rotate(-360deg); } }
@keyframes rh-dispatch { 0%,17% { opacity: 0; transform: translate(-50%,-78px); } 22% { opacity: 1; } 31% { opacity: 1; transform: translate(-50%,69px); } 38%,100% { opacity: 0; transform: translate(-50%,102px); } }
@keyframes rh-action { 0%,100% { border-color: #8d7aa444; background: #14151a; box-shadow: none; } 45% { border-color: #a98bf2; background: #a98bf2; box-shadow: 0 0 0 4px #a98bf214; } }
@keyframes rh-work-spin { to { transform: rotate(360deg); } }
@keyframes rh-engine-action { 0%,100% { border-color: #947aa466; background: #16141d; box-shadow: 0 0 0 3px #987bdd08; } 42% { border-color: #b59aff; background: #aa8df1; box-shadow: 0 0 0 5px #a88cf214,0 0 9px #9d7de8; } }
@keyframes rh-return { 0%,67% { opacity: 0; transform: translateY(0); } 70% { opacity: 1; } 86% { opacity: 1; transform: translateY(-392px); } 90%,100% { opacity: 0; transform: translateY(-410px); } }
@media (max-width: 980px) { .rh-project-layer,.rh-work-layer { grid-template-columns: 150px minmax(0,1fr); } .rh-work-layer { padding-bottom: 18px; } .rh-work-core { grid-row: 1 / 3; } .rh-result { grid-column: 2; margin: 0 22px; } .rh-subtasks { grid-template-columns: .62fr 1.75fr; } .rh-subtask-next { display: none; } }
@media (max-width: 700px) { .runtime-handoff-section { padding: 70px 22px 46px; } .runtime-handoff-head { display: block; } .runtime-handoff-head h2 { margin: 22px 0 16px; font-size: 34px; } .runtime-handoff-head > p:last-child { font-size: 14px; } .runtime-handoff-stage { margin-top: 26px; } .rh-project-bar { display: flex; flex-wrap: wrap; padding: 12px 48px 12px 14px; } .rh-project-bar p { width: 100%; } .rh-project-bar p span { display: block; margin-bottom: 5px; } .rh-project-layer,.rh-work-layer { display: block; padding-right: 38px; } .rh-project-core { min-height: 126px; border-right: 0; border-bottom: 1px solid #ffffff0c; } .rh-orbit { width: 104px; height: 104px; } .rh-project-map { padding: 16px 12px 18px; overflow-x: auto; } .rh-subtasks { min-width: 570px; grid-template-columns: 150px 330px; } .rh-subtask { min-height: 148px; } .rh-boundary { padding: 0 44px 0 12px; grid-template-columns: auto 1fr auto; } .rh-boundary > i:first-of-type,.rh-boundary > span:last-of-type { display: none; } .rh-work-core { padding: 22px 18px; border-right: 0; border-bottom: 1px solid #ffffff0c; } .rh-work-flow { padding: 20px 12px; border-right: 0; overflow-x: auto; } .rh-todos { min-width: 480px; } .rh-result { margin: 0 12px 18px; } .rh-return-rail { width: 38px; } .rh-return-rail::before { left: 18px; }.rh-return-rail i { left: 15px; } .rh-return-rail span { left: 9px; } .rh-playback { padding-left: 12px; } .rh-phase-labels { overflow-x: auto; }.rh-phase-labels span { white-space: nowrap; } .runtime-handoff-principles { grid-template-columns: 1fr; } .runtime-handoff-principles > div { padding: 15px 0; border-right: 0; border-bottom: 1px solid #27232f12; } }
@media (prefers-reduced-motion: reduce) { .rh-payload { display: none; } .rh-return-rail i { opacity: 1; transform: translateY(-392px); } }

.scenario-section { padding: 84px clamp(28px,6.3vw,114px) 62px; color: #f3f2f7; background: radial-gradient(ellipse at 67% 54%,#332a4b1c,transparent 46%),#121318; }
.scenario-head { width: min(1120px,100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.55fr) minmax(250px,.72fr); gap: 18px 64px; align-items: end; }
.scenario-kicker { grid-column: 1 / -1; margin: 0; color: #ad9cff; font-size: 11px; font-weight: 550; letter-spacing: .14em; }
.scenario-kicker span { margin-left: 14px; color: #817d89; }
.scenario-head h2 { max-width: 650px; margin: 0; font-size: clamp(36px,3vw,45px); line-height: 1.18; letter-spacing: -.045em; font-weight: 610; }
.scenario-head h2 span { color: #aa96ff; }
.scenario-head > p:last-child { max-width: 340px; margin: 0 0 2px; color: #96919e; font-size: 13px; line-height: 1.75; }
.scenario-workbench { width: min(1120px,100%); margin: 30px auto 0; }
.scenario-tabs { display: flex; align-items: center; justify-content: center; gap: 4px; width: fit-content; max-width: 100%; margin: 0 auto 12px; padding: 4px; border: 1px solid #ffffff0d; border-radius: 10px; background: #17181dba; }
.scenario-tabs::before { display: none; }
.scenario-tabs button { position: relative; display: flex; align-items: center; gap: 7px; width: auto; min-height: 34px; padding: 8px 13px; border: 0; border-radius: 7px; background: transparent; color: #8e8996; font-size: 11px; white-space: nowrap; cursor: pointer; transition: color .2s ease,background .2s ease,box-shadow .2s ease; }
.scenario-tabs button:hover { color: #d7d1df; }
.scenario-tabs button[aria-selected="true"] { color: #ded7ff; background: #a68df214; box-shadow: inset 0 0 0 1px #a68df21f; }
.scenario-section svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.scenario-section button:focus-visible,.scenario-panel:focus-visible { outline: 2px solid #b4a4ff; outline-offset: 3px; }
.scenario-panel { min-width: 0; overflow: hidden; border: 1px solid #ffffff10; border-radius: 14px; background: linear-gradient(135deg,#18191f 0%,#15161b 72%); box-shadow: 0 26px 70px #08090c3d; }
.scenario-overview { position: relative; display: grid; grid-template-columns: minmax(250px,320px) minmax(0,1fr); gap: 66px; min-height: 286px; padding: 34px 38px 32px; align-items: center; }
.scenario-overview::before { content: ""; position: absolute; left: 350px; top: 50%; width: 38px; height: 1px; background: linear-gradient(90deg,#a58cf173,#a58cf11e); }
.scenario-overview::after { content: ""; position: absolute; left: 350px; top: calc(50% - 2px); width: 5px; height: 5px; border-radius: 50%; background: #b5a2ff; box-shadow: 0 0 12px #ab95ff; animation: scenario-signal 3.2s ease-in-out infinite; }
@keyframes scenario-signal { 0%,18% { transform: translateX(0); opacity: 0; } 34% { opacity: 1; } 72%,100% { transform: translateX(33px); opacity: 0; } }
.scenario-goal { min-width: 0; padding-right: 10px; }
.scenario-label { display: flex; align-items: center; gap: 8px; margin: 0; color: #96919f; font-size: 11px; }
.scenario-goal-dot { width: 5px; height: 5px; border-radius: 50%; background: #aa94ff; box-shadow: 0 0 0 5px #aa94ff0d; }
.scenario-goal h3 { margin: 17px 0 11px; font-size: clamp(22px,1.8vw,27px); line-height: 1.42; letter-spacing: -.035em; font-weight: 590; }
.scenario-goal > p:not(.scenario-label) { max-width: 310px; margin: 0 0 16px; color: #918c99; font-size: 12px; line-height: 1.72; }
.scenario-domain { color: #716c79; font-size: 9px; letter-spacing: .13em; }
.scenario-output { position: relative; min-width: 0; padding-left: 4px; }
.scenario-output > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.scenario-sample { color: #716c78; font-size: 9px; }
.scenario-output-heading { display: flex; align-items: center; gap: 8px; margin: 15px 0 16px; color: #b5a4ff; }
.scenario-output-heading h4 { margin: 0; color: #efecf3; font-size: 18px; line-height: 1.4; font-weight: 580; }
.scenario-results { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.scenario-results article { position: relative; min-width: 0; padding: 13px 0 0; border-top: 1px solid #ffffff17; }
.scenario-results article::before { content: ""; position: absolute; left: 0; top: -1px; width: 24px; height: 1px; background: #a993fb; opacity: .72; }
.scenario-results article > span { display: block; margin-bottom: 13px; color: #756e7f; font-size: 9px; }
.scenario-results h5 { margin: 0 0 7px; color: #ddd9e3; font-size: 12px; line-height: 1.45; font-weight: 570; }
.scenario-results p { margin: 0; color: #8c8794; font-size: 10px; line-height: 1.65; }
.scenario-entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 24px 9px; border-top: 1px solid #ffffff0d; }
.scenario-entry-head > span { color: #aca6b3; font-size: 10px; letter-spacing: .01em; }
.scenario-entry-head p { margin: 0; color: #716d78; font-size: 9px; }
.scenario-entries { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid #ffffff08; }
.scenario-entries article { min-width: 0; padding: 13px 20px 15px; }
.scenario-entries article + article { border-left: 1px solid #ffffff0a; }
.scenario-entries header { display: flex; align-items: center; gap: 7px; }
.scenario-entries svg { color: #a791fb; }
.scenario-entries h4 { margin: 0; font-size: 12px; font-weight: 570; }
.scenario-entries header > span { margin-left: auto; color: #746f7c; font-size: 9px; }
.scenario-entries p { margin: 6px 0 0; color: #8d8895; font-size: 10px; line-height: 1.55; }
.scenario-note { margin: 0; padding: 10px 4px 0; color: #696570; text-align: right; font-size: 9px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .scenario-overview::after { animation: none; opacity: .65; transform: translateX(33px); } }
@media (max-width: 960px) { .scenario-overview { grid-template-columns: minmax(220px,280px) minmax(0,1fr); gap: 42px; padding: 30px; } .scenario-overview::before { left: 306px; width: 24px; } .scenario-overview::after { left: 306px; } .scenario-results { gap: 12px; } }
@media (max-width: 700px) { .scenario-section { padding: 70px 22px 48px; } .scenario-head { display: block; } .scenario-head h2 { margin: 22px 0 16px; font-size: 34px; } .scenario-head > p:last-child { font-size: 14px; } .scenario-workbench { margin-top: 25px; } .scenario-tabs { justify-content: flex-start; width: 100%; margin-bottom: 10px; overflow-x: auto; } .scenario-tabs button { flex: 0 0 auto; padding: 8px 11px; } .scenario-panel { border-radius: 12px; } .scenario-overview { display: block; min-height: 0; padding: 26px 22px; } .scenario-overview::before,.scenario-overview::after { display: none; } .scenario-goal { padding: 0 0 24px; border-bottom: 1px solid #ffffff0d; } .scenario-goal h3 { font-size: 23px; } .scenario-output { margin-top: 23px; padding: 0; } .scenario-results { grid-template-columns: 1fr; gap: 0; } .scenario-results article { display: grid; grid-template-columns: 24px 1fr; gap: 9px; padding: 11px 0; } .scenario-results article > span { margin: 1px 0 0; } .scenario-results h5 { margin-bottom: 3px; } .scenario-results article::before { display: none; } .scenario-entry-head { display: block; padding: 11px 18px 8px; } .scenario-entry-head p { margin-top: 4px; } .scenario-entries { grid-template-columns: 1fr; } .scenario-entries article { padding: 12px 18px; } .scenario-entries article + article { border-left: 0; border-top: 1px solid #ffffff09; } .scenario-note { padding-top: 10px; text-align: left; } }

.download-section { position: relative; display: grid; place-items: center; min-height: 730px; overflow: hidden; padding: 116px 24px 92px; background: #101115; color: #f5f3fa; isolation: isolate; }
.download-section::before { content: ""; position: absolute; z-index: 0; inset: 0; background: radial-gradient(ellipse 38% 34% at 50% 61%,#8166cf12,transparent 72%),radial-gradient(ellipse 46% 42% at 50% 5%,#8d6ff510,transparent); pointer-events: none; }
.download-ignition { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.download-goal-map { width: 100%; height: 100%; overflow: visible; }
.goal-source { fill: #81798d; opacity: 0; }
.goal-source circle { fill: currentColor; filter: drop-shadow(0 0 5px currentColor); }
.goal-source text { fill: currentColor; font-size: 9px; font-weight: 500; letter-spacing: .18em; }
.goal-source-discussion { color: #9f88e8; }.goal-source-work { color: #79ad9a; }.goal-source-project { color: #8e80b8; }
.goal-beam,.goal-route,.goal-packet,.goal-forward-path,.goal-forward-packet { fill: none; stroke-linecap: round; }
.goal-beam { stroke-width: 28; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; filter: url(#goal-beam-blur); mix-blend-mode: screen; }
.goal-beam-one { stroke: url(#goal-route-violet); }.goal-beam-two { stroke: url(#goal-route-mint); }.goal-beam-three { stroke: url(#goal-route-mix); }
.goal-route { stroke-width: 1.7; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.goal-route-one { stroke: url(#goal-route-violet); }.goal-route-two { stroke: url(#goal-route-mint); }.goal-route-three { stroke: url(#goal-route-mix); }
.goal-packet { stroke-width: 2.3; stroke-dasharray: .025 .975; stroke-dashoffset: 1; opacity: 0; filter: url(#goal-glow); }
.goal-packet-one { stroke: #c5b3ff; }.goal-packet-two { stroke: #a3dfc7; }.goal-packet-three { stroke: #b6a3ed; }
.goal-forward-path { stroke: url(#goal-route-violet); stroke-width: 7; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .12; filter: url(#goal-glow); }
.goal-forward-packet { stroke: #bca8ff; stroke-width: 2.1; stroke-dasharray: .035 .965; stroke-dashoffset: 1; opacity: 0; filter: url(#goal-glow); }
.goal-core { opacity: 0; transform-box: fill-box; transform-origin: center; }
.goal-core-halo { fill: url(#goal-core-fill); filter: url(#goal-glow); opacity: .65; }
.goal-core-orbit { fill: none; stroke: #b5a0f6; stroke-width: .7; opacity: .46; }
.goal-core-orbit-outer { stroke-dasharray: 3 8; }.goal-core-orbit-inner { stroke: #86bea8; stroke-dasharray: 1.5 5; }
.goal-core-dot { fill: #eee8ff; filter: url(#goal-glow); }
.download-section.is-revealed .goal-source { animation: goal-source-in .8s cubic-bezier(.2,.75,.25,1) both; }
.download-section.is-revealed .goal-source-discussion { animation-delay: .12s; }.download-section.is-revealed .goal-source-work { animation-delay: .34s; }.download-section.is-revealed .goal-source-project { animation-delay: .56s; }
.download-section.is-revealed .goal-beam { animation: goal-beam-arrive 2.45s cubic-bezier(.2,.72,.3,1) both,goal-beam-breathe 5.6s ease-in-out 3.5s infinite; }
.download-section.is-revealed .goal-beam-one { animation-delay: .2s,3.5s; }.download-section.is-revealed .goal-beam-two { animation-delay: .43s,3.73s; }.download-section.is-revealed .goal-beam-three { animation-delay: .66s,3.96s; }
.download-section.is-revealed .goal-route { animation: goal-route-draw 2.25s cubic-bezier(.2,.72,.3,1) both; }
.download-section.is-revealed .goal-route-one { animation-delay: .24s; }.download-section.is-revealed .goal-route-two { animation-delay: .47s; }.download-section.is-revealed .goal-route-three { animation-delay: .7s; }
.download-section.is-revealed .goal-packet { animation: goal-packet-run 7.4s cubic-bezier(.35,.02,.28,1) infinite; }
.download-section.is-revealed .goal-packet-one { animation-delay: 1.05s; }.download-section.is-revealed .goal-packet-two { animation-delay: 1.28s; }.download-section.is-revealed .goal-packet-three { animation-delay: 1.51s; }
.download-section.is-revealed .goal-core { animation: goal-core-ignite 1.2s cubic-bezier(.16,.8,.28,1) 2.72s both,goal-core-breathe 4.8s ease-in-out 3.92s infinite; }
.download-section.is-revealed .goal-core-orbit-outer { animation: goal-orbit-spin 18s linear 3.2s infinite; transform-box: fill-box; transform-origin: center; }
.download-section.is-revealed .goal-core-orbit-inner { animation: goal-orbit-spin-reverse 12s linear 3.2s infinite; transform-box: fill-box; transform-origin: center; }
.download-section.is-revealed .goal-forward-path { animation: goal-route-draw 1.5s cubic-bezier(.2,.72,.3,1) 3.08s both; }
.download-section.is-revealed .goal-forward-packet { animation: goal-forward-run 6.4s ease-in-out 3.24s infinite; }
.download-horizon { position: absolute; z-index: 4; top: 0; left: 10%; width: 80%; height: 1px; background: transparent; overflow: hidden; }
.download-horizon span { display: block; width: 18%; height: 1px; opacity: 0; background: linear-gradient(90deg,transparent,#c3afff,#92d4bd,transparent); }
.download-section.is-revealed .download-horizon span { animation: download-light 3.6s cubic-bezier(.2,.5,.4,1) both; }
.download-content { position: relative; z-index: 3; width: min(800px,100%); text-align: center; }
.download-kicker { margin: 0 0 28px; color: #ac9bff; font-size: 12px; font-weight: 500; letter-spacing: .14em; }
.download-kicker span { margin-left: 14px; color: #8e889d; }
.download-content h2 { margin: 0; font-size: clamp(44px,4.5vw,68px); line-height: 1.2; font-weight: 600; letter-spacing: -.055em; }
.download-content h2 span { color: #bbacff; }
.download-description { margin: 25px 0 32px; color: #ada7b9; font-size: 16px; line-height: 1.85; }
.download-primary { position: relative; display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-width: 208px; min-height: 56px; padding: 15px 30px; border: 1px solid #fff9; border-radius: 10px; color: #24202e; background: #f3f0fb; font-size: 16px; font-weight: 550; cursor: pointer; box-shadow: 0 5px 30px -10px #b7a0ff55; transition: background .2s,box-shadow .2s; isolation: isolate; }
.download-primary::before { content: ""; position: absolute; z-index: -1; inset: -9px; border: 1px solid #b7a3ff00; border-radius: 16px; opacity: 0; pointer-events: none; }
.download-section.is-revealed .download-primary::before { animation: goal-button-ignite 1.2s cubic-bezier(.2,.72,.3,1) 3.05s both,goal-button-breathe 4.8s ease-in-out 4.25s infinite; }
.download-primary:hover { background: #fff; box-shadow: 0 5px 35px -8px #b7a0ff77; }
.download-primary svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.download-availability { margin: 14px 0 34px; color: #928b9f; font-size: 12px; letter-spacing: .04em; }
.download-contact { padding: 10px 12px; border: 0; background: none; color: #b2a9c2; font-size: 14px; cursor: pointer; transition: color .2s; }
.download-contact span { margin-left: 9px; }
.download-contact:hover { color: #e1d6f5; }
.download-section button:focus-visible,.site-footer a:focus-visible,.site-footer button:focus-visible { outline: 2px solid #b4a4ff; outline-offset: 5px; }
.site-footer { padding: 44px clamp(28px,6.3vw,114px) 24px; border-top: 1px solid #ffffff0e; background: #101115; color: #918b9e; }
.footer-main { display: grid; grid-template-columns: 1.4fr .9fr .9fr 1.1fr; gap: 32px; width: min(1200px,100%); margin: 0 auto; }
.footer-brand { display: inline-flex; align-items: center; gap: 0; color: #e5dfed; font-size: 30px; font-weight: 650; line-height: 1; letter-spacing: -.055em; text-decoration: none; }
.footer-brand .brand-o { width: 35px; height: 38px; margin-right: -2px; }
.footer-brand .brand-o path { stroke-width: 3.05; }
.footer-brand .brand-o-body { stroke: #e5dfed; }.footer-brand .brand-o-cut { stroke: #a995ff; }
.footer-identity p { margin: 12px 0 0; color: #918b9e; font-size: 12px; }
.footer-group { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.footer-group h3 { margin: 0 0 13px; color: #e1dbe9; font-size: 14px; font-weight: 500; line-height: 1.6; }
.footer-group a,.footer-group button { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 7px 0; border: 0; background: transparent; color: #a8a1b4; font-size: 14px; line-height: 1.5; text-align: left; text-decoration: none; cursor: pointer; transition: color .2s; }
.footer-group a:hover,.footer-group button:hover { color: #e5dfed; }
.footer-soon { border: 1px solid #b4a4ff24; border-radius: 4px; padding: 1px 5px; color: #a99bc2; font-size: 12px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: min(1200px,100%); margin: 32px auto 0; padding-top: 20px; border-top: 1px solid #ffffff0b; }
.footer-bottom > a { padding: 6px 0; color: #a8a1b4; font-size: 12px; text-decoration: none; }
.footer-bottom > a span { margin-left: 8px; }
.footer-copyright { margin: 0; font-size: 12px; }
@keyframes download-light { 0% { opacity: 0; transform: translateX(-100%); } 12% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(650%); } }
@keyframes goal-source-in { from { opacity: 0; transform: translateY(7px); } to { opacity: .58; transform: none; } }
@keyframes goal-beam-arrive { 0% { stroke-dashoffset: 1; opacity: 0; } 32% { opacity: .1; } 100% { stroke-dashoffset: 0; opacity: .22; } }
@keyframes goal-beam-breathe { 0%,100% { opacity: .12; } 50% { opacity: .24; } }
@keyframes goal-route-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 18% { opacity: .38; } 74% { stroke-dashoffset: 0; opacity: .24; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes goal-packet-run { 0%,12% { stroke-dashoffset: 1; opacity: 0; } 16% { opacity: .95; } 44% { stroke-dashoffset: 0; opacity: .95; } 49%,100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes goal-core-ignite { 0% { opacity: 0; transform: scale(.28); } 55% { opacity: 1; transform: scale(1.18); } 100% { opacity: .78; transform: scale(1); } }
@keyframes goal-core-breathe { 0%,100% { opacity: .62; transform: scale(.96); } 50% { opacity: .88; transform: scale(1.08); } }
@keyframes goal-orbit-spin { to { transform: rotate(360deg); } } @keyframes goal-orbit-spin-reverse { to { transform: rotate(-360deg); } }
@keyframes goal-forward-run { 0%,18% { stroke-dashoffset: 1; opacity: 0; } 24% { opacity: .9; } 58% { stroke-dashoffset: 0; opacity: .9; } 64%,100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes goal-button-ignite { 0% { opacity: 0; border-color: #b7a3ff00; transform: scale(.82); } 52% { opacity: 1; border-color: #c7b7ff99; transform: scale(1.08); box-shadow: 0 0 38px #9d7df244; } 100% { opacity: .62; border-color: #a990ef4f; transform: scale(1); box-shadow: 0 0 22px #9d7df222; } }
@keyframes goal-button-breathe { 0%,100% { opacity: .34; transform: scale(.99); box-shadow: 0 0 18px #9d7df218; } 50% { opacity: .72; transform: scale(1.025); box-shadow: 0 0 34px #9d7df238; } }
@media (max-width: 780px) {
  .download-section { min-height: 660px; padding: 94px 22px 76px; }
  .goal-beam { stroke-width: 38; }
  .goal-route { stroke-width: 1.25; opacity: .18; }
  .goal-source text { display: none; }
  .goal-source circle { opacity: .55; }
  .download-content h2 { font-size: clamp(40px,8vw,56px); }
  .download-description { font-size: 16px; }
  .site-footer { padding: 32px 22px 22px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 30px 22px; }
  .footer-identity { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 4px; }
  .footer-identity p { margin: 0; }
  .footer-group:last-child { grid-column: 1 / -1; }
  .footer-bottom { margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .goal-source,.goal-core { opacity: .58; }
  .goal-beam { opacity: .16; stroke-dashoffset: 0; }
  .goal-route,.goal-forward-path { stroke-dashoffset: 0; }
  .download-primary::before { opacity: .35; border-color: #a990ef4f; }
}