:root{--bg:#f5f3ee;--paper:#fffefa;--ink:#202824;--muted:#737d75;--stroke:#dcded6;--green:#42634f;--green-dark:#2a4935;--sage:#e5ece2;--warm:#efece4;--orange:#d8a77c;--radius:17px;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.app-shell{max-width:1240px;min-height:100vh;margin:auto;display:flex;flex-direction:column;padding:0 40px}.masthead{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--stroke)}.brand{display:flex;align-items:center;gap:12px;font-size:25px;font-weight:850;letter-spacing:-1.3px}.brand-mark{background:var(--green);color:white;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:27px;font-weight:400}.brand-em{color:var(--green)}.status{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:9px}.status-dot{width:8px;height:8px;background:#aaa;border-radius:50%}.status-dot.connected{background:#6aa46c;box-shadow:0 0 0 4px #dfe9da}.eyebrow{display:flex;align-items:center;gap:11px;color:var(--green);font-weight:800;letter-spacing:2.1px;font-size:10px}.eyebrow-line{width:20px;height:2px;background:var(--green)}h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(64px,7.5vw,102px);line-height:.94;letter-spacing:-5px;font-weight:400;margin:24px 0}h1 em{color:var(--green);font-weight:400}p{line-height:1.65}.button{border:0;border-radius:10px;display:inline-flex;justify-content:center;align-items:center;gap:13px;white-space:nowrap;font-weight:700;min-height:46px;padding:12px 19px;font-size:13px;transition:transform .16s ease,background .16s ease}.button:hover{transform:translateY(-1px)}.button.primary{background:var(--green);color:#fff}.button.primary:hover{background:var(--green-dark)}.button.outline{background:transparent;border:1px solid #9daa9b;color:var(--green-dark)}.button.soft{background:var(--sage);color:var(--green-dark)}.button:focus-visible,input:focus-visible,textarea:focus-visible,.dropzone:focus-visible{outline:3px solid #9eb79f;outline-offset:3px}.workspace{padding:58px 0 70px;flex:1}.intro{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:50px}.intro h1{margin:20px 0}.intro p{color:var(--muted);font-size:14px;max-width:560px;margin-bottom:0}.main-grid{display:grid;grid-template-columns:minmax(350px,.87fr) minmax(400px,1.13fr);align-items:start;gap:26px}.compose-panel,.feed-panel{background:var(--paper);border:1px solid var(--stroke);border-radius:var(--radius);padding:27px;box-shadow:0 12px 30px #30423405}.section-title{font-size:17px;font-weight:800;letter-spacing:-.45px;display:flex;align-items:center;gap:10px}.mini-icon{color:var(--green);background:var(--sage);height:28px;width:28px;border-radius:8px;display:grid;place-items:center;font-size:19px;font-weight:400}.text-compose{margin-top:29px}.input-label{display:block;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:1.2px;margin-bottom:10px}.text-compose textarea{border:1px solid var(--stroke);background:#fafbf7;border-radius:10px;resize:vertical;width:100%;min-height:155px;padding:15px;color:var(--ink);font-size:14px;outline-color:#8aaf95}.text-compose textarea::placeholder{color:#a0aaa2}.compose-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}.hint{color:#9b9e95;font-size:11px}.section-divider{display:flex;gap:13px;align-items:center;margin:27px 0;color:#a4aaa3;font-size:10px;letter-spacing:2px}.section-divider:before,.section-divider:after{content:"";height:1px;background:var(--stroke);flex:1}.dropzone{border:1.5px dashed #a5b6a6;background:#f6f8f3;border-radius:11px;padding:26px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:background .2s,border .2s}.dropzone.dragging{background:#e5f0e0;border-color:var(--green)}.drop-symbol{font-size:28px;color:var(--green);width:48px;height:48px;border-radius:13px;background:var(--sage);display:grid;place-items:center;margin-bottom:13px}.drop-main{font-size:14px;font-weight:800}.drop-sub{font-size:12px;color:var(--muted);margin:6px 0 16px}.compose-note{color:#9ca49a;font-size:11px;line-height:1.7;margin:16px 2px 0}.feed-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:22px;border-bottom:1px solid var(--stroke)}.count{background:var(--warm);border-radius:50px;min-width:23px;padding:4px 6px;font-size:10px;text-align:center;color:var(--muted)}.live-label{display:flex;align-items:center;gap:7px;font-size:9px;letter-spacing:1px;font-weight:800;color:var(--green);white-space:nowrap}.live-pulse{background:#6ea26e;width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 3px #e5eee1}.feed{min-height:330px;max-height:740px;overflow-y:auto}.empty-state{text-align:center;padding:73px 30px}.empty-shape{height:68px;width:68px;display:grid;place-items:center;font-size:38px;transform:rotate(35deg);background:var(--sage);color:var(--green);border-radius:19px;margin:auto}.empty-state h2{font-family:Georgia,serif;font-size:24px;letter-spacing:-1px;font-weight:400;margin:22px 0 5px}.empty-state p{max-width:300px;color:var(--muted);margin:auto;font-size:12px}.feed-note{font-size:10px;color:#9ca49a;margin:18px 0 0}.item{padding:20px 0;border-bottom:1px solid #eaebe5}.item:last-child{border-bottom:0}.item-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.item-type{font-size:10px;text-transform:uppercase;letter-spacing:1.1px;color:var(--green);font-weight:800}.item-time{font-size:11px;color:#a1a79f}.item-text{font-size:14px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 15px}.item-actions{display:flex;gap:8px;flex-wrap:wrap}.small-action{border:1px solid var(--stroke);border-radius:7px;background:#f7f8f4;color:var(--green-dark);padding:8px 12px;font-size:11px;font-weight:750}.small-action:hover{background:var(--sage)}.delete-action{color:#9c6c64;margin-left:auto;background:none;border-color:transparent}.file-row{display:flex;gap:12px;align-items:center;margin:6px 0 14px}.file-icon{background:var(--sage);color:var(--green);border-radius:10px;font-size:22px;width:45px;height:45px;display:grid;place-items:center;flex-shrink:0}.file-info{min-width:0}.file-name{font-weight:750;font-size:13px;overflow-wrap:anywhere}.file-size{font-size:11px;color:var(--muted);margin-top:4px}.image-preview{display:block;max-width:100%;max-height:220px;object-fit:contain;border-radius:8px;border:1px solid var(--stroke);background:#fafafa;margin-bottom:14px}.upload-indicator{margin-top:17px}.upload-meta{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted);margin-bottom:8px}.upload-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-track{height:6px;border-radius:9px;background:#e5eae2;overflow:hidden}.upload-fill{background:var(--green);height:100%;width:0%;transition:width .15s}footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:74px;border-top:1px solid var(--stroke);font-size:10px;color:#8d958b}footer>span:first-child{font-size:10px;font-weight:800;letter-spacing:1.2px;color:var(--green)}.footer-mark{font-size:15px;padding:0 5px}.pair-screen{max-width:760px;width:100%;margin:0 auto;flex:1;display:flex;flex-direction:column;align-items:start;justify-content:center;padding:60px 0 100px}.pair-screen h1{font-size:clamp(66px,9vw,115px)}.hero-copy{color:var(--muted);max-width:520px;font-size:15px;margin:0 0 35px}.pair-card{background:var(--paper);border:1px solid var(--stroke);border-radius:15px;box-shadow:0 16px 35px #203b2720;padding:25px;width:100%;max-width:550px}.pair-card label{font-size:12px;font-weight:800;display:block;margin-bottom:13px}.pair-controls{display:flex;gap:11px}.pair-controls input{min-width:0;flex:1;border:1px solid var(--stroke);border-radius:9px;padding:10px 16px;font-size:22px;letter-spacing:4px;background:#fafbf8}.micro-copy{font-size:11px;color:var(--muted);margin:13px 0 0}.form-error{font-size:12px;color:#b34e42;margin:8px 0 0}.pair-foot{color:var(--muted);font-size:11px;margin-top:24px}.pair-foot>span:first-child{color:#79a27a}.foot-separator{margin:0 12px;color:#b3b9b0}.modal{position:fixed;inset:0;display:grid;place-items:center;z-index:10;padding:15px}.modal-backdrop{position:absolute;inset:0;background:#17271ec2;backdrop-filter:blur(3px)}.modal-box{position:relative;width:min(440px,100%);max-height:90vh;overflow:auto;background:var(--paper);border-radius:18px;padding:33px;box-shadow:0 25px 80px #0003}.close-button{position:absolute;top:17px;right:20px;background:none;border:0;color:var(--muted);font-size:29px}.modal-box h2{font-family:Georgia,serif;font-size:32px;letter-spacing:-1px;font-weight:400;margin:16px 0 8px}.modal-box>p{font-size:12px;color:var(--muted)}.qr-image{width:183px;height:183px;display:block;margin:23px auto 18px;image-rendering:pixelated}.qr-fallback{border:1px dashed var(--stroke);background:#f7f8f3;padding:15px;border-radius:9px;font-size:12px;color:var(--muted);margin:15px 0}.share-row{display:flex;align-items:center;gap:9px;border:1px solid var(--stroke);padding:8px;border-radius:9px;background:#f7f8f4}.share-row span{flex:1;min-width:0;padding-left:8px;overflow-wrap:anywhere;font-size:12px}.share-row .button{min-height:38px;padding:8px 11px}.code-box{margin:14px 0;padding:14px 16px;border-radius:9px;background:var(--sage);display:flex;justify-content:space-between;align-items:center;gap:10px}.code-box span{font-size:10px;font-weight:800;letter-spacing:.8px;color:var(--green)}.code-box strong{letter-spacing:2px;color:var(--green-dark);font-size:16px}.security-note{font-size:11px!important;line-height:1.5!important}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:#243e2e;color:white;border-radius:12px;padding:13px 20px;box-shadow:0 12px 30px #0003;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:20;max-width:min(500px,90vw);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:900px){.app-shell{padding:0 25px}.main-grid{grid-template-columns:1fr}.feed{max-height:none}.intro{align-items:start}}@media(max-width:600px){.app-shell{padding:0 17px}.masthead{height:72px}.brand{font-size:22px}.brand-mark{width:34px;height:34px}.workspace{padding:38px 0}.intro{flex-direction:column;margin-bottom:28px;gap:20px}.intro h1{font-size:72px;letter-spacing:-4px}.intro .button{width:100%}.intro p{font-size:13px}.compose-panel,.feed-panel{padding:20px}.main-grid{gap:17px}.section-title{font-size:15px}.hint{font-size:10px}.pair-screen{padding:60px 0}.pair-screen h1{font-size:69px;letter-spacing:-4px}.pair-controls{flex-direction:column}.pair-controls .button{width:100%}.empty-state{padding:60px 14px}.modal-box{padding:24px}.code-box{flex-wrap:wrap}footer>span:last-child{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}