/* Generated by scripts/build-sample-bundles.py from assets/js/samples.js and assets/css/samples.css. Do not edit. */
/* =====================================================================
   Parsa Dev live samples (shown on the Features pages)
   Every colour comes from the site theme (--primary, --accent, --ink …), so samples follow the palette
   picker and Light / Night. Each sample is fenced under its own pds- class. ".is-playing" plays a
   sample once on phones, which can't hover.
   Licence note: PDS-01 to PDS-05 started from MIT-licensed Uiverse.io designs (credits beside each).
   ===================================================================== */

/* keyboard users get the same effect as a mouse hover, plus a clear focus ring */
.pds-ink:focus-visible, .pds-plane:focus-visible, .pds-glide:focus-visible,
.pds-bloom__tile:focus-visible, .pds-petal:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 4px;
}

/* ---------- people who turn motion off on their device get instant, still changes ---------- */
@media (prefers-reduced-motion: reduce) {
  [class*="pds-"], [class*="pds-"]::before { transition: none !important; animation: none !important; }
}

/* ---------- shared scroll window for header samples (PDS-11 onwards) ---------- */
.pds-win {
  position: relative; width: min(100%, 520px); height: 320px; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 16px; border: 1px solid var(--border); background: var(--surface); scrollbar-width: thin;
}
.pds-win:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.pds-win__page { margin-top: -3.6rem; }
.pds-win__hero { display: grid; place-items: end start; height: 210px; padding: 1.2rem; color: #fff; font-family: var(--font-display, Georgia, serif); font-size: 1.3rem;
  background: linear-gradient(135deg, var(--primary), var(--accent)); }
.pds-win__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; padding: 1rem; }
.pds-win__row i { height: 90px; border-radius: 12px; background: linear-gradient(160deg, var(--primary-tint), color-mix(in srgb, var(--accent) 55%, var(--surface))); }
.pds-win__row i:nth-child(2) { background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 45%, var(--surface)), var(--primary-tint)); }
.pds-win__band { height: 140px; margin: 0 1rem 1rem; border-radius: 14px; background: linear-gradient(90deg, var(--gold), var(--primary)); }
.pds-win__band--alt { background: linear-gradient(90deg, var(--accent), var(--primary-deep)); }

/* ---------- PDS-24 Day & Night Rover ---------- */
/* ---------- PDS-24 Day & Night Rover ---------- */
.pds-rover, .pds-rover * { box-sizing: border-box; }
.pds-rover { --pds-rover-ease: cubic-bezier(.22, 1, .36, 1); display: grid; justify-items: center; gap: 1rem; padding: .5rem; font: inherit; text-align: center; color: var(--ink); }
.pds-rover .pds-rover__switch { position: relative; isolation: isolate; display: block; width: 170px; height: 90px; margin: 0; padding: 0; overflow: hidden;
  cursor: pointer; border: 0; border-radius: 999px; font: inherit; color: inherit; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 18%, var(--primary-tint)), color-mix(in srgb, var(--primary-tint) 55%, var(--surface)));
  box-shadow: 0 0 0 1px var(--border), 0 18px 32px -20px color-mix(in srgb, var(--primary-deep) 70%, transparent);
  transition: transform .25s var(--pds-rover-ease), box-shadow .5s var(--pds-rover-ease); }
.pds-rover .pds-rover__switch::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 3px 8px color-mix(in srgb, var(--primary-deep) 24%, transparent), inset 0 -2px 5px color-mix(in srgb, var(--primary-deep) 12%, transparent); }
.pds-rover[data-look="night"] .pds-rover__switch { box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent), 0 18px 36px -18px color-mix(in srgb, var(--primary) 65%, transparent); }
.pds-rover .pds-rover__switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.pds-rover .pds-rover__switch > span { position: absolute; }

/* sky, sun, moon, stars, cloud */
.pds-rover .pds-rover__night { inset: 0; opacity: 0; transition: opacity .55s var(--pds-rover-ease);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 30%, #060915), color-mix(in srgb, var(--primary) 20%, #121a36)); }
.pds-rover[data-look="night"] .pds-rover__night { opacity: 1; }
.pds-rover .pds-rover__stars { inset: 0; opacity: 0; transition: opacity .45s ease; }
.pds-rover[data-look="night"] .pds-rover__stars { opacity: 1; transition-delay: .2s; }
.pds-rover .pds-rover__star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: color-mix(in srgb, var(--gold) 30%, #fff);
  box-shadow: 0 0 5px 1px color-mix(in srgb, var(--gold) 45%, transparent); }
.pds-rover .pds-rover__star:nth-child(1) { left: 56px; top: 15px; }
.pds-rover .pds-rover__star:nth-child(2) { left: 74px; top: 40px; width: 2px; height: 2px; }
.pds-rover .pds-rover__star:nth-child(3) { left: 96px; top: 12px; }
.pds-rover .pds-rover__star:nth-child(4) { left: 110px; top: 34px; width: 2px; height: 2px; }
.pds-rover .pds-rover__star:nth-child(5) { left: 142px; top: 9px; width: 2px; height: 2px; }
.pds-rover[data-look="night"] .pds-rover__star { animation: pds-rover-twinkle 2.4s ease-in-out infinite alternate; }
.pds-rover[data-look="night"] .pds-rover__star:nth-child(2) { animation-delay: -.8s; }
.pds-rover[data-look="night"] .pds-rover__star:nth-child(3) { animation-delay: -1.6s; }
.pds-rover[data-look="night"] .pds-rover__star:nth-child(4) { animation-delay: -.4s; }
.pds-rover[data-look="night"] .pds-rover__star:nth-child(5) { animation-delay: -1.2s; }
.pds-rover .pds-rover__sun { top: 12px; right: 18px; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, color-mix(in srgb, var(--gold) 45%, #fff), var(--gold) 65%);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 22%, transparent), 0 0 22px 6px color-mix(in srgb, var(--gold) 50%, transparent);
  transition: transform .6s var(--pds-rover-ease), opacity .35s ease; }
.pds-rover[data-look="night"] .pds-rover__sun { transform: translateY(68px); opacity: 0; transition-delay: 0s, .22s; }
.pds-rover .pds-rover__moon { top: 12px; left: 24px; width: 22px; height: 22px; border-radius: 50%; opacity: 0; transform: translateY(68px);
  background: radial-gradient(circle at 34% 40%, color-mix(in srgb, var(--primary) 12%, #d6d0bf) 0 2.5px, transparent 3px),
    radial-gradient(circle at 64% 66%, color-mix(in srgb, var(--primary) 12%, #d6d0bf) 0 3.5px, transparent 4px),
    radial-gradient(circle at 70% 28%, color-mix(in srgb, var(--primary) 12%, #d6d0bf) 0 1.5px, transparent 2px),
    color-mix(in srgb, var(--gold) 18%, #f7f4ea);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 12%, transparent), 0 0 18px 4px color-mix(in srgb, var(--gold) 32%, transparent);
  transition: transform .6s var(--pds-rover-ease), opacity .3s ease; }
.pds-rover[data-look="night"] .pds-rover__moon { transform: none; opacity: 1; transition-delay: .12s; }
.pds-rover .pds-rover__cloud { top: 27px; left: 74px; width: 28px; height: 9px; border-radius: 999px; opacity: .95;
  background: color-mix(in srgb, #fff 82%, var(--primary-tint)); transition: opacity .4s ease, transform .6s var(--pds-rover-ease); }
.pds-rover .pds-rover__cloud::before, .pds-rover .pds-rover__cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.pds-rover .pds-rover__cloud::before { left: 5px; top: -6px; width: 12px; height: 12px; }
.pds-rover .pds-rover__cloud::after { left: 13px; top: -4px; width: 10px; height: 10px; }
.pds-rover[data-look="night"] .pds-rover__cloud { opacity: 0; transform: translateX(-18px); }

/* sand and dunes */
.pds-rover .pds-rover__hills { left: 0; right: 0; bottom: 0; height: 30px; }
.pds-rover .pds-rover__hills::before, .pds-rover .pds-rover__hills::after { content: ""; position: absolute; border-radius: 50%; transition: background-color .55s var(--pds-rover-ease); }
.pds-rover .pds-rover__hills::before { right: -24px; bottom: -12px; width: 120px; height: 36px; background-color: color-mix(in srgb, var(--gold) 45%, var(--surface)); }
.pds-rover .pds-rover__hills::after { left: -18px; right: -18px; bottom: -22px; height: 36px; background-color: color-mix(in srgb, var(--gold) 82%, var(--ink)); }
.pds-rover[data-look="night"] .pds-rover__hills::before { background-color: color-mix(in srgb, var(--primary) 30%, #151b38); }
.pds-rover[data-look="night"] .pds-rover__hills::after { background-color: color-mix(in srgb, var(--gold) 32%, #10142a); }

/* the Parsa Dev rover */
.pds-rover .pds-rover__bot { left: 12px; bottom: 9px; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 38px;
  transition: transform .6s var(--pds-rover-ease); }
.pds-rover[data-look="night"] .pds-rover__bot { transform: translateX(108px); }
.pds-rover .pds-rover__bot::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: -3px; z-index: -1; height: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--primary-deep) 32%, transparent); }
.pds-rover .pds-rover__top { position: relative; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%;
  transition: transform .45s var(--pds-rover-ease); }
.pds-rover .pds-rover__head { position: relative; display: block; width: 30px; height: 20px; padding: 3px; border-radius: 9px 9px 7px 7px;
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 86%, var(--primary)));
  border: 1.5px solid var(--border-strong); box-shadow: 0 2px 4px -1px color-mix(in srgb, var(--primary-deep) 35%, transparent); }
.pds-rover .pds-rover__head::before, .pds-rover .pds-rover__head::after { content: ""; position: absolute; top: 4px; width: 4px; height: 8px; border-radius: 2px; background: var(--primary); }
.pds-rover .pds-rover__head::before { left: -5.5px; }
.pds-rover .pds-rover__head::after { right: -5.5px; }
.pds-rover .pds-rover__visor { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 5px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 40%, #0a0f1f) 0 45%, color-mix(in srgb, var(--primary) 24%, #0a0f1f) 45%); }
.pds-rover .pds-rover__eyes { display: flex; gap: 5px; transition: transform .35s var(--pds-rover-ease); }
.pds-rover .pds-rover__eye { display: block; width: 4px; height: 6px; border-radius: 2px; background: var(--accent);
  box-shadow: 0 0 5px color-mix(in srgb, var(--accent) 80%, transparent); animation: pds-rover-blink 5s ease-in-out infinite; }
.pds-rover[data-look="night"] .pds-rover__eye { box-shadow: 0 0 7px 1px var(--accent); }
.pds-rover .pds-rover__neck { display: block; width: 6px; height: 7px; margin-top: -1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 70%, var(--ink)), var(--surface) 50%, color-mix(in srgb, var(--surface) 70%, var(--ink))); }
.pds-rover .pds-rover__wheel { position: relative; display: grid; place-items: center; width: 38px; height: 38px; margin-top: -3px; border-radius: 50%;
  background: repeating-conic-gradient(var(--primary) 0 24deg, var(--primary-deep) 24deg 30deg);
  box-shadow: 0 2px 5px -1px color-mix(in srgb, var(--primary-deep) 45%, transparent); transition: transform .6s var(--pds-rover-ease); }
.pds-rover[data-look="night"] .pds-rover__wheel { transform: rotate(326deg); }
.pds-rover .pds-rover__hub { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--surface) 0 40%, color-mix(in srgb, var(--surface) 84%, var(--ink)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-deep) 30%, transparent); }
.pds-rover .pds-rover__badge { display: block; padding: 2px 3px; border-radius: 4px; font: inherit; font-size: 7px; font-weight: 800; line-height: 1;
  letter-spacing: .04em; color: #fff; background: var(--primary); }

/* rolling: the head sways while the wheel travels */
.pds-rover.is-moving[data-look="night"] .pds-rover__top { animation: pds-rover-tilt-r .7s ease-in-out; }
.pds-rover.is-moving[data-look="day"] .pds-rover__top { animation: pds-rover-tilt-l .7s ease-in-out; }

/* hover / focus: the rover peeks at the other side */
@media (hover: hover) {
  .pds-rover .pds-rover__switch:hover { transform: translateY(-2px); }
  .pds-rover .pds-rover__switch:hover .pds-rover__top { transform: rotate(5deg); }
  .pds-rover[data-look="night"] .pds-rover__switch:hover .pds-rover__top { transform: rotate(-5deg); }
  .pds-rover .pds-rover__switch:hover .pds-rover__eyes { transform: translateX(2.5px); }
  .pds-rover[data-look="night"] .pds-rover__switch:hover .pds-rover__eyes { transform: translateX(-2.5px); }
}
.pds-rover .pds-rover__switch:focus-visible .pds-rover__eyes { transform: translateX(2.5px); }
.pds-rover[data-look="night"] .pds-rover__switch:focus-visible .pds-rover__eyes { transform: translateX(-2.5px); }
.pds-rover .pds-rover__switch:active { transform: scale(.97); }

/* Auto / Day / Night */
.pds-rover .pds-rover__seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 999px;
  background: var(--surface-sunk); border: 1px solid var(--border); }
.pds-rover .pds-rover__seg::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px;
  background: var(--surface); box-shadow: 0 0 0 1px var(--border), 0 6px 14px -8px color-mix(in srgb, var(--primary-deep) 60%, transparent);
  transition: transform .45s var(--pds-rover-ease); }
.pds-rover[data-choice="off"] .pds-rover__seg::before { transform: translateX(100%); }
.pds-rover[data-choice="on"] .pds-rover__seg::before { transform: translateX(200%); }
.pds-rover .pds-rover__opt { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; margin: 0;
  padding: .45rem .8rem; cursor: pointer; border: 0; border-radius: 999px; background: none; font: inherit; font-size: .8rem; font-weight: 600; line-height: 1.2;
  color: var(--ink-muted); -webkit-appearance: none; appearance: none; transition: color .3s; }
.pds-rover .pds-rover__opt svg { flex: none; width: 14px; height: 14px; transition: color .3s; }
.pds-rover .pds-rover__opt:hover, .pds-rover .pds-rover__opt[aria-pressed="true"] { color: var(--ink); }
.pds-rover .pds-rover__opt[aria-pressed="true"] svg { color: var(--primary); }
.pds-rover .pds-rover__opt:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pds-rover .pds-rover__note { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-size: .78rem; line-height: 1.4; color: var(--ink-muted); }
.pds-rover .pds-rover__note::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); transition: background-color .4s, box-shadow .4s; }
.pds-rover[data-look="night"] .pds-rover__note::before { background: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }

/* no sliding about on first paint, and calm for reduced motion */
.pds-rover:not(.is-ready) *, .pds-rover:not(.is-ready) *::before, .pds-rover:not(.is-ready) *::after { transition: none !important; }
@keyframes pds-rover-twinkle { from { opacity: 1; transform: scale(1); } to { opacity: .3; transform: scale(.6); } }
@keyframes pds-rover-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.15); } }
@keyframes pds-rover-tilt-r { 30% { transform: rotate(-14deg); } 72% { transform: rotate(7deg); } }
@keyframes pds-rover-tilt-l { 30% { transform: rotate(14deg); } 72% { transform: rotate(-7deg); } }
@media (prefers-reduced-motion: reduce) {
  .pds-rover *, .pds-rover *::before, .pds-rover *::after { transition: none !important; animation: none !important; }
}

/* ---------- PDS-78 Ring Lift ---------- */
.pds-lift, .pds-lift *, .pds-lift *::before, .pds-lift *::after { box-sizing: border-box; }
.pds-lift { --pds-lift-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative; width: min(100%, 520px); margin: 0 auto; overflow: hidden; text-align: start; line-height: 1.5;
  color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--ink) 55%, transparent); }
