.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr}
.glass-panel{background:rgba(13,21,22,0.3);backdrop-filter:blur(12px);border:1px solid rgba(0,218,243,0.2)}
.glow-cyan{box-shadow:0 0 15px rgba(0,229,255,0.2)}
.ortho-line{background:linear-gradient(90deg,rgba(0,229,255,0) 0%,rgba(0,229,255,0.2) 50%,rgba(0,229,255,0) 100%);height:1px}
.wave-mask{mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent)}
.hero-bottom-fade{background:linear-gradient(to bottom,transparent 70%,#0d1516 100%)}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(32px);transition:opacity 0.7s ease,transform 0.7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:0.1s}
.reveal-delay-2{transition-delay:0.2s}
.reveal-delay-3{transition-delay:0.3s}
.reveal-delay-4{transition-delay:0.4s}

/* Side nav tooltip */
.side-btn{position:relative}
.side-btn::after{content:attr(data-tip);position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);padding:4px 10px;background:rgba(13,21,22,0.95);border:1px solid rgba(0,229,255,0.2);color:#bac9cc;font-family:'Space Grotesk',sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:0.1em;white-space:nowrap;border-radius:4px;opacity:0;pointer-events:none;transition:opacity 0.2s}
.side-btn:hover::after{opacity:1}

/* Range slider styling */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:#27272a;outline:none;cursor:pointer;border-radius:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #00e5ff;cursor:pointer;box-shadow:0 0 8px rgba(0,229,255,0.4)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #00e5ff;cursor:pointer;box-shadow:0 0 8px rgba(0,229,255,0.4)}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,#00e5ff var(--val,50%),#27272a var(--val,50%));border-radius:0}
input[type=range]::-moz-range-track{height:2px;background:#27272a;border-radius:0}
input[type=range]::-moz-range-progress{height:2px;background:#00e5ff;border-radius:0}

/* Sparkline bars animation */
.spark-bar{transition:height 0.6s cubic-bezier(0.4,0,0.2,1)}

/* Nav active indicator */
.nav-link{position:relative;transition:color 0.3s}
.nav-link.active{color:#00e5ff}
.nav-link.active::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;background:#00e5ff;border-radius:1px}
.flow-link{position:relative;width:22px;height:2px;background:rgba(0,229,255,0.25);border-radius:999px;overflow:hidden;flex-shrink:0}
.flow-link::after{content:'';position:absolute;top:0;left:-40%;width:40%;height:100%;background:linear-gradient(90deg,transparent,#00e5ff,transparent);opacity:0}
.flow-link.flowing::after{animation:flowPulse 1s linear infinite;opacity:1}
.flow-node{transition:box-shadow .25s,border-color .25s}
.flow-node.flowing{border-color:rgba(0,229,255,.65);box-shadow:0 0 14px rgba(0,229,255,.25)}
@keyframes flowPulse{from{left:-40%}to{left:120%}}
.flow-mark{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:999px;margin-right:6px;font-size:9px;font-weight:700;line-height:1;vertical-align:middle}
.flow-mark-icon{font-size:13px;color:#00e5ff;margin-right:6px;vertical-align:middle}
.brand-wordmark{display:flex;flex-direction:column;gap:2px}
.wordmark-title{font-family:"Space Grotesk",sans-serif;font-size:1.25rem;font-weight:700;letter-spacing:-0.02em;line-height:1}
.wordmark-title .lum{color:#4a90e2}
.wordmark-title .edge{color:#feeb75}
.wordmark-sub{font-size:.64rem;text-transform:uppercase;letter-spacing:.12em;color:#6b7280}
.theme-toggle-btn{position:relative;z-index:60}

/* Light mode support */
html:not(.dark) body{background:#edf3f5;color:#0f1f22}
html:not(.dark) header{background:rgba(237,243,245,0.92)!important;border-bottom-color:rgba(0,98,110,0.22)!important}
html:not(.dark) .wordmark-sub{color:#4b5563}
html:not(.dark) #mainNav .nav-link{color:#475569}
html:not(.dark) #mainNav .nav-link:hover{color:#006875}
html:not(.dark) .glass-panel{background:rgba(255,255,255,0.82);border-color:rgba(0,98,110,0.22)}
html:not(.dark) aside{background:rgba(255,255,255,0.78)!important;border-color:rgba(0,98,110,0.16)!important}
html:not(.dark) .ortho-line{background:linear-gradient(90deg,rgba(0,98,110,0) 0%,rgba(0,98,110,0.22) 50%,rgba(0,98,110,0) 100%)}
html:not(.dark) .theme-toggle-btn{border-color:rgba(0,98,110,0.35);color:#006875}
html:not(.dark) .theme-toggle-btn:hover{background:rgba(0,98,110,0.08)}
html:not(.dark) .bg-zinc-950\/50,
html:not(.dark) .bg-zinc-950\/30,
html:not(.dark) .bg-zinc-950\/20{background-color:rgba(255,255,255,0.72)!important}
html:not(.dark) .border-white\/5,
html:not(.dark) .border-white\/10{border-color:rgba(15,31,34,0.12)!important}
html:not(.dark) .text-zinc-500{color:#64748b!important}
html:not(.dark) .text-zinc-400{color:#475569!important}
html:not(.dark) .text-on-surface,
html:not(.dark) .text-on-background{color:#0f1f22!important}
html:not(.dark) .text-on-surface-variant{color:#334155!important}
html:not(.dark) .text-primary{color:#0b3f46!important}
html:not(.dark) .text-primary-container{color:#006875!important}
html:not(.dark) .text-secondary{color:#0f8a3a!important}
html:not(.dark) .text-error{color:#b42318!important}
html:not(.dark) .hero-bottom-fade{background:linear-gradient(to bottom,transparent 72%,rgba(237,243,245,0.92) 100%)}
html:not(.dark) #parameters .text-secondary-container{color:#0f8a3a!important}
html:not(.dark) #parameters .col-span-12.lg\:col-span-5 > .p-lg.rounded-xl{
  background:rgba(255,255,255,0.9)!important;
  border-color:rgba(180,35,24,0.22)!important;
}
html:not(.dark) #parameters .col-span-12.lg\:col-span-5 > .p-lg.rounded-xl li{
  background:rgba(180,35,24,0.06)!important;
  border-color:rgba(180,35,24,0.18)!important;
}
html:not(.dark) #parameters .col-span-12.lg\:col-span-5 > .p-lg.rounded-xl .text-error-container{
  color:#b42318!important;
}
html:not(.dark) #parameters .grid.grid-cols-1.md\:grid-cols-2.gap-gutter > div{
  background:#ffffff!important;
  border-color:rgba(15,31,34,0.16)!important;
}
html:not(.dark) #parameters .grid.grid-cols-1.md\:grid-cols-2.gap-gutter > div:nth-child(1){
  background:rgba(0,104,117,0.08)!important;
  border-color:rgba(0,104,117,0.24)!important;
}
html:not(.dark) #parameters .grid.grid-cols-1.md\:grid-cols-2.gap-gutter > div:nth-child(2){
  background:rgba(15,138,58,0.08)!important;
  border-color:rgba(15,138,58,0.24)!important;
}
html:not(.dark) #parameters .grid.grid-cols-1.md\:grid-cols-2.gap-gutter > div:nth-child(3){
  background:rgba(177,129,15,0.10)!important;
  border-color:rgba(177,129,15,0.26)!important;
}
html:not(.dark) #parameters .grid.grid-cols-1.md\:grid-cols-2.gap-gutter > div:nth-child(4){
  background:rgba(0,104,117,0.08)!important;
  border-color:rgba(0,104,117,0.24)!important;
}
html:not(.dark) #parameters .grid.grid-cols-1.md\:grid-cols-2.gap-gutter > div .text-primary-fixed-dim{
  color:#005d68!important;
}
html:not(.dark) #parameters .grid.grid-cols-1.md\:grid-cols-2.gap-gutter > div .text-tertiary{
  color:#8a6a00!important;
}
html:not(.dark) #architecture .reveal.reveal-delay-1 .flex.flex-wrap.gap-sm > div{
  background:#f8fbfc!important;
  border-color:rgba(15,31,34,0.16)!important;
}
html:not(.dark) #architecture .reveal.reveal-delay-1 .flex.flex-wrap.gap-sm > div .text-on-surface{
  color:#0f1f22!important;
}
html:not(.dark) #architecture .bg-surface-container-highest{
  background:rgba(0,104,117,0.10)!important;
  border-color:rgba(0,104,117,0.24)!important;
}
html:not(.dark) #architecture .bg-surface-container-highest.text-primary{
  color:#0a4c55!important;
}

@media(prefers-reduced-motion:reduce){
  .reveal{transition:none;opacity:1;transform:none}
  .spark-bar{transition:none}
  .flow-link.flowing::after{animation:none}
}