@import url("https://fonts.googleapis.com/css2?family=DynaPuff:wdth,wght@75..100,400..700&family=Alegreya:ital,wght@0,400..800;1,400..800&family=Andika:ital,wght@0,400;0,700;1,400&family=Caveat:wght@400..700&family=IM+Fell+English:ital@0;1&family=Bangers&family=Comic+Neue:ital,wght@0,400;0,700;1,400&family=Zen+Maru+Gothic:wght@400;500;700&display=swap");
/* Storeybrook 1.0 · components. Every class is prefixed sb-. Values come from tokens.css; the six looks swap
   families, textures and a few shapes through the --sb-* hooks below. Load order: tokens.css, this file, bundle.js. */

/* ---------- the look hooks ---------- */
:root {
  --sb-display: var(--font-display); --sb-story: var(--font-story); --sb-ui: var(--font-ui); --sb-hand: var(--font-hand);
  --sb-display-wdth: 92; --sb-display-weight: 600;
  --sb-grain-blend: multiply; --sb-grain-op: var(--op-grain); --sb-wash-blend: multiply;
  --sb-target: var(--size-target); --sb-focus-w: var(--border-focus); --sb-focus-off: var(--border-focus-offset);
  --sb-sheet-filter: url(#sb-deckle); --sb-wash-filter: url(#sb-bleed);
  --sb-shadow-c: rgba(38, 50, 63, 0.16);
  --sb-grain-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .22 0 0 0 0 .25 0 0 0 -1.4 1.1'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --sb-fibre-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .07' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .32 0 0 0 0 .35 0 0 0 -2.6 1.05'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23f)'/%3E%3C/svg%3E");
}
[data-theme="knight"] { --sb-display: var(--font-old); --sb-display-weight: 400; --sb-grain-blend: soft-light; --sb-grain-op: 0.5; --sb-wash-blend: screen; --sb-shadow-c: rgba(0, 0, 0, 0.5); }
[data-theme="inkblot"] { --sb-display: var(--font-old); --sb-display-weight: 400; --sb-grain-op: 0; --sb-wash-blend: normal; --sb-wash-filter: none; --sb-sheet-filter: none; }
[data-theme="comix"] { --sb-display: var(--font-comic); --sb-display-weight: 400; --sb-story: var(--font-comic-text); --sb-ui: var(--font-comic-text); --sb-grain-op: 0.18; --sb-sheet-filter: none; --sb-wash-filter: none; --sb-wash-blend: multiply; }
[data-theme="origami"] { --sb-display: var(--font-fold); --sb-display-weight: 700; --sb-ui: var(--font-fold); --sb-grain-op: 0.22; --sb-sheet-filter: none; --sb-wash-filter: none; }
[data-theme="skein"] { --sb-display: var(--font-hand); --sb-display-weight: 600; --sb-grain-op: 0.28; }

/* the type styles from tokens.css follow the look */
:root .display-xl, :root .display-l, :root .display-m, :root .display-s { font-family: var(--sb-display); font-variation-settings: "wdth" var(--sb-display-wdth); }
:root .story-lede, :root .story-body, :root .story-italic, :root .dropcap { font-family: var(--sb-story); }
:root .title, :root .button, :root .label, :root .small, :root .count { font-family: var(--sb-ui); }
:root .note { font-family: var(--sb-hand); }
[data-theme="comix"] .display-xl, [data-theme="comix"] .display-l, [data-theme="comix"] .display-m, [data-theme="comix"] .display-s { letter-spacing: 0.02em; }
[data-theme="skein"] .display-xl, [data-theme="skein"] .display-l { line-height: 0.9; }

/* ---------- the page ---------- */
html.sb-root { font-size: var(--size-root); }
.sb-body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font-family: var(--sb-story); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.sb-body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: var(--sb-grain-img); background-size: var(--tex-grain-size); opacity: var(--sb-grain-op); mix-blend-mode: var(--sb-grain-blend); }
[data-theme="origami"] .sb-body, .sb-body.sb-mat { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; background-position: -1px -1px; }
[data-theme="origami"] .sb-body { background-color: var(--paper); }
.sb-body > * { position: relative; z-index: 1; }
.sb-grain { position: relative; isolation: isolate; }
.sb-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background-image: var(--sb-grain-img); background-size: var(--tex-grain-size); opacity: var(--sb-grain-op); mix-blend-mode: var(--sb-grain-blend); z-index: -1; }
.sb-ink-link, .sb-prose a { color: var(--link); text-decoration-line: underline; text-decoration-style: wavy; text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: color-mix(in srgb, var(--link) 55%, transparent); }
.sb-ink-link:hover, .sb-prose a:hover { text-decoration-color: var(--link); }
[data-theme="inkblot"] .sb-ink-link, [data-theme="inkblot"] .sb-prose a { text-decoration-style: solid; text-decoration-thickness: 2px; }
.sb-prose { font-family: var(--sb-story); font-size: clamp(1.125rem, 1.2vw + 0.75rem, 1.375rem); line-height: 1.6; max-width: var(--size-measure); }
.sb-prose p { margin: 0 0 1em; }
.sb-lede { font-family: var(--sb-story); font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.45; max-width: 34em; margin: 0; }
.sb-note { font-family: var(--sb-hand); font-size: 1.6rem; line-height: 1.1; color: var(--cue); }
.sb-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[class^="sb-"][hidden], [class*=" sb-"][hidden] { display: none !important; }

/* focus is always a ring you can see from across the room */
.sb-body :focus-visible, .sb-focusable:focus-visible, [class^="sb-"]:focus-visible { outline: var(--sb-focus-w) solid var(--focus); outline-offset: var(--sb-focus-off); border-radius: 12px; }
[data-density="tv"] { --sb-target: 64px; --sb-focus-w: 5px; --sb-focus-off: 5px; }
[data-density="kid"] { --sb-target: 56px; }
[data-density="kid"] .sb-prose, [data-density="kid"] .sb-lede { font-family: var(--sb-ui); font-size: clamp(1.3rem, 1.4vw + 0.9rem, 1.6rem); line-height: 1.55; }

/* ---------- washes: watercolor that bleeds, mixes and granulates ---------- */
.sb-washes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sb-wash { --c: var(--wash-sky); position: absolute; width: var(--w, 40%); aspect-ratio: var(--ar, 1.35); border-radius: var(--shape-blob); pointer-events: none;
  background: radial-gradient(closest-side, var(--c) 0%, color-mix(in srgb, var(--c) 88%, transparent) 55%, color-mix(in srgb, var(--c) 40%, transparent) 84%, transparent 100%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 70%, rgba(0, 0, 0, 0.08));
  opacity: var(--op-wash); mix-blend-mode: var(--sb-wash-blend); filter: var(--sb-wash-filter); }
