:root {
  color-scheme: light;
  --bone: #d9cfba;
  --parchment: #e6dcc6;
  --carbon: #282623;
  --deep-carbon: #171614;
  --blush: #c58782;
  --violet: #62536f;
  --blue: #586c91;
  --ochre: #ac8128;

  --frame-a-width: 12.5vw;
  --frame-a-x: 50%;
  --frame-a-y: 42%;
  --frame-a-roll: 0deg;
  --frame-a-shake-x: 0px;
  --frame-a-shake-y: 0px;
  --frame-a-opacity: 1;
  --frame-b-width: 12.5vw;
  --frame-b-x: 50%;
  --frame-b-y: 42%;
  --frame-b-roll: 0deg;
  --frame-b-shake-x: 0px;
  --frame-b-shake-y: 0px;
  --frame-b-opacity: 0;

  --pilot-x: 50%;
  --pilot-y: 86%;
  --pilot-scale: 0.72;
  --pilot-opacity: 1;
  --capture-opacity: 0;
  background: var(--deep-carbon);
}

* {
  box-sizing: border-box;
  cursor: auto !important;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--deep-carbon);
}

#world {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-width: 1px;
  min-height: 1px;
  overflow: hidden;
  isolation: isolate;
  outline: 0;
  background: var(--bone);
  touch-action: none;
}

#world::before,
#world::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#world::before {
  z-index: 7;
  opacity: 0.22;
  background:
    linear-gradient(90deg, rgba(23, 22, 20, 0.18), transparent 8%, transparent 92%, rgba(23, 22, 20, 0.18)),
    linear-gradient(0deg, rgba(23, 22, 20, 0.13), transparent 11%, transparent 89%, rgba(23, 22, 20, 0.09));
  mix-blend-mode: multiply;
}

#world::after {
  z-index: 6;
  opacity: 0.2;
  background:
    radial-gradient(circle at 48% 42%, rgba(230, 220, 198, 0) 0 26%, rgba(98, 83, 111, 0.035) 71%, rgba(23, 22, 20, 0.1) 100%),
    linear-gradient(118deg, rgba(197, 135, 130, 0.055), transparent 33%, rgba(172, 129, 40, 0.045));
  mix-blend-mode: multiply;
}

#world-behind,
#world-front,
#terminal-capture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  pointer-events: none;
}

#world-behind {
  z-index: 0;
  background: var(--bone);
}

#terminal-capture {
  z-index: 4;
  opacity: clamp(0, var(--capture-opacity), 1);
  background: transparent;
  will-change: opacity;
}

#world-front {
  z-index: 5;
  background: transparent;
}

.tear-rig {
  position: absolute;
  left: 50%;
  aspect-ratio: 3 / 2;
  transform-origin: 50% 50%;
  pointer-events: none;
  will-change: width, top, opacity, transform;
}

#tear-rig-a {
  left: var(--frame-a-x);
  top: var(--frame-a-y);
  width: min(var(--frame-a-width), 105vh);
  opacity: var(--frame-a-opacity);
  transform:
    translate(-50%, -50%)
    translate(var(--frame-a-shake-x), var(--frame-a-shake-y))
    rotate(var(--frame-a-roll));
}

#tear-rig-b {
  left: var(--frame-b-x);
  top: var(--frame-b-y);
  width: min(var(--frame-b-width), 105vh);
  opacity: var(--frame-b-opacity);
  transform:
    translate(-50%, -50%)
    translate(var(--frame-b-shake-x), var(--frame-b-shake-y))
    rotate(var(--frame-b-roll));
}

#world[data-active-slot="a"] #tear-rig-a,
#world[data-active-slot="b"] #tear-rig-b {
  z-index: 3;
}

#world[data-active-slot="a"] #tear-rig-b,
#world[data-active-slot="b"] #tear-rig-a {
  z-index: 2;
}

.frame-shell {
  position: absolute;
  z-index: 2;
  inset: -6.5%;
  pointer-events: none;
  border: clamp(2px, 0.3vw, 6px) solid var(--carbon);
  box-shadow:
    0 0 0 clamp(1px, 0.11vw, 2px) var(--parchment),
    0 0 0 clamp(3px, 0.5vw, 9px) rgba(98, 83, 111, 0.78),
    0 0 0 clamp(4px, 0.68vw, 12px) rgba(40, 38, 35, 0.7),
    inset 0 0 0 1px rgba(230, 220, 198, 0.72);
}

