[data-site-sidebar] {
  display: none;
}

@media screen and (min-width: 1020px) {
  [data-site-sidebar] {
    display: block;
    min-width: var(--sidebar-width);
    width: var(--sidebar-width);
  }

  .layout.sidebar-collapsed [data-site-sidebar] {
    min-width: 52px;
    width: 52px;
  }
}

.sidebar-section .sidebar-nav-links .sidebar-project-link{
  margin-bottom:2px;
}
.sidebar-section .sidebar-nav-links .sidebar-project-subnav{
  display:flex;
  flex-direction:column;
  gap:1px;
  margin:0 0 6px calc(16px + .5rem);
  padding-left:0;
}
.sidebar-section .sidebar-nav-links .sidebar-project-subnav a{
  color:var(--color-text-muted);
  font-size:.86rem;
  font-weight:400;
  line-height:1.35;
  margin:0;
  padding:3px 0;
}
.sidebar-section .sidebar-nav-links .sidebar-project-subnav a:hover{
  background:var(--color-background-navbar-link-hover);
  color:var(--color-text-emphasized);
}
.sidebar-section .sidebar-nav-links .sidebar-project-subnav a.active{
  background:transparent;
  color:var(--color-text-muted);
  font-weight:700;
  text-decoration:none;
}
.sidebar-section .sidebar-nav-links .sidebar-project-subnav a.active:hover{
  background:var(--color-background-navbar-link-hover);
  color:var(--color-text-emphasized);
}
.sidebar-section .sidebar-nav-links .sidebar-project-subnav a.active::before{
  content:none;
}
.sidebar-project-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
  position: relative;
}
.sidebar-project-header .sidebar-project-link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
  padding-right: 2.25rem;
}
.sidebar-project-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--border-radius);
  transition: color 0.15s;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}
.sidebar-project-toggle:hover {
  color: var(--color-text-emphasized);
  transform: translateY(-50%) !important;
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  transition: color 0.15s !important;
}
.sidebar-project-toggle svg {
  transition: transform 0.2s ease;
}
.sidebar-project-toggle[aria-expanded="true"] svg {
  transform: rotate(90deg);
}
.sidebar-project-subnav {
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
  max-height: 500px;
  opacity: 1;
}
.sidebar-project-subnav.collapsed {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0 !important;
}
.layout.sidebar-collapsed .sidebar .sidebar-project-subnav,
.layout.sidebar-collapsed .sidebar .sidebar-project-toggle {
  display: none;
}

.sidebar-section svg,
.sidebar-section .sidebar-links svg,
.sidebar-section .sidebar-nav-links svg {
  display: inline-block;
  flex-shrink: 0;
  height: 16px;
  width: 16px;
}

.sidebar-collapse-btn {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--color-text-muted);
  cursor: pointer;
  display: none;
  justify-content: center;
  padding: 0.5rem;
}

.sidebar-collapse-btn:hover {
  background: var(--color-background-navbar-link-hover);
  color: var(--color-text-emphasized);
}

.sidebar-section .sidebar-link-button {
  align-items:center;
  background:transparent;
  border:0;
  box-shadow:none;
  color:var(--color-text-muted);
  display:flex;
  font-size:.9rem;
  font-weight:400;
  gap:.5rem;
  justify-content:flex-start;
  line-height:inherit;
  padding:0;
  text-align:left;
  width:100%;
}

.sidebar-section .sidebar-link-button:hover {
  background:transparent;
  color:var(--color-text-emphasized);
}

