/* Self-improving Proactivity Harness: styles for this topic's components only. */
/* A Saturday morning on the light page: what Q. reads from your apps rises
   into place round the middle, a fine line draws from each card into Q.'s
   bubble, and the bubble says what to wear. */
/* The frame round the scene. Widgets may reach past it rather than be cut off. */
.pro-root { position: relative; width: 1440px; height: 1024px; }
.pro-space {
  position: relative;
  width: 1440px;
  height: 1024px;
}
.pro-light { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pro-light path { fill: none; stroke-linecap: round; }
.pro-light .line {
  stroke: rgba(20, 18, 17, .2);
  stroke-width: 1.25;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
.pro-quest {
  position: absolute;
  left: 0;
  top: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 0 0 1px rgba(20, 18, 17, .06);
  color: rgba(20, 18, 17, .7);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  z-index: 7;
}
.pro-moment {
  position: absolute;
  left: 0;
  top: 0;
  width: 230px;
  padding: 14px 16px 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .95);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 2px 4px rgba(20, 18, 17, .05), 0 calc(3px + 42px * var(--depth, .5)) calc(8px + 72px * var(--depth, .5)) rgba(20, 18, 17, calc(.04 + .16 * var(--depth, .5)));
  color: #141211;
  user-select: none;
  opacity: 0;
  transition: background-color .45s ease, box-shadow .45s ease;
}
/* While a widget reads something new it turns into the app's clear container
   (40% white, a 1px grey rim, no shadow); only the new notification on it
   stays solid. */
.pro-moment.raised { background-color: rgba(255, 255, 255, .4); box-shadow: inset 0 0 0 1px #DBDBDB; }
.pro-moment.raised .hero img { mix-blend-mode: multiply; }
/* Q.'s bubble: grey like an iMessage from someone, its tail at the lower left.
   It opens small with thinking dots, then grows into the message. */
.pro-bubble {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  border-radius: 30px 30px 30px 8px;
  background: #E9E9EB;
  color: #000000;
  box-shadow: 0 2px 6px rgba(20, 18, 17, .06), 0 18px 40px rgba(20, 18, 17, .12);
  /* the bubble sits at middle depth: near cards pass in front, far ones behind */
  z-index: 6;
  opacity: 0;
  /* its own layer, so its sway every frame does not redraw it */
  will-change: transform;
}
.pro-dots {
  position: absolute;
  left: 30px;
  top: 25px;
  display: flex;
  gap: 6px;
}
.pro-dots i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .4; }
.pro-bubble p {
  position: absolute;
  left: 0;
  top: 0;
  width: max-content;
  max-width: 420px;
  padding: 18px 26px;
  font-size: 24px;
  line-height: 31px;
  font-weight: 550;
  text-wrap: pretty;
}
.pro-bubble span { opacity: 0; }
/* With the outfit under it, Q.'s words give their tail to the outfit bubble. */
.pro-bubble.stacked { border-radius: 30px; transition: border-radius .3s ease; }
/* The outfit rail: the photos' studio grey matches the bubble, so each
   hanger fades into it at its sides. */
.pro-look {
  position: absolute;
  left: 0;
  top: 0;
  width: 504px;
  height: 348px;
  overflow: hidden;
  border-radius: 30px 30px 30px 8px;
  /* the wall behind the hangers, then the floor the photos stand on */
  background: linear-gradient(#E9E9EB 60%, #D7D7D8 74%, #D9D9DA);
  box-shadow: 0 2px 6px rgba(20, 18, 17, .06), 0 18px 40px rgba(20, 18, 17, .12);
  transform-origin: 0 0;
  z-index: 6;
  opacity: 0;
  pointer-events: auto;
  touch-action: pan-y;
  cursor: grab;
  will-change: transform;
}
.pro-look figure {
  position: absolute;
  left: -156px;
  top: 0;
  width: 312px;
  height: 348px;
  margin: 0;
}
/* the hanger swings from its hook; what waits on the floor stays put */
.pro-look .hanger {
  position: absolute;
  inset: 0 0 auto;
  height: 244px;
  transform-origin: 50% 4.4%;
  will-change: transform;
}
.pro-look .hanger img,
.pro-look .bottoms,
.pro-look .shoes { display: block; pointer-events: none; user-select: none; }
.pro-look .hanger img {
  width: 312px;
  height: 244px;
  -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 25%, #000 75%, transparent 90%), linear-gradient(#000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent 10%, #000 25%, #000 75%, transparent 90%), linear-gradient(#000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* The trousers and cap, and the shoes beside them, are two photos taken the
   same way, laid in the same spot; each fades out where the other begins. */
.pro-look .bottoms,
.pro-look .shoes {
  position: absolute;
  left: 36px;
  bottom: 2px;
  width: 240px;
  height: 108px;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.pro-look .bottoms {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 49%, transparent 54%), linear-gradient(transparent, #000 18%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 49%, transparent 54%), linear-gradient(transparent, #000 18%, #000 85%, transparent);
}
.pro-look .shoes {
  -webkit-mask-image: linear-gradient(90deg, transparent 52%, #000 57%, #000 90%, transparent), linear-gradient(transparent, #000 18%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent 52%, #000 57%, #000 90%, transparent), linear-gradient(transparent, #000 18%, #000 85%, transparent);
}
.pro-look .rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 4px;
  background: linear-gradient(#D4D4D8, #9C9CA2);
  box-shadow: 0 1px 2px rgba(20, 18, 17, .18);
}
/* The empty rack drafted like the crafting mode: hairline guides that fade
   at both ends, a dashed centre line, crosses on the garment's corners and a
   light running along the garment's guides. The sweep is the line that
   reveals the outfit. */
.pro-look .draft { position: absolute; inset: 0; pointer-events: none; }
.pro-look .draft i { position: absolute; }
.pro-look .draft .across {
  left: 0;
  right: 0;
  height: 12px;
  mask-image: linear-gradient(90deg, transparent 4%, #000 26%, #000 74%, transparent 96%);
}
.pro-look .draft .down {
  top: 0;
  bottom: 0;
  width: 12px;
  mask-image: linear-gradient(transparent 4%, #000 26%, #000 74%, transparent 96%);
}
.pro-look .draft .across::before,
.pro-look .draft .down::before { content: ""; position: absolute; background: rgba(20, 18, 17, .2); }
.pro-look .draft .across::before { left: 0; right: 0; top: 5.75px; height: .5px; }
.pro-look .draft .down::before { top: 0; bottom: 0; left: 5.75px; width: .5px; }
.pro-look .draft span { position: absolute; left: 0; top: 0; }
.pro-look .draft .across span { width: 90px; height: 12px; }
.pro-look .draft .down span { width: 12px; height: 90px; }
.pro-look .draft span::before,
.pro-look .draft span::after { content: ""; position: absolute; }
.pro-look .draft .across span::before { left: 0; right: 0; top: 5.6px; height: .75px; background: linear-gradient(90deg, transparent, rgba(20, 18, 17, .6), transparent); }
.pro-look .draft .across span::after { left: 0; right: 0; top: 4px; height: 4px; background: linear-gradient(90deg, transparent, rgba(20, 18, 17, .14), transparent); filter: blur(1.5px); }
.pro-look .draft .down span::before { top: 0; bottom: 0; left: 5.6px; width: .75px; background: linear-gradient(transparent, rgba(20, 18, 17, .6), transparent); }
.pro-look .draft .down span::after { top: 0; bottom: 0; left: 4px; width: 4px; background: linear-gradient(transparent, rgba(20, 18, 17, .14), transparent); filter: blur(1.5px); }
.pro-look .draft .centre {
  top: 0;
  bottom: 0;
  width: .5px;
  background: repeating-linear-gradient(rgba(20, 18, 17, .16) 0 14px, transparent 14px 18px, rgba(20, 18, 17, .16) 18px 20px, transparent 20px 24px);
  mask-image: linear-gradient(transparent 4%, #000 26%, #000 74%, transparent 96%);
  transform-origin: 50% 0;
}
.pro-look .draft .cross { left: 0; top: 0; width: 10px; height: 10px; opacity: 0; }
.pro-look .draft .cross::before,
.pro-look .draft .cross::after { content: ""; position: absolute; background: rgba(20, 18, 17, .3); }
.pro-look .draft .cross::before { left: 0; right: 0; top: 4.6px; height: .75px; }
.pro-look .draft .cross::after { top: 0; bottom: 0; left: 4.6px; width: .75px; }
.pro-look .sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: .75px;
  background: linear-gradient(90deg, transparent, rgba(20, 18, 17, .7), transparent);
  opacity: 0;
  pointer-events: none;
}
.pro-moment header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 600; opacity: .7; }
.pro-moment header img { width: 22px; height: 22px; border-radius: 6px; }
.pro-moment p { font-size: 16px; line-height: 21px; font-weight: 550; }
.pro-moment strong { display: block; font-size: 38px; line-height: 42px; font-weight: 600; white-space: nowrap; }
.pro-moment small { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; font-weight: 550; opacity: .6; }
/* What Q. is doing shimmers while it works on it. */
.pro-moment.working > header span {
  background: linear-gradient(90deg, rgba(20, 18, 17, .45) 30%, #141211 50%, rgba(20, 18, 17, .45) 70%) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pro-shimmer 1.3s linear infinite;
}
@keyframes pro-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
/* A search card has a field Q. types its search into. */
.pro-moment .search {
  display: flex;
  align-items: center;
  height: 28px;
  border-radius: 9px;
  background: rgba(20, 18, 17, .05);
  font-size: 12px;
  font-weight: 550;
  color: rgba(20, 18, 17, .6);
}
.pro-moment .search { gap: 6px; padding: 0 10px; margin-bottom: 10px; color: #141211; }
.pro-moment .search svg { width: 14px; height: 14px; flex: none; opacity: .45; }
.pro-moment .caret { width: 1.5px; height: 14px; margin-left: -4px; background: #0A84FF; }
.pro-moment .typed { min-height: 1em; white-space: nowrap; }
/* Grey lines stand in for what Q. has not found yet. */
.pro-moment .body { position: relative; }
.pro-moment .skeleton {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  pointer-events: none;
}
.pro-moment .skeleton i {
  flex: none;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(20, 18, 17, .06) 30%, rgba(20, 18, 17, .12) 50%, rgba(20, 18, 17, .06) 70%) 0 0 / 250% 100%;
  animation: pro-shimmer 1.3s linear infinite;
}
.pro-moment .skeleton i:nth-child(1) { width: 85%; }
.pro-moment .skeleton i:nth-child(2) { width: 60%; }
.pro-moment .skeleton i:nth-child(3) { width: 40%; }
.pro-moment:has(.content > .pins, .content > .hero, .content > .ig-grid) .skeleton i:first-child { width: 100%; height: 96px; border-radius: 12px; }
/* A jacket shown whole, like a model on a turntable: its white ground drops
   away on the card, it turns slowly and floats over a soft shadow. */
.pro-moment .hero { position: relative; display: grid; place-items: center; height: 150px; margin-bottom: 8px; perspective: 700px; }
.pro-moment .hero img {
  position: relative;
  z-index: 1;
  height: 136px;
  object-fit: contain;
  mix-blend-mode: multiply;
  animation: pro-turn 6s ease-in-out infinite;
}
.pro-moment .hero i {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 120px;
  height: 14px;
  margin-left: -60px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 18, 17, .22), transparent);
  animation: pro-shadow 6s ease-in-out infinite;
}
@keyframes pro-turn {
  0%, 100% { transform: rotateY(-16deg) rotateX(3deg) translateY(0); }
  50% { transform: rotateY(16deg) rotateX(-2deg) translateY(-5px); }
}
@keyframes pro-shadow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.86); opacity: .7; }
}
.pro-moment .hero { overflow: hidden; }
.pro-moment.search { width: 360px; }
.pro-moment.search .hero { height: 124px; }
.pro-moment.search .hero img { height: 116px; }
/* Widgets you can tap to change carry a small swap mark in their corner. */
.pro-moment header { position: relative; }
.pro-moment header:has(.swap) { padding-right: 24px; }
.pro-moment .event span { white-space: nowrap; }
.pro-moment .swap {
  position: absolute;
  right: -4px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: rgba(20, 18, 17, .07);
  color: #141211;
}
.pro-moment .swap svg { width: 12px; height: 12px; }
.pro-moment.weather .swap { background: rgba(255, 255, 255, .25); color: #FFFFFF; }
/* The sky fades from one weather to the next: rain and sun are layers over
   the overcast ground that fade in and out. */
.pro-moment.weather::before, .pro-moment.weather::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
}
.pro-moment.weather::before { background: linear-gradient(170deg, #5F7286, #8798AA 60%, #A3B0BD); }
.pro-moment.weather::after { background: linear-gradient(170deg, #E39A4C, #EDB873 55%, #F3D29F); }
.pro-moment.weather.rain::before, .pro-moment.weather.sunny::after { opacity: 1; }
.pro-moment.weather.raised { --sky: .5; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.pro-moment.weather.raised.rain::before, .pro-moment.weather.raised.sunny::after { opacity: .5; }
.pro-moment.weather > * { position: relative; z-index: 1; }
.pro-moment .hero img { transition: filter .6s ease, opacity .6s ease; }
.pro-moment .hero.late img { filter: grayscale(1); opacity: .45; }
.pro-moment .ig-post .pic { transition: box-shadow .35s, opacity .45s ease; }
.pro-moment .ig-post figcaption { transition: opacity .45s ease; }
.pro-moment .ig-post.given .pic { opacity: .4; box-shadow: none !important; }
.pro-moment .ig-post.given i { opacity: 0 !important; transform: translateX(-50%) scale(.6) !important; }
.pro-moment .ig-post.given figcaption { text-decoration: line-through; opacity: .45; }
/* When nothing you own fits, Gmail suggests one to buy. */
.pro-moment .content > .buy {
  display: inline-block;
  height: 0;
  margin-top: 0;
  padding: 0 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #141211;
  color: #FFFFFF;
  font-size: 12px;
  line-height: 28px;
  font-style: normal;
  font-weight: 600;
  opacity: 0;
  transform: scale(.7);
  transition: height .4s var(--spring, ease-out), margin .4s var(--spring, ease-out), opacity .25s, transform .45s cubic-bezier(.3, 1.6, .5, 1);
}
.pro-moment .content > .buy.on { height: 28px; margin-top: 10px; opacity: 1; transform: none; }
.pro-look .buy {
  position: absolute;
  top: 26px;
  left: 283px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #141211;
  color: #FFFFFF;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  opacity: 0;
}
/* Changed words roll inside their own slot; digits roll one by one. */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; white-space: nowrap; }
.roll-was, .roll-now { display: inline-block; }
.roll-now { position: absolute; left: 0; top: 0; }
.digit { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; font-variant-numeric: tabular-nums; }
.digit > span { display: inline-block; }
.digit-was { position: absolute; left: 0; top: 0; }
/* a calendar line that changed is read again */
.pro-moment .event.reread { position: relative; overflow: hidden; }
.pro-moment .event.reread::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(10, 132, 255, .25), transparent);
  animation: pro-read .7s ease-out .15s both;
}
/* Every card can be picked up and moved around. */
.pro-moment { pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.pro-moment img { -webkit-user-drag: none; pointer-events: none; }
.phone .pro-moment { touch-action: pan-y; }
.pro-moment.held { cursor: grabbing; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 4px 10px rgba(20, 18, 17, .08), 0 30px 60px rgba(20, 18, 17, .2); }
/* The weather as a small widget: an overcast sky, now, and the next hours. */
@property --sky { syntax: "<number>"; inherits: false; initial-value: 1; }
.pro-moment.weather {
  width: 260px;
  /* the sky thins to half while the widget reads something new */
  --sky: 1;
  background: linear-gradient(170deg, rgb(143 163 184 / var(--sky)), rgb(183 195 207 / var(--sky)) 60%, rgb(203 210 216 / var(--sky)));
  transition: --sky .45s ease, box-shadow .45s ease;
  color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 2px 4px rgba(20, 18, 17, .06), 0 18px 36px rgba(60, 80, 100, .18);
}
.pro-moment.weather header { opacity: .9; }
.pro-moment.weather .skeleton i { background: rgba(255, 255, 255, .3); animation: none; }
.pro-moment .wx-now { display: flex; align-items: center; justify-content: space-between; }
.pro-moment .wx-now strong { font-size: 44px; line-height: 46px; font-weight: 550; }
.pro-moment .wx-now svg { width: 34px; height: 34px; color: rgba(255, 255, 255, .92); }
.pro-moment.weather p { font-size: 15px; line-height: 20px; font-weight: 600; }
.pro-moment.weather small { opacity: .85; }
.pro-moment .wx-hours { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .3); }
.pro-moment .wx-hours div { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; }
.pro-moment .wx-hours span { opacity: .8; }
.pro-moment .wx-hours svg { width: 16px; height: 16px; color: rgba(255, 255, 255, .9); }
.pro-moment .wx-hours b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Your Instagram posts; Q. rings each piece of the look you already own. */
.pro-moment.spot { width: 300px; }
.pro-moment .ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.pro-moment .ig-post { margin: 0; }
.pro-moment .ig-post .pic { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 10px; transition: box-shadow .35s; }
.pro-moment .ig-post img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pro-moment .ig-post i {
  position: absolute;
  left: 50%;
  bottom: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #141211;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  opacity: 0;
  transform: translateX(-50%) scale(.6);
  transition: opacity .2s, transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.pro-moment .ig-post.noticed .pic { box-shadow: 0 0 0 2px #141211; }
.pro-moment .ig-post.noticed i { opacity: 1; transform: translateX(-50%); }
.pro-moment .ig-post figcaption { margin-top: 4px; font-size: 11px; font-weight: 600; text-align: center; opacity: .7; }

/* Reading the calendar: unread lines wait faded, a light passes over each. */
.pro-moment.read .event { position: relative; overflow: hidden; transition: opacity .4s; }
.pro-moment.read .event.unread { opacity: .35; }
.pro-moment.read .event.reading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  animation: pro-read .55s linear;
}
@keyframes pro-read { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Tags: what Q. reads from the outfits you save. */
.pro-moment .chips i {
  padding: 4px 10px;
  border-radius: 999px;
  background: #141211;
  color: #FFFFFF;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}
.pro-moment .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.pro-moment .chips i { padding: 3px 8px; font-size: 10px; background: rgba(20, 18, 17, .08); color: #141211; }
/* While Q. studies your saves the tags come in one by one. */
.pro-moment.study .chips i { opacity: 0; transform: translateY(4px) scale(.92); transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.pro-moment.study .chips i.on { opacity: 1; transform: none; }

/* Your taste as a stack of saved outfits that keeps shuffling. */
.pro-moment.taste { width: 290px; }
.pro-moment .pins { position: relative; height: 190px; margin-bottom: 8px; }
.pro-moment .pins img {
  position: absolute;
  left: calc(50% - 66px);
  top: 14px;
  width: 132px;
  height: 172px;
  object-fit: cover;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(20, 18, 17, .12), 0 8px 18px rgba(20, 18, 17, .14);
}
.pro-moment .event + .event { margin-top: 6px; }
.pro-moment .event { display: flex; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(66, 133, 244, .1); border-left: 3px solid #4285F4; }
.pro-moment .event span { font-size: 13px; line-height: 19px; font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums; }
.pro-moment .event p { font-size: 15px; line-height: 19px; }

/* Before it finds anything, Q. scrolls through the whole feed: hundreds of
   emails, weeks of your calendar, your older posts. The window fades at the
   top and bottom so rows slide in and out without an edge. */
.pro-moment .feed { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.pro-moment .feed-window {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 78%, transparent);
  mask-image: linear-gradient(transparent, #000 18%, #000 78%, transparent);
}
.pro-moment .feed-track { will-change: transform; }
.pro-moment .feed-count {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 6px rgba(20, 18, 17, .1);
  font-size: 11px;
  line-height: 15px;
  font-weight: 600;
  color: rgba(20, 18, 17, .65);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Gmail: a long list of mail. */
.pro-moment .mail { display: flex; align-items: center; gap: 8px; height: 40px; border-radius: 10px; transition: background .35s ease; }
.pro-moment .mail > i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #FFFFFF; font-size: 11px; font-style: normal; font-weight: 600; }
.pro-moment .mail div { flex: 1; min-width: 0; }
.pro-moment .mail b { display: block; font-size: 12px; line-height: 15px; font-weight: 600; }
.pro-moment .mail span { display: block; overflow: hidden; font-size: 11.5px; line-height: 15px; opacity: .55; white-space: nowrap; text-overflow: ellipsis; }
.pro-moment .mail em { flex: none; align-self: flex-start; padding-top: 6px; font-size: 10px; font-style: normal; font-weight: 550; opacity: .4; }
.pro-moment .feed.landed .mail.found { background: rgba(10, 132, 255, .1); }
/* Calendar: day after day of plans, down to today. */
.pro-moment .day { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(20, 18, 17, .06); }
.pro-moment .day > span { flex: none; display: flex; flex-direction: column; align-items: center; width: 30px; font-size: 10px; line-height: 13px; font-weight: 600; opacity: .55; }
.pro-moment .day > span b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 14px; font-weight: 600; transition: background .35s ease, color .35s ease; }
.pro-moment .day > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.pro-moment .day i { padding: 2px 7px; border-left: 2px solid #4285F4; border-radius: 5px; background: rgba(66, 133, 244, .1); font-size: 11px; line-height: 15px; font-style: normal; font-weight: 550; }
.pro-moment .day.found > span { opacity: 1; color: #4285F4; }
.pro-moment .feed.landed .day.found > span b { background: #4285F4; color: #FFFFFF; }
/* Instagram: a grid of posts, with the pieces you own ringed as they pass. */
.pro-moment .posts .feed-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.pro-moment .posts figure { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: rgba(20, 18, 17, .06); transition: box-shadow .35s ease; }
.pro-moment .posts figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pro-moment .posts figure i {
  position: absolute;
  left: 50%;
  bottom: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #141211;
  color: #FFFFFF;
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  opacity: 0;
  transform: translateX(-50%) scale(.6);
  transition: opacity .3s ease, transform .4s var(--spring, ease-out);
}
.pro-moment .posts figure.noticed { outline: 2px solid #141211; outline-offset: -2px; }
.pro-moment .posts figure.noticed i { opacity: 1; transform: translateX(-50%); }

/* What just changed in an app arrives as a notification over its card, and
   a light passes over it while Q. reads it. */
.pro-moment .incoming {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 8px;
  z-index: 6;
  overflow: hidden;
  padding: 10px 12px 11px;
  border-radius: 16px;
  background: #FAFAFB;
  box-shadow: 0 0 0 1px rgba(20, 18, 17, .06), 0 12px 28px rgba(20, 18, 17, .18);
  /* its own ink, so it reads on the weather card's white type too */
  color: #141211;
  opacity: 0;
  transform: translateY(-14px) scale(.96);
  transition: opacity .3s ease, transform .55s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.pro-moment .incoming.on { opacity: 1; transform: none; }
.pro-moment .incoming header { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 11px; font-weight: 600; opacity: .55; }
.pro-moment .incoming header img { width: 15px; height: 15px; border-radius: 4px; }
.pro-moment .incoming header em { margin-left: auto; font-style: normal; font-weight: 500; }
.pro-moment .incoming b { display: block; font-size: 13px; line-height: 17px; font-weight: 600; }
.pro-moment .incoming p { margin: 0; font-size: 12.5px; line-height: 16px; font-weight: 500; opacity: .7; }
.pro-moment .incoming .read {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
  transform: translateX(-100%);
}
.pro-moment .incoming.on .read { animation: pro-read 1.1s .7s ease-in-out 1; }

/* The Quest mark watching the part of an app that is about to change. */
.pro-watcher {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 35;
  width: 34px;
  height: 34px;
  padding: 5px;
  border-radius: 11px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(20, 18, 17, .06), 0 8px 20px rgba(20, 18, 17, .22);
  opacity: 0;
  pointer-events: none;
}
.pro-watcher img { display: block; width: 100%; height: 100%; }
/* A widget something new has reached rises towards you, and the crafting
   mode's three rim lights (blue, orange, violet) run round its edge at their
   own paces, the orange one against the others, until the change has landed.
   Each light is a fine line with a soft glow of its colour around it. */
@property --blue-at { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --orange-at { syntax: "<angle>"; inherits: true; initial-value: 150deg; }
@property --violet-at { syntax: "<angle>"; inherits: true; initial-value: 250deg; }
.pro-moment .rim {
  --lights:
    conic-gradient(from var(--blue-at), transparent 0deg, rgb(107, 163, 255) 45deg, transparent 90deg, transparent 360deg),
    conic-gradient(from var(--orange-at), transparent 0deg, rgb(255, 158, 102) 36deg, transparent 72deg, transparent 360deg),
    conic-gradient(from var(--violet-at), transparent 0deg, rgb(184, 143, 255) 30deg, transparent 60deg, transparent 360deg);
  position: absolute;
  inset: -1px;
  border-radius: 25px;
  opacity: var(--raise, 0);
  pointer-events: none;
  animation: pro-blue 3.6s linear infinite paused, pro-orange 5.2s linear infinite reverse paused, pro-violet 7s linear infinite paused;
}
.pro-moment.raised .rim { animation-play-state: running; }
.pro-moment .rim::before,
.pro-moment .rim b::before {
  content: "";
  position: absolute;
  border-radius: inherit;
  background: var(--lights);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.pro-moment .rim::before { inset: 0; padding: 1.5px; }
.pro-moment .rim b { position: absolute; inset: 0; border-radius: inherit; filter: blur(7px); }
.pro-moment .rim b::before { inset: -3px; padding: 7px; }
@keyframes pro-blue { to { --blue-at: 360deg; } }
@keyframes pro-orange { to { --orange-at: 510deg; } }
@keyframes pro-violet { to { --violet-at: 610deg; } }
/* On a phone the scene is one column the phone's width, read by scrolling (its zoom
   and height are set by script). The fine lines joining each card to Q.'s words
   belong to the wide desktop scene, so a phone leaves them out. */
.phone :is(.pro-root, .pro-space) { width: 540px; }
.phone .pro-light { display: none; }
/* Safari draws the rim's blurred halo inside a hard-edged box once the column is
   zoomed, so a phone keeps only the fine coloured rim. */
.phone .pro-moment .rim b { display: none; }