.np-skill-handoff{margin:0;font-size:13px;line-height:1.6;color:var(--muted-foreground)}.np-skill-handoff strong{color:var(--foreground);font-weight:500}.np-skill-handoff a{margin-left:6px;color:var(--foreground);text-decoration:underline;text-underline-offset:4px}
/* Skill cards on shadcn tokens. Card pages only. */
.skill-btn{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:9999px;background:var(--background);font-size:14px;font-weight:500;white-space:nowrap;outline:none}
.skill-btn:hover{background:var(--accent);color:var(--accent-foreground)}
.skill-btn:focus-visible,.skill-menu summary:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}
.skill-use{height:44px;min-width:64px;padding:0 16px}
.skill-like{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:#fffc;color:#1a1a1a;backdrop-filter:blur(8px);cursor:pointer;outline:none}.skill-like>span{display:flex}
.skill-like svg{width:18px;height:18px}.skill-like[aria-pressed=true]{color:#e5484d}[aria-pressed=true] svg,.skill-pop svg{fill:#e5484d}
.skill-like:focus-visible,.skill-follow:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}
.skill-follow{height:28px;margin-left:4px;padding:0 10px;border:1px solid var(--border);border-radius:9999px;background:var(--background);font-size:12px;font-weight:500;cursor:pointer;outline:none}.skill-follow:hover{background:var(--accent)}.skill-follow[aria-pressed=true]{color:var(--muted-foreground)}
.follow-lg{height:32px;margin-left:auto;padding:0 16px;font-size:14px}.follow-lg[aria-pressed=false]{border-color:var(--primary);background:var(--primary);color:var(--primary-foreground)}
.skill-pop{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;animation:pop .7s ease-out forwards}.skill-pop svg{width:72px;height:72px;stroke:#fff}
@keyframes pop{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.1)}to{opacity:0}}
.skill-frame{position:relative;aspect-ratio:1.6;overflow:hidden;border-radius:calc(var(--radius) + 4px);background:var(--muted);box-shadow:0 1px 3px #0000001a}
.skill-picture{display:flex;touch-action:manipulation;width:100%;height:100%;align-items:center;justify-content:center;border-radius:inherit;outline:none}
.skill-title{margin:0;flex:1;font-size:20px;line-height:1.25;font-weight:600;letter-spacing:-.025em}
.skill-title a,.skill-meta a{color:inherit}
.skill-title a:hover,.skill-meta a:hover{text-decoration:underline;text-underline-offset:4px}
.skill-tested,.skill-mark{display:flex;width:28px;height:28px;flex-shrink:0;align-items:center;justify-content:center;border-radius:calc(var(--radius) - 2px);background:var(--success-fill);color:var(--success-fg)}
.skill-meta{margin:0;font-size:12px;line-height:1.5;color:var(--muted-foreground)}
.skill-mark{border:1px solid var(--border);border-radius:9999px;background:var(--background);color:var(--muted-foreground);box-shadow:0 0 0 2px var(--card)}
.skill-mark img{width:17px;height:17px;object-fit:contain}
.skill-mark svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.skill-menu{position:relative;min-width:0;flex:1;font-size:12px;color:var(--muted-foreground)}
.skill-menu[open]{z-index:10}
.skill-menu summary{display:flex;min-height:44px;align-items:center;gap:8px;border-radius:calc(var(--radius) - 2px);cursor:pointer;list-style:none;outline:none}
.skill-menu summary::-webkit-details-marker{display:none}
.skill-menu-panel{position:absolute;bottom:calc(100% + 8px);left:0;z-index:50;max-height:min(320px,40svh);width:min(18rem,calc(100vw - 56px));overflow:auto;border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);background:var(--popover);color:var(--popover-foreground);padding:16px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}
.skill-menu[data-opens=down] .skill-menu-panel{top:calc(100% + 8px);bottom:auto}
.skill-menu-panel ul{margin:0 0 12px;display:grid;gap:12px;list-style:none;padding:0}
.skill-menu-panel strong{display:block;font-weight:500;color:var(--foreground)}
.skill-menu-panel small{display:block;margin-top:2px;font-size:11px;line-height:1.5}
.skill-menu-panel>a{color:var(--foreground);text-decoration:underline;text-underline-offset:4px}
.skill-chevron{display:flex}
.skill-menu[open] .skill-chevron{transform:rotate(180deg)}
.skill-card{display:flex;min-width:0;flex-direction:column;gap:16px}.skill-body{display:flex;flex:1;flex-direction:column;gap:12px}.skill-head{display:flex;align-items:flex-start;gap:12px}
.skill-object{width:56%;height:86%;object-fit:contain}.skill-desc{margin:0;font-size:14px;line-height:1.5;color:var(--muted-foreground)}
.skill-made{margin:0;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted-foreground)}.skill-made img{opacity:.55;filter:grayscale(1)}
.skill-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px}
.skill-menu-panel>p{margin:0 0 12px;font-size:14px;font-weight:500;color:var(--foreground)}
.skill-picture:focus-visible{outline:none;box-shadow:inset 0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}.skill-mark.is-memory{background:var(--accent);color:var(--accent-foreground)}
.skill-card{--tint:#6b5bd6}[data-nerd-area=health]{--tint:#3f9b6e}[data-nerd-area=money]{--tint:#2f8a74}[data-nerd-area=work]{--tint:#3b6fd8}[data-nerd-area=relationships]{--tint:#c4577a}[data-nerd-area=travel]{--tint:#2a8fb8}[data-nerd-area=home]{--tint:#c98a2e}[data-nerd-area=hobbies]{--tint:#d0683a}[data-nerd-area=content]{--tint:#9a4fc7}[data-nerd-area=learning]{--tint:#8a6d3b}
.skill-frame{background:color-mix(in oklab,var(--tint) 15%,var(--card))}
.skill-object{transition:transform .35s cubic-bezier(.2,.8,.2,1)}.skill-card:hover .skill-object,.skill-picture:focus-visible .skill-object{transform:translateY(-6px) scale(1.04)}
@media (prefers-reduced-motion:reduce){.skill-object{transition:none}.skill-pop{display:none}.skill-card:hover .skill-object,.skill-picture:focus-visible .skill-object{transform:none}}