@font-face {
  font-family: Hanken;
  src: url("/assets/hanken-grotesk.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --bg: #000000;
  --surface: #121212;
  --raised: #242424;
  --ink: #ffffff;
  --muted: #b7b7b7;
  --accent: #ffffff;
  --line: #393939;
  --success: #90e2b5;
  --warning: #f7c77e;
  --red: #ffadb5;
  --radius: 6px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-padding-top: 24px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font:
    400 17px/1.55 Hanken,
    Arial,
    sans-serif;
}
button,
input {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
  text-underline-offset: 5px;
}
button {
  color: var(--ink);
}
a,
button {
  touch-action: manipulation;
}
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
h1,
h2 {
  font-weight: 580;
  letter-spacing: -0.045em;
  line-height: 1.08;
}
h1 {
  font-size: clamp(42px, 4.5vw, 68px);
  max-width: 740px;
}
h2 {
  font-size: clamp(36px, 3.5vw, 52px);
}
h3 {
  font-size: 23px;
  line-height: 1.2;
  font-weight: 550;
  letter-spacing: -0.025em;
}
p + p {
  margin-top: 16px;
}
img {
  display: block;
  max-width: 100%;
} /* taste-skill-ignore: monospace is restricted to literal code. */
code,
pre {
  font-family: Consolas, monospace;
  font-size: 13px;
}
code {
  overflow-wrap: anywhere;
}
pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
button {
  border: 0;
  background: var(--raised);
  border-radius: 4px;
  padding: 9px 14px;
  min-height: 44px;
}
button:hover {
  background: #3d2f47;
}
a:hover {
  text-decoration-color: var(--accent);
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}
::selection {
  background: var(--accent);
  color: var(--bg);
}
[hidden] {
  display: none !important;
}
.wrap {
  width: calc(100% - 96px);
  max-width: 1320px;
  margin-inline: auto;
}
.muted {
  color: var(--muted);
}
.skip {
  position: fixed;
  left: 16px;
  top: -90px;
  padding: 10px 20px;
  background: var(--accent);
  color: var(--bg);
  z-index: 20;
}
.skip:focus {
  top: 12px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.site-header {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.035em;
  text-decoration: none;
  white-space: nowrap;
}
.brand-symbol {
  color: var(--accent);
  font-size: 32px;
  font-weight: 500;
}
.site-header nav {
  display: flex;
  gap: 32px;
  font-size: 15px;
}
.site-header nav a,
.login {
  text-decoration: none;
}
.login {
  font-size: 15px;
  padding: 10px 0;
}
.login span {
  margin-left: 15px;
}
.hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  column-gap: 44px;
  align-items: center;
  padding-top: 4px;
}
.hero-copy {
  padding-top: 38px;
  padding-bottom: 35px;
}
.hero-description {
  font-size: 21px;
  line-height: 1.5;
  max-width: 470px;
  margin-top: 26px;
  color: var(--muted);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.button {
  min-height: 50px;
  padding: 13px 20px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.primary {
  background: var(--accent);
  color: var(--bg);
}
.primary:hover {
  background: #cbbed4;
}
.secondary-button {
  background: var(--raised);
  color: var(--ink);
}
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 28px;
  font-size: 14px;
  color: var(--muted);
}
.hero-scene {
  min-width: 0;
}
.character-row {
  height: 174px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.null-character {
  position: relative;
  width: 190px;
  height: 190px;
  flex: 0 0 190px;
  overflow: hidden;
  transform-origin: 50% 80%;
}
.null-character img {
  position: absolute;
  width: 200%;
  height: 200%;
  max-width: none;
  pointer-events: none;
}
.null-character[data-pose="idle"] img {
  left: 0;
  top: 0;
}
.null-character[data-pose="reading"] img {
  left: -100%;
  top: 0;
}
.null-character[data-pose="finding"] img {
  left: 0;
  top: -100%;
}
.null-character[data-pose="approved"] img {
  left: -100%;
  top: -100%;
}
.character-caption {
  max-width: 220px;
  font-size: 14px;
  color: var(--muted);
}
.character-caption strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
  font-weight: 550;
  margin-bottom: 4px;
}
.review-player[data-ui] {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  scroll-margin-top: 20px;
}
.player-bar,
.fragment-header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  font-size: 13px;
  color: var(--muted);
}
[data-ui] .player-bar {
  border-bottom: 1px solid var(--line);
}
.player-bar > span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.player-bar button {
  font-size: 13px;
  padding: 6px 10px;
  min-height: 36px;
}
.status-dot,
.event-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex: none;
}
.stage-body {
  padding: 19px 22px 10px;
  min-height: 264px;
}
.file-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  font-size: 13px;
  color: var(--muted);
}
.diff-line {
  padding: 15px 12px;
  background: #2e2436;
  margin: 12px -2px 18px;
  color: #e6e0eb;
  font-size: 12px;
  line-height: 1.8;
}
.diff-line code {
  font-size: 12px;
}
.line-number {
  color: var(--muted);
  margin-right: 10px;
}
.finding .bot-name {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  gap: 8px;
  align-items: center;
}
.bot-name > span {
  color: var(--accent);
}
.finding h2 {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 8px 0;
}
.finding p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  min-height: 63px;
}
.decision {
  font-size: 12px;
  color: var(--warning);
  margin: 15px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.decision:before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.decision.success {
  color: var(--success);
}
.timeline {
  padding: 8px 20px 0;
}
.stage-buttons {
  display: flex;
  gap: 5px;
}
.stage-buttons button {
  flex: 1;
  font-size: 12px;
  min-height: 38px;
  padding: 8px 4px;
  background: transparent;
  color: var(--muted);
}
.stage-buttons button[aria-pressed="true"] {
  background: var(--raised);
  color: var(--ink);
}
#stage-range {
  display: block;
  width: 100%;
  accent-color: var(--accent);
  height: 18px;
  margin: 9px 0 3px;
  cursor: pointer;
}
.replay-track {
  height: 2px;
  background: var(--line);
  overflow: hidden;
}
.replay-track span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}
.player-caption {
  padding: 10px 20px 14px;
  font-size: 12px;
  color: var(--muted);
  min-height: 43px;
}
.hero-foot {
  grid-column: 1/-1;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 27px 0 37px;
  font-size: 12px;
  color: var(--muted);
}
.text-control {
  background: transparent;
  padding: 6px 0;
  font-size: 12px;
  white-space: nowrap;
  color: var(--muted);
}
.text-control:hover {
  background: transparent;
  color: var(--ink);
}
.review-explanation {
  display: grid;
  grid-template-columns: 1fr 2.1fr;
  gap: 60px;
  padding-top: 40px;
  padding-bottom: 42px;
  background: var(--surface);
  padding-inline: 40px;
  border-radius: var(--radius);
}
.review-explanation h2 {
  font-size: 32px;
}
.review-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.review-steps p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}
.review-steps strong {
  display: block;
  font-size: 17px;
  color: var(--ink);
  font-weight: 550;
  margin-bottom: 10px;
}
.section-space {
  margin-top: 112px;
}
.context-layout,
.rules-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}
.section-copy {
  max-width: 440px;
}
.section-copy > p {
  margin-top: 24px;
}
.section-copy > p + p {
  margin-top: 14px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  font-size: 15px;
  font-weight: 550;
  margin-top: 24px;
}
.context-preview,
.rules-preview,
.activity-preview {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}
[data-ui] .fragment-header {
  font-size: 13px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}
