/* =====================================================================
   Q CORE — direction artistique (v2 : monde explorable)
   Le Q comme centre d'une machine. Le noyau est lisible et lumineux ;
   plus on s'éloigne, plus l'installation se perd dans l'obscurité.
   Anneaux concentriques, énergie, modules physiques reliés au noyau
   par des conduits — certains actifs, un coupé, un qui se perd dans
   le noir. Fond quasi noir, justifié par la mise en scène "cœur de
   réacteur", mais avec des reliefs gris métalliques et une lumière
   cyan/violette qui sert de fil conducteur dans l'obscurité.
   ===================================================================== */

:root{
  --bg: #0b0c0f;
  --bg-2: #111318;
  --ring-1: #1c1f24;
  --ring-2: #2b2f37;
  --ring-3: #3d424c;
  --metal: #52585f;
  --text: #eef0f3;
  --text-dim: #9aa1ab;
  --text-faint: #565c65;
  --cyan: #7dd3fc;
  --violet: #b39ef9;
  --green: #6ee7b7;
  --white-hot: #f6f9ff;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.15);
  --mono: 'Fira Code', monospace;
  --head: 'Space Grotesk', 'Inter', sans-serif;
  --body: 'Inter', sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  background:
    radial-gradient(circle at 50% 45%, rgba(125,211,252,0.05), transparent 55%),
    var(--bg);
  color:var(--text); font-family:var(--body); min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--head); margin:0; font-weight:600; }
p{ margin:0; }
button{ font-family:inherit; }

.back-link{
  position:fixed; top:16px; left:16px; z-index:500;
  font-family:var(--mono); font-size:11px; color:var(--text-faint); text-decoration:none;
  padding:6px 10px; border:1px solid var(--border); border-radius:20px;
  background:rgba(10,11,13,0.6); backdrop-filter:blur(6px);
}
.back-link:hover{ color:var(--cyan); }

.particles-canvas{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.state{ display:none; } .state.active{ display:block; }
/* le hub (et la gatekeeper) ont besoin de flex pour leur mise en page :
   ces règles ont la même spécificité que .state.active mais arrivent
   après elle dans la feuille de style, donc elles l'emportent. */
.gate.active{ display:flex; }
.hub.active{ display:flex; }
.hidden{ display:none !important; }

/* ===================== GATEKEEPER ===================== */
.gate{
  position:fixed; inset:0; z-index:10; background:#060708; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  text-align:center; transition:opacity .6s ease .15s, transform .8s ease;
}
.gate.leaving{ opacity:0; transform:scale(1.04); pointer-events:none; }

.gate__flash{
  position:absolute; inset:0; z-index:20; pointer-events:none;
  background:radial-gradient(circle at 50% 46%, rgba(230,245,255,0.95), rgba(125,211,252,0.5) 40%, rgba(6,7,8,0) 72%);
  opacity:0; transition:opacity .1s;
}
.gate.flash-on .gate__flash{ opacity:1; transition:opacity .12s ease-out; }
.gate.flash-off .gate__flash{ opacity:0; transition:opacity .6s ease-in; }

.gate__flicker{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:var(--text-faint); opacity:0; box-shadow:0 0 4px rgba(255,255,255,0.4);
}
.gate__flicker.f1{ top:18%; left:22%; } .gate__flicker.f2{ top:74%; left:16%; }
.gate__flicker.f3{ top:28%; left:80%; } .gate__flicker.f4{ top:68%; left:82%; }
.gate__flicker.f5{ top:46%; left:50%; }
.gate.flicker-on .gate__flicker{ animation:flicker 2.6s ease-in-out infinite; }
.gate__flicker.f2{ animation-delay:.3s !important; } .gate__flicker.f3{ animation-delay:.6s !important; }
.gate__flicker.f4{ animation-delay:.15s !important; } .gate__flicker.f5{ animation-delay:.45s !important; }
@keyframes flicker{ 0%,100%{ opacity:0; } 8%{ opacity:.9; } 11%{ opacity:.1; } 15%{ opacity:.7; } 40%{ opacity:0; } }

.gate__kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:0.3em; color:var(--text-faint);
  position:absolute; top:36px; opacity:0; transition:opacity .6s; z-index:2;
}
.gate.kicker-on .gate__kicker{ opacity:1; }

