/* Storeybrook — generated from tokens.json */
:root, [data-theme="daylight"] {
  --paper: #f4f6f2;
  --surface: #e9eee7;
  --page: #ffffff;
  --line: #cdd5ca;
  --ink: #26323f;
  --ink-muted: #55616c;
  --accent: var(--rose);
  --accent-soft: var(--rose-soft);
  --on-accent: var(--on-rose);
  --cue: var(--cerulean);
  --cue-soft: var(--cerulean-soft);
  --on-cue: var(--on-cerulean);
  --link: var(--cue);
  --danger: #b3261e;
  --focus: #2a6a9c;
  --scrim: rgba(244, 246, 242, 0.86);
  --chrome: rgba(255, 255, 255, 0.9);
  --rose: #b8325f;
  --rose-soft: #efe4e5;
  --on-rose: #ffffff;
  --cerulean: #2a6a9c;
  --cerulean-soft: #e2e9ea;
  --on-cerulean: #ffffff;
  --sap: #44702a;
  --sap-soft: #e4eae0;
  --on-sap: #ffffff;
  --gamboge: #d4920f;
  --gamboge-soft: #f1edde;
  --on-gamboge: #26323f;
  --copper: #8c5a2b;
  --copper-soft: #ebe8e0;
  --on-copper: #ffffff;
  --wash-sky: #c8e3f4;
  --wash-meadow: #cfe3b8;
  --wash-rose: #f3c6d3;
  --wash-sun: #f7dc97;
  --wash-brook: #8cc2e6;
  --art-line: #2f3b48;
  --art-light: #ffffff;
  --art-shade: #c7d3cf;
  --art-stone: #d9ddd4;
  --art-water: #6fb0dc;
  --paper-kami: #e46f7d;
  --paper-washi: #f3efe4;
  --paper-kraft: #b68a5b;
  --paper-foil: #cbd3d9;
  --nougat: #f2dcb8;
  --nougat-nut: #a8743f;
  --wrapper: #d94f7f;
  --tag-sun: #8a5a00;
  --tag-rose: #a3304f;
  --tag-lilac: #6a4fa3;
  --tag-sea: #1f6f5c;
  --tag-sky: #2a6a9c;
  --shadow-page: 0 1px 0 rgba(38, 50, 63, 0.06), 0 10px 30px rgba(38, 50, 63, 0.10);
  --shadow-lift: 0 18px 40px rgba(38, 50, 63, 0.18);
  --shadow-sticker: 0 2px 0 rgba(38, 50, 63, 0.15), 0 6px 14px rgba(38, 50, 63, 0.14);
  --shadow-seal: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 6px rgba(0, 0, 0, 0.25), 0 3px 8px rgba(38, 50, 63, 0.25);
  --shadow-ink: 0 1px 0 rgba(255, 255, 255, 0.7);
}
[data-theme="knight"] {
  --paper: #1c2838;
  --surface: #24334a;
  --page: #2a3a52;
  --line: #3d4f6b;
  --ink: #f4efe6;
  --ink-muted: #b7c2d2;
  --accent: var(--gamboge);
  --accent-soft: var(--gamboge-soft);
  --on-accent: var(--on-gamboge);
  --cue: var(--cerulean);
  --cue-soft: var(--cerulean-soft);
  --on-cue: var(--on-cerulean);
  --link: var(--cue);
  --danger: #ff8a7a;
  --focus: #f0c75e;
  --scrim: rgba(28, 40, 56, 0.84);
  --chrome: rgba(42, 58, 82, 0.9);
  --rose: #f29fb0;
  --rose-soft: #4b4252;
  --on-rose: #1c2838;
  --cerulean: #8fb4e8;
  --cerulean-soft: #35475f;
  --on-cerulean: #1c2838;
  --sap: #a9d98a;
  --sap-soft: #3b4f4a;
  --on-sap: #1c2838;
  --gamboge: #f0c75e;
  --gamboge-soft: #4b4b40;
  --on-gamboge: #1c2838;
  --copper: #e3b27a;
  --copper-soft: #484647;
  --on-copper: #1c2838;
  --wash-sky: #2f4a6e;
  --wash-meadow: #2c4a3d;
  --wash-rose: #5a3a52;
  --wash-sun: #6b5a2e;
  --wash-brook: #3d6a8c;
  --art-line: #0f1724;
  --art-light: #f4efe6;
  --art-shade: #16202e;
  --art-stone: #4a5a73;
  --art-water: #5a8fbf;
  --paper-kami: #e9b84a;
  --paper-washi: #3a4a63;
  --paper-kraft: #8b6a48;
  --paper-foil: #d4b26a;
  --nougat: #f2dcb8;
  --nougat-nut: #c78e52;
  --wrapper: #e87a9a;
  --tag-sun: #f3cf8a;
  --tag-rose: #f29fb0;
  --tag-lilac: #c4a2ff;
  --tag-sea: #8ff0d2;
  --tag-sky: #8fb4e8;
  --shadow-page: 0 1px 0 rgba(0, 0, 0, 0.3), 0 14px 40px rgba(5, 10, 20, 0.45);
  --shadow-lift: 0 22px 50px rgba(5, 10, 20, 0.6);
  --shadow-sticker: 0 2px 0 rgba(0, 0, 0, 0.4), 0 8px 18px rgba(0, 0, 0, 0.45);
  --shadow-seal: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 6px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.5);
  --shadow-ink: 0 2px 12px rgba(0, 0, 0, 0.6);
}
[data-theme="inkblot"] {
  --paper: #ffffff;
  --surface: #f0f0f0;
  --page: #ffffff;
  --line: #767676;
  --ink: #000000;
  --ink-muted: #3d3d3d;
  --accent: var(--rose);
  --accent-soft: var(--rose-soft);
  --on-accent: var(--on-rose);
  --cue: var(--cerulean);
  --cue-soft: var(--cerulean-soft);
  --on-cue: var(--on-cerulean);
  --link: var(--cue);
  --danger: #000000;
  --focus: #000000;
  --scrim: rgba(255, 255, 255, 0.94);
  --chrome: rgba(255, 255, 255, 1);
  --rose: #000000;
  --rose-soft: #e6e6e6;
  --on-rose: #ffffff;
  --cerulean: #000000;
  --cerulean-soft: #e6e6e6;
  --on-cerulean: #ffffff;
  --sap: #000000;
  --sap-soft: #e6e6e6;
  --on-sap: #ffffff;
  --gamboge: #000000;
  --gamboge-soft: #e6e6e6;
  --on-gamboge: #ffffff;
  --copper: #000000;
  --copper-soft: #e6e6e6;
  --on-copper: #ffffff;
  --wash-sky: #e2e2e2;
  --wash-meadow: #d6d6d6;
  --wash-rose: #dcdcdc;
  --wash-sun: #ececec;
  --wash-brook: #bdbdbd;
  --art-line: #000000;
  --art-light: #ffffff;
  --art-shade: #bdbdbd;
  --art-stone: #f2f2f2;
  --art-water: #9e9e9e;
  --paper-kami: #ffffff;
  --paper-washi: #ffffff;
  --paper-kraft: #f0f0f0;
  --paper-foil: #e8e8e8;
  --nougat: #ffffff;
  --nougat-nut: #000000;
  --wrapper: #000000;
  --tag-sun: #000000;
  --tag-rose: #000000;
  --tag-lilac: #000000;
  --tag-sea: #000000;
  --tag-sky: #000000;
  --shadow-page: 0 0 0 1px #000000;
  --shadow-lift: 0 0 0 2px #000000;
  --shadow-sticker: 0 0 0 1px #000000;
  --shadow-seal: 0 0 0 2px #000000;
  --shadow-ink: 0 0 0 rgba(0, 0, 0, 0);
}
[data-theme="comix"] {
  --paper: #fffdf5;
  --surface: #fff3c4;
  --page: #ffffff;
  --line: #111111;
  --ink: #111111;
  --ink-muted: #3a3a3a;
  --accent: var(--rose);
  --accent-soft: var(--rose-soft);
  --on-accent: var(--on-rose);
  --cue: var(--cerulean);
  --cue-soft: var(--cerulean-soft);
  --on-cue: var(--on-cerulean);
  --link: var(--cue);
  --danger: #c4001d;
  --focus: #111111;
  --scrim: rgba(255, 253, 245, 0.9);
  --chrome: rgba(255, 255, 255, 0.96);
  --rose: #c7006a;
  --rose-soft: #fae6e8;
  --on-rose: #ffffff;
  --cerulean: #00669e;
  --cerulean-soft: #e8efed;
  --on-cerulean: #ffffff;
  --sap: #22722e;
  --sap-soft: #ebf0e3;
  --on-sap: #ffffff;
  --gamboge: #ffd400;
  --gamboge-soft: #fff9df;
  --on-gamboge: #111111;
  --copper: #8a4a10;
  --copper-soft: #f4ede0;
  --on-copper: #ffffff;
  --wash-sky: #7fd3f5;
  --wash-meadow: #9bdc8f;
  --wash-rose: #ff9fd0;
  --wash-sun: #fff07a;
  --wash-brook: #38b6ee;
  --art-line: #111111;
  --art-light: #ffffff;
  --art-shade: #3a3a3a;
  --art-stone: #ffffff;
  --art-water: #00a8e8;
  --paper-kami: #ffd23f;
  --paper-washi: #fff8e1;
  --paper-kraft: #c9955d;
  --paper-foil: #d9dde2;
  --nougat: #ffe8b0;
  --nougat-nut: #8a4a10;
  --wrapper: #ff3ea5;
  --tag-sun: #7a5a00;
  --tag-rose: #b0005e;
  --tag-lilac: #5b3fa0;
  --tag-sea: #1d6e57;
  --tag-sky: #00669e;
  --shadow-page: 4px 4px 0 #111111;
  --shadow-lift: 7px 7px 0 #111111;
  --shadow-sticker: 3px 3px 0 #111111;
  --shadow-seal: 3px 3px 0 #111111;
  --shadow-ink: 2px 2px 0 #ffffff;
}
[data-theme="origami"] {
  --paper: #eceef0;
  --surface: #e0e5e9;
  --page: #ffffff;
  --line: #b8c1c8;
  --ink: #1f2a33;
  --ink-muted: #4c5965;
  --accent: var(--rose);
  --accent-soft: var(--rose-soft);
  --on-accent: var(--on-rose);
  --cue: var(--cerulean);
  --cue-soft: var(--cerulean-soft);
  --on-cue: var(--on-cerulean);
  --link: var(--cue);
  --danger: #b3261e;
  --focus: #2a4c86;
  --scrim: rgba(236, 238, 240, 0.88);
  --chrome: rgba(255, 255, 255, 0.92);
  --rose: #b8311a;
  --rose-soft: #e7dddd;
  --on-rose: #ffffff;
  --cerulean: #2a4c86;
  --cerulean-soft: #dbdfe6;
  --on-cerulean: #ffffff;
  --sap: #1f6f68;
  --sap-soft: #dae3e4;
  --on-sap: #ffffff;
  --gamboge: #d99a12;
  --gamboge-soft: #eae6dc;
  --on-gamboge: #1f2a33;
  --copper: #8a5a2a;
  --copper-soft: #e3e1de;
  --on-copper: #ffffff;
  --wash-sky: #c9d8ee;
  --wash-meadow: #bfe0d8;
  --wash-rose: #f6c3b8;
  --wash-sun: #f6dc9a;
  --wash-brook: #9ab6e0;
  --art-line: #2a3540;
  --art-light: #ffffff;
  --art-shade: #c8cfd6;
  --art-stone: #ffffff;
  --art-water: #5c86c9;
  --paper-kami: #d9452b;
  --paper-washi: #f1ece0;
  --paper-kraft: #b5875a;
  --paper-foil: #c4a24c;
  --nougat: #f2dcb8;
  --nougat-nut: #a8743f;
  --wrapper: #e2452c;
  --tag-sun: #7f5700;
  --tag-rose: #a8341c;
  --tag-lilac: #5a4a9a;
  --tag-sea: #1f6f68;
  --tag-sky: #2a4c86;
  --shadow-page: 0 1px 0 rgba(31, 42, 51, 0.08), 0 8px 24px rgba(31, 42, 51, 0.12);
  --shadow-lift: 0 18px 40px rgba(31, 42, 51, 0.2);
  --shadow-sticker: 0 2px 0 rgba(31, 42, 51, 0.15), 0 6px 14px rgba(31, 42, 51, 0.14);
  --shadow-seal: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 6px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(31, 42, 51, 0.25);
  --shadow-ink: 0 1px 0 rgba(255, 255, 255, 0.7);
}
[data-theme="skein"] {
  --paper: #f6ecee;
  --surface: #eee0e4;
  --page: #fffafb;
  --line: #dcc3ca;
  --ink: #3a2330;
  --ink-muted: #6b4f5c;
  --accent: var(--copper);
  --accent-soft: var(--copper-soft);
  --on-accent: var(--on-copper);
  --cue: var(--sap);
  --cue-soft: var(--sap-soft);
  --on-cue: var(--on-sap);
  --link: var(--cue);
  --danger: #a3241e;
  --focus: #93305a;
  --scrim: rgba(246, 236, 238, 0.88);
  --chrome: rgba(255, 250, 251, 0.92);
  --rose: #93305a;
  --rose-soft: #eddbe1;
  --on-rose: #ffffff;
  --cerulean: #2f5f8a;
  --cerulean-soft: #e4dfe5;
  --on-cerulean: #ffffff;
  --sap: #1a6e56;
  --sap-soft: #e2e1e0;
  --on-sap: #ffffff;
  --gamboge: #c98a2a;
  --gamboge-soft: #f2e3dc;
  --on-gamboge: #3a2330;
  --copper: #9c4d1c;
  --copper-soft: #eededb;
  --on-copper: #ffffff;
  --wash-sky: #d8e3f2;
  --wash-meadow: #cfe8dc;
  --wash-rose: #f2c6d2;
  --wash-sun: #f5ddb8;
  --wash-brook: #a9c9e6;
  --art-line: #3a2330;
  --art-light: #fffafb;
  --art-shade: #e3c9d0;
  --art-stone: #efe3dc;
  --art-water: #86b4d8;
  --paper-kami: #e7a6b4;
  --paper-washi: #f8eeea;
  --paper-kraft: #c49a7a;
  --paper-foil: #c98f6a;
  --nougat: #f6e2c4;
  --nougat-nut: #9c5a2a;
  --wrapper: #c96a8a;
  --tag-sun: #8a5418;
  --tag-rose: #93305a;
  --tag-lilac: #6a4a8a;
  --tag-sea: #1a6e56;
  --tag-sky: #2f5f8a;
  --shadow-page: 0 1px 0 rgba(58, 35, 48, 0.06), 0 10px 30px rgba(58, 35, 48, 0.10);
  --shadow-lift: 0 18px 40px rgba(58, 35, 48, 0.18);
  --shadow-sticker: 0 2px 0 rgba(58, 35, 48, 0.12), 0 6px 14px rgba(58, 35, 48, 0.12);
  --shadow-seal: inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 6px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(58, 35, 48, 0.25);
  --shadow-ink: 0 1px 0 rgba(255, 255, 255, 0.7);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 112px;
  --space-10: 168px;
  --radius-none: 0;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --z-art: 0;
  --z-content: 10;
  --z-stone: 20;
  --z-sticky: 40;
  --z-reader: 50;
  --z-drawer: 60;
  --z-overlay: 1000;
  --z-drop: 2000;
  --dur-tap: 120ms;
  --dur-quick: 220ms;
  --dur-base: 420ms;
  --dur-turn: 700ms;
  --dur-drop: 900ms;
  --dur-bleed: 1600ms;
  --ease-out: cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-paper: cubic-bezier(0.45, 0.05, 0.25, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bp-medium: 640px;
  --bp-expanded: 1024px;
  --bp-wide: 1600px;
  --bp-tv: 1800px;
  --size-root: clamp(16px, 0.42vw + 10px, 28px);
  --size-target: 48px;
  --size-stone: 56px;
  --size-cover: 260px;
  --size-measure: 60ch;
  --size-page: 680px;
  --size-reader: 560px;
  --size-jar: 72px;
  --size-container: 1280px;
  --op-grain: 0.2;
  --op-wash: 0.85;
  --op-disabled: 0.45;
  --border-pencil: 1px;
  --border-ink: 2px;
  --border-comix: 3px;
  --border-focus: 3px;
  --border-focus-offset: 3px;
  --shape-blob: 58% 42% 55% 45% / 46% 54% 46% 54%;
  --shape-stone: 52% 48% 46% 54% / 60% 58% 42% 40%;
  --shape-seal: 49% 51% 47% 53% / 52% 47% 53% 48%;
  --shape-tag: 6px 6px 6px 6px;
  --density-regular: 1;
  --density-kid: 1.15;
  --density-tv: 1.5;
  --tex-grain-size: 160px;
  --tex-deckle: 6;
  --tex-bleed: 14;
  --tex-halftone: 6px;
  --tex-fold-light: 135;
  --tex-fold-elevation: 48;
  --tex-fold-crease: 0.5;
  --tex-fold-shadow: 0.32;
  --tex-fold-grain: 0.1;
  --font-display: "DynaPuff", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --font-story: "Alegreya", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-ui: "Andika", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-old: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --font-comic: "Bangers", "Impact", "Arial Black", sans-serif;
  --font-comic-text: "Comic Neue", "Comic Sans MS", "Chalkboard SE", sans-serif;
  --font-fold: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", sans-serif;
  --font-hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
}
.display-xl { font-family: var(--font-display); font-size: 112px; line-height: 0.92; font-weight: 600; letter-spacing: -0.02em; }
.display-l { font-family: var(--font-display); font-size: 72px; line-height: 0.95; font-weight: 600; letter-spacing: -0.015em; }
.display-m { font-family: var(--font-display); font-size: 44px; line-height: 1.05; font-weight: 500; letter-spacing: -0.01em; }
.display-s { font-family: var(--font-display); font-size: 28px; line-height: 1.1; font-weight: 500; }
.story-lede { font-family: var(--font-story); font-size: 26px; line-height: 1.45; font-weight: 400; }
.story-body { font-family: var(--font-story); font-size: 20px; line-height: 1.6; font-weight: 400; }
.story-italic { font-family: var(--font-story); font-size: 20px; line-height: 1.6; font-weight: 400; font-style: italic; }
.dropcap { font-family: var(--font-story); font-size: 96px; line-height: 0.8; font-weight: 700; }
.title { font-family: var(--font-ui); font-size: 22px; line-height: 1.3; font-weight: 700; }
.button { font-family: var(--font-ui); font-size: 18px; line-height: 1.2; font-weight: 700; }
.label { font-family: var(--font-ui); font-size: 16px; line-height: 1.4; font-weight: 400; }
.small { font-family: var(--font-ui); font-size: 14px; line-height: 1.4; font-weight: 400; }
.count { font-family: var(--font-ui); font-size: 20px; line-height: 1; font-weight: 700; }
.note { font-family: var(--font-hand); font-size: 26px; line-height: 1.15; font-weight: 500; }
.comic-shout { font-family: var(--font-comic); font-size: 64px; line-height: 0.95; font-weight: 400; letter-spacing: 0.01em; }
.balloon { font-family: var(--font-comic-text); font-size: 19px; line-height: 1.35; font-weight: 700; }