body{background:#f6f7fb;color:#0f172a}section.trainings-hero{margin-top:110px}.training-detail-page{min-height:100vh;padding:100px 32px 60px}.training-detail-page,main.training-detail-page{background-color:#f6f7fb;color:#0f172a}.trainings-page{padding:140px 0 60px;min-height:100vh;background:#f6f7fb}.trainings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:20px}.training-card{background:#fff;border:1px solid #c8ccd3;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(15,23,42,.08);display:flex;flex-direction:column;position:relative;transition:all .3s}.training-card:hover{box-shadow:0 12px 36px rgba(15,23,42,.12)}.thumbnail{width:100%;height:160px;background:#eef2f7;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.thumb-img{width:100%;height:100%;object-fit:cover}.thumb-placeholder{color:#64748b;font-weight:600}.card-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:8px;color:var(--textGray)}.card-body h2{margin:0;font-weight:600;font-size:20px;color:#3773b9}.description{margin:0;color:#475569;font-size:13px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.detail-container{max-width:1100px;margin:0 auto}.detail-bar{display:flex;align-items:center;gap:14px;margin-bottom:16px}.back-chip{background:#f1f5f9;color:#0f172a;border:1px solid #c8ccd3;width:40px;height:40px;border-radius:12px;font-size:18px;cursor:pointer}.bar-meta{display:flex;flex-direction:column}.bar-eyebrow{margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#64748b}.bar-title{margin:0;font-size:18px;color:#0f172a}.detail-hero-dark{background:#fff;border:1px solid #c8ccd3;border-radius:18px;padding:26px;box-shadow:0 20px 60px rgba(15,23,42,.1);margin-bottom:24px}.chip-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}.tag-chip{background:#e8f5ee;color:#0f7a4a;padding:8px 12px;border-radius:999px;font-weight:700;border:1px solid #bfe3cf}.hero-title{font-size:42px;margin:0 0 12px;color:#3773b9}.hero-copy{margin:0 0 18px;color:#475569;line-height:1.6}.info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}.info-card{background:#f8fafc;border:1px solid #c8ccd3;border-radius:14px;padding:12px 14px}.info-icon{margin:0 0 6px;font-weight:800;color:#0f172a}.info-text{margin:0;color:#475569}.panel{background:#fff;border:1px solid #c8ccd3;border-radius:18px;padding:18px;margin-bottom:18px;box-shadow:0 20px 60px rgba(15,23,42,.1)}.panel-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}.panel-icon{background:#e6f4ef;color:#0f7a4a;border-radius:12px;padding:10px;display:inline-flex}.panel-title{margin:0;color:#0f172a;font-size:20px}.panel-sub{margin:2px 0 0;color:#64748b}.panel-body{background:#f8fafc;border:1px solid #c8ccd3;border-radius:14px;padding:12px}.code-block{background:#dfe5eb;color:#585e66;padding:10px 12px;border-radius:0 0 10px 10px;overflow-x:auto;font-size:14px;line-height:28px}.code-block::-webkit-scrollbar{height:10px;width:10px}.code-block::-webkit-scrollbar-track{background:#c8ccd3;border-radius:12px;border:1px solid #cbd5e1}.code-block::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#cbd5e1,#94a3b8);border:1px solid #94a3b8;border-radius:12px;box-shadow:inset 0 1px 0 hsla(0,0%,100%,.6)}.code-block::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#b6c2d3,#94a3b8)}.code-block{scrollbar-width:thin;scrollbar-color:#94a3b8 #c8ccd3}.folder-panel .code-block{margin:0}.folder-panel{background:#fff;border:1px solid #c8ccd3;border-radius:14px;padding:16px;box-shadow:0 16px 48px rgba(15,23,42,.1);margin-bottom:80px}.folder-tree{background:linear-gradient(135deg,#f8fafc,#eef2f7);border:1px solid #c8ccd3;box-shadow:inset 0 1px 0 #fff;font-family:SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;white-space:pre;line-height:1.55}.folder-tree .folder-entry{display:inline-flex;align-items:center;gap:6px;color:#475569}.folder-tree .folder-entry.folder-type-folder{color:#15803d}.folder-tree .folder-entry.folder-type-config,.folder-tree .folder-entry.folder-type-ts{color:#2563eb}.folder-tree .folder-entry.folder-type-css{color:#db2777}.folder-tree .folder-entry.folder-type-json{color:#d97706}.folder-tree .folder-entry.folder-type-onnx{color:#7c3aed}.folder-tree .folder-entry.folder-type-default{color:#475569}.folder-tree .folder-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;margin-right:6px;color:inherit;vertical-align:middle}.folder-tree .folder-icon svg{width:14px;height:14px}.folder-tree .folder-name{color:inherit}.detail-structure{margin-top:22px}.structure-head{display:flex;align-items:center;justify-content:space-between}.structure-eyebrow{margin:0 0 4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#64748b}.structure-sub{margin-top:6px;color:#64748b}.steps-accordion{display:flex;flex-direction:column;gap:10px}.step-accordion{background:#fff;border:1px solid #c8ccd3;border-radius:14px;padding:0}.step-accordion summary{list-style:none;padding:14px;display:flex;gap:12px;align-items:center;justify-content:space-between;color:#0f172a;cursor:pointer}.step-accordion summary::-webkit-details-marker{display:none}.summary-text{flex:1}.summary-text h4{margin:0;color:#0f172a;font-weight:500}.step-sub{color:#64748b;font-size:13px}.step-chip{width:34px;height:34px;border-radius:50%;background-color:#3773b93b;color:#3773b9;display:inline-flex;align-items:center;justify-content:center}.summary-caret{color:#94a3b8;transition:transform .2s ease}.step-accordion[open] .summary-caret{transform:rotate(-180deg)}.step-content{padding:0 14px 14px;display:flex;flex-direction:column;gap:10px;color:#475569;border-top:1px solid #c8ccd3;margin-top:6px}.step-expl p{background-color:#c8ccd333;padding:10px;border-radius:10px;font-size:13px;margin:14px 0}.starter-list{display:flex;flex-direction:column;gap:12px}.starter-card{background:#f8fafc;border:1px solid #c8ccd3;border-radius:14px;padding:14px}.starter-top{align-items:center;margin-bottom:6px}.starter-path,.starter-top{display:flex;justify-content:space-between}.starter-path{color:#0f172a;font-weight:500;font-size:14px}.starter-path-filename{display:flex;align-items:center}.starter-path svg{margin-right:6px;color:#3773b9;width:17px}.copy-chip{background:#fff;color:#475569;padding:6px 10px;border-radius:10px;border:1px solid #c8ccd3;font-size:12px}.starter-note{color:#0f7a4a;font-size:12px;background-color:#3773b938;padding:8px 10px;margin:10px 0 0;border-radius:4px 4px 0 0}.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.pill-tags{border-radius:15px;padding:2px 12px;font-size:13px;background-color:#f1f5f9;color:#5a5e68;border:1px solid #c8ccd3;display:flex;align-items:center}.pill-tags img{margin-right:6px}.project-title{color:#3773b9;font-size:40px;font-weight:700}p.hero-sub{color:#475569;line-height:35px;font-size:16px}.gradePill{background-color:#c9f2da}.project-meta{display:flex;align-items:center;justify-content:space-between;margin:50px 0}.meta-text{background-color:#fff;border:1px solid #c8ccd3;padding:15px;box-sizing:border-box;width:32%;border-radius:15px}.meta-text h2{color:#0f172a;margin-bottom:7px;font-size:14px;display:flex;align-items:center}.meta-text h2 img{margin-right:8px;color:#0f172a}.meta-text p{color:#475569;font-size:14px}.project-data{display:flex;align-items:flex-start;justify-content:space-between}img.detail-img{margin:0 0 0 60px;border-radius:10px;box-shadow:0 0 40px rgba(15,23,42,.15)}.project-section-title h3{margin:0;font-size:22px;color:#0f172a}.project-section-title p{margin:0 0 16px 38px;color:#475569;font-size:14px}.title-with-icon{display:flex;align-items:flex-start;margin-bottom:30px}.title-icon-svg{background-color:#3773b930;padding:7px;display:inline-block;border-radius:7px;margin:0 15px 0 0}.title-icon-svg svg{color:#3773b9}.title-with-icon h3{display:flex;flex-direction:column;font-size:20px;color:#0f172a;line-height:normal}.title-with-icon .sub-title{font-size:13px;color:#64748b;margin-top:5px}.step-label{display:flex;align-items:center;color:#0f172a;font-size:13px;margin:20px 0 0}.step-label svg{margin-right:8px}.explaination-data{color:#475569;background-color:#c8ccd34d;font-size:13px;padding:10px 15px;border-radius:5px}.expectedResult-data{color:#0f7a4a;background-color:#3773b914;border:1px solid #3773b933;font-size:13px;padding:10px 15px;border-radius:5px}.detail-steps{margin-bottom:80px}.copyCode{background-color:#dfe5eb;font-size:14px;color:#0f172a;display:flex;align-items:center;padding:5px 15px;border-radius:5px;cursor:pointer}.copyCode svg{height:16px;margin-right:5px;width:auto}.detail-starter{margin-bottom:80px}.project-output h3{margin-bottom:15px}.detail-hero-content{margin-top:30px}.project-output{margin-bottom:100px}@media (max-width:768px){.project-title{font-size:30px}.project-data,.project-meta{flex-direction:column}.project-meta{gap:20px}.meta-text{width:100%}img.detail-img{margin:20px 0 0;width:100%}}