/* Gallery illustration system. Every control has a semantic purpose. */
.gallery .gi-card {
  --gi-line: rgba(18, 23, 34, .10);
  --gi-muted: #848580;
  --gi-blue: var(--ds-blue);
  height: auto;
  min-height: 462px;
  padding: 0;
  background: var(--ds-surface-tint);
  overflow: hidden;
}
.gi-card .il-copy { padding: 32px 48px; }
.gi-card .il-copy .ds-card-title,
.gi-card .il-copy .ds-card-body { position: static; margin: 0; width: auto; max-width: none; }
.gi-card .il-copy .ds-card-title { font-size: 24px; line-height: 32px; font-weight: 500; }
.gi-card .il-copy .ds-card-body { margin-top: 10px; font-size: 18px; line-height: 28px; }
.gi-card .sp-list { margin: 10px 0 0; padding-left: 0; }
/* Only explicitly decorated copy receives icons; home lists keep their original style. */
.ds-card .sp-list > .dock-icon-item { position: relative; padding-left: 30px; }
.ds-card .sp-list > .dock-icon-item + .dock-icon-item { margin-top: 6px; }
.ds-card .sp-list > .dock-icon-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  background: var(--ds-ink);
  mask: var(--dock-list-icon) center / contain no-repeat;
  -webkit-mask: var(--dock-list-icon) center / contain no-repeat;
}
.gi-card .gi-scene { height: 268px; position: relative; display: grid; place-items: center; font-family: var(--ds-font); color: var(--ds-ink); user-select: none; }
.gi-composition { width: 360px; display: flex; flex-direction: column; align-items: center; gap: 14px; position: relative; font-size: 13px; line-height: 19px; }
.gi-composition *, .gi-composition *::before, .gi-composition *::after { box-sizing: border-box; }
.gi-composition p { margin: 0; }
.gi-composition b, .gi-composition strong { font-weight: 500; }
.gi-composition small { font-size: 11px; line-height: 16px; color: var(--gi-muted); }
.gi-composition img { display: block; object-fit: contain; }
.gi-icon { display: inline-block; flex: 0 0 auto; width: 16px; height: 16px; background: currentColor; mask: var(--gi-icon) center / contain no-repeat; -webkit-mask: var(--gi-icon) center / contain no-repeat; color: inherit; vertical-align: middle; }
.gi-icon.is-blue { color: var(--gi-blue); }
:is(.gallery-extra, .dock-illustration) .gi-icon.gi-icon--ai { color: var(--ds-ink); }
.gi-logo { width: 20px; height: 20px; flex: none; }
.gi-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover !important; flex: none; }
.gi-sheet, .gi-search-palette, .gi-thread, .gi-notification, .gi-brand-preview, .gi-video-preview {
  position: relative; width: 100%; border: 1px solid var(--gi-line); border-radius: 14px; background: #fff; box-shadow: 0 2px 3px rgba(18,23,34,.025); overflow: hidden;
}
.gi-toolbar { min-height: 46px; display: flex; align-items: center; gap: 9px; padding: 12px 18px; border-bottom: 1px solid rgba(18,23,34,.06); font-size: 13px; font-weight: 500; }
.gi-toolbar>span { min-width: 0; flex: 1; }
.gi-toolbar>small { margin-left: auto; font-weight: 400; white-space: nowrap; }
/* Search is a single command palette, with file types instead of task states. */
.gi-kind-search .gi-composition { width: 372px; }
.gi-search-input { display: flex; align-items: center; gap: 10px; padding: 17px 18px; border-bottom: 1px solid var(--gi-line); font-size: 14px; }
.gi-caret { height: 16px; width: 1px; background: var(--gi-blue); margin-left: -7px; }
.gi-search-label { display: flex; justify-content: space-between; padding: 11px 18px 5px; font-size: 10px; color: var(--gi-muted); }
.gi-file-row { display: flex; align-items: center; gap: 11px; min-height: 49px; margin: 3px 8px; padding: 6px 10px; border-radius: 7px; }
.gi-file-row:last-child { margin-bottom: 8px; }
.gi-file-row.is-current { background: #f2f6fc; }
.gi-file-tile { display: grid; place-items: center; width: 29px; height: 34px; background: #fff; border: 1px solid var(--gi-line); border-radius: 5px; }
.gi-file-tile .gi-icon { width: 16px; height: 16px; }
.gi-file-row>span:nth-child(2) { display: flex; flex-direction: column; gap: 1px; }
.gi-file-row b { font-size: 12px; }
.gi-file-row small { font-size: 10px; }
.gi-return { margin-left: auto; color: #91958e; font-size: 16px; }
/* An answer is readable on the canvas; only the question is a bubble. */
.gi-kind-chat .gi-composition { width: 352px; gap: 23px; }
.gi-question { align-self: flex-end; max-width: 92%; padding: 11px 15px; border: 1px solid var(--gi-line); background: #fff; border-radius: 14px 14px 4px 14px; font-size: 13px; }
.gi-ai-answer { align-self: flex-start; width: 94%; padding: 0 4px; }
.gi-ai-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; margin-bottom: 10px; }
.gi-ai-label>.gi-icon { width: 20px; height: 20px; }
.gi-ai-label small { margin-left: auto; font-weight: 400; }
.gi-ai-answer p { font-size: 14px; line-height: 22px; }
.gi-source { display: flex; align-items: center; gap: 5px; margin-top: 10px; color: var(--gi-muted); font-size: 10px; }
.gi-source .gi-icon { width: 12px; height: 12px; }
.gi-prompt { width: 100%; display: flex; align-items: center; gap: 9px; padding: 14px 16px; background: #fff; border: 1px solid var(--gi-line); border-radius: 16px; box-shadow: 0 3px 5px rgba(18,23,34,.025); }
.gi-prompt>span { flex: 1; font-size: 12px; }
.gi-prompt>.gi-icon:last-child { width: 16px; height: 16px; }
.gi-prompt small { font-size: 11px; }
.gi-excerpt { padding: 17px 18px; font-size: 13px; }
.gi-output-row { display: flex; gap: 8px; align-items: center; padding: 20px 18px; font-size: 11px; }
.gi-output-row .gi-icon:nth-of-type(2) { margin-left: 12px; }
.gi-thread { padding: 16px 18px 12px; }
.gi-message { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 18px; }
.gi-message small { color: #454842; }
.gi-message em { font-style: normal; margin-left: 6px; font-size: 10px; color: var(--gi-muted); }
.gi-message p { margin-top: 3px; font-size: 13px; }
.gi-reply { border: 1px solid var(--gi-line); border-radius: 8px; padding: 9px 11px; display: flex; justify-content: space-between; color: var(--gi-muted); font-size: 11px; }
.gi-reply .gi-icon { width: 12px; height: 12px; }
/* Connections reuse the circular provider treatment of Import calls. */
.gi-network { width: 320px; display: grid; grid-template-columns: repeat(3,1fr); justify-items: center; }
.gi-provider { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gi-provider>span { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--gi-line); border-radius: 50%; background: #fff; }
.gi-provider .gi-logo { width: 24px; height: 24px; }
.gi-provider .gi-icon { width: 24px; height: 24px; }
.gi-provider small { font-size: 11px; color: #555951; }
.gi-network-lines { width: 320px; height: 46px; grid-column: 1/-1; margin: 4px 0 -1px; }
.gi-network-lines path { stroke: #121722; stroke-opacity: .13; }
.gi-dock-node { grid-column: 1/-1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; background: #fff; border: 1px solid var(--gi-line); border-radius: 13px; }
.gi-dock-node .gi-icon { width: 24px; height: 24px; }
/* Flow edges describe a real transformation; no arbitrary numbering. */
.gi-kind-workflow .gi-composition { width: 328px; gap: 0; }
.gi-flow-trigger { display: flex; align-items: center; gap: 12px; align-self: flex-start; padding: 10px 15px; background: #fff; border: 1px solid var(--gi-line); border-radius: 12px; min-width: 225px; }
.gi-flow-trigger>div { display: flex; flex-direction: column; gap: 2px; }
.gi-flow-trigger b { font-size: 12px; }
.gi-flow-trigger small { font-size: 10px; }
.gi-flow-trigger .gi-logo, .gi-flow-trigger>.gi-icon { width: 24px; height: 24px; }
.gi-flow-link { height: 28px; width: 1px; background: var(--gi-line); margin-left: 34px; align-self: flex-start; display: flex; align-items: flex-end; justify-content: center; }
.gi-flow-link .gi-icon { width: 12px; height: 12px; transform: rotate(90deg); background-color: #b5b7b1; }
.gi-kind-workflow .gi-sheet { margin-left: 28px; width: calc(100% - 28px); }
.gi-output-detail { padding: 15px 18px; color: var(--gi-muted); font-size: 11px; }
.gi-publish { display: flex; width: calc(100% - 28px); margin: 10px 0 0 28px; justify-content: space-between; align-items: center; font-size: 10px; color: var(--gi-muted); }
.gi-publish b { color: var(--gi-blue); display: flex; align-items: center; gap: 4px; }
.gi-publish .gi-icon { width: 12px; height: 12px; color: inherit; }
.gi-agent-actions { padding-top: 14px; width: 100%; display: flex; gap: 8px; }
.gi-agent-actions>div { flex: 1; display: flex; align-items: center; flex-direction: column; gap: 9px; padding: 15px 6px; border-radius: 10px; border: 1px solid var(--gi-line); background: #fff; font-size: 10px; text-align: center; }
.gi-agent-actions .gi-icon { width: 20px; height: 20px; }
/* Documents contain short meaningful excerpts, rather than fake text lines. */
.gi-kind-document .gi-composition { width: 324px; }
.gi-document-body { padding: 15px 20px 18px; display: flex; flex-direction: column; gap: 13px; }
.gi-document-body b { font-size: 11px; }
.gi-document-body p { margin-top: 2px; font-size: 11px; color: var(--gi-muted); line-height: 16px; }
.gi-kind-review .gi-composition { width: 356px; }
.gi-review-line { padding: 16px 18px; }
.gi-review-line b { font-size: 11px; }
.gi-review-line p { margin-top: 3px; font-size: 12px; color: #696c65; }
.gi-review-gap { display: flex; gap: 10px; margin: 0 12px 12px; padding: 12px; border-radius: 7px; background: #f7f5f0; }
.gi-review-gap>div { display: flex; flex-direction: column; gap: 3px; font-size: 11px; }
.gi-review-gap span { color: var(--gi-muted); }
.gi-change-label { display: flex; align-items: center; gap: 6px; padding: 14px 18px; font-size: 10px; color: var(--gi-muted); }
.gi-change-label .gi-icon { width: 12px; height: 12px; }
.gi-change-old, .gi-change-new { padding: 8px 12px; margin: 0 12px; font-size: 11px; }
.gi-change-old { color: #95958e; text-decoration: line-through; }
.gi-change-new { background: #edf5fc; border-left: 2px solid var(--gi-blue); border-radius: 3px; }
.gi-review-footer { display: flex; justify-content: space-between; padding: 14px 18px; font-size: 10px; color: var(--gi-muted); }
.gi-review-footer span { color: var(--gi-blue); }
.gi-review-footer .gi-icon { width: 12px; height: 12px; color: inherit; }
/* Checks are reserved for completed tasks, radios and permissions have their own states. */
.gi-task-row, .gi-setting-row, .gi-scope-row, .gi-reveal-row, .gi-library-row, .gi-activity-row { min-height: 43px; display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid rgba(18,23,34,.05); font-size: 12px; }
.gi-sheet>div:last-child { border-bottom: none; }
.gi-checkbox { display: grid; place-items: center; flex: none; width: 14px; height: 14px; border: 1px solid #d7d9d3; border-radius: 4px; }
.gi-checkbox.is-done { border-color: var(--gi-blue); background: var(--gi-blue); }
.gi-checkbox .gi-icon { color: #fff; width: 12px; height: 12px; }
.gi-task-name { flex: 1; font-size: 11px; }
.gi-task-row>small { font-size: 9px; white-space: nowrap; }
.gi-task-row .gi-avatar { width: 19px; height: 19px; }
.gi-setting-row>span, .gi-reveal-row>span { flex: 1; }
.gi-switch { display: block; width: 26px; height: 15px; border-radius: 10px; background: #e8e9e5; padding: 2px; }
.gi-switch::after { content: ''; display: block; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #0001; }
.gi-switch.is-on { background: var(--gi-blue); }
.gi-switch.is-on::after { margin-left: 11px; }
.gi-scope-row b { margin-left: auto; font-size: 10px; padding: 2px 7px; border: 1px solid var(--gi-line); border-radius: 5px; color: #666b61; }
.gi-reveal-row.is-current { background: #f5f8fd; }
.gi-reveal-row.is-current small { color: var(--gi-blue); }
.gi-reveal-row.is-locked { color: #a2a49f; }
.gi-reveal-row.is-locked .gi-icon { color: #a2a49f; }
.gi-library-row b { font-size: 12px; }
.gi-library-row>small { margin-left: auto; font-size: 10px; }
.gi-grip { width: 7px; height: 14px; background: radial-gradient(circle, #a9aca4 1px, transparent 1px) 0 0 / 4px 4px; }
.gi-activity-row { min-height: 48px; gap: 9px; }
.gi-activity-row>span { flex: 1; font-size: 11px; }
.gi-activity-row>small { font-size: 9px; white-space: nowrap; }
.gi-activity-row .gi-avatar { width: 24px; height: 24px; }
.gi-insight { width: 100%; padding: 20px 22px; background: #fff; border: 1px solid var(--gi-line); border-radius: 14px; }
.gi-insight p { line-height: 23px; font-size: 14px; }
.gi-insight-evidence { display: flex; align-items: center; padding-top: 18px; }
.gi-insight-evidence .gi-avatar { width: 22px; height: 22px; border: 2px solid white; }
.gi-insight-evidence .gi-avatar+.gi-avatar { margin-left: -6px; }
.gi-insight-evidence span { font-size: 10px; color: var(--gi-muted); margin-left: 6px; }
.gi-choice-options { display: flex; gap: 8px; padding: 14px; }
.gi-choice { min-width: 0; flex: 1; position: relative; padding: 18px 10px 13px; display: flex; flex-direction: column; gap: 13px; border: 1px solid var(--gi-line); border-radius: 8px; font-size: 11px; }
.gi-choice>.gi-icon { width: 24px; height: 24px; }
.gi-choice.is-selected { border-color: var(--gi-blue); background: #f9fbff; }
.gi-radio { position: absolute; width: 10px; height: 10px; border: 1px solid #d9dbd4; border-radius: 50%; top: 10px; right: 10px; }
.gi-choice.is-selected .gi-radio { border: 3px solid var(--gi-blue); }
.gi-choice.is-selected>.gi-icon { color: var(--gi-blue); }
/* Charts and metrics stay deliberately sparse. */
.gi-chart { padding: 8px 18px 14px; }
.gi-chart>div { display: grid; grid-template-columns: 70px 1fr 30px; align-items: center; gap: 12px; padding: 10px 0; font-size: 11px; }
.gi-chart b { text-align: right; font-size: 10px; color: #64685e; }
.gi-bar-track { height: 5px; border-radius: 3px; background: #f2f4ef; overflow: hidden; }
.gi-bar-track i { display: block; height: 100%; background: var(--gi-blue); border-radius: inherit; }
.gi-chart>div:nth-child(2) i { opacity: .55; }
.gi-chart>div:nth-child(3) i { opacity: .25; }
.gi-coach-note { display: flex; align-items: center; gap: 6px; color: #70756c; font-size: 10px; }
.gi-coach-note .gi-icon { width: 14px; height: 14px; }
.gi-metric { display: flex; flex-direction: column; align-items: center; gap: 13px; width: 100%; }
.gi-metric>strong { font-size: 62px; line-height: 1; font-weight: 500; letter-spacing: -3px; color: var(--gi-blue); }
.gi-metric>small { font-size: 11px; color: #555c50; }
.gi-metric>span { font-size: 14px; }
.gi-metric svg { width: 284px; height: 50px; color: var(--gi-blue); }
.gi-rating { display: flex; gap: 8px; margin: 18px 18px 6px; }
.gi-rating>span { display: grid; place-items: center; height: 36px; flex: 1; border: 1px solid var(--gi-line); border-radius: 7px; font-size: 13px; }
.gi-rating>span.is-selected { border-color: var(--gi-blue); background: #f4f8ff; color: var(--gi-blue); }
.gi-rating-labels { display: flex; justify-content: space-between; margin: 0 18px; font-size: 9px; color: var(--gi-muted); }
.gi-survey-footer { margin: 19px 18px 14px; display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--gi-muted); }
.gi-survey-footer span { padding: 6px 12px; background: var(--gi-blue); color: #fff; border-radius: 6px; }
/* Notifications belong to the app that sent them. */
.gi-notification { padding: 18px 18px 18px 54px; }
.gi-notification>.gi-logo { position: absolute; top: 20px; left: 18px; width: 24px; height: 24px; }
.gi-notice-heading { display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.gi-notice-heading>span { color: var(--gi-muted); font-size: 9px; }
.gi-notice-body { margin-top: 14px; }
.gi-notice-body>b { font-size: 11px; }
.gi-notice-body>p { font-size: 12px; margin: 5px 0 12px; }
.gi-text-action { color: var(--gi-blue); font-size: 11px; }
.gi-text-action>.gi-icon { color: inherit; width: 12px; height: 12px; }
.gi-lesson { display: flex; align-items: center; gap: 12px; padding: 18px; }
.gi-lesson-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 8px; background: #f1f5fb; }
.gi-lesson-icon .gi-icon { color: var(--gi-blue); }
.gi-lesson>div { display: flex; flex-direction: column; gap: 3px; }
.gi-lesson b { font-size: 12px; }
.gi-lesson small { font-size: 10px; }
.gi-progress { margin: 0 18px; background: #eff2ec; height: 4px; border-radius: 2px; }
.gi-progress>i { display: block; height: 100%; background: var(--gi-blue); border-radius: inherit; }
.gi-foot-action { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; font-size: 10px; color: var(--gi-muted); }
.gi-foot-action b, .gi-foot-action .gi-icon { color: var(--gi-blue); }
.gi-foot-action .gi-icon { width: 12px; height: 12px; }
.gi-notice-text { padding: 15px 18px; font-size: 14px; line-height: 21px; }
.gi-attachment { display: flex; align-items: center; gap: 7px; margin: 0 12px 12px; border: 1px solid var(--gi-line); border-radius: 8px; padding: 10px; font-size: 11px; }
.gi-add { margin-left: auto; padding: 4px 10px; border-radius: 5px; background: var(--gi-blue); color: #fff; font-size: 10px; }
/* Branded portals, an actual quote, and a real meeting player. */
.gi-brand-cover { background: #ecf2fd; padding: 22px 20px; display: flex; align-items: center; justify-content: space-between; }
.gi-brand-cover>img { width: 62px; height: 26px; object-fit: contain; }
.gi-brand-cover>small { color: #768297; font-size: 9px; }
.gi-brand-content { padding: 19px 20px; }
.gi-brand-content>b { font-size: 15px; }
.gi-brand-content>div { display: flex; gap: 17px; margin-top: 15px; color: #7b8175; font-size: 10px; }
.gi-brand-settings { background: #fff; border: 1px solid var(--gi-line); border-radius: 9px; align-self: flex-end; display: flex; align-items: center; gap: 7px; padding: 9px 11px; margin-top: -25px; margin-right: -12px; z-index: 1; font-size: 10px; }
.gi-swatch { width: 15px; height: 15px; border-radius: 4px; background: var(--gi-blue); }
.gi-brand-settings>i:not(.gi-icon) { width: 1px; height: 15px; background: var(--gi-line); margin: 0 5px; }
.gi-brand-settings .gi-icon { width: 12px; height: 12px; }
.gi-price-row { display: flex; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid rgba(18,23,34,.05); font-size: 12px; }
.gi-price-row>span { color: #7a7f73; }
.gi-price-total { display: flex; justify-content: space-between; align-items: center; padding: 15px 18px; font-size: 11px; }
.gi-price-total>b { font-size: 20px; letter-spacing: -.5px; }
.gi-price-note { font-size: 10px; color: var(--gi-muted); padding: 0 18px 14px; }
.gi-signature { margin: 0 12px 12px; border: 1px dashed #d5d9d0; border-radius: 7px; padding: 10px; color: var(--gi-muted); display: flex; gap: 10px; font-size: 10px; }
.gi-signature span { margin-left: auto; font-style: italic; }
.gi-signature .gi-icon { width: 12px; height: 12px; }
.gi-handoff-people { display: flex; align-items: center; gap: 34px; }
.gi-handoff-people>div { display: flex; align-items: center; flex-direction: column; gap: 4px; }
.gi-handoff-people .gi-avatar { width: 40px; height: 40px; margin-bottom: 3px; }
.gi-handoff-people b { font-size: 11px; }
.gi-handoff-people small { font-size: 10px; }
.gi-handoff-people>.gi-icon { color: #c0c6b9; }
.gi-context-chips { display: flex; gap: 7px; padding: 14px 18px; }
.gi-context-chips>span { padding: 3px 7px; border-radius: 5px; background: #f7f8f5; font-size: 10px; color: #737b6a; }
.gi-edited-excerpt { padding: 19px 20px 44px; font-size: 12px; }
.gi-edited-excerpt>span { padding: 4px 0; background: #eaf3ff; box-shadow: -2px 0 var(--gi-blue); }
.gi-collab-cursor { display: flex; align-items: flex-start; position: absolute; left: 57%; top: 94px; }
.gi-collab-cursor>img { width: 18px; height: 21px; }
.gi-collab-cursor>span { margin: 13px 0 0 -4px; padding: 1px 6px; border-radius: 3px; background: var(--gi-blue); color: #fff; font-size: 9px; }
.gi-comment { align-self: flex-end; width: auto; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--gi-line); border-radius: 10px; padding: 10px 14px; margin: -12px -8px 0 0; z-index: 1; }
.gi-comment>div { display: flex; flex-direction: column; font-size: 11px; }
.gi-comment b { font-size: 10px; }
.gi-waveform { padding: 22px 18px 15px; display: flex; align-items: center; gap: 19px; }
.gi-play { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--gi-blue); flex: none; }
.gi-play>.gi-icon { color: #fff; width: 16px; height: 16px; }
.gi-waveform>div { flex: 1; height: 46px; display: flex; align-items: center; justify-content: space-between; }
.gi-waveform>div>i { width: 3px; border-radius: 2px; background: var(--gi-blue); opacity: .45; }
.gi-recording-meta { display: flex; align-items: center; justify-content: space-between; padding: 0 18px 16px; font-size: 10px; color: var(--gi-muted); }
.gi-recording-meta>span:last-child { display: flex; align-items: center; gap: 4px; }
.gi-recording-meta .gi-logo { width: 14px; height: 14px; }
.gi-milestones { display: flex; padding: 24px 18px; }
.gi-milestone { flex: 1; position: relative; display: flex; align-items: center; flex-direction: column; font-size: 11px; }
.gi-milestone:not(:last-child)::after { content: ''; position: absolute; height: 1px; left: calc(50% + 17px); width: calc(100% - 34px); top: 13px; background: var(--gi-line); }
.gi-milestone>span { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid var(--gi-line); border-radius: 50%; background: #fff; color: #a3a99c; font-size: 10px; margin-bottom: 11px; }
.gi-milestone.is-done>span { background: var(--gi-blue); border-color: transparent; }
.gi-milestone.is-done .gi-icon { color: #fff; width: 12px; height: 12px; }
.gi-milestone.is-active>span { color: var(--gi-blue); border-color: var(--gi-blue); }
.gi-milestone small { font-size: 9px; margin-top: 3px; }
/* Different embeds show different objects: a chart, files, a prototype, or video. */
.gi-dashboard { display: flex; align-items: flex-end; padding: 24px 20px; gap: 25px; }
.gi-dashboard>div:first-child { display: flex; flex-direction: column; gap: 9px; }
.gi-dashboard b { font-size: 32px; line-height: 1; letter-spacing: -1px; }
.gi-dashboard small { font-size: 10px; }
.gi-dashboard-bars { display: flex; align-items: flex-end; gap: 6px; height: 65px; }
.gi-dashboard-bars>i { width: 13px; background: #d4e4fd; border-radius: 3px 3px 0 0; }
.gi-dashboard-bars>i:last-child { background: var(--gi-blue); }
.gi-prototype { margin: 12px; border: 1px solid var(--gi-line); border-radius: 8px; }
.gi-proto-nav { display: flex; align-items: center; gap: 6px; padding: 10px; border-bottom: 1px solid var(--gi-line); font-size: 10px; }
.gi-proto-nav .gi-logo { width: 12px; height: 12px; }
.gi-proto-content { padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.gi-proto-content b { font-size: 13px; }
.gi-proto-content span { font-size: 10px; color: var(--gi-muted); }
.gi-proto-content i { padding: 5px 9px; background: var(--gi-blue); border-radius: 5px; color: #fff; font-size: 9px; font-style: normal; }
.gi-resource-tiles { display: flex; padding: 16px; gap: 10px; }
.gi-resource-tiles>span { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 9px; border: 1px solid var(--gi-line); border-radius: 7px; padding: 15px; }
.gi-resource-tiles .gi-icon { width: 28px; height: 28px; }
.gi-resource-tiles b { font-size: 11px; }
.gi-resource-tiles small { font-size: 9px; }
.gi-video-preview { background: #edf2fb; padding: 17px 20px; color: #283b59; }
.gi-video-top { display: flex; justify-content: space-between; font-size: 10px; align-items: center; }
.gi-video-top .gi-logo { width: 16px; height: 16px; }
.gi-video-title { font-size: 24px; line-height: 28px; letter-spacing: -.5px; max-width: 200px; margin: 20px 0 16px; }
.gi-video-preview>.gi-play { position: absolute; right: 35px; top: 90px; }
.gi-video-bottom { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 9px; color: #8f9bb0; }
.gi-video-bottom>div { height: 2px; background: #d0dbee; flex: 1; }
.gi-video-bottom>.gi-icon { width: 12px; height: 12px; color: inherit; }