@font-face{
  font-family: "Saira"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("Fonts/saira.woff2") format("woff2");
}
@font-face{ font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("Fonts/barlow-400.woff2") format("woff2"); }
@font-face{ font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("Fonts/barlow-600.woff2") format("woff2"); }
@font-face{ font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("Fonts/barlow-700.woff2") format("woff2"); }
@font-face{ font-family: "Barlow"; font-style: normal; font-weight: 800; font-display: swap; src: url("Fonts/barlow-800.woff2") format("woff2"); }
@font-face{
  font-family: "Bricolage Loader"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("Fonts/bricolage-loader.woff2") format("woff2");
}
@font-face{
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("Fonts/jetbrains-mono.woff2") format("woff2");
}

*,
*::before,
*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
img{ max-width: 100%; }
[hidden]{ display: none !important; }
.boot-away #page-portfolio{ display: none; }
.booting body > :not(#loader){ visibility: hidden; animation: boot-show 0s 4s forwards; }
@keyframes boot-show{ to{ visibility: visible; } }
.sr-only{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

:root{
  color-scheme: light;

  --paper:   #F5F3EE;
  --shell:   #EBE7DD;
  --tint:    #E4EDE9;
  --tint-2:  #EDE8F2;
  --card:    #FCFBF8;

  --ink:       #13111A;
  --ink-soft:  #4D4860;
  --ink-faint: #615C72;
  --hair:      rgba(19,17,26,.14);
  --hair-soft: rgba(19,17,26,.07);

  --pink:   #E0206A;
  --blue:   #2B4BFF;
  --yellow: #E09200;
  --mint:   #00967F;
  --pink-ink: #B31D58;
  --mint-ink: #057365;

  --on-accent: #FFFFFF;
  --invert-bg: #13111A;
  --invert-fg: #F5F3EE;

  --grain: rgba(19,17,26,.045);
  --ring: var(--blue);
  --veil: rgba(19,17,26,.5);

  --r: 14px;
  --r-lg: 20px;
  --bar: 66px;
  --ease: cubic-bezier(.22,1,.36,1);
  --floor: clamp(64px, 9vh, 104px);

  --circle: polygon(50% 0%,62.9% 1.7%,75% 6.7%,85.4% 14.6%,93.3% 25%,98.3% 37.1%,100% 50%,98.3% 62.9%,93.3% 75%,85.4% 85.4%,75% 93.3%,62.9% 98.3%,50% 100%,37.1% 98.3%,25% 93.3%,14.6% 85.4%,6.7% 75%,1.7% 62.9%,0% 50%,1.7% 37.1%,6.7% 25%,14.6% 14.6%,25% 6.7%,37.1% 1.7%);
  --square: polygon(50% 10%,60.7% 10%,73.1% 10%,90% 10%,90% 26.9%,90% 39.3%,90% 50%,90% 60.7%,90% 73.1%,90% 90%,73.1% 90%,60.7% 90%,50% 90%,39.3% 90%,26.9% 90%,10% 90%,10% 73.1%,10% 60.7%,10% 50%,10% 39.3%,10% 26.9%,10% 10%,26.9% 10%,39.3% 10%);
  --triangle: polygon(50% 3%,59.9% 20.1%,65.6% 30%,69.8% 37.2%,73.4% 43.5%,77% 49.8%,81.2% 57%,86.9% 66.9%,96.8% 84%,77% 84%,65.6% 84%,57.2% 84%,50% 84%,42.8% 84%,34.4% 84%,23% 84%,3.2% 84%,13.1% 66.9%,18.8% 57%,23% 49.8%,26.6% 43.5%,30.2% 37.2%,34.4% 30%,40.1% 20.1%);
  --hexagon: polygon(50% 0%,61.6% 6.7%,71.7% 12.5%,81.7% 18.3%,93.3% 25%,93.3% 38.4%,93.3% 50%,93.3% 61.6%,93.3% 75%,81.7% 81.7%,71.7% 87.5%,61.6% 93.3%,50% 100%,38.4% 93.3%,28.3% 87.5%,18.3% 81.7%,6.7% 75%,6.7% 61.6%,6.7% 50%,6.7% 38.4%,6.7% 25%,18.3% 18.3%,28.3% 12.5%,38.4% 6.7%);
  --diamond: polygon(50% 0%,60.6% 10.6%,68.3% 18.3%,75% 25%,81.7% 31.7%,89.4% 39.4%,100% 50%,89.4% 60.6%,81.7% 68.3%,75% 75%,68.3% 81.7%,60.6% 89.4%,50% 100%,39.4% 89.4%,31.7% 81.7%,25% 75%,18.3% 68.3%,10.6% 60.6%,0% 50%,10.6% 39.4%,18.3% 31.7%,25% 25%,31.7% 18.3%,39.4% 10.6%);
  --pentagon: polygon(50% 2.5%,60.7% 10.2%,69.3% 16.5%,77.5% 22.5%,86.4% 29%,97.6% 37%,93.3% 50%,89.9% 60.7%,86.5% 71.1%,82.7% 82.7%,79.4% 93%,61.5% 93%,50% 93%,38.5% 93%,20.6% 93%,17.3% 82.7%,13.5% 71.1%,10.1% 60.7%,6.7% 50%,2.4% 37%,13.6% 29%,22.5% 22.5%,30.7% 16.5%,39.3% 10.2%);
  --star: polygon(50% 2.5%,57% 24%,59.9% 32.9%,61.2% 37%,72.4% 37%,97.6% 37%,79.7% 50%,71.7% 55.8%,68.2% 58.4%,72.9% 72.9%,79.4% 93%,57.2% 76.8%,50% 71.6%,42.8% 76.8%,20.6% 93%,27.1% 72.9%,31.8% 58.4%,28.3% 55.8%,20.3% 50%,2.4% 37%,27.6% 37%,38.8% 37%,40.1% 32.9%,43% 24%);

  --display: "Saira", system-ui, sans-serif;
  --body: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --gut: clamp(20px, 5vw, 56px);
  --v:   clamp(34px, 4.6vw, 62px);
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, .97rem + .16vw, 1.08rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before{
  content:""; position: fixed; inset: -10px;
  pointer-events: none; z-index: 60;
  background-image: radial-gradient(var(--grain) 1px, transparent 1.15px);
  background-size: 4px 4px;
}

h1,h2,h3,h4{
  font-family: var(--display);
  font-weight: 800; line-height: 1.02; letter-spacing: -.03em;
  text-wrap: balance; margin: 0;
}
p{ margin: 0; }
a{ color: inherit; }
button{ font: inherit; color: inherit; }
:focus-visible{ outline: 2px solid var(--ring); outline-offset: 4px; border-radius: 4px; }

.shell{ width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gut); }
.mono{ font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(.79rem,.77rem + .1vw,.85rem); letter-spacing: .02em; }
.prose{ color: var(--ink-soft); max-width: 60ch; }
.lead{ font-size: clamp(1.15rem,1.05rem + .5vw,1.4rem); color: var(--ink-soft); max-width: 48ch; line-height: 1.5; }

.label{
  font-family: "JetBrains Mono", monospace; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
  display: inline-flex; align-items: center; gap: .6em;
}
.label b{ color: color-mix(in srgb, var(--accent, var(--pink)) 74%, var(--ink)); font-weight: 500; }

.page{ display: flex; flex-direction: column; }
.page > .block{ padding-block: var(--v); }
.page > .block:first-child{ padding-top: clamp(18px, 3vw, 40px); }
.page > .block:last-child{ padding-bottom: calc(var(--v) * 1.2); }
.tinted{ background: var(--tint); border-block: 1px solid var(--hair-soft); padding-block: calc(var(--v) * 1.5); }
.tinted-2{ background: var(--tint-2); border-block: 1px solid var(--hair-soft); padding-block: calc(var(--v) * 1.5); }
.sec{ padding: 0; }
.sec + .sec{ margin-top: calc(var(--v) * 1.7); }

.sec-head{
  display: grid; grid-template-columns: 1fr auto; gap: 20px 40px; align-items: end;
  padding-bottom: 24px; margin-bottom: 42px; border-bottom: 1px solid var(--hair);
}
.sec-head h2{ font-size: clamp(2rem, 1.5rem + 2.4vw, 3.3rem); margin-top: 14px; }
.subhead{ display: flex; align-items: baseline; gap: 16px; margin-block: 0 26px; }
.subhead h3{ font-size: clamp(1.15rem,1.05rem + .5vw,1.4rem); white-space: nowrap; }
.subhead .label{ white-space: nowrap; }
.subhead::after{ content:""; flex: 1; height: 1px; background: var(--hair); align-self: center; }

#progress{
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0;
  height: 2px; width: 100%; z-index: 56; background: var(--pink);
  transform: scaleX(0); transform-origin: 0 50%;
}
.topbar{
  position: sticky; top: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--shell) 92%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}
.topbar-in{ position: relative; display: flex; align-items: center; gap: 14px; min-height: var(--bar); }
.brand{
  display: inline-flex; align-items: center; gap: 11px;
  margin-right: auto; font-family: "JetBrains Mono", monospace;
  font-weight: 700; font-size: .86rem; padding: 10px 0; text-align: left;
  border: 0; background: none; cursor: pointer;
}
.brand-icon{ position: relative; width: 34px; height: 34px; flex: none; }
.brand-icon > *{ position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; transition: transform .25s cubic-bezier(.22,1,.36,1); }
.brand-icon > .on{ visibility: visible; }
.brand:hover .brand-icon > *{ transform: rotate(-8deg) scale(1.08); }
.brand-icon > .brand-dot{ inset: 7px; width: auto; height: auto; }
.morph{ display: inline-block; border-radius: 50%; background: var(--pink); }
@media (prefers-reduced-motion: no-preference){
  .morph{ border-radius: 0; clip-path: var(--circle); transition: clip-path .6s ease-in-out, background-color .6s ease-in-out; }
  .morph[data-s="1"]{ clip-path: var(--square);   background-color: var(--blue); }
  .morph[data-s="2"]{ clip-path: var(--triangle); background-color: var(--yellow); }
  .morph[data-s="3"]{ clip-path: var(--hexagon);  background-color: var(--mint); }
  .morph[data-s="4"]{ clip-path: var(--diamond);  background-color: var(--pink); }
  .morph[data-s="5"]{ clip-path: var(--pentagon); background-color: var(--blue); }
  .morph[data-s="6"]{ clip-path: var(--star);     background-color: var(--yellow); }
}
.brand-text{ white-space: nowrap; line-height: 1.25; }
.brand-text .hl-name{ display: inline-block; }
@media (prefers-reduced-motion: no-preference){
  .lifted .topbar .hl-name::before{ animation: hl-draw .7s .5s cubic-bezier(.65,0,.35,1) backwards; }
}
@keyframes hl-draw{ from{ clip-path: var(--hl-off); } }
.brand-is{ color: var(--ink-faint); }
.brand-mask{ display: inline-block; overflow: hidden; vertical-align: bottom; padding-block: .1em; margin-block: -.1em; }
#brand-word{ display: inline-block; color: var(--pink-ink); text-transform: uppercase; }
@media (max-width: 1199px){
  .brand-is{ display: block; font-size: .7rem; }
}

.spidey-bubble{
  position: absolute; left: calc(var(--gut) + 4px); top: calc(100% - 6px);
  padding: 9px 15px; border-radius: 14px;
  background: #fff; color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font: 800 1.05rem/1 var(--display); white-space: nowrap;
  transform-origin: 14px -8px; visibility: hidden; pointer-events: none;
}
.spidey-bubble::before{
  content:""; position: absolute; left: 10px; top: -8px; width: 12px; height: 12px;
  background: #fff; border-left: 2px solid var(--ink); border-top: 2px solid var(--ink); transform: rotate(45deg);
}
.spidey-stage{ position: fixed; left: 0; top: 0; z-index: 120; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; }
.spidey-confetti{ position: fixed; z-index: 80; width: 0; height: 0; pointer-events: none; }
.spidey-confetti i{ position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; }
.spidey-confetti svg{ display: block; width: 100%; height: 100%; fill: currentColor; stroke: currentColor; }

[data-route="portfolio"]{ --c: var(--pink); }
[data-route="about"]{ --c: var(--blue); }
[data-route="projects"]{ --c: var(--yellow); }
[data-route="play"]{ --c: var(--mint); }
[data-route="contact"]{ --c: var(--pink); }
.hl{ position: relative; isolation: isolate; }
.hl::before{
  content: ""; position: absolute; z-index: -1; inset: var(--hl-inset, 24% 5px 16%);
  background: color-mix(in srgb, var(--c, var(--pink)) 30%, transparent);
  --hl-on: polygon(3% 10%, 99% 0%, 100% 86%, 1% 100%);
  --hl-off: polygon(3% 10%, 3% 10%, 1% 100%, 1% 100%);
  clip-path: var(--hl-off); rotate: -1.5deg;
  transition: clip-path .4s cubic-bezier(.65,0,.35,1);
}
a.hl:is(:hover, :focus-visible, [aria-current="page"])::before,
a:is(:hover, :focus-visible, [aria-current="page"]) > .hl::before{ clip-path: var(--hl-on); }
a.hl[aria-current="page"]::before, a[aria-current="page"] > .hl::before{ background: color-mix(in srgb, var(--c) 42%, transparent); }
.hl-name{ --c: var(--mint); }
.hl-name::before{ clip-path: var(--hl-on); --hl-inset: 2% -6px -4%; }

.nav-links{ display: flex; align-items: center; gap: 4px; }
:is(.nav-links, .foot-links) a{ padding: 8px 12px; color: var(--ink-faint); font-weight: 600; font-size: .9rem; text-decoration: none; transition: color .2s; }
:is(.nav-links, .foot-links) a:is(:hover, [aria-current="page"]){ color: var(--ink); }

