@charset "UTF-8";
:root{color-scheme:light;--ink:#543d2c;--muted:#927858;--gold:#bb8d43;--paper:#f4e7c7;--serif:Georgia,"Noto Serif TC","PMingLiU",serif;--sans:"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{background:radial-gradient(ellipse at 50% 38%,#ede4d6 0%,#ddd0bc 52%,#c6b39b 100%);font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}body::before{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(103deg,transparent 0 18px,#745a3e03 18px 19px)}button,input{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}a{color:inherit;text-decoration:none}img,video{display:block;max-width:100%}svg{display:block;width:24px;height:24px;flex-shrink:0}[hidden]{display:none!important}:focus-visible{outline:3px solid #a97527;outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:18px;top:-80px;z-index:100;background:#4c3025;color:#fff2d4;padding:10px 15px;border-radius:4px}.skip-link:focus{top:12px}
.stage{width:100%;height:100%;height:100dvh;display:grid;place-items:center;padding:48px 48px 40px 76px;outline:none;position:relative}.book{position:relative;width:min(1500px,100%);height:min(830px,100%);min-width:0;min-height:0;padding:20px 21px 26px;border:2px solid #3b271f;border-radius:15px 18px 24px 22px;background:repeating-linear-gradient(135deg,#ffffff03 0 1px,transparent 1px 4px),radial-gradient(ellipse at top,#866044,#58392a 70%);box-shadow:0 3px 0 #99724a,0 8px 0 #3d261e,0 11px 0 #8b6845,0 18px 28px #38241840,0 35px 75px #3527193d,inset 0 0 0 5px #8a6645,inset 0 0 0 7px #3e291e,inset 0 0 18px #1a100a88;isolation:isolate}.book::before{content:"";position:absolute;inset:10px;border:1px dashed #bd93646b;border-radius:8px 10px 16px 14px;pointer-events:none}.book::after{content:"";position:absolute;bottom:11px;left:25px;right:25px;height:18px;border-radius:0 0 48% 48%;background:repeating-linear-gradient(0deg,#a48b61 0 1px,#e8d8b1 1px 3px);box-shadow:0 2px 3px #1b100b7d;z-index:-1}.book-browser{height:100%;min-height:0}
.book-name{position:absolute;left:50%;top:-29px;transform:translateX(-50%);z-index:6;height:48px;min-width:245px;border:2px solid #aa8050;border-radius:8px 8px 13px 13px;padding:5px 32px;background:linear-gradient(#765035,#4d3024);box-shadow:0 3px 0 #2d1b14,0 5px 10px #3a241b66,inset 0 0 0 3px #4c3025,inset 0 0 0 4px #b38c5b61;display:flex;align-items:center;justify-content:center;gap:12px;color:#f1d8a0;white-space:nowrap}.book-name strong{font-family:var(--serif);font-size:18px;font-weight:400;letter-spacing:1.5px;text-shadow:0 1px 1px #170c05}.book-name span{font-size:10px;letter-spacing:2px;opacity:.78}.book-name::before,.book-name::after{content:"";position:absolute;top:11px;width:4px;height:4px;border-radius:50%;background:#d4a75d;box-shadow:0 1px 2px #1d1209}.book-name::before{left:12px}.book-name::after{right:12px}
.book-corner{position:absolute;z-index:7;width:70px;height:70px;background:linear-gradient(135deg,#fff0ae 0%,#d5aa53 19%,#f1d481 43%,#ab7935 58%,#e4bd68 72%,#826029);clip-path:polygon(0 0,100% 0,100% 22%,34% 22%,22% 34%,22% 100%,0 100%);filter:drop-shadow(1px 2px 1px #3a2519);pointer-events:none}.book-corner::after{content:"";position:absolute;inset:7px;border-top:2px solid #87622e;border-left:2px solid #87622e}.corner-tl{left:-4px;top:-4px;border-radius:11px 0 0 0}.corner-tr{right:-4px;top:-4px;transform:rotate(90deg);border-radius:11px 0 0 0}.corner-br{right:-4px;bottom:-4px;transform:rotate(180deg);border-radius:11px 0 0 0}.corner-bl{left:-4px;bottom:-4px;transform:rotate(270deg);border-radius:11px 0 0 0}
.pages{height:100%;min-height:0;position:relative;display:grid;grid-template-columns:47% 53%;border:1px solid #b59b6d;border-radius:9px 9px 15px 14px;box-shadow:0 2px 0 #dcc79c,0 5px 0 #a98b5a,0 8px 0 #e8d4a9,0 9px 5px #22150b80;overflow:hidden}.page{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;padding:clamp(26px,3.4vw,55px) clamp(25px,3.2vw,50px) 22px;isolation:isolate}.page::before{content:"";position:absolute;inset:14px;border:1px solid #bba16a47;border-radius:7px;pointer-events:none;z-index:-1}.page::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 12% 30%,#a2824d0b,transparent 42%),repeating-linear-gradient(8deg,#88673103 0 1px,transparent 1px 4px);pointer-events:none;z-index:-1}.page-left{background:radial-gradient(ellipse at 5% 5%,#fcf3d9,transparent 58%),linear-gradient(90deg,#d7c297,#f2e5c4 6%,#f7ecd0 77%,#e2cfaa 95%,#b39a73);border-radius:8px 0 0 11px;padding-right:clamp(31px,3.7vw,57px)}.page-right{background:radial-gradient(ellipse at 82% 24%,#fff7df,transparent 60%),linear-gradient(90deg,#baa07b,#e9d9b5 5%,#f7ecd0 18%,#f3e5c3 93%,#ddc698);border-radius:0 8px 12px 0;padding-left:clamp(33px,3.7vw,57px)}.spine{position:absolute;left:47%;top:0;bottom:0;width:34px;transform:translateX(-50%);z-index:3;pointer-events:none;background:linear-gradient(90deg,transparent,#73532d26 21%,#3c2b164d 45%,#fff4ce88 50%,#9070462d 63%,transparent);border-radius:48%;box-shadow:inset 1px 0 5px #decda16b}.spine::after{content:"";position:absolute;left:50%;top:7%;bottom:8%;width:1px;background:linear-gradient(transparent,#7f623b70,transparent)}.ribbon{position:absolute;bottom:-31px;left:calc(47% - 11px);width:27px;height:49px;background:linear-gradient(90deg,#782e27,#ad4c3c 45%,#8f392d);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);z-index:4;box-shadow:inset 3px 0 0 #d27b5580,inset -3px 0 0 #5d231d80;pointer-events:none}
.theme-tabs{position:absolute;left:-47px;top:72px;bottom:45px;display:flex;flex-direction:column;gap:8px;z-index:5}.theme-tab{position:relative;width:49px;height:51px;min-height:38px;border:2px solid #4b3024;border-radius:8px 0 0 8px;display:grid;place-items:center;padding:8px 10px 8px 7px;background:linear-gradient(90deg,#816142,#69462f);box-shadow:-2px 2px 3px #3a251a38,inset 0 0 0 2px #bc956341;color:#e3c68c;transition:width .18s,filter .18s}.theme-tab::after{content:"";position:absolute;inset:4px 3px 4px 4px;border:1px solid #d5b57b3d;border-radius:4px 0 0 4px;pointer-events:none}.theme-tab:hover{filter:brightness(1.16)}.theme-tab[aria-pressed="true"]{background:linear-gradient(100deg,#e4bd69,#f1d999 48%,#b38b49);color:#634329;border-color:#8f6734;box-shadow:-2px 2px 4px #3a251a38,inset 0 0 0 2px #f9e2a3;transform:translateX(-3px);width:52px}.theme-tab svg{width:25px;height:25px;stroke-width:1.55;filter:drop-shadow(0 1px 0 #fff3c927)}.theme-tooltip{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);white-space:nowrap;border:1px solid #a17e48;border-radius:4px;background:#563a29;color:#f8e6bd;font-size:11px;padding:5px 10px;opacity:0;pointer-events:none;transition:opacity .15s;box-shadow:0 2px 5px #29180d30}.theme-tab:hover .theme-tooltip,.theme-tab:focus-visible .theme-tooltip{opacity:1}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.page-heading h1{font-family:var(--serif);font-size:clamp(24px,2.5vw,36px);font-weight:600;letter-spacing:5px;margin:0;line-height:1.5;text-shadow:0 1px 0 #fff8e4}.page-kicker{font-family:var(--serif);font-size:9px;letter-spacing:4px;color:#a78b5d;margin:0 0 7px}.small-button{border:1px solid #b99a635e;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;padding:7px;background:#f6e8c42b;color:#997a4e;flex-shrink:0}.small-button svg{width:17px;height:17px}.small-button:hover,.small-button[aria-expanded="true"]{background:#e5d0a7;color:#5c4028}.flourish{height:22px;display:flex;align-items:center;gap:11px;color:#b59458;opacity:.75;margin-top:15px;flex-shrink:0}.flourish::before,.flourish::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#b59458)}.flourish::after{transform:rotate(180deg)}.flourish svg{width:52px;height:20px}.search-panel{display:flex;align-items:center;gap:8px;margin:8px 0 3px;padding:4px 0;border-bottom:1px solid #b79b665e}.search-panel input{border:0;background:transparent;min-width:0;width:100%;font-size:12px;padding:4px;outline-offset:1px}.search-panel input::placeholder{color:#a28c68}.search-panel button{background:transparent;border:0;font-size:16px;color:#a28c68;padding:0 4px}
.work-list{list-style:none;margin:clamp(14px,3vh,34px) 0 0;padding:0;display:flex;flex-direction:column;gap:13px;min-height:0;flex:1}.work-list li{min-width:0}.story-entry{width:100%;min-height:83px;display:flex;align-items:center;gap:16px;text-align:left;padding:14px 16px 14px 13px;border:1px solid #bca16b73;border-radius:8px;background:linear-gradient(100deg,#eee0bc80,#f8edce90);box-shadow:0 2px 0 #b2986330,inset 0 0 0 3px #fff8e338;position:relative;transition:background .2s,box-shadow .2s}.story-entry::after{content:"";position:absolute;inset:4px;border:1px solid transparent;border-radius:4px;pointer-events:none}.story-entry:hover{background:#f9edcd;border-color:#b38a47}.story-entry[aria-pressed="true"]{background:linear-gradient(100deg,#e5ce9b,#f8e8b7 73%,#eddaa9);border-color:#a77b3e;box-shadow:0 2px 0 #a27b3e40,0 0 12px #bc98451c,inset 0 0 0 3px #fbefcc88}.story-entry[aria-pressed="true"]::after{border-color:#bd985b70}.story-emblem{display:grid;place-items:center;width:43px;height:47px;flex-shrink:0;border-radius:8px;background:linear-gradient(145deg,#947653,#4e5e43);color:#f4dc98;border:1px solid #9d824c;box-shadow:inset 0 0 0 3px #ded09938,0 2px 2px #4f3b1d33}.story-emblem svg{width:27px;height:27px;stroke-width:1.5}.story-entry[data-theme="music"] .story-emblem{background:linear-gradient(145deg,#a17a62,#704949)}.entry-copy{min-width:0;flex:1}.entry-title{display:block;font-family:var(--serif);font-size:clamp(15px,1.4vw,20px);font-weight:600;letter-spacing:1px;line-height:1.6}.entry-meta{display:flex;gap:9px;margin-top:4px;font-size:10px;color:#9b8057;letter-spacing:.6px}.entry-arrow{color:#a67b39;opacity:0;flex-shrink:0}.entry-arrow svg{width:11px;height:11px}.story-entry[aria-pressed="true"] .entry-arrow{opacity:1}
.page-footer{margin-top:auto;padding-top:19px;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:47px}.collection-count{font-size:10px;color:#a38960;letter-spacing:1px}.pagination{display:flex;align-items:center;gap:12px}.page-nav{border:1px solid #b99c6559;border-radius:5px;background:linear-gradient(#f2e1bb,#e5cf9e);color:#80623e;box-shadow:0 1px 0 #baa073;width:33px;height:29px;display:grid;place-items:center;padding:5px}.page-nav svg{width:14px;height:14px}.page-nav:disabled{opacity:.28}.page-indicator{font-family:var(--serif);font-size:12px;letter-spacing:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.selection-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:27px;color:#a58a60;font-family:var(--serif);font-size:10px;letter-spacing:2px}.selection-heading span:last-child{letter-spacing:1px}.preview-space{min-height:0;flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;padding-top:18px;padding-bottom:14px}.cover-button{width:100%;padding:9px;border:1px solid #a28452;background:linear-gradient(135deg,#d4b780,#ad8a4d 30%,#e9cf99 65%,#967244);border-radius:5px;position:relative;box-shadow:0 3px 0 #ad9065,0 7px 13px #67502a40,inset 0 0 0 3px #f0d7a27a;flex-shrink:1;min-height:0;transition:transform .25s,box-shadow .25s}.cover-button::before{content:"";position:absolute;inset:4px;border:1px solid #785b32;border-radius:2px;pointer-events:none;z-index:1}.cover-image{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid #73542e;filter:sepia(.06);border-radius:1px}.cover-button:hover{transform:translateY(-2px);box-shadow:0 3px 0 #ad9065,0 11px 19px #67502a49,inset 0 0 0 3px #f0d7a27a}.cover-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:#fff0cce8;color:#79572e;border:1px solid #e3c77b;box-shadow:0 0 0 5px #2d251d2e,0 3px 14px #0d160f45;transition:background .2s,scale .2s}.cover-play svg{width:20px;height:20px;margin-left:3px}.cover-button:hover .cover-play{background:#fff1cb;scale:1.05}.selection-title{font-family:var(--serif);font-size:clamp(17px,1.8vw,26px);font-weight:500;line-height:1.6;letter-spacing:2px;text-align:center;margin:24px 0 7px}.play-hint{border:0;background:transparent;padding:4px 10px;font-size:10px;color:#a18251;letter-spacing:2px}.play-hint:hover{color:#674c2b}.right-footer{display:flex;align-items:center;justify-content:center;gap:14px;color:#b39a6d;font-family:var(--serif);font-size:9px;letter-spacing:3px;margin-top:auto;min-height:35px}.right-footer::before,.right-footer::after{content:"";height:1px;width:34px;background:#b7a07766}.empty-note{margin:auto;text-align:center;font-family:var(--serif);font-size:16px;line-height:1.9;color:#9f855a;padding:25px 5px}.empty-note button{display:block;margin:12px auto 0;background:none;border:0;border-bottom:1px solid #bea16a;font-size:11px;padding:4px;color:#82603d}.empty-preview{color:#b8a071;opacity:.45;display:grid;place-items:center;flex:1}.empty-preview svg{width:90px;height:90px;stroke-width:.7}
.cinema{position:absolute;inset:20px 21px 26px;z-index:20;display:grid;grid-template-rows:49px minmax(0,1fr) 30px;background:#171711;border:1px solid #d8b56b;border-radius:6px;box-shadow:0 0 0 5px #60452e,0 5px 25px #180f0ab0;animation:open-cinema .24s ease-out;overflow:hidden;color:#e9d7ae}.cinema-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px 8px 20px;background:linear-gradient(#3c3325,#28261c);border-bottom:1px solid #a88b4b35;gap:15px}.cinema-header h2{font-family:var(--serif);font-size:14px;font-weight:400;letter-spacing:1px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.close-player{width:33px;height:33px;border:1px solid #bc925b8c;border-radius:5px;display:grid;place-items:center;flex-shrink:0;background:linear-gradient(#78513a,#533829);color:#f5dbac;padding:7px;box-shadow:inset 0 0 0 2px #c29b6240}.close-player svg{width:16px;height:16px}.close-player:hover{background:#8a5940}.cinema-stage{position:relative;min-height:0;min-width:0;display:grid;place-items:center;background:#0d110e;overflow:hidden}.cinema-video{width:100%;height:100%;min-height:0;object-fit:contain;display:block;background:#0d110e}.cinema-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.27;filter:blur(1px)}.cinema-wait{position:relative;z-index:1;text-align:center;padding:25px;display:flex;flex-direction:column;align-items:center;gap:18px;max-width:90%}.cinema-wait p{font-size:13px;letter-spacing:1px;margin:0;line-height:1.8;color:#eadcb8}.loading-seal{height:45px;width:45px;border:1px solid #d6b26b;border-radius:50%;display:grid;place-items:center;color:#e2bf79;animation:breath 1.7s ease-in-out infinite;font-family:var(--serif);font-size:21px}.retry-button{border:1px solid #b49150;background:#5c4930;color:#f5e2b9;border-radius:4px;padding:9px 20px;font-size:12px;letter-spacing:1px}.cinema-status{margin:0;padding:5px 14px;font-size:10px;color:#b7aa8b;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}.cinema-status.is-error{color:#e1b18f}.initial-state{text-align:center;color:#92734e;font-size:13px;letter-spacing:2px}.initial-mark{font-family:var(--serif);font-size:59px;color:#6c4c31;text-shadow:0 1px 0 #fff5dc}.initial-state p{margin:12px 0 20px}.initial-state button{background:#65492e;border:1px solid #ad8b54;color:#f4dfb4;padding:9px 20px;border-radius:4px;font-size:12px}.noscript{position:fixed;inset:0;display:grid;place-items:center;background:#e4d7bf;padding:30px;color:#60472e}@keyframes breath{50%{opacity:.35;transform:scale(.95)}}@keyframes open-cinema{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@media(max-width:1050px){.stage{padding:42px 31px 35px 61px}.book{padding:17px 17px 23px}.page{padding:30px 27px 17px}.page-left{padding-right:34px}.page-right{padding-left:35px}.page-heading h1{font-size:27px}.story-entry{gap:11px;padding:11px;min-height:77px}.entry-title{font-size:17px;letter-spacing:.4px}.story-emblem{width:36px;height:41px}.story-emblem svg{width:24px;height:24px}.theme-tabs{left:-43px;gap:7px}.theme-tab{width:45px;height:47px}.theme-tab[aria-pressed="true"]{width:48px}.selection-title{font-size:21px}.cinema{inset:17px 17px 23px}}
@media(max-height:680px) and (min-width:681px){.stage{padding-top:34px;padding-bottom:29px}.page{padding-top:23px;padding-bottom:13px}.book-name{height:40px;top:-25px}.page-kicker{margin-bottom:3px}.page-heading h1{font-size:27px}.flourish{margin-top:7px;height:17px}.work-list{margin-top:15px;gap:9px}.story-entry{min-height:65px;padding-block:9px}.story-emblem{height:38px}.entry-title{font-size:16px}.page-footer{padding-top:11px}.selection-title{margin-top:16px;font-size:20px}.preview-space{padding-top:8px;padding-bottom:4px}.right-footer{min-height:24px}.theme-tabs{top:48px;gap:5px}.theme-tab{height:43px;min-height:32px}.theme-tab svg{width:22px;height:22px}.cover-button{max-width:min(100%,calc((100dvh - 250px)*1.65))}}
@media(max-width:680px) and (orientation:portrait){.stage{padding:36px 16px 27px 43px}.book{padding:12px 11px 18px;border-radius:10px 12px 16px 14px}.book::before{inset:7px}.book-name{height:35px;top:-23px;min-width:195px;padding-inline:22px;gap:9px;border-radius:6px 6px 9px 9px}.book-name strong{font-size:15px;letter-spacing:1px}.book-name span{font-size:8px;letter-spacing:1px}.book-name::before,.book-name::after{top:8px;width:3px;height:3px}.book-corner{width:47px;height:47px}.book-corner::after{inset:5px;border-width:1px}.pages{grid-template-columns:1fr;grid-template-rows:44% 56%;border-radius:5px 5px 8px 8px}.page{padding:16px 18px 11px}.page::before{inset:8px}.page-left{border-radius:5px 5px 0 0;background:linear-gradient(180deg,#e8d7ad,#f6e9c8 13%,#f7ebcc 84%,#c8ad7e)}.page-right{border-radius:0 0 7px 7px;background:radial-gradient(ellipse at 70% 40%,#fff6de,transparent 70%),linear-gradient(180deg,#c4a97a,#f1e1ba 9%,#f6e9c8 90%,#dfc794);padding:13px 18px 8px}.spine{left:0;right:0;top:44%;bottom:auto;width:100%;height:21px;transform:translateY(-50%);border-radius:50%;background:linear-gradient(180deg,transparent,#76532b22 24%,#3b291637 45%,#fff3ca77 51%,#8d6d4229 65%,transparent);box-shadow:none}.spine::after{left:8%;right:8%;top:50%;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,transparent,#87663c5c,transparent)}.ribbon{left:calc(50% - 9px);width:21px;bottom:-24px;height:36px}.theme-tabs{left:-32px;top:39px;gap:5px;bottom:20px}.theme-tab{width:34px;height:39px;min-height:30px;border-width:1px;padding:6px 7px 6px 4px;border-radius:5px 0 0 5px}.theme-tab[aria-pressed="true"]{width:37px;transform:translateX(-2px)}.theme-tab svg{width:21px;height:21px}.theme-tab::after{inset:3px}.page-kicker{display:none}.page-heading h1{font-size:23px;letter-spacing:4px}.small-button{width:28px;height:28px;padding:6px}.small-button svg{width:15px;height:15px}.flourish{height:12px;margin-top:6px;gap:8px}.flourish svg{width:39px;height:15px}.work-list{margin-top:9px;gap:7px}.story-entry{padding:7px 9px;gap:10px;min-height:57px;border-radius:5px}.story-emblem{width:31px;height:35px;border-radius:5px}.story-emblem svg{width:22px;height:22px}.entry-title{font-size:14px;line-height:1.45;letter-spacing:.3px}.entry-meta{font-size:8px;margin-top:2px;gap:6px}.entry-arrow svg{width:9px;height:9px}.page-footer{padding-top:7px;min-height:29px;gap:5px}.collection-count{font-size:8px;letter-spacing:0}.pagination{gap:8px}.page-nav{width:25px;height:23px;padding:4px}.page-nav svg{width:11px;height:11px}.page-indicator{font-size:10px;letter-spacing:1px}.selection-heading{font-size:8px;min-height:20px;letter-spacing:1.5px}.preview-space{padding:8px 0 0}.cover-button{padding:6px;max-width:min(100%,calc((100dvh - 360px)*1.43))}.cover-button::before{inset:3px}.cover-play{width:43px;height:43px;box-shadow:0 0 0 3px #2d251d2e,0 3px 10px #0d160f45}.cover-play svg{width:15px;height:15px}.selection-title{font-size:17px;line-height:1.5;letter-spacing:.7px;margin:14px 0 3px}.play-hint{font-size:9px;letter-spacing:1.5px;padding:3px}.right-footer{font-size:7px;letter-spacing:2px;min-height:23px;gap:9px}.right-footer::before,.right-footer::after{width:23px}.search-panel{position:absolute;left:17px;right:17px;top:13px;padding:6px;background:#f1e2bd;z-index:4;border:1px solid #bd9c60;border-radius:4px;box-shadow:0 3px 8px #84643a30;margin:0}.search-panel input{font-size:12px}.cinema{inset:12px 11px 18px;grid-template-rows:45px minmax(0,1fr) 29px}.cinema-header{padding:7px 10px}.cinema-header h2{font-size:12px;letter-spacing:.4px}.close-player{width:29px;height:29px;padding:6px}.cinema-wait{padding:18px}.cinema-wait p{font-size:11px}.cinema-status{font-size:9px;padding-inline:8px}.empty-note{font-size:13px;padding:10px}.empty-preview svg{width:60px;height:60px}}
@media(max-height:600px) and (orientation:portrait){.pages{grid-template-rows:48% 52%}.spine{top:48%}.stage{padding-top:30px;padding-bottom:20px}.page{padding-top:10px;padding-bottom:8px}.page-heading h1{font-size:20px}.flourish{display:none}.work-list{margin-top:7px;gap:5px}.story-entry{min-height:47px;padding-block:5px}.story-emblem{height:30px}.entry-title{font-size:12px}.entry-meta{font-size:7px}.page-footer{padding-top:5px}.selection-title{font-size:14px;margin-top:8px}.selection-heading{min-height:15px;font-size:7px}.right-footer{display:none}.preview-space{padding-top:5px}.cover-button{max-width:min(100%,calc((100dvh - 345px)*1.45))}.theme-tabs{top:32px;gap:4px}.theme-tab{height:33px}.play-hint{font-size:8px}}
@media(max-height:460px) and (orientation:landscape){.stage{padding:24px 22px 18px 48px}.book{padding:12px 12px 16px}.book-name{top:-18px;height:29px;min-width:205px}.book-name strong{font-size:14px}.book-name span{font-size:8px}.book-corner{width:45px;height:45px}.book-corner::after{inset:5px;border-width:1px}.page{padding:14px 22px 9px}.page-kicker{display:none}.page-heading h1{font-size:23px}.small-button{width:28px;height:28px;padding:6px}.flourish{height:12px;margin-top:3px}.work-list{margin-top:8px;gap:7px}.story-entry{min-height:51px;padding:7px 10px;gap:10px}.story-emblem{width:30px;height:33px}.story-emblem svg{width:22px;height:22px}.entry-title{font-size:13px;line-height:1.4}.entry-meta{font-size:8px;margin-top:2px}.page-footer{padding-top:5px;min-height:26px}.collection-count{font-size:8px}.pagination{gap:7px}.page-nav{width:26px;height:23px}.page-indicator{font-size:10px}.theme-tabs{left:-33px;top:27px;gap:3px}.theme-tab{width:35px;height:32px;min-height:25px;padding:4px}.theme-tab[aria-pressed="true"]{width:38px}.theme-tab svg{width:19px;height:19px}.selection-heading{font-size:8px;min-height:18px}.cover-button{max-width:min(100%,calc((100dvh - 165px)*1.65));padding:6px}.cover-play{width:39px;height:39px}.cover-play svg{width:14px;height:14px}.selection-title{font-size:15px;line-height:1.4;margin:9px 0 1px}.play-hint{font-size:8px;padding:2px}.right-footer{display:none}.ribbon{bottom:-21px;height:33px;width:20px}.cinema{inset:12px 12px 16px;grid-template-rows:36px minmax(0,1fr) 24px}.cinema-header{padding-block:4px}.close-player{width:27px;height:27px;padding:6px}.cinema-status{font-size:9px;padding-top:2px}.search-panel{position:absolute;top:10px;left:20px;right:20px;z-index:4;background:#f1e2bd;border:1px solid #bd9c60;border-radius:3px;padding:3px 5px;margin:0}}
.story-thumbnail{display:block;width:48px;height:48px;flex:0 0 48px;overflow:hidden;padding:2px;border:1px solid #aa8248;border-radius:5px;background:linear-gradient(135deg,#ead297,#9e7844,#e6ca8b);box-shadow:0 2px 3px #50391e33,inset 0 0 0 1px #f8e9bc80}.story-thumbnail img{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover;border-radius:2px;filter:sepia(.06)}.story-entry[aria-pressed="true"] .story-thumbnail{border-color:#8c622e;box-shadow:0 2px 3px #50391e33,0 0 0 2px #d2af6552}.book-depth{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none!important;user-select:none;contain:strict}.book-depth[hidden]{display:none!important}
@media(max-width:1050px){.story-thumbnail{width:42px;height:42px;flex-basis:42px}}
@media(max-width:680px) and (orientation:portrait){.story-thumbnail{width:36px;height:36px;flex-basis:36px;border-radius:4px}}
@media(max-height:600px) and (orientation:portrait){.story-thumbnail{width:30px;height:30px;flex-basis:30px;padding:1px}}
@media(max-height:460px) and (orientation:landscape){.story-thumbnail{width:32px;height:32px;flex-basis:32px;padding:1px}}
.preview-space{container-type:size}
.cover-button{width:min(100%,calc(177.7778cqh - 177.7778px));max-width:100%;flex:0 0 auto}
.cover-image{height:auto}
@media(max-width:680px) and (orientation:portrait){.cover-button{width:min(100%,calc(177.7778cqh - 142.2222px));max-width:100%}}
@media(max-height:600px) and (orientation:portrait){.cover-button{width:min(100%,calc(177.7778cqh - 117.3333px));max-width:100%}}
@media(max-height:460px) and (orientation:landscape){.cover-button{width:min(100%,calc(177.7778cqh - 110.2222px));max-width:100%}}
/* 五欄三列保留十五個位置；縮圖貼齊格線，僅邊緣柔和羽化。 */
.page-left{container-type:size;--grid-reserve:158px}
.work-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:1px;width:min(100%,max(0px,calc((100cqh - var(--grid-reserve))*5/3)));height:auto;aspect-ratio:5/3;flex:0 0 auto;align-self:center;margin:16px 0 0;padding:1px;background:#a98950;border:0;border-radius:0;box-shadow:0 2px 5px #6e4b2430;overflow:hidden}
.work-list li{min-width:0;min-height:0;margin:0;background:#f1e2bd}
.work-list .empty-cell{background:linear-gradient(135deg,#f8edcf88,#dfc99d40),#eedeb8}
.work-list .story-entry{display:block;width:100%;height:100%;min-height:0;padding:0;gap:0;border:0;border-radius:0;box-shadow:none;overflow:hidden;background:none}
.work-list .story-entry:hover{background:none;border:0;box-shadow:none}
.work-list .story-entry::after{inset:0;border:0;border-radius:0;box-shadow:inset 0 0 0 1px #fff3d43d}
.work-list .story-entry[aria-pressed="true"]::after{border:0;box-shadow:inset 0 0 0 3px #f5d582,inset 0 0 0 4px #75511c}
.work-list .story-entry:focus-visible{outline:0}
.work-list .story-entry:focus-visible::after{box-shadow:inset 0 0 0 3px #fff4cb,inset 0 0 0 5px #674616}
.work-list .story-thumbnail,.work-list .story-entry[aria-pressed="true"] .story-thumbnail{display:block;width:100%;height:100%;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.work-list .story-thumbnail img{width:100%;height:100%;object-fit:cover;border-radius:0;filter:none;mask-image:linear-gradient(to right,transparent,#000 4px,#000 calc(100% - 4px),transparent),linear-gradient(to bottom,transparent,#000 4px,#000 calc(100% - 4px),transparent);mask-composite:intersect}
.work-list .empty-note{grid-column:1/-1;grid-row:1/-1;display:grid;place-content:center;text-align:center;padding:12px}
.page-left:has(.search-panel:not([hidden])){--grid-reserve:198px}
@media(max-width:1050px){.page-left{--grid-reserve:142px}}
@media(max-height:680px) and (min-width:681px){.page-left{--grid-reserve:112px}.page-left:has(.search-panel:not([hidden])){--grid-reserve:152px}.work-list{margin-top:10px}}
@media(max-width:680px) and (orientation:portrait){.pages{grid-template-rows:44% 56%}.spine{top:44%}.page-left,.page-left:has(.search-panel:not([hidden])){--grid-reserve:90px}.work-list{margin-top:8px}.page-left .page-footer{padding-top:5px;min-height:28px}}
@media(max-height:600px) and (orientation:portrait){.pages{grid-template-rows:48% 52%}.spine{top:48%}.page-left,.page-left:has(.search-panel:not([hidden])){--grid-reserve:70px}.work-list{margin-top:6px}}
@media(max-height:460px) and (orientation:landscape){.page-left,.page-left:has(.search-panel:not([hidden])){--grid-reserve:91px}.work-list{margin-top:6px}}
/* 壓低目錄上方空間，保留可搜尋的細小工具入口。 */
.page-left{--grid-reserve:65px;padding-top:24px}
.page-left .page-heading{height:0;min-height:0;position:relative;z-index:5}
.page-left #toggle-search{position:absolute;right:0;top:-19px;width:23px;height:23px;padding:5px;background:#f4e7c7d9}
.page-left .work-list{margin-top:10px}
.page-left .page-footer{margin-top:16px;padding-top:6px;min-height:30px}
.page-left:has(.search-panel:not([hidden])){--grid-reserve:107px}
.selection-heading time{font-size:11px;color:#80623e;font-variant-numeric:tabular-nums;letter-spacing:.4px;white-space:nowrap}
/* 皮革外緣、分層紙邊與弧形裝訂槽，均為靜態材質。 */
.book{border-radius:18px 21px 32px 28px;background:radial-gradient(ellipse at 48% 2%,#ae80503b,transparent 56%),repeating-linear-gradient(37deg,#ffffff07 0 1px,transparent 1px 3px),repeating-linear-gradient(123deg,#1d100b18 0 1px,transparent 1px 5px),linear-gradient(95deg,#38241c,#755138 9%,#4b3024 47%,#352018 50%,#684630 56%,#523323 92%,#2e1b15);box-shadow:0 2px 0 #a58056,0 6px 0 #3c281e,0 10px 0 #795334,0 16px 13px #22160d55,0 30px 45px #39261555,inset 0 0 0 4px #946f46,inset 0 0 0 6px #38231b,inset 0 0 15px #160d09}
.book::before{border-style:solid;border-color:#bf95533d;box-shadow:inset 0 0 0 2px #2718106b,inset 0 0 0 3px #c69b5550;border-radius:11px 13px 23px 20px}
.book::after{height:23px;bottom:10px;left:24px;right:24px;border-radius:0 0 45% 40% / 0 0 65% 70%;background:linear-gradient(90deg,#8a704b,#efe0b9 8%,#c4ad7c 44%,#6c5035 49%,#efe2be 54%,#d8c393 94%,#8b6b41),repeating-linear-gradient(0deg,#6a50364d 0 1px,transparent 1px 3px);background-blend-mode:multiply;box-shadow:0 3px 3px #21140c80}
.pages{border-radius:8px 10px 18px 16px;box-shadow:0 1px 0 #f4e9cd,0 3px 0 #b39a70,0 4px 0 #e6d7b4,0 6px 0 #b39b75,0 7px 0 #ebdfbf,0 10px 5px #20130b73}
.page-left{border-radius:8px 22px 28px 18px / 8px 10px 16px 14px}.page-right{border-radius:22px 10px 18px 28px / 10px 8px 14px 16px}
.spine{background:linear-gradient(90deg,transparent,#7252321c 13%,#2e1b0c55 42%,#fff3d176 51%,#70502f3a 65%,transparent);filter:drop-shadow(1px 0 2px #3d271c18)}
.book-corner{opacity:.88;filter:saturate(.65) drop-shadow(1px 2px 1px #3a2519)}
@media(max-width:680px) and (orientation:portrait){.page-left,.page-left:has(.search-panel:not([hidden])){--grid-reserve:52px;padding-top:19px}.page-left .work-list{margin-top:8px}.page-left .page-footer{margin-top:10px}.page-left #toggle-search{top:-17px;width:20px;height:20px;padding:4px}.spine{background:linear-gradient(180deg,transparent,#72523225 23%,#2e1b0c55 44%,#fff3d176 51%,#70502f3a 65%,transparent)}.selection-heading{gap:8px}.selection-heading time{font-size:8px;letter-spacing:0}}
@media(max-height:460px) and (orientation:landscape){.page-left,.page-left:has(.search-panel:not([hidden])){--grid-reserve:51px;padding-top:16px}.page-left .page-footer{margin-top:7px}.page-left .work-list{margin-top:6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}