:root{
  --ink:#02060a;--ink2:#07131d;--panel:rgba(8,20,29,.84);--paper:#edf7fb;
  --muted:#8aa4b3;--cyan:#63e7ff;--cyan2:#b9f7ff;--line:rgba(148,227,248,.18);
  --safe-top:max(.55rem,env(safe-area-inset-top));--safe-bottom:max(.65rem,env(safe-area-inset-bottom));
}
*{box-sizing:border-box}
html,body{margin:0;min-width:280px;background:var(--ink);color:var(--paper);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100svh;overflow:hidden;background:
radial-gradient(circle at 50% 20%,rgba(36,167,206,.11),transparent 34rem),
linear-gradient(145deg,#07121a,#010407 72%)}
button,a,input{-webkit-tap-highlight-color:transparent}
button,a{font:inherit;color:inherit}
button{cursor:pointer}
.cr-shell{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;height:100svh;min-height:420px;overflow:hidden;isolation:isolate}
.cr-shell:before{position:absolute;inset:0;z-index:-2;background:
linear-gradient(rgba(118,220,245,.025) 1px,transparent 1px),
linear-gradient(90deg,rgba(118,220,245,.025) 1px,transparent 1px);
background-size:26px 26px;content:"";mask-image:linear-gradient(to bottom,black,transparent 88%)}
.cr-topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;padding:calc(var(--safe-top) + .4rem) clamp(.7rem,2.5vw,1.4rem) .7rem;border-bottom:1px solid var(--line);background:rgba(2,8,13,.72);backdrop-filter:blur(18px) saturate(1.15)}
.cr-brand{display:flex;align-items:center;min-width:0;max-width:100%;text-decoration:none}
.cr-brand-badge{display:block;width:min(100%,24rem);height:auto;max-height:5.8rem;object-fit:contain;object-position:left center;filter:drop-shadow(0 0 18px rgba(48,203,255,.18))}
.cr-title span{color:var(--muted);font:700 .52rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.16em}
.cr-title{display:grid;gap:.28rem;text-align:center;min-width:0}
.cr-title strong{font-size:clamp(.72rem,2vw,.92rem);letter-spacing:.11em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-icon{justify-self:end;width:2.75rem;height:2.75rem;border:1px solid var(--line);border-radius:.8rem;background:rgba(255,255,255,.025);font-size:1.25rem}
.cr-icon:focus-visible,.cr-control:focus-visible,.cr-navbtn:focus-visible,.cr-empty button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.cr-toolbar{display:flex;align-items:center;justify-content:center;gap:.55rem;flex-wrap:wrap;padding:.55rem .7rem;border-bottom:1px solid var(--line);background:rgba(4,12,18,.82);backdrop-filter:blur(14px)}
.cr-toolgroup{display:flex;align-items:center;gap:.35rem}
.cr-control{min-height:2.45rem;padding:.56rem .78rem;border:1px solid var(--line);border-radius:.72rem;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));color:#dcecf2;font-size:.64rem;font-weight:800;letter-spacing:.09em}
.cr-control:hover{border-color:rgba(123,233,255,.46)}
.cr-control.cr-primary{border-color:rgba(94,226,255,.48);background:linear-gradient(135deg,rgba(62,207,239,.21),rgba(59,120,196,.08))}
.cr-control.cr-square{width:2.45rem;padding:0;font-size:1rem}
.cr-zoom-readout{min-width:4.5rem}
#enhanceBtn[aria-pressed="true"]{border-color:rgba(107,235,255,.62);background:linear-gradient(135deg,rgba(66,216,243,.22),rgba(68,111,181,.11));box-shadow:inset 0 0 24px rgba(78,224,250,.08)}
.cr-status-dot{display:inline-block;width:.45rem;height:.45rem;margin-right:.25rem;border-radius:50%;background:#526875}
#enhanceBtn[aria-pressed="true"] .cr-status-dot{background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.cr-stage{position:relative;min-height:0;overflow:hidden;outline:0;touch-action:none;user-select:none}
.cr-grid{position:absolute;inset:0;background:
radial-gradient(circle at 50% 50%,rgba(95,218,244,.08),transparent 27rem),
linear-gradient(rgba(114,219,243,.025) 1px,transparent 1px),
linear-gradient(90deg,rgba(114,219,243,.025) 1px,transparent 1px);background-size:auto,34px 34px,34px 34px}
.cr-stage:after{position:absolute;inset:auto 4% 2% 4%;height:16%;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,.72),transparent 68%);filter:blur(14px);content:""}
.cr-empty{position:absolute;z-index:3;top:50%;left:50%;display:grid;width:min(92%,31rem);padding:2rem 1rem;place-items:center;transform:translate(-50%,-50%);text-align:center}
.cr-empty-glyph{display:grid;width:5rem;height:5rem;place-items:center;border:1px solid rgba(102,230,255,.28);border-radius:1.3rem;background:rgba(26,71,88,.12);color:var(--cyan);font-size:2rem;box-shadow:inset 0 0 28px rgba(81,223,248,.05)}
.cr-empty p{margin:1.1rem 0 .5rem;color:var(--cyan);font:800 .58rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.2em}
.cr-empty h1{margin:0;font-size:clamp(1.45rem,4vw,2.35rem);font-weight:550;letter-spacing:-.045em;line-height:1.03}
.cr-empty>span{margin-top:.85rem;color:var(--muted);font-size:.65rem;font-weight:700;letter-spacing:.12em}
.cr-empty button{margin-top:1.15rem;min-height:2.75rem;padding:.7rem 1rem;border:1px solid rgba(95,227,255,.46);border-radius:.85rem;background:rgba(61,211,241,.12);font-size:.72rem;font-weight:800;letter-spacing:.09em}
.cr-book-transform{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%) translate3d(var(--pan-x,0px),var(--pan-y,0px),0) scale(var(--book-zoom,1));transform-origin:center center;will-change:transform}
.cr-book{width:min(88vw,1100px);height:min(68svh,760px);filter:drop-shadow(0 24px 35px rgba(0,0,0,.5))}
.cr-book .cr-page{background:#111;overflow:hidden}
.cr-book .cr-page img{display:block;width:100%;height:100%;object-fit:contain;background:#0a0a0b;-webkit-user-drag:none;user-select:none}
.cr-book .cr-page:after{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.025),transparent 8%,transparent 92%,rgba(0,0,0,.16));content:""}
.cr-resolution{position:absolute;z-index:4;right:.65rem;bottom:.65rem;padding:.45rem .58rem;border:1px solid rgba(139,225,246,.16);border-radius:.55rem;background:rgba(1,7,11,.74);color:#8faab6;font:750 .52rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.1em;pointer-events:none;backdrop-filter:blur(10px)}
.cr-nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.7rem;padding:.55rem clamp(.7rem,2.3vw,1.25rem);border-top:1px solid var(--line);background:rgba(3,10,15,.86);backdrop-filter:blur(15px)}
.cr-navbtn{display:grid;width:2.8rem;height:2.8rem;place-items:center;border:1px solid rgba(130,225,247,.22);border-radius:.86rem;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));font-size:1.6rem;line-height:1}
.cr-navbtn:disabled{cursor:default;opacity:.3}
.cr-progress{display:grid;gap:.45rem;min-width:0}
.cr-page-line{display:flex;align-items:center;justify-content:space-between;gap:1rem;color:var(--muted);font:750 .55rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.1em}
.cr-page-line span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#pageScrubber{width:100%;height:1rem;margin:0;accent-color:var(--cyan)}
.cr-footer{display:flex;align-items:center;justify-content:center;gap:clamp(.8rem,4vw,3rem);padding:.45rem .7rem calc(var(--safe-bottom) + .2rem);border-top:1px solid rgba(143,223,244,.08);background:#02070b;color:#68818e;font:700 .48rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.1em;text-align:center}
body.cr-dragging .cr-book-transform{cursor:grabbing}
@media(max-width:720px){
  .cr-shell{grid-template-rows:auto auto minmax(0,1fr) auto auto}
  .cr-topbar{grid-template-columns:1fr auto}
  .cr-title{display:none}
  .cr-brand-badge{width:min(100%,18rem);max-height:4.6rem}
  .cr-toolbar{justify-content:space-between;gap:.4rem}
  .cr-load-group{flex:1 1 auto}
  .cr-primary{width:100%}
  .cr-control{min-height:2.7rem}
  .cr-book{width:94vw;height:min(67svh,760px)}
  .cr-footer{gap:.8rem}
  .cr-footer span:nth-child(2){display:none}
}
@media(max-width:410px){
  .cr-toolbar{display:grid;grid-template-columns:1fr auto}
  .cr-load-group{grid-column:1}
  .cr-toolgroup:nth-child(2){grid-column:2}
  .cr-toolgroup:nth-child(3){grid-column:1/-1}
  #enhanceBtn{width:100%}
  .cr-brand-badge{width:min(100%,15.5rem);max-height:4rem}
  .cr-footer span:first-child{display:none}
}
@media(orientation:landscape) and (max-height:560px){
  .cr-topbar{padding-top:max(.35rem,env(safe-area-inset-top));padding-bottom:.35rem}
  .cr-brand-badge{width:min(100%,14rem);max-height:3.2rem}
  .cr-toolbar{padding:.35rem .6rem}
  .cr-control{min-height:2.2rem;padding:.4rem .65rem}
  .cr-control.cr-square{width:2.2rem}
  .cr-book{height:min(62svh,520px);width:min(82vw,1100px)}
  .cr-nav{padding:.35rem .6rem}
  .cr-navbtn{width:2.35rem;height:2.35rem}
  .cr-footer{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}


/* PRIME PAY // locked issue */
.cr-buy-issue{margin-top:.5rem;min-height:2.8rem;padding:.7rem 1rem;border:1px solid rgba(119,235,255,.58);border-radius:.8rem;background:linear-gradient(135deg,rgba(42,156,193,.9),rgba(13,62,86,.96));color:#fff;font:900 .68rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;cursor:pointer}
.cr-buy-issue[hidden]{display:none!important}


/* CR volume UI */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.cr-volume-picker{display:block;margin-top:1.15rem;position:relative}
.cr-volume-picker:after{position:absolute;right:.9rem;top:50%;transform:translateY(-52%);content:"⌄";color:var(--cyan);pointer-events:none;font-size:1rem}
#volumeSelect{appearance:none;-webkit-appearance:none;min-width:min(78vw,17rem);min-height:3rem;padding:.72rem 2.5rem .72rem 1rem;border:1px solid rgba(101,230,255,.5);border-radius:.85rem;background:linear-gradient(180deg,rgba(30,98,120,.25),rgba(4,18,27,.92));color:#eefcff;font:900 .72rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;outline:none;text-align:center;text-align-last:center}
#volumeSelect:focus{border-color:rgba(105,236,255,.85);box-shadow:0 0 0 3px rgba(78,218,255,.08)}
#volumeSelect option{background:#07131d;color:#effbff}

/* CR tool badge */
.cr-toolbar{display:grid;grid-template-columns:minmax(9rem,13rem) auto auto;align-items:center;justify-content:space-between;gap:.55rem}
.cr-reader-tool{display:grid;gap:.2rem;min-width:0}
.cr-reader-tool-badge{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:3rem;padding:.5rem .65rem;border:1px solid rgba(103,231,255,.46);border-radius:.78rem;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012));text-decoration:none}
.cr-reader-tool-badge span{color:var(--cyan);font:900 .45rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.1em}
.cr-reader-tool-badge strong{font:900 .62rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.06em}
.cr-reader-tool-badge b{color:#e8fbff;font:900 .48rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}
.cr-reader-tool small{color:#79929e;font:750 .45rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace}
.cr-reader-instructions{justify-self:start;padding:.15rem .25rem;border:0;background:transparent;color:#8eeeff;font:800 .44rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;text-decoration:underline}

/* CR tool mobile */
@media(max-width:720px){.cr-toolbar{grid-template-columns:minmax(8rem,9.2rem) auto minmax(6.7rem,1fr);gap:.35rem;padding:.42rem .5rem}.cr-reader-tool-badge{min-height:2.65rem;padding:.4rem .48rem;gap:.3rem}.cr-reader-tool-badge span{font-size:.38rem}.cr-reader-tool-badge strong{font-size:.5rem}.cr-reader-tool-badge b{font-size:.4rem}.cr-reader-tool small,.cr-reader-instructions{font-size:.38rem}.cr-control{min-height:2.45rem;padding:.45rem .55rem;font-size:.54rem}.cr-control.cr-square{width:2.25rem;padding:0}.cr-zoom-readout{min-width:3.6rem}#enhanceBtn{width:auto;white-space:nowrap}}
@media(max-width:410px){.cr-toolbar{grid-template-columns:8rem minmax(7rem,1fr);gap:.35rem}.cr-reader-tool{grid-column:1}.cr-toolbar>.cr-toolgroup:nth-of-type(1){grid-column:2}.cr-toolbar>.cr-toolgroup:nth-of-type(2){grid-column:1/-1;justify-self:stretch}#enhanceBtn{width:100%}}

/* CR instructions */
.cr-instructions-dialog{width:min(94vw,38rem);max-height:88dvh;padding:0;border:1px solid rgba(116,232,255,.36);border-radius:1.15rem;background:linear-gradient(155deg,rgba(8,27,41,.995),rgba(2,7,12,.998));color:#f4fcff;box-shadow:0 32px 110px rgba(0,0,0,.72);overflow:hidden}
.cr-instructions-dialog::backdrop{background:rgba(0,3,7,.86);backdrop-filter:blur(12px)}
.cr-instructions-panel{display:grid;grid-template-rows:auto 1fr;max-height:88dvh}
.cr-instructions-panel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 1.1rem;border-bottom:1px solid rgba(128,226,250,.13)}
.cr-instructions-panel header p{margin:0 0 .35rem;color:var(--cyan);font:900 .56rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em}
.cr-instructions-panel h2{margin:0;font-size:clamp(1.35rem,5vw,1.9rem);line-height:1}
.cr-instructions-panel header button{display:grid;width:2.4rem;height:2.4rem;place-items:center;border:1px solid rgba(142,226,247,.2);border-radius:50%;background:rgba(255,255,255,.035);color:white;font-size:1.25rem}
.cr-instructions-body{overflow:auto;padding:1rem 1.1rem 1.2rem;color:#acc2cb;font-size:.78rem;line-height:1.55}
.cr-instructions-body>p{margin:.1rem 0 1rem}.cr-instructions-body ol{margin:0;padding-left:1.3rem}.cr-instructions-body li+li{margin-top:.72rem}.cr-instructions-body strong{color:#f2fcff}
.cr-instructions-open{width:100%;min-height:3rem;margin-top:1.1rem;padding:.75rem 1rem;border:1px solid rgba(104,234,255,.55);border-radius:.8rem;background:linear-gradient(135deg,rgba(42,156,193,.9),rgba(13,62,86,.96));color:#fff;font:900 .68rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em}

/* Visibility authority: do not let authored display rules override HTML hidden. */
.cr-empty[hidden],.cr-book-transform[hidden]{display:none!important}

/* Reader safe-mode rendering */
.cr-book-fallback{display:grid!important;place-items:center!important;overflow:hidden!important;background:transparent!important}
.cr-book-fallback .cr-fallback-page{position:relative!important;display:grid!important;width:100%!important;height:100%!important;place-items:center!important;overflow:hidden!important;background:#080b0e!important}
.cr-book-fallback .cr-fallback-page img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;opacity:1!important;visibility:visible!important}
.cr-page[data-load-error="true"]{display:grid!important;place-items:center!important;background:linear-gradient(145deg,#101820,#070b0f)!important}
.cr-page[data-load-error="true"]::before{position:absolute;z-index:6;inset:0;display:grid;place-items:center;padding:1rem;color:#ffabb3;font:900 .62rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;text-align:center;content:"PAGE IMAGE UNAVAILABLE"}


/* R6 FUTURE READER */
:root{
  --glass:rgba(6,18,27,.72);
  --glass-strong:rgba(5,14,22,.9);
  --glow:0 0 0 1px rgba(99,231,255,.12),0 10px 35px rgba(0,0,0,.34),0 0 28px rgba(40,204,246,.08);
}
.cr-shell{
  background:
    radial-gradient(circle at 50% 36%,rgba(29,197,238,.09),transparent 34rem),
    linear-gradient(180deg,#06121a 0%,#02070b 58%,#010407 100%);
}
.cr-shell:after{
  position:absolute;inset:0;z-index:-1;pointer-events:none;content:"";
  background:
    linear-gradient(120deg,transparent 0 46%,rgba(99,231,255,.025) 48%,transparent 50%),
    radial-gradient(circle at 18% 12%,rgba(80,229,255,.08),transparent 18rem);
  animation:cr-ambient-scan 12s linear infinite;
}
@keyframes cr-ambient-scan{0%{transform:translateX(-2%)}50%{transform:translateX(2%)}100%{transform:translateX(-2%)}}

.cr-topbar{
  position:relative;
  background:linear-gradient(180deg,rgba(3,11,18,.94),rgba(3,10,15,.76));
  border-bottom-color:rgba(110,230,255,.2);
  box-shadow:0 10px 34px rgba(0,0,0,.2);
}
.cr-topbar:after{
  position:absolute;left:0;right:0;bottom:-1px;height:1px;content:"";
  background:linear-gradient(90deg,transparent,rgba(93,230,255,.7),transparent);
  opacity:.55;
}
.cr-brand-badge{filter:drop-shadow(0 0 20px rgba(48,203,255,.22)) saturate(1.04)}

.cr-toolbar{
  position:relative;
  background:linear-gradient(180deg,rgba(5,17,25,.94),rgba(3,11,18,.86));
  border-bottom:1px solid rgba(105,228,255,.18);
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  backdrop-filter:blur(20px) saturate(1.2);
}
.cr-reader-tool-badge,.cr-control,.cr-navbtn{
  border-color:rgba(112,232,255,.25);
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.014));
  box-shadow:inset 0 1px rgba(255,255,255,.09),0 6px 20px rgba(0,0,0,.18);
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.cr-reader-tool-badge:active,.cr-control:active,.cr-navbtn:active{transform:translateY(1px) scale(.985)}
.cr-control:hover,.cr-navbtn:hover,.cr-reader-tool-badge:hover{
  border-color:rgba(112,236,255,.58);
  box-shadow:inset 0 1px rgba(255,255,255,.13),0 8px 24px rgba(0,0,0,.22),0 0 20px rgba(74,218,255,.08);
}
.cr-zoom-readout{min-width:4rem}
#zoomReadout{font-weight:950;letter-spacing:.08em}
#enhanceBtn{position:relative;overflow:hidden}
#enhanceBtn:after{
  position:absolute;inset:0;content:"";pointer-events:none;
  background:linear-gradient(110deg,transparent 10%,rgba(255,255,255,.12) 48%,transparent 58%);
  transform:translateX(-140%);
  transition:transform .5s ease;
}
#enhanceBtn:hover:after{transform:translateX(140%)}

.cr-stage{
  position:relative;
  background:
    radial-gradient(ellipse at 50% 56%,rgba(47,198,232,.08),transparent 52%),
    linear-gradient(180deg,rgba(2,8,12,.78),rgba(1,5,8,.96));
}
.cr-grid{opacity:.7}
.cr-stage:before{
  position:absolute;inset:.5rem;pointer-events:none;content:"";z-index:1;border-radius:1rem;
  border:1px solid rgba(109,231,255,.055);
  box-shadow:inset 0 0 60px rgba(47,213,248,.025);
}
.cr-book-transform{
  width:var(--fit-w,min(94vw,760px));
  height:var(--fit-h,min(72svh,1140px));
  perspective:1800px;
  transition:width .18s ease,height .18s ease;
}
.cr-book{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  filter:drop-shadow(0 26px 38px rgba(0,0,0,.58)) drop-shadow(0 0 18px rgba(86,220,255,.05));
}
.cr-book .cr-page{
  border-radius:.15rem;
  background:#06080b;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  backface-visibility:hidden;
  transform-style:preserve-3d;
}
.cr-book .cr-page img{
  object-fit:contain!important;
  background:#050608;
}
.cr-book .cr-page:before{
  position:absolute;z-index:2;inset:0;content:"";pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.02),transparent 5%,transparent 92%,rgba(0,0,0,.23));
  mix-blend-mode:screen;
}
.cr-book .cr-page:after{
  background:linear-gradient(90deg,rgba(0,0,0,.28),transparent 9%,transparent 89%,rgba(255,255,255,.035));
  opacity:.8;
}
.cr-resolution{
  border:1px solid rgba(115,231,255,.2);
  background:rgba(3,12,18,.8);
  box-shadow:var(--glow);
  color:#9addec;
}

.cr-nav{
  margin:.38rem .55rem .45rem;
  border:1px solid rgba(113,231,255,.16);
  border-radius:1rem;
  background:linear-gradient(180deg,rgba(6,18,27,.88),rgba(2,9,14,.92));
  box-shadow:var(--glow);
}
.cr-navbtn{width:3rem;height:3rem;border-radius:.9rem}
.cr-page-line{color:#93b3c1}
#pageScrubber{
  appearance:none;-webkit-appearance:none;height:.32rem;border-radius:999px;background:rgba(116,232,255,.11);accent-color:var(--cyan);
}
#pageScrubber::-webkit-slider-thumb{
  appearance:none;-webkit-appearance:none;width:1rem;height:1rem;border-radius:50%;
  background:#dffcff;border:2px solid #65e8ff;box-shadow:0 0 14px rgba(99,231,255,.55);
}
.cr-footer{
  border-top:0;
  background:transparent;
  color:#678795;
}

.cr-shell[data-view="reader"] .cr-empty{display:none!important}
.cr-shell[data-view="reader"] .cr-stage{isolation:isolate}
.cr-shell[data-view="reader"] .cr-topbar,
.cr-shell[data-view="reader"] .cr-toolbar{transition:min-height .2s ease,padding .2s ease}

.cr-turn-in-next{transform-origin:left center;animation:cr-turn-next .42s cubic-bezier(.18,.72,.18,1)}
.cr-turn-in-prev{transform-origin:right center;animation:cr-turn-prev .42s cubic-bezier(.18,.72,.18,1)}
@keyframes cr-turn-next{
  from{transform:perspective(1200px) rotateY(-26deg) scale(.985);filter:brightness(.72);opacity:.72}
  to{transform:perspective(1200px) rotateY(0) scale(1);filter:brightness(1);opacity:1}
}
@keyframes cr-turn-prev{
  from{transform:perspective(1200px) rotateY(26deg) scale(.985);filter:brightness(.72);opacity:.72}
  to{transform:perspective(1200px) rotateY(0) scale(1);filter:brightness(1);opacity:1}
}

@media(max-width:720px){
  .cr-shell[data-view="reader"] .cr-topbar{
    min-height:3.2rem;
    padding:max(.28rem,env(safe-area-inset-top)) .55rem .25rem;
  }
  .cr-shell[data-view="reader"] .cr-brand-badge{width:10.6rem;max-height:2.8rem}
  .cr-shell[data-view="reader"] .cr-toolbar{
    grid-template-columns:minmax(6.7rem,1fr) auto auto;
    padding:.32rem .42rem;
    gap:.3rem;
  }
  .cr-shell[data-view="reader"] .cr-reader-tool-badge{min-height:2.35rem;padding:.32rem .4rem}
  .cr-shell[data-view="reader"] .cr-reader-tool small,
  .cr-shell[data-view="reader"] .cr-reader-instructions{display:none}
  .cr-shell[data-view="reader"] .cr-reader-tool-badge span{font-size:.34rem}
  .cr-shell[data-view="reader"] .cr-reader-tool-badge strong{font-size:.46rem}
  .cr-shell[data-view="reader"] .cr-reader-tool-badge b{font-size:.36rem}
  .cr-shell[data-view="reader"] .cr-control{min-height:2.35rem;padding:.38rem .48rem;border-radius:.66rem}
  .cr-shell[data-view="reader"] .cr-control.cr-square{width:2.3rem}
  .cr-shell[data-view="reader"] .cr-zoom-readout{min-width:3.25rem}
  .cr-stage{padding:.35rem}
  .cr-resolution{right:.45rem;bottom:.45rem;font-size:.46rem}
  .cr-nav{margin:.28rem .42rem .35rem;padding:.4rem .45rem;gap:.45rem}
  .cr-navbtn{width:2.65rem;height:2.65rem}
  .cr-footer{padding:.18rem .5rem calc(var(--safe-bottom) + .12rem);font-size:.42rem}
}

@media(max-width:430px){
  .cr-shell[data-view="reader"] .cr-toolbar{
    grid-template-columns:minmax(6.3rem,1fr) auto auto;
  }
  .cr-shell[data-view="reader"] #enhanceBtn span:last-child{font-size:0}
  .cr-shell[data-view="reader"] #enhanceBtn span:last-child:after{content:"4K";font-size:.48rem}
  .cr-shell[data-view="reader"] .cr-reader-tool-badge b{display:none}
  .cr-shell[data-view="reader"] .cr-reader-tool-badge{justify-content:center}
  .cr-shell[data-view="reader"] .cr-reader-tool-badge span{display:none}
  .cr-shell[data-view="reader"] .cr-reader-tool-badge strong{font-size:.48rem}
  .cr-shell[data-view="reader"] .cr-nav{border-radius:.85rem}
}

@media(prefers-reduced-motion:reduce){
  .cr-shell:after,.cr-turn-in-next,.cr-turn-in-prev{animation:none!important}
}


/* R7 PWA INSTALL */
.cr-reader-actions{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.cr-reader-actions[hidden]{display:none!important}
.cr-install-app,.cr-install-secondary{
  appearance:none;border:1px solid rgba(108,236,255,.45);border-radius:.65rem;
  background:linear-gradient(135deg,rgba(32,172,210,.18),rgba(88,74,203,.12));
  color:#dffbff;box-shadow:inset 0 1px rgba(255,255,255,.1),0 0 18px rgba(70,217,255,.08);
  font:900 .46rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.075em;
  min-height:1.75rem;padding:.35rem .55rem;
}
.cr-install-app:disabled,.cr-install-secondary:disabled{opacity:.48;cursor:default}
.cr-install-app:not(:disabled):active,.cr-install-secondary:not(:disabled):active{transform:translateY(1px)}
.cr-instructions-actions{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-top:1.1rem}
.cr-instructions-actions .cr-instructions-open{margin-top:0}
.cr-install-secondary{min-height:3rem;border-radius:.8rem;font-size:.62rem}
.cr-install-dialog{width:min(92vw,34rem)}
@media(max-width:720px){
  .cr-shell:not([data-view="reader"]) .cr-reader-actions{gap:.35rem}
  .cr-reader-actions{flex-wrap:nowrap}
  .cr-install-app,.cr-reader-instructions{font-size:.38rem;white-space:nowrap}
}
@media(max-width:430px){
  .cr-instructions-actions{grid-template-columns:1fr}
}

/* R9 // DEEP CIRCUIT SPACE + CINEMATIC PAGE PHYSICS */
.cr-stage{
  overflow:hidden;
  isolation:isolate;
  perspective:2400px;
  --turn-light-x:50%;
  --turn-light-y:50%;
  --turn-progress:0;
  background:
    radial-gradient(ellipse at 50% 45%,rgba(67,220,255,.115),transparent 22rem),
    radial-gradient(circle at 14% 16%,rgba(39,100,255,.085),transparent 19rem),
    radial-gradient(circle at 88% 18%,rgba(255,49,91,.05),transparent 17rem),
    linear-gradient(180deg,#06141d 0%,#02080d 48%,#010306 100%);
}

/* A huge circuitry plane sitting far behind the floating comic. */
.cr-stage>.cr-grid{
  z-index:0;
  inset:-36% -24% -12%;
  opacity:.6;
  transform-origin:center 84%;
  transform:perspective(1550px) rotateX(69deg) translateY(11%) scale(1.38);
  background:
    radial-gradient(circle at 12px 12px,rgba(118,240,255,.34) 0 1.2px,transparent 1.9px) 0 0/94px 94px,
    linear-gradient(rgba(91,226,255,.075) 1px,transparent 1px) 0 0/47px 47px,
    linear-gradient(90deg,rgba(91,226,255,.075) 1px,transparent 1px) 0 0/47px 47px,
    repeating-linear-gradient(90deg,
      transparent 0 43px,
      rgba(72,218,255,.115) 43px 45px,
      transparent 45px 94px,
      rgba(72,218,255,.045) 94px 95px,
      transparent 95px 188px),
    repeating-linear-gradient(0deg,
      transparent 0 43px,
      rgba(72,218,255,.095) 43px 45px,
      transparent 45px 94px,
      rgba(72,218,255,.04) 94px 95px,
      transparent 95px 188px);
  filter:drop-shadow(0 0 18px rgba(63,218,255,.11));
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.7) 18%,black 45%,rgba(0,0,0,.82) 78%,transparent 100%);
  animation:cr-circuit-drift 20s linear infinite;
}
.cr-stage>.cr-grid::before,
.cr-stage>.cr-grid::after{
  position:absolute;
  inset:0;
  content:"";
  pointer-events:none;
}
.cr-stage>.cr-grid::before{
  background:
    linear-gradient(90deg,
      transparent 0 18%,rgba(108,237,255,.19) 18% 18.25%,transparent 18.25% 43%,
      rgba(108,237,255,.12) 43% 43.18%,transparent 43.18% 77%,
      rgba(108,237,255,.16) 77% 77.22%,transparent 77.22%),
    linear-gradient(0deg,
      transparent 0 22%,rgba(108,237,255,.16) 22% 22.22%,transparent 22.22% 57%,
      rgba(108,237,255,.105) 57% 57.18%,transparent 57.18% 83%,
      rgba(108,237,255,.14) 83% 83.18%,transparent 83.18%);
  opacity:.7;
}
.cr-stage>.cr-grid::after{
  background:
    radial-gradient(circle at 18% 65%,rgba(156,250,255,.8) 0 2px,rgba(78,218,255,.22) 3px 7px,transparent 12px),
    radial-gradient(circle at 64% 37%,rgba(156,250,255,.68) 0 2px,rgba(78,218,255,.2) 3px 7px,transparent 12px),
    radial-gradient(circle at 83% 72%,rgba(156,250,255,.58) 0 2px,rgba(78,218,255,.18) 3px 7px,transparent 12px);
  animation:cr-node-pulse 5s ease-in-out infinite;
}
@keyframes cr-circuit-drift{
  from{background-position:0 0,0 0,0 0,0 0,0 0}
  to{background-position:94px 47px,47px 47px,47px 47px,188px 94px,94px 188px}
}
@keyframes cr-node-pulse{
  0%,100%{opacity:.4;filter:brightness(.9)}
  50%{opacity:.94;filter:brightness(1.35)}
}

/* Atmospheric depth and a live light source that follows a dragged page edge. */
.cr-stage::before{
  inset:0;
  z-index:1;
  border:0;
  border-radius:0;
  box-shadow:
    inset 0 0 130px rgba(0,0,0,.64),
    inset 0 -110px 150px rgba(0,0,0,.6);
  background:
    radial-gradient(circle at 22% 26%,rgba(122,241,255,.07) 0 1px,transparent 2px),
    radial-gradient(circle at 73% 19%,rgba(122,241,255,.055) 0 1px,transparent 2px),
    radial-gradient(circle at 84% 68%,rgba(86,177,255,.05) 0 1px,transparent 2px);
  background-size:180px 180px,250px 250px,310px 310px;
}
.cr-stage::after{
  inset:0;
  z-index:7;
  height:auto;
  content:"";
  pointer-events:none;
  background:
    radial-gradient(circle at var(--turn-light-x) var(--turn-light-y),
      rgba(236,255,255,calc(.05 + var(--turn-progress) * .28)) 0%,
      rgba(109,238,255,calc(.04 + var(--turn-progress) * .18)) 8%,
      rgba(52,142,255,calc(.02 + var(--turn-progress) * .08)) 20%,
      transparent 39%),
    radial-gradient(ellipse at 50% 54%,transparent 47%,rgba(0,0,0,.35) 100%);
  filter:none;
}

/* The comic is suspended above the circuit field, not sitting on it. */
.cr-book-transform{
  z-index:4;
  perspective:2400px;
  transform-style:preserve-3d;
  transform:
    translate(-50%,-50%)
    translate3d(var(--pan-x,0px),var(--pan-y,0px),0)
    scale(var(--book-zoom,1))
    rotateY(var(--turn-lean,0deg));
  filter:
    drop-shadow(0 48px 58px rgba(0,0,0,.72))
    drop-shadow(0 0 31px rgba(82,226,255,.09));
  transition:width .18s ease,height .18s ease,filter .18s ease;
}
.cr-book-transform::before{
  position:absolute;
  z-index:-1;
  left:5%;
  right:5%;
  bottom:-7%;
  height:18%;
  content:"";
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(82,229,255,.2),rgba(37,117,181,.08) 38%,transparent 72%);
  filter:blur(25px);
  opacity:.67;
  animation:cr-float-halo 5.4s ease-in-out infinite;
}
.cr-book-transform::after{
  position:absolute;
  z-index:25;
  inset:-7%;
  content:"";
  pointer-events:none;
  border-radius:1rem;
  opacity:0;
  mix-blend-mode:screen;
  background:
    linear-gradient(102deg,
      transparent 7%,
      rgba(255,255,255,.018) 23%,
      rgba(142,245,255,.2) 36%,
      rgba(255,255,255,.52) 45%,
      rgba(98,230,255,.2) 53%,
      transparent 68%);
  filter:blur(2px);
}
@keyframes cr-float-halo{
  0%,100%{transform:scaleX(.94);opacity:.48}
  50%{transform:scaleX(1.06);opacity:.82}
}

.cr-book{
  transform-style:preserve-3d;
  isolation:isolate;
}
.cr-book .stf__parent,
.cr-book .stf__wrapper,
.cr-book .stf__block,
.cr-book .stf__item{transform-style:preserve-3d}
.cr-book .stf__item{backface-visibility:hidden}
.cr-book .cr-page{
  transform-style:preserve-3d;
  backface-visibility:hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    inset 10px 0 22px rgba(255,255,255,.018),
    inset -17px 0 30px rgba(0,0,0,.2);
}
.cr-book .cr-page::before{
  position:absolute;
  inset:0;
  z-index:5;
  content:"";
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.055),transparent 5%,transparent 87%,rgba(0,0,0,.31)),
    linear-gradient(180deg,rgba(255,255,255,.02),transparent 18%);
  opacity:.72;
}
.cr-book .cr-page::after{
  z-index:6;
  opacity:.7;
  background:
    radial-gradient(ellipse at 50% 48%,rgba(255,255,255,.03),transparent 46%),
    linear-gradient(90deg,rgba(0,0,0,.36),transparent 9%,transparent 89%,rgba(255,255,255,.05));
}

/* Dramatic turn lighting layered over PageFlip's actual curl/shadow physics. */
.cr-book.cr-turn-active{
  filter:
    drop-shadow(0 39px 52px rgba(0,0,0,.75))
    drop-shadow(0 0 29px rgba(102,232,255,.15));
}
.cr-book.cr-turn-active .cr-page.cr-active-turn::before{
  opacity:1;
  background:
    linear-gradient(105deg,
      rgba(0,0,0,.31) 0%,
      transparent 15%,
      rgba(97,226,255,.09) 28%,
      rgba(241,255,255,.54) 42%,
      rgba(108,232,255,.22) 50%,
      transparent 61%,
      rgba(0,0,0,.3) 100%);
  mix-blend-mode:screen;
  animation:cr-page-specular .88s cubic-bezier(.18,.72,.16,1);
}
@keyframes cr-page-specular{
  0%{background-position:-34% 0;filter:brightness(.92)}
  42%{filter:brightness(1.14)}
  100%{background-position:36% 0;filter:brightness(1)}
}

/* A volumetric ribbon sweeps across the curl as the page turns. */
.cr-book-turn-flash{
  position:absolute;
  z-index:35;
  inset:-8%;
  pointer-events:none;
  overflow:hidden;
  mix-blend-mode:screen;
}
.cr-book-turn-flash::before{
  position:absolute;
  top:-18%;
  bottom:-18%;
  width:56%;
  content:"";
  opacity:0;
  background:
    linear-gradient(100deg,
      transparent 0%,
      rgba(81,219,255,.035) 18%,
      rgba(113,235,255,.21) 37%,
      rgba(250,255,255,.54) 48%,
      rgba(105,231,255,.22) 57%,
      transparent 79%);
  filter:blur(5px);
  animation:cr-turn-light-sweep .9s cubic-bezier(.15,.76,.16,1);
}
.cr-book-turn-flash.is-next::before{left:-45%;transform:skewX(-10deg)}
.cr-book-turn-flash.is-prev::before{right:-45%;transform:skewX(10deg);animation-name:cr-turn-light-sweep-reverse}
@keyframes cr-turn-light-sweep{
  0%{translate:0 0;opacity:0}
  17%{opacity:.72}
  48%{opacity:1}
  100%{translate:214% 0;opacity:0}
}
@keyframes cr-turn-light-sweep-reverse{
  0%{translate:0 0;opacity:0}
  17%{opacity:.72}
  48%{opacity:1}
  100%{translate:-214% 0;opacity:0}
}

/* Extra spatial response while a turn is active. */
.cr-shell.cr-turn-active .cr-stage>.cr-grid{
  filter:drop-shadow(0 0 30px rgba(75,225,255,.2)) brightness(1.1);
}
.cr-shell.cr-turn-active .cr-book-transform{
  filter:
    drop-shadow(0 58px 68px rgba(0,0,0,.76))
    drop-shadow(0 0 40px rgba(95,232,255,.17));
}
.cr-shell.cr-turn-active .cr-book-transform::before{
  opacity:1;
  background:radial-gradient(ellipse at center,rgba(112,241,255,.36),rgba(46,145,212,.14) 42%,transparent 74%);
}
.cr-shell.cr-turn-next .cr-book-transform::after,
.cr-book.cr-turning-next~.cr-book-transform::after{
  opacity:1;
}
.cr-shell.cr-turn-active .cr-book-transform::after{
  opacity:1;
  animation:cr-volume-sweep .88s cubic-bezier(.15,.76,.16,1) both;
}
.cr-shell.cr-turn-drag .cr-book-transform::after{
  animation:none;
  opacity:calc(.18 + var(--turn-progress) * .82);
  transform:translateX(calc((var(--turn-progress) - .5) * 18%));
}
@keyframes cr-volume-sweep{
  0%{transform:translateX(-91%) skewX(-7deg);opacity:0}
  20%{opacity:.3}
  50%{opacity:1}
  100%{transform:translateX(90%) skewX(-7deg);opacity:0}
}
@keyframes cr-volume-sweep-reverse{
  0%{transform:translateX(91%) skewX(7deg);opacity:0}
  20%{opacity:.3}
  50%{opacity:1}
  100%{transform:translateX(-90%) skewX(7deg);opacity:0}
}
.cr-shell.cr-turn-prev.cr-turn-active .cr-book-transform::after{animation-name:cr-volume-sweep-reverse}
.cr-shell.cr-turn-drag.cr-turn-prev .cr-book-transform::after{transform:scaleX(-1)}

@media(max-width:720px){
  .cr-stage>.cr-grid{
    inset:-44% -36% -13%;
    transform:perspective(1280px) rotateX(73deg) translateY(13%) scale(1.5);
    opacity:.5;
  }
  .cr-book-transform::before{bottom:-6%;height:15%;filter:blur(20px)}
  .cr-book-turn-flash{inset:-5%}
  .cr-book-turn-flash::before{width:63%}
}
@media(max-width:430px){
  .cr-stage>.cr-grid{opacity:.46}
  .cr-book-transform{
    filter:
      drop-shadow(0 34px 44px rgba(0,0,0,.69))
      drop-shadow(0 0 23px rgba(82,226,255,.075));
  }
}
@media(prefers-reduced-motion:reduce){
  .cr-stage>.cr-grid,
  .cr-stage>.cr-grid::after,
  .cr-book-transform::before,
  .cr-book-turn-flash::before,
  .cr-shell.cr-turn-active .cr-book-transform::after{animation:none!important}
}


/* R10 RUNTIME + TURN ENGINE */
/* Keep the futuristic depth, but move idle motion onto compositor-friendly transforms. */
.cr-stage>.cr-grid{
  filter:none!important;
  will-change:transform,opacity;
  animation:cr-circuit-float 18s ease-in-out infinite!important;
}
@keyframes cr-circuit-float{
  0%,100%{
    transform:perspective(1550px) rotateX(69deg) translate3d(-.7%,11%,0) scale(1.38);
    opacity:.54;
  }
  50%{
    transform:perspective(1550px) rotateX(69deg) translate3d(.7%,10.2%,0) scale(1.39);
    opacity:.63;
  }
}
.cr-stage>.cr-grid::after{
  filter:none!important;
  animation:cr-node-fade 4.8s ease-in-out infinite!important;
}
@keyframes cr-node-fade{
  0%,100%{opacity:.38}
  50%{opacity:.88}
}

/* The floating comic uses transform + box-shadow instead of animating large filters every frame. */
.cr-book-transform{
  filter:none!important;
  will-change:transform;
  transform:
    translate(-50%,-50%)
    translate3d(var(--pan-x,0px),var(--pan-y,0px),var(--turn-depth,0px))
    scale(var(--book-zoom,1))
    rotateY(var(--turn-lean,0deg))!important;
}
.cr-book{
  border-radius:.24rem;
  box-shadow:
    0 38px 66px rgba(0,0,0,.62),
    0 0 0 1px rgba(119,237,255,.035),
    0 0 30px rgba(70,216,255,.065);
  transition:box-shadow .18s ease;
}
.cr-book-transform::before{
  filter:none!important;
  opacity:.54;
  transform:scale(.92);
  animation:cr-halo-breathe 5.6s ease-in-out infinite!important;
}
@keyframes cr-halo-breathe{
  0%,100%{opacity:.44;transform:scale(.9)}
  50%{opacity:.68;transform:scale(1)}
}

.cr-book.cr-turn-active{
  filter:none!important;
  box-shadow:
    0 52px 82px rgba(0,0,0,.70),
    0 0 0 1px rgba(156,247,255,.08),
    0 0 42px rgba(75,224,255,.15);
}
.cr-shell.cr-turn-active .cr-stage>.cr-grid{
  filter:none!important;
  opacity:.72;
}
.cr-shell.cr-turn-active .cr-book-transform{
  filter:none!important;
}
.cr-shell.cr-turn-active .cr-book-transform::before{
  filter:none!important;
  opacity:.9;
}

/* The moving page gets a sharper illuminated fold edge without fighting PageFlip's transform. */
.cr-book.cr-turn-active .cr-page.cr-active-turn{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.055),
    inset -18px 0 24px rgba(0,0,0,.18),
    0 0 24px rgba(99,232,255,.12);
}
.cr-book.cr-turn-active .cr-page.cr-active-turn::before{
  filter:none!important;
  background:
    linear-gradient(103deg,
      rgba(0,0,0,.28) 0%,
      transparent 18%,
      rgba(76,211,255,.075) 31%,
      rgba(242,255,255,.57) 43%,
      rgba(118,238,255,.27) 49%,
      transparent 61%,
      rgba(0,0,0,.28) 100%);
  animation:cr-fast-specular .7s cubic-bezier(.16,.78,.18,1) both!important;
}
.cr-book.cr-turn-active .cr-page.cr-active-turn::after{
  opacity:1;
  background:
    linear-gradient(90deg,
      rgba(1,5,8,.40),
      transparent 7%,
      transparent 86%,
      rgba(117,237,255,.18) 94%,
      rgba(242,255,255,.38) 98%,
      rgba(0,0,0,.32) 100%);
}
@keyframes cr-fast-specular{
  0%{opacity:.18;background-position:-48% 0}
  36%{opacity:1}
  100%{opacity:.36;background-position:52% 0}
}

/* One short volumetric ribbon. More visible, less expensive than stacked blurred effects. */
.cr-book-turn-flash::before{
  filter:blur(2px)!important;
  animation-duration:.72s!important;
  background:
    linear-gradient(101deg,
      transparent 0%,
      rgba(82,222,255,.02) 16%,
      rgba(119,239,255,.24) 35%,
      rgba(249,255,255,.66) 48%,
      rgba(111,234,255,.27) 58%,
      transparent 79%)!important;
}
.cr-shell.cr-turn-active .cr-book-transform::after{
  animation-duration:.72s!important;
}
.cr-shell.cr-turn-drag .cr-book-transform::after{
  opacity:calc(.12 + var(--turn-progress) * .88)!important;
}

/* Feed the live edge light into the book itself during a finger drag. */
.cr-shell.cr-turn-drag .cr-book{
  box-shadow:
    0 48px 80px rgba(0,0,0,.68),
    0 0 0 1px rgba(152,247,255,.09),
    0 0 calc(16px + 22px * var(--turn-progress)) rgba(88,229,255,.18);
}
.cr-shell.cr-turn-drag .cr-stage::after{
  opacity:calc(.35 + var(--turn-progress) * .65);
}

/* Reduce paint cost on phones without flattening the environment. */
@media(max-width:720px){
  .cr-stage>.cr-grid{
    animation-duration:22s!important;
    filter:none!important;
  }
  .cr-book{
    box-shadow:
      0 28px 52px rgba(0,0,0,.58),
      0 0 0 1px rgba(119,237,255,.035),
      0 0 21px rgba(70,216,255,.05);
  }
  .cr-book-turn-flash::before{filter:blur(1.25px)!important}
}


/* R11 GALLERY-STYLE PAGE LOAD */
/* Adapted from Prime Gallery's static-image bit-scramble loader.
   It only appears while the actual comic page image is loading/decoding. */
.cr-page{position:relative}
.cr-page-load-scramble{
  position:absolute;
  inset:0;
  z-index:18;
  display:block;
  overflow:hidden;
  pointer-events:none;
  border-radius:inherit;
  opacity:0;
  mix-blend-mode:screen;
  background:
    repeating-linear-gradient(0deg,rgba(125,238,255,.055) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(156,122,255,.04) 0 1px,transparent 1px 5px),
    radial-gradient(circle at 50% 50%,rgba(98,232,255,.05),transparent 66%);
  transition:opacity .12s linear;
  contain:paint;
}
.cr-page-load-scramble::before,
.cr-page-load-scramble::after{
  content:"";
  position:absolute;
  inset:-5%;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(104,234,255,.34) 0 3px,transparent 3px 11px),
    repeating-linear-gradient(0deg,rgba(155,121,255,.24) 0 2px,transparent 2px 8px),
    linear-gradient(110deg,transparent 18%,rgba(114,239,190,.18) 42%,transparent 65%);
  background-size:37px 100%,100% 29px,150% 100%;
  -webkit-mask-image:repeating-linear-gradient(0deg,#000 0 5px,transparent 5px 10px);
  mask-image:repeating-linear-gradient(0deg,#000 0 5px,transparent 5px 10px);
  will-change:transform,background-position,opacity;
}
.cr-page-load-scramble::after{
  inset:-8%;
  opacity:.58;
  transform:scaleX(-1);
  background-size:23px 100%,100% 41px,170% 100%;
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 15px);
  mask-image:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 15px);
}
.cr-page-load-scramble>i{
  position:absolute;
  display:block;
  left:-6%;
  right:-6%;
  pointer-events:none;
  will-change:transform,opacity;
}
.cr-page-load-scramble>i:nth-child(1){
  top:11%;height:17%;
  background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(114,241,255,.58) 5px 7px,transparent 7px 17px);
}
.cr-page-load-scramble>i:nth-child(2){
  top:43%;height:14%;
  background:repeating-linear-gradient(90deg,rgba(180,121,255,.42) 0 2px,transparent 2px 13px,rgba(105,236,255,.36) 13px 15px,transparent 15px 26px);
}
.cr-page-load-scramble>i:nth-child(3){
  bottom:12%;height:13%;
  background:repeating-linear-gradient(90deg,transparent 0 3px,rgba(121,255,219,.40) 3px 5px,transparent 5px 11px);
}
.cr-page-load-scramble>b{
  position:absolute;
  right:.7rem;
  bottom:.62rem;
  z-index:4;
  color:rgba(211,251,255,.82);
  font:900 .42rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.12em;
  text-shadow:0 0 12px rgba(97,232,255,.38);
}

.cr-page[data-page-load="idle"]>img{opacity:0}
.cr-page[data-page-load="loading"]>img{
  opacity:.20;
  filter:saturate(.58) contrast(1.22) brightness(.72);
}
.cr-page[data-page-load="loading"]>.cr-page-load-scramble{
  opacity:.94;
}
.cr-page[data-page-load="loading"]>.cr-page-load-scramble::before{
  animation:crPageScrambleA .46s steps(7,end) infinite;
}
.cr-page[data-page-load="loading"]>.cr-page-load-scramble::after{
  animation:crPageScrambleB .61s steps(8,end) infinite;
}
.cr-page[data-page-load="loading"]>.cr-page-load-scramble>i:nth-child(1){
  animation:crPageSliceA .20s steps(5,end) infinite;
}
.cr-page[data-page-load="loading"]>.cr-page-load-scramble>i:nth-child(2){
  animation:crPageSliceB .25s steps(7,end) infinite;
}
.cr-page[data-page-load="loading"]>.cr-page-load-scramble>i:nth-child(3){
  animation:crPageSliceC .29s steps(6,end) infinite;
}

.cr-page[data-page-load="resolving"]>img{
  opacity:1;
  filter:none;
  transition:opacity .18s ease-out,filter .22s ease-out;
}
.cr-page[data-page-load="resolving"]>.cr-page-load-scramble{
  opacity:0;
  animation:crPageResolve .22s steps(6,end) both;
}
.cr-page[data-page-load="loaded"]>img{
  opacity:1;
  filter:none;
}
.cr-page[data-page-load="loaded"]>.cr-page-load-scramble{
  opacity:0;
  animation:none;
}
.cr-page[data-page-load="error"]>.cr-page-load-scramble{
  opacity:.18;
  animation:none;
}

@keyframes crPageScrambleA{
  0%{transform:translate3d(-7px,-2px,0);background-position:0 0,0 0,-35% 0}
  14%{transform:translate3d(5px,3px,0);background-position:19px 0,0 9px,-12% 0}
  29%{transform:translate3d(-3px,1px,0);background-position:-13px 0,0 -7px,18% 0}
  43%{transform:translate3d(8px,-4px,0);background-position:31px 0,0 15px,44% 0}
  57%{transform:translate3d(-5px,4px,0);background-position:-24px 0,0 -12px,71% 0}
  71%{transform:translate3d(3px,-1px,0);background-position:12px 0,0 6px,96% 0}
  86%{transform:translate3d(-8px,2px,0);background-position:-34px 0,0 18px,122% 0}
  100%{transform:translate3d(2px,0,0);background-position:5px 0,0 -4px,150% 0}
}
@keyframes crPageScrambleB{
  0%{transform:translate3d(4px,3px,0) scaleX(-1);background-position:0 0,0 0,120% 0}
  25%{transform:translate3d(-6px,-2px,0) scaleX(-1);background-position:17px 0,0 -11px,80% 0}
  50%{transform:translate3d(7px,1px,0) scaleX(-1);background-position:-21px 0,0 14px,38% 0}
  75%{transform:translate3d(-2px,4px,0) scaleX(-1);background-position:29px 0,0 -6px,-8% 0}
  100%{transform:translate3d(5px,-3px,0) scaleX(-1);background-position:-9px 0,0 10px,-45% 0}
}
@keyframes crPageSliceA{0%,100%{transform:translate3d(-2.1%,0,0);opacity:.55}50%{transform:translate3d(2.7%,2px,0);opacity:1}}
@keyframes crPageSliceB{0%,100%{transform:translate3d(2.4%,0,0);opacity:.72}42%{transform:translate3d(-3.1%,-2px,0);opacity:1}}
@keyframes crPageSliceC{0%,100%{transform:translate3d(-1.6%,1px,0);opacity:.60}56%{transform:translate3d(3.5%,-1px,0);opacity:.94}}
@keyframes crPageResolve{
  0%{opacity:.90;transform:scale(1.003)}
  45%{opacity:.42;transform:translate3d(-.35%,0,0)}
  100%{opacity:0;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .cr-page-load-scramble,
  .cr-page-load-scramble::before,
  .cr-page-load-scramble::after,
  .cr-page-load-scramble>i{
    animation:none!important;
    transition:none!important;
  }
  .cr-page[data-page-load="loading"]>.cr-page-load-scramble{opacity:.32}
}


/* R12 LIVE SWIPE */
.cr-stage{touch-action:none}
.cr-swipe-underlay{
  position:absolute;
  left:50%;
  top:50%;
  z-index:0;
  width:var(--fit-w,min(94vw,760px));
  height:var(--fit-h,min(72svh,1140px));
  transform:translate(-50%,-50%) translateZ(-12px);
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:.2rem;
  background:#05070a;
  box-shadow:0 28px 56px rgba(0,0,0,.52),0 0 24px rgba(79,221,255,.05);
  opacity:clamp(.38,var(--swipe-progress,0),1);
  pointer-events:none;
}
.cr-swipe-underlay img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#05070a;
  filter:brightness(.92);
}

.cr-live-swipe-page{
  position:relative!important;
  z-index:24!important;
  transform-origin:center center!important;
  transform:
    perspective(1700px)
    translate3d(var(--swipe-x,0px),0,var(--swipe-lift,0px))
    rotateY(var(--swipe-angle,0deg))!important;
  transition:none!important;
  will-change:transform,filter;
  backface-visibility:hidden;
}
.cr-live-swipe-next{transform-origin:left center!important}
.cr-live-swipe-prev{transform-origin:right center!important}

.cr-live-swipe-page::before{
  opacity:1!important;
  background:
    linear-gradient(100deg,
      rgba(0,0,0,.34) 0%,
      transparent 18%,
      rgba(114,239,255,.08) 32%,
      rgba(244,255,255,.62) 45%,
      rgba(103,234,255,.24) 51%,
      transparent 65%,
      rgba(0,0,0,.32) 100%)!important;
  background-position:calc((1 - var(--swipe-progress,0)) * -44%) 0!important;
  mix-blend-mode:screen;
}
.cr-live-swipe-page::after{
  opacity:1!important;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.34),
      transparent 7%,
      transparent 86%,
      rgba(129,239,255,.19) 94%,
      rgba(248,255,255,.42) 99%)!important;
}

