*{box-sizing:border-box;margin:0}
body{background:#0c0f13;color:#e8ecf1;font-family:'Avenir Next','Segoe UI',sans-serif;
 height:100vh;overflow:hidden;display:flex;flex-direction:column}
#jnav{display:flex;gap:6px;flex-wrap:wrap;padding:10px 26px 0;border-top:1px solid #1c222b;margin-top:12px;max-width:1720px;margin-left:auto;margin-right:auto;width:100%;box-sizing:border-box}
#jnav .jlab{text-decoration:none;cursor:pointer;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5f6b79;
 align-self:center;margin-right:4px}
#jnav .jtab{font-size:10.5px;font-weight:700;color:#8b96a5;text-decoration:none;
 border:1px solid #232b36;border-radius:999px;padding:3px 10px;white-space:nowrap}
#jnav .jtab.on{color:#06281a;background:#10c775;border-color:#10c775}
header{display:flex;flex-direction:column;gap:2px;padding:16px 26px 0;max-width:1720px;margin:0 auto;width:100%;box-sizing:border-box}
header .crumbs{display:flex;gap:16px;margin-bottom:4px;font-size:12px}
header .crumbs a{color:#10c775;font-weight:700;text-decoration:none}
header .crumbs a:hover{text-decoration:underline}
header .k{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#10c775}
header .j{font-size:22px;font-weight:800;color:#eef2f8;line-height:1.25}
.about{padding:6px 26px 0;font-size:14px;line-height:1.6;color:#c6cdd6;max-width:1720px;margin:0 auto;width:100%;box-sizing:border-box;
 text-wrap:balance}
.about>span,.about{--noop:0}
.about .askl{color:#8b96a5}
.about .intro-cap{display:block;max-width:940px}
.about .ask{color:#eef2f8;font-style:italic}
.card .framing{margin:14px auto 0;max-width:640px;text-align:left;border-top:1px solid #2a3038;padding-top:12px}
.card .framing p{margin:0 0 6px;font-size:13.5px;line-height:1.5;color:#c6cdd6}
.card .framing b{color:#ffd479;font-weight:800;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;margin-right:6px}
.card .framing i{color:#eef2f8}
.card .wgw .wgk{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#ffd479;margin:0 0 8px}
.card .wgw .g{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.card .wgw .g p{font-size:12px;line-height:1.45;color:#aab3bf;margin:0}
.card .wgw .g p span{display:block;color:#eef2f8;font-weight:700;margin-bottom:1px}
@media(max-width:560px){.card .wgw .g{grid-template-columns:1fr}}
.card .endbody{max-width:560px;margin:10px auto 0;font-size:14px;line-height:1.55;color:#aab4c0}
#chapters{display:flex;gap:6px;align-items:stretch;padding:16px 26px 12px;flex-wrap:nowrap;width:100%;box-sizing:border-box}
.chap{border:1px solid #232b36;background:#12161d;border-radius:12px;padding:8px 13px;
 cursor:pointer;display:flex;flex-direction:column;gap:2px;justify-content:center;flex:1 1 0;min-width:0}
.chev{display:flex;align-items:center;color:#46505d;flex:none}
.chev.on{color:#c9973f}
.chev svg{display:block}
.chap .ct{font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#5f6b79}
.chap .cn{font-size:13.5px;font-weight:700;color:#66707d}
.chap .cw{display:none;font-size:11px;color:#8b96a5;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.chap .cq{display:none;font-size:9.5px;font-style:italic;color:#5f6b79}
.chap.on .cq{display:block}
.chap.on .cq{color:#8a8060}
.chap.on{border-color:#ffd479;background:#171b14}
.chap.on .ct{color:#c9973f}
.chap.on .cn{color:#ffd479}
.chap.on .cw{display:flex}
.chap.done .cn{color:#aab4c0}
.cw .wc{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7fa8d9;
 border:1px solid #2c3644;border-radius:999px;padding:2px 9px}
.cw .wt{font-size:12px;font-weight:700;color:#e8ecf1}
/* the laptop re-base (Sheran, 7 Sep 2026): a 900px-tall screen is the design
   viewport. The chapter strip reads one line per chapter with the timing only on
   the live chapter; the aside never outgrows the device. */
#chapters .chap{padding:7px 11px;gap:1px}
#chapters .chap .ct{display:none}
#chapters .chap.on .ct{display:block}
#chapters .chap .cn{font-size:11.5px;line-height:1.22}
#chapters .chap .cw,#chapters .chap .cq{display:none!important}
.vox{max-height:440px}
#body{flex:1;display:flex;min-height:0;max-width:1720px;margin:0 auto;width:100%;box-sizing:border-box}
#main{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0}
/* the rail (Sheran, 7 Sep 2026): everything that personalises the run sits
   at the left, in view while the film plays; the view switch heads it, the
   outcome the film is on lights up as the tour advances. Journeys stay on
   the strip above, playback stays below. */
#rail{width:232px;flex:none;display:flex;flex-direction:column;gap:18px;padding:16px 18px 12px 26px;
 border-right:1px solid #1c222b;overflow-y:auto;box-sizing:border-box}
#rail .rgroup{display:flex;flex-direction:column;gap:6px}
#rail .rgroup>.lab{margin:0 0 2px}
#rail .rgroup>span:not(.lab){display:flex;flex-direction:column;gap:5px}
#rail .pill{display:block;text-align:left;border-radius:8px;padding:7px 11px;font-size:12.5px;line-height:1.3;white-space:normal}
#rail #verwrap .pill{border-color:#3a4a58;background:#101720;white-space:nowrap;font-size:12px;padding:7px 10px}
#rail .rgroup.rchan{flex-direction:row;flex-wrap:wrap;gap:5px}
#rail .rgroup.rchan>.lab{width:100%;margin:0 0 1px}
#rail .rgroup.rchan .pill{font-size:11px;padding:4px 9px;border-radius:999px}
#rail #verwrap .pill.on{background:#ffd479;border-color:#ffd479;color:#2a1f05}
#stagewrap{flex:1;position:relative;display:flex;min-height:0}
/* the aside is complementary context (Sheran, 6 Sep 2026): it no longer
   shares the device zoom (fit() scales .scol only), and its scale sits one
   step below the What changes strip: strip 15px, aside body 14px, quote 16px */
.vox{width:380px;max-width:380px;flex:none;border-left:3px solid #ffd479;padding:8px 0 8px 24px;text-align:left;
 display:flex;flex-direction:column;gap:24px;box-sizing:border-box}
.vox .kick{display:block;font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;
 color:#eef2f8;line-height:1.5;margin-bottom:-6px}
.vox .trig{font-size:13px;color:#aab4c0;margin:0 0 12px;line-height:1.45}
.vox .trig .tlab{display:block;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#7fa8d9;margin-bottom:3px}
.vox .kick::before{content:"Why this moment matters";display:block;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#ffd479;margin-bottom:4px}
.vox .blab{display:block;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
 color:#c9973f;margin-bottom:4px}
.vox .btxt{font-size:14px;line-height:1.5;color:#eef2f8}
.vox .dstat{display:flex;flex-direction:column;gap:2px;margin:0}
.ucap{display:flex;align-items:baseline;gap:8px;max-width:960px;margin:16px auto 0;font-size:13.5px;color:#aab4c0;
 line-height:1.5;justify-content:center;text-align:left}
.ucap .uctext{text-wrap:balance}
.ucap .uchip{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
 color:#06281a;background:#10c775;border-radius:4px;padding:2px 7px;position:relative;top:-1px}
.ucap .uchip.mech{color:#cdb8e8;background:transparent;border:1px solid #6a3f8e}
.uchips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.uchips b{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5f6b79}
.uchips .pchip{font-size:12px;font-weight:700;color:#8fe6bf;background:#0d2a1d;
 border:1px solid #1d4a35;border-radius:999px;padding:2px 9px}
.vox .vq{font-size:16px;line-height:1.5;color:#eef2f8;font-style:italic;text-wrap:pretty}
.vox .vq.data{font-style:normal;font-weight:700}
.vox .vq:not(.data)::before{content:'\201C'}.vox .vq:not(.data)::after{content:'\201D'}
.vox .vsrc{display:block;font-size:11px;color:#77828f;margin-top:0}
.vox .dbig{font-size:22px;font-weight:800;color:#e07070}
.vox .dbig.lvl{color:#ffd479}
.vox .dline{font-size:14px;color:#aab4c0;line-height:1.5}


/* the device holds one position from scene to scene, so only the comms change
   (Sheran, 5 Sep 2026): every device scene is a two-column duo, the aside
   column always 400px wide (empty and invisible when a scene has no aside) */
.duo{display:flex;align-items:center;gap:56px;flex-wrap:nowrap;justify-content:center}
.vox.voxempty{border-left:0;padding:0;min-height:1px}
.vox .bblock{margin:0}
.qblock{display:flex;flex-direction:column;gap:3px}
.vox .btxt{font-size:14px}
#stage{flex:1;display:grid;padding:2px 20px 6px}
.scene{grid-area:1/1;display:flex;flex-direction:column;align-items:stretch;min-height:0;
 padding:3px 0 8px;opacity:0;transition:opacity .26s;pointer-events:none}
.scene .mid{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.scene .midin{display:flex;flex-direction:column;align-items:center;transform-origin:center center}
.scene .when{flex:none;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#ffd479;padding:2px 0;margin-bottom:clamp(16px,4.5vh,44px);text-align:center;display:flex;align-items:center;gap:10px;justify-content:center}
.scene .wfire{flex:none;font-size:12px;color:#8b96a3;text-align:center;max-width:680px;margin:calc(-1*clamp(10px,3.8vh,38px)) auto clamp(12px,3.5vh,38px);line-height:1.45}
.scene .wfire b{color:#aeb7c2;font-weight:800;text-transform:uppercase;font-size:10px;letter-spacing:.09em;margin-right:6px}
.scene .when .wst{font-size:9.5px;font-weight:800;letter-spacing:.08em;border-radius:999px;padding:2.5px 10px;border:1px solid}
.scene .when .wst.new{color:#ffd479;border-color:#ffd47955}
.scene .when .wst.chg{color:#10c775;border-color:#10c77555}
.scene .when .wst.sty{color:#aab4c0;border-color:#3a4250}
.scene .when .wst.wch{color:#8b96a5;border-color:#3a4250;text-transform:none;letter-spacing:.02em}
.scene .capzone{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;padding:14px 0 6px;width:100%;min-height:80px;box-sizing:border-box}
.scene.on{opacity:1;pointer-events:auto;transition:opacity .45s .2s}
#caps{display:none}
#caps .knew{font-size:11.5px;color:#8b96a5}
#caps .knew b{color:#aab7c6;font-weight:700;letter-spacing:.06em;font-size:9.5px;text-transform:uppercase;margin-right:6px}
#caps .tdy{font-size:11.5px;color:#77828f;display:flex;align-items:center;gap:8px}
#caps .tdy .tag{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
 border:1px solid #2c3644;border-radius:999px;padding:2px 8px;color:#9aa6b3}
#caps .tdy .tag.none{color:#e0a86e;border-color:#4a3a26}
#caps .tdy .tag.chg{color:#10c775;border-color:#33502a}
#caps .tdy .arr{color:#5f6b79;margin:0 2px}
#caps .tdy .tnote,#caps .tdy .cnote{max-width:340px}

.phone{width:220px;height:440px;border-radius:26px;border:5px solid #23262d;background:#000;
 overflow:hidden;position:relative;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.lock{background:linear-gradient(165deg,#17233a,#0b1220 60%,#0a0d14);height:100%;
 display:flex;flex-direction:column;align-items:center;padding:30px 12px}
.lock .tm{font-size:38px;font-weight:300;color:#eef2f8;margin-top:12px}
.lock .dt{font-size:13px;color:#9fb0c6}
.notif{margin-top:26px;width:100%;background:rgba(245,247,250,.94);color:#111;border-radius:16px;
 padding:11px 13px;text-align:left;animation:drop .6s ease}
@keyframes drop{from{transform:translateY(-24px);opacity:0}to{transform:none;opacity:1}}
.notif .app{display:flex;align-items:center;gap:6px;font-size:10.5px;color:#555;
 text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.notif .app .ic{width:16px;height:16px;border-radius:4px;background:#0a5b3e;display:inline-flex;
 align-items:center;justify-content:center;font-size:10px}
.notif b{font-size:13.5px;display:block;margin-bottom:2px}
.notif p{font-size:12.5px;line-height:1.4;color:#333}
.la{margin-top:26px;width:100%;background:rgba(16,22,30,.92);border:1px solid #2c3a4d;color:#e8ecf1;
 border-radius:18px;padding:12px 14px;text-align:left;animation:drop .6s ease}
.la b{font-size:13px}.la p{font-size:12px;color:#aab7c6;margin-top:3px;line-height:1.4}
.la .meta{font-size:11px;color:#ffd479;margin-top:6px}
.la .app{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#8fa0b5;display:flex;align-items:center;gap:6px;margin-bottom:5px}
.la .app .ic{width:14px;height:14px;border-radius:4px;background:#0a5b3e;display:inline-flex;overflow:hidden;flex:none}
.la .app .ic img{width:100%;height:100%;object-fit:cover;display:block}
.law{margin-top:26px;width:100%;background:#151a21;border:1px solid #2a3038;border-radius:22px;padding:11px 13px;text-align:left;color:#f2f4f6;animation:drop .6s ease}
.law .lah{display:flex;align-items:center;gap:8px;font-size:10.5px;color:#c7cfd9;border-bottom:1px solid #262c35;padding-bottom:7px;margin-bottom:8px;white-space:nowrap;overflow:hidden}
.law .lah .ic{width:16px;height:16px;border-radius:4px;background:#0a5b3e;display:inline-flex;overflow:hidden;flex:none}.law .lah .ic img{width:100%;height:100%;object-fit:cover;display:block}
.law .lar{font-weight:700;color:#fff}.law .las{padding-left:8px;border-left:1px solid #2f3742;color:#aab7c6}
.law .lac{display:flex;justify-content:space-between;gap:10px}.law .lacl{min-width:0}
.law .lal{font-size:9.5px;color:#8fa0b5;letter-spacing:.03em}.law .lav{font-size:17px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;line-height:1.2}.law .lak{color:#3fbf86;text-align:right}
.mail{width:min(560px,92vw);background:#f6f7f9;color:#16202b;border-radius:14px;overflow:hidden;
 box-shadow:0 24px 70px rgba(0,0,0,.55);animation:drop .6s ease}
.mail .bar{background:#e9edf2;padding:10px 18px;font-size:12px;color:#5a6675;display:flex;gap:8px;align-items:center}
/* the frog stands free of any tile in our own chrome (Sheran, 5 Sep 2026);
   only the push notification keeps the app-icon tile, because iOS renders one */
.mail .bar .ic{width:22px;height:22px;border-radius:0;background:transparent;color:#0a5b3e;display:inline-flex;
 align-items:center;justify-content:center;font-size:12px}
.mail .sub{padding:16px 22px 4px;font-size:16px;font-weight:700}
.mail .bod{padding:8px 22px 20px;font-size:13.5px;line-height:1.55;color:#2c3a48}
.mail .cta{display:inline-block;margin:0 22px 22px;background:#0a5b3e;color:#fff;border-radius:9px;
 padding:10px 18px;font-size:13.5px;font-weight:700}
.realwrap{display:flex;flex-direction:column;align-items:center;min-height:0;position:relative}
.eband .bfrog.dance{animation:frogdance 1.5s ease-in-out infinite}
@keyframes frogdance{0%,100%{transform:translate(-50%,-50%)}12%{transform:translate(-50%,-46%) scale(1.06,.9)}28%{transform:translate(-50%,calc(-50% - 16px)) scale(.94,1.08) rotate(-4deg)}42%{transform:translate(-50%,-47%) scale(1.05,.93)}58%{transform:translate(-50%,calc(-50% - 12px)) scale(.96,1.05) rotate(4deg)}74%{transform:translate(-50%,-46%) scale(1.04,.94)}88%{transform:translate(-50%,-50%) rotate(-2deg)}}
.sfx{position:absolute;width:4px;height:4px;border-radius:50%;color:#ffd479;background:currentColor;animation:fwpop 2.4s ease-out infinite;z-index:3}
.sfx.f2{color:#10c775;animation-delay:.8s}.sfx.f3{color:#e84f8a;animation-delay:1.5s}
@media (prefers-reduced-motion:reduce){.sfx,.eband .bfrog.dance{animation:none!important}}
.annwrap{position:relative;display:flex;flex-direction:column;align-items:center}
.ann{position:absolute;right:calc(100% + 16px);transform:translateY(-50%);text-align:right;font-size:12px;color:#8fe6bf;white-space:nowrap}
.ann b{display:block;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#10c775}
.ann::after{content:'';position:absolute;top:50%;left:100%;width:13px;border-top:1.5px dashed #10c775}
.ringed{outline:1.5px dashed #10c775;outline-offset:3px}
.asismail{width:225px;max-height:460px;overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.5);position:relative;outline:1.5px dashed #e07070;outline-offset:3px}
.asismail img{display:block;width:100%}
.asismail::after{content:'';position:absolute;left:0;right:0;bottom:0;height:80px;background:linear-gradient(rgba(12,15,19,0),#0c0f13)}
.ann.warn b{color:#e07070}.ann.warn{color:#e0a86e}.ann.warn::after{border-top-color:#e07070}
.mail .escroll{--evh:clamp(320px,100vh - 640px,458px);height:var(--evh);overflow:hidden;background:#fff}
.mail .escroll>*{display:block;width:100%;animation:escr 16s ease-in-out 1.5s infinite alternate}
@keyframes escr{0%,8%{transform:translateY(0)}88%,100%{transform:translateY(calc(var(--evh) - 100%))}}
.mail .escroll.fits{height:auto}
.mail .escroll.fits>*{animation:none}
.mail .einner{background:#fff;padding-bottom:4px}
.mail.rtm{width:min(400px,92vw)}
.mail.rtm .einner.rt{padding-bottom:0}
.mail.rtm.rtd .escroll,.mail.rtm.rtd .einner{background:#0b0b0f}
.einner.rt .rtb{padding:16px 22px 18px;color:#1b1f24}
.mail.rtm.rtd .rtb{color:#f2f4f6}
.einner.rt .rth{display:block;font-size:18px;line-height:1.15;font-weight:800;letter-spacing:-.01em;margin:0 0 8px}
.mail.rtm.rtd .rth{color:#fff}
.einner.rt .rtb p{margin:0 0 10px;font-size:12.5px;line-height:1.5}
.einner.rt .rtcta{display:inline-block;background:#10c775;color:#07281a;font-weight:700;font-size:12.5px;padding:9px 14px;border-radius:7px;margin-top:2px}
.mail .einner img{display:block;width:100%;height:auto;margin:0 auto}
.mail.eshot{width:fit-content;max-width:min(560px,92vw)}
.mail.eshot .einner img{width:min(380px,86vw)}
.mail.eshot .sub{max-width:min(380px,86vw)}
.mail .emod{padding:11px 22px 12px;border-top:1px solid #e8ebef;font-size:13.5px;line-height:1.55;color:#2c3a48}
.mail .emod:first-child{border-top:0}
.mail .ehero{background:#101826;border-top:0;padding:20px 22px 18px}
.mail .ehero b{color:#10c775;font-size:10.5px}
.mail .ehero p{color:#dfe6ee;font-size:15px;line-height:1.55}
.mail .estat{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.mail .estat .tile{display:inline-flex;flex-direction:column;gap:2px;background:#1a2536;border-radius:10px;padding:9px 16px 10px}
.mail .estat .tlab{font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#8fa3bd}
.mail .estat .tval{font-size:26px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.mail .edelta{font-size:11px;font-weight:800;color:#06281a;background:#10c775;border-radius:999px;padding:4px 11px}
.mail .etint{background:#eef9f3}
.mail .etint b{color:#0a5b3e}
.mail .elist{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.mail .elist li{display:flex;gap:10px;align-items:flex-start}
.mail .elist li i{flex:none;width:20px;height:20px;border-radius:50%;background:#0a5b3e;color:#fff;font-style:normal;font-weight:800;font-size:11px;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.mail .ebrand{background:#0b0d10;border-top:0;display:flex;justify-content:center;align-items:center;gap:9px;padding:13px 22px}
.mail .ecelebrate{display:flex;justify-content:center;align-items:center;padding:18px 0 6px;background:radial-gradient(circle at 50% 120%,rgba(16,199,117,.22),transparent 70%);position:relative;overflow:hidden}
.mail .ecelebrate img{width:150px;height:150px;animation:frogin .9s cubic-bezier(.2,1.4,.4,1),frogbob 3.4s ease-in-out 1s infinite;position:relative;z-index:1;filter:drop-shadow(0 14px 12px rgba(11,32,24,.28))}
@keyframes frogin{0%{transform:translateY(46px) scale(.7);opacity:0}55%{transform:translateY(-14px) scale(.96,1.06);opacity:1}75%{transform:translateY(3px) scale(1.06,.92)}100%{transform:none;opacity:1}}
@keyframes frogbob{0%,100%{transform:translateY(0)}30%{transform:translateY(-7px) scale(.99,1.02) rotate(-1.5deg)}60%{transform:translateY(1px) scale(1.02,.98) rotate(1.2deg)}}
.mail .ecelebrate .cf{position:absolute;top:-14px;width:7px;height:11px;border-radius:2px;opacity:.9;animation:cfall 3.6s linear infinite}
@keyframes cfall{to{transform:translateY(190px) rotate(320deg)}}
/* The hero motion bands: the creative-benchmark direction rendered in CSS
   (a GIF with a static first frame in production; video never ships inside
   email). One bold hero, subtle motion, brand palette only. */
.mail .etkt{border:1.5px solid #0d1410;border-radius:12px;padding:12px 14px;background:linear-gradient(135deg,#eafff4,#fff 60%);position:relative}
.mail .etkt::before,.mail .etkt::after{content:'';position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;border:1.5px solid #0d1410;transform:translateY(-50%)}
.mail .etkt::before{left:-8px;border-left-color:transparent}.mail .etkt::after{right:-8px;border-right-color:transparent}
.mail .etkt .etop{display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;gap:10px}
.mail .etkt .ecls{font-size:9px;font-weight:800;letter-spacing:.1em;background:#0d1410;color:#7dffc0;border-radius:4px;padding:2px 7px;white-space:nowrap}
.mail .etkt .ertd{font-size:12px;font-weight:700;color:#0d1410;text-align:right}
.mail .etkt .ebar{display:block;width:100%;height:34px}
.mail .etkt .ecap{font-size:9.5px;color:#5a6660;margin-top:7px}
.mail .emod.eband{padding:0;border-top:0;position:relative;height:150px;overflow:hidden}
.mail .emod.eband.hb-gen{height:236px;background:#0d1410}
.eband.hb-gen .gimg,.eband.hb-gen .gvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:0}
.eband.hb-gen .gvid{z-index:1}
.eband.hb-gen::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 46%,rgba(0,0,0,.62) 100%);z-index:2;pointer-events:none}
.mail .eband.hb-gen .ehline{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.eband.hb-gen .bfrog{z-index:2}
.mail .ehline{position:absolute;left:22px;right:22px;bottom:13px;z-index:3;font-size:21px;line-height:1.08;font-weight:800;letter-spacing:-.01em;color:#0a2e1f;text-shadow:0 1px 0 rgba(255,255,255,.55);text-wrap:balance}
.mail .eband.hb-ny .ehline,.mail .eband.hb-fest .ehline,.mail .eband.hb-anniv .ehline,.mail .eband.sg-pow .ehline{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.mail .emod.ehead{padding:16px 22px 2px;border-top:0}
.mail .ehead .hl{font-size:21px;line-height:1.1;font-weight:800;letter-spacing:-.01em;color:#0a2e1f;text-wrap:balance}
.mail .emod.ektiles{display:flex;gap:8px;padding:12px 22px 2px;border-top:0}
.mail .ektiles .tile{flex:1;min-width:0;background:#f1f5f2;border:1px solid #dfe6e1;border-radius:10px;padding:8px 11px;display:flex;flex-direction:column;gap:2px}
.mail .ektiles .tlab{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#6b7570;font-weight:700}
.mail .ektiles .tval{font-size:16px;font-weight:800;color:#0a2e1f;line-height:1.15;overflow-wrap:anywhere}
.mail .ecelebrate.compact{padding:6px 0 0}.mail .ecelebrate.compact img{width:96px;height:96px}
.eband .bfrog,.mail .einner img.bfrog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:104px;height:104px;z-index:1;filter:drop-shadow(0 12px 10px rgba(0,0,0,.35))}
.eband.hb-ny{background:radial-gradient(circle at 50% 130%,#123227,#0b1020 55%,#070a12)}
.eband.hb-ny .fw{position:absolute;width:4px;height:4px;border-radius:50%;color:#ffd479;background:currentColor;animation:fwpop 2.8s ease-out infinite}
.eband.hb-ny .fw.f2{color:#10c775;animation-delay:.9s}
.eband.hb-ny .fw.f3{color:#e84f8a;animation-delay:1.7s}
.eband.hb-anniv{background:radial-gradient(circle at 50% 130%,#1c3a2c,#0f2a1f 55%,#0a1c15)}
.eband.hb-anniv .bcake{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:1;filter:drop-shadow(0 10px 10px rgba(0,0,0,.35))}
@keyframes fwpop{0%,10%{box-shadow:0 0 0 0 currentColor;opacity:0;transform:scale(.4)}16%{opacity:1}
 45%{box-shadow:0 -26px 0 0,0 26px 0 0,-26px 0 0 0,26px 0 0 0,-18px -18px 0 0,18px -18px 0 0,-18px 18px 0 0,18px 18px 0 0;opacity:.9;transform:scale(1)}
 72%,100%{box-shadow:0 -34px 0 0 transparent,0 34px 0 0 transparent,-34px 0 0 0 transparent,34px 0 0 0 transparent,-24px -24px 0 0 transparent,24px -24px 0 0 transparent,-24px 24px 0 0 transparent,24px 24px 0 0 transparent;opacity:0}}
.eband.hb-fest{background:linear-gradient(180deg,#0d2a1d,#081810)}
.eband.hb-fest::before,.eband.hb-fest::after{content:'';position:absolute;left:0;right:0;top:-130px;height:260px;
 background-image:radial-gradient(2px 2px at 20% 22%,#fff,transparent),radial-gradient(1.6px 1.6px at 62% 55%,#fff,transparent),radial-gradient(1.8px 1.8px at 82% 15%,#fff,transparent),radial-gradient(1.4px 1.4px at 36% 66%,#fff,transparent),radial-gradient(1.6px 1.6px at 51% 36%,#fff,transparent),radial-gradient(1.3px 1.3px at 8% 48%,#fff,transparent);
 background-size:190px 130px;animation:snow 8s linear infinite;opacity:.85}
.eband.hb-fest::after{background-size:150px 130px;animation-duration:12s;opacity:.45}
@keyframes snow{to{transform:translateY(130px)}}
.eband.hb-seas{background:linear-gradient(180deg,#9fd0ea 0%,#d6ecf6 58%,#b7e0c0 59%,#a2d4ae 100%)}
.eband.hb-seas.sg-com{background:linear-gradient(180deg,#b9c6d8 0%,#e6ecf2 58%,#b9d2c0 59%,#a3bfab 100%)}
.eband.hb-seas.sg-com .sun{background:#f6e3b2;box-shadow:0 0 18px 5px rgba(246,227,178,.5)}
.eband.hb-seas.sg-lei{background:linear-gradient(180deg,#f2c98e 0%,#f8e3c0 58%,#c8dcae 59%,#b2cc98 100%)}
.eband.hb-seas.sg-lei .sun{background:#f0a458;box-shadow:0 0 26px 8px rgba(240,164,88,.6)}
.eband.hb-seas.sg-pow{background:linear-gradient(180deg,#2b3a55 0%,#4a5977 58%,#26382e 59%,#1d2c24 100%)}
.eband.hb-seas.sg-pow .sun{background:#e8ecf1;box-shadow:0 0 20px 6px rgba(232,236,241,.35)}
.eband.hb-seas.sg-pow .rail{background:#0b0d10;opacity:.8}
.eband.hb-seas .sun,.eband.hb-seas1 .sun,.eband.hb-seas2 .sun{position:absolute;right:38px;top:16px;width:32px;height:32px;border-radius:50%;background:#f2c94c;box-shadow:0 0 22px 6px rgba(242,201,76,.55);animation:sunpulse 5s ease-in-out infinite}
@keyframes sunpulse{50%{box-shadow:0 0 32px 11px rgba(242,201,76,.75)}}
.eband.hb-seas .rail,.eband.hb-seas2 .rail{position:absolute;left:0;right:0;bottom:12px;height:2px;background:#3a4a3f;opacity:.55}
.eband.hb-seas .train{position:absolute;bottom:14px;left:-170px;animation:glide 9s linear infinite}
@keyframes glide{to{transform:translateX(780px)}}
/* The lead-up waves each carry their own hero (Sheran, 5 Sep 2026): the radar
   wave is the daydream (hills, bobbing destination pins), the booking wave is
   the arrival (the train pulls in and stops at the platform, the booked
   ticket chip rises). Same palette, same motion restraint. */
/* the on-board hero (Sheran, 5 Sep 2026): the First Class table from the
   seat, scenery passing in the window, steam rising off the coffee; the
   leisure tint is golden afternoon, the commuter tint cool morning. A
   3-second GIF loop in production, this static-plus-motion frame the mock. */
.eband.hb-onb{background:linear-gradient(180deg,#1d2733 0%,#243140 58%,#2c241c 59%,#241d16 100%)}
.eband.hb-onb.sg-lei{background:linear-gradient(180deg,#3a2c22 0%,#4a3626 58%,#2c241c 59%,#241d16 100%)}
.eband.hb-onb .win{position:absolute;left:18px;top:14px;width:150px;height:64px;border-radius:12px;overflow:hidden;border:3px solid #11161d;background:linear-gradient(180deg,#9fd0ea 0%,#d6ecf6 70%,#a2d4ae 71%)}
.eband.hb-onb.sg-lei .win{background:linear-gradient(180deg,#f2c98e 0%,#f8e3c0 70%,#b2cc98 71%)}
.eband.hb-onb .hills2{position:absolute;bottom:-4px;left:0;width:200%;height:26px;
 background:radial-gradient(60px 22px at 15% 100%,#7bbf8e 98%,transparent),radial-gradient(80px 26px at 45% 100%,#5aa974 98%,transparent),radial-gradient(70px 20px at 75% 100%,#7bbf8e 98%,transparent);
 background-repeat:repeat-x;background-size:50% 100%;animation:pass 6s linear infinite}
.eband.hb-onb .hills2.h2b{opacity:.5;height:18px;animation-duration:9s}
@keyframes pass{to{transform:translateX(-50%)}}
.eband.hb-onb .tray{position:absolute;right:26px;bottom:6px}
.eband.hb-onb .steam{position:absolute;right:16px;bottom:38px;width:5px;height:14px;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(2px);animation:steam 2.6s ease-in-out infinite}
.eband.hb-onb .steam.s2{right:24px;animation-delay:1.2s;height:11px}
@keyframes steam{0%{opacity:0;transform:translateY(4px) scaleX(1)}35%{opacity:.9}100%{opacity:0;transform:translateY(-14px) scaleX(1.7)}}
.eband.hb-seas1{background:linear-gradient(180deg,#f4cf9a 0%,#fae9cd 52%,#cbe6d2 53%,#b3dcbe 100%)}
.eband.hb-seas1 .sun{right:auto;left:34px;top:22px}
.eband.hb-seas1 .hills{position:absolute;left:0;right:0;bottom:0}
.eband.hb-seas1 .pin{position:absolute;bottom:34px;width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#0a5b3e;border:2.5px solid #fff;box-shadow:0 3px 6px rgba(0,0,0,.25);animation:pinbob 2.8s ease-in-out infinite}
@keyframes pinbob{50%{margin-bottom:7px}}
.eband.hb-seas2{background:linear-gradient(180deg,#9fd0ea 0%,#e2f1f8 60%,#cfd8d2 61%,#bcc7c0 100%)}
.eband.hb-seas2 .platform{position:absolute;left:0;right:0;bottom:0;height:11px;background:#8f9a92;border-top:2px solid #f2c94c}
.eband.hb-seas2 .rail{bottom:16px}
.eband.hb-seas2 .train{position:absolute;bottom:18px;left:-170px;animation:pullin 2.6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes pullin{to{transform:translateX(200px)}}
.eband.hb-seas2 .tkt{position:absolute;right:16px;top:18px;background:#fff;color:#0d1410;font-size:9px;font-weight:800;letter-spacing:.08em;border:1.5px solid #0d1410;border-radius:6px;padding:4px 8px;box-shadow:0 4px 8px rgba(0,0,0,.18);animation:tktrise 1.6s ease-out .9s backwards}
@keyframes tktrise{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.eband .fw,.eband::before,.eband::after,.eband .train,.eband .sun,.eband .pin,.eband .tkt,.mail .ecelebrate .cf,.mail .ecelebrate img{animation:none!important}.eband.hb-seas .train{left:24px}.eband.hb-seas2 .train{transform:translateX(200px)}}
.la{animation:labreathe 3.2s ease-in-out infinite;position:relative;overflow:hidden}
.la::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(143,230,191,.10),transparent);animation:lasweep 4.5s ease-in-out infinite}
@keyframes lasweep{0%,55%{left:-60%}85%,100%{left:115%}}
@media (prefers-reduced-motion:reduce){.la::after{animation:none}}
@keyframes labreathe{0%,100%{box-shadow:0 0 0 0 rgba(16,199,117,0)}50%{box-shadow:0 0 18px 0 rgba(16,199,117,.18)}}
.mail .frg{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:0;background:transparent;font-size:13px;overflow:visible}
.notif .app .ic img{width:100%;height:100%;object-fit:cover;display:block}
.frg img,.favatar img,.mail .bar .ic img{width:100%;height:100%;object-fit:contain;display:block}
.mail .wm{color:#fff;font-weight:800;letter-spacing:.16em;font-size:13px}
.mail .efrog{background:#0b0d10;border-top:0;display:flex;gap:10px;align-items:flex-start;padding:14px 22px 16px}
.mail .favatar{flex:none;display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:0;background:transparent;font-size:19px;overflow:visible}
.svc{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#0b0d10;background:#ffd479;border-radius:999px;padding:3px 10px;margin:0 0 8px}
#caps .svc{margin:0 0 6px}
.mail .fbubble{background:#fff;border-radius:14px;padding:10px 14px;font-size:13.5px;line-height:1.5;color:#16202b}
.mail .egwrap{background:#0b0d10;border-top:0;padding:6px 22px 20px}
.mail .egcard{background:#10c775;border-radius:18px;padding:20px 22px;text-align:center}
.mail .egcard.reveal{position:relative;overflow:hidden}
.mail .egcard.reveal::after{content:'TAP TO REVEAL';display:flex;align-items:center;justify-content:center;position:absolute;inset:0;background:repeating-linear-gradient(45deg,#0b0d10 0 12px,#141920 12px 24px);color:#8fe6bf;font-size:11px;font-weight:800;letter-spacing:.14em;animation:gwipe 5.2s cubic-bezier(.7,0,.3,1) infinite}
@keyframes gwipe{0%,28%{transform:translateX(0)}55%,88%{transform:translateX(102%)}100%{transform:translateX(102%)}}
@media (prefers-reduced-motion:reduce){.mail .egcard.reveal::after{animation:none;transform:translateX(102%)}}
.mail .egcard b{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#08301f;margin-bottom:6px}
.mail .egcard p{margin:0;font-size:15px;font-weight:700;color:#06281a;line-height:1.5}
.mail .egcta{display:inline-block;margin-top:14px;background:#0b0d10;color:#fff;border-radius:10px;padding:10px 22px;font-size:13.5px;font-weight:700}
.mail .efoot{padding:0;border-top:0}
.mail .epat{height:13px;background:repeating-linear-gradient(90deg,#10c775 0 14px,#1f4f9e 14px 28px,#e84f8a 28px 42px,#f2c94c 42px 56px,#0b0d10 56px 70px)}
.mail .efootbar{background:#0b0d10;display:flex;justify-content:center;align-items:center;gap:9px;padding:14px 22px 18px}
.mail .emod b{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#0a5b3e;margin-bottom:4px}
.mail .emod p{margin:0}
.mail .echips{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.mail .echips span{border:1.5px solid #0a5b3e;color:#0a5b3e;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700}
/* the base note style holds everywhere (Sheran, 5 Sep 2026: a note outside an
   email frame rendered as raw full-width text); inside an email it keeps the
   light band */
.esnote{max-width:380px;margin:8px auto 0;font-size:10.5px;line-height:1.5;color:#8b96a5;text-align:center}
.mail .esnote{max-width:none;margin:0;padding:7px 22px;text-align:left;background:#f0f2f5}
.phone.real{height:auto;width:auto;min-width:210px;min-height:330px;max-width:220px;background:#000;overflow:visible}.phone.lareal{position:relative}.phone.lareal .la.over{position:absolute;left:5%;right:5%;top:64%;margin:0;background:rgba(246,246,244,.97);color:#111;border-radius:16px;padding:12px 14px;font-size:12.5px;line-height:1.35;box-shadow:0 6px 24px rgba(0,0,0,.35)}.phone.lareal .la.over b{display:block;font-size:14px;margin-bottom:3px}.phone.lareal .la.over p{margin:0}.phone.lareal .la.over .meta{font-size:11px;color:#555;margin-top:6px}
.phone.real .shot{display:block;width:auto;max-width:210px;max-height:440px;border-radius:22px}
.phone.real .ovl{position:absolute;left:3.5%;width:93%;background:#0f0f0f;border-radius:12px;
 padding:9px 11px;text-align:left;overflow:hidden;box-shadow:0 6px 22px rgba(0,0,0,.45);
 display:flex;flex-direction:column;justify-content:center;animation:drop .6s ease}
.phone.real .ovl b{font-size:10.5px;color:#fff;line-height:1.35}
.phone.real .ovl p{font-size:10px;color:#c9ced4;line-height:1.4;margin-top:3px}
.phone.real .ovcta{font-size:10px;color:#10c775;font-weight:700;margin-top:5px;text-decoration:underline}
.phone.real .ovl.tight{padding:7px 9px}
.phone.real .ovl.tight b{font-size:10px;line-height:1.25}
.phone.real .ovl.tight p{font-size:9.5px;line-height:1.3;margin-top:2px}
.phone.real .ovl.tight .ovcta{font-size:9.5px;margin-top:3px}
.phone.real .ovl.tight2{padding:5px 8px}
.phone.real .ovl.tight2 b{font-size:9.5px;line-height:1.2}
.phone.real .ovl.tight2 p{font-size:9px;line-height:1.26;margin-top:2px}
.phone.real .ovl.tight2 .ovcta{font-size:9px;margin-top:2px}
/* no callout on the device (Sheran, 5 Sep 2026): the capture dims and the
   changed element lifts, reading as a spotlight, never as app UI */
.phone.real .scrim{position:absolute;inset:0;background:rgba(3,7,5,.44);z-index:1;border-radius:inherit}
.phone.real .ovl.pop{z-index:2;box-shadow:0 14px 42px rgba(0,0,0,.6),0 2px 10px rgba(0,0,0,.4);transform:scale(1.03)}
/* a copy change on a screen with no message slot: the words sit as the screen's own line, no card */
.phone.real .ovl.copy{background:transparent;border:0;box-shadow:none;border-radius:0;padding:4px 6px;transform:none;left:6%;width:88%}
.phone.real .ovl.copy b{font-size:10px;color:#fff}
.phone.real .ovl.copy p{font-size:9.5px;color:#d7dce2;margin-top:2px}
.phone.real .ovl.copy .ovcta{display:none}
.appscr{background:#0d1410;height:100%;display:flex;flex-direction:column}
.appscr .cap{flex:1;background-size:cover;background-position:top center}
.appscr .slotwrap{padding:12px}
.slot{background:#12291b;border:1.5px solid #10c775;border-radius:12px;padding:12px 13px;text-align:left;animation:drop .6s ease}
.slot b{font-size:14px;color:#eafbf0;display:block}
.slot p{font-size:12.5px;color:#a9c4b1;margin-top:4px;line-height:1.45}
.slot .cta{display:inline-block;background:#10c775;color:#08130c;border-radius:7px;padding:5px 12px;
 font-weight:700;font-size:12px;margin-top:8px}
.scrname{font-size:11px;color:#77828f;text-align:center;padding:8px}
.quiet{ text-align:center;color:#77828f}
.quiet .moon{font-size:44px}
.quiet b{display:block;font-size:16px;color:#aab4c0;margin-top:12px;font-weight:600}
.quiet.paused .pz{display:inline-block;border:1.5px solid #e5534b;color:#ff6b61;font-size:11px;font-weight:800;letter-spacing:.06em;border-radius:5px;padding:3px 9px}
.quiet.paused b{color:#ff8a80}
.quiet.paused p{font-size:12.5px;color:#aab4c0;max-width:260px;margin:8px auto 0;line-height:1.45}
.card{ text-align:center;max-width:640px;padding:0 20px}
.card .emoji{font-size:56px}
.card .picon{width:84px;height:84px;margin:0 auto;border-radius:50%;border:1.5px solid rgba(16,199,117,.45);display:flex;align-items:center;justify-content:center;color:#10c775;background:rgba(16,199,117,.07)}
.card .picon svg{width:44px;height:44px}
.card .cstats{display:flex;gap:12px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.card .cstat{border:1px solid #232b36;background:#12161d;border-radius:10px;padding:10px 18px;text-align:left;min-width:210px}
.card .cslab{display:block;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8b93a1;margin-bottom:3px}
.card .csval{font-size:22px;font-weight:800;color:#f2f4f6;letter-spacing:-.01em}
.card .csval.am{color:#ffd479}
.card .cstail{font-size:11px;color:#8b93a1;margin-left:5px}
.pico svg{width:12px;height:12px;vertical-align:-1.5px}
.plabel{display:inline}
.card h1{font-size:26px;margin:10px 0 4px}
.card .out{display:inline-block;margin:14px 0 10px;background:#1b232e;border:1px solid #2c3644;
 border-radius:999px;padding:5px 14px;font-size:12.5px;font-weight:700;color:#9fd0ff}
.card p{font-size:15px;color:#c6cdd6;line-height:1.55}
.card p.runline{font-size:13px;color:#8b96a3;max-width:560px;margin:2px auto 0}
.card .strategy{margin:16px auto 0;max-width:640px;text-align:left;background:#141a22;
 border:1px solid #243247;border-radius:12px;padding:14px 18px}
.card .strategy .shead{font-size:15px;font-weight:500;color:#dde3ea;line-height:1.6;margin:0 0 8px}
.card .strategy .skick{font-size:10.5px;font-weight:800;letter-spacing:.09em;color:#5fa8ff;
 text-transform:uppercase;margin:0 0 6px}
.card .strategy ol{margin:0;padding-left:18px}
.card .strategy li{font-size:13px;color:#c6cdd6;line-height:1.5;margin:0 0 5px}
.card p.pdesc{font-size:13px;color:#8b96a3;margin-bottom:6px}
.card .capline{margin-top:16px;font-size:12.5px;color:#8b96a5;line-height:1.5}
.card .mline{display:flex;align-items:center;gap:12px;text-align:left;margin:2px auto 0;max-width:640px;padding:9px 14px;border:1px solid rgba(16,199,117,.4);border-radius:12px;background:rgba(16,199,117,.06);color:#10c775;--mfill:#0f1216}
.card .mline svg{flex:none;width:26px;height:20px}
.card .mline p{margin:0;font-size:13px;line-height:1.45;color:#c6cdd6}
.card .mline p b{color:#f2f4f6}
.card .cchain{display:grid;grid-template-columns:1fr 22px 1fr 22px 1fr;gap:0;margin:14px auto 0;max-width:640px;text-align:left;align-items:stretch}
.card .cchain .chip{display:block;background:#101820;border:1px solid #1f3a2c;border-radius:12px;padding:9px 12px}
.card .cchain .chip .k{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8b93a1;margin:0 0 4px}
.card .cchain .chip .v{display:block;font-size:13px;font-weight:700;color:#f2f4f6;line-height:1.3}
.card .cchain .chip .v.am{color:#ffd479;font-size:16px}
.card .cchain .chip .s{display:block;font-size:11px;color:#8b93a1;margin:3px 0 0;line-height:1.4}
.card .cchain .arrow{display:flex;align-items:center;justify-content:center;color:#3a4656}
.card .cchain .arrow svg{width:12px;height:12px}
@media(max-width:560px){.card .cchain{grid-template-columns:1fr}.card .cchain .arrow{display:none}}
.card .volline{margin-top:10px;font-size:13px;color:#ffd479;font-weight:700}
.card .vnum{font-size:23px;font-weight:800;letter-spacing:-.01em;margin:0 2px}
.card .volline.vout{margin-top:2px;color:#e8ecf1;font-weight:600}
.card .volline.vout .vnum{color:#ffd479}
.card .vnum.vamb{color:#ffd479}
.card .vextra{display:block;font-size:11.5px;color:#8b93a1;font-weight:500;margin-top:2px}
.card .vtbcx{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;color:#8fa3bd;border:1px dashed #2c3644;border-radius:4px;padding:1px 6px;margin-right:4px}
.vbars.vov .vbar i{background:#22395c}
.vbars.vov .vbar i.ov{background:#ffd479;z-index:1}
.vrow.vzero .vct{color:#5d6773}
.vkey{display:block;font-weight:600;letter-spacing:0;text-transform:none;color:#77828f;margin:2px 0 0}
.vkey i{display:inline-block;width:9px;height:9px;border-radius:2px;margin:0 4px 0 0;vertical-align:-1px}.vkey i.ko{margin-left:9px}
.vkey .kp{background:#22395c}.vkey .ko{background:#ffd479}
.vbars{display:flex;flex-direction:column;gap:6px;margin:12px auto 0;width:360px;max-width:88%;text-align:left}
.vbars.vstages{margin-top:16px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.vcols{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;align-items:flex-start;margin:12px auto 0}
.vcols .vbars{margin:0;flex:1 1 260px;width:auto;min-width:240px;max-width:340px}
.vcols .vbars.vstages{padding-top:0;border-top:0}
.vcols .vrow{grid-template-columns:14px 108px 1fr 52px;gap:7px}
.vbars.vstages .vrow{grid-template-columns:120px 1fr 58px}
.vcols .vbars.vstages .vrow{grid-template-columns:108px 1fr 58px}
.vbars .vhead{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8b93a1;margin:0 0 2px}
.vbars.vstages .vbar i{background:#3d8bfd}
.vrow{display:grid;grid-template-columns:14px 128px 1fr 46px;gap:9px;align-items:center;font-size:11.5px;color:#aab4c0}
.vrow svg{display:block}
.vbar{height:8px;border-radius:4px;background:#1a212b;position:relative;overflow:hidden}
.vbar i{position:absolute;top:0;left:0;bottom:0;background:#10c775;border-radius:4px}
.vrow.vnone .vbar i{background:#e07070}
.vrow.vtbc .vbar{background:#141b24;border:1px dashed #2c3644}
.vct.tbc{color:#8fa3bd;font-size:10.5px;font-weight:800;letter-spacing:.06em}
.mviz{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-top:12px}
.mviz .mstep{flex:0 1 auto;max-width:150px;text-wrap:balance}
.mviz .mbranch{display:flex;flex-direction:column;gap:6px}
.mviz .mbranch .mstep{max-width:190px}
.mviz .mmodel{flex:none;max-width:150px}
.mviz .marr{color:#10c775;flex:none}
.msigs{display:flex;flex-direction:column;gap:4px}
.msigs span{border:1px solid #2a3038;background:#12161d;border-radius:8px;padding:3px 9px;font-size:10.5px;color:#c7cfd9;text-align:left}
.mmodel{display:flex;flex-direction:column;align-items:center;gap:1px}
.mmodel .mring{width:62px;height:62px;border-radius:50%;border:2px solid #10c775;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 38%,#122a1d,#0b0d10);animation:mpulse 2.6s ease-in-out infinite}
@keyframes mpulse{0%,100%{box-shadow:0 0 0 0 rgba(16,199,117,.32)}50%{box-shadow:0 0 0 10px rgba(16,199,117,0)}}
.mmodel b{font-size:11.5px;color:#eef2f8;margin-top:5px}
.mmodel span{font-size:10px;color:#8b96a5}
.mstep{border:1px solid #2a3038;background:#12161d;border-radius:10px;padding:7px 11px;max-width:170px;text-align:left}
.mstep b{display:block;font-size:11px;color:#eef2f8}
.mstep span{font-size:10px;color:#8b96a5}
.vnote{font-size:10.5px;color:#77828f;margin-top:6px}
.vct{text-align:right;color:#e8ecf1;font-weight:700}
footer{padding:8px 26px 14px;display:flex;flex-direction:column;gap:8px;max-width:1720px;margin:0 auto;width:100%;box-sizing:border-box}
.progrow{display:flex;align-items:center;gap:12px}
.prog{display:flex;gap:5px;flex:1}
.prog span{flex:1;height:14px;border-radius:2px;background:#252d38;overflow:hidden;position:relative;
 cursor:pointer;padding:5px 0;background-clip:content-box}
.prog span i{position:absolute;top:5px;bottom:5px;left:0;width:0;background:#10c775;border-radius:2px}
.rows{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.scol{display:flex;flex-direction:column;align-items:center;gap:12px}
.kfloat{justify-content:center;opacity:0;animation:kin .5s ease 1.1s forwards}
@keyframes kin{to{opacity:1}}
@media (prefers-reduced-motion: reduce){.kfloat{animation:none;opacity:1}}
.vox .ucap{font-size:15px;max-width:none;text-align:left;margin:0;align-items:flex-start;flex-direction:column;gap:6px}
.vox .ucap .uctext{text-wrap:pretty;line-height:1.5;color:#c6cdd6}
.scol .uchips{margin-top:8px}
.vox .uchips{justify-content:flex-start;flex-wrap:wrap}
.pill{cursor:pointer;border:1px solid #2c3644;background:#151b23;color:#c6cdd6;border-radius:999px;
 padding:3.5px 11px;font-size:11.5px;user-select:none}
.pill.on{background:#10c775;border-color:#10c775;color:#06281a;font-weight:700}
.pill.off{opacity:.32}
.play{cursor:pointer;border:1px solid #2c3644;background:#151b23;color:#e8ecf1;border-radius:50%;
 width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
 font-size:13px;user-select:none;flex:0 0 auto}
.lab{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#5f6b79;margin-right:2px}
.tpos{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8b96a5;white-space:nowrap;flex:0 0 auto}
#jnav .jtab.next{color:#0c2f1f;background:#c9f2dd;border-color:#10c775;animation:nextpulse 1.6s ease-in-out infinite}
@keyframes nextpulse{0%,100%{box-shadow:0 0 0 0 rgba(16,199,117,.45)}50%{box-shadow:0 0 0 6px rgba(16,199,117,0)}}
@media (prefers-reduced-motion: reduce){#jnav .jtab.next{animation:none}}
#finale{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 background:rgba(12,15,19,.9);z-index:30;animation:kin .4s ease}
#finale .fcard{background:#151b23;border:1px solid #2c3644;border-radius:16px;padding:38px 46px;
 text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:560px}
#finale .femo{font-size:38px}
#finale h2{font-size:19px;font-weight:800;color:#e8ecf1}
#finale p{font-size:12.5px;color:#8b96a5;line-height:1.5;max-width:420px}
#finale .fcta{display:inline-block;background:#10c775;color:#06281a;font-weight:800;font-size:14px;
 border-radius:999px;padding:11px 26px;text-decoration:none;margin-top:4px}
#finale .fagain{cursor:pointer;font-size:11.5px;color:#8b96a5;text-decoration:underline;background:none;border:none;font-family:inherit}
@media (max-height:1050px){
 #rail{gap:13px;padding-top:12px}
 #rail .rgroup>span:not(.lab){gap:4px}
 #rail .pill{padding:5px 10px;font-size:12px}
}
@media (max-height:960px){
 header{padding-top:9px}
 header .j{font-size:18px}
 .about{font-size:11.5px;line-height:1.45}
 #jnav{margin-top:7px;padding-top:7px}
 #jnav .jtab{font-size:9.5px;padding:2px 8px}
 #chapters .chap{padding:6px 10px 7px}
 #chapters .chap b{font-size:12px}
 footer{row-gap:3px}
 .prog span{height:11px;padding:4px 0}
 .play{width:30px;height:30px}
}
@media (max-height:820px){
 .about{display:none}
 #jnav{margin-top:5px;padding-top:5px}
 #chapters .chap{padding:5px 9px 6px}
 #chapters .chap b{font-size:11px}
 #chapters .chap .ct{font-size:9px}
 #stage{padding:2px 20px 6px}
 .scene{padding:2px 0 8px}
 .scene .when{padding:2px 0 10px;font-size:11.5px}
 .scene .capzone{padding:12px 0 6px;gap:10px}
 footer .pill{padding:2px 8px;font-size:10px}
 #rail{width:200px;gap:12px;padding-top:10px}
 #rail .pill{padding:5px 9px;font-size:11.5px}
}
@media (min-height:1050px){
 .scene .when{font-size:15px}
 .ucap{font-size:17px;max-width:1100px}
 .uchips .pchip{font-size:13.5px}
 .uchips b{font-size:11px}
}
html.present #about,html.present #jnav,html.present #verwrap,html.present footer .progrow .lab,html.present footer .spd,html.present header .crumbs{display:none!important}
html.present #body{padding-top:10px}