:root { color-scheme: light; --paper: #f3f0e8; --ink: #18211c; --muted: #687069; --line: #c9cec7; --panel: rgba(255,255,255,.52); --accent: #e55332; --good: #27764b; --bad: #a6332a; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; overflow: hidden; color: var(--ink); background: linear-gradient(90deg, transparent 49.8%, rgba(24,33,28,.035) 50%, transparent 50.2%), var(--paper); font: 15px/1.5 "Avenir Next", Avenir, sans-serif; }
h2, p { margin: 0; }
h2, label, .method, .status { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
main { display: grid; grid-template-columns: minmax(230px,.75fr) minmax(360px,1.6fr) minmax(260px,1fr); height: calc(100vh - 77px); min-height: 0; }
section { min-width: 0; padding: 26px 28px; border-right: 1px solid var(--line); }
section:last-child { border-right: 0; }
h2 { margin-bottom: 24px; color: var(--muted); }
ol { margin: 0; padding: 0; list-style: none; counter-reset: api; }
.step { counter-increment: api; position: relative; padding: 16px 0 18px 42px; border-top: 1px solid var(--line); }
.step::before { content: "0" counter(api); position: absolute; left: 0; top: 17px; font: 600 13px/1 ui-monospace, monospace; color: var(--muted); }
.step.active::before { color: var(--accent); }.step.done::before { content: "✓"; color: var(--good); }.step.error::before { content: "!"; color: var(--bad); }
.step.disabled { opacity: .45; }.step.disabled::before { color: var(--muted); }
.method { margin-bottom: 5px; }.path { color: var(--muted); font: 13px/1.4 ui-monospace, monospace; overflow-wrap: anywhere; }
.pages-note { margin-top: 26px; padding: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }.pages-note strong { color: var(--ink); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }.pages-note p { margin-top: 5px; line-height: 1.45; }
.catalogue-link { display: inline-block; margin-top: 12px; color: var(--accent); font-weight: 700; text-decoration: none; }.catalogue-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.output-panel { overflow-y: auto; overscroll-behavior: contain; background: var(--panel); }.response-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 24px; margin-bottom: 18px; color: var(--muted); }.response-actions { display: flex; align-items: center; gap: 14px; }.raw-toggle { min-height: auto; border: 0; padding: 4px 0; color: var(--muted); font-size: 10px; text-decoration: underline; text-underline-offset: 3px; background: none; cursor: pointer; }.status.good { color: var(--good); }.status.bad { color: var(--bad); }
pre { min-height: 300px; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #253129; font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; }[hidden] { display: none !important; }
.plan-overview { display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 1px; margin-bottom: 24px; border: 1px solid var(--line); background: var(--line); }.plan-stat { padding: 13px; background: #f8f6f0; }.plan-stat span { display: block; color: var(--muted); font-size: 11px; }.plan-stat strong { display: block; margin-top: 3px; font-size: 14px; }.focus-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 24px; }.focus-list span { padding: 5px 8px; background: #e5e8e1; font-size: 12px; }.plan-day { padding: 17px 0; border-top: 1px solid var(--line); }.plan-day h3 { margin: 0 0 10px; font-size: 14px; }.plan-day ul { margin: 0; padding-left: 18px; }.plan-day li { margin: 8px 0; }.plan-day small { display: block; color: var(--muted); }
#inputs { overflow-y: auto; overscroll-behavior: contain; }.field { margin-bottom: 20px; }label { display: block; margin-bottom: 7px; color: var(--muted); }input:not([type="radio"]):not([type="checkbox"]), select { width: 100%; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 9px 0; color: var(--ink); background: transparent; font: inherit; outline: none; }input:not([type="radio"]):not([type="checkbox"]):focus, select:focus { border-bottom: 2px solid var(--accent); padding-bottom: 8px; }
.questionnaire { padding: 20px 6px 20px 0; border-top: 1px solid var(--line); }.questionnaire-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 15px; }.questionnaire-head h2 { margin: 0; }.questionnaire-state { color: var(--muted); font-size: 11px; }.questionnaire-api { margin-bottom: 16px; color: var(--muted); font: 11px/1.5 ui-monospace, monospace; }.questionnaire-action { width: 100%; margin-top: 16px; }.question { margin: 0; padding: 16px 0; border: 0; border-top: 1px solid var(--line); }.question legend { padding: 0; font-weight: 700; }.question p { margin: 5px 0 11px; color: var(--muted); font-size: 12px; }.choice { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; color: var(--ink); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }.choice input { flex: 0 0 auto; margin: 3px 0 0; }.question-text { margin-top: 9px; }.question-error { margin-top: 8px; color: var(--bad); font-size: 12px; }
.profile-panel { margin: -4px 0 20px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.profile-panel .questionnaire-head { margin-bottom: 10px; }.profile-details { display: grid; gap: 6px; margin: 0; }.profile-details div { display: grid; grid-template-columns: 92px 1fr; gap: 8px; font-size: 12px; }.profile-details dt { color: var(--muted); }.profile-details dd { margin: 0; overflow-wrap: anywhere; }.generation-summary { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.45; }
footer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 16px 28px; border-top: 1px solid var(--ink); background: rgba(243,240,232,.94); backdrop-filter: blur(10px); }button { min-height: 44px; border: 1px solid var(--ink); padding: 0 20px; color: var(--ink); background: transparent; font: 700 12px/1 "Avenir Next", Avenir, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }button.primary { border-color: var(--accent); color: white; background: var(--accent); }button:hover:not(:disabled) { transform: translateY(-1px); }button:focus-visible { outline: 3px solid rgba(229,83,50,.3); outline-offset: 2px; }button:disabled { cursor: not-allowed; opacity: .45; }
@media (max-width: 860px) { body { overflow: auto; } main { grid-template-columns: 1fr; height: auto; } section { border-right: 0; border-bottom: 1px solid var(--line); }.output-panel { min-height: 420px; overflow: visible; }#inputs { overflow: visible; }footer { justify-content: stretch; }footer button { flex: 1; } }