.workflow-body{font-family:var(--font-body);font-size:var(--text-lg);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body);color:var(--color-text-secondary)}.workflow-body *,.workflow-body :before,.workflow-body :after{box-sizing:border-box}@media (width<=767px){.workflow-body{--layout-padding-x:var(--space-md);--layout-padding-y:var(--space-xl);--font-size-h2:1.25rem}.workflow-body,.workflow-body .section>p{font-size:var(--font-size-body)}}.workflow-body .section :not(h2){font-family:var(--font-body)}.workflow-body .section{max-width:var(--layout-max-width);padding:var(--layout-padding-y) var(--layout-padding-x);border-bottom:var(--border-dashed);margin:0 auto}.workflow-body .grid-2,.workflow-body .grid-3{gap:var(--grid-gap);display:grid}.workflow-body .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.workflow-body .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}@media (width<=767px){.workflow-body .grid-2,.workflow-body .grid-3{gap:var(--space-lg);grid-template-columns:minmax(0,1fr)}}@media (width>=1024px){.workflow-body .section{column-gap:var(--space-2xl);grid-template-columns:200px minmax(0,1fr);align-items:start;display:grid}.workflow-body .section>*{grid-column:2}.workflow-body .section>h2:first-child{top:var(--space-lg);font-size:var(--font-size-h3);grid-area:1/1/span 12;line-height:1.5;position:sticky}}.workflow-body h2,.workflow-body h3,.workflow-body h4{font-weight:var(--font-weight-bold)}.workflow-body h2{font-family:var(--font-display);margin:0 0 var(--space-sm);font-size:var(--font-size-h2);line-height:var(--line-height-heading);color:var(--color-text-primary)}.workflow-body h3{margin:var(--space-xl) 0 var(--space-xs);font-size:var(--font-size-h3);line-height:var(--line-height-heading);color:var(--color-text-primary)}.workflow-body h4{margin:var(--space-lg) 0 var(--space-xs);font-size:var(--text-lg);color:var(--color-accent-hover);line-height:1.5}.workflow-body p{margin:0 0 var(--space-md);font-size:var(--text-lg);line-height:var(--line-height-body);color:var(--color-text-secondary)}.workflow-body :is(p,li,.card__desc){text-wrap:pretty}.workflow-body :is(h2,h3,h4,.card__title){text-wrap:balance}.workflow-body ul{margin:0;padding:0;list-style:none}.workflow-body .card{gap:var(--space-xs);padding:var(--space-lg);background:var(--color-bg-card);border:var(--border-dashed);border-radius:var(--radius-card);flex-direction:column;display:flex}.workflow-body .card:hover{box-shadow:none;transform:none}.workflow-body .card__no{font-size:var(--text-xs);font-weight:var(--font-weight-bold);color:var(--color-accent-hover)}.workflow-body .card__title{font-size:var(--font-size-body);font-weight:var(--font-weight-bold)}.workflow-body .card__desc{font-size:var(--font-size-body);color:var(--color-text-muted);line-height:1.7}.workflow-body .grid-3>.card:not(:has(.card__no)){gap:var(--space-xs);padding:0 0 0 var(--space-md);border:0;border-left:var(--border-dashed-strong);box-shadow:none;background:0 0;border-radius:0}.workflow-body .grid-3>.card:not(:has(.card__no)) :is(.card__title,h3,h4){font-size:var(--text-lg);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0;line-height:1.5}.workflow-body .grid-3>.card:not(:has(.card__no)) :is(.card__desc,p){font-size:var(--font-size-body);color:var(--color-text-muted);margin:0;line-height:1.7}.workflow-body .grid-3>.card:has(.card__no){gap:var(--space-xs);box-shadow:none;background:0 0;border:0;border-radius:0;padding:0;position:relative}.workflow-body .card__no{width:36px;height:36px;margin-bottom:var(--space-xs);border-radius:var(--radius-pill);background:var(--color-bg-dark);color:var(--color-text-inverse);font-size:var(--text-sm);letter-spacing:.02em;place-items:center;display:grid}.workflow-body .grid-3>.card:has(.card__no) :is(.card__title,h3,h4){font-size:var(--text-lg);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0;line-height:1.5}.workflow-body .grid-3>.card:has(.card__no) :is(.card__desc,p){font-size:var(--font-size-body);color:var(--color-text-muted);margin:0;line-height:1.7}@media (width>=768px){.workflow-body .grid-3>.card:has(.card__no):not(:last-child):after{content:"";top:18px;left:calc(36px + var(--space-xs));right:calc(var(--space-xs) - var(--grid-gap));border-top:var(--border-dashed-strong);position:absolute}}@media (width<=767px){.workflow-body .grid-3>.card:has(.card__no){padding-left:calc(36px + var(--space-md))}.workflow-body .grid-3>.card:has(.card__no) .card__no{margin:0;position:absolute;top:0;left:0}.workflow-body .grid-3>.card:has(.card__no):not(:last-child):after{content:"";left:18px;top:calc(36px + var(--space-xs));bottom:calc(var(--space-xs) - var(--space-lg));border-left:var(--border-dashed-strong);position:absolute}}.workflow-body .grid-2>:is(.card,div:has(>.codebox)){gap:var(--space-xs);padding:var(--space-lg);background:var(--color-bg-sunk);border-radius:var(--radius-sm);box-shadow:none;border:0;flex-direction:column;display:flex}.workflow-body .grid-2>:is(.card,div:has(>.codebox)) :is(.card__title,h3,h4){font-size:var(--text-lg);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0;line-height:1.5}.workflow-body .grid-2>:is(.card,div:has(>.codebox)) p{font-size:var(--font-size-body);color:var(--color-text-secondary);margin:0;line-height:1.7}@media (width<=767px){.workflow-body .grid-2>:is(.card,div:has(>.codebox)){padding:var(--space-md)}}.workflow-body .section ul{--wb-marker:"✓";--wb-marker-color:var(--color-accent-hover)}.workflow-body .section ul.list--cross{--wb-marker:"✕";--wb-marker-color:var(--color-text-muted)}.workflow-body .section ul.list--dot{--wb-marker:"•";--wb-marker-color:var(--color-text-muted)}.workflow-body .section li{padding-left:1.6em;position:relative}.workflow-body .section li:before{content:var(--wb-marker);font-weight:var(--font-weight-bold);color:var(--wb-marker-color);position:absolute;left:0}.workflow-body .section .card ul{margin:var(--space-xs) 0 0;padding-left:0;list-style:none}.workflow-body .section .card li{font-size:var(--font-size-body);color:var(--color-text-secondary);line-height:1.7}.workflow-body .section .card li+li{margin-top:var(--space-xs)}.workflow-body .section>ul{margin:var(--space-md) 0 0;border-bottom:var(--border-dashed);padding:0;list-style:none}.workflow-body .section>ul>li{padding:var(--space-sm) 0 var(--space-sm) 1.6em;border-top:var(--border-dashed);color:var(--color-text-secondary)}.workflow-body .section>ul>li:before{top:var(--space-sm)}.workflow-body .codebox{padding:var(--space-lg);background:var(--color-bg-dark);color:#e8e2d6;border-radius:var(--radius-sm);font-size:var(--text-sm);white-space:pre-wrap;margin:0;line-height:1.8;position:relative}.workflow-body .codebox p{font:inherit;color:inherit;margin:0}.workflow-body .codebox:before{content:"範例輸入";margin-bottom:var(--space-sm);font-size:var(--text-xs);letter-spacing:.08em;color:var(--primitive-orange-400);display:block}.workflow-body .grid-2>:is(.card,div)>.codebox{margin-top:var(--space-xs);flex:1}.workflow-body :is(h3,h4,.card__title)+.codebox:before{display:none}.workflow-body .grid-2:has(>.codebox){align-items:start}.workflow-body .preview-tile{width:100%;margin-bottom:var(--space-lg);aspect-ratio:16/9;background:var(--color-bg-tint-mint);border-radius:var(--radius-card);place-items:center;display:grid;overflow:hidden}.workflow-body .preview-tile:has(>img){background:var(--color-bg-card);border:var(--border-dashed-strong);border-radius:var(--radius-sm);aspect-ratio:auto!important}.workflow-body .preview-tile>img{width:100%;height:auto;display:block}.workflow-body .preview-caption{margin-top:var(--space-sm);font-size:var(--font-size-caption);color:var(--color-text-muted);text-align:center}.workflow-body .workflow-locked{margin-top:var(--space-lg);padding:var(--space-lg);background:var(--color-bg-tint-orange);border:var(--border-dashed);border-radius:var(--radius-card);font-size:var(--font-size-caption);color:var(--color-text-muted);text-align:center}.workflow-body .workflow-locked:before{content:"🔒 "}