@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

    :root {
      color-scheme: light dark;
      --page:#d8dde4;
      --ink:#f8fbff;
      --muted:rgba(241,247,255,.72);
      --panel:rgba(3,8,18,.72);
      --panel-strong:rgba(4,9,19,.9);
      --line:rgba(255,255,255,.2);
      --aqua:#8cf7e2;
      --blue:#76bcff;
      --violet:#b388ff;
      --shadow:rgba(0,0,0,.52);
      --mode-1:#8cf7e2;
      --mode-2:#76bcff;
      --mode-3:#7968e8;
      --mode-deep:#101845;
      --mode-glow:rgba(118,188,255,.32);
    }
    @media (prefers-color-scheme:dark) {
      :root { --page:#070a10; }
    }
    *{box-sizing:border-box}
    html,body{margin:0;min-height:100%;background:var(--page);font-family:"Poppins",sans-serif}
    button{font:inherit}
    button:focus-visible{outline:2px solid #fff;outline-offset:3px}
    .stage{
      position:relative;width:100%;height:100svh;min-height:660px;overflow:hidden;
      isolation:isolate;background:#02050b;color:var(--ink);
    }
    .view{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .34s ease}
    .view.is-active{opacity:1;pointer-events:auto}

    .welcome{position:absolute;z-index:7;inset:100px 18px 194px;display:grid;place-items:center;padding:22px 20px;background:transparent;opacity:1;pointer-events:none;transition:opacity 1.8s cubic-bezier(.45,0,.55,1)}
    .welcome.is-finished{opacity:0;pointer-events:none}
    .welcome-shell{position:relative;width:100%;height:100%;display:grid;place-items:center;padding:28px 26px 54px;border:0;border-radius:30px;background:rgba(24,21,68,.26);box-shadow:inset 0 1px rgba(189,255,241,.08);backdrop-filter:blur(12px) saturate(1.18);-webkit-backdrop-filter:blur(12px) saturate(1.18)}
    .welcome-copy{position:relative;width:100%;height:100%;min-height:190px;overflow:hidden}
    .welcome-slide{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#fff;text-align:center;font-family:"Poppins",sans-serif;font-size:clamp(24px,6.6vw,33px);line-height:1.06;letter-spacing:-.035em;font-weight:800;text-transform:uppercase;text-wrap:balance;text-shadow:0 3px 22px rgba(0,0,0,.4);opacity:0;transform:none;pointer-events:none;will-change:opacity;backface-visibility:hidden;contain:paint;transition:opacity 2.4s cubic-bezier(.45,0,.55,1)}
    .welcome-slide.is-active{opacity:1}
    .welcome-slide.is-exiting{opacity:0}
    .identity-intro{position:absolute;inset:0;margin:0;opacity:1;transition:opacity 1.8s cubic-bezier(.45,0,.55,1)}
    .identity-intro.is-exiting{opacity:0}
    .closing-stack{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;perspective:900px}
    .closing-stack>span{display:block;width:100%;text-align:center}
    .closing-lead{transform:none;filter:none}
    .closing-lead{font-size:clamp(27px,7vw,35px);font-weight:900;line-height:1.02}
    .closing-outline{font-size:clamp(25px,6.5vw,33px);font-weight:900;line-height:1.02;color:transparent;-webkit-text-stroke:2px rgba(236,231,223,.95);paint-order:stroke fill;filter:drop-shadow(0 4px 12px rgba(8,6,32,.42))}
    .closing-sub{max-width:310px;margin:9px auto 0;font-family:"Poppins",sans-serif;font-size:clamp(12px,3.2vw,15px);font-weight:600;line-height:1.28;letter-spacing:.035em;color:#fff}
    .welcome-indicators{position:absolute;left:26px;right:26px;bottom:22px;display:flex;justify-content:center;gap:8px}
    .welcome-dot{position:relative;width:28px;height:3px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.2)}
    .welcome-dot:after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left center}
    .welcome-dot.is-complete:after{transform:scaleX(1)}
    .welcome-dot.is-active:after{animation:slide-progress var(--slide-duration,3000ms) linear forwards}
    @keyframes slide-progress{to{transform:scaleX(1)}}
    .orb-wrap,.orb-copy,.topbar,.identity,.controls{transition:opacity 1.65s ease}
    .orb-wrap{transition:opacity 1.65s ease,top .95s cubic-bezier(.18,.78,.24,1),transform .95s cubic-bezier(.18,.78,.24,1)}
    .stage.intro-active .orb-wrap,.stage.intro-active .orb-copy{pointer-events:none}
    .stage.intro-active .orb-copy{opacity:0}
    .stage.intro-active .orb-wrap{z-index:8;opacity:.3}

    /* Presence keeps the original photograph mounted at all times. Masked duplicate layers
       animate only aurora and reflection pixels, so terrain stays still and the photo can
       never be replaced by a failed rendering surface. */
    .scene{position:absolute;inset:0;opacity:0;transition:opacity .48s ease;overflow:hidden;background:#02050b}
    .scene.is-active{opacity:1}
    .scene img,.scene .sky-motion,.scene .water-motion{position:absolute;inset:0;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
    .scene img{z-index:0;display:block;visibility:visible;opacity:1;object-fit:cover;object-position:center;filter:none;transform:none}
    .scene{--presence-cycle:20s}
    .scene .sky-motion,.scene .water-motion{z-index:1;pointer-events:none;background-image:var(--scene-photo);background-size:cover;background-position:center;background-repeat:no-repeat;will-change:background-position,filter}
    .scene .sky-motion{-webkit-mask-image:var(--sky-mask);mask-image:var(--sky-mask);-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:living-sky var(--presence-cycle) linear infinite}
    .scene .water-motion{display:none;-webkit-mask-image:var(--water-mask);mask-image:var(--water-mask);-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:living-water var(--presence-cycle) linear infinite;filter:url(#water-ripple) saturate(1.08) contrast(1.08)}
    .scene.has-water .water-motion{display:block}
    .scene.coach{--scene-photo:url('/presence/img/a8877ba3992f568b.jpg');--sky-mask:url('/presence/img/613f610cce2d2b3f.png');--water-mask:url('/presence/img/4db5ac711e0149e0.png')}
    .scene.strategist{--scene-photo:url('/presence/img/c4b24aa3c88c1d79.jpg');--sky-mask:url('/presence/img/1d9c23464fae7bfb.png');--water-mask:url('/presence/img/7efc3417f14319db.png')}
    .scene.mentor{--scene-photo:url('/presence/img/5c91a0eb7c9a9cd1.jpg');--sky-mask:url('/presence/img/38ff8c132426a7c4.png')}
    .scene.leader{--scene-photo:url('/presence/img/fc8963669053f0cc.jpg');--sky-mask:url('/presence/img/0dea35b656e2f61e.png');--water-mask:url('/presence/img/341b0d4cdf0ec6c5.png')}
    @keyframes living-sky{
      0%,100%{background-position:49.2% 49%;filter:saturate(1.03) brightness(1.01)}
      25%{background-position:50.1% 50.4%;filter:saturate(1.13) brightness(1.07)}
      50%{background-position:51.2% 51%;filter:saturate(1.17) brightness(1.10)}
      75%{background-position:50.3% 49.7%;filter:saturate(1.09) brightness(1.05)}
    }
    @keyframes living-water{
      0%,100%{background-position:49.65% 49.65%}
      12.5%{background-position:50.32% 50.08%}
      25%{background-position:49.78% 50.45%}
      37.5%{background-position:50.52% 50.16%}
      50%{background-position:49.72% 50.7%}
      62.5%{background-position:50.4% 50.28%}
      75%{background-position:49.84% 49.92%}
      87.5%{background-position:50.24% 49.76%}
    }
    .scene::before,.scene::after{display:none!important}
    .presence-scrim{position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,rgba(0,5,15,.7) 0%,rgba(0,4,14,.12) 27%,rgba(0,4,14,.08) 50%,rgba(0,5,15,.34) 68%,rgba(0,5,15,.94) 100%);pointer-events:none}

    /* Orb */
    .stage.mode-coach{--mode-1:#ecffff;--mode-2:#a9ddea;--mode-3:#91a7d8;--mode-deep:#3b4f78;--mode-glow:rgba(169,221,234,.42);--mode-shadow:rgba(177,229,239,.5)}
    .stage.mode-strategist{--mode-1:#f0fbd5;--mode-2:#a9d8bd;--mode-3:#82aaa2;--mode-deep:#3c5f5b;--mode-glow:rgba(169,216,189,.42);--mode-shadow:rgba(187,225,199,.5)}
    .stage.mode-mentor{--mode-1:#fff2d2;--mode-2:#e9bd9b;--mode-3:#c395a6;--mode-deep:#704e5c;--mode-glow:rgba(233,189,155,.42);--mode-shadow:rgba(240,205,177,.5)}
    .stage.mode-leader{--mode-1:#f8e5fb;--mode-2:#cbaadc;--mode-3:#9c90c8;--mode-deep:#554d78;--mode-glow:rgba(203,170,220,.44);--mode-shadow:rgba(218,190,230,.52)}
    .orb-view{overflow:hidden;background:linear-gradient(145deg,#121829 0%,#090d17 45%,#03060d 100%)}
    .orb-view:before{content:"";position:absolute;inset:-18%;background:radial-gradient(circle at 22% 24%,rgba(76,220,184,.2) 0,transparent 37%),radial-gradient(circle at 82% 44%,rgba(133,91,230,.24) 0,transparent 40%),radial-gradient(circle at 48% 88%,rgba(88,203,177,.12) 0,transparent 38%);filter:blur(34px)}
    .orb-view:after{content:"";position:absolute;inset:92px 15px 128px;border:1px solid rgba(255,255,255,.18);border-radius:34px;background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.025) 48%,rgba(255,255,255,.07));box-shadow:inset 0 1px rgba(255,255,255,.18),inset 0 -1px rgba(255,255,255,.04),0 28px 70px rgba(0,0,0,.22);backdrop-filter:blur(26px) saturate(1.25);-webkit-backdrop-filter:blur(26px) saturate(1.25)}
    .orb-stars{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.72) 0 1px,transparent 1.35px);background-size:47px 47px;opacity:.1;mask-image:linear-gradient(#000,transparent 76%)}
    .orb-wrap{position:absolute;z-index:2;top:18%;left:50%;width:min(62vw,260px);aspect-ratio:1;transform:translateX(-50%);display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity 1.65s ease,top .95s cubic-bezier(.18,.78,.24,1),transform .16s ease,filter .3s ease}
    .orb-wrap:focus-visible{outline:2px solid #fff;outline-offset:8px;border-radius:50%}
    .orb-wrap.is-pressed{transform:translateX(-50%) scale(.92);filter:brightness(1.26)}
    .orb-wrap.is-pressed .orb-halo{animation:orb-click .52s ease-out}
    @keyframes orb-click{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.55);opacity:0}}
    .orb-halo,.orb-core,.orb-ring{position:absolute;border-radius:50%}
    .orb-halo{inset:-18%;background:radial-gradient(circle,var(--mode-glow),color-mix(in srgb,var(--mode-3) 13%,transparent) 48%,transparent 72%);filter:blur(13px);animation:halo 5s ease-in-out infinite;transition:background .65s ease}
    .orb-core{inset:8%;overflow:hidden;background:radial-gradient(circle at 35% 28%,#fff 0 3%,var(--mode-1) 10%,var(--mode-2) 31%,var(--mode-3) 57%,var(--mode-deep) 78%,#090915 100%);box-shadow:inset -18px -22px 42px rgba(3,3,14,.58),inset 12px 12px 25px rgba(255,255,255,.27),0 0 70px var(--mode-glow);animation:orb-breathe 4.6s ease-in-out infinite;transition:background .65s ease,box-shadow .65s ease}
    .orb-core:before,.orb-core:after{content:"";position:absolute;inset:-20%;border-radius:45%;mix-blend-mode:screen;filter:blur(18px)}
    .orb-core:before{background:conic-gradient(from 30deg,transparent,var(--mode-1) 22%,transparent 38%,var(--mode-2) 58%,transparent 75%);animation:spin 12s linear infinite}
    .orb-core:after{background:conic-gradient(from 170deg,transparent,var(--mode-2) 18%,transparent 34%,var(--mode-3) 61%,transparent 76%);animation:spin 17s linear infinite reverse;opacity:.72}
    .orb-ring{inset:2%;border:1px solid color-mix(in srgb,var(--mode-1) 35%,transparent);box-shadow:0 0 22px var(--mode-glow);animation:ring 6s ease-in-out infinite;transition:border-color .65s ease,box-shadow .65s ease}
    .orb-view.is-speaking .orb-core{animation:orb-speak .9s ease-in-out infinite alternate}
    .orb-view.is-listening .orb-ring{animation:ring-listen 1.5s ease-in-out infinite}
    @keyframes spin{to{transform:rotate(360deg)}}
    @keyframes halo{50%{transform:scale(1.1);opacity:.72}}
    @keyframes orb-breathe{50%{transform:scale(1.035);filter:brightness(1.1)}}
    @keyframes orb-speak{to{transform:scale(1.065);filter:brightness(1.3) saturate(1.18)}}
    @keyframes ring{50%{transform:scale(1.04);opacity:.5}}
    @keyframes ring-listen{50%{transform:scale(1.11);border-color:rgba(156,255,234,.65)}}

    .topbar{position:absolute;z-index:8;top:0;left:0;right:0;padding:max(18px,env(safe-area-inset-top)) 18px 0;display:flex;align-items:center;justify-content:center;gap:14px;pointer-events:none}
    .switcher{display:flex;padding:3px;background:rgba(3,8,18,.74);border:1px solid rgba(255,255,255,.2);border-radius:999px;box-shadow:0 8px 28px rgba(0,0,0,.36);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);pointer-events:auto}
    .switcher button{border:0;color:rgba(255,255,255,.72);background:transparent;padding:9px 16px;border-radius:999px;font-weight:600;font-size:13px;cursor:pointer}
    .switcher button.is-active{color:#fff;background:linear-gradient(120deg,rgba(52,224,193,.88),rgba(55,140,180,.9));box-shadow:0 2px 12px rgba(53,224,193,.26)}
    .chat-open{position:absolute;top:max(18px,env(safe-area-inset-top));right:18px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(3,8,18,.62);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.25);pointer-events:auto}
    .chat-open svg{width:19px;height:19px}

    .presence-copy,.orb-copy{position:absolute;z-index:6;left:24px;right:24px;text-align:center;text-shadow:0 2px 14px rgba(0,0,0,.95),0 1px 2px rgba(0,0,0,.95)}
    .orb-copy{top:61%}
    .presence-copy{top:37%;transform:translateY(-50%)}
    .eyeline{font-family:"Playfair Display",serif;font-size:12px;font-weight:500;letter-spacing:.4em;text-transform:uppercase;color:var(--trybe-orange,#ff8a35);margin:0 0 9px}
    .mode-title{font-family:"Poppins",sans-serif;font-size:clamp(30px,8vw,40px);line-height:1.03;letter-spacing:-.04em;margin:0 0 9px;font-weight:700;color:#fff}
    .mode-thought{max-width:340px;margin:0 auto;color:#fff;font-size:15px;line-height:1.45;font-weight:500}
    .orb-copy .mode-title{font-size:clamp(27px,7.5vw,36px)}

    .identity{position:absolute;z-index:9;top:max(72px,calc(env(safe-area-inset-top) + 68px));left:18px;right:18px;margin:0;text-align:center;color:rgba(255,255,255,.92);font-family:"Poppins",sans-serif;font-size:13px;font-weight:600;letter-spacing:.015em;text-shadow:0 2px 12px rgba(0,0,0,.95);pointer-events:none}
    .controls{position:absolute;z-index:10;left:0;right:0;bottom:0;padding:0 18px max(18px,env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent 0%,rgba(2,5,12,.58) 22%,rgba(2,5,12,.94) 100%)}
    .modes{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:16px;transform:translateY(-28px)}
    .mode-btn{border:0;background:transparent;color:rgba(255,255,255,.62);padding:10px 3px 9px;border-radius:11px;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;text-shadow:0 1px 8px #000}
    .mode-btn:before{content:"";display:block;width:5px;height:5px;border-radius:50%;margin:0 auto 6px;background:transparent;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
    .mode-btn.is-active{color:#fff;background:rgba(255,255,255,.13)}
    .mode-btn.is-active:before{background:var(--mode-1);box-shadow:0 0 12px var(--mode-1)}
    .talk-row{display:grid;grid-template-columns:50px 1fr 50px;gap:10px;align-items:center}
    .mini-control{height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center}
    .mini-control svg{width:20px;height:20px}
    .talk-btn{position:relative;height:62px;border:1px solid rgba(255,255,255,.48);border-radius:22px;background:linear-gradient(125deg,var(--mode-1) 0%,var(--mode-2) 46%,var(--mode-3) 100%);color:#fff;font-family:"Poppins",sans-serif;font-weight:700;font-size:17px;cursor:pointer;box-shadow:inset 0 2px 1px rgba(255,255,255,.78),inset 0 -10px 24px rgba(35,39,78,.13),0 9px 28px var(--mode-shadow),0 15px 30px rgba(8,10,32,.27);overflow:hidden;transition:background .65s ease,box-shadow .65s ease,color .3s ease}
    .talk-btn:before{content:"";position:absolute;left:7%;right:32%;top:5px;height:45%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(255,255,255,.08));filter:blur(.2px);opacity:.7}
    .talk-btn:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 76% 105%,rgba(255,255,255,.5),transparent 38%);mix-blend-mode:screen}
    .talk-btn span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;color:#fff;text-shadow:0 2px 7px rgba(3,7,25,.92),0 1px 2px rgba(3,7,25,.95)}
    .talk-btn svg{width:20px;height:20px;filter:drop-shadow(0 2px 3px rgba(4,8,28,.96)) drop-shadow(0 0 7px var(--mode-shadow));transition:filter .65s ease}
    .talk-btn b{filter:drop-shadow(0 2px 5px rgba(3,7,25,.95))}
    .talk-btn.is-live{color:#fff;filter:saturate(1.15) brightness(1.08)}
    .talk-btn.is-speaking{color:#fff;filter:saturate(1.2) brightness(1.04);text-shadow:0 1px 5px rgba(0,0,0,.36)}
    .status{height:22px;text-align:center;font-size:12px;color:rgba(255,255,255,.74);margin:4px 0 8px;text-shadow:0 1px 8px #000}
    .model-picker{position:absolute;z-index:8;left:50%;top:47%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;min-width:max-content;padding:8px 12px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:linear-gradient(145deg,rgba(20,35,65,.58),rgba(44,35,87,.5));color:#fff;font-family:"Poppins",sans-serif;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;box-shadow:inset 0 1px rgba(255,255,255,.14),0 8px 24px rgba(0,0,0,.28);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);cursor:pointer;transition:border-color .3s ease,background .3s ease,opacity 1.65s ease}
    .model-picker:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--mode-1);box-shadow:0 0 9px var(--mode-1)}
    .model-picker svg{width:12px;height:12px;opacity:.78}
    .stage.intro-active>.model-picker{display:none}
    .stage.presence-active>.model-picker{top:57%}

    .chat-shade{position:absolute;z-index:19;inset:0;background:rgba(0,0,0,.38);opacity:0;pointer-events:none;transition:opacity .3s ease}
    .chat-panel{position:absolute;z-index:20;top:0;right:0;bottom:0;width:min(88%,390px);background:var(--panel-strong);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);transform:translateX(104%);transition:transform .36s cubic-bezier(.2,.8,.2,1);box-shadow:-12px 0 42px rgba(0,0,0,.4);padding:max(20px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));display:flex;flex-direction:column}
    .stage.chat-on .chat-panel{transform:translateX(0)}
    .stage.chat-on .chat-shade{opacity:1;pointer-events:auto}
    .chat-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
    .chat-head strong{font-family:"Poppins",sans-serif;font-size:19px}
    .close-chat{border:0;background:rgba(255,255,255,.09);color:#fff;width:38px;height:38px;border-radius:50%;font-size:22px;cursor:pointer}
    .messages{flex:1;overflow:auto;display:flex;flex-direction:column;gap:13px;padding:2px 0 20px}
    .bubble{max-width:86%;padding:13px 15px;border-radius:18px;line-height:1.42;font-size:14px}
    .bubble.atlas{align-self:flex-start;background:rgba(255,255,255,.11);border-bottom-left-radius:5px}
    .bubble.you{align-self:flex-end;background:linear-gradient(120deg,#35cdb7,#247ba8);color:#fff;border-bottom-right-radius:5px}
    .composer{display:flex;gap:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
    .composer input{min-width:0;flex:1;height:46px;border-radius:15px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;padding:0 14px;font:inherit}
    .composer input::placeholder{color:rgba(255,255,255,.48)}
    .composer button{width:46px;border:0;border-radius:15px;background:linear-gradient(120deg,#35cdb7,#247ba8);color:#fff;display:grid;place-items:center;cursor:pointer}
    .composer svg{width:18px;height:18px}

    @media (min-width:620px){
      body{display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 20%,#263244,var(--page) 58%)}
      .stage{width:430px;height:min(900px,calc(100svh - 48px));min-height:650px;border-radius:34px;box-shadow:0 35px 90px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.16)}
    }
    @media (prefers-reduced-motion:reduce){
      .orb-halo,.orb-core,.orb-core:before,.orb-core:after,.orb-ring{animation-duration:18s!important}
      .scene,.view,.chat-panel{transition-duration:.01ms}
      .welcome p{transform:none}
      .welcome .promise-one,.welcome .promise-two,.welcome .promise-three,.welcome .hello{animation-name:welcome-line}
    }

    /* Trybe design language: saturated indigo glass, teal light, orange serif eyebrows. */
    :root{
      --trybe-orange:#ff8a35;
      --trybe-teal:#35e0c1;
      --trybe-teal-bright:#83f7db;
      --trybe-indigo:#211a58;
      --trybe-violet:#5a4194;
      --trybe-navy:#101635;
      --ink:#fffaf0;
      --muted:rgba(255,250,240,.78);
      --panel:rgba(29,28,76,.64);
      --panel-strong:rgba(24,20,63,.93);
      --line:rgba(79,229,203,.32);
    }
    html,body{font-family:"Poppins",sans-serif;background:#111430}
    .stage{
      background:
        radial-gradient(ellipse 90% 60% at 2% 90%,rgba(23,191,176,.42),transparent 58%),
        radial-gradient(ellipse 80% 66% at 98% 70%,rgba(111,67,180,.62),transparent 62%),
        linear-gradient(150deg,#112443 0%,#1a1a4d 44%,#301f67 74%,#101632 100%);
    }
    .stage{text-transform:uppercase}
    .welcome{background:transparent}
    .welcome-slide{font-family:"Poppins",sans-serif;font-size:clamp(22px,5.8vw,30px);line-height:1.07;font-weight:800;letter-spacing:-.03em;text-shadow:0 3px 24px rgba(12,9,39,.55)}
    .welcome-slide.tagline{font-size:clamp(25px,6.7vw,34px);font-weight:900;line-height:1.05}
    .outline-word{color:transparent;-webkit-text-stroke:2px rgba(236,231,223,.95);paint-order:stroke fill;letter-spacing:-.01em;filter:drop-shadow(0 4px 12px rgba(8,6,32,.42));text-shadow:none}

    .orb-view{
      background:
        radial-gradient(ellipse 82% 58% at -4% 72%,rgba(21,188,175,.48),transparent 64%),
        radial-gradient(ellipse 88% 72% at 105% 63%,rgba(112,65,183,.7),transparent 67%),
        radial-gradient(circle at 47% 21%,rgba(48,79,134,.54),transparent 40%),
        linear-gradient(155deg,#122541 0%,#1a1b50 46%,#38216e 77%,#111631 100%);
      transition:opacity .34s ease,background .8s ease-in-out;
    }
    .orb-view:before{inset:-22%;background:radial-gradient(circle at 10% 30%,color-mix(in srgb,var(--mode-1) 38%,transparent) 0,transparent 35%),radial-gradient(circle at 88% 50%,color-mix(in srgb,var(--mode-3) 48%,transparent) 0,transparent 42%),radial-gradient(circle at 45% 92%,color-mix(in srgb,var(--mode-2) 28%,transparent) 0,transparent 38%);filter:blur(38px);animation:aurora-drift 12s ease-in-out infinite alternate;transition:background .8s ease-in-out}
    @keyframes aurora-drift{to{transform:translate3d(3%,-2%,0) scale(1.06);filter:blur(45px)}}
    .orb-view:after{inset:100px 18px 194px;border-color:rgba(77,226,202,.34);border-radius:32px;background:linear-gradient(138deg,rgba(63,191,187,.15),rgba(55,52,125,.24) 48%,rgba(96,54,151,.19));box-shadow:inset 0 1px rgba(189,255,241,.22),inset 0 -1px rgba(74,225,200,.12),0 0 0 1px rgba(119,81,190,.1),0 28px 70px rgba(10,10,42,.28);backdrop-filter:blur(25px) saturate(1.34);-webkit-backdrop-filter:blur(25px) saturate(1.34);transition:opacity 1.65s ease}
    .orb-stars{opacity:.08}
    .orb-wrap{top:16.5%;width:min(48vw,198px)}
    .orb-halo{filter:blur(18px)}

    .topbar{padding:max(18px,env(safe-area-inset-top)) 18px 0}
    .switcher{background:rgba(20,22,60,.68);border-color:rgba(70,222,198,.34);box-shadow:inset 0 1px rgba(255,255,255,.08),0 10px 32px rgba(8,9,34,.3)}
    .switcher button{font-family:"Poppins",sans-serif;color:rgba(255,250,240,.72);text-transform:uppercase}
    .talk-btn{text-transform:uppercase}
    .switcher button.is-active{color:#fff;background:linear-gradient(120deg,#40d9c3,#287fb0);box-shadow:inset 0 1px rgba(255,255,255,.46),0 4px 16px rgba(50,225,195,.22);text-shadow:0 1px 6px rgba(8,18,42,.42)}
    .chat-open{background:rgba(30,26,74,.68);border-color:rgba(86,227,204,.35);box-shadow:inset 0 1px rgba(255,255,255,.09),0 10px 28px rgba(9,10,39,.35)}

    .identity{top:max(74px,calc(env(safe-area-inset-top) + 70px));color:rgba(255,250,240,.9);font-family:"Poppins",sans-serif;font-size:12px;font-weight:500;letter-spacing:.02em}
    .presence-copy,.orb-copy{left:36px;right:36px}
    .orb-copy{top:auto;bottom:244px;text-shadow:0 3px 20px rgba(10,8,35,.8)}
    .presence-copy{top:35%}
    .eyeline{font-family:"Playfair Display",serif;font-size:16px;font-weight:500;letter-spacing:.4em;text-transform:uppercase;color:var(--trybe-orange);margin:0 0 9px;padding-left:.4em;text-shadow:0 3px 12px rgba(0,0,0,.98),0 1px 2px #000}
    .presence-copy .eyeline{display:inline-block;padding:5px 7px 6px calc(7px + .4em);border-radius:7px;background:rgba(4,7,22,.66);box-shadow:0 5px 18px rgba(0,0,0,.32)}
    .mode-title{font-family:"Poppins",sans-serif;font-size:clamp(29px,7.5vw,39px);line-height:1.02;letter-spacing:-.035em;font-weight:900;color:#fff;margin-bottom:12px;text-transform:uppercase}
    .mode-name,.mode-tagline{display:block}
    .mode-name{color:#fff;font-weight:900}
    .mode-tagline{margin-top:4px;color:transparent;-webkit-text-stroke:1.7px rgba(236,231,223,.95);paint-order:stroke fill;font-size:20px;line-height:1.08;font-weight:900;letter-spacing:-.025em;white-space:nowrap;filter:drop-shadow(0 3px 10px rgba(0,0,0,.62))}
    .orb-copy .mode-title{font-size:clamp(29px,7.4vw,38px)}
    .mode-thought{max-width:350px;color:rgba(255,250,240,.9);font-family:"Poppins",sans-serif;font-size:12px;line-height:1.42;font-weight:500;text-transform:uppercase}
    .accent-text{background:linear-gradient(95deg,#8ef7d9 0%,#31dfc1 55%,#24bfc4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

    .controls{padding:0 18px max(18px,env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent 0%,rgba(14,13,50,.5) 20%,rgba(13,16,47,.94) 100%)}
    .modes{gap:8px;margin:0 0 12px;transform:none;padding:4px;background:rgba(34,30,83,.52);border:1px solid rgba(75,222,198,.2);border-radius:18px;box-shadow:inset 0 1px rgba(255,255,255,.07);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
    .mode-btn{color:rgba(255,250,240,.68);padding:9px 3px 8px;border-radius:14px;font-family:"Poppins",sans-serif;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.025em}
    .mode-btn.is-active{color:#fffaf0;background:linear-gradient(145deg,rgba(65,219,193,.22),rgba(94,68,157,.28));box-shadow:inset 0 0 0 1px rgba(81,231,205,.22)}
    .status{height:19px;margin:5px 0 9px;color:rgba(255,250,240,.72)}
    .mini-control{height:54px;background:rgba(40,36,88,.65);border-color:rgba(79,224,201,.27);box-shadow:inset 0 1px rgba(255,255,255,.09)}
    .talk-btn{height:58px;border-radius:999px;border-color:rgba(255,255,255,.55);font-family:"Poppins",sans-serif;background:linear-gradient(118deg,var(--mode-1) 0%,var(--mode-2) 53%,var(--mode-3) 100%);box-shadow:inset 0 2px 1px rgba(255,255,255,.8),inset 0 -10px 24px rgba(31,35,72,.12),0 9px 28px var(--mode-shadow),0 14px 28px rgba(10,9,36,.26)}
    .talk-btn:before{left:6%;right:28%;top:4px;height:42%;opacity:.78}

    .stage.mode-coach{--mode-1:#d8fff1;--mode-2:#35e0c1;--mode-3:#7b55c7;--mode-deep:#211a58;--mode-glow:rgba(53,224,193,.52);--mode-shadow:rgba(53,224,193,.5);--scene-tint:rgba(45,218,179,.2)}
    .stage.mode-strategist{--mode-1:#fff3d4;--mode-2:#efbd85;--mode-3:#cb8190;--mode-deep:#704650;--mode-glow:rgba(242,181,123,.5);--mode-shadow:rgba(242,181,123,.5);--scene-tint:rgba(230,147,102,.2)}
    .stage.mode-mentor{--mode-1:#eaffdc;--mode-2:#74e3a5;--mode-3:#39a981;--mode-deep:#235c50;--mode-glow:rgba(92,224,157,.52);--mode-shadow:rgba(92,224,157,.5);--scene-tint:rgba(63,197,139,.2)}
    .stage.mode-leader{--mode-1:#fae9ff;--mode-2:#d2a5ef;--mode-3:#9b7bd6;--mode-deep:#554278;--mode-glow:rgba(202,145,238,.54);--mode-shadow:rgba(202,145,238,.5);--scene-tint:rgba(178,113,222,.22)}
    .stage.mode-coach .orb-view{background:radial-gradient(ellipse 92% 64% at -3% 76%,rgba(53,224,193,.55),transparent 62%),radial-gradient(ellipse 88% 74% at 104% 58%,rgba(105,64,174,.72),transparent 68%),radial-gradient(circle at 48% 20%,rgba(50,119,128,.5),transparent 42%),linear-gradient(155deg,#112f40 0%,#211a58 54%,#3b226f 78%,#101635 100%)}
    .stage.mode-strategist .orb-view{background:radial-gradient(ellipse 90% 62% at 0% 75%,rgba(235,174,107,.44),transparent 64%),radial-gradient(ellipse 84% 72% at 104% 60%,rgba(203,110,135,.46),transparent 68%),linear-gradient(155deg,#513634,#70474c 52%,#4b3153)}
    .stage.mode-mentor .orb-view{background:radial-gradient(ellipse 90% 62% at 0% 75%,rgba(83,225,154,.5),transparent 64%),radial-gradient(ellipse 84% 72% at 104% 60%,rgba(44,151,115,.44),transparent 68%),linear-gradient(155deg,#153f3a,#245f50 52%,#173c38)}
    .stage.mode-leader .orb-view{background:radial-gradient(ellipse 90% 62% at 0% 75%,rgba(209,150,236,.46),transparent 64%),radial-gradient(ellipse 84% 72% at 104% 60%,rgba(135,108,216,.52),transparent 68%),linear-gradient(155deg,#413050,#58406f 52%,#352753)}
    .presence-scrim{background:transparent;transition:none}

    .chat-panel{background:linear-gradient(160deg,rgba(25,28,72,.96),rgba(48,28,88,.96));border-left:1px solid rgba(73,223,198,.22)}
    .chat-head strong{font-family:"Poppins",sans-serif;font-size:22px;font-weight:700;text-transform:uppercase}
    .bubble.atlas{background:rgba(70,64,133,.38);border:1px solid rgba(74,224,199,.16)}
    .bubble.you{background:linear-gradient(120deg,#35cdb7,#247ba8);color:#fff}
    .composer button{background:linear-gradient(120deg,#35cdb7,#247ba8);color:#fff}

    @media (max-height:720px){
      .orb-view:after{inset:92px 16px 176px}
      .orb-wrap{top:15%;width:min(48vw,184px)}
      .orb-copy{bottom:218px;left:30px;right:30px}
      .orb-copy .mode-title{font-size:clamp(29px,8vw,38px);margin-bottom:8px}
      .mode-thought{font-size:12.5px;line-height:1.38}
      .eyeline{font-size:16px;margin-bottom:6px}
      .modes{margin-bottom:8px}
      .mode-btn{padding-top:7px;padding-bottom:6px}
      .talk-btn{height:52px}
      .mini-control{height:48px}
      .status{margin:3px 0 6px}
    }
    @media (max-width:360px){
      .presence-copy,.orb-copy{left:28px;right:28px}
      .controls{padding-left:14px;padding-right:14px}
      .talk-row{grid-template-columns:46px 1fr 46px;gap:8px}
      .mode-btn{font-size:9.5px}
    }

    /* The experience wakes up slowly from black instead of arriving fully lit. */
    .stage{animation:stage-awaken 2.6s cubic-bezier(.2,.72,.2,1) both}
    @keyframes stage-awaken{
      0%{opacity:0}
      34%{opacity:.28}
      100%{opacity:1}
    }
    .welcome-slide{color:#fff;transform:none;transition:opacity 2.4s cubic-bezier(.45,0,.55,1)}
    .welcome-slide.is-active{transform:none}
    .welcome-slide.is-exiting{transform:none}
    .mode-title,.mode-thought{will-change:opacity,transform;backface-visibility:hidden;transition:opacity .68s ease-in-out,transform .68s ease-in-out}
    .copy-changing .mode-title,.copy-changing .mode-thought{opacity:0;transform:translate3d(0,7px,0)}

    /* Presence typography stays luminous and legible over every photograph. */
    .presence-copy{top:34.5%;left:24px;right:24px;text-shadow:0 3px 18px rgba(0,0,0,.98),0 1px 3px #000}
    .orb-copy{left:24px;right:24px}
    .presence-copy .mode-title,
    .orb-copy .mode-title{font-family:"Poppins",sans-serif;font-size:clamp(25px,7.8vw,32px);letter-spacing:-.006em;margin-bottom:14px;color:#fffaf0;text-shadow:none;filter:none}
    .presence-copy .mode-name,.orb-copy .mode-name{color:#fffaf0;font-weight:900;text-shadow:none;filter:none}
    .presence-copy .mode-tagline,
    .orb-copy .mode-tagline{
      font-size:inherit;
      line-height:1.12;
      letter-spacing:-.012em;
      -webkit-text-stroke:1.05px rgba(255,250,240,.96);
      color:transparent;
      white-space:nowrap;
      text-shadow:none;
      filter:none;
    }
    .presence-copy .mode-thought,
    .orb-copy .mode-thought{
      max-width:360px;
      color:#fff;
      font-family:"Poppins",sans-serif;
      font-size:clamp(14.5px,3.7vw,16.5px);
      line-height:1.48;
      font-weight:600;
      letter-spacing:.005em;
      text-wrap:balance;
    }
    /* Presence copy floats directly over the photograph: contrast comes from the letters,
       never from a card, box, glow, or scrim that hides the living sky. */
    .presence-copy{
      text-shadow:none;
      isolation:isolate;
      padding:24px 20px 26px;
      text-align:center;
      display:flex;
      flex-direction:column;
      align-items:center;
    }
    .presence-copy .mode-title{
      width:100%;
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
    }
    .presence-copy .mode-name,
    .presence-copy .mode-tagline,
    .presence-copy .mode-thought{
      width:100%;
      margin-left:auto;
      margin-right:auto;
      text-align:center;
    }
    .presence-copy::before{content:none}
    .presence-copy .eyeline{
      background:transparent;
      box-shadow:none;
      text-shadow:0 2px 2px rgba(0,0,0,.98),0 6px 15px rgba(0,0,0,.92),0 12px 28px rgba(0,0,0,.68);
      filter:none;
    }
    .presence-copy .mode-name,
    .presence-copy .mode-thought{
      text-shadow:0 2px 2px rgba(0,0,0,1),0 5px 14px rgba(0,0,0,.96),0 11px 28px rgba(0,0,0,.76);
      filter:none;
    }
    .presence-copy .mode-tagline,
    .orb-copy .mode-tagline{
      width:auto;
      max-width:100%;
      align-self:center;
      margin-left:auto;
      margin-right:auto;
      font-size:clamp(23px,6.8vw,28px);
      color:rgba(5,8,18,.14);
      -webkit-text-stroke:2.1px rgba(255,255,252,1);
      text-align:center;
      text-shadow:none;
      filter:drop-shadow(0 2px 2px rgba(0,0,0,.82)) drop-shadow(0 6px 13px rgba(0,0,0,.5));
    }
    .talk-btn{
      box-shadow:inset 0 1px 1px rgba(255,255,255,.66),inset 0 -8px 20px rgba(31,35,72,.09),0 7px 18px color-mix(in srgb,var(--mode-shadow) 52%,transparent),0 11px 24px rgba(10,9,36,.18);
    }
    .talk-btn span{text-shadow:0 1px 4px rgba(3,7,25,.72),0 1px 1px rgba(3,7,25,.76)}
    .talk-btn svg{filter:drop-shadow(0 1px 2px rgba(4,8,28,.72)) drop-shadow(0 0 4px color-mix(in srgb,var(--mode-shadow) 52%,transparent))}
    .talk-btn b{filter:drop-shadow(0 1px 3px rgba(3,7,25,.72))}

    /* The active view control follows the current mode palette. */
    .switcher button.is-active{background:linear-gradient(120deg,var(--mode-1),var(--mode-2) 58%,var(--mode-3));box-shadow:inset 0 1px rgba(255,255,255,.46),0 4px 16px var(--mode-shadow);color:#fff;text-shadow:0 1px 6px rgba(8,18,42,.7);transition:background .65s ease,box-shadow .65s ease,color .3s ease}

    @media (prefers-reduced-motion:reduce){
      .stage{animation:none}
      .welcome-slide{transition-duration:.01ms}
      .closing-lead,.intro-followup{animation:none;filter:none;transform:none}
    }

    /* Fluid safeguards: preserve the composition while letting every layer reflow cleanly. */
    html,body{width:100%;overflow:hidden}
    .stage{max-width:100vw;min-height:0}
    .orb-wrap{width:min(48vw,23vh,198px)}
    .presence-copy,.orb-copy{max-width:calc(100% - 32px);margin-inline:auto}
    .presence-copy .mode-title,.orb-copy .mode-title{font-size:clamp(25px,7.8vw,32px)}
    .mode-thought{overflow-wrap:anywhere}

    @media (max-width:360px){
      .presence-copy,.orb-copy{left:16px;right:16px}
      .presence-copy .mode-thought,.orb-copy .mode-thought{font-size:clamp(12.5px,4.25vw,15px);line-height:1.4}
      .switcher button{padding-inline:13px;font-size:12px}
      .chat-open{right:12px;width:38px;height:38px}
      .topbar{padding-left:12px;padding-right:12px}
      .mode-btn{font-size:clamp(8px,2.7vw,9.5px);letter-spacing:0}
    }

    @media (max-height:640px){
      .orb-view:after{inset:82px 12px 148px}
      .orb-wrap{top:14%;width:min(42vw,22vh,148px)}
      .identity{top:max(64px,calc(env(safe-area-inset-top) + 58px));font-size:11px}
      .orb-copy{bottom:176px}
      .presence-copy{top:32%}
      .presence-copy .mode-title,.orb-copy .mode-title{margin-bottom:8px}
      .presence-copy .mode-thought,.orb-copy .mode-thought{font-size:12px;line-height:1.32}
      .model-picker{top:43%;padding:6px 10px;font-size:9px}
      .stage.presence-active>.model-picker{top:52%}
      .controls{padding-inline:12px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
      .modes{margin-bottom:5px;padding:2px}
      .mode-btn{padding-block:5px 4px}
      .mode-btn:before{margin-bottom:3px}
      .status{height:15px;margin:2px 0 4px;font-size:10px}
      .talk-row{grid-template-columns:42px 1fr 42px;gap:8px}
      .talk-btn{height:46px;font-size:14px}
      .mini-control{height:42px}
    }

    @media (orientation:portrait) and (max-width:420px) and (max-height:560px){
      .welcome{inset:62px 10px 122px;padding:8px}
      .welcome-shell{padding:12px 14px 30px;border-radius:22px}
      .welcome-copy{min-height:110px}
      .welcome-slide,.welcome-slide.tagline{font-size:clamp(18px,7vw,23px)}
      .closing-lead,.closing-outline{font-size:clamp(19px,7.5vw,25px)}
      .closing-sub{margin-top:5px;font-size:10px}
      .welcome-indicators{bottom:10px}
      .orb-view:after{inset:68px 8px 116px}
      .orb-wrap{top:14%;width:min(35vw,22vh,112px)}
      .orb-copy{top:45%;bottom:auto}
      .presence-copy{top:31%}
      .model-picker{top:38%}
      .stage.presence-active>.model-picker{top:54%}
      .controls{padding-inline:8px}
      .modes{gap:2px}
      .talk-row{grid-template-columns:38px 1fr 38px;gap:6px}
      .talk-btn{height:42px;font-size:13px}
      .mini-control{height:38px}
    }

    @media (orientation:landscape) and (max-height:560px){
      body{padding:8px}
      .stage{width:calc(100vw - 16px);height:calc(100svh - 16px);border-radius:24px}
      .welcome{inset:58px 12px 112px;padding:8px}
      .welcome-shell{padding:10px 18px 28px;border-radius:22px}
      .welcome-copy{min-height:92px}
      .welcome-slide,.welcome-slide.tagline{font-size:clamp(18px,4.2vh,24px)}
      .closing-lead,.closing-outline{font-size:clamp(19px,4.8vh,27px)}
      .closing-sub{margin-top:4px;font-size:11px}
      .welcome-indicators{bottom:9px}
      .orb-view:after{inset:58px 10px 108px}
      .orb-wrap{left:25%;top:23%;width:min(22vw,34vh,148px)}
      .orb-copy{left:50%;right:22px;top:25%;bottom:auto;max-width:none}
      .presence-copy{top:37%;left:18%;right:18%;max-width:none}
      .model-picker{left:25%;top:58%;padding:6px 10px;font-size:9px}
      .stage.presence-active>.model-picker{left:50%;top:57%}
      .identity{top:max(48px,calc(env(safe-area-inset-top) + 42px));font-size:10px}
      .controls{padding:0 12px max(7px,env(safe-area-inset-bottom))}
      .modes{margin-bottom:4px;padding:2px}
      .mode-btn{padding-block:4px 3px}
      .mode-btn:before{display:none}
      .status{height:14px;margin:1px 0 3px;font-size:9px}
      .talk-row{grid-template-columns:38px 1fr 38px;gap:7px}
      .talk-btn{height:40px;font-size:13px}
      .mini-control{height:38px}
      .chat-panel{width:min(72%,390px)}
    }

    @media (min-width:620px){
      .stage{width:min(430px,calc(100vw - 48px));min-height:0}
    }
    @media (min-width:620px) and (orientation:landscape) and (max-height:560px){
      .stage{width:calc(100vw - 16px)}
    }

    /* Tablet and desktop are the same experience, opened up rather than framed as a phone. */
    @media (min-width:620px) and (min-height:561px){
      body{padding:16px}
      .stage{width:min(760px,calc(100vw - 32px));height:calc(100svh - 32px);border-radius:30px}
      .welcome{inset:88px 28px 166px}
      .welcome-shell{max-width:700px;margin:auto}
      .orb-view:after{inset:96px 24px 168px}
      .orb-wrap{width:min(32vw,25vh,220px)}
      .presence-copy,.orb-copy{left:12%;right:12%}
      .controls{left:50%;right:auto;width:min(700px,calc(100% - 36px));transform:translateX(-50%)}
      .chat-panel{width:min(55%,430px)}
    }

    @media (min-width:900px) and (min-height:561px){
      body{padding:0;background:#111430}
      .stage{width:100vw;height:100svh;border:0;border-radius:0;box-shadow:none}
      .orb-view:after{inset:96px max(34px,calc((100vw - 1220px)/2)) 156px;border-radius:38px}
      .orb-wrap{left:32%;top:25%;width:min(25vw,34vh,310px)}
      .orb-copy{left:52%;right:max(7%,calc((100vw - 1220px)/2));top:34%;bottom:auto;max-width:520px;margin:0;text-align:center}
      .orb-copy .mode-title,.presence-copy .mode-title{font-size:clamp(32px,3.2vw,48px)}
      .orb-copy .mode-tagline,.presence-copy .mode-tagline{font-size:clamp(29px,2.8vw,40px)}
      .orb-copy .mode-thought,.presence-copy .mode-thought{font-size:clamp(15px,1.25vw,18px);max-width:500px;line-height:1.5}
      .presence-copy{top:39%;left:50%;right:auto;width:min(620px,calc(100% - 64px));max-width:none;transform:translate(-50%,-50%)}
      .model-picker{left:32%;top:68%}
      .stage.presence-active>.model-picker{left:50%;top:61%}
      .controls{left:50%;right:auto;width:min(900px,calc(100% - 64px));padding:0 0 24px;transform:translateX(-50%);background:linear-gradient(180deg,transparent 0%,rgba(14,13,50,.34) 20%,rgba(13,16,47,.86) 100%)}
      .modes{width:min(620px,100%);margin:0 auto 10px}
      .talk-row{width:min(660px,100%);margin:0 auto;grid-template-columns:54px 1fr 54px}
      .status{margin-bottom:8px}
      .talk-btn{height:60px}
      .mini-control{height:54px}
      .welcome{inset:96px max(34px,calc((100vw - 1220px)/2)) 156px;padding:22px 40px}
      .welcome-shell{width:100%;max-width:none;padding-bottom:64px}
      .welcome-slide{font-size:clamp(30px,3vw,46px)}
      .closing-lead{font-size:clamp(38px,4vw,58px)}
      .closing-outline{font-size:clamp(35px,3.7vw,54px)}
      .closing-sub{max-width:620px;font-size:clamp(14px,1.2vw,18px)}
      .stage.intro-active .orb-wrap{left:50%;top:24%;width:min(25vw,34vh,310px)}
      .chat-panel{width:min(38%,460px)}
    }

    @media (min-width:1500px) and (min-height:800px){
      .orb-wrap{left:34%;top:24%;width:min(22vw,35vh,350px)}
      .orb-copy{left:54%;right:12%;top:35%}
      .model-picker{left:34%;top:69%}
      .stage.intro-active .orb-wrap{left:50%;width:min(22vw,35vh,350px)}
    }

    @media (max-width:300px){
      .switcher button{padding-inline:10px;font-size:11px}
      .chat-open{right:8px;width:34px;height:34px}
      .presence-copy,.orb-copy{left:10px;right:10px}
      .presence-copy{padding-inline:8px}
      .presence-copy .mode-title,.orb-copy .mode-title{font-size:clamp(21px,9vw,27px)}
      .presence-copy .mode-tagline,.orb-copy .mode-tagline{font-size:clamp(19px,8vw,24px)}
      .controls{padding-inline:6px}
      .modes{gap:1px}
      .talk-row{grid-template-columns:36px 1fr 36px;gap:5px}
      .talk-btn{font-size:12px}
    }

    /* The introduction is one quiet composition with the orb, no split copy or zoom. */
    .welcome{padding:0;background:transparent}
    .welcome-shell{
      background:transparent;
      box-shadow:none;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
      animation:intro-calm 1.25s ease-out both;
    }
    .welcome-copy{position:absolute;left:20px;right:20px;top:51%;height:auto;min-height:0;overflow:visible}
    .identity-intro{position:static;inset:auto;transition:opacity 1.25s ease}
    .closing-stack{gap:5px}
    .closing-lead,.intro-followup{animation:none!important;transform:none!important;filter:none!important;opacity:1!important}
    .intro-followup{gap:5px}
    @keyframes intro-calm{from{opacity:0}to{opacity:1}}
    .stage.intro-active .orb-wrap{opacity:1}

    /* The voice control is luminous on its own; no dark or hard cast shadow behind it. */
    .talk-btn{
      box-shadow:inset 0 1px 1px rgba(255,255,255,.66),inset 0 -7px 18px rgba(31,35,72,.07),0 6px 16px color-mix(in srgb,var(--mode-shadow) 34%,transparent)!important;
    }

    @media (min-width:900px) and (min-height:561px){
      /* Align the copy to the orb's optical center. */
      .orb-copy{top:41%;transform:translateY(-50%)}
      .presence-copy{top:39%}

      /* Keep the four modes within the large glass frame, clear of both orb and copy. */
      .controls{background:transparent}
      .modes{
        position:absolute;
        left:50%;
        bottom:calc(100% + 54px);
        width:min(620px,100%);
        margin:0;
        transform:translateX(-50%);
      }

      /* During the greeting, the orb and the complete sentence share one composition. */
      .stage.intro-active .orb-wrap{left:32%;top:25%}
      .welcome-shell{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:28px 48px}
      .welcome-copy{position:static;grid-column:2;width:100%;padding:0 24px}
      .identity-intro{width:100%}
    }
    @media (min-width:1500px) and (min-height:800px){
      .orb-copy{top:41.5%}
      .stage.intro-active .orb-wrap{left:34%;top:24%}
    }

    /* Final presence QA: two deliberate lines, a centered Mentor tagline, and restrained light. */
    .presence-copy .mode-thought{display:flex;flex-direction:column;align-items:center;gap:1px;width:100%;max-width:none;font-size:clamp(11px,3.35vw,16.5px);line-height:1.42}
    .presence-copy .thought-line{display:block;white-space:nowrap;text-align:center}
    .stage.mode-mentor .presence-copy .mode-tagline{display:block;width:100%;text-align:center;align-self:center}
    .presence-copy .mode-tagline,.orb-copy .mode-tagline{filter:drop-shadow(0 1px 1px rgba(0,0,0,.56)) drop-shadow(0 3px 7px rgba(0,0,0,.28))}
    .controls{background:transparent!important}
    .talk-btn{filter:none;background-color:transparent}
    @media (prefers-reduced-motion:reduce){
      .scene .sky-motion,.scene .water-motion{animation:none!important}
    }
    @media (min-width:900px) and (min-height:561px){
      .orb-wrap{left:32%;top:42%;transform:translate(-50%,-50%)}
      .orb-wrap.is-pressed{transform:translate(-50%,-50%) scale(.92)}
      .orb-copy{left:52%;right:max(7%,calc((100vw - 1220px)/2));top:42%;transform:translateY(-50%)}
      .stage.intro-active .orb-wrap{left:32%;top:42%;transform:translate(-50%,-50%)}
      .welcome-shell{display:block;padding:28px 48px}
      .welcome-copy{position:absolute;left:50%;right:0;top:43.5%;width:auto;padding:0 24px;transform:translateY(-50%)}
      .modes{bottom:calc(100% + 92px)}
    }
    @media (min-width:1500px) and (min-height:800px){
      .orb-wrap,.stage.intro-active .orb-wrap{left:34%;top:42%}
      .orb-copy{left:54%;top:42%}
    }

    /* Keep the model selector attached to the orb instead of drifting toward the mode tabs. */
    .model-picker{top:calc(16.5% + min(48vw,23vh,198px) + 12px)}
    @media (max-height:640px){
      .model-picker{top:calc(14% + min(42vw,22vh,148px) + 10px)}
    }
    @media (orientation:portrait) and (max-width:420px) and (max-height:560px){
      .model-picker{top:calc(14% + min(35vw,22vh,112px) + 10px)}
    }
    @media (orientation:landscape) and (max-height:560px){
      .model-picker{top:calc(23% + min(22vw,34vh,148px) + 10px)}
    }
    @media (min-width:620px) and (min-height:561px){
      .model-picker{top:calc(16.5% + min(32vw,25vh,220px) + 14px)}
    }
    @media (min-width:900px) and (min-height:561px){
      .model-picker{top:calc(42% + min(25vw,34vh,310px)/2 + 16px)}
    }
    @media (min-width:1500px) and (min-height:800px){
      .model-picker{top:calc(42% + min(22vw,35vh,350px)/2 + 18px)}
    }