:root {
  color-scheme: dark;
  --ink: #e7ece9;
  --muted: #78817c;
  --hairline: rgba(222, 232, 226, 0.11);
  --camera-zoom: 1;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: #050706; }
body { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: var(--ink); -webkit-font-smoothing: antialiased; }
button { font: inherit; }

.shell {
  width: 100vw;
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(260px, 2fr) minmax(0, 3fr);
  overflow: hidden;
  background: #050706;
}

.story-panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid rgba(255,255,255,.055);
  background:
    radial-gradient(circle at 68% 36%, rgba(114, 128, 120, .045), transparent 38%),
    linear-gradient(180deg, #070908, #040605);
}

.story-veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(90deg, rgba(5,7,6,.78), rgba(5,7,6,.47));
  mask-image: linear-gradient(to bottom, black 0 38%, rgba(0,0,0,.86) 65%, rgba(0,0,0,.66));
}

.passage {
  position: absolute;
  z-index: 1;
  inset: 0;
  padding: clamp(26px, 5vw, 82px) clamp(24px, 4.6vw, 70px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(16px, 1.6vw, 24px);
  line-height: 1.7;
  letter-spacing: .01em;
  color: rgba(221, 226, 222, .13);
}

.passage p { margin: 0; max-width: 31rem; filter: blur(5px); transition: color 1.1s ease, filter 1.1s ease, opacity 1.1s ease; }
.passage.awake .latent { color: rgba(221, 226, 222, .21); filter: blur(4px); }
.passage .reveal { color: rgba(234,239,235,0); filter: blur(7px); opacity: 0; transform: translateY(5px); transition: color 1.4s ease, filter 1.5s ease, opacity 1.2s ease, transform 1.4s ease; }
.passage .reveal.revealed { color: rgba(234,239,235,.78); filter: blur(0); opacity: 1; transform: none; }

.thought-panel, .thought-board { min-width: 0; min-height: 0; width: 100%; height: 100%; }
.thought-board {
  position: relative;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: grab;
  outline: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(115, 134, 123, .026), transparent 35%),
    #030504;
}
.thought-board:active { cursor: grabbing; }

.world {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  transform-origin: 0 0;
  will-change: transform;
}

.disturbance-layer, .thought-layer { position: absolute; inset: 0; overflow: visible; }

.disturbance {
  --attention: 0;
  position: absolute;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  pointer-events: none;
  opacity: .16;
  background: radial-gradient(circle, rgba(196, 209, 201, .2) 0 3%, rgba(112, 129, 119, .07) 14%, transparent 66%);
  filter: blur(1px);
  animation: disturbance 6s ease-in-out infinite alternate;
  transition: box-shadow .18s ease, opacity .18s ease, filter .18s ease;
}
.disturbance::after {
  content: '';
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  border: 1px solid rgba(184, 208, 195, .28);
  opacity: calc(var(--attention) * .32);
  transform: scale(calc(.72 + var(--attention) * .42));
  transition: opacity .18s ease, transform .18s ease;
}
.disturbance:nth-child(2n) { animation-duration: 8s; animation-delay: -2.2s; }
.disturbance:nth-child(3n) { animation-duration: 10s; animation-delay: -5s; }
.disturbance.remembering {
  box-shadow: 0 0 calc(7px + var(--attention) * 18px) rgba(143, 183, 162, calc(.03 + var(--attention) * .08));
}
.disturbance.attending {
  animation: none;
  opacity: calc(.25 + var(--attention) * .5);
  filter: blur(calc(1px - var(--attention) * .82px));
  box-shadow:
    0 0 calc(12px + var(--attention) * 30px) rgba(155, 198, 176, calc(.08 + var(--attention) * .18)),
    inset 0 0 12px rgba(205, 225, 214, calc(.02 + var(--attention) * .09));
}
.disturbance.attending::after {
  opacity: calc(.16 + var(--attention) * .6);
  transform: scale(calc(.82 + var(--attention) * .55));
}
.disturbance.tap-pulse::after { animation: tapAttend .34s ease-out; }
.disturbance.spent { opacity: 0; transition: opacity .7s ease; }
@keyframes disturbance {
  0% { scale: .75; opacity: .07; filter: blur(2px); }
  65% { scale: 1.15; opacity: .18; }
  100% { scale: .9; opacity: .09; filter: blur(1px); }
}
@keyframes tapAttend {
  from { opacity: .78; transform: scale(.7); }
  to { opacity: 0; transform: scale(1.65); }
}

