:root{--navy:#030c21;--panel:#061126;--violet:#4825e3;--coral:#ff385c;--muted:#aeb9d4;--border:#2c3b5d;--radius:22px}
body{font-family:'Segoe UI',Arial,sans-serif}
#ui-language option,#match-language option{color:#000;background-color:#fff;color-scheme:light}
.island-note{position:relative;left:auto;bottom:auto;margin:20px 0 0 35px}
@media(max-width:1400px){.island-note{margin-left:22px}}
@media(max-width:1180px){.island-note{margin-left:18px}}
.chat-page{background-image:linear-gradient(180deg,#020a27fa 0%,#020a27f2 30%,#020a27d9 50%,#020a2730 73%,#020a2720),linear-gradient(90deg,#00091f08,#00081ca6 40%,#03081de0),url('../img/mauritius-coast.jpg')}
.conversation.chat-hidden{grid-template-columns:minmax(0,1fr)}
.program-canvas[data-scene=screen]{display:block}
.program-canvas[data-scene=screen] .presenter-person{position:absolute;inset:0}
.program-canvas[data-scene=screen] .guest-person{position:absolute;inset:auto 3% 5% auto;width:28%;height:35%;z-index:3;border:1px solid #fff5;overflow:hidden;border-radius:6px}
.program-canvas[data-scene=audio] video{visibility:hidden}
.program-canvas[data-scene=audio] .person-placeholder{display:grid!important}
.local-tile .quality-badge>.icon:first-child{color:#96a0b9}
.local-tile.has-camera .quality-badge>.icon:first-child{color:#20e88b}
.program-canvas[data-scene=pip-presenter] .presenter-person>.lower-third,.program-canvas[data-scene=pip-guest] .guest-person>.lower-third,.program-canvas[data-scene=screen] .presenter-person>.lower-third{right:35%}
.program-canvas[data-scene=pip-presenter] .guest-person .lower-third strong,.program-canvas[data-scene=pip-guest] .presenter-person .lower-third strong{font-size:clamp(9px,1vw,16px)}
.program-canvas[data-scene=pip-presenter] .guest-person .lower-third small,.program-canvas[data-scene=pip-guest] .presenter-person .lower-third small{font-size:7px;letter-spacing:1px}
.program-canvas[data-scene=pip-presenter] .guest-person .lower-third span,.program-canvas[data-scene=pip-guest] .presenter-person .lower-third span{font-size:9px}
@media(min-width:1401px){.app-header>.brand{margin-right:79px}.app-header .mode-button{padding:0 28px}.header-media{min-width:219px}.preferences-bar{grid-template-columns:1.27fr 1fr 1fr}}
@media(max-width:540px){.chat-page{background-image:linear-gradient(180deg,#020a27ef,#020a27a0 50%,#020a2770),url('../img/mauritius-coast.jpg')}}
.brand-mark{display:block;width:75px;height:75px;flex-shrink:0}
.brand-mark>svg{display:block;width:100%;height:100%;overflow:visible;animation:brand-bloom 6s ease-in-out infinite}
.brand-mark g>ellipse{transform-box:view-box;transform-origin:0 0;animation:brand-petal 6s cubic-bezier(.18,.8,.25,1.15) infinite both}
.brand-mark g>ellipse:nth-of-type(2),.brand-mark g>ellipse:nth-of-type(10){animation-delay:.06s}
.brand-mark g>ellipse:nth-of-type(3){animation-delay:.12s}
.brand-mark g>ellipse:nth-of-type(4){animation-delay:.18s}
.brand-mark g>ellipse:nth-of-type(5){animation-delay:.24s}
.brand-mark g>ellipse:nth-of-type(6){animation-delay:.3s}
.brand-mark g>ellipse:nth-of-type(7){animation-delay:.36s}
.brand-mark g>ellipse:nth-of-type(8){animation-delay:.42s}
.brand-mark g>ellipse:nth-of-type(9){animation-delay:.48s}
.sidebar-ad{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;align-items:center;width:calc(100% - 38px);max-width:188px;aspect-ratio:1;margin:22px auto 0;overflow:hidden;border-radius:20px;background:#151d38;color:#fff;box-shadow:0 12px 35px #02061955;text-align:center;transition:transform .25s,box-shadow .25s}
.sidebar-ad:before{content:'';position:absolute;z-index:-2;inset:-50%;background:conic-gradient(from 0deg,#5846ec,#bd7cf6,#fa759f,#fbc85e,#3cd3c7,#5846ec);animation:ad-orbit 8s linear infinite}
.sidebar-ad:after{content:'';position:absolute;z-index:-1;inset:1.5px;border-radius:18.5px;background:radial-gradient(ellipse at 15% 0%,#6742b955,transparent 70%),radial-gradient(ellipse at 100% 100%,#1cbbaa22,transparent 65%),#0c1730}
.sidebar-ad:hover{transform:translateY(-3px);box-shadow:0 15px 40px #583dd633}
.ad-eyebrow{font-size:8px;letter-spacing:2px;color:#b6addd;margin-bottom:12px}
.ad-copy{display:block;font-size:30px;font-weight:800;letter-spacing:1px;line-height:1.08}
.ad-copy>span{display:block;background:linear-gradient(110deg,#fff 20%,#c6b4ff 40%,#fff 50%,#ffc9a8 60%,#fff 80%);background-size:250% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:ad-letter-glow 5s ease-in-out infinite,ad-word-float 4s ease-in-out infinite}
.ad-copy>span:nth-child(2){animation-delay:.2s}
.ad-copy>span:nth-child(3){font-size:23px;margin-top:4px;animation-delay:.4s}
.ad-arrow{display:grid;place-items:center;width:25px;height:25px;margin-top:12px;border:1px solid #c6b4ff44;border-radius:50%;font-size:17px;color:#d0c5fa}
html[data-theme=light] .sidebar-ad{box-shadow:0 12px 30px #6552a025}
@keyframes brand-bloom{0%,100%{transform:rotate(-28deg) scale(.8)}23%,75%{transform:rotate(0) scale(1)}55%{transform:translateY(-2px) rotate(3deg) scale(1)}}
@keyframes brand-petal{0%,100%{scale:.08 .08;opacity:.2}14%{scale:1.06 1.06;opacity:1}23%,80%{scale:1 1;opacity:1}}
@keyframes ad-orbit{to{transform:rotate(360deg)}}
@keyframes ad-letter-glow{0%,100%{background-position:100% 50%}50%{background-position:0 50%}}
@keyframes ad-word-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@media(max-width:1400px){.brand-mark{width:60px;height:60px}.ad-copy{font-size:26px}.ad-copy>span:nth-child(3){font-size:20px}.ad-eyebrow{font-size:7px;margin-bottom:9px}.ad-arrow{margin-top:9px}}
@media(max-width:1180px){.ad-copy{font-size:23px}.ad-copy>span:nth-child(3){font-size:17px}.ad-eyebrow{letter-spacing:1px;margin-bottom:7px}.ad-arrow{width:21px;height:21px;margin-top:7px}}
@media(max-width:1000px){.brand-mark{width:53px;height:53px}.sidebar-ad{display:none}}
@media(max-width:900px){.brand-mark{width:47px;height:47px}}
@media(max-width:760px){.brand-mark{width:42px;height:42px}}
@media(max-width:390px){.brand-mark{width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){.brand-mark>svg,.brand-mark g>ellipse,.sidebar-ad:before,.ad-copy>span{animation:none!important}.sidebar-ad{transition:none}}
.ui-language{position:relative;gap:8px}
.ui-language>select{width:54px;padding:6px 21px 6px 0}
.ui-language>.icon:last-child{position:absolute;right:0;pointer-events:none}
.preference-heading{height:24px;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-3px 0 14px}
.preference-group .preference-heading h2{margin:0}
.share-button{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border:1px solid #a696ff35;border-radius:9px;background:#8270ed16;color:#d6ccff;transition:background .2s,transform .2s}
.share-button .icon{width:18px;height:18px}
.share-button:hover{background:#8270ed35;transform:translateY(-1px)}
.share-modal{max-width:460px}
.share-modal #share-url{font-size:14px}
.share-modal>.primary{display:flex;align-items:center;justify-content:center;gap:9px}
.share-modal>.primary .icon{width:19px;height:19px}
.share-options{display:flex;gap:10px;margin-top:12px}
.share-options>a{flex:1;text-align:center}
html[data-theme=light] .share-button{color:#6650c4;background:#6650c40b;border-color:#6650c42e}
html[data-theme=light] .share-button:hover{background:#6650c421}
@media(max-width:540px){.ui-language{gap:5px}.ui-language>select{width:44px;padding-right:19px}.preference-heading{height:15px;margin-bottom:10px;gap:5px}.share-button{width:24px;height:24px;border-radius:7px}.share-button .icon{width:15px;height:15px}}