.sb-wash::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--sb-grain-img); background-size: 120px; opacity: 0.55; mix-blend-mode: multiply; }
.sb-wash--sky { --c: var(--wash-sky); } .sb-wash--meadow { --c: var(--wash-meadow); } .sb-wash--rose { --c: var(--wash-rose); }
.sb-wash--sun { --c: var(--wash-sun); } .sb-wash--brook { --c: var(--wash-brook); }
.sb-wash--band { width: 120%; left: -10%; aspect-ratio: auto; height: var(--h, 38%); border-radius: 40% 60% 46% 54% / 64% 58% 42% 36%; }
[data-theme="knight"] .sb-wash::after { mix-blend-mode: overlay; opacity: 0.35; }
/* Ink Blot: watercolor becomes stipple, Comix: halftone, Origami: folded paper */
[data-theme="inkblot"] .sb-wash { background: radial-gradient(circle, #000 0.9px, transparent 1.1px) 0 0 / 7px 7px; opacity: 0.32; box-shadow: none;
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent 100%); mask: radial-gradient(closest-side, #000 55%, transparent 100%); }
[data-theme="inkblot"] .sb-wash::after { display: none; }
[data-theme="comix"] .sb-wash { background: radial-gradient(circle, var(--c) 38%, transparent 41%) 0 0 / var(--tex-halftone) var(--tex-halftone); opacity: 0.9; box-shadow: none;
  -webkit-mask: radial-gradient(closest-side, #000 50%, transparent 100%); mask: radial-gradient(closest-side, #000 50%, transparent 100%); }
[data-theme="comix"] .sb-wash::after { display: none; }
[data-theme="origami"] .sb-wash { border-radius: 0; background: linear-gradient(135deg, var(--c) 0 50%, color-mix(in srgb, var(--c) 82%, #000) 50% 100%); opacity: 0.8; box-shadow: none; mix-blend-mode: multiply;
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
[data-theme="origami"] .sb-wash::after { display: none; }
.sb-bloom { animation: sb-bloom var(--dur-bleed) var(--ease-out) both; }
@keyframes sb-bloom { from { opacity: 0; transform: scale(0.82); } to { opacity: var(--op-wash); transform: none; } }

/* the sun is paper left unpainted, with a gamboge ring around it */
.sb-sun { position: absolute; width: var(--w, 14%); aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, var(--paper) 0 52%, color-mix(in srgb, var(--wash-sun) 90%, transparent) 60%, color-mix(in srgb, var(--wash-sun) 40%, transparent) 78%, transparent 100%); filter: var(--sb-wash-filter); }
[data-theme="knight"] .sb-sun { background: radial-gradient(closest-side, #f4efe6 0 40%, color-mix(in srgb, var(--gamboge) 50%, transparent) 52%, transparent 100%); }
[data-theme="inkblot"] .sb-sun { background: radial-gradient(closest-side, #fff 0 46%, #000 47% 49%, transparent 50%); filter: none; }
[data-theme="comix"] .sb-sun { background: radial-gradient(closest-side, var(--gamboge) 0 56%, var(--line) 57% 61%, transparent 62%); filter: none; }

/* ---------- sheets: deckled, taped, inked ---------- */
.sb-sheet { position: relative; isolation: isolate; color: var(--ink); padding: clamp(1.25rem, 3vw, 2.5rem); }
.sb-sheet::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--page); border-radius: 4px; box-shadow: var(--shadow-page); filter: var(--sb-sheet-filter); }
.sb-sheet::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--sb-grain-img); background-size: var(--tex-grain-size); opacity: calc(var(--sb-grain-op) * 0.7); mix-blend-mode: var(--sb-grain-blend); border-radius: 4px; }
[data-theme="comix"] .sb-sheet::before { border: var(--border-comix) solid var(--line); border-radius: 0; }
[data-theme="origami"] .sb-sheet::before { border-radius: 2px; background: linear-gradient(135deg, var(--page) 0 72%, color-mix(in srgb, var(--page) 92%, #000) 72% 100%); }
[data-theme="skein"] .sb-sheet::before { background: linear-gradient(160deg, var(--page) 0%, color-mix(in srgb, var(--page) 86%, var(--wash-rose)) 48%, var(--page) 62%, color-mix(in srgb, var(--page) 92%, var(--wash-sky)) 100%); outline: 2px dashed color-mix(in srgb, var(--copper) 45%, transparent); outline-offset: -10px; }
.sb-tape { position: absolute; width: 96px; height: 28px; z-index: 2; pointer-events: none; opacity: 0.82;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--wash-sun) 92%, transparent) 0 8px, color-mix(in srgb, var(--wash-rose) 80%, transparent) 8px 16px);
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 4px, #000 calc(100% - 4px), transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 4px, #000 calc(100% - 4px), transparent 100%); }
.sb-tape--tl { top: -12px; left: -18px; transform: rotate(-32deg); } .sb-tape--tr { top: -12px; right: -18px; transform: rotate(30deg); }
.sb-tape--bl { bottom: -12px; left: -18px; transform: rotate(28deg); } .sb-tape--br { bottom: -12px; right: -18px; transform: rotate(-30deg); }
[data-theme="inkblot"] .sb-tape { background: repeating-linear-gradient(45deg, #000 0 1px, transparent 1px 6px); opacity: 0.6; }
[data-theme="comix"] .sb-tape { background: var(--gamboge); border: 2px solid var(--line); -webkit-mask: none; mask: none; opacity: 1; }

/* ---------- buttons ---------- */
.sb-btn { --b-bg: transparent; --b-fg: var(--ink); --b-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: var(--sb-target); min-width: var(--sb-target); padding: 0 1.35em;
  border: var(--border-ink) solid var(--b-bd); border-radius: var(--radius-pill); background: var(--b-bg); color: var(--b-fg);
  font: 700 1.125rem/1.1 var(--sb-ui); letter-spacing: 0.005em; text-decoration: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-tap) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out), background-color var(--dur-quick); }
.sb-btn svg { width: 1.25em; height: 1.25em; flex: none; }
.sb-btn:hover { transform: translateY(-1px); }
.sb-btn:active { transform: translateY(1px); }
.sb-btn--primary { --b-bg: var(--accent); --b-fg: var(--on-accent); --b-bd: transparent; background-image: radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, 0.28), transparent 55%); box-shadow: var(--shadow-seal); }
.sb-btn--primary:active { box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.3); }
.sb-btn--secondary { --b-bd: var(--ink); --b-fg: var(--ink); background: color-mix(in srgb, var(--page) 70%, transparent); }
.sb-btn--secondary:hover { background: var(--cue-soft); }
.sb-btn--quiet { --b-fg: var(--ink-muted); padding: 0 0.6em; }
.sb-btn--quiet:hover { color: var(--ink); text-decoration: underline wavy color-mix(in srgb, var(--cue) 70%, transparent); text-underline-offset: 0.3em; transform: none; }
.sb-btn--sticker { --b-bg: var(--page); --b-fg: var(--ink); border: 4px solid var(--page); box-shadow: var(--shadow-sticker); border-radius: var(--shape-blob); transform: rotate(-2deg); padding: 0 1.1em; }
.sb-btn--sticker:hover { transform: rotate(0deg) translateY(-2px); }
.sb-btn--lg { min-height: calc(var(--sb-target) + 16px); padding: 0 1.8em; font-size: 1.3rem; }
.sb-btn--sm { min-height: 40px; padding: 0 1em; font-size: 1rem; }
.sb-btn--icon { padding: 0; width: var(--sb-target); border-radius: 50%; }
.sb-btn[disabled], .sb-btn[aria-disabled="true"] { opacity: var(--op-disabled); cursor: not-allowed; transform: none; box-shadow: none; }
.sb-btn[aria-busy="true"]::after { content: ""; width: 0.9em; height: 0.9em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: sb-spin 0.9s linear infinite; }
@keyframes sb-spin { to { transform: rotate(1turn); } }
[data-theme="comix"] .sb-btn { border: var(--border-comix) solid var(--line); box-shadow: 4px 4px 0 var(--line); border-radius: 14px; }
[data-theme="comix"] .sb-btn--primary { background-image: radial-gradient(circle, rgba(255, 255, 255, 0.35) 22%, transparent 25%); background-size: 6px 6px; }
[data-theme="comix"] .sb-btn--quiet { border-color: transparent; box-shadow: none; }
[data-theme="comix"] .sb-btn:active { box-shadow: 1px 1px 0 var(--line); transform: translate(3px, 3px); }
[data-theme="inkblot"] .sb-btn--primary { background-image: none; box-shadow: none; }
[data-theme="origami"] .sb-btn--primary { border-radius: 4px; background-image: linear-gradient(135deg, transparent 0 62%, rgba(0, 0, 0, 0.14) 62% 100%); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18); }
[data-theme="origami"] .sb-btn--secondary { border-radius: 4px; }
[data-theme="skein"] .sb-btn--primary { outline: 2px dashed color-mix(in srgb, var(--on-accent) 60%, transparent); outline-offset: -6px; }

/* the wax seal */
.sb-seal { --s: 76px; position: relative; display: inline-grid; place-items: center; width: var(--s); height: var(--s); padding: 0; border: 0; cursor: pointer;
  border-radius: var(--shape-seal); background: radial-gradient(70% 70% at 35% 30%, color-mix(in srgb, var(--accent) 70%, #fff) 0%, var(--accent) 45%, color-mix(in srgb, var(--accent) 78%, #000) 100%);
  color: var(--on-accent); box-shadow: var(--shadow-seal); font: 700 calc(var(--s) * 0.36)/1 var(--sb-display); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform var(--dur-quick) var(--ease-bounce); }
.sb-seal::before { content: ""; position: absolute; inset: 9%; border-radius: inherit; border: 2px solid color-mix(in srgb, var(--on-accent) 30%, transparent); }
.sb-seal::after { content: ""; position: absolute; width: 22%; height: 18%; right: -4%; bottom: 8%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: inherit; box-shadow: var(--shadow-seal); }
.sb-seal svg { width: 46%; height: 46%; }
.sb-seal:hover { transform: rotate(-6deg) scale(1.04); }
.sb-seal--sm { --s: 52px; } .sb-seal--lg { --s: 112px; }
[data-theme="inkblot"] .sb-seal { background: #000; } [data-theme="inkblot"] .sb-seal::after { display: none; }
[data-theme="comix"] .sb-seal { border: var(--border-comix) solid var(--line); }
[data-theme="origami"] .sb-seal { border-radius: 6px; transform: rotate(45deg); } [data-theme="origami"] .sb-seal > * { transform: rotate(-45deg); } [data-theme="origami"] .sb-seal::after { display: none; }

/* ---------- pages and spreads ---------- */
.sb-page { position: relative; isolation: isolate; max-width: var(--size-page); padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3.25rem); color: var(--ink); }
.sb-page::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--page); box-shadow: var(--shadow-page); filter: var(--sb-sheet-filter); border-radius: 3px; }
.sb-page::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--sb-fibre-img); background-size: 420px; opacity: calc(var(--sb-grain-op) * 0.45); mix-blend-mode: var(--sb-grain-blend); }
.sb-page__folio { position: absolute; bottom: 1rem; font: 400 0.95rem/1 var(--sb-ui); color: var(--ink-muted); }
.sb-page--left .sb-page__folio { left: 1.5rem; } .sb-page--right .sb-page__folio { right: 1.5rem; }
.sb-page--lined { background-image: repeating-linear-gradient(transparent 0 calc(1.6em - 1px), color-mix(in srgb, var(--cue) 22%, transparent) calc(1.6em - 1px) 1.6em); background-position: 0 1.2em; }
[data-theme="comix"] .sb-page::before { border: var(--border-comix) solid var(--line); border-radius: 0; }
.sb-spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; max-width: calc(var(--size-page) * 2); perspective: 2200px; }
.sb-spread > .sb-page { max-width: none; }
.sb-spread > .sb-page--left::before { border-radius: 6px 0 0 6px; }
.sb-spread > .sb-page--right::before { border-radius: 0 6px 6px 0; }
.sb-spread::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 64px; transform: translateX(-50%); pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.12) 44%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.12) 56%, transparent); mix-blend-mode: multiply; }
[data-theme="knight"] .sb-spread::after { mix-blend-mode: normal; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.3) 50%, transparent); }
[data-theme="inkblot"] .sb-spread::after { background: linear-gradient(90deg, transparent calc(50% - 1px), #000 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); width: 2px; }
.sb-spread__turn { position: absolute; top: 0; bottom: 0; width: 18%; border: 0; background: transparent; cursor: pointer; z-index: 3; }
.sb-spread__turn--prev { left: 0; } .sb-spread__turn--next { right: 0; }
.sb-spread__turn:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--cue) 10%, transparent), transparent); }
.sb-spread__turn--next:hover { background: linear-gradient(270deg, color-mix(in srgb, var(--cue) 10%, transparent), transparent); }
.sb-leaf { position: absolute; top: 0; bottom: 0; right: 0; width: 50%; transform-origin: left center; transform-style: preserve-3d; z-index: 4; pointer-events: none; }
.sb-leaf > div { position: absolute; inset: 0; backface-visibility: hidden; background: var(--page); box-shadow: var(--shadow-lift); }
.sb-leaf > .sb-leaf__back { transform: rotateY(180deg); }
@media (max-width: 1023px) { .sb-spread { grid-template-columns: 1fr; } .sb-spread::after { display: none; } .sb-spread > .sb-page--left { display: var(--sb-left-display, none); } }

