:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #111717;
  color: #e7eee9;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --surface: #19211f;
  --surface-raised: #202b28;
  --muted: #9aa9a1;
  --accent: #c4f06b;
  --border: #2d3a35;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(ellipse at 50% -20%, rgb(101 141 87 / 17%), transparent 58%),
    #111717;
}

button, input { font: inherit; }
button { cursor: pointer; }

.shell { width: min(100% - 36px, 980px); margin: 0 auto; padding: 22px 0 30px; }
.topbar { display: flex; justify-content: space-between; align-items: center; min-height: 48px; }
.brand { display: inline-flex; gap: 10px; align-items: center; color: inherit; font-weight: 750; letter-spacing: -.03em; text-decoration: none; }
.brand-mark { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #536a45; border-radius: 10px; background: #273a25; color: var(--accent); }
.brand-muted { color: var(--muted); font-weight: 550; }
.connection { display: flex; gap: 9px; align-items: center; color: var(--muted); font-size: .88rem; }
.light { width: 8px; height: 8px; border-radius: 50%; background: #758078; box-shadow: 0 0 0 4px rgb(117 128 120 / 12%); }
.light.connected { background: var(--accent); box-shadow: 0 0 0 4px rgb(196 240 107 / 12%); }
.light.error { background: #ff8175; box-shadow: 0 0 0 4px rgb(255 129 117 / 12%); }

.intro { padding: clamp(38px, 7vw, 72px) 0 27px; }
.eyebrow { margin: 0 0 10px; color: var(--accent); font-size: .7rem; font-weight: 750; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.055em; line-height: 1.08; }
.intro > p:last-child { margin: 13px 0 0; color: var(--muted); line-height: 1.6; }

.terminal-panel { overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 24px 70px rgb(0 0 0 / 24%); }
.terminal-bar { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 16px; border-bottom: 1px solid var(--border); background: #1b2421; }
.terminal-label { display: flex; gap: 9px; align-items: center; color: #b7c4bc; font-size: .68rem; font-weight: 750; letter-spacing: .13em; }
.terminal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.quiet-button { padding: 6px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: .78rem; }
.quiet-button:hover { background: var(--surface-raised); color: #fff; }

.terminal-output {
  height: min(56vh, 570px);
  min-height: 310px;
  overflow: auto;
  padding: 22px clamp(15px, 4vw, 30px);
  color: #d7e1d9;
  font: 14px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
  scrollbar-color: #526357 transparent;
  white-space: pre-wrap;
}
.welcome { margin: 0; color: #8d9d92; }
.command-form { display: flex; gap: 12px; align-items: center; min-height: 66px; padding: 10px 14px 10px 22px; border-top: 1px solid var(--border); background: #151c1a; }
.prompt { color: var(--accent); font: 700 1.15rem ui-monospace, monospace; }
.command-form input { width: 100%; min-width: 0; padding: 11px 0; border: 0; outline: 0; background: transparent; color: #f0f5f1; font: 14px ui-monospace, monospace; }
.command-form input::placeholder { color: #718078; }
.command-form input:focus-visible { outline: none; }
.command-form button { min-width: 85px; padding: 10px 12px; border: 1px solid #c4f06b; border-radius: 9px; background: var(--accent); color: #19210f; font-size: .82rem; font-weight: 750; }
.command-form button:disabled { cursor: not-allowed; opacity: .48; }
.command-form button span { margin-left: 4px; font-size: 1rem; }
.notice { min-height: 25px; padding: 9px 4px 0; color: #ffc77d; font-size: .8rem; }
footer { display: flex; justify-content: space-between; gap: 12px; padding-top: 18px; color: #7e8d84; font-size: .75rem; }
.ansi-bold { font-weight: 750; }
.ansi-30 { color: #1c2320; } .ansi-31 { color: #f17e73; } .ansi-32 { color: #a4d47d; } .ansi-33 { color: #e9c56e; }
.ansi-34 { color: #83b1e6; } .ansi-35 { color: #d4a0db; } .ansi-36 { color: #76c9ca; } .ansi-37 { color: #e1e9e3; }
.ansi-90 { color: #77827c; } .ansi-91 { color: #ff9a8f; } .ansi-92 { color: #c4f06b; } .ansi-93 { color: #f2d47f; }
.ansi-94 { color: #a1c8f7; } .ansi-95 { color: #e5b4ed; } .ansi-96 { color: #97e3e1; } .ansi-97 { color: #fff; }

@media (max-width: 560px) {
  .shell { width: min(100% - 24px, 980px); padding-top: 14px; }
  .intro { padding-top: 42px; }
  .terminal-output { min-height: 44vh; height: 56vh; padding: 16px 13px; font-size: 13px; }
  .command-form { gap: 8px; padding-left: 14px; }
  .command-form button { min-width: 70px; }
  footer { flex-direction: column; gap: 5px; }
}