/* ============ OpenAnyFile — shared styles ============ */
:root{
  --ease-out-expo: cubic-bezier(0.16,1,0.3,1);
  --ease-spring: cubic-bezier(0.22,1,0.36,1);
  --dur-tap:.2s; --dur-hover:.35s; --dur-reveal:.9s;
  --radius:18px; --radius-sm:12px;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
[data-theme="dark"]{
  --bg:#0a0d16; --bg-2:#0f1424; --bg-3:#141a2e;
  --fg:#eef1fb; --fg-2:#a7afc7; --fg-3:#6b7490;
  --line:rgba(148,163,205,.16);
  --accent:#5ee1ff; --accent-2:#8b5cf6; --accent-3:#22d3a5;
  --glow:rgba(94,225,255,.28);
  --card:rgba(20,26,46,.72);
  --shadow:0 24px 60px -20px rgba(0,0,0,.6);
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#f6f7fc; --bg-2:#ffffff; --bg-3:#eef1fa;
  --fg:#101527; --fg-2:#4a5370; --fg-3:#7b849f;
  --line:rgba(30,41,80,.14);
  --accent:#0798c8; --accent-2:#7c3aed; --accent-3:#0d9d7f;
  --glow:rgba(7,152,200,.22);
  --card:rgba(255,255,255,.82);
  --shadow:0 24px 60px -28px rgba(30,41,80,.25);
  color-scheme:light;
}
*{margin:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--fg);font-family:var(--font-body);
  overflow-x:hidden;line-height:1.65;-webkit-font-smoothing:antialiased;
  transition:background .5s ease,color .5s ease;
}
::selection{background:var(--accent);color:#04121a}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;letter-spacing:-.02em;font-weight:600}
h1{font-size:clamp(2.6rem,7.2vw,5.4rem)}
h2{font-size:clamp(1.9rem,4.4vw,3.2rem)}
h3{font-size:clamp(1.2rem,2.4vw,1.55rem)}
p{color:var(--fg-2)}
a{color:inherit}
img,video,canvas{max-width:100%}
button{font:inherit;cursor:pointer}
code,.mono{font-family:var(--font-mono)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---- loader curtain ---- */
#loader{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;
  gap:1.2rem;align-items:center;justify-content:center;transition:opacity .6s ease,visibility .6s}
#loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-mark{width:64px;height:64px;position:relative}
.loader-mark span{position:absolute;inset:0;border-radius:16px;border:2px solid var(--accent);
  animation:pulse 1.4s var(--ease-spring) infinite}
.loader-mark span:nth-child(2){animation-delay:.35s;border-color:var(--accent-2)}
@keyframes pulse{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.35);opacity:0}}
.loader-word{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.35em;text-transform:uppercase;color:var(--fg-3)}
#loader-bar{width:min(240px,50vw);height:2px;background:var(--line);border-radius:2px;overflow:hidden}
#loader-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .25s ease}

/* ---- progress bar ---- */
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:150;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:0 3px 3px 0}

/* ---- nav ---- */
header.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:1rem;
  padding:1.1rem clamp(1rem,4vw,3rem);transition:all .4s var(--ease-spring)}
header.nav.scrolled{padding-top:.55rem;padding-bottom:.55rem;background:var(--card);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:1.08rem}
.brand svg{width:30px;height:30px}
.nav-links{display:flex;gap:1.6rem;margin-left:auto;align-items:center}
.nav-links a{position:relative;text-decoration:none;font-size:.92rem;color:var(--fg-2);padding:.2rem 0;
  background:linear-gradient(var(--accent),var(--accent)) no-repeat left bottom/0 2px;transition:background-size var(--dur-hover) var(--ease-spring),color var(--dur-hover)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--fg);background-size:100% 2px}
#themeToggle{margin-left:.4rem;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);display:grid;place-items:center;color:var(--fg);transition:transform var(--dur-tap),box-shadow var(--dur-hover)}
#themeToggle:hover{transform:translateY(-2px) rotate(15deg);box-shadow:0 8px 24px -8px var(--glow)}
#themeToggle svg{width:18px;height:18px}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;
  width:42px;height:42px;color:var(--fg)}
