@font-face{font-family:'Poppins';font-weight:100;font-style:normal;font-display:swap;src:url('../../assets/fonts/Poppins-Thin.ttf') format('truetype')} @font-face{font-family:'Poppins';font-weight:100;font-style:italic;font-display:swap;src:url('../../assets/fonts/Poppins-ThinItalic.ttf') format('truetype')} @font-face{font-family:'Poppins';font-weight:200;font-style:normal;font-display:swap;src:url('../../assets/fonts/Poppins-ExtraLight.ttf') format('truetype')} @font-face{font-family:'Poppins';font-weight:200;font-style:italic;font-display:swap;src:url('../../assets/fonts/Poppins-ExtraLightItalic.ttf') format('truetype')} @font-face{font-family:'Poppins';font-weight:300;font-style:normal;font-display:swap;src:url('../../assets/fonts/Poppins-Light.ttf') format('truetype')} @font-face{font-family:'Poppins';font-weight:300;font-style:italic;font-display:swap;src:url('../../assets/fonts/Poppins-LightItalic.ttf') format('truetype')} @font-face{font-family:'Poppins';font-weight:400;font-style:normal;font-display:swap;src:url('../../assets/fonts/Poppins-Regular.ttf') format('truetype')} @font-face{font-family:'Poppins';font-weight:400;font-style:italic;font-display:swap;src:url('../../assets/fonts/Poppins-Italic.ttf') format('truetype')} @font-face{font-family:'Poppins';font-weight:500;font-style:normal;font-display:swap;src:url('../../assets/fonts/Poppins-Medium.ttf') format('truetype')} @font-face{font-family:'Poppins';font-weight:500;font-style:italic;font-display:swap;src:url('../../assets/fonts/Poppins-MediumItalic.ttf') format('truetype')} @font-face{font-family:'Poppins';font-weight:600;font-style:normal;font-display:swap;src:url('../../assets/fonts/Poppins-SemiBold.ttf') format('truetype')} @font-face{font-family:'Poppins';font-weight:600;font-style:italic;font-display:swap;src:url('../../assets/fonts/Poppins-SemiBoldItalic.ttf') format('truetype')} @font-face{font-family:'Poppins';font-weight:700;font-style:normal;font-display:swap;src:url('../../assets/fonts/Poppins-Bold.ttf') format('truetype')} @font-face{font-family:'Poppins';font-weight:700;font-style:italic;font-display:swap;src:url('../../assets/fonts/Poppins-BoldItalic.ttf') format('truetype')} @font-face{font-family:'Poppins';font-weight:800;font-style:normal;font-display:swap;src:url('../../assets/fonts/Poppins-ExtraBold.ttf') format('truetype')} @font-face{font-family:'Poppins';font-weight:800;font-style:italic;font-display:swap;src:url('../../assets/fonts/Poppins-ExtraBoldItalic.ttf') format('truetype')} @font-face{font-family:'Poppins';font-weight:900;font-style:normal;font-display:swap;src:url('../../assets/fonts/Poppins-Black.ttf') format('truetype')} @font-face{font-family:'Poppins';font-weight:900;font-style:italic;font-display:swap;src:url('../../assets/fonts/Poppins-BlackItalic.ttf') format('truetype')} @font-face{font-family:'Azim';font-weight:300;font-style:normal;font-display:swap;src:url('../../assets/fonts/Azim-Light.otf') format('opentype')} @font-face{font-family:'Azim';font-weight:500;font-style:normal;font-display:swap;src:url('../../assets/fonts/Azim-Medium.otf') format('opentype')} @font-face{font-family:'Azim';font-weight:700;font-style:normal;font-display:swap;src:url('../../assets/fonts/Azim-Bold.otf') format('opentype')} @font-face{font-family:'BarberChop';font-weight:400;font-style:normal;font-display:swap;src:url('../../assets/fonts/BarberChop.otf') format('opentype')} @font-face{font-family:'Fredoka One';font-weight:400;font-style:normal;font-display:swap;src:url('../../assets/fonts/FredokaOne-Regular.ttf') format('truetype')} @font-face{font-family:'Happy School';font-weight:400;font-style:normal;font-display:swap;src:url('../../assets/fonts/HappySchool.ttf') format('truetype')} @font-face{font-family:'Mangabey';font-weight:400;font-style:normal;font-display:swap;src:url('../../assets/fonts/Mangabey.ttf') format('truetype')} @font-face{font-family:'Milky Nice';font-weight:400;font-style:normal;font-display:swap;src:url('../../assets/fonts/MilkyNice.ttf') format('truetype')} @font-face{font-family:'Milky Nice Clean';font-weight:400;font-style:normal;font-display:swap;src:url('../../assets/fonts/MilkyNice-Clean.ttf') format('truetype')} @font-face{font-family:'Hanzi Kaishu';font-weight:400;font-style:normal;font-display:swap;src:url('../../assets/fonts/Hanzi-Kaishu Regular.ttf') format('truetype')} @font-face{font-family:'HYKaishu';font-weight:400;font-style:normal;font-display:swap;src:url('../../assets/fonts/汉仪楷体简.ttf') format('truetype')} @font-face{font-family:'Hind Madurai';font-weight:400;font-style:normal;font-display:swap;src:url('../../assets/fonts/HindMadurai-Regular.otf') format('opentype')} @font-face{font-family:'Noto Sans Tamil';font-weight:400;font-style:normal;font-display:swap;src:url('../../assets/fonts/NotoSansTamil-Regular.ttf') format('truetype')} @font-face{font-family:'Pinyin';font-weight:400;font-style:normal;font-display:swap;src:url('../../assets/fonts/PINYIN.TTF') format('truetype')}:root{--viewer-w:1024px;--viewer-h:768px;--viewer-opacity:0.8;--titlebar-h:50px;--navbar-h:54px;--book-gap:8px;--book-area-h:calc(var(--viewer-h) - var(--titlebar-h) - var(--navbar-h) - var(--book-gap) * 2);--side-pad:36px;--spine-w:0px;--page-w:calc((var(--viewer-w) - var(--spine-w) - var(--side-pad) * 2) / 2);--page-content-w:var(--page-w);--page-content-h:calc(var(--page-content-w) * 842 / 595);--flip-duration:900ms;--flip-ease:linear;--clr-bg:#1e1e1e;--clr-bg2:#2a2a2a;--clr-viewer-bg:rgba(42,42,42,var(--viewer-opacity));--clr-titlebar:#141414;--clr-navbar:#141414;--clr-spine:#7b5e3a;--clr-spine-hi:#c8a06a;--clr-page-bg:#fefdf8;--clr-page-shadow:rgba(0,0,0,0.35);--clr-accent:#4d7c0f;--clr-accent-dark:#3f6212;--outerbg-blur:20px;--outerbg-bleed:36px;--outerbg-scrim:radial-gradient(ellipse at center,rgba(0,0,0,0.18) 0%,rgba(0,0,0,0.34) 75%,rgba(0,0,0,0.72) 100%);--clr-accent-light:#a3e635;--clr-text:#f0eee8;--clr-text-dim:#8f8f8f;--clr-modal-bg:#1c1c1c;--clr-modal-border:#333333;--clr-hs-video:#e53935;--clr-hs-audio:#65a30d;--clr-hs-interactive:#fb8c00;--clr-hs-game:#8e24aa;--clr-hs-song:#e91e8c;--clr-hs-tracks:#00897b;--clr-hs-animation:#00bcd4;--clr-hs-3d:#3949ab;--clr-hs-pdf:#1565c0;--clr-hs-exam:#b3261e;--clr-hs-slide:#6d4c41;--clr-hs-multiple:#607d8b;--rad-sm:4px;--rad-md:8px;--rad-lg:14px;--rad-xl:20px} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;background:var(--clr-bg);font-family:'Poppins','Noto Sans Tamil','Hind Madurai','Segoe UI',Tahoma,Geneva,Verdana,sans-serif;color:var(--clr-text);-webkit-font-smoothing:antialiased} button,input{font-family:inherit;cursor:pointer;border:none;background:none} img{display:block;max-width:100%} #outerBgLayer{position:fixed;inset:0;z-index:0;pointer-events:none} #outerBgImage{position:absolute;inset:calc(-1 * var(--outerbg-bleed));background-position:center;background-size:cover;background-repeat:no-repeat;filter:blur(var(--outerbg-blur))} #outerBgLayer::after{content:'';position:absolute;inset:0;background-image:var(--outerbg-scrim)} .chooser-fx{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none;--fx-dot:rgba(190,242,100,0.90);--fx-line:rgba(163,230,53,1);opacity:0;transition:opacity 0.5s ease-out} body.book-choosing .chooser-fx{opacity:1} html.light-mode .chooser-fx{--fx-dot:rgba(63,98,18,0.72);--fx-line:rgba(63,98,18,1)} #viewerWrapper{position:relative;width:100%;background:transparent} #bookViewer{position:absolute;top:0;left:0;width:var(--viewer-w);height:var(--viewer-h);display:flex;flex-direction:column;background:var(--clr-viewer-bg);box-shadow:0 20px 60px rgba(0,0,0,0.7);transform-origin:top left;overflow:hidden;border-radius:var(--rad-lg)} #bookTitleBar{flex:0 0 var(--titlebar-h);display:flex;align-items:center;justify-content:space-between;background:var(--clr-titlebar);border-bottom:1px solid rgba(255,255,255,0.06);padding:0 16px;gap:12px;position:relative;z-index:20} html.pseudo-fullscreen #bookTitleBar{display:none} html.pseudo-fullscreen{--titlebar-h:0px;--viewer-h:calc(768px - 50px)} @media (orientation:portrait){html.pseudo-fullscreen{--viewer-h:calc(780px - 72px)}} .titlebar-left{display:flex;align-items:center;gap:8px;flex:1 1 0;min-width:0} .back-btn{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:5px;color:var(--clr-text-dim);text-decoration:none;font-size:11px;font-weight:600;white-space:nowrap;flex-shrink:0;transition:background 0.15s,color 0.15s} .back-btn:hover{background:rgba(255,255,255,0.08);color:var(--clr-text)} html.light-mode .back-btn:hover{background:rgba(0,0,0,0.06)} #bookTitleBar .title-logo{width:22px;height:22px;opacity:0.7;flex-shrink:0} .titlebar-titles{display:flex;flex-direction:column;gap:1px;min-width:0} #bookTitleText{font-size:12px;font-weight:700;color:var(--clr-text);letter-spacing:0.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #bookSubtitleText{font-size:10px;font-weight:400;color:var(--clr-text-dim);letter-spacing:0.03em} .titlebar-right{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:1 1 0;min-width:0} .company-name{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.15;font-size:10px;font-weight:600;color:var(--clr-text-dim);letter-spacing:0.05em;text-transform:uppercase;opacity:0.8} .company-version{font-size:8px;font-weight:500;letter-spacing:0.08em;opacity:0.75;text-transform:none;margin-top:1px} .titlebar-icon-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:6px;color:var(--clr-text-dim);cursor:pointer;flex-shrink:0;transition:background 0.18s,color 0.18s,border-color 0.18s} .titlebar-icon-btn:hover{background:rgba(255,255,255,0.16);color:#fff;border-color:rgba(255,255,255,0.28)} .titlebar-icon-btn.is-muted{color:#e57373;border-color:rgba(229,115,115,0.4)} html.light-mode .titlebar-icon-btn{background:rgba(0,0,0,0.05);border-color:rgba(0,0,0,0.12);color:#3a3a3a} html.light-mode .titlebar-icon-btn:hover{background:rgba(0,0,0,0.12);color:#1c1c1c} html.light-mode .titlebar-icon-btn.is-muted{color:#c62828} .theme-toggle-label{display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none} .toggle-mode-icon{font-size:12px;line-height:1} .theme-toggle-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none} .theme-toggle-switch{position:relative;display:inline-block;width:30px;height:16px;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.22);border-radius:100px;transition:background 0.22s,border-color 0.22s;flex-shrink:0} .theme-toggle-thumb{position:absolute;top:2px;left:2px;width:10px;height:10px;background:rgba(255,255,255,0.7);border-radius:50%;transition:transform 0.22s,background 0.22s} .theme-toggle-input:checked + .theme-toggle-switch{background:#4d7c0f;border-color:#4d7c0f} .theme-toggle-input:checked + .theme-toggle-switch .theme-toggle-thumb{transform:translateX(14px);background:#fff} .theme-toggle-label:hover .theme-toggle-switch{border-color:rgba(255,255,255,0.45)} html.light-mode{--clr-bg:#dcdcdc;--clr-bg2:#eaeaea;--clr-viewer-bg:rgba(234,234,234,var(--viewer-opacity));--clr-titlebar:#ffffff;--clr-navbar:#f2f2f2;--clr-spine:#9b7a50;--clr-spine-hi:#c8a06a;--clr-text:#1c1c1c;--clr-text-dim:#5f5f5f;--clr-modal-bg:#ffffff;--clr-modal-border:#d4d4d4;--clr-page-shadow:rgba(0,0,0,0.12);--outerbg-scrim:radial-gradient(ellipse at center,rgba(0,0,0,0.08) 0%,rgba(0,0,0,0.18) 75%,rgba(0,0,0,0.50) 100%)} html.light-mode #bookTitleBar{border-bottom-color:rgba(0,0,0,0.08)} html.light-mode .company-name{color:#3a3a3a;opacity:1} html.light-mode .theme-toggle-switch{background:rgba(0,0,0,0.12);border-color:rgba(0,0,0,0.18)} html.light-mode .theme-toggle-thumb{background:rgba(0,0,0,0.55)} html.light-mode .theme-toggle-input:checked + .theme-toggle-switch .theme-toggle-thumb{background:#fff} html.light-mode .nav-btn:disabled{opacity:0.25} html.light-mode .page-input{color:#1c1c1c;background:rgba(0,0,0,0.06);border-color:rgba(0,0,0,0.35);box-shadow:0 0 0 2px rgba(0,0,0,0.04)} html.light-mode .page-input:hover{border-color:rgba(0,0,0,0.6);background:rgba(0,0,0,0.1)} html.light-mode .page-input:focus{border-color:var(--clr-accent,#4d7c0f);background:rgba(0,0,0,0.07);box-shadow:0 0 0 3px rgba(77,124,15,0.3)} #bookContainer{flex:1 1 auto;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0;overflow:hidden} .book-zoom-wrap{flex:1 1 auto;position:relative;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;width:100%;padding:var(--book-gap) 0;touch-action:none} .book-zoom-wrap.page-lifted{overflow:visible;z-index:870} #bookContainer.page-lifted{overflow:visible} .book-spread{position:relative;width:calc(var(--page-w) * 2 + var(--spine-w));height:var(--book-area-h);flex-shrink:0;filter:drop-shadow(0 8px 30px rgba(0,0,0,0.55));cursor:default} #stPageFlipContainer{position:absolute;top:0;left:0;width:100%;height:100%} #hsOverlayLeft,#hsOverlayRight{position:absolute;top:0;height:100%;width:50%;pointer-events:none;z-index:5} #hsOverlayLeft{left:0} #hsOverlayRight{left:50%} #bookSpread{touch-action:none} .book-spread.is-zoomed{cursor:grab;transition:transform 0.28s cubic-bezier(0.25,0.7,0.3,1);will-change:transform} .book-spread.is-zoomed.is-panning{cursor:grabbing;transition:none} @media (orientation:portrait){:root{--viewer-w:548px;--page-w:476px;--viewer-h:780px;--titlebar-h:72px;--navbar-h:44px} .book-spread{width:var(--page-w)} #hsOverlayLeft{display:none} #hsOverlayRight{left:0;width:100%} #bookTitleBar{flex:0 0 auto;height:auto;flex-direction:row;justify-content:space-between;align-items:center;gap:6px;padding:28px 10px 4px} .titlebar-titles{position:absolute;top:3px;left:50%;transform:translateX(-50%);flex-direction:row;align-items:baseline;gap:8px;max-width:96%;white-space:nowrap} .titlebar-left .back-btn span{display:none} .titlebar-left .back-btn{padding:3px 6px} #bookTitleBar .title-logo{display:none} #bookTitleText{font-size:13px !important;max-width:55vw;overflow:hidden;text-overflow:ellipsis} #bookSubtitleText{display:inline;font-size:11px !important} .company-name{display:none} .titlebar-left{flex:1 1 0} .titlebar-right{flex:1 1 0;justify-content:flex-end} .titlebar-icon-btn{width:30px;height:30px} .titlebar-icon-btn svg{width:15px;height:15px} .zoom-btn{width:24px !important;height:24px !important} .zoom-btn svg{width:14px !important;height:14px !important} .zoom-level{display:none} .nav-btn{padding:5px 9px !important;min-width:0 !important} .nav-btn .nav-label{display:none} .nav-btn svg{width:15px;height:15px !important} .nav-side-btn{padding:4px 6px !important} .nav-side-btn svg{width:13px;height:13px !important} .page-indicator{position:absolute !important;left:50% !important;top:50% !important;transform:translate(-50%,-50%) !important;gap:4px} .page-input{width:64px !important;min-width:64px !important;max-width:64px !important;font-size:12px !important;padding:3px 4px !important} .nav-grid-btn{padding:4px !important} .nav-grid-btn svg{width:16px !important;height:16px !important}} .zoom-controls{display:flex;align-items:center;gap:2px;padding:3px;flex-shrink:0;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:8px;z-index:30} .zoom-btn{display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;background:transparent;border:none;border-radius:6px;color:var(--clr-text-dim);cursor:pointer;flex-shrink:0;transition:background 0.18s,color 0.18s} .zoom-btn:hover:not(:disabled){background:rgba(255,255,255,0.16);color:#fff} .zoom-btn:active:not(:disabled){transform:scale(0.94)} .zoom-btn:disabled{opacity:0.3;cursor:default;pointer-events:none} .zoom-btn svg{width:15px;height:15px} .zoom-level{min-width:44px;text-align:center;font-size:10px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--clr-text);opacity:0.85;cursor:pointer;user-select:none} .zoom-level:hover{opacity:1} html.light-mode .zoom-controls{background:rgba(0,0,0,0.05);border-color:rgba(0,0,0,0.12)} html.light-mode .zoom-btn{color:#3a3a3a} html.light-mode .zoom-btn:hover:not(:disabled){background:rgba(0,0,0,0.12);color:#1c1c1c} .page-half{position:relative;flex:0 0 var(--page-w);height:100%;background:var(--clr-page-bg);overflow:hidden;will-change:contents;transform:translateZ(0);-webkit-transform:translateZ(0)} .page-half.page-left{border-radius:var(--rad-sm) 0 0 var(--rad-sm)} .page-half.page-right{border-radius:0 var(--rad-sm) var(--rad-sm) 0} .page-half.page-empty{visibility:hidden} .page-content{position:relative;width:100%;height:100%} .page-img{display:block;width:100%;height:100%;object-fit:fill;object-position:center;user-select:none;pointer-events:none;transform:translateZ(0);-webkit-transform:translateZ(0)} .book-spine{display:none} .page-fold{position:absolute;top:0;width:8px;height:100%;pointer-events:none;z-index:1} .page-fold-left{right:0;background:linear-gradient(to right,transparent,rgba(114,114,114,0.055))} .page-fold-right{left:0;background:linear-gradient(to left,transparent,rgba(114,114,114,0.055))} .page-flipper{position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;pointer-events:none;z-index:10;will-change:transform;opacity:0} .page-flipper.flipper-visible{opacity:1;pointer-events:none} .page-flipper.flipper-on-right{left:calc(var(--page-w) + var(--spine-w));width:var(--page-w);transform-origin:left center} .page-flipper.flipper-on-left{left:0;width:var(--page-w);transform-origin:right center} .flipper-face{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;will-change:transform;transform:translateZ(0);-webkit-transform:translateZ(0)} .flipper-back{transform:rotateY(180deg)} @keyframes flipForwardAnim{0%{transform:perspective(900px) rotateY(0deg);animation-timing-function:cubic-bezier(0.45,0,0.85,0.5)} 20%{transform:perspective(900px) rotateY(-28deg);animation-timing-function:cubic-bezier(0.3,0,0.7,1)} 50%{transform:perspective(900px) rotateY(-90deg);animation-timing-function:cubic-bezier(0.3,0,0.7,1)} 80%{transform:perspective(900px) rotateY(-158deg);animation-timing-function:cubic-bezier(0.15,0,0.35,1)} 100%{transform:perspective(900px) rotateY(-180deg)}} @keyframes flipBackwardAnim{0%{transform:perspective(900px) rotateY(0deg);animation-timing-function:cubic-bezier(0.45,0,0.85,0.5)} 20%{transform:perspective(900px) rotateY(28deg);animation-timing-function:cubic-bezier(0.3,0,0.7,1)} 50%{transform:perspective(900px) rotateY(90deg);animation-timing-function:cubic-bezier(0.3,0,0.7,1)} 80%{transform:perspective(900px) rotateY(158deg);animation-timing-function:cubic-bezier(0.15,0,0.35,1)} 100%{transform:perspective(900px) rotateY(180deg)}} .page-flipper.flip-forward{animation:flipForwardAnim var(--flip-duration) linear forwards} .page-flipper.flip-backward{animation:flipBackwardAnim var(--flip-duration) linear forwards} .flipper-face::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0} .page-flipper.flip-forward .flipper-front::after{background:linear-gradient(to right,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.25) 20%,transparent 55%);animation:shadowForwardFront var(--flip-duration) linear forwards} .page-flipper.flip-forward .flipper-back::after{background:linear-gradient(to left,rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.18) 22%,transparent 55%);animation:shadowForwardBack var(--flip-duration) linear forwards} .page-flipper.flip-backward .flipper-front::after{background:linear-gradient(to left,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.25) 20%,transparent 55%);animation:shadowForwardFront var(--flip-duration) linear forwards} .page-flipper.flip-backward .flipper-back::after{background:linear-gradient(to right,rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.18) 22%,transparent 55%);animation:shadowForwardBack var(--flip-duration) linear forwards} @keyframes shadowForwardFront{0%{opacity:0} 15%{opacity:0.2} 45%{opacity:0.85} 50%{opacity:1.0} 100%{opacity:0}} @keyframes shadowForwardBack{0%{opacity:0} 50%{opacity:0} 56%{opacity:0.72} 78%{opacity:0.28} 100%{opacity:0}} .flip-shadow{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:1} .flip-shadow.from-left{background:linear-gradient(to right,rgba(0,0,0,0.72) 0%,transparent 65%)} .flip-shadow.from-right{background:linear-gradient(to left,rgba(0,0,0,0.72) 0%,transparent 65%)} .book-nav{flex:0 0 var(--navbar-h);width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 var(--side-pad);background:var(--clr-navbar);border-top:1px solid rgba(255,255,255,0.06);gap:12px} .nav-btn{display:flex;align-items:center;gap:6px;padding:7px 16px;background:var(--clr-accent);color:#fff;font-size:13px;font-weight:600;border-radius:var(--rad-md);transition:background 0.18s,transform 0.1s,opacity 0.2s;min-width:120px;justify-content:center} .nav-btn svg{width:18px;height:18px;flex-shrink:0} .nav-btn:hover:not(:disabled){background:var(--clr-accent-dark);transform:translateY(-1px)} .nav-btn:active:not(:disabled){transform:translateY(0)} .nav-btn:disabled{opacity:0.35;cursor:default;pointer-events:none} .page-indicator{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--clr-text-dim);justify-content:center;white-space:nowrap} .page-indicator .sep{color:var(--clr-text-dim)} .page-indicator .sep-of{font-size:11px;font-weight:400} .page-input{width:auto;min-width:52px;max-width:150px;padding:4px 10px;text-align:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--clr-text);background:rgba(255,255,255,0.12);border:1.5px solid rgba(255,255,255,0.45);border-radius:6px;outline:none;cursor:text;-moz-appearance:textfield;appearance:textfield;transition:border-color 0.15s,background 0.15s,box-shadow 0.15s;box-shadow:0 0 0 2px rgba(255,255,255,0.06)} .page-input::-webkit-inner-spin-button,.page-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0} .page-input:hover{border-color:rgba(255,255,255,0.7);background:rgba(255,255,255,0.17)} .page-input:focus{border-color:var(--clr-accent,#4d7c0f);background:rgba(255,255,255,0.18);box-shadow:0 0 0 3px rgba(77,124,15,0.3)} .nav-side-btn{display:flex;align-items:center;gap:4px;padding:5px 10px;background:var(--clr-accent);color:#fff;border:none;border-radius:var(--rad-md);cursor:pointer;font-size:11px;font-weight:600;white-space:nowrap;transition:background 0.18s,transform 0.1s,opacity 0.18s;opacity:0.88} .nav-side-btn:hover:not(:disabled){background:var(--clr-accent-dark);opacity:1;transform:translateY(-1px)} .nav-side-btn:active:not(:disabled){transform:translateY(0)} .nav-side-btn:disabled{opacity:0.28;cursor:default;pointer-events:none} .nav-side-btn svg{width:14px;height:14px;flex-shrink:0} .nav-grid-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;margin-left:auto;background:var(--clr-accent);color:#fff;border-radius:var(--rad-md);transition:background 0.18s,transform 0.1s;flex-shrink:0} .nav-grid-btn:hover{background:var(--clr-accent-dark);transform:translateY(-1px)} .nav-grid-btn:active{transform:translateY(0)} .nav-grid-btn svg{width:20px;height:20px} .nav-grid-btn[aria-expanded="true"]{background:var(--clr-accent-dark)} html.light-mode .nav-grid-btn{background:var(--clr-accent);color:#fff} .book-nav{position:relative;z-index:860} .thumb-overlay{position:absolute;inset:0;pointer-events:none;visibility:hidden;transition:visibility 0s 0.3s} .thumb-overlay.open{pointer-events:auto;visibility:visible;transition:visibility 0s} .thumb-backdrop{position:absolute;inset:0;z-index:845;background:rgba(0,0,0,0.55);opacity:0;transition:opacity 0.28s ease;will-change:opacity} .thumb-overlay.open .thumb-backdrop{opacity:1} .thumb-panel{position:absolute;top:var(--titlebar-h);bottom:var(--navbar-h);left:0;right:0;z-index:850;display:flex;flex-direction:column;background:var(--clr-bg2);box-shadow:0 -12px 40px rgba(0,0,0,0.5);transform:translate3d(0,100%,0);visibility:hidden;transition:transform 0.32s cubic-bezier(0.32,0.72,0.25,1),visibility 0s 0.32s;will-change:transform;overflow:hidden} .thumb-overlay.open .thumb-panel{transform:translate3d(0,0,0);visibility:visible;transition:transform 0.32s cubic-bezier(0.32,0.72,0.25,1),visibility 0s} .thumb-header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;font-size:13px;font-weight:700;color:var(--clr-text);border-bottom:1px solid rgba(255,255,255,0.08)} .thumb-close{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:rgba(255,255,255,0.08);border:none;border-radius:6px;color:var(--clr-text-dim);font-size:18px;line-height:1;cursor:pointer;transition:background 0.18s,color 0.18s} .thumb-close:hover{background:rgba(255,255,255,0.18);color:#fff} .thumb-grid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));grid-auto-rows:196px;gap:14px;padding:16px 20px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;align-content:start} .thumb-item{position:relative;width:100%;height:100%;padding:0;border:2px solid rgba(255,255,255,0.12);border-radius:var(--rad-md);overflow:hidden;background:var(--clr-page-bg);cursor:pointer;transition:border-color 0.15s,transform 0.15s,box-shadow 0.15s} .thumb-item:hover{border-color:var(--clr-accent-light);transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.35)} .thumb-item.is-current{border-color:var(--clr-accent);box-shadow:0 0 0 2px rgba(163,230,53,0.35)} .thumb-item img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;user-select:none;content-visibility:auto;contain-intrinsic-size:140px 196px} .thumb-num{position:absolute;bottom:4px;right:4px;padding:1px 6px;background:rgba(0,0,0,0.65);border-radius:4px;font-size:10px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums} html.light-mode .thumb-panel{background:#f2f2f2} html.light-mode .thumb-header{color:#1c1c1c;border-bottom-color:rgba(0,0,0,0.08)} html.light-mode .thumb-item{border-color:rgba(0,0,0,0.15)} html.light-mode .thumb-num{background:rgba(0,0,0,0.55)} html.light-mode .thumb-close{background:rgba(0,0,0,0.08);color:#3a3a3a} html.light-mode .thumb-close:hover{background:rgba(0,0,0,0.16);color:#1c1c1c} html.light-mode .nav-side-btn:disabled{opacity:0.2} .hotspot-layer{position:absolute;inset:0;pointer-events:none} .book-spread.is-flipping .hotspot-btn{visibility:hidden} .hotspot-btn{position:absolute;padding:0;border:none;background:none;pointer-events:all;cursor:pointer;transition:transform 0.15s,filter 0.15s;animation:hotspotPulse 2.4s ease-in-out infinite} @keyframes hotspotPulse{0%,100%{filter:drop-shadow(0 0 0px rgba(255,255,255,0.6))} 50%{filter:drop-shadow(0 0 5px rgba(255,255,255,0.9))}} .hotspot-btn:hover{transform:scale(1.06);animation:none;filter:brightness(1.12)} .hotspot-btn:active{transform:scale(0.97)} .hs-image{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none} .hs-type-badge{position:absolute;top:-8px;right:-8px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;border:2px solid #fff;background:var(--clr-hs-exam);color:#fff;box-shadow:0 1px 4px rgba(0,0,0,0.4);pointer-events:none} .hs-type-badge svg{width:11px;height:11px;display:block} #modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,0);backdrop-filter:blur(0px);pointer-events:none;transition:background 0.3s,backdrop-filter 0.3s} #modal.modal-active{background:rgba(0,0,0,0.78);backdrop-filter:blur(4px);pointer-events:all} body.modal-open{overflow:hidden} #modalContainer{position:relative;background:var(--clr-modal-bg);border:1px solid var(--clr-modal-border);border-radius:var(--rad-xl);width:min(960px,96vw);height:min(85vh,85dvh);display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,0.8);overflow:hidden;transform:translateY(24px) scale(0.97);opacity:0;transition:transform 0.3s var(--flip-ease),opacity 0.3s} #modal.modal-active #modalContainer{transform:translateY(0) scale(1);opacity:1} .modal-header{display:flex;align-items:center;gap:10px;padding:16px 20px 14px;border-bottom:1px solid var(--clr-modal-border);flex-shrink:0} #modalTitle{font-size:16px;font-weight:700;color:var(--clr-text);flex:1;white-space:pre-line;line-height:1.3} .modal-type-tag{font-size:11px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:3px 8px;border-radius:100px;color:#fff} .type-video{background:var(--clr-hs-video)} .type-animation{background:var(--clr-hs-animation)} .type-audio{background:var(--clr-hs-audio)} .type-interactive{background:var(--clr-hs-interactive)} .type-game{background:var(--clr-hs-game)} .type-song{background:var(--clr-hs-song)} .type-tracks{background:var(--clr-hs-tracks)} .type-3d{background:var(--clr-hs-3d)} .type-pdf{background:var(--clr-hs-pdf)} .type-exam{background:var(--clr-hs-exam)} .type-slide{background:var(--clr-hs-slide)} #modalClose{flex-shrink:0;margin-left:auto;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.08);color:var(--clr-text-dim);font-size:16px;display:flex;align-items:center;justify-content:center;transition:background 0.15s,color 0.15s} #modalClose:hover{background:rgba(220,40,40,0.85);color:#fff} #modalBody{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;min-height:0;padding:20px;display:flex;align-items:stretch;justify-content:center} #modalBody::-webkit-scrollbar{width:6px} #modalBody::-webkit-scrollbar-track{background:transparent} #modalBody::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:3px} .media-wrapper{width:100%;max-height:100%;display:flex;flex-direction:column} .media-video{position:relative;width:100%;max-height:100%;margin:0 auto;display:flex;flex-direction:column;gap:10px} .media-video .vp-frame{position:relative;width:100%;aspect-ratio:16 / 9;background:#000;border-radius:var(--rad-md);overflow:hidden} .media-video .media-player{position:absolute;inset:0;width:100%;height:100%;border-radius:var(--rad-md);background:#000;outline:none;cursor:pointer} .video-replay-btn{position:absolute;inset:0;margin:auto;width:72px;height:72px;display:none;align-items:center;justify-content:center;padding:0;background:rgba(0,0,0,0.72);color:#fff;border:2px solid rgba(255,255,255,0.55);border-radius:50%;cursor:pointer;z-index:10;transition:background 0.2s,transform 0.15s} .video-replay-btn:hover{background:rgba(30,30,30,0.9);transform:scale(1.08)} .video-replay-btn svg{display:block} .vp-controls{display:flex;align-items:center;gap:10px;padding:8px 14px;background:rgba(60,60,60,0.5);border:1px solid rgba(255,255,255,0.18);border-radius:14px;color:#fff;flex-shrink:0} .vp-play-btn,.vp-fs-btn{width:36px;height:36px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.22);border-radius:10px;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;flex-shrink:0;transition:background 0.15s,transform 0.15s} .vp-play-btn:hover,.vp-fs-btn:hover{background:rgba(255,255,255,0.18)} .vp-play-btn:active,.vp-fs-btn:active{transform:scale(0.94)} .vp-play-btn svg,.vp-fs-btn svg{width:18px;height:18px;display:block} .vp-time{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:rgba(255,255,255,0.85);min-width:36px;text-align:center} .vp-progress{-webkit-appearance:none;appearance:none;flex:1;height:5px;background:rgba(255,255,255,0.2);border-radius:3px;outline:none;cursor:pointer;accent-color:var(--clr-hs-video)} .vp-progress::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--clr-hs-video);border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,0.4)} .vp-progress::-moz-range-thumb{width:14px;height:14px;background:var(--clr-hs-video);border-radius:50%;cursor:pointer;border:2px solid #fff} .vp-vol-wrap{display:flex;align-items:center;gap:6px} .vp-vol-icon{width:20px;height:20px;color:rgba(255,255,255,0.85);flex-shrink:0} .vp-vol-slider{width:70px;accent-color:#fff} .media-video:fullscreen{width:100vw;height:100vh;max-height:none;margin:0;padding:0;background:#000;gap:0;justify-content:center;position:relative} .media-video:-webkit-full-screen{width:100vw;height:100vh;max-height:none;margin:0;padding:0;background:#000;gap:0;justify-content:center;position:relative} .media-video:fullscreen .vp-frame,.media-video:-webkit-full-screen .vp-frame{flex:1;width:100%;height:100%;aspect-ratio:auto;border-radius:0;min-height:0} .media-video:fullscreen .media-player,.media-video:-webkit-full-screen .media-player{border-radius:0} .media-video:fullscreen .vp-controls,.media-video:-webkit-full-screen .vp-controls{position:absolute;left:16px;right:16px;bottom:8px;z-index:10;background:rgba(20,20,28,0.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity 0.3s ease,transform 0.3s ease} .media-video:fullscreen .vp-controls.is-hidden,.media-video:-webkit-full-screen .vp-controls.is-hidden{opacity:0;pointer-events:none;transform:translateY(20px)} .media-video:fullscreen .vp-controls.is-dimmed,.media-video:-webkit-full-screen .vp-controls.is-dimmed{opacity:0.4} .media-video.is-cursor-hidden:fullscreen,.media-video.is-cursor-hidden:-webkit-full-screen,.media-video.is-cursor-hidden:fullscreen *,.media-video.is-cursor-hidden:-webkit-full-screen *{cursor:none} .media-audio{display:flex;justify-content:center;padding:10px 0;width:100%;min-height:0;height:100%;align-self:stretch} .ap-card{width:100%;max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:12px;flex:1} .ap-equalizer-panel{flex:1;min-height:140px;background:rgba(60,60,60,0.5);border:1px solid rgba(255,255,255,0.18);border-radius:16px;display:flex;align-items:center;justify-content:center;overflow:hidden} .ap-equalizer{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:80%;width:100%;padding:0 10px} .eq-bar{flex:1;max-width:16px;min-height:4px;height:6%;border-radius:4px 4px 0 0;background:linear-gradient(to top,#888,#bbb,#e0e0e0);opacity:0.3;animation:eqIdle 2.5s ease-in-out infinite;animation-delay:calc(var(--i) * 0.12s);will-change:height,opacity;transition:opacity 0.4s ease} @keyframes eqIdle{0%,100%{height:5%} 50%{height:12%}} .ap-equalizer.playing .eq-bar{opacity:1;animation-delay:calc(var(--i) * 0.06s)} .ap-equalizer.playing .eq-bar:nth-child(7n+1){animation:eqB1 0.75s ease-in-out infinite;animation-delay:calc(var(--i)*0.06s)} .ap-equalizer.playing .eq-bar:nth-child(7n+2){animation:eqB2 1.05s ease-in-out infinite;animation-delay:calc(var(--i)*0.06s)} .ap-equalizer.playing .eq-bar:nth-child(7n+3){animation:eqB3 0.65s ease-in-out infinite;animation-delay:calc(var(--i)*0.06s)} .ap-equalizer.playing .eq-bar:nth-child(7n+4){animation:eqB4 1.2s ease-in-out infinite;animation-delay:calc(var(--i)*0.06s)} .ap-equalizer.playing .eq-bar:nth-child(7n+5){animation:eqB5 0.6s ease-in-out infinite;animation-delay:calc(var(--i)*0.06s)} .ap-equalizer.playing .eq-bar:nth-child(7n+6){animation:eqB6 0.9s ease-in-out infinite;animation-delay:calc(var(--i)*0.06s)} .ap-equalizer.playing .eq-bar:nth-child(7n){animation:eqB7 1.1s ease-in-out infinite;animation-delay:calc(var(--i)*0.06s)} @keyframes eqB1{0%,100%{height:12%} 25%{height:75%} 50%{height:35%} 75%{height:55%}} @keyframes eqB2{0%,100%{height:8%} 30%{height:90%} 60%{height:20%} 80%{height:60%}} @keyframes eqB3{0%,100%{height:15%} 20%{height:50%} 50%{height:85%} 75%{height:35%}} @keyframes eqB4{0%,100%{height:10%} 35%{height:65%} 55%{height:95%} 80%{height:28%}} @keyframes eqB5{0%,100%{height:18%} 25%{height:80%} 50%{height:40%} 75%{height:70%}} @keyframes eqB6{0%,100%{height:6%} 20%{height:60%} 45%{height:25%} 70%{height:82%}} @keyframes eqB7{0%,100%{height:14%} 30%{height:45%} 55%{height:78%} 80%{height:22%}} .ap-equalizer.reactive .eq-bar{animation:none !important;opacity:1;transition:height 0.06s linear} .ap-player-panel{background:rgba(60,60,60,0.5);border:1px solid rgba(255,255,255,0.18);border-radius:16px;padding:14px 22px 16px;display:flex;flex-direction:column;align-items:center;gap:10px} .ap-progress-wrapper{width:100%;display:flex;align-items:center;gap:10px} .ap-time{font-weight:600;font-size:12px;color:rgba(255,255,255,0.7);min-width:34px;text-align:center} .ap-range{-webkit-appearance:none;flex:1;height:5px;background:rgba(255,255,255,0.2);border-radius:3px;outline:none;cursor:pointer} .ap-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.4);border:2px solid rgba(255,255,255,0.8)} .ap-controls{display:flex;align-items:center;justify-content:center;gap:18px} .ap-ctrl-btn{width:44px;height:44px;border-radius:12px;border:2px solid rgba(255,255,255,0.3);background:rgba(255,255,255,0.1);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;transition:background .2s,transform .2s} .ap-ctrl-btn:hover{background:rgba(255,255,255,0.22);transform:scale(1.1)} .ap-ctrl-btn:active{transform:scale(0.93)} .ap-ctrl-btn svg{width:22px;height:22px} .ap-play-btn{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#e0e0e0,#fff);border:2px solid rgba(255,255,255,0.5);color:#333;display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;box-shadow:0 6px 20px rgba(0,0,0,0.3);transition:transform .2s,box-shadow .2s} .ap-play-btn:hover{transform:scale(1.08);box-shadow:0 10px 26px rgba(0,0,0,0.4)} .ap-play-btn:active{transform:scale(0.94)} .ap-play-btn svg{width:22px;height:22px} .ap-icon-play{margin-left:2px} .ap-vol-wrap{display:flex;align-items:center;gap:5px} .ap-vol-icon{width:24px;height:24px;color:rgba(255,255,255,0.7);flex-shrink:0} .ap-vol-slider{width:70px} .ap-vol-pct{font-size:11px;font-weight:600;color:rgba(255,255,255,0.7);min-width:32px;text-align:center} .tp-controls .ap-vol-icon{color:var(--clr-hs-tracks)} .tp-controls .ap-vol-pct{color:var(--clr-hs-tracks)} .tp-controls .ap-vol-slider{accent-color:var(--clr-hs-tracks)} .sp-controls .ap-vol-icon{color:rgba(255,255,255,0.85)} .sp-controls .ap-vol-pct{color:rgba(255,255,255,0.85)} .sp-controls .ap-vol-slider{accent-color:#fff} .media-wrapper.song-player-wrap{width:100%;height:100%;min-height:360px;align-self:stretch} .song-player{display:flex;flex-direction:column;gap:12px;width:100%;height:100%;overflow:hidden} .sp-track-selector{display:flex;flex-wrap:wrap;gap:6px;justify-content:center} .sp-track-btn{padding:6px 18px;border-radius:100px;border:2px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.6);font-size:12px;font-weight:600;cursor:pointer;transition:background 0.2s,color 0.2s,border-color 0.2s} .sp-track-btn.active,.sp-track-btn:hover{background:#fff;border-color:#fff;color:#1c1c1c} .sp-lyrics-panel{min-height:80px;max-height:40vh;display:flex;flex-direction:column;background:rgba(60,60,60,0.5);border:1px solid rgba(255,255,255,0.18);border-radius:16px;overflow:hidden} .sp-player-panel{flex-shrink:0} .sp-lyrics-label{font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.4);padding:12px 20px 6px;text-align:center} .sp-lyrics-content{flex:1;overflow-y:auto;padding:10px 24px 20px;font-size:17px;line-height:2.2;color:rgba(255,255,255,0.3);white-space:pre-wrap;text-align:center;scroll-behavior:smooth;position:relative} .sp-lyrics-content::-webkit-scrollbar{width:4px} .sp-lyrics-content::-webkit-scrollbar-track{background:transparent} .sp-lyrics-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:2px} .sp-lyrics-content.karaoke-mode p{margin:32px 0 0;padding:6px 0;transition:color 0.3s,transform 0.3s,text-shadow 0.3s;position:relative} .sp-lyrics-content.karaoke-mode p:first-child{margin-top:0} .sp-lyrics-content.karaoke-mode p.prev{color:rgba(255,255,255,0.3)} .sp-lyrics-content.karaoke-mode p.active{color:#fff;font-weight:700;font-size:20px;transform:scale(1.05);text-shadow:0 0 18px rgba(255,215,0,0.85),0 0 36px rgba(255,195,0,0.55),0 2px 8px rgba(0,0,0,0.45)} .k-word{position:relative;display:inline-block;transition:color 0.15s} .k-word.k-sung{color:#fff} .k-ball{position:absolute;top:0;left:0;margin-top:-20px;width:12px;height:12px;background:#fff;border-radius:50%;box-shadow:0 0 14px rgba(255,255,255,0.7),0 0 28px rgba(255,215,0,0.5);transform:translateX(-50%);transition:left 0.35s cubic-bezier(0.4,0,0.2,1),top 0.45s cubic-bezier(0.4,0,0.2,1);pointer-events:none;will-change:left,top,transform} .k-ball.is-hopping{animation:karaokeHop 0.4s cubic-bezier(0.34,1.2,0.64,1)} @keyframes karaokeHop{0%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-14px)} 100%{transform:translateX(-50%) translateY(0)}} .sp-player-panel{background:rgba(60,60,60,0.5);border:1px solid rgba(255,255,255,0.18);border-radius:16px;padding:14px 22px 16px;display:flex;flex-direction:column;align-items:center;gap:10px} .sp-mode-selector{display:flex;gap:8px;justify-content:center} .sp-mode-btn{padding:5px 18px;border-radius:100px;border:2px solid rgba(255,255,255,0.25);background:transparent;color:rgba(255,255,255,0.6);font-size:12px;font-weight:600;cursor:pointer;transition:background 0.2s,color 0.2s,border-color 0.2s} .sp-mode-btn.active,.sp-mode-btn:hover{background:rgba(255,255,255,0.12);border-color:#fff;color:#fff} .sp-progress-wrap{width:100%;display:flex;align-items:center;gap:10px} .sp-time{font-size:12px;font-weight:600;color:rgba(255,255,255,0.7);font-variant-numeric:tabular-nums;min-width:34px;text-align:center} .sp-time-tot{text-align:right} .sp-progress{-webkit-appearance:none;flex:1;height:5px;background:rgba(255,255,255,0.2);border-radius:3px;outline:none;cursor:pointer} .sp-progress::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.4);border:2px solid rgba(255,255,255,0.8)} .sp-controls{display:flex;align-items:center;justify-content:center;gap:18px} .sp-ctrl-btn{width:44px;height:44px;border-radius:12px;border:2px solid rgba(255,255,255,0.3);background:rgba(255,255,255,0.1);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;outline:none;transition:background .2s,transform .2s} .sp-ctrl-btn:hover{background:rgba(255,255,255,0.22);transform:scale(1.1)} .sp-ctrl-btn:active{transform:scale(0.93)} .sp-play-btn{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#e0e0e0,#fff);border:2px solid rgba(255,255,255,0.5);color:#333;cursor:pointer;display:flex;align-items:center;justify-content:center;outline:none;box-shadow:0 6px 20px rgba(0,0,0,0.3);transition:transform .2s,box-shadow .2s} .sp-play-btn:hover{transform:scale(1.08);box-shadow:0 10px 26px rgba(0,0,0,0.4)} .sp-play-btn:active{transform:scale(0.94)} .tracks-player{display:flex;flex-direction:column;width:100%} .tp-playlist{display:flex;flex-direction:column;gap:2px;padding:10px 12px;max-height:200px;overflow-y:auto;border-bottom:1px solid var(--clr-modal-border)} .tp-playlist::-webkit-scrollbar{width:4px} .tp-playlist::-webkit-scrollbar-track{background:transparent} .tp-playlist::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:2px} .tp-track-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;border:none;background:transparent;color:var(--clr-text-dim);font-size:13px;text-align:left;cursor:pointer;transition:background 0.15s,color 0.15s} .tp-track-item:hover{background:rgba(255,255,255,0.06);color:var(--clr-text)} .tp-track-item.active{background:rgba(0,137,123,0.15);color:var(--clr-hs-tracks);font-weight:600} .tp-track-icon{font-size:11px;width:16px;flex-shrink:0} .tp-now-playing{padding:8px 16px 4px;font-size:12px;font-weight:700;color:var(--clr-hs-tracks);text-align:center;min-height:28px} .tp-player-panel{padding:8px 16px 14px;display:flex;flex-direction:column;gap:10px} .tp-progress-wrap{display:flex;align-items:center;gap:8px} .tp-time{font-size:11px;color:var(--clr-text-dim);font-variant-numeric:tabular-nums;min-width:32px} .tp-time-tot{text-align:right} .tp-progress{flex:1;accent-color:var(--clr-hs-tracks);height:4px;cursor:pointer} .tp-controls{display:flex;align-items:center;justify-content:center;gap:16px} .tp-ctrl-btn{background:none;border:none;color:var(--clr-text-dim);cursor:pointer;padding:6px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:color 0.15s,background 0.15s} .tp-ctrl-btn:hover{color:var(--clr-text);background:rgba(255,255,255,0.08)} .tp-play-btn{width:48px;height:48px;border-radius:50%;border:none;background:var(--clr-hs-tracks);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s,transform 0.1s} .tp-play-btn:hover{background:#00695c;transform:scale(1.05)} @media (max-width:640px) and (orientation:portrait){.vp-controls{flex-wrap:wrap;gap:8px 10px;padding:8px 12px} .vp-progress{order:-1;flex:1 1 100%;min-width:0} .vp-play-btn,.vp-fs-btn{width:32px;height:32px;border-radius:9px} .vp-play-btn svg,.vp-fs-btn svg{width:16px;height:16px} .vp-time{font-size:11px;min-width:30px} .vp-vol-wrap{gap:5px;min-width:0} .vp-vol-icon{width:16px;height:16px} .vp-vol-slider{width:clamp(30px,10vw,56px)} .ap-vol-wrap{gap:4px;min-width:0} .ap-vol-icon{width:18px;height:18px} .ap-vol-slider{width:clamp(26px,11vw,52px)} .ap-vol-pct{font-size:10px;min-width:26px} .ap-player-panel{padding:12px 14px 14px;gap:8px} .ap-controls{flex-wrap:wrap;gap:10px;row-gap:8px} .ap-ctrl-btn{width:40px;height:40px;border-radius:11px} .ap-ctrl-btn svg{width:20px;height:20px} .ap-play-btn{width:44px;height:44px;border-radius:11px} .ap-play-btn svg{width:20px;height:20px} .ap-time{font-size:11px;min-width:30px} .sp-player-panel{padding:12px 14px 14px;gap:8px} .sp-controls{flex-wrap:wrap;gap:10px;row-gap:8px} .sp-ctrl-btn{width:40px;height:40px;border-radius:11px} .sp-play-btn{width:44px;height:44px;border-radius:11px} .sp-time{font-size:11px;min-width:30px} .tp-player-panel{padding:8px 12px 12px;gap:8px} .tp-controls{flex-wrap:wrap;gap:12px;row-gap:8px} .tp-ctrl-btn{padding:4px} .tp-play-btn{width:44px;height:44px} .tp-time{font-size:10px;min-width:28px}} #modalContainer.modal-chooser{height:auto;max-height:80vh;width:min(520px,90vw)} #modal.modal-fullscreen{padding:0} #modalContainer.modal-fullscreen{width:100vw;max-height:100vh;max-height:100dvh;height:100vh;height:100dvh;border-radius:0;border:none;box-shadow:none} #modalContainer.modal-fullscreen .modal-header{display:none} #modalContainer.modal-fullscreen #modalBody{flex:1;overflow:hidden;padding:0} #modalContainer.modal-fullscreen .iframe-wrapper{height:100%;min-height:0} #modalContainer.modal-fullscreen .activity-iframe{height:100%;border-radius:0} .slide-viewer{width:100%;max-height:100%;display:flex;flex-direction:column;gap:12px;outline:none} .sv-stage{position:relative;width:100%;aspect-ratio:16 / 9;background:#0d0d0d;border:1px solid var(--clr-modal-border);border-radius:var(--rad-md);overflow:hidden;touch-action:pan-y;cursor:pointer} .sv-image{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none} .sv-nav{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:1px solid rgba(255,255,255,0.28);border-radius:50%;background:rgba(0,0,0,0.42);color:#fff;cursor:pointer;transition:background 0.15s,opacity 0.15s} .sv-nav svg{width:18px;height:18px} .sv-nav:hover:not(:disabled){background:rgba(0,0,0,0.72)} .sv-nav:disabled{opacity:0.22;cursor:default} .sv-prev{left:10px} .sv-next{right:10px} .sv-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .sv-counter{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--clr-text-dim);letter-spacing:0.04em} .sv-download{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--rad-md);background:var(--clr-accent);color:#fff;font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background 0.15s} .sv-download:hover{background:var(--clr-accent-dark)} .sv-download svg{width:14px;height:14px;flex-shrink:0} .sv-fallback{width:100%;padding:28px 20px;text-align:center;font-size:13px;color:var(--clr-text-dim)} .sv-fallback p{margin-bottom:10px} .sv-fallback-file{font-size:11px;color:var(--clr-text-dim);opacity:0.75;word-break:break-all;margin-bottom:16px} @media (max-width:640px){.sv-nav{width:32px;height:32px} .sv-download{width:100%;justify-content:center}} .iframe-ext-close{position:absolute;top:max(10px,env(safe-area-inset-top,10px));right:max(10px,env(safe-area-inset-right,10px));width:40px;height:40px;border-radius:12px;border:1.5px solid rgba(255,255,255,0.35);background:rgba(211,47,47,0.75);box-shadow:0 4px 16px rgba(229,57,53,0.4),inset 0 1px 0 rgba(255,255,255,0.25);color:#fff;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:border-color .25s ease,box-shadow .25s ease,transform .15s ease;z-index:20;-webkit-tap-highlight-color:transparent} .iframe-ext-close:hover{border-color:rgba(255,255,255,0.55);box-shadow:0 4px 20px rgba(211,47,47,0.4),inset 0 1px 0 rgba(255,255,255,0.3)} .iframe-ext-close:active{transform:scale(0.93)} .iframe-ext-close svg{width:22px;height:22px} .iframe-wrapper{width:100%;position:relative;min-height:480px} .activity-iframe{width:100%;height:540px;border:none;border-radius:var(--rad-md);background:#fff;display:block;opacity:0;transition:opacity 0.3s} .activity-iframe.iframe-loaded{opacity:1} .rujukan-wrapper{width:100%;min-height:0;display:flex;flex-direction:column} .modal-header-action{display:flex;align-items:center;gap:8px;flex-shrink:0} .modal-header-action:empty{display:none} .rujukan-open{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--clr-text-dim);text-decoration:none;padding:5px 12px;border:1px solid var(--clr-modal-border);border-radius:100px;white-space:nowrap;transition:color 0.15s,border-color 0.15s} .rujukan-open svg{width:13px;height:13px;flex:none} .rujukan-open:hover{color:var(--clr-text);border-color:var(--clr-accent-light)} .rujukan-stage{position:relative;flex:1 1 auto;min-height:320px;border-radius:var(--rad-md);overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center} .rujukan-frame{position:absolute;inset:0;width:100%;height:100%;border:none;background:#fff} .rujukan-image{max-width:100%;max-height:100%;object-fit:contain;display:block} .rujukan-empty{margin:auto;padding:40px 20px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:var(--clr-text-dim);font-size:13px} .rujukan-empty svg{width:48px;height:48px;opacity:0.6;margin-bottom:6px} .rujukan-empty-title{font-size:16px;font-weight:700;color:var(--clr-text)} @media (max-width:520px){.modal-header-action{gap:6px} .rujukan-open{padding:4px 9px;font-size:11px} .rujukan-stage{min-height:240px}} .iframe-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate;background:radial-gradient(120% 90% at 50% 0%,#232342 0%,transparent 60%),linear-gradient(160deg,#141426 0%,#1a1a2e 52%,#101020 100%);color:var(--clr-text);font-size:13px;--ifl-accent:var(--clr-accent-light);--ifl-accent-soft:rgba(109,174,232,0.38)} .ifl-game{--ifl-accent:#b06cf0;--ifl-accent-soft:rgba(142,36,170,0.45)} .ifl-interactive{--ifl-accent:#ffab4d;--ifl-accent-soft:rgba(251,140,0,0.40)} .ifl-3d{--ifl-accent:#7d8bf5;--ifl-accent-soft:rgba(57,73,171,0.45)} .ifl-spotlight{position:absolute;width:70vmin;height:70vmin;left:50%;top:50%;margin:-35vmin 0 0 -35vmin;border-radius:50%;background:radial-gradient(circle,var(--ifl-accent-soft) 0%,transparent 65%);filter:blur(24px);opacity:0.75;animation:ifl-drift 9s ease-in-out infinite alternate;pointer-events:none} .ifl-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:18px;padding:24px;max-width:92%;text-align:center} .ifl-title{margin:0;font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(26px,5.4vw,58px);line-height:1.08;letter-spacing:-0.015em;text-wrap:balance;color:#fff} .ifl-word{display:inline-block;margin:0 0.24em;white-space:nowrap} .ifl-letter{display:inline-block;transform-origin:50% 80%;backface-visibility:hidden;animation:ifl-letter-in 0.62s cubic-bezier(0.2,0.9,0.25,1) both,ifl-letter-wave 3.2s ease-in-out infinite;animation-delay:calc(var(--i,0) * 34ms),calc(700ms + var(--i,0) * 62ms)} .ifl-badge{font-size:12px;letter-spacing:0.08em;text-transform:none;padding:6px 15px;box-shadow:0 6px 22px -6px var(--ifl-accent-soft),inset 0 1px 0 rgba(255,255,255,0.28);animation:ifl-badge-in 0.5s cubic-bezier(0.2,0.9,0.25,1) 0.34s both} @keyframes ifl-letter-in{from{opacity:0;transform:translateY(0.45em) rotateX(-72deg);filter:blur(4px)} to{opacity:1;transform:none;filter:blur(0)}} @keyframes ifl-letter-wave{0%,100%{transform:translateY(0);color:#fff} 50%{transform:translateY(-0.06em);color:var(--ifl-accent)}} @keyframes ifl-badge-in{from{opacity:0;transform:translateY(8px) scale(0.92)} to{opacity:1;transform:none}} @keyframes ifl-drift{from{transform:translate3d(-6%,-4%,0) scale(0.95)} to{transform:translate3d(6%,5%,0) scale(1.08)}} @media (prefers-reduced-motion:reduce){.ifl-spotlight,.ifl-letter,.ifl-badge{animation:none}} .spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,0.12);border-top-color:var(--clr-accent-light);border-radius:50%;animation:spin 0.7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .iframe-error{color:#e57373;font-size:13px;text-align:center;line-height:1.6} .iframe-error code{font-size:11px;background:rgba(255,255,255,0.06);padding:2px 6px;border-radius:3px} .media-fallback{font-size:12px;color:var(--clr-text-dim);margin-top:8px;text-align:center} .media-unknown{color:var(--clr-text-dim);font-size:13px;text-align:center;padding:40px 20px;line-height:1.7} .media-unknown code{font-size:11px;background:rgba(255,255,255,0.06);padding:2px 6px;border-radius:3px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}:focus-visible{outline:2px solid var(--clr-accent-light);outline-offset:2px} #modalBody{scroll-behavior:smooth} .type-chooser{background:var(--clr-accent)} .chooser-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;width:100%;padding:8px 0} .chooser-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 16px 20px;border:2px solid var(--clr-modal-border);border-radius:var(--rad-lg,12px);background:rgba(255,255,255,0.04);color:var(--clr-text);cursor:pointer;transition:transform 0.18s ease,border-color 0.18s,box-shadow 0.18s,background 0.18s} .chooser-card:hover{transform:translateY(-4px);border-color:var(--clr-accent);box-shadow:0 8px 24px rgba(0,0,0,0.25);background:rgba(255,255,255,0.08)} .chooser-card:active{transform:translateY(-1px) scale(0.98)} .chooser-type-video:hover{border-color:var(--clr-hs-video)} .chooser-type-audio:hover{border-color:var(--clr-hs-audio)} .chooser-type-interactive:hover{border-color:var(--clr-hs-interactive)} .chooser-type-game:hover{border-color:var(--clr-hs-game)} .chooser-type-song:hover{border-color:var(--clr-hs-song)} .chooser-type-tracks:hover{border-color:var(--clr-hs-tracks)} .chooser-type-animation:hover{border-color:var(--clr-hs-animation)} .chooser-type-3d:hover{border-color:var(--clr-hs-3d)} .chooser-type-pdf:hover{border-color:var(--clr-hs-pdf)} .chooser-type-exam:hover{border-color:var(--clr-hs-exam)} .chooser-type-slide:hover{border-color:var(--clr-hs-slide)} .chooser-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center} .chooser-icon svg{width:56px;height:56px} .chooser-type-video .chooser-icon{color:var(--clr-hs-video)} .chooser-type-audio .chooser-icon{color:var(--clr-hs-audio)} .chooser-type-interactive .chooser-icon{color:var(--clr-hs-interactive)} .chooser-type-game .chooser-icon{color:var(--clr-hs-game)} .chooser-type-song .chooser-icon{color:var(--clr-hs-song)} .chooser-type-tracks .chooser-icon{color:var(--clr-hs-tracks)} .chooser-type-animation .chooser-icon{color:var(--clr-hs-animation)} .chooser-type-3d .chooser-icon{color:var(--clr-hs-3d)} .chooser-type-pdf .chooser-icon{color:var(--clr-hs-pdf)} .chooser-type-exam .chooser-icon{color:var(--clr-hs-exam)} .chooser-type-slide .chooser-icon{color:var(--clr-hs-slide)} .chooser-label{font-size:14px;font-weight:600;text-align:center;line-height:1.3} .chooser-badge{font-size:10px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:2px 8px;border-radius:100px;color:#fff} [data-theme="light"] .chooser-card{background:rgba(0,0,0,0.02)} [data-theme="light"] .chooser-card:hover{background:rgba(0,0,0,0.04);box-shadow:0 8px 24px rgba(0,0,0,0.1)} .side-menu{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:800;font-family:'Poppins','Noto Sans Tamil','Hind Madurai','Segoe UI',sans-serif} .side-menu-toggle{position:absolute;left:0;top:50%;transform:translateY(-50%);width:22px;height:44px;background:rgba(77,124,15,0.85);border:none;border-radius:0 7px 7px 0;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:2px 2px 8px rgba(0,0,0,0.25);transition:background 0.2s,width 0.2s;z-index:802;-webkit-tap-highlight-color:transparent} .side-menu-toggle svg{width:12px;height:12px} .side-menu-toggle:hover{background:rgba(77,124,15,1);width:26px} .side-menu.open .side-menu-toggle{display:none} .side-menu-toggle[hidden]{display:none} .side-menu-panel{position:absolute;left:-320px;top:50%;transform:translateY(-50%);width:300px;max-height:80vh;background:var(--clr-surface,#1e1e1e);border-radius:0 16px 16px 0;box-shadow:4px 0 24px rgba(0,0,0,0.4);display:flex;flex-direction:column;transition:left 0.3s cubic-bezier(0.4,0,0.2,1);overflow:hidden} .side-menu.open .side-menu-panel{left:0} .side-menu.open{z-index:803} .side-menu-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:rgba(77,124,15,0.18);border-bottom:1px solid rgba(255,255,255,0.08);flex-shrink:0} .side-menu-header span{font-weight:700;font-size:14px;color:var(--clr-text,#eee)} .side-menu-close{background:none;border:none;color:var(--clr-text,#eee);font-size:22px;cursor:pointer;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background 0.15s;-webkit-tap-highlight-color:transparent} .side-menu-close:hover{background:rgba(255,255,255,0.1)} .side-menu-list{overflow-y:auto;flex:1;padding:8px 0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .side-menu-list::-webkit-scrollbar{width:4px} .side-menu-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:2px} .smenu-group{padding:10px 16px 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:rgba(163,230,53,0.95)} .smenu-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;border:none;background:none;width:100%;text-align:left;color:var(--clr-text,#eee);font-family:inherit;font-size:13px;transition:background 0.15s;-webkit-tap-highlight-color:transparent} .smenu-item:hover{background:rgba(255,255,255,0.06)} .smenu-item:active{background:rgba(233,30,99,0.15)} .smenu-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .smenu-icon svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .smenu-icon.type-video{background:var(--clr-hs-video)} .smenu-icon.type-audio{background:var(--clr-hs-audio)} .smenu-icon.type-interactive{background:var(--clr-hs-interactive)} .smenu-icon.type-game{background:var(--clr-hs-game)} .smenu-icon.type-song{background:var(--clr-hs-song)} .smenu-icon.type-tracks{background:var(--clr-hs-tracks)} .smenu-icon.type-animation{background:var(--clr-hs-animation)} .smenu-icon.type-3d{background:var(--clr-hs-3d)} .smenu-icon.type-pdf{background:var(--clr-hs-pdf)} .smenu-icon.type-exam{background:var(--clr-hs-exam)} .smenu-icon.type-slide{background:var(--clr-hs-slide)} .smenu-icon.type-multiple{background:var(--clr-hs-multiple)} .smenu-label{flex:1;line-height:1.3;white-space:pre-line} .smenu-page{font-size:11px;color:rgba(255,255,255,0.35);flex-shrink:0} html.light-mode .side-menu-panel{background:#fff;box-shadow:4px 0 24px rgba(0,0,0,0.12)} html.light-mode .side-menu-header{background:rgba(77,124,15,0.12);border-bottom-color:rgba(0,0,0,0.08)} html.light-mode .side-menu-header span{color:#222} html.light-mode .side-menu-close{color:#333} html.light-mode .side-menu-close:hover{background:rgba(0,0,0,0.06)} html.light-mode .smenu-group{color:#3f6212} html.light-mode .smenu-item{color:#222} html.light-mode .smenu-item:hover{background:rgba(0,0,0,0.04)} html.light-mode .smenu-item:active{background:rgba(233,30,99,0.1)} html.light-mode .smenu-page{color:rgba(0,0,0,0.35)} html.light-mode .side-menu-list::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12)}:root{--side-tab-w:22px;--side-tab-w-hover:26px} .book-chooser{position:absolute;left:0;right:0;top:var(--titlebar-h);bottom:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:20px;background:none;font-family:'Poppins','Segoe UI',sans-serif;outline:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.3s ease-out,visibility 0s linear 0.3s} .book-chooser.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 0.25s ease-out,visibility 0s} .book-chooser.open .book-chooser-card{animation:chooser-pop 0.3s ease-out both} @keyframes chooser-pop{from{transform:scale(0.96);opacity:0} to{transform:scale(1);opacity:1}} .book-chooser-card{--glass-body-top:rgba(255,255,255,0.14);--glass-body-mid:rgba(255,255,255,0.075);--glass-body-low:rgba(255,255,255,0.035);--glass-gloss:rgba(255,255,255,0.16);--glass-spec:rgba(255,255,255,0.10);--glass-rim:rgba(255,255,255,0.34);--glass-border:rgba(255,255,255,0.16);--glass-edge:rgba(255,255,255,0.22);--glass-floor:rgba(0,0,0,0.34);--glass-cast:rgba(0,0,0,0.55);width:min(640px,100%);max-height:100%;overflow:auto;padding:42px 40px 46px;border-radius:24px;text-align:center;background:radial-gradient(120% 78% at 16% 4%,var(--glass-spec) 0%,rgba(255,255,255,0) 60%),linear-gradient(112deg,var(--glass-gloss) 0%,rgba(255,255,255,0) 46%),linear-gradient(180deg,var(--glass-body-top) 0%,var(--glass-body-mid) 54%,var(--glass-body-low) 100%);backdrop-filter:blur(14px) saturate(135%);-webkit-backdrop-filter:blur(14px) saturate(135%);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-rim),inset 1px 0 0 var(--glass-rim),inset 0 -1px 0 var(--glass-edge),inset 0 -30px 44px -32px var(--glass-floor),0 2px 3px rgba(0,0,0,0.18),0 18px 34px -14px var(--glass-cast),0 56px 90px -36px var(--glass-cast)} .book-chooser-title{margin:0 0 34px;font-size:28px;font-weight:700;letter-spacing:-0.01em;color:var(--clr-text,#f0eee8)} .book-chooser-title::after{content:'';display:block;width:36px;height:3px;margin:15px auto 0;border-radius:2px;background:var(--clr-accent,#3d85c8)} .book-chooser-choices{--book-w:230px;--book-h:calc(var(--book-w) * 4 / 3);--choice-gap:46px;--clash-in:calc(50% + var(--choice-gap) / 2 - var(--book-w) * 0.38);--book-enter:0.42s;--clash-dur:1.35s;--clash-ease:cubic-bezier(.17,.86,.28,1);--book-shadow:0 16px 22px rgba(0,0,0,0.55);--book-shadow-air:0 34px 34px rgba(0,0,0,0.42);--book-shadow-lift:0 30px 32px rgba(0,0,0,0.62);--spark-ray:rgba(255,255,255,0.95);position:relative;display:flex;flex-wrap:wrap;gap:var(--choice-gap);align-items:center;justify-content:center} .book-choice{--book-lean:8deg;flex:0 1 auto;min-width:0;max-width:100%;width:var(--book-w);display:flex;flex-direction:column;align-items:center;gap:20px;padding:0;border:none;background:none;border-radius:12px;cursor:pointer;font-family:inherit;color:var(--clr-text,#f0eee8);-webkit-tap-highlight-color:transparent} .book-choice-book{position:relative;display:block;width:100%;aspect-ratio:3 / 4;transform:perspective(1200px) rotateY(var(--book-lean));filter:drop-shadow(var(--book-shadow));transition:transform 0.4s cubic-bezier(.2,.8,.3,1),filter 0.4s ease} .book-choice:last-of-type{--book-lean:-8deg} .book-choice-book::before{content:'';position:absolute;top:1.3%;right:-4px;bottom:1.3%;width:5px;border-radius:0 2px 2px 0;background:repeating-linear-gradient(to right,#fdfaf3 0 1px,#c9c0af 1px 2px);box-shadow:1px 0 3px rgba(0,0,0,0.35)} .book-choice-cover{position:absolute;inset:0;border-radius:3px 6px 6px 3px;overflow:hidden;background:#f4f1ea} .book-choice-cover img{display:block;width:100%;height:100%;object-fit:cover} .book-choice-cover::before{content:'';position:absolute;inset:0 auto 0 0;width:7%;background:linear-gradient(to right,rgba(0,0,0,0.46) 0%,rgba(0,0,0,0.22) 38%,rgba(255,255,255,0.16) 66%,rgba(0,0,0,0) 100%)} .book-choice-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(112deg,rgba(255,255,255,0.22) 0%,rgba(255,255,255,0.06) 26%,rgba(255,255,255,0) 44%,rgba(0,0,0,0.07) 100%)} .book-choice:hover .book-choice-book{transform:perspective(1200px) rotateY(0deg) translateY(-12px) scale(1.06);filter:drop-shadow(var(--book-shadow-lift))} .book-choice:active .book-choice-book{transform:perspective(1200px) rotateY(0deg) translateY(-4px) scale(1.01)} .book-choice:focus-visible{outline:3px solid var(--clr-accent,#3d85c8);outline-offset:4px} .book-choice-label{font-size:17px;font-weight:600;letter-spacing:0.1px;white-space:nowrap;opacity:0;transition:opacity 0.22s ease-out} .book-choice:hover .book-choice-label,.book-choice:focus-visible .book-choice-label{opacity:1} @media (hover:none){.book-choice-label{opacity:1}} @keyframes clash-out-left{0%{opacity:0;visibility:hidden;transform:translateX(var(--clash-in)) translateY(16px) rotate(-4deg)} 20%,38%{opacity:1;transform:translateX(var(--clash-in)) rotate(-4deg)} 64%{opacity:1;transform:translateX(-16px) translateY(-10px) rotate(1.6deg)} 82%{opacity:1;transform:translateX(5px) translateY(3px) rotate(-0.6deg)} 100%{opacity:1;transform:none}} @keyframes clash-out-right{0%{opacity:0;visibility:hidden;transform:translateX(calc(-1 * var(--clash-in))) translateY(16px) rotate(4deg)} 20%,38%{opacity:1;transform:translateX(calc(-1 * var(--clash-in))) rotate(4deg)} 64%{opacity:1;transform:translateX(16px) translateY(-10px) rotate(-1.6deg)} 82%{opacity:1;transform:translateX(-5px) translateY(3px) rotate(0.6deg)} 100%{opacity:1;transform:none}} @keyframes clash-shadow{0%,38%{filter:drop-shadow(var(--book-shadow))} 64%{filter:drop-shadow(var(--book-shadow-air))} 100%{filter:drop-shadow(var(--book-shadow))}} @keyframes spark-burst{0%,36%{opacity:0;transform:scale(0.25)} 40%{opacity:1;transform:scale(1)} 52%{opacity:0.5;transform:scale(1.35)} 72%{opacity:0;transform:scale(1.9)} 100%{opacity:0;transform:scale(1.9)}} .book-chooser.open .book-choice:first-of-type{animation:clash-out-left var(--clash-dur) var(--book-enter) var(--clash-ease) backwards} .book-chooser.open .book-choice:last-of-type{animation:clash-out-right var(--clash-dur) var(--book-enter) var(--clash-ease) backwards} .book-chooser.open .book-choice-book{animation:clash-shadow var(--clash-dur) var(--book-enter) var(--clash-ease) backwards} .book-choice-spark{position:absolute;left:50%;top:calc(var(--book-h) / 2);width:calc(var(--book-w) * 0.95);height:calc(var(--book-w) * 0.95);margin:calc(var(--book-w) * -0.475) 0 0 calc(var(--book-w) * -0.475);border-radius:50%;opacity:0;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,0.98) 0%,rgba(140,190,236,0.80) 20%,rgba(61,133,200,0.30) 44%,rgba(61,133,200,0) 70%)} .book-choice-spark::before{content:'';position:absolute;inset:24%;background:linear-gradient(to right,transparent 48.4%,var(--spark-ray) 50%,transparent 51.6%),linear-gradient(to bottom,transparent 48.4%,var(--spark-ray) 50%,transparent 51.6%)} .book-chooser.open .book-choice-spark{animation:spark-burst var(--clash-dur) var(--book-enter) ease-out backwards} html.light-mode .book-chooser-card{--glass-body-top:rgba(255,255,255,0.82);--glass-body-mid:rgba(230,236,250,0.72);--glass-body-low:rgba(214,224,244,0.66);--glass-gloss:rgba(255,255,255,0.85);--glass-spec:rgba(255,255,255,0.95);--glass-rim:rgba(255,255,255,0.98);--glass-border:rgba(126,146,184,0.42);--glass-edge:rgba(255,255,255,0.95);--glass-floor:rgba(90,110,160,0.16);--glass-cast:rgba(31,45,80,0.22)} html.light-mode .book-chooser-title{color:#1a1a2e} html.light-mode .book-chooser-choices{--book-shadow:0 14px 20px rgba(15,23,42,0.28);--book-shadow-air:0 30px 30px rgba(15,23,42,0.20);--book-shadow-lift:0 26px 28px rgba(15,23,42,0.32);--spark-ray:rgba(61,133,200,0.90)} html.light-mode .book-choice{color:#1f1f2e} body.book-choosing #bookContainer,body.book-choosing #sideMenu,body.book-choosing #bookSwitch{pointer-events:none} body.book-choosing #bookContainer{visibility:hidden} body.book-choosing #sideMenu,body.book-choosing #bookSwitch{opacity:0.3;filter:grayscale(0.7)} @media (max-width:620px){.book-chooser-card{padding:26px 20px 28px;border-radius:20px} .book-chooser-title{font-size:22px;margin-bottom:24px} .book-chooser-choices{--book-w:158px;--choice-gap:30px} .book-choice{gap:14px} .book-choice-label{font-size:15px}} @media (orientation:landscape) and (max-height:520px){.book-chooser-card{padding:20px 24px 22px} .book-chooser-title{margin-bottom:20px;font-size:21px} .book-chooser-choices{--book-w:128px;--choice-gap:26px} .book-choice{gap:12px} .book-choice-label{font-size:14px}} .book-switch{position:fixed;left:0;bottom:calc(50% + 34px);z-index:801;transform:translateX(-105%);transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);font-family:'Poppins','Noto Sans Tamil','Hind Madurai','Segoe UI',sans-serif;pointer-events:none} .book-switch.is-ready{transform:translateX(0);pointer-events:auto} .book-switch-btn{display:flex;flex-direction:column;align-items:center;gap:9px;width:var(--side-tab-w);padding:14px 0;border:none;border-radius:0 10px 10px 0;cursor:pointer;color:#3b2f1b;background:#f4e6c8;box-shadow:3px 2px 14px rgba(0,0,0,0.34);transition:background 0.2s,width 0.2s;-webkit-tap-highlight-color:transparent} .book-switch-btn:hover{background:#faf0dc;width:var(--side-tab-w-hover)} .book-switch-btn:active{background:#e8d6b0} .book-switch-label{writing-mode:vertical-rl;text-orientation:mixed;font-size:11px;font-weight:600;letter-spacing:0.4px;line-height:1;white-space:nowrap} html.light-mode .book-switch-btn{background:#f4e6c8;box-shadow:3px 2px 14px rgba(0,0,0,0.18)} html.light-mode .book-switch-btn:hover{background:#faf0dc} .fa-player{--fa-green:#4d7c0f;--fa-green-hover:#3f6212;--fa-green-text:#3f6212;--fa-green-soft:#eef7d9;--fa-ink:#1f2410;--fa-ink-dim:#63694f;--fa-surface:#ffffff;--fa-surface-2:#f7faef;--fa-track:#e3efca;--fa-border:rgba(34,42,16,0.10);--fa-hover:rgba(34,42,16,0.05);--fa-shadow:0 18px 42px rgba(10,22,40,0.22),0 2px 6px rgba(10,22,40,0.10);--fa-play-shadow:0 7px 16px rgba(77,124,15,0.32);position:fixed;left:0;top:0;z-index:990;width:316px;max-width:calc(100vw - 16px);padding:14px 16px 16px;border-radius:20px;border:1px solid var(--fa-border);background:var(--fa-surface);color:var(--fa-ink);box-shadow:var(--fa-shadow);font-family:inherit;display:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent} .fa-player.is-open{display:block} html:not(.light-mode) .fa-player{--fa-green:#65a30d;--fa-green-hover:#7cb342;--fa-green-text:#bef264;--fa-green-soft:rgba(101,163,13,0.18);--fa-ink:#f2f5e6;--fa-ink-dim:#a6b8b0;--fa-surface:#2a2a2a;--fa-surface-2:#373737;--fa-track:#37411f;--fa-border:rgba(255,255,255,0.12);--fa-hover:rgba(255,255,255,0.06);--fa-shadow:0 18px 44px rgba(0,0,0,0.55),0 2px 8px rgba(0,0,0,0.35);--fa-play-shadow:0 7px 18px rgba(0,0,0,0.45)} .fa-head{display:flex;align-items:center;gap:12px;cursor:grab;touch-action:none} .fa-player.is-dragging .fa-head{cursor:grabbing} .fa-badge{flex:0 0 auto;width:44px;height:44px;border-radius:14px;background:var(--clr-hs-audio,var(--clr-accent));color:#ffffff;display:flex;align-items:center;justify-content:center} .fa-badge svg{width:22px;height:22px} .fa-badge.type-audio{background:var(--clr-hs-audio,var(--clr-accent))} .fa-badge.type-tracks{background:var(--clr-hs-tracks,var(--clr-accent))} .fa-badge.type-song{background:var(--clr-hs-song,var(--clr-accent))} .fa-titles{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px} .fa-title{font-size:15px;font-weight:800;line-height:1.25;color:var(--fa-ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .fa-sub{font-size:12.5px;font-weight:600;color:var(--fa-ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fa-sub:empty{display:none} .fa-head-btns{display:flex;align-items:center;gap:2px;align-self:flex-start} .fa-icon-btn{width:28px;height:28px;padding:0;border:0;border-radius:8px;background:none;color:var(--fa-ink-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s,color 0.15s} .fa-icon-btn svg{width:16px;height:16px} .fa-icon-btn:hover{background:var(--fa-hover);color:var(--fa-ink)} .fa-icon-restore{display:none} .fa-player.is-list,.fa-player.is-song{width:336px} .fa-now{display:none;margin:10px 2px 0;font-size:12.5px;font-weight:700;color:var(--fa-green-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fa-player.is-list .fa-now,.fa-player.is-song .fa-now{display:block} .fa-playlist{display:none} .fa-player.is-list .fa-playlist{display:flex;flex-direction:column;gap:2px;margin:8px 0 2px;max-height:132px;overflow-y:auto;overscroll-behavior:contain} .fa-playlist::-webkit-scrollbar{width:4px} .fa-playlist::-webkit-scrollbar-thumb{background:var(--fa-track);border-radius:2px} .fa-track{display:flex;align-items:center;gap:8px;padding:6px 8px;border:0;border-radius:8px;background:transparent;color:var(--fa-ink-dim);font:inherit;font-size:12.5px;text-align:left;cursor:pointer;transition:background 0.15s,color 0.15s} .fa-track:hover{background:var(--fa-hover);color:var(--fa-ink)} .fa-track.active{background:var(--fa-green-soft);color:var(--fa-green-text);font-weight:700} .fa-track-no{width:16px;flex-shrink:0;text-align:right;font-variant-numeric:tabular-nums;opacity:0.85} .fa-track-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fa-lyric{display:none} .fa-player.is-song .fa-lyric{display:-webkit-box;margin:10px 2px 0;min-height:17px;font-size:12.5px;font-weight:700;line-height:1.35;color:var(--fa-ink);overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical} .fa-player.is-song .fa-lyric:not(.has-line){visibility:hidden} .fa-modes{display:none} .fa-player.is-song .fa-modes{display:flex;gap:6px;margin-top:8px} .fa-mode{padding:4px 10px;border:1px solid var(--fa-border);border-radius:999px;background:transparent;color:var(--fa-green-text);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer} .fa-mode:hover{border-color:var(--fa-green)} .fa-mode.active{background:var(--fa-green-soft);border-color:var(--fa-green);color:var(--fa-green-text)} .fa-seek{display:grid;grid-template-columns:28px minmax(0,1fr) 28px;align-items:center;gap:8px;margin-top:12px} .fa-cur,.fa-tot{font-size:11.5px;font-weight:700;color:var(--fa-ink-dim);font-variant-numeric:tabular-nums;letter-spacing:0.01em;white-space:nowrap} .fa-tot{text-align:right} .fa-range{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:8px;margin:0;border-radius:999px;background:transparent;outline:none;cursor:pointer} .fa-range::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--fa-green) var(--fa-fill,0%),var(--fa-track) var(--fa-fill,0%))} .fa-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-5px;border-radius:50%;background:var(--fa-green);border:3px solid #ffffff;box-shadow:0 2px 6px rgba(10,22,40,0.28)} .fa-range::-moz-range-track{height:8px;border-radius:999px;background:var(--fa-track)} .fa-range::-moz-range-progress{height:8px;border-radius:999px;background:var(--fa-green)} .fa-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--fa-green);border:3px solid #ffffff;box-shadow:0 2px 6px rgba(10,22,40,0.28)} .fa-controls{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 0 0} .fa-play{width:46px;height:46px;padding:0;border:0;border-radius:12px;background:var(--fa-green);color:#ffffff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--fa-play-shadow);transition:background 0.18s,transform 0.12s,box-shadow 0.18s} .fa-play svg{width:22px;height:22px} .fa-play:hover{background:var(--fa-green-hover);box-shadow:var(--fa-play-shadow)} .fa-play:active{transform:scale(0.95)} .fa-ctrl{width:42px;height:42px;padding:0;border:1px solid var(--fa-track);border-radius:12px;background:var(--fa-green-soft);color:var(--fa-green-text);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s,border-color 0.15s,color 0.15s} .fa-restart svg{width:19px;height:19px} .fa-vol-btn svg{width:20px;height:20px} .fa-ctrl:hover{background:var(--fa-green-soft);border-color:var(--fa-green)} .fa-vol-btn{width:34px;height:34px;border:0;background:none} .fa-vol-btn:hover{background:none;border-color:transparent;color:var(--fa-green)} .fa-vol-btn.is-muted{color:var(--fa-green-text)} .fa-vol{display:flex;align-items:center;gap:5px;flex:1 1 auto;min-width:0} .fa-vol-range{-webkit-appearance:none;appearance:none;flex:1;min-width:44px;max-width:84px;height:6px;border-radius:3px;background:linear-gradient(to right,var(--fa-green) var(--fa-vol-fill,100%),var(--fa-track) 0);cursor:pointer;margin:0;transition:opacity 0.15s} .fa-vol-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--fa-green);border:2px solid #ffffff;box-shadow:0 1px 3px rgba(16,24,40,0.35);cursor:pointer} .fa-vol-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--fa-green);border:2px solid #ffffff;cursor:pointer} .fa-vol-range::-moz-range-track{background:transparent} .fa-vol-pct{flex-shrink:0;min-width:32px;font-size:11.5px;font-weight:700;color:var(--fa-green-text);font-variant-numeric:tabular-nums;text-align:right} .fa-vol-pct.is-muted{color:var(--fa-ink-dim)} .fa-player button:focus-visible,.fa-player input:focus-visible{outline:2px solid var(--fa-green);outline-offset:2px} .fa-eq{display:none} .fa-player.has-eq .fa-eq{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:30px;margin-top:12px;padding:0 6px} .fa-player.has-eq .fa-eq + .fa-seek{margin-top:8px} .fa-eq-bar{flex:1 1 0;max-width:5px;min-height:3px;height:100%;border-radius:2px;background:linear-gradient(to top,var(--fa-green-hover),var(--fa-green));transform-origin:bottom center;transform:scaleY(0.16);transition:transform 0.35s ease} .fa-player.has-eq .fa-eq-bar:nth-child(3n){transform:scaleY(0.34)} .fa-player.has-eq .fa-eq-bar:nth-child(4n + 1){transform:scaleY(0.22)} .fa-player.is-playing .fa-eq-bar{transform:none;animation:fa-eq-pulse 0.85s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -0.08s)} .fa-player.has-live-eq.is-playing .fa-eq-bar{animation:none} @keyframes fa-eq-pulse{0%{transform:scaleY(0.14)} 50%{transform:scaleY(0.72)} 100%{transform:scaleY(1)}} .fa-player.is-min{width:238px;padding:10px 12px 12px} .fa-player.is-min .fa-head{gap:10px} .fa-player.is-min .fa-badge{width:34px;height:34px;border-radius:11px} .fa-player.is-min .fa-badge svg{width:18px;height:18px} .fa-player.is-min .fa-title{-webkit-line-clamp:1;font-size:13.5px} .fa-player.is-min .fa-sub{display:none} .fa-player.is-min .fa-icon-min{display:none} .fa-player.is-min .fa-icon-restore{display:block} .fa-player.is-min .fa-seek,.fa-player.is-min .fa-restart,.fa-player.is-min .fa-vol,.fa-player.is-min .fa-now,.fa-player.is-min .fa-playlist,.fa-player.is-min .fa-lyric,.fa-player.is-min .fa-modes,.fa-player.is-min .fa-eq{display:none} .fa-player.is-min .fa-controls{padding:10px 0 0;justify-content:flex-start} .fa-player.is-min .fa-play{width:38px;height:38px;box-shadow:0 4px 12px rgba(0,0,0,0.24)} .fa-player.is-min .fa-play svg{width:18px;height:18px} @media (max-width:480px){.fa-player{width:280px;border-radius:18px;padding:12px 14px 14px} .fa-play{width:44px;height:44px} .fa-play svg{width:20px;height:20px} .fa-ctrl{width:40px;height:40px} .fa-vol-range{max-width:64px}} @media (prefers-reduced-motion:reduce){.fa-player,.fa-play,.fa-icon-btn{transition:none} .fa-player.is-playing .fa-eq-bar{animation:none;transform:scaleY(0.5)}} .chooser-badge.type-audio-float,.chooser-badge.type-audio-float-2,.chooser-badge.type-tracks-float,.chooser-badge.type-tracks-float-2{background:var(--clr-hs-audio,var(--clr-accent));color:#ffffff} .chooser-badge.type-song-float{background:var(--clr-hs-song,var(--clr-accent));color:#ffffff} .smenu-icon.type-audio-float,.smenu-icon.type-audio-float-2{background:var(--clr-hs-audio,var(--clr-accent))} .smenu-icon.type-tracks-float,.smenu-icon.type-tracks-float-2{background:var(--clr-hs-tracks,var(--clr-accent))} .smenu-icon.type-song-float{background:var(--clr-hs-song,var(--clr-accent))}