:root{color-scheme:dark;--bg:#172032;--card:#1f2937;--text:#f9fafb;--muted:#d1d5db;--subtle:#9ca3af;--accent:#f59e0b;--border:#374151}
*{box-sizing:border-box}body{min-height:100vh;margin:0;padding:24px;display:grid;place-items:center;background:var(--bg);color:var(--text);font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif}.shell{width:min(1100px,100%);padding:32px;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.language-switch{display:flex;justify-content:flex-end;margin-bottom:4px}.language-switch button{display:grid;place-items:center;width:44px;height:34px;border:1px solid var(--accent);border-radius:7px;background:#253246;padding:5px;cursor:pointer}.language-switch button:hover{background:#36465b}.language-switch button img{display:block;width:27px;height:18px;border-radius:2px;object-fit:cover}.language-switch button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.brand{text-align:center}.brand-mark{height:43px;display:flex;justify-content:center;align-items:center;gap:5px}.brand-mark span{width:6px;height:13px;border-radius:8px;background:var(--accent)}.brand-mark span:nth-child(2),.brand-mark span:nth-child(6){height:26px}.brand-mark span:nth-child(3),.brand-mark span:nth-child(5){height:36px}.brand-mark span:nth-child(4){height:20px}.brand-name{margin-top:8px;font-size:clamp(2.7rem,7vw,4.2rem);font-weight:800;letter-spacing:-.065em;line-height:1}.brand-name span:first-child{color:var(--accent)}.brand-name .domain{font-size:.42em;letter-spacing:-.02em;color:var(--subtle)}.brand p{margin:12px 0 0;color:var(--muted)}
.intro{max-width:820px;margin:45px auto 34px;text-align:center}.eyebrow{color:var(--accent);font-size:.78rem;font-weight:700;letter-spacing:.17em}.intro h1{margin:14px 0;font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.13;letter-spacing:-.045em}.intro h1 em{color:var(--accent);font-style:normal}.intro p{margin:0;color:var(--muted);font-size:1.08rem;line-height:1.65}
.preview{margin:0}.preview-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}.preview-label{font-weight:700;font-size:1.08rem}.preview-demo{padding:6px 9px;border:1px solid #75581c;border-radius:5px;color:var(--accent);font-size:.68rem;font-weight:800;letter-spacing:.11em}.preview-scroll{overflow-x:auto;border:1px solid #43525b;border-radius:13px;background:#f4f6f3}.app-mock{display:grid;grid-template-columns:168px 1fr;min-width:810px;color:#17302d;font-family:Inter,"Segoe UI",Arial,sans-serif;text-align:left}.app-rail{position:relative;background:#153b32;color:#fff;padding:22px 15px;min-height:650px}.app-logo{font-size:21px;font-weight:750;letter-spacing:-1px}.app-logo small{display:block;margin-top:5px;color:#9ecab9;font-size:8px;letter-spacing:1.2px}.app-nav{margin-top:28px;padding:10px;background:#275046;border-radius:6px;font-size:12px}.app-rail-foot{position:absolute;bottom:22px;color:#a5c7b7;font-size:10px;line-height:1.6}.app-main{padding:22px 24px}.app-header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.app-kicker{color:#11765b;font-size:9px;font-weight:800;letter-spacing:1.4px}.app-header h2{margin:5px 0 4px;font-size:21px;letter-spacing:-.5px}.app-header p{margin:0;color:#65756e;font-size:11px}.app-live{flex:none;padding:6px 9px;border-radius:20px;background:#d6eee0;color:#0c6847;font-size:10px;font-weight:700}.app-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:17px 0}.app-stats>div,.app-panel{background:#fff;border:1px solid #dce3dc;border-radius:9px}.app-stats>div{padding:11px 13px}.app-stats span{display:block;color:#65756e;font-size:10px}.app-stats strong{display:block;margin-top:5px;font-size:24px;line-height:1.1}.app-stats strong small{color:#65756e;font-size:11px;font-weight:400}.app-stats strong.app-stat-text{font-size:15px}.app-panel{padding:14px}.app-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.app-panel-head h3{margin:0;font-size:14px}.app-panel-head span{color:#65756e;font-size:10px}.app-participants{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:9px}.person{display:flex;justify-content:space-between;gap:5px;align-items:center;min-width:0;border-top:1px solid #e8ece5;padding:9px 2px;font-size:10.4px}.person span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.person b{flex:none;color:#11765b;font-size:10px}.app-note{margin-top:10px;padding:9px;border-radius:5px;background:#f3f7f0;color:#526b58;font-size:9px}.preview figcaption{margin-top:11px;color:var(--subtle);font-size:.83rem;line-height:1.5}.preview figcaption a{color:#fbbf24}footer{margin-top:30px;text-align:center;color:var(--subtle);font-size:.83rem}
.app-stats strong span{display:inline}
@media(max-width:620px){body{display:block;padding:14px}.shell{width:100%;min-width:0;padding:23px 16px}.preview{min-width:0}.preview-scroll{max-width:100%}.preview-top{flex-wrap:wrap}.intro{margin:36px auto 28px}.preview-label{font-size:.95rem}.preview-demo{font-size:.6rem}.brand-name{font-size:clamp(2.3rem,11vw,3.1rem)}}

/* Actual sender and listener screenshots. */
.interface-gallery{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}.screenshot-link{display:block;border:1px solid #76a8da;border-radius:12px;overflow:hidden;background:#172032}.screenshot-link:focus-visible{outline:3px solid #93c5fd;outline-offset:4px}.interface-image{display:block;width:100%;height:auto}.listener-preview{width:min(560px,100%);margin-inline:auto}.preview figcaption{color:#d1d5db}.preview-top{margin-bottom:12px}

.intro h1 em{display:block;margin-top:.12em}

/* Begin the page 20 pixels from the top on desktop and mobile. */
body{display:block;padding:20px 24px}.shell{margin:0 auto}@media(max-width:620px){body{padding:20px 14px}}

/* Compact logo, claim and introduction. */
.shell{position:relative;padding-top:20px}.language-switch{position:absolute;top:20px;right:24px;margin:0}.brand{padding-inline:46px}.brand-mark{height:36px}.brand-name{margin-top:4px;font-size:clamp(2.7rem,6vw,3.8rem)}.brand-claim{margin-top:8px;font-size:.72rem;letter-spacing:.13em}.brand p{margin:7px 0 0;color:var(--text);font-size:.94rem}.intro{margin:22px auto 23px}.intro h1{margin:0 0 12px;font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:1.1}.intro p{font-size:1rem;line-height:1.5}
@media(max-width:620px){.shell{padding-top:20px}.language-switch{top:14px;right:12px}.brand{padding-inline:24px}.brand-name{font-size:clamp(2.25rem,10vw,3rem)}.brand-claim{font-size:.63rem;letter-spacing:.1em}.brand p{font-size:.86rem}.intro{margin:20px auto}.intro p{font-size:.94rem}}