/* Skills presentation: preserve the original reference card's behavior. */
.visual-refinement #skills.skills-section{
 padding-top:46px;
 padding-bottom:48px;
 scroll-margin-top:118px;
}
.visual-refinement #skills .skills-section-heading{
 display:flex;
 align-items:baseline;
 justify-content:space-between;
 gap:24px;
 margin-bottom:24px;
}
.visual-refinement #skills .skills-section-heading h2{
 font-size:30px;
 font-weight:500;
 line-height:1.25;
 letter-spacing:-.025em;
 flex:none;
}
.visual-refinement #skills .skills-section-heading>p{
 max-width:530px;
 color:var(--soft);
 font-size:14px;
 line-height:1.7;
}
.visual-refinement #skills .skills-overview-layout{
 display:grid;
 grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
 gap:22px;
 align-items:stretch;
}
.visual-refinement #skills #reference{
 display:grid;
 grid-template-columns:minmax(0,2fr) minmax(0,3fr);
 grid-template-rows:auto auto auto;
 align-content:start;
 align-items:start;
 gap:20px;
 min-width:0;
 margin:0;
}
.visual-refinement #skills #reference .reference-visual{
 position:relative;
 align-self:start;
 width:100%;
 height:auto;
 min-height:0;
 aspect-ratio:4/3;
 overflow:hidden;
}
.visual-refinement #skills #reference .reference-thumb{
 position:absolute;
 inset:0;
 display:block;
 width:100%;
 height:100%;
 min-height:0;
 max-height:none;
 margin:0;
 aspect-ratio:auto;
 object-fit:cover;
 object-position:center;
}
.visual-refinement #skills .skills-secondary-cards{display:grid;grid-template-rows:1fr 1fr;gap:18px;min-width:0}
.visual-refinement #skills .skill-overview-card{
 display:grid;
 grid-template-columns:minmax(130px,.8fr) minmax(0,1.2fr);
 align-items:center;
 gap:18px;
 min-width:0;
 padding:18px;
 border:1px solid var(--line);
 border-radius:12px;
 background:var(--panel);
}
.visual-refinement #skills .skill-overview-visual{min-width:0;margin:0}
.visual-refinement #skills .skill-prop-image{
 position:relative;
 display:grid;
 place-items:center;
 width:100%;
 aspect-ratio:4/3;
 overflow:hidden;
 border-radius:7px;
 background:#fff;
}
.visual-refinement #skills .skill-prop-image img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;opacity:0;transition:none}
.visual-refinement #skills .skill-prop-image img:first-child{opacity:1}
.visual-refinement #skills .skill-prop-next{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer}
.visual-refinement #skills .skill-prop-pause{position:absolute;inset-block-start:5px;inset-inline-end:5px;z-index:2;display:grid;place-items:center;width:24px;height:24px;min-width:24px;min-height:24px;padding:0;border:1px solid #d6d6d180;border-radius:50%;background:#fffffff0;color:#686862;font:11px/1 var(--font);cursor:pointer}
.visual-refinement #skills .skill-prop-pause:hover:not(:disabled){color:#20201d;border-color:#9b9b93;background:#fff}
.visual-refinement #skills .skill-prop-pause:disabled{opacity:.5;cursor:default}
.visual-refinement #skills .skill-prop-next:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.visual-refinement #skills .skill-prop-pause:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.visual-refinement #skills .skill-prop-error{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:14px;background:#fff;color:#686862;font-size:11px;line-height:1.5;text-align:center;pointer-events:none}
.visual-refinement #skills .skill-props-visual figcaption{height:3em;min-height:3em;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.visual-refinement #skills .skill-overview-visual figcaption{margin-top:8px;color:var(--muted);font-size:10px;line-height:1.5}
.visual-refinement #skills .skill-overview-copy{min-width:0;text-align:start}
.visual-refinement #skills .skill-overview-kicker{
 margin:0 0 8px;
 color:var(--accent);
 font-size:10px;
 font-weight:500;
 line-height:1.5;
 letter-spacing:.045em;
}
.visual-refinement #skills .skill-overview-copy h3{
 margin:0;
 font-size:22px;
 font-weight:550;
 line-height:1.24;
 letter-spacing:-.025em;
 overflow-wrap:anywhere;
}
.visual-refinement #skills .skill-overview-description{margin:11px 0 0;color:var(--soft);font-size:13px;line-height:1.7}
.visual-refinement #skills .skill-overview-link{
 display:inline-flex;
 align-items:center;
 gap:8px;
 max-width:100%;
 min-height:36px;
 margin-top:12px;
 color:var(--text);
 font-size:12px;
 line-height:1.5;
 text-align:start;
}
.visual-refinement #skills .skill-overview-link:hover{color:var(--accent)}
.visual-refinement #skills .skill-overview-link .icon{width:15px;height:15px;flex:none}
.visual-refinement #skills .skill-style-diagram{
 min-width:0;
 padding:13px 10px;
 border:1px solid var(--line);
 border-radius:8px;
 background:var(--bg);
}
.visual-refinement #skills .skill-style-step{display:flex;align-items:center;gap:9px;min-width:0;color:var(--soft);font-size:11px;line-height:1.5}
.visual-refinement #skills .skill-diagram-symbol{display:grid;place-items:center;width:24px;height:24px;flex:none;color:var(--muted)}
.visual-refinement #skills .skill-diagram-symbol svg{display:block;width:21px;height:21px}
.visual-refinement #skills .skill-diagram-connector{display:block;margin:3px 0;color:var(--muted);font:11px/1 var(--font);text-align:center}
.visual-refinement #skills .skill-style-result{color:var(--text)}
.visual-refinement #skills .skill-style-result .skill-diagram-symbol{color:var(--accent)}
.visual-refinement #skills .skills-overview-layout:has(#reference .reference-details[open]){align-items:start}
@media(max-width:1100px){
 .visual-refinement #skills .skills-overview-layout{grid-template-columns:minmax(0,1fr)}
 .visual-refinement #skills .skills-secondary-cards{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}
 .visual-refinement #skills .skill-overview-card{grid-template-columns:minmax(100px,.75fr) minmax(0,1.25fr);gap:14px;padding:16px}
 .visual-refinement #skills .skill-overview-copy h3{font-size:20px}
}
@media(max-width:760px){
 .visual-refinement #skills .skills-section-heading{display:block;margin-bottom:22px}
 .visual-refinement #skills .skills-section-heading>p{max-width:none;margin-top:12px}
 .visual-refinement #skills .skills-secondary-cards{grid-template-columns:minmax(0,1fr);gap:16px}
 .visual-refinement #skills .skill-overview-card{grid-template-columns:minmax(120px,.8fr) minmax(0,1.2fr);gap:18px;padding:18px}
 .visual-refinement #skills .skill-overview-copy h3{font-size:22px}
}
@media(max-width:600px){
 .visual-refinement #skills.skills-section{padding-top:34px;padding-bottom:36px}
 .visual-refinement #skills .skills-section-heading h2{font-size:27px}
 .visual-refinement #skills .skills-overview-layout{gap:16px}
 .visual-refinement #skills #reference{grid-template-columns:minmax(0,1fr);gap:20px}
 .visual-refinement #skills #reference .reference-visual,
 .visual-refinement #skills #reference .reference-content{grid-column:1}
 .visual-refinement #skills .skill-overview-card{grid-template-columns:minmax(102px,.75fr) minmax(0,1.25fr);gap:14px;padding:16px}
 .visual-refinement #skills .skill-overview-copy h3{font-size:21px}
 .visual-refinement #skills .skill-overview-description{font-size:13px;line-height:1.7}
 .visual-refinement #skills .skill-overview-kicker{font-size:9px}
 .visual-refinement #skills .skill-overview-link{font-size:12px;min-height:40px}
 .visual-refinement #skills .skill-style-diagram{padding:12px 8px}
 .visual-refinement #skills .skill-style-step{flex-direction:column;gap:4px;text-align:center;font-size:10px}
 .visual-refinement #skills .skill-diagram-connector{margin-block:5px}
 .visual-refinement #skills .skill-overview-visual figcaption{font-size:10px}
}
@media(max-width:359px){
 .visual-refinement #skills .skill-overview-card{grid-template-columns:92px minmax(0,1fr);gap:12px;padding:14px}
 .visual-refinement #skills .skill-overview-copy h3{font-size:19px}
}