/* ProteusIQ product story. Artwork and interface details come from the product. */
.proteus-story { --piq-cyan:#22d3ee; --piq-muted:#939aa8; --piq-line:rgba(255,255,255,.12); position:relative; background:#030407; color:#f5f5f7; isolation:isolate; }
.proteus-story.piq-enhanced { height:450vh; }
.proteus-story:not(.piq-enhanced) .piq-timeline, .proteus-story:not(.piq-enhanced) .piq-format-picker { display:none; }
.piq-sticky { position:relative; min-height:800px; height:100svh; max-height:1100px; padding:110px max(5vw,24px) 26px; display:flex; flex-direction:column; gap:20px; overflow:hidden; }
.piq-enhanced .piq-sticky { position:sticky; top:0; min-height:650px; }
.piq-heading { position:relative; z-index:2; width:100%; max-width:1280px; margin:0 auto; }
.piq-product-line { display:flex; align-items:center; gap:15px; font-size:10px; font-weight:600; letter-spacing:.15em; line-height:1.4; }
.piq-product-number { color:#697181; }
.piq-product-category { border-left:1px solid #303542; padding-left:15px; color:#959ba8; text-transform:none; letter-spacing:.015em; font-weight:400; }
.piq-heading h2 { margin:17px 0 10px; font-size:clamp(38px,4.6vw,68px); line-height:1.04; font-weight:650; letter-spacing:-.055em; }
.piq-heading h2 span { color:#838c9d; }
.piq-heading>p { margin:0; font-size:clamp(12px,1.05vw,15px); color:#8f97a6; line-height:1.5; }
.piq-stage { width:100%; max-width:1230px; flex:1; min-height:330px; max-height:530px; margin:0 auto; position:relative; perspective:1300px; }
.piq-stage::before { content:""; position:absolute; inset:0 10% -10%; background:radial-gradient(ellipse at 50% 65%,rgba(3,174,196,.105),transparent 59%),radial-gradient(ellipse at 37% 70%,rgba(113,66,205,.09),transparent 57%); pointer-events:none; }
.piq-stage-grid { position:absolute; inset:-20px -20%; background-image:linear-gradient(rgba(149,175,210,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(149,175,210,.035) 1px,transparent 1px); background-size:66px 66px; mask-image:radial-gradient(ellipse at center,#000,transparent 65%); transform:perspective(600px) rotateX(60deg) scale(1.2); transform-origin:50% 90%; pointer-events:none; }
.piq-orbit { width:610px; height:260px; position:absolute; left:50%; top:60%; border:1px solid rgba(152,183,214,.06); border-radius:50%; transform:translate(-50%,-50%) rotate(-17deg); pointer-events:none; }
.piq-orbit--two { width:900px; height:340px; transform:translate(-50%,-50%) rotate(16deg); }
.piq-app { width:min(620px,71%); height:390px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid rgba(160,226,249,.2); border-radius:20px; background:radial-gradient(ellipse at 55% 2%,rgba(3,127,145,.3),transparent 74%),radial-gradient(ellipse at 2% 96%,rgba(98,46,182,.34),transparent 75%),#05090f; box-shadow:0 28px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.09); overflow:hidden; opacity:0; }
.piq-app-top { height:62px; padding:0 27px; display:flex; justify-content:space-between; align-items:center; }
.piq-wordmark { width:145px; aspect-ratio:1550/340; flex-shrink:0; }

.piq-app-nav { display:flex; align-items:center; gap:20px; color:#98a7b2; font-size:10px; }
.piq-profile { padding:5px 13px; border:1px solid rgba(255,255,255,.22); border-radius:30px; color:#c8d7de; background:linear-gradient(rgba(255,255,255,.17),rgba(255,255,255,.03)); }
.piq-app-body { padding:0 37px 25px; }
.piq-app-title { font-size:20px; font-weight:600; letter-spacing:-.035em; line-height:1.5; }
.piq-app-subtitle { color:#83909f; font-size:10px; margin-top:1px; }
.piq-app-steps { display:flex; gap:12px; align-items:center; margin:15px 0; }
.piq-app-steps>i { flex:1; height:1px; background:rgba(255,255,255,.12); }
.piq-app-step { display:flex; align-items:center; gap:7px; font-size:9px; color:#7b8795; }
.piq-app-step b { display:grid; place-items:center; width:23px; height:23px; border:1px solid #415063; border-radius:50%; font-size:9px; font-weight:500; }
.piq-app-step--upload { color:#d0e7f1; }
.piq-app-step--upload b { border-color:#20b7d1; color:#81e9f7; background:rgba(20,163,186,.15); }
.piq-app-panels { position:relative; height:217px; }
.piq-upload-panel,.piq-formats-panel { position:absolute; inset:0; border:1px solid rgba(225,242,255,.16); background:linear-gradient(120deg,rgba(235,222,255,.13),rgba(138,225,235,.07)); border-radius:15px; padding:14px 16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.09); }
.piq-glass-title { display:flex; align-items:center; gap:7px; font-size:10px; font-weight:500; color:#dce8f4; margin-bottom:12px; line-height:1; }
.piq-glass-title svg { width:13px; height:13px; color:#43d1f2; }
.piq-glass-title>span { font-size:8px; color:#5fe0ef; margin-left:auto; }
.piq-dropzone { height:163px; border:1px dashed rgba(211,229,243,.3); border-radius:10px; position:relative; overflow:hidden; background:rgba(0,0,0,.12); }
.piq-drop-prompt { display:flex; position:absolute; inset:0; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.piq-drop-prompt strong { font-size:12px; font-weight:500; color:#dce2eb; }
.piq-drop-prompt>span:last-child { font-size:9px; color:#8e97a6; }
.piq-upload-icon { width:34px; height:34px; border:1px solid rgba(155,193,231,.13); background:rgba(183,205,228,.055); border-radius:10px; display:grid; place-items:center; margin-bottom:3px; color:#70d9e9; }
.piq-upload-icon svg { width:18px; height:18px; }
.piq-uploaded { position:absolute; inset:9px; opacity:0; }
.piq-uploaded>img { width:100%; height:119px; object-fit:contain; display:block; border-radius:4px; }
.piq-uploaded>div { display:flex; justify-content:space-between; align-items:center; color:#a9b8c6; font-size:9px; padding:7px 8px 0; }
.piq-file-check { color:#69dec9; }
.piq-upload-progress { height:2px; position:absolute; bottom:0; left:0; width:100%; background:rgba(0,0,0,.2); }
.piq-upload-progress i { display:block; height:100%; width:0; background:#5de4f3; box-shadow:0 0 15px #22d3ee; }
.piq-formats-panel { opacity:0; transform:translateY(16px); }
.piq-preset-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.piq-preset { position:relative; height:61px; border:1px solid rgba(34,211,238,.15); border-radius:7px; padding:8px 5px; background:rgba(6,182,212,.045); opacity:.4; display:flex; flex-direction:column; justify-content:space-between; }
.piq-preset.is-picked { opacity:1; border-color:rgba(6,182,212,.5); background:rgba(6,182,212,.14); box-shadow:0 0 15px rgba(6,182,212,.07); }
.piq-preset.is-picked::after { content:""; position:absolute; right:5px; top:5px; width:4px; height:4px; background:#facc15; border-radius:50%; box-shadow:0 0 5px #facc1560; }
.piq-preset b { display:block; font-size:7px; font-weight:500; white-space:nowrap; letter-spacing:-.01em; }
.piq-preset small { display:block; font-size:6px; color:#8cb0c1; margin-top:2px; }
.piq-preset i { position:absolute; right:6px; bottom:6px; display:flex; align-items:center; gap:4px; font-size:5px; font-style:normal; line-height:1; color:#c5e7f0; white-space:nowrap; }
/* The ratio shape sits beside its label, so narrow formats (9:16, 4:15) never push the text outside. */
.piq-preset i::before { content:""; order:2; flex:none; height:15px; width:calc(15px * var(--ratio)); border:1px solid rgba(145,233,245,.5); border-radius:1px; background:rgba(159,229,234,.1); }
.piq-generate { margin-top:11px; display:flex; align-items:center; justify-content:space-between; font-size:9px; }
.piq-generate>span { padding:6px 14px; border:1px solid #54d8f07a; border-radius:20px; background:linear-gradient(110deg,#08799788,#6944c788); color:#edfbff; box-shadow:inset 0 1px 1px #ffffff40; }
.piq-generate small { color:#94a7b8; font-size:8px; }
.piq-drag-card { position:absolute; left:78%; top:68%; width:185px; background:#12161f; border-radius:9px; padding:5px; box-shadow:0 15px 35px rgba(0,0,0,.7),0 0 0 1px rgba(224,237,255,.2); transform:translate(-50%,-50%) rotate(7deg); opacity:0; }
.piq-drag-card>img { display:block; width:100%; height:auto; border-radius:5px; }
.piq-drag-card>span { display:block; padding:6px 5px 3px; font-size:8px; color:#c4cbd7; }
.piq-demo-cursor { position:absolute; width:25px; height:30px; left:82%; top:75%; filter:drop-shadow(0 3px 5px #0009); pointer-events:none; opacity:0; z-index:6; }
.piq-generation { position:absolute; top:47%; left:50%; transform:translate(-50%,-50%); width:400px; opacity:0; pointer-events:none; }
.piq-generation-frame { width:100%; position:relative; padding:0; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 25px 65px #0008; }
.piq-generation-frame>img { display:block; width:100%; height:auto; opacity:1; }
.piq-generating-label { text-align:center; margin-top:14px; font-size:12px; color:#b8beca; }
.piq-generating-label>span { width:5px; height:5px; border-radius:50%; background:#49dcea; box-shadow:0 0 9px #49dcea; }
.piq-gallery { position:absolute; inset:0 0 47px; }
.piq-output { position:absolute; top:50%; left:50%; margin:0; transform:translate(-50%,-50%); transform-origin:50% 60%; transition:filter .3s ease; }
.piq-art { width:100%; background:#fff; border-radius:7px; overflow:hidden; box-shadow:0 18px 40px #0009,0 0 0 1px #ffffff2e; }
.piq-art img { display:block; width:100%; height:100%; object-fit:contain; }
.piq-output figcaption { margin-top:12px; display:flex; align-items:center; justify-content:space-between; font-size:9px; color:#9ba4b4; white-space:nowrap; }
.piq-output figcaption>b { font-size:8px; font-weight:400; color:#788292; font-variant-numeric:tabular-nums; }
.piq-output--sky { width:7.2%; left:12%; transform:translate(-50%,-50%) rotate(-8deg); z-index:1; }.piq-output--sky .piq-art { aspect-ratio:4/15; }
.piq-output--portrait { width:20%; left:29%; transform:translate(-50%,-50%) rotate(-5deg); z-index:2; }.piq-output--portrait .piq-art { aspect-ratio:4/5; }
.piq-output--wide { width:37%; left:55%; z-index:4; }.piq-output--wide .piq-art { aspect-ratio:1080/566; }
.piq-output--story { width:17%; left:85%; transform:translate(-50%,-50%) rotate(7deg); z-index:3; }.piq-output--story .piq-art { aspect-ratio:9/16; }
.piq-output.is-selected .piq-art { box-shadow:0 25px 70px #000a,0 0 0 1px #5de2f059,0 0 65px #15c6e012; }
.piq-output.is-selected figcaption { color:#edfaff; }.piq-output.is-selected figcaption>b { color:#6cdeed; }
.piq-format-picker { position:absolute; z-index:10; bottom:1px; left:0; width:100%; display:flex; align-items:center; justify-content:center; gap:7px; }
.piq-format-picker>span { font-size:9px; color:#798598; margin-right:9px; }
.piq-format-picker button { padding:7px 12px; border:1px solid #25303e; border-radius:40px; background:#0c111a; color:#aab1bf; font-family:inherit; font-size:10px; cursor:pointer; transition:border-color .2s,background .2s; line-height:1.4; }
.piq-format-picker button>b { font-weight:400; color:#727e90; margin-left:6px; font-size:8px; }
.piq-format-picker button[aria-pressed=true] { border-color:#36737f; background:#11272e; color:#c6f6fc; }.piq-format-picker button[aria-pressed=true]>b { color:#6dcedc; }
.piq-format-picker button:hover { border-color:#5c899b; }
.piq-story-bottom { width:100%; max-width:1280px; margin:0 auto; z-index:8; position:relative; }
.piq-narration { text-align:center; min-height:56px; margin-bottom:17px; }
.piq-beat-title { margin:0; font-size:18px; line-height:1.3; font-weight:500; letter-spacing:-.035em; color:#ebf0f6; }.piq-beat-description { margin:5px 0 0; font-size:11px; line-height:1.4; color:#8490a2; }
.piq-timeline { position:relative; width:min(680px,100%); display:grid; grid-template-columns:repeat(4,1fr); margin:0 auto; border-top:1px solid #242b36; }
.piq-timeline button { font:inherit; text-align:left; font-size:10px; font-weight:500; border:0; background:transparent; color:#68768b; padding:14px 8px 5px; line-height:1.3; cursor:pointer; white-space:nowrap; transition:color .2s; }
.piq-timeline button>span { font-size:8px; color:#4b5668; margin-right:10px; }
.piq-timeline button[aria-pressed=true] { color:#e2f7fa; }.piq-timeline button[aria-pressed=true]>span { color:#6fd9e6; }.piq-timeline button:hover { color:#cdeff4; }
.piq-timeline-progress { position:absolute; top:-1px; left:0; width:100%; height:1px; background:linear-gradient(90deg,#3b6c89,#6fdfef); transform-origin:left; pointer-events:none; }
.piq-preview-note { display:flex; justify-content:space-between; margin-top:12px; font-size:8px; line-height:1.5; letter-spacing:.025em; color:#626e80; }
.piq-scroll-note>span { margin-left:7px; }
.piq-visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.proteus-story button:focus-visible { outline:2px solid #72e5f2; outline-offset:4px; }
.piq-enhanced[data-piq-beat="1"] .piq-app-step--upload { color:#81a5b0; }.piq-enhanced[data-piq-beat="1"] .piq-app-step--formats { color:#d0e7f1; }.piq-enhanced[data-piq-beat="1"] .piq-app-step--formats b { border-color:#20b7d1; color:#81e9f7; background:rgba(20,163,186,.15); }
.proteus-story.piq-manual { height:auto; }.piq-manual .piq-sticky { position:relative; height:auto; min-height:780px; }.piq-manual .piq-stage { flex:none; height:390px; }.piq-manual .piq-scroll-note { display:none; }
@media(min-width:1600px) and (min-height:900px) { .piq-stage { max-height:610px; }.piq-app { width:710px; height:445px; }.piq-app-top { height:75px; }.piq-app-body { padding:5px 46px; }.piq-app-panels { height:244px; }.piq-dropzone { height:190px; }.piq-uploaded>img { height:145px; }.piq-preset { height:74px; }.piq-preset b { font-size:8px; }.piq-preset small { font-size:7px; }.piq-generating-label { font-size:14px; }.piq-output figcaption { font-size:11px; }.piq-generation { width:450px; } }
@media(max-height:800px) and (min-width:761px) { .piq-sticky { padding-top:90px; gap:13px; }.piq-heading h2 { font-size:clamp(36px,4.1vw,58px); margin:10px 0 6px; }.piq-stage { min-height:280px; }.piq-app { width:545px; height:340px; transform-origin:50% 50%; }.piq-app-top { height:48px; }.piq-app-body { padding:0 30px; }.piq-app-steps { margin:11px 0; }.piq-app-panels { height:188px; }.piq-upload-panel,.piq-formats-panel { padding:11px 14px; }.piq-dropzone { height:140px; }.piq-uploaded>img { height:100px; }.piq-preset { height:52px; }.piq-generate { margin-top:7px; }.piq-narration { min-height:47px; margin-bottom:10px; }.piq-output--sky { width:6%; }.piq-output--portrait { width:18%; }.piq-output--story { width:14%; }.piq-generation { width:350px; }.piq-preview-note { margin-top:6px; } }
@media(max-width:760px) {
  .proteus-story.piq-enhanced { height:320vh; }.piq-sticky { padding:90px 20px 24px; gap:20px; min-height:700px; }.piq-enhanced .piq-sticky { min-height:650px; }
  .piq-product-line { gap:10px; font-size:9px; }.piq-product-category { padding-left:10px; font-size:9px; }.piq-heading h2 { font-size:clamp(32px,7.7vw,54px); margin:16px 0 10px; }.piq-heading>p { font-size:11px; max-width:275px; }
  .piq-stage { min-height:280px; max-height:410px; }.piq-app { width:calc(100% - 5px); max-width:510px; height:330px; border-radius:14px; }.piq-app-top { height:51px; padding:0 15px; }.piq-wordmark { width:124px; }.piq-app-nav { gap:10px; font-size:8px; }.piq-profile { padding:4px 9px; }.piq-app-body { padding:0 16px; }.piq-app-title { font-size:17px; }.piq-app-subtitle { font-size:8px; }.piq-app-steps { margin:12px 0; }.piq-app-step { font-size:8px; }.piq-app-step b { width:20px; height:20px; font-size:8px; }.piq-app-panels { height:181px; }.piq-upload-panel,.piq-formats-panel { padding:12px 10px; border-radius:11px; }.piq-glass-title { font-size:9px; margin-bottom:10px; }.piq-dropzone { height:132px; }.piq-uploaded>img { height:90px; }.piq-uploaded>div { font-size:8px; }.piq-preset-grid { gap:4px; }.piq-preset { height:48px; padding:6px 4px; }.piq-preset b { font-size:5.7px; }.piq-preset small { font-size:5px; }.piq-preset i { font-size:4px; right:4px; bottom:4px; gap:3px; }.piq-preset i::before { height:12px; width:calc(12px * var(--ratio)); }.piq-preset.is-picked::after { width:3px; height:3px; right:3px; top:3px; }.piq-generate { margin-top:9px; font-size:8px; }.piq-generate small { font-size:6px; }.piq-generate>span { padding:5px 10px; }
  .piq-drag-card { width:125px; }.piq-demo-cursor { width:20px; height:25px; }.piq-generation { width:75%; max-width:350px; }.piq-generating-label { font-size:10px; }  .piq-gallery { inset:0 -12px 65px; }.piq-output--wide { width:57%; left:50%; top:45%; }.piq-output--portrait { width:32%; left:22%; top:52%; }.piq-output--story { width:27%; left:81%; top:48%; }.piq-output--sky { width:10%; left:10%; top:39%; }.piq-output figcaption { font-size:7px; margin-top:9px; }.piq-output figcaption>b { font-size:6px; }.piq-art { border-radius:5px; }
  .piq-format-picker { flex-wrap:wrap; gap:5px; bottom:0; }.piq-format-picker>span { flex-basis:100%; text-align:center; margin:0 0 4px; font-size:8px; }.piq-format-picker button { padding:7px 9px; font-size:8px; }.piq-format-picker button>b { font-size:7px; margin-left:3px; }
  .piq-narration { min-height:54px; margin-bottom:15px; }.piq-beat-title { font-size:16px; }.piq-beat-description { font-size:10px; max-width:300px; margin:6px auto 0; }.piq-timeline button { display:flex; flex-direction:column; gap:6px; padding:11px 4px 4px; font-size:8px; }.piq-timeline button>span { font-size:7px; }.piq-preview-note { font-size:7px; margin-top:14px; }.piq-orbit { width:320px; height:170px; }.piq-orbit--two { width:530px; height:280px; }
  .proteus-story.piq-manual { height:auto; }.piq-manual .piq-sticky { min-height:760px; padding-top:55px; }.piq-manual .piq-stage { height:340px; }
}
@media(max-width:760px) and (max-height:740px) { .piq-sticky { padding-top:79px; gap:12px; }.piq-heading h2 { font-size:32px; margin:12px 0 7px; }.piq-stage { min-height:260px; }.piq-app { transform-origin:50% 50%; }.piq-narration { margin-bottom:9px; }.piq-preview-note { margin-top:9px; } }
@media(prefers-reduced-motion:reduce) { .proteus-story.piq-enhanced { height:auto; }.piq-enhanced .piq-sticky { position:relative; height:auto; min-height:780px; }.piq-stage { flex:none; height:390px; }.proteus-story * { transition:none!important; }.piq-scroll-note { display:none; } }

/* Match the advertisement: original image, soft brand light and a quiet progress bar. */
.piq-drag-card { isolation:isolate; backface-visibility:hidden; }
.piq-drag-card>img, .piq-uploaded>img, .piq-generation-frame>img, .piq-art>img { color-scheme:only light; forced-color-adjust:none; filter:none; mix-blend-mode:normal; background:#fff; }
.piq-drag-card>img { transform:translateZ(0); }
.piq-generation { top:46%; width:min(400px,65%); }
.piq-generation-progress { width:65%; height:3px; overflow:hidden; margin:24px auto 0; border-radius:5px; background:#ffffff0c; }
.piq-generation-progress i { display:block; height:100%; transform-origin:left; background:linear-gradient(90deg,#24c8de,#8e63ea); border-radius:inherit; }
.piq-enhanced:not([data-piq-beat="3"]) .piq-stage::before { inset:-20% -5%; background:radial-gradient(ellipse at 75% 25%,#04c8d326,transparent 58%),radial-gradient(ellipse at 15% 90%,#7c35e630,transparent 65%); -webkit-mask-image:radial-gradient(ellipse at center,#000 20%,transparent 70%); mask-image:radial-gradient(ellipse at center,#000 20%,transparent 70%); }
.piq-enhanced:not([data-piq-beat="3"]) .piq-stage-grid, .piq-enhanced:not([data-piq-beat="3"]) .piq-orbit { opacity:0; }
@media(max-width:760px) { .piq-generation { width:73%; } }

.piq-upload-progress i{width:100%!important;transform-origin:left center;transform:scaleX(0)}

/* Link to the live webapp: top-right, on the product line, clear of every stage's artwork. Absolute, so the scene never shifts. */
.piq-visit { position:absolute; right:0; top:-12px; display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:999px; font:600 14px/1 var(--font-head); color:#fff; text-decoration:none; white-space:nowrap; background:linear-gradient(to bottom,#ffffff33,#fff0 55%),linear-gradient(to right,#0ea5e9,#2563eb); box-shadow:0 14px 30px -14px #2563ebf2,inset 0 1px 2px #ffffff66,inset 0 -1px 3px #00000033; transition:filter .2s ease,transform .2s cubic-bezier(.34,1.56,.64,1); }
.piq-visit svg { width:16px; height:16px; }
.piq-visit:hover { filter:brightness(1.1); transform:translateY(-1px); }
.piq-visit:active { transform:translateY(1px) scale(.98); }
.piq-visit:focus-visible { outline:2px solid #7dd3fc; outline-offset:3px; }
@media(max-width:760px) { .piq-visit { top:-6px; padding:8px 12px; gap:6px; font-size:11px; } .piq-visit svg { width:12px; height:12px; } }
@media(max-height:800px) and (min-width:761px) { .piq-visit { top:-5px; padding:8px 15px; font-size:12px; gap:8px; } .piq-visit svg { width:13px; height:13px; } }