@import url("../css/project-theme-core.css");

:root {
  --project-bg: #07151d;
  --project-bg-alt: #10233a;
  --project-surface: rgba(112, 229, 202, .055);
  --project-surface-strong: #111c2b;
  --project-text: #f2efe7;
  --project-text-muted: rgba(242, 239, 231, .62);
  --project-accent: #70e5ca;
  --project-accent-secondary: #72b7ff;
  --project-warning: #c8ff55;
  --project-error: #ff6b72;
  --project-border: rgba(112, 229, 202, .28);
  --project-radius: 18px;
  --project-shadow: 0 34px 90px rgba(0, 0, 0, .52);
  --project-glow: 0 0 60px rgba(112, 229, 202, .12);
  --project-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --project-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --project-grid: 48px;
  --project-noise: .045;
  --project-transition: 170ms steps(2, end);
}

/* PERSONALITY: language engineering chamber. MOTION: type, tokenize, compress, morph. */

.prompt-world {
  min-height: 100dvh;
  background:
    linear-gradient(rgba(112,229,202,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112,229,202,.045) 1px, transparent 1px),
    radial-gradient(circle at var(--cursor-x,70%) var(--cursor-y,25%), rgba(114,183,255,.15), transparent 24rem),
    var(--project-bg);
  background-size: var(--project-grid) var(--project-grid), var(--project-grid) var(--project-grid), auto, auto;
  color: var(--project-text);
  font-family: var(--project-font);
  overflow-x: hidden;
  position:relative;
  background-color:var(--project-bg);
}
.prompt-world::before { position:fixed; z-index:0; inset:5.5rem 4vw 20vh; content:""; border:1px solid rgba(112,229,202,.14); background:linear-gradient(115deg,rgba(255,255,255,.025),transparent 45%),linear-gradient(180deg,rgba(0,0,0,.16),transparent); box-shadow:inset 0 -8rem 10rem rgba(0,0,0,.36); pointer-events:none; }
.prompt-world::after { position:fixed; z-index:0; right:0; bottom:0; left:0; height:20vh; content:""; border-top:1px solid rgba(112,229,202,.2); background:linear-gradient(176deg,rgba(112,229,202,.11),transparent 28%),linear-gradient(180deg,rgba(255,255,255,.05),transparent 70%); transform:perspective(700px) rotateX(58deg); transform-origin:top; pointer-events:none; }
.prompt-shell { position:relative; z-index:1; width:min(1280px,calc(100% - 48px)); min-height:100dvh; margin:auto; padding:clamp(22px,4vw,56px) 0 8rem; }
.prompt-nav,.prompt-status { display:flex; justify-content:space-between; gap:16px; font:700 .72rem/1.4 var(--project-font-mono); letter-spacing:.09em; text-transform:uppercase; }
.prompt-nav a { color:var(--project-text-muted); }
.prompt-panel { position:relative; margin-top:clamp(42px,8vw,100px); display:grid; grid-template-columns:minmax(0,.86fr) minmax(380px,1.35fr); gap:clamp(24px,5vw,88px); align-items:center; }
.prompt-copy { position:relative; z-index:3; padding-left:clamp(7rem,10vw,10rem); }
.prompt-copy h1 { margin:.2em 0; max-width:780px; font-size:clamp(3.8rem,8vw,8.8rem); line-height:.78; letter-spacing:-.075em; }
.prompt-copy h1 em { color:var(--project-accent); font-style:normal; }
.prompt-copy>p { max-width:630px; color:var(--project-text-muted); font-size:clamp(1rem,1.5vw,1.18rem); line-height:1.65; }
.prompt-machine { position:relative; z-index:4; min-height:28rem; padding:clamp(20px,4vw,38px); border:1px solid var(--project-border); border-radius:var(--project-radius); background:linear-gradient(145deg,rgba(17,28,43,.9),rgba(7,21,29,.76)); box-shadow:var(--project-shadow),var(--project-glow),inset 0 0 70px rgba(112,229,202,.045); }
.project-display::before { position:absolute; z-index:-1; inset:10px; content:""; border:1px solid rgba(112,229,202,.1); border-radius:calc(var(--project-radius) * .7); pointer-events:none; }
.project-display-label { margin:0 0 1.25rem; color:var(--project-accent); font:700 .65rem/1.4 var(--project-font-mono); letter-spacing:.16em; text-transform:uppercase; }
.prompt-machine ol { margin:0 0 28px; padding:0; list-style:none; counter-reset:step; }
.prompt-machine li { padding:15px 0; display:flex; gap:14px; border-bottom:1px solid var(--project-border); color:var(--project-text-muted); font:700 .78rem/1.4 var(--project-font-mono); }
.prompt-machine li::before { counter-increment:step; content:"0" counter(step); color:var(--project-accent); }
.prompt-machine li.is-active { color:var(--project-text); transform:translateX(6px); }
.prompt-machine li.is-complete { color:var(--project-accent); }
.prompt-action,.prompt-door { min-height:50px; padding:0 18px; display:inline-flex; align-items:center; justify-content:space-between; gap:24px; border:1px solid var(--project-accent); border-radius:999px; color:var(--project-bg); background:var(--project-accent); font:800 .75rem/1 var(--project-font-mono); letter-spacing:.07em; cursor:pointer; }
.prompt-door { margin-top:12px; width:100%; color:var(--project-text); background:transparent; }
.prompt-message { min-height:1.4em; margin:18px 0 0; color:var(--project-accent); font:700 .72rem/1.5 var(--project-font-mono); }
.prompt-fragment { color:var(--project-warning); }
.prompt-wordfield { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0; }
.prompt-wordfield span { padding:8px 10px; border:1px solid var(--project-border); border-radius:999px; color:var(--project-text-muted); font:700 .68rem var(--project-font-mono); }
.prompt-wordfield span:nth-child(2n) { color:var(--project-accent); transform:translateY(5px); }
.prompt-final { border-color:var(--project-warning); box-shadow:0 0 90px rgba(200,255,85,.1); }
.prompt-resident { position:fixed; z-index:2; inset:4.5rem auto 5.5rem 0; width:min(31vw,28rem); min-width:17rem; overflow:hidden; pointer-events:none; }
.prompt-resident[hidden] { display:none; }
.prompt-resident canvas { position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(0 18px 35px rgba(0,0,0,.62)); }
.prompt-resident [data-journey-status] { position:absolute; right:16px; bottom:14px; margin:0; padding:9px 12px; border:1px solid var(--project-border); border-radius:999px; background:rgba(7,21,29,.78); color:var(--project-accent); font:700 .62rem/1 var(--project-font-mono); letter-spacing:.1em; backdrop-filter:blur(10px); }
.prompt-resident [data-journey-follow] { position:absolute; right:16px; bottom:54px; min-height:44px; padding:0 16px; border:1px solid var(--project-accent); border-radius:999px; background:var(--project-bg); color:var(--project-accent); cursor:pointer; font:800 .68rem/1 var(--project-font-mono); letter-spacing:.1em; pointer-events:auto; }
.prompt-resident .journey-calibration.resident-stage__threshold { position:fixed!important; z-index:-10!important; left:50%!important; bottom:4rem!important; width:12rem!important; min-width:0!important; border:0!important; background:none!important; box-shadow:none!important; opacity:0!important; visibility:hidden!important; transform:translateX(-50%)!important; pointer-events:none!important; }
.prompt-resident.is-leaving-left canvas { transform:translateX(-72vw); transition:transform 2.3s cubic-bezier(.22,.7,.2,1); }
.prompt-resident.is-concealed canvas { opacity:0; }
@media (max-width:760px) { .prompt-shell{width:min(100% - 24px,620px);padding-bottom:7rem}.prompt-panel{grid-template-columns:1fr;gap:18px;margin-top:30vh}.prompt-copy{padding:0 0 0 7.5rem}.prompt-copy h1{font-size:clamp(3.4rem,18vw,6rem)}.prompt-nav{align-items:flex-start;flex-direction:column}.prompt-machine{padding:20px;min-height:0}.prompt-action,.prompt-door{width:100%;min-height:56px}.prompt-world::before{inset:5rem .75rem 22vh}.prompt-resident{inset:5rem auto auto 0;width:100%;height:26vh;min-width:0}.prompt-resident [data-journey-status]{right:12px;bottom:12px}.prompt-resident [data-journey-follow]{right:12px;bottom:52px} }
@media (prefers-reduced-motion:reduce) { .prompt-machine li{transition:none}.prompt-wordfield span{transform:none} }