:root{
  --n96-peek: 14px;        /* visible sliver */
  --n96-tilt:  -15deg;     /* right panel tilt */
  --n96-tiltL:  10deg;     /* left panel tilt */
  --n96-peek-nudge: 10px;  /* extra push off-screen to counter rotation */
}
/* Avoid flash before JS runs */
.n96-slideout { 
	visibility: hidden; 
	will-change: transform;
	transform-style: preserve-3d;
	backface-visibility: hidden;
}
.n96-slideout.n96-hydrated { visibility: visible; }

/* Make right the default; only override when .left is present */
.n96-slideout { right: 0; left: auto; }         /* default right */
.n96-slideout.left { left: 0; right: auto; }    /* left variant */

.n96-slideout { --n96-slideout-w: 340px; }

.n96-slideout {
  position: fixed;
  top: 0;
  height: 100vh;
  width: var(--n96-slideout-w);
  /* width:340px; */
  max-width: 90vw;
  background: white;
  /* transition: transform .35s ease; */
  z-index: 100000;
  display: flex;
  flex-direction: column;
  color: black;
  overflow: hidden;
  transition:.2s ease-in-out;
}

/* --- Wiggle/peek states --- */


/* Closed */
.n96-slideout.right { transform: translateX(100%); transition: .2s ease-in-out; }
.n96-slideout.left  { transform: translateX(-100%); transition: .2s ease-in-out; }

/* Open (reset any tilt) */
.n96-slideout.right.is-open,
.n96-slideout.left.is-open { transform: translateX(0) rotate(0deg); transition: .2s ease-in-out; }

/* Peek: pivot around the VISIBLE EDGE, not the corner */
.n96-slideout.right.is-peeking{
  transform-origin: center right;
  transform: translateX(calc(100% - var(--n96-peek) - var(--n96-peek-nudge))) rotate(var(--n96-tilt));
}

.n96-slideout.left.is-peeking{
  transform-origin: center left;
  transform: translateX(calc(-100% + var(--n96-peek) + var(--n96-peek-nudge))) rotate(var(--n96-tiltL));
  transition: .2s ease-in-out;
}

/* Wiggle (oscillate around that same edge pivot) */
@keyframes n96-wiggle-right{
  0%   { transform: translateX(calc(100% - var(--n96-peek) - var(--n96-peek-nudge))) rotate(var(--n96-tilt)); }
  20%  { transform: translateX(calc(100% - (var(--n96-peek) + 4px) - var(--n96-peek-nudge))) rotate(calc(var(--n96-tilt) + 5deg)); }
  40%  { transform: translateX(calc(100% - (var(--n96-peek) - 3px) - var(--n96-peek-nudge))) rotate(calc(var(--n96-tilt) - 3deg)); }
  60%  { transform: translateX(calc(100% - (var(--n96-peek) + 2px) - var(--n96-peek-nudge))) rotate(calc(var(--n96-tilt) + 3deg)); }
  80%  { transform: translateX(calc(100% - (var(--n96-peek) - 2px) - var(--n96-peek-nudge))) rotate(calc(var(--n96-tilt) - 2deg)); }
  100% { transform: translateX(calc(100% - var(--n96-peek) - var(--n96-peek-nudge))) rotate(var(--n96-tilt)); }
}

@keyframes n96-wiggle-left{
  0%   { transform: translateX(calc(-100% + var(--n96-peek) + var(--n96-peek-nudge))) rotate(var(--n96-tiltL)); }
  20%  { transform: translateX(calc(-100% + (var(--n96-peek) + 4px) + var(--n96-peek-nudge))) rotate(calc(var(--n96-tiltL) - 5deg)); }
  40%  { transform: translateX(calc(-100% + (var(--n96-peek) - 3px) + var(--n96-peek-nudge))) rotate(calc(var(--n96-tiltL) + 3deg)); }
  60%  { transform: translateX(calc(-100% + (var(--n96-peek) + 2px) + var(--n96-peek-nudge))) rotate(calc(var(--n96-tiltL) - 3deg)); }
  80%  { transform: translateX(calc(-100% + (var(--n96-peek) - 2px) + var(--n96-peek-nudge))) rotate(calc(var(--n96-tiltL) + 2deg)); }
  100% { transform: translateX(calc(-100% + var(--n96-peek) + var(--n96-peek-nudge))) rotate(var(--n96-tiltL)); }
}

