:root {
  --ink: #263747;
  --muted: #7c7a76;
  --paper: #eeeae4;
  --warm: #b86f3f;
  --thread: rgba(188, 163, 134, .26);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); }
body { overflow: hidden; font-family: "Segoe UI", Arial, sans-serif; }

.knowledge-space { position: relative; min-height: 100vh; isolation: isolate; overflow: hidden; }
.knowledge-space::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(ellipse at 47% 88%, rgba(255,248,236,.88), transparent 27%),
    radial-gradient(circle at 69% 22%, rgba(226,216,225,.5), transparent 24%),
    radial-gradient(circle at 21% 42%, rgba(242,225,209,.62), transparent 25%),
    linear-gradient(118deg, #ece8e2 0%, #f5f1eb 48%, #e8e4df 100%);
}
.space-atmosphere { position: absolute; inset: -8%; z-index: -3; animation: atmosphere 32s ease-in-out infinite alternate; }
.space-atmosphere::before,
.space-atmosphere::after { content: ""; position: absolute; inset: 0; }
.space-atmosphere::before {
  opacity: .68;
  background-image:
    radial-gradient(circle at 5% 21%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 12% 52%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 18% 15%, #fff 0 1.5px, transparent 3px),
    radial-gradient(circle at 23% 81%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 31% 34%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 38% 68%, rgba(255,255,255,.95) 0 1.5px, transparent 4px),
    radial-gradient(circle at 44% 10%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 51% 51%, rgba(255,255,255,.95) 0 2px, transparent 5px),
    radial-gradient(circle at 58% 75%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 65% 14%, #fff 0 1.5px, transparent 3px),
    radial-gradient(circle at 73% 59%, rgba(255,255,255,.95) 0 1px, transparent 3px),
    radial-gradient(circle at 79% 29%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 86% 83%, #fff 0 1.5px, transparent 4px),
    radial-gradient(circle at 93% 18%, #fff 0 1px, transparent 2px);
  background-size: 37% 41%, 43% 47%, 51% 39%, 47% 53%, 41% 49%, 59% 43%, 53% 51%;
}
.space-atmosphere::after {
  opacity: .14;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}
.space-atmosphere i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 7px 2px rgba(255,255,255,.95), 0 0 18px 5px rgba(215,187,152,.24); }
.space-atmosphere i:nth-child(1) { left: 17%; top: 12%; }
.space-atmosphere i:nth-child(2) { left: 52%; top: 9%; }
.space-atmosphere i:nth-child(3) { left: 92%; top: 18%; }
.space-atmosphere i:nth-child(4) { left: 27%; top: 91%; }
.space-atmosphere i:nth-child(5) { left: 84%; top: 86%; }

.space-mark { position: absolute; left: clamp(30px, 2.6vw, 52px); top: clamp(28px, 3.8vh, 44px); z-index: 8; display: flex; flex-direction: column; letter-spacing: .22em; }
.space-mark span { font: 600 20px Georgia, serif; }
.space-mark small { margin-top: 6px; color: #474a4b; font-size: 9px; letter-spacing: .13em; }
.profile-presence { position: absolute; right: clamp(28px, 3.5vw, 62px); top: clamp(27px, 3.8vh, 44px); z-index: 8; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(53,67,76,.2); border-radius: 50%; color: var(--muted); text-decoration: none; }
.profile-presence > span { font: 13px Georgia, serif; }
.profile-presence small { display: none; }

.space-invitation { position: absolute; left: 50%; top: 46%; z-index: 2; width: min(610px, 70vw); text-align: center; transform: translate(-50%,-50%); pointer-events: none; transition: opacity 2.5s ease, transform 2.5s ease; }
.space-presence { margin: 0 0 13px; color: #8e8880; font: italic 12px Georgia, serif; transition: opacity 2s ease, transform 2s ease; }
.space-invitation h1 { margin: 0; color: rgba(69,70,68,.5); font: normal clamp(20px,2.2vw,31px)/1.25 Georgia,serif; transition: opacity 2.2s ease, transform 2.2s ease; }
.space-invitation.welcome-receded .space-presence { opacity: 0; transform: translateY(-7px); }
.space-invitation.question-receded { opacity: 0; transform: translate(-50%,-50%) scale(.985); }

.relationship-layer { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 4px rgba(255,255,255,.7)); }
.relationship-thread { fill: none; stroke: var(--thread); stroke-width: .65; stroke-linecap: round; stroke-dasharray: 1 3.2; vector-effect: non-scaling-stroke; opacity: .13; transition: opacity 2.4s ease, stroke 2.4s ease, stroke-width 2.4s ease, filter 2.4s ease; }
.relationship-thread.is-related { opacity: .2; stroke: rgba(213,172,130,.46); }
.relations-awake .relationship-thread.is-related { opacity: .58; filter: drop-shadow(0 0 3px rgba(255,244,224,.8)); }
.relations-clear .relationship-thread.is-related { opacity: .95; stroke: rgba(213,166,119,.62); stroke-width: .9; filter: drop-shadow(0 0 5px rgba(255,247,231,.95)); }
.relationship-thread.is-muted { opacity: .025; }

.knowledge-field { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.knowledge-object { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 13px; color: var(--node-color,#334658); text-decoration: none; pointer-events: auto; opacity: .86; transform: translate(-50%,-50%); transition: opacity 1.6s ease, filter 1.6s ease; animation: node-drift var(--drift-duration) ease-in-out var(--drift-delay) infinite alternate; }
.knowledge-object:focus-visible { outline: 1px solid rgba(177,119,78,.45); outline-offset: 14px; border-radius: 50%; }
.node-core { position: relative; flex: 0 0 auto; width: 9px; height: 9px; border: 1px solid rgba(255,255,255,.95); border-radius: 50%; background: var(--node-glow,#d9a26f); box-shadow: 0 0 4px 1px #fff, 0 0 11px 4px color-mix(in srgb,var(--node-glow) 35%,transparent); transition: transform 1.8s ease, box-shadow 1.8s ease; }
.node-core::before,.node-core::after { content: ""; position: absolute; left: 50%; top: 50%; border: 1px solid color-mix(in srgb,var(--node-glow) 26%,transparent); border-radius: 50%; opacity: 0; transform: translate(-50%,-50%) scale(.55); transition: opacity 2s ease,transform 2s cubic-bezier(.2,.7,.2,1); }
.node-core::before { width: 42px; height: 42px; }
.node-core::after { width: 68px; height: 68px; }
.node-copy { display: flex; flex-direction: column; align-items: var(--text-align); text-align: var(--text-align); gap: 3px; transition: transform 1.5s cubic-bezier(.2,.7,.2,1); }
.node-copy strong { font: normal 24px Georgia,serif; letter-spacing: -.01em; white-space: nowrap; }
.node-copy small { color: #55595b; font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
.node-copy em { max-width: 230px; margin-top: 6px; color: color-mix(in srgb,var(--node-color) 76%,#777); font: italic 11px/1.35 Georgia,serif; opacity: .78; }
.weight-strong .node-copy strong { font-size: 27px; }
.weight-strong .node-core { width: 13px; height: 13px; }
.weight-light .node-copy strong { font-size: 25px; }
.weight-technical .node-copy strong,.weight-conversational .node-copy strong { font-size: 24px; }
.weight-foundational .node-copy strong { font-size: 23px; }
.knowledge-object[data-node-id="founding-domains"] { --node-color:#473a32; --node-glow:#e89861; flex-direction:column-reverse; align-items:flex-start; gap:28px; }
.knowledge-object[data-node-id="workspace"] { --node-color:#344b62; --node-glow:#7ca7e8; flex-direction:column-reverse; align-items:flex-start; gap:15px; }
.knowledge-object[data-node-id="vision"] { --node-color:#594269; --node-glow:#c98be2; flex-direction:column-reverse; align-items:flex-start; gap:16px; }
.knowledge-object[data-node-id="memory-engine"] { --node-color:#77512c; --node-glow:#e4aa66; }
.knowledge-object[data-node-id="dialog-engine"] { --node-color:#455d78; --node-glow:#86aef0; flex-direction:column; align-items:flex-start; }
.knowledge-object[data-node-id="space-interaction-model"] { --node-color:#49696c; --node-glow:#8ec59a; flex-direction:column-reverse; align-items:flex-start; gap:23px; }
.knowledge-object:hover,.knowledge-object:focus-visible,.knowledge-object.is-active,.knowledge-object.is-attention { opacity: 1; z-index: 6; }
.knowledge-object:hover .node-core,.knowledge-object:focus-visible .node-core,.knowledge-object.is-active .node-core,.knowledge-object.is-attention .node-core { animation: node-pulse 3.8s ease-in-out infinite alternate; transform: scale(1.08); box-shadow: 0 0 7px 3px #fff,0 0 24px 9px color-mix(in srgb,var(--node-glow) 58%,transparent),0 0 60px 22px color-mix(in srgb,var(--node-glow) 18%,transparent); }
.knowledge-object:hover .node-core::before,.knowledge-object:focus-visible .node-core::before,.knowledge-object.is-active .node-core::before,.knowledge-object.is-attention .node-core::before { opacity:.72; transform:translate(-50%,-50%) scale(1); }
.knowledge-object.is-attention .node-core::after { opacity:.55; transform:translate(-50%,-50%) scale(1); }
.knowledge-object:hover .node-copy,.knowledge-object:focus-visible .node-copy,.knowledge-object.is-active .node-copy,.knowledge-object.is-attention .node-copy { transform: translateY(-3px) scale(1.018); }
.knowledge-object.is-related { opacity: .92; }
.knowledge-object.is-muted { opacity: .18; }
.knowledge-object.was-last-selected .node-core { box-shadow:0 0 5px 2px #fff,0 0 14px 5px color-mix(in srgb,var(--node-glow) 40%,transparent); }

.thought-beginning { position: absolute; left: 50%; bottom: 9.5%; z-index: 7; display: grid; grid-template-columns: 1fr auto; width: min(360px,72vw); transform: translateX(-50%); border-bottom: 1px solid rgba(75,70,65,.34); transition: opacity 2s ease,border-color .8s ease,transform 2s ease; }
.thought-beginning::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 620px; height: 190px; border: 1px solid rgba(218,190,157,.15); border-radius: 50%; transform: translate(-50%,-35%); box-shadow: 0 0 50px rgba(255,246,231,.75),inset 0 0 45px rgba(255,255,255,.35); pointer-events: none; }
.thought-beginning:focus-within { border-color: rgba(166,109,69,.65); opacity: 1!important; transform: translateX(-50%) translateY(-3px); }
.thought-beginning input { border: 0; outline: 0; background: transparent; padding: 12px 5px; color: var(--ink); font: 15px Georgia,serif; text-align: center; }
.thought-beginning input::placeholder { color: #89847f; }
.thought-beginning button { border: 0; background: transparent; color: #827d77; padding: 12px; cursor: pointer; font-size: 0; }
.thought-beginning button::after { content: "→"; font: 18px Georgia,serif; }
.thought-hint { grid-column: 1/-1; height: 14px; margin: 7px 0 0; text-align: center; color: #9a948c; font: 10px Georgia,serif; }
.knowledge-space.intro-complete .thought-beginning:not(:focus-within) { opacity: .78; }
.workspace-entry { position: absolute; right: clamp(25px,3vw,54px); bottom: clamp(22px,3vh,38px); z-index: 8; color: #777771; font-size: 9px; letter-spacing: .08em; text-decoration: none; opacity: .42; transition: opacity .7s; }
.workspace-entry:hover,.workspace-entry:focus-visible { opacity: 1; }
.space-principle { position: absolute; left: clamp(28px,2.6vw,52px); bottom: clamp(22px,3vh,38px); margin: 0; color: #8f8a84; font: italic 10px Georgia,serif; }
.neutral-return { position: absolute; left: 50%; bottom: 3%; z-index: 9; transform: translateX(-50%); border: 0; background: transparent; color: var(--muted); font: 10px inherit; letter-spacing: .06em; cursor: pointer; }
.neutral-return span { margin-left: 7px; padding: 2px 5px; border: 1px solid rgba(57,76,88,.15); border-radius: 3px; font-size: 8px; }
.attention-guidance { position:absolute; left:50%; top:62%; z-index:8; margin:0; color:#89837c; font:italic 10px Georgia,serif; letter-spacing:.02em; opacity:0; transform:translateX(-50%) translateY(8px); transition:opacity 1.8s ease,transform 1.8s ease; }
.knowledge-space.is-attending .attention-guidance { opacity:.8; transform:translateX(-50%) translateY(0); }
.knowledge-space.is-attending .space-invitation { opacity: 0; }
.knowledge-space.is-attending .thought-beginning { opacity: .18; pointer-events:none; }
.knowledge-space.is-attending .knowledge-object:not(.is-attention) { opacity:.16; filter:saturate(.55); animation-play-state:paused; }
.knowledge-space.is-attending .knowledge-object.is-attention { z-index:10; animation:none; transform:translate(calc(-50% + var(--attention-x)),calc(-50% + var(--attention-y))) scale(1.08); opacity:1; transition:transform 2.1s cubic-bezier(.18,.72,.2,1),opacity 1.8s ease; }
.knowledge-space.is-deepening .knowledge-object:not(.is-attention) { opacity:.035; filter:blur(.8px); }
.knowledge-space.is-deepening .knowledge-object.is-attention { transform:translate(calc(-50% + var(--attention-x)),calc(-50% + var(--attention-y))) scale(1.16); }
.visually-hidden { position: absolute!important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@keyframes atmosphere { from { transform: scale(1) translate(-.2%,-.15%); } to { transform: scale(1.016) translate(.2%,.15%); } }
@keyframes node-drift { from { margin-left: calc(var(--drift-x) * -.5); margin-top: calc(var(--drift-y) * -.5); } to { margin-left: calc(var(--drift-x) * .5); margin-top: calc(var(--drift-y) * .5); } }
@keyframes node-pulse { from { opacity:.82; scale:.96; } to { opacity:1; scale:1.06; } }
.knowledge-space.is-paused * { animation-play-state: paused!important; }

@media(max-width:1000px) {
  .node-copy em { display:none; }
  .node-copy strong,.weight-strong .node-copy strong { font-size:20px; }
  .space-invitation { top:39%; }
}
@media(max-width:680px) {
  html,body { width:100%; overflow:hidden; }
  .knowledge-space { min-height:100svh; width:100%; overflow:hidden; }
  .space-mark { left:22px; top:24px; }
  .profile-presence { right:22px; top:22px; }
  .space-invitation { top:24%; width:94vw; }
  .space-invitation h1 { font-size:23px; padding:0 12px; }
  .knowledge-field { inset:38% 12px 21%; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:12px 5px; }
  .knowledge-object,.knowledge-object[data-node-id] { position:relative; left:auto!important; top:auto!important; width:100%; min-width:0; min-height:105px; flex-direction:row; align-items:center; justify-content:flex-start; gap:9px; padding:8px; opacity:.78; transform:none!important; animation:mobile-breathe var(--drift-duration) ease-in-out var(--drift-delay) infinite alternate; }
  .knowledge-object:nth-child(3),.knowledge-object:nth-child(5) { display:none; }
  .node-core { width:8px; height:8px; }
  .node-core::before { width:30px; height:30px; }
  .node-core::after { width:46px; height:46px; }
  .node-copy { min-width:0; align-items:flex-start; text-align:left; }
  .node-copy strong,.weight-strong .node-copy strong { max-width:100%; font-size:clamp(14px,4vw,17px); white-space:normal; }
  .node-copy em { display:block; max-width:125px; font-size:8px; }
  .relationship-layer { display:none; }
  .thought-beginning { bottom:8%; width:76vw; }
  .thought-beginning::before { width:130vw; height:130px; }
  .space-principle { display:none; }
  .workspace-entry { right:16px; bottom:16px; max-width:132px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .neutral-return { display:none; }
}
@keyframes mobile-breathe { from { opacity:.68; } to { opacity:.84; } }
@media(prefers-reduced-motion:reduce) { * { animation:none!important; transition-duration:.01ms!important; } .knowledge-space.is-attending .knowledge-object.is-attention { transform:translate(calc(-50% + var(--attention-x)),calc(-50% + var(--attention-y))) scale(1.03); } }