/* A single glass surface grows from the quotation into the private library. */
.stories-shell{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#f2f2f0;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
.stories-shell::backdrop{background:rgba(0,0,0,.32);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);animation:stories-backdrop-in 550ms ease both}
.stories-shell[open]{display:grid;place-items:center}
.stories-panel{position:relative;width:min(520px,calc(100vw - 40px));height:300px;max-height:90dvh;overflow:hidden;border-radius:30px;border:1px solid rgba(255,255,255,.21);background:linear-gradient(135deg,rgba(51,52,54,.66),rgba(20,21,23,.65));backdrop-filter:blur(32px) saturate(.6);-webkit-backdrop-filter:blur(32px) saturate(.6);box-shadow:inset 0 1px rgba(255,255,255,.1),0 30px 100px rgba(0,0,0,.28);transition:width 1500ms cubic-bezier(.22,1,.36,1),height 1500ms cubic-bezier(.22,1,.36,1),border-radius 1500ms ease;animation:stories-arrive 550ms cubic-bezier(.22,1,.36,1) both}
.stories-shell.is-library .stories-panel{width:90vw;height:88dvh}
.stories-quote{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:58px 38px 36px;margin:0;text-align:center;transition:opacity 650ms ease;line-height:1.65}
.stories-quote p{font-size:clamp(17px,2vw,21px);font-weight:400;margin:0;max-width:410px;letter-spacing:.01em}
.stories-quote cite{font-size:13px;font-style:normal;color:rgba(245,245,243,.58);letter-spacing:.025em}
.is-library .stories-quote{opacity:0;pointer-events:none}
.archive-close{position:absolute;z-index:3;top:22px;left:24px}
.archive-close:active{transform:scale(.96)}.archive-close:focus,.story-cover:focus{outline:none}.archive-close:focus-visible{background-color:rgba(160,160,160,.22)}.story-cover:focus-visible{box-shadow:0 20px 36px rgba(0,0,0,.4);transform:translateY(-3px)}
.stories-library{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity 850ms ease}
.library-ready .stories-library{opacity:1;visibility:visible}
.stories-library header{flex:none;display:flex;align-items:center;justify-content:flex-end;height:90px;padding:22px 30px 22px 84px}
.stories-library h2{font:500 21px/1.3 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;letter-spacing:.015em;margin:0}
.story-grid{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.17) transparent;min-height:0;flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:start;gap:48px 40px;padding:30px 6% 60px;transition:opacity 650ms ease}
.story-cover{display:grid;place-items:center;width:100%;max-width:215px;justify-self:center;aspect-ratio:2/3;appearance:none;padding:0;border:0;border-radius:3px;background:#fff;color:#111;box-shadow:0 16px 26px rgba(0,0,0,.24),0 3px 7px rgba(0,0,0,.2);font:400 18px/1.4 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;cursor:pointer;transition:transform 650ms cubic-bezier(.22,1,.36,1),box-shadow 450ms ease}
@media(hover:hover){.story-cover:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 22px 36px rgba(0,0,0,.32)}}
.story-cover.is-selected{transform:scale(1.06)}.reader-active .story-grid{opacity:.3}
.story-reader{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#fff;color:#111;overflow:auto;overscroll-behavior:contain;color-scheme:light;opacity:0;transform:translateY(10px) scale(.99);transition:opacity 800ms cubic-bezier(.22,1,.36,1),transform 800ms cubic-bezier(.22,1,.36,1)}
.story-reader::backdrop{background:transparent}.story-reader.is-visible{opacity:1;transform:none}
.reader-content{width:min(100%,760px);min-height:100%;margin:0 auto;padding:110px 48px max(80px,env(safe-area-inset-bottom));font:400 18px/2.05 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#242424;text-align:left;letter-spacing:.025em;overflow-wrap:break-word}.reader-content h2{font:500 20px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;margin:0 0 38px;letter-spacing:.14em;color:#111}.reader-content p{margin:0 0 1.6em}.reader-content p:last-child{margin-bottom:0}@media(max-width:600px){.reader-content{padding:100px 28px max(60px,env(safe-area-inset-bottom));font-size:17px;line-height:2}.reader-content h2{font-size:19px;margin-bottom:30px}}
.story-reader .archive-close{position:fixed;top:max(22px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));color:#333;background:rgba(230,230,230,.55);border-color:rgba(0,0,0,.12);box-shadow:inset 0 1px rgba(255,255,255,.8),0 4px 14px rgba(0,0,0,.04)}
.stories-shell.is-closing .stories-panel{animation:stories-depart 450ms ease both}.stories-shell.is-closing::backdrop{animation:stories-backdrop-out 450ms ease both}
@keyframes stories-arrive{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes stories-depart{to{opacity:0;transform:scale(.98)}}@keyframes stories-backdrop-in{from{opacity:0}to{opacity:1}}@keyframes stories-backdrop-out{to{opacity:0}}
@media(min-width:1450px){.story-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:900px){.story-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px}}
@media(max-width:600px){.stories-shell.is-library .stories-panel{width:95vw;height:calc(93dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:24px}.stories-panel{height:310px;border-radius:26px}.stories-quote{padding:60px 25px 30px;gap:18px}.stories-library header{height:84px;padding-right:23px}.stories-library h2{font-size:20px}.archive-close{top:18px;left:18px}.story-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;padding:22px 24px 44px}.story-cover{font-size:17px}}
@media(max-height:420px){.stories-quote{gap:10px;padding-top:50px}.stories-quote p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.stories-panel,.stories-shell::backdrop,.stories-shell.is-closing .stories-panel,.stories-shell.is-closing::backdrop{animation:none}.stories-panel,.stories-quote,.stories-library,.story-grid,.story-cover,.story-reader,.archive-close{transition:none;transform:none}}

/* Discreet, fixed page counter; long pages retain natural vertical scrolling. */
.story-reader{overflow-x:hidden;touch-action:pan-y pinch-zoom}
.page-counter{position:fixed;z-index:4;left:max(24px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));min-width:68px;height:40px;padding:0 16px;border-radius:22px;border:1px solid rgba(0,0,0,.1);background:rgba(236,236,236,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px rgba(255,255,255,.8),0 4px 16px rgba(0,0,0,.04);color:#555;font:400 13px/1 -apple-system,BlinkMacSystemFont,sans-serif;font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color 350ms ease}
.page-counter:hover,.page-counter:focus-visible{background:rgba(210,210,210,.78)}.page-counter:focus{outline:none}
@media(prefers-reduced-motion:reduce){.page-counter{transition:none}}

/* Covers retain the existing 2:3 book dimensions. */
.story-item{width:100%;max-width:215px;justify-self:center;min-width:0}
.story-cover{position:relative;overflow:hidden}
.story-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.story-title{margin:14px 0 0;text-align:center;font:400 14px/1.5 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;color:rgba(255,255,255,.85)}
.reader-controls{position:fixed;z-index:4;left:max(24px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));display:flex;gap:10px;align-items:center;max-width:calc(100vw - 48px)}
.reader-controls .page-counter{position:static;flex:none}
.reading-progress{display:flex;align-items:center;gap:12px;height:40px;width:clamp(150px,30vw,260px);min-width:0;padding:0 14px;border-radius:22px;border:1px solid rgba(0,0,0,.1);background:rgba(236,236,236,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px rgba(255,255,255,.8),0 4px 16px rgba(0,0,0,.04);color:#555}
.reading-progress input{appearance:none;-webkit-appearance:none;min-width:0;width:100%;height:28px;margin:0;background:transparent;cursor:pointer;touch-action:pan-x}
.reading-progress input::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:rgba(70,70,70,.35)}
.reading-progress input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin-top:-8px;border-radius:50%;background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.7),rgba(255,255,255,.04) 65%);border:1px solid rgba(100,100,100,.4);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:inset 0 1px 2px rgba(255,255,255,.9),0 2px 5px #0002}
.reading-progress input::-moz-range-track{height:2px;background:rgba(70,70,70,.35)}
.reading-progress input::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.7),rgba(255,255,255,.04) 65%);border:1px solid rgba(100,100,100,.4);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.reading-progress input:focus-visible{outline:none;filter:brightness(.85);border-radius:6px}
.reading-percent{flex:none;min-width:34px;text-align:right;font:400 11px/1 -apple-system,BlinkMacSystemFont,sans-serif;font-variant-numeric:tabular-nums}
.reader-content{padding-bottom:max(100px,calc(env(safe-area-inset-bottom) + 80px))}

.book-contents{max-width:480px;display:grid;gap:12px}.book-contents button{display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;padding:12px 0;border:0;border-bottom:1px solid rgba(0,0,0,.08);background:transparent;color:inherit;font:inherit;cursor:pointer;text-align:left}.book-contents button span:last-child{font-size:13px;color:#888;font-variant-numeric:tabular-nums}.book-contents button:hover{color:#777}.book-contents button:focus-visible{outline:none;background-color:#00000005}