/* One editor/preview surface that becomes the customer's storefront inside
   the tracked Blender monitor. The page itself scrolls with the outer story. */
#officeScreen .wl-shell{position:absolute;inset:0;overflow:hidden;background:#f6f5f2;color:#17171a}
#officeScreen .wl-admin-head{position:absolute;inset:0 0 auto;height:62px;background:#17171a;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 29px;z-index:3;opacity:var(--wl-admin-opacity,1);transform:translateY(var(--wl-admin-y,0px))}
#officeScreen .wl-admin-head>strong{font-size:29px;letter-spacing:-.085em;line-height:1}
#officeScreen .wl-admin-head>strong span{color:#d7ff3a}
#officeScreen .wl-admin-head>div{display:flex;align-items:center;gap:22px;font-size:11px;letter-spacing:.04em;font-weight:700}
#officeScreen .wl-admin-head small{font-size:11px;font-weight:600;color:#b5b6ba}
/* Sequential swap (as .ticket-holder-*): the old word is gone before the new one appears. */
#officeScreen .wl-admin-head #wlStatePreview{opacity:calc(1 - 2 * var(--wl-published,0))}
#officeScreen .wl-admin-head #wlStateLive{position:absolute;right:29px;opacity:calc(2 * var(--wl-published,0) - 1);color:#d7ff3a}
#officeScreen .wl-controls{position:absolute;top:62px;bottom:0;left:0;width:280px;background:#f6f5f2;border-right:1px solid #dad8d6;padding:29px 24px;z-index:2;opacity:var(--wl-controls-opacity,1);transform:translateX(var(--wl-controls-x,0px))}
#officeScreen .wl-kicker{margin:0 0 10px;font-size:10px;font-weight:700;letter-spacing:.08em;color:#717179}
#officeScreen .wl-controls h2{font-size:30px;line-height:1.05;letter-spacing:-.045em;margin:0 0 28px;max-width:215px}
#officeScreen .wl-design-controls{opacity:var(--wl-design-opacity,1);transform:translateY(var(--wl-design-y,0px))}
#officeScreen .wl-design-controls>span,#officeScreen .wl-brand-controls>label{display:block;font-size:10px;letter-spacing:.055em;font-weight:700;color:#6d6a70;margin-bottom:13px}
#officeScreen .wl-template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
#officeScreen .wl-template{height:106px;background:#fff;border:1px solid #d0ccd1;position:relative;overflow:hidden;padding:5px}
#officeScreen .wl-template::before{content:"";position:absolute;top:5px;left:5px;right:5px;height:53px;background:linear-gradient(#1f103d24,#1f103d24),url('/assets/boxoffice/img/festival-1-hero.webp') center/cover}
#officeScreen .wl-template:nth-child(2)::before{background-position:70% center;filter:hue-rotate(24deg)}
#officeScreen .wl-template:nth-child(3)::before{background-position:25% center;filter:saturate(.6)}
#officeScreen .wl-template i{position:absolute;left:5px;right:5px;top:63px;height:3px;background:#411743;box-shadow:0 10px 0 #d9cdd7,0 18px 0 #ece6eb}
#officeScreen .wl-template b{position:absolute;left:5px;bottom:4px;font-size:6px;line-height:1}
#officeScreen .wl-template-selected{outline:3px solid #222;outline-offset:1px}
#officeScreen .wl-template-selected::after{content:"✓";position:absolute;right:4px;top:4px;background:#d7ff3a;color:#111;font-size:10px;font-weight:700;width:16px;height:16px;display:grid;place-items:center}
#officeScreen .wl-brand-controls{position:absolute;top:165px;left:24px;right:24px;opacity:var(--wl-brand-opacity,0);transform:translateY(var(--wl-brand-y,16px))}
#officeScreen .wl-brand-controls>strong{display:block;background:#fff;border:1px solid #ccc9cd;padding:13px 12px;font-size:17px;letter-spacing:-.03em;margin-bottom:29px}
#officeScreen .wl-swatches{display:flex;align-items:center;gap:14px;margin-top:15px}
#officeScreen .wl-swatches i{display:block;width:27px;height:27px;background:#db3384;border:1px solid #0002}
#officeScreen .wl-swatches i:first-child{outline:2px solid #17171a;outline-offset:4px}
#officeScreen .wl-swatches i:nth-child(2){background:#24103d}
#officeScreen .wl-swatches i:nth-child(3){background:#f2a85e}
#officeScreen .wl-publish{position:absolute;left:24px;right:24px;bottom:25px;height:47px;background:#17171a;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;opacity:var(--wl-publish-opacity,0)}
#officeScreen .wl-publish span{opacity:calc(1 - 2 * var(--wl-published,0))}
#officeScreen .wl-publish b{position:absolute;opacity:calc(2 * var(--wl-published,0) - 1);font-size:13px;color:#d7ff3a}
#officeScreen .wl-viewport{position:absolute;top:var(--wl-preview-top,62px);left:var(--wl-preview-left,280px);right:0;bottom:0;background:#241035;overflow:hidden;z-index:1}
#officeScreen .wl-page{position:absolute;top:0;left:0;right:0;height:938px;transform:translateY(var(--wl-scroll-y,0px));will-change:transform}
#officeScreen .wl-store-head{height:58px;background:#28123f;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 25px}
#officeScreen .wl-store-head strong{font-size:20px;letter-spacing:-.045em;white-space:nowrap}
#officeScreen .wl-store-head nav{display:flex;align-items:center;gap:21px;font-size:10px;font-weight:700;white-space:nowrap}
#officeScreen .wl-store-head nav span:last-child{color:#f888b2}
#officeScreen .wl-store-hero{height:360px;position:relative;overflow:hidden;background:linear-gradient(90deg,#200d3cc9,#200d3c1a 68%),url('/assets/boxoffice/img/festival-1-hero.webp') center/cover;color:#fff;padding:29px 30px}
#officeScreen .wl-store-hero>span{position:relative;z-index:1;font-size:11px;font-weight:800;letter-spacing:.08em}
#officeScreen .wl-store-hero>strong{position:absolute;z-index:1;left:30px;bottom:52px;font-size:67px;line-height:.84;letter-spacing:-.065em}
#officeScreen .wl-hero-line{position:absolute;left:30px;right:30px;bottom:24px;height:3px;background:linear-gradient(90deg,#f33391 0 28%,#ff8c5c 28% 53%,#27bde0 53% 76%,#d7ff3a 76%)}
#officeScreen .wl-experience{height:200px;background:#f5dce7;color:#321b39;padding:29px 31px;position:relative;overflow:hidden}
#officeScreen .wl-experience p,#officeScreen .wl-tickets p{font-size:10px;letter-spacing:.075em;font-weight:800;margin:0 0 19px}
#officeScreen .wl-experience h3{font-size:46px;max-width:380px;line-height:.92;margin:0;letter-spacing:-.055em}
#officeScreen .wl-experience-bars{position:absolute;right:-40px;top:17px;width:230px;height:180px;transform:rotate(-20deg)}
#officeScreen .wl-experience-bars i{position:absolute;width:26px;height:230px;background:#e43c91;left:28px;top:-20px}
#officeScreen .wl-experience-bars i:nth-child(2){left:94px;background:#ff9c62}
#officeScreen .wl-experience-bars i:nth-child(3){left:160px;background:#25bed7}
#officeScreen .wl-tickets{height:320px;background:#f8f5f2;color:#28192f;padding:30px 31px}
#officeScreen .wl-tickets h3{font-size:45px;line-height:.95;letter-spacing:-.055em;margin:0 0 32px}
#officeScreen .wl-offer{min-height:96px;background:#fff;border:1px solid #d8d3d7;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:18px 20px}
#officeScreen .wl-offer>div{display:flex;flex-direction:column;gap:7px}
#officeScreen .wl-offer small{font-size:10px;color:#716c73;font-weight:700}
#officeScreen .wl-offer strong{font-size:21px;letter-spacing:-.035em}
#officeScreen .wl-offer>span{background:#28123f;color:#fff;padding:14px 15px;font-size:12px;font-weight:700;white-space:nowrap}