/* Shared brass material for controls. Transparent text-drag handles are part of the artboard. */
:root{
 --button-brass:linear-gradient(110deg,#fff3cf66 0%,#fff3cf00 38%,#765b2c12 72%,#fff4d52b 100%),linear-gradient(180deg,#f6e8bc 0%,#e3cd94 15%,#d7bd80 53%,#c5a467 100%);
 --button-brass-hover:linear-gradient(110deg,#fff7dd80,#fff6db00 45%,#fff3cd30),linear-gradient(180deg,#fff0c6,#ead49e 22%,#dec48c 60%,#d0b074);
 --button-brass-down:linear-gradient(180deg,#baa06a 0%,#d3b67a 32%,#e2c990 100%);
 --button-brass-edge:#a18146;
 --button-brass-foot:#806438;
 --button-brass-ink:#2d3528;
}
/* Important here is deliberate: legacy component themes set their own button colors. */
#top :where(button:not(.studio-box-handle),a[role="button"],a.download-again,#demo-download,#gift-reveal a){
 background:var(--button-brass)!important;
 color:var(--button-brass-ink)!important;
 border:1px solid var(--button-brass-edge)!important;
 border-top-color:#cfb778!important;
 border-radius:6px!important;
 box-shadow:inset 0 1px 0 #fff8df,inset 1px 0 0 #fff2c44d,inset -1px 0 0 #82673724,0 3px 0 var(--button-brass-foot),0 5px 9px #2732261c!important;
 text-shadow:0 1px 0 #fff5d64d;
 translate:0 0;
 transition:translate .14s ease-out,box-shadow .14s ease-out,background .14s ease-out!important;
 -webkit-tap-highlight-color:transparent;
}
body button :is(strong,small){color:inherit!important}
#top :where(button:not(.studio-box-handle),a[role="button"],a.download-again,#demo-download,#gift-reveal a):not(:disabled):not([aria-disabled="true"]):hover{
 background:var(--button-brass-hover)!important;
 border-color:#9e7e40!important;
}
#top :is(button[aria-pressed="true"],button[aria-selected="true"],button.selected,button[aria-expanded="true"]):not(.studio-box-handle){
 background:var(--button-brass-down)!important;
 border-color:#8b6d3b!important;
 box-shadow:inset 0 2px 4px #79592345,inset 0 -1px 0 #fff0c799,0 1px 0 #806438!important;
 text-shadow:none;
}
#top :where(button:not(.studio-box-handle),a[role="button"],a.download-again,#demo-download,#gift-reveal a):not(:disabled):not([aria-disabled="true"]):active{
 background:var(--button-brass-down)!important;
 border-color:#8b6d3b!important;
 box-shadow:inset 0 3px 6px #71532559,inset 0 -1px 0 #fff0c799,0 0 0 #806438!important;
 translate:0 3px;
 transition-duration:0s!important;
 text-shadow:none;
}
#top :where(button:not(.studio-box-handle),a[role="button"],a.download-again,#demo-download,#gift-reveal a):focus-visible{
 outline:2px solid #294b37!important;outline-offset:5px!important;
}
#top .site-header button:focus-visible{outline-color:#fff2c9!important}
#top :is(button:disabled,button[aria-disabled="true"],a[aria-disabled="true"]):not(.studio-box-handle){
 background:linear-gradient(180deg,#e6e0ce,#dcd3bb)!important;
 border-color:#c8bda4!important;color:#6d6b5d!important;
 box-shadow:inset 0 1px 0 #faf6e7,0 1px 0 #b9ad91!important;
 opacity:.65!important;translate:0 0;text-shadow:none;cursor:default;
}
/* Keep neighboring halves of the Music control joined. */
body .music-control-group #music-quick-toggle,body .music-control-group #demo-music-toggle{border-radius:6px 0 0 6px!important;border-right-width:0!important}
body .music-control-group .music-volume-open{border-radius:0 6px 6px 0!important}
/* Former text links need a little space around their new brass face. */
 #top button.text-button{padding-inline:12px}
 .pack-photo-outputs button :is(strong,small){margin-inline:10px}
 .pack-photo-outputs button small{margin-bottom:10px}
body :is(a.download-again,#gift-reveal a){padding:8px 13px;text-decoration:none}
body footer .install-entry{padding:8px 13px;text-decoration:none}
body #gift-reveal a{margin-top:6px}
body #music-volume-close{margin-right:-4px}
body .pack-stage .unwrap-pack{overflow:visible}
@media(max-width:430px){.pack-photo-outputs button :is(strong,small){margin-inline:6px}}
@media(prefers-reduced-motion:reduce){
 #top :where(button:not(.studio-box-handle),a[role="button"],a.download-again,#demo-download,#gift-reveal a){transition:none!important;translate:none!important}
}
@media(forced-colors:active){
 #top :where(button:not(.studio-box-handle),a[role="button"],a.download-again,#demo-download,#gift-reveal a){background:ButtonFace!important;color:ButtonText!important;border:1px solid ButtonText!important;box-shadow:none!important;text-shadow:none}
 #top :is(button[aria-pressed="true"],button[aria-selected="true"],button.selected):not(.studio-box-handle){border:2px solid Highlight!important}
}