@media screen and (min-width: 1020px) {
  .sidebar-collapse-btn {
    display: flex;
  }

  .layout {
    transition: grid-template-columns 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .sidebar {
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .layout.sidebar-collapsed {
    grid-template-columns: 52px 1fr;
  }

  .layout.sidebar-collapsed .sidebar {
    min-width: 52px;
    overflow: hidden;
    width: 52px;
  }

  .layout.sidebar-collapsed .sidebar .site-name,
  .layout.sidebar-collapsed .sidebar .sidebar-nav-links a span,
  .layout.sidebar-collapsed .sidebar .sidebar-links a span,
  .layout.sidebar-collapsed .sidebar-section h2,
  .layout.sidebar-collapsed .sidebar .sidebar-links,
  .layout.sidebar-collapsed .sidebar .navbar-button,
  .layout.sidebar-collapsed .sidebar .dropdown,
  .layout.sidebar-collapsed .sidebar .tooltip-container,
  .layout.sidebar-collapsed .sidebar .sidebar-title-link > a,
  .layout.sidebar-collapsed .sidebar .sidebar-project-subnav {
    display: none;
  }

  .layout.sidebar-collapsed .sidebar .sidebar-title-link,
  .layout.sidebar-collapsed .sidebar .sidebar-title-link .flex-align-center {
    align-items: center;
    gap: 0;
    justify-content: center;
    padding: 0;
    width: 52px;
  }

  .layout.sidebar-collapsed .sidebar .sidebar-title-link .flex-align-center {
    flex-direction: column;
  }

  .layout.sidebar-collapsed .sidebar-collapse-btn {
    height: 38px;
    margin: 0;
    padding: 0;
    width: 52px;
  }

  .layout.sidebar-collapsed .sidebar-collapse-btn svg {
    transform: rotate(180deg);
  }

  .layout.sidebar-collapsed .sidebar .sidebar-nav-links {
    align-items: center;
  }

  .layout.sidebar-collapsed .sidebar .sidebar-nav-links a {
    box-sizing: border-box;
    font-size: 0;
    gap: 0;
    height: 38px;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 52px;
  }

  .layout.sidebar-collapsed .sidebar .sidebar-nav-links a svg {
    flex: 0 0 auto;
    margin: 0;
  }

  .layout.sidebar-collapsed .sidebar-section {
    margin: 1.25rem 0;
    padding-bottom: 1.5rem;
  }
}
  :root{
  --gray-0:#fbfbfb;
  --gray-1:#eee;
  --gray-2:#e4e4e7;
  --gray-3:#d4d4d8;
  --gray-4:#c8c8cf;
  --gray-5:#a1a1a8;
  --gray-6:#4e4e55;
  --gray-7:#323239;
  --gray-8:#25252b;
  --gray-9:#1c1c20;
  --gray-10:#1d1d22;
  --gray-11:#16161a;
  --gray-12:#0d0d11;
  --beige-0:#fdf9ee;
  --beige-1:#f6f0df;
  --beige-2:#eee8d5;
  --beige-25:#e5dcbd;
  --beige-3:#ded4b2;
  --beige-4:#c6ba93;
  --color-primary:var(--theme-pink);
  --color-highlighted:var(--yellow);
  --color-text-link:var(--color-primary);
  --color-text-link-hover:var(--color-primary);
  --color-border-blockquote:var(--color-primary);
  --color-border-button-hover:var(--color-primary);
  --color-border-button-secondary-hover:var(--color-primary);
  --font-family:var(--font-sans, "Wise Han Sans SC", sans-serif);
  --font-family-heading:var(--font-serif, "Wise Han Serif SC", serif);
  --font-family-monospace:var(--font-sans, "Wise Han Sans SC", sans-serif);
  --border-radius:12px;
  --box-shadow-card-dark:0 4px 24px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.08);
  --box-shadow-card-light:0 4px 24px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --box-shadow-elevated-light:0 12px 40px rgba(0,0,0,0.08);
  --navbar-height:60px;
  --footer-height:60px;
  --content-width:860px;
  --layout-padding-vertical:1.5rem;
  --layout-padding-horizontal:1.5rem;
  --sidebar-width:260px;
  --post-sidebar-width:260px;
  --main-layout-width:calc(var(--post-sidebar-width) + var(--content-width));
  --font-size:1rem;
  --anchor-padding:0.25rem;
  --h1:2.2rem;
  --h2:1.8rem;
  --h3:1.6rem;
  --h4:1.2rem;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background-color:var(--color-background);
  color:var(--color-text);
  color-scheme:light dark;
  font-family:var(--font-family);
  font-size:16px;
  font-synthesis:none;
  font-weight:400;
  line-height:1.6;
  text-rendering:optimizeLegibility
}
@media (prefers-color-scheme:dark){
  :root:where(:not(.is-light)){
  --box-shadow-elevated:var(--box-shadow-card-dark);
  --box-shadow:var(--box-shadow-card-dark);
  --color-text-button-secondary-hover:var(--color-primary);
  --color-text-button-secondary:var(--gray-0);
  --color-border-button-secondary:var(--gray-7);
  --color-background-button-secondary-hover:hsla(0,0%,100%,.05);
  --color-background-button-secondary:var(--gray-8);
  --color-text-button-hover:var(--color-primary);
  --color-text-button:var(--gray-0);
  --color-border-button:var(--gray-7);
  --color-background-button-hover:hsla(0,0%,100%,.05);
  --color-background-button:var(--gray-8);
  --color-marker:var(--gray-6);
  --color-border-card:var(--gray-7);
  --color-border-hover:var(--gray-5);
  --color-border:var(--gray-7);
  --color-text-navbar-link-hover:var(--gray-0);
  --color-text-navbar-link:var(--gray-1);
  --color-text-heading-muted:var(--gray-3);
  --color-text-muted:var(--gray-5);
  --color-text-emphasized:var(--gray-0);
  --color-text:var(--gray-3);
  --color-background-card:var(--gray-8);
  --color-background-navbar-link-active:var(--gray-7);
  --color-background-navbar-link-hover:var(--gray-8);
  --color-background-blockquote:var(--gray-11);
  --color-background-code:var(--gray-10);
  --color-background-input-hover:var(--gray-12);
  --color-background-input:var(--gray-11);
  --color-background-sidebar:var(--gray-9);
  --color-background-navbar-title:hsla(0,0%,6%,.5);
  --color-background-navbar:var(--gray-9);
  --color-background-alternate:var(--gray-11);
  --color-background:var(--gray-9);
  --theme-blue:#6ab0f3;
  --theme-lavender:#d48ceb;
  --theme-pink:#ff8ac0;
  --theme-green:#92d192;
  --theme-yellow:#fcdc97;
  --yellow:#ffd479;
  --color-border-terminal:var(--color-border);
  --color-background-filename:var(--gray-7);
  --color-background-terminal:var(--gray-11);
  --color-border-code-block:var(--gray-6);
  --color-background-code-block:var(--gray-8);
  --color-background-inline-code:hsla(0,0%,100%,.08);
  --terminal-accent:var(--gray-6);
  --terminal-bar:var(--gray-9);
  --error:#f2777a;
  --tag:#6ab0f3;
  --class:#e1a6f2;
  --attribute:#ffd479;
  --keyword:#ffeea6;
  --function:#76d4d6;
  --comment:#777c85;
  --punctuation:#c7cdd7;
  --operator:#ac8d58;
  --number:#fca369;
  --property:#b3b9c5;
  --variable:#fff;
  --string:#92d192;
}
  :where(html:not(.is-light)) .gatsby-highlight-code-line{
  background-color:rgba(116,207,116,.1);
}
}
:root:where(.is-dark){
  --box-shadow-elevated:var(--box-shadow-card-dark);
  --box-shadow:var(--box-shadow-card-dark);
  --color-text-button-secondary-hover:var(--color-primary);
  --color-text-button-secondary:var(--gray-0);
  --color-border-button-secondary:var(--gray-7);
  --color-background-button-secondary-hover:hsla(0,0%,100%,.05);
  --color-background-button-secondary:var(--gray-8);
  --color-text-button-hover:var(--color-primary);
  --color-text-button:var(--gray-0);
  --color-border-button:var(--gray-7);
  --color-background-button-hover:hsla(0,0%,100%,.05);
  --color-background-button:var(--gray-8);
  --color-marker:var(--gray-6);
  --color-border-card:var(--gray-7);
  --color-border-hover:var(--gray-5);
  --color-border:var(--gray-7);
  --color-text-navbar-link-hover:var(--gray-0);
  --color-text-navbar-link:var(--gray-1);
  --color-text-heading-muted:var(--gray-3);
  --color-text-muted:var(--gray-5);
  --color-text-emphasized:var(--gray-0);
  --color-text:var(--gray-3);
  --color-background-card:var(--gray-8);
  --color-background-navbar-link-active:var(--gray-7);
  --color-background-navbar-link-hover:var(--gray-8);
  --color-background-blockquote:var(--gray-11);
  --color-background-code:var(--gray-10);
  --color-background-input-hover:var(--gray-12);
  --color-background-input:var(--gray-11);
  --color-background-sidebar:var(--gray-9);
  --color-background-navbar-title:hsla(0,0%,6%,.5);
  --color-background-navbar:var(--gray-9);
  --color-background-alternate:var(--gray-11);
  --color-background:var(--gray-9);
  --theme-blue:#6ab0f3;
  --theme-lavender:#d48ceb;
  --theme-pink:#ff8ac0;
  --theme-green:#92d192;
  --theme-yellow:#fcdc97;
  --yellow:#ffd479;
  --color-border-terminal:var(--color-border);
  --color-background-filename:var(--gray-7);
  --color-background-terminal:var(--gray-11);
  --color-border-code-block:var(--gray-6);
  --color-background-code-block:var(--gray-8);
  --color-background-inline-code:hsla(0,0%,100%,.08);
  --terminal-accent:var(--gray-6);
  --terminal-bar:var(--gray-9);
  --error:#f2777a;
  --tag:#6ab0f3;
  --class:#e1a6f2;
  --attribute:#ffd479;
  --keyword:#ffeea6;
  --function:#76d4d6;
  --comment:#777c85;
  --punctuation:#c7cdd7;
  --operator:#ac8d58;
  --number:#fca369;
  --property:#b3b9c5;
  --variable:#fff;
  --string:#92d192;
}
:where(html.is-dark) .gatsby-highlight-code-line{
  background-color:rgba(116,207,116,.1);
}
@media (prefers-color-scheme:light){
  :root:where(:not(.is-dark)){
  --box-shadow-elevated:var(--box-shadow-elevated-light);
  --box-shadow:var(--box-shadow-card-light);
  --color-text-button-secondary-hover:var(--color-primary);
  --color-text-button-secondary:var(--color-text);
  --color-border-button-secondary:var(--beige-3);
  --color-background-button-secondary-hover:transparent;
  --color-background-button-secondary:var(--beige-2);
  --color-text-button-hover:#fff;
  --color-text-button:var(--color-primary);
  --color-border-button:var(--beige-3);
  --color-background-button-hover:var(--color-primary);
  --color-background-button:transparent;
  --color-marker:var(--gray-7);
  --color-border-card:var(--beige-3);
  --color-border-hover:var(--beige-4);
  --color-border:var(--beige-25);
  --color-text-navbar-link-hover:var(--gray-10);
  --color-text-navbar-link:var(--gray-7);
  --color-text-heading-muted:var(--gray-6);
  --color-text-muted:var(--gray-6);
  --color-text-emphasized:var(--gray-10);
  --color-text:var(--gray-8);
  --color-background-card:var(--beige-1);
  --color-background-navbar-link-active:var(--beige-2);
  --color-background-navbar-link-hover:var(--beige-2);
  --color-background-blockquote:var(--beige-1);
  --color-background-code:var(--beige-2);
  --color-background-input-hover:var(--beige-2);
  --color-background-input:var(--beige-1);
  --color-background-sidebar:var(--beige-0);
  --color-background-navbar-title:hsla(46,42%,88%,.5);
  --color-background-navbar:var(--beige-0);
  --color-background-alternate:var(--beige-1);
  --color-background:var(--beige-0);
  --theme-blue:#2f71b4;
  --theme-lavender:#a455be;
  --theme-pink:#d33682;
  --theme-green:#2d922d;
  --theme-yellow:#ac7c14;
  --yellow:#ffce64;
  --color-border-terminal:var(--gray-1);
  --color-background-filename:var(--beige-2);
  --color-background-terminal:#fff;
  --color-border-code-block:var(--beige-3);
  --color-background-code-block:var(--beige-1);
  --color-background-inline-code:rgba(0,0,0,.05);
  --terminal-accent:#fff;
  --terminal-bar:var(--gray-1);
  --error:#dc322f;
  --tag:#268bd2;
  --class:#c32c75;
  --attribute:#916f14;
  --keyword:#c32c75;
  --function:#1a9489;
  --comment:#657b83;
  --punctuation:#586e75;
  --operator:#785200;
  --number:#b54110;
  --property:#697a82;
  --variable:#0e2a35;
  --string:#728400;
}
  :where(html:not(.is-dark)) .gatsby-highlight-code-line{
  background-color:rgba(116,207,116,.15);
}
}
:root:where(.is-light){
  --box-shadow-elevated:var(--box-shadow-elevated-light);
  --box-shadow:var(--box-shadow-card-light);
  --color-text-button-secondary-hover:var(--color-primary);
  --color-text-button-secondary:var(--color-text);
  --color-border-button-secondary:var(--beige-3);
  --color-background-button-secondary-hover:transparent;
  --color-background-button-secondary:var(--beige-2);
  --color-text-button-hover:#fff;
  --color-text-button:var(--color-primary);
  --color-border-button:var(--beige-3);
  --color-background-button-hover:var(--color-primary);
  --color-background-button:transparent;
  --color-marker:var(--gray-7);
  --color-border-card:var(--beige-3);
  --color-border-hover:var(--beige-4);
  --color-border:var(--beige-25);
  --color-text-navbar-link-hover:var(--gray-10);
  --color-text-navbar-link:var(--gray-7);
  --color-text-heading-muted:var(--gray-6);
  --color-text-muted:var(--gray-6);
  --color-text-emphasized:var(--gray-10);
  --color-text:var(--gray-8);
  --color-background-card:var(--beige-1);
  --color-background-navbar-link-active:var(--beige-2);
  --color-background-navbar-link-hover:var(--beige-2);
  --color-background-blockquote:var(--beige-1);
  --color-background-code:var(--beige-2);
  --color-background-input-hover:var(--beige-2);
  --color-background-input:var(--beige-1);
  --color-background-sidebar:var(--beige-0);
  --color-background-navbar-title:hsla(46,42%,88%,.5);
  --color-background-navbar:var(--beige-0);
  --color-background-alternate:var(--beige-1);
  --color-background:var(--beige-0);
  --theme-blue:#2f71b4;
  --theme-lavender:#a455be;
  --theme-pink:#d33682;
  --theme-green:#2d922d;
  --theme-yellow:#ac7c14;
  --yellow:#ffce64;
  --color-border-terminal:var(--gray-1);
  --color-background-filename:var(--beige-2);
  --color-background-terminal:#fff;
  --color-border-code-block:var(--beige-3);
  --color-background-code-block:var(--beige-1);
  --color-background-inline-code:rgba(0,0,0,.05);
  --terminal-accent:#fff;
  --terminal-bar:var(--gray-1);
  --error:#dc322f;
  --tag:#268bd2;
  --class:#c32c75;
  --attribute:#916f14;
  --keyword:#c32c75;
  --function:#1a9489;
  --comment:#657b83;
  --punctuation:#586e75;
  --operator:#785200;
  --number:#b54110;
  --property:#697a82;
  --variable:#0e2a35;
  --string:#728400;
}
:where(html.is-light) .gatsby-highlight-code-line{
  background-color:rgba(116,207,116,.15);
}
@media screen and (min-width:600px){
  :root{
  --layout-padding-vertical:2rem;
  --layout-padding-horizontal:2rem;
  --font-size:1rem;
  --anchor-padding:0.5rem;
  --h1:2.8rem;
  --h2:2.3rem;
  --h3:1.9rem;
  --h4:1.5rem
}
}
*,:after,:before{
  box-sizing:border-box
}
a{
  color:var(--color-text-link);
  font-weight:500;
  text-decoration:inherit;
  touch-action: manipulation;
}
a:hover{
  color:var(--color-text-link-hover)
}
a.anchor,a.anchor:hover{
  background:transparent!important;
  color:var(--color-text-link)
}
:is(a.anchor,a.anchor:hover) svg{
  fill:var(--color-text-link)
}
.before:is(a.anchor,a.anchor:hover){
  padding-right:var(--anchor-padding)
}
body{
  margin:0
}
html, body, img {
  touch-action: pan-y;
}
html, body {
  overscroll-behavior-y: none;
}
html.scroll-locked {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body.scroll-locked {
  overscroll-behavior: none;
}
h1,h2,h3,h4,h5{
  color:var(--color-text-emphasized);
  font-family:var(--font-family-heading);
  line-height:1.3;
  scroll-margin-top:calc(var(--navbar-height) + 2.5rem)
}
@media screen and (min-width:1020px){
  h1,h2,h3,h4,h5{
  scroll-margin-top:2rem
}
}
h1{
  font-size:var(--h1);
  font-weight:700;
  line-height:1.2;
  margin-bottom:1rem;
  margin-top:0
}
blockquote,h2,h3,h4,h5,ol,p,table,ul{
  margin:1.25rem 0
}
h1:not(:first-child),h2:not(:first-child),h3:not(:first-child),h4:not(:first-child){
  margin-top:3rem
}
h2+h3,h3+h4{
  margin-top:0!important
}
h2,h3,h4{
  font-weight:600
}
h2{
  font-size:var(--h2)
}
h2 code{
  font-size:var(--h2)!important
}
h3{
  color:var(--color-text-heading-muted);
  font-size:var(--h3);
  font-weight:500
}
h3 code{
  font-size:var(--h3)!important
}
h4{
  font-size:var(--h4)
}
h4 code{
  font-size:var(--h4)!important
}
h5,h5 code{
  font-size:1rem;
  text-transform:uppercase
}
blockquote,ol,p,table,ul{
  -webkit-font-smoothing:auto
}
@media screen and (min-width:800px){
  blockquote,ol,p,table,ul{
  -webkit-font-smoothing:antialiased;
  font-size:1.05rem
}
}
ul{
  padding-left:1rem
}
li{
  line-height:1.6;
  padding-bottom:.25rem
}
li p{
  margin-top:0
}
ol li ol,ul li ul{
  margin-bottom:0;
  margin-top:0
}
ul li ul li{
  padding:0
}
li::marker{
  color:var(--color-marker);
  font-size:1.1rem;
  line-height:1
}
mark{
  background:var(--yellow);
  border-radius:var(--border-radius)
}
table{
  border-collapse:collapse
}
table,td,th{
  border:0.25px solid var(--color-border)
}
td,th{
  padding:.25rem .75rem
}
th{
  border-bottom:0.25px solid var(--color-border)
}
table tr:nth-child(2n),th{
  background:var(--color-background-alternate)
}
.button,a.button,button{
  align-items:center;
  background:var(--color-background-button);
  border:0.25px solid var(--color-border-button);
  border-radius:9999px;
  color:var(--color-text-button);
  cursor:pointer;
  display:inline-flex;
  font-size:.9375rem;
  font-weight:500!important;
  gap:.375rem;
  line-height:1;
  padding:10px 20px;
  text-decoration:none!important;
  transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space:nowrap;
  letter-spacing:-0.01em
}
:is(button,a.button,.button):hover{
  background:var(--color-background-button-hover);
  border-color:var(--color-border-button-hover);
  color:var(--color-text-button-hover);
  transform:translateY(-1px)
}
.active:is(button,a.button,.button),.active:is(button,a.button,.button):hover{
  background:var(--color-background-navbar-link-hover);
  color:var(--color-text-button-hover)
}
:is(button,a.button,.button):active{
  transform:scale(0.97);
  transition-duration:.05s
}
.secondary:is(button,a.button,.button){
  background:var(--color-background-button-secondary);
  border-color:var(--color-border-button-secondary);
  color:var(--color-text-button-secondary)
}
.secondary:is(button,a.button,.button):hover{
  background:var(--color-background-button-secondary-hover);
  border-color:var(--color-border-button-secondary-hover);
  color:var(--color-text-button-secondary-hover)
}
.icon:is(button,a.button,.button){
  padding:.25rem
}
.small:is(button,a.button,.button){
  font-size:13px;
  padding:8px 16px
}
.x-small:is(button,a.button,.button){
  font-size:11px;
  padding:.25rem .5rem
}
:is(button,a.button,.button) img{
  margin-right:.25rem;
  max-height:20px;
  min-height:20px;
  min-width:20px
}
.transparent-button:is(button,a.button,.button){
  background:var(--color-background-input);
  border-color:var(--color-border);
  box-shadow:none;
  color:var(--color-text-emphasized);
  font-weight:600;
  transform:none
}
.transparent-button:is(button,a.button,.button):hover{
  background:var(--color-background-input-hover)
}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem
}
.tags a.button.small{
  font-size:.8rem;
  gap:.5rem;
  padding:.4rem .5rem
}
.tags.active{
  background:var(--color-background-navbar);
  color:var(--color-text-link)
}
.navbar{
  background:var(--color-background-navbar);
  border-bottom:0.25px solid var(--color-border);
  gap:1rem;
  justify-content:space-between;
  left:0;
  padding:0 .7rem 0 var(--layout-padding-horizontal);
  position:fixed;
  top:0;
  width:100%;
  z-index:10;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%)
}
.navbar,.navbar-title{
  align-items:center;
  display:flex;
  height:var(--navbar-height)
}
.navbar-title{
  z-index:3
}
.navbar-collapse{
  display:none
}
a.navbar-title-link{
  align-items:center;
  color:var(--color-text-navbar-link);
  display:flex;
  font-weight:600;
  gap:.75rem;
  white-space:nowrap
}
.navbar-logo{
  height:22px;
  min-height:22px;
  min-width:22px;
  width:22px
}
.navbar-container{
  align-items:center;
  display:flex;
  height:var(--navbar-height);
  justify-content:flex-end;
  width:100%
}
.navbar-section{
  align-items:center;
  display:flex;
  gap:.25rem
}
.navbar-section-search{
  display:none
}
.navbar-menu{
  align-items:center;
  display:flex;
  gap:.5rem
}
.navbar-menu a{
  border-radius:8px;
  color:var(--color-text-navbar-link);
  font-weight:500;
  padding:.5rem .875rem;
  text-decoration:none;
  white-space:nowrap;
  font-size:.9375rem
}
:is(.navbar-menu a):hover{
  background:var(--color-background-navbar-link-hover)
}
.active:is(.navbar-menu a){
  background:var(--color-background-navbar-link-active);
  color:var(--color-text-navbar-link-hover)
}
.navbar-menu.social{
  gap:2px
}
.navbar-menu.nav-items{
  display:none
}
.navbar-menu img{
  height:16px;
  width:16px
}
button.navbar-button{
  align-items:center;
  background:transparent;
  border:0.25px solid transparent;
  box-shadow:none;
  color:var(--color-text-navbar-link);
  display:flex;
  height:38px;
  justify-content:center;
  padding:.5rem;
  width:38px
}
button.navbar-button img{
  margin:0
}
button.navbar-button:hover{
  background:var(--color-background-navbar-link-hover);
  border:0.25px solid transparent;
  color:var(--color-text-navbar-link-hover)
}
button.navbar-button.active,button.navbar-button.active:hover{
  background:var(--color-background-navbar-link-hover);
  border:0.25px solid var(--color-primary);
  color:var(--color-primary)
}
@media screen and (max-width:1019px){
  #sidebar-toggle{
    display:none
  }
}
@media screen and (max-width:799px){
  #projects .card p{
    display:none
  }
  .navbar-menu.nav-items{
  height:calc(100vh - var(--navbar-height));
  justify-content:center;
  padding-bottom:40vh
}
.navbar-menu.nav-items a{
  align-items:center;
  display:flex;
  font-size:1.2rem;
  gap:.5rem
}
.navbar-menu.nav-items.active{
  background:var(--color-background-navbar);
  box-shadow:0 10px 15px rgba(0,0,0,.2);
  display:flex;
  flex-direction:column;
  left:0;
  margin-top:var(--navbar-height);
  position:fixed;
  top:0;
  width:100%;
  z-index:2;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
}
@media screen and (min-width:1020px){
  .navbar{
  display:none
}
}
@media screen and (min-width:800px){
  button.nav-menu-button{
  display:none
}
.navbar-section{
  gap:1rem
}
.navbar-menu.nav-items{
  display:flex!important
}
.navbar-menu a{
  align-items:center;
  display:flex;
  gap:.5rem;
  padding:.5rem .75rem
}
}
a.navbar-icon{
  background:transparent;
  height:38px!important;
  width:38px!important
}
.sidebar::-webkit-scrollbar{
  height:8px;
  width:8px
}
.sidebar{
  -ms-overflow-style:auto;
  background:var(--color-background-sidebar);
  border-right:0.25px solid var(--color-border);
  display:none;
  height:100vh;
  min-width:var(--sidebar-width);
  overflow-y:auto;
  position:sticky;
  scrollbar-width:thin;
  text-align:left;
  top:0;
  width:var(--sidebar-width)
}
.sidebar-title-link{
  align-items:center;
  display:flex;
  gap:.75rem;
  justify-content:space-between
}
.sidebar-title-link .site-name{
  color:var(--color-text-emphasized);
  font-family:var(--font-family-heading);
  font-size:18px;
  font-weight:500;
  white-space:nowrap
}
.sidebar-section{
  border-bottom:0.25px solid var(--color-border);
  margin:1.25rem;
  padding-bottom:1.5rem
}
.sidebar-section:last-child{
  border:none;
  padding-bottom:3rem
}
.sidebar-section .sidebar-links,.sidebar-section .sidebar-nav-links{
  display:flex;
  flex-direction:column;
  gap:6px
}
:is(.sidebar-section .sidebar-links,.sidebar-section .sidebar-nav-links) a{
  align-items:center;
  color:var(--color-text-muted);
  display:flex;
  font-size:.9rem;
  gap:.5rem
}
.active:is(:is(.sidebar-section .sidebar-links,.sidebar-section .sidebar-nav-links) a),:is(:is(.sidebar-section .sidebar-links,.sidebar-section .sidebar-nav-links) a):hover{
  color:var(--color-text-emphasized)
}
:is(:is(.sidebar-section .sidebar-links,.sidebar-section .sidebar-nav-links) a) img{
  height:16px;
  width:16px
}
.sidebar-section .sidebar-nav-links{
  gap:2px
}
:is(.sidebar-section .sidebar-nav-links) a{
  border-radius:8px;
  color:var(--color-text);
  font-size:15px;
  font-weight:500;
  margin-left:-.5rem;
  margin-right:-.5rem;
  padding:6px .625rem;
  position:relative;
  transition:all .15s ease
}
.active:is(:is(.sidebar-section .sidebar-nav-links) a),:is(:is(.sidebar-section .sidebar-nav-links) a):hover{
  background:var(--color-background-navbar-link-hover);
  color:var(--color-text-emphasized);
  text-decoration:none
}
.active:is(:is(.sidebar-section .sidebar-nav-links) a)::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:18px;
  background:var(--color-primary);
  border-radius:0 2px 2px 0
}
:is(:is(.sidebar-section .sidebar-nav-links) a) img{
  height:20px;
  width:20px
}
.sidebar-section h2,.sidebar-section p{
  margin:1rem 0
}
.sidebar-section h2{
  font-size:1.1rem;
  font-weight:600;
  margin-bottom:.75rem;
  margin-top:0
}
.sidebar-section p{
  font-size:14px
}
.sidebar-section>p:last-child{
  margin-bottom:0
}
.sidebar-menu{
  display:flex;
  flex-direction:column;
  line-height:1;
  margin-left:-12px
}
.sidebar-menu a{
  align-items:center;
  border-radius:var(--border-radius);
  color:var(--color-text-muted);
  display:flex;
  font-size:14px;
  font-weight:500;
  gap:.5rem;
  overflow:hidden;
  padding:8px .75rem;
  text-overflow:ellipsis;
  white-space:nowrap
}
:is(.sidebar-menu a):hover{
  background:var(--color-background-navbar);
  color:var(--color-text-emphasized);
  text-decoration:none
}
.active:is(.sidebar-menu a){
  background:var(--color-background-navbar);
  color:var(--color-text-link)
}
:is(.sidebar-menu a) img{
  height:16px;
  width:16px
}
.sidebar-content a:hover{
  text-decoration-line:underline;
  text-decoration-thickness:2px
}
.sidebar-content p{
  font-size:15px
}
.sidebar-content>p:last-child{
  margin-bottom:0
}
.avatar{
  border-radius:var(--border-radius);
  height:50px;
  width:50px
}
@media screen and (min-width:1020px){
  .sidebar{
  display:block
}
}
.layout{
  padding-top:var(--navbar-height)
}
@media screen and (min-width:1020px){
  .layout{
  display:grid;
  grid-template-columns:var(--sidebar-width) 1fr;
  margin:0 auto;
  max-width:calc(var(--content-width) + var(--sidebar-width) + var(--post-sidebar-width) + 6rem);
  padding-top:0
}
}
.main-wrapper{
  min-height:100vh
}
.main-container{
  display:block;
  max-width:var(--main-layout-width)
}
.main-content{
  flex-grow:1;
  margin-left:auto;
  margin-right:auto;
  max-width:var(--content-width);
  padding:var(--layout-padding-vertical) var(--layout-padding-horizontal)
}
.main-content.page{
  max-width:calc(var(--content-width) + var(--post-sidebar-width))
}
@media screen and (min-width:1020px){
  .main-container{
  padding-left:var(--layout-padding-horizontal)
}
.main-container.is-note{
  justify-self:center
}
.main-container.is-note .main-content{
  max-width:calc(var(--content-width) + 50px)
}
.main-container.is-note .main-article p{
  font-size:1.1rem
}
.main-content{
  margin-left:0
}
}
@media screen and (min-width:1360px){
  .main-container{
  display:flex;
  gap:var(--layout-padding-horizontal);
  margin:0 auto;
  padding:0 var(--layout-padding-horizontal)
}
.main-content{
  margin:0
}
.main-content.page{
  margin-left:1.5rem
}
}
.post-sidebar{
  display:none;
  min-width:var(--post-sidebar-width);
  width:var(--post-sidebar-width)
}
.post-sidebar-thumbnail{
  margin:0 1.5rem 1rem
}
.post-sidebar-section{
  border-bottom:0.25px solid var(--color-border);
  padding-left:1rem
}
.post-sidebar-section p{
  margin-bottom:0;
  margin-top:0
}
:is(.post-sidebar-section p):last-of-type{
  margin:0
}
.post-sidebar-section:last-of-type{
  border-bottom:none;
  margin-bottom:0
}
.divider{
  background:var(--color-border);
  height:12px;
  width:2px
}
.post-sidebar-content{
  padding-top:var(--layout-padding-vertical);
  position:sticky;
  top:0;
  width:var(--post-sidebar-width)
}
.post-sidebar-content h2{
  font-size:1.1rem;
  margin-bottom:.75rem;
  margin-left:.75rem;
  margin-top:0
}
.post-sidebar-content p{
  font-size:14px
}
:is(.post-sidebar-content nav) a{
  border-radius:var(--border-radius);
  color:var(--color-text-muted);
  display:block;
  font-size:14px;
  font-weight:500;
  overflow:hidden;
  padding:6px .75rem;
  text-overflow:ellipsis;
  white-space:nowrap
}
:is(:is(.post-sidebar-content nav) a):hover{
  background:var(--color-background-navbar-link-hover);
  color:var(--color-text-emphasized);
  text-decoration:none
}
.active:is(:is(.post-sidebar-content nav) a){
  background:var(--color-background-navbar-link-active);
  color:var(--color-text-link)
}
:is(.post-sidebar-content nav) li,:is(.post-sidebar-content nav) p,:is(.post-sidebar-content nav) ul{
  line-height:1;
  padding:0
}
:is(.post-sidebar-content nav) ul{
  margin:0;
  padding-inline-start:0
}
:is(:is(.post-sidebar-content nav) ul) ul li>a{
  border-bottom-left-radius:0;
  border-left:0.25px solid var(--color-border);
  border-top-left-radius:0;
  margin-left:2rem
}
.active:is(:is(:is(.post-sidebar-content nav) ul) ul li>a){
  border-color:var(--color-primary)
}
:is(.post-sidebar-content nav) li{
  list-style-type:none
}
:is(:is(.post-sidebar-content nav) li) p{
  margin:0
}
.post-sidebar-card::-webkit-scrollbar{
  height:0;
  width:0
}
.post-sidebar-card{
  -ms-overflow-style:none;
  max-height:calc(100vh - var(--navbar-height));
  overflow-y:auto;
  scroll-padding-bottom:60px;
  scroll-padding-top:60px;
  scrollbar-width:none
}
@media screen and (min-width:1360px){
  .post-sidebar{
  display:block
}
}
.hero{
  margin-bottom:1.5rem
}
.hero .sub-title{
  color:var(--color-text-muted);
  display:flex;
  font-size:1.1rem;
  font-weight:500;
  gap:.5rem
}
.hero.hero-post h1{
  border:none;
  line-height:1.1;
  padding:0
}
.has-date:is(.hero.hero-post h1){
  margin-top:.5rem
}
.hero.hero-post .post-date{
  color:var(--color-text-muted)
}
:is(.hero.hero-post .post-date) a:hover{
  text-decoration:underline;
  text-decoration-thickness:2px
}
.hero.hero-index{
  margin-bottom:3rem
}
.hero.hero-taxonomy h1{
  margin-top:0
}
@media screen and (min-width:800px){
  .hero{
  margin-bottom:3rem
}
.hero.hero-index{
  margin-bottom:4rem;
  margin-top:2rem
}
.hero.hero-index h1{
  font-size:3.5rem;
  font-weight:700;
  margin-bottom:1.5rem;
  letter-spacing:-0.02em
}
.hero.hero-page,.hero.hero-taxonomy{
  margin-top:2rem
}
:is(.hero.hero-page,.hero.hero-taxonomy) h1{
  font-size:3rem;
  font-weight:700
}
}
.heading{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:2rem
}
.section-index{
  margin-bottom:1rem;
  padding-bottom:3.5rem
}
.hero-description{
  font-size:1.1rem;
  margin:0 0 1.25rem;
  max-width:600px
}
#visitor-line{
  white-space:nowrap
}
@media screen and (max-width: 640px){
  #visitor-line{
    white-space:normal;
    overflow-wrap:break-word
  }
}
.hero-description a:hover{
  text-decoration:underline;
  text-decoration-thickness:2px
}
.hero-image{
  max-width:100px;
  width:100px
}
.hero-container{
  align-items:center;
  display:flex;
  flex-direction:row-reverse;
  justify-content:space-between;
  width:100%
}
.hero-wrapper{
  align-items:flex-start;
  display:flex;
  flex-direction:column-reverse;
  gap:.5rem
}
@media screen and (min-width:800px){
  .hero-image{
  max-width:150px;
  width:150px
}
.heading span{
  border:none
}
.hero-description{
  font-size:1.2rem
}
.hero-image-container{
  margin-top:4rem;
  position:relative
}
.hero-image-container:before{
  background:var(--color-primary);
  border-radius:50%;
  content:"";
  height:200px;
  left:0;
  position:absolute;
  top:1rem;
  width:200px
}
.hero-image{
  display:block;
  max-width:250px;
  position:relative;
  width:250px;
  z-index:9
}
.hero-wrapper{
  flex-direction:row;
  gap:3rem
}
.hero-wrapper a:hover{
  text-decoration:underline;
  text-decoration-thickness:2px
}
}
a.post{
  border-bottom:0.25px solid var(--color-border);
  display:flex;
  flex-direction:column;
  padding:6px 0;
  text-decoration:none
}
a.post:last-child{
  border-bottom:none
}
a.post>div{
  align-items:center;
  display:flex;
  font-weight:600;
  gap:.5rem;
  margin:0
}
a.post time{
  color:var(--color-text-muted);
  display:block;
  font-family:var(--font-family);
  font-size:14px;
  font-weight:400;
  min-width:125px;
  text-decoration:none;
  width:125px
}
@media screen and (min-width:1020px){
  a.post{
  flex-direction:row;
  font-size:1.1rem;
  padding:4px 0
}
a.post,a.post time{
  justify-content:flex-start
}
a.post time{
  align-items:center;
  display:flex;
  font-size:.9rem;
  gap:.5rem
}
a.post:hover{
  background:var(--color-background-navbar-link-hover);
  border-radius:8px
}
a.post:hover time{
  color:var(--color-text-emphasized);
  text-decoration:none
}
}
a time.new-post{
  color:var(--color-highlighted)!important
}
.year{
  margin-bottom:1.5rem;
  padding-bottom:1.5rem
}
.year h2{
  font-weight:700;
  margin-bottom:.5rem
}
.year:last-of-type{
  border-bottom:none
}
@media screen and (min-width:800px){
  .year h2{
  border:0;
  padding-bottom:.5rem
}
}
:is(.main-article,.page-article) a{
  border-radius:4px;
  font-weight:600;
  text-decoration:underline
}
:is(:is(.main-article,.page-article) a):hover{
  background:var(--color-background-navbar-link-active)
}
:is(.main-article,.page-article) h2{
  border-bottom:0.25px solid var(--color-border);
  padding-bottom:.5rem
}
.main-article-thumbnail{
  margin-bottom:1rem
}
.cards{
  display:grid;
  gap:.5rem;
  grid-template-columns:1fr
}
@media screen and (min-width:800px){
  .cards{
  gap:1rem;
  grid-template-columns:repeat(2,1fr)
}
.cards.with-tags{
  grid-template-columns:repeat(3,1fr)
}
}
@media screen and (min-width:1360px){
  .cards{
  grid-template-columns:repeat(3,1fr)
}
.cards.with-tags{
  grid-template-columns:repeat(4,1fr)
}
}
.card{
  background:var(--color-background-card);
  border:0.25px solid var(--color-border-card);
  border-radius:var(--border-radius);
  box-shadow:var(--box-shadow);
  padding:1.25rem;
  position:relative;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  touch-action: pan-y;
}
.card .card-links{
  align-items:center;
  display:flex;
  gap:.5rem
}
.card a{
  font-weight:600
}
.card.card-highlight{
  align-items:center;
  display:flex;
  gap:1rem;
  line-height:1.3;
  text-decoration:none!important
}
.card.card-highlight div{
  color:var(--color-text-emphasized);
  font-weight:600
}

