html,body,#root{background-color:#000;width:100vw;height:100vh;margin:0;padding:0;display:flex;overflow:hidden}.app-container{background:#000;flex:1;justify-content:center;align-items:center;display:flex;position:relative}.image-viewport{background:#000;justify-content:center;align-items:center;width:min(100vw,156.25vh);height:min(100vh,64vw);display:flex;position:relative}.main-img{object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%}.frame-overlay{object-fit:fill;pointer-events:none;z-index:10;width:100%;height:100%;position:absolute;inset:0}.ui-layer{pointer-events:none;z-index:100;transition:opacity .3s;position:absolute;inset:0}.btn-open-book,.nav-btn,.dot,.menu-btn,.save-btn,.sidebar,.audio-ui,.sticker-outer,.sticker-tools,.sidebar-tabs button{pointer-events:auto}.btn-open-book{cursor:pointer;z-index:20;background:0 0;border:none;padding:0;transition:transform .2s;position:absolute;transform:translate(-50%,-50%)}.btn-open-book img{filter:drop-shadow(0 4px 8px #0000004d);width:100%;height:auto;display:block}.btn-open-book:hover{transform:translate(-50%,-50%)scale(1.05)}.btn-open-book:active{transform:translate(-50%,-50%)scale(.95)}.nav-btn{cursor:pointer;z-index:100;width:3.2vw;height:3.2vw;box-shadow:none;background:0 0;border:none;justify-content:center;align-items:center;padding:0;transition:transform .2s;display:flex;position:absolute;bottom:5%}.nav-btn img{object-fit:contain;filter:drop-shadow(0 4px 8px #0000004d);width:100%;height:100%;display:block}.nav-btn.prev img{transform:scaleX(-1)}.nav-btn:hover{transform:scale(1.1)}.nav-btn:active{transform:scale(.9)}.nav-btn.prev{left:5%}.nav-btn.play{right:5%}.prev{left:5%}.play{right:5%}.step-dots{gap:15px;display:flex;position:absolute;bottom:1.5%;left:50%;transform:translate(-50%)}.dot{cursor:pointer;border:2px solid #fff;border-radius:50%;width:12px;height:12px}.dot.active{background:#fff;box-shadow:0 0 10px #fff}.btn-on-frame{cursor:pointer;z-index:80;background:0 0;border:none;padding:0;transition:transform .2s cubic-bezier(.175,.885,.32,1.275);position:absolute;transform:translate(-50%,-50%)}.btn-on-frame img{filter:drop-shadow(0 6px 12px #0006);width:100%;height:auto;display:block;transform:rotate(6.6deg)}.btn-on-frame:hover{transform:translate(-50%,-50%)scale(1.1)}.btn-on-frame:active{transform:translate(-50%,-50%)scale(.95)}.sidebar{color:#fff;z-index:1000;box-sizing:border-box;background:#0a0a0afa;border-right:1px solid #333;flex-direction:column;width:280px;height:100%;padding:25px 15px;transition:all .3s;display:flex;position:fixed;top:0;left:-300px;overflow-x:hidden}.sidebar.active{left:0}.sidebar-header{border-bottom:1px solid #222;flex-shrink:0;justify-content:space-between;align-items:center;margin-bottom:25px;padding-bottom:15px;display:flex}.sidebar-header h3{margin:0;font-size:1.5rem}.close-side-x{color:#888;cursor:pointer;background:0 0;border:none;padding:0 5px;font-size:2rem;line-height:1;transition:all .2s}.close-side-x:hover{color:#fff}.sidebar-tabs{flex-shrink:0;gap:5px;margin-bottom:20px;display:flex}.sidebar-tabs button{color:#888;cursor:pointer;background:#1a1a1a;border:1px solid #333;border-radius:5px;flex:1;padding:8px;font-size:.8rem}.sidebar-tabs button.active{color:#fff;background:#333;border-color:#555}.instruction-text{color:#fff;text-align:center;letter-spacing:1px;background:#ffffff1a;border-radius:4px;grid-column:span 2;margin:0 0 10px;padding:5px;font-size:.9rem}.sidebar-grid{box-sizing:border-box;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;display:grid;overflow-y:auto}.sidebar-grid img{aspect-ratio:1;cursor:pointer;box-sizing:border-box;object-fit:contain;background:#1a1a1a;border:1px solid #222;border-radius:10px;width:100%;padding:10px;transition:transform .2s}.text-grid-item{aspect-ratio:1;cursor:pointer;box-sizing:border-box;background:#1a1a1a;border:1px solid #222;border-radius:10px;justify-content:center;align-items:center;width:100%;padding:5px;transition:all .2s;display:flex}.text-grid-item:hover{background:#222;border-color:#4666f2}.text-grid-item span{color:#fff;text-align:center;font-size:10px}.main-text-display{color:#fff;text-align:center;word-wrap:break-word;text-shadow:2px 2px 10px #000c;z-index:60;pointer-events:none;line-height:1.2;position:absolute;transform:translate(-50%,-50%)}.sidebar-tabs button{flex:1;padding:8px 2px;font-size:.7rem}.category-wrapper-full{flex-direction:column;grid-column:span 2;width:100%;margin-bottom:20px;display:flex}.category-label-text{color:#fff;margin-bottom:10px;font-weight:700}.category-inner-grid{grid-template-columns:1fr 1fr;gap:10px;width:100%;display:grid}.category-box{aspect-ratio:1;cursor:pointer;box-sizing:border-box;background:#1a1a1a;border:2px solid #222;justify-content:center;align-items:center;width:100%;display:flex}.category-box.active{border-color:#4666f2}.category-box img{max-width:100%}.remove-frame-box{aspect-ratio:1;cursor:pointer;box-sizing:border-box;background:#1a1a1a;border:1px solid #222;border-radius:10px;justify-content:center;align-items:center;width:100%;display:flex}.remove-frame-box:hover{background:#222;border-color:#555}.remove-icon{border:3px solid #666;border-radius:50%;width:50%;height:50%;position:relative}.remove-icon:after{content:"";background:#666;width:100%;height:3px;position:absolute;top:50%;left:0;transform:translateY(-50%)rotate(-45deg)}.sticker-outer{z-index:50;cursor:grab;position:absolute;transform:translate(-50%,-50%)}.sticker-outer.active .sticker-content{outline-offset:5px;outline:2px dashed #0f0}.sticker-content img{pointer-events:none;width:150px;display:block}.sticker-tools{background:#fff;border-radius:8px;min-width:160px;padding:12px;position:absolute;bottom:120%;left:50%;transform:translate(-50%);box-shadow:0 5px 20px #00000080}.tool-row{color:#333;justify-content:space-between;align-items:center;margin-bottom:5px;font-size:11px;font-weight:700;display:flex}.tool-row input{width:90px}.del-btn{color:#fff;cursor:pointer;background:#f44;border:none;border-radius:4px;width:100%;padding:6px}.quiz-container{z-index:50;text-align:center;background:#0000004d;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.quiz-question{color:#fff;text-shadow:2px 2px 8px #000c;margin-bottom:40px;font-size:2.5rem}.quiz-options{gap:30px;display:flex}.quiz-btn{cursor:pointer;background:#fff;border:none;border-radius:50px;padding:15px 45px;font-size:1.5rem;font-weight:700;transition:all .2s}.quiz-btn:hover{background:#eee;transform:scale(1.1)}.correct-overlay{z-index:10000;color:#fff;background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.correct-content{text-align:center}.correct-content h1{color:#4f4;text-shadow:0 0 20px #44ff4480;margin-bottom:10px;font-size:3.5rem}.wrong-overlay{z-index:10000;color:#fff;text-align:center;background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.wrong-content h1{color:#f44;font-size:3rem}.slide-arrow-img{cursor:pointer;z-index:100;background:0 0;border:none;width:60px;height:auto;padding:0;transition:all .3s;position:absolute;top:50%;transform:translateY(-50%)}.slide-arrow-img img{filter:drop-shadow(0 5px 10px #0000004d);width:100%;height:auto;display:block}.slide-arrow-img:hover{transform:translateY(-50%)scale(1.1)}.slide-arrow-img.prev{left:5%}.slide-arrow-img.next{right:5%}.slideshow-container{justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden;transform:translateY(6%)}.slides-track{justify-content:center;align-items:center;width:35%;height:70%;display:flex;position:relative}.slide-item{cursor:pointer;width:100%;height:100%;transition:all .5s cubic-bezier(.4,0,.2,1);position:absolute}.slide-item img{object-fit:contain;width:100%;height:100%}.interactive-page{z-index:50;position:absolute;inset:0}.interactive-item{cursor:pointer;opacity:0;transition:opacity .1s ease-in-out;position:absolute;transform:translate(-50%,-50%)}.interactive-item:hover,.interactive-item.active{filter:drop-shadow(1px 3px 10px #fff);opacity:1;transform:translate(-50%,-50%)scale(1.1)}.interactive-item img{width:60px;height:auto}.zoom-toggle-btn{cursor:pointer;z-index:150;z-index:999;background:0 0;border:none;width:60px;padding:0;transition:transform .2s;position:absolute;top:50%;right:20px;transform:translateY(-50%)}.zoom-toggle-btn img{filter:drop-shadow(0 4px 10px #00000080);width:100%;height:auto;display:block}.zoom-toggle-btn:hover{transform:translateY(-50%)scale(1.1)}.zoom-popup-overlay{z-index:200;background:#000000e6;justify-content:center;align-items:center;animation:.3s ease-out fadeIn;display:flex;position:absolute;inset:0}.zoom-full-img{object-fit:contain;max-width:95%;max-height:95%;box-shadow:0 0 30px #000}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.right-sidebar{color:#fff;z-index:200;background:#0f0f0ffa;border-left:1px solid #333;flex-direction:column;width:100%;max-width:680px;height:100%;display:flex;position:absolute;top:0;right:0;box-shadow:-10px 0 30px #00000080}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.close-sidebar{color:#fff;cursor:pointer;z-index:10;background:0 0;border:none;font-size:1.5rem;position:absolute;top:15px;left:15px}.rotator-section{cursor:grab;background:#000;border-bottom:1px solid #222;flex-shrink:0;justify-content:center;align-items:center;width:100%;height:300px;display:flex;position:relative}.rotator-section:active{cursor:grabbing}.rotator-section img{object-fit:contain;max-width:100%;max-height:100%}.rotator-hint{color:#666;font-size:10px;position:absolute;bottom:10px}.sidebar-content-scroll{flex-grow:1;padding:25px;overflow-y:auto}.sidebar-content-scroll h2:first-child{margin-top:0;margin-bottom:15px;font-size:1.8rem}.sidebar-content-scroll::-webkit-scrollbar{width:6px}.sidebar-content-scroll::-webkit-scrollbar-thumb{background:#333;border-radius:10px}.layout-row{align-items:center;gap:20px;margin-bottom:25px;display:flex}.col-100{width:100%}.row-50-50 .col-50{flex:1}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.layout-row img{width:100%;height:auto;display:block}.layout-row p{color:#ddd;margin:0;font-size:1rem;line-height:1.6}.menu-btn{color:#fff;cursor:pointer;background:#0009;border:1px solid #ffffff4d;border-radius:5px;padding:10px 20px;font-weight:700;position:absolute;top:20px;left:20px}.save-btn{cursor:pointer;z-index:110;background:0 0;border:none;width:15vw;padding:0;transition:all .3s;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.save-btn img{filter:drop-shadow(0 4px 10px #0006);width:100%;height:auto;display:block}.save-btn:hover{transform:translate(-50%)scale(1.05)}.save-btn:active{transform:translate(-50%)scale(.95)}.sound-btn{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:40px;height:40px;padding:0;display:flex}.sound-btn img{object-fit:contain;width:100%;height:100%}.sound-btn:hover{transform:scale(1.1)}.audio-ui{z-index:1000;background:0 0;border-radius:30px;align-items:center;padding:10px;transition:opacity .3s;display:flex;position:fixed;top:20px;right:20px}.audio-ui button{color:#fff;cursor:pointer;background:0 0;border:none;font-size:1.2rem}.audio-ui input{width:60px;margin-left:10px}.loading-screen{color:#fff;z-index:10000;background:#000;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.loader{border:3px solid #333;border-top-color:#fff;border-radius:50%;width:40px;height:40px;margin-bottom:15px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.slide-item.visited img{filter:brightness(.3)grayscale(.4);border:1px solid #ffffff1a}.btn-finish-slide{cursor:pointer;z-index:1000;background:0 0;border:none;padding:0;position:absolute}.btn-finish-slide img{filter:drop-shadow(0 0 10px #ffffff80);width:100%;height:auto;display:block}.quiz-container-absolute{z-index:50;pointer-events:none;position:absolute;inset:0}.quiz-question-top{color:#fff;text-align:center;text-shadow:2px 2px 10px #000c;pointer-events:auto;width:80%;font-size:2.5rem;position:absolute;top:15%;left:50%;transform:translate(-50%)}.quiz-options-layer{width:100%;height:100%;position:relative}.quiz-img-btn{cursor:pointer;pointer-events:auto;background:0 0;border:none;padding:0;transition:transform .2s cubic-bezier(.175,.885,.32,1.275);position:absolute;transform:translate(-50%,-50%)}.quiz-img-btn img{filter:drop-shadow(0 5px 15px #0006);width:100%;height:auto;display:block}.quiz-img-btn:hover{transform:translate(-50%,-50%)scale(1.1)}.quiz-img-btn:active{transform:translate(-50%,-50%)scale(.95)}.nav-btn.prev.has-img{padding:0;transform:scaleX(-1);box-shadow:none!important;background:0 0!important;border:none!important}.nav-btn.prev.has-img img{filter:drop-shadow(0 4px 10px #fff);width:100%;height:auto;display:block}.nav-btn.prev.has-img:hover{transform:scale(-1.1,1.1)}