html.js .panel.panel--in {
  animation: panel-in .55s cubic-bezier(.2, 1.3, .4, 1) both;
}
@keyframes panel-in {
  from { opacity: 0; translate: calc(var(--dx, 1) * 46px) 12px; rotate: calc(var(--dx, 1) * 1.6deg); }
  to { opacity: 1; translate: 0 0; rotate: 0deg; }
}

.sfx {
  position: fixed;
  z-index: 9990;
  width: 120px;
  height: 120px;
  margin: -90px 0 0 -60px;
  pointer-events: none;
  display: grid;
  place-items: center;
  rotate: var(--r, 0deg);
  animation: sfx-pop .85s cubic-bezier(.2, 1.6, .4, 1) forwards;
}
.sfx__bg, .sfx__bg::after {
  position: absolute;
  inset: 0;
  clip-path: polygon(50.0% 0.0%,60.2% 18.6%,79.4% 9.5%,76.7% 30.6%,97.6% 34.5%,83.0% 50.0%,97.6% 65.5%,76.7% 69.4%,79.4% 90.5%,60.2% 81.4%,50.0% 100.0%,39.8% 81.4%,20.6% 90.5%,23.3% 69.4%,2.4% 65.5%,17.0% 50.0%,2.4% 34.5%,23.3% 30.6%,20.6% 9.5%,39.8% 18.6%);
}
.sfx__bg { background: #16120E; transform: scale(1.1); }
.sfx__bg::after { content: ""; background: #FFD23F; transform: scale(.9); }
.sfx__txt {
  position: relative;
  font: 400 1.55rem/1 "Bangers", "Comic Sans MS", Impact, sans-serif;
  letter-spacing: .04em;
  color: #FF3E80;
  -webkit-text-stroke: 1px #16120E;
  text-shadow: 2px 2px 0 #16120E;
  white-space: nowrap;
}
@keyframes sfx-pop {
  0% { opacity: 0; transform: scale(.2); }
  35% { opacity: 1; transform: scale(1.15); }
  60% { transform: scale(1); }
  100% { opacity: 0; transform: translateY(-26px) scale(.95); }
}

.panel2:not(.panel2--live), .nowcard, .project, .badge, .quote, .kgroup,
.reasons article, .crew__card, .songbox, .lvl, .cgroup .row {
  transition: transform .16s ease, box-shadow .16s ease;
}
@media (hover: hover) {
  .panel2:not(.panel2--live):hover,
  .nowcard:hover, .project:hover, .badge:hover, .quote:hover, .kgroup:hover,
  .reasons article:hover, .crew__card:hover, .lvl:hover {
    transform: translate(-3px, -3px) rotate(0deg) !important;
    box-shadow: 9px 9px 0 var(--ink) !important;
  }
  .tabs button:not(.is-active):hover {
    transform: translate(-2px, -3px);
    box-shadow: 6px 6px 0 var(--ink) !important;
  }
}
.tabs button { transition: transform .12s ease, box-shadow .12s ease; }
.tabs button:active, .pill:active {
  transform: translate(3px, 3px) !important;
  box-shadow: 0 0 0 var(--ink) !important;
}

.bugwalk { pointer-events: auto; cursor: pointer; }
.bugwalk::before { content: ""; position: absolute; inset: -16px; }
html.js .bugwalk.is-fleeing { animation: bug-flee 1.2s cubic-bezier(.5, 0, 1, .6) forwards !important; }
@keyframes bug-flee {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  15% { transform: translate(0, -10px) rotate(-8deg) scale(1.15); }
  100% { transform: translate(110px, -240px) rotate(28deg) scale(.35); opacity: 0; }
}

.intro { display: none; }
html.js:not(.no-intro) .intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: #FFD23F;
  background-image: radial-gradient(rgba(22, 18, 14, .16) 1.4px, transparent 1.7px);
  background-size: 14px 14px;
  animation: intro-out .28s cubic-bezier(.7, 0, .3, 1) .52s forwards;
}
.intro__box {
  position: relative;
  padding: .6rem 1.4rem .8rem;
  background: #fff;
  border: 5px solid #16120E;
  box-shadow: 8px 8px 0 #FF6B9A;
  font: 400 clamp(2rem, 8vw, 3.6rem)/1 "Bangers", "Comic Sans MS", Impact, sans-serif;
  letter-spacing: .04em;
  color: #16120E;
  animation: intro-in .6s cubic-bezier(.2, 1.6, .4, 1) .1s both;
}
.intro__bug {
  position: absolute;
  left: 0;
  bottom: -46px;
  width: 56px;
  animation: intro-walk .72s ease-in-out .03s both;
}
.intro__bug svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes intro-in { from { opacity: 0; transform: scale(.4) rotate(-6deg); } to { opacity: 1; transform: scale(1) rotate(-1.5deg); } }
@keyframes intro-walk { from { transform: translateX(-20px); } to { transform: translateX(calc(min(86vw, 640px) - 40px)); } }
@keyframes intro-out { to { transform: translateY(-105%); visibility: hidden; } }

.tabs button { position: relative; display: inline-flex; align-items: center; gap: .4em; }
.tabs button svg { width: 1.15em; height: 1.15em; flex: none; }
.tabs button.is-active::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -6px;
  width: 24px;
  height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 31'%3E%3Cg fill='none' stroke='%2316120E' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 22L8 29M19 23L18 30M26 22L30 29M34 14L40 7M36 17L43 13'/%3E%3C/g%3E%3Ccircle cx='35' cy='19' r='6' fill='%2316120E'/%3E%3Cpath d='M5 23C5 6 31 6 31 23Z' fill='%23FF6B9A' stroke='%2316120E' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M18 9.5V22' stroke='%2316120E' stroke-width='2.4'/%3E%3Ccircle cx='11.5' cy='16.5' r='2.3' fill='%2316120E'/%3E%3Ccircle cx='24.5' cy='16.5' r='2.3' fill='%2316120E'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.js .tabs button.is-active::after { animation: tab-bug .6s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes tab-bug { from { transform: translateY(8px) scale(.2) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }

.zigzag {
  position: relative;
  margin-top: 2.6rem;
  padding-top: 3.4rem !important;
  background:
    linear-gradient(135deg, #16120E 25%, transparent 25%) -8px 0 / 16px 16px repeat-x,
    linear-gradient(225deg, #16120E 25%, transparent 25%) -8px 0 / 16px 16px repeat-x;
}
.zigzag::before {
  content: attr(data-label);
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  padding: .15rem 1.1rem .2rem;
  background: #16120E;
  color: #FFD23F;
  font: 400 1.15rem/1.2 var(--display);
  letter-spacing: .12em;
  white-space: nowrap;
  box-shadow: 3px 3px 0 #FF6B9A;
  z-index: 1;
}
.sec.zigzag { margin-top: 3rem; }

.bar__inner { position: relative; }
.theme-toggle {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  translate: 0 -50%;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  background: #fff;
  color: #16120E;
  border: 3px solid #16120E;
  border-radius: 50%;
  box-shadow: 3px 3px 0 #16120E;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.theme-toggle:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #16120E; }
.theme-toggle:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #16120E; }
.theme-toggle svg { width: 22px; height: 22px; grid-area: 1 / 1; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1), opacity .2s; }
.theme-toggle .i-sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
@media (max-width: 640px) { .theme-toggle { right: 1.1rem; top: 1.45rem; } }

.spark {
  position: fixed;
  z-index: 9980;
  width: var(--s, 10px);
  height: var(--s, 10px);
  margin: calc(var(--s, 10px) / -2) 0 0 calc(var(--s, 10px) / -2);
  pointer-events: none;
  background: var(--c, #FFD23F);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: spark-fade .7s ease-out forwards;
}
@keyframes spark-fade {
  to { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 18px)) rotate(120deg) scale(.2); }
}

.rainbug {
  position: fixed;
  top: -60px;
  z-index: 9985;
  width: var(--w, 30px);
  pointer-events: none;
  animation: bug-rain var(--t, 3.5s) linear var(--d, 0s) forwards;
}
.rainbug svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes bug-rain {
  from { transform: translateY(0) rotate(var(--r0, 0deg)); }
  to { transform: translateY(calc(100vh + 120px)) rotate(var(--r1, 360deg)); }
}

.lost__bug { width: 74px; margin: 0 auto 1rem; animation: lost-wander 5s ease-in-out infinite; }
.lost__bug svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes lost-wander {
  0% { transform: translateX(-70px) rotate(-6deg); }
  25% { transform: translateX(-20px) rotate(10deg); }
  50% { transform: translateX(70px) scaleX(-1) rotate(-6deg); }
  75% { transform: translateX(20px) scaleX(-1) rotate(10deg); }
  100% { transform: translateX(-70px) rotate(-6deg); }
}
.lost__q { display: inline-block; font-family: var(--display); color: #FF3E80; animation: lost-q 1.4s ease-in-out infinite alternate; }
@keyframes lost-q { to { transform: translateY(-6px) rotate(8deg); } }

:where(.tabs button, .theme-toggle, .pill, a, .songs__row, .shot__btn, .bugwalk):focus-visible {
  outline: 3px solid #FF6B9A !important; outline-offset: 4px;
  box-shadow: 4px 4px 0 #16120E;
}
.songs__row { display:flex; align-items:center; gap:.75rem; width:100%; text-align:left; }
.song__cover { width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); color:var(--ink); font:400 1.15rem/1 var(--display); }
.song__cover svg { width:22px; height:22px; }
.shots--strip { display:flex; overflow-x:auto; gap:.75rem; padding:.25rem .25rem .75rem; scroll-snap-type:x mandatory; max-width:100%; }
.shots--strip .shot { flex:0 0 min(43%, 150px); scroll-snap-align:start; }
.shot--soon { min-height:100px; display:grid; place-items:center; padding:.75rem; border:3px dashed var(--ink); background:#FFF1CC; color:var(--ink); font-family:var(--display); text-align:center; box-shadow:3px 3px 0 var(--pink); }
.lightbox { max-width:min(94vw, 900px); max-height:92dvh; border:4px solid var(--ink); padding:1rem; background:#FFF1CC; color:var(--ink); box-shadow:8px 8px 0 var(--pink); }
.lightbox::backdrop { background:rgba(12,10,22,.82); }
.lightbox__fig { margin:0; display:grid; gap:.5rem; justify-items:center; }
.lightbox__img { max-width:82vw; max-height:75dvh; width:auto; height:auto; object-fit:contain; }
.lightbox__close,.lightbox__nav { border:3px solid var(--ink); background:var(--yellow); color:var(--ink); font-weight:700; padding:.35rem .65rem; box-shadow:3px 3px 0 var(--ink); cursor:pointer; }
.lightbox__close { position:absolute; top:.35rem; right:.35rem; font-size:1.4rem; }
.lightbox__controls { display:flex; justify-content:center; gap:.75rem; margin-top:.75rem; }
html.js [data-scroll-fill] { transition:width 1s cubic-bezier(.2,.8,.2,1); }
html.js [data-scroll-fill].is-animated { width:var(--target-width, 0%) !important; }
html.js .badge[data-stagger] { opacity:0; transform:translateY(12px) rotate(-1deg); }
html.js .badge[data-stagger].is-staggered { opacity:1; transform:none; transition:opacity .35s ease, transform .35s cubic-bezier(.2,1.3,.4,1); transition-delay:var(--stagger,0ms); }
@media (prefers-reduced-motion: reduce) { .lost__bug,.lost__q { animation:none !important; } }
@media (max-width:480px) { .shots--strip .shot { flex-basis:112px; } .lightbox { padding:.65rem; } }

:root { --lab-yellow:#FFD23F; --lab-pink:#FF6B9A; --lab-blue:#4DA3FF; --lab-paper:#FFF9E9; --lab-ink:#16120E; }

.reading-progress {
  position: fixed;
  z-index: 10001;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--lab-pink), var(--lab-yellow), var(--lab-blue));
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  will-change: transform;
}
.back-to-top {
  position: fixed;
  z-index: 9990;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--lab-yellow);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) rotate(-8deg);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease, box-shadow .18s ease;
}
.back-to-top svg { width: 22px; height: 22px; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) rotate(0); }
.back-to-top:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.back-to-top:focus-visible { outline: 3px solid var(--lab-pink); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .back-to-top { transition: none; } }

