:root{
  --bg0:#0b0e14;
  --bg1:#0e1116;
  --ink:#e6edf3;
  --muted:#e4ebf3;
  --border:#3d5b9b;
  --accent:#ffffff;
  --accent2:#ee787;
  --warn:#f85149;
  --code:#0a2518;
  --shadow: 0 10px 30px rgba(20, 19, 19, 0.35);
  --line: 1px solid var(--border);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ 
  scroll-behavior:smooth; 
  color-scheme: dark; 
}

body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  background: linear-gradient(180deg, var(--bg1), var(--bg0));
}

html, body{
  height: 100%;
  margin: 0;
  overflow: hidden;
}


.shell{
  display: grid;
  grid-template-columns: 320px 1fr;
  height: 100vh;     
  overflow: hidden;  
}

aside{
  height: 100%;
  overflow: hidden;  
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.brand{
  background-color: #72b0dd !important;
  color: #000000 !important;

  border: 1px solid #00000022;
  padding: 6px 6px;

  box-shadow: none;
  filter: none;
  opacity: 1;
  isolation: isolate;
}

.brand h1{
  font-family: var(--mono);
  font-size: 24px;
  letter-spacing: .3px;
  margin: 0 0 6px 0;
  color:#000;
}

.brand p{
  margin:0;
  font-size: 12px;
  line-height: 1.35;
}

.brand, .brand *{
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
}

nav{
  border: var(--line);
  background: rgba(0,0,0,0.78);
  padding: 5px 3px;
  padding-left: 0px;

  flex: 1;
  min-height: 0;          
  overflow-y: auto;       
  overflow-x: hidden;
  padding-top: 0px;
  padding-right: 0px;
}

nav a{
  display:block;
  padding: 8px 10px;
  color: var(--muted);
  text-decoration:none;
  font-family: var(--mono);
  font-size: 14px;
  border-left: 3px solid transparent;
}

nav a:hover{
  color: var(--ink);
  background: rgba(130, 173, 223, 0.28);
  border-left-color: rgba(184, 217, 255, .55);
}

nav details{
  border-top: var(--line);
  margin-top: 0px;
  padding-top: 0px;
  background: rgba(28,106,200,0.18);
  padding-left: 10px;
}

nav summary{
  list-style: none;
  cursor: pointer;
  padding: 8px 10px;
  padding-left: 0px;
  font-family: var(--mono);
  font-size: 16px;
  color: rgba(161, 250, 235, 0.9);
  user-select: none;
  border-left: 3px solid transparent;
  border-bottom: none;
}

nav summary:hover{
  color: var(--ink);
  background: rgba(88,166,255,0.38);
  border-left-color: rgba(88,166,255,0.35);
}

nav summary::-webkit-details-marker{ display:none; }

nav details > summary::before{
  content: "▸";
  display: inline-block;
  width: 16px;
  color: rgba(201, 208, 219, 0.8);
  padding-left: 0px;
}

nav details[open] > summary::before{
  content: "▾";
}

nav details details > summary{
  background: rgba(88,166,255,0.28);
  border: none;
}

nav details details{
  border-top: none;
}

nav details a{
  padding-left: 26px;
}

nav .label{
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255, 255, 255, .8);
  padding: 6px 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

#nav .hl{
  background: rgba(255,255,0,0.35);
  outline: 1px solid rgba(255,255,0,0.45);
  border-radius: 4px;
  padding: 0 3px;
  color: #fff;              
}

#view .hl{
  background: rgba(255,255,0,0.25);
  outline: 1px solid rgba(255,255,0,0.30);
  border-radius: 4px;
  padding: 0 2px;
}


.side-note{
  margin: -8px 0px 6px 0px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-family: var(--mono);
}

/* Content */
main{
  padding: 24px 28px 10px 16px;

  display: flex;
  flex-direction: column;
  min-height: 100vh;

  height: 100%;
  overflow-y: auto; 
  overflow-x: hidden;
}

#view{ flex: 1; }

.small{
  font-size: 14px;
  color: rgba(86, 244, 255, 0.9);
}

.inline{
  font-family: var(--mono);
  background: rgba(88,166,255,0.28);
  border: 1px solid rgba(88,166,255,0.22);
  padding: 3px 6px 0px 4px;
}

.panel{
  border: var(--line);
  background: rgba(55,155,255,0.25);
  padding: 4px 14px 12px;
  margin: 10px 0;
  box-shadow: var(--shadow);
}

.callout-warn{
  border: 1px solid rgba(248,41,33,.55);
  background: rgba(248,81,73,0.16);
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 13px;
  color: rgba(230,237,243,.92);
}

.effects-warn{
  border: 1px solid rgba(109, 221, 64, 0.35);
  background: rgba(108, 223, 85, 0.16);
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 13px;
  color: rgba(230,237,243,.92);
}

.param-box{
  border: 1px solid rgba(200, 200, 200, 0.25);
  background: rgba(10, 110, 160, 0.25);       
  padding: 6px 6px;
  margin-top: 4px;

  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
}

.param-box ul{
  margin: 0;
  padding-left: 18px;
}

.param-box li{
  margin: 4px 0;
  line-height: 1.4;
}

header{
  border: var(--line);
  background: radial-gradient(900px 260px at 20% 0%, rgba(88,166,255,0.28), transparent),
              rgba(28, 37, 63, 0.82);
  padding: 18px 18px 16px;
  margin-bottom: 18px;
}

