:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100svh; overflow: hidden; background: radial-gradient(circle at 50% 30%, #14223b 0%, #0a1424 38%, #050a12 100%); color: #f6f8ff; }
.coach-test { min-height: 100svh; padding: max(28px, env(safe-area-inset-top)) 24px max(30px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 38px; }
.orb-stage { display: grid; place-items: center; gap: 20px; }
#coach-orb { display: block; width: min(46vw, 190px); height: min(46vw, 190px); min-width: 150px; min-height: 150px; filter: drop-shadow(0 20px 34px rgba(0, 0, 0, .42)); }
.call-status { margin: 0; min-height: 20px; color: #a9bad7; font-size: 14px; font-weight: 500; letter-spacing: .01em; text-align: center; }
.controls { width: min(100%, 340px); display: grid; gap: 14px; }
button { min-height: 58px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; border: 0; border-radius: 18px; color: #fff; font: inherit; font-size: 17px; font-weight: 700; letter-spacing: .01em; cursor: pointer; transition: transform .15s ease, opacity .15s ease, background .15s ease; }
button:active { transform: scale(.975); }
button:focus-visible { outline: 3px solid #a9cbff; outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .48; }
.join-button { background: linear-gradient(135deg, #2d77ff, #5c5ae8); box-shadow: 0 12px 28px rgba(37, 91, 216, .3); }
.join-button.is-joined { background: linear-gradient(135deg, #2b3b53, #1a2638); }
.mic-button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; background: rgba(205, 220, 243, .11); border: 1px solid rgba(220, 232, 255, .15); }
.mic-button[aria-pressed="true"] { background: linear-gradient(135deg, #c98213, #f0ad2b); color: #191005; border-color: rgba(255, 222, 145, .75); box-shadow: 0 12px 30px rgba(227, 154, 31, .22); }
.mic-icon { width: 13px; height: 21px; border: 2px solid currentColor; border-radius: 9px; position: relative; }
.mic-icon::after { content: ""; position: absolute; width: 17px; height: 10px; top: 9px; left: -4px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 12px 12px; }
.mic-icon::before { content: ""; position: absolute; width: 2px; height: 6px; bottom: -12px; left: 4px; background: currentColor; }
.mic-button[aria-pressed="false"] .mic-icon { opacity: .8; }
.mic-button[aria-pressed="false"] .mic-icon::after { transform: rotate(-45deg); border: 0; width: 27px; height: 2px; background: #cfd9eb; top: 9px; left: -7px; border-radius: 2px; }
@media (max-height: 560px) { .coach-test { gap: 18px; padding-top: 18px; padding-bottom: 18px; } .orb-stage { gap: 10px; } #coach-orb { width: 150px; height: 150px; } }