.thought {
  position: absolute;
  left: 0;
  top: 0;
  min-height: 29px;
  max-width: 240px;
  padding: 6px 9px 5px;
  border: 1px solid rgba(224,232,227,.18);
  border-radius: 4px;
  background: rgba(11,15,13,.88);
  color: rgba(232,238,234,.83);
  letter-spacing: .075em;
  font-size: 10px;
  line-height: 1.25;
  white-space: nowrap;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  scale: .82;
  will-change: transform, opacity, filter;
  transition: opacity .7s ease, scale .65s cubic-bezier(.2,.8,.2,1), border-color .5s ease, box-shadow .5s ease, color .5s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
.thought.visible { opacity: .86; scale: 1; }
.thought.held { cursor: grabbing; border-color: rgba(233,240,235,.48); box-shadow: 0 10px 28px rgba(0,0,0,.34); z-index: 40; }
.thought.derived { color: rgba(224,235,229,.9); border-color: rgba(177,204,190,.24); background: rgba(13,18,15,.93); }
.thought.insight { color: rgba(239,244,241,.96); border-color: rgba(206,225,215,.36); letter-spacing: .1em; }
.thought.has-ancestry::after { content: ''; position: absolute; inset: 3px; border-radius: 2px; border: 1px solid rgba(255,255,255,.035); pointer-events: none; }
.thought.resonating:not(.held) {
  border-color: rgba(195,222,208, calc(.16 + var(--resonance) * .35));
  box-shadow: 0 0 calc(5px + var(--resonance) * 14px) rgba(137,181,159, calc(var(--resonance) * .10));
  animation: resonate calc(2.4s - var(--resonance) * .8s) ease-in-out infinite alternate;
}
.thought.emerging { animation: emerge 1.45s cubic-bezier(.2,.8,.2,1) both; }
.thought.vanishing { opacity: 0 !important; scale: .72 !important; filter: blur(6px); }
@keyframes resonate {
  from { translate: calc(var(--resonance) * -1px) 0; }
  52% { translate: calc(var(--resonance) * 1.3px) calc(var(--resonance) * -.4px); }
  to { translate: calc(var(--resonance) * -.5px) calc(var(--resonance) * .8px); }
}
@keyframes emerge {
  0% { opacity: 0; scale: .58; filter: blur(8px); }
  45% { opacity: 1; scale: 1.08; filter: blur(1px); }
  100% { opacity: .94; scale: 1; filter: blur(0); }
}

.brand-mark {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  display: flex;
  gap: 7px;
  align-items: baseline;
  pointer-events: none;
  color: rgba(221,230,225,.16);
  font-size: 9px;
  letter-spacing: .14em;
}
.brand-mark strong { font-weight: 500; color: rgba(221,230,225,.29); }

.debug-canvas { position: absolute; inset: 0; pointer-events: none; display: none; }
.debugging .debug-canvas { display: block; }
.debugging .thought-board::after {
  content: 'debug · ` to hide · R to reset';
  position: absolute;
  left: 12px;
  bottom: 12px;
  color: rgba(210,230,218,.45);
  font-size: 9px;
  letter-spacing: .08em;
  pointer-events: none;
}

@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: 37dvh 63dvh; }
  .story-panel { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.055); }
  .passage { padding: 24px 24px 30px; justify-content: flex-start; overflow: hidden; font-size: 16px; line-height: 1.55; gap: .8rem; }
  .passage .latent:nth-of-type(2) { display: none; }
  .thought { min-height: 32px; padding: 7px 10px 6px; font-size: 10px; }
  .disturbance { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}