*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --g:#00ff41;
  --g-dim:#003b00;
  --g-mid:#00aa22;
  --bg:#000;
  --card:#050505;
  --text:#00ff41;
  --muted:#007a1a;
}

body{
  font-family:"Courier New",Courier,monospace;
  background:var(--bg);color:var(--text);
  line-height:1.6;min-height:100vh;
  display:flex;flex-direction:column;
}

a{color:var(--g-mid)}a:hover{color:var(--g);text-decoration:underline}

/* ── Header ── */
header{
  border-bottom:1px solid var(--g-dim);
  padding:1rem 1.5rem;
  background:#000;
}
.header-inner{max-width:960px;margin:0 auto}
.logo{display:none}
header h1{
  font-size:1rem;font-weight:normal;
  letter-spacing:.25em;color:var(--g);
}
header h1::before{content:"// "}
header p{font-size:.72rem;color:var(--muted);margin-top:.2rem}

/* ── Nav ── */
.site-nav{margin-top:.5rem;font-size:.72rem;display:flex;gap:1rem;flex-wrap:wrap}
.site-nav a{color:var(--muted);letter-spacing:.08em}
.site-nav a:hover{color:var(--g);text-decoration:none}

/* ── Layout ── */
main{flex:1;padding:2rem 1.5rem;max-width:960px;margin:0 auto;width:100%}
.cards{display:grid;grid-template-columns:1fr;gap:1.5rem}

/* ── Card ── */
.card{
  background:var(--card);
  border:1px solid var(--g-dim);
  padding:1.5rem;
  display:flex;flex-direction:column;gap:1.1rem;
  position:relative;
}
/* scanlines */
.card::after{
  content:"";
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    0deg,
    rgba(0,255,65,.018) 0px,
    rgba(0,255,65,.018) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events:none;
}

.card-head{
  border-bottom:1px solid var(--g-dim);
  padding-bottom:.75rem;
}
.card-head svg{display:none}
.card-head h2{
  font-size:.85rem;font-weight:normal;
  letter-spacing:.2em;text-transform:uppercase;
}
.card-head h2::before{content:"> "}

/* ── Dropzone ── */
.dropzone{
  border:1px dashed var(--g-mid);
  padding:2rem 1rem;
  text-align:center;cursor:pointer;
  color:var(--muted);font-size:.82rem;
  transition:border-color .1s,color .1s;
}
.dropzone svg{display:none}
.dropzone::before{
  display:block;margin-bottom:.6rem;
  font-size:.95rem;letter-spacing:.12em;
  color:var(--g-mid);
  content:"[    DROP FILE HERE    ]";
}
.dropzone p strong{color:var(--g)}
.dropzone:hover,.dropzone:focus,.dropzone.over{
  border-color:var(--g);color:var(--g);outline:none;
}
.dropzone:hover::before,.dropzone.over::before{color:var(--g)}

/* ── Progress ── */
.progress-wrap{
  height:14px;
  background:var(--g-dim);
  border:1px solid var(--g-mid);
  overflow:hidden;
}
.progress-bar{
  height:100%;width:0%;
  background:repeating-linear-gradient(
    90deg,
    var(--g) 0,var(--g) 5px,
    #00cc33 5px,#00cc33 6px
  );
  transition:width .2s;
}

/* ── Type helpers ── */
.file-name{font-size:.78rem;color:var(--muted)}
.label{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.muted{font-size:.78rem;color:var(--muted)}

/* ── Code box ── */
.codebox{
  border:1px solid var(--g);
  padding:.65rem .9rem;
  display:flex;align-items:center;gap:.75rem;
  background:#000;
}
.codebox::before{content:"CODE:> ";font-size:.7rem;color:var(--muted);white-space:nowrap}
#code-val{font-size:1.25rem;font-weight:bold;letter-spacing:.1em;flex:1}

.copy-btn{
  background:none;border:1px solid var(--g-mid);
  cursor:pointer;color:var(--muted);
  padding:.15rem .5rem;
  font-family:"Courier New",monospace;font-size:.7rem;
  transition:all .1s;
}
.copy-btn svg{display:none}
.copy-btn::after{content:"[COPY]"}
.copy-btn:hover{border-color:var(--g);color:var(--g)}
.copy-btn.ok::after{content:"[OK ✓]";color:var(--g)}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .9rem;
  border:1px solid var(--g);
  font-family:"Courier New",monospace;font-size:.82rem;
  cursor:pointer;background:var(--g-dim);color:var(--g);
  text-decoration:none;letter-spacing:.04em;
  transition:background .1s;
}
.btn svg{display:none}
.btn:hover{background:#001500;text-decoration:none}
.btn.secondary{border-color:var(--g-mid);color:var(--muted);background:transparent}
.btn.secondary:hover{border-color:var(--g);color:var(--g);background:transparent}
.btn.dl::before{content:"[SAVE] "}

/* ── Code input ── */
.input-row{display:flex;gap:.5rem}
#code-in{
  flex:1;padding:.4rem .75rem;
  border:1px solid var(--g-mid);
  background:#000;color:var(--g);
  font-family:"Courier New",monospace;font-size:.9rem;
  outline:none;transition:border-color .1s;
}
#code-in::placeholder{color:var(--g-dim)}
#code-in:focus{border-color:var(--g)}

/* ── Banners ── */
.banner{
  padding:.65rem .9rem;font-size:.8rem;
  display:flex;align-items:flex-start;gap:.4rem;
  border:1px solid;
}
.banner svg{display:none}
.banner.ok{border-color:var(--g);color:var(--g);background:#001a00}
.banner.ok::before{content:"[ OK ] ";white-space:nowrap}
.banner.err{border-color:#880000;color:#ff4444;background:#0a0000}
.banner.err::before{content:"[ERR] ";white-space:nowrap}

/* ── Spinner → blinking cursor ── */
.spinner{font-size:.8rem;color:var(--g-mid)}
.spinner::before{content:">>> "}
#r-msg{display:inline}
/* blink the whole progress line */
#r-progress{animation:blink 1.1s step-start infinite}
@keyframes blink{50%{opacity:.35}}

/* ── Doc pages ── */
.doc-page{display:flex;flex-direction:column;gap:1.5rem}
.doc-list{padding-left:1.2rem;font-size:.85rem;display:flex;flex-direction:column;gap:.4rem;color:var(--text)}
.doc-list li{list-style:none;padding-left:.5rem}
.doc-list li::before{content:"> ";color:var(--muted)}
.doc-ordered li{counter-increment:doc-step}
.doc-ordered{counter-reset:doc-step;list-style:none;padding-left:0}
.doc-ordered li::before{content:counter(doc-step) ". ";color:var(--g-mid);min-width:1.5rem;display:inline-block}
.ascii-diagram{
  font-size:.72rem;color:var(--g-mid);
  border:1px solid var(--g-dim);padding:.75rem 1rem;
  overflow-x:auto;line-height:1.7;
  background:#000;white-space:pre;
}

/* ── Footer ── */
footer{
  border-top:1px solid var(--g-dim);
  padding:1rem 1.5rem;
  font-size:.72rem;color:var(--muted);
  text-align:center;
}
footer p::before{content:"/* "}
footer p::after{content:" */"}