/* BearAI CLI page: extends download.css (header, footer, tokens, requirements). */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url('/jetbrains-mono-400.ttf') format('truetype'); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url('/jetbrains-mono-500.ttf') format('truetype'); }
:root {
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Kanit, monospace;
  --term-bg: #100b0f; --term-edge: #723144; --ink: #f7f3f3; --ink-soft: #c9bcc1; --ink-dim: #a8959d;
  --ok: #7fe0a8; --warn: #ffb24d; --split: 5fr 7fr; --gap: clamp(2rem, 5vw, 6rem);
}
::selection { background: rgba(255, 40, 72, .42); color: #fff; }
html { scrollbar-color: #5a2433 var(--bg); }
button:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 4px; }
code { font-family: var(--mono); font-size: .92em; }
.note code, .quiet code, .commands code { color: #ffd6dd; }

.cli-main { width: min(calc(100% - 7rem), 1440px); margin: 0 auto; }
.cli-hero { display: grid; grid-template-columns: var(--split); gap: var(--gap); align-items: end; padding-top: 1rem; }
.cli-hero { position: relative; }
.cli-hero::before { content: ""; position: absolute; z-index: 0; right: 2%; top: -1.5rem; width: 50%; height: 600px; background: url('/bear-face-left.webp') center / contain no-repeat; opacity: .42; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 92%); mask-image: linear-gradient(to bottom, #000 55%, transparent 92%); pointer-events: none; }
.cli-hero > * { position: relative; z-index: 1; }
.hero-copy { padding-bottom: 3.5rem; }
.cli-hero h1 { margin: 2.6rem 0 1.4rem; font: 600 clamp(3.4rem, 6.4vw, 6.6rem)/1.02 Kanit, sans-serif; letter-spacing: -.045em; }
.cli-hero h1 span { display: block; margin-top: .6rem; color: #ff3653; font-size: .44em; line-height: 1.25; letter-spacing: -.01em; text-shadow: 0 0 40px rgba(255, 40, 72, .28); }
.cli-hero .lead { max-width: 33rem; margin-bottom: 2rem; }

.install { display: flex; align-items: stretch; max-width: 36rem; border: 1px solid var(--term-edge); border-radius: 12px; background: var(--term-bg); box-shadow: 0 0 34px rgba(255, 40, 72, .1); }
.install code { flex: 1; min-width: 0; padding: 1rem 1.1rem; white-space: normal; overflow-wrap: break-word; color: var(--ink); font-size: .88rem; line-height: 1.6; }
.install .sigil { color: var(--red-bright); margin-right: .35rem; }
.copy { flex-shrink: 0; min-width: 6.2rem; padding: 0 1.2rem; border: 0; border-left: 1px solid var(--term-edge); border-radius: 0 11px 11px 0; background: #df1d3e; color: #fff; font: 600 .95rem Kanit, sans-serif; cursor: pointer; transition: background .2s ease; }
.copy:hover { background: #b9142f; }
.copy[data-done] { background: #2a1a20; color: var(--ok); }
.copy-status { min-height: 1.5rem; margin: .5rem 0 1.1rem; color: var(--ok); font-size: .88rem; }

/* One terminal window that runs from the hero down through every chapter. */
.term { font: 400 .9rem/1.75 var(--mono); color: var(--ink); background: var(--term-bg); border: 1px solid var(--term-edge); }
.term-head { border-bottom: 0; border-radius: 18px 18px 0 0; background: radial-gradient(circle at 100% 0, rgba(198, 29, 63, .2), transparent 55%), var(--term-bg); box-shadow: 0 -10px 70px rgba(255, 40, 72, .08); }
.term-bar { display: flex; align-items: center; gap: 1rem; padding: .85rem 1.2rem; border-bottom: 1px solid #3d2229; }
.dots { display: flex; gap: .45rem; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: #3f2630; }
.dots i:first-child { background: var(--red); box-shadow: 0 0 10px var(--red); }
.term-title { color: var(--ink-dim); font-size: .78rem; letter-spacing: .04em; }
.term-open { padding: 1.6rem clamp(1.2rem, 2.4vw, 2rem) 2.2rem; }
.ln { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ln .p { color: var(--red-bright); }
.ln.cmd { color: #fff; }
.ln.cmd + .ln:not(.cmd) { margin-top: .2rem; }
.ln:not(.cmd) + .ln.cmd { margin-top: 1rem; }
.ln.logo { margin: .9rem 0 .6rem; overflow: hidden; white-space: pre; overflow-wrap: normal; color: #f2eef0; font: 400 clamp(.36rem, 1.05vw, .64rem)/1.12 var(--mono); }
.ln.logo .r { color: var(--red); text-shadow: 0 0 10px rgba(255, 40, 72, .6); }
.ln.dim { color: var(--ink-dim); }
.ln.ok { color: var(--ok); }
.ln.warn { color: var(--warn); }
.ln.route { color: #ff8095; }
.ln.out { margin-top: .4rem; color: #fff; font-size: 1.35rem; font-weight: 500; text-shadow: 0 0 22px rgba(255, 80, 103, .45); }
.ln.add { color: var(--ok); }
.diff-h { color: var(--ink-soft); }
.diff-c { color: #c58aff; }
.diff-a { color: var(--ok); background: rgba(127, 224, 168, .07); }
.cursor { display: inline-block; width: .6em; height: 1.15em; vertical-align: -.2em; background: var(--red-bright); box-shadow: 0 0 12px var(--red); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.session { position: relative; }
.chapter { display: grid; grid-template-columns: var(--split); gap: var(--gap); }
.note { align-self: start; position: sticky; top: 2rem; padding: 2.4rem 0 2.6rem; border-top: 1px solid #2c1a20; color: var(--ink-dim); transition: color .35s ease, border-color .35s ease; }
.chapter:first-child .note { border-top: 0; }
.note h2 { margin: 0 0 .8rem; color: var(--ink-soft); font: 600 clamp(1.45rem, 2.3vw, 2rem)/1.3 Kanit, sans-serif; letter-spacing: -.01em; transition: color .35s ease; }
.note p { max-width: 30rem; margin: 0 0 .8rem; line-height: 1.75; }
.chapter.is-active .note { color: #cdbfc5; }
.chapter.is-active .note h2 { color: #fff; }
.chapter.is-active .note { border-top: 1px solid var(--red); }
.term-seg { border-top: 0; border-bottom: 0; padding: 2.4rem clamp(1.2rem, 2.4vw, 2rem); background-image: linear-gradient(90deg, transparent calc(100% - 1px), rgba(255, 40, 72, .05)); }
.term-seg::before { content: ""; display: block; height: 1px; margin: -2.4rem calc(-1 * clamp(1.2rem, 2.4vw, 2rem)) 2.4rem; background: #2f1b21; }
.term-end { border-bottom: 1px solid var(--term-edge); border-radius: 0 0 18px 18px; padding-bottom: 2.8rem; }

.session-note { max-width: 32rem; margin: 1.6rem 0 0; color: var(--ink-dim); font-size: .86rem; line-height: 1.7; }

/* Typing reveal: only when JS has marked the page and motion is allowed. */
.js-reveal .term-seg .ln:not(:first-child) { opacity: 0; }
.js-reveal .term-seg .ln.cmd:not(:first-child) { clip-path: inset(0 100% 0 0); }
.js-reveal .term-seg.is-typed .ln:not(:first-child) { animation: line-in .28s ease-out forwards; animation-delay: calc(var(--i, 0) * 70ms); }
.js-reveal .term-seg.is-typed .ln.cmd:not(:first-child) { animation: type-in .4s steps(20, end) forwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes line-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes type-in { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

.outro { display: grid; grid-template-columns: var(--split); gap: var(--gap); padding: 6rem 0 7rem; }
.outro h2 { margin: 0 0 1rem; font: 600 clamp(2.2rem, 4vw, 3.8rem)/1.15 Kanit, sans-serif; letter-spacing: -.03em; }
.outro .quiet { max-width: 28rem; }
.commands { margin: 1rem 0 0; border-top: 1px solid #473039; }
.commands div { display: flex; justify-content: space-between; gap: 1.5rem; padding: .75rem 0; border-bottom: 1px solid #38252b; }
.commands dt code { color: #fff; font-size: .9rem; }
.commands dd { margin: 0; color: var(--ink-dim); text-align: right; }

@media (max-width: 1100px) { .cli-main { width: min(calc(100% - 4rem), 1440px); } }
@media (max-width: 960px) {
  :root { --split: 1fr; }
  .cli-main { width: calc(100% - 2.5rem); }
  .cli-hero { gap: 0; }
  .cli-hero::before { display: none; }
  .hero-copy { padding-bottom: 2.5rem; }
  .term-head { margin-top: 0; border-bottom: 1px solid var(--term-edge); border-radius: 16px; }
  .chapter { gap: 0; }
  .note { position: static; padding: 2.4rem 0 1.2rem; border-top: 0; color: #cdbfc5; }
  .note h2 { color: #fff; }
  .term-seg { border: 1px solid var(--term-edge); border-radius: 14px; padding: 1.3rem 1.1rem; }
  .term-seg::before { display: none; }
  .outro { gap: 1.5rem; padding: 4.5rem 0 5rem; }
}
@media (max-width: 500px) {
  .cli-hero h1 { font-size: clamp(2.9rem, 13vw, 3.8rem); }
  .term { font-size: .8rem; }
  .install code { font-size: .76rem; padding: .9rem .7rem; white-space: normal; overflow-wrap: break-word; }
  .copy { min-width: 4.4rem; padding: 0 .75rem; font-size: .88rem; }
  .commands div { flex-direction: column; gap: .15rem; }
  .commands dd { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
  .js-reveal .term-seg .ln, .js-reveal .term-seg .ln.cmd { opacity: 1; clip-path: none; animation: none; }
}
.cli-hero > *, .chapter > *, .outro > * { min-width: 0; }
.skip-link { background: #b9142f; }