*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --dh:84px;--mbh:42px;--tbh:40px;--r:13px;
  --mob-nav-w:56px;
  --mob-widget-gap:10px;
  --sh:0 20px 60px rgba(0,0,0,.65),0 4px 14px rgba(0,0,0,.4);
  --sh-in:0 6px 20px rgba(0,0,0,.2);
}
html,body{width:100%;height:100%;overflow:hidden;
  font-family:'Barlow',system-ui,sans-serif;
  user-select:none;-webkit-user-select:none;background:#080810;}

/* BG layers */
#bgc{position:fixed;z-index:0;pointer-events:none;}
/* Video background layer */
#vid-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;display:none;
  background:#000;overflow:hidden;
}
#vid-bg video{
  position:absolute;
  width:177.78vh; height:56.25vw;
  min-width:100%; min-height:100%;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  object-fit:cover;
}

/* MENU BAR */
#mb{
  position:fixed;top:0;left:0;right:0;height:var(--mbh);
  background:rgba(14,14,20,.84);backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;z-index:9999;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mb-left{display:flex;align-items:center;gap:1px;flex:1;min-width:0;}
.mb-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.sig-wrap{
  width:auto;height:auto;display:flex;align-items:center;justify-content:center;
  cursor:pointer;border-radius:7px;transition:background .15s;flex-shrink:0;margin-right:8px;
}
/* Tablet / desktop: more breathing room between logo and nav buttons.
   This MUST come after the base .sig-wrap rule to win the cascade. */
@media (min-width: 768px){
  .sig-wrap{ margin-right: 56px !important; }
}
.sig-wrap:hover{background:rgba(255,255,255,.13);}
.sig-wrap img{height:28px;width:auto;display:block;}
.sig-wrap.logo-wide{width:auto;min-width:28px;border-radius:5px;}
.cbt{
  padding:3px 10px;border-radius:5px;font-size:12px;font-weight:500;
  letter-spacing:.04em;color:rgba(255,255,255,.72);cursor:pointer;
  transition:background .14s,color .14s;white-space:nowrap;
}
.cbt:hover{background:rgba(255,255,255,.11);color:#fff;}
.cbt.active{color:#fff;background:rgba(255,255,255,.17);}
#clock{font-size:12px;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums;}
#set-btn{
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;border-radius:50%;transition:background .15s,transform .35s;
}
#set-btn:hover{background:rgba(255,255,255,.16);}
#set-btn.open{transform:rotate(45deg);}
#set-btn svg{width:15px;height:15px;fill:rgba(255,255,255,.78);}

/* SETTINGS PANEL */
#spanel{
  position:fixed;top:calc(var(--mbh) + 8px);right:10px;width:290px;
  background:rgba(18,18,26,.96);backdrop-filter:blur(30px) saturate(200%);
  -webkit-backdrop-filter:blur(30px) saturate(200%);
  border:1px solid rgba(255,255,255,.14);border-radius:16px;
  z-index:10000;padding:16px;
  box-shadow:0 12px 42px rgba(0,0,0,.75);
  display:none;
}
#spanel.open{display:block;animation:panIn .2s cubic-bezier(.34,1.3,.64,1);}
@keyframes panIn{from{opacity:0;transform:translateY(-8px) scale(.95);}to{opacity:1;transform:none;}}
.spt{font-size:10px;font-weight:600;color:rgba(255,255,255,.42);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;}
/* two rows: 4 canvas + 5 yt = separate grids */
.bg-grid-a{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:7px;}
.bg-grid-b{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:16px;}
.bgsw{
  aspect-ratio:1;border-radius:9px;cursor:pointer;
  border:2px solid transparent;transition:border-color .14s,transform .1s;
  position:relative;overflow:hidden;background:#222;
}
.bgsw img{width:100%;height:100%;object-fit:cover;display:block;}
.bgsw:hover{transform:scale(1.07);}
.bgsw.on{border-color:rgba(255,255,255,.88);}
.bgsw.on::after{content:'✓';position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;color:#fff;font-size:13px;
  font-weight:700;background:rgba(0,0,0,.32);}
/* yt swatch label */
.bgsw-lbl{
  position:absolute;bottom:0;left:0;right:0;
  background:rgba(0,0,0,.55);color:#fff;
  font-size:8px;font-weight:600;letter-spacing:.04em;
  text-align:center;padding:2px 3px;
  pointer-events:none;
}
.side-row{display:flex;align-items:center;justify-content:space-between;}
.side-row label{font-size:12.5px;color:rgba(255,255,255,.8);}
.side-tog{display:flex;gap:5px;}
.dksb{padding:4px 10px;border-radius:7px;font-size:11px;font-weight:600;
  color:rgba(255,255,255,.6);background:rgba(255,255,255,.08);cursor:pointer;
  border:1px solid rgba(255,255,255,.1);transition:all .13s;}
.dksb:hover{background:rgba(255,255,255,.16);}
.dksb.on{background:rgba(255,255,255,.24);color:#fff;border-color:rgba(255,255,255,.4);}

/* STAGE — never changed by setDock; we only adjust padding via CSS vars */
#stage{
  position:fixed;
  top:var(--mbh);left:0;right:0;bottom:0;
  overflow:hidden;z-index:2;
  /* padding shifts working area without moving the element */
  padding-bottom:var(--dh);
  padding-left:0;padding-right:0;
}
/* dock side modes adjust stage padding */
body.dock-l #stage{padding-left:calc(var(--dh) + 2px);padding-bottom:0;}
body.dock-r #stage{padding-right:calc(var(--dh) + 2px);padding-bottom:0;}

/* WINDOWS */
.win{
  position:absolute;min-width:280px;min-height:160px;
  border-radius:var(--r);box-shadow:var(--sh);
  display:flex;flex-direction:column;overflow:hidden;
  will-change:transform;
}
.win.inactive{box-shadow:var(--sh-in);}
/* open pop */
@keyframes winPop{
  0%{transform:scale(.6);opacity:0;}
  65%{transform:scale(1.02);}
  100%{transform:scale(1);opacity:1;}
}
.win{animation:winPop .22s ease forwards;}

/* Mac genie-style close: shrink toward bottom-center and fade */
/* closing: pointer-events killed immediately; transition injected by JS */
.win.closing{ pointer-events:none; }

/* minimize squish to dock */
@keyframes winMin{
  0%  {transform:scale(1)   translateY(0);  opacity:1;}
  100%{transform:scale(0.08) translateY(500px);opacity:0;}
}
.win.minimizing{
  animation:winMin .3s cubic-bezier(.4,0,.6,1) forwards;
  pointer-events:none;
}

/* maximize */
.win.anim-max{transition:left .22s ease,top .22s ease,width .22s ease,height .22s ease;}

/* TITLE BAR */
.tb{
  height:var(--tbh);background:rgba(0,0,0,.80);
  border-bottom:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;padding:0 12px;gap:8px;
  cursor:default;flex-shrink:0;border-radius:var(--r) var(--r) 0 0;
}
.win.inactive .tb{background:rgba(0,0,0,.65);}
.tb-center{flex:1;text-align:center;pointer-events:none;min-width:0;}
.tb-name{font-size:12.5px;font-weight:600;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb-sub{font-size:9px;font-weight:400;color:rgba(255,255,255,.5);letter-spacing:.05em;text-transform:uppercase;margin-top:1px;}
.tls{display:flex;gap:22px;align-items:center;flex-shrink:0;}
.tl{width:13px;height:13px;border-radius:50%;border:none;outline:none;
  cursor:pointer;position:relative;flex-shrink:0;transition:filter .1s;}
.tl:hover{filter:brightness(.8);}
.tl:active{transform:scale(.88);}
.tlc{width:12.9px;height:12.9px;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.22);}
.tlm{display:none;}
.tlx{width:12.9px;height:12.9px;background:#28c840;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18);}
.tls:hover .tlc::after{content:'✕';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:8px;color:rgba(0,0,0,.55);line-height:1;}
.tls:hover .tlx::after{content:'+';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:9px;color:rgba(0,0,0,.55);line-height:1;}
@media(max-width:900px){
  .tlc{width:15px;height:15px;}
  .tlx{width:15px;height:15px;}
}

/* WINDOW CONTENT */
.wcon{flex:1;background:#16161c;overflow:hidden;position:relative;
  display:flex;flex-direction:column;align-items:stretch;}

/* Iframe web window */
.win-iframe{
  width:100%;height:100%;border:none;display:block;
  background:#fff;
}

/* Zoom toolbar inside image windows */
.zoom-bar{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:5px 10px;background:rgba(10,10,16,.78);
  border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
}
.zoom-bar button{
  width:22px;height:22px;border-radius:5px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);color:#fff;font-size:14px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .12s;padding:0;font-family:system-ui;
}
.zoom-bar button:hover{background:rgba(255,255,255,.2);}
.zoom-bar button:active{background:rgba(255,255,255,.3);}


