@import url('./workshop.css');
@import url('./project-pages.css');
@import url('./learning-guides.css');
@import url('./locales.css');
@import url('./contact.css');
/* Knotting lessons use real demonstration frames and the site's existing paper palette. */
.knot-learning-path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding:28px 0;border-block:1px solid var(--line);margin-bottom:60px}
.knot-learning-path a{text-decoration:none;padding:8px 0}
.knot-learning-path strong{display:block;font:25px/1.3 var(--serif);margin-bottom:8px}
.knot-learning-path span{display:block;color:var(--muted);font-size:13px}
.knot-learning-path a:hover strong{color:var(--red)}
.knot-course-section,.knot-extra-practice{margin-block:60px}
.knot-section-intro{max-width:70ch;font-size:15px;line-height:1.9;color:var(--muted);margin-bottom:30px}
.knot-course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px 28px;list-style:none;padding:0;margin:30px 0}
.knot-course-card{min-width:0}
.knot-course-card>a{display:block;text-decoration:none}
.knot-course-card img{width:100%;aspect-ratio:852/432;object-fit:cover;background:var(--white)}
.knot-course-meta{display:flex;justify-content:space-between;gap:14px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;margin-top:16px}
.knot-course-card h3{font-size:24px;margin:10px 0 6px}
.knot-course-card p{font-size:12px;color:var(--muted);margin:8px 0 0}
.knot-course-card p.knot-course-chinese{font-size:16px;color:var(--ink)}
.knot-course-card a:hover h3{color:var(--red)}
.knot-project-grid{margin-top:34px}
.knot-project-card img{object-fit:contain;background:#201e1a}
.knot-project-card p{font-size:13px;line-height:1.8}
.knot-project-card p.knot-project-card-action{color:var(--ink);margin-top:16px}
.knot-project-intro-note{max-width:72ch;font-size:14px;line-height:1.9;margin-bottom:35px}
.knot-project-source{font-size:13px;line-height:1.9;margin:-8px 0 30px;color:var(--muted)}
.knot-project-part{display:flex;align-items:center;gap:18px;margin:4px 0 16px;font-size:13px}
.knot-project-part select{flex:1;min-width:0;min-height:44px;border:1px solid #aaa195;background:var(--white);color:var(--ink);padding:9px 28px 9px 12px;font:inherit}
.knot-lesson-guide .knot-project-basics{padding-left:20px}
.knot-project-basics p{color:var(--muted);margin:5px 0 14px}
.knot-video-section video::cue{color:#fff;background:rgba(20,18,15,.92);font-family:var(--sans);font-size:20px;line-height:1.4}
.knot-caption-panel{min-height:72px;padding:12px 14px;border:1px solid var(--line);border-top:0;background:var(--white);color:var(--ink);font:15px/1.6 var(--sans);text-align:center;white-space:pre-line;overflow-wrap:anywhere}
.knot-caption-panel[hidden]{display:none}
.knot-learning-next{padding-block:45px;margin-block:60px;border-block:1px solid var(--line)}
.knot-learning-next p{max-width:72ch;font-size:15px;margin-top:20px}
.knot-extra-practice ul{list-style:none;padding:0;margin:28px 0}
.knot-extra-practice li{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:20px 0;font-size:15px}
.knot-extra-practice li span{color:var(--muted);font-size:13px}
.knot-course-links{display:flex;flex-wrap:wrap;gap:12px 26px;font-size:13px;margin-bottom:28px}
.knot-course-links a{min-height:44px;display:inline-flex;align-items:center}
.knot-lesson-name{font-size:24px;margin-bottom:24px}
.knot-lesson-opening{display:grid;grid-template-columns:minmax(0,2fr) minmax(230px,1fr);gap:40px;align-items:start}
.knot-video-section{min-width:0}
@media(max-width:700px){.knot-video-section video::cue{font-size:14px}}
.knot-video-section video{display:block;width:100%;height:auto;aspect-ratio:852/432;background:#22201d}
.knot-video-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px 22px;flex-wrap:wrap;padding:16px 0}
.knot-video-toolbar label{display:flex;align-items:center;gap:12px;font-size:13px}
.knot-video-toolbar select{color:var(--ink);background:var(--white);border:1px solid #aaa195;min-height:44px;padding:8px 24px 8px 12px}
.knot-replay,.knot-step-time,.knot-caption-toggle{border:1px solid var(--line);color:var(--ink);background:var(--white);font-size:12px;min-height:44px;padding:9px 14px;white-space:nowrap}
.knot-replay:hover,.knot-step-time:hover,.knot-caption-toggle:hover{background:#eee8dd;border-color:#aaa195}
.knot-replay:disabled,.knot-step-time:disabled,.knot-caption-toggle:disabled,.knot-video-toolbar select:disabled{cursor:not-allowed;color:var(--muted);background:var(--paper);border-color:var(--line)}
#knot-video-status{font-size:13px;line-height:1.8;min-height:24px}
.knot-lesson-guide{border-top:1px solid var(--line);padding-top:22px}
.knot-lesson-guide h2{font-size:25px;margin-bottom:16px}
.knot-lesson-guide h3{font-size:20px;margin:26px 0 14px}
.knot-lesson-guide p,.knot-lesson-guide li{font-size:13px;line-height:1.9}
.knot-lesson-guide ol{padding-left:22px;margin:0}
.knot-lesson-guide li{margin:9px 0;padding-left:4px}
.knot-watch-tip{border-top:1px solid var(--line);padding-top:18px;margin-top:24px;color:var(--muted)}
.knot-illustrated-steps{margin-top:60px}
.knot-illustrated-steps .section-heading{align-items:start}
.knot-illustrated-steps .section-heading p{font-size:13px;max-width:37ch}
.knot-lesson-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 30px;list-style:none;margin:0;padding:0}
.knot-lesson-steps li{scroll-margin-top:28px;min-width:0}
.knot-step-image{display:block}
.knot-step-image img{width:100%;height:auto;background:var(--white)}
.knot-lesson-steps figcaption{margin-top:18px}
.knot-step-heading{display:flex;justify-content:space-between;align-items:start;gap:14px;margin-bottom:14px}
.knot-step-heading h3{font-size:23px;line-height:1.35}
.knot-step-heading h3 span{color:var(--red);font-variant-numeric:tabular-nums}
.knot-lesson-steps figcaption p{font-size:14px;line-height:1.9;max-width:65ch}
.knot-lesson-check{margin-top:60px;padding-block:30px;border-top:1px solid var(--line)}
.knot-lesson-check h2{font-size:30px;margin-bottom:22px}
.knot-lesson-check ul{max-width:75ch;padding-left:22px;font-size:15px}
.knot-lesson-check li{margin:12px 0}
.knot-lesson-pagination{display:flex;justify-content:space-between;gap:35px;border-top:1px solid var(--line);margin-top:28px;padding-top:28px}
.knot-lesson-pagination a{display:block;text-decoration:none;max-width:45%}
.knot-lesson-pagination a:last-child{text-align:right}
.knot-lesson-pagination span{display:block;color:var(--muted);font-size:12px;margin-bottom:8px}
.knot-lesson-pagination strong{font-weight:500;font-size:17px}
.knot-lesson-pagination a:hover strong{color:var(--red)}
@media(max-width:1000px){.knot-course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.knot-lesson-opening{grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr);gap:25px}.knot-step-heading{display:block}.knot-step-time{margin-top:12px}}
@media(max-width:700px){.knot-learning-path{grid-template-columns:1fr;gap:20px;margin-bottom:38px}.knot-learning-path a{padding-block:12px}.knot-learning-path strong{font-size:24px}.knot-lesson-opening{grid-template-columns:1fr;gap:30px}.knot-lesson-guide ol{columns:2;column-gap:28px}.knot-lesson-steps{grid-template-columns:1fr;gap:38px}.knot-illustrated-steps .section-heading{display:block}.knot-illustrated-steps .section-heading p{margin-top:20px;max-width:60ch}.knot-extra-practice li{display:block}.knot-extra-practice li span{display:block;margin-top:8px}.knot-lesson-pagination strong{font-size:15px}}
@media(max-width:440px){.knot-course-grid{grid-template-columns:1fr;gap:32px}.knot-lesson-guide ol{columns:1}.knot-video-toolbar{align-items:stretch}.knot-video-toolbar label{justify-content:space-between;flex:1}.knot-video-toolbar .knot-replay,.knot-video-toolbar .knot-caption-toggle{width:100%}.knot-lesson-pagination{gap:20px}.knot-learning-next h2{font-size:30px}}
@media print{.knot-caption-panel,.knot-video-section video,.knot-video-toolbar,.knot-step-time{display:none}.knot-lesson-opening,.knot-lesson-steps{display:block}.knot-lesson-steps li{break-inside:avoid;margin-bottom:30px}.knot-lesson-steps img{max-width:450px}}