.art-jump-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 32px;font-size:14px}
.art-jump-links a{color:var(--action-text);text-underline-offset:5px;padding-block:8px}
.illustration-lead{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr);align-items:center;gap:36px;margin-block:32px 48px}
.illustration-lead h2{margin:12px 0 20px}.illustration-lead p{margin-block:16px}.illustration-lead .button{margin-top:8px}
.illustration-figure{margin:0;min-width:0}.illustration-figure img{display:block;width:100%;height:auto;background:#f7f4ee;border-radius:20px}
.illustration-figure figcaption,.art-caption{font-size:14px;line-height:1.5;color:var(--text-secondary);margin-top:12px}
.art-principles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px;border-block:1px solid var(--border-subtle);padding-block:32px}
.art-principles h3{margin:10px 0}.art-principles p{color:var(--text-secondary)}
.art-palette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 16px;margin-block:24px}
.art-palette article{min-width:0}.art-color{display:block;height:80px;border-radius:12px;background:var(--art-color);border:1px solid var(--border-subtle);margin-bottom:12px}
.art-palette h3{font-size:16px;line-height:1.5}.art-palette code{font-size:14px}.art-palette p{font-size:14px;color:var(--text-secondary);margin-top:8px}
.art-violet-rule{padding:24px;border-left:3px solid var(--action-primary);background:var(--surface-secondary);border-radius:0 16px 16px 0}.art-violet-rule p{margin-top:12px}
.art-background-demo{position:relative;isolation:isolate;overflow:hidden;min-height:350px;padding:28px;margin-block:24px 8px;background:var(--surface-page)}
.art-background-demo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent)}
[data-appearance="dark"] .art-background-demo>img{mix-blend-mode:soft-light;opacity:.48}
.art-glass-example{border-radius:28px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}.art-glass-example>span{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.art-background-copy{max-width:400px;margin:72px 0 24px}.art-background-copy p{margin-top:12px}.art-background-copy h3{font-size:28px;line-height:1.3}
.illustration-prompt{border-bottom:1px solid var(--border-subtle);padding-block:16px}.illustration-prompt summary{font-size:16px;font-weight:600;cursor:pointer;padding-block:8px}.illustration-prompt .codebox{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;margin-top:16px}
.glass-guidance{margin-block:24px 32px;padding:24px;border:1px solid var(--border-subtle);border-radius:20px;background:var(--surface-secondary)}
.glass-guidance p{margin-top:12px}.glass-guidance .button-row{margin-top:20px}
@media(max-width:1100px){.illustration-lead{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.art-principles{grid-template-columns:minmax(0,1fr)}.art-palette{grid-template-columns:repeat(2,minmax(0,1fr))}.art-background-demo{padding:16px}.art-glass-example{flex-wrap:wrap}.art-background-copy{margin-top:48px}.glass-guidance{padding:20px}}