/* estudia-con-ia — page styles */
body{margin:0;background:#FFFFFF}
a{color:#111111}a:hover{color:#5600E6}
.ph .ph-real{opacity:0;transition:opacity .5s ease}.ph:hover .ph-real,.ph:focus-visible .ph-real{opacity:1}
.brand{color:#FFFFFF;transition:color .5s ease}.brand:hover{color:#5600E6}
.tes{opacity:.14;transition:opacity 1.6s ease}
.tes:hover{opacity:1;transition:opacity .6s ease}
.scroller{height:100vh;height:100dvh;overflow-y:auto;overflow-x:hidden;position:relative}
.lab{font-size:12px;text-transform:uppercase;letter-spacing:0.08em;font-weight:700}
/* historia */
.story{position:relative}
.sent{position:absolute;inset:0;pointer-events:none}
.strip{position:absolute;left:0;width:2px;height:0.5%;display:block;opacity:0}
.rail{position:absolute;left:50%;width:0;top:var(--r0,0px);height:var(--rh,0px);z-index:4;pointer-events:none}
.rail .tr{position:absolute;left:-2px;top:0;bottom:0;width:4px;background:repeating-linear-gradient(to bottom,rgba(140,140,134,.55) 0 8px,transparent 8px 16px)}
.rail .fl{position:absolute;left:-2px;top:0;width:4px;height:var(--rf,0px);background:#FF3F7A}
.trav{position:absolute;left:50%;top:calc(var(--r0,0px) + var(--rf,0px));transform:translate(-50%,-50%);z-index:8;pointer-events:none}
.tv{width:78px;height:60px;position:relative;filter:drop-shadow(4px 4px 0 #111111)}
.tv svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(.3) rotate(-25deg);transition:opacity .3s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.trav[data-k="0"] .t0,.trav[data-k="1"] .t1,.trav[data-k="2"] .t2,.trav[data-k="3"] .t3,.trav[data-k="4"] .t4,.trav[data-k="5"] .t5,.trav[data-k="6"] .t6,.trav[data-k="7"] .t7,.trav[data-k="8"] .t8,.trav[data-k="9"] .t9,.trav[data-k="10"] .t10{opacity:1;transform:none}
.tvl{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);white-space:nowrap;text-align:center;background:#111111;color:#FFFFFF;font-size:11px;font-weight:800;padding:5px 8px;text-transform:uppercase;letter-spacing:.06em}
.tvl b{color:#FFD10A;font-weight:800}
/* escenas */
.scn{min-height:640px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);align-items:center;padding:72px clamp(18px,3vw,48px);margin-top:6px;overflow:hidden;position:relative}
.scn .cap{grid-column:1;grid-row:1}.scn .vis{grid-column:3;grid-row:1}
.scn.flip .cap{grid-column:3}.scn.flip .vis{grid-column:1}
.stn{grid-column:2;grid-row:1;justify-self:center;width:22px;height:22px;box-sizing:border-box;border:3px solid #111111;background:#FFFFFF;position:relative;z-index:6;transition:background .4s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.bg-k .stn,.bg-v .stn{border-color:#FFFFFF;background:#111111}
[data-play="true"] .stn{background:#FF3F7A;transform:scale(1.2)}
.stn::after{content:"";position:absolute;top:50%;left:100%;height:3px;width:0;background:#FF3F7A;margin-top:-1.5px;transition:width .7s cubic-bezier(.16,1,.3,1) .2s}
[data-play="true"] .stn::after{width:52px}
.scn.flip .stn::after{left:auto;right:100%}
.cap{display:flex;flex-direction:column;gap:14px;min-width:0}
.cap .n{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.cap .kick{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#FF3F7A}
.cap h2{margin:0;font-size:clamp(30px,3.4vw,50px);font-weight:800;letter-spacing:-0.045em;line-height:.95}
.cap p{margin:0;font-size:clamp(16px,1.35vw,19px);font-weight:500;line-height:1.45;max-width:440px}
.vis{position:relative;min-width:0;display:flex;justify-content:center}
.bg-w{background:#FFFFFF}.bg-h{background:#F1F0EC}.bg-k{background:#111111;color:#FFFFFF}.bg-v{background:#5600E6;color:#FFFFFF}
.bg-k .cap p{color:#CFCFCA}.bg-v .cap p{color:#E8E1FF}.bg-v .cap .kick,.bg-k .cap .kick{color:#FFD10A}
.pk{background:#FF3F7A;color:#FFFFFF;padding:1px 6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* motor de animación: nada se mueve hasta que la escena entra */
.fx,.fxp,.fxw,.fxs{opacity:0}
[data-play="true"] .fx{animation:fu .6s cubic-bezier(.16,1,.3,1) var(--d,0s) both}
[data-play="true"] .fxp{animation:pp .6s cubic-bezier(.34,1.56,.64,1) var(--d,0s) both}
[data-play="true"] .fxw{animation:ww 1s cubic-bezier(.16,1,.3,1) var(--d,0s) both}
[data-play="true"] .fxs{animation:ss .5s cubic-bezier(.34,1.8,.64,1) var(--d,0s) both}
@keyframes fu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pp{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes ww{from{opacity:1;width:0}to{opacity:1;width:var(--w,100%)}}
@keyframes ss{from{opacity:0;transform:scale(2.2) rotate(-14deg)}to{opacity:1;transform:rotate(-6deg)}}
/* 0 · hola, mundo */
.hola{width:min(100%,460px);display:flex;flex-direction:column;align-items:center;gap:22px}
.card0{width:100%;background:#FFFFFF;color:#111111;border:2px solid #111111;box-shadow:10px 10px 0 #111111;padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}
.card0 .to{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#6A6A66}
.hw{font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;font-size:clamp(26px,3vw,38px);font-weight:700;letter-spacing:-0.02em;white-space:nowrap;overflow:hidden;width:0;border-right:3px solid #FF3F7A;justify-self:start}
[data-play="true"] .hw{animation:type 1.2s steps(12) .3s both,caret .8s step-end 1.5s 4}
@keyframes type{from{width:0}to{width:12.4ch}}
@keyframes caret{50%{border-color:transparent}}
.card0 .qq0{font-size:clamp(17px,1.6vw,21px);font-weight:700;line-height:1.35}
.env{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:800}
.env svg{width:70px;height:54px;display:block}
/* 1 · leer */
.paper{width:min(100%,460px);background:#FFFFFF;color:#111111;border:2px solid #111111;box-shadow:10px 10px 0 #111111;padding:26px;box-sizing:border-box;display:flex;flex-direction:column;gap:11px;position:relative}
.paper .ttl{font-size:13px;font-weight:800}
.ln{height:9px;background:#E4E3DD;width:var(--w,100%)}
.hl{position:relative;height:9px;width:var(--w,100%);background:#E4E3DD}
.hl::after{content:"";position:absolute;inset:-3px 0;background:#FFD10A;transform-origin:left;transform:scaleX(0)}
[data-play="true"] .hl::after{animation:sweep .7s ease var(--d,0s) both}
@keyframes sweep{to{transform:scaleX(1)}}
.note{position:absolute;right:-18px;bottom:-22px;background:#FF3F7A;color:#FFFFFF;padding:10px 12px;font-size:14px;font-weight:700;max-width:220px;transform:rotate(2deg);box-shadow:4px 4px 0 #111111}
/* mascota */
.mz{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;flex:0 0 auto}
.mz i{display:block;background:var(--mc)}
.mz i.e{background:#FFFFFF;position:relative}
.mz i.e::after{content:"";position:absolute;inset:28%;background:#111111;animation:blink 4s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.mz-s{width:28px;height:28px;gap:1px}
.mz-m{width:72px;height:72px}
.mz-l{width:96px;height:96px;gap:3px}
.bob{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* 2 · chat */
.chatw{width:min(100%,500px);border:2px solid #111111;background:#FFFFFF;display:flex;flex-direction:column}
.chatw .top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;background:#111111;color:#FFFFFF;font-size:12px;font-weight:700}
.modes{display:flex;gap:3px}.modes span{padding:3px 7px;font-size:10px;background:#2A2A2A;color:#9A9A94}.modes span.on{background:#FFD10A;color:#111111}
.msgs{display:flex;flex-direction:column;gap:10px;padding:16px;justify-content:flex-end}
.m{display:flex;gap:8px;align-items:flex-end;max-width:88%}
.m .b{padding:10px 12px;font-size:14px;line-height:1.4;font-weight:500}
.m .who{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;color:#C24F00}
.m-a{align-self:flex-end}.m-a .b{background:#111111;color:#FFFFFF}
.m-g .b{background:#F1F0EC}
.m-a .b.hot{background:#FF3F7A;color:#FFFFFF;font-weight:700}
.born{align-self:flex-end;margin-top:14px;background:#111111;color:#FFFFFF;padding:8px 12px;font-size:13px;font-weight:800;box-shadow:4px 4px 0 #FF3F7A}
.typ{align-self:flex-start;display:flex;gap:4px;padding:10px 12px;background:#F1F0EC;margin-left:36px;opacity:0;max-height:0;overflow:hidden;box-sizing:border-box}
.typ i{width:6px;height:6px;background:#111111;display:block;animation:td 1s infinite}
.typ i:nth-child(2){animation-delay:.15s}.typ i:nth-child(3){animation-delay:.3s}
@keyframes td{0%,100%{opacity:.25}50%{opacity:1}}
[data-play="true"] .typ{animation:typ 1s ease var(--d,0s) both}
@keyframes typ{0%{opacity:0;max-height:0;padding-top:0;padding-bottom:0}15%,85%{opacity:1;max-height:40px;padding-top:10px;padding-bottom:10px}100%{opacity:0;max-height:0;padding-top:0;padding-bottom:0}}
.buddy{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.buddy .tag{background:#111111;color:#FFFFFF;padding:6px 9px;font-size:11px;font-weight:700;line-height:1.25}
.buddy .tag b{display:block;font-size:13px}
.vcol{display:flex;flex-direction:column;align-items:flex-start;width:min(100%,500px)}
/* 3 · se escribe */
.doc{width:min(100%,460px);background:#FFFFFF;border:2px solid #111111;padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;position:relative}
.doc .h{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#55554F}
.doc .tt{font-size:clamp(18px,1.7vw,23px);font-weight:800;letter-spacing:-0.02em;line-height:1.05}
.sct{display:flex;flex-direction:column;gap:7px;padding:10px 0;border-top:1px solid #E4E3DD}
.sct .sn{font-size:13px;font-weight:800}
.sct.new{border-top:0;background:#FFF5EC;padding:12px;box-shadow:inset 4px 0 0 #FF6B00}
.sct.new .sn{color:#C24F00}
.lw{height:8px;background:#CFCFCA;width:var(--w,100%)}
.plus{position:absolute;right:-16px;top:40%;background:#00DE7E;padding:8px 12px;font-size:14px;font-weight:800;box-shadow:4px 4px 0 #111111}
/* 4 · corte */
.term{width:min(100%,520px);display:flex;flex-direction:column;gap:22px}
.tbox{background:#000000;border:2px solid #3A3A36;padding:16px;font-size:14px;line-height:1.7;font-variant-numeric:tabular-nums;font-weight:600;overflow-wrap:anywhere}
.tbox .ok{color:#00DE7E}.tbox .dim{color:#9A9A94}
.gl{display:flex;align-items:center;position:relative;padding:10px 0}
.gl::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:#3A3A36}
.gl i{position:relative;width:26px;height:26px;margin-right:18px;display:block;background:var(--c)}
.gl i.big{width:44px;height:44px;box-shadow:0 0 0 3px #111111,0 0 0 5px #00DE7E}
.glab{font-size:13px;font-weight:700;color:#CFCFCA}
.glab b{color:#FFFFFF}
/* 5 · otro agente */
.duo{width:min(100%,520px);display:flex;flex-direction:column;gap:20px}
.duo .row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pass{flex:1 1 auto;height:2px;background:#111111;position:relative}
.pass b{opacity:0;position:absolute;top:-24px;left:0;display:flex;align-items:center;gap:6px;background:#FFD10A;padding:4px 8px;font-size:11px;font-weight:800;white-space:nowrap;box-shadow:3px 3px 0 #111111}
[data-play="true"] .pass b{animation:pass 1.4s cubic-bezier(.65,0,.35,1) var(--d,0s) both}
@keyframes pass{from{left:0;opacity:0}15%{opacity:1}to{left:calc(100% - 110px);opacity:1}}
.chart{border:2px solid #111111;padding:18px;display:flex;flex-direction:column;gap:12px;background:#FFFFFF}
.chart .r{display:grid;grid-template-columns:96px minmax(0,1fr) 54px;gap:10px;align-items:center;font-size:13px;font-weight:700}
.chart .bar{height:26px;background:#F1F0EC;position:relative}
.chart .bar i{position:absolute;left:0;top:0;bottom:0;display:block}
.chart .x{font-size:20px;font-weight:800;letter-spacing:-0.03em;color:#5600E6}
.link{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;flex-wrap:wrap}
.link span{padding:6px 10px;border:2px solid #111111}
/* 6 · se conecta */
.net{width:min(100%,520px);aspect-ratio:1.15;position:relative}
.net svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.net line{stroke:#FFFFFF;stroke-width:2;stroke-dasharray:400;stroke-dashoffset:400;opacity:.85}
[data-play="true"] .net line{animation:draw 1s ease var(--d,0s) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.nd{position:absolute;margin:-19px 0 0 -60px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:800;text-align:center;width:120px}
.nd i{width:38px;height:38px;display:block;background:var(--c);box-shadow:0 0 0 3px #5600E6}
.nd.big i{width:58px;height:58px;background:#FFFFFF}
.nd.big{margin-top:-29px}
.nd b{background:#5600E6;padding:2px 5px;font-weight:800;position:relative}
/* 7 · revisión */
.rv{width:min(100%,480px);background:#FFFFFF;border:2px solid #111111;padding:22px;box-sizing:border-box;display:flex;flex-direction:column;gap:14px;position:relative}
.rv .who{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800}
.rv .who i{width:34px;height:34px;display:block;background:#FF3F7A}
.rv .q{font-size:16px;font-weight:600;line-height:1.4}
.rub{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px 12px;align-items:center;font-size:12px;font-weight:700}
.rub .bar{height:10px;background:#F1F0EC;position:relative}
.rub .bar i{position:absolute;left:0;top:0;bottom:0;background:#111111;display:block}
.stamp{position:absolute;right:-20px;bottom:-26px;border:4px solid #00A35C;color:#00A35C;background:#FFFFFF;padding:8px 12px;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;transform:rotate(-6deg)}
/* 8 · tres años */
.big3{width:min(100%,560px);display:flex;flex-direction:column;gap:16px}
.g36{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px}
.g36 i{aspect-ratio:1;display:block;background:var(--c)}
.cnt{display:flex;flex-wrap:wrap;gap:6px 28px}
.cnt div{display:flex;flex-direction:column}
.cnt b{font-size:clamp(34px,4vw,56px);font-weight:800;letter-spacing:-0.05em;line-height:.9;font-variant-numeric:tabular-nums}
.cnt span{font-size:13px;font-weight:700;color:#55554F}
/* 9 · defensa */
.def{width:min(100%,500px);display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;position:relative}
.spot{position:absolute;inset:-60px;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.14),transparent 60%);pointer-events:none}
.sin{background:#FFD10A;color:#111111;padding:6px 10px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.qq{font-size:clamp(16px,1.6vw,20px);font-weight:700;line-height:1.3;background:#1E1E1E;padding:12px 14px;border-left:4px solid #FF3F7A;text-align:left;width:100%;box-sizing:border-box}
.jury{display:flex;gap:10px}.jury i{width:42px;height:42px;display:block}
/* 10 · licenciada */
.fin{width:min(100%,500px);display:flex;flex-direction:column;align-items:center;gap:36px;position:relative}
.cover{background:#FFFFFF;color:#111111;width:min(100%,340px);aspect-ratio:3/4;padding:22px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;box-shadow:12px 12px 0 #FFD10A;opacity:0}
[data-play="true"] .cover{animation:coverIn .9s cubic-bezier(.34,1.4,.64,1) var(--d,0s) both}
@keyframes coverIn{from{transform:translateY(-120px) rotate(10deg) scale(.9);opacity:0}to{transform:rotate(-3deg);opacity:1}}
.cover .ct{font-size:clamp(20px,2.1vw,27px);font-weight:800;letter-spacing:-0.03em;line-height:1.02}
.cover .hm{font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;font-size:13px;font-weight:700;color:#FF3F7A;margin:14px 0 22px;line-height:1.3}
.cover .cmz{margin-bottom:12px}
.cmz{display:grid;grid-template-columns:repeat(9,1fr);gap:2px}.cmz i{aspect-ratio:1;display:block}
.lic{font-size:clamp(40px,5vw,70px);font-weight:800;letter-spacing:-0.05em;line-height:.9}
.conf{position:absolute;inset:-40px 0 0;pointer-events:none;overflow:visible}
.conf i{position:absolute;top:-20px;width:12px;height:12px;display:block;opacity:0}
[data-play="true"] .conf i{animation:fall 2.6s cubic-bezier(.3,.6,.5,1) var(--d,0s) both}
@keyframes fall{0%{opacity:0;transform:translateY(-40px) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translateY(560px) rotate(540deg)}}
@media (max-width:860px){
.rail,.trav{left:26px}
.scn{grid-template-columns:minmax(0,1fr);min-height:0;padding:44px 18px 56px 64px;gap:26px}
.scn .cap,.scn.flip .cap{grid-column:1;grid-row:1}.scn .vis,.scn.flip .vis{grid-column:1;grid-row:2}
.stn{position:absolute;left:15px;top:50px;grid-column:auto;grid-row:auto}
.stn::after{display:none}
.tv{width:48px;height:38px;filter:drop-shadow(3px 3px 0 #111111)}
.tvl{display:none}
.cap h2{font-size:34px}
.mz-l{width:64px;height:64px}
.note,.plus,.stamp{right:-6px}
.msgs{padding:12px}
.chart .r{grid-template-columns:76px minmax(0,1fr) 44px}
.nd{width:78px;font-size:10px;margin:-13px 0 0 -39px}.nd i{width:26px;height:26px}.nd.big i{width:40px;height:40px}.nd.big{margin-top:-20px}
.hw{font-size:26px}
}


/* chat coordinado */
.ch,.wd{opacity:0}
[data-play="true"] .ch,[data-play="true"] .wd{animation:on 0s linear var(--d,0s) forwards}
@keyframes on{to{opacity:1}}
@keyframes off{to{opacity:0;visibility:hidden}}
.inbar{position:relative;border-top:2px solid #111111;min-height:76px;padding:12px 56px 12px 14px;box-sizing:border-box;background:#FFFFFF}
.inbar .ph{color:#9A9A94;font-size:14px;font-weight:500}
.iln{position:absolute;left:14px;right:56px;top:12px;bottom:10px;background:#FFFFFF;font-size:14px;font-weight:500;line-height:1.4;opacity:0;overflow:hidden}
[data-play="true"] .iln{animation:on 0s linear var(--d,0s) forwards,off 0s linear var(--e,0s) forwards}
.iln i{font-style:normal}
.car{display:inline-block;width:2px;height:16px;background:#FF3F7A;vertical-align:-3px;margin-left:1px;animation:blinkc .8s step-end infinite}
@keyframes blinkc{50%{opacity:0}}
.sbtn{position:absolute;right:10px;bottom:12px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:#111111;color:#FFFFFF;font-weight:800;font-size:16px}
.snd{position:absolute;right:10px;bottom:12px;width:34px;height:34px;background:#FF3F7A;opacity:0;pointer-events:none}
[data-play="true"] .snd{animation:sendf .45s ease var(--d,0s) both}
@keyframes sendf{0%{opacity:0;transform:scale(.6)}30%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:scale(1)}}
.msgs{min-height:0}
/* qué es el arnés */
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 64px;align-items:center;padding:72px clamp(18px,3vw,48px);margin-top:6px;background:#FFD10A;position:relative}
.intro .cap p b{font-weight:800}
.intro .kick{color:#111111 !important}
.rig{display:flex;flex-direction:column;align-items:center;gap:0;padding:20px 40px}
.rig-frame{position:relative;width:min(100%,340px);border:6px solid #5600E6;padding:30px;box-sizing:border-box;background:#FFFFFF}
.rig-tab{position:absolute;left:-6px;top:-30px;background:#5600E6;color:#FFFFFF;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:5px 10px}
.rig-ai{border:2px dashed #111111;padding:26px 16px;text-align:center;font-size:clamp(24px,2.4vw,32px);font-weight:800;letter-spacing:-0.03em;display:flex;flex-direction:column;gap:4px}
.rig-ai small{font-size:13px;font-weight:600;letter-spacing:0;color:#55554F}
.rig-ag{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;background:#FFD10A;padding:4px}
.rig-ag b{font-weight:800}
.rig-ag .mz-s{width:44px;height:44px;gap:2px}
.rig-wire{display:block;width:4px;height:0;background:#111111;opacity:0}
[data-play="true"] .rig-wire{animation:wire .6s ease var(--d,0s) both}
@keyframes wire{from{opacity:1;height:0}to{opacity:1;height:56px}}
.rig-brain{border:2px solid #111111;background:#FFFFFF;padding:12px 14px;display:flex;flex-direction:column;gap:8px;width:min(100%,300px);box-sizing:border-box;box-shadow:6px 6px 0 #111111}
.rig-tiles{display:flex;gap:5px}.rig-tiles i{width:22px;height:22px;display:block}
.defs{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.df{background:#FFFFFF;border:2px solid #111111;padding:18px;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.4}
.df b{font-size:20px;font-weight:800;letter-spacing:-0.02em}
.df .mz-s{width:34px;height:34px}
.df-ic{display:grid;grid-template-columns:repeat(2,14px);gap:3px}.df-ic i{width:14px;height:14px;display:block;background:#5600E6}.df-ic i:nth-child(2){background:#FF6B00}.df-ic i:nth-child(3){background:#00DE7E}.df-ic i:nth-child(4){background:#FF3F7A}
.df-ok{display:flex;width:34px;height:34px;background:#FF6B00;color:#FFFFFF;align-items:center;justify-content:center;font-weight:800;font-size:18px}
@media (max-width:860px){
.intro{grid-template-columns:minmax(0,1fr);padding:44px 18px 56px}
.defs{grid-template-columns:minmax(0,1fr)}
.rig{padding:30px 34px 10px}
.iln,.inbar .ph{font-size:13px}
}


/* chat que va naciendo */
.msgs{gap:0;height:360px;overflow:hidden;justify-content:flex-end;box-sizing:border-box}
.bn{max-height:0;opacity:0;margin-top:0;transform:translateY(18px) scale(.96);transform-origin:bottom right;overflow:hidden;flex:0 0 auto}
.m-g.bn{transform-origin:bottom left}
[data-play="true"] .bn{animation:born .5s cubic-bezier(.16,1,.3,1) var(--d,0s) forwards}
@keyframes born{0%{max-height:0;opacity:0;margin-top:0;transform:translateY(18px) scale(.96)}35%{opacity:1}100%{max-height:320px;opacity:1;margin-top:10px;transform:none}}
.typ{flex:0 0 auto}
@keyframes typ{0%{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0}15%,85%{opacity:1;max-height:40px;margin-top:10px;padding-top:10px;padding-bottom:10px}100%{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0}}
/* caballo + carreta */
.vis2{display:flex;flex-direction:column;align-items:center;gap:18px;min-width:0}
.ride{display:flex;align-items:flex-end;justify-content:center;width:100%;--c:17px}
.hgrid{display:grid;grid-template-columns:repeat(16,var(--c));grid-template-rows:repeat(11,var(--c));gap:1px}
.hgrid i{display:block}
.hs{background:#FF3F7A;opacity:0;z-index:1;box-shadow:0 0 0 2px #FF3F7A}
[data-play="true"] .hs{animation:on 0s linear var(--d,0s) forwards}
.horse{animation:trot .5s ease-in-out infinite alternate;animation-play-state:paused}
[data-play="true"] .horse{animation-play-state:running}
@keyframes trot{from{transform:translateY(0)}to{transform:translateY(-3px)}}
.shaft{display:block;height:5px;background:#FF3F7A;width:0;margin-bottom:calc(var(--c) * 4.6);flex:0 0 46px;max-width:46px}
.cart{position:relative;width:calc(var(--c) * 8);display:flex;flex-direction:column;align-items:center;padding-bottom:calc(var(--c) * 1.2)}
.ctiles{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;width:82%;margin-bottom:-2px}
.ct{display:block;aspect-ratio:1}
.cbox{display:block;width:100%;height:calc(var(--c) * 2.4);background:#FF6B00;border:3px solid #111111;box-sizing:border-box}
.wh{position:absolute;bottom:0;left:12%;width:calc(var(--c) * 2);height:calc(var(--c) * 2);background:#111111;border-radius:50%;box-shadow:inset 0 0 0 5px #111111,inset 0 0 0 9px #FFD10A}
.wh2{left:auto;right:12%}
.ride-lab{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;text-align:center;font-size:13px;font-weight:600}
.ride-lab span{display:flex;flex-direction:column;background:#FFFFFF;border:2px solid #111111;padding:8px 6px}
.ride-lab b{font-size:15px;font-weight:800}
.defs{grid-template-columns:repeat(4,minmax(0,1fr))}
.df-pp{width:34px;height:34px;background:#FF3F7A;display:block}
@media (max-width:860px){
.msgs{height:420px}
.ride{--c:10px}
.shaft{flex-basis:26px;max-width:26px}
.defs{grid-template-columns:minmax(0,1fr)}
.ride-lab{font-size:12px}.ride-lab b{font-size:13px}
}
@media (max-width:1100px) and (min-width:861px){.defs{grid-template-columns:repeat(2,minmax(0,1fr))}.ride{--c:13px}}


.wa{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;align-items:center;flex-direction:row-reverse;gap:0;background:#00DE7E;color:#111111;text-decoration:none;box-shadow:4px 4px 0 #111111;border:2px solid #111111;font-family:'Plus Jakarta Sans',system-ui,sans-serif;transition:transform .2s ease}
.wa-i{display:flex;align-items:center;justify-content:center;width:56px;height:56px;flex:0 0 auto;background:#FFFFFF;border-left:2px solid #111111;box-sizing:border-box}
.wa-i svg{width:32px;height:32px;display:block}
.wa-t{max-width:0;overflow:hidden;white-space:nowrap;display:flex;flex-direction:column;font-size:14px;font-weight:800;line-height:1.15;padding:0;transition:max-width .35s ease,padding .35s ease}
.wa-t b{font-size:11px;font-weight:600}
.wa:hover .wa-t,.wa:focus-visible .wa-t{max-width:220px;padding:0 14px}
.wa:hover{transform:translate(-2px,-2px);color:#111111}
.wa:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #111111}
.tstrip{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px}
.tstrip > i{display:block;aspect-ratio:1}
@media (max-width:760px){.tstrip{grid-template-columns:repeat(6,minmax(0,1fr))}.tstrip > i:nth-child(n+7){display:none}}
.story .tstrip{margin-top:6px;position:relative;z-index:1}
.bg-w{border:2px solid #111111}
/* barra única */
:root{--hdrH:calc(26px + (min(100vw,1280px) - 106px) / 12)}
.hdr{position:sticky;top:0;z-index:20;background:#FFFFFF;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:calc((min(100vw,1280px) - 106px) / 12);gap:6px;max-width:1280px;margin:0 auto;padding:20px 20px 6px;box-sizing:border-box}
.hdr .a-brand{grid-area:1/1/2/4}.hdr .a-nav{grid-area:1/4/2/11;background:#FFFFFF}.hdr .a-cta{grid-area:1/11/2/13}
.hdr .a-nav a{text-decoration:none}
.hdr .nav-arr{display:none}
.hdr .a-nav a:hover{color:#5600E6}
.hdr .a-nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.hdr .a-cta{transition:background-color .2s ease,color .2s ease}
.hdr .a-cta:hover{background:#111111 !important;color:#FFD10A !important}
@media (min-width:841px) and (max-width:1080px){.hdr .a-nav{font-size:clamp(11.5px,1.26vw,13.5px) !important;gap:clamp(6px,.9vw,12px) !important;padding:0 clamp(8px,1vw,14px) !important}}
@media (max-width:760px){.wrap{padding:0 16px 16px !important}}
@media (max-width:840px){.hdr{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:calc((100vw - 62px) / 6);padding:16px 16px 6px}.hdr .a-brand{grid-area:1/1/2/4}.hdr .a-cta{grid-area:1/4/2/7}
.hdr{grid-template-rows:min(calc((100vw - 62px) / 6), 64px) 46px !important}
.hdr .a-nav{display:flex !important;grid-area:2/1/3/7 !important;position:relative;padding:0 !important;gap:0 !important;justify-content:flex-start !important;overflow-x:auto !important;overflow-y:hidden !important;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;font-size:15px !important;font-weight:600 !important}
.hdr .a-nav::-webkit-scrollbar{display:none}
.hdr .a-nav a{display:flex !important;flex:0 0 auto;align-items:center;height:100%;padding:0 16px;box-sizing:border-box;border-right:2px solid #111111;color:#111111}
.hdr .a-nav a:last-child{border-right:0}
.hdr .a-nav a[aria-current="page"]{background:#111111;color:#FFD10A;text-decoration:none}
.hdr .a-nav::after{content:"";flex:0 0 1px}
.scroller [id]{scroll-margin-top:150px}
.hdr::before{content:"";grid-area:1/1/2/7;background:#FFFFFF;z-index:1;margin:-16px -16px 0}
.hdr .a-brand,.hdr .a-cta{position:relative;z-index:2}
.hdr{clip-path:inset(0 0 0 0);transition:clip-path .5s cubic-bezier(.4,0,.2,1)}
.hdr .a-nav{transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .4s ease}
.hdr .a-nav{margin:0 52px !important}
.hdr .nav-arr{display:flex !important;grid-area:2/1/3/7;align-self:stretch;align-items:center;justify-content:center;width:46px;margin:0;padding:0;border:0;border-radius:0;cursor:pointer;background:#5600E6;color:#FFFFFF;z-index:1;transition:opacity .25s ease,background-color .2s ease,transform .5s cubic-bezier(.4,0,.2,1)}
.hdr .nav-arr svg{width:14px;height:14px;display:block}
.hdr .nav-arr:active{background:#111111}
.hdr .nav-arr[data-d="l"]{justify-self:start}
.hdr .nav-arr[data-d="r"]{justify-self:end}
html[data-nl="0"] .hdr .nav-arr[data-d="l"],html[data-nr="0"] .hdr .nav-arr[data-d="r"]{opacity:.35;pointer-events:none}
:root{--hdrH:calc(74px + min(calc((100vw - 62px) / 6), 64px))}
html[data-nav="off"]{--hdrH:calc(22px + min(calc((100vw - 62px) / 6), 64px))}
html[data-nav="off"] .hdr{clip-path:inset(0 0 52px 0)}
html[data-nav="off"] .hdr .a-nav,html[data-nav="off"] .hdr .nav-arr{transform:translateY(-52px);opacity:0;pointer-events:none}
}
@media (min-width:600px) and (max-width:840px){.hdr .a-nav a{flex:1 0 auto;justify-content:center;padding:0 10px}}
@media (min-width:761px) and (max-width:840px){.hdr{padding:20px 20px 6px !important;grid-template-rows:calc((100vw - 106px) / 12) 46px !important}.hdr::before{margin:-20px -20px 0}:root{--hdrH:calc(78px + (100vw - 106px) / 12)}html[data-nav="off"]{--hdrH:calc(26px + (100vw - 106px) / 12)}}
.wa-t{max-width:240px !important;padding:0 14px !important}
/* mobile-fix start */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,label,input{-webkit-tap-highlight-color:rgba(0,0,0,0)}
.wa{bottom:calc(16px + env(safe-area-inset-bottom,0px)) !important;right:calc(16px + env(safe-area-inset-right,0px)) !important}
@media (max-width:760px){
.hdr .a-brand svg{height:clamp(16px,5.2vw,30px) !important}
.wa{right:calc(10px + env(safe-area-inset-right,0px)) !important;bottom:calc(10px + env(safe-area-inset-bottom,0px)) !important;box-shadow:3px 3px 0 #111111 !important}
.hdr{grid-auto-rows:min(calc((100vw - 62px) / 6), 64px) !important}
.wa-i{width:46px !important;height:46px !important}
.wa-i svg{width:28px !important;height:28px !important}
.wa-t{font-size:12px !important;padding:0 10px !important}
.wa-t b{font-size:10.5px !important}
footer a{display:inline-block;padding:4px 0}
.wrap,.mg{padding-bottom:76px !important}
section[aria-labelledby="login-t"]{min-height:0 !important}
}

@media (max-width:760px){
.modes span{font-size:11px}
.m .who{font-size:11px}
.nd{font-size:11px}
.stamp{right:auto !important;left:10px;bottom:-22px !important;font-size:12px;padding:6px 10px;white-space:nowrap}
}
/* mobile-fix end */
/* pt start */
.mzl{position:fixed;inset:0;z-index:2147483600;background:#FFFFFF;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:#111111;overflow:auto}
html[data-lock="0"] .mzl,html[data-dc-canvas] .mzl{display:none !important}
.mzl-bg{position:absolute;inset:0;padding:20px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:calc((100vw - 106px) / 12);gap:6px;align-content:start;overflow:hidden}
.mzl-bg > i{display:block;background:var(--c);opacity:.14;transition:opacity 1.6s ease}
.mzl-bg > i:hover{opacity:1;transition:opacity .4s ease}
.mzl-c{position:relative;width:min(100%,440px);background:#FFFFFF;border:2px solid #111111;box-shadow:8px 8px 0 #111111;display:flex;flex-direction:column;gap:14px;padding:0 0 24px;margin:0;box-sizing:border-box}
.mzl-brand{background:#111111;color:#FFFFFF;padding:22px 26px;display:flex}
.mzl-brand svg{height:30px;width:auto;display:block;fill:currentColor}
.mzl-k,.mzl-h,.mzl-p,.mzl-lb,.mzl-row,.mzl-m{margin:0 26px}
.mzl-k{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:8px;margin-top:8px}
.mzl-k i{width:10px;height:10px;background:#5600E6;display:block}
.mzl-h{font-size:clamp(26px,6vw,34px);font-weight:800;letter-spacing:-.04em;line-height:1}
.mzl-p{font-size:15px;line-height:1.4;color:#3A3A37}
.mzl-lb{font-size:13px;font-weight:700;margin-top:4px}
.mzl-row{display:flex;gap:6px}
.mzl-row input{flex:1 1 auto;min-width:0;height:48px;border:2px solid #111111;border-radius:0;padding:0 14px;font:inherit;font-size:16px;background:#FFFFFF;color:#111111;box-sizing:border-box;outline:none;-webkit-appearance:none;appearance:none}
.mzl-row input:focus{border-color:#5600E6;box-shadow:0 0 0 3px rgba(86,0,230,.25)}
.mzl-row button{flex:0 0 auto;height:48px;border:0;border-radius:0;background:#FFD10A;color:#111111;font:inherit;font-size:16px;font-weight:800;padding:0 18px;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.mzl-row button:hover,.mzl-row button:focus-visible{background:#111111;color:#FFD10A}
.mzl-m{min-height:20px;font-size:13px;font-weight:600;line-height:1.35}
.mzl-m span{display:none}
.mzl-m .m-bad,.mzl-m .m-wait,.mzl-m .m-empty{color:#C4002B}
.mzl-m .m-idle,.mzl-m .m-busy{color:#5600E6}
html[data-lockmsg="bad"] .mzl-m .m-bad,html[data-lockmsg="idle"] .mzl-m .m-idle,html[data-lockmsg="wait"] .mzl-m .m-wait,html[data-lockmsg="empty"] .mzl-m .m-empty{display:inline}
html[data-lockbusy] .mzl-m span{display:none}
html[data-lockbusy] .mzl-m .m-busy{display:inline}
html[data-lockmsg="bad"] .mzl-row input,html[data-lockmsg="empty"] .mzl-row input{border-color:#C4002B}
.mzl-x{position:absolute;top:-18px;right:16px;z-index:2;margin:0;background:#FF3F7A;color:#111111;border:2px solid #111111;box-shadow:3px 3px 0 #111111;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(8px) scale(.85);pointer-events:none;transition:opacity .18s ease,transform .3s cubic-bezier(.3,1.7,.5,1)}
.mzl-x svg{width:11px;height:11px;fill:#111111;display:block}
html[data-lockmsg="bad"] .mzl-x,html[data-lockmsg="wait"] .mzl-x{opacity:1;transform:none}
html[data-lockmsg="bad"] .mzl-c,html[data-lockmsg="wait"] .mzl-c{border-color:#C4002B}
html[data-lockshake="1"] .mzl-c{animation:mzlShakeA .7s cubic-bezier(.36,.07,.19,.97)}
html[data-lockshake="2"] .mzl-c{animation:mzlShakeB .7s cubic-bezier(.36,.07,.19,.97)}
html[data-lockshake="1"] .mzl-x{animation:mzlDropA .75s cubic-bezier(.2,1.6,.4,1) backwards}
html[data-lockshake="2"] .mzl-x{animation:mzlDropB .75s cubic-bezier(.2,1.6,.4,1) backwards}
html[data-lockmsg="bad"][data-lockshake="1"] .mzl-m .m-bad,html[data-lockmsg="wait"][data-lockshake="1"] .mzl-m .m-wait{display:inline-block;animation:mzlPopA .5s cubic-bezier(.2,1.8,.4,1) .15s backwards}
html[data-lockmsg="bad"][data-lockshake="2"] .mzl-m .m-bad,html[data-lockmsg="wait"][data-lockshake="2"] .mzl-m .m-wait{display:inline-block;animation:mzlPopB .5s cubic-bezier(.2,1.8,.4,1) .15s backwards}
html[data-lockshake="1"] .mzl-row button{animation:mzlFlashA .8s ease}
html[data-lockshake="2"] .mzl-row button{animation:mzlFlashB .8s ease}
html:not([data-lockmsg="bad"]):not([data-lockmsg="wait"]) .mzl-x{animation:none !important}
@keyframes mzlDropA{0%{opacity:0;transform:translateY(-34px) rotate(-6deg) scale(.7)}55%{opacity:1;transform:translateY(4px) rotate(2deg) scale(1.08)}75%{transform:translateY(-3px) rotate(-1deg) scale(.98)}100%{opacity:1;transform:none}}
@keyframes mzlDropB{0%{opacity:0;transform:translateY(-34px) rotate(-6deg) scale(.7)}55%{opacity:1;transform:translateY(4px) rotate(2deg) scale(1.08)}75%{transform:translateY(-3px) rotate(-1deg) scale(.98)}100%{opacity:1;transform:none}}
@keyframes mzlPopA{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes mzlPopB{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes mzlFlashA{0%,45%{background:#FF3F7A;color:#111111}100%{background:#FFD10A;color:#111111}}
@keyframes mzlFlashB{0%,45%{background:#FF3F7A;color:#111111}100%{background:#FFD10A;color:#111111}}
@keyframes mzlShakeA{0%,100%{transform:translateX(0)}10%{transform:translateX(-22px) rotate(-1.2deg)}24%{transform:translateX(20px) rotate(1deg)}38%{transform:translateX(-16px) rotate(-.8deg)}52%{transform:translateX(12px) rotate(.5deg)}66%{transform:translateX(-7px)}80%{transform:translateX(4px)}92%{transform:translateX(-2px)}}
@keyframes mzlShakeB{0%,100%{transform:translateX(0)}10%{transform:translateX(-22px) rotate(-1.2deg)}24%{transform:translateX(20px) rotate(1deg)}38%{transform:translateX(-16px) rotate(-.8deg)}52%{transform:translateX(12px) rotate(.5deg)}66%{transform:translateX(-7px)}80%{transform:translateX(4px)}92%{transform:translateX(-2px)}}
/* correct password: the same transition mosaic falls over the lock, then lifts into the loader */
html[data-lock="out"] .mzt{z-index:2147483700}
html[data-lock="out"] .mzl-c{animation:mzlOut .45s ease .12s both !important}
@keyframes mzlOut{to{opacity:0;transform:scale(.96)}}
@media (max-height:640px){.mzl{align-items:flex-start;padding-top:28px}}
.mzl{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
@media (max-width:760px){.mzl{padding:16px}.mzl-bg{padding:16px;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:calc((100vw - 62px) / 6)}.mzl-c{box-shadow:5px 5px 0 #111111}.mzl-k,.mzl-h,.mzl-p,.mzl-lb,.mzl-row,.mzl-m{margin:0 20px}.mzl-brand{padding:18px 20px}.mzl-k{margin-top:6px}}
.mzt{position:fixed;inset:0;z-index:2147483000;background:#FFFFFF;display:block;overflow:hidden;animation:mztSafe .4s ease 4.5s both}
html[data-pt] .mzt{animation:none}
html[data-dc-canvas] .mzt,html[data-pt="done"] .mzt{display:none !important}
.mzt-w{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:calc(100vw / 12);align-content:start}
.mzt-w > i{display:block;background:var(--c)}
.mzt-l{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;opacity:0;pointer-events:none;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:#111111}
.mzt-st{position:relative;width:152px;height:152px;perspective:700px}
.mzt-cube{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(-76px)}
.mzt-f{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,22px);grid-auto-rows:22px;gap:4px;backface-visibility:hidden}
.mzt-f > i{display:block}
.mzt-fr{transform:translateZ(76px)}
.mzt-ri{transform:rotateY(90deg) translateZ(76px);opacity:0}
.mzt-bk{transform:rotateY(180deg) translateZ(76px);opacity:0}
.mzt-le{transform:rotateY(-90deg) translateZ(76px);opacity:0}
.mzt-tp{transform:rotateX(90deg) translateZ(76px);opacity:0}
.mzt-fr > i{background:#111111;transform:scale(0)}
.mzt-logo{position:absolute;left:0;top:26px;width:152px;height:100px;fill:#111111;overflow:visible}
.mzt-tx{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em}
.mzt-dt i{font-style:normal;animation:mztDot 1.2s steps(1) infinite}
.mzt-dt i:nth-child(2){animation-delay:.2s}.mzt-dt i:nth-child(3){animation-delay:.4s}
.mzt-bar{display:grid;grid-template-columns:repeat(10,10px);gap:3px}
.mzt-bar > i{display:block;height:10px;background:#E4E3DE;transition:background-color .25s ease}
html[data-pp="1"] .mzt-bar > i:nth-child(-n+1){background:#5600E6}
html[data-pp="2"] .mzt-bar > i:nth-child(-n+2){background:#FFD10A}
html[data-pp="3"] .mzt-bar > i:nth-child(-n+3){background:#FF6B00}
html[data-pp="4"] .mzt-bar > i:nth-child(-n+4){background:#FF3F7A}
html[data-pp="5"] .mzt-bar > i:nth-child(-n+5){background:#00DE7E}
html[data-pp="6"] .mzt-bar > i:nth-child(-n+6){background:#5600E6}
html[data-pp="7"] .mzt-bar > i:nth-child(-n+7){background:#FFD10A}
html[data-pp="8"] .mzt-bar > i:nth-child(-n+8){background:#FF6B00}
html[data-pp="9"] .mzt-bar > i:nth-child(-n+9){background:#FF3F7A}
html[data-pp="10"] .mzt-bar > i:nth-child(-n+10){background:#00DE7E}
/* load: the cover clears, the cube loader plays */
html[data-pt="load"] .mzt-w > i{animation:mztTileOut .42s cubic-bezier(.5,0,.75,0) var(--d) both}
html[data-pt="load"] .mzt-l{opacity:1;transition:opacity .35s ease .25s}
html[data-pt="load"] .mzt-cube,html[data-pt="fin"] .mzt-cube{animation:mztCube 3.4s linear infinite}
html[data-pt="load"] .mzt-logo,html[data-pt="fin"] .mzt-logo{animation:mztLogo 3.4s linear infinite}
html[data-pt="load"] .mzt-fr > i.m,html[data-pt="fin"] .mzt-fr > i.m{animation:mztM 3.4s linear var(--d) infinite both}
html[data-pt="load"] .mzt-fr > i.n,html[data-pt="fin"] .mzt-fr > i.n{animation:mztN 3.4s linear var(--d) infinite both}
html[data-pt="load"] .mzt-ri,html[data-pt="load"] .mzt-bk,html[data-pt="load"] .mzt-le,html[data-pt="load"] .mzt-tp{animation:mztF 3.4s linear infinite}
/* fin: loader done, whole layer fades away */
html[data-pt="fin"] .mzt-w{display:none}
html[data-pt="fin"] .mzt-l{opacity:1}
html[data-pt="fin"] .mzt{animation:mztFade .55s ease .05s both;pointer-events:none}
/* in: arriving from another page, the mosaic lifts */
html[data-pt="in"] .mzt{animation:mztBg .5s ease .12s both;pointer-events:none}
html[data-pt="in"] .mzt-w > i{animation:mztTileOut .4s cubic-bezier(.5,0,.75,0) var(--d) both}
/* out: leaving, the mosaic drops in */
html[data-pt="out"] .mzt{animation:mztBgIn .3s ease .2s both}
html[data-pt="out"] .mzt-w > i{animation:mztTileIn .34s cubic-bezier(.2,.9,.3,1.15) var(--d) both}
@media (max-width:760px){.mzt-w{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:calc(100vw / 6)}}
@keyframes mztSafe{to{opacity:0;visibility:hidden}}
@keyframes mztFade{to{opacity:0;visibility:hidden}}
@keyframes mztBg{from{background-color:#FFFFFF}to{background-color:rgba(255,255,255,0)}}
@keyframes mztBgIn{from{background-color:rgba(255,255,255,0)}to{background-color:#FFFFFF}}
@keyframes mztTileOut{from{transform:scale(1);opacity:1}to{transform:scale(0);opacity:0}}
@keyframes mztTileIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes mztDot{0%{opacity:0}35%,100%{opacity:1}}
@keyframes mztLogo{0%,10%{opacity:1;transform:scale(1)}17%{opacity:0;transform:scale(.94)}89%{opacity:0;transform:scale(.94)}97%,100%{opacity:1;transform:scale(1)}}
@keyframes mztM{0%,11%{transform:scale(0);opacity:0;background:#111111}17%{transform:scale(1);opacity:1;background:#111111}25%{background:#111111}33%{transform:scale(1);background:var(--c)}71%{background:var(--c)}79%{transform:scale(1);background:#111111}88%{transform:scale(1);opacity:1;background:#111111}93%,100%{transform:scale(.4);opacity:0;background:#111111}}
@keyframes mztN{0%,22%{transform:scale(0);background:var(--c)}31%{transform:scale(1);background:var(--c)}73%{transform:scale(1);background:var(--c)}81%,100%{transform:scale(0);background:var(--c)}}
@keyframes mztF{0%,35%{opacity:0}41%,69%{opacity:1}75%,100%{opacity:0}}
@keyframes mztCube{0%,36%{transform:translateZ(-76px) rotateX(0deg) rotateY(0deg)}46%{transform:translateZ(-76px) rotateX(-26deg) rotateY(-42deg)}64%{transform:translateZ(-76px) rotateX(-26deg) rotateY(-402deg)}75%,100%{transform:translateZ(-76px) rotateX(0deg) rotateY(-360deg)}}
/* pt end */

/* Keep the story construction visible in every motion mode; reduce idle loops only. */
@media (prefers-reduced-motion:reduce){
.bob,.mz i.e::after,.horse,.car,.typ i{animation:none !important}
.trav,.rail .fl{transition:none}
}