/* gangway kit: the Chart design system as artifacts. Paper and ink, rules do the structural work, the neatline is the only card, serif titles, condensed caps labels, mono data (ADR-0033). */ @font-face { font-family: "IBM Plex Sans Condensed"; font-weight: 400; font-display: swap; src: url(fonts/sans-400.woff2) format("woff2"); } @font-face { font-family: "IBM Plex Sans Condensed"; font-weight: 500; font-display: swap; src: url(fonts/sans-500.woff2) format("woff2"); } @font-face { font-family: "IBM Plex Sans Condensed"; font-weight: 600; font-display: swap; src: url(fonts/sans-600.woff2) format("woff2"); } @font-face { font-family: "IBM Plex Serif"; font-weight: 400; font-display: swap; src: url(fonts/serif-400.woff2) format("woff2"); } @font-face { font-family: "IBM Plex Serif"; font-weight: 400; font-style: italic; font-display: swap; src: url(fonts/serif-400-italic.woff2) format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(fonts/mono-400.woff2) format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url(fonts/mono-600.woff2) format("woff2"); } /* Tokens: the design system's, light by default; dark by data-theme on . A theme (/_gangway/theme.css) overrides them; an accent swaps the flag colour. */ :root { color-scheme: light; --paper: oklch(0.97 0.012 85); --paper-raised: oklch(0.99 0.006 85); --ink: oklch(0.27 0.06 255); --ink-muted: oklch(0.48 0.04 255); --rule: oklch(0.84 0.025 240); --primary: oklch(0.33 0.09 255); --on-primary: oklch(0.97 0.012 85); --flag: oklch(0.84 0.15 88); --on-flag: oklch(0.25 0.05 255); --awake: oklch(0.58 0.13 155); --danger: oklch(0.55 0.19 28); --warn: oklch(0.55 0.13 70); --header-bg: oklch(0.27 0.07 255); --header-fg: oklch(0.97 0.012 85); --header-muted: oklch(0.76 0.035 250); --header-rule: oklch(0.42 0.06 255); --log-bg: oklch(0.22 0.05 255); --log-fg: oklch(0.94 0.015 85); --desk: #dcdad4; --s1: oklch(0.33 0.09 255); --s2: oklch(0.78 0.15 80); --s3: oklch(0.55 0.19 28); --s4: oklch(0.58 0.13 155); --s5: oklch(0.62 0.09 220); --s6: oklch(0.52 0.11 300); --font-serif: "IBM Plex Serif", Georgia, serif; --font-sans: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --font-display: var(--font-serif); /* Shape and layout: a theme's style (shared/src/artifact/theme.ts) sets these. */ --radius: 0px; --radius-sm: 0px; --stroke: 1px; --stroke-n: 1; --space: 1; --text: 16px; --h-scale: 1; } :root[data-theme="dark"] { color-scheme: dark; --paper: oklch(0.2 0.035 255); --paper-raised: oklch(0.25 0.04 255); --ink: oklch(0.94 0.015 85); --ink-muted: oklch(0.72 0.03 250); --rule: oklch(0.36 0.04 250); --primary: oklch(0.84 0.15 88); --on-primary: oklch(0.22 0.05 255); --awake: oklch(0.75 0.14 155); --danger: oklch(0.62 0.18 28); --warn: oklch(0.8 0.13 75); --header-bg: oklch(0.15 0.03 255); --header-fg: oklch(0.94 0.015 85); --header-muted: oklch(0.72 0.03 250); --header-rule: oklch(0.32 0.04 255); --log-bg: oklch(0.14 0.03 255); --desk: oklch(0.12 0.02 255); --s1: oklch(0.8 0.07 245); --s2: oklch(0.84 0.15 88); --s3: oklch(0.66 0.18 28); --s4: oklch(0.75 0.14 155); --s5: oklch(0.78 0.09 215); --s6: oklch(0.72 0.11 300); } :root[data-accent="red"] { --flag: oklch(0.62 0.19 28); --on-flag: oklch(0.98 0.01 85); } :root[data-accent="teal"] { --flag: oklch(0.72 0.12 185); --on-flag: oklch(0.22 0.05 255); } :root[data-accent="blue"] { --flag: oklch(0.62 0.14 250); --on-flag: oklch(0.98 0.01 85); } :root[data-accent="green"] { --flag: oklch(0.72 0.15 150); --on-flag: oklch(0.22 0.05 255); } /* Derived, and the names older artifacts and legacy.css use. */ :root { --flag-wash: color-mix(in oklch, var(--flag) 22%, transparent); --neatline: inset 0 0 0 var(--stroke) var(--stroke-ink, var(--ink)), inset 0 0 0 calc(var(--stroke) + 3px) var(--paper), inset 0 0 0 calc(2 * var(--stroke) + 3px) var(--stroke-ink, var(--ink)); --neatline-soft: inset 0 0 0 var(--stroke) var(--stroke-ink, var(--ink)), inset 0 0 0 calc(var(--stroke) + 3px) var(--paper), inset 0 0 0 calc(2 * var(--stroke) + 3px) var(--rule); --hairline: inset 0 0 0 var(--stroke) var(--rule); --card-edge: var(--neatline-soft); --sheet: var(--paper-raised); --muted: var(--ink-muted); --grid: var(--rule); --grid-fine: color-mix(in oklch, var(--rule) 45%, transparent); --navy: var(--header-bg); --navy-fg: var(--header-fg); --flag-fg: var(--on-flag); --primary-fg: var(--on-primary); --ok: var(--awake); --sans: var(--font-sans); --serif: var(--font-serif); --mono: var(--font-mono); } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; } body { min-height: 100vh; color: var(--ink); background: var(--paper); font: var(--text) / 1.55 var(--font-sans); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: underline; text-decoration-color: var(--flag); text-decoration-thickness: 2px; text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--flag); outline-offset: 2px; } :is(gw-doc, gw-deck, gw-canvas, gw-dashboard, gw-prototype, gw-section, gw-card, gw-stat) { display: block; } :is(gw-chart, gw-flow, gw-callout, gw-grid, gw-columns, gw-facts, gw-screen, gw-slide, gw-frame) { display: block; } gw-flag { display: inline-flex; } /* Type: italic serif for titles, condensed caps for labels, mono for data. */ .gw-caps, gw-stat [data-part="label"], th, gw-facts dt { font: 600 11px/1.3 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } .gw-meta { font: 12px var(--font-mono); color: var(--ink-muted); } h1, h2, h3 { margin: 0; font-family: var(--font-title, var(--font-serif)); font-style: var(--title-style, italic); font-weight: var(--title-weight, 400); text-transform: var(--title-case, none); letter-spacing: var(--title-track, normal); text-wrap: balance; } /* A theme's logo: nothing until a theme sets --logo and its width. */ .gw-logo { display: block; flex: none; width: var(--logo-w, 0); height: 28px; margin-right: var(--logo-gap, 0); background: var(--logo, none) no-repeat left center / contain; } h1 { font-size: clamp(calc(40px * var(--h-scale)), 6vw, calc(60px * var(--h-scale))); line-height: 1.02; letter-spacing: var(--title-track, -0.01em); } h2 { font-size: calc(26px * var(--h-scale)); line-height: 1.15; } h3 { font-size: calc(20px * var(--h-scale)); line-height: 1.2; } h4 { margin: 1.2em 0 0.4em; font: 600 11px/1.3 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } p { margin: 0 0 0.85em; text-wrap: pretty; } ul, ol { margin: 0 0 0.85em; padding-left: 1.3em; } li { margin: 0.25em 0; } ul li::marker { content: "■ "; font-size: 0.6em; color: var(--flag); } ol li::marker { font: 600 0.8em var(--font-mono); color: var(--ink-muted); } strong { font-weight: 600; } code { font: 0.86em var(--font-mono); padding: 1px 5px; background: var(--paper-raised); border-radius: var(--radius-sm); box-shadow: var(--hairline); } pre { margin: 0 0 1em; padding: 16px 18px; overflow-x: auto; border-radius: var(--radius); color: var(--log-fg); background: var(--log-bg); font: 13px/1.65 var(--font-mono); } pre code { padding: 0; color: inherit; background: none; box-shadow: none; } blockquote { margin: 12px 0 1em; padding: 2px 0 2px 22px; border-left: 1px solid var(--ink); font: italic 400 24px/1.32 var(--font-serif); } blockquote p:last-child { margin: 0; } /* A quote's last paragraph, after the words, is who said it. */ blockquote > p + p:last-child { margin-top: 14px; font: 600 12px var(--font-sans); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } blockquote :is(cite, footer) { display: block; margin-top: 10px; font: 600 11px var(--font-sans); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } hr { margin: 28px 0; border: 0; border-top: 1px dotted var(--rule); } img { display: block; max-width: 100%; } /* The neatline: 1px ink, 3px paper, 1px ink, drawn inset. The only card. */ .gw-sheet, gw-card, .gw-panel { background: var(--paper); border-radius: var(--radius); box-shadow: var(--card-edge); } /* Title block: a caps label and mono metadata, the italic serif title, an upright serif intro, closed by a 1px ink rule. */ .gw-title { display: grid; gap: calc(12px * var(--space)); padding-bottom: calc(22px * var(--space)); margin-bottom: calc(36px * var(--space)); border-bottom: 1px solid var(--ink); } .gw-title-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; } .gw-title-top > :first-child { display: flex; align-items: center; } .gw-title-top .gw-caps { display: inline-flex; align-items: center; gap: 8px; } .gw-title-top .gw-caps::before { content: ""; width: 10px; height: 10px; background: var(--flag); } .gw-subtitle { max-width: 60ch; margin: 0; font: 400 18px/1.45 var(--font-serif); color: var(--ink-muted); } /* Document: a page of sections, each with its number and title above the content, closed by a dotted rule. layout="aside" puts the number and title in a 200px column beside it instead. */ gw-doc { max-width: 860px; margin: 0 auto; padding: calc(56px * var(--space)) calc(48px * var(--space)) calc(96px * var(--space)); counter-reset: gw-part; } gw-doc > .gw-lead { margin-bottom: calc(36px * var(--space)); } gw-doc > .gw-lead > * + * { margin-top: calc(20px * var(--space)); } gw-doc > .gw-lead > p { max-width: 68ch; font: 400 18px/1.55 var(--font-serif); } .gw-part { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(16px * var(--space)); padding: calc(28px * var(--space)) 0 calc(32px * var(--space)); border-top: 1px dotted var(--rule); } .gw-part:first-of-type { border-top: 0; padding-top: 4px; } .gw-part > .gw-part-head { display: flex; align-items: baseline; gap: 14px; counter-increment: gw-part; } .gw-part > .gw-part-head::before { content: counter(gw-part, decimal-leading-zero); font: 600 12px var(--font-mono); color: var(--ink-muted); } .gw-part > .gw-part-head h2 { font-size: calc(28px * var(--h-scale)); } .gw-part > .gw-part-body { min-width: 0; } .gw-part-body > :is(p, ul, ol, blockquote) { max-width: 68ch; } .gw-part-body > :is( gw-grid, gw-chart, gw-flow, table, gw-callout, gw-card, gw-columns, pre, gw-image, gw-facts ) { margin: calc(20px * var(--space)) 0; } .gw-part-body > :first-child { margin-top: 0; } .gw-part-body > :last-child { margin-bottom: 0; } .gw-part-body h3 { margin: 24px 0 8px; } gw-doc[layout="aside"] { max-width: 1080px; } gw-doc[layout="aside"] .gw-part { grid-template-columns: 200px minmax(0, 1fr); gap: calc(32px * var(--space)); } gw-doc[layout="aside"] .gw-part > .gw-part-head { flex-direction: column; align-items: stretch; gap: 8px; } gw-doc[layout="aside"] .gw-part > .gw-part-head h2 { font-size: calc(24px * var(--h-scale)); } /* A section with a chart too wide for its column puts its title above, as in the default. */ gw-doc[layout="aside"] .gw-part:has(> .gw-part-body > gw-flow.wide) { grid-template-columns: minmax(0, 1fr); gap: 12px; } gw-doc > footer { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--ink); } /* Grids and columns */ gw-grid { display: grid; gap: calc(16px * var(--space)); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } gw-grid > [span="2"] { grid-column: span 2; } gw-grid > [span="3"] { grid-column: span 3; } gw-grid > :is([span="4"], [span="full"]) { grid-column: 1 / -1; } gw-columns { display: grid; gap: calc(40px * var(--space)); grid-template-columns: 1fr 1fr; align-items: start; } gw-columns > div > :last-child { margin-bottom: 0; } /* Section and card */ gw-section { margin: calc(32px * var(--space)) 0; } gw-section > .gw-section-head { display: grid; gap: 6px; padding-bottom: calc(14px * var(--space)); margin-bottom: calc(18px * var(--space)); border-bottom: 1px solid var(--ink); } gw-card { padding: calc(22px * var(--space)) calc(24px * var(--space)) calc(20px * var(--space)); } gw-card > .gw-caps { display: block; margin-bottom: 8px; } gw-card > h3 { margin-bottom: 10px; } gw-card > :last-child { margin-bottom: 0; } gw-card > :is(gw-chart, gw-stat) { padding: 0; box-shadow: none; } /* Stat: a caps label, the number, the change in mono. A row of them is one neatline band with hairlines between. */ gw-stat { display: grid; gap: 6px; align-content: start; padding: calc(18px * var(--space)) calc(22px * var(--space)) calc(16px * var(--space)); border-radius: var(--radius); box-shadow: var(--card-edge); } gw-grid:has(> gw-stat) { gap: 0; border-radius: var(--radius); box-shadow: var(--card-edge); } gw-grid > gw-stat { position: relative; box-shadow: none; } /* The hairline between two tiles stops short of the neatline around the band. */ gw-grid > gw-stat + gw-stat::before { content: ""; position: absolute; inset: 14px auto 14px 0; border-left: 1px solid var(--rule); } gw-stat [data-part="row"] { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; } gw-stat [data-part="value"] { font: 600 40px/1 var(--font-sans); letter-spacing: -0.01em; } gw-stat [data-part="foot"] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: 14px; } gw-stat [data-part="delta"] { font: 600 12px var(--font-mono); } gw-stat [data-part="delta"].good { color: var(--awake); } gw-stat [data-part="delta"].bad { color: var(--danger); } gw-stat [data-part="note"] { color: var(--ink-muted); } gw-stat svg { overflow: visible; color: var(--flag); } gw-stat svg.spark path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; } gw-stat svg.spark circle { fill: currentColor; } /* Flag: a coloured square and the word, never colour alone. */ gw-flag { align-items: center; gap: 7px; font: 600 11px/1.3 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; vertical-align: 0.1em; } gw-flag::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--tone, var(--ink-muted)); } [tone="ok"] { --tone: var(--awake); } [tone="warn"] { --tone: var(--warn); } [tone="danger"] { --tone: var(--danger); } [tone="flag"] { --tone: var(--flag); } /* Callout: the notice, a washed panel with a 3px bar on the left. */ gw-callout { padding: calc(16px * var(--space)) calc(20px * var(--space)) calc(16px * var(--space)) calc(22px * var(--space)); border-radius: var(--radius); background: color-mix(in oklch, var(--tone, var(--flag)) 15%, transparent); box-shadow: inset 3px 0 0 var(--tone, var(--flag)); } gw-callout > [data-part="title"] { display: block; margin-bottom: 6px; font: 500 16px var(--font-sans); } gw-callout > :last-child { margin-bottom: 0; } /* Facts: name, a dotted leader, the value in mono. */ gw-facts { display: grid; gap: 8px; } gw-facts > div { display: flex; align-items: baseline; gap: 8px; } gw-facts dt { display: flex; flex: 1; align-items: baseline; gap: 8px; white-space: nowrap; } gw-facts dt::after { content: ""; flex: 1; border-bottom: 1px dotted var(--rule); transform: translateY(-4px); } gw-facts dd { margin: 0; font: 13px var(--font-mono); } gw-facts[total] > div:last-child { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--ink); } gw-facts[total] > div:last-child dd { font-size: 16px; font-weight: 600; } /* Tables: an ink rule under the head, hairlines between rows, numbers in mono. */ table { width: 100%; border-collapse: collapse; font-size: 15px; } th { padding: 8px 14px 8px 0; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--ink); } td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; } :is(td, th):last-child { padding-right: 0; } :is(td, th):is(.num, [align="right"]) { text-align: right; } td:is(.num, [align="right"]) { font: 13px var(--font-mono); } /* Image, steps and a note: pieces any artifact can hold. */ gw-image { display: grid; place-items: end start; width: 100%; overflow: hidden; background: linear-gradient( to top right, transparent calc(50% - 0.5px), var(--rule) 50%, transparent calc(50% + 0.5px) ), var(--paper-raised); border-radius: var(--radius); box-shadow: var(--hairline); } gw-image > span { margin: 10px 12px; font: 12px var(--font-mono); color: var(--ink-muted); } gw-image:has(> img) { background: none; } gw-image > img { place-self: stretch; width: 100%; height: 100%; object-fit: cover; } gw-steps { display: flex; gap: 8px; } gw-steps > span { flex: 1; font: 600 11px var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); } gw-steps > span::before { content: ""; display: block; height: 3px; margin-bottom: 6px; background: var(--rule); } gw-steps > span:has(~ [aria-current])::before, gw-steps > [aria-current]::before { background: var(--flag); } gw-steps > [aria-current] { color: var(--ink); } gw-note { display: block; padding: 10px 14px; font-size: 14px; border-radius: var(--radius-sm); background: var(--flag-wash); box-shadow: inset 0 0 0 1px var(--flag); } gw-note > :last-child { margin-bottom: 0; } /* Flowcharts */ gw-flow { min-width: 0; } gw-flow > [data-part="title"] { display: block; margin-bottom: 10px; } gw-flow [data-part="plot"] { overflow-x: auto; } gw-flow svg { display: block; height: auto; margin: 0 auto; overflow: visible; } gw-flow .shape { fill: var(--node-fill, var(--sheet)); stroke: var(--stroke-ink, var(--ink)); stroke-width: calc(1.5 * var(--stroke-n)); transition: fill 0.2s, stroke-width 0.2s; } gw-flow .label { font: 600 13px var(--sans); fill: var(--node-ink, var(--ink)); text-anchor: middle; dominant-baseline: central; pointer-events: none; } gw-flow .node.stadium .shape, gw-flow .node.circle .shape { fill: var(--navy); stroke: var(--navy); } gw-flow .node.stadium .label, gw-flow .node.circle .label { fill: var(--navy-fg); } :root[data-theme="dark"] gw-flow .node.stadium .shape, :root[data-theme="dark"] gw-flow .node.circle .shape { fill: var(--sheet); stroke: var(--ink); } :root[data-theme="dark"] gw-flow .node.stadium .label, :root[data-theme="dark"] gw-flow .node.circle .label { fill: var(--ink); } gw-flow .node.tone-flag .shape { fill: var(--flag); stroke: var(--ink); } gw-flow .node.tone-flag .label { fill: var(--flag-fg); } gw-flow .node.tone-ok .shape { fill: color-mix(in srgb, var(--ok) 16%, var(--sheet)); stroke: var(--ok); } gw-flow .node.tone-warn .shape { fill: color-mix(in srgb, var(--warn) 18%, var(--sheet)); stroke: var(--warn); } gw-flow .node.tone-danger .shape { fill: color-mix(in srgb, var(--danger) 14%, var(--sheet)); stroke: var(--danger); } gw-flow .node.tone-ok .label, gw-flow .node.tone-warn .label, gw-flow .node.tone-danger .label { fill: var(--ink); } gw-flow .node.tone-muted .shape { fill: var(--sheet); stroke: var(--rule); stroke-dasharray: 4 3; } gw-flow .node.tone-muted .label { fill: var(--muted); } gw-flow .node { outline: none; opacity: 0; transform: scale(0.94); transition: opacity 0.35s ease var(--d, 0ms), transform 0.35s ease var(--d, 0ms); } gw-flow.drawn .node { opacity: 1; transform: none; } gw-flow .node.acts { cursor: pointer; } gw-flow .node:focus-visible .shape { stroke: var(--primary); stroke-width: calc(3 * var(--stroke-n)); } gw-flow .has-note { fill: var(--primary); } gw-flow .edge .line { stroke: var(--ink); stroke-width: calc(1.5 * var(--stroke-n)); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.55s ease calc(var(--d, 0ms) + 80ms); } gw-flow .edge.thick .line { stroke-width: calc(3 * var(--stroke-n)); } gw-flow .edge.dotted .line { stroke-dasharray: 4 4; stroke-dashoffset: 0; opacity: 0; transition: opacity 0.4s ease var(--d, 0ms); } gw-flow.drawn .edge .line { stroke-dashoffset: 0; opacity: 1; } gw-flow .arrowhead { fill: var(--ink); } gw-flow .elabel { opacity: 0; transition: opacity 0.3s ease calc(var(--d, 0ms) + 400ms); } gw-flow.drawn .elabel { opacity: 1; } gw-flow .elabel rect { fill: var(--sheet); } gw-flow .elabel text { font: 12px var(--mono); fill: var(--muted); text-anchor: middle; dominant-baseline: central; } /* A box's detail lines, under its name */ gw-flow .label .detail { font: 400 12px var(--sans); fill: var(--node-muted, var(--muted)); } gw-flow .label .code { font: 400 11px var(--mono); fill: var(--muted); } gw-flow .node.stadium .label :is(.detail, .code), gw-flow .node.circle .label :is(.detail, .code), gw-flow .node.tone-flag .label :is(.detail, .code) { fill: inherit; opacity: 0.75; } /* Tones for lines, groups and the legend */ gw-flow .tone-flag { --tone: var(--flag); } gw-flow .tone-ok { --tone: var(--ok); } gw-flow .tone-warn { --tone: var(--warn); } gw-flow .tone-danger { --tone: var(--danger); } gw-flow .tone-muted { --tone: var(--muted); } gw-flow .edge[class*="tone-"] .line, gw-flow .key[class*="tone-"] .line { stroke: var(--tone); } gw-flow .arrowhead[class*="tone-"] { fill: var(--tone); } gw-flow .edge[class*="tone-"] .elabel text { fill: var(--tone); } /* Subgraphs: a ruled box with its name in caps */ gw-flow .group { opacity: 0; transition: opacity 0.4s ease; } gw-flow.drawn .group { opacity: 1; } gw-flow .gshape { fill: color-mix(in srgb, var(--ink) 3%, transparent); stroke: var(--rule); stroke-width: 1; } gw-flow .group[class*="tone-"] .gshape { fill: color-mix(in srgb, var(--tone) 7%, transparent); stroke: var(--tone); } gw-flow .group.tone-muted .gshape { stroke-dasharray: 4 3; } gw-flow .glabel { font: 600 11px var(--sans); letter-spacing: 0.08em; fill: var(--muted); dominant-baseline: central; } gw-flow .group[class*="tone-"] .glabel { fill: var(--tone); } gw-flow .group.tone-flag .glabel { fill: var(--ink); } /* The key under a chart */ gw-flow [data-part="legend"] { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px; font: 12px var(--sans); color: var(--muted); } gw-flow .key { display: inline-flex; align-items: center; gap: 8px; } gw-flow .key .line { stroke: var(--ink); stroke-width: 1.5; } gw-flow .key.dotted .line { stroke-dasharray: 4 3; } gw-flow .key.thick .line { stroke-width: 3; } gw-flow.flowing .edge .line { stroke-dasharray: 7 5; animation: gw-flow-march 0.9s linear infinite; transition: none; } @keyframes gw-flow-march { to { stroke-dashoffset: -12; } } gw-flow svg.focus .node:not(.hot), gw-flow svg.focus .edge:not(.hot) { opacity: 0.25; } gw-flow .node.hot .shape, gw-flow .edge.hot .line { stroke-width: 2.5; } gw-flow svg.playing .node:not(.seen), gw-flow svg.playing .edge:not(.seen) { opacity: 0.22; } gw-flow .node.current .shape { fill: var(--flag); stroke: var(--ink); stroke-width: 2.5; } gw-flow .node.current .label { fill: var(--flag-fg); } gw-flow .runner { fill: var(--flag); stroke: var(--ink); stroke-width: 1.5; } gw-flow [data-part="controls"] { display: flex; align-items: center; gap: 8px; margin-top: 10px; } gw-flow [data-part="controls"] button { font: 600 12px var(--mono); padding: 4px 10px; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); cursor: pointer; } gw-flow [data-part="note"] { margin-top: 10px; padding: 8px 12px; font-size: 14px; box-shadow: inset 3px 0 0 var(--primary); background: var(--paper); } gw-flow [data-part="caption"] { margin: 8px 0 0; font-size: 13px; color: var(--muted); } @media (prefers-reduced-motion: reduce) { gw-flow .node, gw-flow .edge .line, gw-flow .elabel { transition: none !important; animation: none !important; } } /* Charts: no frame; a caps title, a mono legend, hairline gridlines on an ink baseline. */ gw-chart { min-width: 0; } gw-chart > [data-part="title"] { display: block; margin-bottom: 10px; } gw-chart [data-part="plot"] { position: relative; } gw-chart .legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 10px; padding: 0; list-style: none; font: 12px var(--font-mono); color: var(--ink-muted); } gw-chart .legend li { display: inline-flex; align-items: center; gap: 6px; margin: 0; } gw-chart .legend li::marker { content: none; } gw-chart .key { width: 10px; height: 10px; } gw-chart svg { display: block; overflow: visible; } gw-chart .axis text { font: 11px var(--font-mono); fill: var(--ink-muted); } gw-chart .grid { stroke: var(--rule); stroke-dasharray: 1 3; } gw-chart .base { stroke: var(--ink); } gw-chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } gw-chart .area { opacity: 0.16; } gw-chart .dot { stroke: var(--paper); stroke-width: 2; } gw-chart .end { font: 600 11px var(--font-mono); fill: var(--ink); } gw-chart .mark:hover { filter: brightness(1.12); } gw-chart .tip { position: absolute; padding: 6px 9px; pointer-events: none; white-space: nowrap; font: 12px var(--font-mono); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--ink); transform: translate(-50%, -110%); } gw-chart .tip b { font-weight: 600; } gw-chart [data-part="caption"] { margin: 10px 0 0; font-size: 13px; color: var(--ink-muted); } gw-chart .error { font: 13px var(--font-mono); color: var(--danger); } gw-chart .donut { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; } gw-chart .donut .legend { display: grid; gap: 8px; } gw-chart .total { font: 600 22px var(--font-sans); fill: var(--ink); } /* Deck: 1280x720 slides on the navy table, scaled to fit. Paper slides carry a neatline; title, section and end slides are navy. The look (ADR-0039) only arranges them: classic rules the title off at the top, sidebar sets it in a column, poster centres it. */ gw-deck { --hero-bg: var(--header-bg); --hero-fg: var(--header-fg); --hero-muted: var(--header-muted); --hero-rule: var(--header-rule); --hero-mark: var(--flag); /* The accent as text on paper: dark enough to read in light, bright enough in dark. */ --flag-text: oklch(from var(--flag) min(l, 0.5) c h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 100vh; min-height: 100dvh; } :root[data-theme="dark"] gw-deck { /* Navy on a dark deck is no contrast; the hero slides lift and take the accent's tint. */ --hero-bg: color-mix(in oklch, var(--flag) 16%, var(--paper-raised)); --hero-fg: var(--ink); --hero-muted: var(--ink-muted); --hero-rule: color-mix(in oklch, var(--flag) 30%, var(--rule)); --flag-text: oklch(from var(--flag) max(l, 0.78) c h); } body:has(gw-deck) { background: var(--header-bg); } @media screen { body:has(gw-deck) { overflow: hidden; } } gw-deck > [data-part="stage"] { position: relative; /* The slides lay out at 1280px and are scaled down; clipped, so the page never widens. */ overflow: clip; } gw-deck > [data-part="stage"] > [data-part="canvas"] { position: relative; width: 1280px; height: 720px; transform-origin: 0 0; } /* Before an export: every slide laid out off to the side, unseen, so its charts can draw. */ @media screen { gw-deck.gw-laying-out gw-slide:not(.on) { display: flex; flex-direction: column; position: absolute; top: 0; left: -20000px; visibility: hidden; } } gw-slide { cursor: pointer; } gw-slide { --slide-pad-x: 96px; display: none; position: relative; width: 1280px; height: 720px; padding: 80px var(--slide-pad-x) 104px; overflow: hidden; border-radius: var(--radius); background: var(--paper); font-size: 26px; line-height: 1.4; } gw-slide.on { display: flex; flex-direction: column; } gw-slide::before { content: ""; position: absolute; inset: 24px; pointer-events: none; border-radius: var(--radius); box-shadow: var(--card-edge); } gw-slide > .gw-slide-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(24px * var(--space)); } gw-slide > .gw-slide-foot { position: absolute; left: var(--slide-pad-x); right: var(--slide-pad-x); bottom: 48px; display: flex; justify-content: space-between; align-items: baseline; } gw-slide > .gw-slide-foot .gw-caps { font-size: 12px; } gw-slide > .gw-slide-foot .gw-meta { font-size: 13px; } gw-slide > .gw-slide-foot > :first-child { display: flex; align-items: center; } gw-slide > .gw-slide-foot .gw-logo { height: 22px; } /* How far through the deck: a line along the bottom of the frame. */ gw-slide > .gw-slide-progress { position: absolute; left: 24px; bottom: 24px; width: calc((100% - 48px) * var(--progress, 0)); height: 4px; background: var(--hero-mark); } gw-slide h1 { font-size: calc(88px * var(--h-scale)); line-height: 1; } gw-slide h2 { font-size: calc(52px * var(--h-scale)); line-height: 1.06; } gw-slide h3 { font-size: calc(32px * var(--h-scale)); } gw-slide :is(p, li) { margin-bottom: 0.4em; font-size: 26px; line-height: 1.4; } gw-slide ul, gw-slide ol { margin-bottom: 0; } gw-slide .gw-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: -8px; font-size: 14px; color: var(--flag-text); } gw-slide .gw-kicker::before { content: ""; width: 10px; height: 10px; background: var(--flag); } /* A content slide's title sits at the top on an ink rule, the accent marking its start. */ gw-slide:is( :not([layout]), [layout="split"], [layout="agenda"], [layout="stats"], [layout="compare"], [layout="steps"], [layout="cards"] ) > .gw-slide-body { justify-content: flex-start; } gw-slide:is( :not([layout]), [layout="split"], [layout="agenda"], [layout="stats"], [layout="compare"], [layout="steps"], [layout="cards"] ) > .gw-slide-body > h2:is(:first-child, .gw-kicker + h2) { padding-bottom: 20px; margin-bottom: 12px; border-bottom: 1px solid var(--ink); background: linear-gradient(var(--flag), var(--flag)) left bottom / 96px 5px no-repeat; } gw-slide:not([layout]) > .gw-slide-body > :is(gw-chart, gw-grid, table, gw-columns, gw-flow) { margin-top: 8px; } gw-slide gw-stat [data-part="value"] { font-size: 56px; } gw-slide gw-stat [data-part="label"] { font-size: 13px; } gw-slide gw-callout { padding: 24px 30px 24px 34px; font-size: 26px; } gw-slide gw-callout > [data-part="title"] { margin-bottom: 8px; font: var(--title-style, italic) var(--title-weight, 400) 34px/1.15 var(--font-title, var(--font-serif)); } gw-slide gw-chart :is(.axis text, .legend, .end) { font-size: 15px; } gw-slide gw-facts { gap: 14px; } gw-slide gw-facts dt { font-size: 14px; } gw-slide gw-facts dd { font: 24px var(--font-sans); } gw-slide table { font-size: 22px; } gw-slide th { font-size: 13px; } gw-slide td { padding-block: 16px; } gw-slide td:is(.num, [align="right"]) { font-size: 19px; } gw-slide gw-flag { font-size: 14px; } gw-slide gw-flag::before { width: 12px; height: 12px; } gw-slide gw-columns { gap: 64px; align-items: center; } gw-slide blockquote { font-size: 34px; } gw-slide pre { margin: 0; padding: 32px 36px; font-size: 22px; line-height: 1.6; box-shadow: inset 6px 0 0 var(--flag); } /* Hero slides: the title, a section divider, the end. */ gw-slide:is([layout="title"], [layout="section"], [layout="end"]) { --ink: var(--hero-fg); --ink-muted: var(--hero-muted); --rule: var(--hero-rule); --paper: var(--hero-bg); --flag-text: var(--hero-mark); color: var(--ink); background: var(--hero-bg); } gw-slide:is([layout="title"], [layout="section"], [layout="end"])::before::before { box-shadow: inset 0 0 0 var(--stroke) var(--rule); } gw-slide[layout="title"] > .gw-slide-body { justify-content: flex-end; gap: 28px; padding-bottom: 40px; } gw-slide[layout="title"] h1 { max-width: 17ch; font-size: calc(96px * var(--h-scale)); } gw-slide[layout="title"] h1 + p, gw-slide[layout="end"] h1 + p { max-width: 36ch; font: 400 30px/1.35 var(--font-serif); color: var(--ink-muted); } gw-slide[layout="title"] > .gw-slide-body::before { content: ""; width: 96px; height: 6px; background: var(--hero-mark); } /* The title slide names the deck at the top, and has no page number or progress. */ gw-slide[layout="title"] > .gw-slide-foot { top: 64px; bottom: auto; } gw-slide[layout="title"] > .gw-slide-foot .gw-meta, gw-slide[layout="title"] > .gw-slide-progress { display: none; } gw-slide[layout="section"] > .gw-slide-body { gap: 20px; } gw-slide[layout="section"] > .gw-slide-body::before { content: attr(data-n); font: 600 120px/1 var(--font-mono); letter-spacing: -0.04em; color: var(--hero-mark); } gw-slide[layout="section"] :is(h1, h2) { max-width: 18ch; font-size: calc(80px * var(--h-scale)); line-height: 1.02; } gw-slide[layout="section"] .gw-slide-body .gw-caps { font-size: 15px; color: var(--hero-mark); } gw-slide[layout="end"] > .gw-slide-body { align-items: flex-start; } gw-slide[layout="end"] h1 { font-size: calc(88px * var(--h-scale)); } gw-slide[layout="end"] gw-facts { min-width: 560px; margin-top: 12px; } /* A statement: one sentence, set large. */ gw-slide[layout="statement"] :is(.gw-slide-body:not(.gw-sided), .gw-slide-main) > :first-child { max-width: 24ch; font: var(--title-style, italic) var(--title-weight, 400) calc(64px * var(--h-scale)) / 1.12 var(--font-title, var(--font-serif)); letter-spacing: var(--title-track, normal); text-wrap: balance; } gw-slide[layout="statement"] :is(.gw-slide-body:not(.gw-sided), .gw-slide-main) > :first-child ~ * { max-width: 48ch; color: var(--ink-muted); } gw-slide[layout="statement"] > .gw-slide-body:not(.gw-sided)::before { content: ""; width: 64px; height: 6px; background: var(--hero-mark); } /* One number. */ gw-slide[layout="big"] > .gw-slide-body { align-items: center; text-align: center; } gw-slide[layout="big"] > .gw-slide-body > h2 { font-size: calc(40px * var(--h-scale)); color: var(--ink-muted); } gw-slide[layout="big"] gw-stat { justify-items: center; box-shadow: none; } gw-slide[layout="big"] gw-stat [data-part="value"] { font-size: 200px; letter-spacing: -0.04em; text-decoration: underline var(--flag) 10px; text-underline-offset: 18px; } gw-slide[layout="big"] gw-stat [data-part="label"] { font-size: 16px; } gw-slide[layout="big"] gw-stat [data-part="foot"] { justify-content: center; margin-top: 24px; font-size: 24px; } gw-slide[layout="big"] gw-stat [data-part="delta"] { font-size: 20px; } /* A quote, under a large opening mark in the accent. */ gw-slide[layout="quote"] > .gw-slide-body { gap: 0; } gw-slide[layout="quote"] > .gw-slide-body::before { content: "\201C"; height: 110px; margin-left: -8px; font: 400 240px/1 var(--font-serif); color: var(--flag-text); } gw-slide[layout="quote"] blockquote { max-width: 30ch; margin: 0; padding: 0; border: 0; } gw-slide[layout="quote"] blockquote > p:first-child { font-size: 52px; line-height: 1.16; } gw-slide[layout="quote"] blockquote :is(cite, footer), gw-slide[layout="quote"] blockquote > p + p:last-child { margin-top: 32px; font-size: 16px; } /* Two halves: words on one side, a chart, an image or a list on the other. */ gw-slide[layout="split"] :is(.gw-slide-body, .gw-slide-main) > gw-columns { flex: 1; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } /* An agenda: a numbered index, in two columns past six. */ gw-slide[layout="agenda"] ol { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 6), auto); max-width: 900px; column-gap: 64px; align-content: start; padding: 0; list-style: none; counter-reset: agenda; } gw-slide[layout="agenda"] ol:has(> li:nth-child(7)) { --rows: 5; max-width: none; } gw-slide[layout="agenda"] li { display: flex; align-items: baseline; gap: 28px; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--rule); font: var(--title-style, italic) var(--title-weight, 400) calc(34px * var(--h-scale)) / 1.2 var(--font-title, var(--font-serif)); counter-increment: agenda; } gw-slide[layout="agenda"] li::before { content: counter(agenda, decimal-leading-zero); flex: none; width: 44px; font: 600 22px var(--font-mono); font-style: normal; color: var(--flag-text); } /* A row of numbers at slide scale. */ gw-slide[layout="stats"] :is(.gw-slide-body, .gw-slide-main) > gw-grid { margin-block: auto; } gw-slide[layout="stats"] gw-stat { gap: 12px; padding: calc(40px * var(--space)) calc(36px * var(--space)); } gw-slide[layout="stats"] gw-stat [data-part="value"] { font-size: 80px; letter-spacing: -0.03em; } gw-slide[layout="stats"] gw-stat [data-part="label"] { font-size: 15px; } gw-slide[layout="stats"] gw-stat [data-part="foot"] { font-size: 20px; } gw-slide[layout="stats"] gw-stat [data-part="delta"] { font-size: 17px; } /* Before and after: two panels, the second washed in the accent. */ gw-slide[layout="compare"] :is(.gw-slide-body, .gw-slide-main) > gw-columns { flex: 1; gap: 32px; align-items: stretch; } gw-slide[layout="compare"] gw-columns > div { padding: calc(32px * var(--space)) calc(36px * var(--space)); border-radius: var(--radius); box-shadow: var(--hairline); } gw-slide[layout="compare"] gw-columns > div + div { background: color-mix(in oklch, var(--flag) 14%, var(--paper)); box-shadow: inset 0 6px 0 var(--flag); } gw-slide[layout="compare"] gw-columns h3 { margin-bottom: 16px; font: 600 15px var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } gw-slide[layout="compare"] gw-columns > div + div h3 { color: var(--flag-text); } gw-slide[layout="compare"] gw-columns li { font-size: 24px; } /* Steps: a numbered row joined by a rule. */ gw-slide[layout="steps"] ol { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 36px; margin-block: auto; padding: 0; list-style: none; counter-reset: step; } gw-slide[layout="steps"] li { position: relative; margin: 0; padding-top: 88px; font-size: 22px; counter-increment: step; } gw-slide[layout="steps"] li::before { content: counter(step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font: 600 24px var(--font-mono); color: var(--on-flag); background: var(--flag); } gw-slide[layout="steps"] li:not(:last-child)::after { content: ""; position: absolute; top: 28px; left: 72px; right: -20px; border-top: calc(2px * var(--stroke-n)) solid var(--rule); } gw-slide[layout="steps"] li strong { display: block; margin-bottom: 8px; font: var(--title-style, italic) var(--title-weight, 400) calc(30px * var(--h-scale)) / 1.15 var(--font-title, var(--font-serif)); } /* Cards at slide scale. */ gw-slide[layout="cards"] :is(.gw-slide-body, .gw-slide-main) > gw-grid { flex: 1; gap: 28px; align-content: center; } gw-slide[layout="cards"] gw-card { padding: calc(30px * var(--space)) calc(32px * var(--space)); background: var(--paper-raised); } gw-slide[layout="cards"] gw-card > .gw-caps { font-size: 13px; } gw-slide[layout="cards"] gw-card > h3 { margin-bottom: 12px; } gw-slide[layout="cards"] gw-card :is(p, li) { font-size: 21px; color: var(--ink-muted); } gw-slide[layout="cards"] gw-card gw-flag { margin-bottom: 14px; } /* A picture to the edges, its caption on a scrim. */ gw-slide[layout="image"] { padding: 0; } gw-slide[layout="image"]::before { z-index: 1; } gw-slide[layout="image"] > .gw-slide-body { position: relative; justify-content: flex-end; padding: 0 var(--slide-pad-x) 112px; } gw-slide[layout="image"] gw-image { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto !important; border-radius: 0; box-shadow: none; } gw-slide[layout="image"]:has(img) > .gw-slide-body { color: oklch(0.98 0.01 85); background: linear-gradient(to top, oklch(0.15 0.03 255 / 0.8), transparent 55%); } gw-slide[layout="image"]:has(img) > .gw-slide-foot { --ink-muted: oklch(0.9 0.02 85); z-index: 1; } gw-slide[layout="image"] h2 { max-width: 20ch; } gw-slide[layout="image"] p { max-width: 44ch; } /* Sidebar: a content slide's title in a column on the left, ruled off like a document's aside; a section divider sets its number beside its name. */ gw-slide > .gw-slide-body.gw-sided { flex-direction: row; justify-content: flex-start; gap: 56px; } .gw-sided > .gw-slide-head { flex: none; display: flex; flex-direction: column; gap: 18px; width: 300px; padding-right: 40px; border-right: 1px solid var(--ink); } .gw-sided > .gw-slide-head::before { content: ""; width: 64px; height: 5px; background: var(--flag); } .gw-sided > .gw-slide-head > h2 { font-size: calc(44px * var(--h-scale)); line-height: 1.08; } .gw-sided > .gw-slide-head > .gw-kicker { margin: 0; } .gw-sided > .gw-slide-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(24px * var(--space)); } gw-deck[look="sidebar"] gw-slide[layout="section"] > .gw-slide-body { flex-direction: row; align-items: center; gap: 48px; } gw-deck[look="sidebar"] gw-slide[layout="section"] > .gw-slide-body::before { flex: none; width: 300px; padding-right: 40px; font-size: 180px; text-align: right; border-right: 1px solid var(--rule); } gw-deck[look="sidebar"] gw-slide[layout="quote"] > .gw-slide-body { padding-left: 356px; } gw-deck[look="sidebar"] gw-slide[layout="quote"] > .gw-slide-body::before { position: absolute; top: 50%; left: var(--slide-pad-x); width: 300px; height: auto; margin: 0; padding-right: 40px; font-size: 320px; text-align: right; transform: translateY(-30%); } /* Poster: everything centred and set larger, the accent bar under each title. */ gw-deck[look="poster"] gw-slide > .gw-slide-body { align-items: center; text-align: center; } gw-deck[look="poster"] gw-slide :is(ul, ol, table, gw-columns, gw-grid, gw-card, pre) { text-align: left; } gw-deck[look="poster"] gw-slide .gw-kicker { justify-content: center; } gw-deck[look="poster"] gw-slide:is( :not([layout]), [layout="split"], [layout="agenda"], [layout="stats"], [layout="compare"], [layout="steps"], [layout="cards"] ) > .gw-slide-body > h2:is(:first-child, .gw-kicker + h2) { padding-bottom: 28px; margin-bottom: 8px; border-bottom: 0; font-size: calc(60px * var(--h-scale)); background-position: center bottom; background-size: 72px 5px; } gw-deck[look="poster"] gw-slide :is(gw-grid, gw-columns, table, gw-chart, gw-flow) { align-self: stretch; } gw-deck[look="poster"] gw-slide[layout="title"] > .gw-slide-body { justify-content: center; padding-bottom: 0; } gw-deck[look="poster"] gw-slide[layout="title"] h1 { max-width: 16ch; font-size: calc(112px * var(--h-scale)); } gw-deck[look="poster"] gw-slide[layout="title"] > .gw-slide-foot { justify-content: center; } gw-deck[look="poster"] gw-slide[layout="section"] :is(h1, h2) { font-size: calc(96px * var(--h-scale)); } gw-deck[look="poster"] gw-slide[layout="statement"] > .gw-slide-body > :first-child { max-width: 22ch; font-size: calc(72px * var(--h-scale)); } gw-deck[look="poster"] gw-slide[layout="quote"] blockquote { max-width: 34ch; } gw-deck[look="poster"] gw-slide[layout="quote"] blockquote > p:first-child { font-size: 58px; } gw-deck[look="poster"] gw-slide[layout="agenda"] ol { align-self: center; min-width: 640px; } gw-deck[look="poster"] gw-slide[layout="end"] > .gw-slide-body { align-items: center; } gw-deck[look="poster"] gw-slide[layout="end"] gw-facts { text-align: left; } gw-deck > nav { display: flex; align-items: center; gap: 14px; font: 13px var(--font-mono); color: var(--header-fg); opacity: 0.7; } gw-deck > nav button { padding: 4px 10px; border: 0; background: none; color: inherit; font-size: 18px; cursor: pointer; } /* Full screen: the slide alone, as large as the screen allows, on black. */ :root:fullscreen body { background: #000; } :root:fullscreen :is(.gw-chrome, gangway-mark, gw-deck > nav) { display: none !important; } :root:fullscreen gw-deck { gap: 0; } :root:fullscreen gw-deck.idle, :root:fullscreen gw-deck.idle gw-slide { cursor: none; } gw-deck > nav .gw-export { margin-left: 10px; padding: 3px 9px; font: 600 11px var(--font-sans); letter-spacing: 0.12em; border: 1px solid color-mix(in oklch, currentColor 45%, transparent); border-radius: var(--radius-sm); } gw-deck > nav button:disabled { opacity: 0.3; } gw-slide aside.notes { display: none; } gw-deck.notes gw-slide.on aside.notes { display: block; position: absolute; z-index: 2; left: 48px; right: 48px; bottom: 88px; padding: 14px 18px; font-size: 18px; color: var(--log-fg); background: var(--log-bg); } /* Canvas: frames on the chart grid, panned and zoomed as one layer. */ body:has(gw-canvas) { overflow: hidden; } gw-canvas { position: fixed; inset: 0; } gw-canvas > [data-part="viewport"] { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; outline: none; background-color: var(--paper); /* A theme's grid: lines (this), dots or none. */ background-image: var( --canvas-grid, linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px), linear-gradient(var(--grid-fine) 1px, transparent 1px), linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px) ); } gw-canvas > [data-part="viewport"].grabbing { cursor: grabbing; user-select: none; -webkit-user-select: none; } gw-canvas [data-part="world"] { position: absolute; top: 0; left: 0; transform-origin: 0 0; } gw-canvas [data-part="world"].animating { transition: transform 0.28s var(--ease, ease); } @media (prefers-reduced-motion: reduce) { gw-canvas [data-part="world"].animating { transition: none; } } gw-canvas svg[data-part="links"] { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; } gw-canvas .gw-arrow path { fill: none; stroke: var(--ink); stroke-width: calc(1.5 * var(--stroke-n)); } gw-canvas marker path { fill: var(--ink); } gw-canvas .gw-arrow rect { fill: var(--paper); stroke: var(--rule); } gw-canvas .gw-arrow text { font: 12px var(--font-mono); fill: var(--ink-muted); text-anchor: middle; dominant-baseline: central; } gw-frame { position: absolute; } gw-frame > .gw-frame-label { position: absolute; bottom: 100%; left: 0; right: 0; padding-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 600 12px var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } gw-frame > .gw-frame-label a { color: inherit; text-decoration: none; } gw-frame > .gw-frame-label a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--flag); } gw-frame > .gw-frame-body { height: 100%; padding: calc(24px * var(--space)) calc(26px * var(--space)); overflow: hidden; border-radius: var(--radius); background: var(--paper-raised); box-shadow: var(--card-edge); } gw-frame > .gw-frame-body > :last-child { margin-bottom: 0; } gw-frame > .gw-frame-body > :first-child { margin-top: 0; } gw-frame > .gw-frame-body > * + :is(gw-chart, gw-grid, gw-image, gw-facts, gw-callout, table, gw-flow) { margin-top: 16px; } gw-frame[frame="plain"] > .gw-frame-body { padding: 0; background: none; box-shadow: none; } gw-frame[frame="plain"] > .gw-frame-body > :is(svg, img, gw-image) { display: block; width: 100%; height: auto; } gw-frame[frame="note"] > .gw-frame-body { border-radius: var(--radius-sm); background: color-mix(in srgb, var(--flag) 26%, var(--paper)); box-shadow: inset 0 0 0 1px var(--flag); } gw-frame > .gw-frame-body > svg { display: block; max-width: 100%; height: auto; } /* A desktop window: a title bar with its address, then the page, drawn edge to edge. */ gw-frame[frame="window"] > .gw-frame-body { display: flex; flex-direction: column; padding: 0; background: var(--paper); border-radius: 10px; box-shadow: 0 0 0 1px var(--rule), 0 28px 64px -28px rgb(0 0 0 / 0.35); } .gw-window-bar { flex: none; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 68px 0 16px; background: var(--paper-raised); border-bottom: 1px solid var(--rule); } .gw-window-bar > i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--rule); } .gw-window-bar > span { flex: 0 1 460px; margin: 0 auto; padding: 4px 14px; overflow: hidden; border-radius: 6px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); font: 12px var(--font-mono); color: var(--ink-muted); text-align: center; white-space: nowrap; text-overflow: ellipsis; } .gw-window-view { flex: 1; min-height: 0; overflow: hidden; padding: 24px 26px; } .gw-window-view:has(> gw-app) { padding: 0; } /* App: a product screen, a sidebar beside the page, in sans type with rounded controls. */ gw-app { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 100%; font: 15px/1.5 var(--font-sans); } gw-app:not(:has(> gw-side)) { grid-template-columns: minmax(0, 1fr); } gw-app :is(h1, h2, h3) { margin: 0; font-family: var(--font-sans); font-style: normal; font-weight: 650; letter-spacing: -0.015em; } gw-app h1 { font-size: 30px; } gw-app h2 { font-size: 24px; } gw-app h3 { font-size: 17px; } gw-app > main { display: flex; flex-direction: column; gap: 22px; min-width: 0; padding: 28px 36px; overflow: hidden; } gw-app :is(main, gw-card, gw-columns > div) > * { margin: 0; } gw-app :is(gw-card, gw-columns > div) { display: flex; flex-direction: column; gap: 16px; } gw-app gw-card { padding: 22px 24px; border-radius: 12px; background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule); } gw-app gw-columns { gap: 24px; } gw-app gw-columns:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } gw-app gw-columns[wide] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } gw-app :is(th, gw-facts dt) { font: 500 13px var(--font-sans); letter-spacing: 0; text-transform: none; } gw-app td { padding: 12px 14px 12px 0; } gw-side { display: flex; flex-direction: column; gap: 4px; padding: 22px 14px; background: var(--paper-raised); border-right: 1px solid var(--rule); } gw-side > p:first-child { margin: 0 10px 18px; font: 700 17px var(--font-sans); letter-spacing: -0.01em; } gw-side > :last-child:not(:first-child, ul) { margin: auto 10px 0; font-size: 13px; color: var(--ink-muted); } gw-side ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } gw-side li { margin: 0; padding: 8px 10px; border-radius: 8px; color: var(--ink-muted); font-weight: 500; } gw-side li::marker { content: none; } /* The page you are on is the bold one. */ gw-side li:has(> strong) { background: var(--flag-wash); color: var(--ink); } gw-side li > strong { font-weight: 600; } /* A bar: the title on the left, and whatever follows it (steps, flags, buttons) together on the right. */ gw-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 16px; } gw-bar > * { margin: 0; } gw-bar > :first-child { margin-right: auto; } gw-app > main > gw-bar:first-child { padding-bottom: 20px; border-bottom: 1px solid var(--rule); } /* Controls in a frame. A paragraph of fields is a row of them; a paragraph of buttons, a button row. */ gw-frame p:has(> :is(label, button)) { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; } gw-frame p > label:not(.gw-toggle-field) { flex: 1 1 140px; } gw-frame button { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--flag); color: var(--flag-fg); font: 600 14px var(--font-sans); white-space: nowrap; cursor: pointer; } gw-frame button.ghost { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); } gw-frame label { display: grid; gap: 6px; } gw-frame label > span { font: 500 13px var(--font-sans); color: var(--ink-muted); } gw-frame :is(input:not([type="checkbox"]), select, textarea) { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--ink); font: 15px var(--font-sans); } gw-frame :is(input, select, textarea):focus-visible { outline: none; border-color: var(--flag); box-shadow: 0 0 0 3px var(--flag-wash); } gw-frame label.gw-toggle-field { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 10px; } gw-frame label.gw-toggle-field > span { font-size: 14px; color: var(--ink); } gw-frame input[type="checkbox"] { appearance: none; position: relative; flex: none; width: 36px; height: 20px; margin: 0; border-radius: 999px; background: var(--rule); cursor: pointer; } gw-frame input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); transition: transform 0.15s; } gw-frame input[type="checkbox"]:checked { background: var(--flag); } gw-frame input[type="checkbox"]:checked::after { transform: translateX(16px); } gw-frame gw-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--rule); } gw-frame gw-tabs > a { margin-bottom: -1px; padding: 8px 0 10px; border-bottom: 2px solid transparent; color: var(--ink-muted); font: 500 14px var(--font-sans); text-decoration: none; } gw-frame gw-tabs > a[aria-current] { border-bottom-color: var(--flag); color: var(--ink); } .gw-canvas-head { position: absolute; z-index: 5; top: 16px; left: 16px; max-width: min(460px, calc(100vw - 32px)); padding: 14px 18px 12px; border-radius: var(--radius); background: var(--paper); box-shadow: var(--neatline); pointer-events: none; } .gw-canvas-top { display: flex; align-items: center; } .gw-canvas-top .gw-logo { height: 20px; } .gw-canvas-head h1 { font-size: 28px; line-height: 1.1; margin-top: 4px; } .gw-canvas-head p { margin: 6px 0 0; font: 400 15px/1.4 var(--font-serif); color: var(--ink-muted); } gw-canvas > [data-part="controls"] { position: absolute; z-index: 5; left: 16px; bottom: 16px; display: flex; align-items: stretch; gap: 0; background: var(--paper); box-shadow: var(--hairline-strong, inset 0 0 0 1px var(--ink)); } gw-canvas > [data-part="controls"] > * { min-width: 36px; height: 36px; padding: 0 10px; border: 0; border-right: 1px solid var(--rule); background: none; color: var(--ink); font: 600 12px var(--font-mono); cursor: pointer; } gw-canvas > [data-part="controls"] > :last-child { border-right: 0; } gw-canvas > [data-part="controls"] button:hover { background: var(--flag-wash); } gw-canvas > [data-part="controls"] select { max-width: 180px; font: 600 11px var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; } gw-canvas > [data-part="map"] { position: absolute; z-index: 5; left: 16px; bottom: 64px; padding: 6px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); cursor: crosshair; } gw-canvas > [data-part="map"] svg { display: block; } gw-canvas > [data-part="map"] .f { fill: var(--rule); } gw-canvas > [data-part="map"] .v { fill: var(--flag-wash); stroke: var(--ink); stroke-width: 1; } /* List: the frames one under another, for a phone or for reading straight through. */ gw-canvas.gw-list { position: static; } body:has(gw-canvas.gw-list) { overflow: auto; } gw-canvas.gw-list > [data-part="viewport"] { position: static; overflow: visible; cursor: auto; touch-action: auto; padding: 150px 16px 96px; } gw-canvas.gw-list [data-part="world"] { position: static; display: grid; justify-items: center; gap: 56px; transform: none !important; } gw-canvas.gw-list gw-frame { position: relative; left: auto !important; top: auto !important; max-width: 100%; } gw-canvas.gw-list svg[data-part="links"], gw-canvas.gw-list > [data-part="map"] { display: none; } gw-canvas.gw-list > [data-part="controls"] { position: fixed; } gw-canvas.gw-list > [data-part="controls"] > :not([data-do="list"]) { display: none; } @media (max-width: 640px) { gw-canvas > [data-part="map"] { display: none; } .gw-canvas-head { padding: 10px 14px; } .gw-canvas-head h1 { font-size: 22px; } } /* Theme toggle */ .gw-chrome { position: fixed; z-index: 20; } .gw-toggle { top: 12px; right: 12px; display: flex; gap: 2px; padding: 2px; background: var(--paper); box-shadow: var(--hairline); opacity: 0.85; } body:has(gw-deck) .gw-toggle { top: auto; right: auto; bottom: 10px; left: 12px; --paper: var(--header-bg); --ink: var(--header-fg); --ink-muted: var(--header-muted); --rule: var(--header-rule); } .gw-toggle button { width: 26px; height: 26px; border: 0; background: none; color: var(--ink-muted); font: 12px var(--font-mono); cursor: pointer; } .gw-toggle button[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .gw-problem { padding: 10px 12px; font: 13px var(--font-mono); color: var(--danger); box-shadow: inset 3px 0 0 var(--danger); } @media (max-width: 760px) { gw-doc { padding: 32px 20px 64px; } gw-doc[layout="aside"] .gw-part { grid-template-columns: minmax(0, 1fr); gap: 14px; } /* A desktop window and a slide are drawn at their own width, so what is inside keeps its columns. */ :is(gw-grid, gw-columns):not(gw-frame[frame="window"] *, gw-slide *) { grid-template-columns: minmax(0, 1fr); } gw-grid:not(gw-frame[frame="window"] *, gw-slide *) > * { grid-column: auto !important; } gw-grid:not(gw-frame[frame="window"] *, gw-slide *) > gw-stat + gw-stat::before { inset: 0 16px auto; border-left: 0; border-top: 1px solid var(--rule); } } @media print { .gw-chrome, gw-deck > nav, gw-canvas > [data-part="controls"], gw-canvas > [data-part="map"], gw-canvas svg[data-part="links"] { display: none !important; } gw-canvas, gw-canvas > [data-part="viewport"], gw-canvas [data-part="world"] { position: static !important; transform: none !important; overflow: visible !important; background: none !important; } .gw-canvas-head { position: static; box-shadow: none; } gw-frame { position: relative !important; left: auto !important; top: auto !important; margin: 40px auto 0; break-inside: avoid; break-before: page; } body { background: none; } gw-doc { max-width: none; padding: 0; } .gw-part { break-inside: avoid-page; } gw-slide { display: flex !important; flex-direction: column; break-after: page; page: slide; cursor: auto; print-color-adjust: exact; -webkit-print-color-adjust: exact; } gw-slide *, gw-slide *::before, gw-slide *::after { transition: none !important; animation: none !important; } gw-deck { display: block; min-height: 0; } gw-deck > [data-part="stage"] { width: auto !important; height: auto !important; overflow: visible; } gw-deck > [data-part="stage"] > [data-part="canvas"] { height: auto; transform: none !important; } } @page slide { size: 1280px 720px; margin: 0; } @font-face{font-family:"Source Serif 4";font-weight:400;font-display:swap;src:url(fonts/source-serif-400.woff2) format("woff2")} @font-face{font-family:"Source Serif 4";font-weight:500;font-display:swap;src:url(fonts/source-serif-500.woff2) format("woff2")} @font-face{font-family:"Source Serif 4";font-weight:600;font-display:swap;src:url(fonts/source-serif-600.woff2) format("woff2")} @font-face{font-family:"Source Serif 4";font-weight:700;font-display:swap;src:url(fonts/source-serif-700.woff2) format("woff2")} @font-face{font-family:"Source Serif 4";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/source-serif-400-italic.woff2) format("woff2")} @font-face{font-family:"Merriweather";font-weight:400;font-display:swap;src:url(fonts/merriweather-400.woff2) format("woff2")} @font-face{font-family:"Merriweather";font-weight:500;font-display:swap;src:url(fonts/merriweather-500.woff2) format("woff2")} @font-face{font-family:"Merriweather";font-weight:600;font-display:swap;src:url(fonts/merriweather-600.woff2) format("woff2")} @font-face{font-family:"Merriweather";font-weight:700;font-display:swap;src:url(fonts/merriweather-700.woff2) format("woff2")} @font-face{font-family:"Merriweather";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/merriweather-400-italic.woff2) format("woff2")} @font-face{font-family:"Lora";font-weight:400;font-display:swap;src:url(fonts/lora-400.woff2) format("woff2")} @font-face{font-family:"Lora";font-weight:500;font-display:swap;src:url(fonts/lora-500.woff2) format("woff2")} @font-face{font-family:"Lora";font-weight:600;font-display:swap;src:url(fonts/lora-600.woff2) format("woff2")} @font-face{font-family:"Lora";font-weight:700;font-display:swap;src:url(fonts/lora-700.woff2) format("woff2")} @font-face{font-family:"Lora";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/lora-400-italic.woff2) format("woff2")} @font-face{font-family:"Fraunces";font-weight:400;font-display:swap;src:url(fonts/fraunces-400.woff2) format("woff2")} @font-face{font-family:"Fraunces";font-weight:500;font-display:swap;src:url(fonts/fraunces-500.woff2) format("woff2")} @font-face{font-family:"Fraunces";font-weight:600;font-display:swap;src:url(fonts/fraunces-600.woff2) format("woff2")} @font-face{font-family:"Fraunces";font-weight:700;font-display:swap;src:url(fonts/fraunces-700.woff2) format("woff2")} @font-face{font-family:"Fraunces";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/fraunces-400-italic.woff2) format("woff2")} @font-face{font-family:"Libre Baskerville";font-weight:400;font-display:swap;src:url(fonts/libre-baskerville-400.woff2) format("woff2")} @font-face{font-family:"Libre Baskerville";font-weight:500;font-display:swap;src:url(fonts/libre-baskerville-500.woff2) format("woff2")} @font-face{font-family:"Libre Baskerville";font-weight:600;font-display:swap;src:url(fonts/libre-baskerville-600.woff2) format("woff2")} @font-face{font-family:"Libre Baskerville";font-weight:700;font-display:swap;src:url(fonts/libre-baskerville-700.woff2) format("woff2")} @font-face{font-family:"Libre Baskerville";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/libre-baskerville-400-italic.woff2) format("woff2")} @font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(fonts/plex-sans-400.woff2) format("woff2")} @font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(fonts/plex-sans-500.woff2) format("woff2")} @font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(fonts/plex-sans-600.woff2) format("woff2")} @font-face{font-family:"IBM Plex Sans";font-weight:700;font-display:swap;src:url(fonts/plex-sans-700.woff2) format("woff2")} @font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format("woff2")} @font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url(fonts/inter-500.woff2) format("woff2")} @font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(fonts/inter-600.woff2) format("woff2")} @font-face{font-family:"Inter";font-weight:700;font-display:swap;src:url(fonts/inter-700.woff2) format("woff2")} @font-face{font-family:"Source Sans 3";font-weight:400;font-display:swap;src:url(fonts/source-sans-400.woff2) format("woff2")} @font-face{font-family:"Source Sans 3";font-weight:500;font-display:swap;src:url(fonts/source-sans-500.woff2) format("woff2")} @font-face{font-family:"Source Sans 3";font-weight:600;font-display:swap;src:url(fonts/source-sans-600.woff2) format("woff2")} @font-face{font-family:"Source Sans 3";font-weight:700;font-display:swap;src:url(fonts/source-sans-700.woff2) format("woff2")} @font-face{font-family:"Manrope";font-weight:400;font-display:swap;src:url(fonts/manrope-400.woff2) format("woff2")} @font-face{font-family:"Manrope";font-weight:500;font-display:swap;src:url(fonts/manrope-500.woff2) format("woff2")} @font-face{font-family:"Manrope";font-weight:600;font-display:swap;src:url(fonts/manrope-600.woff2) format("woff2")} @font-face{font-family:"Manrope";font-weight:700;font-display:swap;src:url(fonts/manrope-700.woff2) format("woff2")} @font-face{font-family:"DM Sans";font-weight:400;font-display:swap;src:url(fonts/dm-sans-400.woff2) format("woff2")} @font-face{font-family:"DM Sans";font-weight:500;font-display:swap;src:url(fonts/dm-sans-500.woff2) format("woff2")} @font-face{font-family:"DM Sans";font-weight:600;font-display:swap;src:url(fonts/dm-sans-600.woff2) format("woff2")} @font-face{font-family:"DM Sans";font-weight:700;font-display:swap;src:url(fonts/dm-sans-700.woff2) format("woff2")} @font-face{font-family:"Space Grotesk";font-weight:400;font-display:swap;src:url(fonts/space-grotesk-400.woff2) format("woff2")} @font-face{font-family:"Space Grotesk";font-weight:500;font-display:swap;src:url(fonts/space-grotesk-500.woff2) format("woff2")} @font-face{font-family:"Space Grotesk";font-weight:600;font-display:swap;src:url(fonts/space-grotesk-600.woff2) format("woff2")} @font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url(fonts/space-grotesk-700.woff2) format("woff2")} @font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-400.woff2) format("woff2")} @font-face{font-family:"JetBrains Mono";font-weight:600;font-display:swap;src:url(fonts/jetbrains-mono-600.woff2) format("woff2")} @font-face{font-family:"Fira Code";font-weight:400;font-display:swap;src:url(fonts/fira-code-400.woff2) format("woff2")} @font-face{font-family:"Fira Code";font-weight:600;font-display:swap;src:url(fonts/fira-code-600.woff2) format("woff2")} @font-face{font-family:"Source Code Pro";font-weight:400;font-display:swap;src:url(fonts/source-code-pro-400.woff2) format("woff2")} @font-face{font-family:"Source Code Pro";font-weight:600;font-display:swap;src:url(fonts/source-code-pro-600.woff2) format("woff2")} @font-face{font-family:"Playfair Display";font-weight:400;font-display:swap;src:url(fonts/playfair-400.woff2) format("woff2")} @font-face{font-family:"Playfair Display";font-weight:500;font-display:swap;src:url(fonts/playfair-500.woff2) format("woff2")} @font-face{font-family:"Playfair Display";font-weight:600;font-display:swap;src:url(fonts/playfair-600.woff2) format("woff2")} @font-face{font-family:"Playfair Display";font-weight:700;font-display:swap;src:url(fonts/playfair-700.woff2) format("woff2")} @font-face{font-family:"Playfair Display";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/playfair-400-italic.woff2) format("woff2")} @font-face{font-family:"Caveat";font-weight:400;font-display:swap;src:url(fonts/caveat-400.woff2) format("woff2")} @font-face{font-family:"Caveat";font-weight:700;font-display:swap;src:url(fonts/caveat-700.woff2) format("woff2")} @font-face{font-family:"Kalam";font-weight:400;font-display:swap;src:url(fonts/hand-400.woff2) format("woff2")} @font-face{font-family:"Kalam";font-weight:700;font-display:swap;src:url(fonts/hand-700.woff2) format("woff2")}