/*
 * The Pixel 10 Pro (Android 16) for the interactive session. Every size
 * inside .pixel is in dp (1 CSS px = 1 dp) on a 412 × 915 dp screen. Like the
 * iPhone, the device is scaled with `zoom`, so text is laid out again at the
 * final size and stays sharp.
 *
 * The colours are a Material 3 dynamic scheme from the blue wallpaper. The
 * type is Google Sans where the visitor has it, and the system face if not;
 * the page loads no web fonts.
 */

.session .pixel {
  --z: 0.6;
  zoom: var(--z);
  position: relative;
  width: 436px;
  height: 939px;
  --px-font: "Google Sans Flex", "Google Sans Text", "Google Sans", "Product Sans", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --px-mono: "Google Sans Code", "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --md-primary: #3f5f90;
  --md-on-primary: #fff;
  --md-primary-container: #d6e3ff;
  --md-on-primary-container: #274777;
  --md-secondary-container: #d9e3f8;
  --md-on-secondary-container: #3e4759;
  --md-surface: #f9f9ff;
  --md-on-surface: #191c20;
  --md-on-surface-variant: #44474e;
  --md-surface-lowest: #fff;
  --md-surface-low: #f3f3fa;
  --md-surface-container: #ededf4;
  --md-surface-high: #e7e8ee;
  --md-surface-highest: #e2e2e9;
  --md-outline: #74777f;
  --md-outline-variant: #c4c6d0;
  --md-error: #ba1a1a;
  --md-inverse-surface: #2e3036;
  --md-inverse-on-surface: #eff0f7;
  --md-ok: #1e8e3e;
  --md-ease: cubic-bezier(.05, .7, .1, 1);
  font-family: var(--px-font);
  color: var(--md-on-surface);
  -webkit-text-size-adjust: 100%;
  -webkit-user-select: none;
  user-select: none;
  filter: drop-shadow(0 50px 60px rgba(26, 40, 95, .3)) drop-shadow(0 12px 18px rgba(26, 40, 95, .2));
}
.session .pixel[hidden] { display: none; }
:where(.session .pixel button) { font: inherit; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.session .pixel svg { fill: currentColor; }
.session .pixel button, .session .pixel [tabindex] { scroll-margin-top: 90px; }

/* ---------- Frame: Moonstone aluminium, flat sides, even bezel ---------- */

.session .px-frame {
  position: absolute;
  inset: 0;
  border-radius: 58px;
  background: linear-gradient(155deg, #8d98ab 0%, #56617a 16%, #6b778d 48%, #4a5468 80%, #808ca1 100%);
  box-shadow:
    inset 0 0 0 1px rgba(20, 24, 36, .85),
    inset 0 0 0 2.2px #a9b3c6,
    inset 0 0 0 3.4px #5d6880,
    inset 0 0 0 5px #15181f;
}
.session .px-frame::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 53px;
  background: #000;
  box-shadow: inset 0 0 0 1px #2a2c30;
}
.session .px-hw {
  position: absolute;
  right: -3px;
  width: 5px;
  border: 0;
  padding: 0;
  border-radius: 2px;
  background: linear-gradient(270deg, #454f63, #9aa5b8 45%, #56617a);
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .45);
  cursor: pointer;
  z-index: 1;
  transition: transform 120ms ease;
}
.session .px-hw::before { content: ""; position: absolute; inset: -4px -14px; }
.session .px-hw:active { transform: translateX(-1.5px); }
.session .px-power { top: 206px; height: 64px; }
.session .px-volup { top: 300px; height: 62px; border-radius: 2px 2px 0 0; }
.session .px-voldown { top: 362px; height: 62px; border-radius: 0 0 2px 2px; }

.session .px-screen {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 412px;
  height: 915px;
  border-radius: 46px;
  overflow: clip;
  background: #000;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.session .px-camera {
  position: absolute;
  left: 50%;
  top: 16px;
  width: 21px;
  height: 21px;
  margin-left: -10.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #2b3140 0 14%, #07080b 38%);
  box-shadow: 0 0 0 1.5px #0b0c10;
  z-index: 30;
  pointer-events: none;
}
.session .px-handle {
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 108px;
  height: 4px;
  margin-left: -54px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .92);
  z-index: 20;
  pointer-events: none;
  transition: background-color 250ms ease;
}
.session .px-handle.dark { background: rgba(25, 28, 32, .9); }