.sb-dropcap { float: left; position: relative; margin: 0.08em 0.12em 0 -0.04em; font: var(--sb-display-weight) 4.6em/0.8 var(--sb-display); color: var(--accent); }
.sb-dropcap::before { content: ""; position: absolute; inset: -0.1em -0.16em -0.06em -0.12em; z-index: -1; border-radius: var(--shape-blob); background: radial-gradient(closest-side, var(--wash-sun), color-mix(in srgb, var(--wash-sun) 30%, transparent)); filter: var(--sb-wash-filter); }
[data-theme="inkblot"] .sb-dropcap::before { background: none; border: 2px solid #000; border-radius: 4px; filter: none; }
[data-theme="comix"] .sb-dropcap::before { background: var(--gamboge); border: var(--border-comix) solid var(--line); border-radius: 0; filter: none; }

/* ---------- narration and talk ---------- */
.sb-caption { position: relative; display: inline-block; max-width: 30em; padding: 0.7em 1em 0.8em; color: var(--ink); font: 400 1.05rem/1.45 var(--sb-story); isolation: isolate; }
.sb-caption::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--surface); filter: var(--sb-sheet-filter); box-shadow: var(--shadow-sticker); transform: rotate(-0.6deg); }
.sb-caption__who { display: block; margin-bottom: 0.15em; font: 700 0.9rem/1.2 var(--sb-ui); color: var(--accent); }
[data-theme="comix"] .sb-caption::before { background: var(--surface); border: var(--border-comix) solid var(--line); transform: none; box-shadow: none; }
.sb-balloon { --tail-x: 22%; position: relative; display: inline-block; max-width: 22em; padding: 0.7em 1.05em; color: var(--ink); background: var(--page); border: var(--border-ink) solid var(--art-line);
  border-radius: 1.4em; font: 700 1.1rem/1.35 var(--font-comic-text); box-shadow: var(--shadow-sticker); }
