:root{
  --bg:#000;
  --fg:#9aa59d;
  --bright:#d5ddd7;
  --dim:#38413b;
  --accent:#8cb596;
  --phosphor:rgba(116,173,128,.08);
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:#000}
body{overflow:hidden;color:var(--fg);font-family:"Courier New",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
button,textarea{font:inherit}
#experience{position:relative;width:100vw;height:100dvh;min-height:100vh;overflow:hidden;background:#000;isolation:isolate}
#rainField,#field{position:absolute;inset:0;width:100%;height:100%}
#rainField{z-index:1;pointer-events:none;opacity:1;transition:opacity .7s ease}
#field{z-index:3;touch-action:auto}
html.rabbit-active #field{touch-action:none}
.presence{position:absolute;inset:-6%;z-index:2;pointer-events:none;background:radial-gradient(circle at 48% 44%,rgba(54,79,60,.016),transparent 28%),radial-gradient(circle at 82% 70%,rgba(44,69,50,.010),transparent 24%);opacity:.28;animation:presenceBreath 13s ease-in-out infinite alternate}
@keyframes presenceBreath{from{transform:scale(1);opacity:.18}to{transform:scale(1.018);opacity:.32}}
.crt{position:absolute;inset:0;z-index:8;pointer-events:none;background:radial-gradient(circle at center,transparent 35%,rgba(0,0,0,.3) 70%,rgba(0,0,0,.92) 100%),repeating-linear-gradient(to bottom,rgba(255,255,255,.005) 0,rgba(255,255,255,.005) 1px,transparent 1px,transparent 4px);opacity:.72}
.terminal{position:absolute;z-index:5;left:clamp(22px,6vw,84px);top:clamp(28px,7.5vh,82px);width:min(88vw,900px);height:min(74vh,700px);overflow:auto;scrollbar-width:none;user-select:none;font-size:clamp(15px,1.35vw,20px);line-height:1.72;letter-spacing:.045em;text-shadow:0 0 10px rgba(110,185,124,.025);mask-image:linear-gradient(to bottom,transparent 0,#000 3%,#000 100%)}
.terminal::-webkit-scrollbar{display:none}
.terminal__output{min-height:100%;padding:18px 0 54px;transition:opacity 1.4s ease,filter 1.4s ease}
.terminal__line{min-height:1.55em;white-space:pre-wrap;overflow-wrap:anywhere;transition:opacity 1.1s ease,filter 1.1s ease}
.terminal__line.dim{color:var(--dim)}
.terminal__line.accent{color:var(--accent);text-shadow:0 0 13px rgba(106,176,121,.06)}
.terminal__line.alert{color:var(--bright)}
.terminal__line.user{color:#bfd0c3}
.terminal__line.stale{opacity:.21;filter:blur(.12px)}
.terminal__line.spacer{height:.9em}
.typed-line{display:flex;align-items:baseline;flex-wrap:wrap;min-height:1.55em;white-space:pre-wrap}
.typed-line__prompt{color:#6f7e73;margin-right:.45em}
.typed-line__value{color:#c8d4cb;white-space:pre-wrap;overflow-wrap:anywhere}
.typed-line__caret{display:inline-block;width:.62em;height:1.04em;margin-left:.08em;vertical-align:-.13em;background:#a9b5ac;opacity:.78;animation:caretBlink 1.02s steps(1) infinite;box-shadow:0 0 8px rgba(129,181,139,.05)}
@keyframes caretBlink{50%{opacity:.07}}
.keyboard-sink{position:absolute;left:0;top:0;width:2px;height:2px;min-width:0;min-height:0;padding:0;border:0;outline:0;resize:none;opacity:.001;clip-path:inset(50%);overflow:hidden;pointer-events:none;color:transparent;background:transparent;caret-color:transparent}
.gate{position:absolute;z-index:20;left:50%;top:50%;transform:translate(-50%,-50%);border:0;background:transparent;color:#7d847f;padding:20px 28px;letter-spacing:.28em;cursor:pointer;transition:color .35s ease,opacity .45s ease;text-shadow:0 0 12px rgba(130,190,143,.03)}
.gate::before{content:"> ";color:#303632}
.gate:hover,.gate:focus-visible{outline:none;color:#bcc5be}
.micro-hint{position:absolute;z-index:6;left:50%;bottom:clamp(20px,4vh,42px);transform:translateX(-50%);font-size:10px;letter-spacing:.22em;color:#252c27;opacity:0;transition:opacity .8s ease;pointer-events:none;white-space:nowrap}
.micro-hint.visible{opacity:1}
body.blackout .terminal{opacity:.004;transition:opacity 1.25s ease}
body.blackout .presence{opacity:0;transition:opacity 1.25s ease}
html.rabbit-clickable #field{cursor:pointer}
@media(max-width:700px){.terminal{left:20px;top:6vh;width:calc(100vw - 40px);height:72vh;font-size:15px;line-height:1.62}.gate{font-size:14px}.micro-hint{bottom:22px}.presence{animation-duration:16s}}
@media(prefers-reduced-motion:reduce){.presence{animation:none}.typed-line__caret{animation-duration:1.7s}.terminal__output{transition-duration:.2s!important}}


/* v0.4.2: the last question is the ending. The interface slowly disappears
   without opening another prompt or signaling a conventional completion. */
body.final-residue .terminal{opacity:0;transition:opacity 6.8s cubic-bezier(.4,0,.2,1)}
body.final-residue .presence{opacity:0;transition:opacity 8s ease}
body.final-residue .crt{opacity:.20;transition:opacity 8s ease}
body.final-residue #field{opacity:0;transition:opacity 5s ease}
body.final-residue #microHint{opacity:0!important}
body.final-residue{cursor:none}
@media(prefers-reduced-motion:reduce){
  body.final-residue .terminal,body.final-residue .presence,body.final-residue .crt,body.final-residue #field{transition-duration:1.2s!important}
}

/* v0.7 Narrative & Presence: brief phosphor disruption as the anomaly crosses behind text. */
.terminal__line.signal-disturb{filter:blur(.28px);transform:translateX(.7px);text-shadow:-1px 0 rgba(95,150,106,.12),1px 0 rgba(170,190,174,.05);transition:none}

/* v0.7 Narrative & Presence: the screen listens before it disappears. */
body.listening .terminal{opacity:.38;filter:blur(.16px);transition:opacity 1.1s ease,filter 1.1s ease}
body.listening .presence{opacity:.08;transition:opacity 1.2s ease}
body.listening .crt{opacity:.48;transition:opacity 1.2s ease}

/* Returning to the tab produces a tiny phosphor recovery, not explanatory copy. */
body.presence-return .crt{animation:returnPhosphor .72s ease-out 1}
body.presence-return .presence{animation:returnPresence .72s ease-out 1}
@keyframes returnPhosphor{
  0%{opacity:.38}
  18%{opacity:.78}
  42%{opacity:.58}
  100%{opacity:.72}
}
@keyframes returnPresence{
  0%{opacity:.10;transform:scale(1.006)}
  35%{opacity:.34;transform:scale(1.012)}
  100%{opacity:.28;transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
  body.presence-return .crt,body.presence-return .presence{animation:none!important}
  body.listening .terminal,body.listening .presence,body.listening .crt{transition-duration:.25s!important}
}

/* v0.8 Behavioral pacing: the system waits more deeply when the visitor does.
   No new message appears; only room/presence/caret timing changes. */
body.awaiting-input .presence{opacity:.22;transition:opacity 2.2s ease}
body.awaiting-input .crt{opacity:.69;transition:opacity 2.2s ease}
body.awaiting-input-deep .presence{opacity:.15;transition:opacity 2.6s ease}
body.awaiting-input-deep .crt{opacity:.64;transition:opacity 2.6s ease}
body.awaiting-input-deep .typed-line__caret{animation-duration:1.28s}
body.awaiting-input-very-deep .presence{opacity:.105;transition:opacity 3.2s ease}
body.awaiting-input-very-deep .crt{opacity:.59;transition:opacity 3.2s ease}
body.awaiting-input-very-deep .typed-line__caret{animation-duration:1.58s;box-shadow:0 0 5px rgba(129,181,139,.03)}
@media(prefers-reduced-motion:reduce){
  body.awaiting-input .presence,body.awaiting-input .crt,
  body.awaiting-input-deep .presence,body.awaiting-input-deep .crt,
  body.awaiting-input-very-deep .presence,body.awaiting-input-very-deep .crt{transition-duration:.25s!important}
}


/* v0.9 Matrix Rain — narrative code field, not a permanent screensaver. */
body[data-rain="ambient"] #rainField{opacity:.72}
body[data-rain="search"] #rainField{opacity:.82}
body.matrix-breach #rainField{z-index:4;opacity:.96}
body.matrix-storm #rainField,body.matrix-collapse #rainField{z-index:6;opacity:1}
body.matrix-breach .presence{opacity:.22;transition:opacity .8s ease}
body.matrix-breach .terminal__output{filter:contrast(1.025);transition:filter .5s ease,opacity .5s ease}
body.terminal-shedding .terminal__line{animation:terminalShedding .72s steps(2,end) 1}
body.matrix-storm .terminal{opacity:.48;filter:blur(.22px);transition:opacity .55s ease,filter .55s ease}
body.matrix-storm .presence{opacity:.12;transition:opacity .6s ease}
body.matrix-collapse .terminal{opacity:.12;filter:blur(.48px);transition:opacity .5s ease,filter .5s ease}
body.matrix-collapse .presence{opacity:.04;transition:opacity .5s ease}
@keyframes terminalShedding{
  0%{transform:translateX(0);text-shadow:0 0 10px rgba(110,185,124,.025)}
  18%{transform:translateX(.55px);text-shadow:-1px 0 rgba(72,214,100,.10),1px 0 rgba(205,255,216,.05)}
  41%{transform:translateX(-.7px);opacity:.88}
  63%{transform:translateX(.3px);opacity:.73}
  100%{transform:translateX(0);opacity:1}
}
body.blackout #rainField{opacity:0!important;transition:opacity .55s ease}
body.final-residue #rainField{opacity:0!important;transition:opacity 5s ease}
@media(max-width:700px){
  body.matrix-storm .terminal{opacity:.40}
  body.matrix-collapse .terminal{opacity:.08}
}
@media(prefers-reduced-motion:reduce){
  body.terminal-shedding .terminal__line{animation:none!important}
  body.matrix-storm .terminal,body.matrix-collapse .terminal,body.matrix-breach .terminal__output{transition-duration:.2s!important}
}

/* v0.10 Mobile / Touch / Haptics ----------------------------------------- */
:root{
  --app-height:100dvh;
  --vv-height:100dvh;
  --vv-width:100vw;
  --vv-top:0px;
  --vv-left:0px;
  --touch-reveal-offset:38px;
}
#experience{height:var(--app-height,100dvh);min-height:0}
.tactile-flash{
  position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 52%,rgba(112,190,128,.08),rgba(53,116,66,.018) 22%,transparent 48%);
  transform:scale(1);will-change:opacity,transform;
}
@keyframes tactileWhisper{
  0%{opacity:0;transform:scale(1)}
  26%{opacity:.32;transform:scale(1.002)}
  100%{opacity:0;transform:scale(1.006)}
}
@keyframes tactileCapture{
  0%{opacity:0;transform:scale(1)}
  20%{opacity:.42;transform:scale(1.003)}
  52%{opacity:.08;transform:scale(.999)}
  72%{opacity:.29;transform:scale(1.002)}
  100%{opacity:0;transform:scale(1.007)}
}
#experience.tactile-fragment .tactile-flash,
#experience.tactile-escape .tactile-flash{animation:tactileWhisper .20s ease-out 1}
#experience.tactile-capture .tactile-flash,
#experience.tactile-breach .tactile-flash{animation:tactileCapture .23s ease-out 1}

/* Respect notches and rounded display cut-outs without moving the cinematic field. */
.touch-device .terminal{
  left:max(16px,calc(env(safe-area-inset-left) + 14px));
  top:max(24px,calc(env(safe-area-inset-top) + 18px));
  width:calc(100vw - max(16px,calc(env(safe-area-inset-left) + 14px)) - max(16px,calc(env(safe-area-inset-right) + 14px)));
  height:calc(var(--app-height) - max(24px,calc(env(safe-area-inset-top) + 18px)) - max(68px,calc(env(safe-area-inset-bottom) + 42px)));
  overscroll-behavior:none;
}
.touch-device .gate{
  min-width:128px;min-height:64px;
  padding:22px 30px;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.touch-device #field{-webkit-tap-highlight-color:transparent}
.touch-device .typed-line{min-height:2.05em;padding:.12em 0 .24em}
.touch-device .typed-line__caret{width:.68em;height:1.10em}
.touch-device body.terminal-input-active .typed-line{cursor:text}

/* The virtual keyboard gets its own layout rather than letting the browser hide the prompt. */
body.virtual-keyboard-open .terminal{
  top:calc(var(--vv-top) + max(10px,env(safe-area-inset-top)));
  height:calc(var(--vv-height) - max(20px,env(safe-area-inset-top)) - 12px);
  mask-image:none;
}
body.virtual-keyboard-open .terminal__output{padding-bottom:20px}
body.virtual-keyboard-open .presence{opacity:.12}
body.virtual-keyboard-open .crt{opacity:.58}

/* Portrait: slightly larger discovery language and stable reading column. */
.touch-device.orientation-portrait .terminal{font-size:clamp(15px,4vw,18px);line-height:1.68;letter-spacing:.035em}
/* Landscape phones need vertical efficiency while preserving safe-area gutters. */
.touch-device.orientation-landscape .terminal{
  top:max(12px,calc(env(safe-area-inset-top) + 8px));
  height:calc(var(--app-height) - max(20px,calc(env(safe-area-inset-top) + 10px)) - max(28px,calc(env(safe-area-inset-bottom) + 14px)));
  font-size:clamp(13px,2.2vw,16px);line-height:1.52;
}
.touch-device.orientation-landscape .terminal__output{padding-top:8px;padding-bottom:24px}
.touch-device.orientation-landscape .gate{top:50%;min-height:54px}
.compact-mobile .terminal{letter-spacing:.025em}
.compact-mobile .crt{background:radial-gradient(circle at center,transparent 30%,rgba(0,0,0,.22) 68%,rgba(0,0,0,.88) 100%),repeating-linear-gradient(to bottom,rgba(255,255,255,.004) 0,rgba(255,255,255,.004) 1px,transparent 1px,transparent 4px)}

/* Native haptic unavailable: tiny phosphor response only. Essential information never depends on it. */
html[data-haptics="visual"] .tactile-flash{display:block}
html[data-haptics="native"] .tactile-flash,
html[data-haptics="none"] .tactile-flash{display:none}

@media(prefers-reduced-motion:reduce){
  .tactile-flash{display:none!important}
  .touch-device .terminal{scroll-behavior:auto}
}

/* v0.11 Cinematic Integration -------------------------------------------
   One visual grammar across rabbit capture, rain breach, hard cut and knock.
   No shake: intensity comes from depth, contrast and the sudden removal of motion. */
.cinematic-veil{
  position:absolute;inset:-8%;z-index:7;pointer-events:none;opacity:0;
  background:
    radial-gradient(ellipse at 50% 48%,transparent 18%,rgba(0,0,0,.12) 42%,rgba(0,0,0,.78) 86%),
    radial-gradient(circle at 50% 50%,rgba(100,220,124,.022),transparent 36%);
  transform:scale(1.025);
  transition:opacity .7s ease,transform 1.05s cubic-bezier(.2,.65,.2,1),filter .6s ease;
  will-change:opacity,transform,filter;
}
body.cinematic-capture .cinematic-veil{opacity:.34;transform:scale(1.012)}
body.cinematic-breach .cinematic-veil{opacity:.20;transform:scale(1.004)}
body.cinematic-peak .cinematic-veil{opacity:.05;transform:scale(1)}
body.cinematic-collapse .cinematic-veil{opacity:.72;transform:scale(1.018);filter:contrast(1.08)}
body.cinematic-cut .cinematic-veil{opacity:1;transform:scale(1.025);transition-duration:.22s}
body.cinematic-void .cinematic-veil{opacity:.96;transform:scale(1.03)}
body.cinematic-recovery .cinematic-veil{opacity:.28;transition:opacity 1.05s ease}

body.cinematic-capture #field{filter:brightness(1.08) contrast(1.04);transition:filter .22s ease}
body.cinematic-breach #rainField{filter:contrast(1.05) saturate(1.03);transition:filter .45s ease}
body.cinematic-peak #rainField{filter:contrast(1.12) saturate(1.10) brightness(1.06);transition:filter .55s ease}
body.cinematic-collapse #rainField{filter:contrast(1.22) saturate(.82) brightness(1.12) blur(.16px);transition:filter .28s ease,opacity .28s ease}
body.cinematic-cut #rainField{opacity:0!important;transition:opacity .18s linear!important}

/* The terminal gives way to code rather than simply being hidden by it. */
body.cinematic-breach .terminal{transform:translateZ(0) scale(.999);transition:transform .7s ease,opacity .7s ease,filter .7s ease}
body.cinematic-peak .terminal{transform:scale(.996);opacity:.36;filter:blur(.25px) contrast(.96)}
body.cinematic-collapse .terminal{transform:scale(.992);opacity:.05;filter:blur(.7px) contrast(.82)}
body.cinematic-cut .terminal{opacity:0!important;filter:blur(1.2px)!important;transition:opacity .2s linear,filter .2s linear!important}

/* The CRT becomes less visible during overload, then briefly blooms on recovery. */
body.cinematic-peak .crt{opacity:.50;transition:opacity .55s ease}
body.cinematic-collapse .crt{opacity:.27;transition:opacity .28s ease}
body.cinematic-cut .crt,body.cinematic-void .crt{opacity:.08;transition:opacity .22s ease}
body.cinematic-recovery .crt{animation:cinematicRecovery 1.05s ease-out 1}
@keyframes cinematicRecovery{
  0%{opacity:.08;filter:brightness(.72)}
  24%{opacity:.66;filter:brightness(1.08)}
  52%{opacity:.54;filter:brightness(.95)}
  100%{opacity:.72;filter:none}
}

/* Smartphone: preserve the same dramatic hierarchy with less GPU-heavy filtering. */
.touch-device body.cinematic-peak #rainField{filter:contrast(1.08) brightness(1.04)}
.touch-device body.cinematic-collapse #rainField{filter:contrast(1.13) brightness(1.08)}
.touch-device body.cinematic-collapse .terminal{filter:blur(.35px)}

@media(prefers-reduced-motion:reduce){
  .cinematic-veil,body.cinematic-breach .terminal,body.cinematic-peak #rainField,
  body.cinematic-collapse #rainField,body.cinematic-cut #rainField{transition-duration:.16s!important}
  body.cinematic-recovery .crt{animation:none!important}
  body.cinematic-peak .terminal,body.cinematic-collapse .terminal{transform:none!important}
}


/* v0.12 Compatibility / Reliability ------------------------------------- */
html{color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior:none;background:#000}
body{-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
#experience{height:100vh;height:100svh;height:var(--app-height,100dvh);touch-action:manipulation}
#rainField,#field{contain:strict}
.terminal{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 3%,#000 100%)}
html[data-quality="low"] .presence{animation:none;opacity:.20}
html[data-quality="low"] .crt{background:radial-gradient(circle at center,transparent 38%,rgba(0,0,0,.32) 72%,rgba(0,0,0,.92) 100%);}
html[data-canvas="fallback"] #rainField,html[data-canvas="fallback"] #field{display:none}
html[data-runtime="degraded"] .crt{opacity:.60}
@media(max-width:700px){
  .terminal{
    left:max(18px,env(safe-area-inset-left));
    width:calc(100vw - max(18px,env(safe-area-inset-left)) - max(18px,env(safe-area-inset-right)));
    top:max(5.5vh,env(safe-area-inset-top));
    padding-bottom:max(0px,env(safe-area-inset-bottom));
  }
  .gate{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right));}
}
@supports not (height:100dvh){#experience{height:100vh}}
@media(hover:none){.gate:hover{color:#7d847f}.gate:active{color:#bcc5be}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.tactile-flash{display:none}}

.noscript{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;color:#59625c;font-size:13px;letter-spacing:.12em}

.keyboard-sink{font-size:16px!important}
.rabbit-fallback{line-height:1.08;white-space:pre;color:#9eb5a5!important}