#book{perspective:75vw;width:50vw;height:70vh}#book:before{content:"";width:1%;height:100%;position:absolute;top:0;left:49%}.page{transform-origin:0%;z-index:5;cursor:pointer;text-align:center;background:radial-gradient(circle at 0 100%,#777,#ddd 70%);width:50%;height:100%;font-family:monospace;line-height:50vh;transition:z-index 10ms linear 1s,transform 2s linear;position:absolute;top:0;left:50%}.front,.back{text-align:center;opacity:0;width:100%;height:100%;font-family:monospace;line-height:50vh;transition:opacity .1s linear 1s;position:absolute;top:0;left:0}.front{opacity:1}.back{transform:scaleX(-1)}#book input{visibility:hidden}#book .page>label{z-index:99;width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;left:0}input:checked+.page{transform:rotateY(-180deg)}input:checked+.page .front{opacity:0}input:checked+.page .back{opacity:1}#five:checked+.page{z-index:5}#four:checked+.page{z-index:4}#three:checked+.page{z-index:3}#two:checked+.page{z-index:2}#one:checked+.page{z-index:1}#page1 .front{letter-spacing:2vh;text-align:right;color:#f0f;background:radial-gradient(circle at 70%,#000 50%,#222 40%);font-size:2vh;font-weight:900;line-height:50vh;animation:10s linear infinite cover}@keyframes cover{20%{color:#0f0}40%{color:#1e90ff}60%{color:gold}80%{color:#0ff}}#page1 .back{color:#fff;text-shadow:-10px 0 #f0f,10px 0 #0ff;background:#222;font-size:25vh;animation:3s linear infinite a}@keyframes a{45%{color:#fff}50%{color:#222}55%{color:#fff}}#page2 .front{background:#1e90ff;font-family:serif;font-size:25vh;font-weight:900;animation:10s linear infinite L}@keyframes L{50%{color:#1e90ff;background:#fff}}#page2 .back{text-shadow:5px 5px #fff,7px 7px;color:tomato;background:#fff;font-family:sans-serif;font-size:25vh;font-weight:100;animation:5s linear infinite p}@keyframes p{50%{text-shadow:13px 13px #fff,16px 16px}}#page3 .front{background:#1e90ff;font-family:serif;font-size:25vh;font-weight:900;animation:10s linear infinite L}#page3 .back{text-shadow:5px 5px #fff,7px 7px;color:tomato;background:#fff;font-family:sans-serif;font-size:25vh;font-weight:100;animation:5s linear infinite p}#page4 .front{background:#1e90ff;font-family:serif;font-size:25vh;font-weight:900;animation:10s linear infinite L}#page4 .back{text-shadow:5px 5px #fff,7px 7px;color:tomato;background:#fff;font-family:sans-serif;font-size:25vh;font-weight:100;animation:5s linear infinite p}#page5 .front{color:gold;text-shadow:24px 24px purple;background:#222;font-family:serif;font-size:25vh;font-weight:900;animation:10s linear infinite slide}@keyframes slide{25%{text-shadow:-24px 24px purple}50%{text-shadow:-24px -24px purple}75%{text-shadow:24px -24px purple}to{text-shadow:24px 24px purple}}#page5 .back{letter-spacing:2vh;text-align:left;color:#f0f;background:radial-gradient(circle at 30%,#000 50%,#222 40%);padding-left:2vh;font-size:2vh;font-weight:900;line-height:50vh;animation:10s linear infinite cover}#page6 .front{color:gold;text-shadow:24px 24px purple;background:#222;font-family:serif;font-size:25vh;font-weight:900;animation:10s linear infinite slide}#page6 .back{letter-spacing:2vh;text-align:left;color:#f0f;background:radial-gradient(circle at 30%,#000 50%,#222 40%);padding-left:2vh;font-size:2vh;font-weight:900;line-height:50vh;animation:10s linear infinite cover}@media (max-width:768px){#book{perspective:100vw;width:85vw;height:65vh}.page{width:50%;height:100%;font-size:1.5vh;line-height:30vh}.front,.back{font-size:1.5vh;line-height:30vh}#page1 .front,#page1 .back,#page2 .front,#page2 .back,#page3 .front,#page3 .back,#page4 .front,#page4 .back,#page5 .front,#page5 .back,#page6 .front,#page6 .back{font-size:2vh;line-height:40vh}#book .page>label{pointer-events:auto}}@media (max-width:480px){#book{perspective:120vw;width:95vw;height:60vh}.page{width:50%;height:100%;font-size:1vh;line-height:25vh}.front,.back{font-size:1vh;line-height:25vh}#page1 .front,#page1 .back,#page2 .front,#page2 .back,#page3 .front,#page3 .back,#page4 .front,#page4 .back,#page5 .front,#page5 .back,#page6 .front,#page6 .back{font-size:1.5vh;line-height:30vh}}.spiral-binding{z-index:20;pointer-events:none;flex-direction:column;justify-content:space-between;width:20px;height:100%;display:flex;position:absolute;top:0;left:50%;transform:translate(-50%)}.spiral-hole{background:#999;border:1px solid #777;border-radius:50%;width:14px;height:14px;margin:3px 0;box-shadow:0 2px 4px #0000004d}.hand-animation{z-index:30;pointer-events:none;animation:2s ease-in-out infinite handMove;position:absolute;bottom:-40px;left:20px}@keyframes handMove{0%{opacity:.5;transform:translate(0)rotate(0)}50%{opacity:1;transform:translate(20px)rotate(5deg)}to{opacity:.5;transform:translate(0)rotate(0)}}@media (max-width:768px){.spiral-binding{width:18px}.spiral-hole{width:12px;height:12px;margin:2px 0}}@media (max-width:480px){.spiral-binding{width:16px}.spiral-hole{width:8px;height:8px;margin:1px 0}}.viewer-container{background:#e5e7eb;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative;overflow:hidden}#book{aspect-ratio:2/1.4;background:0 0;justify-content:center;align-items:center;width:98vw;max-width:600px;height:auto;margin:0 auto;display:flex;position:relative}.page-img{object-fit:contain;width:100%;height:100%;display:block}@media (max-width:768px){#book{aspect-ratio:2/1.4;width:99vw;max-width:99vw}}
.hvx{font-family:var(--font-geist-sans),Inter,Segoe UI,Arial,sans-serif;color:#fff;box-sizing:border-box;isolation:isolate;background:radial-gradient(at 50% 30%,#14307f 0%,#091a4f 55%,#050f33 100%);width:100%;padding:56px 20px 90px;position:relative;overflow:hidden}.hvx *{box-sizing:border-box}.hvx-in{z-index:2;max-width:1180px;margin:0 auto;position:relative}.hvx h2{text-align:center;color:#fff;letter-spacing:-.02em;margin:0 0 10px;font-size:clamp(24px,3.4vw,38px);font-weight:800}.hvx h2 em{background:linear-gradient(90deg,#5eead4,#60a5fa);color:#0000;-webkit-background-clip:text;background-clip:text;font-style:normal}.hvx-sub{text-align:center;color:#c9d9ff;max-width:680px;margin:0 auto 36px;font-size:15px;line-height:1.6}.hvx-waves{z-index:1;pointer-events:none;opacity:.9;height:170px;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.hvx-waves svg{width:200%;height:100%;animation:18s linear infinite hvxwave;position:absolute;bottom:0;left:0}.hvx-waves svg:nth-child(2){opacity:.7;animation-duration:26s;animation-direction:reverse;bottom:-10px}.hvx-waves svg:nth-child(3){opacity:.5;animation-duration:36s;bottom:-22px}@keyframes hvxwave{to{transform:translate(-50%)}}.hvx-dots{z-index:1;pointer-events:none;position:absolute;inset:0}.hvx-dots i{opacity:0;background:#7dd3fc;border-radius:50%;width:4px;height:4px;animation:linear infinite hvxfloat;position:absolute}@keyframes hvxfloat{0%{opacity:0;transform:translateY(0)}15%{opacity:.8}to{opacity:0;transform:translateY(-260px)}}.hvx-wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:40px;display:grid}.hvx-orbit{aspect-ratio:1;width:min(100%,540px);margin:0 auto;position:relative}.hvx-glow{background:radial-gradient(circle,#60a5fa59,#0000 70%);border-radius:50%;animation:5s ease-in-out infinite hvxbreath;position:absolute;inset:18%}@keyframes hvxbreath{50%{opacity:.7;transform:scale(1.15)}}.hvx-ring{border:1.5px dashed #94c5ff59;border-radius:50%;position:absolute;inset:10%}.hvx-spin{animation:70s linear infinite hvxrot;position:absolute;inset:0}.hvx-spin svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.hvx-orbit:hover .hvx-spin,.hvx-orbit:hover .hvx-it,.hvx-orbit.paused .hvx-spin,.hvx-orbit.paused .hvx-it{animation-play-state:paused}.hvx-ln{stroke:#94c5ff47;stroke-width:.35px;fill:none}.hvx-pl{stroke:#5eead4;stroke-width:.7px;stroke-linecap:round;stroke-dasharray:.1 9;fill:none;filter:drop-shadow(0 0 1.2px #5eead4);animation:3.2s linear infinite hvxflow}@keyframes hvxflow{to{stroke-dashoffset:-9.1px}}.hvx-it{z-index:2;width:23%;animation:70s linear infinite hvxcounter;position:absolute;transform:translate(-50%,-50%)}.hvx-it a{aspect-ratio:1.65;background:#fff;border-radius:16px;justify-content:center;align-items:center;padding:8% 9%;text-decoration:none;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 8px 24px #0006,0 0 0 3px #60a5fa40}.hvx-it a:hover{transform:scale(1.15);box-shadow:0 10px 30px #00000080,0 0 0 4px #5eead4}.hvx-it.on a{transform:scale(1.2);box-shadow:0 12px 32px #00000080,0 0 0 4px #5eead4,0 0 28px #5eead4b3}.hvx-it img{object-fit:contain;width:100%;height:100%}.hvx-hub{z-index:3;width:31%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hvx-hub a{aspect-ratio:1.35;background:#fff;border-radius:22px;justify-content:center;align-items:center;padding:9%;text-decoration:none;transition:transform .2s;display:flex;position:relative;box-shadow:0 0 40px #60a5fa99,0 10px 30px #00000080}.hvx-hub a:hover{transform:scale(1.06)}.hvx-hub a:before,.hvx-hub a:after{content:"";border:2px solid #5eead4b3;border-radius:28px;animation:3s ease-out infinite hvxping;position:absolute;inset:-8px}.hvx-hub a:after{animation-delay:1.5s}@keyframes hvxping{0%{opacity:.9;transform:scale(.95)}to{opacity:0;transform:scale(1.5)}}.hvx-hub img{object-fit:contain;width:100%;height:100%}.hvx-hub small{white-space:nowrap;letter-spacing:.14em;text-transform:uppercase;color:#bfe3ff;font-size:11px;font-weight:700;position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%)}@keyframes hvxrot{to{transform:rotate(360deg)}}@keyframes hvxcounter{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(-360deg)}}.hvx-spot{flex-direction:column;gap:18px;display:flex}.hvx-card{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff14;border:1px solid #94c5ff4d;border-radius:20px;flex-direction:column;gap:14px;min-height:410px;padding:26px;transition:border-color .3s;display:flex;box-shadow:0 14px 40px #00000059}.hvx-card.sw{animation:.45s cubic-bezier(.16,1,.3,1) hvxin}@keyframes hvxin{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.hvx-card .lg{background:#fff;border-radius:14px;justify-content:center;align-self:flex-start;align-items:center;min-width:130px;max-width:220px;height:64px;padding:8px 16px;display:flex;box-shadow:0 4px 14px #00000026}.hvx-card .lg img{object-fit:contain;max-width:100%;max-height:100%}.hvx-card h3{color:#fff;letter-spacing:-.01em;margin:0;font-size:24px;font-weight:800}.hvx-card p{color:#e3eeff;margin:0;font-size:15.5px;font-weight:600;line-height:1.5}.hvx-pts{flex:1;gap:10px;margin:0;padding:0;list-style:none;display:grid}.hvx-pts li,.hvx-pt-item{color:#c9d9ff;opacity:0;padding-left:28px;font-size:14px;line-height:1.45;transition:opacity .5s,transform .5s;position:relative;transform:translate(-18px)}.hvx-pts li.in,.hvx-pt-item.in{opacity:1;transform:none}.hvx-pt-icon{background:linear-gradient(135deg,#5eead4,#3b82f6);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;display:flex;position:absolute;top:2px;left:0;box-shadow:0 0 10px #5eead4b3}.hvx-go{color:#fff;background:linear-gradient(90deg,#14b8a6,#3b82f6);border-radius:999px;align-self:flex-start;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:700;text-decoration:none;transition:transform .2s,box-shadow .2s;display:inline-flex;box-shadow:0 4px 14px #14b8a659}.hvx-go:hover{transform:translate(3px);box-shadow:0 6px 20px #3b82f680}.hvx-chips{flex-wrap:wrap;gap:8px;display:flex}.hvx-chip-btn{font:inherit;color:#c9d9ff;cursor:pointer;background:#ffffff12;border:1px solid #94c5ff4d;border-radius:999px;padding:6px 14px;font-size:13px;transition:all .2s}.hvx-chip-btn:hover{color:#fff;background:#5eead41f;border-color:#5eead4}.hvx-chip-btn.on{color:#0b2a8f;background:#fff;border-color:#fff;font-weight:700;box-shadow:0 2px 12px #ffffff4d}.hvx-bar{background:#ffffff26;border-radius:3px;height:3px;overflow:hidden}.hvx-bar-fill{background:linear-gradient(90deg,#5eead4,#60a5fa);height:100%;transition:width 60ms linear;display:block}.hvx-foot{text-align:center;color:#9db8e8;margin-top:32px;font-size:13px}@media (max-width:860px){.hvx-wrap{grid-template-columns:1fr;gap:40px}.hvx-orbit{width:min(92vw,420px)}.hvx{padding:44px 16px 76px}.hvx-hub small{font-size:9px}}@media (max-width:640px){.hvx{padding:36px 12px 64px}.hvx-orbit{width:min(92vw,340px)}.hvx-card{min-height:auto;padding:20px 16px}.hvx-card h3{font-size:20px}.hvx-card p{font-size:14px}.hvx-pt-item{padding-left:26px;font-size:13px}.hvx-pt-icon{width:16px;height:16px}.hvx-hub small{font-size:8px}.hvx-chips{justify-content:center}.hvx-chip-btn{padding:5px 12px;font-size:12px}}