/* Shared viewport sizing only. Page transitions and interaction coordinates stay local. */
html[data-viewport-layout] {
  --viewport-height: 100vh;
  --layout-px: min(.052083333vw, .092592593vh);
  min-height: 100%;
}
@supports (height: 100dvh) {
  html[data-viewport-layout] {
    --viewport-height: 100dvh;
    --layout-px: min(.052083333vw, .092592593dvh);
  }
}

/* Fill familiar desktop ratios while keeping the interactive area visible.
   Only the decorative outer margin may be cropped; narrower/taller windows
   receive a matching ambient background instead of losing their controls. */
html[data-viewport-layout="scene"] .scene {
  width: min(max(100vw, calc(var(--viewport-height) * 16 / 9)), calc(100vw / .91), calc(var(--viewport-height) * 16 / 9 / .94));
  max-width: none;
  aspect-ratio: 16 / 9;
}
html[data-viewport-layout="scene"][data-scene-ratio="11/6"] .scene {
  width: min(max(100vw, calc(var(--viewport-height) * 11 / 6)), calc(100vw / .91), calc(var(--viewport-height) * 11 / 6 / .94));
  aspect-ratio: 11 / 6;
}
html[data-viewport-layout="scene"] .viewport-ambient {
  position:absolute;inset:-32px;pointer-events:none;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  filter:blur(18px);transform:scale(1.025);
}
html[data-viewport-layout="scene"] .scene { z-index:1; }
html[data-viewport-layout="scene"] .music-scene .fairy-path {
  right:max(2.8%,calc((100% - 100vw) / 2 + 2%));
}
html[data-viewport-layout="scene"] .back-module,
html[data-viewport-layout="scene"] .return {
  left: max(2%, calc((100% - 100vw) / 2 + 16px));
  top: max(2%, calc((100% - var(--viewport-height)) / 2 + 16px));
}
html[data-viewport-layout="scene"] .restart {
  right: max(3.6%, calc((100% - 100vw) / 2 + 16px));
  bottom: max(3.1%, calc((100% - var(--viewport-height)) / 2 + 16px));
}
html[data-viewport-layout="circufit-cover"] .hero-background { object-fit: cover; }
html[data-viewport-layout="tongpin-cover"] .composition {
  width: max(100vw, calc(var(--viewport-height) * 16 / 9));
  height: max(56.25vw, var(--viewport-height));
}
html[data-viewport-layout="home"] .app,
html[data-viewport-layout="home"] .stage {
  width: 100%;
  height: var(--viewport-height);
  min-height: 0;
  max-width: none;
  max-height: none;
}
html[data-viewport-layout="catalog"] .ai-page,
html[data-viewport-layout="module"] .module-hero {
  min-height: var(--viewport-height);
}

