*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden}.flipbook-container{perspective:1200px;background:#0a0a0a;justify-content:center;align-items:center;width:100vw;height:100dvh;padding:20px;display:flex;overflow:hidden}.book-wrapper{flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:600px;height:100%;display:flex}.flipbook{aspect-ratio:1086/1448;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:pointer;width:auto;max-width:100%;height:calc(100dvh - 140px);position:relative}.page{backface-visibility:hidden;border-radius:4px;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.page img{object-fit:cover;pointer-events:none;-webkit-user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.page-bg{z-index:0}.page-top{z-index:2;transform-origin:0}.page-top.flipping-next{animation:flipNext var(--flip-duration) cubic-bezier(.25, .1, .25, 1) forwards}.page-top.flipping-prev{animation:flipPrev var(--flip-duration) cubic-bezier(.25, .1, .25, 1) forwards}.page-top.flipping-next .page-shine,.page-top.flipping-prev .page-shine{animation:shinePass var(--flip-duration) ease-in-out forwards}.page-shine{opacity:0;pointer-events:none;z-index:10;background:linear-gradient(120deg,#0000 15%,#ffffff4d 40%,#ffffff80 50%,#ffffff4d 60%,#0000 85%);width:100%;height:100%;position:absolute;top:0;left:0}@keyframes flipNext{0%{transform:rotateY(0)}50%{box-shadow:-10px 0 20px #0006}to{transform:rotateY(-180deg)}}@keyframes flipPrev{0%{transform:rotateY(-180deg)}50%{box-shadow:-10px 0 20px #0006}to{transform:rotateY(0)}}@keyframes shinePass{0%{opacity:0;transform:translate(-100%)skew(-10deg)}15%{opacity:1}85%{opacity:1}to{opacity:0;transform:translate(100%)skew(-10deg)}}.page-indicator{color:#888;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;background:#ffffff14;border-radius:20px;flex-shrink:0;margin-top:12px;padding:6px 16px;font-family:system-ui,sans-serif;font-size:14px}.nav-buttons{z-index:10;flex-shrink:0;gap:50px;margin-top:10px;display:flex}.nav-btn{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:all .3s;display:flex}.nav-btn svg{width:24px;height:24px}.nav-btn:hover:not(:disabled){background:#fff3}.nav-btn:active:not(:disabled){transform:scale(.9)}.nav-btn:disabled{opacity:.25;cursor:not-allowed}.flipbook-placeholder{text-align:center;color:#666;font-family:system-ui,sans-serif}.film-yt-btn{color:#fff;cursor:pointer;z-index:20;pointer-events:auto;white-space:nowrap;background:#c0392b;border-radius:24px;align-items:center;gap:8px;padding:8px 20px;font-family:system-ui,sans-serif;font-size:clamp(10px,2vw,14px);font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex;position:absolute;bottom:6%;left:50%;transform:translate(-50%);box-shadow:0 2px 12px #c0392b66}.film-yt-btn svg{flex-shrink:0;width:18px;height:18px}.film-yt-btn:hover{background:#e74c3c;transform:translate(-50%)scale(1.05);box-shadow:0 4px 15px #e74c3c80}.form-section-page{width:100%;height:100%;position:relative}.form-bg{object-fit:cover;z-index:0;width:100%;height:100%;position:absolute;top:0;left:0}.form-section-container{z-index:1;flex-direction:column;height:100%;margin-left:10px;padding:18% 10% 16%;display:flex;position:relative}.form-header{flex-shrink:0;justify-content:space-between;align-items:center;margin-bottom:3%;display:flex}.form-title{color:#1a3a5c;margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(18px,4vw,28px);font-weight:700}.form-progress{color:#e74c3c;background:#ffffffb3;border-radius:12px;padding:4px 12px;font-family:system-ui,sans-serif;font-size:clamp(11px,2vw,14px);font-weight:600}.form-fields{flex-direction:column;flex:1;gap:2%;display:flex;overflow-y:auto}.form-field-full{flex-direction:column;flex:1;gap:2px;display:flex}.form-field-full:last-child{flex:1.5}.form-label-full{color:#1a3a5c;font-family:Georgia,serif;font-size:clamp(13px,2.5vw,17px);font-weight:700}.form-input-full{color:#1a3a5c;background:#ffffff80;border:none;border-bottom:2px solid #92689c66;outline:none;flex:1;width:100%;height:100%;padding:8px 12px;font-family:Georgia,serif;font-size:clamp(14px,2.8vw,18px);transition:all .3s}.form-input-full::placeholder{color:#999;font-style:italic}.form-input-full:focus{background:#fffc;border-bottom-color:#e74c3c}.form-textarea-full{resize:none;line-height:1.4}.form-nav{flex-shrink:0;justify-content:space-between;align-items:center;gap:3%;margin-top:3%;display:flex}.form-btn{cursor:pointer;border:none;border-radius:20px;justify-content:center;align-items:center;padding:10px 24px;font-family:Georgia,serif;font-size:clamp(13px,2.5vw,16px);font-weight:600;transition:all .3s;display:flex}.form-prev-btn{color:#1a3a5c;background:#fff9;border:2px solid #92689c66}.form-prev-btn:hover:not(:disabled){background:#ffffffe6;border-color:#e74c3c}.form-prev-btn:disabled{opacity:.4;cursor:not-allowed}.form-prev-btn svg{width:18px;height:18px}.form-next-btn{color:#fff;background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%);flex:1;max-width:140px}.form-next-btn:hover{transform:scale(1.02);box-shadow:0 4px 15px #e74c3c66}.form-submit-btn{color:#fff;background:linear-gradient(135deg,#1a3a5c 0%,#2c5a8c 100%);flex:1;max-width:160px}.form-submit-btn:hover{transform:scale(1.02);box-shadow:0 4px 15px #1a3a5c66}.form-error-msg{color:#fff;white-space:nowrap;background:#e74c3c;border-radius:8px;padding:8px 16px;font-family:system-ui,sans-serif;font-size:clamp(11px,2vw,13px);position:absolute;bottom:10%;left:50%;transform:translate(-50%)}.form-fields::-webkit-scrollbar{width:3px}.form-fields::-webkit-scrollbar-track{background:0 0}.form-fields::-webkit-scrollbar-thumb{background:#e74c3c4d;border-radius:3px}@media (width<=768px){.flipbook-container{padding:0}.book-wrapper{justify-content:center;padding-top:0}.flipbook{aspect-ratio:1086/1448;border-radius:0;width:100vw;height:auto;max-height:calc(100dvh - 120px)}.page{border-radius:0}.page-indicator{margin-top:8px;padding:4px 12px;font-size:12px}.nav-buttons{gap:60px;margin-top:6px}.nav-btn{width:44px;height:44px}.nav-btn svg{width:22px;height:22px}.form-section-container{padding:18% 10% 16%}.form-header{margin-bottom:2%}.form-fields{gap:1.5%}.form-field-full{gap:1px}.form-label-full{font-size:clamp(12px,2.2vw,15px)}.form-input-full{padding:6px 10px;font-size:clamp(13px,2.5vw,16px)}.form-nav{margin-top:2%}.form-btn{padding:8px 18px;font-size:clamp(12px,2.2vw,14px)}}
