/* Carbon experience styles — used by the home route. */
    :root{
      --ink:#073943;
      --yellow:#FFD800;
      --orange:#FF8201;
      --teal:#66DAD7;
      --blue:#B4D9EC;
      --purple:#CB66CE;
      --cream:#FFFBF0;
      --white:#fff;
      --shadow:0 24px 60px rgba(7,57,67,.12);
    }
    *{box-sizing:border-box}
    html,body{margin:0;width:100%;height:100%;font-family:Inter,ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;background:var(--yellow);color:var(--ink)}
    body{overflow:hidden}
    button,input{font:inherit}
    button{cursor:pointer}

    .world{position:relative;width:100vw;height:100vh;min-height:640px;overflow:hidden;background:linear-gradient(140deg,#FFE55C 0%,#FFEFA8 48%,#FFC98A 100%)}

    /* soft branded background fields */
    .bg-shape{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none}
    .bg-shape-1{width:42vw;height:42vw;right:-8vw;top:-12vw;background:var(--teal);opacity:.22}
    .bg-shape-2{width:55vw;height:55vw;left:-18vw;bottom:-24vw;background:var(--blue);opacity:.34}
    .bg-shape-3{width:34vw;height:34vw;right:6vw;bottom:-14vw;background:var(--orange);opacity:.14}

    /* Carbon is the hero */
    .character{position:absolute;z-index:9;left:1%;bottom:96px;width:min(45vw,660px);height:min(78vh,780px);filter:drop-shadow(0 28px 24px rgba(7,57,67,.18));transition:transform .35s ease,filter .35s ease;transform-origin:bottom center;animation:carbonIdle 11s ease-in-out infinite;will-change:transform}
    .carbon-started .character{bottom:132px}
    .character.speaking{animation:carbonSpeak 2.6s ease-in-out infinite}
    .character.listening{transform:scale(1.02);filter:drop-shadow(0 0 34px rgba(255,255,255,.95)) drop-shadow(0 18px 24px rgba(7,57,67,.18));animation:none}
    .character.thinking{animation:carbonThink 1.1s ease-in-out infinite}
    @keyframes carbonThink{50%{transform:rotate(.6deg) translateY(-4px)}}
    /* speaking: layered small gestures — breath, head tilts, a blink, gentle sway */
    @keyframes carbonSpeak{
      0%{transform:translateY(0) rotate(0deg) scale(1,1)}
      8%{transform:translateY(-3px) rotate(-1deg) scale(1.006,1.004)}
      16%{transform:translateY(-1px) rotate(.8deg)}
      24%{transform:translateY(-4px) rotate(-.6deg) scale(1.008,1.006)}
      32%{transform:translateY(0) rotate(.5deg)}
      40%{transform:translateY(-3px) rotate(-.9deg)}
      46%{transform:translateY(-2px) rotate(0deg) scale(1,.986)}/* blink */
      49%{transform:translateY(-2px) rotate(0deg) scale(1,1)}
      58%{transform:translateY(-5px) rotate(1deg) scale(1.01,1.006)}
      68%{transform:translateY(-1px) rotate(-.7deg)}
      78%{transform:translateY(-4px) rotate(.6deg) scale(1.007,1.005)}
      88%{transform:translateY(-1px) rotate(-.3deg)}
      100%{transform:translateY(0) rotate(0deg) scale(1,1)}
    }
    .girl{width:100%;height:100%;overflow:visible;object-fit:contain;object-position:bottom center;display:block}


    /* idle: slow, varied "alive" motion — breathing, tiny tilts, posture shifts, occasional blink-like squish */
    @keyframes carbonIdle{
      0%{transform:translateY(0) rotate(0deg) scale(1,1)}
      9%{transform:translateY(-4px) rotate(-.5deg) scale(1.004,1.002)}
      18%{transform:translateY(0) rotate(.3deg)}
      27%{transform:translateY(-7px) rotate(-.2deg) scale(1.006,1.004)}
      36%{transform:translateY(-1px) rotate(.5deg)}
      45%{transform:translateY(0) rotate(0deg)}
      52%{transform:translateY(0) rotate(0deg) scale(1,.985)}/* blink */
      54%{transform:translateY(-2px) rotate(0deg) scale(1,1)}
      63%{transform:translateY(-5px) rotate(.4deg) scale(1.004,1.003)}
      74%{transform:translateY(0) rotate(-.4deg)}
      84%{transform:translateY(-6px) rotate(-.1deg) scale(1.005,1.004)}
      100%{transform:translateY(0) rotate(0deg) scale(1,1)}
    }

    /* excited, welcoming reaction while the visitor hovers/focuses TALK TO CARBON */
    .world:has(.start:is(:hover,:focus-visible)) .character{animation:carbonExcited .85s ease-in-out infinite alternate;filter:drop-shadow(0 24px 26px rgba(203,102,206,.35)) drop-shadow(0 18px 24px rgba(7,57,67,.14))}
    @keyframes carbonExcited{
      from{transform:translateY(0) rotate(-2.5deg) scale(1.01)}
      to{transform:translateY(-14px) rotate(2.5deg) scale(1.035)}
    }

    @media (prefers-reduced-motion: reduce){
      .character,
      .character.speaking,
      .character.thinking,
      .world:has(.start:is(:hover,:focus-visible)) .character{animation:none}
      .character.listening{transform:none}
    }

    /* invitation + primary CTA */
    .welcome{position:absolute;z-index:14;left:54%;top:50%;transform:translateY(-50%);width:min(38vw,520px);text-align:left;transition:opacity .35s ease,transform .35s ease}
    .welcome.started{opacity:0;transform:translateY(-50%) translateX(20px);pointer-events:none}
    /* the invitation is a simple speech bubble pointing back at Carbon */
    .invitation{position:relative;margin:0 0 40px;padding:26px 34px;font-size:clamp(24px,2.4vw,40px);line-height:1.15;color:var(--ink);font-weight:900;letter-spacing:-.02em;background:#fff;border-radius:30px;box-shadow:0 18px 40px rgba(7,57,67,.14)}
    .invitation:after{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%) rotate(-8deg);border:16px solid transparent;border-right-color:#fff;border-left:0}
    .start{width:100%;max-width:460px;border:0;border-radius:22px;padding:26px 36px;background:var(--purple);color:white;font-size:clamp(20px,2.1vw,34px);font-weight:950;letter-spacing:.02em;display:inline-flex;align-items:center;justify-content:center;gap:14px;box-shadow:0 18px 44px rgba(203,102,206,.36);transition:transform .15s ease,box-shadow .15s ease}
    .start:hover,.start:focus-visible{transform:translateY(-3px) scale(1.02);box-shadow:0 22px 52px rgba(203,102,206,.5),0 0 0 8px rgba(203,102,206,.14)}
    .start:active{transform:scale(.985)}
    .start svg{width:34px;height:34px;flex-shrink:0}

    /* typewriter invitation text */
    .type-text{display:inline}
    .type-cursor{display:inline-block;width:3px;height:.9em;background:var(--ink);margin-left:3px;border-radius:2px;vertical-align:baseline;animation:cursorBlink 1.1s step-end infinite}
    @keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}
    @media (prefers-reduced-motion: reduce){.type-cursor{display:none}}

    /* dialogue */
    .speech{position:absolute;z-index:15;left:47%;top:20%;transform:translateX(-50%) translateY(-12px);width:min(34vw,500px);min-height:74px;padding:18px 26px 18px 88px;border-radius:28px;background:rgba(255,255,255,.94);box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;font-weight:800;font-size:clamp(17px,1.35vw,22px);line-height:1.35;opacity:0;pointer-events:none;transition:.25s ease}
    .speech.show{opacity:1;transform:translateX(-50%) translateY(0)}
    .speech:after{content:"";position:absolute;left:-18px;bottom:14px;border:18px solid transparent;border-right-color:rgba(255,255,255,.94);transform:rotate(-18deg)}
    .avatar{position:absolute;left:-12px;top:-10px;width:76px;height:76px;border-radius:50%;background:linear-gradient(145deg,#f8c193,#c06c42);border:5px solid #fff;box-shadow:0 8px 18px rgba(0,0,0,.14);overflow:hidden;display:grid;place-items:center;font-size:38px}

    /* speaking indicator — three gentle dots inside the bubble */
    .speaking-dots{display:none;align-items:flex-end;gap:5px;flex-shrink:0}
    .world:has(.character.speaking) .speaking-dots{display:flex}
    .speaking-dots i{width:7px;height:7px;border-radius:50%;background:var(--purple);opacity:.5;animation:dotPulse 1.1s ease-in-out infinite}
    .speaking-dots i:nth-child(2){animation-delay:.16s}
    .speaking-dots i:nth-child(3){animation-delay:.32s}
    @keyframes dotPulse{0%,100%{transform:translateY(0) scale(.85);opacity:.4}50%{transform:translateY(-4px) scale(1.15);opacity:1}}

    .reply{position:absolute;right:7%;bottom:26%;z-index:14;padding:13px 22px;border-radius:23px 23px 5px 23px;background:rgba(255,255,255,.9);color:var(--ink);font-weight:800;font-size:17px;box-shadow:0 12px 26px rgba(7,57,67,.12);opacity:0;transform:translateY(8px);transition:.25s ease}
    .reply.show{opacity:1;transform:translateY(0)}

    /* status text is announced, not shown as a pill */
    .status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

    /* composer — voice first, typing secondary */
    .composer-shell{position:absolute;z-index:30;left:0;right:0;bottom:0;padding:16px 24px 26px;opacity:0;transform:translateY(20px);pointer-events:none;transition:.3s ease}
    .carbon-started .composer-shell{opacity:1;transform:translateY(0);pointer-events:auto}
    .composer{width:min(680px,92vw);margin:0 auto;height:78px;border-radius:999px;padding:10px 14px;display:grid;grid-template-columns:minmax(210px,250px) 1fr 46px;align-items:center;gap:10px;background:rgba(255,255,255,.72);backdrop-filter:blur(12px);border:0;box-shadow:0 10px 30px rgba(7,57,67,.09)}
    .round{width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;background:transparent;color:var(--ink);opacity:.55;font-size:20px;font-weight:900;transition:transform .15s ease,opacity .15s ease}
    .round.send:hover{opacity:1;transform:scale(1.05)}
    .round:active{transform:scale(.95)}
    .round.mic-control{width:100%;min-width:210px;height:58px;border-radius:999px;opacity:1;color:white;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:17px;font-weight:950;letter-spacing:.01em;background:var(--purple);box-shadow:0 12px 30px rgba(203,102,206,.34);touch-action:none;user-select:none;-webkit-user-select:none}
    .round.mic-control:hover{transform:translateY(-2px) scale(1.02)}
    .round.mic-control svg{width:24px;height:24px;flex-shrink:0}
    .round.mic-control.listening{background:var(--orange);box-shadow:0 0 0 8px rgba(255,130,1,.18);animation:carbonMicPulse .9s ease-in-out infinite alternate}
    .round.mic-control.listening svg{animation:carbonMicBounce .55s ease-in-out infinite alternate}
    .input{height:50px;border-radius:999px;border:0;background:transparent;padding:0 18px;outline:none;color:var(--ink);font-size:16px;font-weight:600;opacity:.85}
    .input::placeholder{color:#9aa8ab;font-weight:600}
    @keyframes carbonMicPulse{from{transform:scale(1)}to{transform:scale(1.035)}}
    @keyframes carbonMicBounce{from{transform:translateY(1px)}to{transform:translateY(-2px)}}

    /* secondary bottom nav */
    .bottom-nav{position:absolute;z-index:20;right:6%;bottom:44px;display:flex;align-items:center;gap:clamp(28px,4vw,60px);padding:14px 32px;border-radius:999px;background:rgba(255,255,255,.6);backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(7,57,67,.06);transition:transform .3s ease,opacity .4s ease}
    .carbon-started .bottom-nav{transform:translateY(-96px);opacity:.72}
    .world:has(.character.speaking) .bottom-nav{opacity:.35}
    .bottom-nav:hover{opacity:1}
    .nav-item{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700;font-size:clamp(13px,1vw,15px);transition:transform .15s ease,color .15s ease}
    .nav-item:hover{transform:translateY(-2px);color:var(--purple)}
    .nav-item svg{width:20px;height:20px;flex-shrink:0}


    @media(max-width:900px){
      body{overflow:auto}
      .world{min-height:820px;height:100dvh}
      .character{left:50%;transform:translateX(-50%);bottom:28%;width:min(78vw,560px);height:min(62vh,560px)}
      .welcome{left:50%;top:auto;bottom:18%;transform:translateX(-50%);width:min(84vw,520px);text-align:center}
      .welcome.started{transform:translateX(-50%) translateY(20px)}
      .invitation{margin-bottom:22px;font-size:clamp(22px,4.6vw,32px);padding:20px 26px}
      .invitation:after{display:none}
      .start{max-width:none;padding:22px 28px;font-size:clamp(18px,4vw,26px)}
      .start svg{width:28px;height:28px}
      .speech{top:10%;width:min(84vw,560px);font-size:15px;padding:16px 20px 16px 72px}
      .speech .avatar{width:62px;height:62px;font-size:32px}
      .reply{right:5%;bottom:20%;font-size:15px;max-width:80vw}
      .status{bottom:96px}
      .bottom-nav{left:50%;right:auto;bottom:96px;padding:12px 24px;gap:24px;transform:translateX(-50%)}
      .carbon-started .bottom-nav{transform:translateX(-50%) translateY(-78px)}
      .composer-shell{padding:12px 16px 18px}
      .composer{height:66px;grid-template-columns:minmax(120px,150px) 1fr 48px}
      .round{width:46px;height:46px;font-size:19px}
      .round.mic-control{min-width:120px;height:46px;font-size:13px}
      .round.mic-control svg{width:18px;height:18px}
      .input{height:46px;font-size:16px;padding:0 16px}
    }

    @media(max-width:600px){
      .world{min-height:760px}
      .character{bottom:30%;width:92vw;height:52vh}
      .welcome{bottom:16%;width:92vw}
      .invitation{font-size:clamp(24px,7vw,34px);margin-bottom:18px}
      .start{padding:18px 24px;font-size:clamp(17px,5vw,22px)}
      .start svg{width:24px;height:24px}
      .speech{top:8%;width:92vw;font-size:14px;padding:14px 16px 14px 66px;border-radius:22px}
      .speech .avatar{width:56px;height:56px;font-size:28px}
      .reply{bottom:18%;font-size:14px;padding:11px 16px}
      .status{display:none}
      .bottom-nav{bottom:14px;padding:10px 20px;gap:18px;background:rgba(255,255,255,.85)}
      .carbon-started .bottom-nav{transform:translateX(-50%) translateY(-72px)}
      .nav-item{font-size:13px}
      .nav-item svg{width:18px;height:18px}
      .composer{height:60px;grid-template-columns:minmax(110px,138px) 1fr 44px;gap:8px;padding:8px}
      .round{width:42px;height:42px;font-size:17px}
      .round.mic-control{min-width:110px;height:42px;font-size:12px;gap:5px}
      .round.mic-control svg{width:16px;height:16px}
      .input{height:42px;font-size:15px;padding:0 12px}
    }

    @media(max-height:620px) and (min-width:901px){
      .character{height:min(78vh,640px)}
      .welcome{top:52%}
      .speech{top:22%;width:min(34vw,480px);font-size:clamp(15px,1.2vw,19px)}
      .reply{bottom:22%}
      .bottom-nav{bottom:36px;padding:12px 26px}
    }

    @media (prefers-reduced-motion: reduce){
      .speaking-dots i{animation:none}
    }