/* Homepage visual refinements, isolated by the root namespace. */
html.visual-refinement{--visual-secondary:#a8acac;--max:1580px}
html.visual-refinement[data-theme="light"]{--visual-secondary:#62615b}

/* Give the English hero headline more breathing room at every screen size. */
html.visual-refinement:lang(en) .hero h1{letter-spacing:-.015em}

/* A centered artwork sits inside equal black side regions at every width. */
.visual-refinement .hero.hero-scene{
 --hero-art-width:min(1700px,calc(100% - var(--page)*2));
 --hero-art-inset:max(var(--page),calc((100% - 1700px)/2));
 --hero-edge-fade:clamp(48px,6vw,100px);
 background:#08090b;
}
.visual-refinement .hero.hero-scene>.hero-image{
 width:var(--hero-art-width);margin-inline:auto;
 /* Finish the fade before the raster edge, leaving the viewfinder overlay crisp. */
 -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 4%,#000 calc(4% + var(--hero-edge-fade)),#000 calc(96% - var(--hero-edge-fade)),transparent 96%,transparent 100%);
 mask-image:linear-gradient(90deg,transparent 0,transparent 4%,#000 calc(4% + var(--hero-edge-fade)),#000 calc(96% - var(--hero-edge-fade)),transparent 96%,transparent 100%);
}
.visual-refinement .hero.hero-scene::before{
 width:var(--hero-art-width);margin-inline:auto;
}
@media(min-width:901px){
 /* The scene now reaches the section edge; no empty caption rail below it. */
 .visual-refinement .hero.hero-scene{min-height:730px;height:min(820px,calc(93svh - 80px))}
 .visual-refinement .hero.hero-scene>.hero-image{object-position:center bottom}
 .visual-refinement .hero.hero-scene .frame-corners{
  right:auto;left:auto;inset-inline-end:calc(var(--hero-art-inset) + 24px);
  width:calc((100% - var(--hero-art-inset)*2)*.42);
 }
 .visual-refinement .hero.hero-scene .hero-axis{
  right:auto;left:auto;inset-inline-end:calc(var(--hero-art-inset) + 24px);
 }
}

/* Keep the approved mark; add a restrained, readable brand name beside it. */
.visual-refinement #header .logo,
.visual-refinement #footer .footer-brand .logo{
 display:inline-flex;
 align-items:center;
 gap:11px;
 letter-spacing:0;
 white-space:nowrap;
 flex:none;
}
.visual-refinement .visual-wordmark{
 display:inline-block;
 font-family:var(--font);
 font-size:19px;
 font-weight:600;
 line-height:1;
 letter-spacing:-.035em;
 direction:ltr;
 unicode-bidi:isolate;
}
.visual-refinement #footer .visual-wordmark{font-size:24px;font-weight:550}
.visual-refinement #header.visual-brand-compact .visual-wordmark{display:none}
@media(min-width:1181px){
 .visual-refinement #header .wrap{gap:clamp(18px,1.8vw,28px)}
 .visual-refinement #header .nav{gap:clamp(13px,1.2vw,21px);white-space:nowrap}
 .visual-refinement #header .header-actions{gap:10px;flex:none}
}
@media(max-width:1180px){
 .visual-refinement #header .visual-wordmark{display:none}
}

/* A helpful notice, with the existing language and dismissal behavior intact. */
.visual-refinement #official-site-banner{
 align-items:center;
 gap:14px;
 padding:5px max(24px,calc((100vw - 1380px)/2));
 background:var(--panel);
 border-bottom:1px solid var(--line);
 box-shadow:none;
}
.visual-refinement #official-site-banner p{
 color:var(--soft);
 font-size:12px;
 line-height:1.6;
 font-weight:400;
}
.visual-refinement #official-site-banner a{
 color:var(--text);
 font-weight:500;
 text-decoration-color:var(--control-border);
 text-underline-offset:3px;
}
.visual-refinement #official-site-banner button{
 display:grid;
 place-items:center;
 width:36px;
 min-width:36px;
 height:36px;
 min-height:36px;
 padding:0;
 border:0;
 border-radius:50%;
 background:transparent;
 color:var(--soft);
 font-size:0;
 flex:none;
}
.visual-refinement #official-site-banner button::before{
 content:"\00d7";
 font:22px/1 var(--font);
}
.visual-refinement #official-site-banner button:hover{background:var(--raised);color:var(--text)}

