@layer properties {
  @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
    *,:before,:after,::backdrop {
      --tw-translate-x:0;
      --tw-translate-y:0;
      --tw-translate-z:0;
      --tw-rotate-x:initial;
      --tw-rotate-y:initial;
      --tw-rotate-z:initial;
      --tw-skew-x:initial;
      --tw-skew-y:initial;
      --tw-space-x-reverse:0;
      --tw-border-style:solid;
      --tw-leading:initial;
      --tw-font-weight:initial;
      --tw-tracking:initial;
      --tw-shadow:0 0 #0000;
      --tw-shadow-color:initial;
      --tw-shadow-alpha:100%;
      --tw-inset-shadow:0 0 #0000;
      --tw-inset-shadow-color:initial;
      --tw-inset-shadow-alpha:100%;
      --tw-ring-color:initial;
      --tw-ring-shadow:0 0 #0000;
      --tw-inset-ring-color:initial;
      --tw-inset-ring-shadow:0 0 #0000;
      --tw-ring-inset:initial;
      --tw-ring-offset-width:0px;
      --tw-ring-offset-color:#fff;
      --tw-ring-offset-shadow:0 0 #0000;
      --tw-outline-style:solid;
      --tw-blur:initial;
      --tw-brightness:initial;
      --tw-contrast:initial;
      --tw-grayscale:initial;
      --tw-hue-rotate:initial;
      --tw-invert:initial;
      --tw-opacity:initial;
      --tw-saturate:initial;
      --tw-sepia:initial;
      --tw-drop-shadow:initial;
      --tw-drop-shadow-color:initial;
      --tw-drop-shadow-alpha:100%;
      --tw-drop-shadow-size:initial;
      --tw-duration:initial;
      --tw-content:"";
      --tw-backdrop-blur:initial;
      --tw-backdrop-brightness:initial;
      --tw-backdrop-contrast:initial;
      --tw-backdrop-grayscale:initial;
      --tw-backdrop-hue-rotate:initial;
      --tw-backdrop-invert:initial;
      --tw-backdrop-opacity:initial;
      --tw-backdrop-saturate:initial;
      --tw-backdrop-sepia:initial
    }
  }
}

