/* A light, precise visual language built around the student's digital sketch. */
.skill-path-design {
    --ui-ink:#14213d;
    --ui-muted:#52627a;
    --ui-blue:#2563eb;
    --ui-line:#dbe4f0;
    --ui-paper:#f5f8fd;
    --ui-radius:12px;
    --ui-ease:cubic-bezier(.16,1,.3,1);
    accent-color:var(--ui-blue);
    scrollbar-color:#a9b9d0 #f5f8fd;
}
.skill-path-design ::selection { color:#14213d; background:#ccdcff; }
.skill-path-design h1,
.skill-path-design h2,
.skill-path-design h3 { text-wrap:balance; }
.skill-path-design p { text-wrap:pretty; }
.skill-path-design .site-header { border-bottom:1px solid #14213d0d; }
.skill-path-design .nav-links > li > a,
.skill-path-design .nav-action { transition:color .18s,background-color .18s; }
.skill-path-design .nav-links > li > .learning-link { border-radius:8px; background:#f5f8ff; border-color:#ccdaf5; }
.skill-path-design .nav-links > li > .learning-link:hover { color:#fff; background:#1d4ed8; border-color:#1d4ed8; }
.skill-path-design :is(.primary-btn,.secondary-btn) { border-radius:9px; min-height:52px; padding:12px 24px; font-size:16px; }
.skill-path-design .primary-btn { box-shadow:0 5px 12px #14213d10; }
.skill-path-design .primary-btn:hover { box-shadow:0 8px 18px #14213d1a; }
.skill-path-design :is(a,button):focus-visible { outline:3px solid #174dcc; outline-offset:4px; }
.skill-path-design .hero-content p { color:#233c5d; }
.skill-path-design .study-section { padding-block:76px 64px; }
.skill-path-design .section-header { margin-bottom:36px; }
.skill-path-design .section-header p { color:var(--ui-muted); }
.skill-path-design .study-directory { column-gap:56px; }
.skill-path-design .study-item { padding:23px 0; gap:20px; min-height:124px; border-color:var(--ui-line); }
.skill-path-design .study-item:first-child { background:none; border-radius:0; border-bottom-color:var(--ui-line); }
.skill-path-design .study-item:first-child h3 { color:var(--ui-ink); }
.skill-path-design .study-item > i { display:grid; place-items:center; flex-basis:56px; height:56px; color:#2157c8; background:var(--ui-paper); border:1px solid #e3eaf5; border-radius:12px; font-size:26px; }
.skill-path-design .study-item h3 { font-size:22px; margin-bottom:4px; }
.skill-path-design .study-item p { font-size:15px; color:var(--ui-muted); }
.skill-path-design .study-item:target { background:#edf3ff; outline-offset:5px; }
.skill-path-design .about-section { position:relative; isolation:isolate; padding:48px; gap:48px; margin-bottom:48px; border:1px solid #e2e9f4; border-radius:20px; background:var(--ui-paper); grid-template-columns:1fr 1.05fr; }
.skill-path-design .about-content h2 { margin-bottom:20px; font-size:clamp(32px,3.2vw,48px); }
.skill-path-design .about-content h2 span { color:#2157c8; }
.skill-path-design .about-content > p { font-size:17px; line-height:2.05; color:var(--ui-muted); max-width:54ch; }
.skill-path-design .feature-list { margin-top:28px; gap:22px 18px; }
.skill-path-design .feature { gap:10px; min-height:58px; }
.skill-path-design .feature:hover { transform:none; box-shadow:none; }
.skill-path-design .feature i { color:#2157c8; width:30px; flex-basis:30px; font-size:22px; }
.skill-path-design .feature-copy { gap:4px; }
.skill-path-design .feature span { font-size:14px; }
.skill-path-design .feature-copy small { color:var(--ui-muted); font-size:12px; }
.skill-path-design .about-image { position:relative; align-self:center; min-height:0; margin:0; padding:10px; border:1px solid #d4dfed; border-radius:14px; background:#fff; box-shadow:0 16px 32px #14213d0c; overflow:visible; }
.skill-path-design .about-image::before { content:""; position:absolute; z-index:-1; inset:-18px; border-radius:20px; background-image:linear-gradient(#2563eb0a 1px,transparent 1px),linear-gradient(90deg,#2563eb0a 1px,transparent 1px); background-size:20px 20px; pointer-events:none; }
.skill-path-design .about-image picture { height:auto; aspect-ratio:4 / 3; overflow:hidden; border-radius:7px; background:#e8eef8; }
.skill-path-design .about-image img { object-fit:cover; }
.skill-path-design .learning-caption { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 8px 8px; color:var(--ui-ink); font-size:14px; font-weight:600; line-height:1.8; }
.skill-path-design .learning-caption i { color:var(--ui-blue); font-size:18px; }
.skill-path-design .stats-section { padding-block:24px; border-color:var(--ui-line); }
.skill-path-design .stat-card .stat-value { color:#2157c8; font-variant-numeric:tabular-nums; }
.skill-path-design .stat-card p { color:var(--ui-muted); }
.skill-path-design .gallery-section { padding-block:68px 48px; }
.skill-path-design .gallery-grid { gap:20px; }
.skill-path-design .gallery-item,
.skill-path-design .gallery-media-button { border-radius:var(--ui-radius); }
.skill-path-design .gallery-media-button:focus-visible { outline-offset:-5px; }
.skill-path-design .gallery-button .primary-btn { min-height:48px; border:1px solid var(--ui-line); padding:10px 22px; }
.skill-path-design .contact-invitation { padding:36px 40px; border:1px solid #dce6f7; border-radius:16px; margin-bottom:48px; }
.skill-path-design .invitation-copy p { color:var(--ui-muted); }
.skill-path-design .invitation-icon { background:transparent; border:1px solid #c6d8f6; border-radius:22px; flex-basis:84px; height:84px; font-size:34px; }
.skill-path-design .footer-link-list a,
.skill-path-design .footer-link-button { min-height:44px; display:inline-flex; align-items:center; }
.skill-path-design .footer-social a { width:44px; height:44px; }
.skill-path-design .modal-box { border:1px solid var(--ui-line); border-radius:16px; box-shadow:0 24px 70px #14213d33; }
.skill-path-design :is(.close,.image-viewer-close) { min-width:44px; min-height:44px; }

/* The only scroll-linked motion: a small settling movement of the drawing.
   Unsupported browsers and reduced-motion users receive the complete static UI. */
@supports (animation-timeline:view()) {
    @media (prefers-reduced-motion:no-preference) and (min-width:769px) {
        .skill-path-design .about-image { animation:drawing-settle linear both; animation-timeline:view(); animation-range:entry 0% entry 100%; }
        @keyframes drawing-settle { from { transform:translateY(18px); } to { transform:translateY(0); } }
    }
}
@media (min-width:769px) and (max-width:1100px) {
    .skill-path-design .about-section { padding:28px; gap:30px; }
    .skill-path-design .about-content > p { font-size:15px; }
    .skill-path-design .feature-list { grid-template-columns:1fr; gap:12px; margin-top:20px; }
    .skill-path-design .feature { min-height:42px; }
    .skill-path-design .study-item h3 { font-size:19px; }
}
@media (max-width:768px) {
    .skill-path-design .study-section { padding-block:44px 36px; }
    .skill-path-design .section-header { margin-bottom:26px; }
    .skill-path-design .study-item { min-height:110px; gap:15px; padding:20px 0; }
    .skill-path-design .study-item > i { flex-basis:46px; height:46px; border-radius:10px; font-size:22px; }
    .skill-path-design .study-item h3 { font-size:18px; }
    .skill-path-design .study-item p { font-size:13px; }
    .skill-path-design .about-section { padding:26px 20px 20px; margin-bottom:32px; border-radius:16px; grid-template-columns:1fr; gap:30px; }
    .skill-path-design .about-content h2 { font-size:31px; margin-bottom:14px; }
    .skill-path-design .about-content > p { font-size:15px; line-height:2; }
    .skill-path-design .feature-list { gap:18px 12px; margin-top:24px; }
    .skill-path-design .feature { gap:8px; align-items:flex-start; }
    .skill-path-design .feature i { width:24px; flex-basis:24px; font-size:19px; }
    .skill-path-design .feature span { font-size:12px; }
    .skill-path-design .feature-copy small { font-size:11px; }
    .skill-path-design .about-image { aspect-ratio:auto; padding:7px; border-radius:11px; }
    .skill-path-design .about-image::before { inset:-10px; }
    .skill-path-design .learning-caption { padding:12px 5px 5px; font-size:12px; }
    .skill-path-design .gallery-section { padding-block:40px 32px; }
    .skill-path-design .gallery-grid { gap:16px; }
    .skill-path-design .contact-invitation { padding:26px 22px; margin-bottom:32px; }
    .skill-path-design :is(.primary-btn,.secondary-btn) { min-height:48px; padding:11px 18px; font-size:14px; }
    .skill-path-design .menu-btn { width:44px; height:44px; border-radius:8px; }
}
@media (max-width:360px) {
    .skill-path-design .about-section { padding-inline:16px; }
    .skill-path-design .feature-list { grid-template-columns:1fr; gap:14px; }
    .skill-path-design .feature { min-height:42px; }
}
@media (prefers-reduced-motion:reduce) {
    .skill-path-design *, .skill-path-design *::before, .skill-path-design *::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}