/* Four tactile discoveries. Skin stays photographic; glass and light belong to the UI. */
#quest-passport{gap:38px;margin:54px auto 0;max-width:740px;align-items:flex-start}
.skin-bauble{width:144px;flex:0 1 144px;display:flex;flex-direction:column;align-items:center;background:transparent;padding:21px 0 0;position:relative;color:var(--ink);border-radius:12px}
.skin-bauble:focus-visible{outline:2px solid #00aeef;outline-offset:8px}
.bauble-hanger{position:absolute;top:9px;left:calc(50% - 11px);width:22px;height:14px;border-radius:4px 4px 1px 1px;border:1px solid #aebfcb;background:repeating-linear-gradient(90deg,#d2dde6 0 2px,#fff 3px 5px);z-index:2;box-shadow:0 1px 3px #405e6b12}
.bauble-hanger:before{content:'';position:absolute;width:10px;height:10px;border:1px solid #9fb6c5;border-radius:50%;top:-10px;left:5px}
.bauble-globe{width:124px;height:124px;display:block;position:relative;isolation:isolate;overflow:hidden;border-radius:50%;border:1px solid #c1d5e1;background:#e8f3fa;box-shadow:0 12px 22px -12px #3d718f6b,inset 0 0 0 3px white;transition:transform .65s cubic-bezier(.2,.7,.2,1),box-shadow .65s}
.bauble-globe>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 39%;transition:opacity .85s ease,transform 1.1s ease;transform:scale(1.025)}
.bauble-globe .bauble-after{opacity:0}
.bauble-glass{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 27% 17%,#ffffffe8,transparent 17%),radial-gradient(ellipse at 68% 88%,#e7faff80,transparent 30%);box-shadow:inset 4px 4px 8px #fff6,inset -4px -5px 10px #638aa436,inset 0 0 0 3px #ffffff5e;pointer-events:none}
.bauble-sheen{position:absolute;inset:-35%;background:linear-gradient(115deg,transparent 35%,color-mix(in srgb,var(--chapter-color) 40%,transparent) 44%,#fffffff5 49%,color-mix(in srgb,var(--chapter-color) 45%,transparent) 53%,transparent 63%);transform:translateX(-95%) rotate(-10deg);opacity:0;pointer-events:none;mix-blend-mode:screen}
.advent-caption .bauble-name{display:block;font:400 15px/1.4 var(--sans);margin-top:21px;letter-spacing:.01em}
.advent-caption .bauble-name>span{display:inline;font:400 17px var(--serif);color:#7d9aaf;margin-right:5px}
.bauble-invitation{display:flex;align-items:center;gap:6px;font:11px/1.5 var(--sans);color:#668699;margin-top:9px;opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s,color .4s;white-space:nowrap}
.bauble-invitation svg{width:10px;height:10px;fill:var(--chapter-color)}
.bauble-collected{position:absolute;bottom:8px;right:18px;font-size:19px;color:white;text-shadow:0 0 6px var(--chapter-color);opacity:0}
.skin-bauble.collected .bauble-collected{opacity:1}
.skin-bauble:is(:hover,:focus-visible,:active) .bauble-after{opacity:1}
.skin-bauble:is(:hover,:focus-visible,:active) .bauble-globe{transform:translateY(-4px);box-shadow:0 15px 25px -13px color-mix(in srgb,var(--chapter-color) 55%,transparent),0 0 0 3px #fff}
.skin-bauble:is(:hover,:focus-visible,:active) .bauble-sheen{animation:bauble-discovery 1.25s ease-out both}
.skin-bauble:is(:hover,:focus-visible,:active) .bauble-invitation{opacity:1;transform:none;color:var(--chapter-color)}
.advent-caption .passport-note{margin-top:21px;line-height:1.8}
.advent-caption .skin-art-note{font:9px/1.5 var(--sans);letter-spacing:.025em;color:#8ba2b2;margin:10px auto 0;max-width:none}
@keyframes bauble-discovery{0%{transform:translateX(-95%) rotate(-10deg);opacity:0}18%{opacity:.75}75%{opacity:.7}100%{transform:translateX(95%) rotate(-10deg);opacity:0}}

/* Editorial voice: a wish, set apart from the science. */
.patient-editorial{min-width:0}
.patient-quote{margin:37px 35px 0 0;padding:0 0 0 22px;border-left:1px solid #66cbeb;position:relative}
.patient-quote>span{font:9px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#009ed2}
.patient-quote p{font:italic 400 clamp(25px,2.2vw,33px)/1.12 var(--serif);color:#23495e;margin-top:11px;letter-spacing:-.015em}
.method-story{align-items:center}
.method-steps article>.method-step-icon{width:34px;flex:0 0 34px;padding-top:1px;color:#169bcd;line-height:0}
.method-step-icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}

/* Cyan bookbinding, enamel and silver embossing. */
.progress-panel{background:radial-gradient(ellipse at 90% 5%,#fff 5%,transparent 49%),linear-gradient(125deg,#f8fdff,#dff3fd 63%,#f5fbff);border-color:#97d5ee;box-shadow:0 17px 45px #3a86a114,inset 0 0 0 6px #fafeff,inset 0 0 0 7px #b7e3f4}
.progress-panel:before{left:13px;width:3px;background:linear-gradient(#a4e6fc,#00aeef 40%,#72d4f5 73%,#d1f0fb);box-shadow:3px 0 #fff}
.passport-heading .panel-eyebrow{color:#158dbb}
.passport-heading h3 em{color:#009fd7}
.passport-heading:after{color:white;text-shadow:0 0 8px #ffffff88;right:0;top:-36px;width:27px;height:43px;display:grid;place-items:center;padding-bottom:5px;background:linear-gradient(135deg,#45cef6,#00a6e2);clip-path:polygon(0 0,100% 0,100% 100%,50% 85%,0 100%)}
.passport-edition{color:#528da8}
.seal-medallion{border-color:#6bc6e9;color:#189dcc;background:linear-gradient(145deg,#fff 4%,#d8f3ff 46%,#fff 66%,#9ddcf3);box-shadow:inset 0 0 0 6px #f6fcff,inset 0 0 0 7px #9fd9ee,0 5px 13px #2690bd15}
.seal-number{color:white;background:#09afe8;left:32px;right:32px;bottom:12px;border-radius:50%;height:21px;line-height:20px;font-size:12px;box-shadow:0 2px 7px #00aeef26}.passport-seal.collected .seal-number{color:white}.passport-seal strong{color:#226a8b}.passport-seal small{color:#5b8499}
.passport-seal:is(:hover,:focus-visible) .seal-medallion{border-color:#00aeef;box-shadow:inset 0 0 0 6px #fff,inset 0 0 0 7px #7fcfea,0 6px 22px #39b5e72e}
.progress-status{border-top-color:#aedbee}.progress-panel .small-note{color:#608599}

/* Two pieces of foil, suspended in the light. */
.gift-visual{position:relative;isolation:isolate}
.floating-confetti{display:block;position:absolute;width:13px;height:9px;pointer-events:none;background:linear-gradient(130deg,#e5fbff 0%,#03b5f0 35%,#66d8ff 61%,#f2fdff 72%,#119fd0 100%);border:1px solid #a1e8ff99;box-shadow:0 3px 6px #3abfea28;animation:confetti-drift 7s ease-in-out infinite;transform:rotate(-18deg)}
.floating-confetti:after{content:'';position:absolute;width:11px;height:11px;left:-5px;top:-5px;background:linear-gradient(90deg,transparent 44%,#f8ffff 50%,transparent 56%),linear-gradient(transparent 44%,#f8ffff 50%,transparent 56%);filter:drop-shadow(0 0 2px #5bd7ff);animation:foil-glint 5s ease-in-out infinite}
.confetti-one{left:23%;top:37%;--foil-tilt:-22deg;animation-delay:-1s}
.confetti-two{right:18%;top:48%;width:10px;height:8px;--foil-tilt:27deg;animation-delay:-3.5s}
.confetti-two:after{animation-delay:-2s}
@keyframes confetti-drift{0%,100%{transform:translateY(0) rotate(var(--foil-tilt))}50%{transform:translateY(-12px) rotate(calc(var(--foil-tilt) + 15deg))}}
@keyframes foil-glint{0%,32%,68%,100%{opacity:.15;transform:scale(.6)}48%{opacity:1;transform:scale(1)}}
@media(max-width:760px){#quest-passport{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 16px;max-width:340px;margin-top:43px}.skin-bauble{width:100%;padding-top:21px}.bauble-globe{width:112px;height:112px}.bauble-name{font-size:14px;margin-top:16px}.advent-caption .bauble-name>span{font-size:17px}.advent-caption .bauble-invitation{font-size:10px;opacity:1;transform:none;color:#4d879f;margin-top:7px}.advent-caption .passport-note{margin-top:29px}.advent-caption .skin-art-note{font-size:8px;max-width:300px}.patient-quote{margin:28px 15px 7px 0;padding-left:18px}.patient-quote p{font-size:29px}.patient-quote>span{font-size:8px}.method-steps article>.method-step-icon{width:30px;flex-basis:30px}.method-step-icon svg{width:30px;height:30px}.floating-confetti{width:9px;height:7px}.confetti-two{width:8px;height:6px}.floating-confetti:after{width:8px;height:8px;left:-3px;top:-3px}}
@media(prefers-reduced-motion:reduce){.bauble-globe,.bauble-globe>img,.bauble-invitation{transition:none}.skin-bauble:is(:hover,:focus-visible,:active) .bauble-sheen,.floating-confetti,.floating-confetti:after{animation:none}.skin-bauble:is(:hover,:focus-visible,:active) .bauble-globe{transform:none}}
.seal-number{left:calc(50% - 10.5px);right:auto;width:21px}
@media(max-width:760px){.advent-caption .bauble-name{font-size:14px;margin-top:16px}.passport-heading:after{top:-31px;width:25px;height:39px}}