@media (hover: hover) {
  .card:hover{
    border-color:var(--color-primary);
    transform:translateY(-2px);
    box-shadow:var(--box-shadow-elevated)
  }
  :is(.card a):hover{
    text-decoration:underline;
    text-decoration-thickness:2px
  }
  .card.card-highlight:hover div{
    color:var(--color-text-link-hover)
  }
}
.card.card-highlight .gatsby-image-wrapper{
  min-height:40px;
  min-width:40px
}
.card time{
  color:var(--color-text-muted);
  display:block;
  font-size:13px;
  margin-bottom:.375rem;
  font-weight:500;
  letter-spacing:0.02em
}
.card p{
  color:var(--color-text);
  font-size:.9rem;
  line-height:1.5;
  margin:.5rem 0 1rem;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden
}
@media screen and (min-width:1020px){
  .card{
  padding:1rem
}
.card a{
  font-size:1.1rem
}
}
.stars{
  position:absolute;
  right:1rem;
  top:1rem
}
.star{
  align-items:center;
  color:var(--yellow);
  display:flex;
  gap:.5rem
}
.star,.star a{
  font-size:.9rem
}
.star a{
  color:var(--color-text-emphasized)
}
.image-thumbnail{
  background-position:50%;
  background-repeat:no-repeat;
  background-size:cover;
  border-radius:var(--border-radius);
  height:250px;
  margin-top:1rem;
  width:100%
}
blockquote{
  background:var(--color-background-blockquote);
  border-bottom-right-radius:var(--border-radius);
  border-left:0.25px solid3 var(--color-border-blockquote);
  border-top-right-radius:var(--border-radius);
  color:var(--color-text-emphasized);
  font-size:1rem;
  font-weight:400;
  line-height:1.6;
  margin:1.25rem 0;
  padding:1rem 1.25rem
}
blockquote>*{
  margin-top:0
}
blockquote :last-child{
  margin-bottom:0
}
blockquote ul{
  margin-top:1.5rem
}
blockquote strong{
  font-weight:700;
  text-decoration-line:underline;
  text-decoration-thickness:1px
}
blockquote.quotation{
  background:transparent;
  border:none;
  border-left:0.25px solid8 var(--color-border);
  border-radius:0;
  font-family:var(--font-family-heading);
  font-size:1.1rem;
  font-weight:500;
  padding:0 1rem
}
blockquote.quotation cite{
  display:block;
  font-family:var(--font-family);
  font-size:1rem;
  margin-top:1.5rem
}
@media screen and (min-width:800px){
  blockquote{
  margin:2rem 0;
  padding:1rem 1.5rem
}
blockquote.quotation{
  border-left:0.25px solid var(--color-border);
  padding:0 1.5rem
}
blockquote.quotation,blockquote.quotation p{
  color:var(--color-text-muted);
  font-size:1.2rem;
  line-height:1.5
}
blockquote.quotation cite{
  color:var(--color-text-emphasized);
  font-size:1.1rem;
  text-align:right
}
}
img{
  display:block;
  max-width:100%;
  background:var(--color-background-alternate,#f0f0f0)
}
img.image-float{
  height:auto;
  margin:1.25rem 0
}
@media screen and (min-width:800px){
  img.image-float{
  float:right;
  height:auto;
  margin:0 0 1.5rem 1.5rem;
  max-width:300px
}
}
.comments{
  margin-top:1.5rem;
  scroll-margin-top:2.5rem
}
.comments,.footer{
  border-top:0.25px solid var(--color-border)
}
.footer{
  font-size:12px;
  padding:1rem 0;
  color:var(--color-text-muted)
}
a.footer-link{
  color:var(--color-text-muted);
  white-space:nowrap
}
a.footer-link:hover{
  color:var(--color-text-link-hover);
  text-decoration:underline;
  text-decoration-thickness:2px
}
.floppy-logo{
  display:inline-block;
  height:18px;
  width:18px
}
.footer-made-by{
  align-items:center;
  display:flex;
  gap:5px
}
.footer-section{
  align-items:flex-start;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  justify-content:space-between;
  margin-left:auto;
  margin-right:auto;
  max-width:var(--content-width);
  padding:1.5rem 2rem
}
.footer-menu,.footer-menu-buttons{
  display:flex;
  gap:.75rem
}
.footer-menu-buttons{
  flex-direction:row
}
@media screen and (min-width:800px){
  .footer{
  font-size:14px
}
.footer-menu{
  display:flex
}
}
@media screen and (min-width:1360px){
  .footer-section{
  max-width:calc(var(--main-layout-width) + 2rem)
}
}
.flex{
  display:flex
}
.flex-space-between{
  display:flex;
  justify-content:space-between
}
.flex-align-center{
  align-items:center;
  display:flex
}
.flex-wrap{
  flex-wrap:wrap
}
.small-gap{
  gap:.5rem
}
.gap{
  gap:.75rem
}
.large-gap{
  gap:1rem
}
.main-article .gatsby-remark-prismjs-copy-button-container{
  position:relative
}
:is(.main-article .gatsby-remark-prismjs-copy-button-container) .gatsby-remark-prismjs-copy-button{
  background:var(--color-background-navbar);
  border:0.25px solid var(--color-border);
  border-radius:var(--border-radius);
  color:var(--color-text-muted);
  line-height:1;
  padding:4px 6px;
  position:absolute;
  right:1rem;
  top:0;
  z-index:99
}
:is(:is(.main-article .gatsby-remark-prismjs-copy-button-container) .gatsby-remark-prismjs-copy-button):hover{
  background:var(--color-background-navbar);
  border:0.25px solid var(--color-border-hover);
  color:var(--color-text)
}
.highlight{
  color:var(--color-text-emphasized);
  font-weight:700
}
.searched{
  background:var(--yellow);
  color:#111;
  font-weight:600
}
.search-container{
  align-items:center;
  display:inline-flex;
  gap:.5rem;
  position:relative
}
.search-container.with-button{
  gap:0
}
.search-container.with-button button,.search-container.with-button input{
  height:36px
}
.search-container.with-button input{
  border-bottom-right-radius:0;
  border-top-right-radius:0
}
.search-container.with-button button{
  border-bottom-left-radius:0;
  border-left:0;
  border-top-left-radius:0
}
.search-icon{
  height:24px;
  left:.5rem;
  position:absolute;
  top:8px;
  width:24px
}
.searchbar{
  background:var(--color-background-input);
  border:0.25px solid var(--color-border);
  border-radius:var(--border-radius);
  box-shadow:none;
  font-size:1rem;
  max-width:260px;
  padding:.75rem 1rem
}
.searchbar:hover{
  border-color:var(--color-border-hover)
}
.searchbar:focus,.searchbar:hover{
  background:var(--color-background-input-hover)
}
.searchbar:focus{
  border:0.25px solid var(--color-primary);
  outline:none
}
.searchbar.with-icon{
  padding:.5rem 1rem .5rem 2.5rem
}
.small{
  color:var(--color-text-muted);
  font-size:.9rem
}
.site-name{
  font-family:var(--font-family-heading);
  font-size:18px;
  white-space:nowrap
}
.site-name:hover{
  text-decoration:underline;
  text-decoration-thickness:2px
}
.hidden{
  display:none
}
.chip{
  align-items:center;
  border:0.25px solid var(--color-border);
  border-radius:var(--border-radius);
  border-radius:16px;
  color:var(--color-text-muted);
  display:flex;
  font-family:var(--font-family);
  font-size:.8rem;
  font-weight:500;
  justify-content:center;
  padding:3px 6px;
  white-space:nowrap
}
@media screen and (min-width:1360px){
  .article-type-wrapper{
  align-items:flex-start;
  display:flex
}
.article-type-wrapper .section-index{
  flex:1
}
:is(.article-type-wrapper .section-index):nth-of-type(2n){
  border-left:0.25px solid var(--color-border);
  margin-left:1.5rem;
  padding-left:1.5rem
}
}
.circles{
  display:flex;
  flex-direction:column
}
.circle{
  border-radius:50%;
  height:16px;
  width:16px
}
.dropdown{
  position:relative
}
.dropdown .dropdown-results{
  background:var(--color-background-sidebar);
  border:0.25px solid var(--color-border);
  border-radius:var(--border-radius);
  box-shadow:var(--box-shadow);
  left:50%;
  padding:.5rem 0;
  position:absolute;
  top:44px;
  transform:translate(-50%);
  z-index:99
}
.dropdown .dropdown-option{
  cursor:pointer;
  padding:.5rem 1rem
}
:is(.dropdown .dropdown-option):hover{
  background:var(--color-background-navbar-link-hover)
}
.introduction{
  scroll-margin-top:40px
}
.strike{
  text-decoration:line-through
}
.tooltip-container{
  position:relative
}
.tooltip-container .tooltip{
  background:var(--color-background-alternate);
  border:0.25px solid var(--color-border);
  border-radius:var(--border-radius);
  bottom:-40px;
  box-shadow:var(--box-shadow-elevated);
  color:var(--color-text-emphasized);
  display:block;
  font-size:.8rem;
  font-weight:600;
  left:50%;
  opacity:0;
  padding:6px 12px;
  pointer-events:none;
  position:absolute;
  transform:translateX(-50%);
  transition:opacity .3s ease;
  white-space:nowrap
}
.tooltip-container:hover .tooltip{
  opacity:1;
  z-index:2
}
.gatsby-resp-image-wrapper{
  margin:2rem 0
}
code{
  -webkit-font-smoothing:subpixel-antialiased
}
pre{
  border:0
}
code[class*=language-],pre[class*=language-]{
  word-wrap:normal;
  color:var(--font-color);
  font-family:var(--font-family-monospace);
  font-size:14px;
  hyphens:none;
  line-height:1.6;
  tab-size:2;
  text-align:left;
  white-space:pre;
  word-break:normal;
  word-spacing:normal
}
pre[class*=language-]::-webkit-scrollbar{
  height:0;
  width:0
}
pre[class*=language-]{
  -ms-overflow-style:none;
  background:var(--color-background-code-block);
  border-radius:var(--border-radius);
  font-weight:400;
  margin-bottom:1.5rem;
  margin-top:1.5rem;
  overflow:initial;
  overflow-x:auto;
  padding:1rem;
  scrollbar-width:none
}
@media screen and (min-width:800px){
  pre[class*=language-]{
  padding:1.5rem
}
}
:not(pre)>code[class*=language-]{
  background:var(--color-background-inline-code);
  border-radius:var(--border-radius);
  color:var(--color-text);
  font-size:.9rem;
  font-weight:400;
  padding:2px 4px
}
:not(pre)>a code[class*=language-]{
  color:var(--color-text-link);
  font-weight:600
}
:not(pre)>a code[class*=language-]:hover{
  color:var(--color-text-link-hover)
}
code.language-shell:before{
  color:var(--comment);
  content:"$ "
}
pre.language-text{
  background:transparent;
  border-color:transparent;
  padding:0
}
.gatsby-highlight pre.language-terminal{
  -webkit-text-size-adjust:none;
  background:var(--color-background-terminal);
  border:0.25px solid var(--color-border-terminal);
  border-radius:var(--border-radius);
  box-shadow:0 15px 20px rgba(0,0,0,.1),0 5px 15px rgba(0,0,0,.3);
  max-width:100%;
  padding:3rem 1rem 1rem;
  position:relative;
  white-space:unset
}
code.language-terminal{
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:none;
  text-size-adjust:none;
  white-space:pre-wrap;
  word-break:break-all
}
code.language-terminal:before{
  color:#62c354;
  left:40px;
  top:16px;
  z-index:7
}
code.language-terminal:before,pre.language-terminal:before{
  content:"\2022";
  font-size:2.5rem;
  letter-spacing:-5px;
  line-height:0;
  position:absolute;
  text-indent:6px
}
pre.language-terminal:before{
  background:var(--terminal-bar);
  border-bottom:0.25px solid var(--color-border-terminal);
  border-top:0.25px solid var(--terminal-accent);
  border-top-left-radius:var(--border-radius);
  border-top-right-radius:var(--border-radius);
  color:#ed6a5e;
  left:0;
  margin:0;
  padding:15px 0 12px;
  top:0;
  width:100%
}
pre.language-terminal:after{
  color:#f5bf4f;
  content:"\2022";
  font-size:2.5rem;
  left:20px;
  letter-spacing:-5px;
  line-height:0;
  position:absolute;
  text-indent:6px;
  top:16px
}
.gatsby-highlight-code-line{
  border-left:0.25px solid4 #74cf74;
  display:block;
  margin-left:-1.5rem;
  margin-right:-1.5rem;
  padding-left:calc(1rem + 4px)
}
.gatsby-highlight-code-line .gatsby-highlight-code-line{
  background-color:transparent
}
.filename+.gatsby-highlight pre{
  border-top-left-radius:0;
  border-top-right-radius:0
}
.filename{
  align-items:center;
  background:var(--color-background-code-block);
  border-bottom:0.25px solid var(--color-border);
  border-top-left-radius:var(--border-radius);
  border-top-right-radius:var(--border-radius);
  color:var(--color-text-emphasized);
  display:flex;
  font-size:15px;
  font-weight:500;
  margin-bottom:-1.5rem;
  overflow-x:hidden;
  padding:.5rem 1rem;
  text-overflow:ellipsis;
  white-space:nowrap
}
.filename,kbd{
  position:relative
}
kbd{
  background-color:var(--color-background-sidebar);
  border:0.25px solid var(--color-border);
  border-radius:var(--border-radius);
  box-shadow:0 2px 0 1px var(--color-border);
  color:var(--color-text);
  cursor:default;
  display:inline-block;
  font-family:var(--font-family);
  font-size:.75em;
  line-height:1;
  margin:0 2px;
  min-width:.75rem;
  padding:2px 5px;
  text-align:center;
  top:-1px;
  width:auto
}
kbd:hover{
  box-shadow:0 1px 0 .5px var(--color-border);
  top:1px
}
.token.cdata,.token.comment,.token.doctype,.token.important,.token.prolog{
  color:var(--comment)
}
.token.punctuation{
  color:var(--punctuation)
}
.token.namespace{
  opacity:.7
}
.token.property{
  color:var(--property)
}
.token.constant,.token.deleted,.token.symbol,.token.tag{
  color:var(--tag)
}
.token.number{
  color:var(--number)
}
.token.builtin,.token.char,.token.inserted,.token.url{
  color:var(--color-text)
}
.token.attr-name,.token.selector{
  color:var(--attribute)
}
.token.attr-value,.token.string{
  color:var(--string)
}
.token.operator{
  color:var(--operator)
}
.token.atrule,.token.keyword{
  color:var(--keyword)
}
.token.function{
  color:var(--function)
}
.language-css,.token.boolean,.token.class-name{
  color:var(--class)!important
}
.token.regex{
  color:var(--keyword)
}
.token.variable{
  color:var(--variable)
}



/* ===== Apple HIG Overrides & Additions ===== */

/* Back to Top — 圆角矩形 */
#back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 100;
  box-sizing: border-box;
  cursor: pointer;
  background: var(--color-background-card);
  color: var(--color-text);
  border: 0.25px solid var(--color-border);
  border-radius: var(--border-radius);
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s, transform .3s, box-shadow .3s;
  pointer-events: none;
}
#back-to-top svg {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
}
#back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (hover: hover) {
  #back-to-top:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.16);
  }
}
#back-to-top:active {
  transform: scale(0.93);
}

