.wils-showcase{--wils-radius:22px;--wils-ratio:16/9;--wils-bezel:#0c0d0d;width:100%;max-width:100%;margin:0;padding:0;color:#202321;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-sizing:border-box}.wils-showcase *{box-sizing:border-box}.wils-stage{position:relative;display:block;width:100%;min-height:var(--wils-stage-height,0px);padding:0;overflow:visible;transition:min-height .18s ease}.wils-device-shell{position:relative;display:block;width:100%;max-width:100%;min-height:0;margin:0 auto}.wils-screen-frame{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border-radius:var(--wils-radius);background:#0b0c0c;isolation:isolate}.wils-shadow--none .wils-screen-frame{box-shadow:none}.wils-shadow--soft .wils-screen-frame{box-shadow:0 20px 55px rgba(16,18,17,.15),0 3px 12px rgba(16,18,17,.07)}.wils-shadow--medium .wils-screen-frame{box-shadow:0 28px 75px rgba(16,18,17,.22),0 6px 18px rgba(16,18,17,.10)}.wils-shadow--strong .wils-screen-frame{box-shadow:0 38px 100px rgba(16,18,17,.3),0 12px 30px rgba(16,18,17,.14)}
.wils-scroll-viewport{position:relative;width:100%;aspect-ratio:var(--wils-ratio);min-height:0;overflow-x:hidden;overflow-y:auto;background:#fff;outline:none;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y;-webkit-overflow-scrolling:touch}.wils-scroll-viewport::-webkit-scrollbar{display:none}.wils-screenshot{display:block;width:100%;height:auto;max-width:none;margin:0;padding:0;user-select:none;-webkit-user-drag:none}.wils-glass-reflection{position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(117deg,rgba(255,255,255,.12),rgba(255,255,255,0) 22%,rgba(255,255,255,0) 72%,rgba(255,255,255,.04));mix-blend-mode:screen}
.wils-browser-toolbar{position:relative;z-index:4;display:flex;height:46px;align-items:center;gap:clamp(9px,1.7vw,20px);padding:0 clamp(11px,1.8vw,18px);border-bottom:1px solid rgba(31,34,32,.08);background:#f5f5f2}.wils-browser-toolbar.is-compact{height:38px}.wils-browser-controls{display:flex;flex:none;gap:6px}.wils-browser-controls span{width:8px;height:8px;border-radius:50%;background:#bfc2bd}.wils-address-bar{display:flex;min-width:0;flex:1;align-items:center;justify-content:center;gap:7px;height:28px;padding:0 11px;border:1px solid rgba(31,34,32,.07);border-radius:999px;background:#e9ebe7;color:#646a64;font-size:10px}.wils-address-bar span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wils-lock{position:relative;width:7px;height:6px;border:1px solid currentColor;border-radius:2px;opacity:.48;flex:0 0 auto}.wils-lock:before{content:"";position:absolute;left:1px;right:1px;top:-5px;height:5px;border:1px solid currentColor;border-bottom:0;border-radius:5px 5px 0 0}.wils-project-label{overflow:hidden;flex:0 1 150px;color:#8d928c;font-size:8px;letter-spacing:.07em;text-align:right;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.wils-frame--browser-minimal .wils-screen-frame{border:1px solid rgba(31,34,32,.11)}.wils-frame--browser-editorial .wils-screen-frame{border:1px solid rgba(31,34,32,.12);border-radius:calc(var(--wils-radius)*.72)}.wils-frame--browser-editorial .wils-browser-toolbar{height:40px;background:#fff}.wils-frame--browser-editorial .wils-browser-controls{display:none}.wils-frame--browser-editorial .wils-address-bar{justify-content:flex-start;border:0;background:transparent;padding:0;color:#252826;letter-spacing:.04em}.wils-frame--browser-dark .wils-screen-frame{border:1px solid #222523;background:#121413}.wils-frame--browser-dark .wils-browser-toolbar{background:#1b1e1c;border-bottom-color:rgba(255,255,255,.08)}.wils-frame--browser-dark .wils-address-bar{border-color:rgba(255,255,255,.07);background:#292c2a;color:#ced2cd}.wils-frame--browser-dark .wils-project-label{color:#818781}.wils-frame--browser-borderless .wils-screen-frame{border:0}.wils-frame--browser-borderless .wils-browser-toolbar{display:none}
/* Professional screen-only desktop frames: no monitor stand or laptop base. */
.wils-family--screen .wils-device-shell{max-width:min(1380px,100%)}.wils-family--screen .wils-screen-frame{background:#080909}.wils-frame--screen-studio .wils-device-shell{padding:clamp(7px,1.1vw,15px);border-radius:calc(var(--wils-radius) + 7px);background:linear-gradient(145deg,#232625,#070808);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(255,255,255,.03)}.wils-frame--screen-studio .wils-screen-frame{border:1px solid rgba(255,255,255,.07);border-radius:var(--wils-radius)}.wils-frame--screen-edge .wils-device-shell{padding:0}.wils-frame--screen-edge .wils-screen-frame{border:1px solid rgba(15,17,16,.14);background:#070808}
/* Clean black tablet shells restored from the strongest v3 geometry. */
.wils-family--tablet .wils-device-shell{max-width:min(760px,100%);padding:3%}.wils-family--tablet .wils-screen-frame{border:clamp(8px,1.5vw,18px) solid var(--wils-bezel);border-radius:clamp(22px,3.8vw,40px);background:#090a0a}.wils-family--tablet .wils-scroll-viewport{--wils-ratio:10/16}.wils-frame--tablet-edge .wils-screen-frame{border-width:clamp(5px,.9vw,11px)}.wils-frame--tablet-studio .wils-device-shell{padding:2.4%}.wils-frame--tablet-studio .wils-screen-frame{border-color:#090a0a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 28px 68px rgba(0,0,0,.22)}.wils-frame--tablet-soft .wils-screen-frame{border-width:clamp(12px,2vw,22px);border-radius:clamp(26px,4.5vw,46px)}.wils-frame--tablet-compact .wils-device-shell{max-width:min(620px,100%)}
/* Clean black phone shells restored from v3. */
.wils-family--phone .wils-device-shell{max-width:min(430px,100%);padding:3%}.wils-family--phone .wils-screen-frame{border:clamp(7px,2.2vw,14px) solid var(--wils-bezel);border-radius:clamp(30px,8vw,52px);background:#090a0a}.wils-family--phone .wils-scroll-viewport{--wils-ratio:9/19}.wils-frame--phone-edge .wils-screen-frame{border-width:clamp(5px,1.4vw,9px)}.wils-frame--phone-studio .wils-device-shell{padding:2.4%}.wils-frame--phone-studio .wils-screen-frame{border-color:#090a0a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 72px rgba(0,0,0,.24)}.wils-frame--phone-rounded .wils-screen-frame{border-width:clamp(9px,2.8vw,16px);border-radius:clamp(34px,9vw,60px)}.wils-frame--phone-compact .wils-device-shell{max-width:min(350px,100%)}
.wils-showcase[data-active-view="tablet_landscape"].wils-family--tablet .wils-device-shell{max-width:min(1050px,100%)}.wils-showcase[data-active-view="tablet_landscape"] .wils-scroll-viewport{aspect-ratio:16/10}.wils-showcase[data-active-view="tablet_portrait"] .wils-scroll-viewport{aspect-ratio:10/16}.wils-showcase[data-active-view="phone_landscape"].wils-family--phone .wils-device-shell{max-width:min(820px,100%)}.wils-showcase[data-active-view="phone_landscape"] .wils-scroll-viewport{aspect-ratio:19/9}.wils-showcase[data-active-view="phone_portrait"] .wils-scroll-viewport{aspect-ratio:9/19}
.wils-finish--graphite{--wils-bezel:#111312}.wils-finish--silver{--wils-bezel:#202321}.wils-finish--black{--wils-bezel:#050605}.wils-finish--white{--wils-bezel:#e8ebe8}.wils-finish--warm{--wils-bezel:#24211e}
.wils-frame--none .wils-screen-frame{overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}.wils-frame--none .wils-browser-toolbar,.wils-frame--none .wils-glass-reflection{display:none}
/* Working device + orientation filter. */
.wils-filter-bar{display:flex;justify-content:center;align-items:center;gap:9px;margin:0 0 16px;flex-wrap:wrap}.wils-device-filter,.wils-orientation-filter{display:inline-flex;gap:3px;padding:3px;border:1px solid rgba(40,44,42,.12);border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 8px 22px rgba(0,0,0,.055)}.wils-filter-button,.wils-orientation-button{appearance:none;border:0;background:transparent;color:#505651;border-radius:999px;padding:9px 14px;font:700 10px/1 system-ui,sans-serif;letter-spacing:.02em;cursor:pointer;transition:.18s ease}.wils-orientation-button{width:34px;padding:9px 0}.wils-filter-button:hover,.wils-filter-button.is-active,.wils-orientation-button:hover,.wils-orientation-button.is-active{background:#202321;color:#fff}.wils-orientation-button:disabled{display:none}.wils-orientation-filter.is-hidden{display:none}
/* Mouse-only scroll cue; visible every time the viewport returns to top. */
.wils-scroll-cue{position:sticky;left:50%;bottom:16px;z-index:8;width:38px;height:62px;margin:-72px 0 10px;transform:translateX(-50%);pointer-events:none;opacity:0;transition:opacity .2s ease;filter:drop-shadow(0 4px 10px rgba(0,0,0,.22))}.wils-showcase.is-at-top .wils-scroll-cue{opacity:1}.wils-mouse{display:block;position:relative;width:23px;height:35px;margin:0 auto;border:2px solid rgba(255,255,255,.96);border-radius:14px;background:rgba(15,17,16,.52)}.wils-mouse-wheel{position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:3px;background:#fff;transform:translateX(-50%);animation:wilsWheel 1.35s ease-in-out infinite}.wils-cue-trail{display:flex;flex-direction:column;align-items:center;gap:1px;margin-top:4px}.wils-cue-trail i{display:block;width:5px;height:5px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(45deg);animation:wilsTrail 1.35s ease-in-out infinite}.wils-cue-trail i:nth-child(2){animation-delay:.14s}.wils-cue-trail i:nth-child(3){animation-delay:.28s}@keyframes wilsWheel{0%{opacity:0;transform:translate(-50%,0)}25%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(-50%,11px)}}@keyframes wilsTrail{0%,100%{opacity:.2;transform:translateY(-2px) rotate(45deg)}50%{opacity:1;transform:translateY(2px) rotate(45deg)}}
.wils-case-link{display:inline-flex;align-items:center;gap:7px;margin-top:14px;color:inherit;font-size:13px;font-weight:650;text-decoration:none}.wils-toolbar-slot:empty{display:none}
@media(max-width:767px){.wils-browser-toolbar{height:40px;gap:8px;padding-inline:10px}.wils-browser-toolbar.is-compact{height:34px}.wils-browser-controls{gap:5px}.wils-browser-controls span{width:7px;height:7px}.wils-address-bar{height:26px;font-size:9px}.wils-project-label{display:none}.wils-filter-button{padding:8px 11px;font-size:9px}.wils-scroll-cue{bottom:11px;scale:.86}}
@media(prefers-reduced-motion:reduce){.wils-filter-button,.wils-orientation-button,.wils-scroll-cue{transition:none}.wils-mouse-wheel,.wils-cue-trail i{animation:none}.wils-mouse-wheel{opacity:1;top:10px}}


/* v4.4: landscape-safe sizing and page-builder containment. */
.wils-showcase{overflow:visible;contain:layout style}
.wils-showcase .wils-stage,.wils-showcase .wils-device-shell,.wils-showcase .wils-screen-frame{overflow:visible}
.wils-showcase .wils-screen-frame{overflow:hidden}
.wils-showcase[data-active-view="desktop_landscape"] .wils-device-shell{
  max-width:min(1380px,100%,calc((100dvh - 150px) * 16 / 9));
}
.wils-showcase[data-active-view="tablet_landscape"].wils-family--tablet .wils-device-shell{
  max-width:min(1050px,100%,calc((100dvh - 150px) * 16 / 10));
}
.wils-showcase[data-active-view="phone_landscape"].wils-family--phone .wils-device-shell{
  max-width:min(820px,100%,calc((100dvh - 150px) * 19 / 9));
}
@supports not (height:100dvh){
  .wils-showcase[data-active-view="desktop_landscape"] .wils-device-shell{max-width:min(1380px,100%,calc((100vh - 150px) * 16 / 9))}
  .wils-showcase[data-active-view="tablet_landscape"].wils-family--tablet .wils-device-shell{max-width:min(1050px,100%,calc((100vh - 150px) * 16 / 10))}
  .wils-showcase[data-active-view="phone_landscape"].wils-family--phone .wils-device-shell{max-width:min(820px,100%,calc((100vh - 150px) * 19 / 9))}
}
@media (orientation:landscape) and (max-height:650px){
  .wils-filter-bar{margin-bottom:9px}
  .wils-filter-button{padding:7px 11px}
  .wils-browser-toolbar{height:34px;padding-inline:9px}
  .wils-browser-toolbar.is-compact{height:31px}
  .wils-family--tablet .wils-device-shell,.wils-family--phone .wils-device-shell{padding:1.4%}
  .wils-showcase[data-active-view="desktop_landscape"] .wils-device-shell{max-width:min(1380px,100%,calc((100dvh - 96px) * 16 / 9))}
  .wils-showcase[data-active-view="tablet_landscape"].wils-family--tablet .wils-device-shell{max-width:min(1050px,100%,calc((100dvh - 96px) * 16 / 10))}
  .wils-showcase[data-active-view="phone_landscape"].wils-family--phone .wils-device-shell{max-width:min(820px,100%,calc((100dvh - 96px) * 19 / 9))}
}

/* v4.5: URL / prototype source support. */
.wils-embed-frame{display:block;width:100%;height:100%;min-height:100%;border:0;margin:0;padding:0;background:#fff}
.wils-embed-frame[hidden],.wils-screenshot[hidden]{display:none!important}
.wils-showcase.is-embed-source .wils-scroll-viewport{overflow:hidden;touch-action:auto;-webkit-overflow-scrolling:auto}
.wils-showcase.is-embed-source .wils-scroll-cue{display:none}
