:root{font-family:Arial,'Malgun Gothic',sans-serif;color:#e7f2ef;background:#091411;color-scheme:dark;--mint:#afdfcd;--line:#ffffff20}*{box-sizing:border-box}body{margin:0;height:100dvh;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:1px solid var(--line);color:inherit;background:#ffffff09;border-radius:9px;padding:10px 14px}button:hover{background:#ffffff18}button:focus-visible,a:focus-visible{outline:2px solid var(--mint);outline-offset:3px}header{height:76px;display:flex;align-items:center;gap:12px;padding:0 28px;border-bottom:1px solid var(--line)}header>a{text-decoration:none;font-size:30px;font-weight:bold;color:var(--mint);display:flex;align-items:center;gap:10px}header>a span{font-size:13px;color:#fff}.room-title{margin:auto;font-size:12px;letter-spacing:2px}.room-title span{display:block;letter-spacing:0;font-size:10px;color:#9bada5;margin-top:5px}header button{font-size:12px}main{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(390px,.9fr);height:calc(100dvh - 76px);padding:18px;gap:18px}.stage{position:relative;min-height:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:radial-gradient(ellipse at center,#36443b,#101c17)}#media{position:absolute;inset:0}#media img,#media video{width:100%;height:100%;object-fit:contain;display:block}#media video{position:absolute;inset:0;background:#101713}#media [hidden]{display:none}.stage:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#06100be8);pointer-events:none}.stage-top{position:absolute;top:22px;left:22px;z-index:1;display:flex;gap:9px;align-items:center;padding:10px 14px;border:1px solid #ffffff30;background:#091411a8;backdrop-filter:blur(10px);border-radius:30px;font-size:12px}.live-dot{width:7px;height:7px;border-radius:100%;background:var(--mint)}.preview-tag{color:#f0c48d;border-left:1px solid var(--line);padding-left:8px}.stage-bottom{position:absolute;bottom:28px;left:28px;right:28px;z-index:1}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--mint)}h1{font-size:clamp(24px,3vw,42px);letter-spacing:-1.5px;margin:10px 0 14px}#caption{font-size:16px;line-height:1.7;max-height:170px;overflow:auto;white-space:pre-wrap;text-shadow:0 1px 3px #000}#video-label{display:block;color:#b3beb7;font-size:10px;margin-top:14px}.conversation{min-height:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#211e18;display:flex;flex-direction:column}.conversation-title{background:#10221b;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}h2{font-size:20px;margin:7px 0 0;letter-spacing:-.5px}.online{font-size:10px;color:var(--mint)}iframe{width:100%;flex:1;min-height:0;border:0}aside{position:fixed;inset:86px 20px 20px auto;width:min(540px,calc(100vw - 40px));z-index:5;background:#13251fee;border:1px solid #578574;border-radius:18px;box-shadow:0 20px 80px #000c;backdrop-filter:blur(22px);padding:24px;overflow:auto}aside[hidden]{display:none}.settings-heading{display:flex;align-items:center;justify-content:space-between}.settings-heading button{font-size:24px}aside>p{font-size:12px;line-height:1.8;color:#b7c8bf}aside>small{font-size:10px;line-height:1.8;color:#9cb1a5;display:block;margin-top:12px}.slot{padding:15px 0;border-top:1px solid var(--line)}.slot-head{display:flex;justify-content:space-between;gap:8px}.slot strong{font-size:14px}.slot p{font-size:11px;color:#b7c8bf;margin:7px 0;overflow-wrap:anywhere}.slot-actions{display:flex;flex-wrap:wrap;gap:6px}.slot-actions button{padding:7px 10px;font-size:11px}.slot input{display:none}.slot [aria-pressed=true]{border-color:var(--mint);background:#356550}#automatic{width:100%;color:var(--mint)}#save-status{min-height:20px;color:#f0c48d}@media(max-width:900px){header{padding:0 14px;height:64px}.room-title{display:none}header>a{margin-right:auto}main{height:calc(100dvh - 64px);grid-template-columns:1fr 1fr;gap:10px;padding:10px}.stage-bottom{left:18px;right:18px;bottom:18px}h1{font-size:27px}.conversation-title{padding:14px}h2{font-size:17px}}@media(max-width:650px){body{height:auto;overflow:auto}header{position:sticky;top:0;z-index:3;background:#091411}header>a span{font-size:10px}header button{padding:8px;font-size:10px}main{display:flex;flex-direction:column;height:auto}.stage{height:44dvh;min-height:280px;flex-shrink:0}.conversation{height:70dvh;min-height:480px}.stage-bottom{bottom:12px}h1{font-size:25px;margin:5px 0}#caption{font-size:13px;max-height:80px}.stage-top{top:12px;left:12px}.conversation-title{padding:10px 14px}aside{inset:74px 10px 10px;width:auto}.stage-bottom .eyebrow{display:none}}
.stage-embedded header>a{display:none}.stage-embedded header{height:52px;padding:0 16px}.stage-embedded .room-title{margin-right:auto;margin-left:0}.stage-embedded main{height:calc(100dvh - 52px);padding:12px;gap:12px}.stage-bottom h1{font-size:clamp(22px,2.6vw,36px);line-height:1.25}@media(max-width:650px){.stage-embedded main{height:auto}.stage-embedded .room-title{display:none}.stage-embedded header{justify-content:flex-end}}
.stage-hero body{height:100dvh;overflow:hidden}.stage-hero .room-title{display:none}.stage-hero header{height:43px;justify-content:flex-end;padding:0 9px;gap:6px}.stage-hero header button{font-size:10px;padding:7px 9px}.stage-hero main{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(200px,.85fr) minmax(310px,1.15fr);height:calc(100dvh - 43px);padding:8px;gap:8px}.stage-hero .stage{min-height:0;height:auto;border-radius:12px}.stage-hero .stage-bottom{left:15px;right:15px;bottom:12px}.stage-hero h1{font-size:22px;line-height:1.2;margin:5px 0}.stage-hero #caption{font-size:11px;line-height:1.5;max-height:44px;margin:7px 0}.stage-hero .stage-bottom .eyebrow,.stage-hero #video-label{display:none}.stage-hero .stage-top{top:10px;left:10px;padding:7px 10px;font-size:10px}.stage-hero .conversation{height:auto;min-height:0;border-radius:12px}.stage-hero .conversation-title{display:none}.stage-hero aside{inset:50px 8px 8px;width:auto;padding:16px}
#video-start{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:2;background:#173d32ed;border:1px solid #b4dfcb;color:#fff;padding:14px 22px;border-radius:30px;box-shadow:0 8px 30px #0006}#video-start[hidden]{display:none}
/* Keep the character video free of text overlays. */
.stage .stage-top,.stage .stage-bottom{display:none!important}
.stage:after{display:none}
.conversation-title{padding:10px 16px}.conversation-title h2{font-size:18px;margin-top:4px}
@media(min-width:901px){main{grid-template-columns:minmax(0,1fr) minmax(440px,1fr)}}
/* Prioritize readable conversation alongside a smaller portrait. */
@media(min-width:651px){main,.stage-embedded main{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:10px;padding:10px}.stage-embedded header{height:40px}.stage-embedded main{height:calc(100dvh - 40px)}.conversation-title{padding:8px 16px}.conversation-title .eyebrow{display:none}.conversation-title h2{font-size:19px;margin:0}}
@media(max-width:650px){.stage{height:26dvh;min-height:150px}.conversation{height:78dvh;min-height:500px}}

.conversation>iframe{display:block;flex:1 1 0;height:100%;min-height:0}
#configure{display:none!important}

.consult-modes{display:flex;gap:6px;padding:10px;flex-shrink:0;border-bottom:1px solid var(--line);background:#102b25}.consult-modes button{flex:1;border-radius:9px;font-size:13px;padding:10px 7px}.consult-modes button[aria-pressed="true"]{background:#316455;border-color:#a2d6c1;color:#fff}.conversation>iframe[hidden]{display:none!important}

/* Larger conversation pane; character remains visible beside it. */
@media(min-width:651px){main,.stage-embedded main{grid-template-columns:minmax(0,3fr) minmax(0,7fr)}.stage-embedded header{height:32px}.stage-embedded main{height:calc(100dvh - 32px);padding:8px;gap:8px}.consult-modes{padding:7px;gap:6px}.consult-modes button{padding:8px;font-size:12px}}
@media(max-width:650px){.stage-embedded body{height:100dvh;overflow:hidden}.stage-embedded header{height:32px}.stage-embedded main{display:grid;height:calc(100dvh - 32px);grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(90px,23%) minmax(0,1fr);padding:6px;gap:6px}.stage-embedded .stage{height:auto;min-height:0}.stage-embedded .conversation{height:auto;min-height:0}.consult-modes{padding:6px;gap:6px}.consult-modes button{padding:7px;font-size:11px}}