.frontend-toolkit{margin-block:2rem 0;position:relative}.toolkit-connection{pointer-events:none;width:100%;height:100%;stroke:var(--accent);stroke-linecap:round;position:absolute;inset:0;overflow:hidden}.toolkit-connection-route,.toolkit-connection-signal,.toolkit-connection-arrival{opacity:0}.toolkit-connection-route{stroke-width:.8px;stroke-dasharray:1}.toolkit-connection-signal{stroke-width:1.7px;stroke-dasharray:.08 1}.toolkit-connection-arrival{stroke-width:1px;transform-box:fill-box;transform-origin:50%}.toolkit-heading-row{border-bottom:1px solid var(--line);justify-content:space-between;align-items:flex-end;gap:1.5rem;padding-bottom:1.6rem;display:flex}.toolkit-heading-row h2{color:var(--ink);letter-spacing:-.065em;margin:0;font-size:clamp(2rem,4.8vw,4rem);font-weight:700;line-height:1.05}.toolkit-heading-row h2 span{color:var(--accent)}.toolkit-heading-row p,.toolkit-group h3,.toolkit-evidence>p{color:var(--muted);margin:0;font-size:.875rem;font-weight:400;line-height:1.5}.toolkit-heading-copy p{margin-top:12px}.toolkit-full-link{flex-shrink:0}.toolkit-groups{grid-template-columns:.88fr .98fr 1.25fr;gap:clamp(1.25rem,4vw,4rem);padding-top:2.25rem;display:grid}.toolkit-group{min-width:0}.toolkit-group h3{margin-bottom:.75rem}.toolkit-group ul,.toolkit-evidence ul{margin:0;padding:0;list-style:none}.toolkit-group li+li{margin-top:.25rem}.toolkit-skill{max-width:100%;min-height:44px;color:var(--ink);cursor:pointer;font:inherit;letter-spacing:-.05em;text-align:left;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:0;align-items:baseline;gap:.55em;margin:0;padding:.2rem 0;font-size:clamp(1.25rem,2.65vw,2.15rem);font-weight:700;line-height:1.25;transition:color .16s;display:flex;position:relative}.toolkit-skill:after{content:"";transform-origin:0;background:currentColor;height:1px;transition:transform .18s;position:absolute;inset:auto 0 0;transform:scaleX(0)}.toolkit-skill[aria-pressed=true]{color:var(--accent)}.toolkit-skill[aria-pressed=true]:after{transform:scaleX(1)}.toolkit-skill-name{min-width:0;transition:transform .32s cubic-bezier(.22,1,.36,1)}.toolkit-skill[aria-pressed=true] .toolkit-skill-name{transform:translate(3px)}.toolkit-skill-arrow{opacity:0;flex-shrink:0;font-size:.8em;font-weight:400;transition:opacity .16s,transform .32s cubic-bezier(.22,1,.36,1);transform:translate(-.2em)}.toolkit-skill[aria-pressed=true] .toolkit-skill-arrow{opacity:1;transform:translate(0)rotate(45deg)}.toolkit-skill:focus-visible,.toolkit-evidence a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.toolkit-proof{border-top:1px solid var(--line);grid-template-columns:1fr 1fr;gap:2rem;margin-top:5.5rem;padding-block:1.85rem 1.5rem;display:grid;position:relative}.toolkit-proof-lines{width:180px;height:53px;stroke:var(--line-art);stroke-width:.8px;pointer-events:none;position:absolute;top:-53px;left:0;overflow:visible}.toolkit-proof-lines path{stroke-dasharray:1}.toolkit-proof-heading{letter-spacing:-.055em;min-height:2.3em;margin:0;font-size:clamp(1.5rem,2.9vw,2.4rem);font-weight:700;line-height:1.15}.toolkit-evidence{min-width:0}.toolkit-evidence>p{margin-bottom:.4rem}.toolkit-evidence ul{flex-wrap:wrap;gap:.25rem 1.75rem;display:flex}.toolkit-evidence a{border-bottom:1px solid var(--line);min-height:44px;color:var(--ink);letter-spacing:-.025em;text-underline-offset:.2em;align-items:center;gap:.35em;font-size:clamp(1rem,1.7vw,1.35rem);line-height:1.35;text-decoration:none;transition:color .16s,border-color .16s;display:inline-flex}.toolkit-evidence a span{color:var(--accent)}.toolkit-evidence a:hover{border-color:var(--accent);color:var(--accent)}@media (width<=760px){.toolkit-heading-row{flex-direction:column;align-items:flex-start;gap:.75rem}.toolkit-groups{gap:1.5rem}.toolkit-skill{gap:.25em;font-size:1.35rem}.toolkit-proof{margin-top:5rem}}@media (width>=541px) and (width<=700px){.toolkit-evidence{min-height:7.5rem}}@media (width<=540px){.toolkit-connection,.toolkit-proof-lines{display:none}.toolkit-groups{grid-template-columns:1fr;gap:1rem;padding-top:1.25rem}.toolkit-group h3{margin-bottom:.5rem}.toolkit-group ul{flex-wrap:wrap;gap:.5rem;display:flex}.toolkit-group li{max-width:100%}.toolkit-group li+li{margin-top:0}.toolkit-skill{border:1px solid var(--line);letter-spacing:-.025em;justify-content:center;align-items:center;gap:0;min-height:44px;padding:.625rem .75rem;font-size:1rem;font-weight:600}.toolkit-skill:after,.toolkit-skill-arrow{display:none}.toolkit-skill[aria-pressed=true]{border-color:var(--accent)}.toolkit-skill[aria-pressed=true] .toolkit-skill-name{transform:none}.toolkit-skill:focus-visible{outline-offset:2px}.toolkit-proof{grid-template-columns:1fr;align-content:start;gap:.75rem;margin-top:2rem;padding-top:1.25rem}.toolkit-proof-heading{font-size:clamp(1.55rem,6.8vw,1.9rem)}.toolkit-evidence{min-height:6rem}.toolkit-evidence ul{column-gap:1.25rem}.toolkit-evidence a{font-size:1.1rem}}@media (prefers-reduced-motion:reduce){.toolkit-skill,.toolkit-skill:after,.toolkit-skill-name,.toolkit-skill-arrow,.toolkit-evidence a{transition:none}}:is(.project-visual--coolmate,.project-visual--quyenlm-portfolio){container-type:inline-size}:is(.project-visual--coolmate,.project-visual--quyenlm-portfolio) .project-media{aspect-ratio:4/3;position:relative;overflow:hidden}:is(.project-visual--coolmate,.project-visual--quyenlm-portfolio) .project-cover-heading{justify-content:space-between;align-items:center;gap:12px;display:flex;position:absolute}:is(.project-visual--coolmate,.project-visual--quyenlm-portfolio) :is(.project-cover-category,.project-cover-address,.project-cover-detail-label){font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(8px,1.65cqw,12px);line-height:1.2}:is(.project-visual--coolmate,.project-visual--quyenlm-portfolio) :is(.project-cover-screen,.project-cover-detail,.project-cover-reference){display:block;position:absolute}.project-visual--coolmate{--cover-blue:#224de8;--cover-cream:#f4f0df;background:var(--cover-blue)}.project-visual--coolmate .project-media{color:var(--cover-cream);background:var(--cover-blue)}.project-visual--coolmate .project-cover-heading{align-items:baseline;inset:7% 6% auto}.project-visual--coolmate .project-cover-wordmark{letter-spacing:-.075em;font-size:clamp(30px,9cqw,75px);font-weight:900;line-height:.9}.project-visual--coolmate .project-cover-category{text-transform:uppercase;letter-spacing:.04em}.project-visual--coolmate .project-cover-screen{border:clamp(4px, .9cqw, 7px) solid var(--cover-cream);background:var(--cover-cream);width:83%;top:26%;left:6%;overflow:hidden;transform:rotate(-5deg);box-shadow:0 12px 30px #06195b3d}.project-visual--coolmate .project-cover-detail{background:var(--cover-cream);color:#192348;width:29%;padding:clamp(4px,.8cqw,6px);bottom:7%;right:5%;transform:rotate(6deg);box-shadow:0 8px 20px #06195b40}.project-visual--coolmate .project-cover-detail-image{aspect-ratio:1;background:#261b16;display:block;position:relative;overflow:hidden}.project-visual--coolmate .project-cover-detail-image .project-image{width:250%;max-width:none;position:absolute;top:-28%;left:-103%}.project-visual--coolmate .project-cover-detail-label{padding:7px 2px 3px;font-size:clamp(7px,1.35cqw,10px);display:block}.project-visual--quyenlm-portfolio{--cover-lilac:#d8c9ef;--cover-lime:#e1f294;--cover-ink:#28242c;background:var(--cover-lilac)}.project-visual--quyenlm-portfolio .project-media{color:var(--cover-ink);background:var(--cover-lilac)}.project-visual--quyenlm-portfolio .project-cover-heading{inset:6% 6% auto}.project-visual--quyenlm-portfolio .project-cover-wordmark{letter-spacing:-.065em;font-family:Georgia,Times New Roman,serif;font-size:clamp(32px,8.8cqw,72px);font-style:italic;line-height:1}.project-visual--quyenlm-portfolio .project-cover-category{border:1px solid var(--cover-ink);background:var(--cover-lime);border-radius:50%;padding:8px 12px;transform:rotate(9deg)}.project-visual--quyenlm-portfolio .project-cover-screen{border:1px solid var(--cover-ink);background:#f0edf6;border-radius:4px;width:88%;height:64%;top:24%;right:4%;overflow:hidden;transform:rotate(-4deg);box-shadow:7px 7px #a18cbf}.project-visual--quyenlm-portfolio .project-cover-screen .project-image{width:140%;max-width:none;position:absolute;top:-13%;left:-20%}.project-visual--quyenlm-portfolio .project-cover-reference{border:1px solid var(--cover-ink);background:var(--cover-lime);width:32%;box-shadow:4px 4px 0 var(--cover-ink);border-radius:3px;padding:clamp(3px,.7cqw,5px);bottom:5%;left:5%;transform:rotate(7deg)}.project-visual--quyenlm-portfolio .project-cover-reference .project-image{border:1px solid var(--cover-ink)}.project-visual--quyenlm-portfolio .project-cover-address{padding:7px 3px 3px;font-size:clamp(7px,1.4cqw,10px);display:block}@media (width<=420px){.project-visual--coolmate .project-cover-heading{flex-direction:column;align-items:flex-start;gap:7px}.project-visual--coolmate .project-cover-screen{top:32%}.project-visual--coolmate .project-cover-detail{width:31%;bottom:6%;right:4%}.project-visual--quyenlm-portfolio .project-cover-category{padding:6px 9px}}@media (prefers-reduced-motion:reduce){.project-visual[data-pointer-field]:is(.project-visual--coolmate,.project-visual--quyenlm-portfolio) :is(.project-image,.project-media){transition:none;transform:none}}.additional-projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:56px;display:grid}.additional-project-card{min-width:0;display:block}.additional-project-card:focus-visible{outline:2px solid var(--accent);outline-offset:6px}.additional-project-image{aspect-ratio:16/10;background:#efede7;position:relative;overflow:hidden}.additional-project-card[data-project=sabomall] .additional-project-image{background:#f4e7df}.additional-project-card[data-project=asa] .additional-project-image{background:#e4eeeb}.additional-project-image img{object-fit:contain;width:100%;height:100%;padding:20px;position:absolute;inset:0}.additional-project-caption{justify-content:space-between;align-items:baseline;gap:20px;padding-block:20px 4px;display:flex}.additional-project-caption>div{min-width:0}.additional-project-caption h3{letter-spacing:-.045em;overflow-wrap:anywhere;font-size:clamp(24px,2.5vw,28px);font-weight:500;line-height:1.15}.additional-project-caption p{color:var(--muted);margin-top:8px;font-size:14px;line-height:1.5}.additional-project-arrow{stroke:var(--accent);stroke-width:1.2px;flex:0 0 36px}.additional-project-card:is(:hover,:focus-visible) h3{color:var(--accent)}@media (prefers-reduced-motion:no-preference){.additional-project-arrow{transition:transform .18s}.additional-project-card:is(:hover,:focus-visible) .additional-project-arrow{transform:translate(4px)}}@media (width<=700px){.additional-projects{grid-template-columns:1fr;gap:32px;margin-top:44px}.additional-project-image img{padding:14px}.additional-project-caption{padding-top:16px}}@keyframes contour-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@keyframes hero-arrive{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes contour-travel{0%{opacity:0;stroke-dashoffset:1px}15%,75%{opacity:.85}to{opacity:0;stroke-dashoffset:0}}.contour-v{overflow:visible}.contour-v .contour-signal{opacity:0;stroke:var(--accent);stroke-width:1.5px;stroke-dasharray:.06 .94}.project-visual{isolation:isolate;position:relative}.project-media{display:block}.project-reveal-cover{z-index:1;background:var(--paper);pointer-events:none;transform:translateX(var(--work-cover-exit,101%));position:absolute;inset:0}.project-feature-quyen{--work-cover-exit:-101%}.project-view-label{z-index:2;background:var(--paper);color:var(--ink);opacity:0;pointer-events:none;align-items:center;gap:24px;padding:12px 16px;font-size:13px;line-height:1;display:inline-flex;position:absolute;bottom:20px;left:20px}.project-view-label>span{color:var(--accent);font-size:18px}.project-feature:has(a:focus-visible) .project-view-label{opacity:1}.project-row:focus-visible h3{color:var(--accent)}.project-feature:has(a:focus-visible) .project-caption h3 a{color:var(--accent)}.project-row{position:relative}.project-row:after{content:"";inset-inline:0;background:var(--accent);pointer-events:none;transform-origin:100%;height:1px;position:absolute;bottom:-1px;transform:scaleX(0)}.project-row:focus-visible:after{transform-origin:0;transform:scaleX(1)}@media (prefers-reduced-motion:no-preference){.contour-v .contour-line{stroke-dasharray:1;animation:1.25s cubic-bezier(.45,0,.2,1) backwards contour-draw}.hero-first-name,.hero-last-name,.hero-role,.hero-work-link{animation:.75s cubic-bezier(.22,1,.36,1) backwards hero-arrive}.hero-first-name{animation-delay:.1s}.hero-last-name{animation-delay:.23s}.hero-role{animation-delay:.38s}.hero-work-link{animation-delay:.46s}.hero-work-link:focus-visible{animation:none}.wordmark svg{transition:transform .24s cubic-bezier(.22,1,.36,1)}.wordmark:hover svg{transform:translateY(-2px)}.hero-work-link .accent{transition:transform .2s}.hero-work-link:hover .accent{transform:translateY(3px)}.project-visual .project-image{transition:transform .5s cubic-bezier(.22,1,.36,1)}.project-caption h3 a{transition:color .18s}.project-feature:has(a:focus-visible) .project-image{transform:scale(1.025)}.project-feature:has(a:focus-visible) .project-arrow{transform:translate(5px)}.project-row:after{transition:transform .36s cubic-bezier(.22,1,.36,1)}.project-media{transition:transform .65s cubic-bezier(.22,1,.36,1)}.project-view-label{transition:opacity .22s,transform .45s cubic-bezier(.22,1,.36,1);transform:translateY(12px)}.project-feature:has(a:focus-visible) .project-view-label{transform:translateY(0)}}@media (hover:hover) and (pointer:fine){.project-feature:has(a:hover) .project-view-label{opacity:1;transform:translateY(0)}.project-feature:has(a:hover) .project-caption h3 a{color:var(--accent)}.project-row:hover:after{transform-origin:0;transform:scaleX(1)}}@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.contour-v path{transform-box:view-box;transform-origin:53% 54%;transition:transform .8s cubic-bezier(.22,1,.36,1)}.portfolio-hero[data-pointer-active] .contour-v path{transform:translate(calc(var(--pointer-x,0) * var(--contour-depth) * 24px), calc(var(--pointer-y,0) * var(--contour-depth) * 18px)) rotate(calc(var(--pointer-x,0) * var(--contour-depth) * 1.2deg))}.portfolio-hero[data-pointer-active] .contour-signal{animation:contour-travel 1.3s ease-in-out var(--signal-delay)}.project-feature:has(a:hover) .project-image{transform:scale(1.025)}.project-feature:has(a:hover) .project-arrow{transform:translate(5px)}.project-visual[data-pointer-active] .project-media{transform:perspective(900px) rotateX(calc(var(--pointer-y,0) * -3deg)) rotateY(calc(var(--pointer-x,0) * 3deg)) scale(1.045)}.project-feature .project-visual[data-pointer-active] .project-view-label{transform:translate(calc(var(--pointer-x,0) * 6px), calc(var(--pointer-y,0) * 4px))}}@media (hover:none) and (prefers-reduced-motion:no-preference){.project-visual:active .project-media{transition-duration:.12s;transform:scale(.985)}}