/* Deliberately small and dependency-free. See widget.js for why this is not xterm.js. */
:root{--bg:#1e1e2e;--fg:#cdd6f4;--dim:#7f849c;--ok:#a6e3a1;--bad:#f38ba8;--acc:#89b4fa;--rule:#313244}
*{box-sizing:border-box}
body{font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin:0;padding:2rem 1rem;color:#1a1a1a;background:#fff}
main{max-width:860px;margin:0 auto}
.scaffold{color:#999;font-size:.8rem;text-align:center;border-top:1px dashed #ccc;padding-top:.5rem}
h2{margin:2rem 0 .5rem;font-size:1.6rem}
.intro{font-size:1.05rem}
.org{font-size:.95rem;background:#f6f8fa;border-left:3px solid var(--acc);padding:.75rem 1rem;border-radius:0 4px 4px 0}
.org small{display:block;margin-top:.5rem;color:#57606a;font-size:.8rem}
.org a,.intro a,.what a{color:#0550ae;text-decoration:underline;text-underline-offset:2px}
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.6rem;margin:1.25rem 0}
.chip{text-align:left;padding:.7rem .85rem;border:1px solid #d0d7de;border-radius:6px;background:#fff;cursor:pointer;font:inherit}
.chip:hover:not([aria-disabled=true]){border-color:var(--acc);background:#f6f8fa}
.chip[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.chip-title{display:block;font-weight:600;font-size:.95rem}
.chip-why{display:block;color:#57606a;font-size:.82rem;margin-top:.2rem}
/* Height-reserved: the widget upgrades into a box that already exists, so CLS stays 0. */
.term-wrap{background:var(--bg);border:1px solid var(--rule);border-radius:8px;padding:14px 16px;min-height:340px}
.term{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.6;color:var(--fg);white-space:pre-wrap;word-break:break-word;overflow-x:auto;min-height:300px;max-height:460px;overflow-y:auto}
.term .cmd{color:#fff;font-weight:600}
.term .dim{color:var(--dim)}
.term .ok{color:var(--ok)}
.term .bad{color:var(--bad)}
.term .note{color:var(--acc);font-style:italic;display:block;margin:.15rem 0 .6rem}
.prompt{display:flex;gap:.5rem;align-items:center;margin-top:.6rem;border-top:1px solid var(--rule);padding-top:.6rem}
.prompt span{color:var(--acc);font-family:ui-monospace,monospace}
.prompt input{flex:1;background:transparent;border:0;color:var(--fg);font-family:ui-monospace,monospace;font-size:13px;outline:none}
.freetype{font-size:.95rem;color:#24292f;margin:1rem 0 .5rem}
.freetype code{background:#f6f8fa;border:1px solid #d0d7de;border-radius:4px;padding:0 .25rem;font-size:.85em}
.hint{color:var(--dim);font-size:12px;margin:.4rem 0 0;font-family:ui-monospace,monospace}
.hint code{color:var(--acc)}
.term .next{color:var(--fg);display:block;margin-top:.8rem;border-top:1px solid var(--rule);padding-top:.6rem}
.term .next-c{color:var(--dim);display:block;margin-top:.5rem}
.term .next-x{color:var(--acc);display:block;cursor:pointer}
.term .next-x:hover{text-decoration:underline}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* MOBILE: the terminal is REPLACED, not shrunk. 80 columns at 38 is unreadable and an on-screen
   keyboard over a terminal is hostile. The chips and their labels stay, so the whole narrative
   survives; only the interactivity does not. */
@media (max-width:640px){
  .term-wrap,.prompt{display:none}
  .chips{grid-template-columns:1fr}
  .mobile-note{display:block}
}
.mobile-note{display:none;background:#f6f8fa;border-radius:6px;padding:1rem;font-size:.9rem}