:root{--bg:#0B0C2A;--panel:rgba(14,16,52,.72);--stroke:rgba(255,255,255,.14);--txt:#EAF2FF;--muted:rgba(234,242,255,.72);--pink:#FF1493;--cyan:#00FFFF;--purple:#8A2BE2;--shadow:0 18px 60px rgba(0,0,0,.55)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(1200px 800px at 70% 10%, rgba(138,43,226,.35), transparent 60%),radial-gradient(900px 700px at 20% 40%, rgba(0,255,255,.18), transparent 55%),var(--bg);color:var(--txt);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;overflow-x:hidden}.bgfx{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}.bgfx__img{position:absolute;inset:0;background-image:linear-gradient(180deg, rgba(11,12,42,.50), rgba(11,12,42,.78)),url("background.png");background-size:cover;background-position:center;filter:saturate(1.08) contrast(1.05);opacity:.85}.grid{position:absolute;inset:-20% -20% -10% -20%;background:linear-gradient(rgba(0,255,255,.22) 1px, transparent 1px),linear-gradient(90deg, rgba(255,20,147,.16) 1px, transparent 1px);background-size:56px 56px;transform:perspective(800px) rotateX(58deg) translateY(140px);opacity:.38}.sun{position:absolute;width:min(520px,60vw);aspect-ratio:1;left:50%;top:8%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(0,255,255,.9), rgba(255,20,147,.85) 45%, rgba(138,43,226,.75) 70%, rgba(11,12,42,0) 74%);opacity:.55}.noise{position:absolute;inset:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="120" height="120" filter="url(%23n)" opacity=".35"/></svg>');mix-blend-mode:overlay;opacity:.08}.wrap{width:min(1100px,92vw);margin:0 auto}.top{position:sticky;top:0;z-index:10;backdrop-filter:blur(12px);background:linear-gradient(90deg, rgba(138,43,226,.18), rgba(255,20,147,.12), rgba(0,255,255,.10));border-bottom:1px solid var(--stroke)}.top .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0}.brand{display:flex;gap:12px;align-items:center}.brand__mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-family:Orbitron,Inter;background:linear-gradient(135deg, rgba(255,20,147,.85), rgba(0,255,255,.75));box-shadow:0 0 0 1px rgba(255,255,255,.18),0 14px 30px rgba(255,20,147,.18)}.brand__name{font-family:Orbitron;letter-spacing:.12em;font-weight:700}.brand__tag{font-size:12px;color:var(--muted)}.cta{text-decoration:none;color:var(--txt);padding:10px 14px;border-radius:14px;border:1px solid rgba(0,255,255,.35);background:linear-gradient(135deg, rgba(0,255,255,.14), rgba(255,20,147,.10))}.hero{padding:56px 0 26px}.hero h1{font-family:Orbitron;font-size:clamp(28px,3.8vw,52px);margin:0 0 10px}.lead{color:var(--muted);font-size:clamp(14px,1.4vw,18px);line-height:1.6;max-width:72ch}.hero__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.card{background:linear-gradient(180deg, rgba(14,16,52,.75), rgba(14,16,52,.55));border:1px solid var(--stroke);border-radius:18px;padding:16px;box-shadow:var(--shadow)}.card h3{margin:0 0 8px;font-family:Orbitron;font-size:16px;letter-spacing:.08em}.card p{margin:0;color:var(--muted);line-height:1.6}.panel{margin:18px 0 0;background:linear-gradient(180deg, rgba(14,16,52,.78), rgba(14,16,52,.55));border:1px solid var(--stroke);border-radius:22px;padding:18px;box-shadow:var(--shadow)}.panel__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.10);padding-bottom:10px;margin-bottom:14px}.panel__head h2{margin:0;font-family:"Yoster";letter-spacing:.12em;font-size:18px}.panel__sub{margin:18px 0 10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.10)}.panel__sub h3{margin:0 0 6px;font-family:Orbitron;font-size:14px;letter-spacing:.12em}.muted{color:var(--muted)}.form{display:grid;gap:14px}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.field label{display:block;font-size:12px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px}.field input,.field select,.field textarea{width:100%;color:var(--txt);background:rgba(10,12,40,.55);border:1px solid rgba(0,255,255,.24);border-radius:14px;padding:12px 12px;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(255,20,147,.55);box-shadow:0 0 0 4px rgba(255,20,147,.12)}.hint{margin-top:8px;color:rgba(234,242,255,.66);font-size:12px}.err{min-height:16px;margin-top:6px;font-size:12px;color:#ff86c8}.filelist{list-style:none;padding:8px 0 0;margin:0;display:grid;gap:6px}.filelist li{font-size:13px;color:rgba(234,242,255,.82);padding:8px 10px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(10,12,40,.35)}.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.btn{border:none;cursor:pointer;font-family:Orbitron;letter-spacing:.12em;color:#071021;padding:12px 16px;border-radius:16px;background:linear-gradient(135deg, rgba(0,255,255,.92), rgba(255,20,147,.92));box-shadow:0 18px 46px rgba(255,20,147,.20),0 0 0 1px rgba(255,255,255,.14)}.status{color:rgba(234,242,255,.78);font-size:13px}.faq{display:grid;gap:10px}.faq details{border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:12px;background:rgba(10,12,40,.35)}.faq summary{cursor:pointer;font-family:Orbitron;letter-spacing:.08em}.footer{padding:30px 0 46px}.peeker{position:fixed;top:-34px;left:18px;z-index:999;width:220px}.peeker--right{left:auto;right:18px;top:auto;bottom:-34px;}.peeker--right .peeker__img{transform:translateY(78px);}.peeker--right:hover .peeker__img,.peeker--right:focus-within .peeker__img{transform:translateY(0);}.peeker--right .peeker__links{margin-top:0;margin-bottom:-6px;transform:translateY(8px);}.peeker--right:hover .peeker__links,.peeker--right:focus-within .peeker__links{transform:translateY(0);}.peeker__hit{position:absolute;inset:0;width:100%;height:120px;background:transparent;border:0}.peeker__img{width:220px;display:block;transform:translateY(-78px);transform-origin:50% 40%;will-change:transform;transition:transform .70s cubic-bezier(.18,.92,.22,1);filter:drop-shadow(0 16px 22px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(255,20,147,.18))}.peeker__links{display:flex;gap:8px;flex-wrap:wrap;padding:10px 10px 12px;margin-top:-6px;border-radius:16px;background:linear-gradient(180deg, rgba(14,16,52,.72), rgba(14,16,52,.50));border:1px solid rgba(0,255,255,.22);opacity:0;transform:translateY(-8px);transition:opacity .25s ease, transform .25s ease;backdrop-filter:blur(10px)}.peeker__links a{text-decoration:none;font-size:12px;color:rgba(234,242,255,.86);border:1px solid rgba(255,255,255,.12);padding:6px 9px;border-radius:120px;background:rgba(10,12,40,.35)}.peeker:hover .peeker__img,.peeker:focus-within .peeker__img{transform:translateY(0)}.peeker:hover .peeker__links,.peeker:focus-within .peeker__links{opacity:1;transform:translateY(0)}@keyframes jiggle{0%,100%{transform:translateY(-78px)}25%{transform:translateY(-74px)}50%{transform:translateY(-80px)}75%{transform:translateY(-76px)}}.peeker:not(:hover):not(:focus-within) .peeker__img{animation:jiggle 1.25s infinite ease-in-out}@media (max-width:860px){.hero__cards{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}.peeker{left:10px;width:170px}.peeker__img{width:170px}}


html {
      cursor: url('gwimbly.gif'), auto;
}



@font-face {
    font-family: 'idk';
    src: local('karmatic'), url('assets/ka1.ttf');
	src: local('yoster'), url('assets/yoster.ttf');
	
}
/* === Added: secondary buttons + payload dialog === */
.btn--ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,.28);
  color: inherit;
}
.btn--ghost:hover{border-color: rgba(255,255,255,.55);}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

