:root{
  --bg:#06080b;
  --text:#e7edf2;
  --muted:#7f8b98;
  --line:#28303a;
  --accent:#b9ff43;
  --danger:#ff5e75;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;overflow-x:hidden}
body::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 4px);
  mix-blend-mode:screen;
}
.babel-shell{min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,4vw,60px)}
.topline{display:flex;justify-content:space-between;gap:18px;font-size:10px;letter-spacing:.18em;color:var(--muted)}
.wordfield{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));min-height:62vh;margin:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.language-stream{position:relative;padding:clamp(14px,2vw,28px);border-right:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;justify-content:center;gap:24px;overflow:hidden}
.language-stream:last-child{border-right:0}
.language-stream:nth-child(2n){transform:translateY(14px)}
.language-stream:nth-child(3n){transform:translateY(-10px)}
.language-stream p{margin:0;line-height:1.55;opacity:.74;transition:.25s}
.language-stream .large{font-size:clamp(18px,2.4vw,36px);letter-spacing:-.04em}
.language-stream .tiny{font-size:10px;color:var(--muted)}
.language-stream:hover p{opacity:1}
.main-mark{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);font-size:clamp(44px,10vw,160px);letter-spacing:-.08em;opacity:.055;pointer-events:none;white-space:nowrap}
.threshold{
  position:absolute;left:50%;top:8%;bottom:8%;width:18px;transform:translateX(-50%);
  cursor:crosshair;z-index:5;
}
.threshold::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(transparent,var(--accent),transparent);opacity:.16;transition:.35s}
.threshold:hover::before,.threshold.active::before{width:4px;opacity:.9;box-shadow:0 0 26px var(--accent)}
.observe{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border:1px solid var(--accent);background:rgba(6,8,11,.92);color:var(--accent);
  padding:14px 18px;letter-spacing:.24em;font:inherit;opacity:0;pointer-events:none;transition:.35s;white-space:nowrap
}
.threshold:hover .observe,.threshold.active .observe{opacity:1;pointer-events:auto}
.false-actions{display:flex;justify-content:center;gap:clamp(10px,3vw,38px);flex-wrap:wrap;margin-top:20px}
.false-actions span{font-size:12px;color:var(--muted);padding:9px 12px;border:1px solid transparent}
.false-actions span:hover{border-color:var(--line);color:var(--text)}
.status{min-height:24px;text-align:center;color:var(--muted);font-size:12px;margin-top:14px}
.status.error{color:var(--danger)}
.footer-line{display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:10px}
.language-drift{animation:drift 12s ease-in-out infinite alternate}
@keyframes drift{from{letter-spacing:0}to{letter-spacing:.08em}}
@media(max-width:900px){
  .wordfield{grid-template-columns:repeat(2,1fr)}
  .language-stream{min-height:220px}
  .threshold{position:fixed;top:25%;bottom:25%;z-index:20}
  .main-mark{position:fixed}
}


