*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#050307;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,sans-serif;-webkit-font-smoothing:antialiased;color:#fff}body.persona-jarvis{--accent: #5cc8ff;--accent-soft: rgba(92, 200, 255, .5);--accent-glow: rgba(92, 200, 255, .35);--accent-bg: rgba(76, 168, 232, .08);--bg-from: rgba(20, 30, 60, .55);--bg-to: rgba(8, 10, 25, .75)}body.persona-johanna{--accent: #e88ec8;--accent-soft: rgba(232, 142, 200, .5);--accent-glow: rgba(232, 142, 200, .4);--accent-bg: rgba(232, 110, 168, .08);--bg-from: rgba(50, 22, 60, .55);--bg-to: rgba(15, 8, 25, .75)}#orb-canvas{grid-area:robot;width:100%;height:100%;display:block;pointer-events:none;z-index:2;position:relative}#panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(1280px,95vw);aspect-ratio:16 / 9;max-height:92vh;padding:56px 80px 48px;border-radius:32px;background:linear-gradient(160deg,var(--bg-from),var(--bg-to));border:1px solid var(--accent-soft);box-shadow:0 0 80px var(--accent-glow),inset 0 0 120px #00000073;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:10;display:grid;grid-template-columns:1fr 1.2fr 1fr;grid-template-rows:auto auto auto 1fr auto auto auto;grid-template-areas:"star      star      star" "title     title     title" "subtitle  subtitle  subtitle" "left      robot     right" "tagline   tagline   tagline" "desc      desc      desc" "button    button    button";gap:14px 40px;align-items:center;justify-items:center}.star{grid-area:star;color:var(--accent);filter:drop-shadow(0 0 12px var(--accent-glow));animation:twinkle 3s ease-in-out infinite}@keyframes twinkle{0%,to{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}#persona-switch{position:fixed;top:18px;left:50%;transform:translate(-50%);display:flex;gap:4px;padding:4px;border:1px solid var(--accent-soft);border-radius:999px;background:#05050899;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:30}.persona-btn{padding:7px 16px;border:none;border-radius:999px;background:transparent;color:#ffffff8c;font-size:11px;letter-spacing:2.5px;font-weight:500;cursor:pointer;transition:all .25s ease}.persona-btn:hover{color:#fffffff2}.persona-btn.active{color:#fff;background:linear-gradient(135deg,var(--accent-soft),transparent);box-shadow:0 0 12px var(--accent-glow)}#panel-title{grid-area:title;font-size:56px;font-weight:300;letter-spacing:14px;color:#fff;text-shadow:0 0 24px var(--accent-glow);margin-top:4px}#panel-title .dot{color:var(--accent)}#panel-subtitle{grid-area:subtitle;font-size:13px;letter-spacing:6px;color:var(--accent);text-transform:uppercase;opacity:.9;margin-top:-6px}.features{list-style:none;display:flex;flex-direction:column;gap:36px;width:100%}#features-left{grid-area:left;align-items:flex-start}#features-right{grid-area:right;align-items:flex-end}.features li{display:flex;align-items:center;gap:12px;position:relative}#features-right li{flex-direction:row-reverse}.features .ico{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent-bg);border:1px solid var(--accent-soft);font-size:24px;box-shadow:0 0 18px var(--accent-glow),inset 0 0 10px var(--accent-bg);flex-shrink:0;transition:transform .25s ease}.features li:hover .ico{transform:scale(1.1)}.features label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#ffffffc7;font-weight:500;max-width:130px;line-height:1.3}#features-left,#features-right{min-height:320px}#panel-tagline{grid-area:tagline;font-size:14px;letter-spacing:5px;color:#ffffffeb;font-weight:600;text-transform:uppercase;margin-top:12px;text-align:center}#panel-desc{grid-area:desc;font-size:12px;color:#fff9;line-height:1.6;text-align:center;margin-top:4px}#mic-button{grid-area:button;margin-top:18px;display:flex;align-items:center;gap:10px;padding:12px 30px;border-radius:999px;border:1px solid var(--accent-soft);background:linear-gradient(135deg,var(--accent-bg),transparent);color:#ffffffeb;font-size:12px;letter-spacing:3px;font-weight:600;cursor:pointer;box-shadow:0 0 18px var(--accent-glow);transition:all .25s ease}#mic-button:hover{transform:scale(1.04);box-shadow:0 0 28px var(--accent-glow)}#mic-button:disabled{opacity:.5;cursor:not-allowed}.mic-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse-dot 1.6s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}#mic-button.is-listening{border-color:#e8505099;box-shadow:0 0 30px #e8505080}#mic-button.is-listening .mic-dot{background:#ef4444;box-shadow:0 0 10px #ef4444}#transcript-row{position:fixed;bottom:14px;left:50%;transform:translate(-50%);width:min(720px,92vw);text-align:center;z-index:12;pointer-events:none}#user-text{color:#ffffff8c;font-size:13px;font-style:italic;min-height:1em}#jarvis-text{color:var(--accent);font-size:13px;margin-top:4px;min-height:1em}#status-text{position:fixed;bottom:60px;left:50%;transform:translate(-50%);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#ffffff59;z-index:12;pointer-events:none}#connection-badge{position:fixed;top:18px;right:18px;display:flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--accent-soft);border-radius:20px;background:#05050899;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:30}#connection-dot{width:7px;height:7px;border-radius:50%;background:#ffffff26;transition:all .4s ease}#connection-badge.connected #connection-dot{background:#22c55e;box-shadow:0 0 7px #22c55e80}#connection-badge.disconnected #connection-dot{background:#ef4444;box-shadow:0 0 7px #ef444466;animation:pulse-red 1.4s ease-in-out infinite}@keyframes pulse-red{0%,to{opacity:1}50%{opacity:.35}}#connection-label{font-size:11px;letter-spacing:1.5px;color:#ffffff80}#mute-button{position:fixed;top:18px;left:18px;padding:7px 14px;border:1px solid var(--accent-soft);border-radius:999px;background:#05050880;color:#ffffff80;font-size:10px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;z-index:30}#mute-button.is-muted{background:#ef44441f;color:#ffa0a0e6}#error-text{position:fixed;top:60px;left:50%;transform:translate(-50%);color:#ff8080;font-size:12px;z-index:50;opacity:0;transition:opacity .4s ease;pointer-events:none}@media(max-width:700px){#panel{width:96vw;padding:40px 24px 28px;gap:10px 12px}#panel-title{font-size:32px;letter-spacing:6px}.features .ico{width:38px;height:38px;font-size:17px}.features label{font-size:8.5px;max-width:80px}}