.cr-live-swipe-settle{
  transition:
    transform .15s cubic-bezier(.18,.78,.2,1),
    filter .15s ease!important;
}

.cr-shell.cr-live-swipe .cr-book{
  box-shadow:
    0 48px 82px rgba(0,0,0,.70),
    0 0 0 1px rgba(150,246,255,.07),
    0 0 38px rgba(72,224,255,.18);
}
.cr-shell.cr-live-swipe .cr-stage::after{
  opacity:clamp(.35,var(--swipe-progress,0),1);
}
.cr-shell.cr-live-swipe .cr-stage>.cr-grid{
  opacity:.66;
}
.cr-shell.cr-live-swipe .cr-book-turn-flash::before{
  opacity:clamp(.18,var(--swipe-progress,0),1);
  animation:none!important;
}

/* A live fold light that tracks the finger over the book surface. */
.cr-shell.cr-live-swipe .cr-book-transform::after{
  content:"";
  position:absolute;
  inset:-8%;
  z-index:40;
  pointer-events:none;
  background:
    radial-gradient(circle at
      var(--turn-light-x,50%)
      var(--turn-light-y,50%),
      rgba(245,255,255,.46) 0,
      rgba(111,235,255,.26) 8%,
      transparent 28%);
  mix-blend-mode:screen;
  opacity:1;
}

@media(max-width:720px){
  .cr-swipe-underlay{
    width:var(--fit-w,min(94vw,760px));
    height:var(--fit-h,min(72svh,1140px));
  }
  .cr-live-swipe-page{
    will-change:transform;
  }
}
@media(prefers-reduced-motion:reduce){
  .cr-live-swipe-page,
  .cr-live-swipe-settle{transition:none!important}
}


/* R13 LIVE SHINE AUTHORITY */
/* During a finger-driven page turn, shine position is authored by JS every frame.
   No autonomous animation is allowed to fire after release. */
.cr-shell.cr-live-swipe .cr-book-turn-flash{
  inset:-5%;
  overflow:visible;
}
.cr-shell.cr-live-swipe .cr-book-turn-flash::before{
  left:var(--swipe-shine-x,-28%)!important;
  right:auto!important;
  width:46%!important;
  top:-20%!important;
  bottom:-20%!important;
  opacity:clamp(.12,var(--swipe-progress,0),1)!important;
  transform:skewX(-9deg)!important;
  animation:none!important;
  transition:none!important;
  filter:blur(1.5px)!important;
  background:
    linear-gradient(101deg,
      transparent 0%,
      rgba(86,222,255,.03) 14%,
      rgba(105,234,255,.22) 31%,
      rgba(248,255,255,.72) 47%,
      rgba(124,241,255,.30) 58%,
      transparent 80%)!important;
}
.cr-shell.cr-live-swipe.cr-turn-prev .cr-book-turn-flash::before{
  transform:skewX(9deg)!important;
}

/* The page-face highlight tracks the same live coordinate instead of running
   its own delayed keyframe. */
.cr-shell.cr-live-swipe .cr-live-swipe-page::before{
  background:
    linear-gradient(102deg,
      rgba(0,0,0,.34) 0%,
      transparent 18%,
      rgba(105,229,255,.07) 32%,
      rgba(247,255,255,.66) 45%,
      rgba(111,237,255,.27) 51%,
      transparent 64%,
      rgba(0,0,0,.31) 100%)!important;
  background-size:185% 100%!important;
  background-position:var(--swipe-shine-x,-28%) 0!important;
  animation:none!important;
  transition:none!important;
}

/* Finger-local bloom gets stronger as the fold deepens. */
.cr-shell.cr-live-swipe .cr-book-transform::after{
  opacity:clamp(.15,var(--swipe-progress,0),1)!important;
  transition:none!important;
}

.cr-shell.cr-live-swipe .cr-live-swipe-settle::before{
  transition:opacity .14s linear,background-position .14s linear!important;
}


/* R14 ISOLATED LIVE TURN */
/* The live swipe now renders in its own overlay layer. PageFlip's managed DOM
   stays untouched until commit, eliminating the double-state/flicker bottleneck. */
.cr-shell.cr-live-swipe .cr-book{
  position:relative;
  z-index:1;
}

/* Next page is only a clean reveal layer. No shine, bloom, or turn lighting. */
.cr-swipe-underlay{
  z-index:30!important;
  inset:0!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
  opacity:1!important;
  border-radius:.2rem;
  background:#05070a;
  box-shadow:none!important;
  filter:none!important;
}
.cr-swipe-underlay::before,
.cr-swipe-underlay::after{
  content:none!important;
}
.cr-swipe-underlay>img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#05070a;
  opacity:1;
  filter:none!important;
}

/* Reuse the gallery-style loader only while the revealed target image is
   genuinely loading. It is not a turn effect. */
.cr-swipe-underlay>.cr-page-load-scramble{
  z-index:2;
}
.cr-swipe-underlay[data-page-load="loading"]>img{
  opacity:.18;
  filter:saturate(.58) contrast(1.2) brightness(.74)!important;
}
.cr-swipe-underlay[data-page-load="loading"]>.cr-page-load-scramble{
  opacity:.92;
}
.cr-swipe-underlay[data-page-load="loading"]>.cr-page-load-scramble::before{
  animation:crPageScrambleA .46s steps(7,end) infinite;
}
.cr-swipe-underlay[data-page-load="loading"]>.cr-page-load-scramble::after{
  animation:crPageScrambleB .61s steps(8,end) infinite;
}
.cr-swipe-underlay[data-page-load="resolving"]>img,
.cr-swipe-underlay[data-page-load="loaded"]>img{
  opacity:1;
  filter:none!important;
}
.cr-swipe-underlay[data-page-load="resolving"]>.cr-page-load-scramble,
.cr-swipe-underlay[data-page-load="loaded"]>.cr-page-load-scramble{
  opacity:0;
  animation:none!important;
}

/* Only this cloned current-page layer turns and receives the light treatment. */
.cr-swipe-turn-page{
  position:absolute;
  inset:0;
  z-index:31;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:.2rem;
  background:#05070a;
  transform:
    perspective(1700px)
    translate3d(var(--swipe-x,0px),0,var(--swipe-lift,0px))
    rotateY(var(--swipe-angle,0deg));
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform;
  pointer-events:none;
}
.cr-swipe-turn-page.is-next{transform-origin:left center}
.cr-swipe-turn-page.is-prev{transform-origin:right center}
.cr-swipe-turn-page>img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#05070a;
  backface-visibility:hidden;
}

/* Fold shadow belongs exclusively to the page in motion. */
.cr-swipe-turn-page::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  opacity:calc(.20 + var(--swipe-progress,0) * .80);
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.34) 0%,
      transparent 8%,
      transparent 82%,
      rgba(0,0,0,.28) 92%,
      rgba(0,0,0,.52) 100%);
}

/* Live specular shine. It is physically attached to the turning page only. */
.cr-swipe-turn-page::before{
  content:"";
  position:absolute;
  top:-12%;
  bottom:-12%;
  left:var(--swipe-shine-x,-28%);
  z-index:4;
  width:46%;
  pointer-events:none;
  opacity:clamp(.10,var(--swipe-progress,0),1);
  transform:skewX(-9deg);
  mix-blend-mode:screen;
  background:
    linear-gradient(101deg,
      transparent 0%,
      rgba(86,222,255,.03) 14%,
      rgba(105,234,255,.22) 31%,
      rgba(248,255,255,.74) 47%,
      rgba(124,241,255,.30) 58%,
      transparent 80%);
}
.cr-swipe-turn-page.is-prev::before{transform:skewX(9deg)}

/* Disable the old book-wide shine during center-page swipe. It was lighting
   the newly revealed page and was the source of the visual overlap. */
.cr-shell.cr-live-swipe .cr-book-turn-flash,
.cr-shell.cr-live-swipe .cr-book-transform::after{
  display:none!important;
}

/* No whole-book glow mutation during live swipe. The depth comes from the
   moving sheet itself, so the next page remains visually untouched. */
.cr-shell.cr-live-swipe .cr-book{
  box-shadow:0 38px 66px rgba(0,0,0,.62),0 0 0 1px rgba(119,237,255,.035),0 0 30px rgba(70,216,255,.065)!important;
}
.cr-shell.cr-live-swipe .cr-stage::after,
.cr-shell.cr-live-swipe .cr-stage>.cr-grid{
  opacity:inherit;
}

/* Commit or cancel quickly. Native PageFlip state is updated after this layer
   finishes, so there is no second visible turn. */
.cr-swipe-turn-settle{
  transition:transform .12s cubic-bezier(.18,.78,.2,1),opacity .12s linear!important;
}

/* Legacy live-swipe page styles no longer own the motion. */
.cr-live-swipe-page{
  transform:none!important;
  transition:none!important;
  filter:none!important;
}

@media(max-width:720px){
  .cr-swipe-turn-page::before{width:52%}
}
@media(prefers-reduced-motion:reduce){
  .cr-swipe-turn-settle{transition:none!important}
}


/* R15 DEVICE CHASSIS + MOBILE RUNTIME */
body{
  display:grid;
  place-items:center;
  padding:.22rem;
  background:
    radial-gradient(circle at 50% 12%,rgba(48,178,219,.07),transparent 30rem),
    #000307;
}
.cr-shell{
  position:relative;
  width:min(100%,86rem);
  height:calc(100svh - .44rem);
  margin:0 auto;
  border:1px solid rgba(137,229,249,.25);
  border-radius:1.35rem;
  background:
    linear-gradient(145deg,rgba(11,25,34,.97),rgba(1,5,9,.995) 72%);
  box-shadow:
    0 24px 70px rgba(0,0,0,.68),
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 0 0 4px rgba(0,0,0,.34),
    inset 0 0 60px rgba(43,190,226,.025);
}

/* Hardware upper rail */
.cr-topbar{
  min-height:3.25rem;
  padding:calc(var(--safe-top) + .22rem) .72rem .34rem;
  border-bottom:1px solid rgba(111,230,255,.20);
  background:
    linear-gradient(180deg,rgba(18,31,40,.98),rgba(5,13,19,.98));
  box-shadow:
    inset 0 1px rgba(255,255,255,.045),
    inset 0 -1px rgba(0,0,0,.75),
    0 7px 18px rgba(0,0,0,.24);
}
.cr-topbar::before{
  content:"CR-2100 // READER CORE";
  position:absolute;
  top:50%;
  right:3.85rem;
  transform:translateY(-28%);
  color:#63818d;
  font:900 .38rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.12em;
  pointer-events:none;
}
.cr-topbar::after{
  opacity:.72;
  background:linear-gradient(90deg,transparent 2%,rgba(89,227,255,.22) 14%,rgba(112,239,255,.8) 50%,rgba(89,227,255,.22) 86%,transparent 98%);
}
.cr-brand-badge{
  width:min(12rem,36vw);
  max-height:2.65rem;
}

/* Control deck reads as physical modules rather than website buttons. */
.cr-toolbar{
  margin:.24rem .36rem .3rem;
  padding:.34rem .4rem;
  border:1px solid rgba(115,229,250,.15);
  border-radius:.88rem;
  background:
    linear-gradient(180deg,rgba(17,31,40,.96),rgba(4,12,18,.98));
  box-shadow:
    inset 0 1px rgba(255,255,255,.05),
    inset 0 -1px rgba(0,0,0,.62),
    0 6px 18px rgba(0,0,0,.22);
}
.cr-reader-tool-badge,.cr-control{
  border-color:rgba(122,231,251,.23);
  background:
    linear-gradient(180deg,rgba(31,49,59,.94),rgba(7,16,23,.98));
  box-shadow:
    inset 0 1px rgba(255,255,255,.07),
    inset 0 -2px rgba(0,0,0,.55),
    0 3px 8px rgba(0,0,0,.26);
}
.cr-control:active,.cr-reader-tool-badge:active{
  transform:translateY(1px);
  box-shadow:inset 0 2px 7px rgba(0,0,0,.5);
}

/* Recessed display well */
.cr-stage{
  margin:0 .36rem;
  border:1px solid rgba(101,221,246,.16);
  border-radius:1rem;
  background:
    radial-gradient(ellipse at 50% 45%,rgba(48,203,236,.065),transparent 27rem),
    linear-gradient(180deg,#02080d,#010407);
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.78),
    inset 0 0 48px rgba(0,0,0,.75),
    0 0 0 1px rgba(255,255,255,.018),
    0 8px 22px rgba(0,0,0,.32);
}
.cr-stage:before{
  inset:.32rem;
  border-radius:.76rem;
  border-color:rgba(111,230,255,.075);
  box-shadow:
    inset 0 0 44px rgba(50,212,245,.024),
    0 0 0 1px rgba(0,0,0,.5);
}
.cr-resolution{
  right:.52rem;
  bottom:.52rem;
  border-radius:.62rem;
  background:rgba(4,14,20,.91);
  border-color:rgba(118,234,255,.18);
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 3px 12px rgba(0,0,0,.32);
}

/* Lower hardware deck */
.cr-nav{
  margin:.3rem .36rem .22rem;
  padding:.38rem .42rem;
  border:1px solid rgba(112,229,250,.16);
  border-radius:.9rem;
  background:
    linear-gradient(180deg,rgba(15,28,37,.96),rgba(4,12,18,.99));
  box-shadow:
    inset 0 1px rgba(255,255,255,.045),
    inset 0 -1px rgba(0,0,0,.62),
    0 6px 16px rgba(0,0,0,.25);
}
.cr-navbtn{
  border-radius:.72rem;
  background:linear-gradient(180deg,rgba(33,51,62,.95),rgba(8,17,23,.99));
  box-shadow:inset 0 1px rgba(255,255,255,.065),inset 0 -2px rgba(0,0,0,.55);
}
.cr-footer{
  margin:0 .36rem .28rem;
  padding:.28rem .5rem calc(var(--safe-bottom) + .08rem);
  border:1px solid rgba(113,225,247,.08);
  border-radius:.65rem;
  background:rgba(3,10,15,.82);
  color:#557782;
}

/* Small operational LEDs on the device rail. */
.cr-toolbar::after{
  content:"";
  position:absolute;
  right:.46rem;
  bottom:-.18rem;
  width:.28rem;
  height:.28rem;
  border-radius:50%;
  background:#65eaff;
  box-shadow:-.52rem 0 0 #183743,0 0 10px rgba(101,234,255,.75);
  pointer-events:none;
}

/* iPhone/Safari: save GPU budget for page physics, not idle decoration. */
@media(max-width:720px){
  body{padding:.12rem}
  .cr-shell{
    height:calc(100svh - .24rem);
    border-radius:1.05rem;
    box-shadow:
      0 14px 40px rgba(0,0,0,.62),
      inset 0 0 0 1px rgba(255,255,255,.03),
      inset 0 0 0 3px rgba(0,0,0,.32);
  }
  .cr-shell:after{animation:none!important;transform:none!important}
  .cr-stage>.cr-grid{
    animation:none!important;
    transform:perspective(1250px) rotateX(72deg) translateY(18%) scale(1.52)!important;
  }
  .cr-shell[data-view="reader"] .cr-book-transform,
  .cr-book-transform::before{
    animation:none!important;
  }
  .cr-topbar,.cr-toolbar,.cr-nav,.cr-resolution{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .cr-topbar{
    min-height:2.65rem;
    padding:max(.2rem,env(safe-area-inset-top)) .48rem .22rem;
  }
  .cr-topbar::before{
    right:.6rem;
    font-size:.31rem;
    letter-spacing:.09em;
  }
  .cr-brand-badge{width:8.6rem;max-height:2.05rem}
  .cr-toolbar{
    margin:.2rem .26rem .24rem;
    padding:.28rem .3rem;
    border-radius:.72rem;
  }
  .cr-stage{
    margin:0 .26rem;
    border-radius:.78rem;
  }
  .cr-nav{
    margin:.24rem .26rem .18rem;
    border-radius:.72rem;
  }
  .cr-footer{
    margin:0 .26rem .18rem;
    border-radius:.52rem;
  }
  .cr-shell[data-view="reader"] .cr-reader-tool small,
  .cr-shell[data-view="reader"] .cr-reader-actions{display:none!important}
}

/* Narrow phones: preserve a coherent instrument panel. */
@media(max-width:430px){
  .cr-topbar::before{content:"CR-2100 // ONLINE"}
  .cr-toolbar{
    grid-template-columns:minmax(5.8rem,1fr) auto auto!important;
    gap:.24rem!important;
  }
  .cr-reader-tool-badge{
    min-height:2.2rem!important;
    padding:.28rem .35rem!important;
  }
  .cr-control{
    min-height:2.2rem!important;
    padding:.32rem .42rem!important;
  }
  .cr-control.cr-square{width:2.12rem!important}
  .cr-zoom-readout{min-width:3.15rem!important}
  .cr-navbtn{width:2.5rem;height:2.5rem}
}


/* R16 SAFARI TOUCH AUTHORITY */
/* On coarse pointers the custom swipe engine owns the gesture surface.
   PageFlip remains the state/page engine, but its DOM no longer competes
   for iOS touch events. */
.cr-stage,
.cr-book-transform{
  touch-action:none!important;
  overscroll-behavior:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
@media(pointer:coarse){
  .cr-book{
    pointer-events:none!important;
  }
  .cr-swipe-turn-page,
  .cr-swipe-underlay{
    pointer-events:none!important;
  }
}

/* Make even a short Safari swipe visibly move the sheet. */
.cr-swipe-turn-page{
  transform:
    perspective(1550px)
    translate3d(var(--swipe-x,0px),0,var(--swipe-lift,0px))
    rotateY(var(--swipe-angle,0deg))!important;
  transition:none!important;
}
.cr-swipe-turn-settle{
  transition:transform .11s cubic-bezier(.16,.82,.18,1),opacity .11s linear!important;
}


/* R18 LANDSCAPE BOOK MODE */
/* Landscape becomes a dedicated reading cockpit: book first, controls second. */
@media(orientation:landscape) and (min-width:700px){
  body{
    padding:.08rem;
    background:#000205;
  }

  .cr-shell{
    grid-template-rows:minmax(0,1fr)!important;
    height:calc(100svh - .16rem);
    border-radius:.8rem;
    overflow:hidden;
  }

  /* Full-screen reading well */
  .cr-stage{
    grid-row:1!important;
    grid-column:1!important;
    height:100%!important;
    margin:.12rem!important;
    border-radius:.72rem;
    z-index:1;
  }

  /* Thin floating instrument rail */
  .cr-topbar{
    position:absolute!important;
    z-index:40;
    top:.26rem;
    left:.32rem;
    right:.32rem;
    min-height:2.35rem!important;
    height:2.35rem;
    padding:.18rem .42rem!important;
    border:1px solid rgba(113,231,253,.15);
    border-radius:.66rem;
    background:linear-gradient(180deg,rgba(12,25,34,.91),rgba(3,10,16,.88))!important;
    box-shadow:inset 0 1px rgba(255,255,255,.04),0 5px 16px rgba(0,0,0,.28)!important;
  }
  .cr-brand-badge{
    width:6.7rem!important;
    max-height:1.85rem!important;
  }
  .cr-title{
    display:grid!important;
    gap:.08rem!important;
    text-align:center;
  }
  .cr-title span{font-size:.38rem!important;letter-spacing:.14em}
  .cr-title strong{font-size:.67rem!important;letter-spacing:.13em}
  .cr-topbar::before{
    right:3.2rem!important;
    font-size:.28rem!important;
    opacity:.72;
  }
  .cr-icon{
    width:1.9rem!important;
    height:1.9rem!important;
    border-radius:.5rem!important;
    font-size:.86rem!important;
  }

  /* Only essential controls remain visible in landscape. */
  .cr-toolbar{
    position:absolute!important;
    z-index:42;
    top:2.85rem;
    left:50%;
    width:auto!important;
    min-width:0!important;
    transform:translateX(-50%);
    display:flex!important;
    grid-template-columns:none!important;
    gap:.24rem!important;
    margin:0!important;
    padding:.24rem .3rem!important;
    border-radius:.62rem!important;
    background:linear-gradient(180deg,rgba(11,24,33,.88),rgba(3,10,15,.88))!important;
    box-shadow:inset 0 1px rgba(255,255,255,.035),0 5px 14px rgba(0,0,0,.24)!important;
  }
  .cr-reader-tool{
    display:none!important;
  }
  .cr-toolgroup{gap:.22rem!important}
  .cr-control{
    min-height:1.9rem!important;
    height:1.9rem!important;
    padding:.24rem .5rem!important;
    border-radius:.5rem!important;
    font-size:.46rem!important;
  }
  .cr-control.cr-square{
    width:1.9rem!important;
    padding:0!important;
    font-size:.82rem!important;
  }
  .cr-zoom-readout{min-width:3rem!important}
  #enhanceBtn{min-width:5.3rem!important}

  /* Compact navigation floats over the lower bezel instead of consuming a row. */
  .cr-nav{
    position:absolute!important;
    z-index:42;
    left:50%;
    bottom:.34rem;
    width:min(31rem,58vw)!important;
    transform:translateX(-50%);
    margin:0!important;
    padding:.28rem .36rem!important;
    gap:.38rem!important;
    border-radius:.66rem!important;
    background:linear-gradient(180deg,rgba(11,24,33,.91),rgba(3,10,15,.92))!important;
    box-shadow:inset 0 1px rgba(255,255,255,.035),0 5px 16px rgba(0,0,0,.28)!important;
  }
  .cr-navbtn{
    width:2rem!important;
    height:2rem!important;
    border-radius:.52rem!important;
    font-size:1.1rem!important;
  }
  .cr-progress{gap:.18rem!important}
  .cr-page-line{font-size:.39rem!important}
  #pageScrubber{height:.62rem!important}

  .cr-footer{
    display:none!important;
  }

  .cr-resolution{
    right:.45rem!important;
    bottom:.4rem!important;
    padding:.3rem .45rem!important;
    font-size:.37rem!important;
    border-radius:.48rem!important;
    z-index:35!important;
  }

  /* The physical book remains centered between the upper and lower rails. */
  .cr-book-transform{
    top:50%!important;
    left:50%!important;
  }

  /* Two-page spread treatment */
  .cr-shell[data-layout="spread"] .cr-book{
    border-radius:.12rem;
    box-shadow:
      0 44px 72px rgba(0,0,0,.66),
      0 0 0 1px rgba(133,238,255,.035),
      0 0 32px rgba(73,219,255,.06);
  }
  .cr-shell[data-layout="spread"][data-book-state="open"] .cr-book::before{
    content:"";
    position:absolute;
    z-index:50;
    top:0;
    bottom:0;
    left:50%;
    width:1px;
    pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.62) 10%,rgba(255,255,255,.035) 50%,rgba(0,0,0,.62) 90%,transparent);
    box-shadow:-5px 0 12px rgba(0,0,0,.26),5px 0 12px rgba(0,0,0,.18);
  }

  /* Closed-book frame: showCover keeps only the cover sheet active.
     Give it stronger depth so it reads as a real closed object. */
  .cr-shell[data-layout="spread"][data-book-state="closed"] .cr-book{
    box-shadow:
      0 48px 78px rgba(0,0,0,.70),
      0 0 0 1px rgba(129,238,255,.045),
      7px 7px 0 rgba(9,18,24,.72),
      11px 11px 0 rgba(2,6,9,.7);
  }

  /* In landscape, custom Safari swipe operates on one physical sheet. */
  .cr-shell[data-layout="spread"][data-book-state="open"] .cr-swipe-underlay,
  .cr-shell[data-layout="spread"][data-book-state="open"] .cr-swipe-turn-page{
    width:50%!important;
    height:100%!important;
    top:0!important;
    bottom:auto!important;
  }
  .cr-shell[data-layout="spread"][data-book-state="open"] .cr-swipe-underlay.is-next,
  .cr-shell[data-layout="spread"][data-book-state="open"] .cr-swipe-turn-page.is-next{
    left:50%!important;
    right:auto!important;
    transform-origin:left center!important;
  }
  .cr-shell[data-layout="spread"][data-book-state="open"] .cr-swipe-underlay.is-prev,
  .cr-shell[data-layout="spread"][data-book-state="open"] .cr-swipe-turn-page.is-prev{
    left:0!important;
    right:auto!important;
    transform-origin:right center!important;
  }

  /* Closed cover occupies a single centered page before opening. */
  .cr-shell[data-layout="spread"][data-book-state="closed"] .cr-swipe-underlay,
  .cr-shell[data-layout="spread"][data-book-state="closed"] .cr-swipe-turn-page{
    width:50%!important;
    height:100%!important;
    left:25%!important;
    right:auto!important;
  }
}

