@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap");:root{--ink:#2d302f;--muted:#7f8581;--line:#dfdcd5;--paper:#fffdf9;--accent:#a95e57}*{box-sizing:border-box}body,html{background:#f7f5f0}body{margin:0;min-height:100vh;color:var(--ink);font-family:Manrope,Arial,sans-serif}button{font:inherit;cursor:pointer}main{width:min(100%,620px);margin:0 auto;padding:24px 16px 52px}.tabs{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;margin:0 0 24px;border:1px solid #d8c2bb;border-radius:22px;background:var(--paper)}.tabs button{min-height:50px;border:0;border-radius:0;background:transparent;color:#676964;font-size:13px;font-weight:500;transition:background .25s ease,color .25s ease,transform .2s ease}.tabs button+button{border-left:1px solid #d8c2bb}.tabs button.selected{background:#f4d9d0;color:var(--ink)}.tabs button:active,.use:active{transform:scale(.98)}.tabs span{margin-left:6px;font:400 11px DM Mono,monospace}.list{display:grid;grid-template-columns:1fr;grid-gap:14px;gap:14px}.coupon{--tone:#f9e5df;position:relative;display:flex;align-items:stretch;min-height:186px;overflow:hidden;border:1px solid color-mix(in srgb,var(--tone) 75%,#bcaea1);border-radius:22px;background:var(--tone);animation:reveal .45s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--delay)}.coupon:nth-child(6n+2){--tone:#f8edcf}.coupon:nth-child(6n+3){--tone:#e8ede0}.coupon:nth-child(6n+4){--tone:#e8ebed}.coupon:nth-child(6n+5){--tone:#f3e5ec}.coupon:nth-child(6n){--tone:#eee7dc}.coupon-copy{position:relative;z-index:1;display:flex;width:68%;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:27px 0 25px 26px}.coupon h2{max-width:280px;margin:0;font-size:clamp(22px,6.6vw,31px);line-height:1.11;letter-spacing:-.045em;font-weight:600}.art{position:absolute;z-index:0;right:-38px;bottom:-24px;width:52%;height:113%;object-fit:contain;object-position:bottom right;filter:drop-shadow(0 8px 12px rgba(73,61,47,.12));transform:rotate(-2deg);transition:transform .5s cubic-bezier(.16,1,.3,1)}.coupon:hover .art{transform:scale(1.04) rotate(-1deg)}.use{min-width:123px;padding:11px 15px;border:1.5px solid #9d5d57;border-radius:10px;color:#975853;background:rgba(255,253,249,.3);font-size:12px;font-weight:600;transition:background .2s ease,transform .2s ease}.use:hover{background:rgba(255,253,249,.7)}.is-used{opacity:.6}.is-used .art{filter:grayscale(.82) opacity(.8)}.is-used .use{border-color:#8a928d;color:#626a67}.error{margin:0 0 14px;padding:10px 12px;border-left:2px solid var(--accent);color:#75504d;background:#fbf2ef;font-size:12px}.skeleton{height:186px;border-radius:22px;background:linear-gradient(90deg,#eeeae3,#fbf9f5 48%,#eeeae3);background-size:200% 100%;animation:shimmer 1.25s ease-in-out infinite}.empty{padding:78px 12px;text-align:center;border:1px solid var(--line);border-radius:22px;background:var(--paper)}.empty h2{margin:0 0 8px;font-size:17px;font-weight:600}.empty p{margin:0;color:var(--muted);font-size:13px}@keyframes reveal{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media (min-width:640px){main{padding:40px 28px 68px}.list{gap:18px}.coupon{min-height:224px;border-radius:26px}.coupon-copy{padding:34px 0 31px 34px}.art{right:-37px;bottom:-32px}.use{padding:12px 18px}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;transition-duration:.01ms!important}}