@import "tailwindcss";

@font-face { font-family: "Avenir Kiduna"; src: url("/fonts/avenir-book.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Avenir Kiduna"; src: url("/fonts/avenir-heavy.ttf") format("truetype"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Goudy Kiduna"; src: url("/fonts/goudy-heavyface.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --ground: #0a0604;
  --ground-deep: #060304;
  --umber: #1c140d;
  --surface: #271b11;
  --surface-raised: #332419;
  --cream: #fff6d5;
  --cream-muted: #dfd3b0;
  --camel: #c19a6b;
  --chocolate: #6f4a2e;
  --sky: #03ccd9;
  --gold: #eaaa00;
  --mint: #8fe6c6;
  --aubergine: #2a1a2b;
  --ink: #120c07;
  --border: rgba(255,246,213,.12);
  --border-warm: rgba(193,154,107,.24);
  --realm-org: #eaaa00;
  --realm-alliance: #b99ae8;
  --realm-program: #4fb6d8;
  --realm-project: #d97b2e;
  --realm-relationship: #8fe6c6;
  --realm-community: #62c192;
  --realm-conceptual: #fff6d5;
  --element-actor: #b99ae8;
  --element-media: #abdce8;
  --element-ally: #c19a6b;
  --element-resource: #eaaa00;
  --element-action: #03ccd9;
  --font-body: "Avenir Kiduna", Avenir, sans-serif;
  --font-display: "Goudy Kiduna", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ground-deep); }
body { margin: 0; background: var(--ground); color: var(--cream); font-family: var(--font-body); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--sky); outline-offset: 4px; }
img { display: block; max-width: 100%; }