/* Short landscape phones get an even thinner device rail. */
@media(orientation:landscape) and (min-width:700px) and (max-height:560px){
  .cr-topbar{
    top:.16rem;
    left:.22rem;
    right:.22rem;
    height:2rem!important;
    min-height:2rem!important;
    padding:.12rem .32rem!important;
  }
  .cr-brand-badge{width:5.8rem!important;max-height:1.55rem!important}
  .cr-title span{display:none!important}
  .cr-title strong{font-size:.58rem!important}
  .cr-topbar::before{display:none!important}
  .cr-toolbar{
    top:2.3rem!important;
    padding:.18rem .24rem!important;
  }
  .cr-control{
    height:1.7rem!important;
    min-height:1.7rem!important;
  }
  .cr-control.cr-square{width:1.7rem!important}
  .cr-nav{
    bottom:.2rem!important;
    width:min(28rem,56vw)!important;
    padding:.22rem .3rem!important;
  }
  .cr-navbtn{width:1.78rem!important;height:1.78rem!important}
  .cr-resolution{
    bottom:.28rem!important;
    font-size:.33rem!important;
  }
}


/* R19 TRUE SPREAD GEOMETRY */
/* Landscape uses explicit spacer sheets around the 22 real Dropbox pages:
   [blank | page 1], then true two-page spreads, then [page 22 | blank]. */
.cr-page.cr-book-spacer{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  opacity:0!important;
}
.cr-page.cr-book-spacer::before,
.cr-page.cr-book-spacer::after{
  content:none!important;
}

/* Fixed PageFlip geometry now owns the book dimensions exactly. */
.cr-shell[data-layout="spread"] .cr-book-transform{
  width:var(--fit-w)!important;
  height:var(--fit-h)!important;
}
.cr-shell[data-layout="spread"] .cr-book{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
}

/* Real open spread seam. */
@media(orientation:landscape) and (min-width:620px){
  .cr-shell[data-layout="spread"][data-book-state="open"] .cr-book::before{
    content:"";
    position:absolute;
    z-index:60;
    top:0;
    bottom:0;
    left:50%;
    width:2px;
    pointer-events:none;
    background:
      linear-gradient(180deg,
        transparent 0%,
        rgba(0,0,0,.48) 6%,
        rgba(0,0,0,.76) 48%,
        rgba(255,255,255,.04) 51%,
        rgba(0,0,0,.70) 54%,
        rgba(0,0,0,.42) 94%,
        transparent 100%);
    box-shadow:
      -5px 0 14px rgba(0,0,0,.30),
      5px 0 14px rgba(0,0,0,.22);
  }

  /* First landscape state: only page 1 is visible, on the RIGHT side. */
  .cr-shell[data-layout="spread"][data-book-state="edge"][data-edge="first"] .cr-book{
    box-shadow:
      0 42px 70px rgba(0,0,0,.64),
      0 0 0 1px rgba(122,235,255,.025),
      0 0 28px rgba(69,217,255,.045);
  }

  /* Last landscape state: 24-22.png is the final LEFT-side sheet. */
  .cr-shell[data-layout="spread"][data-book-state="edge"][data-edge="last"] .cr-book{
    box-shadow:
      0 42px 70px rgba(0,0,0,.64),
      0 0 0 1px rgba(122,235,255,.025),
      0 0 28px rgba(69,217,255,.045);
  }

  /* Swipe overlay must line up with the physical sheet that is actually moving. */
  .cr-shell[data-layout="spread"][data-book-state="open"] .cr-swipe-underlay,
  .cr-shell[data-layout="spread"][data-book-state="open"] .cr-swipe-turn-page{
    width:50%!important;
    height:100%!important;
    top:0!important;
    bottom:auto!important;
  }
  .cr-shell[data-layout="spread"][data-book-state="open"] .cr-swipe-underlay.is-next,
  .cr-shell[data-layout="spread"][data-book-state="open"] .cr-swipe-turn-page.is-next{
    left:50%!important;
  }
  .cr-shell[data-layout="spread"][data-book-state="open"] .cr-swipe-underlay.is-prev,
  .cr-shell[data-layout="spread"][data-book-state="open"] .cr-swipe-turn-page.is-prev{
    left:0!important;
  }

  /* First page turns from the right half into the first full spread. */
  .cr-shell[data-layout="spread"][data-book-state="edge"][data-edge="first"] .cr-swipe-underlay,
  .cr-shell[data-layout="spread"][data-book-state="edge"][data-edge="first"] .cr-swipe-turn-page{
    width:50%!important;
    height:100%!important;
    left:50%!important;
    top:0!important;
  }

  /* Final page lives on the left half. */
  .cr-shell[data-layout="spread"][data-book-state="edge"][data-edge="last"] .cr-swipe-underlay,
  .cr-shell[data-layout="spread"][data-book-state="edge"][data-edge="last"] .cr-swipe-turn-page{
    width:50%!important;
    height:100%!important;
    left:0!important;
    top:0!important;
  }

  /* Give the book every usable pixel between Safari chrome and our tiny controls. */
  .cr-stage{
    inset:0!important;
    width:auto!important;
    max-width:none!important;
  }
  .cr-book-transform{
    max-width:calc(100vw - 1rem)!important;
    max-height:calc(100svh - 6.2rem)!important;
  }
}

/* Retire R18's centered closed-book approximation. */
.cr-shell[data-layout="spread"][data-book-state="closed"] .cr-swipe-underlay,
.cr-shell[data-layout="spread"][data-book-state="closed"] .cr-swipe-turn-page{
  left:auto!important;
}


/* R20 MANUAL LANDSCAPE SPREAD */
/* Landscape no longer lets PageFlip decide page geometry. Each source image is
   one physical page, exactly half of the open-book width. */
.cr-manual-spread{
  position:relative!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  grid-template-rows:1fr!important;
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
  background:transparent!important;
  box-shadow:
    0 42px 72px rgba(0,0,0,.66),
    0 0 0 1px rgba(125,235,255,.035),
    0 0 28px rgba(69,217,255,.05)!important;
}
.cr-manual-spread::before{
  content:"";
  position:absolute;
  z-index:20;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.48) 7%,rgba(0,0,0,.78) 50%,rgba(255,255,255,.035) 52%,rgba(0,0,0,.64) 56%,transparent 94%);
  box-shadow:-6px 0 13px rgba(0,0,0,.28),6px 0 13px rgba(0,0,0,.20);
}
.cr-spread-sheet{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:#05070a;
}
.cr-spread-sheet.cr-spread-left{
  grid-column:1;
  transform-origin:right center;
}
.cr-spread-sheet.cr-spread-right{
  grid-column:2;
  transform-origin:left center;
}
.cr-spread-sheet.cr-spread-blank{
  background:transparent!important;
  box-shadow:none!important;
}
.cr-spread-content{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background:#05070a!important;
  overflow:hidden!important;
}
.cr-spread-content>img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#05070a!important;
}

/* Edge states: page 1 on the RIGHT, final page on the LEFT. */
.cr-shell[data-reader-mode="manual-spread"][data-edge="first"] .cr-spread-left{
  background:transparent!important;
}
.cr-shell[data-reader-mode="manual-spread"][data-edge="last"] .cr-spread-right{
  background:transparent!important;
}

/* Keep the seam only when the book is actually open. */
.cr-shell[data-reader-mode="manual-spread"][data-book-state="edge"] .cr-manual-spread::before{
  opacity:.26;
}
.cr-shell[data-reader-mode="manual-spread"][data-book-state="open"] .cr-manual-spread::before{
  opacity:1;
}

/* Full-spread preview under the single physical sheet being turned. */
.cr-swipe-spread-preview{
  position:absolute!important;
  inset:0!important;
  z-index:30!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  width:100%!important;
  height:100%!important;
  background:transparent!important;
  pointer-events:none!important;
}
.cr-swipe-spread-preview .cr-spread-sheet{
  width:100%!important;
  height:100%!important;
}
.cr-swipe-spread-preview .cr-spread-content>img{
  object-fit:contain!important;
}

/* The moving sheet is always ONE page, never the whole two-page book. */
.cr-shell[data-reader-mode="manual-spread"] .cr-swipe-turn-page{
  width:50%!important;
  height:100%!important;
  top:0!important;
  bottom:auto!important;
  z-index:31!important;
}
.cr-shell[data-reader-mode="manual-spread"] .cr-swipe-turn-page.is-next{
  left:50%!important;
  right:auto!important;
  transform-origin:left center!important;
}
.cr-shell[data-reader-mode="manual-spread"] .cr-swipe-turn-page.is-prev{
  left:0!important;
  right:auto!important;
  transform-origin:right center!important;
}
.cr-shell[data-reader-mode="manual-spread"][data-edge="first"] .cr-swipe-turn-page.is-next{
  left:50%!important;
}
.cr-shell[data-reader-mode="manual-spread"][data-edge="last"] .cr-swipe-turn-page.is-prev{
  left:0!important;
}
.cr-shell[data-reader-mode="manual-spread"] .cr-swipe-turn-page>img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#05070a!important;
}

/* Manual spread geometry wins over all older PageFlip landscape overrides. */
@media(orientation:landscape) and (min-width:620px){
  .cr-shell[data-reader-mode="manual-spread"] .cr-book-transform{
    width:var(--fit-w)!important;
    height:var(--fit-h)!important;
    max-width:calc(100vw - 1rem)!important;
    max-height:calc(100svh - 5.4rem)!important;
  }
  .cr-shell[data-reader-mode="manual-spread"] .cr-book{
    width:100%!important;
    height:100%!important;
  }
}


/* R21 A/B HEMISPHERE LAW */
/* Landscape is not a wider single page. It is two equal screen hemispheres:
   A = left half, B = right half. Each source image belongs to exactly one. */
@media(orientation:landscape), (min-aspect-ratio:11/10){
  .cr-shell[data-reader-mode="manual-spread"] .cr-book-transform{
    width:var(--fit-w)!important;
    height:var(--fit-h)!important;
    max-width:none!important;
    max-height:none!important;
  }

  .cr-shell[data-reader-mode="manual-spread"] .cr-manual-spread,
  .cr-shell[data-reader-mode="manual-spread"] .cr-swipe-spread-preview{
    display:grid!important;
    grid-template-columns:50% 50%!important;
    grid-template-rows:100%!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    overflow:visible!important;
  }

  /* Page A is always the LEFT hemisphere. */
  .cr-shell[data-reader-mode="manual-spread"] .cr-spread-sheet[data-page-plane="A"]{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    justify-self:stretch!important;
    align-self:stretch!important;
  }

  /* Page B is always the RIGHT hemisphere. */
  .cr-shell[data-reader-mode="manual-spread"] .cr-spread-sheet[data-page-plane="B"]{
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    justify-self:stretch!important;
    align-self:stretch!important;
  }

  /* Every comic file is one portrait page. It is contained INSIDE its
     hemisphere and can never bleed into the other half. */
  .cr-shell[data-reader-mode="manual-spread"] .cr-spread-content{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    overflow:hidden!important;
    display:grid!important;
    place-items:center!important;
    background:transparent!important;
  }
  .cr-shell[data-reader-mode="manual-spread"] .cr-spread-content>img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:0!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    transform:none!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
  }

  /* Page 1 / cover lives only on B. A is truly empty. */
  .cr-shell[data-reader-mode="manual-spread"][data-edge="first"] .cr-spread-sheet[data-page-plane="A"]{
    visibility:hidden!important;
    background:transparent!important;
  }
  .cr-shell[data-reader-mode="manual-spread"][data-edge="first"] .cr-spread-sheet[data-page-plane="B"]{
    visibility:visible!important;
  }

  /* Final page lives only on A. B is truly empty. */
  .cr-shell[data-reader-mode="manual-spread"][data-edge="last"] .cr-spread-sheet[data-page-plane="A"]{
    visibility:visible!important;
  }
  .cr-shell[data-reader-mode="manual-spread"][data-edge="last"] .cr-spread-sheet[data-page-plane="B"].cr-spread-blank{
    visibility:hidden!important;
    background:transparent!important;
  }

  /* The hinge is the exact screen/book midpoint. */
  .cr-shell[data-reader-mode="manual-spread"] .cr-manual-spread::before{
    left:50%!important;
  }

  /* A turning sheet is also exactly half-book width. */
  .cr-shell[data-reader-mode="manual-spread"] .cr-swipe-turn-page{
    width:50%!important;
    height:100%!important;
    max-width:50%!important;
  }
  .cr-shell[data-reader-mode="manual-spread"] .cr-swipe-turn-page.is-next{
    left:50%!important;
    right:auto!important;
  }
  .cr-shell[data-reader-mode="manual-spread"] .cr-swipe-turn-page.is-prev{
    left:0!important;
    right:auto!important;
  }
  .cr-shell[data-reader-mode="manual-spread"] .cr-swipe-turn-page>img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
}


/* R22 HARD PAGE BOUNDS */
/* The A/B halves are placement zones. The actual comic sheet inside each
   half has a strict portrait frame with visible chrome and full-image contain. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-sheet{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
  background:transparent!important;
  box-sizing:border-box!important;
}

/* Page A hugs the hinge from the left. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-sheet[data-page-plane="A"]{
  justify-content:flex-end!important;
}

/* Page B hugs the hinge from the right. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-sheet[data-page-plane="B"]{
  justify-content:flex-start!important;
}

/* This is the actual physical page boundary. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-page-frame{
  position:relative!important;
  flex:0 0 auto!important;
  width:var(--page-surface-w)!important;
  height:var(--page-surface-h)!important;
  max-width:100%!important;
  max-height:100%!important;
  overflow:hidden!important;
  display:grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  background:#040608!important;
  border:1px solid rgba(153,239,255,.24)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    inset 0 0 24px rgba(0,0,0,.42),
    0 14px 30px rgba(0,0,0,.42),
    0 0 18px rgba(66,218,255,.045)!important;
}

/* Left and right sheets meet exactly at the spine. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-sheet[data-page-plane="A"] .cr-spread-page-frame{
  border-right-color:rgba(0,0,0,.74)!important;
}
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-sheet[data-page-plane="B"] .cr-spread-page-frame{
  border-left-color:rgba(255,255,255,.045)!important;
}

/* The artwork can NEVER crop or stretch beyond this chrome. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-page-frame>img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
  margin:0!important;
  padding:0!important;
  background:#040608!important;
  -webkit-user-drag:none!important;
  user-select:none!important;
}

/* Port the Gallery load state to the new hard-bounded page frame. */
.cr-spread-page-frame[data-page-load="loading"]>img{
  opacity:.18!important;
  filter:saturate(.58) contrast(1.2) brightness(.74)!important;
}
.cr-spread-page-frame[data-page-load="loading"]>.cr-page-load-scramble{
  opacity:.92!important;
}
.cr-spread-page-frame[data-page-load="loading"]>.cr-page-load-scramble::before{
  animation:crPageScrambleA .46s steps(7,end) infinite!important;
}
.cr-spread-page-frame[data-page-load="loading"]>.cr-page-load-scramble::after{
  animation:crPageScrambleB .61s steps(8,end) infinite!important;
}
.cr-spread-page-frame[data-page-load="resolving"]>img,
.cr-spread-page-frame[data-page-load="loaded"]>img{
  opacity:1!important;
  filter:none!important;
}
.cr-spread-page-frame[data-page-load="resolving"]>.cr-page-load-scramble,
.cr-spread-page-frame[data-page-load="loaded"]>.cr-page-load-scramble{
  opacity:0!important;
  animation:none!important;
}

/* Empty first/last hemisphere contains no fake full-width page surface. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-blank{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Turning sheet uses the exact same bounded portrait size as the static sheet. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-swipe-turn-page{
  width:var(--page-surface-w)!important;
  height:var(--page-surface-h)!important;
  max-width:var(--page-surface-w)!important;
  max-height:var(--page-surface-h)!important;
  top:var(--page-surface-top)!important;
  bottom:auto!important;
  overflow:hidden!important;
  background:#040608!important;
  border:1px solid rgba(153,239,255,.20)!important;
  box-sizing:border-box!important;
}
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-swipe-turn-page.is-next{
  left:50%!important;
  right:auto!important;
}
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-swipe-turn-page.is-prev{
  left:calc(50% - var(--page-surface-w))!important;
  right:auto!important;
}
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-swipe-turn-page>img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#040608!important;
}

/* Preview spread uses the same hard page chrome, not full-hemisphere artwork. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-swipe-spread-preview .cr-spread-page-frame{
  width:var(--page-surface-w)!important;
  height:var(--page-surface-h)!important;
}

/* Chrome-safe book area. The book can never intrude into our controls. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-book-transform{
  width:var(--fit-w)!important;
  height:var(--fit-h)!important;
  max-width:calc(100% - .7rem)!important;
  max-height:calc(100% - 6.4rem)!important;
  overflow:visible!important;
}

/* Remove older rules that treated each hemisphere itself as the page. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-content,
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-content>img{
  width:auto!important;
  height:auto!important;
  position:static!important;
}

/* Portrait remains one centered physical page. */
.cr-shell[data-layout="single"] .cr-book-transform{
  max-width:calc(100% - .7rem)!important;
  max-height:calc(100% - .7rem)!important;
}


/* R23 IMMERSIVE FLOATING CONTROL DEVICE */
/* Active reading mode removes duplicated site chrome. The Safari visual viewport
   becomes the device face and the controls float above the comic as one movable pill. */
.cr-reader-nav-inline{display:none}

.cr-shell[data-view="reader"]{
  position:fixed!important;
  left:var(--cr-vv-left,0px)!important;
  top:var(--cr-vv-top,0px)!important;
  width:var(--cr-vv-w,100dvw)!important;
  height:var(--cr-vv-h,100dvh)!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  overflow:hidden!important;
  border-radius:0!important;
  border:0!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(52,211,245,.045),transparent 38rem),
    linear-gradient(180deg,#02080e,#010407 72%)!important;
  box-shadow:none!important;
}

.cr-shell[data-view="reader"]>.cr-topbar,
.cr-shell[data-view="reader"]>.cr-nav,
.cr-shell[data-view="reader"]>.cr-footer,
.cr-shell[data-view="reader"] .cr-resolution{
  display:none!important;
}

/* Entire chrome-safe viewport belongs to the comic stage. */
.cr-shell[data-view="reader"]>.cr-stage{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:
    radial-gradient(ellipse at 50% 48%,rgba(70,218,255,.045),transparent 42%),
    linear-gradient(180deg,rgba(2,8,13,.99),rgba(1,4,7,.995))!important;
  box-shadow:none!important;
}

/* Keep the distant circuitry but don't let it consume layout space. */
.cr-shell[data-view="reader"]>.cr-stage>.cr-grid{
  inset:-7%!important;
  opacity:.62!important;
}
.cr-shell[data-view="reader"]>.cr-stage::before{
  inset:.18rem!important;
  border-radius:.52rem!important;
  border:1px solid rgba(103,229,251,.055)!important;
  box-shadow:inset 0 0 42px rgba(40,198,235,.02)!important;
}

/* Book is centered in the live Safari viewport and gets nearly every pixel. */
.cr-shell[data-view="reader"] .cr-book-transform{
  left:50%!important;
  top:50%!important;
  width:var(--fit-w)!important;
  height:var(--fit-h)!important;
  max-width:calc(100% - 10px)!important;
  max-height:calc(100% - 10px)!important;
  transform:
    translate(-50%,-50%)
    translate3d(var(--pan-x,0px),var(--pan-y,0px),var(--turn-depth,0px))
    scale(var(--book-zoom,1))
    rotateY(var(--turn-lean,0deg))!important;
}

/* Floating glass controls */
.cr-shell[data-view="reader"]>.cr-toolbar{
  position:absolute!important;
  z-index:140!important;
  left:var(--cr-pill-x,50%)!important;
  top:var(--cr-pill-y,10px)!important;
  width:max-content!important;
  max-width:calc(100% - 16px)!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:.34rem .42rem!important;
  transform:translateX(-50%)!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.28rem!important;
  border:1px solid rgba(177,241,255,.24)!important;
  border-radius:999px!important;
  background:
    linear-gradient(180deg,rgba(31,51,63,.42),rgba(5,15,22,.32))!important;
  box-shadow:
    0 12px 32px rgba(0,0,0,.34),
    inset 0 1px rgba(255,255,255,.11),
    inset 0 -1px rgba(0,0,0,.34),
    0 0 22px rgba(77,222,255,.055)!important;
  backdrop-filter:blur(18px) saturate(1.2)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.2)!important;
  touch-action:none!important;
  cursor:grab!important;
  user-select:none!important;
}
.cr-shell[data-view="reader"]>.cr-toolbar.is-dragging{
  cursor:grabbing!important;
  background:
    linear-gradient(180deg,rgba(42,67,81,.50),rgba(7,19,27,.40))!important;
  box-shadow:
    0 16px 36px rgba(0,0,0,.42),
    inset 0 1px rgba(255,255,255,.14),
    0 0 28px rgba(88,228,255,.10)!important;
}

/* Small grip marks make it obvious the pill can move without creating a new bar. */
.cr-shell[data-view="reader"]>.cr-toolbar::before{
  content:"";
  flex:0 0 auto;
  width:.58rem;
  height:1.2rem;
  border-radius:999px;
  opacity:.58;
  background:
    radial-gradient(circle,rgba(203,249,255,.72) 0 1px,transparent 1.2px) 0 0/4px 4px;
  pointer-events:none;
}
.cr-shell[data-view="reader"]>.cr-toolbar::after{display:none!important}

