


.ch-switch { display: inline-flex; align-items: stretch; gap: 0; padding: 3px; margin: 0 auto 0 clamp(18px, 2vw, 64px); border: 1px solid #4d3542; border-radius: 7px; background: #0e0d1166; }
.ch-switch button { position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 32px; padding: 5px clamp(12px, .9vw, 30px); border: 0; border-radius: 5px; color: #9d8e9f; background: transparent; font-size: var(--sb-small, 12px) !important; letter-spacing: .06em; transition: color .15s, background .15s; }
.ch-switch button::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #5b4a55; transition: background .15s, box-shadow .15s; }
.ch-switch button:hover { color: #f2eaf0; }
.ch-switch button[aria-pressed="true"] { color: #f2eaf0; background: linear-gradient(180deg, #bd2f5130, #bd2f5114); box-shadow: inset 0 0 0 1px #bd2f5166; }
.ch-switch button[aria-pressed="true"]::before { background: #d6b15c; box-shadow: 0 0 9px #d6b15c88; }
.sb-overlay[data-channel="key"] .sb-body,
.sb-overlay[data-channel="key"] .sb-sync,
.sb-overlay[data-channel="key"] .sb-swap { display: none !important; }


.kg-room { position: relative; flex: 1; min-height: 0; display: flex; background: #17191d; overflow: hidden; }
.kg-room[hidden] { display: none !important; }
.kg-room > .kc-wall { flex: 1; width: auto; height: auto; }

.kc-wall{--u:min(calc(100vw / 1323),calc(100vh / 860));position:relative;width:100%;height:100%;overflow:hidden;
 background:radial-gradient(ellipse at 50% 50%,#202328 0%,#1b1d21 55%,#17191d 100%);color:#f0eeef;
 font-family:-apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif;isolation:isolate}
.kc-wall *{box-sizing:border-box}
.kc-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.kc-ringline{fill:none;stroke:#363a43;stroke-width:1;stroke-dasharray:2 7;opacity:.7}
.kc-thread{fill:none;stroke-linecap:round;stroke:#ad9fd6;stroke-width:1.2;opacity:.42}
.kc-thread.kc-t-cap{stroke:#ec6e90;stroke-width:1.8;opacity:.85}
.kc-thread.kc-t-all{stroke:#d6b15c;stroke-width:1;opacity:.28}
.kc-thread.kc-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:kc-draw 1.1s ease-out forwards}
@keyframes kc-draw{to{stroke-dashoffset:0}}
.kc-pulse{fill:none;stroke:#d6b15c;stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center;animation:kc-pulse 2.4s ease-out 1 forwards}
@keyframes kc-pulse{0%{opacity:.5;transform:scale(.2)}100%{opacity:0;transform:scale(1)}}

.kc-seat{position:absolute;z-index:1;width:calc(var(--u)*330);display:flex;flex-direction:column;gap:calc(var(--u)*10)}
.kc-seat[data-pos="top"]{left:50%;top:calc(var(--u)*46);transform:translateX(-50%);align-items:center;text-align:center;width:calc(var(--u)*420)}
.kc-seat[data-pos="bottom"]{left:50%;bottom:calc(var(--u)*46);transform:translateX(-50%);align-items:center;text-align:center;width:calc(var(--u)*420);flex-direction:column-reverse}
.kc-seat[data-pos="ul"]{left:calc(var(--u)*56);top:calc(var(--u)*190)}
.kc-seat[data-pos="ll"]{left:calc(var(--u)*56);top:calc(var(--u)*500)}
.kc-seat[data-pos="ur"]{right:calc(var(--u)*56);top:calc(var(--u)*190);align-items:flex-end;text-align:right}
.kc-seat[data-pos="lr"]{right:calc(var(--u)*56);top:calc(var(--u)*500);align-items:flex-end;text-align:right}
.kc-head{display:flex;align-items:center;gap:calc(var(--u)*10)}
.kc-seat[data-pos="ur"] .kc-head,.kc-seat[data-pos="lr"] .kc-head{flex-direction:row-reverse}
.kc-sigil{width:calc(var(--u)*26);height:calc(var(--u)*26);flex:none;color:var(--kc-hue,#a3a5af);opacity:.55;transition:opacity .6s,filter .6s}
.kc-sigil svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.kc-name{font-size:calc(var(--u)*12.5);letter-spacing:.2em;text-transform:uppercase;color:#e09aab;font-weight:600}
.kc-time{font-size:calc(var(--u)*12);color:#a3a5af;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.kc-note{margin:0;min-height:calc(var(--u)*20)}
.kc-line{font-size:calc(var(--u)*19);line-height:1.38;color:#bfc0c8;font-weight:400;letter-spacing:.005em}
.kc-haiku{font-family:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;font-style:italic;
 font-size:calc(var(--u)*22);line-height:1.5;color:#c9c8cc}
.kc-haiku>span{display:block}
.kc-haiku>span:nth-child(2){padding-inline:calc(var(--u)*18)}
.kc-seat[data-pos="ur"] .kc-haiku>span:nth-child(2),.kc-seat[data-pos="lr"] .kc-haiku>span:nth-child(2){padding-inline:0 calc(var(--u)*18)}
.kc-seat[data-pos="ul"] .kc-haiku>span:nth-child(2),.kc-seat[data-pos="ll"] .kc-haiku>span:nth-child(2){padding-inline:calc(var(--u)*18) 0}
.kc-at{color:#ec6e90;font-style:normal}
.kc-seat.kc-has .kc-sigil{opacity:.95}
.kc-seat.kc-quiet .kc-name{color:#8e7d86}
.kc-seat.kc-quiet .kc-sigil{opacity:.3}

.kc-seat.kc-calls-cap .kc-line,.kc-seat.kc-calls-all .kc-line{color:#f0eeef;font-size:calc(var(--u)*21)}
.kc-seat.kc-calls-cap .kc-haiku,.kc-seat.kc-calls-all .kc-haiku{color:#f0eeef}
.kc-seat.kc-calls-cap .kc-sigil{filter:drop-shadow(0 0 calc(var(--u)*7) #ec6e90)}
.kc-seat.kc-calls-all .kc-sigil{filter:drop-shadow(0 0 calc(var(--u)*7) #d6b15c)}

.kc-seat.kc-named .kc-sigil{opacity:1;filter:drop-shadow(0 0 calc(var(--u)*6) #ad9fd6)}
.kc-seat.kc-named .kc-name{color:#f0b4c2}
.kc-seat.kc-named::before{content:"";position:absolute;left:calc(var(--u)*-14);top:calc(var(--u)*2);width:1px;height:calc(var(--u)*24);background:#ad9fd6;opacity:.7}
.kc-seat[data-pos="ur"].kc-named::before,.kc-seat[data-pos="lr"].kc-named::before{left:auto;right:calc(var(--u)*-14)}
.kc-seat[data-pos="top"].kc-named::before,.kc-seat[data-pos="bottom"].kc-named::before{display:none}

.kc-captain{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*12);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.kc-cap-mark{width:calc(var(--u)*44);height:calc(var(--u)*44);border-radius:50%;border:1px solid #4a4f5a;position:relative;transition:all .8s}
.kc-cap-mark::after{content:"";position:absolute;inset:calc(var(--u)*15);border-radius:50%;background:#4a4f5a;transition:all .8s}
.kc-cap-name{font-size:calc(var(--u)*12);letter-spacing:.32em;text-transform:uppercase;color:#7d808b;transition:color .8s}
.kc-cap-note{font-size:calc(var(--u)*14);color:#e09aab;min-height:calc(var(--u)*18);letter-spacing:.02em;opacity:0;transition:opacity .8s}
.kc-captain.kc-called{transform:translate(-50%,-50%) scale(1.45)}
.kc-captain.kc-called .kc-cap-mark{border-color:#ec6e90;box-shadow:0 0 calc(var(--u)*26) rgba(236,110,144,.35)}
.kc-captain.kc-called .kc-cap-mark::after{background:#ec6e90}
.kc-captain.kc-called .kc-cap-name{color:#f0eeef}
.kc-captain.kc-called .kc-cap-note{opacity:1}
.kc-stamp{position:absolute;left:calc(var(--u)*56);bottom:calc(var(--u)*30);z-index:1;font-size:calc(var(--u)*11);letter-spacing:.2em;text-transform:uppercase;color:#6b6e78}
.kc-example{position:absolute;right:calc(var(--u)*56);bottom:calc(var(--u)*30);z-index:2;font-size:calc(var(--u)*11);letter-spacing:.2em;text-transform:uppercase;color:#6b6e78}

.kc-arrive .kc-note{animation:kc-in .9s ease-out both}
.kc-arrive .kc-sigil{animation:kc-glint 1.4s ease-out both}
@keyframes kc-in{from{opacity:0;transform:translateY(calc(var(--u)*6))}to{opacity:1;transform:none}}
@keyframes kc-glint{0%{opacity:1;filter:drop-shadow(0 0 calc(var(--u)*12) currentColor)}100%{}}
@media (prefers-reduced-motion:reduce){
 .kc-wall *,.kc-wall *::before,.kc-wall *::after{animation:none!important;transition:none!important}
 .kc-thread.kc-draw{stroke-dashoffset:0}.kc-pulse{display:none}
}