/* Tags — pill style */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  border: 0.25px solid var(--color-border);
  background: var(--color-background-card);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.article-cover {
  width: 260px;
  flex-shrink: 0;
  aspect-ratio: 21/9;
  height: auto;
  align-self: center;
  border-radius: 0;
  margin: 0.75rem;
}
.article-cover-frame {
  width: 260px;
  flex-shrink: 0;
  aspect-ratio: 21/9;
  align-self: center;
  margin: 0.75rem;
  overflow: hidden;
  background: var(--color-background-alternate);
}
.article-cover-frame .article-cover {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  display: block;
}
.image-reveal {
  background: var(--color-background-alternate);
}
.card-preview-wrap img[data-image-queue-src],
.article-cover-frame img[data-image-queue-src],
.photo-card-image-wrap img[data-image-queue-src] {
  opacity: 0;
}
.image-reveal-target {
  display: block;
  opacity: 0;
  transition: opacity 0.16s ease;
}
.image-reveal.is-image-loaded > .image-reveal-target,
.image-reveal-target.is-loaded {
  opacity: 1;
}

/* Prompt detail preview images */
.prompt-hero-wrap {
  max-width: 720px;
  margin: 0.5rem auto 1rem;
  border-radius: var(--border-radius);
  overflow: hidden;
}
.prompt-hero-wrap.is-landscape,
.prompt-hero-wrap.is-portrait {
  margin-left: 0;
  margin-right: 0;
}
.prompt-hero-wrap.is-landscape .prompt-hero {
  width: 100%;
  height: auto;
}
.prompt-hero-wrap.is-portrait {
  height: 560px;
  background: var(--color-background);
}
.prompt-hero-wrap.is-portrait .prompt-hero {
  width: auto !important;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

/* Timeline refinements */
.timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-background);
}
.timeline-track {
  width: 0.25px;
  flex: 1;
  background: var(--color-border);
  margin-top: 4px;
}

