:root {
  /* DESIGN typography tokens: IBM Plex Mono* Mono** for command output; Space Grotesk* Grotesk** for large section titles. */
  --void: #020611;
  --navy: #061426;
  --cyan: #00F0FF;
  --blue: #9DDCFF;
  --panel: #1B2A4A;
  --pink: #FF4FA3;
  --lav: #B8A6FF;
  --white: #F5FBFF;
  --font-recursive: "Recursive", "IBM Plex Mono", monospace;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-space: "Space Grotesk", Inter, system-ui, sans-serif;
  --tone: 0;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--void); color: var(--white); overflow-x: hidden; }

body {
  font-family: var(--font-space);
  background:
    radial-gradient(circle at 48% 38%, rgba(0, 240, 255, .18), transparent 34rem),
    radial-gradient(circle at 75% 72%, rgba(184, 166, 255, .12), transparent 30rem),
    linear-gradient(135deg, var(--void), var(--navy) 58%, #030816);
}

.noise, .scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.noise { opacity: .16; background-image: linear-gradient(90deg, transparent 0 8px, rgba(157,220,255,.12) 9px, transparent 10px), linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 41px 17px; mix-blend-mode: screen; animation: noiseShift 1.2s steps(2) infinite; }
.scanlines { opacity: .28; background: repeating-linear-gradient(0deg, transparent 0 6px, rgba(0,240,255,.08) 7px, transparent 8px); }

.depth-field { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.depth-field span { position: absolute; width: 26vw; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: .28; filter: blur(.4px); animation: ribbon 9s linear infinite; }
.depth-field span:nth-child(1){top:14%;left:-20%;animation-delay:-1s}.depth-field span:nth-child(2){top:29%;left:70%;animation-delay:-4s}.depth-field span:nth-child(3){top:53%;left:8%;animation-delay:-7s}.depth-field span:nth-child(4){top:67%;left:48%;animation-delay:-2s}.depth-field span:nth-child(5){top:82%;left:-8%;animation-delay:-5s}.depth-field span:nth-child(6){top:43%;left:88%;animation-delay:-8s}

.cockpit { position: relative; min-height: 100vh; padding: 5.5rem clamp(1rem, 3vw, 3rem) 7rem; isolation: isolate; transition: --tone .7s ease; }
.hud-frame { position: fixed; inset: 1.1rem; border: 1px solid rgba(157,220,255,.22); clip-path: polygon(3rem 0, calc(100% - 3rem) 0, 100% 3rem, 100% calc(100% - 3rem), calc(100% - 3rem) 100%, 3rem 100%, 0 calc(100% - 3rem), 0 3rem); pointer-events: none; z-index: 3; box-shadow: inset 0 0 42px rgba(0,240,255,.08); animation: frameIn .9s cubic-bezier(.2,.8,.2,1) both; }
.corner { position: absolute; width: 70px; height: 70px; border-color: var(--cyan); opacity: .85; }
.corner-tl{left:1.1rem;top:1.1rem;border-left:2px solid;border-top:2px solid}.corner-tr{right:1.1rem;top:1.1rem;border-right:2px solid;border-top:2px solid}.corner-bl{left:1.1rem;bottom:1.1rem;border-left:2px solid;border-bottom:2px solid}.corner-br{right:1.1rem;bottom:1.1rem;border-right:2px solid;border-bottom:2px solid}
.ruler { position: absolute; left: 8rem; right: 8rem; font: 500 .72rem var(--font-mono); color: rgba(245,251,255,.62); letter-spacing: .12em; white-space: nowrap; overflow: hidden; }
.ruler-top{top:1rem}.ruler-bottom{bottom:1rem;color:rgba(184,166,255,.72)}

.state-dock { position: fixed; z-index: 8; top: 2.3rem; right: 3rem; display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; max-width: 42rem; }
.state-chip, .advance { border: 1px solid rgba(157,220,255,.28); color: var(--blue); background: rgba(6,20,38,.58); backdrop-filter: blur(14px); padding: .68rem .9rem; font: 700 .76rem var(--font-space); text-transform: uppercase; letter-spacing: .12em; clip-path: polygon(.75rem 0,100% 0,100% calc(100% - .75rem),calc(100% - .75rem) 100%,0 100%,0 .75rem); cursor: pointer; transition: transform .25s ease, border-color .25s ease, color .25s ease, background .25s ease; }
.state-chip:hover, .state-chip.active { transform: translateY(-2px); border-color: var(--cyan); color: var(--white); background: rgba(0,240,255,.13); }

.pane { position: fixed; z-index: 4; width: min(27rem, 34vw); padding: 1rem; border: 1px solid rgba(157,220,255,.2); background: linear-gradient(135deg, rgba(27,42,74,.58), rgba(6,20,38,.24)); box-shadow: 0 0 38px rgba(0,240,255,.08); backdrop-filter: blur(16px); font-family: var(--font-mono); color: rgba(245,251,255,.8); clip-path: polygon(1.1rem 0,100% 0,100% calc(100% - 1.1rem),calc(100% - 1.1rem) 100%,0 100%,0 1.1rem); }
.pane-left { left: 3rem; top: 17vh; animation: paneLeft .8s both; }
.pane-right { right: 3rem; top: 29vh; animation: paneRight .8s .12s both; }
.pane-title { color: var(--cyan); margin-bottom: .8rem; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.pane p { margin: .5rem 0; font-size: .84rem; }.denied{color:var(--pink)}.soft{color:var(--lav)}.jp{font-family:"Noto Sans JP", sans-serif;color:var(--pink)}

.terminal-core { position: relative; z-index: 5; width: min(54rem, 76vw); margin: 10vh auto 0; min-height: 29rem; display: grid; place-items: center; text-align: left; }
.targeting { position: absolute; inset: 3rem; border: 1px solid rgba(0,240,255,.22); transform: rotate(-2deg); }
.targeting:before, .targeting:after { content: ""; position: absolute; inset: -1rem; border: 1px dashed rgba(184,166,255,.18); transform: rotate(4deg); }
.targeting:after { inset: 2rem; border-color: rgba(255,79,163,.12); transform: rotate(-3deg); }
.wordmark-line { position: relative; width: 100%; }
.wordmark { margin: 0; font-family: var(--font-recursive); font-variation-settings: "MONO" calc(1 - var(--tone)), "CASL" var(--tone), "wght" 820, "slnt" calc(-8 * var(--tone)); font-size: clamp(4rem, 11vw, 10.8rem); line-height: .82; letter-spacing: -.08em; color: var(--white); text-shadow: 0 0 16px rgba(0,240,255,.42), 0 0 56px rgba(157,220,255,.18); filter: drop-shadow(0 0 20px rgba(0,240,255,.24)); }
.cursor { display: inline-block; width: .08em; height: .78em; margin-left: .08em; background: var(--cyan); vertical-align: -.04em; box-shadow: 0 0 24px var(--cyan); animation: blink .9s steps(1) infinite; }
.system-line { width: 100%; margin: .9rem 0 1.3rem; font: 600 clamp(1rem, 2.1vw, 1.7rem) var(--font-mono); color: var(--blue); }
.command-window { width: min(42rem, 100%); margin-right: auto; border: 1px solid rgba(0,240,255,.32); background: rgba(2,6,17,.74); box-shadow: 0 24px 80px rgba(0,0,0,.38), inset 0 0 30px rgba(0,240,255,.06); clip-path: polygon(1rem 0,100% 0,100% calc(100% - 1rem),calc(100% - 1rem) 100%,0 100%,0 1rem); }
.window-chrome { display: flex; align-items: center; gap: .45rem; border-bottom: 1px solid rgba(157,220,255,.2); padding: .7rem .9rem; color: rgba(245,251,255,.58); font: .75rem var(--font-mono); }
.window-chrome span { width: .58rem; height: .58rem; border-radius: 99px; background: var(--panel); border: 1px solid rgba(157,220,255,.35); }.window-chrome b{margin-left:.7rem;font-weight:500}
.terminal-output { padding: 1rem 1.2rem 1.25rem; font: 500 .95rem/1.65 var(--font-mono); }.terminal-output p{margin:.2rem 0}.terminal-output em{color:var(--cyan);font-style:normal}.output-line{color:rgba(245,251,255,.78)}.output-line.secret{color:var(--pink);opacity:.62}

.mood-stage { position: relative; z-index: 6; margin: 7rem 0 0 6vw; min-height: 19rem; width: min(35rem, 80vw); }
.mood-panel { position: absolute; inset: 0 auto auto 0; opacity: 0; transform: translateX(-2rem) skewX(-4deg); transition: opacity .45s ease, transform .45s ease; padding: 1rem 0; }
.mood-panel.active { opacity: 1; transform: translateX(0) skewX(0); }
.mood-index { color: var(--cyan); font: 600 .78rem var(--font-mono); letter-spacing: .18em; }
.mood-panel h2 { margin: .3rem 0; font: 700 clamp(2.6rem, 7vw, 5.7rem)/.86 var(--font-space); letter-spacing: -.06em; color: var(--white); }
.mood-panel p { margin: 0; color: rgba(245,251,255,.72); font-size: clamp(1rem, 2vw, 1.35rem); }

.flip-zone { position: relative; z-index: 7; display: flex; gap: 1rem; align-items: stretch; justify-content: flex-end; margin: -7rem 4vw 0 auto; width: min(48rem, 88vw); perspective: 1200px; }
.flip-card { width: 15rem; min-height: 12rem; cursor: pointer; perspective: 1000px; }
.flip-inner { position: relative; width: 100%; height: 100%; min-height: 12rem; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.75,.15,1.2), filter .25s ease; }
.flip-card:hover .flip-inner, .flip-card.flipped .flip-inner { transform: rotateY(180deg); filter: drop-shadow(0 0 22px rgba(255,79,163,.34)); }
.flip-face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; backface-visibility: hidden; padding: 1rem; border: 1px solid rgba(157,220,255,.26); background: linear-gradient(145deg, rgba(27,42,74,.72), rgba(2,6,17,.78)); clip-path: polygon(1rem 0,100% 0,100% calc(100% - 1rem),calc(100% - 1rem) 100%,0 100%,0 1rem); font-family: var(--font-recursive); font-variation-settings: "MONO" 1, "wght" 720; }
.flip-face span { color: var(--cyan); font: 700 .72rem var(--font-mono); letter-spacing: .16em; }.flip-face b{font-size:1.22rem;line-height:1.08}.flip-face small{color:rgba(245,251,255,.62);font-family:var(--font-mono)}
.flip-back { transform: rotateY(180deg); border-color: rgba(255,79,163,.5); background: linear-gradient(145deg, rgba(255,79,163,.22), rgba(27,42,74,.82)); box-shadow: inset 0 0 34px rgba(255,79,163,.12); }.flip-back span{color:var(--pink)}.flip-back b{color:var(--white)}

.diff-stream { position: fixed; z-index: 2; right: 12vw; bottom: 10vh; width: 24rem; transform: rotate(-8deg); opacity: .28; font: 600 .9rem var(--font-mono); color: var(--blue); }
.diff-stream p { margin: .4rem 0; animation: diffFloat 5s ease-in-out infinite; }.diff-stream p:nth-child(even){color:var(--pink);animation-delay:-2s}
.advance { position: fixed; z-index: 9; right: 3rem; bottom: 2.5rem; color: var(--white); border-color: rgba(255,79,163,.36); }

.cockpit[data-state="refusal"] { --tone: .22; }.cockpit[data-state="refusal"] .pane { animation: jitter .22s steps(2) infinite; }.cockpit[data-state="refusal"] .system-line:after{content:" // rejected, obviously";color:var(--pink)}
.cockpit[data-state="patch"] { --tone: .68; }.cockpit[data-state="patch"] .hidden-pane, .cockpit[data-state="patch"] .output-line.secret { color: var(--pink); opacity: 1; }.cockpit[data-state="patch"] .targeting{border-color:rgba(255,79,163,.35)}
.cockpit[data-state="deploy"] { --tone: 1; }.cockpit[data-state="deploy"] { background: radial-gradient(circle at 45% 42%, rgba(184,166,255,.24), transparent 34rem); }.cockpit[data-state="deploy"] .wordmark{text-shadow:0 0 18px rgba(184,166,255,.5),0 0 72px rgba(0,240,255,.12)}.cockpit[data-state="deploy"] .cursor{background:var(--lav);box-shadow:0 0 24px var(--lav)}

@keyframes blink { 50% { opacity: 0; } }
@keyframes noiseShift { 50% { transform: translate(8px, -5px); } }
@keyframes ribbon { from { transform: translateX(-30vw) skewX(-18deg); } to { transform: translateX(45vw) skewX(-18deg); } }
@keyframes frameIn { from { transform: scale(1.04); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes paneLeft { from { transform: translateX(-3rem); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes paneRight { from { transform: translateX(3rem); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes jitter { 0%,100% { transform: translate(0,0); } 50% { transform: translate(2px,-1px); } }
@keyframes diffFloat { 50% { transform: translateY(-12px); opacity: .8; } }

@media (max-width: 900px) {
  .cockpit { padding-top: 7rem; }
  .state-dock { left: 1.5rem; right: 1.5rem; top: 1.7rem; justify-content: flex-start; }
  .pane { position: relative; width: auto; left: auto; right: auto; top: auto; margin: 1rem 0; }
  .terminal-core { width: 100%; margin-top: 2rem; }
  .mood-stage { margin-left: 0; }
  .flip-zone { flex-direction: column; margin: 2rem 0 0; width: 100%; }
  .flip-card { width: 100%; }
  .ruler { display: none; }
}