.sb-balloon::after { content: ""; position: absolute; left: var(--tail-x); bottom: -14px; width: 22px; height: 22px; background: var(--page); border-right: var(--border-ink) solid var(--art-line); border-bottom: var(--border-ink) solid var(--art-line);
  transform: skewX(-28deg) rotate(38deg); border-bottom-right-radius: 4px; }
.sb-balloon--right { --tail-x: 74%; }
.sb-balloon--think { border-radius: 50% 48% 52% 50% / 60% 62% 40% 42%; padding: 1em 1.4em; font-style: italic; font-weight: 400; font-family: var(--sb-story); }
.sb-balloon--think::after { width: 16px; height: 16px; border-radius: 50%; border: var(--border-ink) solid var(--art-line); transform: none; bottom: -24px; box-shadow: -12px 14px 0 -4px var(--page), -12px 14px 0 -2px var(--art-line); }
.sb-balloon--shout { border-radius: 4px; clip-path: polygon(0 12%, 8% 0, 18% 9%, 30% 0, 41% 8%, 53% 0, 63% 9%, 75% 0, 86% 8%, 100% 2%, 94% 22%, 100% 40%, 94% 58%, 100% 78%, 92% 100%, 78% 92%, 64% 100%, 50% 92%, 36% 100%, 22% 93%, 8% 100%, 4% 82%, 0 64%, 6% 46%, 0 28%);
  padding: 1.1em 1.6em; font-family: var(--font-comic); font-weight: 400; font-size: 1.45rem; letter-spacing: 0.03em; box-shadow: none; background: var(--gamboge); color: var(--on-gamboge); border: 0; }
.sb-balloon--shout::after { display: none; }
[data-theme="comix"] .sb-balloon { border-width: var(--border-comix); box-shadow: none; }

/* comic panels */
.sb-panels { display: grid; gap: 14px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.sb-panel { position: relative; min-height: 180px; overflow: hidden; background: var(--page); border: var(--border-ink) solid var(--art-line); isolation: isolate; }
.sb-panel--wide { grid-column: span 2; } .sb-panel--tall { grid-row: span 2; }
.sb-panel__cap { position: absolute; top: 0; left: 0; max-width: 70%; padding: 0.4em 0.7em; background: var(--surface); border-right: var(--border-ink) solid var(--art-line); border-bottom: var(--border-ink) solid var(--art-line); font: 700 0.95rem/1.3 var(--font-comic-text); color: var(--ink); z-index: 2; }
.sb-panel--dots::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle, color-mix(in srgb, var(--cue) 45%, transparent) 30%, transparent 33%) 0 0 / var(--tex-halftone) var(--tex-halftone); }
.sb-panel__sfx { position: absolute; font: 400 2.6rem/1 var(--font-comic); color: var(--gamboge); -webkit-text-stroke: 2px var(--art-line); paint-order: stroke fill; transform: rotate(-8deg); letter-spacing: 0.04em; }
[data-theme="comix"] .sb-panel { border-width: var(--border-comix); }

/* ---------- the brook: a path you can walk ---------- */
.sb-brook { position: relative; width: 100%; min-height: 320px; }
.sb-brook__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sb-brook__wash { fill: none; stroke: var(--wash-brook); stroke-width: 54; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; filter: var(--sb-wash-filter); mix-blend-mode: var(--sb-wash-blend); }
.sb-brook__deep { fill: none; stroke: color-mix(in srgb, var(--wash-brook) 70%, var(--cue)); stroke-width: 20; stroke-linecap: round; opacity: 0.55; filter: var(--sb-wash-filter); }
.sb-brook__glint { fill: none; stroke: var(--art-light); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 26 9 40; opacity: 0.9; animation: sb-glint 6s linear infinite; }
.sb-brook__trail { fill: none; stroke: color-mix(in srgb, var(--cue) 35%, transparent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 12; }
.sb-brook__walked { fill: none; stroke: var(--cue); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 1 10; }
@keyframes sb-glint { to { stroke-dashoffset: -154; } }
[data-theme="inkblot"] .sb-brook__wash { stroke: #000; stroke-width: 40; opacity: 1; stroke-dasharray: 1.2 6; stroke-linecap: butt; }
[data-theme="inkblot"] .sb-brook__deep { stroke: #000; stroke-width: 2; opacity: 1; filter: none; }
[data-theme="inkblot"] .sb-brook__glint { display: none; }
[data-theme="comix"] .sb-brook__wash { stroke: var(--line); stroke-width: 56; opacity: 1; filter: none; mix-blend-mode: normal; }
[data-theme="comix"] .sb-brook__deep { stroke: var(--art-water); stroke-width: 46; opacity: 1; filter: none; }
[data-theme="origami"] .sb-brook__wash { stroke-linejoin: miter; stroke-linecap: butt; filter: none; }
.sb-stone { position: absolute; left: var(--x, 50%); top: var(--y, 50%); translate: -50% -50%; display: grid; place-items: center; text-decoration: none; width: var(--size-stone); height: calc(var(--size-stone) * 0.82); padding: 0; z-index: var(--z-stone);
  border: var(--border-ink) solid var(--art-line); border-radius: var(--shape-stone); background: radial-gradient(90% 80% at 40% 30%, var(--art-light), var(--art-stone) 60%); color: var(--ink);
  font: 700 1rem/1 var(--sb-ui); cursor: pointer; box-shadow: 0 6px 0 -1px var(--art-shade), 0 10px 14px -6px var(--sb-shadow-c); transition: transform var(--dur-quick) var(--ease-bounce); }
.sb-stone:hover { transform: translateY(-3px) rotate(-3deg); }
.sb-stone[data-state="done"] { background: radial-gradient(90% 80% at 40% 30%, var(--art-light), var(--sap-soft) 70%); color: var(--sap); }
.sb-stone[data-state="current"] { background: radial-gradient(90% 80% at 40% 30%, var(--art-light), var(--accent-soft) 65%); color: var(--accent); box-shadow: 0 6px 0 -1px var(--art-shade), 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); animation: sb-bob 2.8s var(--ease-paper) infinite; }
/* locked: a paler, dashed face; the label stays ink, so its name and reason stay readable */
.sb-stone[data-state="locked"] { cursor: not-allowed; border-style: dashed; color: var(--ink-muted); background: color-mix(in srgb, var(--art-stone) 40%, var(--paper)); box-shadow: 0 4px 0 -1px color-mix(in srgb, var(--art-shade) 45%, transparent); }
.sb-stone svg { width: 22px; height: 22px; }
.sb-stone__label { position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; white-space: nowrap; font: 700 0.95rem/1.2 var(--sb-ui); color: var(--ink); text-shadow: var(--shadow-ink); pointer-events: none; }
.sb-stone__label small { display: block; font-weight: 400; color: var(--ink-muted); }
@keyframes sb-bob { 0%, 100% { translate: -50% -50%; } 50% { translate: -50% calc(-50% - 4px); } }
/* Origami folds the stone into a diamond drawn behind it, so its label stays upright and in place */
[data-theme="origami"] .sb-stone { border: 0; background: none; box-shadow: none; }
[data-theme="origami"] .sb-stone::before { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; z-index: -1; transform: translate(-50%, -50%) rotate(45deg); border: var(--border-ink) solid var(--art-line); border-radius: 4px;
  background: radial-gradient(90% 80% at 40% 30%, var(--art-light), var(--art-stone) 60%); box-shadow: 4px 4px 0 -1px var(--art-shade), 6px 6px 12px -6px var(--sb-shadow-c); }
[data-theme="origami"] .sb-stone[data-state="done"] { background: none; } [data-theme="origami"] .sb-stone[data-state="done"]::before { background: radial-gradient(90% 80% at 40% 30%, var(--art-light), var(--sap-soft) 70%); }
[data-theme="origami"] .sb-stone[data-state="locked"]::before { border-style: dashed; background: color-mix(in srgb, var(--art-stone) 40%, var(--paper)); box-shadow: none; }
[data-theme="origami"] .sb-stone[data-state="current"] { background: none; box-shadow: none; } [data-theme="origami"] .sb-stone[data-state="current"]::before { background: radial-gradient(90% 80% at 40% 30%, var(--art-light), var(--accent-soft) 65%); box-shadow: 4px 4px 0 -1px var(--art-shade), 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); }
[data-theme="comix"] .sb-stone { border-width: var(--border-comix); box-shadow: 3px 3px 0 var(--line); }

/* chapter tabs on the page edge */
.sb-tabs { display: flex; flex-direction: column; gap: 6px; }
.sb-tab { position: relative; min-height: var(--sb-target); padding: 0.4em 1em 0.4em 1.2em; border: 0; border-radius: 0 14px 14px 0; background: var(--surface); color: var(--ink-muted); font: 700 1rem/1.2 var(--sb-ui); text-align: left; cursor: pointer; box-shadow: inset 4px 0 0 var(--line); }
.sb-tab[aria-current="true"], .sb-tab[aria-selected="true"] { background: var(--page); color: var(--accent); box-shadow: inset 6px 0 0 var(--accent), var(--shadow-sticker); translate: 6px 0; }
.sb-tab:hover { color: var(--ink); }

/* ---------- read it aloud ---------- */
.sb-reader { display: flex; align-items: center; gap: 0.75rem; max-width: var(--size-reader); padding: 0.5rem 0.75rem 0.5rem 0.5rem; border-radius: var(--radius-xl); background: var(--chrome); color: var(--ink);
  box-shadow: var(--shadow-page); font: 400 1rem/1.3 var(--sb-ui); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); }