.ghost{
  height: 38px; min-width: 38px; padding-inline: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 999px; border: 1px solid var(--hair); background: var(--card); cursor: pointer;
  font-family: "JetBrains Mono", monospace; font-size: .74rem; font-weight: 500; color: var(--ink); text-decoration: none;
  transition: border-color .2s, background .2s;
}
.ghost:hover{ border-color: var(--ink); }
.burger{ display: none; font-size: 1rem; }

.skip{
  position: fixed; z-index: 90; left: 12px; top: 12px; padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-weight: 600; font-size: .9rem; text-decoration: none;
  translate: 0 -160%; transition: translate .2s var(--ease);
}
.skip:focus-visible{ translate: none; }
#main:focus{ outline: none; }

#scrim{ position: fixed; inset: 0; z-index: 61; background: var(--veil); opacity: 0; pointer-events: none; transition: opacity .3s; }
#scrim.open{ opacity: 1; pointer-events: auto; }
#drawer{
  position: fixed; z-index: 62; top: 0; right: 0; bottom: 0; width: min(88vw, 360px);
  background: var(--shell); border-left: 1px solid var(--hair);
  padding: calc(22px + env(safe-area-inset-top, 0px)) calc(26px + env(safe-area-inset-right, 0px)) calc(26px + env(safe-area-inset-bottom, 0px)) 26px;
  transform: translateX(102%); transition: transform .42s var(--ease);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
}
#drawer.open{ transform: none; }
#drawer a[data-route]{
  text-decoration: none; padding: 16px 0;
  border-bottom: 1px solid var(--hair-soft);
  display: grid; grid-template-columns: 2.6em 1fr; align-items: baseline; gap: 6px;
  color: var(--ink-faint); transition: color .2s;
}
#drawer a[data-route] span{
  justify-self: start;
  --hl-inset: 30% -6px 6%;
  font-family: var(--display); font-weight: 800;
  font-size: 1.7rem; letter-spacing: -.03em; line-height: 1.1;
  transition: transform .28s var(--ease);
}
#drawer a[data-route] i{
  font-style: normal; font-family: "JetBrains Mono", monospace;
  font-size: .68rem; color: var(--ink-faint); letter-spacing: .08em;
}
#drawer a[data-route]:hover{ color: var(--ink); }
#drawer a[data-route]:hover span{ transform: translateX(6px); }
#drawer a[aria-current="page"]{ color: var(--ink); }
#drawer a[aria-current="page"] i{ color: var(--pink-ink); }
.drawer-top{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.drawer-foot{ margin-top: auto; padding-top: 24px; display: grid; gap: 8px; }
.drawer-foot a{ justify-self: start; text-decoration: none; font-family: "JetBrains Mono", monospace; font-size: .8rem; color: var(--ink-soft); }
.drawer-foot a:hover{ color: var(--pink-ink); }

.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font-weight: 600; font-size: .94rem; text-decoration: none; cursor: pointer; min-height: 48px;
  transition: transform .28s cubic-bezier(.22,1,.36,1), background .24s, color .24s, border-color .24s;
}
.btn:hover{ transform: translateY(-2px); }
.btn-line{ background: var(--card); color: var(--ink); border-color: var(--hair); }
.btn-line:hover{ border-color: var(--ink); }
.btn-accent{ background: var(--pink); border-color: var(--pink); color: var(--on-accent); }
.btn-sm{ padding: 10px 18px; font-size: .84rem; min-height: 40px; }

.arrow-link{
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-weight: 600; font-size: .92rem; color: var(--ink);
  padding-block: 10px; margin-block: -10px;
}
.arrow-link span:last-child{ transition: transform .3s cubic-bezier(.22,1,.36,1); }
.arrow-link:hover span:last-child{ transform: translateX(5px); }
.arrow-link::before{
  content:""; width: 26px; height: 1px; background: var(--accent, var(--pink));
  transition: width .3s cubic-bezier(.22,1,.36,1);
}
.arrow-link:hover::before{ width: 38px; }

.ly{
  position: relative; isolation: isolate; overflow: clip;
  min-height: calc(100svh - 66px);
}
.ly-copy{
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-height: calc(100svh - 66px);
  padding-block: clamp(28px, 5vh, 60px) calc(clamp(20px, 3vh, 40px) + var(--floor));
}
.ly-copy, .ly-copy *{ pointer-events: none; }
.ly-copy :is(a, button){ pointer-events: auto; }
.ly-name{ font-size: clamp(3.4rem, min(10.5vw, 17vh), 10.5rem); line-height: .9; user-select: none; }
.ly-name .nm-w{ display: block; width: fit-content; }
.ly-stop{ display: inline-block; width: .2em; height: 0; }
.ly-w{ display: inline-block; }
.ly-ul{
  background: linear-gradient(var(--pink), var(--pink)) no-repeat;
  background-size: 0% .07em; background-position: 0 calc(100% - .11em);
}
.ly-ul.is-drawn{ animation: ly-ul 2.3s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes ly-ul{
  0%  { background-size: 0% .07em; background-position-x: 0; }
  30% { background-size: 100% .07em; background-position-x: 0; }
  68% { background-size: 100% .07em; background-position-x: 100%; }
  100%{ background-size: 0% .07em; background-position-x: 100%; }
}
.ly-cta{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3.6vh, 36px); }
.ly-copy .socials{ margin-top: 16px; }
.ly-hint{
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: clamp(22px, 3.4vh, 34px);
  font-family: "JetBrains Mono", monospace; font-size: .72rem; color: var(--ink-faint);
}
.ly-hint .morph{ width: 12px; height: 12px; flex: none; }
.ly-bops b{ font-weight: 500; color: var(--pink-ink); font-variant-numeric: tabular-nums; }
.ly-bops::before{ content: "·"; margin-right: 10px; }