/* QR card */
.qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem;
  border: 0.25px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-background-card);
}

/* Feature cards */
.feature-card {
  padding: 1.25rem;
  border: 0.25px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-background-card);
}

/* Install box */
.install-box {
  background: var(--gray-9);
  color: var(--gray-1);
  padding: 1rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Copy button */
.copy-btn {
  padding: 0.4rem;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--gray-4);
  cursor: pointer;
  transition: background .15s, color .15s;
}

/* Searchbar focus ring */
.searchbar:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0,113,227,0.15);
}

/* Heading icon refinements */
.heading-icon svg {
  height: 24px;
  width: 24px;
  display: inline-block;
  color: var(--color-primary);
}

/* Footer link refinements */
.footer-link {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-link:hover {
  color: var(--color-text-emphasized);
}
.footer-icp {
  color: var(--color-text-muted);
  display: block;
  font-weight: 400;
  text-align: center;
  width: 100%;
}
@media screen and (min-width:1020px){
  .layout > .footer{
    grid-column:2;
  }
}

/* Sidebar section title */
.sidebar-section h2 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
  margin-top: 0;
}

/* Navbar menu refinements */
.navbar-menu a {
  border-radius: 8px;
}

/* Page article typography */
.page-article h1 { font-size: var(--h1); margin-bottom: 1rem; font-weight: 700; letter-spacing: -0.02em; }
.page-article h2 { font-size: var(--h2); margin-top: 2.5rem; margin-bottom: 1rem; font-weight: 600; letter-spacing: -0.015em; }
.page-article h3 { font-size: var(--h3); margin-top: 1.5rem; margin-bottom: 0.75rem; font-weight: 600; }
.page-article p, .page-article ul, .page-article ol { margin-bottom: 1rem; }
.page-article ul, .page-article ol { padding-left: 1.5rem; }
.page-article li { margin-bottom: 0.5rem; }