.slideshow-wrap{
  flex:1;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:#16161c;
}

/* ── Slide+blur keyframes — applied to the SLOT div (full viewport size) ─ */
/* Exit: current slot slides out left with blur, incoming enters from right  */
@keyframes ss-exit-left {
  0%   { transform:translateX(0);    filter:blur(0px);   opacity:1; }
  100% { transform:translateX(-100%);filter:blur(14px);  opacity:0; }
}
@keyframes ss-exit-right{
  0%   { transform:translateX(0);    filter:blur(0px);   opacity:1; }
  100% { transform:translateX(100%); filter:blur(14px);  opacity:0; }
}
@keyframes ss-enter-right{
  0%   { transform:translateX(100%); filter:blur(14px);  opacity:0; }
  100% { transform:translateX(0);    filter:blur(0px);   opacity:1; }
}
@keyframes ss-enter-left {
  0%   { transform:translateX(-100%);filter:blur(14px);  opacity:0; }
  100% { transform:translateX(0);    filter:blur(0px);   opacity:1; }
}

/* Each slot fills the entire wrap — image is centred inside by flexbox */
.ss-slot{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  will-change:transform,filter,opacity;
}
.ss-slot img{
  max-width:100%;max-height:100%;
  object-fit:contain;display:block;
  pointer-events:none;user-select:none;
}

/* Animation classes — applied to the slot div, not the img */
.ss-slot.exit-left  { animation:ss-exit-left  .45s cubic-bezier(.4,0,.6,1) both; }
.ss-slot.exit-right { animation:ss-exit-right .45s cubic-bezier(.4,0,.6,1) both; }
.ss-slot.enter-right{ animation:ss-enter-right .45s cubic-bezier(.2,0,.2,1) both; }
.ss-slot.enter-left { animation:ss-enter-left  .45s cubic-bezier(.2,0,.2,1) both; }

.ss-slot.ss-back  { z-index:1; }
.ss-slot.ss-front { z-index:2; }
.ss-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:10;
  transition:background .15s,transform .15s;
  user-select:none;-webkit-user-select:none;
}
.ss-btn:hover{background:rgba(0,0,0,.72);transform:translateY(-50%) scale(1.08);}
.ss-btn:active{transform:translateY(-50%) scale(.94);}
.ss-btn.ss-prev{left:12px;}
.ss-btn.ss-next{right:12px;}
.ss-counter{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  font-family:'Barlow',sans-serif;font-size:11px;font-weight:600;
  color:rgba(255,255,255,.65);letter-spacing:.1em;text-transform:uppercase;
  background:rgba(0,0,0,.45);padding:3px 10px;border-radius:10px;
  pointer-events:none;
}

/* ── BOOK FLIP ─────────────────────────────────────────────────────────────── */
.bf-wrap{
  flex:1;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:#0e0e14;
  perspective:1400px;
}
/* The static page that sits beneath everything */
.bf-page-base{
  position:absolute;
  max-width:88%;max-height:88%;
  object-fit:contain;
  display:block;
  pointer-events:none;
  user-select:none;
}
/* Container that holds the flip animation — same size as the image */
.bf-flipper-wrap{
  position:absolute;
  /* sized by JS to match rendered image dimensions */
  transform-style:preserve-3d;
}
/* The folding half — covers the right or left half of the page */
.bf-flap{
  position:absolute;
  top:0;
  width:50%;height:100%;
  transform-origin:left center; /* forward: fold from right edge of left half */
  transform-style:preserve-3d;
  /* transition driven entirely by JS classList changes */
}
.bf-flap.from-right{ transform-origin:left center; left:50%; }
.bf-flap.from-left { transform-origin:right center; left:0; }

/* Front face of the flap (shows receding old page) */
.bf-flap-front,
.bf-flap-back{
  position:absolute;inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  overflow:hidden;
}
.bf-flap-back{
  transform:rotateY(180deg);
}
/* Images inside faces — positioned to show correct half of source image */
.bf-flap-front img,
.bf-flap-back  img{
  position:absolute;
  top:0;height:100%;
  object-fit:cover;
  pointer-events:none;
  user-select:none;
  display:block;
}
/* Gradient shadow that sweeps across during the turn */
.bf-shadow{
  position:absolute;inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .05s;
}
.bf-flap-front .bf-shadow{
  background:linear-gradient(to left, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 100%);
}
.bf-flap-back .bf-shadow{
  background:linear-gradient(to right, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 100%);
}
/* Spine glow under the fold */
.bf-spine{
  position:absolute;top:0;bottom:0;width:4px;
  background:linear-gradient(to right, rgba(255,255,255,.18), rgba(255,255,255,.04));
  pointer-events:none;opacity:0;transition:opacity .1s;
  z-index:20;
}
/* Page counter */
.bf-counter{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  font-family:'Barlow',sans-serif;font-size:11px;font-weight:600;
  color:rgba(255,255,255,.65);letter-spacing:.1em;text-transform:uppercase;
  background:rgba(0,0,0,.45);padding:3px 10px;border-radius:10px;
  pointer-events:none;z-index:30;white-space:nowrap;
}
/* Hint text on first open */
.bf-hint{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  font-family:'Barlow',sans-serif;font-size:10px;font-weight:500;
  color:rgba(255,255,255,.38);letter-spacing:.08em;text-transform:uppercase;
  pointer-events:none;z-index:30;white-space:nowrap;
  animation:bfHintFade 4s ease 1.5s forwards;
}
@keyframes bfHintFade{
  0%{opacity:1} 70%{opacity:1} 100%{opacity:0}
}
.zoom-pct{
  font-size:10.5px;font-weight:600;color:rgba(255,255,255,.65);
  font-family:'Barlow',sans-serif;min-width:36px;text-align:center;
  letter-spacing:.03em;
}

/* Zoom/pan viewport */
.img-viewport{
  flex:1;overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;
  cursor:default;
}
.img-viewport.can-pan{cursor:grab;}
.img-viewport.panning{cursor:grabbing;}
.img-viewport img{
  /* JS sets explicit width/height and translate — do NOT apply CSS constraints here */
  position:absolute;
  display:block;
  top:0; left:0;
  /* image-rendering:auto lets the browser use high-quality downscaling (Lanczos/bicubic) */
  image-rendering:auto;
  pointer-events:none;
  user-select:none;
  will-change:transform;
}
.wcon iframe{width:100%;height:100%;border:none;background:#fff;display:block;}
.rh{position:absolute;bottom:0;right:0;width:22px;height:22px;cursor:nwse-resize;z-index:10;}
.rh::after{content:'';position:absolute;bottom:5px;right:5px;width:9px;height:9px;
  border-right:2px solid rgba(255,255,255,.22);border-bottom:2px solid rgba(255,255,255,.22);}

/* Overlay link badge — bottom-right corner of image/vimeo windows */
.win-link-badge{
  position:absolute;
  bottom:12px;right:12px;
  z-index:20;
  background:rgba(14,16,28,.88);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.22);
  border-radius:10px;
  padding:9px 14px;
  cursor:pointer;
  font-family:'Barlow',sans-serif;
  font-size:11px;font-weight:700;
  color:#fff;
  letter-spacing:.07em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 4px 18px rgba(0,0,0,.5);
  transition:background .15s,transform .12s,box-shadow .15s;
  user-select:none;
}
.win-link-badge:hover{
  background:rgba(60,100,220,.85);
  transform:translateY(-1px);
  box-shadow:0 6px 22px rgba(0,0,0,.6);
}
.win-link-badge:active{ transform:translateY(0); }

