/* 02 New — SoapBubble palette, original Hi Holo layout and content. */
:root{color-scheme:dark;--ink:#f4f8ff;--muted:#9fb2d4;--line:rgba(140,190,255,.16);--wash:#121a28;--blue:#2563eb;--blue-deep:#1d4ed8}
html{scroll-padding-top:88px}
body{margin:0;background:#0f1116;color:#f4f8ff;overflow-x:clip;font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif}
::selection{background:#2563eb;color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:rgba(140,170,220,.22);border-radius:5px}
::-webkit-scrollbar-track{background:#0f1116}
.soap-hero{--hero-gutter:max(24px,calc((100% - 1180px)/2));position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:100%;height:calc(100svh - 72px);min-height:680px;padding:40px var(--hero-gutter) 56px;overflow:hidden;background:#0f1116}
#hero-title{position:relative;z-index:1;margin:0;font:600 10vw/.94 Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:0;color:rgba(244,248,255,.94)}
#hero-title .hero-line{display:block;white-space:nowrap}
#hero-title .hero-accent{color:#2563eb}

#hero-bubble{position:absolute;inset:auto;z-index:40;display:block;width:100%;height:100%;pointer-events:none}
.bubble-fallback{display:none;position:absolute;z-index:2;left:50%;top:42%;width:min(520px,60vw);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(170,204,255,.4);background:radial-gradient(circle at 30% 24%,rgba(218,232,255,.18),transparent 35%),radial-gradient(circle at 70% 80%,rgba(114,93,255,.14),transparent 55%);box-shadow:inset -10px -12px 32px rgba(100,150,255,.15),inset 7px 7px 18px rgba(203,222,255,.13);pointer-events:none}
.soap-hero.no-webgl .bubble-fallback{display:block}
.soap-hero.no-webgl #hero-bubble{display:none}
@media(max-width:900px){.soap-hero{--hero-gutter:max(15px,calc((100% - 680px)/2));height:calc(100svh - 64px);min-height:580px}}
@media(max-width:560px){.soap-hero{--hero-gutter:14px;min-height:460px;padding:36px var(--hero-gutter) 48px}}
@media(max-height:700px) and (min-width:901px){.soap-hero{min-height:560px}#hero-title{font-size:min(10vw,15.2vh)}}

/* Compact mobile Hero: size to its heading, rather than the phone's screen height. */
@media(max-width:760px){
  .soap-hero{height:auto;min-height:0;justify-content:flex-start;padding-top:48px;padding-bottom:44px}
  #hero-title{font-size:12.5vw}
}

/* Page scrolling remains native outside the bubble touch target. */
.soap-hero{background:#0f1116;-webkit-tap-highlight-color:transparent;touch-action:pan-y pinch-zoom}
@media(pointer:coarse){
  .soap-hero{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  #hero-title,#hero-title .hero-line{background:transparent}
}

/* A transparent ellipse follows the rendered bubble; only this area owns touch dragging. */
.bubble-touch-target{position:absolute;z-index:41;width:2px;height:2px;border-radius:50%;transform-origin:50% 50%;pointer-events:none;touch-action:pinch-zoom;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.bubble-touch-target[hidden]{display:none!important}
@media(pointer:coarse){.bubble-touch-target{pointer-events:auto}}