:root{font-family:Arial,Helvetica,sans-serif;color:#23211e;background:#fff;color-scheme:light;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:#fff}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
.page{width:min(100%,1600px);min-height:100vh;min-height:100svh;margin:auto;padding:30px clamp(22px,4.3vw,70px) 34px;display:grid;grid-template-rows:auto 1fr auto;gap:24px}
.header{display:flex;justify-content:space-between;align-items:center;min-height:44px}
h1{font-size:42px;line-height:1;margin:0;font-weight:600;letter-spacing:-.07em}
.meta{display:flex;align-items:center;gap:20px;font-size:14px;color:#69665f}
.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;gap:18px;padding:16px 0 12px}
.stage{width:min(57svh,500px,calc(100vw - 72px));aspect-ratio:1;display:grid;place-items:center}
.bag{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;user-select:none;animation:hover-bag 7s ease-in-out infinite;transform-origin:50% 45%;will-change:transform}
@keyframes hover-bag{0%,100%{transform:translateY(7px) rotate(-.6deg)}50%{transform:translateY(-10px) rotate(.8deg)}}
.description{font-size:19px;font-weight:400;line-height:1.4;letter-spacing:.015em;margin:0;text-align:center}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;min-height:46px}
.action{display:inline-flex;align-items:center;justify-content:center;padding:0 22px;min-height:46px;border-radius:999px;border:1px solid #dfddd8;background:#fff;color:#39352e;font-size:14px;line-height:1.2;text-decoration:none;cursor:pointer;transition:background .18s,border-color .18s}
.action:hover{background:#f6f3ed;border-color:#bdb7ad}
.copy{background:#eee6d7;border-color:#eee6d7}
.copy:hover{background:#e6dac6;border-color:#e6dac6}
.action[aria-disabled=true],.action:disabled{cursor:default}
.action[aria-disabled=true]:hover{background:#fff;border-color:#dfddd8}
.copy:disabled:hover{background:#eee6d7;border-color:#eee6d7}
.motion{display:grid;place-items:center;width:32px;height:32px;background:transparent;border:1px solid #e6e4df;border-radius:50%;color:#77736c;cursor:pointer}
.motion svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.play-icon{display:none}
.motion[aria-pressed=true] .play-icon{display:block}
.motion[aria-pressed=true] .pause-icon{display:none}
.is-paused .bag{animation-play-state:paused}
a:focus-visible,button:focus-visible{outline:2px solid #4b4439;outline-offset:4px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:600px){.page{padding:22px 22px 26px;gap:18px}.header{min-height:36px}h1{font-size:36px}.meta{gap:12px}.hero{padding:18px 0;gap:22px}.stage{width:min(52svh,calc(100vw - 56px),410px)}.description{font-size:18px}.actions{gap:8px}.action{padding-inline:17px;min-height:44px;font-size:14px}}
@media(max-width:350px){.page{padding-inline:16px}.actions{gap:6px}.action{padding-inline:14px;font-size:13px}}
@media(max-height:550px) and (min-width:601px){.page{padding-block:18px;gap:12px}.hero{padding:4px 0;gap:12px}.stage{width:50svh}.description{font-size:16px}.action{min-height:40px}.actions{min-height:40px}}
@media(prefers-reduced-motion:reduce){.bag{animation:none;will-change:auto}.motion{display:none}.action{transition:none}}