/* ID: WBT-0268 / v76 / 2026-11-03 — WEBOT presentation room. */
.studio-preview--workspace{border:1px solid #ffffff26;background:#071c16;box-shadow:0 30px 140px #0008;color:#f7fbf6;border-radius:20px}
.studio-preview--workspace::backdrop{background:#07150fbb;backdrop-filter:blur(12px)}
.studio-preview--workspace .studio-preview__bar{grid-template-columns:minmax(125px,1fr) auto auto auto;gap:12px;padding:13px 20px;background:#0c211b;border:0;border-bottom:1px solid #ffffff12}
.studio-preview--workspace .studio-preview__bar h2{font-size:13px;font-weight:600;line-height:1.5;color:#f2f7ef;letter-spacing:.01em}
.studio-preview--workspace .studio-preview__bar h2:before{content:'WEBOT WEB / LP';display:block;margin-bottom:2px;font-family:Arial,sans-serif;font-size:9px;letter-spacing:.18em;color:#b3c6b6;font-weight:500}
.studio-preview--workspace .studio-preview__sizes{background:#071711;border:1px solid #ffffff16;border-radius:12px;padding:4px;gap:3px}
.studio-preview--workspace .studio-preview__sizes button{display:flex;align-items:center;justify-content:center;gap:7px;border-radius:8px;color:#a8bbb0;min-height:36px;padding:7px 12px;font-size:11px;font-weight:500;line-height:1.4;white-space:nowrap}
.studio-preview--workspace .studio-preview__sizes button svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.studio-preview--workspace .studio-preview__sizes button[aria-pressed=true]{background:#d8efbc;color:#18351e;box-shadow:0 1px 3px #0002;font-weight:700}
.studio-preview--workspace .studio-preview__bar>.bp-sales-go{border-radius:9px;background:#d8efbc;color:#15351f;padding:10px 15px;min-height:40px;font-size:11px}
.studio-preview--workspace .studio-preview__bar>[data-preview-close]{border:1px solid #ffffff28;background:transparent;color:#f2f7ef;border-radius:9px;min-width:50px;min-height:40px;padding:8px 12px;font-weight:500;font-size:11px}
.studio-preview--workspace .studio-preview__bar>[data-preview-close]:hover{background:#ffffff13}
.studio-preview--workspace .studio-preview__sizes button:hover:not([aria-pressed=true]){background:#ffffff0d;color:white}
.studio-preview--workspace button:focus-visible{outline:2px solid #c8f4a0;outline-offset:3px}
.studio-preview--workspace .studio-editor-shell{grid-template-columns:264px minmax(0,1fr)}
.studio-preview--workspace .studio-editor-sidebar{background:#fafbf8;border-right:1px solid #0d22151a;color:#1b3025}
.studio-preview--workspace .studio-editor-tabs{background:#edf1e9;padding:7px 8px 0;border-color:#dce3d7}
.studio-preview--workspace .studio-editor-tabs button{font-size:11px;font-weight:600;min-height:43px;padding:9px 3px;border-radius:5px 5px 0 0;border-bottom-width:2px}
.studio-preview--workspace .studio-editor-tabs [aria-selected=true]{background:#fafbf8;border-bottom-color:#208651}
.studio-preview--workspace .studio-editor-panel{padding:20px 16px}
.studio-preview--workspace .studio-editor-panel input:not([type=checkbox]):not([type=radio]),.studio-preview--workspace .studio-editor-panel textarea,.studio-preview--workspace .studio-editor-panel select{border:1px solid #c9d2c6;border-radius:7px;font-size:14px;line-height:1.7;padding:10px 11px;box-shadow:0 1px 2px #15281a03}
.studio-preview--workspace .studio-editor-panel label{font-size:11px;color:#425646}
.studio-preview--workspace .studio-live-hint{border:0;border-left:2px solid #8aad77;background:#edf3e6;padding:12px;font-size:10px;line-height:1.9}
.studio-preview--workspace .studio-editor-apply{background:#f5f7f1;border-color:#dce3d7;padding:12px 16px;box-shadow:none}
.studio-preview--workspace .studio-editor-apply .inner-btn{border-radius:8px;min-height:40px;font-size:11px}
.studio-preview--workspace .studio-editor-reset{font-size:10px;min-height:28px}
.studio-preview--workspace .studio-editor-canvas{position:relative;isolation:isolate;padding:74px 22px 106px;background:#09261e;background-image:radial-gradient(ellipse at 82% 6%,#7eae6c44,transparent 49%),radial-gradient(ellipse at 17% 70%,#28705744,transparent 58%),linear-gradient(135deg,#143f2c,#08271f 58%,#0c3025);background-size:auto}
.studio-preview--workspace .studio-editor-canvas:before{content:'';position:absolute;z-index:0;width:115%;height:85%;left:-24%;top:-28%;border-radius:50%;border:1px solid #c7e8ad20;box-shadow:0 0 0 55px #a9d99503,0 0 0 56px #c7e8ad0b,0 0 0 114px #a9d99503,0 0 0 115px #c7e8ad09;transform:rotate(-22deg);pointer-events:none}
.studio-preview--workspace .studio-editor-canvas:after{content:'';position:absolute;z-index:0;left:-15%;right:-15%;height:38%;bottom:-27%;border-radius:50%;background:#b7e29444;filter:blur(40px);pointer-events:none}
.studio-preview--workspace .studio-preview__screen{position:relative;z-index:2;overflow:visible;border:0;border-radius:0;background:transparent}
.studio-stage-heading{position:absolute;z-index:1;top:24px;left:32px;pointer-events:none;color:#e6f3df}
.studio-stage-heading small{display:block;font-size:8px;font-family:Arial,sans-serif;letter-spacing:.21em;color:#bdd2bb;margin-bottom:9px}
.studio-stage-heading strong{display:block;font-size:clamp(17px,2.2vw,28px);line-height:1.25;font-weight:500;letter-spacing:-.035em}
.studio-stage-wordmark{position:absolute;z-index:0;right:4%;top:3%;font-family:Arial,sans-serif;font-size:clamp(75px,12vw,170px);line-height:1.1;letter-spacing:-.075em;font-weight:800;font-style:italic;color:#e0ffc906;pointer-events:none;white-space:nowrap}
.studio-stage-floor{position:absolute;z-index:1;left:4%;right:4%;bottom:36px;border-top:1px solid #d9f2c62b;height:36px;pointer-events:none}
.studio-stage-floor:before{content:'';position:absolute;left:17%;right:3%;top:-80px;height:80px;background:radial-gradient(ellipse at center,#020e0970,transparent 68%);filter:blur(12px)}
.studio-stage-signature{position:absolute;bottom:18px;right:28px;z-index:3;color:#aec5b4;font-family:Arial,sans-serif;font-size:8px;letter-spacing:.16em;pointer-events:none}
.studio-stage-guide{position:absolute;bottom:35px;left:30px;z-index:4;display:flex;align-items:flex-end;gap:8px;pointer-events:none}
.studio-stage-guide__peek{width:126px;height:103px;overflow:hidden;position:relative;border-bottom:1px solid #c9e9ab66}
.studio-stage-guide__peek img{position:absolute;display:block!important;top:0;left:5px;width:116px!important;max-width:none;height:auto!important;filter:drop-shadow(0 5px 8px #00170d88);transform-origin:50% 75%;animation:studio-bots-breathe 6s ease-in-out infinite}
.studio-stage-guide__message{max-width:160px;position:relative;margin:0 0 23px;padding:9px 12px;background:#e7f3da;color:#214932;border-radius:12px 12px 12px 3px;font-size:10px;line-height:1.7;font-weight:500;box-shadow:0 5px 25px #00180c20}
.studio-stage-guide__message:before{content:'';position:absolute;left:-5px;bottom:8px;border:4px solid transparent;border-right-color:#e7f3da;border-left:0}
.studio-stage-guide__message b{display:block;font-family:Arial,sans-serif;font-size:8px;letter-spacing:.12em;margin-bottom:2px;color:#4a7356}
@keyframes studio-bots-breathe{0%,100%{transform:translateY(2px) rotate(-1deg)}50%{transform:translateY(0) rotate(1deg)}}
.studio-preview--workspace .studio-device-stage{z-index:2}
.studio-preview--workspace .studio-preview-device--desktop{transform:perspective(2800px) rotateY(5deg) rotateX(1deg) rotateZ(-3deg)}
.studio-preview--workspace .studio-preview-device--mobile{transform:perspective(2000px) rotateY(-6deg) rotateZ(5deg)}
.studio-preview--workspace [data-device-mode=desktop] .studio-preview-device--desktop,.studio-preview--workspace [data-device-mode=mobile] .studio-preview-device--mobile{transform:none}
.studio-preview--workspace .studio-preview-device--desktop .studio-device-body{padding:12px 12px 18px;border:0;border-radius:18px;background:linear-gradient(125deg,#91998f 0,#d5d9cf 1px,#3b403d 2px,#101614 4px,#101614 99%,#aeb6a9);box-shadow:0 36px 46px -22px #000b,0 1px 2px #000a,inset 0 0 0 1px #ffffff45}
.studio-preview--workspace .studio-preview-device--desktop .studio-device-chrome{height:30px;border-radius:5px 5px 0 0;background:#ecede9;border-bottom:1px solid #d9dcd5}
.studio-preview--workspace .studio-device-dots{width:5px;height:5px;top:12px;left:12px;background:#a7aaa4;box-shadow:10px 0 #bdc0b8,20px 0 #ced0ca}
.studio-preview--workspace .studio-device-address{height:18px;line-height:18px;width:42%;font-size:9px;letter-spacing:.08em;color:#9ba197;background:#f8f9f5;border:1px solid #e2e5de;border-radius:4px}
.studio-preview--workspace .studio-preview-device--desktop .studio-device-viewport{border-radius:0 0 5px 5px}
.studio-preview--workspace .studio-device-stand{height:76px;width:330px;filter:none}
.studio-preview--workspace .studio-device-stand:before{left:118px;right:118px;top:0;bottom:13px;clip-path:polygon(13% 0,87% 0,100% 100%,0 100%);background:linear-gradient(90deg,#6b746d,#b8c0b3 45%,#e0e6d7 53%,#8e998a);border-radius:0;box-shadow:inset 0 6px 12px #0a171e45}
.studio-preview--workspace .studio-device-stand:after{left:8px;right:8px;bottom:0;height:15px;background:linear-gradient(#bdc6b6,#919c8a 46%,#64705f 48%,#65705e);border:1px solid #bfcab6;border-radius:50% 50% 5px 5px / 45% 45% 4px 4px;box-shadow:0 12px 20px -5px #0009;transform:perspective(450px) rotateX(35deg)}
.studio-preview--workspace .studio-preview-device--mobile .studio-device-body{padding:23px 11px;border:1px solid #afbaae;border-radius:49px;background:linear-gradient(105deg,#b9c0b6 0,#252f28 3px,#101b15 7px,#101b15 97%,#8d9e91);box-shadow:0 25px 42px -18px #000c,inset 0 0 0 3px #465548,inset 0 0 0 5px #060e09}
.studio-preview--workspace .studio-preview-device--mobile .studio-device-body:before{content:'';position:absolute;right:-3px;top:195px;width:3px;height:76px;border-radius:0 2px 2px 0;background:linear-gradient(#9aa69a,#49574b)}
.studio-preview--workspace .studio-preview-device--mobile .studio-device-chrome{width:74px;height:9px;top:7px;left:calc(50% - 37px);border-radius:20px;background:#060d08;box-shadow:inset 0 1px 1px #ffffff14}
.studio-preview--workspace .studio-preview-device--mobile .studio-device-chrome:after{content:'';position:absolute;right:12px;top:2px;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#405750,#0c1613 70%)}
.studio-preview--workspace .studio-preview-device--mobile .studio-device-body:after{height:3px;bottom:9px;background:#647366;width:92px;left:calc(50% - 46px)}
.studio-preview--workspace .studio-preview__note{background:#0c211b;border-top:1px solid #ffffff10;color:#9caf9e;font-size:9px;line-height:1.6;padding:9px 18px}
.studio-preview--workspace[data-editor-open=true] .studio-editor-canvas:after{inset:0;height:auto;filter:none;border-radius:0;background:#00150a66;z-index:5}
.studio-preview--workspace[data-editor-open=true] .studio-stage-guide{visibility:hidden}
/* The same clean hardware language in the comparison gallery. */
.result-card__visual{background:radial-gradient(ellipse at 78% 0,#49704b,#183e2c 50%,#09281c)!important;border-radius:15px;padding:23px 18px 14px!important;border:1px solid #244a32;box-shadow:inset 0 1px 0 #c6e8ad25}
.result-card__visual .sample-device__label{color:#d8e6d0;font-size:9px;font-weight:500;letter-spacing:.06em}
.result-card__visual .sample-device--desktop .sample-device__chrome{border-width:4px;border-color:#25362b;background:#eff1e9}
.result-card__visual .sample-device--desktop .sample-viewport{border:4px solid #25362b;border-top:0;border-bottom-width:7px;box-shadow:0 12px 22px -8px #0007}
.result-card__visual .sample-device--mobile .sample-viewport{border-color:#263a2d;box-shadow:0 14px 20px -8px #0009}
.result-card__visual .sample-device__base{background:linear-gradient(90deg,#8b9a83,#cad4bf 50%,#819278);height:17px}
@media(max-width:1100px) and (min-width:801px){.studio-preview--workspace .studio-editor-shell{grid-template-columns:230px minmax(0,1fr)}.studio-preview--workspace .studio-preview__bar{gap:8px;padding:12px 14px}.studio-preview--workspace .studio-preview__sizes button{padding-inline:9px}.studio-preview--workspace .studio-stage-guide__message{max-width:135px;font-size:9px}.studio-preview--workspace .studio-stage-guide{left:18px}}
@media(max-width:800px){
 .studio-preview--workspace{width:calc(100% - 12px);height:calc(100svh - 12px);max-height:calc(100svh - 12px);border-radius:15px}
 .studio-preview--workspace .studio-preview__bar{grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:auto auto;gap:10px 8px;padding:12px}
 .studio-preview--workspace .studio-preview__bar h2{grid-column:1;grid-row:1;font-size:12px}
 .studio-preview--workspace .studio-preview__bar>[data-preview-close]{grid-column:3;grid-row:1;min-height:34px;min-width:46px;padding:6px 9px;font-size:10px}
 .studio-preview--workspace .studio-preview__sizes{grid-column:1/3;grid-row:2;justify-self:start;width:auto;max-width:100%;padding:3px}
 .studio-preview--workspace .studio-preview__sizes button{font-size:10px;padding:6px 9px;min-height:34px;gap:4px}
 .studio-preview--workspace .studio-preview__sizes button svg{width:14px;height:14px}
 .studio-preview--workspace .studio-preview__bar>[data-editor-toggle]{display:block;grid-column:2;grid-row:1;justify-self:start;padding:8px 11px;border:1px solid #ffffff28;background:#ffffff09;color:#e6eee0;border-radius:9px;min-height:40px;font-size:10px;font-weight:500}
 .studio-preview--workspace .studio-preview__bar>.bp-sales-go{grid-column:3;grid-row:2;min-height:40px;padding:8px 11px;font-size:10px}
 .studio-preview--workspace .studio-editor-shell{grid-template-columns:minmax(0,1fr)}
 .studio-preview--workspace .studio-editor-canvas{padding:70px 15px 108px}
 .studio-preview--workspace .studio-stage-heading{top:22px;left:23px}
 .studio-preview--workspace .studio-stage-heading strong{font-size:20px}
 .studio-preview--workspace .studio-stage-wordmark{right:4%;top:4%;font-size:104px}
 .studio-preview--workspace .studio-stage-guide{left:20px;bottom:30px}
 .studio-preview--workspace .studio-stage-guide__peek{width:104px;height:88px}
 .studio-preview--workspace .studio-stage-guide__peek img{width:102px!important;left:0}
 .studio-preview--workspace .studio-stage-guide__message{font-size:9px;max-width:135px;margin-bottom:16px;padding:7px 10px}
 .studio-preview--workspace .studio-stage-floor{bottom:31px}
 .studio-preview--workspace .studio-stage-signature{bottom:12px;right:21px;font-size:7px}
 .studio-preview--workspace .studio-preview__note{font-size:8px;padding:7px 12px;line-height:1.6}
 .studio-preview--workspace .studio-editor-sidebar{z-index:8}
 .studio-preview--workspace .studio-editor-panel input:not([type=checkbox]):not([type=radio]),.studio-preview--workspace .studio-editor-panel textarea,.studio-preview--workspace .studio-editor-panel select{font-size:16px}
}
@media(max-width:550px){
 .studio-preview--workspace .studio-preview__bar{grid-template-columns:minmax(0,1fr) auto auto;gap:8px 6px;padding:10px}
 .studio-preview--workspace .studio-preview__bar h2{font-size:11px}
 .studio-preview--workspace .studio-preview__bar h2:before{font-size:8px}
 .studio-preview--workspace .studio-preview__sizes{grid-column:1/3;width:auto}
 .studio-preview--workspace .studio-preview__sizes button{font-size:9px;padding-inline:8px;gap:5px;min-height:32px}
 .studio-preview--workspace .studio-preview__bar>[data-editor-toggle]{grid-column:2;grid-row:1;font-size:10px;min-height:34px;padding:6px 10px}
 .studio-preview--workspace .studio-preview__bar>[data-preview-close]{position:relative;z-index:2}
 .studio-preview--workspace .studio-preview__bar h2{padding-right:4px}
 .studio-preview--workspace .studio-preview__bar>.bp-sales-go{grid-column:3;grid-row:2;min-height:38px;font-size:9px;padding:7px 10px}
 .studio-preview--workspace .studio-editor-canvas{padding:64px 9px 98px}
 .studio-preview--workspace .studio-stage-heading{left:18px;top:19px}
 .studio-preview--workspace .studio-stage-heading strong{font-size:18px}
 .studio-preview--workspace .studio-stage-heading small{font-size:7px;margin-bottom:7px}
 .studio-preview--workspace .studio-stage-guide{left:14px;bottom:25px}
 .studio-preview--workspace .studio-stage-guide__peek{width:90px;height:74px}
 .studio-preview--workspace .studio-stage-guide__peek img{width:87px!important}
 .studio-preview--workspace .studio-stage-guide__message{max-width:132px;font-size:9px;margin-bottom:11px}
 .studio-preview--workspace .studio-stage-floor{bottom:26px}
 .studio-preview--workspace .studio-stage-signature{font-size:6px;right:14px;bottom:10px}
 .studio-preview--workspace .studio-stage-wordmark{font-size:83px;top:8%}
}
@media(max-height:650px){.studio-preview--workspace .studio-editor-canvas{padding-top:47px;padding-bottom:62px}.studio-stage-heading{top:14px}.studio-stage-heading strong{font-size:16px}.studio-stage-heading small{display:none}.studio-stage-guide__peek{height:54px!important;width:66px!important}.studio-stage-guide__peek img{width:64px!important}.studio-stage-guide{bottom:18px!important}.studio-stage-guide__message{margin-bottom:7px!important;font-size:8px!important;padding:5px 8px}.studio-stage-guide__message b{display:none}.studio-stage-signature{display:none}.studio-stage-floor{bottom:19px!important}}
@media(prefers-reduced-motion:reduce){.studio-stage-guide__peek img{animation:none}}

.studio-preview--workspace .studio-editor-sidebar button:focus-visible{outline-color:#126a3c}
.result-card__visual button:focus-visible{outline:3px solid #d8efbc;outline-offset:6px}
@media(max-width:800px){.studio-preview--workspace .studio-preview__bar button{min-height:40px}.studio-preview--workspace .studio-preview__bar>.bp-sales-go{max-width:140px;white-space:normal;line-height:1.5}.studio-preview--workspace .studio-preview__bar h2{min-width:0;overflow-wrap:anywhere}}

/* Presentation first; open the editor when needed on every screen. */
.studio-preview--workspace[data-editor-open=false] .studio-editor-shell{grid-template-columns:minmax(0,1fr)}
.studio-preview--workspace[data-editor-open=false] .studio-editor-sidebar{display:none}
@media(min-width:801px){
 .studio-preview--workspace .studio-preview__bar{grid-template-columns:minmax(125px,1fr) auto auto auto auto}
 .studio-preview--workspace .studio-preview__bar>[data-editor-toggle]{display:block;grid-column:3;grid-row:1;border:1px solid #ffffff28;background:#ffffff09;color:#e6eee0;border-radius:9px;min-height:40px;padding:9px 14px;font-size:11px}
 .studio-preview--workspace .studio-preview__bar>.bp-sales-go{grid-column:4}
 .studio-preview--workspace .studio-preview__bar>[data-preview-close]{grid-column:5}
 .studio-preview--workspace[data-editor-open=true] .studio-editor-sidebar{display:flex}
 .studio-preview--workspace[data-editor-open=true] .studio-editor-canvas:after{inset:auto -15% -27%;height:38%;border-radius:50%;background:#b7e29444;filter:blur(40px);z-index:0}
}