.gate__power{
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
  font-family:var(--mono); font-size:10px; letter-spacing:0.16em; color:var(--text-faint);
  opacity:0; transition:opacity .4s; height:0; overflow:hidden;
}
.gate.power-on .gate__power{ opacity:1; height:auto; }
.gate__power-bar{ width:160px; height:3px; border-radius:2px; background:rgba(255,255,255,0.08); overflow:hidden; }
.gate__power-bar i{ display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--cyan), var(--violet)); transition:width 1.3s cubic-bezier(.2,.7,.2,1); }
.gate.power-fill .gate__power-bar i{ width:100%; }

.gate__terminal{
  font-family:var(--mono); font-size:11.5px; line-height:1.7; color:var(--cyan);
  text-align:left; min-height:0; max-width:340px; margin-bottom:0;
  opacity:0; transition:opacity .4s, margin-bottom .4s, min-height .4s;
}
.gate.terminal-on .gate__terminal{ opacity:1; min-height:96px; margin-bottom:22px; }
.gate.terminal-fade .gate__terminal{ opacity:0.38; }
.gate__terminal p{ margin:0; }
.gate__terminal .term-dim{ color:var(--text-faint); }
.gate__terminal .cursor{ display:inline-block; width:6px; background:var(--cyan); animation:blinkCursor 1s step-end infinite; }
@keyframes blinkCursor{ 50%{ background:transparent; } }

.gate__core{
  position:relative; width:min(40vw, 260px); height:min(40vw, 260px); min-width:160px; min-height:160px;
  display:flex; align-items:center; justify-content:center; margin-bottom:30px; z-index:2;
}
.gate__point{
  position:absolute; width:6px; height:6px; border-radius:50%; background:var(--white-hot);
  box-shadow:0 0 14px 4px rgba(255,255,255,0.6); opacity:0; transition:opacity .5s;
}
.gate.point-on .gate__point{ opacity:1; animation:pointPulse 2.2s ease-in-out infinite; }
@keyframes pointPulse{ 0%,100%{ box-shadow:0 0 10px 3px rgba(255,255,255,0.5); } 50%{ box-shadow:0 0 22px 8px rgba(125,211,252,0.6); } }

