/* Full-size real workbench demonstration immediately after the capability cards. */
#experience.wt-tour { padding-top: 64px; }
.we-demo { max-width: 1300px; margin: 0 auto 110px; scroll-margin-top: 100px; }
.we-demo-stage { position: relative; padding: 48px 8.4% 50px; border-radius: 4px; background: #e5e7ed url('/assets/landing-extraction-landscape.png') center 54% / cover no-repeat; }
.we-demo-window { position: relative; inset: auto; width: 100%; max-width: none; max-height: none; margin: 0; padding: 0; color: inherit; overflow: hidden; border: 1px solid #bfc4c3; border-radius: 10px; background: #f5f5ee; box-shadow: 0 20px 44px #30383a30,0 2px 8px #30383a0d; }
.we-demo-titlebar { position: relative; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0 15px; border-bottom: 1px solid #dddfda; background: #f1f2ef; color: #727771; }
.we-demo-titlebar h2 { font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0; }
.we-window-controls { position: absolute; left: 12px; display: flex; align-items: center; gap: 6px; }
.we-window-controls i { width: 9px; height: 9px; border-radius: 50%; background: #c9cbc7; }
.we-mode { position: absolute; right: 12px; font-size: 10px; color: #92978e; }
#we-extraction-frame { display: block; width: 100%; height: 650px; border: 0; background: #f5f5ee; color-scheme: light; }
#we-extraction-frame { scroll-margin-top:98px; }
.we-demo-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; min-height: 49px; color: #444c50; }
.we-demo-controls p { font-size: 12px; line-height: 1.6; }
.we-demo-controls > div { display: flex; align-items: center; gap: 8px; flex: none; }
.we-demo-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 6px 12px; border: 1px solid #ffffff90; border-radius: 18px; background: #ffffffc7; color: #52585b; font-size: 11px; line-height: 1.4; backdrop-filter: blur(10px); }
.we-demo-controls button:hover { background: #fff; color: #262d31; }
.we-demo-controls button:disabled { opacity: .5; }
.we-demo-controls .icon { width: 13px; height: 13px; }
.we-demo-controls #we-demo-reset { width: auto; padding: 8px 12px; }
.we-demo-controls #we-demo-reset .icon { width: 16px; height: 16px; }
/* Later examples share the same cool, restrained palette while they await their turn. */
.wt-batch-scene { background: #e1e5ec; }
.wt-library-scene { background: #e8e5ee; }
.wt-follow-scene { background: #e0e8e8; }
.wt-agent-scene { background: #e1e4eb; }
@media(min-width:1600px) { #we-extraction-frame { height: 690px; } }
@media(max-width:900px) { .we-demo-stage { padding: 38px 7% 16px; }.we-demo { margin-bottom: 60px; }#we-extraction-frame { height: 665px; }.we-demo-controls { align-items: flex-start; }.we-demo-controls p { max-width: 300px; } }
@media(max-width:600px) { #experience.wt-tour { padding-top: 30px; }.we-demo { margin-bottom: 40px; }.we-demo-stage { padding: 24px 14px 12px; }.we-demo-titlebar { height: 30px; }.we-demo-titlebar h2 { font-size: 10px; }.we-window-controls { left: 9px; gap: 4px; }.we-window-controls i { width: 6px; height: 6px; }.we-mode { right: 8px; font-size: 9px; }#we-extraction-frame { height: 660px; }.we-demo-controls { flex-direction: column; align-items: flex-start; gap: 9px; padding: 11px 2px 0; }.we-demo-controls p { font-size: 10px; }.we-demo-controls > div { width: 100%; }.we-demo-controls button { min-height: 38px; font-size: 11px; }.we-demo-controls #we-demo-reset { margin-left: auto; height: 38px; width: auto; } }

/* Only the small reset affordance remains, like the reference composition. */
.we-demo-controls { position: absolute; right: 28px; bottom: 26px; min-height: 0; padding: 0; }
.we-demo-controls p { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.we-demo-controls #we-demo-reset { display: grid; place-items: center; width: 33px; height: 33px; min-height: 33px; padding: 8px; border-radius: 50%; border: 0; background: #f8f8f3e8; }
.we-demo-controls #we-demo-reset img { opacity: .63; }
.we-demo-controls #we-demo-reset:hover { background: #fff; }
.we-demo-controls #we-demo-reset:hover img { opacity: 1; }
@media(max-width:600px) { .we-demo-stage { padding-bottom: 57px; }.we-demo-controls { right: 17px; bottom: 14px; }.we-demo-controls > div { width: auto; } }