/* Process tab for first-time visitors (static/js/process-onboarding.js, 2026-10-07). Site theme v2 palette. */
body .pon-intro{position:relative;display:grid;grid-template-columns:minmax(190px,250px) minmax(0,1fr);gap:26px;align-items:center;margin:0;padding:30px;overflow:hidden;
  border:1px solid rgba(111,227,255,.32);border-radius:18px;background:radial-gradient(120% 140% at 0% 0%,rgba(31,201,241,.14),transparent 55%),radial-gradient(120% 140% at 100% 100%,rgba(138,125,255,.14),transparent 55%),rgba(5,10,28,.78);
  font-family:Montserrat,system-ui,sans-serif;color:#e9f3ff}
#tab-process .pon-reopen[hidden]{display:none!important}
body .pon-intro__text{display:grid;gap:10px;min-width:0}
body .pon-intro__kicker{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#1fc9f1}
body .pon-intro__title{margin:0!important;font:900 20px/1.25 Montserrat,system-ui,sans-serif!important;letter-spacing:-.01em!important;text-transform:none!important;color:#fff!important}
body .pon-intro__lead{margin:0;font-size:13.5px;line-height:1.55;color:rgba(214,229,250,.75)}
body .pon-steps{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin:4px 0 0;padding:0;list-style:none}
body .pon-steps li{display:flex;gap:10px;align-items:center;padding:8px 12px;border:1px solid rgba(110,170,255,.18);border-radius:12px;background:rgba(2,6,18,.55)}
body .pon-steps__n{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#1fc9f1,#8a7dff);color:#041019;font-size:12px;font-weight:900}
body .pon-steps span:last-child{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0}
body .pon-steps b{font-size:13px;font-weight:800;line-height:1.3;color:#fff}
body .pon-steps small{font-size:12px;line-height:1.4;color:rgba(214,229,250,.6)}
body .pon-intro__foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:12.5px;color:rgba(214,229,250,.7)}
body .pon-intro__level::before{content:"★ ";color:#ffd27a}
body .pon-intro__guide{color:#7fe9ff;font-weight:800;text-decoration:none}
body .pon-intro__guide:hover{color:#fff;text-decoration:underline}
body .pon-intro__close{justify-self:start;min-height:38px;padding:0 18px;border:1px solid rgba(111,227,255,.45);border-radius:10px;background:rgba(31,201,241,.12);color:#e9fbff;font:800 13px/1 Montserrat,system-ui,sans-serif;cursor:pointer}
body .pon-intro__close:hover{border-color:#1fc9f1;background:rgba(31,201,241,.22)}
#tab-process .pon-reopen{display:inline-flex;align-items:center;gap:6px;margin:0 0 12px;padding:6px 12px;border:1px solid rgba(110,170,255,.25);border-radius:999px;background:rgba(2,6,18,.55);color:#7fe9ff;font:700 12.5px/1 Montserrat,system-ui,sans-serif;cursor:pointer}
#tab-process .pon-reopen::before{content:"?";display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:rgba(31,201,241,.2);font-size:11px;font-weight:900}
#tab-process .pon-reopen:hover{border-color:#1fc9f1;color:#fff}

/* the little Steam profile */
body .pon-demo{display:grid;gap:8px;padding:12px;border:1px solid rgba(110,170,255,.22);border-radius:12px;background:linear-gradient(180deg,#1b2838,#10171f);box-shadow:0 14px 40px rgba(0,0,0,.4)}
body .pon-demo__head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}
body .pon-demo__avatar{width:30px;height:30px;border-radius:4px;background:url('/static/img/samples/sample-art-960.webp?v=1') 46% 28%/360% auto no-repeat;border:2px solid #4c6b22}
body .pon-demo__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:800;color:#fff}
body .pon-demo__level{display:grid;place-items:center;width:24px;height:24px;border:2px solid #8a7dff;border-radius:50%;font-size:10px;font-weight:800;color:#e9f3ff;white-space:nowrap}
body .pon-demo__showcase{position:relative;display:grid;gap:6px;padding:8px;border-radius:6px;background:rgba(0,0,0,.35);outline:2px solid #1fc9f1;outline-offset:2px;box-shadow:0 0 22px rgba(31,201,241,.45)}
body .pon-demo__label{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#7fe9ff}
body .pon-demo__parts{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
body .pon-demo__parts i{display:block;aspect-ratio:2/5;border-radius:2px;background:url('/static/img/samples/sample-art-960.webp?v=1') no-repeat;background-size:500% auto;background-position:calc(var(--i) * 25%) 40%;animation:pon-glow 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * .18s)}
@keyframes pon-glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}
body .pon-demo__rest{display:block;height:10px;border-radius:3px;background:rgba(255,255,255,.07)}
body .pon-demo__rest.is-short{width:62%}
@media (prefers-reduced-motion:reduce){body .pon-demo__parts i{animation:none}}

/* the window */
body.pon-modal-open{overflow:hidden}
.pon-modal{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;padding:16px;opacity:0;transition:opacity .2s ease}
.pon-modal.is-open{opacity:1}
.pon-modal__backdrop{position:absolute;inset:0;background:rgba(2,5,12,.72);backdrop-filter:blur(6px)}
.pon-modal__dialog{position:relative;width:min(820px,100%);max-height:calc(100dvh - 32px);overflow:auto;box-shadow:0 30px 90px rgba(0,0,0,.6);transform:translateY(10px) scale(.98);transition:transform .25s ease}
.pon-modal.is-open .pon-modal__dialog{transform:none}
body .pon-modal__dialog.pon-intro{background:radial-gradient(120% 140% at 0% 0%,rgba(31,201,241,.16),transparent 55%),radial-gradient(120% 140% at 100% 100%,rgba(138,125,255,.16),transparent 55%),linear-gradient(180deg,#0e1a3c,#050a1c)}
.pon-modal__dialog::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,#1fc9f1,#8a7dff)}
.pon-modal__x{position:absolute;top:14px;right:14px;z-index:1;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid rgba(110,170,255,.3);border-radius:10px;background:rgba(2,6,18,.6);color:#e9f3ff;font:700 18px/1 Montserrat,system-ui,sans-serif;cursor:pointer}
.pon-modal__x:hover{border-color:#1fc9f1}
body .pon-intro__close{min-height:44px!important;padding:0 26px!important;border-color:transparent!important;background:linear-gradient(90deg,#1fc9f1,#8a7dff)!important;color:#041019!important}
body .pon-intro__title{padding-right:30px}
@media (prefers-reduced-motion:reduce){.pon-modal,.pon-modal__dialog{transition:none}}

/* step 2 */
#tab-process #processModeCard .mode{position:relative}
#tab-process .pon-badge{margin:0;position:absolute;top:-10px;left:50%;transform:translateX(-50%);z-index:2;padding:3px 10px;border-radius:999px;background:linear-gradient(90deg,#1fc9f1,#8a7dff);color:#041019;font:800 10.5px/1.4 Montserrat,system-ui,sans-serif;white-space:nowrap}
#tab-process #processModeCard .mode>small{display:none!important}
#tab-process #processModeCard .modes{padding-top:8px}

/* step 4 for guests: a quiet tip */
#tab-process .process-readiness-hint.pon-guest{display:flex!important;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:10px 14px!important;border:1px dashed rgba(110,170,255,.25)!important;border-left-width:1px!important;border-radius:12px!important;background:rgba(2,6,18,.35)!important}
#tab-process .process-readiness-hint.pon-guest[hidden]{display:none!important}
#tab-process .process-readiness-hint.pon-guest>span{flex:1 1 220px;font:500 12.5px/1.5 Montserrat,system-ui,sans-serif!important;color:rgba(214,229,250,.65)!important}
#tab-process .process-readiness-hint.pon-guest .btn{min-height:32px!important;padding:4px 14px!important;font-size:12.5px!important}

@media (max-width:640px){
  body .pon-intro{grid-template-columns:minmax(0,1fr);padding:22px 18px 18px;gap:16px}
  body .pon-demo{max-width:260px}
  body .pon-intro__title{font-size:18px!important}
}

/* Result dialog (static/js/process-result.js, 2026-10-07): parts shown with Steam's gaps, "what next" on the
   right with the extension as the main path, the console steps folded, no monospace labels. */
body.site-v2 .workspace-result-modal__body{grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr)!important}
body.site-v2 .workspace-result__side{display:grid;gap:16px;align-content:start;min-width:0;padding-left:20px;border-left:1px solid rgba(110,170,255,.16)}
body.site-v2 .workspace-result__side .workspace-result__readiness{padding:0!important;border:0!important}
body.site-v2 .workspace-result__side .workspace-result__steam{margin:0!important;padding:18px!important;border:1px solid rgba(111,227,255,.32)!important;border-radius:14px!important;background:radial-gradient(120% 140% at 0% 0%,rgba(31,201,241,.10),transparent 60%),rgba(5,10,28,.7)!important}
body.site-v2 .workspace-result__section-title{font:800 16px/1.3 Montserrat,system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:#fff!important}
body.site-v2 .workspace-result__ext{display:grid;gap:8px;margin-top:12px;padding:14px;border:1px solid rgba(110,170,255,.2);border-radius:12px;background:rgba(2,6,18,.6)}
body.site-v2 .workspace-result__ext>b{font:800 14px/1.3 Montserrat,system-ui,sans-serif;color:#fff}
body.site-v2 .workspace-result__ext>p{margin:0;font:500 13px/1.5 Montserrat,system-ui,sans-serif;color:rgba(214,229,250,.75)}
body.site-v2 .workspace-result__ext-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
body.site-v2 .workspace-result__ext-actions [hidden]{display:none!important}
body.site-v2 .workspace-result__ext-note{font:500 12px/1.45 Montserrat,system-ui,sans-serif;color:rgba(214,229,250,.55)}
body.site-v2 .workspace-result__ext-note[hidden]{display:none}
body.site-v2 .workspace-result__manual{margin-top:12px;border-top:1px solid rgba(110,170,255,.14);padding-top:10px}
body.site-v2 .workspace-result__manual>summary{cursor:pointer;color:rgba(214,229,250,.8);font:700 13px/1.4 Montserrat,system-ui,sans-serif;list-style:none}
body.site-v2 .workspace-result__manual>summary::-webkit-details-marker{display:none}
body.site-v2 .workspace-result__manual>summary::before{content:"+ ";color:#1fc9f1;font-weight:900}
body.site-v2 .workspace-result__manual[open]>summary::before{content:"– "}
body.site-v2 .workspace-result__steam-steps{font-family:Montserrat,system-ui,sans-serif!important}
body.site-v2 .workspace-result__readiness.is-empty .workspace-result__section-title{font-size:13.5px!important;color:rgba(214,229,250,.75)!important}
body.site-v2 .workspace-result__readiness.is-empty .workspace-result__readiness-empty{padding:12px 14px!important;border-style:dashed!important;border-radius:12px!important;background:rgba(2,6,18,.35)!important}
body.site-v2 .workspace-result__readiness.is-empty .workspace-result__readiness-empty>span{font-family:Montserrat,system-ui,sans-serif!important;border-radius:50%}
body.site-v2 .workspace-result__readiness-empty p{font-family:Montserrat,system-ui,sans-serif!important}
body.site-v2 .workspace-result__parts{gap:4px!important}
body.site-v2 .workspace-result__files{font:500 12px/1.5 Montserrat,system-ui,sans-serif!important}
body.site-v2 .workspace-result-modal__eyebrow{display:none!important}
@media (max-width:1100px){body.site-v2 .workspace-result-modal__body{grid-template-columns:minmax(0,1fr)!important}body.site-v2 .workspace-result__side{padding-left:0;border-left:0}}

/* Empty preview in the site look (2026-10-07, owner: "too far from the site style"): navy panel with the light
   fields, the sample art dimmed and cut like the chosen showcase type, content centred in the box. */
body.site-v2 #tab-process #wmCanvasWrap{border:1px solid rgba(110,170,255,.18)!important;border-radius:14px!important;
  background:radial-gradient(70% 90% at 15% 0%,rgba(31,201,241,.10),transparent 65%),radial-gradient(70% 90% at 100% 100%,rgba(138,125,255,.12),transparent 65%),linear-gradient(180deg,#0b1430,#050a1c)!important}
body.site-v2 #tab-process #wmCanvasEmpty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;margin:auto;padding:28px 20px!important;font:500 13px/1.55 Montserrat,system-ui,sans-serif!important;color:rgba(214,229,250,.62)!important}
body.site-v2 #tab-process #wmCanvasEmpty strong{font:800 17px/1.3 Montserrat,system-ui,sans-serif!important;color:#fff!important}
body.site-v2 #tab-process #wmCanvasEmpty>.btn{min-height:42px;margin-top:6px!important;padding:0 20px!important;border:0!important;border-radius:11px!important;background:linear-gradient(90deg,#1fc9f1,#8a7dff)!important;color:#041019!important;font:800 13.5px/1 Montserrat,system-ui,sans-serif!important;box-shadow:0 10px 28px rgba(31,201,241,.22)}
body.site-v2 #tab-process #wmCanvasEmpty>.btn:hover{filter:brightness(1.08)}
body.site-v2 #tab-process .editor-preview-sample{gap:6px!important;width:min(78%,340px)!important;max-width:none!important;height:auto!important;aspect-ratio:2.4/1;margin:0 0 8px!important;transform:none!important}
body.site-v2 #tab-process .editor-preview-sample i{position:relative;flex:1;overflow:hidden;border:1px solid rgba(111,227,255,.35)!important;border-radius:6px!important;
  background:url('/static/img/samples/sample-art-960.webp?v=1') no-repeat!important;background-size:500% 100%!important;filter:brightness(.6) saturate(.85);box-shadow:0 0 18px rgba(31,201,241,.12)}
body.site-v2 #tab-process .editor-preview-sample i::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,10,28,.55))}
body.site-v2 #tab-process .editor-preview-sample i:nth-child(1){background-position:0 50%!important}
body.site-v2 #tab-process .editor-preview-sample i:nth-child(2){background-position:25% 50%!important}
body.site-v2 #tab-process .editor-preview-sample i:nth-child(3){background-position:50% 50%!important}
body.site-v2 #tab-process .editor-preview-sample i:nth-child(4){background-position:75% 50%!important}
body.site-v2 #tab-process .editor-preview-sample i:nth-child(5){background-position:100% 50%!important}
body.site-v2 #tab-process .editor-preview-sample[data-preview-mode=featured] i:first-child{background-size:cover!important;background-position:50% 40%!important}
body.site-v2 #tab-process .editor-preview-sample[data-preview-mode=split] i:first-child{background-size:120% 100%!important;background-position:0 50%!important}
body.site-v2 #tab-process .editor-preview-sample[data-preview-mode=split] i:nth-child(2){flex:.198!important;background-size:605% 100%!important;background-position:100% 50%!important}
/* Owner sketch (same day): the empty state is one framed block that fills most of the preview box. Its size follows
   the box height (--pc-canvas is the pinned preview height, process-compact.js), so it never gets clipped. */
body.site-v2 #tab-process #wmCanvasEmpty{width:min(720px,calc(100% - 40px))!important;max-width:none;height:auto!important;max-height:calc(100% - 16px);margin:auto!important;padding:clamp(4px,calc((var(--pc-canvas,560px) - 150px) / 6),24px) 0!important;gap:clamp(4px,calc((var(--pc-canvas,560px) - 150px) / 8),10px)!important;box-sizing:border-box}
/* The art shrinks with the box and disappears when the box is too low for it (laptops with a short window). */
/* Same proportions as the sample art (1672x941), so the slices show it undistorted. */
body.site-v2 #tab-process .editor-preview-sample{width:auto!important;height:min(250px,max(0px,calc(var(--pc-canvas,560px) - 175px)))!important;aspect-ratio:1672/941;margin:0 0 6px!important}
body.site-v2 #tab-process #wmCanvasEmpty strong{font-size:clamp(16px,1.4vw,21px)!important}
/* the hint line folds away on a very low box (font-size 0), the title and the button always fit */
body.site-v2 #tab-process #wmCanvasEmpty>span{font-size:clamp(0px,calc(var(--pc-canvas,560px) - 175px),14px);line-height:1.5}
@media (max-width:640px){body.site-v2 #tab-process #wmCanvasEmpty{width:calc(100% - 24px)!important}body.site-v2 #tab-process .editor-preview-sample{height:auto!important;width:min(100%,260px)!important}}
/* Short pinned preview (laptops ~768 px tall): no room for the art, keep only the title and the button. */
@media (min-width:1051px) and (max-height:820px){body.site-v2 #tab-process .editor-preview-sample{display:none!important}}

/* "Find my showcase" wizard inside the window (process-onboarding.js, 2026-10-08). */
body .pon-intro__actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
body .pon-intro__start{min-height:44px;padding:0 22px;border:0;border-radius:10px;background:linear-gradient(90deg,#1fc9f1,#8a7dff);color:#041019;
  font:800 13.5px/1 Montserrat,system-ui,sans-serif;cursor:pointer;box-shadow:0 10px 28px rgba(31,201,241,.25)}
body .pon-intro__start:hover{filter:brightness(1.08)}
body .pon-intro__actions .pon-intro__close{border:1px solid rgba(111,227,255,.45)!important;background:rgba(31,201,241,.08)!important;color:#e9fbff!important}
body .pon-modal__dialog[data-view="wizard"]{display:block;width:min(640px,100%)}
body .pon-wiz{display:grid;gap:14px}
body .pon-wiz__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-right:44px}
body .pon-wiz__step{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#1fc9f1}
body .pon-wiz__dots{display:flex;gap:6px}
body .pon-wiz__dots i{width:26px;height:4px;border-radius:4px;background:rgba(110,170,255,.2)}
body .pon-wiz__dots i.is-on{background:linear-gradient(90deg,#1fc9f1,#8a7dff)}
body .pon-wiz .pon-intro__title{font-size:22px!important;padding-right:0}
body .pon-wiz__hint{margin:0;font-size:14px;line-height:1.55;color:rgba(214,229,250,.78)}
body .pon-wiz__options{display:grid;gap:10px}
body .pon-wiz__options.is-types{grid-template-columns:repeat(2,minmax(0,1fr))}
body .pon-opt{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:14px 16px;border:1px solid rgba(110,170,255,.24);border-radius:14px;
  background:rgba(2,6,18,.55);color:#e9f3ff;text-align:left;cursor:pointer;font-family:Montserrat,system-ui,sans-serif;transition:border-color .2s,background .2s,transform .2s}
body .pon-opt:hover,body .pon-opt:focus-visible{border-color:#1fc9f1;background:rgba(31,201,241,.1);transform:translateY(-1px);outline:none}
body .pon-opt.is-quiet{border-style:dashed;background:transparent}
body .pon-opt__body{display:grid;gap:3px;min-width:0}
body .pon-opt__body b{font-size:15px;font-weight:800;line-height:1.3;color:#fff}
body .pon-opt__body small{font-size:12.5px;line-height:1.4;color:rgba(214,229,250,.62)}
body .pon-wiz__options.is-types .pon-opt{flex-direction:column;align-items:flex-start;gap:12px;min-height:0}
body .pon-diagram{display:flex;gap:3px;width:100%;height:46px}
body .pon-diagram i{flex:1;border-radius:3px;background:url('/static/img/samples/sample-art-960.webp?v=1') no-repeat;background-size:500% 100%;border:1px solid rgba(111,227,255,.35)}
body .pon-diagram--workshop i:nth-child(1){background-position:0 50%}
body .pon-diagram--workshop i:nth-child(2){background-position:25% 50%}
body .pon-diagram--workshop i:nth-child(3){background-position:50% 50%}
body .pon-diagram--workshop i:nth-child(4){background-position:75% 50%}
body .pon-diagram--workshop i:nth-child(5){background-position:100% 50%}
body .pon-diagram--featured i{background-size:cover;background-position:50% 40%}
body .pon-diagram--split i:first-child{flex:5;background-size:120% 100%;background-position:0 50%}
body .pon-diagram--split i:last-child{flex:1;background-size:605% 100%;background-position:100% 50%}
body .pon-diagram--unknown{display:grid;place-items:center;border:1px dashed rgba(110,170,255,.3);border-radius:6px;font:900 20px/1 Montserrat,system-ui,sans-serif;color:rgba(214,229,250,.5)}
body .pon-wiz__row{display:flex;flex-wrap:wrap;gap:10px}
body .pon-wiz__cta{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:11px;background:linear-gradient(90deg,#1fc9f1,#8a7dff);color:#041019!important;
  font:800 14px/1 Montserrat,system-ui,sans-serif;text-decoration:none!important;box-shadow:0 10px 28px rgba(31,201,241,.25)}
body .pon-wiz__cta::after{content:" \2197";margin-left:6px}
body .pon-wiz__ghost{min-height:46px;padding:0 20px;border:1px solid rgba(111,227,255,.45);border-radius:11px;background:rgba(31,201,241,.08);color:#e9fbff;font:800 13.5px/1 Montserrat,system-ui,sans-serif;cursor:pointer}
body .pon-wiz__ghost:hover{border-color:#1fc9f1}
body .pon-wiz__back{justify-self:start;padding:6px 0;border:0;background:none;color:rgba(214,229,250,.65);font:700 13px/1 Montserrat,system-ui,sans-serif;cursor:pointer}
body .pon-wiz__back:hover{color:#fff}
@media (max-width:640px){body .pon-wiz__options.is-types{grid-template-columns:minmax(0,1fr)}body .pon-wiz .pon-intro__title{font-size:19px!important}}