:root{--ink:#2b231c;--ink-soft:#5b4b3d;--ink-faint:#8a7968;--paper:#fbf7ea;--accent-red:#d0433a;--accent-mustard:#e3a824;--accent-green:#3f7a4a;--accent-blue:#2f6b8f;--note-yellow:#ffe77a;--note-pink:#ffb8c1;--note-blue:#b5d8f0;--note-green:#bce3a7;--note-orange:#ffc78a;--note-cream:#fff4d6;--tape:#e6d2788c}*,:before,:after{box-sizing:border-box}html,body{max-width:100%;margin:0;padding:0;overflow-x:clip}body{color:var(--ink);background-color:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;text-wrap:balance;min-height:100vh;font-family:Inter,system-ui,sans-serif}body:before{content:"";pointer-events:none;z-index:200;opacity:.32;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.14 0 0 0 0 0.1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}.stage{background-color:var(--paper);min-height:100vh;padding:48px clamp(16px,4vw,64px) 120px;position:relative;overflow-x:clip}.intro{text-align:center;z-index:1;max-width:900px;margin:0 auto 48px;padding:20px 0 10px;position:relative}.intro-emoji{pointer-events:none;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 2px 4px #0000001f);z-index:0;font-size:38px;line-height:1;position:absolute}.intro-emoji.e1{top:12px;left:-4%;transform:rotate(-14deg)scale(1.1)}.intro-emoji.e2{font-size:32px;top:-6px;right:-2%;transform:rotate(10deg)scale(.9)}.intro-emoji.e3{top:72px;left:8%;transform:rotate(18deg)scale(.85)}.intro-emoji.e4{top:52px;right:4%;transform:rotate(-8deg)scale(1)}.intro-emoji.e5{font-size:34px;bottom:30%;left:-2%;transform:rotate(-12deg)scale(.95)}.intro-emoji.e6{top:46%;right:-4%;transform:rotate(14deg)scale(1.05)}.intro-emoji.e7{bottom:8%;left:6%;transform:rotate(6deg)scale(.9)}.intro-emoji.e8{bottom:12%;right:8%;transform:rotate(-10deg)scale(1)}.intro-emoji.e9{font-size:28px;top:-10px;left:20%;transform:rotate(-4deg)scale(.8)}.intro-emoji.e10{font-size:30px;bottom:-4px;right:22%;transform:rotate(12deg)scale(.85)}@media (width<=880px){.intro-emoji.e3,.intro-emoji.e6,.intro-emoji.e9,.intro-emoji.e10{display:none}.intro-emoji{font-size:26px}.intro-emoji.e1{top:-4px;left:0}.intro-emoji.e2{top:-8px;right:0}.intro-emoji.e5{bottom:38%;left:-4px}.intro-emoji.e7{bottom:2%;left:4%}.intro-emoji.e8{bottom:0;right:4%}}.eyebrow{color:var(--accent-red);letter-spacing:.5px;font-family:Caveat,cursive;font-size:clamp(22px,2.4vw,28px);display:inline-block;transform:rotate(-2deg)}.title{font-variation-settings:"opsz" 144;letter-spacing:-.02em;text-wrap:balance;margin:6px 0 4px;font-family:Fraunces,serif;font-size:clamp(48px,8vw,104px);font-weight:900;line-height:.95}.title em{color:var(--accent-red);font-style:italic;font-weight:700}.subtitle-ru{color:var(--accent-green);white-space:nowrap;margin-top:22px;font-family:Caveat,cursive;font-size:clamp(28px,3.6vw,48px);line-height:1;display:inline-block;transform:rotate(-1deg)}@media (width<=880px){.subtitle-ru{white-space:normal;margin-top:8px;font-size:clamp(26px,6vw,36px)}.br-desktop{display:none}}.intro p{text-wrap:balance;max-width:560px;margin:24px auto 0;font-family:Fraunces,serif;font-size:clamp(16px,1.6vw,19px);font-weight:400;line-height:1.55}.intro p .ru{color:var(--accent-red);white-space:nowrap;font-family:Caveat,cursive;font-size:1.25em}.hedgehog{vertical-align:-.28em;width:auto;height:1.4em;display:inline-block;transform:rotate(-6deg)}.progress-badge{z-index:50;background:var(--note-cream);color:var(--ink);cursor:default;border:1.5px solid #00000026;border-radius:999px;align-items:center;gap:10px;padding:10px 18px 10px 14px;font-family:Caveat,cursive;font-size:22px;transition:transform .3s;display:flex;position:fixed;top:20px;right:20px;transform:rotate(3deg);box-shadow:0 3px #00000014,0 8px 20px #00000026}@media (hover:hover){.progress-badge:hover{transform:rotate(0)scale(1.05)}}.progress-dots{align-items:center;gap:3px;display:inline-flex}.progress-dot{background:#00000026;border-radius:50%;width:7px;height:7px;transition:background .3s,transform .3s}.progress-dot.heard{background:var(--accent-red);transform:scale(1.2)}.progress-bar{background:#0000001f;border-radius:999px;width:56px;height:6px;display:none;overflow:hidden}.progress-bar>span{background:var(--accent-red);border-radius:999px;height:100%;transition:width .35s;display:block}@media (width<=1240px){.progress-dots{display:none}.progress-bar{display:block}}@media (width<=880px){.progress-badge{padding:8px 14px;font-size:18px;top:12px;right:12px}.progress-bar{width:44px}}.board{max-width:1400px;min-height:2420px;margin:0 auto;position:relative}@media (width<=880px){.board{flex-direction:column;align-items:stretch;min-height:auto;padding:16px 0 40px;display:flex}}.card{cursor:pointer;-webkit-user-select:none;user-select:none;will-change:transform;transform-origin:50%;border-radius:3px;width:240px;padding:18px 18px 16px;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,filter .3s;position:absolute}@media (hover:hover){.card:hover{z-index:20!important;transform:rotate(0)translateY(-6px)scale(1.03)!important;box-shadow:0 16px 36px #00000047,0 4px 10px #00000026!important}}.card.playing{z-index:30!important;transform:rotate(0)translateY(-10px)scale(1.05)!important;box-shadow:0 20px 44px #00000052,0 6px 14px #0000002e!important}.card.heard{filter:saturate(.82)brightness(.98)}.listened-sticker{background:var(--note-cream);letter-spacing:.3px;color:var(--ink);z-index:5;pointer-events:none;white-space:nowrap;border:1px solid #0000001f;border-radius:2px;align-items:center;gap:5px;padding:6px 11px 5px;font-family:Caveat,cursive;font-size:19px;font-weight:700;line-height:1;display:flex;position:absolute;top:-14px;right:-22px;transform:rotate(6deg);box-shadow:0 4px 12px #0000002e,0 1px 3px #00000014}.listened-sticker .sticker-tape{background:var(--tape);border-left:1px dashed #0000000f;border-right:1px dashed #0000000f;border-radius:1px;width:42px;height:13px;position:absolute;top:-7px;left:28%;transform:translate(-50%)rotate(-9deg);box-shadow:0 1px 2px #00000014}.sticker-check{color:var(--accent-red);font-size:20px;font-weight:800;line-height:1}.tape{background:var(--tape);border-left:1px dashed #00000014;border-right:1px dashed #00000014;width:60px;height:22px;position:absolute;top:-10px;left:50%;transform:translate(-50%)rotate(-4deg);box-shadow:0 1px 3px #0000001a}.card-2 .tape{left:30%;transform:translate(-50%)rotate(6deg)}.card-5 .tape{left:70%;transform:translate(-50%)rotate(-8deg)}.card-inner{flex-direction:column;gap:10px;display:flex;position:relative}.card-top{justify-content:space-between;align-items:flex-start;gap:7px;display:flex}.card-name{color:var(--ink);font-family:Caveat,cursive;font-size:26px;font-weight:700;line-height:1}.card-flag{white-space:nowrap;letter-spacing:-4px;filter:drop-shadow(0 1px 2px #00000026);flex-shrink:0;font-size:22px;line-height:1}.card-bottom{align-items:center;gap:10px;margin-top:4px;display:flex}.play-btn{border:2px solid var(--ink);cursor:pointer;background:#ffffff59;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;padding:0;transition:transform .2s,background .2s;display:flex;position:relative}@media (hover:hover){.play-btn:hover{background:#fff9;transform:scale(1.1)}}.play-btn:active{transform:scale(.95)}.play-icon{border-left:12px solid var(--ink);border-top:8px solid #0000;border-bottom:8px solid #0000;width:0;height:0;margin-left:3px}.pause-icon{gap:3px;display:flex}.pause-icon span{background:var(--ink);width:4px;height:14px}.wave{flex:1;align-items:center;gap:2px;height:32px;display:flex;overflow:hidden}.wave-bar{background:#00000059;border-radius:1px;flex:1;min-width:2px;transition:background .2s,height .1s}.wave-bar.played{background:var(--accent-red)}.card.heard .wave-bar{background:#00000040}.card.heard .wave-bar.played{background:var(--accent-red);opacity:.6}.doodle{pointer-events:none;z-index:0;opacity:.85;-webkit-user-select:none;user-select:none;font-size:38px;line-height:1;position:absolute}.polaroid{cursor:default;-webkit-user-select:none;user-select:none;z-index:8;background:#fdfaf0;border:1px solid #00000014;width:190px;padding:10px 10px 42px;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;position:absolute;box-shadow:0 8px 22px #00000038,0 2px 6px #0000001f}@media (hover:hover){.polaroid:hover{box-shadow:0 18px 34px #00000047,0 4px 8px #00000026;z-index:22!important;transform:rotate(0)translateY(-4px)scale(1.04)!important}}.polaroid .photo{border-radius:1px;width:100%;height:170px;position:relative;overflow:hidden}.polaroid .caption{text-align:center;color:#4a3a2a;font-family:Caveat,cursive;font-size:20px;position:absolute;bottom:10px;left:0;right:0;transform:rotate(-1deg)}.polaroid .tape{background:#e6d27899}.polaroid.p-a .photo{background:radial-gradient(circle at 70% 30%,#fff6a8 0 22px,#0000 23px),linear-gradient(#f8c27a 0%,#ea8b5a 50%,#c96a55 100%)}.polaroid.p-a .photo:after{content:"";background:linear-gradient(#281e321a,#140f1e73);height:36%;position:absolute;inset:auto 0 0}.polaroid.p-b .photo{background:radial-gradient(at 30% 40%,#ffd866 0 10%,#0000 40%),radial-gradient(at 75% 75%,#ff87a1 0 14%,#0000 50%),linear-gradient(160deg,#8ec5e8,#5a9ed8)}.polaroid.p-c .photo{background:repeating-linear-gradient(45deg,#ffffff1f 0 4px,#0000 4px 8px),linear-gradient(160deg,#3f6f4a 0%,#2a4d36 100%)}.polaroid.p-c .photo:before{content:"🎂";filter:drop-shadow(0 3px 6px #00000059);justify-content:center;align-items:center;font-size:84px;display:flex;position:absolute;inset:0}.polaroid.p-d .photo{background:radial-gradient(at 50% 60%,#ffe5a8 0 18%,#0000 55%),linear-gradient(#2e2846 0%,#5b3a6b 60%,#c45a8a 100%)}.polaroid.p-d .photo:after{content:"✨";filter:drop-shadow(0 1px 2px #0000004d);font-size:28px;position:absolute;top:14%;right:18%}.polaroid.has-photo .photo{background-color:#fdfaf0;background-position:50%!important;background-repeat:no-repeat!important;background-size:contain!important}.polaroid.has-photo .photo:before,.polaroid.has-photo .photo:after{content:none}@media (width<=880px){.doodle,.board>.polaroid:not(.m-polaroid){display:none}.m-polaroid{width:58%;max-width:210px;margin:0;padding:10px 10px 38px;position:relative!important;top:auto!important;left:auto!important}.m-deco-single .m-polaroid{width:54%;max-width:200px}.m-polaroid .photo{height:160px}.m-polaroid .caption{font-size:19px;bottom:10px}.m-polaroid.p-c .photo:before{font-size:76px}}.confetti{pointer-events:none;z-index:99;position:fixed;inset:0;overflow:hidden}.confetti i{opacity:0;width:10px;height:14px;animation:3.2s ease-in forwards fall;position:absolute;top:-20px}@keyframes fall{0%{opacity:1;transform:translateY(-20px)rotate(0)}to{opacity:.2;transform:translateY(110vh)rotate(720deg)}}.footer{z-index:1;text-align:center;color:var(--ink-soft);margin-top:120px;font-family:Caveat,cursive;font-size:22px;position:relative;transform:rotate(-1deg)}@media (width<=880px){.stage{padding:72px 14px 80px}.card{width:auto;padding:14px 14px 12px}.card-name{font-size:22px}.card.playing{transform:rotate(0)scale(1.04)translateY(-3px)!important}.listened-sticker{padding:5px 9px 4px;font-size:16px;top:-12px;right:-14px}.listened-sticker .sticker-tape{width:34px;height:11px;top:-6px}.sticker-check{font-size:17px}.card-flag{font-size:19px}.play-btn{width:38px;height:38px}.wave{height:28px}.footer{margin-top:60px}}.m-deco{justify-content:center;align-self:stretch;align-items:center;gap:18px;margin:28px 0 18px;display:flex;position:relative}.m-card-row{width:100%;position:relative}.m-side-emoji{pointer-events:none;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 2px 4px #0000001f);transform-origin:50%;z-index:2;font-size:34px;line-height:1;position:absolute}.m-side-left{left:4%}.m-side-right{right:4%}.m-deco-emoji{pointer-events:none;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 2px 4px #0000001f);transform-origin:50%;z-index:1;font-size:38px;line-height:1;position:absolute}