@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&display=swap");
:root{--ink:#17221d;--muted:#68736d;--line:#dce3dc;--cream:#f6f7f2;--green:#b9e76b;--dark:#20352b}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:Manrope,system-ui,sans-serif}body:before{content:"";display:block;height:6px;background:var(--green)}.topbar,main{max-width:1080px;margin:auto}.topbar{display:flex;justify-content:space-between;align-items:center;padding:28px 32px}.brand{color:var(--ink);font-weight:800;text-decoration:none;letter-spacing:-.03em}.brand-mark{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:8px;border-radius:50%;background:var(--green);font-size:20px}.privacy,.eyebrow,.step,.status,.section-title,.hint{font:500 11px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.08em}.privacy{color:var(--muted);display:flex;align-items:center;gap:8px}.pulse,.status-dot{width:7px;height:7px;border-radius:50%;background:#62ad43;display:inline-block}.hero{padding:72px 32px 48px}.eyebrow{color:#78934d;margin:0 0 13px}.hero h1{font-size:clamp(42px,7vw,82px);line-height:.98;letter-spacing:-.075em;margin:0;font-weight:800}.hero h1 em{font-style:normal;color:#779d42}.hero-copy{max-width:450px;color:var(--muted);line-height:1.7;margin-top:28px}.panel{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 12px 35px #20352b0b}.setup-panel{padding:40px 42px}.panel-heading,.workspace-head{display:flex;justify-content:space-between;align-items:flex-start}.panel h2{margin:0;font-size:26px;letter-spacing:-.05em}.step{color:var(--muted);padding-top:4px}.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}.role-card{min-height:180px;background:#fff;border:1px solid var(--line);border-radius:13px;text-align:left;padding:24px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:10px;color:var(--ink);transition:.2s}.role-card:hover,.role-card:focus{border-color:#8dbb53;box-shadow:0 7px 18px #20352b12;transform:translateY(-2px)}.role-icon{font-size:30px;background:#f0f6e8;border-radius:50%;width:48px;height:48px;display:grid;place-items:center;color:#779d42}.role-card strong{font-size:17px}.role-card span:last-child{font-size:13px;color:var(--muted);line-height:1.5}.config{margin-top:28px;display:grid;grid-template-columns:1fr 2fr;gap:9px 14px;align-items:center}.config label{font-size:13px;font-weight:700}.config input{border:1px solid var(--line);border-radius:8px;padding:12px;font:14px Manrope;background:#fbfcf9;color:var(--ink)}.config input:focus{outline:2px solid var(--green);border-color:transparent}.config small{color:var(--muted);font-weight:400}.hint{grid-column:2;color:var(--muted);font-size:10px;text-transform:none;letter-spacing:0}.workspace-panel{padding:36px 42px;margin-top:24px}.text-button{border:0;background:none;color:#779d42;cursor:pointer;font-weight:700}.status{margin:22px 0;padding:12px 15px;border-radius:8px;background:#f1f7e9;color:#668c38;display:flex;gap:9px;align-items:center}.section-title{display:flex;justify-content:space-between;color:var(--muted);margin:24px 0 12px}.device-list{display:grid;gap:9px}.device,.request{border:1px solid var(--line);border-radius:10px;padding:15px 18px;display:flex;align-items:center;justify-content:space-between}.device-info{display:flex;gap:12px;align-items:center}.avatar{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;background:var(--dark);color:#fff;font-weight:700}.device small{display:block;color:var(--muted);margin-top:3px}.primary,.accept{border:0;border-radius:7px;background:var(--dark);color:#fff;padding:11px 16px;font-weight:700;cursor:pointer}.primary:disabled{opacity:.4;cursor:not-allowed}.file-picker{border:1px dashed #9ebc7c;border-radius:12px;margin-top:22px;padding:22px;text-align:center}.file-picker input{display:none}.file-picker label{display:flex;flex-direction:column;gap:5px;cursor:pointer;font-size:13px}.file-picker label span:last-child{color:var(--muted)}.upload-icon{font-size:25px;color:#779d42}.file-picker .primary{margin-top:15px}.selected-item,.received-item{display:flex;justify-content:space-between;font-size:13px;padding:8px;border-bottom:1px solid var(--line);text-align:left}.received-files{margin-top:22px}.received-item a{color:#779d42;font-weight:700}.ready-card{display:flex;gap:14px;background:#f4f8ef;padding:18px;border-radius:10px}.ready-icon{background:#a6d664;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-weight:700}.ready-card p{margin:4px 0 0;color:var(--muted);font-size:13px}.empty{color:var(--muted);border:1px dashed var(--line);padding:24px;text-align:center;border-radius:10px;font-size:13px}.request-area{margin-top:18px}.request strong{display:block}.request small{color:var(--muted)}.footnote{color:var(--muted);font-size:11px;text-align:center;padding:35px 20px 60px}.hidden{display:none!important}@media(max-width:650px){.topbar{padding:22px 20px}.hero{padding:48px 20px 32px}.setup-panel,.workspace-panel{padding:27px 20px;border-radius:14px}.role-grid{grid-template-columns:1fr}.role-card{min-height:140px}.config{grid-template-columns:1fr}.hint{grid-column:1}.workspace-head h2{font-size:22px}.device,.request{gap:10px;align-items:flex-start;flex-direction:column}.device .primary,.request .accept{width:100%}}
.secondary{border:1px solid var(--line);background:#fff;border-radius:7px;padding:11px 16px;font-weight:700;cursor:pointer}.room-display{text-align:center;margin:20px 0}.room-display strong{display:block;font:800 44px "DM Mono",monospace;letter-spacing:.15em;color:#779d42}.room-display small{color:var(--muted)}@media(max-width:650px){.topbar{padding:22px 20px}.hero{padding:48px 20px 32px}.setup-panel,.workspace-panel{padding:27px 20px;border-radius:14px}.role-grid{grid-template-columns:1fr}.role-card{min-height:140px}.config{grid-template-columns:1fr}.hint{grid-column:1}.workspace-head h2{font-size:22px}.device,.request{gap:10px;align-items:flex-start;flex-direction:column}.device .primary,.request .accept{width:100%}}
.join-room{padding:20px;background:#f4f8ef;border-radius:10px}.join-room label{display:block;font-size:13px;font-weight:700;margin-bottom:8px}.join-controls{display:flex;gap:9px}.join-controls input{flex:1;border:1px solid var(--line);border-radius:7px;padding:11px;font:600 16px "DM Mono",monospace;letter-spacing:.12em;text-transform:uppercase}.join-room p{color:var(--muted);font-size:12px;margin:10px 0 0}@media(max-width:650px){.join-controls{flex-direction:column}.join-controls .primary{width:100%}}@media(max-width:650px){.topbar{padding:22px 20px}.hero{padding:48px 20px 32px}.setup-panel,.workspace-panel{padding:27px 20px;border-radius:14px}.role-grid{grid-template-columns:1fr}.role-card{min-height:140px}.config{grid-template-columns:1fr}.hint{grid-column:1}.workspace-head h2{font-size:22px}.device,.request{gap:10px;align-items:flex-start;flex-direction:column}.device .primary,.request .accept{width:100%}}
.step-label{display:block;color:#78934d;font:500 10px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}.join-room label{font-size:16px}.join-room p{line-height:1.5}.file-picker h3{margin:0 0 15px;font-size:20px;letter-spacing:-.04em}.drop-zone{min-height:135px!important;border:1px dashed #a7c887;border-radius:12px;background:#fbfdf8;display:flex!important;align-items:center;justify-content:center;padding:20px;transition:.2s}.drop-zone:hover{border-color:#6f9d3d;background:#f2f8e9}.send-action{width:100%;margin-top:18px}.request{background:#fbfdf8}.request .accept{background:#779d42;padding:12px 22px}.room-display{padding:23px;background:#f4f8ef;border-radius:12px}.room-display strong{font-size:clamp(36px,8vw,52px)}.status{font-size:10px}.status-dot{flex:none}