/* revere.inxpanse.com: one page. A serif for headlines (Newsreader), inxpanse.com's two faces for the rest
   (Schibsted Grotesk, Fragment Mono), paper, ink and Inxpanse's blue, and one picture: a dithered horizon
   (art/, drawn by docs/site/art.py). The fonts are SIL OFL and served from fonts/ (docs/site/README.md).
   The page's Content-Security-Policy allows no inline style, so everything is here. */

@font-face { font-family: "Newsreader"; src: url("fonts/newsreader.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("fonts/schibsted-grotesk.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fragment Mono"; src: url("fonts/fragment-mono.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --paper: #F7F6F2; --tint: #EEECE5; --card: #FFFFFF; --veil: rgba(255, 255, 255, .55);
  --ink: #0C0D12; --ink2: #4A4E5C; --ink3: #686D7C; --ink4: #9A988E;
  --line: #E0DED5; --line2: #C9C6BA; --blue: #2B44FF; --sky: #E7EAFF;
  --block: #0C0D12; --block-line: transparent;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0B0C11; --tint: #171920; --card: #1B1D26; --veil: rgba(255, 255, 255, .05);
    --ink: #EEEDE7; --ink2: #B3B6C2; --ink3: #8E92A2; --ink4: #70748A;
    --line: #262932; --line2: #3B3E4A; --sky: #161C46;
    --block: #14161D; --block-line: #262932;
    color-scheme: dark;
  }
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); }
a { color: inherit; text-decoration: none; }
::selection { background: var(--blue); color: #fff; }
[id] { scroll-margin-top: 24px; }
.defs { position: absolute; }
.nb { white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 5; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: var(--paper); font: 500 15px sans-serif; }
.skip:focus { top: 12px; }

.pg{--sans:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;--serif:"Newsreader","Iowan Old Style",Georgia,serif;--mono:"Fragment Mono",ui-monospace,Menlo,"Cascadia Mono",Consolas,monospace;--ease:cubic-bezier(.2,.7,.2,1);
  position:relative;overflow-x:clip;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
.pg *{box-sizing:border-box}
.pg :where(h1,h2,h3,p,ol,ul,figure,dl,dd){margin:0}
.pg :where(ol,ul){padding:0;list-style:none}
.pg :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.wrap{max-width:1232px;margin:0 auto;padding-inline:clamp(20px,4.5vw,56px)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.028em;font-optical-sizing:auto}

/* header */
.top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px}
.brand{display:flex;align-items:center;gap:10px}
.brand svg{width:22px;height:23px}
.brand span{font-weight:650;font-size:20px;letter-spacing:-.025em}
.top nav{display:flex;align-items:center;gap:30px;font-size:15px;color:var(--ink2)}
.top nav a{transition:color .2s}
.top nav a:hover{color:var(--ink)}
.top nav .pill{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:600;transition:transform .25s var(--ease)}
.top nav .pill:hover{color:var(--paper);transform:translateY(-1px)}

/* hero */
.hero{position:relative;text-align:center;padding-top:clamp(28px,3.6vw,48px)}
.hero-copy>*{animation:rise .9s var(--ease) both}
.hero-copy>:nth-child(2){animation-delay:.08s}
.hero-copy>:nth-child(3){animation-delay:.16s}
.hero-copy>:nth-child(4){animation-delay:.24s}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:34px;padding:0 14px 0 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink2)}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--blue);animation:ping 2.4s ease-out infinite}
.pg h1{margin-top:22px;font-size:clamp(46px,6.6vw,96px);line-height:.98;letter-spacing:-.034em;text-wrap:balance}
.lede{margin:22px auto 0;max-width:560px;font-size:clamp(18px,1.45vw,21px);line-height:1.45;color:var(--ink2);text-wrap:balance}
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 24px;border-radius:14px;background:var(--ink);color:var(--paper);font-weight:600;font-size:16px;box-shadow:0 14px 30px -14px rgba(12,13,18,.6),inset 0 1px 0 rgba(255,255,255,.16);transition:transform .25s var(--ease),box-shadow .25s}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 22px 40px -16px rgba(12,13,18,.6),inset 0 1px 0 rgba(255,255,255,.16)}
.btn:hover svg{transform:translateX(4px)}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(12,13,18,.05)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--line2),0 10px 24px -14px rgba(12,13,18,.3)}
.btn.blue{background:var(--blue);color:#fff;box-shadow:0 14px 30px -12px var(--blue),inset 0 1px 0 rgba(255,255,255,.22)}

/* the demo: a card from Revere, then what the agent says. Three scenes take turns over the picture */
.demo{margin-top:clamp(24px,3vw,40px)}
.band{position:relative;padding:48px 0 84px}
.art{position:absolute;left:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:0% 100%;image-rendering:pixelated;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%);mask-image:linear-gradient(180deg,transparent 0,#000 34%)}
.stage{position:relative;z-index:1;height:400px;max-width:1010px;margin:0 auto;animation:rise 1.1s .3s var(--ease) both}
.scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:0;opacity:0;text-align:left;animation:scene 18s infinite}
.scene:nth-child(2),.scene:nth-child(2) *{animation-delay:6s}
.scene:nth-child(3),.scene:nth-child(3) *{animation-delay:12s}
.fcard{flex:0 1 400px;min-width:0;padding:22px 22px 24px;border:1px solid var(--line);border-radius:22px;background:var(--card);box-shadow:0 40px 80px -40px rgba(20,30,110,.55),0 2px 6px rgba(12,13,18,.05);transform:rotate(-2.2deg);animation:cardin 18s var(--ease) infinite}
.fcard-top{display:flex;justify-content:space-between;gap:12px}
.lane{padding:5px 10px;border-radius:7px;background:var(--blue);color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.lane.brief{background:transparent;box-shadow:inset 0 0 0 1px var(--blue);color:var(--blue)}
.hand{padding:5px 0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.ftitle{margin-top:20px;font-family:var(--serif);font-size:27px;line-height:1.08;letter-spacing:-.022em}
.fsrc{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.fquote{margin-top:16px;padding-left:14px;border-left:2px solid var(--blue);font-size:15.5px;line-height:1.5}
.beam{position:relative;flex:0 0 76px;height:2px;background-image:linear-gradient(90deg,#fff 50%,transparent 0);background-size:8px 2px}
.beam i{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.35);animation:fly 18s linear infinite}
.chat{flex:0 1 420px;min-width:0;min-height:292px;padding:18px 18px 20px;border-radius:28px;background:var(--card);box-shadow:0 50px 90px -40px rgba(20,30,110,.6),0 2px 6px rgba(12,13,18,.05)}
.chat-head{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink3)}
.chat-head i{width:28px;height:28px;border-radius:50%;background:var(--blue)}
.chat-head b{flex:1;font-weight:600;font-size:15px;color:var(--ink)}
.chat-body{position:relative;padding-top:16px}
.typing{position:absolute;left:0;top:16px;display:flex;gap:5px;padding:14px 16px;border-radius:18px 18px 18px 6px;background:var(--tint);opacity:0;animation:typing 18s linear infinite}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink3);animation:dot 1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s!important}
.typing i:nth-child(3){animation-delay:.3s!important}
.bubble{padding:14px 16px;border-radius:18px 18px 18px 6px;background:var(--tint);font-size:16px;line-height:1.45;animation:pop 18s var(--ease) infinite}
.ask{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;animation:pop2 18s var(--ease) infinite}
.ask span{padding:9px 15px;border-radius:11px;background:var(--ink);color:var(--paper);font-weight:600;font-size:14px}
.ask span+span{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.bars{position:relative;z-index:1;display:flex;justify-content:center;gap:6px;margin-top:34px}
.bars i{width:44px;height:3px;border-radius:2px;background:rgba(255,255,255,.4);overflow:hidden;position:relative}
.bars i::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0);animation:bar 18s linear infinite}
.bars i:nth-child(2)::after{animation-delay:6s}
.bars i:nth-child(3)::after{animation-delay:12s}
.demo figcaption{padding:14px 20px 0;font-size:13px;color:var(--ink3)}

/* what it reads */
.reads{display:flex;align-items:center;gap:28px;margin-top:18px;padding-block:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.reads>span{flex:none;color:var(--ink3)}
.ticker{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker ul{display:flex;width:max-content;animation:slide 46s linear infinite}
.ticker li{display:flex;align-items:center;gap:10px;padding-right:44px;white-space:nowrap;font-size:16px;color:var(--ink2)}
.ticker svg{flex:none;width:18px;height:18px;color:var(--ink)}

/* the one line */
.line1{padding-block:clamp(96px,11vw,168px);text-align:center}
.line1 p{max-width:980px;margin:0 auto;font-size:clamp(34px,4.6vw,66px);line-height:1.04;text-wrap:balance}
.line1 span{color:var(--ink4)}

/* five things, each a line and a picture */
.feat{display:flex;flex-direction:column;gap:clamp(56px,7vw,104px);padding-bottom:clamp(96px,11vw,160px)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:36px clamp(40px,7vw,104px)}
.row:nth-child(even){flex-direction:row-reverse}
.say{flex:1 1 360px;min-width:0;max-width:470px}
.say .mono{color:var(--ink3)}
.say h2{margin-top:16px;font-size:clamp(30px,3.1vw,44px);line-height:1.04;text-wrap:balance}
.say p{margin-top:16px;font-size:18px;line-height:1.5;color:var(--ink2);text-wrap:pretty}
.pic{position:relative;flex:1 1 440px;min-width:0;min-height:400px;display:flex;align-items:center;justify-content:center;padding:36px;border-radius:28px;background:var(--tint);overflow:hidden;transition:transform .5s var(--ease)}
.pic.sky{background:var(--sky)}
.row:hover .pic{transform:translateY(-4px)}
/* 1 sources */
.rails{display:flex;flex-direction:column;gap:12px;width:calc(100% + 72px);margin-inline:-36px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.rail{display:flex;gap:12px;width:max-content;animation:slide 40s linear infinite}
.rail:nth-child(2){animation-duration:52s;animation-direction:reverse}
.rail:nth-child(3){animation-duration:46s}
.src{display:flex;align-items:center;gap:10px;padding:13px 18px;border-radius:14px;background:var(--card);box-shadow:0 1px 2px rgba(12,13,18,.06);font-size:15.5px;white-space:nowrap}
.src i{width:8px;height:8px;border-radius:2px;background:var(--blue)}
.src.x i{background:var(--line2)}
/* 2 the sift */
.sift{width:100%;max-width:440px;display:flex;flex-direction:column;gap:6px}
.it{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 16px;border-radius:12px;background:var(--veil);font-size:15px;color:var(--ink3);animation:itin 9s var(--ease) infinite}
.it span{white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.it.keep{padding-block:14px;background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 14px 30px -18px rgba(20,30,110,.5);animation-name:keepin}
.it.keep span{padding:5px 9px;border-radius:7px;background:var(--blue);color:#fff;font-weight:400}
.it:nth-child(2){animation-delay:.25s}.it:nth-child(3){animation-delay:.5s}.it:nth-child(4){animation-delay:.75s}.it:nth-child(5){animation-delay:1s}.it:nth-child(6){animation-delay:1.25s}
/* 3 the card and its parts */
.big{width:100%;max-width:440px;padding:12px;border-radius:22px;background:var(--card);box-shadow:0 40px 80px -44px rgba(20,30,110,.5),0 1px 2px rgba(12,13,18,.06)}
.part{position:relative;padding:12px 14px;border-radius:12px;animation:p1 12s infinite}
.part.b{animation-name:p2}.part.c{animation-name:p3}.part.d{animation-name:p4}
.part::after{content:attr(data-k);position:absolute;right:10px;top:-9px;padding:2px 7px;border-radius:5px;background:var(--blue);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.06em;opacity:0;animation:k1 12s infinite}
.part.b::after{animation-name:k2}.part.c::after{animation-name:k3}.part.d::after{animation-name:k4}
.big .ftitle{margin-top:0;font-size:25px}
.big .fquote{margin-top:0}
.tasks{display:flex;flex-direction:column;gap:9px}
.tasks div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 14px;font-size:15px}
.tasks span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
/* 4 the agent's work */
.work{width:100%;max-width:420px;display:flex;flex-direction:column;gap:10px}
.work .bubble{align-self:flex-start;background:var(--card);box-shadow:0 1px 2px rgba(12,13,18,.06);animation:none}
.done{display:flex;align-items:center;gap:10px;align-self:flex-start;padding:10px 14px;border-radius:12px;background:var(--card);font-size:14.5px;box-shadow:0 1px 2px rgba(12,13,18,.06);animation:done 8s var(--ease) infinite}
.done:nth-child(3){animation-delay:.7s}
.done svg{width:16px;height:16px;fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.done.wait svg{stroke:var(--ink4)}
.work .ask{margin-top:2px;animation:done 8s 1.4s var(--ease) infinite}
/* 5 what is kept */
.kept{width:100%;max-width:420px;display:flex;flex-direction:column;gap:20px}
.kept div{display:flex;flex-wrap:wrap;gap:8px}
.kept p{flex:1 1 100%;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.tagc{padding:8px 13px;border-radius:999px;background:var(--card);font-size:14.5px;box-shadow:0 1px 2px rgba(12,13,18,.06);animation:bob 5s ease-in-out infinite}
.tagc:nth-of-type(2){animation-delay:.6s}.tagc:nth-of-type(3){animation-delay:1.2s}.tagc:nth-of-type(4){animation-delay:1.8s}
.gone{position:relative;padding:8px 13px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2);font-size:14.5px;color:var(--ink3)}
.gone::after{content:"";position:absolute;left:9px;right:9px;top:50%;height:1.5px;background:var(--ink);transform-origin:left;transform:scaleX(0);animation:strike 8s var(--ease) infinite}
.gone:nth-of-type(2)::after{animation-delay:.35s}.gone:nth-of-type(3)::after{animation-delay:.7s}
.say a{color:var(--ink);border-bottom:1px solid var(--line2);transition:border-color .2s}
.say a:hover{border-color:var(--ink)}

/* connect */
.connect{background:var(--block);color:#F4F3EE;border-radius:40px;box-shadow:inset 0 0 0 1px var(--block-line)}
.connect-in{padding:clamp(40px,6vw,88px) clamp(22px,5vw,80px)}
.connect .mono{color:#9B9FB0}
.connect h2{margin-top:16px;font-size:clamp(38px,4.8vw,68px);line-height:1}
.connect .sub{margin-top:18px;max-width:520px;font-size:18px;color:#B4B7C4}
.tabs{display:inline-flex;gap:4px;margin-top:44px;padding:4px;border-radius:14px;background:rgba(255,255,255,.1)}
.tabs[hidden]{display:none}
.tabs button{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;border:0;border-radius:10px;background:transparent;color:#D5D7E0;font:600 15px var(--sans);cursor:pointer;transition:background-color .25s,color .25s}
.tabs small{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.tabs button[aria-pressed="true"]{background:#fff;color:#0C0D12}
.panel{margin-top:16px;animation:rise .5s var(--ease) both}
.panel[hidden]{display:none}
.panel-name{display:none;margin-bottom:14px;font-weight:600;font-size:20px}
.tabs[hidden]~.panel{margin-top:44px}
.tabs[hidden]~.panel .panel-name{display:block}
.field{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding:14px 14px 14px 26px;border-radius:20px;background:#fff;color:#0C0D12}
.field code{flex:1 1 360px;min-width:0;user-select:all;-webkit-user-select:all;font-family:var(--mono);font-size:clamp(13.5px,1.55vw,22px);line-height:1.5;letter-spacing:-.01em;overflow-wrap:break-word}
.copy[hidden]{display:none}
.copy{min-width:116px;min-height:54px;padding:0 24px;border:0;border-radius:13px;background:var(--blue);color:#fff;font:600 15px var(--sans);cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s}
.copy:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px var(--blue)}
.todo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:28px 36px;margin-top:36px;counter-reset:todo}
.todo li{counter-increment:todo;padding-top:16px;border-top:1px solid rgba(255,255,255,.22);font-size:15.5px;color:#B4B7C4;text-wrap:pretty}
.todo li::before{content:counter(todo);display:block;margin-bottom:10px;font-family:var(--mono);font-size:12px;color:#fff}
.todo strong{font-weight:650;color:#fff}
.todo code{font-family:var(--mono);font-size:13.5px;color:#fff}
.pg details{margin-top:30px;border-top:1px solid rgba(255,255,255,.14)}
.pg summary{display:flex;align-items:center;gap:10px;min-height:54px;cursor:pointer;list-style:none;font-weight:600;font-size:15.5px}
.pg summary::-webkit-details-marker{display:none}
.pg summary svg{width:16px;height:16px;fill:none;stroke:#9B9FB0;stroke-width:1.8;stroke-linecap:round;transition:transform .3s var(--ease)}
.pg details[open] summary svg{transform:rotate(45deg)}
.instr-box{display:grid;gap:14px;justify-items:start;padding-bottom:10px}
.copy.small{min-width:96px;min-height:44px;background:rgba(255,255,255,.12)}
.copy.small:hover{box-shadow:none;background:rgba(255,255,255,.2)}
.instr{padding:0;max-width:760px;display:grid;gap:8px;font-size:14.5px;line-height:1.55;color:#B4B7C4}
.fine{margin-top:22px;font-size:14px;color:#9B9FB0}

/* the close */
.close{position:relative;margin-top:clamp(72px,9vw,128px);padding:clamp(88px,10vw,150px) 20px clamp(200px,24vw,340px);text-align:center}
.close .art{object-position:60% 100%;-webkit-mask-image:linear-gradient(180deg,transparent 6%,#000 52%);mask-image:linear-gradient(180deg,transparent 6%,#000 52%)}
.close h2{position:relative;font-size:clamp(40px,5.6vw,84px);line-height:1;text-wrap:balance}
.close .cta{position:relative}
.foot{position:relative;background:var(--blue);color:#fff}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;padding-block:28px 0;font-size:15px}
.foot p{display:flex;align-items:center;gap:12px}
.foot .lockup{width:97px;height:21px}
.foot nav{display:flex;flex-wrap:wrap;gap:10px 30px}
.foot a{transition:opacity .2s}
.foot a:hover{opacity:.7}
.word{display:block;margin-top:24px;font-weight:650;font-size:clamp(120px,27vw,400px);line-height:.74;letter-spacing:-.05em;text-align:center;color:rgba(255,255,255,.16);user-select:none;overflow:hidden;height:.56em}

@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(43,68,255,.5)}70%,100%{box-shadow:0 0 0 9px rgba(43,68,255,0)}}
@keyframes scene{0%{opacity:0}1.5%,33.3%{opacity:1}35%,100%{opacity:0}}
@keyframes cardin{0%{opacity:0;transform:translate(-26px,14px) rotate(-6deg)}3.5%,100%{opacity:1;transform:rotate(-2.2deg)}}
@keyframes fly{0%,3.5%{left:0;opacity:0}4.5%{opacity:1}7.5%{left:66px;opacity:1}8.5%,100%{left:66px;opacity:0}}
@keyframes typing{0%,6.5%{opacity:0}7.5%,12%{opacity:1}12.6%,100%{opacity:0}}
@keyframes dot{50%{transform:translateY(-4px);opacity:.5}}
@keyframes pop{0%,12.4%{opacity:0;transform:translateY(8px) scale(.97)}14.5%,100%{opacity:1;transform:none}}
@keyframes pop2{0%,16%{opacity:0;transform:translateY(8px)}18%,100%{opacity:1;transform:none}}
@keyframes bar{0%{transform:scaleX(0)}33.3%,100%{transform:scaleX(1)}}
@keyframes slide{to{transform:translateX(-50%)}}
@keyframes itin{0%{opacity:0;transform:translateY(10px)}6%,62%{opacity:1;transform:none}74%,92%{opacity:.34;transform:none}100%{opacity:0}}
@keyframes keepin{0%{opacity:0;transform:translateY(10px)}6%,62%{opacity:1;transform:none}74%,92%{opacity:1;transform:scale(1.03)}100%{opacity:0}}
@keyframes p1{0%,22%{background:var(--sky)}25%,100%{background:transparent}}
@keyframes p2{0%,24%{background:transparent}25%,47%{background:var(--sky)}50%,100%{background:transparent}}
@keyframes p3{0%,49%{background:transparent}50%,72%{background:var(--sky)}75%,100%{background:transparent}}
@keyframes p4{0%,74%{background:transparent}75%,97%{background:var(--sky)}100%{background:transparent}}
@keyframes k1{0%,22%{opacity:1}25%,100%{opacity:0}}
@keyframes k2{0%,24%{opacity:0}25%,47%{opacity:1}50%,100%{opacity:0}}
@keyframes k3{0%,49%{opacity:0}50%,72%{opacity:1}75%,100%{opacity:0}}
@keyframes k4{0%,74%{opacity:0}75%,97%{opacity:1}100%{opacity:0}}
@keyframes done{0%,8%{opacity:0;transform:translateY(8px)}16%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes bob{50%{transform:translateY(-5px)}}
@keyframes strike{0%,8%{transform:scaleX(0)}20%,88%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
@media (max-width:860px){
  .top nav a:not(.pill){display:none}
  .stage{height:660px}
  .scene{flex-direction:column}
  .fcard,.chat{flex:none;width:100%;max-width:400px}
  .chat{min-height:0}
  .beam{flex:0 0 26px;width:2px;height:26px;background-image:linear-gradient(180deg,#fff 50%,transparent 0);background-size:2px 8px}
  .beam i{display:none}
  .row:nth-child(even){flex-direction:row}
  .pic{min-height:340px;padding:24px}
  .rails{width:calc(100% + 48px);margin-inline:-24px}
}
@media (prefers-reduced-motion:reduce){
  .pg *,.pg *::before,.pg *::after{animation:none!important;transition:none!important}
  .scene:first-child,.bubble,.ask,.done,.it{opacity:1}
  [data-reveal].pre{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* the page as it is scrolled: site.js marks what starts hidden */
[data-reveal]{transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].pre{opacity:0;transform:translateY(22px)}
.row .pic[data-reveal]{transition-delay:.1s}

/* the 404 page */
.lost{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.lost main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 20px;text-align:center}
.lost h1{margin-top:20px;font-size:clamp(40px,6vw,84px)}

@media (max-width:480px){
  .connect{border-radius:28px}
  .field{padding:14px 12px 12px 18px}
  .field code{flex-basis:100%;font-size:13px}
  .field .copy{margin-left:auto}
}
@media (pointer:coarse){.foot nav a,.top nav a{padding-block:8px}}
@media print{[data-reveal].pre{opacity:1;transform:none}.copy,.top nav{display:none}}