@tailwind base;@tailwind components;@tailwind utilities;:root{--c1:#aaa9ad;--c2:#848689;--c3:#5b676d;--c4:#2a3439;--c5:#1f262a;--bg:#f9f9f9;--fg:#101214;--surface:#ffffffcc;--border:#00000022;--accent:var(--c4);--muted:#00000099;--surface-rgb:255,255,255;--border-rgb:0,0,0;--accent-rgb:42,52,57;--footer-h:64px;--btn-radius:12px;--btn-size:44px}@media (prefers-color-scheme:dark){:root{--c1:#1f262a;--c2:#2a3439;--c3:#5b676d;--c4:#848689;--c5:#aaa9ad;--bg:#0b0d0f;--fg:#eaecef;--surface:#0d1117cc;--border:#ffffff22;--accent:var(--c2);--muted:#ffffffb3;--surface-rgb:13,17,23;--border-rgb:255,255,255;--accent-rgb:40,52,57}}body,html{background:var(--bg);color:var(--fg)}:root{--link:var(--fg);--link-hover:var(--accent)}@media (prefers-color-scheme:dark){:root{--link:var(--fg);--link-hover:var(--c1)}}a,a:visited{color:var(--link)}a:hover{color:var(--link-hover)}.bg-surface\/70{background-color:rgba(var(--surface-rgb),.7)}.border-border\/60{border-color:rgba(var(--border-rgb),.6)}.text-muted{color:var(--muted)}.text-accent{color:var(--accent)}.decoration-accent\/40{-webkit-text-decoration-color:color-mix(in oklab,var(--accent) 40%,transparent);text-decoration-color:color-mix(in oklab,var(--accent) 40%,transparent)}.hero-minh{min-height:calc(100vh - 80px - var(--footer-h, 56px))}@layer components{.btn-primary{@apply rounded-xl px-4 py-2 font-medium text-white shadow-md;background:var(--accent)}.btn-ghost{@apply rounded-xl px-4 py-2 font-medium border border-border/60;background:color-mix(in oklab,var(--surface) 70%,transparent);box-shadow:0 4px 12px rgba(0,0,0,.12)}.nav-link{@apply rounded-xl px-3 py-1 text-sm border border-transparent}.nav-link,.nav-link:visited{color:var(--link)}.nav-link:hover{color:var(--link-hover);text-decoration:underline}.link,.nav-link:hover{text-underline-offset:4px}.link{@apply underline}.footer-banner{background:var(--surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid rgba(var(--border-rgb),.6)}.icon-btn,.icon-btn:visited{border-radius:var(--btn-radius);width:var(--btn-size);height:var(--btn-size);display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(var(--border-rgb),.6);background:color-mix(in oklab,var(--surface) 90%,transparent);color:var(--fg);box-shadow:0 4px 12px rgba(0,0,0,.12);transition:color .15s ease,transform .15s ease,opacity .15s ease}.icon-btn:hover{color:var(--link-hover);opacity:.95;transform:translateY(-1px)}.projects-stack>.project+.project{margin-top:32px}.project{position:relative;display:block;cursor:default;border:1px solid rgba(var(--border-rgb),.6);border-radius:14px;overflow:hidden;background-clip:padding-box;padding:14px 16px 16px;background:color-mix(in oklab,var(--surface) 75%,transparent);box-shadow:0 6px 18px rgba(0,0,0,.12);transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;outline:none;touch-action:manipulation}}@layer components{.project.is-open,.project:focus-visible,.project:hover{background:color-mix(in oklab,var(--surface) 92%,transparent);border-color:rgba(var(--border-rgb),.8);box-shadow:0 0 0 2px color-mix(in oklab,var(--accent) 50%,transparent),0 10px 28px rgba(0,0,0,.18);transform:translateY(-1px)}.project-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.project-title{font-weight:700;letter-spacing:-.01em}.project-meta{display:inline-flex;align-items:center;gap:8px;opacity:.95}.project-content{max-height:0;overflow:hidden;opacity:0;transform:translateY(-4px);transition:max-height .32s ease,opacity .2s ease,transform .2s ease}.project.is-open .project-content,.project:focus-visible .project-content,.project:hover .project-content{max-height:480px;opacity:1;transform:translateY(0)}.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;font-size:12px;line-height:1;border-radius:9999px;border:1px solid rgba(var(--border-rgb),.6);background:color-mix(in oklab,var(--surface) 80%,transparent)}.project-actions{margin-top:12px;display:flex;align-items:center;gap:12px}.project-cta{display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1;padding:2px 8px;border-radius:9999px;border:1px solid rgba(var(--border-rgb),.6);background:color-mix(in oklab,var(--surface) 80%,transparent);color:var(--link);text-decoration:none;margin-left:auto!important;transition:color .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;opacity:0;pointer-events:none;transform:translateY(2px)}.project.is-open .project-cta,.project:hover .project-cta{opacity:1;pointer-events:auto;transform:translateY(0)}.project-cta:focus-visible,.project-cta:hover{background:var(--link-hover);color:#fff;border-color:transparent;box-shadow:0 0 0 2px color-mix(in oklab,var(--link-hover) 35%,transparent)}}.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap}.header-toggle{position:relative;padding:0;border:0;background:transparent;cursor:pointer;line-height:0}.header-toggle-box{position:relative;display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;box-sizing:border-box;border-radius:var(--toggle-radius,10px);border:1px solid rgba(var(--border-rgb),.6);background:color-mix(in oklab,var(--surface) 85%,transparent);box-shadow:0 4px 12px rgba(0,0,0,.12);color:#fff;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}.header-toggle-box:before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 var(--halo-stroke,2px) rgba(255,255,255,var(--halo-alpha,.95));filter:drop-shadow(0 0 var(--halo-blur,10px) rgba(255,255,255,.55));opacity:0;pointer-events:none;transition:opacity .18s ease}.header-toggle:focus-visible .header-toggle-box:before,.header-toggle:hover .header-toggle-box:before{opacity:1}.header-toggle-icon{width:18px;height:18px;display:block;transform-origin:50% 50%;transition:transform .2s ease}.header-toggle-label{margin-left:8px;font-size:12px;line-height:1;color:inherit;white-space:nowrap}.header-toggle.is-open .header-toggle-box{background:var(--accent);border-color:transparent}.header-toggle.is-open .header-toggle-icon{transform:rotate(45deg)}:root{--pt-size:32px;--pt-radius:10px;--pt-extra:-4px;--pt-halo-stroke:2px;--pt-halo-blur:10px;--pt-halo-alpha:.95}.project-toggle{position:absolute;top:10px;right:10px;width:var(--pt-size);height:calc(var(--pt-size) + var(--pt-extra));display:flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer;line-height:0;z-index:10;-webkit-tap-highlight-color:transparent}.project-toggle:before{content:"";position:absolute;width:var(--pt-size);height:var(--pt-size);border-radius:var(--pt-radius);box-shadow:0 0 0 var(--pt-halo-stroke) rgba(255,255,255,var(--pt-halo-alpha));filter:drop-shadow(0 0 var(--pt-halo-blur) rgba(255,255,255,.55));opacity:0;pointer-events:none;transition:opacity .18s ease}.project-toggle:focus-visible:before,.project-toggle:hover:before{opacity:1}.project-toggle-box{position:relative;z-index:1;display:grid;place-items:center;width:var(--pt-size);height:var(--pt-size);box-sizing:border-box;border-radius:var(--pt-radius);border:1px solid rgba(var(--border-rgb),.6);background:color-mix(in oklab,var(--surface) 85%,transparent);box-shadow:0 4px 12px rgba(0,0,0,.12);color:#fff;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}.project-toggle-icon{width:18px;height:18px;display:block;transform-origin:50% 50%;transition:transform .2s ease}.project.is-open .project-toggle-box{background:var(--accent);border-color:transparent}.project.is-open .project-toggle-icon{transform:rotate(45deg)}.about-portrait{--portrait-w:320px;--portrait-h:380px;--portrait-radius:16px;position:relative;width:min(100%,var(--portrait-w));height:var(--portrait-h);border-radius:var(--portrait-radius);overflow:hidden;border:1px solid rgba(var(--border-rgb),.6);box-shadow:0 4px 12px rgba(0,0,0,.12);background:color-mix(in oklab,var(--surface) 70%,transparent);isolation:isolate}.about-portrait :is(span,img){border-radius:inherit}@media (min-width:640px){.float-wrap-right{float:right;margin-left:1.5rem}.float-wrap-left,.float-wrap-right{shape-outside:inset(0 round var(--portrait-radius));shape-margin:12px;margin-bottom:1rem}.float-wrap-left{float:left;margin-right:1.5rem}}