/* Feature name, editorial headline, then useful explanatory text. */
.visual-refinement #workflow .support-grid{gap:24px;margin-top:30px}
.visual-refinement #reference.support-card,
.visual-refinement #camera.support-card{
 padding:25px;
 border-radius:12px;
 border:1px solid var(--line);
 background:var(--panel);
}
.visual-refinement #reference.support-card::before,
.visual-refinement #camera.support-card::before{display:none}
.visual-refinement #reference .support-feature-name,
.visual-refinement #camera .support-feature-name{
 justify-content:flex-start;
 gap:8px;
 padding:0;
 border:0;
 margin:0 0 20px;
 font-size:12px;
 font-weight:500;
 line-height:1.5;
 letter-spacing:.055em;
 color:var(--accent);
 text-align:start;
}
.visual-refinement #reference .support-feature-name{margin:0}
.visual-refinement #reference .support-feature-name .icon,
.visual-refinement #camera .support-feature-name .icon{width:17px;height:17px}
.visual-refinement #reference{gap:20px}
.visual-refinement #reference .reference-content h3,
.visual-refinement #camera .support-heading h3{
 font-size:clamp(23px,1.9vw,27px);
 font-weight:550;
 line-height:1.23;
 letter-spacing:-.03em;
 margin:0;
}
.visual-refinement #reference .reference-content>p,
.visual-refinement #camera .support-heading p{
 font-size:14px;
 line-height:1.75;
 margin-top:12px;
 color:var(--soft);
}
.visual-refinement #reference .reference-code-row{gap:10px;margin-top:17px}
.visual-refinement #reference .reference-code-row span{
 padding:0;
 border:0;
 border-radius:0;
 font:11px/1.6 var(--font);
 letter-spacing:.015em;
 color:var(--visual-secondary);
 animation:none;
}
.visual-refinement #reference .reference-code-row span+span::before{
 content:"\00b7";
 margin-inline-end:10px;
 color:var(--muted);
}
.visual-refinement #reference .reference-details{margin-top:17px}
.visual-refinement #reference .reference-details summary{
 gap:12px;
 min-height:44px;
 padding:3px 0;
 font-size:13px;
 line-height:1.6;
 color:var(--text);
}
.visual-refinement #reference .reference-details summary:hover{color:var(--accent)}
.visual-refinement #reference .description-sample{padding:16px;margin-top:9px}
.visual-refinement #reference .description-sample p{font-size:13px;line-height:1.8}
.visual-refinement #reference .description-sample small{font-size:11px;line-height:1.65;color:var(--visual-secondary)}
.visual-refinement #reference .description-sample .copy-button{font-size:12px;min-height:40px}
.visual-refinement #camera .compact-camera-body{margin-top:20px;gap:18px}
.visual-refinement #camera .camera-buttons{gap:8px}
.visual-refinement #camera .camera-buttons button,
.visual-refinement #camera .lens-row button{
 font-size:12px;
 min-height:38px;
 border-color:var(--line);
}
.visual-refinement #camera :is(.camera-buttons,.lens-row) button.active{
 border-color:var(--accent);
 background:var(--raised);
 color:var(--text);
}
.visual-refinement #camera .lens-row>span{font-size:11px}
.visual-refinement #camera .camera-note{font-size:11px;line-height:1.6;margin-top:15px;color:var(--visual-secondary)}

/* Raise explanatory copy selectively; the optical instrument UI keeps its scale. */
.visual-refinement .vc-introduction p,
.visual-refinement #workflow .section-heading>p,
.visual-refinement #assets .assets-heading>p,
.visual-refinement .edit-copy>p{font-size:14px;line-height:1.75}
.visual-refinement .faq details p{font-size:14px;line-height:1.8}

/* Payment brands retain their original files, colors and proportions. */
.visual-refinement #footer .footer-brand p{margin-top:17px;font-size:14px;line-height:1.75}
.visual-refinement #footer .pay-methods{gap:12px 24px;align-items:center}
.visual-refinement #footer .pay-methods ul{gap:7px}
.visual-refinement #footer .pay-mark{
 height:28px;
 padding:0 6px;
 border-radius:4px;
 background:#fff;
 border:1px solid #eeefec;
 box-shadow:none;
}
.visual-refinement #footer .pay-mark img{height:17px;width:auto;max-width:none;filter:none;opacity:1}
.visual-refinement #footer .pay-methods p{font-size:11px;font-weight:400;letter-spacing:.015em}