@media(max-width:820px){
  .nav-links{position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:center;
    gap:2rem;font-size:1.3rem;transform:translateY(-100%);transition:transform .5s var(--ease-spring)}
  .nav-links.open{transform:none}
  .nav-links a{font-size:1.25rem}
  .menu-btn{display:grid;place-items:center;z-index:101}
  #themeToggle{margin-left:0}
}

/* ---- layout ---- */
main{position:relative;z-index:1}
.section{padding:clamp(4.5rem,10vw,8rem) clamp(1.1rem,6vw,7rem);position:relative}
.eyebrow{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--accent);display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent)}
.lede{max-width:56ch;margin-top:1rem;font-size:1.1rem}
.grid{display:grid;gap:1.2rem;margin-top:2.6rem}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* ---- cards ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:relative;overflow:hidden;
  transition:transform var(--dur-hover) var(--ease-spring),box-shadow var(--dur-hover),border-color var(--dur-hover)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--glow)}
.card .icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:1rem;
  background:linear-gradient(135deg,var(--glow),transparent);color:var(--accent);font-size:1.3rem}
.card h3{margin-bottom:.5rem}
.card p{font-size:.95rem}
.card .ext-row{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.4rem}
.chip{font-family:var(--font-mono);font-size:.68rem;padding:.28rem .55rem;border-radius:999px;
  border:1px solid var(--line);color:var(--fg-2);text-transform:uppercase;letter-spacing:.06em;
  transition:all var(--dur-tap)}
.chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}

/* ---- buttons ---- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.9rem;border-radius:999px;
  font-family:var(--font-display);font-weight:600;font-size:1rem;text-decoration:none;border:none;overflow:hidden;
  transition:transform var(--dur-hover) var(--ease-spring),box-shadow var(--dur-hover)}
.btn-primary{background:linear-gradient(120deg,var(--accent),var(--accent-2));color:#071019}
[data-theme="light"] .btn-primary{color:#fff}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--ease-spring)}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-ghost{border:1px solid var(--line);color:var(--fg);background:transparent}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 34px -12px var(--glow)}
.btn:active{transform:scale(.97)}

/* ---- hero ---- */
#webgl,.webgl-fallback{position:fixed;inset:0;width:100%;height:100%;z-index:0;object-fit:cover;pointer-events:none}
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:1.6rem;padding-top:7rem}
.hero .tagline{font-size:clamp(1.05rem,2vw,1.35rem);max-width:46ch}
.hero-title .grad{background:linear-gradient(95deg,var(--accent),var(--accent-2),var(--accent-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shimmer 6s linear infinite}
@keyframes shimmer{to{background-position:200% 0}}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.6rem}
.hero-meta{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.6rem;font-family:var(--font-mono);
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.hero-meta span{display:flex;align-items:center;gap:.5rem}
.hero-meta b{color:var(--accent);font-weight:600}

/* ---- dropzone ---- */
.dropzone{margin-top:2.4rem;border:1.5px dashed var(--line);border-radius:26px;padding:clamp(2rem,5vw,3.6rem);
  text-align:center;background:var(--card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  cursor:pointer;position:relative;overflow:hidden;transition:border-color .35s,box-shadow .35s,transform .35s var(--ease-spring)}
.dropzone::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 70%,var(--glow),transparent 85%);
  animation:spin 7s linear infinite;opacity:0;transition:opacity .4s}
.dropzone:hover::before,.dropzone.drag::before{opacity:1}
@keyframes spin{to{transform:rotate(1turn)}}
.dropzone>*{position:relative}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);box-shadow:0 0 0 6px var(--glow),var(--shadow);transform:translateY(-3px)}
.dz-icon{width:66px;height:66px;margin:0 auto 1rem;color:var(--accent);animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.dropzone h3{font-size:1.35rem}
.dropzone p{margin-top:.4rem;font-size:.95rem}
.dropzone .hint{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-3);margin-top:1.1rem}

