/* ============================================================================
   Seaglass — landing page, the drag-to-the-edge demo, privacy and support.

   The phone in the hero is Seaglass's own UI rebuilt in HTML: the library
   grid, a piece's screen and the edge sidebar, at the app's dp sizes (1 dp is
   a 411th of the screen, a Pixel's width) and in Seafoam, its brand scheme, as
   SeedScheme.kt generates it. Sizes and colours were read off the app's own
   renders (Seaglass's ScreenshotTest technique), so the demo and the
   screenshots below it match.
============================================================================ */

/* Seafoam: the page's brand pair and accent follow the app, not the site.
   The pair is Seafoam's primary (tone 40) into the icon's deep-sea blue, so
   white text on a button keeps 4.5:1 across the whole gradient. */
.seaglass {
  --brand-a: #006a60;
  --brand-b: #1f7a94;
  --brand-glow: #57dbc9;
  --brand-gradient: linear-gradient(135deg, #006a60, #1f7a94);
  --accent: light-dark(#006a60, #57dbc9);
}

.logo-mark.seaglass-mark { border-radius: 8px; }
.site-head .logo-mark.seaglass-mark,
.app-title img.seaglass-mark { view-transition-name: seaglass-mark; }

/* ----------------------------------------------------------------------------
   Hero: the copy, the pieces to drag, the phone and the filing log
---------------------------------------------------------------------------- */
.k-hero {
  position: relative;
  overflow-x: clip;
  padding-block: var(--space-6) var(--space-16);
}

.k-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "intro"
    "tray"
    "phone"
    "log";
  gap: var(--space-6);
}
.k-intro { grid-area: intro; }
.k-tray { grid-area: tray; }
.k-phone { grid-area: phone; }
.k-log { grid-area: log; }

.k-intro h1 {
  font-size: var(--text-5xl);
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.k-intro h1 .hl {
  background: linear-gradient(100deg, light-dark(#006a60, #57dbc9), light-dark(#1f7a94, #9cefe2) 60%, light-dark(#156684, #8ecff2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.k-intro .lede { margin: var(--space-5) 0 0; line-height: 1.55; }
.k-intro .btn-row { margin-top: var(--space-7); }

@media (max-width: 420px) {
  .k-intro .lede-more,
  .k-intro .btn-ghost { display: none; }
}

@media (min-width: 760px) {
  .k-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "intro intro"
      "tray  phone"
      "log   phone";
    column-gap: var(--space-10);
    align-items: start;
  }
}

@media (min-width: 1100px) {
  .k-hero { padding-top: var(--space-10); }
  .k-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "intro phone"
      "tray  phone"
      "log   phone";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--space-16);
  }
  .k-intro { padding-top: var(--space-4); }
  .k-intro h1 { font-size: clamp(2.6rem, 4.4vw, 4rem); }
}

/* ----------------------------------------------------------------------------
   The pieces to drag. Each is drawn like it sits in another app: a photo in a
   gallery, a link, a message bubble, a file. A long press (touch) or a drag
   (mouse) picks one up; a tap or Enter saves it straight away.
---------------------------------------------------------------------------- */
.tray-head {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--muted);
}
.tray-head strong { color: var(--text); font-weight: 600; }

.samples {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.sample {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  height: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--text-xs);
  text-align: left;
  cursor: grab;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-slow) var(--ease),
    translate var(--dur-spring) var(--ease-spring), scale var(--dur-spring) var(--ease-spring),
    opacity var(--dur-base) var(--ease);
}
.sample:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lift); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sample:hover { translate: 0 -2px; }
}
.sample:active { cursor: grabbing; }
.sample.is-lifted { scale: 1.03; box-shadow: var(--shadow-lift); }
.sample.is-away { opacity: 0.35; }
.sample.is-saved::after {
  content: "Saved";
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-size: var(--text-2xs);
  font-weight: 600;
}

.s-from {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--faint);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* The made-up apps' icons, as in the screenshots: a rounded square in the
   app's colour with a white dot */
.app-dot {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--app);
}
.app-dot::after {
  content: "";
  position: absolute;
  inset: 29%;
  border-radius: 50%;
  background: #fff;
}

.s-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.s-name { color: var(--muted); }

