/* Jasurbek va Nilufar namunasining alohida sahnasi; Gulzorning umumiy funksiyalari saqlanadi. */
.demo-million{--million-ink:#51233e;--million-rose:#d85076;--million-coral:#f47d72;--million-gold:#bf8b4b}
.demo-million body{background:#fff3ec;color:var(--million-ink)}
.demo-million .inv{isolation:isolate;background:linear-gradient(165deg,#fffaf4 0%,#ffe8df 34%,#fff4ec 68%,#f8dfe9 100%)}
.demo-million .wash{opacity:1;background:radial-gradient(circle at 9% 8%,#ffb8b8aa,transparent 29%),radial-gradient(circle at 92% 19%,#fbd383c2,transparent 32%),radial-gradient(circle at 50% 49%,#ffffffad,transparent 39%),radial-gradient(circle at 3% 87%,#f0a5b78c,transparent 30%),radial-gradient(circle at 92% 92%,#fbb87991,transparent 30%)}
.demo-million .million-glow{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.demo-million .million-glow i{position:absolute;display:block;width:290px;height:290px;border:1px solid #fff9;border-radius:43% 57% 49% 51%;filter:drop-shadow(0 0 14px #fff9);animation:million-orbit 22s linear infinite}
.demo-million .million-glow i:nth-child(1){top:1%;left:-130px}
.demo-million .million-glow i:nth-child(2){top:31%;right:-150px;width:350px;height:350px;animation-duration:27s;animation-direction:reverse}
.demo-million .million-glow i:nth-child(3){top:70%;left:-165px;width:370px;height:370px;animation-duration:34s}
.demo-million .content{padding:74px 20px 54px;gap:24px}
.demo-million .million-prelude{display:flex;justify-content:center;align-items:center;gap:10px;color:#a75963;font:700 10px/1.3 var(--fb);letter-spacing:.25em;text-transform:uppercase;animation:million-enter .9s both}
.demo-million .million-prelude span:first-child,.demo-million .million-prelude span:last-child{color:#d3a35d;font-size:18px;line-height:1}
.demo-million .million-prelude-line{width:29px;height:1px;background:linear-gradient(90deg,transparent,#b9855d,transparent)}
.demo-million .cal{margin:0 auto 4px;width:100%;max-width:350px;background:#fff9;border:1px solid #fff;border-radius:19px;padding:16px 12px;box-shadow:0 15px 35px #a7545c19;animation:million-enter .9s .34s both}
.demo-million .cal .m{font-family:var(--fb);font-weight:800;color:#8c4b5e}
.demo-million .cal .dn span.on{background:linear-gradient(135deg,#db5479,#f4866b);box-shadow:0 8px 16px #b9486670}
.demo-million .hero{min-height:540px;padding:76px 22px 44px;margin:0 3px;border:1px solid #fff;background:linear-gradient(145deg,#fffefaed,#fff8f0d9 52%,#ffece3df);border-radius:230px 230px 28px 28px;box-shadow:0 25px 55px #9e4d6730,0 2px 0 #fff8 inset;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:million-enter 1s .15s both}
.demo-million .hero::before{inset:10px;border:1px solid #d9a56d91;border-radius:220px 220px 22px 22px}
.demo-million .hero::after{content:'✦';position:absolute;top:23px;left:50%;transform:translateX(-50%);display:grid;place-items:center;width:48px;height:48px;border:1px solid #e9c7a2;border-radius:50%;background:#fff8ef;color:#bd8550;font-size:26px;box-shadow:0 4px 14px #a96a4930}
.demo-million .hero .small{color:#a05c62;font-weight:800;font-size:10px;letter-spacing:.24em;max-width:26ch;line-height:1.7}
.demo-million .hero .names{font-size:clamp(54px,15vw,77px);line-height:.92;color:var(--million-ink);margin:29px 0 22px;text-shadow:0 5px 0 #fff8;letter-spacing:-.025em}
.demo-million .hero .names .n{animation:million-name 1.1s .35s both}
.demo-million .hero .names .n:last-child{animation-delay:.55s}
.demo-million .hero .names .amp{font-size:39px;color:var(--million-coral);line-height:1.3;animation:million-pop 1s .5s both}
.demo-million .hero .quote{font-size:19px;line-height:1.35;color:#8e5463;margin:0;max-width:27ch}
.demo-million .hero .photo{width:168px;height:168px;border:5px solid #fff;outline:1px solid #d4a16c;box-shadow:0 13px 35px #974d6080}
.demo-million .million-listen{align-self:center;display:flex;align-items:center;gap:10px;border:1px solid #fff;border-radius:999px;padding:10px 15px 10px 9px;background:linear-gradient(100deg,#da5278,#f07f76);color:#fff;font:700 12px/1.25 var(--fb);cursor:pointer;box-shadow:0 10px 26px #bd51614a;transition:transform .2s,box-shadow .2s;animation:million-enter 1s .45s both}
.demo-million .million-listen:hover{transform:translateY(-2px);box-shadow:0 13px 30px #bd516177}
.demo-million .million-listen:focus-visible{outline:3px solid #5d2945;outline-offset:3px}
.demo-million .million-listen-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:#ce5270;font-size:19px}
.demo-million .million-listen-bars{display:flex;align-items:end;gap:2px;height:13px;margin-left:2px}
.demo-million .million-listen-bars i{display:block;width:2px;height:5px;background:#fff;border-radius:2px}
.demo-million .million-listen[aria-pressed="true"] .million-listen-bars i{animation:million-bars .7s ease-in-out infinite alternate}
.demo-million .million-listen[aria-pressed="true"] .million-listen-bars i:nth-child(2){animation-delay:.17s}
.demo-million .million-listen[aria-pressed="true"] .million-listen-bars i:nth-child(3){animation-delay:.31s}
.demo-million .million-listen[aria-pressed="true"] .million-listen-bars i:nth-child(4){animation-delay:.1s}
.demo-million .greeting{background:#ffffffb5;border:1px solid #fff;border-radius:22px;padding:24px 18px;box-shadow:0 14px 35px #a7545c1b}
.demo-million .greeting p{font-size:22px;color:#5c2b43}
.demo-million .greeting p::first-line{color:#c95772}
.demo-million .frame:not(.hero),.demo-million .ev,.demo-million .parents div,.demo-million .note,.demo-million .wi,.demo-million .smp{background:#fffdfaeb;border:1px solid #fff;box-shadow:0 12px 28px #a7545c1d}
.demo-million .frame:not(.hero){border-radius:23px}
.demo-million .ev,.demo-million .parents div,.demo-million .note,.demo-million .wi{border-radius:18px}
.demo-million .datebig,.demo-million .ev .t,.demo-million .together{color:#b94163}
.demo-million .cd div{background:#fffdfa;border:1px solid #f4d5d4;border-radius:14px;box-shadow:0 8px 16px #a7545c16}
.demo-million .btn.solid{background:linear-gradient(110deg,#c84268,#e56d73);border-color:transparent;box-shadow:0 8px 20px #b948663a}
.demo-million .btn:not(.solid){background:#fff9f6}
.demo-million .today{background:linear-gradient(130deg,#af3b69,#eb7273);box-shadow:0 16px 32px #a63d6440}
.demo-million .music,.demo-million .langs{background:#fffdf4e8;border:1px solid #ffffffc9;box-shadow:0 7px 24px #b34e552d;backdrop-filter:blur(12px)}
.demo-million .music.on,.demo-million .langs button[aria-pressed="true"]{background:#d85376;color:#fff}
.demo-million .gate{background:radial-gradient(circle at 20% 20%,#ffe8a8 0,transparent 38%),radial-gradient(circle at 83% 78%,#ffadb7 0,transparent 44%),linear-gradient(145deg,#fff9f2,#ffd9d2 50%,#f9c4d7)}
.demo-million .gate::before,.demo-million .gate::after{content:'✦';position:absolute;color:#fff8;font-size:110px;animation:million-twinkle 4s ease-in-out infinite alternate;pointer-events:none}
.demo-million .gate::before{top:8%;left:6%}
.demo-million .gate::after{bottom:7%;right:7%;font-size:80px;animation-delay:1.2s}
.demo-million .env{filter:drop-shadow(0 27px 28px #a8456460)}
.demo-million .env-back{background:#dd6481}
.demo-million .env-front{background:linear-gradient(155deg,#f4a6a7,#d9597b)}
.demo-million .env-flap{background:linear-gradient(180deg,#ea7892,#c84770)}
.demo-million .env-seal{background:radial-gradient(circle at 28% 25%,#ffccd0,#d24c74 59%,#9b355d);border-color:#fff4e4}
.demo-million .gate-names{font-size:37px;color:#60293f;text-shadow:0 2px #fff7}
.demo-million .gate .hint{font-weight:700;color:#783e51;background:#fff9;padding:8px 15px;border-radius:999px}
.demo-million .petal{box-shadow:0 2px 5px #9d435a20}
@keyframes million-orbit{to{transform:rotate(360deg)}}
@keyframes million-enter{from{opacity:0;transform:translateY(28px) scale(.98)}to{opacity:1;transform:none}}
@keyframes million-name{from{opacity:0;transform:translateY(17px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes million-pop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
@keyframes million-bars{to{height:13px}}
@keyframes million-twinkle{to{opacity:.35;transform:scale(.7) rotate(20deg)}}
@media(max-width:390px){.demo-million .content{padding-left:14px;padding-right:14px}.demo-million .hero{min-height:510px;padding-left:15px;padding-right:15px}.demo-million .hero .names{font-size:clamp(48px,15vw,68px)}}
@media(prefers-reduced-motion:reduce){.demo-million .million-glow i,.demo-million .million-prelude,.demo-million .cal,.demo-million .hero,.demo-million .hero .names .n,.demo-million .hero .names .amp,.demo-million .million-listen,.demo-million .million-listen-bars i,.demo-million .gate::before,.demo-million .gate::after{animation:none}.demo-million .million-listen:hover{transform:none}}
@media print{.demo-million .million-listen,.demo-million .million-glow{display:none}}