/* Shared print-first layout for all Domain First library pages. */ :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) { --dt-paper: #f1efe5; --dt-ink: #171717; --dt-red: #b52f22; --dt-blue: #2547bb; --dt-green: #2547bb; width: min(calc(100% - 32px), 1440px); margin: 18px auto 34px; padding: 0 38px; background: var(--dt-paper); color: var(--dt-ink); border: 1px solid var(--dt-ink); box-shadow: 8px 8px 0 var(--dt-ink); line-height: 1.5; overflow: hidden; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) :is(h1, h2, h3, p, a, span, strong, code, em) { color: inherit; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) a { text-decoration: none; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) :is(a, button):focus-visible { outline: 3px solid var(--dt-blue); outline-offset: 3px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-header { height: auto; min-height: 62px; padding: 10px 0; border-bottom: 2px solid var(--dt-ink); } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-brand { font-size: 15px; letter-spacing: -0.3px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-brand i { width: 22px; height: 22px; background: var(--dt-blue); border-right: 11px solid var(--dt-red); } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) nav { gap: 18px; font: 9px monospace; letter-spacing: 0.4px; text-transform: uppercase; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) nav a { padding: 6px 0; border-bottom: 1px solid transparent; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) nav a:hover { border-color: var(--dt-red); } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-layout { display: block; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-sidebar { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 16px; padding: 12px 0; border-right: 0; border-bottom: 1px solid var(--dt-ink); } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-sidebar > .dt-label { grid-column: 1; grid-row: 1; color: #176b45; font-size: 9px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-selected { grid-column: 2; grid-row: 1; justify-self: end; border: 0; padding: 0; background: transparent; color: var(--dt-red); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-selected span { margin-left: 8px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-libraries { grid-column: 1/-1; display: flex; gap: 6px; flex-wrap: wrap; margin: 0; font: 9px monospace; text-transform: uppercase; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-libraries a { padding: 5px 8px; border: 1px solid #17171755; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-libraries a[aria-current] { background: var(--dt-blue); border-color: var(--dt-blue); color: #fff !important; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-side-group { grid-column: 1/-1; display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px 13px; margin: 0; padding-top: 7px; border-top: 1px solid #17171733; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-side-group .dt-label { width: 100%; color: #176b45; font-size: 8px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-side-group a { font: 9px monospace; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) :is(.dt-side-project, .dt-sidebar-end) { display: none; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-main { padding: 14px 0 0; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-breadcrumb { font: 9px monospace; letter-spacing: 0.8px; color: #176b45; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-breadcrumb span { padding: 0 7px; color: var(--dt-red); } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-hero { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 34px 0 24px; align-items: center; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) h1 { font-size: clamp(62px, 7.4vw, 106px); line-height: 0.82; letter-spacing: -0.04em; margin: 14px 0 16px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) h1 em { color: var(--dt-red); } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-label { color: #176b45; font-size: 9px; font-weight: 700; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-package { font-size: 11px; letter-spacing: 0.2px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-package span { font-size: 9px; color: #176b45; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-intro { margin-top: 26px; font-size: 14px; line-height: 1.55; max-width: 570px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-actions { gap: 16px; margin-top: 20px; font-size: 10px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-primary { background: var(--dt-red); color: #fff !important; padding: 11px 14px; gap: 18px; text-transform: uppercase; font: 9px monospace; letter-spacing: 0.5px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-facts { border-color: var(--dt-ink); } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-facts > div { padding: 12px 12px 12px 0; font-size: 11px; gap: 7px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-facts > div + div { border-color: var(--dt-ink); padding-left: 12px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-facts span { font-size: 8px; color: var(--dt-red); } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-section { padding: 34px 0; border-color: var(--dt-ink); } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-section-title .dt-label { color: var(--dt-red); } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 0.95; letter-spacing: -0.035em; margin: 10px 0 15px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-section > p { font-size: 13px; line-height: 1.6; max-width: 720px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) :is(code, .dt-api > div > code) { color: #176b45; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-command { background: var(--dt-blue); color: #fff; padding: 12px 14px; margin: 8px 0; border: 1px solid var(--dt-ink); } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-command code { color: #fff; font-size: 11px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-copy { background: var(--dt-red); color: #fff !important; border: 1px solid #171717; padding: 7px 10px; font: 9px monospace; min-height: 32px; cursor: pointer; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-code-head { margin-top: 20px; padding: 10px 14px; background: var(--dt-red); color: #fff; border: 1px solid var(--dt-ink); border-bottom: 0; font-size: 9px; letter-spacing: 0.3px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-code-head span { color: #fff; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) pre { padding: 18px 16px; background: var(--dt-ink); color: var(--dt-paper); border: 1px solid var(--dt-ink); font-size: 11px; line-height: 1.6; overflow: auto; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) pre code { color: var(--dt-paper); font-size: 11px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-small { font-size: 11px !important; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-callout { background: #e5e1d4; border-left: 4px solid var(--dt-blue); padding: 10px 14px; margin-top: 18px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-callout > span { font-size: 8px; color: #176b45; font-weight: 700; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-callout p { font-size: 12px; line-height: 1.6; margin: 5px 0 0; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) h3 { font-size: 17px; margin: 12px 0 6px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-two-notes { gap: 18px; margin-top: 16px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-two-notes p, :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-api p, :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-notes p { font-size: 11px; line-height: 1.55; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-api > div { border-color: #17171744; padding: 11px 0; gap: 14px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-api > div > code { font-size: 10px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-notes > div:not(.dt-section-title) { border-color: #17171744; padding: 11px 0; gap: 14px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-notes > div > span { font-size: 10px; color: var(--dt-red); } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-footer { border-top: 2px solid var(--dt-ink); padding: 12px 0; margin-top: 0; font: 8px monospace; letter-spacing: 0.6px; text-transform: uppercase; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-status { background: var(--dt-blue); color: #fff; padding: 10px 4%; font: 10px monospace; } @media (max-width: 800px) { :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) { padding: 0 24px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-hero { grid-template-columns: minmax(0, 1fr); gap: 0; } } @media (max-width: 580px) { :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) { width: calc(100% - 18px); margin: 9px auto 20px; padding: 0 14px; box-shadow: 4px 4px 0 var(--dt-ink); } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-header { min-height: 50px; height: auto; padding: 8px 0; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-brand { font-size: 12px; gap: 7px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-brand i { width: 18px; height: 18px; border-right-width: 9px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) nav { gap: 9px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) nav a { font-size: 7px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) nav a:first-child { display: none; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-sidebar { gap: 7px 10px; padding: 9px 0; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-sidebar > .dt-label { font-size: 7px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-selected { font-size: 9px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-libraries { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-libraries a { white-space: nowrap; font-size: 8px; padding: 5px 7px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-side-group { display: none; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-main { padding-top: 10px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-hero { grid-template-columns: 1fr; padding: 23px 0 18px; gap: 8px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) h1 { font-size: clamp(42px, 14vw, 78px); margin: 10px 0; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-package { font-size: 9px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-intro { font-size: 12px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-actions { gap: 12px; margin-top: 13px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-primary { padding: 9px 11px; font-size: 8px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-facts { grid-template-columns: 1fr; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-facts > div { flex-direction: row; gap: 12px; padding: 8px 0; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-facts > div + div { border-left: 0; border-top: 1px solid #17171744; padding-left: 0; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-section { padding: 25px 0; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) h2 { font-size: 29px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-two-notes, :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-api > div { grid-template-columns: 1fr; gap: 7px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-code-head { padding: 9px 10px; font-size: 8px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) pre { padding: 12px 10px; font-size: 9px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) pre code { font-size: 9px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-command { padding: 9px; gap: 8px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-command code { font-size: 9px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-copy { min-height: 36px; padding: 5px 7px; font-size: 8px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-footer { font-size: 7px; gap: 8px; } } @media print { :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) { width: 100%; margin: 0; padding: 0 12px; box-shadow: none; } } /* Code samples: white text on the existing blue or black sample fields. */ :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-command :is(code, span) { color: #fff !important; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-code-head :is(code, span) { color: #fff !important; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) pre :is(code, span) { color: #fff !important; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-copy { background: #3154bd !important; color: #fff !important; border: 1px solid #000 !important; } /* Frame the command text itself inside the blue install strip. */ :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-command code { flex: 1; min-width: 0; padding: 8px 10px; background: #1b3699; color: #fff !important; border: 1px solid #000; white-space: normal; overflow-wrap: anywhere; } /* Copy button and command field treatments in the setup strips. */ :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-copy { background: #000 !important; color: #fff !important; border-color: #000 !important; } /* Syntax colors are tuned for the dark code panels. */ :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) pre code .df-token-keyword { color: #ff9d8b !important; font-weight: 700; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) pre code .df-token-type { color: #f1efe5 !important; font-weight: 700; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) pre code .df-token-string { color: #c4e5a2 !important; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) pre code .df-token-number { color: #f4ce89 !important; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) pre code .df-token-comment { color: #b8c0cb !important; font-style: italic; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) pre code .df-token-function { color: #f3d38a !important; } /* Shared navigation, responsive hero details, and hero details. */ :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-libraries { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; grid-auto-flow: column; align-items: center; width: 100%; min-width: 0; overflow-x: auto; white-space: nowrap; gap: 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-libraries a { display: inline-flex !important; flex: 0 0 auto; align-items: center; white-space: nowrap; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-package { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-package .dt-api-link { color: var(--dt-ink); font: 9px monospace; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--dt-red); text-underline-offset: 3px; margin-left: 3px; } @media (max-width: 580px) { :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-libraries { flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-actions { display: block; width: 100%; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-actions .dt-primary { display: flex; width: 100%; box-sizing: border-box; justify-content: space-between; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-package { gap: 4px 7px; } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) .dt-package .dt-api-link { font-size: 8px; } } :is( #df-types, #df-errors, #df-wire, #df-handlers, #df-handlers-rest, #df-handlers-next, #df-react ) h1 .dt-title-period { padding-left: 0.045em; letter-spacing: 0; } /* 03 / The idea, then the code: each sentence next to the code that says it. */ :is(#df-types,#df-errors,#df-wire,#df-handlers,#df-handlers-rest) .idea-code{margin-top:28px;border:var(--bh-rule)} :is(#df-types,#df-errors,#df-wire,#df-handlers,#df-handlers-rest) .idea-code-head, :is(#df-types,#df-errors,#df-wire,#df-handlers,#df-handlers-rest) .idea-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)} :is(#df-types,#df-errors,#df-wire,#df-handlers,#df-handlers-rest) .idea-code-head>span{padding:12px 22px;background:var(--bh-ink);color:var(--bh-paper)!important;letter-spacing:.08em;text-transform:uppercase;font-size:12px!important} :is(#df-types,#df-errors,#df-wire,#df-handlers,#df-handlers-rest) .idea-code-head>span+span{border-left:1px solid #eeeade44} :is(#df-types,#df-errors,#df-wire,#df-handlers,#df-handlers-rest) .idea-row+.idea-row{border-top:2px solid var(--bh-ink)} :is(#df-types,#df-errors,#df-wire,#df-handlers,#df-handlers-rest) .idea-say{display:flex;gap:14px;align-items:flex-start;margin:0;padding:18px 22px;line-height:1.55;font-size:17px!important} :is(#df-types,#df-errors,#df-wire,#df-handlers,#df-handlers-rest) .idea-n{flex:none;padding:2px 7px;background:var(--bh-red);color:#fff!important;font-weight:800;font-size:12px!important;line-height:1.4} :is(#df-types,#df-errors,#df-wire,#df-handlers,#df-handlers-rest) .idea-say mark{background:none;color:var(--bh-red);font-weight:800;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px} :is(#df-types,#df-errors,#df-wire,#df-handlers,#df-handlers-rest) .idea-row pre{margin:0;height:100%;box-sizing:border-box;border-left:var(--bh-rule)} :is(#df-types,#df-errors,#df-wire,#df-handlers,#df-handlers-rest) .idea-row pre mark.idea-mark{background:none;color:inherit;text-decoration:underline;text-decoration-color:var(--bh-red);text-decoration-thickness:3px;text-underline-offset:4px} :is(#df-types,#df-errors,#df-wire,#df-handlers,#df-handlers-rest) .idea-frame .idea-say{color:#51514c;font-style:italic;font-size:13px!important;padding-top:12px;padding-bottom:12px} :is(#df-types,#df-errors,#df-wire,#df-handlers,#df-handlers-rest) .idea-frame pre code{opacity:.55} :is(#df-types,#df-errors,#df-wire,#df-handlers,#df-handlers-rest) .idea-row:not(.idea-frame):hover .idea-say{background:#e6412c12} :is(#df-types,#df-errors,#df-wire,#df-handlers,#df-handlers-rest) .idea-verdict{margin-top:20px;padding:16px 22px;border-left:8px solid var(--bh-red);background:#22221e0d;max-width:none!important} :is(#df-types,#df-errors,#df-wire,#df-handlers,#df-handlers-rest) .idea-verdict strong{color:var(--bh-red)} @media(max-width:820px){ :is(#df-types,#df-errors,#df-wire,#df-handlers,#df-handlers-rest) .idea-code-head, :is(#df-types,#df-errors,#df-wire,#df-handlers,#df-handlers-rest) .idea-row{grid-template-columns:minmax(0,1fr)} :is(#df-types,#df-errors,#df-wire,#df-handlers,#df-handlers-rest) .idea-code-head>span+span{display:none} :is(#df-types,#df-errors,#df-wire,#df-handlers,#df-handlers-rest) .idea-row pre{border-left:0;border-top:2px solid var(--bh-ink)} :is(#df-types,#df-errors,#df-wire,#df-handlers,#df-handlers-rest) .idea-say{font-size:15px!important} }