*{box-sizing:border-box}body,p{margin:0}body{background:#f5f6f1;font-family:Inter,Arial,sans-serif}html[data-theme=dark] body{background:#131b20}a{color:inherit;text-decoration:none}a[href],button{cursor:pointer}main{width:1440px;margin:auto;zoom:var(--scale,1)}article{min-height:var(--height)}body[data-page=index] article>div{height:3536px}article[data-mode=dark],html[data-theme=dark] article[data-mode=light]{display:none}html[data-theme=dark] article[data-mode=dark]{display:block}.theme-switch{border:0;border-radius:24px;background:#e8ece6;display:flex;padding:5px 6px;width:153px;height:38px;cursor:pointer;color:#596d65}.theme-switch span{flex:1;display:grid;place-items:center;font:700 10px Inter,Arial}.theme-switch .active{background:white;color:#527d60;border-radius:16px}.theme-switch[data-current=dark]{background:#273940;color:#a9b9b5}.theme-switch[data-current=dark] .active{background:#d6ed9b;color:#1c2527}a:focus-visible,button:focus-visible{outline:3px solid #718d61;outline-offset:3px}.wave{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:100;background:var(--surface)}.wave article{display:block!important;width:1440px;zoom:var(--scale);position:absolute;top:var(--offset);left:50%;transform:translateX(-50%)}.hit{position:absolute;z-index:2;border-radius:8px}


@font-face {
  font-family: "Portfolio Button Mono";
  src: url("assets/master-atkinson-mono.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
.back-to-top {
  position: fixed;
  right: 60px;
  bottom: 60px;
  z-index: 10;
  width: 91px;
  height: 35px;
  padding: 0 9px;
  border: 0;
  border-radius: 12px;
  background: #f1f4ea;
  color: #3a4c52;
  text-align: left;
  white-space: pre;
  font: 700 14px/normal "Portfolio Button Mono", monospace;
}
html[data-theme="dark"] .back-to-top {
  background: #1d2a30;
  color: #d6ed9b;
}
/* Native cursor images keep the hotspot aligned with clicks. */
@media (hover: hover) and (pointer: fine) {
  html {
    --portfolio-arrow: url("assets/cursors/arrow-light.svg") 3 3, default;
    --portfolio-hand: url("assets/cursors/hand-light.svg") 9 3, pointer;
    cursor: var(--portfolio-arrow);
  }
  html[data-theme="dark"] {
    --portfolio-arrow: url("assets/cursors/arrow-dark.svg") 3 3, default;
    --portfolio-hand: url("assets/cursors/hand-dark.svg") 9 3, pointer;
  }
  :where(p, h1, h2, h3, dt, dd, input, textarea, [contenteditable="true"]) { cursor: text; }
  html :is(a[href], button:enabled, [role="button"], a[href] *, button:enabled *) { cursor: var(--portfolio-hand); }
}