.di-guide{padding-top:42px;padding-bottom:100px}
.di-guide .breadcrumbs{margin-bottom:42px}
.di-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:54px;align-items:center;margin-bottom:84px}
.di-hero h1{font-size:clamp(44px,4.6vw,72px);line-height:1.03;letter-spacing:-.055em;margin:24px 0}
.di-hero h1 em{font-style:normal;color:var(--sage-ink,#465b39)}
.di-deck{font-size:20px;line-height:1.55;max-width:500px}
.di-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:30px}
.di-explore{display:inline-flex;gap:24px;justify-content:space-between;align-items:center;background:var(--ink,#171915);color:var(--paper,#f3f0e7);border:1px solid var(--ink,#171915);border-radius:50px;padding:17px 23px;font-size:15px;font-weight:600;text-decoration:none}
@media (hover:hover){.di-explore:hover{background:var(--sage-ink,#465b39);border-color:var(--sage-ink,#465b39)}}
.di-explore:focus-visible,.di-index a:focus-visible,.di-extra summary:focus-visible{outline:3px solid var(--sage-ink,#465b39);outline-offset:5px}
.di-hero-art{background:#e9e6dd;border:1px solid #d8d5cb;border-radius:22px;overflow:hidden}
.di-hero-art img{display:block;width:100%;height:auto}
.di-hero-art>span{display:block;padding:18px 22px;border-top:1px solid #d8d5cb;font-family:monospace;font-size:11px;letter-spacing:.1em}
.di-start{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;background:#e6e9de;border-radius:20px;padding:40px;margin:0 0 76px}
.di-start h2,.di-section-title h2{font-size:34px;line-height:1.12;letter-spacing:-.035em;margin:14px 0}
.di-start p,.di-start li{font-size:16px;line-height:1.6}
.di-start ol{padding-left:20px;margin:18px 0 0}
.di-start li+li{margin-top:10px}
.di-section-title{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:22px}
.di-section-title p{color:#555b50;font-size:14px}
.di-index nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#d7d8cd;border:1px solid #d7d8cd;border-radius:14px;overflow:hidden}
.di-index nav a{display:flex;align-items:center;gap:18px;background:#faf8f2;padding:19px 22px;font-size:17px;text-decoration:none}
@media (hover:hover){.di-index nav a:hover{background:#e6e9de}}
.di-index nav a>span:first-child{font-family:monospace;color:#59664c;font-size:12px}
.di-index nav a>span:last-child{margin-left:auto}
.di-source-note{max-width:790px;font-size:13px;line-height:1.65;color:#555b50;margin:22px 0 0}
.di-style{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:72px;border-top:1px solid #d0d2c7;padding:64px 0;scroll-margin-top:120px}
.di-styles{margin-top:64px}
.di-example{margin:0;align-self:start;background:#e9e6dd;padding:22px;border-radius:16px}
.di-example img{display:block;width:100%;height:auto;max-width:360px;margin:auto;border-radius:6px}
.di-example figcaption{display:flex;justify-content:space-between;gap:10px;margin-top:18px;font-family:monospace;font-size:10px;letter-spacing:.05em;color:#4e5348}
.di-style h2{font-size:clamp(30px,3.1vw,46px);line-height:1.08;letter-spacing:-.04em;margin:16px 0 12px}
.di-mood{font-size:19px;line-height:1.45;margin:0 0 10px}
.di-use{font-size:14px;line-height:1.6;color:#555b50;margin:0 0 24px}
.di-palette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:22px 0 26px}
.di-palette>div{min-width:0}
.di-palette span{display:block;height:46px;border-radius:6px;border:1px solid #0002}
.di-palette code{display:block;font-size:11px;margin-top:8px}
.di-facts{display:grid;gap:16px;margin:0 0 28px}
.di-facts dt{font-family:monospace;font-size:10px;letter-spacing:.07em;color:#58624e;margin-bottom:5px}
.di-facts dd{margin:0;font-size:15px;line-height:1.5}
.di-style h3{font-size:18px;margin:0 0 12px}
.di-recipe{padding-left:20px;margin:0 0 24px}
.di-recipe li{font-size:15px;line-height:1.6;padding-left:5px}
.di-recipe li+li{margin-top:10px}
.di-extra{border-top:1px solid #d0d2c7;border-bottom:1px solid #d0d2c7}
.di-extra summary{display:flex;justify-content:space-between;cursor:pointer;font-size:14px;padding:16px 0;list-style:none}
.di-extra summary::-webkit-details-marker{display:none}
.di-extra[open] summary span{transform:rotate(45deg)}
.di-extra p{font-size:14px;line-height:1.6;margin:0 0 16px}
.di-avoid{font-size:13px;line-height:1.6;color:#555b50;margin-top:20px}
.di-close{padding:54px;background:#e6e9de;border-radius:20px;margin-top:28px}
.di-close h2{font-size:clamp(34px,4vw,54px);line-height:1.07;letter-spacing:-.04em;margin:20px 0}
.di-close>p:not(.eyebrow){max-width:620px;line-height:1.65;margin-bottom:24px}
.di-close>.text-link{margin-top:20px;margin-right:28px;display:inline-flex}
.guide-art.design-guide-art{overflow:hidden;padding:0;background:#e9e6dd}
.guide-art.design-guide-art img{width:100%;height:100%;object-fit:cover;object-position:center;max-width:none;transform:none}
@media(max-width:800px){.di-hero{grid-template-columns:1fr;gap:30px;margin-bottom:44px}
.di-hero h1{font-size:52px}
.di-hero-art{max-width:540px}
.di-start{grid-template-columns:1fr;gap:12px;padding:28px;margin-bottom:46px}
.di-style{gap:32px;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
.di-example{padding:12px}
.di-example figcaption{font-size:8px}
.di-section-title{display:block}
.di-style h2{font-size:32px}}
@media(max-width:560px){.di-guide{padding-top:26px;padding-bottom:60px}
.di-guide .breadcrumbs{font-size:12px;margin-bottom:30px}
.di-hero h1{font-size:44px}
.di-deck{font-size:18px}
.di-explore{font-size:14px;padding:16px 20px}
.di-actions{gap:20px}
.di-index nav{grid-template-columns:1fr}
.di-index nav a{font-size:16px;padding:17px 18px}
.di-start h2,.di-section-title h2{font-size:29px}
.di-start{padding:24px}
.di-style{grid-template-columns:1fr;gap:28px;padding:42px 0;scroll-margin-top:95px}
.di-styles{margin-top:38px}
.di-example{padding:18px;max-width:100%;width:100%;box-sizing:border-box}
.di-example img{max-width:265px}
.di-example figcaption{font-size:10px}
.di-style h2{font-size:36px}
.di-close{padding:28px}
.di-source-note{font-size:12px}}
@media print{.site-header,.site-footer,.skip-link,.di-actions,.di-index,.di-extra,.di-close{display:none!important}
.di-style{break-inside:avoid;grid-template-columns:1fr 2fr;padding:24px 0;gap:24px}
.di-guide{padding:0}
.di-hero{margin-bottom:20px}
.di-start{margin-bottom:20px}
.di-example img{max-width:180px}}