/* A persistent sheet holds all three acts. Only its contents move. */
.booklet-page{--book-ink:#344b40;--book-line:#d7ddd3}
.booklet-page .site-header{border-bottom:0}
.booklet-page .header-inner{min-height:76px;font-size:.85rem}
.write-wrap{max-width:760px;margin:24px auto;min-height:70vh;min-height:70dvh;padding:0 max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.booklet-motto{font:1rem/1.8 var(--serif);letter-spacing:.12em;text-align:center;margin:0 0 24px;color:var(--book-ink)}
.booklet{position:relative;border-color:var(--book-line);box-shadow:4px 4px 0 -1px var(--paper),4px 4px 0 0 var(--line);isolation:isolate}
.booklet::before{content:"";position:absolute;inset:0 auto 0 12px;width:1px;background:var(--line);pointer-events:none;opacity:.55}
#guide,.write-wrap .writing{padding:32px 40px;margin:0;max-width:none;position:relative;min-height:520px}
.write-wrap .eyebrow,.write-wrap .page-number{color:var(--book-ink)}
#guide h1,.write-wrap .writing h2{font-size:clamp(1.55rem,4vw,2rem);line-height:1.6;margin:20px 0 12px;color:var(--book-ink)}
#guide h1{max-width:22em}
#guide-description{font-size:.9rem}
.selections{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.selections:empty{display:none}
.selection-tag{display:inline-flex;align-items:center;gap:8px;min-height:48px;max-width:100%;padding:8px 12px;border:1px solid var(--book-line);border-radius:8px;background:#eef1eb;color:var(--book-ink);font-size:.82rem;text-align:left;overflow-wrap:anywhere}
.selection-tag::after{content:'↶';font-size:1rem}
.choices{display:grid;gap:12px;margin-top:28px}
.choice{justify-content:flex-start;text-align:left;width:100%;font-size:1rem;padding:14px 20px;border-radius:8px}
.choice.secondary:hover{background:#f3f5ef;border-color:var(--book-ink)}
.write-wrap .button.primary{background:var(--book-ink);border-color:var(--book-ink)}
.write-wrap .button.primary:hover{background:#263c31}
.write-wrap .button,.write-wrap .quiet-button{min-height:48px;overflow-wrap:anywhere}
.write-wrap section,.write-wrap div{min-width:0}
.guide-footnote{border-top:1px solid var(--line);padding-top:20px;margin-top:28px;font: .82rem/1.9 var(--serif);color:var(--muted)}
.category-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:.82rem;color:var(--muted);min-height:48px}
.scene-prompt{margin:8px 0 24px;color:var(--book-ink);font:1rem/1.9 var(--serif)}
.manuscript{position:relative}
.manuscript label{font-size:.8rem;color:var(--muted)}
.manuscript textarea,.note-text{padding:16px;line-height:2;font-size:1.05rem;font-family:var(--serif);min-height:232px;overflow-wrap:anywhere}
.manuscript textarea{border-color:var(--book-line);background:transparent;scroll-margin-bottom:24px}
.note-text{white-space:pre-wrap;user-select:text;border:1px solid transparent}
.note-label{visibility:hidden}
.is-note #change-category{visibility:hidden}
.note-colophon{border-top:1px solid var(--line);padding-top:16px;margin-top:24px;color:var(--muted);font-size:.8rem}
.note-colophon p+p{font-family:var(--serif);margin-top:8px;color:var(--book-ink)}
.writing-boundary{font-size:.76rem;margin-top:20px;margin-bottom:16px}
.voice{margin-top:16px;border-block:1px solid var(--line);padding:16px 0}
.voice p{font-size:.8rem}
.voice .writing-actions:empty{display:none}
.voice textarea{min-height:120px}
.finish-actions>.button{flex:1}
.write-wrap button:disabled{opacity:.55;cursor:default}
.booklet-page .footer{display:flex;justify-content:center;gap:24px;font-size:.8rem}
.gather-in{animation:gather .18s ease-out}
.page-turn{animation:turn .4s cubic-bezier(.2,.65,.3,1)}
.page-turn::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:8px;background:linear-gradient(100deg,transparent 20%,#344b4012 50%,transparent 80%);animation:page-edge .4s ease-out both}
.note-arrives .manuscript{animation:ink-settles .3s ease-out}
.note-arrives .note-colophon{animation:colophon .6s ease-out both}
.note-arrives .category-row{animation:colophon .4s ease-out both}
@keyframes gather{from{opacity:.65;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes turn{from{transform:translateX(12px)}to{transform:translateX(0)}}
@keyframes page-edge{from{opacity:0;transform:translateX(-12px)}40%{opacity:1}to{opacity:0;transform:translateX(12px)}}
@keyframes ink-settles{from{opacity:.65}to{opacity:1}}
@keyframes colophon{from{opacity:0;transform:translateY(4px)}50%{opacity:.2}to{opacity:1;transform:translateY(0)}}
@media(max-width:599px){#guide,.write-wrap .writing{padding:24px 24px 24px 28px;min-height:480px}.write-wrap{margin-top:12px}.booklet-motto{font-size:.9rem;margin-bottom:20px}.booklet-page .header-inner{flex-wrap:wrap;gap:8px;padding-block:12px;min-height:64px}.write-wrap .writing-actions{gap:8px}.write-wrap textarea,.note-text{padding:12px}.choice{padding:12px}.booklet::before{left:10px}.category-row{gap:0}.guide-footnote{font-size:.76rem}}
@media(prefers-reduced-motion:reduce){.booklet-page *,.booklet-page *::after{animation:none!important;scroll-behavior:auto!important}}
.selection-tag:last-child{animation:selection-settles .18s ease-out}@keyframes selection-settles{from{transform:translateY(6px) scale(1.025);opacity:.65}to{transform:translateY(0) scale(1);opacity:1}}
#question:focus-visible,#writing-title:focus-visible{outline:none}.booklet-page button:focus-visible,.booklet-page textarea:focus-visible{outline-color:var(--book-ink)}.is-note .finish-actions{display:none}