/* Homepage composed interfaces, grounded in actual editor fields and outputs. */
.product-site .ps-demo-visual { --demo-line:#e5e5e5;--demo-accent:#ef3328;position:relative;isolation:isolate;overflow:hidden;width:100%;height:560px;margin:0;color:#292929;font-size:12px;line-height:1.45; }
.product-site .ps-demo-visual *, .product-site .ps-demo-visual *::before, .product-site .ps-demo-visual *::after { box-sizing:border-box; }
.product-site .ps-demo-visual::after { position:absolute;z-index:5;right:-1px;bottom:-1px;left:-1px;height:58px;content:'';background:linear-gradient(0deg,var(--ps-background,#fafafa),transparent);pointer-events:none; }
.product-site .ps-demo-document, .product-site .ps-demo-editor { position:absolute;overflow:hidden;background:#fff;border:1px solid var(--demo-line);border-radius:8px;box-shadow:0 2px 7px #00000003; }
.product-site .ps-demo-document { top:22px;left:0;width:92%;height:calc(100% - 35px); }
.product-site .ps-demo-window-bar { display:flex;align-items:center;gap:14px;height:37px;padding:0 16px;border-bottom:1px solid #ededed;font-size:10px;color:#7c7c7c; }
.product-site .ps-demo-window-dots { display:flex;gap:5px; }
.product-site .ps-demo-window-dots i { width:5px;height:5px;border:1px solid #d0d0d0;border-radius:50%; }
.product-site .ps-demo-host { margin-left:auto; }
.product-site .ps-demo-canvas-shell { display:grid;grid-template-columns:39px minmax(0,1fr);height:calc(100% - 37px); }
.product-site .ps-demo-tool-rail { display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:20px;border-right:1px solid #f0f0f0; }
.product-site .ps-demo-tool-rail > span { display:grid;place-items:center;width:25px;height:25px;color:#888; }
.product-site .ps-demo-tool-rail > .is-current { background:#f2f2f2;color:#222;border-radius:3px; }
.product-site .ps-demo-tool-rail > i { height:1px;width:15px;background:#e8e8e8; }
.product-site .ps-demo-symbol { display:block;flex:0 0 auto;width:21px;height:21px; }
.product-site .ps-demo-tool-rail .ps-demo-symbol { width:17px;height:17px; }
.product-site .ps-demo-artboard { position:relative;min-width:0;min-height:0;padding:24px 26% 22px 14px; }
.product-site .ps-demo-artboard-name { position:absolute;top:12px;left:18px;color:#aaa;font-size:9px; }
.product-site .ps-demo-rosette-states { position:relative;width:100%;height:100%; }
.product-site .ps-demo-rosette-states > img { position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain; }
.product-site .ps-demo-selection { position:absolute;top:38px;bottom:40px;left:9%;right:30%;border:1px solid #dedede;pointer-events:none;opacity:.7; }
.product-site .ps-demo-selection > i { position:absolute;width:4px;height:4px;background:#888; }
.product-site .ps-demo-selection > i:nth-child(1) { top:-2px;left:-2px; }
.product-site .ps-demo-selection > i:nth-child(2) { top:-2px;left:50%; }
.product-site .ps-demo-selection > i:nth-child(3) { top:-2px;right:-2px; }
.product-site .ps-demo-selection > i:nth-child(4) { top:50%;right:-2px; }
.product-site .ps-demo-selection > i:nth-child(5) { bottom:-2px;right:-2px; }
.product-site .ps-demo-selection > i:nth-child(6) { bottom:-2px;left:50%; }
.product-site .ps-demo-selection > i:nth-child(7) { bottom:-2px;left:-2px; }
.product-site .ps-demo-selection > i:nth-child(8) { top:50%;left:-2px; }
.product-site .ps-demo-editor { top:0;right:0;z-index:2;width:32%;min-width:275px; }
.product-site .ps-demo-editor-bar { display:flex;align-items:center;justify-content:space-between;gap:16px;height:46px;padding:0 20px;font-size:17px;color:#999; }
.product-site .ps-demo-wordmark { display:inline-flex;align-items:baseline;gap:2px;color:#171717;font-size:14px;font-weight:650;letter-spacing:-.6px; }
.product-site .ps-demo-wordmark > span { width:3px;height:3px;background:var(--demo-accent);border-radius:50%; }
.product-site .ps-demo-editor-tabs { display:flex;align-items:center;gap:22px;padding:0 20px;border-bottom:1px solid #ededed;color:#888;font-size:11px; }
.product-site .ps-demo-editor-tabs > span { padding:9px 0; }
.product-site .ps-demo-editor-tabs > .is-current { color:#222;border-bottom:1px solid #333; }
.product-site .ps-demo-editor-content { padding:16px 20px; }
.product-site .ps-demo-tool-title { display:flex;align-items:center;gap:10px;margin-bottom:14px; }
.product-site .ps-demo-tool-title strong { font-size:15px;font-weight:550; }
.product-site .ps-demo-tool-title .ps-demo-symbol { width:22px;height:22px;color:#737373; }
.product-site .ps-demo-layer-tabs { display:flex;align-items:center;gap:7px; }
.product-site .ps-demo-layer-tabs > span { padding:4px 9px;border:1px solid transparent;color:#888;font-size:10px; }
.product-site .ps-demo-layer-tabs > .is-current { background:#f8f8f8;border-color:#dedede;border-radius:3px;color:#333; }
.product-site .ps-demo-layer-tabs > .ps-demo-layer-more { padding:0;margin-left:auto;color:#888;font-size:17px; }
.product-site .ps-demo-layer-tools { display:flex;justify-content:space-between;align-items:center;margin:12px 0 14px;color:#888;font-size:9px; }
.product-site .ps-demo-layer-tools > span:first-child { display:inline-flex;align-items:center;gap:6px;color:#656565; }
.product-site .ps-demo-checkbox { display:inline-grid;place-items:center;width:11px;height:11px;border:1px solid #777;border-radius:2px;font-size:9px;font-style:normal;color:#555; }
.product-site .ps-demo-parameter { margin-bottom:14px; }
.product-site .ps-demo-parameter-label { display:flex;justify-content:space-between;align-items:center;gap:12px;color:#777;font-size:11px; }
.product-site .ps-demo-value { display:inline-flex;align-items:center;justify-content:flex-end;position:relative;min-width:61px;height:25px;padding:0 6px;border:1px solid #e4e4e4;border-radius:3px;color:#444;font-variant-numeric:tabular-nums; }
.product-site .ps-demo-value > small { margin-left:5px;font-size:9px;color:#aaa; }
.product-site .ps-demo-value:has(.ps-demo-state) { min-width:68px; }
.product-site .ps-demo-value > .ps-demo-state { position:absolute;right:7px;top:4px; }
.product-site .ps-demo-value:has(small:not(:empty)) > .ps-demo-state { right:27px; }
.product-site .ps-demo-slider { display:block;position:relative;height:1px;margin-top:11px;background:#e1e1e1; }
.product-site .ps-demo-slider > i { position:absolute;top:-3px;left:var(--parameter-position);width:7px;height:7px;border:1px solid #777;border-radius:50%;background:#fff; }
.product-site .ps-demo-boundary { display:flex;align-items:center;justify-content:space-between;margin-top:5px;color:#888;font-size:10px; }
.product-site .ps-demo-boundary > span:last-child { min-width:79px;padding:3px 6px;border:1px solid #e6e6e6;border-radius:3px;color:#555; }
.product-site .ps-demo-variations-heading { display:flex;justify-content:space-between;gap:12px;margin-top:20px;color:#777;font-size:9px; }
.product-site .ps-demo-variations-heading > span:last-child { font-size:8px;color:#aaa; }
.product-site .ps-demo-candidates { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:9px; }
.product-site .ps-demo-candidate { display:block;overflow:hidden;aspect-ratio:1;background:#fff;border:1px solid #e8e8e8;border-radius:3px;padding:4px; }
.product-site .ps-demo-candidate img { display:block;width:100%;height:100%;object-fit:contain; }
.product-site .ps-demo-actions { display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid #ededed;color:#888;font-size:10px; }
.product-site .ps-demo-actions > span:last-child { padding:5px 12px;border-radius:3px;color:#fff;background:#333; }
.product-site .ps-demo-state { opacity:0;animation:ps-demo-state 18s ease-in-out infinite; }
.product-site .ps-demo-state--1 { --state-delay:0s; }
.product-site .ps-demo-state--2 { --state-delay:-12s; }
.product-site .ps-demo-state--3 { --state-delay:-6s; }
.product-site .ps-demo-state, .product-site .ps-demo-state-border { animation-delay:var(--state-delay); }
.product-site .ps-demo-state-border { animation-name:ps-demo-candidate;animation-duration:18s;animation-timing-function:ease-in-out;animation-iteration-count:infinite; }
.product-site .ps-demo-slider--scale > i { animation:ps-demo-slider 18s ease-in-out infinite; }
.product-site .ps-demo-slider--rotation > i { animation:ps-demo-slider-rotation 18s ease-in-out infinite; }
.product-site .ps-demo-slider--width > i { animation:ps-demo-slider-width 18s ease-in-out infinite; }
@keyframes ps-demo-state { 0%,26% { opacity:1; } 32%,94% { opacity:0; } 100% { opacity:1; } }
@keyframes ps-demo-candidate { 0%,26% { border-color:#555; } 32%,94% { border-color:#e8e8e8; } 100% { border-color:#555; } }
@keyframes ps-demo-slider { 0%,26%,100% { left:49%; } 33%,59% { left:64%; } 66%,93% { left:34%; } }
@keyframes ps-demo-slider-rotation { 0%,26%,100% { left:38%; } 33%,59% { left:52%; } 66%,93% { left:69%; } }
@keyframes ps-demo-slider-width { 0%,26%,100% { left:26%; } 33%,59% { left:21%; } 66%,93% { left:38%; } }
.product-site .ps-demo-visual--technology .ps-demo-document { top:0; }
.product-site .ps-demo-visual--technology .ps-demo-editor { top:60px; }
.product-site .ps-demo-visual--technology .ps-demo-artboard { padding:52px 22% 72px 15px; }
.product-site .ps-demo-engraving-comparison { position:relative;width:100%;height:100%;overflow:hidden;background:#fff; }
.product-site .ps-demo-engraving-comparison > img { position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain; }
.product-site .ps-demo-engraving-result { clip-path:inset(0 0 0 0);animation:ps-demo-reveal 14s cubic-bezier(.4,0,.2,1) infinite; }
.product-site .ps-demo-comparison-divider { position:absolute;top:0;bottom:0;left:0;width:1px;background:#c7c7c7;animation:ps-demo-divider 14s cubic-bezier(.4,0,.2,1) infinite; }
.product-site .ps-demo-comparison-divider > i { display:grid;place-items:center;position:absolute;top:48%;left:-10px;width:21px;height:21px;border:1px solid #dadada;border-radius:50%;background:#fff;color:#999;font-style:normal;font-size:12px; }
.product-site .ps-demo-effect-tabs { display:flex;gap:19px;margin-bottom:22px;font-size:10px;color:#999; }
.product-site .ps-demo-effect-tabs .is-current { color:#333; }
.product-site .ps-demo-visual--technology .ps-demo-parameter { margin-bottom:24px; }
.product-site .ps-demo-preview-row { display:flex;gap:6px;align-items:center;margin-top:24px;font-size:10px;color:#777; }
.product-site .ps-demo-preview-row > span:last-child { margin-left:auto; }
.product-site .ps-demo-compute-flow { display:flex;align-items:center;gap:8px;justify-content:space-between;border-top:1px solid #ededed;padding:17px;color:#888;font-size:9px; }
.product-site .ps-demo-compute-flow > i { position:relative;flex:1;min-width:12px;height:1px;background:#ddd; }
.product-site .ps-demo-compute-flow > i::after { content:'';position:absolute;top:-1px;left:0;width:3px;height:3px;background:var(--demo-accent);border-radius:50%;animation:ps-demo-flow 3.2s ease-in-out infinite; }
.product-site .ps-demo-compute-flow > i:nth-of-type(2)::after { animation-delay:1.6s; }
@keyframes ps-demo-reveal { 0%,12%,100% { clip-path:inset(0 0 0 0); } 46%,64% { clip-path:inset(0 0 0 100%); } 85% { clip-path:inset(0 0 0 0); } }
@keyframes ps-demo-divider { 0%,12%,100% { left:0;opacity:0; } 14% { opacity:1; } 46%,64% { left:100%;opacity:0; } 66% { opacity:1; } 85% { left:0;opacity:0; } }
@keyframes ps-demo-flow { 0% { left:0;opacity:0; } 20%,80% { opacity:1; } 100% { left:100%;opacity:0; } }
/* The natural-flow observer owns visibility; all demo animation pauses offscreen. */
.product-site .ps-demo-visual *, .product-site .ps-demo-visual *::after { animation-play-state:paused; }
.product-site [data-home-panel][data-in-view="true"] .ps-demo-visual *, .product-site [data-home-panel][data-in-view="true"] .ps-demo-visual *::after { animation-play-state:running; }
@media (prefers-reduced-motion:reduce) {
  .product-site .ps-demo-visual *, .product-site .ps-demo-visual *::after { animation:none; }
  .product-site .ps-demo-state--1 { opacity:1; }
  .product-site .ps-demo-state-border.ps-demo-state--1 { border-color:#555; }
  .product-site .ps-demo-engraving-result { clip-path:inset(0 0 0 50%); }
  .product-site .ps-demo-comparison-divider { left:50%; }
}