/* Text and controls remain live. The extracted paper is nine-sliced so that
   long poems scroll inside it while the jade and bookmark keep their shape. */
.cl-scroll-stage { --scroll-ink:#3c2b18; --scroll-muted:#806642; --scroll-rule:#b290595e; }
.cl-scroll-stage > .backdrop { opacity:1; filter:saturate(.86) brightness(.88); }
.cl-scroll-stage > .cl-scene-shade { background:linear-gradient(#1b140a7a,transparent 24%,#21180d12 70%,#130e0870); }
.cl-scroll-stage .story-topbar { z-index:7; padding-right:54px; background:transparent; }
.cl-scroll-stage .chapter-copy strong { font:21px/1.4 'STKaiti','Kaiti SC',serif; letter-spacing:.04em; }
.cl-scroll-stage .chapter-copy small { color:#e0c28b; letter-spacing:.1em; font-size:10px; }
.cl-scroll-composition { position:absolute; z-index:4; inset:91px 8px 39px; filter:drop-shadow(0 9px 16px #1e120955); }
.cl-scroll-surface { position:absolute; inset:0; border-style:solid; border-color:transparent; border-width:60px 43px 70px 38px; border-image:url('./cailou-scroll-assets/scroll-panel.webp') 180 130 210 115 fill / 60px 43px 70px 38px / 0 stretch; pointer-events:none; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) > .cl-workbench { z-index:2; inset:24px 43px 40px 40px; max-height:none; min-height:0; padding:0 2px 20px; border:0; box-shadow:none; border-radius:0; background:none; color:var(--scroll-ink); scrollbar-width:thin; scrollbar-color:#9d7b4566 transparent; scroll-padding-block:14px; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) > .cl-workbench::-webkit-scrollbar { width:3px; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) > .cl-workbench::-webkit-scrollbar-thumb { background:#9d7b4566; border-radius:4px; }
.cl-scroll-jade,.cl-scroll-bookmark { position:absolute; z-index:3; height:auto; pointer-events:none; user-select:none; }
.cl-scroll-jade { width:95px; left:-8px; bottom:-30px; }
.cl-scroll-bookmark { width:71px; right:-18px; top:-16px; }
.cl-scroll-foreground { position:absolute; z-index:2; bottom:-5px; left:0; width:100%; height:auto; pointer-events:none; }
.cl-scroll-tools { position:absolute; z-index:12; right:13px; top:28px; color:#ead2a0; }
.cl-scroll-tools > summary { list-style:none; cursor:pointer; display:grid; place-items:center; width:36px; height:38px; border:1px solid #c4a16477; border-radius:50%; font:24px/1 'Songti SC',serif; background:#251a1044; }
.cl-scroll-tools > summary::-webkit-details-marker { display:none; }
.cl-scroll-tools nav { position:absolute; top:45px; right:0; width:136px; padding:8px; background:#17150ff2; border:1px solid #aa8c51; box-shadow:0 8px 25px #0005; }
.cl-scroll-tools nav button { display:block; width:100%; min-height:44px; padding:8px; border:0; background:none; color:#ead4a8; font:16px 'STKaiti','Kaiti SC',serif; cursor:pointer; }
.cl-scroll-tools nav button:hover { background:#b3965133; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-workbench-heading { color:var(--scroll-muted); border-color:var(--scroll-rule); padding:1px 1px 12px; font-size:12px; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-workbench-heading span { font-size:11px; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-poem { margin:0 0 12px; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-poem header { position:relative; isolation:isolate; padding:28px 4px 17px; min-height:118px; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-poem header::before { content:''; position:absolute; z-index:-1; inset:-14px 0 -10px; background:url('./cailou-scroll-assets/poem-landscape.webp') center / 100% auto no-repeat; opacity:.57; pointer-events:none; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-poem header small { color:#69512d; font-size:12px; letter-spacing:.2em; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-poem h2 { margin:12px 0 0; color:#372411; font:38px/1.35 'STKaiti','Kaiti SC',serif; font-weight:500; letter-spacing:.08em; text-shadow:0 1px #fff6; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-poem--long h2 { font-size:25px; text-wrap:balance; line-height:1.55; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-poem-lines { position:relative; border-color:#b5945d80; background:none; padding:15px 0; gap:3px 0; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-poem-lines::before,:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-poem-lines::after { content:'❖'; position:absolute; left:50%; transform:translate(-50%,-50%); color:#ad8951; background:#f1e7d0; padding:0 7px; font-size:12px; line-height:1; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-poem-lines::before { top:0; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-poem-lines::after { top:100%; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-poem-line { color:#3b2918; font-size:18px; line-height:1.9; padding:8px 0; letter-spacing:0; border-radius:3px; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-poem-line:hover { background:#ab754013; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-poem-line.is-marked { background:#aa44351c; text-decoration-color:#a73726; text-underline-offset:6px; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-poem-hint { margin:12px 0 21px; font:12px/1.7 'STKaiti','Kaiti SC',serif; color:var(--scroll-muted); letter-spacing:.06em; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-gloss { border:1px solid #b08c5057; outline:1px solid #b08c502e; outline-offset:3px; padding:11px 12px; margin:10px 4px 20px; background:linear-gradient(#eee0be10,#dccba326); }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-gloss summary { color:#543a1d; font-size:17px; min-height:29px; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-gloss p { color:#654b2d; font-size:15px; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-note label,:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-field-label { color:var(--scroll-ink); font-size:17px; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-note label small { color:var(--scroll-muted); font-size:10px; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-note textarea,:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-speech-input { border:3px double #b390547e; border-radius:7px 2px; background:#f8edd722 url('./cailou-scroll-assets/note-blossom.webp') right bottom / 112px auto no-repeat; color:#3b2c1d; font:16px/1.85 'STKaiti','Kaiti SC',serif; min-height:112px; padding:12px; resize:vertical; box-shadow:inset 0 0 0 3px #f8edda66; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) textarea::placeholder { color:#968062; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-note-footer { color:var(--scroll-muted); font:12px/1.6 'Songti SC',serif; margin:8px 0 16px; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) :is(.cl-gold-button,.cl-small-button) { background:transparent url('./cailou-scroll-assets/button-gold.webp') center / 100% 100% no-repeat; border:0; box-shadow:none; color:#392610; border-radius:0; min-height:48px; padding:12px 20px 12px 25px; font:17px/1.5 'STKaiti','Kaiti SC',serif; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-small-button { min-height:39px; padding:8px 17px 8px 23px; font-size:14px; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) :is(.cl-gold-button,.cl-small-button):hover { filter:brightness(1.06); }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) :is(.cl-outline-button,.cl-choices .choice) { color:#594020; background:#ead9b522; border:1px solid #b28e547a; box-shadow:inset 0 0 0 3px #f4e7ce; font-family:'STKaiti','Kaiti SC',serif; border-radius:7px 2px; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-choices .choice { padding:14px 16px; font-size:17px; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-paper-actions { padding-top:14px; margin-top:17px; border-top:1px solid var(--scroll-rule); gap:9px; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-paper-actions button { font-size:16px; padding-inline:8px; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-paper-actions .cl-outline-button { min-height:48px; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) :focus-visible { outline:2px solid #875d2a; outline-offset:3px; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) :is(h1,.cl-preview h2,.cl-review-row h3) { color:#493119; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) :is(.cl-body,.cl-verdict-poem p,.cl-preview blockquote,.cl-saved-note) { color:#61472b; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) :is(.cl-eyebrow,.cl-muted,.cl-review-row small,.cl-verdict-poem small) { color:var(--scroll-muted); }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) :is(.cl-review-row,.cl-verdict-poem,.cl-preview) { border-color:var(--scroll-rule); }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-workbench > h1 { margin-top:16px; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-poem-tabs { margin-top:16px; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-poem-tabs button { background:#efe2c355; color:#88714d; border-color:#af8a5050; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-poem-tabs [aria-pressed=true] { color:#4a2d12; background:#c7a66b44; border-color:#a37a3c; box-shadow:inset 0 -2px #a37a3c; }
:is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-seal { color:#956e36; border-color:#ab8148; }
@media(min-width:430px) { .cl-scroll-composition { inset:99px 9px 44px; } :is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-poem-line { font-size:21px; } :is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-poem header { min-height:155px; padding-top:45px; } }
@media(max-width:360px) { .cl-scroll-composition { inset:86px 0 28px; } :is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) > .cl-workbench { inset:25px 35px 33px 34px; } .cl-scroll-stage .chapter-copy strong { font-size:18px; } .cl-scroll-stage .chapter-copy small { font-size:9px; } :is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-poem-line { font-size:16px; } :is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) .cl-note label small { display:inline; } .cl-scroll-jade { width:82px; bottom:-23px; } .cl-scroll-bookmark { width:60px; right:-11px; } }
@media(max-height:620px) { .cl-scroll-composition { top:78px; bottom:21px; } :is(.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive) > .cl-workbench { top:25px; bottom:30px; } .cl-scroll-jade { width:74px; bottom:-20px; } .cl-scroll-bookmark { width:62px; } }

.cl-scroll-composition,.cl-sheet--poem,.cl-sheet--archive { color-scheme:light; }
.cl-sheet.cl-sheet--poem,.cl-sheet.cl-sheet--archive { --scroll-ink:#3c2b18; --scroll-muted:#806642; --scroll-rule:#b290595e; color:#594020; background:#eee0c2 url('./cailou-scroll-assets/paper-texture.webp') repeat; border:4px double #b49256; border-radius:17px 3px; padding:22px 17px; }
.cl-sheet--poem .cl-close,.cl-sheet--archive .cl-close { color:#634422; background:#efe1c5ed; border-color:#ae8c50; }
.cl-sheet--archive > p,.cl-sheet--archive > small,.cl-sheet--archive .cl-scroll-poem summary { color:#77582e; }
.cl-sheet--archive .cl-scroll-poem { border-color:#ac8d5555; }
.cl-sheet--archive .cl-poem-lines { margin-top:15px; }

.cl-scroll-more { position:absolute; z-index:2; bottom:17px; left:30%; right:30%; text-align:center; color:#977447; font:11px/1.4 'STKaiti','Kaiti SC',serif; letter-spacing:.12em; pointer-events:none; }
.cl-scroll-more[hidden] { display:none; }