* { box-sizing: border-box; }
:root { color-scheme: light; --ink: #203c40; --muted: #53635e; --paper: #fff9ed; --ground: #f2efe7; --line: #b5baac; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 17px; line-height: 1.5; }
[hidden] { display: none !important; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { min-height: 44px; padding: 10px 17px; border: 1px solid #84938a; border-radius: 6px; background: #fffcf5; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.35; cursor: pointer; }
button:hover:not(:disabled) { background: #e7ebdf; border-color: var(--ink); }
button:disabled { color: #64716b; background: #e5e5dc; border-color: #a6afa4; cursor: default; }
button.primary { background: var(--ink); border-color: var(--ink); color: #fff9ed; }
button.primary:hover:not(:disabled) { background: #355a58; }
button.primary:disabled { background: #657673; color: #fff; }
:focus-visible { outline: 3px solid #a55122; outline-offset: 4px; }
input:focus-visible { outline-offset: 2px; }
a { color: inherit; text-underline-offset: 5px; }
.site-header { min-height: 88px; padding: 18px 36px; display: flex; align-items: center; justify-content: space-between; gap: 22px; color: var(--paper); background: var(--ink); }
.brand { display: flex; align-items: center; gap: 16px; font-family: Georgia, 'Times New Roman', serif; font-size: 27px; font-weight: 700; line-height: 1.2; }
.moon-mark { width: 35px; height: 35px; border-radius: 50%; background: #f5dfa1; flex: 0 0 35px; position: relative; overflow: hidden; }
.moon-mark::after { content: ''; position: absolute; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); left: 11px; top: -5px; }
.catalog-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px; flex: 0 0 auto; font-size: 16px; }
.site-header :focus-visible { outline-color: #f5dfa1; }
.skip-link { position: absolute; top: -100px; left: 12px; padding: 12px; background: var(--paper); z-index: 10; }
.skip-link:focus { top: 8px; }
main { max-width: 1520px; margin: 0 auto; padding: 30px 36px 44px; }
main:focus { outline: none; }
h1, h2, h3, p { margin-top: 0; }
.workspace { display: grid; grid-template-columns: 324px minmax(0, 1fr); gap: 36px; align-items: start; }
.editor { border-right: 1px solid #d5d8ce; padding-right: 24px; }
.editor h1 { font-size: 23px; line-height: 1.3; margin-bottom: 8px; letter-spacing: -.5px; }
.editor-intro { color: var(--muted); font-size: 16px; margin-bottom: 25px; }
label, legend { font-size: 16px; font-weight: 600; }
.name-field > label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.optional { color: var(--muted); font-size: 14px; font-weight: 400; }
input[type='text'] { width: 100%; min-height: 48px; padding: 10px 13px; color: var(--ink); background: #fffcf5; border: 1px solid #80908a; border-radius: 6px; }
input[aria-invalid='true'] { border: 2px solid #a33525; }
.helper { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 7px 0 0; }
.error { font-size: 14px; line-height: 1.45; color: #972d21; margin: 7px 0 0; }
fieldset { margin: 23px 0 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 9px; }
.colour-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.option { position: relative; background: #fffcf5; border: 1px solid #a7afa5; border-radius: 6px; cursor: pointer; min-height: 48px; }
.option:has(input:checked) { background: #eee7f3; border-color: #745096; box-shadow: inset 0 0 0 1px #745096; }
.option:has(input:focus-visible) { outline: 3px solid #a55122; outline-offset: 3px; }
.option:hover { border-color: var(--ink); }
.colour-option, .animal-option { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 10px 3px 7px; font-size: 14px; min-height: 79px; }
.colour-option input, .animal-option input { width: 19px; height: 19px; flex: 0 0 19px; margin: 0; accent-color: #745096; cursor: pointer; }
.swatch { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.colour-option:has(input:checked) .swatch::after { content: '✓'; color: white; font-weight: 800; font-size: 19px; }
.purple { background: #745096; }
.blue { background: #3e7197; }
.green { background: #49764e; }
.orange { background: #b45b29; }
.animal-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.animal-symbol { display: block; width: 30px; height: 24px; background: var(--ink); }
.cat-symbol { clip-path: polygon(0 0, 29% 24%, 71% 24%, 100% 0, 96% 75%, 76% 97%, 24% 97%, 4% 75%); }
.rabbit-symbol { height: 28px; border-radius: 45%; background: radial-gradient(ellipse at 32% 27%, #203c40 0 19%, transparent 21%), radial-gradient(ellipse at 68% 27%, #203c40 0 19%, transparent 21%), radial-gradient(ellipse at 50% 77%, #203c40 0 43%, transparent 45%); }
.fox-symbol { background: #a65b33; clip-path: polygon(0 0, 40% 23%, 60% 23%, 100% 0, 89% 67%, 50% 100%, 11% 67%); }
.branch-options { display: grid; gap: 9px; }
.branch-option { display: flex; align-items: center; gap: 10px; padding: 12px; font-size: 15px; }
.branch-option input { margin: 0; width: 19px; height: 19px; flex: 0 0 19px; accent-color: #745096; }
.branch-option input:focus-visible { outline: none; }
.wide { width: 100%; }
#create-book { margin-top: 23px; min-height: 51px; font-size: 17px; }
.text-button { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 5px; font-size: 14px; margin-top: 9px; }
.privacy-note, .authored-note { font-size: 14px; color: var(--muted); margin: 19px 0 0; }
.authored-note { margin-top: 8px; }
.confirmation { background: #fffcf5; padding: 16px; border: 1px solid #745096; border-radius: 6px; margin-top: 10px; }
.confirmation h2 { font-size: 17px; margin-bottom: 8px; }
.confirmation p { font-size: 14px; }
.confirmation-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.confirmation-actions button { font-size: 14px; padding: 10px; }
.book-workspace { min-width: 0; }
.workspace-heading h2 { font-family: Georgia, 'Times New Roman', serif; font-size: 29px; letter-spacing: -.5px; line-height: 1.2; margin-bottom: 7px; }
.book-identity { color: #655078; font-size: 16px; margin-bottom: 3px; overflow-wrap: anywhere; }
.choice-label { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.book-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.book-actions button { padding-inline: 16px; }
.status { min-height: 21px; margin: 10px 0 12px; font-size: 14px; color: #4e6152; }
.page-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.page-strip button { display: flex; align-items: center; justify-content: center; gap: 9px; background: transparent; border-color: #c5c9bc; font-size: 14px; padding: 8px; }
.page-strip button[aria-current='page'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.page-number { font-family: Georgia, 'Times New Roman', serif; font-size: 20px; }
.page-strip button.branch-updated:not([aria-current='page']) { border: 2px solid #745096; background: #eee7f3; }
.book-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(265px, 1fr); gap: 24px; align-items: start; }
.current-page { min-width: 0; }
.sheet { --accent: #9671b3; --accent-dark: #745096; --accent-light: #c4a0da; position: relative; background: var(--paper); border: 1px solid #d4cebb; border-radius: 7px; padding: 24px 28px 19px; box-shadow: 6px 7px 0 #dedacc; overflow-wrap: anywhere; }
.sheet::before { content: ''; position: absolute; top: 15px; bottom: 15px; left: 11px; border-left: 2px solid #e6ddc9; }
.theme-purple { --accent: #9671b3; --accent-dark: #745096; --accent-light: #c4a0da; }
.theme-blue { --accent: #6399ba; --accent-dark: #3e7197; --accent-light: #a3cee6; }
.theme-green { --accent: #72a369; --accent-dark: #49764e; --accent-light: #b7d99d; }
.theme-orange { --accent: #d5864a; --accent-dark: #b45b29; --accent-light: #f3bd7c; }
.page-kicker { font-size: 12px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: #59665b; margin-bottom: 13px; }
.sheet h3 { font-family: Georgia, 'Times New Roman', serif; font-size: 29px; line-height: 1.12; margin-bottom: 17px; text-wrap: balance; }
.sheet h3:focus { outline: none; }
.sheet h3:focus-visible { outline: 3px solid #a55122; outline-offset: 5px; }
.cover h3 { text-align: center; font-size: clamp(30px, 2.8vw, 44px); }
.cover-name { display: block; font-size: .86em; margin-bottom: 4px; }
.story-figure { margin: 0 0 18px; }
.story-art { display: block; width: 100%; height: auto; }
.accent { fill: var(--accent); }
.accent-light { fill: var(--accent-light); }
.accent-dark { fill: var(--accent-dark); }
.accent-stroke { stroke: var(--accent); }
.story-figure figcaption { font-size: 12px; line-height: 1.5; color: #59665b; text-align: center; margin: 8px 4px 0; }
.story-prose p { font-size: 17px; line-height: 1.6; margin-bottom: 13px; }
.story-prose p:last-child { margin-bottom: 0; }
.cover .story-prose p { font-family: Georgia, 'Times New Roman', serif; font-size: 21px; text-align: center; }
.page-footer { margin: 20px 0 0; padding-top: 10px; border-top: 1px solid #e2dece; display: flex; justify-content: space-between; gap: 12px; color: #655078; font-size: 12px; }
.page-footer span:first-child { min-width: 0; }
.page-footer span:last-child { flex: 0 0 auto; }
.page-summaries { display: grid; gap: 16px; }
.summary { display: block; width: 100%; padding: 17px 19px; border: 1px solid #d4cebb; border-radius: 6px; background: var(--paper); text-align: left; cursor: pointer; font-weight: 400; }
.summary:hover:not(:disabled) { background: #fffdf6; border-color: #745096; }
.summary-heading { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.summary-number { display: inline-grid; place-items: center; min-width: 27px; height: 27px; border-radius: 50%; background: var(--ink); color: white; font-size: 14px; flex: 0 0 27px; }
.summary-title { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 21px; line-height: 1.2; overflow-wrap: anywhere; }
.summary-prose { display: block; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.summary.changed { border: 2px solid #9877ae; }
.summary.changed .summary-number { background: #745096; }
.reading-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; max-width: 560px; }
.reading-navigation span { font-size: 14px; text-align: center; }
.reading-hint { font-size: 14px; color: var(--muted); margin: 14px 0 0; }
.reader-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; }
.reader-toolbar p { font-size: 16px; margin: 0; color: var(--muted); }
.reading-mode .workspace { display: block; max-width: 820px; margin: 0 auto; }
.reading-mode .book-layout { display: block; }
.reading-mode .sheet { padding: 30px 44px 22px; }
.reading-mode .sheet h3 { font-size: 36px; }
.reading-mode .cover h3 { font-size: 44px; }
.reading-mode .story-art { max-height: 350px; }
.reading-mode .story-prose p { font-size: 22px; line-height: 1.65; }
.reading-mode .cover .story-prose p { font-size: 25px; }
.reading-mode .reading-navigation { max-width: none; }
.reading-mode .reading-navigation button { min-height: 52px; min-width: 112px; font-size: 18px; }
.preview-toolbar { display: flex; align-items: start; justify-content: space-between; gap: 30px; margin: 0 auto 28px; max-width: 1100px; }
.preview-toolbar h1 { font-family: Georgia, 'Times New Roman', serif; font-size: 32px; margin-bottom: 8px; }
.preview-toolbar p { font-size: 16px; color: var(--muted); max-width: 530px; }
.preview-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.print-pages { max-width: 760px; margin: 0 auto; display: grid; gap: 32px; }
.print-pages .sheet { padding: 35px 45px 25px; }
.print-pages .story-art { max-height: 365px; }
.print-pages .story-prose p { font-size: 20px; }
.notice { background: var(--paper); border: 1px solid var(--line); padding: 24px; }
@media (min-width: 1600px) { .cover h3 { font-size: 44px; } }
@media (max-width: 1279px) {
  main { padding: 26px; }
  .workspace { grid-template-columns: 300px minmax(0, 1fr); gap: 26px; }
  .editor { padding-right: 21px; }
  .book-layout { display: block; }
  .page-summaries { display: none; }
  .current-page { max-width: 740px; margin: 0 auto; }
  .sheet { padding: 24px 30px; }
  .story-art { max-height: 350px; }
  .cover h3 { font-size: 39px; }
  .reading-navigation { max-width: none; }
  .page-strip button { gap: 6px; }
}
@media (max-width: 800px) {
  .site-header { padding: 16px 20px; }
  .brand { font-size: 23px; }
  main { padding: 23px 20px 36px; }
  .workspace { display: flex; flex-direction: column; gap: 32px; }
  .book-workspace { width: 100%; order: 0; }
  .editor { width: 100%; order: 1; padding: 26px 0 0; border-right: 0; border-top: 1px solid #c5c9bc; }
  .editor form { max-width: 560px; }
  .editor > button, .editor .confirmation { max-width: 560px; }
  .editor-intro { margin-bottom: 22px; }
  .colour-options { gap: 10px; }
  .animal-options { gap: 10px; }
  .colour-option, .animal-option { min-height: 75px; }
  .book-layout { max-width: 740px; margin-inline: auto; }
  .workspace-heading h2 { font-size: 28px; }
  .preview-toolbar { flex-direction: column; gap: 8px; }
}
@media (max-width: 480px) {
  .site-header { gap: 10px; min-height: 80px; padding: 12px 16px; }
  .brand { font-size: 20px; gap: 9px; max-width: 225px; }
  .moon-mark { flex-basis: 28px; width: 28px; height: 28px; }
  .moon-mark::after { width: 26px; height: 26px; left: 9px; }
  .catalog-link { font-size: 14px; padding: 5px 0 5px 7px; white-space: nowrap; }
  main { padding: 22px 16px 32px; }
  .workspace-heading h2 { font-size: 27px; }
  .book-actions { display: grid; grid-template-columns: 1fr 1fr; }
  #read-book { grid-column: 1 / -1; }
  .book-actions button { font-size: 14px; padding-inline: 7px; min-height: 46px; }
  .page-strip { gap: 5px; }
  .page-strip button { flex-direction: column; gap: 1px; font-size: 12px; padding: 6px 2px; }
  .page-number { font-size: 19px; }
  .sheet, .reading-mode .sheet, .print-pages .sheet { padding: 20px 20px 18px 25px; box-shadow: 4px 5px 0 #dedacc; }
  .sheet::before { left: 9px; }
  .sheet h3, .reading-mode .sheet h3 { font-size: 28px; }
  .cover h3, .reading-mode .cover h3 { font-size: 32px; }
  .story-prose p, .print-pages .story-prose p { font-size: 17px; }
  .reading-mode .story-prose p { font-size: 20px; }
  .cover .story-prose p, .reading-mode .cover .story-prose p { font-size: 21px; }
  .story-figure { margin-bottom: 15px; }
  .page-footer { flex-wrap: wrap; gap: 4px 12px; }
  .colour-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colour-option { flex-direction: row; gap: 13px; min-height: 52px; padding: 10px; }
  .reader-toolbar { flex-direction: column; align-items: start; gap: 10px; }
  .reader-toolbar p { font-size: 14px; }
  .reading-mode .reading-navigation button { min-width: 92px; padding-inline: 12px; font-size: 16px; }
  .preview-actions { width: 100%; }
  .preview-actions button { flex: 1 1 150px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }
@page { size: A4 portrait; margin: 14mm; }
@media print {
  html, body { margin: 0; padding: 0; background: white; color: #203c40; }
  .site-header, .skip-link, #workspace, .preview-toolbar, noscript { display: none !important; }
  main, #app, #print-view, #print-view[hidden], #print-pages { display: block !important; width: auto; max-width: none; margin: 0; padding: 0; }
  .print-pages .sheet { width: 100%; height: 260mm; margin: 0; padding: 8mm 9mm 5mm; border: 0; border-radius: 0; box-shadow: none; background: white; break-after: page; page-break-after: always; break-inside: avoid; page-break-inside: avoid; }
  .print-pages .sheet:last-child { break-after: auto; page-break-after: auto; }
  .sheet::before { display: none; }
  .print-pages .sheet h3 { font-size: 26pt; line-height: 1.12; margin-bottom: 5mm; }
  .print-pages .cover h3 { font-size: 32pt; }
  .page-kicker { font-size: 10pt; margin-bottom: 4mm; }
  .print-pages .story-art { width: 100%; height: 85mm; max-height: 85mm; }
  .print-pages .cover .story-art { height: 105mm; max-height: 105mm; }
  .story-figure { margin-bottom: 5mm; }
  .story-figure figcaption { font-size: 10pt; }
  .print-pages .story-prose p { font-size: 16pt; line-height: 1.5; margin-bottom: 3mm; }
  .print-pages .cover .story-prose p { font-size: 20pt; }
  .page-footer { font-size: 10pt; margin-top: 6mm; padding-top: 3mm; }
  .story-art { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}