html, body, #root { min-height: 100%; }
  body {
    margin: 0;
    background: #f1f5f9;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
  }
  /* ---------- motion system ----------
     Four curves, each with a job. Nothing uses linear or plain ease-in-out. */
  :root {
    /* Entrances. Leaves instantly, decelerates for a long time: reads as
       "already in motion when you looked", which is what makes it feel fast. */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    /* Press release + selection. 4% overshoot — enough to feel sprung, not bouncy. */
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    /* Micro-interactions. Sharp, no overshoot, for things you touch directly. */
    --ease-micro: cubic-bezier(.2, 0, 0, 1);
    /* Exits. Accelerates away — dismissal should feel decisive, not floaty. */
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    /* Looping, breathing motion. In-out sine: no hard stops at either end,
       so a repeating animation never ticks. */
    --ease-sine: cubic-bezier(.37, 0, .63, 1);
  }

  @keyframes pp-rise {
    from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.982); }
    to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  }
  @keyframes pp-rise-sm {
    from { opacity: 0; transform: translate3d(0, 7px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  @keyframes pp-pop {
    from { opacity: 0; transform: scale(.35); }
    to   { opacity: 1; transform: scale(1); }
  }
  @keyframes pp-panel-in {
    from { opacity: 0; transform: translate3d(0, -10px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  @keyframes pp-panel-out {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(0, -6px, 0); }
  }
  @keyframes pp-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.018); }
  }
  @keyframes pp-halo { 0%, 100% { opacity: .14; } 50% { opacity: .5; } }
  @keyframes pp-core { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

  /* Entrance wrappers. Kept separate from the interactive element so
     animation-fill-mode never fights the hover transition. */
  .pp-rise    { animation: pp-rise 440ms var(--ease-out) both; }
  .pp-rise-sm { animation: pp-rise-sm 340ms var(--ease-out) both; }
  .pp-pop     { animation: pp-pop 380ms var(--ease-spring) both; }

  /* Cards: lift on hover, settle 1px lower and shrink 0.6% on press.
     Only transform and opacity move — the shadow is a pseudo-element fade. */
  .pp-card {
    position: relative;
    transform: translate3d(0, 0, 0);
    transition: transform 300ms var(--ease-out);
    will-change: transform;
  }
  .pp-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 14px 34px -14px rgba(15, 23, 42, .28);
    transition: opacity 300ms var(--ease-out);
  }
  .pp-card:hover { transform: translate3d(0, -4px, 0); }
  .pp-card:hover::after { opacity: 1; }
  .pp-card:active {
    transform: translate3d(0, -1px, 0) scale(.994);
    transition-duration: 150ms;
    transition-timing-function: var(--ease-micro);
  }

  /* Anything you tap. 4% squash in, spring back out. */
  .pp-press {
    transform: translate3d(0, 0, 0);
    transition: transform 200ms var(--ease-spring), background-color 200ms var(--ease-micro),
                color 200ms var(--ease-micro);
    will-change: transform;
  }
  .pp-press:active { transform: scale(.96); transition-duration: 120ms; }

  .pp-panel-in  { animation: pp-panel-in 320ms var(--ease-out) both; }
  .pp-panel-out { animation: pp-panel-out 170ms var(--ease-in) both; }

  .pp-chev { transition: transform 300ms var(--ease-spring); }
  .pp-chev.is-open { transform: rotate(180deg); }

  /* Segmented tabs: one pill slides, the labels only cross-fade. */
  .pp-tabs { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr 1fr; }
  .pp-tabs-pill {
    position: absolute;
    top: 4px; left: 4px;
    width: calc((100% - 8px) / 3); height: calc(100% - 8px);
    border-radius: 9px;
    background: #1e293b;
    transition: transform 460ms var(--ease-spring);
    will-change: transform;
  }

  /* Day chips: the phase bars scale from the middle instead of resizing. */
  .pp-bar {
    transform-origin: center;
    transition: transform 380ms var(--ease-spring), opacity 260ms var(--ease-micro);
    will-change: transform;
  }

  .pp-breathe { animation: pp-breathe 5.2s var(--ease-sine) infinite; transform-origin: center; }
  .pp-ring { transition: stroke-dashoffset 940ms var(--ease-out); }

  .pp-halo { animation: pp-halo 3s var(--ease-sine) infinite; }
  .pp-core { animation: pp-core 3s var(--ease-sine) infinite; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
    }
    .pp-halo { opacity: .3; }
    .pp-core { opacity: 1; }
  }