:root{--ink:#112021;--ink-soft:#35565a;--teal:#16737f;--teal-deep:#0f4d56;--paper:#fbfaf4;--paper-soft:#f0eee2;--line:#11202129;--rust:#a84b2f;--gold:#e0ab39}*{box-sizing:border-box}html,body{background:var(--paper-soft);min-height:100%;color:var(--ink);margin:0;font-family:Georgia,Times New Roman,serif}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.shell{background:linear-gradient(110deg, #16737f1f, transparent 38%), radial-gradient(circle at 78% 8%, #e0ab392e, transparent 28%), var(--paper-soft);grid-template-columns:minmax(0,1fr);min-height:100vh;display:grid}.settingsToggle{z-index:30;color:#fff;background:var(--teal-deep);cursor:pointer;border:1px solid #1120212e;border-radius:50%;justify-content:center;align-items:center;width:46px;height:46px;display:inline-flex;position:fixed;top:18px;left:18px;box-shadow:0 14px 35px #0f262a38}.settingsToggle svg{width:20px;height:20px}.drawerScrim{z-index:19;opacity:0;pointer-events:none;background:#0d1b1c3d;border:0;transition:opacity .18s;position:fixed;inset:0}.panelOpen .drawerScrim{opacity:1;pointer-events:auto}.sidebar{z-index:20;border-right:1px solid var(--line);background:linear-gradient(#fbfaf4f5,#f0eee2e6),repeating-linear-gradient(0deg,#0000,#0000 23px,#11202109 24px);flex-direction:column;gap:18px;width:min(330px,86vw);padding:28px;transition:transform .24s cubic-bezier(.2,.8,.2,1);display:flex;position:fixed;inset:0 auto 0 0;overflow-y:auto;transform:translate(calc(-100% - 20px));box-shadow:26px 0 70px #0f262a2e}.panelOpen .sidebar{transform:translate(0)}.closePanel{border:1px solid var(--line);width:36px;height:36px;color:var(--ink);cursor:pointer;background:#fff9;border-radius:50%;justify-content:center;align-items:center;display:inline-flex;position:absolute;top:16px;right:16px}.identity{border-bottom:1px solid var(--line);padding-bottom:12px}.eyebrow{color:var(--teal);letter-spacing:0;text-transform:uppercase;font-family:Trebuchet MS,sans-serif;font-size:12px;font-weight:700;display:block}h1{max-width:12ch;margin:8px 0 6px;font-size:clamp(34px,4vw,52px);line-height:.95}.identity p{color:var(--ink-soft);margin:0;font-family:Trebuchet MS,sans-serif}.searchBox{border:1px solid var(--line);background:#ffffff8c;grid-template-columns:20px 1fr;align-items:center;gap:8px;padding:11px 12px;display:grid;box-shadow:inset 0 0 0 1px #fff9}.searchBox input{width:100%;color:var(--ink);background:0 0;border:0;outline:0;font-family:Trebuchet MS,sans-serif}.matchList{min-height:30px;color:var(--ink-soft);flex-wrap:wrap;gap:8px;font-family:Trebuchet MS,sans-serif;font-size:13px;display:flex}.matchList button,.toggles button,.toolGrid button,.toolGrid a,.topbar button{border:1px solid var(--line);min-height:38px;color:var(--ink);cursor:pointer;background:#ffffff8f;justify-content:center;align-items:center;gap:8px;text-decoration:none;transition:transform .16s,background .16s,border-color .16s;display:inline-flex}.matchList button{min-height:30px;padding:0 10px;font-size:12px}.matchList button:hover,.toggles button:hover,.toolGrid button:hover,.toolGrid a:hover,.topbar button:hover:not(:disabled){background:#fffdf6;border-color:#16737f75;transform:translateY(-1px)}.metaPanel{grid-template-columns:1fr 1fr;gap:10px;display:grid}.metaPanel div{border:1px solid var(--line);background:#fbfaf4bf;padding:14px}.metaPanel span{color:var(--ink-soft);font-family:Trebuchet MS,sans-serif;font-size:12px;display:block}.metaPanel strong{color:var(--teal-deep);margin-top:5px;font-size:28px;line-height:1;display:block}.toggles{grid-template-columns:1fr 1fr;gap:8px;display:grid}.toggles button{font-family:Trebuchet MS,sans-serif}.toggles .active{border-color:var(--teal);background:var(--teal);color:#fff}.toggles button:disabled{cursor:not-allowed;opacity:.45}.toggles.mobileLocked{grid-template-columns:1fr}.toggles.mobileLocked button:first-child{display:none}.toolGrid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.toolGrid svg,.topbar svg{width:18px;height:18px}.stage{grid-template-rows:auto 1fr;min-width:0;display:grid}.topbar{z-index:5;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#f0eee2c7;grid-template-columns:auto minmax(120px,1fr) auto;align-items:center;gap:16px;padding:18px clamp(18px,3vw,34px) 18px calc(clamp(18px,3vw,34px) + 54px);display:grid;position:sticky;top:0}.topbar button{min-width:104px;padding:0 16px;font-family:Trebuchet MS,sans-serif}.topbar button:disabled{cursor:not-allowed;opacity:.45}.progressWrap{background:#ffffff8c;border:1px solid #1120211f;height:8px;overflow:hidden}.progressWrap span{background:linear-gradient(90deg, var(--teal), var(--gold));height:100%;transition:width .22s;display:block}.reader{min-height:0;padding:clamp(18px,3vw,42px);position:relative;overflow:auto}.book{--flip-duration:.68s;--page-width:min(720px, 42vw);--zoom:1;transform:scale(var(--zoom));transform-origin:top;perspective:18000px;perspective-origin:50%;isolation:isolate;justify-content:center;gap:0;transition:transform .18s;display:grid;position:relative}.book.spread{grid-template-columns:repeat(2, minmax(240px, var(--page-width)))}.book.single{grid-template-columns:minmax(240px, var(--page-width))}.book.coverOpening .page{grid-column:2}.page{transform-style:preserve-3d;will-change:transform, opacity;background:#fffdf8;border:1px solid #11202124;margin:0;padding:clamp(8px,1vw,13px);position:relative;box-shadow:0 26px 60px #0f262a33,inset 0 2px #fffc}.turningSheet,.underSheet{box-shadow:none;backface-visibility:hidden;transform-style:preserve-3d;contain:layout paint;will-change:transform;background:0 0;border:0;margin:0;padding:0;display:block;position:absolute;top:0;overflow:visible}.turningSheet{z-index:6;backface-visibility:visible}.underSheet{z-index:2;opacity:1;background:#fffdf8;border:1px solid #11202124;padding:clamp(8px,1vw,13px);box-shadow:0 16px 38px #0f262a2e}.sheetFace{backface-visibility:hidden;transform-style:preserve-3d;background:#fffdf8;border:1px solid #11202124;padding:clamp(8px,1vw,13px);display:block;position:relative;overflow:hidden;box-shadow:0 18px 42px #0f262a3d}.backFace{position:absolute;inset:0;transform:rotateY(180deg)}.turningSheet img,.underSheet img{backface-visibility:hidden;background:#fff;width:100%;height:auto;display:block;overflow:hidden}.book.spread .turningSheet,.book.spread .underSheet{width:50%}.book.single .turningSheet,.book.single .underSheet{width:100%;left:0}.underSheet.next{right:0}.underSheet.prev{left:0}.underGlow{pointer-events:none;background:linear-gradient(90deg,#0f262a38,#0000 20% 80%,#ffffff73);position:absolute;inset:0}.backShade{pointer-events:none;background:linear-gradient(90deg,#0f262a33,#0000 22% 78%,#ffffff57);position:absolute;inset:0}.turningSheet.next{transform-origin:0;animation:turnPageNext var(--flip-duration) cubic-bezier(.2, .76, .22, 1) forwards;right:0}.turningSheet.prev{transform-origin:100%;animation:turnPagePrev var(--flip-duration) cubic-bezier(.2, .76, .22, 1) forwards;left:0}.turningSheet.singleSheet.next{transform-origin:0}.turningSheet.singleSheet.prev{transform-origin:100%}.curlHighlight,.curlShadow,.foldCurve,.pageEdgeStack{pointer-events:none;position:absolute;inset:0}.curlHighlight{opacity:.72;animation:curlGlide var(--flip-duration) cubic-bezier(.2, .76, .22, 1) forwards;will-change:transform, opacity;background:linear-gradient(100deg,#0000 0%,#ffffff1a 31%,#ffffffb8 45%,#ffffff2e 58%,#0000 76%),linear-gradient(90deg,#0000002e,#0000 10% 74%,#00000024)}.turningSheet.prev .curlHighlight{transform:scaleX(-1)}.curlShadow{opacity:0;width:48px;animation:innerShadowNext var(--flip-duration) cubic-bezier(.2, .76, .22, 1) forwards;will-change:opacity, transform;background:linear-gradient(90deg,#0f262a47,#0000);inset:0 auto 0 -22px}.turningSheet.prev .curlShadow{background:linear-gradient(270deg,#0f262a57,#0000);animation-name:innerShadowPrev;inset:0 -22px 0 auto}.foldCurve{opacity:0;transform-origin:0;width:54px;animation:foldCurveNext var(--flip-duration) cubic-bezier(.2, .76, .22, 1) forwards;will-change:transform, opacity;background:radial-gradient(at 0%,#ffffffeb,#ffffff47 34%,#0003 78%,#00000014),linear-gradient(90deg,#ffffff73,#00000029);border-radius:54% 0 0 54%/50%;inset:-1.2% -13px -1.2% auto;transform:translate(12px)rotateY(-38deg)scaleX(.42);box-shadow:-18px 0 26px #0f262a2e,inset 11px 0 14px #ffffffc7}.turningSheet.prev .foldCurve{transform-origin:100%;border-radius:0 54% 54% 0/50%;animation-name:foldCurvePrev;inset:-1.2% auto -1.2% -13px;box-shadow:18px 0 26px #0f262a2e,inset -11px 0 14px #ffffffc7}.pageEdgeStack{opacity:.42;background:repeating-linear-gradient(90deg,#0000001f 0 1px,#ffffffe0 1px 3px);width:9px;inset:0 0 0 auto}.turningSheet.prev .pageEdgeStack{inset:0 auto 0 0}.page img{background:#fff;width:100%;height:auto;display:block}.page figcaption{color:var(--ink-soft);text-align:center;padding:8px 2px 0;font-family:Trebuchet MS,sans-serif;font-size:12px}.spineShadow{pointer-events:none;background:linear-gradient(90deg,#0000,#1120212e);width:16px;position:absolute;inset:13px 0 36px auto}.state{min-height:60vh;color:var(--ink-soft);justify-content:center;align-items:center;gap:12px;font-family:Trebuchet MS,sans-serif;display:flex}.loader{border:2px solid #16737f33;border-top-color:var(--teal);border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes turnPageNext{0%{transform:rotateY(0)}24%{transform:rotateY(-42deg)}55%{transform:rotateY(-102deg)}78%{transform:rotateY(-148deg)}to{transform:rotateY(-180deg)}}@keyframes turnPagePrev{0%{transform:rotateY(0)}24%{transform:rotateY(42deg)}55%{transform:rotateY(102deg)}78%{transform:rotateY(148deg)}to{transform:rotateY(180deg)}}@keyframes curlGlide{0%{opacity:.16;transform:translate(38%)scaleX(.82)}48%{opacity:.76;transform:translate(0,0)scaleX(1.18)}to{opacity:.22;transform:translate(-44%)scaleX(.8)}}@keyframes foldCurveNext{0%,to{opacity:0;transform:translate(16px)rotateY(-28deg)scaleX(.34)}36%{opacity:.95;transform:translate(2px,-1px)rotateY(-56deg)scaleX(.78)}62%{opacity:.88;transform:translate(-12px,1px)rotateY(-72deg)scaleX(1.05)}}@keyframes foldCurvePrev{0%,to{opacity:0;transform:translate(-16px)rotateY(28deg)scaleX(.34)}36%{opacity:.95;transform:translate(-2px,-1px)rotateY(56deg)scaleX(.78)}62%{opacity:.88;transform:translate(12px,1px)rotateY(72deg)scaleX(1.05)}}@keyframes innerShadowNext{0%,to{opacity:0}48%{opacity:.9}}@keyframes innerShadowPrev{0%,to{opacity:0}48%{opacity:.9}}@media (max-width:980px){.shell{grid-template-columns:1fr}.sidebar{padding:20px}h1{max-width:none;font-size:34px}.book.spread,.book.single{grid-template-columns:minmax(240px,94vw)}}@media (max-width:620px){.topbar{grid-template-columns:auto 1fr auto;gap:10px;padding:12px 10px 12px 66px}.topbar button{width:auto;min-width:74px;padding:0 10px}.reader{padding:14px 10px 28px}.toolGrid{grid-template-columns:repeat(4,minmax(42px,1fr))}.metaPanel{grid-template-columns:1fr 1fr}}