@font-face {
  font-family:"Instrument Serif", Georgia, serif;
  src:url(https://cdn.fontshare.com/wf/TTX2Z3BF3P6Y5BQT3IV2VNOK6FL22KUT/7QYRJOI3JIMYHGY6CH7SOIFRQLZOLNJ6/KFIAZD4RUMEZIYV6FQ3T3GP5PDBDB6JY.woff2)format("woff2");
  font-weight:400;
  font-display:swap;
  font-style:normal
}

@font-face {
  font-family:"Instrument Serif", Georgia, serif;
  src:url(https://cdn.fontshare.com/wf/P2LQKHE6KA6ZP4AAGN72KDWMHH6ZH3TA/ZC32TK2P7FPS5GFTL46EU6KQJA24ZYDB/7AHDUZ4A7LFLVFUIFSARGIWCRQJHISQP.woff2)format("woff2");
  font-weight:500;
  font-display:swap;
  font-style:normal
}

@font-face {
  font-family:"Instrument Serif", Georgia, serif;
  src:url(https://cdn.fontshare.com/wf/LAFFD4SDUCDVQEXFPDC7C53EQ4ZELWQI/PXCT3G6LO6ICM5I3NTYENYPWJAECAWDD/GHM6WVH6MILNYOOCXHXB5GTSGNTMGXZR.woff2)format("woff2");
  font-weight:700;
  font-display:swap;
  font-style:normal
}

@layer theme {
  :root,:host {
    --font-sans:"Instrument Serif", Georgia, serif;
    --font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-black:#000;
    --spacing:.25rem;
    --container-xs:20rem;
    --container-sm:24rem;
    --text-xs:.75rem;
    --text-xs--line-height:calc(1 / .75);
    --text-sm:.875rem;
    --text-sm--line-height:calc(1.25 / .875);
    --text-base:1rem;
    --text-base--line-height:calc(1.5 / 1);
    --font-weight-normal:400;
    --font-weight-medium:500;
    --tracking-tight:-.025em;
    --tracking-widest:.1em;
    --leading-snug:1.375;
    --leading-normal:1.5;
    --leading-relaxed:1.625;
    --radius-sm:.25rem;
    --radius-md:.375rem;
    --radius-lg:.5rem;
    --radius-xl:.75rem;
    --radius-4xl:2rem;
    --animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-xs:4px;
    --default-transition-duration:.15s;
    --default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);
    --default-font-family:var(--font-sans);
    --default-mono-font-family:var(--font-mono)
  }
}

@layer base {
  *,:after,:before,::backdrop {
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0
  }

  ::file-selector-button {
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0
  }

  html,:host {
    -webkit-text-size-adjust:100%;
    tab-size:4;
    line-height:1.5;
    font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings:var(--default-font-feature-settings,normal);
    font-variation-settings:var(--default-font-variation-settings,normal);
    -webkit-tap-highlight-color:transparent
  }

  hr {
    height:0;
    color:inherit;
    border-top-width:1px
  }

  abbr:where([title]) {
    -webkit-text-decoration:underline dotted;
    text-decoration:underline dotted
  }

  h1,h2,h3,h4,h5,h6 {
    font-size:inherit;
    font-weight:inherit
  }

  a {
    color:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    text-decoration:inherit
  }

  b,strong {
    font-weight:bolder
  }

  code,kbd,samp,pre {
    font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings:var(--default-mono-font-feature-settings,normal);
    font-variation-settings:var(--default-mono-font-variation-settings,normal);
    font-size:1em
  }

  small {
    font-size:80%
  }

  sub,sup {
    vertical-align:baseline;
    font-size:75%;
    line-height:0;
    position:relative
  }

  sub {
    bottom:-.25em
  }

  sup {
    top:-.5em
  }

  table {
    text-indent:0;
    border-color:inherit;
    border-collapse:collapse
  }

  :-moz-focusring:where(:not(iframe)) {
    outline:auto
  }

  progress {
    vertical-align:baseline
  }

  summary {
    display:list-item
  }

  ol,ul,menu {
    list-style:none
  }

  img,svg,video,canvas,audio,iframe,embed,object {
    vertical-align:middle;
    display:block
  }

  img,video {
    max-width:100%;
    height:auto
  }

  button,input,select,optgroup,textarea {
    font:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    letter-spacing:inherit;
    color:inherit;
    opacity:1;
    background-color:#0000;
    border-radius:0
  }

  ::file-selector-button {
    font:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    letter-spacing:inherit;
    color:inherit;
    opacity:1;
    background-color:#0000;
    border-radius:0
  }

  :where(select:is([multiple],[size])) optgroup {
    font-weight:bolder
  }

  :where(select:is([multiple],[size])) optgroup option {
    padding-inline-start:20px
  }

  ::file-selector-button {
    margin-inline-end:4px
  }

  ::placeholder {
    opacity:1
  }

  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
    ::placeholder {
      color:currentColor
    }

    @supports (color:color-mix(in lab, red, red)) {
      ::placeholder {
        color:color-mix(in oklab, currentcolor 50%, transparent)
      }
    }
  }

  textarea {
    resize:vertical
  }

  ::-webkit-search-decoration {
    -webkit-appearance:none
  }

  ::-webkit-date-and-time-value {
    min-height:1lh;
    text-align:inherit
  }

  ::-webkit-datetime-edit {
    display:inline-flex
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding:0
  }

  ::-webkit-datetime-edit {
    padding-block:0
  }

  ::-webkit-datetime-edit-year-field {
    padding-block:0
  }

  ::-webkit-datetime-edit-month-field {
    padding-block:0
  }

  ::-webkit-datetime-edit-day-field {
    padding-block:0
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block:0
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block:0
  }

  ::-webkit-datetime-edit-second-field {
    padding-block:0
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block:0
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block:0
  }

  ::-webkit-calendar-picker-indicator {
    line-height:1
  }

  :-moz-ui-invalid {
    box-shadow:none
  }

  button,input:where([type=button],[type=reset],[type=submit]) {
    appearance:button
  }

  ::file-selector-button {
    appearance:button
  }

  ::-webkit-inner-spin-button {
    height:auto
  }

  ::-webkit-outer-spin-button {
    height:auto
  }

  [hidden]:where(:not([hidden=until-found])) {
    display:none!important
  }
}

@layer components;
@layer utilities {
  .\@container\/field-group {
    container:field-group/inline-size
  }

  .visible {
    visibility:visible
  }

  .sr-only {
    clip-path:inset(50%);
    white-space:nowrap;
    border-width:0;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    position:absolute;
    overflow:hidden
  }

  .absolute {
    position:absolute
  }

  .static {
    position:static
  }

  .container {
    width:100%
  }

  @media (min-width:40rem) {
    .container {
      max-width:40rem
    }
  }

  @media (min-width:48rem) {
    .container {
      max-width:48rem
    }
  }

  @media (min-width:64rem) {
    .container {
      max-width:64rem
    }
  }

  @media (min-width:80rem) {
    .container {
      max-width:80rem
    }
  }

  @media (min-width:96rem) {
    .container {
      max-width:96rem
    }
  }

  .-mx-1 {
    margin-inline:calc(var(--spacing) * -1)
  }

  .-mx-4 {
    margin-inline:calc(var(--spacing) * -4)
  }

  .-my-2 {
    margin-block:calc(var(--spacing) * -2)
  }

  .-mb-4 {
    margin-bottom:calc(var(--spacing) * -4)
  }

  .block {
    display:block
  }

  .flex {
    display:flex
  }

  .grid {
    display:grid
  }

  .hidden {
    display:none
  }

  .table {
    display:table
  }

  .w-\(--anchor-width\) {
    width:var(--anchor-width)
  }

  .-translate-x-1\/2 {
    --tw-translate-x:calc(calc(1 / 2 * 100%) * -1);
    translate:var(--tw-translate-x) var(--tw-translate-y)
  }

  .-translate-y-1\/2 {
    --tw-translate-y:calc(calc(1 / 2 * 100%) * -1);
    translate:var(--tw-translate-x) var(--tw-translate-y)
  }

  .transform {
    transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)
  }

  :where(.-space-x-2>:not(:last-child)) {
    --tw-space-x-reverse:0;
    margin-inline-start:calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
    margin-inline-end:calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)))
  }10px\)\] {
    border-radius:min(var(--radius-md), 10px)
  }12px\)\] {
    border-radius:min(var(--radius-md), 12px)
  }

  @supports (color:color-mix(in lab, red, red)) {
  }

  @media (forced-colors:active) {
  }

  .filter {
    filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
  }

  :is(.\*\:w-full>*) {
    width:100%
  }

  .after\:absolute:after {
    content:var(--tw-content);
    position:absolute
  }

  .after\:inset-0:after {
    content:var(--tw-content);
    inset:0
  }

  .after\:rounded-full:after {
    content:var(--tw-content);
    border-radius:3.40282e38px
  }

  .after\:border:after {
    content:var(--tw-content);
    border-style:var(--tw-border-style);
    border-width:1px
  }

  .after\:mix-blend-darken:after {
    content:var(--tw-content);
    mix-blend-mode:darken
  }

  .last\:mt-0:last-child {
    margin-top:0
  }

  @media (hover:hover) {var\(--secondary\)\,var\(--foreground\)_5\%\)\]:hover {
      background-color:var(--secondary)
    }

    @supports (color:color-mix(in lab, red, red)) {var\(--secondary\)\,var\(--foreground\)_5\%\)\]:hover {
        background-color:color-mix(in oklch,var(--secondary),var(--foreground) 5%)
      }
    }
  }

  .active\:not-aria-\[haspopup\]\:translate-y-px:active:not([aria-haspopup]) {
    --tw-translate-y:1px;
    translate:var(--tw-translate-x) var(--tw-translate-y)
  }

  .data-\[align-trigger\=true\]\:animate-none[data-align-trigger=true] {
    animation:none
  }

  .data-\[side\=bottom\]\:top-1[data-side=bottom] {
    top:var(--spacing)
  }

  .data-\[side\=inline-end\]\:top-1\/2\![data-side=inline-end] {
    top:50%!important
  }

  .data-\[side\=inline-end\]\:-left-1[data-side=inline-end] {
    left:calc(var(--spacing) * -1)
  }

  .data-\[side\=inline-end\]\:-translate-y-1\/2[data-side=inline-end] {
    --tw-translate-y:calc(calc(1 / 2 * 100%) * -1);
    translate:var(--tw-translate-x) var(--tw-translate-y)
  }

  .data-\[side\=inline-start\]\:top-1\/2\![data-side=inline-start] {
    top:50%!important
  }

  .data-\[side\=inline-start\]\:-right-1[data-side=inline-start] {
    right:calc(var(--spacing) * -1)
  }

  .data-\[side\=inline-start\]\:-translate-y-1\/2[data-side=inline-start] {
    --tw-translate-y:calc(calc(1 / 2 * 100%) * -1);
    translate:var(--tw-translate-x) var(--tw-translate-y)
  }

  .data-\[side\=left\]\:top-1\/2\![data-side=left] {
    top:50%!important
  }

  .data-\[side\=left\]\:-right-1[data-side=left] {
    right:calc(var(--spacing) * -1)
  }

  .data-\[side\=left\]\:-translate-y-1\/2[data-side=left] {
    --tw-translate-y:calc(calc(1 / 2 * 100%) * -1);
    translate:var(--tw-translate-x) var(--tw-translate-y)
  }

  .data-\[side\=right\]\:top-1\/2\![data-side=right] {
    top:50%!important
  }

  .data-\[side\=right\]\:-left-1[data-side=right] {
    left:calc(var(--spacing) * -1)
  }

  .data-\[side\=right\]\:-translate-y-1\/2[data-side=right] {
    --tw-translate-y:calc(calc(1 / 2 * 100%) * -1);
    translate:var(--tw-translate-x) var(--tw-translate-y)
  }

  .data-\[side\=top\]\:-bottom-2\.5[data-side=top] {
    bottom:calc(var(--spacing) * -2.5)
  }

  .data-\[size\=default\]\:h-8[data-size=default] {
    height:calc(var(--spacing) * 8)
  }

  .data-\[size\=default\]\:max-w-xs[data-size=default] {
    max-width:var(--container-xs)
  }

  .data-\[size\=lg\]\:size-10[data-size=lg] {
    width:calc(var(--spacing) * 10);
    height:calc(var(--spacing) * 10)
  }

  .data-\[size\=sm\]\:size-6[data-size=sm] {
    width:calc(var(--spacing) * 6);
    height:calc(var(--spacing) * 6)
  }

  .data-\[size\=sm\]\:h-7[data-size=sm] {
    height:calc(var(--spacing) * 7)
  }

  .data-\[size\=sm\]\:max-w-xs[data-size=sm] {
    max-width:var(--container-xs)
  }

  .data-\[size\=sm\]\:rounded-\[min\(var\(--radius-md\)\,10px\)\][data-size=sm] {
    border-radius:min(var(--radius-md), 10px)
  }

  :is(.\*\:data-\[slot\=avatar\]\:ring-2>*)[data-slot=avatar] {
    --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
    box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .data-\[slot\=checkbox-group\]\:gap-3[data-slot=checkbox-group] {
    gap:calc(var(--spacing) * 3)
  }

  :is(.\*\:data-\[slot\=field\]\:p-2\.5>*)[data-slot=field] {
    padding:calc(var(--spacing) * 2.5)
  }

  :is(.\*\:data-\[slot\=field-group\]\:gap-4>*)[data-slot=field-group] {
    gap:calc(var(--spacing) * 4)
  }

  :is(.\*\:data-\[slot\=field-label\]\:flex-auto>*)[data-slot=field-label] {
    flex:auto
  }

  :is(.\*\*\:data-\[slot\=kbd\]\:relative *)[data-slot=kbd] {
    position:relative
  }

  :is(.\*\*\:data-\[slot\=kbd\]\:isolate *)[data-slot=kbd] {
    isolation:isolate
  }

  :is(.\*\*\:data-\[slot\=kbd\]\:z-50 *)[data-slot=kbd] {
    z-index:50
  }

  :is(.\*\*\:data-\[slot\=kbd\]\:rounded-sm *)[data-slot=kbd] {
    border-radius:var(--radius-sm)
  }

  :is(.\*\:data-\[slot\=select-value\]\:line-clamp-1>*)[data-slot=select-value] {
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    display:-webkit-box;
    overflow:hidden
  }

  :is(.\*\:data-\[slot\=select-value\]\:flex>*)[data-slot=select-value] {
    display:flex
  }

  :is(.\*\:data-\[slot\=select-value\]\:items-center>*)[data-slot=select-value] {
    align-items:center
  }

  :is(.\*\:data-\[slot\=select-value\]\:gap-1\.5>*)[data-slot=select-value] {
    gap:calc(var(--spacing) * 1.5)
  }

  .data-\[variant\=label\]\:text-sm[data-variant=label] {
    font-size:var(--text-sm);
    line-height:var(--tw-leading,var(--text-sm--line-height))
  }

  .data-\[variant\=legend\]\:text-base[data-variant=legend] {
    font-size:var(--text-base);
    line-height:var(--tw-leading,var(--text-base--line-height))
  }

  @supports ((-webkit-backdrop-filter:var(--tw)) or (backdrop-filter:var(--tw))) {
  }

  @media (min-width:40rem) {
    .sm\:block {
      display:block
    }

    .sm\:max-w-sm {
      max-width:var(--container-sm)
    }

    .sm\:flex-row {
      flex-direction:row
    }

    .sm\:justify-end {
      justify-content:flex-end
    }

    .sm\:group-data-\[size\=default\]\/alert-dialog-content\:row-span-2:is(:where(.group\/alert-dialog-content)[data-size=default] *) {
      grid-row:span 2/span 2
    }

    .sm\:group-data-\[size\=default\]\/alert-dialog-content\:place-items-start:is(:where(.group\/alert-dialog-content)[data-size=default] *) {
      place-items:start
    }

    .sm\:group-data-\[size\=default\]\/alert-dialog-content\:text-left:is(:where(.group\/alert-dialog-content)[data-size=default] *) {
      text-align:left
    }

    .sm\:group-data-\[size\=default\]\/alert-dialog-content\:group-has-data-\[slot\=alert-dialog-media\]\/alert-dialog-content\:col-start-2:is(:where(.group\/alert-dialog-content)[data-size=default] *):is(:where(.group\/alert-dialog-content):has([data-slot=alert-dialog-media]) *) {
      grid-column-start:2
    }

    .sm\:group-data-\[size\=default\]\/alert-dialog-content\:has-data-\[slot\=alert-dialog-media\]\:grid-rows-\[auto_1fr\]:is(:where(.group\/alert-dialog-content)[data-size=default] *):has([data-slot=alert-dialog-media]) {
      grid-template-rows:auto 1fr
    }

    .data-\[size\=default\]\:sm\:max-w-sm[data-size=default] {
      max-width:var(--container-sm)
    }
  }

  @media (min-width:48rem) {
    .md\:text-sm {
      font-size:var(--text-sm);
      line-height:var(--tw-leading,var(--text-sm--line-height))
    }

    .md\:text-pretty {
      text-wrap:pretty
    }
  }

  @container field-group (min-width:28rem) {
    .\@md\/field-group\:flex-row {
      flex-direction:row
    }

    .\@md\/field-group\:items-center {
      align-items:center
    }

    :is(.\@md\/field-group\:\*\:w-auto>*) {
      width:auto
    }

    .\@md\/field-group\:has-\[\>\[data-slot\=field-content\]\]\:items-start:has(>[data-slot=field-content]) {
      align-items:flex-start
    }

    :is(.\@md\/field-group\:\*\:data-\[slot\=field-label\]\:flex-auto>*)[data-slot=field-label] {
      flex:auto
    }
  }

  @media (prefers-color-scheme:dark) {
    .dark\:after\:mix-blend-lighten:after {
      content:var(--tw-content);
      mix-blend-mode:lighten
    }
  }

  .\[\&_a\]\:underline a {
    text-decoration-line:underline
  }

  .\[\&_a\]\:underline-offset-3 a {
    text-underline-offset:3px
  }

  .\[\&_img\]\:size-full img {
    width:100%;
    height:100%
  }

  .\[\&_img\]\:object-cover img {
    object-fit:cover
  }

  .\[\&_p\:not\(\:last-child\)\]\:mb-4 p:not(:last-child) {
    margin-bottom:calc(var(--spacing) * 4)
  }

  .\[\&_svg\]\:pointer-events-none svg {
    pointer-events:none
  }

  .\[\&_svg\]\:shrink-0 svg {
    flex-shrink:0
  }

  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*=size-]) {
    width:calc(var(--spacing) * 3);
    height:calc(var(--spacing) * 3)
  }

  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 svg:not([class*=size-]) {
    width:calc(var(--spacing) * 3.5);
    height:calc(var(--spacing) * 3.5)
  }

  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]) {
    width:calc(var(--spacing) * 4);
    height:calc(var(--spacing) * 4)
  }

  .\[\&\+\[data-slot\=item-content\]\]\:flex-none+[data-slot=item-content] {
    flex:none
  }

  .\[a\]\:transition-colors:is(a) {
    transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;
    transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
    transition-duration:var(--tw-duration,var(--default-transition-duration))
  }

  :is(.\*\:\[a\]\:underline>*):is(a) {
    text-decoration-line:underline
  }

  :is(.\*\:\[a\]\:underline-offset-3>*):is(a) {
    text-underline-offset:3px
  }

  :is(.\*\:\[span\]\:last\:flex>*):is(span):last-child {
    display:flex
  }

  :is(.\*\:\[span\]\:last\:items-center>*):is(span):last-child {
    align-items:center
  }

  :is(.\*\:\[span\]\:last\:gap-2>*):is(span):last-child {
    gap:calc(var(--spacing) * 2)
  }

  :is(.\*\:\[svg\]\:row-span-2>*):is(svg) {
    grid-row:span 2/span 2
  }

  :is(.\*\:\[svg\]\:translate-y-0\.5>*):is(svg) {
    --tw-translate-y:calc(var(--spacing) * .5);
    translate:var(--tw-translate-x) var(--tw-translate-y)
  }

  :is(.\*\:\[svg\]\:text-current>*):is(svg) {
    color:currentColor
  }

  :is(.\*\:\[svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4>*):is(svg:not([class*=size-])) {
    width:calc(var(--spacing) * 4);
    height:calc(var(--spacing) * 4)
  }

  :is(.\*\:\[svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-6>*):is(svg:not([class*=size-])) {
    width:calc(var(--spacing) * 6);
    height:calc(var(--spacing) * 6)
  }

  .\[\&\>\.sr-only\]\:w-auto>.sr-only {
    width:auto
  }\[role\=radio\]\]\:mt-px:has(>[data-slot=field-content])>[role=checkbox],\[role\=radio\]\]\:mt-px:has(>[data-slot=field-content]) [role=radio]) {
    margin-top:1px
  }

  @container field-group (min-width:28rem) {
    :is(.\@md\/field-group\:has-\[\>\[data-slot\=field-content\]\]\:\[\&\>\[role\=checkbox\]\,\[role\=radio\]\]\:mt-px:has(>[data-slot=field-content])>[role=checkbox],.\@md\/field-group\:has-\[\>\[data-slot\=field-content\]\]\:\[\&\>\[role\=checkbox\]\,\[role\=radio\]\]\:mt-px:has(>[data-slot=field-content]) [role=radio]) {
      margin-top:1px
    }
  }

  .\[\&\>a\]\:underline>a {
    text-decoration-line:underline
  }

  .\[\&\>a\]\:underline-offset-4>a {
    text-underline-offset:4px
  }

  .\[\&\>svg\]\:pointer-events-none>svg {
    pointer-events:none
  }

  .\[\&\>svg\]\:size-3\!>svg {
    width:calc(var(--spacing) * 3)!important;
    height:calc(var(--spacing) * 3)!important
  }

  .\[\&\>svg\]\:size-3\.5>svg {
    width:calc(var(--spacing) * 3.5);
    height:calc(var(--spacing) * 3.5)
  }

  .\[\&\>svg\]\:size-4>svg {
    width:calc(var(--spacing) * 4);
    height:calc(var(--spacing) * 4)
  }

  [data-variant=legend]+.\[\[data-variant\=legend\]\+\&\]\:-mt-1\.5 {
    margin-top:calc(var(--spacing) * -1.5)
  }
}

