/* Tilora, the simple page: one notch, fixed, and the screens snapping under it. */
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/fonts/bricolage2-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/fonts/bricolage2-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+2325, U+FEFF, U+FFFD;
}
/* What the words are set in for the moment before Bricolage arrives: Arial, sized and set on its line as Bricolage is
   (measured: its regular runs 4.5% wider than Arial's, its bold 1.5% narrower than Arial Bold), so nothing moves when it
   comes. Its own name, so it is never used for anything else. */
@font-face { font-family: "Bricolage Fallback"; font-weight: 200 599; src: local("Arial"), local("ArialMT");
  size-adjust: 104.5%; ascent-override: 89%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "Bricolage Fallback"; font-weight: 600 800; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 98.5%; ascent-override: 94%; descent-override: 27%; line-gap-override: 0%; }

/* the app's own type, for the parts of the app drawn outside a HUD card (Search, the AirDrop sheet, the prompter):
   hud.css gives it only inside .tl, and a font shorthand on an undefined variable falls back to the page's own */
:root { --tl-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
:root {
  --paper: #F1F0EC; --ink: #0B0B0C; --orange: #FF4F00; --graphite: #5C5B57;
  --font: "Bricolage Grotesque", "Bricolage Fallback", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);        /* slow out, weighty */
  --ease-io: cubic-bezier(.65, 0, .25, 1);
  /* springs, as curves: a weighty one with 2% over, and a firmer one that barely passes */
  --spring: linear(0, .0594, .1937, .355, .5138, .6539, .7687, .857, .9213, .9652, .9932, 1.0094, 1.0174, 1.0199, 1.0191, 1.0166, 1.0134, 1.0102, 1.0074, 1.005, 1.0031, 1.0018, 1.0008, 1.0002, .9999, .9997, .9996, .9996, .9997, .9997, 1);
  --spring-firm: linear(0, .0807, .2486, .4322, .5968, .7292, .828, .8975, .9438, .9728, .9899, .9991, 1.0034, 1.0049, 1.0049, 1.0042, 1.0032, 1.0024, 1.0016, 1.0011, 1.0007, 1.0004, 1.0002, 1.0001, 1);
  /* the one motion system, shared with site.js: glide (screen changes, driven there), settle (words, wallpaper),
     morph (what the page draws itself), touch (the pointer's) */
  --glide: cubic-bezier(.32, 0, .2, 1);
  --settle: cubic-bezier(.33, 0, .15, 1);
  --ride: cubic-bezier(.4, 0, .6, 1);          /* settle, for what rides on the scroll: still at both ends, the glide eases it */
  --morph: var(--spring);
  --touch: var(--spring-firm);
  /* the glass, by the screen's tone: on a dark wallpaper light ink, on a light one dark */
  --g-ink: #fff; --g-sub: rgba(255, 255, 255, .74); --g-body: rgba(255, 255, 255, .09); --g-rim: rgba(255, 255, 255, .55); --g-rim2: rgba(255, 255, 255, .16);
  --g-shadow: 0 10px 30px -14px rgba(0, 0, 0, .55); --g-tint: rgba(255, 122, 60, .34); --g-text-shadow: 0 1px 10px rgba(0, 0, 0, .28);
}
/* the tone is the glass's alone: changing it restyles the pills, not the page */
html[data-tone="dark"] .nav-wrap, html[data-tone="dark"] .dots, html[data-tone="dark"] .tip {
  --g-ink: #0B0B0C; --g-sub: rgba(11, 11, 12, .66); --g-body: rgba(255, 255, 255, .34); --g-rim: rgba(255, 255, 255, .9); --g-rim2: rgba(11, 11, 12, .1);
  --g-shadow: 0 10px 30px -16px rgba(11, 11, 12, .38); --g-tint: rgba(255, 120, 60, .2); --g-text-shadow: 0 1px 8px rgba(255, 255, 255, .35);
}
@supports not (transition-timing-function: linear(0, 1)) { :root { --spring: cubic-bezier(.2, .9, .2, 1.02); --spring-firm: cubic-bezier(.2, .8, .2, 1); } }
* { box-sizing: border-box; }
html { scroll-snap-type: y mandatory; -webkit-text-size-adjust: 100%; background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--paper); font: 400 18px/1.5 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* the wordmark: Tilora and its orange dot, the page's one orange */
.mark { display: inline-flex; align-items: baseline; font: 800 22px/1 var(--font); letter-spacing: -.03em; text-decoration: none; }
.mark i { width: .26em; height: .26em; border-radius: 50%; background: var(--orange); margin-left: .08em; display: inline-block; }

/* ── Glass: a translucent body over the blurred, saturated wallpaper, a bright rim, a highlight the pointer moves,
   and at the edge the wallpaper bent inwards (an SVG displacement, where the browser takes one) ─────────────────── */
.glass-body {
  position: relative; isolation: isolate; color: var(--g-ink);
  background: var(--g-body);
  -webkit-backdrop-filter: blur(12px) saturate(1.45) brightness(1.06); backdrop-filter: blur(12px) saturate(1.45) brightness(1.06);
  box-shadow: inset 0 1px 0 var(--g-rim), inset 0 -1px 0 var(--g-rim2), inset 0 0 0 .5px var(--g-rim2), inset 0 0 14px rgba(255, 255, 255, .07), var(--g-shadow);
  transition: color .6s var(--ease), background-color .6s var(--ease), box-shadow .6s var(--ease);
}
.refract .glass-body[data-lens] { backdrop-filter: blur(5px) saturate(1.45) brightness(1.06) var(--lens); }
/* the rim of light: brightest where the light comes from, top left, and again faintly bottom right */
.glass-body::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .12) 34%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .5));
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .8; }
/* the inner highlight, which the pointer moves (transform only) */
.gl-hi { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.gl-hi::before { content: ""; position: absolute; left: -30%; top: -90%; width: 160%; height: 200%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 70%);
  transform: translate3d(var(--hx, 0px), var(--hy, 0px), 0); opacity: .55; }
/* a light sweep across, on hover */
.gl-hi::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, 0));
  transform: translate3d(-120%, 0, 0) skewX(-12deg); opacity: 0; }
.gl-t { position: relative; z-index: 1; text-shadow: var(--g-text-shadow); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 28px; border-radius: 999px;
  font: 650 17px/1 var(--font); text-decoration: none; white-space: nowrap;
  transition: color .6s var(--ease), background-color .6s var(--ease), box-shadow .6s var(--ease); }
/* the magnet and the press are springs in site.js; without it, the press is plain */
html:not(.ready) .btn:active { scale: .96; }
.btn.glass.primary { background: var(--g-tint); }
/* the primary's warm glint: a tiny point of orange light at its rim */
.btn.glass.primary .gl-hi { background: radial-gradient(60% 120% at 12% 0%, rgba(255, 110, 40, .38), rgba(255, 110, 40, 0) 70%); }
/* the light sweep: one slow pass, played by site.js, and not again for a while */
.btn.sm { height: 40px; padding: 0 18px; font-size: 15px; }
.btn:focus-visible, .nav a:focus-visible, .dots button:focus-visible, summary:focus-visible { outline: 2px solid var(--g-ink); outline-offset: 3px; }
.faq summary:focus-visible { outline-color: var(--paper); }
/* on a light wallpaper (a dark-toned screen) the ring is drawn in ink, as the words are: white would hardly show */
.screen[data-tone="dark"] .btn:focus-visible { outline-color: var(--ink); }
/* a screen a link has taken the focus to (site.js): the focus is there for Tab to go on from, not to be drawn round it */
.screen[tabindex="-1"]:focus { outline: none; }

/* the nav: a glass pill either side of the notch */
.nav-wrap { position: fixed; top: 14px; left: 0; right: 0; z-index: 50; pointer-events: none; transition: opacity .5s var(--ease); }
.nav { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
.nav > *, .nav-end { pointer-events: auto; }
.nav .mark, .nav-end { height: 52px; border-radius: 999px; }
.nav .mark { padding: 0 6px; align-items: center; color: var(--g-ink); text-shadow: var(--g-text-shadow); }
.nav .mark .gl-t { display: inline-flex; align-items: baseline; }
.nav .mark i { align-self: center; margin-top: .35em; position: relative; z-index: 1; }
.nav-end { display: flex; align-items: center; gap: 22px; padding: 0 6px 0 22px; }
.nav-link { position: relative; z-index: 1; font: 550 15px/1 var(--font); color: var(--g-sub); text-decoration: none; transition: color .4s var(--ease); text-shadow: var(--g-text-shadow); }
.nav-link:hover { color: var(--g-ink); }
/* the nav's Download folds away where the screen has its own (the hero, Pricing): it fades and gives back its room */
.nav-end .btn { max-width: 160px; overflow: hidden; transition: opacity .4s var(--settle), max-width .6s var(--settle), margin .6s var(--settle), padding .6s var(--settle), scale .3s var(--touch); }
.nav-end .btn.away { opacity: 0; max-width: 0; padding-left: 0; padding-right: 0; margin-left: -22px; pointer-events: none; }
.nav-end { transition: padding .6s var(--settle), opacity .4s var(--settle); }
.nav-end:has(.btn.away) { padding-right: 22px; }
/* on a phone the pill holds only Download: the pill itself steps away */
@media (max-width: 820px) { .nav-end:has(.btn.away) { opacity: 0; pointer-events: none; } .nav-end .btn.away { opacity: 1; max-width: 160px; margin-left: 0; padding: 0 18px; } }
/* inside the nav's own glass the button is a lens of it: no second blur, its tint and rim only */
.nav-end .btn.glass { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 0 var(--g-rim), inset 0 0 0 .5px var(--g-rim2), 0 4px 12px -8px rgba(0, 0, 0, .4); }

/* the dots: a slim glass capsule; the screen you are on, a lens that slides */
/* a narrow window on a desktop: the open notch needs the room, so Download alone stays beside it */
@media (min-width: 821px) and (max-width: 1100px) { .nav-link { display: none; } .nav-end { padding: 0 6px; } .nav-end:has(.btn.away) { opacity: 0; pointer-events: none; } }
.dots { position: fixed; right: 18px; top: 50%; z-index: 40; display: flex; flex-direction: column; padding: 7px 4px; border-radius: 999px; transform: translateY(-50%); }
/* its dots are made by site.js: until then, not an empty pill that then grows */
html.js:not(.ready) .dots { visibility: hidden; }
.dots button { appearance: none; border: 0; background: none; width: 22px; height: 20px; padding: 0; display: grid; place-items: center; cursor: pointer; border-radius: 50%; position: relative; z-index: 1; }
.dots button::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--g-sub); opacity: .5; transition: opacity .5s var(--ease), scale .55s var(--touch); }
.dots button:hover::before { opacity: 1; scale: 1.35; }
.dots-lens { position: absolute; left: 4px; top: 7px; width: 22px; height: 20px; border-radius: 999px; z-index: 0; pointer-events: none; transform-origin: 50% 50%;
  }
