/* Animated, English product walkthrough. All values are illustrative sample data. */
.showcase { --sc-line:#394247; --sc-text:#e8edef; --sc-muted:#a8b4b9; overflow:hidden; border:1px solid #4b555b; border-radius:10px; color:var(--sc-text); background:#1c2022; box-shadow:0 34px 80px rgba(0,0,0,.36); }
.showcase * { box-sizing:border-box; }
.showcase-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.showcase svg:not(.showcase-sprite) { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.showcase-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:31px; padding:0 17px; border-bottom:1px solid #394247; background:#252a2d; color:#aab6ba; font:650 10px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.showcase-topline span:first-child { display:inline-flex; align-items:center; gap:8px; color:#e1e7e9; }
.showcase-topline i { width:6px; height:6px; border-radius:50%; background:#b8c4c8; }
.showcase-appbar { display:flex; align-items:center; gap:7px; height:46px; padding:0 13px; border-bottom:1px solid #394247; background:#1e2325; }
.showcase-appmark { display:grid; place-items:center; width:31px; height:30px; margin-right:5px; color:#e3e9eb; font:800 14px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:-.14em; }
.showcase-app-tab { display:inline-flex; align-items:center; gap:7px; min-width:155px; height:29px; padding:0 9px; border:1px solid #434c51; border-radius:5px; color:#e1e7e9; background:#272d30; font-size:11px; font-weight:610; }
.showcase-app-tab svg { width:13px !important; height:13px !important; }
.showcase-app-tab i { width:5px; height:5px; margin-left:auto; border-radius:50%; background:#99b9aa; }
.showcase-app-tab b { color:#8e9b9f; font-size:15px; font-weight:400; }
.showcase-app-tab.local { min-width:67px; background:transparent; }
.showcase-app-add { display:grid; place-items:center; width:28px; height:28px; border:1px solid #3b4449; border-radius:5px; color:#aebbc0; font-size:17px; }
.showcase-app-spacer { flex:1; }
.showcase-app-locale { padding:0 9px; color:#b6c1c5; font-size:11px; font-weight:700; }
.showcase-app-search { display:inline-flex; align-items:center; gap:5px; height:27px; padding:0 9px; border:1px solid #414b50; border-radius:5px; color:#b2bec2; font:600 10px ui-monospace,SFMono-Regular,Menlo,monospace; }
.showcase-app-search svg { width:13px !important; height:13px !important; }
.showcase-app-pro { padding:6px 9px; border:1px solid #4a555a; border-radius:4px; color:#e6ecee; background:#30383b; font:700 10px ui-monospace,SFMono-Regular,Menlo,monospace; }
.showcase-shell { display:flex; height:520px; min-height:0; background:#1c2022; }
.showcase-rail { display:flex; flex-direction:column; width:56px; flex:none; border-right:1px solid #394247; background:#1d2224; }
.showcase-rail-brand { display:grid; place-items:center; height:51px; border-bottom:1px solid #394247; color:#e3e9eb; font:780 15px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:-.14em; }
.showcase-rail-icons { display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 5px; }
.showcase-rail-icon { display:grid; place-items:center; width:42px; height:37px; border-radius:5px; color:#aebbc0; font-size:19px; }
.showcase-rail-icon.active { background:#30383c; color:#eef2f3; box-shadow:inset 2px 0 #c5ced2; }
.showcase[data-scene="care"] .showcase-rail-icon.active, .showcase[data-scene="compare"] .showcase-rail-icon.active { background:transparent; color:#aebbc0; box-shadow:none; }
.showcase[data-scene="care"] .showcase-rail-icon[data-rail-scene="care"], .showcase[data-scene="compare"] .showcase-rail-icon[data-rail-scene="compare"] { background:#30383c; color:#eef2f3; box-shadow:inset 2px 0 #c5ced2; }
.showcase-rail-rule { width:33px; height:1px; margin:6px 0; background:#394247; }
.showcase-rail-bottom { display:grid; place-items:center; height:46px; margin-top:auto; border-top:1px solid #394247; color:#afbdc2; }
.showcase-workspace { position:relative; flex:1; min-width:0; overflow:hidden; }
.showcase-scene { position:absolute; inset:0; min-width:0; overflow:hidden; opacity:0; transform:translateY(11px); pointer-events:none; transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1); }
.showcase-scene.is-active { z-index:2; opacity:1; transform:none; pointer-events:auto; }
.showcase-terminal-scene { display:flex; }
.showcase-sidebar { position:relative; display:flex; flex-direction:column; width:247px; flex:none; padding:14px 11px 10px; border-right:1px solid #394247; background:#202527; }
.showcase-sidebar-heading small, .showcase-sidebar-heading strong { display:block; }
.showcase-sidebar-heading small { color:#9facb1; font:680 9px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; }
.showcase-sidebar-heading strong { margin:5px 0 12px; font-size:15px; }
.showcase-sidebar-search, .showcase-sftp-search { display:flex; align-items:center; gap:7px; height:32px; padding:0 9px; border:1px solid #485359; border-radius:4px; color:#9aa9ae; font-size:11px; }
.showcase-sidebar-search svg, .showcase-sftp-search svg { width:13px !important; height:13px !important; }
.showcase-sidebar-label { display:flex; justify-content:space-between; gap:5px; margin:23px 3px 8px; color:#aebbc0; font:670 9px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.03em; }
.showcase-sidebar-label span { color:#c9d2d5; white-space:nowrap; }
.showcase-host { display:flex; align-items:center; gap:9px; min-height:51px; padding:7px 8px; border-bottom:1px solid #354045; color:#dce4e6; }
.showcase-host svg { color:#b1c0c4; }
.showcase-host div { min-width:0; }
.showcase-host strong, .showcase-host small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.showcase-host strong { font-size:11px; }
.showcase-host small { margin-top:4px; color:#9eabb0; font:500 9px ui-monospace,SFMono-Regular,Menlo,monospace; }
.showcase-host.selected { border:1px solid #56636a; border-radius:5px; background:#30393d; }
.showcase-host.selected i { width:5px; height:5px; margin-left:auto; border-radius:50%; background:#a9c5b6; }
.showcase-vitals { margin-top:auto; padding:11px; border:1px solid #465157; border-radius:5px; background:#252b2e; }
.showcase-vitals div, .showcase-vitals small { display:flex; justify-content:space-between; gap:10px; color:#aebbc0; font:620 9px ui-monospace,SFMono-Regular,Menlo,monospace; }
.showcase-vitals div b, .showcase-vitals small b { color:#e4eaeb; font-weight:600; }
.showcase-vitals small { margin-top:10px; }
.showcase-vitals > i, .showcase-metric-row > i { display:block; height:4px; margin-top:5px; border-radius:3px; background:#3a4449; overflow:hidden; }
.showcase-vitals em, .showcase-metric-row em { display:block; width:var(--fill); height:100%; background:#bac7cb; transform-origin:left; }
.showcase-terminal-main { display:flex; flex-direction:column; flex:1; min-width:0; }
.showcase-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:43px; padding:0 13px; border-bottom:1px solid #394247; background:#202628; }
.showcase-toolbar > div:first-child { display:flex; align-items:center; gap:7px; min-width:0; white-space:nowrap; }
.showcase-toolbar strong { font-size:11px; }
.showcase-toolbar > div:first-child > span { overflow:hidden; text-overflow:ellipsis; color:#a5b2b7; font:500 10px ui-monospace,SFMono-Regular,Menlo,monospace; }
.showcase-connected { width:6px; height:6px; flex:none; border-radius:50%; background:#9fc2ae; }
.showcase-toolbar-actions { display:flex; gap:4px; }
.showcase-toolbar-actions span { display:flex; align-items:center; gap:5px; padding:5px 7px; border:1px solid #465157; border-radius:4px; color:#cad4d7; font-size:10px; white-space:nowrap; }
.showcase-toolbar-actions svg { width:12px !important; height:12px !important; }
.showcase-terminal-grid { display:flex; flex:1; min-height:0; }
.showcase-terminal-canvas { position:relative; display:flex; flex-direction:column; flex:1; min-width:0; background:#141719; }
.showcase-terminal-lines { flex:1; padding:28px 19px; color:#d0d9dc; font:520 12px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace; overflow:hidden; white-space:nowrap; }
.showcase-terminal-lines p { margin:0; }
.showcase-terminal-lines b { color:#dce6e9; font-weight:610; }
.showcase-terminal-status { display:flex; justify-content:space-between; gap:10px; padding:9px 12px; border-top:1px solid #354045; color:#a6b3b8; font:550 9px ui-monospace,SFMono-Regular,Menlo,monospace; }
.showcase-terminal-status > span:first-child { display:inline-flex; align-items:center; gap:6px; }
.showcase-terminal-status i { width:5px; height:5px; border-radius:50%; background:#9fc2ae; }
.showcase-caret { display:inline-block; width:7px; height:14px; vertical-align:-2px; background:#dce6e9; animation:scBlink 1s steps(1,end) infinite; }
.showcase-sftp { position:relative; display:flex; flex-direction:column; width:305px; flex:none; border-left:1px solid #394247; background:#202527; }
.showcase-sftp-head { display:flex; align-items:center; gap:8px; height:54px; padding:0 12px; border-bottom:1px solid #394247; }
.showcase-sftp-head svg { color:#c1cdd1; }
.showcase-sftp-head strong, .showcase-sftp-head small { display:block; }
.showcase-sftp-head strong { font-size:11px; }
.showcase-sftp-head small { margin-top:3px; color:#a2b0b5; font-size:9px; }
.showcase-sftp-path { display:flex; justify-content:space-between; padding:10px 12px; border-bottom:1px solid #394247; color:#d0dadd; font:580 10px ui-monospace,SFMono-Regular,Menlo,monospace; }
.showcase-sftp-path span { color:#9eacb1; }
.showcase-sftp-search { margin:9px; }
.showcase-sftp-columns, .showcase-sftp-row { display:grid; grid-template-columns:1fr 55px; align-items:center; gap:8px; padding:9px 12px; }
.showcase-sftp-columns { border-block:1px solid #394247; color:#9eacb1; background:#272e31; font:700 9px ui-monospace,SFMono-Regular,Menlo,monospace; }
.showcase-sftp-row { grid-template-columns:15px minmax(0,1fr) 55px; border-bottom:1px solid #354045; color:#d6e0e3; font-size:10px; }
.showcase-sftp-row svg { width:13px !important; height:13px !important; color:#b9c8cb; }
.showcase-sftp-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.showcase-sftp-row small { color:#a5b3b8; text-align:right; font-size:9px; }
.showcase-sftp-foot { display:flex; justify-content:space-between; margin-top:auto; padding:9px 12px; border-top:1px solid #394247; color:#9eacb1; font-size:9px; }
.showcase-scene-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; min-height:89px; padding:15px 22px; border-bottom:1px solid #394247; background:#202527; }
.showcase-scene-heading small, .showcase-compare-head small { color:#a5b3b8; font:680 9px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.09em; }
.showcase-scene-heading h3, .showcase-compare-head h3 { margin:5px 0 3px; font-size:19px; font-weight:660; letter-spacing:-.03em; }
.showcase-scene-heading p, .showcase-compare-head p { margin:0; color:#aebbc0; font-size:11px; }
.showcase-outline-button { flex:none; padding:8px 11px; border:1px solid #576369; border-radius:5px; color:#d6e0e3; background:#30383c; font-size:10px; font-weight:600; }
.showcase-subnav { display:flex; align-items:center; gap:5px; min-height:42px; padding:5px 15px; border-bottom:1px solid #394247; background:#1a1f21; }
.showcase-subnav span { padding:7px 10px; border-radius:4px; color:#aab7bc; font-size:10px; white-space:nowrap; }
.showcase-subnav .selected { color:#eef2f3; background:#30383c; }
.showcase-care-content { flex:1; min-height:0; padding:18px 22px; overflow:auto; }
.showcase-care-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid #455158; border-radius:5px; background:#202628; }
.showcase-care-summary > div { min-width:0; min-height:105px; padding:16px; border-right:1px solid #455158; }
.showcase-care-summary > div:last-child { border-right:0; }
.showcase-care-summary small, .showcase-care-summary strong, .showcase-care-summary span { display:block; }
.showcase-care-summary small { color:#aebbc0; font:670 9px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.06em; }
.showcase-care-summary strong { margin-top:12px; font-size:25px; font-weight:660; letter-spacing:-.05em; }
.showcase-care-summary strong em { color:#9eabb0; font-size:12px; font-style:normal; }
.showcase-care-summary span { margin-top:3px; color:#a8b6ba; font-size:10px; }
.showcase-care-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:12px; margin-top:12px; }
.showcase-data-card { min-height:187px; border:1px solid #455158; border-radius:5px; background:#202628; }
.showcase-data-head { display:flex; justify-content:space-between; gap:8px; align-items:center; min-height:37px; padding:0 14px; border-bottom:1px solid #3a454a; }
.showcase-data-head b { font-size:11px; }
.showcase-data-head span { color:#9eacb1; font:650 8px ui-monospace,SFMono-Regular,Menlo,monospace; }
.showcase-metric-row { display:grid; grid-template-columns:1fr auto; gap:3px 8px; padding:7px 14px; border-bottom:1px solid #354045; color:#aab7bc; font-size:10px; }
.showcase-metric-row strong { color:#dbe4e7; font-weight:610; }
.showcase-metric-row i { grid-column:1 / -1; margin-top:2px; }
.showcase-finding { display:flex; align-items:center; gap:9px; min-height:49px; padding:7px 12px; border-bottom:1px solid #354045; }
.showcase-finding > i { width:6px; height:6px; flex:none; border-radius:50%; background:#d4b28c; }
.showcase-finding:nth-child(4) > i { background:#adbac0; }
.showcase-finding > div { flex:1; min-width:0; }
.showcase-finding strong, .showcase-finding small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.showcase-finding strong { font-size:10px; }
.showcase-finding small { margin-top:3px; color:#a3b0b5; font-size:9px; }
.showcase-finding > span { color:#c5aa88; font:680 8px ui-monospace,SFMono-Regular,Menlo,monospace; }
.showcase-care-note { margin-top:12px; padding:9px 12px; border:1px solid #3d484d; border-radius:4px; color:#aebbc0; background:#242b2d; font-size:10px; }
.showcase-compare-head { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:91px; padding:15px 20px; border-bottom:1px solid #394247; background:#202527; }
.showcase-compare-count { padding:7px 9px; border:1px solid #4b565c; border-radius:5px; color:#cbd5d8; background:#2b3336; font:600 10px ui-monospace,SFMono-Regular,Menlo,monospace; white-space:nowrap; }
.showcase-compare-actions { display:flex; align-items:center; gap:5px; min-height:45px; padding:5px 14px; border-bottom:1px solid #394247; }
.showcase-compare-actions span { padding:7px 10px; color:#aebbc0; font-size:10px; }
.showcase-compare-actions span:first-child { border:1px solid #566168; border-radius:4px; color:#eef2f3; background:#30383c; }
.showcase-compare-actions b { margin-left:auto; color:#aebbc0; font-size:10px; font-weight:590; }
.showcase-compare-grid { display:grid; grid-template-columns:300px minmax(0,1fr); flex:1; min-height:0; }
.showcase-compare-list { border-right:1px solid #394247; background:#202527; }
.showcase-compare-item { min-height:83px; padding:13px 14px; border-bottom:1px solid #394247; }
.showcase-compare-item.active { background:#30393d; box-shadow:inset 2px 0 #bccbd0; }
.showcase-compare-item > span { display:flex; align-items:center; gap:8px; }
.showcase-compare-item strong { font-size:11px; }
.showcase-compare-item em { display:inline-block; margin:8px 0 0 22px; color:#b7c4c9; font:650 9px ui-monospace,SFMono-Regular,Menlo,monospace; font-style:normal; }
.showcase-compare-item small { display:block; margin:5px 0 0 22px; color:#9fadB2; font:510 9px ui-monospace,SFMono-Regular,Menlo,monospace; }
.sc-file-mark { width:13px; height:13px; border:1px solid #aebbc0; border-radius:3px; }
.sc-file-mark.changed { border-color:#dfbd79; background:#635334; }
.sc-file-mark.local { border-color:#75b3c1; background:#294752; }
.sc-file-mark.remote { border-color:#bd9cd3; background:#483a55; }
.sc-file-mark.same { border-color:#a4afb4; background:#3a4449; }
.showcase-diff { min-width:0; background:#15191b; }
.showcase-diff-head { display:flex; justify-content:space-between; gap:8px; align-items:center; min-height:43px; padding:0 15px; border-bottom:1px solid #394247; background:#202628; }
.showcase-diff-head strong { font-size:11px; }
.showcase-diff-head span { color:#a4b2b7; font-size:10px; }
.showcase-diff-code { padding:13px 0; color:#cbd5d8; font:560 11px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace; }
.showcase-diff-code > div { display:grid; grid-template-columns:38px minmax(0,1fr); gap:12px; min-height:28px; align-items:center; padding:0 16px; }
.showcase-diff-code span { color:#86959a; text-align:right; }
.showcase-diff-code code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:inherit; }
.showcase-diff-removed { border-left:2px solid #c86b7c; color:#f0bac2; background:#3c252d; }
.showcase-diff-added { border-left:2px solid #6cb99f; color:#b7e7d3; background:#18342d; }
.showcase-diff-legend { display:flex; flex-wrap:wrap; gap:8px 16px; margin:19px 16px; padding-top:11px; border-top:1px solid #394247; color:#aab7bc; font:550 9px ui-monospace,SFMono-Regular,Menlo,monospace; }
.showcase-diff-legend span { display:inline-flex; align-items:center; gap:6px; }
.showcase-diff-legend i { width:6px; height:6px; border-radius:50%; }
.showcase-diff-legend i.removed { background:#c86b7c; }
.showcase-diff-legend i.added { background:#6cb99f; }
.showcase-diff-legend i.local { background:#75b3c1; }
.showcase-diff-legend i.remote { background:#bd9cd3; }
.showcase-timeline { display:flex; min-height:66px; overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth; border-top:1px solid #465157; background:#202628; }
.showcase-timeline::-webkit-scrollbar { display:none; }
.showcase-timeline button { flex:0 0 17%; position:relative; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:4px; min-width:0; padding:10px 20px; border:0; border-right:1px solid #394247; color:#a9b6ba; background:transparent; text-align:left; cursor:pointer; }
.showcase-timeline button:last-child { border-right:0; }
.showcase-timeline button:hover, .showcase-timeline button[aria-selected="true"] { color:#f0f3f4; background:#293135; }
.showcase-timeline small { color:#9eacb1; font:670 9px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.09em; }
.showcase-timeline strong { overflow:hidden; max-width:100%; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:620; }
.showcase.is-playing .showcase-timeline button[aria-selected="true"]::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:#cbd5d8; transform-origin:left; animation:scProgress 6s linear forwards; }
.showcase[data-paused="true"].is-playing .showcase-timeline button[aria-selected="true"]::after { animation-play-state:paused; }
.showcase-scene.is-active .sc-line { opacity:0; animation:scLine .4s ease forwards; }
.showcase-scene.is-active .sc-line-1 { animation-delay:.25s; }
.showcase-scene.is-active .sc-line-2 { animation-delay:.65s; }
.showcase-scene.is-active .sc-line-3 { animation-delay:1.05s; }
.showcase-scene.is-active .sc-line-4 { animation-delay:1.55s; }
.showcase-scene.is-active .sc-line-5 { animation-delay:1.85s; }
.showcase-scene.is-active .sc-line-6 { animation-delay:2.15s; }
.showcase-scene.is-active .sc-line-7 { animation-delay:2.6s; }
.showcase-scene.is-active .showcase-sftp-row { animation:scRow .45s ease both; }
.showcase-scene.is-active .showcase-sftp-row:nth-of-type(2) { animation-delay:.5s; }
.showcase-scene.is-active .showcase-sftp-row:nth-of-type(3) { animation-delay:.62s; }
.showcase-scene.is-active .showcase-sftp-row:nth-of-type(4) { animation-delay:.74s; }
.showcase-scene.is-active .showcase-sftp-row:nth-of-type(5) { animation-delay:.86s; }
.showcase-scene.is-active .showcase-sftp-row:nth-of-type(6) { animation-delay:.98s; }
.showcase-scene.is-active .showcase-sftp-row:nth-of-type(7) { animation-delay:1.1s; }
.showcase-care-scene.is-active .showcase-care-summary > div, .showcase-care-scene.is-active .showcase-data-card { animation:scRow .5s ease both; }
.showcase-care-scene.is-active .showcase-care-summary > div:nth-child(2) { animation-delay:.12s; }
.showcase-care-scene.is-active .showcase-care-summary > div:nth-child(3) { animation-delay:.24s; }
.showcase-care-scene.is-active .showcase-care-summary > div:nth-child(4) { animation-delay:.36s; }
.showcase-care-scene.is-active .showcase-data-card { animation-delay:.48s; }
.showcase-care-scene.is-active .showcase-data-card:nth-child(2) { animation-delay:.62s; }
.showcase-care-scene.is-active .showcase-metric-row em, .showcase-terminal-scene.is-active .showcase-vitals em { animation:scGrow 1.1s ease both; }
.showcase-compare-scene.is-active .showcase-compare-item { animation:scRow .45s ease both; }
.showcase-compare-scene.is-active .showcase-compare-item:nth-child(2) { animation-delay:.12s; }
.showcase-compare-scene.is-active .showcase-compare-item:nth-child(3) { animation-delay:.24s; }
.showcase-compare-scene.is-active .showcase-compare-item:nth-child(4) { animation-delay:.36s; }
.showcase-compare-scene.is-active .showcase-diff-code > div { animation:scRow .45s ease both; animation-delay:.5s; }
.showcase-compare-scene.is-active .showcase-diff-code > div:nth-child(2) { animation-delay:.75s; }
.showcase-compare-scene.is-active .showcase-diff-code > div:nth-child(3) { animation-delay:1s; }
@keyframes scPanel { from { opacity:.72; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes scLine { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@keyframes scRow { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes scGrow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes scBlink { 50% { opacity:0; } }
@keyframes scProgress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media (max-width:1100px) {
  .showcase-sidebar { width:208px; }
  .showcase-sftp { width:254px; }
  .showcase-toolbar-actions span:nth-child(n+2) { display:none; }
  .showcase-care-content { padding:14px; }
  .showcase-care-summary > div { padding:12px; }
}
@media (max-width:800px) {
  .showcase-shell { height:480px; }
  .showcase-sidebar { display:none; }
  .showcase-sftp { width:34%; min-width:218px; }
  .showcase-scene-heading { min-height:76px; padding:12px; }
  .showcase-scene-heading h3, .showcase-compare-head h3 { font-size:16px; }
  .showcase-scene-heading p { max-width:360px; }
  .showcase-subnav { overflow:hidden; }
  .showcase-subnav span { font-size:9px; padding-inline:7px; }
  .showcase-care-grid { grid-template-columns:1fr; }
  .showcase-care-grid .showcase-data-card:nth-child(2) { display:none; }
  .showcase-compare-grid { grid-template-columns:215px minmax(0,1fr); }
  .showcase-compare-actions span:nth-child(n+3) { display:none; }
}
@media (max-width:600px) {
  .hero-stage { margin-top:36px; }
  .showcase-topline { min-height:28px; padding-inline:9px; font-size:8px; }
  .showcase-topline span:last-child { display:none; }
  .showcase-appbar { height:40px; padding-inline:7px; }
  .showcase-appmark { display:none; }
  .showcase-app-tab { min-width:125px; height:28px; font-size:10px; }
  .showcase-app-tab.local, .showcase-app-locale { display:none; }
  .showcase-app-search { padding-inline:6px; font-size:9px; }
  .showcase-app-pro { padding-inline:6px; font-size:9px; }
  .showcase-shell { height:420px; }
  .showcase-rail { width:43px; }
  .showcase-rail-brand { height:43px; }
  .showcase-rail-icon { width:36px; height:34px; }
  .showcase-rail-rule { width:28px; }
  .showcase-toolbar { min-height:39px; padding-inline:9px; }
  .showcase-toolbar > div:first-child > span, .showcase-toolbar-actions { display:none; }
  .showcase-terminal-lines { padding:19px 12px; font-size:10px; line-height:1.75; }
  .showcase-sftp { display:none; }
  .showcase-terminal-status { font-size:8px; }
  .showcase-scene-heading { min-height:75px; padding:11px; }
  .showcase-scene-heading small, .showcase-compare-head small { font-size:8px; }
  .showcase-scene-heading h3, .showcase-compare-head h3 { font-size:15px; }
  .showcase-scene-heading p { font-size:9px; }
  .showcase-outline-button { display:none; }
  .showcase-subnav { min-height:36px; padding-inline:5px; }
  .showcase-subnav span { padding:6px 7px; }
  .showcase-subnav span:nth-child(n+4) { display:none; }
  .showcase-care-content { padding:9px; }
  .showcase-care-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .showcase-care-summary > div { min-height:76px; padding:9px; border-bottom:1px solid #455158; }
  .showcase-care-summary > div:nth-child(even) { border-right:0; }
  .showcase-care-summary > div:nth-child(n+3) { border-bottom:0; }
  .showcase-care-summary small { font-size:7px; }
  .showcase-care-summary strong { margin-top:7px; font-size:18px; }
  .showcase-care-summary strong em { font-size:9px; }
  .showcase-care-summary span { font-size:8px; }
  .showcase-care-grid { margin-top:8px; }
  .showcase-data-card { min-height:0; }
  .showcase-data-head { min-height:30px; padding-inline:8px; }
  .showcase-metric-row { padding:5px 9px; font-size:8px; }
  .showcase-care-note { margin-top:7px; padding:7px; font-size:8px; }
  .showcase-compare-head { min-height:72px; padding:9px; }
  .showcase-compare-head p { font-size:8px; }
  .showcase-compare-count { display:none; }
  .showcase-compare-actions { min-height:36px; padding-inline:7px; }
  .showcase-compare-actions span { padding:5px 7px; font-size:9px; }
  .showcase-compare-actions b { display:none; }
  .showcase-compare-grid { display:block; }
  .showcase-compare-list { display:none; }
  .showcase-diff-head { min-height:36px; padding-inline:9px; }
  .showcase-diff-code { font-size:9px; }
  .showcase-diff-code > div { grid-template-columns:15px minmax(0,1fr); gap:7px; padding-inline:7px; }
  .showcase-diff-legend { margin-inline:9px; font-size:8px; }
  .showcase-timeline { min-height:59px; }
  .showcase-timeline button { flex-basis:34%; padding:7px; }
  .showcase-timeline small { font-size:7px; }
  .showcase-timeline strong { font-size:9px; }
}
@media (max-width:390px) {
  .showcase-app-search { display:none; }
  .showcase-scene-heading p { display:none; }
  .showcase-care-note { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .showcase-scene { transition:none; transform:none; }
  .showcase-scene.is-active .sc-line, .showcase-scene.is-active .showcase-sftp-row, .showcase-care-scene.is-active .showcase-care-summary > div, .showcase-care-scene.is-active .showcase-data-card, .showcase-care-scene.is-active .showcase-metric-row em, .showcase-terminal-scene.is-active .showcase-vitals em, .showcase-compare-scene.is-active .showcase-compare-item, .showcase-compare-scene.is-active .showcase-diff-code > div, .showcase-timeline button[aria-selected="true"]::after, .showcase-caret { animation:none; opacity:1; transform:none; }
}
/* Expanded walkthrough scenes: one visual workflow for each product area. */
.sc-tour-scene { display:flex; flex-direction:column; }
.sc-tour-head { display:flex; align-items:center; justify-content:space-between; gap:15px; flex:none; min-height:87px; padding:13px 21px; border-bottom:1px solid #394247; background:#202527; }
.sc-tour-head small { color:#a4b2b7; font:690 9px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.09em; }
.sc-tour-head h3 { margin:5px 0 3px; color:#eef2f3; font-size:19px; font-weight:670; letter-spacing:-.035em; }
.sc-tour-head p { margin:0; color:#aebbc0; font-size:11px; }
.sc-tour-badge { flex:none; padding:8px 10px; border:1px solid #536067; border-radius:5px; color:#dce5e8; background:#30383c; font:690 9px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.04em; white-space:nowrap; }
.sc-tour-tabs { display:flex; align-items:center; gap:4px; min-height:42px; padding:5px 14px; border-bottom:1px solid #394247; background:#1b2022; overflow:hidden; }
.sc-tour-tabs span { flex:none; padding:7px 10px; border-radius:4px; color:#adbac0; font-size:10px; white-space:nowrap; }
.sc-tour-tabs .selected { color:#f0f3f4; background:#30383c; }
.sc-tour-panel { min-width:0; overflow:hidden; border:1px solid #465157; border-radius:5px; background:#202628; }
.sc-tour-panel-head { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:38px; padding:0 13px; border-bottom:1px solid #3a454a; }
.sc-tour-panel-head strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.sc-tour-panel-head span { color:#9eacb1; font:620 9px ui-monospace,SFMono-Regular,Menlo,monospace; white-space:nowrap; }
.sc-tour-footer { display:flex; justify-content:space-between; gap:10px; flex:none; min-height:32px; align-items:center; padding:0 18px; border-top:1px solid #394247; color:#a9b6bb; background:#202527; font:680 9px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.04em; }
.sc-files-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:11px; flex:1; min-height:0; padding:12px; }
.sc-files-browser { display:flex; flex-direction:column; }
.sc-files-columns, .sc-files-row { display:grid; grid-template-columns:minmax(0,1fr) 70px 52px; gap:7px; align-items:center; padding:8px 12px; }
.sc-files-columns { border-bottom:1px solid #3a454a; color:#9eacb1; font:680 9px ui-monospace,SFMono-Regular,Menlo,monospace; }
.sc-files-row { border-bottom:1px solid #354045; color:#d8e1e4; font-size:10px; }
.sc-files-row.active { background:#313a3e; }
.sc-files-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-files-row small { color:#a8b5b9; font-size:9px; }
.sc-files-drop { display:flex; align-items:center; gap:10px; margin:9px 11px 11px; padding:9px 11px; border:1px dashed #69767d; border-radius:5px; background:#252e31; }
.sc-files-drop > span { color:#dce6e9; font-size:20px; }
.sc-files-drop strong, .sc-files-drop small { display:block; }
.sc-files-drop strong { font-size:10px; }
.sc-files-drop small { margin-top:2px; color:#a8b6ba; font-size:9px; }
.sc-files-right { display:flex; flex-direction:column; gap:10px; min-width:0; min-height:0; }
.sc-editor { display:flex; flex-direction:column; flex:1; }
.sc-code { flex:1; padding:12px 0; color:#d8e1e4; font:530 11px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; }
.sc-code > div { display:grid; grid-template-columns:32px minmax(0,1fr); gap:9px; padding:0 14px; }
.sc-code em { color:#7f8d92; text-align:right; font-style:normal; }
.sc-code code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:inherit; }
.sc-code code i { color:#b9d1dc; font-style:normal; }
.sc-code code b { color:#d8bd91; font-weight:560; }
.sc-editor-status { display:flex; justify-content:space-between; gap:8px; padding:7px 12px; border-top:1px solid #394247; color:#a8b5ba; font-size:9px; }
.sc-editor-status span { color:#a9c6b6; }
.sc-transfer { display:grid; grid-template-columns:1fr auto; gap:4px 12px; min-height:62px; padding:10px 13px; }
.sc-transfer strong, .sc-transfer small { display:block; }
.sc-transfer strong { font-size:10px; }
.sc-transfer small { margin-top:3px; color:#a9b6ba; font-size:9px; }
.sc-transfer > span { align-self:center; color:#dce5e7; font:680 11px ui-monospace,SFMono-Regular,Menlo,monospace; }
.sc-transfer > i { grid-column:1 / -1; height:3px; overflow:hidden; border-radius:3px; background:#3a454a; }
.sc-transfer > i em { display:block; width:var(--fill); height:100%; background:#b9c8cc; }
.sc-observe-metrics, .sc-security-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); flex:none; margin:12px 12px 0; border:1px solid #465157; border-radius:5px; background:#202628; }
.sc-observe-metrics > div, .sc-security-summary > div { min-width:0; min-height:87px; padding:12px 14px; border-right:1px solid #465157; }
.sc-observe-metrics > div:last-child, .sc-security-summary > div:last-child { border-right:0; }
.sc-observe-metrics small, .sc-security-summary small { display:block; color:#a9b6ba; font:680 9px ui-monospace,SFMono-Regular,Menlo,monospace; }
.sc-observe-metrics strong, .sc-security-summary strong { display:block; margin:8px 0 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#e9eff0; font-size:22px; font-weight:670; letter-spacing:-.04em; }
.sc-observe-metrics span, .sc-security-summary span { display:block; color:#a8b6ba; font-size:9px; }
.sc-observe-metrics i { display:block; height:3px; margin-top:8px; overflow:hidden; border-radius:3px; background:#3d484d; }
.sc-observe-metrics i em { display:block; width:var(--fill); height:100%; background:#b9c8cc; }
.sc-observe-layout { display:grid; grid-template-columns:1.3fr .7fr; gap:11px; flex:1; min-height:0; padding:11px 12px 12px; }
.sc-processes { min-height:0; }
.sc-table-head, .sc-table-row { display:grid; grid-template-columns:2fr .6fr .6fr .8fr; gap:7px; align-items:center; min-height:33px; padding:0 13px; }
.sc-table-head { color:#a1afb4; background:#283034; font:680 9px ui-monospace,SFMono-Regular,Menlo,monospace; }
.sc-table-row { border-top:1px solid #354045; color:#d4dfe1; font:540 10px ui-monospace,SFMono-Regular,Menlo,monospace; }
.sc-table-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-observe-side { display:grid; grid-template-rows:1fr 1fr; gap:10px; min-height:0; }
.sc-side-row { display:flex; justify-content:space-between; gap:10px; align-items:center; min-height:28px; padding:0 12px; border-bottom:1px solid #354045; color:#b4c1c5; font-size:10px; }
.sc-side-row b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#dce4e6; font:590 9px ui-monospace,SFMono-Regular,Menlo,monospace; }
.sc-security-summary { margin:13px 13px 0; }
.sc-security-layout { display:grid; grid-template-columns:1.2fr .8fr; gap:11px; flex:1; min-height:0; padding:11px 13px 13px; }
.sc-security-finding { display:flex; align-items:center; gap:10px; min-height:66px; padding:9px 12px; border-bottom:1px solid #354045; }
.sc-severity { flex:none; padding:5px; border:1px solid #6d5b42; border-radius:3px; color:#e8c99a; background:#463a2c; font:700 8px ui-monospace,SFMono-Regular,Menlo,monospace; }
.sc-severity.muted { border-color:#556168; color:#c6d0d3; background:#333b3f; }
.sc-security-finding > div { flex:1; min-width:0; }
.sc-security-finding strong, .sc-security-finding small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-security-finding strong { font-size:10px; }
.sc-security-finding small { margin-top:4px; color:#a7b5ba; font-size:9px; }
.sc-security-finding b { color:#9eacb1; font:650 8px ui-monospace,SFMono-Regular,Menlo,monospace; }
.sc-security-context p { margin:0; padding:15px; color:#b7c3c7; font-size:11px; line-height:1.55; }
.sc-security-context > div:not(.sc-tour-panel-head) { display:flex; justify-content:space-between; gap:8px; padding:9px 15px; border-top:1px solid #354045; color:#acb9bd; font-size:10px; }
.sc-security-context > div strong { color:#e0e8ea; font-weight:580; }
.sc-catalog-layout, .sc-docker-layout, .sc-data-layout, .sc-nginx-layout, .sc-flow-layout { display:grid; gap:11px; flex:1; min-height:0; padding:12px; }
.sc-catalog-layout { grid-template-columns:1.2fr .8fr; }
.sc-catalog-row { display:grid; grid-template-columns:19px minmax(0,1fr) 56px 70px; gap:9px; align-items:center; min-height:53px; padding:6px 12px; border-bottom:1px solid #354045; }
.sc-catalog-row > i { color:#bac7cb; font-size:15px; font-style:normal; }
.sc-catalog-row > div { min-width:0; }
.sc-catalog-row strong, .sc-catalog-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-catalog-row strong { font-size:11px; }
.sc-catalog-row small { margin-top:3px; color:#a7b5ba; font-size:9px; }
.sc-catalog-row > span { color:#aebbc0; font:550 9px ui-monospace,SFMono-Regular,Menlo,monospace; }
.sc-catalog-row em { padding:5px 6px; border:1px solid #4d5a60; border-radius:4px; color:#c7d2d6; background:#30383b; text-align:center; font-size:9px; font-style:normal; }
.sc-catalog-row em.available { border-color:#bfcbd0; color:#172023; background:#dfe6e8; }
.sc-catalog-side { display:grid; grid-template-rows:1fr auto; gap:11px; }
.sc-quick-item { display:flex; justify-content:space-between; gap:10px; align-items:center; min-height:46px; padding:0 13px; border-bottom:1px solid #354045; color:#cbd6d9; font-size:10px; }
.sc-quick-item b { color:#e4ebed; font-weight:580; }
.sc-catalog-note { padding:13px; color:#aebbc0; font-size:10px; line-height:1.5; }
.sc-docker-metrics, .sc-nginx-metrics { margin-top:12px; }
.sc-docker-layout { grid-template-columns:1.1fr .9fr; }
.sc-docker-row { display:grid; grid-template-columns:7px minmax(0,1fr) 62px 54px; gap:10px; align-items:center; min-height:60px; padding:8px 12px; border-bottom:1px solid #354045; }
.sc-docker-row > i { width:6px; height:6px; border-radius:50%; background:#9dbda9; }
.sc-docker-row.stopped > i { background:#8b989d; }
.sc-docker-row > div { min-width:0; }
.sc-docker-row strong, .sc-docker-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-docker-row strong { font-size:11px; }
.sc-docker-row small { margin-top:4px; color:#a8b5b9; font-size:9px; }
.sc-docker-row > span, .sc-docker-row > em { color:#cad5d8; font-size:9px; font-style:normal; }
.sc-docker-row > em { padding:5px; border:1px solid #4d5a60; border-radius:4px; text-align:center; }
.sc-compose { display:flex; flex-direction:column; }
.sc-compose .sc-code { flex:1; }
.sc-compose-foot { padding:10px 12px; border-top:1px solid #394247; color:#a8b6ba; font-size:10px; }
.sc-data-layout { grid-template-columns:235px minmax(0,1fr); }
.sc-data-tree > div:not(.sc-tour-panel-head) { display:grid; grid-template-columns:18px 1fr; gap:0 8px; align-items:center; min-height:60px; padding:8px 11px; border-bottom:1px solid #354045; }
.sc-data-tree > div.active { background:#30393d; }
.sc-data-tree > div span { grid-row:span 2; color:#b8c6ca; font-size:16px; }
.sc-data-tree > div strong { font-size:11px; }
.sc-data-tree > div small { grid-column:2; margin-top:3px; color:#a7b5b9; font-size:9px; }
.sc-data-main { display:flex; flex-direction:column; gap:11px; min-width:0; }
.sc-data-table { flex:1; }
.sc-data-row { display:grid; grid-template-columns:50px 1fr 1.5fr 65px; gap:8px; min-height:35px; align-items:center; padding:0 13px; border-bottom:1px solid #354045; color:#d5dfe2; font-size:10px; }
.sc-data-row.heading { color:#a7b4b9; background:#293136; font:660 9px ui-monospace,SFMono-Regular,Menlo,monospace; }
.sc-data-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-redis-key { display:flex; align-items:center; gap:12px; min-height:62px; padding:10px 13px; }
.sc-redis-key > div { min-width:0; }
.sc-redis-key strong, .sc-redis-key small { display:block; }
.sc-redis-key strong { font-size:10px; }
.sc-redis-key small { margin-top:3px; color:#a9b6ba; font-size:9px; }
.sc-redis-key code { flex:1; overflow:hidden; color:#c3d6ce; text-overflow:ellipsis; white-space:nowrap; font:530 10px ui-monospace,SFMono-Regular,Menlo,monospace; }
.sc-redis-key > span { color:#a8b6ba; font-size:9px; white-space:nowrap; }
.sc-nginx-layout { grid-template-columns:1.15fr .85fr; }
.sc-traffic-bars { display:flex; align-items:end; gap:5px; height:119px; padding:15px 13px 0; border-bottom:1px solid #394247; }
.sc-traffic-bars i { flex:1; height:var(--h); border-radius:2px 2px 0 0; background:#aab9be; }
.sc-nginx-route { display:flex; justify-content:space-between; align-items:center; min-height:32px; padding:0 13px; border-bottom:1px solid #354045; color:#cbd5d8; font:530 10px ui-monospace,SFMono-Regular,Menlo,monospace; }
.sc-nginx-route b { color:#a9b6ba; font-weight:550; }
.sc-vhosts > div:not(.sc-tour-panel-head) { position:relative; min-height:73px; padding:13px; border-bottom:1px solid #354045; }
.sc-vhosts strong, .sc-vhosts small { display:block; }
.sc-vhosts strong { font-size:11px; }
.sc-vhosts small { max-width:80%; margin-top:5px; overflow:hidden; color:#a7b5ba; text-overflow:ellipsis; white-space:nowrap; font:530 9px ui-monospace,SFMono-Regular,Menlo,monospace; }
.sc-vhosts em { position:absolute; top:14px; right:13px; color:#afc9ba; font:680 8px ui-monospace,SFMono-Regular,Menlo,monospace; font-style:normal; }
.sc-vhosts p { margin:12px 13px; color:#aebbc0; font-size:10px; }
.sc-flow-layout { grid-template-columns:1.15fr .85fr; }
.sc-flow-backdrop { display:grid; place-items:center; min-width:0; border:1px solid #394247; border-radius:5px; background:repeating-linear-gradient(0deg,#1a2022 0,#1a2022 33px,#202628 34px); }
.sc-flow-panel { width:min(490px,calc(100% - 30px)); overflow:hidden; border:1px solid #69767c; border-radius:7px; background:#242c2f; box-shadow:0 20px 45px #0008; }
.sc-flow-search { display:flex; align-items:center; gap:9px; height:47px; padding:0 13px; border-bottom:1px solid #465157; color:#bcc9cd; font-size:11px; }
.sc-flow-search svg { width:15px !important; height:15px !important; }
.sc-flow-search span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-flow-search kbd { padding:4px; border:1px solid #56636a; border-radius:3px; color:#aab7bc; font:600 9px ui-monospace,SFMono-Regular,Menlo,monospace; }
.sc-flow-label { padding:8px 12px; color:#a5b2b7; font:650 9px ui-monospace,SFMono-Regular,Menlo,monospace; }
.sc-flow-row { display:flex; align-items:center; gap:9px; min-height:53px; padding:7px 12px; border-top:1px solid #394247; }
.sc-flow-row.active { background:#364247; }
.sc-flow-row > span { flex:1; }
.sc-flow-row strong, .sc-flow-row small { display:block; }
.sc-flow-row strong { font-size:10px; }
.sc-flow-row small { margin-top:3px; color:#a8b6ba; font-size:9px; }
.sc-flow-row b { color:#aab9be; font-size:12px; }
.sc-flow-foot { padding:10px 12px; border-top:1px solid #394247; color:#a7b5ba; font-size:9px; }
.sc-flow-side { display:flex; flex-direction:column; gap:11px; }
.sc-flow-side > div { flex:1; }
.sc-tour-scene.is-active .sc-tour-head, .sc-tour-scene.is-active .sc-tour-tabs, .sc-tour-scene.is-active .sc-observe-metrics, .sc-tour-scene.is-active .sc-security-summary { animation:scRow .45s ease both; }
.sc-tour-scene.is-active .sc-tour-tabs { animation-delay:.12s; }
.sc-tour-scene.is-active .sc-observe-metrics, .sc-tour-scene.is-active .sc-security-summary { animation-delay:.22s; }
.sc-tour-scene.is-active .sc-tour-panel { animation:scPanel .35s ease both; animation-delay:.05s; }
.sc-tour-scene.is-active .sc-tour-panel:nth-child(2) { animation-delay:.12s; }
.sc-tour-scene.is-active .sc-files-row, .sc-tour-scene.is-active .sc-table-row, .sc-tour-scene.is-active .sc-catalog-row, .sc-tour-scene.is-active .sc-docker-row, .sc-tour-scene.is-active .sc-data-row, .sc-tour-scene.is-active .sc-flow-row { animation:scPanel .32s ease both; animation-delay:.12s; }
.sc-tour-scene.is-active .sc-files-row:nth-of-type(3), .sc-tour-scene.is-active .sc-table-row:nth-of-type(3), .sc-tour-scene.is-active .sc-catalog-row:nth-of-type(3), .sc-tour-scene.is-active .sc-docker-row:nth-of-type(3), .sc-tour-scene.is-active .sc-data-row:nth-of-type(3), .sc-tour-scene.is-active .sc-flow-row:nth-of-type(3) { animation-delay:.2s; }
.sc-tour-scene.is-active .sc-files-row:nth-of-type(n+4), .sc-tour-scene.is-active .sc-table-row:nth-of-type(n+4), .sc-tour-scene.is-active .sc-catalog-row:nth-of-type(n+4), .sc-tour-scene.is-active .sc-docker-row:nth-of-type(n+4), .sc-tour-scene.is-active .sc-data-row:nth-of-type(n+4), .sc-tour-scene.is-active .sc-flow-row:nth-of-type(n+4) { animation-delay:.28s; }
.sc-tour-scene.is-active .sc-transfer > i em, .sc-tour-scene.is-active .sc-observe-metrics i em { animation:scGrow 1.2s ease both; animation-delay:.25s; }
.sc-nginx-scene.is-active .sc-traffic-bars i { animation:scGrow 1.1s ease both; transform-origin:bottom; }
@media (max-width:1100px) {
  .sc-tour-head { padding-inline:14px; }
  .sc-observe-layout, .sc-security-layout, .sc-catalog-layout, .sc-docker-layout, .sc-data-layout, .sc-nginx-layout, .sc-flow-layout { gap:8px; padding:8px; }
  .sc-data-layout { grid-template-columns:185px minmax(0,1fr); }
  .sc-files-layout { gap:8px; padding:8px; }
}
@media (max-width:800px) {
  .sc-tour-head { min-height:74px; }
  .sc-tour-head h3 { font-size:16px; }
  .sc-tour-head p { font-size:10px; }
  .sc-tour-badge { font-size:8px; }
  .sc-files-layout { grid-template-columns:.8fr 1.2fr; }
  .sc-files-drop { display:none; }
  .sc-files-row { min-height:29px; }
  .sc-observe-side, .sc-security-context, .sc-catalog-side, .sc-compose, .sc-data-tree, .sc-vhosts, .sc-flow-side { display:none; }
  .sc-observe-layout, .sc-security-layout, .sc-catalog-layout, .sc-docker-layout, .sc-data-layout, .sc-nginx-layout, .sc-flow-layout { display:flex; }
  .sc-observe-layout > .sc-tour-panel, .sc-security-layout > .sc-tour-panel, .sc-catalog-layout > .sc-tour-panel, .sc-docker-layout > .sc-tour-panel, .sc-data-main, .sc-nginx-layout > .sc-tour-panel, .sc-flow-backdrop { flex:1; min-width:0; }
  .sc-observe-metrics > div, .sc-security-summary > div { padding:9px; min-height:73px; }
  .sc-observe-metrics strong, .sc-security-summary strong { font-size:17px; }
}
@media (max-width:600px) {
  .sc-tour-head { min-height:70px; padding:9px; }
  .sc-tour-head small { font-size:8px; }
  .sc-tour-head h3 { font-size:14px; }
  .sc-tour-head p, .sc-tour-badge { display:none; }
  .sc-tour-tabs { min-height:35px; padding:4px; }
  .sc-tour-tabs span { padding:6px; font-size:9px; }
  .sc-tour-tabs span:nth-child(n+4) { display:none; }
  .sc-tour-footer { min-height:27px; padding-inline:8px; font-size:7px; }
  .sc-tour-footer span:nth-child(2) { display:none; }
  .sc-tour-panel-head { min-height:31px; padding-inline:8px; }
  .sc-tour-panel-head strong { font-size:10px; }
  .sc-tour-panel-head span { font-size:8px; }
  .sc-files-layout { display:block; padding:7px; }
  .sc-files-browser { display:none; }
  .sc-files-right { height:100%; gap:7px; }
  .sc-code { font-size:9px; }
  .sc-code > div { grid-template-columns:18px minmax(0,1fr); gap:6px; padding-inline:7px; }
  .sc-transfer { min-height:52px; padding:7px; }
  .sc-transfer strong, .sc-transfer > span { font-size:9px; }
  .sc-transfer small { font-size:8px; }
  .sc-observe-metrics, .sc-security-summary { grid-template-columns:repeat(2,minmax(0,1fr)); margin:7px 7px 0; }
  .sc-observe-metrics > div, .sc-security-summary > div { min-height:58px; padding:6px 8px; border-bottom:1px solid #465157; }
  .sc-observe-metrics > div:nth-child(even), .sc-security-summary > div:nth-child(even) { border-right:0; }
  .sc-observe-metrics > div:nth-child(n+3), .sc-security-summary > div:nth-child(n+3) { border-bottom:0; }
  .sc-observe-metrics small, .sc-security-summary small { font-size:7px; }
  .sc-observe-metrics strong, .sc-security-summary strong { margin:4px 0 0; font-size:15px; }
  .sc-observe-metrics span, .sc-security-summary span { font-size:7px; }
  .sc-observe-metrics i { margin-top:4px; }
  .sc-observe-layout, .sc-security-layout, .sc-catalog-layout, .sc-docker-layout, .sc-data-layout, .sc-nginx-layout, .sc-flow-layout { padding:7px; }
  .sc-table-head, .sc-table-row { grid-template-columns:1.4fr .5fr .5fr .6fr; gap:4px; min-height:28px; padding-inline:7px; font-size:8px; }
  .sc-security-finding { min-height:60px; padding:7px; }
  .sc-security-finding strong { font-size:9px; }
  .sc-security-finding small { font-size:8px; }
  .sc-security-finding b { display:none; }
  .sc-catalog-row { grid-template-columns:14px minmax(0,1fr) 35px 50px; gap:4px; min-height:48px; padding-inline:7px; }
  .sc-catalog-row strong { font-size:9px; }
  .sc-catalog-row small, .sc-catalog-row > span, .sc-catalog-row em { font-size:8px; }
  .sc-docker-row { grid-template-columns:6px minmax(0,1fr) 45px; gap:5px; min-height:49px; padding-inline:7px; }
  .sc-docker-row em { display:none; }
  .sc-docker-row strong { font-size:10px; }
  .sc-docker-row small, .sc-docker-row > span { font-size:8px; }
  .sc-data-row { grid-template-columns:35px 1fr 1.2fr 48px; gap:3px; min-height:32px; padding-inline:7px; font-size:8px; }
  .sc-redis-key { display:block; min-height:69px; padding:8px; }
  .sc-redis-key code { display:block; margin-top:6px; font-size:8px; }
  .sc-redis-key > span { display:none; }
  .sc-traffic-bars { height:90px; }
  .sc-flow-panel { width:calc(100% - 12px); }
  .sc-flow-search { height:38px; padding-inline:7px; font-size:9px; }
  .sc-flow-row { min-height:45px; padding:5px 7px; }
  .sc-flow-row strong { font-size:9px; }
  .sc-flow-row small { font-size:8px; }
  .sc-flow-foot { font-size:8px; }
}
@media (prefers-reduced-motion:reduce) {
  .sc-tour-scene.is-active .sc-tour-head, .sc-tour-scene.is-active .sc-tour-tabs, .sc-tour-scene.is-active .sc-observe-metrics, .sc-tour-scene.is-active .sc-security-summary, .sc-tour-scene.is-active .sc-tour-panel, .sc-tour-scene.is-active .sc-files-row, .sc-tour-scene.is-active .sc-table-row, .sc-tour-scene.is-active .sc-catalog-row, .sc-tour-scene.is-active .sc-docker-row, .sc-tour-scene.is-active .sc-data-row, .sc-tour-scene.is-active .sc-flow-row, .sc-tour-scene.is-active .sc-transfer > i em, .sc-tour-scene.is-active .sc-observe-metrics i em, .sc-nginx-scene.is-active .sc-traffic-bars i { animation:none; opacity:1; transform:none; }
}
.showcase-topline b { color:#e5ebed; font-weight:700; }
.showcase-care-extras { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px; }
.showcase-care-extras span { display:flex; justify-content:space-between; gap:6px; padding:7px 9px; border:1px solid #3e494e; border-radius:4px; color:#aab7bb; background:#252b2d; font-size:9px; white-space:nowrap; }
.showcase-care-extras b { color:#e0e7e9; font-weight:620; }
.showcase:not([data-scene="terminal"]) .showcase-rail-icon.active { background:transparent; color:#aebbc0; box-shadow:none; }
.showcase[data-scene="files"] .showcase-rail-icons .showcase-rail-icon:nth-child(5),
.showcase[data-scene="compare"] .showcase-rail-icons .showcase-rail-icon:nth-child(5),
.showcase[data-scene="care"] .showcase-rail-icons .showcase-rail-icon:nth-child(6),
.showcase[data-scene="security"] .showcase-rail-icons .showcase-rail-icon:nth-child(6),
.showcase[data-scene="catalog"] .showcase-rail-icons .showcase-rail-icon:nth-child(7),
.showcase[data-scene="docker"] .showcase-rail-icons .showcase-rail-icon:nth-child(7),
.showcase[data-scene="data"] .showcase-rail-icons .showcase-rail-icon:nth-child(7),
.showcase[data-scene="nginx"] .showcase-rail-icons .showcase-rail-icon:nth-child(7),
.showcase[data-scene="observe"] .showcase-rail-icons .showcase-rail-icon:nth-child(8),
.showcase[data-scene="flow"] .showcase-rail-icons .showcase-rail-icon:nth-child(2) { background:#30383c; color:#eef2f3; box-shadow:inset 2px 0 #c5ced2; }
@media (max-width:600px) {
  .showcase-care-extras { grid-template-columns:1fr; gap:4px; }
  .showcase-care-extras span { padding:5px 7px; font-size:8px; }
}
@media (max-width:600px) {
  .showcase-care-summary > div { min-height:68px; padding:7px; }
  .showcase-care-summary strong { font-size:17px; }
  .showcase-care-grid { margin-top:6px; }
  .showcase-care-grid .showcase-data-card:first-child { display:none; }
  .showcase-care-grid .showcase-data-card:nth-child(2) { display:block; }
  .showcase-finding { min-height:39px; padding:5px 7px; }
  .showcase-finding strong { font-size:9px; }
  .showcase-finding small { font-size:8px; }
  .showcase-care-extras { display:none; }
}