/* Larger, purposeful product moments, composed from Dock's reference cards. */
.gallery .gi-card { --gi-muted: #747770; --ga-shadow: 0 1px 2px #1217220a, 0 8px 20px -16px #12172233; }
:is(.gallery-extra, .dock-illustration) .gi-scene { height: 380px; }
.gi-scene { --gi-muted: color-mix(in srgb, var(--ds-ink) 62%, transparent); }
:is(.gallery-extra, .dock-illustration) .gi-composition { width: 440px; font-size: 14px; line-height: 21px; }
:is(.gallery-extra, .dock-illustration) .gi-card .il-copy { padding-top: 24px; }
.gi-scene .ga-composition { width: 440px; font-family: var(--ds-font); }
.ga-composition h3 { font-family: var(--ds-font); font-size: 24px; font-weight: 500; line-height: 30px; letter-spacing: -.65px; margin: 0; }
.ga-composition p { font-size: 15px; line-height: 21px; }
.ga-composition .gi-icon { width: 16px; height: 16px; }
.ga-composition .gi-logo { width: 16px; height: 16px; }
.ga-acme { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; line-height: 20px; }
.ga-acme>img { width: 20px; height: 20px; }
/* A real composer: prompt, tools, selected agent, send. */
/* The conversation keeps the scale and layering of the approved home chat. */
.gi-scene .ga-art-chat { width: 464px; }
.ga-conversation { position: relative; width: 100%; height: 336px; }
.ga-chat-thread { position: absolute; inset: 0 0 62px; padding: 16px 24px 0; border: .5px solid #1217221c; border-radius: 24px 24px 14px 14px; background: linear-gradient(180deg,#ffffffa8 0%,#fff 38%); }
.ga-chat-thread::before { content: ''; position: absolute; top: 0; bottom: 0; width: .5px; left: 10px; background: linear-gradient(transparent,#1217220b,transparent); }
.ga-user-question { width: fit-content; margin-left: auto; padding: 10px 14px; border-radius: 18px; background: #f4f1ea; font-size: 16px; line-height: 22px; }
.ga-answer-label { display: flex; align-items: center; gap: 6px; color: var(--gi-muted); font-size: 11px; margin: 14px 0 7px; }
.ga-answer-label>.gi-icon { width: 16px; height: 16px; }
.ga-answer { font-size: 16px !important; line-height: 22px !important; }
.ga-answer strong { font-weight: 500; }
.ga-asset { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px; border: .5px solid #1217221c; border-radius: 12px; background: #fff; margin-top: 12px; }
.ga-asset-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.ga-asset-copy>b { font-size: 14px; line-height: 20px; }
.ga-asset-copy>small { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--gi-muted); }
.ga-asset-copy .gi-logo { width: 12px; height: 12px; }
.ga-asset>.gi-icon { width: 16px; height: 16px; margin: 0 4px; color: var(--gi-muted); }
.ga-cover { display: block; position: relative; flex: none; overflow: hidden; width: 92px; height: 58px; border-radius: 6px; background: #633bed; color: #fff; }
.ga-cover>img { position: absolute; left: 8px; top: 8px; width: 12px; height: 12px; }
.ga-cover>small { position: absolute; left: 19px; top: 6px; font-size: 7px; color: inherit; }
.ga-cover>b { position: absolute; left: 8px; top: 29px; width: 76px; font-size: 12px; line-height: 14px; z-index: 1; }
.ga-cover>i { width: 73px; height: 73px; border: 13px solid #ffffff18; position: absolute; right: -25px; bottom: -43px; border-radius: 50%; }
.ga-cover--plan { background: #0068f9; }
.ga-cover--playbook { background: #141c29; }
.ga-cover--security { background: #eee9e0; color: #454838; }
.ga-cover--security>img { filter: brightness(.4); }
/* Agent starting point and concrete generated documents. */
.gi-scene .ga-art-start { width: 454px; }
.ga-start { width: 100%; }
.ga-start-title { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 23px; line-height: 28px; letter-spacing: -.4px; margin-bottom: 25px; }
.ga-start-title>.gi-icon { width: 32px; height: 32px; }
.ga-start-suggestions { display: flex; justify-content: center; gap: 15px; margin-top: 19px; }
.ga-start-suggestions>span { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--gi-muted); }
.ga-start-suggestions .gi-icon { width: 14px; height: 14px; }
.ga-created { position: relative; width: 100%; height: 336px; }
.ga-created .ga-paper { width: calc(100% - 26px); margin-left: 6px; height: 284px; }
.ga-paper { position: relative; width: 100%; padding: 24px; background: #fff; border: .5px solid #12172222; border-radius: 16px; box-shadow: var(--ga-shadow); }
.ga-paper-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.ga-paper-top>span:last-child { font-family: var(--ds-font); color: var(--gi-muted); font-size: 12px; line-height: 20px; }
.ga-paper h3 { margin-bottom: 20px; font-size: 24px; line-height: 30px; letter-spacing: -.6px; }
.ga-paper-lead { font-size: 15px !important; line-height: 22px !important; color: var(--gi-muted); }
.ga-room-links { display: flex; gap: 13px; margin-top: 17px; font-size: 11px; }
.ga-room-links>span { display: flex; align-items: center; gap: 5px; }
.ga-room-links .gi-icon { width: 14px; height: 14px; }
.ga-goals { display: flex; gap: 40px; margin-top: 19px; }
.ga-goals>span { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--gi-muted); line-height: 16px; }
.ga-goals b { font-size: 28px; color: var(--ds-ink); line-height: 32px; }
.gi-scene .ga-art-document { width: 440px; }
.ga-editorial { width: 100%; }
.ga-doc-section { margin-top: 20px; }
.ga-doc-section>span { color: var(--gi-muted); font-size: 12px; text-transform: none; letter-spacing: 0; line-height: 16px; }
.ga-doc-section>p { margin-top: 6px; font-size: 15px; line-height: 22px; }
.ga-paper-footer { display: flex; align-items: center; gap: 8px; margin-top: 24px; padding-top: 16px; border-top: .5px solid #12172212; font-size: 12px; color: var(--gi-muted); line-height: 16px; }
.ga-paper-footer>.gi-icon { width: 14px; height: 14px; }
/* Search previews the actual asset; a file icon is not the whole illustration. */
.ga-search { width: 100%; background: #fff; border: .5px solid #12172220; border-radius: 18px; box-shadow: var(--ga-shadow); padding-bottom: 8px; }
.ga-search-query { display: flex; align-items: center; gap: 12px; padding: 20px 24px 16px; font-size: 16px; }
.ga-search-query>i:not(.gi-icon) { height: 19px; width: 1px; background: var(--gi-blue); margin-left: -10px; }
.ga-search-tabs { display: flex; align-items: center; gap: 24px; padding: 0 24px; border-bottom: .5px solid #12172212; font-size: 12px; color: var(--gi-muted); }
.ga-search-tabs>* { padding: 10px 0; }
.ga-search-tabs>b { border-bottom: 1.5px solid var(--gi-blue); color: var(--ds-ink); }
.ga-search-result { display: flex; gap: 12px; align-items: center; padding: 8px; margin: 4px 12px; border-radius: 9px; }
.ga-search-result.is-current { background: #f3f6fc; }
.ga-search-result .ga-cover { width: 76px; height: 48px; }
.ga-search-result .ga-cover>b { font-size: 10px; line-height: 12px; top: 28px; width: 60px; }
.ga-search-result>div { display: flex; flex-direction: column; gap: 4px; }
.ga-search-result b { font-size: 14px; line-height: 20px; }
.ga-search-result small { font-size: 12px; line-height: 16px; }
.ga-key { margin-left: auto; color: var(--gi-muted); padding-right: 5px; font-size: 16px; }
/* Provider orbit is sparse, with a single Dock focal point. */
.ga-orbit { position: relative; width: 440px; height: 316px; }
.ga-orbit>svg { position: absolute; inset: 0; width: 440px; height: 296px; }
.ga-orbit>svg circle { stroke: #121722; stroke-opacity: .055; }
.ga-orbit>svg path { stroke: #121722; stroke-opacity: .14; }
.ga-orbit-node { position: absolute; display: flex; flex-direction: column; align-items: center; width: 80px; gap: 8px; }
.ga-orbit-node--0 { left: 52px; top: 45px; }
.ga-orbit-node--1 { left: 180px; top: 1px; }
.ga-orbit-node--2 { left: 308px; top: 45px; }
.ga-orbit-node>span { display: grid; place-items: center; width: 59px; height: 59px; border: .5px solid #12172220; border-radius: 50%; background: #fff; box-shadow: var(--ga-shadow); }
.ga-orbit-node .gi-logo { width: 28px; height: 28px; }
.ga-orbit-node .gi-icon { width: 26px; height: 26px; }
.ga-orbit-node>b { background: var(--ds-surface-tint); font-size: 12px; padding: 0 3px; z-index: 1; color: var(--gi-muted); }
.ga-orbit-core { display: grid; place-items: center; width: 78px; height: 78px; position: absolute; top: 119px; left: 181px; background: #fff; border: .5px solid #12172220; border-radius: 23px; box-shadow: 0 6px 14px -9px #0068f935; }
.ga-orbit-core>.gi-icon { width: 32px; height: 32px; }
.ga-orbit-label { position: absolute; top: 210px; width: 100%; text-align: center; font-size: 16px; font-weight: 500; }
.ga-orbit-context { position: absolute; top: 270px; width: 100%; text-align: center; font-size: 13px; color: var(--gi-muted); }
/* Automation: the output has substance, not just a box with a filename. */
.ga-automation { width: 416px; }
.ga-auto-trigger { display: flex; align-items: center; gap: 12px; width: fit-content; padding: 12px 16px; border: .5px solid #12172225; border-radius: 12px; background: #fff; font-size: 14px; line-height: 20px; }
.ga-auto-trigger .gi-logo, .ga-auto-trigger .gi-icon { width: 20px; height: 20px; }
.ga-auto-wire { height: 24px; width: .5px; background: #12172233; margin-left: 26px; }
.ga-auto-action { width: calc(100% - 24px); margin-left: 24px; padding: 20px; background: #fff; border: .5px solid #12172225; border-radius: 15px; box-shadow: var(--ga-shadow); }
.ga-auto-label { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 6px; line-height: 20px; }
.ga-auto-action>small { padding-left: 24px; font-size: 12px; line-height: 16px; }
.ga-auto-output { display: flex; gap: 12px; align-items: center; padding-top: 16px; margin-top: 16px; border-top: .5px solid #12172215; }
.ga-auto-output>div { display: flex; flex-direction: column; gap: 8px; }
.ga-auto-output b { font-size: 14px; }
.ga-auto-output>div>span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gi-muted); line-height: 16px; }
.ga-auto-output .gi-icon { width: 12px; height: 12px; }
.ga-agent-preview { width: 100%; border: .5px solid #12172225; border-radius: 17px; background: #fff; box-shadow: var(--ga-shadow); padding: 20px; }
.ga-preview-top { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 14px; }
.ga-preview-top>span { margin-left: auto; font-size: 10px; color: var(--gi-muted); }
.ga-preview-question { border-radius: 14px; background: #f4f1ea; padding: 9px 13px; width: fit-content; margin-left: auto; margin-bottom: 18px; font-size: 14px; }
.ga-agent-preview>p { font-size: 16px; line-height: 23px; }
.ga-preview-source { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--gi-muted); font-size: 11px; }
.ga-preview-source .gi-icon { width: 14px; height: 14px; }
.ga-preview-foot { display: flex; align-items: center; justify-content: space-between; border-top: .5px solid #12172212; padding-top: 15px; margin-top: 20px; }
.ga-preview-foot>* { display: flex; align-items: center; gap: 5px; font-size: 11px; }
.ga-preview-foot>span { color: var(--gi-muted); }
.ga-preview-foot>b { padding: 6px 10px; background: var(--gi-blue); border-radius: 7px; color: #fff; }
.ga-preview-foot .gi-icon { width: 12px; height: 12px; color: inherit; }
.ga-sync { width: 410px; }
.ga-sync-source>.ga-asset { margin-top: 0; box-shadow: var(--ga-shadow); padding: 8px; }
.ga-sync>svg { display: block; height: 55px; width: 100%; fill: none; stroke: #12172226; stroke-width: .8px; }
.ga-sync-rooms { display: flex; justify-content: space-between; }
.ga-sync-rooms>div { display: flex; flex-direction: column; align-items: center; padding: 15px 11px; width: 110px; background: #fff; border: .5px solid #12172222; border-radius: 11px; gap: 7px; }
.ga-sync-rooms b { font-size: 13px; }
.ga-sync-rooms small { font-size: 10px; }
/* Review and diff show the decision to make. */
.ga-review-fact>span { font-size: 11px; color: var(--gi-muted); }
.ga-review-fact>p { margin-top: 4px; }
.ga-review-question { display: flex; gap: 10px; background: #f6f3eb; border-radius: 10px; padding: 13px; margin-top: 20px; }
.ga-review-question b { font-size: 14px; }
.ga-review-question p { font-size: 12px; line-height: 18px; color: var(--gi-muted); margin-top: 5px; }
.ga-diff { width: 100%; background: #fff; border: .5px solid #12172222; border-radius: 16px; padding: 20px 0; box-shadow: var(--ga-shadow); }
.ga-diff-head { display: flex; align-items: center; gap: 8px; margin: 0 24px; }
.ga-diff-head b { font-size: 15px; }
.ga-diff-head>span { font-size: 12px; margin-left: auto; color: var(--gi-muted); line-height: 20px; }
.ga-diff-context { display: flex; align-items: center; gap: 8px; margin: 20px 24px 24px; font-size: 12px; color: var(--gi-muted); line-height: 20px; }
.ga-diff-context .gi-icon { width: 16px; height: 16px; }
.ga-diff-section { font-size: 13px; margin: 0 24px 12px; font-weight: 500; }
.ga-diff-old, .ga-diff-new { display: flex; gap: 12px; padding: 14px 24px; font-size: 14px; line-height: 22px; }
.ga-diff-old { color: var(--gi-muted); background: #faf6f2; text-decoration: line-through; }
.ga-diff-new { background: #eff7f1; color: #2e6246; }
.ga-diff-old i,.ga-diff-new i { text-decoration: none; font-style: normal; width: 10px; }
.ga-diff-foot { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px 0; font-size: 12px; line-height: 16px; }
.ga-diff-foot>span { color: var(--gi-muted); }
.ga-diff-foot>b { padding: 7px 9px; background: var(--gi-blue); border-radius: 7px; color: #fff; }
/* Configuration has a question, a rationale and understandable states. */
.ga-choose { width: 100%; }
.ga-choose-heading { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-bottom: 23px; }
.ga-choose-heading h3 { font-size: 22px; letter-spacing: -.4px; }
.ga-choose-heading>.gi-icon { width: 28px; height: 28px; }
.ga-choose-options { display: flex; gap: 12px; }
.ga-choose-option { position: relative; flex: 1; min-width: 0; border: .5px solid #12172222; padding: 20px 16px 18px; background: #fff; border-radius: 13px; }
.ga-choose-option.is-selected { border: 1px solid var(--gi-blue); box-shadow: 0 0 0 3px #0068f908; }
.ga-choose-option>.gi-icon { width: 24px; height: 24px; margin-bottom: 17px; }
.ga-choose-option b { display: block; font-size: 15px; margin-bottom: 5px; }
.ga-choose-option p { font-size: 12px; line-height: 18px; color: var(--gi-muted); }
.ga-choose-option .gi-radio { top: 15px; right: 15px; }
.ga-choose-option.is-selected .gi-radio { border: 3px solid var(--gi-blue); }
.ga-settings { width: 100%; border: .5px solid #12172222; border-radius: 17px; background: #fff; padding: 24px; box-shadow: var(--ga-shadow); }
.ga-settings-title { display: flex; align-items: center; gap: 9px; }
.ga-settings-title>h3 { font-size: 20px; line-height: 28px; letter-spacing: -.4px; }
.ga-settings>p { font-size: 13px; color: var(--gi-muted); margin: 6px 0 20px; line-height: 20px; padding-left: 24px; }
.ga-setting { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-top: .5px solid #12172210; }
.ga-setting>div { display: flex; align-items: center; gap: 12px; }
.ga-setting>div>span { display: flex; flex-direction: column; gap: 4px; }
.ga-setting b { font-size: 14px; line-height: 20px; }
.ga-setting small { font-size: 12px; line-height: 16px; }
.ga-scope-tag { background: #f4f6f1; border: .5px solid #12172212; border-radius: 6px; font-size: 12px; padding: 2px 8px; line-height: 20px; }
/* Editorial quote, survey and branded portal. */
.ga-quote { width: 440px; padding: 24px; border: .5px solid #12172222; border-radius: 16px; background: #fff; box-shadow: var(--ga-shadow); }
.ga-quote-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ga-quote-head>span:last-child { color: var(--gi-muted); font-size: 12px; line-height: 20px; }
.ga-quote h3 { font-size: 24px; line-height: 30px; letter-spacing: -.5px; }
.ga-quote>p { margin: 6px 0 20px; font-size: 13px; color: var(--gi-muted); line-height: 20px; }
.ga-quote-line { display: flex; justify-content: space-between; padding: 12px 0; font-size: 14px; border-bottom: .5px solid #12172213; line-height: 20px; }
.ga-quote-line>span { color: var(--gi-muted); }
.ga-quote-total { display: flex; justify-content: space-between; align-items: center; margin: 16px 0; }
.ga-quote-total>span { font-size: 14px; line-height: 20px; }
.ga-quote-total>strong { font-size: 28px; letter-spacing: -.8px; }
.ga-quote-note { color: var(--gi-muted); font-size: 12px; line-height: 16px; }
.ga-sign { display: flex; align-items: center; gap: 8px; border: .5px dashed #12172233; border-radius: 7px; padding: 12px; font-size: 12px; color: var(--gi-muted); line-height: 20px; }
.ga-sign>b { margin-left: auto; font-style: italic; }
.ga-sign>.gi-icon { width: 14px; height: 14px; }
.ga-survey { background: #fff; border: .5px solid #12172222; border-radius: 17px; padding: 24px; width: 440px; box-shadow: var(--ga-shadow); }
.ga-survey-label { display: flex; align-items: center; gap: 8px; color: var(--gi-muted); font-size: 12px; margin-bottom: 16px; line-height: 20px; }
.ga-survey h3 { font-size: 22px; line-height: 28px; letter-spacing: -.5px; max-width: 380px; }
.ga-survey-rating { display: flex; gap: 9px; margin-top: 25px; }
.ga-survey-rating>span { display: grid; place-items: center; border: .5px solid #12172226; border-radius: 9px; flex: 1; height: 44px; font-size: 17px; }
.ga-survey-rating>span.is-selected { color: var(--gi-blue); border-color: var(--gi-blue); background: #f6f9ff; box-shadow: 0 0 0 2px #0068f906; }
.ga-survey-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--gi-muted); margin-top: 8px; line-height: 16px; }
.ga-survey-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; font-size: 12px; color: var(--gi-muted); line-height: 16px; }
.ga-survey-footer b { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: var(--gi-blue); color: #fff; border-radius: 7px; }
.ga-survey-footer .gi-icon { color: inherit; width: 12px; height: 12px; }
.ga-portal { position: relative; width: 440px; background: #fff; border: .5px solid #12172222; border-radius: 16px; box-shadow: var(--ga-shadow); }
.ga-portal-cover { height: 104px; position: relative; overflow: hidden; padding: 22px 24px; background: var(--gi-blue); border-radius: 15px 15px 0 0; color: #fff; }
.ga-portal-cover>.ga-acme { position: relative; z-index: 1; }
.ga-portal-cover img { filter: brightness(0) invert(1); }
.ga-portal-cover>span:nth-child(2) { position: absolute; bottom: 18px; left: 24px; font-size: 12px; letter-spacing: 0; opacity: .85; }
.ga-portal-orb { position: absolute; width: 183px; height: 183px; border: 39px solid #ffffff18; border-radius: 50%; right: -5px; bottom: -79px; }
.ga-portal-body { padding: 24px; }
.ga-portal-body>small { font-size: 11px; letter-spacing: .5px; color: var(--gi-muted); }
.ga-portal-body>h3 { margin: 8px 0 24px; font-size: 24px; line-height: 30px; }
.ga-portal-nav { display: flex; gap: 20px; font-size: 13px; color: var(--gi-muted); line-height: 20px; }
.ga-portal-nav>b { color: var(--gi-blue); }
.ga-brand-tool { position: absolute; right: 24px; top: 80px; border: .5px solid #12172222; border-radius: 10px; background: #fff; padding: 12px; display: flex; align-items: center; gap: 8px; box-shadow: var(--ga-shadow); }
.ga-brand-swatch { width: 19px; height: 19px; border-radius: 5px; background: var(--gi-blue); }
.ga-brand-tool>b { font-size: 12px; line-height: 20px; }
.ga-brand-tool>span:last-child { color: var(--gi-muted); font-size: 11px; line-height: 20px; }
.ga-portal-welcome { display: flex; align-items: center; gap: 8px; position: absolute; right: 24px; top: 80px; padding: 8px 12px; background: #fff; border: .5px solid #12172222; border-radius: 9px; box-shadow: var(--ga-shadow); font-size: 12px; }
/* Buyer activity and analysis are composed around the useful signal. */
.ga-activity { width: 440px; background: #fff; border: .5px solid #12172222; border-radius: 17px; padding: 24px; box-shadow: var(--ga-shadow); }
.ga-activity-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.ga-activity-heading>span:last-child { font-size: 12px; color: var(--gi-muted); line-height: 20px; }
.ga-activity-event { display: flex; position: relative; gap: 13px; padding: 14px 0; }
.ga-activity-event:not(:last-child)::after { content: ''; position: absolute; top: 45px; bottom: -14px; left: 17px; width: .5px; background: #12172215; }
.ga-activity-event>.gi-avatar { width: 35px; height: 35px; }
.ga-activity-event>div { flex: 1; }
.ga-activity-event b { font-size: 13px; }
.ga-activity-event p { font-size: 14px; margin-top: 2px; }
.ga-activity-event small { font-size: 10px; margin-top: 3px; display: block; }
.ga-recap { width: 440px; padding: 24px; background: #fff; border: .5px solid #12172222; border-radius: 17px; box-shadow: var(--ga-shadow); }
.ga-recap-heading { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 20px; line-height: 20px; }
.ga-recap-heading>span { margin-left: auto; font-size: 12px; color: var(--gi-muted); line-height: 20px; }
.ga-recap h3 { font-size: 24px; line-height: 30px; letter-spacing: -.5px; }
.ga-recap-signal { display: flex; align-items: center; gap: 14px; margin: 20px 0; }
.ga-recap-signal>strong { font-size: 45px; line-height: 47px; color: var(--gi-blue); letter-spacing: -1px; }
.ga-recap-signal>span { font-size: 13px; line-height: 20px; color: var(--gi-muted); }
.ga-recap-signal>div { display: flex; margin-left: auto; }
.ga-recap-signal .gi-avatar { width: 31px; height: 31px; border: 2px solid #fff; }
.ga-recap-signal .gi-avatar+.gi-avatar { margin-left: -8px; }
.ga-recap>p { font-size: 14px; line-height: 22px; }
.ga-recap>p>b { font-weight: 500; }
.ga-training,.ga-analytics { width: 440px; padding: 24px; background: #fff; border: .5px solid #12172222; border-radius: 17px; box-shadow: var(--ga-shadow); }
.ga-chart-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ga-chart-heading>span { font-size: 12px; letter-spacing: 0; color: var(--gi-muted); line-height: 20px; }
.ga-chart-heading>small { font-size: 12px; }
.ga-training>h3 { font-size: 22px; margin-bottom: 20px; line-height: 28px; }
.ga-training-row { display: flex; gap: 12px; align-items: center; margin: 16px 0; font-size: 13px; line-height: 20px; }
.ga-training-row>span { width: 83px; }
.ga-training-row>div { flex: 1; height: 6px; border-radius: 3px; background: #f1f4ee; }
.ga-training-row i { display: block; height: 100%; border-radius: 3px; background: var(--gi-blue); }
.ga-training-row:nth-of-type(3) i { opacity: .6; }
.ga-training-row:nth-of-type(4) i { opacity: .3; }
.ga-training-row>b { width: 31px; text-align: right; font-size: 12px; color: var(--gi-muted); }
.ga-training-note { display: flex; align-items: center; gap: 8px; font-size: 12px; padding-top: 15px; margin-top: 18px; border-top: .5px solid #12172212; color: var(--gi-muted); line-height: 20px; }
.ga-training-note .gi-icon { width: 16px; height: 16px; }
.ga-analytics-stats { display: flex; justify-content: space-between; padding: 0 8px 25px 0; }
.ga-analytics-stats>div { display: flex; flex-direction: column; gap: 5px; }
.ga-analytics-stats strong { font-size: 35px; line-height: 36px; letter-spacing: -1px; }
.ga-analytics-stats span { color: var(--gi-muted); font-size: 12px; line-height: 16px; }
.ga-analytics>svg { width: 100%; height: 90px; }
.ga-chart-axis { display: flex; justify-content: space-between; color: var(--gi-muted); font-size: 11px; margin-top: 10px; line-height: 16px; }
/* Secondary scenes get the same readable scale and stronger hierarchy. */
:is(.gallery-extra, .dock-illustration) .gi-composition:not(.ga-composition) .gi-toolbar { min-height: 54px; padding: 16px 22px; font-size: 15px; }
:is(.gallery-extra, .dock-illustration) .gi-composition:not(.ga-composition) .gi-sheet { border-radius: 16px; box-shadow: var(--ga-shadow); }
:is(.gallery-extra, .dock-illustration) .gi-library-row,:is(.gallery-extra, .dock-illustration) .gi-task-row,:is(.gallery-extra, .dock-illustration) .gi-reveal-row { min-height: 52px; padding: 13px 20px; }
:is(.gallery-extra, .dock-illustration) .gi-library-row b,:is(.gallery-extra, .dock-illustration) .gi-task-name,:is(.gallery-extra, .dock-illustration) .gi-reveal-row>span { font-size: 14px; }
:is(.gallery-extra, .dock-illustration) .gi-task-row>small { font-size: 11px; }
:is(.gallery-extra, .dock-illustration) .gi-task-row .gi-avatar { width: 25px; height: 25px; }
:is(.gallery-extra, .dock-illustration) .gi-library-row>small,:is(.gallery-extra, .dock-illustration) .gi-reveal-row>small { font-size: 12px; }
:is(.gallery-extra, .dock-illustration) .gi-milestones { padding: 30px 24px; }
:is(.gallery-extra, .dock-illustration) .gi-milestone { font-size: 14px; }
:is(.gallery-extra, .dock-illustration) .gi-milestone small { font-size: 11px; margin-top: 5px; }
:is(.gallery-extra, .dock-illustration) .gi-milestone>span { width: 33px; height: 33px; font-size: 12px; }
:is(.gallery-extra, .dock-illustration) .gi-milestone:not(:last-child)::after { top: 16px; }
:is(.gallery-extra, .dock-illustration) .gi-notice-text { padding: 21px 22px; font-size: 17px; line-height: 24px; }
:is(.gallery-extra, .dock-illustration) .gi-attachment { margin: 0 16px 16px; padding: 12px; font-size: 13px; }
:is(.gallery-extra, .dock-illustration) .gi-add { font-size: 12px; padding: 6px 13px; }
:is(.gallery-extra, .dock-illustration) .gi-notification { padding: 23px 23px 23px 63px; }
:is(.gallery-extra, .dock-illustration) .gi-notification>.gi-logo { top: 25px; left: 22px; width: 26px; height: 26px; }
:is(.gallery-extra, .dock-illustration) .gi-notice-heading { font-size: 13px; }
:is(.gallery-extra, .dock-illustration) .gi-notice-body { margin-top: 22px; }
:is(.gallery-extra, .dock-illustration) .gi-notice-body>b { font-size: 13px; }
:is(.gallery-extra, .dock-illustration) .gi-notice-body>p { font-size: 15px; line-height: 23px; margin-top: 7px; }
:is(.gallery-extra, .dock-illustration) .gi-text-action { font-size: 13px; }
:is(.gallery-extra, .dock-illustration) .gi-thread { padding: 21px 22px 16px; }
:is(.gallery-extra, .dock-illustration) .gi-message { gap: 12px; padding-bottom: 23px; }
:is(.gallery-extra, .dock-illustration) .gi-message .gi-avatar { width: 33px; height: 33px; }
:is(.gallery-extra, .dock-illustration) .gi-message small { font-size: 12px; }
:is(.gallery-extra, .dock-illustration) .gi-message p { font-size: 15px; line-height: 22px; margin-top: 6px; }
:is(.gallery-extra, .dock-illustration) .gi-reply { padding: 12px 14px; font-size: 13px; border-radius: 10px; }
:is(.gallery-extra, .dock-illustration) .gi-handoff-people { gap: 54px; }
:is(.gallery-extra, .dock-illustration) .gi-handoff-people .gi-avatar { width: 56px; height: 56px; }
:is(.gallery-extra, .dock-illustration) .gi-handoff-people b { font-size: 14px; }
:is(.gallery-extra, .dock-illustration) .gi-handoff-people small { font-size: 12px; }
:is(.gallery-extra, .dock-illustration) .gi-handoff-people { margin-bottom: 15px; }
:is(.gallery-extra, .dock-illustration) .gi-context-chips { padding: 20px 22px; gap: 10px; }
:is(.gallery-extra, .dock-illustration) .gi-context-chips>span { font-size: 13px; padding: 6px 9px; }
:is(.gallery-extra, .dock-illustration) .gi-kind-metric .gi-composition { transform: none; }
:is(.gallery-extra, .dock-illustration) .gi-metric>strong { font-size: 82px; }
:is(.gallery-extra, .dock-illustration) .gi-metric>small { font-size: 13px; }
:is(.gallery-extra, .dock-illustration) .gi-metric>span { font-size: 17px; }
:is(.gallery-extra, .dock-illustration) .gi-metric svg { margin-top: 16px; width: 360px; height: 65px; }
:is(.gallery-extra, .dock-illustration) .gi-kind-collaborate .gi-sheet { padding-bottom: 15px; }
:is(.gallery-extra, .dock-illustration) .gi-edited-excerpt { padding: 23px 24px 58px; font-size: 16px; }
:is(.gallery-extra, .dock-illustration) .gi-collab-cursor { top: 113px; left: 59%; }
:is(.gallery-extra, .dock-illustration) .gi-collab-cursor>span { font-size: 11px; padding: 3px 7px; }
:is(.gallery-extra, .dock-illustration) .gi-comment { padding: 13px 18px; margin-top: -24px; gap: 10px; }
:is(.gallery-extra, .dock-illustration) .gi-comment>div { font-size: 13px; }
:is(.gallery-extra, .dock-illustration) .gi-comment b { font-size: 12px; }
:is(.gallery-extra, .dock-illustration) .gi-waveform { padding: 30px 22px 23px; gap: 23px; }
:is(.gallery-extra, .dock-illustration) .gi-waveform .gi-play { width: 44px; height: 44px; }
:is(.gallery-extra, .dock-illustration) .gi-recording-meta { padding: 0 22px 20px; font-size: 12px; }
:is(.gallery-extra, .dock-illustration) .gi-lesson { padding: 24px 22px; }
:is(.gallery-extra, .dock-illustration) .gi-lesson b { font-size: 15px; }
:is(.gallery-extra, .dock-illustration) .gi-lesson small { font-size: 12px; }
:is(.gallery-extra, .dock-illustration) .gi-lesson-icon { width: 45px; height: 45px; }
:is(.gallery-extra, .dock-illustration) .gi-progress { margin: 0 22px; }
:is(.gallery-extra, .dock-illustration) .gi-foot-action { padding: 20px 22px; font-size: 12px; }
:is(.gallery-extra, .dock-illustration) .gi-video-preview { min-height: 248px; padding: 24px; }
:is(.gallery-extra, .dock-illustration) .gi-video-title { font-size: 31px; line-height: 34px; max-width: 250px; margin: 29px 0; }
:is(.gallery-extra, .dock-illustration) .gi-video-top { font-size: 13px; }
:is(.gallery-extra, .dock-illustration) .gi-video-preview>.gi-play { top: 112px; right: 32px; width: 42px; height: 42px; }
:is(.gallery-extra, .dock-illustration) .gi-video-bottom { font-size: 11px; margin-top: 26px; }
:is(.gallery-extra, .dock-illustration) .gi-dashboard { padding: 30px 24px; gap: 33px; }
:is(.gallery-extra, .dock-illustration) .gi-dashboard small { font-size: 12px; }
:is(.gallery-extra, .dock-illustration) .gi-dashboard b { font-size: 44px; }
:is(.gallery-extra, .dock-illustration) .gi-dashboard-bars { gap: 8px; }
:is(.gallery-extra, .dock-illustration) .gi-dashboard-bars>i { width: 16px; }
:is(.gallery-extra, .dock-illustration) .gi-resource-tiles { padding: 22px; gap: 13px; }
:is(.gallery-extra, .dock-illustration) .gi-resource-tiles>span { padding: 20px; gap: 13px; }
:is(.gallery-extra, .dock-illustration) .gi-resource-tiles .gi-icon { width: 36px; height: 36px; }
:is(.gallery-extra, .dock-illustration) .gi-resource-tiles b { font-size: 13px; }
:is(.gallery-extra, .dock-illustration) .gi-resource-tiles small { font-size: 11px; }
:is(.gallery-extra, .dock-illustration) .gi-prototype { margin: 18px; }
:is(.gallery-extra, .dock-illustration) .gi-proto-nav { padding: 13px; font-size: 12px; }
:is(.gallery-extra, .dock-illustration) .gi-proto-content { padding: 23px; gap: 10px; }
:is(.gallery-extra, .dock-illustration) .gi-proto-content b { font-size: 17px; }
:is(.gallery-extra, .dock-illustration) .gi-proto-content span { font-size: 12px; }
:is(.gallery-extra, .dock-illustration) .gi-proto-content i { font-size: 11px; padding: 7px 11px; }

/* Finished workspaces: the cream window chrome from the approved deal-prep card. */
.gi-scene .ga-art-workspace { width: 504px; }
.ga-workspace { position: relative; width: 100%; height: 334px; display: flex; flex-direction: column; padding: 0 2px 2px; background: #faf9f7; border-radius: 7px; box-shadow: 0 7px 9px #0000000a; overflow: hidden; }
.ga-workspace::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 .5px #0000001a; pointer-events: none; }
.ga-ws-browserbar { display: flex; align-items: center; flex: 0 0 21px; gap: 3px; padding-left: 7px; }
.ga-ws-browserbar img { width: 6px; height: 6px; }
.ga-ws-screen { flex: 1; min-height: 0; border: .5px solid #ebe5d8; border-radius: 6px; }
.ga-ws-topbar { height: 36px; padding: 5px 8px; display: flex; align-items: center; justify-content: space-between; }
.ga-ws-name { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; }
.ga-ws-name img { width: 19px; height: 19px; }
.ga-ws-share-area { display: flex; align-items: center; gap: 7px; }
.ga-ws-faces { display: flex; }
.ga-ws-faces img { width: 16px; height: 16px; }
.ga-ws-faces img + img { margin-left: -4px; }
.ga-ws-share { display: inline-flex; align-items: center; height: 21px; padding: 0 8px; border-radius: 3px; color: #fff; background: #5a39ff; font-size: 9px; }
.ga-ws-content { padding: 14px 22px 18px; }
.ga-ws-nav { display: flex; align-items: center; gap: 7px; height: 28px; margin-bottom: 14px; color: var(--gi-muted); font-size: 11px; }
.ga-ws-nav > span { padding: 5px 10px; line-height: 18px; }
.ga-ws-nav > .is-current { color: var(--ds-ink); border-radius: 16px; background: #fff; box-shadow: 0 0 0 .5px #12172214; }
.ga-ws-embed { height: 190px; background: #fff; border: .5px solid #12172220; border-radius: 8px; overflow: hidden; }
.ga-ws-embed-title { display: flex; align-items: center; gap: 7px; height: 39px; padding: 0 15px; border-bottom: .5px solid #12172212; font-size: 12px; }
.ga-ws-embed-title .gi-icon, .ga-ws-embed-title .gi-logo { width: 16px; height: 16px; }
.ga-ws-dashboard { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 10px; height: 117px; gap: 20px; }
.ga-ws-metric { display: flex; flex-direction: column; gap: 8px; }
.ga-ws-metric strong { font-size: 40px; line-height: 41px; letter-spacing: -1.5px; }
.ga-ws-metric strong > span { font-size: 23px; margin-left: 2px; }
.ga-ws-metric > span { font-size: 11px; color: var(--gi-muted); white-space: nowrap; }
.ga-ws-dashboard svg { width: 180px; height: 85px; overflow: visible; }
.ga-ws-dashboard-foot { display: flex; justify-content: space-between; padding: 0 20px; font-size: 10px; color: var(--gi-muted); }
.ga-ws-video { position: relative; height: 190px; border-radius: 8px; overflow: hidden; padding: 18px 21px; background: #633bed; color: #fff; }
.ga-ws-video-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.ga-ws-video-top .ga-acme { font-size: 11px; }
.ga-ws-video-top .ga-acme img { width: 15px; height: 15px; filter: brightness(0) invert(1); }
.ga-ws-video-top > span:last-child { display: flex; align-items: center; gap: 5px; font-size: 10px; }
.ga-ws-video-top .gi-logo { width: 14px; height: 14px; filter: brightness(0) invert(1); }
.ga-ws-video-heading { position: relative; z-index: 1; margin-top: 30px; font-size: 24px; line-height: 27px; letter-spacing: -.5px; }
.ga-ws-play { position: absolute; top: 88px; right: 42px; display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; background: #fff; z-index: 1; }
.ga-ws-play > .gi-icon { width: 20px; height: 20px; color: #633bed; margin-left: 2px; }
.ga-ws-duration { position: absolute; bottom: 16px; right: 17px; color: #ffffffb3; font-size: 10px; z-index: 1; }
.ga-ws-video-ring { position: absolute; width: 210px; height: 210px; right: -41px; bottom: -97px; border: 34px solid #ffffff09; border-radius: 50%; }
.ga-ws-resources { height: 190px; display: flex; gap: 14px; }
.ga-ws-resource { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 7px; }
.ga-ws-resource > .ga-cover { width: 100%; height: 128px; border-radius: 7px; }
.ga-ws-resource > .ga-cover > img { top: 12px; left: 12px; width: 12px; height: 12px; }
.ga-ws-resource > .ga-cover > small { top: 11px; left: 29px; font-size: 10px; }
.ga-ws-resource > .ga-cover > b { top: 52px; left: 14px; width: 160px; font-size: 24px; line-height: 26px; }
.ga-ws-resource > .ga-cover > i { width: 140px; height: 140px; border-width: 24px; bottom: -80px; right: -27px; }
.ga-ws-resource > b { font-size: 12px; line-height: 16px; }
.ga-ws-resource > span { display: flex; align-items: center; gap: 5px; font-size: 10px; line-height: 13px; color: var(--gi-muted); }
.ga-ws-resource > span > .gi-icon { width: 12px; height: 12px; }
.ga-ws-pdf { height: 128px; background: #fff; border: .5px solid #12172220; border-radius: 7px; padding: 14px 16px; }
.ga-ws-pdf > span { display: block; font-size: 7px; color: var(--gi-muted); letter-spacing: .5px; }
.ga-ws-pdf > b { display: block; font-size: 17px; line-height: 20px; letter-spacing: -.25px; margin: 12px 0; }
.ga-ws-pdf > i { display: block; width: 80%; height: 2px; background: #efefeb; margin-top: 5px; }
.ga-ws-pdf > i:last-child { width: 55%; }
.ga-ws-prototype { height: 149px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.ga-ws-prototype-mark > .gi-icon { width: 20px; height: 20px; color: var(--gi-muted); }
.ga-ws-prototype > b { font-size: 18px; line-height: 21px; text-align: center; letter-spacing: -.3px; }
.ga-ws-new-project { padding: 5px 10px; color: #fff; background: var(--ds-blue); border-radius: 5px; font-size: 10px; line-height: 15px; }

/* A few blue cards establish hierarchy, following the home prompt card's token and dot grid. */
.gallery .gi-card:has(> .gi-tone-blue),
.ds-card:has(> .dock-illustration > .gi-tone-blue) {
  background-color: var(--ds-blue);
  background-image: radial-gradient(circle, #1217220f 1.7px, transparent 2.15px);
  background-size: 20.6px 20.6px;
  box-shadow: inset 0 0 0 .5px #0000001a;
}
.ds-card:has(> .dock-illustration > .gi-tone-blue) > .dock-illustration { background: transparent; }
.gallery .gi-card:has(> .gi-tone-blue) > .il-copy :is(.ds-card-title, .ds-card-body),
.ds-card:has(> .dock-illustration > .gi-tone-blue) > .il-copy :is(.ds-card-title, .ds-card-body),
.ds-card:has(> .dock-illustration > .gi-tone-blue) > :is(.ds-card-title, .ds-card-body) { color: #fff; }
.gi-tone-blue .ga-chat-thread { background: #fff; }

/* A handoff shows the context that moves with the customer, and the person receiving it. */
.ga-handoff { width: 440px; padding: 24px; border: .5px solid #12172222; border-radius: 16px; background: #fff; box-shadow: var(--ga-shadow); }
.ga-handoff-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ga-handoff-heading > span:last-child { font-size: 12px; color: var(--gi-muted); line-height: 20px; }
.ga-handoff h3 { font-size: 24px; line-height: 30px; letter-spacing: -.5px; }
.ga-handoff-context { margin-top: 19px; }
.ga-handoff-context > span { display: block; font-size: 12px; letter-spacing: 0; color: var(--gi-muted); line-height: 16px; }
.ga-handoff-context p { margin-top: 4px; font-size: 14px; line-height: 20px; }
.ga-handoff-context p + span { margin-top: 13px; }
.ga-handoff-owners { display: flex; align-items: center; gap: 16px; border-top: .5px solid #12172212; margin-top: 20px; padding-top: 16px; justify-content: space-between; }
.ga-handoff-owners > div { display: flex; align-items: center; gap: 8px; }
.ga-handoff-owners .gi-avatar { width: 32px; height: 32px; }
.ga-handoff-owners > div > span { display: flex; flex-direction: column; gap: 2px; }
.ga-handoff-owners b { font-size: 14px; line-height: 20px; }
.ga-handoff-owners small { font-size: 12px; line-height: 16px; }
.ga-handoff-footer { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 12px; color: var(--gi-muted); line-height: 16px; }
.ga-handoff-footer .gi-icon { width: 12px; height: 12px; }

/* The call has identifiable participants and one useful excerpt. */
.ga-call { width: 440px; padding: 24px; border: .5px solid #12172222; border-radius: 16px; background: #fff; box-shadow: var(--ga-shadow); }
.ga-call-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 21px; }
.ga-call-heading > span { display: flex; gap: 8px; align-items: center; color: var(--gi-muted); font-size: 12px; line-height: 20px; }
.ga-call-heading .gi-logo { width: 20px; height: 20px; }
.ga-call-heading > small { font-size: 12px; }
.ga-call h3 { font-size: 24px; line-height: 30px; }
.ga-call-people { display: flex; align-items: center; margin-top: 12px; }
.ga-call-people .gi-avatar { width: 23px; height: 23px; border: 2px solid #fff; }
.ga-call-people .gi-avatar + .gi-avatar { margin-left: -7px; }
.ga-call-people > span { margin-left: 8px; color: var(--gi-muted); font-size: 12px; line-height: 20px; }
.ga-call-player { display: flex; align-items: center; gap: 15px; margin: 25px 0 20px; }
.ga-call-play { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ds-blue); flex: none; }
.ga-call-play .gi-icon { color: #fff; width: 16px; height: 16px; margin-left: 2px; }
.ga-call-wave { display: flex; flex: 1; align-items: center; justify-content: space-between; height: 36px; gap: 4px; }
.ga-call-wave > i { height: var(--wave); width: 3px; border-radius: 2px; background: #e4eaf3; }
.ga-call-wave > i:nth-child(-n+9) { background: var(--ds-blue); }
.ga-call-player > small { font-size: 10px; }
.ga-call-transcript { border-top: .5px solid #12172212; padding-top: 16px; }
.ga-call-transcript > span { color: var(--gi-muted); font-size: 12px; line-height: 16px; }
.ga-call-transcript > p { margin-top: 8px; font-size: 16px; line-height: 23px; }

/* A concrete next step follows the home suggestion card's large type and simple Add action. */
.ga-next { width: 440px; padding: 24px; border: .5px solid #12172226; border-radius: 16px; background: #fff; box-shadow: 0 2px 3px #1217220a, 0 8px 20px -16px #12172233; }
.ga-next-label { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 16px; line-height: 20px; }
.ga-next-label .gi-icon { width: 16px; height: 16px; }
.ga-next h3 { font-size: 24px; line-height: 30px; }
.ga-next > p { font-size: 14px; line-height: 20px; color: var(--gi-muted); margin-top: 12px; }
.ga-next-resource { display: flex; align-items: center; gap: 12px; border-top: .5px solid #12172212; padding-top: 16px; margin-top: 20px; }
.ga-next-resource > .ga-cover { width: 76px; height: 48px; }
.ga-next-resource .ga-cover > b { font-size: 10px; top: 28px; line-height: 12px; width: 60px; }
.ga-next-resource > span:nth-child(2) { display: flex; flex-direction: column; gap: 5px; }
.ga-next-resource b { font-size: 13px; line-height: 20px; }
.ga-next-resource small { font-size: 12px; line-height: 16px; }
.ga-next-add { margin-left: auto; border-radius: 7px; padding: 7px 11px; border: .5px solid #12172226; box-shadow: 0 1px 2px #1217220a; font-size: 12px; }

/* Action plans keep only the task, owner, date and real completion state. */
.ga-plan { width: 440px; padding: 24px 24px 8px; border: .5px solid #12172222; border-radius: 16px; background: #fff; box-shadow: var(--ga-shadow); }
.ga-plan-context { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--gi-muted); margin-bottom: 14px; }
.ga-plan-context .gi-icon { width: 16px; height: 16px; }
.ga-plan h3 { font-size: 24px; line-height: 30px; }
.ga-plan-progress { display: flex; align-items: center; gap: 14px; margin: 19px 0 10px; }
.ga-plan-progress > span { height: 3px; flex: 1; border-radius: 2px; background: #edf0eb; overflow: hidden; }
.ga-plan-progress i { display: block; height: 100%; background: var(--ds-blue); border-radius: inherit; }
.ga-plan-progress > small { font-size: 12px; line-height: 16px; }
.ga-plan-row { display: flex; gap: 12px; align-items: center; min-height: 61px; border-top: .5px solid #12172212; }
.ga-plan-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 0; }
.ga-plan-row b { font-size: 14px; line-height: 20px; }
.ga-plan-row > div > span { font-size: 12px; line-height: 16px; color: var(--gi-muted); }
.ga-plan-row .gi-avatar { width: 28px; height: 28px; }
.ga-plan-check { width: 16px; height: 16px; border: 1px solid #c8cdc1; border-radius: 4px; display: grid; place-items: center; flex: none; }
.ga-plan-row.is-done .ga-plan-check { background: var(--ds-blue); border-color: var(--ds-blue); }
.ga-plan-check > .gi-icon { color: #fff; width: 12px; height: 12px; }
.ga-plan-row.is-done b { color: var(--gi-muted); }

/* One embed illustration, reused for every embed card. The home workspace and pill language lead. */
.gi-scene .ga-art-embed-marquee { width: 560px; }
.ga-embed-marquee { position: relative; width: 560px; height: 334px; }
.ga-embed-marquee > .ga-workspace { position: absolute; width: 504px; left: 28px; top: 0; mask-image: linear-gradient(#000 0%, #000 26%, #0009 52%, transparent 97%); -webkit-mask-image: linear-gradient(#000 0%, #000 26%, #0009 52%, transparent 97%); }
.ga-embed-lanes { position: absolute; top: 104px; left: 0; right: 0; display: flex; flex-direction: column; gap: 12px; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ga-embed-lane { display: flex; overflow: hidden; padding: 2px 0; }
.ga-embed-track { display: flex; flex: none; gap: 10px; padding-right: 10px; animation: ga-embed-scroll 40s linear infinite; animation-play-state: paused; }
.ga-embed-marquee.is-in-view .ga-embed-track { animation-play-state: running; }
.ga-embed-lane--1 .ga-embed-track { animation-duration: 46s; animation-delay: -17s; animation-direction: reverse; }
.ga-embed-lane--2 .ga-embed-track { animation-duration: 43s; animation-delay: -8s; }
.ga-embed-pill { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 42px; padding: 0 16px 0 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 .5px #12172224, 0 2px 3px #12172205; color: var(--ds-ink); font-size: 14px; line-height: 20px; white-space: nowrap; }
.ga-embed-pill-mark { display: grid; place-items: center; flex: none; width: 20px; height: 20px; }
.ga-embed-pill-mark > :is(.gi-icon,.gi-logo) { display: block; width: 20px; height: 20px; color: var(--ds-ink); object-fit: contain; }
@keyframes ga-embed-scroll { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .ga-embed-track { animation: none; }
  .ga-embed-lane--1 .ga-embed-track { transform: translateX(-84px); }
  .ga-embed-lane--2 .ga-embed-track { transform: translateX(-40px); }
}

/* These controls are the actual home markup, exports and home.css rules. Only placement changes. */
.gi-scene .ga-home-composer.rd-prompt { position: relative; left: auto; top: auto; transform: none; width: 470px; height: 104px; flex: none; }
.ga-home-composer .rd-ph { max-width: 100%; }
.ga-home-composer .ga-prompt-placeholder { color: var(--ds-ink-50); }
.ga-home-composer :is(.rd-plus,.rd-send) img { max-width: none; }
.gi-scene :is(.ga-art-chat,.ga-art-start,.ga-art-created,.ga-art-comments) { width: 470px; }
.ga-conversation { width: 470px; height: auto; display: flex; flex-direction: column; gap: 20px; }
.ga-conversation > .ga-chat-thread { position: relative; inset: auto; padding: 0 24px; border: 0; border-radius: 0; background: transparent; }
.ga-conversation > .ga-chat-thread::before { display: none; }
.ga-conversation .ga-answer-label { font-size: 12px; line-height: 16px; gap: 8px; margin: 16px 0 8px; }
.ga-conversation .ga-asset { margin-top: 16px; }
.gi-scene .ga-conversation > .ga-home-composer.rd-prompt { position: relative; bottom: auto; left: auto; }
.ga-created { width: 470px; height: 348px; }
.ga-created > .ga-paper { width: 440px; height: 280px; margin-left: 15px; padding: 24px; }
.ga-created .ga-paper-top { margin-bottom: 16px; }
.ga-created h3 { font-size: 24px; line-height: 30px; margin-bottom: 16px; }
.ga-created .ga-goals { margin-top: 20px; }
.gi-scene .ga-created > .ga-home-composer.rd-prompt { position: absolute; bottom: 0; left: 0; }
.ga-start-suggestions { gap: 8px; margin-top: 16px; }
.ga-start-suggestions > span { height: 28px; padding: 0 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 .5px #12172224; color: var(--ds-ink); font-size: 12px; line-height: 16px; gap: 6px; white-space: nowrap; }
.ga-start-suggestions .gi-icon { width: 16px; height: 16px; }

/* Client-facing AI uses the exact Acme Agent module from the home workspace, enlarged uniformly. */
.gi-scene .ga-art-home-chat { width: 346.5px; }
.ga-home-chat { --chat-scale: 1.5; position: relative; width: calc(231px * var(--chat-scale)); height: calc(219px * var(--chat-scale)); }
.ga-home-chat > .wd-chat { left: 0; top: 0; transform: scale(var(--chat-scale)); transform-origin: top left; }
.ga-home-chat .wd-chat p { font-size: inherit; line-height: inherit; }

/* Avatar and identity share a 32px row; messages start consistently beneath it. */
.ga-comments { width: 470px; display: flex; flex-direction: column; gap: 20px; }
.ga-comments-thread { display: flex; flex-direction: column; gap: 16px; padding: 0 24.37px; }
.ga-comment-row { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.ga-comment-row > .gi-avatar { display: block; width: 32px; height: 32px; margin: 0; }
.ga-comment-meta { display: flex; align-items: center; height: 32px; }
.ga-comment-author { display: flex; align-items: baseline; gap: 8px; font-family: var(--ds-font); }
.ga-comment-author > b { font-size: 14px; line-height: 20px; }
.ga-comment-author > span { font-size: 12px; line-height: 20px; color: var(--gi-muted); }
.ga-comment-row p { margin: 2px 0 0; font-size: 15px; line-height: 22px; }
.ga-mention { color: var(--ds-blue); }

/* A common icon/label scale, independent of each product surface. */
.ga-composition :is(.ga-answer-label,.ga-auto-label,.ga-preview-top,.ga-settings-title,.ga-choose-heading) { align-items: center; gap: 8px; }
.ga-composition :is(.ga-asset-copy > small,.ga-paper-footer,.ga-preview-source,.ga-room-links > span,.ga-plan-context,.ga-ws-embed-title) { display: flex; align-items: center; gap: 6px; }
.ga-composition .ga-asset-copy > small { font-size: 12px; line-height: 16px; }
.ga-composition .ga-asset-copy > small > :is(.gi-icon,.gi-logo) { width: 12px; height: 12px; flex: none; }
.ga-composition :is(.ga-paper-footer,.ga-preview-source,.ga-room-links > span,.ga-plan-context) { font-size: 12px; line-height: 16px; }
.ga-composition :is(.ga-paper-footer,.ga-preview-source,.ga-room-links > span,.ga-plan-context) > .gi-icon { width: 16px; height: 16px; }
.ga-ws-name { gap: 6px; line-height: 20px; }
.ga-ws-name img { width: 20px; height: 20px; }
.ga-ws-share-area { align-items: center; gap: 8px; }
.ga-ws-topbar { height: 40px; }
.ga-ws-share { height: 24px; padding: 0 8px; font-size: 10px; line-height: 16px; }

/* The home chat module gets a compact in-module input and a quiet typing state. */
.ga-home-chat .wd-chat-body { height: 173px; padding-top: 42px; }
.ga-home-chat .wd-bub--res { height: 46px; }
.ga-chat-typing { display: inline-flex; align-items: center; justify-content: center; gap: 3px; width: 28px; height: 16px; margin-left: 5px; }
.ga-chat-typing > i { width: 3px; height: 3px; border-radius: 50%; background: #8b8d89; }
.gi-scene .ga-home-chat .ga-chat-mini.rd-prompt { position: absolute; top: auto; bottom: 7px; left: 8px; width: 215px; height: 32px; padding: 4px; border-radius: 14px; display: flex; flex-direction: row; align-items: center; box-shadow: 0 0 0 .5px #12172226, 0 1px 2px #12172206; }
.ga-chat-mini .rd-ph { padding: 0 0 0 7px; }
.ga-chat-mini .rd-seg { padding: 0; font-size: 9.899px; line-height: 14.849px; font-weight: 400; }
.ga-chat-mini .rd-row { width: auto; margin: 0 0 0 auto; padding: 0; }
.ga-chat-mini .rd-send { width: 22px; height: 22px; }
.ga-chat-mini .rd-send img { width: 23px; height: 23px; left: -.3px; top: -.3px; }

/* Large compositions share one top inset; smaller moments stay centered. */
.gi-scene > .gi-composition--tall { align-self: start; margin-top: 24px; }

/* Slack: two clear rows, each with its icon and text aligned on the same grid. */
.ga-slack { width: 440px; padding: 20px 24px 24px; border: .5px solid #12172222; border-radius: 16px; background: #fff; box-shadow: var(--ga-shadow); }
.ga-slack-header { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: .5px solid #12172212; font-family: var(--ds-font); }
.ga-slack-header > .gi-logo { width: 24px; height: 24px; justify-self: center; }
.ga-slack-header > b { font-size: 13px; line-height: 20px; }
.ga-slack-header > span { font-size: 11px; line-height: 20px; color: var(--gi-muted); }
.ga-slack-message { display: grid; grid-template-columns: 28px 1fr; gap: 12px; margin-top: 16px; }
.ga-slack-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #f4f2ee; }
.ga-slack-avatar > img { width: 20px; height: 20px; }
.ga-slack-author { display: flex; align-items: center; gap: 6px; height: 28px; font-family: var(--ds-font); }
.ga-slack-author > b { font-size: 13px; line-height: 20px; }
.ga-slack-author > span { padding: 1px 4px; border-radius: 3px; background: #f4f2ee; color: var(--gi-muted); font-size: 8px; line-height: 12px; }
.ga-slack-content > p { margin: 2px 0 0; font-size: 15px; line-height: 22px; }
.ga-slack-action { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--ds-blue); font-size: 13px; line-height: 20px; }
.ga-slack-action > .gi-icon { width: 12px; height: 12px; }

/* The same person row serves comments and activity, including avatar identity. */
.ga-activity-people { display: flex; flex-direction: column; gap: 20px; }

/* The generated room uses the existing workspace frame, with real contents. */
.ga-created > .ga-workspace { width: 440px; height: 316px; margin-left: 15px; }
.ga-room-preview h3 { margin: 0 0 16px; }
.ga-room-files { border: .5px solid #1217221a; border-radius: 8px; background: #fff; }
.ga-room-files > div { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; font-size: 13px; line-height: 20px; }
.ga-room-files > div + div { border-top: .5px solid #12172212; }
.ga-room-files > div > .gi-icon:last-child { margin-left: auto; width: 12px; height: 12px; color: var(--gi-muted); }

/* All small product actions share one size. Native home composer buttons stay native. */
.ga-composition :is(.ga-diff-foot > b,.ga-preview-foot > b,.ga-survey-footer > b,.ga-next-add) { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 32px; padding: 0 12px; gap: 8px; border-radius: 8px; font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; }
.ga-composition :is(.ga-diff-foot > b,.ga-preview-foot > b,.ga-survey-footer > b) > .gi-icon { width: 16px; height: 16px; }
.ga-settings-title > .gi-icon, .ga-diff-head > .gi-icon { width: 20px; height: 20px; }
.ga-settings > p { padding-left: 28px; }
.ga-setting .gi-switch { width: 32px; height: 18px; flex: none; padding: 2px; }
.ga-setting .gi-switch::after { width: 14px; height: 14px; }
.ga-setting .gi-switch.is-on::after { margin-left: 14px; }
.ga-choose-option .gi-radio { width: 14px; height: 14px; }
.ga-choose-option.is-selected .gi-radio { border-width: 4px; }

/* Reusable illustration objects: one trigger and one concrete result. */
.ga-triggered { width: 440px; display: flex; flex-direction: column; align-items: center; }
.ga-trigger-pill { display: inline-flex; align-items: center; justify-content: center; height: 44px; gap: 10px; padding: 0 16px; border-radius: 999px; border: .5px solid #12172224; background: #fff; font-size: 14px; line-height: 20px; box-shadow: 0 2px 3px #12172204; }
.ga-trigger-pill > :is(.gi-icon,.gi-logo) { width: 20px; height: 20px; }
.ga-trigger-wire { width: 1px; height: 24px; flex: none; background: #12172226; }
.ga-triggered > .ga-paper { padding: 24px; }
.ga-triggered > .ga-paper h3 { margin-bottom: 16px; }
.ga-trigger-summary > span { font-size: 12px; line-height: 16px; color: var(--gi-muted); }
.ga-trigger-summary > p { margin-top: 4px; font-size: 15px; line-height: 22px; }
.ga-trigger-summary > div { display: flex; gap: 48px; margin-top: 20px; }
.ga-trigger-summary > div > span { display: flex; flex-direction: column; gap: 4px; color: var(--gi-muted); font-size: 12px; line-height: 16px; }
.ga-trigger-summary b { color: var(--ds-ink); font-size: 28px; line-height: 32px; letter-spacing: -.5px; }
.ga-triggered > .ga-workspace { height: 258px; }
.ga-triggered .ga-room-preview h3 { font-size: 24px; line-height: 30px; margin-bottom: 16px; }

/* Every directory shares the same row, spacing and file symbols. */
.ga-directory { width: 440px; padding: 0 12px 12px; border: .5px solid #12172224; border-radius: 16px; background: #fff; box-shadow: var(--ga-shadow); }
.ga-directory-head { height: 64px; padding: 0 12px; display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 24px; }
.ga-directory-head > .gi-icon { width: 20px; height: 20px; }
.ga-directory-rows { display: flex; flex-direction: column; gap: 4px; }
.ga-directory-row { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 12px; border-radius: 8px; font-size: 14px; line-height: 20px; }
.ga-directory-row > .gi-icon { width: 20px; height: 20px; }
.ga-directory-row > b { flex: 1; font-size: inherit; }
.ga-directory-row > small { margin-left: auto; font-size: 12px; line-height: 16px; color: var(--gi-muted); }
.ga-directory-row.is-muted { opacity: .5; }
.ga-directory-row.is-focus { background: #0068f908; box-shadow: inset 0 0 0 .5px #0068f921; }
.ga-directory-row.is-focus > small { color: var(--ds-blue); }
.ga-directory-row.is-lifted { position: relative; z-index: 1; transform: translateX(12px); background: #fff; box-shadow: 0 2px 3px #1217220a, 0 8px 16px -8px #12172224, 0 0 0 .5px #12172224; }
.ga-directory-row .gi-grip { width: 8px; height: 14px; flex: none; margin-right: 0; }

/* Sources and destination share a literal connection, with no decorative orbit. */
.ga-network { position: relative; width: 440px; height: 280px; padding-top: 20px; }
.ga-network-sources { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.ga-network-source { height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; border: .5px solid #12172224; border-radius: 12px; background: #fff; box-shadow: var(--ga-shadow); }
.ga-network-source > :is(.gi-icon,.gi-logo) { width: 24px; height: 24px; }
.ga-network-source > b { font-size: 14px; line-height: 20px; }
.ga-network-wires { display: block; width: 440px; height: 88px; overflow: visible; }
.ga-network-wires path { stroke: #12172226; stroke-width: 1; }
.ga-network-dock { width: 184px; height: 76px; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto; border: .5px solid #12172224; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px #12172208,0 8px 20px -12px #12172225; }
.ga-network-dock > .gi-icon { width: 28px; height: 28px; }
.ga-network-dock > div { display: flex; flex-direction: column; gap: 4px; }
.ga-network-dock b { font-size: 18px; line-height: 22px; }
.ga-network-dock span { color: var(--gi-muted); font-size: 12px; line-height: 16px; }

/* Preview is the same native home chat as the client-facing card. */
.gi-scene .ga-art-publish-preview { width: 323.4px; }
.ga-publish-preview { width: 323.4px; }
.ga-publish-preview .ga-home-chat { --chat-scale: 1.4; height: calc(184px * var(--chat-scale)); }
.ga-publish-preview .wd-chat { height: 184px; }
.ga-publish-preview .wd-chat-body { height: 138px; }
.ga-publish-preview .wd-bub--me { background: var(--ds-blue); }
.ga-publish-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.ga-publish-foot > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--gi-muted); }
.ga-home-chat :is(.wd-chat-name,.wd-chat-sub) { width: auto; max-width: 175px; }
.ga-home-chat .ga-chat-dock-mark { display: grid; place-items: center; }
.ga-home-chat .ga-chat-dock-mark img { position: static; width: 20.199px; height: 13.533px; }
.ga-composition .ga-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 8px; background: var(--ds-blue); color: #fff; font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; }
.ga-action > .gi-icon { width: 16px; height: 16px; }

/* The active phase is the focal point; its neighbours supply only context. */
.ga-roadmap { width: 440px; padding: 24px; border: .5px solid #12172224; border-radius: 16px; background: #fff; box-shadow: var(--ga-shadow); }
.ga-roadmap-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ga-roadmap-head > span:last-child { color: var(--gi-muted); font-size: 12px; line-height: 20px; }
.ga-roadmap h3 { font-size: 24px; line-height: 30px; }
.ga-roadmap-phases { display: flex; flex-direction: column; margin-top: 16px; }
.ga-phase { position: relative; display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 10px 12px; }
.ga-phase:not(:last-child)::after { content: ''; position: absolute; left: 23.5px; top: 42px; width: 1px; height: 36px; background: #1217221a; }
.ga-phase-step { position: relative; z-index: 1; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1px solid #12172226; font-size: 12px; line-height: 16px; color: var(--gi-muted); flex: none; }
.ga-phase-step > .gi-icon { width: 12px; height: 12px; }
.ga-phase > div { display: flex; flex-direction: column; gap: 4px; }
.ga-phase b { font-size: 15px; line-height: 20px; }
.ga-phase small { font-size: 12px; line-height: 16px; }
.ga-phase.is-current { background: #0068f908; border-radius: 10px; }
.ga-phase.is-current .ga-phase-step { color: #fff; background: var(--ds-blue); border-color: var(--ds-blue); }
.ga-phase.is-complete .ga-phase-step { background: #f4f4f2; }

/* An edit and a reply, anchored to the exact passage being discussed. */
.ga-collaboration { position: relative; width: 440px; height: 316px; }
.ga-collaboration > .ga-paper { height: 252px; }
.ga-collab-section > span { color: var(--gi-muted); font-size: 12px; line-height: 16px; }
.ga-collab-selection { position: relative; display: table; margin-top: 8px !important; padding: 3px 5px; background: #0068f910; font-size: 16px !important; line-height: 24px !important; }
.ga-collab-pointer { position: absolute; top: 25px; right: -20px; display: flex; align-items: flex-start; }
.ga-collab-pointer img { width: 20px; height: 24px; }
.ga-collab-pointer > b { margin-top: 16px; margin-left: -4px; padding: 3px 7px; background: var(--ds-blue); color: #fff; border-radius: 4px; font-size: 11px; line-height: 16px; }
.ga-collab-comment { position: absolute; right: 0; bottom: 0; width: 292px; padding: 16px; border: .5px solid #12172224; border-radius: 12px; background: #fff; box-shadow: var(--ga-shadow); }

/* A lesson uses the same resource cover and action as the rest of the system. */
.ga-learning { width: 440px; padding: 24px; border: .5px solid #12172224; border-radius: 16px; background: #fff; box-shadow: var(--ga-shadow); }
.ga-learning-head { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; }
.ga-learning-head > small { margin-left: auto; font-size: 12px; }
.ga-learning-title { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.ga-learning-title h3 { font-size: 22px; line-height: 28px; letter-spacing: -.4px; }
.ga-learning-title > div > span { display: block; margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--gi-muted); }
.ga-learning-progress { margin-top: 24px; }
.ga-learning-progress > span { display: block; height: 4px; border-radius: 2px; background: #1217220a; overflow: hidden; }
.ga-learning-progress i { display: block; width: 40%; height: 100%; background: var(--ds-blue); border-radius: inherit; }
.ga-learning-progress > small { display: block; margin-top: 8px; font-size: 12px; line-height: 16px; }
.ga-learning-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.ga-learning-foot > span { font-size: 12px; line-height: 16px; color: var(--gi-muted); }

/* One metric leads. Context remains available without competing for attention. */
.ga-metric-focus { display: flex; align-items: center; gap: 20px; margin: 24px 0; }
.ga-metric-focus > strong { font-size: 56px; line-height: 60px; letter-spacing: -2px; color: var(--ds-blue); }
.ga-metric-focus > strong > span { font-size: 32px; line-height: 40px; letter-spacing: -1px; }
.ga-metric-focus > div { display: flex; flex-direction: column; gap: 6px; }
.ga-metric-focus b { font-size: 16px; line-height: 22px; }
.ga-metric-focus > div > span { font-size: 12px; line-height: 16px; color: var(--gi-muted); }
.ga-training-bars { padding-top: 4px; border-top: .5px solid #12172212; }
.ga-training-bars .ga-training-row { margin: 16px 0 0; font-size: 14px; line-height: 20px; }
.ga-training-bars .ga-training-row > div { height: 6px; background: #12172208; }
.ga-training-bars .ga-training-row i { background: #12172226; opacity: 1; }
.ga-training-bars .ga-training-row.is-focus i { background: var(--ds-blue); }
.ga-training-bars .ga-training-row.is-focus b { color: var(--ds-blue); }
.ga-analytics-stats { align-items: flex-end; justify-content: flex-start; gap: 40px; padding-bottom: 24px; }
.ga-analytics-stats > .is-primary { margin-right: auto; }
.ga-analytics-stats > .is-primary strong { font-size: 56px; line-height: 60px; letter-spacing: -2px; }
.ga-analytics-stats > div:not(.is-primary) strong { font-size: 28px; line-height: 36px; letter-spacing: -.5px; }
.ga-analytics > svg { height: 100px; }
/* Align conversation copy with the text inset of the shared composer. */
 .ga-home-composer .rd-ph { padding:8px 0 0 12px; }
.ga-home-composer .rd-ph .rd-seg { padding:0; font-size:16px; line-height:22px; }
.ga-conversation > .ga-chat-thread { padding-inline:22px; }
.ga-conversation .ga-user-question { font-size:16px; line-height:22px; }

.ga-conversation .ga-user-question { max-width:80%; margin-left:auto; margin-right:0; }