/* Approved finishing pass: keep the original spell effects intact. */
.ornate{min-height:122px;padding-top:30px;padding-bottom:36px}
.controls{top:min(69%,calc(100% - 290px))}
.nav-button{border:0;outline:none;background:transparent url('assets/nav-button.png') center/100% 100% no-repeat;box-shadow:none;min-height:60px;padding:17px 17px;filter:drop-shadow(0 4px 5px #0009);transition:filter .2s,transform .15s}
.nav-button:before,.nav-button:after{display:none}
.nav-button:not(:disabled):not([aria-disabled=true]):hover{filter:brightness(1.22) drop-shadow(0 0 12px #b9f98826)}
.nav-button:not(:disabled):not([aria-disabled=true]):active{transform:scale(.985)}
.nav-button:focus-visible{outline:2px solid #d7c59c;outline-offset:3px}
#reveal{transition:opacity 1s,transform 1.2s cubic-bezier(.22,.68,.2,1)}
#scene[data-state=ethereum] #reveal{transform:translateX(-24%)}
#story{position:absolute;z-index:4;left:52%;top:29%;width:min(42%,590px);padding:25px 27px 24px;border:18px solid transparent;border-image:url('assets/nav-button.png') 25% 8% fill / 18px / 0 stretch;color:#ded2b8;filter:drop-shadow(0 10px 24px #0008);animation:story-enter .85s .5s both;}
#story[hidden]{display:none}
#story h2{font-family:'Cinzel',Georgia,serif;font-size:clamp(22px,2.15vw,32px);font-weight:500;line-height:1.25;margin:0 0 19px;color:#ead8af}
#story p{font-size:clamp(16px,1.2vw,18px);line-height:1.55;margin:0 0 16px}
#story blockquote{font-size:clamp(17px,1.35vw,20px);line-height:1.5;margin:0 0 17px;padding:0 0 0 15px;border-left:1px solid #9a8052;color:#c6b0ed;font-style:italic}
#story>a{display:inline-block;font-size:14px;color:#c9b68b;text-underline-offset:4px;line-height:1.5}
#story>a:hover{color:#fff1c8}
#scene[data-state=ethereum] .controls{left:28%;top:79%;width:40%}
@keyframes story-enter{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
@media(min-aspect-ratio:2/1){.ornate{min-height:102px;padding-top:25px;padding-bottom:31px}#story{top:25%;padding:15px 20px}#story h2{font-size:23px;margin-bottom:12px}#story p{font-size:16px;margin-bottom:10px}#story blockquote{font-size:17px;margin-bottom:12px}}
@media(max-width:1000px) and (min-width:701px){#story{left:49%;width:47%;padding:20px 17px;top:27%}#story h2{font-size:22px}#story p{font-size:16px}#story blockquote{font-size:17px}footer{width:87vw}.nav-button{padding-inline:12px;font-size:12px}.nav-button>span:first-child{display:none}}
@media(max-width:700px){.ornate{min-height:113px;padding-top:28px;padding-bottom:34px}.nav-button{min-height:52px;padding:12px 9px;font-size:12px}footer{bottom:25px}nav{gap:7px}#scene[data-state=ethereum]{height:auto;min-height:max(1090px,100svh)}#scene[data-state=ethereum] #reveal{transform:none;height:560px;inset:0 0 auto}#scene[data-state=ethereum] .vitalik{top:22%;height:65%;width:120%;left:-10%}#scene[data-state=ethereum] .computer-glow{top:34%;height:28%}#scene[data-state=ethereum] .ethereum{top:30%}#story{top:auto;left:5%;width:90%;max-width:none;padding:22px 18px 23px;position:relative;margin-top:330px;margin-bottom:230px;animation-name:story-enter-mobile}#story h2{font-size:23px;margin-bottom:15px}#story p{font-size:16px;line-height:1.5}#story blockquote{font-size:18px}#scene[data-state=ethereum] .controls{top:auto;bottom:155px;left:50%;width:80%}#scene[data-state=ethereum] header{padding-top:50px}#scene[data-state=ethereum] footer{bottom:25px}}
@keyframes story-enter-mobile{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.controls{top:min(61%,calc(100% - 310px))}}
@media(prefers-reduced-motion:reduce){#story{animation:none}#reveal{transition:none}}