/* 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%}
/* No scrollbar on the page (Jay, 16 Oct 2026): it scrolls as ever, by
   wheel, trackpad, keys and the points. Nothing inside the page scrolls on
   its own, so no other scrollbar is touched. */
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
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}
/* Selecting and dragging (Jay, 19 Oct 2026): the home page is all design,
   so nothing on it can be selected, dragged or long-pressed into iOS's
   callout or magnifier, except the support address in Join the beta, kept
   whole so it copies in one go. */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
img,svg,a{-webkit-user-drag:none}
.bp-addr{-webkit-user-select:all;user-select:all;-webkit-touch-callout:default}
/* Zoom (Jay, 19 Oct 2026): a double tap never zooms (pinching still does),
   and a text field, should one come, is never under 16px, so tapping it
   never zooms the page in. */
html{touch-action:manipulation}
input,textarea,select{font-size:max(16px,1em)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
/* A phone's chapters (index.html; phone.css lays them out under 1100 wide)
   stand empty here: no height, nothing in them drawn, each still where it
   stands, after its section. */
.m-ch{display:block;height:0;overflow:clip;visibility:hidden;content-visibility:hidden}
.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,.lb-cap,.sf-pt{isolation:isolate}
.pt::after,.it::before,.pl-it::before,.sr-cap::before,.pv-cap::before,.lb-cap::before,.sf-pt::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,.lb-cap::before,.sf-pt::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,.lb-cap:has(.pt:hover)::before,.sf-pt: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,.lb-cap:has(.pt:focus-visible)::before,.sf-pt: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: 775vh, of which the stage's own 100vh is the part it is not held.
   hero.js splits the 675vh held into the hero's 126vh, 90vh for everything
   but the phone to scroll away, 324vh for My Flights and 135vh for reading
   the opened card. Every section's held scroll is 0.9 of what it was made
   with (Jay, 16 Oct 2026): everything in it keeps its pace. Then every
   stretch where nothing changes was cut out of each (Jay, 17 Oct 2026; the
   stretches are listed in each section's script, points.js passes over
   them), so each held scroll is that much shorter again. */
.hero{height:749.35vh}
.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. */
.top{position:absolute;z-index:5;top:3.5%;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;gap:2cqw}
.brand{display:inline-flex;align-items:center;gap:.75cqw;font-size:1.85cqw;font-weight:600;line-height:1.2;letter-spacing:-.015em;text-decoration:none}
/* The mark on its own, Terminal's green, no tile. */
.brand img{width:3.1cqw;height:2.33cqw;flex-shrink:0}
.brand span{font-family:var(--mono);font-weight:500}
.brand:active{opacity:.6}
.follow{display:inline-flex;align-items:center;padding:.48cqw 1.05cqw;border:1px solid rgb(20 20 19/.16);border-radius:999px;font-size:.97cqw;font-weight:400;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)}}
/* The bar's right: Follow, quiet, and Join the beta, the main action:
   dark and solid. Its popover: the address, Copy and Open in Mail. */