.pds-lift .pds-lift__chrome { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 2.6rem; align-items: center; gap: .5rem; height: 2.1rem; padding: 0 .8rem;
  background: var(--surface-sunk); border-bottom: 1px solid var(--border); }
.pds-lift .pds-lift__lights { display: flex; gap: .3rem; }
.pds-lift .pds-lift__lights i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.pds-lift .pds-lift__url { justify-self: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .1rem .9rem; border-radius: 999px;
  font: 500 .66rem/1.5 var(--font-mono, ui-monospace, monospace); color: var(--ink-faint); background: var(--surface); }
.pds-lift .pds-lift__win { height: 300px; overflow-y: auto; scrollbar-width: thin; }
.pds-lift .pds-lift__win:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }
.pds-lift .pds-lift__page { padding: 1.3rem 1.3rem 4.6rem; }
.pds-lift .pds-lift__kicker { margin: 0; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.pds-lift .pds-lift__title { margin: .35rem 0 .55rem; padding: .1rem .2rem; margin-left: -.2rem; border-radius: 8px;
  font-family: var(--font-display, Georgia, serif); font-size: 1.4rem; font-weight: 600; line-height: 1.2; color: var(--ink); outline: none; }
.pds-lift .pds-lift__title:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.pds-lift.is-arrived .pds-lift__title { animation: pds-lift-flash 1.6s var(--pds-lift-ease); }
.pds-lift .pds-lift__p { max-width: 40ch; margin: 0 0 1rem; font-size: .84rem; color: var(--ink-muted); }
.pds-lift .pds-lift__pic { height: 118px; margin: 0 0 1.2rem; border-radius: 14px;
  background: radial-gradient(circle at 80% 28%, color-mix(in srgb, var(--gold) 75%, transparent) 0 12%, transparent 13%),
    linear-gradient(135deg, var(--primary), var(--accent)); }
.pds-lift .pds-lift__pic--alt { background: linear-gradient(120deg, var(--primary-tint), color-mix(in srgb, var(--accent) 45%, var(--surface))); }
.pds-lift .pds-lift__h { display: flex; align-items: center; gap: .5rem; margin: 0 0 .3rem; font-size: .92rem; font-weight: 700; color: var(--ink); }
.pds-lift .pds-lift__h span { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  font: 600 .7rem/1 var(--font-mono, ui-monospace, monospace); color: var(--primary-deep); background: var(--primary-tint); }
.pds-lift .pds-lift__lines { display: grid; gap: .45rem; margin: 0 0 1.3rem; }
.pds-lift .pds-lift__lines i { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.pds-lift .pds-lift__lines i:nth-child(2n) { width: 88%; }
.pds-lift .pds-lift__lines i:last-child { width: 56%; }
.pds-lift .pds-lift__end { margin: 0; font-size: .8rem; font-weight: 600; color: var(--accent-deep); }
.pds-lift .pds-lift__hint { position: absolute; left: 50%; bottom: .9rem; padding: .3rem .85rem; border-radius: 999px; pointer-events: none;
  font-size: .72rem; font-weight: 600; white-space: nowrap; color: var(--ink-muted); transform: translateX(-50%);
  background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid var(--border);
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--ink) 50%, transparent);
  animation: pds-lift-nudge 1.8s ease-in-out infinite; transition: opacity .35s ease; }
.pds-lift.is-moved .pds-lift__hint { opacity: 0; }
.pds-lift .pds-lift__btn { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; display: grid; place-items: center;
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: var(--primary);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--ink) 55%, transparent);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.8);
  transition: opacity .35s ease, transform .55s var(--pds-lift-ease), visibility 0s linear .55s, background-color .25s ease, color .25s ease; }
.pds-lift.is-shown .pds-lift__btn { opacity: 1; visibility: visible; transform: none;
  transition: opacity .35s ease, transform .55s var(--pds-lift-ease), visibility 0s, background-color .25s ease, color .25s ease; }
