/* HonessiX reader — Astra light-field interface. Loaded last by design. */
:root{
  --astra-cyan:#8cf4ff;
  --astra-violet:#a68aff;
  --astra-ink:#010207;
}

/* Remove the document-viewer control group completely. */
#reader.active .reader-console .console-screen .stage>.controls,
#reader.active.focus-reader .reader-console .console-screen .stage>.controls{
  display:none!important;
  width:0!important;
  height:0!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* The reader is a dark light field, not an app panel. */
#reader.active{
  display:block!important;
  overflow-x:hidden!important;
  background:
    radial-gradient(ellipse at 50% 38%,rgba(112,82,206,.14),transparent 38%),
    radial-gradient(ellipse at 50% 100%,rgba(74,224,242,.07),transparent 42%),
    linear-gradient(160deg,#010207 0%,#050713 52%,#010205 100%)!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:100vw!important;
  max-width:none!important;
}
#reader.active .platform-reader-tools{display:none!important}
#reader.active:before{
  opacity:.26!important;
  background:
    linear-gradient(90deg,transparent 49.96%,rgba(140,244,255,.17) 50%,transparent 50.04%),
    linear-gradient(30deg,transparent 49.97%,rgba(166,138,255,.07) 50%,transparent 50.03%),
    radial-gradient(circle at 50% 42%,rgba(140,244,255,.08),transparent 31%)!important;
}

/* Header dissolves into the scene. There is no full-width navigation bar. */
.hx-reader-header{
  min-height:64px!important;
  grid-template-columns:minmax(48px,1fr) auto minmax(48px,1fr)!important;
  gap:12px!important;
  padding:8px clamp(12px,2.6vw,30px)!important;
  border:0!important;
  background:linear-gradient(180deg,rgba(1,3,8,.9) 0%,rgba(1,3,8,.42) 62%,transparent 100%)!important;
  backdrop-filter:none!important;
}
.hx-reader-header:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:2px;
  width:min(240px,42vw);
  height:1px;
  opacity:.58;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--astra-violet),#efffff,var(--astra-cyan),transparent);
  box-shadow:0 0 12px rgba(140,244,255,.28);
}
.hx-reader-header button{
  position:relative;
  width:46px!important;
  height:46px!important;
  min-height:46px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  color:#eaffff!important;
  background:transparent!important;
  box-shadow:none!important;
  clip-path:none!important;
  font-size:0!important;
}
.hx-reader-header button:after{
  content:"";
  position:absolute;
  inset:5px;
  opacity:.6;
  background:
    linear-gradient(var(--astra-cyan),var(--astra-cyan)) left top/10px 1px no-repeat,
    linear-gradient(var(--astra-cyan),var(--astra-cyan)) left top/1px 10px no-repeat,
    linear-gradient(var(--astra-violet),var(--astra-violet)) right bottom/10px 1px no-repeat,
    linear-gradient(var(--astra-violet),var(--astra-violet)) right bottom/1px 10px no-repeat;
  transition:opacity .2s ease,filter .2s ease;
}
.hx-reader-header button:hover:after,
.hx-reader-header button:focus-visible:after{opacity:1;filter:drop-shadow(0 0 7px var(--astra-cyan))}
.hx-reader-header button svg{position:relative;z-index:1;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hx-reader-back{justify-self:start!important}
.hx-reader-tools{justify-self:end!important;display:flex!important;gap:2px!important}
.hx-reader-full{display:none!important}
.hx-reader-identity{gap:10px!important}
.hx-reader-identity>span{text-align:left!important}
.hx-reader-identity small{
  color:#98abb7!important;
  font:500 10px/1.15 ui-monospace,SFMono-Regular,Menlo,monospace!important;
  letter-spacing:.2em!important;
}
.hx-reader-identity b{
  max-width:42vw!important;
  margin-top:4px!important;
  color:#f6fbff!important;
  font:600 12px/1.15 ui-monospace,SFMono-Regular,Menlo,monospace!important;
  letter-spacing:.13em!important;
  text-transform:uppercase;
}
.hx-intersection{flex-basis:34px!important;width:34px!important;height:34px!important;color:var(--astra-cyan)!important;filter:drop-shadow(0 0 8px rgba(140,244,255,.48))!important}

/* The actual reading plane gets a hairline frame and more space. */
#reader.active .stage,
#reader.active.focus-reader .stage{
  padding:70px 24px calc(76px + env(safe-area-inset-bottom))!important;
}
#reader.active .stage .screen,
#reader.active.focus-reader .stage .screen{
  width:min(calc(100vw - 72px),760px)!important;
  max-width:760px!important;
  border-color:rgba(212,239,255,.42)!important;
  background:#010205!important;
  box-shadow:
    0 0 0 1px rgba(140,244,255,.08),
    0 30px 90px rgba(0,0,0,.86),
    0 0 58px rgba(126,93,226,.13)!important;
}
#reader.active .stage .screen:before{
  inset:-5px!important;
  opacity:.88!important;
  background:
    linear-gradient(var(--astra-cyan),var(--astra-cyan)) left top/22px 1px no-repeat,
    linear-gradient(var(--astra-cyan),var(--astra-cyan)) left top/1px 22px no-repeat,
    linear-gradient(var(--astra-violet),var(--astra-violet)) right top/22px 1px no-repeat,
    linear-gradient(var(--astra-violet),var(--astra-violet)) right top/1px 22px no-repeat,
    linear-gradient(var(--astra-violet),var(--astra-violet)) left bottom/22px 1px no-repeat,
    linear-gradient(var(--astra-violet),var(--astra-violet)) left bottom/1px 22px no-repeat,
    linear-gradient(var(--astra-cyan),var(--astra-cyan)) right bottom/22px 1px no-repeat,
    linear-gradient(var(--astra-cyan),var(--astra-cyan)) right bottom/1px 22px no-repeat!important;
  filter:drop-shadow(0 0 7px rgba(140,244,255,.3));
}
#reader.active .console-screen .comic-dialogue{
  padding:18px clamp(18px,3.2vw,30px)!important;
  border-top:1px solid rgba(140,244,255,.18)!important;
  background:linear-gradient(115deg,rgba(4,7,14,.98),rgba(6,14,22,.98) 58%,rgba(8,7,17,.98))!important;
}