/* Desktop compositions shrink as a unit instead of falling below the fold. */
@media (min-width: 721px) and (orientation: landscape) {
  html[data-viewport-layout="home"] .hero { padding: calc(24 * var(--layout-px)) calc(24 * var(--layout-px)) calc(28 * var(--layout-px)); }
  html[data-viewport-layout="home"] .title { font-size: calc(184 * var(--layout-px)); }
  html[data-viewport-layout="home"] .eyebrow { margin: 0 0 calc(18 * var(--layout-px)) 5.2vw; }
  html[data-viewport-layout="home"] .line-1,
  html[data-viewport-layout="home"] .line-2 { margin-left: 5.2vw; }
  html[data-viewport-layout="home"] .line-2 { margin-top: calc(18 * var(--layout-px)); }
  html[data-viewport-layout="home"] .line-3 { margin-top: calc(92 * var(--layout-px)); margin-left: auto; margin-right: 3.2vw; }
  html[data-viewport-layout="home"] .bottombar { flex-wrap: nowrap; }
  html[data-viewport-layout="home"] .home-header { top: 3.6%; left: 3%; right: 3%; }
  html[data-viewport-layout="home"] .home-intro { top: 13.1%; left: 6.3%; }
  html[data-viewport-layout="home"] .home-title-row { flex-direction: row; align-items: center; gap: calc(40 * var(--layout-px)); }
  html[data-viewport-layout="home"] .home-intro h1 { font-size: calc(82 * var(--layout-px)); }
  html[data-viewport-layout="home"] .design-tag { font-size: calc(21 * var(--layout-px)); padding: calc(11 * var(--layout-px)) calc(18 * var(--layout-px)); border-radius: calc(14 * var(--layout-px)); }
  html[data-viewport-layout="home"] .home-intro p { margin-top: calc(39 * var(--layout-px)); font-size: max(10px, calc(16 * var(--layout-px))); }
  html[data-viewport-layout="home"] .project-card { top: 58%; }
  html[data-viewport-layout="home"] .project-card--visual,
  html[data-viewport-layout="home"] .project-card--explore { width: calc(493 * var(--layout-px)); }
  html[data-viewport-layout="home"] .project-card--ai { width: calc(618 * var(--layout-px)); }
  html[data-viewport-layout="home"] .project-card img { max-width: none; }
  html[data-viewport-layout="home"] .project-card.slot-left { --slot-shift: -29vw; --slot-scale: .82; }
  html[data-viewport-layout="home"] .project-card.slot-right { --slot-shift: 29vw; --slot-scale: .82; }
  html[data-viewport-layout="home"] .carousel-controls { bottom: 7.4%; }

  html[data-viewport-layout="catalog"] .ai-page { height: var(--viewport-height); min-height: 0; padding: 0 3vw; }
  html[data-viewport-layout="catalog"] .site-header { height: calc(96 * var(--layout-px)); font-size: calc(15 * var(--layout-px)); }
  html[data-viewport-layout="catalog"] .page-heading { left: 7.7%; top: 13.2%; font-size: calc(98 * var(--layout-px)); }
  html[data-viewport-layout="catalog"] .project-copy { left: 8.2%; top: 28.5%; width: 36.5%; }
  html[data-viewport-layout="catalog"] .project-order { margin-bottom: calc(13 * var(--layout-px)); font-size: calc(10 * var(--layout-px)); }
  html[data-viewport-layout="catalog"] .project-copy h2 { font-size: calc(42 * var(--layout-px)); }
  html[data-viewport-layout="catalog"] .project-description { max-width: none; margin: calc(27 * var(--layout-px)) 0 0 calc(8 * var(--layout-px)); font-size: calc(18 * var(--layout-px)); line-height: 1.85; }
  html[data-viewport-layout="catalog"] .project-tags { gap: calc(9 * var(--layout-px)); margin: calc(19 * var(--layout-px)) 0 0 calc(8 * var(--layout-px)); }
  html[data-viewport-layout="catalog"] .project-tags span { padding: calc(7 * var(--layout-px)) calc(11 * var(--layout-px)); font-size: calc(10 * var(--layout-px)); }
  html[data-viewport-layout="catalog"] .preview { left: 8.2%; top: 56%; width: calc(300 * var(--layout-px)); }
  html[data-viewport-layout="catalog"] .play { width: calc(58 * var(--layout-px)); height: calc(58 * var(--layout-px)); font-size: calc(19 * var(--layout-px)); }
  html[data-viewport-layout="catalog"] .project-rail { left: 53.85%; right: 0; top: 16.76%; height: calc(560 * var(--layout-px)); }
  html[data-viewport-layout="catalog"] .project-strip { gap: calc(32 * var(--layout-px)); }
  html[data-viewport-layout="catalog"] .project-card { flex-basis: calc(400 * var(--layout-px)); width: calc(400 * var(--layout-px)); height: calc(533 * var(--layout-px)); border-radius: calc(22 * var(--layout-px)); transform: translate3d(0,calc(59 * var(--layout-px)),0) scale(.775); }
  html[data-viewport-layout="catalog"] .project-card.is-active { transform: translate3d(0,0,0) scale(1); }
  html[data-viewport-layout="catalog"] .ai-page[data-active="1"] .project-strip { transform: translate3d(calc(-432 * var(--layout-px)),0,0); }
  html[data-viewport-layout="catalog"] .ai-page[data-active="2"] .project-strip { transform: translate3d(calc(-864 * var(--layout-px)),0,0); }

  html[data-viewport-layout="module"] .module-hero { height: var(--viewport-height); min-height: 0; padding: 0 3vw; }
  html[data-viewport-layout="module"] .site-header { height: calc(100 * var(--layout-px)); font-size: calc(15 * var(--layout-px)); }
  html[data-viewport-layout="module"] .hero-main { max-width: none; min-height: 0; height: 70%; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 7vw; padding: calc(48 * var(--layout-px)) calc(42 * var(--layout-px)) calc(90 * var(--layout-px)); }
  html[data-viewport-layout="module"] .module-visual { min-height: 0; }
  html[data-viewport-layout="module"] .module-art { width: calc(493 * var(--layout-px)); max-width: 100%; border-radius: calc(28 * var(--layout-px)); }
  html[data-viewport-layout="module"] .kicker { font-size: calc(11 * var(--layout-px)); margin-bottom: calc(22 * var(--layout-px)); }
  html[data-viewport-layout="module"] .module-copy h1 { font-size: calc(100 * var(--layout-px)); }
  html[data-viewport-layout="module"] .type { margin-top: calc(22 * var(--layout-px)); padding: calc(9 * var(--layout-px)) calc(14 * var(--layout-px)); font-size: calc(12 * var(--layout-px)); }
  html[data-viewport-layout="module"] .lead { margin-top: calc(30 * var(--layout-px)); font-size: calc(16 * var(--layout-px)); }

  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .dashboard { bottom: calc(26 * var(--layout-px)); width: 87.5%; }
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .metrics { min-height: calc(116 * var(--layout-px)); grid-template-columns: 1.2fr repeat(4,1fr); }
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .status,
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .metric { padding: calc(16 * var(--layout-px)) calc(30 * var(--layout-px)); }
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .status { grid-column: auto; }
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .metric::before { display: block; }
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .status strong,
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .metric strong { font-size: calc(18 * var(--layout-px)); }
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .status p,
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .metric span { font-size: calc(12 * var(--layout-px)); margin-top: calc(9 * var(--layout-px)); }
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .status small,
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .metric small { font-size: calc(10 * var(--layout-px)); margin-top: calc(8 * var(--layout-px)); }
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .badge { font-size: calc(9 * var(--layout-px)); margin-left: calc(8 * var(--layout-px)); padding: calc(4 * var(--layout-px)) calc(8 * var(--layout-px)); }
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .section-nav { min-height: calc(64 * var(--layout-px)); padding: 0 calc(26 * var(--layout-px)); gap: calc(12 * var(--layout-px)); justify-content: space-around; }
  html[data-viewport-layout="catalog"] .section-nav { margin-top: calc(18 * var(--layout-px)); }
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .section-nav a { padding: calc(22 * var(--layout-px)) calc(4 * var(--layout-px)); font-size: calc(11 * var(--layout-px)); }
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .avatar { width: calc(40 * var(--layout-px)); height: calc(40 * var(--layout-px)); }
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .site-nav { gap: calc(44 * var(--layout-px)); }

  /* Body copy and navigation need a readable floor when a desktop window narrows. */
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .site-header { font-size:max(12px,calc(15 * var(--layout-px))); }
  html[data-viewport-layout="catalog"] .project-description { font-size:max(13px,calc(18 * var(--layout-px))); }
  html[data-viewport-layout="catalog"] .project-tags span { font-size:max(10px,calc(10 * var(--layout-px))); }
  html[data-viewport-layout="module"] .lead { font-size:max(13px,calc(16 * var(--layout-px))); }
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .status strong,
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .metric strong { font-size:max(14px,calc(18 * var(--layout-px))); }
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .status p,
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .metric span { font-size:max(11px,calc(12 * var(--layout-px))); }
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .status small,
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .metric small { font-size:max(10px,calc(10 * var(--layout-px))); }
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .badge { font-size:max(9px,calc(9 * var(--layout-px))); }
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .section-nav { overflow-x:auto;justify-content:space-between; }
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .section-nav a { font-size:max(10px,calc(11 * var(--layout-px))); }
}