/* ---------- Status bar ---------- */

.session .px-status {
  position: absolute;
  inset: 0 0 auto;
  height: 52px;
  z-index: 5;
  pointer-events: none;
}
.session .px-app > .px-status { z-index: 12; }
.session .px-status.light { color: #fff; }
.session .px-status.dark { color: var(--md-on-surface); }
.session .px-time {
  position: absolute;
  left: 30px;
  top: 16px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: .1px;
  font-variant-numeric: tabular-nums;
}
.session .px-sys {
  position: absolute;
  right: 26px;
  top: 18px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.session .px-sys svg { width: 16px; height: 16px; }
.session .px-batt {
  position: relative;
  width: 24px;
  height: 12px;
  margin-left: 2px;
  border-radius: 4px;
  overflow: hidden;
  background: color-mix(in srgb, currentColor 34%, transparent);
}
.session .px-batt i { position: absolute; inset: 0 auto 0 0; background: currentColor; }

/* ---------- Home screen ---------- */

.session .px-home { position: absolute; inset: 0; z-index: 1; }
.session .px-wall {
  position: absolute;
  inset: -24px;
  background:
    radial-gradient(70% 38% at 18% 22%, rgba(186, 206, 255, .95), transparent 70%),
    radial-gradient(55% 30% at 92% 48%, rgba(140, 120, 230, .7), transparent 72%),
    radial-gradient(90% 45% at 30% 88%, rgba(40, 72, 170, .95), transparent 70%),
    linear-gradient(170deg, #7d9be6 0%, #4f6fc4 42%, #283f8f 78%, #1b2c6a 100%);
}
.session .px-wall::after {
  /* A large soft pebble, the kind of shape a Pixel wallpaper draws. */
  content: "";
  position: absolute;
  left: 18%;
  top: 30%;
  width: 92%;
  height: 34%;
  border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
  background: linear-gradient(140deg, rgba(214, 227, 255, .55), rgba(120, 150, 230, .15));
  filter: blur(2px);
  transform: rotate(-14deg);
}
.session .px-glance {
  position: absolute;
  left: 28px;
  top: 78px;
  color: #fff;
  font-size: 22px;
  line-height: 28px;
  text-shadow: 0 1px 6px rgba(10, 20, 60, .3);
  z-index: 2;
}
.session .px-grid, .session .px-dock {
  position: absolute;
  left: 12px;
  right: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  z-index: 2;
}
.session .px-grid { top: 610px; }
.session .px-dock { top: 730px; }
.session .px-appicon { display: grid; justify-items: center; gap: 7px; }
.session .px-appicon span { color: #fff; font-size: 12.5px; line-height: 16px; text-shadow: 0 1px 4px rgba(10, 20, 60, .45); }
.session .px-grid i, .session .px-dock i {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  box-shadow: 0 2px 6px rgba(10, 20, 60, .2);
}
.session .px-grid svg, .session .px-dock svg { width: 28px; height: 28px; }
.session .px-search {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 818px;
  height: 58px;
  border-radius: 29px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: rgba(233, 238, 252, .9);
  color: var(--md-on-surface-variant);
  font-size: 17px;
  z-index: 2;
}
.session .px-search svg { width: 24px; height: 24px; flex: none; }
.session .px-search span { flex: 1; }
.session .px-dim { position: absolute; inset: 0; background: #000; opacity: 0; z-index: 4; pointer-events: none; }

/* ---------- Heads-up notification ---------- */

.session .px-hun {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 44px;
  height: 78px;
  border-radius: 28px;
  background: var(--md-surface-low);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .12);
  z-index: 9;
  transition: height 320ms var(--md-ease);
  visibility: hidden;
}
.session .px-hun.expanded { height: 100px; }
.session .px-hun-open {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  border-radius: inherit;
  background: none;
  cursor: pointer;
  -webkit-touch-callout: none;
}
.session .px-hun-open:hover { background: rgba(25, 28, 32, .04); }
.session .px-hun-open:active { background: rgba(25, 28, 32, .1); }
.session .px-hun-open:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.session .px-hun-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--md-primary);
  color: #fff;
  flex: none;
}
.session .px-hun-icon svg { width: 26px; height: 26px; }
.session .px-hun > .px-hun-icon { position: absolute; left: 16px; top: 19px; pointer-events: none; }
.session .px-hun-text { position: absolute; left: 70px; right: 64px; top: 19px; pointer-events: none; }
.session .px-hun-app {
  height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--md-on-surface-variant);
  transition: height 320ms var(--md-ease), opacity 200ms ease;
}
.session .px-hun-app span, .session .px-hun-when { color: var(--md-on-surface-variant); }
.session .px-hun-title { font-size: 15px; line-height: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session .px-hun-when { font-size: 12px; font-weight: 400; }
.session .px-hun-body { font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session .px-hun.expanded .px-hun-app { height: 20px; opacity: 1; }
.session .px-hun.expanded .px-hun-when { display: none; }
.session .px-hun-expand {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 52px;
  height: 48px;
  border: 0;
  padding: 0;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--md-on-surface);
}
.session .px-hun-expand::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 14px;
  width: 32px;
  height: 22px;
  border-radius: 11px;
  background: var(--md-surface-highest);
}
.session .px-hun-expand svg { position: relative; width: 18px; height: 18px; margin-top: 2px; transition: transform 320ms var(--md-ease); }
.session .px-hun.expanded .px-hun-expand svg { transform: rotate(180deg); }
.session .px-hun-expand:focus-visible { outline: 3px solid var(--md-primary); outline-offset: -4px; border-radius: 16px; }
.session .px-hun.hint::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 30px;
  box-shadow: 0 0 0 2px rgba(214, 227, 255, .9);
  animation: s-ring 1.8s ease-out infinite;
  pointer-events: none;
}

