/* Keep the whole illustration visible; soften only the outside edge. */
.hero-grid{position:relative}
.hero-copy{position:relative;z-index:1}
.hero-illustration{position:relative;right:auto;top:auto;bottom:auto;width:100%;height:auto;margin:0;pointer-events:none;opacity:.76;z-index:0;mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%)}
.hero-illustration img{width:100%;height:auto;object-fit:contain;display:block;mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 92%,transparent 100%)}
.margin-art{position:absolute;pointer-events:none;z-index:-1;opacity:.32;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.margin-art img{width:100%;height:auto;display:block;object-fit:contain;mask-image:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent)}
.art-works{right:16px;top:8px;width:300px;height:auto;opacity:.32}
.inline-art{pointer-events:none;position:relative;opacity:.76;width:100%;max-width:620px;height:auto;margin:26px auto;mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%)}
.inline-art img{display:block;width:100%;height:auto;object-fit:contain;mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 92%,transparent 100%)}
.art-guide{max-width:560px}
.art-models{max-width:650px}
.art-notes{grid-column:1/-1;max-width:580px;margin:25px auto 12px}
@media(max-width:1000px){.art-works{width:250px}}
@media(max-width:700px){.hero-illustration{width:100%;max-width:490px;margin:8px auto 0;opacity:.78}.hero-copy .eyebrow{max-width:none}.hero h1{max-width:none}.hero-subtitle{margin-bottom:20px}.hero-description{max-width:none}.art-works{right:0;top:8px;width:200px;opacity:.32}.inline-art{margin:24px auto}.art-notes{margin:18px auto 10px}}
@media(max-width:700px){.hero-description{font-size:14px}.guide-body dd,.guide-intro,.model-readout .model-when p,.model-readout .model-tip p,.tip-card>p:not(.eyebrow),.panel-lead,.compare-steps p,.comparison-card dd,#dialog-introduction,.character-bio>p:not(.eyebrow){font-size:14px;line-height:1.9}.guide-article>summary strong,.tip-card>h3{font-size:14px}.guide-list summary,.guide-list p,.note-body,.about-top p:last-child{font-size:13px;line-height:1.9}}
.playbook-layout>*,.model-explorer>*,.character-layout>*,.work-dialog-head>*{min-width:0}.playbook-index,.guide-article,.guide-body{min-width:0;max-width:100%}
@media(max-width:700px){.playbook-layout{grid-template-columns:minmax(0,1fr)}.playbook-index [role=group]{min-width:0;max-width:100%;width:100%}.guide-search-label{max-width:100%}.guide-article>summary>span:nth-child(2){min-width:0}.guide-body dd{overflow-wrap:anywhere}}
@media(max-width:700px){.guide-body dd,.guide-intro,.playbook-intro,.hero-description,.model-context>p,.model-readout .model-when p,.model-readout .model-tip p,.tip-card>p:not(.eyebrow),.compare-steps p,.comparison-card dd,#dialog-introduction,.character-bio>p:not(.eyebrow){word-break:keep-all;overflow-wrap:break-word}}