.gate__ring{
  position:absolute; border-radius:50%; border:1px solid var(--border-strong);
  opacity:0; transform:scale(0.4);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.gate__ring.r1{ width:36%; height:36%; }
.gate__ring.r2{ width:64%; height:64%; border-color:rgba(125,211,252,0.25); }
.gate__ring.r3{ width:100%; height:100%; border-color:rgba(179,158,249,0.2); }
.gate.rings-on .gate__ring{ opacity:1; transform:scale(1); }
.gate.rings-on .gate__ring.r2{ animation:ringRotate 22s linear infinite; }
.gate.rings-on .gate__ring.r3{ animation:ringRotate 34s linear infinite reverse; }
.gate.engaging .gate__ring{ transform:scale(1.6); opacity:0; transition:opacity .5s ease, transform .6s ease; }
@keyframes ringRotate{ from{ transform:scale(1) rotate(0);} to{ transform:scale(1) rotate(360deg);} }

.gate__logo-wrap{
  position:absolute; width:34%; height:34%; border-radius:50%; overflow:hidden;
  clip-path:circle(0% at 50% 50%); transition:clip-path 1.1s cubic-bezier(.2,.8,.2,1);
  display:flex; align-items:center; justify-content:center;
}
.gate.logo-on .gate__logo-wrap{ clip-path:circle(75% at 50% 50%); }
.gate__logo{
  width:100%; height:100%; object-fit:contain;
  filter:grayscale(1) brightness(0.25) drop-shadow(0 0 0 rgba(125,211,252,0));
  transition:filter 1.7s ease;
}
.gate.logo-lit .gate__logo{ filter:grayscale(0) brightness(1) drop-shadow(0 0 20px rgba(125,211,252,0.4)); }
.gate.engaging .gate__logo{ filter:grayscale(0) brightness(2.2) drop-shadow(0 0 40px rgba(230,245,255,0.9)); transition:filter .4s ease; }

.gate__headline{
  font-size:clamp(24px, 4.6vw, 42px); letter-spacing:0.3em; margin-bottom:10px; z-index:2;
  opacity:0; transition:opacity .3s;
}
.gate.headline-on .gate__headline{ opacity:1; }
.gate__headline .w{ display:inline-block; letter-spacing:0.3em; transition:letter-spacing 1s cubic-bezier(.2,.8,.2,1); }
.gate.headline-collapse .gate__headline .w{ letter-spacing:0.02em; }
.gate__headline .accent{ color:var(--cyan); }

.gate__operator{
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.14em; color:var(--violet);
  margin-bottom:14px; opacity:0; transition:opacity .2s; z-index:2;
}
.gate.operator-on .gate__operator{ animation:glitchIn .5s steps(6) both; opacity:1; }
@keyframes glitchIn{ 0%{ opacity:0; transform:translateX(-4px);} 30%{ opacity:1; transform:translateX(3px);} 45%{ transform:translateX(-2px);} 100%{ opacity:1; transform:translateX(0);} }

.gate__sub{ color:var(--text-dim); font-size:13.5px; line-height:1.6; margin-bottom:28px; opacity:0; transition:opacity .6s; max-width:420px; z-index:2; }
.gate.headline-on .gate__sub{ opacity:1; }

.gate__cta{
  padding:14px 30px; border-radius:999px; background:rgba(125,211,252,0.06);
  border:1px solid rgba(125,211,252,0.4); color:var(--cyan);
  font-family:var(--mono); font-size:13px; letter-spacing:0.12em; cursor:pointer; z-index:2;
  opacity:0; transform:translateY(6px); transition:opacity .5s, transform .5s, background .25s, box-shadow .25s;
}
.gate.cta-on .gate__cta{ opacity:1; transform:none; animation:ctaGrant .9s ease .05s; }
@keyframes ctaGrant{
  0%{ box-shadow:0 0 0 0 rgba(125,211,252,0); }
  30%{ box-shadow:0 0 0 6px rgba(125,211,252,0.18); }
  60%{ box-shadow:0 0 0 0 rgba(125,211,252,0); }
  80%{ box-shadow:0 0 0 4px rgba(179,158,249,0.14); }
  100%{ box-shadow:0 0 0 0 rgba(125,211,252,0); }
}
.gate__cta:hover{ background:rgba(125,211,252,0.14); box-shadow:0 0 24px rgba(125,211,252,0.25); }
.gate__cta.hidden{ display:none; }

/* ===================== HUB ===================== */
.hub{ position:relative; z-index:2; min-height:100vh; height:100vh; display:flex; flex-direction:column; overflow:hidden; }

.qc-header{
  display:flex; align-items:center; justify-content:space-between; padding:18px 32px; flex:none;
  position:relative; z-index:5;
}
.qc-brand{ display:flex; align-items:center; gap:10px; }
.qc-brand__logo{ width:30px; height:30px; object-fit:contain; filter:drop-shadow(0 0 8px rgba(125,211,252,0.35)); }
.qc-brand__text{ font-family:var(--mono); font-size:12px; letter-spacing:0.16em; color:var(--text-dim); }
.qc-status{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; color:var(--text-faint); }
.qc-status b{ color:var(--cyan); }
.qc-status span{ color:var(--violet); }

.qc-eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.22em; color:var(--text-faint);
  text-align:center; margin:0 0 6px; flex:none; position:relative; z-index:5;
}

/* --------- caméra / monde --------- */
.qc-viewport{
  position:relative; flex:1; overflow:hidden; cursor:grab;
  touch-action:none; user-select:none;
}
.qc-viewport.is-dragging{ cursor:grabbing; }
.qc-world{
  position:absolute; top:0; left:0; width:2400px; height:1500px;
  transform-origin:0 0; will-change:transform;
}
.qc-world.is-settling{ transition:transform .9s cubic-bezier(.2,.8,.2,1); }

