:root{font:15px/1.55 system-ui,sans-serif;color:#ebfaf7;background:#091b20;color-scheme:dark}*{box-sizing:border-box}body{margin:0}a{color:#8cf4d5}button,select{font:inherit;border:1px solid #386164;border-radius:12px;padding:10px 14px;background:#163039;color:#f3fffc;max-width:100%}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}.primary{background:#84edcf;color:#092329;border:0;font-weight:650}button:focus-visible,select:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #d8ff81;outline-offset:3px}main{max-width:1080px;margin:auto;padding:30px}header{display:flex;justify-content:space-between;align-items:center;gap:20px}header strong{letter-spacing:.15em}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;margin:70px 0 48px}h1{font-size:clamp(32px,5vw,60px);line-height:1.15;margin:14px 0 24px;letter-spacing:-.035em}.eyebrow{color:#8df0cf;letter-spacing:.14em;font-size:12px}.intro{color:#b5cdd0;font-size:20px}.hero img{width:100%;height:420px;object-fit:cover;object-position:top;border-radius:150px 150px 32px 32px;border:1px solid #386164}.download{display:inline-block;text-decoration:none;padding:14px 22px;border-radius:12px;margin:18px 0}.instructions{border-top:1px solid #386164;padding-top:24px;max-width:800px}.note{color:#a8bec2;font-size:12px}.toolbar{display:flex;align-items:end;gap:10px}.toolbar label{display:grid;gap:4px;flex:1;min-width:0}.toolbar>select{width:100px}select{width:100%}.companion-view main{padding:16px;max-width:650px}.companion-view #stage{position:relative;width:100%;height:clamp(250px,48vh,570px);border-radius:20px;overflow:hidden;margin-top:16px;background:#112d31}.companion-view #stage img{width:100%;height:100%;object-fit:cover;object-position:center 15%}.companion-view kasamila-avatar{display:block;width:100%;height:100%}#status{font-size:14px;min-height:22px;margin:12px 0 4px}#remaining{font-size:12px;color:#a8bec2;margin:0 0 12px}.consent{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:#b8cdce}.consent input{flex-shrink:0;margin-top:4px;accent-color:#84edcf}.controls{display:flex;gap:10px;margin:16px 0}.controls>*{flex:1}body[dir=rtl]{text-align:right}@media(max-width:640px){main{padding:20px}.hero{grid-template-columns:1fr;gap:24px;margin-top:36px}.hero img{height:300px}.intro{font-size:17px}.companion-view main{padding:12px}}

/* Companion shell: the portrait is the focus, with setup controls below it. */
.companion-view main{padding:16px 20px 20px}.companion-view .toolbar{font-size:12px;color:#a8c5c8}.companion-view .toolbar select{padding:9px 12px}.companion-view #stage{width:min(100%,360px);height:auto;aspect-ratio:1;border-radius:50%;margin:22px auto 18px;border:1px solid #6bcdb35c;background:radial-gradient(circle at 50% 25%,#22444b,#10292f);box-shadow:0 0 0 7px #7dedcc06,0 12px 40px #0003}.companion-view kasamila-avatar{transform:scale(1.65);transform-origin:center 67%}.companion-view #status{text-align:center;color:#a9e4d6;font-size:12px}.companion-view #remaining{text-align:center;font-size:11px}.companion-view .consent{padding:12px;border:1px solid #29474d;border-radius:12px;background:#11292f;font-size:11px;line-height:1.7}.companion-view.connected .consent,.companion-view.connected .note{display:none}.companion-view .controls{margin:14px 0}.companion-view main>a{font-size:11px}.companion-view .note{font-size:10px;line-height:1.7}@media(max-height:650px){.companion-view #stage{width:min(100%,260px);margin-top:12px}}

/* PiP contains the live renderer, never a copy of a hidden window's canvas. */
.compact main{padding:8px 14px;max-width:none}.compact.connected .toolbar,.compact.connected .controls,.compact.connected main>a{display:none}.compact.connected #stage{width:min(100%,calc(100vh - 70px));margin:8px auto 12px}.compact.connected #status{margin:0;font-size:11px}.compact.connected #remaining{margin:3px 0;font-size:10px}
.mini main{padding:7px 10px}.mini:not(.connected) #stage{display:none}.mini .toolbar{font-size:11px;gap:6px}.mini select{padding:6px;font-size:11px;border-radius:8px}.mini .toolbar>select{width:72px}.mini .consent{margin-top:8px;padding:7px;font-size:10px;line-height:1.5}.mini .controls{margin:9px 0}.mini button{padding:7px 8px;font-size:11px}.mini #end,.mini .note{display:none}.mini #status{font-size:10px;min-height:15px;margin:6px 0}.mini main>a{font-size:10px}.mini.connected main{height:100vh;padding:0 6px;display:flex;flex-direction:column;justify-content:center}.mini.connected #stage{width:min(100%,calc(100vh - 34px));margin:0 auto 4px}.mini.connected #status{margin:0;font-size:9px;min-height:12px}.mini.connected #remaining{font-size:9px;margin:0}.mini #remaining:empty{display:none}

.mini #status:empty{display:none}

.companion-activate{display:block;width:100%;margin:8px 0}.companion-activate[hidden]{display:none}