/* ============ TRISMEGISTUS — MERCURY BODY ============ */
:root{
  --acc: 120,170,255;
  --steel-hi: rgba(255,255,255,.16);
  --steel-lo: rgba(255,255,255,.05);
  font-size: clamp(14px, 1.05vw + 8px, 17px);
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; overflow:hidden; }
body{
  background:#000; color:#dfe4ea;
  font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  user-select:none;
}
#mercury{ position:fixed; inset:0; width:100%; height:100%; display:block; }
#bodyfallback{
  position:fixed; inset:0; width:100%; height:100%; object-fit:cover;
  display:none; filter:brightness(.55) saturate(.9);
  animation: bfpulse 6s ease-in-out infinite;
}
@keyframes bfpulse{ 0%,100%{ filter:brightness(.45); } 50%{ filter:brightness(.62); } }
body.no-gl #bodyfallback{ display:block; }
#envclip{ position:fixed; width:2px; height:2px; opacity:0; pointer-events:none; left:-10px; top:-10px; }

#veil{
  position:fixed; inset:0; pointer-events:none; opacity:0;
  background: radial-gradient(ellipse at 50% 46%, rgba(0,0,0,.25) 0%, rgba(0,0,0,.78) 74%);
  transition: opacity .9s ease;
}
body.topology #veil{ opacity:1; }

/* ---------- shared veiling ---------- */
.veiled{ opacity:0; pointer-events:none; transition: opacity 1.1s ease, transform 1.1s ease; }
.present{ opacity:1; pointer-events:auto; transform:none; }

/* ---------- crown ---------- */
#crown{ position:fixed; top:max(2.4vh, env(safe-area-inset-top)); left:0; right:0; text-align:center; z-index:6; transform:translateY(-8px); }
.crown-jai{ font-size:.68rem; letter-spacing:.55em; color:#9aa3ad; margin-bottom:.45rem; }
#crown-title{
  font-family: Didot, "Bodoni MT", "Playfair Display", Georgia, serif;
  font-size:1.28rem; letter-spacing:.34em; font-weight:600;
  background: linear-gradient(178deg,#fdfdff 8%, #b9c2cc 34%, #5d666f 50%, #e8edf2 62%, #8b939c 88%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.9));
}
#crown-sub{ margin-top:.4rem; font-size:.58rem; letter-spacing:.52em; color:#8d959f; }

/* ---------- lifecycle filament ---------- */
#lifecycle{
  position:fixed; top:max(11vh, calc(env(safe-area-inset-top) + 9vh)); left:50%; translate:-50% 0;
  display:flex; align-items:center; gap:.55rem; z-index:6;
  font-size:.55rem; letter-spacing:.28em; color:#5c646d; white-space:nowrap;
}
#lifecycle b{ font-weight:500; transition: color .5s, text-shadow .5s; }
#lifecycle i{ width:2.2rem; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); }
#lifecycle b.lit{ color:#e9eef4; text-shadow:0 0 12px rgba(var(--acc),.9); }
#lifecycle b.done{ color:#98a2ac; }

/* ---------- core ---------- */
#core{ position:fixed; left:50%; top:46%; translate:-50% -50%; width:0; height:0; z-index:5; cursor:pointer; }
#core-dot,#core-ring,#core-ring2{ position:absolute; left:50%; top:50%; translate:-50% -50%; border-radius:50%; pointer-events:none; }
#core-dot{ width:7px; height:7px; background:#eaf2ff; box-shadow:0 0 18px 6px rgba(var(--acc),.85), 0 0 60px 24px rgba(var(--acc),.30); }
#core-ring{ width:74px; height:74px; border:1px solid rgba(var(--acc),.55); opacity:.0; }
#core-ring2{ width:74px; height:74px; border:1px solid rgba(var(--acc),.30); opacity:0; }
body.listening #core-ring{ opacity:1; animation: pulse 2.1s ease-out infinite; }
body.listening #core-ring2{ opacity:1; animation: pulse 2.1s ease-out infinite 1.05s; }
@keyframes pulse{ 0%{ scale:.55; opacity:.85; } 100%{ scale:2.1; opacity:0; } }

/* ---------- invite / caption ---------- */
#invite{
  position:fixed; left:0; right:0; top:57%; text-align:center; z-index:6;
  font-family:Didot, Georgia, serif; font-size:1.12rem; letter-spacing:.18em; color:#cfd6de;
  text-shadow:0 2px 14px rgba(0,0,0,.9);
}
#caption{
  position:fixed; left:50%; bottom:16vh; translate:-50% 0; z-index:6; max-width:min(72ch, 86vw);
  text-align:center; font-size:.86rem; line-height:1.65; letter-spacing:.04em; color:#c4ccd5;
  text-shadow:0 2px 10px rgba(0,0,0,.95); opacity:0; transition:opacity .6s;
}
#caption.present{ opacity:1; }
#caption .who{ display:block; font-size:.56rem; letter-spacing:.44em; color:#7f8892; margin-bottom:.5rem; }