/* Astra edge navigation. Large invisible targets, almost weightless visuals. */
.hx-astra-nav{position:fixed;z-index:123;inset:0;pointer-events:none;transition:opacity .24s ease}
.hx-astra-nav button{pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hx-astra-step{
  position:absolute;
  top:50%;
  width:46px;
  height:108px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:0;
  color:rgba(225,251,255,.86);
  background:transparent;
  transform:translateY(-50%);
}
.hx-astra-prev{left:0}
.hx-astra-next{right:0}
.hx-astra-step:before{
  content:"";
  position:absolute;
  top:25%;
  bottom:25%;
  width:1px;
  background:linear-gradient(transparent,var(--astra-cyan),transparent);
  opacity:.42;
  box-shadow:0 0 9px rgba(140,244,255,.32);
}
.hx-astra-prev:before{left:5px}
.hx-astra-next:before{right:5px}
.hx-astra-step svg{width:24px;height:42px;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(140,244,255,.38));transition:transform .2s ease,opacity .2s ease}
.hx-astra-prev:hover svg,.hx-astra-prev:focus-visible svg{transform:translateX(-3px)}
.hx-astra-next:hover svg,.hx-astra-next:focus-visible svg{transform:translateX(3px)}
.hx-astra-step:disabled{opacity:.14;pointer-events:none}
.hx-astra-progress{
  position:absolute;
  left:50%;
  bottom:calc(13px + env(safe-area-inset-bottom));
  width:min(240px,48vw);
  height:34px;
  display:grid;
  grid-template-columns:28px 1fr 28px;
  align-items:center;
  gap:10px;
  padding:0;
  border:0;
  color:#cfe1e9;
  background:transparent;
  transform:translateX(-50%);
  font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
}
.hx-astra-progress>span:first-child{color:#efffff;text-align:right;text-shadow:0 0 8px rgba(140,244,255,.45)}
.hx-astra-progress>span:last-child{text-align:left;opacity:.52}
.hx-astra-rail{position:relative;height:1px;overflow:visible;background:rgba(140,244,255,.16)}
.hx-astra-rail:before,.hx-astra-rail:after{content:"";position:absolute;top:-2px;width:1px;height:5px;background:rgba(140,244,255,.4)}
.hx-astra-rail:before{left:0}.hx-astra-rail:after{right:0}
.hx-astra-rail b{
  position:absolute;
  left:0;
  top:0;
  width:var(--astra-read,0%);
  height:1px;
  background:linear-gradient(90deg,var(--astra-violet),#f3ffff,var(--astra-cyan));
  box-shadow:0 0 8px var(--astra-cyan),0 0 14px rgba(166,138,255,.42);
  transition:width .3s cubic-bezier(.2,.75,.2,1);
}
.hx-astra-rail b:after{content:"";position:absolute;right:-2px;top:-2px;width:5px;height:5px;border-radius:50%;background:#efffff;box-shadow:0 0 10px var(--astra-cyan)}
#reader.hx-chrome-hidden:not(.hx-issues-open) .hx-astra-nav{opacity:0;pointer-events:none}
#reader.hx-chrome-hidden:not(.hx-issues-open) .hx-astra-nav button{pointer-events:none}

/* The site-entry coordinate lock becomes the page-loading state too. */
.hx-reader-page-loader{
  position:absolute;
  z-index:18;
  left:0;
  top:0;
  width:100%;
  aspect-ratio:2/3;
  display:grid;
  place-items:center;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,rgba(113,78,220,.19),transparent 20%),
    radial-gradient(circle at 50% 50%,rgba(140,244,255,.07),transparent 43%),
    rgba(1,2,7,.96);
  transition:opacity .22s ease,visibility 0s linear .22s;
}
.hx-reader-page-loader.is-visible{opacity:1;visibility:visible;transition-delay:0s}
.hx-page-loader-field{
  position:absolute;
  inset:-35%;
  opacity:.62;
  background:
    repeating-conic-gradient(from 15deg at 50% 50%,rgba(140,244,255,.06) 0 .22deg,transparent .22deg 30deg),
    radial-gradient(circle at 50% 50%,transparent 0 27%,rgba(140,244,255,.1) 27.1% 27.25%,transparent 27.4% 43%,rgba(166,138,255,.08) 43.1% 43.2%,transparent 43.35%);
  animation:astra-field-turn 16s linear infinite;
}
.hx-page-loader-lock{
  position:relative;
  width:min(33%,170px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  color:var(--astra-cyan);
  filter:drop-shadow(0 0 16px rgba(140,244,255,.34));
  transform:scale(.82);
}
.hx-reader-page-loader.is-visible .hx-page-loader-lock{animation:astra-page-lock-in .72s cubic-bezier(.16,.8,.18,1) forwards}
.hx-page-loader-lock:before,
.hx-page-loader-lock:after,
.hx-page-loader-orbit{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.hx-page-loader-lock:before{inset:-24%;border:1px solid rgba(140,244,255,.13);border-left-color:rgba(140,244,255,.62);border-right-color:rgba(166,138,255,.42);animation:astra-ring 4.8s linear infinite}
.hx-page-loader-lock:after{inset:-9%;border:1px solid rgba(166,138,255,.16);border-top-color:rgba(166,138,255,.68);border-bottom-color:rgba(140,244,255,.54);animation:astra-ring 3.2s linear infinite reverse}
.hx-page-loader-orbit.orbit-a{inset:-38%;border:1px solid rgba(140,244,255,.07)}
.hx-page-loader-orbit.orbit-b{inset:-56%;border:1px solid rgba(166,138,255,.055)}
.hx-page-loader-lock svg{position:relative;z-index:2;width:74%;height:74%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 9px rgba(140,244,255,.45))}
.hx-page-loader-lock .astra-triangle-inner{stroke:var(--astra-violet);opacity:.9}
.hx-page-loader-lock .astra-cross{opacity:.43;stroke-width:.65}
.hx-page-loader-lock svg circle{fill:#f3ffff;stroke:none;filter:drop-shadow(0 0 7px #fff)}
.hx-page-loader-nodes{position:absolute;inset:-24%;animation:astra-ring 2.7s linear infinite}
.hx-page-loader-nodes i{position:absolute;width:4px;height:4px;border-radius:50%;background:#efffff;box-shadow:0 0 9px #fff,0 0 18px var(--astra-cyan)}
.hx-page-loader-nodes i:nth-child(1){left:50%;top:-2px}
.hx-page-loader-nodes i:nth-child(2){right:6%;bottom:20%}
.hx-page-loader-nodes i:nth-child(3){left:6%;bottom:20%}
@keyframes astra-page-lock-in{0%{opacity:.08;transform:scale(.64) rotate(-7deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

/* Context drawer remains available, but its trigger reads as a signal glyph. */
#reader.active .issues{inset:64px auto 0 0!important;height:calc(100dvh - 64px)!important}
.hx-reader-scrim{inset:64px 0 0!important}
.hx-reader-wake{
  right:10px!important;
  bottom:calc(10px + env(safe-area-inset-bottom))!important;
  width:36px!important;
  height:36px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}

/* Gateway: coordinate alignment, not a loading bar. */
#gateway{
  --power:var(--astra-cyan);
  background:
    radial-gradient(circle at 50% 50%,rgba(113,78,220,.16),transparent 21%),
    radial-gradient(circle at 50% 50%,rgba(140,244,255,.07),transparent 43%),
    #010207!important;
}
#gateway .gateway-field{
  inset:-30%!important;
  opacity:.7!important;
  transform:none!important;
  background:
    repeating-conic-gradient(from 15deg at 50% 50%,rgba(140,244,255,.055) 0 .2deg,transparent .2deg 30deg),
    radial-gradient(circle at 50% 50%,transparent 0 27%,rgba(140,244,255,.09) 27.1% 27.25%,transparent 27.4% 43%,rgba(166,138,255,.07) 43.1% 43.2%,transparent 43.35%)!important;
  animation:astra-field-turn 16s linear infinite;
}
#gateway .power-module{
  position:relative!important;
  width:min(72vw,330px)!important;
  height:min(72vw,330px)!important;
  display:grid!important;
  place-items:center!important;
  opacity:0;
  transform:scale(.74) rotate(-6deg)!important;
  filter:drop-shadow(0 0 30px rgba(140,244,255,.13));
}
#gateway.open .power-module{animation:astra-module-in .9s cubic-bezier(.16,.8,.18,1) forwards!important}
#gateway .power-module:before,
#gateway .power-module:after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
#gateway .power-module:before{
  inset:3%;
  border:1px solid rgba(140,244,255,.12);
  border-left-color:rgba(140,244,255,.62);
  border-right-color:rgba(166,138,255,.4);
}
#gateway .power-module:after{
  inset:17%;
  border:1px solid rgba(166,138,255,.16);
  border-top-color:rgba(166,138,255,.66);
  border-bottom-color:rgba(140,244,255,.52);
}
#gateway.open .power-module:before{animation:astra-ring 4.8s linear infinite}
#gateway.open .power-module:after{animation:astra-ring 3.2s linear infinite reverse}
#gateway .power-halo{
  position:absolute!important;
  inset:8%!important;
  border:0!important;
  border-radius:50%!important;
  clip-path:none!important;
  background:repeating-conic-gradient(from 0deg,rgba(140,244,255,.62) 0 1deg,transparent 1deg 30deg)!important;
  box-shadow:none!important;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 0);
  opacity:.42;
}
#gateway.open .power-halo{animation:astra-ring 8s linear infinite}
#gateway .power-track{
  position:absolute!important;
  width:82%!important;
  height:82%!important;
  overflow:visible!important;
  border:0!important;
  border-radius:50%!important;
  background:conic-gradient(from 220deg,transparent 0 18%,rgba(166,138,255,.35) 28%,#f1ffff 37%,var(--power) 40%,transparent 47%)!important;
  box-shadow:none!important;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
  opacity:.14;
  transform:rotate(-100deg);
}
#gateway.open .power-track{animation:astra-scan 1.45s .08s cubic-bezier(.2,.68,.16,1) forwards!important}
#gateway .power-fill{
  position:absolute!important;
  inset:19%!important;
  border:1px solid rgba(140,244,255,.22)!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:inset 0 0 30px rgba(140,244,255,.04)!important;
  transform:none!important;
  animation:none!important;
}
#gateway .power-head{
  left:50%!important;
  top:50%!important;
  bottom:auto!important;
  width:5px!important;
  height:5px!important;
  border-radius:50%!important;
  background:#f2ffff!important;
  box-shadow:0 0 9px #fff,0 0 22px var(--power)!important;
  transform:translate(-50%,-50%) translateY(-133px)!important;
  opacity:0;
}
#gateway.open .power-head{animation:astra-satellite 1.45s .08s cubic-bezier(.2,.68,.16,1) forwards!important}
#gateway .power-core{
  position:absolute!important;
  z-index:3;
  left:50%!important;
  top:50%!important;
  bottom:auto!important;
  width:48%!important;
  aspect-ratio:1;
  display:grid!important;
  place-items:center!important;
  color:var(--power)!important;
  opacity:.22!important;
  transform:translate(-50%,-50%) scale(.72)!important;
  transition:opacity .25s ease,transform .42s cubic-bezier(.2,.8,.2,1),filter .25s ease!important;
}
#gateway .power-core svg{width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
#gateway .power-core .astra-triangle-inner{stroke:var(--astra-violet);opacity:.9}
#gateway .power-core .astra-cross{opacity:.46;stroke-width:.65}
#gateway .power-core circle{fill:#f3ffff;stroke:none;filter:drop-shadow(0 0 7px #fff)}
#gateway.open .power-core{animation:astra-core-awake 1.42s .1s cubic-bezier(.2,.78,.18,1) forwards}
#gateway.charged .power-core{opacity:1!important;transform:translate(-50%,-50%) scale(1)!important;filter:drop-shadow(0 0 16px rgba(140,244,255,.7)) drop-shadow(0 0 32px rgba(166,138,255,.36));text-shadow:none!important}
#gateway .power-brackets i{
  position:absolute!important;
  width:5px!important;
  height:5px!important;
  border:0!important;
  border-radius:50%!important;
  background:var(--power)!important;
  box-shadow:0 0 11px var(--power)!important;
  opacity:.22;
}
#gateway .power-brackets i:nth-child(1){left:50%!important;top:3%!important;transform:translateX(-50%)}
#gateway .power-brackets i:nth-child(2){right:8%!important;top:72%!important}
#gateway .power-brackets i:nth-child(3){right:auto!important;left:8%!important;bottom:27%!important}
#gateway .power-brackets i:nth-child(4){left:50%!important;bottom:3%!important;transform:translateX(-50%)}
#gateway.open .power-brackets i{animation:astra-node 1.2s ease-in-out infinite alternate}
#gateway.open .power-brackets i:nth-child(2){animation-delay:.18s}
#gateway.open .power-brackets i:nth-child(3){animation-delay:.36s}
#gateway.open .power-brackets i:nth-child(4){animation-delay:.54s}