.frame-shell::before {
  content: "";
  position: absolute;
  pointer-events: none;
}

.frame-shell::before {
  left: -3%;
  right: 9%;
  bottom: -8%;
  height: clamp(1px, 0.22vw, 4px);
  background: var(--blush);
  transform: rotate(-0.35deg);
  opacity: 0.72;
}

.kernel-frame {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: var(--parchment);
  pointer-events: none;
}

#world[data-kernel-authority="active"][data-active-slot="a"] #kernel-frame-a,
#world[data-kernel-authority="active"][data-active-slot="b"] #kernel-frame-b {
  pointer-events: auto;
}

#pilot-mark {
  position: absolute;
  z-index: 8;
  left: var(--pilot-x);
  top: var(--pilot-y);
  width: clamp(24px, 2.9vw, 48px);
  aspect-ratio: 1.7 / 1;
  opacity: var(--pilot-opacity);
  transform: translate(-50%, -50%) scale(var(--pilot-scale));
  transform-origin: 50% 65%;
  filter: drop-shadow(0 0.25rem 0.24rem rgba(23, 22, 20, 0.22));
  pointer-events: none;
  will-change: left, top, opacity, transform;
}

.pilot-fold {
  position: absolute;
  display: block;
  pointer-events: none;
}

.pilot-fold--carbon {
  inset: 9% 3% 0 0;
  background: var(--carbon);
  clip-path: polygon(5% 82%, 31% 13%, 62% 30%, 96% 72%, 72% 89%, 42% 69%);
}

.pilot-fold--blush {
  inset: 17% 24% 19% 24%;
  background: var(--blush);
  clip-path: polygon(0 78%, 44% 0, 100% 63%, 62% 100%);
  opacity: 0.94;
}

.pilot-fold--crease {
  left: 51%;
  top: 12%;
  width: 8%;
  height: 70%;
  background: var(--violet);
  transform: rotate(-23deg);
  transform-origin: 50% 100%;
  opacity: 0.84;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-aspect-ratio: 4 / 5) {
  :root {
    --pilot-y: 89%;
  }

  .frame-shell {
    inset: -5.5%;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* The carrier keeps causal continuity; the runtime suppresses incidental shake. */
}

/* The event is sampled into the dimensional body. Its ordinary iframe remains
   a transparent input surface at the same arrival rectangle. */
#world[data-renderer="fourfold"] .tear-rig,
#world[data-renderer="fourfold"] #terminal-capture { opacity: 0 !important; }
#world[data-renderer="fourfold"]::before,
#world[data-renderer="fourfold"]::after { display: none; }
#entry-cue { position:absolute; left:5%; bottom:4%; max-width:75%; z-index:9;
 color:#302b35; font:12px/1.7 Georgia,serif; letter-spacing:.035em; pointer-events:none; opacity:.8; }

/* Native held-pressure input follows the whole receiving field. */
#world[data-renderer="fourfold"] .tear-rig { left:0 !important; top:0 !important; width:100% !important; height:100% !important; transform:none !important; aspect-ratio:auto; }

/* Language enters at the pace of the encounter, with a readily available way in. */
#entry-cue { opacity:0; white-space:pre-line; pointer-events:none; max-width:min(75%, 510px); font-size:13px; line-height:1.8; color:#302a30; }
#encounter-options { position:absolute; right:4%; bottom:4%; display:flex; gap:18px; z-index:20; }
#encounter-options :is(button,a) { appearance:none; border:0; background:transparent; color:#50474b; padding:9px 2px; font:12px Georgia,serif; cursor:pointer !important; }
#encounter-options :is(button,a):focus-visible { outline:1px solid #50474b; outline-offset:4px; }
@media(max-width:600px) { #entry-cue { bottom:12%; max-width:87%; } #encounter-options {left:5%;right:auto;gap:24px;} }

#fiber-cursor { position:fixed; left:0; top:0; width:96px; height:96px; z-index:2147483647; pointer-events:none; opacity:0; }

#encounter-options a { text-decoration:none; display:inline-block; }