.s-url {
  color: var(--accent);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.s-title { font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }
.s-link::before {
  content: "";
  display: block;
  order: 1;
  height: 52px;
  border-radius: var(--radius-sm);
  background: url(img/samples/ramen.svg) center / cover;
}

.s-bubble {
  padding: var(--space-2) var(--space-3);
  border-radius: 16px 16px 16px 4px;
  background: light-dark(#d9f5e6, #1d3a2c);
  color: var(--text);
  line-height: 1.4;
}

.s-doc {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
}
.s-pdf {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 50px;
  border-radius: 6px;
  background: light-dark(#fde7e4, #43201c);
  color: light-dark(#b3261e, #ffb4ab);
  font-size: var(--text-2xs);
  font-weight: 700;
}
.s-doc > span:last-child { min-width: 0; }
.s-fname { display: block; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.s-size { display: block; color: var(--muted); }

.tray-own {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: var(--space-3) 0 0;
  color: var(--faint);
  font-size: var(--text-xs);
  line-height: 1.45;
}
.tray-own .icon { margin-top: 2px; }
/* Touch screens can't drag a file in from elsewhere */
@media (hover: none) { .tray-own { display: none; } }

/* Phones: the pieces in one row right above the phone, small enough to fit */
@media (max-width: 759px) {
  .k-tray { margin-inline: calc(-1 * var(--gutter)); }
  .tray-head,
  .tray-own { padding-inline: var(--gutter); }
  .samples {
    display: flex;
    gap: var(--space-2);
    padding: 2px var(--gutter) var(--space-1);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .samples::-webkit-scrollbar { display: none; }
  .samples li { flex: none; width: 148px; scroll-snap-align: start; }
  .sample { padding: var(--space-2) var(--space-3); gap: 6px; }
  .s-photo img { aspect-ratio: 16 / 9; }
  .s-name { display: none; }
  .s-link::before { height: 30px; }
  .s-url { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; }
  .s-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--text-xs);
  }
  .s-fname { font-size: var(--text-2xs); }
  .s-bubble { font-size: var(--text-2xs); }
  .s-bubble > span {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (min-width: 1100px) {
  .samples { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
  .sample { padding: var(--space-2) var(--space-3) var(--space-3); gap: 6px; }
  .s-photo img { aspect-ratio: 16 / 10; }
  .s-name { display: none; }
  .s-link::before { height: 36px; }
  .s-url { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; }
  .s-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--text-xs);
  }
  .s-bubble { font-size: var(--text-xs); }
  .s-bubble > span {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .s-pdf { width: 32px; height: 40px; }
}

/* The piece being dragged: the drag shadow, as Android draws one */
.drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  width: 132px;
  pointer-events: none;
  border-radius: 12px;
  box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(0 0 0 / 0.06);
  opacity: 0.92;
  will-change: transform, opacity;
}
.drag-ghost img { display: block; width: 100%; border-radius: 12px; }
.drag-ghost .g-text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 10px 12px;
  border-radius: 12px;
  background: light-dark(#ffffff, #2a2a2e);
  color: var(--text);
  font: 400 12px/1.35 Roboto, system-ui, sans-serif;
}

/* ----------------------------------------------------------------------------
   The phone
---------------------------------------------------------------------------- */
.k-phone {
  position: relative;
  justify-self: center;
  isolation: isolate;
}

/* Glow and dot grid behind the phone */
.k-phone::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(170%, 680px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, light-dark(#77f7e6, #005048) 70%, transparent), transparent 70%);
  z-index: -2;
  pointer-events: none;
}
.k-phone::after {
  content: "";
  position: absolute;
  inset: -6% -40%;
  background-image: radial-gradient(circle at 1px 1px, light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.09)) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent);
  mask-image: radial-gradient(closest-side, #000 30%, transparent);
  z-index: -3;
  pointer-events: none;
}
.phone {
  --pw: min(340px, 76vw, calc((100svh - var(--header-h) - 32px) * 0.46));
  position: relative;
  width: var(--pw);
  padding: 9px;
  /* The screen's corner is 36 dp of its 411, as on a phone, so the status
     bar clears the curve at any size; the frame's is that plus the bezel */
  border-radius: calc((var(--pw) - 18px) * 36 / 411 + 9px);
  background: #1a1b1f;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09), 0 40px 80px -36px rgb(0 0 0 / 0.65),
    0 18px 30px -18px rgb(0 0 0 / 0.4);
}
@media (max-width: 759px) {
  .phone { --pw: min(300px, 74vw, calc((100svh - var(--header-h) - 150px) * 0.46)); }
}

/* Seafoam, light and dark, as SeedScheme.kt grows it (tones 40/90/98…) */
.screen {
  --primary: light-dark(#006a60, #57dbc9);
  --on-primary: light-dark(#ffffff, #003731);
  --primary-container: light-dark(#77f7e6, #005048);
  --on-primary-container: light-dark(#00201c, #77f7e6);
  --secondary-container: light-dark(#c5eae3, #2c4d47);
  --on-secondary-container: light-dark(#00201c, #c5eae3);
  --tertiary-container: light-dark(#c1e8ff, #004d66);
  --on-tertiary-container: light-dark(#001e2b, #c1e8ff);
  --surface: light-dark(#f1fcfa, #0b1514);
  --on-surface: light-dark(#151d1c, #dae5e3);
  --on-surface-variant: light-dark(#384a47, #b6cbc7);
  --outline: light-dark(#677b77, #819591);
  --outline-variant: light-dark(#b6cbc7, #384a47);
  --sc-low: light-dark(#ebf6f4, #151d1c);
  --sc: light-dark(#e5f0ee, #192120);
  --sc-high: light-dark(#e0eae8, #232c2a);
  --sc-highest: light-dark(#dae5e3, #2e3635);
  --surface-bright: light-dark(#f1fcfa, #323b39);
  --dp: calc(100cqw / 411);

  position: relative;
  width: 100%;
  aspect-ratio: 411 / 891;
  overflow: hidden;
  border-radius: calc((var(--pw) - 18px) * 36 / 411);
  background: var(--surface);
  color: var(--on-surface);
  container-type: inline-size;
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: normal;
  letter-spacing: 0;
  text-wrap: wrap;
  user-select: none;
  -webkit-user-select: none;
}
.screen svg { display: block; fill: currentColor; }
.screen p { margin: 0; }
.screen button { font: inherit; color: inherit; }

/* Status bar, as Android 16 draws it over the app: the time, the camera,
   then signal, wifi and the pill battery. The renders below carry the same
   one, drawn by the screenshot test. */
.sb {
  position: absolute;
  inset: 0 0 auto;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(32 * var(--dp));
  padding: 0 calc(20 * var(--dp)) 0 calc(22 * var(--dp));
  font-size: calc(14 * var(--dp));
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transition: color var(--dur-base) var(--ease);
}
.punch {
  position: absolute;
  left: 50%;
  top: calc(9 * var(--dp));
  width: calc(14 * var(--dp));
  height: calc(14 * var(--dp));
  margin-left: calc(-7 * var(--dp));
  border-radius: 50%;
  background: #000;
}
.sb-icons { display: flex; align-items: center; gap: calc(6 * var(--dp)); }
.sb-icons svg { width: calc(15 * var(--dp)); height: calc(15 * var(--dp)); }
.sb-icons .sb-signal { height: calc(12 * var(--dp)); }
.sb-icons .sb-battery { width: calc(24 * var(--dp)); height: calc(12 * var(--dp)); }
.screen.on-hero .sb { color: #fff; }

.navbar {
  position: absolute;
  left: 50%;
  bottom: calc(8 * var(--dp));
  z-index: 6;
  width: calc(108 * var(--dp));
  height: calc(4 * var(--dp));
  margin-left: calc(-54 * var(--dp));
  border-radius: 99px;
  background: var(--on-surface);
  opacity: 0.55;
  pointer-events: none;
}

.view {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.view::-webkit-scrollbar { display: none; }
.view[hidden] { display: none; }

/* ----------------------------------------------------------------------------
   Library: AppBarWithSearch, the kind chips and the staggered grid
---------------------------------------------------------------------------- */
.lib { padding-top: calc(32 * var(--dp)); }

.lib-bar {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--dp));
  padding: calc(4 * var(--dp)) calc(8 * var(--dp)) 0;
}
.search {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--dp));
  flex: 1;
  min-width: 0;
  height: calc(56 * var(--dp));
  padding: 0 calc(16 * var(--dp));
  border-radius: 999px;
  background: var(--sc-high);
  color: var(--on-surface-variant);
  cursor: text;
}
.search svg { flex: none; width: calc(24 * var(--dp)); height: calc(24 * var(--dp)); color: var(--on-surface); }
.search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--on-surface);
  font: 400 calc(16 * var(--dp)) / 1 Roboto, system-ui, sans-serif;
  -webkit-appearance: none;
  appearance: none;
}
.search input::placeholder { color: var(--on-surface-variant); opacity: 1; }
.search input::-webkit-search-cancel-button { display: none; }
.search:focus-within { outline: 2px solid var(--primary); outline-offset: -2px; }
.bar-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(48 * var(--dp));
  height: calc(48 * var(--dp));
  color: var(--on-surface-variant);
}
.bar-icon svg { width: calc(24 * var(--dp)); height: calc(24 * var(--dp)); }

.chips {
  display: flex;
  gap: calc(8 * var(--dp));
  padding: calc(16 * var(--dp)) calc(16 * var(--dp)) calc(4 * var(--dp));
  overflow-x: auto;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip-k {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--dp));
  flex: none;
  height: calc(32 * var(--dp));
  padding: 0 calc(16 * var(--dp)) 0 calc(8 * var(--dp));
  border: calc(1 * var(--dp)) solid var(--outline-variant);
  border-radius: calc(8 * var(--dp));
  background: transparent;
  color: var(--on-surface-variant);
  font-size: calc(14 * var(--dp)) !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
.chip-k svg { width: calc(18 * var(--dp)); height: calc(18 * var(--dp)); color: var(--primary); }
.chip-k[aria-pressed="true"] {
  border-color: transparent;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}
.chip-k[aria-pressed="true"] svg { color: var(--on-secondary-container); }

.grid {
  position: relative;
  display: flex;
  gap: calc(12 * var(--dp));
  align-items: flex-start;
  padding: calc(16 * var(--dp)) calc(16 * var(--dp)) calc(40 * var(--dp));
}
.lane { display: flex; flex-direction: column; gap: calc(12 * var(--dp)); flex: 1; min-width: 0; }

.empty {
  display: grid;
  justify-items: center;
  gap: calc(8 * var(--dp));
  padding: calc(160 * var(--dp)) calc(40 * var(--dp)) 0;
  text-align: center;
  color: var(--on-surface-variant);
  font-size: calc(14 * var(--dp));
}
.empty[hidden] { display: none; }
.empty strong { color: var(--on-surface); font-size: calc(22 * var(--dp)); font-weight: 400; }
.nomatch { padding: calc(48 * var(--dp)) 0; text-align: center; color: var(--on-surface-variant); font-size: calc(14 * var(--dp)); }
.nomatch[hidden] { display: none; }

/* A card: 12 dp corners on surfaceContainerHighest; the picture flush at the
   top, the words, then the footer band in the source app's colour */
.kcard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(12 * var(--dp));
  background: var(--sc-highest);
  color: var(--on-surface);
  cursor: pointer;
  transition: scale var(--dur-spring) var(--ease-spring);
}
.kcard:active { scale: 0.97; }
.kcard.is-new { animation: card-in var(--dur-slower) var(--ease) both; }
@keyframes card-in {
  from { opacity: 0; scale: 0.86; }
  to { opacity: 1; scale: 1; }
}
.kcard .pic { position: relative; overflow: hidden; background: var(--sc-high); }
.kcard .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kcard .pic.wait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.25) 50%, transparent 70%) 0 0 / 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.kcard .txt {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--dp));
  padding: calc(14 * var(--dp)) calc(16 * var(--dp)) calc(14 * var(--dp));
}
.kcard .txt:empty { display: none; }
.kcard .headline {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: calc(14 * var(--dp));
  font-weight: 500;
  line-height: calc(20 * var(--dp));
  letter-spacing: calc(0.1 * var(--dp));
  overflow-wrap: anywhere;
}
.kcard .body {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: calc(14 * var(--dp));
  line-height: calc(20 * var(--dp));
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.kcard .supp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--on-surface-variant);
  font-size: calc(12 * var(--dp));
  line-height: calc(16 * var(--dp));
  letter-spacing: calc(0.4 * var(--dp));
  overflow-wrap: anywhere;
}
.kcard .snippet {
  overflow: hidden;
  max-height: calc(6 * 16 * var(--dp) + 16 * var(--dp));
  padding: calc(8 * var(--dp));
  border-radius: calc(8 * var(--dp));
  background: var(--sc-high);
  color: var(--on-surface-variant);
  font: 400 calc(11 * var(--dp)) / calc(16 * var(--dp)) "Roboto Mono", ui-monospace, monospace;
  white-space: pre;
}
.kcard .tile-ico {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: var(--sc-high);
  color: var(--on-surface-variant);
}
.kcard .tile-ico svg { width: calc(40 * var(--dp)); height: calc(40 * var(--dp)); }
.kcard .play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: calc(36 * var(--dp));
  height: calc(36 * var(--dp));
  translate: -50% -50%;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.5);
  color: #fff;
}
.kcard .play::before {
  content: "";
  margin-left: 12%;
  border-left: calc(11 * var(--dp)) solid currentColor;
  border-block: calc(7 * var(--dp)) solid transparent;
}

.band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--dp));
  min-height: calc(32 * var(--dp));
  padding: calc(8 * var(--dp)) calc(16 * var(--dp));
  background: var(--band, transparent);
  color: var(--on-band, var(--on-surface-variant));
  font-size: calc(11 * var(--dp));
  font-weight: 500;
  line-height: calc(16 * var(--dp));
  letter-spacing: calc(0.5 * var(--dp));
  transition: background-color var(--dur-slower) var(--ease);
}
.band .kw,
.band .when { display: flex; align-items: center; gap: calc(6 * var(--dp)); min-width: 0; white-space: nowrap; }
.band .kw span { overflow: hidden; text-overflow: ellipsis; }
.band svg { flex: none; width: calc(14 * var(--dp)); height: calc(14 * var(--dp)); }
.band .app-dot { width: calc(14 * var(--dp)); height: calc(14 * var(--dp)); border-radius: calc(4 * var(--dp)); }

/* Material 3 Expressive's LoadingIndicator, small: a shape that turns and
   morphs, here a rounded square turning into a circle and back */
.loading {
  flex: none;
  width: calc(14 * var(--dp));
  height: calc(14 * var(--dp));
  background: currentColor;
  animation: morph 1.1s var(--ease) infinite;
}
@keyframes morph {
  0% { border-radius: 30%; rotate: 0deg; scale: 0.9; }
  50% { border-radius: 50% 20% 50% 20%; rotate: 140deg; scale: 0.75; }
  100% { border-radius: 30%; rotate: 360deg; scale: 0.9; }
}

/* ----------------------------------------------------------------------------
   A piece's screen: the picture (or a top bar), the title and where it came
   from, then two groups of bright tiles on a dimmer page
---------------------------------------------------------------------------- */
.det { background: var(--sc); }
.det-in { padding-bottom: calc(110 * var(--dp)); }
.det.is-entering { animation: det-in var(--dur-slow) var(--ease) both; }
@keyframes det-in {
  from { opacity: 0; translate: 0 calc(24 * var(--dp)); }
}

.hero {
  position: relative;
  overflow: hidden;
  background: #131b1a;
}
/* A scrim under the status bar, so its white icons read over any picture */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: calc(56 * var(--dp));
  background: linear-gradient(rgb(0 0 0 / 0.38), transparent);
  pointer-events: none;
}
.hero img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-slow) var(--ease); }
.hero.wait img { opacity: 0; }
.det-top { height: calc(32 * var(--dp) + 56 * var(--dp)); }

.back {
  position: absolute;
  left: calc(12 * var(--dp));
  top: calc(36 * var(--dp));
  z-index: 3;
  display: grid;
  place-items: center;
  width: calc(40 * var(--dp));
  height: calc(40 * var(--dp));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  cursor: pointer;
}
.back.plain { background: transparent; color: var(--on-surface); }
.back svg { width: calc(24 * var(--dp)); height: calc(24 * var(--dp)); }

.d-title {
  margin: 0;
  padding: calc(16 * var(--dp)) calc(16 * var(--dp)) 0;
  font-size: calc(22 * var(--dp));
  font-weight: 400;
  line-height: calc(28 * var(--dp));
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.d-src {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--dp));
  padding: calc(6 * var(--dp)) calc(16 * var(--dp)) 0;
  color: var(--on-surface-variant);
  font-size: calc(14 * var(--dp));
  line-height: calc(20 * var(--dp));
}
.d-src .app-dot { width: calc(16 * var(--dp)); height: calc(16 * var(--dp)); border-radius: calc(4 * var(--dp)); }

.group {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--dp));
  margin: calc(16 * var(--dp)) calc(16 * var(--dp)) 0;
}
.group + .group { margin-top: calc(24 * var(--dp)); }
.tile {
  padding: calc(16 * var(--dp));
  border-radius: calc(4 * var(--dp));
  background: var(--surface-bright);
  font-size: calc(14 * var(--dp));
  line-height: calc(20 * var(--dp));
  overflow-wrap: anywhere;
}
.group > .tile:first-child { border-top-left-radius: calc(20 * var(--dp)); border-top-right-radius: calc(20 * var(--dp)); }
.group > .tile:last-child { border-bottom-left-radius: calc(20 * var(--dp)); border-bottom-right-radius: calc(20 * var(--dp)); }
.tile.words { color: var(--on-surface); font-size: calc(16 * var(--dp)); line-height: calc(24 * var(--dp)); white-space: pre-line; }
.tile.blurb { color: var(--on-surface-variant); }
.tile.snip { font: 400 calc(12 * var(--dp)) / calc(18 * var(--dp)) "Roboto Mono", ui-monospace, monospace; color: var(--on-surface-variant); white-space: pre-wrap; }
.tile mark {
  background: none;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.row {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--dp));
}
.row .lead {
  display: grid;
  place-items: center;
  flex: none;
  align-self: flex-start;
  width: calc(40 * var(--dp));
  height: calc(40 * var(--dp));
  border-radius: 50%;
  background: var(--sc-high);
  color: var(--on-surface-variant);
}
.row .lead svg { width: calc(24 * var(--dp)); height: calc(24 * var(--dp)); }
.row .mid { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.row .over { color: var(--on-surface-variant); font-size: calc(11 * var(--dp)); line-height: calc(16 * var(--dp)); letter-spacing: calc(0.5 * var(--dp)); font-weight: 500; }
.row .main { font-size: calc(16 * var(--dp)); line-height: calc(24 * var(--dp)); }
.row .sub {
  color: var(--on-surface-variant);
  font-size: calc(14 * var(--dp));
  line-height: calc(20 * var(--dp));
  overflow: hidden;
  text-overflow: ellipsis;
}
.row .addr { white-space: nowrap; }
.row .trail { flex: none; width: calc(24 * var(--dp)); height: calc(24 * var(--dp)); color: var(--on-surface-variant); }
.row.ktile .trail { align-self: flex-start; }
.row.ktile .lead.busy { color: var(--primary); }
.row.ktile .lead.busy svg { display: none; }
.row.ktile .lead.busy::after {
  content: "";
  width: calc(20 * var(--dp));
  height: calc(20 * var(--dp));
  background: currentColor;
  animation: morph 1.1s var(--ease) infinite;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--dp));
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--dp));
  height: calc(32 * var(--dp));
  padding: 0 calc(8 * var(--dp)) 0 calc(12 * var(--dp));
  border: calc(1 * var(--dp)) solid var(--outline-variant);
  border-radius: calc(8 * var(--dp));
  color: var(--on-surface-variant);
  font-size: calc(14 * var(--dp));
  font-weight: 500;
  white-space: nowrap;
}
.tag svg { width: calc(18 * var(--dp)); height: calc(18 * var(--dp)); }
.tag.add { padding: 0 calc(16 * var(--dp)) 0 calc(8 * var(--dp)); color: var(--on-surface-variant); }
.tag.add svg { color: var(--primary); }
.tag.pop { animation: pop var(--dur-spring) var(--ease-spring) both; }
@keyframes pop { from { opacity: 0; scale: 0.6; } }