.pds-lift .pds-lift__btn svg { display: block; width: 48px; height: 48px; overflow: visible; }
.pds-lift .pds-lift__track { fill: none; stroke: color-mix(in srgb, var(--primary) 20%, transparent); stroke-width: 3; transition: stroke .25s ease; }
.pds-lift .pds-lift__ring { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .15s linear, stroke .25s ease; }
.pds-lift .pds-lift__arrow { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .45s var(--pds-lift-ease); }
:is(.pds-lift.is-shown .pds-lift__btn:hover, .pds-lift.is-shown .pds-lift__btn:focus-visible, .is-playing .pds-lift.is-shown .pds-lift__btn) { color: var(--surface); background: var(--primary); }
:is(.pds-lift .pds-lift__btn:hover, .pds-lift .pds-lift__btn:focus-visible, .is-playing .pds-lift .pds-lift__btn) .pds-lift__arrow { transform: translateY(-3px); }
:is(.pds-lift .pds-lift__btn:hover, .pds-lift .pds-lift__btn:focus-visible, .is-playing .pds-lift .pds-lift__btn) .pds-lift__ring { stroke: var(--surface); }
:is(.pds-lift .pds-lift__btn:hover, .pds-lift .pds-lift__btn:focus-visible, .is-playing .pds-lift .pds-lift__btn) .pds-lift__track { stroke: color-mix(in srgb, var(--surface) 30%, transparent); }
.pds-lift .pds-lift__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.pds-lift.is-shown .pds-lift__btn:active { transform: scale(.92); }
.pds-lift .pds-lift__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes pds-lift-nudge { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 4px); } }
@keyframes pds-lift-flash {
  0% { background-color: color-mix(in srgb, var(--primary) 24%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 24%, transparent); }
  100% { background-color: transparent; box-shadow: 0 0 0 6px transparent; }
}

/* ---------- PDS-79 Hint Bubbles ---------- */
.pds-hint, .pds-hint *, .pds-hint *::before, .pds-hint *::after { box-sizing: border-box; }
.pds-hint { --pds-hint-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative; container-type: inline-size; width: min(100%, 440px); margin: 0 auto; padding: .6rem .4rem 0;
  text-align: start; line-height: 1.5; color: var(--ink); }
.pds-hint .pds-hint__card { padding: 1rem 1.1rem 1.2rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 28px 54px -36px color-mix(in srgb, var(--ink) 60%, transparent); }
.pds-hint .pds-hint__head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; padding-bottom: .85rem; border-bottom: 1px solid var(--border); }
.pds-hint .pds-hint__brand { display: flex; flex: 1 1 auto; align-items: center; gap: .5rem; min-width: 0; }
.pds-hint .pds-hint__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent)); }
.pds-hint .pds-hint__title { font-family: var(--font-display, Georgia, serif); font-size: 1.1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; color: var(--ink); }
.pds-hint .pds-hint__chip { padding: .08rem .5rem; border-radius: 999px; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary-deep); background: var(--primary-tint); }
.pds-hint .pds-hint__tools { display: flex; gap: .4rem; margin-left: auto; }
.pds-hint .pds-hint__icon { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border); border-radius: 11px;
  cursor: pointer; color: var(--ink-muted); background: var(--surface);
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .3s var(--pds-hint-ease); }
.pds-hint .pds-hint__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:is(.pds-hint .pds-hint__icon:hover, .pds-hint .pds-hint__icon:focus-visible, .pds-hint .pds-hint__icon.is-on) {
  color: var(--primary-deep); background: var(--primary-tint); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); transform: translateY(-1px); }
.pds-hint .pds-hint__lab { display: flex; align-items: center; gap: .45rem; margin-bottom: .4rem; font-size: .78rem; font-weight: 600; color: var(--ink-muted); }
.pds-hint .pds-hint__info { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; cursor: help;
  font: italic 700 .82rem/1 var(--font-display, Georgia, serif); color: var(--primary-deep); background: var(--primary-tint);
  transition: color .2s ease, background-color .2s ease, transform .3s var(--pds-hint-ease); }
:is(.pds-hint .pds-hint__info:hover, .pds-hint .pds-hint__info:focus-visible, .pds-hint .pds-hint__info.is-on) { color: var(--surface); background: var(--primary); transform: scale(1.08); }
.pds-hint .pds-hint__field { display: block; margin-bottom: 1rem; }
.pds-hint .pds-hint__vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pds-hint .pds-hint__input { display: block; width: 100%; padding: .62rem .8rem; border: 1px solid var(--border-strong); border-radius: 11px;
  font: inherit; font-size: .88rem; color: var(--ink); background: var(--surface-sunk); transition: border-color .2s ease; }
.pds-hint .pds-hint__input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-color: var(--primary); }
.pds-hint .pds-hint__text { margin: 0; font-size: .86rem; color: var(--ink-muted); }
.pds-hint .pds-hint__term { display: inline; padding: 0 .12em; border: 0; border-radius: 5px; cursor: help; background: none;
  font: inherit; font-weight: 600; color: var(--ink);
  text-decoration: underline dotted var(--primary); text-decoration-thickness: 2px; text-underline-offset: 3px;
  transition: color .2s ease, background-color .2s ease; }
:is(.pds-hint .pds-hint__term:hover, .pds-hint .pds-hint__term:focus-visible, .pds-hint .pds-hint__term.is-on, .is-playing .pds-hint .pds-hint__term) {
  color: var(--primary-deep); background: var(--primary-tint); }
.pds-hint :is(.pds-hint__icon, .pds-hint__info, .pds-hint__term):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.pds-hint .pds-hint__tip { position: absolute; left: 0; top: 0; z-index: 5; width: max-content; max-width: min(210px, calc(100% - 12px));
  padding: .55rem .75rem .6rem; border-radius: 12px; font-size: .76rem; line-height: 1.4; color: var(--surface); background: var(--ink);
  box-shadow: 0 18px 34px -14px color-mix(in srgb, var(--ink) 75%, transparent);
  pointer-events: none; opacity: 0; visibility: hidden;
  transform: translate(var(--x, 0px), var(--y, 0px)) translate(var(--dx, 0px), var(--dy, 6px)) scale(.94);
  transition: opacity .2s ease, transform .4s var(--pds-hint-ease), visibility 0s linear .4s; }
.pds-hint .pds-hint__tip[data-side="top"] { --dy: 6px; --dx: 0px; transform-origin: var(--ax, 50%) 100%; }
.pds-hint .pds-hint__tip[data-side="bottom"] { --dy: -6px; --dx: 0px; transform-origin: var(--ax, 50%) 0; }
.pds-hint .pds-hint__tip[data-side="right"] { --dx: -6px; --dy: 0px; transform-origin: 0 var(--ay, 50%); }
.pds-hint .pds-hint__tip[data-side="left"] { --dx: 6px; --dy: 0px; transform-origin: 100% var(--ay, 50%); }
:is(.pds-hint .pds-hint__tip.is-open, .is-playing .pds-hint .pds-hint__tip--demo[data-side]) { opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(var(--x, 0px), var(--y, 0px)); transition: opacity .2s ease, transform .4s var(--pds-hint-ease), visibility 0s; }
.pds-hint .pds-hint__tip b { display: flex; align-items: center; gap: .4rem; margin-bottom: .1rem; font-size: .78rem; }
.pds-hint .pds-hint__tip b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface) 25%, transparent); }
.pds-hint .pds-hint__tip::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 2px; background: inherit; transform: rotate(45deg); }
.pds-hint .pds-hint__tip[data-side="top"]::after { bottom: -4px; left: calc(var(--ax, 50%) - 5px); }
.pds-hint .pds-hint__tip[data-side="bottom"]::after { top: -4px; left: calc(var(--ax, 50%) - 5px); }
.pds-hint .pds-hint__tip[data-side="right"]::after { left: -4px; top: calc(var(--ay, 50%) - 5px); }
.pds-hint .pds-hint__tip[data-side="left"]::after { right: -4px; top: calc(var(--ay, 50%) - 5px); }
.pds-hint .pds-hint__foot { min-height: 2.6em; margin: .8rem 0 0; text-align: center; font-size: .74rem; color: var(--ink-muted); }
@container (max-width: 340px) {
  .pds-hint .pds-hint__chip { display: none; }
  .pds-hint .pds-hint__card { padding-inline: .9rem; }
  .pds-hint .pds-hint__title { font-size: 1rem; }
  .pds-hint .pds-hint__tools { gap: .3rem; }
}

/* ---------- PDS-80 News Strip ---------- */
.pds-newsbar, .pds-newsbar *, .pds-newsbar *::before, .pds-newsbar *::after { box-sizing: border-box; }
.pds-newsbar { --pds-newsbar-ease: cubic-bezier(.22, 1, .36, 1); --pds-newsbar-in: 110%; --pds-newsbar-out: -110%;
  position: relative; container-type: inline-size; width: min(100%, 520px); margin: 0 auto; text-align: start; line-height: 1.5; color: var(--ink); }
.pds-newsbar.is-back { --pds-newsbar-in: -110%; --pds-newsbar-out: 110%; }
.pds-newsbar .pds-newsbar__frame { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--ink) 55%, transparent); }
.pds-newsbar .pds-newsbar__chrome { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 2.6rem; align-items: center; gap: .5rem; height: 2.1rem; padding: 0 .8rem;
  background: var(--surface-sunk); border-bottom: 1px solid var(--border); }
.pds-newsbar .pds-newsbar__lights { display: flex; gap: .3rem; }
.pds-newsbar .pds-newsbar__lights i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.pds-newsbar .pds-newsbar__url { justify-self: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .1rem .9rem; border-radius: 999px;
  font: 500 .66rem/1.5 var(--font-mono, ui-monospace, monospace); color: var(--ink-faint); background: var(--surface); }
.pds-newsbar .pds-newsbar__win { position: relative; height: 282px; overflow: hidden; }
.pds-newsbar .pds-newsbar__wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s var(--pds-newsbar-ease); }
.pds-newsbar.is-closed .pds-newsbar__wrap { grid-template-rows: 0fr; }
.pds-newsbar .pds-newsbar__clip { min-height: 0; overflow: hidden; }
.pds-newsbar .pds-newsbar__bar { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .2rem;
  padding: .4rem .45rem; color: var(--surface); background: linear-gradient(100deg, var(--primary-deep), var(--primary) 55%, color-mix(in srgb, var(--accent) 25%, var(--primary)));
  transition: transform .55s var(--pds-newsbar-ease), opacity .4s ease, visibility 0s; }
.pds-newsbar.is-closed .pds-newsbar__bar { transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform .55s var(--pds-newsbar-ease), opacity .4s ease, visibility 0s linear .55s; }
.pds-newsbar :is(.pds-newsbar__nav, .pds-newsbar__close) { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px;
  cursor: pointer; color: inherit; background: transparent; transition: background-color .2s ease; }
