:root{
  --bg:#000;
  --fg:#d0d0d0;
  --dim:#8c8c8c;

  --neon:#00ff99;
  --neon2:#00b3ff;
  --neon3:#00ffcc;

  --solar:#ffd84d;
  --red:#ff3b3b;

  --frameBg: rgba(2, 6, 10, 0.96);
  --codeBg: rgba(0, 32, 16, 0.55);
  --panelBg: rgba(0,0,0,0.35);
}

html, body{
  margin:0;
  padding:0;
  min-height:100%;
  background:var(--bg);
  color:var(--fg);
  font-family: Arial, sans-serif;
}

body{
  padding:20px;
  background: radial-gradient(circle at 50% 10%, #101820 0%, #020406 55%, #000 100%);
  overflow-x:hidden;
}

.bg-grid{
  position:fixed; inset:-60px;
  background-image:
    linear-gradient(rgba(0,255,153,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,180,255,0.05) 1px, transparent 1px);
  background-size:42px 42px;
  opacity:0.35;
  mix-blend-mode:screen;
  animation:gridShift 30s linear infinite;
  pointer-events:none;
}

.scanlines{
  pointer-events:none;
  position:fixed; inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.012),
    rgba(255,255,255,0.012) 1px,
    rgba(0,0,0,0.18) 2px
  );
  mix-blend-mode:soft-light;
  opacity:0.36;
}

.frame{
  position:relative;
  max-width:820px;
  margin:40px auto;
  padding:32px 26px 26px;
  border-radius:6px;
  border:1px solid rgba(0,255,153,0.15);
  background:
    radial-gradient(circle at top, rgba(0,255,153,0.10), transparent 55%),
    radial-gradient(circle at bottom, rgba(0,179,255,0.12), transparent 60%),
    var(--frameBg);
  box-shadow: 0 0 18px rgba(0,0,0,0.9), 0 0 42px rgba(0,255,180,0.18);
}

.frame::before{
  content:"";
  position:absolute; left:0; top:18px; bottom:18px;
  width:3px;
  background: linear-gradient(to bottom, var(--neon), var(--neon2));
  box-shadow: 0 0 10px rgba(0,255,153,0.6);
  opacity:0.85;
}

.header-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:6px;
  padding-left:6px;
  gap:12px;
}
.header-left{ display:flex; flex-direction:column; }

.tag{
  font-size:10px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:#6ddfba;
}
h1{
  margin:4px 0 4px;
  font-size:26px;
  color:#fff;
  letter-spacing:0.14em;
  text-transform:uppercase;
  text-shadow:0 0 8px rgba(0,255,153,0.85);
}
.status-pill{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.18em;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid rgba(0,255,153,0.4);
  color:#bfffe6;
  background: rgba(0,40,30,0.55);
  white-space:nowrap;
}

.subtitle{
  margin:2px 0 16px 6px;
  font-size:12px;
  letter-spacing:0.20em;
  text-transform:uppercase;
  color:#888;
}

.divider{
  margin:4px 0 18px;
  height:1px;
  background: linear-gradient(to right, var(--neon), var(--neon2), #222);
  opacity:0.7;
}

.section-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:#8ea6a6;
  margin:16px 0 8px;
}
.section-label.mini{ margin:0 0 10px; opacity:0.9; }

.line{
  font-family:"Courier New", monospace;
  font-size:15px;
  line-height:1.7;
  color:#e0e0e0;
}
.line.strong{ font-weight:bold; }
.dim{ color:var(--dim); }

.code{
  display:block;
  margin:6px 0;
  padding:12px 14px;
  border-left:2px solid var(--neon);
  font-family:"Courier New", monospace;
  font-size:14px;
  color:#8aff8a;
  background: var(--codeBg);
  word-wrap:break-word;
}
.h{ display:none; }

.panel{
  background: var(--panelBg);
  border:1px solid rgba(0,255,153,0.14);
  border-radius:8px;
  padding:14px;
}

.array-row{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:14px;
  align-items:start;
}