.sb-reader--fixed { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: var(--z-reader); }
.sb-reader__play { flex: none; }
.sb-reader__info { min-width: 0; display: grid; gap: 2px; }
.sb-reader__title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-reader__voice { color: var(--ink-muted); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-reader__meter { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.sb-reader__meter i { display: block; height: 100%; width: var(--p, 0%); background: var(--cue); border-radius: inherit; transition: width var(--dur-quick) linear; }
.sb-reader select { min-height: 40px; max-width: 11rem; border: 1.5px solid var(--ink-muted); border-radius: var(--radius-md); background: var(--page); color: var(--ink); font: 400 0.95rem var(--sb-ui); padding: 0 0.5em; }
.sb-word.is-reading { background: var(--cue-soft); box-shadow: inset 0 -3px 0 var(--cue); border-radius: 4px; }
[data-theme="inkblot"] .sb-word.is-reading { background: #000; color: #fff; box-shadow: none; }
[data-theme="comix"] .sb-reader { border: var(--border-comix) solid var(--line); box-shadow: 4px 4px 0 var(--line); backdrop-filter: none; }

/* ---------- rewards: stickers, nougats, the jar, locks, the album ---------- */
.sb-sticker { --rot: -4deg; position: relative; display: inline-grid; justify-items: center; gap: 0.35rem; width: 132px; padding: 14px 10px 10px; border: 0; background: transparent; color: var(--ink); font: 700 1rem/1.2 var(--sb-ui); text-align: center; cursor: default; }
.sb-sticker__art { display: grid; place-items: center; width: 96px; height: 96px; border-radius: var(--shape-blob); background: radial-gradient(closest-side, var(--wash-sun), var(--page) 95%); border: 5px solid var(--page); box-shadow: var(--shadow-sticker); transform: rotate(var(--rot)); }
.sb-sticker__art svg { width: 62%; height: 62%; }
.sb-sticker__name { font-family: var(--sb-hand); font-size: 1.35rem; font-weight: 600; line-height: 1; color: var(--ink); }
.sb-sticker--locked .sb-sticker__art { background: transparent; border: 2px dashed var(--line); box-shadow: none; }
.sb-sticker--locked .sb-sticker__art svg { opacity: 0.35; }
.sb-sticker--locked .sb-sticker__name { color: var(--ink-muted); }
.sb-sticker.is-new .sb-sticker__art { animation: sb-peel var(--dur-base) var(--ease-bounce) both; }
@keyframes sb-peel { from { transform: rotate(18deg) scale(0.55); opacity: 0; } to { transform: rotate(var(--rot)) scale(1); opacity: 1; } }
[data-theme="comix"] .sb-sticker__art { border-color: var(--page); outline: var(--border-comix) solid var(--line); box-shadow: 3px 3px 0 var(--line); }
[data-theme="origami"] .sb-sticker__art { border-radius: 6px; transform: rotate(45deg); } [data-theme="origami"] .sb-sticker__art svg { transform: rotate(-45deg); }

.sb-nougat { display: inline-block; width: var(--n, 44px); height: calc(var(--n, 44px) * 0.62); flex: none; }
.sb-nougat svg { width: 100%; height: 100%; overflow: visible; }
.sb-drop-flight { position: fixed; left: 0; top: 0; z-index: var(--z-drop); pointer-events: none; }
.sb-jar { position: relative; display: inline-grid; place-items: center; width: var(--size-jar); height: calc(var(--size-jar) * 1.2); border: 0; padding: 0; background: transparent; color: var(--ink); cursor: pointer; }
.sb-jar svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sb-jar__count { position: relative; margin-top: 18%; padding: 0.1em 0.45em; border-radius: 999px; background: var(--page); font: 700 1.05rem/1.1 var(--sb-ui); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--art-line); }
.sb-jar.is-bump { animation: sb-bump 0.5s var(--ease-bounce); }
@keyframes sb-bump { 30% { transform: scale(1.12) rotate(-3deg); } 60% { transform: scale(0.97) rotate(2deg); } }
[data-theme="knight"] .sb-jar [stroke="var(--art-line)"] { stroke: var(--ink-muted); }
.sb-jar--fixed { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: var(--z-reader); }

.sb-lock { position: absolute; inset: 0; display: grid; place-content: center; gap: 0.5rem; padding: 1.2rem; text-align: center; color: var(--ink); z-index: 3;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--page) 92%, transparent) 0 10px, color-mix(in srgb, var(--surface) 92%, transparent) 10px 20px); border-radius: inherit; }
.sb-lock__keyhole { justify-self: center; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--page); box-shadow: 0 0 0 2px var(--art-line); }
.sb-lock__why { font: 700 1rem/1.3 var(--sb-ui); }
.sb-lock__how { font: 400 0.95rem/1.35 var(--sb-ui); color: var(--ink-muted); }
.sb-lock.is-opening { animation: sb-unfold var(--dur-turn) var(--ease-paper) forwards; transform-origin: top center; }
@keyframes sb-unfold { to { transform: perspective(900px) rotateX(-96deg); opacity: 0; } }

