:root { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Avenir Next", Avenir, sans-serif; }
button, summary, a { touch-action: manipulation; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #b26924; outline-offset: 4px; }
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 20; padding: 12px; background: white; }
.skip-link:focus { top: 10px; }
.bbx-app-nav > div { display: flex; gap: 14px; align-items: center; padding: 10px 18px; min-height: 60px; }
.brand { color: inherit; font-weight: 600; text-decoration: none; white-space: nowrap; }
.bbx-app-nav { color: #fff8ec; }
.by { margin-left: auto; font-size: 12px; }
.by a { color: inherit; }
.bbx-place-pill { padding: 8px 14px; border: 1px solid; border-radius: 999px; cursor: pointer; list-style: none; }
.bbx-place-pill::-webkit-details-marker { display: none; }
.bbx-place-pill span { padding-left: 10px; }
#site-menu { position: relative; }
.site-menu-panel { position: absolute; z-index: 10; top: calc(100% + 4px); left: 0; width: 320px; max-width: calc(100vw - 110px); max-height: calc(100dvh - 80px); overflow: auto; padding: 4px 0; background: #fff; color: #2e2720; border: 1px solid #f3ebe0; border-radius: 8px; box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; font: 14px/20px ui-sans-serif, system-ui, sans-serif; }
.site-menu-panel ul { list-style: none; padding: 0; margin: 0; }
.site-menu-panel a { display: block; padding: 8px 12px; color: #6b5d4b; text-decoration: none; }
.site-menu-panel a:hover { background: #faf7f2; }
.site-menu-panel .menu-icon { width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; fill: currentColor; }
.site-menu-panel a[aria-current] { background: #f8f2e9; color: #2e2720; font-weight: 500; }
.site-menu-panel .menu-label, .site-menu-panel h2 { padding: 8px 12px 4px; margin: 0; font-size: 12px; font-weight: 400; text-transform: uppercase; color: #8b7358; }
#site-workspace { display: grid; grid-template-columns: 1fr 1fr; height: calc(100dvh - 60px); max-width: 1500px; margin: auto; }
#site-workspace.single { grid-template-columns: 1fr; max-width: 820px; }
.pane { min-width: 0; overflow: auto; padding: 16px 24px 48px; scrollbar-gutter: stable; }
.pane + .pane { border-left: 1px solid #c8c1b7; }
.pane-label { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-bottom: 8px; font-size: 12px; color: #62584c; }
/* The label sits on the scene, which may be dark or busy; a light chip keeps it legible. */
.pane-label a { color: #3a342c; padding: 6px 12px; border-radius: 999px; background: #fffaf0e6; box-shadow: 0 1px 2px #0002; text-decoration: none; }
.pane-label a:hover { text-decoration: underline; }
.bbx-card-surface { min-height: 260px; }
.card-fold { position: absolute; top: 0; right: 0; width: 44px; height: 44px; border-radius: 0 8px 0 6px; background: linear-gradient(225deg, var(--bbx-underlay) 49%, var(--bbx-quote-layer-paper) 51%); box-shadow: -2px 2px 3px #493c2825; z-index: 2; }
.site-enhanced .card-fold { display: none; }
.bbx-card-back { color: var(--bbx-ink); }
.card-back-kicker, .card-author-role { color: var(--bbx-ink-soft); font: 12px/1.4 "Avenir Next", Avenir, sans-serif; }
.card-back-kicker { margin: 0 0 5px; text-transform: uppercase; letter-spacing: .08em; }
.bbx-card-back > h2 { margin-top: 0; font-size: 1.55rem; }
.card-authorship-people { display: grid; gap: 18px; margin: 24px 0 30px; }
.card-author h3, .card-ai-contribution h3 { margin: 0 0 3px; font-size: 1rem; }
.card-author p { margin: 5px 0 0; line-height: 1.55; }
.card-author-role { margin-top: 0 !important; }
.card-ai-contribution { border-top: 1px solid var(--bbx-edge); padding-top: 20px; }
.bbx-card-back .card-ai-contribution dl { margin: 12px 0 0; line-height: 1.5; }
.bbx-card-back .card-provenance { border-top: 1px solid var(--bbx-edge); margin: 24px 0 0; padding-top: 16px; }
.card-provenance code { font-size: .8rem; }
.bbx-card-content { font-size: 18px; line-height: 1.65; overflow-wrap: anywhere; }
.bbx-card-content h1, .bbx-card-content > article > h2:first-child { font-size: 1.6rem; line-height: 1.3; margin: 0 26px 1.2rem 0; font-weight: 600; }
.bbx-card-content h2, .bbx-card-content h3 { font-size: 1.15em; line-height: 1.35; margin: 1.6em 0 .6em; }
.bbx-card-content p { margin: 0 0 1.1em; }
.bbx-card-content a { color: var(--bbx-pen); text-underline-offset: 4px; }
.bbx-card-content li { margin-bottom: .6em; }
.bbx-card-content ul, .bbx-card-content ol { padding-left: 24px; }
.bbx-card-content blockquote { margin: 1em 0; padding: .5em 1em; border-left: 2px solid var(--bbx-edge); background: #ffffff30; }
.bbx-card-content pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #ffffff55; padding: 16px; border-radius: 4px; font-size: 13px; }
.copy { display: block; font: inherit; margin-top: 10px; padding: 6px 12px; cursor: pointer; }
.next-places { border-top: 1px solid var(--bbx-edge); margin-top: 28px; padding-top: 18px; font: 14px/1.5 "Avenir Next", Avenir, sans-serif; }
.next-label { font-size: 12px; color: var(--bbx-ink-soft); margin-bottom: 8px; }
.next-places a { display: block; padding: 10px 0; min-height: 44px; }
.next-places a:first-of-type { font-weight: 600; font-size: 16px; }
::view-transition-group(*) { animation-duration: 300ms; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
@media (max-width: 700px) {
  .by { display: none; }
  .bbx-app-nav > div { padding: 10px 12px; }
  #site-workspace { display: block; }
  .pane { height: 100%; padding: 12px 14px 35px; }
  .pane.context { display: none; }
  .pane + .pane { border: 0; }
  .bbx-card-content { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*) { animation-duration: 0s !important; } }
@media print { header, .context, .pane-label, .next-places, .skip-link { display: none !important; } #site-workspace, .pane { display: block; height: auto; overflow: visible; padding: 0; } }

/* Agent prompts are visible reading surfaces with an explicit copy action. */
.agent-prompt { margin: 1.2rem 0 1.8rem; padding: 18px; border: 1px solid #b6cbd5; border-radius: 8px; background: #e0e9ee; color: #263a44; box-shadow: 0 2px 5px #30271915; }
.prompt-heading { display: flex; flex-direction: column; gap: 4px; font-family: "Avenir Next", Avenir, sans-serif; }
.prompt-audience { font-size: 12px; color: #34444e; }
.prompt-heading strong { font-size: 20px; }
.bbx-card-content .agent-prompt pre { background: transparent; border: 0; padding: 0; margin: 16px 0; line-height: 1.6; user-select: text; }
.prompt-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font: 13px/1.4 "Avenir Next", Avenir, sans-serif; }
.prompt-copy { padding: 10px 16px; min-height: 44px; border: 1px solid #304c79; border-radius: 999px; background: #304c79; color: #fff8ec; font: inherit; font-weight: 600; cursor: pointer; }
.prompt-copy:hover { background: #1d3355; }
.prompt-copy[hidden] { display: none; }
.prompt-status { flex: 1; min-width: 100px; }
/* Script failure must leave the full reading available, just like no script. */
.bbx-box-presentation:not(.site-enhanced) .fx-b[hidden="until-found"] { display: inline; content-visibility: visible; width: auto; height: auto; overflow: visible; }
.bbx-box-presentation:not(.site-enhanced) .fx-t { display: none; }
.bbx-card-content .agent-prompt pre { font: 15px/1.55 "Avenir Next", Avenir, sans-serif; }
.agent-prompt code { font: inherit; }

/* Model comparisons: a pill per model, a graded verdict, and a sample box. */
.model-pill { display: inline-block; padding: 0 0.5em; border: 1px solid; border-radius: 999px; font: 700 0.82em/1.6 "Avenir Next", Avenir, sans-serif; white-space: nowrap; vertical-align: 0.05em; }
.model-google { background: #dfe8f6; border-color: #9fb4d6; color: #1f3a66; }
.model-openai { background: #dcefe6; border-color: #93c2ab; color: #1d4a37; }
.verdict { font: 700 0.78em/1.7 "Avenir Next", Avenir, sans-serif; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.verdict-correct { color: #24501c; }
.verdict-okay { color: #6b5210; }
.verdict-failed { color: #8a2a18; }
.sample-spec { margin: 0.6rem 0 1rem; padding: 12px 16px; border-left: 4px solid #8a7a5c; border-radius: 4px; background: #f6efe0; color: #3b3222; }
.sample-spec p { margin: 0.35em 0; }
.sample-title { font: 600 0.8em/1.4 "Avenir Next", Avenir, sans-serif; text-transform: uppercase; letter-spacing: 0.05em; color: #6b5a3a; }