/* Natural Path visual system | local, static and Cloudflare Pages safe */
:root{
  --np-yellow:#ffe600;--np-pink:#ff2d9e;--np-green:#39ff14;--np-blue:#00d4ff;
  --np-violet:#9b5de5;--np-orange:#ff6b35;--np-ink:#0a0a0a;--np-canvas:#fafaf5;
  --np-mono:"JetBrains Mono","Cascadia Code","SFMono-Regular",Consolas,monospace;
  --np-display:"Arial Black","Segoe UI Black",Impact,system-ui,sans-serif;
  --np-ticker-h:36px;--np-border:3px solid var(--np-ink);--np-shadow:7px 7px 0 var(--np-ink);
}
html{scroll-behavior:smooth;scrollbar-gutter:stable;color-scheme:light;}
html,body{max-width:100%;overflow-x:hidden;}
body{background:var(--np-canvas)!important;color:var(--np-ink)!important;font-family:var(--np-mono)!important;}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.075;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
::selection{background:var(--np-pink);color:#fff;}
*{scroll-margin-top:calc(var(--np-ticker-h) + 78px);}
button,a,input,select,textarea{font-family:inherit;}
a{color:inherit;}

/* Dynamic vertical scrollbar */
html{scrollbar-width:auto;scrollbar-color:var(--np-pink) var(--np-ink);}
html::-webkit-scrollbar{width:15px;}
html::-webkit-scrollbar-track{background:var(--np-ink);border-left:2px solid var(--np-ink);}
html::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--np-yellow),var(--np-pink),var(--np-blue),var(--np-green));border:3px solid var(--np-ink);border-radius:0;}
html::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--np-green),var(--np-blue),var(--np-pink),var(--np-yellow));}

/* Ticker and progress */
#np-ticker{height:var(--np-ticker-h);position:sticky;top:0;z-index:9990;overflow:hidden;white-space:nowrap;background:var(--np-ink);color:var(--np-yellow);border-bottom:3px solid var(--np-ink);font:800 11px/33px var(--np-mono);letter-spacing:.1em;text-transform:uppercase;}
#np-ticker-track{display:inline-block;min-width:200%;animation:npTicker 28s linear infinite;}
@keyframes npTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#np-scroll-progress{position:fixed;right:0;top:var(--np-ticker-h);bottom:0;width:7px;z-index:9992;background:rgba(10,10,10,.12);pointer-events:none;}
#np-scroll-progress>i{display:block;width:100%;height:0;background:linear-gradient(180deg,var(--np-yellow),var(--np-pink),var(--np-violet),var(--np-blue),var(--np-green));border-left:2px solid var(--np-ink);transition:height .08s linear;}
#np-scroll-percent{position:fixed;right:12px;bottom:14px;z-index:9988;background:var(--np-yellow);border:2px solid var(--np-ink);box-shadow:4px 4px 0 var(--np-ink);padding:4px 7px;font:900 10px var(--np-mono);pointer-events:none;}