@media(max-width:900px){
 .visual-refinement #reference .reference-content h3,
 .visual-refinement #camera .support-heading h3{font-size:25px}
}
@media(max-width:600px){
 .visual-refinement #official-site-banner{gap:8px;padding:6px 14px;align-items:flex-start}
 .visual-refinement #official-site-banner p{font-size:11px;line-height:1.6;padding-block:3px}
 .visual-refinement #official-site-banner button{width:32px;min-width:32px;height:32px;min-height:32px}
 .visual-refinement #workflow .support-grid{gap:18px;margin-top:26px}
 .visual-refinement #reference.support-card,
 .visual-refinement #camera.support-card{padding:20px;border-radius:11px}
 .visual-refinement #reference{gap:20px}
 .visual-refinement #reference .support-feature-name,
 .visual-refinement #camera .support-feature-name{font-size:12px;letter-spacing:.035em}
 .visual-refinement #camera .support-feature-name{margin-bottom:16px}
 .visual-refinement #reference .reference-content h3,
 .visual-refinement #camera .support-heading h3{font-size:24px;line-height:1.28}
 .visual-refinement #reference .reference-content>p,
 .visual-refinement #camera .support-heading p{font-size:14px;line-height:1.75;margin-top:10px}
 .visual-refinement #reference .reference-code-row{margin-top:14px}
 .visual-refinement #reference .reference-details{margin-top:13px}
 .visual-refinement #camera .compact-camera-body{grid-template-columns:112px minmax(0,1fr);gap:12px;margin-top:18px}
 .visual-refinement #camera .camera-buttons button{font-size:11px;min-height:40px}
 .visual-refinement #camera .lens-row button{font-size:10px;min-height:36px}
 .visual-refinement .hero.hero-scene{height:auto;min-height:0}
 .visual-refinement .hero.hero-scene .wrap{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  height:auto;
  min-height:0;
  padding-top:370px;
  padding-bottom:36px;
 }
 .visual-refinement .hero.hero-scene .hero-meta{
  position:static;
  inset:auto;
  width:100%;
  margin-top:38px;
  gap:7px;
 }
 .visual-refinement .hero.hero-scene .hero-meta .meta-row{font-size:9px;gap:14px}
 .visual-refinement .hero.hero-scene .hero-credit{font-size:10px}
 .visual-refinement #footer .visual-wordmark{font-size:23px}
 .visual-refinement #footer .pay-methods{align-items:flex-start}
 .visual-refinement #footer .pay-mark{height:27px;padding-inline:6px}
 .visual-refinement #footer .pay-mark img{height:16px}
}
@media(max-width:375px){
 .visual-refinement .hero.hero-scene .wrap{min-height:0;padding-top:350px;padding-bottom:32px}
 .visual-refinement .hero.hero-scene .hero-meta{margin-top:32px}
 .visual-refinement #camera .compact-camera-body{grid-template-columns:96px minmax(0,1fr);gap:10px}
 .visual-refinement #reference .reference-content h3,
 .visual-refinement #camera .support-heading h3{font-size:22px}
}

/* A useful sample occupies the reference card's lower area, without a fake run. */
.visual-refinement #reference .visual-reference-output{
 grid-column:1/-1;
 min-width:0;
 padding-top:13px;
 border-top:1px solid var(--line);
 text-align:start;
}
.visual-refinement #reference .visual-reference-output .reference-details{margin:0}
.visual-refinement #reference .visual-reference-output .reference-details summary{
 display:flex;
 align-items:center;
 justify-content:space-between;
 flex-wrap:wrap;
 gap:5px 14px;
 width:100%;
 min-height:28px;
 padding:0;
 font-size:12px;
}
.visual-refinement #reference .visual-reference-label{
 font-size:11px;
 font-weight:550;
 line-height:1.5;
 color:var(--text);
 letter-spacing:.035em;
}
.visual-refinement #reference .visual-reference-action{
 display:inline-flex;
 align-items:center;
 gap:8px;
 min-width:0;
 font-size:11px;
 font-weight:400;
 line-height:1.5;
 color:var(--visual-secondary);
}
.visual-refinement #reference .visual-reference-action .icon{width:13px;height:13px}
.visual-refinement #reference .visual-reference-preview{margin-top:5px}
.visual-refinement #reference .visual-reference-excerpt{
 display:-webkit-box;
 -webkit-box-orient:vertical;
 -webkit-line-clamp:2;
 overflow:hidden;
 margin:0;
 font-size:13px;
 line-height:1.65;
 color:var(--soft);
}
.visual-refinement #reference .visual-reference-preview small{
 display:block;
 margin-top:8px;
 color:var(--visual-secondary);
 font-size:10px;
 line-height:1.5;
}
.visual-refinement #reference .visual-reference-output .description-sample{
 margin:8px 0 0;
 padding:0;
 border:0;
 background:transparent;
}
.visual-refinement #reference .reference-details[open]+.visual-reference-preview{display:none}
.visual-refinement #workflow .support-grid:has(#reference .reference-details[open]){align-items:start}
@media(max-width:600px){
 .visual-refinement #reference .visual-reference-output{padding-top:12px}
 .visual-refinement #reference .visual-reference-output .reference-details summary{min-height:36px}
 .visual-refinement #reference .visual-reference-excerpt{-webkit-line-clamp:3}
 .visual-refinement #reference .visual-reference-preview small{font-size:11px;line-height:1.55}
}

