:root { color-scheme: light; --ink:#18221d; --muted:#647069; --paper:#f4f2eb; --panel:#fff; --accent:#185b43; --line:#d8ddd9; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); }
.site-header, main, footer { width:min(1180px, calc(100% - 2rem)); margin-inline:auto; }
.site-header { padding:3rem 0 1.5rem; display:flex; gap:2rem; align-items:end; justify-content:space-between; }
.site-header p { color:var(--muted); max-width:28rem; margin:0 0 .4rem; }
.eyebrow { color:var(--accent); font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
h1 { font-family:Georgia, serif; font-size:clamp(2rem, 5vw, 3.7rem); line-height:1; margin:.4rem 0 0; font-weight:500; }
.editor-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 6px 22px rgb(25 45 35 / 5%); }
label { display:block; padding:1rem 1.1rem; font-weight:700; border-bottom:1px solid var(--line); }
textarea { display:block; width:100%; min-height:52vh; resize:vertical; border:0; padding:1.1rem; font:1rem/1.65 Georgia, serif; color:var(--ink); background:transparent; outline:none; }
.result { display:block; width:100%; min-height:52vh; padding:1.1rem; font:1rem/1.65 Georgia, serif; white-space:pre-wrap; overflow-wrap:anywhere; }
.result .placeholder { color:var(--muted); }
.result del { background:#f8d7da; color:#742a2f; text-decoration-thickness:2px; }
.result ins { background:#d7efdf; color:#124d32; text-decoration:none; border-bottom:2px solid #3a8a60; }
textarea:focus { box-shadow:inset 0 0 0 2px var(--accent); }
.meta { min-height:2.6rem; border-top:1px solid var(--line); padding:.65rem 1rem; color:var(--muted); font-size:.85rem; text-align:right; }
button { border:0; border-radius:8px; padding:.8rem 1.2rem; background:var(--accent); color:white; font:inherit; font-weight:700; cursor:pointer; }
button:disabled { opacity:.55; cursor:not-allowed; }
.text-button { color:var(--accent); background:transparent; padding:0; }
.actions { display:flex; align-items:center; gap:1rem; padding:1rem 0; }
#status { color:var(--muted); }
.notes { background:#e8eee9; padding:1rem 1.3rem; border-radius:10px; }
.notes h2 { font-size:1rem; margin:0 0 .5rem; }.notes ul { margin:0; padding-left:1.3rem; }
footer { padding:2rem 0 3rem; color:var(--muted); font-size:.85rem; }
.header-actions { display:flex; gap:1rem; align-items:end; }
.login-page { display:grid; place-items:center; padding:1rem; }
.login-card { width:min(28rem, 100%); margin:10vh auto; padding:2rem; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:0 10px 35px rgb(25 45 35 / 9%); }
.login-card h1 { font-size:2.3rem; margin-bottom:2rem; }
.login-card label { padding:.5rem 0; border:0; }
.login-card input { display:block; width:100%; margin-bottom:1rem; padding:.8rem; border:1px solid var(--line); border-radius:8px; font:inherit; }
.login-card button { width:100%; }
#login-status { min-height:1.5em; color:var(--muted); }
@media (max-width:760px) { .site-header { display:block; }.site-header p { margin-top:1rem; }.editor-grid { grid-template-columns:1fr; } textarea { min-height:35vh; } }