:root { color-scheme: dark; --bg: #0b0f14; --line: #202831; --text: #e2e8e9; --muted: #83918f; --mint: #83e5bd; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; background: var(--line); color: var(--text); font-family: Arial, Helvetica, sans-serif; }
main { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr); grid-template-rows: 1fr 1fr; gap: 1px; height: 100dvh; }
.panel { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg); }
h2 { position: absolute; inset: 0 0 auto; height: 32px; margin: 0; padding: 10px 14px; color: var(--muted); font-size: 11px; line-height: 12px; font-weight: 400; z-index: 2; background: var(--bg); }
.fly-panel { grid-row: 1 / 3; }
#out { position: absolute; inset: 32px 0 0; padding: 14px 22px 24px; overflow: auto; white-space: pre-wrap; word-break: break-word; font: 13px/1.7 "SFMono-Regular", Consolas, "Liberation Mono", monospace; scrollbar-width: thin; scrollbar-color: #354a40 transparent; }
#out .tok { color: var(--mint); } #out .bad { color: #f48b91; text-decoration: underline wavy #f48b9166; }
#out .cur { display: inline-block; width: 6px; height: 14px; vertical-align: -2px; background: var(--mint); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
canvas { display: block; } #brain, #stage { position: absolute; top: 32px; left: 0; width: 100%; height: calc(100% - 32px); }
#boot, .ph { position: absolute; inset: 32px 0 0; display: grid; place-items: center; background: var(--bg); color: var(--muted); font-size: 11px; z-index: 3; transition: opacity .3s; }
#boot .bw { width: auto; } #boot .bt { font-size: 0; } #boot .bt::before { content: 'Loading brain'; font-size: 11px; } #boot .bt span { font-size: 11px; margin-left: 8px; } #boot .bt b, #boot .br, #boot .bn, .ph i { display: none; }
.ph span { font-size: 0; } .ph span::after { content: 'Loading fly'; font-size: 11px; }
#boot.off, .ph.off { opacity: 0; pointer-events: none; }
:focus-visible { outline: 1px solid var(--mint); outline-offset: -2px; }
@media (max-width: 700px) { main { height: auto; min-height: 100dvh; grid-template-columns: 1fr; grid-template-rows: minmax(440px, 65dvh) repeat(2, minmax(300px, 42dvh)); } .fly-panel { grid-row: auto; } #out { font-size: 12px; padding: 12px 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.source-bar { position: absolute; inset: 0 0 auto; height: 32px; display: flex; align-items: center; gap: 16px; padding: 0 10px 0 14px; background: var(--bg); z-index: 4; }
.source-bar h2 { position: static; height: auto; padding: 0; flex: none; }
#docs-form { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
#docs-url { flex: 1; min-width: 0; height: 24px; padding: 3px 7px; color: var(--text); background: #111a20; border: 1px solid #28353d; border-radius: 3px; font: 10px monospace; }
#docs-url::placeholder { color: #657574; } #read-url { padding: 3px 8px; border: 0; border-radius: 3px; background: #233d32; color: var(--mint); font: 10px Arial, sans-serif; cursor: pointer; }
#docs-presets { display: flex; gap: 5px; flex: none; }
#docs-presets button { padding: 3px 7px; border: 1px solid #28353d; border-radius: 3px; background: #111a20; color: var(--muted); font: 10px Arial, sans-serif; cursor: pointer; white-space: nowrap; }
#docs-presets button:hover { color: var(--mint); border-color: #2f4a3f; }
@media (max-width: 900px) { #docs-presets { display: none; } }
#output-heading { display: flex; align-items: center; gap: 8px; }
#output-filename { color: var(--text); font-family: monospace; font-size: 10px; }
#mode-label { color: var(--mint); font-size: 9px; letter-spacing: .08em; }
#diff-toggle { margin-left: auto; padding: 2px 7px; border: 1px solid #28353d; border-radius: 3px; background: #111a20; color: var(--mint); font: 10px Arial, sans-serif; cursor: pointer; }
#out.diff { font-size: 12.5px; }
#out .dline { display: block; } #out .dline.eq { color: var(--muted); } #out .dline.del { color: #f48b91; background: rgba(244,139,145,.08); } #out .dline.ins { color: var(--mint); background: rgba(131,229,189,.07); }
#out .dline.del::before { content: "− "; } #out .dline.ins::before { content: "+ "; } #out .dline.eq::before { content: "  "; }
#read-message { position: absolute; top: 32px; left: 0; right: 0; padding: 8px 14px; z-index: 5; color: var(--text); background: #17231fed; font-size: 11px; }
#read-message.error { color: #f48b91; }

.fly-vision { position: absolute; bottom: 16px; left: 16px; width: 156px; margin: 0; padding: 10px; border: 1px solid #ffffff18; border-radius: 8px; background: #0b0f14e8; pointer-events: none; }
.fly-vision figcaption { color: var(--text); font-size: 11px; }
.fly-vision figcaption span { float: right; color: var(--muted); font-size: 10px; }
#eye { width: 100%; height: auto; margin-top: 6px; }
@media (max-width: 700px) { .fly-vision { width: 112px; left: 10px; bottom: 10px; padding: 8px; } .fly-vision figcaption span { display: none; } }