.project-product-body { background: #faf9f6; color: #252636; }
.project-product-body .dl-product-nav { border-color: #ded9e7; }
.project-landing { overflow: hidden; }
.project-product-preview { min-width: 0; margin: 0; border: 1px solid #252636; background: #252636; border-radius: 24px; padding: 12px; box-shadow: 12px 14px 0 #b4a1f8; transform: rotate(1deg); }
.project-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; color: #e0d6ff; padding: 10px 8px 20px; }
.project-preview-heading > span:first-child { color: #c9f36b; letter-spacing: 3px; white-space: nowrap; }
.project-preview-body { padding: 22px; border-radius: 14px; background: #f6f4fd; color: #252636; }
.project-preview-title { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 16px; font-weight: 650; margin-bottom: 20px; }
.project-preview-tag { font-size: 10px; padding: 7px 10px; background: #e5dcfc; border-radius: 8px; }
.project-preview-board { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.project-preview-column { background: #eae6f5; padding: 10px; border-radius: 10px; min-width: 0; }
.project-preview-column > span { display: block; font-size: 10px; font-weight: 550; margin-bottom: 12px; overflow-wrap: anywhere; }
.project-preview-task { min-height: 150px; border-radius: 8px; padding: 12px; background: white; box-shadow: 0 2px 5px #25263608; }
.project-preview-task strong { display: block; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.project-task-dot { display: block; width: 22px; height: 5px; background: #b4a1f8; border-radius: 3px; margin-bottom: 12px; }
.project-preview-column:nth-child(2) .project-task-dot { background: #e4c570; }
.project-preview-column:nth-child(3) .project-task-dot { background: #a9ce86; }
.project-task-lines { margin: 12px 0; }
.project-task-lines i { display: block; height: 4px; border-radius: 3px; background: #eeeaf6; margin: 6px 0; }
.project-task-lines i:last-child { width: 70%; }
.project-task-avatar { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #e5dcfc; font-size: 8px; color: #8973c0; }
.project-preview-timeline { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; background: white; margin-top: 14px; border-radius: 10px; padding: 14px; }
.project-preview-timeline > span { font-size: 10px; font-weight: 600; }
.project-preview-timeline > div { background: repeating-linear-gradient(to right,transparent,transparent 24px,#eeeaf6 24px,#eeeaf6 25px); }
.project-preview-timeline i { display: block; height: 10px; margin: 4px 0 10px; border-radius: 4px; background: #b4a1f8; width: 65%; }
.project-preview-timeline i:nth-child(2) { margin-left: 22%; width: 55%; background: #c9f36b; }
.project-preview-timeline i:nth-child(3) { margin-left: 50%; width: 42%; background: #e4c570; }
.project-preview-caption { color: #faf9f6; font-size: 12px; line-height: 1.6; padding: 20px 8px 8px; }
.project-step-art { height: 160px; border-radius: 16px; background: #eee8fa; display: grid; place-items: center; position: relative; overflow: hidden; margin-bottom: 24px; }
.project-step-art > div { width: 68%; background: #fff; border: 1px solid #ddd6ef; border-radius: 10px; padding: 20px; transform: rotate(-4deg); box-shadow: 5px 7px 0 #c5b5f0; }
.project-step-art i { display: block; height: 8px; margin: 10px 0; width: 75%; border-radius: 4px; background: #e6dcfb; }
.project-step-art i:nth-child(2) { width: 55%; background: #c9f36b; }
.project-art-timeline i { width: 60%; margin-left: 0; }
.project-art-timeline i:nth-child(2) { margin-left: 20%; }
.project-art-timeline i:nth-child(3) { margin-left: 35%; width: 50%; }
.project-art-team > div { display: flex; justify-content: center; gap: 8px; transform: rotate(4deg); }
.project-art-team i { width: 36px; height: 36px; border-radius: 50%; margin: 12px 0; background: #b4a1f8; }
.project-art-team i:nth-child(2) { width: 36px; }
.project-art-team i:nth-child(3) { background: #e4c570; }
.project-product-footer { max-width: 1180px; margin: auto; padding: 28px; display: flex; justify-content: space-between; color: #6f647c; font-size: 12px; }
.project-product-footer a { color: inherit; text-decoration: none; font-weight: 650; }
@media(max-width:800px) { .project-product-preview { transform: none; box-shadow: 6px 8px 0 #b4a1f8; } .project-preview-body { padding: 16px; } .project-preview-board { gap: 8px; } .project-preview-column { padding: 8px; } .project-preview-task { padding: 8px; } }
@media(prefers-reduced-motion:reduce) { .project-product-preview,.project-step-art > div { transform: none; } }
@media(max-width:480px) { .project-preview-board { gap: 6px; } .project-preview-column { padding: 6px; } .project-preview-task { padding: 6px; } .project-preview-task strong { font-size: 10px; } }