/* Keep the superseded workflow demo inert for the original application hooks. */
.visual-refinement #workflow .sw-layout[hidden]{display:none!important}

/* Shared scale for peer section headings across the homepage. */
html.visual-refinement{
 --home-section-title-size:clamp(32px,3vw,40px);
 --home-section-title-weight:550;
 --home-section-title-leading:1.16;
 --home-section-heading-gap:28px;
}
html.visual-refinement :is(#workflow .section-heading,#skills .skills-section-heading,#assets .assets-heading,#virtual-camera .vc-heading,#scene-gallery .scene-gallery-heading) h2{
 font-size:var(--home-section-title-size);font-weight:var(--home-section-title-weight);
 line-height:var(--home-section-title-leading);letter-spacing:-.035em;margin:0;color:var(--text);
}
html.visual-refinement :is(#workflow .section-heading,#skills .skills-section-heading,#assets .assets-heading){
 display:flex;justify-content:space-between;align-items:end;gap:36px;margin-bottom:var(--home-section-heading-gap);
}
html.visual-refinement :is(#workflow .section-heading,#skills .skills-section-heading,#assets .assets-heading)>div{min-width:0}
html.visual-refinement :is(#workflow .section-heading,#skills .skills-section-heading,#assets .assets-heading) .eyebrow{
 margin:0 0 12px;font-size:10px;line-height:1.6;font-weight:500;letter-spacing:.16em;
}
html.visual-refinement :is(#workflow .section-heading,#skills .skills-section-heading,#assets .assets-heading)>p{
 flex:0 1 410px;max-width:410px;margin:0;font-size:14px;line-height:1.75;color:var(--soft);
}
@media(max-width:900px){
 html.visual-refinement :is(#workflow .section-heading,#skills .skills-section-heading,#assets .assets-heading){display:block}
 html.visual-refinement :is(#workflow .section-heading,#skills .skills-section-heading,#assets .assets-heading)>p{max-width:580px;margin-top:14px}
}
@media(max-width:600px){
 html.visual-refinement{--home-section-title-size:30px;--home-section-heading-gap:24px}
 html.visual-refinement :is(#workflow .section-heading,#skills .skills-section-heading,#assets .assets-heading) .eyebrow{font-size:9px;letter-spacing:.13em;margin-bottom:10px}
 html.visual-refinement :is(#workflow .section-heading,#skills .skills-section-heading,#assets .assets-heading)>p{font-size:14px;margin-top:12px}
}

/* Remove the legacy forced asset-title offset to share the same eyebrow gap. */
html.visual-refinement #assets .assets-heading h2{margin-top:0!important}


/* Peer feature overviews share one typography, grid and spacing system. */
.visual-refinement .home-feature-overview{
 list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 gap:32px;margin:0;padding:0;border-block:1px solid var(--line);text-align:start;
}
.visual-refinement .home-feature-overview>li{
 display:grid;grid-template-columns:24px minmax(0,1fr);align-items:start;
 column-gap:14px;min-width:0;padding-block:26px 27px;padding-inline:0 28px;
}
.visual-refinement .home-feature-overview-number{
 font:11px/1.6 ui-monospace,monospace;color:var(--accent);padding-top:3px;
 direction:ltr;unicode-bidi:isolate;
}
.visual-refinement .home-feature-overview h3{
 font-size:19px;font-weight:550;line-height:1.4;letter-spacing:-.02em;margin:0;color:var(--text);
}
.visual-refinement .home-feature-overview p{
 font-size:13px;line-height:1.75;margin:8px 0 0;max-width:290px;color:var(--soft);
}
.visual-refinement #virtual-camera .vc-heading{margin-bottom:var(--home-section-heading-gap)}
.visual-refinement #virtual-camera .home-feature-overview{margin-bottom:30px}
.visual-refinement #virtual-camera .vc-showcase{box-shadow:0 16px 48px rgba(0,0,0,.12)}
@media(max-width:900px){
 .visual-refinement .home-feature-overview{gap:20px}
 .visual-refinement .home-feature-overview>li{column-gap:10px;grid-template-columns:20px minmax(0,1fr);padding-block:22px}
 .visual-refinement .home-feature-overview h3{font-size:17px}
}
@media(max-width:600px){
 .visual-refinement .home-feature-overview{grid-template-columns:1fr;gap:0}
 .visual-refinement .home-feature-overview>li{grid-template-columns:24px minmax(0,1fr);padding:19px 0;column-gap:13px}
 .visual-refinement .home-feature-overview>li+li{border-block-start:1px solid var(--line)}
 .visual-refinement .home-feature-overview h3{font-size:18px}
 .visual-refinement .home-feature-overview p{font-size:13px;margin-top:5px;max-width:100%}
 .visual-refinement #virtual-camera .home-feature-overview{margin-bottom:26px}
}