.pds-newsbar :is(.pds-newsbar__nav, .pds-newsbar__close) svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pds-newsbar :is(.pds-newsbar__nav, .pds-newsbar__close):hover { background: color-mix(in srgb, var(--surface) 20%, transparent); }
.pds-newsbar .pds-newsbar__close { margin-left: .15rem; box-shadow: -1px 0 0 color-mix(in srgb, var(--surface) 30%, transparent); border-radius: 0 9px 9px 0; }
.pds-newsbar .pds-newsbar__bar :focus-visible { outline: 2px solid var(--surface); outline-offset: -2px; }
.pds-newsbar .pds-newsbar__msgs { display: grid; min-width: 0; overflow: hidden; }
.pds-newsbar .pds-newsbar__msg { grid-area: 1 / 1; align-self: center; min-width: 0; padding: .3rem .4rem; border: 0; border-radius: 8px; cursor: pointer; background: none;
  font: inherit; font-size: .78rem; font-weight: 600; line-height: 1.35; text-align: center; color: inherit;
  opacity: 0; visibility: hidden; transform: translateY(var(--pds-newsbar-in)); transition: none; }
.pds-newsbar .pds-newsbar__msg.is-on { opacity: 1; visibility: visible; transform: none;
  transition: transform .6s var(--pds-newsbar-ease), opacity .35s ease .08s, visibility 0s; }
.pds-newsbar .pds-newsbar__msg.is-leaving { visibility: visible; opacity: 0; transform: translateY(var(--pds-newsbar-out));
  transition: transform .6s var(--pds-newsbar-ease), opacity .3s ease; }
.pds-newsbar .pds-newsbar__tag { display: inline-block; margin-right: .1rem; padding: 0 .45rem; border-radius: 999px; font-size: .64rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; vertical-align: .08em; background: color-mix(in srgb, var(--surface) 24%, transparent); }
.pds-newsbar .pds-newsbar__txt { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--surface) 45%, transparent); text-underline-offset: 3px; }
.pds-newsbar .pds-newsbar__count { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pds-newsbar .pds-newsbar__arr { display: inline-block; transition: transform .35s var(--pds-newsbar-ease); }
:is(.pds-newsbar .pds-newsbar__msg:hover, .pds-newsbar .pds-newsbar__msg:focus-visible, .is-playing .pds-newsbar .pds-newsbar__msg) .pds-newsbar__arr { transform: translateX(4px); }
.pds-newsbar .pds-newsbar__line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: 0 50%; transform: scaleX(0);
  background: color-mix(in srgb, var(--surface) 75%, transparent); transition: transform .1s linear, opacity .3s ease; }
.pds-newsbar.is-paused .pds-newsbar__line { opacity: .35; }
.pds-newsbar .pds-newsbar__page { position: relative; height: 100%; }
.pds-newsbar .pds-newsbar__top { display: flex; align-items: center; gap: .9rem; height: 2.9rem; padding: 0 1rem; border-bottom: 1px solid var(--border); }
.pds-newsbar .pds-newsbar__logo { font-family: var(--font-display, Georgia, serif); font-size: 1rem; font-weight: 600; white-space: nowrap; color: var(--ink); }
.pds-newsbar .pds-newsbar__logo b { margin-left: .2em; font-weight: inherit; color: var(--primary); }
.pds-newsbar .pds-newsbar__links { display: flex; gap: .9rem; margin-left: auto; font-size: .76rem; white-space: nowrap; color: var(--ink-muted); }
.pds-newsbar .pds-newsbar__cta { padding: .3rem .75rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: var(--surface); background: var(--ink); }
.pds-newsbar .pds-newsbar__hero { padding: 1.2rem 1.1rem; background: radial-gradient(110% 90% at 100% 0%, var(--primary-tint), transparent 62%); }
.pds-newsbar .pds-newsbar__kicker { margin: 0; font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.pds-newsbar .pds-newsbar__h { max-width: 21ch; margin: .3rem 0 .9rem; font-family: var(--font-display, Georgia, serif); font-size: 1.45rem; font-weight: 600; line-height: 1.15; color: var(--ink); }
.pds-newsbar .pds-newsbar__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.pds-newsbar .pds-newsbar__tiles i { height: 64px; border-radius: 12px; background: linear-gradient(150deg, var(--primary-tint), color-mix(in srgb, var(--accent) 45%, var(--surface))); }
.pds-newsbar .pds-newsbar__tiles i:nth-child(2) { background: linear-gradient(150deg, color-mix(in srgb, var(--gold) 40%, var(--surface)), var(--primary-tint)); }
.pds-newsbar .pds-newsbar__tiles i:nth-child(3) { background: linear-gradient(150deg, var(--primary), color-mix(in srgb, var(--accent) 60%, var(--primary))); }
.pds-newsbar .pds-newsbar__reset { position: absolute; left: 50%; bottom: 1rem; z-index: 2; padding: .5rem 1rem; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 600; white-space: nowrap; color: var(--surface); background: var(--ink);
  box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--ink) 70%, transparent);
  opacity: 0; visibility: hidden; transform: translate(-50%, 10px);
  transition: opacity .3s ease, transform .5s var(--pds-newsbar-ease), visibility 0s linear .5s; }
.pds-newsbar.is-closed .pds-newsbar__reset { opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .3s ease .25s, transform .5s var(--pds-newsbar-ease) .25s, visibility 0s; }
.pds-newsbar .pds-newsbar__reset:focus-visible, .pds-newsbar .pds-newsbar__input:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.pds-newsbar .pds-newsbar__edit { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; padding: .3rem .3rem .3rem .75rem;
  border: 1px dashed var(--border-strong); border-radius: 12px; background: var(--surface); }
.pds-newsbar .pds-newsbar__pen { display: inline-flex; align-items: center; gap: .3rem; flex: none; font-size: .74rem; font-weight: 700; color: var(--primary-deep); }
.pds-newsbar .pds-newsbar__pen svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.pds-newsbar .pds-newsbar__vh, .pds-newsbar .pds-newsbar__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pds-newsbar .pds-newsbar__input { flex: 1; min-width: 0; padding: .45rem .6rem; border: 0; border-radius: 8px; font: inherit; font-size: .8rem; color: var(--ink); background: var(--surface-sunk); }
.pds-newsbar .pds-newsbar__input::placeholder { color: var(--ink-faint); }
@container (max-width: 420px) {
  .pds-newsbar .pds-newsbar__links { display: none; }
  .pds-newsbar .pds-newsbar__cta { margin-left: auto; }
  .pds-newsbar .pds-newsbar__h { font-size: 1.25rem; }
  .pds-newsbar .pds-newsbar__msg { padding-inline: .2rem; font-size: .72rem; }
  .pds-newsbar .pds-newsbar__tag--opt { display: none; }
  .pds-newsbar .pds-newsbar__bar { gap: 0; padding-inline: .3rem; }
  .pds-newsbar :is(.pds-newsbar__nav, .pds-newsbar__close) { width: 28px; }
}

/* ---------- PDS-81 Lost Orbit ---------- */
.pds-lost, .pds-lost *, .pds-lost *::before, .pds-lost *::after { box-sizing: border-box; }
.pds-lost { --pds-lost-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative; container-type: inline-size; width: min(100%, 500px); margin: 0 auto; text-align: center; line-height: 1.5; color: var(--ink);
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
  box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--ink) 55%, transparent); }
.pds-lost .pds-lost__chrome { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 2.6rem; align-items: center; gap: .5rem; height: 2.1rem; padding: 0 .8rem;
  border-radius: 15px 15px 0 0; background: var(--surface-sunk); border-bottom: 1px solid var(--border); }
.pds-lost .pds-lost__lights { display: flex; gap: .3rem; }
.pds-lost .pds-lost__lights i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.pds-lost .pds-lost__url { justify-self: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .1rem .9rem; border-radius: 999px;
  font: 500 .66rem/1.5 var(--font-mono, ui-monospace, monospace); color: var(--ink-faint); background: var(--surface); }
.pds-lost .pds-lost__url b { font-weight: 600; color: var(--ink); text-decoration: underline wavy color-mix(in srgb, var(--gold) 80%, transparent); text-underline-offset: 3px; }
.pds-lost .pds-lost__page { position: relative; padding: .9rem 1.2rem 1.1rem; border-radius: 0 0 15px 15px;
  background: radial-gradient(90% 70% at 50% 0%, var(--primary-tint), transparent 70%); }
.pds-lost .pds-lost__stars { position: absolute; inset: 0 0 auto; height: 120px; overflow: hidden; pointer-events: none; }
.pds-lost .pds-lost__stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); animation: pds-lost-twinkle 3s ease-in-out infinite; }
.pds-lost .pds-lost__stars i:nth-child(1) { left: 12%; top: 22%; }
.pds-lost .pds-lost__stars i:nth-child(2) { left: 24%; top: 64%; width: 2px; height: 2px; animation-delay: -.8s; }
.pds-lost .pds-lost__stars i:nth-child(3) { left: 33%; top: 14%; background: var(--gold); animation-delay: -1.6s; }
.pds-lost .pds-lost__stars i:nth-child(4) { left: 70%; top: 18%; animation-delay: -2.2s; }
.pds-lost .pds-lost__stars i:nth-child(5) { left: 80%; top: 58%; width: 4px; height: 4px; background: var(--gold); animation-delay: -1.1s; }
.pds-lost .pds-lost__stars i:nth-child(6) { left: 90%; top: 30%; width: 2px; height: 2px; animation-delay: -.4s; }
.pds-lost .pds-lost__stars i:nth-child(7) { left: 6%; top: 74%; width: 2px; height: 2px; animation-delay: -2.6s; }
.pds-lost .pds-lost__code { position: relative; display: flex; align-items: center; justify-content: center; gap: .1rem; margin: 0; height: 74px; }
.pds-lost .pds-lost__four { display: inline-block; font-family: var(--font-display, Georgia, serif); font-size: 4.4rem; font-weight: 600; line-height: 1; color: var(--ink);
  transform: rotate(-7deg); animation: pds-lost-sway 5s ease-in-out infinite; }