@media (max-width: 640px) {
  main p, main li, main dd { line-height: 1.42; }
  .project { padding: 1rem !important; gap: .7rem !important; }
  .project h3 { font-size: 1.5rem !important; line-height: 1.1; }
  .project__desc { line-height: 1.42 !important; font-size: .98rem; }
  .project__desc + .project__desc, .project__end { margin-top: .5rem; }
  .project__meta { margin: .25rem 0 .5rem; }
  .shots__label { margin: .6rem 0 .3rem; font-size: .85rem; }
  .shots, .shots--strip { gap: .6rem; padding: .2rem .2rem .5rem; margin-bottom: .5rem; align-items: flex-start; }
  .shot__img, .shots--strip .shot__img { height: 130px !important; width: auto; border-radius: 10px; }
  .shots--strip .shot { flex: 0 0 auto; gap: .3rem; }
  .shots--strip .shot--soon { width: 100px; height: 130px; min-height: 0; padding: .4rem; font-size: .8rem; line-height: 1.15; }
  .shot__cap { font-size: .72rem; line-height: 1.2; max-width: 100px; text-align: center; }
  .stats { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: .4rem .7rem !important; margin: .6rem 0 !important; }
  .stats > * > :first-child, .nowcard__num { font-size: 1.7rem !important; -webkit-text-stroke-width: 3px; text-shadow: 2px 2px 0 var(--ink); line-height: 1.05; }
  .stats li span, .stats span { font-size: .8rem; line-height: 1.2; }
  .chips { gap: .4rem; }
  .chips li { padding: .15rem .6rem; font-size: .82rem; }
  .project__more details, .project__more summary { padding-top: .4rem; padding-bottom: .4rem; }
  .sec__lead { line-height: 1.4; }
}