/* Purchase / setup UI stays available in library mode, but disappears once reading. */
.cr-shell[data-view="reader"] .cr-reader-tool{
  display:none!important;
}
.cr-shell[data-view="reader"] .cr-reader-nav-inline{
  display:flex!important;
}
.cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup{
  display:flex!important;
  align-items:center!important;
  gap:.24rem!important;
}
.cr-shell[data-view="reader"]>.cr-toolbar .cr-control{
  display:grid!important;
  place-items:center!important;
  min-height:2rem!important;
  height:2rem!important;
  padding:.28rem .52rem!important;
  border:1px solid rgba(171,239,255,.18)!important;
  border-radius:999px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.025))!important;
  color:#e9fbff!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.055),
    inset 0 -1px rgba(0,0,0,.22)!important;
  font-size:.49rem!important;
  line-height:1!important;
  letter-spacing:.07em!important;
  white-space:nowrap!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.cr-shell[data-view="reader"]>.cr-toolbar .cr-control.cr-square{
  width:2rem!important;
  min-width:2rem!important;
  padding:0!important;
  font-size:.92rem!important;
}
.cr-shell[data-view="reader"]>.cr-toolbar .cr-zoom-readout{
  min-width:3.1rem!important;
}
.cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn{
  min-width:5rem!important;
}
.cr-shell[data-view="reader"]>.cr-toolbar .cr-control:disabled{
  opacity:.28!important;
}
.cr-shell[data-view="reader"] .cr-pill-page-readout{
  display:block!important;
  min-width:3.25rem;
  padding:0 .22rem;
  color:rgba(225,250,255,.88);
  font:850 .42rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.09em;
  text-align:center;
  white-space:nowrap;
}

/* Older landscape cockpit rules must not reclaim space when immersive mode is on. */
@media(orientation:landscape), (min-aspect-ratio:11/10){
  .cr-shell[data-view="reader"]>.cr-toolbar{
    position:absolute!important;
    top:var(--cr-pill-y,8px)!important;
    left:var(--cr-pill-x,50%)!important;
    width:max-content!important;
    transform:translateX(-50%)!important;
  }
  .cr-shell[data-view="reader"]>.cr-stage{
    inset:0!important;
  }
  .cr-shell[data-view="reader"] .cr-book-transform{
    max-width:calc(100% - 8px)!important;
    max-height:calc(100% - 8px)!important;
  }
}