@keyframes astra-module-in{0%{opacity:0;transform:scale(.74) rotate(-6deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes astra-ring{to{transform:rotate(1turn)}}
@keyframes astra-field-turn{to{transform:rotate(1turn)}}
@keyframes astra-scan{0%{opacity:.06;transform:rotate(-100deg)}65%{opacity:.86}100%{opacity:.3;transform:rotate(265deg)}}
@keyframes astra-satellite{0%{opacity:0;transform:translate(-50%,-50%) rotate(-100deg) translateY(-133px)}25%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) rotate(265deg) translateY(-133px)}}
@keyframes astra-core-awake{0%{opacity:.08;transform:translate(-50%,-50%) scale(.68) rotate(-4deg)}72%{opacity:.72}100%{opacity:.86;transform:translate(-50%,-50%) scale(.96) rotate(0)}}
@keyframes astra-node{to{opacity:.92;transform:scale(1.25)}}

@media(max-width:700px){
  .hx-reader-header{grid-template-columns:46px minmax(0,1fr) 46px!important;gap:4px!important;padding-inline:7px!important}
  .hx-reader-header:after{width:38vw!important}
  .hx-reader-identity{justify-content:center!important;gap:7px!important}
  .hx-reader-identity>span{text-align:left!important}
  .hx-reader-identity small{font-size:9px!important;letter-spacing:.12em!important}
  .hx-reader-identity b{max-width:42vw!important;font-size:11px!important;letter-spacing:.1em!important}
  .hx-intersection{flex-basis:30px!important;width:30px!important;height:30px!important}
  #reader.active .stage,
  #reader.active.focus-reader .stage{padding:68px 22px calc(70px + env(safe-area-inset-bottom))!important}
  #reader.active .stage .screen,
  #reader.active.focus-reader .stage .screen{width:calc(100vw - 48px)!important;max-width:560px!important}
  #reader.active .console-screen .comic-dialogue{padding:15px 17px!important;font-size:16px!important;line-height:1.52!important}
  .hx-astra-step{width:36px;height:96px}
  .hx-astra-step svg{width:18px;height:34px}
  .hx-astra-prev:before{left:3px}.hx-astra-next:before{right:3px}
  .hx-astra-progress{width:min(210px,54vw);bottom:calc(10px + env(safe-area-inset-bottom));gap:7px}
}

@media(prefers-reduced-motion:reduce){
  .hx-astra-rail b,.hx-astra-step svg,#gateway *,.hx-reader-page-loader *{animation:none!important;transition:none!important}
}