header h2{
  font-family: var(--mono);
  margin:0 0 10px 0;
  font-size: 20px;
  letter-spacing:.4px;
}

header p{
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  max-width: 75ch;
  font-size: 13px;
}

section{
  margin-top: 1px;
  padding-top: 2px;
  padding: 0px 0px 20px;
}

h3{
  font-family: var(--mono);
  font-size: 16px;
  color: var(--ink);
  margin: 22px -28px 16px;
  padding: 10px 28px;
  letter-spacing:.3px;
  margin-bottom: -11px;

  background: #0b203a;
  border-top: var(--line);
  border-bottom: var(--line);
  border-right: var(--line);
}

p{
  color: var(--muted);
  line-height: 1.55;
  font-size: 13px;
  max-width: 85ch;
}

pre, code{
  font-family: var(--mono);
  font-size: 13px;
  color: #00ff00;
  
}

pre{
  margin: 10px 0 0px;
  padding: 12px 12px;
  background: var(--code);
  border: 2px solid rgba(0, 200, 200, 0.25); 
  overflow-x:auto;
  line-height: 1.35;
}

hr{
  border: none;
  border-top: var(--line);
  margin: 18px ;
}

footer{
  margin-top: 26px;
  padding-top: 14px;
  border-top: var(--line);
  color: var(--muted);
  font-size: 12px;
  font-family: var(--mono);
}


.anchor{
  position: relative;
  top: 13px;
}

@media (max-width: 960px){
  aside{ position: relative; height: auto; }
  nav{ max-height: 100dvh; overflow-y: auto; }
}

@keyframes navPulse {
  0%   { background: rgba(88,166,255,0.15); }
  50%  { background: rgba(88,166,255,0.55); }
  100% { background: rgba(88,166,255,0.15); }
}

.nav-pulse{
  animation: navPulse 0.45s ease-in-out 3;
}


@keyframes contentPulse {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(1.6); }
  100% { filter: brightness(1); }
}

.content-pulse{
  animation: contentPulse 0.45s ease-in-out 3;
}


.func-hdr{
position: sticky;
  top: -24px;
  z-index: 10;

  background: linear-gradient(
    to right,
    rgba(47, 63, 105, 1) 0%,
    rgba(47, 63, 105, 0.85) 40%,
    rgba(47, 63, 105, 0.65) 70%,
    rgba(47, 63, 105, 0.0) 100%
  );

  border: 1px 1px 1px 1px solid rgba(0,0,0,0.12);

  padding: 10px 10px 10px 10px;

  margin-left: -20px;
  margin-right: -10px;
}

.doc-img{
  max-width: 800px;          /* your shrink size */
  width: 100%;
  height: auto;
  display: block;
  margin: 10px 0;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: var(--shadow);
  border-radius: 0px;
}

/* Magnifier wrapper */
.img-zoom{
  position: relative;
  display: inline-block;
  max-width: 100%;
  cursor: zoom-in;

}

/* The “lens” overlay */
.img-zoom::after{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 180px;
  height: 180px;
  border-radius: 10%;
  pointer-events: none;

  opacity: 0;
  transform: scale(0.9);
  transition: opacity .12s ease, transform .12s ease;

  /* lens look */
  border: 2px solid rgba(255,255,255,0.55);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  background-repeat: no-repeat;

  background-image: var(--zoom-url);
  left: var(--lens-x, 0px);
  top:  var(--lens-y, 0px);
  background-size: var(--bg-w, 0px) var(--bg-h, 0px);
  background-position: var(--bg-x, 0px) var(--bg-y, 0px);

}

.img-zoom::before{
  content: "Click to open full size";
  position: absolute;
  bottom: 6px;
  right: 10px;
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.img-zoom:hover::before{
  opacity: 1;
}


.img-zoom:hover{
  cursor: zoom-in;
}


/* Show lens on hover */
.img-zoom:hover::after{
  opacity: 1;
  transform: scale(1);
}



.search-bar {
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  width: 100%;
  padding: 4px 4px 0px 0px;
  margin: 0px;
  box-sizing: border-box;
}

#searchBar {
  width: calc(100% - 50px); 
  padding: 4px;
  font-size: 14px;
  border: 1px solid #5c7fcc;
  box-sizing: border-box;
  margin: 0px;
}

.clear-search {
  background-color: #2c2b3d; 
  color: #8fc1d8; 
  border: 1px solid #2c789b;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  display: block;
  padding: 4px; 
  border-radius: 0px; 
  z-index: 9999;
  margin: 0px;
}

.clear-search:hover {
  background-color: #e6e6e6; 
  color: #333333; 
  border-color: #aaaaaa; 
}


.hl{
  background: rgba(255,255,0,0.25);
  outline: 1px solid rgba(255,255,0,0.25);
  border-radius: 4px;
  padding: 0 2px;
}

.copy-btn{
  margin-left: 18px;
  margin-top: 1px;
  padding: 6px 6px 6px 6px;
  font-size: 11px;
  font-family: var(--mono);
  background: rgba(88, 255, 124, 0.25);
  border: 1px solid rgba(68, 224, 68, 0.4);
  color: var(--ink);
  cursor: pointer;
}

.copy-btn:hover{
  background: rgba(88,166,255,0.45);
}

@keyframes copyFlash {
  0%   { background: rgba(224, 255, 88, 0.65); }
  50%  { background: rgba(88,166,255,0.65); color:#000; }
  100% { background: rgba(88,166,255,0.65); }
}

.copy-btn.flash{
  animation: copyFlash 0.75s ease-in-out;
}