.fabbar {
  position: absolute;
  right: calc(16 * var(--dp));
  bottom: calc(28 * var(--dp));
  z-index: 4;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--dp));
}
.toolbar {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--dp));
  height: calc(56 * var(--dp));
  padding: 0 calc(8 * var(--dp));
  border-radius: 999px;
  background: var(--primary-container);
  color: var(--on-primary-container);
  box-shadow: 0 calc(3 * var(--dp)) calc(8 * var(--dp)) rgb(0 0 0 / 0.18);
}
.toolbar span { display: grid; place-items: center; width: calc(40 * var(--dp)); height: calc(40 * var(--dp)); }
.toolbar svg,
.fab svg { width: calc(24 * var(--dp)); height: calc(24 * var(--dp)); }
.fab {
  display: grid;
  place-items: center;
  width: calc(56 * var(--dp));
  height: calc(56 * var(--dp));
  border-radius: calc(16 * var(--dp));
  background: var(--tertiary-container);
  color: var(--on-tertiary-container);
  box-shadow: 0 calc(3 * var(--dp)) calc(8 * var(--dp)) rgb(0 0 0 / 0.2);
}

/* ----------------------------------------------------------------------------
   The edge sidebar. A 112 × 320 dp tile, 28 dp corners, 8 dp off the right
   edge and centred on it. It slides in when a drag starts, leans toward the
   finger, opens its box when the drag is over it, swallows the drop, says
   "Saved" for 4 s with Open and Undo, then slides away.
---------------------------------------------------------------------------- */
.sidebar {
  --lean-x: 0px;
  --lean-y: 0px;
  position: absolute;
  right: calc(8 * var(--dp));
  top: 50%;
  z-index: 5;
  display: grid;
  width: calc(112 * var(--dp));
  height: calc(320 * var(--dp));
  margin-top: calc(-160 * var(--dp));
  padding: calc(16 * var(--dp)) calc(8 * var(--dp));
  border-radius: calc(28 * var(--dp));
  background: var(--primary-container);
  color: var(--on-primary-container);
  box-shadow: 0 calc(3 * var(--dp)) calc(6 * var(--dp)) rgb(0 0 0 / 0.2), 0 calc(6 * var(--dp)) calc(18 * var(--dp)) rgb(0 0 0 / 0.16);
  translate: calc(130 * var(--dp)) 0;
  transition: translate 0.5s cubic-bezier(0.34, 1.3, 0.64, 1), background-color 0.2s var(--ease), color 0.2s var(--ease),
    visibility 0s linear 0.5s;
  visibility: hidden;
}
.sidebar > div { grid-area: 1 / 1; }
.sidebar:not([data-state="idle"]) {
  translate: calc(-1 * var(--lean-x)) var(--lean-y);
  visibility: visible;
  transition: translate 0.5s cubic-bezier(0.34, 1.3, 0.64, 1), background-color 0.2s var(--ease), color 0.2s var(--ease),
    visibility 0s;
}
.sidebar[data-state="hover"] {
  background: var(--primary);
  color: var(--on-primary);
  transition: translate 0.12s linear, background-color 0.2s var(--ease), color 0.2s var(--ease), visibility 0s;
}
.sidebar[data-state="failed"] {
  background: light-dark(#ffdad6, #93000a);
  color: light-dark(#410002, #ffdad6);
}
.sidebar[data-state="preview"] { transition-duration: 0.6s; }

.sd-open,
.sd-saved {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: opacity 0.2s var(--ease);
}
.sd-open { justify-content: center; gap: calc(12 * var(--dp)); }
.sd-saved { justify-content: space-evenly; opacity: 0; pointer-events: none; }
.sidebar[data-state="saved"] .sd-open { opacity: 0; }
.sidebar[data-state="undone"] .sd-arrow { opacity: 0; }
.sidebar[data-state="undone"] .sd-lid { rotate: 0deg; }
.sidebar[data-state="saved"] .sd-saved { opacity: 1; pointer-events: auto; }

.sd-arrow { animation: bob 1.1s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate; }
.sd-arrow svg { width: calc(24 * var(--dp)); height: calc(24 * var(--dp)); }
@keyframes bob { to { translate: 0 calc(4 * var(--dp)); } }
.sidebar[data-state="hover"] .sd-arrow { translate: 0 calc(2 * var(--dp)); }
.sidebar[data-state="saving"] .sd-arrow,
.sidebar[data-state="failed"] .sd-arrow { opacity: 0; }

/* inventory_2, split into lid and body so the lid can swing on its hinge:
   the bottom corner nearer the edge, 35° open, 1.25× that over the box */
.sd-box {
  position: relative;
  display: block;
  width: calc(40 * var(--dp));
  height: calc(40 * var(--dp));
  transform-origin: 50% 100%;
  transition: scale 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.sd-box svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sd-lid {
  transform-origin: 87.5% 36.4%;
  rotate: 35deg;
  transition: rotate 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.sidebar[data-state="hover"] .sd-box { scale: 1.12; }
.sidebar[data-state="hover"] .sd-lid { rotate: 43.75deg; }
.sidebar[data-state="saving"] .sd-lid,
.sidebar[data-state="failed"] .sd-lid { rotate: 0deg; transition-delay: 0.1s; }
.sd-box.gulp { animation: gulp 0.42s cubic-bezier(0.34, 1.5, 0.64, 1); }
@keyframes gulp { 30% { scale: 1.08 0.82; } }

.sd-label {
  font-size: calc(14 * var(--dp));
  font-weight: 500;
  line-height: calc(20 * var(--dp));
  white-space: pre-line;
}
.sidebar[data-state="failed"] .sd-label { font-size: calc(12 * var(--dp)); line-height: calc(16 * var(--dp)); }

.sd-check { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--dp)); font-size: calc(14 * var(--dp)); font-weight: 500; }
.sd-check svg { width: calc(40 * var(--dp)); height: calc(40 * var(--dp)); }
.sidebar[data-state="saved"] .sd-check svg { animation: pop var(--dur-spring) var(--ease-spring) both; }
.sd-btn {
  height: calc(40 * var(--dp));
  padding: 0 calc(12 * var(--dp));
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--primary) !important;
  font-size: calc(14 * var(--dp)) !important;
  font-weight: 500 !important;
  cursor: pointer;
}
.sd-open-btn { padding: 0 calc(16 * var(--dp)); background: var(--primary); color: var(--on-primary) !important; }
/* .back is already positioned (absolute), which its ::after needs too */
.sd-btn,
.chip-k { position: relative; }
.sd-btn::after,
.chip-k::after,
.back::after { content: ""; position: absolute; inset: -6px; }
.sd-undo.is-hidden { visibility: hidden; }

/* The piece falling into the box: an arc to the tray, shrinking to 0.2 and
   tilting 8°, faded over its last quarter (450 ms, emphasized accelerate) */
.fall {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 7;
  width: calc(88 * var(--dp));
  pointer-events: none;
  border-radius: calc(12 * var(--dp));
  overflow: hidden;
  box-shadow: 0 calc(6 * var(--dp)) calc(14 * var(--dp)) rgb(0 0 0 / 0.3);
}
.fall img { display: block; width: 100%; }
.fall .g-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: calc(8 * var(--dp));
  background: var(--sc-highest);
  color: var(--on-surface);
  font-size: calc(12 * var(--dp));
  line-height: calc(16 * var(--dp));
}

