/* Approved paint lettering is an image; body and controls remain real readable text. */
.petal-demo .experience{min-height:calc(100svh - 170px);overflow:hidden}
.petal-demo .paint-name,.petal-demo.is-webgl .paint-name{position:absolute;inset:5% auto auto 3.5vw;width:min(47vw,700px);height:auto;margin:0;opacity:1;z-index:4;pointer-events:none;min-height:0;display:block;animation:paint-arrive 1.35s cubic-bezier(.22,1,.36,1) both}
.paint-name img{display:block;width:100%;height:auto;object-fit:contain}
.petal-demo .scene{justify-self:end;width:59vw;height:min(800px,calc(100svh - 170px));margin:0 0 0 auto;aspect-ratio:auto}
.petal-demo .visual{inset:0}
.petal-demo .introduction{left:7vw;bottom:12%;max-width:340px;margin:0}
.petal-demo .introduction h2{font-family:'Golos Text',Arial,sans-serif;font-size:clamp(25px,2.5vw,36px);font-weight:400;line-height:1.22;letter-spacing:-.035em;margin-bottom:24px}
.petal-demo .introduction h2 .accent-copy{color:inherit}
.petal-demo .intro-link{background:#c84a24;border:1px solid #b73c1c;box-shadow:inset 0 1px 1px #ffd2b680,0 5px 12px #963d1e13;color:#fff;padding:14px 24px}
.petal-demo .callout{background:#f7f2e9ee;border:1px solid #c9b5a5;box-shadow:0 2px 6px #704b2510;color:#573e30}
.petal-demo .callout:hover,.petal-demo .callout:focus-visible{background:#f1d8c5;color:#812a12;border-color:#ba7c60}
.petal-demo .petal-panel{border-radius:22px}
.petal-demo .panel-title{font-family:'Golos Text',Arial,sans-serif;font-weight:400;letter-spacing:-.045em}
html[data-theme=dark] .petal-demo .callout{background:#292620ed;border-color:#665246;color:#f2d4bd}
html[data-theme=dark] .petal-demo .callout:hover{background:#443024}
@keyframes paint-arrive{from{opacity:0;transform:translateY(15px) rotate(-1.5deg) scale(.97)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@media(min-width:701px) and (max-width:1100px){.petal-demo .scene{width:60vw}.petal-demo .paint-name,.petal-demo.is-webgl .paint-name{top:8%;width:47vw}.petal-demo .introduction{left:5vw;max-width:300px;bottom:14%}.petal-demo .introduction h2{font-size:29px}}
@media(min-width:701px){
 .petal-demo .experience{display:grid;grid-template-columns:46% 54%;grid-template-rows:minmax(0,1fr) auto;grid-template-areas:'identity flower' 'intro flower';align-items:stretch}
 .petal-demo .paint-name,.petal-demo.is-webgl .paint-name{grid-area:identity;position:relative;inset:auto;width:min(43vw,650px);height:auto;clip-path:none;overflow:visible;margin:0 0 0 2vw;align-self:center;justify-self:start}
 .petal-demo .scene{grid-area:flower;width:100%;margin:0;height:100%;min-height:520px}
 .petal-demo .introduction{grid-area:intro;position:relative;inset:auto;margin:0 0 28px 7vw;max-width:340px;align-self:end}
 .petal-demo .introduction h2{font-size:30px;line-height:1.16;margin-bottom:18px}
}
@media(max-width:700px){
 .petal-demo .experience{display:flex;min-height:0;padding:0 0 22px;overflow:hidden}
 .petal-demo .paint-name,.petal-demo.is-webgl .paint-name{position:relative;inset:auto;order:0;width:min(94%,440px);height:auto;margin:0 auto -20px;min-height:0;flex:none}
 .petal-demo .scene{order:1;width:100%;height:auto;margin:0;display:flex;aspect-ratio:auto}
 .petal-demo .visual{position:relative;inset:auto;aspect-ratio:1;width:100%}
 .petal-demo .introduction{position:relative;order:2;left:auto;bottom:auto;align-self:center;max-width:none;text-align:center;margin:24px 24px 8px}
 .petal-demo .introduction h2{font-size:26px;line-height:1.25;margin-bottom:18px}
 .petal-demo .introduction h2 br{display:none}
 .petal-demo .skip{order:3;align-self:center;margin:6px 22px 0}
 .petal-demo .callouts{margin:0 22px}
 .petal-demo .callout{box-shadow:none;font-size:11px}
 .petal-demo .scene-controls{justify-content:space-between;min-height:70px;gap:10px}
}
@media(prefers-reduced-motion:reduce){.petal-demo .paint-name{animation:none}}
/* The intro keeps exactly the same layout before and after bloom readiness. */
.petal-demo .skip{position:absolute;inset:auto 24px 12px auto;margin:0;z-index:7}
.petal-demo .scene-caption{min-height:20px;font-size:10px;bottom:3%;opacity:0;transition:opacity .45s ease}
.petal-demo.is-ready .scene-caption{opacity:.65}
.petal-demo .callout,.petal-demo.is-ready .callout{border:0!important;border-radius:0;background:none!important;box-shadow:none!important;padding:9px 8px;font-size:12px;line-height:1.35;letter-spacing:0;min-height:44px;max-width:118px;white-space:normal;color:#684c3c;opacity:0;pointer-events:none;transform:translate(-50%,calc(-50% + 7px));transition:opacity .55s ease,transform .65s cubic-bezier(.22,1,.36,1),color .25s ease;transition-delay:0ms}
.petal-demo .callout::before{content:'';display:block;width:3px;height:3px;border-radius:50%;background:#c54c26;margin:0 auto 6px}
.petal-demo .callout::after{display:none}
.petal-demo.is-ready .callout{opacity:1;pointer-events:auto;transform:translate(-50%,-50%);transition-delay:var(--label-delay)}
.petal-demo.is-ready .callout:hover,.petal-demo.is-ready .callout:focus-visible{color:#b53e1c;text-decoration:underline;text-underline-offset:5px}
html[data-theme=dark] .petal-demo .callout{color:#e6c5ac}
@media(min-width:701px){.petal-demo .scene{height:100%;min-height:520px}.petal-demo .callouts{inset:0;overflow:visible}}
@media(max-width:700px){
 .petal-demo .skip{position:absolute;inset:auto 16px 10px auto;max-width:160px}
 .petal-demo .callouts{min-height:160px;align-content:start;border:0;gap:4px 12px}
 .petal-demo .callout,.petal-demo.is-ready .callout{max-width:none;width:100%;min-height:48px;font-size:13px;transform:translateY(7px);border-bottom:1px solid #d8c6b5!important}
 .petal-demo .callout::before{display:none}
 .petal-demo.is-ready .callout{transform:translateY(0)}
 .petal-demo .scene-caption{position:relative;inset:auto;margin:8px 22px 0;min-height:20px}
 html[data-theme=dark] .petal-demo .callout{border-bottom-color:#554438!important}
}
@media(prefers-reduced-motion:reduce){.petal-demo .callout{transition:none!important}}
/* Stable text layer: no per-frame projected positions or edge clipping. */
.petal-demo .callout,.petal-demo.is-ready .callout{will-change:opacity;backface-visibility:hidden;transition:opacity .65s cubic-bezier(.22,1,.36,1),color .25s ease;transform:translate(-50%,-50%)}
@media(min-width:701px){.petal-demo .callout{left:clamp(72px,var(--x),calc(100% - 72px));top:clamp(36px,var(--y),calc(100% - 36px))}}
@media(max-width:700px){.petal-demo .callout,.petal-demo.is-ready .callout{left:auto;top:auto;transform:none}}
/* Petal tracking shares the scene's frame; only GPU-composited transforms change. */
@media(min-width:701px){
 .petal-demo .callout,.petal-demo.is-ready .callout{left:0;top:0;width:max-content;max-width:118px;text-align:center;will-change:transform,opacity;transform:translate3d(var(--label-x,0px),var(--label-y,0px),0) translate(-50%,-50%);transition-property:opacity,color}
}