/* ---- viewer ---- */
.viewer{margin-top:2rem;display:none}
.viewer.active{display:block;animation:rise .6s var(--ease-spring)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
.viewer-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0;padding:1rem 1.3rem;backdrop-filter:blur(14px)}
.file-badge{font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.1em;padding:.4rem .7rem;
  border-radius:9px;background:linear-gradient(120deg,var(--accent),var(--accent-2));color:#071019;text-transform:uppercase}
[data-theme="light"] .file-badge{color:#fff}
.file-name{font-weight:600;word-break:break-all}
.file-meta{font-family:var(--font-mono);font-size:.72rem;color:var(--fg-3)}
.viewer-actions{margin-left:auto;display:flex;gap:.5rem}
.viewer-actions button{border:1px solid var(--line);background:transparent;color:var(--fg-2);border-radius:9px;
  padding:.45rem .8rem;font-size:.8rem;transition:all var(--dur-tap)}
.viewer-actions button:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.viewer-body{border:1px solid var(--line);border-top:none;border-radius:0 0 var(--radius) var(--radius);
  background:var(--bg-2);min-height:220px;max-height:78vh;overflow:auto;padding:0}
.viewer-body iframe{width:100%;height:74vh;border:none;display:block}
.viewer-body img{display:block;margin:auto;max-height:74vh;object-fit:contain}
.viewer-body video,.viewer-body audio{width:100%;display:block}
.viewer-body video{max-height:74vh;background:#000}
.viewer-body audio{padding:2.5rem 1.5rem;box-sizing:content-box;width:calc(100% - 3rem)}
.viewer-body pre{margin:0;padding:1.4rem;font-family:var(--font-mono);font-size:.85rem;line-height:1.6;
  white-space:pre-wrap;word-break:break-word}
.viewer-body table{border-collapse:collapse;width:100%;font-size:.85rem}
.viewer-body table td,.viewer-body table th{border:1px solid var(--line);padding:.45rem .7rem;white-space:nowrap}
.viewer-body table tr:first-child{position:sticky;top:0;background:var(--bg-3);font-weight:600}
.doc-render{padding:clamp(1.4rem,4vw,3rem);max-width:820px;margin:auto;background:var(--bg-2)}
.doc-render img{max-width:100%}
.zip-list li{display:flex;gap:1rem;justify-content:space-between;padding:.6rem 1rem;border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:.82rem;list-style:none}
.zip-list{margin:0;padding:0}
.viewer-note{padding:1rem 1.4rem;font-size:.85rem;color:var(--fg-3);border-top:1px dashed var(--line)}
.spin-load{width:38px;height:38px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;
  margin:4rem auto;animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(1turn)}}
.font-preview{padding:2rem;font-size:2rem;line-height:1.4}

/* ---- stats ---- */
.stats{display:flex;gap:clamp(1.5rem,6vw,5rem);flex-wrap:wrap;margin-top:2.5rem}
.stat b{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,3.6rem);display:block;
  background:linear-gradient(120deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:.85rem;color:var(--fg-3);letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-mono)}

/* ---- faq ---- */
.faq-item{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:.9rem;background:var(--card);overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:1.15rem 1.4rem;font-weight:600;font-family:var(--font-display);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;transition:color var(--dur-tap)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.4rem;color:var(--accent);transition:transform .35s var(--ease-spring)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item[open] summary{color:var(--accent)}
.faq-item .faq-a{padding:0 1.4rem 1.2rem;color:var(--fg-2);font-size:.95rem}

/* ---- steps ---- */
.step{display:grid;grid-template-columns:64px 1fr;gap:1.4rem;align-items:start;margin-top:2.2rem}
.step-num{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-family:var(--font-display);
  font-weight:700;font-size:1.3rem;background:linear-gradient(135deg,var(--glow),transparent);border:1px solid var(--line);color:var(--accent)}

/* ---- share ---- */
.share-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}
.share-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.05rem;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--fg-2);font-size:.85rem;text-decoration:none;transition:all var(--dur-hover) var(--ease-spring)}
.share-btn:hover{transform:translateY(-3px);border-color:var(--accent);color:var(--accent);box-shadow:0 10px 26px -12px var(--glow)}
.share-btn svg{width:16px;height:16px}

