.patternpaste-designed-laptop {
  --patternpaste-laptop-ground:var(--pp-ground);
  --patternpaste-laptop-ink:var(--pp-ink);
  --patternpaste-laptop-accent:var(--pp-primary);
  --patternpaste-laptop-accent-ink:var(--pp-primary-ink);
  position:relative;
  padding:0;
}
.patternpaste-designed-laptop[data-treatment="designed"] {
  --patternpaste-laptop-ground:#f5f2eb;
  --patternpaste-laptop-ink:#17191c;
  --patternpaste-laptop-accent:#294cf4;
  --patternpaste-laptop-accent-ink:#fff;
  font-family:Arial,Helvetica,sans-serif;
}
.patternpaste-designed-laptop[data-treatment="designed"]:not(.has-background) { background:var(--patternpaste-laptop-ground); }
.patternpaste-designed-laptop[data-treatment="designed"]:not(.has-text-color) { color:var(--patternpaste-laptop-ink); }
.patternpaste-designed-laptop[data-treatment="inherit"]:not([class*="is-style-"]):not(.has-background) { background:transparent; }
.patternpaste-designed-laptop[data-treatment="inherit"]:not([class*="is-style-"]):not(.has-text-color) { color:inherit; }
/* The scene reaches the edge; each reading row still takes the buyer's wide size. */
.patternpaste-designed-laptop .patternpaste-designed-layout {
  width:100%;
  max-width:none;
  background:inherit;
}
.patternpaste-designed-laptop .patternpaste-laptop-stage {
  position:relative;
  container-type:inline-size;
  width:100%;
  min-width:0;
  min-height:var(--patternpaste-laptop-height,100svh);
}
.patternpaste-designed-laptop :is(.patternpaste-laptop-stage,.patternpaste-laptop-content):not(.has-background) { background:inherit; }
.patternpaste-designed-laptop .patternpaste-laptop-content {
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  min-height:var(--patternpaste-laptop-content-height,100svh);
  padding:clamp(24px,4cqi,64px);
  gap:var(--patternpaste-designed-block-gap,clamp(48px,7cqi,112px));
}
/* The page inside the screen is one native Cover: its photograph fills the
   screen and its overlay carries the type. The text over it is the treatment's
   own pair: cream on the studio's ink in Designed, the theme's background colour
   on its text colour in Use my theme, so the pair reads in light and dark
   themes alike. An owner's overlay, text colour or content position wins. */
/* Inside the laptop's screen a lone Cover's photograph and overlay reach past
   the page to the screen's edges (renderer.js sets the bleed each frame); the
   text stays where the real page will put it. */
.patternpaste-laptop-screen-content .patternpaste-laptop-content > .patternpaste-laptop-cover:only-child { overflow:visible; }
.patternpaste-laptop-screen-content .patternpaste-laptop-content > .patternpaste-laptop-cover:only-child > :is(.wp-block-cover__image-background,.wp-block-cover__video-background,.wp-block-cover__background) {
  inset:auto;
  top:calc(-1 * var(--patternpaste-laptop-screen-bleed-y, 0px));
  left:calc(-1 * var(--patternpaste-laptop-screen-bleed-x, 0px));
  /* An image does not stretch between its offsets, so its size is stated. */
  width:calc(100% + 2 * var(--patternpaste-laptop-screen-bleed-x, 0px));
  height:calc(100% + 2 * var(--patternpaste-laptop-screen-bleed-y, 0px));
  max-width:none;
  max-height:none;
}
/* The cover alone fills the screen edge to edge; blocks an owner adds beside it
   bring the page's own inset back. */
.patternpaste-designed-laptop .patternpaste-laptop-content:has(>.patternpaste-laptop-cover):not(:has(>:not(.patternpaste-laptop-cover,.block-list-appender,.block-editor-block-list__insertion-point))) { padding:0; }
/* Over a photograph the theme's own strongest pair, never the section colour: a
   section style's tint and its text are a pair chosen for a flat ground, and over an
   unknown photo they fall below legible (check-themes --section-styles, 2026-09-25).
   A section style redefines base and contrast inside its own scope, so the pair is
   read here, at the root, where a custom property resolves before any section can
   move it, and inherited down as the resolved colour. */
