/* The demonstration follows desktop Gmail's visual vocabulary; all selectors
   stay inside this component so Gmail styling never leaks into the site. */
.difference { background:#f0f3f6; }
.demo-controls { display:flex; width:fit-content; gap:3px; margin:32px auto; padding:4px; border:1px solid #dce3e8; border-radius:100px; background:#e5eaee; }
.demo-controls button { display:flex; align-items:center; gap:8px; border:0; border-radius:100px; padding:10px 20px; min-height:44px; background:transparent; font-size:12px; color:#55626e; transition:background .25s,box-shadow .25s; }
.demo-controls button[aria-pressed="true"] { background:#fff; box-shadow:0 2px 5px #27384912; color:var(--text); font-weight:600; }
.control-mark { height:18px; width:18px; }
.gmail-demo { --gmail-blue:#0b57d0; --gmail-text:#202124; --gmail-muted:#5f6368; margin-top:32px; background:#fff; border:1px solid #d5dce3; border-radius:16px; box-shadow:0 30px 80px -30px #22344840,0 3px 9px #2234480c; overflow:hidden; text-align:left; }
.gmail-demo button { color:inherit; }
.gmail-demo :is(button,div,input,span) { -webkit-font-smoothing:auto; }
.gmail-demo .icon { width:18px; height:18px; stroke-width:1.7; }
.gmail-demo button:disabled { opacity:1; cursor:default; }
.gmail-demo :is(input,button):focus-visible { outline:2px solid #1a73e8; outline-offset:2px; }
.difference > .wrap { width:min(1320px,calc(100% - 80px)); }
.chrome-frame { font:11px/1.4 Arial,sans-serif; background:#e7eaef; color:#3c4043; }
.chrome-tabstrip { display:flex; align-items:center; height:39px; padding:7px 13px 0; gap:18px; }
.window-controls { display:flex; gap:7px; align-items:center; margin:0 7px 7px 1px; }
.window-controls i { width:10px; height:10px; background:#ff6058; border:1px solid #df534b; border-radius:50%; }
.window-controls i:nth-child(2) { background:#ffbd2e; border-color:#dfaa25; }
.window-controls i:nth-child(3) { background:#28c840; border-color:#20b637; }
.chrome-tab { display:flex; align-items:center; gap:9px; align-self:stretch; border-radius:10px 10px 0 0; background:#fafbfc; padding:0 13px; width:270px; min-width:0; position:relative; }
.chrome-tab .gmail-logo { width:15px; height:13px; flex-shrink:0; }
#chrome-tab-title { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.chrome-tab-close { font-size:16px; margin-left:auto; }
.chrome-new-tab { font-size:20px; margin-bottom:6px; }
.chrome-tab-search { margin-left:auto; align-self:flex-start; font-size:19px; }
.chrome-toolbar { height:42px; display:flex; align-items:center; gap:16px; padding:5px 15px; background:#fafbfc; border-bottom:1px solid #dce1e6; }
.chrome-nav-arrow { font-size:19px; }
.muted-arrow { color:#afb4bc; }
.chrome-toolbar > .icon { width:15px; height:15px; }
.chrome-address { display:flex; align-items:center; gap:12px; flex:1; min-width:0; height:30px; padding:0 12px; border-radius:18px; background:#e9edf3; color:#3c4043; }
.chrome-address .icon { width:14px; height:14px; }
#demo-address { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chrome-extension-mark { width:17px; height:17px; }
.chrome-profile { width:22px; height:22px; background:#376c5a; color:white; border-radius:50%; display:grid; place-items:center; font-size:10px; }
.chrome-more { font-size:20px; line-height:1; }
.gmail-app { background:#f6f8fc; color:var(--gmail-text); font:12px/1.4 Arial,sans-serif; }
.gmail-app button { font-family:Arial,sans-serif; }
.gmail-appbar { height:69px; display:flex; align-items:center; gap:18px; padding:10px 19px; }
.gmail-menu-icon { display:grid; place-items:center; width:30px; height:36px; margin-right:-2px; padding:0; border:0; background:none; border-radius:50%; flex-shrink:0; }
.gmail-menu-icon:hover { background:#e3e7ed; }
.gmail-wordmark { display:flex; align-items:center; gap:9px; min-width:158px; font-size:23px; letter-spacing:-.4px; color:#5f6368; }
.gmail-wordmark .gmail-logo { width:29px; height:24px; }
.gmail-search { display:flex; align-items:center; gap:14px; height:44px; border-radius:26px; background:#eaf1fb; padding:0 16px; width:52%; color:#5f6368; font-size:14px; }
.gmail-search > .icon:last-child { margin-left:auto; }
.gmail-search input { width:100%; min-width:0; color:#202124; font:14px Arial,sans-serif; background:none; border:0; outline-offset:4px; }
.gmail-search input::placeholder { color:#5f6368; opacity:1; }
.gmail-utilities { display:flex; gap:17px; color:#5f6368; margin-left:auto; }
.gmail-appbar .account-avatar { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#376c5a; color:#fff; font-size:13px; flex-shrink:0; box-shadow:0 0 0 4px #fff; }
.gmail-workspace { display:grid; grid-template-columns:54px 174px minmax(0,1fr) 40px; padding-bottom:15px; position:relative; }
.folders-collapsed .gmail-workspace { grid-template-columns:54px minmax(0,1fr) 40px; }
.folders-collapsed .gmail-sidebar { display:none; }
.gmail-rail { display:flex; flex-direction:column; align-items:center; gap:23px; padding-top:9px; }
.rail-item { display:flex; align-items:center; flex-direction:column; gap:5px; color:#444746; }
.rail-item small { font-size:9px; }
.rail-item > .icon { padding:5px 12px; box-sizing:content-box; }
.rail-selected > .icon { border-radius:20px; background:#d3e3fd; color:#001d35; }
.gmail-sidebar { padding-right:12px; }
.gmail-sidebar .compose-label { display:flex; align-items:center; gap:14px; width:fit-content; margin:0 0 18px 3px; padding:17px 19px; border-radius:15px; background:#c2e7ff; color:#001d35; font-size:12px; }
.gmail-folder { display:flex; align-items:center; gap:13px; width:100%; height:32px; min-height:32px; padding:0 12px 0 15px; border:0; border-radius:0 20px 20px 0; background:none; text-align:left; white-space:nowrap; font-size:12px !important; }
.gmail-folder .icon { width:16px; height:16px; color:#444746; }
.gmail-folder b { margin-left:auto; font-size:10px; }
.gmail-folder.active { background:#d3e3fd; font-weight:700; color:#001d35; }
.gmail-folder:not(:disabled):hover { background:#e4e7ec; }
.gmail-folder.active:hover { background:#d3e3fd; }
.gmail-label-heading { display:flex; align-items:center; justify-content:space-between; margin:23px 12px 10px 15px; font-size:14px; }
.gmail-folder .clients-icon { color:#8d6b23; fill:#fce8b2; }
.gmail-folder .cold-label-icon { color:#0b57d0; fill:#d3e3fd; }
.gmail-main { background:white; border-radius:15px; min-width:0; height:560px; position:relative; display:flex; flex-direction:column; overflow:hidden; }
.gmail-list-toolbar { display:flex; align-items:center; gap:13px; padding:9px 16px; height:47px; flex-shrink:0; color:#5f6368; }
.gmail-icon-button { display:grid; place-items:center; width:30px; height:32px; padding:5px; border:0; border-radius:50%; background:none; flex-shrink:0; }
.gmail-icon-button:hover { background:#e8eaed; }
.selected-actions { display:flex; gap:10px; align-items:center; }
.gmail-demo .mail-select-all,.gmail-demo input.mail-check { appearance:none; width:13px; height:13px; border:1.5px solid #7b8086; border-radius:2px; padding:0; margin:0; cursor:pointer; flex-shrink:0; background-color:transparent; }
.gmail-demo :is(.mail-select-all,input.mail-check):checked { background:#0b57d0; border-color:#0b57d0; box-shadow:inset 0 0 0 2px white; }
.gmail-demo .mail-select-all:indeterminate { background:linear-gradient(transparent 40%,#0b57d0 40%,#0b57d0 60%,transparent 60%); border-color:#0b57d0; }
.toolbar-decoration { display:flex; align-items:center; gap:18px; }
.toolbar-decoration .tiny-icon { width:11px; height:11px; margin-left:-14px; }
.toolbar-decoration > span:last-child:not(.mail-check) { font-size:21px; line-height:1; }
.gmail-view-name { color:#3c4043; font-size:12px; }
.mail-range { margin-left:auto; font-size:10px; }
.pagination { font-size:22px; gap:22px; margin-left:8px; }
.gmail-tabs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-bottom:1px solid #e4e7ed; min-height:65px; flex-shrink:0; position:relative; }
.gmail-demo[data-state="before"] .gmail-tabs { grid-template-columns:repeat(5,minmax(0,1fr)); }
.gmail-tab { position:relative; display:flex; align-items:center; gap:8px; min-width:0; padding:13px 9px; border:0; background:white; text-align:left; color:#444746; }
.gmail-tab:hover:not(:disabled) { background:#f2f4f7; }
.gmail-tab[aria-selected="true"] { color:var(--gmail-blue); }
.gmail-tab[aria-selected="true"]::after { content:''; position:absolute; height:3px; border-radius:3px 3px 0 0; background:var(--gmail-blue); bottom:0; left:9px; right:9px; }
.gmail-tab .icon,.tab-nocold-icon { width:17px; height:17px; flex-shrink:0; }
.tab-copy { min-width:0; }
.tab-title { display:flex; align-items:center; flex-wrap:wrap; gap:3px 5px; font-size:11px; white-space:nowrap; font-weight:500; }
.tab-fresh { font-size:9px; line-height:1.4; font-weight:500; border-radius:3px; padding:0 4px; background:#1e8e3e; color:#fff; }
.gmail-tab[data-category="cold"] .tab-fresh { background:#0b57d0; }
.gmail-tab[data-category="social"] .tab-fresh { background:#1a73e8; }
.gmail-tab[data-category="forums"] .tab-fresh { background:#a142f4; }
.tab-preview { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; color:#5f6368; margin-top:3px; }
.gmail-mail-panel { min-height:0; outline-offset:-3px !important; flex:1; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:#c4c7c5 transparent; overscroll-behavior:contain; }
.gmail-message-list { position:relative; }
.gmail-demo .mail-row { position:relative; display:flex; align-items:center; gap:10px; padding:0 14px; min-height:43px; height:43px; border-bottom:1px solid #e8eaed; background:#f2f6fc; color:#202124; font:12px/1.4 Arial,sans-serif; }
.gmail-demo .mail-row.is-unread { background:#fff; }
.gmail-demo .mail-row.is-selected { background:#c2dbff; }
.gmail-demo .mail-row:hover { z-index:1; box-shadow:inset 0 -1px #c6cbd2,inset 0 1px #c6cbd2,0 1px 3px #3c40431c; }
.gmail-demo .mail-check { width:12px; height:12px; border:1.5px solid #7b8086; border-radius:2px; flex-shrink:0; }
.gmail-demo .mail-star { width:14px; height:14px; color:#93989d; flex-shrink:0; }
.gmail-demo .mail-star.is-starred { fill:#f4b400; color:#d69b00; }
.gmail-demo .mail-star-button { display:grid; place-items:center; width:21px; height:32px; background:none; border:0; padding:0; flex-shrink:0; color:#93989d; }
.gmail-demo .mail-star-button .icon { width:16px; height:16px; }
.gmail-demo .mail-star-button.is-starred .icon { fill:#f4b400; color:#d69b00; }
.gmail-demo .mail-star-button:hover { color:#5f6368; }
.gmail-demo .mail-open { display:flex; align-items:center; flex:1; min-width:0; gap:11px; padding:0; height:100%; border:0; background:none; font:12px/1.4 Arial,sans-serif; text-align:left; }
.gmail-demo .mail-open:focus-visible { outline-offset:-2px; }
.gmail-demo .mail-sender { width:122px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400; }
.gmail-demo .mail-content { display:flex; align-items:center; min-width:0; flex:1; gap:5px; overflow:hidden; white-space:nowrap; }
.gmail-demo .mail-content b { flex-shrink:0; font-weight:400; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.gmail-demo .mail-content > .mail-snippet { color:#5f6368; overflow:hidden; text-overflow:ellipsis; }
.gmail-demo .mail-time { font-size:10px; color:#5f6368; white-space:nowrap; margin-left:auto; flex-shrink:0; }
.gmail-demo .is-unread :is(.mail-sender,.mail-content b,.mail-time) { font-weight:700; color:#202124; }
.gmail-label,.gmail-demo .cold-chip { display:inline-flex; align-items:center; gap:4px; flex-shrink:0; border-radius:4px; padding:1px 5px; background:#fce8b2; color:#694b08; font-size:10px; font-weight:500; line-height:18px; }
.gmail-demo .inbox-label { color:#444746; background:#e8eaed; }
.gmail-demo .cold-label { color:#0b5e9e; background:#ddf2ff; }
.gmail-demo .cold-chip { background:#ddf2ff; color:#0b5e9e; border-radius:5px; }
.gmail-demo .cold-chip .icon { width:12px; height:12px; stroke-width:2; }
.gmail-demo .mail-pending { font-size:9px; color:#5f6368; background:#e8edf4; padding:2px 5px; border-radius:4px; flex-shrink:0; }
.gmail-empty { padding:48px 20px; text-align:center; font-size:12px; color:#5f6368; }
.gmail-bottom { display:flex; align-items:flex-start; justify-content:space-between; margin-top:auto; gap:20px; padding:20px 17px 15px; color:#5f6368; font-size:9px; flex-shrink:0; }
.gmail-bottom > span:last-child { text-align:right; }
.storage-meter { display:block; height:4px; width:120px; border-radius:4px; background:linear-gradient(90deg,#5f6368 5%,#dadce0 5%); margin-bottom:7px; }
.gmail-details { text-decoration:underline; }
.gmail-sidepanel { display:flex; flex-direction:column; align-items:center; padding-top:17px; gap:28px; }
.gmail-sidepanel > span:not(.sidepanel-rule) { display:grid; place-items:center; width:17px; height:18px; border-radius:2px; font-size:11px; font-weight:bold; }
.google-calendar { color:#1967d2; border:3px solid #4285f4; border-top-width:5px; line-height:1; }
.google-keep { color:white; background:#fbbc04; font-size:16px !important; }
.google-tasks { color:#1a73e8; border:2px solid #1a73e8; border-radius:50% !important; }
.google-contacts { color:#1a73e8; }
.sidepanel-rule { width:18px; height:1px; background:#d9dce2; margin:0 0 -10px; }
.gmail-sidepanel > .icon { width:16px; height:16px; color:#444746; }
.gmail-reader { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 25px 22px; }
.reader-toolbar { display:flex; align-items:center; gap:13px; height:48px; font-size:11px; color:#5f6368; }
.reader-back { display:grid; place-items:center; height:40px; width:40px; margin-left:-12px; border:0; background:none; border-radius:50%; }
.reader-back:hover { background:#e8eaed; }
.reader-back .icon { transform:rotate(180deg); }
.reader-example { margin-left:auto; font-size:9px; }
.gmail-reader .reader-subject { font:400 21px/1.35 Arial,sans-serif; letter-spacing:0; margin:12px 0 24px; }
.reader-labels { display:flex; align-items:center; gap:7px; margin:-12px 0 22px; }
.reader-labels .cold-chip { border:0; }
.reader-labels .cold-chip .icon:last-child { width:10px; }
.reader-explanation { margin:-8px 0 22px; padding:16px; background:#f2f8fd; border:1px solid #d8e8f5; border-radius:8px; color:#3c4043; }
.reader-explanation p { margin:8px 0 12px; font-size:12px; }
.reader-not-cold { background:#fff; border:1px solid #c7d2df; border-radius:16px; padding:7px 12px; color:#0b57d0; font-size:12px !important; }
.reader-meta { display:flex; align-items:center; gap:11px; }
.reader-avatar { width:32px; height:32px; border-radius:50%; background:#e2e7ec; color:#5f6368; display:grid; place-items:center; }
.reader-sender { font-size:12px; }
.reader-address { font-size:10px; color:#5f6368; margin-left:6px; }
.reader-meta small { display:block; color:#5f6368; font-size:10px; margin-top:2px; }
.reader-time { margin-left:auto; color:#5f6368; font-size:10px; }
.gmail-reader .reader-body { white-space:pre-line; font:13px/1.8 Arial,sans-serif; margin:25px 0 0 43px; color:#202124; }
.demo-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 20px; min-height:74px; border-top:1px solid #dce3e9; background:#fbfcfd; }
.demo-narrative { display:flex; align-items:center; gap:10px; min-width:0; }
.demo-indicator { width:7px; height:7px; background:#718a7b; border-radius:50%; flex-shrink:0; }
.demo-status { font-size:12px; color:#51626f; line-height:1.5; }
.gmail-demo[data-playback="playing"] .demo-indicator { background:#16794a; }
.demo-caption { margin-top:25px !important; text-align:center; color:var(--secondary); font-size:13px; }
.demo-caption > span { display:block; font-size:10px; color:#6b7985; margin-top:5px; }
@keyframes mail-arrive { from { opacity:0; transform:translateY(-20px); background:#e1edff; } to { opacity:1; transform:translateY(0); background:#fff; } }
@keyframes mail-file { to { opacity:0; transform:translateX(45px); } }
@keyframes label-appear { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:scale(1); } }
@keyframes fresh-arrive { from { box-shadow:0 0 0 7px #0b57d025; } to { box-shadow:0 0 0 0 #0b57d000; } }
.gmail-demo .mail-row.just-arrived { animation:mail-arrive .65s var(--ease) both; }
.gmail-demo .mail-row.is-filing { animation:mail-file .65s ease-in both; }
.gmail-demo .mail-row.just-labelled .cold-chip { animation:label-appear .35s var(--ease) both; }
.gmail-demo .tab-fresh.just-updated { animation:fresh-arrive .8s ease-out; }
.gmail-demo[data-playback="paused"] :is(.mail-row,.cold-chip,.tab-fresh) { animation-play-state:paused; }
.gmail-demo[data-playback="paused"] .mail-row { animation:none; }
@media (max-width:1100px) {
 .difference > .wrap { width:calc(100% - 48px); }
 .gmail-workspace { grid-template-columns:42px 146px minmax(0,1fr) 32px; }
 .gmail-appbar { gap:14px; padding-inline:15px; } .gmail-wordmark { min-width:126px; font-size:21px; }
 .gmail-sidebar { padding-right:8px; } .gmail-folder { padding-left:11px; gap:9px; font-size:11px !important; }
 .gmail-sidebar .compose-label { padding:15px 16px; gap:11px; }
 .gmail-tab { gap:6px; padding-inline:7px; } .tab-title { font-size:10px; } .gmail-tab .icon,.tab-nocold-icon { width:15px; height:15px; }
 .gmail-demo .mail-sender { width:104px; } .gmail-demo .mail-open { font-size:11px; }
 .gmail-utilities { gap:13px; }
}
@media (max-width:900px) {
 .folders-collapsed .gmail-workspace { grid-template-columns:minmax(0,1fr); padding-left:12px; }
 .gmail-workspace { grid-template-columns:144px minmax(0,1fr); padding-right:12px; }
 .gmail-rail,.gmail-sidepanel { display:none; } .gmail-sidebar { padding-left:7px; } .gmail-wordmark { min-width:91px; }
 .gmail-appbar { gap:12px; } .gmail-search { flex:1; width:auto; font-size:12px; } .gmail-utilities .icon:first-child { display:none; }
 .gmail-tabs,.gmail-demo[data-state="before"] .gmail-tabs { display:flex; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#d1d8e0 transparent; }
 .gmail-tab { flex:0 0 125px; min-height:65px; padding-inline:11px; gap:10px; } .tab-title { font-size:11px; }
 .gmail-demo .mail-row { gap:8px; padding-inline:12px; } .gmail-demo .mail-open { gap:8px; }
 .gmail-demo .mail-sender { width:85px; } .gmail-demo .mail-time { font-size:9px; }
 .gmail-label,.gmail-demo .cold-chip { font-size:9px; padding-inline:4px; }
 .gmail-demo .mail-content { gap:4px; }
 .gmail-demo .mail-content > .mail-snippet { display:none; }
 .demo-status { font-size:11px; }
}
@media (max-width:600px) {
 .difference > .wrap { width:calc(100% - 28px); }
 .demo-controls { margin-block:26px; } .demo-controls button { font-size:11px; padding-inline:17px; }
 .gmail-demo { border-radius:12px; margin-top:26px; }
 .chrome-tabstrip { height:35px; gap:11px; padding:6px 10px 0; } .window-controls { gap:4px; margin-right:0; } .window-controls i { width:7px; height:7px; }
 .chrome-tab { width:210px; font-size:9px; padding-inline:10px; gap:7px; } .chrome-tab .gmail-logo { width:12px; height:11px; } .chrome-tab-search { display:none; }
 .chrome-toolbar { height:36px; gap:10px; padding-inline:10px; } .chrome-nav-arrow { font-size:16px; } .chrome-toolbar > .muted-arrow,.chrome-toolbar > .chrome-puzzle,.chrome-profile { display:none; }
 .chrome-address { padding-inline:9px; gap:7px; height:26px; font-size:9px; } .chrome-address .icon { width:12px; height:12px; } .address-star { display:none; } .chrome-extension-mark { width:15px; height:15px; }
 .gmail-appbar { height:60px; gap:8px; padding-inline:10px; } .gmail-menu-icon { margin:0; width:24px; } .gmail-menu-icon .icon { width:16px; }
 .gmail-wordmark { min-width:0; font-size:20px; gap:6px; } .gmail-wordmark .gmail-logo { width:25px; height:21px; }
 .gmail-search { background:#eaf1fb; padding:0 10px; gap:6px; margin-left:auto; flex:1; height:35px; min-width:0; } .gmail-search > span,.gmail-search > .icon:last-child { display:none; }
 .gmail-search .icon { width:14px; height:14px; } .gmail-search input { font-size:11px; }
 .gmail-utilities { display:none; } .gmail-appbar .account-avatar { width:25px; height:25px; font-size:11px; }
 .gmail-workspace { grid-template-columns:minmax(0,1fr); padding:0 8px 10px; } .gmail-sidebar { display:none; }
 .gmail-main { height:520px; border-radius:10px; } .gmail-list-toolbar { height:43px; padding-inline:12px; } .toolbar-decoration { gap:16px; } .pagination { gap:15px; }
 .folders-open .gmail-sidebar { display:block; position:absolute; z-index:5; left:0; top:0; bottom:0; overflow-y:auto; width:195px; padding:12px; background:#f6f8fc; border-radius:0 15px 15px 0; box-shadow:4px 3px 16px #20212440; }
 .gmail-tabs { min-height:65px; } .gmail-tab { flex-basis:125px; padding-inline:12px; }
 .gmail-demo .mail-row { height:62px; min-height:62px; gap:8px; padding-inline:10px; }
 .gmail-demo .mail-check { width:11px; height:11px; align-self:flex-start; margin-top:17px; } .gmail-demo .mail-star { display:none; }
 .gmail-demo input.mail-check { align-self:center; margin:0; width:12px; height:12px; }
 .gmail-demo .mail-star-button { width:15px; } .gmail-demo .mail-star-button .icon { width:13px; height:13px; }
 .gmail-demo .mail-open { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:center; gap:4px 8px; }
 .gmail-demo .mail-sender { width:auto; font-size:11px; grid-column:1; grid-row:1; }
 .gmail-demo .mail-content { grid-column:1 / -1; grid-row:2; font-size:10px; width:100%; } .gmail-demo .mail-content b { max-width:100%; flex:0 1 auto; }
 .gmail-demo .mail-time { grid-column:2; grid-row:1; font-size:9px; }
 .gmail-demo .mail-row.is-unread .mail-content b { font-weight:400; }
 .gmail-demo .cold-chip { line-height:16px; font-size:9px; }
 .gmail-bottom { font-size:8px; padding:20px 12px 15px; } .storage-meter { width:95px; }
 .gmail-reader { padding-inline:15px; } .gmail-reader .reader-subject { font-size:19px; margin-top:8px; }
 .reader-address { display:block; margin:3px 0 0; font-size:9px; } .reader-time { font-size:9px; align-self:flex-start; }
 .reader-toolbar { gap:8px; } .reader-example { display:none; }
 .gmail-reader .reader-body { font-size:12px; margin-left:0; } .reader-avatar { width:29px; height:29px; flex-shrink:0; }
 .demo-footer { flex-direction:column; align-items:stretch; gap:13px; padding:15px; min-height:128px; }
 .demo-narrative { align-items:flex-start; min-height:33px; } .demo-indicator { margin-top:5px; }
 .demo-caption { font-size:12px; line-height:1.7; } .demo-caption > span { font-size:9px; }
}
@media (prefers-reduced-motion:reduce) {
 .gmail-demo *, .gmail-demo *::before, .gmail-demo *::after { animation:none !important; transition:none !important; }
}