body{background:#090b0b}body>header,body>main{display:none}.crew-app{max-width:450px;min-height:100dvh;margin:auto;padding:24px 22px 30px;display:flex;flex-direction:column;gap:22px}.crew-head{display:flex;justify-content:space-between;align-items:center}.crew-head .brand{font-size:25px}.crew-head button{background:none;padding:8px 12px;font-size:12px}.crew-identity{text-align:center}.crew-identity h1{font-size:28px;margin:0 0 6px}.crew-demo{color:#a2aa9e;font-size:11px;text-align:center;line-height:1.5}.crew-section{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.crew-section .label{font-size:10px}.crew-channel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.crew-channel{min-height:66px;background:#171c18;border-color:#333c31;padding:10px 4px;font-size:13px;line-height:1.4}.crew-channel.on{color:#17220e;background:#bdf478;border-color:#bdf478}.crew-channel.listen-on{color:#d3ebff;background:#223f56;border-color:#7bb5e6}.crew-talk-wrap{display:flex;justify-content:center;align-items:center;padding:6px 0}.crew-talk{width:235px;height:235px;border-radius:50%;background:#e5ef87;border:8px solid #232a1b;color:#18200c;display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 0 0 1px #48523a;touch-action:none;user-select:none}.crew-talk strong{font:700 46px 'Space Grotesk',sans-serif}.crew-talk small{font-size:11px;letter-spacing:1px;margin:5px}.crew-talk.live{background:#bdf478;box-shadow:0 0 0 1px #bdf478,0 0 40px #bdf47825}.crew-talk:disabled{background:#343832;color:#9da294;opacity:1}.crew-status{text-align:center;font-size:12px;color:#a5ada2;min-height:17px}.crew-open{display:flex;justify-content:center}.crew-open button{border-radius:25px;font-size:12px;padding:10px 20px}.crew-open button.on{color:#bdf478;border-color:#bdf478;background:#26331d}.crew-bottom{margin-top:auto;padding-top:5px}.crew-volume{display:flex;gap:14px;align-items:center}.crew-volume input{padding:0}.crew-settings{background:#171c18;border:1px solid #333c31;border-radius:12px;padding:18px}.crew-settings label{display:block;margin-bottom:8px;color:#a5ada2;font-size:12px}.crew-settings input{width:100%}.crew-settings p{font-size:11px;margin-bottom:0}.crew-app .locked{color:#ffb1a4}@media(min-width:650px){.crew-app{margin:25px auto;min-height:820px;border:1px solid #303631;border-radius:28px;padding:28px;background:#0d100e}}
/* Keep iPhone press-and-hold on the control, rather than selecting its label. */
.crew-app button,.crew-app button *{
 -webkit-user-select:none;
 user-select:none;
 -webkit-touch-callout:none;
 -webkit-tap-highlight-color:transparent;
}
.crew-talk{-webkit-appearance:none;appearance:none;position:relative;transition:transform .08s ease,background-color .08s ease}
.crew-talk>*{pointer-events:none}
.crew-talk:active{transform:scale(.97)}
.crew-talk:focus-visible{outline:3px solid #90bfff;outline-offset:5px}
body>header,body>main{display:revert}.crew-app{display:flex}.crew-settings p{color:#a5ada2}.crew-channel[disabled]{opacity:.35}
/* Phone layout follows Safari's available viewport, including its toolbars. */
html{width:100%;min-height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{width:100%;margin:0}
#app{width:100%;min-width:0}
.crew-app,.crew-app *{min-width:0;box-sizing:border-box}
.crew-app{width:100%;max-width:450px}
.crew-channel-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.crew-channel{white-space:normal;overflow-wrap:anywhere}
.crew-section .sub{text-align:right}
.crew-identity h1{overflow-wrap:anywhere}
.crew-volume input{min-width:0;flex:1}
.crew-volume>span{flex-shrink:0}
.crew-volume #crewVol{min-width:35px;text-align:right}
@media(max-width:649px){
 .crew-app{margin:0 auto;border:0;border-radius:0;min-height:100svh;min-height:100dvh;padding:12px 16px; padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom));gap:clamp(8px,1.5dvh,14px)}
 .crew-head .brand{font-size:23px}
 .crew-head button{min-height:40px;padding:8px 12px}
 .crew-identity h1{font-size:24px;margin:0 0 4px}
 .crew-identity .label{font-size:10px}
 .crew-demo{font-size:10px;line-height:1.3}
 #enableAudio{min-height:42px;padding:10px 12px}
 #error:empty{display:none}
 #error{font-size:12px;overflow-wrap:anywhere}
 .crew-section{margin-bottom:7px;gap:8px}
 .crew-section .sub{font-size:10px}
 .crew-channel-grid{gap:7px}
 .crew-channel{min-height:49px;font-size:12px;padding:8px 4px}
 .crew-talk-wrap{padding:0}
 .crew-talk{width:min(53vw,27dvh,220px);height:auto;aspect-ratio:1;flex-shrink:0;border-width:6px}
 .crew-talk strong{font-size:clamp(28px,8vw,44px)}
 .crew-talk small{font-size:9px;letter-spacing:.7px;margin:4px}
 .crew-status{min-height:16px;font-size:11px;line-height:1.4;text-align:center;overflow-wrap:anywhere}
 .crew-open button{min-height:40px;padding:9px 18px}
 .crew-bottom{margin-top:auto;padding-top:0}
 .crew-volume{gap:10px;min-height:32px}
 .crew-settings{padding:12px}
 .crew-settings p{margin-top:0}
 .crew-app button{touch-action:manipulation}
 .crew-app .crew-talk{touch-action:none}
 input:not([type=range]):not([type=checkbox]),select{font-size:16px}
 .gate{margin:0 auto;padding-top:max(30px,env(safe-area-inset-top));width:100%}
}
@media(max-width:649px) and (max-height:650px){
 .crew-app{gap:7px;padding-top:8px;padding-bottom:8px}
 .crew-identity h1{font-size:21px}
 .crew-channel{min-height:44px;font-size:11px}
 .crew-talk{width:min(46vw,25dvh,165px)}
 .crew-talk strong{font-size:32px}
 .crew-talk small{font-size:8px}
}

.crew-talk.open-stopped{background:#e35e55;color:#250b09;border-color:#59312c;box-shadow:0 0 0 1px #a2534c}
.crew-talk.open-stopped strong{font-size:clamp(22px,6vw,33px)}
.crew-talk.open-stopped:disabled{background:#573c39;color:#bca29e}

.crew-talk{isolation:isolate}
.crew-talk::after{content:"";position:absolute;left:18%;right:18%;bottom:13%;height:5px;border-radius:6px;background:#fff8;transform:scaleX(var(--hold-progress,0));transform-origin:left;pointer-events:none;opacity:0}
.crew-talk.arming::after{opacity:1}
.crew-talk.arming{border-color:#f3ce69}
/* Mic status: green = standby, red = transmitting. */
.crew-talk,.crew-talk.open-stopped{
 background:#bdf478;
 color:#17220e;
 border-color:#394d2b;
 box-shadow:0 0 0 1px #718f52;
}
.crew-talk.live{
 background:#ef655d;
 color:#2b0907;
 border-color:#73352f;
 box-shadow:0 0 0 1px #ef655d,0 0 36px #ef655d30;
}
.crew-talk:disabled,.crew-talk.open-stopped:disabled{
 background:#343832;
 color:#9da294;
 border-color:#48523a;
 box-shadow:none;
}
.crew-talk.arming{border-color:#f3ce69}

.crew-app .active-speaker{font-size:22px;font-weight:700;line-height:1.35;text-align:center;color:#bdf478;white-space:pre-line;overflow-wrap:anywhere;padding:10px 14px;background:#bdf4780d;border:1px solid #bdf47833;border-radius:12px}

.audio-options label{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;font-size:16px}.audio-options input[type=checkbox]{width:24px;height:24px;accent-color:#bdf478;flex:none}.audio-options .sub{font-size:13px;line-height:1.5}

.crew-channel-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}.channel-name-form{margin-top:10px}.gate select{width:100%;padding:14px;font-size:16px;background:#171e16;color:#f1f3ed;border:1px solid #48523a;border-radius:10px}