:root{--violet:#916cff;--violet-hot:#c6b4ff}

/* Reference-led landscape hardware reader */
#reader{max-width:none;padding:22px 12px 30px;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 45%,#24144a 0,#090a12 42%,#030406 76%)}
#reader.active{display:flex}
.reader-console{position:relative;width:min(96vw,1420px);padding:34px 38px 27px;border:2px solid #786fa4;border-radius:46px;background:linear-gradient(130deg,#2b2d3d 0,#090a12 9%,#242438 24%,#070810 66%,#29283c 88%,#62607a);box-shadow:inset 0 0 0 4px #05060b,inset 0 0 0 8px #313144,inset 0 0 28px #a48cff26,0 34px 85px #000,0 0 45px #7049ff55;overflow:visible}
.reader-console:before,.reader-console:after{content:"";position:absolute;top:16%;bottom:16%;width:17px;border:2px solid #77718f;background:repeating-linear-gradient(0deg,#0b0c14 0 13px,#332b65 14px 21px,#a88cff 22px 24px);box-shadow:0 0 16px #9d72ff,0 0 0 5px #090a11}
.reader-console:before{left:-18px;border-radius:13px 0 0 13px}.reader-console:after{right:-18px;border-radius:0 13px 13px 0}
.console-corner{position:absolute;width:68px;height:19px;border:1px solid #8e88a9;background:repeating-linear-gradient(90deg,#0c0d16 0 6px,#4b4961 7px 9px);box-shadow:0 0 13px #a98cff55}.c1{left:34px;top:9px}.c2{right:34px;top:9px}.c3{left:34px;bottom:7px}.c4{right:34px;bottom:7px}
.violet-rail{position:absolute;z-index:4;background:linear-gradient(90deg,transparent,var(--violet-hot),transparent);box-shadow:0 0 6px var(--violet),0 0 18px var(--violet)}.vr-top,.vr-bottom{height:3px;width:28%;left:36%}.vr-top{top:15px}.vr-bottom{bottom:14px}.vr-left,.vr-right{width:4px;height:22%;top:39%;background:linear-gradient(transparent,var(--violet-hot),transparent)}.vr-left{left:-8px}.vr-right{right:-8px}
.console-screen{display:grid;grid-template-columns:minmax(155px,21%) minmax(360px,53%) minmax(205px,26%);height:min(72vh,730px);min-height:520px;border:2px solid #06060a;border-radius:9px;background:#080911;box-shadow:inset 0 0 0 1px #514972,0 0 22px #8b63ff44;overflow:hidden}

/* Left archive pane */
.console-screen .issues{display:block!important;min-width:0;padding:19px 15px;border:0;border-right:1px solid #312b4d;background:linear-gradient(180deg,#0d0e19,#080911);text-align:left;overflow:hidden}
.issue-brand{display:flex;justify-content:space-between;align-items:end;padding-bottom:12px;border-bottom:1px solid #312b4d}.issue-brand b{font-size:13px;letter-spacing:.16em}.issue-brand small{font-size:8px;color:var(--violet-hot);letter-spacing:.11em}
.issue-tabs{display:flex;gap:7px;margin:12px 0}.console-screen .issues .thumb{flex:1;width:auto;height:62px;margin:0;border-color:#342f4c;border-radius:3px}.console-screen .issues .thumb.chosen{border-color:var(--violet-hot);box-shadow:0 0 10px #8d68ff66}.console-screen .issues>p{margin:11px 0 8px;color:#8d86a8;font-size:8px}
#thumbGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;max-height:calc(100% - 130px);overflow:auto;padding:2px}
#thumbGrid button{position:relative;aspect-ratio:2/3;min-width:0;padding:0;border:1px solid #28243c;background-color:#11121b;background-repeat:no-repeat;color:white;cursor:pointer;overflow:hidden}
#thumbGrid button:hover,#thumbGrid button:focus{border-color:var(--violet-hot);box-shadow:0 0 8px #8d68ff}
#thumbGrid button.on{border-color:var(--violet-hot);box-shadow:0 0 9px #9d77ff}
#thumbGrid span{position:absolute;right:1px;bottom:1px;padding:1px 2px;background:#090a11dd;color:#c7bcff;font-size:6px}

/* Central comic pane */
.console-screen .stage{min-width:0;height:100%;padding:10px 20px 11px;display:flex;flex-direction:column;align-items:center;background:radial-gradient(circle at 50% 45%,#221b3d 0,#080910 62%)}
.console-screen .status{flex:0 0 38px;width:100%;height:38px;color:#aaa5c0}.console-screen .status b{color:#b8a2ff}
.console-screen .screen{height:calc(100% - 92px);width:auto;max-width:100%;aspect-ratio:2/3;border:3px solid #050509;border-radius:2px;box-shadow:0 0 0 1px #655b85,0 0 25px #8d67ff45;background:#03040a;overflow:hidden}
.console-screen .screen:after{background:linear-gradient(115deg,#ffffff0a,transparent 25%,transparent 73%,#8b6cff0a)}
.console-screen .screen-hud{color:#d1c8ff;text-shadow:0 0 8px #9c75ff;background:linear-gradient(90deg,#120c24bb,transparent,#120c24bb);border-top-color:#9a76ff66}
.console-screen .controls{flex:0 0 44px;margin-top:8px}.console-screen .controls button{height:34px;border-color:#3b3455;background:#0d0e18}.console-screen #picker{min-width:190px}.console-screen #dots i.on{background:var(--violet-hot);box-shadow:0 0 7px var(--violet)}
.console-screen .comic-dialogue{left:3%;right:3%;bottom:2.2%;padding:9px 11px;border:1px solid #15121e;background:#f0ead9f2;font-size:13px;box-shadow:3px 3px 0 #100d18}

/* Right information pane */
.console-screen .details{display:block!important;min-width:0;height:100%;padding:18px 20px;border:0;border-left:1px solid #312b4d;background:linear-gradient(180deg,#0c0d18,#070810);overflow:auto}
.detail-tabs{display:flex;gap:13px;padding-bottom:13px;border-bottom:1px solid #312b4d;color:#66627c;font-size:8px;letter-spacing:.12em}.detail-tabs b{color:var(--violet-hot);border-bottom:1px solid var(--violet-hot);padding-bottom:5px}
.console-screen .code{margin-top:13px}.console-screen .code button{font-size:22px}.console-screen .eyebrow{margin-top:9vh;color:#a991ff}.console-screen .details h2{font-size:clamp(30px,3vw,47px);margin:10px 0 9px}.issue-name{display:block;color:#d7cfff;font-size:10px;letter-spacing:.17em;margin-bottom:17px}.console-screen .synopsis{font-size:14px;line-height:1.48}.console-screen .details dl{margin:18px 0}.console-screen .details dl div{padding:8px 0}.console-screen .primary,.console-screen .secondary{height:40px}.console-screen .primary{background:var(--violet);border-color:var(--violet);color:#fff}
.console-footer{height:27px;padding:8px 8px 0;display:flex;align-items:center;justify-content:space-between;color:#827a9e;font-size:8px;letter-spacing:.12em}.console-footer i{width:33%;height:2px;background:linear-gradient(90deg,transparent,var(--violet),transparent);box-shadow:0 0 8px var(--violet)}.console-footer button{padding:0;border:0;background:none;color:#b7a8ee;font:inherit;letter-spacing:inherit;cursor:pointer}

/* Fullscreen reading remains inside the complete hardware frame */
#reader.focus-reader .console-screen{grid-template-columns:1fr;height:min(82vh,880px)}
#reader.focus-reader .issues,#reader.focus-reader .details{display:none!important}
#reader.focus-reader .reader-console{width:min(96vw,920px)}
#reader.focus-reader .stage .screen{height:calc(100% - 92px)}
#reader.focus-reader .screen>#page{image-rendering:auto;background-color:#03040a}

@media(max-width:900px){#reader{padding:14px 4px 24px}.reader-console{width:calc(100vw - 14px);padding:25px 20px 20px;border-radius:28px}.reader-console:before{left:-9px}.reader-console:after{right:-9px}.console-corner{width:36px;height:10px}.c1,.c2{top:7px}.c3,.c4{bottom:6px}.console-screen{grid-template-columns:22% 53% 25%;height:auto;min-height:0;aspect-ratio:1.68}.console-screen .issues{padding:7px 6px}.issue-brand small{display:none}.issue-brand b{font-size:7px}.issue-tabs{gap:3px;margin:5px 0}.console-screen .issues .thumb{height:30px}.console-screen .issues>p{font-size:5px;margin:5px 0 3px}#thumbGrid{grid-template-columns:repeat(5,1fr);gap:2px;max-height:calc(100% - 67px)}#thumbGrid span{font-size:4px}.console-screen .stage{padding:4px 6px}.console-screen .status{flex-basis:17px;height:17px;font-size:5px}.console-screen .status small{display:none}.console-screen .screen{height:calc(100% - 43px);border-width:2px}.console-screen .screen-hud{font-size:4px;top:2px;left:3px;right:3px;padding:2px}.console-screen .controls{flex-basis:22px;margin-top:3px;gap:3px}.console-screen .controls button{height:19px;font-size:7px}.console-screen #picker{min-width:75px}.console-screen #dots{display:none}.console-screen .comic-dialogue{font-size:5px;line-height:1.2;padding:3px 4px}.console-screen .details{padding:7px 7px}.detail-tabs{font-size:4px;gap:4px;padding-bottom:5px}.detail-tabs span:nth-child(n+3){display:none}.console-screen .code{font-size:5px;margin-top:5px}.console-screen .code button{font-size:10px}.console-screen .eyebrow{font-size:5px;margin:10px 0 0}.console-screen .details h2{font-size:12px;line-height:.9;margin:4px 0}.issue-name{font-size:5px;margin-bottom:5px}.console-screen .synopsis{font-size:5px;line-height:1.25}.console-screen .details dl{display:none}.console-screen .primary,.console-screen .secondary{height:17px;font-size:5px;margin-top:3px}.console-footer{height:18px;padding-top:5px;font-size:5px}.console-footer span:nth-child(-n+4){display:none}.console-footer i{flex:1}.vr-top{top:10px}.vr-bottom{bottom:9px}.console-screen #cover h1{font-size:clamp(13px,5.5vw,24px);margin:4px 0 7px}.console-screen #cover small,.console-screen #cover p{font-size:4px}.console-screen #cover p{padding-top:3px}.display-foot strong{max-width:100%}}

@media(max-width:900px){#reader.focus-reader .reader-console{width:calc(100vw - 14px);padding:25px 20px 20px}#reader.focus-reader .console-screen{display:block;height:auto;aspect-ratio:auto;padding:4px;background:#080910}#reader.focus-reader .stage{height:min(78vh,760px)}#reader.focus-reader .stage .status{flex-basis:30px;height:30px;font-size:8px}#reader.focus-reader .stage .screen{height:calc(100% - 66px);width:auto;max-width:100%;aspect-ratio:2/3}#reader.focus-reader .stage .controls{flex-basis:30px}#reader.focus-reader .stage .controls button{height:26px;font-size:9px}#reader.focus-reader .stage #picker{min-width:130px}#reader.focus-reader .comic-dialogue{font-size:12px;padding:8px 9px}#reader.focus-reader .screen-hud{font-size:7px;padding:4px}}

/* HNX-38 armoured reader — reference-matched hardware pass */
:root{--violet:#875cff;--violet-hot:#d7caff;--cyan:#62e7ff;--metal:#85859a}
#reader{position:relative;isolation:isolate;background:
radial-gradient(ellipse at 50% 48%,#382266 0,#131122 34%,#06070c 68%),
linear-gradient(#0a0b12,#030408)}
#reader:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.16;background-image:linear-gradient(#8a73ff 1px,transparent 1px),linear-gradient(90deg,#8a73ff 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(ellipse,#000,transparent 72%)}
.reader-console{width:min(97vw,1520px);padding:44px 50px 35px;border:2px solid #aaa8bc;border-radius:54px;background:
linear-gradient(116deg,#7d7d91 0 1.2%,#242534 2.3% 7%,#070810 8% 20%,#29293c 22%,#080910 46% 76%,#323147 90%,#8c8a9c 98% 100%);box-shadow:
inset 0 0 0 3px #05060a,inset 0 0 0 8px #3e3d52,inset 0 0 0 11px #0a0a12,inset 0 0 38px #b09cff22,
0 38px 100px #000,0 0 0 2px #020208,0 0 52px #7a50ff7a;filter:drop-shadow(0 0 18px #754dff66)}
.reader-console:before,.reader-console:after{top:13%;bottom:13%;width:25px;border-color:#9995ad;background:repeating-linear-gradient(0deg,#080910 0 13px,#39334e 14px 22px,#ad92ff 23px 26px,#151521 27px 39px);box-shadow:inset 0 0 0 3px #080810,0 0 0 4px #4b4960,0 0 22px #9a70ff}
.reader-console:before{left:-27px;border-radius:19px 3px 3px 19px}.reader-console:after{right:-27px;border-radius:3px 19px 19px 3px}
.console-corner{width:112px;height:27px;border:1px solid #9a96aa;clip-path:polygon(0 0,78% 0,100% 45%,88% 100%,8% 100%,0 65%);background:repeating-linear-gradient(90deg,#0a0b13 0 9px,#58576a 10px 12px,#171722 13px 20px);box-shadow:inset 0 0 0 2px #05060a,0 0 16px #9c7cff88}
.c1{left:48px;top:9px}.c2{right:48px;top:9px;transform:scaleX(-1)}.c3{left:48px;bottom:8px;transform:scaleY(-1)}.c4{right:48px;bottom:8px;transform:scale(-1)}
.c1:after,.c3:after{content:"HNX // 38";position:absolute;left:18px;top:8px;color:#cbbcff;font:700 7px/1 system-ui;letter-spacing:.18em}.c3:after{transform:scaleY(-1)}
.c2:after,.c4:after{content:"NODE 03";position:absolute;left:18px;top:8px;color:#84eaff;font:700 7px/1 system-ui;letter-spacing:.18em;transform:scaleX(-1)}.c4:after{transform:scale(-1)}
.vr-top,.vr-bottom{width:36%;left:32%;height:4px}.vr-top{top:18px}.vr-bottom{bottom:17px}.vr-left,.vr-right{width:5px;height:28%;top:36%}.vr-left{left:-14px}.vr-right{right:-14px}
.console-screen{position:relative;grid-template-columns:minmax(170px,18%) minmax(390px,56%) minmax(220px,26%);height:min(74vh,770px);min-height:540px;border:3px solid #010207;border-radius:13px;background:#060710;box-shadow:inset 0 0 0 1px #79738f,inset 0 0 24px #000,0 0 0 3px #262536,0 0 34px #825dff70;overflow:hidden}
.console-screen .issues{background:linear-gradient(180deg,#0e0e1a,#070810 60%,#0b0917);border-right-color:#443866}.console-screen .details{background:linear-gradient(180deg,#0c0d18,#070810 58%,#100a1c);border-left-color:#443866}
.console-screen .stage{background:radial-gradient(ellipse at 50% 48%,#2c2050 0,#0b0b16 44%,#05060b 75%);border-inline:1px solid #181325}
.console-screen .stage:before{content:"◈  OPTICAL PAGE ARRAY  ◈";position:absolute;top:7px;color:#7d6ca7;font:600 6px/1 system-ui;letter-spacing:.24em;pointer-events:none}
.console-screen .screen{border:4px solid #020207;border-radius:5px;box-shadow:0 0 0 1px #9b8fc3,0 0 0 4px #15131e,0 0 34px #8e63ff75,inset 0 0 22px #000}
.console-screen .screen-hud{color:#e4dcff;background:linear-gradient(90deg,#100822e8,#08071399,#100822e8);border-top:1px solid #9f7cff99;border-bottom:1px solid #251b43;text-shadow:0 0 9px #9e7cff}
.console-screen .comic-dialogue{border:1px solid #080812;border-left:4px solid var(--violet);background:#f4efdef2;box-shadow:4px 4px 0 #08070e,0 0 16px #0009}
.issue-brand{border-bottom-color:#493d68}.issue-brand b{color:#f0ecff;text-shadow:0 0 8px #b599ff}.issue-brand small,.detail-tabs b,.console-screen .eyebrow{color:#b69aff}
#thumbGrid button{border-color:#302944;box-shadow:inset 0 0 0 1px #08080e}#thumbGrid button.on{border-color:#d4c4ff;box-shadow:0 0 0 1px #8c61ff,0 0 12px #8d68ff}
.console-screen .controls button{border-color:#51446e;background:linear-gradient(#191525,#0b0b12);box-shadow:inset 0 0 9px #000,0 0 8px #7d5bff22}.console-screen #dots i.on{background:#d8caff;box-shadow:0 0 9px #9f78ff}
.console-screen .primary{background:linear-gradient(90deg,#6f45dc,#a783ff);box-shadow:0 0 18px #8258ff55}.console-screen .secondary{border-color:#403654}
.console-footer{height:31px;color:#a496c9}.console-footer:before{content:"SYSTEM / ONLINE";color:#65e6c4}.console-footer i{height:3px;background:linear-gradient(90deg,transparent,#9d7cff 25%,#65e7ff 50%,#9d7cff 75%,transparent)}
#focusBtn{border:1px solid #51446e!important;padding:5px 9px!important;color:#d6c9ff!important;background:#0a0912!important;box-shadow:0 0 10px #7f5aff44}

@media(max-width:900px){.reader-console{padding:29px 24px 24px;border-radius:34px}.reader-console:before,.reader-console:after{width:18px}.reader-console:before{left:-18px}.reader-console:after{right:-18px}.console-corner{width:60px;height:15px}.c1,.c3{left:24px}.c2,.c4{right:24px}.console-corner:after{display:none}.vr-top{top:12px}.vr-bottom{bottom:11px}.console-footer:before{font-size:5px}.console-screen .stage:before{display:none}}
@media(max-width:900px) and (orientation:portrait){#reader.focus-reader .reader-console{width:calc(100vw - 20px);padding:30px 24px 23px}#reader.focus-reader .stage{height:min(72svh,690px);min-height:470px}#reader.focus-reader .console-screen{border-radius:7px}#reader.focus-reader .stage .screen{height:calc(100% - 70px)}#reader.focus-reader .console-footer{height:25px}}