/* ── VIDEO MODAL ── */
#video-modal{
  position:fixed;inset:0;z-index:99980;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  animation:vmFadeIn .22s ease;
}
#video-modal.open{ display:flex; }
@keyframes vmFadeIn{from{opacity:0;}to{opacity:1;}}
#video-modal-inner{
  position:relative;
  width:min(860px,92vw);
  background:#000;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.85);
  animation:vmScale .25s cubic-bezier(.34,1.3,.64,1);
}
@keyframes vmScale{from{transform:scale(.88);opacity:0;}to{transform:scale(1);opacity:1;}}
/* 16:9 aspect ratio container */
#video-modal-ratio{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
#video-modal-ratio iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:none;display:block;
}
#video-modal-close{
  position:absolute;top:10px;right:12px;
  z-index:10;
  background:rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.22);
  border-radius:8px;
  color:#fff;font-size:18px;line-height:1;
  padding:5px 9px;cursor:pointer;
  transition:background .14s;
}
#video-modal-close:hover{ background:rgba(220,50,50,.8); }
#video-modal-title{
  padding:12px 16px;
  font-family:'Barlow',sans-serif;font-size:13px;font-weight:600;
  color:rgba(255,255,255,.7);letter-spacing:.05em;
  background:rgba(16,16,24,.9);
}

/* ── SIK APP HINT WIDGET — lives inside the window, absolute-positioned ── */
.sik-hint-inwin{
  position:absolute;
  left:0;
  top:0;
  width:200px;
  background:rgba(10,12,20,.62);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  overflow:hidden;
  pointer-events:auto;
  box-shadow:0 4px 28px rgba(0,0,0,.6);
  z-index:10;
  user-select:none;
  -webkit-user-select:none;
}
/* Drag handle header */
.sik-hint-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:7px 10px 7px 13px;
  background:rgba(0,0,0,.45);
  border-bottom:1px solid rgba(255,255,255,.1);
  cursor:move;
  touch-action:none;
  flex-shrink:0;
  gap:6px;
}
.sik-hint-header-title{
  font-family:'Barlow',sans-serif;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  flex:1;
  pointer-events:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sik-hint-close{
  font-size:12px;
  color:rgba(255,255,255,.38);
  background:none;
  border:none;
  cursor:pointer;
  line-height:1;
  padding:2px 4px;
  border-radius:4px;
  transition:color .13s, background .13s;
  flex-shrink:0;
}
.sik-hint-close:hover{ color:#fff; background:rgba(255,255,255,.13); }
/* Body padding area */
.sik-hint-body{
  padding:13px 14px 12px;
}
.sik-hint-inwin p{
  font-family:'Barlow',sans-serif;
  font-size:12.5px;
  font-weight:500;
  color:rgba(255,255,255,.88);
  line-height:1.6;
  letter-spacing:.02em;
  margin:0;
  text-align:center;
  pointer-events:none;
}
/* ── STILLIN HARDCOVER ANIMATED TEXT OVERLAY ── */
.stillin-overlay{
  position:absolute;inset:0;
  z-index:15;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  pointer-events:none;
  gap:0;
  padding:15px;
  box-sizing:border-box;
  overflow:hidden;
}
/* Group 1: THE HARDCOVER / DESIGN */
.stillin-g1{
  display:flex;flex-direction:column;align-items:center;
  margin-bottom:18px;
  width:100%;
}
/* Group 2: FOR THE / BEST SELLING NOVEL / THE STILLIN */
.stillin-g2{
  display:flex;flex-direction:column;align-items:center;
  width:100%;
}

.stillin-line{
  font-family:'Barlow',system-ui,sans-serif;
  font-weight:700;
  color:#fff;
  text-align:center;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.15;
  opacity:0;
  will-change:transform,opacity,filter;
  text-shadow:0 2px 8px rgba(0,0,0,.9), 0 4px 24px rgba(0,0,0,.7), 0 8px 40px rgba(0,0,0,.5);
  max-width:100%;
  word-break:break-word;
  overflow-wrap:break-word;
  box-sizing:border-box;
}
.stillin-line.float-in{
  animation: stillinFloat var(--dur,0.55s) cubic-bezier(.22,.68,0,1.2) var(--delay,0s) forwards;
}
.stillin-line.fade-in-only{
  animation: stillinFadeIn var(--dur,0.7s) ease var(--delay,0s) forwards;
}

@keyframes stillinFloat{
  0%  { opacity:0; transform:translateY(-38px); filter:blur(4px); }
  60% { opacity:1; filter:blur(0); }
  100%{ opacity:1; transform:translateY(0);    filter:blur(0); }
}
@keyframes stillinFadeIn{
  0%  { opacity:0; filter:blur(3px); }
  100%{ opacity:1; filter:blur(0); }
}

/* Blur + fade out — added via JS */
@keyframes stillinFadeOut{
  0%  { opacity:1; filter:blur(0); }
  40% { opacity:.8; filter:blur(2px); }
  100%{ opacity:0; filter:blur(10px); }
}
.stillin-g1.fading-out,
.stillin-g2.fading-out{
  animation: stillinFadeOut .9s ease forwards;
}
/* Per-line blur fade-out — applied individually via JS */
.stillin-line.line-fade-out{
  animation: stillinFadeOut .85s ease forwards;
}

/* ── BOOKFLIP FULLSCREEN BUTTON (title bar right side) ─────────── */
.bf-fs-btn{
  padding:3px 10px;border-radius:3px;
  font-family:'Barlow',system-ui,sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.05em;
  color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  cursor:pointer;white-space:nowrap;flex-shrink:0;
  transition:background .13s,color .13s,border-color .13s;
  margin-right:4px;
}
.bf-fs-btn:hover{background:rgba(255,255,255,.22);color:#fff;border-color:rgba(255,255,255,.38);}
.bf-fs-btn:active{transform:scale(.95);}

/* ── BOOKFLIP FULLSCREEN MODAL ──────────────────────────────────── */
#bf-fs-modal{
  position:fixed;inset:0;z-index:99992;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  animation:bfFsIn .22s ease;
}
#bf-fs-modal.open{ display:flex; }
@keyframes bfFsIn{from{opacity:0;}to{opacity:1;}}
#bf-fs-inner-modal{
  position:relative;
  width:min(92vw, 140vh);
  max-height:92vh;
  display:flex;flex-direction:column;
  border-radius:14px;overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.85),0 4px 18px rgba(0,0,0,.5);
}
#bf-fs-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;
  background:rgba(14,14,22,.92);
  border-bottom:1px solid rgba(255,255,255,.10);
  flex-shrink:0;gap:10px;
}
#bf-fs-title{
  font-family:'Barlow',system-ui,sans-serif;
  font-size:12px;font-weight:600;color:rgba(255,255,255,.78);
  letter-spacing:.05em;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#bf-fs-counter-hdr{
  font-family:'Barlow',system-ui,sans-serif;
  font-size:11px;color:rgba(255,255,255,.5);
  letter-spacing:.06em;flex-shrink:0;
}
#bf-fs-close{
  width:26px;height:26px;border-radius:50%;border:none;outline:none;
  background:rgba(255,60,60,.18);color:rgba(255,255,255,.8);
  font-size:13px;line-height:1;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:background .14s;
}
#bf-fs-close:hover{background:rgba(220,50,50,.80);color:#fff;}
#bf-fs-body{
  position:relative;flex:1;
  background:#0a0a10;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:0;
}
#bf-fs-img{
  max-width:100%;max-height:100%;
  object-fit:contain;display:block;
  user-select:none;-webkit-user-select:none;
  pointer-events:none;
}
.bf-fs-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;
  background:rgba(0,0,0,.52);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:10;
  transition:background .15s,transform .15s;
  user-select:none;
}
.bf-fs-nav:hover{background:rgba(0,0,0,.78);transform:translateY(-50%) scale(1.08);}
.bf-fs-nav:active{transform:translateY(-50%) scale(.93);}
#bf-fs-prev{left:14px;}
#bf-fs-next{right:14px;}

