:root{font-family:"Yu Gothic UI","Hiragino Sans","Meiryo",sans-serif;color:#193e3c;background:#f5f6f2;--green:#155650;--line:#d7ded7;--muted:#546b65;--font:21px}*{box-sizing:border-box}body{margin:0}button,select,input,textarea{font:inherit}button,select{cursor:pointer}button{border:1px solid #becac3;border-radius:8px;background:#fff;padding:9px 15px;font-size:14px;font-weight:650;color:var(--green)}button:hover{background:#ecf1e9}button:disabled{cursor:default;opacity:.48}button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #0a8791;outline-offset:2px}.primary{background:var(--green);color:white;border-color:var(--green)}.primary:hover{background:#103e3a}.flat{border:0;background:transparent;padding:8px}.top{height:74px;border-bottom:1px solid var(--line);padding:0 clamp(20px,4vw,70px);display:flex;align-items:center;gap:17px;background:#fbfcf8}.brand{display:flex;align-items:center;gap:10px;font-size:22px;letter-spacing:.07em}.product{padding-left:17px;border-left:1px solid var(--line);color:var(--muted);font-size:13px}.headright{margin-left:auto;display:flex;gap:14px}.eyebrow,.caps{font-family:Arial,sans-serif;letter-spacing:.15em;font-size:11px;font-weight:750;margin:0;color:#46736a}.welcome{max-width:1230px;margin:auto;padding:clamp(45px,8vh,95px) clamp(24px,5vw,76px);display:grid;grid-template-columns:1.25fr 1fr;gap:42px 8vw}.intro h1{font-size:clamp(42px,5.2vw,76px);letter-spacing:-.045em;line-height:1.18;margin:20px 0}.lead{font-size:clamp(16px,1.6vw,21px);line-height:1.8;color:var(--muted);margin:0}.loginbox{align-self:center;background:#fff;border:1px solid var(--line);border-top:4px solid #22635a;border-radius:12px;padding:clamp(25px,3vw,45px)}.loginbox h2{font-size:26px;margin:10px 0 25px}label{font-weight:650;font-size:13px}.loginbox label,.loginbox input{display:block;width:100%}input,textarea,select{border:1px solid #b8c7be;border-radius:7px;color:#193e3c;background:white;padding:9px}.loginbox input{height:46px;margin:8px 0 17px}.loginbox button{width:100%;display:flex;justify-content:space-between;padding:13px 18px}.example{grid-column:1/-1;border-radius:14px;border:1px solid #c6d4c9;background:#fcfdf9;overflow:hidden}.exampletop{display:flex;justify-content:space-between;background:#e8efe4;padding:12px 24px;font-size:12px;color:#476258}.three,.colheads,.utterance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.three>div{padding:22px clamp(15px,2.2vw,32px)}.three>div+div{border-left:1px solid var(--line)}small,.boardfoot,.notice,.empty p,#count{color:var(--muted)}.three p{font-size:clamp(17px,1.9vw,24px);line-height:1.55;margin:12px 0}.workspace{margin:0 auto;padding:22px clamp(12px,3.5vw,64px) 12px;max-width:2050px;display:flex;flex-direction:column;height:calc(100dvh - 74px);min-height:540px}.roomtitle,.console,.buttons,.micsettings,.tools,.tabtitle,.toolsright,.indicators,.boardfoot,.dialogtop{display:flex;align-items:center}.roomtitle,.console,.tools,.boardfoot,.dialogtop{justify-content:space-between}.roomtitle h1{font-size:32px;margin:4px 0 15px}.indicators,.micsettings,.buttons,.toolsright,.tabtitle{gap:10px}.pill{background:#e4ebdf;color:#385c48;border-radius:30px;font-size:13px;padding:5px 13px}.pill.live{background:#d5ead2;color:#23562c}.pill.live:before{content:"●";margin-right:6px;color:#32854e}#clock{font:15px ui-monospace,monospace;color:var(--muted)}.console{gap:10px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:11px;padding:12px 16px}.micsettings select{max-width:260px;font-size:13px}.meter{width:38px;height:7px;border-radius:8px;background:#dde7dc;overflow:hidden}.meter i{display:block;background:#57936a;height:100%;width:0}.notice{font-size:12px;line-height:1.6;margin:9px 0}.tools{margin:11px 0}.tools h2{font-size:19px;margin:0}.signal{color:var(--green);font-size:24px}#count{font-size:12px}.sep{width:1px;height:17px;background:var(--line)}.board{min-height:180px;flex:1;overflow:auto;border:1px solid #bacbc0;border-radius:12px;background:#fff;overscroll-behavior:contain}.canvas{min-width:650px;min-height:100%;display:flex;flex-direction:column}.colheads{position:sticky;top:0;z-index:1;background:#e8efe4;border-bottom:1px solid var(--line)}.colheads label{display:flex;align-items:center;padding:10px 15px;gap:10px}.colheads label+label,.utterance button+button{border-left:1px solid var(--line)}.colheads select{border:0;background:transparent;font-weight:700;font-size:17px;flex:1;min-width:0;padding:3px 0}.langchip{font:700 10px Arial;letter-spacing:.08em;border:1px solid #9db5a3;border-radius:4px;padding:4px;color:#436c56}.empty{margin:auto;text-align:center;padding:46px 20px}.empty h3{font-size:19px;margin:14px 0 4px}.empty p{font-size:14px}.empty button{margin-top:7px}.utterance{border-bottom:1px solid var(--line)}.utterance button{text-align:left;min-height:88px;border:0;border-radius:0;padding:13px 17px;display:flex;flex-direction:column;align-items:stretch;gap:7px;color:#1b3433}.utterance .caption{font-size:var(--font);font-weight:550;line-height:1.55;overflow-wrap:anywhere}.meta{display:flex;align-items:center;gap:7px;color:#65776e;font-size:11px;font-weight:500}.meta strong{color:#356d56}.state{margin-left:auto}.divider,.gap{font-size:13px;padding:9px 16px;background:#edf2ea;color:#426653}.gap,.warning,#message{color:#894b23;background:#fff2da}.warning,#message{padding:9px;border-radius:6px;margin:3px 0;font-size:13px}.boardfoot{font-size:12px;margin-top:4px}.boardfoot button{font-size:12px}dialog{border:1px solid var(--line);border-radius:14px;padding:26px;width:min(470px,92vw);color:#213c36;box-shadow:0 18px 80px #17372f22}dialog::backdrop{background:#132d2e66}dialog h2{margin:6px 0 16px}dialog textarea{width:100%;resize:vertical;display:block;margin:10px 0}#original{font-size:23px;line-height:1.5;white-space:pre-wrap}.dialogtop .close{font-size:22px}[hidden]{display:none!important}@media(max-width:760px){.welcome{grid-template-columns:1fr;gap:25px;padding-top:36px}.intro h1 br{display:none}.lead br{display:none}.three{grid-template-columns:1fr}.three>div+div{border-left:0;border-top:1px solid var(--line)}.top{height:56px}.workspace{height:calc(100dvh - 56px);padding-top:12px}.brand{font-size:17px}.brand img{width:30px;height:30px}.product{display:none}.headright{gap:3px}.roomtitle h1{font-size:24px;margin-bottom:9px}.micsettings{flex-wrap:wrap;gap:6px}.micsettings select{max-width:165px}.notice{margin:6px 0}.console{padding:8px}.tools{margin:3px 0}.three p{margin:6px 0}.empty{position:sticky;left:0;align-self:flex-start;margin:auto 0;width:min(100%,90vw)}.exampletop,.three>div{padding:12px 18px}}@media(max-height:650px) and (min-width:761px){.top{height:48px}.workspace{height:calc(100dvh - 48px);padding-top:8px;min-height:370px}.roomtitle h1{font-size:24px;margin:0 0 4px}.roomtitle .eyebrow{display:none}.tools{margin:3px 0}.console{padding:6px 10px}.notice{margin:3px 0}}

/* Keep the transcript in view, including on short landscape screens. */
.room{--header-height:46px}
.room .top{height:var(--header-height);padding:0 clamp(12px,3vw,52px);gap:14px}
.room .brand{font-size:17px;letter-spacing:.03em;gap:8px}
.room .brand img{width:28px;height:28px}
.room-heading{font-size:15px;border-left:1px solid var(--line);padding-left:14px;margin:0}
.room .headright{gap:5px;align-items:center}
.room .headright .flat{font-weight:600;line-height:1.4;font-size:12px;padding:6px 8px;white-space:nowrap}
.room .headright a,.adminpage a,.top a{color:var(--green);text-decoration:none}
.room .headright a:hover,.top a:hover{text-decoration:underline}
.room .pill{font-size:11px;padding:2px 8px}
.room #clock{font-size:12px}
.room .workspace{height:calc(100dvh - var(--header-height));min-height:250px;padding:7px clamp(9px,2vw,36px) 2px}
.room .console{padding:4px 8px;gap:5px;border-radius:8px}
.room .console button,.room .console select{font-size:12px;padding:5px 9px}
.room .notice{margin:3px 2px 0;font-size:11px;line-height:1.4}
.room .tools{margin:1px 1px 2px;min-height:25px}
.room .tools h2{font-size:15px}
.room .tools .flat,.room .boardfoot .flat{padding:3px 6px;font-size:12px}
.room .colheads label{padding:4px 12px}
.room .colheads select{font-size:15px}
.room .boardfoot{margin:0;min-height:20px;font-size:11px}
.room .board{min-height:100px}
.adminpage{max-width:760px;margin:30px auto;padding:0 16px}
.adminpage h1{font-size:27px;margin-bottom:6px}
.adminpage>p,.loginbox>p{font-size:14px;color:var(--muted)}
.adminpage form,.userlist{background:white;border:1px solid var(--line);border-radius:10px;padding:16px;margin:15px 0}
.adminentry{display:flex;gap:8px;margin-top:7px}
.adminentry input,#invite-link{width:100%;min-width:0}
.userlist h2{font-size:17px;margin:0}
.userlist ul{padding:0;list-style:none;margin:4px 0}
.userlist li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.userlist li:last-child{border-bottom:0}.userlist strong{overflow-wrap:anywhere}
.userlist small{display:block;margin-top:3px}.userlist button{font-size:12px;padding:5px 9px}
#invite-dialog .buttons{margin-top:12px}
@media(max-width:600px){
.room{--header-height:auto;min-height:100dvh;display:flex;flex-direction:column}
.room .top{height:auto;min-height:38px;flex-wrap:wrap;gap:3px 8px;padding:3px 9px}
.room-heading{display:none}.room .brand{font-size:15px}.room .brand img{width:22px;height:22px}
.room .headright{gap:0}.room .headright .flat{padding:3px;font-size:11px}
.room .workspace{width:100%;height:auto;min-height:0;flex:1}
.room{height:100dvh}.room .micsettings{gap:4px}.room .micsettings select{max-width:135px}
.room .buttons{gap:5px}.room .indicators{gap:4px}.room .meter{width:20px}
}