.dots-lens::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--g-ink); }

/* the dots' tooltip: a small glass label, to the dots' left */
.tip { position: fixed; z-index: 45; left: 0; top: 0; height: 30px; padding: 0 12px; border-radius: 999px; display: flex; align-items: center;
  font: 600 14px/1 var(--font); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(.92); transform-origin: 100% 50%;
  transition: opacity .3s var(--settle), transform .5s var(--touch); }
.tip.on { opacity: 1; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0); }

/* the one island, fixed at the top: the page's anchor */
.isle-fixed { position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100lvh; z-index: 30; pointer-events: none; }

/* a screen: a wallpaper, one headline and one line, under the notch */
.screen { position: relative; height: 100vh; height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; isolation: isolate; contain: paint; view-timeline: --scr block; }
.sda .screen { view-timeline-axis: block; }
/* The silk: one canvas, fixed behind every screen, drawn by silk.js from site.js's frame loop. It does the slide
   itself, flowing from one screen's mood into the next. Without WebGL2 (.nogl), and without script, each screen carries
   its own still from the same art, leaning a few pixels with the pointer. */
.wps { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--ink); }
.wps canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s var(--settle); }
.gl-on .wps canvas { opacity: 1; }
.gl main { position: relative; z-index: 1; }
.gl .screen:not(.faq) { background: transparent; }
/* with script, the stills wait for the verdict: the silk fades in over the ink, or (.nogl) the stills come back */
.js .screen .wp { display: none; }
.nogl .screen .wp { display: block; }
.wp { position: absolute; inset: -12px; background: #0B0B0C var(--wp) center / cover no-repeat; z-index: 0; translate: var(--px, 0px) var(--py, 0px); }
.copy { position: absolute; left: 24px; right: 24px; bottom: 12vh; z-index: 3; text-align: center; }
.screen[data-tone="light"] { color: var(--paper); }
.screen[data-tone="dark"] { color: var(--ink); }
.head { font: 680 clamp(40px, 5.2vw, 76px)/1.0 var(--font); letter-spacing: -.018em; text-wrap: balance; }
.screen[data-tone="light"] .head { text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.line { margin: 18px auto 0; max-width: 620px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.42; text-wrap: balance; }
.screen[data-tone="light"] .line { color: rgba(241, 240, 236, .78); text-shadow: 0 0 3px rgba(0, 0, 0, .22), 0 1px 12px rgba(0, 0, 0, .3); }   /* the halo keeps the words readable where a bright band of silk passes under them (4.5:1) */
.screen[data-tone="light"].hero .line { color: rgba(241, 240, 236, .95); }   /* the hero's silk is the brightest: a touch more ink */
.screen[data-tone="dark"] .line { color: rgba(11, 11, 12, .7); }
.ctas { display: flex; justify-content: center; gap: 12px; margin-top: 30px; flex-wrap: wrap; max-width: none; }
.head .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .04em .03em .14em; margin: -.04em -.03em -.14em; }
.head .wi { display: inline-block; }
/* promoted ahead of the motion and only near it: the screen in view and its two neighbours, so a glide never has to
   make a layer as it sets off; the rest are let go */
.screen.hot .head .wi, .screen.hot .line, .screen.hot .copy { will-change: transform, opacity; }

/* The words come with the scroll: each word rises out of its own line a little after the one before, the line
   follows, and leaving, the words go dim as the next screen comes. */
/* leaving, the words fade and drift up a little more than the page takes them */
@keyframes copy-out { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -5vh; } }
.sda .screen:not(.faq) .copy { animation: copy-out var(--ride) both; animation-timeline: var(--tl, --scr); animation-range: exit 0% exit 85%; }

/* The handover. A glide's incoming words would still be under the fold when the outgoing ones have gone, so while it is
   under way they are drawn in a fixed layer where they will land: they rise there as it sets off, while the
   outgoing words fade and drift away, and are handed back to their own screen, the same pixels, once both have settled. */
.screen.ho { position: fixed; left: 0; right: 0; top: 0; z-index: 0; pointer-events: none; scroll-snap-align: none; view-timeline: none; background: transparent; }
.screen.ho .copy, .sda .screen.ho:not(.faq) .copy { animation: none; }
.screen.ho .head .wi { transform: translate3d(0, 112%, 0); will-change: transform; }
.screen.ho.risen .head .wi { transform: none; transition: transform .65s cubic-bezier(.25, 0, .1, 1) calc(var(--i, 0) * 40ms); }
/* going up, a short crossfade in place: the outgoing words fade in an eighth of a second (site.js) as these come up through them */
.screen.ho.up .head .wi { transform: translate3d(0, 20%, 0); opacity: 0; }
.screen.ho.up.risen .head .wi { transform: none; opacity: 1; transition: transform .42s cubic-bezier(.25, 0, .1, 1) calc(var(--i, 0) * 18ms), opacity .1s linear calc(var(--i, 0) * 14ms); }
.screen.ho.quick.risen .head .wi { transition-duration: .48s; transition-delay: calc(var(--i, 0) * 30ms); }
.screen.ho .copy .line { will-change: transform, opacity; }
.screen.ho.risen .copy .line { transition: opacity .7s var(--settle) .12s, transform .95s var(--settle) .12s; }
.screen.ho.risen .copy .line + .line { transition-delay: .2s; }
/* its own words wait, unseen and already where they will be */
.ho-held .copy { visibility: hidden; }
.ho-held .head .wi, .ho-held .copy .line { transition: none !important; }

/* the hero, and any browser without a scroll timeline: the words come in on time, as the screen settles */
/* The words rise as their screen comes into view (site.js marks it risen at 70 % in, still under its fold), each out of its own line on the
   settle curve (still at the start, a long landing), one 70 ms stagger for every headline, the lines after them; they are put back only once the screen
   has gone, unseen. Leaving, the words fade and drift up with the scroll. */
.js .head .wi { transform: translate3d(0, 112%, 0); }
.js .risen .head .wi { transform: none; transition: transform 1.15s var(--settle) calc(var(--i, 0) * 70ms); }
.js .copy .line, .js .faq .line { opacity: 0; transform: translate3d(0, 18px, 0); }
.js .risen .copy .line, .js .faq.risen .line { opacity: 1; transform: none; transition: opacity .8s var(--settle) .3s, transform 1.1s var(--settle) .3s; }
.js .risen .copy .line + .line { transition-delay: .4s; }

/* hero */
.hero .copy { bottom: 13vh; }
.hero .head { font-size: clamp(52px, 7.6vw, 112px); line-height: .96; letter-spacing: -.02em; font-weight: 720; }
.hero .line { margin-top: 26px; }

/* What the page draws itself comes up from below, on a spring: the Search panel and the tools */
.sp-wrap { position: absolute; left: 50%; top: 30%; width: 640px; margin-left: -320px; z-index: 3; transform: scale(var(--sk, 1.15)); transform-origin: 50% 0; }
.sp { font-family: var(--tl-font); color: #fff; border-radius: 22px; overflow: hidden; background: rgba(38, 37, 40, .62);
  -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16), 0 30px 70px -20px rgba(0, 0, 0, .6);
  opacity: 0; transform: translate3d(0, 46px, 0) scale(.97); transition: opacity .45s var(--settle), transform .7s var(--settle); }