.observation-nav{
  position:sticky;
  top:0;
  z-index:80;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  width:min(1180px,calc(100% - 24px));
  margin:10px auto 0;
  padding:9px 11px;
  border:1px solid rgba(116,130,146,.32);
  border-radius:10px;
  background:rgba(7,10,14,.88);
  backdrop-filter:blur(16px);
  box-shadow:0 9px 30px rgba(0,0,0,.24);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
.observation-nav__controls{
  display:flex;
  gap:7px;
  align-items:center;
}
.observation-nav button,
.observation-nav a{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  margin:0;
  padding:6px 9px;
  border:1px solid rgba(116,130,146,.32);
  border-radius:6px;
  background:transparent;
  color:#b6c0ca;
  font:inherit;
  font-size:10px;
  letter-spacing:.08em;
  text-decoration:none;
  cursor:pointer;
}
.observation-nav button:hover,
.observation-nav a:hover{
  border-color:var(--accent);
  color:var(--accent);
  text-decoration:none;
}
.observation-nav button:disabled{
  opacity:.28;
  cursor:not-allowed;
  border-color:rgba(116,130,146,.18);
  color:#69737e;
}
.observation-nav__position{
  min-width:0;
  text-align:center;
}
.observation-nav__chapter{
  display:block;
  color:var(--accent);
  font-size:10px;
  letter-spacing:.16em;
}
.observation-nav__path{
  display:block;
  overflow:hidden;
  margin-top:2px;
  color:#727e8a;
  font-size:9px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.observation-nav__progress{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  color:#7d8995;
  font-size:9px;
  white-space:nowrap;
}
.observation-nav__progress strong{
  color:#dce3e9;
  font-size:10px;
}
.observation-nav__mobile-label{display:none}
body.has-observation-nav .babel-drift-layer{z-index:5}
@media(max-width:760px){
  body{padding-bottom:74px}
  .observation-nav{
    position:fixed;
    top:auto;
    right:8px;
    bottom:8px;
    left:8px;
    width:auto;
    grid-template-columns:1fr;
    gap:6px;
    margin:0;
    padding:8px;
    border-radius:12px;
  }
  .observation-nav__controls{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
    order:2;
  }
  .observation-nav button,
  .observation-nav a{
    min-height:38px;
    padding:7px 5px;
  }
  .observation-nav__position{
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:space-between;
    text-align:left;
  }
  .observation-nav__path{display:none}
  .observation-nav__progress{
    position:absolute;
    top:11px;
    right:11px;
  }
  .observation-nav__mobile-label{display:inline}
}


:root{--bg:#080a0d;--panel:#11151b;--line:#28303a;--text:#e8edf2;--muted:#8e9aa8;--accent:#b9ff43;--danger:#ff6577}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;min-height:100%}
body{background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:32px 32px}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.wrap{width:min(980px,calc(100% - 32px));margin:auto;padding:42px 0 80px}
header{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:30px}.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase}
h1{font-size:clamp(28px,5vw,58px);font-weight:500;letter-spacing:-.04em;margin:8px 0}.lead{color:var(--muted);line-height:1.8;max-width:760px}
nav{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;font-size:13px}.panel{background:rgba(17,21,27,.92);border:1px solid var(--line);border-radius:10px;padding:20px;margin:16px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}.card{border:1px solid var(--line);background:rgba(17,21,27,.78);padding:17px;border-radius:9px}
.card h2,.card h3{margin-top:0}.meta{color:var(--muted);font-size:12px}.hidden-clue{color:#0b0d10;user-select:text}.code{background:#05070a;border:1px solid var(--line);padding:14px;border-radius:7px;white-space:pre-wrap;overflow-wrap:anywhere}
input,textarea,button{font:inherit}input,textarea{width:100%;background:#070a0e;border:1px solid var(--line);color:var(--text);padding:12px;border-radius:6px;margin:7px 0 13px}
button{background:var(--accent);color:#080a0d;border:0;border-radius:6px;padding:11px 15px;font-weight:700;cursor:pointer}button.secondary{background:transparent;color:var(--text);border:1px solid var(--line)}
.result{min-height:24px;margin-top:12px;color:var(--muted)}.success{color:var(--accent)}.error{color:var(--danger)}.locked{opacity:.48;filter:blur(1px);pointer-events:none}
.puzzle-bar{position:fixed;bottom:14px;right:14px;background:#0d1117;border:1px solid var(--line);padding:10px 13px;border-radius:8px;font-size:11px;z-index:20}.glitch{animation:glitch 4s infinite}
@keyframes glitch{0%,94%,100%{transform:none;text-shadow:none}95%{transform:translateX(1px);text-shadow:2px 0 var(--danger)}96%{transform:translateX(-1px);text-shadow:-2px 0 #53a9ff}}
.boundary{height:160px;display:grid;grid-template-columns:1fr 8px 1fr;border:1px solid var(--line);position:relative}.black{background:#020304}.white{background:#e7ebee}.middle{background:linear-gradient(#020304,#e7ebee);cursor:crosshair}.middle:hover{box-shadow:0 0 30px var(--accent)}
footer{margin-top:60px;color:var(--muted);font-size:11px}
@media(max-width:600px){.wrap{padding-top:24px}.puzzle-bar{position:static;margin:15px}}


.babel-drift-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:6;
  overflow:hidden;
}
.babel-fragment{
  position:absolute;
  max-width:min(38vw,430px);
  color:rgba(195,208,221,.18);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:clamp(10px,1.05vw,15px);
  line-height:1.5;
  letter-spacing:.03em;
  transform:rotate(var(--rotation,0deg));
  transition:opacity .4s,transform .4s;
  mix-blend-mode:screen;
  text-shadow:0 0 18px rgba(185,255,67,.05);
}
.babel-fragment[data-level="foreground"]{
  color:rgba(221,231,239,.58);
  text-shadow:0 0 16px rgba(185,255,67,.12);
}
.babel-fragment:hover{opacity:1}
.babel-status-strip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:12px 0 18px;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.08em;
}
.babel-status-strip span{
  border:1px solid var(--line);
  padding:5px 8px;
  border-radius:999px;
}
.babel-intrusion{
  display:inline;
  color:var(--accent);
  opacity:.72;
  font-size:.78em;
  margin-left:.5em;
  white-space:nowrap;
}
.babel-card-mark{
  display:block;
  margin-top:12px;
  color:var(--muted);
  font-size:10px;
  line-height:1.6;
}
.babel-subtitle{
  color:var(--muted);
  font-size:12px;
  letter-spacing:.05em;
}
.babel-revisit{
  animation:babelPulse 4s ease-in-out infinite alternate;
}
@keyframes babelPulse{
  from{filter:none}
  to{filter:drop-shadow(0 0 5px rgba(185,255,67,.16))}
}
@media(max-width:700px){
  .babel-fragment{max-width:70vw;font-size:9px}
  .babel-status-strip{font-size:9px}
}


.observation-nav{
  position:sticky;
  top:0;
  z-index:80;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  width:min(1180px,calc(100% - 24px));
  margin:10px auto 0;
  padding:9px 11px;
  border:1px solid rgba(116,130,146,.32);
  border-radius:10px;
  background:rgba(7,10,14,.88);
  backdrop-filter:blur(16px);
  box-shadow:0 9px 30px rgba(0,0,0,.24);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
.observation-nav__controls{
  display:flex;
  gap:7px;
  align-items:center;
}
.observation-nav button,
.observation-nav a{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  margin:0;
  padding:6px 9px;
  border:1px solid rgba(116,130,146,.32);
  border-radius:6px;
  background:transparent;
  color:#b6c0ca;
  font:inherit;
  font-size:10px;
  letter-spacing:.08em;
  text-decoration:none;
  cursor:pointer;
}
.observation-nav button:hover,
.observation-nav a:hover{
  border-color:var(--accent);
  color:var(--accent);
  text-decoration:none;
}
.observation-nav button:disabled{
  opacity:.28;
  cursor:not-allowed;
  border-color:rgba(116,130,146,.18);
  color:#69737e;
}
.observation-nav__position{
  min-width:0;
  text-align:center;
}
.observation-nav__chapter{
  display:block;
  color:var(--accent);
  font-size:10px;
  letter-spacing:.16em;
}
.observation-nav__path{
  display:block;
  overflow:hidden;
  margin-top:2px;
  color:#727e8a;
  font-size:9px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.observation-nav__progress{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  color:#7d8995;
  font-size:9px;
  white-space:nowrap;
}
.observation-nav__progress strong{
  color:#dce3e9;
  font-size:10px;
}
.observation-nav__mobile-label{display:none}
body.has-observation-nav .babel-drift-layer{z-index:5}
@media(max-width:760px){
  body{padding-bottom:74px}
  .observation-nav{
    position:fixed;
    top:auto;
    right:8px;
    bottom:8px;
    left:8px;
    width:auto;
    grid-template-columns:1fr;
    gap:6px;
    margin:0;
    padding:8px;
    border-radius:12px;
  }
  .observation-nav__controls{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
    order:2;
  }
  .observation-nav button,
  .observation-nav a{
    min-height:38px;
    padding:7px 5px;
  }
  .observation-nav__position{
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:space-between;
    text-align:left;
  }
  .observation-nav__path{display:none}
  .observation-nav__progress{
    position:absolute;
    top:11px;
    right:11px;
  }
  .observation-nav__mobile-label{display:inline}
}

.player-center-button{
  position:fixed;right:14px;top:76px;z-index:95;
  width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  background:rgba(7,10,14,.9);color:var(--accent);cursor:pointer;
  font:700 13px ui-monospace,monospace;backdrop-filter:blur(12px)
}
.player-center{position:fixed;inset:0;z-index:200;display:none;background:rgba(2,4,7,.76);backdrop-filter:blur(16px)}
.player-center.open{display:grid;place-items:center}
.player-center__panel{width:min(760px,calc(100% - 24px));max-height:88vh;overflow:auto;background:#0b0f14;border:1px solid var(--line);border-radius:14px;padding:20px}
.player-center__head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.player-center__head h2{margin:0}.player-center__close{background:transparent;color:var(--text);border:1px solid var(--line)}
.player-center__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
.player-center__section{border:1px solid var(--line);border-radius:10px;padding:14px;background:rgba(255,255,255,.02)}
.player-center__section h3{margin-top:0;font-size:13px}.player-center__section p{font-size:12px;color:var(--muted)}
.progress-track{height:7px;background:#080b0f;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;background:var(--accent)}
.save-slots{display:grid;gap:8px}.save-slot{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:8px}
.save-slot small{color:var(--muted)}.compact-button{padding:6px 8px;font-size:10px}
.accessibility-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:9px 0;font-size:12px}
.toggle{background:transparent;color:var(--text);border:1px solid var(--line);padding:6px 9px}
.pause-overlay{position:fixed;inset:0;z-index:190;display:none;place-items:center;background:#06080b;color:var(--text);text-align:center}
.pause-overlay.open{display:grid}.pause-overlay h2{font-size:clamp(30px,8vw,80px);margin:0}.pause-overlay p{color:var(--muted)}
.safe-mode-banner{position:fixed;left:12px;bottom:86px;z-index:100;background:#321b20;border:1px solid #8b3f4b;color:#ffd7dc;padding:9px 11px;border-radius:8px;font-size:11px}
html.a11y-high-contrast{--bg:#000;--panel:#090909;--text:#fff;--muted:#d0d0d0;--line:#fff;--accent:#ffff00}
html.a11y-reduced-motion *,html.a11y-reduced-motion *::before,html.a11y-reduced-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.a11y-font-115{font-size:115%}html.a11y-font-130{font-size:130%}html.a11y-font-90{font-size:90%}
@media(max-width:700px){.player-center-button{top:12px;right:12px}.player-center__grid{grid-template-columns:1fr}.player-center__panel{max-height:82vh}}