/* ideasos — the launcher. Sea-green paper by day, deep teal at night, one coral accent for what is live.
   Bricolage Grotesque for the words, Geist Mono for anything the system says. The agent's page is always the other theme. */
:root {
  color-scheme: light;
  --ground: #ebf3f1; --panel: #f7fcfb; --panel-2: #dbe8e5; --ink: #0e2321; --ink-2: #355350; --muted: #55716d; --line: #bcd2ce; --line-2: #a3bdb8;
  --on: #ff6a4d; --on-text: #bd3a1f;
  --agent-bg: #0b1a19; --agent-ink: #e7f3f1; --agent-muted: #9fbbb6; --agent-line: #24403d; --agent-panel: #152d2b; --agent-on: #ff7a5c;
  --sans: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1180px; --gutter: clamp(18px, 4vw, 48px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0b1a19; --panel: #122524; --panel-2: #1a3230; --ink: #e7f3f1; --ink-2: #bfd5d1; --muted: #9fbbb6; --line: #24403d; --line-2: #35534f;
    --on: #ff7a5c; --on-text: #ff8f75;
    --agent-bg: #ebf3f1; --agent-ink: #0e2321; --agent-muted: #55716d; --agent-line: #bcd2ce; --agent-panel: #dbe8e5; --agent-on: #bd3a1f;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0b1a19; --panel: #122524; --panel-2: #1a3230; --ink: #e7f3f1; --ink-2: #bfd5d1; --muted: #9fbbb6; --line: #24403d; --line-2: #35534f;
  --on: #ff7a5c; --on-text: #ff8f75;
  --agent-bg: #ebf3f1; --agent-ink: #0e2321; --agent-muted: #55716d; --agent-line: #bcd2ce; --agent-panel: #dbe8e5; --agent-on: #bd3a1f;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ground); }
html, body { overflow-x: clip; }
body { min-height: 100svh; display: flex; flex-direction: column; background: var(--ground); color: var(--ink); font: 400 16px/1.55 var(--sans); }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
code, kbd, pre { font-family: var(--mono); }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--on); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--on) 30%, transparent); }

