/* Playgroundpad landing: Google Playground's blue-sky island world, alive. One scene, one wordmark, one button. */
:root{--sky:#2F7FD6;--sky-deep:#1C5FB8;--ink:#0E0E13;--lav:#CCBAF6;--vio:#8B5CF6;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html,body{height:100%}
body.landing{margin:0;background:var(--sky-deep);color:#fff;font-family:'Inter',ui-sans-serif,system-ui,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}
.scene{position:fixed;inset:0;overflow:hidden;background:var(--sky)}
.scene .sea{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.scene .clouds,.scene .islands,.scene .flyers{position:absolute;inset:0;pointer-events:none}
.scene img{position:absolute;image-rendering:pixelated;will-change:transform;user-select:none}
.scene .cloud{opacity:.96}
.scene .far .cloud{filter:brightness(.97)}
.scene .island{filter:drop-shadow(0 18px 14px rgba(10,30,70,.28))}
.scene .shadow{position:absolute;border-radius:50%;background:radial-gradient(ellipse at center,rgba(8,32,80,.38),rgba(8,32,80,0) 70%);pointer-events:none}
.scene .flyer{filter:drop-shadow(0 6px 6px rgba(10,30,70,.25))}

.ltop{position:fixed;left:0;right:0;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:calc(14px + var(--safe-t)) 18px 0}
.llogo{display:flex;align-items:center;gap:9px;white-space:nowrap;text-decoration:none;color:#fff;font-weight:700;font-size:17px;letter-spacing:.01em;padding:5px 8px 5px 5px;border-radius:999px;background:rgba(14,14,19,.38);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(10,30,70,.2)}
.llogo .mark{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:999px;background:#fff;color:var(--vio);font-size:12px}
.llogo .xp{font-size:10px;font-weight:600;letter-spacing:.08em;border:1px solid rgba(255,255,255,.5);background:rgba(14,14,19,.35);border-radius:999px;padding:3px 8px;margin-left:6px;backdrop-filter:blur(6px)}
.lbtn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-family:'Jersey 15','Inter',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:#fff;border-radius:999px;transition:transform .15s,box-shadow .2s;white-space:nowrap}
.lbtn.small{font-size:16px;padding:8px 16px;box-shadow:0 4px 14px rgba(10,30,70,.25)}
.lbtn.big{font-size:clamp(22px,2.6vw,30px);padding:14px 38px 12px;box-shadow:0 14px 40px rgba(10,30,70,.35),0 0 0 0 rgba(255,255,255,.5);animation:breathe 2.6s ease-in-out infinite}
.lbtn.big:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 18px 48px rgba(10,30,70,.4),0 0 0 6px rgba(255,255,255,.22)}
.lbtn.big:active{transform:scale(.98)}
@keyframes breathe{0%,100%{box-shadow:0 14px 40px rgba(10,30,70,.35),0 0 0 0 rgba(255,255,255,.45)}50%{box-shadow:0 14px 40px rgba(10,30,70,.35),0 0 0 10px rgba(255,255,255,0)}}

.lhero{position:fixed;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 18px;pointer-events:none}
.lhero > *{pointer-events:auto}
.wordmark{margin:0;font-family:'Jersey 15',monospace;font-weight:400;font-size:clamp(54px,11.5vw,168px);line-height:.85;letter-spacing:.01em;color:#fff;
  text-shadow:0 3px 0 #1C5FB8,0 6px 0 #1C5FB8,0 9px 0 #1C5FB8,0 12px 0 #0F3F85,0 20px 40px rgba(10,30,70,.45);
  -webkit-text-stroke:1.5px rgba(15,63,133,.35)}
.lline{margin:18px 0 26px;font-size:clamp(17px,1.8vw,24px);font-weight:500;text-shadow:0 2px 8px rgba(10,30,70,.5)}
.lfine{margin:16px 0 0;font-size:13px;color:rgba(255,255,255,.85);text-shadow:0 1px 6px rgba(10,30,70,.5);max-width:46ch}
.lfoot .ind{opacity:.8}
.lfoot{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:space-between;gap:12px;padding:0 18px calc(12px + var(--safe-b));font-size:12px;color:rgba(255,255,255,.8);text-shadow:0 1px 4px rgba(10,30,70,.5)}

@media (max-width:700px){
  .lhero{justify-content:flex-end;padding-bottom:calc(84px + var(--safe-b))}
  .wordmark{font-size:clamp(48px,15.5vw,84px)}
  .lline{margin:12px 0 18px;font-size:17px}
  .lfine{display:none}
  .lfoot span:last-child{display:none}
  .ltop .lbtn.small{display:none}
}
@media (prefers-reduced-motion:reduce){.lbtn.big{animation:none}}

/* music toggle: one small round button in the corner, nothing else up top */
.snd{position:fixed;right:16px;bottom:calc(40px + var(--safe-b));z-index:6;width:42px;height:42px;border-radius:999px;border:0;display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(14,14,19,.38);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(10,30,70,.25);transition:transform .15s,background .2s}
.snd:hover{transform:scale(1.06);background:rgba(14,14,19,.5)}
.snd svg{width:20px;height:20px}
.snd .on{display:none}
.snd[aria-pressed="true"] .on{display:inline}
.snd[aria-pressed="true"] .off{display:none}
.snd[aria-pressed="true"]{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 6px 18px rgba(10,30,70,.25),0 0 0 0 rgba(255,255,255,.35)}50%{box-shadow:0 6px 18px rgba(10,30,70,.25),0 0 0 8px rgba(255,255,255,0)}}
@media (max-width:700px){.snd{bottom:calc(14px + var(--safe-b));right:12px;width:38px;height:38px}}

/* the logo: the mug floats above the wordmark */
.lmark{width:clamp(130px,13vw,200px);height:auto;margin-bottom:4px;filter:drop-shadow(0 0 14px rgba(255,255,255,.75)) drop-shadow(0 0 34px rgba(255,255,255,.45)) drop-shadow(0 16px 22px rgba(10,30,70,.35));animation:lfloat 4.2s ease-in-out infinite;pointer-events:none}
@keyframes lfloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@media (max-width:700px){.lmark{width:96px;margin-bottom:2px}}
@media (prefers-reduced-motion:reduce){.lmark{animation:none}}

/* the mascot sits in the top-left corner, bobbing */
.lmascot{position:fixed;left:calc(10px + env(safe-area-inset-left,0px));top:calc(8px + var(--safe-t));z-index:6;display:block;line-height:0}
.lmascot img{width:clamp(84px,8vw,124px);height:auto;filter:drop-shadow(0 0 10px rgba(255,255,255,.7)) drop-shadow(0 10px 16px rgba(10,30,70,.35));animation:lfloat 4.2s ease-in-out infinite}
@media (max-width:700px){.lmascot img{width:76px}}
@media (prefers-reduced-motion:reduce){.lmascot img{animation:none}}