/* ---- marquee ---- */
.marquee{overflow:hidden;padding:1.4rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:2.6rem;width:max-content;animation:mq 34s linear infinite;font-family:var(--font-mono);
  font-size:.85rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-3)}
.marquee-track span{display:flex;align-items:center;gap:2.6rem}
.marquee-track i{color:var(--accent);font-style:normal}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:3.4rem clamp(1.1rem,6vw,7rem) 2.4rem;position:relative;z-index:1;background:var(--bg)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.4rem}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}
footer h4{margin-bottom:1rem;font-size:1rem}
footer ul{list-style:none;padding:0;display:grid;gap:.55rem}
footer a{text-decoration:none;color:var(--fg-2);font-size:.92rem;transition:color var(--dur-tap)}
footer a:hover{color:var(--accent)}
.credit{margin-top:2.8rem;padding-top:1.6rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;font-size:.88rem;color:var(--fg-3)}
.credit a{color:var(--accent);font-weight:600;text-decoration:none;position:relative}
.credit a::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;background:var(--accent);transition:width .35s var(--ease-spring)}
.credit a:hover::after{width:100%}

/* ---- reveal defaults (pre-JS state handled in JS) ---- */
[data-reveal]{will-change:transform,opacity}

/* ---- page hero (subpages) ---- */
.page-hero{padding-top:clamp(9rem,18vh,12rem)}
.breadcrumb{font-family:var(--font-mono);font-size:.75rem;color:var(--fg-3);margin-bottom:1.2rem;letter-spacing:.1em}
.breadcrumb a{color:var(--fg-3);text-decoration:none}
.breadcrumb a:hover{color:var(--accent)}

/* ---- toast ---- */
#toast{position:fixed;bottom:1.6rem;left:50%;transform:translate(-50%,140%);z-index:180;background:var(--card);
  border:1px solid var(--line);backdrop-filter:blur(16px);padding:.8rem 1.4rem;border-radius:999px;font-size:.9rem;
  transition:transform .5s var(--ease-spring);box-shadow:var(--shadow)}
#toast.show{transform:translate(-50%,0)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}

/* ---- v2: archive browser ---- */
.zl-row{cursor:pointer;transition:background var(--dur-tap),transform var(--dur-tap)}
.zl-row:hover{background:var(--bg-3);transform:translateX(3px)}
.crumb-link{background:none;border:none;color:var(--fg-2);font-family:var(--font-mono);font-size:.72rem;
  cursor:pointer;padding:.2rem .3rem;border-radius:6px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumb-link:hover{color:var(--accent);background:var(--bg-3)}
.crumb-sep{color:var(--fg-3);font-size:.8rem}
#archiveCrumb{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap;width:100%;order:10}

/* ---- v2: 3D logo cube ---- */
.logo3d{width:32px;height:32px;perspective:140px;flex:none}
.logo3d .cube{width:20px;height:20px;margin:6px;position:relative;transform-style:preserve-3d;
  animation:cubespin 9s linear infinite}
.logo3d .cube i{position:absolute;inset:0;border-radius:4px;border:1px solid rgba(255,255,255,.25);
  background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.logo3d .cube i:nth-child(1){transform:translateZ(10px)}
.logo3d .cube i:nth-child(2){transform:rotateY(180deg) translateZ(10px);background:linear-gradient(135deg,var(--accent-2),var(--accent-3))}
.logo3d .cube i:nth-child(3){transform:rotateY(90deg) translateZ(10px);background:linear-gradient(135deg,var(--accent),var(--accent-3))}
.logo3d .cube i:nth-child(4){transform:rotateY(-90deg) translateZ(10px);background:linear-gradient(135deg,var(--accent-2),var(--accent))}
.logo3d .cube i:nth-child(5){transform:rotateX(90deg) translateZ(10px)}
.logo3d .cube i:nth-child(6){transform:rotateX(-90deg) translateZ(10px)}
@keyframes cubespin{from{transform:rotateX(-18deg) rotateY(0)}to{transform:rotateX(-18deg) rotateY(360deg)}}
.brand:hover .cube{animation-duration:2.2s}
@media (prefers-reduced-motion: reduce){.logo3d .cube{animation:none;transform:rotateX(-18deg) rotateY(35deg)}}

/* ---- extension index ---- */
.ext-index{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.6rem}

/* ---- v3: new Prism Portal logo ---- */
.brand-mark{width:34px;height:34px;flex:none;filter:drop-shadow(0 4px 12px var(--glow));transition:transform .5s var(--ease-spring)}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.08)}
.brand-mark .bm-spark{animation:sparkfloat 2.8s ease-in-out infinite}
.brand-mark .bm-beam{animation:beampulse 2.8s ease-in-out infinite}
@keyframes sparkfloat{50%{transform:translateY(-2.5px)}}
@keyframes beampulse{50%{opacity:.55}}
@media (prefers-reduced-motion: reduce){.brand-mark .bm-spark,.brand-mark .bm-beam{animation:none}}

