:root{--bg:#000}
body,.hero,.stage,.sound,.story{background-color:#000}
/* The bright contact line in the scene is at 653/948 of its height.
   The original PNG's opaque bottom is at 1006/1024 of its square. */
.emblem{top:20.75%;height:49%;filter:drop-shadow(8px 5px 5px #000c)}
.depth-stack{position:absolute;inset:0;z-index:0;pointer-events:none}
.depth-slice{position:absolute;inset:0;mask:var(--mark) center/contain no-repeat;-webkit-mask:var(--mark) center/contain no-repeat;background:linear-gradient(130deg,#34372b,#12140e 35%,#050604 85%);transform:translate(calc(var(--depth)*1px),calc(var(--depth)*-.3px))}
.rim{z-index:1}.mark.face{z-index:2}.stone-render{z-index:3}
.emblem::after{top:97.8%;left:2%;right:-5%;height:3%;background:#000;filter:blur(3px);z-index:0}
.reflection{top:98.2%;height:25%;opacity:.22;z-index:0;filter:blur(2px)}
.signature{top:73%;width:48%}
.hero-actions{top:88.5%}
.ambient{mask-image:linear-gradient(to bottom,#000 0%,#000 72%,#000c 83%,#0005 93%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 72%,#000c 83%,#0005 93%,transparent 100%)}
.sound{border:0}
.sound:after{background:linear-gradient(90deg,#0008,transparent 68%),linear-gradient(to bottom,#000 0%,transparent 22%,transparent 78%,#000 100%)}
.sound canvas{mask-image:linear-gradient(transparent,#000 22%,#000 76%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 76%,transparent)}
.story{border-top:0}
.story:before{mask-image:linear-gradient(transparent,#000 28%,#000 70%,transparent)}
.story:after{display:none}
@media(max-width:740px){.emblem{top:auto;bottom:30.4%;width:66vw;height:auto;max-width:350px}.signature{top:74%;width:86%}.hero-actions{top:88%}.depth-slice{transform:translate(calc(var(--depth)*.65px),calc(var(--depth)*-.2px))}}