.qc-floor{ position:absolute; inset:0; width:2400px; height:1500px; opacity:0.16; pointer-events:none; }
.qc-floor circle, .qc-floor line{ fill:none; stroke:var(--metal); stroke-width:1; }

.qc-structure{
  position:absolute; pointer-events:none; opacity:0.5;
}
.qc-structure.pillar{ width:26px; height:220px; background:linear-gradient(180deg, var(--ring-3), transparent); border-top:2px dashed var(--metal); transform:rotate(-4deg); }
.qc-structure.grille{ width:140px; height:70px; background:repeating-linear-gradient(90deg, var(--ring-3) 0 6px, transparent 6px 14px); border:1px solid var(--border); border-radius:4px; }
.qc-structure.pipe{ width:340px; height:14px; background:linear-gradient(90deg, var(--ring-2), var(--ring-3), var(--ring-2)); border-radius:8px; transform:rotate(8deg); }
.qc-structure.blastdoor{ width:220px; height:260px; border:2px solid var(--ring-3); border-radius:10px; opacity:0.35; }
.qc-structure.blastdoor::after{ content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--ring-3); }
.qc-structure.blob{ width:180px; height:140px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.04), transparent 70%); filter:blur(6px); opacity:0.5; }
.qc-structure.blob.small{ width:110px; height:90px; }

.qc-links{ position:absolute; inset:0; width:2400px; height:1500px; pointer-events:none; }
.qc-links .link{ fill:none; }
.qc-links .link-live{ stroke:rgba(125,211,252,0.45); stroke-width:2; stroke-dasharray:10 8; animation:dashMove 4s linear infinite; }
.qc-links .link-broken{ stroke:rgba(179,158,249,0.28); stroke-width:2; stroke-dasharray:4 6; }
.qc-links .link-vanish{ stroke-width:2; stroke-dasharray:2 10; opacity:0.6; }
.qc-links .hidden-link{ display:none; }
@keyframes dashMove{ to{ stroke-dashoffset:-72; } }

.qc-pulse{
  position:absolute; left:1200px; top:760px; width:10px; height:10px; margin:-5px 0 0 -5px;
  border-radius:50%; border:2px solid var(--cyan); opacity:0; pointer-events:none;
}
.qc-pulse.is-active{ animation:pulseOut 1.6s ease-out; }
@keyframes pulseOut{
  0%{ width:10px; height:10px; margin:-5px 0 0 -5px; opacity:0.9; border-width:3px; }
  100%{ width:1900px; height:1900px; margin:-950px 0 0 -950px; opacity:0; border-width:1px; }
}

.qc-core{
  position:absolute; transform:translate(-50%,-50%);
  width:220px; height:220px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%, rgba(125,211,252,0.16), rgba(12,13,16,0.9) 70%);
  border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
  box-shadow:0 0 40px rgba(125,211,252,0.12);
  z-index:3;
}
.qc-core__ring{ position:absolute; border-radius:50%; border:1px solid rgba(179,158,249,0.25); }
.qc-core__ring.ring-a{ inset:-14%; animation:ringRotate 30s linear infinite; }
.qc-core__ring.ring-b{ inset:-26%; border-color:rgba(125,211,252,0.18); animation:ringRotate 46s linear infinite reverse; }
.qc-core__glow{ position:absolute; inset:-40%; border-radius:50%; background:radial-gradient(circle, rgba(125,211,252,0.14), transparent 70%); animation:corePulse 4s ease-in-out infinite; }
@keyframes corePulse{ 0%,100%{ opacity:0.6; } 50%{ opacity:1; } }
.qc-core__logo{ width:38%; height:38%; object-fit:contain; filter:drop-shadow(0 0 14px rgba(125,211,252,0.4)); position:relative; z-index:1; }
.qc-core__label{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; color:var(--text-faint); text-align:center; line-height:1.5; position:relative; z-index:1; }
.qc-core__label span{ color:var(--cyan); }

