.skills-section{padding-block:80px 65px;scroll-margin-top:36px}
.skills-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:70px;margin-bottom:42px}
.skills-heading h2{font:400 clamp(62px,6.6vw,102px)/1 var(--display);letter-spacing:-.035em;white-space:nowrap}
.skills-heading h2 em{font-weight:400;color:var(--sketch-ink)}
.skills-intro{max-width:350px;padding-bottom:2px;font-size:17px;line-height:1.5}
.skills-guide{position:relative;font:400 29px/1 var(--hand);color:var(--accent);width:max-content;margin-top:19px;transform:rotate(-4deg)}
.skills-guide svg{position:absolute;left:calc(100% + 10px);bottom:-4px;width:75px;height:49px;stroke-width:1.3}
.skills-grid{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 34px}
.skill-highlight{position:absolute;z-index:0;left:0;top:0;width:var(--skill-w,0px);height:var(--skill-h,0px);transform:translate3d(var(--skill-x,0px),var(--skill-y,0px),0);background:#e9e7df;pointer-events:none;transition:transform .4s var(--ease),width .4s var(--ease),height .4s var(--ease);border-radius:2px}
.skill-item{position:relative;z-index:1;display:grid;grid-template-columns:58px minmax(0,1fr) 22px;align-items:center;gap:19px;min-height:107px;width:100%;padding:20px 23px;text-align:left;border:0}
.skill-symbol{display:flex;align-items:center;justify-content:center;color:var(--sketch-ink);width:48px;height:48px;transition:translate .35s var(--ease),rotate .35s var(--ease)}
.skill-symbol svg{width:31px;height:31px;stroke-width:1.3}
.skill-letter{font:italic 400 38px/1 var(--display);letter-spacing:-.04em}
.skill-quote{font:400 69px/1 var(--display);translate:0 10px}
.skill-prompt{font:400 25px/1 ui-monospace,Consolas,monospace;letter-spacing:-.08em}
.skill-label{min-width:0}.skill-label strong{display:block;font-size:20px;font-weight:450;letter-spacing:-.025em;line-height:1.25}
.skill-label small{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:5px}
.skill-index{font-size:10px;color:var(--muted);align-self:start;padding-top:4px;letter-spacing:.02em}
.skill-item[aria-selected=true] .skill-label strong{font-weight:600}
.skill-item[aria-selected=true] .skill-index{color:var(--accent)}
.skill-item:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skills-detail{display:grid;grid-template-columns:minmax(220px,.78fr) minmax(0,1.5fr);gap:65px;min-height:177px;padding:32px 23px 0;margin-top:21px;outline-offset:7px}
.skill-category{font-size:10px;color:var(--muted);letter-spacing:.06em}
.skill-detail-title h3{font:400 clamp(28px,2.65vw,41px)/1.1 var(--display);letter-spacing:-.02em;margin-top:8px}
.skill-explanation{max-width:650px}
#skill-description{font-size:16px;line-height:1.65;max-width:630px}
.skill-example{display:inline-flex;align-items:center;gap:12px;max-width:100%;font-size:13px;line-height:1.5;margin-top:17px}
.skill-example svg{flex:0 0 24px;width:24px;height:20px;transition:translate .3s var(--ease)}
.skill-example:hover svg{translate:5px 0}
.skills-section+#practice{padding-top:75px}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.skill-item:hover .skill-symbol{translate:0 -4px;rotate:-4deg}}
@media(max-width:1200px){
 .skills-section{padding-block:65px 50px}.skills-heading{gap:45px}.skills-heading h2{font-size:7.1vw}.skills-intro{max-width:300px;font-size:15px}
 .skills-guide{font-size:26px}.skills-grid{gap:9px 20px}.skill-item{grid-template-columns:44px minmax(0,1fr) 15px;gap:14px;padding:17px;min-height:100px}
 .skill-label strong{font-size:18px}.skill-label small{font-size:11px}.skills-detail{gap:40px;padding-inline:17px}.skill-symbol{width:40px;height:40px}
}
@media(max-width:900px){
 .skills-heading{gap:30px}.skills-intro{max-width:265px;font-size:14px}.skills-heading h2{white-space:normal;max-width:400px;font-size:8.3vw}
 .skills-heading h2 em{display:block}.skills-guide svg{width:55px}.skill-item{grid-template-columns:36px minmax(0,1fr);gap:12px;padding:17px 15px;min-height:109px}
 .skill-index{position:absolute;right:13px;top:9px;padding:0;font-size:9px}
 .skill-symbol{width:34px;height:36px}.skill-symbol svg{width:27px;height:27px}.skill-label strong{font-size:16px}
 .skill-label small{font-size:10px}.skills-detail{grid-template-columns:1fr 1.5fr;gap:30px}#skill-description{font-size:14px}
 .skills-section+#practice{padding-top:60px}
}
@media(max-width:640px){
 .skills-section{padding-block:40px 35px;scroll-margin-top:30px}.skills-heading{display:block;margin-bottom:27px}
 .skills-heading h2{font-size:clamp(48px,13.2vw,78px);line-height:1.02}.skills-heading h2 em{display:inline}
 .skills-intro{max-width:100%;font-size:15px;margin-top:22px}.skills-guide{font-size:26px;margin-top:13px}.skills-guide svg{width:57px;height:40px}
 .skills-grid{gap:9px 10px}
 .skill-item{grid-template-columns:1fr;align-content:start;gap:10px;padding:16px 13px;min-height:116px}
 .skill-symbol{height:33px;width:34px;justify-content:flex-start}.skill-symbol svg{width:27px;height:27px}
 .skill-letter{font-size:31px}.skill-quote{font-size:54px;translate:0 8px}.skill-prompt{font-size:23px}
 .skill-label strong{font-size:16px;line-height:1.22;letter-spacing:-.025em}.skill-label small{display:none}
 .skills-detail{grid-template-columns:1fr;gap:16px;min-height:260px;padding:25px 1px 0;margin-top:10px}
 .skill-detail-title h3{font-size:33px;margin-top:6px}.skill-category{font-size:9px}#skill-description{font-size:14px;line-height:1.65}
 .skill-example{font-size:12px;margin-top:15px;gap:8px}.skills-section+#practice{padding-top:45px}
}
@media(max-width:360px){.skill-item{padding-inline:11px;min-height:120px}.skill-label strong{font-size:15px}.skills-heading h2{font-size:13vw}}
@media(prefers-reduced-motion:reduce){.skill-highlight,.skill-symbol,.skill-example svg{transition:none}.skill-item:hover .skill-symbol{translate:none;rotate:none}}