/* Custom cursor only on precise pointer devices */
#np-cur{display:none;position:fixed;pointer-events:none;z-index:10000;width:18px;height:18px;border:2px solid var(--np-ink);border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:difference;filter:invert(1);transition:width .12s,height .12s,opacity .15s;}
#np-cur::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:var(--np-ink);transform:translate(-50%,-50%);}
@media(pointer:fine){#np-cur{display:block}body{cursor:none!important}button,a,input,select,textarea,[role="button"]{cursor:none!important}}
body.np-cur-down #np-cur{width:11px;height:11px;}

/* Global brutalist components */
.app-shell,.content,.main{position:relative;}
.topbar{top:var(--np-ticker-h)!important;background:rgba(250,250,245,.96)!important;color:var(--np-ink)!important;border:var(--np-border)!important;border-radius:0!important;box-shadow:var(--np-shadow)!important;backdrop-filter:blur(12px)!important;}
.brand-mark{border:2px solid var(--np-ink)!important;border-radius:0!important;background:var(--np-pink)!important;color:#fff!important;box-shadow:4px 4px 0 var(--np-ink)!important;}
.brand h1,.brand b{font-family:var(--np-display)!important;text-transform:uppercase;letter-spacing:-.02em;}
.brand small{color:#333!important;}
.actions,.top-actions{position:relative;z-index:2;}
.btn,.icon-btn,.nav-btn,.nav button{border:2px solid var(--np-ink)!important;border-radius:0!important;background:var(--np-canvas)!important;color:var(--np-ink)!important;box-shadow:3px 3px 0 var(--np-ink);font-weight:900!important;text-transform:uppercase;letter-spacing:.03em;transition:transform .15s,box-shadow .15s,background .15s!important;}
.btn:hover,.icon-btn:hover,.nav-btn:hover,.nav button:hover{transform:translate(-2px,-2px)!important;box-shadow:6px 6px 0 var(--np-ink)!important;background:var(--np-yellow)!important;}
.btn.primary,.nav-btn.active,.nav button.active{background:var(--np-pink)!important;color:#fff!important;border:2px solid var(--np-ink)!important;}

.hero,.hero-copy,.hero-side{border:var(--np-border)!important;border-radius:0!important;box-shadow:var(--np-shadow)!important;background:var(--np-yellow)!important;color:var(--np-ink)!important;position:relative;isolation:isolate;overflow:hidden;}
.hero::before,.hero-copy::before{content:attr(data-np-ghost);position:absolute;z-index:-1;right:-.03em;top:-.12em;font:900 clamp(72px,16vw,230px)/.9 var(--np-display);letter-spacing:-.08em;color:rgba(10,10,10,.055);white-space:nowrap;pointer-events:none;}
.hero h1,.hero h2{font-family:var(--np-display)!important;text-transform:uppercase;letter-spacing:-.055em!important;line-height:.9!important;color:var(--np-ink)!important;}
.hero p,.hero .muted{color:#222!important;}
.eyebrow,.chip,.pill,.badge,.tag{border:2px solid var(--np-ink)!important;border-radius:0!important;background:var(--np-ink)!important;color:var(--np-yellow)!important;font-weight:900!important;text-transform:uppercase;letter-spacing:.08em;}
.gradient-text{background:none!important;color:transparent!important;-webkit-text-stroke:2px var(--np-ink);}

.card,.panel,.sidebar,.modal,.modal-card,.modal-backdrop .modal,.kpi,.mini-stat,.feature,.list-item,.table-wrap,.chart,.code,.control,.input,.select,.textarea,.tag{border-radius:0!important;}
.card,.panel{border:var(--np-border)!important;background:var(--np-canvas)!important;color:var(--np-ink)!important;box-shadow:5px 5px 0 var(--np-ink)!important;}
.kpi,.mini-stat,.feature,.list-item{border:2px solid var(--np-ink)!important;background:#fff!important;color:var(--np-ink)!important;box-shadow:3px 3px 0 var(--np-ink);}
.kpi:nth-child(4n+1),.card:nth-child(4n+1){--np-local:var(--np-blue)}
.kpi:nth-child(4n+2),.card:nth-child(4n+2){--np-local:var(--np-pink)}
.kpi:nth-child(4n+3),.card:nth-child(4n+3){--np-local:var(--np-green)}
.kpi:nth-child(4n+4),.card:nth-child(4n+4){--np-local:var(--np-orange)}
.kpi strong,.card .value{font-family:var(--np-display)!important;}
.section-head h3,.panel h2,.panel h3,.feature h3{font-family:var(--np-display)!important;text-transform:uppercase;}
.muted,.section-head p,.feature span,.list-item small,.status{color:#444!important;}
.control,.input,.select,.textarea{border:2px solid var(--np-ink)!important;background:#fff!important;color:var(--np-ink)!important;box-shadow:3px 3px 0 var(--np-ink)!important;}
.control:focus,.input:focus,.select:focus,.textarea:focus{outline:3px solid var(--np-blue)!important;box-shadow:5px 5px 0 var(--np-ink)!important;}
.table-wrap{border:3px solid var(--np-ink)!important;background:#fff!important;box-shadow:5px 5px 0 var(--np-ink);}
table{color:var(--np-ink)!important;background:#fff!important;}
th{background:var(--np-ink)!important;color:var(--np-yellow)!important;}
th,td{border-color:var(--np-ink)!important;}
tr:hover td{background:#fff7b0!important;}
.chart,canvas.chart{border:3px solid var(--np-ink)!important;background:linear-gradient(180deg,#fff,#eafaff)!important;box-shadow:4px 4px 0 var(--np-ink);}
.code{border:3px solid var(--np-ink)!important;background:var(--np-ink)!important;color:var(--np-green)!important;box-shadow:5px 5px 0 var(--np-pink);}
.footer{background:var(--np-ink)!important;color:var(--np-canvas)!important;border-top:4px solid var(--np-ink);padding:28px!important;}

/* Section rhythm and reveal */
section,.section,.panel,.card{scroll-margin-top:calc(var(--np-ticker-h) + 90px);}
.np-reveal{opacity:0;transform:translateY(34px) rotate(.25deg);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.75,.25,1);}
.np-reveal.np-visible{opacity:1;transform:none;}
.np-section-rule{height:14px;margin:22px 0;background:repeating-linear-gradient(90deg,var(--np-ink) 0 18px,var(--np-yellow) 18px 36px,var(--np-pink) 36px 54px,var(--np-blue) 54px 72px);border:2px solid var(--np-ink);}

/* Existing ten-project sidebar, redesigned as a chapter rail */
.app{background:var(--np-canvas)!important;}
.sidebar{top:var(--np-ticker-h)!important;height:calc(100vh - var(--np-ticker-h))!important;background:var(--np-blue)!important;border:0!important;border-right:4px solid var(--np-ink)!important;box-shadow:none!important;color:var(--np-ink)!important;}
.sidebar .side-note{border:2px solid var(--np-ink)!important;border-radius:0!important;background:var(--np-yellow)!important;color:var(--np-ink)!important;box-shadow:4px 4px 0 var(--np-ink);}
.sidebar .nav button{background:var(--np-canvas)!important;}
.sidebar .nav button.active{background:var(--np-pink)!important;color:#fff!important;}
.main>.topbar{border-left:0!important;border-right:0!important;border-top:0!important;box-shadow:0 5px 0 var(--np-ink)!important;}
.content{padding-top:30px!important;}
#np-nav-overlay{position:fixed;inset:var(--np-ticker-h) 0 0;background:rgba(10,10,10,.66);z-index:18;opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(3px);}
#np-nav-overlay.open{opacity:1;pointer-events:auto;}

/* Added navigation for five projects */
#npMenuBtn{display:none;min-width:44px;min-height:44px;align-items:center;justify-content:center;}
#npDesktopNav{display:flex;align-items:center;gap:8px;margin-left:auto;margin-right:8px;}
#npDesktopNav a,#npMobileNav a{display:block;text-decoration:none;border:2px solid var(--np-ink);background:#fff;color:var(--np-ink);padding:8px 10px;font-weight:900;text-transform:uppercase;font-size:11px;box-shadow:3px 3px 0 var(--np-ink);}
#npDesktopNav a:hover,#npDesktopNav a.active,#npMobileNav a:hover,#npMobileNav a.active{background:var(--np-yellow);transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--np-ink);}
#npMobileNav{position:fixed;right:14px;top:calc(var(--np-ticker-h) + 76px);z-index:9995;width:min(320px,calc(100vw - 28px));padding:14px;border:3px solid var(--np-ink);background:var(--np-pink);box-shadow:8px 8px 0 var(--np-ink);display:grid;gap:10px;transform:translateY(-10px) scale(.98);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;}
#npMobileNav.open{opacity:1;pointer-events:auto;transform:none;}
#npMobileBackdrop{position:fixed;inset:var(--np-ticker-h) 0 0;z-index:9993;background:rgba(10,10,10,.62);opacity:0;pointer-events:none;transition:opacity .18s;backdrop-filter:blur(3px);}
#npMobileBackdrop.open{opacity:1;pointer-events:auto;}

@media(max-width:1040px){
  .sidebar{z-index:9994!important;top:var(--np-ticker-h)!important;height:calc(100vh - var(--np-ticker-h))!important;width:min(312px,88vw)!important;border-right:4px solid var(--np-ink)!important;}
  .sidebar.open{transform:translateX(0)!important;}
  .main>.topbar{top:var(--np-ticker-h)!important;}
}
@media(max-width:900px){
  #npDesktopNav{display:none}#npMenuBtn{display:inline-flex!important}
  .topbar{min-height:66px;}
}
@media(max-width:700px){
  :root{--np-ticker-h:32px;}
  #np-ticker{font-size:9px;line-height:29px;}
  #np-scroll-progress{width:5px}#np-scroll-percent{display:none}
  .hero,.hero-copy{box-shadow:5px 5px 0 var(--np-ink)!important;}
  .hero h1,.hero h2{font-size:clamp(38px,13vw,58px)!important;overflow-wrap:anywhere;}
  .topbar{top:var(--np-ticker-h)!important;margin-right:5px;}
  .brand small{display:none!important;}
  .actions,.top-actions{gap:5px!important;}
  .card,.panel{box-shadow:4px 4px 0 var(--np-ink)!important;}
  .footer{padding-bottom:max(34px,env(safe-area-inset-bottom))!important;}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.np-reveal{opacity:1;transform:none}}