:root {
  --ink: #d7f9ee;
  --muted: #83a99f;
  --signal: #67f7c3;
  --warning: #f4c36a;
  --void: #07100f;
  --panel: #0c1816;
  --line: #24453e;
  font-family: "Cascadia Mono", "IBM Plex Mono", Consolas, monospace;
  color: var(--ink);
  background: var(--void);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 75% -10%, #17332c 0, var(--void) 38rem); }
button, input { font: inherit; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--signal); color: var(--void); padding: .7rem; }
.masthead { min-height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem clamp(1rem, 4vw, 4rem); border-bottom: 1px solid var(--line); letter-spacing: .1em; }
.masthead strong { display: block; font-size: clamp(1rem, 2vw, 1.4rem); }
.eyebrow, .panel-label, .discipline { color: var(--muted); font-size: .72rem; letter-spacing: .14em; }
.status { color: var(--signal); font-size: .75rem; }
.status span { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--signal); box-shadow: 0 0 1rem var(--signal); }
main { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(2rem, 6vw, 5rem) 0; }
.hero { max-width: 820px; margin-bottom: 2rem; }
h1, h2, h3 { font-weight: 500; letter-spacing: -.025em; }
h1 { font-size: clamp(2.1rem, 6vw, 4.6rem); line-height: 1; margin: .6rem 0 1.2rem; }
.hero > p:last-child { color: var(--muted); line-height: 1.7; max-width: 68ch; }
.protocol { color: var(--signal); font-size: .78rem; line-height: 1.6; }
.panel { border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 94%, transparent); padding: clamp(1.2rem, 3vw, 2rem); box-shadow: inset 0 1px 0 rgb(255 255 255 / .03); }
.panel h2 { margin: .65rem 0; }
.panel > p { color: var(--muted); line-height: 1.6; }
.prompter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.prompter-card { border: 1px solid var(--line); padding: 1.25rem; background: #091411; }
.prompter-card h3 { font-size: 1.35rem; margin: .25rem 0; }
.prompter-card > p:not(.protocol):not(.discipline) { color: var(--muted); min-height: 3.6rem; line-height: 1.45; }
button, .button-link { display: inline-block; border: 1px solid var(--signal); background: transparent; color: var(--signal); padding: .72rem 1rem; cursor: pointer; text-decoration: none; }
button:hover, button:focus-visible, .button-link:hover, .button-link:focus-visible { background: var(--signal); color: var(--void); outline: 2px solid var(--ink); outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .45; background: transparent; color: var(--muted); border-color: var(--line); }
button.primary { background: var(--signal); color: var(--void); }
.workspace { display: grid; grid-template-columns: minmax(240px, .34fr) minmax(0, 1fr); gap: 1rem; }
dl { margin: 1.5rem 0 0; }
dl div { border-top: 1px solid var(--line); padding: .8rem 0; }
dt { color: var(--muted); font-size: .7rem; }
dd { margin: .3rem 0 0; }
.pending { border: 1px dashed var(--line); color: var(--warning); margin-top: 2rem; padding: 1rem; }
.console-panel { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.prompt-block { border-left: 2px solid var(--signal); padding: .5rem 1rem; background: #07110f; }
.prompt-state { color: var(--warning); font-size: .72rem; letter-spacing: .08em; }
.message-stream { list-style: none; margin: 1.5rem 0; padding: 0; max-height: 36rem; overflow: auto; }
.message { border-top: 1px solid var(--line); padding: 1rem 0; }
.message.failed { border-left: 2px solid #f06f69; padding-left: 1rem; }
.message.assistant { border-left: 2px solid var(--signal); padding-left: 1rem; }
.message p, .message li { color: var(--muted); line-height: 1.55; }
.message .command, .message .result-status, .message strong { color: var(--ink); }
.message .result-status, .confidence { font-size: .75rem; letter-spacing: .07em; }
.message pre { color: var(--signal); white-space: pre-wrap; }
.empty-history { color: var(--muted); padding: 1rem 0; }
.command-form { border-top: 1px solid var(--line); padding-top: 1rem; }
.command-form label { display: block; color: var(--muted); font-size: .72rem; margin-bottom: .5rem; }
.command-form > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; }
.command-form input { width: 100%; border: 1px solid var(--line); background: var(--void); color: var(--ink); padding: .72rem; }
.command-form input:focus { outline: 2px solid var(--signal); outline-offset: 2px; }
.command-form small { display: block; color: var(--muted); margin-top: .6rem; line-height: 1.45; }
.assistance-form { border-top: 1px dashed var(--line); padding: 1rem 0; }
.assistance-form small { display: block; color: var(--muted); margin-top: .55rem; }
.transient-error { color: var(--warning); }
.lifecycle-notice { border: 1px solid var(--signal); color: var(--signal); padding: 1rem; }
.lifecycle-controls { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; display: grid; gap: .65rem; }
.lifecycle-controls button { width: 100%; }
.achievement-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.achievement-list li { border-top: 1px dashed var(--line); padding: .75rem 0; }
.achievement-list strong, .achievement-list small { display: block; }
.achievement-list small, .lifecycle-controls small { color: var(--muted); line-height: 1.45; margin-top: .35rem; }
.private-log { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); line-height: 1.7; }
.reset-control { color: var(--muted); font-size: .78rem; }
.reset-control summary { color: #f06f69; cursor: pointer; }
.reset-control input { width: 100%; margin: .5rem 0; padding: .55rem; color: var(--ink); background: var(--void); border: 1px solid var(--line); }
.error-panel { max-width: 700px; margin: 4rem auto; }
footer { padding: 1.5rem clamp(1rem, 4vw, 4rem); color: var(--muted); border-top: 1px solid var(--line); font-size: .68rem; letter-spacing: .1em; }

@media (max-width: 720px) {
  .masthead { align-items: flex-start; flex-direction: column; }
  .prompter-grid, .workspace { grid-template-columns: 1fr; }
  .prompter-card > p:not(.protocol):not(.discipline) { min-height: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  .status span { animation: pulse 2s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: .45; } }
}