* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
html:not([data-load-state="ready"]) { overflow: hidden; }
html:not([data-load-state="ready"]) body > :not(#loading) { visibility: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body.lou-reader { margin: 0; background: #fff; color: #504b43; font-family: ui-sans-serif, system-ui, sans-serif; overflow-anchor: none; }
body.has-probes.lou-reader main { max-width: none; padding: 0; margin: 0; }
.lou-reader #stage { position: relative; margin: 58px 328px 0 max(154px, calc((100vw - 1140px) / 2)); padding: 0; max-width: 900px; overflow: clip; overflow-anchor: none; }
.lm-loading { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #fff; color: #8b8375; font: 12px/1.5 ui-sans-serif, system-ui, sans-serif; }
.lm-loading-spinner { width: 18px; height: 18px; border: 1.5px solid #e9e4db; border-top-color: #998568; border-radius: 50%; animation: lm-loading-spin 850ms linear infinite; }
.lm-loading p { margin: 0; }
.lm-loading button { padding: 7px 12px; border: 1px solid #e0d8cc; border-radius: 6px; background: #fffdf8; color: #65543b; font: inherit; cursor: pointer; }
.lm-loading button:focus-visible { outline: 2px solid #998568; outline-offset: 3px; }
[data-load-state="ready"] .lm-loading { pointer-events: none; }
@keyframes lm-loading-spin { to { transform: rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .lm-loading-spinner { animation: none; } }
.lou-source-window { width: 100%; display: flow-root; }
.lou-record-run { width: 100%; display: flow-root; }
.lou-ready .lou-record-run { position: absolute; top: 0; left: 0; contain: layout style paint; }
.lou-ready .lou-source-window[data-match] { will-change: transform; }
.lou-ready .lou-source-window { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: top left; contain: layout style paint; }
.lou-source-window.lou-clipped-before { mask-image: linear-gradient(to bottom, transparent, #000 12px); }
.lou-source-window.lou-clipped-after { mask-image: linear-gradient(to bottom, #000 calc(100% - 12px), transparent); }
.lou-source-window.lou-clipped-before.lou-clipped-after { mask-image: linear-gradient(to bottom, transparent, #000 12px, #000 calc(100% - 12px), transparent); }
.lou-source-window[hidden] { display: none; }
.lou-ready .lou-source-window[hidden] { display: flow-root; visibility: hidden; pointer-events: none; }
.lou-reader .lou-source-window article.message { margin: 0 0 18px; }
.lou-ready .lou-source-window article.message { transform-origin: top left; }
.lou-reader .message:target .transcript-bubble { box-shadow: none; }
.lou-reader .lou-current .thinking { border-color: #b8ab8f; box-shadow: 0 0 0 1px #ded3bc55; }
.lou-reader .thinking > summary[aria-disabled="true"] { cursor: default; }
::highlight(lou-matches) { background: #eee2b5; color: #443d2f; }
::highlight(lm-text-matches) { background: #efd984; color: #443d2f; }
.lou-gap { position: absolute; left: 16%; right: 0; top: 0; display: flex; align-items: center; justify-content: center; gap: 12px; pointer-events: none; color: #a69c8b; font: 10px/1.4 ui-sans-serif, system-ui, sans-serif; }
.lou-gap { z-index: 2; }
.lou-gap[hidden] { display: none; }
.lou-gap::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, #766f6012 0 1px, transparent 1px 3px); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); opacity: var(--lou-folded-texture-opacity, 0); }
.lou-gap span { position: relative; white-space: nowrap; font-variant-numeric: tabular-nums; background: #ffffffed; padding: 3px 10px; border-radius: 8px; box-shadow: 0 0 12px 8px #ffffffa8; }
.lou-compressed { pointer-events: none; user-select: none; }
.lou-snippet { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; }
.lou-snippet::before, .lou-snippet::after { content: ''; position: absolute; left: 16px; right: 16px; height: 1px; background: linear-gradient(to right, transparent, #c5b9a477 35%, #c5b9a477 65%, transparent); }
.lou-snippet::before { top: 0; }
.lou-snippet::after { bottom: 0; }
.lou-passage-landmark { position: absolute; top: 0; left: 8px; width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid #ddd5c8; border-radius: 6px; background: #fff; color: #9a8d77; font: 10px/1 ui-sans-serif, system-ui; font-variant-numeric: tabular-nums; pointer-events: none; }
.lou-passage-landmark[data-selected="true"] { color: #79571f; background: #f2e7ca; border-color: #c5ac79; }
.lou-passage-landmark[hidden] { display: none; }
.lou-source-preview { position: absolute; top: 0; left: 0; right: 0; z-index: 4; border: 1px solid #b38a48; border-radius: 3px; pointer-events: none; }
.lou-source-preview[hidden] { display: none; }
.lou-source-preview[data-rule="true"] { border: 0; border-radius: 0; background: #b38a48; }
.lou-source-preview > span { position: absolute; left: 8px; top: -19px; padding: 2px 5px; border-radius: 3px; background: #fffaf0; color: #805f2d; font: 10px/1.4 ui-sans-serif, system-ui; white-space: nowrap; }
.lou-handle-layer { position: absolute; top: 0; left: 0; right: 0; height: 0; z-index: 20; pointer-events: none; }
.lou-handle-wrap { position: absolute; left: 0; top: 0; width: 44px; height: 44px; }
.lou-handle-wrap[data-captured="true"] { position: fixed; }
.lou-reader .lou-handle-wrap[data-exposed="false"] .lou-handle { pointer-events: none; }
.lou-reader .lou-handle { position: absolute; inset: 0; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #86775f; pointer-events: auto; touch-action: none; user-select: none; cursor: ns-resize; display: grid; place-items: center; }
.lou-handle .lou-knob { width: 36px; height: 16px; display: grid; place-items: center; border: 1px solid #c5b9a4; background: #fffcf7; border-radius: 9px; box-shadow: 0 1px 4px #6653370c; transition: background-color 140ms; }
.lou-knob::before { content: ''; width: 13px; height: 5px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.lou-reader .lou-handle:hover, .lou-reader .lou-handle:active, .lou-reader .lou-handle:focus { background: transparent; box-shadow: none; }
.lou-reader .lou-handle[data-pointer-focus] { outline: none; }
.lou-handle:hover .lou-knob, .lou-handle:focus-visible:not([data-pointer-focus]) .lou-knob, .lou-handle[data-grabbed="true"] .lou-knob { background: #eee5d4; border-color: #9d896a; }
.lou-handle:focus-visible:not([data-pointer-focus]) { outline: 2px solid #b4a385; outline-offset: -3px; border-radius: 9px; }
.lou-handle-label { position: absolute; left: 47px; top: 14px; white-space: nowrap; font: 9px/1.5 ui-sans-serif, system-ui; color: #8b7c65; pointer-events: none; padding: 1px 4px; border-radius: 3px; background: #fffffff0; opacity: 0; transition: opacity 140ms; }
.lou-handle-wrap[data-engaged="true"] .lou-handle-label { opacity: 1; }
.lou-tether { position: absolute; left: 21.5px; width: 1px; top: 22px; border-left: 1px dashed #a8967666; transform-origin: top center; pointer-events: none; }
.lou-origin { position: absolute; left: 22px; width: 7px; height: 7px; transform: translate(-50%, -50%); border: 1px solid #9d896a; border-radius: 50%; background: #fff; pointer-events: none; }
.lou-reader[data-grabbing="true"] { cursor: ns-resize; user-select: none; }
#source-map { position: fixed; left: 24px; top: 26px; width: 110px; height: calc(100dvh - 40px); z-index: 6; }
.lou-reader .lou-source-map { width: 100%; }
@media(max-width:850px) { #source-map { left: 12px; width: 70px; } }
@media(max-width:600px) { #source-map { left: 7px; width: 58px; top: 22px; height: calc(100dvh - 36px); } }

.liquid-mythos .lm-transcript-header { max-width: 900px; margin: 46px 374px 0 max(154px, calc((100vw - 1140px) / 2)); }
.liquid-mythos .lm-transcript-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 4px; color: #25282b; font: 700 32px/1.2 ui-sans-serif, system-ui, sans-serif; letter-spacing: -.035em; }
.liquid-mythos .lm-transcript-title .lab-badge { margin-left: 0; }
.liquid-mythos .lm-transcript-header .lab-intro { max-width: none; }
.liquid-mythos .lm-transcript-header .lab-intro a { white-space: nowrap; }
.liquid-mythos #stage { margin-right: 374px; margin-top: 20px; }
.liquid-mythos #root { display: flow-root; }
body.liquid-mythos { min-height: 100dvh; }
.liquid-mythos .tool-request-details pre { max-height: none; overflow: visible; }
.lou-reader-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 8px; border-top: 1px solid #eee7dd; color: #9a8f7c; font: 10px/1.4 system-ui; }
.lou-reader-controls[hidden] { display: none; }
.lou-reader .lou-reader-controls button { border: 0; background: #fffefd; padding: 6px 8px; border-radius: 6px; color: #786952; font: inherit; cursor: pointer; }
.lou-reader-controls #reset-context:disabled { display: none; }
@media(max-width: 1100px) { .liquid-mythos #stage, .liquid-mythos .lm-transcript-header { margin-right: 28px; } .liquid-mythos #stage { padding-bottom: 260px; } }
@media(max-width:600px) { .liquid-mythos #stage, .liquid-mythos .lm-transcript-header { margin-left: 100px; margin-right: 12px; } .liquid-mythos .lm-transcript-header { margin-top: 24px; } .liquid-mythos:has(.lab-fal-toggle) .lm-transcript-header { margin-top: 60px; } .liquid-mythos .lm-transcript-title { font-size: 1.6rem; } }