:root { color-scheme: light dark; --paper: #faf8f5; --card: #fff; --ink: #302c2d; --muted: #675d60; --accent: #943a50; --line: #ddd4d7; }
dialog { width:min(520px, calc(100% - 32px)); max-height:calc(100% - 32px); overflow:auto; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:20px; }
dialog::backdrop { background:rgb(0 0 0 / 45%); }
dialog form { border:0; padding:0; margin:0; }
@media(prefers-color-scheme:dark) { :root { --paper:#191719; --card:#242024; --ink:#f6edf0; --muted:#c4b7bc; --accent:#ffb5c7; --line:#58464e; } }
* { box-sizing:border-box; } [hidden] { display:none !important; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.65 system-ui,sans-serif; }
header,main { max-width:1200px; margin:auto; padding:24px; }
header { border-bottom:1px solid var(--line); } header p { color:var(--muted); margin:0; }
h1 { font-size:2.2rem; margin:8px 0; } h2 { font-size:1.3rem; }
.columns { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
article,form { background:var(--card); padding:20px; margin:16px 0; border:1px solid var(--line); border-radius:12px; }
label { display:block; margin:12px 0; font-weight:600; }
input:not([type=checkbox]),textarea,select { display:block; width:100%; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:12px; font:inherit; }
textarea { min-height:140px; resize:vertical; } input[type=checkbox] { margin-right:10px; width:20px; height:20px; }
button { min-height:44px; border:1px solid var(--accent); color:var(--accent); background:var(--card); border-radius:8px; padding:8px 16px; font:inherit; cursor:pointer; }
button:disabled { opacity:.5; cursor:wait; } :focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
nav { display:flex; flex-wrap:wrap; align-items:center; gap:12px; } .body { white-space:pre-wrap; overflow-wrap:anywhere; }
.meta { color:var(--muted); font-size:.9rem; } #message { min-height:1.5em; font-weight:600; }
@media(max-width:750px) { .columns { grid-template-columns:1fr; } header,main { padding:16px; } }