.sp.on { opacity: 1; transform: none; transition: opacity .5s var(--settle), transform 1s var(--morph); }
.sp-field { height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 18px; }
.sp-glass { width: 21px; height: 21px; display: grid; place-items: center; opacity: .6; }
.sp-q { position: relative; flex: 1; font: 400 22px/1 var(--tl-font); white-space: nowrap; display: flex; align-items: center; }
.sp-ph { position: absolute; left: 0; color: rgba(255, 255, 255, .3); }
.sp-text:not(:empty) ~ .sp-ph { display: none; }
.sp-caret { display: inline-block; width: 2px; height: 25px; margin-left: 1px; background: #0A84FF; border-radius: 1px; }
.sp-list { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.sp.found .sp-list { max-height: 62px; }
.sp-list { box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .12); }
.sp-row { margin: 8px; height: 44px; border-radius: 9px; display: flex; align-items: center; gap: 10px; padding: 0 10px; background: #0A84FF; }
.sp-icon { width: 28px; height: 28px; display: grid; place-items: center; }
.sp-two { display: flex; flex-direction: column; gap: 1px; }
.sp-two b { font: 500 14px/1.2 var(--tl-font); }
.sp-two small { font: 400 11px/1.2 var(--tl-font); color: rgba(255, 255, 255, .8); }
.sp.chosen { opacity: 0; transform: translate3d(0, -10px, 0) scale(.98); transition: opacity .45s var(--settle), transform .6s var(--settle); }

.tl-fit > .tl { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

/* Home: the notch opens into the real panel */
.home .copy { bottom: 7vh; }
.in-island .tl { transform-origin: 0 0; }

/* price, at night */
.price .copy { bottom: auto; top: 50%; transform: translateY(-38%); }
.price .head { font-size: clamp(52px, 7.6vw, 112px); font-variant-numeric: tabular-nums; }
.promises { list-style: none; padding: 0; margin-top: 22px; max-width: 760px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; }
.promises li { font-size: 17px; color: rgba(241, 240, 236, .9); }
.promises li + li::before { content: "·"; margin: 0 .7em; opacity: .6; }
.price .ctas { margin-top: 36px; }
.price .fine { margin-top: 20px; font-size: 14px; line-height: 1.4; }
.screen[data-tone="light"].price .fine { color: rgba(241, 240, 236, .66); }

/* what the visitor can try on a screen: one small glass chip under its line, and a quiet note beside it */
/* below the words, in the space under them, so the words stand where they always have */
.hints { position: absolute; left: 0; right: 0; top: 100%; display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 0; max-width: none; }
.btn.hint { height: 36px; padding: 0 16px; font-size: 14px; }
/* on a light screen (dark words), the chip's words are ink too */
.screen[data-tone="dark"] .btn.hint { color: var(--ink); text-shadow: none; background: rgba(255, 255, 255, .42); }
.hint-note { font: 500 13px/1.3 var(--font); transition: opacity .5s var(--settle); }   /* small type over moving silk: the line's own ink, for 4.5:1 */
.hint-note:empty { display: none; }
.btn.hint.used { opacity: 0; pointer-events: none; transition: opacity .6s var(--settle); }
/* the island's Fill, pressable while a code of the visitor's own is waiting */
.fill-hit { position: fixed; z-index: 31; left: 0; top: 0; border: 0; padding: 0; margin: 0; background: transparent; border-radius: 14px; cursor: pointer; display: none; }
.fill-hit.on { display: block; }
.fill-hit:focus-visible { outline: 2px solid #0A84FF; outline-offset: 2px; }
/* Home, open on its screen: its panel can be played */
.isle-fixed.hud-live .in-island { pointer-events: auto; }
.mirror-live { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); border-radius: 22px; z-index: 5;   /* HUD.cardRadius: notchRadius 36 less padding 14 */ opacity: 0; transition: opacity .3s ease; }
.mirror-live.on { opacity: 1; }
/* the Search panel, typed into */
.sp-in { display: none; flex: 1; min-width: 0; background: none; border: 0; outline: 0; padding: 0; margin: 0; font: inherit; color: #fff; caret-color: #0A84FF; }
.sp-in::placeholder { color: rgba(255, 255, 255, .3); }
.sp.typing .sp-in { display: block; }
.sp.typing .sp-text, .sp.typing .sp-caret, .sp.typing .sp-ph { display: none; }
.sp-wrap.typing { pointer-events: auto; }

/* The Action Ring (Live/ActionRing.swift): 260 across, drops of 46 on a radius of 90; the glass is the silk's
   (merging drops, refracting it); here only what is on the glass: the symbols, the lens, the name */
.aring { position: absolute; left: 0; top: 0; z-index: 6; width: 260px; height: 260px; margin: -130px 0 0 -130px; pointer-events: none; }
.aring[hidden] { display: none; }
.aring.on { pointer-events: auto; }
.ar-drop { position: absolute; left: 107px; top: 107px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #1c1b20; --cut: #ddd6e2; cursor: default; }
html:not(.glfx) .ar-drop { background: rgba(255, 255, 255, .42); -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .8), 0 4px 10px rgba(0, 0, 0, .18); }
.ar-drop.lit svg { opacity: 0; }
.ar-lens { position: absolute; left: 107px; top: 107px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #141317; color: #ddd6e2; --cut: #141317;
  opacity: 0; transition: opacity .15s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.ar-lens.on { opacity: 1; }
.ar-lens .ar-g { grid-area: 1 / 1; display: none; }
.ar-lens .ar-g.on { display: block; }
.ar-name { position: absolute; left: 50%; top: 50%; translate: -50% -50%; height: 30px; padding: 0 14px; border-radius: 15px; display: flex; align-items: center; white-space: nowrap;
  font: 600 13px/1 var(--font); color: #1c1b20; background: rgba(255, 255, 255, .48); -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .7), 0 4px 10px rgba(0, 0, 0, .16); opacity: 0; scale: .92; transition: opacity .18s ease, scale .32s var(--touch); }
.ar-name.on { opacity: 1; scale: 1; }
/* chosen: one soft press, as a pressed button gives, then the ring goes */
.ar-drop.pulse, .ar-lens.pulse { animation: arpulse .16s ease-out; }
@keyframes arpulse { 50% { scale: .9; } }
.ar-lens.pulse { animation-name: arlens; }
@keyframes arlens { 0%, 100% { transform: var(--lt) scale(1.1); } 50% { transform: var(--lt) scale(.98); } }
.ghost { position: absolute; left: 0; top: 0; z-index: 9; opacity: 0; pointer-events: none; transition: opacity .3s ease; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.ghost.on { opacity: 1; }

/* Transform: Convert…'s menu, at the pointer as the app's NSMenu is; the made file, to take away */
.tmenu { position: fixed; z-index: 70; min-width: 190px; padding: 5px; border-radius: 10px; color: #fff; font: 500 13px/1 -apple-system, system-ui, sans-serif;
  background: rgba(36, 36, 40, .82); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18), 0 10px 30px rgba(0, 0, 0, .4); opacity: 0; scale: .98; transform-origin: 0 0; transition: opacity .12s ease, scale .12s ease; pointer-events: none; }
.tmenu.on { opacity: 1; scale: 1; pointer-events: auto; }
.tmenu h6 { margin: 4px 8px 3px; font: 600 11px/1.2 -apple-system, system-ui, sans-serif; color: rgba(255, 255, 255, .5); }
.tmenu hr { border: 0; height: 1px; margin: 4px 6px; background: rgba(255, 255, 255, .14); }
.tmenu button { display: block; width: 100%; text-align: left; padding: 5px 10px; border: 0; border-radius: 5px; background: none; color: inherit; font: inherit; cursor: default; }
.tmenu button:hover, .tmenu button:focus-visible { background: #0A84FF; outline: none; }
.in-island .tl-files-actions.busy .tl-files-act { opacity: .45; pointer-events: none; }
.hint-result:empty { display: none; }
.hint-result a { color: inherit; font: 600 13px/1 var(--font); text-decoration: none; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .35); }

/* the meeting, once joined: a large, quiet meeting window of the page's own (an enterprise meeting app's layout and
   density, no one's marks or trade dress); it flows out of the notch as a drop (the silk draws that), then its
   contents come in, tile by tile */
.meet, .mt-shade, .mt-sheen { position: absolute; left: 11%; top: 13.5%; width: 78%; height: 70%; border-radius: 22px; }
.meet { z-index: 4; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 12px;
  color: #f3f1f7; font-family: var(--font); background: #2b2836; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12);
  opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.meet.on { opacity: 1; pointer-events: auto; }
/* while the drop becomes it, or gathers it back: shown whole, clipped each frame to the drop's own shape */
.meet.clip { opacity: 1; transition: none; will-change: clip-path; background: transparent; box-shadow: none; }
/* its shadow, apart, so the clip never cuts it: it comes in as the drop's own shadow goes */
.mt-shade { z-index: 3; pointer-events: none; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); opacity: 0; }
/* the glass's sheen over the window as it comes out of the drop, clipped by the same shape, going as it settles */
.mt-sheen { z-index: 5; pointer-events: none; opacity: 0; clip-path: inset(50%);
  background: radial-gradient(90% 70% at 32% -8%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 38%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(to top, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 30%); }
/* without WebGL: the drop's glass, the same path in CSS */
.mt-goo { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: none; background: none; }
/* the window as a pane of liquid glass: drawn by the silk under it (glgl), or the browser's own (cssglass: without
   WebGL, or under reduced motion); the tiles and the tools sit on it, each tile its own tinted surface */
.meet.glgl { background: transparent; box-shadow: none; }
.meet.cssglass { background: rgba(14, 18, 22, .4); -webkit-backdrop-filter: blur(16px) saturate(1.45) brightness(1.02); backdrop-filter: blur(16px) saturate(1.45) brightness(1.02);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 0 0 1px rgba(255, 255, 255, .16); }
.meet:is(.glgl, .cssglass) .mt-tile { background: radial-gradient(90% 120% at 30% 20%, color-mix(in srgb, var(--a, #3a3647) 62%, transparent), color-mix(in srgb, var(--b, #232030) 72%, transparent));
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .1); }
.meet:is(.glgl, .cssglass) .mt-self { background: rgba(12, 12, 18, .42); }
.meet:is(.glgl, .cssglass) .mt-b:not(.mt-leave):not([aria-pressed="true"]) { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18); }
.mt-goo.on { display: block; }
/* gathering while the page glides away: held where it was on the screen, over the screens and under the notch */
.mt-goo.pinned { position: fixed; z-index: 29; }
.meet.fading { transition-duration: .5s; }
.mt-bar { display: flex; align-items: center; gap: 10px; padding: 2px 6px; font-size: 14px; }
.mt-bar b { font-weight: 650; }
.mt-live { width: 8px; height: 8px; border-radius: 50%; background: #30D158; box-shadow: 0 0 10px #30D158; }
.mt-time { margin-left: auto; font-variant-numeric: tabular-nums; opacity: .7; font-size: 13px; }
.mt-stage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; min-height: 0; }
.mt-tile { position: relative; border-radius: 14px; overflow: hidden; display: grid; place-items: center; min-height: 0;
  background: radial-gradient(90% 120% at 30% 20%, var(--a, #3a3647), var(--b, #232030)); }
.mt-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 calc(2px + 3px * var(--lv, 0)) rgba(168, 155, 255, calc(.25 + .7 * var(--lv, 0))); opacity: 0; transition: opacity .3s ease; }
.mt-speaking::after { opacity: 1; }
.mt-self { background: #1f1c27; }
.mt-ini { width: clamp(44px, 9vh, 88px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font: 650 clamp(15px, 2.6vh, 26px)/1 var(--font);
  background: rgba(255, 255, 255, .15); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3), 0 0 40px rgba(0, 0, 0, .25); }
.mt-tile small { position: absolute; left: 10px; bottom: 9px; padding: 3px 8px; border-radius: 6px; font-size: 12px; background: rgba(0, 0, 0, .32); }
.mt-off { position: absolute; right: 10px; bottom: 9px; opacity: .7; }
.mt-tools { display: flex; justify-content: center; gap: 10px; }
.mt-b { height: 42px; min-width: 42px; padding: 0 12px; border: 0; border-radius: 12px; display: grid; place-items: center; color: #f3f1f7; cursor: pointer;
  background: rgba(255, 255, 255, .1); font: 650 14px/1 var(--font); transition: background .2s ease, scale .3s var(--touch); }
.mt-b:hover { background: rgba(255, 255, 255, .16); }
.mt-b:active { scale: .95; }
.mt-b[data-mt="mute"][aria-pressed="true"], .mt-b[data-mt="camera"][aria-pressed="true"] { background: rgba(255, 255, 255, .92); color: #2b2836; }
.mt-b[data-mt="share"][aria-pressed="true"] { background: #6E63E6; }
.mt-leave { background: #D9453B; padding: 0 20px; border-radius: 999px; }
.mt-leave:hover { background: #E5554A; }
.mt-b:focus-visible { outline: 2px solid #8E86FF; outline-offset: 2px; }
/* what comes in once the drop has spread: the bar, the tiles one after another, the tools */
.meet .mt-bar, .meet .mt-tile, .meet .mt-tools { opacity: 0; transform: translate3d(0, 10px, 0) scale(.97); transition: opacity .18s var(--settle), transform .2s var(--settle); }
.meet.in .mt-bar, .meet.in .mt-tile, .meet.in .mt-tools { opacity: 1; transform: none; transition: opacity .3s var(--settle), transform .5s var(--spring, var(--settle)); }
.meet.in .mt-tile { transition-delay: calc(30ms + var(--d) * 45ms); }
.meet.in .mt-tools { transition-delay: 200ms; }
.mt-react { position: absolute; left: 50%; bottom: 30%; font-size: 26px; translate: -50% 0; animation: mtr 1.4s var(--settle) forwards; pointer-events: none; }
@keyframes mtr { 0% { opacity: 0; transform: translateY(10px) scale(.8); } 20% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-50px); } }
/* while the meeting is on, the screen's words step aside */
/* (the copy's own opacity is the scroll's; its children are free) */
.screen.meeting-on .copy > * { opacity: 0 !important; transition: opacity .3s var(--settle) !important; }
@media (max-width: 820px) { .meet, .mt-shade, .mt-sheen { left: 3%; top: 9%; width: 94%; height: 76%; } .meet { padding: 10px; } .mt-b { height: 38px; min-width: 38px; padding: 0 9px; } .mt-leave { padding: 0 14px; } }

/* the code screen: the field a code is filled into, six boxes, quiet until a code comes; Fill sends the digits in */
/* Codes: a sign-in page in a browser window the page draws (no real site, no brand), centred under the island; the
   six boxes are the screen's object. Laid out at one size and fitted to the room by site.js (--cfk, --cft) */
.cf { position: absolute; left: 50%; top: var(--cft, 24%); z-index: 2; width: 920px; transform: translateX(-50%) scale(var(--cfk, 1)); transform-origin: 50% 0;
  border-radius: 18px; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .2s ease; box-shadow: 0 0 0 .5px rgba(11, 11, 12, .14); }
.cf.on { opacity: 1; pointer-events: auto; }
/* while the drop becomes it, or gathers it back: shown whole, clipped each frame to the drop's shape; its page comes
   out from inside the glass once it has landed (.in) */
.cf.clip { opacity: 1; transition: none; will-change: clip-path; box-shadow: none; }
.cf > .bw-bar, .cf > .bw-page { opacity: 0; transition: opacity .18s var(--settle); }
.cf.in > .bw-bar, .cf.in > .bw-page { opacity: 1; transition: opacity .35s var(--settle) .04s; }
.cf.in > .bw-page { transition-delay: .1s; }
.cf.glgl > .bw-bar { background: rgba(255, 255, 255, .32); }
.mt-shade.cf-glass, .mt-sheen.cf-glass { left: 50%; top: var(--cft, 24%); width: 920px; height: var(--cfh, 400px); border-radius: 18px;
  transform: translateX(-50%) scale(var(--cfk, 1)); transform-origin: 50% 0; }
.mt-shade.cf-glass { z-index: 1; box-shadow: 0 40px 80px -30px rgba(60, 30, 10, .45), 0 10px 24px -12px rgba(60, 30, 10, .3); }
.mt-sheen.cf-glass { z-index: 3; }
.bw-bar { position: relative; height: 44px; display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; padding: 0 14px;
  background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -.5px 0 rgba(11, 11, 12, .12); }
.bw-dots { display: flex; gap: 7px; }
.bw-dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(11, 11, 12, .16); box-shadow: inset 0 0 0 .5px rgba(11, 11, 12, .12); }
.bw-url { justify-self: center; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 16px; border-radius: 999px; min-width: 260px; justify-content: center;
  font: 550 13px/1 var(--font); color: rgba(11, 11, 12, .72); background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 .5px rgba(11, 11, 12, .1); }
.bw-url svg { color: rgba(11, 11, 12, .5); }
.bw-page { position: relative; background: #fbfbfc; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; color: #16171a; }
.si-form { display: flex; flex-direction: column; align-items: center; padding: 30px 40px 32px; transition: opacity .35s var(--settle), filter .35s var(--settle), scale .5s var(--settle); }
.si-logo { position: relative; width: 34px; height: 34px; display: block; }
.si-logo i { position: absolute; width: 22px; height: 22px; border-radius: 50%; top: 6px; }
.si-logo i:first-child { left: 0; background: #3d5afe; }
.si-logo i:last-child { right: 0; background: rgba(61, 90, 254, .45); }
.si-title { margin: 16px 0 0; font: 700 25px/1.15 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.02em; }
.si-sub { margin: 6px 0 0; font-size: 15px; line-height: 1.3; color: #6b6e76; }
.cf-row { position: relative; margin-top: 22px; }
.cf-boxes { display: flex; gap: 14px; }
.cf-boxes span { width: 100px; height: 122px; border-radius: 18px; display: grid; place-items: center; font: 640 58px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums; color: #16171a; background: #fff; box-shadow: inset 0 0 0 1.5px #d9dbe1, 0 1px 2px rgba(20, 22, 30, .05); transition: box-shadow .3s var(--settle); }
.cf-boxes span:nth-child(3) { margin-right: 22px; }
.cf:not(.pasting):not(.done) .cf-boxes span:first-child { box-shadow: inset 0 0 0 2px #3d5afe, 0 0 0 4px rgba(61, 90, 254, .14); }
.cf.pasting .cf-boxes span.on, .cf.done .cf-boxes span { box-shadow: inset 0 0 0 1.5px #b9bfcc, 0 1px 2px rgba(20, 22, 30, .05); }
.cf-boxes span::after { content: attr(data-d); opacity: 0; scale: .86; filter: blur(6px); transition: opacity .3s var(--settle), scale .45s var(--touch), filter .35s var(--settle); }
.cf-boxes span.on::after { opacity: 1; scale: 1; filter: none; }
/* Paste, by the field, as a browser offers it */
.cf-paste { position: absolute; left: calc(100% + 14px); top: 50%; translate: 0 -50%; height: 36px; padding: 0 15px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 14px/1 var(--font); color: #16171a; background: rgba(255, 255, 255, .82); box-shadow: inset 0 0 0 .5px rgba(11, 11, 12, .16), 0 6px 16px -8px rgba(20, 22, 30, .35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; scale: .96; pointer-events: none; transition: opacity .4s var(--settle), scale .5s var(--touch); }
.cf.copied .cf-paste { opacity: 1; scale: 1; pointer-events: auto; }
.cf.pasting .cf-paste { scale: .94; opacity: 0; transition-duration: .25s; }
.cf-paste:focus-visible, .si-go:focus-visible { outline: 2px solid #3d5afe; outline-offset: 3px; }
.si-go { margin-top: 24px; width: 692px; height: 50px; border: 0; border-radius: 12px; font: 600 16px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: #fff; background: #3d5afe; opacity: .38; cursor: default; transition: opacity .35s var(--settle), scale .3s var(--touch), filter .2s linear; }
.si-go:not(:disabled) { opacity: 1; cursor: pointer; }
.si-go.pressed { scale: .985; filter: brightness(.88); }
.si-go.busy { color: transparent; background: #3d5afe radial-gradient(circle, #fff 0 2.5px, transparent 3px) 50% 50% / 14px 14px no-repeat; }
.si-done { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.cf-ok { position: absolute; margin: 0; display: flex; align-items: center; gap: 10px; font: 650 22px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; color: #16171a;
  padding: 14px 22px; border-radius: 999px; background: #fff; box-shadow: 0 10px 30px -12px rgba(20, 22, 30, .35), inset 0 0 0 .5px rgba(11, 11, 12, .1);
  opacity: 0; translate: 0 8px; scale: .96; transition: opacity .4s var(--settle), translate .6s var(--settle), scale .6s var(--touch); }
.si-welcome { display: flex; flex-direction: column; align-items: center; opacity: 0; translate: 0 10px; transition: opacity .6s var(--settle) .1s, translate .8s var(--settle) .1s; }
.si-welcome .si-title { margin-top: 12px; }
.si-tiles { display: flex; gap: 14px; margin-top: 22px; }
.si-tiles i { width: 200px; height: 96px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #e3e5ea; }
.si-tiles i:first-child { background: linear-gradient(135deg, rgba(61, 90, 254, .12), rgba(61, 90, 254, .03)), #fff; }
/* signed in: the check, then the page behind it becomes the site's own "Welcome back" */
.cf.signed .si-form { opacity: 0; filter: blur(6px); scale: .98; }
.cf.signed .cf-ok { opacity: 1; translate: 0 0; scale: 1; }
.cf.welcome .cf-ok { opacity: 0; translate: 0 -10px; transition-duration: .35s; }
.cf.welcome .si-welcome { opacity: 1; translate: 0 0; }
@media (max-width: 820px) {
  .cf, .mt-shade.cf-glass, .mt-sheen.cf-glass { width: 360px; border-radius: 16px; }
  .bw-bar { height: 38px; grid-template-columns: 46px 1fr 46px; padding: 0 10px; }
  .bw-dots { gap: 5px; } .bw-dots i { width: 9px; height: 9px; }
  .bw-url { min-width: 0; height: 24px; padding: 0 12px; font-size: 12px; }
  .si-form { padding: 20px 16px 20px; }
  .si-logo { width: 28px; height: 28px; } .si-logo i { width: 18px; height: 18px; top: 5px; }
  .si-title { margin-top: 12px; font-size: 21px; }
  .si-sub { font-size: 14px; }
  .cf-row { margin-top: 16px; }
  .cf-boxes { gap: 6px; }
  .cf-boxes span { width: 48px; height: 60px; font-size: 30px; border-radius: 11px; }
  .cf-boxes span:nth-child(3) { margin-right: 10px; }
  .cf-paste { left: auto; right: 0; top: calc(100% + 8px); translate: 0 0; height: 32px; font-size: 13px; }
  .si-go { width: 328px; height: 44px; margin-top: 50px; font-size: 15px; }
  .cf-ok { font-size: 18px; padding: 12px 18px; }
  .si-tiles { gap: 8px; margin-top: 16px; } .si-tiles i { width: 100px; height: 64px; }
}

/* real glass: where the silk is drawn, it draws the glass too (refracted, frosted) and the panes keep only their tint,
   rim and highlight; over the paper of the FAQ, which the silk does not reach, the browser's blur comes back */
/* the panes keep the browser's blur: the silk's own glass drew a second rim beside them */

/* the last screen: questions in two columns, the footer under them, on one night: no seam between them */
.faq { background: var(--ink); color: var(--paper); height: auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.faq-in { flex: 1; width: 100%; max-width: 1120px; min-height: 100vh; min-height: 100svh; margin: 0 auto; padding: 120px 56px 56px; display: flex; flex-direction: column; justify-content: center; }   /* the questions have the screen to themselves: the footer starts below it */
.faq .head { text-align: center; font-size: clamp(40px, 4.6vw, 64px); }
.qas { max-width: none; width: 100%; margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-items: start; }
.qas details { border-top: .5px solid rgba(241, 240, 236, .16); }
.qas details:nth-last-child(-n+2) { border-bottom: .5px solid rgba(241, 240, 236, .16); }
.qas summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font: 650 19px/1.3 var(--font); letter-spacing: -.012em; color: rgba(241, 240, 236, .86); transition: color .4s var(--ease); }
.qas summary:hover { color: #fff; }
.qas summary::-webkit-details-marker { display: none; }
/* the + turns, on a spring, into × */
.qas summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px;
  background: linear-gradient(var(--paper), var(--paper)) center / 13px 1.75px no-repeat, linear-gradient(var(--paper), var(--paper)) center / 1.75px 13px no-repeat; transition: transform .8s var(--spring); }
.qas summary:hover::after { transform: scale(1.12); }
.qas details.opening summary::after, .qas details[open]:not(.closing) summary::after { transform: rotate(135deg); }
.qas .ans { overflow: hidden; }
.qas .ans p { padding: 0 36px 22px 0; color: rgba(241, 240, 236, .62); font-size: 17px; line-height: 1.5; }
/* The pane of glass the questions sit in (play.js, .fq): it comes out of the notch as a drop, lands under the headline
   and spreads into this; the questions then rise out of it. The night silk goes on under it (Pricing's), so the
   screen is see-through down to the fold and night again under the questions, where the footer's own silk rises */
.gl .faq { background: transparent; }
.nogl .faq::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 100svh; background: url("/assets/home/wp-price.webp") 50% 50% / cover no-repeat; }
/* the footer comes up out of the same night: its top see-through, its own still of the silk taking over below it */
:is(.gl, .nogl) .faq .site-foot { background: linear-gradient(rgba(11, 11, 12, 0), #0B0B0C 240px); }
:is(.gl, .nogl) .faq .site-foot::before { -webkit-mask: linear-gradient(transparent, #000 200px, #000 300px, transparent); mask: linear-gradient(transparent, #000 200px, #000 300px, transparent); }
.qas.fq { position: relative; z-index: 4; margin-top: 40px; padding: 6px 36px; gap: 0 56px; border-radius: 30px;
  transition: opacity .2s ease, background-color .3s ease, -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease, box-shadow .3s ease; }
.js .faq .qas.fq { opacity: 0; transform: none; pointer-events: none; }
.js .faq .qas.fq.on { opacity: 1; pointer-events: auto; }
/* while the drop becomes it, or gathers it back: clipped each frame to the drop's shape */
.js .faq .qas.fq.clip { opacity: 1; will-change: clip-path; transition: background-color .25s ease, -webkit-backdrop-filter .25s ease, backdrop-filter .25s ease, box-shadow .25s ease; }
.qas.fq.glgl { background: transparent; }
.qas.fq.cssglass { background: rgba(16, 20, 34, .3); -webkit-backdrop-filter: blur(18px) saturate(1.5) brightness(1.05); backdrop-filter: blur(18px) saturate(1.5) brightness(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .13); }
.qas.fq details { border-color: rgba(241, 240, 236, .12); }
.qas.fq details:nth-child(-n+2) { border-top: 0; }
.qas.fq details:nth-last-child(-n+2) { border-bottom: 0; }
.mt-shade.fq-glass { z-index: 3; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .6), 0 12px 30px -18px rgba(0, 0, 0, .4); }
.mt-sheen.fq-glass { z-index: 5; }
/* the questions come out from inside the glass once it has landed, one a moment after the other; they go back quickly */
.qas.fq details { opacity: 0; translate: 0 12px; scale: .985; transition: opacity .16s var(--settle), translate .2s var(--settle), scale .2s var(--settle); }
.qas.fq.in details { opacity: 1; translate: 0 0; scale: 1;
  transition: opacity .4s var(--settle) calc(50ms + var(--d, 0) * 40ms), translate .75s var(--spring, var(--settle)) calc(50ms + var(--d, 0) * 40ms), scale .75s var(--spring, var(--settle)) calc(50ms + var(--d, 0) * 40ms); }
@media (prefers-reduced-motion: reduce) {
  .js .faq .qas.fq { transition: opacity .45s ease !important; }
  .js .faq .qas.fq:not(.on) { opacity: 0 !important; }
  .qas.fq details { opacity: 1; translate: none; scale: none; transition: none; }
}

/* Home opens wider than the gap between the pills: they step aside for it */
html[data-screen="home"] .nav-wrap { opacity: 0; pointer-events: none; transition-duration: .4s; }
/* named, not "*": a selector ending in a universal on an attribute of html restyles the whole page (and repaints every wallpaper) each time it changes */
html[data-screen="home"] .nav-wrap :is(.mark, .nav-end) { pointer-events: none; }
/* a phone on the last screen, the footer in view: it has its own mark and buttons, so the nav at the foot steps away (site.js) */
.nav-wrap.off { opacity: 0; transition-duration: .4s; }
.nav-wrap.off :is(.mark, .nav-end) { pointer-events: none; }

/* ── The opening (site.js, makeIntro): black until the notch has been drawn and has poured out the silk. index.html's
   first script sets .intro before anything is painted; site.js drives every part from one clock and takes it off ── */
html.intro, html.intro body, html.intro .wps { background: #000; }
html.intro body { pointer-events: none; }
html.intro:not(.intro-rise) .hero .copy { opacity: 0; }
html.intro .wps canvas { opacity: 1; transition: none; }
html.intro .nav-wrap, html.intro .dots { opacity: 0; transition: none; }
html.intro:not(.intro-isle) .isle-fixed { visibility: hidden; }
html.intro:not(.intro-rise) .hero .head .wi { transform: translate3d(0, 112%, 0) !important; transition: none !important; }
html.intro:not(.intro-rise) .hero .copy .line { opacity: 0 !important; transform: translate3d(0, 18px, 0) !important; transition: none !important; }
html.intro.intro-fast .hero .head .wi { transition: transform .5s var(--settle) calc(var(--i, 0) * 30ms) !important; }
html.intro.intro-fast .hero .copy .line { transition: opacity .4s var(--settle) .08s, transform .5s var(--settle) .08s !important; }
html.nogl.intro .hero .wp { opacity: 0; }
.intro-trace { position: fixed; left: 0; top: 0; z-index: 31; pointer-events: none; overflow: visible; }
.intro-trace .intro-line { filter: drop-shadow(0 0 2.5px rgba(255, 228, 205, .7)); }
/* reduced motion, or an opening called off: the page fades in, a fifth of a second */
html.fadein body::after { content: ""; position: fixed; inset: 0; z-index: 100; background: #000; pointer-events: none; animation: fadein-veil .2s linear forwards; }
@keyframes fadein-veil { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .wp { translate: none !important; }
  .meet { transition: opacity .22s ease, scale .22s ease !important; }
  .meet:not(.on) { scale: .97; }
  .ar-name, .meet .mt-bar, .meet .mt-tile, .meet .mt-tools, .nav-end .btn, .cf, .cf-boxes span::after, .cf-paste, .cf-ok, .si-form, .si-welcome, .si-go, .head .wi, .line, .copy, .sp, .tk-scene, .tk-bar, .tk-flash, .btn, .dots button::before, .tip, .gl-hi::before, .qas summary::after { transition: none !important; animation: none !important; }
  .js .head .wi { transform: none !important; }
  .js .line { opacity: 1 !important; transform: none !important; }
  .js .screen .copy { opacity: 1 !important; }
  .btn.glass:hover .gl-hi::after { animation: none; }
}

/* phone: the nav goes to the foot of the screen, out of the island's way */
@media (max-width: 820px) {
  body { font-size: 17px; }
  .nav-wrap { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); }
  .nav { padding: 0 12px; }
  .nav .mark, .nav-end { height: 48px; }
  .nav .mark { padding: 0 6px; font-size: 20px; }
  .nav-link { display: none; }
  .nav-end { padding: 0 4px; }
  .dots, .tip { display: none; }
  .copy { left: 22px; right: 22px; bottom: calc(96px + 4vh); }
  .hero .copy { bottom: calc(84px + 3vh); }
  .head { font-size: clamp(34px, 9.4vw, 44px); }
  .hero .head { font-size: clamp(44px, 12.4vw, 60px); }
  .line { font-size: 17px; margin-top: 14px; }
  .hero .line { margin-top: 18px; }
  .ctas { margin-top: 22px; }
  .ctas .btn { height: 50px; padding: 0 22px; }
  .home .copy { bottom: calc(96px + 4vh); }
  .price .copy { top: 46%; }
  .price .head { font-size: clamp(44px, 12.4vw, 60px); }
  .promises { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 6px 22px; margin-top: 18px; text-align: left; }
  .promises li { font-size: 15px; }
  .promises li + li::before { content: none; }
  .faq-in { padding: 96px 34px 12px 22px; }
  .qas { grid-template-columns: 1fr; margin-top: 26px; }
  .qas details:nth-last-child(2) { border-bottom: 0; }
  .faq-in:has(.qas.fq) { padding-left: 16px; padding-right: 16px; }
  .qas.fq { margin-top: 24px; padding: 0 18px; border-radius: 22px; }
  .qas.fq details:nth-child(2) { border-top: .5px solid rgba(241, 240, 236, .12); }
  .qas summary { font-size: 17px; padding: 14px 34px 14px 0; }
  .qas .ans p { font-size: 15px; }
}

/* a hint once used leaves the row, so what stays beside it keeps its place in the middle */
.btn.hint.used { max-width: 0; padding: 0; margin-right: -12px; border-width: 0; overflow: hidden; transition: opacity .6s var(--settle), max-width .6s var(--settle), padding .6s var(--settle), margin .6s var(--settle); }

/* Messages: the reply is typed into the page's own input, laid over the island's field and mirrored into it */
.reply-input { position: fixed; z-index: 32; left: 0; top: 0; display: none; margin: 0; padding: 0 10px; border: 0; border-radius: 999px; background: transparent;
  color: transparent; caret-color: transparent; font: 16px/1 var(--tl-font); opacity: .001; outline: none; cursor: text; }
.reply-input.on { display: block; }

/* the teleprompter (TeleprompterView): 560 × 150 points, 44 under the top of the screen, at the notch's scale (--pk) */
.tp { position: absolute; left: 50%; top: calc(44px * var(--pk, 1)); width: 560px; height: 150px; z-index: 4; border-radius: 22px;
  transform: translateX(-50%) scale(var(--pk, 1)); transform-origin: 50% 0; background: rgba(0, 0, 0, .92);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  font-family: var(--tl-font); color: #fff; opacity: 0; pointer-events: none; transition: opacity .2s linear; }
.tp.on { opacity: 1; pointer-events: auto; }
/* it comes out of the notch as a drop of the notch's own black (play.js): while the drop becomes it, or gathers it
   back, it is shown whole, clipped each frame to the drop's shape, and the drop (the silk's, or the CSS one) is its
   body; the words and the buttons come out from inside once it has spread (.in), and go back in first */
.tp.clip { opacity: 1; transition: none; will-change: clip-path; }
.tp.clip, .tp.glgl:not(.cssglass) { background: transparent; box-shadow: none; }
.tp > .tp-words, .tp > .tp-tools { opacity: 0; transition: opacity .14s var(--settle); }
.tp.in > .tp-words { opacity: 1; transition: opacity .42s var(--settle) .1s; }
.tp.in > .tp-tools { opacity: 1; transition: opacity .36s var(--settle) .22s; }
/* its shadow, apart, so the clip never cuts it (the app's window shadow): it comes in as the panel spreads */
.mt-shade.tp-glass, .mt-sheen.tp-glass { left: 50%; top: calc(44px * var(--pk, 1)); width: 560px; height: 150px; border-radius: 22px;
  transform: translateX(-50%) scale(var(--pk, 1)); transform-origin: 50% 0; }
.mt-shade.tp-glass { z-index: 3; box-shadow: 0 24px 60px -10px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .3); }
.mt-sheen.tp-glass { z-index: 5; background: radial-gradient(70% 90% at 32% -12%, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 62%); }
.tp-words { position: absolute; inset: 0; padding: 0 28px; overflow: hidden; cursor: pointer; border-radius: inherit;
  -webkit-mask: linear-gradient(transparent 0, transparent 36px, #000 68px, #000 96px, transparent 138px); mask: linear-gradient(transparent 0, transparent 36px, #000 68px, #000 96px, transparent 138px); }
.tp-roll { will-change: transform; }
.tp-text { margin: 0; font: 500 22px/32px var(--tl-font); text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; color: #fff; -webkit-font-smoothing: antialiased; }
.tp.editing .tp-words { visibility: hidden; }
.tp-edit { position: absolute; left: 22px; right: 22px; top: 34px; bottom: 12px; box-sizing: border-box; padding: 4px 6px; margin: 0; border: 0; border-radius: 12px; resize: none;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); color: #fff; caret-color: #0A84FF; outline: none;
  font: 500 18px/24px var(--tl-font); text-align: center; }
.tp-tools { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 2; }
.tp-b { position: relative; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .85); transition: opacity .12s linear; }
.tp-b::after { content: ""; position: absolute; inset: -6px -3px; }
.tp-b:active { opacity: .6; }
.tp-b:focus-visible { outline: 2px solid #0A84FF; outline-offset: 2px; }
@media (max-width: 820px) { .tp-b::after { inset: -14px -6px; } }
/* reduced motion: no drop, a short fade of the whole panel */
@media (prefers-reduced-motion: reduce) { .tp > .tp-words, .tp > .tp-tools, .tp.in > .tp-words, .tp.in > .tp-tools { transition: none; } }

/* Files: AirDrop's window, as the system puts it up; drawn by the page (no Apple artwork), and nothing is sent */
.ad { position: absolute; left: 50%; top: calc(var(--adt, 230px)); z-index: 5; width: 440px; translate: -50% 0; padding: 16px 18px 20px; border-radius: 22px; color: #fff;
  font-family: var(--tl-font); background: rgba(40, 36, 58, .62); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 .5px rgba(255, 255, 255, .18), 0 30px 70px -20px rgba(0, 0, 0, .6);
  opacity: 0; scale: .94; transition: opacity .25s var(--settle), scale .45s var(--touch); }
.ad.on { opacity: 1; scale: 1; }
.ad[hidden] { display: block; visibility: hidden; pointer-events: none; }
.ad-head { display: flex; align-items: center; gap: 12px; }
.ad-thumb { width: 40px; height: 40px; border-radius: 8px; background: #fff center / cover no-repeat; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); flex: none; }
.ad-two { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ad-two b { font: 600 14px/1.2 var(--tl-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-two small { font: 400 12px/1.2 var(--tl-font); color: rgba(255, 255, 255, .62); }
.ad-done { height: 28px; padding: 0 14px; border: 0; border-radius: 999px; font: 600 13px/1 var(--tl-font); color: #fff; background: rgba(255, 255, 255, .16); cursor: pointer; }
.ad-radar { position: relative; height: 70px; margin: 10px 0 4px; display: grid; place-items: center; }
.ad-radar i { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1.5px solid rgba(10, 132, 255, .5); translate: -50% -50%; }
.ad-radar i:nth-child(1) { width: 22px; height: 22px; border-color: rgba(10, 132, 255, .85); }
.ad-radar i:nth-child(2) { width: 44px; height: 44px; border-color: rgba(10, 132, 255, .5); }
.ad-radar i:nth-child(3) { width: 66px; height: 66px; border-color: rgba(10, 132, 255, .25); }
.ad-radar b { width: 7px; height: 7px; border-radius: 50%; background: #0A84FF; }
.ad.on .ad-radar i:nth-child(3) { animation: ad-ping 2.4s cubic-bezier(.22, .61, .36, 1) infinite; }
@keyframes ad-ping { 0% { scale: .4; opacity: 0; } 20% { opacity: 1; } 100% { scale: 1.5; opacity: 0; } }
.ad-people { display: flex; justify-content: center; gap: 18px; }
.ad-p { width: 112px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border: 0; border-radius: 16px; background: transparent; color: #fff; cursor: pointer; transition: background-color .2s linear; }
.ad-p:hover, .ad-p:focus-visible { background: rgba(255, 255, 255, .1); outline: none; }
.ad-av { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.ad-av svg { position: absolute; inset: 0; width: 64px; height: 64px; rotate: -90deg; fill: none; stroke-width: 3; }
.ad-track { stroke: transparent; }
.ad-prog { stroke: #0A84FF; stroke-linecap: round; stroke-dasharray: 0 1; }
.ad-p.sending .ad-track { stroke: rgba(255, 255, 255, .2); }
.ad-ini { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font: 600 22px/1 var(--tl-font); background: linear-gradient(160deg, var(--a), var(--b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.ad-who { font: 500 12px/1.25 var(--tl-font); text-align: center; }
.ad-st { min-height: 14px; font: 500 11.5px/1.2 var(--tl-font); color: rgba(255, 255, 255, .6); }
.ad-p.sent .ad-st { color: #0A84FF; font-weight: 600; }
.ad-p:disabled { cursor: default; }
@media (max-width: 820px) { .ad { width: calc(100vw - 24px); padding: 14px 12px 16px; } .ad-people { gap: 4px; } .ad-p { width: 33%; } }
@media (prefers-reduced-motion: reduce) { .ad { transition: opacity .15s linear; scale: 1; } .ad.on .ad-radar i { animation: none; } }
.hint[hidden] { display: none; }
/* phone: the screens whose notes grow (a reply sent, a file shelved) keep their words clear of the nav */
@media (max-width: 820px) { .screen:is([data-seq="messages"], [data-seq="files"], [data-seq="prompter"], [data-seq="agents"], [data-seq="call"]) .copy { bottom: calc(150px + 4vh); } .screen[data-seq="tools"] .copy { bottom: calc(200px + 3vh); } }

/* Messages: what went, shown by the page after sending (not the island's: the app shows no thread). A small glass
   card that rises from the island, and closes back into it */
.thread { position: absolute; left: 50%; top: var(--tht, 190px); z-index: 4; width: 380px; padding: 12px 14px 12px; border-radius: 22px; color: #f1f0ec;
  font-family: var(--font); background: rgba(10, 40, 28, .34); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 .5px rgba(255, 255, 255, .2), 0 24px 50px -24px rgba(0, 0, 0, .6);
  transform-origin: 50% calc(-1 * var(--tht, 190px) + 40px); translate: -50% 0; opacity: 0; scale: .18 .1;
  transition: opacity .3s var(--settle), scale .7s var(--spring, var(--settle)); }
.thread.on { opacity: 1; scale: 1; }
.thread.gone { transition: opacity .38s var(--settle) .08s, scale .48s cubic-bezier(.5, 0, .75, .2); }
.thread[hidden] { display: none; }
.th-head { display: flex; align-items: center; justify-content: space-between; font: 600 13px/1 var(--font); color: rgba(241, 240, 236, .72); letter-spacing: .01em; padding: 2px 2px 10px; }
.th-x { width: 24px; height: 24px; border: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; color: #f1f0ec; background: rgba(255, 255, 255, .14); cursor: pointer; }
.th-x:focus-visible { outline: 2px solid #f1f0ec; outline-offset: 2px; }
.th-list { display: flex; flex-direction: column; gap: 6px; }
.th-b { margin: 0; max-width: 78%; padding: 8px 13px; border-radius: 18px; font: 500 15px/1.3 var(--font); overflow-wrap: anywhere;
  opacity: 0; translate: 0 6px; transition: opacity .35s var(--settle), translate .55s var(--settle); }
.th-b.on { opacity: 1; translate: 0 0; }
.th-b.in { align-self: flex-start; border-bottom-left-radius: 6px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.th-b.out { align-self: flex-end; border-bottom-right-radius: 6px; color: #07251a; background: rgba(170, 236, 200, .82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.th-note { display: block; margin-top: 10px; text-align: center; font: 500 12px/1 var(--font); color: rgba(241, 240, 236, .6); }
@media (max-width: 820px) { .thread { width: calc(100vw - 40px); } }
@media (prefers-reduced-motion: reduce) { .thread, .thread.gone, .th-b { transition: opacity .15s linear; scale: 1; translate: -50% 0; } .th-b { translate: 0 0; } }


/* Tools: text capture, the clipboard and translation, one at a time, on the page's own smoked glass (the app's own
   island and HUD card show what the app shows). The stage sits between the island and the words (--tkt, --tkh) */
.tk { position: absolute; left: 50%; top: var(--tkt, 140px); height: var(--tkh, 420px); width: min(680px, calc(100vw - 32px)); translate: -50% 0; z-index: 4;
  font-family: var(--font); color: #f4f1f2; }
.tk-scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  opacity: 0; visibility: hidden; translate: 0 18px; scale: .985; filter: blur(6px);
  transition: opacity .45s var(--settle), translate .9s var(--morph), scale .9s var(--morph), filter .45s var(--settle), visibility 0s linear .45s; }
.tk-scene.on { opacity: 1; visibility: visible; translate: 0 0; scale: 1; filter: none; transition: opacity .6s var(--settle) .12s, translate 1s var(--morph) .12s, scale 1s var(--morph) .12s, filter .5s var(--settle) .12s, visibility 0s; }
.tk-pane { position: relative; border-radius: 22px; background: rgba(40, 24, 32, .38); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 0 0 .5px rgba(255, 255, 255, .22), 0 30px 60px -30px rgba(40, 14, 26, .55), 0 8px 20px -14px rgba(40, 14, 26, .4); }
/* capture: a picture of a slide (pixels, not text), and the picker over it, as the app's (RegionPicker): the screen
   dimmed by black at 0.25, the area drawn clear with a white line of 1.5, and "Drag to capture" until it is */
.tk-shot { width: var(--tsw, 640px); height: var(--tsh, 320px); padding: 10px; touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.tk-img { display: block; width: 100%; height: 100%; border-radius: 13px; }
.tk-pick { position: absolute; inset: 10px; border-radius: 13px; overflow: hidden; pointer-events: none; background: rgba(0, 0, 0, .25); transition: background-color .25s var(--settle); }
.tk-pick.drawing { background: transparent; }
.tk-sel { position: absolute; left: 0; top: 0; width: 0; height: 0; display: none; box-shadow: 0 0 0 1.5px #fff, 0 0 0 200vmax rgba(0, 0, 0, .25); }
.tk-pick.drawing .tk-sel, .tk-pick.taken .tk-sel { display: block; }
.tk-pick.taken { background: transparent; }
.tk-pick.taken .tk-sel { animation: tk-taken .7s var(--settle) forwards; }
@keyframes tk-taken { 0% { box-shadow: 0 0 0 1.5px #fff, 0 0 0 200vmax rgba(0, 0, 0, .25); } 100% { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0), 0 0 0 200vmax rgba(0, 0, 0, 0); } }
.tk-prompt { position: absolute; left: 50%; top: 50%; translate: -50% -50%; height: 36px; padding: 0 16px; border-radius: 18px; display: flex; align-items: center; white-space: nowrap;
  font: 500 15px/1 var(--font); color: #fff; background: rgba(0, 0, 0, .7); transition: opacity .2s var(--settle); }
.tk-pick.drawing .tk-prompt, .tk-pick.taken .tk-prompt { opacity: 0; }
.tk-flash { position: absolute; inset: 10px; border-radius: 13px; pointer-events: none; background: #fff; opacity: 0; }
.tk-flash.on { animation: tk-flash .5s var(--settle); }
@keyframes tk-flash { 0% { opacity: 0; } 12% { opacity: .35; } 100% { opacity: 0; } }
/* the clipboard: things on the page to copy, and the app's own card (HUD/Cards/ClipboardCard) */
.tk-copies { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 100%; }
.tk-c { height: 38px; max-width: 100%; padding: 0 15px; border: 0; border-radius: 19px; display: inline-flex; align-items: center; gap: 9px; cursor: copy; user-select: text; -webkit-user-select: text;
  font: 500 14px/1 var(--font); color: #2a1820; background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 .5px rgba(255, 255, 255, .6), 0 6px 16px -10px rgba(40, 14, 26, .45); transition: scale .35s var(--touch), background-color .3s var(--settle); }
.tk-c > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-c:hover { background: rgba(255, 255, 255, .62); }
.tk-c:active, .tk-c.pressed { scale: .96; }
.tk-c:focus-visible { outline: 2px solid #2a1820; outline-offset: 2px; }
.tk-code { font: 500 13px/1 ui-monospace, Menlo, Consolas, monospace; }
.tk-sw { width: 16px; height: 16px; border-radius: 5px; background: #FF4F00; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .15); }
.tk-card { width: var(--tcw, 560px); }
.tk-card .tl-fit { position: relative; width: 100%; aspect-ratio: var(--cw, 444) / 168; border-radius: calc(22px * var(--k, 1)); box-shadow: 0 30px 50px -26px rgba(40, 14, 26, .55), 0 0 0 .5px rgba(11, 11, 12, .14); }
.tk-card .tl-clipboard { width: calc(var(--cw, 444) * 1px); }
.tk-card .tl-clipboard-remote { display: none; }
.tk-card .tl-clipboard-prose > span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-card .tl-clipboard-empty { position: absolute; inset: 0; display: grid; place-items: center; font: 500 12px/1 var(--tl-font); color: var(--tl-secondary); }
.tk-card .tl-clipboard-slot.tl-new .tl-clipboard-item { animation: tk-tile .3s var(--tl-settle, ease) both; }
@keyframes tk-tile { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
/* translate: a few lines in other languages; the selection snaps to whole sentences, and the app's text bar
   (SelectionWatcher's SelectionBar: a black capsule at 0.9, a line of white at 0.12, 36 high, 36 by 30 a button) */
.tk-letter { width: var(--tlw, 560px); padding: 18px 22px 20px; }
.tk-from { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 600 14px/1.2 var(--font); }
.tk-from small { margin-left: auto; font: 500 12px/1 var(--font); color: rgba(244, 241, 242, .62); }
.tk-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 650 11px/1 var(--font); color: #fff; background: linear-gradient(#D88A6C, #7A3E2A); }
.tk-l { margin: 0; padding: 7px 12px; border-radius: 14px; font: 500 17px/1.4 var(--font); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .14); }
.tk-l + .tk-l { margin-top: 8px; }
.tk-s { cursor: text; }
.tk-s::selection, .tk-s ::selection { background: rgba(10, 132, 255, .55); color: #fff; }
.tk-bar { position: fixed; left: 0; top: 0; z-index: 20; height: 36px; padding: 0 4px; display: flex; align-items: center; justify-content: center; gap: 2px; border-radius: 18px;
  background: rgba(0, 0, 0, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 8px 24px -8px rgba(0, 0, 0, .5); opacity: 0; scale: .96; transition: opacity .12s linear, scale .2s var(--touch); }
.tk-bar.on { opacity: 1; scale: 1; }
.tk-bar[hidden] { display: none; }
.tk-b { width: 36px; height: 30px; border: 0; padding: 0; border-radius: 8px; display: grid; place-items: center; background: transparent; cursor: pointer; transition: scale .18s var(--touch), opacity .18s linear; }
.tk-b svg { display: block; }
.tk-b:hover { background: rgba(255, 255, 255, .1); }
.tk-b:active, .tk-b.pressed { scale: .86; opacity: .6; }
.tk-b:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.tk-ghost { position: fixed; z-index: 21; }
@media (max-width: 820px) {
  .tools .hint { padding-inline: 13px; }
  .tk-l { font-size: 15px; }
  .tk-c { height: 34px; font-size: 13px; padding: 0 12px; }
  .tk-code { font-size: 12px; }
  .tk-letter { padding: 14px 14px 16px; }
}
@media (prefers-reduced-motion: reduce) { .tk-pick.taken .tk-sel, .tk-flash.on, .tk-card .tl-clipboard-slot.tl-new .tl-clipboard-item { animation: none; } }

/* While a screen shows its feature by itself: a small capsule of glass by the pointer (below and to its right), a
   ring filling over what is left of the showing, "Showing you"; then "Your turn", and it goes (site.js, stepCue) */
.demo-cue { position: fixed; left: 0; top: 0; z-index: 70; height: 26px; padding: 0 11px 0 7px; display: flex; align-items: center; gap: 7px; border-radius: 13px; pointer-events: none;
  font: 600 12px/1 var(--font); letter-spacing: .01em; white-space: nowrap; color: var(--g-ink); background: var(--g-body);
  -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 1px 0 var(--g-rim), inset 0 0 0 .5px var(--g-rim2), var(--g-shadow); text-shadow: var(--g-text-shadow);
  opacity: 0; scale: .92; transition: opacity .35s var(--settle), scale .5s var(--touch); will-change: transform; }
.demo-cue.on { opacity: 1; scale: 1; }
.demo-cue .dc-ring { flex: none; overflow: visible; }
.demo-cue .dc-track { fill: none; stroke: currentColor; stroke-opacity: .22; stroke-width: 2; }
.demo-cue .dc-fill { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0 1; transition: stroke .3s var(--settle); }
.demo-cue.done .dc-fill { stroke: #30D158; }
.demo-cue .dc-word { transition: opacity .2s linear; }
html[data-tone="dark"] .demo-cue { --g-ink: #0B0B0C; --g-body: rgba(255, 255, 255, .5); --g-rim: rgba(255, 255, 255, .9); --g-rim2: rgba(11, 11, 12, .1);
  --g-shadow: 0 8px 22px -12px rgba(11, 11, 12, .35); --g-text-shadow: none; }
html:not([data-tone="dark"]) .demo-cue { --g-body: rgba(30, 30, 34, .34); }
.demo-cue:not(.done) { padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .3)); }
.demo-cue .dc-word:empty { display: none; }
@media (pointer: coarse), (max-width: 820px) { .demo-cue { height: 24px; } }
@media (prefers-reduced-motion: reduce) { .demo-cue { transition: opacity .15s linear; scale: 1; } .demo-cue .dc-fill { transition: none; } }

/* While a showing plays, the screen is its: nothing on it takes the pointer (no hover, no press), nor do the island's
   own buttons; the nav, the dots, and the player's buttons once the visitor has music playing, still do */
/* named, not "*": a class on the root that matched everything would restyle the whole page as a showing starts */
html.demo-lock .screen.live button, html.demo-lock .screen.live a, html.demo-lock .screen.live input, html.demo-lock .screen.live textarea,
html.demo-lock .screen.live summary, html.demo-lock .screen.live canvas, html.demo-lock .tk-shot, html.demo-lock .tk-letter, html.demo-lock .meet,
html.demo-lock .cf, html.demo-lock .tp, html.demo-lock .aring, html.demo-lock .fill-hit:not(.mini-hit), html.demo-lock .tk-bar, html.demo-lock .reply-input,
html.demo-lock .isle-fixed .tl-fit { pointer-events: none !important; }
html.demo-lock:not(.music-on) .mini-hit { pointer-events: none !important; }
html.demo-lock.music-on .screen.live [data-hint="sound"] { pointer-events: auto !important; }
html.demo-lock .screen.live { cursor: default; }
/* a click while it plays: the capsule only brightens for a moment, in place (it must not move under the pointer) */
.demo-cue.pulse { animation: dc-pulse .5s var(--settle); }
@keyframes dc-pulse { 0% { filter: none; } 30% { filter: brightness(1.35); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { .demo-cue.pulse { animation: none; } }

/* The last screen: the questions and the footer together. The home page's footer is laid out wide rather than tall,
   at the footer's own sizes: the wordmark on one line with its way in, Features and Tilora in two columns each, so
   on a usual window the whole of it fits and there is nothing below to scroll to. On a shorter one it runs on below
   (site.js stops a flick up at the questions before it pages on). */
@media (min-width: 821px) {
  /* the pane's top stays about 200 px down: the drop needs that far to fall from the notch before it lands */
  .faq-in { flex: 1 1 auto; padding-top: 110px; padding-bottom: 0; }
  .faq .head { font-size: clamp(44px, 6.2vh, 60px); }
  .faq .qas { margin-top: 30px; }
  .faq .qas summary { padding-top: 17px; padding-bottom: 17px; }
  html .faq .site-foot { flex: none; margin-top: 16px; }
  .faq .sf-in { max-width: 1368px; padding-top: 20px; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .faq .sf-top { grid-template-columns: auto 1fr auto; align-items: end; padding-bottom: 26px; }
  .faq .site-foot .sf-mark { grid-column: auto; font-size: clamp(64px, 6vw, 88px); }
  .faq .sf-say { padding-bottom: .35em; }
  .faq .sf-get { padding-bottom: 6px; }
  .faq .sf-cols { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 24px; padding: 22px 0 20px; }
  .faq .sf-cols > div:first-child, .faq .sf-cols > div:last-child { grid-column: span 2; }
  .faq .sf-cols > div:first-child ul, .faq .sf-cols > div:last-child ul { columns: 2; column-gap: 24px; }
  .faq .sf-cols li { margin-bottom: 7px; break-inside: avoid; }
}


/* the way on, on the first screen only, once (site.js): a chevron at the foot that breathes downwards, in the glass ink */
.scroll-cue { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 4; width: 44px; height: 44px; margin-left: -22px; padding: 0; border: 0; background: none;
  color: var(--g-ink, #fff); display: grid; place-items: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .9s var(--settle); }
.scroll-cue.on { opacity: .62; pointer-events: auto; }
.scroll-cue.on:hover { opacity: .9; }
.scroll-cue svg { animation: cue-breathe 2.6s var(--settle) infinite; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .25)); }
@keyframes cue-breathe { 0%, 100% { transform: translate3d(0, -3px, 0); opacity: .55; } 50% { transform: translate3d(0, 5px, 0); opacity: 1; } }
.scroll-cue:focus-visible { outline: 2px solid var(--g-ink, #fff); outline-offset: 2px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } }
/* Increase contrast (macOS: Accessibility › Display): the words at full ink over the silk, the glass's greys too */
@media (prefers-contrast: more) {
  :root, html[data-tone="dark"] .nav-wrap, html[data-tone="dark"] .dots, html[data-tone="dark"] .tip { --g-sub: var(--g-ink); }
  .screen[data-tone="light"] .line, .screen[data-tone="light"].hero .line, .qas summary, .promises li { color: var(--paper); }
  .screen[data-tone="dark"] .line { color: var(--ink); }
}
/* a phone is swiped by nature, and its foot is the nav's: no chevron there */
@media (max-width: 820px) { .scroll-cue { display: none; } }