:root{color:#193237;font-synthesis:none;background:#f3f5f1;font-family:Inter,Segoe UI,Tahoma,sans-serif;line-height:1.55}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,.button{color:#193237;cursor:pointer;background:#fff;border:1px solid #baccc7;border-radius:10px;justify-content:center;align-items:center;min-height:46px;padding:10px 16px;text-decoration:none;display:inline-flex}button:hover{background:#e7eee9}button:disabled{opacity:.55;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-offset:3px;outline:3px solid #e5a845}main{max-width:1280px;margin:auto;padding:24px 40px}header{border-bottom:1px solid #d5e0d9;justify-content:space-between;align-items:center;padding-bottom:18px;display:flex}.brand{letter-spacing:-1px;color:#193237;font-size:27px;font-weight:800;text-decoration:none}.brand span{letter-spacing:2px;color:#647e79;margin-left:16px;font-size:11px}.locale{align-items:center;gap:12px;font-size:13px;display:flex}.locale select{width:auto}.intro{margin:42px 0 28px}.eyebrow{letter-spacing:2px;color:#647e79;font-size:11px;font-weight:700}h1{letter-spacing:-1.5px;margin:10px 0;font-size:clamp(28px,4vw,44px);line-height:1.2}h2{margin:0 0 20px;font-size:21px}.intro p{color:#647e79}.join-grid{grid-template-columns:1fr 1fr;gap:28px;display:grid}.panel{background:#fff;border:1px solid #d9e3db;border-radius:18px;padding:28px}label{margin-bottom:14px;font-size:14px;font-weight:600;display:block}input,select{color:#193237;background:#fbfcfa;border:1px solid #c5d3cb;border-radius:8px;width:100%;min-height:46px;margin-top:6px;padding:9px 12px;display:block}.two-fields{grid-template-columns:1fr 1fr;gap:15px;display:grid}.checkbox{align-items:flex-start;gap:10px;font-weight:400;display:flex}.checkbox input{flex-shrink:0;width:22px;min-height:24px;margin:0}.primary{color:#fff;background:#245c4c;border:0;width:100%;margin-top:10px}.primary:hover{background:#183e33}.note{color:#657c76;font-size:12px}.notice{color:#695329;background:#f6f0dd;border-radius:10px;padding:14px;font-size:13px}.preview video{aspect-ratio:16/10;object-fit:cover;background:#1c3535;border-radius:12px;width:100%}.preview meter{width:100%;height:16px}.actions,.controls{flex-wrap:wrap;gap:10px;margin:14px 0;display:flex}.preview .actions button{flex:1;font-size:13px}.error{color:#912f25;background:#fce6e1;border-radius:10px;padding:15px}.call-heading{align-items:center;gap:16px;margin:0 0 20px;display:flex}.status{background:#e6f1e9;border:1px solid #b7d2c4;border-radius:30px;padding:6px 14px;font-size:13px}.call-grid{grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:24px;display:grid}.videos{position:relative}.video-tile{aspect-ratio:16/10;background:linear-gradient(130deg,#213d3e,#375650);border-radius:16px;position:relative;overflow:hidden}.video-tile video{object-fit:cover;width:100%;height:100%}.video-tile span{color:#fff;background:#193237b0;border-radius:6px;padding:4px 10px;font-size:13px;position:absolute;bottom:14px;left:16px}.self{border:2px solid #ffffff60;border-radius:12px;width:28%;position:absolute;top:14px;right:14px;overflow:hidden}.self .video-tile{border-radius:8px}.self .video-tile span{padding:2px 4px;font-size:11px;bottom:5px;left:4px}.self video{transform:scaleX(-1)}.danger{color:#8b302b;background:#fce6e1;border-color:#edc0b9}.controls button{flex:1;font-size:13px}.invitation{background:#e7eee9;border-radius:14px;align-items:center;gap:15px;margin-bottom:24px;padding:16px 20px;display:flex}.invitation label{flex:1;margin:0}.invitation input{font-size:12px}.participants{border-top:1px solid #e2e9e3;margin:24px 0;padding:0;list-style:none}.participants li{border-bottom:1px solid #e2e9e3;padding:15px 0}.participants span{color:#647e79;font-size:12px;display:block}.empty{color:#647e79;padding:20px 0 35px;font-size:14px}.remote-audio{display:none}footer{color:#758b83;border-top:1px solid #d5e0d9;margin-top:36px;padding-top:20px;font-size:11px}:lang(th){word-break:normal;overflow-wrap:anywhere;line-height:1.8}a{color:#245c4c}@media (width<=800px){main{padding:18px}.intro{margin:28px 0 22px}.join-grid,.call-grid{grid-template-columns:1fr}.panel{padding:20px}.brand span{display:none}.locale{gap:6px;font-size:11px}.call-grid{gap:18px}.controls button{flex-basis:42%;min-height:48px}.invitation{flex-wrap:wrap;gap:8px}.invitation label{flex-basis:100%}.two-fields{grid-template-columns:1fr 1fr}.self{width:30%}header{gap:10px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