/* Snackbars inside the phone (a repeat save, "Removed") */
.toast {
  position: absolute;
  left: calc(16 * var(--dp));
  right: calc(16 * var(--dp));
  bottom: calc(28 * var(--dp));
  z-index: 6;
  padding: calc(14 * var(--dp)) calc(16 * var(--dp));
  border-radius: calc(4 * var(--dp));
  background: light-dark(#2a3231, #dae5e3);
  color: light-dark(#e8f3f1, #2a3231);
  font-size: calc(14 * var(--dp));
  line-height: calc(20 * var(--dp));
  box-shadow: 0 calc(3 * var(--dp)) calc(8 * var(--dp)) rgb(0 0 0 / 0.25);
  animation: toast-in var(--dur-base) var(--ease) both;
}
.toast[hidden] { display: none; }
@keyframes toast-in { from { opacity: 0; translate: 0 calc(12 * var(--dp)); } }

/* ----------------------------------------------------------------------------
   The filing log: the pipeline, step by step, for the last piece
---------------------------------------------------------------------------- */
.k-log {
  align-self: start;
  padding: var(--card-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.log-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.log-head h2 { font-size: var(--text-lg); letter-spacing: -0.015em; }
.log-empty { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
/* hidden wins over the display each part sets */
.k-log [hidden] { display: none !important; }
.log-piece { color: var(--accent); font-size: var(--text-sm); font-weight: 600; }

.log-steps {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.log-steps li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-3);
  color: var(--faint);
  font-size: var(--text-sm);
  line-height: 1.45;
  transition: color var(--dur-base) var(--ease);
}
.log-steps strong { display: block; color: var(--muted); font-weight: 600; transition: color var(--dur-base) var(--ease); }
.log-steps .dot {
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.log-steps li.is-busy .dot {
  border-color: var(--accent);
  border-right-color: transparent;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }
.log-steps li.is-done .dot { border-color: transparent; background: var(--accent); }
.log-steps li.is-done .dot::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2.5px;
  width: 5px;
  height: 9px;
  border: solid light-dark(#fff, #00201c);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
}
.log-steps li.is-skip .dot { border-style: dashed; }
.log-steps li.is-busy,
.log-steps li.is-done { color: var(--muted); }
.log-steps li.is-busy strong,
.log-steps li.is-done strong { color: var(--text); }
.log-steps [data-note] b { color: var(--text); font-weight: 600; }

.log-json {
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  overflow-x: auto;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font: 400 12.5px/1.55 "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.log-json .k { color: var(--accent); }
.log-json .caret {
  display: inline-block;
  width: 7px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.log-fine { margin: var(--space-4) 0 0; color: var(--faint); font-size: var(--text-xs); line-height: 1.45; }

/* ----------------------------------------------------------------------------
   Screenshots: the app's renders in a phone frame. The renders carry their
   own status bar and gesture bar, so only the camera is added here.
---------------------------------------------------------------------------- */
.shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  padding: 7px;
  /* Corners in proportion, as on the demo phone: the screen's is 36/411 of
     its width (8.76%, which is 4.04% of its height), and the frame's adds
     the 7px bezel, worked back into percentages of the frame's own box */
  border-radius: calc(8.76% + 5.77px) / calc(4.04% + 6.43px);
  background: #1a1b1f;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 30px 60px -30px rgb(0 0 0 / 0.6);
}
.shot img { display: block; width: 100%; height: auto; border-radius: 8.76% / 4.04%; }
.shot::after,
.mock::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(7px + 2.2%);
  width: 3.4%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: #000;
}

/* Three ways in */
.ways {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-10);
}
@media (min-width: 860px) {
  .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-14); }
}
.way {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.way-visual {
  display: flex;
  justify-content: center;
  height: 340px;
  padding: var(--space-8) var(--space-6) 0;
  overflow: hidden;
  background:
    radial-gradient(closest-side, color-mix(in srgb, light-dark(#77f7e6, #005048) 60%, transparent), transparent) center 40% / 110% 110% no-repeat,
    var(--bg-raised);
  border-bottom: 1px solid var(--border);
}
.way-visual .shot,
.way-visual .mock {
  width: 210px;
  flex: none;
  align-self: flex-start;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
/* The card shows part of a phone 210px wide (about 470 tall) in 340px.
   The fades end before the card's edge, so no frame or screen is cut. */
/* Share: the bottom of the phone, where the share sheet is */
.way-visual.from-bottom { align-items: flex-end; padding-top: 0; }
.way-visual.from-bottom > * {
  align-self: flex-end;
  -webkit-mask-image: linear-gradient(to top, #000 52%, transparent 70%);
  mask-image: linear-gradient(to top, #000 52%, transparent 70%);
}
/* Selecting and the sidebar: the middle of the phone */
.way-visual.from-middle { align-items: center; padding: 0 var(--space-6); }
.way-visual.from-middle > * {
  align-self: center;
  -webkit-mask-image: linear-gradient(transparent 15%, #000 27%, #000 73%, transparent 85%);
  mask-image: linear-gradient(transparent 15%, #000 27%, #000 73%, transparent 85%);
}
.way-copy { position: relative; padding: var(--card-pad); }
.way-num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-xs);
}
.way h3 { font-size: var(--text-lg); letter-spacing: -0.015em; }
.way-copy p { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }

/* ----------------------------------------------------------------------------
   Mocks of other apps' screens, drawn like the screenshots: a browser with
   Android's share sheet open (Seaglass's "Save" in it), and the same browser
   with words selected and the selection menu's extra options open ("Save to
   Seaglass" is Seaglass's PROCESS_TEXT entry). Sized in dp of a 411 dp screen.
   The people, apps and site are made up.
---------------------------------------------------------------------------- */
.mock {
  position: relative;
  padding: 7px;
  border-radius: calc(8.76% + 5.77px) / calc(4.04% + 6.43px);
  background: #1a1b1f;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 30px 60px -30px rgb(0 0 0 / 0.6);
}
.m-screen {
  --dp: calc(100cqw / 411);
  --m-bg: light-dark(#ffffff, #141416);
  --m-ink: light-dark(#1b1b1f, #e6e1e5);
  --m-muted: light-dark(#5f5f66, #a8a6ad);
  --m-line: light-dark(#e6e6ea, #2c2c31);
  --m-card: light-dark(#f4f4f7, #232327);
  --m-sel: light-dark(#c8dbf8, #2c4a78);
  --m-handle: #3f7cf0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 411 / 891;
  border-radius: 8.76% / 4.04%;
  background: var(--m-bg);
  color: var(--m-ink);
  container-type: inline-size;
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: normal;
  user-select: none;
}
.m-screen svg { display: block; fill: currentColor; }
.m-screen p { margin: 0; }

.m-sb {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(32 * var(--dp));
  padding: 0 calc(20 * var(--dp)) 0 calc(22 * var(--dp));
  font-size: calc(14 * var(--dp));
  font-weight: 500;
}
.m-sb-icons { display: flex; align-items: center; gap: calc(6 * var(--dp)); }
.m-sb-icons svg { width: calc(15 * var(--dp)); height: calc(15 * var(--dp)); }
.m-sb-icons svg:first-child { height: calc(12 * var(--dp)); }
.m-sb-icons svg:last-child { width: calc(24 * var(--dp)); height: calc(12 * var(--dp)); }

.m-page { padding-top: calc(32 * var(--dp)); }
.m-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(56 * var(--dp));
  padding: 0 calc(16 * var(--dp));
  border-bottom: calc(1 * var(--dp)) solid var(--m-line);
}
.m-ico svg { width: calc(24 * var(--dp)); height: calc(24 * var(--dp)); }
.m-brand { font: italic 600 calc(22 * var(--dp)) / 1 Georgia, "Times New Roman", serif; letter-spacing: -0.01em; }
.m-h {
  margin: 0;
  padding: calc(22 * var(--dp)) calc(18 * var(--dp)) calc(14 * var(--dp));
  font: 600 calc(28 * var(--dp)) / 1.15 Georgia, "Times New Roman", serif;
  letter-spacing: -0.01em;
}
.m-center { text-align: center; }
.m-hero {
  aspect-ratio: 1200 / 630;
  margin: 0 calc(18 * var(--dp));
  border-radius: calc(12 * var(--dp));
  background: url(img/samples/ramen.svg) center / cover;
}
.m-p {
  padding: calc(14 * var(--dp)) calc(18 * var(--dp)) 0;
  font-size: calc(16 * var(--dp));
  line-height: calc(26 * var(--dp));
}
.m-scrim { position: absolute; inset: 0; z-index: 2; background: rgb(0 0 0 / 0.36); }
.m-nav {
  position: absolute;
  left: 50%;
  bottom: calc(8 * var(--dp));
  z-index: 5;
  width: calc(108 * var(--dp));
  height: calc(4 * var(--dp));
  translate: -50% 0;
  border-radius: 99px;
  background: var(--m-ink);
  opacity: 0.6;
}

/* The share sheet */
.m-sheet {
  position: absolute;
  left: calc(10 * var(--dp));
  right: calc(10 * var(--dp));
  bottom: calc(22 * var(--dp));
  z-index: 4;
  padding-bottom: calc(14 * var(--dp));
  border-radius: calc(30 * var(--dp));
  background: light-dark(#f7f7f9, #1d1d20);
  box-shadow: 0 calc(-4 * var(--dp)) calc(24 * var(--dp)) rgb(0 0 0 / 0.18);
}
.m-sheet-title {
  padding: calc(22 * var(--dp)) calc(26 * var(--dp)) calc(18 * var(--dp));
  border-bottom: calc(1 * var(--dp)) solid var(--m-line);
  font-size: calc(20 * var(--dp));
  font-weight: 600;
}
.m-link {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--dp));
  margin: calc(12 * var(--dp));
  padding: calc(12 * var(--dp)) calc(14 * var(--dp)) calc(12 * var(--dp)) calc(12 * var(--dp));
  border-radius: calc(18 * var(--dp));
  background: light-dark(#ffffff, #2a2a2e);
}
.m-link > svg { flex: none; width: calc(24 * var(--dp)); height: calc(24 * var(--dp)); color: var(--m-muted); }
.m-thumb {
  flex: none;
  width: calc(46 * var(--dp));
  height: calc(46 * var(--dp));
  border-radius: calc(10 * var(--dp));
  background: url(img/samples/ramen.svg) center / cover;
}
.m-lt { display: flex; flex-direction: column; gap: calc(2 * var(--dp)); min-width: 0; flex: 1; }
.m-lt b,
.m-lt small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m-lt b { font-size: calc(15 * var(--dp)); font-weight: 500; }
.m-lt small { color: var(--m-muted); font-size: calc(12 * var(--dp)); }
.m-people,
.m-apps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: calc(14 * var(--dp)) calc(8 * var(--dp));
  border-top: calc(1 * var(--dp)) solid var(--m-line);
  text-align: center;
  font-size: calc(12 * var(--dp));
  line-height: 1.25;
}
.m-people span,
.m-apps span { display: flex; flex-direction: column; align-items: center; gap: calc(7 * var(--dp)); min-width: 0; }
.m-people i {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(50 * var(--dp));
  height: calc(50 * var(--dp));
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font-style: normal;
  font-size: calc(20 * var(--dp));
  font-weight: 500;
}
.m-people i::after {
  content: "";
  position: absolute;
  right: calc(-2 * var(--dp));
  bottom: calc(-2 * var(--dp));
  width: calc(18 * var(--dp));
  height: calc(18 * var(--dp));
  border: calc(2 * var(--dp)) solid light-dark(#f7f7f9, #1d1d20);
  border-radius: 50%;
  background: #2f6fdb;
}
.m-apps i {
  display: grid;
  place-items: center;
  width: calc(52 * var(--dp));
  height: calc(52 * var(--dp));
  border-radius: calc(17 * var(--dp));
  background: var(--c);
  color: #fff;
}
.m-apps i svg { width: calc(28 * var(--dp)); height: calc(28 * var(--dp)); }
.m-apps img { width: calc(52 * var(--dp)); height: calc(52 * var(--dp)); border-radius: calc(17 * var(--dp)); }
.m-apps small { margin-top: calc(-5 * var(--dp)); color: var(--m-muted); font-size: calc(11 * var(--dp)); }
/* Seaglass's target, the one to tap: a soft ring that breathes */
.m-apps .is-seaglass img { box-shadow: 0 0 0 calc(3 * var(--dp)) light-dark(#ffffff, #1d1d20), 0 0 0 calc(5.5 * var(--dp)) #3e8f84; }
@media (prefers-reduced-motion: no-preference) {
  .m-apps .is-seaglass img { animation: breathe 2.4s var(--ease) infinite; }
  @keyframes breathe {
    50% { box-shadow: 0 0 0 calc(3 * var(--dp)) light-dark(#ffffff, #1d1d20), 0 0 0 calc(9 * var(--dp)) rgb(176 85 127 / 0.25); }
  }
}

/* Selected words and the selection menu, opened to its extra options */
.m-sel-p { position: relative; }
.m-sel { background: var(--m-sel); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.m-handle { position: relative; display: inline-block; width: 0; height: 1em; vertical-align: text-bottom; }
.m-handle::after {
  content: "";
  position: absolute;
  top: 100%;
  width: calc(18 * var(--dp));
  height: calc(18 * var(--dp));
  background: var(--m-handle);
}
.m-handle.l::after { right: 0; border-radius: 50% 0 50% 50%; }
.m-handle.r::after { left: 0; border-radius: 0 50% 50% 50%; }
.m-menu {
  position: absolute;
  top: 37%;
  right: calc(30 * var(--dp));
  z-index: 4;
  display: flex;
  flex-direction: column;
  width: calc(214 * var(--dp));
  padding: calc(6 * var(--dp)) 0;
  border-radius: calc(26 * var(--dp));
  background: light-dark(#fbfbfd, #26262a);
  box-shadow: 0 calc(6 * var(--dp)) calc(24 * var(--dp)) rgb(0 0 0 / 0.22);
  font-size: calc(17 * var(--dp));
  font-weight: 500;
}
.m-menu span { display: flex; align-items: center; height: calc(54 * var(--dp)); margin: 0 calc(8 * var(--dp)); padding: 0 calc(16 * var(--dp)); border-radius: calc(14 * var(--dp)); }
.m-menu .m-back { height: calc(46 * var(--dp)); margin-bottom: calc(4 * var(--dp)); border-bottom: calc(1 * var(--dp)) solid var(--m-line); border-radius: 0; }
.m-menu .m-back svg { width: calc(24 * var(--dp)); height: calc(24 * var(--dp)); }
.m-menu .on { background: light-dark(#77f7e6, #005048); color: light-dark(#00201c, #77f7e6); }
.m-url {
  position: absolute;
  left: calc(16 * var(--dp));
  right: calc(16 * var(--dp));
  bottom: calc(26 * var(--dp));
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--dp));
  height: calc(50 * var(--dp));
  border-radius: calc(25 * var(--dp));
  background: var(--m-card);
  font-size: calc(16 * var(--dp));
  font-weight: 500;
}
.m-url svg { width: calc(16 * var(--dp)); height: calc(16 * var(--dp)); }

/* Dragging to the edge: a recipe card's photo picked up (Android's drag
   shadow, see-through), floating toward the sidebar, open on the right as
   the app draws it: 112 x 320 dp, 8 dp in, the box with its lid up. On a
   loop, the shadow reaches the tile and it turns to "Let go to save". */
.m-card {
  margin: calc(16 * var(--dp)) calc(18 * var(--dp)) 0;
  padding: calc(14 * var(--dp)) calc(14 * var(--dp)) calc(6 * var(--dp));
  border: calc(1 * var(--dp)) solid var(--m-line);
  background: var(--m-card);
  font-size: calc(14 * var(--dp));
}
.m-card b { display: block; text-align: center; font-size: calc(18 * var(--dp)); }
.m-card .m-pic {
  aspect-ratio: 1200 / 630;
  margin: calc(10 * var(--dp)) 0 calc(6 * var(--dp));
  background: url(img/samples/ramen.svg) center / cover;
}
.m-card small { display: block; text-align: center; color: var(--m-muted); font-size: calc(13 * var(--dp)); }
.m-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  margin: calc(10 * var(--dp)) 0 0;
}
.m-card dt,
.m-card dd {
  margin: 0;
  padding: calc(10 * var(--dp)) 0;
  border-top: calc(1 * var(--dp)) solid var(--m-line);
}
.m-card dt { padding-right: calc(24 * var(--dp)); font-weight: 600; }
.m-card dd { color: light-dark(#3a5fc4, #9db7ff); }

.m-side {
  --side-bg: light-dark(#77f7e6, #005048);
  --side-fg: light-dark(#00201c, #77f7e6);
  --side-hover-bg: light-dark(#006a60, #57dbc9);
  --side-hover-fg: light-dark(#ffffff, #003731);
  position: absolute;
  top: 50%;
  right: calc(8 * var(--dp));
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--dp));
  width: calc(112 * var(--dp));
  height: calc(320 * var(--dp));
  margin-top: calc(-160 * var(--dp));
  border-radius: calc(28 * var(--dp));
  background: var(--side-bg);
  color: var(--side-fg);
  box-shadow: 0 calc(3 * var(--dp)) calc(6 * var(--dp)) rgb(0 0 0 / 0.2), 0 calc(6 * var(--dp)) calc(18 * var(--dp)) rgb(0 0 0 / 0.16);
}
.m-side .m-arrow svg { width: calc(24 * var(--dp)); height: calc(24 * var(--dp)); }
.m-side .m-tray { position: relative; width: calc(40 * var(--dp)); height: calc(40 * var(--dp)); transform-origin: 50% 100%; }
.m-side .m-tray svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-side .m-lid { transform-origin: 87.5% 36.4%; rotate: 35deg; }
.m-side .m-lab { display: grid; font-size: calc(14 * var(--dp)); font-weight: 500; text-align: center; }
.m-side .m-lab span { grid-area: 1 / 1; }
.m-side .m-lab span + span { opacity: 0; }
.m-ghost {
  position: absolute;
  top: 44%;
  left: calc(30 * var(--dp));
  z-index: 5;
  width: calc(230 * var(--dp));
  aspect-ratio: 1200 / 630;
  border-radius: calc(4 * var(--dp));
  background: url(img/samples/ramen.svg) center / cover;
  opacity: 0.6;
  translate: calc(30 * var(--dp)) 0;
  box-shadow: 0 calc(8 * var(--dp)) calc(20 * var(--dp)) rgb(0 0 0 / 0.25);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .m-ghost { animation: m-drag 5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
  .m-side { animation: m-hover 5s step-end infinite; }
  .m-side .m-tray { animation: m-tray 5s var(--ease) infinite; }
  .m-side .m-lid { animation: m-lid 5s var(--ease) infinite; }
  .m-side .m-lab span:first-child { animation: m-lab-a 5s step-end infinite; }
  .m-side .m-lab span + span { animation: m-lab-b 5s step-end infinite; }
  @keyframes m-drag {
    0% { translate: calc(-70 * var(--dp)) calc(70 * var(--dp)); opacity: 0; }
    12% { opacity: 0.6; }
    50%, 80% { translate: calc(112 * var(--dp)) calc(-6 * var(--dp)); opacity: 0.6; scale: 1; }
    92%, 100% { translate: calc(160 * var(--dp)) calc(-10 * var(--dp)); opacity: 0; scale: 0.2; }
  }
  @keyframes m-hover {
    0% { background: var(--side-bg); color: var(--side-fg); }
    46% { background: var(--side-hover-bg); color: var(--side-hover-fg); }
    90% { background: var(--side-bg); color: var(--side-fg); }
  }
  @keyframes m-tray {
    0%, 44% { scale: 1; }
    50%, 86% { scale: 1.12; }
    90% { scale: 1.08 0.82; }
    96%, 100% { scale: 1; }
  }
  @keyframes m-lid {
    0%, 44% { rotate: 35deg; }
    50%, 86% { rotate: 43.75deg; }
    92%, 100% { rotate: 0deg; }
  }
  @keyframes m-lab-a { 0% { opacity: 1; } 46% { opacity: 0; } 90% { opacity: 1; } }
  @keyframes m-lab-b { 0% { opacity: 0; } 46% { opacity: 1; } 90% { opacity: 0; } }
}

/* Filing and finding: words beside a screenshot */
#filing,
#find { overflow-x: clip; }
.split {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}
.split-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-5);
  padding-block: var(--space-4);
}
.split-visual::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(130%, 620px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, light-dark(#77f7e6, #005048) 60%, transparent), transparent 70%);
  z-index: -1;
}
.shot-lg { width: min(72vw, 300px); }
/* Side by side, never overlapping: one screen showing round the other's
   corner read as a screenshot spilling out of its frame */
.shot-lg { flex: none; }
.shot-sm { flex: none; width: min(200px, 38%); margin-top: var(--space-24); }
.split-visual:has(.shot-sm) .shot-lg { width: min(300px, 56%); }
@media (max-width: 520px) {
  .shot-sm { display: none; }
  .split-visual:has(.shot-sm) .shot-lg { width: min(72vw, 300px); }
}
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-16); }
  .split-rev .split-visual { order: -1; }
}

.points {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}
.points li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.points strong { display: block; margin-bottom: 2px; color: var(--text); font-size: var(--text-base); font-weight: 600; }
.p-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-b) 18%, transparent);
  color: var(--accent);
}
.p-icon svg { width: 22px; height: 22px; fill: currentColor; }

.kinds { margin-top: var(--space-10); }
.kind-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 var(--space-3) 0 var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: 500;
}
.kind svg { width: 16px; height: 16px; fill: var(--accent); }

/* Privacy */
.priv {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-8) var(--card-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 140% at 0% 0%, color-mix(in srgb, var(--brand-a) 26%, transparent), transparent 60%),
    var(--surface);
}
.priv h2 { font-size: var(--text-3xl); letter-spacing: -0.03em; }
.priv-copy > p:not(.eyebrow) { margin: var(--space-4) 0 0; color: var(--muted); max-width: 30em; }
.priv .more a { font-weight: 600; text-decoration: none; }
.priv .more a:hover { text-decoration: underline; }
@media (min-width: 860px) {
  .priv { grid-template-columns: 0.9fr 1.3fr; align-items: center; gap: var(--space-12); padding: var(--space-12); }
}
.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.facts li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--muted);
}
.facts li strong { display: block; color: var(--text); font-weight: 600; }
.facts svg { width: 20px; height: 20px; margin-top: 1px; fill: var(--accent); }

/* Support: an answer in parts */
.qa dd ul { margin: var(--space-2) 0; }
.qa dd li { margin-bottom: var(--space-1); }
.qa dd strong { color: var(--text); }

/* ----------------------------------------------------------------------------
   FAQ and the closing call to action, as on Brief's page
---------------------------------------------------------------------------- */
.faq { margin-top: var(--space-8); border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 2px;
  font-size: var(--text-lg);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate var(--dur-base) var(--ease), translate var(--dur-base) var(--ease);
}
.faq details[open] summary::after { rotate: -135deg; translate: 0 3px; }
.faq details p { margin: 0; padding-bottom: var(--space-5); color: var(--muted); max-width: 42em; }
.faq details::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size var(--dur-base) var(--ease), content-visibility var(--dur-base) allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: no-preference) {
  .faq details p {
    opacity: 0;
    translate: 0 -6px;
    transition: opacity var(--dur-base) var(--ease), translate var(--dur-slow) var(--ease);
  }
  .faq details[open] p { opacity: 1; translate: 0; transition-delay: 0.08s; }
}
@media (min-width: 960px) {
  .faq-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-18); }
  .faq { margin-top: 0; }
}

.cta { text-align: center; overflow: clip; }
.cta .wrap { position: relative; }
.cta .wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 40%;
  width: min(120vw, 700px);
  aspect-ratio: 2;
  translate: -50% -50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand-b) 30%, transparent), transparent);
  z-index: -1;
}
.cta img {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-6);
  border-radius: 20px;
  box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--brand-b) 70%, transparent);
}
.cta h2 { font-size: var(--text-4xl); letter-spacing: -0.035em; }
.cta p { margin: var(--space-4) auto 0; color: var(--muted); max-width: 30em; }
.cta .btn-row { justify-content: center; margin-top: var(--space-7); }

@media (prefers-reduced-motion: reduce) {
  .sd-arrow { animation: none; }
  .loading,
  .row.ktile .lead.busy::after { animation: none; border-radius: 50%; }
}