.piece-universe { position:relative; isolation:isolate; background:var(--page); }
.piece-field-layer { position:absolute; inset:0; pointer-events:none; z-index:1; }
.piece-field-canvas { position:sticky; top:var(--field-top,96px); width:100%; height:var(--field-height,calc(100svh - 96px)); display:block; }
.piece-field-canvas[hidden],.piece-story[hidden] { display:none; }
.piece-universe .constellation-chapter,.piece-universe .hero { background:transparent; }
.piece-universe .hero { position:relative; z-index:2; }
.piece-universe .hero-heading,.piece-universe .hero-description,.piece-universe .orbit-showcase { background:var(--page); }
.piece-universe .hero-heading { box-shadow:0 0 28px 20px var(--page); }
.piece-universe .hero-footer { background:var(--page); }
.piece-story { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1.15fr; gap:5%; align-items:center; min-height:0; padding-block:30px 48px; }
.piece-copy { max-width:500px; background:var(--page); box-shadow:0 0 50px 28px var(--page); }
.piece-copy .eyebrow { font-size:.6875rem; letter-spacing:.16em; }
.piece-copy h2 { font-size:clamp(3rem,4.5vw,4.4rem); margin:22px 0 24px; }
.piece-copy h2 em { font-weight:400; }
.piece-copy > p:not(.eyebrow) { color:var(--muted); max-width:320px; font-size:1rem; line-height:1.8; }
.piece-scroll-note { display:flex; align-items:center; gap:18px; margin-top:30px; color:var(--ink); font-size:.75rem; }
.piece-scroll-note > span:first-child { display:inline-block; font-size:1.35rem; }
.piece-motion-toggle { margin-top:12px; padding:8px 0; min-height:44px; font:inherit; font-size:.75rem; color:var(--ink); background:transparent; border:0; cursor:pointer; text-decoration:underline; text-underline-offset:5px; }
.piece-motion-toggle:focus-visible { outline:2px solid var(--ink); outline-offset:6px; }
.piece-portrait { position:relative; margin:0; width:min(88%,500px); aspect-ratio:1; align-self:center; justify-self:center; }
.piece-portrait img { position:absolute; width:100%; height:100%; object-fit:contain; filter:brightness(1.18); }
.piece-universe.field-live .piece-portrait img { opacity:var(--field-still,0); }
.piece-portrait::before { content:""; position:absolute; bottom:11%; left:30%; width:40%; height:5%; background:radial-gradient(ellipse,#5a483525,transparent 70%); opacity:var(--field-settled,1); }
.piece-portrait figcaption { position:absolute; bottom:-28px; width:100%; text-align:center; color:var(--muted); font-size:.75rem; line-height:1.6; }
.piece-portrait figcaption span { color:var(--ink); }
.piece-sprinkles { position:absolute; inset:0; pointer-events:none; z-index:1; height:900px; overflow:hidden; }
.piece-sprinkles i { position:absolute; width:27px; height:27px; background:var(--ink); opacity:.3; mask:url('/assets/pet-piece-field-v001/unit-r003.png') center / contain no-repeat; }
.piece-sprinkles i:nth-child(3n) { background:#c39844; }
.field-live .piece-sprinkles { display:none; }
.piece-sprinkles[hidden] { display:none; }
@media(max-width:759px) {
 .piece-field-layer { z-index:3; }
 .piece-copy { position:relative; z-index:4; }
 .piece-reference { z-index:4; }
 .piece-story { z-index:auto; grid-template-columns:1fr; gap:20px; min-height:0; padding-block:28px 52px; }
 .piece-copy { text-align:center; margin:auto; box-shadow:none; }
 .piece-copy h2 { font-size:3rem; }
 .piece-copy > p:not(.eyebrow) { margin-inline:auto; }
 .piece-scroll-note { justify-content:center; margin-top:22px; }
 .piece-portrait { width:min(90%,340px); margin:auto; }
 .piece-sprinkles { display:none; }
}