.sb-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 0.5rem 1rem; justify-items: center; }

/* ---------- the shelf: covers, price tags ---------- */
.sb-shelf { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, var(--size-cover)); gap: clamp(1rem, 2.4vw, 2rem); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding: 1.5rem 0.25rem 2.6rem; scrollbar-width: thin; }
.sb-shelf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1rem; height: 14px; border-radius: 3px; background: linear-gradient(180deg, color-mix(in srgb, var(--copper) 70%, #fff) 0, var(--copper) 40%, color-mix(in srgb, var(--copper) 70%, #000) 100%); box-shadow: 0 10px 18px -8px var(--sb-shadow-c); pointer-events: none; }
.sb-shelf > * { scroll-snap-align: start; }
[data-theme="inkblot"] .sb-shelf::after { background: #000; height: 4px; }
[data-theme="comix"] .sb-shelf::after { border: var(--border-comix) solid var(--line); background: var(--gamboge); }

.sb-cover { --tilt: 0deg; position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0; border-radius: 4px 12px 12px 4px; overflow: visible; isolation: isolate;
  background: var(--page); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-page); transform: rotate(var(--tilt)); transition: transform var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick); }
.sb-cover::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 12px; border-radius: 4px 0 0 4px; z-index: 2; background: linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.04) 70%, rgba(255, 255, 255, 0.25)); }
.sb-cover__art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px 12px 0 0; background: var(--surface); }
.sb-cover__art img, .sb-cover__art svg, .sb-cover__art canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.sb-cover__body { display: grid; align-content: start; gap: 0.35rem; padding: 0.9rem 1rem 1rem 1.3rem; }
.sb-cover__title { margin: 0; font: var(--sb-display-weight) 1.6rem/1.05 var(--sb-display); font-variation-settings: "wdth" var(--sb-display-wdth); color: var(--ink); }
.sb-cover__line { margin: 0; font: 400 1rem/1.35 var(--sb-story); color: var(--ink-muted); }
.sb-cover__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.2rem; }
a.sb-cover:hover, a.sb-cover:focus-visible, .sb-cover.is-focus { transform: rotate(var(--tilt)) translateY(-6px); box-shadow: var(--shadow-lift); }
[data-density="tv"] a.sb-cover:focus-visible, [data-density="tv"] .sb-cover.is-focus { transform: scale(1.07); }
.sb-cover--new::after { content: "New"; position: absolute; left: -10px; top: 18px; z-index: 3; padding: 0.25em 0.7em; border-radius: var(--radius-sm); background: var(--sap); color: var(--on-sap); font: 700 0.9rem/1.2 var(--sb-ui); transform: rotate(-8deg); box-shadow: var(--shadow-sticker); }
[data-theme="comix"] .sb-cover { border: var(--border-comix) solid var(--line); border-radius: 0; }
[data-theme="comix"] .sb-cover__art { border-radius: 0; border-bottom: var(--border-comix) solid var(--line); }
[data-theme="origami"] .sb-cover { border-radius: 2px; } [data-theme="origami"] .sb-cover__art { border-radius: 2px 2px 0 0; clip-path: polygon(0 0, 100% 0, 100% 86%, 88% 100%, 0 100%); }

.sb-price { --rot: 7deg; position: absolute; top: -14px; right: 14px; z-index: 4; display: grid; justify-items: center; min-width: 74px; padding: 1.15rem 0.6rem 0.45rem; transform: rotate(var(--rot)); transform-origin: 50% 0;
  background: var(--page); color: var(--ink); clip-path: polygon(22% 0, 78% 0, 100% 16%, 100% 100%, 0 100%, 0 16%); filter: drop-shadow(0 3px 4px var(--sb-shadow-c)); }
