/* Prism reader: a luminous physical frame with the artwork at its centre. */
#reader.active{
  isolation:isolate;
  background:radial-gradient(ellipse at 50% 8%,#25375980,transparent 48%),radial-gradient(ellipse at 50% 85%,#4c258e4d,transparent 50%),linear-gradient(135deg,#02040b,#0a101e 50%,#020309)!important;
}
#reader.active .reader-console,#reader.active.focus-reader .reader-console,
#reader.active .console-screen,#reader.active.focus-reader .console-screen,
#reader.active .stage,#reader.active.focus-reader .stage{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
#reader.active .stage,#reader.active.focus-reader .stage{padding:132px 42px 42px!important;min-height:100dvh!important}
.hx-prism-ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hx-prism-ambient:before{content:"";position:absolute;left:50%;top:42%;width:110vmin;height:110vmin;border:1px solid #9bd5ff21;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 48px #87ceff03,0 0 0 49px #99c9ff0b,0 0 0 120px #9a83ff02,0 0 0 121px #9a83ff09}
.hx-prism-ambient:after{content:"";position:absolute;left:6%;right:6%;bottom:2%;height:14%;border-radius:50%;border-top:1px solid #bda9ff55;background:radial-gradient(ellipse at center,#9882f929,transparent 65%);box-shadow:0 -14px 80px #7760ec24;transform:perspective(600px) rotateX(64deg)}
.hx-prism-ambient i{position:absolute;top:14%;bottom:15%;width:1px;background:linear-gradient(transparent,#9dbfff55,transparent);box-shadow:0 0 24px #899eff40}
.hx-prism-ambient i:nth-child(1){left:9%}.hx-prism-ambient i:nth-child(2){right:9%}.hx-prism-ambient i:nth-child(3){left:50%;opacity:.3}
.hx-prism{
  position:relative;isolation:isolate;flex:none;width:min(100%,650px);padding:12px 12px 0;box-sizing:border-box;
  border:1px solid #b7cef28c;border-radius:22px 22px 30px 30px;
  background:linear-gradient(125deg,#778aa43d 0%,#111726 3%,#02040d 20%,#33426466 49%,#11121f 60%,#050812 96%,#96bed63d);
  box-shadow:0 0 0 3px #04050b,0 0 0 4px #9cbce033,0 0 0 7px #04060b,0 0 0 8px #8b91c01f,0 34px 80px #000c,-14px 0 48px #578fe52b,14px 0 48px #8a59e633,inset 0 1px 3px #e9f6ff66,inset 0 -2px 5px #a69eff44;
}
.hx-prism:before,.hx-prism:after{content:"";position:absolute;z-index:-1;pointer-events:none;top:38px;bottom:65px;width:3px;border-radius:3px;background:linear-gradient(transparent 0%,#6ec6fb44 22%,#ddfaff 40%,#82bfff 47%,#a790ff 56%,#8a60f455 77%,transparent);box-shadow:0 0 10px #9ab8ff,0 0 24px #8065fc80}
.hx-prism:before{left:-8px}.hx-prism:after{right:-8px;transform:scaleY(-1)}
.hx-prism-crown{position:absolute;left:50%;top:-87px;width:min(82%,440px);height:86px;display:flex;align-items:flex-end;gap:2px;transform:translateX(-50%);pointer-events:none}
.hx-prism-crown>span{height:1px;flex:1;margin-bottom:9px;background:linear-gradient(90deg,transparent,#adcaff);box-shadow:0 0 12px #9591ff}
.hx-prism-crown>span:last-child{transform:scaleX(-1)}
.hx-prism-crown svg{height:91px;width:120px;flex:none;overflow:visible;fill:none;stroke:#d1f1ff;stroke-width:.8;filter:drop-shadow(0 0 5px #85cfff) drop-shadow(0 0 15px #9470ff99)}
.hx-prism-crown .prism-inner{stroke:#b899ff}.hx-prism-crown .prism-axis{opacity:.4;stroke-width:.5}.hx-prism-crown .prism-orbit{stroke:#a893ff;stroke-dasharray:43 7;transform-origin:60px 51px;animation:prism-orbit 24s linear infinite}.hx-prism-crown .prism-heart{fill:#fff;stroke:none;animation:prism-heart 5s ease-in-out infinite}
#reader.active .stage .hx-prism>.screen,#reader.active.focus-reader .stage .hx-prism>.screen{width:100%!important;max-width:none!important;margin:0!important;border:1px solid #b4c8df66!important;border-radius:9px 9px 3px 3px!important;box-shadow:0 0 0 1px #000,0 0 0 3px #02030a,inset 0 0 20px #000!important;overflow:hidden!important}
#reader.active .stage .hx-prism>.screen:before,#reader.active .stage .hx-prism>.screen:after{display:none!important}
#reader.active .hx-prism .comic-dialogue{background:linear-gradient(110deg,#090e1c,#101624 55%,#0d0c1c)!important;border-top:1px solid #a9a1ff40!important;font-weight:400!important;padding:19px 22px!important;line-height:1.6!important}
.hx-prism-edges{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.hx-prism-edges i{position:absolute;width:48px;height:2px;background:linear-gradient(90deg,transparent,#eefcff,#b09aff);box-shadow:0 0 8px #a899ff,0 0 20px #a090ff99}
.hx-prism-edges i:nth-child(1){top:3px;left:24px}.hx-prism-edges i:nth-child(2){top:3px;right:24px}.hx-prism-edges i:nth-child(3){bottom:4px;left:24px}.hx-prism-edges i:nth-child(4){bottom:4px;right:24px}
/* Controls occupy their own space below the dialogue, never on top of it. */
#reader .hx-prism .hx-astra-nav{position:relative;inset:auto;z-index:20;width:100%;height:60px;display:grid;grid-template-columns:52px minmax(0,1fr) 52px;gap:12px;align-items:center;pointer-events:auto}
#reader .hx-prism .hx-astra-step{position:relative;inset:auto;width:48px;height:48px;transform:none;color:#ebf8ff}
#reader .hx-prism .hx-astra-step:before{display:none}
#reader .hx-prism .hx-astra-step svg{width:22px;height:30px;stroke-width:1.3}
#reader .hx-prism .hx-astra-progress{position:relative;inset:auto;width:100%;height:48px;transform:none;grid-template-columns:30px 1fr 30px;gap:14px;font-size:12px}
#reader .hx-prism .hx-astra-rail{height:2px;background:#a9c4ef26}
#reader .hx-prism .hx-astra-rail b{height:2px}
#reader.hx-chrome-hidden:not(.hx-issues-open) .hx-prism .hx-astra-nav{opacity:.3;pointer-events:auto}
#reader.hx-chrome-hidden:not(.hx-issues-open) .hx-prism .hx-astra-nav button{pointer-events:auto}
#reader .hx-prism .hx-astra-nav:hover,#reader .hx-prism .hx-astra-nav:focus-within{opacity:1}
/* Slim floating identity, without inherited text glyphs or menu circles. */
#reader .hx-reader-header{padding:10px 22px!important;min-height:66px!important;background:linear-gradient(#02050cd9,transparent)!important;transform:none}
#reader .hx-reader-header:after{display:none!important}
#reader .hx-reader-back:before,#reader .hx-reader-issues:before{content:none!important;display:none!important}
#reader .hx-reader-identity small{font-family:system-ui,sans-serif!important;font-size:12px!important;font-weight:400!important;letter-spacing:.19em!important}
#reader .hx-reader-identity b{font-family:system-ui,sans-serif!important;font-size:14px!important;font-weight:500!important;letter-spacing:.08em!important}
#reader .hx-reader-identity .hx-intersection{display:none}
#reader .hx-reader-full{display:grid!important}
#reader .hx-reader-header button{border-radius:0!important;background:linear-gradient(135deg,#9cd4ff0e,transparent)!important}
#reader .hx-reader-wake{color:#c6bbff;filter:drop-shadow(0 0 6px #b099ff)}
#reader .hx-reader-header button:focus-visible,#reader .hx-astra-nav button:focus-visible{outline:2px solid #bbecff;outline-offset:2px}
@keyframes prism-orbit{to{transform:rotate(360deg)}}
@keyframes prism-heart{0%,100%{opacity:.55}50%{opacity:1;filter:drop-shadow(0 0 5px white)}}
@media(min-width:1050px){.hx-prism{width:min(650px,calc((100dvh - 225px)*.6667));min-width:440px}}
@media(max-width:700px){
  #reader.active .stage,#reader.active.focus-reader .stage{padding:113px 13px 26px!important}
  .hx-prism{width:100%;padding:7px 7px 0;border-radius:14px 14px 22px 22px;box-shadow:0 0 0 2px #03040a,0 0 0 3px #9aaed536,0 22px 44px #000b,-6px 0 20px #71a4ff26,6px 0 22px #9975f830,inset 0 1px 2px #e0edff66}
  .hx-prism:before{left:-5px}.hx-prism:after{right:-5px}.hx-prism:before,.hx-prism:after{width:2px;top:25px;bottom:53px}
  .hx-prism-crown{top:-64px;height:64px;width:72%}.hx-prism-crown svg{width:84px;height:68px}
  #reader .hx-reader-header{padding:5px 7px!important;grid-template-columns:44px minmax(0,1fr) 44px!important;min-height:58px!important}
  #reader .hx-reader-full{display:none!important}
  #reader .hx-reader-identity small{font-size:10px!important;letter-spacing:.13em!important}
  #reader .hx-reader-identity b{font-size:12px!important;max-width:58vw!important}
  #reader.active .hx-prism .comic-dialogue{font-size:16px!important;padding:15px 16px!important}
  #reader .hx-prism .hx-astra-nav{height:55px;gap:5px;grid-template-columns:44px minmax(0,1fr) 44px}
  #reader .hx-prism .hx-astra-step{width:44px;height:48px}
  #reader .hx-prism .hx-astra-progress{gap:8px}
  .hx-prism-ambient:before{width:160vw;height:160vw;top:30%}
}
@media(prefers-reduced-motion:reduce){.hx-prism-crown *{animation:none!important}}