:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}@media(max-width:768px){html{font-size:18px}button{min-height:44px;padding:.65em 1em;font-size:1.05rem}}#root{min-height:100vh;display:flex;flex-direction:column}.home{margin:auto;padding:2rem;text-align:center;max-width:520px}.home h1{margin-bottom:.5rem}.tagline{color:var(--color-text-muted, #888);margin-bottom:2rem}.home-sentence{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.25em .35em;margin:0;font-size:1rem}.home-inline-form{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.35em;margin:0}.home-input{padding:.4em .65em;font-size:1em;border-radius:6px;border:1px solid #444;min-width:160px;background:var(--editor-bg, #fff);color:inherit}.home-btn{display:inline-block;padding:.4em .75em;font-size:1em;border-radius:6px;border:none;cursor:pointer;text-decoration:none;font-family:inherit;line-height:1.3}.home-btn--primary{background:#111;color:#fff}.home-btn--primary:hover{background:#333}.home-btn:focus,.home-btn:focus-visible{outline:1px dotted currentColor;outline-offset:2px}.hint{margin-top:2rem;font-size:.9em;color:var(--color-text-muted, #888)}.home-about{margin-top:2.5rem;text-align:left;font-size:.9rem;color:var(--color-text-muted, #888)}.home-about-section{margin-bottom:1rem}.home-about-section h3{margin:0 0 .4rem;font-size:.95em;font-weight:600;color:var(--color-text-muted, #9ca3af)}.home-about-section ol,.home-about-section ul{margin:0;padding-left:1.25rem}.home-about-section li{margin-bottom:.3rem}.home-about-section li:last-child{margin-bottom:0}.room{display:flex;flex-direction:column;flex:1;min-height:0}.room-header{flex:0 0 auto;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.35rem .5rem;padding:.4rem .75rem;background:var(--header-bg, #1a1a1a);border-bottom:1px solid #333;font-size:.875rem;font-family:inherit;position:relative;color:#e5e5e5}.room-header .status[data-status=connected],.room-header .status-server[data-status=connected]{color:#4ade80}.room-header .status[data-status=connecting],.room-header .status[data-status=reconnecting],.room-header .status-server[data-status=connecting],.room-header .status-server[data-status=reconnecting]{color:#fbbf24}.room-header .status[data-status=disconnected],.room-header .status-server[data-status=disconnected]{color:#f87171}.room-header .status-sync{font-size:1em;padding:0;white-space:nowrap;background:none;border:none}.room-header .status-sync--not-ready{color:var(--color-text-muted, #9ca3af)}.room-header .status-sync--partial{color:#fbbf24}.room-header .status-sync--ready,.room-header .status-sync--syncing{color:#4ade80}.room-id{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-size:1em}.room-header button,.room-header .room-header-link{padding:.35em .5em;font-size:1em;font-family:inherit;background:none;border:none;color:inherit;opacity:1;border-radius:0;text-decoration:none;cursor:pointer}.room-header button:hover:not(:disabled),.room-header .room-header-link:hover{text-decoration:underline}.room-header button:focus,.room-header button:focus-visible,.room-header .room-header-link:focus,.room-header .room-header-link:focus-visible{outline:1px dotted currentColor;outline-offset:2px}.room-header-status-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-width:0;flex:1}.room-header-status-row .room-id{flex-shrink:1;min-width:0;max-width:200px}.room-header-status-right{display:flex;align-items:center;gap:.35rem;flex-shrink:0}.room-header-status-right .room-detail-wrap{margin-left:0}.room-header-row1{display:flex;align-items:center;gap:clamp(.25rem,2vw,.5rem);min-height:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.room-header-row2{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:.5rem;min-height:0;flex-shrink:0}.room-detail-wrap{position:relative;margin-left:auto}.room-detail-trigger{padding:.2em .4em;font-size:1em;font-family:inherit;background:none;border:none;color:inherit;cursor:pointer}.room-detail-trigger:hover{text-decoration:underline}.room-detail-popover{position:absolute;top:100%;right:0;margin-top:.25rem;padding:.5rem .6rem;min-width:180px;background:var(--header-bg, #1a1a1a);border:1px solid #444;border-radius:6px;font-size:.8rem;z-index:10;box-shadow:0 4px 12px #0000004d;display:flex;flex-direction:column;gap:.35rem}.room-detail-popover--portal{z-index:1000;margin-top:0}.room-detail-row{white-space:nowrap}.room-detail-server.status-server[data-status=connected]{color:#4ade80}.room-detail-server.status-server[data-status=connecting],.room-detail-server.status-server[data-status=reconnecting]{color:#fbbf24}.room-detail-server.status-server[data-status=disconnected]{color:#f87171}.room-detail-node.node-pill--connected{color:#4ade80}.room-detail-node.node-pill--connecting{color:#fbbf24}.room-detail-node.node-pill--failed{color:#9ca3af}.room-detail-node.node-pill--ghost{color:#60a5fa}.room-detail-node.node-pill--empty{color:var(--color-text-muted, #888)}.room-detail-node-id{margin-right:.35rem;opacity:.9}.node-pill--connected{color:#4ade80}.node-pill--connecting{color:#fbbf24}.node-pill--failed{color:#9ca3af}.node-pill--ghost{color:#60a5fa}.node-pill--empty{color:var(--color-text-muted, #888)}.editor-wrap{position:relative;flex:1;min-height:200px;display:flex}.editor{flex:1;min-height:200px;padding:1rem;font-size:1rem;font-family:inherit;resize:none;border:none;background:var(--editor-bg, #242424);color:inherit}.editor:focus{outline:none}.editor-placeholder{position:absolute;inset:0;overflow:auto;padding:1rem;font-size:.9rem;color:var(--color-text-muted, #9ca3af);pointer-events:none}.editor-placeholder-intro{margin:0 0 .75rem;font-size:1rem;color:inherit}.editor-placeholder-section{margin-bottom:.75rem}.editor-placeholder-section h3{margin:0 0 .35rem;font-size:.85em;font-weight:600;color:var(--color-text-muted, #9ca3af)}.editor-placeholder-section ol,.editor-placeholder-section ul{margin:0;padding-left:1.25rem}.editor-placeholder-section li{margin-bottom:.25rem}.editor-placeholder-section li:last-child{margin-bottom:0}.room-kicked-banner{flex:0 0 auto;padding:.5rem .75rem;background:#7f1d1d;color:#fca5a5;font-size:.9rem;text-align:center}.error{padding:.5rem .75rem;background:#7f1d1d;color:#fca5a5;font-size:.9rem}.room-header-toast{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:.35em .75em;font-size:1em;font-family:inherit;background:var(--header-bg, #1a1a1a);border:none;border-radius:4px;white-space:nowrap;z-index:2;box-shadow:0 2px 8px #0003;color:inherit}@media(prefers-color-scheme:light){.room-header{--header-bg: #f0f0f0;color:#333}.editor{--editor-bg: #ffffff}.home-input{border-color:#ccc}.home-btn--primary{background:#333;color:#fff}.home-btn--primary:hover{background:#555}}@media(max-width:768px){.home{padding:1.5rem 1rem;max-width:100%}.home h1{font-size:2rem;margin-bottom:.75rem}.tagline{font-size:1.05rem;margin-bottom:1.5rem}.home-sentence{font-size:1.05rem;gap:.35em .5em}.home-inline-form{width:100%;justify-content:center}.home-input{min-height:44px;padding:.6em .9em;font-size:1.05rem;min-width:0;flex:1}.home-btn{min-height:44px;padding:.5em .9em;font-size:1.05rem}.hint{font-size:.95rem;margin-top:1.5rem}.home-about{margin-top:2rem;font-size:.95rem}.room-header{flex-direction:column;flex-wrap:nowrap;align-items:stretch;font-size:.8125rem;padding:.25rem .4rem;gap:0}.room-header-status-row,.room-header-row2{flex:0 0 auto;min-height:40px;align-items:center;gap:.4rem;flex-shrink:0}.room-header-status-row{gap:.4rem}.room-header-row1{gap:clamp(.2rem,1.5vw,.4rem);flex-shrink:0}.room-header-row2{flex-wrap:wrap;align-content:center;gap:.35rem}.room-header button,.room-header .room-header-link{min-height:36px;padding:.25em .5em;font-size:1em;flex-shrink:0;line-height:1.25;box-sizing:border-box}.room-header .status-sync{font-size:1em;padding:0;flex-shrink:0}.room-id{max-width:120px;font-size:1em;flex-shrink:1;white-space:nowrap}.room-detail-trigger{font-size:1em;padding:.2em .35em}.room-detail-popover{font-size:.8125rem;min-width:160px;padding:.4rem .5rem}.room-header-toast{font-size:1em;padding:.25em .5em}.editor{padding:1rem;font-size:1.05rem;min-height:200px}.room-kicked-banner,.error{padding:.6rem .75rem;font-size:1rem}}.sync-demo{margin-top:2.5rem;margin-bottom:2rem;width:100vw;position:relative;left:50%;right:auto;margin-left:-50vw;margin-right:-50vw;display:flex;flex-direction:column;align-items:center}.sync-demo-inner{max-width:680px;width:100%;margin:0 auto;padding:0 1rem;display:flex;flex-direction:column;align-items:center}.sync-demo-title{margin:0 0 1rem;font-size:clamp(1.1rem,2.5vw,1.4rem);font-weight:600;text-align:center;color:inherit}.demo-stage{display:flex;align-items:center;justify-content:center;gap:clamp(1rem,4vw,2.5rem);flex-wrap:nowrap;margin-bottom:0;min-width:0}.demo-device{flex-shrink:0}.demo-desktop{display:flex;flex-direction:column;align-items:center}.demo-desktop .demo-device-screen{width:320px;min-height:200px;background:#fff;border:10px solid #d1d5db;border-bottom:none;border-radius:12px 12px 0 0;overflow:hidden;box-shadow:0 4px 20px #00000014}.demo-desktop-base{width:360px;height:20px;background:linear-gradient(180deg,#e5e7eb,#d1d5db);border-radius:0 0 8px 8px;box-shadow:0 4px #9ca3af}.demo-phone{display:flex;flex-direction:column;align-items:center}.demo-phone-frame{width:176px;padding:10px;background:linear-gradient(145deg,#e8e8ed,#d1d1d6);border-radius:32px;box-shadow:0 0 0 2px #0000000f,0 2px #fffc inset,0 12px 28px #0000001f;display:flex;flex-direction:column;align-items:stretch;gap:0}.demo-phone-top{height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative}.demo-phone-notch{width:56px;height:20px;border-radius:10px;background:#1c1c1e;box-shadow:inset 0 0 0 1px #ffffff0f}.demo-phone-screen{margin-top:6px;width:100%;min-height:200px;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px #0000000f;display:flex;flex-direction:column}.demo-phone-screen .demo-browser{flex:1;display:flex;flex-direction:column;min-height:0}.demo-browser{padding:0;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,monospace;font-size:13px;background:#fff}.demo-browser-bar{display:flex;gap:6px;padding:8px 12px;background:#f3f4f6;border-bottom:1px solid #e5e7eb}.demo-dot{width:10px;height:10px;border-radius:50%}.demo-dot--r{background:#ff5f56}.demo-dot--y{background:#ffbd2e}.demo-dot--g{background:#27c93f}.demo-url{padding:6px 12px;background:#f9fafb;color:#6b7280;font-size:12px;border-bottom:1px solid #e5e7eb}.demo-editor{min-height:80px;padding:10px 12px;white-space:pre-wrap;word-break:break-all;line-height:1.5;position:relative;color:#1a1a1a;background:#fff}.demo-desktop .demo-editor{border:none}.demo-editor--active{caret-color:transparent}.demo-text{color:inherit}.demo-cursor{display:inline-block;width:2px;height:1.2em;background:#1a1a1a;vertical-align:text-bottom;margin-left:1px;animation:demo-cursor-blink 1s step-end infinite}@keyframes demo-cursor-blink{50%{opacity:0}}.demo-arrow-wrap{display:flex;flex-direction:column;align-items:center;gap:.5rem;flex-shrink:0}.demo-arrow{width:80px;height:40px;display:flex;align-items:center;justify-content:center}.demo-arrow-svg{width:100%;height:100%;object-fit:contain}.demo-arrow-caption{margin:0;font-size:.85rem;font-weight:500;color:#6b7280}.demo-browser--phone .demo-url{padding:8px 10px;font-size:11px;background:#f9fafb;color:#6b7280;border-bottom:1px solid #e5e7eb}.demo-browser--phone .demo-editor{min-height:64px;padding:8px 10px;font-size:12px;background:#fff;color:#1a1a1a}@media(max-width:700px){.sync-demo-inner{max-width:100%}.demo-stage{flex-direction:column;flex-wrap:wrap}.demo-arrow-wrap{flex-direction:row;gap:.5rem}.demo-arrow{width:56px;height:28px}.demo-arrow-svg{transform:rotate(90deg)}}