*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#159bdf}body{font-family:Arial,sans-serif}.world{position:relative;isolation:isolate;width:100%;height:100svh;min-height:320px;overflow:hidden}.landscape{position:absolute;inset:-2%;z-index:-3;background:url('assets/landscape-v2.png') center 55%/cover no-repeat;animation:breathe 24s ease-in-out infinite alternate}.sunlight{position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 78% 0%,#fff5c629,transparent 55%);mix-blend-mode:screen}.logo{position:absolute;left:9%;top:7%;width:min(45vw,700px);margin:0;z-index:2;animation:float 5s ease-in-out infinite;filter:drop-shadow(0 18px 9px #49250030);pointer-events:none}.logo img{width:100%;height:auto;display:block}.dance-floor{position:absolute;left:34%;right:0;bottom:5%;height:68%;pointer-events:none}.travel{position:absolute;left:24%;bottom:0;width:min(45vw,65vh,660px);aspect-ratio:1;animation:travel 17.14s ease-in-out infinite}.cat{position:absolute;inset:0;border:0;background:none;padding:0;cursor:pointer;pointer-events:auto;transform-origin:50% 90%;animation:groove 2.143s ease-in-out infinite;filter:drop-shadow(0 10px 3px #24430035);-webkit-tap-highlight-color:transparent}.sprite{display:block;width:100%;height:100%;background:url('assets/dance-v2.png') 0 0/200% 200% no-repeat;animation:poses 2.143s steps(1,end) infinite}.shadow{position:absolute;left:22%;right:17%;height:7%;bottom:0;border-radius:50%;background:#15380075;filter:blur(10px);animation:shadow 2.143s ease-in-out infinite}.cat.superjump{animation:superjump 1s cubic-bezier(.2,.7,.4,1)}.cat.superjump .sprite{animation:none;background-position:100% 100%}.controls{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:12px;z-index:5}.icon{display:grid;place-items:center;width:50px;height:50px;border:1px solid #ffffff80;border-radius:50%;background:#fff8e7db;box-shadow:0 5px 18px #17370030;color:#452810;cursor:pointer;backdrop-filter:blur(12px);transition:transform .2s,background .2s}.icon:hover{transform:translateY(-4px);background:#fff8e7}.icon svg{width:21px;height:21px;fill:currentColor}.sound svg{fill:none}.icon:focus-visible,.cat:focus-visible{outline:3px solid #fff;outline-offset:7px}.waves,.play-shape{display:none}.sound[aria-pressed=true] .waves{display:block}.sound[aria-pressed=true] .slash{display:none}#motion[aria-pressed=true] .pause-shape{display:none}#motion[aria-pressed=true] .play-shape{display:block}.mote{position:absolute;left:var(--x);bottom:10%;width:5px;height:5px;border-radius:100%;background:#ffffc9;box-shadow:0 0 12px #fff8bb;pointer-events:none;animation:drift var(--duration) linear infinite;animation-delay:var(--delay);opacity:0}.paused *{animation-play-state:paused!important}@keyframes float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-22px) rotate(2deg)}}@keyframes breathe{to{transform:scale(1.035) translateX(-.5%)}}@keyframes travel{0%,100%{transform:translateX(0)}25%{transform:translateX(-17vw)}50%{transform:translateX(-7vw)}75%{transform:translateX(3vw)}}@keyframes poses{0%,25%{background-position:0 0}12.5%,37.5%{background-position:100% 0}50%{background-position:0 100%}62.5%,75%{background-position:100% 100%}87.5%{background-position:0 100%}}@keyframes groove{0%,25%{transform:rotate(-4deg) translateY(0) scale(1.02,.98)}12.5%,37.5%{transform:rotate(4deg) translateY(-9px)}50%{transform:scale(1.06,.94) translateY(3px)}62.5%,75%{transform:translateY(-85px) rotate(-7deg) scale(.98,1.02)}87.5%{transform:translateY(0) scale(1.08,.92)}100%{transform:rotate(-4deg)}}@keyframes shadow{0%,50%,100%{transform:scale(1);opacity:.55}65%,75%{transform:scale(.6);opacity:.2}88%{transform:scale(1.15);opacity:.6}}@keyframes superjump{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-180px) rotate(-17deg) scale(1.1)}75%{transform:translateY(-70px) rotate(8deg)}}@keyframes drift{0%{transform:translate(0,0);opacity:0}15%,80%{opacity:.65}100%{transform:translate(60px,-60vh);opacity:0}}@media(max-width:700px){.landscape{background-position:48% center}.logo{left:8%;top:9%;width:84%;animation-name:floatMobile}.dance-floor{left:0;right:0;bottom:15%;height:53%}.travel{width:min(95vw,51vh);left:50%;margin-left:calc(min(95vw,51vh)/-2);animation:travelMobile 12.86s ease-in-out infinite}.controls{bottom:max(25px,env(safe-area-inset-bottom));gap:14px}.icon{width:48px;height:48px}.mote{width:3px;height:3px}@keyframes floatMobile{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-13px) rotate(2deg)}}@keyframes travelMobile{0%,100%{transform:translateX(-5vw)}50%{transform:translateX(5vw)}}}@media(max-height:520px) and (min-width:701px){.logo{width:36vw;top:8%}.dance-floor{height:85%;bottom:8%}.travel{width:78vh}.controls{left:7%;transform:none;bottom:20px}}@media(prefers-reduced-motion:reduce){.world *{animation:none!important;transition:none!important}.sprite{background-image:url('assets/cat-v2.png');background-size:contain;background-position:center}.mote{display:none}}

@media(prefers-reduced-motion:reduce){#motion{display:none}}

.bottom-dock {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.bottom-dock .controls { position: static; transform: none; }

.contract {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  width: max-content;
  min-width: min(238px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  padding: 4px 4px 4px 10px;
  border: 1px solid #ffffff80;
  border-radius: 16px;
  background: #fff8e7ed;
  box-shadow: 0 5px 18px #17370038;
  color: #452810;
}

.contract-label { flex: none; font-size: 12px; font-weight: 800; }

.contract code {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  user-select: all;
  font: 500 14px/1.3 ui-monospace, monospace;
}

.contract button {
  flex: 0 0 60px;
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 11px;
  background: #452810;
  color: #fff8e7;
  font: 700 12px Arial, sans-serif;
  cursor: pointer;
}

.contract :focus-visible { outline: 2px solid #1568c0; outline-offset: 2px; }
.sound.autoplay-blocked { box-shadow: 0 0 0 3px #ffdd69, 0 5px 18px #17370030; }

.screen-reader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .bottom-dock { bottom: max(14px, env(safe-area-inset-bottom)); }
  .dance-floor { bottom: max(126px, calc(env(safe-area-inset-bottom) + 112px)); }
}

@media (max-height: 520px) and (min-width: 701px) {
  .bottom-dock { left: 5%; bottom: 12px; transform: none; align-items: flex-start; }
}