:root {
  --font-sans:"Instrument Serif", Georgia, serif;
  --font-satoshi:"Instrument Serif", Georgia, serif;
  --font-display:"Instrument Serif", Georgia, serif;
  --font-mono:"SFMono-Regular", Consolas, monospace;
  --bg:#f3f3ef;
  --surface:#fff;
  --ink:#171815;
  --muted:#6f716a;
  --line:#d8d9d2;
  --lime:#d8ff4f;
  --blue:#a8c9f0;
  --coral:#f1a98f;
  --green:#9fcdb7;
  --shell:var(--bg)
}

@supports (color:color-mix(in lab, red, red)) {
  :root {
    --shell:color-mix(in srgb, var(--bg) 55%, var(--surface))
  }
}

:root {
  --dark-surface:linear-gradient(180deg, #2b2c26 0%, #232420 48%, #191a16 100%);
  --text-body:15px;
  --leading-body:1.72;
  --text-detail:12.5px;
  --leading-detail:1.55
}

.dark {
  --bg:#0d0e0c;
  --surface:#171815;
  --ink:#f3f4ee;
  --muted:#96998f;
  --line:#30322d;
  --lime:#d8ff4f
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  max-width:100%
}

body {
  background:var(--bg);
  max-width:100%;
  color:var(--ink);
  font-family:var(--font-sans);
  letter-spacing:0;
  margin:0
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit
}

svg {
  stroke-width:1.8px;
  width:18px;
  height:18px
}

.portfolio {
  background:var(--shell);
  border:none;
  border-radius:28px;
  width:min(1120px,100% - 80px);
  margin:48px auto;
  position:relative;
  box-shadow:0 32px 90px #00000029,0 10px 32px #00000014
}

.nav {
  z-index:50;
  background:0 0;
  border-top-left-radius:27px;
  border-top-right-radius:27px;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  height:64px;
  padding:0 44px;
  transition:background-color .35s;
  display:grid;
  position:sticky;
  top:0;
  border-bottom:none!important
}

.brand {
  background:var(--bg);
  border-radius:5px;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:42px;
  height:24px;
  display:flex
}

.brand i {
  background:var(--muted);
  border-radius:50%;
  width:5px;
  height:5px;
  transition:transform .2s,background .2s
}

.brand:hover i {
  background:var(--ink);
  transform:translateY(-1px)
}

.brand:hover i:first-child {
  background:var(--lime)
}

.nav nav {
  color:var(--muted);
  gap:30px;
  font-size:13px;
  display:flex
}

.nav nav a {
  transition:color .2s;
  position:relative
}

.nav nav a:after {
  content:"";
  background:var(--ink);
  height:1px;
  transition:right .25s;
  position:absolute;
  bottom:-7px;
  left:0;
  right:100%
}

.nav nav a:hover {
  color:var(--ink)
}

.nav nav a:hover:after {
  right:0
}

.nav-actions {
  grid-column:3;
  justify-self:end;
  align-items:center;
  gap:6px;
  display:flex
}

.mobile-menu-trigger {
  width:36px;
  height:36px;
  color:var(--muted);
  cursor:pointer;
  border:0;
  border-radius:50%;
  place-items:center;
  padding:0;
  transition:color .2s,transform .2s;
  display:none;
  background:0 0!important
}

.mobile-menu-trigger:hover,.mobile-menu-trigger[data-popup-open] {
  color:var(--ink);
  background:0 0!important
}

@supports (color:color-mix(in lab, red, red)) {
}

.nav nav a[aria-current=page] {
  color:var(--ink)
}

.nav nav a[aria-current=page]:after {
  content:none
}

@supports (color:color-mix(in lab, red, red)) {
}

.hero {
  grid-template-columns:minmax(0,660px) 250px;
  justify-content:space-between;
  align-items:center;
  gap:36px;
  width:min(100%,1040px);
  min-height:360px;
  margin:0 auto;
  padding:42px 32px 48px;
  display:grid
}

.hero-copy {
  flex-direction:column;
  min-height:0;
  padding:10px 0 0;
  display:flex
}

.hero-name {
  letter-spacing:-.03em;
  margin:0 0 7px;
  font-size:clamp(40px,3.4vw,46px);
  line-height:.95;
  font-family:"Instrument Serif", Georgia, serif!important;
  font-weight:700!important
}

.hero-name>span {
  padding-bottom:.05em;
  display:block;
  overflow:hidden
}

.hero-name>span>span {
  display:block
}

.hero-role {
  max-width:620px;
  color:var(--ink);
  margin:0;
  font-size:clamp(24px,1.8vw,29px);
  line-height:1.25;
  font-family:"Instrument Serif", Georgia, serif!important;
  font-weight:500!important
}

.hero-role em {
  color:var(--muted);
  font-style:italic;
  font-family:"Instrument Serif", Georgia, serif!important;
  font-weight:500!important
}

.hero-actions {
  align-items:center;
  gap:24px;
  margin-top:28px;
  display:flex
}

.primary-action {
  color:#171815;
  background:var(--lime);
  border-radius:999px;
  align-items:center;
  gap:22px;
  min-height:46px;
  padding:0 18px;
  font-size:12px;
  font-weight:650;
  transition:transform .25s,box-shadow .25s;
  display:inline-flex;
  border:none!important;
  box-shadow:0 8px 24px #00000038!important
}

.primary-action:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 30px #00000052!important
}