/* ── IFRAME/SLIDESHOW FULLSCREEN MODAL ─────────────────────────── */
#iframe-fs-modal{
  position:fixed;inset:0;z-index:99992;
  display:none;flex-direction:column;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  animation:bfFsIn .22s ease;
}
#iframe-fs-modal.open{ display:flex; }
#iframe-fs-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;
  background:rgba(14,14,22,.92);
  border-bottom:1px solid rgba(255,255,255,.10);
  flex-shrink:0;gap:10px;
}
#iframe-fs-title{
  font-family:'Barlow',system-ui,sans-serif;
  font-size:12px;font-weight:600;color:rgba(255,255,255,.78);
  letter-spacing:.05em;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#iframe-fs-close{
  width:26px;height:26px;border-radius:50%;border:none;outline:none;
  background:rgba(255,60,60,.18);color:rgba(255,255,255,.8);
  font-size:13px;line-height:1;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:background .14s;
}
#iframe-fs-close:hover{background:rgba(220,50,50,.80);color:#fff;}
#iframe-fs-body{
  flex:1;position:relative;display:flex;align-items:center;
  justify-content:center;background:#0a0a10;min-height:0;overflow:hidden;
}
#iframe-fs-iframe{
  width:100%;height:100%;border:none;display:block;background:#000;
}
#iframe-fs-img{
  max-width:100%;max-height:100%;object-fit:contain;display:block;
  user-select:none;-webkit-user-select:none;pointer-events:none;
}
.iframe-fs-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;
  background:rgba(0,0,0,.52);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:10;
  transition:background .15s,transform .15s;
  user-select:none;
}
.iframe-fs-nav:hover{background:rgba(0,0,0,.78);transform:translateY(-50%) scale(1.08);}
.iframe-fs-nav:active{transform:translateY(-50%) scale(.93);}
#iframe-fs-prev{left:14px;}
#iframe-fs-next{right:14px;}
#iframe-fs-counter{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  font-family:'Barlow',sans-serif;font-size:11px;font-weight:600;
  color:rgba(255,255,255,.65);letter-spacing:.1em;text-transform:uppercase;
  background:rgba(0,0,0,.45);padding:3px 10px;border-radius:10px;
  pointer-events:none;
}
#sik-fs-modal{
  position:fixed;inset:0;z-index:99990;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  animation:sikFsIn .22s ease;
}
#sik-fs-modal.open{ display:flex; }
@keyframes sikFsIn{from{opacity:0;}to{opacity:1;}}
#sik-fs-inner{
  position:relative;
  width:min(520px,96vw);
  height:min(920px,92vh);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 28px 90px rgba(0,0,0,.9);
  border:1px solid rgba(255,255,255,.12);
  animation:sikFsScale .26s cubic-bezier(.34,1.3,.64,1);
  background:#000;
}
@keyframes sikFsScale{from{transform:scale(.88);opacity:0;}to{transform:scale(1);opacity:1;}}
#sik-fs-inner iframe{
  width:100%;height:100%;border:none;display:block;
}
#sik-fs-close{
  position:absolute;top:12px;right:14px;
  z-index:10;
  background:rgba(0,0,0,.68);
  border:1px solid rgba(255,255,255,.25);
  border-radius:9px;
  color:#fff;font-size:18px;line-height:1;
  padding:5px 10px;cursor:pointer;
  font-family:system-ui;
  transition:background .14s;
}
#sik-fs-close:hover{ background:rgba(210,40,40,.82); }

/* DOCK WRAPPER — clips scroll but not hover zoom */
#dock-wrap{
  position:fixed;
  bottom:8px;left:50%;transform:translateX(-50%);
  height:calc(var(--dh) - 8px);
  max-width:calc(100vw - 88px);
  z-index:9998;
  /* Glass pill */
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(28px) saturate(220%);
  -webkit-backdrop-filter:blur(28px) saturate(220%);
  border:1px solid rgba(255,255,255,.24);border-radius:20px;
  box-shadow:0 4px 28px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.32);
  /* Allow icons to overflow visually while scroll stays inside */
  overflow:visible;
}
body.dock-l #dock-wrap{
  bottom:auto;left:8px;right:auto;top:50%;
  transform:translateY(-50%);
  height:auto;width:calc(var(--dh) - 8px);
  max-width:none;
  max-height:calc(100vh - var(--mbh) - 56px);
}
body.dock-r #dock-wrap{
  bottom:auto;right:8px;left:auto;top:50%;
  transform:translateY(-50%);
  height:auto;width:calc(var(--dh) - 8px);
  max-width:none;
  max-height:calc(100vh - var(--mbh) - 56px);
}

/* DOCK — scroll container inside wrapper */
#dock{
  width:100%;height:100%;
  display:flex;align-items:center;
  padding:0 16px;gap:8px;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  border-radius:20px;
  clip-path:none;
}
body.dock-l #dock,body.dock-r #dock{
  flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  padding:16px 0;gap:8px;
  height:auto;max-height:calc(100vh - var(--mbh) - 56px);
}
#dock::-webkit-scrollbar{height:3px;width:3px;}
#dock::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:2px;}

/* dock items */
.di{
  display:flex;flex-direction:column;align-items:center;
  cursor:pointer;flex-shrink:0;position:relative;
  z-index:1;
}
/* No CSS scale on hover — JS floating preview handles the enlarged view */
.di-ic{width:60px;height:60px;border-radius:14px;object-fit:cover;
  box-shadow:0 3px 10px rgba(0,0,0,.45);display:block;background:#222;
  transition:box-shadow .15s;}
.di:hover .di-ic{box-shadow:0 4px 16px rgba(0,0,0,.65);}
.di-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.82);
  margin-top:3px;opacity:0;transition:opacity .18s;flex-shrink:0;}
.di.open .di-dot{opacity:1;}
body.dock-l .di-dot,body.dock-r .di-dot{margin-top:0;margin-left:3px;}

/* Floating dock preview — absolutely positioned, always fully visible */
#dock-preview{
  position:fixed;
  z-index:99999;
  pointer-events:none;
  display:none;
  flex-direction:column;
  align-items:center;
  gap:6px;
  opacity:1;
  transition:opacity .5s ease;
}
#dock-preview-img{
  width:106px;height:106px;
  border-radius:16px;
  object-fit:cover;
  box-shadow:0 8px 32px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.4);
  border:1.5px solid rgba(255,255,255,.3);
  display:block;
  background:#222;
  transition:filter .6s ease, opacity .5s ease;
}
#dock-preview-lbl{
  background:rgba(16,16,24,.92);color:#fff;
  font-size:11px;font-weight:500;padding:3px 10px;border-radius:7px;
  white-space:nowrap;font-family:'Barlow',sans-serif;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}

/* label tooltip — still used on side docks for text label */
.dlbl{
  position:absolute;
  bottom:calc(100% + 12px);left:50%;
  transform:translateX(-50%) translateY(5px);
  background:rgba(16,16,24,.92);color:#fff;
  font-size:10.5px;font-weight:500;padding:3px 9px;border-radius:7px;
  white-space:nowrap;opacity:0;transition:opacity .14s,transform .14s;
  pointer-events:none;z-index:200;
}
body.dock-l .dlbl{bottom:auto;top:50%;left:calc(100% + 12px);transform:translateY(-50%) translateX(-4px);}
body.dock-r .dlbl{bottom:auto;top:50%;left:auto;right:calc(100% + 12px);transform:translateY(-50%) translateX(4px);}
.dsep{flex-shrink:0;background:rgba(255,255,255,.2);}
body:not(.dock-l):not(.dock-r) .dsep{width:1px;height:38px;margin:0 3px;}
body.dock-l .dsep,body.dock-r .dsep{height:1px;width:38px;margin:3px 0;}

/* scroll arrows — JS positions these flush against the dock ends */
.da{
  position:fixed;z-index:9999;
  width:28px;height:28px;border-radius:50%;
  background:rgba(20,20,32,.88);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.25);
  display:none;align-items:center;justify-content:center;
  cursor:pointer;font-size:14px;color:#fff;
  opacity:0.5;
  transition:background .13s,transform .1s,opacity .13s;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.da:hover{background:rgba(55,55,80,.98);transform:scale(1.1);opacity:0.85;}