/* ---- v3: layout overlap fix (share row vs cards on About etc.) ---- */
.share-row{position:relative;z-index:2;clear:both;margin-top:2.8rem}
.grid + .share-row, .grid ~ .share-row{margin-top:3.2rem}
.grid .card{min-width:0}
.section > *{position:relative}

/* ---- v4: image logo ---- */
.brand-mark-img{width:38px;height:auto;flex:none;filter:drop-shadow(0 5px 14px var(--glow));
  transition:transform .5s var(--ease-spring)}
.brand:hover .brand-mark-img{transform:rotate(-7deg) scale(1.1)}

/* ---- v4: animated themed scrollbar ---- */
html{scrollbar-width:thin;scrollbar-color:var(--accent) var(--bg-2)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--sb-angle,160deg),var(--accent),var(--accent-2),var(--accent-3));
  border-radius:8px;border:2px solid var(--bg-2)}
::-webkit-scrollbar-thumb:hover{border-width:1px}
.viewer-body::-webkit-scrollbar{width:9px}

/* ---- v4: fullscreen viewer ---- */
.viewer-body:fullscreen{background:var(--bg);max-height:none;padding:1rem}
.viewer-body:fullscreen iframe,.viewer-body:fullscreen video{height:96vh;max-height:96vh}
.viewer-body:fullscreen img{max-height:96vh}

/* ---- v5: hero globe + particles (vanilla canvas) ---- */
#heroParticles{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero{position:relative}
.hero-copy{position:relative;z-index:2;max-width:760px}
#heroGlobe{position:absolute;top:50%;right:clamp(-4rem,2vw,5rem);transform:translateY(-52%);
  width:min(44vw,560px);height:min(44vw,560px);z-index:1;pointer-events:auto}
@media(max-width:980px){
  #heroGlobe{position:absolute;top:8%;right:50%;transform:translateX(50%);
    width:min(78vw,420px);height:min(78vw,420px);opacity:.5;pointer-events:none}
  .hero{padding-top:9rem}
}

/* ---- v5: site-wide slow background color shift ---- */
#bgshift{position:fixed;inset:-20%;z-index:0;pointer-events:none;filter:blur(60px);
  opacity:.16;animation:bgdrift 46s ease-in-out infinite alternate, bghue 90s linear infinite;
  background:
    radial-gradient(38% 34% at 22% 28%, var(--accent), transparent 70%),
    radial-gradient(34% 38% at 78% 66%, var(--accent-2), transparent 70%),
    radial-gradient(30% 30% at 55% 15%, var(--accent-3), transparent 70%)}
[data-theme="light"] #bgshift{opacity:.10}
@keyframes bgdrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(4%, -3%, 0) scale(1.08)}
  100%{transform:translate3d(-4%, 3%, 0) scale(1.02)}}
