:root { color-scheme: light; font-family: system-ui, sans-serif; color: #182f3c; background: #f3f5f3; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1440px; margin: auto; padding: 36px 32px; }
header { border-bottom: 1px solid #cdd8d4; padding-bottom: 18px; }
.eyebrow { font-size: 12px; letter-spacing: 2px; color: #426b66; font-weight: 700; }
h1 { font-size: clamp(30px, 4vw, 48px); margin: 12px 0; letter-spacing: -1.5px; }
h1 span { color: #218572; }
header p { margin: 8px 0; }
.version, footer { font-size: 13px; color: #4b6267; }
a { color: #08665b; text-underline-offset: 3px; }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 18px 0; }
button, select { font: inherit; font-size: 14px; border: 1px solid #aebfba; border-radius: 6px; padding: 9px 14px; background: white; color: inherit; }
button { cursor: pointer; }
button.primary { background: #126f60; color: white; border-color: #126f60; }
button:disabled { opacity: .5; cursor: default; }
.live-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }
.live-toggle input { width: 17px; height: 17px; accent-color: #126f60; }
#live-note { margin: -5px 0 16px; }
:focus-visible { outline: 3px solid #d89628; outline-offset: 3px; }
.editors { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.panel { background: white; border: 1px solid #c4d1cc; border-radius: 8px; overflow: hidden; }
.panel label { display: block; padding: 12px 16px; background: #e6eeea; font-weight: 650; font-size: 14px; }
.line-count { float: right; font-weight: 400; color: #4b6267; }
.CodeMirror { height: 450px; font: 14px/1.65 Consolas, monospace; color: #193742; }
.CodeMirror-scroll { min-height: 150px; }
.CodeMirror-gutters { background: #f5f8f6; border-right: 1px solid #e0e7e3; }
.CodeMirror-focused { outline: 2px solid #d89628; outline-offset: -2px; }
.panel > textarea { display: block; width: 100%; height: 450px; padding: 18px; border: 0; resize: vertical; white-space: pre; overflow: auto; font: 14px/1.65 Consolas, monospace; color: #193742; background: white; tab-size: 4; }
#status { margin-left: auto; font-size: 14px; }
.diagnostics { border: 1px solid #c4d1cc; padding: 14px 18px; background: white; border-radius: 8px; }
h2 { font-size: 14px; margin: 0 0 8px; }
.diagnostics pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.6 Consolas, monospace; }
footer { margin-top: 20px; line-height: 1.6; }
[hidden] { display: none !important; }
.annotation-preview { margin-bottom: 18px; }
.annotation-preview textarea { display: block; width: 100%; height: 260px; margin: 12px 0; font: 14px/1.6 Consolas, monospace; white-space: pre; }
@media (max-width: 760px) { main { padding: 20px 14px; } .editors { grid-template-columns: 1fr; } .panel > textarea, .CodeMirror { height: 300px; } #status { margin-left: 0; width: 100%; } }