/* Terminal's home page: for now only its opening, laid out for a laptop.

   A stage the height of the window, held still while the page is scrolled
   through the hero, then carried on up with it. The headline, "Done right."
   and a phone rising from the bottom edge are there from the start; the
   pieces slide out of the phone and the notifications appear as the page is
   scrolled (hero.js says how far; this file says how each one shows).

   EVERYTHING IN THE STAGE IS SIZED BY THE STAGE'S WIDTH (cqw: a hundredth of
   it), and placed by a share of its width and height, so the hero is the same
   picture at 1280 and at 1728 pixels wide.

   NOTHING HERE DRAWS THE APP. The phone's screen is a real screenshot
   (assets/hero-myflights.jpg). */

@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-symbols.woff2) format('woff2');unicode-range:U+2192,U+25B4,U+25BE}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#f9f9f6;
  --ink:#141413;
  --ink2:rgb(20 20 19/.62);
  --ink3:rgb(20 20 19/.46);
  --line:rgb(20 20 19/.09);
  --line2:rgb(20 20 19/.16);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.44,0,.56,1);
  --t:220ms;
  /* The page's edge: 48px, and on a window wider than 1376px whatever keeps
     the header and the footer within 1280px. */
  --side:max(48px,calc((100vw - 1376px) / 2 + 48px));
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
a{color:inherit;-webkit-tap-highlight-color:transparent}
img{display:block}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:var(--side);top:-60px;background:var(--ink);color:var(--bg);padding:8px 12px;border-radius:6px;font-weight:600;text-decoration:none;z-index:60}
.skip:focus{top:12px}

/* ── NUMBERED POINTS ── Each scene's number (1A, 2B, 3C...) is a button to
   that scene (points.js scrolls there with the site's own smoothing): the
   pointer, a slightly deeper green as it is hovered, and a ring when it
   has the keyboard. */