:root {
  --patternpaste-laptop-theme-contrast:var(--wp--preset--color--contrast, #111);
  --patternpaste-laptop-theme-base:var(--wp--preset--color--base, #fff);
}
.patternpaste-designed-laptop .patternpaste-laptop-cover {
  --patternpaste-laptop-overlay:var(--patternpaste-laptop-theme-contrast);
  --patternpaste-laptop-cover-ink:var(--patternpaste-laptop-theme-base);
  flex:1 0 auto;
  width:100%;
  min-width:0;
  margin:0;
  padding:clamp(24px,4cqi,64px);
}
.patternpaste-designed-laptop[data-treatment="designed"] .patternpaste-laptop-cover {
  --patternpaste-laptop-overlay:#101216;
  --patternpaste-laptop-cover-ink:#f5f2eb;
}
.patternpaste-designed-laptop .patternpaste-laptop-cover:not(.has-custom-content-position) { align-items:stretch; }
.patternpaste-designed-laptop .patternpaste-laptop-cover:not(.has-text-color):not(.is-light) { color:var(--patternpaste-laptop-cover-ink); }
:is(.patternpaste-designed-laptop.has-text-color,.patternpaste-designed-laptop .has-text-color) .patternpaste-laptop-cover:not(.has-text-color) { color:inherit; }
.patternpaste-designed-laptop .patternpaste-laptop-cover > .wp-block-cover__background:not([class*="-background-color"]):not(.has-background-gradient):not([style*="background"]) {
  background-color:var(--patternpaste-laptop-overlay);
}
.patternpaste-designed-laptop .patternpaste-laptop-cover > .wp-block-cover__inner-container {
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  gap:var(--patternpaste-designed-block-gap,clamp(48px,7cqi,112px));
}
.patternpaste-designed-laptop :is(.patternpaste-laptop-masthead,.patternpaste-laptop-statement,.patternpaste-laptop-footer) {
  width:100%;
  max-width:var(--wp--style--global--wide-size,1440px);
  margin-inline:auto;
  min-width:0;
}
.patternpaste-designed-laptop .patternpaste-laptop-masthead,
.patternpaste-designed-laptop .patternpaste-laptop-masthead > .block-editor-inner-blocks > .block-editor-block-list__layout,
.patternpaste-designed-laptop .patternpaste-laptop-masthead > .block-editor-block-list__layout:not(.wp-block) {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--patternpaste-designed-block-gap,24px);
}
.patternpaste-designed-laptop .patternpaste-laptop-wordmark {
  font-size:clamp(22px,2.7cqi,38px);
  line-height:1;
  letter-spacing:-.075em;
}
.patternpaste-designed-laptop .patternpaste-laptop-eyebrow {
  font-size:14px;
  line-height:1.5;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.patternpaste-designed-laptop .patternpaste-laptop-statement {
  position:relative;
  flex:1 0 auto;
  display:flex;
  align-items:center;
  gap:var(--patternpaste-designed-block-gap,32px);
  padding-block:clamp(12px,2cqi,32px);
}
.patternpaste-designed-laptop .patternpaste-laptop-heading {
  flex:1 1 auto;
  min-width:0;
  margin:0;
  font-size:clamp(60px,12.8cqi,184px);
  line-height:.86;
  letter-spacing:-.075em;
  overflow-wrap:break-word;
}
/* A cut-paper studio mark, decorative only; it never substitutes for content. */
.patternpaste-designed-laptop .patternpaste-laptop-statement::after {
  content:"";
  display:block;
  flex:0 0 clamp(72px,15cqi,216px);
  width:clamp(72px,15cqi,216px);
  aspect-ratio:1;
  background:var(--patternpaste-laptop-accent);
  clip-path:polygon(40% 0,60% 0,60% 26%,78% 8%,92% 22%,74% 40%,100% 40%,100% 60%,74% 60%,92% 78%,78% 92%,60% 74%,60% 100%,40% 100%,40% 74%,22% 92%,8% 78%,26% 60%,0 60%,0 40%,26% 40%,8% 22%,22% 8%,40% 26%);
  transform:rotate(12deg);
}
/* Over the photograph a theme's accent can vanish into the overlay (a black
   primary on a dark one); in Use my theme the mark takes the cover's own type colour. */
.patternpaste-designed-laptop[data-treatment="inherit"] .patternpaste-laptop-cover .patternpaste-laptop-statement::after { background:currentColor; }
.patternpaste-designed-laptop .patternpaste-laptop-footer,
.patternpaste-designed-laptop .patternpaste-laptop-footer > .block-editor-inner-blocks > .block-editor-block-list__layout,
.patternpaste-designed-laptop .patternpaste-laptop-footer > .block-editor-block-list__layout:not(.wp-block) {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--patternpaste-designed-block-gap,32px);
}
.patternpaste-designed-laptop .patternpaste-laptop-footer {
  padding-top:clamp(24px,3cqi,44px);
  border-top:1px solid color-mix(in srgb,currentColor 25%,transparent);
}
.patternpaste-designed-laptop .patternpaste-laptop-copy {
  flex:0 1 36ch;
  max-width:36ch;
  font-size:clamp(17px,1.8cqi,25px);
  line-height:1.45;
  letter-spacing:-.025em;
}
.patternpaste-designed-laptop .patternpaste-laptop-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--patternpaste-designed-block-gap,12px);
}
.patternpaste-designed-laptop[data-treatment="designed"] .patternpaste-laptop-heading {
  font-family:inherit;
  font-weight:750;
  text-transform:none;
}
.patternpaste-designed-laptop[data-treatment="designed"] .patternpaste-laptop-heading:not(.has-text-color) { color:inherit; }
.patternpaste-designed-laptop[data-treatment="designed"] .patternpaste-laptop-wordmark { font-weight:750; }
.patternpaste-designed-laptop[data-treatment="designed"] .patternpaste-laptop-actions .wp-block-button { font-size:14px; }
.patternpaste-designed-laptop[data-treatment="designed"] .patternpaste-laptop-actions .wp-block-button__link {
  padding:17px 22px;
  border:1px solid transparent;
  border-radius:999px;
  font-family:inherit;
  font-size:inherit;
  line-height:1.4;
  letter-spacing:-.015em;
  text-decoration:none;
}
.patternpaste-designed-laptop[data-treatment="designed"] .patternpaste-laptop-primary .wp-block-button__link:not(.has-background) { background:var(--patternpaste-laptop-accent); }
.patternpaste-designed-laptop[data-treatment="designed"] .patternpaste-laptop-primary .wp-block-button__link:not(.has-text-color) { color:var(--patternpaste-laptop-accent-ink); }
.patternpaste-designed-laptop[data-treatment="designed"] .patternpaste-laptop-secondary .wp-block-button__link { border-color:currentColor; }
.patternpaste-designed-laptop[data-treatment="designed"] .patternpaste-laptop-secondary .wp-block-button__link:not(.has-background) { background:transparent; }
.patternpaste-designed-laptop[data-treatment="designed"] .patternpaste-laptop-secondary .wp-block-button__link:not(.has-text-color) { color:inherit; }
:is(.patternpaste-designed-laptop.has-text-color,.patternpaste-designed-laptop .has-text-color) :is(.patternpaste-laptop-heading,.patternpaste-laptop-wordmark,.patternpaste-laptop-eyebrow,.patternpaste-laptop-copy):not(.has-text-color) { color:inherit; }
/* Only successful enhancement creates scroll travel or pins the stage. */
.patternpaste-designed-laptop.patternpaste-laptop-ready .patternpaste-designed-layout { min-height:calc(var(--patternpaste-laptop-height,100svh) + var(--patternpaste-laptop-distance,0px)); }
.patternpaste-designed-laptop.patternpaste-laptop-ready .patternpaste-laptop-stage {
  position:sticky;
  top:0;
  height:var(--patternpaste-laptop-height,100svh);
}
.patternpaste-designed-laptop .patternpaste-laptop-scene { position:absolute; z-index:1; inset:0; overflow:hidden; }
.patternpaste-designed-laptop .patternpaste-laptop-scene canvas { display:block; width:100%; height:100%; }
/* The prompt is quiet text on the page ground, behind the laptop, which covers it as it opens. */
.patternpaste-designed-laptop .patternpaste-laptop-cue {
  position:absolute;
  z-index:0;
  top:clamp(24px,4cqi,48px);
  left:50%;
  width:max-content;
  max-width:calc(100% - 48px);
  margin:0;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
  color:inherit;
  font-size:14px;
  line-height:1.5;
  text-align:center;
  overflow-wrap:anywhere;
  transform:translateX(-50%);
}
.patternpaste-designed-laptop .patternpaste-laptop-skip {
  position:absolute;
  z-index:5;
  right:clamp(16px,3cqi,40px);
  bottom:18px;
  max-width:calc(100% - 32px);
  margin:0;
  padding:10px 16px;
  border:1px solid currentColor;
  border-radius:999px;
  background:var(--patternpaste-laptop-ground);
  color:var(--patternpaste-laptop-ink);
  font:inherit;
  font-size:14px;
  line-height:1.4;
  cursor:pointer;
}
/* A CSS-only first paint never exposes the page then takes it away. Scripting
   and reduced-motion media queries leave native content immediate without JS.
   The finite deadline also releases it when scripts or assets never arrive. */
