*,: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}}@keyframes spinner{to{transform:rotate(360deg)}}substrate-button button,substrate-button a.btn{color:#000;cursor:pointer;background:0 0;border:1px solid;outline:1px solid #0000;padding:.5rem 2rem;font-size:1rem;text-decoration:none;transition:all .2s;transform:translateY(0)}:is(substrate-button button,substrate-button a.btn):not(:disabled):focus,:is(substrate-button button,substrate-button a.btn):not(:disabled):hover,:is(substrate-button button,substrate-button a.btn):not(:disabled):focus-visible{outline:1px solid;transform:translateY(-1px)}:is(substrate-button button,substrate-button a.btn):not(:disabled):active{transform:translateY(1px)}:is(substrate-button button,substrate-button a.btn):disabled{cursor:not-allowed;opacity:.4}:is(substrate-button button,substrate-button a.btn).spinning{opacity:.4}:is(substrate-button button,substrate-button a.btn).spinning .btn-content{visibility:hidden}:is(substrate-button button,substrate-button a.btn).spinning:hover{cursor:initial}:is(substrate-button button,substrate-button a.btn).spinning:after{content:"";box-sizing:border-box;background:0 0;border-top:2px solid #000;border-right:2px solid #0000;border-radius:50%;width:16px;height:16px;margin:auto;animation:.6s linear infinite spinner;position:absolute;inset:0}:root{--primary-accent:black}check-box:not(:defined){visibility:hidden}check-box{display:block}check-box label.checkbox-label{cursor:pointer;grid-template-columns:1rem auto;align-items:center;gap:1em;width:fit-content;display:flex}:is(check-box label.checkbox-label) input{border-radius:0}:is(check-box label.checkbox-label) span{margin-bottom:.2em;font-size:1.2rem}check-box input[type=checkbox]{appearance:none;font:inherit;color:currentColor;cursor:pointer;outline-offset:2px;background-color:#fff;border:2px solid;outline:2px solid #0000;width:1.15em;height:1.15em;margin:0;transition:all .2s;position:relative;transform:translateY(-.075em)}:is(check-box input[type=checkbox]):before{content:"";background:var(--primary-accent);transform-origin:50%;width:18%;height:100%;transition:transform .15s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(45deg)scale(0)}:is(check-box input[type=checkbox]):after{content:"";background:var(--primary-accent);transform-origin:50%;width:18%;height:100%;transition:transform .15s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-45deg)scale(0)}:is(check-box input[type=checkbox]):checked:before{transform:translate(-50%,-50%)rotate(45deg)scale(1)}:is(check-box input[type=checkbox]):checked:after{transform:translate(-50%,-50%)rotate(-45deg)scale(1)}:is(check-box input[type=checkbox]):focus:not(:focus-visible){border-color:currentColor;outline-color:#0000}:is(check-box input[type=checkbox]):focus,:is(check-box input[type=checkbox]):focus-visible{outline-offset:2px;outline:2px solid}substrate-input{display:block}substrate-input .substrate.input{flex-wrap:wrap;align-items:center;min-width:100%;display:flex}substrate-input .substrate.input .label-content{width:100%}substrate-input .substrate.input input{border:1px solid;border-radius:0;outline:1px solid #0000;width:100%;padding:1rem 1rem .8rem;transition:all .2s}substrate-input .substrate.input input:focus{outline:1px solid}substrate-input:not(:defined){visibility:hidden}:root{--color-paper:#f8fafd;--color-surface:#eff3f7;--color-sunken:#e5eaf0;--color-rule:#d4dae1;--color-rule-strong:#a9b2be;--color-ink:black;--color-ink-muted:#4c5866;--color-accent:#008aff;--color-accent-ink:#0668c1;--color-accent-deep:#0255a0;--color-accent-wash:#e7f1fe;--color-live:#1c7d43;--color-live-wash:#e2f6e6;--color-flag:#b13e06;--color-flag-wash:#feefe3;--color-on-accent:#fbfcfd;--font-display:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;--font-body:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;--font-mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;--leading-tight:1.15;--leading-snug:1.35;--leading-body:1.6;--leading-loose:1.68;--tracking-label:.09em;--tracking-tight:-.015em;--measure:40rem;--seq:3.5rem;--radius:0;--hairline:1px;--ease:cubic-bezier(.22, .61, .36, 1);--duration:90ms}@supports (color:lab(0% 0 0)){:root{--color-paper:lab(98.2537% -.364989 -1.46048);--color-surface:lab(95.5806% -.632167 -2.55203);--color-sunken:lab(92.445% -.8066 -3.27765);--color-rule:lab(86.6393% -1.06159 -4.36255);--color-rule-strong:lab(72.1215% -1.69331 -7.23141);--color-ink-muted:lab(36.71% -2.06792 -9.99128);--color-accent-ink:lab(43.183% 2.0045 -54.5252);--color-accent-deep:lab(35.195% 1.93642 -47.6967);--color-accent-wash:lab(94.7432% -1.72544 -7.24767);--color-live:lab(45.9064% -38.8081 23.3195);--color-live-wash:lab(95.1836% -9.04882 5.30344);--color-flag:lab(43.0096% 46.2901 52.8604);--color-flag-wash:lab(95.3164% 3.77354 7.36711);--color-on-accent:lab(98.8369% -.183672 -.730968)}}html{-webkit-text-size-adjust:100%}body{background-color:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:1.125rem;line-height:var(--leading-body);margin:0;padding:0}.page{grid-template-columns:26rem minmax(0,1fr);column-gap:0;max-width:90vw;margin:0 auto;padding:0 2rem 6rem}.block,.instructions{max-width:var(--measure);margin:2rem 0;padding-top:1.5rem}:is(.block,.instructions):first-child{border-top:0;margin-top:0;padding-top:0}:is(.block,.instructions)>h2,:is(.block,.instructions)>h3{font-family:var(--font-display);-webkit-hyphens:none;hyphens:none;letter-spacing:var(--tracking-label);font-size:1rem;font-weight:700;line-height:var(--leading-snug);overflow-wrap:normal;text-transform:uppercase;margin:0 0 .5rem}:is(.block,.instructions) h2{border-bottom:2px solid}.block.chat{background-color:#fff}h1{font-family:var(--font-display);letter-spacing:var(--tracking-tight);font-size:2rem;font-weight:700;line-height:var(--leading-tight);text-wrap:balance;margin:0 0 1.5rem}p,li{line-height:var(--leading-body)}p{max-width:68ch;margin:0 0 1rem}a{color:var(--color-accent-ink);overflow-wrap:anywhere;text-underline-offset:.15em;text-decoration-thickness:from-font}a:hover{text-decoration-thickness:2px}code{background-color:var(--color-sunken);white-space:nowrap;font-family:var(--font-mono);-webkit-hyphens:none;hyphens:none;padding:0 .2em;font-size:1rem}.epoch,.live li,.own-identity,.own-leaf,.seq,.seq-pending,.presence,.status,substrate-input.room-url input{font-family:var(--font-mono);font-variant-numeric:tabular-nums;-webkit-hyphens:none;hyphens:none;font-size:1rem}.masthead{border-bottom:2px solid var(--color-ink);flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1.5rem;margin-bottom:1rem;padding:2rem 0 .5rem;display:flex}.masthead .wordmark{font-family:var(--font-display);letter-spacing:var(--tracking-label);text-transform:uppercase;margin:0;font-size:1.375rem;font-weight:700}.masthead .wordmark a{color:var(--color-ink);text-decoration:none}.masthead .masthead-sub{color:var(--color-ink-muted);font-family:var(--font-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;margin:0;font-size:1rem}.status{color:var(--color-ink-muted);min-height:1.5rem;margin-top:1.5rem}.gone-disclosure{border-bottom:var(--hairline) solid var(--color-ink);border-top:var(--hairline) solid var(--color-ink);font-size:1.375rem;line-height:var(--leading-snug);margin-bottom:1.5rem;padding:1.5rem 0}.presence-disclosure,.removal-disclosure,.identity-disclosure,.name-disclosure,.persist-disclosure,.history-disclosure,.reset-disclosure,.waiting .disclosure{line-height:var(--leading-loose);padding-top:1rem}.room-link,.copy-value{flex-wrap:wrap;align-items:flex-end;gap:.5rem;margin:0 0 1.5rem;display:flex}:is(.room-link,.copy-value) substrate-input.room-url{flex:20rem;min-width:0}:is(.room-link,.copy-value) .copy-control{flex-direction:column;gap:.25rem;display:flex}:is(.room-link,.copy-value) .copied{color:var(--color-live);font-family:var(--font-display);letter-spacing:var(--tracking-label);text-transform:uppercase;opacity:0;font-size:1rem;font-weight:600;transition:opacity .2s}:is(.room-link,.copy-value) .copied[data-copied=true]{opacity:1}:is(.room-link,.copy-value) .copy-status{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.setup .setup-form{flex-wrap:wrap;align-items:flex-end;gap:.5rem;display:flex}.setup .setup-form substrate-input{flex:16rem;min-width:0}.room{display:contents}.masthead{grid-area:1/1/auto/-1}.room>h1{grid-area:2/1/auto/-1}.setup,.waiting,.gone,.removed,.room-meta{grid-area:3/1}.persistence{grid-area:4/1}.room-log{border-top:var(--hairline) solid var(--color-rule);grid-area:3/2;height:min(75svh,36rem);margin-top:2rem;padding-top:1.5rem}.explainer{grid-area:3/2/span 2}@media (min-width:60rem){.page:not(:has(.room)){max-width:calc(26rem + 2rem + var(--measure) + 2rem * 2);display:grid}.page:not(:has(.room)) .setup{padding-right:2rem}.page:not(:has(.room)) .waiting{padding-right:2rem}.page:not(:has(.room)) .gone{padding-right:2rem}.page:not(:has(.room)) .removed{padding-right:2rem}.page:not(:has(.room)) .persistence{padding-right:2rem}.page:not(:has(.room)) .explainer{border-left:var(--hairline) solid var(--color-rule);border-top:0;margin-top:0;padding:0 0 0 2rem}}@media (min-width:70rem){.page:has(.room){grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid}.page:has(.room) .room-meta{padding-right:2rem}.page:has(.room) .persistence{padding-right:2rem}.page:has(.room) .explainer{padding-right:2rem}.page:has(.room) .room-meta{padding-top:0}.page:has(.room) .room-log{--log-top:9rem;border-left:var(--hairline) solid var(--color-rule);height:calc(100svh - var(--log-top));top:var(--log-top);grid-row:3/6;align-self:start;margin-top:0;padding:1.5rem 0 1.5rem 2rem;position:sticky}.page:has(.room) .explainer{border-left:0;grid-area:5/1;padding-left:0}}.readout dt,.you-identity dt{color:var(--color-ink-muted);font-family:var(--font-display);letter-spacing:var(--tracking-label);text-transform:uppercase;font-size:1rem;font-weight:700}.readout{border-bottom:var(--hairline) solid var(--color-rule);border-top:var(--hairline) solid var(--color-rule);flex-wrap:wrap;margin:0 0 1.5rem;display:flex}.readout .readout-item{flex:0 auto;padding:.5rem 1rem}.readout .readout-item:first-child{padding-left:0}.readout .readout-item+.readout-item{border-left:var(--hairline) solid var(--color-rule)}.readout dd{margin:0}.readout .connection{color:var(--color-ink-muted)}.readout .connection[data-status=open]{color:var(--color-live)}.room .block:has(>.pending:empty){display:none}.pending{margin:0;padding:0;list-style:none}.pending .request{border:var(--hairline) solid var(--color-rule-strong);margin-bottom:1rem;padding:1rem}.pending .request .requester-name{font-family:var(--font-display);letter-spacing:var(--tracking-tight);font-size:1.375rem;font-weight:700;line-height:var(--leading-snug);overflow-wrap:anywhere;display:block}.pending .request .standing{color:var(--color-ink-muted);font-family:var(--font-display);letter-spacing:var(--tracking-label);text-transform:uppercase;margin-bottom:1rem;font-size:1rem;display:block}.pending .request substrate-button{margin-right:.5rem}.pending .standing-warning,.pending .mismatch-warning{background-color:var(--color-flag-wash);border:var(--hairline) solid var(--color-flag);color:var(--color-ink);margin:0 0 1rem;padding:.5rem .75rem}.pending .request:has(.mismatch-warning){border-color:var(--color-flag)}.members{margin:0;padding:0;list-style:none}.members .member{border-bottom:var(--hairline) solid var(--color-rule);grid-template-columns:var(--seq) minmax(0, 1fr) auto auto;align-items:center;column-gap:1rem;padding:.5rem 0;display:grid}.members .member:before{border:var(--hairline) solid var(--color-ink-muted);content:"";border-radius:50%;grid-column:1;justify-self:end;width:.65rem;height:.65rem}.members .member[data-connected=true]:before{background-color:var(--color-live);border-color:var(--color-live)}.members .member .member-name{font-family:var(--font-display);overflow-wrap:anywhere;grid-column:2;font-weight:700}.members .member .presence{color:var(--color-ink-muted);letter-spacing:var(--tracking-label);text-transform:uppercase;grid-column:3}.members .member[data-connected=true] .presence{color:var(--color-live)}.members .member .remove{grid-column:4}.room-log{flex-direction:column;min-height:0;display:flex}.room-log>.chat{flex-direction:column;flex:1;min-height:0;display:flex}.log-scroll{overscroll-behavior:contain;scroll-behavior:auto;scrollbar-gutter:stable;flex-direction:column;flex:1;min-height:0;display:flex;position:relative;overflow-y:auto}.log-scroll:focus-visible{outline:2px solid var(--color-accent-ink);outline-offset:-2px}.log-empty{color:var(--color-ink-muted);text-align:center;margin:auto 0}.log-edge{z-index:1;flex:none;height:0;position:sticky}.log-edge:before{background-color:var(--color-rule-strong);content:"";opacity:0;height:1px;transition:opacity var(--duration) var(--ease);position:absolute;left:0;right:0}.log-edge[data-edge=top],.log-edge[data-edge=top]:before{top:0}.log-edge[data-edge=bottom],.log-edge[data-edge=bottom]:before{bottom:0}.log-scroll[data-above=true] .log-edge[data-edge=top]:before,.log-scroll[data-below=true] .log-edge[data-edge=bottom]:before{opacity:1}.jump-newest{background-color:var(--color-paper);border:var(--hairline) solid var(--color-ink);color:var(--color-ink);cursor:pointer;font-family:var(--font-display);letter-spacing:var(--tracking-label);opacity:0;text-transform:uppercase;transition:opacity var(--duration) var(--ease), visibility var(--duration) var(--ease);visibility:hidden;white-space:nowrap;padding:.35rem .9rem;font-size:1rem;font-weight:700;position:absolute;bottom:.75rem;left:50%;translate:-50%}.jump-newest:hover{background-color:var(--color-accent-wash)}.jump-newest:focus-visible{outline:2px solid var(--color-accent-ink);outline-offset:2px}.log-scroll[data-below=true] .jump-newest{opacity:1;visibility:visible}.timeline{margin:auto 0 0;padding:0;list-style:none}.timeline .message,.timeline .outbound-message,.timeline .placeholder{border-bottom:var(--hairline) solid var(--color-rule);grid-template-columns:var(--seq) minmax(0, 1fr);column-gap:1rem;padding:.5rem 0;display:grid}.timeline .seq,.timeline .seq-pending{color:var(--color-ink-muted);text-align:right;grid-area:1/1}.timeline .message-from{font-family:var(--font-display);letter-spacing:var(--tracking-label);overflow-wrap:anywhere;text-transform:uppercase;grid-column:2;font-size:1rem;font-weight:700}.timeline .message-text{overflow-wrap:anywhere;grid-column:2}.timeline .message[data-own=true],.timeline .outbound-message{position:relative}.timeline .message[data-own=true]{background-color:var(--color-accent-wash)}.timeline .outbound-message{color:var(--color-ink-muted)}.timeline .placeholder{background-color:var(--color-surface);align-items:center}.timeline .placeholder:before{background-image:repeating-linear-gradient(135deg, var(--color-rule-strong) 0 1px, transparent 1px 6px);content:"";grid-column:1;align-self:stretch;min-height:1.4rem}.timeline .placeholder .gap-text{color:var(--color-ink-muted);grid-column:2}.composer{border-top:var(--hairline) solid var(--color-rule-strong);flex-wrap:wrap;align-items:flex-end;gap:.5rem;margin:0;padding-top:1rem;display:flex}.composer substrate-input.draft{flex:12rem;min-width:0}.composer .label-content{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}ul.live{border-top:var(--hairline) solid var(--color-rule);margin:0;padding:0}ul.live li{border-bottom:var(--hairline) solid var(--color-rule);overflow-wrap:anywhere;padding:.25rem 0}:is(.removed,.gone) p{color:var(--color-ink-muted)}:is(.removed,.gone) .gone-disclosure,:is(.removed,.gone) .status{color:var(--color-ink)}.waiting .chosen-name{font-family:var(--font-display);font-weight:700}.persistence,.explainer{padding-top:1.5rem}.persistence check-box.persist-toggle{margin-bottom:1.5rem}.persistence .reset{margin-top:1rem}.storage-persistence{border-top:var(--hairline) solid var(--color-rule);margin-top:1.5rem;padding-top:1rem}.storage-persistence .persist-result-slot{display:grid}.storage-persistence .persist-result-slot>*{grid-area:1/1}.storage-persistence .persist-sizer{visibility:hidden;margin:.5rem 0 0}.storage-persistence .persist-result{margin:.5rem 0 0}.storage-persistence .persist-result.granted{color:var(--color-live)}.storage-persistence .persist-result.denied{color:var(--color-flag)}.explainer .expiry{border-top:var(--hairline) solid var(--color-rule);max-width:var(--measure);margin-top:1.5rem;padding-top:1rem}.instructions ol{counter-reset:step;margin:0;padding:0;list-style:none}.instructions li{counter-increment:step;padding:.75rem 0 .75rem calc(var(--seq) + 1rem);position:relative}.instructions li:before{color:var(--color-ink-muted);content:counter(step, decimal-leading-zero);font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;width:var(--seq);font-size:1rem;position:absolute;left:0}.instructions li strong{font-family:var(--font-display);font-weight:700}.instructions li+li{border-top:var(--hairline) solid var(--color-rule)}.you .you-identity{margin:0 0 1rem}.you .you-identity .you-item+.you-item{margin-top:1rem}.you .you-identity dd{margin:.25rem 0 0}.you .own-name{font-family:var(--font-display);font-weight:700}.you .own-identity{overflow-wrap:anywhere}.you .copy-value{margin:.5rem 0 0}.you .own-role{color:var(--color-ink-muted);letter-spacing:var(--tracking-label);text-transform:uppercase}.own-mark{color:var(--color-ink-muted);font-family:var(--font-display);letter-spacing:var(--tracking-label);text-transform:uppercase;margin-left:.5rem;font-size:1rem;font-weight:400}@media (max-width:52rem){:root{--seq:2.5rem}.page{padding-left:1rem;padding-right:1rem}.members .member{grid-template-columns:var(--seq) minmax(0, 1fr) auto;row-gap:.5rem}.members .member .remove{grid-column:2/-1;justify-self:start}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}