.ly-floor{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; width: 100%; height: var(--floor); pointer-events: none; }
:is(.ly-floor, .foot-wave) path{ fill: var(--shell); stroke: var(--hair); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ly + .showcase{ background: var(--shell); margin-top: -1px; }

.ly-field{ position: absolute; inset: 0; z-index: 0; pointer-events: none; --d: 28px; }
.ly-ball{ position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); will-change: transform; }
.ly-ball b{
  display: block; width: 100%; height: 100%;
  background: var(--c, var(--pink)); clip-path: var(--shape);
  transition: clip-path .3s var(--ease), background-color .3s;
}
.ly-bit{ position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; opacity: 0; }
.ly-confetti{ position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ly-confetti i{ position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin: -8px; background: var(--c); clip-path: var(--shape); }

.ly-rig{ position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ly-strap{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ly-band{ fill: none; stroke: var(--pink); stroke-width: 26; }
.ly-print{ fill: var(--card); font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; }

.ly-badge{
  --w: clamp(244px, 19.5vw, 290px);
  position: absolute; left: 0; top: 0; width: var(--w); aspect-ratio: .68;
  pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  perspective: 1100px;
  container-type: inline-size;
  will-change: transform;
}
.ly-badge.is-held{ cursor: grabbing; }
.ly-badge::before{
  content: ""; position: absolute; left: 50%; top: -30px; width: 34px; height: 40px; margin-left: -17px; z-index: -1;
  border-radius: 9px 9px 6px 6px; background: linear-gradient(90deg, #8E8A99, #D9D6DE 45%, #8E8A99);
}
.ly-flip{ position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.ly-badge.is-flipped .ly-flip{ transform: rotateY(180deg); }
.ly-face{
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; padding: 14px 16px 20px; border-radius: 18px; overflow: hidden;
  background: var(--card);
  box-shadow: 0 30px 50px -30px rgba(19,17,26,.55);
}
.ly-back{
  transform: rotateY(180deg); color: var(--paper);
  background: radial-gradient(rgba(19,17,26,.16) 1px, transparent 1.15px) 0 0 / 4px 4px, #B11313;
  border: 5px solid #0047AB;
  padding: 10px 12px 16px;
}
.ly-head{ display: flex; align-items: center; justify-content: space-between; }
.ly-slot{ width: 46px; height: 9px; border-radius: 9px; background: var(--paper); box-shadow: inset 0 1px 2px rgba(19,17,26,.25); }
.ly-pass{ font-family: "JetBrains Mono", monospace; font-size: min(.58rem, 3.6cqi); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--card); background: var(--pink); padding: 3px 8px; border-radius: 999px; }
.ly-photo{ display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 1; margin-top: 12px; border-radius: 12px; object-fit: cover; object-position: 50% 22%; background: var(--shell); pointer-events: none; }
.ly-who{ margin-top: 12px; font-family: var(--display); font-weight: 800; font-size: 1.55em; line-height: 1; letter-spacing: -.03em; }
.ly-role{ margin-top: 6px; font-family: "JetBrains Mono", monospace; font-size: .62rem; color: var(--ink-soft); }
.ly-foot{ margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.ly-face .status{ gap: .6em; padding: .45em .8em; font-size: min(.55rem, 3.4cqi); letter-spacing: .04em; white-space: nowrap; }
.ly-face .dot{ width: .8em; height: .8em; }
.ly-bars{ width: 74px; min-width: 0; height: auto; aspect-ratio: 74 / 24; color: var(--ink); }
.ly-back .ly-pass{ background: var(--ink); color: var(--paper); }
.ly-stats{ list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.ly-stats b{ display: block; font-family: var(--display); font-weight: 800; font-size: 2.5em; line-height: .9; letter-spacing: -.04em; }
.ly-stats span{ display: block; margin-top: 6px; font-size: .68rem; line-height: 1.3; color: rgba(245,243,238,.9); }
.ly-spider{ flex: 1 1 0; min-height: 0; width: 100%; object-fit: contain; margin-block: 14px 10px; pointer-events: none; }
.ly-note{ margin-top: auto; font-family: "JetBrains Mono", monospace; font-size: .58rem; color: rgba(245,243,238,.85); }
@container (max-width: 262px){
  .ly-photo{ aspect-ratio: 4 / 3.3; }
  .ly-stats{ gap: 12px 10px; }
  .ly-stats b{ font-size: 2.1em; }
  .ly-stats span{ margin-top: 4px; font-size: .64rem; line-height: 1.25; }
  .ly-spider{ margin-block: 10px 8px; }
}
.ly-turn{ position: absolute; right: -6px; bottom: -14px; z-index: 2; height: 30px; padding-inline: 11px; font-size: .64rem; transform: translateZ(1px); }
.ly:not(.is-rigged) .ly-strap{ display: none; }
.ly:not(.is-rigged) .ly-badge{ left: auto; right: max(var(--gut), calc((100% - 1280px) / 2 + var(--gut))); top: 14%; rotate: 2deg; }

.nm, .a5-role{
  background: linear-gradient(var(--pink), var(--pink)) no-repeat;
  background-size: 0% .07em; background-position-y: calc(100% - .11em);
}
.nm-w{ display: inline-block; white-space: nowrap; }
.nm-w > span{ display: inline-block; }
.is-away, .is-away *:not(.ly-ul){ animation: none !important; }
@media (prefers-reduced-motion: no-preference){
  :is(.stamp, .hop).is-idle .nm-w > span{ animation: nm-hop 6s ease-in-out calc(var(--i) * 60ms + .1s) infinite; }
  .stamp.is-idle .nm, .is-in > .a5-role{ animation: nm-line 6s cubic-bezier(.65,0,.35,1) .1s infinite; }
}
@keyframes nm-hop{
  0%, 10%, 100%{ translate: 0 0; }
  3.5%         { translate: 0 -16%; }
  7%           { translate: 0 0; }
  8.5%         { translate: 0 -4%; }
}
@keyframes nm-line{
  0%, 22%  { background-size: 0% .07em; background-position-x: 0; }
  40%      { background-size: 100% .07em; background-position-x: 0; }
  62%      { background-size: 100% .07em; background-position-x: 100%; }
  76%, 100%{ background-size: 0% .07em; background-position-x: 100%; }
}
.hero-sub{
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.2rem); line-height: 1.16; letter-spacing: -.02em;
  color: var(--ink-soft); margin-top: 22px;
  max-width: min(26ch, calc(72vw - clamp(122px, 9.75vw, 145px) - var(--gut) - 32px));
}
.hero-sub.hero-punch{ margin-top: 4px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.status{
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "JetBrains Mono", monospace; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--hair); background: var(--card); color: var(--ink-soft);
}
.dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--mint); flex: none; }
.dot::after{ content:""; display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--mint); animation: ping 2.2s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping{ 70%,100%{ transform: scale(2.6); opacity: 0; } }

.socials{ display: flex; gap: 8px; margin-top: 28px; flex-wrap: wrap; }
.soc{
  height: 40px; padding-inline: 15px; border-radius: 999px;
  border: 1px solid var(--hair); background: var(--card);
  display: inline-flex; align-items: center; text-decoration: none;
  font-family: "JetBrains Mono", monospace; font-size: .74rem; color: var(--ink-soft);
  transition: border-color .25s, color .25s, transform .25s;
}
.soc:hover{ border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }

@media (max-width: 760px){
  .ly-badge{ --w: min(62vw, 250px); }
  .ly-copy{ align-items: center; text-align: center; }
  .ly-name .nm-w{ margin-inline: auto; }
  .ly-cta{ justify-content: center; }
  .ly-copy .socials{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; width: 100%; max-width: 420px; }
  .ly-copy .soc{ justify-content: center; padding-inline: 4px; font-size: min(.74rem, 2.9vw); white-space: nowrap; }
  .hero-sub{ max-width: 26ch; }
  .ly-copy{ min-height: 0; padding-top: var(--top, calc(144px + min(62vw, 250px) / .68)); padding-bottom: calc(28px + var(--floor)); }
  .ly-hint{ display: block; }
  .ly-hint .morph{ vertical-align: -1px; margin-right: 8px; }
  .ly-bops{ display: block; margin-top: 6px; }
  .ly-bops::before{ content: none; }
  .ly:not(.is-rigged) .ly-badge{ right: auto; left: 50%; top: 24px; translate: -50% 0; rotate: none; }
}

.shot{
  position: relative; aspect-ratio: 16/10; max-width: 100%; overflow: hidden;
  border-radius: var(--r); border: 1px solid var(--hair); background: var(--card);
}
.shot .art{ position: absolute; inset: 0; width: 100%; height: 100%; }

.showcase{
  --ar: 1.6;
  --w: min(64vw, 1060px, max(260px, calc((100svh - 340px) * var(--ar))));
  position: relative; overflow: hidden;
  min-height: calc(100svh - 66px);
  display: grid; grid-template-rows: auto 1fr;
  padding-block: clamp(18px, 3vh, 34px) clamp(22px, 4vh, 44px);
}
.sc-head{ display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sc{ display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 4vh, 44px); min-width: 0; }
.sc-stage{ position: relative; height: calc(var(--w) / var(--ar) + 26px); touch-action: pan-y; }
.sc-slide{ position: absolute; left: 50%; top: 50%; width: var(--w); aspect-ratio: var(--ar); will-change: transform, opacity; }
.sc-media{
  position: relative; display: block; height: 100%; overflow: hidden; cursor: pointer;
  border: 3px solid var(--ink); border-radius: var(--r-lg); background: var(--card);
  box-shadow: 10px 10px 0 0 color-mix(in srgb, var(--accent) 80%, transparent);
  -webkit-user-drag: none; user-select: none;
  transition: translate .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1);
}
.sc-media .shot{ height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.sc-media img{ -webkit-user-drag: none; }
.sc-slide.is-active .sc-media:hover{ translate: -4px -4px; box-shadow: 14px 14px 0 0 color-mix(in srgb, var(--accent) 80%, transparent); }
.sc-wipe{
  position: absolute; top: -2px; bottom: -2px; right: -2px; left: -16%; z-index: 2;
  background: var(--accent); clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  transform: scaleX(0); transform-origin: right center; pointer-events: none;
}

.sc-foot{ --ctl: 200px; display: grid; grid-template-columns: minmax(var(--ctl), 1fr) minmax(0, 900px) minmax(var(--ctl), 1fr); align-items: end; gap: 18px; }
.sc-text{ grid-column: 2; text-align: center; max-width: min(84vw, 900px); }
.sc-titles, .sc-lines{ display: grid; }
.sc-title, .sc-line{ grid-area: 1 / 1; }
.sc-title:not(.is-active):not(.is-leaving),
.sc-line:not(.is-active):not(.is-leaving){ visibility: hidden; }
.sc-title{ font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.3rem); }
.sc-title a{ text-decoration: none; }
.sc-title a:hover{ color: var(--accent); }
.sc-arrow{ font-size: .55em; vertical-align: .55em; color: var(--accent); }
.sc-lines{ overflow: hidden; margin-top: 10px; }
.sc-line{ font-family: "JetBrains Mono", monospace; font-size: .78rem; letter-spacing: .04em; color: var(--ink-faint); }
.sc-line::before, .sc-line::after{ color: var(--accent); }
.sc-line::before{ content: "{ "; }
.sc-line::after{ content: " }"; }

.sc-controls{ grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }
.sc-count{ font-family: "JetBrains Mono", monospace; font-size: .78rem; color: var(--ink-faint); margin-right: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-btn{
  position: relative; overflow: hidden; width: 52px; height: 52px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--card); color: var(--ink);
  transition: color .3s, transform .2s;
}
.sc-btn--next{ background: var(--ink); color: var(--paper); }
.sc-btn svg{ position: relative; z-index: 1; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc-btn::before{
  content: ""; position: absolute; left: var(--fx, 50%); top: var(--fy, 50%); width: 230%; aspect-ratio: 1;
  border-radius: 50%; background: var(--pink); translate: -50% -50%; scale: 0;
  transition: scale .4s cubic-bezier(.22,1,.36,1);
}
.sc-btn:hover::before, .sc-btn:focus-visible::before{ scale: 1; }
.sc-btn:hover, .sc-btn:focus-visible{ color: var(--on-accent); }
.sc-btn:active{ transform: scale(.93); }

@media (max-width: 1100px){
  .showcase{ --w: min(64vw, 1060px, max(260px, calc((100svh - 410px) * var(--ar)))); }
  .sc-foot{ grid-template-columns: minmax(0,1fr); justify-items: center; }
  .sc-text, .sc-controls{ grid-column: 1; }
  .sc-controls{ justify-self: center; }
}
@media (max-width: 760px){
  .showcase{ --ar: .8; --w: min(76vw, max(200px, calc((100svh - 420px) * var(--ar)))); }
  .sc-media{ box-shadow: 7px 7px 0 0 color-mix(in srgb, var(--accent) 80%, transparent); }
}
.shot:has(.ready) .art{ display: none; }
.shot img{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; object-position: top center; }

.tags{ display: flex; flex-wrap: wrap; gap: 7px; }
.tag{ font-family: "JetBrains Mono", monospace; font-size: .68rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--hair); color: var(--ink-faint); }

.embed-intro{ display: flex; flex-direction: column; gap: 14px; align-items: flex-start; margin-bottom: 26px; }
.embed-intro .prose{ max-width: 68ch; }
.embed-meta{ display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: "JetBrains Mono", monospace; font-size: .7rem; color: var(--ink-faint); }
.embed-meta span{ display: inline-flex; align-items: center; gap: 7px; }
.embed-meta span::before{ content:""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent, var(--mint)); }

.embed{
  border: 1px solid var(--hair); border-radius: var(--r-lg); overflow: hidden;
  background: var(--card); box-shadow: 0 26px 50px -38px rgba(19,17,26,.5);
}
.embed-bar{
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; background: var(--shell); border-bottom: 1px solid var(--hair);
}
.embed-dots{ display: flex; gap: 6px; flex: none; }
.embed-dots i{ width: 10px; height: 10px; border-radius: 50%; background: var(--hair); display: block; }
.embed-url{
  flex: 1; min-width: 0; text-align: center;
  font-family: "JetBrains Mono", monospace; font-size: .68rem; color: var(--ink-faint);
  background: var(--card); border: 1px solid var(--hair); border-radius: 999px;
  padding: 5px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.embed-open{
  flex: none; text-decoration: none; font-family: "JetBrains Mono", monospace;
  font-size: .68rem; color: var(--ink-soft); padding: 5px 10px; border-radius: 999px;
  border: 1px solid transparent; transition: border-color .2s, color .2s;
}
.embed-open:hover{ color: var(--ink); border-color: var(--hair); }

.embed-stage{
  position: relative; width: 100%; overflow: hidden;
  height: clamp(460px, 72vh, 760px);
  background: #fff;
}
.embed-stage iframe{
  position: relative; z-index: 1;
  width: 100%; height: 100%; border: 0; display: block;
  opacity: 0; transition: opacity .6s;
}
.embed-stage iframe.ready{ opacity: 1; }
.loading{ position: absolute; inset: 0; container-type: size; display: flex; align-items: center; justify-content: center; background: var(--card); }
.pulse-dot{
  --d: max(10.6cqh, 6.625cqw);
  flex: none; width: var(--d); height: var(--d); margin-inline: calc((max(9cqw, 14.4cqh) - var(--d)) / 2);
  border-radius: 50%; background: var(--c); animation: dotPulse 1.4s ease-in-out infinite;
}
@keyframes dotPulse{ 0%, 100%{ transform: scale(.7); opacity: .45; } 50%{ transform: scale(1); opacity: 1; } }
.embed-hint{
  position: absolute; z-index: 2; inset: 0;
  display: grid; place-items: center; padding: 16px;
  border: 0; background: rgba(19,17,26,.32); cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity .35s, visibility 0s .35s;
}
.embed-stage:not(.used):has(> iframe.ready) .embed-hint{ opacity: 1; visibility: visible; transition-delay: 0s; }
.embed-hint > span{
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px 12px 15px; border-radius: 999px;
  background: rgba(19,17,26,.86); color: #fff; backdrop-filter: blur(6px);
  font-family: "JetBrains Mono", monospace; font-size: clamp(.6rem, 2.8vw, .78rem); letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 16px 32px -14px rgba(19,17,26,.7);
  transition: transform .25s cubic-bezier(.22,1,.36,1), background .2s;
}
.embed-hint:is(:hover, :focus-visible) > span{ transform: scale(1.05); background: var(--ink); }
.embed-hint svg{ width: 18px; height: 18px; flex: none; fill: #fff; stroke: var(--ink); stroke-width: 1.2; animation: hintDrag 2.2s ease-in-out infinite paused; }
.embed-stage:not(.used):has(> iframe.ready) .embed-hint svg{ animation-play-state: running; }
@keyframes hintDrag{
  0%, 100%{ transform: translate(0, 0) scale(1); }
  15%     { transform: translate(0, 0) scale(.8); }
  55%     { transform: translate(12px, 7px) scale(.8); }
  70%     { transform: translate(12px, 7px) scale(1); }
}

@media (max-width: 760px){
  .embed-stage{ height: clamp(420px, 68vh, 620px); height: clamp(420px, 68svh, 620px); }
  .embed-url{ font-size: .62rem; }
  .embed-open{ display: none; }
  .embed-hint > span{ gap: 8px; padding: 10px 14px 10px 12px; }
  .embed-hint svg{ width: 15px; height: 15px; }
}

.os-sec{
  padding-block: calc(var(--v) * 1.5);
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  border-block: 1px solid color-mix(in srgb, var(--blue) 16%, transparent);
}
.os-wide{ max-width: 1680px; margin-inline: auto; padding-inline: var(--gut); }
.tour{ position: relative; padding: 118px clamp(160px, 16%, 220px) 104px; }
.tour .embed{ position: relative; z-index: 1; }
.tour:has(.embed-stage.used) .arrows{ z-index: 0; }
.notes{ list-style: none; margin: 0; padding: 0; }
.note{
  position: absolute; z-index: 3; width: max-content; max-width: 220px;
  font-weight: 700; font-size: .96rem; line-height: 1.34; text-wrap: balance;
  opacity: 0; translate: 0 8px; transition: opacity .4s, translate .5s var(--ease);
}
.note.is-shown{ opacity: 1; translate: none; }
.note .hl{ font-weight: 800; white-space: nowrap; --hl-inset: 6% -3px -7%; }
.note .hl::before{ transition-delay: .25s; }
.note.is-shown .hl::before{ clip-path: var(--hl-on); }
.n-icons{ --c: var(--pink); }
.n-apps{ --c: var(--mint); }
.n-menu{ --c: var(--blue); }
.n-clock{ --c: var(--yellow); }
.arrows{ position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.arrows .line{ stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset .6s .3s cubic-bezier(.65,0,.35,1); }
.arrows .head, .arrows .ring{ opacity: 0; transition: opacity .25s .85s; }
.arrows .is-shown .line{ stroke-dashoffset: 0; }
.arrows .is-shown :is(.head, .ring){ opacity: 1; }
.arrows .ring{ stroke: var(--blue); stroke-dasharray: 4 4; }
.arrows .halo{ stroke: var(--paper); stroke-width: 6; opacity: .9; }
.arrows .ring.halo{ stroke-dasharray: none; stroke-width: 5; opacity: .75; }
@media (min-width: 1181px){
  .n-icons{ text-align: right; }
  .n-apps{ text-align: center; }
}
@media (max-width: 1180px){
  .tour{ padding: 0; }
  .notes{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin-bottom: 22px; }
  .note{ position: static; width: auto; max-width: none; }
  .arrows{ display: none; }
}
@media (max-width: 760px){
  .os-sec .sec-head{ justify-items: center; text-align: center; }
  .os-sec .embed-intro{ align-items: center; text-align: center; }
  .os-sec .embed-meta{ justify-content: center; }
  .notes{ text-align: center; }
}
@media (max-width: 560px){ .notes{ grid-template-columns: minmax(0, 1fr); } }
@media (hover: none), (pointer: coarse){ .n-menu{ display: none; } }

.f-hero{ position: relative; overflow: hidden; touch-action: pan-y; }
.f-field{
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(ellipse 36% 34% at 50% 50%, rgba(0,0,0,.12) 45%, #000 100%);
  mask-image: radial-gradient(ellipse 36% 34% at 50% 50%, rgba(0,0,0,.12) 45%, #000 100%);
}
.f-hero-in{
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(100vh - var(--bar)); min-height: calc(100svh - var(--bar) - env(safe-area-inset-top, 0px));
  padding-block: clamp(60px, 7vw, 100px); text-align: center;
}
.f-title{ margin-top: 18px; max-width: 11ch; font-size: clamp(2.7rem, 1.3rem + 5.2vw, 6.6rem); line-height: .98; letter-spacing: -.045em; }
.f-hero .prose{ margin-top: 22px; max-width: 40ch; font-size: clamp(1.02rem, .96rem + .3vw, 1.18rem); }

.c-ico{
  display: grid; place-items: center; width: var(--z, 48px); aspect-ratio: 1; border-radius: 28%;
  background: linear-gradient(160deg, rgba(255,255,255,.22), transparent 55%), var(--c); color: #fff;
  font: 700 calc(var(--z, 48px) * .3)/1 "JetBrains Mono", monospace; letter-spacing: -.04em;
}
:is([data-accent="yellow"], [data-accent="mint"]) .c-ico{ color: var(--ink); }

.c-pl{ padding-block: clamp(72px, 10vw, 150px); background: var(--tint-2) radial-gradient(rgba(19,17,26,.08) 1px, transparent 1.15px) 0 0 / 14px 14px; }
.c-desk{
  max-width: 1280px; height: clamp(540px, calc(100svh - var(--bar) - 48px), 760px); margin-inline: auto;
  padding-inline: var(--gut);
}
@media (min-width: 1600px){ .c-desk{ max-width: 1500px; } }
.c-win{ height: 100%; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid var(--hair); background: var(--shell); box-shadow: 0 34px 60px -34px rgba(19,17,26,.55); }
.c-tbar{ display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px; border-bottom: 1px solid var(--hair); background: var(--card); }
.c-lights{ display: flex; gap: 7px; margin-right: 4px; }
.c-lights i{ width: 11px; height: 11px; border-radius: 50%; background: var(--pink); }
.c-lights i:nth-child(2){ background: #F5B800; }
.c-lights i:nth-child(3){ background: var(--mint); }
.c-fold{
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 10px; background: none; color: var(--ink-soft); cursor: pointer;
  transition: background-color .2s, color .2s;
}
@media (hover: hover){ .c-fold:hover{ background: var(--hair-soft); color: var(--ink); } }
.c-fold svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: rotate .35s var(--ease); }
.c-fold[aria-expanded="false"] svg{ rotate: .5turn; }
.c-wtitle{ flex: 1; min-width: 0; display: flex; justify-content: center; align-items: center; gap: 9px; }
.c-wtitle .c-ico{ --z: 24px; --c: var(--now); flex: none; border-radius: 7px; }
.c-wtitle b{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 800 .98rem/1.2 var(--display); letter-spacing: -.02em; }
.c-tbar .arrow-link{ padding-block: 6px; margin-block: 0; font-size: .82rem; --accent: var(--now); }

.c-body{
  --open: clamp(216px, 15vw, 252px); --side: var(--open);
  flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--side);
  transition: grid-template-columns .35s var(--ease);
}
.c-win.is-folded .c-body{ --side: 72px; }
.c-side{ grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 14px 10px; overflow: hidden; }
.c-side > *{ min-width: calc(var(--open) - 20px); }
.c-tabs{ min-height: 0; overflow-y: auto; scrollbar-width: none; display: grid; align-content: start; gap: 14px; }
.pl-group{ display: grid; gap: 2px; }
.pl-glabel{ margin: 0; padding: 0 10px 4px; font: 500 .62rem/1.4 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.pl-tab{
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px;
  border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer;
  transition: background-color .2s, box-shadow .2s;
}
.pl-tab .c-ico{ --z: 40px; flex: none; border-radius: 11px; }
.c-tx{ min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 800 .96rem/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
@media (hover: hover){ .pl-tab:hover{ background: var(--hair-soft); } }
.pl-tab:focus-visible{ outline-offset: -2px; }
.pl-tab[aria-selected="true"]{ background: var(--card); box-shadow: 0 0 0 1px var(--hair-soft), 0 8px 18px -12px rgba(19,17,26,.4); }
.c-desc{ margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--hair); font-size: .86rem; line-height: 1.5; color: var(--ink-soft); }
.is-folded .c-side > *{ min-width: 0; }
.is-folded .pl-glabel, .is-folded .c-desc{ display: none; }
.is-folded .pl-group + .pl-group{ padding-top: 14px; border-top: 1px solid var(--hair); }
.is-folded .pl-tab{ justify-content: center; }
.is-folded .c-tx{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.c-main{ grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; padding: 14px 4px 14px 14px; }
.c-more{ display: none; }
.c-stage.embed-stage{
  height: 100%; border-radius: 12px; border: 1px solid var(--hair);
  box-shadow: 0 1px 2px rgba(19,17,26,.06), 0 20px 40px -26px rgba(19,17,26,.45);
}
.c-stage iframe{ position: absolute; inset: 0; }

.ld{ position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.ld-wipe{ position: absolute; inset: 0; }
.ld.rev .ld-wipe{ transform: scaleX(-1); }
.ld-wipe i{ position: absolute; top: 0; bottom: 0; left: -15%; width: 130%; clip-path: polygon(11.5% 0, 100% 0, 88.5% 100%, 0 100%); background: var(--ink); transform: translateX(-100%); }
.ld.is-wiping .embed-loader{ visibility: hidden; }

@media (max-width: 760px){
  .f-field{
    -webkit-mask-image: radial-gradient(ellipse 88% 34% at 50% 52%, rgba(0,0,0,.08) 56%, #000 100%);
    mask-image: radial-gradient(ellipse 88% 34% at 50% 52%, rgba(0,0,0,.08) 56%, #000 100%);
  }
  .c-pl{ padding-block: clamp(56px, 14vw, 90px); }
  .c-desk{ height: clamp(560px, calc(100svh - var(--bar) - 24px), 900px); padding-inline: 10px; }
  .c-lights{ display: none; }
  .c-tbar{ gap: 8px; padding-inline: 8px 12px; }
  .c-wtitle{ justify-content: flex-start; }
  .c-fold{ order: -1; }
  .c-fold svg{ rotate: -.25turn; }
  .c-fold[aria-expanded="false"] svg{ rotate: .25turn; }
  .c-body{ display: flex; flex-direction: column; }
  .c-side{ position: relative; flex: none; padding: 10px 0 0; }
  .c-side > *{ min-width: 0; }
  .c-tabs{ display: flex; gap: 6px; overflow: auto hidden; padding-inline: 10px; scroll-padding-inline: 10px; }
  .pl-group{ display: contents; }
  .pl-glabel, .c-desc{ display: none; }
  .pl-tab{ flex: none; width: auto; gap: 8px; padding: 5px 14px 5px 5px; }
  .pl-tab .c-ico{ --z: 32px; border-radius: 9px; }
  .c-more{
    position: absolute; z-index: 1; top: 10px; bottom: 0; width: 44px; padding: 0 6px;
    display: grid; align-items: center; border: 0; color: var(--ink-soft); cursor: pointer;
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .c-more[data-dir="-1"]{ left: 0; justify-items: start; background: linear-gradient(90deg, var(--shell) 40%, transparent); }
  .c-more[data-dir="1"]{ right: 0; justify-items: end; background: linear-gradient(-90deg, var(--shell) 40%, transparent); }
  .c-more svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .c-side.more-l .c-more[data-dir="-1"], .c-side.more-r .c-more[data-dir="1"]{ opacity: 1; pointer-events: auto; }
  .c-tx{ font-size: .9rem; }
  .is-folded .c-side{ display: none; }
  .c-main{ flex: 1; padding: 10px; }
}

.filters{ display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 28px; }
.chip{
  border: 0; background: transparent; cursor: pointer;
  font-family: "JetBrains Mono", monospace; font-size: .78rem;
  padding: 9px 14px; border-radius: 999px; color: var(--ink-faint); min-height: 40px;
  transition: color .2s, background .2s;
}
.chip:hover{ color: var(--ink); background: var(--card); }
.chip[aria-pressed="true"]{ color: var(--paper); background: var(--ink); }

.cards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(290px,1fr)); gap: 22px; }
.card{
  display: flex; flex-direction: column;
  border: 1px solid var(--hair); border-radius: var(--r-lg); overflow: hidden; background: var(--card);
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .35s;
}
.card:hover{ transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent, var(--pink)) 80%, transparent); box-shadow: 0 20px 40px -28px rgba(19,17,26,.45); }
.card .shot{ border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; }
.card-body{ padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; align-items: flex-start; }
.card-body h4{ font-family: var(--display); font-weight: 800; font-size: 1.08rem; letter-spacing: -.02em; margin: 0; }
.card-body p{ font-size: .88rem; color: var(--ink-soft); }
.card-body .arrow-link{ margin-top: auto; padding-top: 6px; }

.statement{
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.45rem, 3.3vw, 2.6rem); line-height: 1.28;
  letter-spacing: -.025em; max-width: 24ch;
}

.process{ background: var(--tint); border-block: 1px solid var(--hair-soft); }
.pr-intro{ display: grid; align-items: center; min-height: 100svh; }
.pr-intro-in{ display: grid; justify-items: center; gap: clamp(18px, 3vh, 30px); text-align: center; padding-block: var(--v); }
.pr-heading{ font-size: clamp(2.4rem, min(1.4rem + 4.2vw, 9vh), 5.2rem); }
.pr-statement{ font-size: clamp(1.5rem, min(1rem + 2.4vw, 5.6vh), 3.2rem); max-width: 32ch; }
.pr-kicker{
  font: 800 clamp(1.7rem, min(1.2rem + 2.4vw, 6vh), 3.2rem)/1.18 var(--display);
  letter-spacing: -.03em; text-wrap: balance;
}

.pr-step{
  position: relative; overflow: hidden; min-height: 100svh;
  display: grid; align-items: center; color: var(--card); background: var(--ink);
}
.pr-bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pr-step::before{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(rgba(252,251,248,.07) 1px, transparent 1.3px) 0 0 / 6px 6px,
    linear-gradient(90deg, rgba(19,17,26,.88) 0%, rgba(19,17,26,.62) 48%, rgba(19,17,26,.18) 100%);
}
.pr-num{
  position: absolute; z-index: 1; right: 4vw; bottom: clamp(30px, 8vh, 80px); pointer-events: none;
  font: 800 clamp(8rem, min(26vw, 42vh), 24rem)/.8 var(--display); letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--accent) 70%, transparent);
}
.pr-copy{ position: relative; z-index: 2; display: grid; justify-items: start; gap: 18px; padding-block: var(--v); }
.pr-copy > *{ max-width: 34rem; }
.pr-n{ display: inline-flex; align-items: center; gap: .7em; font-family: "JetBrains Mono", monospace; font-size: .78rem; letter-spacing: .14em; }
.pr-n .morph{ width: 1.1em; height: 1.1em; flex: none; }
.pr-title{ font-size: clamp(2.4rem, 1.4rem + 4.6vw, 5.4rem); max-width: 12ch; }
.pr-copy p{ font-size: clamp(1.02rem, .95rem + .4vw, 1.3rem); line-height: 1.5; color: rgba(252,251,248,.86); }

@media (prefers-reduced-motion: no-preference){
  .pr-heading .nm-w > span,
  .process:not(.is-pinned) .pr-title .nm-w > span,
  .pr-step.is-on .pr-title .nm-w > span{ animation: nm-hop 6s ease-in-out calc(var(--i) * 45ms + .4s) infinite; }
}
.process.is-covered .pr-intro *{ animation: none !important; }

.pr-bars{ display: none; }
.pr-steps{ display: contents; }
.pr-nav{ display: none; }
.process{ --bars-out: 0px; }
@supports (height: 1dvh){ .process{ --bars-out: calc(100lvh - 100dvh); } }
.process.is-pinned .pr-stage{ position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
.process.is-pinned::after{ content: ""; display: block; height: calc(var(--run, 0) * 100vh); height: calc(var(--run, 0) * 100lvh); }
.process.is-pinned .pr-intro,
.process.is-pinned .pr-step{ position: absolute; inset: 0; min-height: 0; }
.process.is-pinned .pr-intro{ padding-bottom: var(--bars-out); }
.process.is-pinned .pr-step{
  will-change: clip-path;
  clip-path: inset(var(--cy, 0%) var(--cx, 0%) var(--cy, 0%) calc(var(--cx, 0%) + var(--cw, 0%)) round var(--cr, 0px));
}
.process.is-pinned .pr-bg{ will-change: transform; }
.process.is-pinned .pr-bars{
  display: flex; gap: 8px; position: absolute; z-index: 3; left: 50%; bottom: calc(clamp(18px, 4vh, 34px) + var(--bars-out)); translate: -50% 0;
}
.pr-bars i{ width: 46px; height: 4px; border-radius: 2px; background: rgba(252,251,248,.28); overflow: hidden; }
.pr-bars b{ display: block; height: 100%; background: var(--card); transform: scaleX(0); transform-origin: left; }

.band{
  position: relative; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent, var(--pink)) 16%, var(--paper));
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: clamp(8px, 1.6vw, 14px) clamp(8px, 1.6vw, 14px) 0 0 color-mix(in srgb, var(--accent, var(--pink)) 80%, transparent);
  padding: clamp(34px, 5.5vw, 64px);
  display: grid; grid-template-columns: 1fr auto; gap: 28px 44px; align-items: end;
  transition: background-color .5s ease;
}
.band > .band-fx{ position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.band > *{ position: relative; z-index: 1; }
.band h2{ font-size: clamp(2rem,1.5rem + 2.4vw,3.3rem); max-width: 16ch; }
.band p{ color: var(--ink-soft); margin-top: 14px; max-width: 42ch; }
.band .btn:hover{ background: var(--accent, var(--pink)); color: var(--on-accent); border-color: var(--accent, var(--pink)); }

.a5{ --gap: clamp(32px, 6vw, 96px); overflow-x: clip; }
.a5 .v0{ --c: var(--pink); }
.a5 .v1{ --c: var(--blue); }
.a5 .v2{ --c: var(--yellow); }
.a5 .v3{ --c: var(--mint); }
.a5 .v4{ --c: var(--pink); }
.a5-top, .a5-more{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px var(--gap); }
.a5-top{ align-items: center; }
.a5-side{ display: grid; justify-items: center; gap: 18px; }
.a5-more{ align-items: start; margin-top: clamp(40px, 6vw, 84px); padding-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--hair); }
.a5-words{ display: grid; gap: 18px; align-content: start; }
.a5-words .lead{ max-width: 30ch; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem); line-height: 1.4; letter-spacing: -.01em; color: var(--ink); }
.a5-words .prose{ max-width: 44ch; }
.a5-words .stamp{ white-space: nowrap; }

.a5-title{ display: grid; gap: .02em; margin-top: 16px; font-size: clamp(2.4rem, 1.4rem + 3.8vw, 5rem); line-height: 1; letter-spacing: -.04em; }
.a5-track{ display: grid; grid-template-columns: 2.4rem auto auto; justify-content: start; align-items: center; gap: 0 14px; color: var(--ink-faint); transition: color .3s; }
.a5-track b{ font: 500 .76rem "JetBrains Mono", monospace; letter-spacing: .1em; color: var(--ink-faint); }
.a5-w{ position: relative; isolation: isolate; }
.a5-w::before{
  content: ""; position: absolute; z-index: -1; inset: 48% -.06em 4%;
  background: color-mix(in srgb, var(--c) 34%, transparent); clip-path: polygon(1% 16%, 99% 0, 100% 84%, 0 100%);
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s cubic-bezier(.65,0,.35,1);
}
.a5-track.is-on{ color: var(--ink); }
.a5-track.is-on .a5-w::before{ transform: none; transform-origin: 0 50%; }
.a5-eq{ display: inline-flex; align-items: flex-end; gap: 3px; height: .42em; opacity: 0; transition: opacity .3s; }
.a5-eq i{ width: 5px; height: 100%; background: var(--c); transform-origin: bottom; }
.a5-track.is-on .a5-eq i{ animation: a5-eq .8s ease-in-out infinite alternate paused; }
.a5-eq i:nth-child(2){ animation-delay: -.3s; }
.a5-eq i:nth-child(3){ animation-delay: -.55s; }
.a5-track.is-on .a5-eq{ opacity: 1; }
.is-playing .a5-track.is-on .a5-eq i{ animation-play-state: running; }
@keyframes a5-eq{ from{ transform: scaleY(.25); } }

.a5-more .codeblock{ background: color-mix(in srgb, var(--blue) 9%, transparent); border-color: color-mix(in srgb, var(--blue) 22%, transparent); }
.a5-more .codeblock .p{ color: color-mix(in srgb, var(--blue) 82%, var(--ink)); }
.a5-caret{ display: inline-block; width: .55em; height: 1.2em; margin-left: 1px; vertical-align: -.22em; background: var(--blue); animation: a5-blink 1s steps(1) infinite; }
@keyframes a5-blink{ 50%{ opacity: 0; } }
.a5-glitch{ color: var(--pink-ink); }

.a5-deck{ position: relative; width: 100%; max-width: 560px; aspect-ratio: 1.42; }
.a5-sleeve{ position: absolute; z-index: 2; left: 0; top: 0; width: 70.4%; aspect-ratio: 1; margin: 0; overflow: hidden; border-radius: 6px; background: var(--ink); box-shadow: 0 26px 40px -26px rgba(19,17,26,.6); }
.a5-sleeve img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.a5-sleeve figcaption{ position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; background: linear-gradient(transparent, rgba(19,17,26,.82)); color: #fff; font: 800 clamp(1rem, .9rem + .6vw, 1.35rem)/1.15 var(--display); letter-spacing: -.02em; }
.a5-sticker{ position: absolute; top: 14px; left: 14px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--pink); color: #fff; font: 700 .62rem "JetBrains Mono", monospace; letter-spacing: .08em; }
.a5-disc{ position: absolute; z-index: 1; right: 0; top: 2.2%; width: 66%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: repeating-radial-gradient(circle, #24212D 0 1px, #13111A 1px 3.5px); box-shadow: 0 22px 34px -22px rgba(19,17,26,.7); }
.a5-spin{ position: absolute; inset: 0; border-radius: 50%; animation: a5-spin 2.6s linear infinite; animation-play-state: paused; }
.is-playing .a5-spin{ animation-play-state: running; }
@keyframes a5-spin{ to{ rotate: 360deg; } }
.a5-label{ position: absolute; inset: 31%; overflow: hidden; border-radius: 50%; border: 4px solid var(--c); transition: border-color .4s; }
.a5-label img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.a5-hole{ position: absolute; left: 50%; top: 50%; width: 4%; height: 4%; translate: -50% -50%; border-radius: 50%; background: var(--paper); }
.a5-sheen{ position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: conic-gradient(from 20deg, transparent 0 7%, rgba(255,255,255,.12) 11%, transparent 17% 50%, rgba(255,255,255,.08) 57%, transparent 64%); }
.a5-arm{ position: absolute; z-index: 3; right: -1%; top: -6%; width: 30%; transform-origin: 74% 12%; rotate: -30deg; transition: rotate .8s cubic-bezier(.22,1,.36,1); }
.is-playing .a5-arm{ rotate: 0deg; }
.a5-arm svg{ display: block; width: 100%; overflow: visible; }
.a5-controls{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }

@media (max-width: 900px){
  .a5-top, .a5-more{ grid-template-columns: minmax(0, 1fr); }
  .a5-head{ order: -1; text-align: center; }
  .a5-title{ grid-template-rows: repeat(3, auto); grid-auto-flow: column; justify-content: center; gap: .04em clamp(18px, 6vw, 48px); font-size: clamp(1.6rem, 8.2vw, 3.6rem); }
  .a5-track{ grid-template-columns: auto auto auto; gap: 0 8px; }
  .a5-track b{ font-size: .66rem; }
  .a5-deck{ width: 90%; margin-right: 6%; }
  .a5-words{ justify-items: center; text-align: center; }
}
@media (max-width: 359px){
  .a5-controls{ display: grid; }
}

.codeblock{
  border: 1px solid var(--hair); border-radius: var(--r); background: var(--card); padding: 26px;
  font-family: "JetBrains Mono", monospace; font-size: .76rem; line-height: 1.8;
  overflow-x: auto; white-space: pre; margin: 0; tab-size: 2;
}
.codeblock .k{ color: var(--pink-ink); }
.codeblock .p{ color: var(--blue); }
.codeblock .s{ color: var(--mint-ink); }

.ph{
  position: relative; display: block; overflow: hidden;
  background:
    radial-gradient(circle closest-side at 44% 42%, var(--accent, var(--pink)) 0 78%, transparent calc(78% + 1px)),
    radial-gradient(circle closest-side at 58% 62%, var(--accent-2, var(--yellow)) 0 58%, transparent calc(58% + 1px)),
    color-mix(in srgb, var(--accent, var(--pink)) 12%, var(--card));
  background-blend-mode: multiply;
}
.ph::before{
  content:""; position: absolute; inset: 0;
  background: radial-gradient(var(--ink) 1.3px, transparent 1.6px) 0 0 / 9px 9px;
  opacity: .14;
}
.ph img{ position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }

.gallery{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px, 2vw, 24px); }
.tile{
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg); overflow: hidden;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s;
}
.tile:nth-child(4n+1), .tile:nth-child(4n){ grid-column: span 2; }
.tile:hover{ transform: translate(-4px, -4px) rotate(-.5deg); border-color: var(--ink); box-shadow: 8px 8px 0 0 color-mix(in srgb, var(--accent, var(--pink)) 80%, transparent); }
.tile:nth-child(even):hover{ transform: translate(-4px, -4px) rotate(.5deg); }
.tile .ph{ height: clamp(200px, 22vw, 290px); border-bottom: 1px solid var(--hair); }
.tile .ph img{ transition: transform .6s cubic-bezier(.22,1,.36,1); }
.tile:hover .ph img{ transform: scale(1.05); }
.tile-cap{ padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; flex: 1; }
.tile-cap h3{ font-size: clamp(1.15rem,1.05rem + .5vw,1.4rem); }
.tile-cap p{ color: var(--ink-soft); font-size: .9rem; max-width: 48ch; }
.tile-link{ margin-top: auto; padding-top: 4px; }
.tile-link::after{ content:""; position: absolute; inset: 0; border-radius: inherit; }

#skills-tinted{ position: relative; }
#skills-tinted > .shell{ position: relative; z-index: 1; }
#skills-fx{ position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sk-tabs{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 26px; }
.sk-tab{
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  padding: 14px 18px 16px; min-height: 48px; cursor: pointer;
  border: 2px solid var(--hair); border-radius: var(--r); background: var(--card);
  --line: color-mix(in srgb, var(--accent) 80%, transparent);
  box-shadow: inset 0 -4px 0 var(--line);
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, border-color .22s, background-color .22s;
}
.sk-n{ font-family: "JetBrains Mono", monospace; font-size: .7rem; letter-spacing: .12em; color: var(--ink-faint); }
.sk-n b{ color: var(--accent); font-weight: 500; }
.sk-t{ font-family: var(--display); font-weight: 800; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); letter-spacing: -.02em; line-height: 1.15; }
.sk-tab:hover{ border-color: var(--ink); transform: translateY(-2px); }
.sk-tab[aria-selected="true"]{
  --line: transparent;
  border-color: var(--ink); transform: translate(-3px, -3px);
  background: color-mix(in srgb, var(--accent) 18%, var(--card));
  box-shadow: inset 0 -4px 0 var(--line), 5px 5px 0 0 color-mix(in srgb, var(--accent) 80%, transparent);
}
.sk-tab:active{ transform: translate(1px, 1px); box-shadow: inset 0 -4px 0 var(--line), 0 0 0 0 color-mix(in srgb, var(--accent) 80%, transparent); }

.sk-stage{ display: grid; }
.sk-panel{
  grid-area: 1 / 1; position: relative;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px);
  padding: clamp(24px, 4vw, 44px); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
  border: 3px solid var(--ink);
  box-shadow: clamp(8px, 1.4vw, 12px) clamp(8px, 1.4vw, 12px) 0 0 color-mix(in srgb, var(--accent) 80%, transparent);
}
.sk-panel:not(.is-on){ visibility: hidden; }
.sk-panel::before{
  content:""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .07;
  background: radial-gradient(var(--ink) 1.2px, transparent 1.5px) 0 0 / 11px 11px;
}
.sk-panel::after{
  content:""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(var(--accent) 2px, transparent 2.4px) 0 0 / 7px 7px, color-mix(in srgb, var(--accent) 22%, transparent);
}
.sk-panel > *{ position: relative; }

.sk-card{ display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.sk-card .label b{ color: var(--accent); }
.sk-title{ font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); }
.sk-avg{ margin-top: auto; display: flex; align-items: baseline; gap: 12px; }
.sk-avg b{
  font-family: var(--display); font-weight: 800; line-height: .9; letter-spacing: -.04em;
  font-size: clamp(3rem, 2rem + 4vw, 5rem);
}

.sk-stats{ list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; align-content: center; }
.sk-stat{ display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 7px 12px; }
.sk-name{ font-weight: 700; font-size: .95rem; line-height: 1.3; }
.sk-val{ font-family: "JetBrains Mono", monospace; font-size: .8rem; font-weight: 700; }
.sk-val small{ font-size: inherit; font-weight: 400; color: var(--ink-faint); }

.sk-bar{
  grid-column: 1 / -1; position: relative; height: 16px; overflow: hidden;
  border: 2px solid var(--ink); border-radius: 5px; background: var(--card);
}
.sk-bar::before, .sk-bar i{ content:""; position: absolute; inset: 0 auto 0 0; width: var(--v); transform-origin: left; }
.sk-bar::before{ background: color-mix(in srgb, var(--accent) 32%, var(--card)); }
.sk-bar i{ background: var(--accent); box-shadow: inset 0 3px 0 rgba(255,255,255,.3); }
.sk-bar::after{
  content:""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(5% - 2px), var(--card) calc(5% - 2px) 5%);
}

