:root {
      --bg: #000;
      --panel: #0f0f0f;
      --text: #e8e8e8;
      --accent: #ff0000;
      --muted: #9a9a9a;
      --font: "SFMono-Regular", Menlo, Monaco, Consolas, "Courier New", monospace;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      background: var(--bg);
      font-family: var(--font);
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    ::-webkit-scrollbar { display: none; }
    .terminal-wrap {
      width: min(550px, 98%);
      background: linear-gradient(180deg, var(--panel), #0b0b0b);
      border: 1px solid rgba(255, 255, 255, 0.03);
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8);
      border-radius: 10px;
      overflow: hidden;
    }

    .terminal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      background: #151515;
      border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }

    .tabs {
      display: flex;
      gap: 10px
    }

    .tab {
      padding: 6px 10px;
      border-radius: 6px;
      background: #222;
      border: 1px solid rgba(255, 255, 255, 0.02);
      font-size: 13px
    }

    .tab.active {
      background: #0e0e0e;
      border-color: rgba(255, 0, 0, 0.15);
      color: var(--accent)
    }

    .header-right {
      color: var(--muted);
      font-size: 13px
    }

    .terminal-body {
      padding: 20px;
      min-height: 420px;
      position: relative;
    }

    pre#output {
      margin: 0;
      white-space: pre-wrap;
      word-break: break-word;
      font-size: 14px;
      line-height: 1.45;
      color: var(--text)
    }

    .input-line {
      display: flex;
      align-items: center;
      margin-top: 12px;
      gap: 8px;
    }

    .prompt {
      color: var(--accent);
      white-space: nowrap;
      font-size: 14px
    }

    .fake-input {
      background: transparent;
      border: none;
      color: var(--text);
      font-family: var(--font);
      font-size: 14px;
      outline: none;
      flex: 1;
      caret-color: transparent;
    }

    .real-input {
      position: absolute;
      left: -9999px;
    }

    .caret {
      display: inline-block;
      width: 10px;
      height: 16px;
      background: var(--text);
      margin-left: 6px;
      vertical-align: middle;
      animation: blink 1s steps(2, start) infinite;
    }

    @keyframes blink {
      to {
        visibility: hidden
      }
    }

    .muted {
      color: var(--muted)
    }

    .hint {
      margin-top: 12px;
      color: var(--muted);
      font-size: 13px
    }

    .small {
      font-size: 13px;
      color: var(--muted)
    }

    @media (max-width:520px) {
      .terminal-body {
        padding: 12px;
        min-height: 360px
      }
    }