/* 咨询浮层 */
.coffee-btn {
  position: fixed;
  right: 24px;
  bottom: 132px;
  touch-action: manipulation;
  z-index: 999;
  width: 44px;
  height: 44px;
  border-radius: var(--border-radius, 8px);
  border: 0.25px solid var(--color-border);
  background: var(--color-background-card);
  color: var(--color-text);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  transition: transform .3s, box-shadow .3s;
  text-decoration: none;
}
.coffee-btn svg {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
@media (hover: hover) {
  .coffee-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.16);
  }
}
.coffee-btn:active {
  transform: scale(0.93);
}
.chat-btn {
  position: fixed;
  right: 24px;
  bottom: 80px;
  touch-action: manipulation;
  z-index: 999;
  width: 44px;
  height: 44px;
  border-radius: var(--border-radius, 8px);
  border: 0.25px solid var(--color-border);
  background: var(--color-background-card);
  color: var(--color-text);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  transition: transform .3s, box-shadow .3s;
}
.chat-btn svg {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
@media (hover: hover) {
  .chat-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.16);
  }
}
.chat-btn:active {
  transform: scale(0.93);
}
.chat-panel {
  position: fixed;
  right: 24px;
  bottom: 136px;
  z-index: 998;
  width: 380px;
  max-width: calc(100vw - 48px);
  height: 560px;
  max-height: calc(100vh - 120px);
  background: var(--color-background-card, #fff);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.chat-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border, #eaeaea);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-emphasized, #1a1a1a);
  flex-shrink: 0;
}
.chat-panel-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.chat-panel-header button,
.chat-panel-header .chat-panel-open {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted, #666);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 6px;
  transition: background 0.15s ease;
  text-decoration: none;
}
.chat-panel-header button:hover,
.chat-panel-header .chat-panel-open:hover {
  background: var(--color-background-navbar-link-hover, rgba(0,0,0,0.05));
  color: var(--color-text-emphasized, #1a1a1a);
}
.chat-panel iframe {
  flex: 1;
  width: 100%;
  border: none;
}
.chat-panel [data-chat-embed] {
  display: flex;
  flex: 1;
  min-height: 0;
}
.chat-panel [data-chat-embed] iframe {
  flex: 1;
  min-height: 0;
}
@media (max-width: 480px) {
  .chat-panel {
    right: 12px;
    bottom: 76px;
    width: calc(100vw - 24px);
    max-width: none;
    height: calc(100vh - 96px);
    max-height: none;
    border-radius: 12px;
  }
  .chat-btn {
    right: 12px;
    bottom: 80px;
  }
  .coffee-btn {
    right: 12px;
    bottom: 132px;
  }
  #back-to-top {
    right: 12px;
  }
}

/* ========== App Panel (内嵌工具面板) ========== */
.content-wrapper {
  position: relative;
  min-height: 100vh;
}

html.app-panel-open,
body.app-panel-open {
  height: 100%;
}

body.app-panel-open .content-wrapper {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

body.app-panel-open .chat-btn,
body.app-panel-open .chat-panel,
body.app-panel-open .coffee-btn,
body.app-panel-open #back-to-top {
  display: none;
}

body.app-panel-open .layout > .footer {
  display: none;
}
.is-embedded .footer {
  display: none;
}

.app-panel {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  height: 100%;
  max-height: 100%;
  background: var(--color-bg);
  overflow: hidden;
  z-index: 10;
}
@media screen and (min-width:1020px){
  body.app-panel-open .layout {
    padding-top: 0;
  }
  body.app-panel-open .navbar,
  body.app-panel-open .nav-menu-button {
    display: none;
  }
}
@media screen and (max-width:1019px){
  body.app-panel-open .navbar {
    z-index: 1000;
  }

  body.app-panel-open .navbar-menu.nav-items.active {
    z-index: 1001;
  }

  body.app-panel-open .content-wrapper {
    height: calc(100vh - var(--navbar-height));
    min-height: calc(100vh - var(--navbar-height));
  }
}
@supports (height: 100dvh) {
  @media screen and (max-width:1019px){
    body.app-panel-open .content-wrapper {
      height: calc(100dvh - var(--navbar-height));
      min-height: calc(100dvh - var(--navbar-height));
    }
  }
}
.app-panel.active {
  display: flex;
  flex-direction: column;
  animation: panel-fade-in 0.15s ease;
}
@keyframes panel-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.app-panel iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: none;
  flex: 1;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}
