*{box-sizing:border-box}body{margin:0;background:#f4f7fc;color:#24334c;font:15px/1.5 system-ui,-apple-system,sans-serif}main{max-width:960px;margin:auto;padding:24px 28px 40px}header{display:flex;justify-content:space-between;align-items:center}.brand{font-size:27px;font-weight:750;color:#326ded;letter-spacing:-1px;text-decoration:none;background:none;padding:0}button,a{font:inherit;cursor:pointer;border:0;border-radius:14px;padding:12px 20px;background:#316cec;color:white;text-decoration:none;display:inline-block}button:hover{filter:brightness(.96)}button:disabled{opacity:.55;cursor:wait}.quiet{background:#e8edf5;color:#425471}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #609aff;outline-offset:4px}.intro{text-align:center;margin:30px 0 12px}.eyebrow{font-size:10px;letter-spacing:3px;font-weight:700;color:#6a83a5}h1{font-size:clamp(32px,5vw,48px);line-height:1.12;font-weight:650;letter-spacing:-2px;margin:12px 0}p{color:#71809a}.intro p{margin:12px 0}.discovery{margin-top:18px}.discovery-heading{display:flex;justify-content:space-between;align-items:center;padding:0 12px;color:#506483;font-size:12px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#5eb692;margin-right:7px}small{font-size:12px;color:#8190a8}#nearby{min-height:270px;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:30px;padding:28px 16px;background:repeating-radial-gradient(ellipse at center,#ffffff00 0 66px,#b4c9e526 67px 68px,#ffffff00 69px 106px);text-align:center;color:#7b8ca6;border-radius:50%;font-size:13px}.bubble{display:flex;flex-direction:column;align-items:center;background:none!important;color:#304967;padding:8px;width:140px;gap:4px;transition:transform .2s}.bubble:hover{transform:translateY(-5px)}.avatar{display:grid;place-items:center;width:82px;height:82px;background:linear-gradient(135deg,#e9f1ff,#a8c5f6);border:5px solid #fff;border-radius:50%;font-size:24px;font-weight:600;box-shadow:0 12px 25px #4c72ac22;margin-bottom:7px}.bubble:nth-child(3n+2) .avatar{background:linear-gradient(135deg,#e6f6ef,#9ad3bc);color:#376f5d}.bubble:nth-child(3n+3) .avatar{background:linear-gradient(135deg,#f5eefe,#c9b6ed);color:#765a9f}.bubble.selected .avatar{outline:3px solid #316cec;outline-offset:3px}.bubble-name{font-size:13px;font-weight:650}.bubble-code{font:11px ui-monospace,monospace;letter-spacing:1px;color:#7588a3}.composer{max-width:620px;margin:0 auto;background:#fff;border:1px solid #e2e8f1;border-radius:24px;padding:18px;box-shadow:0 12px 40px #35496908}.drop{position:relative;display:flex;gap:16px;align-items:center;padding:16px;border:1px dashed #c9d9ed;border-radius:15px;background:#f8faff;cursor:pointer}.drop strong{font-size:14px;font-weight:600}.drop small{display:block;margin-top:3px;overflow-wrap:anywhere}.file-icon{font-size:24px;color:#316cec;background:#e8effe;border-radius:13px;width:46px;height:46px;display:grid;place-items:center;flex-shrink:0}.drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}.drop:focus-within{outline:3px solid #609aff}.send-row{display:flex;gap:10px;margin-top:12px}input{font:inherit;font-size:16px;min-width:0;padding:12px;border:1px solid #dce4f0;border-radius:12px;background:#f8faff;color:#24334c;width:100%;margin:8px 0}.send-row input{margin:0;font-size:16px}.send-row button{white-space:nowrap;font-size:13px}.transfer p{font-size:12px;margin:12px 0 6px;overflow-wrap:anywhere}.transfer button,.transfer a{margin-top:8px}progress{width:100%;height:4px;accent-color:#316cec;display:block}.self{max-width:620px;margin:24px auto 0;display:flex;gap:12px;align-items:center;padding:0 8px}.self-avatar{border:1px solid #dae5f3;border-radius:50%;width:46px;height:46px;display:grid;place-items:center;background:#fff;font-size:23px;color:#6992d2;flex-shrink:0}.self small{display:block;font-size:10px}.self>div:nth-child(2){flex:1}.name-button{display:block;padding:0;background:none;color:#344969;font-weight:600;font-size:13px;text-align:left}.code-button{background:none;color:#344969;padding:0;text-align:right}.code-button code{font:14px ui-monospace,monospace;letter-spacing:1px}.code-button span{display:block;font-size:10px;color:#8190a8}dialog{border:1px solid #dce4ef;border-radius:24px;background:#f4f7fc;color:#24334c;width:min(600px,calc(100% - 24px));max-height:90vh;padding:24px}dialog::backdrop{background:#162c4a55;backdrop-filter:blur(8px)}dialog section{margin:14px 0}dialog button{margin:5px}dialog h2{font-size:22px}dialog footer{font-size:12px;color:#7d8da5;margin-top:28px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}@media(max-width:600px){main{padding:18px 16px 28px}.intro{margin-top:26px}h1{font-size:36px}#nearby{min-height:240px;gap:8px;padding:18px 0}.bubble{width:120px}.avatar{width:70px;height:70px}.composer{padding:12px}.self{gap:8px}.self-avatar{display:none}.code-button code{font-size:12px}.send-row{gap:7px}.send-row button{padding:12px}.drop{padding:12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.discovery{margin-top:32px}.transfer p:empty{display:none}

.recent-section{max-width:620px;margin:0 auto 16px}.recent-section h2{font-size:12px;font-weight:500;color:#71809a;margin:0 0 7px 4px}.recent-device{display:flex;align-items:center;gap:10px;width:100%;border-radius:10px;padding:9px 12px;background:#ffffffa8;color:#344969;text-align:left;margin:4px 0}.recent-device:disabled{opacity:1;cursor:default;color:#8490a1}.presence-pip{width:7px;height:7px;border-radius:50%;background:#aab4c3;flex-shrink:0}.presence-pip.online{background:#38a578;box-shadow:0 0 0 3px #38a57814}.recent-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.recent-device code{font:11px ui-monospace,monospace;letter-spacing:.7px}.recent-device small{font-size:11px;min-width:39px;text-align:right}@media(max-width:400px){.recent-device{gap:7px;padding:9px}.recent-device code{font-size:10px}}

.new-device{font-size:12px;padding:7px 12px;margin-top:6px}.new-device-code{margin-top:8px}.new-device-code input{margin:0;font-size:16px}.send-row{align-items:center;justify-content:space-between}#recipient-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:#71809a}

.header-actions{display:flex;align-items:center;gap:8px}#received-toggle{font-size:13px}#received-count{display:inline-block;margin-left:5px;font-size:11px;background:#d4e0f4;border-radius:20px;padding:1px 6px}.received-drawer{position:fixed;z-index:10;right:24px;top:80px;width:min(380px,calc(100vw - 32px));max-height:min(480px,75dvh);overflow:auto;background:#fff;border:1px solid #dce4ef;border-radius:20px;box-shadow:0 16px 70px #233c6833;padding:16px}.received-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.received-heading h2{font-size:15px;margin:0}.received-heading button{font-size:20px;padding:2px 10px;border-radius:10px}.received-file{display:flex;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid #edf1f7}.received-info{flex:1;min-width:0}.received-info>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.received-info small{display:block;font-size:11px}.file-action{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;padding:8px;border-radius:10px}.file-action svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.received-note{display:block;font-size:10px;margin-top:12px;line-height:1.6}@media(max-width:600px){.received-drawer{right:16px;top:76px}.header-actions{gap:6px}#received-toggle{padding:10px 12px}}

.composer{background:none;border:0;box-shadow:none;padding:0}.composer>.drop{padding:20px;background:#ffffffb8}.send-file{display:flex;align-items:center;gap:10px;padding:14px;background:#fff;border:1px solid #e2e8f1;border-radius:15px;margin-top:8px}.send-file-info{flex:1;min-width:0}.send-file-name{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.send-file-status{display:block;font-size:11px;margin:3px 0 7px}.send-file progress{height:3px}.send-check{color:#29996d;font-size:23px;padding:5px}.send-file[data-state=failed] .send-file-status{color:#b85c54}.transfer{max-width:620px;margin:12px auto}.transfer:has(#status:empty):not(:has(#incoming:not([hidden]))){display:none}.type-icon{width:38px;height:44px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;background:#e9edf4;color:#74849b}.type-icon svg{width:24px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.type-image{background:#e9e0fb;color:#7853ac}.type-audio{background:#fbe7ee;color:#ac547a}.type-video{background:#e0edf9;color:#3e76b0}.type-archive{background:#fbefda;color:#9a7635}.type-code{background:#deefe8;color:#3c886c}.type-pdf{background:#fae5e3;color:#b85c54}.type-sheet{background:#e0f0e5;color:#448158}.type-document{background:#e3eafa;color:#5778b4}@media(max-width:600px){.composer{padding:0}.send-file{padding:10px;gap:8px}.send-file .file-action{width:30px;height:32px}}

.add-device-row{display:flex;gap:8px}.add-device-row input{flex:1;min-width:0;font-size:16px}.add-device-row button{font-size:13px;padding:10px 16px}.new-device-code #add-device-status{display:block;color:#a3514c;font-size:12px;margin-top:5px}.new-device-code #add-device-status:empty{display:none}

.incoming-dialog{width:min(420px,calc(100vw - 32px));padding:24px;background:#fff}.incoming-dialog h2{margin:0 0 18px;font-size:18px}.incoming-file{display:flex;align-items:center;gap:14px}.incoming-file>div{min-width:0}.incoming-file strong{display:block;overflow-wrap:anywhere;font-size:14px}.incoming-file small{display:block;margin-top:4px}.incoming-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}.incoming-actions button{margin:0}