.dialog{
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  padding: 0;
  width: min(920px, calc(100vw - 32px));
  background: rgba(10,10,18,.92);
  color: #fff;
  box-shadow: 0 20px 80px rgba(0,0,0,.55);
}
.dialog::backdrop{
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
}
.dialog__inner{padding: 16px;}
.dialog__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.dialog__pre{
  max-height: min(60vh, 520px);
  overflow:auto;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
  line-height: 1.4;
  white-space: pre;
}
.dialog__foot{
  display:flex;
  align-items:center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.peeker--right .peeker__hit{top:auto;bottom:0;height:120px;}/* ==========================================================
   FIX: Peeker hover should feel immediate + smooth (no delay)
   - Bigger hit area so hover triggers reliably
   - Links remain clickable (hit area sits behind them)
   - Disable transform-jiggle that fights the hover transition
   - Add bottom-right peeker support (peeking2.png)
========================================================== */

.peeker{ pointer-events:auto; }

.peeker__hit{
  /* cover the whole mascot area so hover doesn't feel "laggy" */
  height: 260px;
  z-index: 1;
}

.peeker__img{
  position: relative;
  z-index: 2;
  transition: transform .38s cubic-bezier(.2,.9,.2,1) !important;
  transition-delay: 0s !important;
  animation: none !important;
}

.peeker__links{
  position: relative;
  z-index: 3;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease !important;
  transition-delay: 0s !important;
}

.peeker:hover .peeker__links,
.peeker:focus-within .peeker__links{
  pointer-events: auto;
}

.peeker:not(:hover):not(:focus-within) .peeker__img{
  animation: none !important;
}

/* Bottom-right peeker (peeking up from page bottom) */
.peeker.peeker--right{
  left: auto;
  right: 18px;
  top: auto;
  bottom: calc(10px + env(safe-area-inset-bottom));
  width: 220px;
}

.peeker--right .peeker__hit{
  top: auto;
  bottom: 0;
  height: 220px; /* match the visible mascot region */
}

.peeker--right .peeker__img{
  /* push down so only the top edge peeks up */
  transform: translateY(199px);
  transform-origin: 50% 70%;
}

.peeker--right:hover .peeker__img,
.peeker--right:focus-within .peeker__img{
  transform: translateY(0);
}

.peeker--right .peeker__links{
  margin-top: 0;
  margin-bottom: 0;
  transform: translateY(8px);
}

.peeker--right:hover .peeker__links,
.peeker--right:focus-within .peeker__links{
  transform: translateY(0);
}

/* Keep the bottom-right peeker above the mobile dock */
@media (max-width: 820px){
  .peeker.peeker--right{
    right: 10px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    width: 170px;
  }
  .peeker--right .peeker__hit{height: 190px;}
  .peeker--right .peeker__img{width: 170px; transform: translateY(222px);}
}


/* ==========================================================
   2026 EXPANSION: mobile version + new components
   - Responsive layout (and desktop "Mobile View" toggle via .force-mobile)
   - Top navigation + hamburger on small screens
   - Mobile bottom dock
   - Drag & drop upload zone + thumbnails
   - Tracking cards + steps + pricing grid
========================================================== */

.skip{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip:focus{
  left:12px;top:12px;width:auto;height:auto;padding:10px 12px;border-radius:12px;
  background:rgba(14,16,52,.9);border:1px solid var(--stroke);z-index:9999;
}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.navrow{display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand--link{text-decoration:none;color:inherit}
.topnav{display:flex;gap:14px;align-items:center}
.topnav a{color:var(--txt);text-decoration:none;font-family:Orbitron,Inter;letter-spacing:.02em;font-size:14px;opacity:.9}
.topnav a:hover{opacity:1;text-decoration:underline}
.navactions{display:flex;gap:10px;align-items:center}
.nav__toggle{display:none}
.btn--sm{padding:10px 12px;font-size:12px}
.page .top{position:sticky;top:0;z-index:25}
.page .top .wrap{padding-top:14px;padding-bottom:14px}

.steps{margin:0;padding-left:18px;display:grid;gap:10px}
.steps li{line-height:1.5}
.steps strong{font-family:Orbitron,Inter;letter-spacing:.02em}

.dropzone{
  border:1px dashed rgba(234,242,255,.38);
  border-radius:16px;
  background:rgba(10,12,40,.28);
  padding:14px;
  display:flex;
  gap:12px;
  align-items:center;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.dropzone:focus{outline:2px solid rgba(0,255,255,.6);outline-offset:2px}
.dropzone:hover{transform:translateY(-1px);background:rgba(10,12,40,.36);border-color:rgba(0,255,255,.5)}
.dropzone--drag{border-color:rgba(255,20,147,.7);background:rgba(255,20,147,.08);transform:translateY(-1px)}
.filethumbs{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;
}
.filethumb{
  position:relative;
  border:1px solid var(--stroke);
  border-radius:16px;
  overflow:hidden;
  background:rgba(10,12,40,.22);
}
.filethumb img{display:block;width:100%;height:120px;object-fit:cover}
.filethumb__meta{padding:10px}
.filethumb__name{font-size:12px;opacity:.95;word-break:break-word}
.filethumb__size{font-size:11px;opacity:.7;margin-top:4px}
.filethumb__rm{
  position:absolute;right:8px;top:8px;
  width:34px;height:34px;border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(14,16,52,.85);
  color:var(--txt);
  cursor:pointer;
}
.filethumb__rm:hover{border-color:rgba(0,255,255,.55)}

.checks{display:grid;gap:10px;margin-top:10px}
.check{display:flex;gap:10px;align-items:flex-start}
.check input{margin-top:4px}

.recent{
  margin-top:18px;
  border-top:1px solid var(--stroke);
  padding-top:16px;
}
.recent__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.recent__list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.recent__item{
  display:flex;justify-content:space-between;gap:10px;align-items:center;
  border:1px solid var(--stroke);
  background:rgba(10,12,40,.22);
  border-radius:14px;
  padding:10px 12px;
}
.recent__id{font-family:Orbitron,Inter;letter-spacing:.02em;font-size:12px}
.recent__btns{display:flex;gap:8px;align-items:center}
.link{color:var(--txt);opacity:.9}
.link:hover{opacity:1;text-decoration:underline}

.trackform{margin-top:8px}
.trackcard{
  margin-top:14px;
  border:1px solid var(--stroke);
  background:rgba(10,12,40,.22);
  border-radius:18px;
  padding:14px;
}
.trackcard__row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.badge{
  display:inline-flex;gap:8px;align-items:center;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(14,16,52,.72);
  font-family:Orbitron,Inter;font-size:12px;letter-spacing:.02em;
}
.timeline{margin-top:12px;display:grid;gap:8px}
.titem{
  display:flex;gap:10px;align-items:flex-start;
  border-left:2px solid rgba(0,255,255,.3);
  padding-left:10px;
}
.titem__at{font-size:11px;opacity:.7;min-width:140px}
.titem__txt{font-size:13px}
.titem__note{opacity:.8;margin-top:2px}

.pricing{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.pricebox{
  border:1px solid var(--stroke);
  background:rgba(10,12,40,.22);
  border-radius:18px;
  padding:14px;
}
.pricebox__k{font-family:Orbitron,Inter;letter-spacing:.02em;font-size:12px;opacity:.9}
.pricebox__v{font-size:22px;margin-top:6px}
.footer__grid{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:center;
}
.footer__right{display:grid;gap:10px;justify-items:end}

.dot{opacity:.5;margin:0 8px}

.dock{
  position:fixed;
  left:0;right:0;bottom:0;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  background:rgba(11,12,42,.82);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--stroke);
  display:none;
  z-index:40;
  gap:10px;
  justify-content:space-between;
}
.dock a{
  flex:1;
  text-align:center;
  text-decoration:none;
  color:var(--txt);
  font-size:12px;
  padding:10px 8px;
  border-radius:14px;
  border:1px solid rgba(234,242,255,.12);
  background:rgba(10,12,40,.18);
}
.dock a:hover{border-color:rgba(0,255,255,.45)}

/* Mobile layout (also used for desktop preview with .force-mobile) */
@media (max-width: 820px){
  .topnav{display:none}
  .cta{display:none}
  .nav__toggle{display:inline-flex;align-items:center;justify-content:center}
  .dock{display:flex}
  .wrap{width:min(1100px,94vw)}
  .grid2{grid-template-columns:1fr}
  .hero__cards{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr 1fr}
  .peeker{transform:translateY(calc(100% - 58px))}
  .peeker__links{display:none}
  body{padding-bottom:84px}
  .footer__grid{grid-template-columns:1fr}
  .footer__right{justify-items:start}
}

/* Desktop "Mobile View" button forces the same layout rules */
body.force-mobile .topnav{display:none}
body.force-mobile .cta{display:none}
body.force-mobile .nav__toggle{display:inline-flex}
body.force-mobile .dock{display:flex}
body.force-mobile .grid2{grid-template-columns:1fr}
body.force-mobile .hero__cards{grid-template-columns:1fr}
body.force-mobile .pricing{grid-template-columns:1fr 1fr}
body.force-mobile{padding-bottom:84px}

/* Nav overlay on small screens */
.nav-overlay{
  position:fixed;inset:0;z-index:60;
  background:rgba(11,12,42,.88);
  backdrop-filter:blur(10px);
  display:none;
}
.nav-overlay.open{display:block}
.nav-sheet{
  position:absolute;right:10px;left:10px;top:70px;
  border:1px solid var(--stroke);
  background:rgba(14,16,52,.92);
  border-radius:18px;
  padding:14px;
}
.nav-sheet a{
  display:block;
  padding:12px 10px;
  border-radius:14px;
  border:1px solid rgba(234,242,255,.12);
  background:rgba(10,12,40,.18);
  text-decoration:none;
  color:var(--txt);
  margin-top:10px;
  font-family:Orbitron,Inter;
  letter-spacing:.02em;
}
.nav-sheet a:hover{border-color:rgba(0,255,255,.45)}



/* ==========================================================
   Peeker v2 (2026-01-05)
   Goal:
   - "tip of the iceberg" idle state (~10% visible)
   - smooth slide to ~85% visible on hover/focus
   - gentle bob/jiggle while hidden (but never fighting hover)
   - bottom-right peeker stays fixed at the bottom (no scroll-follow weirdness)
========================================================== */

.peeker{
  /* Stop legacy mobile rule from yeeting the whole component */
  transform: none !important;

  position: fixed;
  top: 0;
  left: 18px;
  z-index: 999;
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  /* Tunables */
  --imgW: 220px;
  /* Kirby (top-left): hide a bit more so it's more "iceberg tip" than "whole iceberg" */
  --peek-hidden: -207px; /* ~6% visible (220 - 207 ≈ 13px) */
  --peek-reveal: -33px;  /* ~85% visible (220 - 33 ≈ 187px) */
  --bob: 16px;
  --links-shift: -10px;
}

.peeker__img{
  width: var(--imgW);
  display: block;
  will-change: transform;
  /* NOTE: no !important here, because it would block the bob animation */
  transform: translateY(var(--peek-hidden));
  transition: transform .42s cubic-bezier(.2,.9,.2,1);
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(255,20,147,.18));
}

/* Bobbing only while NOT hovered/focused */
@keyframes peekerBob{
  0%,100%{ transform: translateY(var(--peek-hidden)); }
  50%{ transform: translateY(calc(var(--peek-hidden) + var(--bob))); }
}
.peeker:not(:hover):not(:focus-within) .peeker__img{
  animation: peekerBob 1.12s ease-in-out infinite;
}

.peeker__links{
  opacity: 0;
  transform: translateY(var(--links-shift));
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;

  margin-top: -6px;
}

/* Hover/focus state */
.peeker:hover .peeker__img,
.peeker:focus-within .peeker__img{
  animation: none !important;
  transform: translateY(var(--peek-reveal));
}
.peeker:hover .peeker__links,
.peeker:focus-within .peeker__links{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Big hover hitbox (doesn't block link clicks due to z-index stacking) */
.peeker{ position: fixed; }
.peeker__hit{
  position: absolute;
  left: -12px;
  right: -12px;
  top: -12px;
  height: calc(var(--imgW) + 160px);
  z-index: 1;
  background: transparent;
  border: 0;
}
.peeker__img{ position: relative; z-index: 2; }
.peeker__links{ position: relative; z-index: 3; }

/* Bottom-right variant */
.peeker--right{
  left: auto !important;
  right: 18px !important;
  top: auto !important;
  bottom: calc(10px + env(safe-area-inset-bottom)) !important;

  align-items: flex-end;
  flex-direction: column-reverse;

  --peek-hidden: 198px; /* push down so only top sliver shows */
  --peek-reveal: -13px;  /* leave ~15% clipped */
  /* For bottom peeker, bob upward (negative Y) so it feels alive instead of sinking */
  --bob: -14px;
  --links-shift: 10px;
}

.peeker--right .peeker__hit{
  top: auto;
  bottom: -12px;
  height: calc(var(--imgW) + 180px);
}

/* Keep bottom-right peeker above the mobile dock */
@media (max-width: 820px){
  .peeker{
    width: 170px;
    --imgW: 170px;
    --peek-hidden: -160px; /* ~6% visible */
    --peek-reveal: -26px;  /* ~85% visible */
  }
  .peeker--right{
    right: 10px !important;
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    --peek-hidden: 160px;
    --peek-reveal: 26px;
  }
}

/* ==========================================================
   Background.png setup
   - Scales to viewport (cover)
   - Always visible while scrolling
   - Uses /assets/background.png (relative to this CSS file)
========================================================== */

html,body{min-height:100%}
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(1200px 800px at 70% 10%, rgba(138,43,226,.35), transparent 60%),
    radial-gradient(900px 700px at 20% 40%, rgba(0,255,255,.18), transparent 55%),
    url("background.png");
  background-size:auto,auto,cover;
  background-position:70% 10%,20% 40%,center;
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-attachment:fixed,fixed,fixed;
}

/* Keep the FX layer, but let the body own the actual photo background */
.bgfx__img{
  background-image:linear-gradient(180deg, rgba(11,12,42,.50), rgba(11,12,42,.78));
}
/* Left QuickNav overlay menu (Kirby) */
.peeker__hit{z-index:1;}
.peeker__img{position:relative;z-index:0;display:block;}
.peeker__menu{
  position:absolute;
  left:12px;
  right:12px;
  top:44px;
  z-index:3;
  opacity:0;
  transform:translateY(-10px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.peeker__menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.peeker__menu a{
  font-family:"VT323", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size:16px;
  line-height:1;
  letter-spacing:.5px;
  text-decoration:dotted;
  color:rgba(230,255,240,.95);
}
.peeker__menu a:hover{border-style:solid;border-color:rgba(0,255,255,.5);}
.peeker:hover .peeker__menu,.peeker:focus-within .peeker__menu{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* === CRT + Rainbow QC Pack (2026-01-07) =========================
   Goals:
   - Make background.png clearly visible
   - Add subtle CRT scanlines + vignette + RGB mask
   - Keep neon overlay (grid/sun/noise) translucent
   - Optional "taste the rainbow" toggle (press R)
=============================================================== */

.bgfx{ isolation:isolate; }

/* Ensure the photo layer reads like a CRT panel */
.bgfx__img{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(180deg, rgba(11,12,42,.22), rgba(11,12,42,.55)),
    url("background.png");
  background-size: cover;
  background-position: center;
  opacity: .94;
  filter: saturate(1.06) contrast(1.10) brightness(.92);
  transform: translateZ(0);
}

/* Scanlines + mild flicker */
.bgfx__img::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.22) 0px,
      rgba(0,0,0,.22) 1px,
      rgba(255,255,255,.04) 2px,
      rgba(0,0,0,0) 4px
    );
  opacity:.22;
  mix-blend-mode: overlay;
  pointer-events:none;
  animation: crtJitter 2.8s infinite steps(2,end);
}

/* Vignette + RGB mask + a whisper of blur */
.bgfx__img::after{
  content:"";
  position:absolute;
  inset:-6%;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,.06) 0%,
      rgba(0,0,0,.28) 55%,
      rgba(0,0,0,.70) 100%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,0,80,.05) 0px,
      rgba(255,0,80,.05) 1px,
      rgba(0,255,200,.04) 2px,
      rgba(0,255,200,.04) 3px,
      rgba(80,120,255,.05) 4px,
      rgba(80,120,255,.05) 5px
    );
  background-size: auto, 6px 100%;
  opacity:.18;
  mix-blend-mode: overlay;
  filter: blur(.25px);
  pointer-events:none;
}

/* Neon overlay should NOT drown the photo */
.bgfx .grid{ opacity:.26; mix-blend-mode: screen; }
.bgfx .sun{ opacity:.30; mix-blend-mode: screen; }
.bgfx .noise{ opacity:.10; }

/* Micro-flicker on the whole photo layer (tasteful, not seizure-y) */
@keyframes crtFlicker{
  0%,100%{ opacity:.94; }
  18%{ opacity:.90; }
  19%{ opacity:.96; }
  40%{ opacity:.93; }
  41%{ opacity:.90; }
  62%{ opacity:.95; }
  63%{ opacity:.92; }
}
.bgfx__img{ animation: crtFlicker 6.6s infinite; }

@keyframes crtJitter{
  0%{ transform: translate(0,0); }
  50%{ transform: translate(.6px,-.4px); }
  100%{ transform: translate(0,0); }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .bgfx__img, .bgfx__img::before{ animation: none !important; }
}

/* Taste the rainbow (optional) */
@keyframes hueSpin{ from{ filter:hue-rotate(0deg); } to{ filter:hue-rotate(360deg); } }
@font-face{
  font-family:"Yoster";
  src:url("yoster.ttf") format("truetype");
  font-display:swap;
}
/* Nav menu styling (4 external links) */
.topnav a{
  font-family:"Yoster", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace !important;
  font-size: 16px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  opacity: .95 !important;
}
.topnav a:hover{opacity:1 !important; text-decoration:none !important;}
:root[data-rainbow="1"] .sun{ animation: hueSpin 24s linear infinite; }
:root[data-rainbow="1"] .grid{ filter: hue-rotate(90deg); }

/* If you ever use the Kirby quick-nav menu text, match it too */
.peeker__menu a{
  font-family:"Yoster", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace !important;
}

    :root { color-scheme: dark; }
    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      font-family: "Yoster", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      background: #0b0f14;
      color: #e6edf3;
    }
    .wrap { padding: 24px; }
    #type {
      font-size: clamp(18px, 2.5vw, 34px);
      line-height: 1.2;
      letter-spacing: 0.02em;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .cursor {
      display: inline-block;
      width: 0.65ch;
      margin-left: 0.1ch;
      animation: blink 0.9s steps(1) infinite;
      opacity: 0.9;
    }
    @keyframes blink { 50% { opacity: 0; } }


/* ==========================================================
   Peeker typing overlay (reset + correct behavior)
   - Shows over Kirby BEFORE activation, pinned near Kirby bottom
   - Disappears AFTER peeker reveal animation completes
   - Moves peeker slightly down so it's "almost at the top"
========================================================== */

.peeker{
  top: 8px !important; /* almost at the top of the page */
}

/* overlay the typing text over the Kirby image */
.peeker .wrap[aria-label="typing text"]{
  position: absolute;
  left: 0;
  width: var(--imgW);
  /* place near the bottom of the Kirby image, and follow the same Y motion as Kirby */
  top: 0;
  transform: translateY(calc(var(--peek-hidden) + var(--imgW) - 34px));
  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  pointer-events: none;
  opacity: 1;
  transition: opacity .18s ease;
  text-shadow: 0 0 4px rgba(0,0,0,.85);
}

/* After peeker animates (0.42s), fade the text out */
.peeker:hover .wrap[aria-label="typing text"],
.peeker:focus-within .wrap[aria-label="typing text"]{
  opacity: 0;
  transition-delay: .42s; /* matches .peeker__img transition */
}