:root { color-scheme: dark; --black:#050505; --amber:#ffad16; --amber-dim:rgba(255,173,22,0.55); --cyan:#5ad6d8; --muted:#6a6860; --line:rgba(255,255,255,0.1); --font:"Courier New",Courier,monospace; }
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; background:var(--black); color:var(--amber); font:14px/1.6 var(--font); overflow:hidden; }
.terminal { display:flex; flex-direction:column; height:100vh; max-width:860px; margin:0 auto; padding:0 16px; }
.term-header { display:flex; justify-content:space-between; align-items:center; padding:14px 0 10px; border-bottom:1px solid var(--amber-dim); font-size:12px; letter-spacing:0.05em; flex-shrink:0; }
.term-exit { color:var(--muted); text-decoration:none; font-size:11px; letter-spacing:0.1em; transition:color .15s; }
.term-exit:hover { color:var(--amber); }
.term-body { flex:1; overflow-y:auto; padding:16px 0 8px; scrollbar-width:thin; scrollbar-color:var(--amber-dim) transparent; }
.term-body::-webkit-scrollbar { width:4px; }
.term-body::-webkit-scrollbar-thumb { background:var(--amber-dim); }
.line { margin-bottom:3px; white-space:pre-wrap; word-break:break-word; }
.line.dim    { color:var(--muted); }
.line.cyan   { color:var(--cyan); }
.line.bright { color:#fff; }
.line.warn   { color:#e05c5c; }
.line.blank  { margin-bottom:10px; }
.line.sep    { color:var(--muted); margin:6px 0; }
.term-input-row { display:flex; align-items:flex-start; gap:10px; padding:10px 0 16px; border-top:1px solid var(--line); flex-shrink:0; }
.term-prompt { color:var(--amber); padding-top:2px; }
.term-choices { display:flex; flex-wrap:wrap; gap:8px; flex:1; }
.choice-btn { padding:6px 14px; border:1px solid var(--amber-dim); background:transparent; color:var(--amber); font:12px/1 var(--font); letter-spacing:0.08em; cursor:pointer; transition:background .12s,border-color .12s,color .12s; text-transform:uppercase; }
.choice-btn:hover { background:rgba(255,173,22,0.1); border-color:var(--amber); }
.choice-btn.key-hint::before { content:attr(data-key) " "; color:var(--cyan); }
.choice-btn.danger { border-color:rgba(224,92,92,.55); color:#e05c5c; }
.choice-btn.danger:hover { background:rgba(224,92,92,.08); border-color:#e05c5c; }
@media(max-width:600px) { html,body { font-size:12px; } .term-header { font-size:10px; } }