/* Only these explicitly opted-in portfolio pages are themed. Never enter a
   demo window: its controls, charts and embedded pages retain their colours. */
@media screen {
  html[data-portfolio-theme] {
    background: var(--portfolio-bg) !important;
    --portfolio-line: color-mix(in srgb, var(--portfolio-text) 24%, transparent);
    --portfolio-panel: rgba(255,255,255,.09);
  }
  html[data-portfolio-theme] body {
    background: var(--portfolio-bg) !important;
    color: var(--portfolio-text) !important;
    isolation: isolate;
    position: relative;
  }
  /* Reuse the cover's actual motif, not a generic texture. A fixed decorative
     plane keeps the motif visible alongside long demos without tiling seams. */
  html[data-portfolio-motif] body::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    z-index: -2 !important;
    pointer-events: none !important;
    width: min(92vw, 1440px);
    height: min(72vw, 1120px);
    top: 18vh;
    left: 20vw;
    background: none;
    opacity: .2;
    filter: none;
    mask: none;
    animation: none;
    box-sizing: border-box;
  }
  html[data-portfolio-layout="left"] body::before { left: -12vw; }
  html[data-portfolio-motif="paper"] body::before {
    background: var(--portfolio-accent);
    clip-path: polygon(4% 4%,95% 0,100% 100%,0 100%);
    opacity: .13;
  }
  html[data-portfolio-motif="sun"] body::before {
    background: var(--portfolio-accent);
    border-radius: 50%;
    width: min(86vw, 1200px);
    height: min(86vw, 1200px);
  }
  html[data-portfolio-motif="orbit"] body::before {
    border: 2px solid var(--portfolio-accent);
    border-radius: 50%;
    transform: rotate(-20deg);
  }
  html[data-portfolio-motif="stripes"] body::before {
    background: repeating-linear-gradient(125deg,transparent 0 62px,var(--portfolio-accent) 63px 65px);
  }
  html[data-portfolio-motif="grid"] body::before {
    background-image: linear-gradient(var(--portfolio-accent) 1px,transparent 1px),linear-gradient(90deg,var(--portfolio-accent) 1px,transparent 1px);
    background-size: 57px 57px;
    opacity: .1;
  }
  html[data-portfolio-motif="steps"] body::before {
    background: linear-gradient(135deg,transparent 35%,var(--portfolio-accent) 35% 52%,transparent 52% 65%,var(--portfolio-accent) 65%);
    opacity: .12;
  }
  html[data-portfolio-motif="route"] body::before {
    border: 3px solid var(--portfolio-accent);
    border-radius: 90px 0 150px 0;
    transform: rotate(9deg);
  }
  html[data-portfolio-motif="radar"] body::before {
    background: repeating-radial-gradient(circle,transparent 0 72px,var(--portfolio-accent) 73px 75px);
    opacity: .16;
  }
  html[data-portfolio-motif="loop"] body::before {
    border: 30px solid var(--portfolio-accent);
    border-radius: 240px;
    transform: rotate(-12deg);
    opacity: .12;
  }
  @media(max-width:760px) {
    html[data-portfolio-motif] body::before {
      width: 150vw;
      height: 180vw;
      left: 15vw;
      top: 22vh;
    }
    html[data-portfolio-layout="left"] body::before { left: -65vw; }
    html[data-portfolio-motif="sun"] body::before { height:150vw; }
  }
  html[data-portfolio-theme] body.unified-catalog {
    --black: var(--portfolio-text);
    --white: var(--portfolio-bg);
    --charcoal: var(--portfolio-text);
    --gray: var(--portfolio-text);
    --ink-60: var(--portfolio-text);
    --tint-4: var(--portfolio-panel);
    --tint-8: var(--portfolio-panel);
    --hairline: var(--portfolio-line);
  }
  html[data-portfolio-theme] .window { color: #f5f5f5; }
  /* One continuous frosted sheet between the original artwork and content.
     No content wrapper or per-section cards: demo layout remains untouched. */
  html[data-portfolio-theme] body::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: -1 !important;
    pointer-events: none !important;
    top: 12px;
    bottom: 12px;
    left: 50%;
    width: min(1240px, calc(100% - 32px));
    transform: translateX(-50%);
    border-radius: 22px;
    background-color: rgba(255,255,255,.12);
    background-image: radial-gradient(ellipse 65% 180px at 0 0,rgba(255,255,255,.18),transparent 75%),linear-gradient(115deg,rgba(255,255,255,.07),transparent 32%,transparent 76%,rgba(255,255,255,.045));
    background-size: 100% 100%;
    -webkit-backdrop-filter: blur(3px) saturate(1.2);
    backdrop-filter: blur(3px) saturate(1.2);
    border: 1px solid rgba(255,255,255,.45);
    border-top-color: rgba(255,255,255,.75);
    border-left-color: rgba(255,255,255,.48);
    border-right-color: rgba(255,255,255,.22);
    border-bottom-color: rgba(255,255,255,.16);
    border-radius: 24px;
    box-sizing: border-box;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.65),inset 1px 0 1px rgba(255,255,255,.24),inset 0 -1px 1px rgba(255,255,255,.12),0 18px 44px rgba(0,0,0,.13);
    opacity: 1;
    filter: none;
    animation: none;
  }
  @media(max-width:760px) {
    html[data-portfolio-theme] body::after {
      width: calc(100% - 12px);
      top: 6px;
      bottom: 6px;
      border-radius: 14px;
    }
  }
  html[data-portfolio-theme] :is(.hero,.sec,.contact,.bottom,.recent-contact,.footer,.portfolio-review):not(.app *, .u-window *, .window *, .review-demo-window *) {
    background: transparent !important;
    border-color: var(--portfolio-line) !important;
  }
  html[data-portfolio-theme] :is(h1,h2,h3,p,a,b,strong,small,.eyebrow,.flow-label,.window-guide,.window-scroll-hint,.u-hint,.foot,.footer,.contact-sub):not(.app *, .u-window *, .window *, .review-demo-window *) {
    color: var(--portfolio-text) !important;
  }
  html[data-portfolio-theme] :is(.recent-header,.unified-header,.u-nav,.u-compare article,.u-scope,.change,.scope,body>header) {
    border-color: var(--portfolio-line) !important;
  }
  html[data-portfolio-theme] :is(.usecase,.beforeafter,.usecase>div,.beforeafter>div,.card,.case-main,.price-card):not(.app *, .u-window *, .window *, .review-demo-window *) {
    background: var(--portfolio-panel) !important;
    border-color: var(--portfolio-line) !important;
  }
  html[data-portfolio-theme] :is(.try,.demo-label,.btn-ghost):not(.app *, .u-window *, .window *, .review-demo-window *) {
    color: var(--portfolio-text) !important;
    background: var(--portfolio-panel) !important;
    border-color: var(--portfolio-line) !important;
  }
  html[data-portfolio-theme] .btn-primary:not(.app *, .u-window *, .window *, .review-demo-window *) {
    background: var(--portfolio-text) !important;
    color: var(--portfolio-bg) !important;
  }
  html[data-portfolio-theme] .try:not(.app *, .u-window *, .window *, .review-demo-window *) {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35),0 3px 8px rgba(0,0,0,.06);
  }
  html[data-portfolio-theme] a:focus-visible:not(.app *, .u-window *, .window *, .review-demo-window *) {
    outline: 2px solid var(--portfolio-text);
    outline-offset: 5px;
  }
}