:root { --hinge-bg: #f0f4ff; --hinge-bg-hover: #e4ecff; --hinge-fg: #1b3a8a; --text: #111; --muted: #555; }
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text); }

.wrapper { padding: 3rem 1.25rem; max-width: 70ch; }

.text-body { width: 100%; line-height: 1.6; font-size: 1.05rem; }
.text-body span { display: inline; }

.text-body .hinge {
  font-weight: 600;
  display: inline;
  border: 0;
  padding: 0 .15rem;
  margin: 0;
  background: var(--hinge-bg);
  color: var(--hinge-fg);
  border-radius: .25rem;
  cursor: pointer;
}
.text-body .hinge:hover { background: var(--hinge-bg-hover); }
.text-body .hinge:focus { outline: 2px solid #80a4ff; outline-offset: 2px; }

.text-body .door { display: inline; font-weight: 400; color: var(--muted); }