/* Compact desktop windows keep project controls separate from the summary bar. */
@media (min-width:721px) and (max-height:700px) and (orientation:landscape) {
  html[data-viewport-layout="catalog"] .project-description { font-size:max(11px,calc(18 * var(--layout-px)));line-height:1.65; }
  html[data-viewport-layout="catalog"] .project-tags span { font-size:max(9px,calc(10 * var(--layout-px))); }
  html[data-viewport-layout="catalog"] .preview { top:60%; }
  html[data-viewport-layout="catalog"] .catalog-navigation p { display:none; }
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .status small,
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .metric small { display:none; }
  html:is([data-viewport-layout="catalog"],[data-viewport-layout="module"]) .section-nav a { padding-top:12px;padding-bottom:12px; }
}

/* Phone mockups keep their own aspect ratio over a full-viewport background. */
html[data-viewport-layout="circufit-prototype"] .phone-wrap { width: min(400px, calc((var(--viewport-height) - 126px) * .45147), calc(100vw - 32px)); }
html[data-viewport-layout="tongpin-prototype"] .phone-wrap { width: min(395px, calc((var(--viewport-height) - 110px) * .49318), calc(100vw - 28px)); }
@media (max-width: 960px) {
  html[data-viewport-layout="circufit-prototype"] .phone-wrap { width: min(400px, calc((var(--viewport-height) - 106px) * .45147), calc(100vw - 24px)); }
  html[data-viewport-layout="tongpin-prototype"] .phone-wrap { width: min(395px, calc((var(--viewport-height) - 100px) * .49318), calc(100vw - 24px)); }
}
@media (max-height: 720px) and (min-width: 961px) {
  html[data-viewport-layout="circufit-prototype"] .phone-wrap { width: calc((var(--viewport-height) - 92px) * .45147); }
  html[data-viewport-layout="tongpin-prototype"] .phone-wrap { width: calc((var(--viewport-height) - 86px) * .49318); }
}