:root{--dark: #1A1410;--ink: #231C18;--bone: #F5EFE6;--paper: #EFE6D8;--copper: #E85D2C;--ember: #D44A1F;--teal: #2C7F8A;--moss: #3A4A3E;--stone: #8C8275;--line: rgba(26,20,16,.08);--line-2: rgba(26,20,16,.15);--ink-60: rgba(35,28,24,.6);--ink-80: rgba(35,28,24,.85);--tile: rgba(26,20,16,.04);--topbar: 56px;--tabh: 66px}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bone);overscroll-behavior:none}body{color:var(--dark);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}#app{display:flex;flex-direction:column;height:100dvh;position:relative}#app:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(ellipse at 25% 12%,rgba(232,93,44,.07),transparent 55%),radial-gradient(ellipse at 82% 88%,rgba(44,127,138,.06),transparent 55%)}#topbar,#pager,#tabs{position:relative;z-index:1}.display{font-family:"DM Serif Display",Georgia,serif;line-height:.98;letter-spacing:-.02em;font-weight:400}.wordmark{font-family:Plus Jakarta Sans,system-ui,sans-serif;font-weight:800;letter-spacing:-.03em}.eyebrow{font-family:Inter,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:var(--stone)}#topbar{height:var(--topbar);flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line);background:#f5efe6d9;backdrop-filter:blur(8px)}#brand{font-size:1.15rem}.status{font:600 .7rem/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.1em;padding:6px 12px;border-radius:2px;border:1px solid var(--line-2);background:transparent;color:var(--stone);cursor:pointer;display:flex;align-items:center;gap:6px}.status:before{content:"";width:7px;height:7px;border-radius:999px;background:var(--stone)}.status.ready,.status.connected{color:var(--copper);border-color:#e85d2c59}.status.ready:before,.status.connected:before{background:var(--copper);box-shadow:0 0 8px #e85d2c99}.status.connecting,.status.configuring{color:var(--teal);border-color:#2c7f8a59}.status.connecting:before{background:var(--teal);animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.3}}#pager{flex:1 1 auto;overflow:hidden;position:relative}.screen{position:absolute;inset:0;overflow-y:auto;padding:22px 18px 28px;display:none}.screen.active{display:block}.screen-head{margin:2px 0 20px}.screen-head .eyebrow{display:block;margin-bottom:6px}.screen-head h1{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:2.1rem;line-height:1;letter-spacing:-.02em;margin:0}.screen-head .sub{color:var(--ink-60);font-size:.9rem;margin-top:8px;max-width:46ch}#tabs{height:var(--tabh);flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);background:#f5efe6e6;backdrop-filter:blur(8px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0)}#tabs button{background:none;border:0;color:var(--stone);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font:600 .62rem/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.08em}#tabs .tabicon{width:22px;height:22px;display:block}#tabs button.active{color:var(--dark)}#tabs button.active .tabicon{color:var(--copper)}.card{background:var(--tile);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}.card.flat{background:transparent}.muted{color:var(--ink-60)}.hint{color:var(--ink-60);font-size:.85rem;line-height:1.5}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--dark);color:var(--bone);border:0;border-radius:2px;padding:14px 18px;font:600 .92rem Inter,sans-serif;letter-spacing:.02em;cursor:pointer;transition:background .18s,transform .18s}.btn:hover:not(:disabled){background:var(--copper);transform:translateY(-1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.ghost{background:transparent;color:var(--dark);border:1.5px solid var(--dark)}.btn.ghost:hover:not(:disabled){background:var(--dark);color:var(--bone);transform:none}.btn.copper{background:var(--copper)}.btn.copper:hover:not(:disabled){background:var(--ember)}.btn.danger{background:transparent;color:var(--ember);border:1.5px solid rgba(212,74,31,.4)}.btn.danger:hover:not(:disabled){background:var(--ember);color:var(--bone);transform:none}.btn.small{width:auto;padding:9px 14px;font-size:.8rem}.row{display:flex;align-items:center;gap:10px}.between{display:flex;align-items:center;justify-content:space-between}.banner{background:#e85d2c12;border:1px solid rgba(232,93,44,.25);color:var(--ink-80);padding:12px 14px;border-radius:12px;font-size:.85rem;line-height:1.5;margin-bottom:14px}.dot{width:8px;height:8px;border-radius:999px;flex-shrink:0;background:var(--stone)}.dot.live{background:var(--copper);box-shadow:0 0 8px #e85d2c80}.dot.recent{background:var(--teal)}.dot.stale{background:var(--stone)}.dot.lost{background:var(--ember)}.list-row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);cursor:pointer}.list-row:last-child{border-bottom:0}.list-row.sel{background:var(--tile);border-radius:12px;padding-left:12px;padding-right:12px}.list-row .name{font-weight:600;font-size:.95rem}.list-row .meta{font-size:.78rem;color:var(--ink-60);margin-top:2px}.list-row .arrow{font-size:1.3rem;color:var(--copper);transition:transform .4s ease;line-height:1}.chev{margin-left:auto;color:var(--stone);font-size:1.1rem}.compass-wrap{display:flex;flex-direction:column;align-items:center;margin:4px 0 18px}#compass{width:100%;max-width:300px;aspect-ratio:1;display:block}.compass-focus{text-align:center;margin-top:-6px}.compass-focus .who{font-family:"DM Serif Display",Georgia,serif;font-size:1.5rem}.compass-focus .dist{color:var(--copper);font-weight:600;letter-spacing:.02em}#ptr{position:fixed;top:-46px;left:50%;transform:translate(-50%);z-index:30;background:var(--dark);color:var(--bone);padding:8px 16px;border-radius:999px;font:600 .68rem Inter,sans-serif;text-transform:uppercase;letter-spacing:.08em;opacity:0;transition:opacity .15s;pointer-events:none;white-space:nowrap}.to-row{display:flex;gap:10px;margin-bottom:14px}.to-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;flex:1;-webkit-overflow-scrolling:touch}.to-chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:var(--tile);border:1px solid var(--line-2);border-radius:999px;padding:7px 14px;cursor:pointer;color:var(--ink-80);font-family:Inter,sans-serif}.to-chip .to-name{font-weight:600;font-size:.82rem}.to-chip .to-sub{font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--stone)}.to-chip.sel{background:var(--dark);border-color:var(--dark);color:var(--bone)}.to-chip.sel .to-sub{color:#f5efe699}#msgList{display:flex;flex-direction:column;gap:10px;padding-bottom:8px}.msg{max-width:80%;padding:10px 13px;font-size:.88rem;line-height:1.4}.msg.out{align-self:flex-end;background:var(--dark);color:var(--bone);border-radius:18px 18px 4px}.msg.in{align-self:flex-start;background:var(--paper);color:var(--dark);border:1px solid var(--line);border-radius:18px 18px 18px 4px}.msg .who{font:600 .68rem/1 Inter;text-transform:uppercase;letter-spacing:.08em;color:var(--copper);margin-bottom:4px}.msg .meta{font-size:.66rem;margin-top:5px;opacity:.65;text-align:right;text-transform:uppercase;letter-spacing:.06em}#composer{position:sticky;bottom:0;background:var(--bone);padding-top:10px}.composer-box{display:flex;gap:8px;align-items:flex-end}#msgInput{flex:1;background:var(--tile);border:1px solid var(--line-2);color:var(--dark);border-radius:12px;padding:12px 14px;font:400 .92rem Inter,sans-serif;resize:none;max-height:96px}#msgInput:focus{outline:none;border-color:var(--copper)}#composer .send{width:48px;height:48px;flex:0 0 48px;border-radius:2px;padding:0}.byte-meter{display:flex;align-items:center;gap:8px;margin:6px 2px 0;font:600 .66rem Inter;text-transform:uppercase;letter-spacing:.08em;color:var(--stone)}.byte-bar{flex:1;height:3px;background:var(--line);border-radius:2px;overflow:hidden}.byte-fill{height:100%;background:var(--teal);transition:width .15s,background .15s}.byte-fill.warn{background:var(--copper)}.byte-fill.over{background:var(--ember)}.kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.86rem}.kv:last-child{border-bottom:0}.kv .k{color:var(--ink-60)}.kv .v{font-weight:600;text-align:right}.big-stat{font-family:"DM Serif Display",Georgia,serif;font-size:1.6rem;line-height:1}canvas.trail{width:100%;height:96px;display:block;margin:10px 0 4px;border-radius:10px;background:var(--tile)}#compass{background:transparent}#qrbox{display:flex;justify-content:center;padding:14px;background:#fff;border-radius:12px;width:fit-content;margin:0 auto 12px;border:1px solid var(--line)}video{width:100%;max-width:320px;border-radius:12px;display:block;margin:10px auto 0;background:#000}input.text{flex:1;background:var(--tile);border:1px solid var(--line-2);color:var(--dark);border-radius:10px;padding:11px 13px;font:400 .88rem Inter,sans-serif}input.text:focus{outline:none;border-color:var(--copper)}.pill{font:600 .68rem Inter;text-transform:uppercase;letter-spacing:.06em;padding:3px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-60);white-space:nowrap}.pill.live{color:var(--copper);border-color:#e85d2c66}.pill.recent{color:var(--teal);border-color:#2c7f8a66}.pill.stale,.pill.lost{color:var(--ember);border-color:#d44a1f66}