/* --------- modules physiques --------- */
.qc-module{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; cursor:pointer; z-index:3;
}
.qc-module__base{ width:2px; height:26px; background:linear-gradient(180deg, var(--metal), transparent); margin-bottom:-2px; order:3; }
.qc-module__orb{
  position:relative; width:56px; height:56px; border-radius:50%; order:1;
  background:radial-gradient(circle at 38% 32%, rgba(255,255,255,0.14), var(--ring-1) 70%);
  border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center;
  transition:box-shadow .3s, border-color .3s, transform .25s;
}
.qc-module:hover .qc-module__orb{ transform:scale(1.08); }
.qc-module__dot{ width:9px; height:9px; border-radius:50%; }
.qc-module[data-state="online"] .qc-module__orb{ box-shadow:0 0 22px rgba(110,231,183,0.35); border-color:rgba(110,231,183,0.4); }
.qc-module[data-state="online"] .qc-module__dot{ background:var(--green); box-shadow:0 0 10px var(--green); }
.qc-module[data-state="ready"] .qc-module__orb{ box-shadow:0 0 22px rgba(125,211,252,0.35); border-color:rgba(125,211,252,0.4); }
.qc-module[data-state="ready"] .qc-module__dot{ background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.qc-module[data-state="locked"] .qc-module__orb{ box-shadow:none; }
.qc-module[data-state="locked"] .qc-module__dot{ background:var(--text-faint); animation:deadFlicker 3.4s ease-in-out infinite; }
@keyframes deadFlicker{ 0%,88%,100%{ opacity:0.25; } 90%{ opacity:0.8; } 93%{ opacity:0.1; } }
.qc-module[data-state="dormant"] .qc-module__dot{ background:var(--text-faint); }

.qc-module__plate{
  order:2; margin-top:10px; text-align:center; padding:6px 12px; border-radius:8px;
  background:rgba(15,16,19,0.55); border:1px solid var(--border); backdrop-filter:blur(3px);
}
.qc-module__title{ font-family:var(--head); font-size:13px; }
.qc-module__meta{ font-family:var(--mono); font-size:9px; letter-spacing:0.06em; color:var(--text-faint); margin-top:2px; }

/* module 3 : portes fermées façon iris */
.qc-module--locked .qc-module__door{
  position:absolute; top:-1px; bottom:-1px; width:52%; background:var(--ring-1);
  border:1px solid var(--border-strong); transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.qc-module--locked .qc-module__door.left{ left:-1px; border-radius:28px 0 0 28px; transform:translateX(0); }
.qc-module--locked .qc-module__door.right{ right:-1px; border-radius:0 28px 28px 0; transform:translateX(0); }
.qc-module--locked.is-unlocked .qc-module__door.left{ transform:translateX(-90%); }
.qc-module--locked.is-unlocked .qc-module__door.right{ transform:translateX(90%); }
.qc-module--locked.is-unlocked .qc-module__orb{ box-shadow:0 0 22px rgba(125,211,252,0.4); border-color:rgba(125,211,252,0.45); }
.qc-module--locked.is-unlocked .qc-module__dot{ background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:none; }

.qc-module.is-denied .qc-module__orb{ animation:denyShake .4s ease; }
@keyframes denyShake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }

/* module 4 : lointain, dans l'obscurité */
.qc-module--distant .qc-module__orb{ width:40px; height:40px; opacity:0.5; filter:blur(0.4px) grayscale(0.6); }
.qc-module--distant .qc-module__plate{ opacity:0.45; }
.qc-module--distant .qc-module__title{ letter-spacing:0.1em; }
.qc-module--distant.is-revealed .qc-module__orb{ opacity:0.72; filter:blur(0) grayscale(0.25); }
.qc-module--distant.is-revealed .qc-module__plate{ opacity:0.7; }

/* obscurité progressive centrée sur le noyau */
.qc-vignette{
  position:absolute; width:3200px; height:3200px; left:1200px; top:760px;
  margin:-1600px 0 0 -1600px; border-radius:50%; pointer-events:none; z-index:4;
  background:radial-gradient(circle,
    transparent 0%, transparent 30%,
    rgba(10,12,16,0.32) 38%,
    rgba(6,7,10,0.62) 50%,
    rgba(4,5,7,0.86) 64%,
    rgba(2,3,4,0.97) 80%,
    #030304 100%);
}

.qc-drag-hint{
  position:absolute; bottom:70px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:11px; letter-spacing:0.12em; color:var(--text-dim);
  background:rgba(15,16,19,0.7); border:1px solid var(--border); border-radius:20px;
  padding:8px 16px; display:flex; align-items:center; gap:8px; z-index:6;
  opacity:0; transition:opacity .6s ease .6s;
  animation:hintFloat 2.4s ease-in-out infinite;
}
.hub.active .qc-drag-hint{ opacity:1; }
.qc-drag-hint.is-hidden{ opacity:0 !important; transition:opacity .4s; }
.qc-drag-hint__icon{ color:var(--cyan); }
@keyframes hintFloat{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(-4px); } }

.qc-footer{
  display:flex; justify-content:space-between; padding:14px 32px; flex:none; position:relative; z-index:5;
  font-family:var(--mono); font-size:10px; letter-spacing:0.1em; color:var(--text-faint);
  border-top:1px solid var(--border);
}

/* ===================== JOURNAL ===================== */
.journal-tab{
  position:fixed; top:50%; right:0; transform:translateY(-50%); z-index:75;
  background:var(--ring-1); border:1px solid var(--border-strong); border-right:none;
  border-radius:200px 0 0 200px; padding:20px 12px 20px 16px; cursor:pointer;
  writing-mode:vertical-rl; font-family:var(--mono); font-size:11px; letter-spacing:0.18em; color:var(--text-dim);
  transition:background .2s, color .2s;
}
.journal-tab:hover, .journal-tab.is-active{ color:var(--cyan); background:var(--ring-2); }

.journal-backdrop{ position:fixed; inset:0; background:rgba(5,6,8,0.55); opacity:0; pointer-events:none; transition:opacity .35s; z-index:69; }
.journal-backdrop.is-open{ opacity:1; pointer-events:auto; }

.journal-panel{
  position:fixed; top:0; right:0; height:100%; width:380px; max-width:88vw;
  background:linear-gradient(180deg, var(--bg-2), var(--bg)); border-left:1px solid var(--border-strong);
  border-radius:120px 0 0 120px; z-index:70; transform:translateX(110%);
  transition:transform .5s cubic-bezier(.2,.8,.2,1); display:flex; flex-direction:column;
  box-shadow:-30px 0 60px rgba(0,0,0,0.5); padding-left:20px;
}
.journal-panel.is-open{ transform:translateX(0); }
.journal-panel__head{ display:flex; justify-content:space-between; align-items:flex-start; padding:30px 26px 16px; border-bottom:1px solid var(--border); }
.journal-panel__kicker{ font-family:var(--mono); font-size:10px; letter-spacing:0.14em; color:var(--text-faint); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.journal-panel__kicker .led{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); display:inline-block; }
.journal-panel__head h3{ font-size:20px; letter-spacing:0.06em; }
.journal-panel__close{ background:none; border:1px solid var(--border); color:var(--text-dim); width:30px; height:30px; border-radius:50%; cursor:pointer; }
.journal-panel__body{ padding:20px 26px 30px; overflow-y:auto; flex:1; }
.log{ border-left:2px solid var(--cyan); padding-left:14px; margin-bottom:20px; }
.log__id{ font-family:var(--mono); font-size:10.5px; color:var(--cyan); margin-bottom:6px; letter-spacing:0.08em; }
.log__text{ color:var(--text-dim); font-size:13.5px; line-height:1.55; }
.log--corrupt{ border-left-color:var(--text-faint); }
.log--corrupt .log__text{ color:var(--text-faint); font-style:italic; }
.log--new{ border-left-color:var(--violet); animation:logIn .6s ease; }
.log--new .log__id{ color:var(--violet); }
@keyframes logIn{ from{ opacity:0; transform:translateX(14px); } to{ opacity:1; transform:none; } }

/* ===================== TOAST ===================== */
.qc-toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
  background:rgba(17,19,24,0.92); border:1px solid var(--border-strong); border-radius:10px;
  padding:12px 20px; font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color:var(--cyan);
  opacity:0; pointer-events:none; transition:opacity .35s, transform .35s; z-index:300;
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
}
.qc-toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ===================== MODAL ===================== */
.qmodal{ position:fixed; inset:0; z-index:200; display:none; }
.qmodal.is-open{ display:block; }
.qmodal__backdrop{ position:fixed; inset:0; background:rgba(4,5,6,0.8); backdrop-filter:blur(4px); }
.qmodal__panel{
  position:absolute; inset:4%; background:var(--ring-1); border:1px solid var(--border-strong);
  border-radius:20px; display:flex; flex-direction:column; overflow:hidden;
}
.qmodal__head{ display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid var(--border); }
.qmodal__eyebrow{ font-family:var(--mono); font-size:10px; letter-spacing:0.14em; color:var(--text-faint); margin-bottom:4px; }
.qmodal__title{ font-size:20px; }
.qmodal__close{ background:none; border:1px solid var(--border); color:var(--text-dim); width:32px; height:32px; border-radius:50%; cursor:pointer; }
.qmodal__body{ flex:1; overflow:auto; display:flex; align-items:center; justify-content:center; padding:20px; }