.pds-lost .pds-lost__four--b { transform: rotate(6deg); animation-delay: -2.5s; animation-direction: reverse; }
.pds-lost .pds-lost__zero { position: relative; flex: none; width: 80px; height: 70px; animation: pds-lost-bob 4s ease-in-out infinite; }
.pds-lost .pds-lost__ball { position: absolute; left: 16px; top: 11px; z-index: 2; width: 48px; height: 48px; border-radius: 50%;
  background: radial-gradient(circle at 64% 62%, color-mix(in srgb, #000 16%, transparent) 0 11%, transparent 12%),
    radial-gradient(circle at 38% 70%, color-mix(in srgb, #000 12%, transparent) 0 7%, transparent 8%),
    radial-gradient(circle at 32% 28%, color-mix(in srgb, #fff 55%, var(--primary)), var(--primary) 48%, color-mix(in srgb, #000 30%, var(--primary)));
  box-shadow: 0 0 22px color-mix(in srgb, var(--primary) 45%, transparent); }
.pds-lost .pds-lost__ring { position: absolute; left: 1px; top: 25px; z-index: 1; width: 78px; height: 20px; border-radius: 50%;
  border: 2.5px solid var(--gold); transform: rotate(-16deg); }
.pds-lost .pds-lost__ring--front { z-index: 3; clip-path: inset(50% 0 0 0); }
.pds-lost .pds-lost__moon { position: absolute; left: 0; top: 0; z-index: 4; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, #fff 50%, var(--accent)), var(--accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
  offset-path: path("M1.55 46.02A40 12 -16 1 0 78.45 23.98A40 12 -16 1 0 1.55 46.02"); offset-rotate: 0deg;
  animation: pds-lost-orbit 5.5s linear infinite; }
.pds-lost .pds-lost__title { margin: .55rem 0 .2rem; font-family: var(--font-display, Georgia, serif); font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: var(--ink); }
.pds-lost .pds-lost__text { max-width: 36ch; margin: 0 auto .8rem; font-size: .8rem; color: var(--ink-muted); }
.pds-lost .pds-lost__search { position: relative; width: min(100%, 330px); margin: 0 auto; text-align: start; }
.pds-lost .pds-lost__box { display: flex; align-items: center; gap: .5rem; height: 40px; padding: 0 .9rem; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--ink) 55%, transparent); transition: border-color .2s ease; }
.pds-lost .pds-lost__box:focus-within { border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: 2px; }
.pds-lost .pds-lost__icon { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-linecap: round; }
.pds-lost .pds-lost__input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: none; font: inherit; font-size: .84rem; color: var(--ink); }
.pds-lost .pds-lost__input::placeholder { color: var(--ink-faint); }
.pds-lost .pds-lost__drop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; padding: .3rem; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); box-shadow: 0 22px 40px -20px color-mix(in srgb, var(--ink) 60%, transparent);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s ease, transform .35s var(--pds-lost-ease), visibility 0s linear .35s; }
.pds-lost .pds-lost__drop.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .35s var(--pds-lost-ease), visibility 0s; }
.pds-lost .pds-lost__list { margin: 0; padding: 0; list-style: none; }
.pds-lost .pds-lost__opt { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .38rem .65rem; border-radius: 9px; cursor: pointer;
  font-size: .82rem; color: var(--ink); }
.pds-lost .pds-lost__opt[hidden] { display: none; }
.pds-lost .pds-lost__opt b { font-weight: 600; }
.pds-lost .pds-lost__opt mark { padding: 0; font-weight: 800; color: var(--primary-deep); background: none; }
.pds-lost .pds-lost__opt small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 .68rem/1.4 var(--font-mono, ui-monospace, monospace); color: var(--ink-faint); }
.pds-lost .pds-lost__opt:hover, .pds-lost .pds-lost__opt[aria-selected="true"] { background: var(--primary-tint); }
.pds-lost .pds-lost__opt[aria-selected="true"] small, .pds-lost .pds-lost__opt:hover small { color: var(--primary-deep); }
.pds-lost .pds-lost__none { margin: 0; padding: .4rem .65rem; font-size: .78rem; color: var(--ink-muted); }
.pds-lost .pds-lost__live { min-height: 1.4em; margin: .4rem 0 0; font-size: .72rem; color: var(--ink-muted); }
.pds-lost .pds-lost__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: .55rem; }
.pds-lost .pds-lost__link { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 600; color: var(--ink); background: var(--surface);
  transition: border-color .2s ease, color .2s ease, transform .3s var(--pds-lost-ease), box-shadow .3s ease; }
.pds-lost .pds-lost__link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pds-lost .pds-lost__link--main { color: var(--surface); background: var(--primary); border-color: transparent; }
:is(.pds-lost .pds-lost__link:hover, .pds-lost .pds-lost__link:focus-visible, .is-playing .pds-lost .pds-lost__link--main) { transform: translateY(-2px);
  border-color: var(--primary); box-shadow: 0 12px 22px -14px color-mix(in srgb, var(--primary) 70%, transparent); }
.pds-lost .pds-lost__link:not(.pds-lost__link--main):hover { color: var(--primary-deep); }
.pds-lost .pds-lost__link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.pds-lost .pds-lost__log { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem; margin: .8rem 0 0; padding-top: .7rem;
  border-top: 1px dashed var(--border); font: 500 .66rem/1.4 var(--font-mono, ui-monospace, monospace); color: var(--ink-muted);
  animation: pds-lost-log .7s var(--pds-lost-ease) 1.1s both; }
.pds-lost .pds-lost__tick { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; font-size: .6rem; color: var(--surface); background: var(--accent-deep); }
.pds-lost .pds-lost__chip { padding: 0 .4rem; border-radius: 999px; font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--primary-deep); background: var(--primary-tint); }
@container (max-width: 360px) {
  .pds-lost .pds-lost__page { padding: .7rem .8rem .9rem; }
  .pds-lost .pds-lost__code { height: 64px; }
  .pds-lost .pds-lost__four { font-size: 3.7rem; }
  .pds-lost .pds-lost__zero { scale: .86; }
  .pds-lost .pds-lost__title { margin-top: .35rem; font-size: 1.08rem; }
  .pds-lost .pds-lost__text { margin-bottom: .65rem; font-size: .76rem; }
  .pds-lost .pds-lost__links { gap: .35rem; }
  .pds-lost .pds-lost__link { padding: .38rem .65rem; font-size: .74rem; }
  .pds-lost .pds-lost__link svg { display: none; }
  .pds-lost .pds-lost__log { margin-top: .6rem; padding-top: .55rem; }
}
@keyframes pds-lost-orbit { 0% { offset-distance: 0%; z-index: 4; } 49.9% { z-index: 4; } 50% { offset-distance: 50%; z-index: 0; } 100% { offset-distance: 100%; z-index: 0; } }
@keyframes pds-lost-bob { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-3px); } }
@keyframes pds-lost-sway { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes pds-lost-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes pds-lost-log { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- PDS-82 Toast Stack ---------- */
.pds-toasts, .pds-toasts * { box-sizing: border-box; }
.pds-toasts { --pds-toasts-ease: cubic-bezier(.22, 1, .36, 1);
  --pds-toasts-ok: color-mix(in srgb, #16a34a 78%, var(--ink)); --pds-toasts-info: var(--primary);
  --pds-toasts-warn: color-mix(in srgb, #d97706 84%, var(--ink)); --pds-toasts-bad: color-mix(in srgb, #dc2626 82%, var(--ink));
  container-type: inline-size; width: min(100%, 520px); margin: 0 auto; color: var(--ink); text-align: start; line-height: 1.45; }
.pds-toasts :where(button) { margin: 0; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pds-toasts :where(button):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.pds-toasts :where(p, ul, ol) { margin: 0; padding: 0; }
.pds-toasts [data-kind="success"] { --pds-toasts-k: var(--pds-toasts-ok); }
.pds-toasts [data-kind="info"] { --pds-toasts-k: var(--pds-toasts-info); }
.pds-toasts [data-kind="warning"] { --pds-toasts-k: var(--pds-toasts-warn); }
.pds-toasts [data-kind="error"] { --pds-toasts-k: var(--pds-toasts-bad); }
.pds-toasts__win { position: relative; isolation: isolate; height: 400px; overflow: hidden; overflow: clip; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 30px 60px -42px color-mix(in srgb, var(--ink) 60%, transparent); }
.pds-toasts__chrome { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: var(--surface-sunk); border-bottom: 1px solid var(--border); }
.pds-toasts__chrome i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.pds-toasts__chrome span { flex: 1; min-width: 0; margin-left: 8px; padding: 2px 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-radius: 99px;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: .66rem; color: var(--ink-muted); background: var(--surface); }
/* a side bar of actions, and a main area where the messages land (top right) so they never cover the buttons */
.pds-toasts__page { display: grid; grid-template-columns: 158px minmax(0, 1fr); gap: 1rem; height: calc(100% - 34px); padding: 1rem; }
.pds-toasts__side { display: flex; flex-direction: column; min-width: 0; }
.pds-toasts__eyebrow { font-family: var(--font-mono, ui-monospace, monospace); font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.pds-toasts__title { margin-top: .2rem; font-family: var(--font-display, Georgia, serif); font-size: 1.22rem; font-weight: 600; line-height: 1.2; }
.pds-toasts__hint { margin-top: .4rem; font-size: .76rem; color: var(--ink-muted); }
.pds-toasts__btns { display: grid; gap: .4rem; margin-top: auto; padding-top: .8rem; }
.pds-toasts__fire { display: flex; align-items: center; gap: .55rem; min-height: 40px; padding: .4rem .75rem; border-radius: 12px;
  border: 1px solid var(--border-strong); background: var(--surface); font-size: .82rem; font-weight: 600; text-align: start;
  transition: transform .35s var(--pds-toasts-ease), border-color .25s, box-shadow .35s var(--pds-toasts-ease); }
:is(.pds-toasts__fire:hover, .pds-toasts__fire:focus-visible, .is-playing .pds-toasts__fire) { transform: translateX(3px); border-color: color-mix(in srgb, var(--pds-toasts-k) 60%, var(--border-strong));
  box-shadow: 0 12px 22px -16px color-mix(in srgb, var(--pds-toasts-k) 90%, transparent); }
.pds-toasts__fire:active { transform: scale(.97); }
.pds-toasts__dot { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--pds-toasts-k);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pds-toasts-k) 22%, transparent); }
.pds-toasts__main { display: flex; flex-direction: column; min-width: 0; padding: .85rem; overflow: hidden; border-radius: 14px; background: var(--surface-sunk); }
.pds-toasts__mhead { font-family: var(--font-display, Georgia, serif); font-size: 1rem; font-weight: 600; }
.pds-toasts__rows { display: grid; gap: .4rem; margin-top: .65rem; list-style: none; }
.pds-toasts__rows li { display: flex; align-items: center; gap: .55rem; min-width: 0; padding: .55rem .6rem; border-radius: 11px; font-size: .78rem;
  background: var(--surface); border: 1px solid var(--border); }
.pds-toasts__rows i { flex: none; width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, var(--primary-tint), color-mix(in srgb, var(--accent) 50%, var(--surface))); }
.pds-toasts__rows li:nth-child(even) i { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 50%, var(--surface)), var(--primary-tint)); }
.pds-toasts__rows b { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.pds-toasts__rows span { padding: .08rem .45rem; border-radius: 99px; border: 1px solid var(--border-strong); white-space: nowrap;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.pds-toasts__note { display: flex; align-items: flex-start; gap: .45rem; margin-top: auto; padding-top: .7rem; font-size: .72rem; color: var(--ink-muted); }
.pds-toasts__note svg { flex: none; width: 16px; height: 16px; margin-top: .05rem; fill: none; stroke: var(--primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* the stack: newest on top, older ones slide down */
.pds-toasts__stack { position: absolute; z-index: 3; top: calc(34px + .75rem); right: .75rem; display: flex; flex-direction: column;
  width: min(calc(100% - 1.5rem), 278px); list-style: none; pointer-events: none; clip-path: inset(0 -400px -400px -400px); }
.pds-toasts__stack::after { content: "Paused while you read"; align-self: flex-end; padding: .2rem .6rem; border-radius: 99px;
  font-size: .64rem; font-weight: 700; color: var(--ink-muted); background: var(--surface); border: 1px solid var(--border);
  opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .4s var(--pds-toasts-ease); }
.pds-toasts__stack.is-paused::after { opacity: 1; transform: none; }
.pds-toasts__item { margin-bottom: 8px; pointer-events: auto;
  transition: margin .45s var(--pds-toasts-ease), opacity .3s ease, transform .5s var(--pds-toasts-ease); }
.pds-toasts__item.is-new { opacity: 0; transform: translateY(-16px) scale(.94); transition: none; }
.pds-toasts__item.is-leaving { opacity: 0; transform: translateX(45%) scale(.96); pointer-events: none; }
.pds-toasts__card { position: relative; display: flex; align-items: flex-start; gap: .6rem; padding: .65rem .45rem .75rem .65rem; overflow: hidden; border-radius: 14px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--pds-toasts-k) 10%, transparent), transparent 55%), color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--pds-toasts-k) 24%, var(--border));
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 18px 34px -20px color-mix(in srgb, var(--ink) 50%, transparent), 0 2px 6px -3px color-mix(in srgb, var(--ink) 25%, transparent); }
.pds-toasts__icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  color: var(--surface); background: var(--pds-toasts-k); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pds-toasts-k) 16%, transparent); }
.pds-toasts__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1); }
.pds-toasts__item.is-new .pds-toasts__icon svg { transform: scale(.3) rotate(-40deg); }
.pds-toasts__copy { flex: 1; min-width: 0; }
.pds-toasts__head { font-size: .84rem; font-weight: 700; line-height: 1.3; }
.pds-toasts__body { margin-top: .1rem; font-size: .74rem; line-height: 1.4; color: var(--ink-muted); }
.pds-toasts__acts { flex: none; display: flex; align-items: center; gap: .1rem; }
.pds-toasts__undo { padding: .3rem .55rem; border: 0; border-radius: 8px; font-size: .75rem; font-weight: 700;
  color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); transition: background .2s; }