.panel-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-background-sidebar);
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.app-panel.loaded .panel-loading {
  opacity: 0;
}
.panel-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--gray-3, #d4d4d8);
  border-top-color: var(--color-primary, #ff8ac0);
  border-radius: 50%;
  animation: panel-loading-spin 0.8s linear infinite;
  margin-bottom: 12px;
}
@keyframes panel-loading-spin {
  to { transform: rotate(360deg); }
}
.panel-loading span {
  font-size: 14px;
  color: var(--color-text-muted);
}
.panel-loading-skeleton {
  width: min(920px, calc(100vw - 32px));
  height: min(560px, calc(100dvh - 96px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0.25px solid var(--color-border);
  background: var(--color-background);
  margin-bottom: 14px;
}
.panel-loading-skeleton-header {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 0.25px solid var(--color-border);
}
.panel-loading-skeleton-header span,
.panel-loading-skeleton-header strong,
.panel-loading-skeleton-body i,
.panel-loading-skeleton-body b {
  display: block;
  background: linear-gradient(90deg, var(--color-background-alternate) 25%, var(--color-background-navbar-link-hover) 50%, var(--color-background-alternate) 75%);
  background-size: 200% 100%;
  animation: panel-loading-shimmer 1.2s ease-in-out infinite;
}
.panel-loading-skeleton-header span {
  width: 30px;
  height: 30px;
}
.panel-loading-skeleton-header strong {
  flex: 1;
  height: 16px;
  max-width: 240px;
}
.panel-loading-skeleton-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}
.panel-loading-skeleton-body > div {
  padding: 18px;
  border-right: 0.25px solid var(--color-border);
}
.panel-loading-skeleton-body > div:last-child {
  border-right: 0;
}
.panel-loading-skeleton-body i {
  height: 12px;
  margin-bottom: 10px;
}
.panel-loading-skeleton-body i:nth-child(1) { width: 52%; height: 18px; }
.panel-loading-skeleton-body i:nth-child(2) { width: 92%; }
.panel-loading-skeleton-body i:nth-child(3) { width: 78%; }
.panel-loading-skeleton-body i:nth-child(4) { width: 86%; }
.panel-loading-skeleton-body b {
  width: 100%;
  height: 140px;
  margin-top: 18px;
}
@keyframes panel-loading-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media screen and (max-width: 640px) {
  .panel-loading-skeleton {
    width: calc(100vw - 24px);
    height: calc(100dvh - 96px);
  }
  .panel-loading-skeleton-body {
    grid-template-columns: 1fr;
  }
  .panel-loading-skeleton-body > div {
    border-right: 0;
    border-bottom: 0.25px solid var(--color-border);
  }
  .panel-loading-skeleton-body > div:last-child {
    border-bottom: 0;
  }
}

/* === Extracted shared inline styles (previously duplicated across all pages) === */

/* SVG sizing helpers */
.navbar-logo svg, svg.navbar-logo, .navbar-logo {
  height: 22px; min-height: 22px; min-width: 22px; width: 22px;
  display: inline-block; vertical-align: middle;
}
.navbar-menu svg, .navbar-menu.nav-items svg {
  height: 16px; width: 16px; display: inline-block;
}
.button svg, a.button svg {
  height: 20px; min-height: 20px; min-width: 20px; width: 20px;
  flex-shrink: 0; display: inline-block; margin-right: 0.25rem;
}
.heading-icon svg {
  height: 24px; width: 24px; display: inline-block;
}
.hero-image { border-radius: 50%; max-width: 100%; }

/* Magazine typography system */
.section-index .card strong { font-family: var(--font-serif); font-weight: 700; color: var(--color-text-emphasized); }
.section-index .card a { font-family: var(--font-serif); font-weight: 700; color: var(--color-primary); display: inline-block; cursor: pointer; }
.section-index .card.card-muted { background:var(--gray-1); border-color:var(--gray-3); box-shadow:none; filter:grayscale(1); opacity:0.76; }
@media (hover: hover) {
  .section-index .card a:hover { color: var(--color-text-link-hover); text-decoration: underline; text-decoration-thickness: 2px; }
  .section-index .card.card-muted:hover { border-color:var(--gray-4); box-shadow:none; transform:none; }
}
.section-index .card.card-muted strong,
.section-index .card.card-muted p,
.section-index .card.card-muted time { color:var(--color-text-muted); }
.card time, .article-body time { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* Wise custom */
.tag { display:inline-flex; align-items:center; gap:0.25rem; padding:0.35rem 0.7rem; border-radius:9999px; border:0.25px solid var(--color-border); background:var(--color-background-card); font-size:0.85rem; color:var(--color-text-muted); }
.tag-list { display:flex; flex-wrap:wrap; gap:0.5rem; margin:1rem 0; }
.page-article h1 { font-size: var(--h1); margin-bottom: 1rem; }
.page-article h2 { font-size: var(--h2); margin-top: 2rem; margin-bottom: 1rem; }
.page-article h3 { font-size: var(--h3); margin-top: 1.5rem; margin-bottom: 0.75rem; }
.page-article p, .page-article ul, .page-article ol { margin-bottom: 1rem; }
.page-article ul, .page-article ol { padding-left: 1.5rem; }
.page-article li { margin-bottom: 0.5rem; }

/* Timeline */
.timeline { display:flex; flex-direction:column; gap:0; }
.timeline-item { display:flex; gap:1rem; align-items: flex-start; }
.timeline-year { min-width:3.5rem; text-align:left; font-size:0.9rem; font-weight:700; color:var(--color-text-muted); line-height: 1.3; margin-top: calc((1rem * 1.3 - 0.9rem * 1.3) / 2); }
.timeline-line { display:flex; flex-direction:column; align-items:center; align-self: stretch; padding-top: calc((1rem * 1.3 - 12px) / 2); padding-bottom: 2rem; position: relative; }
.timeline-item:last-child .timeline-line { padding-bottom: 0; }
.timeline-dot { width:12px; height:12px; border-radius:50%; background:var(--color-primary); flex-shrink: 0; }
.timeline-track { position: absolute; top: calc((1rem * 1.3 - 12px) / 2 + 12px + 4px); left: 50%; transform: translateX(-50%); width:1.5px; bottom: 0; background:var(--color-border); }
.timeline-item:last-child .timeline-track { display: none; }
.timeline-content { flex:1; }
.timeline-content h4 { font-weight:700; margin-bottom:0.1rem; margin-top: 0; font-size: 1rem; }
.timeline-content p { font-size:0.85rem; font-family:var(--font-serif); font-weight:400; color:var(--color-text-muted); margin:0; }

/* QR card */
.qr-card { display:flex; flex-direction:column; align-items:center; gap:0.5rem; padding:1.5rem; border:0.25px solid var(--color-border); border-radius:var(--border-radius); background:var(--color-background-card); }
.qr-card img { width:8rem; height:8rem; border-radius:var(--border-radius); object-fit:cover; }

/* WeChat modal */
.wechat-modal-open { overflow:hidden; }
.wechat-modal[hidden] { display:none; }
.wechat-modal {
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem, 4vw, 3rem);
  background:rgba(0,0,0,0.62);
  backdrop-filter:blur(8px);
  opacity:0; transition:opacity 0.18s ease;
}
.wechat-modal.is-open { opacity:1; }
.wechat-modal-panel {
  position:relative;
  width:min(644px, 70%);
  max-height:calc(70vh - 1.4rem);
  padding:0.75rem;
  border:0.25px solid var(--color-border);
  border-radius:var(--border-radius);
  background:var(--color-background-card);
  box-shadow:0 24px 80px rgba(0,0,0,0.24);
  transform:translateY(12px) scale(0.98);
  transition:transform 0.18s ease;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.wechat-modal.is-open .wechat-modal-panel { transform:translateY(0) scale(1); }
.wechat-modal-close {
  position:absolute; right:1rem; top:1rem; z-index:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; padding:0;
  border:0.25px solid rgba(255,255,255,0.55);
  border-radius:var(--border-radius);
  background:rgba(0,0,0,0.45); color:#fff;
  backdrop-filter:blur(6px);
}
.wechat-modal-image {
  display:block;
  width:100%;
  height:auto;
  max-height:calc(70vh - 2.45rem);
  object-fit:contain;
  border-radius:var(--border-radius);
  background:#fff;
}
@media screen and (max-width: 640px) {
  .wechat-modal { align-items:center; padding:0.75rem; }
  .wechat-modal-panel { padding:0.5rem; }
  .wechat-modal-close { display:none; }
  .wechat-modal-image { max-height:49vh; }
  #reward-modal .wechat-modal-panel { width: min(540px, 60%); }
  #reward-modal .wechat-modal-image { max-height: 58vh; }
}
#reward-modal .wechat-modal-panel {
  width: min(450px, 50%);
  padding: 0.5rem;
}
#reward-modal .wechat-modal-close {
  right: 0.75rem;
  top: 0.75rem;
  width: 1.5rem;
  height: 1.5rem;
}

/* Filter bar */
.filter-bar { display:flex; flex-wrap:wrap; gap:0.5rem; margin:1rem 0 1.5rem; }
.filter-btn { display:inline-flex; align-items:center; padding:0.4rem 0.9rem; border-radius:var(--border-radius); border:0.25px solid var(--color-border); background:var(--color-background-card); font-size:0.9rem; cursor:pointer; transition: background .15s, border-color .15s, color .15s; color:var(--color-text); text-decoration:none; touch-action: manipulation; }
.filter-btn:hover { border-color:var(--color-primary); background:var(--color-background-navbar-link-hover); }
.filter-btn.active { background:var(--color-primary) !important; color:var(--color-text-on-accent) !important; border-color:var(--color-primary) !important; }

/* Cards */
.knowledge-card, .skill-card { display:block; padding:1.25rem; border:0.25px solid var(--color-border); border-radius:var(--border-radius); background:var(--color-background-card); transition: transform .15s, box-shadow .15s, border-color .15s; text-decoration:none; color:inherit; }
@media (hover: hover) {
  .knowledge-card:hover, .skill-card:hover { border-color:var(--color-primary); transform:translateY(-2px); box-shadow:var(--box-shadow-elevated); }
}

/* Install box & copy button */
.install-box { background:var(--gray-9); color:var(--gray-1); padding:1rem; border-radius:var(--border-radius); display:flex; align-items:center; gap:0.75rem; }
.install-box code { flex:1; font-family:var(--font-family-monospace); font-size:0.85rem; word-break:break-all; }
.copy-btn { padding:0.4rem; border-radius:var(--border-radius); background:transparent; border:none; color:var(--gray-4); cursor:pointer; touch-action: manipulation; }
.copy-btn:hover { background:var(--gray-7); color:var(--gray-0); }

