.journal-prose .journal-background-demo { font:14px/1.5 system-ui,sans-serif; }
.journal-background-demo > img { display:block; width:100%; background:#d5d1c8; border-radius:6px; }
.journal-background-stage { overflow:hidden; border:1px solid var(--line); border-radius:6px; background:#d5d1c8; }
.journal-background-stage img { display:block; width:100%; height:auto; margin:0; background:transparent; }
.journal-background-controls { padding:16px 0 0; }
.journal-background-toolbar { display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.journal-background-demo button { color:var(--ink); background:var(--paper); border:1px solid var(--button-border); border-radius:5px; font:600 13px/1.3 system-ui,sans-serif; cursor:pointer; }
.journal-background-demo button:focus-visible, .journal-background-range:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
.journal-background-play { min-height:44px; min-width:110px; padding:10px 14px; flex-shrink:0; }
.journal-prose .journal-background-help { font-size:12px; color:var(--muted); margin:0; }
.journal-background-range-label { display:block; color:var(--muted); font-size:12px; margin-bottom:3px; }
.journal-background-range { display:block; width:100%; height:36px; margin:0; padding:0; appearance:none; -webkit-appearance:none; background:transparent; cursor:ew-resize; touch-action:pan-y; }
.journal-background-range::-webkit-slider-runnable-track { height:10px; border-radius:6px; border:1px solid var(--line); background:var(--background-gradient); }
.journal-background-range::-moz-range-track { height:10px; border-radius:6px; border:1px solid var(--line); background:var(--background-gradient); }
.journal-background-range::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; height:24px; width:24px; margin-top:-8px; border:3px solid var(--ink); border-radius:50%; background:var(--paper); box-shadow:0 0 0 2px var(--paper); }
.journal-background-range::-moz-range-thumb { height:18px; width:18px; border:3px solid var(--ink); border-radius:50%; background:var(--paper); box-shadow:0 0 0 2px var(--paper); }
.journal-background-stops { display:grid; grid-template-columns:repeat(var(--background-stop-count),minmax(0,1fr)); gap:6px; }
.journal-background-demo .journal-background-stop { min-height:52px; padding:7px 2px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; background:transparent; border-color:transparent; font-size:12px; }
.journal-background-demo .journal-background-stop[aria-pressed=true] { background:var(--surface); border-color:var(--button-border); }
.journal-background-swatch { display:block; width:14px; height:14px; border-radius:50%; border:1px solid var(--button-border); background:var(--swatch); }
.journal-prose .journal-background-detail { min-height:3em; margin:15px 0 0; color:var(--ink); font-size:14px; }
@media(min-width:960px) {
  .journal-prose .journal-background-demo { width:900px; max-width:calc(100vw - 64px); margin-left:50%; transform:translateX(-50%); }
}
@media(max-width:420px) {
  .journal-background-toolbar { gap:12px; }
  .journal-background-play { min-width:96px; }
  .journal-background-stops { gap:2px; }
  .journal-background-demo .journal-background-stop { font-size:11px; padding-inline:0; }
  .journal-prose .journal-background-detail { min-height:4.5em; }
}