* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:      #1e1e1e;
  --txt:     #cdd6f4;
  --dim:     #585b70;
  --mid:     #7f849c;
  --green:   #a6e3a1;
  --yellow:  #f9e2af;
  --blue:    #89b4fa;
  --teal:    #94e2d5;
  --peach:   #fab387;
  --red:     #f38ba8;
  --mauve:   #cba6f7;
  --overlay: #313244;
  --terminal-line: #8f948f;
  --terminal-frame: #d97852;
  --mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Mono', monospace;
}
html, body {
  height: 100%; background: #111;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
}
.window {
  width: 900px; height: min(660px, calc(100vh - 132px));
  background: var(--bg);
  border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; position: relative;
  box-shadow: 0 40px 80px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.06);
}
.titlebar {
  height: 40px; background: #2a2a2a;
  border-bottom: 1px solid #111;
  display: flex; align-items: center;
  padding: 0 14px; gap: 8px; flex-shrink: 0; position: relative;
}
.tl { width:12px; height:12px; border-radius:50%; }
.tl-r{background:#ff5f57;} .tl-y{background:#febc2e;} .tl-g{background:#28c840;}
.titlebar-center {
  position:absolute; left:50%; transform:translateX(-50%);
  font-size:12px; color:#666; letter-spacing:0.2px;
}
.term {
  flex:1; overflow-y:auto;
  padding: 16px 22px 18px;
  font-size:13px; line-height:1.55; color:var(--txt);
}
.term::-webkit-scrollbar{width:4px;}
.term::-webkit-scrollbar-thumb{background:#333;border-radius:2px;}
.bottombar {
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  width:min(900px, calc(100vw - 36px)); height:40px;
  background:#161616; border-top:1px solid #111;
  display:flex; align-items:center; padding:0 12px; gap:5px;
  pointer-events:auto; border-radius:8px;
  box-shadow:0 18px 42px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
}
.stab {
  padding:3px 10px; font-family:var(--mono); font-size:11px;
  color:#555; background:transparent; border:1px solid #333;
  border-radius:4px; cursor:pointer; transition:all 0.12s; white-space:nowrap;
}
.stab:hover{color:var(--mid);border-color:#555;}
.stab.active{color:var(--teal);border-color:var(--teal);background:rgba(148,226,213,0.07);}
.breplay {
  margin-left:auto; padding:3px 10px; font-family:var(--mono);
  font-size:11px; color:#555; background:transparent;
  border:1px solid #333; border-radius:4px; cursor:pointer; transition:all 0.12s;
}
.breplay:hover{color:var(--txt);border-color:#555;}
.lp { color:var(--mid); margin-top:14px; margin-bottom:2px; font-size:13px; }
.lu {
  color:var(--txt);
  margin:10px 0 12px;
  padding:7px 0 8px;
  line-height:1.6;
  border-top:1px solid var(--terminal-line);
  border-bottom:1px solid var(--terminal-line);
}
.lu::before {
  content:'❯';
  display:inline-block;
  margin-right:10px;
  color:#f0f2ef;
}
.lu-text { white-space:pre-wrap; }
.input-cursor { width:7px; margin-left:3px; }
.lspin { color:var(--dim); font-style:italic; display:flex; align-items:center; gap:7px; margin:4px 0; }
.lspin .spin-label { min-width:0; }
.lspin .spin-meta { color:var(--dim); font-size:12px; font-style:normal; margin-left:auto; }
.lspin.done { color:var(--mid); font-style:normal; }
.lspin.done .spin-label { color:var(--txt); }
.lspin.done .spin-meta { color:var(--green); }
.cmd { margin: 2px 0 5px; color:var(--mid); }
.cmd::before { content:'❯ '; color:var(--dim); }
.out {
  padding-left:18px; margin: 1px 0 6px;
  border-left:1px solid #2a2a2a;
  color:var(--mid); font-size:12px; line-height:1.5;
}
.panel {
  margin: 7px 0 8px;
  padding: 9px 12px;
  border-left: 2px solid var(--teal);
  background: rgba(148,226,213,0.06);
  border-radius: 6px;
}
.pt { color:var(--teal); font-weight:600; margin-bottom:3px; }
.pi { color:var(--txt); font-size:12px; line-height:1.55; margin-bottom:5px; }
.pr { color:var(--mid); font-size:12px; line-height:1.5; margin-top:2px; }
.pr::before { content:'- '; color:var(--dim); }
.pr.ok { color:var(--green); }
.pr.warn { color:var(--yellow); }
.pr.key { color:var(--blue); }
.pr .tag { color:var(--peach); font-weight:600; }
.tb { margin: 3px 0; }
.th { display:flex; align-items:baseline; }
.tbullet { color:var(--peach); margin-right:6px; flex-shrink:0; user-select:none; }
.tbullet.res { color:var(--blue); }
.tname { color:var(--peach); font-weight:600; }
.tname.res { color:var(--blue); }
.tparen { color:var(--mid); }
.targs { color:var(--mid); font-size:12px; }
.tresult {
  padding-left:18px; margin: 2px 0 5px;
  border-left:1px solid #2a2a2a;
}
.trl { display:flex; gap:0; font-size:12px; line-height:1.5; }
.trg { color:#303030; margin-right:8px; flex-shrink:0; user-select:none; }
.trv { color:var(--mid); }
.trv.ok  { color:var(--green); }
.trv.warn{ color:var(--yellow); }
.trv.key { color:var(--blue); }
.lc { color:var(--txt); margin:7px 0 4px; line-height:1.72; }
.lc .hl  { color:var(--teal); font-weight:600; }
.lc .val { color:var(--green); }
.lc .wrn { color:var(--yellow); }
.lc .dim { color:var(--mid); }
.lc .cd  { background:rgba(255,255,255,0.06); padding:1px 5px; border-radius:3px; font-size:12px; color:var(--mauve); }
.boot { margin-bottom:10px; color:var(--txt); }
.boot-shell-command {
  color:#44ef75;
  font-weight:600;
  margin:0 0 8px;
}
.boot-shell-command .prompt {
  color:#39ec69;
  margin-right:8px;
}
.claude-welcome {
  position:relative;
  display:grid;
  grid-template-columns:minmax(230px, 28%) 1fr;
  min-height:150px;
  border:1px solid var(--terminal-frame);
  border-radius:4px;
  color:#e8e7df;
  background:#222624;
}
.boot-title {
  position:absolute;
  top:-9px;
  left:16px;
  padding:0 8px;
  background:#222624;
  color:#f08b61;
  font-size:12px;
  font-weight:600;
}
.boot-left {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:18px 14px 12px;
  text-align:center;
  border-right:1px solid var(--terminal-frame);
}
.boot-welcome {
  color:#33bfff;
  font-weight:700;
  margin-bottom:12px;
}
.boot-logo {
  color:#f1845b;
  font-size:22px;
  line-height:0.86;
  margin:4px 0 16px;
  white-space:pre;
}
.boot-model,
.boot-path {
  color:#a7a69f;
  font-size:12px;
  line-height:1.25;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.boot-right {
  min-width:0;
  padding:10px 12px 12px;
  overflow:hidden;
}
.boot-section-title {
  color:#f17f55;
  font-weight:700;
  margin-bottom:2px;
}
.boot-line {
  color:#f0eee7;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.boot-rule {
  height:1px;
  margin:8px 0;
  background:var(--terminal-line);
}
.boot-muted {
  color:#9d9e99;
}
.shortcut-hint {
  color:#9d9e99;
  margin:6px 0 0;
  padding-left:18px;
}
.gap    { height:5px; }
.gap-lg { height:12px; }
.cursor {
  display:inline-block; width:8px; height:1em;
  background:var(--txt); vertical-align:text-bottom;
  animation:blink 1.1s step-end infinite; margin-left:1px;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.fd { opacity:0; animation:fin 0.15s ease forwards; }
@keyframes fin { to { opacity:1; } }

body.claude-code-shell {
  --bg: #202422;
  --txt: #e8e7df;
  --dim: #7d817b;
  --mid: #a9aba4;
  --green: #87d26b;
  --yellow: #dfc466;
  --blue: #47bffc;
  --teal: #96c9be;
  --peach: #f1845b;
  --red: #df7f84;
  --mauve: #c8cde0;
  --overlay: #282c29;
  --terminal-line: #8d918b;
  --terminal-frame: #de7b55;
  width: 100%;
  padding: 18px;
  background: #121413;
}

body.claude-code-shell .window-followup {
  width: min(1080px, calc(100vw - 36px));
  height: min(720px, calc(100vh - 132px));
  border-radius: 3px;
  background: #202422;
  border: 1px solid #2d312f;
  box-shadow: 0 28px 80px rgba(0,0,0,0.56);
}

body.claude-code-shell .titlebar {
  height: 28px;
  justify-content: center;
  background: #1b1f1d;
  border-bottom: 1px solid #141614;
}

body.claude-code-shell .titlebar-center {
  position: static;
  transform: none;
  max-width: none;
  color: #e2e2dd;
  font-size: 11px;
  letter-spacing: 0;
}

body.claude-code-shell .term {
  padding: 8px 10px 18px;
  background: #202422;
  line-height: 1.48;
  letter-spacing: 0;
}

body.claude-code-shell .term::-webkit-scrollbar {
  width: 8px;
}

body.claude-code-shell .term::-webkit-scrollbar-thumb {
  background: #6e706b;
  border-radius: 4px;
}

body.claude-code-shell .bottombar {
  position: fixed;
  left: 50%;
  top: auto;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(1080px, calc(100vw - 36px));
  height: 38px;
  padding: 0 10px;
  gap: 6px;
  background: #1a1d1b;
  border-top: 1px solid #2d312f;
  border-radius: 4px;
}

body.claude-code-shell .stab,
body.claude-code-shell .breplay {
  height: 26px;
  padding: 0 10px;
  border-radius: 3px;
  border: 1px solid #323733;
  font-size: 11px;
  color: #9ea09a;
  background: #202422;
  transition: color 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}

body.claude-code-shell .stab:hover,
body.claude-code-shell .breplay:hover {
  color: #d8ddeb;
  border-color: #686d66;
  background: #282d29;
}

body.claude-code-shell .stab.active {
  color: #f0eee7;
  border-color: #de7b55;
  background: rgba(222,123,85,0.12);
  box-shadow: none;
}

body.claude-code-shell .breplay {
  margin-left: auto;
  color: #d8ddeb;
}

body.claude-code-shell .lp {
  color: #44ef75;
  font-weight:600;
}

body.claude-code-shell .lspin .spin-meta {
  color: #8c94a6;
}

body.claude-code-shell .lspin.done .spin-meta {
  color: #9ad27f;
}

body.claude-code-shell .lu::before,
body.claude-code-shell .cmd::before {
  color: #f0f2ef;
}

body.claude-code-shell .out,
body.claude-code-shell .tresult {
  border-left-color: #3a3f3b;
}

body.claude-code-shell .panel {
  background: rgba(39,43,40,0.94);
  border-left-color: #47bffc;
  box-shadow: none;
}

body.claude-code-shell .lc .cd {
  background: rgba(255,255,255,0.06);
  color: #d9def0;
}

body.claude-code-shell .cursor {
  background: #e8ebf3;
  box-shadow: none;
}

@media (max-width: 820px) {
  body.claude-code-shell {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  body.claude-code-shell .window-followup {
    width: 100vw;
    height: calc(100vh - 64px);
    border-radius: 0;
  }

  body.claude-code-shell .term {
    padding: 8px 8px 18px;
    font-size: 12px;
  }

  .claude-welcome {
    grid-template-columns:1fr;
  }

  .boot-left {
    min-height:132px;
    border-right:0;
    border-bottom:1px solid var(--terminal-frame);
  }

  .boot-right {
    padding-top:12px;
  }

  .boot-line {
    white-space:normal;
  }

  body.claude-code-shell .bottombar {
    bottom: 8px;
    width: calc(100vw - 16px);
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.claude-code-shell .bottombar::-webkit-scrollbar {
    display: none;
  }

  body.claude-code-shell .stab,
  body.claude-code-shell .breplay {
    flex: 0 0 auto;
  }
}

/* Plotune engineering demonstration frame. The terminal remains a dark code interface. */
:root { --bg: #1c242b; --txt: #e0e8e1; --dim: #91a19b; --mid: #adbbb4; --teal: #6bc4af; --yellow: #f0be57; --overlay: #334247; }
html, body.claude-code-shell { background: #f7f6f2; }
body.claude-code-shell .window { border-radius: 2px; box-shadow: none; border: 1px solid #364747; }
body.claude-code-shell .titlebar { background: #26343a; border-color: #526067; }
body.claude-code-shell .titlebar-center { color: #c2cfc7; }
body.claude-code-shell .bottombar { border-radius: 2px; box-shadow: none; border: 1px solid #526067; background: #1c242b; }
body.claude-code-shell .stab, body.claude-code-shell .breplay { min-height: 34px; color: #adbbb4; border-radius: 2px; }
@media(max-width:600px) { body.claude-code-shell .stab,body.claude-code-shell .breplay { min-height: 44px; } body.claude-code-shell .bottombar { height: auto; padding: 8px; flex-wrap: wrap; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.demo-disclosure { padding: 9px 16px; color: #c2cfc7; font-size: 12px; line-height: 1.5; background: #26343a; border-bottom: 1px solid #526067; }