/* Ally presence: a little wonder, without invented results. */
:root { --ally-rose:#ffad87; --ally-violet:#a698ff; --ally-cream:#f8f1e6; }
body {
  background:
    radial-gradient(ellipse 44% 38% at 50% 43%,rgba(112,75,82,.14) 0%,transparent 86%),
    radial-gradient(ellipse 28% 26% at 58% 31%,rgba(118,104,186,.085),transparent 90%),
    #090a09;
}
body::before {
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle,rgba(255,244,229,.48) .65px,transparent .8px);
  background-size:137px 147px;opacity:.15;mask-image:linear-gradient(180deg,transparent 7%,#000 42%,transparent 87%);
}
.shell { position:relative;z-index:1;width:min(1120px,calc(100% - 52px)); }
.nav {border-color:rgba(255,255,255,.055)}
.logo {font-size:21px;letter-spacing:-.065em}
.logoMark {
  border-radius:50%;
  border:1px solid rgba(255,220,197,.20);
  background:radial-gradient(circle at 35% 23%,rgba(255,255,255,.55),transparent 26%),linear-gradient(145deg,#bb96a3,#db947e 52%,#9b86d7);
  color:#fff;
  box-shadow:0 0 25px rgba(255,166,126,.12);
}
.hero {padding:22px 0 54px}
.heroInner {width:min(790px,100%);position:relative}
.allyPresence {
  --breath:1;
  width:154px;height:154px;
  margin:0 auto 34px;
  position:relative;isolation:isolate;
  display:grid;place-items:center;
  filter:drop-shadow(0 24px 45px rgba(152,94,123,.14));
  transition:transform .5s cubic-bezier(.2,.8,.3,1),filter .5s ease;
}
.allyPresence.is-listening {filter:drop-shadow(0 25px 58px rgba(245,142,115,.23));}
.allyPresenceHalo {
  position:absolute;inset:-62px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(247,167,134,.16) 0%,rgba(190,139,191,.09) 24%,transparent 70%);
  animation:presenceBreathe 7s ease-in-out infinite;
}
.allyPresenceOrbit {
  position:absolute;border-radius:50%;
  border:1px solid rgba(255,227,213,.10);
  transform:rotate(-22deg) scaleY(.49);
  pointer-events:none;
}
.allyPresenceOrbitOne {inset:-17px;border-top-color:rgba(255,185,150,.40);border-bottom-color:rgba(177,150,224,.25);animation:presenceOrbit 18s linear infinite;}
.allyPresenceOrbitTwo {inset:-29px;transform:rotate(47deg) scaleY(.60);border-left-color:rgba(239,163,157,.35);animation:presenceOrbitBack 25s linear infinite;}
.allyPresenceCore {
  position:relative;display:block;width:111px;height:111px;border-radius:50%;
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.98) 0%,rgba(255,239,218,.94) 9%,rgba(255,239,218,0) 30%),
    radial-gradient(circle at 72% 78%,rgba(160,129,239,.80),transparent 45%),
    radial-gradient(circle at 18% 80%,rgba(255,152,131,.95),transparent 59%),
    conic-gradient(from 210deg,#bc8abb,#f3a687,#ffd2a7,#b59cdd,#bc8abb);
  box-shadow:inset -10px -12px 24px rgba(84,45,98,.20),inset 7px 10px 18px rgba(255,255,255,.22),0 0 0 1px rgba(255,240,217,.23),0 0 40px rgba(245,156,127,.16),0 25px 65px rgba(0,0,0,.28);
  animation:presenceDrift 8s ease-in-out infinite;
}
.allyPresenceCore::before {
  content:"";position:absolute;inset:7px;border:1px solid rgba(255,255,255,.20);border-radius:inherit;filter:blur(.15px)
}
.allyPresenceCore::after {
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(ellipse at 55% -10%,rgba(255,255,255,.40),transparent 42%);mix-blend-mode:screen;
}
.allyPresenceSpark {
  position:absolute;width:3px;height:3px;border-radius:50%;background:#ffe6d2;box-shadow:0 0 10px 3px rgba(255,179,151,.50);
  animation:presenceShimmer 5s ease-in-out infinite;
}
.allyPresenceSparkOne {top:4%;right:14%}
.allyPresenceSparkTwo {bottom:15%;left:5%;width:2px;height:2px;animation-delay:-2.2s}
.allyPresenceSparkThree {bottom:1%;right:30%;width:2px;height:2px;animation-delay:-3.3s}
h1 {
  color:var(--ally-cream);
  font-size:clamp(48px,6.8vw,79px);
  letter-spacing:-.077em;font-weight:650;
  text-shadow:0 5px 40px rgba(255,236,213,.06);
}
.heroDescription {
  color:#b7b2ac;font-size:clamp(15px,1.55vw,18px);
  margin-bottom:35px;letter-spacing:-.02em;
}
.promptShell {
  min-height:81px;border-radius:22px;
  background:linear-gradient(155deg,rgba(35,34,35,.97),rgba(22,24,23,.98));
  border:1px solid rgba(255,238,223,.19);
  box-shadow:0 22px 66px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.025) inset;
}
.promptShell:focus-within,.promptShell.focused {
  border-color:rgba(255,188,158,.58);
  box-shadow:0 18px 58px rgba(0,0,0,.37),0 0 0 3px rgba(244,158,140,.075),0 0 45px rgba(205,124,140,.09);
}
.intentInput {font-size:17px;color:#fcf8f1}
.intentInput::placeholder{color:#96918e}
.submit {
  background:linear-gradient(145deg,#ffbc94,#ff9573);border-radius:14px;
  box-shadow:0 4px 20px rgba(255,147,115,.15);
}
.submit:hover {background:linear-gradient(145deg,#ffd0ad,#ffaa87)}
.quickStarts {margin-top:24px;gap:9px}
.quickStartsLabel{color:#777973;letter-spacing:.01em}
.quickStart {
  font-size:12px;border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.026);
  color:#d9d5cf;padding:9px 15px;transition:all .2s ease;
}
.quickStart span {color:#ffb58e}
.quickStart:hover {background:rgba(255,169,131,.085);border-color:rgba(255,169,131,.37);transform:translateY(-2px)}
.smsEntry {margin-top:25px;gap:5px}
.orText {font-size:10px;opacity:.7}
.smsEntry a {font-weight:550;font-size:13px;color:#b8b0ab}
.smsEntry a:hover{color:#ffb48e}
.footer {border-color:rgba(255,255,255,.055)}
@keyframes presenceBreathe {0%,100%{opacity:.75;transform:scale(.90)}50%{opacity:1;transform:scale(1.13)}}
@keyframes presenceDrift {0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-5px) rotate(7deg)}}
@keyframes presenceOrbit {from{transform:rotate(-22deg) scaleY(.49)}to{transform:rotate(338deg) scaleY(.49)}}
@keyframes presenceOrbitBack {from{transform:rotate(47deg) scaleY(.60)}to{transform:rotate(-313deg) scaleY(.60)}}
@keyframes presenceShimmer {0%,100%{opacity:.28;transform:scale(.5)}45%{opacity:1;transform:scale(1.5)}}
@media(max-width:640px){
  .shell{width:calc(100% - 30px);grid-template-rows:65px minmax(520px,1fr) auto}
  .hero{padding:28px 0 30px}
  .allyPresence{width:118px;height:118px;margin-bottom:32px}
  .allyPresenceCore{width:91px;height:91px}
  .allyPresenceHalo{inset:-45px}
  h1{font-size:clamp(44px,10.5vw,59px);letter-spacing:-.075em}
  .heroDescription{margin-bottom:30px;font-size:15px}
  .promptShell{min-height:70px;border-radius:19px}
  .intentInput{font-size:16px}
  .quickStarts{gap:7px}
  .quickStart{font-size:11px;padding:8px 11px}
  .smsEntry{margin-top:23px}
}
@media(prefers-reduced-motion:reduce){
  .allyPresenceHalo,.allyPresenceOrbit,.allyPresenceCore,.allyPresenceSpark{animation:none!important}
  .allyPresence,.quickStart{transition:none!important}
}


/* Draggable Ally orb: movement affects only the ornament, not the composer. */
.allyPresence {
  --orb-x: 0px;
  --orb-y: 0px;
  --orb-scale: 1;
  transform: translate3d(var(--orb-x), var(--orb-y), 0) scale(var(--orb-scale));
  transition: filter .24s ease;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
  will-change: transform;
}
.allyPresence.is-dragging {
  cursor: grabbing;
  z-index: 10;
  filter: drop-shadow(0 29px 56px rgba(244,159,137,.29));
}
.allyPresence.is-dragging .allyPresenceCore {
  animation-play-state: paused;
  box-shadow: inset -10px -12px 24px rgba(84,45,98,.2),
    inset 7px 10px 18px rgba(255,255,255,.22),
    0 0 0 1px rgba(255,240,217,.23),
    0 0 49px rgba(255,181,144,.33),
    0 25px 65px rgba(0,0,0,.28);
}
.allyPresence:focus-visible {
  outline: 2px solid rgba(255,185,151,.75);
  outline-offset: 14px;
  border-radius: 50%;
}


/* Invisible, stroke-only interaction targets follow the original orbital rings.
   They leave all visible colors, highlights and ring borders untouched. */
.allyPresenceRingHandle {
  position: absolute;
  display: block;
  overflow: visible;
  z-index: 5;
  pointer-events: none;
  touch-action: none;
  transform-origin: center;
}
.allyPresenceRingHandleOne {
  inset: -17px;
  width: calc(100% + 34px);
  height: calc(100% + 34px);
  animation: presenceOrbit 18s linear infinite;
  transform: rotate(-22deg) scaleY(.49);
}
.allyPresenceRingHandleTwo {
  inset: -29px;
  width: calc(100% + 58px);
  height: calc(100% + 58px);
  animation: presenceOrbitBack 25s linear infinite;
  transform: rotate(47deg) scaleY(.60);
}
.allyPresenceRingHandle circle {
  fill: none;
  stroke: rgba(255,255,255,0.001);
  stroke-width: 22;
  pointer-events: stroke;
  cursor: grab;
}
.allyPresenceRingHandle:focus-visible circle {
  stroke: rgba(255,206,187,.13);
}
.allyPresence.orbital-interacting .allyPresenceRingHandle circle {
  cursor: grabbing;
}
.allyPresenceOrbit { transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
  .allyPresenceRingHandle { animation: none !important; }
}


/* The basketball goal is built from independent 3D-like physical parts,
   not a flat basket SVG. It does not alter the original orb colors/rings. */
.allyCourt[hidden],.courtForeground[hidden]{display:none!important}
.allyPresence.is-play-mode{z-index:30}
.allyPresence.is-play-mode.is-in-flight{
  transform:translate3d(var(--orb-x),var(--orb-y),0) scale(var(--orb-scale)) scale(var(--hoop-depth-scale,1));
}
.allyPresence.is-play-mode.is-in-flight .allyPresenceCore{
  animation-play-state:paused;
}
.allyCourt,.courtForeground{
  --courtW:290px;
  --rimW:184px;
  --rimH:51px;
  position:fixed;
  width:var(--courtW);
  height:315px;
  right:clamp(10px,5vw,85px);
  top:clamp(100px,17vh,172px);
  pointer-events:none;
  transform-style:preserve-3d;
}
.allyCourt{
  z-index:20;
  color:#f9e9e0;
  font:12px/1.35 Inter,ui-sans-serif,system-ui,sans-serif;
  animation:courtEnter .32s ease-out both;
}
.courtForeground{z-index:34}
.courtCaption{
  position:absolute;left:14px;top:-41px;
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  letter-spacing:.02em;
}
.courtCaption span{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:#b4979c}
.courtCaption strong{font-size:15px;font-weight:630;color:#ffdcc1}
.courtPole {
  position:absolute;
  left:267px;top:25px;width:11px;height:250px;
  border-radius:4px;
  background:linear-gradient(90deg,#4b4649,#8e7f87 45%,#343136 100%);
  box-shadow:11px 9px 28px rgba(0,0,0,.35);
}
.courtBoard {
  position:absolute;
  left:147px;top:13px;
  width:139px;height:113px;
  box-sizing:border-box;
  border:5px solid rgba(255,236,227,.83);
  border-radius:7px;
  background:linear-gradient(125deg,rgba(221,201,216,.14),rgba(255,226,214,.035) 70%);
  box-shadow:inset 0 0 25px rgba(255,255,255,.045),
    0 0 0 2px rgba(26,25,27,.8),-8px 14px 24px rgba(0,0,0,.24);
  transform:perspective(470px) rotateY(-19deg);
  transform-origin:right center;
  backdrop-filter:blur(2px);
}
.courtBoardTarget {
  position:absolute;width:53px;height:41px;bottom:9px;left:30px;
  border:3px solid rgba(251,229,220,.68);
  border-radius:2px;
}
.courtBracket{
  position:absolute;
  left:192px;top:117px;width:40px;height:12px;
  background:linear-gradient(180deg,#a18885,#42383b);
  border-radius:4px;
  transform:skewY(-6deg);
  box-shadow:0 4px 8px rgba(0,0,0,.3);
}
.courtRim {
  position:absolute;left:15px;top:127px;
  width:var(--rimW);height:var(--rimH);
  border-radius:50%;
  box-sizing:border-box;
  transform:perspective(280px) rotateX(19deg);
  transform-style:preserve-3d;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.24));
}
.courtRimBack {
  border:8px solid transparent;
  border-top-color:#ffd5b0;
  border-left-color:#f2a77e;
  border-right-color:#d88283;
  z-index:3;
  box-shadow:inset 0 4px 11px rgba(120,50,39,.09);
}
.courtRimFront {
  border:9px solid transparent;
  border-bottom-color:#e58b70;
  border-left-color:#d98f8a;
  border-right-color:#f7a782;
  box-shadow:0 7px 5px -7px rgba(248,189,151,.75),inset 0 -4px 4px rgba(85,37,43,.23);
}
.courtNet {
  position:absolute;left:34px;top:155px;
  width:148px;height:112px;
  clip-path:polygon(0 0,100% 0,78% 100%,22% 100%);
  opacity:.83;
  transform-origin:50% 0;
  z-index:2;
  filter:drop-shadow(0 8px 9px rgba(0,0,0,.21));
}
.netMesh {
  display:block;position:absolute;inset:0;
  background:
    repeating-linear-gradient(60deg,transparent 0 18px,rgba(255,224,218,.76) 18px 19.5px,transparent 19.5px 37px),
    repeating-linear-gradient(-60deg,transparent 0 18px,rgba(241,213,237,.67) 18px 19.5px,transparent 19.5px 37px);
  background-position:center top;
  mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%);
}
.netEdge{position:absolute;top:0;height:95%;width:2px;background:rgba(245,218,228,.76)}
.netEdgeLeft{left:8%;transform:rotate(-13deg);transform-origin:top}
.netEdgeRight{right:8%;transform:rotate(13deg);transform-origin:top}
.courtControls{
  position:absolute;left:14px;right:0;top:278px;
  display:flex;align-items:center;gap:10px;pointer-events:none;
  font-variant-numeric:tabular-nums;
}
.courtScore{font-weight:780;letter-spacing:.02em;color:#ffbc9f;margin-right:5px}
.courtReset,.courtSound,.courtClose{
  pointer-events:auto;
  border:1px solid rgba(250,199,183,.22);
  color:#ddd0cb;border-radius:999px;
  background:rgba(26,22,26,.82);
  padding:6px 11px;cursor:pointer;
  font:11px Inter,ui-sans-serif,system-ui,sans-serif;
}
.courtReset:hover,.courtSound:hover,.courtClose:hover{
  border-color:rgba(252,192,161,.6);
  color:white;
}
.courtStatus{position:absolute;top:309px;left:14px;right:0;margin:0;color:#bcaeb6;font-size:11px;text-align:left}
.allyCourt.made-shot .courtScore {animation:courtScorePop .57s ease-out}
.allyCourt.made-shot .courtRimBack,.allyCourt.made-shot .courtNet{filter:drop-shadow(0 0 14px rgba(255,195,145,.43))}
.courtNet.swooshing{animation:netCatch .72s cubic-bezier(.15,.65,.25,1.1)}
.allyCourt.rim-hit .courtRimBack{animation:rimShake .16s ease-out}
.allyCourt.board-hit .courtBoard{animation:boardShake .17s ease-out}
@keyframes courtEnter{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes courtScorePop{50%{transform:scale(1.23);color:white}to{transform:scale(1)}}
@keyframes netCatch{0%{transform:scaleY(1) skewX(0)}26%{transform:scaleY(1.21) skewX(8deg)}56%{transform:scaleY(.96) skewX(-6deg)}82%{transform:scaleY(1.06) skewX(3deg)}to{transform:none}}
@keyframes rimShake{50%{translate:0 2px}to{translate:0 0}}
@keyframes boardShake{40%{transform:perspective(470px) rotateY(-18deg) translateX(2px)}to{transform:perspective(470px) rotateY(-19deg)}}
@media(max-width:640px){
 .allyCourt,.courtForeground{
   --courtW:202px;--rimW:124px;--rimH:37px;
   right:6px;top:clamp(112px,19vh,170px);
   height:280px;
 }
 .courtCaption{left:4px;top:-36px}
 .courtCaption strong{font-size:12px}
 .courtPole{left:187px;top:26px;height:180px;width:8px}
 .courtBoard{left:107px;top:21px;width:95px;height:87px;border-width:3px}
 .courtBoardTarget{left:20px;bottom:7px;width:39px;height:32px;border-width:2px}
 .courtBracket{left:135px;top:104px;width:36px;height:8px}
 .courtRim{left:9px;top:104px;border-width:6px}
 .courtRimFront{border-width:7px}
 .courtNet{left:23px;top:129px;width:97px;height:79px}
 .courtControls{left:1px;top:222px;gap:6px}
 .courtScore{font-size:11px;margin-right:0}
 .courtReset,.courtSound,.courtClose{font-size:10px;padding:5px 7px}
 .courtStatus{left:1px;top:254px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 .allyCourt,.courtNet.swooshing,.allyCourt.made-shot .courtScore,
 .allyCourt.rim-hit .courtRimBack,.allyCourt.board-hit .courtBoard{animation:none!important}
}

/* Keep the ball above the backboard/net, but below the foreground rim. */
.shell.allyBasketballActive{z-index:26}


/* Keep the entire homepage (including its footer) visible on ordinary screens.
   Use natural scrolling if an exceptionally short viewport cannot fit it. */
@media (min-width: 641px) and (max-height: 900px) {
  .shell { grid-template-rows: clamp(54px, 8vh, 70px) minmax(0, 1fr) auto; }
  .hero { padding: clamp(4px, 1.3vh, 11px) 0 clamp(7px, 1.7vh, 16px); }
  .allyPresence {
    width: clamp(106px, 16vh, 140px);
    height: clamp(106px, 16vh, 140px);
    margin-bottom: clamp(9px, 2vh, 20px);
  }
  .allyPresenceCore { width: 76%; height: 76%; }
  h1 { font-size: clamp(44px, min(6.6vw, 9.2vh), 74px); line-height: 1.04; margin-bottom: 7px; }
  .heroDescription { margin-bottom: clamp(12px, 2vh, 18px); }
  .promptShell { min-height: 72px; }
  .intentInput { min-height: 50px; padding-top: 10px; padding-bottom: 8px; }
  .submit { width: 44px; height: 44px; bottom: 12px; }
  .quickStarts { margin-top: 12px; gap: 7px; }
  .quickStart { padding: 7px 11px; line-height: 1.3; }
  .smsEntry { margin-top: 10px; gap: 2px; }
  .smsEntry a { padding: 2px 6px; }
  .footer { min-height: 50px; padding: 10px 0; }
}
@media (min-width: 641px) and (max-height: 730px) {
  .shell { grid-template-rows: 54px minmax(0, 1fr) auto; }
  .hero { padding: 2px 0 8px; }
  .allyPresence { width: 102px; height: 102px; margin-bottom: 9px; }
  h1 { font-size: clamp(42px, 8vh, 59px); margin-bottom: 5px; }
  .heroDescription { font-size: 14px; margin-bottom: 10px; }
  .promptShell { min-height: 62px; }
  .intentInput { min-height: 43px; padding-top: 8px; padding-bottom: 6px; }
  .submit { width: 40px; height: 40px; right: 11px; bottom: 10px; }
  .quickStarts { margin-top: 7px; gap: 5px; }
  .quickStart { padding: 6px 9px; font-size: 10px; }
  .smsEntry { margin-top: 4px; gap: 0; }
  .footer { min-height: 42px; padding: 7px 0; }
}
@media (max-width: 640px) {
  .shell { grid-template-rows: 56px minmax(0, 1fr) auto; }
  .hero { padding: 8px 0 14px; }
  .allyPresence { width: 102px; height: 102px; margin-bottom: 17px; }
  .allyPresenceCore { width: 76%; height: 76%; }
  h1 { font-size: clamp(39px, 10vw, 52px); line-height: 1.04; margin-bottom: 7px; }
  .heroDescription { font-size: 14px; margin-bottom: 15px; }
  .promptShell { min-height: 64px; }
  .intentInput { min-height: 44px; padding-top: 9px; padding-bottom: 7px; }
  .submit { width: 40px; height: 40px; bottom: 10px; }
  .quickStarts { margin-top: 10px; gap: 6px; }
  .quickStart { padding: 6px 9px; font-size: 10.5px; }
  .smsEntry { margin-top: 9px; gap: 1px; }
  .smsEntry a { padding: 2px 6px; }
  .footer { min-height: 49px; padding: 10px 0; gap: 9px; }
}
@media (max-width: 640px) and (max-height: 700px) {
  .hero { padding: 3px 0 9px; }
  .allyPresence { width: 82px; height: 82px; margin-bottom: 10px; }
  h1 { font-size: clamp(35px, 9.2vw, 44px); }
  .heroDescription { margin-bottom: 10px; }
  .quickStarts { margin-top: 7px; gap: 4px; }
  .quickStart { padding: 5px 8px; }
  .smsEntry { margin-top: 4px; }
  .footer { padding: 7px 0; }
}