/* Product layout: hover card, movable editor, color popup, device workspace, analysis sidebar. */
.demo-mount[data-variant][data-surface=popover] .demo-layout,.demo-mount[data-variant][data-surface=workspace] .demo-layout{display:block!important;position:relative;transition:none}.demo-mount[data-variant][data-surface=popover] .property-panel{position:absolute!important;left:var(--popover-x,12px)!important;top:var(--popover-y,20px)!important;width:var(--popover-width,328px)!important;max-width:calc(100% - 24px)!important;margin:0!important;border:1px solid var(--border-glass)!important;border-radius:14px!important;box-shadow:var(--shadow-floating)!important;z-index:22;overflow:visible!important;align-self:auto!important;background:var(--glass-reflection) var(--surface-glass-strong)!important;backdrop-filter:blur(24px)}
.demo-mount[data-surface=popover] .property-panel>.panel-heading{display:none}.demo-mount[data-surface=popover] .property-panel>.panel-body{min-height:0!important;padding:12px!important;display:block!important}.demo-mount .demo-inspector{font:400 13px/1.5 var(--font-sans);color:var(--text-primary)}.demo-inspector .wa-inspector-title strong{font-size:12px;line-height:1.5}.demo-inspector .wa-inspector-title button{min-width:28px}.demo-inspector .wa-inspector-title-actions{display:flex!important}.demo-inspector .wa-inspector-title-actions svg{width:15px;height:15px}.demo-inspector .inspector-selector{display:flex;align-items:center;gap:8px;font:11px var(--font-mono);width:100%;box-sizing:border-box;margin:6px 0;padding:8px}.demo-inspector .inspector-selector svg{width:15px;height:15px}.demo-inspector textarea{resize:none;min-height:60px}.demo-inspector .wa-inspector-control-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.demo-inspector .wa-inspector-panel{margin-top:8px}.demo-inspector input,.demo-inspector select{width:100%;min-width:0}.demo-inspector .wa-inspector-panel summary{font-size:11px}.demo-inspector details:not([open])> :not(summary){display:none}
.demo-mount .inspect-hint{z-index:21;pointer-events:none;position:absolute!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;max-width:calc(100% - 16px);white-space:normal!important}.demo-mount .inspect-hint>.be-floating{max-width:100%;background:var(--glass-reflection) var(--surface-glass-strong);border:1px solid var(--border-glass);border-radius:14px;box-shadow:var(--shadow-floating);color:var(--text-secondary)}.demo-mount .is-hovered{outline:1px solid #eee!important;outline-offset:2px}.demo-mount .is-selected{outline:2px solid #fff!important;outline-offset:3px}.sample-loupe{padding:12px;background:var(--glass-reflection) var(--surface-glass-strong);border:1px solid var(--border-glass);border-radius:var(--radius-card);box-shadow:var(--glass-highlight),var(--shadow-floating);display:grid;gap:8px;color:#fff}.sample-loupe i{display:block;width:72px;height:72px;border-radius:50%;background:linear-gradient(transparent 47%,#fff 48%,#fff 51%,transparent 52%),linear-gradient(90deg,transparent 47%,#fff 48%,#fff 51%,transparent 52%),var(--sample);border:3px solid #fff}.sample-loupe code{font-size:11px}
.demo-mount[data-tool=responsive] .reference-area>.reference,.demo-mount[data-tool=responsive] .inspect-hint{display:none!important}.demo-mount[data-tool=responsive] .reference-area{background:var(--environment-light)!important;padding-bottom:90px!important;min-height:0!important}.demo-mount .responsive-comparison{margin:0!important;padding:0!important;display:block!important;background:var(--environment-light)!important}.demo-mount .responsive-comparison[hidden]{display:none!important}.responsive-header{display:flex!important;justify-content:space-between;align-items:center;gap:16px;padding:14px 20px!important;background:var(--glass-reflection) var(--surface-glass-strong)!important;color:var(--text-secondary)!important;border-bottom:1px solid var(--border-standard)}.responsive-header>span{font-size:12px;display:flex;align-items:center;gap:12px}.responsive-header code{padding:4px 8px;background:var(--surface-elevated);border-radius:5px}.responsive-header button{width:auto!important;margin:0!important;font-size:11px}.device-trio{display:grid!important;grid-template-columns:390fr 768fr 1280fr;gap:24px;padding:28px!important;align-items:start;background:transparent!important}.device-preview{min-width:0;transition:filter .5s,transform .5s}.device-preview>span{display:block!important;font-size:11px;color:var(--text-secondary);text-align:center;margin-bottom:12px;line-height:1.6}.device-preview .comparison-screen{position:relative;border:6px solid #28282a;box-shadow:var(--shadow-floating);border-radius:12px;background:#08082e;overflow:hidden!important}.device-phone .comparison-screen{border-radius:20px;border-width:7px}.device-tablet .comparison-screen{border-radius:15px;border-width:10px}.device-desktop .comparison-screen{border-top-width:18px}.device-active{filter:drop-shadow(0 0 6px #ffad6650);transform:translateY(-3px)}.demo-mount .comparison-page{position:absolute!important;left:0;top:0;transform-origin:top left;max-width:none!important}.demo-mount:is([data-tool=extract],[data-tool=audit]) .panel-body{padding:0!important;display:block!important;min-height:0!important}.analysis-frame{display:block;width:100%;height:260px;border:0;background:var(--surface-base)}.demo-mount:is([data-tool=extract],[data-tool=audit]) .panel-brand, .demo-mount[data-tool=ai] .panel-brand{font-size:13px;font-weight:600}.demo-mount:is([data-tool=extract],[data-tool=audit]) .panel-heading, .demo-mount[data-tool=ai] .panel-heading{padding:12px 16px}.demo-mount:is([data-tool=extract],[data-tool=audit]) .property-panel, .demo-mount[data-tool=ai] .property-panel{background:var(--surface-base)}
@media(max-width:650px){.device-trio{gap:10px;padding:16px!important;grid-template-columns:repeat(3,minmax(0,1fr))}.device-preview>span{font-size:8px}.device-phone .comparison-screen,.device-tablet .comparison-screen{border-width:4px;border-radius:8px}.device-desktop .comparison-screen{border-width:3px;border-top-width:10px}.responsive-header{padding:12px!important;flex-wrap:wrap}.responsive-header>span{font-size:10px}.demo-mount .demo-inspector .wa-inspector-title strong{font-size:11px}}
.demo-mount .responsive-comparison{pointer-events:auto!important;width:100%!important;max-width:none!important;opacity:1!important;transform:none!important}.demo-mount .responsive-comparison>.responsive-header,.demo-mount .responsive-comparison>.device-trio{width:100%!important;max-width:none!important;transform:none!important;box-shadow:none!important;border-radius:0!important;min-height:0!important;aspect-ratio:auto!important}.demo-mount .responsive-comparison>.device-trio{background:transparent!important;border:0!important}.demo-mount .responsive-comparison .comparison-screen{aspect-ratio:auto!important}.demo-mount .device-preview{width:auto!important}
.demo-mount [data-device=phone] .kiln-links{display:none!important}.demo-mount [data-device=phone] .kiln-menu{display:block!important}.demo-mount [data-device=phone] .kiln-account{margin-left:auto}
@media(max-width:600px){.demo-mount .demo-inspector .wa-inspector-control-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.demo-inspector .be-property-actions input,.demo-inspector .be-property-actions select{padding-inline:7px!important}.demo-inspector .be-property-copy{width:24px!important;min-width:24px!important}}
/* Orange inspection pointer, with a white motion tick at its leading tip. */
.demo-mount .sim-cursor>.demo-pointer{width:38px;height:42px;overflow:visible;filter:drop-shadow(0 2px 3px #0008);flex-shrink:0;vertical-align:top}.demo-mount .sim-cursor .cursor-pointer-body{fill:var(--accent,#ffad66);stroke:#fff}.cursor-motion-mark{opacity:.5;transition:opacity 180ms ease}.is-moving .cursor-motion-mark{opacity:1;animation:cursor-motion-tick 520ms ease-in-out 2}@keyframes cursor-motion-tick{50%{opacity:.35;transform:translate(-1px,-1px)}}@media(prefers-reduced-motion:reduce){.cursor-motion-mark{animation:none!important}}
.demo-mount .is-hovered{outline-color:var(--border-selected)!important;outline-offset:0!important}.demo-mount .is-selected{outline-color:var(--text-primary)!important;outline-offset:0!important}
[data-animation][data-tour-action=scan] .demo-pointer,[data-animation][data-tour-action=tokens] .demo-pointer,[data-animation][data-tour-action=inspect] .demo-pointer,[data-animation][data-tour-action=processing] .demo-pointer{animation:demo-click .6s ease-out}
/* Feedback belongs to the control or element receiving the action. */
.demo-mount .demo-control-hover{background-color:var(--surface-hover)!important;transition:background-color 160ms ease}.demo-mount .tool{transition:background-color 160ms ease,box-shadow 160ms ease,transform 160ms ease}.demo-mount:not([inert]) .tool:hover{background:var(--surface-hover)}.demo-mount:not([inert]) .tool:active{transform:translateY(1px);box-shadow:var(--shadow-pressed)}
[data-animation] .sim-cursor>.demo-pointer{animation:none!important}
@media(prefers-reduced-motion:reduce){.demo-mount .demo-control-hover{transition:none}}