/* Tight mobile glass pill, still movable. */
@media(max-width:720px){
  .cr-shell[data-view="reader"]>.cr-toolbar{
    gap:.18rem!important;
    padding:.26rem .31rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar::before{
    width:.42rem;
    height:1rem;
    background-size:3px 3px;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control{
    height:1.8rem!important;
    min-height:1.8rem!important;
    padding:.22rem .38rem!important;
    font-size:.42rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control.cr-square{
    width:1.8rem!important;
    min-width:1.8rem!important;
    font-size:.82rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn{
    min-width:4.4rem!important;
  }
  .cr-shell[data-view="reader"] .cr-pill-page-readout{
    min-width:2.7rem;
    font-size:.36rem;
  }
}


/* R25 SEALED BOOK + SELECTABLE MOTION BACKGROUNDS */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-manual-spread{
  gap:0!important;
  box-shadow:0 28px 58px rgba(0,0,0,.48)!important;
}
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-manual-spread::before{
  left:50%!important;
  width:1px!important;
  background:rgba(0,0,0,.72)!important;
  box-shadow:none!important;
  opacity:.9!important;
}
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-sheet{
  background:transparent!important;
  overflow:visible!important;
}
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-page-frame{
  background:transparent!important;
  border:1px solid rgba(118,226,250,.34)!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-sheet[data-page-plane="A"] .cr-spread-page-frame{
  border-right:0!important;
}
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-sheet[data-page-plane="B"] .cr-spread-page-frame{
  border-left:1px solid rgba(118,226,250,.34)!important;
}
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-page-frame>img{
  background:transparent!important;
}
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-swipe-turn-page{
  background:transparent!important;
  border:1px solid rgba(118,226,250,.30)!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-swipe-turn-page>img{
  background:transparent!important;
}

/* Page arrows stay paired at the far left of the floating pill. */
.cr-shell[data-view="reader"]>.cr-toolbar .cr-page-nav-pair{
  order:-30!important;
  gap:.12rem!important;
  padding-right:.08rem;
}
.cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-picker{
  order:-20!important;
  display:flex!important;
  align-items:center!important;
  gap:.12rem!important;
}
.cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-picker .cr-bg-step{
  width:1.72rem!important;
  min-width:1.72rem!important;
}
.cr-shell[data-view="reader"] .cr-motion-label{
  display:grid;
  min-width:3.65rem;
  height:1.72rem;
  padding:0 .38rem;
  place-items:center;
  border:1px solid rgba(171,239,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:rgba(225,250,255,.82);
  font:850 .38rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.08em;
  text-align:center;
  white-space:nowrap;
}
@media(max-width:720px){
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-picker .cr-bg-step{
    width:1.5rem!important;
    min-width:1.5rem!important;
  }
  .cr-shell[data-view="reader"] .cr-motion-label{
    min-width:2.7rem;
    height:1.55rem;
    padding:0 .24rem;
    font-size:.31rem;
    letter-spacing:.05em;
  }
}

/* Motion backgrounds. CIRCUIT preserves the current Prime plane. */
.cr-shell[data-motion-bg="circuit"]>.cr-stage>.cr-grid{
  display:block!important;
}

/* Nebula: drifting deep-space color fields with faint stars. */
.cr-shell[data-motion-bg="nebula"]>.cr-stage>.cr-grid{
  inset:-12%!important;
  opacity:.92!important;
  transform:none!important;
  mask-image:none!important;
  filter:none!important;
  background:
    radial-gradient(circle at 18% 28%,rgba(26,141,255,.18),transparent 28%),
    radial-gradient(circle at 78% 34%,rgba(151,72,255,.15),transparent 30%),
    radial-gradient(circle at 54% 72%,rgba(53,227,213,.10),transparent 34%),
    linear-gradient(180deg,#04111b 0%,#02070d 56%,#010306 100%)!important;
  animation:cr-bg-nebula 16s ease-in-out infinite alternate!important;
}
.cr-shell[data-motion-bg="nebula"]>.cr-stage>.cr-grid::before{
  content:""!important;
  position:absolute!important;
  inset:-8%!important;
  display:block!important;
  opacity:.46!important;
  background:
    radial-gradient(circle,rgba(198,247,255,.72) 0 1px,transparent 1.4px) 0 0/78px 78px,
    radial-gradient(circle,rgba(144,205,255,.42) 0 1px,transparent 1.5px) 31px 17px/111px 111px!important;
  animation:cr-bg-stars 24s linear infinite!important;
}
.cr-shell[data-motion-bg="nebula"]>.cr-stage>.cr-grid::after{display:none!important}

/* Horizon: animated perspective runway, quieter than the circuit field. */
.cr-shell[data-motion-bg="horizon"]>.cr-stage>.cr-grid{
  inset:-14% -8% -18%!important;
  opacity:.74!important;
  transform:perspective(1200px) rotateX(68deg) translateY(19%) scale(1.2)!important;
  transform-origin:center 82%!important;
  mask-image:linear-gradient(to bottom,transparent 0%,black 28%,black 76%,transparent 100%)!important;
  background:
    linear-gradient(rgba(102,226,255,.08) 1px,transparent 1px) 0 0/54px 54px,
    linear-gradient(90deg,rgba(102,226,255,.08) 1px,transparent 1px) 0 0/54px 54px,
    linear-gradient(180deg,rgba(25,105,143,.04),rgba(1,5,9,.88))!important;
  animation:cr-bg-horizon 9s linear infinite!important;
}
.cr-shell[data-motion-bg="horizon"]>.cr-stage>.cr-grid::before,
.cr-shell[data-motion-bg="horizon"]>.cr-stage>.cr-grid::after{display:none!important}

/* Pulse: soft moving light rings behind the book. */
.cr-shell[data-motion-bg="pulse"]>.cr-stage>.cr-grid{
  inset:-10%!important;
  opacity:.9!important;
  transform:none!important;
  mask-image:none!important;
  filter:none!important;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 18%,rgba(91,225,255,.08) 19%,transparent 22%),
    radial-gradient(circle at 50% 50%,transparent 0 34%,rgba(115,92,255,.07) 35%,transparent 39%),
    radial-gradient(circle at 50% 50%,rgba(25,112,145,.10),transparent 58%),
    linear-gradient(180deg,#041018,#010306)!important;
  animation:cr-bg-pulse 7s ease-in-out infinite!important;
}
.cr-shell[data-motion-bg="pulse"]>.cr-stage>.cr-grid::before,
.cr-shell[data-motion-bg="pulse"]>.cr-stage>.cr-grid::after{display:none!important}

@keyframes cr-bg-nebula{
  0%{transform:translate3d(-2%,-1%,0) scale(1.02)}
  50%{transform:translate3d(2%,1.5%,0) scale(1.06)}
  100%{transform:translate3d(0,-2%,0) scale(1.03)}
}
@keyframes cr-bg-stars{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-36px,26px,0)}
}
@keyframes cr-bg-horizon{
  from{background-position:0 0,0 0,0 0}
  to{background-position:0 54px,54px 0,0 0}
}
@keyframes cr-bg-pulse{
  0%,100%{transform:scale(1);opacity:.72}
  50%{transform:scale(1.08);opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .cr-shell[data-motion-bg]>.cr-stage>.cr-grid,
  .cr-shell[data-motion-bg]>.cr-stage>.cr-grid::before,
  .cr-shell[data-motion-bg]>.cr-stage>.cr-grid::after{
    animation:none!important;
  }
}


/* R26 FLUSH PAGE SURFACES */
/* Final landscape law: the artwork itself is the page.
   No frame, no border, no gutter, no center divider, no black page chrome. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-book,
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-manual-spread{
  gap:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}

/* Remove every artificial spine/divider. The two actual images meet directly. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-manual-spread::before,
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-manual-spread::after{
  content:none!important;
  display:none!important;
  width:0!important;
  box-shadow:none!important;
}

/* A and B are placement planes only, never visible frames. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-sheet{
  margin:0!important;
  padding:0!important;
  gap:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
}

/* The actual physical page is exactly the source-image surface. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-page-frame{
  width:var(--page-surface-w)!important;
  height:var(--page-surface-h)!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

/* A hugs the center from the left, B hugs the same center from the right.
   No negative-margin fake seam and no 1px line. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-sheet[data-page-plane="A"]{
  justify-content:flex-end!important;
}
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-sheet[data-page-plane="B"]{
  justify-content:flex-start!important;
}
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-sheet[data-page-plane="A"] .cr-spread-page-frame,
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-sheet[data-page-plane="B"] .cr-spread-page-frame{
  margin:0!important;
  border:0!important;
  box-shadow:none!important;
}

/* Full artwork must remain visible. With the 2:3 source/page geometry this
   fills the sheet exactly while preserving the entire image. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-page-frame>img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
}

/* Blank A on the cover and blank B on the back cover are truly empty space. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-blank{
  visibility:hidden!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Turning pages obey the exact same rule: only the artwork moves. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-swipe-turn-page{
  width:var(--page-surface-w)!important;
  height:var(--page-surface-h)!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-swipe-turn-page>img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  object-fit:contain!important;
  object-position:center center!important;
}

/* The preview underneath a turning sheet must also be frame-free. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-swipe-spread-preview,
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-preview{
  gap:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}


/* R27 TRUE CENTER-SPINE BOOK */
/* Landscape AB mode has one immutable hinge at x=50%.
   A terminates on the hinge from the left. B begins on the same hinge from the right.
   The sheets touch with zero layout gap; the crease is visual shading only. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-manual-spread{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  gap:0!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}

/* Slot A: the actual page plane ends at the center axis. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-sheet[data-page-plane="A"]{
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  left:auto!important;
  right:50%!important;
  width:50%!important;
  height:100%!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Slot B: the actual page plane begins at that same center axis. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-sheet[data-page-plane="B"]{
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  left:50%!important;
  right:auto!important;
  width:50%!important;
  height:100%!important;
  display:flex!important;
  justify-content:flex-start!important;
  align-items:center!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* The page surface exactly fills its A/B slot. No black moat around the artwork. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-page-frame{
  position:relative!important;
  flex:0 0 100%!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
}

/* Cyan edge exists only on the physical sheets.
   On an open spread the two inside borders are removed so there is zero separation. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"][data-book-state="open"] .cr-spread-sheet[data-page-plane="A"] .cr-spread-page-frame{
  border:1px solid rgba(69,196,255,.72)!important;
  border-right:0!important;
}
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"][data-book-state="open"] .cr-spread-sheet[data-page-plane="B"] .cr-spread-page-frame{
  border:1px solid rgba(69,196,255,.72)!important;
  border-left:0!important;
}

/* Front cover: only B exists and receives its complete page border. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"][data-edge="first"] .cr-spread-sheet[data-page-plane="B"] .cr-spread-page-frame{
  border:1px solid rgba(69,196,255,.72)!important;
}

/* Back cover: only A exists and receives its complete page border. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"][data-edge="last"] .cr-spread-sheet[data-page-plane="A"] .cr-spread-page-frame{
  border:1px solid rgba(69,196,255,.72)!important;
}

/* Artwork is the page. Full image remains visible inside the exact 2:3 sheet. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-page-frame>img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
}

/* The hinge is painted ON TOP of touching sheets. It consumes zero width. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-manual-spread::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:70!important;
  top:0!important;
  bottom:0!important;
  left:50%!important;
  width:14px!important;
  transform:translateX(-50%)!important;
  pointer-events:none!important;
  opacity:1!important;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.08) 0%,
      rgba(0,0,0,.26) 30%,
      rgba(0,0,0,.48) 48%,
      rgba(255,255,255,.055) 50%,
      rgba(0,0,0,.44) 52%,
      rgba(0,0,0,.23) 70%,
      rgba(0,0,0,.07) 100%)!important;
  box-shadow:none!important;
}

/* Hairline page crease, also zero-width in layout. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-manual-spread::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:71!important;
  top:1px!important;
  bottom:1px!important;
  left:50%!important;
  width:1px!important;
  transform:translateX(-.5px)!important;
  pointer-events:none!important;
  background:rgba(112,220,248,.12)!important;
  box-shadow:-2px 0 5px rgba(0,0,0,.38),2px 0 5px rgba(0,0,0,.30)!important;
}

/* On the one-sheet front/back states the hinge remains subtle, like a closed book edge. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"][data-book-state="edge"] .cr-manual-spread::before{
  opacity:.46!important;
}
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"][data-book-state="edge"] .cr-manual-spread::after{
  opacity:.52!important;
}

/* Turning page: its inner edge is welded to the exact same x=50% hinge.
   There is no lateral translation in JS in manual-spread mode. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-swipe-turn-page{
  position:absolute!important;
  top:0!important;
  bottom:auto!important;
  width:50%!important;
  height:100%!important;
  max-width:50%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-sizing:border-box!important;
  will-change:transform!important;
  backface-visibility:hidden!important;
  transform:
    perspective(1700px)
    translate3d(0,0,var(--swipe-lift,0px))
    rotateY(var(--swipe-angle,0deg))!important;
}

/* Forward turn: B rotates around B's LEFT edge, the center spine. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-swipe-turn-page.is-next{
  left:50%!important;
  right:auto!important;
  transform-origin:0 50%!important;
  border:1px solid rgba(69,196,255,.66)!important;
  border-left:0!important;
}

/* Backward turn: A rotates around A's RIGHT edge, the same center spine. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-swipe-turn-page.is-prev{
  left:auto!important;
  right:50%!important;
  transform-origin:100% 50%!important;
  border:1px solid rgba(69,196,255,.66)!important;
  border-right:0!important;
}

.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-swipe-turn-page>img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  object-fit:contain!important;
  object-position:center center!important;
}

/* Fold depth lives only on the sheet being turned. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-swipe-turn-page::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  pointer-events:none!important;
  opacity:calc(.16 + var(--swipe-progress,0) * .76)!important;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.26) 0%,
      transparent 10%,
      transparent 72%,
      rgba(255,255,255,.06) 88%,
      rgba(0,0,0,.34) 100%)!important;
}

/* Target spread preview uses the same hard A/B center-axis geometry. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-swipe-spread-preview,
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-preview{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  gap:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  pointer-events:none!important;
}


/* R28 TIGHT BOOK BOUNDS */
/* The blue outline hugs the actual open book. No horizontal gutters exist
   inside the outline, and both pages meet on the exact center line. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-book-transform{
  width:var(--fit-w)!important;
  height:var(--fit-h)!important;
  max-width:none!important;
  max-height:none!important;
}

.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-manual-spread{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  background:transparent!important;
  box-sizing:border-box!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* Open spread: one blue box around the two touching sheets. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"][data-book-state="open"] .cr-manual-spread{
  border:1px solid rgba(52,190,255,.82)!important;
}

/* Edge spreads: only the real single sheet is outlined. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"][data-book-state="edge"] .cr-manual-spread{
  border:0!important;
}

/* A ends at 50%. B starts at 50%. No offsets, no centering gap, no padding. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-sheet[data-page-plane="A"]{
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  left:0!important;
  right:auto!important;
  width:50%!important;
  height:100%!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:transparent!important;
}
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-sheet[data-page-plane="B"]{
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  left:50%!important;
  right:auto!important;
  width:50%!important;
  height:100%!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:transparent!important;
}

/* The page frame is exactly the A/B slot. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-page-frame{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
}

/* The image fills the exact portrait sheet. Since the JS book geometry is
   two 2:3 sheets side-by-side, contain produces zero horizontal gutter. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-spread-page-frame>img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  object-fit:contain!important;
  object-position:center center!important;
}

/* Single cover on B: outline only B. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"][data-edge="first"] .cr-spread-sheet[data-page-plane="B"] .cr-spread-page-frame{
  border:1px solid rgba(52,190,255,.82)!important;
}

/* Single back cover on A: outline only A. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"][data-edge="last"] .cr-spread-sheet[data-page-plane="A"] .cr-spread-page-frame{
  border:1px solid rgba(52,190,255,.82)!important;
}

/* Exactly one center line. It is painted over the touching page edges and
   consumes no width, like the crease of the real-book reference. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-manual-spread::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:80!important;
  top:0!important;
  bottom:0!important;
  left:50%!important;
  width:1px!important;
  transform:translateX(-.5px)!important;
  pointer-events:none!important;
  opacity:1!important;
  background:rgba(50,190,255,.72)!important;
  box-shadow:
    -5px 0 10px rgba(0,0,0,.24),
    5px 0 10px rgba(0,0,0,.22)!important;
}
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-manual-spread::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:79!important;
  top:0!important;
  bottom:0!important;
  left:50%!important;
  width:18px!important;
  transform:translateX(-50%)!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.00) 0%,
      rgba(0,0,0,.12) 28%,
      rgba(0,0,0,.28) 47%,
      rgba(0,0,0,.30) 53%,
      rgba(0,0,0,.12) 72%,
      rgba(0,0,0,.00) 100%)!important;
}

/* Keep the edge state crease subtle because only one sheet exists. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"][data-book-state="edge"] .cr-manual-spread::before{
  opacity:.55!important;
}
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"][data-book-state="edge"] .cr-manual-spread::after{
  opacity:.42!important;
}

/* Turning sheet remains welded to the same exact spine axis. */
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-swipe-turn-page{
  top:0!important;
  width:50%!important;
  height:100%!important;
  max-width:50%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  overflow:hidden!important;
}
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-swipe-turn-page.is-next{
  left:50%!important;
  right:auto!important;
  transform-origin:0 50%!important;
}
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-swipe-turn-page.is-prev{
  left:0!important;
  right:auto!important;
  transform-origin:100% 50%!important;
}
.cr-shell[data-layout="spread"][data-reader-mode="manual-spread"] .cr-swipe-turn-page>img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:transparent!important;
}

/* On touch devices the comic, not empty space, owns the turn gesture. */
@media(pointer:coarse){
  .cr-shell[data-reader-mode="manual-spread"] .cr-book,
  .cr-shell[data-reader-mode="manual-spread"] .cr-spread-page-frame,
  .cr-shell[data-reader-mode="manual-spread"] .cr-spread-page-frame>img{
    pointer-events:auto!important;
  }
}


/* R29 VERTICAL LANDSCAPE CONTROLS */
/* Keep portrait controls horizontal. In landscape, the floating glass control
   pill becomes a compact vertical instrument column that lives in side space. */
@media(orientation:landscape), (min-aspect-ratio:11/10){
  .cr-shell[data-view="reader"]>.cr-toolbar{
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:center!important;
    width:5.35rem!important;
    max-width:5.35rem!important;
    min-width:5.35rem!important;
    max-height:calc(100% - 16px)!important;
    padding:.42rem .38rem!important;
    gap:.28rem!important;
    border-radius:1.35rem!important;
    overflow:visible!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar::before{
    width:1.15rem!important;
    height:.45rem!important;
    margin:0 auto .04rem!important;
    flex:0 0 auto!important;
    background:
      radial-gradient(circle,rgba(203,249,255,.72) 0 1px,transparent 1.2px) 0 0/4px 4px!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:center!important;
    gap:.18rem!important;
    padding:.22rem 0!important;
    margin:0!important;
    border-top:1px solid rgba(164,237,255,.07);
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup:first-of-type{
    border-top:0!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:2rem!important;
    height:2rem!important;
    padding:.28rem .32rem!important;
    margin:0!important;
    border-radius:.72rem!important;
    white-space:normal!important;
    text-align:center!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control.cr-square{
    width:100%!important;
    min-width:0!important;
    height:2rem!important;
    font-size:.95rem!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-zoom-readout{
    width:100%!important;
    min-width:0!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn{
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:2.35rem!important;
    line-height:1.05!important;
    font-size:.4rem!important;
    letter-spacing:.055em!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-picker{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto!important;
    align-items:stretch!important;
    gap:.18rem!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-label{
    display:grid!important;
    place-items:center!important;
    width:100%!important;
    min-height:1.65rem!important;
    padding:.18rem .14rem!important;
    border-radius:.62rem!important;
    border:1px solid rgba(167,237,255,.12)!important;
    background:rgba(255,255,255,.025)!important;
    color:rgba(225,250,255,.82)!important;
    font-size:.38rem!important;
    letter-spacing:.08em!important;
    text-align:center!important;
  }

  .cr-shell[data-view="reader"] .cr-pill-page-readout{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    padding:.28rem .12rem!important;
    border-top:1px solid rgba(164,237,255,.07);
    color:rgba(225,250,255,.88)!important;
    font-size:.36rem!important;
    line-height:1.1!important;
    text-align:center!important;
  }

  .cr-shell[data-view="reader"] .cr-reader-nav-inline{
    width:100%!important;
  }
}

/* Short landscape phones: compress the vertical dock without sacrificing controls. */
@media(orientation:landscape) and (max-height:520px){
  .cr-shell[data-view="reader"]>.cr-toolbar{
    width:4.8rem!important;
    max-width:4.8rem!important;
    min-width:4.8rem!important;
    padding:.28rem .3rem!important;
    gap:.16rem!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup{
    gap:.12rem!important;
    padding:.12rem 0!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control.cr-square{
    min-height:1.58rem!important;
    height:1.58rem!important;
    font-size:.39rem!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn{
    min-height:1.85rem!important;
    font-size:.34rem!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-label{
    min-height:1.35rem!important;
    font-size:.33rem!important;
  }

  .cr-shell[data-view="reader"] .cr-pill-page-readout{
    padding:.18rem .08rem!important;
    font-size:.32rem!important;
  }
}


/* R30 PRIME REMOTE + PORTRAIT RECENTER */
/* Portrait: deterministic one-page renderer, centered in the live Safari viewport. */
.cr-shell[data-layout="single"][data-reader-mode="single"] .cr-book-transform{
  left:50%!important;
  top:50%!important;
  width:var(--fit-w)!important;
  height:var(--fit-h)!important;
  max-width:calc(100% - 10px)!important;
  max-height:calc(100% - 10px)!important;
  transform:
    translate(-50%,-50%)
    translate3d(0,0,0)
    scale(var(--book-zoom,1))!important;
}
.cr-shell[data-layout="single"][data-reader-mode="single"] .cr-book,
.cr-shell[data-layout="single"][data-reader-mode="single"] .cr-book-fallback,
.cr-shell[data-layout="single"][data-reader-mode="single"] .cr-fallback-page{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.cr-shell[data-layout="single"][data-reader-mode="single"] .cr-fallback-page img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:transparent!important;
}

/* Landscape controller becomes a compact Prime remote.
   Vertical device silhouette with grouped, legible control rows. */
@media(orientation:landscape), (min-aspect-ratio:11/10){
  .cr-shell[data-view="reader"]>.cr-toolbar{
    width:8.35rem!important;
    min-width:8.35rem!important;
    max-width:8.35rem!important;
    max-height:calc(100% - 18px)!important;
    padding:.58rem .52rem .62rem!important;
    gap:.34rem!important;
    border-radius:1.7rem!important;
    border:1px solid rgba(145,232,255,.28)!important;
    background:
      linear-gradient(165deg,rgba(22,45,58,.68),rgba(4,13,20,.72) 56%,rgba(2,8,13,.78))!important;
    box-shadow:
      0 18px 42px rgba(0,0,0,.42),
      inset 0 1px rgba(255,255,255,.12),
      inset 0 -1px rgba(0,0,0,.44),
      inset 0 0 0 1px rgba(71,211,247,.035),
      0 0 26px rgba(54,209,245,.065)!important;
    backdrop-filter:blur(18px) saturate(1.24)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.24)!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar::before{
    content:"PRIME // REMOTE"!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    margin:0 0 .16rem!important;
    padding:.15rem .08rem .42rem!important;
    border-bottom:1px solid rgba(145,232,255,.11)!important;
    background:none!important;
    color:rgba(211,247,255,.92)!important;
    font:900 .54rem/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;
    letter-spacing:.16em!important;
    text-align:center!important;
    opacity:1!important;
  }

  /* Page nav = two large remote buttons on one row. */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-page-nav-pair{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:.36rem!important;
    width:100%!important;
    padding:.08rem 0 .18rem!important;
    border-top:0!important;
  }

  /* Motion selector = back / mode / forward. */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-picker{
    display:grid!important;
    grid-template-columns:2.05rem 1fr 2.05rem!important;
    grid-template-rows:2.3rem!important;
    align-items:center!important;
    gap:.28rem!important;
    width:100%!important;
    padding:.38rem 0!important;
    border-top:1px solid rgba(164,237,255,.09)!important;
  }

  /* Zoom row = - / FIT / + */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup[aria-label="Zoom controls"]{
    display:grid!important;
    grid-template-columns:2.05rem 1fr 2.05rem!important;
    align-items:center!important;
    gap:.28rem!important;
    width:100%!important;
    padding:.38rem 0!important;
    border-top:1px solid rgba(164,237,255,.09)!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup:not(.cr-page-nav-pair):not(.cr-motion-picker):not([aria-label="Zoom controls"]){
    width:100%!important;
    padding:.38rem 0!important;
    border-top:1px solid rgba(164,237,255,.09)!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control{
    min-width:0!important;
    width:100%!important;
    min-height:2.35rem!important;
    height:2.35rem!important;
    padding:.36rem .46rem!important;
    border-radius:.82rem!important;
    border:1px solid rgba(157,236,255,.22)!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.025))!important;
    color:#f1fcff!important;
    font:900 .58rem/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;
    letter-spacing:.08em!important;
    text-shadow:0 0 8px rgba(123,231,255,.14)!important;
    box-shadow:
      inset 0 1px rgba(255,255,255,.06),
      inset 0 -1px rgba(0,0,0,.28),
      0 4px 10px rgba(0,0,0,.18)!important;
    white-space:nowrap!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control.cr-square{
    width:100%!important;
    min-width:0!important;
    font-size:1rem!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-page-nav-pair .cr-control{
    min-height:2.7rem!important;
    height:2.7rem!important;
    font-size:0!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #pillPrevBtn::after{
    content:"‹  PREV";
    font:900 .62rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing:.07em;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #pillNextBtn::after{
    content:"NEXT  ›";
    font:900 .62rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing:.07em;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar #motionBgPrevBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar #motionBgNextBtn{
    font-size:.95rem!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-label{
    display:grid!important;
    place-items:center!important;
    width:100%!important;
    height:2.3rem!important;
    min-height:2.3rem!important;
    padding:.25rem .2rem!important;
    border-radius:.78rem!important;
    border:1px solid rgba(157,236,255,.16)!important;
    background:rgba(255,255,255,.035)!important;
    color:#dff9ff!important;
    font:900 .52rem/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;
    letter-spacing:.1em!important;
    text-align:center!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-zoom-readout{
    min-width:0!important;
    font-size:.58rem!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn{
    width:100%!important;
    min-width:0!important;
    min-height:2.6rem!important;
    height:2.6rem!important;
    font-size:.54rem!important;
    letter-spacing:.075em!important;
  }

  .cr-shell[data-view="reader"] .cr-pill-page-readout{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:.04rem 0 0!important;
    padding:.42rem .2rem .08rem!important;
    border-top:1px solid rgba(164,237,255,.09)!important;
    color:#dff9ff!important;
    font:900 .5rem/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;
    letter-spacing:.11em!important;
    text-align:center!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control:active{
    transform:translateY(1px) scale(.985)!important;
    background:linear-gradient(180deg,rgba(113,226,255,.12),rgba(255,255,255,.035))!important;
  }
}

/* Short iPhone landscape: compact without turning labels into dust. */
@media(orientation:landscape) and (max-height:520px){
  .cr-shell[data-view="reader"]>.cr-toolbar{
    width:7.5rem!important;
    min-width:7.5rem!important;
    max-width:7.5rem!important;
    padding:.42rem .42rem .46rem!important;
    gap:.22rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar::before{
    font-size:.46rem!important;
    padding-bottom:.28rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control{
    min-height:2rem!important;
    height:2rem!important;
    font-size:.5rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-page-nav-pair .cr-control{
    min-height:2.2rem!important;
    height:2.2rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #pillPrevBtn::after,
  .cr-shell[data-view="reader"]>.cr-toolbar #pillNextBtn::after{
    font-size:.52rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-picker,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup[aria-label="Zoom controls"]{
    grid-template-columns:1.85rem 1fr 1.85rem!important;
    padding:.26rem 0!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-label{
    height:2rem!important;
    min-height:2rem!important;
    font-size:.45rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn{
    min-height:2.15rem!important;
    height:2.15rem!important;
    font-size:.46rem!important;
  }
  .cr-shell[data-view="reader"] .cr-pill-page-readout{
    font-size:.44rem!important;
    padding:.28rem .14rem .04rem!important;
  }
}


/* R31 DROPBOX MOTION GRAPHICS */
/* The selectable reader backgrounds now come from the Dropbox Motion Graphics
   library. The old CSS-generated motion presets are no longer the active source. */
.cr-motion-video{
  position:absolute!important;
  z-index:0!important;
  inset:-2%!important;
  width:104%!important;
  height:104%!important;
  object-fit:cover!important;
  object-position:center center!important;
  pointer-events:none!important;
  user-select:none!important;
  opacity:0!important;
  transform:scale(1.01)!important;
  filter:brightness(.56) saturate(.9) contrast(1.08)!important;
  transition:opacity .28s ease!important;
  background:#010407!important;
}
.cr-motion-video.is-ready{
  opacity:.76!important;
}

/* Keep only a faint static Prime depth lattice over the real motion graphic.
   It is structural now, not one of the selectable fake backgrounds. */
.cr-shell[data-motion-source="dropbox"]>.cr-stage>.cr-grid{
  display:block!important;
  z-index:1!important;
  opacity:.10!important;
  animation:none!important;
  filter:none!important;
  transform:perspective(1250px) rotateX(72deg) translateY(18%) scale(1.52)!important;
  background:
    linear-gradient(rgba(84,220,246,.055) 1px,transparent 1px) 0 0/62px 62px,
    linear-gradient(90deg,rgba(84,220,246,.045) 1px,transparent 1px) 0 0/62px 62px!important;
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.45) 28%,black 72%,transparent 100%)!important;
}
.cr-shell[data-motion-source="dropbox"]>.cr-stage>.cr-grid::before,
.cr-shell[data-motion-source="dropbox"]>.cr-stage>.cr-grid::after{
  animation:none!important;
  opacity:.16!important;
}

/* Ensure the book and reader UI remain above the video plane. */
.cr-shell[data-motion-source="dropbox"] .cr-book-transform{
  z-index:2!important;
}
.cr-shell[data-motion-source="dropbox"]>.cr-stage>.cr-empty{
  position:relative!important;
  z-index:3!important;
}

/* If Dropbox playback fails, fall back to the quiet static device field rather
   than reviving the old NEBULA / HORIZON / PULSE animations. */
.cr-shell[data-motion-source="static"]>.cr-stage>.cr-grid{
  animation:none!important;
}


/* R32 PRIME HARDWARE REMOTE */
/* A compact physical-device treatment for landscape: machined shell, glass
   display, tactile controls, clear hierarchy, and readable labels. */
@media(orientation:landscape), (min-aspect-ratio:11/10){
  .cr-shell[data-view="reader"]>.cr-toolbar{
    position:absolute!important;
    width:8.65rem!important;
    min-width:8.65rem!important;
    max-width:8.65rem!important;
    padding:.68rem .58rem .62rem!important;
    gap:.32rem!important;
    border-radius:1.85rem!important;
    border:1px solid rgba(154,231,246,.30)!important;
    background:
      linear-gradient(145deg,rgba(48,64,72,.86) 0%,rgba(16,28,36,.90) 28%,rgba(5,13,20,.94) 72%,rgba(1,6,10,.97) 100%)!important;
    box-shadow:
      0 20px 42px rgba(0,0,0,.50),
      0 0 0 1px rgba(255,255,255,.025),
      inset 0 1px 0 rgba(255,255,255,.15),
      inset 0 -2px 0 rgba(0,0,0,.58),
      inset 0 0 0 1px rgba(99,221,247,.045),
      inset 0 0 28px rgba(48,203,234,.035)!important;
    backdrop-filter:blur(20px) saturate(1.18)!important;
    -webkit-backdrop-filter:blur(20px) saturate(1.18)!important;
    overflow:hidden!important;
  }

  /* brushed-metal glint across the shell */
  .cr-shell[data-view="reader"]>.cr-toolbar::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;
    border-radius:inherit!important;
    background:
      linear-gradient(110deg,transparent 0 33%,rgba(255,255,255,.045) 42%,transparent 51%),
      repeating-linear-gradient(180deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px)!important;
    mix-blend-mode:screen!important;
    opacity:.55!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar::before{
    content:"PRIME // R3MOTE"!important;
    position:relative!important;
    z-index:2!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    margin:0 0 .08rem!important;
    padding:.08rem .12rem .48rem!important;
    border-bottom:1px solid rgba(146,231,247,.12)!important;
    background:
      radial-gradient(circle at 10% 35%,rgba(81,231,255,.92) 0 2px,rgba(81,231,255,.16) 3px,transparent 5px)!important;
    color:#eefcff!important;
    font:900 .56rem/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;
    letter-spacing:.18em!important;
    text-align:center!important;
    text-shadow:0 0 10px rgba(76,221,250,.18)!important;
    opacity:1!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar>*{
    position:relative!important;
    z-index:2!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup{
    margin:0!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-page-nav-pair{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:.38rem!important;
    width:100%!important;
    padding:.08rem 0 .28rem!important;
    border:0!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-picker{
    display:grid!important;
    grid-template-columns:2.05rem minmax(0,1fr) 2.05rem!important;
    grid-template-rows:3.15rem!important;
    align-items:center!important;
    gap:.32rem!important;
    width:100%!important;
    padding:.4rem 0!important;
    border-top:1px solid rgba(147,231,248,.095)!important;
    border-bottom:1px solid rgba(147,231,248,.075)!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup[aria-label="Zoom controls"]{
    display:grid!important;
    grid-template-columns:2.05rem minmax(0,1fr) 2.05rem!important;
    align-items:center!important;
    gap:.32rem!important;
    width:100%!important;
    padding:.4rem 0!important;
    border-top:0!important;
    border-bottom:1px solid rgba(147,231,248,.075)!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup:not(.cr-page-nav-pair):not(.cr-motion-picker):not([aria-label="Zoom controls"]){
    width:100%!important;
    padding:.38rem 0!important;
    border-top:0!important;
  }

  /* Tactile hardware keys */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control{
    position:relative!important;
    display:grid!important;
    place-items:center!important;
    width:100%!important;
    min-width:0!important;
    min-height:2.35rem!important;
    height:2.35rem!important;
    margin:0!important;
    padding:.34rem .44rem!important;
    border:1px solid rgba(164,232,246,.22)!important;
    border-radius:.82rem!important;
    background:
      linear-gradient(180deg,rgba(57,77,89,.94),rgba(19,33,42,.96) 48%,rgba(7,16,23,.98))!important;
    color:#f2fdff!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      inset 0 -2px 0 rgba(0,0,0,.55),
      0 4px 9px rgba(0,0,0,.28),
      0 0 0 1px rgba(255,255,255,.015)!important;
    font:900 .58rem/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;
    letter-spacing:.075em!important;
    text-shadow:0 0 8px rgba(125,232,252,.15)!important;
    white-space:nowrap!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control::before{
    content:""!important;
    position:absolute!important;
    inset:2px!important;
    border-radius:.68rem!important;
    border-top:1px solid rgba(255,255,255,.055)!important;
    pointer-events:none!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control:active{
    transform:translateY(2px) scale(.985)!important;
    box-shadow:
      inset 0 2px 5px rgba(0,0,0,.48),
      inset 0 1px 0 rgba(255,255,255,.04),
      0 1px 4px rgba(0,0,0,.32)!important;
    background:
      linear-gradient(180deg,rgba(22,40,50,.98),rgba(8,18,25,.99))!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-page-nav-pair .cr-control{
    min-height:2.75rem!important;
    height:2.75rem!important;
    font-size:0!important;
    border-color:rgba(154,231,247,.26)!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #pillPrevBtn::after{
    content:"‹  PREV";
    font:900 .63rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing:.08em;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #pillNextBtn::after{
    content:"NEXT  ›";
    font:900 .63rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing:.08em;
  }

  /* Motion Graphics gets its own OLED-style display. */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-label{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:.28rem!important;
    width:100%!important;
    height:3.15rem!important;
    min-height:3.15rem!important;
    padding:.34rem .26rem!important;
    overflow:hidden!important;
    border:1px solid rgba(110,220,243,.22)!important;
    border-radius:.78rem!important;
    background:
      radial-gradient(circle at 50% -20%,rgba(67,220,248,.11),transparent 58%),
      linear-gradient(180deg,rgba(1,12,18,.98),rgba(2,8,12,.98))!important;
    color:#dffaff!important;
    box-shadow:
      inset 0 0 14px rgba(72,211,239,.055),
      inset 0 0 0 1px rgba(255,255,255,.015),
      0 2px 7px rgba(0,0,0,.32)!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-label::after{
    content:""!important;
    position:absolute!important;
    left:9%!important;
    right:9%!important;
    bottom:.32rem!important;
    height:1px!important;
    background:linear-gradient(90deg,transparent,rgba(94,228,250,.34),transparent)!important;
    box-shadow:0 0 7px rgba(92,223,247,.18)!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-title{
    color:#f0fdff!important;
    font:900 .47rem/1.05 ui-monospace,SFMono-Regular,Consolas,monospace!important;
    letter-spacing:.09em!important;
    text-align:center!important;
    text-shadow:0 0 9px rgba(93,224,248,.15)!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-count{
    color:rgba(143,231,249,.82)!important;
    font:850 .43rem/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;
    letter-spacing:.13em!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar #motionBgPrevBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar #motionBgNextBtn{
    min-height:3.15rem!important;
    height:3.15rem!important;
    font-size:1rem!important;
    border-radius:.78rem!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control.cr-square{
    width:100%!important;
    min-width:0!important;
    font-size:1rem!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-zoom-readout{
    min-width:0!important;
    font-size:.59rem!important;
    letter-spacing:.09em!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn{
    min-height:2.7rem!important;
    height:2.7rem!important;
    border-color:rgba(142,229,247,.24)!important;
    background:
      radial-gradient(circle at 16% 50%,rgba(83,226,250,.07),transparent 24%),
      linear-gradient(180deg,rgba(47,68,80,.94),rgba(9,20,28,.98))!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn .cr-status-dot{
    width:.42rem!important;
    height:.42rem!important;
    border-radius:50%!important;
    background:rgba(113,229,250,.34)!important;
    box-shadow:0 0 8px rgba(96,225,249,.18)!important;
  }

  .cr-shell[data-view="reader"] .cr-pill-page-readout{
    width:100%!important;
    padding:.44rem .12rem .06rem!important;
    margin:.02rem 0 0!important;
    border-top:1px solid rgba(147,231,248,.075)!important;
    color:#dff9ff!important;
    font:900 .49rem/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;
    letter-spacing:.13em!important;
    text-align:center!important;
  }
}

/* Short landscape keeps the hardware feel without crushing the labels. */
@media(orientation:landscape) and (max-height:520px){
  .cr-shell[data-view="reader"]>.cr-toolbar{
    width:7.7rem!important;
    min-width:7.7rem!important;
    max-width:7.7rem!important;
    padding:.46rem .44rem .44rem!important;
    gap:.20rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar::before{
    font-size:.47rem!important;
    padding-bottom:.30rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-page-nav-pair .cr-control{
    min-height:2.15rem!important;
    height:2.15rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #pillPrevBtn::after,
  .cr-shell[data-view="reader"]>.cr-toolbar #pillNextBtn::after{
    font-size:.52rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-picker{
    grid-template-columns:1.8rem minmax(0,1fr) 1.8rem!important;
    grid-template-rows:2.55rem!important;
    padding:.28rem 0!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #motionBgPrevBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar #motionBgNextBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-label{
    min-height:2.55rem!important;
    height:2.55rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-title{
    font-size:.39rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-count{
    font-size:.36rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup[aria-label="Zoom controls"]{
    grid-template-columns:1.8rem minmax(0,1fr) 1.8rem!important;
    padding:.28rem 0!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control{
    min-height:1.85rem!important;
    height:1.85rem!important;
    font-size:.48rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn{
    min-height:2.05rem!important;
    height:2.05rem!important;
    font-size:.45rem!important;
  }
  .cr-shell[data-view="reader"] .cr-pill-page-readout{
    font-size:.41rem!important;
    padding:.28rem .08rem .02rem!important;
  }
}


/* R33 GENERATED-REFERENCE PRIME REMOTE */
/* Matches the approved visual: a narrow vertical machined remote with cyan
   illuminated seams, smoked-glass keys, textured side rails and an OLED motion display. */
@media(orientation:landscape), (min-aspect-ratio:11/10){
  .cr-shell[data-view="reader"]>.cr-toolbar{
    width:7.25rem!important;
    min-width:7.25rem!important;
    max-width:7.25rem!important;
    padding:.72rem .62rem .62rem!important;
    gap:.22rem!important;
    border-radius:1.5rem!important;
    border:1px solid rgba(148,230,246,.42)!important;
    background:
      radial-gradient(circle at .42rem .48rem,rgba(205,249,255,.62) 0 1px,rgba(0,0,0,.7) 1.5px 3px,transparent 3.5px),
      radial-gradient(circle at calc(100% - .42rem) .48rem,rgba(205,249,255,.62) 0 1px,rgba(0,0,0,.7) 1.5px 3px,transparent 3.5px),
      radial-gradient(circle at .42rem calc(100% - .48rem),rgba(205,249,255,.62) 0 1px,rgba(0,0,0,.7) 1.5px 3px,transparent 3.5px),
      radial-gradient(circle at calc(100% - .42rem) calc(100% - .48rem),rgba(205,249,255,.62) 0 1px,rgba(0,0,0,.7) 1.5px 3px,transparent 3.5px),
      linear-gradient(90deg,rgba(75,99,112,.72) 0 .2rem,rgba(8,20,29,.98) .2rem calc(100% - .2rem),rgba(75,99,112,.72) calc(100% - .2rem)),
      repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,rgba(0,0,0,.05) 2px 4px),
      linear-gradient(165deg,#273c48 0%,#0d1c26 21%,#050d14 72%,#010509 100%)!important;
    box-shadow:
      0 20px 44px rgba(0,0,0,.58),
      0 0 0 1px rgba(255,255,255,.03),
      0 0 22px rgba(38,204,248,.10),
      inset .28rem 0 .4rem rgba(0,0,0,.46),
      inset -.28rem 0 .4rem rgba(0,0,0,.46),
      inset 0 1px rgba(255,255,255,.18),
      inset 0 -2px rgba(0,0,0,.72)!important;
    backdrop-filter:blur(18px) saturate(1.16)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.16)!important;
    overflow:hidden!important;
  }

  /* cyan illuminated edge channels */
  .cr-shell[data-view="reader"]>.cr-toolbar::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:0!important;
    inset:.3rem!important;
    border-radius:1.2rem!important;
    border-left:2px solid rgba(60,217,255,.78)!important;
    border-right:2px solid rgba(60,217,255,.78)!important;
    border-top:1px solid rgba(90,226,255,.30)!important;
    border-bottom:1px solid rgba(90,226,255,.22)!important;
    background:
      linear-gradient(90deg,rgba(45,211,255,.09),transparent 12%,transparent 88%,rgba(45,211,255,.09)),
      repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px)!important;
    box-shadow:
      inset 0 0 12px rgba(53,211,248,.10),
      0 0 10px rgba(34,200,241,.10)!important;
    pointer-events:none!important;
    opacity:1!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar::before{
    content:"PRIME // REMOTE"!important;
    display:block!important;
    position:relative!important;
    z-index:2!important;
    width:100%!important;
    height:auto!important;
    margin:0 0 .18rem!important;
    padding:.08rem .18rem .42rem!important;
    border:0!important;
    border-bottom:1px solid rgba(116,226,250,.17)!important;
    background:
      radial-gradient(circle at 10% 46%,#60e9ff 0 1.5px,rgba(70,222,255,.2) 2.5px,transparent 5px)!important;
    color:#eafcff!important;
    font:900 .47rem/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;
    letter-spacing:.15em!important;
    text-align:center!important;
    text-shadow:0 0 9px rgba(70,220,250,.20)!important;
    opacity:1!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar>*{
    position:relative!important;
    z-index:2!important;
  }

  /* Everything is a vertical hardware stack, matching the approved mockup. */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-page-nav-pair,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-picker,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup[aria-label="Zoom controls"],
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup:not(.cr-page-nav-pair):not(.cr-motion-picker):not([aria-label="Zoom controls"]){
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-auto-rows:auto!important;
    width:100%!important;
    gap:.22rem!important;
    margin:0!important;
    padding:.22rem .26rem!important;
    border:0!important;
    border-top:1px solid rgba(124,228,249,.08)!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-page-nav-pair{
    border-top:0!important;
    padding-top:.08rem!important;
  }

  /* machined smoked-glass keys */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control{
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    height:2.25rem!important;
    min-height:2.25rem!important;
    margin:0!important;
    padding:.25rem .36rem!important;
    border:1px solid rgba(117,226,250,.42)!important;
    border-radius:.68rem!important;
    background:
      linear-gradient(180deg,rgba(48,76,91,.92),rgba(15,31,41,.97) 52%,rgba(4,12,18,.99))!important;
    color:#f2fdff!important;
    font:900 .54rem/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;
    letter-spacing:.08em!important;
    text-shadow:0 0 8px rgba(84,229,255,.22)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -2px 0 rgba(0,0,0,.58),
      inset 0 0 12px rgba(47,211,247,.035),
      0 0 0 1px rgba(0,0,0,.46),
      0 4px 9px rgba(0,0,0,.34),
      0 0 10px rgba(51,211,248,.10)!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control::before{
    content:""!important;
    position:absolute!important;
    inset:2px!important;
    border-radius:.54rem!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    border-left:1px solid rgba(255,255,255,.025)!important;
    pointer-events:none!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control:active{
    transform:translateY(1px) scale(.985)!important;
    background:linear-gradient(180deg,rgba(18,38,49,.99),rgba(3,11,17,.99))!important;
    box-shadow:
      inset 0 2px 5px rgba(0,0,0,.56),
      0 1px 4px rgba(0,0,0,.36),
      0 0 10px rgba(49,216,250,.08)!important;
  }

  /* Page arrows remain first, in their own individual stacked keys. */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-page-nav-pair .cr-control{
    font-size:0!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #pillPrevBtn::after{
    content:"‹  PREV";
    font:900 .55rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing:.08em;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #pillNextBtn::after{
    content:"NEXT  ›";
    font:900 .55rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing:.08em;
  }

  /* Motion section: previous key, OLED display, next key. */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-picker{
    padding-top:.34rem!important;
    padding-bottom:.34rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #motionBgPrevBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar #motionBgNextBtn{
    height:2.1rem!important;
    min-height:2.1rem!important;
    font-size:.92rem!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-label{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:.25rem!important;
    width:100%!important;
    height:3.15rem!important;
    min-height:3.15rem!important;
    padding:.42rem .28rem!important;
    border:1px solid rgba(78,217,247,.42)!important;
    border-radius:.58rem!important;
    background:
      linear-gradient(180deg,rgba(4,20,28,.99),rgba(0,8,13,.99))!important;
    box-shadow:
      inset 0 0 18px rgba(52,210,246,.075),
      inset 0 0 0 1px rgba(255,255,255,.025),
      0 0 12px rgba(47,210,247,.08)!important;
    overflow:hidden!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-label::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    background:
      repeating-linear-gradient(180deg,rgba(103,235,255,.026) 0 1px,transparent 1px 3px)!important;
    pointer-events:none!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-label::after{
    content:""!important;
    position:absolute!important;
    left:12%!important;
    right:12%!important;
    bottom:.32rem!important;
    height:1px!important;
    background:linear-gradient(90deg,transparent,rgba(82,228,255,.55),transparent)!important;
    box-shadow:0 0 8px rgba(82,228,255,.26)!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-title{
    position:relative!important;
    z-index:2!important;
    color:#55ddff!important;
    font:950 .48rem/1.03 ui-monospace,SFMono-Regular,Consolas,monospace!important;
    letter-spacing:.10em!important;
    text-align:center!important;
    text-shadow:0 0 9px rgba(58,220,255,.25)!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-count{
    position:relative!important;
    z-index:2!important;
    color:#e7fbff!important;
    font:900 .42rem/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;
    letter-spacing:.13em!important;
  }

  /* separator grille between motion and zoom, like the approved hardware reference */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup[aria-label="Zoom controls"]::before{
    content:"•••••"!important;
    display:block!important;
    width:100%!important;
    height:.8rem!important;
    margin:-.15rem 0 .05rem!important;
    color:rgba(77,225,251,.78)!important;
    font:900 .52rem/.8rem ui-monospace,SFMono-Regular,Consolas,monospace!important;
    letter-spacing:.16em!important;
    text-align:center!important;
    text-shadow:0 0 7px rgba(64,220,250,.24)!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control.cr-square,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-zoom-readout{
    width:100%!important;
    min-width:0!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control.cr-square{
    font-size:.9rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-zoom-readout{
    font-size:.58rem!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn{
    min-height:2.35rem!important;
    height:2.35rem!important;
    font-size:.49rem!important;
    border-color:rgba(96,222,249,.34)!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn .cr-status-dot{
    width:.38rem!important;
    height:.38rem!important;
    background:rgba(80,225,250,.46)!important;
    box-shadow:0 0 8px rgba(74,224,250,.24)!important;
  }

  .cr-shell[data-view="reader"] .cr-pill-page-readout{
    display:block!important;
    width:calc(100% - .52rem)!important;
    margin:.08rem .26rem 0!important;
    padding:.42rem .12rem .10rem!important;
    border-top:1px solid rgba(112,225,249,.12)!important;
    color:#e9fcff!important;
    font:900 .46rem/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;
    letter-spacing:.11em!important;
    text-align:center!important;
  }
}

/* Keep the physical remote compact on short iPhone landscape viewports. */
@media(orientation:landscape) and (max-height:520px){
  .cr-shell[data-view="reader"]>.cr-toolbar{
    width:6.65rem!important;
    min-width:6.65rem!important;
    max-width:6.65rem!important;
    padding:.48rem .48rem .44rem!important;
    gap:.12rem!important;
    border-radius:1.3rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar::before{
    font-size:.39rem!important;
    padding-bottom:.28rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-page-nav-pair,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-picker,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup[aria-label="Zoom controls"],
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup:not(.cr-page-nav-pair):not(.cr-motion-picker):not([aria-label="Zoom controls"]){
    gap:.12rem!important;
    padding:.14rem .2rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control{
    min-height:1.52rem!important;
    height:1.52rem!important;
    border-radius:.54rem!important;
    font-size:.42rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #pillPrevBtn::after,
  .cr-shell[data-view="reader"]>.cr-toolbar #pillNextBtn::after{
    font-size:.42rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #motionBgPrevBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar #motionBgNextBtn{
    min-height:1.45rem!important;
    height:1.45rem!important;
    font-size:.72rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-label{
    min-height:2.05rem!important;
    height:2.05rem!important;
    gap:.14rem!important;
    padding:.24rem .18rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-title{
    font-size:.37rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-count{
    font-size:.32rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup[aria-label="Zoom controls"]::before{
    height:.52rem!important;
    margin:-.08rem 0 0!important;
    font-size:.38rem!important;
    line-height:.52rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn{
    min-height:1.7rem!important;
    height:1.7rem!important;
    font-size:.39rem!important;
  }
  .cr-shell[data-view="reader"] .cr-pill-page-readout{
    font-size:.35rem!important;
    padding:.25rem .08rem .04rem!important;
  }
}


/* R34 VOLUME EXIT CONTROL */
.cr-reader-exit-inline{
  display:none!important;
}
.cr-shell[data-view="reader"] .cr-reader-exit-inline{
  display:flex!important;
}
.cr-shell[data-view="reader"] .cr-exit-reader{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.38rem!important;
  min-width:5.25rem!important;
  color:#eafcff!important;
  border-color:rgba(103,226,250,.34)!important;
  background:
    radial-gradient(circle at 18% 50%,rgba(71,224,255,.08),transparent 28%),
    linear-gradient(180deg,rgba(45,69,82,.92),rgba(8,20,28,.98))!important;
}
.cr-shell[data-view="reader"] .cr-exit-glyph{
  display:grid;
  place-items:center;
  width:1.05rem;
  height:1.05rem;
  border-radius:50%;
  border:1px solid rgba(105,229,252,.34);
  color:#7ee9ff;
  font:900 .72rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  box-shadow:inset 0 0 8px rgba(59,216,249,.08),0 0 8px rgba(59,216,249,.06);
}
.cr-shell[data-view="reader"] .cr-exit-label{
  font:900 .48rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.11em;
}

/* Landscape Prime Remote: VOLUMES is the first dedicated hardware key. */
@media(orientation:landscape), (min-aspect-ratio:11/10){
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-reader-exit-inline{
    order:-20!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    padding:.06rem .26rem .34rem!important;
    margin:0!important;
    border:0!important;
    border-bottom:1px solid rgba(124,228,249,.10)!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-exit-reader{
    width:100%!important;
    min-width:0!important;
    min-height:2.25rem!important;
    height:2.25rem!important;
    border-radius:.68rem!important;
    border:1px solid rgba(91,225,251,.45)!important;
    background:
      linear-gradient(180deg,rgba(39,74,91,.96),rgba(9,25,35,.99) 55%,rgba(3,12,18,.99))!important;
    box-shadow:
      inset 0 1px rgba(255,255,255,.13),
      inset 0 -2px rgba(0,0,0,.52),
      0 0 12px rgba(45,215,250,.09)!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-exit-label{
    font-size:.5rem!important;
    letter-spacing:.12em!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-exit-glyph{
    width:1rem!important;
    height:1rem!important;
    font-size:.68rem!important;
  }
}


/* Prime Spatial: iOS 26+ motion-parallax presentation. */
.cr-spatial-group[hidden]{display:none!important}
.cr-spatial-toggle{gap:.42rem}
.cr-spatial-glyph{font-size:.95rem;line-height:1;filter:drop-shadow(0 0 8px rgba(107,235,255,.25))}
.cr-spatial-toggle[aria-pressed="true"]{
  border-color:rgba(107,235,255,.72);
  background:linear-gradient(135deg,rgba(60,218,242,.24),rgba(75,101,190,.14));
  box-shadow:inset 0 0 24px rgba(77,224,250,.09),0 0 18px rgba(61,215,246,.12)
}
.cr-shell[data-spatial="true"] .cr-stage{
  --spatial-light-x:50%;
  --spatial-light-y:45%;
}
.cr-shell[data-spatial="true"] .cr-stage::before{
  background:
    radial-gradient(circle at var(--spatial-light-x) var(--spatial-light-y),rgba(130,241,255,.105),transparent 31rem),
    radial-gradient(circle at 50% 50%,rgba(95,218,244,.055),transparent 27rem),
    linear-gradient(rgba(114,219,243,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(114,219,243,.02) 1px,transparent 1px);
}
.cr-shell[data-spatial="true"] .cr-book-transform{
  transform:
    translate(-50%,-50%)
    translate3d(calc(var(--pan-x,0px) + var(--spatial-x,0px)),calc(var(--pan-y,0px) + var(--spatial-y,0px)),18px)
    scale(var(--book-zoom,1))
    rotateX(var(--spatial-rx,0deg))
    rotateY(var(--turn-lean,0deg))
    rotateY(var(--spatial-ry,0deg));
  filter:
    drop-shadow(calc(var(--spatial-x,0px) * -.55) calc(42px + var(--spatial-y,0px) * -.45) 62px rgba(0,0,0,.74))
    drop-shadow(0 0 34px rgba(82,226,255,.13));
}
.cr-shell[data-spatial="true"] .cr-book .cr-page img{
  transform:translate3d(calc(var(--spatial-x,0px) * -.22),calc(var(--spatial-y,0px) * -.18),10px) scale(1.012);
  transition:transform .075s linear;
}
.cr-shell[data-spatial="true"] .cr-book-transform::after{
  opacity:.22;
  transform:translate3d(calc(var(--spatial-x,0px) * .65),calc(var(--spatial-y,0px) * .55),28px);
}
@media (prefers-reduced-motion: reduce){
  .cr-spatial-group{display:none!important}
}


/* R38 CONTROL AUTHORITY
   Portrait = compact two-row remote. Landscape = compressed vertical Prime remote.
   All interactive buttons remain inside the visual viewport and own their taps. */
.cr-shell[data-view="reader"]>.cr-toolbar button,
.cr-shell[data-view="reader"]>.cr-toolbar a,
.cr-shell[data-view="reader"]>.cr-toolbar input,
.cr-shell[data-view="reader"]>.cr-toolbar select{
  pointer-events:auto!important;
  touch-action:manipulation!important;
}

@media(orientation:portrait) and (max-width:900px){
  .cr-shell[data-view="reader"]>.cr-toolbar{
    left:50%!important;
    top:var(--cr-pill-y,8px)!important;
    width:min(calc(100% - 12px),31rem)!important;
    max-width:calc(100% - 12px)!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:auto auto minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    align-items:center!important;
    justify-content:stretch!important;
    gap:.2rem .24rem!important;
    padding:.3rem .34rem!important;
    border-radius:1.15rem!important;
    transform:translateX(-50%)!important;
    overflow:hidden!important;
    touch-action:none!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar::before{
    display:none!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-reader-exit-inline{
    grid-column:1!important;grid-row:1!important;
    width:auto!important;padding:0!important;margin:0!important;border:0!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-reader-nav-inline{
    grid-column:2!important;grid-row:1!important;width:auto!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-picker{
    grid-column:3!important;grid-row:1!important;
    display:grid!important;
    grid-template-columns:1.6rem minmax(4.6rem,1fr) 1.6rem!important;
    width:100%!important;
    min-width:0!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup[aria-label="Zoom controls"]{
    grid-column:1 / span 2!important;grid-row:2!important;
    display:grid!important;
    grid-template-columns:1.65rem 3rem 1.65rem!important;
    justify-content:start!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup:has(#enhanceBtn){
    grid-column:3!important;grid-row:2!important;
    justify-self:start!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-spatial-group{
    grid-column:3!important;grid-row:2!important;
    justify-self:end!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-pill-page-readout{
    display:none!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control{
    min-height:1.72rem!important;
    height:1.72rem!important;
    padding:.18rem .34rem!important;
    font-size:.39rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control.cr-square{
    width:1.6rem!important;min-width:1.6rem!important;
    height:1.6rem!important;min-height:1.6rem!important;
    font-size:.75rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-exit-reader{
    min-width:2.05rem!important;width:2.05rem!important;
    padding:0!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-exit-label{
    display:none!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-exit-glyph{
    width:.92rem!important;height:.92rem!important;font-size:.62rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-label{
    width:100%!important;min-width:0!important;
    min-height:1.6rem!important;height:1.6rem!important;
    padding:.18rem .2rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-title{font-size:.32rem!important}
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-count{font-size:.29rem!important}
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-zoom-readout{min-width:3rem!important}
  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn{
    min-width:4.2rem!important;width:4.2rem!important;
    font-size:.35rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-spatial-toggle{
    min-width:3.45rem!important;width:3.45rem!important;
    font-size:.34rem!important;padding:.16rem .24rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-spatial-glyph{
    font-size:.7rem!important;
  }
}

@media(orientation:landscape), (min-aspect-ratio:11/10){
  .cr-shell[data-view="reader"]>.cr-toolbar{
    width:6.65rem!important;
    min-width:6.65rem!important;
    max-width:6.65rem!important;
    max-height:calc(100% - 12px)!important;
    padding:.34rem .36rem!important;
    gap:.14rem!important;
    border-radius:1.28rem!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    touch-action:none!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar::before{
    width:1.1rem!important;height:.3rem!important;
    background-size:3px 3px!important;
    flex:0 0 .3rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup{
    width:100%!important;
    min-width:0!important;
    padding:.08rem 0!important;
    gap:.12rem!important;
    justify-content:center!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-reader-exit-inline{
    width:100%!important;
    padding:.04rem 0 .14rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-exit-reader{
    min-height:1.7rem!important;height:1.7rem!important;width:100%!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-reader-nav-inline{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:.12rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-picker{
    display:grid!important;
    grid-template-columns:1.45rem minmax(0,1fr) 1.45rem!important;
    grid-template-rows:auto!important;
    gap:.1rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup[aria-label="Zoom controls"]{
    display:grid!important;
    grid-template-columns:1.45rem minmax(0,1fr) 1.45rem!important;
    gap:.1rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control.cr-square{
    min-height:1.48rem!important;height:1.48rem!important;
    font-size:.35rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control.cr-square{
    width:1.45rem!important;min-width:1.45rem!important;padding:0!important;
    font-size:.68rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-label{
    min-height:1.48rem!important;height:1.48rem!important;
    padding:.12rem .08rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-title{font-size:.28rem!important}
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-count{font-size:.26rem!important}
  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-spatial-toggle{
    width:100%!important;min-width:0!important;
    min-height:1.55rem!important;height:1.55rem!important;
    font-size:.32rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-pill-page-readout{
    width:100%!important;
    padding:.08rem 0!important;
    font-size:.29rem!important;
  }
}

.cr-shell[data-enhanced="true"] #enhanceBtn,
#enhanceBtn[aria-pressed="true"]{
  border-color:rgba(105,236,255,.78)!important;
  box-shadow:inset 0 0 18px rgba(65,222,249,.14),0 0 14px rgba(65,222,249,.1)!important;
}


/* R39 SPATIAL TRANSFORM AUTHORITY
   Must come after all portrait/landscape book-transform rules. */
.cr-shell[data-view="reader"][data-spatial="true"] .cr-book-transform{
  transform:
    translate(-50%,-50%)
    translate3d(
      calc(var(--pan-x,0px) + var(--spatial-x,0px)),
      calc(var(--pan-y,0px) + var(--spatial-y,0px)),
      22px
    )
    scale(var(--book-zoom,1))
    rotateX(var(--spatial-rx,0deg))
    rotateY(calc(var(--turn-lean,0deg) + var(--spatial-ry,0deg)))!important;
  transform-style:preserve-3d!important;
  perspective:1800px!important;
  filter:
    drop-shadow(calc(var(--spatial-x,0px) * -.55) calc(34px + var(--spatial-y,0px) * -.4) 54px rgba(0,0,0,.76))
    drop-shadow(0 0 34px rgba(82,226,255,.16))!important;
  transition:filter .16s ease!important;
}
.cr-shell[data-view="reader"][data-spatial="true"] .cr-book{
  transform-style:preserve-3d!important;
}
.cr-shell[data-view="reader"][data-spatial="true"] .cr-book .cr-page,
.cr-shell[data-view="reader"][data-spatial="true"] .cr-spread-sheet{
  transform-style:preserve-3d!important;
}
.cr-shell[data-view="reader"][data-spatial="true"] .cr-book img{
  transform:
    translate3d(
      calc(var(--spatial-x,0px) * -.24),
      calc(var(--spatial-y,0px) * -.2),
      14px
    )
    scale(1.018)!important;
  transform-origin:center center!important;
  transition:transform .07s linear,filter .12s ease!important;
  filter:contrast(1.015) saturate(1.015)!important;
}
.cr-shell[data-view="reader"][data-spatial="true"] .cr-stage::after{
  background:
    radial-gradient(circle at var(--spatial-light-x,56%) var(--spatial-light-y,42%),
      rgba(231,253,255,.18) 0,
      rgba(101,227,255,.085) 12%,
      transparent 37%),
    radial-gradient(ellipse at 50% 54%,transparent 48%,rgba(0,0,0,.34) 100%)!important;
}
.cr-spatial-toggle[data-state="asking"]{
  border-color:rgba(255,214,119,.75)!important;
  box-shadow:0 0 16px rgba(255,204,90,.16),inset 0 0 14px rgba(255,204,90,.08)!important;
}
.cr-spatial-toggle[data-state="on"],
.cr-spatial-toggle[aria-pressed="true"]{
  border-color:rgba(111,241,255,.88)!important;
  background:linear-gradient(135deg,rgba(55,222,246,.3),rgba(66,108,207,.18))!important;
  box-shadow:0 0 18px rgba(72,222,255,.22),inset 0 0 18px rgba(72,222,255,.12)!important;
}
.cr-spatial-toggle[data-state="on"] .cr-spatial-glyph{
  filter:drop-shadow(0 0 8px rgba(132,244,255,.9))!important;
}


/* R40 SPATIAL VISIBILITY + LANDSCAPE REMOTE SCALE */
/* Hidden is authoritative. A spatial control can never be visible without JS eligibility. */
.cr-shell[data-view="reader"]>.cr-toolbar .cr-spatial-group[hidden],
.cr-shell .cr-spatial-group[hidden]{
  display:none!important;
}

/* Exactly 20% larger than the R38 landscape remote geometry. */
@media(orientation:landscape), (min-aspect-ratio:11/10){
  .cr-shell[data-view="reader"]>.cr-toolbar{
    width:7.98rem!important;
    min-width:7.98rem!important;
    max-width:7.98rem!important;
    padding:.408rem .432rem!important;
    gap:.168rem!important;
    border-radius:1.536rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar::before{
    width:1.32rem!important;
    height:.36rem!important;
    flex-basis:.36rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup{
    gap:.144rem!important;
    padding:.096rem 0!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-reader-exit-inline{
    padding:.048rem 0 .168rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-exit-reader{
    min-height:2.04rem!important;
    height:2.04rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-reader-nav-inline{
    gap:.144rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-picker,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup[aria-label="Zoom controls"]{
    grid-template-columns:1.74rem minmax(0,1fr) 1.74rem!important;
    gap:.12rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control.cr-square{
    min-height:1.776rem!important;
    height:1.776rem!important;
    font-size:.42rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control.cr-square{
    width:1.74rem!important;
    min-width:1.74rem!important;
    font-size:.816rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-label{
    min-height:1.776rem!important;
    height:1.776rem!important;
    padding:.144rem .096rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-title{font-size:.336rem!important}
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-count{font-size:.312rem!important}
  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-spatial-toggle{
    min-height:1.86rem!important;
    height:1.86rem!important;
    font-size:.384rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-pill-page-readout{
    padding:.096rem 0!important;
    font-size:.348rem!important;
  }
}


/* R41 REFERENCE-EXACT LANDSCAPE HARDWARE REMOTE */
/* Visual authority: approved smoked-glass/chrome Prime remote reference.
   Landscape only. Portrait control geometry remains governed by R38/R40. */
@media (orientation:landscape), (min-aspect-ratio:11/10){
  .cr-shell[data-view="reader"]>.cr-toolbar{
    --remote-cyan:#6feaff;
    --remote-ice:#eefcff;
    --remote-line:rgba(203,241,249,.78);
    --remote-font:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
    width:clamp(12rem,52svh,17rem)!important;
    min-width:clamp(12rem,52svh,17rem)!important;
    max-width:clamp(12rem,52svh,17rem)!important;
    max-height:calc(100svh - 12px)!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
    gap:clamp(.14rem,.55svh,.28rem)!important;
    padding:clamp(.55rem,1.8svh,.85rem)!important;
    overflow:hidden!important;
    isolation:isolate!important;
    border-radius:clamp(1.65rem,5.2svh,2.35rem)!important;
    border:2px solid rgba(191,221,231,.74)!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.035) 5%,transparent 13%,transparent 88%,rgba(255,255,255,.05) 100%),
      radial-gradient(120% 30% at 50% -4%,rgba(170,242,255,.17),transparent 58%),
      radial-gradient(80% 45% at 50% 105%,rgba(41,196,237,.08),transparent 65%),
      linear-gradient(90deg,#8fa5ad 0%,#273c46 1.8%,#0d1a21 4.2%,#031019 8%,#05131c 92%,#11232d 96%,#708893 98.4%,#c4d7de 100%)!important;
    box-shadow:
      0 18px 50px rgba(0,0,0,.62),
      0 0 26px rgba(47,215,255,.16),
      inset 0 0 0 1px rgba(255,255,255,.20),
      inset 0 0 0 4px rgba(5,15,21,.92),
      inset 0 0 0 6px rgba(129,175,190,.20),
      inset 0 0 38px rgba(0,0,0,.78),
      inset 12px 0 20px rgba(0,0,0,.28),
      inset -12px 0 20px rgba(0,0,0,.28)!important;
    backdrop-filter:blur(22px) saturate(1.22)!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.22)!important;
    touch-action:none!important;
  }

  /* Chrome inner bezel + cyan edge channels. */
  .cr-shell[data-view="reader"]>.cr-toolbar::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:0!important;
    inset:clamp(.22rem,.8svh,.38rem)!important;
    border-radius:clamp(1.3rem,4.4svh,2rem)!important;
    border:1px solid rgba(163,211,223,.54)!important;
    background:
      linear-gradient(90deg,rgba(92,232,255,.07),transparent 9%,transparent 91%,rgba(92,232,255,.07)),
      linear-gradient(180deg,rgba(255,255,255,.045),transparent 16%,transparent 84%,rgba(255,255,255,.025))!important;
    box-shadow:
      inset 2px 0 0 rgba(83,226,255,.72),
      inset -2px 0 0 rgba(83,226,255,.72),
      inset 0 1px 0 rgba(219,249,255,.34),
      inset 0 -1px 0 rgba(64,210,245,.24),
      inset 0 0 20px rgba(44,205,244,.08),
      0 0 10px rgba(46,211,249,.09)!important;
    pointer-events:none!important;
    opacity:1!important;
  }

  /* Reference has no title plate. This is the glass reflection layer. */
  .cr-shell[data-view="reader"]>.cr-toolbar::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:1!important;
    inset:2px 10% auto 10%!important;
    width:auto!important;
    height:18%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:50% 50% 46% 46% / 30% 30% 70% 70%!important;
    background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.018) 48%,transparent 100%)!important;
    opacity:.78!important;
    pointer-events:none!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar>*{
    position:relative!important;
    z-index:2!important;
  }

  /* Exact reference order. */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-reader-nav-inline{order:1!important}
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-reader-exit-inline{order:2!important}
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-picker{order:3!important}
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup[aria-label="Zoom controls"]{order:4!important}
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-enhance-group,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup:has(#enhanceBtn){order:5!important}
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-pill-page-readout{order:6!important}
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-spatial-group{display:none!important}

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-reader-exit-inline{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:none!important;
  }

  /* Shared physical key material. */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control{
    --press-color:#6feaff;
    --press-rgb:111,234,255;
    position:relative!important;
    box-sizing:border-box!important;
    min-width:0!important;
    min-height:44px!important;
    margin:0!important;
    border:1px solid rgba(173,219,231,.58)!important;
    border-radius:clamp(.72rem,2.6svh,1.15rem)!important;
    color:var(--remote-ice)!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.055) 12%,transparent 34%),
      radial-gradient(130% 70% at 50% -18%,rgba(111,234,255,.14),transparent 58%),
      linear-gradient(180deg,rgba(48,75,88,.97) 0%,rgba(21,44,56,.98) 42%,rgba(6,20,29,.995) 100%)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -2px 0 rgba(0,0,0,.58),
      inset 0 0 0 1px rgba(74,213,245,.06),
      inset 0 0 18px rgba(57,212,247,.045),
      0 1px 0 rgba(135,230,249,.18),
      0 5px 10px rgba(0,0,0,.40),
      0 0 10px rgba(52,211,248,.11)!important;
    font-family:var(--remote-font)!important;
    font-weight:900!important;
    letter-spacing:.055em!important;
    text-shadow:0 0 8px rgba(111,234,255,.22)!important;
    overflow:hidden!important;
    -webkit-tap-highlight-color:transparent!important;
    touch-action:manipulation!important;
    transform:translateZ(0)!important;
    transition:
      transform 90ms cubic-bezier(.2,.8,.2,1),
      border-color 220ms ease,
      color 220ms ease,
      text-shadow 220ms ease,
      box-shadow 220ms ease,
      filter 220ms ease!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control:hover{
    border-color:rgba(183,231,242,.72)!important;
  }

  /* True illuminated press state. JS applies this on pointerdown and clears on release/cancel. */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control.is-prime-pressed{
    color:var(--press-color)!important;
    border-color:var(--press-color)!important;
    transform:translateY(2px) scale(.982)!important;
    filter:saturate(1.18) brightness(1.06)!important;
    text-shadow:
      0 0 6px rgba(var(--press-rgb),.92),
      0 0 16px rgba(var(--press-rgb),.62)!important;
    box-shadow:
      inset 0 3px 8px rgba(0,0,0,.58),
      inset 0 0 22px rgba(var(--press-rgb),.30),
      inset 0 0 0 1px rgba(var(--press-rgb),.82),
      0 0 7px rgba(var(--press-rgb),.78),
      0 0 20px rgba(var(--press-rgb),.46)!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control.is-prime-pressed::before,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control.is-prime-pressed::after{
    color:var(--press-color)!important;
    text-shadow:
      0 0 7px rgba(var(--press-rgb),.95),
      0 0 16px rgba(var(--press-rgb),.62)!important;
  }

  /* Each hardware key owns a distinct illumination channel. */
  #pillPrevBtn{--press-color:#2f80ff;--press-rgb:47,128,255}
  #pillNextBtn{--press-color:#19e6ff;--press-rgb:25,230,255}
  #exitReaderBtn{--press-color:#ff4664;--press-rgb:255,70,100}
  #motionBgPrevBtn{--press-color:#9a67ff;--press-rgb:154,103,255}
  #motionBgNextBtn{--press-color:#ff46d4;--press-rgb:255,70,212}
  #zoomInBtn{--press-color:#45f28d;--press-rgb:69,242,141}
  #zoomOutBtn{--press-color:#ffb449;--press-rgb:255,180,73}
  #zoomResetBtn{--press-color:#36e7d2;--press-rgb:54,231,210}
  #enhanceBtn{--press-color:#ffd33f;--press-rgb:255,211,63}

  /* PREV | NEXT */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-reader-nav-inline{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:clamp(.42rem,1.8svh,.72rem)!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #pillPrevBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar #pillNextBtn{
    width:100%!important;
    min-width:0!important;
    height:clamp(3rem,12.5svh,4.75rem)!important;
    min-height:44px!important;
    display:grid!important;
    grid-template-rows:1fr auto!important;
    place-items:center!important;
    align-content:center!important;
    gap:.12rem!important;
    padding:.34rem .24rem .42rem!important;
    font-size:0!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #pillPrevBtn::before,
  .cr-shell[data-view="reader"]>.cr-toolbar #pillNextBtn::before{
    position:static!important;
    inset:auto!important;
    border:0!important;
    display:block!important;
    font:300 clamp(1.8rem,7svh,2.75rem)/.72 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
    color:#e9fbff!important;
    opacity:1!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #pillPrevBtn::before{content:"‹"!important}
  .cr-shell[data-view="reader"]>.cr-toolbar #pillNextBtn::before{content:"›"!important}
  .cr-shell[data-view="reader"]>.cr-toolbar #pillPrevBtn::after,
  .cr-shell[data-view="reader"]>.cr-toolbar #pillNextBtn::after{
    display:block!important;
    color:#fff!important;
    font:900 clamp(.58rem,2.1svh,.78rem)/1 var(--remote-font)!important;
    letter-spacing:.06em!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #pillPrevBtn::after{content:"PREV"!important}
  .cr-shell[data-view="reader"]>.cr-toolbar #pillNextBtn::after{content:"NEXT"!important}

  /* EXIT READER */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-reader-exit-inline{
    display:block!important;
    padding-top:clamp(.16rem,.6svh,.28rem)!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-exit-reader{
    width:100%!important;
    height:clamp(2.9rem,10.8svh,4.15rem)!important;
    min-height:44px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:clamp(.65rem,2.4svh,1rem)!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-exit-glyph{
    display:grid!important;
    place-items:center!important;
    width:clamp(1.65rem,5.8svh,2.25rem)!important;
    height:clamp(1.65rem,5.8svh,2.25rem)!important;
    border-radius:50%!important;
    border:2px solid rgba(139,237,255,.88)!important;
    color:#baf6ff!important;
    font:700 clamp(1.1rem,4svh,1.55rem)/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
    box-shadow:inset 0 0 10px rgba(67,218,249,.14),0 0 8px rgba(67,218,249,.10)!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-exit-label{
    display:inline!important;
    color:#fff!important;
    font:900 clamp(.56rem,2svh,.76rem)/1 var(--remote-font)!important;
    letter-spacing:.075em!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #exitReaderBtn.is-prime-pressed .cr-exit-glyph{
    border-color:var(--press-color)!important;
    color:var(--press-color)!important;
    box-shadow:inset 0 0 12px rgba(var(--press-rgb),.34),0 0 12px rgba(var(--press-rgb),.62)!important;
  }

  /* Reusable engraved section header with flanking hairlines. */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-picker::before,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup[aria-label="Zoom controls"]::before,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-enhance-group::before,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup:has(#enhanceBtn)::before{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    grid-column:1/-1!important;
    width:100%!important;
    height:clamp(1rem,3.6svh,1.35rem)!important;
    margin:0!important;
    padding:0 23%!important;
    box-sizing:border-box!important;
    color:#eaf8fb!important;
    background:
      linear-gradient(var(--remote-line),var(--remote-line)) left center/20% 1px no-repeat,
      linear-gradient(var(--remote-line),var(--remote-line)) right center/20% 1px no-repeat!important;
    font:800 clamp(.46rem,1.7svh,.64rem)/1 var(--remote-font)!important;
    letter-spacing:.085em!important;
    white-space:nowrap!important;
    text-align:center!important;
    text-shadow:0 1px 0 #000,0 0 7px rgba(111,234,255,.12)!important;
    opacity:1!important;
  }

  /* MOTION GRAPHICS */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-picker{
    display:grid!important;
    grid-template-columns:minmax(44px,.72fr) minmax(0,1.8fr) minmax(44px,.72fr)!important;
    grid-template-rows:auto auto!important;
    align-items:center!important;
    gap:clamp(.34rem,1.2svh,.5rem)!important;
    padding-top:clamp(.18rem,.7svh,.32rem)!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-picker::before{
    content:"MOTION GRAPHICS"!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #motionBgPrevBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar #motionBgNextBtn{
    grid-row:2!important;
    width:100%!important;
    min-width:44px!important;
    height:clamp(2.8rem,10.6svh,4rem)!important;
    min-height:44px!important;
    padding:0!important;
    font:300 clamp(1.9rem,7svh,2.7rem)/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
    color:#e9fbff!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #motionBgPrevBtn{grid-column:1!important}
  .cr-shell[data-view="reader"]>.cr-toolbar #motionBgNextBtn{grid-column:3!important}
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-label{
    grid-column:2!important;
    grid-row:2!important;
    width:100%!important;
    min-width:0!important;
    height:clamp(2.8rem,10.6svh,4rem)!important;
    min-height:44px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:clamp(.15rem,.7svh,.3rem)!important;
    padding:.32rem .25rem!important;
    border:1px solid rgba(163,214,227,.56)!important;
    border-radius:clamp(.7rem,2.5svh,1.08rem)!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.04),transparent 18%),
      radial-gradient(90% 70% at 50% 0%,rgba(39,218,255,.12),transparent 65%),
      linear-gradient(180deg,#06131a,#01070b 100%)!important;
    box-shadow:
      inset 0 0 22px rgba(35,212,250,.08),
      inset 0 0 0 1px rgba(255,255,255,.025),
      0 4px 10px rgba(0,0,0,.36)!important;
    overflow:hidden!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-label::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    background:
      repeating-linear-gradient(180deg,rgba(104,236,255,.025) 0 1px,transparent 1px 3px),
      linear-gradient(110deg,transparent 0 43%,rgba(255,255,255,.055) 48%,transparent 55%)!important;
    pointer-events:none!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-label::after{
    content:""!important;
    position:absolute!important;
    left:18%!important;
    right:18%!important;
    bottom:.28rem!important;
    height:1px!important;
    background:linear-gradient(90deg,transparent,#62e9ff,transparent)!important;
    box-shadow:0 0 7px rgba(91,231,255,.46)!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-title{
    position:relative!important;
    z-index:2!important;
    color:#47dfff!important;
    font:900 clamp(.48rem,1.8svh,.68rem)/1.05 var(--remote-font)!important;
    letter-spacing:.055em!important;
    text-align:center!important;
    white-space:nowrap!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-count{
    position:relative!important;
    z-index:2!important;
    color:#fff!important;
    font:900 clamp(.5rem,1.9svh,.72rem)/1 var(--remote-font)!important;
    letter-spacing:.08em!important;
  }

  /* ZOOM & VIEW, visually reordered + / − / FIT. */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup[aria-label="Zoom controls"]{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:auto auto!important;
    align-items:stretch!important;
    gap:clamp(.34rem,1.2svh,.5rem)!important;
    padding-top:clamp(.12rem,.55svh,.24rem)!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup[aria-label="Zoom controls"]::before{
    content:"ZOOM & VIEW"!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomInBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomOutBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomResetBtn{
    grid-row:2!important;
    width:100%!important;
    min-width:0!important;
    height:clamp(3.2rem,12svh,4.55rem)!important;
    min-height:44px!important;
    display:grid!important;
    grid-template-rows:1fr auto!important;
    place-items:center!important;
    align-content:center!important;
    gap:.15rem!important;
    padding:.38rem .16rem .42rem!important;
    font-size:0!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomInBtn{grid-column:1!important}
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomOutBtn{grid-column:2!important}
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomResetBtn{grid-column:3!important}
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomInBtn::before,
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomOutBtn::before,
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomResetBtn::before{
    position:static!important;
    inset:auto!important;
    display:block!important;
    border:0!important;
    opacity:1!important;
    color:#e9fbff!important;
    font:500 clamp(1.55rem,6svh,2.3rem)/.8 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomInBtn::before{content:"+"!important}
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomOutBtn::before{content:"−"!important}
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomResetBtn::before{
    content:"⌗"!important;
    font-size:clamp(1.28rem,4.7svh,1.9rem)!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomInBtn::after,
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomOutBtn::after,
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomResetBtn::after{
    display:block!important;
    color:#fff!important;
    font:900 clamp(.43rem,1.55svh,.58rem)/1 var(--remote-font)!important;
    letter-spacing:.035em!important;
    white-space:nowrap!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomInBtn::after{content:"ZOOM IN"!important}
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomOutBtn::after{content:"ZOOM OUT"!important}
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomResetBtn::after{content:"FIT TO VIEW"!important}
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomResetBtn>span{display:none!important}

  /* ENHANCEMENTS */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-enhance-group,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup:has(#enhanceBtn){
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
    gap:clamp(.26rem,.85svh,.38rem)!important;
    padding-top:clamp(.1rem,.4svh,.18rem)!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-enhance-group::before,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup:has(#enhanceBtn)::before{
    content:"ENHANCEMENTS"!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn{
    grid-row:2!important;
    width:100%!important;
    min-width:0!important;
    height:clamp(3rem,10.9svh,4.2rem)!important;
    min-height:44px!important;
    display:grid!important;
    grid-template-columns:auto 1fr auto!important;
    align-items:center!important;
    gap:clamp(.65rem,2.5svh,1.1rem)!important;
    padding:.36rem clamp(.7rem,2.7svh,1.1rem)!important;
    font-size:0!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn .cr-status-dot{
    position:relative!important;
    display:grid!important;
    place-items:center!important;
    width:clamp(1.65rem,6svh,2.25rem)!important;
    height:clamp(1.3rem,4.6svh,1.75rem)!important;
    border:2px solid #55e9ff!important;
    border-radius:.42rem!important;
    background:rgba(20,226,255,.10)!important;
    box-shadow:inset 0 0 10px rgba(68,228,255,.15),0 0 9px rgba(68,228,255,.16)!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn .cr-status-dot::after{
    content:"4K"!important;
    color:#07161d!important;
    background:#5deaff!important;
    border-radius:.18rem!important;
    padding:.05rem .14rem!important;
    font:950 clamp(.52rem,2svh,.72rem)/1 var(--remote-font)!important;
    text-shadow:none!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn>span:last-child{
    display:block!important;
    font-size:0!important;
    text-align:left!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn>span:last-child::after{
    content:"ENHANCE"!important;
    color:#fff!important;
    font:900 clamp(.58rem,2.1svh,.78rem)/1 var(--remote-font)!important;
    letter-spacing:.06em!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn::after{
    content:"›"!important;
    display:block!important;
    color:#e9fbff!important;
    font:300 clamp(1.9rem,7svh,2.7rem)/.8 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
    line-height:.8!important;
  }
  .cr-shell[data-view="reader"][data-enhanced="true"] #enhanceBtn,
  .cr-shell[data-view="reader"] #enhanceBtn[aria-pressed="true"]{
    border-color:rgba(255,211,63,.54)!important;
    box-shadow:
      inset 0 0 16px rgba(255,211,63,.09),
      inset 0 0 0 1px rgba(255,211,63,.16),
      0 0 10px rgba(255,211,63,.10)!important;
  }

  /* Dynamic PAGE x - y / n with engraved lines. */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-pill-page-readout{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:clamp(.28rem,1svh,.45rem) 24%!important;
    box-sizing:border-box!important;
    border:0!important;
    color:#fff!important;
    background:
      linear-gradient(var(--remote-line),var(--remote-line)) left center/20% 1px no-repeat,
      linear-gradient(var(--remote-line),var(--remote-line)) right center/20% 1px no-repeat!important;
    font:900 clamp(.47rem,1.75svh,.65rem)/1 var(--remote-font)!important;
    letter-spacing:.06em!important;
    text-align:center!important;
    white-space:nowrap!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-pill-page-readout::before{
    content:"PAGE "!important;
  }

  /* Pressed icons and nested labels inherit their channel color. */
  .cr-shell[data-view="reader"]>.cr-toolbar .is-prime-pressed .cr-exit-label,
  .cr-shell[data-view="reader"]>.cr-toolbar .is-prime-pressed>span:last-child::after,
  .cr-shell[data-view="reader"]>.cr-toolbar .is-prime-pressed .cr-status-dot::after{
    color:var(--press-color)!important;
    text-shadow:0 0 10px rgba(var(--press-rgb),.62)!important;
  }
}

/* Preserve 44px touch floors on the shortest iPhone landscape viewport. */
@media (orientation:landscape) and (max-height:430px){
  .cr-shell[data-view="reader"]>.cr-toolbar{
    width:clamp(11.8rem,50svh,13.5rem)!important;
    min-width:clamp(11.8rem,50svh,13.5rem)!important;
    max-width:clamp(11.8rem,50svh,13.5rem)!important;
    gap:.12rem!important;
    padding:.45rem!important;
    border-radius:1.45rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #pillPrevBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar #pillNextBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar #motionBgPrevBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar #motionBgNextBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-label,
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomInBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomOutBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomResetBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-exit-reader{
    min-height:44px!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #pillPrevBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar #pillNextBtn{height:48px!important}
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-exit-reader{height:44px!important}
  .cr-shell[data-view="reader"]>.cr-toolbar #motionBgPrevBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar #motionBgNextBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-label{height:44px!important}
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomInBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomOutBtn,
  .cr-shell[data-view="reader"]>.cr-toolbar #zoomResetBtn{height:49px!important}
  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn{height:44px!important}
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-picker::before,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup[aria-label="Zoom controls"]::before,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-enhance-group::before,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-toolgroup:has(#enhanceBtn)::before{
    height:.82rem!important;
    font-size:.42rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-pill-page-readout{
    padding:.18rem 24%!important;
    font-size:.42rem!important;
  }
}


/* R42 PORTRAIT HARDWARE REMOTE SKIN */
/* Match the approved landscape hardware language while preserving the existing
   compact portrait pill geometry, grid, position, and control footprint. */
@media (orientation:portrait) and (max-width:900px){
  .cr-shell[data-view="reader"]>.cr-toolbar{
    --remote-cyan:#6feaff;
    --remote-ice:#eefcff;
    --remote-font:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
    isolation:isolate!important;
    border:1px solid rgba(191,221,231,.74)!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 12%,transparent 28%,transparent 80%,rgba(255,255,255,.035) 100%),
      radial-gradient(90% 150% at 50% -50%,rgba(151,239,255,.14),transparent 64%),
      linear-gradient(90deg,#7f949d 0%,#283d47 1.2%,#0e1b22 3.6%,#041019 7%,#06141d 93%,#132630 96.4%,#748c96 98.8%,#c0d4db 100%)!important;
    box-shadow:
      0 14px 32px rgba(0,0,0,.56),
      0 0 18px rgba(47,215,255,.14),
      inset 0 0 0 1px rgba(255,255,255,.18),
      inset 0 0 0 3px rgba(4,13,19,.88),
      inset 0 0 0 5px rgba(129,175,190,.14),
      inset 0 0 24px rgba(0,0,0,.68)!important;
    backdrop-filter:blur(20px) saturate(1.2)!important;
    -webkit-backdrop-filter:blur(20px) saturate(1.2)!important;
  }

  /* Cyan edge channels inside the existing portrait pill shape. */
  .cr-shell[data-view="reader"]>.cr-toolbar::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:0!important;
    inset:3px!important;
    border-radius:calc(1.15rem - 3px)!important;
    border:1px solid rgba(163,211,223,.42)!important;
    background:
      linear-gradient(90deg,rgba(92,232,255,.055),transparent 8%,transparent 92%,rgba(92,232,255,.055)),
      linear-gradient(180deg,rgba(255,255,255,.04),transparent 20%,transparent 80%,rgba(255,255,255,.02))!important;
    box-shadow:
      inset 2px 0 0 rgba(83,226,255,.60),
      inset -2px 0 0 rgba(83,226,255,.60),
      inset 0 1px 0 rgba(219,249,255,.27),
      inset 0 -1px 0 rgba(64,210,245,.20),
      inset 0 0 14px rgba(44,205,244,.06)!important;
    pointer-events:none!important;
    opacity:1!important;
  }

  /* Glass reflection only. Absolute positioning keeps the current pill dimensions unchanged. */
  .cr-shell[data-view="reader"]>.cr-toolbar::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:1!important;
    left:6%!important;
    right:6%!important;
    top:2px!important;
    width:auto!important;
    height:42%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:50% 50% 42% 42% / 42% 42% 58% 58%!important;
    background:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.018) 52%,transparent 100%)!important;
    pointer-events:none!important;
    opacity:.72!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar>*{
    position:relative!important;
    z-index:2!important;
  }

  /* Same smoked-glass key material as landscape, without changing portrait sizing. */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control{
    --press-color:#6feaff;
    --press-rgb:111,234,255;
    position:relative!important;
    box-sizing:border-box!important;
    border:1px solid rgba(173,219,231,.56)!important;
    color:var(--remote-ice)!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 16%,transparent 38%),
      radial-gradient(120% 90% at 50% -28%,rgba(111,234,255,.13),transparent 60%),
      linear-gradient(180deg,rgba(47,74,87,.96) 0%,rgba(19,42,53,.98) 44%,rgba(5,18,27,.995) 100%)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.21),
      inset 0 -2px 0 rgba(0,0,0,.55),
      inset 0 0 0 1px rgba(74,213,245,.05),
      inset 0 0 12px rgba(57,212,247,.04),
      0 1px 0 rgba(135,230,249,.14),
      0 3px 7px rgba(0,0,0,.34),
      0 0 8px rgba(52,211,248,.09)!important;
    font-family:var(--remote-font)!important;
    font-weight:900!important;
    text-shadow:0 0 7px rgba(111,234,255,.20)!important;
    -webkit-tap-highlight-color:transparent!important;
    touch-action:manipulation!important;
    transform:translateZ(0)!important;
    transition:
      transform 90ms cubic-bezier(.2,.8,.2,1),
      border-color 220ms ease,
      color 220ms ease,
      text-shadow 220ms ease,
      box-shadow 220ms ease,
      filter 220ms ease!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control::before{
    content:""!important;
    position:absolute!important;
    inset:2px!important;
    border-radius:inherit!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    pointer-events:none!important;
  }

  /* Same per-key illumination behavior as landscape. */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control.is-prime-pressed{
    color:var(--press-color)!important;
    border-color:var(--press-color)!important;
    transform:translateY(1.5px) scale(.982)!important;
    filter:saturate(1.18) brightness(1.06)!important;
    text-shadow:
      0 0 5px rgba(var(--press-rgb),.94),
      0 0 13px rgba(var(--press-rgb),.62)!important;
    box-shadow:
      inset 0 3px 7px rgba(0,0,0,.56),
      inset 0 0 18px rgba(var(--press-rgb),.28),
      inset 0 0 0 1px rgba(var(--press-rgb),.78),
      0 0 6px rgba(var(--press-rgb),.72),
      0 0 17px rgba(var(--press-rgb),.42)!important;
  }

  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control.is-prime-pressed::before,
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-control.is-prime-pressed::after{
    color:var(--press-color)!important;
    text-shadow:
      0 0 6px rgba(var(--press-rgb),.94),
      0 0 13px rgba(var(--press-rgb),.58)!important;
  }

  #pillPrevBtn{--press-color:#2f80ff;--press-rgb:47,128,255}
  #pillNextBtn{--press-color:#19e6ff;--press-rgb:25,230,255}
  #exitReaderBtn{--press-color:#ff4664;--press-rgb:255,70,100}
  #motionBgPrevBtn{--press-color:#9a67ff;--press-rgb:154,103,255}
  #motionBgNextBtn{--press-color:#ff46d4;--press-rgb:255,70,212}
  #zoomInBtn{--press-color:#45f28d;--press-rgb:69,242,141}
  #zoomOutBtn{--press-color:#ffb449;--press-rgb:255,180,73}
  #zoomResetBtn{--press-color:#36e7d2;--press-rgb:54,231,210}
  #enhanceBtn{--press-color:#ffd33f;--press-rgb:255,211,63}
  #spatialBtn{--press-color:#7e8cff;--press-rgb:126,140,255}

  /* Exit key: matching chrome/cyan ring, compact portrait shape retained. */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-exit-reader{
    background:
      linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.035) 20%,transparent 42%),
      linear-gradient(180deg,rgba(45,73,87,.96),rgba(7,22,31,.99))!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-exit-glyph{
    border-color:rgba(139,237,255,.78)!important;
    color:#baf6ff!important;
    box-shadow:inset 0 0 8px rgba(67,218,249,.12),0 0 7px rgba(67,218,249,.09)!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #exitReaderBtn.is-prime-pressed .cr-exit-glyph{
    border-color:var(--press-color)!important;
    color:var(--press-color)!important;
    box-shadow:inset 0 0 10px rgba(var(--press-rgb),.32),0 0 11px rgba(var(--press-rgb),.56)!important;
  }

  /* OLED motion display mirrors the landscape display without changing its portrait slot. */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-label{
    position:relative!important;
    border:1px solid rgba(163,214,227,.52)!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.04),transparent 18%),
      radial-gradient(90% 85% at 50% -18%,rgba(39,218,255,.11),transparent 64%),
      linear-gradient(180deg,#06131a,#01070b 100%)!important;
    box-shadow:
      inset 0 0 15px rgba(35,212,250,.075),
      inset 0 0 0 1px rgba(255,255,255,.022),
      0 3px 8px rgba(0,0,0,.32)!important;
    overflow:hidden!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-label::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    background:
      repeating-linear-gradient(180deg,rgba(104,236,255,.024) 0 1px,transparent 1px 3px),
      linear-gradient(110deg,transparent 0 43%,rgba(255,255,255,.05) 48%,transparent 55%)!important;
    pointer-events:none!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-title{
    position:relative!important;
    z-index:2!important;
    color:#47dfff!important;
    text-shadow:0 0 8px rgba(71,223,255,.30)!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-motion-count{
    position:relative!important;
    z-index:2!important;
    color:#fff!important;
  }

  /* Enhance button gets the same illuminated 4K badge treatment while keeping current width. */
  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn{
    display:grid!important;
    grid-template-columns:auto 1fr!important;
    align-items:center!important;
    gap:.3rem!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn .cr-status-dot{
    position:relative!important;
    display:grid!important;
    place-items:center!important;
    width:.9rem!important;
    height:.72rem!important;
    border:1px solid #55e9ff!important;
    border-radius:.24rem!important;
    background:rgba(20,226,255,.10)!important;
    box-shadow:inset 0 0 7px rgba(68,228,255,.14),0 0 7px rgba(68,228,255,.13)!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn .cr-status-dot::after{
    content:"4K"!important;
    color:#06151c!important;
    background:#5deaff!important;
    border-radius:.12rem!important;
    padding:.02rem .08rem!important;
    font:950 .28rem/1 var(--remote-font)!important;
    text-shadow:none!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn>span:last-child{
    font-size:0!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar #enhanceBtn>span:last-child::after{
    content:"ENHANCE"!important;
    color:#fff!important;
    font:900 .34rem/1 var(--remote-font)!important;
    letter-spacing:.055em!important;
  }
  .cr-shell[data-view="reader"][data-enhanced="true"] #enhanceBtn,
  .cr-shell[data-view="reader"] #enhanceBtn[aria-pressed="true"]{
    border-color:rgba(255,211,63,.50)!important;
    box-shadow:
      inset 0 0 13px rgba(255,211,63,.08),
      inset 0 0 0 1px rgba(255,211,63,.14),
      0 0 8px rgba(255,211,63,.09)!important;
  }

  /* Spatial remains portrait-only where eligible, but now belongs to the same hardware family. */
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-spatial-toggle{
    background:
      linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.035) 20%,transparent 42%),
      linear-gradient(180deg,rgba(45,73,87,.96),rgba(7,22,31,.99))!important;
  }
  .cr-shell[data-view="reader"]>.cr-toolbar .cr-spatial-toggle.is-prime-pressed{
    border-color:var(--press-color)!important;
  }
}