/* ---------- App ---------- */

.session .px-app {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--md-surface);
  visibility: hidden;
  opacity: 0;
}
.session .px-page { position: absolute; inset: 0; background: var(--md-surface); }
.session .px-page[hidden] { display: none; }
.session .px-push { z-index: 2; }

.session .px-topbar {
  position: absolute;
  left: 0;
  right: 0;
  top: 52px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
}
.session .px-topbar.medium { height: 112px; align-items: flex-end; padding: 0 16px 18px; }
.session .px-title { font-size: 28px; line-height: 36px; font-weight: 400; }
.session .px-title.small { font-size: 22px; line-height: 28px; margin-left: 4px; }
.session .px-icon-btn {
  width: 48px;
  height: 48px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--md-on-surface-variant);
}
.session .px-icon-btn svg { width: 24px; height: 24px; }
.session .px-icon-btn:hover { background: rgba(68, 71, 78, .08); }
.session .px-icon-btn:active { background: rgba(68, 71, 78, .12); }
.session .px-top-action { position: absolute; right: 4px; top: 8px; }

.session .px-scroll {
  position: absolute;
  left: 0;
  right: 0;
  top: 164px;
  bottom: 88px;
  padding: 0 16px 16px;
  overflow: auto;
  scrollbar-width: none;
}
.session .px-push .px-scroll { top: 116px; }
.session .px-scroll.with-actions { bottom: 168px; }

/* Focus rings follow the scheme, on everything inside the phone. */
.session .pixel :is(button, [tabindex]):focus-visible { outline: 3px solid var(--md-primary); outline-offset: 2px; }
.session .pixel .px-title:focus-visible { outline: none; }