.pt{-webkit-appearance:none;appearance:none;cursor:pointer;transition:background-color .15s,border-color .15s}
.pt:hover{background:#dff3e6;border-color:#a9dcba}
.pt:active{background:#d2edda}
.pt:focus{outline:none}
/* A whole point is its button: the button's own area (::after) is spread
   over the point, its number, headline and line, so a click anywhere on it
   goes to its scene. Over it the point gets a soft green ground behind it
   (::before) and its number the hover colour; with the keyboard, the focus
   ring goes round the whole point. (Search's points stop under their line:
   --hit, measured by search.js.) */
.it,.pl-it{position:relative}
.it,.pl-it,.sr-cap,.pv-cap{isolation:isolate}
.pt::after,.it::before,.pl-it::before,.sr-cap::before,.pv-cap::before{content:"";position:absolute;left:-14px;right:-14px;top:-10px;bottom:-10px;border-radius:14px}
.pt::after{z-index:1}
.it::before,.pl-it::before,.sr-cap::before,.pv-cap::before{z-index:-1;background:#eef8f1;opacity:0;transition:opacity .15s}
.sr-cap .pt::after,.sr-cap::before{bottom:auto;height:calc(var(--hit, 100%) + 20px)}
.it:has(.pt:hover)::before,.pl-it:has(.pt:hover)::before,.sr-cap:has(.pt:hover)::before,.pv-cap:has(.pt:hover)::before,
.it:has(.pt:focus-visible)::before,.pl-it:has(.pt:focus-visible)::before,.sr-cap:has(.pt:focus-visible)::before,.pv-cap:has(.pt:focus-visible)::before{opacity:1}
.pt:focus-visible::after{outline:2px solid #16a34a;outline-offset:0}

/* ── HERO AND MY FLIGHTS ── The wrapper is the scroll the stage is held
   for: 700vh, of which the stage's own 100vh is the part it is not held.
   hero.js splits the 600vh held into the hero's 140vh (as it always was),
   100vh for everything but the phone to scroll away, and 360vh for My
   Flights. */
.hero{height:700vh}
.stage{position:sticky;top:0;height:100vh;min-height:640px;overflow:hidden;background:#f9f9f6;container-type:inline-size;
  /* Apple's own system font, on an Apple device; Inter elsewhere. */
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",sans-serif;
  --text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",sans-serif;
  font-family:var(--text);
  --out:cubic-bezier(.16,1,.3,1)}

/* The nav: the mark and the name 5% in from the left, the X account 5% in
   from the right. */
/* Its right end leaves room for the App Store button, which stays at the
   window's top right all the way down (.get). */
.top{position:absolute;z-index:5;top:3.5%;left:5%;right:calc(5% + 11.2cqw);display:flex;align-items:center;justify-content:space-between;gap:2cqw}
.brand{display:inline-flex;align-items:center;gap:.7cqw;font-size:1.6cqw;font-weight:600;line-height:1.2;letter-spacing:-.015em;text-decoration:none}
.brand img{width:2.2cqw;height:2.2cqw;flex-shrink:0}
.brand span{font-family:var(--mono);font-weight:500}
.brand:active{opacity:.6}
.follow{display:inline-flex;align-items:center;padding:.55cqw 1.3cqw;border:1px solid #dddcd5;border-radius:999px;font-size:1.6cqw;font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap;transition:border-color var(--t) var(--ease),background-color var(--t) var(--ease)}
@media(hover:hover){.follow:hover{border-color:var(--ink);background:rgb(20 20 19/.04)}}
.follow:active{opacity:.6}

/* The headline, two lines, and "Done" and "right." either side of the
   phone, "Done" ending where "right." starts the other side. */
.headline,.tag span{position:absolute;font-family:var(--display);font-size:11.5cqw;font-weight:600;line-height:.98;letter-spacing:-.05em;white-space:nowrap}
.headline{top:14%;left:0;right:0;text-align:center;color:#0b0b0b;animation:up .9s var(--out) both}
.tag span{top:70%;color:#8a8a83;animation:up .9s var(--out) .9s both}
.tag .done{right:64.5%}
.tag .right{left:64.5%;animation-delay:1.05s}

/* What scrolls away after the hero, in three layers: the nav, what lies
   under the phone (the glow, the headline, "Done right."), and what lies
   over it (the pieces and the notifications). hero.js moves them. */
.away.back,.away.front{position:absolute;inset:0;pointer-events:none}
.away.front{z-index:2}
.glow{position:absolute;left:30%;right:30%;top:55%;height:60%;background:radial-gradient(ellipse at center,rgba(74,222,128,.10),rgba(74,222,128,0) 65%)}

/* The phones: an iPhone 17 drawn here, 71.5 x 149.6 mm. A thin titanium
   frame, a highlight along it, the buttons (the action button and the two
   volume buttons on the left, the side button on the right), a thin black
   border, then the screen, 1206 x 2622 like the shots, its corners an
   iPhone's (62pt of 402), and the Dynamic Island (126 x 37pt, 11pt down).
   Every size is a share of the phone's width, --w. The hero's phone stands
   with its foot under the stage's bottom edge and rises in on load;
   hero.js moves both phones from there. The second waits behind the
   first. */
.ph{position:absolute;left:38%;top:62%;width:24%;transform-origin:0 0}
.ph1{z-index:1}
.ph2{z-index:0;opacity:0}
.ph2.front{z-index:1}
/* While it waits behind the first, the second phone is a little darker. */
.dim{position:absolute;z-index:4;inset:0;border-radius:inherit;background:#000;opacity:0;pointer-events:none}
/* Once the hero has gone, the first phone stands in front of My Flights'
   pieces, so those from its far side pass behind it on their way to the
   second phone rather than over it. */
.ph1.over{z-index:7}
.iphone{--w:24cqw;position:relative;padding:calc(var(--w) * .012);border-radius:calc(var(--w) * .178);
  background:linear-gradient(135deg,#5d5d61 0%,#b9b9bd 12%,#727276 30%,#3b3b3e 52%,#828286 76%,#2d2d30 100%);
  box-shadow:0 2.4cqw 4.4cqw -2cqw rgba(0,0,0,.42),0 .8cqw 1.6cqw -.8cqw rgba(0,0,0,.25)}
.iphone::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 calc(var(--w) * .0025) rgba(255,255,255,.28),inset 0 calc(var(--w) * .004) calc(var(--w) * .006) rgba(255,255,255,.35)}
.rise{animation:rise 1.7s var(--out) .25s both}
.btn{position:absolute;width:calc(var(--w) * .01);border-radius:calc(var(--w) * .005);background:linear-gradient(90deg,#3b3b3e,#a3a3a7 50%,#4a4a4d)}
.act,.vu,.vd{left:calc(var(--w) * -.008)}
.act{top:19%;height:4.5%}
.vu{top:28%;height:6.8%}
.vd{top:37%;height:6.8%}
.side{right:calc(var(--w) * -.008);top:29%;height:10.5%}
.bezel{background:#000;padding:calc(var(--w) * .0227);border-radius:calc(var(--w) * .166)}
.screen{position:relative;aspect-ratio:1206/2622;border-radius:calc(var(--w) * .1433);overflow:hidden;background:#000}
.shot{width:100%;height:auto}
.island{position:absolute;z-index:3;left:34.35%;top:1.26%;width:31.3%;height:4.23%;border-radius:999px;background:#000}

/* The second phone's screen: the screenshot's own black (#050505), its
   status bar (rows 0 to 150), always there, and the blocks the pieces fit,
   each the exact rectangle of that block in the shot (x, y, width, height
   and corner radius, of its 1206 x 2622), cut from the same image: the
   route (40, 964, 1126 x 580, 34), the weather and the chips (40, 1552,
   1126 x 238, 34), the map (47, 1817, 1111 x 451, 36: the map itself) and
   the Timeline (40, 2290, 1126 x 276, 34: its heading down to the tab bar's
   foot; the rest of it is under the tab bar in this shot). Under them all,
   the whole shot (r-rest: the title, the first card, the tab bar) comes in
   with the last piece. hero.js sets their opacity. */
.ph2 .screen{background:#050505}
.reg{position:absolute;left:0;width:100%;overflow:hidden;opacity:0}
.reg img{width:100%;height:auto}
.r-rest{top:0;height:100%}
.r-bar{top:0;height:5.721%;opacity:1}
.r-route{left:3.317%;top:36.766%;width:93.367%;height:22.121%;border-radius:3.02%/5.862%}
.r-route img{width:107.105%;margin:-85.613% 0 0 -3.552%}
.r-wx{left:3.317%;top:59.191%;width:93.367%;height:9.077%;border-radius:3.02%/14.286%}
.r-wx img{width:107.105%;margin:-137.833% 0 0 -3.552%}
.r-map{left:3.897%;top:69.298%;width:92.123%;height:17.201%;border-radius:3.24%/7.982%}
.r-map img{width:108.551%;margin:-163.546% 0 0 -4.23%}
.r-tl{left:3.317%;top:87.338%;width:93.367%;height:10.526%;border-radius:3.02%/12.319%}
.r-tl img{width:107.105%;margin:-203.375% 0 0 -3.552%}

/* The tab bar is not shown (it still has Deck): each shot's own colour is
   laid over it, from row 2364 of the 2622 down. The first phone's black
   (5, 5, 5); in the second, the Timeline card's (18, 18, 18), so its
   heading stays and the card runs on under where the bar was. */
/* (Each runs a little past the edge it is clipped at, so no sliver of the
   shot shows along that edge.) */
.nobar{position:absolute;left:-2px;right:-2px;bottom:-2px;background:#050505}
.ph1 .nobar{top:90.1602%}
.r-tl .nobar{top:26.8116%;background:#121212}
.r-rest .nobar{left:3.317%;right:3.317%;top:90.1602%;background:#121212}
/* And the shot itself stops there in these two, so no row of what was under
   the bar shows along the Timeline block's clipped foot. */
.r-tl img,.r-rest img{clip-path:inset(0 0 9.8398% 0)}

@keyframes up{from{opacity:0;transform:translateY(8px)}}
@keyframes rise{from{transform:translateY(110%)}}

/* What the scroll brings in. hero.js gives each element with a data-at its
   own --t, 0 to 1, from the page's smoothed scroll: 0 before its point, 1
   once the scroll is past it. Everything below moves by --t, with transform
   and opacity only. With no script --t is 1, everything already there.

   The pieces, over the phone's edge: each comes out of the phone's side,
   fading in as it slides 5cqw outward (the chip 3.5cqw). */
.piece{position:absolute;z-index:2;opacity:var(--t,0)}
/* The time card at 28%, not 29.5%: further in, its corner touches the tail
   of the g in "flights." as it floats. "In the air" at 62%, not 60.5%:
   higher, it touches the gate pill as the two float. */
.time{left:28%;top:51%;transform:translateX(calc((1 - var(--t,0)) * 5cqw))}
.gate{left:57.5%;top:52.5%;transform:translateX(calc((1 - var(--t,0)) * -5cqw))}
.air{left:60%;top:62%;transform:translateX(calc((1 - var(--t,0)) * -5cqw))}

/* The cards: dark, lit from above, in mono. */
.card{background:linear-gradient(180deg,#191919,#0c0c0c);color:#eaeaea;white-space:nowrap;font-family:ui-monospace,"JetBrains Mono",Menlo,monospace;
  box-shadow:0 22px 40px -18px rgba(0,0,0,.55),0 4px 10px -6px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}
.time .card{display:flex;flex-direction:column;align-items:flex-start;padding:1.2cqw 1.9cqw;border-radius:1.6cqw}
.time .was{font-size:1.7cqw;line-height:1.2;color:#8a8a8a}
.time .now{font-size:3.4cqw;line-height:1.1;color:#f5b041}
.pill{display:flex;align-items:center;gap:.9cqw;padding:1cqw 1.9cqw;border-radius:999px;font-size:1.9cqw;line-height:1.2}
.gate .was{color:#8a8a8a}
.gate .now{color:#4ade80}
/* The green dot's pulse: a ring that grows from it and fades. */
.dot{position:relative;flex:none;width:1cqw;height:1cqw;border-radius:50%;background:#4ade80}
.dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(74,222,128,.55);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{from{opacity:1;transform:none}to{opacity:0;transform:scale(3.4)}}

/* The change, a little further down the scroll than the card's arrival
   (the old value and the new one have their own data-at): a line draws
   through the old time or gate, then the new one comes in. */
.was{position:relative}
.was::after{content:'';position:absolute;left:0;right:0;top:50%;height:.15cqw;margin-top:-.075cqw;background:#bbb;transform:scaleX(var(--t,0));transform-origin:left}
.time .now{opacity:var(--t,0);transform:translateY(calc((1 - var(--t,0)) * .8cqw))}
.gate .now{opacity:var(--t,0)}

/* Each card floats, slowly, tilting a little: on a wrapper inside it, so
   the float never fights the arrival. */
.time .float{transform:rotate(-3deg);animation:float-time 6s ease-in-out infinite alternate}
.gate .float{transform:rotate(2.5deg);animation:float-gate 6.5s ease-in-out infinite alternate}
.air .float{transform:rotate(-1.5deg);animation:float-air 7.5s ease-in-out infinite alternate}
@keyframes float-time{from{transform:translate(0,0) rotate(-3deg)}to{transform:translate(0,-.8cqw) rotate(-1.5deg)}}
@keyframes float-gate{from{transform:translate(0,0) rotate(2.5deg)}to{transform:translate(0,-.7cqw) rotate(1deg)}}
@keyframes float-air{from{transform:translate(0,0) rotate(-1.5deg)}to{transform:translate(0,-.5cqw) rotate(0deg)}}

/* The app's own command chip: Apple's search token, Terminal green at 30%
   over the dark search field (about #2c5a3d), lit from above. */
.chip{left:58%;top:91%;transform:translateX(calc((1 - var(--t,0)) * -3.5cqw));padding:.72cqw 1.56cqw;border-radius:1.2cqw;background:linear-gradient(180deg,#336a47,#285338);color:#fff;font:400 2.1cqw/1.2 var(--text);white-space:nowrap;box-shadow:0 14px 26px -12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12)}

/* The notifications, as an iPhone draws one: glass, the app's icon, the
   app's name and "now", the message on one line. Each is as wide as its
   words, so the words are always inside it. */
.note{position:absolute;z-index:3;display:flex;align-items:center;gap:1.05cqw;width:max-content;padding:.95cqw 1.9cqw .95cqw 1.05cqw;border-radius:1.9cqw;
  background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 34px -18px rgba(0,0,0,.3),0 2px 6px -3px rgba(0,0,0,.08),0 0 0 .5px rgba(0,0,0,.06);
  font-size:1.5cqw;line-height:1.25;white-space:nowrap;
  opacity:var(--t,0);transform:translateY(calc((1 - var(--t,0)) * 8px));
  animation:bob 7s ease-in-out infinite alternate}
/* The icon is the app's own logo, the file the nav uses. */
.note img{width:4.3cqw;height:4.3cqw;border-radius:23%;flex-shrink:0}
.note-top{display:flex;align-items:baseline;justify-content:space-between;gap:2.1cqw}
.note b{font-weight:600}
.note-top span{font-size:1.35cqw;color:#8a8a83}
.n1{left:2%;top:33%}
.n2{right:2%;top:36%}
.n3{left:2%;top:44%}
/* Each floats too, at its own point in the swing so they never move
   together. (translate, not transform, so it adds to the arrival rather
   than replacing it.) */
.n1{animation-delay:-1s}
.n2{animation-delay:-3.5s}
.n3{animation-delay:-5s}
@keyframes bob{from{translate:0 0}to{translate:0 -.6cqw}}

/* With no script at all: everything already there, already changed, and
   the hero only. */
@media(scripting:none){
  [data-at]{--t:1}
  .hero{height:240vh}
  .ph2,.k,.words{display:none}
}

/* ── MY FLIGHTS ── The four pieces: the hero's cards (.card: the same dark
   gradient, mono type, shadow and top light; the time card's corners and
   padding; its small grey and its green), floating as they float. Each is
   its own live piece while it floats, and the screenshot's pixels for its
   spot as it lands (hero.js crossfades one into the other and sizes the
   second). */
.k{position:absolute;left:0;top:0;z-index:6;transform-origin:0 0;opacity:0;pointer-events:none}
.k-free{position:absolute;left:0;top:0}
/* A piece is three layers, so it can fit its block exactly without its
   words being stretched: the card's look (pa: the hero card's gradient,
   corners and shadow), the block it fits (pb: the block's own colour, sized
   by hero.js to the block exactly), and its words on top. Landing, both
   plates are scaled from the card's shape to the block's, pa giving way to
   pb, and the words to fit inside. */
.k-bob{position:relative}
.k-plate{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
.k-plate.pa{right:0;bottom:0;background:linear-gradient(180deg,#191919,#0c0c0c);border-radius:1.6cqw;box-shadow:0 22px 40px -18px rgba(0,0,0,.55),0 4px 10px -6px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}
.k-plate.pb{background:#121212;opacity:0}
.k .k-card{background:none;box-shadow:none;transform-origin:0 0}
.k .mapc{background:#0d1014}
.k-card{position:relative;padding:1.2cqw 1.9cqw;border-radius:1.6cqw;line-height:1.2}
.k-bob{animation:k-float 6s ease-in-out infinite alternate}
.k-bob.f2{animation-duration:6.5s;animation-delay:-2s}
.k-bob.f3{animation-duration:7s;animation-delay:-4s}
.k-bob.f4{animation-duration:7.5s;animation-delay:-1s}
/* (--amp: hero.js takes the float down to nothing as a piece travels to
   its spot, so it lies still there) */
@keyframes k-float{from{transform:none}to{transform:translate(0,calc(var(--amp,1) * -.7cqw)) rotate(calc(var(--amp,1) * 1.2deg))}}

/* The route: the codes, a thin line with the plane on it gliding from one
   end to the other, the flight time over it; the two times under them. */
.route{width:22cqw}
.route .codes{display:flex;align-items:center;gap:1.1cqw;font-size:2.2cqw;letter-spacing:.02em}
.route .line{position:relative;flex:1;height:.12cqw;background:#3a3a3a}
.route .dur{position:absolute;left:50%;bottom:1cqw;transform:translateX(-50%);font-size:1.1cqw;color:#8a8a8a}
.route .trk{position:absolute;left:0;right:1.5cqw;top:50%;height:0;animation:glide 7s ease-in-out infinite}
.route .plane{position:absolute;left:0;top:0;width:1.5cqw;height:1.5cqw;margin-top:-.75cqw;fill:#4ade80}
@keyframes glide{0%{opacity:0;transform:none}12%,88%{opacity:1}100%{opacity:0;transform:translateX(100%)}}
.route .times{display:flex;justify-content:space-between;align-items:baseline;margin-top:1.4cqw;font-size:1.7cqw;color:#4ade80}
.route .times small{margin-left:.45cqw;font-size:1cqw;color:#8a8a8a}

/* The weather on one line, the two terminals under it. */
.wx-line{display:flex;align-items:center;gap:.7cqw}
.wx .cloud{flex:none;width:1.9cqw;height:1.9cqw;fill:#d6dbe1}
.wx b{font-size:1.9cqw;font-weight:400;color:#eaeaea}
.wx-line span{font-size:1.3cqw;color:#8a8a8a}
.tchips{display:flex;gap:.7cqw;margin-top:1.2cqw}
.tchip{display:inline-flex;align-items:center;gap:.45cqw;padding:.4cqw .85cqw;border-radius:.7cqw;background:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);font-size:1.3cqw}
.tchip .arr{width:1.25cqw;height:1.25cqw;fill:#4ade80}

/* The map: Jay's drawing (real coastlines, its colours, the thin arc, the
   ring at London, the plane, the names), in the same card. The arc draws
   itself in as the page is scrolled (hero.js sets its dash offset, the one
   thing here not moved by transform or opacity), then the plane flies it. */
.mapc{width:20cqw;aspect-ratio:17/10;padding:0;overflow:hidden;background:#0d1014;--sea:#0d1014;--land:#191c21;--coast:rgba(255,255,255,.07)}
.mapc svg{display:block;width:100%;height:100%}
.mapc .lbl{font:500 19px var(--text);fill:rgba(255,255,255,.82);letter-spacing:.01em}
.mapc .code{font:500 14px ui-monospace,SFMono-Regular,Menlo,monospace;fill:rgba(255,255,255,.38)}
.mapc .pulse{transform-origin:center;transform-box:fill-box;animation:map-pulse 3.2s ease-out infinite}
/* The plane: there once the arc is drawn, flown along it by the scroll. */
.mapc .plane{opacity:0}
@keyframes map-pulse{0%{transform:scale(.7);opacity:.5}100%{transform:scale(2.2);opacity:0}}

/* The Timeline: a few short rows, a dot each on one thin line, the time on
   the right. */
.tl{width:19cqw}
.tl-h{font-size:1.1cqw;color:#8a8a8a;margin-bottom:.5cqw}
.tl-rows{position:relative}
.tl-rows::before{content:'';position:absolute;left:.34cqw;top:1.2cqw;bottom:1.2cqw;width:.12cqw;background:#2e2e2e}
.tl-r{position:relative;display:flex;align-items:center;gap:1.1cqw;padding:.55cqw 0;font-size:1.4cqw;color:#9a9a9a}
.tl-r i{position:relative;flex:none;width:.8cqw;height:.8cqw;border-radius:50%;background:#1c1c1c;box-shadow:inset 0 0 0 .12cqw #4a4a4a}
.tl-r.done i,.tl-r .dot{background:#4ade80;box-shadow:none}
.tl-r.done,.tl-r.now{color:#eaeaea}
.tl-r span{flex:1}
.tl-r em{font-style:normal;font-size:1.3cqw;color:#8a8a8a}

/* The words, beside the two phones once the pieces have landed. */
.words{position:absolute;z-index:3;left:55%;top:24%;width:41%;opacity:0}
.wh{font-family:var(--display);font-weight:600;letter-spacing:-.05em;line-height:.98;font-size:6.4cqw;white-space:nowrap}
.it{display:flex;gap:1.5cqw;align-items:flex-start;margin-top:2.1cqw}
.mk{font-family:ui-monospace,"JetBrains Mono",Menlo,monospace;font-size:1.35cqw;line-height:1.5;color:#16a34a;border:1px solid #cfe9d8;background:#eef8f1;border-radius:.6cqw;padding:.2cqw .6cqw;flex:none;margin-top:.25cqw}
.wt{font-size:1.85cqw;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.ws{font-size:1.6cqw;color:#6a6a64;margin-top:.3cqw;line-height:1.4}

/* On a phone-width screen the words go under the phone. */
@media(max-width:700px){
  .words{left:6%;top:52%;width:88%}
  .wh{font-size:11cqw}
  .it{gap:2.6cqw;margin-top:3.4cqw}
  .mk{font-size:3cqw;border-radius:1.2cqw;padding:.4cqw 1.2cqw}
  .wt{font-size:4cqw}
  .ws{font-size:3.4cqw}
}

/* ── WHEN PLANS CHANGE ── Its own held stage: 600vh, the stage's 100vh not
   held. Drawn on a 1440 x 900 plan scaled to the stage (--dp, as Commands),
   the app's cards at 1.2 plan pixels to a point, in the app's own colours:
   the ticket #121214, the drawer #141416 and its tickets #1F1F21, green
   #4ADE80, the diverted amber #E8B54A, the cancelled ink #CB4840 and its
   red #E26D6D, and the text one ink (226, 226, 226) at four strengths.
   Codes and times in JetBrains Mono. A ticket's notches are holes cut out
   of the card itself (masks), so the page shows through them and nothing
   is drawn past its edge. Where everything ends is laid out here; plans.js
   moves it all there, so with no script, or less motion, the end is there. */
.plans{height:600vh}
.pl-stage{container-type:size;--dp:min(100cqw / 1440, 100cqh / 900);--card:#121214;--page:#f9f9f6;--green:#4ade80;--amber:#e8b54a;--hole:calc(var(--dp) * 11);
  --i1:rgb(226 226 226);--i2:rgb(226 226 226/.75);--i3:rgb(226 226 226/.6);--i4:rgb(226 226 226/.54)}
.pl-stage .g{color:var(--green)}
.pl-stage .a{color:var(--amber)}
.pl-stage code{font-family:var(--mono);font-size:.94em}
.pl-stage em{font-style:normal;font-family:var(--mono);font-size:.94em}

/* The heading, as the hero's: a black line and a grey one. */
.pl-h{position:absolute;left:0;right:0;top:calc(50% + var(--dp) * -370);text-align:center;font:600 calc(var(--dp) * 72)/.98 var(--display);letter-spacing:-.05em}
.pl-h span{display:block;color:#0b0b0b}
.pl-h span+span{color:#8a8a83}

/* The flight's card: a shell in three pieces (two rounded caps and a
   middle that plans.js stretches), so it can grow and fold without its
   corners being stretched. Its notches are cut out of the pieces: the top
   one at the line between the tile and the words; the foot's while the
   line runs to the foot (sh-b; sh-b0 has none); the four at its tear lines
   in the middle piece it has once it is whole (sh-mf, never stretched). Its
   shadow is a piece of its own, at its foot (sh-bs): a picture of the
   card's foot, its notches cut out, blurred once into the shadow and kept
   as a plain image (ticket-shadow-*.png, baked once outside the browser, so
   no filter ever runs in the browser), so the shadow goes round each notch as it would
   round a ticket punched out of paper. One of three is shown: with the
   foot notch (n), without (p, while it grows) and the whole card's (w,
   with its lower tear line's notches). A notch is a clean hole. */
.pl-l{position:absolute;left:calc(50% + var(--dp) * -490);top:calc(50% + var(--dp) * -188);width:calc(var(--dp) * 460)}
.pl-card{position:relative;height:calc(var(--dp) * 126);color:var(--i1);font-family:var(--text)}
.sh{position:absolute;left:0;right:0;background:var(--card)}
.sh-t{top:0;height:calc(var(--dp) * 16);border-radius:calc(var(--dp) * 16) calc(var(--dp) * 16) 0 0;-webkit-mask-image:radial-gradient(circle at calc(var(--dp) * 108) 0,#0000 var(--hole),#000 calc(var(--hole) + .5px));mask-image:radial-gradient(circle at calc(var(--dp) * 108) 0,#0000 var(--hole),#000 calc(var(--hole) + .5px))}
.sh-m{top:calc(var(--dp) * 15);height:calc(var(--dp) * 96);transform-origin:50% 0}
.sh-mf{top:calc(var(--dp) * 15);height:calc(var(--dp) * 454);opacity:0;
  -webkit-mask-image:radial-gradient(circle at 0 calc(var(--dp) * 265),#0000 var(--hole),#000 calc(var(--hole) + .5px)),radial-gradient(circle at 100% calc(var(--dp) * 265),#0000 var(--hole),#000 calc(var(--hole) + .5px)),radial-gradient(circle at 0 calc(var(--dp) * 409),#0000 var(--hole),#000 calc(var(--hole) + .5px)),radial-gradient(circle at 100% calc(var(--dp) * 409),#0000 var(--hole),#000 calc(var(--hole) + .5px));-webkit-mask-composite:source-in;
  mask-image:radial-gradient(circle at 0 calc(var(--dp) * 265),#0000 var(--hole),#000 calc(var(--hole) + .5px)),radial-gradient(circle at 100% calc(var(--dp) * 265),#0000 var(--hole),#000 calc(var(--hole) + .5px)),radial-gradient(circle at 0 calc(var(--dp) * 409),#0000 var(--hole),#000 calc(var(--hole) + .5px)),radial-gradient(circle at 100% calc(var(--dp) * 409),#0000 var(--hole),#000 calc(var(--hole) + .5px));mask-composite:intersect}
.sh-b{top:calc(var(--dp) * 110);height:calc(var(--dp) * 16);border-radius:0 0 calc(var(--dp) * 16) calc(var(--dp) * 16);-webkit-mask-image:radial-gradient(circle at calc(var(--dp) * 108) 100%,#0000 var(--hole),#000 calc(var(--hole) + .5px));mask-image:radial-gradient(circle at calc(var(--dp) * 108) 100%,#0000 var(--hole),#000 calc(var(--hole) + .5px))}
.sh-b.sh-b0{opacity:0;-webkit-mask-image:none;mask-image:none}
.sh-bs{position:absolute;left:calc(var(--dp) * -64);top:calc(var(--dp) * -48);width:calc(var(--dp) * 588);height:calc(var(--dp) * 256);background:url(/assets/ticket-shadow-n.png) 0 0/100% 100% no-repeat}
.sh-bs-p{background-image:url(/assets/ticket-shadow-p.png);opacity:0}
.sh-bs-w{background-image:url(/assets/ticket-shadow-w.png);opacity:0}
/* Dotted lines: the ticket's own, round dots in the tear line's grey. */
.pl-vd{position:absolute;left:calc(var(--dp) * 107);width:calc(var(--dp) * 2.4);background:radial-gradient(circle,#3a3a3e 45%,transparent 52%) 0 0/100% calc(var(--dp) * 6) repeat-y}
.pl-vd-s{top:calc(var(--dp) * 14);height:calc(var(--dp) * 98)}
.pl-vd-l{top:calc(var(--dp) * 14);height:calc(var(--dp) * 252);opacity:0}
.pl-tear{position:absolute;left:calc(var(--dp) * 24);right:calc(var(--dp) * 24);top:calc(var(--dp) * 279);height:calc(var(--dp) * 2.4);background:radial-gradient(circle,#3a3a3e 45%,transparent 52%) 0 0/calc(var(--dp) * 6) 100% repeat-x}

/* The tile at the left: what is next, on its own colour. */
.pl-tile{position:absolute;left:calc(var(--dp) * 20);top:calc(var(--dp) * 36);width:calc(var(--dp) * 74);height:calc(var(--dp) * 82);border-radius:calc(var(--dp) * 12);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--dp) * 3)}
.pl-tile b{font:600 calc(var(--dp) * 13)/1.1 var(--text);letter-spacing:.08em}
.pl-tile strong{font:500 calc(var(--dp) * 32)/1.05 var(--mono);color:var(--i1)}
.pl-tile strong.a{color:var(--amber)}
.pl-tile.g{background:#1a2f23;color:var(--green)}
.pl-tile.a{background:#392e15;color:var(--amber)}
.pl-tile.r{background:#2a1515;color:#e26d6d}
.pl-tile-air,.pl-tile-amb,.pl-tile-down{opacity:0}
.pl-tile-new{top:calc(var(--dp) * 22)}

/* The diverted tag: a filled amber pill, spaced mono capitals. */
.pl-pill{position:absolute;left:calc(var(--dp) * 122);top:calc(var(--dp) * 18);display:inline-flex;align-items:center;gap:calc(var(--dp) * 6);height:calc(var(--dp) * 26);padding:0 calc(var(--dp) * 10);
  border-radius:calc(var(--dp) * 9);background:var(--amber);color:#1c1606;font:700 calc(var(--dp) * 13.5)/1 var(--mono);letter-spacing:.08em;white-space:nowrap;opacity:0}
.pl-pill svg{width:calc(var(--dp) * 14);height:calc(var(--dp) * 14);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* The words of a ticket: the place, the status at the right, where from
   and the times, the airline and the number. */
.pl-txt{position:absolute;left:calc(var(--dp) * 122);top:0;width:calc(var(--dp) * 318);height:calc(var(--dp) * 140)}
.pl-dtxt{opacity:0}
.pl-ntxt{top:calc(var(--dp) * -32)}
.pl-t{position:absolute;left:0;top:calc(var(--dp) * 52);font:600 calc(var(--dp) * 25)/1.2 var(--text);letter-spacing:-.01em;color:var(--i1);white-space:nowrap}
.pl-t span{font-weight:400;color:var(--i3)}
.pl-s{position:absolute;right:0;top:calc(var(--dp) * 57);font:600 calc(var(--dp) * 19.5)/1.2 var(--text);white-space:nowrap}
.pl-2{position:absolute;left:0;top:calc(var(--dp) * 88);font:400 calc(var(--dp) * 19.5)/1.2 var(--text);color:var(--i3);white-space:nowrap}
.pl-3{position:absolute;left:0;top:calc(var(--dp) * 116);font:400 calc(var(--dp) * 16.5)/1.3 var(--text);color:var(--i3);white-space:nowrap}
.pl-3 s{color:var(--i3)}
.pl-newtag{display:inline-block;margin-left:calc(var(--dp) * 10);padding:calc(var(--dp) * 2) calc(var(--dp) * 8);border-radius:calc(var(--dp) * 7);background:#1a4a2c;color:var(--green);font:700 calc(var(--dp) * 13)/1.2 var(--text);letter-spacing:.06em}

/* The small drawing of its route, and the line under it. */
.pl-draw{position:absolute;left:calc(var(--dp) * 122);top:calc(var(--dp) * 146);width:calc(var(--dp) * 318);height:calc(var(--dp) * 62);overflow:visible;opacity:0}
.pl-draw .lg{fill:none;stroke:var(--i3);stroke-width:1.6;stroke-linecap:round}
.pl-draw .ld{fill:none;stroke:var(--i4);stroke-width:1.6;stroke-dasharray:3 4}
.pl-draw .la{fill:none;stroke:var(--amber);stroke-width:1.8;stroke-linecap:round}
.pl-draw .dg{fill:var(--i3)}
.pl-draw .da{fill:var(--amber)}
.pl-draw text{font:400 13px var(--mono)}
.pl-draw .tg{fill:var(--i3)}
.pl-draw .tf{fill:var(--i4)}
.pl-draw .tfs{stroke:var(--i4);stroke-width:1.2}
.pl-draw .ta{fill:var(--amber)}
.pl-note{position:absolute;left:calc(var(--dp) * 122);top:calc(var(--dp) * 214);width:calc(var(--dp) * 318);padding-left:calc(var(--dp) * 18);font:400 calc(var(--dp) * 16.5)/1.35 var(--text);color:var(--i3);opacity:0}
.pl-note i{position:absolute;left:0;top:calc(var(--dp) * 7.5);width:calc(var(--dp) * 8);height:calc(var(--dp) * 8);border-radius:50%;background:var(--amber)}

/* Under the tear line: the next flight, and the way to the drawer. */
.pl-way{position:absolute;left:0;top:0;width:100%;opacity:0}
.pl-tear2{top:calc(var(--dp) * 423)}
.pl-lbl{display:flex;align-items:center;gap:calc(var(--dp) * 8);font:700 calc(var(--dp) * 15)/1.2 var(--mono);letter-spacing:.1em;color:var(--green);white-space:nowrap}
.pl-lbl svg{width:calc(var(--dp) * 19);height:calc(var(--dp) * 19);fill:var(--green)}
.pl-big{font:600 calc(var(--dp) * 40)/1.2 var(--mono);color:var(--i1);white-space:nowrap}
.pl-big span{font-weight:400;color:var(--i3)}
.pl-sub{font:400 calc(var(--dp) * 18)/1.3 var(--text);color:var(--i3);white-space:nowrap}
.pl-way .pl-lbl,.pl-way .pl-big,.pl-way .pl-sub,.pl-more{position:absolute;left:calc(var(--dp) * 20)}
.pl-way .pl-lbl{top:calc(var(--dp) * 302)}
.pl-way .pl-big{top:calc(var(--dp) * 326)}
.pl-way .pl-sub{top:calc(var(--dp) * 380)}
.pl-more{right:calc(var(--dp) * 20);top:calc(var(--dp) * 440);display:flex;align-items:center;justify-content:space-between;font:400 calc(var(--dp) * 20)/1.3 var(--text);color:var(--i1)}
.pl-more svg{width:calc(var(--dp) * 20);height:calc(var(--dp) * 20);fill:none;stroke:var(--i3);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* The flight added, and the slim row under it, on the page. */
.pl-new{position:absolute;left:0;top:0;width:100%;height:calc(var(--dp) * 126)}
.pl-route{position:absolute;left:calc(var(--dp) * 6);top:calc(var(--dp) * 144);display:flex;align-items:center;font:400 calc(var(--dp) * 18)/1.3 var(--text);color:#6a6a64;white-space:pre}
.pl-route svg{margin-right:calc(var(--dp) * 8);width:calc(var(--dp) * 20);height:calc(var(--dp) * 20);fill:none;stroke:#16a34a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pl-route b{font-weight:600;color:#141413}
.pl-route s{font-family:var(--mono);font-size:.94em;color:#8a8a83}

/* The drawer: the app's sheet, its switch, its title, the airline's line,
   the day and the flights, each a small ticket with Add at its left. */
.pl-dr{position:absolute;left:calc(50% + var(--dp) * 30);top:calc(50% + var(--dp) * -188);width:calc(var(--dp) * 460);height:calc(var(--dp) * 720);overflow:hidden;
  border-radius:calc(var(--dp) * 28) calc(var(--dp) * 28) 0 0;background:#141416;color:var(--i1);font-family:var(--text);
  box-shadow:0 -10px 40px -16px rgba(0,0,0,.35),0 22px 40px -18px rgba(0,0,0,.55);opacity:0}
.pl-dr>*{position:absolute}
.pl-grab{left:50%;top:calc(var(--dp) * 9);width:calc(var(--dp) * 44);height:calc(var(--dp) * 5);margin-left:calc(var(--dp) * -22);border-radius:9px;background:#48484a}
.pl-seg{left:calc(var(--dp) * 105);top:calc(var(--dp) * 26);width:calc(var(--dp) * 250);height:calc(var(--dp) * 44);display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-items:center;
  border-radius:999px;background:#3a3a3c;font:500 calc(var(--dp) * 18)/1 var(--text)}
.pl-seg span{position:relative}
.pl-thumb{position:absolute !important;left:calc(var(--dp) * 4);top:calc(var(--dp) * 4);width:calc(var(--dp) * 121);height:calc(var(--dp) * 36);border-radius:999px;background:#1c1c1e;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.pl-x{right:calc(var(--dp) * 18);top:calc(var(--dp) * 26);width:calc(var(--dp) * 44);height:calc(var(--dp) * 44);border-radius:50%;background:#2c2c2e;display:grid;place-items:center}
.pl-x svg{width:calc(var(--dp) * 22);height:calc(var(--dp) * 22);fill:none;stroke:var(--green);stroke-width:2.4;stroke-linecap:round}
.pl-dt{left:calc(var(--dp) * 22);top:calc(var(--dp) * 88);font:600 calc(var(--dp) * 28)/1.2 var(--text);letter-spacing:-.01em;white-space:nowrap}
.pl-ds{left:calc(var(--dp) * 22);top:calc(var(--dp) * 126);font:400 calc(var(--dp) * 19)/1.2 var(--text);color:var(--i3);white-space:nowrap}
.pl-di{left:calc(var(--dp) * 22);right:calc(var(--dp) * 22);top:calc(var(--dp) * 162);padding-left:calc(var(--dp) * 28);font:400 calc(var(--dp) * 16.5)/1.4 var(--text);color:var(--i3)}
.pl-di svg{position:absolute;left:0;top:calc(var(--dp) * 2);width:calc(var(--dp) * 19);height:calc(var(--dp) * 19);fill:none;stroke:var(--i3);stroke-width:1.8;stroke-linecap:round}
.pl-day{left:calc(var(--dp) * 22);top:calc(var(--dp) * 228);font:600 calc(var(--dp) * 14)/1.2 var(--mono);letter-spacing:.16em;color:var(--i4)}
.pl-tk{left:calc(var(--dp) * 22);right:calc(var(--dp) * 22);height:calc(var(--dp) * 130);border-radius:calc(var(--dp) * 16);background:#1f1f21;
  -webkit-mask-image:radial-gradient(circle at calc(var(--dp) * 84) 0,#0000 calc(var(--dp) * 10),#000 calc(var(--dp) * 10 + .5px)),radial-gradient(circle at calc(var(--dp) * 84) 100%,#0000 calc(var(--dp) * 10),#000 calc(var(--dp) * 10 + .5px));
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(circle at calc(var(--dp) * 84) 0,#0000 calc(var(--dp) * 10),#000 calc(var(--dp) * 10 + .5px)),radial-gradient(circle at calc(var(--dp) * 84) 100%,#0000 calc(var(--dp) * 10),#000 calc(var(--dp) * 10 + .5px));
  mask-composite:intersect}
.pl-tk>*{position:absolute}
.pl-tk1{top:calc(var(--dp) * 256);height:calc(var(--dp) * 150);box-shadow:inset 0 0 0 calc(var(--dp) * 1.5) rgba(74,222,128,.45)}
.pl-tk2{top:calc(var(--dp) * 420)}
.pl-tk3{top:calc(var(--dp) * 564)}
/* The best flight's green outline goes round its notches too. */
.pl-ring{left:calc(var(--dp) * 84);width:calc(var(--dp) * 20);height:calc(var(--dp) * 20);margin:calc(var(--dp) * -10) 0 0 calc(var(--dp) * -10);border-radius:50%;box-shadow:0 0 0 calc(var(--dp) * 1.5) rgba(74,222,128,.45)}
.pl-ring-t{top:0}
.pl-ring-b{top:100%}
.pl-tkd{left:calc(var(--dp) * 83);top:calc(var(--dp) * 14);bottom:calc(var(--dp) * 14);width:calc(var(--dp) * 2.4);background:radial-gradient(circle,#3b3b3d 45%,transparent 52%) 0 0/100% calc(var(--dp) * 6) repeat-y}
.pl-add{left:calc(var(--dp) * 16);top:50%;width:calc(var(--dp) * 52);height:calc(var(--dp) * 52);margin-top:calc(var(--dp) * -26);border-radius:50%;background:#24362c;display:grid;place-items:center}
.pl-add svg{width:calc(var(--dp) * 24);height:calc(var(--dp) * 24);fill:none;stroke:var(--green);stroke-width:2.6;stroke-linecap:round}
.pl-tk .pl-lbl{left:calc(var(--dp) * 102);top:calc(var(--dp) * 18);font-size:calc(var(--dp) * 13.5);letter-spacing:.06em}
.pl-tk .pl-lbl svg{width:calc(var(--dp) * 17);height:calc(var(--dp) * 17)}
.pl-tk .pl-big{left:calc(var(--dp) * 102);top:calc(var(--dp) * 18);font-size:calc(var(--dp) * 34)}
.pl-tk1 .pl-big{top:calc(var(--dp) * 42)}
.pl-rt{left:calc(var(--dp) * 102);top:calc(var(--dp) * 64);font:400 calc(var(--dp) * 19)/1.3 var(--text);white-space:nowrap}
.pl-tk1 .pl-rt{top:calc(var(--dp) * 88)}
.pl-tk .pl-sub{left:calc(var(--dp) * 102);top:calc(var(--dp) * 90);font-size:calc(var(--dp) * 16.5)}
.pl-tk1 .pl-sub{top:calc(var(--dp) * 114)}

/* The trip: its line, two flights and the wait between them. The first is
   cancelled: faded under the ink stamp, its times struck. */
.pl-trip{position:absolute;left:calc(50% + var(--dp) * 30);top:calc(50% + var(--dp) * -188);width:calc(var(--dp) * 460);height:calc(var(--dp) * 330);border-radius:calc(var(--dp) * 16);
  color:var(--i1);font-family:var(--text)}
/* Its shadow, a picture of its outline with its notches, blurred once
   (ticket-shadow-trip.png); its notches are clean holes. */
.pl-tsh{position:absolute;left:calc(var(--dp) * -64);top:calc(var(--dp) * -48);width:calc(var(--dp) * 588);height:calc(var(--dp) * 460);background:url(/assets/ticket-shadow-trip.png) 0 0/100% 100% no-repeat}
.pl-tbg{position:absolute;inset:0;border-radius:inherit;background:var(--card);
  -webkit-mask-image:radial-gradient(circle at calc(var(--dp) * 108) 0,#0000 var(--hole),#000 calc(var(--hole) + .5px)),radial-gradient(circle at calc(var(--dp) * 108) 100%,#0000 var(--hole),#000 calc(var(--hole) + .5px)),radial-gradient(circle at 0 calc(var(--dp) * 170),#0000 var(--hole),#000 calc(var(--hole) + .5px)),radial-gradient(circle at 100% calc(var(--dp) * 170),#0000 var(--hole),#000 calc(var(--hole) + .5px));-webkit-mask-composite:source-in;
  mask-image:radial-gradient(circle at calc(var(--dp) * 108) 0,#0000 var(--hole),#000 calc(var(--hole) + .5px)),radial-gradient(circle at calc(var(--dp) * 108) 100%,#0000 var(--hole),#000 calc(var(--hole) + .5px)),radial-gradient(circle at 0 calc(var(--dp) * 170),#0000 var(--hole),#000 calc(var(--hole) + .5px)),radial-gradient(circle at 100% calc(var(--dp) * 170),#0000 var(--hole),#000 calc(var(--hole) + .5px));mask-composite:intersect}
.pl-vd-1{top:calc(var(--dp) * 14);height:calc(var(--dp) * 138)}
.pl-vd-2{top:calc(var(--dp) * 190);height:calc(var(--dp) * 126)}
.pl-th{position:absolute;left:calc(var(--dp) * 122);top:calc(var(--dp) * 16);font:600 calc(var(--dp) * 17)/1.2 var(--text);color:var(--i2)}
.pl-tc{position:absolute;right:calc(var(--dp) * 20);top:calc(var(--dp) * 16);font:400 calc(var(--dp) * 17)/1.2 var(--text);color:var(--i3);white-space:pre}
.pl-tc em{font:inherit;color:#e26d6d}
.pl-leg{position:absolute;left:0;width:100%;height:calc(var(--dp) * 104)}
.pl-leg1{top:calc(var(--dp) * 44)}
.pl-leg2{top:calc(var(--dp) * 192)}
.pl-leg1f{position:absolute;inset:0;opacity:.32}
.pl-leg .pl-tile{top:calc(var(--dp) * 11)}
.pl-tile-l1{opacity:0}
.pl-legw{position:absolute;left:calc(var(--dp) * 122);top:calc(var(--dp) * -40);width:calc(var(--dp) * 318);height:calc(var(--dp) * 160)}
.pl-s-l1{opacity:0}
.pl-l1a{opacity:0}
.pl-st{position:relative}
.pl-strike{position:absolute;left:-1px;right:-1px;top:54%;height:calc(var(--dp) * 1.6);background:var(--i2);transform-origin:0 50%}
.pl-l1b{color:var(--i3)}
.pl-l1b em{color:var(--i2)}
.pl-risk{position:absolute;left:0;top:calc(var(--dp) * 140);font:500 calc(var(--dp) * 17)/1.2 var(--text);color:var(--amber)}
.pl-stamp{position:absolute;left:calc(var(--dp) * 150);top:calc(var(--dp) * 26);padding:calc(var(--dp) * 3) calc(var(--dp) * 12);border:calc(var(--dp) * 3.5) solid #cb4840;border-radius:calc(var(--dp) * 8);
  color:#cb4840;font:800 calc(var(--dp) * 34)/1.05 var(--mono);letter-spacing:.12em;transform:rotate(-10deg);opacity:.92}
.pl-wait{position:absolute;left:calc(var(--dp) * 24);right:calc(var(--dp) * 24);top:calc(var(--dp) * 156);height:calc(var(--dp) * 28)}
.pl-wait span{position:absolute;inset:0;display:flex;align-items:center;gap:calc(var(--dp) * 12);font:400 calc(var(--dp) * 17)/1.2 var(--text);white-space:nowrap}
.pl-wait span::before,.pl-wait span::after{content:"";flex:1;height:calc(var(--dp) * 2.4);background:radial-gradient(circle,#3a3a3e 45%,transparent 52%) 0 0/calc(var(--dp) * 6) 100% repeat-x}
.pl-w1{color:var(--i3);opacity:0}
.pl-w2{color:var(--amber)}

/* What it shows, in words, as My Flights' are. */
.pl-words{position:absolute;left:calc(50% + var(--dp) * -490);top:calc(50% + var(--dp) * 186);width:calc(var(--dp) * 980);display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--dp) * 40)}
.pl-it{display:flex;gap:calc(var(--dp) * 14);align-items:flex-start}
.pl-mk{flex:none;margin-top:calc(var(--dp) * 2);padding:calc(var(--dp) * 2) calc(var(--dp) * 7);border:1px solid #cfe9d8;border-radius:calc(var(--dp) * 7);background:#eef8f1;color:#16a34a;font:500 calc(var(--dp) * 15)/1.5 var(--mono)}
.pl-wt{font:600 calc(var(--dp) * 20)/1.3 var(--text);letter-spacing:-.01em;color:#141413}
.pl-ws{margin-top:calc(var(--dp) * 3);font:400 calc(var(--dp) * 17)/1.4 var(--text);color:#6a6a64}
@media(scripting:none){
  .plans{height:auto}
}
@media(prefers-reduced-motion:reduce){
  .plans{height:auto}
}

/* ── COMMANDS ── Its own held stage: 500vh, the stage's 100vh not held.
   Everything is drawn on a 1440 x 900 plan, scaled to fit the stage
   (--dp: one plan pixel, the smaller of the stage's width / 1440 and its
   height / 900), so every size is laid out at its own size and the words
   stay crisp. commands.js makes the chips and moves everything. Where it
   ends, the search field and the list of commands, is laid out here, so
   with no script, or with less motion, that is simply there. */
.cmds{height:500vh}
/* The stage doesn't clip, and is drawn over the sections either side of
   it: the page scrolls on ahead of the script (the browser moves it on its
   own), so for the frame or two after the stage is let go, before
   commands.js hides the storm, the chips carry on past its moving edge
   instead of being cut off along it. */
.cm-stage{container-type:size;--dp:min(100cqw / 1440, 100cqh / 900);overflow:visible;z-index:2}
.cm-storm,.cm-float{position:absolute;inset:0;z-index:3;pointer-events:none}
/* The storm is only seen while the stage is held (commands.js hides it
   the moment the page scrolls it loose). The chips that float round the
   field are a layer of their own, and scroll away with the stage at the
   end. */

/* A chip: the hero's /commands chip, solid, at its own size: most small,
   a few large. A token in the field or the list is the same green, set in
   the line like a word: the size of the words beside it, as tall as their
   line and no taller, small corners and a slight shadow. */
.cm-chip,.cm-tok{display:inline-flex;align-items:center;white-space:nowrap;color:#fff;font-weight:500;line-height:1.2;letter-spacing:-.01em}
.cm-chip,.cm-tok::before{background:linear-gradient(180deg,#336a47,#285338)}
.cm-chip{position:absolute;left:0;top:0;visibility:hidden;padding:.3em .6em;border-radius:.42em;font-size:calc(var(--dp) * 17);
  box-shadow:0 10px 20px -10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12);transform-origin:50% 50%;will-change:transform}
/* A token's green is drawn behind its word, as tall as the line, and moved
   down (--sink, set by commands.js) so there is as much green above its
   small letters as below its baseline; the word itself stays where it is. */
.cm-tok{position:relative;isolation:isolate;padding:0 .28em}
.cm-tok::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:var(--sink,0px);bottom:calc(0px - var(--sink,0px));border-radius:.16em;
  box-shadow:0 2px 5px -2px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12)}
/* In the field the whole token is raised by the same amount, so its green
   is in the middle of the field, as iOS sets a search token. */
.cm-bar .cm-tok{top:calc(0px - var(--sink,0px))}
/* A mark as tall as a small x, set on a token's baseline while it is
   measured. */
.cm-xh{display:inline-block;width:0;height:1ex;vertical-align:baseline}
.cm-chip.z1{font-size:calc(var(--dp) * 13)}
.cm-chip.z2{font-size:calc(var(--dp) * 15)}
.cm-chip.z3{font-size:calc(var(--dp) * 17)}
.cm-chip.z4{font-size:calc(var(--dp) * 20)}
.cm-chip.z5{font-size:calc(var(--dp) * 23)}
.cm-chip.z6{font-size:calc(var(--dp) * 27)}
.cm-chip.z7{font-size:calc(var(--dp) * 32)}
.cm-chip.z8{font-size:calc(var(--dp) * 38)}
/* The five that stay and are pulled into the field. */
.cm-chip.cm-keep{z-index:2;font-size:calc(var(--dp) * 26)}

/* The heading, as the hero's: a black line and a grey one. It and the
   field sit lower until the list opens (commands.js lifts them). */
.cm-top{position:absolute;inset:0;z-index:1}
.cm-h{position:absolute;left:0;right:0;top:calc(50% + var(--dp) * -328);text-align:center;font:600 calc(var(--dp) * 92)/.98 var(--display);letter-spacing:-.05em}
.cm-h span{display:block;color:#0b0b0b}
.cm-h span+span{color:#8a8a83}

/* The search field: the app's (Search/SearchFieldBar.swift), UIKit's search
   bar in iOS's light look, at 1.5 plan pixels to a point: the magnifying
   glass, the placeholder, the typed words, the commands as tokens in the
   line, the caret in green, and the clear button once there is something
   in it. */
.cm-bar{position:absolute;left:50%;top:calc(50% + var(--dp) * -100);width:calc(var(--dp) * 760);height:calc(var(--dp) * 66);margin-left:calc(var(--dp) * -380);
  display:flex;align-items:center;gap:calc(var(--dp) * 10);padding:0 calc(var(--dp) * 18) 0 calc(var(--dp) * 22);border-radius:999px;background:rgba(118,118,128,.12);
  font:400 calc(var(--dp) * 26)/1.2 var(--text);color:#000;letter-spacing:-.01em}
.cm-glass,.cm-x{flex:none;width:calc(var(--dp) * 26);height:calc(var(--dp) * 26)}
.cm-glass{color:rgba(60,60,67,.6)}
.cm-x{color:rgba(60,60,67,.3)}
.cm-in{position:relative;flex:1;align-self:stretch}
.cm-ph,.cm-row{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;white-space:pre}
.cm-row{gap:calc(var(--dp) * 6)}
.cm-ph,.cm-demo .cm-tok{opacity:0}
.cm-ph{color:rgba(60,60,67,.6)}
.cm-text{margin-right:calc(var(--dp) * 4)}
.cm-text i{font-style:normal}
.cm-caret{width:calc(var(--dp) * 3);height:calc(var(--dp) * 34);margin-left:calc(var(--dp) * -3);border-radius:calc(var(--dp) * 1.5);background:#34c759;animation:cm-blink 1.06s steps(1) infinite}
@keyframes cm-blink{50%{opacity:0}}

/* The list of commands under it, as the app's (SearchCommandList): Apple's
   inset grouped list, a row for each, its name as the token it becomes in
   the field and its one line in grey; white on the page, as a list's rows
   are on iOS's grey. */
.cm-menu{position:absolute;z-index:1;left:50%;top:calc(50% + var(--dp) * -18);width:calc(var(--dp) * 760);margin-left:calc(var(--dp) * -380);padding:calc(var(--dp) * 6) 0;list-style:none;
  border-radius:calc(var(--dp) * 26);background:#fff;box-shadow:0 0 0 1px rgba(20,20,19,.05),0 22px 48px -28px rgba(20,20,19,.28)}
.cm-menu li{position:relative;display:flex;align-items:center;gap:calc(var(--dp) * 18);height:calc(var(--dp) * 66);padding:0 calc(var(--dp) * 30)}
.cm-menu li+li::before{content:"";position:absolute;left:calc(var(--dp) * 30);right:0;top:0;border-top:1px solid rgba(60,60,67,.13)}
.cm-menu .cm-tok{font-size:calc(var(--dp) * 22.5)}
.cm-menu span+span{font:400 calc(var(--dp) * 22.5)/1.2 var(--text);color:rgba(60,60,67,.6)}

/* For screen readers: the commands as plain words. */
.cm-list{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(scripting:none){
  .cmds{height:auto}
}
@media(prefers-reduced-motion:reduce){
  .cmds{height:auto}
  .cm-caret{animation:none}
}

/* ── SEARCH ── Its own held stage: 1600vh, the stage's 100vh not held, three
   scenes slow enough to read. On the 1440 x 900 plan (--dp, as Commands):
   the heading and the scene's one caption at the left, a phone at the right
   with the app's Search screen as Jay's screenshots of 15 October 2026 show
   it, at --pt plan pixels to a point of its 402 x 874: the map (North
   America from Natural Earth's public-domain data, in the colours of
   Apple's map: assets/search-map.svg), the airports and the places' names,
   the glass controls, and the drawer (#141416, tickets #1F1F21 with their
   notches cut out). Its words are at iOS's default text size, the app's
   own sizes. search.js moves everything; where scene 3C ends is laid out
   here, so with no script, or less motion, that is simply there. */
.srch{height:1600vh}
.sr-stage{container-type:size;--dp:min(100cqw / 1440, 100cqh / 900);--green:#4ade80;
  --i1:rgb(226 226 226);--i2:rgb(226 226 226/.75);--i3:rgb(226 226 226/.6);--i4:rgb(226 226 226/.54);
  --l2:rgb(235 235 245/.6);--l3:rgb(235 235 245/.3)}
.sr-h{position:absolute;left:calc(50% + var(--dp) * -515);top:calc(50% + var(--dp) * -300);font:600 calc(var(--dp) * 56)/.98 var(--display);letter-spacing:-.05em;white-space:nowrap}
.sr-h span{display:block;color:#0b0b0b}
.sr-h span+span{color:#8a8a83}

/* One caption for each scene, built up as a list: the one playing at full
   size, those done above it, a little smaller and dimmer, each still with
   its line; at the end all three at one readable size. search.js places and sizes each
   (transform and opacity, from heights measured on load). */
.sr-caps{position:absolute;left:calc(50% + var(--dp) * -515);top:calc(50% + var(--dp) * -132);width:calc(var(--dp) * 560);list-style:none}
.sr-cap{position:absolute;left:0;top:0;width:100%;opacity:0;transform-origin:0 0}
.sr-c2{opacity:1}
.sr-mk{display:inline-block;padding:calc(var(--dp) * 2) calc(var(--dp) * 8);border:1px solid #cfe9d8;border-radius:calc(var(--dp) * 7);background:#eef8f1;color:#16a34a;font:500 calc(var(--dp) * 15)/1.5 var(--mono)}
.sr-ct{margin-top:calc(var(--dp) * 16);font:600 calc(var(--dp) * 36)/1.08 var(--display);letter-spacing:-.035em;color:#0b0b0b}
.sr-ct code{font:500 .86em var(--mono);letter-spacing:0;color:#16a34a}
.sr-cb{margin-top:calc(var(--dp) * 12);max-width:calc(var(--dp) * 500);font:400 calc(var(--dp) * 20)/1.45 var(--text);color:#55554f}
.sr-kb{margin-top:calc(var(--dp) * 14)}
.sr-cap kbd{padding:calc(var(--dp) * 2) calc(var(--dp) * 9);border-radius:calc(var(--dp) * 7);background:#ecece6;color:#141413;font:500 calc(var(--dp) * 16)/1.5 var(--mono)}
/* How the sentence was read, a part at a time. */
.sr-read{margin-top:calc(var(--dp) * 16);list-style:none}
.sr-read li{display:flex;align-items:center;gap:calc(var(--dp) * 12);margin-top:calc(var(--dp) * 10)}
.sr-read span{font:500 calc(var(--dp) * 18)/1.3 var(--text);color:#141413}
.sr-read span::before{content:"\2192";margin-right:calc(var(--dp) * 12);color:#a3a39c}

/* The phone, as the hero's (page.css's iPhone), at its own size. */
.sr-phone{position:absolute;left:calc(50% + var(--dp) * 135);top:calc(50% + var(--dp) * -398);width:calc(var(--dp) * 380)}
.sr-phone .iphone{--w:calc(var(--dp) * 380)}
.sr-screen{--pt:calc(var(--dp) * .8797);background:#111d47;color:var(--i1);font-family:var(--text);-webkit-font-smoothing:antialiased}
.sr-screen svg{display:block}

/* The map, drawn 1.6 times its plan's size so it is never enlarged, and the
   flights' lines on the same plan: moved together. Where scene 3C leaves it:
   San Francisco 51.6 points in and 292 down, as in the screenshots. */
.sr-map,.sr-lines{position:absolute;left:0;top:0;width:calc(var(--pt) * 921.92);height:calc(var(--pt) * 999.2);transform-origin:0 0;will-change:transform;
  transform:translate(calc(var(--pt) * -68.67),calc(var(--pt) * -34.06)) scale(.625)}
.sr-map img{display:block;width:100%;height:100%}
.sr-arc{fill:none;stroke:var(--green);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.sr-arcJ{opacity:0}

/* The places' names, as Apple's map writes them over its dark map, and the
   airports: Apple's blue tile with a plane, the code under the two of a
   route. search.js puts each where the map has it. */
.sr-lbs,.sr-aps{position:absolute;inset:0;pointer-events:none}
.sr-lb,.sr-ap{position:absolute;left:0;top:0;white-space:nowrap}
.sr-lb{opacity:0;text-shadow:0 0 calc(var(--pt) * 1.5) rgba(8,16,40,.95),0 0 calc(var(--pt) * 3.5) rgba(8,16,40,.6)}
.sr-city{font:600 calc(var(--pt) * 13)/1.2 var(--text);letter-spacing:.01em;color:#fff}
.sr-city i{position:absolute;top:50%;width:calc(var(--pt) * 4.6);height:calc(var(--pt) * 4.6);margin-top:calc(var(--pt) * -2.3);border-radius:50%;border:calc(var(--pt) * 1.2) solid #f2f2f2;background:#2a2a30;box-sizing:border-box}
.sr-city[data-s="r"] i{left:calc(var(--pt) * -7.5)}
.sr-city[data-s="l"] i{right:calc(var(--pt) * -7.5)}
.sr-state{font:600 calc(var(--pt) * 9.5)/1 var(--text);letter-spacing:.06em;color:rgb(206 186 212/.85)}
.sr-land{font:700 calc(var(--pt) * 10.5)/1 var(--text);letter-spacing:.12em;color:rgb(226 200 222/.9)}
.sr-area{width:min-content;white-space:normal;text-align:center;font:600 calc(var(--pt) * 15)/1.3 var(--text);letter-spacing:.42em;color:#4a4652;
  text-shadow:0 0 calc(var(--pt) * 1) rgba(225,225,232,.95),0 0 calc(var(--pt) * 2.5) rgba(225,225,232,.55)}
.sr-sea{font:italic 600 calc(var(--pt) * 11)/1.2 var(--text);letter-spacing:.07em;color:#6f8ee6;text-shadow:none}
.sr-ridge,.sr-ridge2{font:600 calc(var(--pt) * 11)/1 var(--text);letter-spacing:.32em;color:#57525e;text-shadow:0 0 calc(var(--pt) * 1) rgba(225,225,232,.9),0 0 calc(var(--pt) * 2.5) rgba(225,225,232,.45)}
.sr-tropic{font:600 calc(var(--pt) * 10)/1 var(--text);letter-spacing:.05em;color:rgb(206 214 238/.75)}
.sr-ap{opacity:0}
.sr-ap i{position:absolute;left:calc(var(--pt) * -8.75);top:calc(var(--pt) * -8.75);width:calc(var(--pt) * 17.5);height:calc(var(--pt) * 17.5);border-radius:calc(var(--pt) * 5);
  background:#3f8ff5;box-shadow:inset 0 0 0 calc(var(--pt) * .5) rgba(255,255,255,.25),0 calc(var(--pt) * 1) calc(var(--pt) * 3) rgba(0,0,0,.3)}
.sr-ap svg{width:calc(var(--pt) * 12);height:calc(var(--pt) * 12);margin:calc(var(--pt) * 2.75);fill:#fff;transform:rotate(45deg)}
.sr-ap b{position:absolute;left:0;top:calc(var(--pt) * 11);transform:translateX(-50%);font:600 calc(var(--pt) * 11.5)/1.2 var(--text);color:#4a92ee;opacity:0;
  text-shadow:0 0 calc(var(--pt) * 1.5) rgba(8,16,40,.95),0 0 calc(var(--pt) * 3) rgba(8,16,40,.6)}

/* Liquid Glass, as iOS 26 draws it over the map: the map behind blurred and
   brightened, a soft depth under it, and a light edge, brightest where the
   light falls on it. */
.sr-glass,.sr-gb{background:rgba(70,90,120,.16);-webkit-backdrop-filter:blur(calc(var(--pt) * 7)) saturate(1.7) brightness(1.08);backdrop-filter:blur(calc(var(--pt) * 7)) saturate(1.7) brightness(1.08);
  box-shadow:inset 0 calc(var(--pt) * .6) calc(var(--pt) * 1) rgba(255,255,255,.22),0 calc(var(--pt) * 8) calc(var(--pt) * 24) rgba(0,0,0,.3)}
.sr-glass::before,.sr-gb::before,.sr-close::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:calc(var(--pt) * .9);pointer-events:none;
  background:linear-gradient(155deg,rgba(255,255,255,.62),rgba(255,255,255,.1) 28%,rgba(255,255,255,0) 50%,rgba(255,255,255,.06) 72%,rgba(255,255,255,.34));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.sr-gb{position:absolute;display:grid;place-items:center;border-radius:999px}
.sr-gb svg{fill:none;stroke-linecap:round;stroke-linejoin:round}
.sr-loc,.sr-globe{z-index:4;left:calc(var(--pt) * 341.5);width:calc(var(--pt) * 44);height:calc(var(--pt) * 44)}
.sr-loc{top:calc(var(--pt) * 67.6)}
.sr-globe{top:calc(var(--pt) * 119.5)}
.sr-loc svg,.sr-globe svg{width:calc(var(--pt) * 21);height:calc(var(--pt) * 21);stroke:var(--green);stroke-width:1.6}
/* The bar at the foot, with nothing searched: Home, the search field, and
   the X. */
.sr-tab{position:absolute;z-index:4;left:0;right:0;top:0;height:100%;pointer-events:none}
.sr-home,.sr-tx{top:calc(var(--pt) * 798);width:calc(var(--pt) * 46.6);height:calc(var(--pt) * 46.6)}
.sr-home{left:calc(var(--pt) * 28.4)}
.sr-tx{left:calc(var(--pt) * 326.2)}
.sr-home svg{width:calc(var(--pt) * 25);height:calc(var(--pt) * 25);stroke:#fff;stroke-width:2.2}
.sr-tx svg{width:calc(var(--pt) * 17);height:calc(var(--pt) * 17);stroke:#fff;stroke-width:2.2}
.sr-pill{left:calc(var(--pt) * 88.2);top:calc(var(--pt) * 798.6);width:calc(var(--pt) * 225.5);height:calc(var(--pt) * 45.4);display:flex;justify-content:flex-start;gap:calc(var(--pt) * 8);padding-left:calc(var(--pt) * 13);
  font:400 calc(var(--pt) * 17)/1 var(--text);color:rgb(235 235 245/.62);white-space:nowrap;overflow:hidden}
.sr-pill .sr-mag{width:calc(var(--pt) * 18);height:calc(var(--pt) * 18);stroke:rgb(255 255 255/.85);stroke-width:2}
.sr-tab{opacity:0}

.sr-bar{position:absolute;z-index:6;left:0;right:0;top:0;height:calc(var(--pt) * 54);display:flex;align-items:center;justify-content:space-between;padding:calc(var(--pt) * 6) calc(var(--pt) * 34) 0 calc(var(--pt) * 42);color:#fff}
.sr-bar b{display:flex;align-items:center;gap:calc(var(--pt) * 4);font:600 calc(var(--pt) * 17)/1 var(--text);letter-spacing:-.01em}
.sr-bar b svg{width:calc(var(--pt) * 12);height:calc(var(--pt) * 12);fill:#fff}
.sr-bar span{display:flex;align-items:flex-end;gap:calc(var(--pt) * 2);height:calc(var(--pt) * 12)}
.sr-bar span>i{width:calc(var(--pt) * 3.2);border-radius:1px;background:#fff}
.sr-bar span>i:nth-child(1){height:35%}
.sr-bar span>i:nth-child(2){height:55%}
.sr-bar span>i:nth-child(3){height:78%}
.sr-bar span>i:nth-child(4){height:100%;opacity:.35}
.sr-wifi{width:calc(var(--pt) * 17);height:calc(var(--pt) * 12.5);margin:0 calc(var(--pt) * 5) 0 calc(var(--pt) * 5);fill:#fff}
.sr-bar em{display:grid;place-items:center;width:calc(var(--pt) * 27);height:calc(var(--pt) * 13);border-radius:calc(var(--pt) * 4);background:#fff;color:#000;font:700 calc(var(--pt) * 10)/1 var(--text);font-style:normal}

/* The drawer: the field and its X, then what is found. Moved up and down
   whole; nothing in it is stretched. */
.sr-dr{position:absolute;z-index:5;left:calc(var(--pt) * 8);top:calc(var(--pt) * 446.7);width:calc(var(--pt) * 385.3);height:calc(var(--pt) * 417.3);overflow:hidden;
  border-radius:calc(var(--pt) * 38);background:#141416;box-shadow:inset 0 calc(var(--pt) * .6) 0 rgba(255,255,255,.07),0 calc(var(--pt) * -4) calc(var(--pt) * 24) rgba(0,0,0,.35)}
.sr-dr>*{position:absolute}
.sr-grab{left:calc(var(--pt) * 164.7);top:calc(var(--pt) * 4.8);width:calc(var(--pt) * 56.6);height:calc(var(--pt) * 5);border-radius:9px;background:#5a595d}
.sr-field{left:calc(var(--pt) * 14);top:calc(var(--pt) * 17.5);width:calc(var(--pt) * 304);height:calc(var(--pt) * 37);border-radius:999px;background:#323234;
  box-shadow:inset 0 0 0 calc(var(--pt) * .5) rgba(255,255,255,.06),inset 0 calc(var(--pt) * .7) 0 rgba(255,255,255,.08)}
.sr-field>*{position:absolute}
.sr-field .sr-mag{left:calc(var(--pt) * 12.5);top:calc(var(--pt) * 9.5);width:calc(var(--pt) * 18);height:calc(var(--pt) * 18);fill:none;stroke:#fff;stroke-width:2.1;stroke-linecap:round}
.sr-in{left:calc(var(--pt) * 38.3);top:0;width:calc(var(--pt) * 228);height:100%;overflow:hidden}
.sr-ph,.sr-t{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;white-space:pre;font:400 calc(var(--pt) * 17)/1.2 var(--text);letter-spacing:-.02em;isolation:isolate}
.sr-ph{color:rgb(235 235 245/.6);opacity:0}
.sr-t{color:#fff}
.sr-t i{font-style:normal}
.sr-t1,.sr-t3{opacity:0}
.sr-cmd{display:flex}
.sr-hl{position:absolute;z-index:-1;top:50%;height:calc(var(--pt) * 24);margin-top:calc(var(--pt) * -12);border-radius:calc(var(--pt) * 5);background:rgba(74,222,128,.26);opacity:0}
/* A command made a token: iOS's own, the field's height less a little, set
   before the words. */
.sr-tok{position:absolute;left:0;top:50%;height:calc(var(--pt) * 25);margin-top:calc(var(--pt) * -12.5);padding:0 calc(var(--pt) * 4.3);border-radius:calc(var(--pt) * 4);background:#44664e;
  font:500 calc(var(--pt) * 17)/calc(var(--pt) * 25) var(--text);letter-spacing:-.02em;color:#fff;opacity:0}
.sr-caret{position:absolute;left:0;top:50%;width:calc(var(--pt) * 2);height:calc(var(--pt) * 21);margin-top:calc(var(--pt) * -10.5);opacity:0}
.sr-caret::before{content:"";position:absolute;inset:0;border-radius:1px;background:var(--green);animation:cm-blink 1.06s steps(1) infinite}
.sr-fade,.sr-fadeL{position:absolute;right:0;top:0;bottom:0;width:calc(var(--pt) * 26);background:linear-gradient(90deg,rgba(50,50,52,0),#323234)}
/* While a long line is typed and moved along, its start fades out at the
   field's edge rather than being cut. */
.sr-fadeL{left:0;right:auto;width:calc(var(--pt) * 12);background:linear-gradient(270deg,rgba(50,50,52,0),#323234);opacity:0}
.sr-clr{left:calc(var(--pt) * 271.6);top:calc(var(--pt) * 9.75);width:calc(var(--pt) * 17.5);height:calc(var(--pt) * 17.5)}
.sr-clr svg{width:100%;height:100%}
.sr-clr circle{fill:#f2f2f7}
.sr-clr path{stroke:#323234;stroke-width:1.8;stroke-linecap:round}
.sr-close{left:calc(var(--pt) * 329.5);top:calc(var(--pt) * 16);width:calc(var(--pt) * 40);height:calc(var(--pt) * 40);border-radius:50%;background:#323234;display:grid;place-items:center}
.sr-close svg{width:calc(var(--pt) * 17);height:calc(var(--pt) * 17);fill:none;stroke:var(--green);stroke-width:2.5;stroke-linecap:round}

/* What the phone finds as it is typed: a heading, and Apple's grouped
   rows on a card of their own. */
.sr-pane{left:calc(var(--pt) * 16);right:calc(var(--pt) * 16);top:calc(var(--pt) * 56);opacity:0}
.sr-pane h3,.sr-hd{font:600 calc(var(--pt) * 12)/1 var(--text);letter-spacing:calc(var(--pt) * .8);text-transform:uppercase;color:var(--i3)}
.sr-pane h3{margin:calc(var(--pt) * 18) 0 calc(var(--pt) * 10) calc(var(--pt) * 2)}
.sr-card,.sr-group{border-radius:calc(var(--pt) * 26);background:#1c1c1e}
.sr-card{display:flex;align-items:center;gap:calc(var(--pt) * 12);padding:calc(var(--pt) * 9) calc(var(--pt) * 16)}
.sr-group .sr-card{background:none}
.sr-group .sr-card+.sr-card{box-shadow:inset 0 calc(var(--pt) * .5) 0 rgba(84,84,88,.6)}
.sr-group{padding:calc(var(--pt) * 2) 0}
.sr-tile{flex:none;display:grid;place-items:center;width:calc(var(--pt) * 32);height:calc(var(--pt) * 32);border-radius:calc(var(--pt) * 8);background:rgba(118,118,128,.24)}
.sr-tile svg{width:calc(var(--pt) * 17);height:calc(var(--pt) * 17);fill:none;stroke:rgb(235 235 245/.6);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sr-ttl{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(var(--pt) * 2)}
.sr-ttl b,.sr-ttl small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-ttl b{font:400 calc(var(--pt) * 17)/1.25 var(--text);letter-spacing:-.02em;color:#fff}
.sr-ttl small{font:400 calc(var(--pt) * 13)/1.3 var(--text);color:var(--l2)}
.sr-go{flex:none;width:calc(var(--pt) * 8);height:calc(var(--pt) * 13);fill:none;stroke:var(--l3);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sr-apr{padding:calc(var(--pt) * 11) calc(var(--pt) * 16)}
.sr-apr code{flex:none;min-width:calc(var(--pt) * 44);font:700 calc(var(--pt) * 15)/1 var(--mono);color:var(--green)}
/* The commands, while one is typed (SearchCommandList). */
.sr-pCmd .sr-group{margin-top:calc(var(--pt) * 12)}
.sr-cm{display:flex;align-items:center;gap:calc(var(--pt) * 12);padding:calc(var(--pt) * 10) calc(var(--pt) * 16)}
.sr-cm+.sr-cm{box-shadow:inset 0 calc(var(--pt) * .5) 0 rgba(84,84,88,.6)}
.sr-chip{flex:none;height:calc(var(--pt) * 25);padding:0 calc(var(--pt) * 4.3);border-radius:calc(var(--pt) * 4);background:#44664e;font:500 calc(var(--pt) * 17)/calc(var(--pt) * 25) var(--text);letter-spacing:-.02em;color:#fff}
.sr-cm span+span{font:400 calc(var(--pt) * 13)/1.3 var(--text);color:var(--l2)}
/* The flights while they are asked for. */
.sr-pLoad{top:calc(var(--pt) * 163);opacity:0}
.sr-pLoad i{display:block;height:calc(var(--pt) * 92);margin-bottom:calc(var(--pt) * 10);border-radius:calc(var(--pt) * 18);background:rgba(31,31,33,.6)}

/* A route's flights: the line with the route, the day and the filters; the
   list's heading with its order; then the tickets. */
.sr-res{inset:0}
.sr-res>*{position:absolute;opacity:0}
/* Several routes (3C, 3D): the drawer's list scrolls in its own window
   under the field: the app's line of what was understood (each part a
   control, cut short where SwiftUI cuts it at this width; search.js puts
   each part where SwiftUI does), then each route under its own heading. */
.sr-two>.sr-win{left:0;right:0;top:calc(var(--pt) * 56);bottom:0;overflow:hidden;opacity:1}
.sr-scroll{position:absolute;left:0;right:0;top:0}
.sr-scroll>*{position:absolute;opacity:0}
.sr-r3 .sr-scroll>*{opacity:1}
.sr-und{left:calc(var(--pt) * 16);top:calc(var(--pt) * 15.8);width:calc(var(--pt) * 354);height:calc(var(--pt) * 30);font:400 calc(var(--pt) * 15)/calc(var(--pt) * 30) var(--text);letter-spacing:-.016em}
.sr-und span{position:absolute;top:0;height:100%;white-space:nowrap;overflow:hidden}
.sr-up{font-weight:600;color:var(--i1);text-overflow:ellipsis;text-decoration:underline dotted var(--i3);text-underline-offset:calc(var(--pt) * 3)}
.sr-upc{text-overflow:clip}
.sr-um{color:var(--i3)}
.sr-rh{left:calc(var(--pt) * 15.6);right:calc(var(--pt) * 15.3);font:600 calc(var(--pt) * 12)/calc(var(--pt) * 15) var(--text);letter-spacing:calc(var(--pt) * .8);text-transform:uppercase;color:var(--i3)}
.sr-rh1{top:calc(var(--pt) * 65.8)}
.sr-rh2{top:calc(var(--pt) * 512)}
.sr-two .sr-tks1{top:calc(var(--pt) * 94)}
.sr-two .sr-tks2{top:calc(var(--pt) * 540)}
.sr-pLoad.sr-pLoad2{top:calc(var(--pt) * 150)}
.sr-ln{left:calc(var(--pt) * 16);right:calc(var(--pt) * 15.3);top:calc(var(--pt) * 71.8);height:calc(var(--pt) * 36);display:flex;gap:calc(var(--pt) * 8)}
.sr-cp{display:flex;align-items:center;gap:calc(var(--pt) * 5);height:100%;padding:0 calc(var(--pt) * 14);border-radius:999px;background:rgba(255,255,255,.08);color:var(--i2);
  font:600 calc(var(--pt) * 15)/1 var(--text);letter-spacing:-.01em;white-space:nowrap}
.sr-rt{font:600 calc(var(--pt) * 15)/1 var(--mono);letter-spacing:0}
.sr-rt i{font-style:normal;color:var(--i3)}
.sr-dy{margin-left:auto}
.sr-cp svg{width:calc(var(--pt) * 14);height:calc(var(--pt) * 14);fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sr-cp .sr-chev{width:calc(var(--pt) * 10);height:calc(var(--pt) * 10);stroke-width:1.8}
.sr-fl b{font:600 calc(var(--pt) * 15)/1 var(--text)}
.sr-on{background:rgba(74,222,128,.16);color:var(--green)}
.sr-hd{left:calc(var(--pt) * 15.6);right:calc(var(--pt) * 15.3);top:calc(var(--pt) * 109.7);height:calc(var(--pt) * 44);display:flex;align-items:center;justify-content:space-between}
.sr-hd span{display:flex;align-items:center;gap:calc(var(--pt) * 4)}
.sr-hd svg{width:calc(var(--pt) * 8.5);height:calc(var(--pt) * 8.5);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr-tks{left:calc(var(--pt) * 16);right:calc(var(--pt) * 15.3);top:calc(var(--pt) * 163)}
/* A ticket: its stub with Add and the dotted tear line, the notches cut
   out of both edges where the tear line meets them. */
.sr-tk{position:relative;height:calc(var(--pt) * 92);margin-bottom:calc(var(--pt) * 10);border-radius:calc(var(--pt) * 18);background:#1f1f21;
  -webkit-mask-image:radial-gradient(circle at calc(var(--pt) * 76) 0,#0000 calc(var(--pt) * 10),#000 calc(var(--pt) * 10 + .5px)),radial-gradient(circle at calc(var(--pt) * 76) 100%,#0000 calc(var(--pt) * 10),#000 calc(var(--pt) * 10 + .5px));
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(circle at calc(var(--pt) * 76) 0,#0000 calc(var(--pt) * 10),#000 calc(var(--pt) * 10 + .5px)),radial-gradient(circle at calc(var(--pt) * 76) 100%,#0000 calc(var(--pt) * 10),#000 calc(var(--pt) * 10 + .5px));
  mask-composite:intersect}
.sr-tk>*{position:absolute}
.sr-dots{left:calc(var(--pt) * 75);top:calc(var(--pt) * 12);bottom:calc(var(--pt) * 12);width:calc(var(--pt) * 2);background:radial-gradient(circle,#3b3b3d 45%,transparent 52%) 0 0/100% calc(var(--pt) * 6) repeat-y}
.sr-add{left:calc(var(--pt) * 21);top:calc(var(--pt) * 29);width:calc(var(--pt) * 34);height:calc(var(--pt) * 34);border-radius:50%;background:rgba(74,222,128,.12);display:grid;place-items:center}
.sr-add svg{width:calc(var(--pt) * 15);height:calc(var(--pt) * 15);fill:none;stroke:var(--green);stroke-width:2.4;stroke-linecap:round}
.sr-l1,.sr-l2,.sr-l3{left:calc(var(--pt) * 88);right:calc(var(--pt) * 14);white-space:nowrap}
.sr-l1{top:calc(var(--pt) * 14);font:700 calc(var(--pt) * 17)/calc(var(--pt) * 22) var(--mono);color:var(--i1);isolation:isolate}
.sr-l1 i{font-style:normal;color:var(--i3)}
.sr-l1 .sr-p1{color:var(--i2)}
.sr-l1 span{position:relative}
.sr-fast{right:calc(var(--pt) * 14);top:calc(var(--pt) * 17.5);padding:calc(var(--pt) * 2.2) calc(var(--pt) * 7);border-radius:999px;background:rgba(74,222,128,.16);color:var(--green);font:600 calc(var(--pt) * 11)/calc(var(--pt) * 13) var(--text)}
.sr-l2{top:calc(var(--pt) * 41);display:flex;font:400 calc(var(--pt) * 13)/calc(var(--pt) * 16) var(--text);color:var(--i2)}
.sr-fx{flex:none;white-space:pre}
.sr-al{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sr-l2 code{font:700 calc(var(--pt) * 13)/1 var(--mono);color:var(--green)}
.sr-l2 i{font-style:normal;color:var(--i3)}
.sr-l2 b{font:400 calc(var(--pt) * 13)/1 var(--mono);color:var(--i1)}
.sr-l2 em{font:400 calc(var(--pt) * 13)/1 var(--mono);font-style:normal;color:var(--i2)}
.sr-l3{top:calc(var(--pt) * 62);font:400 calc(var(--pt) * 13)/calc(var(--pt) * 16) var(--text);color:var(--i3)}
/* With /land, each landing time is marked as the list comes in. */
.sr-ahl{position:absolute;z-index:-1;top:calc(var(--pt) * -1);height:calc(var(--pt) * 24);border-radius:calc(var(--pt) * 5);background:rgba(74,222,128,.24);opacity:0}

@media(scripting:none){
  .srch{height:auto}
  .sr-lbs,.sr-aps{display:none}
}
@media(prefers-reduced-motion:reduce){
  .srch{height:auto}
  .sr-caret{animation:none}
}

/* ── YOUR CALENDAR, YOUR FLIGHTS ── Its own held stage: 650vh, the stage's
   100vh not held. On the 1440 x 900 plan (--dp, as Search): the heading and
   the captions' list at the left; at the right a month of a calendar, its
   everyday events blurred (their words drawn as a soft shadow, nothing to
   read), the three flights lifting out of it, then an inbox, blurred the
   same way but for one booking, forwarded to Terminal; and a phone with My
   Flights as the app draws it, at --ppt plan pixels to a point. privacy.js
   moves everything; where it ends is laid out here. */
.priv{height:650vh}
.pv-stage{container-type:size;--dp:min(100cqw / 1440, 100cqh / 900);--ppt:calc(var(--dp) * .6945);--green:#4ade80}
.pv-h{position:absolute;left:calc(50% + var(--dp) * -515);top:calc(50% + var(--dp) * -300);font:600 calc(var(--dp) * 56)/.98 var(--display);letter-spacing:-.05em;white-space:nowrap}
.pv-h span{display:block;color:#0b0b0b}
.pv-h span+span{color:#8a8a83}
/* The captions, as Search's: a list, the one playing at full size. */
.pv-caps{position:absolute;left:calc(50% + var(--dp) * -515);top:calc(50% + var(--dp) * -150);width:calc(var(--dp) * 520);list-style:none}
.pv-cap{position:absolute;left:0;top:0;width:100%;opacity:0;transform-origin:0 0}
.pv-c4{opacity:1}
.pv-mk{display:inline-block;padding:calc(var(--dp) * 2) calc(var(--dp) * 8);border:1px solid #cfe9d8;border-radius:calc(var(--dp) * 7);background:#eef8f1;color:#16a34a;font:500 calc(var(--dp) * 15)/1.5 var(--mono)}
.pv-ct{margin-top:calc(var(--dp) * 16);font:600 calc(var(--dp) * 36)/1.08 var(--display);letter-spacing:-.035em;color:#0b0b0b}
.pv-cb{margin-top:calc(var(--dp) * 12);max-width:calc(var(--dp) * 500);font:400 calc(var(--dp) * 20)/1.45 var(--text);color:#55554f}

/* The month: white, as a calendar on the page; a day's events as small
   coloured bars, their words a blur. */
.pv-cal{position:absolute;left:calc(50% + var(--dp) * 50);top:calc(50% + var(--dp) * -250);width:calc(var(--dp) * 600);height:calc(var(--dp) * 500);border-radius:calc(var(--dp) * 22);
  background:#fff;box-shadow:0 0 0 1px rgba(20,20,19,.05),0 30px 60px -30px rgba(20,20,19,.28);transform-origin:0 50%;opacity:0}
.pv-mo{position:absolute;left:calc(var(--dp) * 28);top:calc(var(--dp) * 24);font:600 calc(var(--dp) * 24)/1 var(--display);letter-spacing:-.02em;color:#0b0b0b}
.pv-mo span{color:#8a8a83}
.pv-wk,.pv-grid{position:absolute;left:calc(var(--dp) * 20);right:calc(var(--dp) * 20);display:grid;grid-template-columns:repeat(7,1fr)}
.pv-wk{top:calc(var(--dp) * 66)}
.pv-wk span{padding-left:calc(var(--dp) * 5);font:600 calc(var(--dp) * 10.5)/1 var(--text);letter-spacing:.06em;text-transform:uppercase;color:#8a8a83}
.pv-grid{top:calc(var(--dp) * 86);bottom:calc(var(--dp) * 14);grid-template-rows:repeat(5,1fr)}
.pv-day{position:relative;min-width:0;overflow:hidden;padding:calc(var(--dp) * 5) calc(var(--dp) * 4) 0;border-top:1px solid #efefe9}
.pv-day b{display:inline-grid;place-items:center;min-width:calc(var(--dp) * 20);height:calc(var(--dp) * 20);font:600 calc(var(--dp) * 12)/1 var(--text);color:#3a3a36}
.pv-past b{color:#a3a39b}
.pv-out b{color:#d0d0c8}
.pv-today b{border-radius:50%;background:#0b0b0b;color:#fff}
.pv-ev{display:block;height:calc(var(--dp) * 16);margin-top:calc(var(--dp) * 3);padding:0 calc(var(--dp) * 5);border-left:calc(var(--dp) * 2.5) solid;border-radius:calc(var(--dp) * 4);
  font:500 calc(var(--dp) * 10)/calc(var(--dp) * 16) var(--text);white-space:nowrap;overflow:hidden}
.pv-ev i{font-style:normal;color:transparent;text-shadow:0 0 calc(var(--dp) * 4) rgba(40,40,60,.5)}
.pv-past .pv-ev{opacity:.6}
.pv-out .pv-ev{opacity:.35}
.pv-c-b{background:#e8eefc;border-color:#5b8def}
.pv-c-g{background:#e5f4ea;border-color:#34a853}
.pv-c-o{background:#fdf0e1;border-color:#f29b38}
.pv-c-p{background:#f1e9fb;border-color:#9b6bdf}
.pv-c-t{background:#e2f4f4;border-color:#2aa7a7}
.pv-c-r{background:#fde8e8;border-color:#e35d5d}
/* The light that passes over the month, finding the flights. */
.pv-scan{position:absolute;left:0;right:0;top:calc(var(--dp) * 40);height:calc(var(--dp) * 90);background:linear-gradient(180deg,rgba(74,222,128,0),rgba(74,222,128,.16),rgba(74,222,128,0));opacity:0}
/* A flight, found: its event lit, sharp, a green ring; it lifts out of
   the month. (privacy.js puts it on its event.) */
.pv-lift{position:absolute;left:0;top:0;z-index:4;display:flex;align-items:center;padding:0 calc(var(--dp) * 5);border-left:calc(var(--dp) * 2.5) solid #16a34a;border-radius:calc(var(--dp) * 4);
  background:#eafbf0;box-shadow:0 0 0 calc(var(--dp) * 1.5) rgba(74,222,128,.9),0 calc(var(--dp) * 10) calc(var(--dp) * 20) calc(var(--dp) * -8) rgba(22,101,52,.45);
  font:600 calc(var(--dp) * 10)/1 var(--text);color:#0b5d2a;white-space:nowrap;opacity:0;transform-origin:50% 50%}
.pv-lift i{font-style:normal}

/* The inbox, where the month was: white, as the month; each mail its
   sender, when, its subject and its first words, blurred as the month's
   events are. Only the booking is sharp; lit (pv-mlit) as it is picked. */
.pv-mail{position:absolute;left:calc(50% + var(--dp) * 40);top:calc(50% + var(--dp) * -215);width:calc(var(--dp) * 290);height:calc(var(--dp) * 440);overflow:hidden;border-radius:calc(var(--dp) * 22);
  background:#fff;box-shadow:0 0 0 1px rgba(20,20,19,.05),0 30px 60px -30px rgba(20,20,19,.28);opacity:0}
.pv-mt{position:absolute;left:calc(var(--dp) * 20);top:calc(var(--dp) * 22);font:600 calc(var(--dp) * 24)/1 var(--display);letter-spacing:-.02em;color:#0b0b0b}
.pv-ml{position:absolute;left:0;right:0;top:calc(var(--dp) * 62);list-style:none}
.pv-mr{position:relative;display:grid;grid-template-columns:1fr auto;column-gap:calc(var(--dp) * 8);padding:calc(var(--dp) * 9) calc(var(--dp) * 18) calc(var(--dp) * 10) calc(var(--dp) * 20);border-top:1px solid #efefe9}
.pv-mr b{font:600 calc(var(--dp) * 12.5)/1.35 var(--text);color:#141413;white-space:nowrap;overflow:hidden}
.pv-mr em{font:400 calc(var(--dp) * 10.5)/1.6 var(--text);font-style:normal;color:#8a8a83;white-space:nowrap}
.pv-mr span{grid-column:1/3;font:500 calc(var(--dp) * 11.5)/1.4 var(--text);color:#2a2a27;white-space:nowrap;overflow:hidden}
.pv-mr small{grid-column:1/3;font:400 calc(var(--dp) * 11)/1.4 var(--text);color:#8a8a83;white-space:nowrap;overflow:hidden}
.pv-mr i{font-style:normal;color:transparent;text-shadow:0 0 calc(var(--dp) * 4) rgba(40,40,60,.5)}
.pv-mlit{position:absolute;inset:calc(var(--dp) * 2) calc(var(--dp) * 6);border-radius:calc(var(--dp) * 10);background:rgba(74,222,128,.12);box-shadow:inset 0 0 0 calc(var(--dp) * 1.5) rgba(74,222,128,.9);opacity:0}
/* The booking, forwarded: a mail being written, as Mail's, To Terminal,
   what it says under it. privacy.js opens it from the booking's row. */
.pv-fwd{position:absolute;z-index:5;left:calc(50% + var(--dp) * 45);top:calc(50% + var(--dp) * -118);width:calc(var(--dp) * 280);border-radius:calc(var(--dp) * 18);background:#fff;
  box-shadow:0 0 0 1px rgba(20,20,19,.06),0 calc(var(--dp) * 24) calc(var(--dp) * 48) calc(var(--dp) * -16) rgba(20,20,19,.38);font-family:var(--text);color:#141413;opacity:0;transform-origin:50% 50%}
.pv-fh{display:flex;align-items:center;justify-content:space-between;height:calc(var(--dp) * 44);padding:0 calc(var(--dp) * 12) 0 calc(var(--dp) * 16);border-bottom:1px solid #efefe9}
.pv-fh span{font:400 calc(var(--dp) * 12)/1 var(--text);color:#8a8a83}
.pv-fh b{font:600 calc(var(--dp) * 12)/1 var(--text)}
.pv-send{display:grid;place-items:center;width:calc(var(--dp) * 26);height:calc(var(--dp) * 26);border-radius:50%;background:#16a34a}
.pv-send svg{width:calc(var(--dp) * 16);height:calc(var(--dp) * 16);fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pv-fl{display:flex;align-items:center;gap:calc(var(--dp) * 6);height:calc(var(--dp) * 32);padding:0 calc(var(--dp) * 16);border-bottom:1px solid #efefe9;font:400 calc(var(--dp) * 11.5)/1 var(--text);color:#8a8a83;white-space:nowrap;overflow:hidden}
.pv-fl span{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#141413}
.pv-fl .pv-tok{padding:calc(var(--dp) * 4) calc(var(--dp) * 9);border-radius:999px;background:#e3f6ea;color:#11833a;font-weight:600}
.pv-fb{padding:calc(var(--dp) * 12) calc(var(--dp) * 16) calc(var(--dp) * 16)}
.pv-fq{font:400 calc(var(--dp) * 10.5)/1.3 var(--text);color:#8a8a83}
.pv-fbk{margin-top:calc(var(--dp) * 8);padding:calc(var(--dp) * 10) calc(var(--dp) * 12);border-radius:calc(var(--dp) * 10);background:#f4f4f1;display:flex;flex-direction:column;gap:calc(var(--dp) * 3)}
.pv-fbk b{font:600 calc(var(--dp) * 17)/1.2 var(--mono);color:#141413}
.pv-fbk span{font:500 calc(var(--dp) * 12)/1.3 var(--text);color:#2a2a27}
.pv-fbk small{font:400 calc(var(--dp) * 10.5)/1.3 var(--text);color:#8a8a83}

/* My Flights, as the app draws it: the page's near-black, its title, how
   many, a heading for each day, and each flight's card: the countdown tile,
   where to, from where and when, the airline and the number. No tab bar. */
.pv-phone{position:absolute;left:calc(50% + var(--dp) * 350);top:calc(50% + var(--dp) * -326);width:calc(var(--dp) * 300)}
.pv-phone .iphone{--w:calc(var(--dp) * 300)}
.pv-screen{background:#050505;color:#e2e2e2;font-family:var(--text)}
.pv-screen>*{position:absolute}
.pv-bar{left:0;right:0;top:0;height:calc(var(--ppt) * 54);display:flex;align-items:center;justify-content:space-between;padding:calc(var(--ppt) * 6) calc(var(--ppt) * 34) 0 calc(var(--ppt) * 42);color:#fff}
.pv-bar b{font:600 calc(var(--ppt) * 17)/1 var(--text)}
.pv-bar span{display:flex;align-items:flex-end;gap:calc(var(--ppt) * 2);height:calc(var(--ppt) * 12)}
.pv-bar span>i{width:calc(var(--ppt) * 3.2);border-radius:1px;background:#fff}
.pv-bar span>i:nth-child(1){height:35%}
.pv-bar span>i:nth-child(2){height:55%}
.pv-bar span>i:nth-child(3){height:78%}
.pv-bar span>i:nth-child(4){height:100%}
.pv-bar em{display:grid;place-items:center;width:calc(var(--ppt) * 27);height:calc(var(--ppt) * 13);margin-left:calc(var(--ppt) * 6);border-radius:calc(var(--ppt) * 4);background:#fff;color:#000;font:700 calc(var(--ppt) * 10)/1 var(--text);font-style:normal}
.pv-title{left:calc(var(--ppt) * 16);top:calc(var(--ppt) * 66);font:700 calc(var(--ppt) * 34)/1.1 var(--display);letter-spacing:-.01em;color:#fff}
.pv-plus{right:calc(var(--ppt) * 16);top:calc(var(--ppt) * 62);width:calc(var(--ppt) * 44);height:calc(var(--ppt) * 44);border-radius:50%;background:#2c2c2e;display:grid;place-items:center}
.pv-plus svg{width:calc(var(--ppt) * 20);height:calc(var(--ppt) * 20);fill:none;stroke:var(--green);stroke-width:2.4;stroke-linecap:round}
.pv-count{left:calc(var(--ppt) * 16);top:calc(var(--ppt) * 112);height:calc(var(--ppt) * 22);font:400 calc(var(--ppt) * 17)/1.3 var(--text);color:#8e8e93}
.pv-count span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0}
.pv-count .pv-n4{opacity:1}
.pv-dh{left:calc(var(--ppt) * 16);font:600 calc(var(--ppt) * 17)/1.2 var(--text);color:#9a9a9e}
.pv-dh0{top:calc(var(--ppt) * 152)}
.pv-dh1{top:calc(var(--ppt) * 320)}
.pv-dh2{top:calc(var(--ppt) * 488)}
.pv-dh3{top:calc(var(--ppt) * 656)}
.pv-slot{left:calc(var(--ppt) * 8);width:calc(var(--ppt) * 386);height:calc(var(--ppt) * 120)}
.pv-slot0{top:calc(var(--ppt) * 182)}
.pv-slot1{top:calc(var(--ppt) * 350)}
.pv-slot2{top:calc(var(--ppt) * 518)}
.pv-slot3{top:calc(var(--ppt) * 686)}
/* A flight's card, cut where its tear line meets the edges. */
.pv-card{position:relative;width:calc(var(--ppt) * 386);height:calc(var(--ppt) * 120);border-radius:calc(var(--ppt) * 24);background:#141414;color:#e2e2e2;font-family:var(--text);
  -webkit-mask-image:radial-gradient(circle at calc(var(--ppt) * 98) 0,#0000 calc(var(--ppt) * 10),#000 calc(var(--ppt) * 10 + .5px)),radial-gradient(circle at calc(var(--ppt) * 98) 100%,#0000 calc(var(--ppt) * 10),#000 calc(var(--ppt) * 10 + .5px));
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(circle at calc(var(--ppt) * 98) 0,#0000 calc(var(--ppt) * 10),#000 calc(var(--ppt) * 10 + .5px)),radial-gradient(circle at calc(var(--ppt) * 98) 100%,#0000 calc(var(--ppt) * 10),#000 calc(var(--ppt) * 10 + .5px));
  mask-composite:intersect}
.pv-card>*{position:absolute}
.pv-tile{left:calc(var(--ppt) * 16);top:calc(var(--ppt) * 20);width:calc(var(--ppt) * 70);height:calc(var(--ppt) * 80);border-radius:calc(var(--ppt) * 14);background:#1d3324;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--ppt) * 2);font-style:normal}
.pv-tile small{font:600 calc(var(--ppt) * 11)/1 var(--text);letter-spacing:.08em;color:var(--green)}
.pv-tile b{font:700 calc(var(--ppt) * 26)/1.05 var(--mono);color:#ececec}
.pv-dots{left:calc(var(--ppt) * 97);top:calc(var(--ppt) * 12);bottom:calc(var(--ppt) * 12);width:calc(var(--ppt) * 2);background:radial-gradient(circle,#3a3a3e 45%,transparent 52%) 0 0/100% calc(var(--ppt) * 6) repeat-y}
.pv-to{left:calc(var(--ppt) * 112);top:calc(var(--ppt) * 16);font:600 calc(var(--ppt) * 22)/1.2 var(--text);letter-spacing:-.01em;color:#f2f2f2;white-space:nowrap}
.pv-to span{font-weight:400;color:#8e8e93}
.pv-st{right:calc(var(--ppt) * 16);top:calc(var(--ppt) * 21);font:600 calc(var(--ppt) * 15)/1.2 var(--text);color:#8e8e93}
.pv-fr{left:calc(var(--ppt) * 112);top:calc(var(--ppt) * 53);font:400 calc(var(--ppt) * 16)/1.3 var(--text);color:#8e8e93;white-space:nowrap}
.pv-fr em{font:500 calc(var(--ppt) * 16)/1.3 var(--mono);font-style:normal;color:var(--green)}
.pv-al{left:calc(var(--ppt) * 112);top:calc(var(--ppt) * 84);font:400 calc(var(--ppt) * 13)/1.3 var(--text);letter-spacing:.02em;color:#7c7c80;white-space:nowrap}
/* The card as it flies from the month to its place: privacy.js puts it on
   its place, and moves it there from where its event lifted out. */
.pv-fly{position:absolute;left:0;top:0;z-index:5;opacity:0;transform-origin:50% 50%}
.pv-fly::before{content:"";position:absolute;left:calc(var(--ppt) * -45);top:calc(var(--ppt) * -30);width:calc(var(--ppt) * 476);height:calc(var(--ppt) * 205);background:url(/assets/ticket-shadow-mf.png) 0 0/100% 100% no-repeat}

/* ── GET TERMINAL ── Its own held stage: 300vh, the stage's 100vh not held.
   The app's icon, the heading in the hero's style and the App Store button,
   in the middle; closing.js brings each in. */
.close{height:300vh}
.cl-stage{container-type:size;--dp:min(100cqw / 1440, 100cqh / 900)}
.cl-icon{position:absolute;left:50%;top:calc(50% + var(--dp) * -270);width:calc(var(--dp) * 120);height:calc(var(--dp) * 120);margin-left:calc(var(--dp) * -60);border-radius:calc(var(--dp) * 27);
  box-shadow:0 calc(var(--dp) * 24) calc(var(--dp) * 50) calc(var(--dp) * -20) rgba(0,0,0,.45)}
.cl-h{position:absolute;left:0;right:0;top:calc(50% + var(--dp) * -110);text-align:center;font:600 calc(var(--dp) * 92)/1 var(--display);letter-spacing:-.05em}
.cl-h span{display:block;overflow:hidden;padding-bottom:.08em;color:#0b0b0b}
.cl-h span+span{color:#8a8a83}
.cl-h i{display:inline-block;font-style:normal}
.cl-get{position:absolute;left:0;right:0;top:calc(50% + var(--dp) * 140);display:flex;justify-content:center;font-size:calc(var(--dp) * 22)}

@media(scripting:none){
  .priv,.close{height:auto}
  .pv-n4{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .priv,.close{height:auto}
}

/* ── THE APP STORE BUTTON ── As Apple's badge looks: black, a thin grey
   edge, the Apple logo, "Download on the" over "App Store". Sized by its
   font size. No link yet. */
.appstore{display:inline-flex;align-items:center;gap:.42em;height:2.4em;padding:0 .78em 0 .62em;border:1px solid #a6a6a6;border-radius:.42em;background:#000;color:#fff;white-space:nowrap;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",sans-serif;-webkit-font-smoothing:antialiased}
.as-logo{width:1.2em;height:1.44em;fill:#fff;flex:none;margin-top:-.08em}
.as-w{display:flex;flex-direction:column;line-height:1}
.as-w small{font-size:.44em;font-weight:500;letter-spacing:.01em}
.as-w b{margin-top:.04em;font-size:1em;font-weight:600;letter-spacing:-.02em}
/* In the top bar: fixed at the window's top right, level with the hero's
   own top bar, so it is there all the way down and never moves. */
.get{position:fixed;z-index:20;top:3.5vh;right:5vw;display:flex;font-size:clamp(14px, 1.256vw, 21px);pointer-events:none}
.get .appstore{pointer-events:auto}
/* On glass, a little larger than the button, so it stays clear over
   whatever passes under it (the chips of Commands). */
.get::before{content:"";position:absolute;z-index:-1;inset:-.34em;border-radius:.74em;background:rgb(249 249 246/.66);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 0 0 .5px rgb(20 20 19/.08)}

/* ── FOOTER ── The small print and where to go, under a hairline. Every
   link is a 44px-tall target. */
.foot{padding:0 var(--side)}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 24px;padding-top:16px;padding-bottom:36px;border-top:1px solid var(--line)}
.foot-copy{font-size:.8125rem;color:var(--ink2)}
.foot-by,.foot-eg{flex-basis:100%}
.foot-eg{margin-top:6px;color:var(--ink3)}
.foot-by a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0;text-decoration:none;transition:color var(--t) var(--ease)}
.foot-by a:hover{color:var(--ink)}
.foot-by a:active{opacity:.6}
.foot-links{display:flex;flex-wrap:wrap;column-gap:28px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem;color:var(--ink2);text-decoration:none;transition:color var(--t) var(--ease)}
.foot-links a:hover{color:var(--ink)}
.foot-links a:active{opacity:.6}

/* Less motion asked for: nothing moves, floats or pulses. What is there on
   load is simply there; what the scroll brings in fades in where it stands,
   already changed (the old time and gate struck through, the new shown). */
@media(prefers-reduced-motion:reduce){
  .headline,.tag span,.rise{animation:none}
  .k-bob,.route .trk,.mapc .pulse,.tl-r .dot::after{animation:none}
  .piece,.note{transform:none}
  .float,.note,.dot::after{animation:none}
  .was::after{transform:none}
  .time .now,.gate .now{opacity:1;transform:none}
  .follow,.foot-links a,.foot-by a{transition:none}
}