:root{--ink:#142427;--cream:#f7f0e5;--teal:#0d656b;--teal-dark:#073f44;--wine:#7e3033;--gold:#c99b5d;--topbar-h:64px;--toolbar-h:64px}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}body{overflow:hidden;color:var(--cream);background:#092b2f;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.app-shell{width:100%;height:100%;display:grid;grid-template-rows:var(--topbar-h) minmax(0,1fr) var(--toolbar-h);background:radial-gradient(circle at 15% 12%,rgba(204,158,94,.19),transparent 28%),radial-gradient(circle at 88% 82%,rgba(126,48,51,.25),transparent 32%),linear-gradient(145deg,#12484d 0%,#071f22 100%)}.topbar{position:relative;z-index:40;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.09);background:rgba(5,27,30,.79);backdrop-filter:blur(18px)}.brand{min-width:0}.brand-title{overflow:hidden;font-family:Georgia,"Times New Roman",serif;font-size:1.08rem;letter-spacing:.17em;text-overflow:ellipsis;white-space:nowrap}.brand-subtitle{margin-top:3px;overflow:hidden;color:rgba(247,240,229,.68);font-size:.76rem;text-overflow:ellipsis;white-space:nowrap}.top-actions{display:flex;align-items:center;gap:8px}.icon-button,.text-button,.tool-button,.page-indicator,.zoom-actions button,.zoom-nav,.modal-close,.jump-row button{border:0;color:inherit;cursor:pointer}.icon-button{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.07);font-size:1.65rem}.icon-button:hover{background:rgba(255,255,255,.13)}.hamburger,.hamburger::before,.hamburger::after{width:20px;height:2px;display:block;border-radius:2px;background:currentColor}.hamburger{position:relative}.hamburger::before,.hamburger::after{content:"";position:absolute;left:0}.hamburger::before{top:-6px}.hamburger::after{top:6px}.text-button{height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 15px;border-radius:11px;background:rgba(255,255,255,.07);color:var(--cream);font-size:.85rem;text-decoration:none}.text-button:hover{background:rgba(255,255,255,.13)}.text-button.primary{background:var(--teal)}.text-button.primary:hover{background:#15767c}.viewer{position:relative;min-height:0;display:grid;grid-template-columns:72px minmax(0,1fr) 72px;overflow:hidden}.viewer::before{content:"";position:absolute;inset:0;opacity:.23;pointer-events:none;background-image:linear-gradient(30deg,rgba(255,255,255,.04) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.04) 87.5%),linear-gradient(150deg,rgba(255,255,255,.04) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.04) 87.5%);background-size:54px 94px}.ambient{position:absolute;border-radius:50%;pointer-events:none}.ambient-one{width:380px;height:380px;left:-130px;bottom:-205px;background:rgba(203,152,88,.09)}.ambient-two{width:320px;height:320px;right:-100px;top:-140px;background:rgba(255,255,255,.04)}.book-stage{position:relative;min-width:0;min-height:0;display:grid;place-items:center;padding:10px 14px 14px}.book-frame{position:relative;z-index:3;width:100%;height:100%;display:grid;place-items:center}.flipbook{width:100%;height:100%;filter:drop-shadow(0 23px 27px rgba(0,0,0,.34))}.flipbook canvas{border-radius:5px}.book-base-shadow{position:absolute;z-index:-1;left:12%;right:12%;bottom:0;height:28px;border-radius:50%;background:rgba(0,0,0,.38);filter:blur(17px)}.drag-hint{position:absolute;z-index:8;bottom:6px;left:50%;display:flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid rgba(255,255,255,.11);border-radius:999px;background:rgba(4,24,27,.66);color:rgba(247,240,229,.78);font-size:.75rem;transform:translateX(-50%);backdrop-filter:blur(10px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}.drag-hint span{font-size:1.05rem}.drag-hint.hidden{opacity:0;transform:translate(-50%,8px)}.edge-nav{position:relative;z-index:15;align-self:center;justify-self:center;width:48px;height:70px;border:1px solid rgba(255,255,255,.12);border-radius:15px;background:rgba(6,30,33,.58);color:var(--cream);font-size:2.5rem;line-height:1;backdrop-filter:blur(12px);transition:transform .2s ease,background .2s ease,opacity .2s ease}.edge-nav:hover:not(:disabled){transform:scale(1.06);background:rgba(13,101,107,.76)}.edge-nav:disabled{opacity:.22;cursor:default}.toolbar{position:relative;z-index:41;display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 18px max(6px,env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.09);background:rgba(5,28,31,.88);backdrop-filter:blur(18px)}.tool-button,.page-indicator{height:48px;border-radius:13px;background:transparent;color:rgba(247,240,229,.84)}.tool-button{min-width:70px;display:grid;place-items:center;gap:2px;padding:5px 10px}.tool-button>span{font-size:1.28rem;line-height:1}.tool-button small{font-size:.67rem}.tool-button:hover,.page-indicator:hover{background:rgba(255,255,255,.08);color:#fff}.tool-button.compact{min-width:46px;padding:0;font-size:2rem}.tool-button:disabled,.edge-nav:disabled{pointer-events:none}.page-indicator{min-width:116px;padding:0 15px;background:rgba(255,255,255,.08);font-size:.86rem;font-variant-numeric:tabular-nums}.drawer-backdrop{position:fixed;z-index:70;inset:0;opacity:0;pointer-events:none;background:rgba(0,0,0,.48);transition:opacity .25s ease}.drawer-backdrop.open{opacity:1;pointer-events:auto}.drawer{position:fixed;z-index:71;top:0;bottom:0;left:0;width:min(390px,92vw);display:grid;grid-template-rows:auto auto minmax(0,1fr);color:var(--ink);background:#f4efe6;box-shadow:18px 0 45px rgba(0,0,0,.32);transform:translateX(-105%);transition:transform .3s cubic-bezier(.25,.7,.2,1)}.drawer.open{transform:translateX(0)}.drawer-header{min-height:76px;display:flex;align-items:center;justify-content:space-between;padding:14px 16px 14px 22px;border-bottom:1px solid rgba(21,36,38,.12)}.drawer-header strong{display:block;font-family:Georgia,serif;font-size:1.16rem}.drawer-header span{display:block;margin-top:4px;color:rgba(21,36,38,.6);font-size:.78rem}.drawer-header .icon-button{color:var(--ink);background:rgba(21,36,38,.07)}.drawer-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 16px 0}.drawer-tab{height:42px;border:0;border-radius:11px;background:rgba(13,101,107,.08);color:var(--ink);cursor:pointer}.drawer-tab.active{background:var(--teal);color:#fff}.drawer-panel{display:none;overflow-y:auto;padding:14px 16px 24px}.drawer-panel.active{display:block}.toc-list{display:grid;gap:7px}.toc-item{width:100%;min-height:54px;display:grid;grid-template-columns:40px 1fr;align-items:center;gap:10px;padding:8px 12px;border:0;border-radius:12px;background:rgba(255,255,255,.62);color:var(--ink);text-align:left;cursor:pointer}.toc-item:hover{background:#fff;box-shadow:0 5px 18px rgba(19,44,45,.08)}.toc-page{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(13,101,107,.12);color:var(--teal-dark);font-weight:700}.toc-title{font-size:.9rem;font-weight:650}.thumbnail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.thumb-button{position:relative;overflow:hidden;padding:0;border:0;border-radius:9px;background:#ddd;box-shadow:0 5px 16px rgba(20,34,36,.13);cursor:pointer}.thumb-button img{display:block;width:100%;aspect-ratio:596/842;object-fit:cover}.thumb-button span{position:absolute;right:6px;bottom:6px;min-width:27px;height:27px;display:grid;place-items:center;padding:0 6px;border-radius:8px;background:rgba(5,28,31,.82);color:#fff;font-size:.72rem}.thumb-button.active{outline:3px solid var(--teal);outline-offset:2px}.modal,.zoom-modal{position:fixed;z-index:90;inset:0;opacity:0;pointer-events:none;transition:opacity .2s ease}.modal.open,.zoom-modal.open{opacity:1;pointer-events:auto}.modal{display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.58);backdrop-filter:blur(8px)}.modal-card{position:relative;width:min(460px,92vw);padding:28px;border-radius:18px;background:#f8f3eb;color:var(--ink);box-shadow:0 24px 80px rgba(0,0,0,.4)}.small-modal{width:min(390px,92vw)}.modal-card h2{margin:0 0 18px;font-family:Georgia,serif}.modal-close{position:absolute;top:10px;right:12px;width:36px;height:36px;border-radius:10px;background:rgba(21,36,38,.08);color:var(--ink);font-size:1.4rem}.modal-card label{display:block;margin-bottom:8px;color:rgba(21,36,38,.7);font-size:.82rem}.jump-row{display:grid;grid-template-columns:1fr 90px;gap:10px}.jump-row input{width:100%;height:46px;padding:0 14px;border:1px solid rgba(21,36,38,.2);border-radius:11px;background:#fff;color:var(--ink)}.jump-row button{border-radius:11px;background:var(--teal);color:#fff}.zoom-modal{background:rgba(4,17,19,.96);color:#fff}.zoom-topbar{position:absolute;z-index:4;top:0;left:0;right:0;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;background:rgba(4,17,19,.84);border-bottom:1px solid rgba(255,255,255,.08)}.zoom-actions{display:flex;align-items:center;gap:7px}.zoom-actions button{min-width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.09);color:#fff}#zoomPercent{min-width:57px;text-align:center;font-size:.82rem}.zoom-viewport{position:absolute;inset:64px 0 0;overflow:auto;padding:30px 78px 48px}.zoom-canvas{margin:auto;box-shadow:0 18px 55px rgba(0,0,0,.55)}.zoom-canvas img{display:block;width:100%;height:100%;object-fit:contain}.zoom-nav{position:absolute;z-index:5;top:50%;width:48px;height:72px;border-radius:14px;background:rgba(255,255,255,.09);color:#fff;font-size:2.25rem;transform:translateY(-50%)}.zoom-prev{left:14px}.zoom-next{right:14px}.zoom-nav:disabled{opacity:.2;cursor:default}.toast{position:fixed;z-index:120;bottom:calc(var(--toolbar-h) + 18px);left:50%;max-width:min(440px,88vw);padding:11px 16px;border-radius:12px;background:rgba(4,24,27,.92);color:#fff;font-size:.83rem;opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity .2s ease,transform .2s ease}.toast.show{opacity:1;transform:translate(-50%,0)}.stf__parent{margin:0 auto}.stf__parent canvas{image-rendering:auto}@media (max-width:760px){:root{--topbar-h:62px;--toolbar-h:66px}.topbar{padding:0 10px;gap:8px}.brand-title{font-size:.91rem;letter-spacing:.12em}.brand-subtitle{font-size:.65rem}.text-button{height:36px;padding:0 10px;font-size:.76rem}#shareButton{display:none}.viewer{grid-template-columns:42px minmax(0,1fr) 42px}.book-stage{padding:10px 2px 28px}.edge-nav{width:35px;height:58px;border-radius:12px;font-size:2rem}.toolbar{gap:2px;padding-inline:4px}.tool-button{min-width:55px;height:48px;padding:4px 5px}.tool-button.compact{min-width:36px}.tool-button small{font-size:.58rem}.page-indicator{min-width:76px;height:46px;padding:0 7px;font-size:.76rem}#soundButton{display:none}.drag-hint{bottom:3px;font-size:.65rem;white-space:nowrap}.zoom-topbar{padding-inline:10px}.zoom-viewport{padding:24px 45px 36px}.zoom-nav{width:34px;height:60px}.zoom-prev{left:5px}.zoom-next{right:5px}}@media (max-width:470px){.brand-subtitle{display:none}.toolbar #contentsButton small,.toolbar #zoomButton small,.toolbar #fullscreenButton small{display:none}.tool-button{min-width:43px}.drag-hint{max-width:75vw;overflow:hidden;text-overflow:ellipsis}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto !important}.drawer,.drawer-backdrop,.modal,.zoom-modal,.toast,.drag-hint{transition-duration:.01ms !important}}.book-frame{width:auto;height:auto;max-width:100%;max-height:100%;transition:none}.flipbook.stf__parent{width:100% !important;height:100% !important;min-width:0 !important;min-height:0 !important;max-width:none !important;margin:0 auto}.book-frame.cover-mode{filter:drop-shadow(0 22px 25px rgba(0,0,0,.38))}.book-frame.cover-mode .flipbook{filter:none}.book-frame.cover-mode .book-base-shadow{left:7%;right:7%;bottom:-4px;height:24px}.book-frame.cover-mode::after{content:"";position:absolute;z-index:-1;inset:3px -5px -3px 5px;border-radius:4px 7px 7px 4px;background:linear-gradient(90deg,rgba(241,233,219,.92),rgba(255,255,255,.78));box-shadow:7px 8px 15px rgba(0,0,0,.22);pointer-events:none}.stf__wrapper,.stf__canvas{border-radius:4px}@media (max-height:700px) and (min-width:761px){:root{--topbar-h:58px;--toolbar-h:62px}.book-stage{padding-top:8px;padding-bottom:12px}.toolbar{padding-top:5px;padding-bottom:5px}.tool-button,.page-indicator{height:46px}.drag-hint{display:none}}html,body{height:100%;height:100dvh;min-height:-webkit-fill-available;overscroll-behavior:none;-webkit-text-size-adjust:100%;touch-action:manipulation}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}.app-shell{height:100%;height:100dvh;grid-template-rows:calc(var(--topbar-h) + env(safe-area-inset-top)) minmax(0,1fr) calc(var(--toolbar-h) + env(safe-area-inset-bottom))}.topbar{padding-top:env(safe-area-inset-top);padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}.toolbar{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right));padding-bottom:max(6px,env(safe-area-inset-bottom))}.book-frame{position:relative;z-index:3;display:block;overflow:visible;width:auto;height:auto;max-width:100%;max-height:100%;transition:width .2s ease,height .2s ease}.engine-shell{position:absolute;top:0;width:1192px;height:842px;transform-origin:0 0;transition:left .2s ease,transform .2s ease}.flipbook{width:1192px!important;height:842px!important;background:transparent!important;filter:drop-shadow(0 23px 27px rgba(0,0,0,.34));touch-action:none}.flipbook-page{width:596px;height:842px;overflow:hidden;background:#fff;contain:layout paint}.flipbook-page img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}.book-frame.cover-mode .book-base-shadow{left:8%;right:8%}.book-frame:not(.cover-mode) .book-base-shadow{left:12%;right:12%}.stf__parent,.stf__block{background:transparent!important}.stf__item{background:transparent}.stf__parent{margin:0 auto}.stf__parent canvas{image-rendering:auto;-webkit-touch-callout:none}button,a{touch-action:manipulation}body.compact-view .topbar{display:none}body.compact-view .app-shell{grid-template-rows:0 minmax(0,1fr) calc(var(--toolbar-h) + env(safe-area-inset-bottom))}.mobile-mode .engine-shell,.mobile-mode .flipbook{width:596px!important}.mobile-mode .book-stage{padding-inline:4px}.mobile-mode .book-base-shadow{left:7%!important;right:7%!important}.mobile-mode .viewer{grid-template-columns:42px minmax(0,1fr) 42px}@media(max-width:900px),(pointer:coarse){:root{--topbar-h:58px;--toolbar-h:64px}.topbar{padding-left:max(9px,env(safe-area-inset-left));padding-right:max(9px,env(safe-area-inset-right));gap:8px}.brand-title{font-size:.9rem;letter-spacing:.11em}.brand-subtitle{font-size:.63rem}.text-button{height:36px;padding:0 11px;font-size:.75rem}.book-stage{padding:8px 2px 22px}.edge-nav{width:36px;height:58px;border-radius:12px;font-size:2rem}.toolbar{gap:1px;padding-top:5px;padding-left:max(3px,env(safe-area-inset-left));padding-right:max(3px,env(safe-area-inset-right))}.tool-button{min-width:52px;height:48px;padding:4px}.tool-button.compact{min-width:34px}.tool-button small{font-size:.57rem}.page-indicator{min-width:78px;height:46px;padding:0 7px;font-size:.75rem}#soundButton{display:none}.drag-hint{bottom:2px;font-size:.63rem;white-space:nowrap}.drawer{width:min(390px,94vw)}.zoom-topbar{padding:calc(8px + env(safe-area-inset-top)) 8px 8px;min-height:calc(58px + env(safe-area-inset-top))}.zoom-viewport{inset:calc(58px + env(safe-area-inset-top)) 0 0;padding:20px 42px calc(30px + env(safe-area-inset-bottom))}.zoom-nav{width:34px;height:60px}.zoom-prev{left:4px}.zoom-next{right:4px}}@media(max-width:480px){.brand-subtitle{display:none}.toolbar #contentsButton small,.toolbar #zoomButton small,.toolbar #fullscreenButton small{display:none}.tool-button{min-width:43px}.top-actions{gap:3px}.drag-hint{max-width:70vw;overflow:hidden;text-overflow:ellipsis}.icon-button{width:40px;height:40px}}@media(max-height:520px) and (orientation:landscape){:root{--topbar-h:44px;--toolbar-h:52px}.brand-subtitle{display:none}.topbar{padding-top:env(safe-area-inset-top)}.icon-button{width:36px;height:36px}.text-button{height:32px}.toolbar{padding-top:2px}.tool-button,.page-indicator{height:42px}.tool-button small{display:none}.drag-hint{display:none}}@media(display-mode:standalone){.topbar{background:rgba(5,27,30,.94)}}
.page-audio-layer{position:absolute;z-index:28;inset:0;overflow:visible;pointer-events:none}.page-audio-card{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;display:grid;gap:5px;padding:5px;border:1px solid rgba(255,255,255,.3);border-radius:15px;background:rgba(4,42,46,.88);box-shadow:0 8px 25px rgba(0,0,0,.34);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);color:#fff;touch-action:manipulation}.page-audio-main{width:100%;min-height:38px;display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 11px;border:0;border-radius:11px;background:linear-gradient(135deg,#0c7a80,#07555b);color:#fff;font-weight:750;font-size:.78rem;letter-spacing:.01em;white-space:nowrap;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.18)}.page-audio-main:focus-visible{outline:3px solid rgba(255,255,255,.9);outline-offset:2px}.page-audio-icon{width:20px;height:20px;display:grid;place-items:center;font-size:.68rem}.page-audio-card.playing .page-audio-main{background:linear-gradient(135deg,#a94831,#7f2e22)}.page-audio-detail{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px;padding:0 5px 3px}.page-audio-detail[hidden]{display:none}.page-audio-detail input{width:100%;height:16px;margin:0;accent-color:#f2c58e;cursor:pointer}.page-audio-time{font-variant-numeric:tabular-nums;font-size:.62rem;color:rgba(255,255,255,.88);white-space:nowrap}@media(max-width:900px),(pointer:coarse){.page-audio-card{padding:4px;border-radius:13px}.page-audio-main{min-height:36px;padding:5px 9px;font-size:.73rem}.page-audio-time{font-size:.58rem}}@media(max-width:420px){.page-audio-main{font-size:.69rem;gap:6px}.page-audio-card{max-width:calc(100vw - 104px)}}@media(max-height:540px) and (orientation:landscape){.page-audio-card{transform:translate(-50%,-96%)}.page-audio-main{min-height:31px;font-size:.66rem}.page-audio-detail{display:none!important}}

/* ===== Soft pastel refresh + smaller audio controls ===== */
:root{--ink:#4d4a57;--cream:#fcf8f4;--teal:#74a8a4;--teal-dark:#5d8f8a;--wine:#bf97a8;--gold:#d8c1a3}
body{color:var(--ink);background:#f3ede7;font-family:"Avenir Next","Segoe UI",Roboto,Arial,sans-serif}
.app-shell{background:radial-gradient(circle at 15% 12%,rgba(223,190,172,.30),transparent 30%),radial-gradient(circle at 88% 80%,rgba(178,205,201,.28),transparent 32%),linear-gradient(145deg,#d9ebe7 0%,#bfd7d1 36%,#f1e7df 100%)}
.topbar,.toolbar{color:#4d4a57;background:rgba(252,248,244,.88);border-color:rgba(125,118,132,.14);backdrop-filter:blur(18px)}
.topbar{box-shadow:0 6px 18px rgba(83,77,91,.08)}
.brand-title{font-family:Georgia,"Times New Roman",serif;letter-spacing:.12em;color:#6f5660}
.brand-subtitle{color:rgba(87,82,94,.72)}
.icon-button,.text-button,.tool-button,.page-indicator{background:rgba(255,255,255,.6);color:#5a5564;box-shadow:0 2px 8px rgba(82,74,88,.08)}
.icon-button:hover,.text-button:hover,.tool-button:hover{background:rgba(255,255,255,.82)}
.text-button.primary{background:#9bc8c2;color:#284443}
.viewer::before{opacity:.12}
.ambient-one{background:rgba(235,198,185,.28)}
.ambient-two{background:rgba(184,214,210,.30)}
.edge-nav{background:rgba(255,255,255,.52);color:#5d5a65;border:1px solid rgba(110,106,118,.16);box-shadow:0 10px 22px rgba(76,70,84,.10)}
.edge-nav:hover:not(:disabled){background:rgba(152,206,200,.70)}
.drawer,.modal-card{background:#fcf8f4;color:#4d4a57}
.drawer-tab.active{background:#f7efea;color:#6f5660}
.page-audio-layer{z-index:30}
.book-stage{padding-bottom:88px!important}
.page-audio-card{transform:translate(-50%,0)!important;gap:4px;padding:4px 5px;min-width:0;border:1px solid rgba(106,120,123,.18);border-radius:14px;background:rgba(252,248,244,.94);box-shadow:0 10px 22px rgba(85,76,88,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#4e4a55}
.page-audio-main{min-height:34px;padding:5px 10px;gap:7px;border-radius:11px;background:linear-gradient(135deg,#8ec3be,#6ca6a1);color:#fff;font-family:"Avenir Next","Segoe UI",sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.01em;box-shadow:inset 0 1px rgba(255,255,255,.28)}
.page-audio-card.playing .page-audio-main{background:linear-gradient(135deg,#c39fad,#b38898)}
.page-audio-icon{width:16px;height:16px;font-size:.62rem}
.page-audio-detail{gap:6px;padding:0 4px 2px}
.page-audio-detail input{height:14px;accent-color:#9abfb8}
.page-audio-time{font-size:.57rem;color:#6a6573}
@media(max-width:900px),(pointer:coarse){
  .book-stage{padding-bottom:96px!important}
  .page-audio-card{padding:4px;border-radius:13px;max-width:min(170px,calc(100vw - 128px))}
  .page-audio-main{min-height:32px;padding:5px 10px;font-size:.68rem}
  .page-audio-time{font-size:.54rem}
}
@media(max-width:460px){
  .page-audio-card{max-width:min(156px,calc(100vw - 140px))}
  .page-audio-main{gap:6px;font-size:.66rem}
}

/* ===== Circular audio buttons outside page edges ===== */
.page-audio-layer{overflow:visible!important;pointer-events:none}
.page-audio-card{transform:translate(-50%,-50%)!important;width:46px!important;min-width:46px!important;height:46px;padding:0!important;display:block;border-radius:50%!important;background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.page-audio-main{width:46px!important;height:46px!important;min-height:46px!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:linear-gradient(135deg,#8ec3be,#6ca6a1)!important;box-shadow:0 8px 18px rgba(74,91,96,.24),inset 0 1px rgba(255,255,255,.35)!important;border:2px solid rgba(255,255,255,.74)!important}
.page-audio-card.playing .page-audio-main{background:linear-gradient(135deg,#c39fad,#b38898)!important}
.page-audio-label{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
.page-audio-icon{width:auto!important;height:auto!important;font-size:.92rem!important;color:#fff!important;line-height:1!important}
.page-audio-detail{position:absolute;top:52px;left:50%;transform:translateX(-50%);width:132px;padding:6px 8px!important;border:1px solid rgba(106,120,123,.18);border-radius:12px;background:rgba(252,248,244,.96);box-shadow:0 8px 18px rgba(85,76,88,.14);grid-template-columns:minmax(0,1fr) auto!important;z-index:3}
.page-audio-detail input{height:12px!important}.page-audio-time{font-size:.52rem!important;color:#6a6573!important}
.page-audio-main::after{content:"Dinle";position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);padding:3px 7px;border-radius:999px;background:rgba(252,248,244,.94);color:#625d6a;font-size:.56rem;font-weight:700;white-space:nowrap;opacity:.92;box-shadow:0 4px 10px rgba(85,76,88,.10)}
.page-audio-card.playing .page-audio-main::after{content:"Duraklat"}
@media(max-width:900px),(pointer:coarse){
  .page-audio-card,.page-audio-main{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important}
  .page-audio-icon{font-size:.88rem!important}
  .page-audio-detail{top:50px;width:118px}
  .page-audio-main::after{bottom:-22px;font-size:.54rem}
}
@media(max-width:420px){
  .page-audio-card,.page-audio-main{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important}
  .page-audio-detail{width:110px}
}

/* ===== Always-visible audio discovery label ===== */
.page-audio-main{overflow:visible!important;isolation:isolate}
.page-audio-main::before{content:"";position:absolute;inset:-5px;border:1.5px solid rgba(108,166,161,.46);border-radius:50%;z-index:-1;animation:audioPulse 2.25s ease-out infinite;pointer-events:none}
.page-audio-main::after{content:"Sesli sayfa · Dinle"!important;position:absolute!important;bottom:-31px!important;width:max-content!important;max-width:112px;padding:4px 8px!important;border:1px solid rgba(116,168,164,.24)!important;border-radius:999px!important;background:rgba(252,248,244,.97)!important;color:#625d6a!important;font-family:"Avenir Next","Segoe UI",Roboto,Arial,sans-serif!important;font-size:.60rem!important;font-weight:750!important;line-height:1.15!important;letter-spacing:.01em!important;white-space:nowrap!important;opacity:1!important;box-shadow:0 5px 13px rgba(85,76,88,.14)!important;pointer-events:none!important}
.page-audio-card.audio-right .page-audio-main::after{left:auto!important;right:-2px!important;transform:none!important}
.page-audio-card.audio-left .page-audio-main::after{left:-2px!important;right:auto!important;transform:none!important}
.page-audio-card.playing .page-audio-main::after{content:"Ses çalıyor · Duraklat"!important;background:rgba(251,241,245,.98)!important;border-color:rgba(179,136,152,.30)!important}
.page-audio-card.active:not(.playing) .page-audio-main::after{content:"Sesi sürdür"!important}
.page-audio-card.playing .page-audio-main::before{animation:none;border-color:rgba(179,136,152,.55)}
@keyframes audioPulse{0%{transform:scale(.94);opacity:.85}70%,100%{transform:scale(1.30);opacity:0}}
@media(prefers-reduced-motion:reduce){.page-audio-main::before{animation:none}}
@media(max-width:420px){.page-audio-main::after{bottom:-29px!important;max-width:106px;font-size:.57rem!important;padding:4px 7px!important}}

/* ===== Watercolor floral background ===== */
:root{--paper:#fbf8f5;--plum:#745865;--dusty-blue:#71869a;--sage:#8aa090}
body{background:#eee9e8}
.app-shell{
  background-image:
    linear-gradient(135deg,rgba(252,249,247,.24),rgba(229,235,242,.24)),
    url("assets/floral-watercolor-bg.webp")!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
}
.viewer::before{display:none!important}
.ambient{display:none!important}
.topbar,.toolbar{
  background:rgba(250,247,245,.88)!important;
  color:#5e5360!important;
  border-color:rgba(116,88,101,.14)!important;
  box-shadow:0 4px 18px rgba(95,77,89,.10)!important;
}
.brand-title{color:#6b4f5d!important}
.brand-subtitle{color:rgba(86,74,86,.72)!important}
.icon-button,.text-button,.tool-button,.page-indicator{
  color:#5d5360!important;
  background:rgba(255,255,255,.58)!important;
  border-color:rgba(116,88,101,.12)!important;
}
.icon-button:hover,.text-button:hover,.tool-button:hover,.page-indicator:hover{background:rgba(255,255,255,.86)!important}
.edge-nav{
  color:#5f5564!important;
  background:rgba(252,249,247,.70)!important;
  border-color:rgba(116,88,101,.16)!important;
  box-shadow:0 8px 22px rgba(94,75,88,.14)!important;
}
.edge-nav:hover:not(:disabled){background:rgba(220,203,214,.86)!important}
.book-frame{filter:drop-shadow(0 18px 30px rgba(79,66,76,.22))}
.book-base-shadow{background:rgba(91,74,85,.24)!important}
.drag-hint{background:rgba(250,247,245,.86)!important;color:#645866!important;border-color:rgba(116,88,101,.15)!important}
.page-audio-main{background:linear-gradient(135deg,#91aaa3,#738f88)!important}
.page-audio-card.playing .page-audio-main{background:linear-gradient(135deg,#c7a2b3,#a77f92)!important}
.page-audio-main::before{border-color:rgba(145,170,163,.55)!important}
.page-audio-main::after{background:rgba(252,249,247,.97)!important;color:#665966!important;border-color:rgba(116,88,101,.18)!important}
@media(max-width:900px),(pointer:coarse){
  .app-shell{background-position:38% center!important;background-attachment:scroll!important}
}

/* ===== v10: speaker-only controls outside the page ===== */
.book-stage{overflow:visible!important}
.page-audio-layer{inset:0!important;overflow:visible!important;pointer-events:none!important}
.page-audio-card{
  width:48px!important;min-width:48px!important;height:48px!important;
  transform:translate(-50%,-50%)!important;
  padding:0!important;border:0!important;border-radius:50%!important;
  background:transparent!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  overflow:visible!important;pointer-events:auto!important;
}
.page-audio-main{
  position:relative!important;isolation:isolate!important;overflow:visible!important;
  width:48px!important;min-width:48px!important;height:48px!important;min-height:48px!important;
  display:grid!important;place-items:center!important;padding:0!important;border-radius:50%!important;
  border:2px solid rgba(255,255,255,.92)!important;
  background:linear-gradient(145deg,#8daaa3,#6f8f88)!important;
  color:#fff!important;
  box-shadow:0 9px 22px rgba(74,83,91,.25),inset 0 1px 1px rgba(255,255,255,.42)!important;
}
.page-audio-card.playing .page-audio-main{
  background:linear-gradient(145deg,#c49eaf,#a7788f)!important;
  box-shadow:0 10px 24px rgba(128,87,108,.28),inset 0 1px 1px rgba(255,255,255,.44)!important;
}
.page-audio-label{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.page-audio-icon{width:25px!important;height:25px!important;display:block!important;color:#fff!important;filter:drop-shadow(0 1px 1px rgba(54,64,67,.18))}
.page-audio-icon .speaker-wave{transform-origin:12px 12px}
.page-audio-card.playing .page-audio-icon .speaker-wave-one{animation:speakerWave 1.05s ease-in-out infinite}
.page-audio-card.playing .page-audio-icon .speaker-wave-two{animation:speakerWave 1.05s .18s ease-in-out infinite}
.page-audio-main::before,.page-audio-main::after{
  content:""!important;position:absolute!important;inset:-7px!important;z-index:-1!important;
  width:auto!important;max-width:none!important;height:auto!important;
  padding:0!important;border:2px solid rgba(111,157,149,.76)!important;border-radius:50%!important;
  background:transparent!important;color:transparent!important;box-shadow:0 0 0 1px rgba(255,255,255,.15)!important;
  left:auto!important;right:auto!important;bottom:auto!important;transform:none!important;
  opacity:0;pointer-events:none!important;animation:audioPulseStrong 1.85s ease-out infinite!important;
}
.page-audio-main::after{animation-delay:.62s!important}
.page-audio-card.playing .page-audio-main::before,.page-audio-card.playing .page-audio-main::after{border-color:rgba(183,125,153,.82)!important}
.page-audio-detail{
  position:absolute!important;top:57px!important;left:50%!important;transform:translateX(-50%)!important;
  width:126px!important;padding:6px 8px!important;border:1px solid rgba(116,88,101,.16)!important;
  border-radius:12px!important;background:rgba(252,249,247,.97)!important;
  box-shadow:0 9px 21px rgba(94,75,88,.15)!important;z-index:5!important;
  grid-template-columns:minmax(0,1fr) auto!important;
}
.page-audio-card.audio-left .page-audio-detail{left:0!important;transform:none!important}
.page-audio-card.audio-right .page-audio-detail{left:auto!important;right:0!important;transform:none!important}
.page-audio-detail input{height:12px!important;accent-color:#829f98!important}
.page-audio-time{font-size:.52rem!important;color:#675e69!important}
@keyframes audioPulseStrong{0%{transform:scale(.86);opacity:.96}72%,100%{transform:scale(1.48);opacity:0}}
@keyframes speakerWave{0%,100%{opacity:.45;transform:scale(.94)}50%{opacity:1;transform:scale(1.08)}}
@media(max-width:900px),(pointer:coarse){
  .page-audio-card,.page-audio-main{width:46px!important;min-width:46px!important;height:46px!important;min-height:46px!important}
  .page-audio-icon{width:23px!important;height:23px!important}
  .page-audio-detail{top:54px!important;width:116px!important}
}
@media(max-width:420px){
  .page-audio-card,.page-audio-main{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important}
  .page-audio-icon{width:22px!important;height:22px!important}
  .page-audio-detail{top:52px!important;width:110px!important}
}
@media(prefers-reduced-motion:reduce){.page-audio-main::before,.page-audio-main::after,.speaker-wave{animation:none!important;opacity:.65!important}}

/* ===== v11: fixed page-audio controls in the bottom toolbar ===== */
.page-audio-layer{display:none!important}
#soundButton{display:none!important}
.page-audio-dock{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-width:0;height:52px;padding:0 2px;flex:0 0 auto;
}
.page-audio-dock:empty{display:none}
.bar-audio-button{
  --audio-progress:0deg;
  position:relative;isolation:isolate;
  width:48px;height:48px;min-width:48px;padding:3px;
  display:grid;place-items:center;
  border:0;border-radius:50%;cursor:pointer;
  color:#fff;
  background:conic-gradient(#9b7d8d var(--audio-progress),rgba(123,154,149,.24) 0deg);
  box-shadow:0 5px 14px rgba(95,77,89,.14);
  -webkit-tap-highlight-color:transparent;
}
.bar-audio-button::before,.bar-audio-button::after{
  content:"";position:absolute;inset:-5px;border:2px solid rgba(117,165,157,.82);
  border-radius:50%;z-index:-1;pointer-events:none;
  animation:toolbarAudioPulse 1.75s ease-out infinite;
}
.bar-audio-button::after{animation-delay:.58s}
.bar-audio-button.playing::before,.bar-audio-button.playing::after{border-color:rgba(184,125,153,.9)}
.bar-audio-core{
  width:100%;height:100%;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(145deg,#91afa9,#6f918a);
  border:2px solid rgba(255,255,255,.92);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.46),0 4px 10px rgba(86,81,91,.13);
}
.bar-audio-button.playing .bar-audio-core{background:linear-gradient(145deg,#c7a1b2,#a7788f)}
.bar-audio-icon{width:24px;height:24px;display:block;color:#fff;filter:drop-shadow(0 1px 1px rgba(54,64,67,.2))}
.bar-audio-button.playing .speaker-wave-one{animation:speakerWave 1.05s ease-in-out infinite}
.bar-audio-button.playing .speaker-wave-two{animation:speakerWave 1.05s .18s ease-in-out infinite}
.bar-audio-page{
  position:absolute;right:-2px;bottom:-2px;z-index:4;
  min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;
  border-radius:999px;border:1.5px solid rgba(255,255,255,.96);
  background:#f7f0ec;color:#665965;
  font:700 .58rem/1 "Avenir Next","Segoe UI",Roboto,Arial,sans-serif;
  box-shadow:0 2px 6px rgba(85,76,88,.16);
}
.bar-audio-button:focus-visible{outline:3px solid rgba(116,88,101,.35);outline-offset:4px}
.bar-audio-button:disabled{opacity:.35;cursor:default}
@keyframes toolbarAudioPulse{0%{transform:scale(.88);opacity:.96}72%,100%{transform:scale(1.42);opacity:0}}
@media(max-width:900px),(pointer:coarse){
  .page-audio-dock{gap:6px;height:48px}
  .bar-audio-button{width:44px;height:44px;min-width:44px;padding:3px}
  .bar-audio-icon{width:22px;height:22px}
  .bar-audio-page{min-width:16px;height:16px;font-size:.54rem}
}
@media(max-width:520px){
  .toolbar{gap:1px!important}
  .page-audio-dock{gap:4px;padding-inline:0}
  .bar-audio-button{width:42px;height:42px;min-width:42px}
  .bar-audio-icon{width:21px;height:21px}
}
@media(max-width:380px){
  .bar-audio-button{width:40px;height:40px;min-width:40px}
  .bar-audio-icon{width:20px;height:20px}
}
@media(prefers-reduced-motion:reduce){.bar-audio-button::before,.bar-audio-button::after{animation:none;opacity:.58}}