.skills-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; padding: 46px 0; border-top: 1px solid #ccd9d2; border-bottom: 1px solid #e0e5e0; }
.skills-heading h2 { margin-bottom: 14px; }
.skills-intro { color: #65706e; font-size: 15px; margin-bottom: 28px; }
.skills-carousel { min-width: 0; }
.skill-window { overflow: hidden; border-radius: 16px; }
.skill-card-grid { display: flex; transition: transform .6s cubic-bezier(.22,.68,0,1); }
.floating-skill-card { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; padding: 24px 28px 22px; background: #edf2ed; border-radius: 16px; color: #101416; }
.floating-skill-card:hover { color: #101416; background: #e6eee8; }
.floating-skill-card:focus-visible { outline-offset: -4px; }
.skill-card-status { font-size: 11px; color: #0b7465; margin-bottom: 16px; }
.floating-skill-card h3 { font-size: 25px; margin-bottom: 12px; line-height: 1.5; }
.floating-skill-card p { color: #65706e; font-size: 14px; line-height: 1.9; margin-bottom: 20px; }
.skill-card-action { margin-top: auto; font-size: 13px; color: #0b7465; }
.skill-controls { display: flex; justify-content: space-between; align-items: center; margin: 15px 3px 0; color: #65706e; }
.skill-controls[hidden] { display: none; }
.skill-position { font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: .1em; }
.skill-controls > div { display: flex; gap: 5px; }
.skill-controls button { min-width: 44px; min-height: 44px; border: 0; background: transparent; border-radius: 10px; font-size: 13px; color: #0b7465; }
.skill-controls button:hover { background: #e6eee8; }
.skill-load-status { color: #65706e; font-size: 13px; }
.skill-load-status:empty { display: none; }
.skill-retry { margin-top: 12px; border: 1px solid #c5ceca; border-radius: 10px; padding: 8px 15px; background: transparent; }
@media(max-width:700px) { .skills-layout { grid-template-columns: 1fr; gap: 26px; padding: 30px 0; } .skills-intro { margin-bottom: 14px; } .floating-skill-card { padding: 22px; } .floating-skill-card h3 { font-size: 21px; } }
@media(prefers-reduced-motion:reduce) { .skill-card-grid { transition: none; } }
/* Reserve the carousel footprint before either its script or data arrives. */
.skill-window, .floating-skill-card { min-height: 272px; }
.skills-carousel { position: relative; }
.skill-controls[hidden] { display: flex; visibility: hidden; }
[data-skill-library]:not([data-skills-ready]) .skill-window { background: #edf2ed; }
[data-skill-library]:not([data-skills-ready]) .skill-window::before { content: ''; display: block; width: 65%; height: 12px; margin: 30px 28px; border-radius: 6px; background: #dce5de; box-shadow: 0 34px #e2e9e3, 0 62px #e2e9e3; }
[data-skill-library]:not([data-skills-ready]) .skill-load-status { position: absolute; top: 145px; left: 28px; right: 28px; }
@media(max-width:700px) { .skill-window, .floating-skill-card { min-height: 340px; } }