.phone{position:relative;width:min(340px,74vw);aspect-ratio:956/1948;flex:none}
.phone .frame{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.phone .isl{position:absolute;z-index:4;top:3.39%;left:35.9%;width:28.4%;height:4.1%;background:#000;border-radius:999px}
.phone .scr{position:absolute;left:5.23%;right:5.23%;top:2.16%;bottom:2.31%;border-radius:12.6%/5.8%;overflow:hidden;container-type:inline-size;background:linear-gradient(180deg,#3b4460 0%,#2c3446 45%,#20262f 100%);color:#fff;font-family:"Manrope",system-ui,sans-serif}
.phone.shot .scr{display:none}
.phone.shot .frame{position:relative}
.s{position:absolute;inset:0;display:flex;flex-direction:column;font-size:4.2cqw;padding:0 6.5cqw}
.s-status{display:flex;justify-content:space-between;align-items:center;height:12cqw;padding:3cqw 4cqw 0;font-weight:600;font-size:4.4cqw}
.s-status i{font-style:normal;letter-spacing:.1em;font-size:3.4cqw;opacity:.9}
.s-title{font:700 6.2cqw/1.1 "Sora",sans-serif;margin:6cqw 0 1.5cqw;letter-spacing:-.02em}
.s-sub{font-size:3.6cqw;color:#b7c0cf}
.s-nav{margin:auto -6.5cqw 0;height:22cqw;background:#14181c;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 10cqw 4cqw;font-size:3.4cqw;color:#93979c}
.s-nav .ni{display:grid;justify-items:center;gap:1cqw}
.s-nav .ni svg{width:7cqw;height:7cqw}
.s-nav .ni.on{color:var(--mint)}
.s-nav .hub{width:15cqw;height:15cqw;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 .5cqw rgba(8,255,181,.35),0 0 6cqw rgba(8,255,181,.18);background:#1a2024;margin-top:-4cqw}
.s-nav .hub img{width:6.5cqw}
/* connect */
.dev-stage{position:relative;flex:1;display:grid;place-items:center;min-height:0}
.dev-stage>*{grid-area:1/1}
.bt-ic{position:relative;z-index:2;width:26cqw;height:26cqw;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#05110c;box-shadow:0 0 0 3cqw rgba(8,255,181,.12),0 4cqw 10cqw rgba(8,255,181,.35)}
.bt-ic svg{width:13cqw;height:13cqw}
.ring{position:absolute;width:60cqw;height:60cqw;border-radius:50%;box-shadow:inset 0 0 0 .4cqw rgba(8,255,181,.5);animation:ring 2.8s var(--ease) infinite;opacity:0}
.ring:nth-child(2){animation-delay:.9s}.ring:nth-child(3){animation-delay:1.8s}
@keyframes ring{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.chip{display:flex;align-items:center;gap:2.5cqw;padding:3.4cqw 4cqw;border-radius:4cqw;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.1);font-size:3.8cqw;margin-bottom:3cqw}
.chip .d{width:2.4cqw;height:2.4cqw;border-radius:50%;background:var(--mint);box-shadow:0 0 3cqw var(--mint)}
.chip .bt{margin-left:auto;color:#b7c0cf;font-family:"IBM Plex Mono",monospace;font-size:3.4cqw}
.s-btn{height:14cqw;border-radius:4cqw;display:grid;place-items:center;font-weight:600;font-size:4.4cqw;margin-bottom:5cqw}
.s-btn.mint{background:linear-gradient(120deg,#08ffb5,#50c9f8);color:#05110c}
.s-btn.stop{box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--red);display:flex;justify-content:center;gap:4cqw}
.s-btn.stop::before{content:"";width:5cqw;height:5cqw;border-radius:1cqw;background:var(--red)}
/* recording */
.timer{display:flex;justify-content:space-between;align-items:center;padding:4.5cqw 5cqw;border-radius:3cqw;box-shadow:inset 0 0 0 .3cqw rgba(8,255,181,.25);background:rgba(255,255,255,.04);margin-top:4cqw}
.timer b{font:600 7cqw/1 "Sora",sans-serif;font-variant-numeric:tabular-nums}
.eeg{flex:1;position:relative;overflow:hidden;margin:4cqw -6.5cqw 0;min-height:0}
.eeg .ln{position:absolute;left:0;top:32%;width:200%;height:36%;animation:eeg 4s linear infinite}
.eeg .ln.b{animation-duration:5.2s;top:36%}
.eeg svg{width:50%;height:100%;float:left}
@keyframes eeg{to{transform:translateX(-50%)}}
.legend{display:flex;justify-content:center;gap:6cqw;font-size:3.4cqw;color:#eaebed;margin-bottom:5cqw}
.legend span{display:flex;align-items:center;gap:2cqw}
.legend span::after{content:"";width:6cqw;height:.7cqw;border-radius:1cqw;background:var(--c)}
.rec-dot{display:inline-flex;align-items:center;gap:2cqw;font:500 3.2cqw/1 "IBM Plex Mono",monospace;color:var(--red);letter-spacing:.1em}
.rec-dot::before{content:"";width:2.2cqw;height:2.2cqw;border-radius:50%;background:var(--red);animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
/* ready */
.hex{position:relative;width:52cqw;margin:6cqw auto 6cqw;display:grid;place-items:center}
.hex img{width:100%}
.hex div{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.hex small{font-size:5cqw;color:#eaebed}
.hex b{font:700 11cqw/1 "Sora",sans-serif}
.kpi{margin-bottom:5cqw}
.kpi .r{display:flex;justify-content:space-between;font-size:4cqw;margin-bottom:2cqw}
.kpi .r b{font-weight:700}
.kpi .tr{height:2.2cqw;border-radius:2cqw;background:rgba(255,255,255,.12);overflow:hidden}
.kpi .tr i{display:block;height:100%;width:100%;border-radius:2cqw;background:linear-gradient(90deg,#08ffb5,#4fd8a0);transform-origin:0 50%;transform:scaleX(var(--v))}
.kpi.warn .tr i{background:linear-gradient(90deg,#f8d050,#f8a050)}
/* insight phone highlight */
.ins-phone{position:relative}
.ins-hl{position:absolute;left:7%;right:7%;z-index:5;border-radius:14px;box-shadow:0 0 0 1.5px var(--mint),0 0 40px rgba(8,255,181,.35);pointer-events:none;opacity:0}
/* console */
.console{border-radius:18px;overflow:hidden;background:#0d1013;box-shadow:0 0 0 1px var(--line),0 60px 120px -40px rgba(0,0,0,.8);font-family:"Manrope",sans-serif}
.cbar{height:40px;display:flex;align-items:center;gap:8px;padding:0 16px;background:#15191d;border-bottom:1px solid var(--line)}
.cbar i{width:11px;height:11px;border-radius:50%;background:#3a3f45}
.cbar .url{margin:0 auto;font:500 12px/1 var(--mono);color:var(--ink-3);padding:7px 14px;border-radius:8px;background:#0d1013}
.cbody{display:grid;grid-template-columns:minmax(0,1fr)}
.cside{display:flex;flex-direction:column;align-items:center;gap:20px;padding:20px 0}
.cside img{width:26px}
.cside span{width:18px;height:18px;border-radius:5px;box-shadow:inset 0 0 0 1.5px #4a5058}
.cmain{padding:clamp(16px,2.4vw,28px);display:grid;gap:18px}
.chead{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.chead h4{font:600 clamp(16px,1.6vw,20px)/1.2 var(--disp);letter-spacing:-.01em}
.chead .live{display:flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);color:var(--red);letter-spacing:.1em}
.chead .live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);animation:blink 1.2s steps(2) infinite}
.chead .tm{margin-left:auto;font:500 13px/1 var(--mono);color:var(--ink-2)}
.cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ac{background:#1a1e22;border-radius:12px;padding:14px;display:grid;gap:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.ac-top{display:flex;align-items:center;gap:10px}
.ac-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:600 12px/1 var(--disp);background:#2a3036;color:var(--ink);flex:none}
.ac-top>div:not(.ac-hx){min-width:0}.ac-rl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-nm{font-weight:600;font-size:14px;color:var(--ink);line-height:1.2}
.ac-rl{font-size:12px;color:var(--ink-3)}
.ac-hx{margin-left:auto;position:relative;width:46px;flex:none}
.ac-hx img{width:100%}
.ac-hx b{position:absolute;inset:0;display:grid;place-items:center;font:700 12px/1 var(--disp);color:#fff}
.ac-eeg{height:34px;overflow:hidden;position:relative}
.ac-eeg .ln{position:absolute;inset:0;width:200%;animation:eeg 3.4s linear infinite}
.ac-eeg svg{width:50%;height:100%;float:left}
.ac-row{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3)}
.ac-row b{color:var(--ink);font-weight:600}
.ac-tr{height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.ac-tr i{display:block;height:100%;background:var(--grad);transform-origin:0 50%;transform:scaleX(var(--v))}
.ac.warn .ac-tr i{background:linear-gradient(90deg,#f8d050,#f8a050)}
.ac.alert .ac-tr i{background:linear-gradient(90deg,#f87a50,#e55959)}
@media (max-width:767px){.cgrid{grid-template-columns:minmax(0,1fr)}.cgrid .ac:nth-child(n+4){display:none}.cbody{grid-template-columns:minmax(0,1fr)}.cside{display:none}.chead .tm{margin-left:0}}
@media (prefers-reduced-motion:reduce){.ring,.eeg .ln,.ac-eeg .ln,.rec-dot::before,.chead .live::before{animation:none}.ring{opacity:.4}}

/* multi captions */
.multi-cap{display:flex;gap:18px;align-items:flex-start;margin:0 0 20px;max-width:640px}
.multi-cap .k{font:500 12px/1 var(--mono);color:var(--mint);letter-spacing:.14em;padding-top:5px}
.multi-cap b{display:block;font:600 clamp(19px,1.6vw,22px)/1.3 var(--disp);color:var(--ink);letter-spacing:-.01em;margin-bottom:6px}
.multi-cap span:not(.k){color:var(--ink-3);font-size:15px}
.console+.multi-cap{margin-top:clamp(56px,7vw,96px)}
/* grouped sessions table */
.sess{border-radius:18px;background:linear-gradient(180deg,#232b38,#1c222c);box-shadow:0 0 0 1px var(--line),0 60px 120px -40px rgba(0,0,0,.8);overflow-x:auto;scrollbar-width:thin}
.sess-in{min-width:960px;font-family:var(--sans)}
.st-head,.st-row{display:grid;grid-template-columns:minmax(220px,2.2fr) 1.1fr repeat(4,minmax(0,1fr)) 64px 28px;align-items:center;gap:0 20px;padding:0 24px}
.st-head{height:52px;border-bottom:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink-2)}
.st-head>span:nth-child(n+2){text-align:center}
.st-head>span:nth-child(n+3){text-align:right}
.st-date{padding:22px 24px 18px;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line)}
.st-row{min-height:84px;border-bottom:1px solid var(--line)}
.st-parent{background:rgba(80,201,248,.05);box-shadow:inset 0 1px 0 rgba(80,201,248,.25)}
.st-s{display:flex;align-items:center;gap:14px;min-width:0}
.st-tg{width:34px;height:34px;border-radius:10px;background:transparent;border:1px solid var(--line-2);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;flex:none;transition:rotate .4s var(--ease),border-color .3s}
.st-tg:hover{border-color:var(--mint);color:var(--mint)}
.st-group:not(.open) .st-tg{rotate:-90deg}
.st-gi{width:40px;height:44px;flex:none;display:grid;place-items:center;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(160deg,#2f6f9c,#1f4a6a);color:#8fd8ff}
.st-gi svg{width:18px;height:18px}
.st-nm{font-weight:600;font-size:16px;color:var(--ink);line-height:1.2}
.st-gn{font:700 17px/1.2 var(--disp);letter-spacing:-.01em}
.st-sub{font-size:14px;color:var(--ink-3);margin-top:3px}
.st-l{width:22px;height:30px;border-left:1.5px solid #3e6a8a;border-bottom:1.5px solid #3e6a8a;border-bottom-left-radius:6px;margin:-24px 0 0 12px;flex:none}
.st-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:600 13px/1 var(--disp);color:#fff;flex:none}
.st-a{display:flex;justify-content:center}
.st-hx{position:relative;width:42px;height:46px;display:grid;place-items:center;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--hc)}
.st-hx::before{content:"";position:absolute;inset:1.5px;clip-path:inherit;background:linear-gradient(160deg,#27303b,#1b2129)}
.st-hx b{position:relative;font:700 11px/1 var(--sans);color:#fff}
.st-hx.o{--hc:#b88a3a}.st-hx.g{--hc:#2fae8a}.st-hx.r{--hc:#b04848}
.st-hx+.st-hx{margin-left:-6px}
.st-m{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"md v" "bar bar";align-items:baseline;gap:8px 10px;justify-items:end}
.st-md{grid-area:md;font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);justify-self:start}
.st-m b{grid-area:v;font:700 17px/1 var(--sans);letter-spacing:.02em}
.st-bar{grid-area:bar;width:min(100%,96px);height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.st-bar i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--v));border-radius:4px}
b.g{color:#2ee6a6}b.o{color:#f8b250}b.r{color:#f06a5a}
.st-bar i.g{background:#2ee6a6}.st-bar i.o{background:linear-gradient(90deg,#f8d050,#f8a050)}.st-bar i.r{background:linear-gradient(90deg,#f87a50,#e55959)}
.st-d{font-size:17px;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.st-go{font-size:26px;line-height:1;color:var(--ink-3);text-align:right}
.st-go.mint{color:var(--blue)}
.st-kids{display:grid}
.st-group:not(.open) .st-kids{display:none}
@media (max-width:767px){.multi-cap{gap:12px}.sess{overflow:hidden}.sess-in{min-width:0}.st-head,.st-row{grid-template-columns:minmax(0,1fr) auto 14px;gap:0 12px;padding:0 16px}.st-head>span:nth-child(n+4):not(:last-child),.st-m,.st-d{display:none}.st-date{padding:18px 16px 14px}.st-s{gap:10px}.st-row{min-height:76px}.st-tg{width:44px;height:44px}.st-l{margin-left:8px}.st-gn{font-size:15px}.st-gi{width:32px;height:36px}.st-gi svg{width:15px;height:15px}.st-sub{font-size:13px}}