.skills-section{padding-block:82px 90px;border-top:1px solid var(--line)}
.skills-heading{display:flex;justify-content:space-between;align-items:end;gap:30px}.skills-heading .eyebrow{margin:0 0 10px}.skills-heading h3{font-size:30px;font-weight:400;letter-spacing:1px;margin:0}.skills-intro{color:var(--muted);font-size:12px;line-height:1.9;max-width:290px;margin:0}
.skills-stage{position:relative;height:510px;max-width:920px;margin:22px auto 0;overflow:hidden;isolation:isolate;contain:layout paint}
.toolbox-halo{position:absolute;inset:14% 12%;border-radius:50%;background:radial-gradient(ellipse,#9aaa8220,transparent 68%);opacity:.35;transition:opacity 1s}.is-open .toolbox-halo{opacity:1}
.toolbox{position:absolute;left:50%;top:50%;width:210px;height:200px;transform:translate(-50%,-50%);border:0;background:none;color:var(--accent);padding:0;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent}
.toolbox svg{width:100%;height:175px;overflow:visible;filter:drop-shadow(0 18px 18px #0003);transition:filter .5s}.toolbox:hover svg{filter:drop-shadow(0 20px 23px #0005)}
.toolbox-lid{transform-origin:120px 60px;transition:transform .85s cubic-bezier(.22,1,.36,1)}.is-open .toolbox-lid{transform:translateY(-32px) rotate(-9deg)}
.toolbox-action{display:block;font-size:10px;letter-spacing:1.2px;line-height:1.8;margin-top:-8px;color:var(--muted)}
.skill-token{--x:0px;--y:0px;position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;display:grid;place-items:center;border:1px solid #d6dec329;border-radius:19px;background:linear-gradient(140deg,#354642ee,#17282bee);box-shadow:inset 0 1px 0 #fff1,0 8px 24px #0003;opacity:0;transform:translate(0,8px) scale(.15) rotate(-20deg);pointer-events:none;transition:transform .85s cubic-bezier(.2,.85,.23,1.12),opacity .35s,border-color .3s,box-shadow .3s;transition-delay:0ms;cursor:pointer;z-index:1;padding:14px;-webkit-tap-highlight-color:transparent}
.is-open .skill-token{transform:translate(var(--x),var(--y)) rotate(var(--tilt));opacity:1;pointer-events:auto;transition-delay:var(--delay)}
.is-open .skill-token:hover,.is-open .skill-token:focus-visible,.is-open .skill-token[aria-pressed=true]{transform:translate(var(--x),var(--y)) scale(1.1);border-color:var(--accent);box-shadow:0 8px 28px #0005,0 0 20px #c4b69312;z-index:3;transition-delay:0ms}
.skill-token img{display:block;width:100%;height:100%;object-fit:contain}.skill-mask{display:block;width:100%;height:100%;mask:var(--icon) center/contain no-repeat;-webkit-mask:var(--icon) center/contain no-repeat}.skill-language{position:absolute;bottom:4px;right:4px;padding:1px 3px;background:#17282b;border-radius:4px;color:var(--text);font:9px var(--sans)}
.skill-readout{text-align:center;min-height:89px;margin-top:8px}.skill-readout-label{font-size:9px;letter-spacing:2px;color:var(--accent)}.skill-readout-name{font-size:20px;font-weight:400;line-height:1.7;margin:10px 0 0;color:var(--text)}.skills-hint{text-align:center;color:var(--muted);font-size:11px;line-height:1.9;margin:12px auto 0;max-width:480px}
@media(max-width:600px){.skills-section{margin-top:50px;padding-top:30px}.skills-heading{display:block}.skills-heading h3{font-size:27px}.skills-intro{margin-top:14px;font-size:11px}.skills-stage{height:470px;margin-top:20px}.toolbox{width:164px;height:162px}.toolbox svg{height:145px}.toolbox-action{font-size:9px}.skill-token{width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:14px;padding:10px}.skill-readout-name{font-size:17px}.skill-readout{min-height:80px}.skills-hint{font-size:10px}.skill-language{font-size:8px;bottom:2px;right:2px}}
@media(prefers-reduced-motion:reduce){.skills-stage *{transition:none!important}}
.skills-stage.motion-reduced *{transition:none!important}
.skills-heading h2{font-size:clamp(29px,3vw,42px)}
@media(max-width:900px){header nav{gap:16px;font-size:12px}}
@media(max-width:600px){.skills-section{margin-top:0;padding-block:52px 60px}.skills-heading h2{font-size:30px}.skills-stage{height:510px}header nav{gap:10px;font-size:10px;overflow-x:auto;scrollbar-width:none}header nav::-webkit-scrollbar{display:none}header nav a{flex-shrink:0}}