body.atlas-storybook-body,
body.atlas-storybook-body * { box-sizing:border-box; }
html { min-height:100%; overflow-x:hidden; }
body.atlas-storybook-body {
  margin:0;
  min-height:100%;
  background:transparent;
  color:#795c5d;
  font-family:system-ui,sans-serif;
  --paper:#fffaf1;
  --story-muted:#9a8487;
  --story-pink:#d97890;
  --shadow:0 16px 40px rgba(134,97,88,.12);
}
body.atlas-storybook-body a,
body.atlas-storybook-body button { font:inherit; color:inherit; }
body.atlas-storybook-body button { cursor:pointer; }

.atlas-storybook-wrap { width:100%; margin:0 auto; padding:0 0 34px; }
.atlas-storybook-topbar {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:56px; padding-top:max(16px, env(safe-area-inset-top));
}
.atlas-storybook-account-actions { display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.atlas-storybook-account-actions .dream-back-pill { min-height:36px; padding-inline:12px; white-space:nowrap; }
.atlas-storybook-action-row { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.atlas-storybook-pill,
.atlas-storybook-action,
.atlas-storybook-ghost-btn,
.atlas-storybook-primary-btn {
  min-height:38px; padding:0 14px; border:1px solid rgba(217,120,143,.18);
  border-radius:999px; background:rgba(255,253,248,.82); color:#876f73;
}
.atlas-storybook-action { font-size:14px; font-weight:600; }

.atlas-storybook-heading { margin:6px auto 16px; text-align:center; }
.atlas-storybook-heading p { margin:0 0 6px; color:#b58c93; font-size:11px; letter-spacing:.18em; }
.atlas-storybook-heading h1 { margin:0; color:var(--atlas-title,#6d4f53); font-size:clamp(25px,6vw,31px); letter-spacing:.03em; }

.atlas-storybook-resume {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px;
  min-height:68px; margin-bottom:14px; padding:12px 14px; border:1px solid rgba(217,120,143,.14);
  border-radius:22px; background:rgba(255,251,245,.78); box-shadow:var(--shadow);
}
.atlas-storybook-resume[hidden] { display:none !important; }
.atlas-storybook-resume > span { display:block; min-width:0; }
.atlas-storybook-resume small { display:block; margin-bottom:3px; color:#b69ea0; }
.atlas-storybook-resume strong { display:block; overflow:hidden; color:#7c6467; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.atlas-storybook-btns { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.atlas-storybook-ghost-btn,
.atlas-storybook-primary-btn { min-height:38px; font-size:13px; font-weight:650; }
.atlas-storybook-ghost-btn:disabled { opacity:.38; cursor:default; }
.atlas-storybook-primary-btn { border-color:transparent; background:#ce7188; color:#fff !important; }

.atlas-storybook-stage { position:relative; margin-top:10px; }
.atlas-storybook-stage-doodle { position:absolute; z-index:1; color:#f3c68c; font-size:22px; opacity:.84; pointer-events:none; }
.atlas-storybook-stage-doodle.atlas-storybook-one { top:4px; left:18px; }
.atlas-storybook-stage-doodle.atlas-storybook-two { top:12px; right:26px; color:#e7adc3; }
.atlas-storybook-stage-doodle.atlas-storybook-three { bottom:24px; left:60px; color:#bad0ef; }
.atlas-storybook-book-outer {
  position:relative; overflow:visible; padding:0; border:0; border-radius:0;
  background:transparent; box-shadow:none;
}
.atlas-storybook-book-outer::before,
.atlas-storybook-book-outer::after {
  display:none;
}
.atlas-storybook-book-area { position:relative; display:flex; justify-content:center; align-items:center; width:100%; perspective:1800px; }
.atlas-storybook-book {
  position:relative; z-index:2; width:min(86vw,388px); aspect-ratio:1447 / 2048;
  margin:0 auto; filter:drop-shadow(0 14px 18px rgba(100,71,63,.14)); touch-action:pan-y;
}
.atlas-storybook-page-stack,
.atlas-storybook-page-backdrop,
.atlas-storybook-page-turn { position:absolute; inset:0; border-radius:10px 15px 15px 10px; }
.atlas-storybook-page-stack {
  z-index:0; transform:translate(5px,7px); border:1px solid rgba(159,121,103,.22);
  background:linear-gradient(90deg,#f1ded1 0 2%,#fff8ed 2% 96%,#ead2c4 96% 100%);
  box-shadow:4px 4px 0 #f1e3d7,7px 7px 0 rgba(226,206,191,.75);
}
.atlas-storybook-page-backdrop { z-index:1; overflow:hidden; background:var(--paper); }
.atlas-storybook-page-backdrop::after {
  position:absolute; inset:0; content:""; pointer-events:none; opacity:0;
  background:linear-gradient(270deg,rgba(93,65,57,.22),rgba(93,65,57,.08) 10%,transparent 28%);
  transition:opacity .16s ease;
}
.atlas-storybook-book.atlas-storybook-flip-prev .atlas-storybook-page-backdrop::after { opacity:1; }
.atlas-storybook-page-backdrop img,
.atlas-storybook-page-paper img { display:block; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; }
.atlas-storybook-page-backdrop img { position:absolute; inset:0; opacity:0; }
.atlas-storybook-page-backdrop img.is-active { opacity:1; }
.atlas-storybook-page-turn { z-index:3; transform-style:preserve-3d; will-change:transform; cursor:grab; }
.atlas-storybook-page-turn:active { cursor:grabbing; }
.atlas-storybook-page-turn:focus-visible { outline:3px solid rgba(217,120,143,.35); outline-offset:4px; }
.atlas-storybook-page-paper {
  position:absolute; inset:0; overflow:hidden; border:1px solid rgba(146,111,93,.24);
  border-radius:10px 15px 15px 10px; background:var(--paper);
  transform-style:preserve-3d; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:inset 11px 0 17px rgba(135,101,83,.07), inset -1px 0 rgba(255,255,255,.5);
}
.atlas-storybook-page-paper img { pointer-events:none; }
.atlas-storybook-page-gloss,
.atlas-storybook-page-curl { position:absolute; inset:0; pointer-events:none; }
.atlas-storybook-page-gloss {
  background:linear-gradient(90deg,rgba(255,255,255,.16),transparent 18%,transparent 82%,rgba(107,75,60,.05));
}
.atlas-storybook-page-curl {
  opacity:0; background:linear-gradient(90deg,transparent 46%,rgba(107,77,69,.11) 69%,rgba(255,255,255,.44) 91%);
  transition:opacity .12s ease;
}
.atlas-storybook-book.atlas-storybook-is-dragging .atlas-storybook-page-curl,
.atlas-storybook-book.atlas-storybook-is-flipping .atlas-storybook-page-curl { opacity:1; }
.atlas-storybook-spine {
  position:absolute; z-index:4; top:1.4%; bottom:1.4%; left:-1px; width:11px;
  border-radius:10px 0 0 10px; background:linear-gradient(90deg,rgba(116,81,70,.18),rgba(255,255,255,.22),transparent);
  pointer-events:none;
}
.atlas-storybook-meta {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:min(86vw,388px); margin:14px auto 0; padding:0 2px;
}
.atlas-storybook-meta .atlas-storybook-chapter { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.atlas-storybook-meta .atlas-storybook-chapter { color:#7f666a; font-size:12px; font-weight:700; }
.atlas-storybook-meta .atlas-storybook-counter { color:#9f8b8e; font-size:11px; letter-spacing:.1em; white-space:nowrap; }
.atlas-storybook-meta .atlas-storybook-counter b { color:#c36f82; font-size:14px; }
.atlas-storybook-controls {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px;
  width:min(92vw,430px); margin:10px auto 0;
}
.atlas-storybook-controls button { min-height:38px; padding:0 10px; font-size:11px; }
.atlas-storybook-controls .atlas-storybook-hint { margin:0; color:var(--story-muted); font-size:10px; line-height:1.35; text-align:center; }
.atlas-storybook-progress { width:min(70vw,300px); height:4px; margin:11px auto 0; overflow:hidden; border-radius:999px; background:rgba(202,159,154,.18); }
.atlas-storybook-progress span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#d88a9a,#e6b379); transition:width .25s ease; }
.atlas-storybook-read-tip { margin:8px 0 0; color:#a08c8f; font-size:9px; text-align:center; }

.atlas-storybook-end-card {
  margin-top:16px; padding:18px 16px; border:1px dashed rgba(214,128,146,.3);
  border-radius:20px; background:rgba(255,250,243,.84); text-align:center;
}
.atlas-storybook-end-card[hidden] { display:none !important; }
.atlas-storybook-end-card h2 { margin:4px 0; color:#795c5d; font-size:17px; }
.atlas-storybook-end-card p { margin:0; color:#9a8487; font-size:11px; }
.atlas-storybook-end-card .atlas-storybook-btns { justify-content:center; margin-top:12px; }

.atlas-storybook-dialog-sheet {
  width:min(720px,calc(100vw - 18px)); overflow:hidden; border:1px solid rgba(217,120,143,.14);
  border-radius:24px; background:#fffaf4; box-shadow:0 22px 48px rgba(90,62,63,.24);
}
.atlas-storybook-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 16px 12px; }
.atlas-storybook-dialog-head small { display:block; margin-bottom:4px; color:#c49ca4; font-size:11px; letter-spacing:.14em; }
.atlas-storybook-dialog-head h2 { margin:0; color:#7d6063; font-size:24px; }
.atlas-storybook-close-x {
  flex:0 0 36px; width:36px; height:36px; border:1px solid rgba(217,120,143,.18);
  border-radius:999px; background:rgba(255,253,248,.8); cursor:pointer;
}
.atlas-storybook-contents-grid { display:flex; flex-direction:column; gap:10px; padding:0 16px 16px; }
.atlas-storybook-contents-group { min-width:0; padding:10px; border:1px solid rgba(217,120,143,.14); border-radius:18px; background:rgba(255,253,248,.72); }
.atlas-storybook-contents-group-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 2px 8px; }
.atlas-storybook-contents-group-head h3 { margin:0; color:#7b6265; font-size:14px; }
.atlas-storybook-contents-group-head small { flex:0 0 auto; color:#c1a0a3; font-size:11px; }
.atlas-storybook-contents-pages { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.atlas-storybook-contents-item {
  min-width:0; padding:10px 12px; border:1px solid rgba(217,120,143,.14); border-radius:14px;
  background:linear-gradient(180deg,#fffdf8,#fff8f1); text-align:left; overflow-wrap:anywhere;
}
.atlas-storybook-contents-item small { display:block; margin-bottom:4px; color:#c1a0a3; font-size:10px; }
.atlas-storybook-contents-item span { display:block; color:#8e777a; font-size:12px; line-height:1.5; }
.atlas-storybook-contents-foot { display:flex; justify-content:flex-end; gap:8px; padding:0 16px 16px; }

/* Keep the contents list inside the screen and scroll its entries independently. */
#contentsDialog[hidden] { display:none !important; }
#contentsDialog:not([hidden]) {
  position:fixed; z-index:1000; inset:0; display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));
  overflow:hidden; background:rgba(76,55,56,.34); -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px); overscroll-behavior:contain;
}
body.atlas-storybook-dialog-open { overflow:hidden; }
#contentsDialog .atlas-storybook-dialog-sheet {
  display:flex; flex-direction:column; width:min(720px,calc(100vw - 24px)); min-width:0;
  max-height:calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow:hidden;
}
#contentsDialog .atlas-storybook-dialog-head,
#contentsDialog .atlas-storybook-contents-foot { flex:0 0 auto; }
#contentsDialog .atlas-storybook-contents-grid {
  flex:1 1 auto; min-height:0; max-height:calc(100vh - 180px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height:calc(100dvh - 180px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}

@media (min-width:760px) {
  .atlas-storybook-wrap { width:min(760px,calc(100% - 40px)); }
  .atlas-storybook-heading { margin-top:18px; }
  .atlas-storybook-heading h1 { font-size:30px; }
  .atlas-storybook-book { width:min(52vw,430px); }
  .atlas-storybook-meta { width:min(52vw,430px); }
}
@media (max-width:780px) {
  .atlas-storybook-wrap { width:min(100%,calc(100% - 12px)); }
  .atlas-storybook-topbar { gap:8px; }
  .atlas-storybook-action-row { gap:6px; }
  .atlas-storybook-pill,
  .atlas-storybook-action,
  .atlas-storybook-ghost-btn,
  .atlas-storybook-primary-btn { min-height:36px; padding:0 12px; font-size:13px; }
  .atlas-storybook-meta { width:min(88vw,360px); }
  #contentsDialog .atlas-storybook-dialog-sheet { width:calc(100vw - 24px); }
  #contentsDialog .atlas-storybook-contents-grid { gap:8px; padding:0 12px 12px; }
}
@media (max-width:560px) {
  .atlas-storybook-book { width:min(88vw,360px); }
  .atlas-storybook-heading h1 { font-size:23px; }
  .atlas-storybook-meta { width:min(88vw,360px); }
  .atlas-storybook-controls { width:min(94vw,380px); }
  .atlas-storybook-controls button { padding-inline:8px; }
  .atlas-storybook-resume { grid-template-columns:minmax(0,1fr); gap:9px; min-height:110px; }
  .atlas-storybook-resume .atlas-storybook-btns { justify-self:start; }
}
@media (max-width:380px) {
  .atlas-storybook-account-actions { gap:5px; }
  .atlas-storybook-account-actions .dream-back-pill { padding-inline:9px; font-size:12px; }
  .atlas-storybook-action-row { gap:5px; }
  .atlas-storybook-action { padding-inline:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .atlas-storybook-page-turn,
  .atlas-storybook-progress span { transition:none !important; }
}