/* ==========================================================================
   andee — heyandee.com

   One stylesheet, no build step, no framework. It has two parts, and the
   split is deliberate:

     PART 1  the design system. Palette, cards, buttons, section markers, the
             phone mockup, the warm gradient, the responsive ladder. This is
             the reference build's own stylesheet, carried over as-is (asset
             paths rewritten, nothing else touched) so that the two stay the
             same object and a colour only has to be changed in one place.
             It is layered: later rules override earlier ones, which is why
             the same selector can appear more than once. That is the
             reference's structure, kept rather than untangled — untangling it
             by hand is exactly how a design system quietly drifts.

     PART 2  this site's own layer. The live character and its lab, the
             submission grid, the longer editorial sections, the lightbox, and
             the print / hover / reduced-motion / keyboard story. Same
             language as part 1 — one radius scale (12/20/28), one hairline
             colour, one accent pair (#ffb88e warm, #6b8eff blue) — because
             the goal is one site, not two stylesheets in a trench coat.

   If a value looks like it is fighting itself, part 2 is the part to change:
   it is the one written to be edited.
   ========================================================================== */

*
{
  box-sizing:border-box
}
html
{
  scroll-behavior:smooth;
  scroll-padding-top:90px
}
body
{
  margin:0;
  background:#0d0d0d;
  color:#f5f6f8;
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif
}
a
{
  color:inherit;
  text-decoration:none
}
button
{
  font:inherit
}
header
{
  position:sticky;
  top:0;
  z-index:20;
  background:#0d0d0de8;
  backdrop-filter:blur(20px);
  border-bottom:1px solid #ffffff16
}
.wrap
{
  max-width:1200px;
  padding:0 32px;
  margin:auto
}
.nav
{
  height:88px;
  display:flex;
  align-items:center;
  gap:28px
}
.brand
{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:29px;
  font-weight:700;
  letter-spacing:-1px
}
.brand img
{
  width:48px;
  height:48px;
  object-fit:cover;
  border-radius:50%
}
nav
{
  display:flex;
  gap:24px;
  margin-left:auto;
  font-size:14px;
  color:#b8becb
}
.tools
{
  display:flex;
  align-items:center;
  gap:14px
}
.btn
{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  border:1px solid #ffffff20;
  border-radius:999px;
  padding:13px 24px;
  background:linear-gradient(145deg,#262930,#15171b);
  font-weight:600;
  font-size:14px;
  transition:transform .2s,border-color .2s
}
.btn:hover
{
  transform:translateY(-2px);
  border-color:#6b8eff
}
.primary
{
  background:linear-gradient(120deg,#ffb88e,#ff9a74 45%,#ea6a7a);
  color:#fff;
  border:0;
  box-shadow:0 8px 35px #ea6a7a18
}
.tiny
{
  padding:9px 17px
}
.hero
{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  align-items:center;
  gap:56px;
  padding:100px 0 86px
}
.eyebrow
{
  font-size:12px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#b8c4dd;
  margin:0 0 24px
}
.dot
{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:100%;
  background:#6b8eff;
  margin-right:8px
}
h1
{
  font-size:clamp(42px,5vw,68px);
  line-height:1.14;
  letter-spacing:-2px;
  margin:0 0 28px;
  font-weight:650
}
h1 span
{
  background:linear-gradient(110deg,#ffb88e,#ea6a7a);
  color:transparent;
  background-clip:text
}
p
{
  margin:0;
  color:#aeb5c2
}
.lede
{
  max-width:565px;
  font-size:18px;
  line-height:1.9
}
.actions
{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px
}
.meta
{
  font-size:12px;
  color:#8a929f;
  margin-top:22px
}
.hero-art
{
  position:relative;
  min-height:420px;
  border:1px solid #ffffff20;
  border-radius:28px;
  overflow:hidden;
  background:radial-gradient(ellipse at 52% 45%,#6b8eff22,transparent 52%),linear-gradient(145deg,#1d1e23,#111214)
}
.hero-art:before
{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 25% 80%,#ff9a7422,transparent 60%)
}
.art-label
{
  position:absolute;
  left:28px;
  top:24px;
  font-size:11px;
  letter-spacing:2px;
  color:#b9c0cd
}
.mascot
{
  position:absolute;
  left:50%;
  top:48%;
  width:270px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 65px #6b8eff22
}
.prompt
{
  position:absolute;
  bottom:26px;
  left:24px;
  right:24px;
  border:1px solid #ffffff25;
  border-radius:20px;
  padding:15px 18px;
  background:#121419d9;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px
}
.prompt span
{
  color:#b5becc
}
.prompt b
{
  margin-left:auto;
  background:linear-gradient(135deg,#ffb88e,#ea6a7a);
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center
}
.strip
{
  border-top:1px solid #ffffff14;
  border-bottom:1px solid #ffffff14;
  padding:24px 0;
  display:flex;
  gap:25px;
  justify-content:space-between;
  font-size:13px;
  color:#b4bccb
}
.strip b
{
  color:#f5f6f8;
  font-weight:500
}
section
{
  padding:96px 0
}
h2
{
  font-size:clamp(29px,3vw,42px);
  font-weight:600;
  letter-spacing:-1px;
  line-height:1.25;
  margin:0 0 20px
}
.section-head
{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  margin-bottom:36px
}
.section-head p
{
  max-width:510px;
  font-size:15px
}
.eyebrow.blue
{
  color:#6b8eff;
  margin-bottom:16px
}
.grid3
{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px
}
.card
{
  border:1px solid #ffffff20;
  border-radius:20px;
  background:linear-gradient(145deg,#1c1e22,#111315);
  overflow:hidden
}
.card-body
{
  padding:24px
}
h3
{
  font-size:21px;
  letter-spacing:-.4px;
  margin:0 0 12px;
  line-height:1.4
}
.card p
{
  font-size:14px;
  line-height:1.9
}
.kicker
{
  font-size:11px;
  letter-spacing:1.8px;
  color:#8c9fbf;
  margin-bottom:12px
}
.demo-media
{
  position:relative;
  height:360px;
  background:#111215;
  border-bottom:1px solid #ffffff15;
  display:grid;
  place-items:center;
  overflow:hidden
}
.demo-media img
{
  height:100%;
  max-width:100%;
  object-fit:contain
}
.unavailable
{
  display:none;
  padding:35px;
  text-align:center
}
.unavailable strong
{
  display:block;
  font-size:18px;
  margin-bottom:14px
}
.unavailable a
{
  display:inline-block;
  margin-top:20px;
  color:#ffb88e;
  font-size:14px
}
.timestamp
{
  position:absolute;
  right:16px;
  top:16px;
  background:#0d0d0dbf;
  border:1px solid #ffffff20;
  border-radius:999px;
  padding:4px 10px;
  font-size:11px
}
.usecases
{
  padding-top:0
}
.number
{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid #ffffff25;
  border-radius:12px;
  color:#ffb88e;
  font-size:13px;
  margin-bottom:26px
}
.usecard
{
  min-height:290px
}
.usecard:nth-child(2)
{
  background:linear-gradient(145deg,#282120,#161315)
}
.usecard:nth-child(3)
{
  background:linear-gradient(145deg,#1e2639,#13151c)
}
.note
{
  margin-top:22px;
  font-size:12px;
  line-height:1.8;
  color:#858e9d
}
.comparison
{
  background:#111214;
  border-top:1px solid #ffffff12;
  border-bottom:1px solid #ffffff12
}
.tablewrap
{
  overflow-x:auto;
  border:1px solid #ffffff20;
  border-radius:20px
}
table
{
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:14px
}
td,th
{
  padding:23px 26px;
  border-bottom:1px solid #ffffff14
}
th
{
  font-weight:500;
  color:#b4bfce;
  background:#191b20
}
th:last-child
{
  color:#6b8eff
}
td:last-child
{
  color:#eef1fa
}
td
{
  color:#9da5b3
}
tr:last-child td
{
  border:0
}
.techgrid
{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}
.techgrid .card
{
  padding:28px
}
.techgrid code
{
  font:12px/1.5 monospace;
  color:#93afff;
  overflow-wrap:anywhere
}
.community
{
  padding:55px;
  border-radius:28px;
  border:1px solid #ffffff25;
  background:radial-gradient(ellipse at 85% 20%,#6b8eff20,transparent 55%),radial-gradient(ellipse at 20% 90%,#ea6a7a18,transparent 60%),#141518
}
.community .lede
{
  font-size:16px
}
.steps
{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;
  margin-top:45px;
  padding-top:30px;
  border-top:1px solid #ffffff20
}
.steps h3
{
  font-size:18px
}
.steps p
{
  font-size:14px
}
.faq-layout
{
  display:grid;
  grid-template-columns:1fr 1.7fr;
  gap:64px
}
details
{
  border-bottom:1px solid #ffffff20
}
summary
{
  padding:23px 30px 23px 0;
  cursor:pointer;
  font-size:16px;
  font-weight:500;
  list-style:none;
  position:relative
}
summary:after
{
  content:"+";
  position:absolute;
  right:4px;
  color:#8ca6ff
}
details[open] summary:after
{
  content:"−"
}
details p
{
  padding:0 24px 24px 0;
  font-size:14px;
  line-height:1.95
}
footer
{
  border-top:1px solid #ffffff20;
  padding:48px 0 28px
}
.footer-grid
{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:35px
}
.footer-grid h4
{
  font-size:13px;
  margin:0 0 15px
}
.footer-grid a:not(.brand)
{
  display:block;
  font-size:13px;
  color:#a5afbf;
  margin-bottom:10px
}
.footline
{
  margin-top:38px;
  padding-top:20px;
  border-top:1px solid #ffffff12;
  font-size:11px;
  color:#778292;
  display:flex;
  justify-content:space-between;
  gap:20px
}
a:focus-visible,summary:focus-visible
{
  outline:2px solid #6b8eff;
  outline-offset:5px
}
@media(max-width:950px)
{
  nav
  {
    display:none
  }
  .tools
  {
    margin-left:auto
  }
  .hero
  {
    gap:28px
  }
  .hero-art
  {
    min-height:370px
  }
  .mascot
  {
    width:235px
  }
  .faq-layout
  {
    gap:30px
  }
  .wrap
  {
    padding:0 24px
  }
}
@media(max-width:650px)
{
  .nav
  {
    height:72px;
    gap:12px
  }
  .brand
  {
    font-size:24px
  }
  .brand img
  {
    width:38px;
    height:38px
  }
  .tools
  {
    gap:10px;
    font-size:13px
  }
  .tools .btn
  {
    padding:8px 12px;
    font-size:12px
  }
  .hero
  {
    grid-template-columns:1fr;
    padding:56px 0 45px;
    gap:35px
  }
  h1
  {
    letter-spacing:-1px;
    font-size:44px
  }
  .hero-art
  {
    min-height:365px
  }
  .lede
  {
    font-size:16px
  }
  .strip
  {
    flex-wrap:wrap;
    gap:14px
  }
  .strip span
  {
    width:45%;
    font-size:11px
  }
  section
  {
    padding:64px 0
  }
  .section-head
  {
    display:block
  }
  .section-head p
  {
    margin-top:15px
  }
  .grid3
  {
    grid-template-columns:1fr
  }
  .demo-media
  {
    height:420px
  }
  .techgrid
  {
    grid-template-columns:1fr
  }
  .faq-layout
  {
    grid-template-columns:1fr;
    gap:20px
  }
  .community
  {
    padding:28px
  }
  .steps
  {
    grid-template-columns:1fr;
    gap:25px
  }
  .footer-grid
  {
    grid-template-columns:1fr 1fr
  }
  .footer-grid>div:first-child
  {
    grid-column:1/-1
  }
  .footline
  {
    display:block
  }
  .usecard
  {
    min-height:0
  }
  td,th
  {
    padding:17px 16px;
    min-width:155px
  }
  .wrap
  {
    padding:0 20px
  }
  .actions .btn
  {
    padding:12px 19px
  }
}
@media(prefers-reduced-motion:reduce)
{
  html
  {
    scroll-behavior:auto
  }
  *
  {
    transition:none!important
  }
}
.nav
{
  height:80px;
  gap:18px
}
#main-nav
{
  gap:16px;
  font-size:12px;
  margin-left:auto
}
#main-nav a
{
  white-space:nowrap
}
.tools
{
  gap:10px
}
.tools .btn
{
  padding:9px 15px;
  font-size:12px
}
.menu-toggle
{
  display:none;
  border:1px solid #ffffff25;
  border-radius:999px;
  background:#1b1d22;
  color:#f5f6f8;
  padding:8px 13px;
  font-size:13px;
  cursor:pointer
}
#main-nav a:hover
{
  color:#ffb88e
}
@media(max-width:1120px)
{
  .menu-toggle
  {
    display:inline-flex;
    gap:8px;
    align-items:center
  }
  #main-nav
  {
    display:none;
    position:absolute;
    top:80px;
    left:0;
    right:0;
    padding:22px 24px;
    background:#121316;
    border-bottom:1px solid #ffffff25;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    margin:0
  }
  #main-nav.is-open
  {
    display:grid
  }
  #main-nav a
  {
    padding:12px;
    font-size:14px
  }
  .tools
  {
    margin-left:auto
  }
}
@media(max-width:650px)
{
  #main-nav
  {
    top:72px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:14px
  }
  .tools .btn
  {
    padding:8px 11px
  }
  .tools>a:first-of-type
  {
    display:none
  }
  .nav
  {
    gap:10px
  }
  .tools
  {
    gap:8px
  }
  .brand
  {
    font-size:22px
  }
  .brand img
  {
    width:34px;
    height:34px
  }
  h1
  {
    font-size:40px
  }
  #about
  {
    padding-top:56px
  }
}
h1
{
  font-weight:500;
  font-size:clamp(42px,5.3vw,68px);
  line-height:1.2
}
h2
{
  font-weight:500
}
h3
{
  font-weight:500
}
.hero
{
  padding:70px 0 48px;
  gap:75px
}
.hero-art
{
  border:0;
  background:radial-gradient(ellipse at 50% 60%,#6b8eff17,transparent 60%);
  min-height:450px;
  overflow:visible
}
.hero-art:before
{
  display:none
}
.phone
{
  position:relative;
  width:216px;
  height:405px;
  margin:24px auto;
  border:2px solid #8e8b88;
  border-radius:34px;
  padding:8px;
  background:#111;
  box-shadow:5px 5px 0 #353030,15px 22px 65px #ea6a7a18;
  transform:rotate(5deg)
}
.screen
{
  height:100%;
  border-radius:25px;
  background:radial-gradient(ellipse at 70% 30%,#1c2a3a,#11171c 65%);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative
}
.camera
{
  position:absolute;
  top:14px;
  width:8px;
  height:8px;
  background:#080808;
  border-radius:50%
}
.phone img
{
  width:140px;
  border-radius:50%;
  margin-bottom:10px
}
.screen strong
{
  font-size:23px;
  font-weight:500
}
.status-pill
{
  margin-top:15px;
  border:1px solid #ffffff25;
  background:#ffffff08;
  border-radius:12px;
  padding:8px 20px;
  font-size:13px;
  color:#b9c6d9
}
.phone-caption
{
  text-align:center;
  font-size:11px;
  color:#818d9e;
  margin-top:30px
}
.community-top
{
  border-top:1px solid #ffffff15;
  border-bottom:1px solid #ffffff15;
  padding:21px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.community-top p
{
  font-size:13px;
  max-width:650px
}
.community-top a
{
  white-space:nowrap;
  font-size:13px;
  color:#ffb88e
}
.hero .meta
{
  max-width:530px;
  font-size:12px
}
.subtitle
{
  font-size:14px;
  color:#b4bfd0;
  letter-spacing:1px;
  margin-bottom:20px
}
.abouttext
{
  max-width:850px;
  font-size:20px;
  line-height:1.9;
  color:#cbd2de
}
.flow
{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px
}
.flow .card
{
  padding:25px 20px
}
.flow .number
{
  color:#6b8eff;
  margin-bottom:18px
}
.flow h3
{
  font-size:18px
}
.flow p
{
  font-size:13px
}
.work-note
{
  margin-top:25px;
  padding:18px 22px;
  border:1px solid #ffffff20;
  border-radius:12px;
  color:#abb4c3;
  font-size:13px
}
.compact-demo
{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:60px;
  align-items:center
}
.compact-demo .section-head
{
  display:block;
  margin:0
}
.compact-demo .section-head p
{
  margin-top:20px
}
.shotrow
{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}
.shot
{
  border:1px solid #ffffff20;
  background:#17191d;
  border-radius:12px;
  overflow:hidden
}
.shot-slot
{
  height:200px;
  background:linear-gradient(145deg,#20242b,#12151a);
  display:grid;
  place-items:center;
  color:#778494;
  font-size:12px;
  padding:12px;
  text-align:center
}
.shot figcaption
{
  padding:12px;
  font-size:12px;
  color:#c4ccd8
}
.shot
{
  margin:0
}
.shot figcaption span
{
  display:block;
  font-size:10px;
  color:#737f91;
  margin-top:4px
}
.carousel-head
{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}
.carousel-controls
{
  display:flex;
  gap:8px
}
.arrowbtn
{
  border:1px solid #ffffff25;
  border-radius:50%;
  width:40px;
  height:40px;
  background:#1a1d22;
  color:white;
  cursor:pointer;
  font-size:18px
}
.video-rail
{
  display:flex;
  gap:22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scrollbar-color:#556178 #14161b;
  padding:8px 0 18px
}
.video-card
{
  flex:0 0 42%;
  scroll-snap-align:start;
  border:1px solid #ffffff20;
  border-radius:20px;
  overflow:hidden;
  background:#16181c
}
.video-slot
{
  aspect-ratio:16/10;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:radial-gradient(ellipse at 70% 20%,#6b8eff18,transparent 65%),#15181e
}
.play-mark
{
  width:48px;
  height:48px;
  border:1px solid #ffffff25;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#8095ba
}
.video-slot span
{
  font-size:12px;
  color:#768397
}
.video-card .card-body
{
  padding:20px
}
.video-card h3
{
  font-size:18px
}
.video-card p
{
  font-size:13px;
  line-height:1.8
}
.more-cases
{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:25px;
  margin-top:35px
}
.more-cases>div
{
  border-top:1px solid #ffffff20;
  padding-top:22px
}
.more-cases h3
{
  font-size:17px
}
.more-cases p
{
  font-size:14px;
  line-height:1.9
}
.more-title
{
  margin-top:42px;
  font-size:21px;
  font-weight:500
}
.safety-list
{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}
.safety-list article
{
  padding:24px;
  border:1px solid #ffffff20;
  border-radius:20px;
  background:#15171a
}
.safety-list h3
{
  font-size:18px
}
.safety-list p
{
  font-size:14px;
  line-height:1.9
}
.install-layout
{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px
}
.install-video
{
  border:1px solid #ffffff25;
  border-radius:20px;
  overflow:hidden;
  background:#15171a
}
.install-video .video-slot
{
  aspect-ratio:16/11
}
.install-video p
{
  padding:20px;
  font-size:13px
}
.installsteps
{
  display:flex;
  flex-direction:column;
  gap:22px
}
.installsteps article
{
  display:flex;
  gap:18px
}
.installsteps .number
{
  flex-shrink:0
}
.installsteps h3
{
  font-size:18px;
  margin-bottom:7px
}
.installsteps p
{
  font-size:14px
}
.downloadbox
{
  display:flex;
  gap:20px;
  align-items:center;
  border:1px solid #ffffff20;
  background:#17191d;
  border-radius:20px;
  padding:22px;
  margin-top:34px
}
.downloadbox img
{
  width:94px;
  height:94px;
  border:7px solid white;
  border-radius:8px
}
.downloadbox p
{
  font-size:12px;
  margin-top:8px
}
.downloadbox .actions
{
  margin-top:12px
}
.cost
{
  margin-top:25px;
  font-size:13px;
  line-height:1.9
}
.nav
{
  height:80px
}
#main-nav
{
  gap:18px;
  font-size:12px
}
.tools
{
  margin-left:auto
}
.menu-toggle
{
  display:none
}
section
{
  padding:75px 0
}
#work
{
  padding-top:0
}
#demo
{
  padding:38px 0 65px
}
#cases
{
  background:#111214;
  border-block:1px solid #ffffff12
}
.footer-grid
{
  grid-template-columns:2fr 1fr 1fr
}
@media(max-width:1100px)
{
  .menu-toggle
  {
    display:inline-flex
  }
  #main-nav
  {
    display:none;
    top:80px
  }
  #main-nav.is-open
  {
    display:grid
  }
}
@media(max-width:700px)
{
  .hero
  {
    grid-template-columns:1fr;
    gap:15px;
    padding-top:45px
  }
  .hero-art
  {
    min-height:400px
  }
  .phone
  {
    width:195px;
    height:365px
  }
  .phone img
  {
    width:125px
  }
  .community-top
  {
    align-items:start;
    flex-direction:column;
    gap:8px
  }
  .flow
  {
    grid-template-columns:1fr 1fr
  }
  .compact-demo
  {
    grid-template-columns:1fr;
    gap:28px
  }
  .shot-slot
  {
    height:170px
  }
  .shot figcaption
  {
    padding:10px 7px
  }
  .video-card
  {
    flex-basis:86%
  }
  .more-cases
  {
    grid-template-columns:1fr;
    gap:18px
  }
  .safety-list
  {
    grid-template-columns:1fr
  }
  .install-layout
  {
    grid-template-columns:1fr
  }
  .downloadbox
  {
    align-items:start
  }
  .downloadbox img
  {
    width:80px;
    height:80px
  }
  section
  {
    padding:58px 0
  }
  #demo
  {
    padding-top:10px
  }
  .nav
  {
    height:72px
  }
  #main-nav
  {
    top:72px
  }
  .tools .btn
  {
    display:none
  }
  .hero .actions .btn
  {
    font-size:14px
  }
  .abouttext
  {
    font-size:17px
  }
  .flow .card
  {
    padding:20px 15px
  }
  .flow h3
  {
    font-size:16px
  }
  .phone-caption
  {
    margin-top:20px
  }
  .downloadbox .actions .btn
  {
    padding:9px 14px;
    font-size:12px
  }
  .faq-layout
  {
    grid-template-columns:1fr
  }
}
.ui-icon
{
  width:22px;
  height:22px;
  flex-shrink:0
}
.brand
{
  font-weight:500;
  font-size:26px;
  letter-spacing:-.7px
}
.screen
{
  display:block;
  background:radial-gradient(ellipse at 15% 90%,#905c712d,transparent 65%),radial-gradient(ellipse at 90% 10%,#647ca23d,transparent 60%),#121921
}
.phone
{
  width:240px;
  height:454px;
  transform:rotate(4deg)
}
.phone-status
{
  height:28px;
  padding:10px 13px 0;
  font-size:10px;
  display:flex;
  justify-content:space-between;
  font-weight:500
}
.phone-status>div
{
  display:flex;
  gap:4px;
  align-items:center
}
.battery
{
  width:15px;
  height:7px;
  border:1px solid #d9e1f0;
  border-radius:2px;
  position:relative
}
.battery:after
{
  content:"";
  position:absolute;
  inset:1px;
  background:#d9e1f0;
  width:8px
}
.signal
{
  font-size:8px
}
.camera
{
  top:12px;
  left:50%;
  transform:translateX(-50%)
}
.phone-date
{
  font-size:10px;
  text-align:center;
  color:#a9b5c7;
  margin-top:24px
}
.phone-clock
{
  text-align:center;
  font-size:36px;
  font-weight:300;
  letter-spacing:-1px;
  line-height:1.2;
  margin-top:5px
}
.home-apps
{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px 10px;
  padding:20px 18px 0
}
.home-app
{
  text-align:center
}
.home-app>span
{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  margin:auto;
  border-radius:10px;
  background:linear-gradient(145deg,var(--appcolor),color-mix(in srgb,var(--appcolor),black 25%));
  box-shadow:inset 0 1px 0 #ffffff30
}
.home-app svg
{
  width:20px;
  height:20px
}
.home-app small
{
  font-size:8px;
  color:#bbc7d6
}
.andee-overlay
{
  position:absolute;
  bottom:85px;
  left:10px;
  right:10px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid #8797b04d;
  border-radius:15px;
  padding:8px;
  background:#18212cf2;
  box-shadow:0 5px 25px #0005
}
.andee-overlay img
{
  width:48px;
  margin:0;
  border-radius:50%
}
.andee-overlay span
{
  font-size:13px;
  font-weight:400;
  color:#f5f6f8;
  line-height:1.7
}
.andee-overlay small
{
  font-size:8px;
  color:#b1bfce
}
.live-dot
{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#4de2ab;
  margin-left:auto
}
.phone-dock
{
  position:absolute;
  bottom:28px;
  left:12px;
  right:12px;
  display:flex;
  justify-content:space-around;
  border:1px solid #ffffff20;
  border-radius:16px;
  background:#ffffff0a;
  padding:12px 4px
}
.phone-dock svg
{
  width:20px;
  height:20px;
  color:#c2cede
}
.android-nav
{
  position:absolute;
  bottom:4px;
  left:0;
  right:0;
  display:flex;
  justify-content:space-evenly;
  font-size:12px;
  color:#b1bdcd
}
.hero-art
{
  min-height:510px
}
.hero
{
  padding-top:58px;
  gap:70px
}
h1
{
  font-size:clamp(36px,4.1vw,54px);
  font-weight:400;
  letter-spacing:-1.5px
}
h2
{
  font-size:clamp(26px,2.6vw,34px);
  font-weight:400;
  letter-spacing:-.6px
}
h3
{
  font-weight:450;
  font-size:19px
}
.lede
{
  font-size:16px;
  line-height:1.9
}
.abouttext
{
  font-size:18px
}
.subtitle
{
  font-size:13px
}
.community-top
{
  padding:30px 32px;
  border:1px solid #ffffff25;
  border-radius:20px;
  background:radial-gradient(ellipse at 0% 100%,#ff9a7422,transparent 55%),radial-gradient(ellipse at 100% 0%,#6b8eff22,transparent 60%),#17191d;
  gap:24px;
  align-items:center;
  margin:6px 0 25px
}
.community-top h3
{
  font-size:25px;
  font-weight:400;
  margin:4px 0 9px
}
.community-top p
{
  font-size:14px;
  max-width:600px
}
.community-top .kicker
{
  font-size:10px;
  margin:0;
  color:#9caac1
}
.community-top a.btn
{
  color:white;
  font-size:13px;
  padding:12px 20px
}
.community-symbol
{
  display:grid;
  place-items:center;
  width:66px;
  height:66px;
  border:1px solid #ffffff25;
  border-radius:20px;
  background:#ffffff05;
  flex-shrink:0;
  color:#8cabff
}
.community-symbol svg
{
  width:30px;
  height:30px
}
.flow-icon,.case-icon
{
  width:44px;
  height:44px;
  border:1px solid #6b8eff44;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 40% 20%,#6b8eff22,#151922);
  color:#a7beed;
  margin-bottom:18px
}
.flow .card
{
  position:relative
}
.flow .card:not(:last-child):after
{
  content:"→";
  position:absolute;
  right:-15px;
  top:38px;
  font-size:17px;
  color:#ee9b92;
  z-index:2
}
.hardware-row
{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:16px;
  margin-top:20px
}
.hardware-row>div
{
  border:1px solid #ffffff20;
  border-radius:14px;
  padding:18px 22px;
  background:#12161b
}
.hardware-label
{
  font-size:11px;
  color:#8799b5;
  display:block;
  margin-bottom:13px
}
.hardware-icons
{
  display:flex;
  gap:28px
}
.hardware-icons>span
{
  display:flex;
  gap:9px;
  align-items:center;
  font-size:13px;
  color:#c1ccdc
}
.hardware-icons svg
{
  color:#94b0da
}
.with-icon
{
  display:flex;
  gap:10px;
  align-items:center
}
.with-icon svg
{
  color:#9bb7ee
}
.more-cases .case-icon
{
  margin-bottom:15px
}
.more-cases h3
{
  font-size:17px
}
.community-float
{
  position:fixed;
  right:22px;
  bottom:24px;
  z-index:30;
  background:linear-gradient(130deg,#28252b,#19202e);
  border:1px solid #ffffff35;
  box-shadow:0 10px 35px #0008;
  border-radius:18px;
  padding:16px 34px 16px 18px
}
.community-float a
{
  display:flex;
  gap:12px;
  align-items:center
}
.community-float svg
{
  color:#ffb88e;
  width:26px;
  height:26px
}
.community-float span
{
  font-size:15px;
  font-weight:450
}
.community-float small
{
  display:block;
  font-size:11px;
  color:#bac6d8;
  margin-top:3px
}
.community-float button
{
  position:absolute;
  right:7px;
  top:5px;
  padding:0 3px;
  border:0;
  color:#99a5b9;
  background:none;
  cursor:pointer;
  font-size:17px
}
footer
{
  padding-bottom:110px
}
@media(max-width:700px)
{
  .hero
  {
    gap:0;
    padding-top:40px
  }
  .hero-art
  {
    min-height:500px
  }
  .phone
  {
    width:230px;
    height:435px
  }
  .community-top
  {
    padding:23px;
    gap:16px;
    display:grid;
    grid-template-columns:45px 1fr
  }
  .community-symbol
  {
    width:45px;
    height:45px;
    border-radius:14px
  }
  .community-symbol svg
  {
    width:24px;
    height:24px
  }
  .community-top h3
  {
    font-size:21px
  }
  .community-top p
  {
    font-size:13px
  }
  .community-top>a
  {
    grid-column:1/-1;
    width:100%
  }
  .hardware-row
  {
    grid-template-columns:1fr
  }
  .hardware-icons
  {
    gap:18px;
    flex-wrap:wrap
  }
  .flow .card:nth-child(2):after
  {
    display:none
  }
  .flow .card:last-child:after
  {
    display:none
  }
  .flow .card:nth-child(3):after
  {
    display:block
  }
  .community-float
  {
    right:12px;
    bottom:14px;
    padding:12px 30px 12px 14px
  }
  .community-float span
  {
    font-size:13px
  }
  .community-float small
  {
    font-size:10px
  }
  .community-float svg
  {
    width:21px;
    height:21px
  }
  .brand
  {
    font-size:23px;
    font-weight:450
  }
  h1
  {
    font-size:36px;
    font-weight:400
  }
  .abouttext
  {
    font-size:16px
  }
  .phone-caption
  {
    font-size:10px;
    max-width:270px;
    margin:20px auto
  }
  .shot-slot
  {
    height:160px
  }
}
.phone
{
  border:0;
  padding:4px;
  background:linear-gradient(145deg,#ffb88e 0%,#ff9a74 20%,#ea6a7a 42%,#6b8eff 70%,#a4c3ff 87%,#ffb88e);
  box-shadow:0 0 12px #6b8eff55,0 0 36px #ea6a7a25,12px 24px 60px #0008
}
.screen
{
  border:6px solid #101216;
  border-radius:30px
}
.reference-work
{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:60px;
  align-items:center
}
.reference-diagrams
{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  border:1px solid #ffffff20;
  border-radius:20px;
  background:#081116;
  padding:28px
}
.loop-image
{
  width:100%;
  max-width:355px;
  height:auto
}
.hardware-image
{
  width:100%;
  max-width:355px;
  height:auto
}
.work-explanation
{
  display:flex;
  flex-direction:column;
  gap:26px
}
.work-explanation article
{
  display:flex;
  gap:18px
}
.work-explanation article>span
{
  font-size:12px;
  color:#95afe9;
  border:1px solid #6b8eff40;
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  flex-shrink:0
}
.work-explanation h3
{
  font-size:18px;
  margin-bottom:6px
}
.work-explanation p
{
  font-size:14px;
  line-height:1.9
}
.supplied-preview
{
  position:relative;
  padding:16px;
  overflow:hidden
}
.supplied-preview>img
{
  width:100%;
  height:100%;
  object-fit:contain
}
.supplied-preview .asset-label
{
  position:absolute;
  bottom:12px;
  left:12px;
  padding:4px 9px;
  background:#0d0d0dcc;
  border-radius:999px;
  font-size:10px;
  color:#b8c4d4
}
.permission-reference
{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  padding:24px;
  background:#0b131a;
  border-bottom:1px solid #ffffff20
}
.permission-reference img
{
  width:130px;
  height:auto
}
.permission-reference span
{
  color:#adbbcd;
  font-size:13px
}
.install-video .video-slot
{
  aspect-ratio:16/7
}
.video-card .video-slot
{
  aspect-ratio:16/10
}
.phone-status
{
  padding-top:8px
}
.phone-date
{
  margin-top:20px
}
@media(max-width:700px)
{
  .reference-work
  {
    grid-template-columns:1fr;
    gap:28px
  }
  .reference-diagrams
  {
    padding:22px
  }
  .loop-image,.hardware-image
  {
    max-width:330px
  }
  .work-explanation
  {
    gap:22px
  }
  .work-explanation p
  {
    font-size:16px
  }
  .permission-reference img
  {
    width:120px
  }
  .phone
  {
    padding:4px
  }
  .screen
  {
    border-width:5px;
    border-radius:28px
  }
}
.shot-open
{
  display:block;
  width:100%;
  border:0;
  padding:0;
  background:#111;
  cursor:zoom-in
}
.shot-open img
{
  display:block;
  width:100%;
  height:250px;
  object-fit:contain;
  background:#11151b
}
.shotrow
{
  align-items:start
}
.shot figcaption
{
  padding:10px;
  font-size:12px
}
.more-title
{
  margin-top:22px;
  margin-bottom:0
}
.more-cases
{
  margin-top:15px;
  gap:20px
}
.video-rail
{
  padding-bottom:12px
}
.difference-cards
{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px
}
.difference-card
{
  padding:27px
}
.difference-card>svg
{
  width:26px;
  height:26px;
  color:#6b8eff;
  margin-bottom:22px
}
.difference-card h3
{
  font-size:19px;
  margin-bottom:13px
}
.difference-card p
{
  font-size:14px;
  line-height:1.9
}
.role-layout
{
  display:grid;
  grid-template-columns:.65fr 1.35fr;
  gap:40px;
  align-items:center
}
.role-stage
{
  border:1px solid #ffffff20;
  border-radius:20px;
  background:#f5f6f8;
  display:flex;
  align-items:center;
  flex-direction:column;
  padding:28px;
  gap:12px;
  color:#252b37
}
.role-stage>img
{
  width:min(220px,100%);
  height:220px;
  object-fit:contain
}
.role-stage>span
{
  font-size:18px
}
.role-stage>small
{
  font-size:11px;
  color:#6b7282
}
.role-picker
{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px
}
.role-button
{
  border:1px solid #ffffff25;
  background:#f5f6f8;
  border-radius:14px;
  cursor:pointer;
  padding:10px 7px;
  color:#232a35;
  font-size:12px
}
.role-button img
{
  display:block;
  width:100%;
  aspect-ratio:1;
  object-fit:contain
}
.role-button[aria-pressed="true"]
{
  outline:2px solid #6b8eff;
  outline-offset:2px
}
.role-description
{
  font-size:14px;
  line-height:1.9;
  margin:25px 0 20px
}
.mood-tags
{
  display:flex;
  flex-wrap:wrap;
  gap:9px
}
.mood-tag
{
  border:1px solid #ffffff20;
  border-radius:999px;
  padding:5px 12px;
  font-size:12px;
  color:#bdc8d8
}
.mood-tag:before
{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#6b8eff;
  margin-right:7px
}
.mood-tag:nth-child(3n):before
{
  background:#ffb88e
}
.image-dialog
{
  padding:0;
  border:1px solid #ffffff35;
  border-radius:16px;
  background:#111;
  color:white;
  max-width:95vw;
  max-height:95vh
}
.image-dialog::backdrop
{
  background:#000c
}
.image-dialog img
{
  display:block;
  max-height:85vh;
  max-width:90vw;
  width:auto
}
.image-dialog button
{
  position:absolute;
  top:8px;
  right:8px;
  border:1px solid #ffffff50;
  background:#111d;
  color:white;
  width:34px;
  height:34px;
  border-radius:50%;
  font-size:22px;
  cursor:pointer
}
.image-dialog p
{
  text-align:center;
  font-size:12px;
  padding:10px
}
@media(max-width:700px)
{
  .shot-open img
  {
    height:210px
  }
  .difference-cards
  {
    grid-template-columns:1fr
  }
  .role-layout
  {
    grid-template-columns:1fr;
    gap:22px
  }
  .role-stage>img
  {
    height:180px;
    width:180px
  }
  .role-picker
  {
    gap:7px
  }
  .role-button
  {
    padding:6px 3px;
    font-size:10px
  }
  .role-description
  {
    font-size:16px
  }
  .difference-card p
  {
    font-size:16px
  }
  .role-stage
  {
    padding:18px
  }
  .more-cases
  {
    margin-top:12px
  }
  .shot figcaption
  {
    font-size:11px;
    padding:9px 6px
  }
}
.hero-cta
{
  gap:10px
}
.hero-cta .btn
{
  padding:12px 18px;
  font-size:13px;
  white-space:nowrap;
  font-weight:500
}
.discord-pending
{
  color:#dde4ef;
  cursor:default;
  font:inherit
}
.discord-note
{
  margin-top:10px;
  font-size:11px;
  color:#8794a9
}
.community-top
{
  gap:20px
}
.community-top>div:nth-child(2)
{
  flex:1
}
.community-top .btn
{
  white-space:nowrap;
  font-size:13px;
  padding:12px 18px
}
.community-top h3
{
  font-size:23px
}
.community-top p
{
  font-size:13px
}
footer
{
  padding-bottom:32px
}
#main-nav
{
  gap:13px;
  font-size:11px
}
.shot-open img
{
  height:270px
}
#cases .section-head
{
  margin-bottom:22px
}
.video-card
{
  flex-basis:calc((100% - 44px)/2.25)
}
.role-picker
{
  gap:9px
}
.role-button
{
  min-height:44px
}
@media(max-width:760px)
{
  .community-top
  {
    display:grid;
    grid-template-columns:45px 1fr;
    gap:16px
  }
  .community-top>.btn
  {
    grid-column:1/-1;
    width:100%
  }
  .hero-cta
  {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
  }
  .hero-cta>.btn:last-child
  {
    grid-column:1/-1
  }
  .hero-cta .btn
  {
    padding:12px 14px
  }
  .shot-open img
  {
    height:auto;
    width:100%;
    aspect-ratio:374/830;
    object-fit:contain
  }
  .video-card
  {
    flex-basis:88%
  }
  .role-button
  {
    font-size:11px
  }
  .discord-note
  {
    font-size:12px
  }
  .community-top h3
  {
    font-size:20px
  }
}
:root
{
  --andee-blue:#6b8eff;
  --warm-gradient:linear-gradient(125deg,#ffb88e 0%,#ff9a74 42%,#ea6a7a 100%);
  --radius-card:20px;
  --radius-feature:28px
}
.community-top
{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--warm-gradient);
  border:1px solid #ffd0ba80;
  border-radius:28px;
  padding:34px 38px;
  box-shadow:0 15px 50px #ea6a7a14;
  color:#302128
}
.community-top:after
{
  content:"";
  position:absolute;
  width:400px;
  height:400px;
  border-radius:50%;
  top:-230px;
  right:-40px;
  background:#ffffff20;
  z-index:-1
}
.community-top h3
{
  color:#302128;
  font-size:28px;
  font-weight:450;
  letter-spacing:-.6px
}
.community-top p
{
  color:#492a30;
  font-size:14px
}
.community-top .kicker
{
  color:#674044;
  font-size:11px;
  letter-spacing:1.5px
}
.community-symbol
{
  color:#40292e;
  background:#ffffff1a;
  border:1px solid #ffffff6b;
  border-radius:20px
}
.community-top .btn.primary
{
  background:linear-gradient(145deg,#27272c,#141519);
  border:1px solid #ffffff30;
  color:#fff;
  box-shadow:0 8px 24px #72334225;
  font-weight:500;
  padding:14px 22px
}
.hero-cta .primary,.downloadbox .primary
{
  background:var(--warm-gradient);
  box-shadow:inset 0 1px 0 #ffffff45,0 8px 30px #ea6a7a16
}
.hero-cta .btn:nth-child(2)
{
  border:1px solid transparent;
  background:linear-gradient(#16181d,#16181d) padding-box,var(--warm-gradient) border-box
}
.hero-art
{
  background:radial-gradient(ellipse at 40% 55%,#ff9a7430,transparent 58%),radial-gradient(ellipse at 80% 80%,#ea6a7a18,transparent 56%);
  border-radius:28px
}
.difference-card
{
  border:1px solid #ffffff20;
  background:linear-gradient(145deg,#1d2025,#111316);
  border-radius:20px
}
.difference-card:nth-child(2)
{
  background:radial-gradient(ellipse at 100% 0%,#6b8eff24,transparent 75%),#151820;
  border-color:#6b8eff40
}
.difference-card:nth-child(4)
{
  background:radial-gradient(ellipse at 0% 0%,#ffb88e23,transparent 75%),#1b171a;
  border-color:#ff9a7440
}
.difference-card:nth-child(6)
{
  border:1px solid transparent;
  background:linear-gradient(145deg,#1e1b22,#12151b) padding-box,linear-gradient(130deg,#ffb88e85,#ea6a7a70,#6b8eff70) border-box
}
.difference-card:nth-child(4)>svg
{
  color:#ffb88e
}
.video-card
{
  background:linear-gradient(150deg,#242128,#121519);
  border-radius:20px;
  border-color:#ffffff25
}
.video-card:nth-child(2)
{
  border-color:#6b8eff50
}
.video-card:nth-child(3)
{
  border-color:#ff9a7448
}
.video-card .card-body
{
  background:radial-gradient(ellipse at 0% 100%,#ea6a7a0d,transparent 75%)
}
.reference-diagrams
{
  border:1px solid transparent;
  background:linear-gradient(#081116,#081116) padding-box,linear-gradient(135deg,#6b8eff85,#ffffff20 45%,#ff9a7470) border-box;
  border-radius:20px
}
.downloadbox
{
  border:1px solid transparent;
  border-radius:20px;
  background:linear-gradient(135deg,#211c20,#141820) padding-box,var(--warm-gradient) border-box;
  box-shadow:0 12px 38px #ea6a7a0a
}
.install-video
{
  border-color:#6b8eff38
}
.role-stage
{
  border:1px solid transparent;
  background:linear-gradient(#f5f6f8,#f5f6f8) padding-box,linear-gradient(135deg,#6b8eff,#ffb88e,#ea6a7a) border-box;
  border-radius:28px
}
.safety-list article
{
  background:linear-gradient(140deg,#1b1e23,#121417)
}
.safety-list article:last-child
{
  border-color:#ff9a7440
}
.more-cases .case-icon
{
  background:radial-gradient(circle at 30% 20%,#ffb88e33,#191820);
  border-color:#ff9a7450;
  color:#ffb88e
}
.mood-tag:nth-child(3n)
{
  background:#ff9a740b;
  border-color:#ff9a7430
}
.mood-tag:nth-child(3n+1)
{
  background:#6b8eff0b;
  border-color:#6b8eff30
}
@media(max-width:760px)
{
  .community-top
  {
    padding:25px 23px;
    border-radius:28px
  }
  .community-top h3
  {
    font-size:23px
  }
  .community-top p
  {
    font-size:14px
  }
  .community-top .btn.primary
  {
    padding:13px 18px
  }
  .community-symbol
  {
    width:45px;
    height:45px;
    border-radius:14px
  }
}
@font-face
{
  font-family:AndeeChinese;
  src:url("../fonts/andee-chinese.otf") format("opentype");
  font-weight:400 700;
  font-display:swap
}
:root
{
  --ink:#f5f6f8;
  --muted:#adb3bf;
  --blue:#6b8eff;
  --warm:linear-gradient(120deg,#ffb88e,#ff9a74 50%,#ea6a7a)
}
body,button
{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","PingFang SC",AndeeChinese,"Microsoft YaHei",sans-serif
}
body
{
  font-size:15px;
  line-height:1.7
}
h1,h2,h3
{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","PingFang SC",AndeeChinese,"Microsoft YaHei",sans-serif;
  font-style:normal
}
h1
{
  font-size:clamp(36px,4vw,54px);
  line-height:1.32;
  font-weight:600;
  letter-spacing:-.025em;
  color:var(--ink);
  margin:0 0 28px
}
h1 .superpower
{
  display:inline-flex;
  align-items:center;
  position:relative;
  gap:22px;
  padding:4px 20px 9px;
  margin-top:10px;
  background:var(--warm);
  color:#302128;
  background-clip:border-box;
  border-radius:18px;
  box-shadow:0 10px 40px #ea6a7a1c;
  font-weight:600
}
h1 .title-spark
{
  font-size:28px;
  color:#6d343e;
  background:none
}
h2
{
  font-size:32px;
  line-height:1.35;
  font-weight:500;
  letter-spacing:-.015em;
  color:var(--ink)!important;
  text-wrap:balance
}
h3
{
  font-size:18px;
  line-height:1.4;
  font-weight:500;
  color:var(--ink)!important;
  letter-spacing:0
}
.brand
{
  font-weight:500;
  letter-spacing:-1px
}
.eyebrow
{
  letter-spacing:.04em;
  font-size:12px;
  font-weight:400
}
.eyebrow.blue
{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid #6b8eff45;
  background:#6b8eff12;
  color:#a4b9ff;
  padding:5px 11px;
  border-radius:8px;
  margin-bottom:18px
}
.section-head
{
  margin-bottom:32px;
  gap:32px
}
.section-head>p
{
  font-size:14px;
  max-width:310px
}
.section-head h2
{
  margin-bottom:0
}
section
{
  padding:72px 0;
  border-top:1px solid #ffffff0d
}
.lede
{
  font-size:16px;
  line-height:1.8;
  max-width:400px
}
.hero
{
  padding:72px 0;
  gap:64px
}
.hero-art
{
  isolation:isolate;
  background:radial-gradient(ellipse at 50% 30%,#ff9a7420,transparent 58%),#121418;
  border:1px solid #41454c
}
.hero-art:before
{
  content:"";
  position:absolute;
  z-index:-1;
  width:140%;
  height:65%;
  left:-20%;
  top:50%;
  inset:auto -20% -12%;
  border-radius:50% 50% 0 0;
  transform:rotate(-17deg);
  background:linear-gradient(160deg,#ffb88e35,#ea6a7a20 45%,#6b8eff0a);
  box-shadow:0 -20px 80px #ea6a7a18
}
.hero-art:after
{
  content:"";
  position:absolute;
  z-index:-1;
  width:135%;
  height:50%;
  right:-55%;
  bottom:-8%;
  border-radius:50%;
  background:linear-gradient(120deg,#ffb88e20,#ea6a7a22);
  transform:rotate(20deg)
}
.community-top
{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--warm);
  border-radius:28px;
  padding:32px 36px;
  box-shadow:none;
  border:1px solid #ffb88e
}
.community-top:after
{
  content:"";
  position:absolute;
  z-index:-1;
  inset:20% -15% -95% 35%;
  border-radius:50%;
  background:#ffffff15;
  transform:rotate(-15deg)
}
.community-top h2
{
  color:#302128!important;
  font-size:32px;
  font-weight:500
}
.community-top .kicker
{
  font-weight:400;
  letter-spacing:.04em
}
.community-top p
{
  max-width:430px
}
.community-top .btn
{
  white-space:nowrap
}
.card,.difference-card,.video-card,.safety-card,.more-case
{
  border:1px solid #383c44;
  background:linear-gradient(145deg,#1b1e24,#111316);
  border-radius:20px;
  box-shadow:none
}
.difference-card:nth-child(n),.safety-card:nth-child(n),.video-card:nth-child(n)
{
  background:linear-gradient(145deg,#1b1e24,#111316);
  border:1px solid #383c44
}
.difference-card:first-child,.video-card:first-child
{
  background:radial-gradient(ellipse at 0% 0%,#ff9a741f,transparent 70%),linear-gradient(145deg,#211d20,#121417);
  border-color:#9b6b5b
}
.difference-card:nth-child(4),.video-card:nth-child(2)
{
  background:radial-gradient(ellipse at 100% 0%,#6b8eff22,transparent 75%),#151922;
  border-color:#53668d
}
.difference-card .ui-icon
{
  width:38px;
  height:38px;
  color:#a3b8ff;
  background:#6b8eff14;
  padding:7px;
  border-radius:11px
}
.difference-card:first-child .ui-icon,.difference-card:nth-child(4) .ui-icon
{
  color:#ffb88e;
  background:#ff9a7414
}
.reference-work
{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:48px;
  align-items:center
}
.reference-diagrams
{
  padding:24px;
  border-radius:28px;
  border:1px solid #424752;
  background:radial-gradient(ellipse at 20% 0%,#6b8eff18,transparent 70%),#12161d
}
.loop-image
{
  display:block;
  width:100%;
  max-width:360px;
  margin:auto
}
.body-capabilities
{
  display:grid;
  gap:10px
}
.body-part
{
  display:flex;
  align-items:center;
  gap:16px;
  border:1px solid #323842;
  border-radius:16px;
  padding:15px 18px;
  background:linear-gradient(130deg,#1b1f27,#13161b)
}
.body-part h3
{
  margin:0 0 3px
}
.body-part p
{
  font-size:14px;
  color:#adb3bf
}
.part-icon
{
  display:grid;
  place-items:center;
  flex:0 0 42px;
  width:42px;
  height:42px;
  border-radius:13px;
  border:1px solid #6b8eff33;
  background:#6b8eff10;
  color:#9cb4ff
}
.part-icon svg
{
  width:25px;
  height:25px
}
.body-part:nth-child(3) .part-icon,.body-part:nth-child(5) .part-icon
{
  color:#ffb88e;
  border-color:#ff9a7440;
  background:#ff9a7410
}
.work-note
{
  font-size:12px;
  line-height:1.8;
  margin-top:20px
}
.role-stage
{
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 40% 35%,#ff9a7420,transparent 55%),#17191f;
  border:1px solid #424752
}
.role-stage:before
{
  content:"";
  position:absolute;
  inset:60% -30% -40%;
  border-radius:50%;
  transform:rotate(-15deg);
  background:linear-gradient(145deg,#ffb88e20,#ea6a7a15,#6b8eff0a);
  pointer-events:none
}
.role-stage>*
{
  position:relative
}
.btn
{
  font-weight:500
}
.download-box
{
  background:linear-gradient(#17191f,#17191f) padding-box,var(--warm) border-box;
  border:1px solid transparent
}
.abouttext
{
  font-size:16px;
  max-width:650px
}
.hero .slogan
{
  display:none
}
p
{
  overflow-wrap:anywhere
}
.body-capabilities,.reference-diagrams,.section-head>div
{
  min-width:0
}
@media(max-width:800px)
{
  .hero
  {
    gap:32px;
    padding:48px 0
  }
  .reference-work
  {
    grid-template-columns:1fr;
    gap:24px
  }
  .reference-diagrams
  {
    max-width:460px;
    width:100%;
    margin:auto
  }
  h2
  {
    font-size:27px
  }
  .community-top
  {
    padding:26px
  }
  section
  {
    padding:52px 0
  }
  .section-head
  {
    align-items:start
  }
  .section-head>p
  {
    max-width:100%
  }
}
@media(max-width:480px)
{
  h1
  {
    font-size:35px;
    letter-spacing:-.03em
  }
  h1 .superpower
  {
    padding:4px 16px 8px;
    gap:16px;
    border-radius:15px
  }
  .hero-art
  {
    min-height:400px
  }
  .body-part
  {
    padding:13px 15px
  }
  .community-top h2
  {
    font-size:29px
  }
  .wrap
  {
    padding-left:22px;
    padding-right:22px
  }
  .section-head
  {
    gap:16px
  }
}
.old-device
{
  position:relative;
  display:inline-block;
  color:#a9bdff!important;
  background:#6b8eff15!important;
  background-clip:border-box!important;
  border:1px solid #6b8eff55;
  border-radius:12px;
  padding:0 9px;
  margin:0 3px;
  box-shadow:inset 0 1px 0 #ffffff0c,0 0 30px #6b8eff12
}
.section-head>div
{
  width:100%
}
.eyebrow.blue.section-marker
{
  display:flex;
  gap:14px;
  width:100%;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  margin-bottom:22px;
  letter-spacing:0
}
.section-number
{
  font-size:29px;
  font-weight:500;
  line-height:1;
  color:#ffb88e;
  letter-spacing:-1px
}
.section-label
{
  font-size:12px;
  white-space:nowrap;
  color:#b2bfd9
}
.section-rule
{
  height:1px;
  flex:1;
  min-width:24px;
  background:linear-gradient(90deg,#ff9a7466,#6b8eff33,transparent);
  margin-left:6px
}
.section-head
{
  align-items:center
}
.section-head>p
{
  flex:0 1 310px
}
.hero-art
{
  overflow:hidden;
  min-height:550px;
  background:radial-gradient(ellipse at 50% 50%,#6b8eff18,transparent 65%),radial-gradient(ellipse at 60% 25%,#ff9a7420,transparent 55%),#121418;
  box-shadow:inset 0 1px 0 #ffffff10
}
.hero-art:before,.hero-art:after
{
  clip-path:inset(0 round 28px);
  pointer-events:none
}
.phone
{
  width:258px;
  height:490px;
  margin:28px auto 22px;
  transform:rotate(3deg);
  border-radius:38px;
  padding:4px;
  background:linear-gradient(145deg,#ffcfad,#ff9a74 20%,#ea6a7a 42%,#6b8eff 70%,#b8ceff 90%);
  box-shadow:0 0 0 1px #ffffff35,0 0 18px #6b8eff55,0 0 70px #ea6a7a35,14px 28px 50px #0009;
  isolation:isolate
}
.phone:before
{
  content:"";
  position:absolute;
  left:-5px;
  top:112px;
  width:3px;
  height:55px;
  border-radius:3px;
  background:linear-gradient(#697287,#bbc9e4,#646b7d);
  box-shadow:0 65px 0 #8e9cb2
}
.phone:after
{
  content:"";
  position:absolute;
  right:-5px;
  top:155px;
  width:3px;
  height:42px;
  border-radius:3px;
  background:linear-gradient(#bbc9e4,#646b7d)
}
.screen
{
  border:7px solid #080b10;
  border-radius:34px;
  background:radial-gradient(ellipse at 80% 15%,#3e5169,transparent 55%),radial-gradient(ellipse at 0% 90%,#4b3447,transparent 65%),#111923
}
.screen-reflection
{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,#ffffff0b,transparent 25%,transparent 72%,#ffffff05);
  z-index:5
}
.camera
{
  box-shadow:0 0 0 3px #1a202b,0 0 0 4px #ffffff0a;
  background:radial-gradient(circle at 35% 35%,#364b64,#03050a 55%)
}
.andee-overlay
{
  isolation:isolate;
  bottom:92px;
  padding:11px 9px;
  background:linear-gradient(125deg,#202b3eeb,#1a202cec);
  border-color:#8da8ff77;
  box-shadow:0 0 28px #6b8eff20,0 5px 25px #0006
}
.andee-overlay:before
{
  content:"";
  position:absolute;
  left:-14px;
  top:-10px;
  width:95px;
  height:90px;
  border-radius:50%;
  background:radial-gradient(circle,#ff9a744d,#6b8eff22 40%,transparent 70%);
  filter:blur(8px);
  z-index:-1
}
.andee-overlay img
{
  width:58px;
  filter:drop-shadow(0 0 8px #6b8eff70) drop-shadow(0 0 16px #ea6a7a40)
}
.andee-overlay small
{
  font-size:9px
}
.art-spark
{
  position:absolute;
  pointer-events:none;
  color:#ffcfad;
  text-shadow:0 0 16px #ff9a74a0;
  animation:glimmer 4s ease-in-out infinite
}
.spark-one
{
  top:12%;
  left:12%;
  font-size:25px
}
.spark-two
{
  bottom:23%;
  right:10%;
  font-size:19px;
  color:#b5c8ff;
  animation-delay:1.5s
}
.phone-caption
{
  padding:0 16px;
  margin:0 auto 22px;
  max-width:330px;
  font-size:10px
}
.community-top h3
{
  color:#302128!important;
  font-size:30px;
  font-weight:500;
  line-height:1.4;
  margin-bottom:6px
}
.community-top .community-symbol
{
  background:#ffffff25;
  border:1px solid #ffffff40;
  color:#61353f
}
.role-stage #role-image
{
  filter:drop-shadow(0 0 24px #6b8eff35) drop-shadow(0 0 35px #ff9a7425)
}
.community-float
{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:40;
  display:grid;
  grid-template-columns:48px 1fr 36px;
  align-items:center;
  gap:12px;
  width:300px;
  padding:16px 18px 27px;
  border-radius:20px;
  border:1px solid #ffb88e99;
  background:linear-gradient(120deg,#ffb88e,#ff9a74 50%,#ea6a7a);
  box-shadow:0 8px 35px #0007,0 0 30px #ea6a7a18;
  color:#302128
}
.community-float img
{
  width:48px;
  height:48px;
  border-radius:50%;
  filter:drop-shadow(0 0 12px #ffffff80)
}
.community-float strong
{
  display:block;
  font-size:17px;
  font-weight:500;
  line-height:1.5
}
.community-float div>span
{
  display:block;
  font-size:10px;
  color:#643740;
  white-space:nowrap
}
.float-discord
{
  border:0;
  border-radius:50%;
  width:36px;
  height:36px;
  background:#302128;
  color:#ffe8d7;
  font-size:21px
}
.float-note
{
  position:absolute;
  bottom:8px;
  left:78px;
  font-size:9px;
  color:#674044
}
footer
{
  padding-bottom:140px
}
.community-float [aria-disabled="true"]
{
  cursor:default;
  opacity:.8
}
@keyframes glimmer
{
  0%,100%
  {
    opacity:.45;
    transform:scale(.85)
  }
  50%
  {
    opacity:1;
    transform:scale(1)
  }
}
@media(prefers-reduced-motion:reduce)
{
  .art-spark
  {
    animation:none
  }
}
@media(max-width:800px)
{
  .hero-art
  {
    min-height:550px
  }
  .section-head>p
  {
    flex:auto
  }
  .section-marker
  {
    max-width:100%
  }
}
@media(max-width:600px)
{
  .community-float
  {
    right:12px;
    left:12px;
    bottom:max(12px,env(safe-area-inset-bottom));
    width:auto;
    max-width:370px;
    margin-left:auto;
    grid-template-columns:40px 1fr 36px;
    padding:12px 15px 23px;
    gap:10px
  }
  .community-float img
  {
    width:40px;
    height:40px
  }
  .community-float strong
  {
    font-size:16px
  }
  .float-note
  {
    left:65px;
    bottom:6px
  }
  .phone
  {
    width:248px;
    height:472px
  }
  .hero-art
  {
    min-height:530px
  }
  .section-number
  {
    font-size:27px
  }
  .section-head>div
  {
    width:100%
  }
  footer
  {
    padding-bottom:130px
  }
  .old-device
  {
    padding:0 5px;
    margin:0 1px;
    border-radius:9px
  }
  .community-top h3
  {
    font-size:28px
  }
}
@media(max-width:360px)
{
  h1
  {
    font-size:30px
  }
  .phone
  {
    width:228px;
    height:440px
  }
  .hero-art
  {
    min-height:500px
  }
  .andee-overlay img
  {
    width:48px
  }
}
/* Layered warm curved light from the reference: a luminous edge, translucent arc and soft halo. */
.hero-copy
{
  position:relative;
  isolation:isolate;
  padding:16px 0
}
.hero-copy:before
{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  left:-90px;
  top:-65px;
  width:calc(100% + 170px);
  height:445px;
  background:url("../img/ambient-ribbon.svg") center/100% 100% no-repeat;
  opacity:.77;
  transform:rotate(-8deg);
  mask-image:radial-gradient(ellipse at center,#000 25%,transparent 73%)
}
h1
{
  position:relative;
  text-shadow:0 1px 0 #ffffff0c,0 4px 24px #0005
}
.old-device
{
  color:#e2e9ff!important;
  border-color:#a6bcff65;
  background:linear-gradient(135deg,#b6c7ff25,#6b8eff10)!important;
  box-shadow:inset 0 1px 0 #ffffff26,0 0 20px #6b8eff1c,0 0 65px #6b8eff16;
  text-shadow:0 0 16px #8cabff55;
  backdrop-filter:blur(12px)
}
h1 .superpower
{
  color:#fff1e6;
  background:linear-gradient(120deg,#ffb88e28,#ff9a7425 45%,#ea6a7a2e);
  border:1px solid #ffc19c77;
  box-shadow:inset 0 1px 0 #ffe8cf36,inset 0 -1px 0 #ea6a7a20,0 0 24px #ff9a7430,0 0 70px #ea6a7a25;
  text-shadow:0 0 18px #ffb88e60;
  backdrop-filter:blur(14px)
}
h1 .title-spark
{
  color:#ffe2bf;
  text-shadow:0 0 12px #ffb88e80
}
.hero-art
{
  background:#101216;
  box-shadow:inset 0 1px 0 #ffffff12,0 20px 55px #0003
}
.hero-art:before,.hero-art:after
{
  display:none
}
.phone-light-backdrop
{
  position:absolute;
  inset:-12% -28% -6%;
  pointer-events:none;
  z-index:-1;
  background:url("../img/ambient-ribbon.svg") center/100% 100% no-repeat;
  opacity:1
}
.hero-art .phone
{
  box-shadow:0 0 0 1px #ffffff35,0 0 16px #abc0ff50,0 0 50px #ff9a7430,15px 30px 48px #0009
}
.andee-overlay:before
{
  left:-25px;
  top:-25px;
  width:125px;
  height:120px;
  background:radial-gradient(ellipse at 45% 40%,#ffd1a76b,#ea6a7a35 35%,#6b8eff22 55%,transparent 75%);
  filter:blur(10px)
}
.andee-overlay img
{
  filter:drop-shadow(0 0 6px #aac5ff80) drop-shadow(0 0 20px #ffb88e55)
}
.role-stage
{
  isolation:isolate;
  background:#17191f
}
.role-stage:before
{
  inset:-40% -30% -20%;
  border-radius:0;
  background:url("../img/ambient-ribbon.svg") center/100% 100% no-repeat;
  transform:none;
  opacity:.7;
  z-index:-1
}
.role-stage>*
{
  position:relative
}
.spark-one
{
  top:17%;
  left:10%
}
.spark-two
{
  bottom:22%;
  right:9%
}
@media(max-width:800px)
{
  .hero-copy:before
  {
    left:-35px;
    top:-35px;
    width:calc(100% + 70px);
    height:375px;
    opacity:.65
  }
  .phone-light-backdrop
  {
    inset:-5% -25% -5%
  }
}
@media(prefers-reduced-transparency:reduce)
{
  h1 .superpower,.old-device
  {
    backdrop-filter:none
  }
}
/* A broad, visible curved sheet of light, as in the supplied reference. */
.hero
{
  position:relative;
  isolation:isolate
}
.hero:before
{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  inset:-70px -95px -10px;
  background:url("../img/ambient-ribbon.svg") 30% 43%/105% 125% no-repeat;
  opacity:.65;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 85%,transparent)
}
.hero-copy:before
{
  left:-90px;
  top:-110px;
  width:calc(100% + 200px);
  height:510px;
  opacity:1;
  mask-image:none;
  background-size:100% 100%;
  transform:rotate(-8deg)
}
.hero-copy
{
  padding:20px 0
}
.hero-copy h1
{
  position:relative;
  z-index:1;
  text-shadow:0 2px 16px #0009
}
.hero-copy .lede,.hero-copy .meta
{
  position:relative;
  color:#c7c3ca;
  text-shadow:0 1px 8px #000
}
.hero-art
{
  isolation:isolate;
  background:#131216;
  box-shadow:inset 0 1px 0 #ffffff20,0 0 75px #ea6a7a24
}
.phone-light-backdrop
{
  z-index:0;
  inset:-7% -36% -7%;
  opacity:1;
  background-position:48% 43%;
  background-size:110% 115%
}
.hero-art .phone
{
  position:relative;
  z-index:1;
  box-shadow:0 0 0 1px #ffe0c855,0 0 25px #ffb88e66,0 0 85px #ea6a7a55,15px 30px 48px #0009
}
.phone-caption
{
  position:relative;
  z-index:2;
  color:#d0c1c6
}
.art-spark
{
  z-index:2
}
.andee-overlay:before
{
  left:-40px;
  top:-40px;
  width:155px;
  height:145px;
  filter:blur(12px);
  background:radial-gradient(ellipse,#ffd1a799,#ea6a7a60 32%,#6b8eff33 55%,transparent 75%)
}
h1 .superpower
{
  background:linear-gradient(115deg,#ffb88e77,#ff9a7455,#ea6a7a55);
  border-color:#ffd3aaa0;
  box-shadow:inset 0 1px 0 #fff2de50,0 0 30px #ff9a7455,0 0 85px #ea6a7a40
}
.old-device
{
  background:linear-gradient(135deg,#c4ceff45,#6b8eff35)!important;
  border-color:#c4d0ffa0;
  box-shadow:inset 0 1px 0 #ffffff40,0 0 35px #6b8eff45
}
.role-stage:before
{
  opacity:1;
  inset:-35% -25% -10%
}
.community-top
{
  box-shadow:0 0 55px #ea6a7a25
}
@media(max-width:800px)
{
  .hero:before
  {
    inset:-30px -22px;
    background-size:170% 100%;
    opacity:.45
  }
  .hero-copy:before
  {
    left:-35px;
    top:-75px;
    width:calc(100% + 70px);
    height:430px;
    opacity:.95;
    mask-image:none
  }
  .phone-light-backdrop
  {
    inset:-5% -30% -5%;
    opacity:1
  }
}
/* One shared hero surface: the light travels behind both title and phone. */
.hero
{
  overflow:hidden;
  border-radius:28px;
  border:1px solid #ffffff1c;
  background:#121316;
  padding:58px 38px 48px;
  gap:30px;
  margin:34px -10px 48px;
  box-shadow:inset 0 1px 0 #ffffff0c
}
.hero:before
{
  z-index:-1;
  inset:-180px -110px -190px;
  opacity:1;
  mask-image:none;
  background:url("../img/ambient-ribbon.svg") center 42%/100% 125% no-repeat;
  transform:rotate(-5deg)
}
.hero-copy:before
{
  display:none
}
.hero-art
{
  overflow:visible;
  background:transparent;
  border:0;
  box-shadow:none;
  min-height:550px;
  border-radius:0
}
.phone-light-backdrop
{
  display:none
}
.hero-copy
{
  padding:0;
  min-width:0
}
.hero-copy .lede
{
  max-width:400px
}
.hero .meta
{
  color:#bfb9bd
}
.old-device
{
  background:#6b8eff!important;
  color:#fff!important;
  border:1px solid #b8caff80;
  box-shadow:inset 0 1px 0 #ffffff25,0 6px 25px #6b8eff25;
  text-shadow:none;
  backdrop-filter:none;
  padding:0 9px;
  border-radius:11px
}
h1 .superpower
{
  background:linear-gradient(120deg,#ffb88e,#ff9a74 50%,#ea6a7a);
  color:#34212b;
  border:1px solid #ffd1ae77;
  box-shadow:inset 0 1px 0 #fff1de66,0 8px 32px #ea6a7a30;
  text-shadow:none;
  backdrop-filter:none
}
h1 .title-spark
{
  color:#713a44;
  text-shadow:none
}
.hero-art .phone
{
  margin-top:28px
}
.hero-cta
{
  gap:8px
}
.hero-cta .btn
{
  padding:12px 17px;
  font-size:13px
}
.phone-caption
{
  color:#c8bdc4
}
@media(max-width:1000px)
{
  .hero
  {
    padding:44px 28px;
    gap:24px
  }
  h1
  {
    font-size:40px
  }
  .hero-cta .btn
  {
    padding:11px 14px
  }
}
@media(max-width:800px)
{
  .hero
  {
    padding:32px 24px;
    margin:24px 0 34px;
    gap:12px;
    grid-template-columns:1fr
  }
  .hero:before
  {
    inset:-30px -180px -140px;
    background-size:160% 110%;
    background-position:48% 55%;
    transform:rotate(-12deg)
  }
  .hero-art
  {
    min-height:520px
  }
  .hero-copy
  {
    padding:0
  }
  .hero .hero-cta .btn
  {
    padding:12px 16px
  }
  .old-device
  {
    padding:0 7px
  }
  h1
  {
    font-size:36px
  }
}
@media(max-width:480px)
{
  .hero
  {
    padding:28px 20px;
    border-radius:24px;
    margin-left:-6px;
    margin-right:-6px
  }
  .hero-art
  {
    min-height:510px
  }
  h1
  {
    font-size:32px
  }
  .hero .meta
  {
    font-size:11px
  }
  .hero .lede
  {
    font-size:15px
  }
  .hero:before
  {
    background-size:185% 105%;
    inset:0 -190px -90px
  }
  .hero-cta
  {
    margin-top:24px
  }
  .hero-art .phone
  {
    margin-top:22px
  }
}
/* Larger images, fewer containers, one clear visual unit per section. */
.hero
{
  padding:42px 42px 34px;
  gap:42px;
  grid-template-columns:1.12fr .88fr;
  min-height:590px;
  background:#111316
}
.hero:before
{
  inset:0 -80px -140px;
  opacity:.56;
  background-size:110% 110%;
  background-position:50% 60%;
  transform:rotate(-9deg)
}
.hero-art
{
  min-height:500px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:15px
}
.real-phone
{
  width:248px;
  aspect-ratio:626/1276;
  position:relative;
  transform:rotate(3deg);
  filter:drop-shadow(14px 20px 18px #0008)
}
.real-phone:before
{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:12px;
  box-shadow:0 0 24px #ffb88e45,0 0 55px #ea6a7a22;
  pointer-events:none
}
.real-phone-frame
{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  pointer-events:none
}
.real-phone-screen
{
  position:absolute;
  left:3.2%;
  right:4.5%;
  top:1.8%;
  width:92.3%;
  height:96.3%;
  object-fit:contain;
  background:#111017;
  border-radius:5px
}
.phone-caption
{
  max-width:100%;
  font-size:10px;
  margin:0;
  color:#a99fa8
}
.hero-copy
{
  padding:0
}
.hero .lede
{
  margin:0;
  font-size:15px;
  max-width:340px
}
.hero .meta
{
  max-width:380px;
  font-size:11px;
  color:#b0a8af
}
.hero h1
{
  font-size:clamp(34px,4vw,50px)
}
.hero .hero-cta
{
  margin-top:24px
}
.hero .discord-note
{
  font-size:10px
}
section
{
  border-top:0;
  padding:70px 0
}
.section-head
{
  margin-bottom:26px
}
.section-head>p
{
  font-size:14px
}
.section-marker
{
  margin-bottom:18px!important
}
.compact-demo
{
  display:block
}
.compact-demo .section-head
{
  display:flex;
  align-items:end;
  gap:32px;
  margin:0 0 30px
}
.compact-demo .section-head p
{
  margin-top:0
}
.shotrow
{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  max-width:1040px;
  margin:0 auto
}
.shot
{
  margin:0;
  border:1px solid #353941;
  border-radius:20px;
  background:#17191e;
  overflow:hidden
}
.shot-open
{
  padding:14px 14px 0;
  background:#17191e
}
.shot-open img
{
  width:100%;
  height:auto!important;
  aspect-ratio:374/832;
  object-fit:contain;
  background:#111017;
  border-radius:9px
}
.shot figcaption
{
  padding:15px 18px;
  font-size:15px;
  font-weight:400
}
.shot figcaption span
{
  display:none
}
.demo-note
{
  font-size:11px;
  margin-top:20px;
  text-align:center
}
.reference-work
{
  gap:38px;
  padding:30px;
  border:1px solid #353b45;
  border-radius:28px;
  background:radial-gradient(ellipse at 0% 0%,#6b8eff10,transparent 65%),#14171c
}
.reference-diagrams
{
  border:0;
  background:none;
  padding:0
}
.body-capabilities
{
  gap:0
}
.body-part
{
  border:0;
  border-bottom:1px solid #ffffff10;
  border-radius:0;
  background:none;
  padding:16px 0;
  gap:17px
}
.body-part:last-child
{
  border-bottom:0
}
.part-icon
{
  background:none!important;
  border:0!important;
  border-radius:0;
  flex-basis:32px;
  width:32px;
  height:32px
}
.part-icon svg
{
  width:27px;
  height:27px
}
.body-part h3
{
  font-size:17px
}
.body-part p
{
  font-size:14px
}
.work-note
{
  font-size:11px;
  max-width:100%;
  padding-left:4px
}
.difference-cards
{
  gap:0;
  border:1px solid #383c44;
  border-radius:28px;
  overflow:hidden;
  background:#14171c
}
.difference-card:nth-child(n)
{
  border:0;
  border-radius:0;
  background:none;
  padding:30px;
  border-right:1px solid #ffffff10;
  border-bottom:1px solid #ffffff10
}
.difference-card:nth-child(3n)
{
  border-right:0
}
.difference-card:nth-child(n+4)
{
  border-bottom:0
}
.difference-card .ui-icon
{
  background:none!important;
  border:0;
  padding:0;
  width:28px;
  height:28px;
  border-radius:0
}
.difference-card h3
{
  font-size:18px
}
.more-cases
{
  margin-top:20px
}
.role-stage:before
{
  opacity:.65
}
.community-top h3
{
  font-size:28px
}
.image-dialog
{
  z-index:100
}
.community-float
{
  z-index:35
}
@media(max-width:800px)
{
  .hero
  {
    grid-template-columns:1fr;
    padding:32px 28px;
    gap:26px
  }
  .hero-art
  {
    min-height:480px
  }
  .hero h1
  {
    font-size:37px
  }
  .real-phone
  {
    width:235px
  }
  .reference-work
  {
    padding:24px
  }
  .compact-demo .section-head
  {
    display:block
  }
  .compact-demo .section-head>p
  {
    margin-top:12px
  }
  .shotrow
  {
    gap:18px
  }
  .shot-open
  {
    padding:10px 10px 0
  }
  .shot figcaption
  {
    font-size:13px;
    padding:12px
  }
  .difference-card:nth-child(n)
  {
    border-right:1px solid #ffffff10;
    border-bottom:1px solid #ffffff10
  }
  .difference-card:nth-child(2n)
  {
    border-right:0
  }
  .difference-card:nth-last-child(-n+2)
  {
    border-bottom:0
  }
}
@media(max-width:600px)
{
  .shotrow
  {
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:16px;
    padding:0 0 14px;
    scroll-padding-left:0
  }
  .shot
  {
    flex:0 0 min(78vw,300px);
    scroll-snap-align:start
  }
  .shot-open
  {
    padding:12px 12px 0
  }
  .shot figcaption
  {
    font-size:14px
  }
  .demo-note
  {
    text-align:left
  }
  .hero h1
  {
    font-size:32px
  }
  .hero-art
  {
    min-height:470px
  }
  .real-phone
  {
    width:225px
  }
  .hero
  {
    padding:28px 22px
  }
  .reference-work
  {
    padding:22px 20px;
    gap:20px
  }
  .difference-card:nth-child(n)
  {
    border-right:0;
    border-bottom:1px solid #ffffff10;
    padding:24px
  }
  .difference-card:last-child
  {
    border-bottom:0
  }
  section
  {
    padding:50px 0
  }
  .section-head h2
  {
    font-size:27px
  }
}
.discord-mark
{
  display:block;
  width:25px;
  height:25px;
  object-fit:contain;
  flex:none
}
.btn.discord-link
{
  background:#5865f2!important;
  border:1px solid #7a84ff!important;
  color:white!important;
  gap:10px;
  box-shadow:0 5px 20px #5865f220
}
.btn.discord-link:hover
{
  background:#6874ff!important;
  border-color:#a5adff!important
}
.community-top
{
  background:linear-gradient(120deg,#211c21,#171a23);
  border:1px solid #ea9f8770;
  padding:20px 26px;
  border-radius:20px;
  box-shadow:none;
  gap:20px;
  margin-top:0;
  position:relative
}
.community-top:after
{
  display:none
}
.community-top:before
{
  content:"";
  position:absolute;
  left:0;
  top:20px;
  bottom:20px;
  width:3px;
  border-radius:3px;
  background:linear-gradient(#ffb88e,#ea6a7a)
}
.community-top h3
{
  color:#f5f6f8!important;
  font-size:23px!important;
  margin:0 0 3px
}
.community-top p
{
  font-size:13px;
  color:#b7b0ba;
  line-height:1.6
}
.community-top .community-symbol
{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  flex:none;
  background:#5865f2;
  border:1px solid #8b94ff60;
  border-radius:14px;
  color:white
}
.community-top .discord-symbol .discord-mark
{
  width:29px;
  height:29px
}
.community-top .btn
{
  padding:11px 18px;
  white-space:nowrap
}
.community-float
{
  grid-template-columns:44px 1fr 34px;
  width:300px;
  padding:15px 17px;
  gap:12px;
  min-height:76px
}
.float-brand
{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:13px;
  background:#5865f2;
  border:1px solid #a4acff70
}
.community-float .discord-mark
{
  width:29px;
  height:29px;
  border-radius:0;
  filter:none
}
.community-float .float-discord
{
  display:grid;
  place-items:center;
  width:34px;
  height:34px
}
.community-float:hover
{
  box-shadow:0 8px 35px #0007,0 0 35px #ea6a7a35
}
.community-float:focus-visible,.discord-link:focus-visible
{
  outline:3px solid #a4b9ff;
  outline-offset:4px
}
@media(max-width:600px)
{
  .community-top
  {
    padding:18px 20px;
    gap:14px;
    display:grid;
    grid-template-columns:44px 1fr
  }
  .community-top h3
  {
    font-size:21px!important
  }
  .community-top>.btn
  {
    grid-column:1/-1;
    justify-self:start;
    margin-top:2px;
    padding:10px 15px
  }
  .community-float
  {
    width:auto;
    max-width:350px;
    padding:13px 15px;
    grid-template-columns:40px 1fr 32px;
    min-height:70px
  }
  .float-brand
  {
    width:40px;
    height:40px
  }
  .community-float .discord-mark
  {
    width:26px;
    height:26px
  }
  .community-float div>span
  {
    font-size:10px
  }
}
.real-phone
{
  width:255px;
  aspect-ratio:626/1276;
  position:relative
}
.real-phone .screen
{
  position:absolute;
  left:3.2%;
  top:1.8%;
  width:92.3%;
  height:96.3%;
  border:0;
  border-radius:7px;
  display:block;
  overflow:hidden;
  background:radial-gradient(ellipse at 80% 15%,#334761,transparent 52%),radial-gradient(ellipse at 0% 90%,#473040,transparent 65%),#131b26
}
.real-phone .phone-status
{
  padding:10px 13px;
  font-size:10px
}
.real-phone .camera
{
  display:none
}
.real-phone .phone-date
{
  margin-top:28px;
  font-size:10px
}
.real-phone .phone-clock
{
  font-size:37px;
  font-weight:400
}
.real-phone .home-apps
{
  margin-top:25px;
  gap:20px 23px
}
.real-phone .home-app>span
{
  width:40px;
  height:40px;
  border-radius:12px
}
.real-phone .home-app small
{
  font-size:9px
}
.real-phone .andee-overlay
{
  bottom:99px;
  left:9px;
  right:9px;
  padding:10px;
  background:linear-gradient(135deg,#25324cf0,#192535f2);
  border:1px solid #9bb5ff70;
  border-radius:16px;
  gap:8px;
  box-shadow:0 5px 20px #0005,0 0 20px #6b8eff15
}
.real-phone .andee-overlay img
{
  width:53px;
  height:53px;
  object-fit:contain;
  border-radius:50%;
  margin:0;
  filter:drop-shadow(0 0 10px #8aa8ff50)
}
.real-phone .andee-overlay span
{
  font-size:13px
}
.real-phone .andee-overlay small
{
  font-size:8px
}
.real-phone .andee-overlay:before
{
  left:-10px;
  top:-8px;
  width:80px;
  height:80px;
  opacity:.7
}
.real-phone .phone-dock
{
  bottom:34px;
  left:13px;
  right:13px;
  min-height:46px
}
.real-phone .android-nav
{
  bottom:7px
}
.real-phone .screen-reflection
{
  z-index:1
}
.real-phone-frame
{
  z-index:3
}
.community-float .andee-float-brand
{
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:50%;
  width:49px;
  height:49px
}
.community-float .float-andee-logo
{
  display:block;
  width:49px;
  height:49px;
  object-fit:contain;
  border-radius:50%;
  filter:drop-shadow(0 0 8px #fff2)
}
.community-float .float-subtitle
{
  display:flex;
  align-items:center;
  gap:5px
}
.community-float .discord-small
{
  width:13px;
  height:13px;
  object-fit:contain;
  border-radius:0;
  filter:brightness(.38)
}
@media(max-width:600px)
{
  .real-phone
  {
    width:235px
  }
  .real-phone .home-apps
  {
    gap:16px 20px;
    margin-top:20px
  }
  .real-phone .home-app>span
  {
    width:37px;
    height:37px
  }
  .real-phone .andee-overlay
  {
    bottom:91px;
    padding:8px
  }
  .real-phone .andee-overlay img
  {
    width:48px;
    height:48px
  }
  .real-phone .phone-clock
  {
    font-size:34px
  }
  .community-float .andee-float-brand,.community-float .float-andee-logo
  {
    width:42px;
    height:42px
  }
}
/* ==========================================================================
   PART 2 — the site's own layer

   Part 1 above is the design system: palette, cards, buttons, the phone
   mockup, the role picker, section markers, the responsive ladder. It came
   over from the reference build unchanged, so the two stay recognisably the
   same object and a value only has to be changed once.

   Everything below is what this site has and that build does not: the live
   character (canvas, drag to change who you are talking to), the character
   lab, the submission grid, the longer editorial sections, and the print /
   reduced-motion / keyboard layer. Same language as part 1 — one radius
   scale, one border colour, one accent pair — because the goal is one site,
   not two stylesheets in a trench coat.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. Tokens this layer adds on top of the reference's
   -------------------------------------------------------------------------- */

:root {
  /* The reference's own two accents, named so the sheet can talk about them:
     the warm one is the character's blush carried into the UI, the blue one is
     the aiming grid. Both are already in part 1; these are the handles. */
  --warm:    #ffb88e;
  --warm-2:  #ea6a7a;
  --warm-grad: linear-gradient(120deg, #ffb88e, #ff9a74 50%, #ea6a7a);
  --blue-2:  #a3b8ff;

  /* Surfaces. --bg is the reference's floor; the steps above it are the cards. */
  --bg:        #0d0d0d;
  --bg-soft:   #101114;
  --surface:   #15171a;
  --surface-2: #1b1e24;
  --surface-3: #22262e;

  /* Ink. --ink-2 carries body copy, --ink-3 is for notes and legal lines. */
  --ink:   #f5f6f8;
  --ink-2: #c7c3ca;
  --ink-3: #858e9d;
  --ink-4: #5c6373;

  /* Rules. Never neutral grey — every hairline in part 1 is white at low
     alpha, and matching that is what keeps the two halves looking like one. */
  --line:   rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.125);
  --line-3: rgba(255, 255, 255, 0.22);

  /* Aliases so the sheets can be read in either vocabulary. */
  --accent:   #ffb88e;
  --accent-2: #a3b8ff;
  --android:  #3ddc84;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --maxw: 1200px;
  /* The page has no column: every block runs the width of the browser and the
     only thing that insets them is this. It is one number so the hero card, the
     community banner and the section cards are always on the same edge. */
  --gutter: clamp(20px, 4vw, 72px);
  --r-sm: 12px;
  --r: 20px;
  --r-lg: 28px;
  --shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.85);

  --card-bg:    linear-gradient(145deg, #1b1e24, #111316);
  --card-line:  #383c44;
  --hairline:   rgba(255, 255, 255, 0.07);
  --hairline-2: rgba(255, 255, 255, 0.125);

  /* The material of a phone screen, reused by the hero and the 404. */
  --screen-bg: radial-gradient(ellipse at 80% 15%, #3e5169, transparent 55%),
               radial-gradient(ellipse at 0% 90%, #4b3447, transparent 65%),
               #111923;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   B. Base corrections

   Part 1 assumes its own markup. These are the three places where this site's
   document differs and the difference is not cosmetic.
   -------------------------------------------------------------------------- */

html {
  /* The nav is taller here (a language toggle, a repo button and a primary
     button do not fit in the reference's 88px row on a laptop). */
  scroll-padding-top: 104px;
}

body {
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

/* Keyboard first: part 1 has no focus story because its reference build had no
   keyboard-only surfaces. This one has a lab, a rail and a lightbox. */
:focus-visible {
  outline: 2px solid var(--blue-2);
  outline-offset: 4px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  padding: 12px 18px;
  background: #17191e;
  border: 1px solid var(--card-line);
  border-radius: 0 0 14px 0;
  font-size: 13px;
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

code {
  font: 12px/1.6 ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  color: #9db3ff;
  background: rgba(107, 142, 255, 0.09);
  border: 1px solid rgba(107, 142, 255, 0.18);
  border-radius: 5px;
  padding: 1px 5px;
}

/* --------------------------------------------------------------------------
   C. Layout shells
   -------------------------------------------------------------------------- */

/* Lifted on purpose: the reference build's 1200px column is what the page used to
   be measured against, and this site is laid out against the browser instead. */
.wrap { max-width: none; padding: 0 var(--gutter); margin: 0; }

section { padding: 96px 0; }
.band     { padding: 96px 0; }
.band-sm  { padding: 72px 0 64px; }

.rule {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--hairline);
}
.rule-fade {
  height: 1px;
  margin: 0;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--hairline-2) 18%, var(--hairline-2) 82%, transparent);
}

/* The number in an eyebrow is the reference's section marker: a large warm
   numeral, a small label, then a hairline that runs to the end of the row. */
.eyebrow {
  display: flex;
  align-items: baseline;
  gap: 14px;
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
  font-weight: 400;
  color: #b8c4dd;
  margin: 0 0 22px;
}
.eyebrow .n {
  font-size: 27px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--warm);
  font-variant-numeric: tabular-nums;
}
.eyebrow::after {
  content: "";
  order: 3;
  flex: 1;
  height: 1px;
  background: var(--hairline);
  transform: translateY(-6px);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  margin-bottom: 32px;
}
.section-head > p,
.section-head .aside {
  flex: 0 1 340px;
  margin: 0;
  font-size: 14px;
  color: #adb3bf;
}

h2 {
  font-size: clamp(29px, 3vw, 42px);
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1.22;
  margin: 0 0 20px;
}
h3 {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.4px;
  line-height: 1.4;
  margin: 0 0 12px;
}
.lede {
  max-width: 640px;
  font-size: 17px;
  line-height: 1.9;
  color: #adb3bf;
}
.lede em, .lede strong { font-style: normal; color: #e7e9ee; }

/* --------------------------------------------------------------------------
   D. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #0d0d0de8;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid #ffffff16;
}
.site-header.is-stuck { background: #0d0d0df2; }

.site-header .nav { height: 88px; gap: 24px; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.8px;
  color: #f5f6f8;
}
/* Two lines, not one: the product's name and the address it answers at. The
   domain was only in the footer paragraph before, which is where you put a
   footnote, not where you put the one thing a visitor has to remember. */
.brand-text { display: block; line-height: 1.02; }
.brand-text small {
  display: block;
  margin-top: 2px;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.11em;
  color: #8b93a3;
}
/* No circular mask. The old mark was a square piece of art with a field around it, so it
   was cropped to a circle; this one is the character cut out, and a circle would take the
   ears off. */
/* 52, not 42. The horns rise about 40px above a 682px ball in the art, which is 2.5px
   when the mark is drawn at 42 - visible, but only just, and a rounded tip at 2.5px reads
   as a flat one. At 52 they are 3.1px. The header has room: it is 88px tall. */
.brand img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  /* `border-radius: 0` is not a no-op: the reference build's own sheet carries a
     `.brand img { border-radius: 50% }` a few hundred lines earlier, and deleting the
     radius from this rule rather than overriding it left that one in charge - the circle
     stayed on, and it was quietly taking the tips off the horns. */
  border-radius: 0;
  flex: none;
}
.brand .mark { width: 42px; height: 42px; display: block; flex: none; }

.nav-links {
  display: flex;
  gap: 20px;
  margin-left: auto;
  font-size: 13px;
  color: #b8becb;
}
.nav-links a {
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.nav-links a:hover { color: var(--warm); }

.nav-tools { display: flex; align-items: center; gap: 14px; }

.lang {
  display: flex;
  gap: 2px;
  border: 1px solid var(--card-line);
  border-radius: 999px;
  padding: 3px;
  font-size: 12px;
}
.lang a {
  padding: 5px 12px;
  border-radius: 999px;
  color: #b8becb;
}
.lang a[aria-current="true"] {
  background: linear-gradient(145deg, #262930, #15171b);
  color: #f5f6f8;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--card-line);
  border-radius: 12px;
  background: #17191e;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 17px;
  height: 1.5px;
  margin: auto;
  background: #dfe3ea;
  content: "";
  transition: transform 0.2s;
}
.nav-toggle span::before { transform: translateY(-5px); }
.nav-toggle span::after  { transform: translateY(3.5px); }

/* --------------------------------------------------------------------------
   E. Buttons — one shape, three treatments
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--card-line);
  border-radius: 999px;
  padding: 13px 24px;
  background: linear-gradient(145deg, #262930, #15171b);
  font-weight: 500;
  font-size: 14px;
  color: #f5f6f8;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.btn:hover { transform: translateY(-2px); border-color: #6b8eff; }
.btn-sm { padding: 10px 18px; font-size: 13px; }

.btn-primary {
  border: 0;
  background: var(--warm-grad);
  color: #fff;
  box-shadow: inset 0 1px 0 #ffffff45, 0 8px 30px #ea6a7a18;
}
.btn-primary:hover { box-shadow: inset 0 1px 0 #ffffff55, 0 12px 34px #ea6a7a28; }

.btn-ghost {
  background: transparent;
  border-color: var(--hairline-2);
  color: #e7e9ee;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.04); }

.btn-android {
  border: 1px solid rgba(61, 220, 132, 0.42);
  background: rgba(61, 220, 132, 0.07);
  color: #eafff2;
}
.btn-android:hover {
  border-color: rgba(61, 220, 132, 0.7);
  background: rgba(61, 220, 132, 0.13);
}

.gh, .android-mark { width: 17px; height: 17px; flex: none; }
.android-mark { color: #3ddc84; }

.arrow { transition: transform 0.2s; }
.btn:hover .arrow, .link-arrow:hover .arrow { transform: translateX(3px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--warm);
}
.prose-link {
  color: #dfe3ea;
  border-bottom: 1px solid rgba(255, 184, 142, 0.45);
}
.prose-link:hover { color: var(--warm); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* The third button in the hero is the repository, with the mark rather than the
   word: the source being public is the page's credibility anchor, and the first
   screen is where someone decides whether to look. It asks for a star by name
   instead of showing a count - see the README for why the count is not here. */
.gh-mark { width: 16px; height: 16px; flex: none; }
.gh-star:hover .gh-mark { color: var(--warm); }

/* --------------------------------------------------------------------------
   F. Hero — the reference's one shared surface

   The section is only a shell; the surface itself is .hero-grid, so that the
   light, the border and the radius all belong to one box that contains the
   copy and the phone together.
   -------------------------------------------------------------------------- */

/* The section is not the card, so everything the reference's stylesheet aimed
   at `.hero` has to be switched off here — otherwise its own two-column grid,
   its -10px bleed and its own border and radius all come back, and the card
   ends up squeezed into the left column with the page 20px wider than the
   viewport. Measured before this rule: 793/623 columns, scrollWidth 1450. */
.hero {
  display: block;
  padding: 8px 0 6px;
  margin: 0;
  min-height: 0;
  grid-template-columns: none;
  gap: 0;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.hero::before,
.hero::after { content: none; }

.hero-grid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 42px;
  align-items: center;
  min-height: 0;
  /* Full width, same gutter as everything else. The card is kept because it is
     what groups the copy and the device; what it is not is a 1200px column.
     The top padding is deliberately the smallest of the three: measured at 1440,
     the first screen used to spend 210px before the first word (a 89px header,
     48px of section spacing, a 49px card inset and 98px of vertical centring),
     which left the fold showing a headline and nothing else. */
  max-width: none;
  margin: 14px var(--gutter) 34px;
  padding: clamp(22px, 2.6vw, 44px) clamp(24px, 3.4vw, 56px) clamp(20px, 2.4vw, 40px);
  /* No box: no hairline, no radius, no fill. The band is the width of the browser
     and the light behind it is the only surface - an outline round the whole first
     screen was the thing this page kept being told to stop drawing. */
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: hidden;
}
/* The light: one broad curved sheet behind both the copy and the phone, which
   is what makes it read as one object rather than a card with a picture in it. */
/* The light behind the first screen. It used to be `ambient-ribbon.svg` - an 87KB
   drawing of a curved sheet - and it is three radial gradients now. Radial rather
   than linear because they fade to nothing at their own edges: the band can clip
   them without cutting a visible line, and the document stays the width of the
   viewport (the linear version reached 1578px and the render check said so). */
.hero-grid::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0;
  background:
    radial-gradient(52% 46% at 19% 64%, rgba(255, 154, 116, 0.28), transparent 70%),
    radial-gradient(44% 40% at 73% 26%, rgba(234, 106, 122, 0.17), transparent 72%),
    radial-gradient(64% 34% at 54% 92%, rgba(107, 142, 255, 0.07), transparent 76%);
  filter: blur(26px);
  /* The band clips, so the light has to reach zero before the clip does: without
     this the gradients' outer edges were still faintly visible where the band
     ended, which read as a dark strip under the first screen. */
  mask-image: radial-gradient(50% 50% at 50% 50%, #000 52%, transparent 100%);
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 52%, transparent 100%);
}

.hero-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  /* Top-aligned, not centred: the device is taller than the words, and centring
     the words against it pushed them 98px down the fold for nothing. */
  align-self: start;
}

.hero-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  font-size: 12px;
}
.hero-spec span {
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  padding: 5px 12px;
  color: #b8becb;
}
.hero-spec .ok { color: #b6f0d0; border-color: rgba(61, 220, 132, 0.4); }

.hero h1 {
  /* CJK has no spaces to break on, so a browser will happily split 手机 in half.
     `auto-phrase` asks it to break at phrase boundaries instead; engines without
     it fall back to breaking anywhere, which is what happened before. */
  word-break: auto-phrase;
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 650;
  line-height: 1.14;
  letter-spacing: -1.6px;
  margin: 0 0 22px;
  text-shadow: 0 2px 16px #0009;
}
/* The headline opens with the phrase the product answers to. It is inside the h1
   rather than above it so the reveal carries it, and small and warm so it reads as
   somebody calling a name rather than as part of the sentence. */
.hero h1 .hello {
  display: block;
  margin-bottom: 10px;
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--warm);
}
.hero h1 .lx {
  background: var(--warm-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lede {
  max-width: 520px;
  font-size: 15px;
  color: #c7c3ca;
  text-shadow: 0 1px 8px #000;
}
.hero .meta {
  margin: 18px 0 0;
  max-width: 560px;
  font-size: 11.5px;
  color: #b0a8af;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.hero-facts > span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 11.5px;
  color: #9aa3b3;
}
.hero-facts b { color: #f5f6f8; font-weight: 600; font-size: 13px; }
.hero-facts b.txt { font-size: 12px; color: var(--warm); }

.stage-hero { position: relative; min-width: 0; }

/* --- the phone: a real one, photographed, not drawn ----------------------- */

.hero-art,
.phone {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 0;
  height: auto;
  margin: 26px auto 0;
  /* One number to change when the device should read bigger: everything drawn
     on the screen below is sized off this width. */
  /* The device is fluid: it grows with the viewport between a phone-sized floor
     and a ceiling that keeps the hero from becoming a wall. */
  --w: clamp(290px, 23vw, 440px);
  width: var(--w);
  aspect-ratio: 626 / 1276;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  transform: rotate(3deg);
  filter: drop-shadow(14px 20px 18px #0008);
  box-shadow: 0 0 0 1px #ffe0c855, 0 0 25px #ffb88e66, 0 0 85px #ea6a7a55, 15px 30px 48px #0009;
}
.phone::before { content: none; }
.phone::after  { content: none; }

/* These four numbers are measured off the frame image, not guessed: scan the
   PNG's alpha for the longest transparent run and the opening sits at x 30..596,
   y 62..1252 - 4.79% / 4.86% / 90.58% / 93.34% of 626x1276. The reference's own
   values (3.2 / 1.8 / 92.3 / 96.3) put the screen layer ~15px high and ~10px
   wide of the opening; the bezel hid the overshoot but every element inside the
   screen sat off-centre by the difference. */
/* --------------------------------------------------------------------------
   The replay: the first screen acting out one task

   The launcher drawn above is the rest state. Each beat of the hero's script adds
   one more piece of the app to it - a notification arrives, the chat opens, Andee
   drafts a reply, you send it - and every piece is drawn here rather than
   photographed. The real screenshots stay in section 03 where they are evidence;
   repeating them on the first screen would turn evidence into wallpaper, and a
   drawing can move in ways a still cannot.

   Every size is a fraction of `--w`, the same single number the launcher is built
   from, so the whole flow scales with the device instead of being redrawn per
   breakpoint. Nothing here renders until a beat is set, so with no script the
   phone is the launcher and nothing else.
   -------------------------------------------------------------------------- */

/* The ball is the app's own overlay: it stays on top through the whole flow, and
   only its caption card belongs to the launcher. During the chat it drops down to
   sit where the keyboard is, the way it does on a real screen. */
.andee-overlay { transition: bottom 0.5s var(--ease); }
.andee-overlay .subtitle { transition: opacity 0.3s var(--ease); }
.stage-canvas.is-replay .andee-overlay .subtitle { opacity: 0; }
.stage-canvas.is-chat .andee-overlay { bottom: calc(var(--w) * 0.062); }
.stage-canvas.is-chat .screen-home { opacity: 0; }

.screen-play {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  color: #eef1f6;
}

/* --- beat 1: the notification lands on the launcher ----------------------- */

.play-notice {
  position: absolute;
  left: calc(var(--w) * 0.031);
  right: calc(var(--w) * 0.031);
  top: calc(var(--w) * 0.127);
  padding: calc(var(--w) * 0.036) calc(var(--w) * 0.042) 0;
  border-radius: calc(var(--w) * 0.062);
  background: #f4f5f8;
  color: #14161a;
  box-shadow: 0 calc(var(--w) * 0.024) calc(var(--w) * 0.056) #00000059;
  opacity: 0;
  transform: translateY(-14%);
  transition: opacity 0.4s var(--ease), transform 0.6s var(--ease);
}
.stage-canvas[data-beat="1"] .play-notice { opacity: 1; transform: none; }

.notice-head { display: flex; align-items: center; gap: calc(var(--w) * 0.022); }
.notice-app {
  display: grid;
  place-items: center;
  width: calc(var(--w) * 0.062);
  height: calc(var(--w) * 0.062);
  border-radius: calc(var(--w) * 0.019);
  background: #25d366;
  color: #08301c;
}
.notice-app svg { width: calc(var(--w) * 0.036); height: calc(var(--w) * 0.036); }
.notice-head b { flex: 1; font-size: calc(var(--w) * 0.041); font-weight: 600; }
.notice-when { font-size: calc(var(--w) * 0.034); color: #6a7280; }
.play-notice p {
  margin: calc(var(--w) * 0.014) 0 0;
  font-size: calc(var(--w) * 0.038);
  line-height: 1.45;
  color: #2b3038;
}
.notice-acts {
  display: flex;
  margin-top: calc(var(--w) * 0.03);
  border-top: 1px solid #14161a14;
}
.notice-acts span {
  flex: 1;
  padding: calc(var(--w) * 0.028) 0;
  font-size: calc(var(--w) * 0.034);
  font-weight: 550;
  text-align: center;
  color: #1f4fd8;
}
.notice-acts span + span { border-left: 1px solid #14161a14; }

/* --- beats 2-4: the chat -------------------------------------------------- */

.play-chat {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--w) * 0.1032);
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: #0c1116;
  opacity: 0;
  transform: translateY(7%);
  transition: opacity 0.45s var(--ease), transform 0.55s var(--ease);
}
.stage-canvas[data-beat="2"] .play-chat,
.stage-canvas[data-beat="3"] .play-chat,
.stage-canvas[data-beat="4"] .play-chat { opacity: 1; transform: none; }

.chat-bar {
  display: flex;
  align-items: center;
  gap: calc(var(--w) * 0.026);
  padding: calc(var(--w) * 0.024) calc(var(--w) * 0.036);
  border-bottom: 1px solid #ffffff12;
  background: #111a21;
}
.chat-back { font-size: calc(var(--w) * 0.062); line-height: 1; color: #a9b6c4; }
.chat-who { flex: 1; min-width: 0; }
.chat-who b { display: block; font-size: calc(var(--w) * 0.042); font-weight: 600; }
.chat-who small { display: block; font-size: calc(var(--w) * 0.032); color: #7d8b99; }
.chat-tools { display: flex; gap: calc(var(--w) * 0.026); }
.chat-tools i {
  width: calc(var(--w) * 0.036);
  height: calc(var(--w) * 0.036);
  border: 1.5px solid #8d9aa8;
  border-radius: 50%;
}

.chat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--w) * 0.03);
  padding: calc(var(--w) * 0.042) calc(var(--w) * 0.038);
}

.bubble {
  max-width: 82%;
  padding: calc(var(--w) * 0.026) calc(var(--w) * 0.034);
  border-radius: calc(var(--w) * 0.042);
  font-size: calc(var(--w) * 0.037);
  line-height: 1.45;
}
.bubble.is-her { align-self: flex-start; background: #1c2731; border-bottom-left-radius: calc(var(--w) * 0.014); }
.bubble.is-mine {
  align-self: flex-end;
  background: #14533c;
  border-bottom-right-radius: calc(var(--w) * 0.014);
  opacity: 0;
  transform: translateY(14%);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease), background-color 0.4s var(--ease);
}
.bubble-meta {
  display: block;
  margin-top: calc(var(--w) * 0.012);
  font-size: calc(var(--w) * 0.03);
  color: #9fd8bf;
}
/* Sent: the same bubble, with the ticks that say so. */
.stage-canvas[data-beat="4"] .bubble.is-mine { background: #10513a; }
.stage-canvas[data-beat="4"] .bubble-meta { opacity: 0; }
.stage-canvas[data-beat="4"] .bubble.is-mine::after { content: "\2713\2713"; margin-left: 0.5em; color: #7fd0ff; }

/* the three dots, while it is writing */
.chat-dots {
  align-self: flex-end;
  display: flex;
  gap: calc(var(--w) * 0.014);
  padding: calc(var(--w) * 0.03) calc(var(--w) * 0.036);
  border-radius: calc(var(--w) * 0.042);
  background: #14533c;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.chat-dots span {
  width: calc(var(--w) * 0.02);
  height: calc(var(--w) * 0.02);
  border-radius: 50%;
  background: #cfe9df;
  animation: chat-dot 1.2s infinite ease-in-out;
}
.chat-dots span:nth-child(2) { animation-delay: 0.15s; }
.chat-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
  30% { transform: translateY(-25%); opacity: 1; }
}
.stage-canvas[data-beat="2"] .chat-dots { opacity: 1; }

/* what it drafted, and what it did not do */
.confirm-card {
  margin-top: auto;
  padding: calc(var(--w) * 0.032) calc(var(--w) * 0.036);
  border: 1px solid #9bb5ff5c;
  border-radius: calc(var(--w) * 0.05);
  background: #141b26;
  opacity: 0;
  transform: translateY(12%);
  transition: opacity 0.4s var(--ease), transform 0.55s var(--ease);
}
.confirm-card p {
  margin: 0 0 calc(var(--w) * 0.014);
  font-size: calc(var(--w) * 0.034);
  line-height: 1.5;
  color: #c3ccd9;
}
.confirm-card p b { color: #eef1f6; font-weight: 600; }
.confirm-acts {
  display: flex;
  gap: calc(var(--w) * 0.014);
  margin-top: calc(var(--w) * 0.026);
}
.confirm-acts span {
  flex: 1;
  padding: calc(var(--w) * 0.024) 0;
  border-radius: calc(var(--w) * 0.026);
  background: #1d2532;
  font-size: calc(var(--w) * 0.032);
  font-weight: 550;
  text-align: center;
  color: #c3ccd9;
}
.confirm-acts .is-primary {
  background: var(--warm-grad);
  color: #2a0f0a;
  font-weight: 650;
}

.stage-canvas[data-beat="3"] .bubble.is-mine,
.stage-canvas[data-beat="3"] .confirm-card,
.stage-canvas[data-beat="4"] .bubble.is-mine { opacity: 1; transform: none; }

.chat-input {
  padding: calc(var(--w) * 0.026) calc(var(--w) * 0.038) calc(var(--w) * 0.034);
  border-top: 1px solid #ffffff12;
}
.chat-input span {
  display: block;
  padding: calc(var(--w) * 0.026) calc(var(--w) * 0.05);
  border-radius: 999px;
  background: #1a222b;
  font-size: calc(var(--w) * 0.036);
  color: #6f7c8a;
}

.stage-canvas {
  position: absolute;
  left: 4.79%;
  top: 4.86%;
  width: 90.58%;
  height: 93.34%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 7px;
  background: var(--screen-bg);
}

/* Two classes, not one. The reference's stylesheet carries a `.phone img` rule
   aimed at the mascot photo inside its own drawn phone - width:140px, fully
   round, margin-bottom - and `.phone img` (one class + one element) outranks a
   single class. Measured with the single-class selector: the bezel rendered
   166px wide inside a 274px phone, so the frame's right edge fell across the
   middle of the screen and read as a seam. */
.phone > .phone-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  pointer-events: none;
}

.phone-cam { display: none; }
.grid-plate { display: none; }

/* --- what is on that screen ---------------------------------------------- */

.phone-status {
  height: calc(var(--w) * 0.1032);
  padding: calc(var(--w) * 0.0355) calc(var(--w) * 0.0548) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: calc(var(--w) * 0.0355);
  color: #e6ecf5;
}
.phone-status > div { display: flex; align-items: center; gap: 4px; }
.signal, .battery { display: inline-flex; }
.battery::before {
  content: "";
  display: block;
  width: 12px;
  height: 6px;
  border: 1px solid currentColor;
  border-radius: 2px;
}

.phone-date {
  margin-top: calc(var(--w) * 0.1032);
  text-align: center;
  font-size: calc(var(--w) * 0.0371);
  color: #a9b5c7;
}
.phone-clock {
  margin-top: calc(var(--w) * 0.0161);
  text-align: center;
  font-size: calc(var(--w) * 0.1452);
  font-weight: 300;
  letter-spacing: -1px;
  line-height: 1.15;
  color: #f2f6fb;
}

.home-apps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--w) * 0.071) calc(var(--w) * 0.0839);
  padding: calc(var(--w) * 0.0968) calc(var(--w) * 0.0774) 0;
}
.home-app { text-align: center; color: #c8d3e1; }
.home-app > span {
  display: grid;
  place-items: center;
  width: calc(var(--w) * 0.1548);
  height: calc(var(--w) * 0.1548);
  margin: 0 auto calc(var(--w) * 0.0194);
  border-radius: calc(var(--w) * 0.0484);
  background: linear-gradient(145deg, var(--appcolor, #3f4a5e), color-mix(in srgb, var(--appcolor, #3f4a5e), black 30%));
  box-shadow: inset 0 1px 0 #ffffff30;
}
.home-app svg { width: calc(var(--w) * 0.0774); height: calc(var(--w) * 0.0774); }
.home-app small { font-size: calc(var(--w) * 0.0323); color: #bbc7d6; }

/* The character lives here, in the shade, over the launcher — the same place
   it sits on a real phone. */
.andee-overlay {
  position: absolute;
  bottom: calc(var(--w) * 0.3806);
  left: calc(var(--w) * 0.0355);
  right: calc(var(--w) * 0.0355);
  display: flex;
  align-items: center;
  gap: calc(var(--w) * 0.0387);
  padding: calc(var(--w) * 0.0355) calc(var(--w) * 0.0419);
  border: 1px solid #9bb5ff70;
  border-radius: calc(var(--w) * 0.0613);
  background: linear-gradient(135deg, #25324cf0, #192535f2);
  box-shadow: 0 5px 20px #0005, 0 0 28px #6b8eff22;
  isolation: isolate;
}
.andee-overlay::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(var(--w) * -0.0871);
  top: calc(var(--w) * -0.0871);
  width: calc(var(--w) * 0.4419);
  height: calc(var(--w) * 0.4226);
  border-radius: 50%;
  background: radial-gradient(ellipse, #ffd1a799, #ea6a7a60 32%, #6b8eff33 55%, transparent 75%);
  filter: blur(11px);
}
.andee-overlay .ball-hero,
.andee-overlay .ball-static {
  position: static;
  flex: none;
  width: calc(var(--w) * 0.2);
  height: calc(var(--w) * 0.2);
  margin: 0;
}
.andee-overlay img { width: calc(var(--w) * 0.2); height: calc(var(--w) * 0.2); border-radius: 50%; flex: none; }

.phone-dock {
  position: absolute;
  bottom: calc(var(--w) * 0.1194);
  left: calc(var(--w) * 0.0516);
  right: calc(var(--w) * 0.0516);
  display: flex;
  justify-content: space-around;
  padding: calc(var(--w) * 0.0452) calc(var(--w) * 0.0161);
  border: 1px solid var(--hairline-2);
  border-radius: 16px;
  background: #ffffff0a;
}
.phone-dock svg { width: calc(var(--w) * 0.0774); height: calc(var(--w) * 0.0774); color: #c2cede; }

.android-nav {
  position: absolute;
  bottom: calc(var(--w) * 0.0258);
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-evenly;
  font-size: calc(var(--w) * 0.0435);
  color: #b1bdcd;
}

.phone-caption {
  position: relative;
  z-index: 2;
  order: 3;
  margin: 0 auto;
  max-width: 250px;
  text-align: center;
  font-size: 10.5px;
  line-height: 1.7;
  color: #c8bdc4;
}

/* The android mark is the one brand colour on the page, and it is only ever
   the robot: in the phone's chin note and in the get-it button. */
.phone-chin {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 10.5px;
  color: #b1bdcd;
}
.phone-chin .android-mark { width: 15px; height: 15px; }

.ball-hero { width: 100%; height: 100%; display: block; }

/* The still that stands in when the renderer cannot run. Shown by the noscript
   rule, by the script's own failure path, and by nothing else. */
html.is-static-ball .ball-hero { display: none; }
html.is-static-ball .ball-static { display: block; }

.ball-static {
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 62%;
  height: auto;
}

/* The invitation to drag belongs under the device, not across its launcher:
   a caption is where a reader looks for instructions, and the screen is where
   the product's own artwork goes. */
.stage-hint {
  margin: 12px auto 0;
  max-width: 340px;
  text-align: center;
  font-size: 10.5px;
  line-height: 1.7;
  color: #818d9e;
}
.stage-hint:empty { display: none; }
.stage-hint .k { color: var(--warm); }

/* The character's line is on the phone now, sharing the shade card with the
   ball it belongs to: the phone is the surface the product runs on, so what it
   says belongs on that screen rather than on a caption underneath the device.
   It keeps its own live region, because a line that types itself is exactly
   what aria-live was for. */
.andee-overlay .subtitle {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  /* Room for two lines whatever the script says, so the card does not grow and
     shrink as the character types. */
  min-height: 2.6em;
  margin: 0;
  font-size: calc(var(--w) * 0.0435);
  line-height: 1.6;
  color: #f5f6f8;
}
.andee-overlay .subtitle .who {
  display: block;
  margin-bottom: 1px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm);
}
.andee-overlay .subtitle .line { color: #eef2f9; }
.caret::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-left: 3px;
  background: currentColor;
  animation: caret 1.1s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* --------------------------------------------------------------------------
   G. The community strip and the floating card

   The strip is the site's one loud surface: the reference's warm gradient,
   dark text on it, because a Discord invite rendered in the page's quiet voice
   is a link nobody clicks.
   -------------------------------------------------------------------------- */

/* The strip is a .wrap itself, the way the hero card is, so its edges line up
   with the card above it instead of sitting 32px inside them. `margin: auto`
   is what keeps it centred once the viewport is wider than the page; the side
   padding is the wrap's own 32px, so its content lines up with every section
   below it. Measured before this: card 120/1320, strip 152/1288. */
.community-top {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 22px;
  /* Same edge as the hero above it. */
  max-width: none;
  margin: 6px var(--gutter) 30px;
  padding: 24px clamp(22px, 2.4vw, 40px);
  border: 1px solid var(--warm-2);
  border-radius: 28px;
  background: var(--warm-grad);
  box-shadow: 0 18px 55px #ea6a7a1f;
  color: #302128;
}
.community-top::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 20% -15% -95% 35%;
  border-radius: 50%;
  background: #ffffff15;
  transform: rotate(-15deg);
  pointer-events: none;
}
.community-top > * { position: relative; z-index: 1; }

.community-symbol {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: #5865f2;
  border: 1px solid #8b94ff60;
}
.community-symbol img { width: 26px; height: 26px; }

.community-top h3 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.5px;
  color: #302128;
}
.community-top p { margin: 0; font-size: 13.5px; color: #492a30; }
.community-top .kicker {
  display: block;
  margin: 0 0 4px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #674044;
}
.community-top .btn {
  grid-column: auto;
  border: 1px solid #ffffff45;
  background: linear-gradient(145deg, #27272c, #141519);
  color: #fff;
  font-size: 13px;
  padding: 13px 20px;
  white-space: nowrap;
}

/* The Discord invite is the last row of the hero band, not a section under it: the
   page opens with one statement, and the invitation to talk about the product is
   part of that statement rather than a banner that interrupts it. It keeps the
   reference's layout (mark, copy, button) and drops its card - no warm fill, no
   radius, a hairline and the Discord blue. */
.hero-copy > .community-top {
  margin: 30px 0 0;
  padding: 22px 0 0;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #e7e9ee;
}
.hero-copy > .community-top::before,
.hero-copy > .community-top::after { content: none; }
.hero-copy > .community-top { grid-template-columns: 42px 1fr auto; gap: 16px; }
.hero-copy > .community-top h3 { margin: 0 0 2px; font-size: 18px; color: #f5f6f8; }
.hero-copy > .community-top p { font-size: 13px; color: #9da5b3; }
.hero-copy > .community-top .kicker { color: var(--warm); }
.hero-copy > .community-top .btn {
  border: 1px solid #7a84ff;
  background: #5865f2;
  color: #fff;
  font-size: 13px;
  padding: 11px 18px;
}
.hero-copy > .community-top .btn:hover { background: #6874ff; border-color: #a5adff; }

/* The reference's own floating Discord card is not used here. It is hidden in
   the markup... except it is not in the markup at all any more: the hero, the
   strip under it and the community section already make the same invitation, and
   a fourth copy that follows a reader down the page is one more thing to
   dismiss. Its rules survive in part 1, which is kept verbatim; nothing here
   switches them on. */

/* --------------------------------------------------------------------------
   H. Real demo — three frames, no device chrome
   -------------------------------------------------------------------------- */

.proof-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  align-items: start;
}

.proof-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 13px;
  color: #dfe3ea;
}
.proof-head .n {
  font-size: 11px;
  color: var(--warm);
  font-variant-numeric: tabular-nums;
}
.proof-head .t { margin-left: auto; font-size: 11px; color: #818d9e; }

.proof-frame,
.shot-open {
  display: block;
  width: 100%;
  padding: 14px 14px 0;
  border: 1px solid var(--hairline-2);
  border-radius: 18px;
  background: #17191e;
  cursor: zoom-in;
}
.proof-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 374 / 832;
  object-fit: contain;
  border-radius: 9px;
  background: #111017;
}
.proof-frame::after { content: none; }

.proof-d {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: #9da5b3;
}
.proof-d b { color: #e7e9ee; font-weight: 550; }

.proof-hint { display: none; }

/* --------------------------------------------------------------------------
   I. Scenes / use cases — one box, four numbered cells

   This was a horizontal rail of cards with a phone screenshot on each. The
   screenshots said less than the sentences did - a subscription list and a
   meeting recorder are not pictures of anything a reader cannot already imagine,
   and two of the four were wide mockups that had to be shrunk to fit a slot
   shaped like a phone. The rail was the other half of the problem: at 1440 it
   showed two and a half of four, so the section's own claim ("four of them ship
   ready-made") could not be checked without a swipe. It is the same bordered box
   with hairline cells that section 05 uses, four cells instead of six, all four
   sentences readable at once.
   -------------------------------------------------------------------------- */

.scene-list {
  counter-reset: scene;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--card-line);
  border-radius: 28px;
  overflow: hidden;
  background: #14171c;
}

.scene {
  padding: 26px clamp(22px, 2.4vw, 34px) 30px;
  border: 0;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: none;
}
/* The number comes from the list, not from the markup: these are four positions
   in a set, and a set is the kind of thing CSS should be able to count. */
.scene::before {
  counter-increment: scene;
  content: counter(scene, decimal-leading-zero);
  display: block;
  margin-bottom: 16px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--warm);
}
.scene:nth-child(2n) { border-right: 0; }
.scene:nth-last-child(-n + 2) { border-bottom: 0; }

.scene-say {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.4px;
  line-height: 1.4;
  color: #f5f6f8;
  text-wrap: pretty;
}
.scene-do { margin: 0; font-size: 13.5px; line-height: 1.85; color: #9da5b3; }
.scene-do strong { color: #e7e9ee; font-weight: 550; }

.scene-note {
  margin: 22px 0 0;
  max-width: 780px;
  font-size: 12.5px;
  line-height: 1.9;
  color: #858e9d;
}
.scene-note strong { color: #b8c4d8; font-weight: 550; }
.scene-note code { font-size: 11.5px; }

/* --------------------------------------------------------------------------
   J. How it works — the loop diagram, then the body it needs
   -------------------------------------------------------------------------- */

.reference-work {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 38px;
  align-items: center;
  padding: 30px;
  border: 1px solid #353b45;
  border-radius: 28px;
  background: radial-gradient(ellipse at 0% 0%, #6b8eff10, transparent 65%), #14171c;
}

.reference-diagrams { display: flex; align-items: center; justify-content: center; }
.loop-image { display: block; width: 100%; max-width: 360px; height: auto; margin: auto; }
.hardware-image { width: 100%; max-width: 360px; height: auto; margin: auto; display: block; }

.body-capabilities { display: flex; flex-direction: column; min-width: 0; }

.body-part {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: none;
}
.body-part:last-child { border-bottom: 0; }
.body-part h3 { margin: 0 0 3px; font-size: 17px; }
.body-part p { margin: 0; font-size: 13.5px; color: #adb3bf; }

.part-icon {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 0;
  border: 0;
  background: none;
  color: var(--blue-2);
}
.part-icon svg { width: 27px; height: 27px; }
.body-part:nth-child(3) .part-icon,
.body-part:nth-child(5) .part-icon { color: var(--warm); }

.work-note {
  margin: 22px 0 0;
  font-size: 12px;
  line-height: 1.8;
  color: #858e9d;
}

/* --------------------------------------------------------------------------
   K. The six differentiators — one bordered box, hairline cells

   The reference lays six cards out as a single grid with internal rules. It
   reads as a table of claims rather than six floating boxes, which is what
   this section is: six claims, and a reader comparing them.
   -------------------------------------------------------------------------- */

.why-grid,
.difference-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--card-line);
  border-radius: 28px;
  overflow: hidden;
  background: #14171c;
}

.why,
.difference-card {
  padding: 30px;
  border: 0;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: none;
  overflow: visible;
}
.why:nth-child(3n) { border-right: 0; }
.why:nth-child(n + 4) { border-bottom: 0; }

.why h3 { font-size: 18px; }
.why p { margin: 0; font-size: 13.5px; line-height: 1.9; color: #9da5b3; }

.why .icon {
  width: 28px;
  height: 28px;
  margin: 0 0 20px;
  color: var(--blue-2);
  background: none;
  border: 0;
  padding: 0;
}
.why:nth-child(1) .icon { color: var(--warm); }
.why:nth-child(4) .icon { color: var(--warm); }

/* --------------------------------------------------------------------------
   L. The character lab
   -------------------------------------------------------------------------- */

.lab {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 34px;
  align-items: center;
  margin-top: 12px;
}

.lab-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: 22px;
  border: 1px solid #424752;
  border-radius: 28px;
  background: #17191f;
}
.lab-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20% -26% -14%;
  border-radius: 50%;
  background:
    radial-gradient(58% 62% at 28% 38%, rgba(255, 154, 116, 0.24), transparent 68%),
    radial-gradient(52% 56% at 74% 66%, rgba(107, 142, 255, 0.13), transparent 70%);
  filter: blur(24px);
}
.lab-stage > * { position: relative; }

#lab-ball { width: 100%; max-width: 240px; aspect-ratio: 1; display: block; }

.mood-name {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warm);
}

.lab-looks,
.role-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.look,
.role-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 6px;
  border: 1px solid var(--hairline-2);
  border-radius: 14px;
  background: #f5f6f8;
  color: #232a35;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.look:hover { transform: translateY(-2px); }
.look::after { content: none; }
.look img,
.look canvas { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.look .nm { font-size: 11.5px; }
.look .en { display: none; }
.look[aria-pressed="true"] {
  border-color: transparent;
  box-shadow: 0 0 0 2px #6b8eff;
}

.mood-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.mood,
.mood-tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  padding: 5px 12px;
  background: none;
  font: inherit;
  font-size: 11.5px;
  color: #bdc8d8;
  cursor: pointer;
}
.mood .dot,
.mood-tag::before {
  display: inline-block;
  order: -1;
  width: 6px;
  height: 6px;
  margin: 0 7px 0 0;
  border-radius: 50%;
  background: #6b8eff;
  content: "";
}
.mood:nth-child(3n) .dot { background: var(--warm); }
.mood-tag:nth-child(3n)::before { background: var(--warm); }
.mood[aria-pressed="true"] {
  border-color: var(--blue-2);
  color: #e8edff;
  background: rgba(107, 142, 255, 0.1);
}

.lab-legend {
  margin: 20px 0 0;
  font-size: 12.5px;
  line-height: 1.9;
  color: #858e9d;
}
.lab-legend .mono {
  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #b8c4d8;
}

/* A single line under the rail: on the phone these are what a swipe gives you. */
.role-description {
  margin: 20px 0 0;
  font-size: 13.5px;
  line-height: 1.9;
  color: #9da5b3;
}

/* --------------------------------------------------------------------------
   M. Quote band
   -------------------------------------------------------------------------- */

.quote-band {
  padding: 96px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: radial-gradient(ellipse at 12% 0%, #ff9a7414, transparent 55%), #111214;
}
.quote-band blockquote {
  margin: 0;
  max-width: 880px;
  font-size: clamp(24px, 3.2vw, 40px);
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 1.3;
  color: #f5f6f8;
}
.quote-band blockquote em {
  font-style: normal;
  background: var(--warm-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.quote-band blockquote::before { content: none; }
.quote-band .src {
  margin: 24px 0 0;
  max-width: 640px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #858e9d;
}
.quote-band .src::before { content: none; }
.quote-band .quote-body {
  margin: 20px 0 0;
  max-width: 640px;
  font-size: 14.5px;
  line-height: 1.95;
  color: #adb3bf;
}
.quote-band .quote-body strong { color: #e7e9ee; font-weight: 550; }

/* --------------------------------------------------------------------------
   N. Privacy and security — the reference's safety list
   -------------------------------------------------------------------------- */

.verify {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: start;
}

.checks,
.safety-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.checks li,
.safety-list article {
  padding: 22px 24px;
  border: 1px solid var(--hairline-2);
  border-radius: 20px;
  background: linear-gradient(140deg, #1b1e23, #121417);
  font-size: 13.5px;
  line-height: 1.9;
  color: #9da5b3;
}
.checks li::before { content: none; }
.checks li b,
.safety-list article h3 { color: #f5f6f8; font-weight: 550; }
.checks li code { font-size: 11.5px; }
.checks li:last-child { border-color: #ff9a7440; }

/* --------------------------------------------------------------------------
   O. Getting it — three ways, then the install steps and the QR
   -------------------------------------------------------------------------- */

.paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--card-line);
  border-radius: 28px;
  overflow: hidden;
  background: #14171c;
}
.path {
  padding: 30px;
  border: 0;
  border-right: 1px solid var(--hairline);
  border-radius: 0;
  background: none;
}
.path:last-child { border-right: 0; }
.path.is-feature {
  border-right-color: #ff9a7450;
  background: radial-gradient(ellipse at 0% 0%, #ff9a741f, transparent 70%), #1a171a;
}
.path .k {
  display: block;
  margin-bottom: 14px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warm);
}
.path h3 { font-size: 18px; }
.path p { margin: 0 0 20px; font-size: 13.5px; line-height: 1.9; color: #9da5b3; }
.path p strong { color: #e7e9ee; font-weight: 550; }

.install-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 34px;
}

.plate {
  border: 1px solid #6b8eff38;
  border-radius: 20px;
  overflow: hidden;
  background: #15171a;
}
/* --------------------------------------------------------------------------
   X. Two diagrams, drawn instead of fetched

   The loop of what the device does, and the settings screen it needs. Both used
   to be SVG files (work-loop.svg was 87KB) that only ever scaled, could not
   reflow at a narrow width, and had to be rewritten in two languages. They are
   markup now: the labels are real text, the toggles are real toggles, and the
   loop's arcs are four rotated borders. The character in the middle is still
   drawn by `ball.js` - one renderer, one character, no third rendition of it.
   -------------------------------------------------------------------------- */

.loop {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1;
  margin: auto;
}

/* The ring is one conic-gradient masked down to its outer 2.5px: four arcs with
   four gaps, in the angles between the nodes (the nodes sit at 45°, 135°, 225°
   and 315°, so each arc runs from node+14° to the next node-14°).

   It is not four rotated borders, which is what it was first: a rotated square's
   bounding box is its side times 1.41 whatever its border-radius paints, so the
   arcs reached 416px inside a 314px diagram and pushed the document 8px wide on a
   400px screen. A circle is rotation-invariant; a rotated element's box is not. */
.loop-ring {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg 59deg, rgba(255, 154, 116, 0.5) 59deg 121deg,
    transparent 121deg 149deg, rgba(255, 154, 116, 0.5) 149deg 211deg,
    transparent 211deg 239deg, rgba(255, 154, 116, 0.5) 239deg 301deg,
    transparent 301deg 329deg, rgba(255, 154, 116, 0.5) 329deg 360deg);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 0);
}
/* Heads sit on each arc's leading end. On a circle parameterised by the conic
   angle, the tangent at angle θ points along θ, so the rotation is the angle and
   the position is (50% + 45%·sinθ, 50% − 45%·cosθ). */
.loop-head {
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-left-color: rgba(255, 168, 130, 0.85);
}
.loop-head.is-h1 { left: 88.6%; top: 73.2%; transform: translate(-50%, -50%) rotate(121deg); }
.loop-head.is-h2 { left: 26.8%; top: 88.6%; transform: translate(-50%, -50%) rotate(211deg); }
.loop-head.is-h3 { left: 11.4%; top: 26.8%; transform: translate(-50%, -50%) rotate(301deg); }
.loop-head.is-h4 { left: 73.2%; top: 11.4%; transform: translate(-50%, -50%) rotate(31deg); }

.loop-node {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 7px;
  width: 36%;
  font-size: 12.5px;
  line-height: 1.4;
  color: #c7c3ca;
  text-align: center;
}
.loop-node svg {
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid #ffffff26;
  border-radius: 50%;
  background: #1b1e24;
  color: var(--blue-2);
}
.loop-node.is-nw { left: 0;    top: 0; }
.loop-node.is-ne { right: 0;   top: 0; }
.loop-node.is-se { right: 0;   bottom: 0; }
.loop-node.is-sw { left: 0;    bottom: 0; }

.loop-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 46%;
  padding: 12px 10px;
  border: 1px solid #ffffff1f;
  border-radius: 22px;
  background: linear-gradient(160deg, #1d2129, #111318);
  text-align: center;
}
.loop-core canvas { width: 76px; height: 76px; display: block; }
.loop-core b { font-size: 13.5px; font-weight: 550; color: #f5f6f8; }
.loop-core small { font-size: 10.5px; color: #8b93a3; }

/* --- the settings screen the app asks for --------------------------------- */

.panel { padding: 24px clamp(16px, 2vw, 26px) 26px; background: #12161d; }
.panel-head { margin: 0 0 4px; font-size: 19px; font-weight: 500; letter-spacing: -0.3px; color: #f5f6f8; }
.panel-sub { margin: 0 0 20px; font-size: 12.5px; color: #8b93a3; }
.panel-rows { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.panel-rows li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 16px;
  padding: 14px 16px;
  border: 1px solid rgba(107, 142, 255, 0.34);
  border-radius: 15px;
  background: #222a38;
}
.panel-rows b { font-size: 15px; font-weight: 550; color: #f2f5fa; }
.panel-rows small { grid-column: 1; font-size: 12.5px; color: #a7b0c0; }
.switch {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: var(--warm-grad);
  box-shadow: inset 0 1px 0 #ffffff4d, 0 2px 8px #ea6a7a26;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff5ec;
  box-shadow: 0 1px 3px #0006;
}

.plate figcaption {
  padding: 16px 20px;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  color: #858e9d;
}

.installsteps { display: flex; flex-direction: column; gap: 22px; }
.installsteps article { display: flex; gap: 18px; }
.installsteps h3 { margin: 0 0 7px; font-size: 18px; }
.installsteps p { margin: 0; font-size: 13.5px; line-height: 1.85; color: #9da5b3; }
.number {
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--hairline-2);
  border-radius: 12px;
  font-size: 12px;
  color: #a3b8ff;
}

.downloadbox {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 34px;
  padding: 22px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: linear-gradient(135deg, #211c20, #141820) padding-box, var(--warm-grad) border-box;
  box-shadow: 0 12px 38px #ea6a7a0f;
}
.downloadbox img {
  width: 94px;
  height: 94px;
  padding: 7px;
  border-radius: 10px;
  background: #fff;
  flex: none;
}
.downloadbox h3 { margin: 0 0 4px; font-size: 17px; }
.downloadbox p { margin: 0; font-size: 12px; color: #9da5b3; }
.downloadbox .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.callout {
  display: flex;
  gap: 18px;
  margin-top: 34px;
  padding: 24px 26px;
  border: 1px solid rgba(255, 184, 142, 0.42);
  border-radius: 20px;
  background: linear-gradient(140deg, #201b1e, #141518);
  font-size: 13.5px;
  line-height: 1.95;
  color: #ada9b1;
}
.callout .mk { flex: none; color: var(--warm); font-size: 14px; line-height: 1.6; }
.callout b { color: #f5f6f8; }
.callout strong { color: #f5f6f8; font-weight: 550; }
.callout a { color: var(--warm); }

.cost { margin-top: 22px; font-size: 12.5px; line-height: 1.9; color: #858e9d; }

/* --------------------------------------------------------------------------
   P. Community grid — the only page here a visitor fills in
   -------------------------------------------------------------------------- */

.comm-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 34px;
}
.card {
  border: 1px solid var(--card-line);
  border-radius: 20px;
  background: var(--card-bg);
  overflow: hidden;
}
.card-media { position: relative; aspect-ratio: 16 / 10; background: #111215; }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-media .badge {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #0d0d0dcc;
  font-size: 10px;
  color: #b8c4d4;
}
.card-quote {
  margin: 0;
  padding: 22px;
  font-size: 14.5px;
  line-height: 1.85;
  color: #dfe3ea;
}
.card-did { margin: 0; padding: 0 22px; font-size: 13px; line-height: 1.85; color: #9da5b3; }
.card-meta .sep { color: #5c6373; }
.card-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0 22px 22px;
  font-size: 11px;
  color: #858e9d;
}

.comm-empty {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px dashed var(--hairline-2);
  border-radius: 20px;
  overflow: hidden;
}
.comm-empty .cell { padding: 26px; border-right: 1px solid var(--hairline); }
.comm-empty .cell:last-child { border-right: 0; }
.comm-empty .step {
  display: block;
  margin-bottom: 12px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warm);
}
.comm-empty p { margin: 0; font-size: 13px; line-height: 1.9; color: #9da5b3; }

/* --------------------------------------------------------------------------
   Q. FAQ
   -------------------------------------------------------------------------- */

.faq-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }
.faq { margin: 0; }

.faq details {
  border-bottom: 1px solid var(--hairline-2);
}
.faq details:first-child { border-top: 1px solid var(--hairline-2); }
.faq summary {
  position: relative;
  padding: 22px 40px 22px 0;
  font-size: 15px;
  font-weight: 500;
  color: #e7e9ee;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { position: absolute; right: 6px; top: 22px; }
.faq summary .pm::after {
  content: "+";
  display: block;
  color: #8ca6ff;
  font-size: 17px;
  line-height: 1;
}
.faq details[open] summary .pm::after { content: "−"; }
.faq .ans { padding: 0 30px 24px 0; }
.faq .ans p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.95; color: #9da5b3; }
.faq .ans p:last-child { margin-bottom: 0; }
.faq .ans strong { color: #e7e9ee; font-weight: 550; }
.faq .ans code { font-size: 11.5px; }

/* --------------------------------------------------------------------------
   R. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding: 56px 0 72px;
  border-top: 1px solid var(--hairline-2);
}
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 35px;
}
.foot-brand .brand { font-size: 22px; }
.foot-domain {
  margin: 16px 0 0;
  font: 13px/1.4 var(--mono);
  letter-spacing: 0.04em;
}
.foot-domain a { color: var(--warm); border-bottom: 1px solid transparent; }
.foot-domain a:hover { border-bottom-color: currentColor; }
.foot-brand p {
  margin: 15px 0 0;
  max-width: 340px;
  font-size: 12.5px;
  line-height: 1.9;
  color: #858e9d;
}
.foot-col h4 {
  margin: 4px 0 15px;
  font-size: 13px;
  font-weight: 500;
  color: #f5f6f8;
}
.foot-col ul { margin: 0; padding: 0; list-style: none; }
.foot-col a {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  color: #a5afbf;
}
.foot-col a:hover { color: var(--warm); }
.foot-base {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 38px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 11px;
  color: #778292;
}
.foot-base .legal { display: flex; gap: 16px; }
.foot-base a:hover { color: var(--warm); }

/* --------------------------------------------------------------------------
   S. Lightbox — the demo frames are the one thing worth enlarging
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  place-items: center;
  padding: 34px;
  border: 0;
  background: #08090cd9;
  backdrop-filter: blur(10px);
}
.lightbox.is-open { display: grid; }
.lightbox img {
  max-width: min(420px, 90vw);
  max-height: 82svh;
  border-radius: 14px;
  background: #111017;
}
.lightbox figcaption {
  margin-top: 16px;
  text-align: center;
  font-size: 12.5px;
  color: #b8c4d4;
}
.lightbox button {
  position: absolute;
  right: 20px;
  top: 18px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--hairline-2);
  border-radius: 50%;
  background: #17191e;
  color: #e7e9ee;
  font-size: 19px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   T. Reveal on scroll

   The hidden state lives under .is-anim, which the script adds to <html> once
   it has confirmed it can reveal things again. That indirection is the whole
   safety story: if the script is blocked, errors or is simply slow, no rule
   here has ever hidden anything and the page is complete as served. A design
   that hides content in CSS and unhides it in JS has one failure mode with no
   recoverable version, and this is not that design.

   Only opacity and a short translate. Under prefers-reduced-motion the rules
   are dropped entirely rather than shortened — see the motion block below.
   -------------------------------------------------------------------------- */

.is-anim .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

.is-anim [data-reveal="wipe"] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.78s var(--ease), opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal="wipe"].is-in { clip-path: inset(0 0 0 0); }

/* --------------------------------------------------------------------------
   U. Responsive
   -------------------------------------------------------------------------- */

/* Under the cap the hero stops being centred by its max-width and takes the same
   gutter the sections do, so the column stays one column all the way down. */
@media (max-width: 1120px) {
  .nav-links { display: none; }
  .site-header.is-open .nav-links {
    display: grid;
    position: absolute;
    top: 88px;
    left: 0;
    right: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 16px 24px;
    background: #121316;
    border-bottom: 1px solid var(--hairline-2);
  }
  .nav-links.is-open a { padding: 12px; font-size: 14px; }
  .nav-toggle { display: grid; place-items: center; }

  .hero-grid { gap: 30px; padding: 38px 30px 30px; }
  .hero .lede, .hero .meta { max-width: 100%; }
  .verify { gap: 34px; }
  .faq-layout { gap: 34px; }
  .foot-grid { grid-template-columns: 2fr 1fr 1fr; }
}

@media (max-width: 950px) {
  section, .band { padding: 72px 0; }
  .band-sm { padding: 60px 0 52px; }
  .quote-band { padding: 72px 0; }

  .hero-grid { grid-template-columns: 1fr; padding: 30px 26px 26px; min-height: 0; gap: 22px; margin-inline: var(--gutter); }
  .phone { margin-top: 22px; }
  .hero-grid::before { inset: -30px -180px -140px; background-size: 160% 110%; background-position: 48% 55%; transform: rotate(-12deg); }

  .section-head { display: block; }
  .section-head > p, .section-head .aside { flex: none; margin-top: 14px; max-width: 100%; }

  .proof-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px; padding: 0 0 14px; }
  .proof-shot { flex: 0 0 72%; scroll-snap-align: start; }
  .scene-list { grid-template-columns: 1fr; }
  .scene { border-right: 0; }
  .scene:last-child { border-bottom: 0; }
  .proof-hint { display: block; margin: 6px 0 0; font-size: 11px; color: #818d9e; }

  .verify, .reference-work, .lab, .install-layout, .faq-layout { grid-template-columns: 1fr; gap: 24px; }
  .reference-work { padding: 24px 22px; }
  .lab-stage { min-height: 260px; }
  .comm-grid { grid-template-columns: 1fr 1fr; }
  .comm-empty { grid-template-columns: 1fr; }
  .comm-empty .cell { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .comm-empty .cell:last-child { border-bottom: 0; }

  .why-grid, .difference-cards { grid-template-columns: 1fr 1fr; }
  .why:nth-child(n) { border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
  .why:nth-child(2n) { border-right: 0; }
  .why:nth-last-child(-n + 2) { border-bottom: 0; }

  .paths { grid-template-columns: 1fr; }
  .path { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .path:last-child { border-bottom: 0; }

  .community-top { grid-template-columns: 46px 1fr; padding: 24px 26px; margin-inline: var(--gutter); }
  .community-top > .btn { grid-column: 1 / -1; justify-self: start; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 650px) {
  .wrap { padding: 0 20px; }
  .phone { --w: 300px; }

  /* The header at this width has four things to fit in 360px: the lockup, the
     language switch, the primary button and the menu. Left alone they sum to about
     430px, and because every one of them shrinks, what gives is the inside of each
     control - "中文" broke across two lines and "Get Andee" wrapped. Nothing here
     shrinks now and each one is smaller: a 34px mark, 21px name, a tighter pill and
     a tighter button, which comes to about 320px with room to spare. */
  .site-header .nav { height: 72px; gap: 12px; }
  .brand { font-size: 21px; gap: 8px; letter-spacing: -0.5px; }
  .brand img,
  .brand .mark { width: 40px; height: 40px; }
  .brand-text small { font-size: 8.5px; letter-spacing: 0.08em; }
  .brand, .brand-text, .nav-tools, .nav-tools .btn, .lang { flex: none; }
  .lang { font-size: 11px; padding: 2px; }
  .lang a { padding: 4px 9px; white-space: nowrap; }
  .nav-tools .btn { white-space: nowrap; }
  .nav-toggle { width: 38px; height: 38px; }

  .nav-tools { gap: 10px; }
  .nav-tools .btn-ghost { display: none; }
  .nav-tools .btn { padding: 9px 14px; font-size: 12.5px; }
  .hero-grid { padding: 24px 20px 20px; border-radius: 24px; margin-inline: var(--gutter); }
  .community-top { padding: 22px 20px; margin-inline: var(--gutter); }
  .hero h1 { font-size: 32px; letter-spacing: -1px; }
  /* The deliberate break after the comma cannot hold at this width - the first
     half alone is wider than the column - and forcing it leaves a two-character
     orphan ("机，"). Let the line break where it wants instead. */
  .hero h1 br { display: none; }
  .phone { width: 228px; }
  .hero-facts > span { font-size: 11px; }
  h2 { font-size: 27px; }
  .eyebrow .n { font-size: 23px; }

  .proof-shot { flex: 0 0 86%; }
  .why-grid, .difference-cards { grid-template-columns: 1fr; }
  .why:nth-child(n) { border-right: 0; }
  .why:last-child { border-bottom: 0; }
  .lab-looks, .role-picker { gap: 6px; }
  .look { padding: 6px 3px; font-size: 10px; }
  .comm-grid { grid-template-columns: 1fr; }
  .downloadbox { flex-direction: column; align-items: flex-start; }
  .downloadbox img { width: 80px; height: 80px; }
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
  .foot-base { display: block; }
}

@media (max-width: 430px) {
  /* Below this the language switch is the thing that has to give: it is in the
     footer on both pages, and `hreflang` is what a search engine reads. */
  .lang { display: none; }
}

/* --------------------------------------------------------------------------
   V. Print, and the two motion preferences

   Print is not an afterthought here: the FAQ, the privacy list and the
   disclaimer are the parts of this page people actually take away. Everything
   that was hidden until it scrolled into view is released, and everything
   that only exists to move is dropped.
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .lightbox,
  .ball-hero,
  .hero-facts,
  .nav-toggle { display: none !important; }

  body { background: #fff; color: #111; font-size: 11pt; }

  .hero, .card, .scene, .checks li, .path, .why, .reference-work {
    background: none !important;
    border: 1px solid #bbb !important;
    box-shadow: none !important;
    color: #111;
  }

  .reveal, [data-reveal="wipe"] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .lab-stage { background: none !important; min-height: 0; }
  #lab-ball { display: none; }
  .ball-static { display: block !important; width: 120px; margin: 0; }

  .icon .d, .icon .f { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; fill-opacity: 1 !important; }

  footer { padding-bottom: 0; }
  .faq details { border-color: #ddd; }
  .faq .ans { display: block !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Released, not shortened: an element that fades in over 1ms is a flicker. */
  .is-anim .reveal { opacity: 1; transform: none; }
  .is-anim [data-reveal="wipe"] { clip-path: none; }
  .caret::after { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header { background: #0d0d0d; backdrop-filter: none; }
  .lightbox { backdrop-filter: none; }
}