/* Draft to Shelf: the book publishing game (/draft-to-shelf). Prefix dts- (page) and sg- (the
 * SVG stage). Same house look as the planner: cream paper, emerald structure, amber motion.
 * Animations use transform / opacity / stroke-dashoffset only, and every one has a still
 * end state, so prefers-reduced-motion (base.css + the block at the end) loses nothing.   */

.zs-dts { --dts-paper: #FFFDF8; --dts-desk: #F6EFE5; --dts-ink: var(--z-green); }
.dts { position: relative; padding-bottom: var(--z-section-sm); }
.dts__in { display: flex; flex-direction: column; }
.dts.is-result .dts-play { order: 2; } .dts.is-result .dts-end { order: 3; } .dts.is-result .dts-pick { order: 4; }
.dts.is-result .dts-hero { order: 1; }

/* ---------------- hero ---------------- */
.dts-hero { padding-bottom: clamp(1.25rem, 3vw, 2.25rem); }
.dts-hero .z-eyebrow { margin-top: clamp(1.25rem, 3vw, 2.5rem); }
.dts-hero__title {
  margin-top: .6rem; max-width: 20ch; font-family: var(--z-font-display); font-size: var(--z-fs-3xl);
  font-weight: 600; line-height: var(--z-lh-tight); letter-spacing: var(--z-track-display); color: var(--z-green);
}
.dts-hero__title em { display: block; margin-top: .4rem; font-size: .42em; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: var(--z-amber-ink); }
.dts.is-result .dts-hero__title { font-size: var(--z-fs-2xl); max-width: 22ch; }
.dts.is-result .dts-hero__title em { display: inline; margin: 0; font-size: 1em; font-weight: 600; color: var(--z-amber-ink); }
.dts-hero__lede { margin-top: 1rem; max-width: 40rem; }
.dts-hero__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; padding: 0; list-style: none; }
.dts-hero__meta li { padding: .35rem .8rem .25rem; border: 1px solid var(--line-strong); border-radius: var(--z-r-pill); font-size: var(--z-fs-xs); font-weight: 600; color: var(--z-green); background: var(--z-white); }
.dts-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.dts-honest { margin-top: .9rem; font-size: var(--z-fs-xs); color: var(--fg-muted); font-style: italic; }
.dts-hero__cta .dts-honest { margin: 0; }

/* ---------------- pick your author ---------------- */
.dts-pick { padding-bottom: clamp(1rem, 3vw, 2rem); outline: none; }
.dts-pick__h { font-family: var(--z-font-display); font-size: var(--z-fs-xl); font-weight: 600; color: var(--z-green); }
.dts-pick__sub { margin-top: .35rem; color: var(--fg-muted); font-size: var(--z-fs-sm); }
.dts-who { display: grid; gap: .9rem; margin-top: 1.25rem; padding: 0; list-style: none; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .dts-who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dts-who__card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; width: 100%; height: 100%;
  padding: 1.25rem 1.25rem 1.1rem; text-align: left; font: inherit; color: var(--fg); cursor: pointer;
  background: var(--z-white); border: 1.5px solid var(--line); border-radius: var(--z-r-md); box-shadow: var(--z-shadow-1);
  transition: transform var(--z-dur-2) var(--z-ease-spring), box-shadow var(--z-dur-2), border-color var(--z-dur-2);
}
.dts-who__card:hover { transform: translateY(-5px) rotate(-.4deg); border-color: var(--z-amber); box-shadow: var(--z-shadow-2); }
.dts-who__card:focus-visible { outline: 3px solid var(--z-green); outline-offset: 3px; }
.dts-who__card.is-picked { animation: dts-pick .5s var(--z-ease-spring); border-color: var(--z-amber); }
@keyframes dts-pick { 40% { transform: translateY(-8px) scale(1.03) rotate(-1deg); } }
.dts-who__art { width: 56px; height: 56px; }
.dts-who__art .a-fill { fill: var(--z-green-50); stroke: var(--z-green); stroke-width: 2; stroke-linejoin: round; }
.dts-who__art .a-line { fill: none; stroke: var(--z-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dts-who__art .a-amber { fill: var(--z-amber); stroke: var(--z-amber-press); stroke-width: 1; stroke-linejoin: round; }
.dts-who__card:hover .a-amber { animation: dts-twinkle .8s var(--z-ease-spring); transform-box: fill-box; transform-origin: center; }
@keyframes dts-twinkle { 50% { transform: scale(1.25) rotate(14deg); } }
.dts-who__name { font-family: var(--z-font-display); font-size: var(--z-fs-lg); font-weight: 600; line-height: 1.15; color: var(--z-green); }
.dts-who__blurb { font-size: var(--z-fs-sm); line-height: 1.5; color: var(--fg-muted); }
.dts-who__chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; padding-top: .35rem; }
.dts-who__chips span { padding: .25rem .6rem .15rem; border-radius: var(--z-r-pill); background: var(--z-amber-tint); color: var(--z-amber-ink); font-size: var(--z-fs-2xs); font-weight: 600; }
.dts-who__goal { font-size: var(--z-fs-xs); color: var(--fg-muted); }
.dts-who__go { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--z-fs-sm); font-weight: 600; color: var(--z-green); }
.dts-who__go .z-icon { width: 1rem; height: 1rem; transition: transform var(--z-dur-2) var(--z-ease-out); }
.dts-who__card:hover .dts-who__go .z-icon { transform: translateX(4px); }
@media (max-width: 560px) {
  .dts-who { grid-template-columns: 1fr; gap: .65rem; }
  .dts-who__card { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: .85rem; row-gap: .2rem; padding: .95rem 1rem; }
  .dts-who__art { grid-row: 1 / span 3; width: 48px; height: 48px; }
  .dts-who__name { font-size: var(--z-fs-md); }
  .dts-who__blurb { font-size: var(--z-fs-xs); }
  .dts-who__chips { grid-column: 2; padding-top: .15rem; }
  .dts-who__goal, .dts-who__go { display: none; }
}
.dts-noscript { margin-top: 1rem; padding: 1rem; border: 1px dashed var(--line-strong); border-radius: var(--z-r-sm); }

/* ---------------- the spread: desk (left) + page (right) ---------------- */
.dts.is-playing .dts-hero, .dts.is-playing .dts-pick { display: none; }
.dts-play { padding-top: clamp(1rem, 2.5vw, 1.75rem); scroll-margin-top: 12px; }
.dts-spread {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  background: var(--dts-paper); border: 1px solid rgba(40,40,40,.1); border-radius: var(--z-r-lg); box-shadow: var(--z-shadow-3);
}
.dts-spread::after { /* the gutter where the two pages meet */
  content: ""; position: absolute; top: 0; bottom: 0; left: 49%; width: 3%; pointer-events: none;
  background: linear-gradient(90deg, rgba(2,29,19,0) 0, rgba(2,29,19,.07) 46%, rgba(2,29,19,.12) 50%, rgba(2,29,19,.04) 54%, rgba(2,29,19,0) 100%);
}
.dts-desk { position: relative; display: flex; flex-direction: column; gap: .75rem; padding: clamp(1rem, 2.2vw, 1.75rem); background: var(--dts-desk); border-radius: var(--z-r-lg) 0 0 var(--z-r-lg); }
.dts-page { position: relative; perspective: 2400px; min-height: 100%; border-radius: 0 var(--z-r-lg) var(--z-r-lg) 0; }
.dts-page__in { position: relative; padding: clamp(1.15rem, 2.6vw, 2.25rem) clamp(1.15rem, 2.8vw, 2.5rem); background: var(--dts-paper); border-radius: inherit; min-height: 100%; }
@media (max-width: 899px) {
  .dts-spread { grid-template-columns: 1fr; border-radius: var(--z-r-md); }
  .dts-spread::after { top: auto; left: 0; right: 0; width: auto; height: 10px; bottom: auto; display: none; }
  .dts-desk { border-radius: var(--z-r-md) var(--z-r-md) 0 0; padding: .75rem .75rem .5rem; gap: .5rem; }
  .dts-page { border-radius: 0 0 var(--z-r-md) var(--z-r-md); }
  .dts-page__in { border-top: 1px solid rgba(40,40,40,.08); box-shadow: inset 0 10px 14px -12px rgba(2,29,19,.25); }
}
@media (min-width: 900px) { .dts-desk > .dts-stagewrap { position: sticky; top: 1rem; } }
/* Phones: the resources bar sticks to the top while you read and choose, so the coins and
   wells are always in view when they move (it steps below the site header when that shows). */