.pds-toasts__undo:hover { background: color-mix(in srgb, var(--primary) 20%, transparent); }
.pds-toasts__undo[hidden] { display: none; }
.pds-toasts__x { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px;
  color: var(--ink-muted); background: none; transition: background .2s, color .2s; }
.pds-toasts__x:hover { color: var(--ink); background: var(--surface-sunk); }
.pds-toasts__x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.pds-toasts__time { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--pds-toasts-k) 14%, transparent); }
.pds-toasts__time i { display: block; height: 100%; background: var(--pds-toasts-k); transform-origin: left center; transition: opacity .3s; }
.pds-toasts__stack.is-paused .pds-toasts__time i { opacity: .45; }
.pds-toasts__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@container (max-width: 440px) {
  .pds-toasts .pds-toasts__page { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: .7rem; padding: .95rem .9rem .8rem; }
  .pds-toasts .pds-toasts__main { padding: 0; background: none; }
  .pds-toasts .pds-toasts__mhead, .pds-toasts .pds-toasts__rows { display: none; }
  .pds-toasts .pds-toasts__note { padding-top: 0; }
  .pds-toasts .pds-toasts__btns { grid-template-columns: repeat(2, 1fr); }
  .pds-toasts .pds-toasts__fire { justify-content: center; }
  .pds-toasts .pds-toasts__stack { right: .6rem; width: calc(100% - 1.2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .pds-toasts *, .pds-toasts *::before, .pds-toasts *::after { transition: none !important; animation: none !important; }
}

/* ---------- PDS-83 Calm Modal ---------- */
.pds-calm, .pds-calm * { box-sizing: border-box; }
.pds-calm { --pds-calm-ease: cubic-bezier(.22, 1, .36, 1); --pds-calm-shade: color-mix(in srgb, var(--primary-deep) 16%, #05070d);
  --pds-calm-good: color-mix(in srgb, var(--accent-deep) 88%, var(--ink));
  container-type: inline-size; position: relative; isolation: isolate; width: min(100%, 520px); height: 400px; margin: 0 auto; overflow: hidden; overflow: clip;
  border-radius: 18px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); text-align: start; line-height: 1.45;
  box-shadow: 0 30px 60px -42px color-mix(in srgb, var(--ink) 60%, transparent); }
.pds-calm :where(button, input) { margin: 0; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.pds-calm :where(button) { cursor: pointer; }
.pds-calm :where(button):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.pds-calm :where(p) { margin: 0; }
.pds-calm__chrome { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: var(--surface-sunk); border-bottom: 1px solid var(--border); }
.pds-calm__chrome i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.pds-calm__chrome span { flex: 1; min-width: 0; margin-left: 8px; padding: 2px 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-radius: 99px;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: .66rem; color: var(--ink-muted); background: var(--surface); }
.pds-calm__page { height: calc(100% - 34px); padding: .9rem 1.2rem 1rem;
  background: radial-gradient(90% 70% at 100% 0%, var(--primary-tint), transparent 70%); }
.pds-calm__nav { display: flex; align-items: center; gap: 1rem; font-size: .76rem; color: var(--ink-muted); }
.pds-calm__nav b { margin-right: auto; font-family: var(--font-display, Georgia, serif); font-size: 1rem; font-weight: 600; color: var(--ink); }
.pds-calm__eyebrow { margin-top: 1.3rem; font-family: var(--font-mono, ui-monospace, monospace); font-size: .64rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--primary); }
.pds-calm__title { margin-top: .3rem; max-width: 19ch; font-family: var(--font-display, Georgia, serif); font-size: 1.55rem; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.pds-calm__text { margin-top: .45rem; font-size: .85rem; color: var(--ink-muted); }
.pds-calm__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-top: 1rem; }
.pds-calm__open, .pds-calm__send { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: .55rem 1.15rem; border: 0; border-radius: 999px;
  font-size: .86rem; font-weight: 700; color: var(--bg); background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  box-shadow: 0 14px 26px -16px color-mix(in srgb, var(--primary) 85%, transparent);
  transition: transform .35s var(--pds-calm-ease), box-shadow .35s var(--pds-calm-ease); }
:is(.pds-calm__open:hover, .pds-calm__open:focus-visible, .is-playing .pds-calm__open), .pds-calm__send:is(:hover, :focus-visible) { transform: translateY(-2px);
  box-shadow: 0 18px 30px -16px color-mix(in srgb, var(--primary) 90%, transparent); }
.pds-calm__open:active, .pds-calm__send:active { transform: scale(.97); }
.pds-calm__ghost, .pds-calm__plain { padding: .4rem .2rem; border: 0; background: none; font-size: .82rem; font-weight: 600; color: var(--ink-muted);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .25em; transition: color .2s; }
.pds-calm__ghost:hover, .pds-calm__plain:hover { color: var(--ink); }
.pds-calm__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: 1.4rem; }
.pds-calm__tiles i { height: 92px; border-radius: 14px; background: linear-gradient(160deg, var(--primary-tint), color-mix(in srgb, var(--accent) 50%, var(--surface))); }
.pds-calm__tiles i:nth-child(2) { background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 45%, var(--surface)), var(--primary-tint)); }
.pds-calm__tiles i:nth-child(3) { background: linear-gradient(160deg, var(--primary), var(--accent)); }
/* the pop-up layer covers the mini page only, never the real screen */
.pds-calm__layer { position: absolute; inset: 34px 0 0; z-index: 5; display: grid; place-items: center; padding: .8rem; visibility: hidden; pointer-events: none;
  transition: visibility 0s .45s; }
.pds-calm__layer.is-open { visibility: visible; pointer-events: auto; transition: none; }
.pds-calm__layer--offer { place-items: end center; }
.pds-calm__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--pds-calm-shade) 42%, transparent);
  -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1); opacity: 0; transition: opacity .4s ease; }
.pds-calm__layer.is-open .pds-calm__scrim { opacity: 1; }
.pds-calm__dlg { position: relative; width: min(100%, 340px); max-height: 100%; overflow-y: auto; scrollbar-width: thin; padding: 1rem 1.1rem 1rem; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 40px 70px -30px color-mix(in srgb, var(--pds-calm-shade) 75%, transparent), 0 2px 8px -4px color-mix(in srgb, var(--pds-calm-shade) 40%, transparent);
  opacity: 0; transform: translateY(14px) scale(.94); transition: opacity .3s ease, transform .5s var(--pds-calm-ease); }