/* Offsite confirmation modal */
.offsite-modal {
  position: fixed; inset: 0; z-index: 1001;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 0.18s ease;
}
.offsite-modal[hidden] {
  display: none;
}
.offsite-modal.is-open { opacity: 1; }
.offsite-modal-panel {
  width: min(420px, 90%);
  padding: 1.5rem;
  border: 0.25px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-background-card);
  box-shadow: 0 24px 80px rgba(0,0,0,0.24);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.18s ease;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.offsite-modal.is-open .offsite-modal-panel {
  transform: translateY(0) scale(1);
}
.offsite-modal-title {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-emphasized);
}
.offsite-modal-text {
  margin: 0 0 1.25rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.offsite-modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* Feature grid */
.feature-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:1rem; margin:1.5rem 0; }
.feature-card { padding:1.25rem; border:0.25px solid var(--color-border); border-radius:var(--border-radius); background:var(--color-background-card); }
.feature-icon { width:2.5rem; height:2.5rem; border-radius:var(--border-radius); display:flex; align-items:center; justify-content:center; margin-bottom:0.75rem; font-size:1.2rem; }

/* Article list & cards */
.article-list { display:flex; flex-direction:column; gap:1.5rem; margin-top:1.5rem; }
.article-card { display:flex; border:0.25px solid var(--color-border); border-radius:var(--border-radius); background:var(--color-background-card); overflow:hidden; text-decoration:none !important; color:inherit; transition: transform .15s, box-shadow .15s, border-color .15s; touch-action: pan-y; }
.article-card[hidden] { display:none !important; }
@media (hover: hover) {
  .article-card:hover { border-color:var(--color-primary); transform:translateY(-2px); box-shadow:var(--box-shadow-elevated); }
}
.article-cover { width:260px; flex-shrink:0; aspect-ratio:21/9; height:auto; align-self:center; }
.article-cover-frame.image-reveal { background: var(--color-background-alternate); }
.article-body { padding:1rem; flex:1; display:flex; flex-direction:column; justify-content:center; }
.article-body h3 { margin:0 0 0.5rem; font-size:1.1rem; color:var(--color-text); font-family: var(--font-serif); font-weight: 700; }
.article-body p { margin:0 0 0.75rem; font-size:0.9rem; color:var(--color-text-muted); line-height:1.5; }
/* Photos section */
.notes-section { display: flex; flex-direction: column; gap: 1.5rem; }

.notes-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.photo-card {
  display: flex; flex-direction: column;
  text-decoration: none !important; color: inherit;
  border-radius: var(--border-radius);
  background: var(--color-background-card);
  border: 0.25px solid var(--color-border);
  overflow: hidden;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  touch-action: pan-y;
}
@media (hover: hover) {
  .photo-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-elevated);
  }
}
.photo-card-image-wrap {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  background: var(--color-background-alternate);
}
.photo-card-image-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.photo-card-image-wrap.image-reveal {
  background: var(--color-background-alternate);
}
.photo-card-title {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-family: var(--font-serif);
  color: var(--color-text);
  font-weight: 700;
  line-height: 1.4;
}
.photo-card-title-text {
  display: block;
}

/* Photos page */
.notes-page-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}

@media screen and (max-width: 640px) {
  .notes-list { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .article-cover-frame { width:100%; aspect-ratio:21/9; }
  .article-cover-frame .article-cover {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top center;
  }
  .photo-card-title {
    font-size: 1rem;
    min-height: calc(1.4em * 2);
  }
  .photo-card-title-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .notes-page-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

@media screen and (min-width: 641px) {
  .expand-more-btn { display:none; }
}
@media screen and (max-width: 640px) {
  .expand-hidden { display:none !important; }
  .article-card { flex-direction:column; }
  .article-card .article-cover-frame {
    width:100%;
    margin:0;
    align-self:stretch;
    border-radius:0;
  }
  .article-card .article-cover {
    width:100%;
    height:100%;
    aspect-ratio:21/9;
    margin:0;
    align-self:stretch;
    object-fit:cover;
    object-position:top center;
    display:block;
  }
  .article-body p { display:none; }
  .skill-card .card-body p { display:none; }
  .expand-more-btn {
    display:flex; align-items:center; justify-content:center; gap:0.35rem;
    width:auto; padding:0.5rem 0.25rem; margin:0.5rem auto 0;
    border:none; background:transparent;
    color:var(--color-text-muted);
    font-size:0.9rem; cursor:pointer;
    appearance:none; -webkit-appearance:none;
    border-radius:0;
    box-shadow:none;
    outline:none;
    user-select:none; -webkit-user-select:none;
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  }
  .expand-more-btn:hover { color:var(--color-primary); }
  .expand-more-btn:hover,
  .expand-more-btn:focus-visible,
  .expand-more-btn:active {
    background:transparent;
    border-color:transparent;
    box-shadow:none;
    outline:none;
  }
  .expand-more-btn:hover,
  .expand-more-btn:active { transform:none; }
  .expand-more-btn:active {
    transition-duration:0s;
  }
  .expand-more-btn svg { transition:transform 0.2s; }
  .expand-more-btn:active svg { transform:none; }
  .section-index { padding-bottom:1.5rem; }
  .section-index .cards,
  #projects .cards { grid-auto-rows:auto; }
  .cards > .expand-more-btn,
  .prompt-list > .expand-more-btn { grid-column:1 / -1; align-self:center; }
}

/* Section index cards */
.section-index .cards { grid-auto-rows: 1fr; }
.section-index .card { display: flex; flex-direction: column; height: 100%; }
.section-index .card .card-links { margin-top: auto; }
.section-index .card a { text-decoration: none; }
.section-index .card p { flex: 1; }

/* Skill card with preview (prompt pages) */
.skill-card { display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; touch-action: pan-y; }
.skill-card .card-preview-wrap { display: block; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: var(--color-background-navbar); }
.skill-card .card-preview-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: opacity 0.16s ease, transform 0.3s ease; }
@media (hover: hover) {
  .skill-card:hover .card-preview-wrap img { transform: scale(1.03); }
}
.skill-card .card-body { flex: 1; display: flex; flex-direction: column; padding: 1rem 1.25rem 1.25rem; }
.skill-card .card-body > a { text-decoration: none; color: inherit; }
.skill-card .card-body > a:hover { text-decoration: none; }
.skill-card .card-body h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--color-text-emphasized); font-family: var(--font-serif); }
.skill-card .card-body p { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.4; flex: 1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.skill-card .card-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 0.75rem; }
.section-index .prompt-list { grid-auto-rows: auto; }

/* Skill section plain cards */
#skill-cards .skill-card { display: block; height: auto; min-height: 8rem; padding: 1.25rem; }
#skill-cards .skill-card h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--color-text-emphasized); font-family: var(--font-serif); }
#skill-cards .skill-card p { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Prompt list plain cards */
.prompt-list .skill-card:not(.has-preview) { display: block; align-self: start; height: auto; min-height: 8rem; padding: 1.25rem; }
.prompt-list .skill-card:not(.has-preview) .card-body { padding: 0; display: block; flex: none; }

/* Project cards */
#projects .card { position: relative; }
#projects .card time {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  background: rgba(var(--color-background-card-rgb, 255,255,255), 0.85);
  color: var(--color-text-muted);
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-family: var(--font-mono);
  border: 0.25px solid var(--color-border);
  backdrop-filter: blur(4px);
  line-height: 1.4;
}
#projects .card.has-preview { padding: 0; overflow: hidden; }
#projects .cards { grid-auto-rows: 1fr; align-items: stretch; }
#projects .card { height: 100%; }
#projects .card.has-preview .card-preview-wrap { display: block; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: var(--color-background-navbar); }
#projects .card.has-preview .card-preview-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: opacity 0.16s ease, transform 0.3s ease; }
@media (hover: hover) {
  #projects .card.has-preview:hover .card-preview-wrap img { transform: scale(1.03); }
}
#projects .card.has-preview .card-content { padding: 0.9rem 1.1rem 1rem; }
#projects .card.has-preview p { margin: 0.25rem 0 0; }

/* Prompt page specific styles */
.prompt-box { border:0.25px solid var(--color-border); border-radius:var(--border-radius); background:var(--color-background-card); overflow:hidden; }
.prompt-header { display:flex; justify-content:space-between; align-items:center; padding:0.6rem 1rem; background:var(--color-background-navbar); border-bottom:0.25px solid var(--color-border); font-size:0.85rem; font-weight:600; color:var(--color-text-muted); }
.prompt-header .copy-btn { display:flex; align-items:center; gap:0.35rem; padding:0.3rem 0.7rem; border-radius:var(--border-radius); background:transparent; border:0.25px solid var(--color-border); color:var(--color-text-muted); cursor:pointer; font-size:0.8rem; font-family:var(--font-family); transition:all 0.15s; }
.prompt-header .copy-btn:hover { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.prompt-code { margin:0; padding:1rem; overflow-x:auto; max-height:60vh; overflow-y:auto; font-family:var(--font-family-monospace); font-size:0.85rem; line-height:1.6; color:var(--color-text); background:var(--color-background-card); }
.prompt-code code { white-space:pre-wrap; word-break:break-word; }
.prompt-nav { display:flex; justify-content:center; align-items:center; margin:2rem 0 1rem; gap:1rem; }
.prompt-nav-btn { display:inline-flex; align-items:center; gap:0.35rem; padding:0.2rem 0.15rem; border:0; background:transparent; color:var(--color-text-muted); text-decoration:none; font-size:0.9rem; font-weight:500; transition:all 0.15s; }
.prompt-nav-btn:hover { color:var(--color-primary); text-decoration:underline; text-underline-offset:0.18em; }
.prompt-tutorials a { text-decoration:none; }
.prompt-hero-wrap { max-width: 720px; margin: 0.5rem auto 1rem; border-radius: var(--border-radius); overflow: hidden; }

/* Page-article card overrides (used in prompt detail pages) */
.page-article .knowledge-card,
.page-article .skill-card { text-decoration:none !important; }
.page-article .knowledge-card *,
.page-article .skill-card * { text-decoration:none !important; }

/* Inline style extractions — shared utilities */
.filter-btn svg { margin-right:0.25rem; vertical-align:middle; }
.button.ghost,
a.button.ghost { background:transparent; border:0.25px solid var(--color-border); color:var(--color-text); }
.empty-state { padding:2rem; text-align:center; color:var(--color-text-muted); }

/* Prevent text selection on cards for smooth mobile scrolling */
.card, .card *,
.article-card, .article-card *,
.photo-card, .photo-card *,
.skill-card, .skill-card *,
.knowledge-card, .knowledge-card * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Mobile override: ensure grid rows don't stretch and leave blank space */
@media screen and (max-width: 640px) {
  .section-index .cards { grid-auto-rows: auto; }
  #projects .cards { grid-auto-rows: auto; }
}