.da:active{transform:scale(.92);}

/* desktop icons */
.dsk{
  position:absolute;width:78px;display:flex;flex-direction:column;
  align-items:center;gap:4px;cursor:pointer;padding:6px;border-radius:9px;transition:background .13s;
}
.dsk:hover{background:rgba(255,255,255,.13);}
.dsk img{width:54px;height:54px;border-radius:10px;object-fit:cover;
  box-shadow:0 3px 12px rgba(0,0,0,.55);border:1.5px solid rgba(255,255,255,.22);}
.dsk span{font-size:10.5px;font-weight:500;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
  text-align:center;word-break:break-word;max-width:72px;line-height:1.25;}

/* Shake animation for icon jiggle mode */
@keyframes dskShake{
  0%,100%{transform:rotate(0deg);}
  20%{transform:rotate(-2.5deg);}
  40%{transform:rotate(2.5deg);}
  60%{transform:rotate(-2deg);}
  80%{transform:rotate(2deg);}
}
.dsk.shaking{
  animation:dskShake .5s ease-in-out infinite;
  cursor:move;
}
/* Close badge on shaking icons */
.dsk-close{
  position:absolute;top:-8px;left:-8px;
  width:26px;height:26px;border-radius:50%;
  background:rgba(70,70,80,.97);
  border:2px solid rgba(255,255,255,.6);
  color:#fff;font-size:18px;font-weight:700;
  display:none;align-items:center;justify-content:center;
  line-height:1;cursor:pointer;z-index:10;
  box-shadow:0 2px 8px rgba(0,0,0,.6);
  touch-action:manipulation;
}
.dsk.shaking .dsk-close{display:flex;}


/* category banner — ALL DOCK STATES
   A single background-image approach: the SVG arch is always background-image
   on #catbanner itself — no ::after, no duplication.
   Bottom-dock: element is tall enough to show the arch above the pill.
   Side-dock overrides: height:auto, display:block, full pointer-events. */
#catbanner{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  width:100%;
  /* Height = viewBox aspect ratio (201.6/1000.8 ≈ 20.1vw), clamped */
  height:clamp(120px, 20.1vw, 220px);
  pointer-events:none;
  opacity:0;
  color:rgba(255,255,255,.95);
  font-family:'Barlow',system-ui,sans-serif;
  font-size:13px;font-style:normal;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:16px;
  border-radius:0;
  z-index:9997;
  border:none;
  box-shadow:none;
  cursor:pointer;
  transition:opacity .4s ease;
  white-space:nowrap;
  text-align:center;
  background-image: none;
  background-color: transparent;
}
#catbanner.show{opacity:1;}

/* Side-dock: show the arch SVG and make the full bar interactive */
body.dock-l #catbanner,
body.dock-r #catbanner{
  height:auto;
  display:block;
  padding:28px 0 20px;
  pointer-events:auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1000.8 201.6'%3E%3Cpath fill='rgba(0,0,0,0.40)' d='M800.3,170.8h-45.6s-44.9,2.9-55.8-21.7c-8.3-18.5-23.6-66.2-23.6-66.2,0,0-12.5-42.1-89.4-42.1h-170.9c-76.9,0-89.4,42.1-89.4,42.1,0,0-15.4,47.7-23.6,66.2-10.9,24.5-55.8,21.7-55.8,21.7H0v30h1000.8v-30h-200.5Z'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom center;
}

/* cb-pill: the visible interactive element inside catbanner.
   pointer-events:auto so the catbanner touch/click handler's e.target.closest works. */
#catbanner .cb-pill{
  display:inline-block;
  padding:5px 22px;
  border-radius:20px;
  background:rgba(14,14,20,.82);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:none;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  pointer-events:auto;
  cursor:pointer;
}
#catbanner::before{ display:none; }

/* Mobile intro btn is position:fixed, sized and placed by JS inline style.
   No CSS override needed — JS reads --dh and dock-r class at creation time. */

/* catbanner never changes size — nav handled by transparent #_nav_overlay_btn */



/* splash */
#splash{
  position:fixed;inset:0;z-index:99999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(8,8,16,.97);transition:opacity .6s ease;
}
#splash.hide{opacity:0;pointer-events:none;}
.spl-logo{
  margin-bottom:24px;opacity:0;
  animation:fadeUp .7s .2s ease forwards;
  position:relative;
  /* isolate so the glow stays within the icon's stacking context */
  isolation:isolate;
}
/* Solid filled radial glow — sits directly behind the icon,
   sized to match the 60×60 icon, blurred and 50% opacity.
   Does not extend below because it is contained within .spl-logo. */
.spl-logo::before{
  content:'';
  position:absolute;
  /* Match the icon exactly — no overflow into text below */
  top:0; left:0; width:60px; height:60px;
  border-radius:50%;
  /* Solid filled blue, fading at edges — NOT hollow */
  background:radial-gradient(circle at 50% 50%,
    rgba(60,140,255,.5)  0%,
    rgba(40,100,255,.35) 45%,
    rgba(20,60,200,.0)   100%
  );
  filter:blur(8px);
  animation:splGlowPulse 1.8s ease-in-out .9s infinite;
  pointer-events:none;
  z-index:-1; /* sits behind the <img> */
}
@keyframes splGlowPulse{
  0%  {transform:scale(.7); opacity:.4;}
  50% {transform:scale(1.25);opacity:.7;}
  100%{transform:scale(.7); opacity:.4;}
}
.spl-logo img{
  position:relative;
  z-index:1; /* above the glow */
  filter:drop-shadow(0 0 8px rgba(80,160,255,.45));
}
.spl-name{
  opacity:0;animation:fadeUp .7s .5s ease forwards;
  display:flex; align-items:center; justify-content:center;
}
.spl-name-img{
  /* Width reduced 35% from original 280px → 182px */
  width:182px; height:auto;
  filter:brightness(0) invert(1);
}
.spl-sub{font-family:'Barlow',sans-serif;font-size:11px;font-weight:400;
  letter-spacing:.25em;color:rgba(255,255,255,.45);text-transform:uppercase;
  margin-top:6px;opacity:0;animation:fadeUp .7s .75s ease forwards;}
.spl-hint{margin-top:40px;font-size:11px;color:rgba(255,255,255,.3);
  letter-spacing:.12em;opacity:0;animation:fadeUp .7s 1.1s ease forwards;}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ── SPLASH PRELOADER RING ── */
#spl-preloader{
  margin-top:28px;
  width:28px;height:28px;
  opacity:0;
  /* Appears almost immediately — first visual feedback */
  animation:fadeUp .4s 0.1s ease forwards;
  flex-shrink:0;
}
#spl-preloader svg{
  width:100%;height:100%;
  display:block;
  animation:splRingSpin 1.1s linear infinite;
  transform-origin:50% 50%;
}
@keyframes splRingSpin{
  to{transform:rotate(360deg);}
}
/* progress arc — dashoffset animated by JS from 0→full when buffering starts */
#spl-ring-track{
  stroke:rgba(255,255,255,.12);
  fill:none;stroke-width:3;
  stroke-linecap:round;
}
#spl-ring-fill{
  stroke:rgba(255,255,255,.78);
  fill:none;stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:69.1; /* 2π × r(11) ≈ 69.1 */
  stroke-dashoffset:55;  /* starts ~20% filled so ring looks active immediately */
  transition:stroke-dashoffset .4s ease;
  transform-origin:50% 50%;
  transform:rotate(-90deg);
}
/* once video is playing, hide the spinner with no flash */
#spl-preloader.done{
  opacity:0 !important;
  transition:opacity .3s ease;
}