/* ---------- intent bar ---------- */
#intentbar{
  position:fixed; left:50%; bottom:max(4.5vh, env(safe-area-inset-bottom)); translate:-50% 0; z-index:8;
  display:flex; align-items:center; gap:.6rem; width:min(30rem, 86vw);
  padding:.55rem .9rem; border-radius:999px; transform:translateY(10px);
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,0) 40%), linear-gradient(#0a0c0f,#12151a);
  border:1px solid var(--steel-hi);
  box-shadow: 0 0 0 1px rgba(0,0,0,.85), 0 18px 60px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -10px 26px rgba(0,0,0,.5);
}
#intentbar.present{ transform:translateY(0); }
.ib-sigil{ color:rgba(var(--acc),.9); font-size:.8rem; }
#intentinput{
  flex:1; background:none; border:none; outline:none; color:#e8edf3;
  font-size:.9rem; letter-spacing:.05em; font-family:inherit;
}
#intentinput::placeholder{ color:#5f6871; letter-spacing:.1em; }

/* ---------- identity / hint ---------- */
#identity{
  position:fixed; left:50%; bottom:max(1.4vh, env(safe-area-inset-bottom)); translate:-50% 0; z-index:6;
  font-size:.52rem; letter-spacing:.3em; color:#6d7680; white-space:nowrap;
}
#hint{
  position:fixed; left:50%; bottom:7vh; translate:-50% 0; z-index:6;
  font-size:.6rem; letter-spacing:.5em; color:#6a737d; animation:hintfade 3.2s ease-in-out infinite;
}
@keyframes hintfade{ 0%,100%{opacity:.25} 50%{opacity:.85} }
body.awake #hint{ display:none; }

/* ============ TOPOLOGIES (instruments grown from the material) ============ */
#stage{ position:fixed; inset:0; z-index:7; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.topology{
  pointer-events:auto; position:relative;
  width:min(46rem, 92vw); max-height:82vh; overflow:hidden auto;
  border-radius:26px; padding:1.3rem 1.4rem 1.5rem;
  background:
    radial-gradient(140% 90% at 50% -30%, rgba(var(--acc),.12), transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,0) 34%),
    linear-gradient(200deg, rgba(255,255,255,.05), rgba(255,255,255,0) 30%),
    linear-gradient(#0a0c10 0%, #101419 55%, #0a0d11 100%);
  border:1px solid var(--steel-hi);
  box-shadow: 0 0 0 1px rgba(0,0,0,.9), 0 40px 120px rgba(0,0,0,.8), 0 0 90px rgba(var(--acc),.13),
    inset 0 1px 0 rgba(255,255,255,.28), inset 0 -20px 60px rgba(0,0,0,.55);
  clip-path: circle(0% at 50% 50%);
  animation: emerge 1s cubic-bezier(.22,.9,.24,1) forwards;
  scrollbar-width:thin; scrollbar-color:#333a42 transparent;
}
@keyframes emerge{ 0%{ clip-path:circle(0% at 50% 50%); filter:brightness(2.4) saturate(.4);} 55%{ filter:brightness(1.25);} 100%{ clip-path:circle(75% at 50% 50%); filter:none;} }
.topology.dissolving{ animation: dissolve .7s cubic-bezier(.6,0,.8,.4) forwards; }
@keyframes dissolve{ to{ clip-path:circle(0% at 50% 50%); filter:brightness(2.2); opacity:.0; } }