.sb-price::before { content: ""; position: absolute; top: 7px; left: 50%; width: 9px; height: 9px; translate: -50% 0; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); }
.sb-price__amount { font: var(--sb-display-weight) 1.55rem/1 var(--sb-display); color: var(--accent); }
.sb-price__each { font: 400 0.8rem/1.2 var(--sb-ui); color: var(--ink-muted); }
.sb-price__string { position: absolute; top: -30px; right: 46px; z-index: 3; width: 2px; height: 34px; background: var(--copper); transform: rotate(-18deg); border-radius: 2px; }
.sb-price--free .sb-price__amount { color: var(--sap); }
[data-theme="comix"] .sb-price { background: var(--gamboge); filter: drop-shadow(3px 3px 0 var(--line)); }
[data-theme="inkblot"] .sb-price { filter: none; outline: 2px solid #000; }

.sb-chip { display: inline-flex; align-items: center; gap: 0.35em; min-height: 30px; padding: 0.15em 0.7em; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: 700 0.9rem/1.2 var(--sb-ui); white-space: nowrap; }
.sb-chip::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--dot, var(--line)); }
.sb-chip--sun { --dot: var(--tag-sun); color: var(--tag-sun); background: color-mix(in srgb, var(--tag-sun) 12%, var(--page)); }
.sb-chip--rose { --dot: var(--tag-rose); color: var(--tag-rose); background: color-mix(in srgb, var(--tag-rose) 12%, var(--page)); }
.sb-chip--lilac { --dot: var(--tag-lilac); color: var(--tag-lilac); background: color-mix(in srgb, var(--tag-lilac) 12%, var(--page)); }
.sb-chip--sea { --dot: var(--tag-sea); color: var(--tag-sea); background: color-mix(in srgb, var(--tag-sea) 12%, var(--page)); }
.sb-chip--sky { --dot: var(--tag-sky); color: var(--tag-sky); background: color-mix(in srgb, var(--tag-sky) 12%, var(--page)); }
[data-theme="inkblot"] .sb-chip { background: #fff; box-shadow: inset 0 0 0 1px #000; color: #000; }

/* ---------- the creature ---------- */
.sb-creature { position: relative; display: inline-block; width: var(--cw, 180px); aspect-ratio: 1; }
.sb-creature svg { width: 100%; height: 100%; overflow: visible; }
.sb-creature .sbc-body { fill: var(--sbc-fur, #fff4f1); stroke: var(--art-line); stroke-width: 3; }
.sb-creature .sbc-ear-in { fill: var(--wash-rose); }
.sb-creature .sbc-arm { fill: none; stroke: var(--sbc-arm, #c99adb); stroke-width: 11; stroke-linecap: round; }
.sb-creature .sbc-arm-line { fill: none; stroke: var(--art-line); stroke-width: 3; stroke-linecap: round; }
.sb-creature .sbc-wing { fill: color-mix(in srgb, var(--wash-sky) 70%, transparent); stroke: var(--art-line); stroke-width: 2.5; }
.sb-creature .sbc-eye-a { fill: #e4a623; } .sb-creature .sbc-eye-b { fill: #3f7fd0; }
.sb-creature .sbc-pupil { fill: var(--art-line); } .sb-creature .sbc-glint { fill: #fff; }
.sb-creature .sbc-cheek { fill: var(--wash-rose); opacity: 0.85; }
.sb-creature .sbc-mouth { fill: none; stroke: var(--art-line); stroke-width: 2.5; stroke-linecap: round; }
.sb-creature .sbc-star { fill: var(--gamboge); stroke: var(--art-line); stroke-width: 1.5; }
.sb-creature .sbc-shadow { fill: var(--art-shade); opacity: 0.6; }
.sb-creature.is-idle svg { animation: sb-breathe 4.2s var(--ease-paper) infinite; transform-origin: 50% 90%; }
@keyframes sb-breathe { 50% { transform: scale(1.025, 0.985); } }
[data-theme="inkblot"] .sb-creature .sbc-eye-a, [data-theme="inkblot"] .sb-creature .sbc-eye-b { fill: #fff; stroke: #000; stroke-width: 1.5; }
[data-theme="inkblot"] .sb-creature { --sbc-fur: #ffffff; --sbc-arm: #000000; }
[data-theme="knight"] .sb-creature { --sbc-fur: #f4efe6; }
/* hide: "chimera": two off-whites split warm and cool like her eyes, drifting tag-color patches; ink blots in Ink Blot, none at night */
.sb-creature { --sbc-fur-w: color-mix(in srgb, var(--sbc-fur, #fff4f1) 88%, var(--tag-sun)); --sbc-fur-c: color-mix(in srgb, #f3f7fa 86%, var(--tag-sky)); }
.sb-creature .sbc-fur-w { fill: var(--sbc-fur-w); }
.sb-creature .sbc-fur-c { fill: var(--sbc-fur-c); }
.sb-creature .sbc-rim { fill: none; stroke: var(--art-line); stroke-width: 3; }
.sb-creature .sbc-patch--w { fill: color-mix(in srgb, var(--tag-rose) 74%, var(--sbc-fur-w)); animation: sbc-warm 46s ease-in-out infinite alternate; }
.sb-creature .sbc-patch--c { fill: color-mix(in srgb, var(--tag-sea) 74%, var(--sbc-fur-c)); animation: sbc-cool 61s ease-in-out infinite alternate; }
.sb-creature .sbc-ear-in--w { fill: color-mix(in srgb, var(--tag-rose) 55%, var(--wash-rose)); }
.sb-creature .sbc-ear-in--c { fill: color-mix(in srgb, var(--tag-sea) 50%, var(--wash-sky)); }
@keyframes sbc-warm { 0% { fill: color-mix(in srgb, var(--tag-rose) 74%, var(--sbc-fur-w)); } 33% { fill: color-mix(in srgb, var(--tag-sun) 74%, var(--sbc-fur-w)); } 67% { fill: color-mix(in srgb, var(--copper) 74%, var(--sbc-fur-w)); } 100% { fill: color-mix(in srgb, var(--wrapper) 74%, var(--sbc-fur-w)); } }
@keyframes sbc-cool { 0% { fill: color-mix(in srgb, var(--tag-sea) 74%, var(--sbc-fur-c)); } 33% { fill: color-mix(in srgb, var(--tag-lilac) 74%, var(--sbc-fur-c)); } 67% { fill: color-mix(in srgb, var(--tag-sky) 74%, var(--sbc-fur-c)); } 100% { fill: color-mix(in srgb, var(--sap) 74%, var(--sbc-fur-c)); } }
[data-theme="inkblot"] .sb-creature { --sbc-fur-w: #ffffff; --sbc-fur-c: #ffffff; }
[data-theme="inkblot"] .sb-creature :is(.sbc-patch--w, .sbc-patch--c, .sbc-ear-in--w, .sbc-ear-in--c) { fill: #000000; animation: none; }
[data-theme="knight"] .sb-creature .sbc-hide { display: none; }
[data-theme="knight"] .sb-creature :is(.sbc-fur-w, .sbc-fur-c) { fill: var(--sbc-fur); }
[data-theme="knight"] .sb-creature :is(.sbc-ear-in--w, .sbc-ear-in--c) { fill: var(--wash-rose); }

/* ---------- inputs ---------- */
.sb-toggle { display: inline-flex; align-items: center; gap: 0.75rem; min-height: var(--sb-target); cursor: pointer; font: 400 1.05rem/1.3 var(--sb-ui); color: var(--ink); }
.sb-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sb-toggle__track { position: relative; flex: none; width: 58px; height: 32px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink-muted); transition: background var(--dur-quick); }
.sb-toggle__thumb { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 4px; background: var(--page); box-shadow: 0 2px 0 var(--art-shade), inset 0 0 0 2px var(--ink);
  clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%); transition: transform var(--dur-quick) var(--ease-bounce); }
.sb-toggle input:checked + .sb-toggle__track { background: var(--cue-soft); box-shadow: inset 0 0 0 2px var(--cue); }
.sb-toggle input:checked + .sb-toggle__track .sb-toggle__thumb { transform: translateX(26px); background: var(--cue); box-shadow: 0 2px 0 var(--art-shade); }
.sb-toggle input:focus-visible + .sb-toggle__track { outline: var(--sb-focus-w) solid var(--focus); outline-offset: var(--sb-focus-off); }
.sb-toggle input:disabled ~ * { opacity: var(--op-disabled); }
.sb-slider { display: grid; gap: 0.4rem; font: 400 1.05rem/1.3 var(--sb-ui); color: var(--ink); }
.sb-slider__row { display: flex; justify-content: space-between; gap: 1rem; } .sb-slider__row output { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sb-slider input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 36px; background: transparent; cursor: pointer; }
.sb-slider input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--copper) 0 var(--p, 50%), var(--line) var(--p, 50%) 100%); }
.sb-slider input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
.sb-slider input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--copper); }
.sb-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; border: 2px solid var(--art-line);
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--accent) 45%, color-mix(in srgb, var(--accent) 70%, #000) 100%); }
.sb-slider input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--art-line); background: var(--accent); }
.sb-slider input[type="range"]:focus-visible { outline: var(--sb-focus-w) solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.sb-choice { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; border: 0; }
.sb-choice legend { margin-bottom: 0.5rem; font: 700 1rem/1.3 var(--sb-ui); color: var(--ink); }
.sb-choice label { position: relative; cursor: pointer; }
.sb-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sb-choice span { display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; padding: 0 1em; border-radius: var(--radius-pill); border: 2px solid var(--ink-muted); background: var(--page); color: var(--ink); font: 700 1rem/1 var(--sb-ui); }
.sb-choice input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.sb-choice input:focus-visible + span { outline: var(--sb-focus-w) solid var(--focus); outline-offset: var(--sb-focus-off); }
.sb-looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }
.sb-look { position: relative; display: grid; gap: 0.4rem; padding: 0.6rem; border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--page); color: var(--ink); text-align: left; cursor: pointer; font: 700 1rem/1.2 var(--sb-ui); box-shadow: var(--shadow-sticker); }
.sb-look__swatch { height: 64px; border-radius: 6px; background: var(--sw-paper); position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.sb-look__swatch i { position: absolute; border-radius: 50%; width: 46%; aspect-ratio: 1; opacity: 0.9; }
.sb-look__swatch i:nth-child(1) { left: -8%; top: -30%; background: var(--sw-a); } .sb-look__swatch i:nth-child(2) { right: -6%; bottom: -36%; background: var(--sw-b); }
.sb-look__swatch b { position: absolute; left: 10px; bottom: 8px; font: 400 1.4rem/1 var(--sw-font, var(--font-display)); color: var(--sw-ink); }
.sb-look[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.sb-look[aria-disabled="true"] { opacity: var(--op-disabled); }
.sb-look small { font-weight: 400; color: var(--ink-muted); }

/* ---------- overlays ---------- */
.sb-veil { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; place-items: center; padding: 1rem; background: var(--scrim); }
.sb-dialog { position: relative; isolation: isolate; width: min(34rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; padding: clamp(1.4rem, 4vw, 2.4rem); color: var(--ink); border: 0; background: transparent; }
dialog.sb-dialog::backdrop { background: var(--scrim); }
.sb-dialog::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--page); box-shadow: var(--shadow-lift); filter: var(--sb-sheet-filter); border-radius: 4px; }
.sb-dialog__title { margin: 0 0 0.5rem; font: var(--sb-display-weight) clamp(1.8rem, 3.6vw, 2.6rem)/1.05 var(--sb-display); font-variation-settings: "wdth" var(--sb-display-wdth); }
.sb-dialog__body { margin: 0 0 1.4rem; font: 400 1.15rem/1.5 var(--sb-story); color: var(--ink); }
.sb-dialog__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; }
dialog.sb-dialog[open] { animation: sb-arrive var(--dur-base) var(--ease-out); }
@keyframes sb-arrive { from { opacity: 0; transform: translateY(14px) rotate(-1deg); } }
.sb-drawer { position: fixed; top: 0; bottom: 0; right: 0; z-index: var(--z-drawer); width: min(26rem, 92vw); padding: 1.6rem 1.4rem; overflow: auto; color: var(--ink); isolation: isolate;
  transform: translateX(105%); transition: transform var(--dur-base) var(--ease-paper); }
.sb-drawer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--page); box-shadow: var(--shadow-lift); filter: var(--sb-sheet-filter); }
.sb-drawer.is-open { transform: none; }
.sb-drawer__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.sb-drawer__head h2 { margin: 0; font: var(--sb-display-weight) 1.8rem/1.1 var(--sb-display); }
.sb-drawer ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.sb-drawer li a, .sb-drawer li button { display: flex; gap: 0.8rem; align-items: center; width: 100%; min-height: var(--sb-target); padding: 0.4rem 0.6rem; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); font: 400 1.1rem/1.3 var(--sb-story); text-align: left; text-decoration: none; cursor: pointer; }
.sb-drawer li a:hover, .sb-drawer li button:hover, .sb-drawer li [aria-current="page"] { background: var(--cue-soft); }
.sb-drawer__veil { position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--dur-base); }
.sb-drawer__veil.is-open { opacity: 1; pointer-events: auto; }
.sb-toast { position: fixed; left: 50%; top: max(16px, env(safe-area-inset-top)); z-index: var(--z-overlay); display: flex; align-items: center; gap: 0.75rem; max-width: min(26rem, calc(100vw - 32px));
  padding: 0.75rem 1rem; translate: -50% 0; rotate: -1deg; color: var(--ink); background: color-mix(in srgb, var(--wash-sun) 82%, var(--page)); box-shadow: var(--shadow-sticker); font: 400 1.05rem/1.35 var(--sb-ui);
  animation: sb-arrive var(--dur-base) var(--ease-out); }
.sb-toast b { font-weight: 700; }
[data-theme="knight"] .sb-toast { background: var(--page); }
[data-theme="comix"] .sb-dialog::before, [data-theme="comix"] .sb-drawer::before { border: var(--border-comix) solid var(--line); border-radius: 0; filter: none; }
[data-theme="comix"] .sb-toast { border: var(--border-comix) solid var(--line); box-shadow: 4px 4px 0 var(--line); rotate: 0deg; }

/* ---------- transitions: fold and blot ---------- */
.sb-fold-host { position: relative; perspective: 1600px; }
.sb-fold-half { position: absolute; left: 0; right: 0; overflow: hidden; backface-visibility: hidden; transform-style: preserve-3d; z-index: 5; pointer-events: none; }
.sb-fold-half--top { top: 0; transform-origin: 50% 100%; } .sb-fold-half--bottom { bottom: 0; transform-origin: 50% 0; }
.sb-fold-half > * { position: absolute; left: 0; right: 0; }
.sb-fold-crease { position: absolute; left: 0; right: 0; height: 2px; top: 50%; z-index: 6; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.25), transparent); pointer-events: none; }
.sb-blot { -webkit-mask-image: var(--sb-blot-mask); mask-image: var(--sb-blot-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }

/* ---------- reduced motion and e-ink ---------- */
@media (prefers-reduced-motion: reduce) {
  .sb-bloom, .sb-stone[data-state="current"], .sb-brook__glint, .sb-creature.is-idle svg, .sb-creature .sbc-patch, .sb-sticker.is-new .sb-sticker__art, dialog.sb-dialog[open], .sb-toast, .sb-jar.is-bump { animation: none !important; }
  .sb-btn, .sb-stone, .sb-cover, .sb-seal, .sb-drawer, .sb-toggle__thumb { transition: none !important; }
  .sb-btn:hover, .sb-btn:active, .sb-stone:hover, a.sb-cover:hover, .sb-seal:hover { transform: none; }
}
[data-theme="inkblot"] *, [data-theme="inkblot"] *::before, [data-theme="inkblot"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
@media (forced-colors: active) { .sb-btn, .sb-stone, .sb-cover, .sb-choice span { border: 2px solid ButtonText; } .sb-wash, .sb-brook__wash { display: none; } }
@media print { .sb-reader, .sb-jar--fixed, .sb-drawer, .sb-toast { display: none !important; } .sb-body::before { display: none; } }

/* ---------- 1.2: guardians and taste ---------- */
.sb-guardian { position: absolute; z-index: var(--z-sticky); left: 0; top: 0; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: grab; touch-action: none; filter: drop-shadow(0 3px 0 var(--sb-shadow-c, rgba(0, 0, 0, .18))); transition: filter var(--dur-quick) var(--ease-out); }
.sb-guardian svg { display: block; width: 100%; height: 100%; }
.sb-guardian.is-held { cursor: grabbing; filter: drop-shadow(0 8px 6px var(--sb-shadow-c, rgba(0, 0, 0, .22))); }
.sb-guardian.is-on::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 3px solid var(--cue); }
.sb-guardian.is-asleep { display: none; }
.sb-guardian:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[data-theme="knight"] .sb-guardian { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--gamboge) 45%, transparent)); }
[data-theme="origami"] .sb-guardian svg { transform: rotate(-8deg); }
.sb-taste { position: fixed; z-index: var(--z-overlay); left: 16px; bottom: 16px; width: min(440px, calc(100vw - 32px)); max-height: 60vh; overflow: auto; background: var(--page); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius-md, 12px); font: 400 15px/1.45 var(--sb-ui); box-shadow: var(--shadow-page, 0 8px 24px rgba(0, 0, 0, .18)); }
.sb-taste summary { cursor: pointer; padding: 10px 14px; font-weight: 700; }
.sb-taste summary b { color: var(--danger); }
.sb-taste ol { margin: 0; padding: 0 14px 6px 34px; }
.sb-taste li { margin: 0 0 10px; }
.sb-taste li b { font-weight: 700; }
.sb-taste li.is-warn b { color: var(--danger); }
.sb-taste li span { display: block; }
.sb-taste li small { display: block; color: var(--ink-muted); font-size: 13px; word-break: break-word; }
.sb-taste p { margin: 0; padding: 0 14px 12px; color: var(--ink-muted); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .sb-guardian { transition: none; } }