main { min-height: 100vh; overflow: hidden; background: var(--ground); }
.site-header { height: 78px; padding: 0 clamp(20px, 4vw, 64px); position: fixed; z-index: 100; inset: 0 0 auto; display: flex; align-items: center; gap: 36px; background: rgba(10,6,4,.82); border-bottom: 1px solid rgba(255,246,213,.08); backdrop-filter: blur(18px); }
.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 11px; min-width: 178px; }
.brand img { width: 34px; height: 34px; }
.brand span { display: grid; line-height: 1; }
.brand strong { font-family: var(--font-display); font-size: 22px; color: var(--gold); }
.brand small { margin-top: 5px; color: rgba(255,246,213,.48); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.site-header nav { display: flex; gap: 26px; margin: 0 auto; }
.site-header nav a { color: rgba(255,246,213,.6); text-decoration: none; font-size: 12px; transition: color .2s; }
.site-header nav a:hover { color: var(--cream); }
.download-link { color: var(--cream); text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; display: flex; gap: 10px; align-items: center; }
.download-link span { color: var(--sky); font-size: 18px; }

.hero { min-height: 900px; padding: 156px clamp(24px, 5vw, 84px) 90px; display: grid; grid-template-columns: minmax(360px, .8fr) minmax(620px, 1.2fr); align-items: center; gap: clamp(42px, 6vw, 100px); position: relative; background: radial-gradient(circle at 12% 30%, rgba(111,74,46,.17), transparent 35%), var(--ground); }
.hero::before { content: ""; position: absolute; width: 680px; height: 680px; border: 1px solid rgba(193,154,107,.06); border-radius: 50%; left: -340px; top: 120px; pointer-events: none; }
.eyebrow { margin: 0 0 14px; color: var(--camel); font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: .98; }
h1 { font-size: clamp(56px, 6vw, 92px); letter-spacing: -.035em; max-width: 700px; }
h2 { font-size: clamp(44px, 5vw, 72px); letter-spacing: -.025em; }
h3 { font-size: 28px; }
h1 em, h2 em { color: var(--sky); font-weight: inherit; }
.hero-lede { margin: 28px 0 0; max-width: 650px; color: rgba(255,246,213,.64); font-size: 17px; line-height: 1.7; }
.hero-actions { margin-top: 34px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.primary-button { min-height: 48px; padding: 0 19px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--sky); color: #061112; text-decoration: none; font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 0 34px rgba(3,204,217,.2); transition: transform .2s, background .2s; }
.primary-button:hover { transform: translateY(-2px); background: #22dbe6; }
.motion-toggle { min-height: 48px; padding: 0 17px; border: 1px solid var(--border-warm); border-radius: 4px; background: transparent; color: rgba(255,246,213,.68); display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 11px; }
.toggle-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px rgba(143,230,198,.65); }
.motion-off .toggle-dot { background: rgba(255,246,213,.28); box-shadow: none; }
.hero-principles { margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); }
.hero-principles div { padding: 17px 14px 0 0; }
.hero-principles dt { color: var(--cream); font-family: var(--font-display); font-size: 16px; }
.hero-principles dd { margin: 6px 0 0; color: rgba(255,246,213,.42); font-size: 10px; line-height: 1.4; }

.hero-field { position: relative; height: 660px; border: 1px solid rgba(193,154,107,.18); border-radius: 28px; overflow: hidden; background: radial-gradient(circle at 52% 48%, rgba(39,27,17,.34), transparent 42%), #070403; box-shadow: 0 45px 120px rgba(0,0,0,.38), inset 0 0 90px rgba(193,154,107,.025); }
.hero-field::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px rgba(255,246,213,.08); }
.field-chrome { position: absolute; z-index: 20; left: 24px; top: 22px; display: grid; }
.field-chrome span { color: var(--sky); font-size: 8px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.field-chrome strong { margin-top: 4px; font-family: var(--font-display); font-size: 23px; }
.compute-pill { position: absolute; z-index: 20; top: 20px; right: 22px; padding: 7px 12px; display: flex; gap: 8px; align-items: center; border: 1px solid rgba(255,246,213,.15); border-radius: 999px; background: rgba(6,3,4,.76); }
.compute-pill > span { color: var(--gold); }.compute-pill strong { font-family: var(--font-display); font-size: 15px; }.compute-pill small { color: rgba(255,246,213,.4); font-size: 7px; letter-spacing: .14em; }
.field-world { position: absolute; inset: 0; transform-origin: center; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.orbit-arc { position: absolute; display: block; border: 1px solid rgba(193,154,107,.08); border-radius: 50%; pointer-events: none; }
.arc-1 { width: 740px; height: 740px; left: -80px; top: 110px; }
.arc-2 { width: 480px; height: 480px; left: 240px; top: 90px; border-color: rgba(234,170,0,.065); }
.arc-3 { width: 920px; height: 920px; left: 140px; top: -420px; }
.field-glint { width: 3px; height: 3px; position: absolute; border-radius: 50%; background: var(--cream); box-shadow: 0 0 10px rgba(255,246,213,.7); }
.glint-1 { left: 12%; top: 38%; }.glint-2 { left: 48%; top: 15%; }.glint-3 { left: 87%; top: 47%; background: var(--gold); }.glint-4 { left: 39%; top: 86%; }
.relation-thread { position: absolute; height: 1px; transform-origin: left; background: linear-gradient(90deg, transparent, rgba(143,230,198,.24), transparent); }
.thread-a { width: 270px; left: 31%; top: 37%; transform: rotate(14deg); }.thread-b { width: 210px; left: 58%; top: 58%; transform: rotate(22deg); }
.realm-node { --node: 64px; position: absolute; transform: translate(-50%,-50%); width: var(--node); height: var(--node); padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--realm); }
.realm-node--sm { --node: 48px; }.realm-node--md { --node: 68px; }.realm-node--lg { --node: 104px; }
.realm-node__halo { position: absolute; inset: -26%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--realm) 21%, transparent), transparent 68%); opacity: .8; }
.realm-node__rim { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #080503; box-shadow: 0 0 0 1px rgba(255,246,213,.16), 0 0 30px color-mix(in srgb, var(--realm) 30%, transparent); }
.realm-emblem { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transform: scale(1.12); }
.realm-node__core { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 36% 28%, color-mix(in srgb, var(--realm) 13%, var(--surface)), #0b0705 68%); box-shadow: inset 0 0 22px color-mix(in srgb, var(--realm) 12%, transparent), inset 0 1px rgba(255,246,213,.12); }
.icon { width: 30%; height: 30%; filter: brightness(0) invert(92%) sepia(20%) saturate(505%); opacity: .9; }
.ally-icon { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: none; }
.realm-node.is-selected .realm-node__rim { box-shadow: 0 0 0 2px var(--cream), 0 0 42px color-mix(in srgb, var(--realm) 38%, transparent); }
.realm-label { width: 170px; position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%); text-align: left; display: grid; pointer-events: none; }
.realm-label__type { color: var(--realm); font-size: 7px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.realm-label strong { color: var(--realm); font-family: var(--font-display); font-size: 16px; line-height: 1.1; white-space: nowrap; }
.realm-label small { margin-top: 2px; color: rgba(255,246,213,.38); font-size: 8px; }
.realm-node--sm .realm-label small, .realm-node--sm .realm-label__type { display: none; }.realm-node--sm .realm-label strong { font-size: 11px; opacity: .8; }
.ally-presence { position: absolute; left: 16%; top: 76%; padding: 0; background: none; border: 0; color: var(--cream); display: grid; justify-items: center; gap: 6px; cursor: pointer; }
.ally-presence img { width: 54px; height: 54px; object-fit: cover; border-radius: 50%; border: 2px solid var(--cream); box-shadow: 0 0 0 2px var(--camel), 0 0 20px rgba(193,154,107,.35); }
.ally-presence span { font-size: 8px; color: rgba(255,246,213,.58); }
.realm-peek { position: absolute; z-index: 20; left: 22px; bottom: 22px; width: 190px; padding: 12px 14px; border: 1px solid rgba(255,246,213,.1); border-radius: 12px; background: rgba(12,8,5,.82); backdrop-filter: blur(10px); display: grid; }
.realm-peek > span { font-size: 7px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }.realm-peek strong { margin-top: 2px; font-family: var(--font-display); font-size: 17px; }.realm-peek p { margin: 3px 0 0; color: rgba(255,246,213,.4); font-size: 9px; }
.field-controls { position: absolute; z-index: 20; right: 20px; bottom: 20px; display: flex; align-items: center; background: rgba(6,3,4,.8); border: 1px solid rgba(255,246,213,.12); border-radius: 4px; overflow: hidden; }
.field-controls button { width: 34px; height: 34px; border: 0; background: transparent; color: var(--cream); cursor: pointer; }.field-controls span { width: 48px; text-align: center; font-size: 9px; color: rgba(255,246,213,.46); }

.motion-on .realm-node--lg .realm-node__halo, .motion-on .state-orb { animation: breathe 7s ease-in-out infinite; }
.motion-on .realm-node--sm { animation: drift 16s ease-in-out infinite; }
.motion-on .field-glint { animation: twinkle 5s ease-in-out infinite; }
.motion-on .thread-a { animation: threadPulse 5s ease-in-out infinite; }
.motion-off * { animation-duration: 0s !important; animation-iteration-count: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@keyframes breathe { 0%,100% { transform: scale(1); opacity: .72; } 50% { transform: scale(1.035); opacity: 1; } }
@keyframes drift { 0%,100% { margin: 0; } 35% { margin: -5px 0 0 7px; } 70% { margin: 5px 0 0 -5px; } }
@keyframes twinkle { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes threadPulse { 0%,100% { opacity: .18; } 50% { opacity: .8; } }

.system-section { padding: 126px clamp(24px, 7vw, 112px); position: relative; border-top: 1px solid rgba(255,246,213,.06); }
.section-heading { max-width: 860px; margin-bottom: 54px; }
.section-heading > p:last-child, .split-heading > p { max-width: 720px; color: rgba(255,246,213,.55); font-size: 15px; line-height: 1.7; }
.section-heading h2 { max-width: 930px; }
.split-heading { max-width: none; display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 80px; }

.field-section { background: radial-gradient(circle at 82% 20%, rgba(42,26,43,.22), transparent 35%), var(--ground-deep); }
.ground-specimen { min-height: 330px; border: 1px solid var(--border-warm); border-radius: 22px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr .75fr; align-items: center; padding: 54px; background: #0a0604; }
.ground-layer { position: absolute; inset: 0; overflow: hidden; }.ground-layer .arc-1 { left: -280px; top: 40px; }.ground-layer .arc-2 { left: 42%; top: -260px; }
.specimen-copy { position: relative; z-index: 2; display: grid; max-width: 430px; }.specimen-copy > span { color: var(--camel); font-size: 9px; font-weight: 900; letter-spacing: .2em; }.specimen-copy strong { margin: 4px 0; font-family: var(--font-display); font-size: 64px; }.specimen-copy p { color: rgba(255,246,213,.48); line-height: 1.6; font-size: 13px; }
.material-chips { z-index: 2; display: grid; gap: 9px; justify-self: end; }.material-chips span { width: 190px; padding: 12px 14px; border: 1px solid rgba(193,154,107,.16); border-radius: 999px; background: linear-gradient(105deg, rgba(255,246,213,.025), rgba(193,154,107,.08)); color: rgba(255,246,213,.56); font-size: 10px; }
.state-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.state-card { min-height: 300px; padding: 28px; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(145deg, rgba(255,246,213,.025), transparent), var(--umber); }
.state-orb { width: 86px; height: 86px; margin-bottom: 38px; padding: 3px; border-radius: 50%; background: conic-gradient(var(--gold), var(--cream), var(--camel), var(--gold)); box-shadow: 0 0 28px rgba(234,170,0,.16); }
.state-orb span { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 25%, rgba(234,170,0,.18), #0a0604 68%); display: grid; place-items: center; color: var(--gold); font-family: var(--font-display); font-size: 30px; }
.state-card--engaged .state-orb { background: conic-gradient(var(--mint), var(--gold), var(--mint)); }.state-card--engaged .state-orb span { color: var(--mint); }
.state-card--focused .state-orb { background: conic-gradient(var(--sky), var(--cream), var(--sky)); }.state-card--focused .state-orb span { color: var(--sky); }
.state-card--dreaming .state-orb { background: conic-gradient(var(--cream), var(--realm-alliance), var(--cream)); }.state-card--dreaming .state-orb span { color: var(--cream); }
.state-card .eyebrow { margin-bottom: 5px; }.state-card h3 { font-size: 30px; }.state-card > p:last-child { color: rgba(255,246,213,.48); font-size: 12px; line-height: 1.6; }
.connection-system { margin-top: 22px; min-height: 300px; padding: 28px; display: grid; grid-template-columns: 1.25fr repeat(4, 1fr); gap: 10px; border: 1px solid var(--border-warm); border-radius: 18px; background: radial-gradient(circle at 72% 50%, rgba(234,170,0,.055), transparent 40%), #080503; }
.connection-copy { padding: 22px; align-self: center; }.connection-copy h3 { font-size: 34px; }.connection-copy > p:last-child { color: rgba(255,246,213,.43); font-size: 11px; line-height: 1.6; }
.connection-pattern { min-height: 220px; position: relative; overflow: hidden; border: 1px solid rgba(193,154,107,.13); border-radius: 12px; background: radial-gradient(circle at 50% 42%, rgba(3,204,217,.045), transparent 45%); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 22px 10px; }
.connection-pattern i, .connection-pattern b { position: absolute; display: block; pointer-events: none; }
.connection-pattern span { font-family: var(--font-display); font-size: 18px; }.connection-pattern small { margin-top: 3px; color: rgba(255,246,213,.32); font-size: 8px; text-transform: uppercase; letter-spacing: .14em; }
.connection-pattern::before, .connection-pattern::after { content: ""; position: absolute; top: 62px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--cream), var(--gold) 32%, #4f2b08 70%); box-shadow: 0 0 15px rgba(234,170,0,.45); }
.connection-pattern::before { left: 20px; }.connection-pattern::after { right: 20px; }
.pattern-orbit i:first-child { width: 102px; height: 65px; top: 34px; border: 1px solid rgba(234,170,0,.6); border-radius: 50%; }.pattern-orbit i:nth-child(2) { width: 72px; height: 100px; top: 17px; border: 1px dashed rgba(193,154,107,.55); border-radius: 50%; }.pattern-orbit b { width: 6px; height: 6px; top: 64px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 10px var(--sky); }
.pattern-braid i { width: 115px; height: 50px; top: 38px; border-radius: 50%; border-top: 2px solid var(--mint); transform: rotate(18deg); box-shadow: 0 -5px 12px rgba(143,230,198,.12); }.pattern-braid i:nth-child(2) { transform: rotate(-18deg); border-color: var(--sky); }.pattern-braid b { width: 9px; height: 9px; top: 61px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 16px rgba(255,246,213,.8); }
.pattern-anchor i:first-child { width: 118px; height: 1px; top: 67px; background: linear-gradient(90deg,var(--gold),var(--cream),var(--gold)); }.pattern-anchor i:nth-child(2) { width: 1px; height: 68px; top: 34px; background: linear-gradient(var(--gold),var(--cream),var(--gold)); }.pattern-anchor b { width: 20px; height: 20px; top: 57px; border: 1px solid var(--gold); transform: rotate(45deg); background: var(--ground); box-shadow: 0 0 15px rgba(234,170,0,.28); }
.pattern-crossing i { width: 120px; height: 1px; top: 66px; background: linear-gradient(90deg,transparent,var(--gold),transparent); transform: rotate(27deg); }.pattern-crossing i:nth-child(2) { transform: rotate(-27deg); background: linear-gradient(90deg,transparent,var(--sky),transparent); }.pattern-crossing b { width: 7px; height: 7px; top: 63px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 16px var(--cream); }
.rule-band { margin-top: 22px; border-top: 1px solid var(--border-warm); border-bottom: 1px solid var(--border-warm); display: grid; grid-template-columns: repeat(4, 1fr); }
.rule-band div { padding: 20px; border-right: 1px solid var(--border); display: grid; gap: 6px; }.rule-band div:last-child { border-right: 0; }.rule-band strong { color: var(--camel); font-family: var(--font-display); font-size: 18px; }.rule-band span { color: rgba(255,246,213,.4); font-size: 10px; line-height: 1.5; }

.realms-section { background: radial-gradient(circle at 10% 45%, rgba(193,154,107,.1), transparent 30%), var(--ground); }
.entry-demo { border: 1px solid var(--border-warm); border-radius: 22px; overflow: hidden; background: var(--ground-deep); }
.entry-tabs { height: 58px; display: flex; border-bottom: 1px solid var(--border); }.entry-tabs button { flex: 1; border: 0; background: transparent; color: rgba(255,246,213,.4); cursor: pointer; font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }.entry-tabs button.active { color: var(--sky); background: rgba(3,204,217,.04); box-shadow: inset 0 -2px var(--sky); }
.entry-stage { min-height: 580px; display: grid; grid-template-columns: 1.35fr .65fr; }
.entry-field { position: relative; overflow: hidden; min-height: 580px; border-right: 1px solid var(--border); background: radial-gradient(circle at 48% 50%, rgba(234,170,0,.07), transparent 38%), #090503; }
.entry-field .arc-1 { left: -90px; top: 120px; }.entry-field .arc-2 { left: 45%; top: -120px; }
.realm-vessel { --realm: var(--realm-org); position: absolute; left: 50%; top: 49%; width: 250px; height: 250px; transform: translate(-50%,-50%); border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--realm); }
.threshold-ring { position: absolute; inset: -34px; border: 1px solid rgba(234,170,0,.18); border-radius: 50%; }.entry-stage.is-threshold .threshold-ring { border-color: var(--cream); box-shadow: 0 0 35px rgba(234,170,0,.22); animation: breathe 2.4s ease-in-out infinite; }
.vessel-rim { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #080503; box-shadow: 0 0 70px rgba(234,170,0,.26), 0 0 0 1px rgba(255,246,213,.2); }
.vessel-rim > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transform: scale(1.08); }
.vessel-core { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 37% 28%, #30200f, #0b0704 66%); box-shadow: inset 0 0 70px rgba(234,170,0,.1), inset 0 1px rgba(255,246,213,.18); }.vessel-core .icon { width: 42px; height: 42px; }
.vessel-label { position: absolute; left: calc(100% + 30px); top: 50%; width: 210px; transform: translateY(-50%); display: grid; text-align: left; }.vessel-label small { color: var(--gold); font-size: 8px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }.vessel-label strong { font-family: var(--font-display); font-size: 26px; white-space: nowrap; }.vessel-label > span { margin-top: 3px; color: rgba(255,246,213,.4); font-size: 10px; }
.nested { position: absolute; width: 38px; height: 38px; padding: 2px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 18px rgba(255,246,213,.2); }.nested .icon { width: 100%; height: 100%; padding: 10px; border-radius: 50%; background: var(--ground); }.n1 { left: 18px; top: 28px; }.n2 { right: 18px; bottom: 38px; }.n3 { left: 48px; bottom: 12px; }
.realm-panel, .approach-control { padding: 54px 42px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(145deg, rgba(234,170,0,.05), transparent 50%); }.realm-panel h3, .approach-control h3 { font-size: 42px; }.realm-panel > p:not(.eyebrow), .approach-control > p:not(.eyebrow) { color: rgba(255,246,213,.48); font-size: 13px; line-height: 1.7; }
.panel-stat { margin: 22px 0; padding: 18px 0; display: flex; align-items: baseline; gap: 12px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }.panel-stat strong { color: var(--gold); font-family: var(--font-display); font-size: 42px; }.panel-stat span { color: rgba(255,246,213,.4); font-size: 10px; }
.realm-panel button { min-height: 46px; border: 0; border-radius: 4px; background: var(--sky); color: #061112; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }.realm-panel > small { margin-top: 12px; color: rgba(255,246,213,.28); font-size: 9px; text-align: center; }
.approach-control input { width: 100%; margin-top: 26px; accent-color: var(--gold); }.approach-control > div { display: flex; justify-content: space-between; align-items: center; color: rgba(255,246,213,.34); font-size: 8px; text-transform: uppercase; letter-spacing: .14em; }.approach-control > div strong { color: var(--gold); font-family: var(--font-display); font-size: 24px; }
.transition-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 22px; gap: 1px; background: var(--border); border: 1px solid var(--border); }.transition-steps article { min-height: 200px; padding: 26px; background: var(--umber); }.transition-steps article > span { color: var(--camel); font-size: 9px; font-weight: 900; letter-spacing: .18em; }.transition-steps strong { display: block; margin-top: 28px; font-family: var(--font-display); font-size: 23px; }.transition-steps p { color: rgba(255,246,213,.42); font-size: 11px; line-height: 1.6; }

.taxonomy-section { background: var(--ground-deep); }
.taxonomy-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.taxonomy-card { min-height: 210px; padding: 24px 10px; border: 1px solid var(--border); border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(145deg, rgba(255,246,213,.02), transparent); }
.taxonomy-orb { width: 116px; height: 116px; margin-bottom: 22px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 32px color-mix(in srgb, var(--realm) 24%, transparent); }.taxonomy-orb img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transform: scale(1.08); }
.taxonomy-card.conceptual .taxonomy-orb { outline: 1px dashed rgba(255,246,213,.6); outline-offset: 5px; }.taxonomy-card > strong { color: var(--realm); font-family: var(--font-display); font-size: 17px; text-align: center; }.taxonomy-card > small { margin-top: 5px; color: rgba(255,246,213,.3); font-size: 8px; text-align: center; }
.anatomy-row { margin-top: 22px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; }
.anatomy-visual, .disclosure-demo { min-height: 430px; border: 1px solid var(--border); border-radius: 18px; background: var(--ground); position: relative; overflow: hidden; }
.anatomy-realm { position: absolute; left: 13%; top: 50%; transform: translateY(-50%); width: 152px; height: 152px; }.anatomy-halo { position: absolute; inset: -34%; border-radius: 50%; background: radial-gradient(circle, rgba(234,170,0,.16), transparent 68%); }.anatomy-rim { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 0 45px rgba(234,170,0,.25); }.anatomy-rim > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transform: scale(1.08); }
.anatomy-label { position: absolute; left: 41%; top: 50%; transform: translateY(-50%); display: grid; }.anatomy-label small { color: var(--gold); font-size: 8px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }.anatomy-label strong { color: var(--gold); font-family: var(--font-display); font-size: 28px; }.anatomy-label p { margin: 3px 0 8px; color: rgba(255,246,213,.48); font-size: 11px; }.anatomy-label > span { color: rgba(255,246,213,.34); font-size: 9px; }.anatomy-label i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: var(--mint); }
.callout-line { position: absolute; display: flex; gap: 8px; align-items: center; color: rgba(255,246,213,.32); font-style: normal; font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }.callout-line b { width: 23px; height: 23px; border: 1px solid var(--border-warm); border-radius: 50%; display: grid; place-items: center; color: var(--camel); }.line-rim { left: 8%; top: 11%; }.line-core { left: 8%; bottom: 10%; }.line-label { right: 8%; bottom: 10%; }
.disclosure-demo { padding: 44px; }.segmented { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border: 1px solid var(--border); border-radius: 999px; }.segmented button { height: 34px; border: 0; border-radius: 999px; background: transparent; color: rgba(255,246,213,.35); cursor: pointer; font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; }.segmented button.active { background: var(--surface-raised); color: var(--cream); }
.disclosure-specimen { height: 185px; display: flex; align-items: center; justify-content: center; gap: 18px; transition: all .3s; }.mini-vessel { width: 70px; height: 70px; padding: 3px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--realm-relationship), var(--cream), var(--realm-relationship)); box-shadow: 0 0 24px rgba(143,230,198,.2); }.mini-vessel .icon { width: 100%; height: 100%; padding: 23px; border-radius: 50%; background: var(--ground); }.disclosure-specimen > div { display: grid; }.disclosure-specimen small { color: var(--mint); font-size: 7px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }.disclosure-specimen strong { color: var(--mint); font-family: var(--font-display); font-size: 21px; }.disclosure-specimen p { margin: 2px 0; color: rgba(255,246,213,.35); font-size: 9px; }
.disclosure-far .mini-vessel { width: 14px; height: 14px; padding: 1px; }.disclosure-far .mini-vessel .icon, .disclosure-far > div { display: none; }.disclosure-mid .mini-vessel { width: 48px; height: 48px; }.disclosure-mid .mini-vessel .icon { padding: 15px; }.disclosure-mid small, .disclosure-mid p { display: none; }.disclosure-rule { color: rgba(255,246,213,.42); font-size: 10px; line-height: 1.5; text-align: center; }
.element-section { margin-top: 54px; }.element-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }.element-grid article { min-height: 110px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; display: flex; align-items: center; gap: 13px; }.element-grid article > div { width: 48px; height: 48px; border: 2px solid var(--element); border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 16px color-mix(in srgb, var(--element) 18%, transparent); }.element-grid .icon { width: 18px; height: 18px; }.element-grid article > span { display: grid; }.element-grid strong { color: var(--element); font-family: var(--font-display); font-size: 17px; }.element-grid small { color: rgba(255,246,213,.32); font-size: 8px; }

.talisman-section { background: radial-gradient(circle at 50% 18%, rgba(3,204,217,.055), transparent 30%), #070403; }
.talisman-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.talisman-grid article { min-width: 0; padding: 18px 12px 20px; border: 1px solid rgba(193,154,107,.16); border-radius: 16px; display: grid; justify-items: center; text-align: center; background: radial-gradient(circle at 50% 35%, rgba(234,170,0,.06), transparent 56%); }
.talisman-grid article > div { width: min(100%, 150px); aspect-ratio: 1; display: grid; place-items: center; }
.talisman-grid img { width: 100%; filter: drop-shadow(0 15px 22px rgba(0,0,0,.55)); transition: transform .35s ease, filter .35s ease; }.talisman-grid article:hover img { transform: scale(1.045) rotate(1deg); filter: drop-shadow(0 18px 28px rgba(234,170,0,.18)); }
.talisman-grid strong { margin-top: 12px; font-family: var(--font-display); font-size: 19px; }.talisman-grid small { margin-top: 4px; color: rgba(255,246,213,.36); font-size: 8px; line-height: 1.45; }
.composition-lab { margin-top: 24px; min-height: 560px; display: grid; grid-template-columns: 1.4fr .6fr; border: 1px solid var(--border-warm); border-radius: 22px; overflow: hidden; background: var(--ground-deep); }
.celestial-composition { position: relative; min-height: 560px; overflow: hidden; border-right: 1px solid var(--border); background: radial-gradient(circle at 54% 48%, rgba(234,170,0,.07), transparent 35%), #070403; }
.geo-orbit, .geo-path, .geo-glint, .geo-anchor { position: absolute; display: block; pointer-events: none; }
.geo-orbit { border: 1px solid rgba(193,154,107,.24); border-radius: 50%; }.geo-orbit--outer { width: 760px; height: 430px; left: -55px; top: 62px; transform: rotate(-8deg); }.geo-orbit--inner { width: 500px; height: 270px; left: 68px; top: 145px; border-style: dashed; border-color: rgba(234,170,0,.24); transform: rotate(13deg); }
.geo-path { width: 530px; height: 260px; left: 40px; top: 165px; border-top: 1px solid rgba(234,170,0,.55); border-radius: 50%; transform: rotate(14deg); }.geo-path--b { width: 480px; left: 110px; top: 205px; border-color: rgba(3,204,217,.42); transform: rotate(-17deg); }
.geo-glint { width: 7px; height: 7px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 5px var(--cream), 0 0 18px var(--gold); }.geo-glint::before, .geo-glint::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--cream); transform: translate(-50%,-50%); }.geo-glint::before { width: 25px; height: 1px; }.geo-glint::after { width: 1px; height: 25px; }.geo-glint.g1 { left: 15%; top: 30%; }.geo-glint.g2 { left: 77%; top: 18%; transform: scale(.7); }.geo-glint.g3 { left: 69%; top: 77%; transform: scale(.5); }
.geo-anchor { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--cream), var(--gold) 34%, #5a2e08 72%); box-shadow: 0 0 0 2px #321d0c, 0 0 16px rgba(234,170,0,.45); }.geo-anchor.a1 { left: 22%; top: 63%; }.geo-anchor.a2 { left: 84%; top: 49%; }
.lab-talisman { position: absolute; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 18px 32px rgba(0,0,0,.55)); }.lab-talisman--main { width: 250px; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; }.lab-talisman--one { width: 138px; left: 8%; bottom: 7%; z-index: 2; }.lab-talisman--two { width: 118px; right: 7%; top: 8%; z-index: 2; }
.composition-layers { padding: 54px 40px; display: flex; flex-direction: column; justify-content: center; }.composition-layers h3 { max-width: 360px; font-size: 32px; line-height: 1.08; }.composition-layers ol { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }.composition-layers li { padding: 15px 0; display: grid; grid-template-columns: 88px 1fr; gap: 12px; border-bottom: 1px solid var(--border); }.composition-layers b { color: var(--camel); font-family: var(--font-display); font-size: 15px; }.composition-layers span { color: rgba(255,246,213,.4); font-size: 9px; line-height: 1.5; }
.geometry-kit { margin-top: 24px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }.geometry-kit article { min-width: 0; padding: 14px 14px 18px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,246,213,.012); }.geometry-kit strong { display: block; margin-top: 12px; font-family: var(--font-display); font-size: 16px; }.geometry-kit small { color: rgba(255,246,213,.32); font-size: 7px; line-height: 1.4; }
.geometry-swatch { height: 120px; position: relative; overflow: hidden; border-radius: 9px; background: #090503; }.geometry-swatch i, .geometry-swatch b, .geometry-swatch span { position: absolute; display: block; }
.geometry-swatch--orbit i { width: 125px; height: 68px; left: 50%; top: 50%; border: 1px solid rgba(234,170,0,.58); border-radius: 50%; transform: translate(-50%,-50%) rotate(-12deg); }.geometry-swatch--orbit i:nth-child(2) { width: 90px; height: 92px; border-style: dashed; border-color: rgba(193,154,107,.46); transform: translate(-50%,-50%) rotate(20deg); }
.geometry-swatch--journey i { width: 130px; height: 65px; left: 8px; top: 50px; border-top: 1px solid var(--gold); border-radius: 50%; transform: rotate(-12deg); }.geometry-swatch--journey b, .geometry-swatch--journey span { width: 7px; height: 7px; top: 59px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }.geometry-swatch--journey b { left: 15px; }.geometry-swatch--journey span { right: 15px; }
.geometry-swatch--anchor b { width: 24px; height: 24px; left: 50%; top: 50%; border-radius: 50%; background: radial-gradient(circle at 32% 28%,var(--cream),var(--gold) 34%,#5a2e08 72%); box-shadow: 0 0 0 4px #2f1d0d,0 0 20px rgba(234,170,0,.45); transform: translate(-50%,-50%); }.geometry-swatch--anchor i { width: 1px; height: 80px; left: 50%; top: 20px; background: linear-gradient(transparent,var(--gold),transparent); }
.geometry-swatch--constellation i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 42px 21px var(--camel),80px -8px var(--cream),115px 30px var(--gold); left: 18px; top: 45px; }.geometry-swatch--constellation i:nth-child(2) { width: 105px; height: 1px; left: 21px; top: 58px; background: rgba(193,154,107,.34); transform: rotate(9deg); }
.geometry-swatch--crossing i { width: 135px; height: 1px; left: 8px; top: 59px; background: linear-gradient(90deg,transparent,var(--gold),transparent); transform: rotate(28deg); }.geometry-swatch--crossing i:nth-child(2) { transform: rotate(-28deg); background: linear-gradient(90deg,transparent,var(--sky),transparent); }.geometry-swatch--crossing b { width: 7px; height: 7px; left: 50%; top: 50%; border-radius: 50%; background: var(--cream); box-shadow: 0 0 15px var(--cream); transform: translate(-50%,-50%); }
.geometry-swatch--horizon i { width: 200px; height: 200px; left: 50%; top: 65%; border: 2px solid rgba(255,246,213,.5); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 24px rgba(234,170,0,.16); }.geometry-swatch--horizon i:nth-child(2) { width: 150px; height: 150px; border: 1px dashed rgba(193,154,107,.4); }
.connector-matrix { margin-top: 24px; border-top: 1px solid var(--border-warm); border-bottom: 1px solid var(--border-warm); }.connector-matrix > div { min-height: 54px; padding: 12px 18px; display: grid; grid-template-columns: .7fr 1fr 1.35fr 1.35fr; align-items: center; border-bottom: 1px solid var(--border); }.connector-matrix > div:last-child { border-bottom: 0; }.connector-matrix > div:first-child { min-height: 36px; color: var(--camel); font-size: 7px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }.connector-matrix strong { color: var(--cream); font-family: var(--font-display); font-size: 17px; }.connector-matrix span { color: rgba(255,246,213,.38); font-size: 9px; }

.organization-section { background: radial-gradient(circle at 50% 34%, rgba(234,170,0,.07), transparent 36%), #080503; }
.organization-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.organization-grid article { min-height: 390px; position: relative; border: 1px solid rgba(193,154,107,.16); border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(234,170,0,.06), transparent 58%); display: grid; place-items: center; padding: 30px; }
.organization-grid img { width: min(100%, 300px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; filter: drop-shadow(0 20px 35px rgba(0,0,0,.4)); transition: transform .4s ease, filter .4s ease; }
.organization-grid article:hover img { transform: scale(1.035); filter: drop-shadow(0 20px 45px rgba(234,170,0,.14)); }
.organization-grid article > div { position: absolute; left: 22px; bottom: 20px; display: grid; }.organization-grid strong { font-family: var(--font-display); font-size: 22px; }.organization-grid small { color: var(--camel); font-size: 8px; text-transform: uppercase; letter-spacing: .16em; }
.variation-axis { margin-top: 24px; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--border-warm); border-bottom: 1px solid var(--border-warm); }
.variation-axis > div { padding: 24px 20px; border-right: 1px solid var(--border); }.variation-axis > div:last-child { border-right: 0; }.variation-axis span { color: var(--sky); font-size: 7px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }.variation-axis strong { display: block; margin-top: 8px; font-family: var(--font-display); font-size: 17px; }.variation-axis p { margin: 6px 0 0; color: rgba(255,246,213,.36); font-size: 9px; line-height: 1.55; }

.allies-section { background: radial-gradient(circle at 50% 25%, rgba(3,204,217,.08), transparent 35%), var(--ground); }
.ally-gallery { display: grid; gap: 26px; }
.persona-set { padding: 22px; border: 1px solid rgba(193,154,107,.18); border-radius: 20px; background: radial-gradient(circle at 18% 40%, rgba(234,170,0,.045), transparent 30%), rgba(6,3,4,.46); }
.persona-set > header { min-height: 42px; padding: 0 4px 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--border); }
.persona-set > header span { color: var(--gold); font-family: var(--font-display); font-size: 24px; }.persona-set > header strong { color: rgba(255,246,213,.35); font-size: 8px; letter-spacing: .15em; text-transform: uppercase; }
.persona-moods { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.persona-moods figure { margin: 0; min-width: 0; border: 1px solid rgba(255,246,213,.09); border-radius: 14px; overflow: hidden; background: #080503; }
.persona-moods figure > div { aspect-ratio: 1; overflow: hidden; background: var(--ground-deep); }.persona-moods img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease, filter .45s ease; }.persona-moods figure:hover img { transform: scale(1.025); filter: brightness(1.04); }
.persona-moods figcaption { min-height: 70px; padding: 14px; display: grid; align-content: center; border-top: 1px solid rgba(193,154,107,.16); }.persona-moods figcaption strong { color: var(--cream); font-family: var(--font-display); font-size: 18px; letter-spacing: .04em; }.persona-moods figcaption small { margin-top: 4px; color: rgba(255,246,213,.35); font-size: 8px; line-height: 1.45; }
.ally-state-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }.ally-state-strip article { text-align: center; }.ally-state-strip article > div { padding: 6px; border-radius: 50%; background: conic-gradient(var(--gold), var(--cream), var(--sky), var(--gold)); box-shadow: 0 18px 55px rgba(0,0,0,.35); }.ally-state-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }.ally-state-strip strong { display: block; margin-top: 17px; font-family: var(--font-display); font-size: 24px; text-transform: capitalize; }.ally-state-strip small { color: rgba(255,246,213,.38); font-size: 9px; text-transform: uppercase; letter-spacing: .14em; }
.ally-contract { margin-top: 64px; padding: 28px; border-top: 1px solid var(--border-warm); border-bottom: 1px solid var(--border-warm); display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 30px; }.ally-contract > div { display: grid; }.ally-contract > div > span { color: var(--camel); font-size: 8px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }.ally-contract strong { margin-top: 4px; font-family: var(--font-display); font-size: 23px; }.ally-contract p { margin: 5px 0 0; color: rgba(255,246,213,.38); font-size: 10px; }.ally-contract > i { color: var(--sky); font-style: normal; font-size: 20px; }