@media (max-width: 899px) {
  .dts-spread { background: var(--dts-desk); }
  .dts-desk { display: contents; }
  .dts-hud {
    position: sticky; top: 0; z-index: 20; margin: 0; padding: .6rem .55rem .45rem; border-radius: var(--z-r-md) var(--z-r-md) 0 0;
    background: color-mix(in srgb, var(--dts-desk) 93%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: top var(--z-dur-3) var(--z-ease-out);
  }
  body:has(.z-header:not(.is-hidden)) .dts-hud { top: var(--z-header-h); }
  .dts-stagewrap { margin: 0 .6rem; }
  .dts-cap { margin: .4rem .6rem .55rem; }
}

/* ---------------- HUD: quill pot, calendar, three ink wells ---------------- */
.dts-hud { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr 1fr; align-items: end; gap: .35rem; }
.dts-m { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; }
.dts-m__txt { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.dts-m__v { font-size: var(--z-fs-sm); font-weight: 600; color: var(--z-green); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dts-m__k { margin-top: .15rem; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.dts-m.is-bump .dts-m__v { animation: dts-bump .5s var(--z-ease-spring); }
@keyframes dts-bump { 40% { transform: scale(1.18); color: var(--z-amber-ink); } }

.dts-pot { position: relative; display: block; width: 52px; height: 52px; }
.dts-pot__svg { width: 52px; height: 52px; overflow: visible; }
.dts-pot__glass { fill: rgba(6,69,48,.07); stroke: var(--z-green); stroke-width: 1.8; }
.dts-pot__neck { fill: rgba(6,69,48,.12); stroke: var(--z-green); stroke-width: 1.6; }
.dts-pot__shine { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: .7; }
.dts-coin { fill: var(--z-amber); stroke: var(--z-amber-press); stroke-width: .9; opacity: 0; transform: translateY(-8px);
  transition: opacity var(--z-dur-2), transform var(--z-dur-3) var(--z-ease-spring); transition-delay: calc(var(--i) * 25ms); }
.dts-coin.is-on { opacity: 1; transform: none; }
.dts-coinfly ellipse { fill: var(--z-amber); stroke: var(--z-amber-press); stroke-width: .9; opacity: 0; transform-box: fill-box; transform-origin: center; }
.dts-m--budget.is-spend .dts-coinfly ellipse { animation: dts-coin-out .95s var(--z-ease-out) calc(var(--i) * 110ms) both; }
.dts-m--budget.is-gain .dts-coinfly ellipse { animation: dts-coin-in .8s var(--z-ease-spring) calc(var(--i) * 110ms) both; }
@keyframes dts-coin-out { 0% { opacity: 1; transform: translate(0, 18px); } 100% { opacity: 0; transform: translate(calc((var(--i) - 1) * 14px), -26px) rotate(140deg); } }
@keyframes dts-coin-in { 0% { opacity: 0; transform: translate(0, -30px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(0, 22px); } }
.dts-pot__quill { position: absolute; right: -9px; top: -14px; width: 20px; transform: rotate(18deg); transform-origin: 30% 90%; pointer-events: none; }
.dts-pot__quill .z-quill { width: 100%; height: auto; fill: var(--z-amber); }
.dts-pot__quill .z-quill path { fill: var(--z-amber); stroke: none; }
.dts-m--budget.is-spend .dts-pot__quill { animation: dts-quill .7s var(--z-ease-spring); }
@keyframes dts-quill { 35% { transform: rotate(4deg) translateY(-3px); } 70% { transform: rotate(24deg); } }

.dts-cal { position: relative; display: grid; grid-template-columns: repeat(4, 9px); grid-auto-rows: 11px; gap: 3px; padding: 4px; border: 1.5px solid var(--z-green); border-radius: 5px; background: #fff; }
.dts-cal::before { content: ""; position: absolute; left: 6px; right: 6px; top: -5px; height: 5px; border-left: 2px solid var(--z-green); border-right: 2px solid var(--z-green); }
.dts-cal__p { display: block; border-radius: 2px; background: var(--z-green-100); box-shadow: inset 0 0 0 1px rgba(6,69,48,.22); transform-origin: 50% 0; }
.dts-cal__p.is-used { animation: dts-tear .7s var(--z-ease-in-out) both; animation-delay: calc(var(--k, 0) * 90ms); }
@keyframes dts-tear { 0% { transform: none; opacity: 1; } 45% { transform: rotate(-28deg) translateY(2px); opacity: 1; } 100% { transform: rotate(-8deg) translateY(10px); opacity: .14; } }
.dts-cal__p.is-used-still { opacity: .14; transform: rotate(-8deg) translateY(10px); animation: none; }
.dts-cal__late { position: absolute; right: -10px; top: -10px; padding: 2px 5px 0; border-radius: var(--z-r-pill); background: var(--z-amber); color: var(--z-green-950); font-size: .6875rem; font-weight: 700; line-height: 1.3; }
.dts-cal__late:not([hidden]) { animation: dts-pop .5s var(--z-ease-spring); }
@keyframes dts-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }

.dts-well { width: 34px; height: 48px; overflow: visible; }
.dts-well__bg { fill: rgba(255,255,255,.75); }
.dts-well__glass { fill: none; stroke: var(--z-green); stroke-width: 1.6; stroke-linejoin: round; }
.dts-well__cork { fill: var(--z-amber-ink); }
.dts-well__shine { stroke: #fff; stroke-width: 2.2; stroke-linecap: round; opacity: .75; }
.dts-well__liq { transform: translateY(calc((1 - var(--lv, 0)) * 50px)); transition: transform 1s var(--z-ease-spring); }
.dts-well__wave { transform-box: view-box; }
.dts-m--energy .dts-well__wave { fill: var(--z-amber); }
.dts-m--quality .dts-well__wave { fill: var(--z-green-600); }
.dts-m--reach .dts-well__wave { fill: var(--z-purple); }
.dts-m.is-slosh .dts-well__wave { animation: dts-wave 1.1s linear 2; }
@keyframes dts-wave { 0% { transform: translateX(0) scaleY(1); } 50% { transform: translateX(5px) scaleY(1.08); } 100% { transform: translateX(10px) scaleY(1); } }
.dts-well__fog { transition: opacity 1.1s var(--z-ease-out); }
.dts-well__fog rect { fill: #F3EEE4; opacity: .94; }
.dts-well__fog text { font-family: var(--z-font-display); font-size: 17px; font-weight: 600; fill: var(--z-green); }
.dts-m--quality[data-q="rough"] .dts-well__fog { opacity: .55; }
.dts-m--quality[data-q="rough"] .dts-well__fog text { opacity: 0; }
.dts-m--quality[data-q="exact"] .dts-well__fog { opacity: 0; }
.dts-delta {
  position: absolute; left: 50%; top: -.4rem; z-index: 2; padding: .15rem .45rem .05rem; border-radius: var(--z-r-pill);
  font-size: .75rem; font-weight: 700; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums;
  background: var(--z-green); color: var(--z-cream); box-shadow: var(--z-shadow-1);
  animation: dts-float 1.6s var(--z-ease-out) both;
}
.dts-delta.is-down { background: var(--z-amber-tint); color: var(--z-amber-ink); }
@keyframes dts-float { 0% { transform: translate(-50%, 8px); opacity: 0; } 18% { transform: translate(-50%, -4px); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -22px); opacity: 0; } }
@media (max-width: 480px) {
  .dts-hud { gap: .15rem; }
  .dts-pot, .dts-pot__svg { width: 42px; height: 42px; }
  .dts-pot__quill { width: 16px; right: -7px; top: -11px; }
  .dts-well { width: 28px; height: 40px; }
  .dts-cal { grid-template-columns: repeat(4, 7px); grid-auto-rows: 9px; gap: 2px; padding: 3px; }
  .dts-m__v { font-size: var(--z-fs-xs); }
  .dts-m__k { font-size: .625rem; letter-spacing: .06em; }
}

/* ---------------- the stage: the book builds as you play ---------------- */
.dts-stagewrap { position: relative; overflow: hidden; border-radius: var(--z-r-md); background: #F6EFE5; box-shadow: inset 0 0 0 1px rgba(40,40,40,.08), 0 1px 0 #fff; }
.dts-stage { width: 100%; height: auto; aspect-ratio: 3 / 2; }
@media (max-width: 899px) { .dts-stage { height: clamp(178px, 52vw, 260px); aspect-ratio: auto; } }
.dts-cap { min-height: 1.2em; font-size: var(--z-fs-xs); font-style: italic; color: var(--fg-muted); text-align: center; }
.dts-stage.is-instant, .dts-stage.is-instant * { animation: none !important; transition: none !important; }

/* room: desk (chapters 1-4) -> bookshop shelf (from the path chapter) */
.sg-desk { transition: transform .8s var(--z-ease-in-out), opacity .6s; }
.is-shelved .sg-desk { transform: translateY(44px); opacity: 0; }
.sg-steam { animation: sg-steam 3.2s ease-in-out infinite; }
@keyframes sg-steam { 0%, 100% { opacity: .2; transform: translateY(2px); } 50% { opacity: .9; transform: translateY(-2px); } }
.is-shelved .sg-steam { animation: none; }
.sg-shelf { opacity: 0; transition: opacity .5s; }
.is-shelved .sg-shelf { opacity: 1; }
.sg-plank { fill: #E2CDB2; stroke: rgba(140,83,0,.35); stroke-width: .8; }
.sg-bracket { fill: none; stroke: rgba(140,83,0,.45); stroke-width: 3; stroke-linecap: round; }
.sg-nbs { transition: transform .8s var(--z-ease-spring), opacity .8s; }
.is-shelved .sg-nbs--l { animation: sg-from-l .8s var(--z-ease-out) .15s backwards; }
.is-shelved .sg-nbs--r { animation: sg-from-r .8s var(--z-ease-out) .15s backwards; }
@keyframes sg-from-l { from { opacity: 0; transform: translateX(-40px); } }
@keyframes sg-from-r { from { opacity: 0; transform: translateX(40px); } }
.sg-plaque { opacity: 0; transform-box: fill-box; transform-origin: center; }
.is-shelved .sg-plaque { opacity: 1; animation: sg-pop .5s var(--z-ease-spring) 1s backwards; }
.sg-plaque rect { fill: var(--z-green); }
.sg-plaque text { font-family: var(--z-font-body); font-size: 5.4px; font-weight: 600; letter-spacing: .12em; fill: var(--z-amber); }
@keyframes sg-pop { from { opacity: 0; transform: scale(.3); } }

/* I. the manuscript: pages stack up */
.sg-sheet { fill: #fff; stroke: rgba(40,40,40,.2); stroke-width: .7; transform-box: fill-box; transform-origin: 50% 100%; transform: rotate(var(--r)); transition: transform .9s var(--z-ease-out); }
.dts-stage:not([data-write]) .sg-sheet:not(:first-child) { opacity: 0; }
[data-art] .sg-ms { opacity: 0; transition: opacity .4s .8s; } /* once the cover is on, the pages are inside the book */
[data-write] .sg-sheet { animation: sg-sheet .55s var(--z-ease-out) backwards; animation-delay: calc(var(--i) * 95ms); }
@keyframes sg-sheet { from { opacity: 0; transform: translateY(-50px) rotate(calc(var(--r) * 5)); } }
[data-write="ghost"] .sg-sheet { transform: rotate(calc(var(--r) * .15)); }
[data-edit="pro"] .sg-sheet { transform: rotate(calc(var(--r) * .2)); transition-delay: 1.9s; }
.sg-lines rect { fill: rgba(40,40,40,.26); transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); }
[data-write] .sg-lines rect { transform: none; transition: transform .45s var(--z-ease-out); transition-delay: calc(.8s + var(--i) * 70ms); }
[data-write="ai"] .sg-lines rect { fill: rgba(107,78,150,.45); }
.sg-crumple, .sg-ghost, .sg-ai { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .5s; }
[data-write="self"] .sg-crumple, [data-write="ghost"] .sg-ghost, [data-write="ai"] .sg-ai { opacity: 1; animation: sg-pop .6s var(--z-ease-spring) 1.1s backwards; }
[data-write="ai"] .sg-ai path { animation: sg-twinkle 2.4s ease-in-out 1.6s 2; transform-box: fill-box; transform-origin: center; }
@keyframes sg-twinkle { 50% { transform: scale(.6) rotate(45deg); opacity: .5; } }
.is-shelved .sg-crumple, .is-shelved .sg-ghost, .is-shelved .sg-ai { opacity: 0; animation: none; }

/* red-pen marks (editing) */
.sg-mark { fill: none; stroke: var(--z-red); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-edit="pro"] .sg-mark, [data-edit="friend"] .sg-mark--f { stroke-dashoffset: 0; animation: sg-draw .5s var(--z-ease-out) backwards; animation-delay: calc(.2s + var(--i) * .22s); }
@keyframes sg-draw { from { stroke-dashoffset: 1; } }
.sg-tick { fill: none; stroke: var(--z-green-600); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-edit="pro"] .sg-tick { stroke-dashoffset: 0; animation: sg-draw .4s var(--z-ease-out) 1.7s backwards; }
.sg-typo { opacity: 0; transform-box: fill-box; transform-origin: center; }
.sg-typo rect { fill: rgba(239,154,16,.22); stroke: var(--z-amber); stroke-width: .9; stroke-dasharray: 2 1.4; }
.sg-typo text { font-family: var(--z-font-body); font-size: 7px; font-weight: 600; fill: var(--z-red-ink); }
[data-edit="skip"] .sg-typo { opacity: 1; animation: sg-pop .6s var(--z-ease-spring) .3s backwards, sg-wobble 1.6s ease-in-out .9s 2; }
@keyframes sg-wobble { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }

/* II. the book: the cover paints in, the spine binds */
.sg-book { opacity: 0; }
[data-art] .sg-book { opacity: 1; }
.sg-lift { transform-box: fill-box; transform-origin: 50% 100%; }
.is-shelved .sg-lift { transform: translateY(-28px); animation: sg-shelve 1.15s var(--z-ease-in-out) .1s backwards; }
@keyframes sg-shelve {
  0% { transform: none; } 45% { transform: translate(0, -64px) rotate(-3deg); }
  78% { transform: translate(0, -24px) scale(1.02, .97); } 100% { transform: translateY(-28px); }
}
.sg-zoom { transform-box: fill-box; transform-origin: 50% 55%; transition: transform 1.1s var(--z-ease-in-out); }
.sg-cover { transform-box: fill-box; transform-origin: 50% 0; }
[data-art] .sg-cover { animation: sg-cover .75s var(--z-ease-spring) backwards; }
@keyframes sg-cover { from { opacity: 0; transform: translateY(-120px) rotate(-6deg); } }
.sg-brush { stroke-dasharray: 1; stroke-dashoffset: 0; }
[data-art] .sg-brush { animation: sg-paint 1.35s var(--z-ease-in-out) .6s backwards; }
@keyframes sg-paint { from { stroke-dashoffset: 1; } }
.sg-board { fill: #F3EEE4; stroke: rgba(40,40,40,.22); stroke-width: .8; }
.sg-art { display: none; }
[data-art="diy"] .sg-art[data-art="diy"], [data-art="cheap"] .sg-art[data-art="cheap"], [data-art="pro"] .sg-art[data-art="pro"],
[data-art="kdiy"] .sg-art[data-art="kdiy"], [data-art="kcheap"] .sg-art[data-art="kcheap"], [data-art="kpro"] .sg-art[data-art="kpro"] { display: inline; }
.sg-t { text-anchor: middle; font-family: var(--z-font-body); }
.sg-t--diy { font-size: 10px; font-weight: 600; letter-spacing: .1em; fill: #FAF9F5; }
.sg-t--diys { font-size: 6.5px; fill: #FAF9F5; }
.sg-t--cheap { font-size: 11px; font-weight: 700; letter-spacing: .02em; fill: #fff; }
.sg-t--pro { font-family: var(--z-font-display); font-size: 13px; font-weight: 600; letter-spacing: .14em; fill: #FAF9F5; }
.sg-t--pros { font-size: 5.6px; font-weight: 600; letter-spacing: .2em; fill: var(--z-amber); }
.sg-t--kdiy { font-size: 11px; font-weight: 600; fill: var(--z-purple-ink); text-anchor: start; }
.sg-t--kcheap { font-size: 10px; font-weight: 700; fill: #fff; letter-spacing: .06em; }
.sg-t--kpro { font-family: var(--z-font-display); font-size: 12px; font-style: italic; font-weight: 600; fill: var(--z-green); }
.sg-gloss { pointer-events: none; }
.sg-edges rect { fill: #fff; stroke: rgba(40,40,40,.2); stroke-width: .7; }
.sg-edges path { stroke: rgba(40,40,40,.16); stroke-width: .6; }
[data-formats="ebook"] .sg-edges { opacity: 0; transition: opacity .5s; }

.sg-spine, .sg-hard, .sg-ribbon, .sg-tablet, .sg-wave, .sg-envbadge, .sg-tag, .sg-lock, .sg-seal, .sg-next, .sg-mail, .sg-mics { opacity: 0; }
.sg-spine rect { fill: #04301F; }
[data-art="diy"] .sg-spine rect { fill: #476B4C; } [data-art="cheap"] .sg-spine rect { fill: #6B4E96; }
[data-art="kdiy"] .sg-spine rect { fill: #8C5300; } [data-art="kcheap"] .sg-spine rect { fill: #476B4C; } [data-art="kpro"] .sg-spine rect { fill: #6B4E96; }
.sg-stitch { fill: none; stroke: rgba(255,255,255,.75); stroke-width: .9; stroke-dasharray: .035 .025; }
.sg-spine { transform-box: fill-box; transform-origin: 100% 50%; }
[data-formats="paper"] .sg-spine, [data-formats="all"] .sg-spine { opacity: 1; animation: sg-bind .8s var(--z-ease-spring) backwards; }
@keyframes sg-bind { from { opacity: 0; transform: scaleX(0); } }
.sg-hard { fill: #04301F; transform-box: fill-box; transform-origin: center; }
[data-formats="all"] .sg-hard { opacity: 1; animation: sg-boards .7s var(--z-ease-spring) .3s backwards; }
@keyframes sg-boards { from { opacity: 0; transform: scale(.94); } }
.sg-ribbon { fill: var(--z-amber); transform-box: fill-box; transform-origin: 50% 0; }
[data-formats="all"] .sg-ribbon { opacity: 1; animation: sg-ribbon .6s var(--z-ease-spring) .6s backwards; }
@keyframes sg-ribbon { from { transform: scaleY(0); } }
.sg-tablet { transform-box: fill-box; transform-origin: center; }
.sg-tablet rect { fill: none; stroke: #282828; stroke-width: 6; }
.sg-tablet circle { fill: #9DB5A5; }
[data-formats="ebook"] .sg-tablet { opacity: 1; animation: sg-tablet .8s var(--z-ease-spring) backwards; }
@keyframes sg-tablet { from { opacity: 0; transform: scale(1.3); } }
.sg-wave { transform-box: fill-box; transform-origin: center; }
.sg-wave > rect:first-child { fill: var(--z-green); }
.sg-bar { fill: var(--z-amber); transform-box: fill-box; transform-origin: center; }
[data-formats="all"] .sg-wave { opacity: 1; animation: sg-pop .55s var(--z-ease-spring) .8s backwards; }
[data-formats="all"] .sg-bar { animation: sg-eq .8s ease-in-out calc(1.1s + var(--i) * 80ms) 3; }
@keyframes sg-eq { 50% { transform: scaleY(.3); } }

/* the path: shelf plaque, or the padlock of an unsolicited "publisher" */
.sg-lock { transform-box: fill-box; transform-origin: center; }
.sg-chain { fill: none; stroke: #5F5A52; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: .028 .016; }
.sg-padlock { transform-box: fill-box; transform-origin: 50% 0; }
.sg-padlock rect { fill: #5F5A52; } .sg-padlock circle { fill: #E2CDB2; } .sg-padlock path:last-child { stroke: #E2CDB2; }
[data-path="offer"] .sg-lock { opacity: 1; animation: sg-chain .6s var(--z-ease-out) 1.2s backwards; }
[data-path="offer"] .sg-padlock { animation: sg-padlock .8s cubic-bezier(.3,1.6,.5,1) 1.55s backwards; }
@keyframes sg-chain { from { opacity: 0; transform: scale(1.35); } }
@keyframes sg-padlock { from { opacity: 0; transform: translateY(-70px); } }
[data-path="offer"] .sg-paint { filter: grayscale(.75) brightness(.92); transition: filter 1s 1.4s; }
[data-path="offer"] .sg-nbs { opacity: .5; }

/* the price tag swings in */
.sg-tag { transform-box: view-box; transform-origin: 219px 95px; }
.sg-tag__string { fill: none; stroke: var(--z-ink-muted); stroke-width: .8; }
.sg-tag__card path { fill: var(--z-cream); stroke: var(--z-amber-ink); stroke-width: .9; }
.sg-tag__card circle { fill: none; stroke: var(--z-amber-ink); stroke-width: .7; }
#dts-tag { font-family: var(--z-font-body); font-size: 8.5px; font-weight: 700; fill: var(--z-amber-ink); }
[data-price] .sg-tag { opacity: 1; animation: sg-swing 1.9s var(--z-ease-out) backwards; }
@keyframes sg-swing {
  0% { opacity: 0; transform: rotate(-70deg); } 18% { opacity: 1; transform: rotate(26deg); } 38% { transform: rotate(-15deg); }
  58% { transform: rotate(8deg); } 78% { transform: rotate(-3deg); } 100% { transform: none; }
}

/* III. readers gather, mics appear, letters fly, book two waits */
.sg-reader { opacity: 0; transform: translateY(36px); transition: opacity .45s, transform .75s var(--z-ease-spring); transition-delay: calc(var(--i) * 75ms); }
.sg-reader.is-on { opacity: 1; transform: none; }
.sg-reader circle, .sg-reader path { fill: var(--z-green-800); }
.sg-reader:nth-child(3n+2) circle, .sg-reader:nth-child(3n+2) path { fill: var(--z-sage); }
.sg-reader:nth-child(3n) circle, .sg-reader:nth-child(3n) path { fill: var(--z-purple-ink); }
.sg-reader__book { fill: var(--z-amber); opacity: 0; transition: opacity .5s .6s; }
[data-launch="arc"] .sg-reader__book { opacity: 1; }
.has-mics .sg-mics { opacity: 1; }
.sg-mic { transform: translateY(80px); transition: transform 1s var(--z-ease-spring); transition-delay: calc(var(--i) * .15s); }
.has-mics .sg-mic { transform: none; }
.sg-mic rect { fill: #282828; }
.sg-mic__stand { fill: none; stroke: #282828; stroke-width: 2.4; stroke-linecap: round; }
.sg-mic__grille { stroke: #9DB5A5; stroke-width: 1; }
.sg-arc { fill: none; stroke: var(--z-amber); stroke-width: 2; stroke-linecap: round; opacity: 0; }
.has-mics .sg-arc { animation: sg-arc 1.5s ease-out calc(1s + var(--k) * .22s) 3 both; }
@keyframes sg-arc { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.has-mail .sg-mail { opacity: 1; }
.sg-env { opacity: 0; transform-box: fill-box; transform-origin: center; }
.sg-env rect { fill: var(--z-cream); stroke: var(--z-green); stroke-width: 1; }
.sg-env path { fill: none; stroke: var(--z-green); stroke-width: 1; }
.has-mail .sg-env { animation: sg-env 1.7s var(--z-ease-out) calc(.2s + var(--i) * .28s) both; }
@keyframes sg-env {
  0% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(70px + var(--i) * 26px), calc(-74px + var(--i) * 22px)) rotate(14deg) scale(1); }
}
.sg-envbadge rect { fill: #fff; stroke: var(--z-green); stroke-width: 1.2; }
.sg-envbadge path { fill: none; stroke: var(--z-green); stroke-width: 1.2; }
.sg-envbadge { transform-box: fill-box; transform-origin: center; }
.has-mail .sg-envbadge { opacity: 1; animation: sg-pop .5s var(--z-ease-spring) 1.1s backwards; }
.sg-next rect { fill: rgba(255,255,255,.4); stroke: var(--z-green); stroke-width: 1.4; stroke-dasharray: 4 3; }
.sg-next text { font-family: var(--z-font-display); font-size: 20px; font-weight: 600; fill: var(--z-green-600); opacity: .7; }
.sg-next { transform-box: fill-box; transform-origin: 50% 100%; }
.has-next .sg-next { opacity: 1; animation: sg-pop .7s var(--z-ease-spring) .5s backwards; }
.has-next .sg-nbs--r { transform: translateX(28px); }

/* the ending: everything else steps back, the book comes forward, the seal presses */
.is-ended .sg-nbs, .is-ended .sg-readers, .is-ended .sg-plaque, .is-ended[data-price] .sg-tag,
.is-ended.has-mics .sg-mics, .is-ended.has-next .sg-next { opacity: .28; transition: opacity 1s; }
.is-ended .sg-zoom { transform: scale(1.14); }
.sg-seal__in { transform-box: fill-box; transform-origin: center; }
.sg-seal__shadow { fill: rgba(2,29,19,.32); }
.sg-seal__t { font-family: var(--z-font-display); font-weight: 700; fill: rgba(92,52,0,.86); letter-spacing: .04em; }
.sg-seal__ring { fill: none; stroke: var(--z-amber); stroke-width: 2.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.is-sealed .sg-seal { opacity: 1; }
.is-sealed .sg-seal__in { animation: sg-press .95s cubic-bezier(.2,.9,.25,1.2) backwards; }
.is-sealed .sg-seal__ring { animation: sg-ring 1.1s ease-out .55s both; }
@keyframes sg-press {
  0% { opacity: 0; transform: translateY(-46px) scale(2.4) rotate(-14deg); }
  55% { opacity: 1; transform: scale(.9) rotate(2deg); } 76% { transform: scale(1.05); } 100% { transform: none; }
}
@keyframes sg-ring { 0% { opacity: .95; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.7); } }
/* a shared result is replayed instantly (.is-instant); only the seal still presses, when seen */
@media (prefers-reduced-motion: no-preference) {
  .dts-stage.is-instant.is-seal-live .sg-seal__in { animation: sg-press .95s cubic-bezier(.2,.9,.25,1.2) backwards !important; }
  .dts-stage.is-instant.is-seal-live .sg-seal__ring { animation: sg-ring 1.1s ease-out .55s both !important; }
}

/* ---------------- the page: chapters, events and the ending ---------------- */
.dts-chead { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.dts-chead__n { font-size: var(--z-fs-xs); font-weight: 600; letter-spacing: var(--z-track-caps); text-transform: uppercase; color: var(--z-amber-ink); }
.dts-prog { display: flex; align-items: center; gap: 5px; padding: 0; list-style: none; }
.dts-prog li { width: 8px; height: 8px; border-radius: 50%; background: var(--z-green-100); box-shadow: inset 0 0 0 1px rgba(6,69,48,.25); transition: background-color .4s, transform .4s var(--z-ease-spring); }
.dts-prog li.is-done { background: var(--z-green); box-shadow: none; }
.dts-prog li.is-now { background: var(--z-amber); box-shadow: none; transform: scale(1.35); }
.dts-prog li.is-ev { width: 6px; height: 6px; border-radius: 1px; transform: rotate(45deg); background: var(--z-amber-tint); }
.dts-restart { margin-left: auto; padding: .3rem .2rem; font: inherit; font-size: var(--z-fs-xs); color: var(--fg-muted); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dts-restart:hover { color: var(--z-green); }
.dts-ch__title, .dts-ev__title, .dts-endt {
  margin-top: .65rem; font-family: var(--z-font-display); font-size: var(--z-fs-xl); font-weight: 600; line-height: 1.12;
  letter-spacing: -.015em; color: var(--z-green); outline: none;
}
.dts-ch__prompt { margin-top: .4rem; font-size: var(--z-fs-md); color: var(--fg); }
.dts-step > .dts-ch__title, .dts-step > .dts-ch__prompt, .dts-step > .dts-chead { animation: dts-rise .5s var(--z-ease-out) backwards; }
.dts-step > .dts-ch__prompt { animation-delay: .06s; }
@keyframes dts-rise { from { opacity: 0; transform: translateY(10px); } }

.dts-opts { display: grid; gap: .6rem; margin-top: 1.1rem; }
.dts-opt {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: .8rem; row-gap: .45rem;
  width: 100%; padding: .85rem 1rem .8rem; text-align: left; font: inherit; color: var(--fg); cursor: pointer;
  background: var(--z-white); border: 1.5px solid var(--line-strong); border-radius: var(--z-r-md); box-shadow: 0 1px 0 rgba(40,40,40,.04);
  transition: transform var(--z-dur-2) var(--z-ease-spring), border-color var(--z-dur-2), box-shadow var(--z-dur-2), opacity var(--z-dur-2);
  animation: dts-rise .5s var(--z-ease-out) backwards; animation-delay: calc(.12s + var(--i) * 80ms);
}
.dts-opt:hover:not([aria-disabled="true"]) { transform: translateY(-2px); border-color: var(--z-amber); box-shadow: var(--z-shadow-2); }
.dts-opt:focus-visible { outline: 3px solid var(--z-green); outline-offset: 2px; }
.dts-opt:active:not([aria-disabled="true"]) { transform: scale(.985); }
.dts-opt[aria-disabled="true"] { cursor: not-allowed; opacity: .55; background: #F7F4EE; }
.dts-opt__key { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--z-green-50); color: var(--z-green); font-size: var(--z-fs-xs); font-weight: 700; transition: background-color .3s, color .3s; }
.dts-opt__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.dts-opt__label { font-weight: 600; line-height: 1.3; color: var(--z-green); }
.dts-opt__detail { font-size: var(--z-fs-sm); line-height: 1.4; color: var(--fg-muted); }
.dts-opt__cost { grid-column: 2; display: flex; flex-wrap: wrap; gap: .3rem; }
.dts-opt__cost span { padding: .2rem .55rem .1rem; border-radius: var(--z-r-pill); font-size: .75rem; font-weight: 600; line-height: 1.35; font-variant-numeric: tabular-nums; background: #F2EEE6; color: var(--z-ink-muted); }
.dts-opt__cost .c-budget { background: var(--z-amber-tint); color: var(--z-amber-ink); }
.dts-opt__cost .c-free { background: var(--z-green-50); color: var(--z-green); }
.dts-opt__cost .c-over { background: #F9E1E1; color: var(--z-red-ink); }
.dts-opts.is-done .dts-opt { cursor: default; animation: none; }
.dts-opt.is-out { opacity: 0; transform: scale(.97) translateY(-4px); pointer-events: none; }
.dts-opt.is-pick { border-color: var(--z-green); box-shadow: 0 0 0 3px rgba(6,69,48,.12); }
.dts-opt.is-pick .dts-opt__key { background: var(--z-green); color: var(--z-cream); }
.dts-opt.is-pick.is-pressed { animation: dts-press .45s var(--z-ease-spring); }
@keyframes dts-press { 35% { transform: scale(.97); } }

.dts-res { margin-top: 1rem; }
.dts-res > * { animation: dts-rise .55s var(--z-ease-out) backwards; animation-delay: calc(var(--i, 0) * 140ms); }
.dts-res__out { font-family: var(--z-font-display); font-size: var(--z-fs-md); font-style: italic; line-height: 1.45; color: var(--z-charcoal); }
.dts-res__bonus { margin-top: .45rem; padding-left: .9rem; border-left: 3px solid var(--z-amber); font-size: var(--z-fs-sm); font-weight: 600; color: var(--z-green); }
.dts-res__d { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; padding: 0; list-style: none; }
.dts-res__d li { padding: .2rem .6rem .1rem; border-radius: var(--z-r-pill); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--z-green-50); color: var(--z-green); }
.dts-res__d li.is-down { background: var(--z-amber-tint); color: var(--z-amber-ink); }
.dts-res__d li.is-hidden { background: #F2EEE6; color: var(--z-ink-muted); font-style: italic; }
.dts-note {
  position: relative; margin-top: 1rem; padding: .95rem 1.1rem 1rem 1.1rem; border-radius: var(--z-r-sm);
  background: linear-gradient(transparent 0 calc(100% - 1px), rgba(6,69,48,.06) 0) 0 .35rem / 100% 1.62em, #FBF6EC;
  border-left: 3px solid var(--z-amber); box-shadow: 0 1px 0 rgba(40,40,40,.05);
}
.dts-note__k { display: flex; align-items: center; gap: .45rem; font-size: var(--z-fs-2xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--z-amber-ink); }
.dts-note__k .z-quill { width: 14px; height: auto; fill: var(--z-amber); }
.dts-note__t { margin-top: .4rem; font-size: var(--z-fs-sm); line-height: 1.6; color: var(--z-charcoal); }
.dts-res .dts-note__t { animation: dts-write 1.4s var(--z-ease-out) .5s backwards; }
@keyframes dts-write { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.dts-note__a { display: inline-block; margin-top: .5rem; font-size: var(--z-fs-sm); font-weight: 600; color: var(--z-green); }
.dts-turn { margin-top: 1.15rem; }
.dts-turn .z-btn__icon { transition: transform var(--z-dur-2) var(--z-ease-out); }
.dts-turn:hover .z-btn__icon { transform: translateX(4px); }
.dts-keys { margin-top: .65rem; font-size: var(--z-fs-2xs); color: var(--fg-muted); }
@media (hover: none) { .dts-keys { display: none; } }

/* page turn: the old page (a clone) lifts off the spine and turns over */
.dts-leaf { position: absolute; top: 0; left: 0; right: 0; z-index: 6; transform-origin: 0 50%; transform-style: preserve-3d; pointer-events: none; animation: dts-leaf .8s var(--z-ease-in-out) forwards; }
.dts-leaf * { animation: none !important; transition: none !important; }
.dts-leaf__f, .dts-leaf__b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 0 var(--z-r-lg) var(--z-r-lg) 0; overflow: hidden; }
.dts-leaf__f { position: relative; background: var(--dts-paper); }
.dts-leaf__f::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,29,19,.0), rgba(2,29,19,.22)); opacity: 0; animation: dts-leaf-shade .8s var(--z-ease-in-out) forwards; }
.dts-leaf__b { transform: rotateY(180deg); background: linear-gradient(90deg, #F2EBDD, #FBF6EC 30%); border-radius: var(--z-r-lg) 0 0 var(--z-r-lg); box-shadow: inset -16px 0 24px -18px rgba(2,29,19,.4); }
@keyframes dts-leaf { 0% { transform: rotateY(0); } 100% { transform: rotateY(-178deg); } }
@keyframes dts-leaf-shade { 60% { opacity: 1; } 100% { opacity: 1; } }
@media (max-width: 899px) {
  .dts-leaf { animation-name: dts-leaf-m; }
  @keyframes dts-leaf-m { 0% { transform: rotateY(0); opacity: 1; } 80% { opacity: 1; } 100% { transform: rotateY(-150deg); opacity: 0; } }
  .dts-leaf__f, .dts-leaf__b { border-radius: 0 0 var(--z-r-md) var(--z-r-md); }
}
.dts-page__in.is-arriving > .dts-step { animation: dts-under .8s var(--z-ease-out) backwards; }
@keyframes dts-under { from { opacity: .4; } }

/* ---------------- events: a letter arrives ---------------- */
.dts-ev { position: relative; margin-top: .9rem; padding-top: 2.1rem; }
.dts-ev__env { position: absolute; left: 0; top: 0; width: 64px; height: 42px; animation: dts-env-in .7s var(--z-ease-spring) backwards; }
.dts-ev__env::before { /* the body */ content: ""; position: absolute; inset: 0; border-radius: 4px; background: #FBF6EC; border: 1.5px solid var(--z-green); }
.dts-ev__flap { position: absolute; left: 0; right: 0; top: 0; height: 26px; transform-origin: 50% 0; transform: rotateX(180deg); animation: dts-flap .55s var(--z-ease-in-out) .45s backwards; }
.dts-ev__flap::before { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); background: var(--z-green-600); }
.dts-ev__flap::after { content: ""; position: absolute; inset: 2px 4px 5px; clip-path: polygon(0 0, 100% 0, 50% 100%); background: #FBF6EC; opacity: .9; }
.dts-ev__dot { position: absolute; left: 50%; top: 15px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #F8C35A, #EF9A10 45%, #B86F06); opacity: 0; animation: dts-dot .55s ease-in .3s backwards; }
@keyframes dts-env-in { from { opacity: 0; transform: translateY(-26px) rotate(-8deg); } }
@keyframes dts-flap { from { transform: rotateX(0); } }
@keyframes dts-dot { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
.dts-ev__icon { position: absolute; left: 76px; top: 6px; display: inline-flex; align-items: center; gap: .4rem; font-size: var(--z-fs-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--z-amber-ink); animation: dts-rise .5s var(--z-ease-out) .5s backwards; }
.dts-ev__letter {
  position: relative; padding: 1rem 1.1rem 1.1rem; border-radius: var(--z-r-md); background: var(--z-white);
  border: 1px solid var(--line); box-shadow: var(--z-shadow-2); animation: dts-letter .7s var(--z-ease-out) .75s backwards;
}
@keyframes dts-letter { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.dts-ev__letter .dts-ev__title { margin-top: 0; font-size: var(--z-fs-lg); }
.dts-ev__text { margin-top: .45rem; line-height: 1.55; }
.dts-ev--email .dts-ev__letter { padding-top: 0; overflow: hidden; }
.dts-ev__chrome { display: flex; align-items: center; gap: 5px; margin: 0 -1.1rem .8rem; padding: .55rem 1.1rem; background: #F2EEE6; border-bottom: 1px solid var(--line); font-size: var(--z-fs-xs); color: var(--fg-muted); }
.dts-ev__chrome i { width: 8px; height: 8px; border-radius: 50%; background: #D9D2C5; }
.dts-ev__chrome span { margin-left: .4rem; }
.dts-ev--review .dts-ev__letter { border-radius: var(--z-r-md) var(--z-r-md) var(--z-r-md) 4px; background: #FBF6EC; }
.dts-ev--review .dts-ev__letter::after { content: ""; position: absolute; left: 18px; bottom: -10px; width: 18px; height: 12px; background: #FBF6EC; clip-path: polygon(0 0, 100% 0, 0 100%); border-left: 1px solid var(--line); }
.dts-ev--note .dts-ev__letter, .dts-ev--person .dts-ev__letter, .dts-ev--shop .dts-ev__letter, .dts-ev--mic .dts-ev__letter {
  background: linear-gradient(transparent 0 calc(100% - 1px), rgba(6,69,48,.07) 0) 0 .2rem / 100% 1.55em, #FFFDF8;
}
mark.dts-flag { position: relative; background: none; color: inherit; }
mark.dts-flag::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -2px; height: 2px; border-radius: 2px; background: var(--z-red); transform: scaleX(0); transform-origin: 0 50%; }
mark.dts-flag::before { content: "!"; position: absolute; right: -6px; top: -12px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--z-red); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; transform: scale(0); }
.is-flagged mark.dts-flag::after { transform: scaleX(1); transition: transform .45s var(--z-ease-out); transition-delay: calc(var(--i) * .38s); }
.is-flagged mark.dts-flag::before { transform: scale(1); transition: transform .4s var(--z-ease-spring); transition-delay: calc(.2s + var(--i) * .38s); }

/* ---------------- the ending, on the right-hand page ---------------- */
.dts-endt { font-size: var(--z-fs-2xl); line-height: 1.05; }
.dts-endt__sub { display: block; margin-top: .35rem; font-size: .5em; font-style: italic; font-weight: 500; color: var(--z-amber-ink); }
.dts-endline { margin-top: .75rem; font-size: var(--z-fs-md); line-height: 1.5; }
.dts-metrics { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; margin-top: 1.1rem; padding: 0; list-style: none; }
.dts-metrics li { display: flex; align-items: baseline; gap: .45rem; font-weight: 600; color: var(--z-green); }
.dts-metrics b { font-family: var(--z-font-display); font-size: var(--z-fs-2xl); font-weight: 700; line-height: 1; color: var(--z-amber-ink); font-variant-numeric: tabular-nums; }
.dts-why { margin-top: .9rem; font-size: var(--z-fs-sm); color: var(--fg-muted); }
.dts-endbtns { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.dts-step[data-kind="end"] > * { animation: dts-rise .6s var(--z-ease-out) backwards; animation-delay: calc(1.1s + var(--i, 0) * 120ms); }

/* ---------------- after the ending ---------------- */
.dts-end { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 4.5rem); min-width: 0; margin-top: clamp(2rem, 5vw, 3.5rem); }
.dts-end > *, .dts-play, .dts-spread > * { min-width: 0; }
.dts-end h2 { font-family: var(--z-font-display); font-size: var(--z-fs-xl); font-weight: 600; line-height: 1.15; color: var(--z-green); }
.dts-sec-head { text-align: center; }
.dts-recap__hint { margin-top: .3rem; font-size: var(--z-fs-sm); color: var(--fg-muted); }

/* recap: swipeable story cards (native scroll-snap; arrows + keys too) */
.dts-deck {
  display: flex; gap: 1rem; margin-top: 1.25rem; padding: .75rem calc(50% - min(165px, 41vw)) 1.75rem;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; outline: none;
}
.dts-deck::-webkit-scrollbar { display: none; }
.dts-deck:focus-visible { box-shadow: inset 0 0 0 3px var(--z-green); border-radius: var(--z-r-md); }
.dts-card {
  position: relative; flex: 0 0 min(330px, 82vw); scroll-snap-align: center; display: flex; flex-direction: column;
  min-height: 440px; padding: 1.15rem 1.25rem 1.3rem; border-radius: 18px; background: var(--dts-paper);
  border: 1px solid rgba(40,40,40,.1); box-shadow: var(--z-shadow-2);
  transform: scale(.92) rotate(var(--tilt, 0deg)); opacity: .62; transition: transform .55s var(--z-ease-spring), opacity .45s, box-shadow .45s;
}
.dts-card.is-active { transform: none; opacity: 1; box-shadow: var(--z-shadow-3); }
.dts-card__top { display: flex; justify-content: space-between; font-size: var(--z-fs-2xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--z-amber-ink); }
.dts-card__h { margin-top: .7rem; font-family: var(--z-font-display); font-size: var(--z-fs-lg); font-weight: 600; line-height: 1.15; color: var(--z-green); }
.dts-card__body { margin-top: .75rem; display: grid; gap: .75rem; align-content: start; font-size: var(--z-fs-sm); line-height: 1.5; }
.dts-card__row b { display: block; font-size: var(--z-fs-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.dts-card__row strong { display: block; margin-top: .1rem; color: var(--z-green); }
.dts-card__row span { display: block; margin-top: .15rem; font-style: italic; color: var(--z-charcoal); }
.dts-card--cover { background: var(--z-green); color: var(--z-cream); border-color: transparent; text-align: center; align-items: center; }
.dts-card--cover .dts-card__top { width: 100%; color: var(--z-amber); }
.dts-card--cover .dts-sealsvg { width: 150px; height: 150px; margin-top: 1.4rem; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.dts-card--cover.is-active .dts-sealsvg { animation: sg-press .9s cubic-bezier(.2,.9,.25,1.2) .2s backwards; }
.dts-sealsvg text { font-family: var(--z-font-display); font-weight: 700; fill: rgba(92,52,0,.86); text-anchor: middle; }
.dts-card--cover .dts-card__h { color: var(--z-white); font-size: var(--z-fs-xl); margin-top: 1.2rem; }
.dts-card--cover p { margin-top: .5rem; color: var(--z-green-200); font-size: var(--z-fs-sm); }
.dts-card--result .dts-metrics b { font-size: var(--z-fs-xl); }
.dts-card__bars { display: grid; gap: .45rem; }
.dts-card__bar { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 2.2rem; align-items: center; gap: .5rem; font-size: var(--z-fs-xs); font-weight: 600; color: var(--z-green); }
.dts-card__bar i { position: relative; height: 8px; border-radius: 4px; background: var(--z-green-100); overflow: hidden; }
.dts-card__bar i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--c, var(--z-green)); transform-origin: 0 50%; transform: scaleX(var(--v, 0)); transition: transform 1s var(--z-ease-out) .25s; }
.dts-card:not(.is-active) .dts-card__bar i::after { transform: scaleX(0); }
.dts-year { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.dts-year__m { position: relative; min-height: 50px; padding: .3rem .35rem; border-radius: 6px; background: var(--z-green-50); font-size: .6875rem; font-weight: 700; color: var(--z-green); }
.dts-year__m.is-late { background: var(--z-amber-tint); color: var(--z-amber-ink); }
.dts-year__m em { display: block; margin-top: .15rem; font-style: normal; font-weight: 600; font-size: .625rem; line-height: 1.2; color: var(--z-charcoal); }
.dts-year__m.has-stamp::after { content: ""; position: absolute; right: 4px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--z-amber); }
.dts-card.is-active .dts-year__m.has-stamp::after { animation: dts-pop .45s var(--z-ease-spring) backwards; animation-delay: calc(var(--k) * 90ms + .2s); }
.dts-deck__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.dts-iconbtn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--z-white); color: var(--z-green); cursor: pointer; transition: border-color .2s, transform .2s var(--z-ease-spring); }
.dts-iconbtn:hover { border-color: var(--z-amber); transform: scale(1.06); }
.dts-iconbtn .z-icon { width: 18px; height: 18px; }
.dts-flip { transform: scaleX(-1); }
.dts-dots { display: flex; gap: 6px; }
.dts-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--z-green-100); transition: background-color .3s, transform .3s var(--z-ease-spring); }
.dts-dots i.is-on { background: var(--z-amber); transform: scale(1.35); }

/* share cards */
.dts-share { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.dts-share__cards { display: flex; align-items: flex-end; gap: 1rem; }
.dts-share__story { width: 160px; height: auto; aspect-ratio: 1080 / 1920; border-radius: 12px; box-shadow: var(--z-shadow-3); transform: rotate(-3deg); }
.dts-share__link { width: 270px; height: auto; aspect-ratio: 1200 / 630; border-radius: 9px; box-shadow: var(--z-shadow-2); transform: rotate(2deg) translateY(-14px); }
.dts-share.is-printed .dts-share__story { animation: dts-print .9s var(--z-ease-spring) backwards; }
.dts-share.is-printed .dts-share__link { animation: dts-print .9s var(--z-ease-spring) .18s backwards; }
@keyframes dts-print { from { opacity: 0; transform: translateY(40px) rotate(-12deg) scale(.9); } }
.dts-share__line { margin-top: .5rem; font-family: var(--z-font-display); font-size: var(--z-fs-md); font-style: italic; color: var(--z-charcoal); }
.dts-share__btns { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.dts-share__status { min-height: 1.4em; margin-top: .6rem; font-size: var(--z-fs-sm); color: var(--z-green); }
@media (max-width: 760px) {
  .dts-share { grid-template-columns: 1fr; }
  .dts-share__cards { justify-content: center; }
  .dts-share__story { width: 112px; }
  .dts-share__link { width: min(220px, 55vw); }
  .dts-share__btns .z-btn { flex: 1 1 100%; }
}

/* the real-life version + talk to a publisher */
.dts-real { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1rem; }
.dts-real__card { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--z-r-lg); background: var(--z-white); border: 1.5px solid var(--z-amber); box-shadow: var(--z-shadow-2); }
.dts-real__card h2 { margin-top: .35rem; }
.dts-real__title { margin-top: .75rem; font-family: var(--z-font-display); font-size: var(--z-fs-lg); font-style: italic; color: var(--z-charcoal); }
.dts-real__text { margin-top: .4rem; color: var(--fg-muted); }
.dts-real__links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.dts-real__call { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--z-r-lg); background: var(--z-green); color: var(--z-cream); }
.dts-real__call h3 { font-family: var(--z-font-display); font-size: var(--z-fs-lg); font-weight: 600; color: var(--z-white); }
.dts-real__call p { margin-top: .5rem; color: var(--z-green-200); }
.dts-real__call .z-btn { margin-top: 1.1rem; }
.dts-real__phone a { color: var(--z-amber); font-weight: 600; }
@media (max-width: 760px) { .dts-real { grid-template-columns: 1fr; } .dts-real__links .z-btn, .dts-real__call .z-btn { width: 100%; white-space: normal; } }

/* save my run */
.dts-save { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: start; padding: clamp(1.25rem, 3.5vw, 2.5rem); border-radius: var(--z-r-lg); background: var(--z-parchment-50); border: 1px solid rgba(40,40,40,.08); }
.dts-save__copy p:not(.z-eyebrow) { margin-top: .6rem; color: var(--fg-muted); }
.dts-form { display: grid; gap: .85rem; }
.dts-err { min-height: 1.2em; font-size: var(--z-fs-sm); color: var(--z-red-ink); }
.dts-save.is-saved .dts-form { display: none; }
.dts-save__done { padding: 1rem 1.1rem; border-radius: var(--z-r-md); background: var(--z-green-50); color: var(--z-green); font-weight: 600; animation: dts-rise .5s var(--z-ease-out); }
@media (max-width: 760px) { .dts-save { grid-template-columns: 1fr; } }

/* the printable book plan (screen preview + print) */
.dts-plan { max-width: 54rem; width: 100%; margin-inline: auto; padding: clamp(1.25rem, 4vw, 2.75rem); border-radius: var(--z-r-md); background: #FBF8F1; border: 1px solid rgba(40,40,40,.12); box-shadow: var(--z-shadow-3); outline: none; }
.dts-plan:not([hidden]) { animation: dts-unfold .9s var(--z-ease-out); transform-origin: 50% 0; }
@keyframes dts-unfold { from { opacity: 0; transform: perspective(1200px) rotateX(-14deg) translateY(-16px); } }
.dts-plan__run { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-bottom: .6rem; border-bottom: 2px solid var(--z-green); font-size: var(--z-fs-2xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--z-green); }
.dts-plan__title { margin-top: 1rem; font-family: var(--z-font-display); font-size: var(--z-fs-xl); font-weight: 600; color: var(--z-green); }
.dts-plan__intro { margin-top: .35rem; color: var(--fg-muted); font-size: var(--z-fs-sm); }
.dts-plan__for { margin-top: .6rem; font-weight: 600; color: var(--z-charcoal); }
.dts-plan__table { width: 100%; margin-top: 1rem; border-collapse: collapse; font-size: var(--z-fs-sm); }
.dts-plan__table th { padding: .45rem .5rem; text-align: left; font-size: var(--z-fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); border-bottom: 1px solid var(--line-strong); }
.dts-plan__table td { padding: .55rem .5rem; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.45; }
.dts-plan__table td:first-child { font-weight: 600; color: var(--z-green); white-space: nowrap; }
.dts-plan__table td:nth-child(2) { color: var(--z-amber-ink); font-weight: 600; }
.dts-plan__h3 { margin-top: 1.25rem; font-family: var(--z-font-display); font-size: var(--z-fs-md); font-weight: 600; color: var(--z-green); }
.dts-plan__steps { margin-top: .4rem; padding-left: 1.25rem; font-size: var(--z-fs-sm); }
.dts-plan__steps li + li { margin-top: .25rem; }
.dts-plan__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-top: 1.25rem; padding-top: .6rem; border-top: 1px solid var(--line-strong); font-size: var(--z-fs-xs); color: var(--fg-muted); }
.dts-plan__print { margin-top: 1.1rem; }
@media (max-width: 560px) {
  .dts-plan__table thead { display: none; }
  .dts-plan__table tr { display: grid; padding: .5rem 0; border-bottom: 1px solid var(--line); }
  .dts-plan__table td { padding: .1rem 0; border: 0; white-space: normal !important; }
}

.dts-again { text-align: center; }
.dts-again p { margin-top: .35rem; color: var(--fg-muted); }
.dts-again__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1rem; }

/* ---------------- what the game teaches + FAQ ---------------- */
.dts-teach { padding: var(--z-section-sm) 0; background: var(--z-green-900); color: var(--z-cream); }
.dts-teach h2 { max-width: 24ch; margin-top: .5rem; font-family: var(--z-font-display); font-size: var(--z-fs-2xl); font-weight: 600; line-height: 1.1; color: var(--z-white); }
.dts-teach__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2.5rem; margin-top: 2rem; padding: 0; list-style: none; }
.dts-teach__item { position: relative; padding: 1rem 0 0 3.4rem; border-top: 1px solid rgba(250,249,245,.16); }
.dts-teach__n { position: absolute; left: 0; top: .9rem; font-family: var(--z-font-display); font-size: var(--z-fs-lg); font-weight: 600; color: var(--z-amber); }
.dts-teach__item h3 { font-family: var(--z-font-display); font-size: var(--z-fs-md); font-weight: 600; color: var(--z-white); }
.dts-teach__item p { margin-top: .35rem; font-size: var(--z-fs-sm); color: var(--z-green-200); }
.dts-teach__item a { display: inline-block; margin-top: .4rem; font-size: var(--z-fs-sm); font-weight: 600; color: var(--z-amber); }
@media (max-width: 760px) { .dts-teach__list { grid-template-columns: 1fr; } }
.dts-faq { padding: var(--z-section-sm) 0; }
.dts-faq__in { max-width: 48rem; }
.dts-faq h2 { font-family: var(--z-font-display); font-size: var(--z-fs-xl); font-weight: 600; color: var(--z-green); }
.dts-faq__q { margin-top: .75rem; padding: .9rem 1.1rem; border-radius: var(--z-r-md); background: var(--z-white); border: 1px solid var(--line); }
.dts-faq__q summary { cursor: pointer; font-weight: 600; color: var(--z-green); }
.dts-faq__q p { margin-top: .5rem; color: var(--fg-muted); }
.dts-faq__q a, .dts-faq__more a { color: var(--z-green); font-weight: 600; }
.dts-faq__more { margin-top: 1.25rem; font-size: var(--z-fs-sm); color: var(--fg-muted); }

/* ---------------- reduced motion: every animation lands on its end state ---------------- */
@media (prefers-reduced-motion: reduce) {
  .dts-leaf { display: none; }
  .sg-steam { animation: none; }
  .dts-card { transform: none; opacity: 1; }
  .dts-share__story, .dts-share__link { transform: none; }
}

/* ---------------- print: the book plan only, one cream page ---------------- */
@media print {
  @page { size: letter portrait; margin: 9mm; }
  html, body { background: #FBF8F1 !important; min-height: 0 !important; height: auto !important; }
  body.z-grain::after { display: none; }
  body > *:not(main), main > *:not(.dts), .dts__in > *:not(.dts-end), .dts-end > *:not(.dts-plan), .dts-plan__print { display: none !important; }
  .dts, .dts-end { display: block !important; padding: 0 !important; margin: 0 !important; }
  .dts__in { max-width: none; padding: 0; }
  .dts-plan { display: block !important; max-width: none; margin: 0; padding: 4mm 7mm; border: 0; border-radius: 0; box-shadow: none !important; animation: none !important; background: #FBF8F1 !important; }
  .dts-plan, .dts-plan * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dts-plan__title { font-size: 19pt; }
  .dts-plan__intro, .dts-plan__for { font-size: 9.5pt; }
  .dts-plan__table { font-size: 8.6pt; }
  .dts-plan__table td, .dts-plan__table th { padding: 1.3mm 1.6mm; }
  .dts-plan__h3 { font-size: 12pt; margin-top: 4mm; }
  .dts-plan__steps { font-size: 9pt; }
  .dts-plan__foot { font-size: 8pt; }
}