/* Approved Image B geometry. The illustrations below are viewports into the
   unchanged approved PNGs, not substitute vector scenes. */
:root,:root[data-skin='coast']:not([data-theme='dark']) { --paper:#fcf8f2;--surface:#fcf8f2;--surface-soft:#f1eee7;--surface-raised:#fffcf6;--line:#e6e3db;--ink:#18374b;--muted:#67717a;--accent:#f77b67;--green:#245565;--pale:#eeeae1;--reference-image:url('skins/coast-9ff94b00.png');--art-size:361.411765% 598.830409%;--art-position:92.439244% 24.150059%;--art-ratio:.40235294;--display-font:var(--serif); }
:root[data-skin='forest'] { --reference-image:url('skins/forest-48e69640.png');--art-size:363.120567% 984.615385%;--art-position:91.194969% 84.130435%;--art-ratio:.24586288; }
:root[data-skin='pixel'] { --reference-image:url('skins/pixel-fd2d9f7c.png');--art-size:365.7143% 706.2069%;--art-position:10.6631% 18.6576%;--art-ratio:.3452381; }
.sr-only { position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; }
.scene-art { background-image:var(--reference-image);background-size:var(--art-size);background-position:var(--art-position);background-repeat:no-repeat;content:normal;image-rendering:auto; }
.storybook-scene[data-art='image'] .scene-night { filter:brightness(.68) saturate(.78); }
:root[data-skin='pixel'] .storybook-scene[data-art='image'] .scene-night { filter:none; }
.reference-masthead { position:relative;isolation:isolate;overflow:hidden;height:230px;margin:-28px -46px 30px;background:var(--surface); }
.reference-masthead .storybook-scene { z-index:-1; }
.reference-masthead:after { content:'';position:absolute;inset:60% 0 0;z-index:-1;background:linear-gradient(transparent,var(--surface)); }
.reference-masthead .scene-cabin,.reference-masthead .scene-cloud,.reference-masthead .scene-water,.reference-masthead .scene-stars,.reference-masthead .scene-spark { display:none; }
.masthead-brand { position:absolute;left:46px;top:28px;font-family:var(--serif);font-size:36px;line-height:1.3;letter-spacing:4px;color:var(--ink);font-weight:600; }
.reference-masthead .search-box { position:absolute;left:46px;bottom:45px;width:min(520px,calc(100% - 92px));height:46px;display:flex;align-items:center;padding:0 13px;background:color-mix(in srgb,var(--surface) 94%,transparent);border:0;border-radius:30px;box-shadow:0 4px 16px #2945520a; }
.reference-masthead .search-box>span { font-size:27px;line-height:1;color:var(--muted); }
/* Keep the field >=16px so iOS focus does not zoom/crop the whole shelf.
   The surrounding pill owns the only frame, including keyboard focus. */
.reference-masthead .search-box input { appearance:none;-webkit-appearance:none;min-width:0;flex:1;width:0;margin:0;padding:8px 10px;border:0;border-radius:0;outline:none;background:transparent;box-shadow:none;font:400 16px/20px var(--sans); }
.reference-masthead .search-box input::-webkit-search-decoration { -webkit-appearance:none; }
.reference-masthead .search-box:focus-within { outline:2px solid var(--accent);outline-offset:3px; }
.reference-masthead .search-box button { font-size:11px;min-height:40px; }
.reference-shelf-heading { display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px; }
.reference-shelf-heading h1 { font-family:var(--serif);font-size:28px;line-height:1.4; }
.category-menu { position:relative;z-index:15; }
.category-menu>summary { display:none; }
.shelf-tabs { margin-bottom:26px; }
.shelf-item .card-category,.shelf-item .card-meta { display:none; }
.shelf-item .card-title { margin-top:11px; }
.shelf-item .card-title h3 { font-family:var(--serif);font-size:16px;font-weight:500; }
.shelf-item .tile-play { top:calc(150cqw - 54px); }
.mobile-dock { display:none; }
.player[data-active='false']:not([data-expanded='true']) { display:none; }
#player-mini-book { display:none; }
#mini-queue { display:none; }
.player-heading { position:relative; }
#player-favorite { position:absolute;right:-8px;top:0;width:44px;height:44px;font:32px/1 system-ui;color:var(--muted); }
#player-favorite[aria-pressed='true'] { color:var(--accent); }
.player[data-expanded='true'] #player-chapter { padding-right:36px;font-family:var(--serif); }
.player[data-expanded='true'] .player-heading { text-align:left; }
.rate-picker,.sleep-picker,.more-picker { position:relative; }
.rate-picker>summary,.sleep-picker>summary,.more-picker>summary,.queue-card { list-style:none;cursor:pointer;text-align:center;border-radius:13px;background:var(--surface-soft);padding:12px;min-height:72px; }
.rate-picker summary::-webkit-details-marker,.sleep-picker summary::-webkit-details-marker,.more-picker summary::-webkit-details-marker { display:none; }
.rate-picker>summary strong,.sleep-picker>summary strong,.more-picker>summary strong,.queue-card strong { display:block;font:20px/1.4 system-ui;font-weight:500; }
.rate-picker>summary span,.sleep-picker>summary span,.more-picker>summary span,.queue-card span { display:block;font-size:11px;margin-top:5px; }
.control-popover,.player[data-expanded='true'] #rate { position:absolute;bottom:calc(100% + 10px);right:0;min-width:155px;z-index:10;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 6px 28px #152e3c24; }
.control-popover button,.control-popover a { display:block;min-height:44px;text-align:left;width:100%;padding:10px;white-space:nowrap;font-size:12px; }
.player:not([data-expanded='true']) .rate-picker>summary,.player:not([data-expanded='true']) .more-picker>summary,.player:not([data-expanded='true']) .sleep-picker,.player:not([data-expanded='true']) .queue-card { display:none; }
.player:not([data-expanded='true']) .more-picker .control-popover { position:static;padding:0;border:0;box-shadow:none;background:none;min-width:0; }
.player:not([data-expanded='true']) .more-picker a { display:none; }
.player:not([data-expanded='true']) .more-picker #restart { padding:7px 9px;min-height:34px;font-size:10px; }
.player[data-expanded='true'] .controls { grid-template-columns:repeat(20,minmax(0,1fr));gap:22px 8px; }
.player[data-expanded='true'] #previous { grid-column:1/5; }.player[data-expanded='true'] #rewind { grid-column:5/9; }.player[data-expanded='true'] #play { grid-column:9/13; }.player[data-expanded='true'] #forward { grid-column:13/17; }.player[data-expanded='true'] #next { grid-column:17/21; }
.player[data-expanded='true'] .rate-picker { grid-row:2;grid-column:1/6; }.player[data-expanded='true'] .queue-card { grid-row:2;grid-column:6/11; }.player[data-expanded='true'] .sleep-picker { grid-row:2;grid-column:11/16; }.player[data-expanded='true'] .more-picker { grid-row:2;grid-column:16/21; }
.player[data-expanded='true'] .controls .queue-card { background:var(--surface-soft);min-height:72px;padding:12px; }
.player[data-expanded='true'] #rate { display:flex;flex-direction:column;gap:3px;width:140px;min-width:140px;margin:0; }
.player[data-expanded='true'] #rate button { width:100%;min-height:40px;font-size:13px; }
.player[data-expanded='true'] .player-bottom { border-top:0;padding-top:0; }
.reader-scenery { mask-image:linear-gradient(#000 0%,#000 77%,transparent 100%);height:170px;background-image:var(--reference-image);background-size:var(--art-size);background-position:var(--art-position); }
#reading:before { display:none; }
#reading { padding:0;box-shadow:none;background:var(--surface);overflow:visible; }
.reader-toolbar { padding:14px 24px;border:0;gap:10px; }
#close-reader { font-size:28px;width:35px;padding:0; }
.reader-label { font-size:14px;margin:auto;white-space:nowrap; }
.reader-type-tools { margin:0;gap:3px; }
.reader-type-tools button { background:none;min-width:32px;font-family:var(--serif);font-size:15px;padding:4px; }
.reader-type-tools #reader-larger { font-size:21px; }
.reader-type-tools #reader-theme { color:var(--accent);font-family:system-ui;font-size:20px; }
#reader-content { padding:26px 32px; }
#reader-content .prose { margin:0;max-width:none;line-height:2; }
#reader-content .prose h1 { margin-top:0;font-family:var(--serif);font-size:1.55em;line-height:1.6; }
.reader-download { display:block;margin:0 32px;padding:20px 0 34px;font-size:12px;color:var(--green); }
@media(max-width:800px) { .reference-masthead { margin:-22px -24px 26px; }.masthead-brand { left:26px; }.reference-masthead .search-box { left:24px;width:calc(100% - 48px); } }
@media(max-width:560px) {
 body { background:var(--surface); }.sidebar { display:none; }.main-wrap { margin:0; }.main-content { padding:0 18px 20px; }
 .topbar { height:0;min-height:0;padding:0;border:0; }.topbar>span,#theme-toggle,#appearance-settings>summary { display:none; }
 .appearance-panel { position:fixed;top:auto;bottom:calc(80px + env(safe-area-inset-bottom));right:12px;max-height:calc(100dvh - 105px);width:calc(100vw - 24px);max-width:400px; }
 .reference-masthead { height:156px;margin:0 -18px 16px; }.masthead-brand { left:25px;top:27px;font-size:32px;line-height:1.3; }
 .reference-masthead .search-box { left:20px;bottom:12px;width:calc(100% - 40px);height:42px;padding:0 11px; }.reference-masthead .search-box button { font-size:10px; }
 .reference-shelf-heading { margin:0 0 16px;gap:12px; }.reference-shelf-heading h1 { font-size:25px;line-height:1.35; }
 .category-menu>summary { display:block;font-size:11px;padding:8px 2px;cursor:pointer;list-style:none;color:var(--muted); }
 .category-menu[open] .filter-tabs { position:absolute;right:0;top:100%;display:flex;flex-direction:column;gap:5px;min-width:145px;padding:9px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--room-shadow); }
 .category-menu .filter-tabs a { min-height:40px;display:flex;align-items:center;font-size:12px; }
 .shelf-tabs { margin:0 0 20px;padding:0;border-radius:10px;gap:0;overflow:hidden; }.shelf-tabs a { min-height:38px;padding:7px 6px;font-size:12px;font-weight:400;gap:7px;border-radius:9px; }.shelf-tabs a span { font-size:9px;min-width:0; }.shelf-tabs a[aria-current='page'] { background:var(--accent); }
 .book-grid { gap:22px 13px; }.shelf-item .book-cover { border-radius:7px;box-shadow:none; }.shelf-item .card-title { margin-top:9px; }.shelf-item .card-title h3 { font-size:13px;line-height:1.5; }.shelf-item .tile-play { top:calc(150cqw - 45px);right:7px;width:36px;height:36px;min-height:36px;background:var(--surface);color:var(--green);font-size:15px;box-shadow:none; }
 .mobile-dock { position:fixed;left:0;right:0;bottom:0;z-index:46;display:flex;justify-content:space-around;align-items:center;min-height:66px;padding:6px 8px max(7px,env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line); }
 .mobile-dock>a,.mobile-dock>button { flex:1;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:48px;gap:3px;font-size:10px;line-height:1.3;color:var(--muted); }
 .mobile-dock span { font-size:25px;line-height:1.1; }.mobile-dock #dock-library { color:var(--accent); }
 .player:not([data-expanded='true']) { left:0;right:0;bottom:calc(65px + env(safe-area-inset-bottom));padding:11px 18px;border-radius:0;border:0;border-top:1px solid var(--line);display:grid;grid-template-columns:40px minmax(0,1fr) 42px 28px;gap:9px;background:var(--surface);box-shadow:none; }
 .player[data-active='false']:not([data-expanded='true']) { display:none; }
 .player:not([data-expanded='true']) .player-art img { width:38px;height:50px;border-radius:5px; }.player:not([data-expanded='true']) .now { grid-column:2; }.player:not([data-expanded='true']) #expand-player,.player:not([data-expanded='true']) #status,.player:not([data-expanded='true']) .timeline { display:none; }
 .player:not([data-expanded='true']) .now strong { font:13px/1.5 var(--serif);font-weight:600; }.player:not([data-expanded='true']) #player-mini-book { display:block;font-size:10px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
 .player:not([data-expanded='true']) .controls { grid-column:3; }.player:not([data-expanded='true']) #next,.player:not([data-expanded='true']) .rate-picker,.player:not([data-expanded='true']) .more-picker,.player:not([data-expanded='true']) .queue-card,.player:not([data-expanded='true']) .sleep-picker { display:none; }
 .player:not([data-expanded='true']) #mini-queue { display:block;grid-column:4;grid-row:1;font-size:24px;min-height:44px;padding:0; }
 .player[data-expanded='true'] { padding:15px 27px 28px;gap:17px;background:linear-gradient(#80cde2 0%,#d7eff2 25%,var(--surface) 68%); }
 :root[data-theme='dark'] .player[data-expanded='true'] { background:linear-gradient(var(--surface-soft),var(--surface) 75%); }
 .player[data-expanded='true'] .player-top { font-size:13px;margin:0 -7px; }.player[data-expanded='true'] .player-top>button { font-size:17px; }.player[data-expanded='true'] .player-art img { width:min(75vw,292px);height:min(45dvh,368px);aspect-ratio:4/5;object-fit:cover;object-position:center top;border-radius:9px;box-shadow:none; }
 .player[data-expanded='true'] .player-heading { gap:6px; }.player[data-expanded='true'] #player-chapter { font-size:23px;line-height:1.5; }.player[data-expanded='true'] #player-book { font-size:13px; }.player[data-expanded='true'] .now { margin-top:-7px;min-height:14px; }.player[data-expanded='true'] #status { font-size:9px; }
 .player[data-expanded='true'] .timeline { flex-wrap:wrap;justify-content:space-between;gap:0 8px;position:relative;padding-top:23px; }.player[data-expanded='true'] #seek { position:absolute;top:0;left:0;width:100%;height:20px;margin:0; }.player[data-expanded='true'] .timeline output { font-size:11px; }
 .player[data-expanded='true'] .controls { gap:23px 8px; }.player[data-expanded='true'] #play { width:76px;height:76px; }.player[data-expanded='true'] .controls>button { font-size:11px; }.player[data-expanded='true'] .rate-picker>summary,.player[data-expanded='true'] .sleep-picker>summary,.player[data-expanded='true'] .more-picker>summary,.player[data-expanded='true'] .controls .queue-card { min-height:76px;padding:10px 3px; }.player[data-expanded='true'] .controls>button.queue-card span,.player[data-expanded='true'] summary span { font-size:10px; }
 .player[data-expanded='true'] .player-bottom { margin-top:-8px; }.player[data-expanded='true'] .player-bottom>span { display:none; }
 body[data-reading-open='true'] .main-content { padding:0 0 20px; }#reading { border-radius:0; }.reader-toolbar { padding:10px 22px;height:68px;position:sticky;top:0;gap:5px; }.reader-type-tools button { min-width:29px; }#reader-content { padding:28px 28px 8px; }.reader-scenery { height:155px; }.reader-download { margin:0 28px; }.reader-label { font-size:13px; }
 .home-hero { margin-top:20px; }.site-footer { padding-bottom:180px; }
}

.controls button svg { display:block;margin:auto; }
.player[data-expanded='true'] .player-art img { object-fit:contain;object-position:center;background:transparent; }
@media(max-width:560px) { .mobile-dock svg{display:block;width:23px;height:23px;margin-bottom:3px;} .shelf-tabs a span{display:none;} .player[data-expanded="true"]{isolation:isolate;background:var(--surface);} .player[data-expanded="true"]:before{content:"";position:absolute;inset:0 0 auto;top:calc(60px + min(68vw,292px)*.6);height:calc(100vw * var(--art-ratio));z-index:-1;background-image:var(--reference-image);background-size:var(--art-size);background-position:var(--art-position);mask-image:linear-gradient(transparent,#000 18%,#000 65%,transparent);opacity:1;pointer-events:none;} }

#seek{appearance:none;-webkit-appearance:none;border:0;border-radius:0;background:linear-gradient(to right,var(--accent) var(--played,0%),#d4d4ce var(--played,0%)) center/100% 4px no-repeat;}
#seek::-webkit-slider-runnable-track{height:4px;background:transparent;border:0;}
#seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;background:var(--accent);border:0;border-radius:50%;margin-top:-5px;}
#seek::-moz-range-track{height:4px;background:transparent;border:0;}
#seek::-moz-range-progress{height:4px;background:transparent;}
#seek::-moz-range-thumb{width:14px;height:14px;background:var(--accent);border:0;border-radius:50%;}
#play:before{content:"";display:block;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:16px solid currentColor;margin:0 auto;translate:2px 0;}
.player[data-playing="true"] #play:before{content:"";width:17px;height:22px;border:0;border-left:6px solid currentColor;border-right:6px solid currentColor;translate:0;}
@media(max-width:560px){.player[data-expanded="true"] .player-art{margin-top:17px;}.player[data-expanded="true"] .player-art img{width:min(68vw,292px);height:calc(min(68vw,292px)*1.26);}.player[data-expanded="true"] .player-heading{margin-top:11px;}.player[data-expanded="true"] .now{display:none;}.player[data-expanded="true"] .now:has(#retry-load:not([hidden])){display:block;}}

.skin-swatch.coast{background-image:url("skins/coast-9ff94b00.png");background-size:356.3805% 602.3529%;background-position:92.6697% 24.1218%;}.skin-swatch.forest{background-image:url("skins/forest-48e69640.png");background-size:384% 1264.1975%;background-position:10.2113% 20.5726%;}.skin-swatch.pixel{background-image:url("skins/pixel-fd2d9f7c.png");background-size:365.7143% 706.2069%;background-position:10.6631% 18.6576%;}
:root[data-theme="dark"] .player[data-expanded="true"]:before{filter:brightness(.3);}:root[data-skin="pixel"] .player[data-expanded="true"]:before{filter:none;}


@media(max-width:560px){:root[data-skin="coast"] .reference-masthead .search-box{top:82px;bottom:auto;left:14px;width:calc(100% - 28px);background:var(--surface);}.reference-masthead .search-box button{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;}.reference-masthead .search-box>span{display:flex;align-items:center;}.reference-masthead .search-box>span svg{width:20px;height:20px;}}

.reader-type-tools #reader-light,.reader-type-tools #reader-dark{font-family:system-ui;font-size:20px;min-width:29px;color:var(--muted);}.reader-type-tools #reader-light[aria-pressed="true"],.reader-type-tools #reader-dark[aria-pressed="true"]{color:var(--accent);}

.reader-toolbar .reader-label{position:absolute;left:50%;translate:-50% 0;margin:0;}.reader-toolbar .reader-type-tools{margin-left:auto;}
@media(max-width:560px){.shelf-item .card-title h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-size:14px;line-height:1.45;min-height:2.9em;}}

/* Image B content coordinates: strip only the illustrated phone/status frame,
   then scale its 427px content width to the actual viewport. */
@media(max-width:560px){
 .reference-masthead{height:122px;}

 :root[data-skin="coast"] .reference-masthead .search-box{top:66px;left:18px;width:69.3%;height:39px;}
 .player[data-expanded="true"]{padding-top:6px;gap:8px;}
 .player[data-expanded="true"] .player-art{margin-top:0;}
 .player[data-expanded="true"] .player-top>button{font-size:0;}
 .player[data-expanded="true"] #previous:after{content:'上一章';}
 .player[data-expanded="true"] #rewind:after,.player[data-expanded="true"] #forward:after{content:'15 秒';}
 .player[data-expanded="true"] #next:after{content:'下一章';}
 .player[data-expanded="true"] .controls>button:after{display:block;margin-top:6px;font:11px/1.4 var(--sans);color:var(--muted);}

}

@media(max-width:560px){
 .reader-toolbar{height:56px;margin-bottom:0;padding:6px 22px;}
 :root[data-skin="coast"][data-theme="light"] .player[data-expanded="true"]{background:linear-gradient(#79c8e0,var(--surface) 62%);}

/* Only illustration-only source rectangles are sampled. No mock book, phone
   frame, search field or player controls are used as a page background. */
.reference-masthead{container-type:inline-size;}
.reference-masthead .storybook-scene{background:transparent;}
.reference-masthead .scene-art{inset:0 0 auto;height:calc(100cqw * var(--art-ratio));}
.reference-masthead:after{inset:35% 0 0;}
.reference-masthead .search-box{max-width:none;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--line) 65%,transparent);}
.reference-masthead .search-box input{min-width:0;flex:1;width:0;line-height:20px;}
.reference-masthead .search-box>span{flex:0 0 20px;}
@media(max-width:560px){
 .reference-masthead .search-box,:root[data-skin="coast"] .reference-masthead .search-box{top:66px;bottom:auto;left:18px;width:69.3%;height:39px;background:var(--surface);}
 .masthead-brand{left:25px;top:14px;font-size:32px;color:var(--ink);}
 .reference-masthead .search-box input{height:37px;padding:8px 9px;margin:0;}
 .reference-masthead .scene-art{mask-image:linear-gradient(#000 20%,#0009 55%,transparent 100%);}
 .player[data-expanded="true"]{background:linear-gradient(#c3e0d2,var(--surface) 54%);}
 :root[data-skin="coast"][data-theme="light"] .player[data-expanded="true"]{background:linear-gradient(#79c8e0 0%,#cbe6e9 36%,var(--surface) 57%);}
 :root[data-theme="dark"] .player[data-expanded="true"]{background:linear-gradient(var(--surface-soft),var(--surface) 57%);}
 .main-content,.player[data-expanded="true"]{touch-action:pan-y pinch-zoom;}
 input[type="range"]{touch-action:pan-x;}
}