:root{--bg:#000;--received:#26262a;--sent:#0a84ff;--muted:#8e8e93;--alice:linear-gradient(180deg, #ff9fb0, #ff5f7e);--bob:linear-gradient(180deg, #7ee08f, #34c759)}*{box-sizing:border-box}html,body,#root{height:100%}body{color:#fff;-webkit-font-smoothing:antialiased;background:radial-gradient(1200px 600px at 50% -10%,#1d2230,#0a0b0f);margin:0;font-family:-apple-system,SF Pro Text,Helvetica Neue,system-ui,sans-serif}.stage{justify-content:center;align-items:center;gap:28px;height:100%;padding:16px;display:flex}.phone{background:var(--bg);border:10px solid #1c1c1e;border-radius:54px;flex-direction:column;width:390px;height:min(844px,100vh - 32px);display:flex;position:relative;overflow:hidden;box-shadow:0 0 0 2px #3a3a3c,0 40px 80px #0009}.island{z-index:5;background:#000;border-radius:20px;width:112px;height:32px;margin-left:-56px;position:absolute;top:10px;left:50%}.statusbar{justify-content:space-between;align-items:center;height:52px;padding:16px 30px 0;font-size:15px;font-weight:600;display:flex}.signal{align-items:flex-end;gap:3px;display:inline-flex}.signal b{background:#fff;border-radius:1px;width:4px;height:6px}.signal b:nth-child(2){height:9px}.signal b:nth-child(3){height:12px}.nav{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#1c1c1ed9;border-bottom:.5px solid #38383a;grid-template-columns:84px 1fr 84px;align-items:center;padding:6px 12px 8px;display:grid}.link{color:var(--sent);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;padding:6px 4px;font-size:16px}.title{flex-direction:column;align-items:center;gap:1px;line-height:1.15;display:flex}.title strong{margin-top:4px;font-size:13px;font-weight:600}.title small{color:var(--muted);font-size:11px}.faces{display:flex}.faces .avatar{border:2px solid #1c1c1e;width:38px;height:38px;font-size:16px}.faces .avatar+.avatar{margin-left:-10px}.turns{justify-self:end}.turns select{appearance:none;color:var(--sent);font:inherit;cursor:pointer;background:#2c2c2e;border:0;border-radius:14px;padding:6px 10px;font-size:13px}.avatar{color:#fff;border-radius:50%;flex:none;place-items:center;width:28px;height:28px;font-size:12px;font-weight:600;display:inline-grid}.avatar.alice{background:var(--alice)}.avatar.bob{background:var(--bob)}.avatar.ghost{background:0 0}.thread{scrollbar-width:none;flex:1;padding:10px 12px 6px;overflow-y:auto}.thread::-webkit-scrollbar{display:none}.empty{color:var(--muted);text-align:center;margin:40% 24px 0;font-size:14px}.stamp{text-align:center;color:var(--muted);margin:12px 0 6px;font-size:11px;font-weight:500}.topic{text-align:center;color:var(--muted);margin:6px 24px 10px;font-size:12px}.topic span{color:#aeaeb2;background:#1c1c1e;border-radius:10px;margin-right:4px;padding:2px 8px}.row{align-items:flex-end;gap:6px;margin-top:2px;display:flex}.row.bob{flex-direction:row-reverse}.bubble{white-space:pre-wrap;overflow-wrap:anywhere;border-radius:18px;max-width:72%;padding:8px 13px;font-size:16px;line-height:1.28;position:relative}.bubble.alice{background:var(--received)}.bubble.bob{background:var(--sent)}.bubble.alice.tail{border-bottom-left-radius:5px}.bubble.bob.tail{border-bottom-right-radius:5px}.thread .row{margin-bottom:1px}.row:has(.tail){margin-bottom:8px}.typing{gap:4px;padding:13px 14px;display:inline-flex}.typing i{background:#8e8e93;border-radius:50%;width:7px;height:7px;animation:1.2s ease-in-out infinite bounce}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}.bubble.bob.typing i{background:#ffffffbf}@keyframes bounce{0%,60%,to{opacity:.5;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}.lock{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;padding:0 40px 60px;display:flex}.lock strong{margin-top:8px;font-size:18px}.lock small{color:var(--muted);margin-bottom:8px;font-size:13px}.lock .faces .avatar{border-width:3px;width:64px;height:64px;font-size:26px}.lock .faces .avatar+.avatar{margin-left:-16px}.lock input{color:#fff;width:100%;font:inherit;text-align:center;background:#000;border:1px solid #3a3a3c;border-radius:20px;outline:none;padding:10px 16px;font-size:16px}.lock input:focus{border-color:#5a5a5e}.lock button{background:var(--sent);color:#fff;width:100%;font:inherit;cursor:pointer;border:0;border-radius:20px;padding:10px;font-weight:600}.lock button:disabled{color:#636366;cursor:default;background:#2c2c2e}.error{color:#ff453a;text-align:center;margin:0;padding:6px 16px;font-size:12px}.composer{align-items:center;gap:8px;padding:8px 12px 6px;display:flex}.composer input{color:#fff;font:inherit;background:#000;border:1px solid #3a3a3c;border-radius:20px;outline:none;flex:1;padding:8px 14px;font-size:16px}.composer input:focus{border-color:#5a5a5e}.composer input::placeholder{color:#6e6e73}.composer button{background:var(--sent);color:#fff;cursor:pointer;border:0;border-radius:50%;flex:none;place-items:center;width:32px;height:32px;display:grid}.composer button:disabled{color:#636366;cursor:default;background:#2c2c2e}.homebar{opacity:.9;background:#fff;border-radius:3px;width:134px;height:5px;margin:8px auto}@media (width<=440px){.stage{padding:0}.phone{width:100%;height:100vh;box-shadow:none;border:0;border-radius:0}.island,.statusbar{display:none}}.browser{background:#1c1c1e;border:1px solid #3a3a3c;border-radius:16px;flex-direction:column;width:min(780px,100vw - 480px);height:min(844px,100vh - 32px);display:flex;overflow:hidden;box-shadow:0 40px 80px #00000080}.chrome{background:#2c2c2e;border-bottom:1px solid #3a3a3c;align-items:center;gap:12px;padding:10px 14px;display:flex}.lights{flex:none;gap:6px;display:inline-flex}.lights i{background:#ff5f57;border-radius:50%;width:11px;height:11px}.lights i:nth-child(2){background:#febc2e}.lights i:nth-child(3){background:#28c840}.tabstrip{flex:1;gap:6px;min-width:0;display:flex;overflow:hidden}.tab{color:#d1d1d6;font:inherit;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;background:#3a3a3c;border:0;border-radius:8px;max-width:200px;padding:5px 12px;font-size:12px;overflow:hidden}.tab.active{color:#fff;background:#0a84ff}.tab.idle{cursor:default;color:#8e8e93;background:0 0;padding-left:0}.open{color:#0a84ff;flex:none;font-size:12px;text-decoration:none}.viewport{background:#fff;flex:1;min-height:0}.viewport iframe{border:0;width:100%;height:100%;display:block}.blank{color:#8e8e93;text-align:center;background:#0f1115;flex-direction:column;justify-content:center;align-items:center;gap:6px;height:100%;padding:0 32px;font-size:13px;display:flex}.blank strong{color:#d1d1d6;font-size:15px}@media (width<=1180px){.browser{display:none}}