.pds-calm__layer.is-open .pds-calm__dlg { opacity: 1; transform: none; }
.pds-calm__head { display: flex; align-items: center; gap: .6rem; }
.pds-calm__badge { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  color: var(--bg); background: linear-gradient(135deg, var(--primary), var(--primary-deep)); }
.pds-calm__h { flex: 1; min-width: 0; font-family: var(--font-display, Georgia, serif); font-size: 1.2rem; font-weight: 600; line-height: 1.2; }
.pds-calm__x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; color: var(--ink-muted); background: var(--surface-sunk);
  transition: color .2s, background .2s, transform .35s var(--pds-calm-ease); }
.pds-calm__x:is(:hover, :focus-visible) { color: var(--ink); transform: rotate(90deg); }
.pds-calm__x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.pds-calm__sub { margin-top: .4rem; font-size: .8rem; color: var(--ink-muted); }
.pds-calm__form { display: grid; gap: .55rem; }
.pds-calm__form[hidden], .pds-calm__done[hidden] { display: none; }
.pds-calm__field { display: grid; gap: .3rem; margin-top: .25rem; font-size: .74rem; font-weight: 600; color: var(--ink-muted); }
.pds-calm__input { width: 100%; height: 44px; padding: 0 .85rem; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-sunk);
  font-size: 1rem; font-weight: 400; color: var(--ink); caret-color: var(--primary); transition: border-color .2s, box-shadow .3s, background-color .2s; }
.pds-calm__input::placeholder { color: var(--ink-faint); opacity: 1; }
.pds-calm__input:focus { outline: 0; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent); }
.pds-calm__input[aria-invalid="true"] { border-color: color-mix(in srgb, #dc2626 78%, var(--ink)); }
.pds-calm__err { min-height: 0; margin-top: -.2rem; font-size: .74rem; font-weight: 600; color: color-mix(in srgb, #dc2626 78%, var(--ink)); }
.pds-calm__err:empty { display: none; }
.pds-calm__days { min-width: 0; margin: 0; padding: 0; border: 0; }
.pds-calm__days legend { margin-bottom: .3rem; padding: 0; font-size: .74rem; font-weight: 600; color: var(--ink-muted); }
.pds-calm__chips { display: flex; gap: .35rem; }
.pds-calm__chips label { position: relative; flex: 1; min-width: 0; }
.pds-calm__chips input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pds-calm__chips span { display: grid; place-items: center; height: 36px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface);
  font-size: .78rem; font-weight: 600; transition: background .25s, border-color .25s, color .25s, transform .35s var(--pds-calm-ease); }
.pds-calm__chips input:hover + span { border-color: var(--primary); }
.pds-calm__chips input:checked + span { color: var(--bg); background: var(--primary); border-color: var(--primary); transform: translateY(-1px); }
.pds-calm__chips input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.pds-calm__form .pds-calm__send { width: 100%; margin-top: .2rem; }
.pds-calm__done { display: grid; justify-items: center; gap: .2rem; padding: .4rem 0 .2rem; text-align: center; animation: pds-calm-in .5s var(--pds-calm-ease); }
.pds-calm__done .pds-calm__send { margin-top: .7rem; }
.pds-calm__tick { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: .45rem; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface)); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 8%, transparent);
  animation: pds-calm-pop .6s cubic-bezier(.34, 1.56, .64, 1); }
.pds-calm__tick svg { width: 28px; height: 28px; fill: none; stroke: var(--pds-calm-good); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22; animation: pds-calm-draw .55s .2s var(--pds-calm-ease) forwards; }
.pds-calm__keys { margin-top: .75rem; text-align: center; font-size: .68rem; color: var(--ink-faint); }
.pds-calm__keys b { font-weight: 700; }
/* the smaller "before you go" offer slides up from the bottom */
.pds-calm__dlg--offer { width: min(100%, 300px); padding: 1.1rem 1.1rem 1rem; text-align: center; transform: translateY(40px);
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 70%), var(--surface); }
.pds-calm__dlg--offer .pds-calm__x { position: absolute; top: .6rem; right: .6rem; width: 28px; height: 28px; }
.pds-calm__tag { display: inline-block; padding: .2rem .65rem; border-radius: 99px; font-family: var(--font-mono, ui-monospace, monospace); font-size: .62rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: color-mix(in srgb, var(--gold) 26%, var(--surface)); }
.pds-calm__dlg--offer .pds-calm__h { margin-top: .5rem; padding: 0 1rem; }
.pds-calm__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .8rem; margin-top: .85rem; }
.pds-calm__note { margin-top: .5rem; font-size: .74rem; font-weight: 600; color: var(--primary); }
.pds-calm__note:empty { display: none; }
.pds-calm__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@container (max-width: 400px) {
  .pds-calm .pds-calm__page { padding: .8rem .95rem; }
  .pds-calm .pds-calm__nav span { display: none; }
  .pds-calm .pds-calm__title { font-size: 1.32rem; }
  .pds-calm .pds-calm__layer { padding: .6rem; }
  .pds-calm .pds-calm__dlg { padding: .9rem .85rem; }
  .pds-calm .pds-calm__chips { gap: .25rem; }
}
@keyframes pds-calm-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes pds-calm-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes pds-calm-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pds-calm *, .pds-calm *::before, .pds-calm *::after { transition: none !important; animation: none !important; }
  .pds-calm__tick svg { stroke-dashoffset: 0; }
}

/* ---------- PDS-84 Access Menu ---------- */
.pds-access, .pds-access * { box-sizing: border-box; }
.pds-access { --pds-access-ease: cubic-bezier(.22, 1, .36, 1); --pds-access-good: color-mix(in srgb, var(--accent-deep) 88%, var(--ink));
  container: pds-access / inline-size; position: relative; isolation: isolate; display: flex; flex-direction: column;
  width: min(100%, 520px); height: 410px; margin: 0 auto; overflow: hidden; overflow: clip; border-radius: 20px; text-align: start; line-height: 1.5;
  color: var(--ink); background: var(--surface); border: 1px solid var(--border); box-shadow: 0 30px 60px -42px color-mix(in srgb, var(--ink) 60%, transparent); }
.pds-access :where(button) { margin: 0; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pds-access :where(button, [tabindex]):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.pds-access :where(p) { margin: 0; }
.pds-access__top { flex: none; display: flex; align-items: center; height: 54px; padding: 0 .6rem 0 1.1rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.pds-access__brand { font-family: var(--font-display, Georgia, serif); font-size: 1.08rem; font-weight: 600; white-space: nowrap; }
.pds-access__nav { display: flex; gap: 1rem; margin-left: auto; font-size: .8rem; color: var(--ink-muted); }
.pds-access__nav i { font-style: normal; }
.pds-access__toggle { flex: none; display: inline-flex; align-items: center; gap: .4rem; height: 38px; margin-left: 1rem; padding: 0 .95rem 0 .3rem; border: 0; border-radius: 999px;
  font-size: .8rem; font-weight: 700; color: var(--bg); background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--primary) 85%, transparent); transition: box-shadow .35s var(--pds-access-ease); }
.pds-access__toggle svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.pds-access__toggle .pds-access__dot-head { fill: currentColor; stroke: none; }
:is(.pds-access__toggle:hover, .pds-access__toggle:focus-visible, .is-playing .pds-access__toggle) svg { transform: rotate(-18deg) scale(1.06); }
.pds-access__toggle[aria-expanded="true"] { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 24%, transparent); }
.pds-access__main { position: relative; flex: 1; min-height: 0; }
/* the article: every setting below changes only this card, through classes on the sample root */
.pds-access__doc { --pds-access-soft: var(--ink-muted); --pds-access-link: var(--primary);
  container: pds-access-doc / inline-size; position: absolute; inset: 0; overflow-y: auto; scrollbar-width: thin; padding: 1rem 1.15rem 1.1rem;
  font-size: .92rem; line-height: 1.55; color: var(--ink); background: var(--surface);
  transition: right .5s var(--pds-access-ease), font-size .3s, letter-spacing .3s, word-spacing .3s, line-height .3s, background-color .3s; }
.pds-access__doc:focus-visible { outline-offset: -3px; }
.pds-access.is-open .pds-access__doc { right: 252px; }
.pds-access__body { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.pds-access__eyebrow { display: flex; align-items: flex-start; gap: .5em; font-family: var(--font-mono, ui-monospace, monospace); font-size: .7em; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pds-access-soft); }
.pds-access__live-dot { flex: none; width: .75em; height: .75em; margin-top: .4em; margin-top: calc((1lh - .75em) / 2); border-radius: 50%; background: var(--accent); animation: pds-access-pulse 1.8s ease-out infinite; }
.pds-access__title { margin-top: .3em; font-family: var(--font-display, Georgia, serif); font-size: 1.5em; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.pds-access__text { margin-top: .55em; color: var(--pds-access-soft); }
.pds-access__link { display: inline; padding: 0 .1em; border: 0; border-radius: 4px; background: none; font-weight: 600; letter-spacing: inherit; word-spacing: inherit; line-height: inherit;
  color: var(--pds-access-link); text-decoration: underline 1px color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .2em; }
.pds-access__ticker { margin-top: .9em; padding: .45em 0; overflow: hidden; white-space: nowrap; font-size: .78em; font-weight: 600; color: var(--pds-access-soft);
  border-block: 1px solid var(--border); -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 10% 90%, transparent); mask-image: linear-gradient(90deg, transparent, var(--ink) 10% 90%, transparent); }
.pds-access__reel { display: flex; width: max-content; animation: pds-access-tick 16s linear infinite; }
.pds-access__art { position: relative; height: 104px; margin-top: .9rem; overflow: hidden; border-radius: 16px; transition: filter .3s, box-shadow .3s;
  background: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--gold) 70%, transparent), transparent 55%), linear-gradient(135deg, var(--primary), var(--accent)); }
