/* ========================================================================== DEVELOPER DARK — loaded on a/developer-dark.html only. Ported from the approved canvas "Aesthetary — Developer Dark" v3. Every value below is a PAGE TOKEN: Aesthetary's interpretation for this page, not Developer Dark canon (the page says so wherever it shows one). Instrument Sans + JetBrains Mono for this page only; Cormorant Garamond for the Nocturne specimen only. Radius: 3–6px on controls, 0 on regions. Contrast (WCAG, computed): --tx 16.1:1 on --c0 and 13.1:1 on --c3; --t2 10.1 / 9.6 / 9.0 / 8.3:1 on --c0..--c3; --t3 (muted) 6.3 / 6.0 / 5.6 / 5.2:1 on --c0..--c3; syntax comment --com 5.0:1 on --c0, 4.7:1 on --c1 (comments are only set on those two). Breakpoints (implementation choices): desktop >= 1200, tablet 768–1199, mobile < 768. ========================================================================== */ @font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } .dd-page main { --c0: #0B0C0E; --c1: #111316; --c2: #171A1E; --c3: #1E2227; --b1: #252A30; --b2: #353B43; --tx: #E6E9ED; --t2: #B4BBC4; --t3: #8B939E; --ok: #3FB97A; --warn: #E0A43A; --err: #F07070; --info: #7AA7FF; --focus: #8AB4FF; --kw: #C9A2FF; --str: #9FD39A; --num: #F2B872; --fn: #82B8FF; --com: #79818C; --ty: #7FD6C8; --accent: #D8C7A8; --on-accent: #17140F; --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --pad: 48px; /* the shell pads main; the page sets its own gutter (--pad), as on the canvas */ padding-inline: 0 !important; background: var(--c0); color: var(--tx); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; /* JetBrains Mono ships upright only; comments are set in a synthesized italic, as on the canvas. */ font-synthesis: style; overflow-x: clip; } .dd-page main *, .dd-page main *::before, .dd-page main *::after { box-sizing: border-box; } /* Resets at zero specificity, so every dd- class below wins without !important. */ /* (0,0,2): beats the house element rules (h3, main p) by order, loses to every dd- class. */ :where(.dd-page) main :is(p, h1, h2, h3, h4, dl, dd, figure, ul, ol, pre) { margin: 0; } :where(.dd-page) main :is(ul, ol) { padding: 0; list-style: none; } :where(.dd-page) main :is(a) { color: var(--t2); text-underline-offset: 3px; } :where(.dd-page) main :is(a:hover) { color: var(--tx); } :where(.dd-page) main :is(h1, h2, h3, h4) { font-family: inherit; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: normal; word-break: normal; hyphens: none; } .dd-page main :is(a, button, input, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .dd-page main button { font-family: var(--sans); cursor: pointer; } /* ---- utilities (all dd-) ---- */ .dd-m { font-family: var(--mono); } .dd-tx { color: var(--tx); } .dd-t2 { color: var(--t2); } .dd-t3 { color: var(--t3); } .dd-ok, .dd-okc { color: var(--ok); } .dd-warn { color: var(--warn); } .dd-err { color: var(--err); } .dd-info { color: var(--info); } .dd-bg-ok { background: var(--ok); } .dd-bg-err { background: var(--err); } .dd-sm { font-size: 12px; } .dd-xs { font-size: 11px; } .dd-sm2 { font-size: 15px; line-height: 23px; } .dd-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .dd-lbl { font-family: var(--mono); font-size: 11px; line-height: 16px; color: var(--t3); letter-spacing: 0.01em; } .dd-tag { font-family: var(--mono); font-size: 10.5px; line-height: 18px; padding: 0 6px; border: 1px solid var(--b2); color: var(--t2); border-radius: 3px; white-space: nowrap; display: inline-block; } .dd-tag--warn { color: var(--warn); border-color: var(--warn); align-self: flex-start; } .dd-kbd { font-family: var(--mono); font-size: 10.5px; line-height: 16px; padding: 0 5px; border: 1px solid var(--b2); border-bottom-width: 2px; border-radius: 3px; color: var(--t2); background: var(--c2); } .dd-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; } .dd-code { font-family: var(--mono); font-size: 12px; line-height: 20px; color: var(--t2); white-space: pre; font-variant-ligatures: none; } .dd-k { color: var(--kw); } .dd-s { color: var(--str); } .dd-n { color: var(--num); } .dd-f { color: var(--fn); } .dd-c { color: var(--com); font-style: italic; } .dd-t { color: var(--ty); } .dd-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .dd-right { display: flex; justify-content: flex-end; align-items: flex-end; } .dd-self { align-self: flex-start; } .dd-stack-sm { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } /* ---- the three axes: claim basis marks ---- */ .dd-kind { font-family: var(--mono); font-size: 10.5px; line-height: 18px; padding: 0 6px; border-radius: 3px; display: inline-block; max-width: 100%; } .dd-k-doc { border: 1px solid var(--t2); color: var(--tx); } .dd-k-syn { border: 1px dashed var(--b2); color: var(--t3); } .dd-k-tr { border: 1px dashed var(--t3); color: var(--t2); } .dd-mark { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; vertical-align: middle; max-width: 100%; } .dd-marks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .dd-why { display: inline-block; max-width: 100%; } .dd-why[open] { display: block; flex-basis: 100%; } .dd-why > summary { list-style: none; font-family: var(--mono); font-size: 10.5px; line-height: 18px; padding: 0 6px; border: 1px dotted #59616B; color: var(--t3); border-radius: 3px; cursor: pointer; white-space: nowrap; display: inline-block; } .dd-why > summary::-webkit-details-marker { display: none; } .dd-why > summary:hover, .dd-why[open] > summary { color: var(--tx); } .dd-prov { margin-top: 6px; border: 1px solid var(--b1); background: var(--c1); padding: 12px 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; font-size: 12.5px; line-height: 18px; color: var(--t2); font-family: var(--sans); white-space: normal; text-align: left; } .dd-prov .dd-m { font-size: 11.5px; overflow-wrap: anywhere; color: var(--tx); } .dd-prov__note { grid-column: 1 / -1; } .dd-why-eg { font-family: var(--mono); font-size: 10.5px; padding: 0 6px; border: 1px dotted #59616B; color: var(--t3); border-radius: 3px; } /* ---- sections ---- */ .dd-wrap { padding-inline: var(--pad); max-width: 1440px; margin-inline: auto; } .dd-sec { padding-bottom: 104px; } .dd-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; } .dd-sec-h { border-top: 1px solid var(--b1); padding-top: 20px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; } .dd-span4 { grid-column: span 4; } .dd-span5 { grid-column: span 5; } .dd-span6 { grid-column: span 6; } .dd-span7 { grid-column: span 7; } .dd-span8 { grid-column: span 8; } .dd-span12 { grid-column: 1 / -1; } .dd-start9 { grid-column: 9 / span 4; } .dd-path { font-family: var(--mono); font-size: 12px; color: var(--t3); } .dd-path b { color: var(--tx); font-weight: 500; } .dd-big { margin-top: 6px !important; font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; } .dd-big--40 { font-size: 40px; line-height: 44px; } .dd-big--72 { font-size: 72px; line-height: 72px; } .dd-big__mono { font-size: 46px; font-weight: 500; letter-spacing: -0.03em; color: var(--t2); } .dd-lead { grid-column: span 6; font-size: 16px; line-height: 25px; color: var(--t2); } /* ---- buttons & controls ---- */ .dd-sbtn { height: 36px; padding: 0 12px; border: 1px solid #30353C; background: #15171A; color: #D5D9DE; font: 500 13px var(--sans); border-radius: 4px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .dd-sbtn:hover { border-color: var(--t3); color: var(--tx); } .dd-seg { display: inline-flex; border: 1px solid var(--b2); border-radius: 5px; overflow: hidden; flex-shrink: 0; } .dd-seg button { min-height: 36px; padding: 0 14px; background: transparent; color: var(--t2); border: 0; border-right: 1px solid var(--b2); font: 500 13px var(--sans); } .dd-seg button:last-child { border-right: 0; } .dd-seg button[aria-pressed="true"] { background: var(--tx); color: var(--c0); } .dd-seg button:focus-visible { outline-offset: -3px; } .dd-btn { height: 36px; padding: 0 14px; border: 1px solid var(--b2); background: transparent; color: var(--tx); border-radius: 5px; font: 500 13px var(--sans); } .dd-btn--sm { height: 28px; font-size: 12px; } .dd-btn[aria-pressed="true"] { background: var(--tx); color: var(--c0); border-color: var(--tx); } .dd-mob { display: none !important; } /* ========================================================================== HERO — the workspace ========================================================================== */ .dd-hero { padding-top: 28px; padding-bottom: 72px; } .dd-ws { position: relative; border: 1px solid var(--b1); background: var(--c0); display: flex; flex-direction: column; min-height: 780px; } .dd-ws__tabs { height: 34px; display: flex; align-items: stretch; border-bottom: 1px solid var(--b1); background: var(--c1); overflow: hidden; } .dd-ws__grow { flex-grow: 1; } .dd-ws__mtabs { display: none; } .dd-tab { padding: 0 14px; display: flex; align-items: center; gap: 0; font-size: 12.5px; color: var(--t3); border-right: 1px solid var(--b1); white-space: nowrap; } .dd-tab.on { color: var(--tx); background: var(--c0); box-shadow: inset 0 -1px 0 var(--c0), inset 0 2px 0 var(--t2); } .dd-tab--meta { border-right: 0; border-left: 1px solid var(--b1); } /* two panes, in the canvas's proportion (document 512 : inspector 392) */ .dd-ws__body { flex-grow: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); min-height: 0; } .dd-pane--doc { container-type: inline-size; min-width: 0; } .dd-doc { padding: 56px 56px 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; height: 100%; } .dd-doc__kicker { display: block; margin-bottom: 18px; } .dd-h1 { font-size: min(104px, calc((100cqi - 112px) / 4.5)); line-height: 0.93; font-weight: 600; letter-spacing: -0.045em; } .dd-doc__sub { margin-top: 22px !important; font-size: 28px; line-height: 34px; color: var(--t2); letter-spacing: -0.01em; } .dd-doc__lede { margin-top: 22px !important; max-width: 520px; font-size: 16px; line-height: 25px; color: var(--t2); } .dd-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--b1); } .dd-facts > div { padding: 12px 12px 0; border-left: 1px solid var(--b1); } .dd-facts > div:first-child { padding-left: 0; border-left: 0; } @container (max-width: 560px) { .dd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; } .dd-facts > div:nth-child(3) { padding-left: 0; border-left: 0; } } .dd-facts dd { margin-top: 4px; font-size: 13px; line-height: 18px; } .dd-doc__ctx { display: block; margin-top: 10px; } .dd-insp { border-left: 1px solid var(--b1); display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--c1); } .dd-insp__h { height: 30px; display: flex; border-bottom: 1px solid var(--b1); background: var(--c1); } .dd-insp__h .dd-tab { font-size: 12px; } .dd-pane--code { flex-grow: 1; display: flex; flex-direction: column; min-height: 0; } .dd-pane--code .dd-scroll { flex-grow: 1; background: var(--c0); } .dd-pane--log .dd-insp__h { border-top: 1px solid var(--b1); } .dd-code--ts { padding: 12px 14px 12px 4px; } .dd-ln { color: #6B727C; display: inline-block; width: 26px; text-align: right; margin-right: 14px; user-select: none; } .dd-code--log { padding: 10px 14px; font-size: 11px; line-height: 17px; background: var(--c0); min-height: 250px; } .dd-sb { min-height: 28px; border-top: 1px solid var(--b1); background: var(--c1); display: flex; flex-wrap: wrap; align-items: center; column-gap: 22px; row-gap: 2px; padding: 4px 14px; font-family: var(--mono); font-size: 11px; color: var(--t3); } .dd-sb__ev { margin-left: auto; } .dd-hero__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 24px; } /* ---- Jump to section: the palette (a modal dialog) and the sticky bar ---- */ .dd-pal { width: min(560px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 64px)); padding: 0; background: var(--c3); color: var(--tx); border: 1px solid var(--b2); border-radius: 6px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); overflow: hidden; font-family: var(--sans); } .dd-pal[open] { display: flex; flex-direction: column; } .dd-pal::backdrop { background: rgba(5, 6, 7, 0.6); } .dd-pal__q { height: 48px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--b2); } .dd-pal__in { flex-grow: 1; min-width: 0; height: 40px; background: transparent; border: 0; color: var(--tx); font: 400 15px var(--sans); } .dd-pal__in::placeholder { color: var(--t3); } .dd-pal__in:focus-visible { outline: none; } .dd-pal__q:focus-within { box-shadow: inset 0 -2px 0 var(--focus); } .dd-pal__esc { font: 500 11px var(--mono); color: var(--t2); background: transparent; border: 1px solid var(--b2); border-radius: 3px; min-height: 28px; padding: 0 8px; } .dd-pal__list { overflow-y: auto; flex-grow: 1; padding: 4px 0; } .dd-pal__o { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 14px; font-size: 13.5px; color: var(--t2); cursor: pointer; } .dd-pal__o[aria-selected="true"] { background: #2A3038; color: var(--tx); box-shadow: inset 2px 0 0 var(--tx); } .dd-pal__o[hidden] { display: none; } .dd-pal__none { padding: 14px; font-size: 13.5px; color: var(--t3); } .dd-pal__foot { height: 32px; flex-shrink: 0; border-top: 1px solid var(--b2); display: flex; align-items: center; padding: 0 14px; } .dd-sticky { position: fixed; z-index: 40; right: 24px; bottom: calc(20px + var(--dd-lift, 0px)); display: flex; align-items: center; gap: 14px; padding: 6px 6px 6px 14px; background: var(--c2); border: 1px solid var(--b2); border-radius: 6px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); font-size: 13px; color: var(--tx); max-width: calc(100vw - 32px); } .dd-sticky[hidden] { display: none; } .dd-sticky__where { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ========================================================================== 01 · DEFINITION + DARK MODE TEST ========================================================================== */ .dd-def { margin-top: 40px; } .dd-def__big { grid-column: span 6; font-size: 40px; line-height: 46px; font-weight: 500; letter-spacing: -0.025em; } .dd-def__txt { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 25px; color: var(--t2); } .dd-cmp { margin-top: 72px; border: 1px solid var(--b1); scroll-margin-top: 24px; } .dd-cmp__h { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--b1); background: var(--c1); } .dd-cmp__t { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .dd-cmp__t h3 { font-size: 20px; } .dd-cmp__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .dd-cmp__col { padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; } .dd-cmp__col + .dd-cmp__col { border-left: 1px solid var(--b1); } .dd-cmp__lab { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; } /* the specimens, with their own light palette under "Remove the dark" */ .dd-spec { --bg: #0E0F11; --bg2: #16181B; --ln: #272B31; --sx: #E6E9ED; --s2: #A3AAB3; --okc: #3FB97A; --erc: #F07070; --wc: #E0A43A; background: var(--bg); color: var(--sx); border: 1px solid var(--ln); height: 440px; overflow: hidden; transition: background-color 0.25s ease, color 0.25s ease; } .dd-lit .dd-spec { --bg: #F7F7F5; --bg2: #FFFFFF; --ln: #DADCD8; --sx: #141518; --s2: #5C6168; --okc: #18794E; --erc: #C23B3B; --wc: #9A6200; } .dd-spec .dd-okc { color: var(--okc); } .dd-spec .dd-erc { color: var(--erc); } .dd-spec .dd-wc { color: var(--wc); } .dd-s2 { color: var(--s2); } .dd-sx { color: var(--sx); } .dd-spec--a { border-radius: 10px; } .dd-spec--b { border-radius: 6px; } .dd-sa__top { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; } .dd-sa__brand { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; } .dd-sa__nav { display: flex; gap: 18px; font-size: 14px; color: var(--s2); } .dd-sa__hero { display: flex; gap: 20px; padding: 6px 22px 18px; align-items: flex-end; } .dd-sa__art { width: 132px; height: 132px; flex-shrink: 0; border-radius: 8px; background: #C8663F; position: relative; overflow: hidden; } .dd-sa__art i { position: absolute; width: 100px; height: 100px; border-radius: 50%; background: #F1C27D; left: 50px; top: -30px; } .dd-sa__art b { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: #2C3A5A; } .dd-sa__meta { display: flex; flex-direction: column; gap: 6px; flex-grow: 1; font-size: 13px; min-width: 0; } .dd-sa__title { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; } .dd-sa__play { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; background: var(--sx); display: flex; align-items: center; justify-content: center; } .dd-sa__play path { fill: var(--bg); } .dd-trow { display: grid; grid-template-columns: 24px 1fr 1fr 48px; gap: 12px; align-items: center; height: 44px; padding: 0 20px; font-size: 14px; color: var(--s2); } .dd-sb-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--ln); font-size: 14px; } .dd-sb-top__r { display: flex; gap: 8px; align-items: center; font-size: 11px; } .dd-pill { font-size: 11px; border: 1px solid var(--ln); padding: 1px 6px; border-radius: 3px; margin-left: 6px; color: var(--s2); } .dd-sb-btn { height: 28px; padding: 0 10px; border: 1px solid var(--ln); border-radius: 4px; font-size: 12.5px; display: inline-flex; align-items: center; font-family: var(--sans); } .dd-sb-tabs { display: flex; gap: 20px; height: 36px; padding: 0 16px; font-size: 13px; color: var(--s2); border-bottom: 1px solid var(--ln); } .dd-sb-tabs span { display: flex; align-items: center; } .dd-sb-tabs .on { color: var(--sx); box-shadow: inset 0 -2px 0 var(--sx); } .dd-dtab { min-width: 480px; } .dd-drow { display: grid; grid-template-columns: 104px 1fr 80px 64px 40px; gap: 12px; align-items: center; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--ln); font-size: 13px; } .dd-drow--h { height: 30px; font-size: 11.5px; color: var(--s2); } .dd-drow .dd-sm { font-size: 11.5px; } .dd-stt { display: flex; align-items: center; gap: 6px; } .dd-sb-log { padding: 12px 16px; font-family: var(--mono); font-size: 11.5px; line-height: 20px; color: var(--s2); background: var(--bg2); min-height: 132px; white-space: pre; } .dd-verdict { border: 1px solid var(--b1); padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 20px; } .dd-verdict .dd-m { font-size: 12px; white-space: nowrap; } .dd-test { border-top: 1px solid var(--b1); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: 32px 20px; } .dd-test__l { grid-column: span 4; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .dd-test__q { grid-column: span 8; font-size: 26px; line-height: 34px; letter-spacing: -0.015em; } .dd-cmp__defs { border-top: 1px solid var(--b1); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .dd-cmp__defs > div { padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; line-height: 22px; color: var(--t2); min-width: 0; } .dd-cmp__defs > div + div { border-left: 1px solid var(--b1); } .dd-cmp__defs .dd-m { font-size: 12px; } .dd-switch { align-items: center; justify-content: space-between; margin: 0 20px 12px; padding: 0 12px; min-height: 52px; border: 1px solid var(--b1); font-size: 15px; } .dd-swatch { width: 52px; height: 30px; border-radius: 15px; border: 1px solid var(--b2); background: var(--c2); position: relative; padding: 0; } .dd-swatch span { position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--t3); transition: left 0.2s ease, background-color 0.2s ease; } .dd-sw[aria-pressed="true"] { background: var(--tx); } .dd-sw[aria-pressed="true"] span { left: 25px; background: var(--c0); } /* ========================================================================== 01 · SIGNALS ========================================================================== */ .dd-filters { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } .dd-fbtn { min-height: 28px; padding: 0 10px; border: 1px solid var(--b2); background: transparent; color: var(--t2); border-radius: 4px; font: 500 12px var(--mono) !important; } .dd-fbtn[aria-pressed="true"] { background: var(--c3); color: var(--tx); border-color: #59616B; } .dd-sig-intro { margin-top: 18px; } .dd-axes { grid-column: 8 / span 5; border: 1px solid var(--b1); padding: 12px 14px; display: grid; grid-template-columns: 120px 1fr; row-gap: 8px; align-items: center; font-size: 12.5px; color: var(--t2); } .dd-axes__v { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .dd-bars { display: inline-flex; gap: 3px; } .dd-bars i { width: 18px; height: 6px; background: var(--b2); display: block; } .dd-bars i.on { background: var(--tx); } .dd-sigs { margin-top: 32px; } .dd-sig { display: grid; grid-template-columns: 260px minmax(0, 1fr); border-top: 1px solid var(--b1); transition: opacity 0.2s; } .dd-sig--unreliable { border-bottom: 1px solid var(--b1); } .dd-sig.is-dim { opacity: 0.22; } .dd-lvl { padding: 22px 16px 22px 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .dd-sig--necessary .dd-lvl h3 { font-size: 22px; } .dd-sig--strong .dd-lvl h3 { font-size: 19px; } .dd-sig--common .dd-lvl h3 { font-size: 17px; } .dd-sig--optional .dd-lvl h3 { font-size: 16px; color: var(--t2); } .dd-sig--unreliable .dd-lvl h3 { font-size: 16px; color: var(--t3); } .dd-lvl__basis { display: flex; gap: 4px; } .dd-lvl__proof { color: var(--t2) !important; } .dd-acc { display: none; } .dd-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--b1); border-left: 1px solid var(--b1); margin: 22px 0; } .dd-scell { padding: 16px 16px 18px; border-right: 1px solid var(--b1); border-bottom: 1px solid var(--b1); display: flex; flex-direction: column; gap: 10px; } .dd-scell h4 { font-size: 16px; line-height: 1.3; } .dd-cells--necessary .dd-scell h4 { font-size: 18px; } .dd-scell p { font-size: 13px; line-height: 19px; color: var(--t2); } .dd-cells--necessary .dd-scell p { font-size: 13.5px; line-height: 20px; } .dd-art { height: 56px; border: 1px solid var(--b1); overflow: hidden; } .dd-cells--necessary .dd-art { height: 64px; } .dd-art i { display: block; } .dd-art--field { background: #050506; } .dd-art--split { display: grid; grid-template-columns: 1fr 2fr; } .dd-art--split > div { border-right: 1px solid var(--b1); padding: 6px; display: flex; flex-direction: column; gap: 4px; } .dd-art--split i { height: 4px; background: var(--b2); } .dd-art--split i.t3 { background: var(--t3); } .dd-code--tiny { font-size: 10px; line-height: 15px; padding: 6px; } .dd-code--tiny2 { font-size: 10.5px; line-height: 17px; padding: 7px; } .dd-art--hier { padding: 8px; display: flex; flex-direction: column; gap: 5px; } .dd-art--hier .a { height: 8px; width: 55%; background: var(--tx); } .dd-art--hier .b { height: 5px; width: 80%; background: var(--t3); } .dd-art--hier div { display: flex; gap: 6px; } .dd-art--hier div i { height: 5px; width: 30%; background: var(--b2); } .dd-art--hier div i + i { width: 20%; } .dd-art--layers { background: var(--c0); padding: 7px; } .dd-art--layers > div { height: 100%; background: var(--c2); padding: 7px; } .dd-art--layers > div > div { height: 100%; background: var(--c3); border: 1px solid var(--b2); } .dd-art--aa { display: flex; align-items: center; justify-content: center; gap: 14px; } .dd-art--aa span:first-child { font-size: 30px; font-weight: 600; } .dd-art--aa .dd-m { font-size: 22px; color: var(--t2); } .dd-art--rules { display: grid; grid-template-columns: 1fr 2fr; } .dd-art--rules > div:first-child { border-right: 1px solid var(--b2); } .dd-art--rules > div + div { display: flex; flex-direction: column; } .dd-art--rules i { flex-grow: 1; border-bottom: 1px solid var(--b2); } .dd-art--rules i:last-child { border-bottom: 0; } .dd-art--sem { padding: 9px; display: flex; flex-direction: column; gap: 6px; } .dd-art--sem > i { height: 5px; width: 80%; background: var(--b2); } .dd-art--sem > i + i { width: 60%; } .dd-art--sem > span { display: flex; align-items: center; font-size: 9.5px; } .dd-art--meta { padding: 7px 9px; font-size: 10.5px; line-height: 14px; display: grid; grid-template-columns: 60px 1fr; color: var(--t2); } .dd-chips { padding: 22px 0; display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; } .dd-chip { border: 1px solid var(--b2); padding: 6px 11px; border-radius: 4px; color: var(--t2); font-size: 14px; } .dd-sig--common .dd-chip { color: var(--tx); } .dd-chip--un { border-style: dashed; color: var(--t3); } /* ========================================================================== 01 · ORIGINS ========================================================================== */ .dd-layers { margin-top: 40px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--b2); } .dd-node { padding: 20px 20px 0 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .dd-node h3 { font-size: 17px; line-height: 1.25; } .dd-node p { font-size: 13.5px; line-height: 20px; color: var(--t2); } .dd-emerge { margin-top: 32px; border: 1px dashed var(--b2); padding: 22px 24px; display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; } .dd-emerge p { font-size: 19px; line-height: 28px; letter-spacing: -0.01em; } .dd-ev { margin-top: 32px; border-top: 1px solid var(--b1); padding-top: 20px; } .dd-ev__l { grid-column: span 4; display: flex; flex-direction: column; gap: 8px; } .dd-ev__l p { font-size: 15px; line-height: 23px; color: var(--t2); } .dd-ev__n { grid-column: 6 / span 7; } .dd-ev__note { grid-column: 6 / span 7; } .dd-cov { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--b1); align-self: start; } .dd-cov__c { padding: 14px; border-right: 1px solid var(--b1); position: relative; } .dd-cov__c:last-child { border-right: 0; } .dd-cov__n { font-family: var(--mono); font-size: 30px; line-height: 1.2; margin-top: 4px; } .dd-coverage__n .dd-cov__c { padding: 16px; } .dd-coverage__n .dd-cov__n { font-size: 34px; } /* ========================================================================== 01 · MISCONCEPTIONS ========================================================================== */ .dd-mis__path { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--b1); padding-top: 20px; } .dd-mis__type { margin-top: 36px; } .dd-mis__l1 { display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap; } .dd-mis__l2 { display: flex; align-items: baseline; gap: 36px; margin-top: 18px; flex-wrap: wrap; } .dd-mis__black, .dd-mis__l1 .dd-neon, .dd-mis__ne, .dd-mis__dd { font-size: 132px; line-height: 132px; } .dd-mis__black { font-weight: 600; background-color: #000; padding: 0 22px; letter-spacing: -0.04em; color: #F5F5F5; } .dd-mis__l1 .dd-neon { font-weight: 600; letter-spacing: -0.04em; } .dd-mis__ne { font-weight: 300; color: var(--t3); } .dd-mis__dd { font-weight: 600; letter-spacing: -0.05em; } .dd-neon { color: #39FF6A; text-shadow: 0 0 8px rgba(57, 255, 106, 0.8), 0 0 24px rgba(57, 255, 106, 0.45); } .dd-scan { background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px); } .dd-mis__lede { margin-top: 36px !important; max-width: 700px; font-size: 20px; line-height: 30px; color: var(--t2); } .dd-mis__lede + .dd-marks { margin-top: 14px; } .dd-proofs { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .dd-proof { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .dd-proof__h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 28px; } .dd-pa { height: 460px; background-color: #000; border: 1px solid #1A1A1A; padding: 36px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; position: relative; } .dd-pa__top { font-size: 13px; display: flex; justify-content: space-between; } .dd-pa__h { font-size: 54px; line-height: 58px; font-weight: 600; letter-spacing: -0.03em; } .dd-pa__sub { margin-top: 18px; font-size: 13px; color: #1FAF4A; line-height: 20px; } .dd-pa__cta { font-size: 13px; } .dd-pa__bits { position: absolute; right: 30px; top: 70px; font-size: 13px; line-height: 17px; color: rgba(57, 255, 106, 0.22); white-space: pre; } .dd-pb { --acc: #E6E9ED; --accdim: #B4BBC4; height: 460px; background: #121418; border: 1px solid var(--b1); display: grid; grid-template-columns: 170px minmax(0, 1fr); overflow: hidden; } .dd-pb.is-stereo { --acc: #39FF6A; --accdim: #39FF6A; } .dd-pb.is-stereo .dd-glow { text-shadow: 0 0 10px rgba(57, 255, 106, 0.6); } .dd-pb.is-stereo .dd-pb__main h3 { color: #39FF6A; } .dd-pb__nav { border-right: 1px solid var(--b1); padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--t2); } .dd-pb__nav .dd-lbl { margin-bottom: 6px; } .dd-pb__cur { color: var(--acc); font-weight: 500; } .dd-pb__sub { padding-left: 10px; } .dd-pb__nav .dd-glow { color: var(--t2); } .dd-pb.is-stereo .dd-pb__nav .dd-glow { color: #39FF6A; } .dd-pb__main { padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; min-width: 0; } .dd-pb__ep { display: flex; gap: 10px; align-items: center; font-size: 13px; } .dd-pb__verb { font-size: 11px; padding: 1px 6px; border: 1px solid var(--accdim); color: var(--acc); border-radius: 3px; } .dd-pb__main h3 { font-size: 30px; letter-spacing: -0.02em; } .dd-pb__main > p { font-size: 14.5px; line-height: 22px; max-width: 420px; } .dd-pb__main > p .dd-m { font-size: 12.5px; } .dd-pb__curl { background: var(--c0); border: 1px solid var(--b1); padding: 12px 14px; font-size: 11.5px; line-height: 19px; } .dd-params { border: 1px solid var(--b1); min-width: 360px; } .dd-params > div { display: grid; grid-template-columns: 130px 70px 1fr; padding: 8px 12px; font-size: 13px; gap: 8px; } .dd-params > div + div { border-top: 1px solid var(--b1); } .dd-params .dd-m { font-size: 12px; } .dd-params .dd-t3 { font-size: 11px; } .dd-pverdict { border: 1px solid var(--b1); padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; } .dd-pverdict p { font-size: 14px; line-height: 21px; color: var(--t2); } .dd-pverdict__v { display: flex; gap: 6px; align-items: center; white-space: nowrap; } /* ========================================================================== 01 · BOUNDARIES ========================================================================== */ .dd-picks { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } .dd-pick { min-height: 34px; padding: 0 12px; border: 1px solid var(--b2); border-radius: 4px; background: transparent; color: var(--t2); font: 500 13px var(--sans); white-space: nowrap; } .dd-pick[aria-pressed="true"] { border-color: var(--tx); color: var(--tx); background: var(--c3); } .dd-pair { margin-top: 36px; display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: baseline; } .dd-pair__line { font-size: 30px; line-height: 38px; letter-spacing: -0.02em; max-width: 880px; } .dd-matrix { margin-top: 40px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--b1); border-right: 0; } .dd-bcol { border-right: 1px solid var(--b1); transition: background-color 0.2s, opacity 0.2s; display: flex; flex-direction: column; min-width: 0; } .dd-bcol--me { background: var(--c1); } .dd-bcol.is-sel { background: var(--c2); } .dd-bcol.is-dim { opacity: 0.62; } .dd-bcol__th { height: 150px; padding: 14px; display: flex; } .dd-bcol__name { padding: 0 18px 14px; } .dd-bcol__name h3 { font-size: 18px; } .dd-cell { padding: 16px 18px; border-top: 1px solid var(--b1); font-size: 14px; line-height: 21px; color: var(--t2); min-height: 120px; } .dd-cell .dd-lbl { display: block; margin-bottom: 6px; } .dd-cell--rel { min-height: 170px; } .dd-cell--link { min-height: 56px; margin-top: auto; } .dd-cell--link a { color: var(--tx) !important; } .dd-th { flex-grow: 1; overflow: hidden; } .dd-th i { display: block; } .dd-th--dd { border: 1px solid var(--b2); background: #0E0F11; display: grid; grid-template-columns: 30% 1fr; grid-template-rows: 1fr 22px; } .dd-th--dd > div:first-child { border-right: 1px solid var(--b2); padding: 6px; display: flex; flex-direction: column; gap: 4px; } .dd-th--dd > div:first-child i { height: 4px; width: 80%; background: #3A414A; } .dd-th--dd > div:first-child i + i { width: 60%; } .dd-th--dd > div:first-child i.hi { width: 70%; background: var(--t3); } .dd-th--dd pre { font-family: var(--mono); font-size: 7.5px; line-height: 11px; padding: 6px; color: var(--t2); white-space: pre; } .dd-th__sb { grid-column: span 2; border-top: 1px solid var(--b2); display: flex; align-items: center; gap: 4px; padding: 0 6px; } .dd-th__sb span { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); } .dd-th__sb i { height: 3px; width: 40px; background: #3A414A; } .dd-th--term { background: #000; border: 1px solid #222; padding: 8px; font-family: var(--mono); font-size: 9px; line-height: 13px; color: #C9CDD2; white-space: pre; margin: 0; } .dd-th__cur { background: #C9CDD2; color: #000; } .dd-th--saas { background: #F4F5F7; border: 1px solid #DADDE2; padding: 10px; display: flex; flex-direction: column; gap: 6px; align-items: center; } .dd-th--saas .a { height: 7px; width: 70%; background: #1B1D22; border-radius: 3px; } .dd-th--saas .b { height: 4px; width: 50%; background: #9AA0A8; } .dd-th--saas .c { height: 12px; width: 40px; background: #4F5BD5; border-radius: 6px; } .dd-th--saas div { display: flex; gap: 5px; width: 100%; margin-top: 4px; } .dd-th--saas div i { flex-grow: 1; height: 34px; background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } .dd-th--cyber { background: #0A0512; border: 1px solid #FF2E97; position: relative; } .dd-th--cyber .a { position: absolute; left: 10px; top: 12px; width: 70%; height: 2px; background: #00F0FF; box-shadow: 0 0 8px #00F0FF; } .dd-th--cyber span { position: absolute; left: 10px; top: 26px; font: 700 16px var(--mono); color: #FF2E97; text-shadow: 2px 0 #00F0FF; } .dd-th--cyber .b { position: absolute; right: 8px; bottom: 8px; width: 38px; height: 38px; border: 1px solid #00F0FF; transform: rotate(45deg); } .dd-th--dm { background: #18181B; border: 1px solid #2A2A2E; border-radius: 10px; padding: 10px; display: flex; gap: 8px; } .dd-th--dm .a { width: 46px; height: 46px; flex-shrink: 0; border-radius: 8px; background: #C8663F; } .dd-th--dm div { display: flex; flex-direction: column; gap: 5px; flex-grow: 1; } .dd-th--dm div i { height: 6px; width: 70%; background: #EDEDED; } .dd-th--dm div i + i { height: 4px; width: 50%; background: #77777D; } .dd-th--dm div i + i + i { width: 60%; } .dd-matrix__foot { margin-top: 12px; display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; } /* ========================================================================== 01 · COUNTEREXAMPLE ========================================================================== */ .dd-quad { margin-top: 36px; display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.35fr); grid-template-rows: 40px 560px 400px; border-top: 1px solid var(--b1); } .dd-quad__ax { display: flex; align-items: center; padding: 0 18px; font-size: 12px; border-left: 1px solid var(--b1); } .dd-quad__v { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: center; font-size: 12px; border-top: 1px solid var(--b1); } .dd-quad__v2 { border-bottom: 1px solid var(--b1); } .dd-qc { border-left: 1px solid var(--b1); border-top: 1px solid var(--b1); min-width: 0; } .dd-qc--dd, .dd-qc--docs { padding: 24px; display: flex; flex-direction: column; gap: 16px; } .dd-qc--docs, .dd-qc--none { border-bottom: 1px solid var(--b1); } .dd-qc__v { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .dd-qc__big { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; } .dd-qc__mid { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; } .dd-qc__v .dd-m { white-space: nowrap; } .dd-qdd { flex-grow: 1; border: 1px solid var(--b1); background: var(--c1); display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: 1fr 24px; overflow: hidden; } .dd-qdd__side { border-right: 1px solid var(--b1); padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--t2); } .dd-qdd__side .on { color: var(--tx); background: var(--c3); padding: 2px 4px; } .dd-qdd__main { padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .dd-qdd__t { font-size: 17px; font-weight: 600; } .dd-qdd__tbl { border: 1px solid var(--b1); font-size: 12px; } .dd-qdd__tbl > div { display: grid; grid-template-columns: 64px 1fr 60px; padding: 6px 8px; } .dd-qdd__tbl > div + div { border-top: 1px solid var(--b1); } .dd-qdd__tbl .dd-m { font-size: 11px; } .dd-code--xs { font-size: 10.5px; line-height: 16px; } .dd-qdd__sb { grid-column: span 2; border-top: 1px solid var(--b1); display: flex; align-items: center; gap: 14px; padding: 0 10px; } .dd-qc--noct { container-type: inline-size; border-top-color: #1C1916; background: #0C0A09; overflow: hidden; font-family: "Cormorant Garamond", Georgia, serif; } .dd-noct { position: relative; height: 100%; } .dd-noct__bar { position: absolute; left: 32px; right: 32px; top: 22px; display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; letter-spacing: 0.2em; color: #CDBFAE; } .dd-noct__brand { font-size: 19px; letter-spacing: 0.36em; color: #EFE6DA; } .dd-noct__photo { position: absolute; left: 32px; top: 70px; width: min(300px, 40cqi); height: 440px; background: #1B1613; overflow: hidden; } .dd-noct__photo .a { position: absolute; left: 70px; top: 60px; width: 160px; height: 400px; border-radius: 80px 80px 0 0; background: #2A221D; } .dd-noct__photo .b { position: absolute; left: 105px; top: 22px; width: 90px; height: 90px; border-radius: 50%; background: #3A2F28; } .dd-noct__photo .dd-lbl { position: absolute; left: 12px; top: 10px; right: 12px; color: #A89C90; } .dd-noct__copy { position: absolute; left: calc(min(300px, 40cqi) + 68px); top: 150px; color: #EFE6DA; } .dd-noct__season { font-style: italic; font-size: 19px; color: #B8A794; } .dd-noct__h { font-size: min(96px, calc((60cqi - 110px) / 4)); line-height: 0.92; margin-top: 8px; } .dd-noct__copy i { display: block; width: 70px; height: 1px; background: #8C7B69; margin: 24px 0; } .dd-noct__cta { font-size: 12.5px; letter-spacing: 0.3em; } .dd-noct__verdict { position: absolute; right: 32px; bottom: 26px; text-align: right; font-family: var(--sans); } .dd-noct__v1, .dd-noct__v2 { font-size: min(52px, 8cqi); line-height: 1.04; font-weight: 600; letter-spacing: -0.04em; } .dd-noct__v2 { color: var(--t3); } .dd-noct__verdict .dd-m { margin-top: 10px; } .dd-qdocs { flex-grow: 1; background: #FAFAF8; border: 1px solid #DEDFDB; display: grid; grid-template-columns: 120px minmax(0, 1fr); overflow: hidden; color: #17181B; } .dd-qdocs__side { border-right: 1px solid #E4E5E1; padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #5C6168; } .dd-qdocs__side b, .dd-qdocs__side .on { color: #17181B; } .dd-qdocs__main { padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .dd-qdocs__t { font-size: 18px; font-weight: 600; } .dd-qdocs__code { background: #121418; color: #C9CED6; padding: 10px 12px; border-radius: 4px; overflow-x: auto; } .dd-qc--none { padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 12px); } .dd-qc--none p { font-size: 16px; line-height: 24px; color: var(--t3); max-width: 420px; } .dd-cfoot { margin-top: 28px; } .dd-cfoot > div { grid-column: span 4; border-top: 1px solid var(--b1); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .dd-cfoot p { font-size: 14.5px; line-height: 22px; color: var(--t2); } .dd-cfoot p.dd-tx { font-size: 16px; line-height: 24px; color: var(--tx); } .dd-ckey { display: none; } @container (max-width: 520px) { .dd-noct { display: flex; flex-direction: column; gap: 16px; padding: 20px; height: auto; } .dd-noct > * { position: static; } .dd-noct__bar { justify-content: center; } .dd-noct__bar > span:not(.dd-noct__brand) { display: none; } .dd-noct .dd-noct__photo { position: relative; left: auto; top: auto; width: 100%; height: 220px; } .dd-noct__photo .a { left: 35%; } .dd-noct__photo .b { left: calc(35% + 35px); } .dd-noct__h { font-size: 56px; line-height: 56px; margin-top: 0; } .dd-noct__copy i, .dd-noct__cta, .dd-noct__season { display: none; } .dd-noct__verdict { text-align: left; } .dd-noct__v1, .dd-noct__v2 { font-size: 22px; line-height: 28px; letter-spacing: -0.02em; display: inline; } .dd-noct__v1 { margin-right: 6px; } .dd-noct__verdict .dd-m { display: block; } } /* ========================================================================== 01 · NOT (recap) ========================================================================== */ .dd-recap { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } .dd-recap ul { border-bottom: 1px solid var(--b1); } .dd-rc { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; border-top: 1px solid var(--b1); padding: 13px 0; align-items: baseline; text-decoration: none; color: var(--tx) !important; font-size: 19px; letter-spacing: -0.01em; } .dd-rc .dd-m { font-size: 11.5px; } .dd-rc:hover span:nth-child(2) { text-decoration: underline; text-underline-offset: 4px; } /* ========================================================================== 02 · BUILD opener + areas ========================================================================== */ .dd-opener { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; border-top: 2px solid var(--tx); padding-top: 24px; } .dd-opener__n { grid-column: span 2; font-size: 72px; line-height: 72px; font-weight: 500; letter-spacing: -0.05em; } .dd-opener__t { grid-column: span 6; } .dd-opener__t p { margin-top: 10px !important; font-size: 17px; color: var(--t2); } .dd-opener__k { grid-column: span 4; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .dd-opener__k .dd-kind { white-space: normal; } .dd-areas { margin-top: 40px; border: 1px solid var(--b1); } .dd-areas__h { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 16px; background: var(--c1); border-bottom: 1px solid var(--b1); } .dd-areas__t { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; } .dd-areas__t h3 { font-size: 18px; } .dd-atab { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; } .dd-atab td, .dd-atab th { text-align: left; font-weight: 400; padding: 10px 16px; border-top: 1px solid var(--b1); vertical-align: middle; } .dd-atab thead td, .dd-atab thead th { font: 400 11px/16px var(--mono); color: var(--t3); border-top: 0; padding-block: 8px; } .dd-atab tbody td:first-child { width: 40px; } .dd-atab th[scope="row"] { color: var(--tx); width: 140px; } .dd-post { display: block; color: var(--tx); } .dd-qual { display: block; } .dd-atab td:nth-child(4) { color: var(--t2); } .dd-atab td:nth-child(4) a { color: var(--t2); } .dd-ne th[scope="row"], .dd-ne .dd-post { color: var(--t3); } .dd-areas__f { display: block; padding: 12px 16px; border-top: 1px solid var(--b1); } /* ========================================================================== 02 · COLOR ========================================================================== */ #color .dd-sec-h pre { align-self: end; } #color .dd-span12 { margin-top: -8px; } .dd-tone { margin-top: 40px; } .dd-nest { grid-column: span 6; height: 470px; padding: 26px; border: 1px solid var(--b1); background: var(--c0); } .dd-lyr { position: relative; transition: outline-color 0.15s; outline: 2px dashed transparent; outline-offset: 3px; } .dd-lyr > .dd-lbl { position: absolute; left: 10px; top: 6px; } .dd-nest > .dd-lyr { height: 100%; background: #0B0C0E; border: 1px solid #1A1D21; padding: 26px; } .dd-nest .dd-lyr[data-l="1"] { height: 100%; background: #111316; padding: 26px; } .dd-nest .dd-lyr[data-l="2"] { height: 100%; background: #171A1E; padding: 28px 22px; } .dd-nest .dd-lyr[data-l="3"] { border: 1px solid #353B43; padding: 18px; display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .dd-nest .dd-lyr[data-l="3"] > .dd-lbl { position: static; margin-top: -4px; } .dd-nest .dd-lyr[data-l="4"] { font-size: 13.5px; color: #8B939E; } .dd-nest .dd-lyr[data-l="5"] { font-size: 20px; color: #E6E9ED; font-weight: 500; } .dd-lyr.is-hot { outline-color: var(--focus); } .dd-ladder { grid-column: span 6; display: flex; flex-direction: column; } .dd-lad { display: grid; grid-template-columns: 140px 1fr 80px; gap: 16px; align-items: center; min-height: 58px; padding: 0 14px; border: 0; border-top: 1px solid var(--b1); width: 100%; background: transparent; color: var(--tx); font: 500 14px var(--sans); text-align: left; } .dd-lad--h { min-height: 0; padding-bottom: 8px; border-top: 0; } .dd-lad[aria-pressed="true"] { background: var(--c2); box-shadow: inset 2px 0 0 var(--focus); } .dd-lad:focus-visible { outline-offset: -2px !important; } .dd-lad__bar { display: flex; align-items: center; gap: 10px; min-width: 0; } .dd-lad__bar > span:first-child { height: 18px; max-width: 58%; border: 1px solid #3A414A; display: block; flex-shrink: 0; } .dd-ladder__foot { display: block; margin-top: 12px; border-top: 1px solid var(--b1); padding-top: 12px; } .dd-docbox { margin-top: 20px; border: 1px solid var(--b1); padding: 16px; display: flex; flex-direction: column; gap: 8px; } .dd-docbox p { font-size: 14px; line-height: 21px; color: var(--t2); } .dd-stack { display: none; } .dd-semh { margin-top: 64px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .dd-semh h3 { font-size: 24px; } .dd-sems { margin-top: 16px; border: 1px solid var(--b1); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); } .dd-sems.is-gray { filter: grayscale(1); } .dd-sem { padding: 20px; border-right: 1px solid var(--b1); display: flex; flex-direction: column; gap: 14px; min-width: 0; } .dd-sem:last-child { border-right: 0; } .dd-sem__v { display: flex; align-items: center; gap: 8px; font-weight: 500; } .dd-sem__code { font-size: 11px; white-space: pre; } .dd-sem__focus { align-self: flex-start; height: 30px; padding: 0 12px; border: 1px solid var(--b2); border-radius: 4px; display: inline-flex; align-items: center; font-size: 13px; outline: 2px solid var(--focus); outline-offset: 2px; } .dd-semnote { margin-top: 12px !important; font-size: 14px; color: var(--t2); } .dd-accdata { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--b1); } .dd-accdata__c { padding: 20px; display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; align-items: center; min-width: 0; } .dd-accdata__c + .dd-accdata__c { border-left: 1px solid var(--b1); } .dd-accdata__c > div:first-child { display: flex; flex-direction: column; gap: 8px; } .dd-accdata__c h3 { font-size: 17px; } .dd-accdata__c p { font-size: 13.5px; line-height: 20px; color: var(--t2); } .dd-accent { border: 1px solid var(--b1); background: var(--c1); padding: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; } .dd-accent > i { display: block; height: 5px; width: 70%; background: var(--b2); } .dd-accent > i.s { width: 50%; } .dd-accent__btn { height: 26px; padding: 0 10px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 600; border-radius: 4px; display: inline-flex; align-items: center; } .dd-minichart { width: 100%; border: 1px solid var(--b1); background: var(--c1); } .dd-colfoot { margin-top: 10px; } .dd-colfoot__r { margin-left: auto; } .dd-avoid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .dd-avoid > div { border-top: 1px solid var(--b1); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; } .dd-avoid p { font-size: 14.5px; line-height: 22px; } .dd-avoid__rain { display: flex; gap: 4px; height: 20px; } .dd-avoid__rain i { flex-grow: 1; display: block; } .dd-avoid__rain i:nth-child(1) { background: #FF4FD8; } .dd-avoid__rain i:nth-child(2) { background: #22E3FF; } .dd-avoid__rain i:nth-child(3) { background: #FFE14D; } .dd-avoid__rain i:nth-child(4) { background: #7CFF4F; } .dd-avoid__rain i:nth-child(5) { background: #A36BFF; } .dd-avoid__neon { height: 20px; background: #000; display: flex; align-items: center; padding: 0 8px; } .dd-avoid__neon span { font-size: 11px; color: #39FF6A; text-shadow: 0 0 6px #39FF6A; } .dd-avoid__see { height: 20px; border: 1px dashed var(--b2); display: flex; align-items: center; padding: 0 8px; } /* ========================================================================== 02 · TYPOGRAPHY ========================================================================== */ .dd-type { margin-top: 32px; } .dd-tspec { grid-column: span 8; border: 1px solid var(--b1); background: var(--c1); min-height: 460px; display: flex; flex-direction: column; min-width: 0; } .dd-tspec.is-mono, .dd-tspec.is-mono * { font-family: var(--mono) !important; letter-spacing: 0 !important; } .dd-tspec__nav { min-height: 44px; border-bottom: 1px solid var(--b1); display: flex; align-items: center; gap: 22px; padding: 0 18px; font-size: 14px; color: var(--t2); flex-wrap: wrap; } .dd-tspec__nav b { color: var(--tx); font-weight: 600; } .dd-tspec__path { margin-left: auto; font-size: 12px; } .dd-tspec__body { padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; flex-grow: 1; } .dd-tspec__body h3 { font-size: 30px; letter-spacing: -0.02em; } .dd-tspec__body > p { font-size: 15px; line-height: 23px; max-width: 560px; } .dd-tspec__cmd { background: var(--c0); border: 1px solid var(--b1); padding: 12px 14px; font-size: 12.5px; } .dd-tspec__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--b1); border-bottom: 1px solid var(--b1); } .dd-tspec__meta > div { padding: 10px 0 10px 14px; } .dd-tspec__meta > div:first-child { padding-left: 0; } .dd-tspec__meta > div + div { border-left: 1px solid var(--b1); } .dd-tspec__meta .dd-m { font-size: 13px; margin-top: 4px; } .dd-tspec__act { display: flex; gap: 10px; align-items: center; margin-top: auto; flex-wrap: wrap; } .dd-tspec__p { height: 36px; padding: 0 14px; background: var(--tx); color: var(--c0); border-radius: 5px; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; } .dd-tspec__p .dd-m { font-size: 11px; opacity: 0.7; } .dd-tspec__s { height: 36px; padding: 0 14px; border: 1px solid var(--b2); border-radius: 5px; display: inline-flex; align-items: center; font-size: 14px; } .dd-type__side { grid-column: span 4; display: flex; flex-direction: column; gap: 16px; min-width: 0; } .dd-tnote { border: 1px solid var(--b1); padding: 18px; display: flex; flex-direction: column; gap: 10px; min-height: 180px; } .dd-tnote p { font-size: 20px; line-height: 27px; letter-spacing: -0.01em; } .dd-tpair { border: 1px solid var(--b1); padding: 18px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .dd-tpair__s { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; } .dd-tpair__m { font-size: 20px; } .dd-tpair p { font-size: 12.5px; line-height: 18px; color: var(--t3); margin-top: 6px !important; } .dd-tdocs { border: 1px solid var(--b1); padding: 14px 18px; display: flex; flex-direction: column; gap: 14px; } .dd-tdocs > div { display: flex; flex-direction: column; gap: 8px; } .dd-tdocs p { font-size: 13px; line-height: 19px; color: var(--t2); } .dd-resp { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--b1); } .dd-resp > div { padding: 20px 22px; min-width: 0; } .dd-resp > div + div { border-left: 1px solid var(--b1); } .dd-resp__h { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } .dd-resp__h h3 { font-size: 22px; } .dd-resp__l { margin-top: 14px; display: grid; grid-template-columns: 110px 1fr; row-gap: 10px; align-items: baseline; font-size: 15px; } .dd-resp__l.dd-m { font-size: 13.5px; } .dd-resp__hl { font-weight: 600; font-size: 18px; } /* ========================================================================== 02 · COMPOSITION ========================================================================== */ .dd-parts { margin-top: 22px; display: flex; gap: 6px; flex-wrap: wrap; } .dd-ab { min-height: 30px; padding: 0 10px; border: 1px solid var(--b2); background: transparent; color: var(--t2); border-radius: 4px; font: 500 12px var(--mono) !important; } .dd-ab[aria-pressed="true"] { border-color: var(--focus); color: var(--tx); background: rgba(138, 180, 255, 0.1); } .dd-anat { margin-top: 16px; border: 1px solid var(--b1); height: 600px; display: grid; grid-template-columns: 56px 220px minmax(0, 1fr) 300px; grid-template-rows: 40px 1fr 170px 28px; background: var(--c0); position: relative; min-width: 900px; } .dd-rg { position: relative; transition: box-shadow 0.15s, background-color 0.15s; } .dd-rg.is-hot { box-shadow: inset 0 0 0 2px var(--focus); background-color: rgba(138, 180, 255, 0.06); } .dd-pin { position: absolute; top: 6px; right: 6px; font: 600 10.5px var(--mono); background: var(--focus); color: var(--c0); padding: 0 6px; border-radius: 3px; display: none; z-index: 2; } .dd-rg.is-hot > .dd-pin { display: block; } .dd-an-nav { grid-row: 1 / span 3; border-right: 1px solid var(--b1); background: var(--c1); display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 14px; } .dd-an-nav i { display: block; width: 18px; height: 18px; } .dd-an-nav .a { border: 1.5px solid var(--t2); border-radius: 3px; } .dd-an-nav .b { border: 1.5px solid var(--t3); border-radius: 50%; } .dd-an-nav .c { height: 2px; background: var(--t3); } .dd-an-side { grid-row: 1 / span 3; border-right: 1px solid var(--b1); background: var(--c1); padding: 12px 0; font-size: 13px; color: var(--t2); } .dd-an-side > div { padding: 5px 14px; } .dd-an-side > .dd-lbl { padding: 0 14px 8px; } .dd-an-side > .dd-an-side__g { padding-top: 16px; } .dd-an-side .on { background: var(--c3); color: var(--tx); } .dd-an-tabs { border-bottom: 1px solid var(--b1); display: flex; font-size: 13px; } .dd-an-tabs > span:not(.dd-pin) { padding: 0 16px; display: flex; align-items: center; color: var(--t2); } .dd-an-tabs .on { color: var(--tx); box-shadow: inset 0 -2px 0 var(--tx); } .dd-an-meta { grid-row: 1 / span 3; grid-column: 4; border-left: 1px solid var(--b1); padding: 16px; display: flex; flex-direction: column; gap: 14px; background: var(--c1); } .dd-an-meta dl { display: grid; grid-template-columns: 90px 1fr; row-gap: 10px; font-size: 13px; } .dd-an-meta dd.dd-m { font-size: 12px; } .dd-an-data { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .dd-an-data__h { display: flex; align-items: baseline; gap: 12px; } .dd-an-data__h h4 { font-size: 20px; } .dd-an-rows { border: 1px solid var(--b1); } .dd-an-row { display: grid; grid-template-columns: 90px 1fr 80px 70px; padding: 8px 12px; font-size: 13px; border-bottom: 1px solid var(--b1); } .dd-an-row:last-child { border-bottom: 0; } .dd-an-row--h { padding-block: 7px; font-size: 11px; color: var(--t3); } .dd-an-row .dd-m { font-size: 12px; } .dd-an-logs { grid-column: 3; border-top: 1px solid var(--b1); background: #090A0C; padding: 10px 14px; overflow: hidden; } .dd-an-logs pre { font-size: 11.5px; line-height: 19px; } .dd-an-status { grid-column: 1 / span 4; border-top: 1px solid var(--b1); background: var(--c1); display: flex; align-items: center; gap: 20px; padding: 0 14px; font-size: 11px; color: var(--t3); } .dd-an-status .dd-pin { top: 4px; } .dd-an-pal { position: absolute; left: 42%; top: 110px; width: 380px; background: var(--c3); border: 1px solid var(--b2); border-radius: 6px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5); z-index: 1; } .dd-an-pal__q { height: 40px; display: flex; align-items: center; padding: 0 12px; border-bottom: 1px solid var(--b2); font-size: 13.5px; gap: 8px; } .dd-an-pal__o { height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font-size: 13px; color: var(--t2); } .dd-an-pal__o.on { background: #2A3038; color: var(--tx); } .dd-an-grid { position: absolute; inset: 0; padding: 0 24px; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; pointer-events: none; display: none; z-index: 3; } .dd-an-grid i { display: block; background: rgba(138, 180, 255, 0.07); border-left: 1px solid rgba(138, 180, 255, 0.35); border-right: 1px solid rgba(138, 180, 255, 0.35); } .dd-anat[data-dd-anat="grid"] .dd-an-grid { display: grid; } .dd-partnote { margin-top: 12px !important; font-size: 14px; color: var(--t2); } .dd-devices { margin-top: 20px; border-top: 1px solid var(--b1); padding-top: 14px; display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: baseline; } .dd-devices__l { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .dd-devices p { font-size: 15px; line-height: 24px; color: var(--t2); } .dd-geo { margin-top: 56px; } .dd-geo__ws { grid-column: span 5; display: flex; flex-direction: column; gap: 12px; } .dd-geo__r { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .dd-geo h3 { font-size: 22px; } .dd-geo p { font-size: 15px; line-height: 23px; color: var(--t2); } .dd-spacious { border: 1px solid var(--b1); min-height: 220px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; background: var(--c0); } .dd-spacious > span { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; max-width: 280px; line-height: 1.25; } .dd-spacious pre { border: 1px solid var(--b1); padding: 8px 12px; align-self: flex-start; font-size: 12px; } .dd-radii { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; } .dd-radii > div { display: flex; flex-direction: column; gap: 6px; } .dd-radii .r0, .dd-radii .r1, .dd-radii .r2 { height: 70px; border: 1px solid var(--b2); } .dd-radii .r1 { border-radius: 5px; } .dd-radii .r2 { border-radius: 14px; } .dd-radii .r3 { height: 70px; display: flex; align-items: center; } .dd-radii .r3 i { display: block; height: 34px; width: 100%; border: 1px solid var(--b2); border-radius: 17px; } .dd-correct { border: 1px dashed var(--b2); padding: 12px 14px; display: flex; gap: 12px; align-items: baseline; width: 100%; } .dd-correct p { font-size: 13.5px; line-height: 20px; } /* ========================================================================== 02 · IMAGERY ========================================================================== */ .dd-imgs { margin-top: 32px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); gap: 16px; } .dd-img { grid-column: span 2; border: 1px solid var(--b1); background: var(--c1); display: flex; flex-direction: column; overflow: hidden; min-width: 0; } .dd-img--w { grid-column: span 3; } .dd-img > svg { flex-grow: 1; width: 100%; height: auto; } .dd-img > .dd-scroll { flex-grow: 1; background: var(--c0); } .dd-img__code { padding: 14px; font-size: 11.5px; line-height: 19px; } .dd-img figcaption { min-height: 32px; border-top: 1px solid var(--b1); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; } .dd-fake { margin-top: 32px; align-items: stretch; } .dd-fake > div { grid-column: span 4; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .dd-fake__t h3 { font-size: 26px; letter-spacing: -0.02em; } .dd-fake__t p { font-size: 14.5px; line-height: 22px; color: var(--t2); } .dd-fake__bad { border: 1px dashed var(--b2); padding: 14px; } .dd-fake__good { border: 1px solid var(--b1); padding: 14px; } .dd-fake pre { font-size: 11.5px; } /* ========================================================================== 02 · COMPONENTS ========================================================================== */ .dd-comps { margin-top: 32px; border-top: 1px solid var(--b1); border-left: 1px solid var(--b1); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .dd-comp { padding: 22px; border-right: 1px solid var(--b1); border-bottom: 1px solid var(--b1); display: flex; flex-direction: column; gap: 16px; min-height: 330px; min-width: 0; } .dd-comp--2 { grid-column: span 2; } .dd-comp__h { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } .dd-comp__h h3 { font-size: 16px; } .dd-comp__f { font-size: 13px; line-height: 19px; color: var(--t2); margin-top: auto !important; } .dd-b { min-height: 34px; padding: 0 13px; border-radius: 5px; font: 500 13.5px var(--sans); display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; text-decoration: none; white-space: nowrap; } .dd-b--p { background: var(--tx); color: var(--c0) !important; font-weight: 600; } .dd-b--p:hover { background: #FFFFFF; } .dd-b--s { background: var(--c2); border-color: var(--b2); color: var(--tx) !important; } .dd-b--s:hover { border-color: var(--t3); } .dd-b--g { background: transparent; color: var(--t2) !important; } .dd-b--g:hover { color: var(--tx) !important; background: var(--c2); } .dd-b--i { width: 34px; padding: 0; justify-content: center; background: transparent; border-color: var(--b2); color: var(--t2); } .dd-b--hov { background: #FFFFFF; } .dd-b--foc { outline: 2px solid var(--focus); outline-offset: 2px; } .dd-b--dis { background: var(--c3); color: #8B939E; } .dd-b--xs { min-height: 24px; font-size: 12px; padding: 0 8px; } .dd-bstates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; margin-top: 4px; } .dd-st { font-family: var(--mono); font-size: 10.5px; color: var(--t3); margin-top: 6px; } .dd-field { display: flex; flex-direction: column; gap: 6px; } .dd-field label { font-size: 13px; color: var(--t2); } .dd-fld { min-height: 36px; border: 1px solid var(--b2); background: var(--c0); border-radius: 5px; padding: 0 11px; color: var(--tx); font: 400 14px var(--sans); width: 100%; } .dd-fld.dd-m { font-family: var(--mono); font-size: 13px; } .dd-fld::placeholder { color: var(--t3); } .dd-page main .dd-fld:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); } .dd-fld--foc { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); } .dd-fld--err { border-color: var(--err); } .dd-fld__e { font-size: 12.5px; color: var(--err); display: flex; gap: 6px; align-items: center; } .dd-tabs { display: flex; border-bottom: 1px solid var(--b1); } .dd-tabs button { min-height: 38px; padding: 0 12px; background: none; border: 0; color: var(--t2); font: 500 13.5px var(--sans); } .dd-tabs button[aria-selected="true"] { color: var(--tx); font-weight: 600; box-shadow: inset 0 -2px 0 var(--tx); } .dd-tabs button .dd-m { font-size: 11px; font-weight: 400; } .dd-range { display: flex; gap: 2px; padding: 3px; background: var(--c2); border: 1px solid var(--b1); border-radius: 5px; align-self: flex-start; } .dd-range span { height: 28px; padding: 0 10px; display: inline-flex; align-items: center; font-size: 12.5px; color: var(--t2); } .dd-range .on { background: var(--c0); border: 1px solid var(--b2); border-radius: 4px; color: var(--tx); } .dd-badges { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .dd-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 1px solid var(--b2); border-radius: 4px; font: 500 12px var(--sans); } .dd-badge svg { width: 11px; height: 11px; } .dd-badge__q { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; } .dd-rtab { width: 100%; min-width: 480px; border: 1px solid var(--b1); border-collapse: collapse; font-size: 13.5px; } .dd-rtab th, .dd-rtab td { text-align: left; font-weight: 400; padding: 10px 12px; border-bottom: 1px solid var(--b1); } .dd-rtab thead td, .dd-rtab thead th { font: 400 11px var(--mono); color: var(--t3); padding-block: 7px; } .dd-rtab tbody td:first-child { width: 28px; } .dd-rtab .dd-m { font-size: 12.5px; } .dd-rtab--hov { background: var(--c2); } .dd-rtab--sel { background: #1C2230; box-shadow: inset 2px 0 0 var(--focus); } .dd-rtab tbody tr:last-child > * { border-bottom: 0; } .dd-cb { width: 14px; height: 14px; border: 1px solid var(--b2); border-radius: 3px; display: flex; align-items: center; justify-content: center; } .dd-cb.on { border-color: var(--focus); background: var(--focus); color: var(--c0); } .dd-cb svg { width: 9px; height: 9px; } .dd-cblock { border: 1px solid var(--b1); background: var(--c0); min-width: 0; } .dd-cblock__h { height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0 6px 0 12px; border-bottom: 1px solid var(--b1); font-size: 11.5px; } .dd-cblock pre { padding: 10px 12px; font-size: 11px; line-height: 18px; } .dd-navs { display: flex; flex-direction: column; gap: 10px; } .dd-navs__top { min-height: 34px; border: 1px solid var(--b1); display: flex; align-items: center; gap: 14px; padding: 0 10px; font-size: 12.5px; color: var(--t2); } .dd-navs__top b { color: var(--tx); font-weight: 600; } .dd-navs__top .dd-kbd { margin-left: auto; } .dd-navs__side { border: 1px solid var(--b1); display: flex; flex-direction: column; font-size: 12.5px; color: var(--t2); padding: 4px 0; } .dd-navs__side > * { padding: 4px 10px; } .dd-navs__side .on { background: var(--c3); color: var(--tx); box-shadow: inset 2px 0 0 var(--tx); } .dd-cmds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .dd-cmd { border: 1px solid var(--b2); border-radius: 6px; background: var(--c3); overflow: hidden; min-width: 0; } .dd-cmd__q { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-bottom: 1px solid var(--b2); font-size: 13px; } .dd-caret { display: block; width: 1px; height: 14px; background: var(--tx); } .dd-cmd__g { display: block; padding: 8px 10px 4px; } .dd-cmd__o { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 10px; font-size: 12.5px; } .dd-cmd__o.on { background: #2A3038; } .dd-cmd__o b { font-weight: 600; } .dd-cmd__none { padding: 10px; font-size: 12.5px; color: var(--t2); line-height: 18px; } .dd-cmd .dd-cmd__g:last-child { padding: 0 10px 10px; } .dd-panel { border: 1px solid var(--b1); background: var(--c1); } .dd-panel__h { min-height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid var(--b1); font-size: 14px; } .dd-panel__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .dd-panel__g > div { padding: 14px; } .dd-panel__g > div + div { border-left: 1px solid var(--b1); } .dd-panel__g .dd-m { font-size: 20px; margin-top: 4px; } .dd-reflex { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; } .dd-reflex__card { height: 64px; border-radius: 16px; background: #1E1B2E; box-shadow: 0 0 30px rgba(140, 90, 255, 0.3); border: 1px solid #3B2F66; } .dd-reflex p { font-size: 12.5px; line-height: 18px; color: var(--t2); } /* ========================================================================== 02 · MOTION ========================================================================== */ .dd-pipe { margin-top: 32px; border: 1px solid var(--b1); } .dd-pipe__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--b1); background: var(--c1); font-size: 14px; } .dd-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .dd-stage { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-right: 1px solid var(--b1); transition: background-color 0.18s ease; } .dd-stage:last-child { border-right: 0; } .dd-stage.is-on { background: var(--c2); } .dd-stage__h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; } .dd-stage__w { font-size: 11.5px; color: var(--t3); font-weight: 400; } .dd-pg { height: 3px; background: var(--b1); position: relative; overflow: hidden; } .dd-pg i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--tx); display: block; transition: width 0.9s linear; } .dd-pipe__log { padding: 10px 14px; border-top: 1px solid var(--b1); font-size: 12px; color: var(--t2); background: var(--c0); } .dd-benchh { margin-top: 24px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .dd-benchh h3 { font-size: 20px; } .dd-benches { margin-top: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--b1); border-right: 0; } .dd-bench { padding: 18px; border-right: 1px solid var(--b1); display: flex; flex-direction: column; gap: 12px; min-height: 250px; min-width: 0; } .dd-bench > p { font-size: 12.5px; line-height: 18px; color: var(--t2); margin-top: auto !important; } .dd-selrs { border: 1px solid var(--b1); } .dd-selr { display: block; min-height: 34px; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--b1); color: var(--t2); font: 500 13px var(--sans) !important; padding: 0 10px; transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out, color 0.15s; } .dd-selr:last-child { border-bottom: 0; } .dd-selr[aria-pressed="true"] { background: var(--c3); color: var(--tx); box-shadow: inset 2px 0 0 var(--tx); } .dd-selr:focus-visible { outline-offset: -2px !important; } .dd-pop { border: 1px solid var(--b2); border-radius: 6px; background: var(--c3); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(-6px); transition: opacity 0.16s ease-out, transform 0.16s ease-out; visibility: hidden; } .dd-pop.is-open { opacity: 1; transform: none; visibility: visible; } .dd-pop__q { height: 34px; display: flex; align-items: center; padding: 0 10px; border-bottom: 1px solid var(--b2); font-size: 12.5px; color: var(--t3); } .dd-pop__o { height: 30px; display: flex; align-items: center; padding: 0 10px; font-size: 12.5px; background: #2A3038; } .dd-navt { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--b1); } .dd-navt button { min-height: 36px; background: none; border: 0; color: var(--t2); font: 500 13px var(--sans); } .dd-navt button[aria-pressed="true"] { color: var(--tx); } .dd-navt__ind { position: absolute; bottom: -1px; left: 0; height: 2px; width: 33.333%; background: var(--tx); display: block; transition: left 0.2s ease-out; } .dd-dchg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--b1); } .dd-dchg > div { padding: 10px; } .dd-dchg > div + div { border-left: 1px solid var(--b1); transition: background-color 0.6s ease-out; } .dd-dchg > div.is-hi { background: rgba(242, 184, 114, 0.18); transition: none; } .dd-dchg .dd-m { font-size: 18px; margin-top: 2px; } .dd-mtab { margin-top: 36px; width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 22px; min-width: 640px; } .dd-mtab th, .dd-mtab td { text-align: left; font-weight: 400; padding: 16px 24px 16px 0; border-top: 1px solid var(--b1); vertical-align: top; } .dd-mtab tbody tr:last-child > * { border-bottom: 1px solid var(--b1); } .dd-mtab thead th { font: 400 11px/16px var(--mono); color: var(--t3); vertical-align: middle; } .dd-mtab thead th:first-child { color: var(--tx); } .dd-mtab tbody th { width: 160px; } .dd-mtab tbody td { color: var(--t2); } .dd-motfoot { margin-top: 14px !important; font-size: 14px; color: var(--t3); } /* ========================================================================== 02 · ACCESSIBILITY ========================================================================== */ .dd-accs { margin-top: 32px; border: 1px solid var(--b1); border-right: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .dd-acc2 { display: flex; flex-direction: column; border-right: 1px solid var(--b1); min-width: 0; } .dd-acc2__x { padding: 18px; min-height: 150px; display: flex; flex-direction: column; gap: 10px; } .dd-acc2__x + .dd-acc2__x { border-top: 1px solid var(--b1); } .dd-acc2__s { background: var(--c1); padding: 12px; font-size: 14px; } .dd-acc2__b { background: var(--c0); padding: 10px; } .dd-acc2__b div { height: 44px; } .dd-acc2__b .bad { background: #0F1012; } .dd-acc2__b .good { background: var(--c2); border: 1px solid var(--b2); } .dd-acc2__f { padding: 12px; background: var(--c1); } .dd-acc2__f span { height: 32px; padding: 0 12px; border-radius: 4px; display: inline-flex; align-items: center; font-size: 13px; } .dd-acc2__f .bad { border: 1px solid #22262B; background: #14161A; } .dd-acc2__f .good { border: 1px solid var(--b2); outline: 2px solid var(--focus); outline-offset: 2px; } .dd-acc2__br { padding: 10px 12px; font-size: 22px; } .dd-acc2__br.bad { background: #000; font-weight: 700; color: #FFFFFF; text-shadow: 0 0 1px #fff; } .dd-acc2__br.good { background: var(--c0); font-weight: 600; color: var(--tx); } .dd-arules { margin-top: 32px; } .dd-arules__l { grid-column: span 6; } .dd-arules__l > .dd-marks { margin-bottom: 8px; } .dd-arules__l li { border-top: 1px solid var(--b1); padding: 12px 0; font-size: 16px; } .dd-arules__l li:last-child { border-bottom: 1px solid var(--b1); } .dd-arules__l li a { color: var(--t2); } .dd-arules__r { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 12px; } .dd-arules__d { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 14px; color: var(--t2); } /* ========================================================================== 02 · TRANSLATION ========================================================================== */ .dd-tr { margin-top: 32px; } .dd-tr__brief { grid-column: span 6; border: 1px solid var(--b1); background: var(--c1); } .dd-tr__brief pre { padding: 18px 20px; font-size: 12.5px; line-height: 23px; } .dd-tr__r { grid-column: 8 / span 5; display: flex; flex-direction: column; justify-content: center; gap: 28px; } .dd-tr__a, .dd-tr__b { font-size: 34px; line-height: 40px; letter-spacing: -0.025em; } .dd-tr__a { color: var(--t3); } /* ========================================================================== 03 · SOURCES ========================================================================== */ .dd-opener__k.dd-m { display: block; } .dd-coverage { margin-top: 32px; } .dd-coverage__t { grid-column: span 5; display: flex; flex-direction: column; gap: 10px; } .dd-coverage__t h3 { font-size: 22px; } .dd-coverage__t p { font-size: 15px; line-height: 23px; } .dd-coverage__n { grid-column: 7 / span 6; } .dd-srows { margin-top: 40px; border-top: 1px solid var(--b1); } .dd-srow { display: grid; grid-template-columns: 50px 300px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--b1); } /* Documents research attached after the record file: closed by default (Fidelity/QA S4). */ .dd-found > summary { list-style: none; cursor: pointer; padding: 14px 0; min-height: 24px; border-bottom: 1px solid var(--b1); color: var(--t2); } .dd-found > summary::-webkit-details-marker { display: none; } .dd-found > summary .dd-lbl::before { content: "+ "; } .dd-found[open] > summary .dd-lbl::before { content: "− "; } .dd-found > summary:hover .dd-lbl, .dd-found[open] > summary .dd-lbl { color: var(--tx); } .dd-found > summary:focus-visible { outline: 2px solid var(--focus, #8AB4FF); outline-offset: 2px; } .dd-srow h3 { font-size: 17px; } .dd-claims { display: flex; flex-direction: column; } .dd-cl { display: grid; grid-template-columns: 190px 1fr 150px; gap: 14px; padding: 6px 0; border-top: 1px dotted var(--b1); font-size: 13.5px; line-height: 20px; color: var(--t2); } .dd-cl:first-child { border-top: 0; } .dd-cl .dd-m { font-size: 11.5px; color: var(--tx); overflow-wrap: anywhere; } .dd-cl .dd-lbl a { color: var(--t3); } .dd-basisg { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .dd-basisg > div { border-top: 1px solid var(--b1); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .dd-basisg p { font-size: 14px; line-height: 21px; color: var(--t2); } .dd-open { margin-top: 32px; border: 1px dashed var(--b2); padding: 18px 20px; display: grid; grid-template-columns: 200px 1fr; gap: 20px; } .dd-open > div { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 21px; color: var(--t2); } .dd-srcfoot { display: block; margin-top: 16px; } .dd-srcfoot a { color: var(--t2); } /* ---- horizontal scroll with edge fade; never wrap code ---- */ .dd-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* ========================================================================== TABLET — 768 to 1199 ========================================================================== */ @media (max-width: 1199px) { .dd-page main { --pad: 32px; } .dd-big { font-size: 44px; line-height: 48px; } .dd-big--72, .dd-opener__n { font-size: 56px; line-height: 56px; } .dd-big__mono { font-size: 34px; } .dd-ws__body { grid-template-columns: minmax(0, 1fr); } .dd-insp { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--b1); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .dd-pane--log { border-left: 1px solid var(--b1); } .dd-pane--log .dd-insp__h { border-top: 0; } .dd-doc { padding: 40px 32px 32px; } .dd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dd-facts > div:nth-child(3) { padding-left: 0; border-left: 0; } .dd-sec-h > [class*="dd-span"], .dd-grid > * { grid-column: 1 / -1 !important; } .dd-filters, .dd-picks, .dd-right { justify-content: flex-start; } .dd-def__big { font-size: 32px; line-height: 38px; } .dd-test__l, .dd-test__q { grid-column: 1 / -1; } .dd-sig { grid-template-columns: 200px minmax(0, 1fr); } .dd-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dd-layers { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } .dd-mis__black, .dd-mis__l1 .dd-neon, .dd-mis__ne, .dd-mis__dd { font-size: 88px; line-height: 92px; } .dd-proofs { grid-template-columns: 1fr; } .dd-pair { grid-template-columns: 1fr; gap: 8px; } .dd-pair__line { font-size: 24px; line-height: 32px; } /* the boundaries matrix scrolls, the Developer Dark column pinned */ .dd-matrix { grid-template-columns: repeat(5, 220px); width: max-content; } .dd-bcol--me { position: sticky; left: 0; z-index: 1; } .dd-quad { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 40px 520px 380px; } .dd-recap { grid-template-columns: 1fr; } .dd-recap ul + ul { border-top: 0; } .dd-opener__n { grid-column: span 3; } .dd-opener__t { grid-column: span 9; } .dd-opener__k { grid-column: 1 / -1; } .dd-sems { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dd-sem:nth-child(3n) { border-right: 0; } .dd-sem:nth-child(-n+3) { border-bottom: 1px solid var(--b1); } .dd-accdata { grid-template-columns: 1fr; } .dd-accdata__c + .dd-accdata__c { border-left: 0; border-top: 1px solid var(--b1); } .dd-avoid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dd-imgs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dd-img, .dd-img--w { grid-column: span 1; } .dd-img--w { grid-column: 1 / -1; } .dd-comps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dd-benches { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dd-bench { border-bottom: 1px solid var(--b1); } .dd-accs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dd-acc2 { border-bottom: 1px solid var(--b1); } .dd-srow { grid-template-columns: 40px minmax(0, 1fr); } .dd-srow .dd-claims { grid-column: 2; } .dd-basisg { grid-template-columns: 1fr; } /* fade on the edge of anything that scrolls sideways */ .dd-scroll { mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } .dd-scroll.is-end { mask-image: none; -webkit-mask-image: none; } } /* ========================================================================== MOBILE — under 768. The Mobile board's re-composition. ========================================================================== */ @media (max-width: 767px) { .dd-page main { --pad: 20px; } .dd-desk { display: none !important; } .dd-js .dd-mob { display: flex !important; } .dd-big { font-size: 34px; line-height: 38px; } .dd-big--72, .dd-opener__n { font-size: 44px; line-height: 44px; } .dd-big__mono { font-size: 22px; } .dd-sec { padding-bottom: 72px; } .dd-lbl { font-size: 11.5px; } .dd-code { font-size: 12px !important; } .dd-sec-h, .dd-grid { gap: 16px; } /* hero: three panes become one pane with tabs */ .dd-hero { padding-top: 16px; padding-bottom: 48px; } .dd-ws { min-height: 0; } .dd-ws__tabs { display: none; } .dd-js .dd-ws__mtabs { display: flex; } .dd-ptab { flex: 1; min-height: 44px; background: var(--c1); border: 0; border-right: 1px solid var(--b1); border-bottom: 1px solid var(--b1); color: var(--t3); font: 500 12px var(--mono) !important; } .dd-ptab:last-child { border-right: 0; } .dd-ptab[aria-pressed="true"] { background: var(--c0); color: var(--tx); box-shadow: inset 0 2px 0 var(--t2); border-bottom-color: var(--c0); } .dd-ws__body { display: block; } .dd-insp { display: block; border-top: 0; } .dd-insp__h { display: none; } .dd-js .dd-ws__body[data-dd-show="doc"] .dd-insp, .dd-js .dd-ws__body[data-dd-show="code"] .dd-pane--doc, .dd-js .dd-ws__body[data-dd-show="code"] .dd-pane--log, .dd-js .dd-ws__body[data-dd-show="log"] .dd-pane--doc, .dd-js .dd-ws__body[data-dd-show="log"] .dd-pane--code { display: none; } .dd-pane--log { border-left: 0; } .dd-code--ts, .dd-code--log { padding: 16px 20px; min-height: 0; } .dd-doc { padding: 24px 20px; gap: 24px; } .dd-h1 { font-size: min(56px, calc((100cqi - 40px) / 4.5)); line-height: 0.96; letter-spacing: -0.04em; } .dd-doc__sub { font-size: 20px; line-height: 26px; } .dd-doc__lede { font-size: 15.5px; line-height: 23px; } .dd-sb { column-gap: 14px; padding: 8px 12px; } .dd-sb__ev { margin-left: 0; } .dd-hero__foot { flex-direction: column-reverse; align-items: stretch; gap: 12px; } .dd-jump-btn { min-height: 48px; justify-content: center; font-size: 14px; } .dd-sticky { left: 12px; right: 12px; bottom: calc(12px + var(--dd-lift, 0px)); justify-content: space-between; } .dd-sticky .dd-sbtn { min-height: 44px; } .dd-pal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; } .dd-pal__o { min-height: 48px; } .dd-pal__esc { min-height: 44px; min-width: 44px; } /* definition: one specimen at a time + the switch */ .dd-def { margin-top: 24px; } .dd-def__big { font-size: 26px; line-height: 32px; } .dd-cmp { margin-top: 40px; } .dd-cmp__h { flex-direction: column; align-items: stretch; } .dd-ab button { flex: 1; min-height: 44px; } .dd-cmp__pair { grid-template-columns: 1fr; } .dd-cmp__col + .dd-cmp__col { border-left: 0; } .dd-js .dd-cmp__pair[data-dd-specs="a"] [data-dd-spec-col="b"], .dd-js .dd-cmp__pair[data-dd-specs="b"] [data-dd-spec-col="a"] { display: none; } .dd-cmp__col { padding: 16px; } .dd-spec { height: auto; min-height: 300px; } .dd-sa__art { width: 88px; height: 88px; } .dd-sa__title { font-size: 22px; } .dd-sa__play { display: none; } .dd-trow { grid-template-columns: 20px 1fr 44px; padding: 0 16px; } .dd-trow > span:nth-child(3) { display: none; } .dd-switch { margin: 0 16px 12px; } .dd-test { padding: 24px 16px; gap: 12px; } .dd-test__q { font-size: 20px; line-height: 27px; } .dd-cmp__defs { grid-template-columns: 1fr; } .dd-cmp__defs > div + div { border-left: 0; border-top: 1px solid var(--b1); } .dd-prov { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* signals: an accordion per level, Necessary open */ .dd-filters { display: none; } .dd-sig { display: block; } .dd-js .dd-lvl { display: none; } .dd-js .dd-acc { display: grid; width: 100%; min-height: 60px; grid-template-columns: 1fr auto; align-items: center; gap: 10px; background: transparent; border: 0; color: var(--tx); padding: 0; text-align: left; font: 600 17px var(--sans) !important; } .dd-acc__n { display: flex; flex-direction: column; gap: 6px; } .dd-acc .dd-bars i { width: 12px; height: 5px; } .dd-acc__c { font-size: 12px; color: var(--t3); } .dd-sig--optional .dd-acc { color: var(--t2) !important; } .dd-sig--unreliable .dd-acc { color: var(--t3) !important; } .dd-js .dd-sig__body.is-closed { display: none; } .dd-cells { grid-template-columns: 1fr; margin: 0 0 20px; border: 0; } .dd-scell { border: 0; border-top: 1px solid var(--b1); padding: 14px 0; } .dd-chips { padding: 0 0 20px; gap: 8px; } .dd-chip { font-size: 13.5px; padding: 6px 10px; } .dd-axes { grid-template-columns: 1fr; } .dd-layers { grid-template-columns: 1fr; } .dd-emerge { grid-template-columns: 1fr; gap: 12px; padding: 18px; } .dd-emerge p { font-size: 17px; line-height: 25px; } .dd-cov { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dd-cov__c:nth-child(2) { border-right: 0; } .dd-cov__c:nth-child(-n+2) { border-bottom: 1px solid var(--b1); } .dd-mis__black, .dd-mis__l1 .dd-neon { font-size: 52px; line-height: 58px; } .dd-mis__black { padding: 0 10px; } .dd-mis__l1 { gap: 12px; flex-direction: column; align-items: flex-start; } .dd-mis__ne { font-size: 52px; line-height: 52px; } .dd-mis__dd { font-size: 44px; line-height: 48px; } .dd-mis__l2 { flex-direction: column; gap: 6px; } .dd-mis__lede { font-size: 16px; line-height: 24px; } .dd-pa { height: 380px; padding: 22px; } .dd-pa__h { font-size: 34px; line-height: 38px; } .dd-pb { height: auto; grid-template-columns: 1fr; } .dd-pb__nav { display: none; } .dd-pb__main { padding: 18px; } .dd-pb__main h3 { font-size: 24px; } .dd-pverdict { grid-template-columns: 1fr; } .dd-proof__h .dd-btn { min-height: 44px; } /* boundaries: one pair at a time, from a "vs X" picker */ .dd-picks { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); } .dd-pick { min-height: 44px; } .dd-js .dd-matrix, .dd-js .dd-scroll--pin:has(.dd-matrix) { display: none; } .dd-js .dd-mpair { margin-top: 20px; display: grid !important; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--b1); border-bottom: 1px solid var(--b1); } .dd-mpair > div { padding: 16px 12px 16px 0; display: flex; flex-direction: column; gap: 6px; } .dd-mpair > div + div { border-left: 1px solid var(--b1); padding-left: 12px; } .dd-mpair p { font-size: 15px; line-height: 21px; } /* counterexample: Nocturne hero cell + a tappable 2x2 key */ .dd-js .dd-ckey { display: block !important; margin-top: 16px; } .dd-ckey__g { display: grid; grid-template-columns: 52px 1fr 1fr; border: 1px solid var(--b1); } .dd-ckey__g > * { min-height: 44px; display: flex; align-items: center; padding: 0 10px; border-bottom: 1px solid var(--b1); } .dd-ckey__g > :nth-last-child(-n+3) { border-bottom: 0; } .dd-ckey__g button { background: transparent; border: 0; border-left: 1px solid var(--b1); color: var(--t2); font: 500 13px var(--sans); text-align: left; } .dd-ckey__g button[aria-pressed="true"] { background: var(--c2); color: var(--tx); box-shadow: inset 0 0 0 1px var(--t3); } .dd-quad { display: block; margin-top: 16px; border-top: 0; } .dd-quad__ax, .dd-quad__v, .dd-quad > div:first-child { display: none; } .dd-qc { border: 1px solid var(--b1); margin: 0 var(--pad) 16px; } .dd-js .dd-quad[data-dd-quad="dd"] .dd-qc:not(.dd-qc--dd), .dd-js .dd-quad[data-dd-quad="noct"] .dd-qc:not(.dd-qc--noct), .dd-js .dd-quad[data-dd-quad="docs"] .dd-qc:not(.dd-qc--docs), .dd-js .dd-quad[data-dd-quad="none"] .dd-qc:not(.dd-qc--none) { display: none; } .dd-qc--noct { margin-inline: 0; border-inline: 0; } .dd-qc--dd, .dd-qc--docs, .dd-qc--none { padding: 16px; } .dd-qdd, .dd-qdocs { grid-template-columns: 1fr; } .dd-qdd__side, .dd-qdocs__side { display: none; } .dd-qc--none { min-height: 180px; } .dd-qc__v { flex-wrap: wrap; } .dd-cfoot > div { grid-column: 1 / -1; } .dd-rc { font-size: 17px; grid-template-columns: 34px 1fr; } .dd-rc .dd-lbl { grid-column: 2; } .dd-opener { gap: 12px; } .dd-opener__n { grid-column: 1 / -1; } .dd-opener__t { grid-column: 1 / -1; } .dd-areas__h { padding: 12px; } /* colour: the ladder is a literal vertical stack */ .dd-ladder, .dd-nest { grid-column: 1 / -1; } .dd-stack.dd-mob, .dd-js .dd-stack.dd-mob { display: block !important; margin-inline: calc(var(--pad) * -1); } .dd-stack li { min-height: 64px; display: flex; justify-content: space-between; align-items: center; padding: 0 var(--pad); font-size: 15px; } .dd-stack li.dd-stack--txt { background: var(--c0) !important; } .dd-sems { grid-template-columns: 1fr 1fr; } .dd-sem, .dd-sem:nth-child(3n) { border-right: 1px solid var(--b1); border-bottom: 1px solid var(--b1); } .dd-sem:nth-child(2n) { border-right: 0; } .dd-sem:nth-last-child(-n+2) { border-bottom: 0; } .dd-sem { padding: 16px; } .dd-semh .dd-seg, .dd-right .dd-seg { width: 100%; } .dd-semh .dd-seg button, .dd-right .dd-seg button { flex: 1; min-height: 44px; } .dd-accdata__c { grid-template-columns: 1fr; } .dd-avoid { grid-template-columns: 1fr; } .dd-colfoot__r { margin-left: 0; } .dd-tspec { min-height: 0; } .dd-tspec__body { padding: 20px 16px; } .dd-tspec__body h3 { font-size: 24px; } .dd-tspec__meta { grid-template-columns: 1fr; } .dd-tspec__meta > div, .dd-tspec__meta > div:first-child { padding: 8px 0; border-left: 0 !important; } .dd-tspec__meta > div + div { border-top: 1px solid var(--b1); } .dd-tspec__path { display: none; } .dd-tnote { min-height: 0; } .dd-tnote p { font-size: 17px; line-height: 24px; } .dd-resp { grid-template-columns: 1fr; } .dd-resp > div + div { border-left: 0; border-top: 1px solid var(--b1); } .dd-resp__l { grid-template-columns: 90px 1fr; } .dd-parts { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); } .dd-ab { min-height: 44px; white-space: nowrap; } .dd-devices { grid-template-columns: 1fr; } .dd-radii { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dd-correct { flex-direction: column; gap: 8px; } .dd-imgs { grid-template-columns: 1fr; } .dd-img, .dd-img--w { grid-column: 1 / -1; } .dd-comps { grid-template-columns: 1fr; } .dd-comp, .dd-comp--2 { grid-column: 1 / -1; min-height: 0; } .dd-cmds { grid-template-columns: 1fr; } .dd-b { min-height: 44px; } .dd-b--xs { min-height: 44px; } .dd-swatch { width: 64px; height: 44px; border-radius: 22px; } .dd-swatch span { width: 36px; height: 36px; top: 3px; left: 3px; } .dd-sw[aria-pressed="true"] span { left: 23px; } .dd-tabs button, .dd-navt button { min-height: 44px; } .dd-reflex { grid-template-columns: 1fr; } .dd-panel__g .dd-m { font-size: 16px; } .dd-stages { grid-template-columns: 1fr 1fr; } .dd-stage:nth-child(2) { border-right: 0; } .dd-stage:nth-child(-n+2) { border-bottom: 1px solid var(--b1); } .dd-benches { grid-template-columns: 1fr; } .dd-bench { min-height: 0; } .dd-selr { min-height: 44px; } .dd-accs { grid-template-columns: 1fr; } .dd-tr__a, .dd-tr__b { font-size: 24px; line-height: 30px; } .dd-srow { grid-template-columns: 1fr; gap: 10px; } .dd-srow .dd-claims { grid-column: 1; } .dd-srow > .dd-m { display: none; } .dd-cl { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; } .dd-open { grid-template-columns: 1fr; gap: 10px; } /* tables and wide specimens scroll sideways, first column pinned */ .dd-scroll--pin th[scope="row"], .dd-scroll--pin thead th:first-child, .dd-scroll--pin tbody td:first-child { position: sticky; left: 0; background: var(--c0); z-index: 1; } .dd-atab tbody td:first-child { display: none; } .dd-atab thead td:first-child { display: none; } .dd-atab th[scope="row"] { background: var(--c0); } } /* ---- reduced motion: every transition instant; words, glyphs, highlights still change ---- */ @media (prefers-reduced-motion: reduce) { .dd-page main *, .dd-page main *::before, .dd-page main *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }