* { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.5 system-ui, sans-serif; color: #111; background: #fff; }
.wrap { max-width: 36rem; margin: 0 auto; padding: 1rem; }
.section { margin-bottom: 1.25rem; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; }
.title { flex: 1; outline: none; }
.nav { flex-shrink: 0; }
.nav button { background: none; border: none; cursor: pointer; font-size: 1rem; padding: 0.2rem 0.4rem; }
.nav button:disabled { opacity: 0.4; cursor: default; }
.nav .pin { padding: 0; margin-right: 0.3rem; display: inline-flex; }
.nav .pin img { display: block; width: 1.1rem; height: 1.1rem; opacity: 0.15; position: relative; top: 2px; }
.nav .pin:hover img { opacity: 0.8; }
.nav .pin.pinned img { opacity: 1; }
.nav .pin.pinned:hover img { opacity: 0.9; }
.nav .prev, .nav .next { opacity: 0.5; padding: 0.2rem 0.25rem; }
.nav .prev:hover:not(:disabled), .nav .next:hover:not(:disabled) { opacity: 0.8; }
.nav .prev:disabled, .nav .next:disabled { opacity: 0.15; }
.box { border: 1px solid #000; border-radius: 0.15rem; padding: 0.4rem 0.55rem; background: #fff; }
.content { white-space: pre-wrap; text-align: left; }