/* layer: preflights */
*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);}

        :root {
          --bg: #fafafa;
          --fg: #1a1a2e;
          --card: #ffffff;
          --card-fg: #1a1a2e;
          --border: #e5e7eb;
          --muted: #9ca3af;
          --muted-fg: #6b7280;
          --accent: #d97706;
          --accent-fg: #ffffff;
          --success: #059669;
          color-scheme: light;
        }

        .dark {
          --bg: #0d1117;
          --fg: #c9d1d9;
          --card: #161b22;
          --card-fg: #c9d1d9;
          --border: #30363d;
          --muted: #484f58;
          --muted-fg: #8b949e;
          --accent: #d2991d;
          --accent-fg: #0d1117;
          --success: #3fb950;
          color-scheme: dark;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        html {
          scroll-behavior: smooth;
          transition: color 0.2s, background-color 0.2s;
        }

        body {
          font-size: 1.0625rem;
          transition: color 0.2s, background-color 0.2s;
        }

        ::selection {
          background-color: var(--accent);
          color: var(--accent-fg);
        }

        [x-cloak] { display: none !important; }
      
/* layer: shortcuts */
.nav-bar{position:fixed;top:0;left:0;right:0;z-index:100;border-bottom-width:1px;border-color:var(--border);background-color:var(--bg) /* var(--bg) */;}
.timeline-line{position:absolute;left:0.375rem;top:1.5rem;bottom:0;width:1px;background-color:var(--border) /* var(--border) */;}
.nav-inner{margin-left:auto;margin-right:auto;max-width:48rem;height:3.5rem;display:flex;align-items:center;justify-content:space-between;padding-left:1.5rem;padding-right:1.5rem;}
.section-container{margin-left:auto;margin-right:auto;max-width:48rem;padding-left:1.5rem;padding-right:1.5rem;padding-top:4rem;padding-bottom:4rem;}
.section-heading{margin-bottom:2rem;display:flex;align-items:center;gap:0.75rem;color:var(--accent) /* var(--accent) */;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
.timeline-dot{margin-top:0.375rem;width:0.75rem;height:0.75rem;flex-shrink:0;border-radius:9999px;background-color:var(--accent) /* var(--accent) */;}
.section-heading-line{height:1px;flex:1 1 0%;background-color:var(--border) /* var(--border) */;}
.badge{display:inline-flex;align-items:center;border-width:1px;border-color:var(--border);border-radius:0.25rem;background-color:var(--card) /* var(--card) */;padding-left:0.625rem;padding-right:0.625rem;padding-top:0.25rem;padding-bottom:0.25rem;font-size:0.875rem;line-height:1.25rem;color:var(--muted-fg) /* var(--muted-fg) */;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
.card-base{border-width:1px;border-color:var(--border);border-radius:0.5rem;background-color:var(--card) /* var(--card) */;padding:1.5rem;}
.skill-card{border-width:1px;border-color:var(--border);border-radius:0.5rem;background-color:var(--card) /* var(--card) */;padding:1rem;}
.body-base{background-color:var(--bg) /* var(--bg) */;color:var(--fg) /* var(--fg) */;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.link{color:var(--accent) /* var(--accent) */;-webkit-text-decoration-color:var(--accent) /* var(--accent) */;text-decoration-color:var(--accent) /* var(--accent) */;text-underline-offset:4px;}
.link:hover{text-decoration-line:underline;}
/* layer: default */
.absolute{position:absolute;}
.fixed{position:fixed;}
.relative{position:relative;}
.inset-0{inset:0;}
.right-4{right:1rem;}
.top-4{top:1rem;}
.z-200{z-index:200;}
.grid{display:grid;}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}
.mx-auto{margin-left:auto;margin-right:auto;}
.mb-1{margin-bottom:0.25rem;}
.mb-3{margin-bottom:0.75rem;}
.mr-1{margin-right:0.25rem;}
.mt-0\.5{margin-top:0.125rem;}
.mt-16{margin-top:4rem;}
.mt-2{margin-top:0.5rem;}
.block{display:block;}
.hidden{display:none;}
.h-4{height:1rem;}
.h-8{height:2rem;}
.h-auto{height:auto;}
.max-h-\[90vh\]{max-height:90vh;}
.max-w-2xl{max-width:42rem;}
.max-w-3xl{max-width:48rem;}
.max-w-full{max-width:100%;}
.max-w-xl{max-width:36rem;}
.min-h-screen{min-height:100vh;}
.w-32{width:8rem;}
.w-4{width:1rem;}
.w-48{width:12rem;}
.w-5{width:1.25rem;}
.w-8{width:2rem;}
.flex{display:flex;}
.inline-flex{display:inline-flex;}
.shrink-0{flex-shrink:0;}
.flex-col{flex-direction:column;}
.flex-wrap{flex-wrap:wrap;}
.cursor-zoom-in{cursor:zoom-in;}
.items-start{align-items:flex-start;}
.items-center{align-items:center;}
.justify-center{justify-content:center;}
.justify-between{justify-content:space-between;}
.gap-1{gap:0.25rem;}
.gap-2{gap:0.5rem;}
.gap-3{gap:0.75rem;}
.gap-4{gap:1rem;}
.gap-5{gap:1.25rem;}
.gap-6{gap:1.5rem;}
.gap-8{gap:2rem;}
.overflow-hidden{overflow:hidden;}
.whitespace-nowrap{white-space:nowrap;}
.border{border-width:1px;}
.border-t{border-top-width:1px;}
.border-border{border-color:var(--border);}
.hover\:border-accent\/60:hover{border-color:var(--accent);}
.rounded-lg{border-radius:0.5rem;}
.rounded-md{border-radius:0.375rem;}
.bg-black\/70{background-color:rgb(0 0 0 / 0.7) /* #000 */;}
.bg-card{background-color:var(--card) /* var(--card) */;}
.hover\:bg-border\/50:hover{background-color:var(--border) /* var(--border) */;}
.p-2{padding:0.5rem;}
.p-4{padding:1rem;}
.p-6{padding:1.5rem;}
.px-6{padding-left:1.5rem;padding-right:1.5rem;}
.py-12{padding-top:3rem;padding-bottom:3rem;}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem;}
.py-8{padding-top:2rem;padding-bottom:2rem;}
.pb-12{padding-bottom:3rem;}
.pb-8{padding-bottom:2rem;}
.pl-8{padding-left:2rem;}
.pt-24{padding-top:6rem;}
.last\:pb-0:last-child{padding-bottom:0;}
.text-2xl{font-size:1.5rem;line-height:2rem;}
.text-base{font-size:1rem;line-height:1.5rem;}
.text-lg{font-size:1.125rem;line-height:1.75rem;}
.text-sm{font-size:0.875rem;line-height:1.25rem;}
.text-xs{font-size:0.75rem;line-height:1rem;}
.text-accent{color:var(--accent) /* var(--accent) */;}
.text-foreground{color:var(--fg) /* var(--fg) */;}
.text-muted{color:var(--muted) /* var(--muted) */;}
.text-muted-foreground{color:var(--muted-fg) /* var(--muted-fg) */;}
.text-white\/70{color:rgb(255 255 255 / 0.7) /* #fff */;}
.hover\:text-foreground:hover{color:var(--fg) /* var(--fg) */;}
.hover\:text-white:hover{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;}
.font-bold{font-weight:700;}
.font-semibold{font-weight:600;}
.leading-relaxed{line-height:1.625;}
.tracking-wider{letter-spacing:0.05em;}
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
.no-underline{text-decoration:none;}
.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
@media (min-width: 640px){
.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.sm\:inline{display:inline;}
.sm\:w-36{width:9rem;}
.sm\:flex-row{flex-direction:row;}
.sm\:items-center{align-items:center;}
.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem;}
}