.project--tutorial{overflow-wrap:anywhere}
.detail-grid>section{overflow-wrap:anywhere}
.project--tutorial .tutorial-cover{aspect-ratio:16/9;background:#faf7ec}
.tutorial-cover .project-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.project--tutorial .title-cover,.article-cover.title-cover{display:flex;align-items:center;aspect-ratio:16/9;background:var(--blue);color:#fff;padding:clamp(18px,3cqw,36px);text-align:left}
.title-cover>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;width:100%;font:900 clamp(20px,2.8cqw,40px)/1.2 Heading,Arial,"Microsoft YaHei",sans-serif;letter-spacing:-.02em;overflow-wrap:anywhere;text-wrap:balance}
.project--tutorial .cover-credit{display:block;width:100%;font-size:12px;color:var(--muted);margin:0 0 9px}
.x-source-card{width:100%;min-width:0;min-height:230px;padding:22px;background:#fff9;border:1px solid #c6cccf;overflow-wrap:anywhere}.x-source-card h3{font-size:clamp(22px,2.3cqw,32px);line-height:1.15;margin:12px 0}.x-source-card p{font-size:16px;line-height:1.5;margin:12px 0}.x-source-card .x-source-eyebrow{font-size:11px;letter-spacing:.09em;color:var(--blue);font-weight:700}.x-source-card .x-source-note{font-size:13px;color:var(--muted)}.x-embed-slot{width:100%;min-width:0;max-width:550px;margin-inline:auto}.x-embed-slot iframe{max-width:100%}.x-retry{min-height:44px;padding:8px 14px;background:transparent;color:var(--blue);border:1px solid #abb8c6;border-radius:4px}
@media(min-width:701px){.project--tutorial{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 28px}.project--tutorial .project-visual{grid-area:1/1}.project--tutorial .project-content{grid-area:2/1}.project--tutorial .project-showcase{grid-area:1/2/3/3}.project--tutorial .project-title{font-size:clamp(28px,3.1cqw,42px)}.project--tutorial .project-showcase{display:flex;align-items:center}}
.project--portrait .project-summary{grid-area:1/1/3/2;width:100%;min-width:0;container-type:inline-size}
.project-summary-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:start;gap:20px}
.project-summary-layout .project-visual,.project-summary-layout .project-content{grid-area:auto;display:block;order:0}
.project--portrait .tutorial-cover{display:flex;justify-content:center;aspect-ratio:auto;background:transparent}
.project--portrait .project-image{width:auto;max-width:100%;height:auto;max-height:400px}
.project-summary-layout .project-title{font-size:clamp(25px,5cqw,32px);line-height:1.15;margin:0 0 12px}
.project-summary-layout .project-intro{font-size:16px;line-height:1.6}
@container(max-width:440px){
 .project-summary-layout{grid-template-columns:minmax(0,1fr);gap:16px}
 .project--portrait .project-image{max-height:280px}
 .project-summary-layout .project-title{font-size:clamp(25px,8cqw,32px)}
}
.detail-grid .project--tutorial .project-showcase{margin-top:24px}
.x-source-excerpt{margin:22px 0;padding-left:18px;border-left:3px solid var(--blue)}.x-source-card .x-source-excerpt p{font-size:20px;line-height:1.7;margin:0 0 16px;white-space:pre-wrap}.x-source-excerpt cite{font-size:13px;color:var(--muted);font-style:normal}
@media(max-width:700px){.x-source-card{min-height:0;padding:16px;margin-top:12px}.x-source-card h3{font-size:25px}.x-source-card p{font-size:15px}.project--tutorial .external{font-size:15px}.project--tutorial .cover-credit{order:4;text-align:right}}

.project--tutorial .vote-result{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;margin-left:0}.project--tutorial .vote-result .external{margin:0;min-height:44px}