:root { color-scheme: light; --ink: #17263b; --muted: #667784; --paper: #f5f3ed; --line: #d9e1df; --green: #155f4b; --coral: #d65e48; --lime: #d4ff60; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
button, textarea { font: inherit; }
button { cursor: pointer; }
.shell { width: min(100% - 36px, 1020px); margin: auto; }
.topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dfe4dc; }
.brand-link { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.brand-mark { display: block; width: 36px; height: 36px; flex: 0 0 36px; }
.wordmark { color: var(--ink); font-size: 20px; font-weight: 850; letter-spacing: -1px; }.wordmark span { color: var(--coral); }
.local-badge,.eyebrow { color: #74877f; font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.hero { padding: 48px 0 34px; max-width: 720px; }.hero .eyebrow { margin: 0 0 12px; }
h1,h2,p { margin-top: 0; } h1 { margin-bottom: 16px; font: 500 clamp(44px, 8vw, 76px)/.98 Georgia, "Times New Roman", serif; letter-spacing: -.055em; } h1 em { color: var(--coral); font-weight: 500; }
.intro { max-width: 620px; color: #536573; font-size: 18px; margin-bottom: 0; }
.workspace,.result,.handoff { border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 12px 35px #1d3a2910; padding: clamp(20px,4vw,32px); margin-bottom: 20px; }
.workspace-heading,.result-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }.workspace-heading .eyebrow,.result-heading .eyebrow { margin-bottom: 3px; }.workspace-heading h2,.result-heading h2,.handoff h2 { margin: 0; font-size: 22px; letter-spacing: -.035em; }.limit { color: var(--muted); font-size: 13px; }
.dropzone { min-height: 82px; border: 1px dashed #9bb6a6; border-radius: 11px; background: #f7faf5; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--green); cursor: pointer; margin-bottom: 14px; }.dropzone span { color: var(--muted); font-size: 13px; }.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }.dropzone:focus-within { outline: 3px solid #9abd65; outline-offset: 3px; }
textarea { display: block; min-height: 230px; width: 100%; padding: 16px; resize: vertical; border: 1px solid #ccd7d4; border-radius: 10px; color: #1d2c41; background: #fbfcfa; font: 13px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; }.textarea:focus,textarea:focus { outline: 3px solid #d8eea6; border-color: #789761; }
.input-footer { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; margin: 8px 1px 16px; }.text-button { color: var(--green); padding: 3px 7px; background: transparent; border: 0; text-decoration: underline; text-underline-offset: 3px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; }.primary,.secondary,.view-button { min-height: 44px; border-radius: 9px; padding: 0 18px; font-weight: 750; }.primary { color: #fff; background: var(--green); border: 1px solid var(--green); }.secondary,.view-button { color: var(--ink); background: #fff; border: 1px solid #cbd7d4; }.primary:disabled,.secondary:disabled { opacity: .45; cursor: not-allowed; }.primary:hover:not(:disabled) { background: #104b3b; }.secondary:hover:not(:disabled),.view-button:hover { background: #f2f7f1; }
.status { min-height: 25px; margin: 13px 0 0; color: var(--muted); font-size: 13px; }.status.error { color: #a4382c; font-weight: 650; }.status.success { color: #17684d; }
.view-switch { display: flex; gap: 7px; }.view-button { min-height: 37px; padding: 0 14px; font-size: 13px; }.view-button.active { color: white; background: var(--ink); border-color: var(--ink); }
.output,.tree { min-height: 120px; max-height: 600px; overflow: auto; padding: 18px; border-radius: 10px; background: #17263b; color: #e7f0df; font: 13px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; }.tree { white-space: normal; }.tree details { margin-left: 17px; }.tree > details { margin-left: 0; }.tree summary { cursor: pointer; }.tree .key { color: #b8df87; }.tree .scalar { color: #eff3ec; }.tree-note { color: var(--muted); font-size: 12px; margin: 9px 0 0; }
.handoff { background: #e8f2ed; box-shadow: none; }.handoff .eyebrow { margin-bottom: 5px; }.handoff ol { padding-left: 22px; margin: 13px 0; }.handoff li { margin: 5px 0; }.handoff p:not(.eyebrow) { color: #506b60; font-size: 14px; margin-bottom: 12px; }.handoff a { color: var(--green); font-weight: 750; text-underline-offset: 4px; }
footer { padding: 15px 0 35px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }.hidden { display: none !important; }.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; }
@media (max-width: 640px) { .shell { width: min(100% - 24px, 1020px); }.topbar { height: 64px; }.hero { padding: 36px 0 25px; }.intro { font-size: 16px; }.workspace-heading,.result-heading { align-items: flex-start; }.workspace,.result,.handoff { border-radius: 12px; }.toolbar > button { flex: 1 1 40%; }.output,.tree { max-height: 430px; padding: 13px; font-size: 12px; }footer { flex-direction: column; } }