.portrait-wrap {
  aspect-ratio:1;
  perspective:900px;
  background:#10110f;
  border-radius:14px;
  place-self:start end;
  width:250px;
  margin-top:10px;
  position:relative;
  overflow:hidden
}

.portrait-stage {
  transform-style:preserve-3d;
  will-change:transform;
  position:absolute;
  inset:0
}

.portrait {
  position:absolute;
  inset:0
}

.portrait img {
  object-fit:cover;
  object-position:center;
  filter:contrast(1.04)
}

::view-transition-old(root) {
  animation:.35s cubic-bezier(.4,0,1,1) theme-out
}

::view-transition-new(root) {
  animation:.55s cubic-bezier(.16,1,.3,1) theme-in
}





.ticker {
  border-bottom:1px solid var(--line);
  height:46px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#0000,#000 5% 95%,#0000);
  mask-image:linear-gradient(90deg,#0000,#000 5% 95%,#0000)
}

.ticker-track {
  will-change:transform;
  align-items:center;
  width:max-content;
  height:100%;
  animation:26s linear infinite ticker-scroll;
  display:flex
}

.ticker-group {
  flex-shrink:0;
  align-items:center;
  height:100%;
  display:flex
}

.ticker span {
  color:var(--muted);
  font:9px var(--font-mono);
  text-transform:uppercase;
  white-space:nowrap;
  align-items:center;
  gap:28px;
  padding-right:28px;
  display:flex
}

.ticker i {
  background:var(--coral);
  flex:none;
  width:5px;
  height:5px;
  transform:rotate(45deg)
}

@keyframes ticker-scroll {
  to {
    transform:translate(-25%)
  }
}

.section {
  border-bottom:1px solid var(--line);
  padding:82px 54px
}

.section-head {
  justify-content:space-between;
  align-items:end;
  gap:35px;
  margin-bottom:42px;
  display:flex
}

.section-head h2 {
  letter-spacing:-.03em;
  margin:12px 0 0;
  font-size:clamp(40px,3.4vw,46px);
  font-weight:700;
  line-height:.95
}

.section-head>p {
  max-width:370px;
  color:var(--muted);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  margin:0
}

.github-mark {
  background:currentColor;
  flex:none;
  width:18px;
  height:18px;
  display:block;
  -webkit-mask:url(/assets/github.svg) 50%/contain no-repeat;
  mask:url(/assets/github.svg) 50%/contain no-repeat
}

@media (max-width:460px) {
}

.explore-more-wrap {
  justify-content:center;
  align-items:center;
  margin-top:36px;
  display:flex
}

.explore-more-link {
  color:var(--muted);
  font:11px/1 var(--font-mono);
  letter-spacing:.02em;
  background:0 0;
  border-radius:0;
  align-items:center;
  gap:8px;
  padding:4px 0;
  transition:color .18s;
  display:inline-flex;
  box-shadow:none!important;
  border:0!important
}

.explore-more-link:hover {
  color:var(--ink);
  background:0 0;
  box-shadow:none!important
}

.explore-more-link svg {
  transition:transform .18s cubic-bezier(.23,1,.32,1)
}

@media (hover:hover) and (pointer:fine) {
  .explore-more-link:hover svg {
    transform:translate(2px)
  }
}

.collection-page {
  border-bottom:1px solid var(--line);
  padding:62px 54px 82px
}

.blog-collection-page,.projects-collection-page {
  padding-top:38px
}

.collection-breadcrumb ol {
  color:var(--muted);
  font:10px/1 var(--font-mono);
  text-transform:none;
  gap:7px
}

.collection-breadcrumb a {
  color:var(--muted);
  align-items:center;
  gap:6px;
  transition:color .2s;
  display:inline-flex
}

.collection-breadcrumb a:hover {
  color:var(--ink)
}

.collection-breadcrumb a svg {
  width:13px;
  height:13px
}

.collection-breadcrumb [data-slot=breadcrumb-separator] {
  color:var(--line)
}

.about-page {
  color:var(--ink)
}

.about-page a:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:5px
}

