body.invitation-shell{margin:0;background:#e6e2dc;color:#28231f;font-family:Manrope,Arial,sans-serif}.invitation-shell main{min-height:100vh}.invitation-shell .skip-link{z-index:100}.preview-toolbar{position:sticky;z-index:30;top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;min-height:68px;padding:10px max(18px,calc((100vw - 1180px)/2));background:rgba(253,252,249,.94);border-bottom:1px solid #d8d3cb;backdrop-filter:blur(16px);font-size:13px}.preview-toolbar a:hover{text-decoration:none}.preview-back{justify-self:start}.preview-back span{display:inline-grid;place-items:center;width:31px;height:31px;margin-right:8px;border:1px solid #b9b2a8;border-radius:50%}.preview-template{font-family:'Cormorant Garamond',Georgia,serif;font-size:20px}.preview-choose{justify-self:end;padding:11px 18px;border-radius:999px;background:#27211d;color:#fff;font-weight:600}

.invite-mobile{--iv-bg:#f9f6ee;--iv-paper:#fffdf8;--iv-ink:#2a2724;--iv-accent:#9d704b;--iv-soft:#dfd4c6;position:relative;width:min(430px,100%);margin:30px auto 70px;overflow:hidden;background:var(--iv-bg);color:var(--iv-ink);box-shadow:0 25px 80px #44382e2e}.invite-cover{position:relative;min-height:760px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.invite-cover-image,.invite-cover-shade{position:absolute;inset:0;width:100%;height:100%}.invite-cover-image{object-fit:cover}.invite-cover-shade{background:linear-gradient(180deg,rgba(0,0,0,.05) 32%,rgba(0,0,0,.65) 100%)}.invite-cover-copy{position:relative;z-index:2;width:100%;padding:90px 32px 63px;text-align:center;color:#fff}.invite-overline,.invite-small-title{font-size:10px;line-height:1.7;letter-spacing:3px;font-weight:600;text-transform:uppercase}.invite-cover-date{margin:15px 0 17px;font-size:11px;letter-spacing:4px}.invite-cover h1{margin:0;font:italic 54px/.92 'Cormorant Garamond',Georgia,serif;letter-spacing:-1.5px;overflow-wrap:anywhere}.invite-monogram{display:grid;place-items:center;width:78px;height:78px;margin:34px auto 0;border:1px solid currentColor;border-radius:50%;font:italic 17px 'Cormorant Garamond',Georgia,serif}.jubilee-number{display:block;margin:-15px 0 -22px;font:italic 126px/.9 'Cormorant Garamond',Georgia,serif;opacity:.42}

.invite-section{position:relative;padding:86px 36px;text-align:center}.invite-intro{padding-top:103px;background:var(--iv-paper)}.invite-message{margin:25px auto 0;max-width:320px;font:italic 26px/1.38 'Cormorant Garamond',Georgia,serif;white-space:pre-line}.orbit-mark{position:relative;width:124px;height:124px;margin:0 auto 42px}.orbit-mark i{position:absolute;inset:10px;border:1px solid var(--iv-soft);border-radius:50%}.orbit-mark i+ i{inset:25px -4px;transform:rotate(58deg)}.orbit-mark span{position:absolute;inset:0;display:grid;place-items:center;color:var(--iv-accent);font-size:16px}.invite-script{margin:0 0 35px;font:italic 38px/1.08 'Cormorant Garamond',Georgia,serif}.date-section{background:var(--iv-bg)}.date-orb{width:224px;height:224px;margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--iv-accent);border-radius:50%;text-transform:uppercase}.date-orb::before,.date-orb::after{content:'';position:absolute;border:1px solid var(--iv-soft);border-radius:50%;width:224px;height:224px}.date-orb::before{transform:translate(13px,-7px)}.date-orb::after{transform:translate(-10px,10px)}.date-orb strong{font:normal 80px/.92 'Cormorant Garamond',Georgia,serif}.date-orb span{font-size:10px;letter-spacing:3px}.invite-time{margin:32px 0 0;font:italic 29px 'Cormorant Garamond',Georgia,serif}.program-section{background:var(--iv-paper)}.program-list{width:100%;margin-top:40px}.program-item{display:grid;grid-template-columns:74px 24px 1fr;align-items:center;min-height:92px;text-align:left}.program-item time{font:italic 25px 'Cormorant Garamond',Georgia,serif}.program-item p{margin:0;font-size:13px}.program-dot{position:relative;display:block;width:9px;height:9px;border:1px solid var(--iv-accent);border-radius:50%}.program-dot::after{content:'';position:absolute;top:9px;left:3px;width:1px;height:83px;background:var(--iv-soft)}.program-item:last-child .program-dot::after{display:none}

.venue-section{padding-top:104px;background:var(--iv-bg)}.venue-section h2,.hosts-section h2{margin:12px 0 8px;font:italic 39px/1.05 'Cormorant Garamond',Georgia,serif}.venue-section>p:not(.invite-overline){max-width:290px;margin:0 auto;color:color-mix(in srgb,var(--iv-ink) 68%,transparent);font-size:13px}.venue-rings{display:block;position:relative;width:90px;height:58px;margin:0 auto 35px}.venue-rings::before,.venue-rings::after{content:'';position:absolute;width:52px;height:52px;border:1px solid var(--iv-accent);border-radius:50%}.venue-rings::before{left:5px}.venue-rings::after{right:5px}.round-map{display:flex;align-items:center;justify-content:center;width:126px;height:126px;margin:34px auto 0;border-radius:50%;background:var(--iv-ink);color:var(--iv-paper);font-size:11px;line-height:1.4}.round-map span{margin-left:5px}.round-map:hover{text-decoration:none;transform:rotate(-3deg)}.countdown-section{background:var(--iv-ink);color:var(--iv-paper)}.countdown-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.countdown-grid>div{aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;border:1px solid color-mix(in srgb,var(--iv-paper) 38%,transparent);border-radius:50%}.countdown-grid strong{font:normal 28px/1 'Cormorant Garamond',Georgia,serif}.countdown-grid span{margin-top:4px;font-size:7px;letter-spacing:.4px}.hosts-section{background:var(--iv-paper)}.joined-rings{display:block;position:relative;width:118px;height:70px;margin:0 auto 40px}.joined-rings i{position:absolute;width:66px;height:66px;border:1px solid var(--iv-accent);border-radius:50%;left:5px}.joined-rings i+ i{left:auto;right:5px}.rsvp-section{background:var(--iv-bg)}.rsvp-section>p:not(.invite-script){max-width:300px;margin:0 auto 25px;font-size:13px}.rsvp-preview,.invite-form{display:grid;gap:12px;margin-top:30px;text-align:left}.rsvp-preview span,.invite-form input,.invite-form select,.invite-form textarea{display:block;width:100%;min-height:51px;padding:15px 17px;border:1px solid var(--iv-soft);border-radius:0;background:transparent;color:var(--iv-ink);font:14px Manrope,Arial,sans-serif}.rsvp-preview span{color:color-mix(in srgb,var(--iv-ink) 56%,transparent)}.rsvp-preview button,.invite-form button{min-height:54px;border:0;background:var(--iv-ink);color:var(--iv-paper);font:600 12px Manrope,Arial,sans-serif;letter-spacing:1px;text-transform:uppercase}.rsvp-preview button{opacity:1}.rsvp-note{margin-top:18px!important;font-size:10px!important;line-height:1.6;color:color-mix(in srgb,var(--iv-ink) 55%,transparent)}.invite-form label{font-size:11px;font-weight:600;letter-spacing:.5px}.invite-form label input,.invite-form label select,.invite-form label textarea{margin-top:7px}.invite-form textarea{min-height:100px;resize:vertical}.invite-finale{min-height:450px;padding:90px 35px 45px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:var(--iv-paper);text-align:center}.finale-circle{width:250px;height:250px;padding:28px;border:1px solid var(--iv-accent);border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center}.finale-circle span{color:var(--iv-accent)}.finale-circle p{margin:16px 0 0;font:italic 30px/1.1 'Cormorant Garamond',Georgia,serif}.invite-finale small{font-size:8px;letter-spacing:3px;text-transform:uppercase}

/* Fixed invitation music control. It lives outside the animated invitation so it stays attached to the viewport. */
.music-orb{--music-bg:#fffaf0;--music-ink:#65482f;--music-accent:#b98950;--music-ring:#ead8bb;position:fixed;z-index:60;right:max(20px,calc(50% - 195px));bottom:max(22px,calc(env(safe-area-inset-bottom) + 14px));left:auto;display:grid;width:72px;height:72px;padding:0;place-items:center;border:1px solid var(--music-accent);border-radius:50%;background:var(--music-bg);box-shadow:0 10px 32px rgba(47,35,25,.26),inset 0 0 0 5px rgba(255,255,255,.56);color:var(--music-ink);cursor:pointer;isolation:isolate;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .2s ease,box-shadow .2s ease}.music-orb::before{content:'';position:absolute;z-index:-2;inset:-6px;border:1px solid var(--music-ring);border-radius:50%;background:color-mix(in srgb,var(--music-bg) 92%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--music-bg) 72%,transparent)}.music-orb::after{content:'';position:absolute;z-index:-1;inset:7px;border:1px solid color-mix(in srgb,var(--music-accent) 58%,transparent);border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.92),transparent 34%)}.music-orb:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(47,35,25,.31),inset 0 0 0 5px rgba(255,255,255,.62)}.music-orb:active{transform:scale(.96)}.music-orb:focus-visible{outline:3px solid color-mix(in srgb,var(--music-accent) 65%,white);outline-offset:7px}.music-ornament{position:absolute;z-index:0;inset:-1px;display:grid;place-items:center;border-radius:50%;color:var(--music-accent);font:18px/1 Georgia,serif;letter-spacing:24px;opacity:.7;pointer-events:none}.music-ornament::before{content:'✦   ✦';transform:rotate(-34deg)}.music-control-icon{position:relative;z-index:2;display:grid;width:28px;height:27px;margin-top:-8px;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--music-bg) 75%,white);box-shadow:0 2px 8px color-mix(in srgb,var(--music-ink) 16%,transparent)}.music-play-icon{width:0;height:0;margin-left:3px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid var(--music-ink)}.music-pause-icon{display:none;align-items:center;gap:4px}.music-pause-icon i{display:block;width:4px;height:14px;border-radius:3px;background:var(--music-ink)}.music-action{position:absolute;z-index:2;right:0;bottom:10px;left:0;font:700 7px/1 Manrope,Arial,sans-serif;letter-spacing:1.3px;text-align:center}.music-action-pause{display:none}.music-orb.is-playing .music-play-icon,.music-orb.is-playing .music-action-play{display:none}.music-orb.is-playing .music-pause-icon{display:flex}.music-orb.is-playing .music-action-pause{display:inline}.music-orb.is-playing::before{animation:music-ring-turn 7s linear infinite}.music-orb.is-playing .music-ornament{animation:music-ornament-pulse 1.4s ease-in-out infinite}

.music-theme-pearl{--music-bg:#f4fcfb;--music-ink:#45666b;--music-accent:#86aeb1;--music-ring:#c9e3e2}.music-theme-pearl .music-ornament::before{content:'✦   ·   ✦'}
.music-theme-royal,.music-theme-midnight{--music-bg:#fff4d9;--music-ink:#6a2430;--music-accent:#b98c45;--music-ring:#ead19a}.music-theme-royal::before,.music-theme-midnight::before{border-style:double;border-width:3px}.music-theme-royal .music-ornament::before,.music-theme-midnight .music-ornament::before{content:'◆   ◆';transform:rotate(45deg)}
.music-theme-botanical,.music-theme-sage{--music-bg:#f7faef;--music-ink:#466044;--music-accent:#7f9a71;--music-ring:#cadabd}.music-theme-botanical .music-ornament::before,.music-theme-sage .music-ornament::before{content:'❧   ❧';font-size:20px;transform:rotate(-42deg)}
.music-theme-silk{--music-bg:#f6fbfd;--music-ink:#4e6e7c;--music-accent:#8fafbc;--music-ring:#c7dce4}.music-theme-silk::before{border-style:dashed}.music-theme-silk .music-ornament::before{content:'∿   ∿';font-size:21px;transform:rotate(38deg)}
.music-theme-nomad,.music-theme-sand{--music-bg:#fff5df;--music-ink:#67482d;--music-accent:#b27d3e;--music-ring:#dec092}.music-theme-nomad::after,.music-theme-sand::after{border-style:double;border-width:3px}.music-theme-nomad .music-ornament::before,.music-theme-sand .music-ornament::before{content:'⌁   ◇   ⌁';font-size:15px;letter-spacing:5px;transform:rotate(-22deg)}
.music-theme-jubilee{--music-bg:#f2fbf8;--music-ink:#3d625a;--music-accent:#b18c4f;--music-ring:#bddbd3}.music-theme-jubilee .music-ornament::before{content:'✺   ✺';font-size:19px;transform:rotate(45deg)}
.music-theme-qyz,.music-theme-rose{--music-bg:#fff5f3;--music-ink:#78504d;--music-accent:#bd8b68;--music-ring:#ebcfc7}.music-theme-qyz .music-ornament::before,.music-theme-rose .music-ornament::before{content:'❀   ❀';font-size:19px;transform:rotate(-38deg)}
.music-theme-birthday{--music-bg:#f2fbff;--music-ink:#315f76;--music-accent:#df9946;--music-ring:#bcddeb}.music-theme-birthday .music-ornament::before{content:'✷   ✷';font-size:20px;transform:rotate(35deg)}

@keyframes music-ring-turn{to{transform:rotate(360deg)}}@keyframes music-ornament-pulse{50%{opacity:1;transform:scale(1.06)}}

.invite-name{display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;text-align:center}.invite-name span{display:block;max-width:100%}.invite-name-preview span{white-space:nowrap}.venue-location{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;width:min(336px,100%);margin:30px auto 0;padding:12px 14px;border:1px solid color-mix(in srgb,var(--iv-accent) 48%,white);border-radius:16px;background:color-mix(in srgb,var(--iv-paper) 88%,white);box-shadow:0 12px 28px color-mix(in srgb,var(--iv-ink) 12%,transparent);color:var(--iv-ink);text-align:left}.venue-location:hover{text-decoration:none;transform:translateY(-2px)}.two-gis-logo{display:grid;width:52px;height:52px;place-items:center;border-radius:13px;background:#28a745;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);color:#fff;font:800 14px/1 Manrope,Arial,sans-serif;letter-spacing:-.6px}.venue-location-copy{display:flex;min-width:0;flex-direction:column}.venue-location-copy small{margin-bottom:2px;color:color-mix(in srgb,var(--iv-ink) 58%,transparent);font-size:8px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase}.venue-location-copy strong{font-size:11px;line-height:1.35}.venue-location-copy>span{margin-top:4px;color:#238d3d;font-size:9px;font-weight:700}.venue-location-arrow{font-size:17px}

[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .85s ease,transform .85s ease}[data-reveal].is-visible{opacity:1;transform:none}.invite-cover [data-reveal]{transition-delay:.15s}.invite-theme-royal{--iv-bg:#181312;--iv-paper:#261b19;--iv-ink:#f4e4c9;--iv-accent:#c6a46a;--iv-soft:#6c5445}.invite-theme-royal .invite-cover-image{filter:saturate(.72) brightness(.62)}.invite-theme-royal .invite-cover-shade{background:linear-gradient(180deg,#1a0e1020 20%,#1d0f10ef 100%)}.invite-theme-royal .round-map,.invite-theme-royal .countdown-section{background:#9b2435}.invite-theme-botanical{--iv-bg:#f1ede1;--iv-paper:#fffef9;--iv-ink:#2e3529;--iv-accent:#72836a;--iv-soft:#c5cdbb}.invite-theme-botanical .invite-cover{min-height:680px;background:#f6f1e5}.invite-theme-botanical .invite-cover-image{opacity:.37;filter:sepia(.15) saturate(.55)}.invite-theme-botanical .invite-cover-shade{background:linear-gradient(180deg,#fffef366,#f7f3e6e8)}.invite-theme-botanical .invite-cover-copy{color:#344031}.invite-theme-botanical .invite-cover h1{font-size:61px}.invite-theme-botanical .invite-cover::before,.invite-theme-botanical .invite-cover::after{content:'❧';position:absolute;z-index:2;color:#66745d;font-size:85px;font-family:Georgia,serif;opacity:.45}.invite-theme-botanical .invite-cover::before{top:85px;left:-6px;transform:rotate(40deg)}.invite-theme-botanical .invite-cover::after{right:-6px;bottom:85px;transform:rotate(220deg)}.invite-theme-silk{--iv-bg:#f4ede2;--iv-paper:#fffaf2;--iv-ink:#4b3029;--iv-accent:#a95b43;--iv-soft:#dfcbbb}.invite-theme-silk .invite-cover-image{filter:saturate(.58) brightness(1.08)}.invite-theme-silk .invite-cover-shade{background:linear-gradient(180deg,#e8d8c544,#6d3e35b8)}.invite-theme-silk .date-section{background:radial-gradient(circle at 30% 20%,#fffaf5,#eadbca 72%)}.invite-theme-nomad{--iv-bg:#e9d4b7;--iv-paper:#f7eddd;--iv-ink:#4c3524;--iv-accent:#a46832;--iv-soft:#c9a77f}.invite-theme-nomad .invite-cover-image{filter:sepia(.32) saturate(.75)}.invite-theme-nomad .invite-cover-shade{background:linear-gradient(180deg,#56351b18,#412718d9)}.invite-theme-nomad .invite-section::before{content:'◇  ◇  ◇';display:block;margin-bottom:30px;color:var(--iv-accent);font-size:10px;letter-spacing:9px}.invite-theme-nomad .invite-intro{padding-top:70px}.invite-theme-jubilee{--iv-bg:#4e171d;--iv-paper:#fff7eb;--iv-ink:#4b1720;--iv-accent:#b98a55;--iv-soft:#d9c1a3}.invite-theme-jubilee .invite-cover-image{filter:saturate(.8)}.invite-theme-jubilee .invite-cover-shade{background:linear-gradient(180deg,#3d101235,#3a0b12e8)}.invite-theme-jubilee .countdown-section{background:#6f202d}.invite-theme-qyz{--iv-bg:#f4e4df;--iv-paper:#fffaf4;--iv-ink:#593d39;--iv-accent:#b98a5d;--iv-soft:#ddc2b7}.invite-theme-qyz .invite-cover-image{filter:saturate(.73) brightness(1.05)}.invite-theme-qyz .invite-cover-shade{background:linear-gradient(180deg,#fff1e922,#5b3934c7)}.invite-theme-qyz .invite-cover h1{font-size:70px}.invite-theme-qyz .date-orb::before{transform:translate(12px,-10px) rotate(12deg);border-style:dashed}

@media(max-width:600px){body.invitation-shell{background:var(--iv-bg,#e8e3dc)}.preview-toolbar{position:fixed;grid-template-columns:1fr auto;min-height:58px;width:100%;padding:8px 10px;gap:8px}.preview-template{display:none}.preview-back{font-size:11px;white-space:nowrap}.preview-back span{width:29px;height:29px;margin-right:4px}.preview-choose{position:static;padding:10px 12px;font-size:10px;white-space:nowrap}.invite-mobile{margin:0 auto;box-shadow:none}.preview-toolbar+.invite-mobile{margin-top:58px}.invite-cover{min-height:calc(100svh - 58px)}.music-orb{right:max(16px,env(safe-area-inset-right));bottom:max(18px,calc(env(safe-area-inset-bottom) + 14px));left:auto;width:68px;height:68px}.music-action{bottom:9px}.invite-theme-botanical .invite-cover{min-height:calc(100svh - 58px)}}@media(max-width:360px){.preview-back{font-size:0}.preview-back span{margin-right:0}.preview-choose{font-size:9px}}@media(min-width:601px){.invitation-shell .notice{width:min(430px,100%);margin:15px auto}}@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}.music-orb.is-playing::before,.music-orb.is-playing .music-ornament{animation:none}}

/* Светлая казахская этно-коллекция */
.invite-cover-copy{color:var(--iv-ink);text-shadow:0 1px 0 #fff,0 2px 16px rgba(255,255,255,.95)}.invite-cover h1{font-weight:500}.invite-cover-shade,.invite-theme-royal .invite-cover-shade,.invite-theme-silk .invite-cover-shade,.invite-theme-nomad .invite-cover-shade,.invite-theme-jubilee .invite-cover-shade,.invite-theme-qyz .invite-cover-shade{background:linear-gradient(180deg,rgba(255,255,255,.01) 30%,rgba(255,252,245,.94) 100%)}.invite-cover-image,.invite-theme-royal .invite-cover-image,.invite-theme-botanical .invite-cover-image,.invite-theme-silk .invite-cover-image,.invite-theme-nomad .invite-cover-image,.invite-theme-jubilee .invite-cover-image,.invite-theme-qyz .invite-cover-image{opacity:1;filter:saturate(.94) brightness(1.04)}.countdown-section,.invite-theme-royal .countdown-section,.invite-theme-jubilee .countdown-section{background:#e7d7b9;color:#493d31}.countdown-grid>div{border-color:rgba(73,61,49,.38)}.round-map,.invite-theme-royal .round-map{background:#b08a50;color:#fff}.invite-theme-royal{--iv-bg:#f4eadb;--iv-paper:#fffdf8;--iv-ink:#4b3d2e;--iv-accent:#b78d50;--iv-soft:#dac8aa}.invite-theme-botanical{--iv-bg:#eff3e8;--iv-paper:#fffefa;--iv-ink:#394533;--iv-accent:#80966f;--iv-soft:#cbd8c0}.invite-theme-silk{--iv-bg:#f5eee3;--iv-paper:#fffdf8;--iv-ink:#51463b;--iv-accent:#91a9b4;--iv-soft:#d9d2c5}.invite-theme-nomad{--iv-bg:#eef5f7;--iv-paper:#fffdf7;--iv-ink:#40505a;--iv-accent:#ad8651;--iv-soft:#c9dce3}.invite-theme-jubilee{--iv-bg:#eaf5f3;--iv-paper:#fffdf8;--iv-ink:#3f5753;--iv-accent:#ae8750;--iv-soft:#c8ddd8}.invite-theme-qyz{--iv-bg:#edf7f5;--iv-paper:#fffdf8;--iv-ink:#405954;--iv-accent:#af8952;--iv-soft:#c8ded8}

/* Layered Kazakh ornament and tactile controls for the fixed music button. */
.music-orb {
    width: 78px;
    height: 78px;
    border: 0;
    background:
        radial-gradient(circle at 31% 22%, rgba(255,255,255,.98) 0 8%, transparent 25%),
        radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--music-bg) 84%, white), var(--music-bg) 70%);
    box-shadow:
        0 18px 36px color-mix(in srgb, var(--music-ink) 28%, transparent),
        0 5px 12px rgba(32, 27, 22, .18),
        inset 0 0 0 1px color-mix(in srgb, var(--music-accent) 78%, white),
        inset 0 0 0 7px rgba(255,255,255,.52),
        inset 0 -8px 13px color-mix(in srgb, var(--music-accent) 18%, transparent);
}

.music-orb::before {
    inset: -9px;
    border: 1px solid color-mix(in srgb, var(--music-ring) 78%, var(--music-accent));
    background: color-mix(in srgb, var(--music-bg) 88%, transparent);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--music-bg) 74%, transparent),
        0 0 0 5px color-mix(in srgb, var(--music-accent) 24%, transparent);
}

.music-orb::after {
    inset: 8px;
    border: 1px solid color-mix(in srgb, var(--music-accent) 42%, white);
    background: radial-gradient(circle at 33% 24%, rgba(255,255,255,.88), transparent 34%);
    box-shadow: inset 0 0 13px color-mix(in srgb, var(--music-accent) 12%, transparent);
}

.music-orb:hover {
    transform: translateY(-3px);
    box-shadow:
        0 22px 42px color-mix(in srgb, var(--music-ink) 32%, transparent),
        0 7px 15px rgba(32, 27, 22, .2),
        inset 0 0 0 1px color-mix(in srgb, var(--music-accent) 82%, white),
        inset 0 0 0 7px rgba(255,255,255,.58),
        inset 0 -8px 13px color-mix(in srgb, var(--music-accent) 20%, transparent);
}

.music-orb:active {
    transform: translateY(1px) scale(.97);
}

.music-orb.has-error {
    animation: music-error-shake .28s ease-in-out 2;
}

.music-ornament {
    z-index: 1;
    inset: -5px;
    border: 1px dashed color-mix(in srgb, var(--music-accent) 72%, transparent);
    opacity: .75;
}

.music-orb .music-ornament::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid color-mix(in srgb, var(--music-ring) 74%, transparent);
    border-radius: 50%;
    transform: none;
}

.music-ethno-ring {
    position: absolute;
    z-index: 3;
    inset: -12px;
    border-radius: 50%;
    pointer-events: none;
}

.music-ethno-ring > i {
    --ring-step: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px;
    border: 1.5px solid var(--music-accent);
    background: var(--music-bg);
    box-shadow: 0 2px 4px color-mix(in srgb, var(--music-ink) 18%, transparent);
    transform: rotate(calc(var(--ring-step) * 45deg)) translateY(-50px) rotate(45deg);
}

.music-ethno-ring > i:nth-child(2) { --ring-step: 1; }
.music-ethno-ring > i:nth-child(3) { --ring-step: 2; }
.music-ethno-ring > i:nth-child(4) { --ring-step: 3; }
.music-ethno-ring > i:nth-child(5) { --ring-step: 4; }
.music-ethno-ring > i:nth-child(6) { --ring-step: 5; }
.music-ethno-ring > i:nth-child(7) { --ring-step: 6; }
.music-ethno-ring > i:nth-child(8) { --ring-step: 7; }

.music-control-icon {
    z-index: 4;
    width: 44px;
    height: 44px;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--music-accent) 72%, white);
    background: linear-gradient(145deg, color-mix(in srgb, var(--music-accent) 54%, white), var(--music-accent));
    box-shadow:
        0 8px 14px color-mix(in srgb, var(--music-ink) 27%, transparent),
        inset 0 2px 2px rgba(255,255,255,.78),
        inset 0 -4px 7px color-mix(in srgb, var(--music-ink) 20%, transparent);
    transition: transform .18s ease, box-shadow .18s ease;
}

.music-orb:hover .music-control-icon {
    transform: translateY(-1px);
    box-shadow:
        0 10px 17px color-mix(in srgb, var(--music-ink) 31%, transparent),
        inset 0 2px 2px rgba(255,255,255,.82),
        inset 0 -4px 7px color-mix(in srgb, var(--music-ink) 22%, transparent);
}

.music-orb:active .music-control-icon {
    transform: translateY(2px);
    box-shadow:
        0 3px 7px color-mix(in srgb, var(--music-ink) 24%, transparent),
        inset 0 2px 5px color-mix(in srgb, var(--music-ink) 16%, transparent);
}

.music-play-icon {
    margin-left: 4px;
    border-top-width: 8px;
    border-bottom-width: 8px;
    border-left: 13px solid #fff;
    filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--music-ink) 32%, transparent));
}

.music-pause-icon {
    gap: 5px;
}

.music-pause-icon i {
    width: 5px;
    height: 17px;
    background: #fff;
    box-shadow: 0 1px 1px color-mix(in srgb, var(--music-ink) 28%, transparent);
}

.music-action {
    display: none !important;
}

.music-theme-royal .music-ethno-ring > i,
.music-theme-midnight .music-ethno-ring > i {
    border-radius: 2px;
    background: var(--music-accent);
}

.music-theme-botanical .music-ethno-ring > i,
.music-theme-sage .music-ethno-ring > i {
    width: 7px;
    height: 11px;
    border-radius: 8px 0 8px 0;
}

.music-theme-silk .music-ethno-ring > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.music-theme-nomad .music-ethno-ring > i,
.music-theme-sand .music-ethno-ring > i {
    border: 0;
    background: var(--music-accent);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    box-shadow: 0 0 0 2px var(--music-bg), 0 0 0 3px var(--music-accent);
}

.music-theme-jubilee .music-ethno-ring > i {
    width: 9px;
    height: 9px;
    border-radius: 50% 0;
}

.music-theme-qyz .music-ethno-ring > i,
.music-theme-rose .music-ethno-ring > i {
    width: 9px;
    height: 9px;
    border-radius: 70% 0 70% 0;
    background: color-mix(in srgb, var(--music-bg) 72%, white);
}

.music-theme-birthday .music-ethno-ring > i {
    border-radius: 50%;
    background: var(--music-accent);
}

.music-orb.is-playing .music-ethno-ring {
    animation: music-ethno-turn 12s linear infinite;
}

@keyframes music-ethno-turn {
    to { transform: rotate(360deg); }
}

@keyframes music-error-shake {
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

@media(max-width:600px) {
    .music-orb {
        right: max(22px, env(safe-area-inset-right));
        width: 74px;
        height: 74px;
    }

    .music-ethno-ring > i {
        transform: rotate(calc(var(--ring-step) * 45deg)) translateY(-48px) rotate(45deg);
    }
}

@media(prefers-reduced-motion:reduce) {
    .music-orb.is-playing .music-ethno-ring {
        animation: none;
    }
}