:root{--bg:#191919;--card-front:#f5f1e8;--card-back:#0d1b2a;--brand-orange:#ff6b35;--border-blue:#4a90e2;--border-yellow:#f5e6a8;--text-dark:#1a2332;--text-light:#fff;--shadow-black:#0a1e3d;--radius:24px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--text-light);background:var(--bg);overflow-y:auto;overflow-x:hidden}.page{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:80px 40px 60px}.grid{display:grid;grid-template-columns:repeat(2,450px);gap:40px;width:auto;transition:all .5s cubic-bezier(.4,0,.2,1)}.card{position:relative;width:450px!important;height:340px!important;min-width:450px;min-height:340px;max-width:450px;max-height:340px;perspective:1200px;cursor:pointer;animation:cardShift .6s ease-out}.card.hidden{opacity:0;pointer-events:none}@keyframes cardSlideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes cardShift{0%{transform:translate(0) translateY(0) rotate(0) scale(1)}15%{transform:translate(-4px) translateY(-2px) rotate(-1.5deg) scale(1.01)}30%{transform:translate(4px) translateY(2px) rotate(1.5deg) scale(1.01)}45%{transform:translate(-3px) translateY(-1px) rotate(-1deg) scale(1.005)}60%{transform:translate(3px) translateY(1px) rotate(1deg) scale(1.005)}75%{transform:translate(-1px) translateY(-.5px) rotate(-.5deg) scale(1)}90%{transform:translate(1px) translateY(.5px) rotate(.3deg) scale(1)}to{transform:translate(0) translateY(0) rotate(0) scale(1)}}.cardInner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1)}.card.flipped .cardInner{transform:rotateX(180deg)}.cardFace{position:absolute;width:100%;height:100%;border-radius:var(--radius);border:3px solid var(--shadow-black);border-right-width:8px;border-bottom-width:8px;backface-visibility:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:48px;font-size:22px;font-weight:600;text-align:left;transition:all .3s cubic-bezier(.4,0,.2,1)}.cardFace.front{transform:rotateX(0);background:var(--card-front);color:var(--text-dark);align-items:center;justify-content:center;text-align:center}.cardFace.back{transform:rotateX(180deg);background:var(--card-back);color:var(--text-light);align-items:center;justify-content:center;text-align:center;padding-bottom:48px}.starIcon{position:absolute;top:28px;right:28px;width:40px;height:40px}.cardTitle{font-size:clamp(32px,4vw,40px);font-weight:700;letter-spacing:-.5px;white-space:nowrap}.cardContent{font-size:clamp(20px,2.5vw,24px);font-weight:500;line-height:1.5;max-width:100%}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease;pointer-events:all}.zoomCard{position:fixed;perspective:1000px;animation:expandFromCard .6s cubic-bezier(.16,1,.3,1) forwards;z-index:1000}@keyframes expandFromCard{0%{top:var(--start-top);left:var(--start-left);width:var(--start-width);height:var(--start-height);opacity:1;transform:translate(0) scale(1)}40%{top:calc((var(--start-top) + 50vh) / 2);left:calc((var(--start-left) + 50vw) / 2);width:calc((var(--start-width) + 600px) / 2);height:calc((var(--start-height) + 450px) / 2);transform:translate(-50%,-50%) scale(1.1)}to{top:50%;left:50%;width:600px;height:450px;transform:translate(-50%,-50%) scale(1);opacity:1}}.zoomCard.removing{animation:zoomOut .3s cubic-bezier(.4,0,.2,1) forwards}@keyframes zoomOut{0%{transform:scale(1) translateY(0);opacity:1;filter:blur(0)}to{transform:scale(.7) translateY(50px);opacity:0;filter:blur(5px)}}.zoomCard .cardInner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.4,0,.2,1);animation:flipToBack .8s cubic-bezier(.4,0,.2,1) .3s forwards}@keyframes flipToBack{0%{transform:rotateX(0)}to{transform:rotateX(180deg)}}.zoomCard.flipped .cardInner{transform:rotateX(180deg)}.zoomCard .cardFace{position:absolute;width:100%;height:100%;border-radius:var(--radius);border-right-width:10px;border-bottom-width:10px;backface-visibility:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:60px;font-size:24px;font-weight:600;text-align:left}.zoomCard .cardFace.front{transform:rotateX(0);background:var(--card-front);color:var(--text-dark);align-items:center;justify-content:center;text-align:center;border:3px solid var(--border-yellow)}.zoomCard .cardFace.back{transform:rotateX(180deg);background:var(--card-back);color:var(--text-light);align-items:center;justify-content:center;text-align:center;padding:48px}.zoomCard .starIcon{width:44px;height:44px;top:32px;right:32px}.zoomCard .cardTitle{font-size:clamp(40px,5vw,52px);white-space:nowrap}.zoomCard .cardContent{font-size:clamp(24px,3vw,28px);font-weight:500;line-height:1.4}.actionButtons{position:absolute;bottom:40px;left:50%;transform:translate(-50%);display:flex;gap:32px;z-index:20}.actionBtn{width:72px;height:72px;border-radius:50%;border:4px solid;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);position:relative}.actionBtn:hover{transform:scale(1.15) rotate(5deg)}.actionBtn:active{transform:scale(.95)}.actionBtn.check{border-color:#4ade80;box-shadow:3px 3px #4ade80}.actionBtn.check:hover{background:#4ade8026;box-shadow:4px 4px #4ade80}.actionBtn.cross{border-color:#f87171;box-shadow:3px 3px #f87171}.actionBtn.cross:hover{background:#f8717126;box-shadow:4px 4px #f87171}.actionBtn svg{width:36px;height:36px;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;fill:none}.actionBtn.check svg{stroke:#4ade80}.actionBtn.cross svg{stroke:#f87171}@keyframes drawCheck{0%{stroke-dashoffset:50}to{stroke-dashoffset:0}}@keyframes drawCross{0%{stroke-dashoffset:40}to{stroke-dashoffset:0}}.actionBtn.check svg path{stroke-dasharray:50;stroke-dashoffset:50;animation:drawCheck .6s ease forwards}.actionBtn.cross svg line{stroke-dasharray:40;stroke-dashoffset:40;animation:drawCross .5s ease forwards}.actionBtn.check svg path:nth-child(2){animation-delay:.1s}.actionBtn.cross svg line:nth-child(2){animation-delay:.15s}.closeBtn{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:12px;background:var(--shadow-black);color:#fff;border:none;font-size:24px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s ease}.closeBtn:hover{transform:scale(1.1);background:#333}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{transform:scale(.3) translateY(100px);opacity:0;filter:blur(10px)}to{transform:scale(1) translateY(0);opacity:1;filter:blur(0)}}