:root{--wb-canvas: #ffffff;--wb-surface-raised: #fafafa;--wb-surface-inset: #f4f5f7;--wb-ink: #101113;--wb-body: #2a2c30;--wb-charcoal: #4b4f55;--wb-mute: #6b7079;--wb-ash: #8a8f97;--wb-stone: #bfc3c9;--wb-primary: #ea2804;--wb-primary-deep: #c01f00;--wb-on-primary: #ffffff;--wb-hairline: #e5e7eb;--wb-on-dark: #fafafa;--wb-on-dark-mute: rgba(250, 250, 250, .7);--wb-success: #0e8a4a;--wb-success-soft: #e6f6ed;--wb-warning: #a3691b;--wb-warning-soft: #fdf3df;--wb-danger: #b91c1c;--wb-danger-soft: #fdecec;--wb-info: #1f5fbf;--wb-info-soft: #e6effc;--wb-ring: #ea2804;--wb-ring-soft: rgba(234, 40, 4, .18);--wb-shadow-raised: 0 1px 0 rgba(16,17,19,.04), 0 1px 2px rgba(16,17,19,.04);--wb-shadow-popover: 0 8px 24px rgba(16,17,19,.1), 0 1px 0 rgba(16,17,19,.04);--wb-shadow-modal: 0 24px 64px rgba(16,17,19,.18), 0 1px 0 rgba(16,17,19,.06);--wb-shadow-toolbar: 0 4px 8px rgba(0, 0, 0, .04);--int-bg: #f0f4ff;--int-surface: #ffffff;--int-surface-soft: #eef2fa;--int-accent: #1a8cff;--int-accent-2: #16c47f;--int-accent-soft: rgba(26, 140, 255, .1);--int-accent-hover: #0a7dee;--int-border: #dde3f0;--int-border-strong: #c5cfe0;--int-text: #101113;--int-text-muted: #4b4f55;--int-shadow: 0 8px 24px rgba(16, 17, 19, .08);--int-shadow-sm: 0 2px 6px rgba(16, 17, 19, .05);--int-glow: 0 0 0 1px rgba(26, 140, 255, .2), 0 12px 32px rgba(26, 140, 255, .14);--font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace}*{box-sizing:border-box}html,body{margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{font-family:var(--font-ui);font-size:15px;line-height:1.5;color:var(--wb-ink);background:var(--wb-canvas);min-height:100dvh;display:flex;flex-direction:column;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.dev-banner{background:var(--wb-warning-soft);color:var(--wb-warning);border-bottom:1px solid var(--wb-hairline);padding:10px 16px;font-size:13px;line-height:1.4}.dev-banner strong{display:inline-block;margin-right:6px}.dev-banner code{font-family:var(--font-mono);font-size:12px;background:#0000000f;padding:1px 6px;border-radius:4px}.topbar{height:60px;display:flex;align-items:center;gap:12px;padding:0 20px;padding-top:env(safe-area-inset-top);background:var(--wb-canvas);border-bottom:1px solid var(--wb-hairline);box-shadow:var(--wb-shadow-toolbar);position:sticky;top:0;z-index:100;isolation:isolate;width:100%}.topbar-side{display:flex;align-items:center}.topbar-side--left{flex-shrink:0}.topbar-side--right{margin-left:auto;justify-content:flex-end}.brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--wb-ink);text-decoration:none}.brand-mark{width:28px;height:28px;border-radius:9999px;background:var(--wb-primary);flex-shrink:0}.brand-name{font-size:20px;font-weight:700}.site-nav{display:flex;align-items:center;gap:20px;font-size:14px;font-weight:600}.site-nav a{color:var(--wb-ink);text-decoration:none}.site-nav a:hover{color:var(--wb-primary)}.site-nav-cta{height:36px;padding:0 16px;background:var(--wb-primary);color:#fff!important;border-radius:9999px;display:inline-flex;align-items:center}.site-nav-cta:hover{background:var(--wb-primary-deep)!important}@media (max-width: 720px){.site-nav a:not(.site-nav-cta){display:none}}.qr-strip{width:100%;display:flex;justify-content:center;padding:20px 20px 0;background:transparent}.qr-card{display:flex;flex-direction:row;align-items:center;gap:14px;background:transparent;border:none;padding:0}.qr-frame{padding:0;background:transparent;display:inline-block;flex-shrink:0}.qr-frame canvas{display:block;border-radius:6px}.qr-meta{text-align:left}.qr-title{margin:0 0 4px;font-size:13px;font-weight:600;color:var(--int-text);letter-spacing:.01em}.primary-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font-ui);font-size:14px;font-weight:600;line-height:1;cursor:pointer;padding:0 16px;height:36px;border-radius:8px;border:none;background:var(--wb-primary);color:var(--wb-on-primary);transition:background .12s ease;-webkit-tap-highlight-color:transparent;white-space:nowrap}.primary-btn:hover:not(:disabled){background:var(--wb-primary-deep)}.primary-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--wb-ring-soft)}.primary-btn:active:not(:disabled){background:var(--wb-primary-deep)}.primary-btn:disabled{opacity:.45;cursor:not-allowed}.primary-btn .plus{font-size:16px;font-weight:700;margin-top:-1px}.link-btn{display:inline-block;background:none;border:none;padding:0;margin:0;color:var(--wb-mute);font-family:var(--font-ui);font-size:12px;text-decoration:underline;text-underline-offset:2px;cursor:pointer;-webkit-tap-highlight-color:transparent}.link-btn:hover,.link-btn:focus-visible{color:var(--wb-primary)}.shell{flex:1;display:flex;flex-direction:column;width:100%;background:var(--int-bg);background-image:radial-gradient(900px 500px at 50% 0%,rgba(26,140,255,.09),transparent 70%),radial-gradient(600px 400px at 100% 100%,rgba(22,196,127,.07),transparent 70%);background-attachment:fixed}.content{flex:1;display:flex;flex-direction:column;width:100%;max-width:860px;margin:0 auto;padding:0 20px}.stage{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:16px 0 28px;gap:16px;min-height:60dvh;transition:background .15s ease}.stage.drag-over{background:var(--int-accent-soft)}.peer-stage{position:relative;width:100%;flex:1;min-height:200px;display:flex;align-items:center;justify-content:center}.peers-empty{text-align:center;max-width:300px;margin:0 auto;position:relative;z-index:1}.peers-empty-title{margin:0 0 4px;font-weight:600;font-size:15px;color:var(--int-text)}.peers-empty-help{margin:0;color:var(--int-text-muted);font-size:13px}.peer-stage.has-peers .peers-empty{display:none}.peer-stage:not(.has-peers) .peer-bubbles{display:none}.radar{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;opacity:1;transition:opacity .3s ease}.peer-stage.has-peers .radar{opacity:0}.radar-dot{width:12px;height:12px;border-radius:50%;background:var(--int-accent);box-shadow:0 0 20px #1a8cff66;position:absolute;bottom:-6px}.radar-ring{position:absolute;bottom:-6px;width:12px;height:12px;border-radius:50%;border:2px solid var(--int-accent);opacity:0;animation:radar-pulse 2.6s ease-out infinite}.radar-ring-2{animation-delay:.85s}.radar-ring-3{animation-delay:1.7s}@keyframes radar-pulse{0%{transform:scale(1);opacity:.5}to{transform:scale(14);opacity:0}}.peer-bubbles{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:20px 16px;justify-content:center;align-items:flex-start;width:100%;position:relative;z-index:1}.peer-bubble{--b-from: var(--int-accent);--b-to: var(--int-accent-hover);--b-ring: var(--int-accent);display:flex;flex-direction:column;align-items:center;gap:6px;width:110px;background:transparent;border:none;padding:6px 4px;cursor:pointer;font-family:var(--font-ui);color:var(--int-text);border-radius:12px;transition:transform .18s ease,background .15s ease;animation:bubble-pop .4s cubic-bezier(.34,1.56,.64,1);-webkit-tap-highlight-color:transparent}.peer-bubble:hover{transform:translateY(-3px)}.peer-bubble:active{transform:scale(.97)}.peer-bubble:focus-visible{outline:2px solid var(--wb-ring);outline-offset:4px}.peer-bubble.drag-target{background:var(--int-accent-soft);transform:translateY(-4px) scale(1.04)}.peer-bubble.drag-target .peer-avatar{box-shadow:0 0 0 4px var(--b-ring),0 12px 28px #10111329}.peer-avatar{width:76px;height:76px;border-radius:50%;background:linear-gradient(135deg,var(--b-from),var(--b-to));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:26px;color:#fff;letter-spacing:.5px;box-shadow:0 6px 16px #1011131f,inset 0 1px #fff3;position:relative;transition:box-shadow .18s ease,transform .18s ease}.peer-avatar:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--b-ring);opacity:0;transition:opacity .15s ease}.peer-bubble:hover .peer-avatar:after{opacity:.4}.peer-name{font-size:13px;font-weight:600;text-align:center;line-height:1.2;word-break:break-word;color:var(--int-text)}.peer-hint{font-size:11px;color:var(--int-text-muted);font-weight:500}.peer-bubble:hover .peer-hint{color:var(--int-accent)}@keyframes bubble-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08);opacity:1}to{transform:scale(1);opacity:1}}.peer-bubble.leaving{animation:bubble-leave .22s ease-in forwards;pointer-events:none}@keyframes bubble-leave{to{transform:scale(.4);opacity:0}}.self-block{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0 4px;position:relative;z-index:1}.device{display:flex;flex-direction:column;align-items:center;gap:8px}.device-icon{width:96px;height:96px;border-radius:20px;background:var(--int-surface);border:1px solid var(--int-border);display:flex;align-items:center;justify-content:center;color:var(--int-text);box-shadow:var(--int-shadow)}.icon{width:56px;height:auto}.device[data-kind=laptop] .icon-phone,.device[data-kind=phone] .icon-laptop{display:none}.device[data-kind=phone] .icon-phone{display:block;width:36px}.self-name-row{display:inline-flex;align-items:center;gap:6px;background:var(--int-surface);border:1px solid var(--int-border);padding:5px 12px;border-radius:9999px;font-size:13px}.self-dot{width:8px;height:8px;border-radius:50%;background:var(--int-accent-2);box-shadow:0 0 0 3px #16c47f33;animation:pulse-dot 2s ease-in-out infinite}@keyframes pulse-dot{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.65}}.self-name{font-weight:600;color:var(--int-text)}.self-sub{margin:0;color:var(--int-text-muted);font-size:12px}.room-link-tiny{margin:0;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;width:100%;max-width:460px}.room-link-tiny .muted{margin:0}.room-link-tiny input{flex:1;min-width:180px;background:var(--int-surface);border:1px solid var(--int-border);color:var(--int-text);padding:7px 12px;border-radius:8px;font-family:var(--font-mono);font-size:12px;text-align:center;outline:none;transition:border-color .12s,box-shadow .12s}.room-link-tiny input:focus{border-color:var(--int-accent);box-shadow:0 0 0 3px #1a8cff26}.muted{color:var(--int-text-muted);margin:0 0 12px}.small{font-size:12px}.transfer-log{margin:0 20px 24px;padding:16px 18px;background:var(--int-surface);border:1px solid var(--int-border);border-radius:12px;box-shadow:var(--int-shadow-sm)}.transfer-log h2{margin:0 0 10px;font-size:12px;font-weight:600;color:var(--wb-charcoal);text-transform:uppercase;letter-spacing:.06em}.transfer-log ul{list-style:none;padding:0;margin:0}.transfer-log li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--wb-hairline);font-size:13px;font-family:var(--font-mono)}.transfer-log li:last-child{border-bottom:none}.transfer-log .progress{grid-column:1 / -1;height:6px;background:var(--wb-surface-inset);border-radius:9999px;overflow:hidden}.transfer-log .progress>span{display:block;height:100%;background:var(--int-accent);width:0%;transition:width .18s ease;border-radius:9999px}.ad-slot{display:flex;align-items:center;justify-content:center}.ad-top{width:100%;padding:8px 20px;min-height:60px;background:var(--wb-canvas);border-bottom:1px solid var(--wb-hairline)}.ad-placeholder{width:100%;border:1px dashed var(--wb-stone);border-radius:8px;padding:14px 18px;text-align:center;color:var(--wb-mute);font-size:12px;background:var(--wb-surface-inset)}.ad-placeholder-top{max-width:970px;min-height:60px;display:flex;align-items:center;justify-content:center;margin:0 auto}.ad-rail{display:none}@media (min-width: 1240px){.ad-rail{display:flex;justify-content:center;align-items:flex-start;position:fixed;top:50%;transform:translateY(-50%);z-index:5;pointer-events:auto;isolation:isolate}.ad-left{left:16px}.ad-right{right:16px}.ad-rail-inner{width:160px;display:flex;flex-direction:column;gap:16px}.ad-placeholder-rail{height:600px;display:flex;align-items:center;justify-content:center}}@media (min-width: 1520px){.ad-left{left:24px}.ad-right{right:24px}.ad-rail-inner{width:300px}}.footer-note{text-align:center;color:var(--wb-mute);font-size:12px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));margin:0;background:var(--wb-canvas);border-top:1px solid var(--wb-hairline)}@media (max-width: 480px){.topbar{height:auto;min-height:52px;gap:8px;padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top))}.brand-name{display:none}.qr-strip{padding:14px 14px 0}.qr-card{gap:10px}.qr-frame canvas{width:72px;height:72px}.qr-title{font-size:12px}.link-btn{font-size:11px}.primary-btn{gap:0;padding:0;width:36px;height:36px;border-radius:8px}.primary-btn span:not(.plus){display:none}.primary-btn .plus{font-size:20px}.device-icon{width:80px;height:80px;border-radius:16px}.device[data-kind=laptop] .icon{width:46px}.device[data-kind=phone] .icon{width:30px}.stage{padding:16px 14px 20px}.peer-bubble{width:92px}.peer-avatar{width:64px;height:64px;font-size:22px}.room-link-tiny input{font-size:11px}}@media (min-width: 760px){.topbar{padding:0 28px}.qr-strip{padding:24px 28px 0}.qr-frame canvas{width:140px;height:140px}.device-icon{width:110px;height:110px;border-radius:24px}.device[data-kind=laptop] .icon{width:64px}.device[data-kind=phone] .icon{width:42px}.peer-bubble{width:120px}.peer-avatar{width:84px;height:84px;font-size:28px}.stage{padding:20px 0 36px}}@media (hover: none){.peer-bubble:hover{transform:none}.peer-bubble:hover .peer-avatar:after{opacity:0}.peer-bubble:hover .peer-hint{color:var(--int-text-muted)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}