.handoff-section { padding: 120px 24px; text-align: center; display: grid; justify-items: center; background: radial-gradient(circle at 50% 60%, rgba(3,204,217,.08), transparent 34%), var(--ground-deep); border-top: 1px solid var(--border); }.handoff-section h2 { max-width: 800px; }.handoff-section > p:not(.eyebrow) { max-width: 680px; color: rgba(255,246,213,.5); line-height: 1.7; }.handoff-section .primary-button { margin-top: 18px; }
footer { min-height: 120px; padding: 30px clamp(24px, 7vw, 112px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; border-top: 1px solid var(--border); background: var(--ground-deep); color: rgba(255,246,213,.35); font-size: 10px; } footer img { width: 34px; } footer p { font-family: var(--font-display); font-size: 14px; color: var(--cream-muted); } footer span { text-transform: uppercase; letter-spacing: .12em; }

@media (max-width: 1120px) {
  .site-header nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 132px; }
  .hero-field { height: 620px; }
  .taxonomy-grid { grid-template-columns: repeat(4, 1fr); }
  .talisman-grid, .geometry-kit { grid-template-columns: repeat(3, 1fr); }.composition-lab { grid-template-columns: 1fr; }.celestial-composition { border-right: 0; border-bottom: 1px solid var(--border); }
  .connection-system { grid-template-columns: 1fr 1fr; }.connection-copy { grid-column: 1 / -1; }
  .organization-grid { grid-template-columns: repeat(2, 1fr); }.variation-axis { grid-template-columns: repeat(3, 1fr); }.variation-axis > div:nth-child(3) { border-right: 0; }
  .state-grid { grid-template-columns: repeat(2, 1fr); }
  .entry-stage { grid-template-columns: 1fr; }.entry-field { border-right: 0; border-bottom: 1px solid var(--border); }.realm-panel, .approach-control { min-height: 380px; }
  .anatomy-row { grid-template-columns: 1fr; }.element-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 740px) {
  .site-header { height: 66px; padding: 0 16px; }.brand small, .download-link { display: none; }.brand { min-width: 0; }
  .hero { min-height: auto; padding: 110px 18px 70px; }.hero h1 { font-size: 53px; }.hero-principles { grid-template-columns: 1fr; }.hero-principles div { padding-bottom: 14px; }
  .hero-field { height: 620px; border-radius: 18px; }.realm-node--lg { --node: 82px; }.realm-label { width: 120px; }.realm-label strong { font-size: 12px; }.realm-label small { display: none; }.compute-pill { display: none; }.ally-presence { left: 12%; }
  .system-section { padding: 86px 18px; }.split-heading { grid-template-columns: 1fr; gap: 16px; }.section-heading { margin-bottom: 36px; }
  .ground-specimen { grid-template-columns: 1fr; padding: 32px; }.material-chips { justify-self: stretch; margin-top: 20px; }.material-chips span { width: 100%; }
  .state-grid, .rule-band, .transition-steps, .ally-state-strip { grid-template-columns: 1fr 1fr; }.rule-band div:nth-child(2) { border-right: 0; }
  .entry-field { min-height: 480px; }.realm-vessel { width: 180px; height: 180px; left: 38%; }.vessel-label { left: calc(100% + 18px); width: 130px; }.vessel-label strong { font-size: 19px; }.nested { width: 30px; height: 30px; }.realm-panel, .approach-control { padding: 38px 28px; }
  .taxonomy-grid { grid-template-columns: repeat(2, 1fr); }.taxonomy-card { min-height: 180px; }.anatomy-visual { min-height: 520px; }.anatomy-realm { left: 50%; top: 36%; transform: translate(-50%,-50%); }.anatomy-label { left: 50%; top: 64%; transform: translateX(-50%); width: 230px; text-align: center; }.callout-line { display: none; }.disclosure-demo { padding: 28px; }.element-grid { grid-template-columns: 1fr 1fr; }
  .organization-grid { grid-template-columns: 1fr; }.organization-grid article { min-height: 340px; }.variation-axis { grid-template-columns: 1fr 1fr; }.variation-axis > div { border-right: 0; border-bottom: 1px solid var(--border); }
  .persona-moods { grid-template-columns: repeat(2, 1fr); }
  .talisman-grid { grid-template-columns: repeat(2, 1fr); }.geometry-kit { grid-template-columns: repeat(2, 1fr); }.celestial-composition { min-height: 440px; }.lab-talisman--main { width: 190px; }.lab-talisman--one { width: 105px; }.lab-talisman--two { width: 90px; }.connector-matrix > div { grid-template-columns: .8fr 1fr; gap: 7px 12px; }.connector-matrix > div:first-child { display: none; }
  .ally-contract { grid-template-columns: 1fr; text-align: center; }.ally-contract > i { transform: rotate(90deg); }
  footer { grid-template-columns: auto 1fr; } footer span { display: none; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 45px; }.hero-actions { align-items: stretch; flex-direction: column; }.motion-toggle { justify-content: center; }
  .state-grid, .rule-band, .transition-steps, .ally-state-strip, .element-grid { grid-template-columns: 1fr; }.rule-band div { border-right: 0; }
  .taxonomy-grid { gap: 7px; }.taxonomy-card { min-height: 190px; padding: 18px 8px; }.taxonomy-orb { width: 92px; height: 92px; }
  .connection-system { grid-template-columns: 1fr; }.connection-copy { grid-column: auto; }
  .persona-set { padding: 14px; }.persona-set > header { align-items: flex-start; flex-direction: column; gap: 4px; }.persona-moods { grid-template-columns: 1fr; }
  .geometry-kit { grid-template-columns: 1fr; }.composition-layers { padding: 40px 24px; }.celestial-composition { min-height: 390px; }.lab-talisman--main { width: 160px; }.connector-matrix > div { grid-template-columns: 1fr; padding: 16px; }
}