/* Request card */
.session .px-card {
  display: block;
  width: 100%;
  border: 0;
  padding: 16px;
  border-radius: 12px;
  background: var(--md-surface-high);
  text-align: left;
  cursor: pointer;
  color: var(--md-on-surface);
}
.session .px-card[hidden] { display: none; }
.session .px-card:hover { background-image: linear-gradient(rgba(25, 28, 32, .04), rgba(25, 28, 32, .04)); }
.session .px-card:active { background-image: linear-gradient(rgba(25, 28, 32, .1), rgba(25, 28, 32, .1)); }
.session .px-card > span { display: block; }
.session .px-card-head { display: flex !important; align-items: center; gap: 14px; }
.session .px-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--md-surface-highest);
  flex: none;
}
.session .px-mark svg { width: 24px; height: 24px; }
.session .px-mark.big { width: 56px; height: 56px; border-radius: 16px; }
.session .px-mark.big svg { width: 32px; height: 32px; }
.session .px-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.session .px-card-title { font-size: 16px; line-height: 24px; font-weight: 500; }
.session .px-card-sub { font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.session .px-card-why { margin-top: 12px; font-size: 14px; line-height: 20px; }
.session .px-card-foot { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.session .px-jevchip {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 8px; border-radius: 8px;
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
  font-size: 14px; line-height: 20px; font-weight: 500;
}
.session .px-jevchip svg { width: 18px; height: 18px; }
.session .px-count { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--md-on-surface-variant); font-variant-numeric: tabular-nums; }
.session .px-count svg { width: 18px; height: 18px; }
.session .px-count [data-time-left] { min-width: 50px; }

/* Empty states */
.session .px-empty {
  position: absolute;
  left: 32px;
  right: 32px;
  top: 300px;
  text-align: center;
  color: var(--md-on-surface-variant);
}
.session #pxEmpty { top: 150px; visibility: hidden; opacity: 0; }
.session .px-empty svg { width: 48px; height: 48px; }
.session .px-empty-title { margin-top: 14px; font-size: 22px; line-height: 28px; color: var(--md-on-surface); }
.session .px-empty-body { margin: 8px auto 0; max-width: 290px; font-size: 14px; line-height: 20px; }
.session .px-empty .px-btn { margin-top: 24px; }

/* Buttons */
.session .px-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: .1px;
  cursor: pointer;
  --sl: rgba(25, 28, 32, .08);
}
.session .px-btn svg { width: 18px; height: 18px; flex: none; }
.session .px-btn:hover { background-image: linear-gradient(var(--sl), var(--sl)); }
.session .px-btn:active { background-image: linear-gradient(var(--sl), var(--sl)), linear-gradient(var(--sl), var(--sl)); }
.session .px-btn.filled { background-color: var(--md-primary); color: var(--md-on-primary); --sl: rgba(255, 255, 255, .1); }
.session .px-btn.tonal { background-color: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.session .px-btn.outlined { background-color: transparent; color: var(--md-primary); box-shadow: inset 0 0 0 1px var(--md-outline); --sl: rgba(63, 95, 144, .08); }
.session .px-btn.text { background-color: transparent; color: var(--md-primary); padding: 0 12px; --sl: rgba(63, 95, 144, .08); }
.session .px-btn.small { height: 40px; padding: 0 16px 0 12px; }

/* Detail pane */
.session .px-detail-head { display: flex; align-items: center; gap: 16px; padding: 4px 0 16px; }
.session .px-detail-title { font-size: 24px; line-height: 32px; }
.session .px-detail-sub { font-size: 16px; line-height: 24px; color: var(--md-on-surface-variant); }
.session .px-detail-count { margin: 0 0 16px; }
.session .px-section-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--md-primary); }
.session .px-justification { margin: 4px 0 8px; font-size: 16px; line-height: 24px; }
.session .px-fpcard { display: flex; align-items: center; gap: 16px; margin: 8px 0; padding: 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--md-outline-variant); }
.session .px-fpcard-icon { width: 24px; height: 24px; color: var(--md-primary); flex: none; }
.session .px-fpcard-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--md-on-surface-variant); }
.session .px-fpcard-value { font-family: var(--px-mono); font-size: 21px; line-height: 28px; letter-spacing: .5px; }
.session .px-section { padding: 12px 0 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--md-primary); }
.session .px-section.px-rule { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--md-outline-variant); }
.session .px-runs { margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); }
.session .px-answer { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0 4px; font-size: 16px; line-height: 24px; }
.session .px-answer svg { width: 24px; height: 24px; color: var(--md-primary); flex: none; }
.session .px-answer span { display: block; font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.session .px-facts .px-item { background: none; border-radius: 0; padding: 8px 0; }
.session .px-facts .px-item > span:first-child { font-size: 12px !important; line-height: 16px !important; font-weight: 500; letter-spacing: .5px; }
#pxProfile .px-item.link { background: none; border-radius: 0; padding: 10px 0; min-height: 64px; }
#pxProfile .px-item.static { cursor: default; }
#pxProfile .px-section:not(.px-rule) { padding-top: 16px; }
.session .px-foot.center { margin-top: 20px; text-align: center; }
.session .px-dialog-text { margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.session .px-bp-desc { position: absolute; left: 24px; right: 24px; top: 140px; font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); font-variant-numeric: tabular-nums; }
.session .px-label { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .5px; color: var(--md-on-surface-variant); }
.session .px-label.pad { margin: 20px 16px 8px; }
.session .px-group { display: grid; gap: 2px; margin-top: 12px; border-radius: 20px; overflow: hidden; }
.session .px-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 10px 16px;
  border: 0;
  border-radius: 4px;
  background: var(--md-surface-low);
  text-align: left;
  color: var(--md-on-surface);
}
.session .px-item > span:first-child:not(:only-child) { font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.session .px-item b { font-size: 16px; line-height: 24px; font-weight: 400; overflow-wrap: anywhere; }
.session .px-item .px-mono { font-family: var(--px-mono); font-size: 14px; line-height: 20px; }
.session .px-item.link { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; font-size: 16px; line-height: 24px; cursor: pointer; }
.session .px-item.link > svg { width: 24px; height: 24px; flex: none; color: var(--md-on-surface-variant); }
.session .px-item.link > span { display: flex; flex-direction: column; }
.session .px-item.link small { font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.session .px-item.link:hover { background-image: linear-gradient(rgba(25, 28, 32, .04), rgba(25, 28, 32, .04)); }
.session .px-item.link:active { background-image: linear-gradient(rgba(25, 28, 32, .1), rgba(25, 28, 32, .1)); }
.session .px-item.danger, .session .px-item.danger > svg { color: var(--md-error); }
.session .px-item.hrow { position: relative; padding-right: 48px; cursor: pointer; }
.session .px-item.hrow::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border: solid var(--md-on-surface-variant); border-width: 2px 2px 0 0; transform: rotate(45deg);
}
.session .px-h-sentence { font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.session .px-h-meta { font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.session .px-h-meta b { font-weight: 500; color: var(--md-on-surface); }
.session .px-h-meta b.ok { color: var(--md-ok); }
.session .px-foot { margin: 8px 16px 0; font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); }
.session .px-group:first-child { margin-top: 0; }
.session .px-group + .px-group { margin-top: 16px; }
.session .px-group > :first-child { border-top-left-radius: 20px; border-top-right-radius: 20px; }
.session .px-group > :last-child { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }

.session .px-actions {
  background: var(--md-surface-container) !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 88px;
  height: 80px;
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  background: var(--md-surface);
}
.session .px-actions .px-btn { flex: 1; height: 56px; font-size: 16px; line-height: 24px; }
.session .px-actions .px-btn svg { width: 20px; height: 20px; }

.session .px-account { display: flex; align-items: center; gap: 16px; padding: 0 4px 20px; }
.session .px-account svg { width: 56px; height: 56px; color: var(--md-primary); flex: none; }
.session .px-account-name { font-size: 16px; line-height: 24px; font-weight: 500; }
.session .px-account-sub { font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }

/* Navigation bar */
.session .px-navbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 88px;
  padding-bottom: 24px;
  display: flex;
  background: var(--md-surface-container);
  z-index: 4;
}
.session .px-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 0 0;
  border: 0;
  background: none;
  color: var(--md-on-surface-variant);
  cursor: pointer;
}
.session .px-ind {
  position: relative;
  width: 56px;
  height: 32px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  transition: background-color 200ms ease;
}
.session .px-ind svg { width: 24px; height: 24px; }
.session .px-nav:hover .px-ind { background-color: rgba(68, 71, 78, .08); }
.session .px-nav.on .px-ind { background-color: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.session .px-nav-label { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .5px; }
.session .px-nav.on .px-nav-label { color: var(--md-on-surface); }
.session .px-nav:focus-visible { outline: none; }
.session .px-nav:focus-visible .px-ind { outline: 3px solid var(--md-primary); outline-offset: 2px; }
.session .px-badge {
  position: absolute;
  left: 32px;
  top: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--md-error);
  color: #fff;
  font-style: normal;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  text-align: center;
}