.patternpaste-designed-laptop > .patternpaste-laptop-entry { position:absolute; top:0; width:0; height:0; }
.patternpaste-designed-laptop > .patternpaste-laptop-loading { display:none; }
@keyframes patternpaste-laptop-loading-content { from { visibility:hidden; } to { visibility:visible; } }
@keyframes patternpaste-laptop-loading-cover { from { visibility:visible; } to { visibility:hidden; } }
@media (scripting:enabled) and (prefers-reduced-motion:no-preference) {
  .patternpaste-designed-laptop[data-motion="true"]:has(>.patternpaste-laptop-loading):not(.patternpaste-laptop-ready,.patternpaste-laptop-static):not(:has(>.patternpaste-laptop-entry:target)) .patternpaste-laptop-content {
    animation:patternpaste-laptop-loading-content 6s step-end forwards;
  }
  .patternpaste-designed-laptop[data-motion="true"]:not(.patternpaste-laptop-ready,.patternpaste-laptop-static):not(:has(>.patternpaste-laptop-entry:target)) > .patternpaste-laptop-loading {
    position:absolute;
    inset:0 0 auto;
    z-index:6;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:28px;
    height:100svh;
    min-height:360px;
    color:inherit;
    animation:patternpaste-laptop-loading-cover 6s step-end forwards;
  }
}
.patternpaste-designed-laptop .patternpaste-laptop-loading > p { margin:0; font-size:14px; line-height:1.5; }
/* The pending state is a quiet indicator, never a drawn device: a CSS stand-in
   read as a small, half-built laptop before the real model appeared. The model
   is revealed only once it is loaded and sized to the stage. */
