* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: var(--font-body); }
body {
min-width: 320px;
margin: 0;
background:
linear-gradient(90deg, transparent 0 3.4rem, rgba(155, 65, 40, 0.16) 3.4rem 3.5rem, transparent 3.5rem),
repeating-linear-gradient(var(--paper) 0 31px, rgba(32, 95, 73, 0.09) 31px 32px);
}
button, input, select { font: inherit; }
button, select, input { min-height: 44px; border: 1px solid var(--rule-strong); border-radius: var(--radius); }
button { padding: var(--space-2) var(--space-4); color: var(--paper-raised); background: var(--field-green); cursor: pointer; }
button:hover { background: var(--ink); }
button:disabled { cursor: not-allowed; opacity: 0.55; }
input, select { width: 100%; padding: var(--space-2) var(--space-3); color: var(--ink); background: var(--paper-raised); }
label, .kicker { color: var(--ink-faint); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.skip-link { position: fixed; left: var(--space-4); top: -5rem; z-index: 20; padding: var(--space-3); color: white; background: var(--focus-ring); }
.skip-link:focus { top: var(--space-4); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) clamp(var(--space-4), 4vw, var(--space-6));
border-bottom: 1px solid var(--rule-strong);
background: color-mix(in srgb, var(--paper-raised) 92%, transparent);
}
.brand-lockup { display: flex; align-items: center; gap: var(--space-3); }
.brand-lockup div { display: grid; }
.brand-lockup strong { font-family: var(--font-display); font-size: 1.25rem; }
.brand-lockup span { color: var(--ink-soft); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }
.brand-mark {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border: 2px solid var(--ink);
color: var(--ink);
font-family: var(--font-display);
font-size: 1.35rem;
}
.connection-state { margin: 0; color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.8rem; }
.connection-state::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: var(--space-2); border-radius: 50%; background: var(--amber); }
.connection-state[data-tone="ready"]::before { background: var(--field-green); }
.connection-state[data-tone="danger"]::before { background: var(--rust); }
main { width: min(var(--content-width), 100%); margin: auto; padding: var(--space-4) clamp(var(--space-4), 4vw, 3rem) 4rem; }
.project-controls {
display: grid;
grid-template-columns: minmax(220px, 1fr) auto minmax(180px, 0.6fr);
gap: var(--space-3);
align-items: end;
margin-bottom: var(--space-4);
padding: var(--space-4);
border: 1px solid var(--rule-strong);
background: var(--paper-raised);
box-shadow: var(--shadow);
}
.control-field { display: grid; gap: var(--space-2); }
.project-controls details { align-self: center; color: var(--ink-soft); }
.project-controls summary, .developer-raw summary { cursor: pointer; font-weight: 700; }
#manual-form { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.manual-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); }
.journey-state {
display: flex;
gap: var(--space-3);
align-items: start;
margin-bottom: var(--space-4);
padding: var(--space-3) var(--space-4);
border-left: 4px solid var(--amber);
background: var(--amber-soft);
}
.journey-state[data-tone="ready"] { border-color: var(--field-green); background: var(--field-green-soft); }
.journey-state[data-tone="error"], .journey-state[data-tone="auth"] { border-color: var(--rust); background: var(--rust-soft); }
.journey-state p { margin: var(--space-1) 0 0; color: var(--ink-soft); }
.state-pin { width: 0.72rem; height: 0.72rem; margin-top: 0.3rem; border: 2px solid currentColor; border-radius: 50%; }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.summary-grid article { padding: var(--space-4); border: 1px solid var(--rule-strong); background: var(--paper-raised); }
.summary-grid span { display: block; color: var(--ink-faint); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; }
.summary-grid strong { display: block; margin-top: var(--space-2); font-family: var(--font-display); font-size: 2rem; font-weight: 500; }
.insight-panel { margin-bottom: var(--space-4); border: 1px solid var(--rule-strong); background: var(--ink); color: var(--paper-raised); box-shadow: var(--shadow); }
.insight-heading { padding: var(--space-3) var(--space-4); border-bottom: 1px solid color-mix(in srgb, var(--paper) 25%, transparent); }
.insight-heading p, .insight-heading h2 { margin: 0; }
.insight-heading .kicker { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.insight-heading h2 { margin-top: var(--space-1); font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; }
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.insight-grid article { padding: var(--space-4); border-right: 1px solid color-mix(in srgb, var(--paper) 25%, transparent); }
.insight-grid article:last-child { border-right: 0; }
.insight-grid span { color: color-mix(in srgb, var(--paper) 68%, transparent); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.insight-grid strong { display: block; margin-top: var(--space-2); font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; }
.insight-grid p { margin: var(--space-1) 0 0; color: color-mix(in srgb, var(--paper) 72%, transparent); font-size: 0.78rem; }
.observe-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr); gap: var(--space-4); align-items: start; }
.notebook-panel { min-width: 0; border: 1px solid var(--rule-strong); background: var(--paper-raised); box-shadow: var(--shadow); }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--rule); }
.panel-heading p, .panel-heading h2 { margin: 0; }
.panel-heading h2 { margin-top: var(--space-1); font-family: var(--font-display); font-size: 1.55rem; font-weight: 500; }
.panel-heading > span { color: var(--ink-faint); font-family: var(--font-mono); font-size: 0.74rem; }
.table-wrap { overflow: auto; }
table { width: 100%; min-width: 760px; border-collapse: collapse; }
caption { padding: var(--space-3) var(--space-4); color: var(--ink-faint); text-align: left; }
th, td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--rule); text-align: left; vertical-align: top; }
th { color: var(--ink-faint); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
td { color: var(--ink-soft); font-size: 0.86rem; }
td strong { color: var(--ink); }
.session-id { display: block; margin-top: var(--space-1); color: var(--ink-faint); font-family: var(--font-mono); font-size: 0.7rem; }
.inspect-button { min-height: 36px; padding: var(--space-1) var(--space-3); color: var(--field-green); background: transparent; border-color: var(--field-green); }
.inspect-button[aria-current="true"] { color: var(--paper-raised); background: var(--field-green); }
.status-label { display: inline-block; padding: var(--space-1) var(--space-2); border: 1px solid var(--rule-strong); font-family: var(--font-mono); font-size: 0.72rem; }
.status-label[data-tone="danger"] { color: var(--rust); border-color: var(--rust); }
.status-label[data-tone="ready"] { color: var(--field-green); border-color: var(--field-green); }
.empty-note { margin: 0; padding: var(--space-5); color: var(--ink-soft); }
.detail-panel { position: sticky; top: var(--space-4); display: grid; max-height: calc(100vh - (2 * var(--space-4))); overflow: auto; }
.detail-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); margin: 0; padding: var(--space-4); border-bottom: 1px solid var(--rule); }
.detail-facts dt { color: var(--ink-faint); font-size: 0.75rem; text-transform: uppercase; }
.detail-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.detail-block { padding: var(--space-4); border-bottom: 1px solid var(--rule); }
.detail-block h3 { margin: 0 0 var(--space-3); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; }
.detail-list, .plain-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.detail-list li, .plain-list li { padding: var(--space-2); border-left: 2px solid var(--rule-strong); color: var(--ink-soft); background: color-mix(in srgb, var(--paper) 72%, white); }
.detail-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); }
.detail-list time { color: var(--ink-faint); font-family: var(--font-mono); font-size: 0.72rem; }
.detail-list span { grid-column: 2; overflow-wrap: anywhere; }
.detail-list code { grid-column: 1 / -1; overflow-wrap: anywhere; white-space: pre-wrap; }
.prompt-text { margin: 0; color: var(--ink); line-height: 1.5; white-space: pre-wrap; }
.span-row { margin-left: calc(var(--depth) * 0.8rem); }
.developer-raw { margin-top: var(--space-4); padding: var(--space-4); border: 1px dashed var(--rule-strong); background: var(--paper-raised); }
.developer-raw p { color: var(--ink-soft); }
.developer-raw pre { max-height: 480px; overflow: auto; padding: var(--space-4); color: var(--paper-raised); background: var(--ink); white-space: pre-wrap; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
button, .inspect-button { transition: background-color 140ms, color 140ms, border-color 140ms; }
.connection-state::before { animation: breathe 1.8s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: 0.35; } }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}
@media (max-width: 980px) {
.observe-grid { grid-template-columns: 1fr; }
.detail-panel { position: static; max-height: none; }
.project-controls { grid-template-columns: 1fr auto; }
.project-controls details { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
body { background: repeating-linear-gradient(var(--paper) 0 31px, rgba(32, 95, 73, 0.09) 31px 32px); }
main { padding: var(--space-5) var(--space-3) var(--space-6); }
.site-header, .panel-heading { align-items: start; }
.summary-grid, .project-controls { grid-template-columns: 1fr 1fr; }
.insight-grid { grid-template-columns: 1fr; }
.insight-grid article { border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--paper) 25%, transparent); }
.control-field, .project-controls details { grid-column: 1 / -1; }
.manual-row { grid-template-columns: 1fr; }
}