:root{color-scheme:dark;font-family:Inter,system-ui,sans-serif;background:#090913;color:#eeeeff;--pink:#ef8ba7;--mint:#82eddb;--muted:#aaaac5}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 12%,#34213980,transparent 35%),radial-gradient(ellipse at 0 40%,#16404444,transparent 35%),#090913}header{display:flex;align-items:center;gap:30px;padding:26px 5%;border-bottom:1px solid #ffffff15}a{color:inherit;text-decoration:none}nav{display:flex;gap:22px}.brand{font-weight:850;letter-spacing:4px}.brand span{color:var(--mint);text-shadow:0 0 14px #82eddb}.free{margin-left:auto;border:1px solid #ef8ba750;border-radius:30px;padding:8px 16px;color:var(--pink);font-size:11px;letter-spacing:2px}main{max-width:1440px;margin:auto;padding:0 5%}.hero{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:70px 0 40px}.overline{font-size:11px;letter-spacing:3px;color:var(--mint)}h1{font-size:clamp(58px,8vw,116px);letter-spacing:-6px;margin:8px 0;line-height:1.1}h1 span{color:var(--pink);text-shadow:0 0 40px #ef8ba760}h1 i{font-size:.45em;vertical-align:middle;margin-left:25px;font-style:normal}.tagline{font-size:28px;margin:18px 0}.hero p:not(.overline){line-height:1.7}.button,button{font:inherit;font-weight:600;border:1px solid #82eddb60;background:linear-gradient(125deg,#214a4b,#254042);color:#ebfffc;border-radius:12px;padding:12px 18px;cursor:pointer}.button{display:inline-block;margin-top:15px}.secondary,.views button{background:#ffffff08;border-color:#ffffff20;color:#d5d5e8}button:hover,.button:hover{border-color:var(--pink);box-shadow:0 0 20px #ef8ba720}button:disabled{opacity:.4;cursor:default}button[aria-pressed=true]{color:var(--mint);border-color:var(--mint)}input,textarea,select{font:inherit;width:100%;border-radius:9px;border:1px solid #ffffff23;background:#11111e;color:#eee;padding:11px;margin-top:7px}textarea{min-height:86px;resize:vertical}label{display:block;font-size:12px;color:#bdbdd2;margin:14px 0}input:focus,textarea:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--mint);outline-offset:3px}h2{font-size:20px;margin:7px 0 18px}.scope,.muted,footer{color:var(--muted);font-size:12px;line-height:1.8}.scope{max-width:970px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #ffffff19;border-radius:18px;margin:30px 0;overflow:hidden}.metrics div{padding:22px;border-right:1px solid #ffffff15}.metrics strong{display:block;font-size:29px;font-weight:500;color:var(--mint)}.metrics span{font-size:11px;color:var(--muted)}.layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:24px}.panel{background:linear-gradient(145deg,#1a192580,#11111dd0);border:1px solid #ffffff18;border-radius:19px;padding:24px;margin-bottom:24px;overflow:hidden}.heading{display:flex;gap:16px;justify-content:space-between;align-items:center}.heading span{font-size:11px;color:var(--mint)}.controls{display:grid;grid-template-columns:repeat(2,1fr);gap:0 15px}.actions{display:flex;flex-wrap:wrap;gap:10px}.room-tools{display:flex;gap:12px;flex-wrap:wrap}.room-tools>select{max-width:200px}.room-tools form{display:flex;gap:8px;flex:1}.room-tools input{margin-top:0;min-width:100px}.views{display:flex;gap:8px;margin:20px 0}.transcript{height:360px;overflow:auto;padding:4px 12px 4px 0;overflow-wrap:anywhere}.message{border-left:2px solid var(--mint);padding:8px 14px;margin:15px 0;background:#ffffff04}.message small{color:var(--pink);font-size:11px}.message pre,.interpretation{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.7 ui-monospace,monospace}.interpret{display:flex;gap:12px;align-items:end}.interpret label{flex:1}.interpret button{margin-bottom:14px}.participant{border:1px solid #ffffff1d;border-radius:12px;padding:14px;margin:12px 0}.participant strong{color:var(--pink);display:block;overflow-wrap:anywhere}.participant small{display:block;color:var(--muted);margin:8px 0;overflow-wrap:anywhere}.participant button{font-size:11px;padding:7px 10px;margin-right:8px}details{font-size:12px;line-height:1.7;color:var(--muted);margin:20px 0}summary{cursor:pointer;color:var(--mint)}#join-status,#session-status,#decode-status,#enrolled-status{font-size:12px;line-height:1.6;overflow-wrap:anywhere}#graph{width:100%;max-height:320px;min-height:160px}footer{padding:35px 0;border-top:1px solid #ffffff18;margin-top:15px}[hidden]{display:none!important}@media(max-width:850px){.layout{grid-template-columns:1fr}.hero{grid-template-columns:1fr;padding-top:35px}.metrics{grid-template-columns:repeat(2,1fr)}.controls{grid-template-columns:1fr}.heading{align-items:start}header{gap:15px;padding:20px}.free{display:none}.room-tools form{flex-basis:100%}main{padding:0 18px}}

.layout>*{min-width:0}.heading>*{min-width:0}.room-tools form{min-width:0}.room-tools input{width:0;flex:1}.interpret label{min-width:0}.views{flex-wrap:wrap}@media(max-width:850px){.heading{flex-wrap:wrap}.hero>*{min-width:0}.interpret{flex-wrap:wrap}.interpret label{flex-basis:100%}nav{gap:12px}.brand{letter-spacing:2px}}

.layout{grid-template-columns:minmax(0,1fr) 310px}.layout>aside{order:2;display:flex;flex-direction:column}.layout>div{order:1}.layout #join{order:2}#bring-model{margin:0}#bring-model>summary,#host-session>summary{font-size:16px}#host-session{border:1px solid #ffffff19;border-radius:12px;padding:14px}#commons .button{margin:0;font-size:13px}#commons-status{font-size:12px;line-height:1.7}.agent-code{display:block;background:#10101b;padding:18px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--mint)}@media(max-width:850px){.layout{grid-template-columns:minmax(0,1fr)}}

/* CoffAI artwork and geometric lettering share the Model X visual identity. */
.brand{display:flex;align-items:center;gap:8px;color:#eef4ff}.brand .mx-wordmark{width:114px;height:25px}.brand .mx-symbol{width:29px;height:29px;filter:drop-shadow(0 0 7px #5366ff80)}
.hero{grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:28px;padding:64px 0 42px}.hero-copy{position:relative;z-index:1}.hero h1{margin:20px 0 14px;line-height:1;letter-spacing:normal}.coffai-wordmark{display:block;width:100%;max-width:490px;height:auto;color:#e9f9ff;filter:drop-shadow(0 0 12px #37dfff45)}.coffai-ai{stroke:#58e6ff}.hero .overline{font-size:10px;letter-spacing:2.6px;color:#7feaff}.hero .tagline{font-size:clamp(22px,2.5vw,32px);margin:16px 0}.hero-copy>p:not(.overline):not(.tagline){font-size:14px;color:#bccbdb}.hero-art{position:relative;isolation:isolate;margin:0;min-width:0;border:0;border-radius:0;overflow:visible;box-shadow:none}.hero-art::before{content:"";position:absolute;inset:-8% -5%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 42% 48%,#08748d38,transparent 64%),radial-gradient(ellipse at 83% 38%,#9b513124,transparent 58%);filter:blur(24px)}.hero-art img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 84%,transparent);mask-image:linear-gradient(to right,transparent,#000 10%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 84%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}.hero .button{border-color:#61dfff70;background:linear-gradient(120deg,#153f50,#152b40);box-shadow:0 0 24px #21cfff12}
@media(max-width:850px){.hero{grid-template-columns:minmax(0,1fr);padding:36px 0 24px;gap:28px}.hero-copy{max-width:560px}.hero h1{max-width:420px}.hero-art{border-radius:0}.hero-art::before{inset:-5% 0;filter:blur(18px)}.brand .mx-wordmark{width:98px}.brand .mx-symbol{width:25px}.hero .overline{letter-spacing:2px}}