:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#183b35;background:#f5f6f1;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #9bbf55;outline-offset:4px}.app-shell{max-width:1240px;margin:0 auto;padding:0 48px}header{height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dce2d9}.brand{display:flex;align-items:center;gap:12px;font-size:25px;font-weight:750;letter-spacing:-1px;color:inherit;text-decoration:none}.brand img{width:36px;height:36px}.version{font-size:11px;padding:5px 7px;border:1px solid #d2dbcc;border-radius:5px;letter-spacing:0;font-weight:500}.phase-label{font-size:12px;display:flex;align-items:center;gap:8px;color:#576a60}.phase-label i{width:7px;height:7px;background:#54794b;border-radius:50%}main{display:grid;grid-template-columns:1.1fr 1fr;gap:72px 48px;padding:74px 0 60px}.eyebrow{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:1.3px;font-weight:600;margin:0 0 20px}h1{font-size:clamp(40px,4.4vw,60px);font-weight:550;line-height:1.08;letter-spacing:-2.9px;margin:0 0 24px}.lede{max-width:440px;color:#5e7065;font-size:15px;line-height:1.8}.principles{display:flex;flex-wrap:wrap;gap:9px 16px;font-size:10px;margin-top:28px;color:#5b7161}.principles span:before{content:"✓";margin-right:6px}.connection-map{background:#e9eee3;border-radius:18px;min-height:280px;display:flex;flex-wrap:wrap;align-content:center;align-items:center;justify-content:center;padding:32px 20px 20px;margin-top:10px}.device{font-size:12px;display:grid;justify-items:center;gap:8px}.device>span{display:grid;place-items:center;width:54px;height:65px;border:1.5px solid #6a8871;border-radius:10px;font-size:27px;background:#f4f6ec}.device small{color:#657766;font-size:10px}.connection-line{margin:0 16px;display:grid;justify-items:center;gap:14px}.connection-line span{font:8px ui-monospace,monospace;letter-spacing:.6px}.connection-line div{width:132px;border-top:1px dashed #799678}.connection-line small{font-size:9px;color:#697c68}.connection-map>p{width:100%;font-size:10px;text-align:center;color:#687b69;margin:36px 0 0}.demo-panel{grid-column:1 / -1;background:#fff;border:1px solid #dce3d8;border-radius:16px;padding:32px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.panel-heading .eyebrow{color:#73846c;margin-bottom:10px}h2{font-size:25px;letter-spacing:-.8px;font-weight:550;margin:0}.pill{border-radius:30px;font-size:10px;background:#edf2e6;color:#5a6d4e;padding:8px 12px;white-space:nowrap}.demo-note,.muted{font-size:12px;line-height:1.8;color:#6a776d}.state-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}.state-card{display:grid;gap:12px;border:1px solid #e2e7de;background:#fafbf8;border-radius:8px;padding:18px}.state-card span{font-size:10px;color:#778171;text-transform:uppercase;letter-spacing:1px}.state-card strong{font-family:ui-monospace,monospace;font-size:19px;font-weight:500}.actions{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}button{border:1px solid #16453d;border-radius:6px;padding:11px 15px;font-family:inherit;font-weight:500;font-size:11px;background:#16453d;color:#fff;cursor:pointer}button:hover{background:#2b5e50}button.secondary{background:#edf2e6;color:#244c3c;border-color:#d2dfc4}button.text-button{color:#59695c;background:none;border-color:transparent}.event-log{background:#f4f6f1;border-radius:8px;padding:17px 20px;max-height:250px;overflow:auto;font:11px/1.8 ui-monospace,monospace;color:#62715e}.log-label{font-size:9px;letter-spacing:1px;color:#73866b}.event-log p{margin-bottom:0}.event-log ol{padding-left:22px}.error{color:#9a3636;font-size:12px}.details-grid{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:72px}.details-grid .eyebrow{margin-bottom:12px;color:#728269}dl{margin-top:24px}dl>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid #e0e5dc;font-size:11px}dd{margin:0;color:#607357}.next-panel{background:#e9eee2;padding:28px 32px;border-radius:14px}.next-panel h2{font-size:31px;line-height:1.15}.next-panel>p:not(.eyebrow),.next-phase p{font-size:12px;line-height:1.8;color:#62725e}.next-phase{border-top:1px solid #d1dcc8;margin-top:28px;padding-top:20px}.next-phase span{display:block;font:9px ui-monospace,monospace;letter-spacing:1px;color:#718164;margin-bottom:10px}.next-phase strong{font-size:13px;font-weight:550}footer{display:flex;justify-content:space-between;gap:16px;border-top:1px solid #dce2d9;padding:24px 0 32px;color:#7d8978;font-size:10px}@media(max-width:820px){.app-shell{padding:0 24px}header{height:85px}main{gap:36px;padding-top:48px}.connection-map{grid-column:1 / -1;grid-row:2}.intro{grid-column:1 / -1}h1{font-size:48px}.details-grid{gap:32px}}@media(max-width:520px){.app-shell{padding:0 18px}.brand{font-size:21px;gap:8px}.phase-label{font-size:9px}h1{font-size:44px}.intro .eyebrow{font-size:8px}.demo-panel{padding:20px}.panel-heading{align-items:start}h2{font-size:21px}.pill{font-size:8px;padding:7px 9px}.state-grid{gap:7px}.state-card{padding:12px 9px}.state-card span{font-size:8px;letter-spacing:0}.state-card strong{font-size:13px}.details-grid{grid-template-columns:1fr}.connection-line{margin:0 10px}.connection-line div{width:90px}.connection-line span{font-size:6px}.device{font-size:10px}footer{flex-direction:column}}.entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:30px 0 10px}h3,label{font-size:14px;font-weight:600}h3{margin:0 0 12px}label{display:block}input{display:block;width:100%;min-width:0;padding:12px;border:1px solid #ccd9c5;border-radius:7px;margin:12px 0;background:#fafbf8;color:#183b35;font-family:inherit;font-size:12px}input:focus-visible{outline:2px solid #92ad76;outline-offset:2px}button:disabled{opacity:.5;cursor:not-allowed}button:disabled:hover{background:#16453d}.invitation-box,.approval-box{padding:20px;margin-top:24px;background:#f4f7ee;border:1px solid #dce5d4;border-radius:9px}.approval-box{border-left:3px solid #769a57}.approval-box .actions{margin-bottom:0}.status-note{padding:16px;border-left:3px solid #7a9a61;background:#f1f5ea;font-size:13px;line-height:1.7}.signaling-panel{grid-column:1 / -1}footer a{color:inherit}@media(max-width:640px){.entry-grid{grid-template-columns:1fr;gap:28px}.state-card strong{font-size:11px}}.pairing-box{margin:1.5rem 0;padding:1.5rem;background:#f3f7f4;border-radius:12px}.pairing-code{display:block;font-family:monospace;font-size:clamp(1rem,3vw,1.6rem);font-weight:700;letter-spacing:.06em;margin:1.3rem 0;overflow-wrap:anywhere}.checkbox-label{display:flex;align-items:flex-start;gap:.7rem;margin:1rem 0;font-size:.9rem}.checkbox-label input{width:auto;flex:0 0 auto;margin-top:.2rem}.fingerprint{display:block;overflow-wrap:anywhere;margin:.6rem 0}.transfer-panel{grid-column:1 / -1}.file-list{list-style:none;padding:0;margin:1.5rem 0}.file-list li{padding:1rem 0;border-bottom:1px solid #dbe4dd;overflow-wrap:anywhere}.file-list li>div{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}progress{width:100%;height:1.2rem;accent-color:#164d42;margin-top:.6rem}input[type=file]{max-width:100%;padding:1rem}.success-note{padding:1.25rem;margin:1rem 0;border-radius:12px;background:#e6f0e4}.saved-panel{grid-column:1 / -1}.saved-transfer{border-top:1px solid var(--line, #d7dfd8);margin-top:1.5rem;padding-top:1rem;overflow-wrap:anywhere}select{max-width:100%;padding:.7rem;border:1px solid #cbd6cb;border-radius:.4rem;color:inherit;background:#f7f9f4;font:inherit}.network-panel{grid-column:1/-1;min-width:0}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:1rem;margin:1.5rem 0}.metric-card{border:1px solid #dbe4dd;border-radius:10px;padding:1rem;display:flex;flex-direction:column;gap:.6rem;min-width:0;overflow-wrap:anywhere}.metric-card>span{font-size:.8rem;color:#4d685c}.metric-card>strong{font-size:1rem}.metric-card>small{line-height:1.5;color:#52695e}.metrics-chart{margin:1.5rem 0;padding:1rem;background:#f6f8f3;border-radius:10px;min-width:0}.metrics-chart svg{display:block;width:100%;height:auto;min-width:0}.metrics-chart text{font-size:12px;fill:#4d685c}.metrics-chart select,.network-panel select{display:block;width:100%;margin:.5rem 0}.metrics-chart input[type=range]{width:100%;padding:0;accent-color:#164d42}.measurement-events{padding-left:1.4rem;max-height:340px;overflow:auto}.measurement-events li{margin:1rem 0;overflow-wrap:anywhere}.measurement-events li span,.measurement-events li small{display:block;margin-top:.4rem;line-height:1.5}:root{color-scheme:light dark}button,select,input:not([type=checkbox]):not([type=range]){min-height:44px;font-size:16px}button,select,input{max-width:100%}button{overflow-wrap:anywhere}.checkbox-label{min-height:44px;cursor:pointer}.mobile-panel,.pwa-panel,.mobile-notice{grid-column:1 / -1;min-width:0}.capability-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:.8rem 1.4rem}.capability-list div{min-width:0;padding:.6rem 0;border-bottom:1px solid #dce2d9}.capability-list dt{font-size:.85rem;color:#52695e}.capability-list dd{margin:.4rem 0 0;overflow-wrap:anywhere}.file-export-controls{width:100%}.camera-invitation video{width:100%;max-width:420px;border-radius:10px;margin:1rem 0}.camera-invitation button{margin:.4rem .5rem .4rem 0}.qr-image{width:min(100%,304px);background:#fff;padding:12px;border-radius:10px}.qr-image svg{display:block;width:100%;height:auto}.timeline-plot{overflow-x:auto;max-width:100%;border-radius:6px}.timeline-plot:focus-visible{outline:3px solid #9bbf55;outline-offset:3px}@media(max-width:600px){.metrics-chart{padding:.8rem}.timeline-plot svg{min-width:640px}.timeline-plot text{font-size:18px}.file-list li,.invitation-box{min-width:0}.file-export-controls .actions{align-items:stretch}.file-export-controls button{width:100%;text-align:left}}@media(prefers-color-scheme:dark){:root{background:#101b18;color:#e0eee6}header,footer{border-color:#41574b}.demo-panel{background:#182923;border-color:#41574b}.state-card,.pairing-box,.event-log,input,select,.device{background:#10221a;color:#e0eee6;border-color:#4e6558}.muted,.lede,.demo-note,.eyebrow,.phase-label,.state-card span,.principles,.metric-card>span,.metric-card>small,.capability-list dt,.connection-line small,.device small,.connection-map p,.details-grid p,footer,.next-phase span,.next-phase p{color:#b9cebf}.pill,.status-note,.invitation-box,.approval-box,.success-note,.next-panel,.next-phase,.connection-map,.code-block{background:#23392c;color:#e0eee6;border-color:#819b60}button{background:#b4d99b;color:#13251a}button:hover{background:#c9e7b5}button.secondary{background:#294637;color:#e0eee6;border-color:#718c70}button:disabled:hover{background:#294637}.metrics-chart{background:#10221a}.metrics-chart text{fill:#ccdfd2}.metric-data-line{stroke:#b4d99b}.metric-card,.capability-list div,.file-list li,.saved-transfer{border-color:#41574b}.error{color:#ffb4b4}.pairing-code{background:#10221a;color:#e4f3dc;border-color:#718c70}code{color:#d7e9dc}.qr-image{background:#fff}}