.composition-demo{min-width:0}.composition-toolbar,.composition-footer{color:var(--catalog-muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;font-size:11px;display:flex}.composition-toolbar{margin-bottom:10px}.composition-footer{margin-top:10px}.composition-demo .composition-width,.composition-demo .composition-compare{border:1px solid var(--catalog-line);border-radius:var(--radius-control,5px);min-height:44px;color:var(--ink);background:0 0;justify-content:center;align-items:center;gap:7px;padding:8px 12px;font-size:12px;display:inline-flex}.composition-width .icon,.composition-compare .icon{width:16px;height:16px}.composition-width:hover,.composition-compare:hover,.composition-width[aria-pressed=true],.composition-compare[aria-pressed=true]{background:var(--ink);color:var(--paper)}.composition-stage{background:#d6dde5;border-radius:9px;min-width:0;padding:16px}.composition-viewport{width:100%;min-width:0;margin-inline:auto;container-type:inline-size}.composition-stage[data-narrow=true] .composition-viewport{max-width:320px}.composition-image{min-width:0;position:relative}.composition-image img{object-fit:cover;aspect-ratio:1.5;width:100%;height:auto;display:block}.composition-image-error{text-align:center;background:var(--ink);color:var(--paper);place-content:center;gap:10px;padding:12px;font-size:12px;display:grid;position:absolute;inset:0}.composition-image-error button{color:inherit;background:0 0;border:1px solid;min-height:44px}.composition-demo[data-compact] .composition-stage{padding:12px}.composition-demo[data-compact] .composition-footer{font-size:10px}.composition-demo[data-compact] .composition-compare{font-size:11px}.detail-workspace>section:first-child:has(.composition-demo){position:static}@media (max-width:760px){.composition-stage{padding:10px}.composition-toolbar,.composition-footer{gap:8px}}
.editorial-sample{color:var(--ink);background:var(--action-paper,#fff9ef);font-size:var(--editorial-body-size);line-height:var(--editorial-line-height);overflow-wrap:anywhere;padding:clamp(16px,4cqw,28px)}.editorial-heading{border-top:var(--editorial-rule) solid currentColor;margin-bottom:var(--editorial-gap);padding-top:18px}.editorial-heading h2{font:600 clamp(28px, 12cqw, var(--editorial-title-size))/1.05 var(--font-heading), sans-serif;letter-spacing:-.03em;text-wrap:balance;margin:0 0 16px}.editorial-sample[data-face=sans] .editorial-heading h2{font-family:var(--font-cjk), sans-serif;letter-spacing:-.025em;font-weight:700}.editorial-sample:lang(zh) .editorial-heading h2{font-family:var(--font-cjk), sans-serif;font-weight:900;line-height:1.2}.editorial-sample:lang(zh)[data-face=condensed] .editorial-heading h2{letter-spacing:-.04em}.editorial-sample:lang(zh)[data-face=sans] .editorial-heading h2{font-weight:600}.editorial-heading p,.editorial-copy p{max-width:65ch;margin:0}.editorial-heading p{max-width:48ch}.editorial-spread{grid-template-columns:minmax(0, var(--editorial-image)) minmax(0, var(--editorial-copy));gap:var(--editorial-gap);grid-template-areas:"image copy";align-items:start;display:grid}.editorial-spread figure{grid-area:image;min-width:0;margin:0}.editorial-copy{grid-area:copy;min-width:0}.editorial-copy p+p{margin-top:1em}.editorial-spread figcaption{margin-top:10px;font-size:11px;line-height:1.5}.editorial-sample[data-composition=image-right] .editorial-spread{grid-template-columns:minmax(0, var(--editorial-copy)) minmax(0, var(--editorial-image));grid-template-areas:"copy image"}.editorial-sample[data-composition=cover] .editorial-spread{grid-template-columns:minmax(0,1fr);grid-template-areas:"image""copy"}.editorial-sample[data-composition=cover] .composition-image img{aspect-ratio:var(--editorial-image-ratio)}.editorial-sample>footer{border-top:var(--editorial-rule) solid currentColor;margin-top:var(--editorial-gap);padding-top:12px;font-size:10px}.composition-demo[data-compact] .editorial-sample{padding:16px;font-size:11px}.composition-demo[data-compact] .editorial-heading{margin-bottom:14px;padding-top:12px}.composition-demo[data-compact] .editorial-heading h2{margin-bottom:10px;font-size:clamp(25px,9cqw,40px)}.composition-demo[data-compact] .editorial-spread{gap:14px}.composition-demo[data-compact] .editorial-sample>footer{margin-top:14px;padding-top:10px}.composition-demo[data-compact] .editorial-spread figcaption{font-size:10px}.composition-stage[data-plain=true] .editorial-sample{padding:20px;font-size:14px;line-height:1.6}.composition-stage[data-plain=true] .editorial-heading{border:0;margin-bottom:16px;padding:0}.composition-stage[data-plain=true] .editorial-heading h2{font:700 22px/1.3 var(--font-cjk), sans-serif;letter-spacing:0}.composition-stage[data-plain=true] .editorial-spread{display:block}.composition-stage[data-plain=true] .editorial-copy{margin-top:16px}.composition-stage[data-plain=true] .editorial-sample>footer{border:0}.composition-stage[data-plain=true] .composition-image img{aspect-ratio:1.5}@container (max-width:480px){.editorial-sample .editorial-spread,.editorial-sample[data-composition=image-right] .editorial-spread{grid-template-columns:minmax(0,1fr);grid-template-areas:"image""copy"}}.composition-demo[data-compact] .editorial-sample .editorial-spread{grid-template-columns:minmax(0, var(--editorial-image)) minmax(0, var(--editorial-copy));grid-template-areas:"image copy"}
.bento-sample{grid-template-columns:repeat(var(--bento-columns), minmax(0, 1fr));grid-auto-rows:minmax(var(--bento-row-height), auto);gap:var(--bento-gap);color:var(--ink);overflow-wrap:anywhere;display:grid}.bento-tile{align-content:var(--bento-align);min-width:0;padding:var(--bento-padding);border-radius:var(--bento-radius);background:var(--paper);gap:14px;display:grid}.bento-tile h2,.bento-tile h3,.bento-tile p{margin:0}.bento-tile h2{font:600 clamp(28px, 6cqw, 44px)/1.08 var(--font-heading), sans-serif;letter-spacing:-.025em;text-wrap:balance}.bento-tile h3{font-size:16px;line-height:1.3}.bento-tile p{max-width:65ch;font-size:12px;line-height:1.6}.bento-tile h2+p{margin-top:12px}.bento-sample:lang(zh) h2{font-family:var(--font-cjk), sans-serif;font-weight:900;line-height:1.25}.bento-sample[data-arrangement=featured] .bento-lead{grid-area:span 2/span 2}.bento-sample[data-arrangement=featured] .bento-close{grid-column:span 2}.bento-sample[data-arrangement=panorama] .bento-lead{grid-column:1/-1}.bento-sample[data-arrangement=panorama] .bento-lead .composition-image img{aspect-ratio:2.6}.bento-note{background:var(--ink);color:var(--paper)}.bento-quote{background:#b6cad8}.bento-plan{background:#e5b89d}.bento-close{background:#fff9ef}.bento-lead .composition-image img{border-radius:max(0px, calc(var(--bento-radius) - 8px))}.composition-demo[data-compact] .bento-sample{grid-auto-rows:minmax(72px,auto);gap:10px}.composition-demo[data-compact] .bento-tile{gap:8px;padding:12px}.composition-demo[data-compact] .bento-tile h3{font-size:12px}.composition-demo[data-compact] .bento-tile p{font-size:10px}.composition-stage[data-plain=true] .bento-sample{background:var(--action-paper,#fff9ef);padding:20px;display:block}.composition-stage[data-plain=true] .bento-tile{color:var(--ink);background:0 0;border-radius:0;padding:0;display:block}.composition-stage[data-plain=true] .bento-tile+.bento-tile{margin-top:24px}.composition-stage[data-plain=true] .bento-lead h2{margin-top:16px;font-size:22px}.composition-stage[data-plain=true] .bento-tile p{margin-top:8px}@container (max-width:520px){.bento-sample{grid-template-columns:repeat(2,minmax(0,1fr))}.bento-sample[data-arrangement] .bento-lead,.bento-sample[data-arrangement] .bento-close{grid-area:auto}}@container (max-width:340px){.bento-sample{grid-template-columns:minmax(0,1fr)}}.composition-demo[data-compact] .bento-sample{grid-template-columns:repeat(3,minmax(0,1fr))}.composition-demo[data-compact] .bento-sample[data-arrangement=featured] .bento-lead{grid-area:span 2/span 2}.composition-demo[data-compact] .bento-sample[data-arrangement=featured] .bento-close{grid-column:span 2}.composition-demo[data-compact] .bento-tile h2{font-size:21px}