*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}#connected{user-select:none;-webkit-user-select:none}:root{--btn: 35px;--gap: 8px;--pad: 10px;--radius: 9px;--font-xs: 13px;--font-sm: 14px;--font-md: 15px;--font-lg: 20px}:root{--bg: #f5f0e8;--surface: #ece6da;--surface-raised: #fff;--border: rgba(0, 0, 0, .08);--accent: #f472b6;--accent-soft: rgba(244, 114, 182, .1);--accent-border: rgba(244, 114, 182, .3);--accent-text: rgba(244, 114, 182, .9);--text: #1a1a1a;--text-dim: rgba(0, 0, 0, .35);--text-mid: rgba(0, 0, 0, .55);--input-bg: #fff;--input-border: rgba(0, 0, 0, .12);--msg-stranger: #e8e3d9;--msg-stranger-text: rgba(0, 0, 0, .7);--canvas-bg: #ece6da;--overlay-bg: rgba(245, 240, 232, .92);--scrollbar: rgba(0, 0, 0, .1);--spinner-track: rgba(244, 114, 182, .15);--swatch-ring: #1a1a1a}[data-theme=dark]{--bg: #0b0b0d;--surface: #111114;--surface-raised: #1a1a1f;--border: rgba(255, 255, 255, .06);--accent: #f472b6;--accent-soft: rgba(244, 114, 182, .1);--accent-border: rgba(244, 114, 182, .3);--accent-text: rgba(244, 114, 182, .8);--text: #fff;--text-dim: rgba(255, 255, 255, .3);--text-mid: rgba(255, 255, 255, .45);--input-bg: #17171b;--input-border: rgba(255, 255, 255, .1);--msg-stranger: #1b1b1f;--msg-stranger-text: rgba(255, 255, 255, .75);--canvas-bg: #111114;--overlay-bg: rgba(11, 11, 13, .92);--scrollbar: rgba(255, 255, 255, .08);--spinner-track: rgba(244, 114, 182, .12);--swatch-ring: #fff}body{font-family:Syne,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;background:var(--bg);color:var(--text);height:100dvh;overflow:hidden;transition:background .25s,color .25s}#app{height:100dvh;overflow:hidden}.theme-toggle-inline{background:var(--surface);border:.5px solid var(--border);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;color:var(--text-mid)}.finding-top{display:flex;align-items:center;gap:14px}.screen{display:none;width:100%;height:100%}.screen.active{display:flex}#terms{align-items:center;justify-content:center;background:var(--bg);overflow-y:auto}.terms-card{max-width:480px;width:100%;padding:40px 32px;display:flex;flex-direction:column;align-items:center;gap:18px}.terms-desc{color:var(--text-dim);font-size:16px;margin-bottom:8px}.terms-section{width:100%}.terms-section h3{font-size:13px;font-weight:700;color:var(--text-mid);text-transform:lowercase;letter-spacing:.05em;margin-bottom:10px}.terms-text{background:var(--surface);border:.5px solid var(--border);border-radius:10px;padding:16px 18px;max-height:200px;overflow-y:auto;font-size:11.5px;line-height:1.7;color:var(--text-mid)}.terms-text ul{padding-left:18px;margin:6px 0}.terms-text li{margin-bottom:4px}.terms-text b{color:var(--text)}.terms-text::-webkit-scrollbar{width:3px}.terms-text::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:3px}.checkbox-row{display:flex;align-items:center;gap:10px;width:100%;font-size:12px;color:var(--text-mid);cursor:pointer;padding:4px 0}.checkbox-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);flex-shrink:0}.btn-accent{background:var(--accent);color:#fff;border:none;padding:15px 45px;border-radius:13px;font-size:18px;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .15s;width:100%;margin-top:8px}.btn-accent:hover:not(:disabled){opacity:.9}.btn-accent:disabled{opacity:.3;cursor:not-allowed}#profile{align-items:center;justify-content:center;background:var(--bg)}.profile-card{max-width:400px;width:100%;padding:40px 32px;display:flex;flex-direction:column;gap:14px}.profile-card h2{font-size:28px;font-weight:800;letter-spacing:-.5px}.profile-desc{font-size:12px;color:var(--text-dim);line-height:1.6}.profile-preview{display:flex;align-items:center;gap:10px;padding:12px 0}.preview-avatar{width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0}.preview-name{font-size:13px;font-weight:600;color:var(--text)}.preview-school{font-size:10.5px;color:var(--text-dim)}.school-logo-img{width:100%;height:100%;border-radius:50%;object-fit:cover}.school-logo-sm{width:16px;height:16px;border-radius:3px;object-fit:cover;vertical-align:middle;margin-right:2px}.profile-input{width:100%;background:var(--input-bg);border:.5px solid var(--input-border);border-radius:13px;padding:15px 18px;color:var(--text);font-size:16px;outline:none;font-family:inherit}.profile-input::placeholder{color:var(--text-dim)}.profile-input:focus{border-color:var(--accent-border)}.profile-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,0.3)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;cursor:pointer}[data-theme=dark] .profile-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}.profile-select option,.profile-select optgroup{background:var(--surface-raised);color:var(--text)}#finding{flex-direction:column;align-items:center;justify-content:center;gap:22px;background:var(--bg)}.logo-big{font-size:58px;font-weight:800;color:var(--text);letter-spacing:-2.5px}.logo-big b{color:var(--accent)}.finding-badge{display:flex;align-items:center;gap:10px;font-size:var(--font-md);color:var(--text-dim);padding:8px 18px;background:var(--surface);border-radius:20px;border:.5px solid var(--border)}.finding-badge .badge-avatar{width:28px;height:28px;min-width:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0;overflow:hidden}.finding-badge .badge-name{font-weight:600;color:var(--text-mid);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.finding-badge .badge-school{color:var(--text-dim);font-size:10.5px;white-space:nowrap}.finding-badge-row{display:flex;align-items:center;gap:8px;width:100%;justify-content:center}.badge-logout{width:28px;height:28px;border-radius:50%;border:.5px solid var(--border);background:var(--surface);color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s}.badge-logout:hover{color:var(--accent);border-color:var(--accent-border)}.online-count{font-size:11px;color:var(--text-dim);letter-spacing:.05em;text-align:center}.finding-card{background:var(--surface-raised);border:.5px solid var(--border);border-radius:20px;padding:35px 40px;margin:0 25px;display:flex;flex-direction:column;align-items:center;gap:18px;width:calc(100% - 40px);max-width:360px}.find-btn{background:var(--accent);color:#fff;border:none;padding:15px 0;border-radius:13px;font-size:18px;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .15s;width:100%}.find-btn:hover{opacity:.9}#queue-status{display:flex;flex-direction:column;align-items:center;gap:16px}.find-sub{font-size:var(--font-md);color:var(--text-dim);letter-spacing:.1em;text-transform:lowercase}.find-tags{display:flex;gap:8px}.ftag{background:var(--surface);border:.5px solid var(--border);border-radius:20px;padding:6px 15px;font-size:var(--font-sm);color:var(--text-dim);cursor:pointer;font-family:inherit}.ftag.active{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent-text)}.find-cancel{background:none;border:.5px solid var(--border);border-radius:var(--radius);padding:10px 30px;color:var(--text-dim);font-size:var(--font-md);cursor:pointer;font-family:inherit;margin-top:8px}.ping{display:inline-block;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.3}50%{opacity:1}}.spinner{width:50px;height:50px;border:3px solid var(--spinner-track);border-top:3px solid var(--accent);border-radius:50%;animation:spin .85s linear infinite;margin:0 auto}@keyframes spin{to{transform:rotate(360deg)}}#connected{flex-direction:column;overflow:hidden}.hdr{display:flex;align-items:center;gap:var(--gap);padding:var(--pad);border-bottom:.5px solid var(--border);flex-shrink:0;background:var(--bg)}.logo-sm{font-size:var(--font-lg);font-weight:800;color:var(--text);letter-spacing:-.5px;height:var(--btn);display:flex;align-items:center}.logo-sm b{color:var(--accent)}.dot{width:7px;height:7px;border-radius:50%;background:#4ade80;flex-shrink:0}.hdr-spacer{flex:1}.hbtn{border:.5px solid var(--border);border-radius:var(--radius);height:var(--btn);padding:0 15px;font-size:var(--font-sm);cursor:pointer;font-family:inherit;background:transparent;color:var(--text-mid);display:inline-flex;align-items:center;justify-content:center}.hbtn-icon{width:var(--btn);height:var(--btn);padding:0;display:flex;align-items:center;justify-content:center;font-size:16px}.hbtn-accent{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}.main{flex:1;display:flex;overflow:hidden;min-height:0}#shared-canvas{flex:1;display:block;cursor:crosshair;background:var(--canvas-bg);touch-action:none;min-height:0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.image-placer{position:absolute;border:2px dashed var(--accent);cursor:move;z-index:5;-webkit-user-select:none;user-select:none}.image-placer img{width:100%;height:100%;display:block;object-fit:contain;pointer-events:none}.image-placer-handle{position:absolute;bottom:-6px;right:-6px;width:14px;height:14px;background:var(--accent);border-radius:3px;cursor:nwse-resize}.image-placer-actions{position:absolute;bottom:-36px;left:50%;transform:translate(-50%);display:flex;gap:6px;white-space:nowrap}.placer-btn{background:var(--surface-raised);border:.5px solid var(--border);border-radius:7px;padding:5px 14px;font-size:11.5px;color:var(--text-mid);cursor:pointer;font-family:inherit}.placer-btn-accent{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:700}.marquee-bar{background:#fbbf24;overflow:hidden;white-space:nowrap;flex-shrink:0;padding:6px 0}.marquee-content{display:inline-block;animation:marquee 25s linear infinite;font-size:var(--font-xs);font-weight:600;color:#1a1a1a;letter-spacing:.02em;padding-left:100%}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-100%)}}.skip-confirm{display:flex;align-items:center;gap:6px;background:var(--surface-raised);border:.5px solid var(--border);border-radius:var(--radius);padding:4px 10px;font-size:var(--font-xs);color:var(--text-mid)}.skip-yes{background:var(--accent);color:#fff;border:none;border-radius:6px;padding:4px 10px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}.skip-no{background:none;border:.5px solid var(--border);border-radius:6px;padding:4px 10px;font-size:12px;color:var(--text-dim);cursor:pointer;font-family:inherit}.float-toolbar{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;background:var(--surface-raised);border:.5px solid var(--border);border-radius:12px;padding:6px;box-shadow:0 2px 12px #00000014;z-index:5}.float-toolbar .tbb{width:30px;height:30px;border-radius:8px}.ftb-divider{width:20px;height:.5px;background:var(--border)}.ftb-range{writing-mode:vertical-lr;direction:rtl;width:16px;height:50px;accent-color:var(--accent)}.canvas-col{flex:1;display:flex;flex-direction:column;position:relative;border-right:.5px solid var(--border);min-width:0;min-height:0;overflow:hidden}.tbb{background:transparent;border:.5px solid var(--input-border);border-radius:var(--radius);width:var(--btn);height:var(--btn);display:flex;align-items:center;justify-content:center;color:var(--text-mid);cursor:pointer;flex-shrink:0}.tbb.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.toolbar-divider{width:.5px;height:18px;background:var(--border);margin:0 2px}.color-picker-wrap{position:relative;flex-shrink:0}.sw-active{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid var(--swatch-ring);transition:transform .15s}.sw-active:hover{transform:scale(1.1)}.color-dropdown{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:var(--surface-raised);border:.5px solid var(--border);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;box-shadow:0 4px 16px #0000001f;z-index:20}.sw{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;flex-shrink:0;transition:border-color .1s,transform .1s}.sw:hover{transform:scale(1.15)}.sw.on{border-color:var(--swatch-ring)}.tgap{flex:1}.stroke-label{font-size:var(--font-xs);color:var(--text-dim);padding:0 2px}.toolbar input[type=range]{width:56px;accent-color:var(--accent)}.tclr{color:var(--text-dim);background:var(--surface);border:.5px solid var(--input-border);border-radius:var(--radius);width:var(--btn);height:var(--btn);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}.tclr:hover{color:var(--text-mid)}.peer-notch{display:flex;align-items:center;justify-content:center;gap:var(--gap);padding:8px 15px;border-bottom:.5px solid var(--border);cursor:pointer;flex-shrink:0;transition:background .15s}.peer-notch:hover{background:var(--surface)}.notch-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;flex-shrink:0;transition:background .3s}.notch-dot.notch-laggy{background:#fbbf24}.notch-dot.notch-disconnected{background:#ef4444}.notch-name{font-size:var(--font-sm);font-weight:600;color:var(--text-mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.notch-school{font-size:var(--font-xs);color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}.notch-logo{width:14px;height:14px;border-radius:3px;object-fit:cover;flex-shrink:0}.chat-col{width:280px;display:flex;flex-direction:column;flex-shrink:0;background:var(--bg)}.msgs{flex:1;overflow-y:auto;padding:15px;display:flex;flex-direction:column;gap:9px;min-height:0}.msgs::-webkit-scrollbar{width:2px}.msgs::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:2px}.msg{padding:10px 14px;border-radius:14px;font-size:var(--font-md);line-height:1.5;max-width:220px;word-break:break-word}.msg.stranger{background:var(--msg-stranger);color:var(--msg-stranger-text);align-self:flex-start;border-bottom-left-radius:3px}.msg.you{background:var(--accent);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}.msg.system{background:transparent;color:var(--text-dim);font-size:var(--font-xs);align-self:center;text-align:center;max-width:100%;padding:3px 0}.msg-img-wrap{padding:0;background:transparent;overflow:hidden;max-width:min(65%,150px);border-radius:10px;flex-shrink:0}.msg-img-wrap.you{align-self:flex-end;border-bottom-right-radius:3px}.msg-img-wrap.stranger{align-self:flex-start;border-bottom-left-radius:3px}.msg-img{width:100%;height:auto;display:block;cursor:pointer;border-radius:inherit}.msg a{color:inherit;text-decoration:underline;text-underline-offset:2px}.msg a:hover{opacity:.8}.msg-voice{padding:6px 10px;border-radius:12px;max-width:200px;display:flex;align-items:center;gap:8px}.msg-voice.you{background:var(--accent);align-self:flex-end;border-bottom-right-radius:3px}.msg-voice.stranger{background:var(--msg-stranger);align-self:flex-start;border-bottom-left-radius:3px}.msg-voice audio{height:32px;max-width:170px}.msg-voice.you audio{filter:brightness(2) saturate(0)}.msg-video-wrap{padding:0;background:transparent;overflow:hidden;max-width:min(75%,220px);border-radius:10px;flex-shrink:0}.msg-video-wrap.you{align-self:flex-end;border-bottom-right-radius:3px}.msg-video-wrap.stranger{align-self:flex-start;border-bottom-left-radius:3px}.msg-video{width:100%;height:auto;display:block;border-radius:inherit;max-height:300px}.recording-bar{display:flex;align-items:center;gap:8px;padding:9px 12px;border-top:.5px solid var(--border);background:var(--bg)}.rec-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;animation:pulse 1s ease-in-out infinite;flex-shrink:0}.rec-timer{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text);min-width:32px}.rec-label{font-size:11px;color:var(--text-dim);flex:1}.rec-cancel{background:none;border:.5px solid var(--border);border-radius:7px;padding:5px 12px;font-size:11px;color:var(--text-dim);cursor:pointer;font-family:inherit}.rec-stop{background:var(--accent);border:none;border-radius:7px;padding:5px 14px;font-size:11px;font-weight:700;color:#fff;cursor:pointer;font-family:inherit}#typing-indicator{padding:4px 12px;font-size:10px;color:var(--text-dim);font-style:italic}.chat-attach{width:var(--btn);height:var(--btn);background:var(--surface);border:.5px solid var(--input-border);border-radius:var(--radius);color:var(--text-dim);cursor:pointer;font-size:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.chat-attach:hover{color:var(--accent);border-color:var(--accent-border)}.cinput-row{padding:var(--pad);border-top:.5px solid var(--border);display:flex;align-items:center;gap:var(--gap);flex-shrink:0}.ci{flex:1;min-width:0;height:var(--btn);background:var(--input-bg);border:.5px solid var(--input-border);border-radius:var(--radius);padding:0 13px;color:var(--text);font-size:var(--font-md);outline:none;font-family:inherit;user-select:text;-webkit-user-select:text}.ci::placeholder{color:var(--text-dim)}.ci:focus{border-color:var(--accent-border)}.csend{width:var(--btn);height:var(--btn);background:var(--accent);border:none;border-radius:var(--radius);color:#fff;cursor:pointer;font-size:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center}#status-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--overlay-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:10}.hidden{display:none!important}.school-full{display:inline}.school-abbr{display:none}@media(max-width:768px){.school-full{display:none}.school-abbr{display:inline}.main{flex-direction:column}.canvas-col{height:55%;border-right:none;border-bottom:.5px solid var(--border)}.chat-col{width:100%;height:45%}.sw{width:14px;height:14px}.toolbar{gap:5px;padding:6px 8px}}