/* SITE-05: the user's Playdate screenshot is the composition reference. */
.reference-site {--yellow:#f4c400}
.reference-site .nav {position:fixed;width:100%;height:64px;padding:0 max(5vw,20px);background:var(--story-bg,#7d858a);backdrop-filter:none;border-bottom:1px solid #ffffffb3;color:#fff}
.reference-site .nav .brand {font-family:Arial,sans-serif;font-size:38px;line-height:1;font-weight:900;letter-spacing:-1.7px}
.reference-site .nav .brand img {display:none}
.reference-site .nav .brand span {font-size:22px;font-weight:750;letter-spacing:-.7px;color:inherit;margin-left:2px}
.reference-site .nav nav {margin-left:auto;margin-right:28px;gap:28px;font-size:17px;font-weight:650}
.reference-site .nav-cta {border-radius:40px;padding:8px 22px;font-size:16px;font-weight:750;background:#f4c400;color:#101112}
.reference-site .reference-hero {height:100svh;min-height:520px;position:relative;display:block;padding:0;background:#7d858a;overflow:hidden}
.reference-hero .hero-product {position:absolute;inset:80px 0 100px;display:flex;align-items:center;justify-content:center;width:100%;max-width:none}
.reference-hero .hero-product img {width:auto;height:100%;max-width:90vw;object-fit:contain;border-radius:0;max-height:none}
.reference-hero .hero-copy {position:absolute;bottom:44px;left:20px;right:20px;text-align:center;color:#fff}
.reference-hero h1 {font-size:clamp(32px,4.8vw,76px);font-weight:800;letter-spacing:-.055em}
.reference-site .live-story {height:100svh;min-height:520px;padding:0;display:block;overflow:visible;background:#7d858a}
.live-pin {position:relative;height:100%;min-height:520px;overflow:hidden;isolation:isolate;background:var(--story-bg,#7d858a);color:#fff}
.live-stage {position:absolute;inset:0;z-index:1;touch-action:pan-y}
.live-stage canvas {display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.live-stage canvas.is-grabbing {cursor:grabbing}
.live-stage canvas:focus-visible {outline:2px solid #f4c400;outline-offset:-4px}
.live-copy {position:absolute;z-index:2;left:20px;right:20px;bottom:44px;text-align:center;pointer-events:none;will-change:opacity,transform}
.live-copy h1 {font-family:Arial,'PingFang SC',sans-serif;font-size:clamp(34px,4.8vw,76px);font-weight:800;letter-spacing:-.055em;line-height:1.12;color:#fff}
.live-shadow {position:absolute;z-index:0;left:31%;top:81%;width:38%;height:3%;background:#151719;filter:blur(18px);border-radius:50%;opacity:.2;pointer-events:none}
.reference-site .nav a:focus-visible {outline:3px solid currentColor;outline-offset:5px}
.reference-site .nav[data-theme="product"] {background:#ffcc19;color:#181a19;border-color:#181a1940}
.reference-site .nav[data-theme="product"] .nav-cta {background:#181a19;color:#ffcc19}
.reference-site .nav[data-theme="dark"] {background:#202322;color:#fff;border-color:#ffffff40}
@media(max-width:700px){
 .reference-site .nav {height:58px;padding:0 20px}
 .reference-site .nav .brand {font-size:30px;letter-spacing:-1.5px}
 .reference-site .nav .brand span {font-size:17px}
 .reference-site .nav nav {display:none}
 .reference-site .nav-cta {font-size:12px;padding:7px 13px}
 .live-copy,.reference-hero .hero-copy {left:16px;right:16px;bottom:max(72px,calc(50svh - 48vw - 32px))}
 .live-copy h1,.live-copy h2,.reference-hero h1 {font-size:clamp(28px,7.5vw,46px);line-height:1.22;letter-spacing:-.05em}
 .live-shadow {left:14%;top:73%;width:72%;height:2%;filter:blur(12px)}
 .reference-hero .hero-product {inset:70px 0 130px}
}
@media(prefers-reduced-motion:reduce){.live-copy{will-change:auto}}