/* Escdark — implements Escdark.dc.html (Doc 3 brand: dark canvas that glows, firefly amber→lime). */

:root{
  --bg:#060509;
  --panel:#0B0A0E;
  --panel-2:#100E16;
  --chip:#14121A;
  --chip-2:#1B1925;
  --gold:#F7C347;
  --gold-light:#FFE9A8;
  --gold-bright:#FFD774;
  --lime:#B6E66A;
  --lime-soft:#CFE38C;
  --cream:#F4EFE3;
  --text:#D8D2C4;
  --muted:#8E897E;
  --dim:#6E6A63;
  --faint:#5E5A53;
  --green:#6FBE86;
  --red:#E26A5A;
  --line:rgba(244,239,227,.08);
  --line-2:rgba(244,239,227,.12);
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-ui:'Hanken Grotesk',system-ui,sans-serif;
  --font-meta:'Inter',system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  color:var(--cream);
  overflow:hidden;
}

/* keyframes (ported from the design) */
@keyframes breathe{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0;transform:scale(.986)}to{opacity:1;transform:scale(1)}}
@keyframes scanBar{0%{left:-12%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:108%;opacity:0}}
@keyframes fly{0%{left:4%;top:64%}40%{left:48%;top:22%}70%{left:74%;top:50%}100%{left:96%;top:34%}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes pulseRing{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.4);opacity:0}}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,-9px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-7px,7px)}}

/* the void */
.void{
  position:fixed;inset:0;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1200px 700px at 50% 40%,#120F18 0%,#0A0810 55%,#060509 100%);
}
.firefly{position:absolute;width:3px;height:3px;border-radius:50%;pointer-events:none}

/* the window */
.window{
  width:1060px;height:710px;flex-shrink:0;transform-origin:center center;
  background:var(--panel);border-radius:13px;border:1px solid var(--line);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.5),inset 0 1px 0 rgba(244,239,227,.04);
  overflow:hidden;display:flex;flex-direction:column;position:relative;color:var(--cream);
}

/* ambient layers */
.layer{position:absolute;inset:0;pointer-events:none}
.grain{z-index:40;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.vignette{z-index:39;background:radial-gradient(120% 90% at 50% 38%,transparent 55%,rgba(0,0,0,.55) 100%);opacity:.9;transition:opacity 1.4s ease}
.glow{z-index:6;background:radial-gradient(840px 580px at 50% 44%,rgba(247,195,71,.20),rgba(247,195,71,.05) 36%,transparent 62%);opacity:.1;transition:opacity 1.4s ease}

/* title bar */
.titlebar{
  height:42px;flex-shrink:0;display:flex;align-items:center;padding:0 16px;
  background:linear-gradient(180deg,#13111A,#0E0C13);border-bottom:1px solid rgba(244,239,227,.06);
  position:relative;z-index:30;
}
.traffic{display:flex;gap:8px;cursor:pointer}
.traffic span{width:12px;height:12px;border-radius:50%;display:block}
.wordmark-mini{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;cursor:pointer}
.wm-text{font-family:var(--font-display);font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.wm-esc{color:#C9C3B5}
.wm-dark{color:var(--gold)}
.titlebar-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.tb-link{font-family:var(--font-meta);font-size:11px;color:var(--dim)}
.tb-gear{width:20px;height:20px;border-radius:6px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--muted);font-size:12px}

/* content area */
.content{flex:1;position:relative;min-height:0;z-index:10}
.screen{position:absolute;inset:0}

/* shared building blocks */
.btn-primary{
  font-family:var(--font-ui);font-weight:700;color:#0B0A0E;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));border:none;border-radius:11px;
  cursor:pointer;box-shadow:0 0 34px -8px rgba(247,195,71,.6);transition:filter .15s,transform .15s;
}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn-ghost{
  font-family:var(--font-ui);font-weight:600;color:var(--text);background:var(--chip-2);
  border:1px solid var(--line-2);border-radius:11px;cursor:pointer;transition:border-color .15s,color .15s;
}
.btn-ghost:hover{border-color:rgba(247,195,71,.4)}
.kbd{font-family:var(--font-meta);font-size:12px;font-weight:600;background:rgba(11,10,14,.18);border-radius:6px;padding:3px 7px;letter-spacing:.02em}
.eyebrow{font-family:var(--font-meta);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
h1,h2{font-family:var(--font-display);margin:0}
.overlay{position:absolute;inset:0;background:rgba(6,5,9,.78);backdrop-filter:blur(7px);z-index:50;display:flex;flex-direction:column;padding:26px 30px;animation:fadeIn .25s ease}

/* scrollbars */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:rgba(244,239,227,.12);border-radius:8px}
*::-webkit-scrollbar-track{background:transparent}