/* RetifyOS day/night system: the lime + charcoal identity remains present in both themes. */
:root { --accent-text: var(--lime); }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f4ec;
  --panel: #fffef8;
  --panel-2: #e9ede2;
  --line: rgba(24, 29, 17, .13);
  --line-strong: rgba(24, 29, 17, .24);
  --text: #171a13;
  --muted: #535b4d;
  --soft: #707765;
  --lime: #d6ff3f;
  --lime-dim: #91a929;
  --accent-text: #5e7417;
}
html, body { background: var(--bg); color: var(--text); }
body { transition: background-color .28s ease, color .28s ease; }

.header-controls { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--text); background: var(--panel); cursor: pointer;
  font: 760 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.theme-toggle:hover { color: var(--accent-text); border-color: var(--lime-dim); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.theme-toggle__icon { width: 15px; height: 15px; font: 16px/1 ui-sans-serif, system-ui, sans-serif; }
.theme-toggle__icon--moon { display: none; }
:root[data-theme="light"] .theme-toggle__icon--sun { display: none; }
:root[data-theme="light"] .theme-toggle__icon--moon { display: inline; }

.runtime-section, .modules-section, .status-section { padding-top: clamp(88px, 11vw, 138px); padding-bottom: clamp(88px, 11vw, 138px); }
.runtime-section { border-top: 1px solid var(--line); }
.runtime-heading, .modules-heading { max-width: 780px; margin-bottom: 38px; }
.runtime-heading h2, .modules-heading h2, .status-heading h2 {
  margin: 0; font-family: var(--display, inherit); font-size: clamp(44px, 6vw, 76px);
  font-weight: 900; letter-spacing: -.025em; line-height: .98;
}
.runtime-heading h2 span, .modules-heading h2 span, .status-heading h2 span { color: var(--accent-text); }
.runtime-intro { max-width: 700px; margin: 20px 0 0; color: var(--muted); font-size: clamp(15px, 1.65vw, 18px); line-height: 1.75; }
.runtime-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.runtime-card {
  position: relative; min-height: 228px; padding: clamp(22px, 3vw, 34px); overflow: hidden;
  border: 1px solid var(--line); background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 70%), var(--panel);
  transform-style: preserve-3d; transition: transform .3s ease, border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.runtime-card:hover { transform: translateY(-4px); border-color: rgba(214,255,63,.55); box-shadow: 0 18px 42px rgba(0,0,0,.12); }
.runtime-card__index { display: block; margin-bottom: 28px; color: var(--accent-text); font: 750 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; }
.runtime-card h3 { margin: 0 0 11px; font-size: clamp(19px, 2vw, 24px); font-weight: 650; letter-spacing: -.04em; }
.runtime-card p { max-width: 540px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }

.modules-section { border-block: 1px solid var(--line); background: var(--panel-2); }
.modules-layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(40px, 8vw, 110px); align-items: start; }
.modules-heading { margin-bottom: 0; }
.modules-copy > p { max-width: 680px; margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.85; }
.module-list { display: flex; flex-wrap: wrap; gap: 9px; margin: 24px 0; padding: 0; list-style: none; }
.module-list li { padding: 10px 12px; border: 1px solid var(--line-strong); color: var(--text); background: var(--panel); font: 700 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em; }
.module-status { padding: 15px 17px; border-left: 2px solid var(--lime-dim); background: rgba(214,255,63,.11); color: var(--text) !important; font-size: 12px !important; }
.module-status strong { color: var(--accent-text); }

.status-section { border-top: 1px solid var(--line); }
.status-heading { max-width: 860px; margin-bottom: 36px; }
.status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.status-card { min-height: 205px; padding: 22px; border: 1px solid var(--line); background: var(--panel); }
.status-card__label { display: block; margin-bottom: 22px; color: var(--accent-text); font: 750 9px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .11em; text-transform: uppercase; }
.status-card h3 { margin: 0 0 10px; font-size: 19px; letter-spacing: -.035em; }
.status-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }

/* Light mode uses warm paper surfaces and a bright architectural-core render. */
:root[data-theme="light"] .site-header { background: rgba(244,244,236,.9); border-color: var(--line); }
:root[data-theme="light"] .primary-nav { color: var(--text); }
:root[data-theme="light"] .primary-nav a:not(.nav-cta):hover,
:root[data-theme="light"] .footer-links a:hover { color: var(--accent-text); }
:root[data-theme="light"] .primary-nav.is-open { background: rgba(250,250,244,.98); border-color: var(--line); }
:root[data-theme="light"] .primary-nav a:not(.nav-cta) { color: var(--text); }
:root[data-theme="light"] .hero::before { opacity: .48; }
:root[data-theme="light"] .hero-copy .eyebrow,
:root[data-theme="light"] .hero-signal,
:root[data-theme="light"] .hero-signal i { color: var(--muted); }
:root[data-theme="light"] .hero h1 .hero-headline { color: var(--text); }
:root[data-theme="light"] .hero h1 em { color: var(--accent-text); }
:root[data-theme="light"] .hero-lede,
:root[data-theme="light"] .hero-supporting-copy { color: var(--muted); }
:root[data-theme="light"] .hero-world[data-modular-core] {
  border: 1px solid rgba(37,47,28,.11);
  background: radial-gradient(ellipse at 50% 46%,rgba(205,235,144,.22),transparent 52%), linear-gradient(150deg,#fffef9 0%,#f5f6ef 68%,#ecefe6 100%);
  box-shadow: 0 20px 48px rgba(31,42,22,.09), inset 0 0 42px rgba(255,255,255,.88);
}
:root[data-theme="light"] .hero-world[data-modular-core]::before {
  background-image: linear-gradient(rgba(79,96,53,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(79,96,53,.065) 1px,transparent 1px);
  opacity: .22;
}
:root[data-theme="light"] .hero-world[data-modular-core] .world-floor {
  opacity: .14;
  background-image: linear-gradient(rgba(96,117,59,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(96,117,59,.13) 1px,transparent 1px);
}
:root[data-theme="light"] .hero-world[data-modular-core] .world-halo { border-color: rgba(103,133,53,.22); box-shadow: 0 0 30px rgba(139,171,77,.08); }
:root[data-theme="light"] .hero-world[data-modular-core] .world-caption { color: #22271d; text-shadow: 0 1px 2px rgba(255,255,255,.65); }
:root[data-theme="light"] .hero-world[data-modular-core] .world-caption span { color: #68705e; }
:root[data-theme="light"] .hero-world[data-modular-core] .world-caption:before { box-shadow: 0 0 10px rgba(139,180,45,.52); }
:root[data-theme="light"] .hero-world[data-modular-core] .mf-base {
  border-color: rgba(92,107,88,.62);
  background: linear-gradient(135deg,rgba(255,255,255,.9),rgba(192,202,187,.72));
  box-shadow: 0 18px 20px rgba(34,43,31,.22),inset 0 0 24px rgba(255,255,255,.88);
}
:root[data-theme="light"] .hero-world[data-modular-core] .mf-chassis { background: linear-gradient(145deg,#596057,#252a25 70%); }
:root[data-theme="light"] .hero-world[data-modular-core] .mf-upper {
  border-color: rgba(151,184,68,.82);
  background-color: rgba(223,245,175,.57);
  background-image: linear-gradient(rgba(126,157,57,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(126,157,57,.11) 1px,transparent 1px);
  box-shadow: 0 0 22px rgba(154,187,66,.17),inset 0 0 24px rgba(255,255,255,.78);
}
:root[data-theme="light"] .hero-world[data-modular-core] .mf-satellite {
  border-color: rgba(101,111,96,.72);
  background: linear-gradient(145deg,#fffef9,#c9cec3);
  box-shadow: 0 8px 12px rgba(34,43,31,.2),inset 0 0 12px rgba(255,255,255,.82);
}
:root[data-theme="light"] .world-backdrop { opacity: .12; }
:root[data-theme="light"] .story-band { color: var(--muted); border-color: var(--line-strong); }
:root[data-theme="light"] .story-band small { color: var(--soft); }
:root[data-theme="light"] .figcaption,
:root[data-theme="light"] figcaption { color: var(--soft); }
:root[data-theme="light"] .section-number,
:root[data-theme="light"] .brand-word span,
:root[data-theme="light"] .text-link,
:root[data-theme="light"] .button-quiet:hover,
:root[data-theme="light"] .section-heading h2 span,
:root[data-theme="light"] .intro-section .section-heading h2 span,
:root[data-theme="light"] .network-icon,
:root[data-theme="light"] .state-documented,
:root[data-theme="light"] .card-glyph,
:root[data-theme="light"] .console-card .card-status,
:root[data-theme="light"] .footer-mark span { color: var(--accent-text); }
:root[data-theme="light"] .large-copy,
:root[data-theme="light"] .intro-detail .large-copy,
:root[data-theme="light"] .future-card h3 { color: var(--text); }
:root[data-theme="light"] .execution-section {
  background: radial-gradient(ellipse at 82% 34%,rgba(180,216,69,.16),transparent 46%), #ebeee5;
}
:root[data-theme="light"] .execution-section::after { opacity: .25; background-image: linear-gradient(rgba(75,105,12,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(75,105,12,.09) 1px,transparent 1px); }
:root[data-theme="light"] .flow-no { background: var(--panel); color: var(--accent-text); }
:root[data-theme="light"] .approval-step { background: linear-gradient(90deg,rgba(181,216,49,.18),rgba(181,216,49,.05)); }
:root[data-theme="light"] .execution-note { background: rgba(255,255,255,.78); }
:root[data-theme="light"] .execution-note p,
:root[data-theme="light"] .execution-note strong { color: var(--text); }
:root[data-theme="light"] .interface-card,
:root[data-theme="light"] .network-card { background: linear-gradient(145deg,rgba(255,255,255,.92),rgba(249,250,244,.9)); border-color: var(--line); }
:root[data-theme="light"] .interface-card:hover,
:root[data-theme="light"] .network-card:hover { border-color: rgba(120,150,24,.48); }
:root[data-theme="light"] .card-code,
:root[data-theme="light"] .card-status,
:root[data-theme="light"] .future-note { color: var(--muted); }
:root[data-theme="light"] .developer-section { background: var(--panel-2); }
:root[data-theme="light"] .code-panel { background: #090b08; border-color: rgba(20,25,14,.26); }
:root[data-theme="light"] .network-card h3 { color: var(--text); }
:root[data-theme="light"] .future-card { background: linear-gradient(140deg,rgba(255,255,255,.96),rgba(238,241,231,.96)); }
:root[data-theme="light"] .state-future { color: var(--muted); }
:root[data-theme="light"] .roadmap-disclaimer { color: var(--muted); }
:root[data-theme="light"] .closing-section { background: radial-gradient(ellipse at 73% 50%,rgba(185,218,49,.18),transparent 48%), #e9ede2; }
:root[data-theme="light"] .footer-inner > p,
:root[data-theme="light"] .footer-links,
:root[data-theme="light"] .footer-mark { color: var(--muted); }
:root[data-theme="light"] :focus-visible { outline-color: var(--accent-text); }

@media (max-width: 900px) {
  .status-grid { grid-template-columns: 1fr; }
  .status-card { min-height: 0; }
}
@media (max-width: 760px) {
  .header-controls { gap: 7px; }
  .theme-toggle { min-height: 40px; padding-inline: 10px; }
  .modules-layout { grid-template-columns: 1fr; gap: 28px; }
  .runtime-grid { grid-template-columns: 1fr 1fr; }
  .runtime-card { min-height: 230px; padding: 19px; }
  .runtime-card__index { margin-bottom: 21px; }
}
@media (max-width: 480px) {
  .theme-toggle { min-height: 38px; padding-inline: 9px; font-size: 8px; }
  .theme-toggle__icon { width: 13px; }
  .runtime-grid { grid-template-columns: 1fr; }
  .runtime-card { min-height: 0; }
  .modules-copy > p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  body, .theme-toggle, .runtime-card { transition-duration: .01ms !important; }
}

/* Final responsive polish for the approved narrative and dimensional scenes. */
.header-inner { gap: clamp(12px, 2vw, 28px); }
.primary-nav { margin-left: auto; }
.hero h1 { font-size: clamp(64px, 6.4vw, 94px); }
.hero h1 em { max-width: 100%; white-space: normal; }
.hero-supporting-copy { max-width: 560px; margin: -10px 0 24px; color: var(--muted); font-size: 13px; line-height: 1.78; }
.hero-world { border: 1px solid rgba(214,255,63,.14); }
.runtime-card, .status-card, .modules-section, .theme-toggle { transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; }
.code-body p { overflow-wrap: anywhere; }
:root[data-theme="light"] .hero h1 .hero-headline { color: var(--text); }
:root[data-theme="light"] .hero h1 em,
:root[data-theme="light"] .developer-copy h2 span,
:root[data-theme="light"] .closing-inner h2 span { color: var(--accent-text); }
:root[data-theme="light"] figcaption span:first-child { color: var(--text); }
:root[data-theme="light"] .roadmap-title span { color: var(--muted); }
:root[data-theme="light"] .execution-note > a { color: var(--accent-text); }
:root[data-theme="light"] .text-link { border-color: rgba(95,116,23,.45); }
:root[data-theme="light"] .module-status { border-left-color: var(--accent-text); }
@media (max-width: 1040px) and (min-width: 761px) {
  .primary-nav { gap: 13px; }
  .primary-nav a:not(.nav-cta) { font-size: 9px; }
  .nav-cta { gap: 9px; padding-inline: 11px; font-size: 9px; }
  .theme-toggle { padding-inline: 9px; }
}
@media (max-width: 760px) {
  .hero h1 { font-size: clamp(58px, 10.5vw, 78px); }
  .hero-supporting-copy { margin-top: -12px; font-size: 13px; }
  .hero-world { height: clamp(350px, 82vw, 450px); min-height: 350px; }
  .ros-guarded-core { min-height: 390px; }
  .header-inner { gap: 9px; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(54px, 12vw, 66px); }
  .hero-world { height: 350px; min-height: 350px; }
  .ros-guarded-core { min-height: 360px; }
}

:root[data-theme="light"] .footer-social-label { color: var(--muted); }
:root[data-theme="light"] .footer-socials a { color: var(--text); border-color: var(--line-strong); }
:root[data-theme="light"] .footer-socials a:hover { color: var(--text); background: rgba(187,218,64,.16); border-color: var(--accent-text); }
:root[data-theme="light"] .social-icon, :root[data-theme="light"] .social-arrow { color: var(--accent-text); }

.hero-supporting-mobile { display: none; }
@media (max-width: 760px) {
  .hero-supporting-desktop { display: none; }
  .hero-supporting-mobile { display: block; margin: 4px 0 28px; }
}