.sk.is-live .sk-panel.is-on{ animation: sk-pop .38s cubic-bezier(.34,1.56,.64,1); }
.sk.is-live .sk-panel.is-on::after{ animation: sk-flash .5s ease-out; }
.sk.is-live .sk-panel.is-on .sk-title{ animation: sk-misreg .6s cubic-bezier(.22,1,.36,1); }
.sk.is-live .sk-panel.is-on .sk-bar::before{ animation: sk-fill .45s cubic-bezier(.22,1,.36,1) calc(var(--n) * 70ms + 150ms) backwards; }
.sk.is-live .sk-panel.is-on .sk-bar i{ animation: sk-fill .7s steps(var(--s)) calc(var(--n) * 70ms + 320ms) backwards; }
.sk.is-live .sk-panel.is-on .sk-val{ animation: sk-val .35s cubic-bezier(.34,1.56,.64,1) calc(var(--n) * 70ms + 600ms) backwards; }

@keyframes sk-pop{ from{ transform: translate(10px, 10px); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 80%, transparent); } }
@keyframes sk-flash{ from{ opacity: 1; } }
@keyframes sk-misreg{
  0%  { text-shadow: -8px 4px 0 var(--accent-2), 8px -3px 0 var(--accent); transform: skewX(-10deg); }
  25% { text-shadow: 5px -2px 0 var(--accent-2), -5px 3px 0 var(--accent); transform: skewX(6deg); }
  55% { text-shadow: -2px 1px 0 var(--accent-2), 2px -1px 0 var(--accent); transform: skewX(-2deg); }
  100%{ text-shadow: 0 0 0 var(--accent-2), 0 0 0 var(--accent); transform: none; }
}
@keyframes sk-fill{ from{ transform: scaleX(0); } }
@keyframes sk-val{ from{ opacity: 0; transform: translateY(6px) scale(.8); } }

