:root{--c-graph: #FDF;--c-bg: #FBF;--c-pri: #90F;--c-dis: #A6F;--c-sec: #FFC;--c-acc: #0A0;--font-s: 16px;--ui-pad: 100px;--ui-height: 60px;--ui-el-h: 40px;--ui-el-w: 80px;--fs-label: clamp(.8125rem, .79rem + .15vw, .875rem);--fs-input: clamp(1rem, .98rem + .1vw, 1.0625rem);--fs-body: clamp(1rem, .94rem + .28vw, 1.125rem);--fs-card-title: clamp(1.25rem, 1.05rem + .9vw, 1.5rem)}*{margin:0;padding:0;box-sizing:border-box;font-family:ab-kokikaku,sans-serif;font-weight:400;font-style:normal;font-size:var(--font-s);color:#000}html,body{height:100dvh;width:100%;background-color:var(--c-bg);color:var(--c-pri);overflow:hidden}main{width:100%;height:100%;overflow:hidden}#ilogo{position:fixed;bottom:0;padding-left:10px;height:100px;width:100vw}#GRAPH{position:absolute}#UI-wrapper{position:fixed;height:var(--ui-height);margin-left:calc(var(--ui-pad) - 10px);width:calc(100vw - (var(--ui-pad) * 2) + 20px);justify-content:space-between}#left-groups{height:100%}#form-wrapper,#audio-warpper{height:100%;padding:0 10px;gap:5px}#room:disabled{color:var(--c-dis)!important}#room-field{position:relative;height:100%}#room-field #room{padding-right:32px}#room-field #copylinkbtn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:24px;min-width:24px;height:24px;padding:0;border:none;border-radius:50%;background-color:var(--c-pri);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}#room-field #copylinkbtn[hidden]{display:none}#room-field #copylinkbtn svg{width:13px;height:13px;display:block}#room-field #copylinkbtn:hover{background-color:var(--c-dis)}#room-field #copylinkbtn.copied{background-color:var(--c-acc)}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus,select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus{-webkit-text-fill-color:var(--c-pri)!important;background-color:#ccc}#homebtn,#joinbtn{width:var(--ui-el-h)}#login-wrapper{height:100%;padding:0 10px;gap:5px}#authuser,#authpass{width:110px}#auth-msg{color:red;font-size:var(--fs-label);white-space:nowrap}#editbtn{display:none}#recbtn{color:#fff;width:var(--ui-el-h);height:var(--ui-el-h);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKJSURBVHgB1VqNmYIwDI1OwAhsIBscG5wbyAa6gWzijXA3Ad4E6gTqBLhBrpWgoQSOnwLlfZdPLC0mzUtKm1uABSCApz7WSlZKfCUBZG0e63YjOSu5KDkusu/TQCutZK8kUYId5aQkwszoccAUT3soLslhcENqFE/JEzsla60IMvqQ0YGSUEmM9V7bg22QQifhx3KlvQ7P9Ig+0nOv1ryhHrQRZl0rHoIlkGeuglfX0AdEGfOhOxgI5M3UCqUE5e25tf53fcEb7YygQDTTXWued0VFzG3aDE6nUp7p4RlGpI0YYLhvFNrU6OIZ+pz+G7BvbfHAEBgR13XknBss27QFZSc+sZ7U6cCpA44Bi6t3bN40Zz8Ex0CLnewFWtKbBcqEqPSCka4icBRGLCR5o0mf0XN+U1Ba5RnJW0KR73qX9ABHQbqdWdNaGxCwhl9wHz/sOtAGrFjDEdzHjV372gCfNThLHwZOoRXMJYBzUCC/1oMFPtsyLJ5/7oPrvISZQxvw4v1cKMS/FwyAGRgAxaRz0wbwqA7AfRSOK7UBd9bgg/sI2fXF9MAnuI8Pdn0u5dUZvMzxdcvPbyQubiVNVO5bMDtwLb5nO4jKfYvwnh2CYzC2lG/6sA5OewGL50MHqYPpBZeOVba1s886xjjXgy02gAfKdcq0iuWT6mvTQfM93KXBkcG505h0EpTX0q5aY8TD1AWOGLpAMGLoEtMWyyWmGPoAs2pNKngjBEugRSoRJisCG6hwax4bEXYvs+5QrhkPE3MCpbgkdF/PZoDlQrdP3syVriqYxzAkSJGvGkO6SErGj5euyZAI5Up7U0n6Km7lHIj4GkK2p87/5cZnXR7wPpi90+e3jYPkP2UbPJU9GZp5AAAAAElFTkSuQmCC);background-size:contain;background-size:60%;background-position:50%;background-repeat:no-repeat}#recbtn:disabled{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAQWSURBVHgB1VrbVdtAEB0J+Fc6cCqwfIDviAqSVABUYKcCRAekgpAKIBWgfAPHooKIDvzPK3PFrBitJWHJsr3cc0C7q9e9mtnXjD3qAdPpNHh+fv7GxeHLy8vA87yQjwHXA3MNt2XclvEx5eqd7/vJaDTKaEl41BFCesykIq5G1A0pC/q5jJjWAhTxCakvvCxYyDkLOW0rpJWA29vbkxriM/5L+dwfuMrW1hbcZMZk0J6Lfnh4gGvhvoiPX6jGanwu3t3dPaU+BTCBwdPT0wUXQ+tUAtLb29vnhuyiMP2G7x/bz8VHYGscLGKNdwXwiw6Z/BmVvzqIn+7v7yfUA66vryMm/AsDgGrGBzne29u7bLq3UYC4TKwfKsTPaAVgIRP++idUHr0aXapWgE2+jVmXAdyVXetKW6NJRKWAm5sbjOkXqinljnnQ1s+7oqrP8fuP+P2/7Wu9mpun9GbGtZJXPALmcUVvImbMY2R7gG/fCPORkJch8fu6yQN4Jz4cOEhTIFYpoSRA/H4g1dk6fL4JEAEO9DoiASF39FhfUwiA6+hOi9Fmk+QNwAFcTJ0tMoZ7mXohgF3nRF2UrWqo7ALhkkg1eHx8nJhzuQD5+kemkcUck2Oos0IugAlH6tq0rxm2TwinRKqFFXIBsh7JgeUtOQqsu0xZFoTkybj/z5zgoevTJobNRSBzA7jm7gOuvuU+iavkAeGWmjpWsz6bpZiuufyXHId2I3BHHxiq8wk5DjUzQ8DA54aBanDWfQxkt5eDuQ99vWzd2dnJyH3ojxyU1kIud2ADi2Pg0wcHBBSK9CLJVdgc0YlLJiHHgfCMqmboxEWv5lkuJMchsSWDDC50b2pWWMNVRKp850uwNQeXv5LjMIs4Kae8Y/N14Ch0uSMLt8jUERT2ZVxNpA3r7CNyFBLCN0ix3TT7gWIR57IbVe1bcgEcnMWe0wynEWKV5BiEUzFKwn3yI/7BjVhdsROT+KRTQPDXlJFLMBGTYilRYYUJOQIOdY71EI9ESFE2hSorYLtJG4ZwiE3djlfNxUZZLeKiua9JRHq0qVWqHakGH45Sf9bXzK1GEQslcSXciADrJuYG2cBf2KFO+7o5ATAPK/2hmkIRMaA1oSIyDRxXhTor9wNspnMdCcODYMp1iBC3KdwYAJe6VFPthoYjYbEWIe40XeXohNEG79AjjqS04rp73k3ySbYGY3Ap6474aZ9JPpl7ItU8gyvDG5ruXTjNauetBCbTftklzYp1lyxdIvu5kljJ3ntOq0Q3kgsNs3QiayocZ4hw6EQ3vWZYQvktBUjDx+cS5piLmlxmKQFCBn0h5uIh9YecOFYDbS25zI894FZRVaa9BXKrdSFu0FmAhhIDIUNE++ysO4IHsv++l53UZR8z/H/Xmo5D/DRPnQAAAABJRU5ErkJggg==)}.recording{outline:1px solid red;outline-offset:-2px;background-color:#9a0000;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABYSURBVHgB7dghDgAgDMXQjXD/KwNB4Sv4oi8zuCZMrVfVmVyjwsUHzvfRd/57184vpgykDKQMpAykDKQMpAykDKQMpAykDKQMpAykDKQMpOID2yM6FB+4AW4cBk0qqCBTAAAAAElFTkSuQmCC)!important;background-size:55%!important}.recording:hover{background-color:#000}#cuebtn{width:var(--ui-el-h);height:var(--ui-el-h);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAqCAYAAADbCvnoAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFzSURBVHgBzZhvkYMwEEefhJMQCUhAwkmIg6sDcNA66Dk4CZVQCUg4CVwy18xkyvIvZBPezH7oB4ZX9gfsAnB3ZTgR46uunERsjGpwZanMKJQXa6nEuFBV8hUL9K5+mYp1rj4oRHxij3H1jdxGSwHehYjEBmQxgyJzQgGLLKaWrzUhj89Pz1TK562jglDAUCBfe4QCn8ht/CFDG1OEAhaFfB0RAoU2HhXKLpZLKGA52MbcQoF+RqxbE9MSgsQ2agrFYk9ksYYKQgHLhnyVFArckOevSw0hy8pVKiXUunoIIg/exmVtIT8pXJEnhYt0gJaQF+mYjsT+d8/CSKwh1CLnxLfHrB2cU6hBzsmTHWtVDqHdOdEU+kJenW4krk6pQi3y68C3rOEAe4UMck4GMq3fW4WSb2MNIYuckzsKK/aSUMvGx722kOH/30s5sSgTn7BYTrYKDUyvSpblL1WoWE6WyPK4z0ks01PwS9kcm8eCUrSciD8AWEYfJt8FiQAAAABJRU5ErkJggg==);background-size:contain;background-size:50%;background-position:55% 50%;background-repeat:no-repeat}#cuebtn:disabled{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAqCAYAAADbCvnoAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJ/SURBVHgBzZjbccIwEEVlQwEpIekAD49vUkGSCmIqACrAVICpAKggdIC/eYzpIJRAA0DuEjkjKzI2RhLcmQxCjvFh9+5Kgm02m0kcx8/sQeSs1+vTeeA4oeu6Y8/zduyOcpPB6XTqHY/HBSLmszvqL0KpScfZAa7TbDYjZlmuahLRegbU4h7+ciWQIV72wnv/cDh8A2wAsCdmQSkgpCioVCoehjOWBg2QwtiGv1IeajQaTjKmVJHJKX2pG+AvVOOrqWp0sy7QA+v1+gsAOgSRzBMgT6MRf7l5/wCoKSLicX8xAYz8RWkcMI3KTJlKFBFABBh+pj7kN4JDgmc2gRLhnndAjGR/QXMURf8Wf+WmTCWAz1X+gt5v9VcpoETcX6/sf5vwyy5DpVKmki5/3RQhUeQbfCFf1SbwNymaRm0RkrVarQKk81PRWGl+lmV8bRGSRctQhr+CS/4yFiFR3F9fGNZSD0dqMf/RarW2yZyxCIni/vJU/kIUY9FfViIkC88M8dKV5wHYrzLL4t55w8NT84jcFF1+bg0IVdfGQwcAaUuXIlq4kZ2I3hgHop0mqopAetKlPYGgGkNx0hgQB+miigjkSQIZV6vVEGbfy/cZAaL0AGai2A1E8Enn0m5AK9ByuayhjEcYtiXTbqmCihyrtABd6xOjQOgpXb7Ky8ekMdITqHxiBIiXMaWnJl2KEK2+uBwYBeLr0gTDtjiv6/hdGCivjJGeEJuwq9JTGojaPUBGEsi53aOq+tf6pDRQ0XavU0ogfowmEF+c13n+KgRUxCc605MLRL9wmDj8lQaSYCLeZSNmUSoPXd3udUqO0DBrW2BLCVDutsCaqNewB9IPf/rgPL5uxrAAAAAASUVORK5CYII=)}.playing{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAeCAYAAAAo5+5WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAwSURBVHgB7cyxCQBACMDA8Pvv5GhvoxOIhZBA2gP4dTAv2nssJSwsLCwsLCwsfAdOXrsFtX1Rjq4AAAAASUVORK5CYII=)!important;background-size:40%!important;background-position:50%!important}#p5js canvas{display:block;border-radius:10px;background-color:#000;width:var(--ui-el-w);height:var(--ui-el-h)}#mic-status{font-size:var(--fs-label);color:var(--c-pri);max-width:130px;line-height:1.1}#nodecard{position:fixed;z-index:50;background-color:var(--c-sec);border:1px solid var(--c-pri);border-radius:10px;padding:15px;min-width:200px;max-width:280px;cursor:move}#nodecard-close{position:absolute;top:6px;right:6px;min-width:unset;width:24px;height:24px;padding:0}#nodecard dt{font-size:var(--fs-label);opacity:.7;margin-top:6px}#nodecard dd{margin:0;overflow-wrap:break-word;font-size:var(--fs-body)}#nodecard-actions,#nodecard-owner-actions{gap:5px;margin-top:12px}#nodecard-name-row{gap:6px;padding-right:20px}#nodecard-name{flex:1;min-width:0;border:none;background:transparent;padding:0;height:auto;border-radius:0;overflow-wrap:break-word;font-size:var(--fs-card-title)}#nodecard-name:hover:not([readonly]){background-color:transparent}#nodecard-name:focus,#nodecard-name:active{border:none;outline:none}#nodecard-name.editing{color:var(--c-pri)}#nodecard-edit{min-width:unset;height:auto;padding:3px 8px;font-size:var(--fs-label)}#nodecard-error{color:red;font-size:var(--fs-label);margin-top:8px}#nodecard-delete-popup{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:flex;align-items:center;justify-content:center}#nodecard-delete-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000059}#nodecard-delete-dialog{position:relative;z-index:1;gap:12px;background-color:var(--c-sec);border:1px solid var(--c-pri);border-radius:10px;padding:20px;min-width:180px;text-align:center}#nodecard-delete-actions{gap:8px}input{border:1px solid #ccc;padding-left:10px;height:var(--ui-el-h);border-radius:10px;font-size:var(--fs-input)}input:disabled{background-color:#ddd;opacity:1}input:hover:not([disabled]){background-color:#f0f0f0}input:active:not([disabled]){border:1px solid #ccc;outline:1px solid var(--c-pri)}input:focus:not([disabled]){border:1px solid #ccc;outline:1px solid var(--c-pri);outline-offset:-2px}button{padding:1px 5px;min-width:var(--ui-el-h);height:var(--ui-el-h);background-color:#eee;border:1px solid #ccc;border-radius:10px;font-size:var(--fs-input)}button:disabled,input:disabled{color:var(--c-dis);outline:1px solid #ccc;outline-offset:-2px;background-color:#ddd}button:disabled:active{background-color:#ddd}button:hover{background-color:#ddd}button:active{background-color:#eee}[hidden]{display:none!important}.flexr{display:flex;flex-direction:row}.flexc{display:flex;flex-direction:column}.xc{justify-content:center}.yc{align-items:center}.xs{justify-content:start}.ys{align-items:start}.xs{justify-content:end}.ys{align-items:end}@media screen and (max-width: 1300px){:root{--ui-height: 60px;--ui-el-h: 45px;--ui-el-w: 80px}#ilogo{z-index:100;pointer-events:none;bottom:0;padding-left:0;width:100vw}#UI-wrapper{width:100vw;flex-direction:column;position:fixed;height:calc(var(--ui-height)*3);margin-left:0}#left-groups{display:contents}#form-wrapper,#audio-warpper,#login-wrapper{flex:start;width:100vw}#audio-warpper{margin-top:-10px}#form-wrapper button{width:var(--ui-el-h)}#uploadBtn{min-width:var(--ui-el-h)}input{width:100%;min-width:0;padding:0 auto}#login-wrapper{position:relative}#authuser,#authpass{flex:1;min-width:0;width:auto}#authbtn{flex:none;width:var(--ui-el-h);min-width:var(--ui-el-h)}#auth-msg{position:absolute;right:10px;bottom:4px;pointer-events:none}#nodecard{position:fixed;top:calc(var(--ui-height)*3);left:0;right:0;bottom:0;max-width:unset;min-width:unset;padding:20px;border-radius:0;overflow-y:auto;cursor:auto}#nodecard-name-row{padding-right:30px}#nodecard-actions button,#nodecard-owner-actions button,#nodecard-edit,#nodecard-delete-actions button{height:calc(var(--ui-el-h) * 1.4);min-width:calc(var(--ui-el-h) * 1.4);padding:8px 16px}#nodecard-close{width:36px;height:36px}}#tourbtn{position:fixed;left:var(--ui-pad);bottom:100px;z-index:40;border-radius:50%;width:48px;height:48px;font-size:1.9em;background-color:var(--c-graph);border:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:100}#tourbtn:hover{background-color:#000;color:var(--c-bg)}#tour-invite{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;background:#ffbbffd9}#tour-invite p{font-size:var(--fs-body)}#tour-invite button{height:auto;padding:10px 14px}#tour-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:150;pointer-events:none}#tour-highlight{position:fixed;z-index:151;border-radius:12px;box-shadow:0 0 0 9999px #0000008c;pointer-events:none}#tour-tooltip{position:fixed;z-index:152;background-color:var(--c-sec);border:1px solid var(--c-pri);border-radius:10px;padding:12px;max-width:300px;font-size:var(--fs-body)}#tour-nav{gap:5px;margin-top:10px}#tour-ack{color:var(--c-acc);font-weight:700;margin-top:8px}#tour-hint{margin-top:8px;font-size:var(--fs-label);opacity:.6}@media screen and (max-width: 1300px){#tour-tooltip{max-width:90vw;padding:14px}#tour-text,#tour-ack{line-height:1.35}#tour-hint{display:none}#tourbtn{left:10px;bottom:100px}}#mic-notice{position:fixed;left:15px;bottom:180px;z-index:210;max-width:260px;background-color:var(--c-sec);border:1px solid var(--c-pri);border-radius:10px;padding:10px 28px 10px 12px;box-shadow:0 2px 10px #00000040}#mic-notice p{font-size:var(--fs-label);line-height:1.3}#mic-notice-close{position:absolute;top:4px;right:6px;width:22px;height:22px;min-width:unset;padding:0;line-height:1;background:transparent;border:none}@media screen and (max-width: 1300px){#mic-notice{left:10px;bottom:230px;max-width:70vw}}#chattoggle{position:fixed;top:calc(var(--ui-height) + 10px);right:10px;z-index:121;width:var(--ui-el-h);min-width:var(--ui-el-h);height:var(--ui-el-h)}#chatpanel{position:fixed;top:0;bottom:0;right:0;width:300px;max-width:90vw;z-index:120;display:flex;flex-direction:column;background-color:var(--c-sec);border:1px solid var(--c-pri);border-radius:10px 0 0 10px;border-right:none;transform:translate(100%);transition:transform .25s ease}#chatpanel:not(.collapsed){transform:translate(0)}#chatbody{display:flex;flex-direction:column;gap:6px;padding:8px;flex:1;min-height:0}#chatroster{font-size:var(--fs-label);color:var(--c-pri);display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--c-pri);padding-bottom:6px}#chatroster .roster-guests{opacity:.7}button.roster-user{background:none;border:none;height:auto;padding:0;font-size:var(--fs-label);color:var(--c-pri);cursor:pointer;text-decoration:underline dotted}.roster-friend{font-weight:700}#messages{list-style:none;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:4px;min-height:0}#messages li{font-size:var(--fs-body);word-break:break-word}#messages .msg-user{color:var(--c-pri);font-weight:700;margin-right:6px}#msgform{gap:5px}#msginput{flex:1;min-width:0}#chatlogin-hint{font-size:var(--fs-label);color:var(--c-pri);opacity:.8}#chattabs{gap:6px;border-bottom:1px solid var(--c-pri)}.chattab{flex:1;height:auto;padding:6px 4px;font-size:var(--fs-label);background:none;border:none;border-bottom:2px solid transparent;color:var(--c-pri);opacity:.6;cursor:pointer}.chattab.active{opacity:1;border-bottom-color:var(--c-pri)}#friend-badge{display:inline-block;margin-left:5px;padding:0 5px;border-radius:8px;background-color:var(--c-pri);color:var(--c-sec);font-size:var(--fs-label)}#panel-room,#panel-friends{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0}#panel-room[hidden],#panel-friends[hidden]{display:none}#friend-list{list-style:none;overflow-y:auto;flex:1;min-height:0;display:flex;flex-direction:column;gap:4px}.friend-row,.friend-request{gap:6px;font-size:var(--fs-body)}.friend-name{flex:1;min-width:0;text-align:left;color:var(--c-pri);font-weight:700;background:none;border:none;height:auto;padding:0;word-break:break-word}button.friend-name{cursor:pointer;text-decoration:underline}.friend-room{font-size:var(--fs-label);color:var(--c-pri)}.friend-offline,.friend-empty{font-size:var(--fs-label);opacity:.6}.friend-action{width:24px;min-width:24px;height:24px;padding:0;font-size:var(--fs-label)}#friend-error{font-size:var(--fs-label);color:var(--c-pri)}#friendadd[hidden]{display:none}@media (max-width: 1300px){#chattoggle{top:auto;bottom:10px;right:10px}#chatpanel{top:auto;bottom:0;left:0;right:0;width:100vw;max-width:100vw;height:70dvh;border-radius:10px 10px 0 0;border:1px solid var(--c-pri);border-bottom:none;transform:translateY(100%)}#chatpanel:not(.collapsed){transform:translateY(0)}}@media (prefers-reduced-motion: reduce){#chatpanel{transition:none}}