@keyframes bghue{to{filter:blur(60px) hue-rotate(360deg)}}
main,footer{position:relative}
header.nav{position:fixed}
@media (prefers-reduced-motion: reduce){#bgshift{animation:none}}

/* ---- v6: install button ---- */
.install-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:999px;
  border:1px solid var(--line);background:linear-gradient(120deg,var(--accent),var(--accent-2));
  color:#071019;font-family:var(--font-display);font-weight:600;font-size:.85rem;white-space:nowrap;
  transition:transform var(--dur-hover) var(--ease-spring),box-shadow var(--dur-hover)}
[data-theme="light"] .install-btn{color:#fff}
.install-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -10px var(--glow)}
.install-btn:active{transform:scale(.96)}
@media(max-width:820px){.install-btn{font-size:1rem;padding:.7rem 1.4rem}}

/* ---- v6: full responsive hardening ---- */
@media(max-width:560px){
  .section{padding-left:1rem;padding-right:1rem}
  h1{font-size:clamp(2.1rem,11vw,3.2rem)}
  .hero{padding-top:8rem}
  .hero-meta{gap:.9rem;font-size:.68rem}
  .btn{padding:.85rem 1.4rem;font-size:.95rem;width:100%;justify-content:center}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .dropzone{padding:1.6rem 1rem;border-radius:18px}
  .dz-icon{width:52px;height:52px}
  .viewer-head{padding:.85rem 1rem;gap:.7rem}
  .viewer-actions{width:100%;margin-left:0;justify-content:flex-end;flex-wrap:wrap}
  .file-name{font-size:.92rem}
  .viewer-body iframe{height:64vh}
  .doc-render{padding:1.1rem}
  .stats{gap:1.4rem}
  .stat b{font-size:2rem}
  .step{grid-template-columns:46px 1fr;gap:.9rem}
  .step-num{width:42px;height:42px;font-size:1.05rem;border-radius:12px}
  .share-btn{font-size:.78rem;padding:.5rem .85rem}
  .card{padding:1.25rem}
  footer{padding-left:1rem;padding-right:1rem}
  .credit{font-size:.8rem}
  .zip-list li{font-size:.72rem;padding:.55rem .7rem}
  .faq-item summary{padding:1rem 1.1rem;font-size:.95rem}
  .chip{font-size:.62rem}
}
@media(max-width:380px){
  h1{font-size:2rem}
  .brand{font-size:.95rem}
  .brand-mark-img{width:30px}
  .hero-meta{flex-direction:column;gap:.5rem}
}
@media(min-width:1800px){
  .section{max-width:1560px;margin-inline:auto}
  footer .foot-grid,.credit{max-width:1560px;margin-inline:auto}
}
.viewer-body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.viewer-body table{display:block;overflow-x:auto;max-width:100%}
img,video,iframe,canvas{max-width:100%}

/* ---- v7: hero top spacing = 5% + navbar only ---- */
.hero{min-height:100svh;justify-content:flex-start;padding-top:calc(5vh + 72px)}
@media(max-width:980px){
  .hero{padding-top:calc(5vh + 72px)}
  #heroGlobe{top:16%}
}
@media(max-width:560px){.hero{padding-top:calc(5vh + 64px)}}

/* ---- v8: mobile menu must be fully invisible when closed (fixes peek on scroll) ---- */
@media(max-width:820px){
  .nav-links{transform:translateY(-110%);visibility:hidden;pointer-events:none;
    transition:transform .5s var(--ease-spring),visibility 0s linear .5s}
  .nav-links.open{transform:none;visibility:visible;pointer-events:auto;transition:transform .5s var(--ease-spring)}
}

/* ---- v9: EPS dual-variant output ---- */
.dual-out{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem}
.dual-out.single{grid-template-columns:1fr}
.dual-col{min-width:0}
.dual-label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);text-align:center;padding:.5rem;border:1px dashed var(--line);border-radius:10px;margin-bottom:.4rem}
@media(max-width:760px){.dual-out{grid-template-columns:1fr}}