@keyframes about-rise {
  0% {
    opacity:0;
    transform:translateY(14px)
  }
}

@keyframes about-title-rise {
  0% {
    transform:translateY(104%)
  }
}























@media (max-width:1040px) {
}

.about-chapter {
  --about-gutter:clamp(34px, 5vw, 78px);
  border-top:1px solid var(--line);
  padding:78px 54px
}

@supports (color:color-mix(in lab, red, red)) {
}

















strong{
  opacity:0;
  transition:opacity .4s,transform .4s cubic-bezier(.65,0,.35,1);
  transform:translateY(8px)
}strong{
  opacity:1;
  transition:opacity .62s ease calc(var(--trace-delay) + .17s), transform .62s cubic-bezier(.22, 1, .36, 1) calc(var(--trace-delay) + .17s);
  transform:none
}strong,span) {
  z-index:1;
  position:relative
}:nth-child(5)) {
  --cell-lane:1
}:nth-child(6)) {
  --cell-lane:2
}:nth-child(7)) {
  --cell-lane:3
}strong,span) {
  animation:about-build-cell-in .66s cubic-bezier(.22, 1, .36, 1) calc(.24s + var(--cell-lane,0) * 70ms) both
}strong,span) {
  animation:about-build-cell-out .42s cubic-bezier(.65, 0, .35, 1) calc(var(--cell-lane,0) * 30ms) both
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}.github-mark) {
  width:16px;
  height:16px;
  color:var(--muted);
  flex:none;
  transition:color .24s
}

@supports (color:color-mix(in lab, red, red)) {
}





















@supports (color:color-mix(in lab, red, red)) {
}







li) {
  animation:about-perspective-drop-in .72s cubic-bezier(.22, 1, .36, 1) calc(var(--row,0) * 80ms) both
}li) {
  animation-name:about-perspective-raise-in
}li) {
  animation:about-perspective-drop-out .44s cubic-bezier(.65, 0, .35, 1) calc(var(--row,0) * 30ms) both
}li) {
  animation-name:about-perspective-raise-out
}







p) {
  animation:.5s cubic-bezier(.65,0,.35,1) both about-coda-focus-out
}dd) {
  animation:about-coda-settle-out .44s cubic-bezier(.65, 0, .35, 1) calc(var(--note,0) * 34ms) both
}





@media (hover:hover) and (pointer:fine) {

  @supports (color:color-mix(in lab, red, red)) {
  }.github-mark) {
    color:var(--ink)
  }
}

@media (max-width:900px) {

  .about-chapter{
    padding:58px 20px
  }:nth-child(3)) {
    --cell-lane:1
  }:nth-child(5)) {
    --cell-lane:2
  }:nth-child(7)) {
    --cell-lane:3
  }
}

@media (max-width:520px) {

  .about-chapter{
    padding:48px 16px
  }
}

@media (max-width:340px) {
}

@media (prefers-reduced-motion:reduce) {p),strong,p),strong,span),p),li),p),dd){
    opacity:1;
    filter:none;
    clip-path:none;
    transition:none;
    animation:none;
    transform:none
  }
}

.blog-search,.blog-sort-trigger {
  height:42px;
  color:var(--muted);
  background:var(--surface);
  align-items:center;
  gap:9px;
  padding:0 13px;
  display:flex
}

@supports (color:color-mix(in lab, red, red)) {
  .blog-search,.blog-sort-trigger {
    background:color-mix(in srgb, var(--surface) 88%, var(--bg))
  }
}

.blog-search,.blog-sort-trigger {
  border:0;
  border-radius:11px;
  transition:color .2s,background .2s,box-shadow .25s,transform .2s;
  box-shadow:0 10px 28px #00000059
}

.blog-search {
  flex:auto;
  min-width:0
}

.blog-search:hover,.blog-sort-trigger:hover,.blog-sort-trigger[data-popup-open] {
  color:var(--ink);
  background:var(--surface);
  transform:translateY(-1px);
  box-shadow:0 18px 40px #0000007a
}

.blog-search:focus-within,.blog-sort-trigger:focus-visible {
  color:var(--ink);
  background:var(--surface);
  box-shadow:0 18px 40px #0000007a, 0 0 0 1px var(--line);
  outline:0
}

@supports (color:color-mix(in lab, red, red)) {
  .blog-search:focus-within,.blog-sort-trigger:focus-visible {
    box-shadow:0 18px 40px #0000007a, 0 0 0 1px color-mix(in srgb, var(--line) 82%, transparent)
  }
}

.blog-search>svg {
  flex:none;
  width:15px;
  height:15px
}

.blog-search>.blog-search-command {
  width:14px;
  height:14px;
  color:var(--muted)
}

@supports (color:color-mix(in lab, red, red)) {
  .blog-search>.blog-search-command {
    color:color-mix(in srgb, var(--muted) 68%, transparent)
  }
}

.blog-search input {
  width:100%;
  min-width:0;
  color:var(--ink);
  background:0 0;
  border:0;
  outline:0;
  padding:0;
  font-size:12px
}

.blog-search input::placeholder {
  color:var(--muted);
  opacity:.78
}

.blog-search input::-webkit-search-cancel-button {
  display:none
}

.blog-search button {
  width:25px;
  height:25px;
  color:var(--muted);
  cursor:pointer;
  background:0 0;
  border:0;
  border-radius:50%;
  flex:none;
  place-items:center;
  padding:0;
  display:grid
}

.blog-search button:hover {
  color:var(--ink);
  background:var(--ink)
}

@supports (color:color-mix(in lab, red, red)) {
  .blog-search button:hover {
    background:color-mix(in srgb, var(--ink) 7%, transparent)
  }
}

.blog-search button svg {
  width:13px;
  height:13px
}

.blog-sort-trigger {
  white-space:nowrap;
  cursor:pointer;
  flex:none;
  justify-content:flex-start;
  width:fit-content;
  font-size:11px
}

