:root { font: 14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#24212b; background:#f7f7f9; --accent:#6535c4; --line:#e3e1e9; --muted:#655f70; }
* { box-sizing:border-box; }
body { margin:0; }
header { display:flex; align-items:center; gap:24px; padding:12px max(4%,calc((100% - 1000px)/2)); border-bottom:1px solid var(--line); background:white; }
header img { width:72px; height:34px; }
nav { display:flex; gap:4px; }
nav a,.operator { padding:6px 9px; border-radius:6px; color:var(--muted); text-decoration:none; }
nav a[aria-current] { background:#efeafa; color:var(--accent); }
.operator { margin-left:auto; font-size:12px; }
main { max-width:900px; margin:auto; padding:28px 18px 64px; }
small { font-size:11px; color:var(--muted); }
h1 { font-size:24px; margin:4px 0 12px; }
h2 { font-size:16px; }
p { margin:7px 0 14px; }
details,article { border:1px solid var(--line); border-radius:8px; padding:10px 14px; margin-bottom:7px; background:white; }
summary { cursor:pointer; font-weight:600; }
time { display:inline-block; margin-right:10px; color:var(--muted); font-size:12px; white-space:nowrap; }
.controls { margin:12px 0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
button,select,.action { font:inherit; color:inherit; border:1px solid var(--line); border-radius:6px; padding:5px 9px; background:#fff; cursor:pointer; }
button[aria-pressed="true"],.action { color:var(--accent); background:#f2eefd; }
a { color:var(--accent); } .action { display:inline-block; text-decoration:none; }
figure { display:grid; grid-template-columns:minmax(0,1fr) minmax(8rem,35%); align-items:start; gap:14px; margin:0; padding:12px; border:1px solid var(--line); border-radius:7px; }
figure p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
figure a { display:block; min-width:0; text-align:end; font-size:12px; text-decoration:none; cursor:zoom-in; }
figure img { display:block; width:100%; height:auto; object-fit:contain; margin-bottom:4px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media(max-width:600px) { header { flex-wrap:wrap; padding:9px 12px; gap:4px; } header img { width:56px; } nav a,.operator { padding:4px; font-size:12px; } main { padding:16px 10px; } figure { grid-template-columns:1fr; } }