::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:2px;}
@media(max-width:600px){
  :root{--dh:60px;--tbh:34px;}
  .di-ic{width:40px;height:40px;}.tl{width:11px;height:11px;}
  .cbt{font-size:11px;padding:2px 7px;}
}
/* ── HELP WIDGET ── */
#help-widget{
  position:fixed;
  top:calc(var(--mbh) + 14px);
  left:14px;
  width:152px;
  background:rgba(10,12,20,.38);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  overflow:hidden;
  z-index:3;
  display:flex;
  flex-direction:column;
  box-shadow:0 4px 24px rgba(0,0,0,.35);
  cursor:default;
  transition:opacity .25s, box-shadow .2s;
  touch-action:none;
  will-change:transform;
}
/* Shift widget right when dock is on the left so it's never behind the menu */
body.dock-l #help-widget{
  left:calc(var(--dh) + 14px);
}
/* Shift widget left when dock is on the right */
body.dock-r #help-widget{
  left:14px;
}
#help-widget:hover{ box-shadow:0 6px 32px rgba(0,0,0,.5); }
#help-widget.dragging{
  opacity:.8;
  transition:none; /* kill ALL transitions during drag for pixel-perfect tracking */
  cursor:grabbing;
}

/* Dark header — drag handle with clock + close */
#hw-header{
  background:rgba(0,0,0,.52);
  padding:6px 8px 6px 12px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.1);
  cursor:move;
  flex-shrink:0;
  gap:8px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
/* Clock in the dark header */
#hw-clock{
  font-size:13px;font-weight:500;color:#fff;
  font-family:'Barlow',sans-serif;font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  line-height:1;
  flex:1;
}
#hw-close{
  font-size:13px;color:rgba(255,255,255,.4);
  cursor:pointer;line-height:1;padding:2px 4px;border-radius:4px;
  transition:color .14s,background .14s;
  background:none;border:none;
  flex-shrink:0;
}
#hw-close:hover{color:#fff;background:rgba(255,255,255,.12);}

/* Body: icon left, text+clock right — all centred */
#hw-body{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  padding:11px 12px 12px 12px;
  cursor:pointer;
}
#hw-icon{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
#hw-icon svg{ width:38px;height:38px;fill:#fff; }
#hw-icon svg path{ fill:#fff !important; }
#hw-text{
  display:flex;flex-direction:column;gap:3px;
  min-width:0;flex:1;
}
#hw-label{
  font-size:13px;font-weight:600;color:#fff;
  line-height:1.25;font-family:'Barlow',sans-serif;
  letter-spacing:.06em;text-transform:uppercase;
}
#hw-sub{
  font-size:11px;color:#fff;
  letter-spacing:.06em;text-transform:uppercase;
  font-family:'Barlow',sans-serif;
}

/* Help button — now lives inside settings panel, hidden in header */
#help-btn{
  font-size:11px;font-weight:600;color:rgba(255,255,255,.65);
  cursor:pointer;padding:5px 0 0;display:none;
  font-family:'Barlow',sans-serif;letter-spacing:.08em;
  text-transform:uppercase;border:none;background:none;
  text-align:left;width:100%;
  transition:color .14s;
}
#help-btn:hover{color:#fff;}


/* ═══ WIDGET RESPONSIVE SIZING ══════════════════════════════════════════ */
@media (max-width:768px){
  #help-widget{ width:min(152px,calc((100vw - 36px)/2)); min-width:80px; box-sizing:border-box; }
  #site-widget{ left:calc(min(152px,(100vw - 36px)/2) + 22px); right:auto; width:min(152px,calc((100vw - 36px)/2)); min-width:80px; box-sizing:border-box; }
  #hw-body{ flex-direction:column; align-items:center; justify-content:center; padding:12px 8px 14px; gap:8px; }
  #hw-icon svg{ width:46px; height:46px; }
  #hw-label{ font-size:11px; text-align:center; letter-spacing:.05em; }
  #hw-sub  { font-size:9.5px; text-align:center; letter-spacing:.07em; color:#fff; opacity:1; }
  #hw-clock{ font-size:11.5px; }
  #sw-bg{ content:url('https://chrisbjarn.com/img/bg/chris_square_background.jpg'); }
}
@media (max-width:768px){
  body.dock-l #help-widget{ width:calc((100vw - var(--dh) - 36px)/2); max-width:152px; }
  body.dock-l #site-widget{ left:calc(var(--dh) + 14px + (100vw - var(--dh) - 36px)/2 + 8px); width:calc((100vw - var(--dh) - 36px)/2); max-width:152px; }
}
@media (max-width:768px){
  body.dock-r #site-widget{ left:calc(min(152px,(100vw - 36px)/2) + 22px); width:calc((100vw - var(--dh) - 36px)/2); max-width:152px; }
}
@media (min-width:769px) and (max-width:1600px){
  #help-widget{ width:190px; min-width:0; }
  #site-widget{ width:300px; min-width:0; left:214px; right:auto; box-sizing:border-box; }
  #hw-body{ flex-direction:row; align-items:center; justify-content:flex-start; padding:11px 12px 12px; gap:10px; }
  #hw-icon svg{ width:38px; height:38px; }
  #hw-label{ font-size:13px; text-align:left; }
  #hw-sub  { font-size:11px; text-align:left; }
  #hw-clock{ font-size:13px; }
}

#site-widget{
  position:fixed;
  top:calc(var(--mbh) + 14px);
  left:calc(14px + 162px + 10px); /* right of help-widget with 10px gap */
  right:auto;
  width:168px;
  background:rgba(10,12,20,.38);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  overflow:hidden;
  z-index:3;
  display:flex;
  flex-direction:column;
  box-shadow:0 4px 24px rgba(0,0,0,.35);
  cursor:default;
  transition:opacity .25s, box-shadow .2s, left .35s cubic-bezier(.4,0,.2,1);
  touch-action:none;
  will-change:transform;
}
body.dock-l #site-widget{
  /* 190px = tablet help-widget width (769px–1600px breakpoint) */
  left:calc(var(--dh) + 14px + 190px + 10px);
}
body.dock-r #site-widget{
  left:calc(14px + 186px + 10px);
}

@media (max-width:768px){ /* mobile-nav-offset handled by JS */ }
#site-widget:hover{ box-shadow:0 6px 32px rgba(0,0,0,.5); }
#site-widget.dragging{
  opacity:.8;
  transition:none;
  cursor:grabbing;
}
#sw-header{
  background:rgba(0,0,0,.52);
  padding:6px 8px 6px 12px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.1);
  cursor:move;
  flex-shrink:0;
  gap:8px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
#sw-label{
  font-size:9.5px;font-weight:400;color:#fff;
  line-height:1.2;font-family:'Barlow',sans-serif;
  letter-spacing:.03em;
  text-transform:uppercase;
  flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#sw-close{
  font-size:13px;color:rgba(255,255,255,.4);
  cursor:pointer;line-height:1;padding:2px 4px;border-radius:4px;
  transition:color .14s,background .14s;
  background:none;border:none;
  flex-shrink:0;
}
#sw-close:hover{color:#fff;background:rgba(255,255,255,.12);}
#sw-body{
  flex:1;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
#sw-bg{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s ease, filter .3s ease;
}
#sw-body:hover #sw-bg{
  transform:scale(1.04);
  filter:brightness(1.12);
}

/* ── TOUR OVERLAY ── */
#tour-overlay{
  position:fixed;inset:0;z-index:100001;pointer-events:none;
  display:none;
}
/* Click-catcher: full-screen, transparent, sits below the ring.
   pointer-events:auto so it catches clicks on the dimmed area;
   the ring itself (z-index 100002) is pointer-events:none so
   clicks on the highlighted element pass through to the real element. */
#tour-click-catcher{
  position:fixed;inset:0;
  z-index:100001; /* same as overlay — below ring (100002) and bubble (100004) */
  pointer-events:auto;
  background:transparent;
  cursor:default;
}
/* spotlight ring — sits above everything including mob-nav (99995) and splash (99999) */
.tour-ring{
  position:fixed;
  border:2.5px solid rgba(255,255,255,.95);
  border-radius:8px;
  /* Dim backdrop via box-shadow spread — ring stays above, dimming below */
  box-shadow:
    0 0 0 2px rgba(255,255,255,.15),
    0 0 0 9999px rgba(0,0,0,.45);
  pointer-events:none;
  transition:left .45s cubic-bezier(.4,0,.2,1),
             top  .45s cubic-bezier(.4,0,.2,1),
             width .45s cubic-bezier(.4,0,.2,1),
             height .45s cubic-bezier(.4,0,.2,1),
             opacity .35s;
  opacity:0;
  z-index:100002;
}
.tour-ring.show{opacity:1;}

