.noscript-banner{position:relative;z-index:60;margin:16px;padding:16px 18px;border-radius:14px;background:#1C1A19;color:#F5F1EE;font:15px/1.5 system-ui,-apple-system,sans-serif;border:1px solid rgba(232,32,46,.5)}
  .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
  *,*::before,*::after{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
  :root{padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px);}
  body{margin:0;}
  img{max-width:100%;}
  [hidden]{display:none !important;}

  :root{
    color-scheme: dark;
    --void:#0A080D;
    --plum:#15101A;
    --plum-2:#1F1826;
    --plum-3:#2A2132;
    --mauve:#B99BB8;
    --mauve-hi:#D6BFD5;
    --haze:#7E6884;
    --lilac:#EEE5EF;
    --muted:#A296A6;
    --line:rgba(var(--ac-rgb),.18);
    --line-hi:rgba(var(--ac-rgb),.38);
    --m-interest:#E6A4B8;
    --m-calm:#B99BB8;
    --m-bored:#8E9AB6;
    --m-alert:#D9A36C;
    --display:"Cormorant Garamond", "Iowan Old Style", Georgia, serif;
    --body:"Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --on-ac:#1A1220; --btn-bg:linear-gradient(135deg, #D6BFD5, #A987AA); --ac-rgb:185,155,184;
    --phone-bg:linear-gradient(180deg, rgba(31,24,38,.92), rgba(21,16,26,.96));
    --ava-bg:radial-gradient(circle at 30% 30%, #F2D3DE, #B99BB8 60%, #6E5876);
    --me-bg:linear-gradient(135deg, #7A6081, #5A4662); --me-tx:#EEE5EF;
    --tick-dim:rgba(238,229,239,.42); --tick-read:#FFFFFF; --scrim:rgba(8,6,11,.66);
    --em-style:italic;
    --r-lg:22px; --r-md:14px; --r-sm:10px;
  }
  [hidden]{display:none !important;}
  html,body{background:var(--void);}
  body{
    color:var(--lilac);
    font-family:var(--body);
    font-size:16px; line-height:1.55;
    padding-inline:16px;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  #mist{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}
  body::after{
    content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.09; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }
  .wrap{position:relative; z-index:2; max-width:440px; margin:0 auto; display:flex; flex-direction:column; gap:72px; padding-block:28px 40px;}

  /* HERO */
  .hero{display:flex; flex-direction:column; gap:22px; padding-top:12px;}
  .brand{display:flex; align-items:center; justify-content:space-between;}
  .wordmark{font-family:var(--display); font-weight:600; font-size:22px; letter-spacing:.42em; color:var(--mauve-hi);}
  .badge{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:99px; padding:5px 10px;}
  h1{
    font-family:var(--display); font-weight:500; font-size:clamp(46px, 13vw, 60px); line-height:.98; letter-spacing:-.01em;
    margin:28px 0 0; text-wrap:balance;
  }
  h1 em{font-style:italic; color:var(--mauve); display:block;}

  .h-wrap{all:unset; display:flex; flex-direction:column; gap:14px; margin-top:24px; cursor:pointer;}
  .h-wrap:focus-visible{outline:2px solid var(--mauve-hi); outline-offset:6px; border-radius:8px;}
  .h-eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--haze); text-decoration:line-through; text-decoration-color:var(--mauve);}
  .h1{font-family:var(--display); font-weight:500; font-size:clamp(40px, 11.5vw, 54px); line-height:1; letter-spacing:-.01em; text-wrap:balance; display:block; transition:opacity .25s;}
  .h1 em{font-style:italic; color:var(--mauve); display:block; margin-top:6px;}
  .h1.fade{opacity:0;}
  .proto-tag{font-family:var(--mono); font-size:10.5px; color:var(--haze); border:1px dashed var(--line); border-radius:99px; padding:4px 10px; align-self:flex-start;}
  .lede{color:var(--muted); font-size:16.5px; max-width:36ch; margin:0;}
  .lede b{color:var(--lilac); font-weight:500;}
  .ctas{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
  .btn{
    font:600 16px/1 var(--body); border:0; cursor:pointer; border-radius:99px; padding:18px 22px; width:100%;
    background:var(--btn-bg); color:var(--on-ac);
    box-shadow:0 10px 40px -10px rgba(var(--ac-rgb),.55);
    transition:transform .15s ease, box-shadow .2s ease;
  }
  .btn:active{transform:translateY(0);}
  .ghost{
    font:500 14px/1.3 var(--body); background:none; border:1px dashed var(--line-hi); color:var(--muted);
    border-radius:99px; padding:13px 18px; cursor:pointer; width:100%; transition:color .2s, border-color .2s;
  }
  .ghost.joke{border-style:solid; color:var(--mauve-hi);}
  button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible{outline:2px solid var(--mauve-hi); outline-offset:3px;}
  .meta-row{display:flex; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:11.5px; color:var(--haze); letter-spacing:.04em;}

  /* SECTION HEAD */
  .sec-head{display:flex; flex-direction:column; gap:8px; margin-bottom:18px;}
  .eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--haze); margin:0;}
  h2{font-family:var(--display); font-weight:500; font-size:38px; line-height:1.02; margin:0; text-wrap:balance;}
  h2 em{font-style:italic; color:var(--mauve);}
  .sec-sub{color:var(--muted); margin:0; font-size:15px;}

  /* ROLES */
  .roles{display:flex; gap:8px; margin-bottom:12px;}
  .role{
    flex:1; background:var(--plum); border:1px solid var(--line); color:var(--muted); border-radius:var(--r-md);
    padding:10px 8px; cursor:pointer; font:500 14px/1.2 var(--body); display:flex; flex-direction:column; gap:3px; align-items:flex-start; text-align:left;
  }
  .role small{font-size:11px; color:var(--haze); font-weight:400;}
  .role[aria-pressed="true"]{border-color:var(--mauve); color:var(--lilac); background:var(--plum-2);}
  .role[aria-pressed="true"] small{color:var(--mauve);}

  /* PHONE */
  .phone{background:var(--phone-bg); border:1px solid var(--line); border-radius:28px; overflow:hidden; backdrop-filter:blur(6px);}
  .p-top{display:flex; flex-direction:column; gap:12px; padding:16px 16px 14px; border-bottom:1px solid var(--line);}
  .who{display:flex; align-items:center; gap:12px;}
  .ava{width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--display); font-size:20px; color:var(--on-ac);
       background:var(--ava-bg);}
  .who-t{display:flex; flex-direction:column; gap:1px; min-width:0;}
  .who-name{font-weight:600; font-size:15px;}
  .who-sub{font-size:12px; color:var(--muted);}
  .mood{display:flex; flex-direction:column; gap:8px; background:var(--plum); border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px;}
  .mood-row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .mood-l{display:flex; align-items:center; gap:8px; font-size:13px;}
  .mood-dot{width:8px; height:8px; border-radius:50%; background:var(--mc, var(--m-calm)); box-shadow:0 0 12px var(--mc, var(--m-calm)); transition:background .6s, box-shadow .6s;}
  .mood-l .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--haze);}
  .mood-l .v{font-weight:600; color:var(--mc, var(--m-calm)); transition:color .6s;}
  .why-btn{font:500 12px/1 var(--body); color:var(--mauve-hi); background:none; border:1px solid var(--line-hi); border-radius:99px; padding:6px 10px; cursor:pointer;}
  .why-btn[disabled]{opacity:.35; cursor:default;}
  .bar{height:4px; border-radius:4px; background:var(--plum-3); overflow:hidden;}
  .bar i{display:block; height:100%; width:58%; border-radius:4px; background:linear-gradient(90deg, var(--haze), var(--mc, var(--m-calm))); transition:width .8s cubic-bezier(.2,.8,.2,1), background .6s;}
  .why{font-size:12.5px; color:var(--muted); display:flex; flex-direction:column; gap:4px; border-top:1px solid var(--line); padding-top:8px;}
  .why li{list-style:none; display:flex; gap:8px;}
  .why li::before{content:"·"; color:var(--mauve);}
  .why ul{margin:0; padding:0; display:flex; flex-direction:column; gap:3px;}
  .why .src{font-family:var(--mono); font-size:10px; color:var(--haze); letter-spacing:.06em;}

  .chat{display:flex; flex-direction:column; gap:8px; padding:16px; min-height:260px;}
  .ctx{align-self:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--haze); border:1px solid var(--line); border-radius:99px; padding:5px 10px; margin-bottom:6px;}
  .msg{max-width:82%; padding:10px 13px; border-radius:18px; font-size:14.5px; line-height:1.42; animation:pop .35s ease both;}
  .msg.her{align-self:flex-start; background:var(--plum-3); border-bottom-left-radius:6px;}
  .msg.me{align-self:flex-end; background:var(--me-bg); color:var(--me-tx); border-bottom-right-radius:6px;}
  .typing{align-self:flex-start; background:var(--plum-3); border-radius:18px; padding:12px 14px; display:flex; gap:4px;}
  .typing span{width:6px; height:6px; border-radius:50%; background:var(--muted); animation:blink 1.1s infinite;}
  .typing span:nth-child(2){animation-delay:.18s} .typing span:nth-child(3){animation-delay:.36s}

  .kisu{margin:4px 16px 0; padding:12px 14px; border-radius:var(--r-md); border:1px solid var(--line-hi);
        background:linear-gradient(135deg, rgba(var(--ac-rgb),.14), rgba(126,104,132,.06)); display:flex; flex-direction:column; gap:6px; animation:pop .4s ease both;}
  .kisu .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mauve);}
  .kisu p{margin:0; font-size:14px;}
  .kisu .tone{font-size:12.5px; color:var(--muted);}

  .opts{display:flex; flex-direction:column; gap:8px; padding:12px 16px 16px;}
  .opts-l{font-size:11.5px; color:var(--haze); font-family:var(--mono); letter-spacing:.04em;}
  .opt{text-align:left; background:var(--plum); color:var(--lilac); border:1px solid var(--line); border-radius:var(--r-md); padding:11px 13px; font:400 14px/1.42 var(--body); cursor:pointer; transition:border-color .2s, background .2s; animation:pop .35s ease both;}
  @media (hover:hover){
    .btn:hover{transform:translateY(-1px); box-shadow:0 14px 48px -10px rgba(var(--ac-rgb),.7);}
    .ghost:hover{color:var(--lilac); border-color:var(--mauve);}
    .opt:hover{border-color:var(--mauve); background:var(--plum-2);}
  }


  .msg.cont{margin-top:-5px;}
  .msg.her.cont{border-top-left-radius:6px;}
  .msg.me.cont{border-top-right-radius:6px;}
  .msg.photo{width:150px; height:190px; padding:0; display:flex; align-items:flex-end; overflow:hidden;
    background:radial-gradient(circle at 50% 40%, #FFFFFF 0 22%, #EDE6EA 23% 34%, transparent 35%), linear-gradient(160deg, #9FB7C9, #5F7486 70%, #3E4A57);}
  .msg.photo span{font-family:var(--mono); font-size:10.5px; color:#fff; background:rgba(0,0,0,.35); padding:4px 8px; margin:8px; border-radius:99px;}
  .opt{display:flex; flex-direction:column; gap:2px;}
  .opt span + span::before{content:"";}

  .phone{position:relative;}
  .goal{align-self:flex-start; font-size:11.5px; font-weight:500; color:var(--on-ac); background:var(--mauve); border-radius:99px; padding:3px 9px; margin-top:3px;}
  .tags{display:flex; flex-wrap:wrap; gap:6px;}
  .tags span{font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:99px; padding:4px 9px;}
  .modes{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
  .modes-l{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--haze); margin-right:2px;}
  .mode{font:500 12.5px/1 var(--body); color:var(--muted); background:var(--plum); border:1px solid var(--line); border-radius:99px; padding:7px 11px; cursor:pointer;}
  .mode[aria-pressed="true"]{color:var(--on-ac); background:var(--mauve-hi); border-color:var(--mauve-hi);}
  .msg{display:flex; flex-direction:column; gap:2px; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; cursor:pointer; transition:transform .2s;}
  .msg time{font-family:var(--mono); font-size:9.5px; opacity:.55; align-self:flex-end; line-height:1;}
  .msg.pressing{transform:scale(.96);}
  .msg.photo{display:flex; flex-direction:column; justify-content:space-between;}
  .msg.photo .ph{font-family:var(--mono); font-size:10.5px; color:#fff; background:rgba(0,0,0,.35); padding:4px 8px; margin:8px; border-radius:99px; align-self:flex-start;}
  .msg.photo time{color:#fff; margin:0 10px 8px;}
  .coach{margin:0 16px 4px; align-self:center; font:400 12.5px/1.3 var(--body); color:var(--mauve-hi); background:rgba(var(--ac-rgb),.08); border:1px dashed var(--line-hi); border-radius:99px; padding:8px 14px; cursor:pointer; animation:pulse 2.2s ease-in-out infinite;}
  .coach b{font-weight:600;}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--ac-rgb),.0)} 50%{box-shadow:0 0 0 6px rgba(var(--ac-rgb),.12)}}
  .sheet-back{position:absolute; inset:0; background:var(--scrim); backdrop-filter:blur(3px); display:flex; align-items:flex-end; z-index:5;}
  .sheet{width:100%; background:var(--plum-2); border-top:1px solid var(--line-hi); border-radius:22px 22px 0 0; padding:16px; display:flex; flex-direction:column; gap:12px; animation:pop .25s ease both; max-height:88%; overflow:auto;}
  .sheet-q{font-size:14px; padding:10px 13px; border-radius:16px; max-width:85%; background:var(--plum-3);}
  .sheet-q.me{align-self:flex-end; background:var(--me-bg); color:var(--me-tx);}
  .acts-list{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;}
  .act{font:400 15px/1.2 var(--body); color:var(--lilac); background:var(--plum); border:0; border-bottom:1px solid var(--line); padding:13px 14px; text-align:left; cursor:pointer;}
  .act:last-child{border-bottom:0;}
  .kisu-act{display:flex; justify-content:space-between; align-items:center; color:var(--mauve-hi); font-weight:600; background:linear-gradient(135deg, rgba(var(--ac-rgb),.16), rgba(126,104,132,.06));}
  .kisu-act small{font-family:var(--mono); font-size:10.5px; color:var(--haze); font-weight:400;}
  .an{display:flex; flex-direction:column; gap:12px;}
  .an-b{display:flex; flex-direction:column; gap:5px;}
  .an-h{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mauve);}
  .an-b p{margin:0; font-size:14px;}
  .an-b ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:3px; font-size:13.5px; color:var(--muted);}
  .an-b li::before{content:"· "; color:var(--mauve);}

  .who{align-items:flex-start;}
  .who-t{flex:1;}
  .side{display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:none;}
  .mood-pill{display:flex; align-items:center; gap:6px; position:relative; overflow:hidden; font:600 12px/1 var(--body); color:var(--mc, var(--m-calm)); background:var(--plum); border:1px solid var(--line); border-radius:99px; padding:7px 10px 9px; cursor:pointer; transition:color .6s;}
  .mood-pill[disabled]{cursor:default;}
  .mood-pill .bar{position:absolute; left:10px; right:10px; bottom:3px; height:2px; border-radius:2px; background:var(--plum-3); overflow:hidden;}
  .mood-pill .bar i{display:block; height:100%; border-radius:2px; background:var(--mc, var(--m-calm)); transition:width .8s cubic-bezier(.2,.8,.2,1), background .6s;}
  .role-wrap{position:relative;}
  .goal{white-space:nowrap;}
  @media (max-width:420px){ .role-btn .rl{display:none;} }
  .role-btn{display:flex; align-items:center; gap:5px; font:500 12px/1 var(--body); color:var(--lilac); background:none; border:1px solid var(--line-hi); border-radius:99px; padding:6px 10px; cursor:pointer;}
  .role-btn .rl{font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--haze);}
  .role-btn::after{content:""; width:5px; height:5px; border-right:1.5px solid var(--mauve); border-bottom:1.5px solid var(--mauve); transform:rotate(45deg) translateY(-2px); margin-left:2px;}
  .role-menu{position:absolute; right:0; top:calc(100% + 6px); z-index:4; display:flex; flex-direction:column; min-width:150px; background:var(--plum-2); border:1px solid var(--line-hi); border-radius:var(--r-md); overflow:hidden; box-shadow:0 12px 30px -10px rgba(0,0,0,.6); animation:pop .2s ease both;}
  .role-menu .mode{display:flex; flex-direction:column; align-items:flex-start; gap:2px; border:0; border-radius:0; border-bottom:1px solid var(--line); background:none; color:var(--lilac); padding:10px 12px; font:500 13.5px/1.1 var(--body); text-align:left;}
  .role-menu .mode:last-child{border-bottom:0;}
  .role-menu .mode small{font-size:11px; color:var(--haze); font-weight:400;}
  .role-menu .mode[aria-pressed="true"]{background:rgba(var(--ac-rgb),.14); color:var(--mauve-hi);}
  .p-top .why{border-top:1px solid var(--line); padding-top:10px;}

  .who{align-items:center;}
  .seg{display:flex; background:var(--plum); border:1px solid var(--line); border-radius:99px; padding:3px; gap:2px;}
  .seg-b{flex:1; font:500 13px/1 var(--body); color:var(--muted); background:none; border:0; border-radius:99px; padding:9px 6px; cursor:pointer;}
  .seg-b[aria-pressed="true"]{background:var(--mauve-hi); color:var(--on-ac);}
  .report{margin:4px 16px 16px; padding:16px; border-radius:var(--r-lg); background:var(--plum); border:1px solid var(--line-hi); display:flex; flex-direction:column; gap:12px; animation:pop .4s ease both;}
  .report h3{margin:0; font-family:var(--display); font-weight:500; font-size:26px;}
  .report ol{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px;}
  .report li{display:grid; grid-template-columns:auto 1fr; gap:10px; font-size:14px;}
  .report .n{font-family:var(--mono); font-size:11px; color:var(--haze); padding-top:3px;}
  .report .tag{font-family:var(--mono); font-size:11px; letter-spacing:.05em;}
  .report .foot{font-size:13px; color:var(--muted); border-top:1px solid var(--line); padding-top:12px; margin:0;}
  .report .acts{display:flex; gap:8px; flex-wrap:wrap;}
  .report .acts .btn{padding:14px 18px; font-size:15px; flex:1 1 180px;}
  .report .acts .ghost{flex:1 1 120px; width:auto;}

  .hint-note{font-size:12px; color:var(--haze); margin:10px 4px 0;}

  /* FORM */
  form{display:flex; flex-direction:column; gap:14px;}
  .field{display:flex; flex-direction:column; gap:6px;}
  .field label, .legend{font-size:13px; color:var(--muted);}
  .row2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  input[type=text], input[type=number], select{
    font:400 16px/1.2 var(--body); color:var(--lilac); background:var(--plum); border:1px solid var(--line);
    border-radius:var(--r-md); padding:13px 14px; width:100%; min-width:0; box-sizing:border-box; appearance:none;
  }
  select{background-image:linear-gradient(45deg, transparent 50%, var(--mauve) 50%), linear-gradient(135deg, var(--mauve) 50%, transparent 50%);
         background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size:5px 5px; background-repeat:no-repeat; padding-right:34px;}
  input::placeholder{color:var(--haze);}
  input:focus, select:focus{border-color:var(--mauve); outline:none;}
  .pains{display:flex; flex-wrap:wrap; gap:8px;}
  .pain{font:400 13.5px/1.2 var(--body); color:var(--muted); background:var(--plum); border:1px solid var(--line); border-radius:99px; padding:9px 13px; cursor:pointer;}
  .pain[aria-pressed="true"]{color:var(--on-ac); background:var(--mauve); border-color:var(--mauve);}
  .check a{color:var(--mauve-hi); text-underline-offset:3px;}
  .demo-intro{
    position:absolute; z-index:6; left:0; right:0; bottom:0;
    display:flex; align-items:flex-end; justify-content:center;
    padding:18px 0 20px;
    background:rgba(0,0,0,.38);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    transition:opacity 200ms ease;
  }
  .demo-intro.is-leaving{opacity:0; pointer-events:none;}
  .demo-card{
    display:flex; flex-direction:column; align-items:stretch; width:calc(100% - 24px); gap:8px;
    margin-inline:auto; padding:16px; text-align:left;
    background:var(--plum); color:var(--lilac);
    border:1px solid var(--line); border-radius:20px;
  }
  .demo-h{margin:0; font-family:var(--display); font-weight:400; font-size:26px; line-height:1.05; letter-spacing:-.02em; color:var(--lilac);}
  :root[data-style="b"] .demo-h{font-weight:800; letter-spacing:-.03em;}
  :root[data-style="c"] .demo-h{font-weight:800; letter-spacing:-.03em;}
  .demo-sub{margin:0 0 8px; font-size:14px; line-height:1.4; color:inherit;}
  .demo-cta{min-height:52px; width:100%; margin-inline:0; position:relative;}
  .demo-cta::after{
    content:""; position:absolute; inset:-3px; border-radius:inherit; pointer-events:none;
    animation:demo-ring 2.4s ease-out infinite;
  }
  @keyframes demo-ring{
    0%{box-shadow:0 0 0 0 rgba(var(--ac-rgb), .55);}
    100%{box-shadow:0 0 0 14px rgba(var(--ac-rgb), 0);}
  }
  @media (prefers-reduced-motion: reduce){
    .demo-intro{transition:none;}
    .demo-cta::after{animation:none;}
  }
  .check{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--muted); cursor:pointer;}
  .check input{accent-color:var(--mauve); width:18px; height:18px; margin-top:1px; flex:none;}
  .err{font-size:13px; color:var(--m-alert); margin:0;}
  .done{display:flex; flex-direction:column; gap:14px; padding:20px; border-radius:var(--r-lg); background:var(--plum); border:1px solid var(--line-hi); animation:pop .4s ease both;}
  .done h3{margin:0; font-family:var(--display); font-weight:500; font-size:32px; line-height:1;}
  .pos{font-family:var(--mono); font-size:13px; color:var(--mauve-hi);}
  .ref{display:flex; gap:8px;}
  .ref input{font-family:var(--mono); font-size:13px;}
  .ref button{flex:none; font:500 13px/1 var(--body); border-radius:var(--r-md); border:1px solid var(--line-hi); background:var(--plum-2); color:var(--lilac); padding:0 14px; cursor:pointer;}
  .done p{margin:0; font-size:14px; color:var(--muted);}

  footer{display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--haze); border-top:1px solid var(--line); padding-top:18px;}
  footer .proto{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;}

  @keyframes pop{from{opacity:.0; transform:translateY(6px)} to{opacity:1; transform:none}}
  @keyframes blink{0%,80%,100%{opacity:.25} 40%{opacity:1}}
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
  }

  .phone{display:flex; flex-direction:column; height:clamp(540px, calc(100svh - 110px), 700px);}
  .p-top{flex:none;}
  .chat{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
        -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 18px); mask-image:linear-gradient(to bottom, transparent 0, #000 18px);}
  .chat::-webkit-scrollbar{display:none;}
  .chat > :first-child{margin-top:auto;}
  .coach, .opts{flex:none;}
  .chat .report{margin:10px 0 0; flex:none;}

  .p-top{position:relative;}
  .p-top .side{position:absolute; top:18px; right:16px;}
  .who-name{padding-right:130px;}

  .msg{display:block; position:relative;}
  .msg .tx{white-space:pre-wrap;}
  .msg .sp{display:inline-block; width:34px; height:1px;}
  .msg.me .sp{width:52px;}
  .msg .meta{position:absolute; right:10px; bottom:6px; display:flex; align-items:center; gap:3px; line-height:1;}
  .msg .meta time{font-family:var(--mono); font-size:9.5px; opacity:.38; align-self:auto;}
  .msg.me{background:var(--me-bg); color:var(--me-tx);}
  .sheet-q.me{background:var(--me-bg); color:var(--me-tx);}
  .ticks{width:16px; height:9px; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; stroke:var(--tick-dim); transition:stroke .3s;}
  .msg.me[data-status="sent"] .t2{display:none;}
  .msg.me[data-status="read"] .ticks{stroke:var(--tick-read);}
  .msg.photo .meta{right:10px; bottom:8px;}
  .msg.photo .meta time{opacity:.85; color:#fff;}

  :root[data-style="b"]{
    color-scheme:light;
    --void:#F5F2F7; --plum:#FFFFFF; --plum-2:#FFFFFF; --plum-3:#EFEBF3;
    --mauve:#E0365E; --mauve-hi:#C8264D; --haze:#8A83A0; --lilac:#1C1633; --muted:#5F5876;
    --line:#E4DEEA; --line-hi:#CFC6DA;
    --m-interest:#E0365E; --m-calm:#7A6CF0; --m-bored:#8C93A8; --m-alert:#E67A12;
    --on-ac:#FFFFFF; --btn-bg:#E0365E; --ac-rgb:224,54,94;
    --phone-bg:#FFFFFF; --ava-bg:linear-gradient(135deg, #FFB3C3, #E0365E);
    --me-bg:#1C1633; --me-tx:#FFFFFF; --tick-dim:rgba(255,255,255,.45); --tick-read:#FF8FA8; --scrim:rgba(28,22,51,.35);
    --display:"Unbounded", "Arial Black", system-ui, sans-serif; --body:"Manrope", system-ui, -apple-system, sans-serif;
    --em-style:normal;
  }
  :root[data-style="c"]{
    color-scheme:dark;
    --void:#140A0E; --plum:#1F1116; --plum-2:#2A171E; --plum-3:#301B22;
    --mauve:#F0A35E; --mauve-hi:#F6C08A; --haze:#9C7F78; --lilac:#F6E9E1; --muted:#B39A92;
    --line:rgba(240,163,94,.16); --line-hi:rgba(240,163,94,.38);
    --m-interest:#F08A8F; --m-calm:#F0A35E; --m-bored:#9E8FA0; --m-alert:#E0B04A;
    --on-ac:#20100A; --btn-bg:linear-gradient(135deg, #F6C08A, #E98A4F); --ac-rgb:240,163,94;
    --phone-bg:linear-gradient(180deg, rgba(42,23,30,.94), rgba(31,17,22,.97));
    --ava-bg:radial-gradient(circle at 30% 30%, #FFD9B8, #E98A4F 60%, #8E3A48);
    --me-bg:linear-gradient(135deg, #8E3A48, #6B2A36); --me-tx:#FBEDE6; --tick-dim:rgba(251,237,230,.42); --tick-read:#FFFFFF; --scrim:rgba(12,5,8,.66);
    --display:"Prata", Georgia, serif; --body:"Golos Text", system-ui, -apple-system, sans-serif;
    --em-style:normal;
  }
  .h1 em, h1 em, h2 em{font-style:var(--em-style);}
  :root[data-style="b"] .h1{font-size:clamp(30px, 8.4vw, 40px); line-height:1.08; letter-spacing:-.02em; font-weight:700;}
  :root[data-style="b"] h2{font-size:28px; font-weight:700; letter-spacing:-.02em;}
  :root[data-style="b"] .wordmark{letter-spacing:.18em; font-weight:700;}
  :root[data-style="b"] body::after{opacity:.04;}
  :root[data-style="c"] .h1{font-size:clamp(34px, 9.6vw, 46px); line-height:1.08;}
  :root[data-style="c"] h2{font-size:32px;}
  .ava{color:var(--on-ac);}

  .styler{position:fixed; bottom:calc(env(safe-area-inset-bottom, 0px) + 14px); right:12px; z-index:50; display:flex; gap:4px; padding:4px;
    background:color-mix(in srgb, var(--plum-2) 88%, transparent); border:1px solid var(--line-hi); border-radius:99px; backdrop-filter:blur(8px);
    box-shadow:0 8px 24px -12px rgba(0,0,0,.5);}
  .styler button{display:flex; align-items:center; gap:6px; border:0; background:none; cursor:pointer; border-radius:99px; padding:6px 10px 6px 6px;
    font:600 12px/1 var(--mono); color:var(--muted);}
  .styler button i{width:16px; height:16px; border-radius:50%; background:var(--sw); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);}
  .styler button[aria-pressed="true"]{background:var(--plum-3); color:var(--lilac);}
  .styler .nm{display:none;}
  .styler button[aria-pressed="true"] .nm{display:inline;}

  .gate{position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; padding:24px 16px;
    background:color-mix(in srgb, var(--void) 82%, transparent); backdrop-filter:blur(14px);}
  .gate-in{width:100%; max-width:400px; display:flex; flex-direction:column; gap:16px; animation:pop .35s ease both;}
  .gate .wordmark{font-size:18px;}
  .gate h2{font-size:44px; line-height:1;}
  .gate h2 em{display:block; color:var(--mauve);}
  :root[data-style="b"] .gate h2{font-size:32px;}
  .gate-sub{margin:0; color:var(--muted); min-height:1.6em;}
  .gate-opts{display:flex; flex-direction:column; gap:10px;}
  .gate-opts button{display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:left; cursor:pointer;
    font:600 18px/1.2 var(--body); color:var(--lilac); background:var(--plum-2); border:1px solid var(--line-hi); border-radius:var(--r-md); padding:18px 18px;
    transition:border-color .2s, transform .15s;}
  .gate-opts button:hover{border-color:var(--mauve); transform:translateY(-1px);}
  .gate-opts button small{font:400 12.5px/1.2 var(--body); color:var(--haze); text-align:right;}
  .gate-opts .g-dog{border-style:dashed;}
  .gate.dogged .g-dog{display:none;}
  .gate-skip{align-self:center; background:none; border:0; color:var(--haze); font:400 13px/1 var(--body); text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:8px;}
  .st-sep{width:1px; align-self:stretch; margin:4px 2px; background:var(--line-hi);}
  .styler .g-btn{padding:6px 11px; font:600 12px/1 var(--mono); color:var(--lilac);}

  /* ---- desktop: hero + form слева, живое демо справа ---- */
  @media (min-width:1024px){
    .wrap{max-width:1120px; display:grid; grid-template-columns:minmax(0,1fr) 430px; column-gap:72px; row-gap:72px; align-items:start; padding-block:40px 56px;}
    .hero{grid-column:1; grid-row:1; padding-top:32px; max-width:560px;}
    #join{grid-column:1; grid-row:2; max-width:520px;}
    footer{grid-column:1 / -1; grid-row:3;}
    #talk{grid-column:2; grid-row:1 / span 2; position:sticky; top:24px;}
    #talk .phone{height:clamp(520px, calc(100vh - 230px), 700px);}
    .h1{font-size:clamp(56px, 5.4vw, 76px);}
    :root[data-style="b"] .h1{font-size:clamp(40px, 3.8vw, 52px);}
    :root[data-style="c"] .h1{font-size:clamp(50px, 4.8vw, 64px);}
    .lede{font-size:18px; max-width:44ch;}
    .ctas{flex-direction:row; max-width:520px;}
    .ctas .btn, .ctas .ghost{width:auto; flex:1;}
    .gate h2{font-size:56px;}
  }

  /* ===== v3 themes: A Помада (default) · B Жвачка · C Классика ===== */
  :root{
    color-scheme:dark;
    --void:#0B0B0B; --plum:#161414; --plum-2:#1C1A19; --plum-3:#262321;
    --mauve:#E8202E; --mauve-hi:#FF5A63; --haze:#8F8985; --lilac:#F5F1EE; --muted:#AAA49F;
    --ac-rgb:232,32,46; --line:rgba(245,241,238,.12); --line-hi:rgba(245,241,238,.26);
    --m-interest:#FF4A55; --m-calm:#F3C7C0; --m-bored:#8E9AB6; --m-alert:#F2A33A;
    --display:"Dela Gothic One", "Arial Black", system-ui, sans-serif; --body:"Onest", system-ui, -apple-system, sans-serif;
    --on-ac:#FFFFFF; --btn-bg:#E8202E; --phone-bg:#121010;
    --ava-bg:radial-gradient(circle at 35% 30%, #8A625C, #2A1C1B);
    --me-bg:#E8202E; --me-tx:#FFFFFF; --tick-dim:rgba(255,255,255,.5); --tick-read:#FFFFFF; --scrim:rgba(0,0,0,.72);
    --em-style:normal;
  }
  :root[data-style="b"]{
    color-scheme:light;
    --void:#FFE3EE; --plum:#FFFFFF; --plum-2:#FFFFFF; --plum-3:#FFFFFF;
    --mauve:#FF2E7E; --mauve-hi:#C8125C; --haze:#7A6A80; --lilac:#1A1220; --muted:#5A4A60;
    --ac-rgb:255,46,126; --line:rgba(26,18,32,.55); --line-hi:#1A1220;
    --m-interest:#FF2E7E; --m-calm:#6A5CE0; --m-bored:#6B7A99; --m-alert:#D96C00;
    --display:"Unbounded", "Arial Black", sans-serif; --body:"Manrope", system-ui, sans-serif;
    --on-ac:#FFFFFF; --btn-bg:#FF2E7E; --phone-bg:#FFFFFF;
    --ava-bg:radial-gradient(circle at 35% 30%, #FFB3CF, #D94A86);
    --me-bg:#FF2E7E; --me-tx:#FFFFFF; --tick-dim:rgba(255,255,255,.6); --tick-read:#FFFFFF; --scrim:rgba(26,18,32,.35);
    --em-style:normal;
  }
  :root[data-style="c"]{
    color-scheme:light;
    --void:#FFFFFF; --plum:#F6F6F8; --plum-2:#FFFFFF; --plum-3:#EFEFF2;
    --mauve:#E52F45; --mauve-hi:#C8263A; --haze:#8A8A94; --lilac:#16161A; --muted:#6E6E78;
    --ac-rgb:229,47,69; --line:#E6E6EA; --line-hi:#D2D2D8;
    --m-interest:#E52F45; --m-calm:#6C63D9; --m-bored:#7D869B; --m-alert:#C96A00;
    --display:"Onest", system-ui, sans-serif; --body:"Onest", system-ui, sans-serif;
    --on-ac:#FFFFFF; --btn-bg:#E52F45; --phone-bg:#FFFFFF;
    --ava-bg:linear-gradient(160deg, #E9D6D2, #A07A74);
    --me-bg:#E52F45; --me-tx:#FFFFFF; --tick-dim:rgba(255,255,255,.6); --tick-read:#FFFFFF; --scrim:rgba(22,22,26,.3);
    --em-style:normal;
  }
  .h1 em, h1 em, h2 em{font-style:normal;}
  /* A · Помада */
  .wordmark{letter-spacing:.02em; color:var(--mauve); font-size:26px; font-weight:400;}
  .h1{font-weight:400; font-size:clamp(34px, 9.6vw, 44px); line-height:1.02; letter-spacing:-.02em; text-transform:uppercase;}
  .gate h2, h2{font-weight:400; letter-spacing:-.02em;}
  h2{font-size:30px;}
  .btn{border-radius:99px;}
  :root:not([data-style]) .btn, :root[data-style="a"] .btn{box-shadow:0 14px 34px -12px rgba(232,32,46,.7);}
  /* B · Жвачка */
  :root[data-style="b"] .wordmark{letter-spacing:-.04em; font-weight:900; text-transform:lowercase;}
  :root[data-style="b"] .h1{font-weight:800; font-size:clamp(30px, 8.4vw, 40px); line-height:1.06; letter-spacing:-.03em; text-transform:none;}
  :root[data-style="b"] h2, :root[data-style="b"] .gate h2{font-weight:800; font-size:28px; letter-spacing:-.03em;}
  :root[data-style="b"] body::after{opacity:0;}
  :root[data-style="b"] .btn{border:3px solid #1A1220; border-radius:22px; box-shadow:4px 4px 0 #1A1220;}
  :root[data-style="b"] .ghost{border:2.5px dashed #1A1220; border-radius:22px; color:#1A1220;}
  :root[data-style="b"] .phone{border:3px solid #1A1220; box-shadow:6px 6px 0 #1A1220;}
  :root[data-style="b"] .msg{border:2px solid #1A1220;}
  :root[data-style="b"] .opt, :root[data-style="b"] input[type=text], :root[data-style="b"] input[type=number], :root[data-style="b"] select, :root[data-style="b"] .pain, :root[data-style="b"] .gate-opts button{border:2.5px solid #1A1220;}
  :root[data-style="b"] .opt{box-shadow:3px 3px 0 #1A1220;}
  :root[data-style="b"] .badge{border:2px solid #1A1220; color:#1A1220; background:#FFE45C;}
  :root[data-style="b"] .goal{background:#FFE45C; color:#1A1220; border:2px solid #1A1220;}
  /* C · Классика */
  :root[data-style="c"] .wordmark{letter-spacing:-.03em; font-weight:800; text-transform:lowercase; font-size:28px;}
  :root[data-style="c"] .h1{font-weight:800; font-size:clamp(32px, 9vw, 42px); line-height:1.05; letter-spacing:-.035em; text-transform:none;}
  :root[data-style="c"] h2, :root[data-style="c"] .gate h2{font-weight:800; font-size:30px; letter-spacing:-.03em;}
  :root[data-style="c"] body::after{opacity:0;}
  :root[data-style="c"] .phone{box-shadow:0 24px 60px -20px rgba(22,22,26,.22);}
  :root[data-style="c"] .btn{box-shadow:0 10px 24px -10px rgba(229,47,69,.55);}
  :root[data-style="c"] .h-eyebrow{text-decoration-color:var(--mauve);}
  @media (min-width:1024px){
    .h1{font-size:clamp(48px, 4.6vw, 64px);}
    :root[data-style="b"] .h1{font-size:clamp(40px, 3.8vw, 52px);}
    :root[data-style="c"] .h1{font-size:clamp(46px, 4.4vw, 60px);}
  }

  /* ---- chat header: interests live in the profile ---- */
  .p-top .tags{display:none;}
  /* ---- KISU note (analysis) ---- */
  .an{gap:14px;}
  .an-note{position:relative; display:flex; flex-direction:column; gap:12px; padding:16px; border-radius:22px; background:#121010; border:1.5px solid var(--mauve);}
  .an-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px;}
  .an-title{font-family:var(--display); font-size:15px; color:var(--mauve);}
  .an-only{font-size:11px; font-weight:600; color:var(--haze);}
  .an-note .an-b p{font-size:15px; line-height:1.4; color:var(--lilac);}
  :root[data-style="b"] .an-note{background:#FFE45C; border:3px solid #1A1220; box-shadow:5px 5px 0 #1A1220; transform:rotate(-1deg); margin:12px 6px 4px 18px; padding:18px 16px 16px 26px; border-radius:20px;}
  :root[data-style="b"] .an-note::before{content:"K"; position:absolute; left:-20px; top:-18px; width:42px; height:42px; box-sizing:border-box; border-radius:21px; background:#7CC6FF; border:3px solid #1A1220; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:900; font-size:14px; color:#1A1220;}
  :root[data-style="b"] .an-title{font-weight:800; font-size:14px; color:#1A1220;}
  :root[data-style="b"] .an-only{color:#6A5A1A;}
  :root[data-style="b"] .an-note .an-h{color:#1A1220; opacity:.65;}
  :root[data-style="b"] .an-note .an-b p{color:#1A1220; font-weight:700;}
  :root[data-style="b"] .an-note .an-b ul{color:#3A2E1A;}
  :root[data-style="b"] .an-note .an-b li::before{color:#1A1220;}
  :root[data-style="b"] .seg{border:2.5px solid #1A1220; background:#FFFFFF;}
  :root[data-style="b"] .seg-b[aria-pressed="true"]{background:#FF2E7E; color:#FFFFFF;}
  :root[data-style="c"] .an-note{background:#FFFFFF; border:1px solid #ECECEF; box-shadow:0 8px 24px rgba(22,22,26,.08); border-radius:18px;}
  :root[data-style="c"] .an-title{font-family:var(--body); font-weight:700; font-size:14px; color:var(--mauve);}
  :root[data-style="c"] .seg-b[aria-pressed="true"]{background:#16161A; color:#FFFFFF;}
  /* ---- mood "why" popover ---- */
  .p-top .why{position:absolute; left:14px; right:14px; top:calc(100% - 4px); z-index:6; gap:8px; padding:14px 16px; border-radius:18px;
    background:#121010; border:1.5px solid var(--mauve); box-shadow:0 20px 44px -14px rgba(0,0,0,.85); animation:pop .2s ease both;}
  .why-t{font-family:var(--display); font-size:15px; color:var(--lilac);}
  .why li{font-size:14px; color:var(--lilac);}
  :root[data-style="b"] .p-top .why{background:#FFFFFF; border:3px solid #1A1220; box-shadow:5px 5px 0 #1A1220; border-radius:20px;}
  :root[data-style="b"] .why-t{font-weight:800; font-size:14px;}
  :root[data-style="b"] .mood-pill{border:2.5px solid #1A1220; background:#FFFFFF;}
  :root[data-style="c"] .p-top .why{background:#FFFFFF; border:1px solid #ECECEF; box-shadow:0 18px 40px -14px rgba(22,22,26,.3);}
  :root[data-style="c"] .why-t{font-weight:700;}

  .an-only{white-space:nowrap;}
  :root[data-style="b"] .an-only{display:none;}
  :root[data-style="b"] .an-note .an-b p{font-size:14px; line-height:1.38;}

  /* ---- custom dropdowns ---- */
  .dd-native{position:absolute !important; width:1px !important; height:1px !important; opacity:0; pointer-events:none; overflow:hidden;}
  .field{position:relative;}
  .dd{position:relative;}
  .dd-btn{width:100%; min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 12px 0 14px;
    font:500 16px/1.2 var(--body); color:var(--lilac); background:var(--plum); border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer; text-align:left;}
  .dd-btn:hover{border-color:var(--line-hi);}
  .dd.open .dd-btn{border-color:var(--mauve);}
  .dd-val.ph{color:var(--haze); font-weight:400;}
  .dd-chev{color:var(--mauve); transition:transform .2s ease; flex:none;}
  .dd.open .dd-chev{transform:rotate(180deg);}
  .dd-list{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30; display:flex; flex-direction:column; gap:2px; padding:6px;
    background:var(--plum-2); border:1px solid var(--line-hi); border-radius:16px; box-shadow:0 18px 40px -14px rgba(0,0,0,.7); animation:pop .18s ease both;}
  .dd-opt{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:0 12px; border:0; border-radius:11px;
    background:transparent; color:var(--lilac); font:500 15px/1.2 var(--body); text-align:left; cursor:pointer;}
  .dd-opt svg{opacity:0; color:var(--mauve); flex:none;}
  .dd-opt:hover, .dd-opt:focus-visible{background:rgba(var(--ac-rgb),.12); outline:none;}
  .dd-opt[aria-selected="true"]{color:var(--mauve);}
  .dd-opt[aria-selected="true"] svg{opacity:1;}
  :root[data-style="b"] .dd-btn{border:2.5px solid #1A1220; font-weight:700;}
  :root[data-style="b"] .dd-list{border:2.5px solid #1A1220; box-shadow:4px 4px 0 #1A1220; background:#FFFFFF;}
  :root[data-style="b"] .dd-opt{font-weight:700; color:#1A1220;}
  :root[data-style="b"] .dd-opt:hover, :root[data-style="b"] .dd-opt:focus-visible{background:#FFE3EE;}
  :root[data-style="b"] .dd-opt[aria-selected="true"]{background:#FFE45C; color:#1A1220;}
  :root[data-style="b"] .dd-opt[aria-selected="true"] svg{color:#1A1220;}
  :root[data-style="b"] .dd-chev{color:#1A1220;}
  :root[data-style="c"] .dd-list{background:#FFFFFF; border:1px solid #E6E6EA; box-shadow:0 16px 36px -12px rgba(22,22,26,.22);}
  :root[data-style="c"] .dd-opt:hover, :root[data-style="c"] .dd-opt:focus-visible{background:#F4F4F6;}

  /* ---- custom scrollbars ---- */
  html{scrollbar-width:thin; scrollbar-color:var(--mauve) var(--void);}
  ::-webkit-scrollbar{width:10px; height:10px;}
  ::-webkit-scrollbar-track{background:var(--void);}
  ::-webkit-scrollbar-thumb{background:var(--mauve); border-radius:10px; border:3px solid var(--void);}
  ::-webkit-scrollbar-thumb:hover{background:var(--mauve-hi);}
  :root[data-style="b"]{scrollbar-color:#FF2E7E #FFE3EE;}
  :root[data-style="b"] ::-webkit-scrollbar{width:14px;}
  :root[data-style="b"] ::-webkit-scrollbar-thumb{background:#FF2E7E; border:2.5px solid #1A1220; border-radius:10px;}
  :root[data-style="b"] ::-webkit-scrollbar-track{background:#FFE3EE; border-left:2.5px solid #1A1220;}
  :root[data-style="c"]{scrollbar-color:#C9C9D0 #FFFFFF;}
  :root[data-style="c"] ::-webkit-scrollbar-thumb{background:#D2D2D8;}
  :root[data-style="c"] ::-webkit-scrollbar-thumb:hover{background:var(--mauve);}
  .sheet{scrollbar-width:thin;}

  /* ---- style coach ---- */
  .st-coach{position:fixed; inset:0; z-index:45; background:rgba(0,0,0,.72); backdrop-filter:blur(2px); animation:fadein .3s ease both;}
  @keyframes fadein{from{opacity:0} to{opacity:1}}
  .st-coach-tip{position:absolute; right:calc(24px + 96px); bottom:calc(env(safe-area-inset-bottom, 0px) + 78px); display:flex; flex-direction:column; align-items:flex-end; gap:4px; max-width:240px; text-align:right; color:#FFFFFF;}
  .st-coach-t{font:700 18px/1.25 var(--body);}
  .st-coach-s{font:400 13px/1.35 var(--body); color:rgba(255,255,255,.72);}
  .st-coach-arrow{position:absolute; right:-84px; bottom:-66px; color:#FFFFFF; animation:nudge 1.6s ease-in-out infinite;}
  @keyframes nudge{0%,100%{transform:translate(0,0)} 50%{transform:translate(5px,5px)}}
  .st-coach-skip{margin-top:10px; background:none; border:0; color:rgba(255,255,255,.6); font:400 13px/1 var(--body); text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:8px 0;}
  .styler.spot{box-shadow:0 0 0 4px rgba(255,255,255,.9), 0 0 0 10px rgba(255,255,255,.18), 0 10px 30px rgba(0,0,0,.5); animation:spot 1.6s ease-in-out infinite;}
  @keyframes spot{0%,100%{box-shadow:0 0 0 4px rgba(255,255,255,.9), 0 0 0 10px rgba(255,255,255,.18)} 50%{box-shadow:0 0 0 4px rgba(255,255,255,.9), 0 0 0 16px rgba(255,255,255,.06)}}
  @media (max-width:420px){ .st-coach-tip{right:30px; bottom:calc(env(safe-area-inset-bottom, 0px) + 120px);} .st-coach-arrow{right:-18px; bottom:-72px;} }