.blog-sort-trigger>svg {
  flex:none;
  width:15px;
  height:15px
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@media (max-width:800px) {
  .collection-page {
    padding:42px 20px 56px
  }

  .blog-collection-page,.projects-collection-page {
    padding-top:26px
  }

  .blog-search {
    width:100%;
    max-width:none
  }

  .blog-sort-trigger {
    flex:none
  }
}

@media (max-width:460px) {
  .collection-page {
    padding:34px 16px 48px
  }

  .blog-collection-page,.projects-collection-page {
    padding-top:22px
  }

  .blog-sort-trigger {
    flex-basis:auto;
    width:auto
  }
}

@media (max-width:800px) {
}

@media (prefers-reduced-transparency:reduce) {
}

.github-head-centered {
  text-align:center!important;
  justify-content:center!important;
  width:100%!important;
  margin-bottom:24px!important;
  display:flex!important
}

.github-head-wrap {
  text-align:center;
  flex-direction:column;
  align-items:center;
  display:flex
}

.github-icon-badge {
  background:linear-gradient(#2e2f29 0%,#23241f 50%,#1a1b17 100%);
  border-radius:18px;
  justify-content:center;
  align-items:center;
  width:64px;
  height:64px;
  margin-bottom:16px;
  transition:transform .25s,box-shadow .25s;
  display:flex;
  border:none!important;
  box-shadow:0 10px 26px #0006!important
}

.github-icon-badge:hover {
  transform:translateY(-3px)scale(1.06);
  box-shadow:0 14px 32px #00000080!important
}

.github-header-svg {
  width:40px;
  height:40px;
  filter:invert()!important
}

.light .github-icon-badge {
  background:linear-gradient(#2e2f29 0%,#23241f 50%,#1a1b17 100%);
  border:none!important;
  box-shadow:0 10px 26px #0006!important
}

.light .github-header-svg {
  filter:invert()!important
}

.github-heading {
  letter-spacing:-.03em;
  color:var(--ink);
  text-align:center!important;
  margin:0 0 6px!important;
  font-family:"Instrument Serif", Georgia, serif!important;
  font-size:clamp(40px,3.4vw,46px)!important;
  font-weight:700!important;
  line-height:.95!important
}

.github-subtext {
  color:var(--muted);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  justify-content:center;
  align-items:center;
  gap:4px;
  margin:0;
  display:inline-flex;
  text-align:center!important
}

.github-card {
  background:linear-gradient(#2e2f29 0%,#23241f 50%,#1a1b17 100%);
  border-radius:24px;
  flex-direction:column;
  align-items:center;
  width:fit-content;
  max-width:100%;
  margin:24px auto 0;
  padding:24px 28px 20px;
  display:flex;
  position:relative;
  border:none!important;
  box-shadow:0 20px 48px #00000073!important
}

.light .github-card {
  background:linear-gradient(#2e2f29 0%,#23241f 50%,#1a1b17 100%);
  border:none!important;
  box-shadow:0 20px 48px #00000073!important
}

.github-graph-scroll {
  scrollbar-width:thin;
  justify-content:center;
  width:100%;
  padding-bottom:4px;
  display:flex;
  overflow-x:auto
}

.github-graph-grid {
  gap:3.5px;
  min-width:max-content;
  margin:0 auto;
  display:flex
}

.github-graph-col {
  flex-direction:column;
  gap:3.5px;
  display:flex
}

.github-square {
  cursor:pointer;
  border-radius:3px;
  width:11px;
  height:11px;
  transition:transform .15s,filter .15s
}

.github-square:hover {
  z-index:5;
  transform:scale(1.35)
}

.level-0 {
  background:#ffffff0f
}

.level-1 {
  background:#0e4429
}

.level-2 {
  background:#006d32
}

.level-3 {
  background:#26a641
}

.level-4 {
  background:#39d353
}



.github-legend {
  color:#ffffff8c;
  width:100%;
  font:10px/1 var(--font-mono);
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:18px;
  display:flex
}

.github-legend-squares {
  align-items:center;
  gap:3px;
  display:flex
}

.github-legend-squares i {
  border-radius:2px;
  width:9.5px;
  height:9.5px;
  display:block
}



.dock-wrapper {
  justify-content:center;
  align-items:center;
  width:100%;
  margin-top:24px;
  padding-top:36px;
  padding-bottom:8px;
  display:flex;
  position:relative;
  overflow:visible!important
}

.tools-description {
  text-align:center;
  color:var(--muted);
  font-size:12px;
  font-family:var(--font-mono);
  opacity:.85;
  max-width:500px;
  margin-top:14px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.5
}

.dock-stack {
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  width:100%;
  max-width:900px;
  padding:0 10px;
  display:flex;
  overflow:visible!important
}

.dock-item-wrap {
  flex-direction:column;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  margin-left:-14px;
  display:flex;
  position:relative;
  overflow:visible!important
}

.dock-item-wrap:first-child {
  margin-left:0
}

.dock-item-card {
  -webkit-backdrop-filter:blur(14px);
  cursor:pointer;
  transform-origin:bottom;
  -webkit-user-select:none;
  user-select:none;
  background:linear-gradient(135deg,#30312bf2 0%,#1a1b16fa 100%);
  border-radius:14px;
  justify-content:center;
  align-items:center;
  width:50px;
  height:50px;
  transition:box-shadow .25s;
  display:flex;
  position:relative;
  border:none!important;
  box-shadow:-5px 7px 20px #00000073!important
}

.dock-item-card:hover {
  box-shadow:-7px 11px 26px #0000008c!important
}

.light .dock-item-card {
  background:linear-gradient(135deg,#fffffffa 0%,#f0f2ebfa 100%);
  border:none!important;
  box-shadow:-4px 6px 16px #0000001f!important
}

.light .dock-item-card:hover {
  box-shadow:-6px 9px 22px #0000002e!important
}

.dock-item-icon {
  object-fit:contain;
  width:28px;
  height:28px
}

.nav,.hero,.ticker,.section,footer {
  background:0 0
}

.hero {
  width:100%;
  padding-inline:72px
}

.ticker {
  border:0!important
}

footer {
  min-height:58px;
  color:var(--muted);
  font-size:var(--text-body);
  text-align:center;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:12px 28px;
  display:flex
}

.footer-social {
  justify-content:center;
  align-items:center;
  gap:4px;
  margin:0;
  padding:0;
  list-style:none;
  display:flex
}

.footer-social a {
  width:34px;
  height:34px;
  -webkit-mask-image:var(--mark);
  -webkit-mask-image:var(--mark);
  -webkit-mask-image:var(--mark);
  -webkit-mask-image:var(--mark);
  mask-image:var(--mark);
  background:currentColor;
  transition:color .2s,transform .2s;
  display:block;
  -webkit-mask-position:50%;
  mask-position:50%;
  -webkit-mask-size:20px 20px;
  mask-size:20px 20px;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat
}

.footer-social a:hover {
  color:var(--ink);
  transform:translateY(-2px)
}

.footer-social a:focus-visible {
  box-shadow:0 0 0 3px var(--lime);
  border-radius:8px;
  outline:none
}

@supports (color:color-mix(in lab, red, red)) {
  .footer-social a:focus-visible {
    box-shadow:0 0 0 3px color-mix(in srgb, var(--lime) 32%, transparent)
  }
}

@media (max-width:800px) {
  footer {
    gap:9px;
    min-height:56px;
    padding:11px 20px
  }
}

@media (prefers-reduced-motion:reduce) {
  .ticker-track {
    animation:none
  }

  .footer-social a {
    transition:color .2s
  }

  .footer-social a:hover {
    transform:none
  }
}

@media (max-width:800px) {
}

@media (max-width:460px) {
}

@media (max-width:1100px) and (min-width:801px) {
  .hero {
    grid-template-columns:minmax(0,1fr) 300px;
    gap:30px;
    width:min(100%,900px);
    padding-inline:34px
  }

  .hero-name {
    font-size:40px
  }

  .hero-role {
    font-size:25px
  }

  .portrait-wrap {
    width:240px
  }
}

@media (max-width:800px) {
  .portfolio {
    border-radius:18px;
    width:min(100% - 24px,680px);
    margin:12px auto
  }

  .nav {
    grid-template-columns:1fr auto 1fr;
    height:60px;
    padding-inline:20px;
    border-bottom:none!important
  }

  .nav nav {
    display:none
  }

  .brand {
    grid-column:2;
    justify-self:center
  }

  .nav-actions {
    grid-column:3;
    justify-self:end
  }

  .mobile-menu-trigger {
    display:grid
  }

  .dock-wrapper {
    overflow-x:clip!important
  }

  .dock-stack {
    grid-template-columns:repeat(7,36px);
    place-content:center;
    gap:0;
    width:252px;
    max-width:252px;
    padding-inline:0;
    display:grid
  }

  .dock-item-wrap,.dock-item-wrap:first-child {
    width:36px;
    margin-left:0;
    transform:none!important
  }

  .dock-item-card {
    border-radius:13px;
    width:46px;
    height:46px
  }

  .hero {
    text-align:center;
    flex-direction:column;
    align-items:center;
    gap:0;
    width:100%;
    padding:36px 20px 28px;
    display:flex
  }

  .portrait-wrap {
    border-radius:20px;
    order:-1;
    place-self:center;
    min-height:128px;
    position:relative;
    overflow:hidden;
    aspect-ratio:1!important;
    width:128px!important;
    height:128px!important;
    margin:0 auto 22px!important;
    top:auto!important;
    left:auto!important;
    right:auto!important
  }

  .portrait-stage,.portrait {
    width:100%;
    height:100%;
    position:absolute;
    inset:0
  }

  .portrait img {
    object-fit:cover!important;
    width:100%!important;
    height:100%!important
  }

  .hero-copy {
    text-align:center;
    align-items:center;
    width:100%;
    min-height:0;
    padding-top:0
  }

  .hero-name {
    white-space:normal;
    text-align:center;
    max-width:100%;
    font-size:clamp(32px,7vw,42px);
    margin:0 0 5px!important
  }

  .hero-role {
    text-align:center;
    max-width:100%;
    margin:0 auto;
    font-size:clamp(18px,4.2vw,23px);
    line-height:1.35
  }

  .hero-actions {
    flex-flow:wrap;
    justify-content:center;
    align-items:center;
    gap:12px;
    width:auto;
    max-width:100%;
    margin-top:24px;
    display:flex
  }

  .hero-action-button {
    justify-content:center;
    min-height:48px;
    font-size:12px;
    width:auto!important;
    max-width:max-content!important;
    padding:0 24px!important
  }

  .ticker {
    border-top:1px solid var(--line);
    margin-top:130px!important
  }

  .section {
    padding:56px 20px
  }

  .section-head {
    flex-direction:column;
    align-items:start
  }
}

@media (max-width:460px) {
  .portfolio {
    border:none;
    border-radius:18px;
    width:calc(100% - 20px);
    margin:10px auto;
    box-shadow:0 18px 48px #00000024,0 6px 18px #00000014
  }

  .nav {
    height:56px;
    padding-inline:18px;
    border-bottom:none!important
  }

  .hero {
    text-align:center;
    flex-direction:column;
    align-items:center;
    min-height:0;
    padding:28px 16px 24px;
    display:flex;
    position:relative
  }

  .portrait-wrap {
    border-radius:18px;
    position:relative;
    top:auto;
    right:auto;
    aspect-ratio:1!important;
    width:116px!important;
    height:116px!important;
    margin:0 auto 18px!important
  }

  .hero-name {
    max-width:100%;
    font-size:32px;
    margin:0 0 4px!important
  }

  .hero-role {
    font-size:18px;
    line-height:1.35
  }

  .hero-actions {
    gap:10px;
    width:auto;
    max-width:100%;
    margin-top:22px
  }

  .hero-action-button {
    gap:8px;
    min-height:44px;
    font-size:11px;
    width:auto!important;
    max-width:max-content!important;
    padding:0 12px!important
  }

  .hero-action-button svg {
    width:13px;
    height:13px
  }

  .ticker {
    height:40px;
    margin-top:110px!important
  }

  .ticker span {
    gap:12px;
    padding-right:12px;
    font-size:8px
  }

  .ticker:before,.ticker:after {
    width:28px
  }
}

.brand {
  background:0 0;
  border-radius:0;
  justify-content:flex-start;
  gap:6px;
  width:34px;
  height:24px
}

.brand i {
  width:7px;
  height:7px
}

.brand i:first-child {
  background:#ff5f57
}

.brand i:nth-child(2) {
  background:#febc2e
}

.brand i:nth-child(3) {
  background:#28c840
}

.brand:hover i {
  background:revert-layer
}

.brand:hover i:first-child {
  background:#ff5f57;
  transform:translateY(-2px)
}

.brand:hover i:nth-child(2) {
  background:#febc2e;
  transform:translateY(2px)
}

.brand:hover i:nth-child(3) {
  background:#28c840;
  transform:translateY(-2px)
}

.hero-action-button {
  border:1px solid var(--line);
  border-radius:999px;
  justify-content:center;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:0 24px;
  font-size:13px;
  font-weight:520;
  transition:color .3s,background .3s,box-shadow .3s;
  display:inline-flex;
  position:relative;
  overflow:hidden;
  transform:none!important
}

.hero-action-button:hover {
  transform:none!important
}

.hero-action-button svg {
  width:16px;
  height:16px
}

.primary-action {
  color:#f3f4ee;
  background:linear-gradient(#34352f 0%,#292a25 48%,#20211d 100%);
  border-color:#3e4039;
  box-shadow:inset 0 1px #ffffff17,inset 0 -1px #00000052,0 10px 24px #0000004d
}

.primary-action:hover {
  color:#fff;
  background:linear-gradient(#3a3b35 0%,#2d2e29 48%,#23241f 100%);
  box-shadow:inset 0 1px #ffffff1c,inset 0 -1px #00000057,0 13px 30px #0000005c
}

.ticker {
  border-top:1px solid var(--line);
  margin-top:32px;
  position:relative;
  -webkit-mask-image:none;
  mask-image:none
}

.ticker:before,.ticker:after {
  content:"";
  z-index:2;
  pointer-events:none;
  width:clamp(36px,7vw,90px);
  position:absolute;
  top:0;
  bottom:0
}

.ticker:before {
  background:linear-gradient(90deg, var(--shell) 28%, transparent);
  left:0
}

.ticker:after {
  background:linear-gradient(270deg, var(--shell) 28%, transparent);
  right:0
}

.ticker i {
  background:var(--ink)
}

@supports (color:color-mix(in lab, red, red)) {
  .ticker i {
    background:color-mix(in srgb, var(--ink) 72%, transparent)
  }
}

@media (max-width:460px) {
  .hero-role {
    margin-top:10px
  }

  .hero {
    min-height:0;
    padding-bottom:30px
  }

  .hero-actions {
    margin-top:26px
  }

  .portrait-wrap {
    width:58px;
    margin-top:0;
    top:38px
  }

  .hero-action-button {
    min-height:46px;
    padding-inline:18px;
    font-size:11px
  }

  .ticker:before,.ticker:after {
    width:28px
  }
}

@media (max-width:340px) {
  .hero-actions {
    gap:6px
  }

  .hero-action-button {
    letter-spacing:-.01em;
    gap:5px;
    min-height:40px;
    font-size:10px;
    padding:0 10px!important
  }

  .hero-action-button svg {
    width:11px;
    height:11px
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
}

.article {
  border-bottom:1px solid var(--line);
  width:min(100%,860px);
  margin:0 auto;
  padding:52px 44px 72px
}

.article-share-trigger {
  color:var(--muted);
  cursor:pointer;
  background:0 0;
  border:0;
  align-items:center;
  gap:7px;
  margin:-9px -10px;
  padding:9px 10px;
  transition:color .2s;
  display:inline-flex
}

.article-share-trigger:hover {
  color:var(--ink)
}

.article-share-trigger:focus-visible {
  box-shadow:0 0 0 3px var(--lime);
  border-radius:7px;
  outline:none
}

@supports (color:color-mix(in lab, red, red)) {
  .article-share-trigger:focus-visible {
    box-shadow:0 0 0 3px color-mix(in srgb, var(--lime) 32%, transparent)
  }
}

[data-sonner-toaster][data-sonner-theme] {
  --normal-bg:var(--surface)!important;
  --normal-text:var(--ink)!important;
  --normal-border:transparent!important;
  --border-radius:14px!important
}

.project-detail-body {
  box-shadow:inset 0 1px var(--line);
  padding-top:40px
}

.project-detail-body>h2:first-child {
  margin-top:0
}

.article-body {
  color:var(--muted);
  font-size:var(--text-body);
  line-height:var(--leading-body)
}

.article-body p,.article-body li {
  text-align:justify;
  text-justify:inter-word;
  -webkit-hyphens:auto;
  hyphens:auto;
  text-wrap:pretty
}

.article-body p {
  margin:0 0 24px
}

.article-body h2 {
  color:var(--ink);
  letter-spacing:-.015em;
  margin:52px 0 14px;
  font-family:"Instrument Serif", Georgia, serif;
  font-size:clamp(23px,2.6vw,27px);
  font-weight:700;
  line-height:1.22
}

.article-body h3 {
  color:var(--ink);
  margin:34px 0 10px;
  font-family:"Instrument Serif", Georgia, serif;
  font-size:17px;
  font-weight:700;
  line-height:1.35
}

.article-body strong {
  color:var(--ink);
  font-weight:650
}

.article-body a {
  color:var(--ink);
  border-bottom:1px solid var(--muted)
}

@supports (color:color-mix(in lab, red, red)) {
  .article-body a {
    border-bottom:1px solid color-mix(in srgb, var(--muted) 55%, transparent)
  }
}

.article-body a {
  overflow-wrap:anywhere;
  transition:color .2s,border-color .2s
}

.article-body a:hover {
  border-bottom-color:var(--ink)
}

.article-body :is(h2,h3,h4) a {
  color:inherit;
  border:0
}

.article-body ul {
  margin:0 0 24px;
  padding-left:19px;
  list-style:none
}

.article-body ul li {
  margin-bottom:6px;
  position:relative
}

.article-body ul li:before {
  content:"";
  background:var(--muted);
  width:5px;
  height:5px;
  position:absolute;
  top:.62em;
  left:-19px;
  transform:rotate(45deg)
}

.article-body li>p:last-child {
  margin-bottom:0
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}ol,li) {
  margin:0
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}

.article-body hr {
  background:var(--line);
  border:0;
  height:1px;
  margin:44px 0
}

.article-body blockquote {
  border-left:2px solid var(--lime);
  color:var(--ink);
  font:italic var(--text-body)/var(--leading-body) var(--font-display);
  margin:28px 0;
  padding-left:20px
}

.article-body blockquote p {
  text-align:left;
  -webkit-hyphens:none;
  hyphens:none
}

.article-body blockquote p:last-child {
  margin-bottom:0
}

.article-body :not(pre)>code {
  color:var(--ink);
  background:var(--ink);
  padding:2px 6px
}

@supports (color:color-mix(in lab, red, red)) {
  .article-body :not(pre)>code {
    background:color-mix(in srgb, var(--ink) 8%, transparent)
  }
}

.article-body :not(pre)>code {
  font:.875em var(--font-mono);
  border-radius:5px
}

.article-body pre {
  color:#d8d8d0;
  font:12.5px/1.7 var(--font-mono);
  background:0 0;
  margin:0;
  padding:16px 0;
  overflow-x:auto
}

.article-body pre code {
  color:inherit;
  font:inherit;
  background:0 0;
  padding:0;
  display:grid
}

.article-body pre code [data-line] {
  padding:0 20px
}

.article-body pre code[data-line-numbers] {
  counter-reset:line
}

.article-body pre code[data-line-numbers] [data-line] {
  padding-left:52px
}

.article-body pre code[data-line-numbers] [data-line]:before {
  counter-increment:line;
  content:counter(line);
  color:#5f6259;
  text-align:right;
  width:44px;
  position:absolute;
  left:0
}

.article-body pre code[data-line-numbers] [data-line] {
  position:relative
}

.article-body pre code [data-line]:last-child:empty {
  display:none
}

.article-body table {
  border-collapse:collapse;
  width:100%;
  font-size:var(--text-body);
  margin:0 0 24px
}

.article-body th,.article-body td {
  text-align:left;
  border-bottom:1px solid var(--line);
  padding:11px 14px
}

.article-body th {
  color:var(--ink);
  font:10px var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.06em
}

.article-body img {
  border-radius:14px
}

@media (min-width:801px) {
  .article-body :is(h2,h3) {
    position:relative
  }

  .article-body :is(h2,h3):before {
    content:"#";
    color:var(--muted);
    opacity:0;
    font-weight:400;
    transition:opacity .2s;
    position:absolute;
    top:0;
    right:calc(100% + 12px)
  }

  .article-body :is(h2,h3):hover:before {
    opacity:1
  }
}

@media (max-width:800px) {
  .article {
    padding:32px 20px 52px
  }

  .project-detail-body {
    padding-top:32px
  }

  .article-share-trigger {
    gap:5px;
    margin:0;
    padding:0
  }

  .article-body h2 {
    margin-top:42px
  }

  .article-body pre {
    padding:15px 16px
  }
}

@media (max-width:300px) {
  .dock-stack {
    grid-template-columns:repeat(7,30px);
    width:210px
  }

  .dock-item-wrap,.dock-item-wrap:first-child {
    width:30px
  }

  .dock-item-card {
    border-radius:11px;
    width:38px;
    height:38px
  }
}

@media (max-width:340px) {
}

@media (min-width:341px) {
}

@media (prefers-reduced-motion:reduce) {
  .article-share-trigger {
    transition:none!important
  }
}

@supports (color:color-mix(in lab, red, red)) {
}

@supports (color:color-mix(in lab, red, red)) {
}



@media (max-width:800px) {
}

.light {
  --shadow-1:0 1px 2px #1718140a, 0 4px 10px #1718140d;
  --shadow-2:0 1px 3px #1718140d, 0 8px 20px #17181412;
  --shadow-3:0 2px 6px #1718140d, 0 16px 36px #17181417;
  --shadow-4:0 4px 10px #1718140f, 0 20px 44px #1718141c
}

.light .portfolio {
  box-shadow:var(--shadow-3)
}

.light .github-card {
  box-shadow:var(--shadow-3)!important
}

.light .blog-search,.light .blog-sort-trigger {
  box-shadow:var(--shadow-2)!important
}

.light .blog-search:hover,.light .blog-search:focus-within,.light .blog-sort-trigger:hover,.light .blog-sort-trigger:focus-visible,.light .blog-sort-trigger[data-popup-open] {
  box-shadow:var(--shadow-3)!important
}

.light .primary-action {
  box-shadow:inset 0 1px #ffffff17,inset 0 -1px #00000052,0 2px 4px #17181412,0 8px 18px #1718141a!important
}

.light .primary-action:hover {
  box-shadow:inset 0 1px #ffffff1c,inset 0 -1px #00000057,0 4px 8px #17181414,0 12px 26px #17181421!important
}

.light .explore-more-link,.light .explore-more-link:hover {
  box-shadow:none!important
}

.light .github-icon-badge {
  box-shadow:var(--shadow-1)!important
}

.light .github-icon-badge:hover {
  box-shadow:var(--shadow-2)!important
}

@media (max-width:800px) {
}

@media (max-width:460px) {
}small){
  color:#74776e
}

@media (max-width:800px) {
}

@media (max-width:460px) {
}

@property --tw-translate-x {
  syntax:"*";
  inherits:false;
  initial-value:0
}

@property --tw-translate-y {
  syntax:"*";
  inherits:false;
  initial-value:0
}

@property --tw-translate-z {
  syntax:"*";
  inherits:false;
  initial-value:0
}

@property --tw-rotate-x {
  syntax:"*";
  inherits:false
}

@property --tw-rotate-y {
  syntax:"*";
  inherits:false
}

@property --tw-rotate-z {
  syntax:"*";
  inherits:false
}

@property --tw-skew-x {
  syntax:"*";
  inherits:false
}

@property --tw-skew-y {
  syntax:"*";
  inherits:false
}

@property --tw-space-x-reverse {
  syntax:"*";
  inherits:false;
  initial-value:0
}

@property --tw-border-style {
  syntax:"*";
  inherits:false;
  initial-value:solid
}

@property --tw-leading {
  syntax:"*";
  inherits:false
}

@property --tw-font-weight {
  syntax:"*";
  inherits:false
}

@property --tw-tracking {
  syntax:"*";
  inherits:false
}

@property --tw-shadow {
  syntax:"*";
  inherits:false;
  initial-value:0 0 #0000
}

@property --tw-shadow-color {
  syntax:"*";
  inherits:false
}

@property --tw-shadow-alpha {
  syntax:"<percentage>";
  inherits:false;
  initial-value:100%
}

@property --tw-inset-shadow {
  syntax:"*";
  inherits:false;
  initial-value:0 0 #0000
}

@property --tw-inset-shadow-color {
  syntax:"*";
  inherits:false
}

@property --tw-inset-shadow-alpha {
  syntax:"<percentage>";
  inherits:false;
  initial-value:100%
}

@property --tw-ring-color {
  syntax:"*";
  inherits:false
}

@property --tw-ring-shadow {
  syntax:"*";
  inherits:false;
  initial-value:0 0 #0000
}

@property --tw-inset-ring-color {
  syntax:"*";
  inherits:false
}

@property --tw-inset-ring-shadow {
  syntax:"*";
  inherits:false;
  initial-value:0 0 #0000
}

@property --tw-ring-inset {
  syntax:"*";
  inherits:false
}

@property --tw-ring-offset-width {
  syntax:"<length>";
  inherits:false;
  initial-value:0
}

@property --tw-ring-offset-color {
  syntax:"*";
  inherits:false;
  initial-value:#fff
}

@property --tw-ring-offset-shadow {
  syntax:"*";
  inherits:false;
  initial-value:0 0 #0000
}

@property --tw-outline-style {
  syntax:"*";
  inherits:false;
  initial-value:solid
}

@property --tw-blur {
  syntax:"*";
  inherits:false
}

@property --tw-brightness {
  syntax:"*";
  inherits:false
}

@property --tw-contrast {
  syntax:"*";
  inherits:false
}

@property --tw-grayscale {
  syntax:"*";
  inherits:false
}

@property --tw-hue-rotate {
  syntax:"*";
  inherits:false
}

@property --tw-invert {
  syntax:"*";
  inherits:false
}

@property --tw-opacity {
  syntax:"*";
  inherits:false
}

@property --tw-saturate {
  syntax:"*";
  inherits:false
}

@property --tw-sepia {
  syntax:"*";
  inherits:false
}

@property --tw-drop-shadow {
  syntax:"*";
  inherits:false
}

@property --tw-drop-shadow-color {
  syntax:"*";
  inherits:false
}

@property --tw-drop-shadow-alpha {
  syntax:"<percentage>";
  inherits:false;
  initial-value:100%
}

@property --tw-drop-shadow-size {
  syntax:"*";
  inherits:false
}

@property --tw-duration {
  syntax:"*";
  inherits:false
}

@property --tw-content {
  syntax:"*";
  inherits:false;
  initial-value:""
}

@property --tw-backdrop-blur {
  syntax:"*";
  inherits:false
}

@property --tw-backdrop-brightness {
  syntax:"*";
  inherits:false
}

@property --tw-backdrop-contrast {
  syntax:"*";
  inherits:false
}

@property --tw-backdrop-grayscale {
  syntax:"*";
  inherits:false
}

@property --tw-backdrop-hue-rotate {
  syntax:"*";
  inherits:false
}

@property --tw-backdrop-invert {
  syntax:"*";
  inherits:false
}

@property --tw-backdrop-opacity {
  syntax:"*";
  inherits:false
}

@property --tw-backdrop-saturate {
  syntax:"*";
  inherits:false
}

@property --tw-backdrop-sepia {
  syntax:"*";
  inherits:false
}