/* Snackbar */
.session .px-snack {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 100px;
  min-height: 48px;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
  font-size: 14px;
  line-height: 20px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
  z-index: 6;
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
  transition: opacity 200ms ease, transform 300ms var(--md-ease), visibility 0s linear 300ms;
}
.session .px-snack.show { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }

/* Sign-out dialog */
.session .px-dialog-scrim {
  position: absolute; inset: 0; z-index: 12; display: grid; place-items: center;
  background: rgba(0, 0, 0, .32); opacity: 0; visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms;
}
.session .px-dialog-scrim.show { opacity: 1; visibility: visible; }
.session .px-dialog {
  width: 312px; padding: 24px 24px 20px; border-radius: 28px;
  background: var(--md-surface-high);
  transform: scale(.92); transition: transform 300ms var(--md-ease);
}
.session .px-dialog-scrim.show .px-dialog { transform: none; }
.session .px-dialog-title { font-size: 24px; line-height: 32px; }
.session .px-dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }

/* Signed out */
.session .px-signed-out { position: absolute; inset: 0; z-index: 11; background: var(--md-surface); display: none; }
.session .px-signed-out.show { display: block; }
.session .px-so-mark { position: absolute; left: 0; right: 0; top: 140px; text-align: center; font-size: 36px; line-height: 52px; }
.session .px-so-sub { position: absolute; left: 0; right: 0; top: 190px; text-align: center; font-size: 16px; line-height: 24px; color: var(--md-on-surface-variant); }
.session .px-so-points { position: absolute; left: 24px; right: 24px; top: 270px; display: grid; gap: 24px; font-size: 16px; line-height: 24px; }
.session .px-so-points div { display: flex; align-items: flex-start; gap: 16px; font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.session .px-so-points b { display: block; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--md-on-surface); }
.session .px-so-note { position: absolute; left: 24px; right: 24px; top: 700px; text-align: center; font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.session .px-so-points svg { width: 24px; height: 24px; color: var(--md-primary); flex: none; }
.session .px-btn.wide { position: absolute; left: 24px; right: 24px; top: 740px; height: 56px; font-size: 16px; }

/* ---------- BiometricPrompt ---------- */

.session .px-bp-scrim {
  position: absolute; inset: 0; z-index: 14; background: rgba(0, 0, 0, .32);
  opacity: 0; visibility: hidden; transition: opacity 250ms ease, visibility 250ms;
}
.session .px-bp-scrim.show { opacity: 1; visibility: visible; }
.session .px-bp {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 452px;
  z-index: 15;
  border-radius: 28px 28px 0 0;
  background: var(--md-surface-low);
  transform: translateY(102%);
  visibility: hidden;
  transition: transform 380ms var(--md-ease), visibility 0s linear 380ms;
}
.session .px-bp.show { transform: none; visibility: visible; transition-delay: 0s; }
.session .px-bp-logo { position: absolute; left: 24px; top: 28px; display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--md-on-surface-variant); }
.session .px-bp-logo .px-hun-icon { width: 32px; height: 32px; }
.session .px-bp-logo .px-hun-icon svg { width: 21px; height: 21px; }
.session .px-bp-title { position: absolute; left: 24px; right: 24px; top: 78px; font-size: 24px; line-height: 32px; }
.session .px-bp-sub { position: absolute; left: 24px; right: 24px; top: 116px; font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.session .px-bp-hint { position: absolute; left: 24px; right: 24px; top: 192px; text-align: center; font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.session .px-bp-hint.ok { color: var(--md-primary); }
.session .px-bp-cancel { position: absolute; left: 12px; bottom: 38px; }

/* The under-display sensor: 206 dp across, 740 dp down on this screen. */
.session .px-sensor {
  position: absolute;
  left: 170px;
  top: 704px;
  width: 72px;
  height: 72px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: none;
  color: var(--md-primary);
  display: grid;
  place-items: center;
  z-index: 16;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease 150ms, visibility 0s linear 350ms;
}
.session .px-sensor.show { opacity: 1; visibility: visible; transition-delay: 150ms, 0s; }
.session .px-sensor:focus-visible { outline-offset: 4px; border-radius: 50%; }
.session .px-sensor-ring {
  position: absolute; inset: 4px; border-radius: 50%;
  background: color-mix(in srgb, var(--md-primary) 10%, transparent);
  transition: transform 300ms var(--md-ease), background-color 200ms ease;
}
.session .px-sensor.show:not(.ok):not(.scan) .px-sensor-ring { animation: px-breathe 2.2s ease-in-out infinite; }
@keyframes px-breathe { 50% { transform: scale(1.12); background-color: color-mix(in srgb, var(--md-primary) 16%, transparent); } }
.session .px-sensor:hover .px-sensor-ring { background-color: color-mix(in srgb, var(--md-primary) 16%, transparent); }
.session .px-fp { position: relative; width: 48px; height: 48px; transition: opacity 150ms ease, transform 250ms var(--md-ease); }
.session .px-fp-ok { position: absolute; width: 36px; height: 36px; color: var(--md-on-primary); opacity: 0; }
.session .px-fp-ok path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 300ms ease 120ms; }
.session .px-sensor.scan .px-sensor-ring { transform: scale(1.18); background-color: color-mix(in srgb, var(--md-primary) 28%, transparent); }
.session .px-sensor.ok .px-sensor-ring { transform: scale(.94); background-color: var(--md-primary); }
.session .px-sensor.ok .px-fp { opacity: 0; transform: scale(.7); }
.session .px-sensor.ok .px-fp-ok { opacity: 1; }
.session .px-sensor.ok .px-fp-ok path { stroke-dashoffset: 0; }

/* ---------- Volume, sleep and the ghost fingertip ---------- */

.session .px-vol {
  position: absolute; right: 14px; top: 212px; z-index: 25;
  width: 60px; height: 240px; padding: 6px; border-radius: 30px;
  background: var(--md-surface-container);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  opacity: 0; transform: translateX(12px); pointer-events: none;
  transition: opacity 200ms ease, transform 300ms var(--md-ease);
}
.session .px-vol.show { opacity: 1; transform: none; }
.session .px-vol-track { position: relative; height: 100%; border-radius: 24px; overflow: hidden; background: var(--md-surface-highest); }
.session .px-vol-fill { position: absolute; inset: 0; background: var(--md-primary); transform: scaleY(.5); transform-origin: 50% 100%; transition: transform 160ms ease; }
.session .px-vol svg { position: absolute; left: 50%; bottom: 14px; width: 22px; height: 22px; margin-left: -11px; color: var(--md-on-primary); }
.session .px-sleep { position: absolute; inset: 0; z-index: 40; background: #000; opacity: 0; pointer-events: none; transition: opacity 320ms ease; cursor: pointer; }
.session .px-sleep.on { opacity: 1; pointer-events: auto; }
.session .px-touch {
  position: absolute; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .35) 55%, rgba(255, 255, 255, .15) 70%, transparent 72%);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .2);
  opacity: 0; z-index: 30; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .session .pixel *, .session .pixel *::before, .session .pixel *::after { transition: none !important; animation: none !important; }
}