:root { --bg:#000; --fg:#e6e6e6; --muted:#9aa0a6; --accent:#00ff9c; --warn:#ffd166; --err:#ff5577; --overlay:rgba(0,0,0,0.8); --card:#111; --border:#2a2a2a; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:16px; line-height:1.5;}
.terminal{max-width:960px;margin:5vh auto 10vh;padding:16px;}
.line{white-space:pre-wrap;}
.dim{color:var(--muted);} .ok{color:var(--accent);} .warn{color:var(--warn);} .err{color:var(--err);}
.prompt{display:flex;gap:8px;align-items:center;margin-top:4px;}
.prompt .caret{color:var(--accent);}
input.inp{background:transparent;color:var(--fg);border:none;outline:none;caret-color:var(--fg);font:inherit;width:70%;}
.term-scroll{min-height:70vh;}
hr{border:none;border-top:1px dashed #222;margin:8px 0;}
::selection{background:#1f4037;color:#fff;}
.pre{white-space:pre; font-family:inherit;}
.viewer-overlay{ position:fixed; inset:0; background:var(--overlay); display:flex; align-items:center; justify-content:center; z-index:9999; animation: fadeIn .15s ease-out;}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.viewer-window{ background:var(--card); border:1px solid var(--border); border-radius:10px; width:min(92vw, 920px); box-shadow:0 20px 60px rgba(0,0,0,.6); position:relative; overflow:hidden; }
.viewer-titlebar{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid var(--border); background:#0b0b0b; }
.viewer-close{ width:18px; height:18px; border-radius:4px; background:#e65; color:#000; font-weight:800; display:grid; place-items:center; cursor:pointer; }
.viewer-body{ padding:10px; }
.viewer-canvas{ width:100%; height:auto; display:block; background:#000; border:1px solid var(--border); }
.viewer-caption{ color:var(--muted); font-size:.95rem; margin-top:8px; }


/* --- v6 viewer restyle --- */
.viewer-window{
  background:#000; /* black body */
  border:1px solid #c0c0c0; /* silver border */
  border-radius:0; /* square corners */
  width:min(92vw, 920px);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  position:relative; overflow:hidden;
}
.viewer-titlebar{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:8px 10px;
  border-bottom:1px solid #c0c0c0;
  background:#c0c0c0; color:#000; /* silver bar with black text */
  font-weight:600;
}
.viewer-close{
  width:18px; height:18px; border-radius:0; /* square button */
  background:#c0c0c0; color:#000; font-weight:800;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid #7a7a7a;
}
.viewer-body{ padding:10px; background:#000; }
.viewer-canvas{ width:100%; height:auto; display:block; background:#000; border:1px solid #2a2a2a; border-radius:0; }