:root { color-scheme: light dark; font: 16px/1.5 system-ui,sans-serif; --accent:#285de4; }
body { margin:0; background:light-dark(#eef3fb,#151e2d); color:light-dark(#182640,#e7ecf8); }
main { max-width:960px; padding:2rem 1rem 4rem; margin:auto; }
header { margin-bottom:1.6rem; }
.eyebrow { color:light-dark(#3f5584,#9db9ef); font-size:.8rem; letter-spacing:.09em; font-weight:bold; }
h1 { margin:.25rem 0; font-size:clamp(1.8rem,5vw,2.8rem); }
h2 { margin:.2rem 0 .8rem; font-size:1.25rem; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; }
section,article { background:light-dark(white,#202c3e); border:1px solid light-dark(#d5e0f1,#384969); border-radius:14px; padding:1.25rem; }
article { margin-bottom:1rem; }
label { display:block; margin:.7rem 0; font-weight:600; }
input,textarea,select,button { font:inherit; padding:.55rem; border-radius:8px; }
input:not([type=checkbox]),select,textarea { width:100%; box-sizing:border-box; display:block; margin-top:.3rem; border:1px solid #8398ba; }
textarea { resize:vertical; }
button { background:var(--accent); color:white; border:1px solid transparent; padding-inline:.85rem; cursor:pointer; }
button.secondary { background:transparent; color:inherit; border-color:#8398ba; }
button:disabled { opacity:.55; cursor:wait; }
button:focus-visible,input:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #df8a13; outline-offset:2px; }
nav a { margin-right:.75rem; }
a { color:light-dark(#1748bb,#a5c1ff); }
.muted { color:light-dark(#465775,#bac9e2); font-size:.9rem; }
.check { font-weight:400; }
.detail,pre { white-space:pre-wrap; overflow-wrap:anywhere; }
code { overflow-wrap:anywhere; }
#preview-image { display:block; max-width:100%; max-height:450px; margin-bottom:.75rem; object-fit:contain; }
details { margin:.8rem 0; }
summary { cursor:pointer; font-weight:600; }
.tags,.actions { display:flex; flex-wrap:wrap; gap:.6rem 1rem; }
.tags { font-size:.85rem; font-weight:600; }
.login-layout { max-width:29rem; padding-top:clamp(2rem,12vh,6rem); }
.login-layout h1 { font-size:clamp(1.65rem,5vw,2.25rem); }
.login-layout section { padding:clamp(1rem,5vw,2rem); }
.login-layout button { margin-top:.4rem; width:100%; }
.login-error { color:light-dark(#a21b24,#ffb3b8); }
[hidden] { display:none !important; }
@media (max-width:690px) { .grid { grid-template-columns:1fr; } }