.top-r{display:flex;align-items:center;gap:.7cqw}
.beta-wrap{position:relative}
.beta{display:inline-flex;align-items:center;padding:.48cqw 1.1cqw;border:1px solid #141413;border-radius:999px;background:#141413;color:#fff;font-size:.97cqw;font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap}
.beta-pop{position:absolute;z-index:30;right:0;top:calc(100% + .7cqw);width:19.5cqw;padding:1.1cqw 1.15cqw 1.15cqw;border-radius:1.25cqw;background:#fff;color:var(--ink);
  box-shadow:0 0 0 1px rgba(20,20,19,.07),0 24px 48px -20px rgba(20,20,19,.35);opacity:0;transform:translateY(-.4cqw) scale(.97);transform-origin:88% 0;transition:opacity .18s ease,transform .18s cubic-bezier(.2,.8,.2,1)}
.beta-pop.on{opacity:1;transform:none}
.beta-pop[hidden]{display:none}
.bp-lead{font-size:.92cqw;line-height:1.3;color:var(--ink2)}
.bp-addr{margin-top:.35cqw;font:500 1.25cqw/1.3 var(--mono);letter-spacing:-.01em;color:var(--ink);user-select:all}
.bp-row{display:flex;gap:.5cqw;margin-top:.9cqw}
.bp-btn{flex:1;display:inline-flex;justify-content:center;align-items:center;padding:.45cqw .7cqw;border:1px solid #dddcd5;border-radius:999px;background:#fff;color:var(--ink);font:400 .92cqw/1.2 var(--text);text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-appearance:none;appearance:none}
.bp-mail{border-color:#141413;background:#141413;color:#fff}
.bp-copy.done{border-color:#a9dcba;background:#eef8f1;color:#16a34a}
.bp-hold{position:fixed;left:-9999px;top:0;opacity:0}

/* 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 a 1206 x 2622 screen; the shot, AF1706 landed, is
   602 x 1308, half of that), 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 has a tab the site doesn't show): 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}
/* The opened card in full, scrolling in the screen (hero.js moves the
   picture): its first row is the top shot's row 150 (of 2622), under the
   status bar. Scrolled, the header is the small header's black (13, 13,
   13) with the title in it, the + where it always is, and the status bar
   of the shot with the small header, on that black. */
.r-strip{top:0;height:100%}
.r-strip img{position:absolute;left:0;top:5.721%}
.r-nav{position:absolute;left:0;top:0;width:100%;height:13.234%;container-type:size;background:#0d0d0d;box-shadow:0 1px 0 rgba(255,255,255,.06);opacity:0}
.r-nav b{position:absolute;left:0;right:0;top:72.3%;transform:translateY(-50%);text-align:center;font:600 4.23cqw/1 var(--text);letter-spacing:-.01em;color:#fff}
.r-plus{left:84.41%;top:7.056%;width:12.27%;height:5.072%;border-radius:50%}
.r-plus img{width:814.86%;margin:-125% 0 0 -687.84%}
.r-bar2{top:0;height:5.721%}
/* The first phone's +, where flights are imported: a soft ring goes out
   from it once (1C). */
.plus-ring{position:absolute;z-index:4;left:90.38%;top:9.573%;width:11.6%;aspect-ratio:1;margin:-5.8% 0 0 -5.8%;border-radius:50%;box-shadow:0 0 0 2px rgba(74,222,128,.85);opacity:0}
/* 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: 550vh, 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:454.24vh}
.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)}
/* The card's contents, clipped to its outline as it is at each moment,
   notches and all (plans.js sets the clip): nothing in it ever shows past
   its edges or through a notch, as it grows and folds. */
.pl-in{position:absolute;left:0;top:0;width:100%;height:calc(var(--dp) * 484)}
.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}
/* Its contents, clipped to its outline, notches and all: nothing in it
   shows past its edges or through a notch. */
.pl-tin{position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  -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}
}

/* ── THE DECK ── Its own held stage: 490vh, the stage's 100vh not held.
   As the Logbook: the heading and the four points' list at the left (each
   point's tag a small picture, the site's green tag), and at the right a
   phone (the hero's iPhone, 340 plan pixels wide) with the Deck's
   placeholder picture, the Deck's own sheet rising on its screen (food and
   shops, with the chains' logos), and three cards that leave it: the way
   to the gate (left), the walk in minutes (top right), the floor (right). The pieces are the
   hero's cards, darker at the top (#1b1b1b to #121212), lit along their
   top edge, with a deep soft shadow; each floats on its own, tilted a
   little. Everything in them is in --u, a plan pixel here (a phone's
   chapter sets its own). Where everything is laid out here is how the
   section ends; deck.js moves it all with transform and opacity. */
.deck{height:490vh}
.dk-stage{container-type:size;--dp:min(100cqw / 1440, 100cqh / 900);--u:var(--dp);--green:#4ade80}
.dk-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}
.dk-h span{display:block;color:#0b0b0b}
.dk-h span+span{color:#8a8a83}
/* The points' list, and the airports under it: deck.js stands each point
   where it goes, and the airports under the last. */
.dk-list{position:absolute;left:calc(50% + var(--dp) * -515);top:calc(50% + var(--dp) * -132);width:calc(var(--dp) * 600)}
.dk-caps{position:relative;list-style:none}
.dk-cap{position:absolute;left:0;top:0;width:100%;opacity:0;transform-origin:0 0}
.dk-c3{opacity:1}
/* The tag: the site's green tag, a small picture in it. */
.dk-mk{display:inline-flex;align-items:center;justify-content:center;padding:calc(var(--dp) * 3) calc(var(--dp) * 8);border:1px solid #cfe9d8;border-radius:calc(var(--dp) * 7);background:#eef8f1;color:#16a34a}
.dk-mk svg,.dk-n svg{display:block;width:calc(var(--dp) * 18);height:calc(var(--dp) * 18);fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dk-mk .dk-fill,.dk-n .dk-fill{fill:currentColor;stroke:none}
.dk-ct{margin-top:calc(var(--dp) * 16);font:600 calc(var(--dp) * 36)/1.08 var(--display);letter-spacing:-.035em;color:#0b0b0b;white-space:nowrap}
.dk-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}
.dk-cap{isolation:isolate}
.dk-cap::before{content:"";position:absolute;left:-14px;right:-14px;top:-10px;bottom:-10px;border-radius:14px;z-index:-1;background:#eef8f1;opacity:0;transition:opacity .15s}
.dk-cap:has(.pt:hover)::before,.dk-cap:has(.pt:focus-visible)::before{opacity:1}
/* Under the points once they are all there, a quiet line with an (i):
   it opens every airport the Deck supports, in the points' dark card (a
   name and its code to a row). The whole line is the button. */
.dk-ports{position:relative;white-space:nowrap}
.dk-pl{position:relative;display:inline-flex;align-items:center;gap:.4em;padding:0;border:0;background:none;color:#8a8a83;font:500 calc(var(--dp) * 16)/1.4 var(--text);cursor:pointer;
  -webkit-appearance:none;appearance:none;transition:color .15s ease}
.dk-pl::after{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:max(100%,44px);transform:translateY(-50%)}
.dk-pli{display:block;width:1.15em;height:1.15em;color:#a3a39c;transition:color .15s ease}
.dk-pli svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.dk-pli .dk-idot{fill:currentColor;stroke:none}
@media(hover:hover){.dk-pl:hover,.dk-pl:hover .dk-pli{color:#141413}}
.dk-pl[aria-expanded="true"] .dk-pli{color:#16a34a}
.dk-pl:focus{outline:none}
.dk-pl:focus-visible{outline:2px solid #16a34a;outline-offset:4px;border-radius:6px}
.dk-pop.dk-pop-ap{width:calc(var(--dp) * 420);padding-top:calc(var(--dp) * 8);padding-bottom:calc(var(--dp) * 8)}
.dk-ap{list-style:none}
.dk-ap li{display:flex;align-items:baseline;justify-content:space-between;gap:calc(var(--dp) * 18);padding:calc(var(--dp) * 7) 0}
.dk-ap li+li{border-top:1px solid rgba(255,255,255,.08)}
.dk-apn{min-width:0}
.dk-apc{flex:none;font:500 calc(var(--dp) * 14)/1.45 var(--mono);letter-spacing:.04em;color:#a1a1a6}
/* Each point's (i): a small round button after its headline, over the
   point's own button (so a click on it opens its card, never the scene).
   Its card: the hero's dark card, small, with an arrow up to the (i);
   closed until asked (deck.js opens it, Esc or a click outside closes). */
.dk-i{position:relative;z-index:2;display:inline-grid;place-items:center;width:.6em;height:.6em;margin-left:.3em;padding:0;border:0;border-radius:50%;background:none;color:#a3a39c;font-size:inherit;vertical-align:-.02em;cursor:pointer;
  -webkit-appearance:none;appearance:none;transition:color .15s ease}
.dk-i::after{content:"";position:absolute;inset:-.25em;border-radius:50%}
.dk-i svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.dk-i .dk-idot{fill:currentColor;stroke:none}
@media(hover:hover){.dk-i:hover{color:#141413}}
.dk-i[aria-expanded="true"]{color:#16a34a}
.dk-i:focus{outline:none}
.dk-i:focus-visible{outline:2px solid #16a34a;outline-offset:2px}
.dk-pop{position:absolute;z-index:20;left:0;top:0;width:calc(var(--dp) * 372);padding:calc(var(--dp) * 15) calc(var(--dp) * 18) calc(var(--dp) * 16);border-radius:calc(var(--dp) * 18);
  background:linear-gradient(180deg,#1b1b1b,#121212);color:#e6e6e6;font:400 calc(var(--dp) * 15.5)/1.45 var(--text);-webkit-font-smoothing:antialiased;
  box-shadow:0 calc(var(--dp) * 30) calc(var(--dp) * 60) calc(var(--dp) * -24) rgba(20,20,19,.55),0 calc(var(--dp) * 8) calc(var(--dp) * 20) calc(var(--dp) * -10) rgba(20,20,19,.3),inset 0 1px 0 rgba(255,255,255,.1);
  opacity:0;transform:translateY(calc(var(--dp) * -6)) scale(.97);transform-origin:var(--ax,30px) 0;transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1)}
.dk-pop.dk-up{transform-origin:var(--ax,30px) 100%;transform:translateY(calc(var(--dp) * 6)) scale(.97)}
.dk-pop.on{opacity:1;transform:none}
.dk-pop[hidden]{display:none}
.dk-pop p+p{margin-top:calc(var(--dp) * 7)}
.dk-pop q,.m-dkinfo q{quotes:"\201C" "\201D";font-family:var(--mono);font-size:.9em;color:#4ade80}
.dk-arrow{position:absolute;left:calc(var(--ax,30px) - var(--dp) * 7);top:calc(var(--dp) * -6);width:calc(var(--dp) * 14);height:calc(var(--dp) * 14);border-radius:calc(var(--dp) * 3);background:#1b1b1b;transform:rotate(45deg)}
.dk-up .dk-arrow{top:auto;bottom:calc(var(--dp) * -6);background:#121212}

/* The phone and the pieces: never in the points' way. */
.dk-art{position:absolute;inset:0;pointer-events:none}
.dk-phone{position:absolute;z-index:1;left:calc(50% + var(--dp) * 190);top:calc(50% + var(--dp) * -356);width:calc(var(--dp) * 340);will-change:transform}
.dk-phone .iphone{--w:calc(var(--dp) * 340)}
.dk-pc{position:absolute;z-index:2}
.dk-lv{left:calc(50% + var(--dp) * 452);top:calc(50% + var(--dp) * -78)}
.dk-rt{left:calc(50% + var(--dp) * 56);top:calc(50% + var(--dp) * -160)}
.dk-tm{left:calc(50% + var(--dp) * 410);top:calc(50% + var(--dp) * -300)}

/* Each piece floats, slowly, tilted a little, at its own point in the
   swing (on its own wrapper, so the float never fights its arrival). */
.dk-fl{will-change:transform}
.dk-lv .dk-fl{transform:rotate(2.5deg);animation:dk-f1 6.5s ease-in-out infinite alternate}
.dk-rt .dk-fl{transform:rotate(-2.5deg);animation:dk-f2 7.2s ease-in-out -2s infinite alternate}
.dk-tm .dk-fl{transform:rotate(-1.5deg);animation:dk-f3 6s ease-in-out -4s infinite alternate}
@keyframes dk-f1{from{transform:translate(0,0) rotate(2.5deg)}to{transform:translate(0,calc(var(--u) * -11)) rotate(1deg)}}
@keyframes dk-f2{from{transform:translate(0,0) rotate(-2.5deg)}to{transform:translate(0,calc(var(--u) * -10)) rotate(-1deg)}}
@keyframes dk-f3{from{transform:translate(0,0) rotate(-1.5deg)}to{transform:translate(0,calc(var(--u) * -8)) rotate(0deg)}}

/* The card: dark, lit along its top, a deep soft shadow under it. */
.dk-card{position:relative;background:linear-gradient(180deg,#1b1b1b,#121212);color:#eaeaea;white-space:nowrap;font-family:var(--mono);-webkit-font-smoothing:antialiased;
  box-shadow:0 calc(var(--u) * 34) calc(var(--u) * 64) calc(var(--u) * -26) rgba(20,20,19,.55),0 calc(var(--u) * 10) calc(var(--u) * 22) calc(var(--u) * -12) rgba(20,20,19,.32),inset 0 1px 0 rgba(255,255,255,.1)}

/* 1. The floor: the walk's green square with the escalator, and its
   floor, the 1 rolling up to a green 2. */
.dk-lvc{display:flex;align-items:center;gap:calc(var(--u) * 14);padding:calc(var(--u) * 16) calc(var(--u) * 24) calc(var(--u) * 16) calc(var(--u) * 16);border-radius:calc(var(--u) * 22)}
.dk-tile{display:grid;place-items:center;flex:none;width:calc(var(--u) * 48);height:calc(var(--u) * 48);border-radius:calc(var(--u) * 13);background:linear-gradient(180deg,#5be38c,#3fcf73);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.dk-tile svg{width:calc(var(--u) * 28);height:calc(var(--u) * 28);fill:none;stroke:#0b0b0b;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.dk-lvt{display:flex;flex-direction:column;gap:calc(var(--u) * 3)}
.dk-lvl{font:500 calc(var(--u) * 14)/1.2 var(--text);color:#8a8a8a}
.dk-lvn{font:600 calc(var(--u) * 28)/1.1 var(--mono);letter-spacing:-.02em;color:#f2f2f2}
.dk-dg{position:relative;display:inline-block;overflow:hidden;vertical-align:top;height:1.1em;line-height:1.1}
.dk-dg i{display:block;font-style:normal}
.dk-dfrom{opacity:0}
.dk-dto{position:absolute;left:0;top:0;color:var(--green)}

/* The way card: "Gate B20", struck through as the gate changes, and A26
   in green. Under it the halls of a small plan, the first way (straight on
   to B20) and the new one (two turns, to A26), each a run of clipped bars
   that slide along, so a way draws itself with transform alone; the
   gates' pins, and the blue dot, as Apple Maps draws where you are. Points in
   --u, on a map 236 by 132: the dot at 24,102; B20 at 206,102; the new way
   turns at 96,102 and 96,42 to A26 at 206,42. */
.dk-rtc{width:calc(var(--u) * 268);padding:calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 16);border-radius:calc(var(--u) * 24)}
.dk-rth{display:flex;align-items:baseline;justify-content:space-between;padding:0 calc(var(--u) * 2) calc(var(--u) * 11)}
.dk-gate{display:flex;align-items:baseline;gap:calc(var(--u) * 8);font:600 calc(var(--u) * 17)/1.2 var(--mono);color:#f2f2f2}
.dk-old{position:relative;color:#8a8a8a}
.dk-strike{position:absolute;left:-2%;right:-2%;top:55%;height:calc(var(--u) * 1.6);border-radius:1px;background:#c4c4c4;transform-origin:0 50%}
.dk-new{color:var(--green)}

.dk-map{position:relative;width:calc(var(--u) * 236);height:calc(var(--u) * 132);border-radius:calc(var(--u) * 14);background:#0d0d0e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);overflow:hidden}
.dk-halls,.dk-marks{position:absolute;inset:0;width:100%;height:100%}
.dk-halls path{fill:none;stroke:#1f2023;stroke-width:20;stroke-linecap:round;stroke-linejoin:round}
.dk-tk{fill:none;stroke:#4a4d53;stroke-width:1.4;stroke-linecap:round}
.dk-g{font:500 9.5px var(--mono);fill:#6b6f76;text-anchor:middle}
.dk-gon{fill:var(--green);font-weight:600}

.dk-seg{position:absolute;height:calc(var(--u) * 5);border-radius:calc(var(--u) * 2.5) 0 0 calc(var(--u) * 2.5);overflow:hidden;transform-origin:calc(var(--u) * 2.5) 50%}
.dk-seg i{display:block;width:100%;height:100%;border-radius:calc(var(--u) * 2.5);background:var(--green)}
.dk-s0{left:calc(var(--u) * 21.5);top:calc(var(--u) * 99.5);width:calc(var(--u) * 187)}
.dk-s1{left:calc(var(--u) * 21.5);top:calc(var(--u) * 99.5);width:calc(var(--u) * 77)}
.dk-s2{left:calc(var(--u) * 93.5);top:calc(var(--u) * 99.5);width:calc(var(--u) * 65);transform:rotate(-90deg)}
.dk-s3{left:calc(var(--u) * 93.5);top:calc(var(--u) * 39.5);width:calc(var(--u) * 115)}
.dk-pin{position:absolute;width:calc(var(--u) * 18);height:calc(var(--u) * 18);border-radius:50%;background:var(--green);box-shadow:0 0 0 calc(var(--u) * 3) rgba(74,222,128,.18)}
.dk-pin0{left:calc(var(--u) * 197);top:calc(var(--u) * 93);opacity:0}
.dk-pin1{left:calc(var(--u) * 197);top:calc(var(--u) * 33)}
.dk-s0{opacity:0}
.dk-pin::after{content:"";position:absolute;left:30%;top:30%;width:40%;height:40%;border-radius:50%;background:#0d0d0e}
.dk-me{position:absolute;left:calc(var(--u) * 16);top:calc(var(--u) * 94);width:calc(var(--u) * 16);height:calc(var(--u) * 16);border-radius:50%;background:#0a84ff;box-shadow:0 0 0 calc(var(--u) * 2.6) #fff,0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0,0,0,.5)}
.dk-me::before{content:"";position:absolute;left:50%;top:50%;width:calc(var(--u) * 44);height:calc(var(--u) * 44);margin:calc(var(--u) * -22) 0 0 calc(var(--u) * -22);border-radius:50%;background:radial-gradient(closest-side,rgba(10,132,255,.35),rgba(10,132,255,0));animation:dk-halo 2.4s ease-in-out infinite alternate}
@keyframes dk-halo{from{transform:scale(.7);opacity:.6}to{transform:scale(1);opacity:1}}

/* The walk: "Departs in 45 min" and "Gate A26 · 6 min walk", as the
   Deck shows them (it never shows a boarding time: that is on the
   boarding pass). */
.dk-tmc{padding:calc(var(--u) * 14) calc(var(--u) * 20) calc(var(--u) * 15);border-radius:calc(var(--u) * 22)}
.dk-tm0{font:400 calc(var(--u) * 13.5)/1.2 var(--mono);color:#8a8a8a}
.dk-tm1{display:flex;align-items:center;gap:calc(var(--u) * 6);margin-top:calc(var(--u) * 7);font:500 calc(var(--u) * 16)/1.2 var(--mono);color:#f2f2f2}
.dk-tm1 b{font-weight:600;color:var(--green)}
.dk-wk{flex:none;width:calc(var(--u) * 18);height:calc(var(--u) * 18);fill:none;stroke:var(--green);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* The Deck's own screens, stacked on its map: the drawer's, then the food
   list's, each brought in by deck.js at its point (with no script, the
   last one shows, as everything else ends). */
.dk-phone .dk-shot{position:absolute;left:0;top:0}

@media(scripting:none){
  .deck{height:auto}
  .dk-cap{position:relative;opacity:1;margin-bottom:calc(var(--dp) * 18)}
  .dk-ct{font-size:calc(var(--dp) * 30)}
}
@media(prefers-reduced-motion:reduce){
  .deck{height:auto}
  .dk-fl,.dk-me::before{animation:none}
}

/* ── COMMANDS ── Its own held stage: 460vh, 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. */
/* Clipped across, not down: its storm of commands drifts past the window's
   sides, which would otherwise make the page scrollable sideways. */
.cmds{height:413.74vh;overflow-x:clip}
/* 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: 1179.55vh (0.9 x search.js's HELD + 1), 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:641.16vh}
.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:#24362c;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}
}

/* ── LOGBOOK ── Its own held stage: 550vh, the stage's 100vh not held. The
   heading and the captions' list at the left, and at the right the app's
   Logbook pieces floating on the page, no phone (Jay, 16 Oct 2026), drawn
   as the app draws them (sizes in points, from the app and Jay's
   screenshots of 15 Oct 2026; a point is 1.05 plan pixels): the ring's
   card; the Flights drawer as a card in front of it, a little to the right
   and lower, then Aircraft; then the Routes card, with Random facts' row
   under it, where the ring's card was, and Random facts' drawer in front.
   logbook.js moves everything; where it ends (Random facts open) is laid
   out here. */
.logb{height:475.84vh}
.lb-stage{container-type:size;--dp:min(100cqw / 1440, 100cqh / 900);--green:#4ade80}
.lb-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}
.lb-h span{display:block;color:#0b0b0b}
.lb-h span+span{color:#8a8a83}
.lb-caps{position:absolute;left:calc(50% + var(--dp) * -515);top:calc(50% + var(--dp) * -132);width:calc(var(--dp) * 560);list-style:none}
.lb-cap{position:absolute;left:0;top:0;width:100%;opacity:0;transform-origin:0 0}
.lb-c3{opacity:1}
.lb-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)}
.lb-ct{margin-top:calc(var(--dp) * 16);font:600 calc(var(--dp) * 36)/1.08 var(--display);letter-spacing:-.035em;color:#0b0b0b}
/* The pieces' layer: the whole stage, never in the captions' way. */
.lb-art{position:absolute;inset:0;pointer-events:none;--pt:calc(var(--dp) * 1.05);color:#fff;font-family:var(--text);-webkit-font-smoothing:antialiased}
.lb-art>*,.lb-home>*{position:absolute}
.lb-art svg{display:block}
.lb-home{inset:0}
.lb-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}
.lb-card{left:calc(50% + var(--dp) * 120);width:calc(var(--pt) * 369);border-radius:calc(var(--pt) * 16);background:#1c1c1e;
  box-shadow:0 0 0 1px rgba(255,255,255,.03),0 calc(var(--dp) * 34) calc(var(--dp) * 64) calc(var(--dp) * -30) rgba(20,20,19,.5)}
.lb-rcard{top:calc(50% + var(--dp) * -300);height:calc(var(--pt) * 516.6)}
.lb-ring{position:absolute;left:calc(var(--pt) * 59.5);top:calc(var(--pt) * 27);width:calc(var(--pt) * 250);height:calc(var(--pt) * 250)}
.lb-part{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:50% 50%}
.lb-hsel{opacity:0}
.lb-mid{position:absolute;left:0;right:0;top:calc(var(--pt) * 121);height:calc(var(--pt) * 62)}
.lb-f{position:absolute;left:0;right:0;top:0;text-align:center;opacity:0}
.lb-f b{display:block;font:700 calc(var(--pt) * 30.4)/1.15 ui-rounded,var(--display);letter-spacing:-.01em;color:#fff}
.lb-f span{display:block;margin-top:calc(var(--pt) * 2);font:600 calc(var(--pt) * 13)/1.25 ui-rounded,var(--text);color:rgb(226 226 226/.6)}
.lb-fsel span{color:#5fbe6f}
.lb-f2{opacity:1}
.lb-rows{position:absolute;left:calc(var(--pt) * 16);right:calc(var(--pt) * 16);top:calc(var(--pt) * 293.3);list-style:none}
.lb-row{position:relative;display:flex;align-items:center;height:calc(var(--pt) * 41.5);font:400 calc(var(--pt) * 17)/1 var(--text);letter-spacing:-.02em}
.lb-row+.lb-row{box-shadow:inset 0 calc(var(--pt) * .5) 0 rgba(84,84,88,.6)}
.lb-row i,.lb-list i{flex:none;width:calc(var(--pt) * 10);height:calc(var(--pt) * 10);margin-right:calc(var(--pt) * 10);border-radius:50%}
.lb-val{position:relative;margin-left:auto;width:calc(var(--pt) * 120);height:calc(var(--pt) * 22);color:rgb(235 235 245/.6)}
.lb-v{position:absolute;right:0;top:0;font-style:normal;line-height:calc(var(--pt) * 22);white-space:nowrap;font-variant-numeric:tabular-nums;opacity:0}
.lb-v6{opacity:1}
.lb-dg{background:#5fbe6f}.lb-db{background:#498ae0}.lb-da{background:#ddaf58}.lb-dr{background:#e1665b}.lb-dc{background:#78bede}.lb-dp{background:#b16fd6}.lb-dx{background:#8e8e93}
.lb-tl{position:absolute;left:calc(var(--pt) * 14);top:calc(var(--pt) * 12);display:flex;align-items:center;gap:calc(var(--pt) * 7);font:600 calc(var(--pt) * 15)/1.35 var(--text);color:var(--green)}
.lb-tl svg{width:calc(var(--pt) * 19);height:calc(var(--pt) * 19);fill:none;stroke:var(--green);stroke-width:1.6;stroke-linejoin:round}
.lb-routes{top:calc(50% + var(--dp) * -300);height:calc(var(--pt) * 268)}
.lb-tile{position:absolute;left:calc(var(--pt) * 13.5);top:calc(var(--pt) * 40.7);width:calc(var(--pt) * 342);height:calc(var(--pt) * 190);overflow:hidden;border-radius:calc(var(--pt) * 10);background:#18273f}
.lb-tile img{display:block;width:100%;height:100%}
.lb-lines{position:absolute;inset:0;width:100%;height:100%}
.lb-route{fill:none;stroke:rgb(255 255 255/.85);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.lb-ap{fill:#fff}
.lb-legal{position:absolute;left:calc(var(--pt) * 8);bottom:calc(var(--pt) * 7);display:flex;align-items:center;gap:calc(var(--pt) * 2);font:600 calc(var(--pt) * 12.5)/1 var(--text);color:#fff}
.lb-legal svg{width:calc(var(--pt) * 10.5);height:calc(var(--pt) * 12.5);fill:#fff}
.lb-legal u{margin-left:calc(var(--pt) * 9);font:500 calc(var(--pt) * 8.5)/1 var(--text);color:rgb(255 255 255/.6)}
.lb-cap2{position:absolute;left:calc(var(--pt) * 14);top:calc(var(--pt) * 239);font:400 calc(var(--pt) * 13)/1.3 var(--text);color:rgb(235 235 245/.6)}
.lb-facts{top:calc(50% + var(--dp) * -10);height:calc(var(--pt) * 46.3);overflow:hidden}
.lb-facts .lb-tl{top:calc(var(--pt) * 13)}
.lb-chev{width:calc(var(--pt) * 8);height:calc(var(--pt) * 13);fill:none;stroke:rgb(235 235 245/.3);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lb-facts .lb-chev{position:absolute;right:calc(var(--pt) * 16);top:calc(var(--pt) * 16.6)}
.lb-hl{position:absolute;inset:0;border-radius:inherit;background:rgb(255 255 255/.1);opacity:0;pointer-events:none}
.lb-touch{z-index:12;left:0;top:0;width:calc(var(--pt) * 40);height:calc(var(--pt) * 40);margin:calc(var(--pt) * -20) 0 0 calc(var(--pt) * -20);border-radius:50%;background:rgb(255 255 255/.32);opacity:0}
/* The drawers, as cards: the app's sheet, glass along its top edge.
   Flights, and one level deeper, Aircraft; and Random facts. */
.lb-sheet{z-index:10;left:calc(50% + var(--dp) * 210);top:calc(50% + var(--dp) * -280);width:calc(var(--pt) * 402);height:calc(var(--dp) * 660);overflow:hidden;border-radius:calc(var(--pt) * 34);
  box-shadow:0 0 0 1px rgba(255,255,255,.04),0 calc(var(--dp) * 40) calc(var(--dp) * 80) calc(var(--dp) * -36) rgba(20,20,19,.6)}
.lb-s1{opacity:0}
.lb-s2{top:calc(50% + var(--dp) * -180);height:calc(var(--dp) * 480)}
.lb-sheet>*{position:absolute}
.lb-sbg{inset:0;border-radius:inherit;background:#141416}
.lb-sbg::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 10%,rgba(255,255,255,0) 30%);
  -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)}
.lb-grab{z-index:3;left:50%;top:calc(var(--pt) * 5);width:calc(var(--pt) * 36);height:calc(var(--pt) * 5);margin-left:calc(var(--pt) * -18);border-radius:9px;background:#5a595d}
.lb-x,.lb-back{z-index:4;top:calc(var(--pt) * 15.6);width:calc(var(--pt) * 44);height:calc(var(--pt) * 44);border-radius:50%;display:grid;place-items:center}
.lb-x{right:calc(var(--pt) * 16.5)}
.lb-back{position:absolute;left:calc(var(--pt) * 16)}
.lb-x svg,.lb-back svg{width:calc(var(--pt) * 17);height:calc(var(--pt) * 17);fill:none;stroke:var(--green);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lb-back svg{stroke:#fff}
.lb-page{inset:0;overflow:hidden}
.lb-page::before{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:calc(var(--pt) * 76);background:linear-gradient(#141416 70%,rgb(20 20 22/0))}
.lb-page{background:#141416}
.lb-p2{transform:translateX(100%);box-shadow:calc(var(--pt) * -8) 0 calc(var(--pt) * 24) rgba(0,0,0,.35)}
.lb-st{position:absolute;z-index:3;left:0;right:0;top:calc(var(--pt) * 20);text-align:center}
.lb-st b{display:block;font:600 calc(var(--pt) * 17)/1.25 var(--text);letter-spacing:-.02em;color:#fff}
.lb-st span{display:block;font:400 calc(var(--pt) * 13)/1.3 var(--text);color:rgb(235 235 245/.6)}
.lb-scroll{position:absolute;left:0;top:0;width:100%;height:calc(var(--pt) * 1000)}
.lb-dring{position:absolute;left:calc(var(--pt) * 76);top:calc(var(--pt) * 112);width:calc(var(--pt) * 250);height:calc(var(--pt) * 250)}
.lb-dmid{position:absolute;left:0;right:0;top:calc(var(--pt) * 90);text-align:center}
.lb-dmid b{display:block;font:700 calc(var(--pt) * 46)/1.1 ui-rounded,var(--display);color:#fff}
.lb-dmid span{display:block;font:600 calc(var(--pt) * 17)/1.3 ui-rounded,var(--text);color:rgb(235 235 245/.6)}
.lb-list{position:absolute;left:calc(var(--pt) * 16);width:calc(var(--pt) * 369);top:calc(var(--pt) * 405);overflow:hidden;border-radius:calc(var(--pt) * 26);background:#1f1f21;list-style:none}
.lb-list li{position:relative;display:flex;align-items:center;min-height:calc(var(--pt) * 51);padding:0 calc(var(--pt) * 16);font:400 calc(var(--pt) * 17)/1.3 var(--text);letter-spacing:-.02em}
.lb-list li+li::before{content:"";position:absolute;left:calc(var(--pt) * 36);right:0;top:0;border-top:calc(var(--pt) * .5) solid rgba(84,84,88,.65)}
.lb-list em{margin-left:auto;font-style:normal;color:rgb(235 235 245/.6)}
.lb-flist{top:calc(var(--pt) * 747)}
.lb-flist li+li::before,.lb-rf li+li::before{left:calc(var(--pt) * 16)}
.lb-flist em b{font-weight:400;color:var(--green)}
.lb-flist .lb-chev{margin-left:calc(var(--pt) * 10)}
.lb-rf{top:calc(var(--pt) * 80)}
.lb-rf li{padding-top:calc(var(--pt) * 13);padding-bottom:calc(var(--pt) * 13)}
.lb-rf li b{font-weight:600;color:var(--green)}


@media(scripting:none){
  .logb{height:auto}
}
@media(prefers-reduced-motion:reduce){
  .logb{height:auto}
}

/* ── YOUR CALENDAR, YOUR FLIGHTS ── Its own held stage: 406vh, 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:330vh}
.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-c3{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)}
/* An event's words, centred in its pill by their capitals: the system
   font's line puts them 0.05 em low, so they are raised by that. */
.pv-ev i,.pv-lift i{position:relative;top:-.055em}
.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 a little,
   by its shadow, and stays in its day: as wide as the day less 2 points a
   side, a point taller than the event, its words centred with even room
   round them and clear of the day's number. (privacy.js puts it there.) */
.pv-lift{position:absolute;left:0;top:0;z-index:4;display:flex;align-items:center;justify-content:center;border-radius:calc(var(--dp) * 5);
  background:#eafbf0;box-shadow:0 0 0 calc(var(--dp) * 1.5) rgba(74,222,128,.9),0 calc(var(--dp) * 6) calc(var(--dp) * 12) calc(var(--dp) * -6) rgba(22,101,52,.45);
  font:600 calc(var(--dp) * 9)/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) * 70);top:calc(50% + var(--dp) * -215);width:calc(var(--dp) * 270);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) * 65);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}

/* ── YOUR DATA ── Its own held stage: 226vh, the stage's 100vh not held.
   At the end, as the sections before: the heading at the left, and under
   it the four points 6A to 6D (a number, a headline, a line); the lock at
   the right. safe.js brings them in. */
.safe{height:184.31vh}
.sf-stage{container-type:size;--dp:min(100cqw / 1440, 100cqh / 900)}
.sf-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}
.sf-h span{display:block;color:#0b0b0b}
.sf-h span+span{color:#8a8a83}
.sf-pts{position:absolute;left:calc(50% + var(--dp) * -515);top:calc(50% + var(--dp) * -160);width:calc(var(--dp) * 520);list-style:none}
.sf-pt{position:relative;margin-top:calc(var(--dp) * 20)}
.sf-pt:first-child{margin-top:0}
.sf-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) * 14)/1.5 var(--mono)}
.sf-t{margin-top:calc(var(--dp) * 8);font:600 calc(var(--dp) * 22)/1.2 var(--display);letter-spacing:-.025em;color:#0b0b0b}
.sf-b{margin-top:calc(var(--dp) * 5);max-width:calc(var(--dp) * 470);font:400 calc(var(--dp) * 16.5)/1.45 var(--text);color:#55554f}
/* The lock: as SF Symbols' lock.fill, in the page's ink, alone in the
   middle of the page; its shackle drops in, its keyhole lights green, a
   ring pulses out from it and a glow blooms behind it and calms (safe.js).
   Then it moves aside, to the middle of the right half. */
.sf-lockg{position:absolute;left:50%;top:50%;width:calc(var(--dp) * 180);height:calc(var(--dp) * 236);margin:calc(var(--dp) * -118) 0 0 calc(var(--dp) * -90);
  transform:translate3d(calc(var(--dp) * 260),0,0) scale(.72)}
.sf-halo{position:absolute;left:50%;top:55%;width:calc(var(--dp) * 600);height:calc(var(--dp) * 600);margin:calc(var(--dp) * -300) 0 0 calc(var(--dp) * -300);border-radius:50%;
  background:radial-gradient(closest-side,rgba(74,222,128,.24),rgba(74,222,128,.1) 45%,rgba(74,222,128,0));opacity:0}
.sf-pulse{position:absolute;left:50%;top:58%;width:calc(var(--dp) * 300);height:calc(var(--dp) * 300);margin:calc(var(--dp) * -150) 0 0 calc(var(--dp) * -150);border-radius:50%;
  box-shadow:0 0 0 calc(var(--dp) * 2) rgba(22,163,74,.5);opacity:0}
.sf-lock{position:absolute;inset:0}
.sf-shk{position:absolute;left:calc(var(--dp) * 25);top:0;width:calc(var(--dp) * 130);height:calc(var(--dp) * 120);fill:none;stroke:#141413;stroke-width:22;stroke-linecap:round}
.sf-bdy{position:absolute;left:0;bottom:0;width:calc(var(--dp) * 180);height:calc(var(--dp) * 136);border-radius:calc(var(--dp) * 30);background:#141413;transform-origin:50% 100%}
.sf-kh{position:absolute;left:50%;top:calc(var(--dp) * 40);width:calc(var(--dp) * 26);height:calc(var(--dp) * 26);margin-left:calc(var(--dp) * -13);border-radius:50%;background:#f9f9f6}
.sf-kh::after{content:"";position:absolute;left:50%;top:calc(var(--dp) * 16);width:calc(var(--dp) * 10);height:calc(var(--dp) * 30);margin-left:calc(var(--dp) * -5);border-radius:calc(var(--dp) * 5);background:inherit}
.sf-kh-on{background:#4ade80;box-shadow:0 0 calc(var(--dp) * 18) rgba(74,222,128,.75)}
.sf-kh-on::after{box-shadow:0 0 calc(var(--dp) * 18) rgba(74,222,128,.6)}
@media(scripting:none){
  .safe{height:auto}
}
@media(prefers-reduced-motion:reduce){
  .safe{height:auto}
}

/* ── GET TERMINAL ── Its own held stage: 280vh, the stage's 100vh not held.
   The app's icon, the heading in the hero's style and the invitation to the beta,
   in the middle; closing.js brings each in. */
.close{height:210.52vh}
.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}
/* Each line's mask leaves 0.3em under the text, so a descender (the y of
   "your") is never cut while the line rises; the margin takes the extra
   0.22em back, so the lines sit where they did (19 Oct 2026). */
.cl-h span{display:block;overflow:hidden;padding-bottom:.3em;margin-bottom:-.22em;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) * 130);display:flex;flex-direction:column;align-items:center;gap:calc(var(--dp) * 14)}
/* The beta: a line in the heading's grey, and Join the beta, the top bar's
   button a size larger, to the TestFlight page. */
.cl-beta{font:500 calc(var(--dp) * 24)/1.3 var(--text);letter-spacing:-.01em;color:#8a8a83}
.cl-join{padding:.6cqw 1.4cqw;font-size:1.3cqw}

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

/* ── FOOTER ── The small print and where to go, under a hairline. Every
   link is a 44px-tall target. */
.foot{position:relative;overflow:hidden;padding:0 var(--side) 15vw}
/* Behind it, huge and faded, the mark and the name as the bar draws them,
   as wide as the page's words: a little stronger at the top, dissolving
   into the page as they run off its foot (a mask, painted once); always
   under the links and words. */
.foot-mark{position:absolute;z-index:0;left:0;right:0;bottom:-3.3vw;display:flex;align-items:center;justify-content:center;gap:2.6vw;
  font:500 15.5vw/1 var(--mono);letter-spacing:-.03em;color:#e3e2db;white-space:nowrap;pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(180deg,#000 22%,rgba(0,0,0,.55) 52%,rgba(0,0,0,0) 86%);mask-image:linear-gradient(180deg,#000 22%,rgba(0,0,0,.55) 52%,rgba(0,0,0,0) 86%)}
.foot-mark i{flex:none;width:.98em;height:.74em;background:currentColor;-webkit-mask:url(/assets/mark.svg) center/contain no-repeat;mask:url(/assets/mark.svg) center/contain no-repeat}
.foot-row{position:relative;z-index:1}
.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)}
/* The © line, and who made it beside it, quieter; Jay's name a link, as
   the footer's others. */
.foot-l{display:flex;flex-wrap:wrap;align-items:center;column-gap:18px}
.foot-by{color:var(--ink3)}
.foot-by a{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--ink2);text-decoration:none;transition:color .2s ease}
.foot-by a:hover{color:var(--ink)}
.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{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem;color:var(--ink2);text-decoration:none;transition:color .2s 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}
}

/* ── LIQUID GLASS ── Every system control on the page, as iOS 26 draws it:
   a translucent body, lit from above, a light edge brightest where the
   light falls on it (top left, and a little at the bottom right), and a
   soft depth under it. Nothing here is a live filter: each body is a
   tinted fill and each edge a gradient ring (a mask, painted once), so a
   piece that moves costs nothing more than any other; what is behind a
   piece shows through its fill as it would through glass at a glance.
   (Search's map buttons and bar, over a map that never moves under them
   all at once, keep their own glass, above.) Dark glass is over the app's
   dark screens; light glass over the page and Mail's white. */
.pl-x,.pv-plus,.lb-glass,
.note,.cm-bar,.cm-menu,.pv-fwd,.pv-fx,.pv-send,.pl-dr,.sr-dr{isolation:isolate}
.pv-send,.pv-fx{position:relative}
/* The edge: a ring one point wide, the light's gradient through it. */
.pl-x::before,.pv-plus::before,.lb-glass::before,
.note::before,.cm-bar::before,.cm-menu::before,.pv-fwd::before,.pv-fx::before,.pv-send::before{
  content:"";position:absolute;z-index:1;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(155deg,rgba(255,255,255,.5),rgba(255,255,255,.1) 28%,rgba(255,255,255,0) 50%,rgba(255,255,255,.05) 72%,rgba(255,255,255,.28));
  -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)}
/* Dark glass: round buttons in the app's dark screens. (The segmented
   control in When plans change and Search's field and capsules keep their
   own look, Jay, 16 Oct 2026; a ticket's Add "+" is flat, as the app's
   tickets draw theirs, above; My Flights' own + is the app's glass button.) */
.pl-x,.pv-plus,.lb-glass{background:radial-gradient(130% 100% at 50% 0%,rgba(255,255,255,.13),rgba(255,255,255,.03) 62%),rgba(46,46,50,.8);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.22),0 4px 12px -4px rgba(0,0,0,.6)}
/* Sheets: a glass edge along the top, brightest at the corners. */
.pl-dr::after,.sr-dr::after{content:"";position:absolute;z-index:9;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 10%,rgba(255,255,255,0) 30%);
  -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)}
/* Light glass: notifications, the search field and its menu on the page,
   and Mail's sheet; no blur, so a little more body than the system's. */
.note{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.74));-webkit-backdrop-filter:none;backdrop-filter:none;border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),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,.07)}
.cm-bar{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.7));box-shadow:0 0 0 .5px rgba(20,20,19,.08),0 10px 28px -14px rgba(20,20,19,.25)}
.cm-menu{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.86));box-shadow:0 0 0 .5px rgba(20,20,19,.08),0 26px 52px -26px rgba(20,20,19,.32)}
.pv-fwd{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.9));box-shadow:0 0 0 .5px rgba(20,20,19,.08),0 calc(var(--dp) * 24) calc(var(--dp) * 48) calc(var(--dp) * -16) rgba(20,20,19,.38)}
.note::before,.cm-bar::before,.cm-menu::before,.pv-fwd::before{background:linear-gradient(155deg,rgba(255,255,255,1),rgba(255,255,255,.4) 30%,rgba(255,255,255,0) 55%,rgba(20,20,19,.05) 80%,rgba(20,20,19,.08))}
/* Mail's own buttons: an X in light glass, Send in its blue. */
.pv-fx{display:grid;place-items:center;width:calc(var(--dp) * 26);height:calc(var(--dp) * 26);border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(236,236,240,.85));box-shadow:0 0 0 .5px rgba(20,20,19,.12),0 2px 6px -2px rgba(20,20,19,.25)}
.pv-fx svg{width:calc(var(--dp) * 11);height:calc(var(--dp) * 11);fill:none;stroke:#3c3c43;stroke-width:2.2;stroke-linecap:round}
.pv-send{background:radial-gradient(130% 100% at 50% 0%,rgba(255,255,255,.35),rgba(255,255,255,0) 60%),#007aff;box-shadow:0 2px 8px -2px rgba(0,122,255,.55)}

/* ── BUTTONS AND LINKS ── As apple.com's: a button's fill deepens a little
   under the pointer, and pressed it gives, a soft step down in size that
   springs back; a footer link takes the ink and an underline slides in
   from its left, and out to its right as the pointer leaves. Fast and
   calm (80 to 300 ms), transform, opacity and colour only; the keyboard's
   focus ring is the site's green. With less motion asked for, colour only. */
.beta,.follow,.bp-btn{transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .3s cubic-bezier(.25,.1,.25,1)}
@media(hover:hover){
  .beta:hover{background:#2f2f2d;border-color:#2f2f2d}
  .follow:hover{background:rgb(20 20 19/.05);border-color:rgb(20 20 19/.3)}
  .bp-btn:hover{background:#f3f3f0}
  .bp-mail:hover{background:#2f2f2d;border-color:#2f2f2d}
  .foot-links a:hover::after,.foot-by a:hover::after{transform:scaleX(1);transform-origin:0 50%}
}
.beta:active,.follow:active,.bp-btn:active{transform:scale(.96);transition-duration:.08s}
.foot-links a::after,.foot-by a::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .3s cubic-bezier(.25,.1,.25,1)}
/* Each footer link a finger's width at least ("Jay" is narrower): an
   invisible area 44 wide around it. */
.foot-links a::before,.foot-by a::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:max(100%,44px);transform:translateX(-50%)}
.beta:focus-visible,.follow:focus-visible,.bp-btn:focus-visible,.brand:focus-visible,.foot-links a:focus-visible,.foot-by a:focus-visible{outline:2px solid #16a34a;outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .beta,.follow,.bp-btn,.beta-pop{transition:background-color .2s ease,border-color .2s ease,color .2s ease}
  .beta:active,.follow:active,.bp-btn:active{transform:none}
  .beta-pop{transform:none}
  .foot-links a::after,.foot-by a::after{transform:none;opacity:0;transition:opacity .2s ease}
  .foot-links a:hover::after,.foot-by a:hover::after{opacity:1}
}