/* animated connector line — full-screen SVG overlay */
.tour-line{
  position:fixed;inset:0;pointer-events:none;z-index:100003;
  width:100%;height:100%;overflow:visible;
}
.tour-line line{
  stroke:rgba(255,255,255,.9);
  stroke-width:2.5;
  stroke-dasharray:7 5;
  stroke-linecap:round;
  animation:dashAnim .9s linear infinite;
}
@keyframes dashAnim{to{stroke-dashoffset:-24;}}

/* speech bubble */
.tour-bubble{
  position:fixed;z-index:100004;
  background:rgba(16,18,32,.96);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1.5px solid rgba(255,255,255,.22);
  border-radius:14px;
  padding:14px 18px;
  max-width:260px;min-width:180px;
  color:#fff;font-family:'Barlow',sans-serif;font-size:13px;
  line-height:1.55;font-weight:400;
  box-shadow:0 8px 32px rgba(0,0,0,.65);
  pointer-events:none;
  opacity:0;
  transform:scale(.88) translateY(8px);
  transition:opacity .38s ease,transform .38s cubic-bezier(.34,1.3,.64,1);
}
.tour-bubble.show{opacity:1;transform:scale(1) translateY(0);}
.tour-bubble strong{
  display:block;margin-bottom:5px;font-size:11px;font-weight:700;
  color:rgba(255,255,255,.45);letter-spacing:.1em;text-transform:uppercase;
}

/* ── CONTACT BACKDROP ── */
#contact-backdrop{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.30);
  z-index:99996; /* just below the widget */
  backdrop-filter:none;
  animation:backdropIn .22s ease;
}
@keyframes backdropIn{from{opacity:0;}to{opacity:1;}}

/* ── CONTACT WIDGET ── */
#contact-widget{
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(480px, 94vw);
  max-height:90vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:rgba(10,12,22,.96);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  padding:28px 28px 24px;
  z-index:99997;
  box-shadow:0 20px 70px rgba(0,0,0,.7),0 2px 10px rgba(0,0,0,.4);
  animation:contactOpen .25s cubic-bezier(.34,1.3,.64,1);
  font-family:'Barlow',sans-serif;
}
@keyframes contactOpen{
  from{opacity:0;transform:translate(-50%,-48%) scale(.95);}
  to  {opacity:1;transform:translate(-50%,-50%) scale(1);}
}
/* Mobile: pin to bottom half of screen, full width, room for keyboard */
@media(max-width:768px){
  #contact-widget{
    top:auto;
    bottom:0;
    left:0;
    right:0;
    transform:none;
    width:100%;
    max-height:92vh;
    border-radius:20px 20px 0 0;
    padding:22px 20px 32px;
    animation:contactOpenMob .28s cubic-bezier(.34,1.3,.64,1);
  }
  @keyframes contactOpenMob{
    from{opacity:0;transform:translateY(40px);}
    to  {opacity:1;transform:translateY(0);}
  }
}
#contact-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:22px;
}
#contact-title{
  font-size:18px;font-weight:600;color:#fff;letter-spacing:.06em;
  text-transform:uppercase;
}
#contact-close{
  background:none;border:none;color:rgba(255,255,255,.45);
  font-size:16px;cursor:pointer;padding:4px 6px;border-radius:6px;
  line-height:1;transition:color .14s,background .14s;
}
#contact-close:hover{color:#fff;background:rgba(255,255,255,.1);}
.cf-row{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;}
.cf-row label{
  font-size:11px;font-weight:600;color:rgba(255,255,255,.5);
  letter-spacing:.1em;text-transform:uppercase;
}
.cf-optional{font-weight:400;text-transform:none;letter-spacing:0;opacity:.6;}
.cf-row input,
.cf-row textarea{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;color:#fff;
  font-size:13.5px;font-family:'Barlow',sans-serif;
  padding:10px 14px;outline:none;resize:none;
  transition:border-color .18s,background .18s;
  /* Ensure inputs are tappable on mobile */
  -webkit-appearance:none;
  touch-action:manipulation;
}
.cf-row input::placeholder,.cf-row textarea::placeholder{color:rgba(255,255,255,.28);}
.cf-row input:focus,.cf-row textarea:focus{
  border-color:rgba(80,140,255,.7);background:rgba(80,140,255,.06);
}
.cf-row input.cf-invalid,.cf-row textarea.cf-invalid{border-color:rgba(255,80,80,.7);}
.cf-err{font-size:11px;color:rgba(255,100,100,.9);min-height:14px;letter-spacing:.02em;}
#cf-honeypot{opacity:0;position:absolute;height:0;width:0;pointer-events:none;overflow:hidden;}
#cf-captcha-wrap{margin:6px 0 16px;}
/* reCAPTCHA v3 branding note */
#cf-recaptcha-note{
  font-size:10px;color:rgba(255,255,255,.3);
  text-align:center;margin-bottom:12px;line-height:1.5;
}
#cf-recaptcha-note a{color:rgba(255,255,255,.4);text-decoration:underline;}
#cf-footer{display:flex;align-items:center;justify-content:space-between;margin-top:4px;gap:12px;}
#cf-status{font-size:12.5px;color:rgba(255,255,255,.65);flex:1;letter-spacing:.02em;}
#cf-status.ok{color:rgba(100,220,120,.95);}
#cf-status.err{color:rgba(255,100,100,.9);}
#cf-submit{
  background:linear-gradient(135deg,#4a90e8,#7c60f0);
  border:none;border-radius:10px;color:#fff;
  font-size:13px;font-weight:600;font-family:'Barlow',sans-serif;
  letter-spacing:.04em;padding:10px 24px;cursor:pointer;
  transition:opacity .15s,transform .12s;white-space:nowrap;
  /* Reliable tap on mobile */
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  min-height:44px;
}
#cf-submit:hover{opacity:.88;}
#cf-submit:active{transform:scale(.97);}
#cf-submit:disabled{opacity:.5;cursor:default;}

/* ════════════════════════════════════════
   MOBILE NAVIGATION
   ════════════════════════════════════════ */
@media (max-width:768px){
  /* Hide ALL desktop nav items (categories, contact, settings) */
  .cbt[data-cat]{display:none;}
  #contact-btn{display:none !important;}
  #set-btn{display:none !important;}
  /* Show hamburger */
  #mob-ham{display:flex !important;}
  /* Collapse clock */
  #clock{display:none;}
}

/* Hamburger button — far right, black bg, white lines */
#mob-ham{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:36px;height:36px;cursor:pointer;
  border-radius:8px;transition:background .15s;flex-shrink:0;
  background:transparent;border:none;padding:0;
  margin-left:6px;
}
#mob-ham:hover{background:rgba(255,255,255,.1);}
#mob-ham span{
  display:block;width:20px;height:2px;
  background:#fff;border-radius:2px;
  transition:transform .28s ease, opacity .2s;
}
#mob-ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
#mob-ham.open span:nth-child(2){opacity:0;transform:scaleX(0);}
#mob-ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobile drawer — original design, now slides UP from bottom */
#mob-nav{
  position:fixed;bottom:0;left:0;right:0;
  top:auto;
  z-index:99995;
  background:linear-gradient(160deg,#1e2a3a 0%,#192233 40%,#111820 100%);
  display:flex;flex-direction:column;align-items:stretch;
  padding:28px 0 40px;
  max-height:calc(100vh - var(--mbh) - 20px);
  transform:translateY(100%);
  opacity:0;
  transition:transform .34s cubic-bezier(.4,0,.2,1), opacity .28s ease;
  overflow-y:auto;
}
#mob-nav.open{
  transform:translateY(0);
  opacity:1;
}

/* Nav drag handle pill */
#mob-nav-handle{
  width:40px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.28);
  margin:0 auto 20px;
  flex-shrink:0;
  pointer-events:none; /* drag zone handles all touches */
}

