*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth;interpolate-size:allow-keywords}*{margin:0;line-height:calc(4px + 2ex)}body{-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}p{text-wrap:pretty;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}h1,h2,h3,h4,h5,h6{text-wrap:balance;overflow-wrap:break-word}#root{isolation:isolate}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}:root{--color-accent:#008aff;--color-accent-hover:#0073e6;--color-border:#ccc;--color-border-soft:#ddd;--color-border-subtle:#e0e0e0;--color-on-accent:#fff;--color-shadow:#0000001a;--color-shadow-strong:#00000021;--color-success:#4caf50;--color-surface:#fff;--color-surface-info:#e3f2fd;--color-surface-muted:#f0f0f0;--color-surface-soft:#f9f9f9;--color-surface-success:#e8f5e9;--color-text:black;--color-text-muted:#666;--color-text-subtle:#999;--color-text-supporting:#555;--color-text-success:#2e7d32;--color-transparent:transparent}body{color:var(--color-text);font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif}code{font-size:.9rem}button.reset-btn,.storage-persistence{margin-bottom:1rem}.storage-persistence .persist-result-slot{display:grid}.storage-persistence .persist-result-slot>*{grid-area:1/1}.storage-persistence .persist-sizer{visibility:hidden;max-width:44rem;margin:.5rem 0 0;line-height:1.5}.storage-persistence .persist-result{max-width:44rem;margin:.5rem 0 0;line-height:1.5}.storage-persistence .persist-result.granted{color:var(--color-text-success)}.card.tree-diagram,.card.status{height:24.5rem}a{text-underline-offset:1px;text-decoration:underline;transition:all .2s}a:hover{text-underline-offset:3px}ol li{margin-bottom:1rem;line-height:1.6}.container{max-width:90vw;margin:0 auto;padding:0 20px 20px}.container>p{margin-bottom:1rem}.site-nav{border-bottom:1px solid;margin-bottom:20px;padding:1rem}.site-nav ul{gap:1.5rem;margin:0;padding:0;list-style:none;display:flex}.site-nav a{border-bottom:2px solid var(--color-transparent);padding-bottom:.25rem;text-decoration:none;display:inline-block}.site-nav a:hover{color:var(--color-text)}.site-nav a.active{color:var(--color-accent);border-bottom-color:var(--color-accent)}input,:scope button{outline:1px solid #0000;font-size:1rem;transition:all .2s}:scope button:focus-visible,input:focus-visible{border-color:var(--color-accent);outline-color:var(--color-accent);background-color:#fff}input{border:1px solid var(--color-border)}button{cursor:pointer;border:1px solid var(--color-text);background:var(--color-transparent);padding:.3rem .8rem;font-size:1rem;transform:translateY(0)}button:disabled{cursor:not-allowed}button:not(:disabled):hover{border-color:var(--color-accent);outline-color:var(--color-accent);background-color:#fff;transform:translateY(-1px)}button:not(:disabled):active{transform:translateY(1px)}.controls{flex-wrap:wrap;gap:1rem;display:flex}.controls.user .rotate-control{flex-direction:column;gap:.25rem;display:flex}.controls.user button{height:2rem}.list.users{padding:0}.list.users li{justify-content:space-around;align-items:center;display:flex}.list.users li span{width:50%}.list.users button{color:var(--color-accent);text-underline-offset:2px;border:none;padding-left:0;text-decoration:underline}.list.users button:not(:disabled):hover{text-underline-offset:4px;background:#fff;border-color:#0000;outline-color:#0000;transform:translateY(0)}.list.user-devices{padding:0}.list.user-devices>li{border-bottom:1px solid var(--color-border-subtle);align-items:center;gap:1rem;padding:.5rem 0;display:flex}.list.user-devices>li>button.person{text-align:left;border:1px dashed #000;flex-shrink:0;width:6rem;padding-left:.5rem;font-weight:700}.list.user-devices>li>button.person.selected{border-color:var(--color-accent);background-color:var(--color-surface-info);color:var(--color-accent);border-style:solid}.list.user-devices>li>button.person:hover,.list.user-devices>li>button.person:focus-visible{border-color:var(--color-accent);border-style:solid}.list.user-devices .devices{flex-wrap:wrap;gap:1rem;margin:0;padding:0;display:flex}.list.user-devices .devices li{align-items:center;gap:.25rem;display:flex}.list.user-devices .devices .client-id{color:var(--color-text-muted)}.list.user-devices .devices .in-group{background-color:var(--color-surface-success);color:var(--color-text-success);border-radius:.25rem;padding:0 .375rem}.list.user-devices .devices .rotate{background:var(--color-transparent);color:var(--color-accent);text-underline-offset:2px;border:none;padding:0;text-decoration:underline}.list.user-devices .devices .rotate:not(:disabled):hover,.list.user-devices .devices .rotate:not(:disabled):focus-visible{background:var(--color-transparent);text-underline-offset:4px;border-color:var(--color-transparent);transform:translateY(0)}.list.user-devices .devices .rotate:not(:disabled):hover:not(:focus-visible){outline-color:var(--color-transparent)}.list.user-devices .devices .rotate:disabled{color:var(--color-text-subtle);text-decoration:none}.devices-section{border-top:1px solid var(--color-border-subtle);margin-top:1rem}.devices-section h4{margin:.5rem 0 0}.devices-section .whose{color:var(--color-text-muted);margin:0}.devices-section .device-rows{margin:.5rem 0 0;padding:0;list-style:none}.devices-section .device-rows li{align-items:center;gap:.5rem;padding:.125rem 0;display:flex}.devices-section .device-rows .device{text-align:left;border-color:var(--color-transparent);align-items:center;gap:.5rem;width:100%;display:flex}.devices-section .device-rows .device.selected{border-color:var(--color-accent);background-color:var(--color-surface-info);color:var(--color-accent)}.devices-section .device-rows .membership{color:var(--color-text-muted)}.devices-section .device-rows .membership.in-group{background-color:var(--color-surface-success);color:var(--color-text-success);border-radius:.25rem;padding:0 .375rem}.devices-section .device-rows .storage.persisted{background-color:var(--color-surface-info);color:var(--color-accent);border-radius:.25rem;padding:0 .375rem}.card.group-ops h4{margin:.5rem 0}.card.messenger.multi-device .send-as.selected{border-color:var(--color-accent);background-color:var(--color-surface-info);color:var(--color-accent)}.card.messenger.multi-device .send-with{border-top:1px solid var(--color-border-subtle);margin-top:1rem;padding-top:1rem}.card.messenger.multi-device .send-with .prompt{color:var(--color-text-muted);margin:0 0 .5rem}.card.messenger.multi-device .send-with .send-with-device{align-items:center;gap:.5rem;display:flex}.card.message-history.multi-device .message-columns{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.card.message-history.multi-device .decrypt-with{flex-direction:column;gap:.5rem;display:flex}.card.message-history.multi-device .decrypt-with>label{color:var(--color-text-supporting);text-transform:uppercase;letter-spacing:.5px;font-size:1rem;font-weight:600}.card.message-history.multi-device .device-section{border-left:2px solid var(--color-border-soft);flex-direction:column;gap:4px;padding-left:.5rem;display:flex}.card.message-history.multi-device .device-section .device-heading{color:var(--color-text-supporting);text-transform:uppercase;letter-spacing:.5px;align-items:center;gap:.35rem;font-size:1rem;font-weight:600;display:flex}.card.message-history.multi-device .device-section .not-in-group{color:var(--color-text-muted);margin:0}.status-layout{gap:20px;width:100%;display:flex}.status-content,.kpinfo{flex:1;min-height:0;overflow-y:auto}.kpinfo{border-left:1px solid var(--color-border);padding-left:20px;font-size:.75rem}.kpinfo pre{white-space:pre-wrap;overflow-wrap:anywhere}.grid{grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;display:grid}h2,h3{margin-bottom:.5rem}p{text-wrap:pretty;margin-top:0;line-height:1.6}.card{border:1px solid var(--color-border);min-height:16.8rem;margin-bottom:20px;padding:15px}.card p{margin-top:0}.card h3{margin-top:0;margin-bottom:.5rem}.card.users h4{margin-top:1rem;margin-bottom:.5rem}.card.status{background:var(--color-surface-muted);flex-direction:column;display:flex;overflow:hidden}.card.status>.status-layout,.card.status>.detail{flex:1;min-height:0;overflow-y:auto}.card.status .member-count,.card.status .current-epoch,.card.status .epoch-secret .label{font-weight:700}.card.status .epoch-secret .value{word-break:break-all;font-family:monospace}.card.status .detail{border-top:1px solid var(--color-border-subtle);margin-top:.5rem;padding-top:.5rem}.card.status .detail .pubkey{word-break:break-all;font-family:monospace}.card.status .detail .root-note,.card.status .detail .node-json{margin-top:.5rem}.card.status .detail .node-json .node-json-label{margin-bottom:.25rem;font-weight:700}.card.status .detail .node-json pre{background:var(--color-surface-soft);border:1px solid var(--color-border);white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding:10px;font-size:1rem}.card.tree-diagram .tree-header,.card.device-info .tree-header{justify-content:space-between;align-items:start;gap:.5rem;display:flex}.card.device-info .who{align-items:center;gap:.5rem;display:flex}.card.device-info .who .owner{color:var(--color-text-muted)}.card.device-info .membership.in-group{background-color:var(--color-surface-success);width:fit-content;color:var(--color-text-success);border-radius:.25rem;padding:0 .375rem}.card.device-info .device-state{grid-template-columns:auto 1fr;gap:.25rem 1rem;margin:0;display:grid}.card.device-info .device-state dt{color:var(--color-text-muted)}.card.device-info .device-state dd{overflow-wrap:anywhere;margin:0}.card.device-info .device-actions{margin-top:1rem}.card.messenger{min-height:10rem}.card.groups{max-height:28rem;overflow-y:auto}.card.groups h4{margin:.5rem 0}.card.instructions{background:var(--color-surface-info);margin-top:30px}.tree-scroll{margin-top:20px}.tree-scroll .card.tree-diagram{height:auto}.tree-scroll .tree-svg-scroll{overflow-x:auto}.tree-scroll .tree-svg{max-width:none;max-height:none;margin:0}.status-row .tree-scroll{min-width:0;margin-top:0}.status-row .tree-scroll .card.tree-diagram{flex-direction:column;height:24.5rem;display:flex}.status-row .tree-scroll .tree-svg-scroll{flex:1;min-height:0;overflow:auto}.status-row .card.device-info{height:24.5rem;overflow-y:auto}.tree-svg{max-width:100%;max-height:320px;margin:0 auto;display:block}.tree-svg .tree-edge{stroke:var(--color-border);stroke-width:2px}.tree-svg .tree-edge.on-path{stroke:var(--color-accent)}.tree-svg .tree-node circle{stroke-width:1.5px}.tree-svg .tree-node.leaf circle{fill:var(--color-success);stroke:var(--color-text)}.tree-svg .tree-node.parent circle{fill:var(--color-surface-muted);stroke:var(--color-text)}.tree-svg .tree-node.blank circle{fill:var(--color-transparent);stroke:var(--color-border-soft);stroke-dasharray:3 3}.tree-svg .tree-node.on-path circle:not(.hit){stroke:var(--color-accent)}.tree-svg .tree-node text{fill:var(--color-text);pointer-events:none;font-size:1rem}.tree-svg .tree-node.selectable{cursor:pointer}.tree-svg .tree-node.hide-label .leaf-label{visibility:hidden}.tree-svg .tree-node.hide-label:hover .leaf-label,.tree-svg .tree-node.hide-label:focus .leaf-label,.tree-svg .tree-node.hide-label:focus-visible .leaf-label{visibility:visible;paint-order:stroke;stroke:var(--color-surface);stroke-width:5px;stroke-linejoin:round}.tree-svg .tree-node circle.hit{fill:var(--color-transparent);stroke:none}.tree-svg .tree-node.selected circle:not(.hit){stroke:var(--color-accent);stroke-width:3px}.tree-svg .tree-node.selectable:focus{outline:none}.tree-svg .tree-node.selectable:focus-visible circle:not(.hit){stroke:var(--color-accent);stroke-width:3px}.flex{gap:10px;margin:4px 0 10px;display:flex}.flex input{flex:1;padding:8px}.message-history{min-height:auto}.message-columns{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:15px;display:grid}.message-column{flex-direction:column;min-height:200px;display:flex}.column-header{border-bottom:2px solid var(--color-accent);text-align:center;margin:0 0 15px;padding-bottom:10px;font-size:1.1rem;font-weight:600}.message-boxes{flex-direction:column;gap:12px;max-height:500px;padding-right:8px;display:flex;overflow-y:auto}.message-box{background:var(--color-surface-soft);border:1px solid var(--color-border-soft);flex-direction:column;gap:10px;padding:12px;transition:box-shadow .2s,transform .2s;display:flex}.message-box:hover{box-shadow:0 2px 8px var(--color-shadow)}.message-header{border-bottom:1px solid var(--color-border-subtle);flex-wrap:wrap;align-items:center;padding-bottom:8px;display:flex}.message-header .from-machine{color:var(--color-text);flex-basis:100%}.message-header strong{color:var(--color-accent);margin-right:1rem;font-size:.95rem}.message-header small{color:var(--color-text-muted);font-size:.8rem}.message-header .timestamp{color:var(--color-text-subtle);margin-left:auto;font-size:.75rem}.ciphertext-section,.decrypted-section{flex-direction:column;gap:4px;display:flex}:is(.ciphertext-section,.decrypted-section) label{color:var(--color-text-supporting);text-transform:uppercase;letter-spacing:.5px;font-size:.8rem;font-weight:600}.ciphertext{background:var(--color-surface-muted);word-break:break-all;color:var(--color-text);border:1px solid var(--color-border-soft);padding:6px 8px;font-family:Courier New,monospace;font-size:.75rem}.decrypted-text{background:var(--color-surface-success);border-left:3px solid var(--color-success);color:var(--color-text-success);padding:8px 10px;font-size:.9rem;font-weight:500}.decrypt-btn{background:var(--color-accent);color:var(--color-on-accent);cursor:pointer;border:none;margin-top:4px;padding:8px 16px;font-weight:500;transition:background .2s,transform .1s}.decrypt-btn:hover:not(:disabled){background:var(--color-accent-hover);transform:translateY(-1px)}.decrypt-btn:active:not(:disabled){transform:translateY(0)}.decrypt-btn:disabled{background:var(--color-border);cursor:not-allowed;opacity:.6}.message-boxes::-webkit-scrollbar{width:6px}.card.groups::-webkit-scrollbar{width:6px}.status-content::-webkit-scrollbar{width:6px}.card.status>.status-layout::-webkit-scrollbar{width:6px}.card.status>.detail::-webkit-scrollbar{width:6px}.message-boxes::-webkit-scrollbar-track{background:var(--color-surface-soft)}.card.groups::-webkit-scrollbar-track{background:var(--color-surface-soft)}.status-content::-webkit-scrollbar-track{background:var(--color-surface-soft)}.card.status>.status-layout::-webkit-scrollbar-track{background:var(--color-surface-soft)}.card.status>.detail::-webkit-scrollbar-track{background:var(--color-surface-soft)}.message-boxes::-webkit-scrollbar-thumb{background:var(--color-text-subtle)}.card.groups::-webkit-scrollbar-thumb{background:var(--color-text-subtle)}.status-content::-webkit-scrollbar-thumb{background:var(--color-text-subtle)}.card.status>.status-layout::-webkit-scrollbar-thumb{background:var(--color-text-subtle)}.card.status>.detail::-webkit-scrollbar-thumb{background:var(--color-text-subtle)}.message-boxes::-webkit-scrollbar-thumb:hover{background:var(--color-text-supporting)}.card.groups::-webkit-scrollbar-thumb:hover{background:var(--color-text-supporting)}.status-content::-webkit-scrollbar-thumb:hover{background:var(--color-text-supporting)}.card.status>.status-layout::-webkit-scrollbar-thumb:hover{background:var(--color-text-supporting)}.card.status>.detail::-webkit-scrollbar-thumb:hover{background:var(--color-text-supporting)}@media (max-width:48rem){.grid,.message-columns{grid-template-columns:1fr}.card.status,.card.tree-diagram,.status-row .tree-scroll .card.tree-diagram,.status-row .card.device-info{height:auto}.card.groups{max-height:none;overflow-y:visible}.card.status>.status-layout,.card.status>.detail,.status-content,.kpinfo{overflow-y:visible}.status-layout{flex-direction:column}.kpinfo{border-left:none;border-top:1px solid var(--color-border);padding-top:20px;padding-left:0}}