.patternpaste-designed-laptop .patternpaste-laptop-loading-device {
  position:relative;
  display:block;
  width:min(40%,160px);
  height:2px;
  overflow:hidden;
  border-radius:2px;
  background:color-mix(in srgb,currentColor 16%,transparent);
}
.patternpaste-designed-laptop .patternpaste-laptop-loading-device::after {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:40%;
  border-radius:inherit;
  background:var(--patternpaste-laptop-accent,currentColor);
  animation:patternpaste-laptop-loading-sweep 1.4s cubic-bezier(.45,0,.55,1) infinite;
}
.patternpaste-designed-laptop[data-treatment="inherit"] .patternpaste-laptop-loading-device::after { background:currentColor; }
@keyframes patternpaste-laptop-loading-sweep { from { transform:translateX(-100%); } to { transform:translateX(250%); } }
.patternpaste-designed-laptop .patternpaste-laptop-loading .patternpaste-laptop-skip { text-decoration:none; }
/* The editor adds a wrapper around a Group's children. Give that wrapper the
   same layout, without letting it become a narrow item of the outer flex row. */
.editor-styles-wrapper .patternpaste-designed-laptop[hidden] { display:none!important; }
.editor-styles-wrapper .patternpaste-designed-laptop .patternpaste-laptop-content:has(>.block-editor-inner-blocks),
.editor-styles-wrapper .patternpaste-designed-laptop .patternpaste-laptop-content:has(>.block-editor-block-list__layout:not(.wp-block)) { display:block; min-height:0; }
.editor-styles-wrapper .patternpaste-designed-laptop .patternpaste-laptop-content > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .patternpaste-designed-laptop .patternpaste-laptop-content > .block-editor-block-list__layout:not(.wp-block) {
  display:flex;
  flex-direction:column;
  gap:var(--patternpaste-designed-block-gap,clamp(48px,7cqi,112px));
}
.editor-styles-wrapper .patternpaste-designed-laptop :is(.patternpaste-laptop-masthead,.patternpaste-laptop-statement,.patternpaste-laptop-footer) > .block-editor-inner-blocks,
.editor-styles-wrapper .patternpaste-designed-laptop :is(.patternpaste-laptop-masthead,.patternpaste-laptop-statement,.patternpaste-laptop-footer) > .block-editor-block-list__layout:not(.wp-block) { flex:1 1 auto; min-width:0; width:100%; }
.editor-styles-wrapper .patternpaste-designed-laptop .patternpaste-laptop-stage { min-height:0; }
:root:not(:has(.editor-styles-wrapper)) .patternpaste-designed-laptop .patternpaste-laptop-masthead:not(:has(>p:not(:empty),>:not(p))),
:root:not(:has(.editor-styles-wrapper)) .patternpaste-designed-laptop .patternpaste-laptop-footer:not(:has(>p:not(:empty),>.wp-block-buttons .wp-block-button__link:not(:empty),>:not(p,.wp-block-buttons))) { display:none; }
@container (max-width:760px) {
  .patternpaste-designed-laptop .patternpaste-laptop-content { gap:var(--patternpaste-designed-block-gap,48px); }
  .patternpaste-designed-laptop .patternpaste-laptop-statement { align-items:flex-start; flex-direction:column-reverse; gap:var(--patternpaste-designed-block-gap,28px); }
  .patternpaste-designed-laptop .patternpaste-laptop-statement::after { flex-basis:auto; width:56px; }
  .patternpaste-designed-laptop .patternpaste-laptop-heading { font-size:clamp(46px,14.8cqi,110px); }
  .patternpaste-designed-laptop .patternpaste-laptop-masthead,
  .patternpaste-designed-laptop .patternpaste-laptop-masthead > .block-editor-inner-blocks > .block-editor-block-list__layout,
  .patternpaste-designed-laptop .patternpaste-laptop-masthead > .block-editor-block-list__layout:not(.wp-block) { align-items:flex-start; }
  .patternpaste-designed-laptop .patternpaste-laptop-copy { flex-basis:36ch; }
}
@container (max-width:380px) {
  .patternpaste-designed-laptop .patternpaste-laptop-content { padding:22px; }
  .patternpaste-designed-laptop .patternpaste-laptop-wordmark { font-size:23px; }
  .patternpaste-designed-laptop .patternpaste-laptop-eyebrow { max-width:18ch; }
  .patternpaste-designed-laptop[data-treatment="designed"] .patternpaste-laptop-actions .wp-block-button__link { padding:14px 17px; }
}