/* Invisible drag zone — full-width touch target at top of nav */
#mob-nav-drag-zone{
  position:absolute;
  top:0;left:0;right:0;
  height:56px;
  z-index:10;
  cursor:grab;
  touch-action:none;
  /* transparent — purely a touch capture area */
  background:transparent;
}


/* Nav items wrapper */
#mob-nav-links{
  display:flex;flex-direction:column;gap:0;flex:1;
}
.mob-link{
  position:relative;overflow:hidden;
  padding:18px 32px 18px 64px;
  font-family:'Barlow',sans-serif;
  font-size:11px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
  cursor:pointer;
  transition:color .18s;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.mob-link:hover{color:#fff;}
/* Animated gradient background behind each nav item on hover */
.mob-link::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(80,140,220,.0) 0%,
    rgba(80,140,220,.22) 50%,
    rgba(80,140,220,.0) 100%);
  background-size:200% 100%;
  background-position:200% 0;
  transition:background-position .45s ease, opacity .25s;
  opacity:0;
}
.mob-link:hover::before{
  background-position:0% 0;
  opacity:1;
}
.mob-link.active{color:#fff;}
@keyframes mobBarShimmer{
  0%  {opacity:.5; background-position:0% 0%;}
  50% {opacity:.95; background-position:0% 100%;}
  100%{opacity:.5; background-position:0% 0%;}
}
.mob-link.active::after{
  content:'';
  position:absolute;left:0;top:0;bottom:0;width:30px;
  background:linear-gradient(180deg,
    rgba(160,210,255,.9) 0%,
    rgba(100,180,255,.7) 35%,
    rgba(180,230,255,.95) 65%,
    rgba(120,200,255,.8) 100%);
  background-size:100% 300%;
  animation:mobBarShimmer 2.8s ease-in-out infinite;
  border-radius:0 4px 4px 0;
}
/* Settings row inherits .mob-link styles — only override display */
#mob-settings-row{ display:flex; align-items:center; gap:10px; padding-left:42px !important; }
#mob-settings-row svg{ flex-shrink:0; }


/* ════════════════════════════════════════
   INTRO VIDEO PRELOADER
   ════════════════════════════════════════ */
#intro-loader{
  position:fixed;inset:0;z-index:99998;
  background:#000;
  display:none; /* hidden until splash fades */
  flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .6s ease;
}
#intro-loader.fade-out{opacity:0;pointer-events:none;}
#intro-video-wrap{
  position:relative;
  width:100vw;
  height:100vh;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
}
#intro-video-ratio{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
#intro-vid{
  display:block;
  background:#000;
  /* Scale to full width, let height be natural — no cropping */
  width:100%;
  height:auto;
  max-height:100vh;
  object-fit:contain;
  position:static;
  /* Blur transition support */
  transition:filter 1.1s ease, opacity 1.1s ease;
  filter:blur(0px);
}
#intro-vid.blur-out{
  filter:blur(28px) brightness(.4);
  opacity:0;
}
#intro-loader{
  position:fixed;inset:0;z-index:99998;
  background:#000;
  display:none; /* hidden until splash fades */
  flex-direction:column;align-items:center;justify-content:center;
  transition:opacity 1.4s ease;
}
#intro-loader.fade-out{opacity:0;pointer-events:none;}
#fade-overlay{
  position:fixed;inset:0;z-index:99997;
  background:#000;
  opacity:1;
  pointer-events:none;
  transition:opacity .6s ease;
}
#fade-overlay.clear{opacity:0;}
/* ── CRT power-on animation ─────────────────────────────────────────────
   Two top-level fixed elements, both siblings of (not children of)
   #intro-loader, so they have their own stacking context above the
   portfolio which sits at z-index 0-2.

   #crt-beam  — the white phosphor beam (point → line → full screen)
   #crt-canvas — 90s CRT pixel noise drawn by JS at low resolution      */

#crt-svg-filters{ position:absolute;width:0;height:0;overflow:hidden; }

/* ── Beam element — used only for the initial point-spark (first 300ms) ──
   Everything after that is drawn on #crt-canvas by the JS loop.         */
#crt-beam{
  position:fixed;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:2px; height:2px;
  background:#fff;
  border-radius:50%;
  z-index:99998; /* below canvas */
  pointer-events:none;
  opacity:0;
  display:none;
}
@keyframes crtSpark{
  0%  { width:2px; height:2px; border-radius:50%; opacity:1;
        box-shadow: 0 0 6px 4px rgba(255,255,255,.98), 0 0 20px 12px rgba(215,228,255,.8), 0 0 55px 28px rgba(195,218,255,.4); }
  55% { width:100vw; height:3px; border-radius:2px; opacity:1;
        box-shadow: 0 0 10px 7px rgba(255,255,255,.98), 0 0 36px 20px rgba(215,232,255,.78), 0 0 85px 48px rgba(192,218,255,.4); }
  100%{ width:100vw; height:3px; border-radius:2px; opacity:0;
        box-shadow: 0 0 4px 2px rgba(255,255,255,.2); }
}
#crt-beam.run{
  animation: crtSpark 0.55s cubic-bezier(.22,.65,0,1) forwards;
}

/* ── Pixel canvas ── */
#crt-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:100000; /* above beam — JS drives all visuals including white beam */
  pointer-events:none;
  opacity:0;
  display:none;
  image-rendering:pixelated;
  /* Softens pixel edges so dots glow like phosphor rather than hard squares */
  filter:blur(0.9px);
}
#crt-canvas.run{
  opacity:0; /* JS sets canvas.style.opacity each frame */
}

/* ── Portfolio reveal: blur → sharp ──
   Delay 0.8s so the blur is still active and visible while the beam
   is semi-transparent and fading. Ends at 0.8+1.7=2.5s, in sync with
   the beam animation completing. The portfolio is held at full blur
   during the first 0.8s (beam is opaque razor line — portfolio not
   really visible yet anyway), then sharpens through the expansion. */
@keyframes crtReveal{
  0%  { filter:blur(26px) brightness(1.5);  }
  20% { filter:blur(20px) brightness(1.35); }
  55% { filter:blur(9px)  brightness(1.12); }
  85% { filter:blur(2px)  brightness(1.02); }
  100%{ filter:blur(0px)  brightness(1);    }
}
#stage.crt-in,#mb.crt-in,#bgc.crt-in,#vid-bg.crt-in,
#dock-wrap.crt-in,#catbanner.crt-in,
#help-widget.crt-in,#site-widget.crt-in{
  opacity:1 !important;
  animation: crtReveal 1.7s ease-out forwards;
  /* Start after beam horizontal phase — blur visible during vertical expansion */
  animation-delay: 0.8s;
  /* Keep the starting blur state during the 0.8s delay */
  animation-fill-mode: both;
}

/* Portfolio starts invisible; revealed after video */
#stage,#mb,#bgc,#vid-bg,#dock-wrap,#catbanner,
#help-widget,#site-widget{
  opacity:0;
  transition:opacity 2s ease;
}
#stage.reveal,#mb.reveal,#bgc.reveal,#vid-bg.reveal,
#dock-wrap.reveal,#catbanner.reveal,
#help-widget.reveal,#site-widget.reveal{
  opacity:1;
}

/* Remove up/down/left/right dock scroll arrows on mobile */
@media (max-width: 768px) {
  .da { display: none !important; }
}

/* Mobile: widen the catbanner arch SVG so it extends beyond the pill on both sides */
@media (max-width: 768px) {
  body.dock-l #catbanner,
  body.dock-r #catbanner {
    background-size: 160% 100%;
    background-position: center bottom;
  }
}

/* ── ADNU Reader header button — same style as the AI ASSISTANT button ── */
#adnu-btn {
  display: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,160,40,.18);
  border: 1.5px solid rgba(255,160,40,.55);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-family: 'Barlow', sans-serif;
  transition: background .16s, border-color .16s, color .16s;
  white-space: nowrap;
}
#adnu-btn:hover {
  background: rgba(255,160,40,.32);
  border-color: rgba(255,160,40,.85);
  color: #fff;
}


/* ── Transparent nav overlay button — zero visual feedback ────────────────── */
#_nav_overlay_btn{
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#_nav_overlay_btn:active,
#_nav_overlay_btn:focus,
#_nav_overlay_btn:hover{
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}