/* A sealed secret. Shared by the design preview and the existing PHP app. */
:is(#name-warning-dialog,#family-name-dialog).secret-popup{
 width:min(510px,calc(100vw - 32px));max-width:510px;box-sizing:border-box;
 padding:32px 42px 26px;text-align:center;color:#f5e8d2;
 border:1px solid #c99a625e;border-radius:8px;
 background:radial-gradient(ellipse at 50% 18%,#a24d5d40,transparent 52%),linear-gradient(150deg,#61283e,#381425 75%);
 box-shadow:0 35px 110px #12060dd9,0 0 65px #b16b3c18,inset 0 1px #ffe2ac21;
 max-height:calc(100dvh - 32px);overflow:auto;isolation:isolate;
 animation:secret-arrive .65s cubic-bezier(.16,1,.3,1) both;
}
.secret-popup:before{content:'';position:absolute;inset:9px;border:1px solid #d3ac7240;border-radius:3px;pointer-events:none;z-index:-1}
.secret-popup .secret-close{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:34px;height:34px;margin:0;padding:0;border:1px solid #d3ac7230;border-radius:50%;background:#2a112442;color:#dcc39f;font:23px/1 Georgia;transition:background .2s,rotate .3s;cursor:pointer;z-index:2}
.secret-popup .secret-close:hover{background:#8d4256;rotate:90deg}
.secret-popup .secret-emblem{position:relative;display:grid;place-items:center;width:150px;height:120px;margin:0 auto 12px;pointer-events:none}
.secret-emblem:before{content:'';position:absolute;width:130px;height:130px;background:radial-gradient(circle,#e6b76324,transparent 68%);animation:secret-breathe 4.8s ease-in-out infinite}
.secret-emblem .secret-orbit{position:absolute;width:116px;height:86px;border:1px solid #dab77c35;border-radius:50%;rotate:-25deg;animation:secret-orbit 12s linear infinite}
.secret-emblem .secret-orbit.second{width:100px;height:112px;rotate:24deg;animation-direction:reverse;animation-duration:17s;border-color:#dab77c21}
.secret-emblem .secret-seal{position:relative;display:grid;place-items:center;width:68px;height:68px;border:1px solid #d7b17b9c;border-radius:50%;background:radial-gradient(circle at 35% 20%,#9e5265,#64243f 70%);box-shadow:0 12px 25px #16081366,inset 0 0 0 5px #562039,inset 0 0 0 6px #d6aa6d3d;animation:secret-float 4.8s ease-in-out infinite}
.secret-seal svg{width:30px;height:34px;fill:none;stroke:#efcc91;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.secret-emblem .secret-spark{position:absolute;width:3px;height:3px;border-radius:50%;background:#f0c889;box-shadow:0 0 8px #f0c889;animation:secret-drift 4.6s ease-in-out infinite}
.secret-spark:nth-of-type(1){left:14px;top:35px;animation-delay:-1s}.secret-spark:nth-of-type(2){right:15px;top:65px;animation-delay:-3s}.secret-spark:nth-of-type(3){left:40px;bottom:13px;animation-delay:-2s}.secret-spark:nth-of-type(4){right:35px;top:13px;animation-delay:-.3s}
.secret-popup .secret-eyebrow{font-size:9px;letter-spacing:2.5px;color:#d7b27f;margin:0 0 17px;line-height:1.6;animation:secret-copy .6s .12s both}
:is(#name-warning-dialog,#family-name-dialog).secret-popup h2{margin:0;font-size:43px;font-weight:400;line-height:1.06;letter-spacing:-.6px;color:#f7ecd9;animation:secret-copy .65s .18s both}
.secret-popup h2 em{display:block;color:#e6c28f;font-weight:400}
:is(#name-warning-dialog,#family-name-dialog).secret-popup .secret-description{margin:20px auto 23px;max-width:350px;font-size:13px;line-height:1.85;color:#dfc6c6;animation:secret-copy .65s .25s both}
.secret-popup .secret-actions{display:grid;gap:9px;animation:secret-copy .65s .32s both}
:is(#name-warning-dialog,#family-name-dialog) .secret-delete{position:relative;display:block;width:100%;padding:15px 20px;margin:0;border:1px solid #f0d4a1;border-radius:3px;background:linear-gradient(110deg,#eed8b1,#d6b27e);color:#512235;font:inherit;font-size:12px;font-weight:600;cursor:pointer;overflow:hidden;transition:translate .25s,box-shadow .25s}
.secret-delete:after{content:'';position:absolute;inset:-100% -50%;background:linear-gradient(110deg,transparent 42%,#fff5dc55 50%,transparent 58%);translate:-65% 0;animation:secret-sheen 8s 1s ease-in-out infinite;pointer-events:none}
.secret-popup .secret-delete:hover{translate:0 -2px;box-shadow:0 8px 25px #d5a36530}
:is(#name-warning-dialog,#family-name-dialog) .secret-edit{display:block;width:100%;margin:0;padding:11px 15px;border:1px solid #d8b78938;border-radius:3px;background:transparent;color:#ead3b2;font:inherit;font-size:12px;cursor:pointer;transition:background .25s,border-color .25s}
.secret-popup .secret-edit:hover{background:#ba7e6620;border-color:#d8b78980}
.secret-popup button:focus-visible{outline:2px solid #f6dcaa;outline-offset:4px}
.secret-popup .secret-footnote{display:block;margin:20px 0 0;color:#bfa1aa;font-size:10px;letter-spacing:.2px;animation:secret-copy .65s .4s both}
@keyframes secret-arrive{from{opacity:0;translate:0 28px;scale:.94;filter:blur(4px)}to{opacity:1;translate:0 0;scale:1;filter:blur(0)}}
@keyframes secret-copy{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes secret-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(3deg)}}
@keyframes secret-breathe{0%,100%{opacity:.5;scale:.9}50%{opacity:1;scale:1.2}}
@keyframes secret-orbit{to{transform:rotate(360deg)}}
@keyframes secret-drift{0%,100%{opacity:.2;translate:0 3px;scale:.7}50%{opacity:.85;translate:2px -9px;scale:1}}
@keyframes secret-sheen{0%,70%,100%{translate:-65% 0}90%{translate:65% 0}}
@media(max-width:540px){:is(#name-warning-dialog,#family-name-dialog).secret-popup{padding:26px 25px 23px}:is(#name-warning-dialog,#family-name-dialog).secret-popup h2{font-size:37px}.secret-popup .secret-emblem{height:108px;margin-bottom:9px}.secret-popup .secret-eyebrow{font-size:8px;letter-spacing:2px}:is(#name-warning-dialog,#family-name-dialog).secret-popup .secret-description{font-size:12px;margin:18px auto 20px}}
@media(prefers-reduced-motion:reduce){:is(#name-warning-dialog,#family-name-dialog).secret-popup,.secret-popup *,.secret-popup :before,.secret-popup :after{animation:none!important;transition:none!important}}

:is(#name-warning-dialog,#family-name-dialog).secret-popup{background:radial-gradient(ellipse at 50% 18%,#da9b4c26,transparent 52%),linear-gradient(150deg,#8b0000,#5b0202 75%);box-shadow:0 35px 110px #200e0180,0 0 65px #b16b3c18,inset 0 1px #ede7c721}.secret-popup .secret-close{background:#5b020266}.secret-popup .secret-close:hover{background:#a52b1b}