/* ---------- masthead ---------- */
.masthead { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 22px 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.mark { font: 500 22px/1 var(--mono); letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.cursor { display: inline-block; width: .55em; height: 1em; margin-left: .1em; background: var(--on); vertical-align: -.1em; animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.menu { display: flex; gap: 20px; margin-left: auto; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.menu a { text-decoration: none; color: var(--muted); padding-bottom: 4px; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a:focus-visible { color: var(--ink); outline: none; }
.menu a[aria-current="page"] { color: var(--ink); border-color: var(--on); }
.theme { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.theme button { padding: 6px 9px; border-radius: 4px; font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.theme button:hover, .theme button:focus-visible { color: var(--ink); outline: none; }
.theme button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }

/* ---------- the view ---------- */
.view { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin: 0 auto; flex: 1; min-height: 60svh; }
.loading { padding: 60px 0; color: var(--muted); font: 400 14px/1.5 var(--mono); }
.eyebrow { font: 500 11px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---------- home: the prompt, then the cards ---------- */
.home { padding: clamp(30px, 4.5vw, 56px) 0 40px; display: grid; gap: 22px; }
.home h1 { font: 600 clamp(32px, 4.2vw, 52px)/1.04 var(--sans); letter-spacing: -.03em; max-width: 20ch; }
.home .stand { color: var(--ink-2); max-width: 62ch; font-size: 17px; text-wrap: pretty; }
.prompt-row { display: grid; grid-template-columns: auto 1fr auto; align-items: stretch; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--panel); overflow: hidden; }
.prompt-row .key { display: flex; align-items: center; padding: 0 12px 0 14px; font: 600 15px/1 var(--mono); letter-spacing: -.02em; border-right: 1px solid var(--line); }
.prompt-row .key .cursor { width: .5em; height: .95em; }
.prompt-row input { min-width: 0; padding: 14px 14px; border: 0; background: transparent; font: 400 16px/1.3 var(--mono); color: var(--ink); }
.prompt-row input::placeholder { color: var(--muted); }
.prompt-row input:focus { outline: none; }
.prompt-row .hint { display: flex; align-items: center; gap: 10px; padding: 0 14px; font: 400 11px/1.4 var(--mono); color: var(--muted); border-left: 1px solid var(--line); white-space: nowrap; }
.prompt-row kbd { padding: 2px 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; font-size: 10.5px; }
.filters { display: flex; flex-wrap: wrap; gap: 4px; }
.filters button { padding: 7px 11px; border: 1px solid transparent; border-radius: 6px; font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.filters button:hover, .filters button:focus-visible { color: var(--ink); outline: none; }
.filters button[aria-pressed="true"] { color: var(--ink); border-color: var(--line-2); background: var(--panel); }

.cards { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; min-width: 0; transition: border-color .15s; }
.card:hover { border-color: var(--line-2); }
.c-top { display: flex; align-items: center; gap: 10px; font: 400 11.5px/1.5 var(--mono); color: var(--muted); }
.c-top .name, .p-top .name { font: 600 13px/1 var(--mono); letter-spacing: -.01em; color: var(--ink); }
.p-top .name { font-size: 14px; }
.card.queued .c-top .name { color: var(--muted); }
.kind { padding: 2px 7px; border: 1px solid var(--line-2); border-radius: 4px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: 10px; color: var(--ink); }
.c-title { font: 600 19px/1.22 var(--sans); letter-spacing: -.015em; text-decoration: none; }
a.c-title:hover, a.c-title:focus-visible { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; outline: none; }
.c-sum { color: var(--ink-2); font-size: 14.5px; line-height: 1.45; text-wrap: pretty; }
.c-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.btn { display: inline-block; padding: 8px 12px; border: 1px solid var(--ink); border-radius: 6px; font: 500 11.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); text-decoration: none; background: transparent; transition: background-color .15s, color .15s; }
.btn.primary { background: var(--ink); color: var(--ground); }
.btn.primary:hover, .btn.primary:focus-visible { background: var(--ink-2); border-color: var(--ink-2); outline: none; }
.btn:not(.primary):hover, .btn:not(.primary):focus-visible { background: var(--panel-2); outline: none; }
.c-foot .ver { margin-left: auto; font: 400 11px/1.5 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.card.queued { background: transparent; border-style: dashed; }
.card.queued .c-title, .card.queued .c-sum { color: var(--muted); }
.card.queued .kind { color: var(--muted); border-color: var(--line); }
.card.queued .q { font: 400 11px/1.5 var(--mono); color: var(--muted); font-style: italic; }
.count { font: 400 12px/1.6 var(--mono); color: var(--muted); }
.empty { padding: 30px 0; color: var(--muted); font: 400 14px/1.6 var(--mono); }

/* ---------- the status bar ---------- */
.status { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 10px 0 18px; border-top: 1px solid var(--line); font: 400 11px/1.5 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.status .s-mark { font-weight: 600; color: var(--ink); }
.status .lit { color: var(--on-text); }
.status .right { margin-left: auto; }
body.is-home .status { position: sticky; bottom: 0; background: var(--ground); z-index: 5; }

/* ---------- a post ---------- */
.post { padding: clamp(28px, 4vw, 52px) 0 40px; }
.p-head { display: grid; gap: 16px; max-width: 860px; }
.p-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 400 12px/1.5 var(--mono); color: var(--muted); }
.p-top .ver { color: var(--on-text); font-weight: 500; }
.post h1 { font: 600 clamp(30px, 3.8vw, 46px)/1.06 var(--sans); letter-spacing: -.03em; }
.post .stand { color: var(--ink-2); font-size: 17px; max-width: 62ch; text-wrap: pretty; }
.parts { display: grid; gap: 10px; }
.parts h2 { font: 500 11px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tools { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.tool { padding: 11px 13px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; display: grid; gap: 3px; }
.tool a { font: 600 14px/1.3 var(--sans); text-decoration: none; }
.tool a:hover, .tool a:focus-visible { color: var(--on-text); outline: none; }
.tool span { font-size: 13px; line-height: 1.4; color: var(--muted); }
.disclosure { font: 400 11.5px/1.5 var(--mono); color: var(--muted); max-width: 80ch; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.install { display: grid; gap: 10px; padding: 14px 16px 16px; border-radius: 8px; background: var(--agent-bg); color: var(--agent-ink); max-width: 860px; }
.install h2 { font: 500 10.5px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--agent-muted); }
.install .cmd { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.install pre { min-width: 0; padding: 10px 12px; border-radius: 6px; background: var(--agent-panel); font: 400 12.5px/1.5 var(--mono); white-space: pre-wrap; word-break: break-all; }
.install pre .p { color: var(--agent-muted); margin-right: 6px; }
.install .i-copy { padding: 0 14px; border: 1px solid var(--agent-ink); border-radius: 6px; font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--agent-ink); }
.install .i-copy:hover, .install .i-copy:focus-visible { background: var(--agent-ink); color: var(--agent-bg); outline: none; }
.install .then { font: 400 12.5px/1.55 var(--mono); color: var(--agent-ink); text-wrap: pretty; }
.install .then code { padding: .05em .3em; border-radius: 3px; background: var(--agent-panel); }
.install .then a { color: var(--agent-ink); }
.controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.toggle { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.toggle button { padding: 7px 12px; border-radius: 4px; font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.toggle button:hover, .toggle button:focus-visible { color: var(--ink); outline: none; }
.toggle button[aria-checked="true"] { background: var(--ink); color: var(--ground); }
.body { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 22px; }
.body.single { grid-template-columns: minmax(0, 1fr); }
.steps { min-width: 0; }
.intro { max-width: 76ch; }
.intro p, .step p, .note-body p { margin: 0 0 1em; text-wrap: pretty; color: var(--ink-2); }
.intro p:last-child { margin-bottom: 0; }
.step { padding: 26px 0 22px; border-top: 1px solid var(--line); max-width: 76ch; display: grid; gap: 12px; }
.step:first-of-type { margin-top: 26px; }
.step-head { display: flex; align-items: baseline; gap: 12px; font: 600 clamp(21px, 2vw, 26px)/1.15 var(--sans); letter-spacing: -.015em; }
.step-head .num { font: 500 11px/1 var(--mono); letter-spacing: .1em; padding: 5px 7px; border-radius: 4px; background: var(--ink); color: var(--ground); }
.step.is-active .step-head .num { background: var(--on); color: #fff; }
.step .you { min-width: 0; }
.step .you > :last-child, .note-body > :last-child { margin-bottom: 0; }
.step ul, .step ol, .intro ul, .note-body ul, .note-body ol { margin: 0 0 1em 1.2em; }
.step li, .note-body li { margin: .3em 0; text-wrap: pretty; color: var(--ink-2); }
.step strong, .intro strong, .note-body strong { font-weight: 600; color: var(--ink); }
.step p code, .intro code, .note-body code, .plain .body-copy code { font-size: .86em; padding: .05em .35em; border-radius: 3px; background: var(--panel-2); color: var(--ink); }
.note-body h2 { margin: 1.5em 0 .5em; font: 600 clamp(22px, 2.1vw, 27px)/1.2 var(--sans); letter-spacing: -.015em; }
pre.code { position: relative; margin: 0 0 1.1em; padding: 12px 84px 12px 14px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line); font-size: 13px; line-height: 1.55; overflow-x: auto; tab-size: 4; color: var(--ink); }
pre.code code { background: none; padding: 0; font-size: inherit; color: inherit; }
pre.code .copy { position: absolute; top: 6px; right: 6px; padding: 5px 8px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--ground); font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: background-color .15s, color .15s; }
pre.code .copy:hover, pre.code .copy:focus-visible { color: var(--ground); background: var(--ink); border-color: var(--ink); outline: none; }

/* the agent's page, in the other theme */
.agent { display: grid; gap: 10px; padding: 16px 18px; border-radius: 8px; background: var(--agent-bg); color: var(--agent-ink); font: 400 13.5px/1.6 var(--mono); }
.agent.none { padding: 0; background: none; color: var(--muted); font-style: italic; font-size: 12.5px; }
.step .agent p, .step .agent li { color: var(--agent-ink); margin: 0; }
.agent .do { display: grid; gap: .8em; }
.step .agent p code, .step .agent li code { color: var(--agent-ink); background: var(--agent-panel); font-size: .95em; }
.agent .a-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--agent-line); font: 500 10.5px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--agent-muted); }
.agent .ask { padding: 8px 10px; border-left: 3px solid var(--agent-on); background: color-mix(in srgb, var(--agent-on) 12%, transparent); }
.agent .ask b, .agent .report b { font-weight: 600; color: var(--agent-on); }
.agent pre.code { margin: 0; background: var(--agent-panel); border-color: var(--agent-line); color: var(--agent-ink); }
.agent pre.code .copy { background: var(--agent-bg); border-color: var(--agent-line); color: var(--agent-muted); }
.agent pre.code .copy:hover, .agent pre.code .copy:focus-visible { background: var(--agent-ink); color: var(--agent-bg); border-color: var(--agent-ink); }
.agent .checks { list-style: none; display: grid; gap: 4px; margin: 0; }
.agent .checks li { position: relative; padding-left: 22px; margin: 0; }
.agent .checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--agent-on); font-weight: 600; }
.agent ul:not(.checks), .agent ol { margin: 0 0 0 1.2em; }
.agent a { color: var(--agent-ink); }
.a-copy { justify-self: start; padding: 8px 12px; border: 1px solid var(--agent-ink); border-radius: 6px; font: 500 11.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--agent-ink); transition: background-color .15s, color .15s; }
.a-copy:hover, .a-copy:focus-visible { background: var(--agent-ink); color: var(--agent-bg); outline: none; }
html[data-side="you"] .step .agent { display: none; }
html[data-side="agent"] .step .you { display: none; }
html[data-side="agent"] .intro { display: none; }

/* the steps, listed beside them; the one you are reading is lit */
.index { position: sticky; top: 20px; display: grid; gap: 10px; padding: 14px 16px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); }
.index h2 { font: 500 11px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.index ol { list-style: none; display: grid; gap: 2px; }
.index button { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; width: 100%; padding: 7px 8px; border-radius: 6px; text-align: left; font: 500 13px/1.3 var(--sans); color: var(--muted); }
.index button:hover, .index button:focus-visible { background: var(--panel-2); color: var(--ink); outline: none; }
.index .num { font: 500 10.5px/1 var(--mono); letter-spacing: .08em; padding: 3px 5px; border-radius: 4px; background: var(--panel-2); color: var(--muted); }
.index li.is-done button { color: var(--ink-2); }
.index li.is-active button { color: var(--ink); }
.index li.is-active .num { background: var(--on); color: #fff; }
.index .now { padding-top: 8px; border-top: 1px solid var(--line); font: 400 11px/1.5 var(--mono); color: var(--muted); }
.note-body { max-width: 76ch; }
.p-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 34px; padding: 14px 16px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); font: 400 11.5px/1.5 var(--mono); color: var(--muted); }
.p-foot b { color: var(--ink); font-weight: 500; }
.p-foot a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.p-foot a:hover, .p-foot a:focus-visible { border-color: var(--on); outline: none; }
.p-foot .right { margin-left: auto; }

/* ---------- plain pages ---------- */
.plain { padding: clamp(28px, 4vw, 52px) 0 40px; display: grid; gap: 14px; }
.plain h1 { font: 600 clamp(30px, 3.8vw, 46px)/1.06 var(--sans); letter-spacing: -.03em; max-width: 24ch; }
.plain .body-copy { max-width: 76ch; display: grid; gap: 1em; color: var(--ink-2); }
.plain .body { margin-top: 8px; }
.plain .body-copy h2 { margin-top: .6em; font: 600 24px/1.2 var(--sans); letter-spacing: -.015em; color: var(--ink); scroll-margin-top: 20px; }
.plain .body-copy h2:first-child { margin-top: 0; }
.plain .body-copy ul { margin: 0 0 0 1.2em; }
.plain .body-copy li { margin: .3em 0; }
.plain .body-copy pre.code { white-space: pre-wrap; }
.twins { list-style: none; display: grid; gap: 0; margin: 0 !important; }
.twins li { padding: 10px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.twins li span { color: var(--ink); }
.twins a { font: 400 13px/1.5 var(--mono); word-break: break-all; color: var(--ink-2); }
.plain .verbs { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 !important; }
.plain .verbs li { padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); display: grid; gap: 6px; }
.plain .verbs .kind { justify-self: start; }
.plain .verbs b { font: 600 17px/1.2 var(--sans); color: var(--ink); }
.plain .verbs p { font-size: 14px; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 30; transform: translateX(-50%); padding: 10px 16px; border-radius: 6px; background: var(--ink); color: var(--ground); font: 500 12px/1.4 var(--mono); letter-spacing: .03em; max-width: min(90vw, 560px); text-align: center; }
.toast[hidden] { display: none; }

@media (max-width: 960px) {
  .masthead { flex-wrap: wrap; }
  .menu { margin-left: 0; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .body { grid-template-columns: 1fr; }
  .index { display: none; }
  .plain .verbs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; }
  .prompt-row { grid-template-columns: auto 1fr; }
  .prompt-row .hint { display: none; }
  .toggle { display: flex; width: 100%; }
  .toggle button { flex: 1; padding: 8px 6px; }
  .install .cmd { grid-template-columns: 1fr; }
  .install .i-copy { padding: 9px 14px; }
  .theme button { padding: 6px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
  .card, .btn, .a-copy, pre.code .copy { transition: none; }
}

/* ---------- print: both pages, the agent's as a light box ---------- */
@media print {
  @page { margin: 14mm 12mm 18mm; }
  html, body { background: #fff !important; color: #000; font-size: 11pt; }
  .masthead .menu, .masthead .theme, .actions, .install, .controls, .a-copy, .toast, .status, .index, pre.code .copy { display: none !important; }
  .masthead { border-color: #000; }
  .view, .masthead { width: 100%; }
  .body { display: flex; flex-direction: column; }
  html[data-side] .step .you, html[data-side] .step .agent, html[data-side] .intro { display: block !important; }
  .step { break-inside: avoid; }
  .step .agent { background: #f2f3f5 !important; color: #000; border: 1px solid #999; font-size: 9pt; break-inside: avoid; }
  .step .agent p, .step .agent li, .agent .a-head, .agent .ask b, .agent .report b, .agent .checks li::before { color: #000; }
  .agent pre.code, .step .agent p code, .step .agent li code { background: #e6e6e6 !important; color: #000; border-color: #999; }
  .agent .ask { background: #fff; border-left-color: #000; }
  pre.code { break-inside: avoid; white-space: pre-wrap; background: #f3f3f3; border-color: #999; padding-right: 14px; color: #000; }
  .p-foot { border-color: #000; background: #fff; color: #000; }
  a { text-decoration: none; color: #000; }
}