/* ---- v9: hero starts 5px below the header ---- */
.hero{padding-top:calc(var(--nav-h,72px) - 8px)}
@media(max-width:980px){.hero{padding-top:calc(var(--nav-h,72px) - 8px)}
  #heroGlobe{top:24%}}
@media(max-width:560px){.hero{padding-top:calc(var(--nav-h,68px) - 8px)}}

/* ---- v10: 3D modern footer ---- */
footer{position:relative;overflow:hidden;background:
  radial-gradient(60% 90% at 15% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
  radial-gradient(50% 80% at 90% 100%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 60%),
  var(--bg);
  border-top:none;padding-top:4.2rem}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),var(--accent-3),transparent);
  background-size:200% 100%;animation:footline 6s linear infinite}
@keyframes footline{to{background-position:200% 0}}
.foot-watermark{position:absolute;left:50%;bottom:-1.2rem;transform:translateX(-50%);
  font-family:var(--font-display);font-weight:700;font-size:clamp(4rem,13vw,11rem);letter-spacing:.06em;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb, var(--fg) 8%, transparent);
  pointer-events:none;user-select:none;white-space:nowrap}
.foot-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:relative;
  transform-style:preserve-3d;transition:transform var(--dur-hover) var(--ease-spring),box-shadow var(--dur-hover),border-color var(--dur-hover)}
.foot-card:hover{transform:translateY(-6px) rotateX(2.5deg);box-shadow:var(--shadow);border-color:var(--glow)}
.foot-card h4{display:inline-block;background:linear-gradient(120deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.foot-card ul a{display:inline-flex;align-items:center;gap:.45rem}
.foot-card ul a::before{content:"→";color:var(--accent);opacity:0;transform:translateX(-6px);
  transition:all var(--dur-tap) var(--ease-spring)}
.foot-card ul a:hover::before{opacity:1;transform:none}
.foot-about .brand-mark-img{animation:footfloat 4s ease-in-out infinite}
@keyframes footfloat{50%{transform:translateY(-5px) rotate(-4deg)}}
.foot-badges{margin-top:1.1rem;display:flex;gap:.45rem;flex-wrap:wrap}
.foot-grid{position:relative;z-index:1}
.credit{position:relative;z-index:1;border-top:1px solid var(--line);align-items:center}
.tg-btn{display:inline-block;padding:.45rem 1.05rem;border-radius:999px;margin-left:.35rem;
  background:linear-gradient(120deg,var(--accent),var(--accent-2));color:#071019!important;font-weight:700;
  position:relative;overflow:hidden;transition:transform var(--dur-hover) var(--ease-spring),box-shadow var(--dur-hover)}
[data-theme="light"] .tg-btn{color:#fff!important}
.tg-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .7s var(--ease-spring)}
.tg-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -10px var(--glow)}
.tg-btn:hover::after{transform:translateX(130%)}
.credit a.tg-btn::after{height:100%}
.credit a.tg-btn:hover::after{width:auto}
@media(max-width:760px){
  footer{padding-top:3.2rem}
  .foot-card{text-align:center}
  .foot-card ul a{justify-content:center}
  .foot-about .brand{justify-content:center}
  .foot-badges{justify-content:center}
  .credit{flex-direction:column;text-align:center;gap:.9rem}
  .foot-watermark{font-size:16vw;bottom:4.4rem}
}
@media (prefers-reduced-motion: reduce){footer::before,.foot-about .brand-mark-img{animation:none}}

/* ---- v10: dual fullscreen ---- */
.dual-label{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.45rem .6rem .45rem .9rem}
.dual-fs{border:1px solid var(--line);background:var(--card);color:var(--fg-2);border-radius:999px;
  padding:.3rem .7rem;font-size:.72rem;letter-spacing:.05em;transition:all var(--dur-tap)}
.dual-fs:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.dual-col:fullscreen{background:var(--bg);overflow:auto;padding:1.2rem}
.dual-col:fullscreen img{max-height:none}