@font-face{font-family:"Elegant Palladio";src:url("assets/elegant-palladio.otf") format("opentype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Great Vibes";src:url("assets/great-vibes.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
.example[data-example="elegant"],#example-dialog[data-example="elegant"]{font-family:"Elegant Palladio","Palatino Linotype",Palatino,serif;color:#f3d279}
.elegant .mini-body strong{font-family:"Great Vibes",cursive;font-weight:400;font-size:clamp(34px,3.2vw,42px);line-height:1.4;letter-spacing:0;padding:5px 8px;margin-inline:-8px;font-synthesis:none}
.example[data-example="elegant"] .example-label strong{font-family:"Great Vibes",cursive;font-weight:400;font-size:28px;line-height:1.4;letter-spacing:0;padding-inline:4px;font-synthesis:none}
#example-dialog[data-example="elegant"] h2{font-family:"Great Vibes",cursive;font-weight:400;font-size:clamp(38px,7vw,54px);line-height:1.4;letter-spacing:0;padding:5px 8px;font-synthesis:none}
.elegant .mini-nav,.elegant .mini-button,#example-dialog[data-example="elegant"] .button{background-color:transparent}
.elegant .mini-nav span,.example[data-example="elegant"] .view-pill{background-color:#000}
.elegant .mini-nav,.elegant .mini-nav span,.elegant .mini-body>strong,.elegant .mini-body>span,.example[data-example="elegant"] .example-label strong,.example[data-example="elegant"] .example-label small,.example[data-example="elegant"] .view-pill,#example-dialog[data-example="elegant"] h2,#example-dialog[data-example="elegant"] p,#example-dialog[data-example="elegant"] li,#example-dialog[data-example="elegant"] .button,#example-dialog[data-example="elegant"] .close-dialog{color:#f3d279}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
.elegant .mini-nav,.elegant .mini-nav span,.elegant .mini-body>strong,.elegant .mini-body>span,.example[data-example="elegant"] .example-label strong,.example[data-example="elegant"] .example-label small,.example[data-example="elegant"] .view-pill,#example-dialog[data-example="elegant"] h2,#example-dialog[data-example="elegant"] p,#example-dialog[data-example="elegant"] li,#example-dialog[data-example="elegant"] .button,#example-dialog[data-example="elegant"] .close-dialog{background-image:linear-gradient(110deg,#bc8d30 0%,#eac464 18%,#fff2bc 26%,#d7a745 34%,#f4d889 48%,#fff8df 53%,#dfb451 59%,#b98c30 72%,#f4d887 86%,#bc8d30 100%);background-size:240% 100%;background-position:32% 50%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:elegant-gold-reflection 8s ease-in-out infinite}
}
.elegant .mini-button,.example[data-example="elegant"] .view-pill{border-color:#d6ad51}
.elegant .mini-lines i{background:linear-gradient(100deg,#b78a2f,#fff0ad,#d1a345);opacity:.8}
@keyframes elegant-gold-reflection{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media(max-width:760px){.elegant .mini-body strong{font-size:clamp(34px,9vw,42px)}}
@media(prefers-reduced-motion:reduce){.example[data-example="elegant"] *,#example-dialog[data-example="elegant"] *{animation:none!important}}
@media(forced-colors:active){.example[data-example="elegant"] *,#example-dialog[data-example="elegant"] *{background-image:none!important;-webkit-text-fill-color:currentColor!important;color:ButtonText!important}}

/* Use the preview calligraphy throughout the elegant Discover dialog. */
@font-face{font-family:"Elegant Chancery";src:url("assets/elegant-chancery.otf") format("opentype");font-style:normal;font-weight:400;font-display:swap}
#example-dialog[data-example="elegant"] p:not(.eyebrow),#example-dialog[data-example="elegant"] li,#example-dialog[data-example="elegant"] .button{font-family:"Great Vibes",cursive;font-weight:400;font-style:normal;font-synthesis:none;letter-spacing:.01em;font-size:1.75rem;line-height:1.6}
#example-dialog[data-example="elegant"] li{padding-block:.2rem}
#example-dialog[data-example="elegant"] .dialog-note{font-size:1.25rem;line-height:1.5}
#example-dialog[data-example="elegant"] .eyebrow{font-family:"Great Vibes",cursive;font-size:1.125rem;font-weight:400;line-height:1.5;letter-spacing:.02em;padding-right:2rem}
#example-dialog[data-example="elegant"] .button{white-space:normal;padding:12px 25px}