:root { --theme-background: #eef2f6; --theme-text: #172234; --theme-header: #19324a; --theme-divider: #ccd5dc; --theme-button-border: #aab8c2; --theme-focus: #245a71; font-family: Inter, "Noto Sans SC", system-ui, sans-serif; color: var(--theme-text); background: var(--theme-background); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
header { display: flex; justify-content: space-between; padding: 0.8rem 1.2rem; color: white; background: var(--theme-header); }
header a { color: white; }
main { display: grid; grid-template-columns: 18rem minmax(0, 1fr); min-height: calc(100vh - 3rem); }
aside { display: grid; align-content: start; gap: 1rem; padding: 1.2rem; border-right: 1px solid var(--theme-divider); background: white; }
label { display: grid; gap: 0.35rem; font-weight: 600; }
select, input, button, textarea { font: inherit; }
select, input, button { width: 100%; padding: 0.55rem; border: 1px solid var(--theme-button-border); border-radius: 0.4rem; background: white; }
select:focus-visible, input:focus-visible, button:focus-visible, textarea:focus-visible { outline: 3px solid var(--theme-focus); outline-offset: 1px; }
button { cursor: pointer; }
#publish { color: white; border-color: #245a71; background: #245a71; }
section { display: grid; grid-template-rows: auto 1fr; gap: 0.5rem; padding: 1.2rem; }
textarea { width: 100%; min-height: 32rem; padding: 1rem; border: 1px solid #aab8c2; border-radius: 0.5rem; resize: none; font-family: "SFMono-Regular", Consolas, monospace; line-height: 1.45; }
#status { min-height: 2.5rem; color: #315d42; }
details { display: grid; gap: 0.65rem; padding-top: 0.5rem; border-top: 1px solid var(--theme-divider); }
details > * { margin-top: 0.65rem; }
summary { cursor: pointer; font-weight: 700; }
#theme-preview { padding: 0.6rem; border-left: 2px solid var(--theme-focus); background: #f6f8fa; font-size: var(--sentence-font-size, 1.5rem); }
@media (max-width: 760px) { main { grid-template-columns: 1fr; } aside { border-right: 0; border-bottom: 1px solid #ccd5dc; } }
aside, #theme-preview { background: var(--theme-background); color: var(--theme-text); }
#status { color: var(--theme-text); }
header, header a { color: var(--theme-text); }