body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#path-picker-modal { display: block; overflow: auto; padding: 0; background: #f6f6f0; backdrop-filter: none; }
#path-picker-modal[hidden], .library-actions button[hidden] { display: none; }
.library-bar { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 68px; padding: 0 clamp(26px, 5vw, 80px); background: #fcfcf8; border-bottom: 1px solid #d9ddd4; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: #193d35; font-size: 22px; font-weight: 720; letter-spacing: -.06em; }
.wordmark img { width: 33px; height: 33px; }
.library-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; color: #55665d; font-size: 12px; }
#catalog-status::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #679477; }
.library-actions :is(a, button), #topics button { color: #244738; cursor: pointer; border: 1px solid #c6d1c6; background: transparent; border-radius: 7px; font-weight: 600; }
.library-actions :is(a, button) { padding: 8px 13px; }
.library-actions a { text-decoration: none; }
.library-actions a:hover { background: #edf3eb; border-color: #6a8d74; }
.path-picker-card { max-width: 1480px; max-height: none; width: 100%; margin: auto; overflow: visible; padding: 30px clamp(26px, 5vw, 80px) 50px; border: 0; background: transparent; box-shadow: none; }
.library-hero { display: flex; align-items: center; justify-content: space-between; isolation: isolate; position: relative; overflow: hidden; min-height: 170px; padding: 28px 36px; color: #f7f6df; background: #173e35; border-radius: 14px; }
.library-hero > div { max-width: 60%; }
.library-hero img { position: absolute; right: 0; top: 0; height: 100%; width: 36%; object-fit: cover; z-index: -1; mask-image: linear-gradient(to right, transparent, black 12%); }
.library-hero h2 { margin: 0 0 10px; color: inherit; font: 500 clamp(40px, 4.4vw, 65px)/1.02 Georgia, serif; letter-spacing: -.058em; }
.library-hero p { color: #cfdece; margin: 0; max-width: 390px; font-size: 15px; line-height: 1.55; }
.course-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 26px 0 18px; }
#topics { display: flex; gap: 6px; }
#topics button { padding: 6px 14px; border-radius: 20px; font-size: 13px; }
#topics button[aria-pressed="true"] { background: #244638; color: #fff; border-color: #244638; }
#course-count, .course-footer { font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; }
#course-count { color: #627368; }
.learning-path-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.learning-path-choice { min-height: 166px; padding: 18px 20px 14px; gap: 7px; border: 1px solid #d0d8ca; border-radius: 10px; background: #fffef9; transition: background .15s, border-color .15s; }
.learning-path-choice:hover { background: #f9fcf4; border-color: #6a8d74; }
.learning-path-choice strong { font: 600 1.13rem/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #223e31; letter-spacing: -.035em; }
.learning-path-choice span { color: #526459; font-size: .84rem; }
.course-topic { font: 700 11px/1.4 ui-monospace, Menlo, Consolas, monospace; color: #5a427c; background: #f0eafa; padding: 2px 7px; border-radius: 4px; }
.course-topic[data-topic="HTML"] { color: #844623; background: #faeadb; }
.course-topic[data-topic="CSS"] { color: #2d6159; background: #dfefe6; }
.learning-path-choice .course-footer { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 9px; color: #68756a; font-size: 11px; }
.course-footer i { font: 18px/1 sans-serif; color: #356342; }
.library-footer { margin-top: 36px; text-align: center; }
.library-footer hr { height: 1px; margin: 0 0 19px; border: 0; background: linear-gradient(to right, transparent, #a7b9a9 18%, #a7b9a9 82%, transparent); }
.library-footer a { color: #356342; font-size: 13px; text-underline-offset: 3px; }
.library-footer a:hover { color: #193d35; }
.path-access-form { margin: 30px auto; padding: 26px; background: #fffef9; border: 1px solid #d0d8ca; border-radius: 12px; }
:focus-visible { outline: 3px solid #569a7b; outline-offset: 2px; }
#confirm-action { width: min(420px, 90vw); color: #213e32; padding: 24px; background: #fffef9; border: 1px solid #d0d8ca; border-radius: 14px; box-shadow: 0 18px 70px #0c291f48; }
#confirm-action::backdrop { background: #142c2680; }
#confirm-title { margin: 0; font-size: 1.18rem; line-height: 1.4; }

@media (max-width: 560px) {
  .library-bar { flex-wrap: wrap; gap: 10px; padding-block: 12px; }
  .library-actions { gap: 8px; }
}