.fragment-header strong {
  color: var(--ink);
  font-weight: 550;
  font-size: 15px;
}
.fragment-header button {
  font-size: 12px;
  padding: 6px 10px;
  min-height: 36px;
}
.context-tree {
  padding: 12px 24px;
}
.source-row {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 0;
}
.file-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--raised);
  color: var(--accent);
  flex: none;
  font-size: 17px;
}
.source-row > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.source-row strong {
  font-weight: 500;
  font-size: 15px;
}
.source-row > div > span {
  font-size: 13px;
  color: var(--muted);
}
.context-tag {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}
.context-result {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--raised);
  font-size: 14px;
}
.context-result > span {
  font-size: 25px;
  color: var(--accent);
}
.context-result p > span {
  color: var(--muted);
  font-size: 13px;
}
.rules-layout {
  margin-top: 80px;
}
.rules-layout .section-copy {
  justify-self: end;
}
.settings {
  margin: 0;
  padding: 8px 24px;
}
.settings > div {
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: 12px;
  padding: 15px 0;
}
.settings dt {
  font-size: 13px;
  color: var(--muted);
}
.settings dd {
  margin: 0;
  font-size: 14px;
}
.feedback-note {
  background: var(--raised);
  padding: 20px 24px;
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 14px;
}
.feedback-note > span {
  font-size: 24px;
  color: var(--accent);
}
.feedback-note code {
  font-size: 12px;
  color: var(--muted);
}
.operations-section {
  background: var(--surface);
  padding-block: 72px;
}
.section-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: end;
  margin-bottom: 42px;
}
.section-heading > p {
  max-width: 460px;
  color: var(--muted);
  font-size: 18px;
}
.operations-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: start;
}
.activity-preview {
  background: var(--bg);
}
.activity-list {
  list-style: none;
  margin: 0;
  padding: 14px 24px;
}
.activity-list li {
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 18px 0;
}
.activity-list strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
}
.activity-list li > div > span {
  font-size: 13px;
  color: var(--muted);
}
.event-dot {
  background: var(--success);
}
.event-state {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}
.operations-copy {
  display: grid;
  gap: 24px;
}
.operations-copy h3 {
  font-size: 20px;
  margin-bottom: 6px;
}
.operations-copy p {
  font-size: 15px;
  color: var(--muted);
}
.operations-copy .text-link {
  margin-top: 0;
}
.architecture-flow {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 0;
}
.architecture-flow li {
  position: relative;
  background: var(--surface);
  padding: 23px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.architecture-flow li:not(:last-child):after {
  content: "→";
  position: absolute;
  right: -10px;
  top: 26px;
  z-index: 1;
  color: var(--accent);
  font-size: 22px;
}
.architecture-flow strong {
  font-size: 20px;
  font-weight: 550;
}
.architecture-flow span {
  font-size: 13px;
  color: var(--muted);
}
.architecture-note {
  display: flex;
  gap: 40px;
  align-items: start;
  margin-top: 24px;
  padding: 26px 0;
}
.architecture-note strong {
  font-size: 18px;
  max-width: 410px;
  font-weight: 500;
}
.architecture-note p {
  max-width: 510px;
  color: var(--muted);
  font-size: 15px;
}
details {
  background: var(--surface);
  border-radius: 4px;
  margin-top: 10px;
  padding: 0 24px;
}
summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 32px 20px 0;
  position: relative;
  font-size: 16px;
  font-weight: 500;
}
summary::-webkit-details-marker {
  display: none;
}
summary:after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 17px;
  font-size: 22px;
  color: var(--muted);
  font-weight: 400;
}
details[open] > summary {
  margin-bottom: 8px;
}
details[open] > summary:after {
  content: "−";
}
details > p {
  font-size: 15px;
  color: var(--muted);
  max-width: 940px;
  margin-bottom: 18px;
}
details > p:last-child {
  padding-bottom: 20px;
  margin-bottom: 0;
}
.proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.proof-stack {
  display: grid;
  gap: 26px;
}
.proof-grid a {
  display: block;
  background: var(--surface);
  padding: 12px;
  border-radius: var(--radius);
}
.proof-grid img {
  width: 100%;
  height: auto;
}
.proof-grid figcaption {
  padding-top: 14px;
  font-size: 15px;
}
.proof-grid figcaption strong {
  font-weight: 500;
  display: block;
}
.proof-grid figcaption span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.comparison {
  margin-top: 35px;
}
.table-scroll {
  overflow-x: auto;
  margin-bottom: 20px;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
  min-width: 620px;
}
caption {
  text-align: left;
  font-size: 12px;
  color: var(--muted);
  padding-bottom: 12px;
}
td,
th {
  padding: 14px;
  border: 1px solid var(--line);
  vertical-align: top;
}
th {
  font-weight: 550;
}
td {
  color: var(--muted);
}
.install-section {
  background: var(--surface);
  padding-block: 72px;
}
.install-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}
.terminal {
  background: var(--bg);
  border-radius: var(--radius);
  overflow: hidden;
}
.terminal pre {
  padding: 24px;
  font-size: 16px;
  line-height: 2;
  color: var(--accent);
}
.terminal > p {
  font-size: 13px;
  color: var(--muted);
  padding: 0 24px 24px;
}
.install-access {
  max-width: 400px;
}
.install-access h3 {
  font-size: 26px;
  margin-bottom: 12px;
}
.install-access .button {
  margin-top: 24px;
  margin-bottom: 16px;
}
.install-access .muted {
  font-size: 13px;
}
.faq {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr 2.1fr;
  gap: 60px;
}
.faq > h3 {
  font-size: 26px;
  align-self: start;
}
.faq details {
  background: var(--bg);
  margin-top: 8px;
}
.faq details:first-child {
  margin-top: 0;
}
.faq p {
  font-size: 14px;
}
.faq code {
  font-size: 12px;
}
footer {
  padding-block: 40px;
}
.footer-top,
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.footer-top p {
  font-size: 16px;
  color: var(--muted);
}
.footer-top > a:last-child {
  font-size: 14px;
}
.footer-bottom {
  margin-top: 32px;
  font-size: 12px;
  color: var(--muted);
}
.footer-bottom > div {
  display: flex;
  gap: 20px;
}
@media (min-width: 1600px) {
  .hero {
    padding-top: 32px;
    column-gap: 80px;
  }
  .hero-copy {
    padding-top: 20px;
  }
  .hero-foot {
    padding-bottom: 44px;
  }
  .character-row {
    height: 200px;
  }
  .null-character {
    width: 220px;
    height: 220px;
    flex-basis: 220px;
  }
}
@media (max-width: 1100px) {
  .diff-line {
    min-height: 74px;
  }
  .wrap {
    width: calc(100% - 56px);
  }
  .site-header nav {
    gap: 20px;
  }
  .hero {
    gap: 28px;
  }
  h1 {
    font-size: 50px;
  }
  .hero-description {
    font-size: 18px;
  }
  .hero-actions {
    gap: 10px;
  }
  .button {
    font-size: 14px;
    padding: 12px 16px;
  }
  .hero-facts {
    gap: 16px;
    font-size: 12px;
  }
  .stage-body {
    padding: 18px 16px 8px;
    min-height: 288px;
  }
  .character-caption {
    max-width: 160px;
    font-size: 12px;
  }
  .character-caption strong {
    font-size: 16px;
  }
  .null-character {
    width: 170px;
    height: 170px;
    flex-basis: 170px;
  }
  .character-row {
    height: 154px;
  }
  .review-explanation {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px;
  }
  .review-explanation h2 br {
    display: none;
  }
  .context-layout,
  .rules-layout,
  .section-heading,
  .install-grid {
    gap: 48px;
  }
  .operations-layout {
    gap: 40px;
  }
  .settings > div {
    grid-template-columns: 110px 1fr;
  }
  .context-tag {
    display: none;
  }
  .event-state {
    display: none;
  }
  .architecture-flow strong {
    font-size: 17px;
  }
  .architecture-flow li {
    padding: 20px 12px;
  }
  .architecture-flow span {
    font-size: 12px;
  }
}
@media (max-width: 800px) {
  .site-header {
    height: 80px;
  }
  .site-header nav {
    gap: 18px;
    font-size: 13px;
  }
  .brand {
    font-size: 20px;
  }
  .brand-symbol {
    font-size: 28px;
  }
  .hero {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .hero-copy {
    padding-top: 0;
  }
  .hero h1 {
    font-size: 42px;
  }
  .hero-description {
    font-size: 16px;
    margin-top: 20px;
  }
  .hero-actions {
    flex-direction: column;
    align-items: start;
    margin-top: 24px;
  }
  .hero-facts {
    gap: 10px;
    margin-top: 20px;
  }
  .character-caption {
    display: none;
  }
  .character-row {
    height: 135px;
  }
  .null-character {
    width: 150px;
    height: 150px;
    flex-basis: 150px;
  }
  .player-bar {
    padding: 10px 12px;
    font-size: 11px;
  }
  .player-bar > span {
    gap: 5px;
  }
  .player-bar button {
    font-size: 11px;
    padding: 6px 8px;
  }
  .stage-body {
    padding: 16px 12px 8px;
    min-height: 307px;
  }
  .finding h2 {
    font-size: 18px;
  }
  .finding p {
    font-size: 13px;
    min-height: 78px;
  }
  .diff-line code {
    font-size: 11px;
  }
  .stage-buttons button {
    font-size: 11px;
  }
  .timeline {
    padding-inline: 10px;
  }
  .player-caption {
    padding-inline: 12px;
    font-size: 11px;
    min-height: 52px;
  }
  .hero-foot {
    padding-top: 16px;
    padding-bottom: 30px;
    font-size: 11px;
  }
  .hero-foot p {
    max-width: 400px;
  }
  .text-control {
    font-size: 11px;
  }
  .section-space {
    margin-top: 80px;
  }
  .context-layout,
  .rules-layout {
    gap: 32px;
  }
  .section-copy p {
    font-size: 15px;
  }
  .context-preview .fragment-header,
  .rules-preview .fragment-header {
    padding: 16px;
  }
  .context-preview .fragment-header > span,
  .rules-preview .fragment-header > span {
    font-size: 11px;
  }
  .context-tree {
    padding: 8px 16px;
  }
  .source-row {
    gap: 10px;
  }
  .source-row strong {
    font-size: 14px;
  }
  .source-row > div > span {
    font-size: 12px;
  }
  .file-mark {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
  .context-result {
    padding: 16px;
    font-size: 13px;
  }
  .settings {
    padding-inline: 16px;
  }
  .settings > div {
    grid-template-columns: 90px 1fr;
  }
  .settings dd {
    font-size: 13px;
  }
  .settings dt {
    font-size: 12px;
  }
  .feedback-note {
    padding: 16px;
  }
  .feedback-note code {
    font-size: 11px;
  }
  .section-heading {
    gap: 32px;
  }
  .section-heading > p {
    font-size: 16px;
  }
  .operations-layout {
    grid-template-columns: 1.15fr 1fr;
    gap: 30px;
  }
  .activity-list {
    padding: 10px 16px;
  }
  .activity-list li {
    gap: 10px;
    padding: 14px 0;
  }
  .activity-list li > div > span {
    font-size: 12px;
  }
  .activity-list strong {
    font-size: 14px;
  }
  .activity-preview .fragment-header {
    padding: 16px;
  }
  .activity-preview .fragment-header > span {
    display: none;
  }
  .architecture-flow {
    grid-template-columns: repeat(3, 1fr);
  }
  .architecture-flow li:nth-child(3):after {
    content: none;
  }
  .architecture-note {
    gap: 25px;
  }
  .architecture-note strong {
    font-size: 16px;
  }
  .architecture-note p {
    font-size: 14px;
  }
  .proof-grid {
    gap: 20px;
  }
  .proof-grid a {
    padding: 8px;
  }
  .proof-stack {
    gap: 20px;
  }
  .install-grid {
    gap: 35px;
  }
  .terminal .fragment-header {
    padding: 14px 16px;
    font-size: 11px;
  }
  .terminal pre {
    padding: 18px;
    font-size: 14px;
  }
  .terminal > p {
    padding: 0 18px 18px;
    font-size: 12px;
  }
  .faq {
    gap: 32px;
    grid-template-columns: 1fr 2fr;
  }
  .faq > h3 {
    font-size: 24px;
  }
  .footer-top p {
    font-size: 14px;
  }
}
@media (max-width: 600px) {
  .wrap {
    width: calc(100% - 36px);
  }
  .site-header {
    height: 74px;
    gap: 16px;
  }
  .site-header nav {
    display: none;
  }
  .brand {
    font-size: 21px;
  }
  .login {
    font-size: 14px;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 30px;
  }
  .hero-copy {
    padding: 0;
  }
  .hero h1 {
    font-size: 40px;
    line-height: 1.08;
    max-width: 420px;
    letter-spacing: -0.04em;
  }
  .hero-description {
    font-size: 17px;
    max-width: 390px;
    margin-top: 22px;
  }
  .hero-actions {
    flex-direction: row;
    align-items: stretch;
    margin-top: 24px;
    gap: 10px;
  }
  .hero-actions .button {
    font-size: 13px;
    padding: 12px 14px;
    gap: 12px;
    min-height: 46px;
  }
  .hero-facts {
    font-size: 12px;
    gap: 20px;
    margin-top: 23px;
  }
  .hero-scene {
    margin-top: 20px;
  }
  .character-row {
    justify-content: start;
    height: 137px;
    padding-left: 8px;
    gap: 3px;
  }
  .character-caption {
    display: block;
    max-width: 170px;
    font-size: 12px;
  }
  .character-caption strong {
    font-size: 16px;
  }
  .null-character {
    width: 150px;
    height: 150px;
    flex-basis: 150px;
  }
  .player-bar {
    font-size: 12px;
    padding: 12px 14px;
  }
  .player-bar button {
    font-size: 12px;
  }
  .stage-body {
    min-height: 278px;
    padding: 17px 16px 10px;
  }
  .finding h2 {
    font-size: 19px;
  }
  .finding p {
    font-size: 14px;
    min-height: 84px;
  }
  .diff-line code {
    font-size: 11px;
  }
  .timeline {
    padding-inline: 14px;
  }
  .stage-buttons button {
    font-size: 12px;
    min-height: 42px;
  }
  .player-caption {
    font-size: 12px;
    min-height: 43px;
    padding-inline: 16px;
  }
  .hero-foot {
    flex-direction: column;
    align-items: start;
    gap: 5px;
    padding: 18px 0 30px;
  }
  .hero-foot p {
    font-size: 12px;
    max-width: 320px;
  }
  .text-control {
    font-size: 12px;
    min-height: 44px;
  }
  .review-explanation {
    padding: 26px;
    gap: 24px;
  }
  .review-explanation h2 {
    font-size: 30px;
  }
  .review-explanation h2 br {
    display: block;
  }
  .review-steps {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .review-steps strong {
    font-size: 17px;
    margin-bottom: 4px;
  }
  .review-steps p {
    font-size: 14px;
  }
  .section-space {
    margin-top: 66px;
  }
  h2 {
    font-size: 36px;
  }
  .context-layout,
  .rules-layout,
  .operations-layout,
  .section-heading,
  .install-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .section-copy {
    max-width: none;
  }
  .section-copy > p {
    margin-top: 20px;
    font-size: 16px;
  }
  .section-copy > p + p {
    margin-top: 12px;
  }
  .rules-layout {
    margin-top: 54px;
  }
  .rules-layout .section-copy {
    grid-row: 1;
    justify-self: start;
  }
  .context-preview .fragment-header,
  .rules-preview .fragment-header {
    padding: 18px;
  }
  .context-preview .fragment-header > span,
  .rules-preview .fragment-header > span {
    font-size: 12px;
  }
  .context-tree {
    padding: 10px 18px;
  }
  .source-row {
    padding: 15px 0;
  }
  .source-row strong {
    font-size: 15px;
  }
  .source-row > div > span {
    font-size: 13px;
  }
  .file-mark {
    width: 34px;
    height: 34px;
  }
  .context-result {
    padding: 18px;
    font-size: 14px;
  }
  .settings {
    padding: 8px 18px;
  }
  .settings > div {
    grid-template-columns: 110px 1fr;
  }
  .settings dt {
    font-size: 13px;
  }
  .settings dd {
    font-size: 14px;
  }
  .feedback-note {
    padding: 18px;
  }
  .feedback-note code {
    font-size: 12px;
  }
  .operations-section,
  .install-section {
    padding-block: 48px;
  }
  .section-heading {
    gap: 20px;
    margin-bottom: 28px;
  }
  .section-heading > p {
    font-size: 16px;
  }
  .operations-copy {
    gap: 20px;
  }
  .operations-copy h3 {
    font-size: 21px;
  }
  .activity-list {
    padding: 10px 18px;
  }
  .activity-list li {
    padding: 16px 0;
  }
  .activity-list strong {
    font-size: 15px;
  }
  .activity-list li > div > span {
    font-size: 12px;
  }
  .activity-preview .fragment-header {
    padding: 18px;
  }
  .architecture-flow {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .architecture-flow li {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 18px;
    gap: 16px;
  }
  .architecture-flow strong {
    font-size: 18px;
  }
  .architecture-flow span {
    font-size: 13px;
    text-align: right;
  }
  .architecture-flow li:not(:last-child):after {
    content: "↓";
    top: auto;
    bottom: -19px;
    left: 32px;
    right: auto;
    font-size: 20px;
  }
  .architecture-note {
    flex-direction: column;
    gap: 12px;
    padding: 10px 0 16px;
    margin-top: 26px;
  }
  .architecture-note strong {
    font-size: 18px;
  }
  .architecture-note p {
    font-size: 15px;
  }
  .proof-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .proof-stack {
    gap: 28px;
  }
  .proof-grid a {
    padding: 8px;
  }
  .proof-grid figcaption {
    font-size: 16px;
  }
  .proof-grid figcaption span {
    font-size: 12px;
  }
  .comparison {
    margin-top: 28px;
  }
  details {
    padding-inline: 18px;
  }
  summary {
    font-size: 15px;
    padding-block: 18px;
  }
  summary:after {
    top: 14px;
  }
  details > p {
    font-size: 14px;
  }
  .terminal .fragment-header {
    font-size: 12px;
    padding: 16px;
  }
  .terminal pre {
    font-size: 15px;
    padding: 20px;
  }
  .terminal > p {
    font-size: 13px;
    padding: 0 20px 20px;
  }
  .install-access {
    padding-top: 4px;
  }
  .install-access h3 {
    font-size: 24px;
  }
  .faq {
    margin-top: 48px;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .faq > h3 {
    font-size: 26px;
    align-self: start;
  }
  .footer-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
  }
  .footer-top p {
    grid-row: 2;
    grid-column: 1/-1;
  }
  .footer-bottom {
    align-items: start;
    flex-direction: column;
    gap: 14px;
    margin-top: 26px;
  }
  footer {
    padding-block: 32px;
  }
}
@media (max-width: 360px) {
  .hero h1 {
    font-size: 36px;
  }
  .hero-actions {
    gap: 8px;
  }
  .hero-actions .button {
    padding: 12px 10px;
    font-size: 12px;
    gap: 8px;
  }
  .hero-facts {
    gap: 15px;
  }
  .character-caption {
    max-width: 135px;
  }
  .character-row {
    padding-left: 0;
  }
  .null-character {
    width: 140px;
    height: 140px;
    flex-basis: 140px;
  }
  .finding h2 {
    font-size: 18px;
  }
  .stage-body {
    min-height: 300px;
  }
  .finding p {
    min-height: 105px;
  }
  .diff-line code {
    font-size: 10px;
  }
  .stage-buttons button {
    font-size: 11px;
  }
  .fragment-header strong {
    font-size: 14px;
  }
  .settings > div {
    grid-template-columns: 95px 1fr;
  }
  .settings dd {
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}

/* The original alpha artwork is layered in the DOM; its image file stays intact. */
.null-home {
  width: 190px;
  height: 190px;
  flex: 0 0 190px;
}
.null-traveler {
  width: 100%;
  height: 100%;
  transform-origin: 50% 70%;
}
.null-home .null-character,
#chat-pet-seat .null-character,
.companion-dock .null-character {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.null-character,
.null-character:hover {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  display: block;
}
.null-art,
.null-base-layer,
.null-arm {
  display: block;
  position: absolute;
  inset: 0;
}
.null-base-layer,
.null-arm {
  overflow: hidden;
}
.null-art {
  transform-origin: 54% 85%;
}
.null-arm,
.null-face {
  display: none;
  pointer-events: none;
}
.living .null-face {
  display: block;
}
.living[data-pose="idle"] .null-base-layer {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 72%,
    66.5% 72%,
    66.5% 86%,
    100% 86%,
    100% 100%,
    0 100%,
    0 83%,
    44.3% 83%,
    44.3% 69%,
    0 69%
  );
}
.living[data-pose="idle"] .null-arm {
  display: block;
}
.null-arm-left {
  clip-path: polygon(29% 69%, 44.3% 69%, 44.3% 83%, 29% 83%);
  transform-origin: 44% 73%;
}
.null-arm-right {
  clip-path: polygon(66.5% 72%, 80% 72%, 80% 86%, 66.5% 86%);
  transform-origin: 66.5% 74%;
}
.null-face {
  position: absolute;
  left: 43%;
  top: 46.7%;
  width: 25.3%;
  height: 16%;
  background: #0c0a0e;
}
.null-gaze {
  display: block;
  position: absolute;
  inset: 0;
}
.null-eye {
  display: block;
  position: absolute;
  top: 22%;
  width: 21%;
  height: 60%;
  background: #a58fb5;
  box-shadow: 0 0 4px #7f6293; /* taste-skill-ignore: luminous character eyes */
  transform-origin: center;
  clip-path: polygon(
    16% 0,
    84% 0,
    84% 10%,
    100% 10%,
    100% 90%,
    84% 90%,
    84% 100%,
    16% 100%,
    16% 90%,
    0 90%,
    0 10%,
    16% 10%
  );
} /* taste-skill-ignore: the eyes reproduce the character's luminous pixel display. */
.eye-left {
  left: 12%;
}
.eye-right {
  right: 12%;
}
[data-pose="reading"] .null-face {
  left: 38%;
  top: 49.5%;
  width: 25%;
  height: 15%;
}
[data-pose="reading"] .null-eye {
  top: 35%;
  height: 52%;
}
[data-pose="finding"] .null-face {
  left: 43%;
  top: 43.3%;
  width: 27%;
  height: 17.5%;
}
[data-pose="finding"] .null-eye {
  top: 17%;
  height: 67%;
  width: 25%;
}
[data-pose="approved"] .null-face {
  left: 35%;
  top: 46%;
  width: 30%;
  height: 13%;
}
[data-pose="approved"] .null-eye {
  top: 24%;
  width: 30%;
  height: 48%;
  clip-path: polygon(
    0 100%,
    0 60%,
    20% 60%,
    20% 30%,
    35% 30%,
    35% 0,
    65% 0,
    65% 30%,
    80% 30%,
    80% 60%,
    100% 60%,
    100% 100%,
    75% 100%,
    75% 70%,
    60% 70%,
    60% 45%,
    40% 45%,
    40% 70%,
    25% 70%,
    25% 100%
  );
}
.companion-dock {
  position: fixed;
  z-index: 8;
  right: 12px;
  bottom: 12px;
  width: 116px;
  text-align: center;
}
.companion-dock #companion-seat {
  width: 110px;
  height: 110px;
  margin-inline: auto;
}
.companion-dock .null-traveler {
  width: 110px;
  height: 110px;
}
.companion-dock p {
  font-size: 12px;
  line-height: 1.4;
  padding: 6px 8px;
  background: var(--surface);
  border-radius: 4px;
}
.companion-dock #companion-hide {
  min-height: 44px;
  padding: 6px 12px;
  font-size: 12px;
  background: var(--bg);
  color: var(--muted);
}
@media (min-width: 1600px) {
  .null-home {
    width: 220px;
    height: 220px;
    flex-basis: 220px;
  }
}
@media (max-width: 1100px) {
  .null-home {
    width: 170px;
    height: 170px;
    flex-basis: 170px;
  }
}
@media (max-width: 800px) {
  .null-home {
    width: 150px;
    height: 150px;
    flex-basis: 150px;
  }
}
@media (max-width: 360px) {
  .null-home {
    width: 140px;
    height: 140px;
    flex-basis: 140px;
  }
}

/* A small composer beneath Null, with his answer in a speech bubble. */
.companion-dock {
  bottom: 16px;
  right: 20px;
  width: 110px;
}
.companion-dock p {
  display: none;
}
.companion-dock #companion-hide {
  position: absolute;
  right: -4px;
  top: 0;
  min-width: 32px;
  min-height: 32px;
  padding: 4px;
  font-size: 11px;
  background: transparent;
  opacity: 0;
}
.companion-dock:hover #companion-hide,
.companion-dock:focus-within #companion-hide {
  opacity: 1;
}
.null-chat {
  position: fixed;
  inset: auto 20px 18px auto;
  z-index: 20;
  width: min(350px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  pointer-events: none;
}
.null-chat[hidden] {
  display: none;
}
.chat-bubble {
  position: relative;
  background: #2a2031;
  border-radius: 18px;
  padding: 8px 16px 16px;
  pointer-events: auto;
  min-height: 0;
}
.chat-bubble::after {
  content: "";
  position: absolute;
  bottom: -10px;
  right: 48px;
  width: 22px;
  height: 14px;
  background: #2a2031;
  clip-path: polygon(0 0, 100% 0, 70% 100%);
}
.chat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  gap: 12px;
  color: #b7b7b7;
  font-size: 11px;
}
.chat-toolbar button {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  font-size: 22px;
  background: transparent;
  border: 0;
}
.chat-messages {
  overflow: auto;
  overscroll-behavior: contain;
  max-height: min(260px, calc(100dvh - 300px));
  font-size: 14px;
  line-height: 1.55;
  color: #ffffff;
}
.chat-message p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-message a {
  display: block;
  margin-top: 8px;
  color: #ffffff;
  text-decoration: underline;
  font-size: 12px;
}
.chat-status {
  color: #d4cadc;
  font-size: 11px;
  line-height: 1.4;
  margin: 8px 0 0;
}
.chat-status:empty {
  display: none;
}
#chat-pet-seat {
  width: 110px;
  height: 110px;
  flex: 0 0 110px;
  align-self: flex-end;
  margin: 2px 8px -3px 0;
  pointer-events: auto;
}
#chat-pet-seat .null-traveler {
  width: 110px;
  height: 110px;
}
#chat-form {
  margin: 0;
  padding: 0;
  pointer-events: auto;
}
.chat-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid #665274;
  border-radius: 28px;
  background: #201825;
}
.chat-composer:focus-within {
  border-color: #ffffff;
}
.chat-composer textarea {
  flex: 1;
  width: 100%;
  min-width: 0;
  resize: none;
  border: 0;
  outline: none;
  padding: 4px 0;
  color: #ffffff;
  background: transparent;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  max-height: 68px;
}
.chat-composer textarea::placeholder {
  color: #b7b7b7;
}
.chat-composer button {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-size: 23px;
}
#chat-send {
  background: #ffffff;
  color: #000000;
}
#chat-clear {
  background: #372b40;
  color: #e1dae6;
}
#chat-send:disabled {
  opacity: 0.5;
  cursor: wait;
}
.chat-privacy {
  background: #000000;
  border-radius: 6px;
  padding: 4px 8px;
  margin: 7px 0 0;
  font-size: 10px;
  line-height: 1.4;
  color: #b7b7b7;
}
@media (max-width: 600px) {
  .null-chat {
    right: 12px;
    bottom: 12px;
  }
  .companion-dock {
    right: 12px;
    bottom: 12px;
  }
  .companion-dock #companion-hide {
    opacity: 1;
  }
}
@media (max-height: 500px) {
  #chat-pet-seat {
    height: 74px;
    flex-basis: 74px;
    width: 74px;
  }
  #chat-pet-seat .null-traveler {
    width: 74px;
    height: 74px;
  }
  .chat-messages {
    max-height: calc(100dvh - 220px);
  }
}
/* Product positioning and demo booking, shared brand tokens. */
.hero-emphasis{color:#ffffff}.hero-copy h1{font-size:clamp(40px,4.5vw,66px);line-height:1.05;letter-spacing:-.045em}.hero-actions{flex-wrap:wrap}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;color:#b7b7b7}.fine-print{font-size:13px;color:#b7b7b7;line-height:1.6;margin-top:20px}.fine-print a{text-decoration:underline;text-underline-offset:3px}.pain-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:48px}.pain-grid article{border-top:1px solid #393939;padding-top:24px}.pain-mark{font-size:32px;color:#ffffff}.pain-grid h3{font-size:23px;margin:12px 0}.pain-grid p{color:#b7b7b7;line-height:1.6}.resolution{margin-top:26px;padding-left:18px;border-left:2px solid #ffffff}.resolution strong{font-size:17px;color:#ffffff}.value-strip{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-top:44px;padding:24px 0;border-top:1px solid #393939;border-bottom:1px solid #393939}.value-strip strong{color:#ffffff;flex:1 1 220px}.value-strip span{font-size:14px}.duo-section{background:#0e0e0e}.duel{position:relative;display:grid;grid-template-columns:1fr 40px 1fr;gap:24px;margin:44px 0 12px;padding:38px 32px 24px;background:#191919;border-radius:22px}.duel-agent{display:flex;gap:24px;align-items:center;min-width:0}.duel-agent h3{font-size:24px;margin:8px 0}.duel-agent p:not(.eyebrow){color:#c4c4c4;min-height:76px;line-height:1.55}.duel-divider{align-self:center;text-align:center;color:#b7b7b7}.duo-avatar{position:relative;width:100px;height:100px;flex-shrink:0;background:#d18bfa;border-radius:26px;box-shadow:inset 0 -9px #9565ba;transform:rotate(-5deg)}.duo-ears:before,.duo-ears:after{content:'';position:absolute;top:-13px;width:24px;height:33px;background:#d18bfa;border-radius:8px;transform:rotate(-15deg)}.duo-ears:before{left:9px}.duo-ears:after{right:9px;transform:rotate(15deg)}.duo-face{position:absolute;inset:22px 15px;background:#352645;border-radius:14px;color:#fff;font-size:35px;letter-spacing:8px;text-align:center;line-height:45px;padding-left:8px}.duel-null{position:relative;overflow:hidden;width:116px;height:116px;flex-shrink:0}.duel-null img{position:absolute;max-width:none;width:232px;height:232px;top:0;left:0}.duel-controls{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;border-top:1px solid #393939;padding-top:22px;margin-top:10px}.duel-tabs{display:flex;gap:6px;flex-wrap:wrap}.duel-controls button{min-height:44px;background:transparent;border:1px solid #6b567a;border-radius:8px;color:#f4f2f6;padding:10px 15px;font:inherit;cursor:pointer}.duel-tabs [aria-pressed=true]{background:#ffffff;border-color:#ffffff;color:#000000}.duel.is-playing .duo-avatar{animation:duo-nod 2.5s ease-in-out infinite}.duel.is-playing .duel-null{animation:null-nod 2.5s ease-in-out infinite}.duel[data-step="1"] .duel-null img{left:-116px}.duel[data-step="2"] .duel-null img{top:-116px;left:-116px}@keyframes duo-nod{50%{transform:translateY(-8px) rotate(3deg)}}@keyframes null-nod{50%{transform:translateY(-9px) rotate(-3deg)}}.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin:40px 0}.pricing-grid article{padding:28px 0;border-top:1px solid #6b567a}.pricing-grid h3{font-size:22px;margin:14px 0}.pricing-grid .price{font-size:42px;letter-spacing:-.04em;margin:18px 0;color:#ffffff}.price span{font-size:15px;color:#b7b7b7;letter-spacing:0}.pricing-grid p:not(.price):not(.eyebrow){line-height:1.6;color:#c4c4c4;max-width:540px}.duo-section table{min-width:680px}.duo-section th,.duo-section td{padding:18px 16px;vertical-align:top;line-height:1.5}.duo-section caption{text-align:left;font-size:12px;color:#b7b7b7;padding:16px}.package-diagram{display:flex;gap:50px;align-items:center;margin-top:30px;padding:32px;border:1px solid #393939;border-radius:16px}.package-core{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;min-width:35%}.package-core .brand-symbol{grid-row:1/3;font-size:60px;line-height:1}.package-core strong{font-size:28px}.package-core>span:last-child{color:#b7b7b7;font-size:14px}.package-config{display:grid;gap:12px;flex:1;border-left:1px solid #ffffff;padding-left:35px}.package-config span{padding:15px;background:#191919;border-radius:8px}.booking-section{background:#241c2a}.booking-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px}.booking-layout h2{font-size:clamp(32px,4vw,53px);line-height:1.1;letter-spacing:-.035em;margin:24px 0}.booking-layout p{line-height:1.6;color:#c4c4c4;max-width:470px}.demo-agenda{list-style:none;padding:0;margin-top:32px}.demo-agenda li{padding:14px 0;border-top:1px solid #393939}.demo-agenda li:before{content:'↗';color:#ffffff;margin-right:14px}.booking-panel{border:1px solid #6b567a;border-radius:18px;background:#000000;overflow:hidden}.booking-panel iframe{width:100%;height:820px;border:0;display:block}.product-film{display:block;aspect-ratio:16/9;object-fit:contain;width:100%;max-height:650px;background:#000000;border:1px solid #393939;border-radius:16px}button:focus-visible,a:focus-visible{outline:3px solid #ffffff;outline-offset:4px}
@media(max-width:1050px){.duel-agent{flex-direction:column;align-items:flex-start}.duel-agent p:not(.eyebrow){min-height:100px}.booking-layout{gap:30px;grid-template-columns:1fr 1.2fr}}
@media(max-width:700px){.pain-grid,.pricing-grid,.booking-layout{grid-template-columns:1fr}.pain-grid{gap:22px}.duel{grid-template-columns:1fr;gap:10px;padding:26px 20px}.duel-agent{flex-direction:row;gap:18px}.duel-agent h3{font-size:21px}.duel-agent p:not(.eyebrow){min-height:0;font-size:15px}.duel-divider{font-size:13px;margin:4px}.duel-controls{flex-direction:column}.duo-avatar{width:74px;height:74px}.duo-face{inset:17px 10px;line-height:34px;font-size:27px;letter-spacing:5px}.duel-null{width:82px;height:82px}.duel-null img{width:164px;height:164px}.duel[data-step="1"] .duel-null img{left:-82px}.duel[data-step="2"] .duel-null img{top:-82px;left:-82px}.package-diagram{flex-direction:column;gap:25px;padding:24px;align-items:stretch}.package-config{padding-left:20px}.hero-copy h1{font-size:43px}.value-strip{gap:16px}.value-strip span{flex-basis:100%}.booking-panel iframe{height:900px}.pricing-grid{gap:0}}
@media(prefers-reduced-motion:reduce){.duel.is-playing .duo-avatar,.duel.is-playing .duel-null{animation:none!important}}
.scenario-heading { margin-top: 64px; }
.scenario-heading h3 { font-size: 28px; margin-bottom: 12px; }
.scenario-heading p { color: #b7b7b7; line-height: 1.6; }
.scenario-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.scenario-grid details { border: 1px solid #393939; border-radius: 12px; background: #0e0e0e; align-self: start; }
.scenario-grid summary { cursor: pointer; padding: 22px; font-size: 19px; line-height: 1.5; }
.scenario-grid summary span { display: block; color: #ffffff; font-size: 13px; margin-bottom: 10px; }
.scenario-grid summary:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
.scenario-body { padding: 0 22px 10px; }
.scenario-body p { line-height: 1.65; color: #b7b7b7; }
.scenario-body strong { color: #ffffff; }
.control-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
.control-grid article { border-top: 1px solid #393939; padding-top: 24px; }
.control-label { color: #ffffff; font-size: 12px; letter-spacing: .06em; }
.control-grid h3, .tandem-note h3 { font-size: 24px; line-height: 1.3; }
.control-grid p, .tandem-note p { color: #b7b7b7; line-height: 1.65; }
.tandem-note { display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; margin-top: 40px; padding: 30px; background: #191919; border-radius: 14px; }
.tandem-note p:first-child { margin-top: 0; }
@media (max-width: 700px) {
  .scenario-grid, .control-grid, .tandem-note { grid-template-columns: 1fr; }
  .tandem-note { gap: 10px; padding: 24px; }
}
/* Feedback and pilot positioning, October 2026. */
.feedback-section { background: #241c2a; }
.feedback-layout { display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start; }
.feedback-layout h2 {font-size:clamp(34px,4vw,54px);line-height:1.08;margin:24px 0;letter-spacing:-.035em;}
.feedback-layout p {color:#cbbfd4;line-height:1.65;}
#feedback-form {min-width:0;padding:32px;background:#000000;border:1px solid #5c476b;border-radius:18px;}
#feedback-form label:not(.feedback-consent) {display:block;font-size:18px;color:#ffffff;margin:24px 0 8px;}
#feedback-form label:first-of-type {margin-top:0;}
#feedback-form label span {font-size:13px;color:#cbbfd4;}
#feedback-form .field-hint {font-size:14px;margin:8px 0 12px;}
#feedback-form textarea,#feedback-form select,#feedback-form input[type=email] {width:100%;min-height:48px;background:#221a28;border:1px solid #79618a;border-radius:8px;color:#ffffff;font:inherit;padding:12px;}
#feedback-form textarea {resize:vertical;line-height:1.5;}
#feedback-form :is(textarea,select,input):focus-visible {outline:3px solid #ffffff;outline-offset:3px;}
.feedback-identity {display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.feedback-consent {display:flex;align-items:flex-start;gap:12px;margin-top:28px;line-height:1.6;cursor:pointer;}
.feedback-consent input {width:20px;height:20px;flex-shrink:0;margin-top:3px;accent-color:#ffffff;}
.feedback-consent a,.security-page a {text-decoration:underline;text-underline-offset:3px;}
.feedback-honey {display:none;}
#feedback-status {min-height:28px;font-size:15px;}
#feedback-send:disabled {opacity:.65;cursor:default;}
.security-page {max-width:880px;}
.security-page h1 {font-size:clamp(34px,5vw,64px);line-height:1.1;}
.security-page h2 {font-size:28px;margin:48px 0 18px;}
.security-page p,.security-flow li {font-size:18px;line-height:1.75;color:#cbbfd4;}
.security-flow {padding-left:24px;}
.security-flow li {margin:20px 0;}
#image-dialog {background:#221a28;color:#ffffff;border:1px solid #79618a;border-radius:12px;max-width:94vw;max-height:90vh;padding:20px;}
#image-dialog::backdrop {background:#000c;}
#image-dialog img {display:block;width:auto;max-width:100%;height:auto;margin:20px auto;}
#image-close {display:block;margin-left:auto;min-height:44px;background:#ffffff;color:#000000;padding:10px 18px;border:0;border-radius:6px;font:inherit;cursor:pointer;}
.proof-grid img {background:#271e2d;object-fit:contain;}
.footer-bottom {gap:20px;flex-wrap:wrap;align-items:center;}
.footer-bottom span {max-width:640px;line-height:1.6;}
.player-caption,.proof-grid figcaption span,.muted {color:#c7bad1;}
.mobile-null {display:none;}
.stage-buttons {flex-wrap:wrap;gap:6px;}
.stage-buttons button {min-height:44px;}
@media(max-width:700px){
 .feedback-layout,.feedback-identity {grid-template-columns:1fr;gap:26px;}
 #feedback-form {padding:22px;}
 .site-header {flex-wrap:wrap;gap:12px;padding-block:16px;}
 .site-header nav {display:flex;order:3;width:100%;flex-wrap:wrap;gap:14px;justify-content:flex-start;}
 .site-header nav a {font-size:14px;min-height:36px;display:flex;align-items:center;}
 .site-header .login {margin-left:auto;font-size:13px;}
 .mobile-null {display:block;position:fixed;right:12px;bottom:10px;z-index:9;min-height:44px;border-radius:24px;background:#372a40;color:#ffffff;border:1px solid #ffffff;padding:10px 18px;font:inherit;}
 body:has(#null-chat:not([hidden])) .mobile-null {display:none;}
 body {padding-bottom:70px;}

 .footer-top {gap:20px;flex-wrap:wrap;}
 .footer-top p {display:block;overflow-wrap:anywhere;}
 .hero-foot {margin-top:20px;}
 .stage-buttons button {font-size:12px;padding:8px;}
 .hero-copy h1 {font-size:clamp(34px,10vw,43px);}
}
@media(max-width:700px){
 .site-header {height:auto;min-height:88px;}
 .mobile-null {position:static;order:4;font-size:13px;padding:8px 14px;min-height:40px;}
 body {padding-bottom:0;}
 .site-header:has(#mobile-null[aria-expanded=true]) .mobile-null {display:block;}
 .hero-copy {min-width:0;}
 .hero-facts {flex-wrap:wrap;}
 .feedback-layout .eyebrow {letter-spacing:.04em;font-size:11px;}
}
.proof-transcript {margin:32px 0;padding:28px;border-left:3px solid #ffffff;background:#221a28;}
.proof-transcript h3 {font-size:clamp(24px,3vw,34px);line-height:1.35;max-width:800px;margin:18px 0;}
.proof-transcript p {color:#cbbfd4;line-height:1.65;max-width:780px;}
.approach-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:40px;}
.approach-grid article {border-top:1px solid #5c476b;padding:24px 16px 10px 0;}
.approach-grid h3 {font-size:25px;line-height:1.25;}
.approach-grid p {color:#cbbfd4;line-height:1.65;font-size:16px;}
.approach-grid .approach-null {border-color:#ffffff;background:#241c2a;padding:24px;border-radius:0 0 12px 12px;}
.approach-grid .approach-fit {font-size:14px;color:#e3dce8;}
.pilot-path {background:#1e1823;}
.pilot-steps {list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin:48px 0 40px;padding:0;}
.pilot-steps li {border-top:1px solid #6f5880;padding-top:24px;}
.pilot-steps li>span {font-size:32px;color:#ffffff;}
.pilot-steps h3 {font-size:24px;line-height:1.3;}
.pilot-steps p,.pilot-steps strong {font-size:16px;line-height:1.65;color:#cbbfd4;}
.pilot-steps strong {display:block;color:#ffffff;margin-top:24px;font-weight:500;}
.product-details {border-top:1px solid #5c476b;border-bottom:1px solid #5c476b;}
.product-details>summary {padding:28px 0;font-size:24px;cursor:pointer;line-height:1.4;}
.product-details .wrap {width:100%;}
@media(max-width:1050px){.approach-grid,.pilot-steps {grid-template-columns:1fr 1fr;}}
@media(max-width:700px){.approach-grid,.pilot-steps {grid-template-columns:1fr;}.product-details>summary {font-size:20px;}.hero-copy h1 {font-size:clamp(34px,9vw,43px);}}
/* Editorial blocks adapted from the owner's supplied Claude artifact. */
.sales-block { --sales-soft:#271e2e; --sales-surface:#1c1620; }
.sales-head {display:grid;gap:14px;max-width:780px;margin-bottom:28px;}
.sales-head h2 {font-size:clamp(29px,3vw,42px);line-height:1.15;letter-spacing:-.025em;}
.sales-head>p:not(.eyebrow) {color:var(--muted);font-size:18px;line-height:1.6;}
.sales-block .eyebrow {color:var(--accent);}
.sales-analogy {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.sales-card {background:var(--sales-surface);border:1px solid var(--line);border-radius:10px;padding:22px;display:grid;gap:12px;align-content:start;}
.sales-who {font-size:12px;letter-spacing:.035em;color:#c1b2cc;display:block;}
.sales-card h3 {font-size:23px;font-weight:700;line-height:1.2;}
.sales-card p,.sales-card li {font-size:16px;line-height:1.6;color:#dcd4e2;}
.sales-card ul {margin:4px 0 0;padding-left:18px;display:grid;gap:8px;}
.sales-null {border:2px solid var(--accent)!important;background:var(--sales-soft)!important;}
.sales-null .sales-who {color:var(--accent);}
.sales-thesis {border-left:4px solid var(--accent);padding:4px 0 4px 20px;font-size:22px;font-weight:600;line-height:1.45;max-width:850px;margin-top:30px;}
.sales-map {display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.sales-map article {padding:28px;background:var(--sales-surface);display:grid;gap:12px;align-content:start;}
.sales-map article h3 {font-size:24px;}
.sales-map p {color:#cfc4d7;font-size:17px;line-height:1.6;max-width:490px;}
.sales-map-note {font-size:14px;color:#c1b2cc;}
.sales-tablewrap {overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--sales-surface);}
.sales-tablewrap:focus-visible {outline:3px solid var(--accent);outline-offset:4px;}
.sales-compare {width:100%;min-width:1000px;border-collapse:collapse;font-size:15px;table-layout:fixed;}
.sales-compare caption {text-align:left;padding:16px;color:#cfc4d7;font-size:14px;border-bottom:1px solid var(--line);}
.sales-compare th,.sales-compare td {text-align:left;vertical-align:top;padding:16px 18px;border-bottom:1px solid var(--line);line-height:1.55;white-space:normal;}
.sales-compare thead th {font-size:13px;letter-spacing:.03em;background:#17121b;color:#cfc4d7;}
.sales-compare th small {display:block;font-size:12px;font-weight:400;margin-top:5px;}
.sales-compare tbody th {font-weight:600;color:var(--ink);background:transparent;}
.sales-compare td {color:#cfc4d7;}
.sales-compare td strong {color:#dbd2e1;font-weight:600;}
.sales-nullcol {background:var(--sales-soft);}
.sales-compare thead th:last-child {background:var(--sales-soft);color:var(--accent);}
.sales-compare tr:last-child>* {border-bottom:0;}
.sales-scroll-hint {color:var(--muted);font-size:13px;margin-bottom:12px;}
.sales-split {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;}
.sales-box {background:var(--sales-surface);border:1px solid var(--line);border-radius:12px;padding:26px;display:grid;gap:18px;align-content:start;}
.sales-good {border-top:4px solid var(--success);}
.sales-warn {border-top:4px solid var(--warning);}
.sales-box h3 {font-size:24px;}
.sales-box ul {margin:0;padding-left:20px;display:grid;gap:14px;}
.sales-box li {font-size:17px;line-height:1.65;color:#cfc4d7;}
.sales-box strong {color:var(--ink);}
.sales-pilot-cards {gap:14px;}
.sales-pilot-cards li {background:var(--sales-surface);border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:14px;}
.sales-pilot-cards li:first-child {border-color:var(--accent);}
.sales-pilot-cards li>span {font-size:13px;letter-spacing:.1em;}
.sales-pilot-cards strong {border-top:1px solid var(--line);padding-top:16px;margin-top:auto;}
.sales-pilot-cards h3 {font-size:24px;}
.pilot-brief {max-width:1120px;padding-top:48px;padding-bottom:80px;display:grid;gap:56px;}
.pilot-brief header {display:grid;gap:22px;max-width:850px;}
.pilot-brief h1 {font-size:clamp(36px,4.6vw,62px);}
.pilot-brief .lead {font-size:21px;line-height:1.55;color:#cfc4d7;}
.pilot-brief nav {display:flex;gap:24px;flex-wrap:wrap;}
.pilot-brief h2 {font-size:32px;margin-bottom:24px;}
.pilot-brief .sales-split {margin:0;}
.pilot-brief .sales-steps {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;}
.sales-steps li {padding:20px 24px 20px 0;border-top:3px solid var(--line);display:grid;align-content:start;gap:12px;}
.sales-steps li:first-child {border-top-color:var(--accent);}
.sales-steps h3 {font-size:23px;}
.sales-steps p {color:#cfc4d7;font-size:17px;}
.pilot-decision {background:var(--sales-soft);border:1px solid var(--accent);border-radius:12px;padding:30px;display:grid;gap:18px;}
.pilot-decision h2 {margin:0;}
@media(max-width:1050px){.sales-analogy,.pilot-brief .sales-steps {grid-template-columns:1fr 1fr;}}
@media(max-width:700px){.sales-map,.sales-split,.sales-analogy,.pilot-brief .sales-steps {grid-template-columns:1fr;}.sales-card,.sales-map article,.sales-box {padding:22px;}.sales-thesis {font-size:20px;}.sales-compare {min-width:1000px;}.pilot-brief {padding-top:30px;gap:40px;}.pilot-decision {padding:24px;}}
.pilot-brief {grid-template-columns:minmax(0,1fr);min-width:0;}
.pilot-brief>*,.pilot-brief section>* {min-width:0;}
/* Readable source-first examples and original high-resolution GitLab proof. */
.lab-page {display:grid;grid-template-columns:minmax(0,1fr);gap:72px;padding-top:38px;padding-bottom:70px;max-width:1280px;}
.lab-page>* {min-width:0;}
.lab-header {display:grid;gap:24px;max-width:1020px;}
.lab-header nav {display:flex;gap:26px;flex-wrap:wrap;margin-bottom:30px;}
.lab-header h1 {max-width:100%;font-size:clamp(39px,4.7vw,64px);}
.lab-header h1 span {color:var(--accent);}
.lab-lead {font-size:21px;color:#cfc4d7;line-height:1.6;max-width:890px;}
.lab-evidence {display:flex;gap:12px;flex-wrap:wrap;}
.lab-evidence span {border:1px solid #564264;border-radius:6px;padding:7px 12px;font-size:14px;color:#dbd3e1;}
.lab-header .fine-print {margin:0;max-width:850px;}
.lab-nav {display:flex;gap:24px;flex-wrap:wrap;border-block:1px solid var(--line);padding:24px 0;}
.lab-nav a {font-size:18px;text-decoration:none;color:var(--accent);}
.lab-case {display:grid;gap:30px;min-width:0;scroll-margin-top:30px;}
.lab-case-head {display:grid;grid-template-columns:80px 1fr;gap:22px;}
.lab-case-head>div {display:grid;gap:18px;min-width:0;}
.lab-number {font-size:44px;color:var(--accent);line-height:1;}
.lab-case h2 {font-size:clamp(29px,3.3vw,43px);line-height:1.15;max-width:900px;}
.lab-sequence {list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.lab-sequence li {border-top:2px solid #534061;padding:18px 18px 0 0;line-height:1.55;color:#cfc4d7;}
.lab-sequence span {display:block;color:var(--accent);font-size:13px;margin-bottom:10px;}
.lab-finding {padding:24px 28px;border-left:3px solid var(--warning);background:#211d18;}
.lab-finding span {font-size:12px;color:var(--warning);letter-spacing:.06em;}
.lab-finding p {font-size:21px;line-height:1.5;margin-top:12px;max-width:980px;}
.lab-code-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.lab-code {min-width:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#1b151f;}
.lab-code h3 {font-size:18px;padding:18px 22px;border-bottom:1px solid var(--line);}
.lab-code.before h3 {color:#ffc4cb;background:#281c23;}
.lab-code.after h3 {color:#b3efca;background:#14291f;}
.lab-page pre {margin:0;overflow:auto;padding:22px;max-width:100%;background:transparent;font-size:15px;line-height:1.8;}
.lab-page code {font-size:inherit;line-height:inherit;color:#eeeaf1;white-space:pre;overflow-wrap:normal;}
.lab-page pre:focus-visible {outline:3px solid var(--accent);outline-offset:-3px;}
.lab-code summary {cursor:pointer;padding:16px 22px;border-top:1px solid var(--line);color:var(--accent);font-size:14px;}
.lab-code summary:focus-visible {outline:3px solid var(--accent);outline-offset:-3px;}
.lab-fix {font-size:19px;line-height:1.65;color:#cfc4d7;max-width:920px;}
.lab-result {display:grid;grid-template-columns:1fr 1fr 1.4fr;align-items:center;gap:30px;padding:26px;background:#201925;border:1px solid #513e5e;border-radius:10px;}
.lab-result span {display:block;font-size:13px;color:#cabdd3;}
.lab-result strong {font-size:clamp(27px,3.2vw,43px);font-weight:600;white-space:nowrap;}
.lab-result>div:first-child strong {color:#ffadb5;}
.lab-result>div:nth-child(2) strong {color:#90e2b5;}
.lab-result p {font-size:15px;color:#cfc4d7;line-height:1.6;}
.lab-test {padding:0 0 24px;border-bottom:1px solid var(--line);display:grid;gap:12px;}
.lab-test strong {color:var(--success);font-size:18px;}
.lab-test p {color:#cfc4d7;max-width:950px;line-height:1.65;}
.lab-test a {font-size:14px;color:var(--accent);}
.lab-reproduce,.lab-cta {display:grid;gap:20px;max-width:960px;}
.lab-reproduce h2,.lab-cta h2 {font-size:38px;}
.lab-reproduce>p,.lab-cta>p {line-height:1.6;color:#cfc4d7;}
.lab-reproduce pre {border:1px solid var(--line);border-radius:8px;}
.lab-reproduce .button,.lab-cta .button {justify-self:start;}
.lab-preview-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px;}
.lab-preview-grid article {display:grid;gap:18px;align-content:start;padding:26px;background:#1d1722;border:1px solid #4c3b59;border-radius:12px;}
.lab-preview-grid h3 {font-size:25px;line-height:1.25;}
.lab-preview-grid p {font-size:17px;line-height:1.65;color:#cfc4d7;}
.lab-preview-grid .lab-small-result {font-size:24px;font-weight:600;color:var(--accent);border-top:1px solid var(--line);padding-top:16px;}
.lab-preview-grid a {color:var(--accent);}
@media(max-width:800px){.lab-code-grid,.lab-preview-grid {grid-template-columns:1fr;}.lab-sequence {grid-template-columns:1fr 1fr;}.lab-result {grid-template-columns:1fr 1fr;}.lab-result p {grid-column:1/-1;}.lab-case-head {grid-template-columns:1fr;gap:15px;}.lab-number {font-size:28px;}.lab-page {gap:50px;}.lab-lead {font-size:18px;}.lab-page pre {padding:18px;font-size:13px;}.lab-header nav {font-size:14px;gap:15px;}.lab-nav {gap:16px;}.lab-nav a {font-size:16px;}.lab-finding {padding:20px;}.lab-finding p {font-size:18px;}.lab-preview-grid article {padding:22px;}}

/* Developer journey: explicit steps, readable original UI, no autoplay. */
.journey-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-bottom:1px solid var(--line);margin:32px 0}
.journey-tabs button{background:transparent;color:var(--muted);border:0;border-bottom:3px solid transparent;text-align:left;padding:18px 10px;font-size:15px;transition:color .18s,border-color .18s}
.journey-tabs button span{display:block;font:500 13px/1.5 monospace;margin-bottom:6px}
.journey-tabs button[aria-selected=true]{color:var(--accent);border-color:var(--accent)}
.journey-panel{display:grid;grid-template-columns:minmax(250px,.8fr) minmax(0,1.6fr);gap:36px;align-items:center;animation:journey-enter .22s ease-out}
.journey-panel[hidden]{display:none}.journey-copy h3{font-size:clamp(25px,3vw,36px);line-height:1.15;margin:18px 0}.journey-copy>p{color:var(--muted)}
.journey-value{border-left:2px solid var(--accent);padding-left:18px;margin:28px 0}.journey-value strong{font-size:14px}.journey-value p{font-size:15px;color:var(--muted);margin:8px 0}
.journey-panel figure{margin:0;min-width:0}.journey-panel img{width:100%;height:auto;border:1px solid var(--line);border-radius:6px;display:block}.journey-panel figcaption{font-size:12px;color:var(--muted);margin-top:10px}
.journey-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;border-top:1px solid var(--line);padding-top:20px}.journey-bottom p{font-size:14px;color:var(--muted)}.journey-bottom button{background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:12px 18px;white-space:nowrap}
@keyframes journey-enter{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.journey-tabs{grid-template-columns:repeat(3,1fr)}.journey-panel{grid-template-columns:1fr;gap:22px}.journey-bottom{align-items:flex-start;flex-direction:column}.journey-tabs button{font-size:13px;padding:12px 6px}}
@media(prefers-reduced-motion:reduce){.journey-panel{animation:none}.journey-tabs button{transition:none}}

.proof-grid.proof-hd{grid-template-columns:1fr}.proof-hd .proof-stack{display:grid;grid-template-columns:1fr 1fr;gap:22px}.proof-hd img{width:100%;height:auto}.proof-hd .proof-main{max-width:1000px;margin-inline:auto}#image-original{display:block;margin:12px 0;color:var(--accent);font-size:14px}@media(max-width:760px){.proof-hd .proof-stack{grid-template-columns:1fr}}

.film-chapters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.film-chapters button{border:1px solid #453550;background:#121212;color:#eeeaf1;padding:10px 14px;border-radius:8px;cursor:pointer;font:inherit;font-size:13px}.film-chapters button:hover,.film-chapters button:focus-visible{border-color:#ffffff;color:#ffffff}

.learning-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:32px 0}.learning-steps li{border-top:2px solid #42334c;padding:20px 0;transition:border-color .2s}.learning-steps li:hover{border-color:#ffffff}.learning-steps li>span{font-size:14px;color:#ffffff}.learning-steps h3{font-size:21px;margin:14px 0}.learning-steps p,.learning-example p{font-size:16px;color:#b7b7b7;line-height:1.65}.learning-example{display:flex;align-items:center;gap:32px;justify-content:space-between;padding:28px;border:1px solid #42334c;border-radius:14px;background:#121212}.learning-example>div{max-width:720px}.learning-example .button{flex-shrink:0}.learning-example h3{font-size:24px;margin:12px 0}@media(max-width:900px){.learning-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.learning-example{display:block}.learning-example .button{margin-top:16px}}@media(max-width:480px){.learning-steps{grid-template-columns:1fr;gap:8px}.learning-example{padding:20px}}@media(prefers-reduced-motion:reduce){.learning-steps li{transition:none}}

/* Owner-directed video hero. Pill navigation and soft floating shadows are
   explicit brief choices; the existing product content stays in the document. */
.site-header {
  position:absolute; inset:0 0 auto; z-index:10;
  width:min(1000px,calc(100% - 48px)); min-height:104px;
  flex-wrap:nowrap; gap:24px;
}
.site-header .brand {gap:0}
.site-header .brand-symbol {
  display:grid; place-items:center; width:48px; height:48px;
  border-radius:50%; background:var(--ink); color:var(--bg);
  font-size:34px; box-shadow:0 4px 14px #00000029; /* taste-skill-ignore: owner-specified floating navigation */
}
.site-header .brand-name {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.site-header nav {
  margin-inline:auto; padding:4px 20px; min-height:48px; gap:26px;
  border-radius:999px; background:var(--ink); color:var(--bg);
  align-items:center; font-size:14px; font-weight:550;
  box-shadow:0 4px 14px #00000029; /* taste-skill-ignore: owner-specified floating navigation */
}
.site-header nav a {display:flex;align-items:center;min-height:40px;color:#484848}
.site-header nav a:hover {color:var(--bg);text-decoration:underline;text-underline-offset:5px}
.site-header nav a:focus-visible {outline-color:var(--bg)}
.header-actions {gap:8px}
.site-header .login {border-radius:999px;background:var(--raised);padding:12px 20px}
.mobile-login {display:none!important}
#menu-toggle {display:none}
.hero {
  width:100%; max-width:none; min-height:100svh; margin:0;
  padding:136px 24px 36px; display:flex; flex-direction:column;
  justify-content:center; align-items:center; gap:0;
}
.hero::before {display:none}
.hero-background {position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--bg)}
.hero-background::after {content:'';position:absolute;inset:0;background:#00000066}
.hero-background video {width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:.72;filter:grayscale(1)}
.hero-copy {width:min(900px,100%);padding:0;text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center}
.hero h1 {font-size:clamp(52px,7.3vw,104px);font-weight:550;line-height:1.03;letter-spacing:-.055em}
.hero-description {max-width:560px;font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:#e1e1e1;margin-top:24px}
.hero-actions {justify-content:center;margin-top:28px;gap:14px}
.hero-actions .button {border-radius:999px;padding:13px 24px;font-size:15px}
.hero-actions .secondary-button {background:#00000080;border-color:#ffffff66}
.hero-facts {justify-content:center;font-size:14px;margin-top:26px;color:#d4d4d4;gap:24px}
.hero-facts span+span::before {content:'·';margin-right:24px}
.hero-copy .character-row {justify-content:center;gap:0;margin-top:12px;min-height:104px;text-align:left}
.hero-copy .null-home {width:104px;height:104px;flex-basis:104px}
.character-caption {max-width:180px}
.null-art {filter:grayscale(1)}
.hero-foot {width:100%;display:flex;align-items:center;justify-content:space-between;padding-top:24px;gap:16px;font-size:13px;color:var(--muted)}
.hero-foot .text-control {background:#00000080;border:0;border-radius:999px;padding:10px 16px;font-size:13px;color:var(--ink)}
.scroll-cue {padding:12px 0;color:var(--ink)}
.review-section {display:grid;grid-template-columns:.8fr 1.2fr;gap:8%;align-items:center}
.review-section .section-copy p {margin-top:24px}
@media(max-width:850px) {
  .site-header {gap:12px;width:calc(100% - 36px)}
  .site-header nav {gap:16px;padding-inline:16px}
  .site-header .login {padding-inline:16px}
  .review-section {grid-template-columns:1fr;gap:36px}
  .review-section .section-copy {max-width:600px}
}
@media(max-width:720px) {
  .site-header {min-height:88px;align-content:normal}
  .site-header .brand {margin-right:auto}
  .site-header .login {display:none}
  .header-actions {margin-left:auto;gap:6px}
  #menu-toggle:not([hidden]) {display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;padding:0;background:var(--raised);order:2}
  #menu-toggle span,#menu-toggle span::before,#menu-toggle span::after {display:block;width:18px;height:2px;background:var(--ink);position:relative}
  #menu-toggle span::before,#menu-toggle span::after {content:'';position:absolute;left:0}
  #menu-toggle span::before {top:-6px} #menu-toggle span::after {top:6px}
  #menu-toggle[aria-expanded="true"] {background:var(--ink)}
  #menu-toggle[aria-expanded="true"] span {background:transparent}
  #menu-toggle[aria-expanded="true"] span::before {top:0;transform:rotate(45deg);background:var(--bg)}
  #menu-toggle[aria-expanded="true"] span::after {top:0;transform:rotate(-45deg);background:var(--bg)}
  .site-header nav {position:absolute;top:88px;left:0;right:0;display:flex;flex-direction:column;gap:4px;border-radius:24px;padding:20px;align-items:stretch}
  .site-header nav a {justify-content:center;font-size:17px;min-height:48px}
  .site-header nav .mobile-login {display:flex!important;background:var(--raised);color:var(--ink);border-radius:999px;margin-top:8px}
  .js .site-header nav:not(.open) {display:none}
  body:not(.js-ready) .hero {padding-top:370px}
  .hero {padding:112px 18px 24px;min-height:100svh}
  .hero h1 {font-size:clamp(50px,10.8vw,76px)}
  .hero-description {max-width:460px;font-size:17px;margin-top:20px}
  .hero-actions {margin-top:24px;gap:10px}
  .hero-actions .button {font-size:14px;padding:12px 18px}
  .hero-facts {gap:12px;font-size:12px;margin-top:22px}
  .hero-facts span+span::before {margin-right:12px}
  .hero-foot {font-size:12px;gap:8px;flex-wrap:wrap;justify-content:center;padding-top:16px}
  .hero-foot .text-control {font-size:12px}
  .hero-copy .character-row {margin-top:12px}
}
@media(max-width:360px) {
  .hero-actions {flex-direction:column;align-items:center;gap:8px}
  .hero-actions .button {min-height:44px;padding-block:10px}
  .hero h1 {font-size:48px}
  .hero-facts {gap:8px;font-size:11px}
  .hero-facts span+span::before {margin-right:8px}
}
@media(max-height:740px) and (min-width:721px) {
  .hero {padding-top:116px;padding-bottom:20px}
  .hero h1 {font-size:68px}
  .hero-description {margin-top:16px}
  .hero-actions {margin-top:20px}
  .hero-copy .character-row {min-height:80px;margin-top:4px}
  .hero-copy .null-home {width:80px;height:80px;flex-basis:80px}
  .hero-foot {padding-top:8px}
}
@media(prefers-reduced-motion:reduce) {.hero-background video {visibility:hidden}}
.quiet .hero-background video {visibility:hidden}

/* Geist Pixel Circle, SIL OFL 1.1. See assets/OFL-Geist.txt. */
@font-face {font-family:"Geist Pixel Circle";src:url('/assets/GeistPixel-Circle.woff2') format('woff2');font-weight:400;font-display:swap}
.hero h1 {font-family:"Geist Pixel Circle",Hanken,sans-serif;font-weight:400;letter-spacing:-.04em}

/* Hosted layout preserves public examples, feedback, booking and chat. */
.hero{position:relative;isolation:isolate}.site-header{border-bottom:0}.header-actions{display:flex;align-items:center}.hero-copy h1{font-size:clamp(52px,7.3vw,104px);line-height:1.05;max-width:900px}.hero .hero-emphasis{color:var(--ink)}
.hero-actions .text-link{font-size:14px;flex-basis:100%;text-align:center;color:var(--muted)}
.hero .null-traveler{transform:none}.null-eye{background:#fff}.site-header .mobile-null{display:none}.review-section .hero-scene{min-width:0}.hero-background{z-index:-1}
@media(max-height:740px) and (min-width:721px){.hero-copy h1{font-size:68px}.hero-actions .text-link{display:none}}
@media(max-width:720px){.hero-copy h1{font-size:clamp(44px,10.8vw,76px)}.hero-actions .text-link{font-size:12px}.site-header .header-actions{width:auto}.hero-foot{max-width:100%}}

/* Owner feedback: retain the video's color and bring Null into the composition. */
:root {--bg:#08070c;--surface:#14121c;--raised:#25212e;--accent:#ddcaff;--muted:#c2bdcd;--line:#40394d}
.hero{background:#08070c}
.hero-background{z-index:0}
.hero-copy,.hero-foot{position:relative;z-index:1}
.hero-background video{filter:none;opacity:1;object-position:center 48%}
.hero-background::after{background:linear-gradient(180deg,rgba(8,6,18,.55),rgba(8,6,18,.40) 46%,rgba(8,6,18,.78));}
.hero h1,.hero-copy h1{font-family:Hanken,Arial,sans-serif;font-weight:550;color:#fff;letter-spacing:-.055em}
html[lang="en"] .hero h1{font-family:"Geist Pixel Circle",Hanken,sans-serif;font-weight:400;letter-spacing:-.04em}
.hero h1 .accent{color:#fff}
.hero-description{color:#f0ebf5;text-wrap:balance}
.hero-actions .primary{background:#eee5ff;color:#171020;border-color:#eee5ff;box-shadow:0 3px 24px #bea5f028}
.hero-facts{gap:10px;margin-top:24px;flex-wrap:wrap}
.hero-facts span{border:1px solid #d4bdf23d;background:#19112180;border-radius:999px;padding:5px 13px;color:#e6ddee}
.hero-facts span+span::before{display:none}
.hero-copy .character-row{margin-top:10px;min-height:144px;gap:8px}
.hero-copy .null-home{width:144px;height:144px;flex-basis:144px}
.null-art{filter:hue-rotate(32deg) saturate(.78);}
.hero-copy .null-art{transform:scale(1.18);transform-origin:center 60%}
.character-caption{color:#ddd3e8}
.character-caption strong{font-size:20px}
.site-header{width:min(1160px,calc(100% - 48px));gap:24px}
.site-header .brand{gap:10px}
.site-header .brand-name{position:static;width:auto;height:auto;overflow:visible;clip-path:none;color:#fff;font-size:18px}
.site-header .brand-symbol{width:44px;height:44px;font-size:30px;flex-shrink:0}
.site-header nav{gap:18px;padding-inline:20px;white-space:nowrap}
.hero-foot{padding-top:10px}
@media(max-width:1100px) and (min-width:721px){.site-header .brand-name{display:none}.site-header{gap:16px}.site-header nav{gap:16px}.site-header .login{font-size:13px;padding-inline:14px}}
@media(max-width:720px){.site-header{width:calc(100% - 36px)}.site-header .brand-name{display:block}.hero{padding-top:112px}.hero-facts{gap:7px}.hero-facts span{padding:4px 9px}.hero-copy .character-row{min-height:126px}.hero-copy .null-home{width:126px;height:126px;flex-basis:126px}.hero-foot{padding-top:8px}.hero-actions .text-link{display:none}}
@media(max-height:740px){
 .site-header{min-height:76px}
 .hero{padding-top:90px;padding-bottom:16px}
 .hero h1,.hero-copy h1{font-size:clamp(42px,6vw,66px);line-height:1.02}
 .hero-description{font-size:16px;line-height:1.4;margin-top:16px;max-width:570px}
 .hero-actions{margin-top:18px;gap:10px}
 .hero-actions .button{font-size:13px;padding:10px 18px;min-height:42px}
 .hero-actions .text-link{display:none}
 .hero-facts{margin-top:16px;font-size:12px}
 .hero-copy .character-row{min-height:100px;margin-top:4px}
 .hero-copy .null-home{width:100px;height:100px;flex-basis:100px}
 .character-caption{font-size:12px}.character-caption strong{font-size:17px}
 .hero-foot{padding-top:4px;font-size:11px}.hero-foot .text-control{padding:8px 12px;font-size:11px}
}

/* Final first-screen spacing: keep the complete composition within 900px. */
.hero{padding-top:120px}
.hero h1,.hero-copy h1{font-size:clamp(48px,6.3vw,88px)}
.hero-background video{filter:saturate(1.35)}
.hero-background::after{background:linear-gradient(180deg,#180a2b99,#10061866 46%,#080610c7)}
@media(max-height:740px){.hero{padding-top:90px}.hero h1,.hero-copy h1{font-size:clamp(42px,6vw,66px)}}
@media(max-width:720px) and (min-height:741px){.hero{padding-top:110px}.hero h1,.hero-copy h1{font-size:clamp(44px,10.8vw,72px)}}

/* Unified surfaces and a readable, persistent scroll companion. */
.site-header .brand-name{display:block!important;font-size:20px;letter-spacing:-.04em}
.site-header .brand{gap:0;min-height:44px}
.companion-dock:not([hidden]){display:block!important;right:18px;bottom:max(16px,env(safe-area-inset-bottom));width:104px}
.companion-dock #companion-seat,.companion-dock .null-traveler{width:96px;height:96px}
.companion-dock #companion-hide{opacity:1;top:-12px;right:0;min-height:28px;min-width:44px;background:var(--surface);border:1px solid var(--line);border-radius:999px;color:var(--ink)}
.review-section{align-items:start;gap:6%;grid-template-columns:1fr 1.15fr}
.review-steps{padding:0;list-style:none;margin:28px 0;counter-reset:review}
.review-steps li{counter-increment:review;position:relative;padding:14px 0 14px 40px;border-top:1px solid var(--line)}
.review-steps li::before{content:'0' counter(review);position:absolute;left:0;top:16px;font:12px/1.5 monospace;color:var(--accent)}
.review-steps strong{display:block;font-size:17px;color:var(--ink);margin-bottom:4px}
.review-steps span{display:block;font-size:15px;line-height:1.55;color:var(--muted)}
#review .diff-line{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.8;padding:18px 20px}
#review .stage-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#review .stage-buttons button{min-height:42px;white-space:normal;text-align:left;font-size:12px;padding:10px}
#review .stage-buttons button[aria-pressed="true"]{background:var(--accent);color:#171020;border-color:var(--accent)}
.review-section .review-hint{font-size:13px;margin-top:16px;color:var(--muted)}
@media(max-width:850px){.review-section{grid-template-columns:1fr;gap:24px}.review-steps{margin-block:20px}}
@media(max-width:720px){.companion-dock:not([hidden]){right:8px;bottom:max(10px,env(safe-area-inset-bottom));width:84px}.companion-dock #companion-seat,.companion-dock .null-traveler{width:80px;height:80px}.site-header .brand-name{font-size:20px}}

.review-section .review-steps{display:block;grid-template-columns:none}