.t-head{ display:flex; align-items:baseline; gap:.9rem; margin-bottom:1rem; }
.t-machine{ font-size:.56rem; letter-spacing:.4em; color:rgba(var(--acc),.95); }
.t-title{
  font-family:Didot, Georgia, serif; font-size:1.25rem; letter-spacing:.24em; font-weight:600;
  background:linear-gradient(178deg,#ffffff 10%, #aeb7c1 45%, #626b74 55%, #dbe2e9 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.t-sub{ margin-left:auto; font-size:.56rem; letter-spacing:.3em; color:#79828c; text-align:right; }
.t-continuity{ font-size:.6rem; letter-spacing:.22em; color:#828b95; margin:-0.6rem 0 1rem; }
.t-continuity em{ color:rgba(var(--acc),.95); font-style:normal; }

.t-close{
  position:absolute; top:.9rem; right:1rem; width:1.9rem; height:1.9rem; border-radius:50%;
  border:1px solid var(--steel-hi); background:linear-gradient(#181c22,#0b0e12); color:#9aa4ae;
  font-size:.8rem; cursor:pointer; line-height:1;
}
.t-close:hover{ color:#fff; box-shadow:0 0 14px rgba(var(--acc),.4); }

/* machined controls */
.chip{
  display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .95rem; border-radius:12px;
  border:1px solid var(--steel-hi); color:#cfd7df; font-size:.68rem; letter-spacing:.2em; cursor:pointer;
  background:linear-gradient(170deg, rgba(255,255,255,.10), rgba(255,255,255,0) 45%), linear-gradient(#14181e,#0b0e12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -6px 14px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.5);
  transition: box-shadow .2s, color .2s, transform .05s;
}
.chip:hover{ color:#fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 18px rgba(var(--acc),.35); }
.chip:active{ transform:translateY(1px); }
.chip.on{ color:#fff; border-color:rgba(var(--acc),.7); box-shadow:0 0 20px rgba(var(--acc),.4), inset 0 0 14px rgba(var(--acc),.25); }
.row{ display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; }
.grow{ flex:1; }
.lbl{ font-size:.54rem; letter-spacing:.34em; color:#79828c; margin:.9rem 0 .45rem; }

.field{
  width:100%; padding:.65rem .9rem; border-radius:14px; border:1px solid var(--steel-hi);
  background:linear-gradient(#07090c,#0d1015); color:#e8edf3; outline:none; font-family:inherit;
  font-size:.9rem; letter-spacing:.04em;
}
.field:focus{ border-color:rgba(var(--acc),.6); box-shadow:0 0 16px rgba(var(--acc),.25); }
textarea.field{ min-height:11rem; resize:vertical; line-height:1.7; font-size:.92rem; }

.maat{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem;
  font-size:.56rem; letter-spacing:.3em; padding:.45rem .8rem; border-radius:999px; border:1px solid var(--steel-hi);
}
.maat::before{ content:"⚖"; font-size:.8rem; }
.maat.ok{ color:#9fe3b8; border-color:rgba(110,230,160,.35); box-shadow:0 0 14px rgba(110,230,160,.15); }
.maat.fail{ color:#f0a3a3; border-color:rgba(240,120,120,.4); }
.maat.pending{ color:#c9d2db; }

/* plan topology */
.plan-line{ display:flex; align-items:center; gap:.9rem; padding:.62rem .2rem; border-bottom:1px solid rgba(255,255,255,.06); }
.plan-line:last-child{ border-bottom:none; }
.plan-glyph{ width:2rem; height:2rem; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--steel-hi); background:linear-gradient(#161a20,#0b0e12); font-size:.95rem; }
.plan-name{ font-size:.62rem; letter-spacing:.32em; color:#e6ebf1; width:7.5rem; flex:none; }
.plan-role{ font-size:.72rem; color:#8f99a4; letter-spacing:.06em; }
.plan-state{ margin-left:auto; font-size:.56rem; letter-spacing:.26em; color:#6d7680; flex:none; }
.plan-line.active .plan-glyph{ box-shadow:0 0 16px rgba(var(--acc),.5); border-color:rgba(var(--acc),.6); }
.plan-line.active .plan-state{ color:rgba(var(--acc),1); }
.plan-line.done .plan-state{ color:#9fe3b8; }
.progress{ height:2px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; margin-top:1rem; }
.progress i{ display:block; height:100%; width:0%; background:linear-gradient(90deg, rgba(var(--acc),.4), rgba(var(--acc),1)); transition:width .3s; }

/* hathor */
.keys{ display:flex; height:9.5rem; border-radius:14px; overflow:hidden; border:1px solid var(--steel-hi); position:relative; margin-top:.4rem; }
.key-w{ flex:1; position:relative; cursor:pointer; border-right:1px solid rgba(0,0,0,.75);
  background:linear-gradient(#f7f9fb 0%, #dfe5ea 78%, #aeb6bd 96%); }
.key-w:active,.key-w.down{ background:linear-gradient(#cfd9e2, #9fb4c6); }
.key-b{ position:absolute; top:0; width:8%; height:58%; translate:-50% 0; z-index:2; cursor:pointer; border-radius:0 0 5px 5px;
  background:linear-gradient(#2b3138, #05070a 80%); border:1px solid #000; box-shadow:inset 0 -6px 10px rgba(255,255,255,.08); }
.key-b:active,.key-b.down{ background:linear-gradient(#3b4652,#0a1622); }
.pads{ display:grid; grid-template-columns:repeat(6,1fr); gap:.55rem; margin-top:.4rem; }
.pad{ aspect-ratio:1.35; border-radius:12px; border:1px solid var(--steel-hi); cursor:pointer;
  display:flex; align-items:end; justify-content:center; padding-bottom:.45rem;
  font-size:.52rem; letter-spacing:.24em; color:#9ba5b0;
  background:radial-gradient(120% 120% at 50% -20%, rgba(255,255,255,.10), transparent 50%), linear-gradient(#171b21,#0a0d11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -8px 18px rgba(0,0,0,.55); }
.pad.hit{ box-shadow:0 0 24px rgba(var(--acc),.65), inset 0 0 18px rgba(var(--acc),.4); color:#fff; }
.seq{ display:grid; grid-template-columns:5.2rem repeat(8,1fr); gap:.3rem; margin-top:.4rem; align-items:center; }
.seq .lane{ font-size:.54rem; letter-spacing:.26em; color:#8b959f; }
.cellbtn{ aspect-ratio:1.6; border-radius:7px; border:1px solid rgba(255,255,255,.1); cursor:pointer;
  background:linear-gradient(#12161b,#0a0d11); }
.cellbtn.on{ background:linear-gradient(rgba(var(--acc),.75), rgba(var(--acc),.35)); box-shadow:0 0 10px rgba(var(--acc),.4); }
.cellbtn.tick{ outline:1px solid rgba(255,255,255,.55); }

/* horus */
.view{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--steel-hi); background:#04060a; aspect-ratio:16/9; }
.view video,.view img,.view canvas{ width:100%; height:100%; object-fit:cover; display:block; }
.reticle{ position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.09), rgba(255,255,255,.09)) 50% 0/1px 100% no-repeat,
    linear-gradient(rgba(255,255,255,.09), rgba(255,255,255,.09)) 0 50%/100% 1px no-repeat; }
.reticle::after{ content:""; position:absolute; left:50%; top:50%; width:64px; height:64px; translate:-50% -50%;
  border:1px solid rgba(var(--acc),.8); border-radius:6px; box-shadow:0 0 18px rgba(var(--acc),.35); }
.readout{ display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.5rem; margin-top:.8rem; }
.ro{ border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:.55rem .7rem; background:linear-gradient(#0d1014,#090b0e); }
.ro b{ display:block; font-size:.5rem; letter-spacing:.3em; color:#78828c; font-weight:500; margin-bottom:.3rem; }
.ro span{ font-size:.82rem; color:#e8edf3; letter-spacing:.04em; }
.swatches{ display:flex; gap:.35rem; } .swatches i{ width:1.1rem; height:1.1rem; border-radius:4px; border:1px solid rgba(255,255,255,.2); }

/* wepwawet */
.src{ display:block; padding:.7rem .2rem; border-bottom:1px solid rgba(255,255,255,.06); text-decoration:none; }
.src b{ display:block; color:#e9eef4; font-weight:500; font-size:.92rem; letter-spacing:.03em; }
.src span{ color:#8d97a2; font-size:.78rem; line-height:1.55; }
.src small{ color:rgba(var(--acc),.9); font-size:.6rem; letter-spacing:.14em; }
.src:hover b{ color:rgba(var(--acc),1); }

/* ptah */
.term{ background:#05070a; border:1px solid rgba(255,255,255,.1); border-radius:14px; padding: .9rem 1rem; margin-top:.4rem;
  font-family:"SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size:.78rem; line-height:1.7; color:#b9c4cf;
  max-height:11rem; overflow:auto; white-space:pre-wrap; }
.term .ok{ color:#9fe3b8; } .term .err{ color:#f0a3a3; } .term .dim{ color:#5c6670; }

/* thoth */
.scribe-meta{ display:flex; gap:1rem; font-size:.56rem; letter-spacing:.26em; color:#78828c; margin-top:.55rem; }

/* tae */
.tae-line{ display:flex; gap:.8rem; align-items:baseline; padding:.5rem .1rem; border-bottom:1px solid rgba(255,255,255,.06); }
.tae-when{ flex:none; width:5.4rem; font-size:.56rem; letter-spacing:.2em; color:rgba(var(--acc),.9); }
.tae-what{ font-size:.82rem; color:#cfd7df; }
.tae-mach{ margin-left:auto; font-size:.54rem; letter-spacing:.2em; color:#727c86; flex:none; }

@media (max-width:640px){
  .topology{ width:94vw; padding:1rem .9rem 1.2rem; }
  .plan-name{ width:5.4rem; }
  #lifecycle i{ width:.9rem; }
}