/* CiboMetrics site. Every style lives here: the server's CSP allows no inline styles.
   Default = static and complete (no JS, or reduced motion). Motion only inside the
   prefers-reduced-motion: no-preference block at the end, and only with .js on <html>. */
:root{
  --ink:#081311;--deep:#0a3f3b;--brand:#0f766e;--navy:#0b1220;--slate:#0f172a;--dusk:#1e293b;
  --page:#f8fafc;--noon:#fff7ed;--lull:#fbf7ef;--rice:#f4f2ec;
  --on-dark:#f1f5f9;--mute-dark:#94a3b8;--mute-light:#475569;--amber-text:#b45309;
  --lamp:rgba(245,222,179,.18);--wa:#15803d;
  --good:#10b981;--warn:#f59e0b;--bad:#ef4444;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --zh:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --nav:56px;--gut:16px;--focus:#0f766e;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--ink);scroll-padding-top:calc(var(--nav) + 12px)}
body{margin:0;background:var(--ink);color:var(--slate);font:18px/1.6 var(--sans);overflow-x:hidden;overflow-x:clip}
html[lang^=zh] body{line-height:1.75}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Grain: one static noise tile, never animated, off on small phones */
body::before{content:"";position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (max-width:479px){body::before{display:none}}

/* ---------- nav ---------- */
.nav{position:fixed;z-index:60;top:0;left:0;right:0;height:var(--nav);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 var(--gut);color:var(--on-dark);background:rgba(8,19,17,.94);--focus:#5eead4}
.nav[data-tone=dark]{background:rgba(8,19,17,.85)}
.nav[data-tone=light]{background:rgba(248,250,252,.92);color:var(--slate);box-shadow:0 1px 0 rgba(15,23,42,.08);--focus:#0f766e}
.nav-l,.nav-r{display:flex;align-items:center;gap:10px;min-width:0}
.nav-r{gap:6px}
.chip-logo{display:inline-flex;flex:none;background:#fff;border-radius:8px;padding:4px 8px}
.chip-logo img{height:28px;width:auto}
.clock{font:500 13px/1 var(--mono);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.nav .lang{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font-size:15px;font-weight:600;text-decoration:none}
.nav .lang:hover{text-decoration:underline}
.wa-pill{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;background:var(--wa);color:#fff;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.wa-pill:hover{background:#166534}
@media (max-width:419px){
  .chip-logo{padding:4px 6px}
  .nav .chip-logo img{height:22px}
  .nav-l{gap:8px}
  .wa-pill{padding:0 12px}
  .wa-pill .xs{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav .lang{padding:0 4px;font-size:14px}
}
@media (max-width:379px){.wa-pill{padding:0 10px}.nav-l{gap:6px}}
@media (max-width:349px){.clock{display:none}}
@media (max-width:319px){.nav .chip-logo img{height:18px}.wa-pill{padding:0 8px}}

/* ---------- scenes ---------- */
.scene{position:relative;overflow-x:clip;padding:calc(var(--nav) + 56px) 0 88px}
.wrap{position:relative;max-width:1180px;margin:0 auto;padding:0 var(--gut)}
@media (min-width:768px){:root{--gut:32px}}
.dark{color:var(--on-dark);--focus:#5eead4}
.eyebrow{margin:0 0 16px;font:500 13px/1.2 var(--mono);letter-spacing:.08em;color:var(--mute-light)}
.dark .eyebrow{color:var(--mute-dark)}
.hl{margin:0 0 .5em;font:500 clamp(1.7rem,5.6vw,5rem)/1.08 var(--serif);letter-spacing:-.02em;text-wrap:balance}
html[lang^=zh] .hl{font:600 clamp(1.55rem,5.2vw,4rem)/1.32 var(--zh);letter-spacing:0;word-break:keep-all;overflow-wrap:anywhere}
/* A common problem, asked as a question (#428-#430): longer than a title, so smaller */
.hl.q{font-size:clamp(1.5rem,5vw,2.6rem);line-height:1.15}
html[lang^=zh] .hl.q{font-size:clamp(1.4rem,4.8vw,2.4rem)}
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln>span{display:block}
.copy p:not(.big):not(.eyebrow){max-width:34em;text-wrap:pretty}
.then,.roles-line{font:500 1.45rem/1.35 var(--serif)}
html[lang^=zh] .then,html[lang^=zh] .roles-line{font:600 1.3rem/1.6 var(--zh)}
.dark .then{color:#fff}
.vis{position:relative;display:flex;justify-content:center;padding:40px 0 8px}
.stage{position:relative;display:flex;flex-direction:column;align-items:center;padding:40px 0 16px;perspective:1100px}
.steps{position:absolute;inset:0;visibility:hidden;pointer-events:none}
.steps i{position:absolute;left:0;width:1px;height:1px;top:calc(50svh + var(--p,0) * (100% - 100svh))}
.invoice .steps i:nth-child(2){--p:.3}
.invoice .steps i:nth-child(3){--p:.45}
.invoice .steps i:nth-child(4){--p:.85}
.tonight .steps i:nth-child(1){--p:.04}
.tonight .steps i:nth-child(2){--p:.22}
.tonight .steps i:nth-child(3){--p:.4}
.tonight .steps i:nth-child(4){--p:.58}
@media (min-width:900px){
  .scene:not(.dawn):not(.morning){min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav) + 80px) 0 112px}
  .scene>.wrap{width:100%}
  .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"copy vis";gap:0 64px;align-items:center}
  .two.flip{grid-template-areas:"vis copy"}
  .copy{grid-area:copy}
  .vis,.pin-wrap{grid-area:vis}
  .two .hl{font-size:clamp(2.4rem,4.4vw,4rem)}
  html[lang^=zh] .two .hl{font-size:clamp(2rem,3.8vw,3.3rem)}
  .two .hl.q{font-size:clamp(1.8rem,2.4vw,2.5rem)}
  html[lang^=zh] .two .hl.q{font-size:clamp(1.6rem,2.2vw,2.2rem)}
}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;font:600 17px/1.2 var(--sans);text-decoration:none;text-align:center}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:#166534}
.btn-ol{border:2px solid var(--slate);color:var(--slate)}
.btn-ol:hover{background:#fff}
.cta-in{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:28px;font-weight:600}
/* No number yet (the placeholder still on <html>): no WhatsApp button, and no "Want this for your shop?" left without one */
html[data-wa="6500000000"] .wa,html[data-wa="6500000000"] .cta-in{display:none}

/* ---------- phone (one component, demo screens in HTML) ---------- */
.ph-fig{position:relative;z-index:2;margin:0}
.phone{--w:clamp(180px,calc((100svh - 120px) / 2),264px);width:var(--w);height:calc(var(--w) * 2);border:10px solid var(--slate);border-radius:36px;background:var(--page);overflow:hidden;color:var(--slate);font:max(13px,calc(var(--w) * .05))/1.35 var(--sans);text-align:left;box-shadow:0 34px 70px -24px rgba(0,0,0,.6),0 0 0 1px rgba(148,163,184,.25)}
@media (min-width:900px){.phone{--w:clamp(220px,calc((100svh - 140px) / 2),320px)}}
.scr{height:100%;display:flex;flex-direction:column}
.sb{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:.55em 1.05em .35em;font:600 max(12px,.92em)/1 var(--mono)}
.demo{font-family:var(--sans);background:#e2e8f0;color:#334155;border-radius:999px;padding:.3em .65em}
.tb{display:flex;align-items:center;gap:.5em;padding:.4em .85em .55em;background:#fff;border-bottom:1px solid #e2e8f0}
.tb-logo{flex:none;width:1.5em;height:1.5em;border-radius:.45em;background:var(--brand)}
.tb b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-m{display:inline-flex;align-items:center;gap:.35em;font-size:max(12px,.92em);color:#334155}
.tb-m::before{content:"";width:.95em;height:.7em;background:linear-gradient(currentColor 0 0) top/100% 2px no-repeat,linear-gradient(currentColor 0 0) center/100% 2px no-repeat,linear-gradient(currentColor 0 0) bottom/100% 2px no-repeat}
.pb{flex:1;min-height:0;overflow:hidden;padding:.6em;display:flex;flex-direction:column;gap:.5em}
.ttl{font-weight:700;font-size:1.15em;padding:0 .15em}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:.6em .75em;display:flex;flex-direction:column;gap:.25em}
.t{font-weight:700}
.mut{color:#64748b;font-size:max(12px,.92em)}
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:.5em}
.card.kv{flex-direction:row}
.amt{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;text-align:right}
.amt small{display:block;font-size:max(12px,.85em);font-weight:500;color:#64748b}
.nm{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.nm b{font-weight:600}
.li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.2em .6em;padding:.32em 0 .3em;border-top:1px solid #f1f5f9}
.li>.nm{flex:1 1 8em}
.li>:last-child{margin-left:auto}
.st{display:inline-flex;align-items:center;gap:.35em;border-radius:999px;padding:.15em .6em;font-size:max(12px,.9em);font-weight:600;white-space:nowrap;line-height:1.35}
.st::before{content:"";flex:none;width:.5em;height:.5em;border-radius:50%;background:var(--c)}
.st-g{background:#d1fae5;color:#047857;--c:var(--good)}
.st-w{background:#fef3c7;color:#92400e;--c:var(--warn)}
.st-b{background:#fee2e2;color:#b91c1c;--c:var(--bad)}
.st-n{background:#f1f5f9;color:#475569;--c:#94a3b8}
.dot{display:inline-block;width:.55em;height:.55em;border-radius:50%;margin-right:.45em;vertical-align:.08em}
.d-b{background:var(--bad)}.d-w{background:var(--warn)}.d-n{background:#94a3b8}
.tx-b{color:#b91c1c}.tx-w{color:#b45309}

/* invoice screen */
.swap{display:grid;justify-items:start;margin-top:.15em}
.swap>*{grid-area:1/1}
.s-todo{opacity:0}
.ok{margin:.25em 0 .1em;color:#047857;font-weight:600;font-size:max(12px,.92em)}
.tot{font-weight:600}
.btn-chk{position:relative;overflow:hidden;flex:none;border:2px solid var(--brand);border-radius:12px;padding:.42em;text-align:center;font-weight:700;letter-spacing:.04em;color:#fff;background:#fff}
.btn-chk::before{content:"";position:absolute;inset:0;background:var(--brand);transform-origin:left}
.btn-chk span{position:relative}
.rep{flex-direction:row;align-items:flex-start;gap:.6em}
.thumb{flex:none;width:2.2em;height:2.8em;border-radius:6px;border:1px solid #cbd5e1;background:repeating-linear-gradient(#f8fafc 0 .4em,#cbd5e1 .4em .5em)}
.rep .st{margin-top:.25em}

/* receive screen */
.flags{display:flex;align-items:center;gap:.35em}
.cam{flex:none;position:relative;width:1.25em;height:.95em;border-radius:.2em;background:#334155}
.cam::after{content:"";position:absolute;left:50%;top:50%;width:.45em;height:.45em;margin:-.22em 0 0 -.22em;border-radius:50%;border:2px solid #fff}
.okm{color:#047857;font-weight:700}

/* checklist screen */
.prog{display:block;height:.4em;margin:.15em 0 .2em;border-radius:99px;background:#e2e8f0;overflow:hidden}
.prog i{display:block;width:83.33%;height:100%;border-radius:inherit;background:var(--brand);transform-origin:left}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.38em}
.tk{display:flex;gap:.55em;align-items:flex-start}
.box{position:relative;flex:none;width:1.15em;height:1.15em;margin-top:.1em;border-radius:.3em;border:2px solid #94a3b8;background:#fff}
.box::before{content:"";position:absolute;inset:-2px;border-radius:.3em;background:var(--brand)}
.box::after{content:"";position:absolute;left:.28em;top:.06em;width:.3em;height:.58em;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.tk.no .box::before,.tk.no .box::after{display:none}
.float{position:absolute;z-index:3;left:-24px;bottom:56px;display:flex;align-items:center;gap:8px;margin:0;padding:10px 12px;border:1px solid #e2e8f0;border-radius:14px;background:#fff;color:var(--slate);font-size:14px;line-height:1.4;box-shadow:0 18px 40px -12px rgba(15,23,42,.4)}
.float .st{margin-left:2px}
.pin-dot{flex:none;width:12px;height:12px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--brand)}
@media (min-width:900px){.float{left:-72px;font-size:15px}}

/* roles */
.roles-wrap{margin-top:48px}
.roles{max-width:440px;margin-top:20px;padding:16px;border:1px solid #e2e8f0;border-radius:20px;background:#fff;box-shadow:0 20px 50px -30px rgba(15,23,42,.4)}
.r-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.r-chips span{position:relative;z-index:0;border:1px solid #cbd5e1;border-radius:999px;padding:4px 12px;font-size:14px;color:#334155}
.r-chips .on{border-color:var(--brand);color:#fff}
.r-chips .on::before{content:"";position:absolute;z-index:-1;inset:-1px;border-radius:inherit;background:var(--brand)}
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tiles li{border:1px solid #e2e8f0;border-radius:14px;padding:12px 6px 10px;background:var(--page);text-align:center;font-size:14px;line-height:1.3}
.ti{display:flex;flex-direction:column;align-items:center;gap:6px}
.ti::before{content:"";width:26px;height:26px;border-radius:8px;background:#cce7e3}
.off .ti{opacity:.3}
.tiles small{display:block;margin-top:4px;font-size:12px;font-weight:700;color:#475569;letter-spacing:.02em}

/* recipe screen */
.dish-tot{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15em .5em;margin-top:.3em;padding-top:.45em;border-top:2px solid var(--slate)}
.dish-tot>span:first-child{font-weight:600}
.dish-tot b{font-size:1.45em;font-variant-numeric:tabular-nums}
.dim{flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap;color:#475569}

/* you-owe screen */
.ow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.1em .5em;align-items:center}
.ow b{grid-column:1/-1;font-weight:600}
.ow>span:not(.amt){font-size:max(12px,.92em)}
.pay{display:inline-block;margin-left:.45em;padding:.1em .55em;border-radius:999px;border:1px solid var(--brand);color:var(--brand);font-style:normal;font-size:max(12px,.85em)}
.paid{background:#f8fafc;color:#64748b}
.paid .amt{font-weight:500}

/* food cost screen */
.fc-big{display:flex;align-items:center;flex-wrap:wrap;gap:.2em .6em}
.fc-big b{font-size:2.3em;line-height:1.1;font-variant-numeric:tabular-nums}
.fcb{position:relative;display:flex;justify-content:space-around;align-items:flex-end;height:6em;margin-top:.4em;padding:0 .6em;border-bottom:1px solid #cbd5e1}
.fcb-c{display:flex;align-items:flex-end;width:2.6em;height:100%}
.fcb-b{display:block;width:100%;border-radius:4px 4px 0 0;transform-origin:bottom}
.fcb-b.g{height:74%;background:var(--good)}
.fcb-b.r{height:79.5%;background:var(--bad)}
.fcb-t{position:absolute;left:0;right:0;bottom:77.5%;border-top:2px dashed var(--slate);transform-origin:left}
.fcb-t span{position:absolute;left:0;bottom:3px;padding:0 .25em;background:#fff;font-style:normal;font-weight:600;font-size:max(12px,.85em);line-height:1.2}
.fcb-l{display:flex;justify-content:space-around;margin-top:.2em;text-align:center;color:#64748b;font-size:max(12px,.88em)}
.fcb-l b{display:block;color:var(--slate);font-variant-numeric:tabular-nums}
.delta{margin:.25em 0 0;color:#047857;font-weight:600;font-size:max(12px,.92em)}
.pl-chip{align-self:flex-start;padding:.3em .8em;border:1px solid #cbd5e1;border-radius:999px;background:#fff;font-weight:600;font-size:max(12px,.92em)}

/* ---------- 1 dawn ---------- */
.dawn{min-height:100svh;display:flex;align-items:center;padding:calc(var(--nav) + 40px) 0 128px;background:radial-gradient(130% 100% at 45% 38%,rgba(0,0,0,0) 50%,rgba(0,0,0,.55)),var(--ink)}
.dawn .wrap{width:100%}
.dawn .hl{max-width:9.5em}
.lede{max-width:30em;font-size:1.15rem;color:#cbd5e1}
.skip{margin-top:28px}
.skip a{color:#5eead4;font-weight:600}
.bd{position:absolute;right:4%;bottom:0;width:min(52vw,380px);height:calc(100% - var(--nav) - 3svh);pointer-events:none}
.bd i{position:absolute;display:block}
.lamp{top:0;left:50%;width:44px;height:14px;margin-left:-22px;border-radius:0 0 22px 22px;background:#f1e3c2;box-shadow:0 0 24px 6px rgba(245,222,179,.35),0 0 90px 34px rgba(245,222,179,.1)}
.cone{top:12px;bottom:0;left:-45%;right:-45%;background:linear-gradient(var(--lamp),rgba(245,222,179,.06) 70%,rgba(245,222,179,0));clip-path:polygon(46% 0,54% 0,100% 100%,0 100%)}
.door{bottom:0;left:12%;right:12%;height:72%;border:8px solid #1b3530;border-bottom:0;border-radius:3px 3px 0 0;background:linear-gradient(90deg,#0c1816,#13241f 55%,#0d1917)}
.door::before,.door::after{content:"";position:absolute;left:14%;right:14%;border:1px solid rgba(255,255,255,.06)}
.door::before{top:10%;bottom:54%}
.door::after{top:52%;bottom:8%}
.bd .knob{left:9%;top:50%;width:9px;height:9px;border-radius:50%;background:#59675f}
.fishbox{bottom:0;left:-8%;width:46%;height:15%;max-height:70px;border-radius:3px;background:linear-gradient(#eef1ef,#cdd5d2);box-shadow:inset 0 9px 0 -7px rgba(0,0,0,.12),0 12px 30px rgba(0,0,0,.55)}
.cue{position:absolute;bottom:28px;left:max(var(--gut),calc(50% - 590px + var(--gut)));width:1px;height:56px;background:linear-gradient(#94a3b8,rgba(148,163,184,0));transform-origin:top}

/* ---------- 2 invoice ---------- */
.invoice,.tonight{overflow:clip}
.invoice{background:radial-gradient(120% 90% at 50% 45%,rgba(0,0,0,0) 55%,rgba(0,0,0,.5)),var(--ink)}
.vig{display:none;position:sticky;top:0;height:100svh;margin-bottom:-100svh;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,rgba(0,0,0,0) 55%,rgba(0,0,0,.5))}
.glow{position:absolute;left:50%;top:50%;width:min(720px,180vw);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(20,184,166,.32),rgba(20,184,166,.08) 60%,rgba(20,184,166,0));pointer-events:none}
.paper{position:absolute;z-index:1;top:50%;left:50%;width:min(210px,58vw);display:flex;flex-direction:column;overflow:hidden;padding:14px 12px 16px;border-radius:2px;color:#27231c;font:12px/1.55 var(--mono);transform:translate(-100%,-62%) rotate(-2deg);box-shadow:0 24px 50px rgba(0,0,0,.55);
  background:linear-gradient(180deg,rgba(0,0,0,0) 32%,rgba(0,0,0,.07) 33%,rgba(0,0,0,0) 35%,rgba(0,0,0,0) 65%,rgba(0,0,0,.07) 66%,rgba(0,0,0,0) 68%),linear-gradient(100deg,#f7f3e8,#e9e2d1)}
.paper>span{display:flex;justify-content:space-between;gap:8px}
.pp-h{margin-bottom:4px;letter-spacing:.06em}
.pp-d{margin-bottom:6px}
.pp-s{margin-top:6px;padding-top:4px;border-top:1px dashed #8a8270}
.pp-t{font-weight:700}
.scan{position:absolute;left:0;right:0;top:0;height:100%;opacity:0;transform:translateY(-100%);background:linear-gradient(rgba(45,212,191,0),rgba(45,212,191,.22) calc(100% - 3px),#14b8a6 calc(100% - 3px))}
@media (min-width:900px){.paper{width:290px;font-size:13px;transform:translate(-112%,-55%) rotate(-3deg)}}

/* ---------- 3 receive ---------- */
.receive{--band-h:clamp(200px,36svh,340px);padding-top:0;background:#e2e8f0}
.veil{position:absolute;left:0;right:0;top:0;height:var(--band-h);pointer-events:none;background:linear-gradient(var(--ink),var(--dusk) 30%,rgba(30,41,59,.85) 55%,rgba(30,41,59,0))}
.dusk{position:relative;height:var(--band-h)}
.crate{position:absolute;display:block;width:110px;height:70px;border-radius:3px;background:repeating-linear-gradient(90deg,#9a7550 0 24px,#7a5a3c 24px 27px);box-shadow:inset 0 6px 0 rgba(255,255,255,.12),inset 0 -6px 0 rgba(0,0,0,.2),0 18px 30px -10px rgba(0,0,0,.45)}
.crate::before{content:"";position:absolute;left:0;right:0;top:44%;height:6px;background:#6b4e33}
.c1{left:7%;bottom:16%}
.c2{right:9%;bottom:46%;width:84px;height:54px}
.receive .wrap{padding-top:16px}
@media (min-width:900px){.scene.receive:not(.dawn){justify-content:flex-start;padding-top:0}.c1{left:14%}.c2{right:18%}}

/* ---------- 4 opening ---------- */
.opening{background:var(--page)}
@media (min-width:900px){
  .op{grid-template-areas:"copy vis" "roles vis"}
  .op .copy{align-self:end}
  .roles-wrap{grid-area:roles;align-self:start}
}

/* ---------- 5 plate ---------- */
.plate{background:linear-gradient(var(--page),var(--noon) 220px)}
.plate .eyebrow,.plate .cta-in>span{color:var(--amber-text)}

/* ---------- 6 owe ---------- */
.owe{padding-bottom:200px;background:linear-gradient(var(--noon),var(--lull) 220px)}
.owe::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;pointer-events:none;background:linear-gradient(rgba(11,18,32,0),var(--navy))}
@media (min-width:900px){
  .scene.owe:not(.dawn){padding-bottom:220px}
  .ow-g{grid-template-areas:"copy vis" "chart vis"}
  .ow-g .copy{align-self:end}
  .chart{grid-area:chart;align-self:start}
}
.chart{max-width:420px;margin:48px 0 0}
.bars{display:flex;align-items:flex-end;gap:28px;height:190px;padding:0 12px;border-bottom:1px solid #94a3b8}
.col{flex:1;display:flex;flex-direction:column-reverse;gap:2px;transform-origin:bottom}
.sg{display:block;background:var(--c)}
.col .sg:last-child{border-radius:4px 4px 0 0}
.pork{--c:#0e6b64}.chicken{--c:#4fa38f}.seafood{--c:#336f95}.veg{--c:#86c0b2}
.col:nth-child(1) .pork{height:46px}.col:nth-child(1) .chicken{height:34px}.col:nth-child(1) .seafood{height:40px}.col:nth-child(1) .veg{height:22px}
.col:nth-child(2) .pork{height:42px}.col:nth-child(2) .chicken{height:40px}.col:nth-child(2) .seafood{height:46px}.col:nth-child(2) .veg{height:24px}
.col:nth-child(3) .pork{height:52px}.col:nth-child(3) .chicken{height:36px}.col:nth-child(3) .seafood{height:44px}.col:nth-child(3) .veg{height:27px}
.mos{display:flex;gap:28px;padding:6px 12px 0;font-size:14px;color:var(--mute-light)}
.mos span{flex:1;text-align:center}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 0;padding:0;list-style:none;font-size:14px;color:var(--mute-light)}
.legend li{display:flex;align-items:center;gap:6px}
.legend li::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--c)}
.chart figcaption{margin-top:10px;font-size:16px}

/* ---------- 7 tonight ---------- */
.tonight{background:radial-gradient(120% 90% at 50% 45%,rgba(0,0,0,0) 55%,rgba(0,0,0,.5)),var(--navy)}
.big{margin:0 0 .12em;font:700 clamp(56px,17vw,200px)/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:#fff}
.big-l{display:block;margin-bottom:10px;font:500 13px/1.4 var(--mono);letter-spacing:.06em;color:var(--mute-dark)}
@media (min-width:900px){.two .big{font-size:clamp(72px,11vw,160px)}}
@media (min-width:900px) and (max-height:820px){.two .big{font-size:clamp(64px,8vw,112px)}}
.count{position:relative;display:inline-block}
.counting{-webkit-text-fill-color:transparent}
.cnt{position:absolute;left:0;top:0;right:0;white-space:nowrap;-webkit-text-fill-color:currentColor}
@media print{.counting{-webkit-text-fill-color:currentColor}.cnt{display:none}}
.tonight .cta-in>span{color:#fff}
.receipt{position:relative;z-index:3;width:min(240px,100%);margin:24px auto 0;padding:14px 16px 16px;border-radius:2px 2px 0 0;background:#f7f5ef;color:#1c1917;font:13px/1.5 var(--mono);box-shadow:0 24px 50px -12px rgba(0,0,0,.6)}
.receipt::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px;background:conic-gradient(from -45deg at 50% 100%,#f7f5ef 90deg,rgba(247,245,239,0) 0) 0 0/12px 8px repeat-x}
.rc-t{margin:0;font-weight:700;letter-spacing:.03em}
.rc-t span{font-weight:400;color:#57534e}
.receipt dl{margin:8px 0 0}
.receipt dl>div{display:flex;justify-content:space-between;gap:12px;padding:2px 0}
.receipt dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.receipt .rc-tot{margin-top:6px;padding-top:6px;border-top:1px dashed #78716c;font-weight:700}

/* ---------- 8 books ---------- */
.books{background:radial-gradient(130% 90% at 50% 40%,rgba(0,0,0,0) 55%,rgba(0,0,0,.45)),linear-gradient(var(--navy),var(--ink) 240px)}
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:36px 0 28px;padding:0;list-style:none}
@media (min-width:600px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cards li{display:flex;align-items:flex-start;gap:14px;padding:20px;border:1px solid rgba(148,163,184,.25);border-radius:18px;background:rgba(255,255,255,.035)}
.cards svg{flex:none;width:28px;height:28px;fill:none;stroke:#5eead4;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cards p{margin:0;font-size:17px}
.note{color:var(--mute-dark);font-size:16px}

/* ---------- 9 morning ---------- */
.scene.morning{padding:0;background:var(--ink)}
.sky{position:relative;display:flex;align-items:flex-end;min-height:86svh;padding:calc(var(--nav) + 80px) 0 112px}
.sky .wrap{width:100%}
.m1,.m2{position:absolute;inset:0;pointer-events:none}
.m1{background:linear-gradient(0deg,var(--deep),rgba(10,63,59,.6) 45%,rgba(10,63,59,0) 80%)}
.m2{background:radial-gradient(90% 60% at 50% 100%,var(--brand),rgba(15,118,110,.55) 45%,rgba(15,118,110,0) 75%)}
.morning .hl{max-width:14em}
.band{padding:44px 0 56px;background:var(--rice);color:var(--slate);--focus:#0f766e}
.acts{display:flex;flex-direction:column;gap:14px}
.btn-wa.lg{min-height:56px;padding:0 32px;font-size:18px}
@media (min-width:600px){.acts{flex-direction:row;align-items:center}}

/* ---------- footer ---------- */
.foot{padding:8px 0 56px;background:var(--rice);color:var(--mute-light);font-size:16px;line-height:1.6}
.foot p{margin:6px 0}
.foot a{color:var(--slate);font-weight:600}
.foot-logo{width:auto;height:28px;margin-bottom:14px}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 20px}

/* ================= motion: only with JS and no reduced-motion ================= */
@media screen and (prefers-reduced-motion:no-preference){
  .js .nav .wa-pill{opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .js .nav.wa-on .wa-pill{opacity:1;visibility:visible}

  @keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes ln{from{opacity:0;transform:translateY(105%)}to{opacity:1;transform:none}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  @keyframes cue{0%{opacity:1;transform:scaleY(0)}55%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1)}}
  @keyframes turn{from{transform:rotateY(70deg)}to{transform:none}}
  @keyframes glow{from{opacity:.2}to{opacity:1}}
  @keyframes scan{0%{opacity:0;transform:translateY(-100%)}12%,85%{opacity:1}100%{opacity:0;transform:none}}
  @keyframes out{from{opacity:1}to{opacity:0}}
  @keyframes drift{from{transform:translateY(-10vh)}to{transform:translateY(10vh)}}
  @keyframes drift2{from{transform:translateY(-16vh)}to{transform:translateY(16vh)}}

  /* dawn: plays on load */
  .js .nav-l .chip-logo{animation:up .8s .1s cubic-bezier(.2,.7,.2,1) both}
  .js .dawn .eyebrow{animation:fade .6s .2s both}
  .js .dawn .ln>span{animation:ln .9s .35s cubic-bezier(.2,.7,.2,1) both}
  .js .dawn .ln+.ln>span{animation-delay:.6s}
  .js .dawn .lede{animation:up .8s .95s both}
  .js .dawn .skip{animation:up .8s 1.15s both}
  .js .cue{animation:cue 2.4s 1.6s ease-in-out 3 both}

  /* pins: sticky stages inside svh wrappers, only on screens tall enough to hold them */
  @media (min-height:560px){
    .js .pin{padding-bottom:0}
    .js .vig{display:block}
    .js .invoice{background:var(--ink)}
    .js .tonight{background:var(--navy)}
    .js .pin .pin-wrap{position:relative;height:200svh}
    .js .pin .stage{position:sticky;top:0;height:100svh;padding:var(--nav) 0 0;justify-content:center}
  }
  @media (min-width:900px) and (min-height:700px){
    .js .scene.pin,.js .scene.pin-d{padding:0}
    .js .invoice .pin-wrap{height:250svh}
    .js .pin-d .pin-wrap{position:relative;height:200svh}
    .js .pin-d .stage{position:sticky;top:0;height:100svh;padding:var(--nav) 0 0;justify-content:center}
    .js .pin .two,.js .pin-d .two{align-items:start}
    .js .pin .copy,.js .pin-d .copy{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;justify-content:safe center;padding-top:var(--nav)}
  }

  /* reveals, fallback: IntersectionObserver adds .in */
  .io .rv{opacity:0;transform:translateY(16px);transition:opacity .4s ease,transform .4s ease}
  .io .rv.in{opacity:1;transform:none}
  .io .hl.rv{opacity:1;transform:none}
  .io .hl.rv .ln>span{opacity:0;transform:translateY(105%);transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1)}
  .io .hl.rv.in .ln>span{opacity:1;transform:none}
  .io .hl.rv.in .ln+.ln>span{transition-delay:.12s}

  /* reveals, scroll-driven where supported */
  .sd .rv:not(.hl){animation:up linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  .sd .hl.rv .ln{view-timeline-name:--ln}
  .sd .hl.rv .ln>span{animation:ln linear both;animation-timeline:--ln;animation-range:entry 10% cover 35%}

  /* 2 invoice: the phone turns, a scan sweeps, lines land, then CHECK Done */
  .io .invoice .turn{transform:rotateY(70deg);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
  .io .invoice.s1 .turn{transform:none}
  .io .invoice .glow{opacity:.2;transition:opacity 1s}
  .io .invoice.s1 .glow{opacity:1}
  .io .invoice.s2 .scan{animation:scan 1.4s ease-in-out both}
  .sd .invoice .pin-wrap{view-timeline-name:--pin}
  .sd .invoice .turn{animation:turn linear both;animation-timeline:--pin;animation-range:contain 0% contain 40%}
  .sd .invoice .glow{animation:glow linear both;animation-timeline:--pin;animation-range:contain 0% contain 40%}
  .sd .invoice .scan{animation:scan linear both;animation-timeline:--pin;animation-range:contain 30% contain 55%}
  .js .invoice .li,.js .invoice .ok,.js .invoice .lines .kv,.js .invoice .btn-chk,.js .invoice .rep{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
  .js .invoice.s3 .li,.js .invoice.s3 .ok,.js .invoice.s3 .lines .kv,.js .invoice.s3 .btn-chk,.js .invoice.s3 .rep{opacity:1;transform:none}
  .js .invoice .li:nth-of-type(2){transition-delay:.08s}
  .js .invoice .li:nth-of-type(3){transition-delay:.16s}
  .js .invoice .li:nth-of-type(4){transition-delay:.24s}
  .js .invoice .ok{transition-delay:.34s}
  .js .invoice .lines .kv{transition-delay:.42s}
  .js .invoice .btn-chk{transition:opacity .45s ease .5s,transform .45s ease .5s,color 0s linear .25s}
  .js .invoice .rep{transition-delay:.58s}
  @media (min-width:900px){.js .invoice .li{transform:translateX(-80px)}}
  .js .invoice .s-todo{opacity:1;transition:opacity .3s}
  .js .invoice .s-done{opacity:0;transition:opacity .3s .15s}
  .js .invoice.s4 .s-todo{opacity:0}
  .js .invoice.s4 .s-done{opacity:1}
  .js .invoice .btn-chk{color:var(--brand)}
  .js .invoice .btn-chk::before{transform:scaleX(0);transition:transform .5s ease}
  .js .invoice.s4 .btn-chk{color:#fff}
  .js .invoice.s4 .btn-chk::before{transform:none}

  /* 3 receive: the dusk lifts, crates drift slower than the page */
  .io .receive .veil{transition:opacity 1.4s ease}
  .io .receive.in .veil{opacity:0}
  .sd .receive{view-timeline-name:--rc}
  .sd .receive .veil{animation:out linear both;animation-timeline:--rc;animation-range:entry 45% entry 100%}
  .sd .crate{animation:drift linear both;animation-timeline:view();animation-range:cover}
  @media (min-width:900px){.sd .c2{animation-name:drift2}}

  /* 4 opening: ticks one by one; the chef's menu loses two tiles */
  .js .ck .tk .box::before{opacity:0;transform:scale(.5);transition:opacity .25s,transform .25s}
  .js .ck .tk .box::after{opacity:0;transition:opacity .25s}
  .js .ck .tk .mut{opacity:0;transition:opacity .3s}
  .js .ck .prog i{transform:scaleX(0);transition:transform 1.5s cubic-bezier(.3,.6,.3,1) .1s}
  .js .ck .float{opacity:0;transform:translateY(14px);transition:opacity .45s 1.5s,transform .45s 1.5s}
  .js .ck.in .tk .box::before{opacity:1;transform:none}
  .js .ck.in .tk .box::after,.js .ck.in .tk .mut{opacity:1}
  .js .ck.in .prog i{transform:none}
  .js .ck.in .float{opacity:1;transform:none}
  .js .ck .tk:nth-child(2) .box::before,.js .ck .tk:nth-child(2) .box::after,.js .ck .tk:nth-child(2) .mut{transition-delay:.25s}
  .js .ck .tk:nth-child(3) .box::before,.js .ck .tk:nth-child(3) .box::after,.js .ck .tk:nth-child(3) .mut{transition-delay:.5s}
  .js .ck .tk:nth-child(4) .box::before,.js .ck .tk:nth-child(4) .box::after,.js .ck .tk:nth-child(4) .mut{transition-delay:.75s}
  .js .ck .tk:nth-child(5) .box::before,.js .ck .tk:nth-child(5) .box::after,.js .ck .tk:nth-child(5) .mut{transition-delay:1s}
  .js .ck .tk:nth-child(6) .mut{transition-delay:1.2s}
  .js .roles .on{border-color:#cbd5e1;color:#334155;transition:color 0s .45s,border-color 0s .45s}
  .js .roles .on::before{opacity:0;transition:opacity .3s .3s}
  .js .roles.in .on{border-color:var(--brand);color:#fff}
  .js .roles.in .on::before{opacity:1}
  .js .roles .off .ti{opacity:1;transition:opacity .5s .9s}
  .js .roles.in .off .ti{opacity:.3}
  .js .roles .off small{opacity:0;transition:opacity .4s 1.1s}
  .js .roles.in .off small{opacity:1}

  /* 5 plate: lines fill in, then the cost counts up */
  .js .dish .pl,.js .dish .dish-tot,.js .dish .dim{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
  .js .dish.in .pl,.js .dish.in .dish-tot,.js .dish.in .dim{opacity:1;transform:none}
  .js .dish .pl:nth-of-type(1){transition-delay:.2s}
  .js .dish .pl:nth-of-type(2){transition-delay:.6s}
  .js .dish .pl:nth-of-type(3){transition-delay:1s}
  .js .dish .dish-tot{transition-delay:1.3s}
  .js .dish .dim{transition-delay:2.4s}

  /* 6 owe: rows slide up, the chart grows */
  .js .owe-ph .card{opacity:0;transform:translateY(18px);transition:opacity .45s,transform .45s}
  .js .owe-ph.in .card{opacity:1;transform:none}
  .js .owe-ph .card:nth-child(3){transition-delay:.15s}
  .js .owe-ph .card:nth-child(4){transition-delay:.3s}
  .js .owe-ph .card:nth-child(5){transition-delay:.45s}
  .js .chart .col{transform:scaleY(0);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .js .chart.in .col{transform:none}
  .js .chart .col:nth-child(2){transition-delay:.15s}
  .js .chart .col:nth-child(3){transition-delay:.3s}

  /* 7 tonight: bars, target line, chip, then the receipt prints */
  .js .tonight .fcb-b{transform:scaleY(0);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .js .tonight .fcb-b.r{transition-delay:.15s}
  .js .tonight.s1 .fcb-b{transform:none}
  .js .tonight .fcb-l b,.js .tonight .delta{opacity:0;transition:opacity .4s .5s}
  .js .tonight.s1 .fcb-l b,.js .tonight.s1 .delta{opacity:1}
  .js .tonight .fcb-t{transform:scaleX(0);transition:transform .7s ease}
  .js .tonight.s2 .fcb-t{transform:none}
  .js .tonight .fc-chip{opacity:0;transform:scale(.85);transition:opacity .4s,transform .4s}
  .js .tonight.s3 .fc-chip{opacity:1;transform:none}
  .js .tonight .receipt{position:absolute;bottom:14px;right:max(0px,calc(50% - 164px));width:min(200px,64%);margin:0;opacity:0;transform:translateY(60px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
  .js .tonight.s4 .receipt{opacity:1;transform:none}
  .js .tonight .receipt dl>div{opacity:0;transition:opacity .25s}
  .js .tonight.s4 .receipt dl>div{opacity:1}
  .js .tonight .receipt dl>div:nth-child(1){transition-delay:.35s}
  .js .tonight .receipt dl>div:nth-child(2){transition-delay:.6s}
  .js .tonight .receipt dl>div:nth-child(3){transition-delay:.85s}
  .js .tonight .receipt dl>div:nth-child(4){transition-delay:1.15s}
  @media (min-width:900px){.js .tonight .receipt{width:240px;right:max(0px,calc(50% - 190px));bottom:7%}}

  /* 8 books: cards fade in, 80 ms apart */
  .js .cards li{opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s}
  .js .cards.in li{opacity:1;transform:none}
  .js .cards li:nth-child(2){transition-delay:.08s}
  .js .cards li:nth-child(3){transition-delay:.16s}
  .js .cards li:nth-child(4){transition-delay:.24s}
  .js .cards li:nth-child(5){transition-delay:.32s}
  .js .cards li:nth-child(6){transition-delay:.4s}

  /* 9 morning: the light rises */
  .io .morning .m1,.io .morning .m2{opacity:0;transition:opacity 1.6s ease}
  .io .morning.in .m1{opacity:1}
  .io .morning.in .m2{opacity:1;transition-delay:.8s}
  .sd .morning{view-timeline-name:--mo}
  .sd .morning .m1{animation:fade linear both;animation-timeline:--mo;animation-range:entry 0% entry 70%}
  .sd .morning .m2{animation:fade linear both;animation-timeline:--mo;animation-range:entry 35% cover 55%}
}

/* #422 (Ace: "a little messy looking from my phone. Titles font are too big and lack of summary"):
   the summary right after the opening, and fewer props on a phone. */
.summary{position:relative;overflow:hidden;overflow:clip;padding:calc(var(--nav) + 32px) 0 56px;background:var(--rice);color:var(--slate)}
.sum-h{margin:0 0 .4em;font:600 clamp(1.5rem,4.6vw,2.6rem)/1.2 var(--sans);letter-spacing:-.01em}
.sum-lede{max-width:46em;margin-bottom:0;color:var(--mute-light);font-size:19px;font-weight:600}
.sum-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0}
@media (max-width:639px){.paper,.crate,.bd .fishbox{display:none}}
/* #423 (Ace: "I don't like this bar on top"): no bar - the logo and the language switch sit on the
   opening scene and scroll away with it; no clock, no WhatsApp pill (the summary below has the buttons). */
.nav,.nav[data-tone]{position:absolute;background:none;box-shadow:none}
.nav[data-tone=light]{color:var(--on-dark)}
.clock,.nav .wa-pill{display:none}

/* #424 (Ace: "Make this summary page more interesting. Lesser words, more flying icons"): icon tiles that
   fly in, and a few icons drifting behind. Static and complete without motion. */
.sum-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:22px 0 28px;padding:0;list-style:none}
@media (min-width:700px){.sum-grid{grid-template-columns:repeat(4,1fr);gap:16px}}
.sum-grid li{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 8px 16px;border-radius:18px;background:#fff;
  text-align:center;box-shadow:0 1px 0 rgba(15,23,42,.06),0 0 0 1px rgba(15,23,42,.06)}
.sum-grid b{font-size:16px;line-height:1.3;font-weight:650}
.ico{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;color:#fff;box-shadow:0 10px 20px -10px rgba(15,23,42,.45)}
.ico svg,.fl svg{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico svg{width:30px;height:30px}
.i1{background:#0f766e}.i2{background:#c2410c}.i3{background:#1d4ed8}.i4{background:#7e22ce}
.i5{background:#0e7490}.i6{background:#be185d}.i7{background:#a16207}.i8{background:#4338ca}
.sum-bg{position:absolute;inset:0;pointer-events:none}
.fl{position:absolute;color:#0f766e;opacity:.2}
.fl svg{width:44px;height:44px}
.f1{top:6%;right:6%}.f2{top:38%;left:-10px}.f3{bottom:12%;right:3%}.f4{top:18%;left:42%}.f5{bottom:4%;left:22%}.f6{top:58%;right:30%}
.f2,.f5{color:#c2410c}.f3,.f6{color:#1d4ed8}
@media (prefers-reduced-motion:no-preference){
  .js .sum-grid .ico{opacity:0;transform:translate(var(--fx,0),var(--fy,0)) rotate(var(--fr,0)) scale(.4)}
  .js .sum-grid.in .ico{animation:sum-fly .9s cubic-bezier(.2,.8,.25,1.25) var(--d,0s) forwards}
  .js .sum-grid.in .ico svg{animation:sum-bob 2.8s ease-in-out calc(var(--d,0s) + 1s) infinite alternate}
  .sum-grid li:nth-child(1){--fx:-140px;--fy:-90px;--fr:-50deg;--d:0s}
  .sum-grid li:nth-child(2){--fx:140px;--fy:-110px;--fr:40deg;--d:.08s}
  .sum-grid li:nth-child(3){--fx:-160px;--fy:20px;--fr:-30deg;--d:.16s}
  .sum-grid li:nth-child(4){--fx:150px;--fy:40px;--fr:60deg;--d:.24s}
  .sum-grid li:nth-child(5){--fx:-120px;--fy:120px;--fr:35deg;--d:.32s}
  .sum-grid li:nth-child(6){--fx:130px;--fy:110px;--fr:-45deg;--d:.4s}
  .sum-grid li:nth-child(7){--fx:-90px;--fy:160px;--fr:-25deg;--d:.48s}
  .sum-grid li:nth-child(8){--fx:100px;--fy:170px;--fr:30deg;--d:.56s}
  .js .fl{animation:sum-drift 9s ease-in-out infinite alternate}
  .js .f2{animation-duration:11s;animation-delay:-3s}.js .f3{animation-duration:13s;animation-delay:-6s}
  .js .f4{animation-duration:10s;animation-delay:-2s}.js .f5{animation-duration:12s;animation-delay:-5s}
  .js .f6{animation-duration:14s;animation-delay:-8s}
}
@keyframes sum-fly{to{opacity:1;transform:none}}
@keyframes sum-bob{to{transform:translateY(-4px) rotate(-4deg)}}
@keyframes sum-drift{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(18px,-26px) rotate(14deg)}100%{transform:translate(-14px,10px) rotate(-10deg)}}