:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#02080d}*{box-sizing:border-box}body{margin:0;background:#02080d;color:#f4fbfb}.how-shell{min-height:100dvh;background:#02080d;overflow:hidden}.how-topbar{position:fixed;z-index:30;top:0;left:0;right:0;height:76px;padding:0 clamp(20px,3.7vw,62px);display:flex;align-items:center;justify-content:space-between;border-top:2px solid rgba(255,178,41,.65);border-bottom:1px solid rgba(78,255,225,.62);background:linear-gradient(180deg,rgba(1,9,15,.9),rgba(1,9,15,.3));backdrop-filter:blur(14px)}.how-brand{display:flex;align-items:center;gap:12px;color:#f7f4ec;font-size:1.34rem;font-weight:900;letter-spacing:-.05em;text-decoration:none}.how-brand>span:last-child>span{color:#4ff0d6}.how-brand-mark{display:grid;place-items:center;width:42px;height:42px;border:2px solid #f6ead4;border-radius:50%;color:#f6ead4;font-size:.85rem;letter-spacing:0}.how-top-actions{display:flex;align-items:center;gap:28px;font-size:.83rem;font-weight:700}.how-home{color:#f2f7f8;text-decoration:none}.how-home:hover{color:#53f5db}.how-language{display:flex;align-items:center;gap:8px;color:#e8eeef}.how-language button{border:0;background:none;padding:6px 0;color:#8e9ba2;font:inherit;font-weight:900;cursor:pointer}.how-language button.is-active{color:#57f4da;text-shadow:0 0 14px rgba(79,240,214,.72)}.how-frame{position:relative;isolation:isolate;width:100%;height:100dvh;min-height:620px;overflow:hidden;background:#02080d;outline:0}.how-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3;animation:how-breathe 13s ease-in-out infinite alternate}.how-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(1,8,14,.92) 0%,rgba(1,8,14,.64) 36%,rgba(1,8,14,.08) 69%,rgba(1,8,14,.34) 100%),linear-gradient(180deg,rgba(1,8,14,.45) 0%,transparent 32%,rgba(1,8,14,.18) 53%,#02080d 100%)}.how-rain{position:absolute;inset:0;z-index:-1;opacity:.24;background-image:repeating-linear-gradient(102deg,transparent 0 41px,rgba(131,255,235,.32) 42px 43px,transparent 44px 88px);background-size:200px 160px;mask-image:linear-gradient(#000,transparent 78%);animation:how-rain 3s linear infinite}.how-proof{position:absolute;z-index:4;top:clamp(118px,18vh,180px);right:clamp(28px,5.6vw,92px);width:min(43vw,670px);overflow:hidden;border:1px solid rgba(99,253,224,.7);border-radius:16px;background:rgba(1,12,20,.72);box-shadow:0 28px 80px rgba(0,0,0,.5),0 0 44px rgba(25,239,213,.12);transform:perspective(1100px) rotateY(-5deg) rotateX(1deg);transition:opacity .35s ease,transform .65s cubic-bezier(.2,.8,.2,1)}.how-proof:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(77,255,218,.12),transparent 25% 73%,rgba(255,64,180,.08));mix-blend-mode:screen}.how-proof-top{height:36px;padding:0 13px;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(99,253,224,.24);background:rgba(4,25,33,.85);color:#76f5de;font-size:.64rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.how-proof-dot{width:8px;height:8px;border-radius:50%;background:#46e8d1;box-shadow:0 0 12px #46e8d1}.how-proof img{display:block;width:100%;height:min(42vh,430px);object-fit:cover;object-position:top left}.how-frame.is-changing .how-proof{opacity:.38;transform:perspective(1100px) rotateY(-5deg) translateY(9px) scale(.98)}.how-meta{position:absolute;z-index:16;left:clamp(28px,5.9vw,94px);top:clamp(106px,15vh,158px);display:flex;align-items:center;gap:12px;color:#71f3df;font-size:.68rem;font-weight:900;letter-spacing:.2em}.how-meta:before{content:"";width:30px;height:2px;background:#57f4da;box-shadow:0 0 12px rgba(87,244,218,.8)}.how-meta strong{color:#edf6f5;font-size:.68rem}.how-controls{position:absolute;z-index:20;left:clamp(28px,5.9vw,94px);bottom:clamp(30px,5.4vh,64px);display:flex;gap:12px}.how-control{width:49px;height:49px;border:1px solid rgba(78,248,217,.68);border-radius:50%;background:rgba(1,14,22,.68);color:#62f4da;font-size:1.24rem;cursor:pointer;transition:transform .2s ease,background .2s ease}.how-control:hover{background:#19d9c2;color:#021017;transform:translateY(-2px)}.how-control-restart{border-color:rgba(244,231,205,.55);color:#f5ebdc;font-size:1.34rem}.how-progress{position:absolute;z-index:20;right:clamp(28px,5.6vw,92px);bottom:clamp(44px,6.2vh,76px);display:flex;gap:7px}.how-progress span{display:block;width:34px;height:4px;background:rgba(225,242,239,.3)}.how-progress span.is-active{background:#57f4da;box-shadow:0 0 12px #57f4da}.how-frame[data-mellow-video="cinematic-subtitles"] .mellow-video-letterbox:before,.how-frame[data-mellow-video="cinematic-subtitles"] .mellow-video-letterbox:after{height:0}.how-frame[data-mellow-video="cinematic-subtitles"] .mellow-video-caption{left:clamp(28px,5.9vw,94px);bottom:clamp(102px,17vh,198px);width:min(42vw,560px);padding:0;text-align:left;transform:none;text-shadow:0 3px 22px #000}.how-frame[data-mellow-video="cinematic-subtitles"] .mellow-video-caption span{color:#67f4dd;font-size:.65rem}.how-frame[data-mellow-video="cinematic-subtitles"] .mellow-video-caption strong{margin:0 0 .55rem;font-size:clamp(2.25rem,4.2vw,5rem);font-weight:950;line-height:.92;letter-spacing:-.055em;text-wrap:balance}.how-frame[data-mellow-video="cinematic-subtitles"] .mellow-video-caption p{max-width:27ch;margin:0;color:#f6f0e6;font-size:clamp(1rem,1.28vw,1.22rem);font-weight:650;line-height:1.36}.how-frame[data-mellow-video="cinematic-subtitles"] .mellow-video-caption strong:after{content:"";display:block;width:64px;height:3px;margin-top:.85rem;background:#58f5db;box-shadow:0 0 14px #58f5db}@keyframes how-breathe{from{transform:scale(1.01)}to{transform:scale(1.055)}}@keyframes how-rain{to{background-position:-34px 115px}}@media(max-width:900px){.how-topbar{height:58px;padding:0 16px}.how-brand{gap:8px;font-size:1.02rem}.how-brand-mark{width:34px;height:34px;font-size:.7rem}.how-top-actions{gap:13px;font-size:.66rem}.how-home{display:none}.how-frame{min-height:100svh}.how-backdrop{object-position:66% center}.how-shade{background:linear-gradient(180deg,rgba(1,8,14,.38) 0%,rgba(1,8,14,.07) 24%,rgba(1,8,14,.42) 50%,#02080d 84%)}.how-meta{top:76px;left:18px;font-size:.53rem}.how-meta strong{font-size:.53rem}.how-proof{top:clamp(165px,24vh,260px);right:16px;left:16px;width:auto;border-radius:13px;transform:none}.how-proof img{height:clamp(165px,30vh,265px)}.how-proof-top{height:31px;font-size:.53rem}.how-frame[data-mellow-video="cinematic-subtitles"] .mellow-video-caption{left:20px;right:20px;bottom:max(132px,calc(env(safe-area-inset-bottom) + 104px));width:auto}.how-frame[data-mellow-video="cinematic-subtitles"] .mellow-video-caption span{font-size:.5rem}.how-frame[data-mellow-video="cinematic-subtitles"] .mellow-video-caption strong{max-width:16ch;margin-bottom:.4rem;font-size:clamp(1.65rem,8vw,2.8rem);line-height:.94}.how-frame[data-mellow-video="cinematic-subtitles"] .mellow-video-caption p{max-width:31ch;font-size:clamp(.85rem,3.7vw,1rem)}.how-frame[data-mellow-video="cinematic-subtitles"] .mellow-video-caption strong:after{width:45px;margin-top:.6rem}.how-controls{left:18px;bottom:max(28px,calc(env(safe-area-inset-bottom) + 14px));gap:9px}.how-control{width:43px;height:43px;font-size:1.06rem}.how-progress{right:18px;bottom:max(48px,calc(env(safe-area-inset-bottom) + 33px));gap:5px}.how-progress span{width:22px;height:3px}}@media(prefers-reduced-motion:reduce){.how-backdrop,.how-rain{animation:none!important}.how-proof,.how-control{transition:none}}