.cascade-extension-demo-component .browser{background:var(--white);border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(var(--shadow),.4);height:380px;display:flex;flex-direction:column}.cascade-extension-demo-component .browser .bar{background:var(--toggle-bg);padding:11px 14px;display:flex;align-items:center;gap:7px}.cascade-extension-demo-component .browser .dotwin{width:11px;height:11px;border-radius:var(--radius-circle);background:var(--chrome-dot)}.cascade-extension-demo-component .browser .url{flex:1;margin-left:10px;background:var(--white);border-radius:5px;font-size:11px;color:var(--chrome-url-fg);padding:5px 11px;border:1px solid var(--chrome-url-line)}.cascade-extension-demo-component .browser .tabstrip{display:flex;align-items:flex-end;gap:2px;padding:8px 10px 0;background:var(--toggle-bg)}.cascade-extension-demo-component .browser .tab{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:8px 8px 0 0;font-size:11px;color:var(--muted);background:rgba(var(--white-rgb),.5);max-width:160px}.cascade-extension-demo-component .browser .tab.active{background:var(--white);color:var(--ink)}.cascade-extension-demo-component .browser .tab-dot{width:7px;height:7px;border-radius:var(--radius-circle);background:var(--filigree-d);flex-shrink:0}.cascade-extension-demo-component .browser .tab.active .tab-dot{background:var(--chrome-dot)}.cascade-extension-demo-component .browser .tab-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cascade-extension-demo-component .browser .tab-close{width:12px;height:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;color:var(--chrome-url-fg)}.cascade-extension-demo-component .browser .tabstrip+.bar{background:var(--white);border-bottom:1px solid var(--line)}.cascade-extension-demo-component .browser .nav-btn{width:14px;height:14px;flex-shrink:0;position:relative}.cascade-extension-demo-component .browser .nav-btn::before{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;border-top:1.5px solid var(--chrome-url-fg);border-right:1.5px solid var(--chrome-url-fg)}.cascade-extension-demo-component .browser .nav-back::before{transform:translate(-30%,-50%)rotate(-135deg)}.cascade-extension-demo-component .browser .nav-fwd::before{transform:translate(-70%,-50%)rotate(45deg)}.cascade-extension-demo-component .hero-ba-compare{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:center}.cascade-extension-demo-component .browser.browser-shot{height:auto;display:block;border-color:rgba(var(--white-rgb),.2);box-shadow:0 44px 80px -30px rgba(var(--black-rgb),.5)}.cascade-extension-demo-component .browser-shot .tab{width:170px;max-width:170px}.cascade-extension-demo-component .browser-shot-img{display:block;width:100%;height:auto}.cascade-extension-demo-component .browser-shot-viewport{--scroll-end:-78.39%;--scroll-duration:42s;position:relative;width:100%;aspect-ratio:1552/1161;overflow:hidden;background:var(--white)}.cascade-extension-demo-component .browser-shot-viewport .browser-shot-img{position:absolute;top:0;left:0;animation:cascade-extension-shot-scroll var(--scroll-duration)ease-in-out infinite;will-change:transform}@keyframes cascade-extension-shot-scroll{0%,6%{transform:translateY(0)}85%,92%{transform:translateY(var(--scroll-end))}98%,100%{transform:translateY(0)}}.cascade-extension-demo-component .browser-ext-icon{display:flex;flex-shrink:0;border-radius:var(--radius-circle)}.cascade-extension-demo-component .browser-ext-icon img{width:20px;height:20px;display:block}.cascade-extension-demo-component .browser-ext-icon.is-off img{filter:grayscale(1);opacity:.55}.cascade-extension-demo-component .browser-ext-icon.is-on{padding:2px;background:rgba(var(--accent-rgb),.18);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.55)}.cascade-extension-demo-component .hero-ba-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:flex;align-items:center;gap:10px;padding:8px 20px 8px 8px;background:var(--action);border-radius:999px;box-shadow:0 16px 36px -10px rgba(var(--black-rgb),.45),0 0 0 1px rgba(var(--white-rgb),.18)}.cascade-extension-demo-component .hero-ba-badge-icon{width:56px;height:56px;display:block}.cascade-extension-demo-component .hero-ba-badge-arrow{width:60px;height:34px;display:block;overflow:visible;fill:var(--white)}@media(prefers-reduced-motion:reduce){.cascade-extension-demo-component .browser-shot-viewport .browser-shot-img{animation:none}}@media(max-width:980px){.cascade-extension-demo-component .hero-ba-compare{grid-template-columns:1fr;gap:40px}.cascade-extension-demo-component .browser-shot .tab{width:auto;max-width:160px}.cascade-extension-demo-component .hero-ba-badge{padding:6px 16px 6px 6px;gap:8px}.cascade-extension-demo-component .hero-ba-badge-icon{width:44px;height:44px}.cascade-extension-demo-component .hero-ba-badge-arrow{width:44px;height:25px;transform:rotate(90deg)}}.cascade-component.cascade-extension-demo-component{width:100%;min-width:0;line-height:normal;letter-spacing:normal}