.pds-access__cup { position: absolute; left: 16%; bottom: 20px; width: 46px; height: 34px; border-radius: 4px 4px 20px 20px; background: color-mix(in srgb, #fff 90%, var(--primary)); }
.pds-access__cup::before { content: ""; position: absolute; left: -11px; right: -11px; bottom: -8px; height: 8px; border-radius: 99px; background: color-mix(in srgb, #fff 78%, var(--primary)); }
.pds-access__cup::after { content: ""; position: absolute; top: 6px; right: -13px; width: 16px; height: 15px; border-radius: 50%; border: 4px solid color-mix(in srgb, #fff 90%, var(--primary)); }
.pds-access__steam { position: absolute; bottom: 58px; left: calc(16% + 10px); width: 5px; height: 26px; border-radius: 99px; filter: blur(1.5px); opacity: 0;
  background: linear-gradient(to top, color-mix(in srgb, #fff 85%, var(--primary-tint)), transparent); animation: pds-access-steam 2.6s ease-in-out infinite; }
.pds-access__steam:nth-child(2) { left: calc(16% + 21px); animation-delay: .8s; }
.pds-access__steam:nth-child(3) { left: calc(16% + 32px); animation-delay: 1.6s; }
.pds-access__stamp { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; text-align: center;
  font-size: .56rem; font-weight: 800; line-height: 1.15; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--surface); }
.pds-access__stamp::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px dashed color-mix(in srgb, #fff 85%, var(--gold)); animation: pds-access-spin 10s linear infinite; }
.pds-access__cta { justify-self: start; margin-top: .95em; padding: .62em 1.25em; border: 0; border-radius: 999px; font-size: .9em; font-weight: 700; letter-spacing: inherit;
  color: var(--bg); background: linear-gradient(135deg, var(--primary), var(--primary-deep)); box-shadow: 0 12px 22px -14px color-mix(in srgb, var(--primary) 85%, transparent); }
.pds-access__msg { margin-top: .5em; font-size: .78em; font-weight: 600; color: var(--primary); }
.pds-access__msg:empty { display: none; }
@container pds-access-doc (min-width: 400px) {
  .pds-access .pds-access__body { grid-template-columns: minmax(0, 1fr) 150px; column-gap: 1.1rem; }
  .pds-access .pds-access__body > * { grid-column: 1; }
  .pds-access .pds-access__art { grid-column: 2; grid-row: 1 / 4; height: auto; min-height: 140px; margin-top: 0; }
  .pds-access .pds-access__ticker { grid-column: 1 / -1; }
}
/* the settings */
.pds-access.is-t90 .pds-access__doc { font-size: .83rem; }
.pds-access.is-t115 .pds-access__doc { font-size: 1.06rem; }
.pds-access.is-t130 .pds-access__doc { font-size: 1.2rem; }
.pds-access.is-contrast .pds-access__doc { --pds-access-soft: var(--ink); --pds-access-link: var(--ink); background: var(--bg); }
.pds-access.is-contrast .pds-access__text { font-weight: 500; }
.pds-access.is-contrast .pds-access__ticker { border-color: var(--ink); }
.pds-access.is-contrast .pds-access__art { filter: grayscale(1) contrast(1.3); box-shadow: inset 0 0 0 2px var(--ink); }
.pds-access.is-contrast .pds-access__cta { color: var(--bg); background: var(--ink); box-shadow: none; }
.pds-access.is-links .pds-access__link { color: var(--primary-deep); text-decoration: underline 2px currentColor; text-underline-offset: .22em;
  background: color-mix(in srgb, var(--gold) 24%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 24%, transparent); }
.pds-access.is-contrast.is-links .pds-access__link { color: var(--ink); }
.pds-access.is-links .pds-access__cta { text-decoration: underline 2px; text-underline-offset: .2em; outline: 2px solid color-mix(in srgb, var(--gold) 75%, transparent); outline-offset: 3px; }
.pds-access.is-spacing .pds-access__doc { letter-spacing: .05em; word-spacing: .16em; line-height: 1.9; }
.pds-access.is-spacing .pds-access__title { font-family: inherit; letter-spacing: .02em; line-height: 1.35; }
.pds-access.is-spacing .pds-access__text { margin-top: 1em; }
.pds-access.is-still .pds-access__doc *, .pds-access.is-still .pds-access__doc *::before, .pds-access.is-still .pds-access__doc *::after { animation-play-state: paused !important; }
/* the panel */
.pds-access__panel { position: absolute; z-index: 2; top: .6rem; right: .6rem; bottom: .6rem; display: flex; flex-direction: column; gap: .2rem; width: 240px;
  padding: .6rem; overflow-y: auto; scrollbar-width: thin; border-radius: 16px; background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: 0 24px 48px -26px color-mix(in srgb, var(--ink) 55%, transparent);
  visibility: hidden; pointer-events: none; opacity: 0; transform: translateX(18px) scale(.98); transform-origin: top right;
  transition: opacity .3s, transform .5s var(--pds-access-ease), visibility 0s .5s; }
.pds-access.is-open .pds-access__panel { visibility: visible; pointer-events: auto; opacity: 1; transform: none; transition: opacity .3s, transform .5s var(--pds-access-ease); }
.pds-access__panel:focus-visible { outline-offset: -3px; }
.pds-access__phead { display: flex; align-items: center; justify-content: space-between; padding: 0 0 .3rem .4rem; }
.pds-access__ptitle { font-family: var(--font-display, Georgia, serif); font-size: 1rem; font-weight: 600; }
.pds-access__close { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; color: var(--ink-muted); background: var(--surface-sunk); }
.pds-access__close:hover { color: var(--ink); }
.pds-access__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.pds-access__size { display: flex; align-items: center; gap: .45rem; margin-bottom: .25rem; padding: .4rem .4rem .4rem .55rem; border-radius: 12px; background: var(--surface-sunk); }
.pds-access__lbl { font-size: .8rem; font-weight: 600; }
.pds-access__pct { margin-right: auto; font-family: var(--font-mono, ui-monospace, monospace); font-size: .7rem; color: var(--ink-muted); }
.pds-access__seg { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.pds-access__seg button { display: grid; place-items: center; width: 32px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none;
  font-family: var(--font-display, Georgia, serif); font-weight: 700; line-height: 1; transition: background .2s, color .2s; }
.pds-access__seg button sup { font-size: .7em; }
.pds-access__seg [data-size="-1"] { font-size: .8rem; }
.pds-access__seg [data-size="0"] { font-size: .95rem; }
.pds-access__seg [data-size="1"] { font-size: 1.1rem; }
.pds-access__seg button:hover { background: var(--surface-sunk); }
.pds-access__seg button.is-on { color: var(--primary-deep); background: var(--primary-tint); }
.pds-access__seg button[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }
.pds-access__sw { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 38px; padding: .4rem .5rem; border: 0; border-radius: 11px; background: none;
  text-align: start; font-size: .82rem; font-weight: 600; transition: background .2s; }
.pds-access__sw:hover { background: var(--surface-sunk); }
.pds-access__sw svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--ink-muted); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.pds-access__sw .pds-access__fill { fill: var(--ink-muted); stroke: none; transition: fill .3s; }
.pds-access__sw span { flex: 1; min-width: 0; }
.pds-access__track { position: relative; flex: none; width: 36px; height: 20px; border-radius: 99px; background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1px var(--border-strong); transition: background .3s, box-shadow .3s; }
.pds-access__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-muted);
  transition: transform .4s var(--pds-access-ease), background .3s; }
.pds-access__sw[aria-checked="true"] svg { stroke: var(--primary); }
.pds-access__sw[aria-checked="true"] .pds-access__fill { fill: var(--primary); }
.pds-access__sw[aria-checked="true"] .pds-access__track { background: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.pds-access__sw[aria-checked="true"] .pds-access__track::after { transform: translateX(16px); background: var(--bg); }
.pds-access__pfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; margin-top: auto; padding: .5rem .2rem 0 .2rem; border-top: 1px solid var(--border); }
.pds-access__reset { padding: .4rem .85rem; border-radius: 99px; border: 1px solid var(--border-strong); background: var(--surface); font-size: .76rem; font-weight: 700; transition: border-color .2s, color .2s; }
.pds-access__reset:hover { color: var(--primary); border-color: var(--primary); }
.pds-access__chip { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-mono, ui-monospace, monospace); font-size: .58rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.pds-access__chip::before { content: "✓"; font-size: .8rem; color: var(--pds-access-good); }
.pds-access__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@container pds-access (max-width: 459px) {
  .pds-access .pds-access__nav, .pds-access .pds-access__tlabel { display: none; }
  .pds-access .pds-access__toggle { margin-left: auto; padding: 0 .3rem; }
  .pds-access .pds-access__top { padding-left: .95rem; }
  .pds-access.is-open .pds-access__doc { right: 0; }
  .pds-access .pds-access__doc { padding: .9rem .95rem 1rem; }
  .pds-access .pds-access__panel { top: auto; left: .5rem; right: .5rem; width: auto; max-height: calc(100% - 4.6rem); transform: translateY(24px); transform-origin: bottom center;
    display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: .3rem;
    box-shadow: 0 -18px 40px -24px color-mix(in srgb, var(--ink) 55%, transparent); }
  .pds-access.is-open .pds-access__panel { transform: none; }
  .pds-access .pds-access__phead, .pds-access .pds-access__size, .pds-access .pds-access__pfoot { grid-column: 1 / -1; }
  .pds-access .pds-access__size { margin-bottom: 0; }
  .pds-access .pds-access__sw { min-height: 48px; padding: .4rem .45rem .4rem .6rem; gap: .35rem; font-size: .74rem; line-height: 1.25; background: var(--surface-sunk); }
  .pds-access .pds-access__sw svg { display: none; }
}
@keyframes pds-access-pulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } to { box-shadow: 0 0 0 .55em color-mix(in srgb, var(--accent) 0%, transparent); } }
@keyframes pds-access-tick { to { transform: translateX(-50%); } }
@keyframes pds-access-steam { 0% { opacity: 0; transform: translateY(8px) scaleX(1); } 35% { opacity: .95; } 100% { opacity: 0; transform: translateY(-22px) scaleX(1.6); } }
@keyframes pds-access-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pds-access *, .pds-access *::before, .pds-access *::after { transition: none !important; animation: none !important; }
  .pds-access__steam { opacity: .7; }
}