.glyphwrap{
  border:1px solid rgba(0,255,153,0.12);
  border-radius:8px;
  background: rgba(0,0,0,0.22);
  padding:12px 10px;
  text-align:center;
}

.glyph{
  width: 300px;
  max-width: 100%;
  height:auto;
  filter: drop-shadow(0 0 18px rgba(0,255,153,0.12));
}

.glyph-caption{
  margin-top:10px;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#9fbfbf;
}

.controls{
  border:1px solid rgba(0,179,255,0.10);
  border-radius:8px;
  background: rgba(0,0,0,0.18);
  padding:12px;
}

.btnrow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn{
  appearance:none;
  border:1px solid rgba(0,255,153,0.35);
  background: rgba(0,20,14,0.55);
  color:#bfffe6;
  font-family:"Courier New", monospace;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:9px 12px;
  border-radius:8px;
  cursor:pointer;
  box-shadow: 0 0 14px rgba(0,255,153,0.10);
}
.btn:hover{ border-color: rgba(0,255,153,0.65); }
.btn:active{ transform: translateY(1px); }

.btn.secondary{
  border-color: rgba(0,179,255,0.35);
  background: rgba(0,15,24,0.55);
}
.btn.ghost{
  border-color: rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.18);
  color:#cfdede;
  box-shadow:none;
}

.meter{
  margin-top:12px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(0,255,153,0.18);
  background: rgba(0,0,0,0.35);
  overflow:hidden;
}
.meter > span{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--neon), var(--neon2));
  box-shadow: 0 0 14px rgba(0,255,153,0.25);
  transition: width 220ms ease;
}

.hint{
  margin-top:10px;
  font-family:"Courier New", monospace;
  font-size:11px;
  letter-spacing:0.08em;
  color:#7fbfb0;
}
.kbd{
  display:inline-block;
  padding:1px 6px;
  border-radius:6px;
  border:1px solid rgba(0,255,153,0.20);
  background: rgba(0,0,0,0.24);
  color:#c7fff0;
}

.output{
  margin-top:12px;
  padding:12px 12px;
  border-left:2px solid var(--neon2);
  background: rgba(0,0,0,0.28);
  color:#e8fff6;
  font-family:"Courier New", monospace;
  font-size:14px;
  line-height:1.7;
  min-height:84px;
  white-space:pre-wrap;
}

.micro{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed rgba(120,255,200,0.20);
}
.microlabel{
  font-family:"Courier New", monospace;
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#7fcab7;
  margin-bottom:3px;
}
.microvalue{
  font-family:"Courier New", monospace;
  font-size:12px;
  letter-spacing:0.10em;
  color:#bfffe6;
}

.navblock{
  margin-top:22px;
  font-family:"Courier New", monospace;
  font-size:12px;
  letter-spacing:0.12em;
  color:#6ba394;
}
.navblock a{ color:var(--neon3); text-decoration:none; }
.navblock a:hover{ text-decoration:underline; }

@keyframes gridShift{
  0%{ transform:translate3d(0,0,0); }
  100%{ transform:translate3d(-42px,-42px,0); }
}

@media (max-width: 760px){
  .array-row{ grid-template-columns: 1fr; }
}

@media (max-width: 480px){
  body{ padding:16px; }
  .frame{ margin:24px auto; padding:26px 18px 18px; }
  h1{ font-size:22px; letter-spacing:0.10em; }
  .subtitle{ font-size:11px; letter-spacing:0.16em; }
  .line{ font-size:14px; }
  .code{ font-size:13px; padding:10px 12px; }
}

@media print{
  body{ background:#fff !important; color:#000 !important; padding:0 !important; }
  .bg-grid, .scanlines, .navblock, .panel{ display:none !important; }
  .frame{ box-shadow:none !important; border:1px solid #000 !important; background:#fff !important; }
  .frame::before{ display:none !important; }
  .status-pill{ border:1px solid #000 !important; color:#000 !important; background:#fff !important; }
  .tag, .subtitle, .section-label, .dim{ color:#000 !important; }
  .code{ background:#f2f2f2 !important; color:#000 !important; border-left:2px solid #000 !important; }
}