.n96-slideout.right.do-wiggle { animation: n96-wiggle-right 1100ms cubic-bezier(.2,.7,.2,1) 1; }
.n96-slideout.left.do-wiggle  { animation: n96-wiggle-left  1100ms cubic-bezier(.2,.7,.2,1) 1; }

/* Apply correct wiggle */
.n96-slideout.right.do-wiggle { animation: n96-wiggle-right 1100ms cubic-bezier(.2,.7,.2,1) 1; }
.n96-slideout.left.do-wiggle  { animation: n96-wiggle-left  1100ms cubic-bezier(.2,.7,.2,1) 1; }

/* Motion prefs */
@media (prefers-reduced-motion: reduce) {
  .n96-slideout.right.is-peeking,
  .n96-slideout.left.is-peeking { transform: none; }
  .n96-slideout.right.do-wiggle,
  .n96-slideout.left.do-wiggle  { animation: none !important; }
}


.n96-slideout__content {
  padding: 20px 10px 20px 10px;
  overflow: auto;
  color: black;
  font-size: medium;
}
.n96-slideout__content hr { width:1rem; color:red; }

.n96-slideout__content h2 {
  color: black;
  font-size: 1.5rem !important;
  margin: 0 0 .5rem;
}

.n96-slideout__content h3 {
  color: black;
  font-size: medium;
  margin: 0rem 0 .25rem;
  padding-bottom: 0rem;
}

.n96-slideout__content p {
  color: black;
  font-size: medium;
  line-height: 1.3;
  margin: 0 0 .75rem;
}

.n96-slideout__content img { max-width:300px; height:auto; }

.n96-spotlight-intro { margin: .35rem 0 1rem; font-size: .95em; line-height: 1.4; border: 0; }
.n96-spotlight-intro p { margin: 0 0 .5rem; }

.n96-spotlight-blurb p { margin: 0 0 .5rem; }
.n96-spotlight-blurb img, iframe { max-width: 100%; }
.n96-spotlight-blurb .wp-caption-text { display:none !important; }
.n96-spotlight-blurb .wp-caption { margin-bottom:0; border:0; box-shadow:none; }

.n96-blurb { border:transparent solid 1px; padding:5px; transition:.2s ease-in-out; margin-bottom:1rem; }
.n96-starred { padding:5px; transition:.2s ease-in-out; background-color:silver; margin-bottom:1rem; }
.n96-starred h3 { padding-top:0; margin-top:0; }

.n96-slideout__content p a { text-decoration: underline; }

.n96-slideout__close {
  position: absolute;
  top: 10px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #333;
}

.n96-slideout__tab {
  position: fixed;
  top: 40%;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 6px 0 0 6px;
  background: #5c5c5d;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  z-index: 100001;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transition: opacity .2s ease, visibility .2s ease;
}
#n96-slideout-tab[aria-expanded="true"] { opacity:0; visibility:hidden; pointer-events:none; }

/* Right-hand frame */
.n96-slideout.right {
  right: 0;
  border-left: 1px solid rgba(0,0,0,.06);
  box-shadow: -6px 0 24px rgba(0,0,0,.15);
}
.n96-slideout.right .n96-slideout__close { right: 8px; transition: .2s ease-in-out;}
.n96-slideout.right + .n96-slideout__tab { right: 0; transform: translateY(-50%);  }

/* Left-hand frame */
.n96-slideout.left {
  left: 0;
  border-right: 1px solid rgba(0,0,0,.06);
  box-shadow: 6px 0 24px rgba(0,0,0,.15);
}
.n96-slideout.left .n96-slideout__close { right: 8px; transition: .2s ease-in-out;}
.n96-slideout.left + .n96-slideout__tab { left: 0; transform: translateY(-50%) rotate(180deg); }

/* Motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .n96-slideout { transition: none; }
  .n96-slideout.do-wiggle { animation: none !important; }
}