.coaster-world{ display: none; }
.cz-boards{ display: grid; gap: clamp(18px, 2.4vw, 28px); max-width: 1280px; margin-inline: auto; padding-inline: var(--gut); }
.cz-board{
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent) 14%, var(--paper));
}
.cz-board::before{
  content:""; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background: radial-gradient(var(--ink) 1.2px, transparent 1.5px) 0 0 / 11px 11px;
}
.cz-board-in{
  position: relative; height: 100%; max-width: 1240px; margin-inline: auto;
  padding: clamp(24px, 4vw, 48px);
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px); align-items: center;
}
.cz-ticket{
  display: grid; grid-template-columns: 56px minmax(0, 1fr);
  background: var(--card); border: 3px solid var(--ink); border-radius: var(--r-lg);
  box-shadow: clamp(8px, 1.4vw, 12px) clamp(8px, 1.4vw, 12px) 0 0 color-mix(in srgb, var(--accent) 80%, transparent);
}
.cz-stub{
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 14px;
  padding-block: 20px; border-right: 2px dashed var(--hair); font-family: "JetBrains Mono", monospace;
}
.cz-stub span{ writing-mode: vertical-rl; rotate: 180deg; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }
.cz-stub b{ font-size: .95rem; color: var(--accent); }
.cz-pics{ position: relative; height: clamp(300px, 34vw, 460px); }
.cz-slot{ position: absolute; width: clamp(140px, 16vw, 220px); }
.cz-polaroid{
  position: relative; display: block; width: 100%; margin: 0; padding: 10px 10px 34px;
  background: var(--card); border: 1px solid var(--hair); border-radius: 6px;
  box-shadow: 0 22px 40px -28px rgba(19,17,26,.5);
  font: inherit; color: inherit; text-align: inherit; cursor: zoom-in;
  transition: translate .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.cz-polaroid:hover{ translate: 0 -5px; box-shadow: 0 30px 44px -26px rgba(19,17,26,.55); }
.cz-polaroid .ph{ aspect-ratio: 4/5; border-radius: 3px; }
.cz-polaroid::before{
  content:""; position: absolute; z-index: 2; left: 50%; top: -12px; width: 74px; height: 22px; margin-left: -37px;
  background: color-mix(in srgb, var(--accent-2) 55%, transparent); rotate: -4deg;
}
.cz-slot:nth-child(1){ left: 0; top: 0; rotate: -6deg; }
.cz-slot:nth-child(2){ right: 2%; top: 14%; rotate: 5deg; }
.cz-slot:nth-child(3){ left: 28%; bottom: 0; rotate: -2deg; }

.coaster.is-ride .coaster-stage{ height: calc((1 + var(--run, 0)) * 100vh); height: calc((1 + var(--run, 0)) * 100lvh); }
.coaster.is-ride .coaster-clip{ position: sticky; top: 0; height: 100vh; height: 100lvh; clip-path: inset(0); }
.coaster.is-ride .coaster-clip.is-far{ content-visibility: hidden; }
.coaster.is-ride{ overflow: clip; }
.coaster.is-ride .coaster-world{ display: block; position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.coaster.is-ride .cz-boards{ position: absolute; inset: 0; display: block; max-width: none; padding: 0; pointer-events: none; }
.coaster.is-ride .cz-board{
  position: absolute; inset: 0; border-radius: 0;
  clip-path: circle(0);
}
.coaster.is-ride .cz-board.is-open{ pointer-events: auto; will-change: transform; }
.coaster.is-ride .cz-board-in{ padding: 96px var(--gut) 32px; }

.coaster-world > *{ position: absolute; }
.cz-ground{ height: 1400px; background: var(--tint); border-top: 3px solid var(--ink); }
.cz-ground::after{
  content:""; position: absolute; inset: 44px 0 auto; height: 5px;
  background: repeating-linear-gradient(90deg, var(--hair) 0 34px, transparent 34px 64px);
}
.cz-track{ left: 0; top: 0; overflow: visible; }
.cz-track path{ fill: none; stroke-linejoin: round; }
.cz-track--fill{ will-change: transform; }
.cz-supports{ stroke: var(--ink); stroke-width: 3; stroke-opacity: .2; }
.cz-ties{ stroke: var(--ink-soft); stroke-width: 4; }
.cz-rails{ stroke: color-mix(in srgb, var(--ink) 26%, var(--paper)); stroke-width: 12; }
.cz-fill path{ stroke-width: 12; }
.cz-gap{ stroke: var(--paper); stroke-width: 5; }

.cz-cart{ left: -70px; top: -122px; width: 140px; height: 116px; transform-origin: 70px 122px; will-change: transform; }
.cz-cart img{ display: block; width: 100%; height: 100%; }

.cz-gate{ left: -100px; top: -345px; width: 300px; border-inline: 7px solid var(--ink); }
.cz-gate-sign{
  position: absolute; left: -27px; right: -27px; top: 0; padding: 30px 34px; text-align: center;
  background: var(--ink); color: var(--paper); border-radius: 14px; box-shadow: 8px 8px 0 var(--pink);
}
.cz-bulbs{ position: absolute; inset: 12px; pointer-events: none; }
.cz-bulbs svg{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: cz-chase .6s linear infinite; }
.cz-bulbs svg:nth-child(2){ animation-delay: -.4s; }
.cz-bulbs svg:nth-child(3){ animation-delay: -.2s; }
.cz-bulbs rect{ fill: none; stroke: #FFCB3D; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 0 3; }
.cz-bulbs .cz-halo{ stroke-width: 12; opacity: .22; }
@keyframes cz-chase{ 0%, 30%{ opacity: 1; } 40%, 90%{ opacity: .28; } }
.cz-gate-sign b{ display: block; font: 800 34px/1 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.cz-end{ top: -175px; animation: cz-bob 3s ease-in-out infinite alternate; }
.cz-end .cz-gate-sign{ top: auto; bottom: 0; left: -170px; right: auto; width: 340px; transform-origin: 50% 100%; }
.cz-gate-sign b + span{ display: block; margin-top: 10px; font: 500 14px/1.4 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; text-wrap: balance; color: var(--yellow); }

.cz-stop{ top: 0; }
.cz-roof{
  position: absolute; left: -120px; top: -212px; width: 240px; height: 52px;
  border: 3px solid var(--ink); border-radius: 12px 12px 4px 4px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 24px, var(--card) 24px 48px);
}
.cz-roof::before, .cz-roof::after{ content:""; position: absolute; top: 100%; width: 6px; height: calc(var(--ground) + 157px); background: var(--ink); }
.cz-roof::before{ left: 8px; }
.cz-roof::after{ right: 8px; }
.cz-deck{ position: absolute; left: -135px; top: 14px; width: 270px; height: 14px; border-radius: 3px; background: var(--ink); }
.cz-sign{
  position: absolute; left: -145px; bottom: 222px; width: 290px; padding: 12px 16px 14px;
  background: var(--card); border: 3px solid var(--ink); border-radius: 12px;
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--accent) 80%, transparent); transform-origin: 50% 100%;
}
.cz-sign span{ display: block; font: 500 13px/1.3 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.cz-sign b{ display: block; margin-top: 6px; font: 800 26px/1.05 var(--display); letter-spacing: -.03em; }
#coaster {padding-bottom: 0px !important;}


.cz-pic{ margin: 0; padding: 7px; background: var(--card); border: 3px solid var(--ink); border-radius: 8px; rotate: var(--tilt, 0deg); }
.cz-pic .ph{ width: 100%; height: 100%; border-radius: 3px; }
.cz-pic::after{ content:""; position: absolute; left: 50%; top: 100%; width: 6px; height: var(--post, 0px); margin-left: -3px; background: var(--ink); }
.cz-float{ width: 150px; animation: cz-bob 3s ease-in-out var(--d, 0s) infinite alternate; }
.cz-float > img{ display: block; width: 150px; height: 200px; }
.cz-float .cz-pic{ position: relative; width: 120px; height: 96px; margin: -3px auto 0; }
@keyframes cz-bob{ to{ transform: translateY(-16px); } }
.cz-wheel{ width: 330px; height: 360px; visibility: hidden; }
.cz-wheel > *{ visibility: visible; }
.cz-wheel > img{ position: absolute; inset: 0; width: 100%; height: 100%; }
.cz-spin{ position: absolute; left: -5px; top: -5px; width: 340px; height: 340px; animation: cz-spin 40s linear infinite; }
.cz-spin img{ display: block; width: 100%; height: 100%; }
@keyframes cz-spin{ to{ transform: rotate(1turn); } }
.coaster-world .cz-spin:not(.is-near),
.coaster-world .cz-float:not(.is-near),
.coaster-world .cz-end:not(.is-near),
.coaster-world .cz-cloud:not(.is-near),
.coaster-world :is(.cz-gate, .cz-end):not(.is-near) .cz-bulbs svg{ animation: none; }
.cz-sky{ left: 0; top: 0; will-change: transform; }
.cz-cloud{ position: absolute; height: auto; max-width: none; pointer-events: none; animation: cz-drift var(--t, 60s) ease-in-out var(--d, 0s) infinite alternate; }
@keyframes cz-drift{ to{ translate: var(--dx, 140px) 0; } }
.cz-tent{ width: 270px; height: 220px; }
.cz-flags{ width: 320px; height: 260px; }

.cz-fx{ position: absolute; left: 0; top: 0; pointer-events: none; }
.cz-fx--click{ right: 0; bottom: 0; z-index: 2; }
.cz-fx i{ position: absolute; display: none; background-repeat: no-repeat; image-rendering: pixelated; will-change: transform; }
.coaster:not(.is-ride) .cz-fx--click{ display: none; }

@media (max-width: 760px){
  .cz-board-in{ grid-template-columns: minmax(0, 1fr); align-content: start; gap: 26px; }
  .cz-ticket{ grid-template-columns: 40px minmax(0, 1fr); }
  .cz-pics{ height: 240px; container-type: size; }
  .cz-slot:nth-child(n){ inset: auto; left: 50%; top: min(50%, 140px); width: auto; height: min(90cqh, 250px); aspect-ratio: 4 / 5; }
  .cz-slot:nth-child(1){ z-index: 3; translate: -50% -50%; rotate: -3deg; }
  .cz-slot:nth-child(2){ z-index: 2; translate: -41% -54%; rotate: 5deg; }
  .cz-slot:nth-child(3){ z-index: 1; translate: -58% -47%; rotate: -9deg; }
  .cz-polaroid{ height: 100%; display: flex; flex-direction: column; padding: 8px 8px 22px; }
  .cz-polaroid .ph{ flex: 1; min-height: 0; aspect-ratio: auto; }
  .cz-polaroid::before{ top: -9px; width: 54px; height: 16px; margin-left: -27px; }
  .cz-slot:not(:first-child) .cz-polaroid::before{ display: none; }
  .coaster.is-ride .cz-board-in{ display: flex; flex-direction: column; padding-top: 84px; }
  .coaster.is-ride .cz-pics{ flex: 1 1 0; height: auto; min-height: 0; }
}
@container (max-height: 110px){
  .cz-slot{ display: none; }
}

.job{ padding: clamp(20px, 3vw, 32px); }
.job-top{ display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.job-when{ font-family: "JetBrains Mono", monospace; font-size: .74rem; color: var(--ink-faint); }
.now{ font-family: "JetBrains Mono", monospace; font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--mint); color: var(--mint); }
.job h3{ font-size: clamp(1.15rem,1.05rem + .5vw,1.4rem); margin-block: 10px 4px; }
.job .where{ font-size: .9rem; color: var(--ink-soft); font-weight: 600; }
.job p{ color: var(--ink-soft); font-size: .92rem; margin-block: 14px; max-width: 58ch; }
.wins{ list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.wins li{ font-size: .91rem; position: relative; padding-left: 22px; color: var(--ink-soft); }
.wins li::before{ content:"→"; position: absolute; left: 0; color: var(--accent, var(--pink)); }

#page-contact{ position: relative; overflow-x: clip; }
#page-contact > .c3{ position: relative; z-index: 1; }
#contact-fx{ position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fx-shape{ position: absolute; top: 0; left: 0; pointer-events: none; opacity: 0; }
.fx-circle{ border-radius: 50%; }
.fx-square{ border-radius: 3px; }
.fx-triangle{ clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.fx-diamond{ clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.fx-pentagon{ clip-path: var(--pentagon); }
.fx-star{ clip-path: var(--star); }

.c3{ padding-block: clamp(28px, 5vw, 64px) var(--v); }
.c3-head{ position: relative; isolation: isolate; }
.c3-title{ position: relative; margin-top: 16px; max-width: 13ch; font-size: clamp(2.6rem, 1.5rem + 4.6vw, 6rem); line-height: 1.16; letter-spacing: -.04em; }
.c3-head .status{ margin-top: 22px; border: 3px solid #fff; rotate: -3deg; box-shadow: 0 8px 16px -10px rgba(19,17,26,.45); }
.c3-grid{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: clamp(30px, 5vw, 60px); }
.c3-card{ position: relative; padding: clamp(22px, 4vw, 40px); border-radius: 22px; border: 1px solid var(--hair); background: var(--card); }
.c3-side{ display: grid; gap: 14px; }
.c3-side h2 + *{ margin-bottom: 26px; }

.c3-peel{ position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.c3-s{
  position: absolute; left: var(--l); top: var(--t); width: var(--s); aspect-ratio: 1; rotate: var(--r);
  pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  filter: drop-shadow(0 6px 7px rgba(19,17,26,.22)); transition: scale .2s var(--ease), filter .2s;
}
.c3-s::before, .c3-s::after{ content: ""; position: absolute; clip-path: var(--sh); }
.c3-s::before{ inset: 0; background: #fff; }
.c3-s::after{ inset: 10%; background: color-mix(in srgb, var(--c) 80%, transparent); }
.c3-s:hover{ scale: 1.05; }
.c3-s.is-held{ cursor: grabbing; scale: 1.1; filter: drop-shadow(0 16px 14px rgba(19,17,26,.28)); }
@media (prefers-reduced-motion: no-preference){
  .c3-s{ animation: c3-float var(--fd, 6s) ease-in-out var(--fdl, 0s) infinite alternate; }
  .c3-s.is-held{ animation-play-state: paused; }
}
@keyframes c3-float{ from{ transform: translateY(-5px) rotate(-2deg); } to{ transform: translateY(5px) rotate(2deg); } }

.field{ display: grid; gap: 7px; margin-bottom: 18px; }
.field label{ font-family: "JetBrains Mono", monospace; font-size: .76rem; color: var(--ink-soft); }
.field .opt{ color: var(--ink-faint); }
.field input, .field textarea{
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--r);
  border: 1px solid var(--hair); background: var(--card); color: var(--ink);
  font: inherit; font-size: 1rem; transition: border-color .2s, box-shadow .2s;
}
.field textarea{ min-height: 150px; resize: vertical; }
.field :is(input, textarea)::placeholder{ color: color-mix(in srgb, var(--ink-faint) 70%, transparent); }
.field :is(input, textarea):hover{ border-color: rgba(19,17,26,.3); }
.field :is(input, textarea):focus-visible{ outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); }
.field [aria-invalid="true"]{ border-color: var(--pink); }
.err{ font-size: .84rem; color: var(--pink-ink); }
.err:empty{ display: none; }
.two{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-foot{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 6px; }
.form-note{ font-family: "JetBrains Mono", monospace; font-size: .8rem; color: var(--ink-faint); }
.form-status{ flex-basis: 100%; font-size: .88rem; font-weight: 600; color: var(--pink-ink); }
.form-status:empty{ display: none; }
.honey{ display: none; }

.lines{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.line{
  display: grid; gap: 4px; align-content: start; padding: 14px 16px 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--c) 14%, var(--card)); rotate: var(--tilt);
  transition: rotate .3s var(--ease), translate .3s var(--ease), box-shadow .3s;
}
.line:hover{ rotate: 0deg; translate: 0 -3px; box-shadow: 0 12px 20px -14px rgba(19,17,26,.45); }
.line dt{ display: flex; align-items: center; gap: 8px; font-family: "JetBrains Mono", monospace; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.line dt::before{ content: ""; flex: none; width: 11px; height: 11px; background: color-mix(in srgb, var(--c) 80%, transparent); clip-path: var(--sh); }
.line dd{ margin: 0; font-weight: 600; font-size: .98rem; overflow-wrap: anywhere; }
.line a{ text-decoration: none; }
.line a:hover{ color: var(--pink-ink); }
.line.wide{ grid-column: 1 / -1; }
.k-pink{ --c: var(--pink); --sh: var(--circle); --tilt: -1.2deg; }
.k-mint{ --c: var(--mint); --sh: var(--hexagon); --tilt: 1deg; }
.k-diamond{ --c: var(--yellow); --sh: var(--diamond); --tilt: -.6deg; }
.k-blue{ --c: var(--blue); --sh: var(--square); --tilt: -.8deg; }
.k-yellow{ --c: var(--yellow); --sh: var(--triangle); --tilt: 1.4deg; }
.c3-mail{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }

.faq{ display: grid; gap: 12px; }
.faq details{ padding-inline: 18px; border-radius: 18px; border: 1px solid var(--hair); background: var(--card); --q: var(--pink); }
.faq details:nth-child(2){ --q: var(--blue); }
.faq details:nth-child(3){ --q: var(--mint); }
.faq summary{ cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 16px; font-weight: 700; font-size: .98rem; }
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: "+"; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  border: 3px solid #fff; background: color-mix(in srgb, var(--q) 80%, transparent); color: #fff; box-shadow: 0 4px 8px -4px rgba(19,17,26,.45);
  font-family: "JetBrains Mono", monospace; font-size: 1.1rem; line-height: 1; transition: rotate .3s var(--ease);
}
.faq details[open] summary::after{ rotate: 45deg; }
.faq p{ padding-bottom: 18px; max-width: 52ch; color: var(--ink-soft); font-size: .93rem; }

.sent{ display: grid; gap: 14px; justify-items: start; }
.sent h2{ font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); }
.sent h2:focus{ outline: none; }
.sent p{ color: var(--ink-soft); max-width: 46ch; }
.c3-sent{
  position: absolute; right: clamp(14px, 3vw, 30px); top: -22px; width: clamp(92px, 12vw, 116px); aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 50%; border: 5px solid #fff; background: var(--pink); color: #fff; rotate: -10deg;
  box-shadow: 0 12px 20px -12px rgba(19,17,26,.55); font: 800 clamp(1.2rem, 1rem + 1vw, 1.55rem)/1 var(--display);
}
.c3-sent.is-no{ background: var(--yellow); color: var(--ink); }

@media (max-width: 900px){ .c3-grid{ grid-template-columns: 1fr; } }
@media (max-width: 760px){
  .c3-head{ padding-top: 124px; text-align: center; }
  .c3-title{ margin-inline: auto; }
  .c3-s{ left: var(--ml); top: calc(var(--mt) + 20px); width: 40px; }
  .lines{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){ .two{ grid-template-columns: 1fr; } }

.site-foot{
  position: relative; margin-top: var(--floor); background: var(--shell);
  padding-block: 44px calc(26px + env(safe-area-inset-bottom, 0px));
}
.foot-wave{ position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); width: 100%; height: var(--floor); display: block; pointer-events: none; }
.foot-top{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 28px 48px; padding-bottom: 30px; }
.foot-id{ display: grid; gap: 6px; font-family: "JetBrains Mono", monospace; font-size: .8rem; }
.foot-mark{ display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: .86rem; }
.foot-mark .morph{ width: 18px; height: 18px; flex: none; margin-inline: 1px; }
.foot-mark .hl-name{ display: inline-block; }
.foot-id > :not(.foot-mark){ margin-left: 32px; }
.foot-tag{ color: var(--ink-faint); }
.foot-mail{ justify-self: start; --c: var(--mint); color: var(--ink); text-decoration: none; padding-block: 10px; margin-block: -6px; }
.foot-links{ display: flex; flex-wrap: wrap; gap: 4px; margin-right: -12px; }
.foot-bottom{
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px;
  padding-top: 22px; border-top: 1px solid var(--hair);
  font-family: "JetBrains Mono", monospace; font-size: .74rem; color: var(--ink-faint);
}
.foot-psalm{ --c: var(--yellow); color: var(--ink-soft); text-decoration: none; padding-block: 12px; margin-block: -12px; }
.foot-psalm:hover{ color: var(--ink); }
.foot-social{ display: flex; flex-wrap: wrap; gap: 6px; }
.foot-social .ghost{ height: 40px; padding-inline: 14px; color: var(--ink-soft); }
.foot-social .ghost:hover{ color: var(--ink); }
@media (min-width: 761px) and (max-width: 1320px){
  .site-foot{ padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 760px){
  .foot-top{ flex-direction: column; gap: 22px; }
  .foot-id{ align-self: stretch; justify-items: center; text-align: center; }
  .foot-id > :not(.foot-mark){ margin-left: 0; }
  .foot-mail{ justify-self: center; }
  .foot-links{ display: grid; grid-template-columns: 1fr 1fr; justify-items: center; gap: 2px 12px; width: 100%; margin: 0; }
  .foot-links a{ padding: 10px; font: 800 1.35rem/1.15 var(--display); letter-spacing: -.03em; }
  .foot-bottom{ flex-direction: column; align-items: flex-start; gap: 18px; }
  .foot-social{ order: -1; }
  .foot-copy{ order: 1; }
  .foot-psalm, .foot-copy{ align-self: center; text-align: center; }
}

.lightbox{
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: none; overflow: hidden;
  place-items: center; touch-action: pinch-zoom;
}
.lightbox[open]{ display: grid; animation: lb-in .4s cubic-bezier(.22,1,.36,1); }
.lightbox::backdrop{
  background: radial-gradient(rgba(245,243,238,.08) 1px, transparent 1.2px) 0 0 / 4px 4px, rgba(19,17,26,.86);
  animation: lb-fade .3s ease;
}
@keyframes lb-in{ from{ opacity: 0; transform: scale(.94); } }
@keyframes lb-fade{ from{ opacity: 0; } }
.lb-card{
  position: relative; margin: 0; width: fit-content; padding: 14px 14px 16px;
  background: var(--card); border-radius: 8px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7);
}
.lb-card::before{
  content:""; position: absolute; z-index: 1; left: 50%; top: -14px; width: 110px; height: 28px; margin-left: -55px;
  background: color-mix(in srgb, var(--accent-2, var(--yellow)) 60%, transparent); rotate: -3deg;
}
.lb-media img, .lb-media .ph{ display: block; border-radius: 4px; }
.lb-media img{ max-width: min(84vw, 960px); max-height: 74svh; width: auto; height: auto; }
.lb-media .ph{ width: min(76vw, 59svh, 540px); aspect-ratio: 4/5; }
.lb-card figcaption{
  width: 0; min-width: 100%; margin-top: 14px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
}
.lb-cap{ font: 700 1.05rem/1.25 var(--display); letter-spacing: -.02em; }
.lb-count{ font: 500 .72rem/1 "JetBrains Mono", monospace; letter-spacing: .1em; color: var(--ink-faint); white-space: nowrap; }
.lb-btn{ position: absolute; height: 46px; min-width: 46px; font-size: 1rem; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--pink); }
.lb-btn:hover{ background: var(--yellow); }
.lb-prev, .lb-next{ top: 50%; translate: 0 -50%; }
.lb-prev{ left: max(16px, 3vw); }
.lb-next{ right: max(16px, 3vw); }
.lb-close{ top: max(16px, 3vh); right: max(16px, 3vw); }
.lb-single .lb-prev, .lb-single .lb-next{ display: none; }
@media (max-width: 760px){
  .lb-prev, .lb-next{ top: auto; bottom: max(20px, env(safe-area-inset-bottom)); translate: none; }
  .lb-prev{ left: calc(50% - 62px); }
  .lb-next{ right: calc(50% - 62px); }
  .lb-media .ph{ width: min(80vw, 52svh); }
  .lb-media img{ max-height: 64svh; }
}

#to-top{
  position: fixed; left: calc(22px + env(safe-area-inset-left,0px)); bottom: calc(22px + env(safe-area-inset-bottom,0px));
  z-index: 55; font-size: 1rem; line-height: 1;
  transform: translateY(140%); opacity: 0; pointer-events: none;
  transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .25s, border-color .2s, background .2s;
}
#to-top.show{ transform: translateY(0); opacity: 1; pointer-events: auto; }
.top-mark{ position: absolute; left: 0; top: 0; width: 1px; height: 60vh; visibility: hidden; pointer-events: none; }

@supports not selector(:popover-open){ .sound{ display: none; } }
.sound-btn{
  position: fixed; z-index: 55; right: calc(22px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 46px; height: 46px; padding: 0; overflow: hidden; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--hair); border-radius: 50%; background: var(--card); color: var(--ink);
  box-shadow: 0 12px 26px -14px rgba(19,17,26,.5);
  transition: transform .2s, border-color .2s, background-color .3s, color .3s;
}
:is(.sound-btn, .sound-mute)::before{
  content: ""; position: absolute; left: var(--fx, 50%); top: var(--fy, 50%); width: 230%; aspect-ratio: 1;
  border-radius: 50%; background: var(--pink); translate: -50% -50%; scale: 0;
  transition: scale .4s cubic-bezier(.22,1,.36,1);
}
:is(.sound-btn, .sound-mute):focus-visible::before{ scale: 1; }
:is(.sound-btn, .sound-mute):focus-visible{ color: var(--on-accent); }
@media (hover: hover){
  :is(.sound-btn, .sound-mute):hover::before{ scale: 1; }
  :is(.sound-btn, .sound-mute):hover{ color: var(--on-accent); }
  .sound-btn:hover{ border-color: var(--ink); }
}
:is(.sound-btn, .sound-mute):active{ transform: scale(.93); }
.sound:has(.sound-menu:popover-open) .sound-btn{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sound-ico{
  grid-area: 1 / 1; position: relative; z-index: 1; display: grid;
  transition: opacity .2s, scale .45s cubic-bezier(.34,1.56,.64,1), rotate .45s cubic-bezier(.34,1.56,.64,1);
}
.sound-ico svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sound-shut{ opacity: 0; scale: .3; rotate: 90deg; }
.sound:has(.sound-menu:popover-open) .sound-note{ opacity: 0; scale: .3; rotate: -120deg; }
.sound:has(.sound-menu:popover-open) .sound-shut{ opacity: 1; scale: 1; rotate: none; }
.sound-x, .sound-cut{ stroke-dasharray: 1 1.1; stroke-dashoffset: 1.05; transition: stroke-dashoffset .3s cubic-bezier(.65,0,.35,1); }
.sound-cut{ stroke: #000; stroke-width: 6; }
.sound:not(:has(.sound-menu:popover-open)) .is-off :is(.sound-x, .sound-cut){ stroke-dashoffset: 0; transition-delay: .3s; }

.sound-menu{
  --accent: var(--yellow); --drop: color-mix(in srgb, var(--accent) 80%, transparent);
  position: fixed; inset: auto; margin: 0; overflow: visible;
  right: calc(22px + env(safe-area-inset-right, 0px)); bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  width: min(300px, calc(100vw - 44px)); padding: 18px 20px 20px;
  color: var(--ink); background: color-mix(in srgb, var(--accent) 12%, var(--paper));
  border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: 7px 7px 0 0 var(--drop);
  transform-origin: calc(100% - 23px) calc(100% + 39px);
  transition: opacity .16s ease-in .04s, scale .2s cubic-bezier(.55,0,1,.45), box-shadow .14s, display .2s allow-discrete, overlay .2s allow-discrete;
}
.sound-menu:popover-open{ transition: opacity .15s, scale .45s cubic-bezier(.34,1.56,.64,1), box-shadow .4s cubic-bezier(.34,1.56,.64,1) .08s, display .45s allow-discrete, overlay .45s allow-discrete; }
.sound-menu:not(:popover-open){ opacity: 0; scale: .4; box-shadow: 0 0 0 0 var(--drop); }
@starting-style{ .sound-menu:popover-open{ opacity: 0; scale: .4; box-shadow: 0 0 0 0 var(--drop); } }
@media (hover: none) and (pointer: coarse) and (max-width: 760px){
  @supports (-moz-appearance: none) or (-webkit-touch-callout: none){
    #to-top{ bottom: auto; top: calc(100svh - 22px - 38px - env(safe-area-inset-bottom, 0px)); }
    .sound-btn{ bottom: auto; top: calc(100svh - 18px - 46px - env(safe-area-inset-bottom, 0px)); }
    .sound-menu{ bottom: calc(80px + env(safe-area-inset-bottom, 0px) + 100dvh - 100svh); }
    #drawer{ bottom: auto; height: 100svh; }
  }
}
.sound-menu::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .07;
  background: radial-gradient(var(--ink) 1.2px, transparent 1.5px) 0 0 / 11px 11px;
}
.sound-menu > *{ position: relative; }
.sound-head{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.sound-head > div{ display: flex; flex-direction: column; gap: 7px; }
.sound-head .label{ display: block; line-height: 1; text-box: trim-both cap alphabetic; }
.sound-title{ font-size: 1.4rem; line-height: 1; white-space: nowrap; text-box: trim-both cap alphabetic; }
.sound-eq{
  display: grid; place-items: end center; width: 44px; aspect-ratio: 1; padding-bottom: 12px;
  border: 2px solid var(--ink); border-radius: 30%;
  background: linear-gradient(160deg, rgba(255,255,255,.22), transparent 55%), var(--blue);
}
.sound-eq b{ display: flex; align-items: flex-end; gap: 3px; height: 18px; transform-origin: 50% 100%; transition: scale .3s var(--ease); }
.sound-eq.is-on b{ scale: 1 calc(.4 + .6 * var(--amp, .6)); }
.sound-eq i{ width: 4px; height: 100%; border-radius: 2px; background: var(--on-accent); transform-origin: 50% 100%; scale: 1 .14; transition: scale .3s var(--ease); }
.sound-eq.is-on i{ scale: 1 var(--h); }
.sound-eq i:nth-child(1){ --h: .45; --beat: eq-kick 2s; }
.sound-eq i:nth-child(2){ --h: .9; --beat: eq-snare 2s; }
.sound-eq i:nth-child(3){ --h: .9; --beat: eq-tune 4s; }
.sound-eq i:nth-child(4){ --h: .5; --beat: eq-hat 1s; }
@media (prefers-reduced-motion: no-preference){
  .sound-eq.is-on i{ animation: var(--beat) linear infinite; }
}
@keyframes eq-kick{
  0%, 100%{ scale: 1 1; } 9%{ scale: 1 .5; } 21%{ scale: 1 .28; } 23.5%{ scale: 1 .3; }
  25%{ scale: 1 .82; } 34%{ scale: 1 .45; } 46%{ scale: 1 .26; } 48.5%{ scale: 1 .3; }
  50%{ scale: 1 1; } 59%{ scale: 1 .5; } 71%{ scale: 1 .28; } 73.5%{ scale: 1 .3; }
  75%{ scale: 1 .78; } 84%{ scale: 1 .45; } 96%{ scale: 1 .26; }
}
@keyframes eq-snare{
  0%, 100%{ scale: 1 .38; } 9%{ scale: 1 .52; } 15%{ scale: 1 .34; } 23.5%{ scale: 1 .4; }
  25%{ scale: 1 1; } 35%{ scale: 1 .58; } 47%{ scale: 1 .4; } 59%{ scale: 1 .6; } 65%{ scale: 1 .36; } 73.5%{ scale: 1 .42; }
  75%{ scale: 1 .96; } 86%{ scale: 1 .55; }
}
@keyframes eq-tune{
  0%, 100%{ scale: 1 .66; } 6%{ scale: 1 .84; } 12.5%{ scale: 1 .52; } 19%{ scale: 1 .9; } 25%{ scale: 1 .58; } 31%{ scale: 1 .74; }
  37.5%{ scale: 1 .44; } 44%{ scale: 1 .8; } 50%{ scale: 1 1; } 56%{ scale: 1 .62; } 62.5%{ scale: 1 .86; }
  69%{ scale: 1 .5; } 75%{ scale: 1 .7; } 81%{ scale: 1 .95; } 87.5%{ scale: 1 .58; } 94%{ scale: 1 .76; }
}
@keyframes eq-hat{
  0%, 100%{ scale: 1 .62; } 12%{ scale: 1 .34; } 23.5%{ scale: 1 .3; } 25%{ scale: 1 .7; } 37%{ scale: 1 .36; } 48.5%{ scale: 1 .3; }
  50%{ scale: 1 .66; } 62%{ scale: 1 .35; } 73.5%{ scale: 1 .3; } 75%{ scale: 1 .74; } 87%{ scale: 1 .38; } 98.5%{ scale: 1 .3; }
}
.sound-mute{
  position: relative; overflow: hidden; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--card); color: var(--ink);
  transition: transform .2s, background-color .3s, color .3s;
}
.sound-mute[aria-pressed="true"]{ background: var(--ink); color: var(--paper); }
.sound-mute svg{ position: relative; z-index: 1; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sound-waves, .sound-cross{ transform-box: view-box; transform-origin: 17px 12px; transition: opacity .2s, scale .35s cubic-bezier(.34,1.56,.64,1); }
.sound-cross, .sound-mute[aria-pressed="true"] .sound-waves{ opacity: 0; scale: .3; }
.sound-mute[aria-pressed="true"] .sound-cross{ opacity: 1; scale: 1; }
.sound-row{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 4px 10px; margin-top: 16px; }
.sound-n{ font: 500 .7rem "JetBrains Mono", monospace; letter-spacing: .1em; color: var(--ink-faint); }
.sound-row label{ font: 800 1.02rem/1.2 var(--display); letter-spacing: -.02em; }
.sound-val{ font: 700 .8rem "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }
.sound-song{ margin-top: 20px; }
.sound-song .label{ display: flex; margin-bottom: 8px; }
.sound-song select{
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: 44px; padding: 0 38px 0 12px;
  font: 800 .95rem/1.2 var(--display); letter-spacing: -.01em; color: var(--ink); text-overflow: ellipsis; cursor: pointer;
  border: 2px solid var(--ink); border-radius: 10px;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313111A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center / 18px;
  transition: box-shadow .2s var(--ease), translate .2s var(--ease);
}
@media (hover: hover){ .sound-song select:hover{ box-shadow: 3px 3px 0 var(--ink); translate: -1px -1px; } }
.sound-song select:focus-visible{ outline-offset: 2px; }
.sound-credit{ margin-top: 8px; font-size: .78rem; line-height: 1.4; color: var(--ink-soft); }
.sound-credit:empty{ display: none; }
.sound-song option{ background: color-mix(in srgb, var(--c, var(--pink)) 13%, var(--card)); color: var(--ink); }
@supports (appearance: base-select){
  .sound-song select, .sound-song select::picker(select){ appearance: base-select; }
  .sound-song select{ display: flex; align-items: center; }
  .sound-song select::picker-icon{ display: none; }
  .sound-song selectedcontent{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sound-song :is(selectedcontent, option)::before{
    content: ""; display: inline-block; flex: none; width: 10px; height: 10px; margin-right: 9px; vertical-align: -1px;
    border: 2px solid var(--ink); border-radius: 50%; background: var(--c, var(--pink));
  }
  .sound-song select::picker(select){
    box-sizing: border-box; width: anchor-size(width); margin-block: 6px; padding: 6px;
    border: 2px solid var(--ink); border-radius: 12px; background: var(--card);
    box-shadow: 5px 5px 0 0 color-mix(in srgb, var(--yellow) 80%, transparent);
  }
  .sound-song option{ align-items: center; gap: 0; padding: 9px 10px; border-radius: 8px; white-space: normal; font: 800 .9rem/1.25 var(--display); letter-spacing: -.01em; }
  .sound-song option + option{ margin-top: 4px; }
  .sound-song option::checkmark{ order: 1; margin-left: auto; padding-left: 8px; font-weight: 800; }
  .sound-song option:hover{ background: color-mix(in srgb, var(--c) 24%, var(--card)); }
  .sound-song option:checked{ background: color-mix(in srgb, var(--c) 38%, var(--card)); }
  .sound-song option:focus-visible{ outline-offset: -2px; }
}
@property --lvl{ syntax: "<percentage>"; inherits: true; initial-value: 0%; }
.sound-row input{
  grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0; background: none; cursor: pointer;
  --bar: linear-gradient(rgba(255,255,255,.3) 0 3px, transparent 0), repeating-linear-gradient(90deg, transparent 0 calc(5% - 2px), var(--card) 0 5%), linear-gradient(90deg, var(--c) var(--lvl), var(--card) 0);
}
.sound-row input:focus-visible{ outline-offset: 2px; }
.sound-row input::-webkit-slider-runnable-track{ height: 12px; border: 2px solid var(--ink); border-radius: 5px; background: var(--bar); }
.sound-row input::-moz-range-track{ box-sizing: border-box; height: 16px; border: 2px solid var(--ink); border-radius: 5px; background: var(--bar); }
.sound-row input::-webkit-slider-thumb{ -webkit-appearance: none; box-sizing: border-box; width: 12px; height: 26px; margin-top: -7px; border: 2px solid var(--ink); border-radius: 4px; background: var(--card); transition: scale .2s var(--ease); }
.sound-row input::-moz-range-thumb{ box-sizing: border-box; width: 12px; height: 26px; border: 2px solid var(--ink); border-radius: 4px; background: var(--card); transition: scale .2s var(--ease); }
.sound-row input:active::-webkit-slider-thumb{ scale: 1.15; }
.sound-row input:active::-moz-range-thumb{ scale: 1.15; }
@media (pointer: coarse){
  .sound-row input{ height: 44px; }
  .sound-row input::-webkit-slider-thumb{ width: 16px; height: 32px; margin-top: -10px; }
  .sound-row input::-moz-range-thumb{ width: 16px; height: 32px; }
}
@media (prefers-reduced-motion: no-preference){
  .sound-menu:popover-open :is(.sound-row, .sound-song){ animation: sound-in .5s cubic-bezier(.34,1.56,.64,1) calc(.1s + var(--i, 2) * .07s) backwards; }
  .sound-menu:popover-open input{ animation: sound-fill .45s steps(var(--cells, 10)) calc(.24s + var(--i) * .07s) backwards; }
}
@keyframes sound-in{ from{ opacity: 0; translate: 0 10px; } }
@keyframes sound-fill{ from{ --lvl: 0%; } }

.w{ display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .08em .16em; margin: -.1em -.08em -.16em; }
.w > span{ display: inline-block; }

#loader, .embed-loader{
  display: grid; place-items: center;
  color: var(--wipe-fg);
  transform-origin: bottom;
  transition: transform .6s cubic-bezier(1,.885,.32,1) .1s;
}
#loader{ position: fixed; inset: 0; z-index: 100; animation: loader-bail 0s 4s forwards; }
.embed-loader{ position: absolute; inset: 0; z-index: 3; }
:is(#loader, .embed-loader)::before{
  content:""; position: absolute; left: 0; top: -75%; width: 100%; height: 75%;
  background: var(--ink); clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
}
:is(#loader, .embed-loader).out{ transform: scaleY(0); }
.loader-ring{ position: relative; width: 0; height: 0; animation: loader-spin 5s linear infinite; transition: opacity .3s; }
:is(#loader, .embed-loader).out .loader-ring{ opacity: 0; }
.loader-ring span{
  position: absolute; left: -.5em; top: -72px; width: 1em; text-align: center;
  font: 800 19px/1 "Bricolage Loader", system-ui, sans-serif;
  transform-origin: 50% 72px; rotate: calc(var(--i) * 1turn / 15);
  animation: loader-pop .25s ease-in-out calc(var(--i) * -.0625s) infinite alternate;
}
@keyframes loader-spin{ to{ transform: rotate(1turn); } }
@keyframes loader-pop{ to{ translate: 0 10px; } }
@keyframes loader-bail{ to{ visibility: hidden; } }

#wipe{ position: fixed; inset: 0; z-index: 99; overflow: hidden; visibility: hidden; pointer-events: none; }
#wipe.rev{ transform: scaleX(-1); }
#wipe i{
  position: absolute; top: 0; bottom: 0; left: -15vw; width: 130vw; pointer-events: auto;
  clip-path: polygon(15vw 0, 100% 0, calc(100% - 15vw) 100%, 0 100%);
  background: var(--ink);
}

:root{ --wipe: var(--pink); --wipe-fg: var(--on-accent); }
:is(:root, .ld)[data-wipe="0"]{ --wipe: #F5B800; --wipe-fg: var(--ink); }
:is(:root, .ld)[data-wipe="1"]{ --wipe: var(--pink); --wipe-fg: var(--on-accent); }
:is(:root, .ld)[data-wipe="2"]{ --wipe: var(--mint); --wipe-fg: var(--on-accent); }
:is(:root, .ld)[data-wipe="3"]{ --wipe: var(--blue); --wipe-fg: var(--on-accent); }
:is(:root, .ld)[data-wipe="4"]{ --wipe: #F2662A; --wipe-fg: var(--on-accent); }

#loader, .embed-loader, #wipe i + i, .ld-wipe i + i{
  background: var(--wipe) radial-gradient(rgba(19,17,26,.16) 1px, transparent 1.15px) 0 0 / 4px 4px;
}

@media (max-width: 1040px){
  .nav-links{ display: none; }
  .burger{ display: inline-flex; }
  .band{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .pr-step{ align-items: end; }
  .pr-step::before{
    background:
      radial-gradient(rgba(252,251,248,.07) 1px, transparent 1.3px) 0 0 / 6px 6px,
      linear-gradient(0deg, rgba(19,17,26,.92) 0%, rgba(19,17,26,.66) 55%, rgba(19,17,26,.3) 100%);
  }
  .pr-num{ top: 16px; bottom: auto; }
  .pr-intro{ min-height: 0; }
  .pr-steps{
    display: flex; gap: 12px; overflow-x: auto; padding-inline: var(--gut);
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .pr-steps::-webkit-scrollbar{ display: none; }
  .pr-step{
    flex: 0 0 86%; min-height: min(78svh, 640px); border-radius: var(--r-lg);
    scroll-snap-align: start; scroll-snap-stop: always;
  }
  .pr-nav{ display: flex; align-items: center; gap: 10px; padding-block: 18px var(--v); }
  .pr-nav .sc-count{ margin-right: auto; }
  .pr-nav .sc-btn[aria-disabled="true"]{ opacity: .35; pointer-events: none; }
  .sec-head{ grid-template-columns: 1fr; align-items: start; }
  .gallery{ grid-template-columns: 1fr; }
  .tile:nth-child(n){ grid-column: auto; }
  #all-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  #all-cards .card-body{ padding: 12px; gap: 7px; }
  #all-cards .card-body h4{ font-size: .95rem; overflow-wrap: anywhere; }
  #all-cards .card-body p{ font-size: .8rem; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  #all-cards .tags{ gap: 5px; }
  #all-cards .tag{ font-size: .62rem; padding: 3px 7px; }
  #all-cards .card-body .label{ font-size: .62rem; letter-spacing: .1em; }
  .sk-tabs{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .sk-panel{ grid-template-columns: minmax(0,1fr); }
  .sk-avg{ margin-top: 0; }
  .sk-stats{ align-content: start; }
}
@media (max-width: 560px){
  .cards{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}