.demo-stage{ width:100%; height:100%; min-height:300px; background:radial-gradient(circle at 50% 40%, rgba(125,211,252,0.08), var(--bg)); border:1px solid var(--border); border-radius:14px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.demo-stage .runner{ width:26px; height:26px; background:var(--cyan); border-radius:50%; position:absolute; left:15%; bottom:20%; animation:runnerHop 1.1s ease-in-out infinite; box-shadow:0 0 16px rgba(125,211,252,0.6); }
@keyframes runnerHop{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-40px);} }
.demo-stage .obstacle{ width:18px; height:34px; background:var(--ring-2); border:1px solid var(--border-strong); position:absolute; bottom:20%; right:15%; }
.demo-stage .score{ position:absolute; top:14px; right:20px; font-family:var(--mono); color:var(--text-dim); font-size:14px; }
.demo-stage .tetris-grid{ display:grid; grid-template-columns:repeat(6,20px); grid-template-rows:repeat(9,20px); gap:2px; }
.demo-stage .tetris-grid div{ background:rgba(255,255,255,0.05); border-radius:2px; }
.demo-stage .tetris-grid div.on{ background:var(--violet); box-shadow:0 0 8px rgba(179,158,249,0.6); }
.demo-caption{ position:absolute; bottom:14px; left:20px; font-family:var(--mono); font-size:11px; color:var(--text-faint); letter-spacing:0.08em; }
.demo-stage .memory-core{ width:80px; height:80px; border-radius:50%; border:2px solid var(--cyan); box-shadow:0 0 30px rgba(125,211,252,0.5); animation:corePulse 2.4s ease-in-out infinite; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px){
  .qc-header{ padding:16px 20px; }
  .qc-header .qc-status{ font-size:9.5px; }
  .qc-drag-hint{ bottom:60px; font-size:10px; }
}
@media (max-width: 720px){
  .journal-panel{ width:100%; border-radius:0; padding-left:0; }
  .journal-tab{ border-radius:16px 0 0 16px; }
  .qc-footer{ padding:12px 20px; }
}
@media (max-width: 480px){
  .back-link{ padding:6px 8px; }
  .back-link span{ display:none; }
  .gate__kicker{ top:52px; font-size:9.5px; }
  .gate__core{ width:58vmin; height:58vmin; }
  .gate__headline{ letter-spacing:0.15em; font-size:20px; }
  .gate__terminal{ font-size:10.5px; max-width:280px; }
  .qc-header{ padding:44px 16px 12px; flex-direction:column; align-items:flex-start; gap:4px; }
  .qc-eyebrow{ font-size:9.5px; }
  .qc-drag-hint{ font-size:9.5px; padding:6px 12px; }
  .qc-module__plate{ padding:4px 8px; }
  .qc-module__title{ font-size:11.5px; }
}