:root { color-scheme: light; }
body { background: #f5f1eb; color: #1f2936; margin: 0; }
body.pattern-modal-open { overflow: hidden; }
.pattern-topbar { align-items: center; background: #19222d; color: #fff; display: flex; font: 600 14px/1.2 "DM Sans", Arial, sans-serif; justify-content: space-between; padding: 18px clamp(20px, 5vw, 72px); }
.pattern-topbar a { color: inherit; }
.pattern-main { font-family: "DM Sans", Arial, sans-serif; margin: 0 auto; max-width: 1180px; padding: clamp(52px, 8vw, 110px) clamp(20px, 5vw, 72px); }
.pattern-main h1 { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(52px, 8vw, 104px); font-weight: 400; letter-spacing: -.03em; line-height: .92; margin: 18px 0 28px; max-width: 900px; }
.pattern-main h2 { line-height: 1.1; }
.pattern-main code { font-size: .9em; }
.pattern-main pre { background: #19222d; border-radius: 14px; color: #fff; overflow: auto; padding: 22px; }
.eyebrow { color: #315d8c; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pattern-lead { font-size: clamp(18px, 2.2vw, 25px); line-height: 1.5; max-width: 900px; }
.pattern-demo { align-items: center; background: #315d8c; border-radius: 24px; color: #fff; display: flex; gap: 32px; justify-content: space-between; margin: 56px 0 28px; padding: clamp(28px, 5vw, 56px); }
.pattern-demo .eyebrow { color: #d7e8ff; }
.pattern-demo h2 { font-size: clamp(28px, 4vw, 48px); margin: 8px 0 12px; }
.pattern-demo p { max-width: 650px; }
.pattern-launcher { background: #e87722; border: 1px solid #e87722; border-radius: 999px; color: #fff; cursor: pointer; flex: 0 0 auto; font: 600 17px/1 "DM Sans", Arial, sans-serif; min-height: 56px; padding: 0 26px; }
.pattern-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 28px 0; }
.pattern-grid article, .pattern-code { background: #fff; border: 1px solid #ded8ce; border-radius: 18px; padding: 28px; }
.pattern-grid li { margin: 8px 0; }
.pattern-code { margin-top: 20px; }
.pattern-modal[hidden] { display: none; }
.pattern-modal { align-items: center; background: rgba(16, 23, 30, .76); display: flex; inset: 0; justify-content: center; overflow: auto; padding: 24px; position: fixed; z-index: 10000; }
.pattern-modal__panel { background: #fff; border-radius: 22px; box-shadow: 0 30px 90px rgba(0,0,0,.35); max-height: min(760px, calc(100dvh - 48px)); max-width: 920px; overflow: hidden; width: 100%; }
.pattern-modal__panel header { align-items: center; border-bottom: 1px solid #ded8ce; display: flex; gap: 20px; justify-content: space-between; padding: 22px 26px; }
.pattern-modal__panel h2 { font: 400 clamp(28px, 4vw, 44px)/1 "Instrument Serif", Georgia, serif; margin: 0; }
.pattern-modal__close { align-items: center; background: #fff; border: 1px solid #1f2936; border-radius: 50%; cursor: pointer; display: inline-flex; flex: 0 0 auto; font-size: 28px; height: 48px; justify-content: center; padding: 0; width: 48px; }
.pattern-modal__content { background: #315d8c; overflow: hidden; padding: 52px 28px; }
@media (max-width: 760px) {
  .pattern-demo { align-items: stretch; flex-direction: column; }
  .pattern-grid { grid-template-columns: minmax(0, 1fr); }
  .pattern-modal { align-items: stretch; padding: 0; }
  .pattern-modal__panel { border-radius: 0; max-height: none; min-height: 100dvh; }
  .pattern-modal__content { padding: 28px 16px; }
}