/* Page-scoped motion for the public portal; all assets remain self-hosted.
   The shared theme controller also joins the navigation islands on scroll. */
body.motion-site {
  --bg:#080d18; --text:#f3f6ff; --muted:#b4bfd4; --line:#ffffff1d;
  --accent:#a4e8e4; --radius:1.65rem;
  color:var(--text); background:#080d18;
  background-image:radial-gradient(ellipse at 12% 24%,#102d3538,transparent 45%),radial-gradient(ellipse at 92% 2%,#57488b2b,transparent 40%);
  overflow-x:clip;
}
.motion-site .shell {max-width:1460px;padding:0 clamp(1rem,4vw,4rem)}
.motion-site .header {position:sticky;top:.8rem;z-index:10;min-height:4.7rem;margin:1.15rem 0 1.4rem;padding:.7rem 1.1rem;gap:1rem;border:1px solid #ffffff24;border-radius:1.25rem;background:#101725e8;box-shadow:0 12px 40px #00000024;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.motion-site .brand {font-size:1.2rem;letter-spacing:.03em;white-space:nowrap}
.motion-site .brand-mark {color:#def9f4;background:linear-gradient(145deg,#9bf2de24,#8a98ed10);border:1px solid #a5e7e456;border-radius:.85rem;box-shadow:inset 0 1px #ffffff20;transition:transform .4s}
.motion-site .brand:hover .brand-mark {transform:rotate(-9deg)}
.motion-site .brand-sub {display:block;margin:0;font-size:.8rem;line-height:1.3;letter-spacing:.1em}
.motion-site .header nav {position:relative;gap:clamp(.8rem,1.5vw,1.5rem);padding:.2rem 1.2rem;border:1px solid #ffffff1f;border-radius:999px;background:#ffffff04;box-shadow:inset 0 1px #ffffff12}
.motion-site .header nav a {position:relative;font-size:.9375rem;white-space:nowrap;box-shadow:none;transition:color .2s}
.motion-site .header nav a:after {content:"";position:absolute;left:0;right:0;bottom:.05rem;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.motion-site .header nav a:hover:after,.motion-site .header nav a[aria-current]:after {transform:scaleX(1)}
.motion-site .header-action {color:#d2ede8;background:#9ee4d70e;border-color:#a2e0d232;border-radius:.8rem;min-height:44px;transition:background .25s,transform .25s;white-space:nowrap}
.motion-site .header-action:hover {background:#9ee4d722;transform:translateY(-2px)}
.motion-setting {display:flex;align-items:center;position:relative;gap:.45rem;cursor:pointer;font-size:.875rem;min-height:44px;padding:.45rem .7rem;border:1px solid #ffffff24;border-radius:.8rem;color:#bac6dc;white-space:nowrap}
.motion-setting input {width:1rem;height:1rem;margin:0;accent-color:#a4e8e4;cursor:pointer}
.motion-setting .motion-glyph {display:none}
.motion-setting:has(input:checked) {background:#a4e8e41a;color:#e9fffc;border-color:#a4e8e474}
.motion-setting:focus-within {outline:2px solid #a4e8e4;outline-offset:3px}
.motion-site .hero {min-height:525px;border:1px solid #c3d1ec2b;border-radius:1.65rem;background:#111b2b;box-shadow:0 24px 60px #00000030;isolation:isolate}
.motion-site .hero-art {object-position:65% 52%;transform:scale(1.04);animation:scene-breathe 22s ease-in-out infinite alternate;will-change:auto}
.motion-site .hero:after {background:linear-gradient(90deg,#060f21ef 0%,#070f22de 25%,#070f225c 58%,#070f2210 80%),linear-gradient(0deg,#07101c94,transparent 50%);z-index:-1}
.hero-halo {position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 84% 23%,#8885ff20,transparent 45%),radial-gradient(ellipse at 15% 90%,#83e5cd17,transparent 40%);animation:halo-drift 12s ease-in-out infinite alternate}
.motion-site .hero-copy {padding:3.25rem clamp(1.4rem,4vw,4rem);max-width:43rem}
.motion-site .eyebrow {display:flex;align-items:center;gap:.6rem;font-size:.75rem;font-weight:650;letter-spacing:.15em;color:#b9d0e1}
.eyebrow-line {display:inline-block;width:1.8rem;height:1px;background:#a4e8e4}
.motion-site h1 {font-size:clamp(2.7rem,5.6vw,5rem);line-height:1.23;letter-spacing:-.04em;font-weight:750;margin:1.65rem 0 1.25rem}
.motion-site h1 .headline-line {display:block;color:var(--text);animation:blur-arrive 1s .08s both}
.motion-site h1 .headline-accent {color:#bae7df;background:linear-gradient(100deg,#e5f8f6 0%,#9be4d6 52%,#b7bcf0 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation-delay:.2s}
.motion-site .hero-desc {color:#c1cbe0;font-size:1.0625rem;line-height:1.9;margin-bottom:1.9rem}
.motion-site .hero-copy>.eyebrow {animation:arrive .75s both}
.motion-site .hero-copy>.hero-desc {animation:blur-arrive .85s .25s both}
.motion-site .hero-actions {animation:arrive 1s .18s both;gap:.8rem}
.motion-site .button {position:relative;overflow:hidden;border-radius:.8rem;min-height:50px;padding:.75rem 1.3rem;transition:transform .25s,box-shadow .25s,background .25s;isolation:isolate}
.motion-site .primary {background:#b3e6db;color:#132a2b;box-shadow:0 6px 25px #6edaaf12}
.motion-site .primary:after {content:"";position:absolute;inset:-60% -20%;background:linear-gradient(100deg,transparent 35%,#ffffff69,transparent 65%);transform:translateX(-115%) skewX(-12deg);pointer-events:none}
.motion-site .primary:hover {background:#c9f7ec;transform:translateY(-3px);box-shadow:0 12px 30px #6edaaf25}
.motion-site .primary:hover:after {animation:sheen .7s ease-out}
.motion-site .subtle {border-color:#c1d9f343;background:#17223980;backdrop-filter:blur(8px);gap:1.5rem}
.motion-site .subtle:hover {background:#2b3b578c;transform:translateY(-3px)}
.motion-site .button .icon {width:1.2rem;height:1.2rem;transition:transform .3s}
.motion-site .button:hover .icon {transform:translate(2px,-2px)}
.scene-note {position:absolute;right:3rem;bottom:5.15rem;display:flex;gap:.85rem;align-items:center;max-width:20rem;border:1px solid #e2eff951;padding:1rem 1.1rem;border-radius:1.15rem;background:linear-gradient(135deg,#ffffff20,#1220398c);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 35px #00000035;animation:note-float 7s ease-in-out infinite;transition:border-color .3s}
.scene-note:hover {border-color:#c1f5e8}
.scene-note-icon {width:2.8rem;height:2.8rem;display:grid;place-items:center;border-radius:.85rem;background:#ffffff15;color:#d3f4e8}
.scene-note small {font-size:.8125rem;color:#c1ccdf;display:block;margin-bottom:.15rem}
.scene-note strong {font-size:1rem;display:block;font-weight:600}
.scene-note strong span {margin-left:1rem}
.motion-site .hero-caption {bottom:1.5rem;right:3rem;color:#d2c7bc;letter-spacing:.06em;font-size:.8125rem}
.motion-site .hero-caption span {color:#b4e6da;margin-right:.5rem}
.motion-site .destinations {padding:2.4rem 0 3.7rem}
.motion-site .section-heading {margin-bottom:1.15rem;align-items:center}
.motion-site .section-heading h2 {font-size:1.3rem;font-weight:650}
.motion-site .section-heading>span {font-size:.875rem;color:#9caec7}
.motion-site .card-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;perspective:1000px}
.motion-site .destination {position:relative;overflow:hidden;padding:1.3rem;border:1px solid #e4edff23;border-radius:1.25rem;background:linear-gradient(135deg,#ffffff09,#ffffff02);box-shadow:inset 0 1px #ffffff08;transition:transform .35s,border-color .35s,box-shadow .35s;isolation:isolate}
.motion-site .destination:before {content:"";position:absolute;z-index:-1;pointer-events:none;width:15rem;height:15rem;right:-6rem;top:-8rem;border-radius:50%;background:radial-gradient(circle,var(--card-accent,#b5bcff),transparent 67%);opacity:.09;transition:opacity .4s,transform .4s}
.motion-site .destination:after {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 30px #ffffff04;transition:box-shadow .35s}
.motion-site .destination:hover {transform:translateY(-7px);border-color:#a6cbd460;box-shadow:0 20px 30px #00000025}
.motion-site .destination:hover:before {opacity:.23;transform:scale(1.3)}
.motion-site .destination:hover:after {box-shadow:inset 0 1px #ffffff2c}
.motion-site .destination.library {--card-accent:#e7bf8e}
.motion-site .destination.notes {--card-accent:#96e0c6}
.motion-site .destination.collection {--card-accent:#bfa4f0}
.motion-site .card-top {margin-bottom:1.5rem}
.motion-site .tile-icon {border-radius:.9rem;width:2.7rem;height:2.7rem;background:#ffffff06;border-color:#ffffff1c;transition:transform .35s,background .35s}
.motion-site .destination:hover .tile-icon {transform:rotate(-8deg);background:#ffffff0e}
.motion-site .card-top .arrow {transition:transform .3s}
.motion-site .destination:hover .card-top .arrow {transform:translate(3px,-3px)}
.motion-site .badge {font-size:.75rem;white-space:nowrap}
.motion-site .card-kicker {letter-spacing:.16em;font-size:.75rem;margin-bottom:.55rem}
.motion-site .destination h3 {font-size:1.45rem;margin-bottom:.65rem;letter-spacing:-.03em}
.motion-site .destination>p:not(.card-kicker) {font-size:.9375rem;line-height:1.75;margin-bottom:1.7rem;color:#acbad0}
.motion-site .card-cta {font-size:.875rem;border-color:#ffffff15}
.motion-site .private-space {padding:2.8rem 0;gap:3rem;grid-template-columns:.85fr 1.8fr;border-color:#ffffff17;align-items:start}
.motion-site .private-intro {padding:.7rem 0}
.motion-site .private-intro .eyebrow {color:#97c8c1;font-size:.75rem;margin:0 0 1rem}
.motion-site .private-intro h2 {font-size:2rem;line-height:1.4;letter-spacing:-.04em;margin-bottom:1rem}
.motion-site .private-intro p {font-size:1rem;line-height:1.9}
.motion-site .private-links {grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.motion-site .private-link {min-width:0;border-color:#ffffff1e;border-radius:1rem;background:linear-gradient(120deg,#ffffff08,#ffffff03);gap:.8rem;transition:transform .3s,border-color .3s,background .3s}
.motion-site .private-link>span:not(.tile-icon) {min-width:0}
.motion-site .private-link:hover {transform:translateY(-3px);border-color:#a4e8e45e;background:#a4e8e40b}
.motion-site .private-link strong {font-size:.9375rem;line-height:1.55;overflow-wrap:anywhere}
.motion-site .private-link small {margin-top:.3rem;font-size:.875rem;line-height:1.55;color:#a5b4ca;overflow-wrap:anywhere}
.motion-site .private-link .arrow {flex:none}
.motion-site .usage {margin:1.2rem 0 0}
.motion-site .usage summary {padding:1rem 0}
.motion-site footer {padding:2.5rem 0;color:#a6b6cd;border-top:1px solid #ffffff12;margin-top:1rem}
.motion-site a:focus-visible,.motion-site summary:focus-visible {outline:2px solid #c3f5e9;outline-offset:5px}
/* Gradient edge from the member brief; bounded surfaces, no animated blur. */
.motion-site .header nav:before,.motion-site .scene-note:before,.motion-site .button:before {
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(180deg,#ffffff73 0%,#ffffff26 20%,transparent 43%,transparent 57%,#ffffff26 80%,#ffffff73 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.motion-site section[id] {scroll-margin-top:8rem}
.motion-site .collection-tabs {display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0 .5rem}
.motion-site .collection-tabs a {padding:.55rem 1rem;min-height:44px;border:1px solid #ffffff26;border-radius:999px;background:#ffffff05;color:#c8d6e9;font-size:.9375rem;transition:transform .25s,background .25s}
.motion-site .collection-tabs a:hover {background:#a4e8e41c;transform:translateY(-2px)}
.motion-site.bookmark-site .destinations {padding:1.5rem 0}
.motion-site.bookmark-site .private-link {height:100%}
.motion-site.bookmark-site .private-space {margin-top:2rem}
@keyframes blur-arrive {from{filter:blur(8px);opacity:0;transform:translateY(18px)}to{filter:blur(0);opacity:1;transform:translateY(0)}}
@keyframes arrive {from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes scene-breathe {from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(-.8%,.3%,0)}}
@keyframes halo-drift {from{opacity:.55;transform:translateX(-1%)}to{opacity:1;transform:translateX(1%)}}
@keyframes note-float {0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sheen {to{transform:translateX(115%) skewX(-12deg)}}
@supports (animation-timeline:view()) and (animation-range:entry 0% entry 35%) {
  @media(prefers-reduced-motion:no-preference) {
    .motion-site .destinations,.motion-site .private-space {animation:section-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
    @keyframes section-arrive {from{opacity:.65;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
  }
}
@media(min-width:1500px) {.motion-site .hero{min-height:560px}}
@media(max-width:1150px) {
  .motion-site .shell{padding:0 1.5rem}.motion-site .brand-sub{display:none}
  .motion-site .header{padding:.65rem .85rem;gap:.75rem}.motion-setting{font-size:.8125rem;padding:.45rem .55rem}
  .motion-site .header-action{padding:.6rem .75rem}.motion-site .header nav{gap:1rem;padding:.2rem .8rem}
  .motion-site .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.motion-site .hero-copy{max-width:36rem}
  .motion-site .private-space{grid-template-columns:1fr;gap:1.2rem}.motion-site .private-intro{max-width:38rem}
}
@media(max-width:800px) {
  .motion-site .header{flex-wrap:wrap;top:0;margin-top:.6rem;border-radius:1rem;gap:.65rem}
  .motion-site .brand{margin-right:auto}.motion-site .header nav{order:4;justify-content:center;width:100%;margin:0;gap:2rem;padding:.25rem .5rem}
  .motion-site .hero{min-height:480px}.motion-site .hero-copy{padding:2.5rem 1.8rem;max-width:34rem}
  .motion-site .hero:after{background:linear-gradient(90deg,#070f21e8,#080f22b3 48%,#070f222b),linear-gradient(0deg,#091020bb,transparent 55%)}
  .scene-note{right:1.5rem;bottom:3rem;transform:none;max-width:15rem;padding:.8rem}.scene-note strong{font-size:.9rem}.scene-note-icon{display:none}
  .motion-site .hero-caption{display:none}.motion-site h1{font-size:clamp(2.8rem,7.3vw,4rem)}
}
@media(max-width:650px) {
  .motion-site .shell{padding:0 1rem}.motion-site .header{min-height:auto;margin-bottom:1rem}
  .motion-site .brand{font-size:1.05rem}.motion-site .brand-mark{width:2.3rem;height:2.3rem}
  .motion-site .header-action{font-size:.875rem;gap:.35rem}.motion-site .header-action .icon{width:1.1rem;height:1.1rem}
  .motion-site .header nav{gap:0;justify-content:space-around}.motion-site .header nav a{font-size:.875rem}
  .motion-site .hero{min-height:500px;border-radius:1.2rem;align-items:flex-start}
  .motion-site .hero-copy{padding:2.2rem 1.4rem 6rem}.motion-site h1{font-size:clamp(2.6rem,9vw,3.5rem);margin-top:1.4rem}
  .motion-site .hero-art{object-position:66% center;animation:none;transform:scale(1.04)}
  .motion-site .hero-desc{font-size:1rem}.motion-site .eyebrow{font-size:.75rem;letter-spacing:.07em}
  .scene-note{right:1.2rem;bottom:2rem;max-width:calc(100% - 2.4rem);animation:none;padding:.7rem 1rem}
  .scene-note small{display:none}.scene-note strong{font-size:.875rem}
  .motion-site .destinations{padding:1.8rem 0 2.3rem}.motion-site .card-grid{gap:.8rem}
  .motion-site .destination{padding:1.1rem}.motion-site .badge{display:none}.motion-site .card-top{margin-bottom:1.2rem}
  .motion-site .destination h3{font-size:1.25rem}.motion-site .destination>p:not(.card-kicker){font-size:.875rem}
  .motion-site .destination>p br{display:none}.motion-site .card-cta{font-size:.875rem;gap:.5rem}
  .motion-site .section-heading{align-items:flex-start}.motion-site .section-heading>span{font-size:.875rem}
  .motion-site .private-space{padding:2rem 0}.motion-site .private-links{grid-template-columns:1fr}
  .motion-site .private-intro h2{font-size:1.65rem}.motion-site footer{padding:1.7rem 0}
}
@media(max-width:390px) {.motion-site .brand{flex-basis:100%;margin-right:0}.motion-site .brand-mark{display:none}.motion-site .card-grid{grid-template-columns:1fr}.motion-site .hero-copy{padding-left:1.1rem;padding-right:1.1rem}.motion-site .button{padding:.7rem .9rem}.motion-site section[id]{scroll-margin-top:12rem}}
@media(hover:none) {.motion-site .destination:hover,.motion-site .private-link:hover,.motion-site .button:hover{transform:none}}
/* Pausing works without JavaScript or a new content-security policy. */
.motion-site:has(#motion-pause:checked) *,.motion-site:has(#motion-pause:checked) *:before,.motion-site:has(#motion-pause:checked) *:after {animation:none!important;transition:none!important}
html:has(#motion-pause:checked) {scroll-behavior:auto}
@supports not selector(:has(*)) {
  .motion-site *,.motion-site *:before,.motion-site *:after {animation:none!important;transition:none!important}
  .motion-setting{display:none}
}
@media(prefers-reduced-motion:reduce) {
  html{scroll-behavior:auto}
  .motion-site *,.motion-site *:before,.motion-site *:after {animation:none!important;transition:none!important}
  .motion-site .destination:hover,.motion-site .private-link:hover,.motion-site .button:hover,.motion-site .brand:hover .brand-mark {transform:none}
  .motion-setting{display:none}
}

/* Final placement override: the library shortcut belongs in the hero flow,
   centered under the two action buttons on every breakpoint. */
.motion-site .hero { display:flex !important; flex-direction:column !important; align-items:center !important; }
.motion-site .hero-copy {
  width:min(100%,48rem) !important;
  display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center !important;
}
.motion-site .hero-copy .hero-actions { justify-content:center !important; }
.motion-site .scene-note {
  position:relative !important; inset:auto !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
  align-self:center !important; display:flex !important;
  width:min(44rem,calc(100% - 2rem)) !important; max-width:none !important;
  margin:1.55rem auto 0 !important; transform:none !important; justify-content:center !important;
}
@media(max-width:650px) {
  .motion-site .hero-copy { width:100% !important; }
  .motion-site .scene-note { width:calc(100% - 1.4rem) !important; margin:1.1rem auto 0 !important; }
}

/* BongoCat-inspired depth: translucent panels lift toward the pointer and
   their icon tiles make a short turn on hover/focus. */
.motion-site .destination,
.motion-site .private-link,
.motion-site .scene-note,
.motion-site .hero-actions .button {
  transform-style:preserve-3d;
  will-change:transform,box-shadow;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,background .32s ease,border-color .32s ease;
}
.motion-site .destination:hover,
.motion-site .destination:focus-visible,
.motion-site .private-link:hover,
.motion-site .private-link:focus-visible,
.motion-site .scene-note:hover,
.motion-site .scene-note:focus-visible,
.motion-site .hero-actions .button:hover,
.motion-site .hero-actions .button:focus-visible {
  transform:perspective(900px) translate3d(0,-9px,18px) rotateX(calc(2deg + var(--card-rx,0deg))) rotateY(calc(-2deg + var(--card-ry,0deg))) scale(1.018) !important;
  box-shadow:0 28px 58px rgba(52,70,130,.28), inset 0 1px rgba(255,255,255,.95);
}
.motion-site .destination::before,
.motion-site .private-link::before,
.motion-site .scene-note::before,
.motion-site .hero-actions .button::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at var(--card-lx,18%) var(--card-ly,8%),rgba(255,255,255,.82),transparent 28%),linear-gradient(120deg,transparent 35%,rgba(255,255,255,.2) 50%,transparent 66%);
  transition:opacity .32s ease,transform .32s ease;
  transform:translateZ(1px);
}
.motion-site .destination:hover::before,
.motion-site .destination:focus-visible::before,
.motion-site .private-link:hover::before,
.motion-site .private-link:focus-visible::before,
.motion-site .scene-note:hover::before,
.motion-site .scene-note:focus-visible::before,
.motion-site .hero-actions .button:hover::before,
.motion-site .hero-actions .button:focus-visible::before { opacity:1; }
.motion-site .destination .tile-icon,
.motion-site .private-link .tile-icon,
.motion-site .scene-note-icon {
  transform:translateZ(18px);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;
}
.motion-site .destination:hover .tile-icon,
.motion-site .destination:focus-visible .tile-icon,
.motion-site .private-link:hover .tile-icon,
.motion-site .private-link:focus-visible .tile-icon,
.motion-site .scene-note:hover .scene-note-icon,
.motion-site .scene-note:focus-visible .scene-note-icon {
  transform:translateZ(22px) rotate(8deg) scale(1.08);
  box-shadow:0 12px 26px rgba(122,162,247,.28);
}
@media (prefers-reduced-motion:reduce) {
  .motion-site .destination,
  .motion-site .private-link,
  .motion-site .scene-note,
  .motion-site .destination .tile-icon,
  .motion-site .private-link .tile-icon,
  .motion-site .scene-note-icon,
  .motion-site .hero-actions .button { transition:none; transform:none !important; }
}
@media(forced-colors:active) {.motion-site h1 .headline-accent{-webkit-text-fill-color:currentColor;background:none}.motion-site .hero:after{background:Canvas;opacity:.85}.motion-site .scene-note{background:Canvas}}

/* Keep the electronic study card in the hero flow, centered directly below
   the two primary actions instead of floating in the lower corner. */
.motion-site .hero {
  display:flex;
  flex-direction:column;
  align-items:center;
}
.motion-site .hero-copy {
  width:min(100%, 48rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.motion-site .hero-copy .hero-actions { justify-content:center; }
.motion-site .scene-note {
  position:relative;
  inset:auto;
  align-self:center;
  width:min(44rem, calc(100% - 2rem));
  max-width:none;
  margin:1.55rem auto 0;
  justify-content:center;
}
@media(max-width:650px) {
  .motion-site .hero-copy { width:100%; }
  .motion-site .scene-note {
    width:calc(100% - 1.4rem);
    margin:1.1rem auto 0;
  }
}

/* Stronger pointer-reactive atmosphere and translucent type, matching the
   reference site's single uninterrupted scene in both themes. */
.motion-site .hero::before {
  content:""; position:absolute; inset:-18%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(circle at calc(50% + var(--hero-x,0) * 24%) calc(43% + var(--hero-y,0) * 24%), rgba(255,255,255,.72), transparent 18%),
    radial-gradient(circle at calc(18% + var(--hero-x,0) * -14%) calc(22% + var(--hero-y,0) * -10%), rgba(122,162,247,.20), transparent 28%),
    radial-gradient(circle at calc(82% + var(--hero-x,0) * 14%) calc(21% + var(--hero-y,0) * -12%), rgba(247,125,170,.18), transparent 27%);
  transform:translate3d(calc(var(--hero-x,0) * -10px),calc(var(--hero-y,0) * -8px),0);
  transition:transform .3s ease-out, opacity .5s ease;
  animation:bongo-drift 18s ease-in-out infinite alternate;
}
.motion-site h1 .headline-line {
  color:rgba(46,58,89,.88);
  -webkit-text-stroke:.35px rgba(255,255,255,.48);
  text-shadow:0 5px 22px rgba(74,86,140,.16);
}
.motion-site h1 .headline-accent { opacity:.91; filter:drop-shadow(0 8px 18px rgba(122,162,247,.16)); }
html[data-theme="dark"] .motion-site h1 .headline-line {
  color:rgba(255,255,255,.88); -webkit-text-stroke:.35px rgba(122,162,247,.22);
  text-shadow:0 5px 24px rgba(122,162,247,.18);
}
html[data-theme="dark"] body.motion-site {
  background:
    radial-gradient(ellipse at 8% 5%,rgba(79,132,255,.30),transparent 36%),
    radial-gradient(ellipse at 92% 5%,rgba(231,107,188,.26),transparent 34%),
    linear-gradient(180deg,#080a11 0%,#0b0c10 100%) !important;
}
html[data-theme="dark"] body.motion-site::before {
  opacity:.52; filter:blur(36px) saturate(1.12); background:
    radial-gradient(ellipse at 14% 56%,rgba(80,126,248,.28),transparent 34%),
    radial-gradient(ellipse at 86% 58%,rgba(239,118,190,.22),transparent 32%);
}
html[data-theme="dark"] body.motion-site::after {
  opacity:.34; background-image:
    linear-gradient(rgba(148,166,221,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,166,221,.11) 1px,transparent 1px);
  background-size:42px 42px; mask-image:linear-gradient(#000,rgba(0,0,0,.76) 64%,transparent);
  animation:bongo-grid 28s linear infinite;
}
.motion-site:has(#motion-pause:checked) .hero::before { animation:none; }

/* Brand marks for bookmark cards: compact, recognizable site badges. */
.motion-site .site-logo{font-size:.72rem;font-weight:850;letter-spacing:-.06em;line-height:1;color:#fff;text-shadow:0 1px 2px #0005;box-shadow:inset 0 1px #ffffff35,0 5px 16px #0002}
.motion-site .site-logo--google{color:#4285f4;background:#fff;border-color:#4285f455}
.motion-site .site-logo--deepseek{background:#2678d9;border-color:#71b4ff66}
.motion-site .site-logo--bilibili{background:#00aeec;border-color:#7cddff66}
.motion-site .site-logo--motionsites{background:#aa4d8e;border-color:#f7a7e066}
.motion-site .site-logo--bitbug{color:#382100;background:#f5be46;border-color:#ffe09a88}
.motion-site .site-logo--napkin{background:#ef735e;border-color:#ffb1a466}
.motion-site .site-logo--reqable{background:#7151b9;border-color:#c1a8ff66}
.motion-site .site-logo--github{color:#1c2430;background:#f4f7fb;border-color:#ffffff88}
.motion-site .site-logo--docker{background:#147bd1;border-color:#8acbff66}
.motion-site .site-logo--mteam{background:#d46a2f;border-color:#ffc09c66}
.motion-site .site-logo--chdbits{background:#d64c72;border-color:#ffb0c466}
.motion-site .site-logo--ourbits{background:#2e76c7;border-color:#9dcbff66}
.motion-site .site-logo--audiences{background:#2b9d82;border-color:#8be4cd66}
.motion-site .site-logo--hhclub{background:#d77435;border-color:#ffc29566}
.motion-site .site-logo--deepbricks{background:#d95d42;border-color:#ffb2a066}
.motion-site .site-logo--jiro{color:#352400;background:#e8bb4f;border-color:#ffe49a88}
.motion-site .site-logo--upage{background:#5d73cf;border-color:#b5c3ff66}
.motion-site .site-logo--drgbmod{background:#cf5a42;border-color:#ffb19f66}
.motion-site .site-logo--asus{background:#ad213a;border-color:#ff94a566}
.motion-site .site-logo--tailscale{background:#3a64c7;border-color:#a8c2ff66}
.motion-site .site-logo--ugreen{background:#3f9b6b;border-color:#a5e5c066}
.motion-site .site-logo--feishu{background:#2463c3;border-color:#a8c9ff66}
.motion-site .site-logo--generic{background:#53627d;border-color:#c4d0e566}

.motion-site .bookmark-description{margin-top:.28rem;color:#d5e3ef;font-size:.88rem!important;line-height:1.5!important;overflow-wrap:anywhere}
.motion-site .bookmark-host{margin-top:.16rem;color:#90a3bc;font-size:.72rem!important;line-height:1.35!important;letter-spacing:.01em;overflow-wrap:anywhere}

/* BongoCat-inspired pastel theme: shared by the public home and bookmark pages. */
body.motion-site {
  --bg:#fafaff;
  --text:#414868;
  --muted:#68738f;
  --line:#dce3f4;
  --accent:#7aa2f7;
  --pink:#f77daa;
  --blue:#6da8f8;
  --heading:#2e3a59;
  --surface:rgba(255,255,255,.72);
  --surface-solid:#ffffff;
  --shadow:0 24px 70px rgba(74,86,140,.14);
  color-scheme:light;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 7%,rgba(247,125,170,.20),transparent 32rem),
    radial-gradient(circle at 86% 4%,rgba(122,162,247,.24),transparent 34rem),
    linear-gradient(135deg,#fbfcff 0%,#f7f5ff 48%,#eef7ff 100%);
  font-family:"Plus Jakarta Sans","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  position:relative;
  isolation:isolate;
}
body.motion-site::before,
body.motion-site::after {
  content:"";
  position:fixed;
  pointer-events:none;
  inset:-12vmax;
  z-index:-2;
}
body.motion-site::before {
  background:
    radial-gradient(ellipse at 18% 68%,rgba(122,162,247,.24),transparent 30%),
    radial-gradient(ellipse at 78% 73%,rgba(247,125,170,.18),transparent 28%),
    radial-gradient(ellipse at 52% 11%,rgba(255,217,147,.15),transparent 24%);
  filter:blur(28px);
  animation:bongo-drift 18s ease-in-out infinite alternate;
}
body.motion-site::after {
  inset:0;
  z-index:-1;
  opacity:.44;
  background-image:linear-gradient(rgba(122,162,247,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(247,125,170,.045) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,black,transparent 72%);
  animation:bongo-grid 26s linear infinite;
}
.motion-site .shell {position:relative;z-index:0;display:flow-root}
.motion-site .header {
  background:rgba(255,255,255,.76);
  border-color:rgba(255,255,255,.94);
  box-shadow:0 14px 40px rgba(70,85,145,.14),inset 0 1px rgba(255,255,255,.95);
  backdrop-filter:blur(22px) saturate(1.18);
  -webkit-backdrop-filter:blur(22px) saturate(1.18);
}
.motion-site .brand {color:var(--heading);font-family:"Plus Jakarta Sans","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif}
.motion-site .brand-mark {
  color:#fff;
  border-color:rgba(255,255,255,.8);
  background:linear-gradient(145deg,var(--pink),var(--blue));
  box-shadow:0 9px 22px rgba(247,125,170,.28),inset 0 1px rgba(255,255,255,.8);
}
.motion-site .brand-mark span {color:#fff1fa}
.motion-site .brand-sub {color:#7b86a1}
.motion-site .header nav {border-color:#dfe5f2;background:rgba(255,255,255,.54);box-shadow:inset 0 1px #fff}
.motion-site .header nav a {color:#69758f}
.motion-site .header nav a:hover,.motion-site .header nav a[aria-current] {color:#43506f}
.motion-site .header nav a:after {background:linear-gradient(90deg,var(--pink),var(--blue))}
.motion-site .header-action {
  color:#fff;
  border-color:transparent;
  background:linear-gradient(105deg,var(--pink),#e78cf1 48%,var(--blue));
  box-shadow:0 10px 24px rgba(122,162,247,.24);
}
.motion-site .header-action:hover {background:linear-gradient(105deg,#f66d9f,#dc7deb,#609af4);box-shadow:0 14px 28px rgba(122,162,247,.32)}
.motion-site .motion-setting {color:#68738f;border-color:#dce3f4;background:rgba(255,255,255,.52)}
.motion-site .motion-setting input {accent-color:var(--pink)}
.motion-site .motion-setting:has(input:checked) {color:#4d5980;background:#fceaf4;border-color:#f2b4cd}
.motion-site .motion-setting:focus-within {outline-color:var(--pink)}
.motion-site .hero {
  min-height:calc(100svh - 8rem);
  align-items:center;
  justify-content:center;
  border-color:rgba(255,255,255,.86);
  background:
    radial-gradient(circle at 50% 48%,rgba(255,255,255,.93) 0 17%,rgba(255,255,255,.65) 38%,transparent 67%),
    radial-gradient(circle at 20% 20%,rgba(122,162,247,.16),transparent 38%),
    radial-gradient(circle at 84% 23%,rgba(247,125,170,.15),transparent 38%),
    rgba(255,255,255,.22);
  box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.95);
  overflow:hidden;
}
.motion-site .hero-art {opacity:0;visibility:hidden;animation:none!important;transform:none!important}
.motion-site .hero:after {
  background:radial-gradient(ellipse at 50% 44%,transparent 0 26%,rgba(255,255,255,.42) 54%,rgba(245,247,255,.56) 100%);
  z-index:-1;
}
.motion-site .hero-halo {
  inset:9% 16%;
  z-index:-1;
  opacity:.75;
  border:1px solid rgba(122,162,247,.18);
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 31%,rgba(247,125,170,.25) 0 1.4%,transparent 1.7%),
    radial-gradient(circle at 72% 28%,rgba(122,162,247,.24) 0 1.3%,transparent 1.7%),
    radial-gradient(circle,transparent 0 58%,rgba(247,125,170,.08) 58.2% 58.5%,transparent 58.8%);
  box-shadow:0 0 0 2.5rem rgba(255,255,255,.23),0 0 0 5rem rgba(122,162,247,.06),0 0 80px rgba(247,125,170,.14);
  animation:bongo-orbit 16s ease-in-out infinite alternate;
}
.motion-site .hero-copy {max-width:58rem;padding:3.8rem 2rem 5.5rem;text-align:center}
.motion-site .hero-copy>.eyebrow {justify-content:center;color:#68738f;font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;letter-spacing:.16em}
.motion-site .eyebrow-line {background:linear-gradient(90deg,var(--pink),var(--blue));width:2.2rem}
.motion-site h1 {color:var(--heading);font-size:clamp(3rem,7vw,6.4rem);line-height:1.08;letter-spacing:-.065em;margin:1.35rem 0 1.4rem;font-weight:850;text-wrap:balance}
.motion-site h1 .headline-line {color:var(--heading)}
.motion-site h1 .headline-accent {
  background:linear-gradient(100deg,#5791f3 2%,#8e8be9 42%,#f37aa8 90%);
  background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.motion-site .hero-desc {color:#68738f;font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.9;margin-bottom:2rem}
.motion-site .hero-actions {justify-content:center;gap:.75rem}
.motion-site .button {border-color:rgba(255,255,255,.85);border-radius:999px;min-height:52px;padding:.8rem 1.45rem;box-shadow:0 12px 28px rgba(90,111,170,.15)}
.motion-site .primary {color:#fff;background:linear-gradient(105deg,var(--pink),#e38bed 45%,var(--blue));box-shadow:0 14px 30px rgba(247,125,170,.25)}
.motion-site .primary:hover {color:#fff;background:linear-gradient(105deg,#f6699e,#d97ce9 45%,#5d96f5);box-shadow:0 18px 35px rgba(122,162,247,.3)}
.motion-site .subtle {color:#526080;border-color:#dbe2f2;background:rgba(255,255,255,.7)}
.motion-site .subtle:hover {color:#425071;background:rgba(255,255,255,.96);box-shadow:0 15px 30px rgba(90,111,170,.2)}
.motion-site .scene-note {
  right:2.2rem;bottom:2.1rem;color:#526080;border-color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.66);box-shadow:0 14px 32px rgba(91,104,157,.16);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
}
.motion-site .scene-note small {color:#8791aa}.motion-site .scene-note strong {color:#43506f}.motion-site .scene-note-icon {color:#fff;background:linear-gradient(145deg,var(--pink),var(--blue));box-shadow:0 8px 18px rgba(122,162,247,.22)}
.motion-site .hero-caption {color:#7b86a1;text-shadow:none}.motion-site .hero-caption span {color:var(--pink)}
.motion-site .destinations {padding:3rem 0 4.4rem}
.motion-site .section-heading h2 {color:var(--heading);font-size:1.42rem}.motion-site .section-heading>span {color:#7b86a1}
.motion-site .destination {
  color:var(--text);border-color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.66);box-shadow:0 14px 34px rgba(88,105,161,.10),inset 0 1px rgba(255,255,255,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}
.motion-site .destination:after {box-shadow:inset 0 1px rgba(255,255,255,.78)}
.motion-site .destination:hover {border-color:#bfcdf3;box-shadow:0 22px 42px rgba(88,105,161,.18);background:rgba(255,255,255,.84)}
.motion-site .tile-icon {background:linear-gradient(145deg,rgba(247,125,170,.14),rgba(122,162,247,.16));border-color:#e1e6f3;color:#708bd8}
.motion-site .destination h3 {color:var(--heading)}
.motion-site .destination>p:not(.card-kicker) {color:#68738f}
.motion-site .card-kicker {color:#7285c6}.motion-site .badge {color:#71809e}.motion-site .card-top .arrow {color:#8290ac}.motion-site .card-cta {color:#596887;border-top-color:#e5e9f3}.motion-site .card-cta>span {color:#e276a6}
.motion-site .private-space {border-color:#dce3f4}.motion-site .private-intro h2 {color:var(--heading)}.motion-site .private-intro p {color:#68738f}.motion-site .private-intro .eyebrow {color:#de75a5}
.motion-site .private-link {border-color:rgba(255,255,255,.88);background:rgba(255,255,255,.64);box-shadow:0 10px 25px rgba(88,105,161,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.motion-site .private-link:hover {border-color:#becdf5;background:rgba(255,255,255,.9);box-shadow:0 16px 30px rgba(88,105,161,.14)}
.motion-site .private-link strong {color:#4c5978}.motion-site .private-link small {color:#76839e}.motion-site .private-link .arrow {color:#8290ac}
.motion-site .usage {color:#68738f}.motion-site .usage h3 {color:var(--heading)}.motion-site footer {color:#7b86a1;border-top-color:#dce3f4}.motion-site footer a,.motion-site .footer-brand {color:#5c6988}
.motion-site .collection-tabs a {color:#64728f;border-color:#dce3f4;background:rgba(255,255,255,.62);box-shadow:0 7px 18px rgba(88,105,161,.08)}
.motion-site .collection-tabs a:hover {color:#47587e;background:#fff0f7;border-color:#efbfd5}
.motion-site .site-logo {color:#fff;text-shadow:0 1px 2px rgba(54,59,92,.22);box-shadow:inset 0 1px rgba(255,255,255,.62),0 7px 15px rgba(88,105,161,.14)}
.motion-site .site-logo--google,.motion-site .site-logo--github {color:#3e68bb;background:#fff;border-color:#ccd8f2}
.motion-site .site-logo--deepseek,.motion-site .site-logo--tailscale,.motion-site .site-logo--upage {background:#6f95e9;border-color:#a8c0f5}
.motion-site .site-logo--bilibili {background:#52bfe5;border-color:#a9e7f5}.motion-site .site-logo--motionsites {background:#ce7bb5;border-color:#efb7db}.motion-site .site-logo--bitbug {color:#634b10;background:#f4cf72;border-color:#f7e2a4}.motion-site .site-logo--napkin {background:#e99786;border-color:#f6c7be}.motion-site .site-logo--reqable {background:#9478d0;border-color:#cfc0ee}.motion-site .site-logo--docker {background:#5f9fd8;border-color:#acd1ef}.motion-site .site-logo--mteam {background:#dc936c;border-color:#f3c7b0}.motion-site .site-logo--chdbits {background:#dc88a4;border-color:#f2bdce}.motion-site .site-logo--ourbits {background:#77a7dc;border-color:#b9d4f1}.motion-site .site-logo--audiences {background:#66bba6;border-color:#b6e2d7}.motion-site .site-logo--hhclub {background:#dda176;border-color:#f3cbb2}.motion-site .site-logo--deepbricks {background:#df8e7d;border-color:#f4beb5}.motion-site .site-logo--jiro {color:#61490e;background:#efd17a;border-color:#f7e5a9}.motion-site .site-logo--drgbmod {background:#dc8977;border-color:#f3bbb1}.motion-site .site-logo--asus {background:#d5748a;border-color:#efb7c2}.motion-site .site-logo--ugreen {background:#71b994;border-color:#b7e0c9}.motion-site .site-logo--feishu {background:#6b97d9;border-color:#b5cdf0}.motion-site .site-logo--generic {background:#8695b4;border-color:#c5cee2}
.motion-site .bookmark-description {color:#68738f}.motion-site .bookmark-host {color:#96a0b6}
@keyframes bongo-drift {from{transform:translate3d(-2%,1%,0) scale(1)}to{transform:translate3d(2%,-2%,0) scale(1.06)}}
@keyframes bongo-grid {from{background-position:0 0}to{background-position:72px 72px}}
@keyframes bongo-orbit {from{transform:rotate(-2deg) scale(.98)}to{transform:rotate(2deg) scale(1.02)}}
@media(max-width:800px){.motion-site .hero{min-height:calc(100svh - 7rem)}.motion-site .hero-copy{padding:3rem 1.4rem 6rem}.motion-site .hero-halo{inset:14% 7%}.motion-site .scene-note{right:1.1rem;bottom:1.25rem}}
@media(prefers-reduced-motion:reduce){body.motion-site::before,body.motion-site::after,.motion-site .hero-halo{animation:none!important}}
/* Day/night theme control and accessible dark palette. */
.motion-site .theme-toggle {
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  min-height:36px; padding:.42rem .7rem; border:1px solid rgba(255,255,255,.76);
  border-radius:999px; color:#526080; background:rgba(255,255,255,.62);
  box-shadow:0 8px 18px rgba(88,105,161,.1); font:inherit; font-size:.78rem;
  cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.motion-site .theme-toggle:hover { color:#35446e; border-color:#bfcdf3; background:rgba(255,255,255,.9); transform:translateY(-1px); }
.motion-site .theme-toggle [data-theme-icon] { font-size:1rem; line-height:1; }
.motion-site .theme-icon{display:grid;place-items:center;width:1.15rem;height:1.15rem;position:relative}
.motion-site .theme-icon svg{position:absolute;width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:opacity .35s,transform .45s cubic-bezier(.22,1,.36,1)}
.motion-site .theme-icon .theme-moon{color:#6f9dff;filter:drop-shadow(0 0 5px rgba(111,157,255,.45))}
.motion-site .theme-icon .theme-sun{color:#f4bd4c;filter:drop-shadow(0 0 5px rgba(244,189,76,.42))}
.motion-site .theme-icon .theme-moon{opacity:1;transform:rotate(0) scale(1)}
.motion-site .theme-icon .theme-sun{opacity:0;transform:rotate(-40deg) scale(.55)}
.motion-site .theme-icon[data-mode="dark"] .theme-moon{opacity:0;transform:rotate(40deg) scale(.55)}
.motion-site .theme-icon[data-mode="dark"] .theme-sun{opacity:1;transform:rotate(0) scale(1)}
html[data-theme="dark"] body.motion-site {
  --bg:#111426; --text:#edf1ff; --muted:#aeb8d0; --line:#313a58; --heading:#f2e9ff;
  color-scheme:dark; color:var(--text);
  background:radial-gradient(ellipse at 8% 2%,rgba(101,126,222,.3),transparent 34%),radial-gradient(ellipse at 91% 4%,rgba(190,121,194,.23),transparent 32%),radial-gradient(ellipse at 50% 78%,rgba(73,91,166,.16),transparent 48%),linear-gradient(145deg,#111426 0%,#1a1b35 52%,#101e35 100%);
}
html[data-theme="dark"] body.motion-site::before { opacity:.34; filter:saturate(.9) brightness(.72); }
html[data-theme="dark"] body.motion-site::after { opacity:.14; background-image:linear-gradient(rgba(148,166,221,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(148,166,221,.18) 1px,transparent 1px); }
html[data-theme="dark"] .motion-site .header { background:rgba(18,24,43,.83); border-color:#333d5b; box-shadow:0 10px 28px rgba(0,0,0,.22); }
html[data-theme="dark"] .motion-site .brand,html[data-theme="dark"] .motion-site .header nav a { color:#edf1ff; }
html[data-theme="dark"] .motion-site .brand-sub { color:#aeb8d0; }
html[data-theme="dark"] .motion-site .header nav a:hover,html[data-theme="dark"] .motion-site .header nav a[aria-current="page"] { color:#fff; background:rgba(109,134,220,.18); }
html[data-theme="dark"] .motion-site .theme-toggle { color:#e9eaff; border-color:#46527b; background:rgba(38,46,76,.76); }
html[data-theme="dark"] .motion-site .theme-toggle:hover { color:#fff; border-color:#8299ed; background:rgba(58,69,108,.92); }
html[data-theme="dark"] .motion-site .motion-setting { color:#bac4dd; }
html[data-theme="dark"] .motion-site .hero { background:radial-gradient(circle at 50% 35%,rgba(63,81,137,.22),transparent 63%); }
html[data-theme="dark"] .motion-site .hero-copy>.eyebrow,html[data-theme="dark"] .motion-site .hero-desc { color:#aeb8d0; }
html[data-theme="dark"] .motion-site .hero-halo { opacity:.42; filter:saturate(.7) brightness(.63); }
html[data-theme="dark"] .motion-site .subtle { color:#e0e5ff; border-color:#485477; background:rgba(35,43,70,.78); }
html[data-theme="dark"] .motion-site .subtle:hover { color:#fff; background:rgba(53,64,100,.92); }
html[data-theme="dark"] .motion-site .scene-note { color:#e0e5ff; border-color:#46527a; background:rgba(29,37,65,.78); box-shadow:0 14px 32px rgba(0,0,0,.24); }
html[data-theme="dark"] .motion-site .scene-note small,html[data-theme="dark"] .motion-site .scene-note strong { color:#e2e7ff; }
html[data-theme="dark"] .motion-site .hero-caption { color:#abb6d0; }
html[data-theme="dark"] .motion-site .section-heading>span,html[data-theme="dark"] .motion-site .destination>p:not(.card-kicker),html[data-theme="dark"] .motion-site .private-intro p,html[data-theme="dark"] .motion-site .bookmark-description { color:#b5bfd5; }
html[data-theme="dark"] .motion-site .destination,html[data-theme="dark"] .motion-site .private-link { color:#edf1ff; border-color:#3e4a6c; background:rgba(28,35,61,.75); box-shadow:0 14px 34px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.06); }
html[data-theme="dark"] .motion-site .destination:hover,html[data-theme="dark"] .motion-site .private-link:hover { border-color:#7187d5; background:rgba(40,49,82,.88); box-shadow:0 20px 40px rgba(0,0,0,.28); }
html[data-theme="dark"] .motion-site .destination h3,html[data-theme="dark"] .motion-site .private-intro h2,html[data-theme="dark"] .motion-site .usage h3 { color:#f2e9ff; }
html[data-theme="dark"] .motion-site .private-space,html[data-theme="dark"] .motion-site footer { border-color:#34405f; }
html[data-theme="dark"] .motion-site .private-link strong,html[data-theme="dark"] .motion-site .private-link small { color:#dce4ff; }
html[data-theme="dark"] .motion-site .private-link .arrow,html[data-theme="dark"] .motion-site .card-top .arrow { color:#aab8e4; }
html[data-theme="dark"] .motion-site .card-cta { color:#c4cdec; border-top-color:#3a4668; }
html[data-theme="dark"] .motion-site .usage,html[data-theme="dark"] .motion-site footer,html[data-theme="dark"] .motion-site footer a,html[data-theme="dark"] .motion-site .footer-brand { color:#aeb9d2; }
html[data-theme="dark"] .motion-site .collection-tabs a { color:#c7d0e8; border-color:#3d496a; background:rgba(28,36,62,.76); }
html[data-theme="dark"] .motion-site .collection-tabs a:hover { color:#fff; background:rgba(75,58,104,.82); border-color:#9e86d3; }
html[data-theme="dark"] .motion-site .bookmark-host { color:#93a2c2; }
html[data-theme="dark"] .motion-site .site-logo--google,html[data-theme="dark"] .motion-site .site-logo--github { color:#274789; background:#e8edff; }
@media(max-width:800px){
  .motion-site .header { flex-wrap:wrap; gap:.65rem .8rem; }
  .motion-site .header nav { order:3; width:100%; justify-content:center; overflow:auto; padding-bottom:.15rem; }
  .motion-site .header .theme-toggle,.motion-site .header .motion-setting,.motion-site .header .header-action { min-height:34px; }
  .motion-site .hero { min-height:calc(100svh - 8rem); }
}
@media(max-width:650px){
  .motion-site .shell { width:min(100% - 1.1rem,72rem); }
  .motion-site .header { padding:.75rem .78rem; }
  .motion-site .header nav { justify-content:flex-start; gap:.2rem; }
  .motion-site .header nav a { padding:.36rem .55rem; font-size:.78rem; white-space:nowrap; }
  .motion-site .theme-toggle { padding:.38rem .56rem; }
  .motion-site .theme-toggle [data-theme-label] { display:none; }
  .motion-site .motion-setting span:last-child { display:none; }
  .motion-site .hero-copy { padding:2.8rem .7rem 7.3rem; }
  .motion-site h1 { font-size:clamp(2.65rem,13vw,4.4rem); }
  .motion-site .hero-desc { font-size:.95rem; }
  .motion-site .hero-actions { flex-wrap:wrap; }
  .motion-site .scene-note { left:.7rem; right:auto; bottom:1rem; }
  .motion-site .collection-tabs { gap:.42rem; overflow:auto; justify-content:flex-start; padding-bottom:.35rem; }
  .motion-site .collection-tabs a { white-space:nowrap; }
}

/* At the top, navigation spans the viewport; scrolling gathers it into a glass bar. */
body.motion-site {
  --nav-glass:rgba(255,255,255,.82);
  --nav-edge:rgba(255,255,255,.94);
  --nav-shadow:0 10px 30px rgba(89,101,154,.12),inset 0 1px rgba(255,255,255,.82);
  --nav-tint:linear-gradient(120deg,rgba(247,125,170,.15),rgba(122,162,247,.19));
}
.motion-site .header {
  position:fixed; top:1rem; left:50%; transform:translateX(-50%);
  width:calc(100% - clamp(2rem,5vw,8rem)); margin:0;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  min-height:4.7rem; padding:.4rem 0; gap:1rem;
  border:1px solid transparent; border-radius:1.8rem; background:transparent;
  box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  transition:width .75s cubic-bezier(.22,1,.36,1),top .65s cubic-bezier(.22,1,.36,1),padding .65s cubic-bezier(.22,1,.36,1),gap .65s,background .5s,border-color .5s,box-shadow .5s;
}
.motion-site .header>.brand,
.motion-site .header>.header-nav,
.motion-site .header>.header-tools {
  border:1px solid transparent; border-radius:1.35rem;
  background:transparent; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  transition:background .45s,border-color .45s,box-shadow .45s,transform .45s cubic-bezier(.22,1,.36,1);
}
.motion-site .header>.brand {padding:.55rem .9rem;flex-shrink:0;justify-self:start}
.motion-site .header>.header-nav {padding:.35rem;gap:.18rem;min-width:0;justify-content:center;justify-self:center;margin:0}
.motion-site .header>.header-tools {display:flex;align-items:center;gap:.45rem;padding:.45rem;flex-shrink:0;justify-self:end}
.motion-site .header .header-nav::before {display:none}
.motion-site .header .header-nav a {
  display:flex; align-items:center; justify-content:center; isolation:isolate;
  min-height:44px; padding:.55rem .9rem; border-radius:1rem;
  color:var(--muted); font-size:.875rem; font-weight:650; line-height:1.3;
  transition:color .25s,background .25s,box-shadow .25s,transform .35s cubic-bezier(.2,1.8,.5,1);
}
.motion-site .header .header-nav a::before {
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--nav-tint); opacity:0; transform:scale(.82);
  transition:opacity .25s,transform .4s cubic-bezier(.2,1.8,.5,1);
}
.motion-site .header .header-nav a::after {
  left:calc(50% - .6rem); right:auto; bottom:.22rem; width:1.2rem; height:3px; border-radius:2px;
  transform:scaleX(0); transform-origin:center; opacity:.75;
}
.motion-site .header .header-nav a[aria-current="page"] {color:var(--heading);background:transparent}
.motion-site .header .header-nav a[aria-current="page"]::before {opacity:1;transform:scale(1);animation:nav-selected .65s cubic-bezier(.22,1,.36,1) both}
.motion-site .header .header-nav a[aria-current="page"]::after {transform:scaleX(1)}
.motion-site .header .header-nav a:focus-visible {outline:2px solid var(--pink);outline-offset:2px}
.motion-site .header .header-nav a:active {transform:scale(.95)}
.motion-site .header .theme-toggle,.motion-site .header .motion-setting,.motion-site .header .header-action {min-height:44px;border-radius:1rem}
.motion-site .header .theme-toggle,.motion-site .header .motion-setting {border-color:transparent;background:transparent;box-shadow:none}
.motion-site .header .motion-setting {padding:.45rem .55rem;font-size:.78rem}
.motion-site .header .theme-toggle {white-space:nowrap}
.motion-site .header.is-scrolled {
  width:min(1120px,calc(100% - 3rem)); top:.85rem;
  padding:.4rem .55rem; gap:.3rem; background:var(--nav-glass);border-color:var(--nav-edge);box-shadow:var(--nav-shadow);
  backdrop-filter:blur(24px) saturate(1.15);-webkit-backdrop-filter:blur(24px) saturate(1.15);
}
.motion-site .header.is-scrolled>.brand,.motion-site .header.is-scrolled>.header-nav,.motion-site .header.is-scrolled>.header-tools {
  background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.motion-site .collection-tabs a {position:relative;transition:color .25s,background .25s,box-shadow .25s,transform .35s cubic-bezier(.2,1.8,.5,1)}
.motion-site .collection-tabs a[aria-current="location"] {color:var(--heading);border-color:#b9c9ef;background:var(--nav-tint);box-shadow:0 7px 18px rgba(122,162,247,.15)}
.motion-site .collection-tabs a:active,.motion-site .button:active {transform:scale(.96)}
.motion-site .destination:focus-visible,.motion-site .private-link:focus-visible {outline:2px solid var(--pink);outline-offset:4px;transform:translateY(-4px)}
.motion-site .destination:active,.motion-site .private-link:active {transform:translateY(-1px) scale(.985)}
@media(hover:hover) and (pointer:fine) {
  .motion-site .header .header-nav a:hover {color:var(--heading);background:transparent;transform:translateY(-2px)}
  .motion-site .header .header-nav a:hover::before {opacity:1;transform:scale(1)}
  .motion-site .header .header-nav a:hover::after {transform:scaleX(1)}
  .motion-site .collection-tabs a:hover {transform:translateY(-3px)}
  .motion-site .private-link:hover .tile-icon {transform:rotate(-7deg) scale(1.08)}
}
html[data-theme="dark"] body.motion-site {
  --nav-glass:rgba(25,29,48,.86);--nav-edge:rgba(147,162,217,.2);
  --nav-shadow:0 12px 36px rgba(0,0,0,.24),inset 0 1px rgba(207,216,255,.055);
  --nav-tint:linear-gradient(120deg,rgba(229,130,185,.18),rgba(115,159,242,.2));
}
html[data-theme="dark"] .motion-site .header {background:transparent;border-color:transparent;box-shadow:none}
html[data-theme="dark"] .motion-site .header.is-scrolled {background:var(--nav-glass);border-color:var(--nav-edge);box-shadow:var(--nav-shadow)}
html[data-theme="dark"] .motion-site .header .header-nav a[aria-current="page"],html[data-theme="dark"] .motion-site .header .header-nav a:hover {background:transparent}
html[data-theme="dark"] .motion-site .header .theme-toggle {background:transparent;border-color:transparent}
html[data-theme="dark"] .motion-site .header .theme-toggle:hover {background:rgba(136,156,225,.12)}
html[data-theme="dark"] .motion-site .header .motion-setting {background:transparent;border-color:transparent}
html[data-theme="dark"] .motion-site .collection-tabs a[aria-current="location"] {color:#f2e9ff;border-color:#8a8fc0;background:var(--nav-tint)}
@keyframes nav-selected {0%{opacity:0;transform:scale(.88)}65%{opacity:1;transform:scale(1.035)}100%{opacity:1;transform:scale(1)}}
::view-transition-old(root),::view-transition-new(root) {animation-duration:.38s;animation-timing-function:ease-in-out}
@media(max-width:1150px) {
  .motion-site .header {gap:.65rem}
  .motion-site .header>.brand {padding:.55rem .65rem}
  .motion-site .header .header-nav a {padding:.55rem .68rem;font-size:.83rem}
  .motion-site .header>.header-tools {gap:.15rem}
  .motion-site .header .header-action {padding:.55rem .65rem;font-size:.82rem}
}
@media(max-width:900px) {
  .motion-site .header .header-action span {display:none}
  .motion-site .header .header-action {justify-content:center;width:44px;padding:.55rem}
  .motion-site .header .motion-setting span:last-child {display:none}
  .motion-site .header .motion-setting .motion-glyph {display:inline}
}
@media(max-width:800px) {
  .motion-site .header {position:sticky;display:flex;left:auto;transform:none;width:100%;top:.5rem;gap:.55rem;flex-wrap:wrap;margin-top:.45rem;margin-bottom:1rem}
  .motion-site .header>.brand {margin-right:auto}
  .motion-site .header>.header-tools {order:2}
  .motion-site .header>.header-nav {order:3;flex-basis:100%;width:100%;margin:0;gap:.3rem;justify-content:space-evenly;overflow:visible}
  .motion-site .header .header-nav a {flex:1;padding:.5rem .35rem;font-size:.875rem}
  .motion-site .header.is-scrolled {width:100%;top:.5rem;gap:.25rem;padding:.35rem}
  .motion-site section[id] {scroll-margin-top:11rem}
}
@media(max-width:650px) {
  .motion-site .shell {width:100%;padding:0 .75rem}
  .motion-site .header {padding:.25rem 0;gap:.45rem;border-radius:1.45rem}
  .motion-site .header>.brand {padding:.45rem .65rem;gap:.5rem;font-size:1rem}
  .motion-site .header>.header-tools {padding:.25rem;gap:0}
  .motion-site .header>.header-nav {padding:.25rem;gap:.1rem;border-radius:1.2rem}
  .motion-site .header .header-nav a {font-size:.81rem;min-height:42px;padding:.5rem .25rem;border-radius:.95rem}
  .motion-site .header .theme-toggle {width:42px;padding:.5rem}
  .motion-site .header .motion-setting {gap:0;justify-content:center;width:38px;padding:.4rem}
  .motion-site .header .motion-setting .motion-glyph {display:inline;font-size:1.1rem}
  .motion-site .header .motion-setting input {position:absolute;inset:0;width:100%;height:100%;opacity:0}
  .motion-site .header .motion-setting span:last-child {display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media(max-width:390px) {
  .motion-site .header>.brand {flex-basis:auto;margin-right:auto}
  .motion-site .header .brand-mark {display:grid;width:2rem;height:2rem;font-size:1.5rem}
  .motion-site .header .header-action {display:none}
}
/* One uninterrupted scene. The hero has no card surface in either theme. */
.motion-site main {padding-top:6.5rem}
.motion-site .hero,html[data-theme="dark"] .motion-site .hero {
  min-height:calc(100svh - 6.5rem); border:0; border-radius:0;
  background:transparent; box-shadow:none; overflow:visible;
  --hero-x:0; --hero-y:0; --hero-scroll:0;
}
.motion-site .hero::after {display:none}
.motion-site .hero-halo {
  inset:3% -10% 7%; border-color:rgba(134,150,203,.13);
  border-radius:48% 52% 43% 57%; box-shadow:none;
  background:radial-gradient(ellipse at 50% 48%,rgba(255,255,255,.38),transparent 68%);
  rotate:-14deg; animation:scene-orbit 24s ease-in-out infinite alternate;
  translate:calc(var(--hero-x) * -16px) calc(var(--hero-y) * -10px);
}
.motion-site .hero-halo::before,.motion-site .hero-halo::after {
  content:"";position:absolute;inset:-8% 12%;border:1px solid rgba(145,160,214,.1);
  border-radius:43% 57% 54% 46%;rotate:36deg;pointer-events:none;
}
.motion-site .hero-halo::after {inset:9% -8%;rotate:-28deg;border-color:rgba(228,151,192,.11)}
.motion-site .hero-copy {position:relative;z-index:1;padding:4rem 1rem 7rem}
.motion-site .hero h1 {
  translate:calc(var(--hero-x) * 22px) calc(var(--hero-y) * 14px);
  rotate:calc(var(--hero-x) * .55deg);
}
.motion-site .hero .headline-line {translate:calc(var(--hero-scroll) * -180px) calc(var(--hero-scroll) * 20px)}
.motion-site .hero .headline-accent {translate:calc(var(--hero-scroll) * 180px) calc(var(--hero-scroll) * 12px)}
.motion-site .hero .hero-desc {translate:calc(var(--hero-x) * 9px + var(--hero-scroll) * 65px) calc(var(--hero-y) * 6px)}
.motion-site .hero-copy>.eyebrow {translate:calc(var(--hero-x) * -8px - var(--hero-scroll) * 48px) calc(var(--hero-y) * -5px)}
html[data-theme="dark"] .motion-site .hero-halo {opacity:.6;filter:none;border-color:rgba(150,165,222,.16);background:radial-gradient(ellipse at 50% 48%,rgba(99,109,179,.1),transparent 68%)}
@keyframes scene-orbit {from{transform:rotate(-6deg) scale(.96)}to{transform:rotate(8deg) scale(1.045)}}
@media(max-width:800px) {
  .motion-site main {padding-top:0}
  .motion-site .header>.brand,.motion-site .header>.header-tools,.motion-site .header>.header-nav {background:var(--nav-glass);border-color:var(--nav-edge);box-shadow:var(--nav-shadow);backdrop-filter:blur(16px)}
  .motion-site .hero,html[data-theme="dark"] .motion-site .hero {min-height:calc(100svh - 10rem);overflow:clip}
  .motion-site .hero-copy {padding:3.5rem .25rem 7rem;max-width:100%}
  .motion-site .hero-halo {inset:8% 0 12%;opacity:.55}
}
.motion-site:has(#motion-pause:checked) .hero h1,.motion-site:has(#motion-pause:checked) .hero .headline-line,
.motion-site:has(#motion-pause:checked) .hero .hero-desc,.motion-site:has(#motion-pause:checked) .hero-copy>.eyebrow,
.motion-site:has(#motion-pause:checked) .hero-halo {translate:none;rotate:none}
body.motion-site:has(#motion-pause:checked)::before,body.motion-site:has(#motion-pause:checked)::after {animation:none!important}
@media(prefers-reduced-motion:reduce) {
  ::view-transition-old(root),::view-transition-new(root) {animation:none}
  .motion-site .header .header-nav a:hover,.motion-site .header .header-nav a:active,.motion-site .destination:focus-visible,.motion-site .private-link:focus-visible {transform:none}
  .motion-site .hero h1,.motion-site .hero .headline-line,.motion-site .hero .hero-desc,.motion-site .hero-copy>.eyebrow,.motion-site .hero-halo {translate:none;rotate:none}
}

/* Final placement override: the library shortcut belongs in the hero flow,
   centered under the two action buttons on every breakpoint. */
.motion-site .hero { display:flex; flex-direction:column; align-items:center; }
.motion-site .hero-copy {
  width:min(100%,48rem);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.motion-site .hero-copy .hero-actions { justify-content:center; }
.motion-site .scene-note {
  position:relative; inset:auto; align-self:center;
  width:min(44rem,calc(100% - 2rem)); max-width:none;
  margin:1.55rem auto 0; justify-content:center;
}
@media(max-width:650px) {
  .motion-site .hero-copy { width:100%; }
  .motion-site .scene-note { width:calc(100% - 1.4rem); margin:1.1rem auto 0; }
}

/* Last word on placement: this block intentionally comes after every
   responsive rule so the study-card cannot fall back to the corner. */
.motion-site .hero { display:flex !important; flex-direction:column !important; align-items:center !important; }
.motion-site .hero-copy { width:min(100%,48rem) !important; display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center !important; }
.motion-site .hero-copy .hero-actions { justify-content:center !important; }
.motion-site .scene-note {
  position:relative !important; inset:auto !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
  align-self:center !important; display:flex !important; width:min(44rem,calc(100% - 2rem)) !important; max-width:none !important;
  margin:1.55rem auto 0 !important; transform:none !important; justify-content:center !important;
}
@media(max-width:650px) {
  .motion-site .hero-copy { width:100% !important; }
  .motion-site .scene-note { width:calc(100% - 1.4rem) !important; margin:1.1rem auto 0 !important; }
}

/* Clean headline rendering: no outlined tile fragments or split-line offsets. */
.motion-site .hero h1,
.motion-site .hero h1 .headline-line,
.ambient-page .hero h1,
.ambient-page .hero h1 .headline-line {
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
}
.motion-site .hero .headline-line,
.motion-site .hero .headline-accent {
  translate:none !important;
}