/* Smart Factory moving screens. Generated by scripts/screens/build.mjs from screens/src. */
:root{--ms-bg: #FFFFFF; --ms-detail: #F2F2F7; --ms-card: #FFFFFF;
  --ms-label: #000000; --ms-label2: rgba(0,0,4,.85); --ms-label3: rgba(0,0,8,.47); --ms-label5: rgba(0,0,8,.2);
  --ms-unsel: #949697; --ms-hair: #C6C6C8; --ms-gray6: #F4F4F5; --ms-track: rgba(0,0,0,.08); --ms-fillbtn: rgba(118,118,128,.12);
  --ms-blue: #007AFF; --ms-underlay: #FFFFFF;
  --ms-active: #65C366; --ms-change: #FF9500; --ms-setup: #E040FB; --ms-np: #8A8A94; --ms-warn: #EC4D3D;
  --ms-active-q: #E7F7E7; --ms-change-q: #FFF5E5; --ms-setup-q: #FBE8FF;
  --ms-oee: #30B0C7; --ms-nu: #EE6EA5; --ms-oee-text: #30B0C7; --ms-nu-text: #EE6EA5; --ms-good: #34C759; --ms-axis: #9E9EA1; --ms-axisline: #D9D9D9;
  --ms-shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 32px rgba(17,24,39,.10);}
html.sf-dark-mode{--ms-bg: #000000; --ms-detail: #000000; --ms-card: #1C1C1E;
    --ms-label: #FFFFFF; --ms-label2: rgba(250,250,255,.85); --ms-label3: rgba(250,250,255,.54); --ms-label5: rgba(250,250,255,.2);
    --ms-unsel: #7F8081; --ms-hair: #38383A; --ms-gray6: #1C1C1E; --ms-track: rgba(255,255,255,.1); --ms-fillbtn: rgba(118,118,128,.24);
    --ms-blue: #4791F8; --ms-underlay: #2C2C2E;
    --ms-active: #30D158; --ms-change: #FF9F0A; --ms-setup: #BF5AF2; --ms-np: #767680; --ms-warn: #D24E47;
    --ms-active-q: #2D3A2B; --ms-change-q: #362E22; --ms-setup-q: #261230;
    --ms-oee: #287D8D; --ms-nu: #C9447B; --ms-oee-text: #40C8E0; --ms-nu-text: #FF74B0; --ms-good: #32D74B; --ms-axis: #7E7D7E; --ms-axisline: #504E4D;
    --ms-shadow: 0 0 0 1px #2C2C2E, 0 12px 32px rgba(0,0,0,.5);}
.sfs .ms-stage, .ms-stage.sfs{container: ms-stage / inline-size;}
.sfs .ms, .ms.sfs{font-family: Inter, -apple-system, "Segoe UI", sans-serif; color: var(--ms-label); background: var(--ms-bg); border-radius: 20px; overflow: hidden; box-shadow: var(--ms-shadow); height: 620px; display: grid; -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 0;}
html body .sfs:not(#sfs-a):not(#sfs-b) .ms{font-family: Inter, -apple-system, "Segoe UI", sans-serif !important;color: var(--ms-label) !important}
.sfs .ms svg{display: block;}
.sfs [data-status="setup"], [data-status="setup"].sfs, .sfs [data-s="setup"], [data-s="setup"].sfs{--st: var(--ms-setup); --tint: var(--ms-setup-q);}
.sfs [data-status="active"], [data-status="active"].sfs, .sfs [data-s="active"], [data-s="active"].sfs{--st: var(--ms-active); --tint: var(--ms-active-q);}
.sfs [data-status="change"], [data-status="change"].sfs, .sfs [data-s="change"], [data-s="change"].sfs{--st: var(--ms-change); --tint: var(--ms-change-q);}
.sfs [data-status="np"], [data-status="np"].sfs, .sfs [data-s="np"], [data-s="np"].sfs{--st: var(--ms-np); --tint: transparent;}
.sfs .ms-dot, .ms-dot.sfs{display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--st); transition: background-color .5s ease;}
.sfs .ms-list, .ms-list.sfs{display: flex; flex-direction: column; min-width: 0; min-height: 0;}
.sfs .ms-head, .ms-head.sfs{padding: 22px 18px 0;}
.sfs .ms-title, .ms-title.sfs{display: flex; align-items: center; gap: 10px; font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -.01em;}
html body .sfs:not(#sfs-a):not(#sfs-b) .ms-title{line-height: 40px !important;font-weight: 700 !important;letter-spacing: -.01em !important}
.sfs .ms-titlechev, .ms-titlechev.sfs{display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: var(--ms-fillbtn); color: var(--ms-blue); align-items: center; justify-content: center;}
html body .sfs:not(#sfs-a):not(#sfs-b) .ms-titlechev{color: var(--ms-blue) !important}
.sfs .ms-titlechev svg{width: 11px; height: 8px;}
.sfs .ms-tabs, .ms-tabs.sfs{display: flex; gap: 4px; margin: 14px -6px 0; white-space: nowrap; overflow: hidden;}
.sfs .ms-tab, .ms-tab.sfs{font-size: 16px; line-height: 22px; padding: 5px 12px; border-radius: 999px; color: var(--ms-unsel);}
html body .sfs:not(#sfs-a):not(#sfs-b) .ms-tab{line-height: 22px !important;color: var(--ms-unsel) !important}
.sfs .ms-tab.is-on, .ms-tab.is-on.sfs{background: var(--ms-blue); color: #fff;}
html body .sfs:not(#sfs-a):not(#sfs-b) .ms-tab.is-on{color: #fff !important}
.sfs .ms-summary, .ms-summary.sfs{display: flex; justify-content: space-around; align-items: center; height: 30px; margin-top: 12px; background: var(--ms-gray6); border-top: .5px solid var(--ms-hair); border-bottom: .5px solid var(--ms-hair); padding: 0 6px; white-space: nowrap; overflow: hidden;}
.sfs .ms-sum, .ms-sum.sfs{display: inline-flex; align-items: baseline; gap: 4px; color: var(--ms-label2);}
html body .sfs:not(#sfs-a):not(#sfs-b) .ms-sum{color: var(--ms-label2) !important}
.sfs .ms-sum .ms-dot{width: 8px; height: 8px; align-self: center;}
.sfs .ms-count, .ms-count.sfs{font-weight: 500; font-size: 16px; display: inline-block;}
html body .sfs:not(#sfs-a):not(#sfs-b) .ms-count{font-weight: 500 !important}
.sfs .ms-sumlabel, .ms-sumlabel.sfs{font-size: 12px;}
.sfs .ms-count.is-bump, .ms-count.is-bump.sfs{animation: ms-bump .6s ease-out;}
@keyframes ms-bump{ from { opacity: .2; transform: translateY(5px); } }
.sfs .ms-rows, .ms-rows.sfs{list-style: none; margin: 0; padding: 0; overflow: hidden; flex: 1; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent);}
.sfs .ms-row, .ms-row.sfs{position: relative; height: 80px; display: flex; align-items: center; padding: 0 18px; gap: 10px;}
.sfs .ms-row::after, .ms-row::after.sfs{content: ""; position: absolute; left: 113.5px; right: 0; bottom: 0; height: .5px; background: var(--ms-hair);}
.sfs .ms-row.is-changed, .ms-row.is-changed.sfs{animation: ms-flash 2.2s ease-out;}
@keyframes ms-flash{ 0%, 25% { background: var(--tint); } 100% { background: transparent; } }
.sfs .ms-thumb, .ms-thumb.sfs{flex: none; width: 90px; height: 60px; border-radius: 8px; overflow: hidden; background: var(--ms-underlay);}
.sfs .ms-thumb img{width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); display: block;}
.sfs .ms-main, .ms-main.sfs{flex: 1; min-width: 0; display: flex; flex-direction: column;}
.sfs .ms-name, .ms-name.sfs{display: flex; align-items: center; gap: 6px; font-size: 16px; line-height: 22px; font-weight: 600; white-space: nowrap; min-width: 0;}
html body .sfs:not(#sfs-a):not(#sfs-b) .ms-name{line-height: 22px !important;font-weight: 600 !important}
.sfs .ms-name > span{overflow: hidden; text-overflow: ellipsis;}
.sfs .ms-bar, .ms-bar.sfs{position: relative; height: 2px; border-radius: 2px; background: var(--ms-track); margin: 9px 0 0 16px;}
.sfs .ms-fill, .ms-fill.sfs{position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--st); transition: width 1s linear, background-color .5s ease;}
.sfs .ms-fill.is-reset, .ms-fill.is-reset.sfs{transition: none;}
.sfs .ms-mark, .ms-mark.sfs{position: absolute; top: -3px; width: 2px; height: 8px; border-radius: 1px; background: var(--ms-warn);}
.sfs .ms-mark[hidden], .ms-mark[hidden].sfs{display: none;}
.sfs .ms-time, .ms-time.sfs{display: flex; justify-content: space-between; align-items: baseline; margin: 7px 0 0 16px; color: var(--ms-label3);}
html body .sfs:not(#sfs-a):not(#sfs-b) .ms-time{color: var(--ms-label3) !important}
.sfs .ms-hm, .ms-hm.sfs{font-size: 16px; line-height: 20px; font-variant-numeric: tabular-nums;}
html body .sfs:not(#sfs-a):not(#sfs-b) .ms-hm{line-height: 20px !important}
.sfs .ms-ss, .ms-ss.sfs{font-size: 14px; letter-spacing: .15px; font-variant-numeric: tabular-nums;}
html body .sfs:not(#sfs-a):not(#sfs-b) .ms-ss{letter-spacing: .15px !important}
.sfs .ms-label, .ms-label.sfs{font-size: 13px; letter-spacing: .1px; margin-left: 6px; white-space: nowrap;}
html body .sfs:not(#sfs-a):not(#sfs-b) .ms-label{letter-spacing: .1px !important}
.sfs .ms-chev, .ms-chev.sfs{flex: none; align-self: flex-start; margin-top: 16px; color: var(--ms-label5);}
html body .sfs:not(#sfs-a):not(#sfs-b) .ms-chev{color: var(--ms-label5) !important}
.sfs .ms-chev svg{width: 7px; height: 13px;}
@container ms-stage (max-width: 380px){
.sfs .ms-title, .ms-title.sfs{font-size: 28px;}
.sfs .ms-summary, .ms-summary.sfs{justify-content: space-between; padding: 0 10px;}
.sfs .ms-sum, .ms-sum.sfs{gap: 3px;}
.sfs .ms-sumlabel, .ms-sumlabel.sfs{font-size: 10px; letter-spacing: -.15px;}
html body .sfs:not(#sfs-a):not(#sfs-b) .ms-sumlabel{letter-spacing: -.15px !important}
.sfs .ms-count, .ms-count.sfs{font-size: 14px;}
.sfs .ms-tab, .ms-tab.sfs{padding: 5px 10px; font-size: 15px;}
}
@media (prefers-reduced-motion: reduce){
.sfs .ms *, .sfs .ms, .ms.sfs{animation: none !important; transition: none !important;}
}
:root{--oee-all: #9FD4FF; --oee-factor: #A3DD9A; --oee-loss: #FFCCCE; --oee-bar: #7CCDDB; --tier-poor: #EC4D3D; --tier-fair: #FF9500; --tier-good: #34C759; --tier-excellent: #30B0C7; --tier-world: #5856D6; --ms-oee-text: #30B0C7; --ms-nu-text: #EE6EA5; --ms-loss: #EC4D3D; --ms-loss-bg: #FFD3D3; --ms-time-bg: #A7D3FB; --ms-search-bg: rgba(118,118,128,.12); --ms-chip-line: #C6C6C8;}
html.sf-dark-mode{--oee-all: #406787; --oee-factor: #4A6B4A; --oee-loss: #482929; --oee-bar: #2C8191; --tier-poor: #EC4D3D; --tier-fair: #FF9F0A; --tier-good: #32D74B; --tier-excellent: #40C8E0; --tier-world: #5E5CE6; --ms-oee-text: #40C8E0; --ms-nu-text: #FF74B0; --ms-loss: #D24E47; --ms-loss-bg: #4A2524; --ms-time-bg: #22476B; --ms-search-bg: rgba(118,118,128,.24); --ms-chip-line: #38383A;}
.sfs .ph, .ph.sfs{height: 640px; max-width: 390px; margin: 0 auto; position: relative;}
.sfs .ph-viewport, .ph-viewport.sfs{position: absolute; inset: 0; overflow: hidden;}
.sfs .ph-content, .ph-content.sfs{will-change: transform;}
.sfs .ph-scrollbar, .ph-scrollbar.sfs{position: absolute; right: 3px; top: 4px; width: 3px; border-radius: 3px; background: var(--ms-label5); opacity: 0; transition: opacity .5s ease; pointer-events: none;}
.sfs .ph-scrollbar.is-on, .ph-scrollbar.is-on.sfs{opacity: 1; transition-duration: .15s;}
.sfs .pf, .pf.sfs{background: var(--ms-detail);}
.sfs .pf-pad, .pf-pad.sfs{padding: 18px 16px 24px;}
.sfs .pf-nav, .pf-nav.sfs{display: flex; justify-content: space-between; align-items: center; color: var(--ms-blue);}
html body .sfs:not(#sfs-a):not(#sfs-b) .pf-nav{color: var(--ms-blue) !important}
.sfs .pf-back, .pf-back.sfs{display: inline-flex; align-items: center; gap: 7px; font-size: 17px;}
.sfs .pf-back svg{width: 10px; height: 17px;}
.sfs .pf-icons, .pf-icons.sfs{display: inline-flex; gap: 20px; align-items: center;}
.sfs .pf-icons svg:nth-child(-n+2){width: 20px; height: 12px;}
.sfs .pf-icons svg:last-child{width: 24px; height: 24px;}
.sfs .pf-title, .pf-title.sfs{display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 24px; line-height: 30px; font-weight: 600;}
html body .sfs:not(#sfs-a):not(#sfs-b) .pf-title{line-height: 30px !important;font-weight: 600 !important}
.sfs .pf-title .ms-dot{width: 12px; height: 12px;}
.sfs .pf-tabs, .pf-tabs.sfs{margin: 12px -8px 0;}
.sfs .pf-card, .pf-card.sfs{margin-top: 14px; background: var(--ms-card); border-radius: 18px; padding: 14px 14px 8px;}
.sfs .pf-kpis, .pf-kpis.sfs{display: flex; gap: 22px;}
.sfs .pf-kpi, .pf-kpi.sfs{display: flex; flex-direction: column; min-width: 0;}
.sfs .pf-kpiname, .pf-kpiname.sfs{font-size: 14px; line-height: 18px; white-space: nowrap;}
html body .sfs:not(#sfs-a):not(#sfs-b) .pf-kpiname{line-height: 18px !important}
.sfs .pf-kpi-oee, .pf-kpi-oee.sfs{color: var(--ms-oee-text);}
html body .sfs:not(#sfs-a):not(#sfs-b) .pf-kpi-oee{color: var(--ms-oee-text) !important}
.sfs .pf-kpi-nu, .pf-kpi-nu.sfs{color: var(--ms-nu-text);}
html body .sfs:not(#sfs-a):not(#sfs-b) .pf-kpi-nu{color: var(--ms-nu-text) !important}
.sfs .pf-val, .pf-val.sfs{display: flex; align-items: baseline; gap: 2px; white-space: nowrap;}
.sfs .pf-val b{font-size: 34px; line-height: 40px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums;}
html body .sfs:not(#sfs-a):not(#sfs-b) .pf-val b{line-height: 40px !important;font-weight: 600 !important;letter-spacing: -.01em !important}
.sfs .pf-val small{font-size: 16px; font-weight: 500;}
html body .sfs:not(#sfs-a):not(#sfs-b) .pf-val small{font-weight: 500 !important}
.sfs .pf-val em{font-style: normal; font-size: 15px; color: var(--ms-good); margin-left: 5px;}
html body .sfs:not(#sfs-a):not(#sfs-b) .pf-val em{color: var(--ms-good) !important}
.sfs .pf-date, .pf-date.sfs{color: var(--ms-label3); font-size: 14px;}
html body .sfs:not(#sfs-a):not(#sfs-b) .pf-date{color: var(--ms-label3) !important}
.sfs .pf-chart, .pf-chart.sfs{width: 100%; height: auto; display: block; margin-top: 6px;}
.sfs .pf-grid, .pf-grid.sfs{stroke: var(--ms-axisline); stroke-width: .6;}
.sfs .pf-vgrid, .pf-vgrid.sfs{stroke: var(--ms-axisline); stroke-width: .6; stroke-dasharray: 2 3;}
.sfs .pf-axis, .pf-axis.sfs{fill: var(--ms-axis); font-size: 9px; font-family: Inter, sans-serif;}
html body .sfs:not(#sfs-a):not(#sfs-b) .pf-axis{font-family: Inter, sans-serif !important}
.sfs .pf-oee, .pf-oee.sfs{fill: var(--ms-oee);}
.sfs .pf-nu, .pf-nu.sfs{fill: var(--ms-nu);}
.sfs .pf-list, .pf-list.sfs{margin-top: 14px; background: var(--ms-card); border-radius: 18px; padding: 12px 14px 16px;}
.sfs .pf-water, .pf-water.sfs{position: relative;}
.sfs .pf-guided, .pf-guided.sfs{position: relative;}
.sfs .pf-water, .pf-water.sfs, .sfs .pf-oeebar, .pf-oeebar.sfs, .sfs .pf-caption, .pf-caption.sfs, .sfs .pf-scale, .pf-scale.sfs{position: relative; z-index: 1;}
.sfs .pf-dash, .pf-dash.sfs{position: absolute; z-index: 0; width: calc(1px / var(--s, 1)); margin-left: calc(-.5px / var(--s, 1)); background: repeating-linear-gradient(to bottom, var(--ms-hair) 0 calc(2px / var(--s, 1)), transparent calc(2px / var(--s, 1)) calc(4px / var(--s, 1)));}
.sfs .pf-w, .pf-w.sfs{position: relative; height: 34px; display: flex; align-items: center; font-size: 13.5px;}
.sfs .pf-wbar, .pf-wbar.sfs{position: absolute; top: 5px; bottom: 5px; border-radius: 7px;}
.sfs .pf-w-all .pf-wbar{background: var(--oee-all);}
.sfs .pf-w-factor .pf-wbar{background: var(--oee-factor);}
.sfs .pf-w-loss .pf-wbar{background: var(--oee-loss);}
.sfs .pf-wname, .pf-wname.sfs{position: relative; z-index: 1; padding-left: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box;}
.sfs .pf-w-loss .pf-wname, .sfs .pf-w-loss .pf-wval{color: var(--ms-loss);}
html body .sfs:not(#sfs-a):not(#sfs-b) .pf-w-loss .pf-wname, html body .sfs:not(#sfs-a):not(#sfs-b) .pf-w-loss .pf-wval{color: var(--ms-loss) !important}
.sfs .pf-wval, .pf-wval.sfs{position: absolute; z-index: 1; white-space: nowrap; font-variant-numeric: tabular-nums;}
.sfs .pf-wval.is-inside, .pf-wval.is-inside.sfs{padding-right: 8px;}
.sfs .pf-wval small{font-size: 10px; margin: 0 1px;}
.sfs .pf-oeebar, .pf-oeebar.sfs{position: relative; height: 24px; border-radius: 6px; background: var(--ms-gray6); margin-top: 18px; overflow: visible;}
.sfs .pf-oeefill, .pf-oeefill.sfs{position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--oee-bar);}
.sfs .pf-oeelabel, .pf-oeelabel.sfs{position: absolute; left: 8px; top: 2px; font-size: 14px; white-space: nowrap;}
.sfs .pf-caption, .pf-caption.sfs{font-size: 12px; color: var(--ms-label3); margin-top: 4px;}
html body .sfs:not(#sfs-a):not(#sfs-b) .pf-caption{color: var(--ms-label3) !important}
.sfs .pf-scale, .pf-scale.sfs{position: relative; display: flex; height: 6px; margin-top: 30px; margin-bottom: 2px;}
.sfs .pf-scale i{display: block; height: 100%;}
.sfs .pf-scale i:first-of-type{border-radius: 3px 0 0 3px;}
.sfs .pf-scale i:last-of-type{border-radius: 0 3px 3px 0;}
.sfs .pf-tier, .pf-tier.sfs{position: absolute; top: -22px; transform: translateX(-50%); font-size: 13px; white-space: nowrap;}
.sfs .pf-legend, .pf-legend.sfs{list-style: none; margin: 14px 0 0; padding: 0; font-size: 13px; color: var(--ms-label2);}
html body .sfs:not(#sfs-a):not(#sfs-b) .pf-legend{color: var(--ms-label2) !important}
.sfs .pf-legend li{display: flex; align-items: center; gap: 8px; line-height: 24px;}
html body .sfs:not(#sfs-a):not(#sfs-b) .pf-legend li{line-height: 24px !important}
.sfs .pf-legend i{width: 9px; height: 9px; border-radius: 50%;}
.sfs [data-tier="Poor"], [data-tier="Poor"].sfs{--tier: var(--tier-poor);}
.sfs [data-tier="Fair"], [data-tier="Fair"].sfs{--tier: var(--tier-fair);}
.sfs [data-tier="Good"], [data-tier="Good"].sfs{--tier: var(--tier-good);}
.sfs [data-tier="Excellent"], [data-tier="Excellent"].sfs{--tier: var(--tier-excellent);}
.sfs [data-tier="World Class"]{--tier: var(--tier-world);}
.sfs .pf-scale i, .sfs .pf-legend i{background: var(--tier);}
.sfs .pf-tier, .pf-tier.sfs, .sfs .pf-val em{color: var(--tier);}
html body .sfs:not(#sfs-a):not(#sfs-b) .pf-tier, html body .sfs:not(#sfs-a):not(#sfs-b) .pf-val em{color: var(--tier) !important}
.sfs .pf-title[data-status] .ms-dot{background: var(--st);}
.sfs .pt, .pt.sfs{background: var(--ms-bg);}
.sfs .pt-pad, .pt-pad.sfs{padding: 20px 16px 24px;}
.sfs .pt-found, .pt-found.sfs{font-size: 13px; color: var(--ms-label3); letter-spacing: .02em; text-transform: uppercase;}
html body .sfs:not(#sfs-a):not(#sfs-b) .pt-found{color: var(--ms-label3) !important;letter-spacing: .02em !important}
.sfs .pt-title, .pt-title.sfs{font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -.01em;}
html body .sfs:not(#sfs-a):not(#sfs-b) .pt-title{line-height: 38px !important;font-weight: 700 !important;letter-spacing: -.01em !important}
.sfs .pt-searchrow, .pt-searchrow.sfs{display: flex; gap: 8px; margin-top: 12px; align-items: center;}
.sfs .pt-search, .pt-search.sfs{flex: 1; display: flex; align-items: center; gap: 7px; height: 38px; border-radius: 12px; background: var(--ms-search-bg); color: var(--ms-label3); padding: 0 10px; font-size: 16px; min-width: 0;}
html body .sfs:not(#sfs-a):not(#sfs-b) .pt-search{color: var(--ms-label3) !important}
.sfs .pt-search svg{width: 17px; height: 17px; flex: none;}
.sfs .pt-views, .pt-views.sfs{display: flex; gap: 2px; background: var(--ms-search-bg); border-radius: 12px; padding: 3px; color: var(--ms-label2);}
html body .sfs:not(#sfs-a):not(#sfs-b) .pt-views{color: var(--ms-label2) !important}
.sfs .pt-views span{display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 9px;}
.sfs .pt-views span.is-on{background: var(--ms-card); box-shadow: 0 1px 3px rgba(0,0,0,.12);}
.sfs .pt-views svg{width: 19px; height: 19px;}
.sfs .pt-chips, .pt-chips.sfs{display: flex; gap: 6px; margin: 12px -16px 0; padding: 0 16px; overflow: hidden; white-space: nowrap;}
.sfs .pt-chip, .pt-chip.sfs{border: 1px solid var(--ms-chip-line); border-radius: 999px; padding: 4px 12px; font-size: 14px; color: var(--ms-label2);}
html body .sfs:not(#sfs-a):not(#sfs-b) .pt-chip{color: var(--ms-label2) !important}
.sfs .pt-chip.is-on, .pt-chip.is-on.sfs{background: var(--ms-blue); border-color: var(--ms-blue); color: #fff;}
html body .sfs:not(#sfs-a):not(#sfs-b) .pt-chip.is-on{color: #fff !important}
.sfs .pt-stats, .pt-stats.sfs{display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px;}
.sfs .pt-stat, .pt-stat.sfs{border: 1px solid var(--ms-chip-line); border-radius: 14px; padding: 6px 10px; font-size: 13px; line-height: 17px; color: var(--ms-label2);}
html body .sfs:not(#sfs-a):not(#sfs-b) .pt-stat{line-height: 17px !important;color: var(--ms-label2) !important}
.sfs .pt-stat b{display: flex; align-items: center; gap: 6px; font-size: 17px; line-height: 22px; color: var(--ms-label); font-weight: 600;}
html body .sfs:not(#sfs-a):not(#sfs-b) .pt-stat b{line-height: 22px !important;color: var(--ms-label) !important;font-weight: 600 !important}
.sfs .pt-stat svg{width: 13px; height: 13px; color: var(--ms-label3);}
html body .sfs:not(#sfs-a):not(#sfs-b) .pt-stat svg{color: var(--ms-label3) !important}
.sfs .pt-card, .pt-card.sfs{margin-top: 18px;}
.sfs .pt-img, .pt-img.sfs{aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background: #F2F2F7;}
.sfs .pt-img img{width: 100%; height: 100%; object-fit: cover; display: block;}
.sfs .pt-meta, .pt-meta.sfs{padding: 10px 12px 0; font-size: 15px; line-height: 21px; color: var(--ms-label3);}
html body .sfs:not(#sfs-a):not(#sfs-b) .pt-meta{line-height: 21px !important;color: var(--ms-label3) !important}
.sfs .pt-meta b{display: block; color: var(--ms-label); font-size: 16px; font-weight: 600;}
html body .sfs:not(#sfs-a):not(#sfs-b) .pt-meta b{color: var(--ms-label) !important;font-weight: 600 !important}
.sfs .op, .op.sfs{--op-bg: #156228; --op-text: #65C366; font-family: Inter, -apple-system, "Segoe UI", sans-serif; color: #fff; background: var(--op-bg); border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; max-width: 1000px; margin: 0 auto; position: relative; transition: background-color .7s ease; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 16px 40px rgba(17,24,39,.18); container: op / inline-size; -webkit-font-smoothing: antialiased;}
html body .sfs:not(#sfs-a):not(#sfs-b) .op{font-family: Inter, -apple-system, "Segoe UI", sans-serif !important;color: #fff !important}
.sfs .op[data-status="active"], .op[data-status="active"].sfs{--op-bg: #156228; --op-text: #65C366;}
.sfs .op[data-status="change"], .op[data-status="change"].sfs{--op-bg: #8B4E0B; --op-text: #FF9500;}
.sfs .op[data-status="setup"], .op[data-status="setup"].sfs{--op-bg: #44054F; --op-text: #E040FB;}
.sfs .op[data-status="np"], .op[data-status="np"].sfs{--op-bg: #2E2E2E; --op-text: #8A8A94;}
.sfs .op-head, .op-head.sfs{display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 8.5%; padding: 0 2.2%; background: rgba(0,0,0,.2); font-size: 2.1cqw; font-weight: 600;}
html body .sfs:not(#sfs-a):not(#sfs-b) .op-head{font-weight: 600 !important}
.sfs .op-status, .op-status.sfs{color: var(--op-text); font-weight: 500; transition: color .7s ease;}
html body .sfs:not(#sfs-a):not(#sfs-b) .op-status{color: var(--op-text) !important;font-weight: 500 !important}
.sfs .op-user, .op-user.sfs{justify-self: end; display: flex; align-items: center; gap: 1.2cqw; font-weight: 500; color: rgba(255,255,255,.85);}
html body .sfs:not(#sfs-a):not(#sfs-b) .op-user{font-weight: 500 !important;color: rgba(255,255,255,.85) !important}
.sfs .op-avatar, .op-avatar.sfs{width: 4cqw; height: 4cqw; border-radius: 50%; background: rgba(255,255,255,.25); display: inline-flex; align-items: center; justify-content: center; font-size: 1.5cqw; font-weight: 600; color: #fff;}
html body .sfs:not(#sfs-a):not(#sfs-b) .op-avatar{font-weight: 600 !important;color: #fff !important}
.sfs .op-info, .op-info.sfs{position: absolute; left: 2.2%; top: 11.5%; width: 31%; font-size: 1.3cqw; line-height: 1.55;}
html body .sfs:not(#sfs-a):not(#sfs-b) .op-info{line-height: 1.55 !important}
.sfs .op-info dd span{display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.sfs .op-info dt{color: rgba(255,255,255,.55); font-size: 1.15cqw; text-transform: uppercase; letter-spacing: .02em;}
html body .sfs:not(#sfs-a):not(#sfs-b) .op-info dt{color: rgba(255,255,255,.55) !important;letter-spacing: .02em !important}
.sfs .op-info dd{margin: 0 0 1.4cqw;}
.sfs .op-tile, .op-tile.sfs{position: absolute; background: rgba(255,255,255,.2); border-radius: 1.8cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9cqw; font-size: 1.9cqw; font-weight: 600; box-shadow: 0 .4cqw 1.2cqw rgba(0,0,0,.12);}
html body .sfs:not(#sfs-a):not(#sfs-b) .op-tile{font-weight: 600 !important}
.sfs .op-tile svg{width: 1.7cqw; height: 1.7cqw;}
.sfs .op-stop, .op-stop.sfs{right: 1.8%; top: 11.2%; width: 15.5%; height: 15%;}
.sfs .op-ring, .op-ring.sfs{position: absolute; left: 50%; top: 52%; width: 33%; aspect-ratio: 1; transform: translate(-50%, -50%);}
.sfs .op-ring svg{width: 100%; height: 100%; display: block;}
.sfs .op-ringbg, .op-ringbg.sfs{fill: rgba(0,0,0,.45);}
.sfs .op-ringtrack, .op-ringtrack.sfs{fill: none; stroke: rgba(0,0,0,.25);}
.sfs .op-ringarc, .op-ringarc.sfs{fill: none; stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset 1s linear;}
.sfs .op-ringtext, .op-ringtext.sfs{position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.sfs .op-ready, .op-ready.sfs{font-size: 2cqw; color: rgba(255,255,255,.6);}
html body .sfs:not(#sfs-a):not(#sfs-b) .op-ready{color: rgba(255,255,255,.6) !important}
.sfs .op-count, .op-count.sfs{font-size: 10cqw; line-height: 1; font-weight: 300; font-variant-numeric: tabular-nums; display: inline-block;}
html body .sfs:not(#sfs-a):not(#sfs-b) .op-count{line-height: 1 !important;font-weight: 300 !important}
.sfs .op-count.is-bump, .op-count.is-bump.sfs{animation: op-bump .7s cubic-bezier(.2,.7,.2,1);}
@keyframes op-bump{ 0% { transform: translateY(18%); opacity: 0; } 100% { transform: none; opacity: 1; } }
.sfs .op-qty, .op-qty.sfs{font-size: 2.7cqw; color: rgba(255,255,255,.6); margin-top: .6cqw;}
html body .sfs:not(#sfs-a):not(#sfs-b) .op-qty{color: rgba(255,255,255,.6) !important}
.sfs .op-btn, .op-btn.sfs{position: absolute; top: 52%; width: 8.4%; aspect-ratio: 1; border-radius: 50%; background: #fff; color: #000; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; box-shadow: 0 .4cqw 1.2cqw rgba(0,0,0,.25);}
html body .sfs:not(#sfs-a):not(#sfs-b) .op-btn{color: #000 !important}
.sfs .op-btn svg{width: 55%; height: 55%;}
.sfs .op-minus, .op-minus.sfs{left: 26.2%;}
.sfs .op-plus, .op-plus.sfs{left: 73.8%;}
.sfs .op-bottom, .op-bottom.sfs{position: absolute; left: 1.8%; right: 1.8%; bottom: 2.4%; height: 14.6%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 4.7%;}
.sfs .op-bottom .op-tile{position: static;}
.sfs .op-thumb, .op-thumb.sfs{border-radius: 1.8cqw; overflow: hidden; background: #fff;}
.sfs .op-thumb img{width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.03);}
.sfs .op-glyph, .op-glyph.sfs{color: #fff;}
html body .sfs:not(#sfs-a):not(#sfs-b) .op-glyph{color: #fff !important}
.sfs .op-glyph .op-inner{stroke: var(--op-bg); fill: var(--op-bg); transition: stroke .7s ease, fill .7s ease;}
.sfs .op-glyph path.op-inner{fill: none;}
@container ms-stage (max-width: 600px){
}
:root{--ms-headbg: #FEFEFE; --ms-headline: #8B8B8D;}
html.sf-dark-mode{--ms-headbg: #121212; --ms-headline: #636363;}
.sfs .ph-bar, .ph-bar.sfs{position: absolute; left: 0; right: 0; top: 0; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--ms-headbg); border-bottom: .5px solid var(--ms-headline); opacity: 0; font-size: 16px; font-weight: 600; z-index: 3; pointer-events: none;}
html body .sfs:not(#sfs-a):not(#sfs-b) .ph-bar{font-weight: 600 !important}
.sfs .ph-bar span{display: inline-flex; align-items: center; gap: 7px;}
.sfs .pf-bar, .pf-bar.sfs{border-bottom-color: var(--ms-hair);}
.sfs .pf-bar .ms-dot{background: var(--st);}
.sfs .pt-head, .pt-head.sfs{position: absolute; left: 0; right: 0; top: 0; overflow: hidden; background: var(--ms-bg); z-index: 2;}
.sfs .pt-headin, .pt-headin.sfs{padding: 20px 16px 12px;}
.sfs .pt-searchrow, .pt-searchrow.sfs{transform-origin: 50% 0;}
.sfs .pt-spacer, .pt-spacer.sfs{height: 132px;}
.sfs .pt-pad > .pt-chips{margin-top: 0;}
:root{--sb: 47px; --tb-bg: rgba(248,248,250,.78); --tb-line: rgba(255,255,255,.65); --tb-on: rgba(0,0,0,.05); --tb-blue: #007AFF; --tb-off: rgba(0,0,8,.47);}
html.sf-dark-mode{--tb-bg: rgba(28,28,30,.76); --tb-line: rgba(255,255,255,.12); --tb-on: rgba(255,255,255,.09); --tb-blue: #4791F8; --tb-off: rgba(250,250,255,.54);}
.sfs .ph, .ph.sfs{height: auto; aspect-ratio: 390 / 844; max-width: 340px; border-radius: 48px; overflow: hidden;}
.sfs .ph-status, .ph-status.sfs{position: absolute; left: 0; right: 0; top: 0; height: var(--sb); display: flex; align-items: center; justify-content: space-between; padding: 4px 30px 0 36px; z-index: 6; color: var(--ms-label); pointer-events: none;}
html body .sfs:not(#sfs-a):not(#sfs-b) .ph-status{color: var(--ms-label) !important}
.sfs .ph-time, .ph-time.sfs{font-size: 15.5px; font-weight: 600; letter-spacing: -.01em;}
html body .sfs:not(#sfs-a):not(#sfs-b) .ph-time{font-weight: 600 !important;letter-spacing: -.01em !important}
.sfs .ph-sicons, .ph-sicons.sfs{display: inline-flex; gap: 5px; align-items: center;}
.sfs .ph-sicons svg{height: 11.5px; width: auto; fill: currentColor;}
.sfs .ph-sicons svg:last-child{height: 12.5px;}
.sfs .ph-tabbar, .ph-tabbar.sfs{position: absolute; left: 12px; right: 12px; bottom: 14px; height: 60px; border-radius: 30px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 4px; background: var(--tb-bg); -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8); border: .5px solid var(--tb-line); box-shadow: 0 6px 20px rgba(0,0,0,.08), inset 0 .5px 0 rgba(255,255,255,.3); z-index: 6; pointer-events: none;}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
.sfs .ph-tabbar, .ph-tabbar.sfs{background: var(--ms-bg);}
}
.sfs .ph-tab, .ph-tab.sfs{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 26px; font-size: 10px; font-weight: 500; letter-spacing: .1px; color: var(--tb-off); white-space: nowrap; overflow: hidden;}
html body .sfs:not(#sfs-a):not(#sfs-b) .ph-tab{font-weight: 500 !important;letter-spacing: .1px !important;color: var(--tb-off) !important}
.sfs .ph-tab.is-on, .ph-tab.is-on.sfs{background: var(--tb-on); color: var(--tb-blue);}
html body .sfs:not(#sfs-a):not(#sfs-b) .ph-tab.is-on{color: var(--tb-blue) !important}
.sfs .ph-ico, .ph-ico.sfs{width: 23px; height: 23px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;}
.sfs .ph .ms-list{padding-top: var(--sb); height: 100%;}
.sfs .ph .ms-head{padding-top: 10px;}
.sfs .ph .ms-rows{padding-bottom: 80px; -webkit-mask-image: none; mask-image: none;}
.sfs .ph-content > div{padding-bottom: 96px !important;}
.sfs .ph-bar, .ph-bar.sfs{height: calc(var(--sb) + 44px); padding-top: var(--sb);}
.sfs .pf-pad, .pf-pad.sfs{padding-top: calc(var(--sb) + 8px);}
.sfs .pt-headin, .pt-headin.sfs{padding-top: calc(var(--sb) + 6px);}
.sfs .pt-spacer, .pt-spacer.sfs{height: calc(var(--sb) + 140px);}
.sfs .ph-scrollbar, .ph-scrollbar.sfs{top: calc(var(--sb) + 48px);}
.sfs .pf-card, .pf-card.sfs, .sfs .pf-list, .pf-list.sfs{margin-left: -16px; margin-right: -16px; border-radius: 0;}
.sfs .pf-list, .pf-list.sfs{padding: 14px 16px 20px;}
.sfs .pf-w, .pf-w.sfs{height: 37px; font-size: 15.5px; font-weight: 600;}
html body .sfs:not(#sfs-a):not(#sfs-b) .pf-w{font-weight: 600 !important}
.sfs .pf-wbar, .pf-wbar.sfs{top: 6px; bottom: 6px; border-radius: 5px;}
.sfs .pf-wval small{font-size: 11px; font-weight: 500;}
html body .sfs:not(#sfs-a):not(#sfs-b) .pf-wval small{font-weight: 500 !important}
.sfs .pf-oeebar, .pf-oeebar.sfs{height: 26px; border-radius: 5px;}
.sfs .pf-oeefill, .pf-oeefill.sfs{border-radius: 5px;}
.sfs .pf-oeelabel, .pf-oeelabel.sfs{font-size: 17px; font-weight: 600; top: 1px;}
html body .sfs:not(#sfs-a):not(#sfs-b) .pf-oeelabel{font-weight: 600 !important}
.sfs .pf-caption, .pf-caption.sfs{font-size: 13px;}
.sfs .pf-tier, .pf-tier.sfs{font-size: 15px;}
.sfs .pf-legend, .pf-legend.sfs{font-size: 13.5px;}
:root{--wb-bg: #D7D9DB; --wb-tile: #FFFFFF; --wb-img: #F6F5F8; --wb-active: #1D8436; --wb-change: #DA7F00; --wb-setup: #CA34E3; --wb-np: #8A8A94; --wb-hair: rgba(138,138,138,.35); --wb-pieces: #000000; --wb-track: #E5E5EA; --wb-box: #FFFFFF; --wb-boxline: #E3E3E6; --wb-poor: #EC4D3D; --wb-fair: #DA7F00; --wb-good: #4FBC6B; --wb-excellent: #30B0C7; --wb-world: #5856D6; --wb-blue: #007AFF; --wb-text: #1C1C1E; --wb-text2: rgba(60,60,67,.75); --wb-sched: #32ADE6; --wb-ideal: #3634A3; --wb-dim: none;}
html.sf-dark-mode{--wb-bg: #000000; --wb-tile: #212121; --wb-img: #A9A9AB; --wb-active: #156228; --wb-change: #BF5B00; --wb-setup: #5E156B; --wb-np: #303030; --wb-hair: rgba(107,107,107,.1); --wb-pieces: #959493; --wb-track: #3A3A3C; --wb-box: #2C2C2E; --wb-boxline: transparent; --wb-poor: #E85344; --wb-fair: #BF5B00; --wb-good: #69A577; --wb-excellent: #40C8E0; --wb-world: #5E5CE6; --wb-blue: #4791F8; --wb-text: #FFFFFF; --wb-text2: rgba(235,235,245,.7); --wb-sched: #64D2FF; --wb-ideal: #7D7AFF; --wb-dim: brightness(.68);}
.sfs .wb-fit, .wb-fit.sfs{container: wbfit / inline-size; width: 100%;}
.sfs .wb, .wb.sfs{--u: calc(100cqw / 1100); font-family: Inter, -apple-system, "Segoe UI", sans-serif; background: var(--wb-bg); padding: calc(16 * var(--u)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: calc(15 * var(--u)); row-gap: calc(13 * var(--u)); -webkit-font-smoothing: antialiased; color: var(--wb-text);}
html body .sfs:not(#sfs-a):not(#sfs-b) .wb{font-family: Inter, -apple-system, "Segoe UI", sans-serif !important;color: var(--wb-text) !important}
.sfs .wb-tile, .wb-tile.sfs{position: relative; display: flex; flex-direction: column; height: calc(391 * var(--u)); background: var(--wb-tile); border-radius: calc(12 * var(--u)); overflow: hidden; box-shadow: 0 0 0 calc(1 * var(--u)) var(--wb-hair);}
.sfs .wb-tile [data-status="setup"], .sfs .wb-tile[data-status="setup"], .wb-tile[data-status="setup"].sfs{--wbs: var(--wb-setup);}
.sfs .wb-tile [data-status="active"], .sfs .wb-tile[data-status="active"], .wb-tile[data-status="active"].sfs{--wbs: var(--wb-active);}
.sfs .wb-tile [data-status="change"], .sfs .wb-tile[data-status="change"], .wb-tile[data-status="change"].sfs{--wbs: var(--wb-change);}
.sfs .wb-tile [data-status="np"], .sfs .wb-tile[data-status="np"], .wb-tile[data-status="np"].sfs{--wbs: var(--wb-np);}
.sfs .wb-head, .wb-head.sfs{flex: none; height: calc(55 * var(--u)); background: var(--wbs); color: #fff; font-weight: 700; font-size: calc(23 * var(--u)); line-height: 1.3; display: flex; align-items: center; justify-content: center; padding: 0 calc(14 * var(--u)); transition: background-color .7s ease;}
html body .sfs:not(#sfs-a):not(#sfs-b) .wb-head{color: #fff !important;font-weight: 700 !important;line-height: 1.3 !important}
.sfs .wb-head span{min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.sfs .wb-img, .wb-img.sfs{flex: none; height: calc(169 * var(--u)); background: var(--wb-img);}
.sfs .wb-img img{width: 100%; height: 100%; object-fit: contain; display: block; filter: var(--wb-dim);}
html body .sfs:not(#sfs-a):not(#sfs-b) .wb-img img{filter: var(--wb-dim) !important}
.sfs .wb-rows, .wb-rows.sfs{position: relative; padding: calc(4.6 * var(--u)) calc(11.4 * var(--u)) 0;}
.sfs .wb-row, .wb-row.sfs{margin-top: 0;}
.sfs .wb-row + .wb-row{margin-top: calc(4.6 * var(--u));}
.sfs .wb-times, .wb-times.sfs{display: flex; justify-content: space-between; font-size: calc(13.5 * var(--u)); line-height: calc(18.3 * var(--u)); color: var(--wb-text2); font-variant-numeric: tabular-nums;}
html body .sfs:not(#sfs-a):not(#sfs-b) .wb-times{line-height: calc(18.3 * var(--u)) !important;color: var(--wb-text2) !important}
.sfs .wb-times .is-over{color: var(--wb-poor);}
html body .sfs:not(#sfs-a):not(#sfs-b) .wb-times .is-over{color: var(--wb-poor) !important}
.sfs .wb-bar, .wb-bar.sfs{position: relative; display: block; height: calc(6 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--wb-track); margin-top: 0;}
.sfs .wb-fill, .wb-fill.sfs{position: absolute; left: 0; top: 0; bottom: 0; border-radius: calc(3 * var(--u)) 0 0 calc(3 * var(--u)); background: var(--wbs); transition: width 1s linear, background-color .7s ease;}
.sfs .wb-over, .wb-over.sfs{position: absolute; top: 0; bottom: 0; right: 0; border-radius: 0 calc(3 * var(--u)) calc(3 * var(--u)) 0; background: var(--wb-poor);}
.sfs .wb-dot, .wb-dot.sfs{position: absolute; top: 50%; width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin: calc(-3.5 * var(--u)) 0 0 calc(-3.5 * var(--u)); border-radius: 50%; background: var(--wb-tile); box-shadow: 0 0 0 calc(1.2 * var(--u)) var(--wb-text2); z-index: 1;}
.sfs .wb-tm, .wb-tm.sfs{position: absolute; top: 50%; width: calc(3.6 * var(--u)); height: calc(3.6 * var(--u)); margin-top: calc(-1.8 * var(--u)); border-radius: 50%;}
.sfs .wb-tm[data-t="ideal"], .wb-tm[data-t="ideal"].sfs{right: calc(10 * var(--u)); background: var(--wb-ideal);}
.sfs .wb-tm[data-t="sched"], .wb-tm[data-t="sched"].sfs{right: calc(1 * var(--u)); background: var(--wb-sched);}
.sfs .wb-segs, .wb-segs.sfs{position: absolute; inset: 0; display: flex; overflow: hidden; border-radius: inherit;}
.sfs .wb-segs i{display: block; height: 100%; background: var(--wbs);}
.sfs .wb-overlay, .wb-overlay.sfs{position: absolute; left: 0; right: 0; top: 0; height: calc(64 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); background: var(--wb-tile); opacity: 0; pointer-events: none; font-size: calc(15 * var(--u)); font-weight: 600;}
html body .sfs:not(#sfs-a):not(#sfs-b) .wb-overlay{font-weight: 600 !important}
.sfs .wb-overlay span[data-status]{background: var(--wbs); color: #fff; border-radius: 99px; padding: calc(5 * var(--u)) calc(12 * var(--u)); white-space: nowrap;}
html body .sfs:not(#sfs-a):not(#sfs-b) .wb-overlay span[data-status]{color: #fff !important}
.sfs .wb-overlay .wb-arrow{color: var(--wb-text2);}
html body .sfs:not(#sfs-a):not(#sfs-b) .wb-overlay .wb-arrow{color: var(--wb-text2) !important}
.sfs .wb-overlay.is-on, .wb-overlay.is-on.sfs{animation: wb-overlay 3.2s ease forwards;}
@keyframes wb-overlay{ 0% { opacity: 0; } 10%, 75% { opacity: 1; } 100% { opacity: 0; } }
.sfs .wb-gauges, .wb-gauges.sfs{display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 * var(--u)); padding: 0 calc(12 * var(--u)); margin-top: auto; margin-bottom: calc(12 * var(--u));}
.sfs .wb-gauge, .wb-gauge.sfs{display: flex; flex-direction: column; align-items: center; height: calc(80 * var(--u)); padding-top: calc(5 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--wb-box); box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--wb-boxline);}
.sfs .wb-dial, .wb-dial.sfs{position: relative; flex: none; width: calc(50 * var(--u)); height: calc(50 * var(--u));}
.sfs .wb-dial svg{width: 100%; height: 100%; display: block;}
.sfs .wb-track, .wb-track.sfs{fill: none; stroke: var(--wb-track); stroke-width: 11;}
.sfs .wb-arc, .wb-arc.sfs{fill: none; stroke: var(--wb-pieces); stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset .8s ease;}
.sfs .wb-gauge[data-c="poor"], .wb-gauge[data-c="poor"].sfs{--gc: var(--wb-poor);}
.sfs .wb-gauge[data-c="fair"], .wb-gauge[data-c="fair"].sfs{--gc: var(--wb-fair);}
.sfs .wb-gauge[data-c="good"], .wb-gauge[data-c="good"].sfs{--gc: var(--wb-good);}
.sfs .wb-gauge[data-c="excellent"], .wb-gauge[data-c="excellent"].sfs{--gc: var(--wb-excellent);}
.sfs .wb-gauge[data-c="world"], .wb-gauge[data-c="world"].sfs{--gc: var(--wb-world);}
.sfs .wb-gauge[data-c="blue"], .wb-gauge[data-c="blue"].sfs{--gc: var(--wb-blue);}
.sfs .wb-gauge[data-c] .wb-arc{stroke: var(--gc);}
.sfs .wb-gauge[data-c] .wb-val{color: var(--gc);}
html body .sfs:not(#sfs-a):not(#sfs-b) .wb-gauge[data-c] .wb-val{color: var(--gc) !important}
.sfs .wb-val, .wb-val.sfs{position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(16 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--wb-text);}
html body .sfs:not(#sfs-a):not(#sfs-b) .wb-val{font-weight: 600 !important;color: var(--wb-text) !important}
.sfs .wb-val small{font-size: calc(10 * var(--u)); font-weight: 500;}
html body .sfs:not(#sfs-a):not(#sfs-b) .wb-val small{font-weight: 500 !important}
.sfs .wb-pcs, .wb-pcs.sfs{display: inline-block; font-weight: 600;}
html body .sfs:not(#sfs-a):not(#sfs-b) .wb-pcs{font-weight: 600 !important}
.sfs .wb-pcs.is-bump, .wb-pcs.is-bump.sfs{animation: op-bump .7s cubic-bezier(.2,.7,.2,1);}
.sfs .wb-glabel, .wb-glabel.sfs{font-size: calc(9 * var(--u)); line-height: calc(10.5 * var(--u)); color: var(--wb-text2); margin-top: calc(2 * var(--u)); padding: 0 calc(3 * var(--u)); text-align: center; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
html body .sfs:not(#sfs-a):not(#sfs-b) .wb-glabel{line-height: calc(10.5 * var(--u)) !important;color: var(--wb-text2) !important}
@container ms-stage (max-width: 700px){
.sfs .wb, .wb.sfs{--u: calc(100cqw / 290); grid-template-columns: 1fr; padding: calc(10 * var(--u));}
.sfs .wb-tile:not([data-id="grob"]):not([data-id="haas"]), .wb-tile:not([data-id="grob"]):not([data-id="haas"]).sfs{display: none;}
}
.sfs .pframe, .pframe.sfs{position: relative; aspect-ratio: 500 / 986; width: 100%; max-width: 360px; margin: 0 auto;}
.sfs .pframe-screen, .pframe-screen.sfs{position: absolute; left: 7.6%; top: 3.5%; width: 84.8%; height: 93%; border-radius: 12% / 5.6%; overflow: hidden; background: #000;}
.sfs .pframe-screen .ph{max-width: none; width: 390px; height: 849px; aspect-ratio: auto; border-radius: 0; box-shadow: none; transform: scale(var(--s, .78)); transform-origin: 0 0;}
.sfs .pframe, .pframe.sfs{--sb: 54px;}
.sfs .pframe .ph-island{width: 124px; height: 36px; top: 11px; border-radius: 20px;}
.sfs .pframe .ph-status{padding-left: 46px; padding-right: 34px;}
.sfs .pframe .ph-time{font-size: 17px;}
.sfs .pframe .ph-sicons svg{height: 12.5px;}
.sfs .pframe .ph-sicons svg:last-child{height: 13.5px;}
.sfs .pframe .ph-tabbar{left: 16px; right: 16px; bottom: 22px; height: 64px; border-radius: 32px;}
.sfs .pframe .ph-tab{font-size: 10px; border-radius: 28px;}
.sfs .pframe .ph-ico{width: 24px; height: 24px;}
.sfs .pframe-img, .pframe-img.sfs{position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2;}
.sfs .ph-island, .ph-island.sfs{position: absolute; left: 50%; top: 11px; width: 29%; height: 27px; transform: translateX(-50%); background: #000; border-radius: 20px;}
.sfs .ph-status, .ph-status.sfs{padding-left: 26px; padding-right: 22px;}
html.sf-dark-mode .sfs .device-frame{background: #0c0c0d; border-color: rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 48px rgba(255,255,255,.05), 0 0 160px 24px rgba(255,255,255,.06);}
html.sf-dark-mode .sfs .device-ipad::before{background: #2a2a2d;}
@media (max-width: 700px){
}
.sfs .ip-status, .ip-status.sfs{position: absolute; left: 0; right: 0; top: 0; height: 3.4%; display: flex; justify-content: space-between; align-items: center; padding: 0 2.2%; font-size: 1.45cqw; font-weight: 600; z-index: 3;}
html body .sfs:not(#sfs-a):not(#sfs-b) .ip-status{font-weight: 600 !important}
.sfs .ip-status .ph-sicons{gap: .6cqw;}
.sfs .ip-status .ph-sicons svg{height: 1.25cqw;}
.sfs .ip-status .ph-sicons span{font-size: 1.35cqw;}
.sfs .op .ip-status{color: #fff;}
html body .sfs:not(#sfs-a):not(#sfs-b) .op .ip-status{color: #fff !important}
.sfs .op-head, .op-head.sfs{height: 11%; padding-top: 3.4%;}
.sfs .op-info, .op-info.sfs{top: 14%;}
.sfs .op-stop, .op-stop.sfs{top: 13.6%;}
:root{--nc-bg: #F2F2F7; --nc-card: #FFFFFF; --nc-old: #FFE0E0; --nc-old-char: #FFB9B9; --nc-new: #DDF8DE; --nc-new-char: #A9EBAE; --nc-dim: #C9C9CE;}
html.sf-dark-mode{--nc-bg: #000000; --nc-card: #1C1C1E; --nc-old: #4A2524; --nc-old-char: #7A2E2B; --nc-new: #1F3D24; --nc-new-char: #2E6B37; --nc-dim: #0B0B0C;}
.sfs .nc, .nc.sfs{container: nc / inline-size; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--nc-dim); color: var(--ms-label); font-family: Inter, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased;}
html body .sfs:not(#sfs-a):not(#sfs-b) .nc{color: var(--ms-label) !important;font-family: Inter, -apple-system, "Segoe UI", sans-serif !important}
.sfs .nc .ip-status{color: var(--ms-label);}
html body .sfs:not(#sfs-a):not(#sfs-b) .nc .ip-status{color: var(--ms-label) !important}
.sfs .nc-sheet, .nc-sheet.sfs{position: absolute; left: 0; right: 0; top: 2.8%; bottom: 0; background: var(--nc-bg); border-radius: 1.6cqw 1.6cqw 0 0; display: flex; flex-direction: column;}
.sfs .nc-head, .nc-head.sfs{position: relative; text-align: center; font-size: 2cqw; font-weight: 700; padding: 2.4cqw 0 1.6cqw;}
html body .sfs:not(#sfs-a):not(#sfs-b) .nc-head{font-weight: 700 !important}
.sfs .nc-x, .nc-x.sfs{position: absolute; right: 2.2cqw; top: 2.4cqw; width: 2cqw; height: 2cqw; color: var(--ms-blue);}
html body .sfs:not(#sfs-a):not(#sfs-b) .nc-x{color: var(--ms-blue) !important}
.sfs .nc-view, .nc-view.sfs{flex: 1; overflow: hidden; position: relative;}
.sfs .nc-content, .nc-content.sfs{padding: 0 1.6cqw 3cqw; will-change: transform;}
.sfs .nc-cols, .nc-cols.sfs{display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; margin-bottom: 1.6cqw;}
.sfs .nc-ver, .nc-ver.sfs{background: var(--nc-card); border-radius: 1.5cqw; padding: 1.2cqw 1.6cqw; font-size: 1.35cqw; line-height: 1.6; color: var(--ms-label3);}
html body .sfs:not(#sfs-a):not(#sfs-b) .nc-ver{line-height: 1.6 !important;color: var(--ms-label3) !important}
.sfs .nc-vtop, .nc-vtop.sfs{display: flex; justify-content: space-between; align-items: baseline; color: var(--ms-label);}
html body .sfs:not(#sfs-a):not(#sfs-b) .nc-vtop{color: var(--ms-label) !important}
.sfs .nc-vname, .nc-vname.sfs{display: inline-flex; align-items: center; gap: .7cqw; font-size: 1.6cqw;}
.sfs .nc-vname > svg:first-child{width: 1.1cqw; height: .8cqw; color: var(--ms-blue);}
html body .sfs:not(#sfs-a):not(#sfs-b) .nc-vname > svg:first-child{color: var(--ms-blue) !important}
.sfs .nc-star, .nc-star.sfs{width: 1.6cqw; height: 1.6cqw; fill: none; stroke: var(--ms-label3); stroke-width: 1.4;}
.sfs .nc-star.is-on, .nc-star.is-on.sfs{fill: var(--ms-label); stroke: var(--ms-label);}
.sfs .nc-pcs, .nc-pcs.sfs{font-size: 1.15cqw; color: var(--ms-label3);}
html body .sfs:not(#sfs-a):not(#sfs-b) .nc-pcs{color: var(--ms-label3) !important}
.sfs .nc-pcs b{font-size: 1.7cqw; font-weight: 500; color: var(--ms-label3); display: inline-block;}
html body .sfs:not(#sfs-a):not(#sfs-b) .nc-pcs b{font-weight: 500 !important;color: var(--ms-label3) !important}
.sfs .nc-pcs b.is-bump{animation: op-bump .7s cubic-bezier(.2,.7,.2,1); color: var(--ms-label);}
html body .sfs:not(#sfs-a):not(#sfs-b) .nc-pcs b.is-bump{color: var(--ms-label) !important}
.sfs .nc-vrow, .nc-vrow.sfs{display: flex; justify-content: space-between;}
.sfs .nc-code, .nc-code.sfs{background: var(--nc-card); border-radius: 1.5cqw; padding: .8cqw .7cqw; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.6cqw; line-height: 2.75cqw; white-space: nowrap; overflow: hidden;}
html body .sfs:not(#sfs-a):not(#sfs-b) .nc-code{font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;line-height: 2.75cqw !important}
.sfs .nc-line, .nc-line.sfs{display: flex; gap: 1.1cqw; padding: 0 1cqw; border-radius: 1.2cqw; transition: background-color .6s ease;}
.sfs .nc-no, .nc-no.sfs{min-width: 2.2cqw;}
.sfs .nc-line b{font-weight: inherit; border-radius: .3cqw; transition: background-color .6s ease;}
html body .sfs:not(#sfs-a):not(#sfs-b) .nc-line b{font-weight: inherit !important}
.sfs .nc-cols > .nc-code:first-child .nc-line.is-lit{background: var(--nc-old);}
.sfs .nc-cols > .nc-code:first-child .nc-line.is-lit b{background: var(--nc-old-char);}
.sfs .nc-cols > .nc-code:last-child .nc-line.is-lit{background: var(--nc-new);}
.sfs .nc-cols > .nc-code:last-child .nc-line.is-lit b{background: var(--nc-new-char);}
.sfs .nc-line.is-focus, .nc-line.is-focus.sfs{animation: nc-focus 1.6s ease-out;}
.sfs .nc-cols > .nc-code:first-child .nc-line.is-focus{--nc-ring: rgba(236,77,61,.55);}
.sfs .nc-cols > .nc-code:last-child .nc-line.is-focus{--nc-ring: rgba(52,199,89,.55);}
@keyframes nc-focus{ 0% { box-shadow: 0 0 0 0 var(--nc-ring); } 25% { box-shadow: 0 0 0 .45cqw var(--nc-ring); } 100% { box-shadow: 0 0 0 .9cqw rgba(0,0,0,0); } }
.sfs .nc-more, .nc-more.sfs{margin: 0 0 1.6cqw;}
.sfs .nc-more span{display: inline-block; background: rgba(0,122,255,.1); color: var(--ms-blue); border-radius: 99px; font-size: 1.3cqw; font-weight: 600; padding: .6cqw 1.4cqw;}
html body .sfs:not(#sfs-a):not(#sfs-b) .nc-more span{color: var(--ms-blue) !important;font-weight: 600 !important}
@container ms-stage (max-width: 600px){
}
@media (prefers-reduced-motion: reduce){
.sfs .nc *{transition: none !important; animation: none !important;}
}
@media (prefers-reduced-motion: reduce){
.sfs .ph *, .sfs .op, .op.sfs, .sfs .op *, .sfs .wb *{animation: none !important; transition: none !important;}
}
:root{--hw-ink: #1C1D21; --hw-muted: #5D6270; --hw-pink: #E51D73; --hw-conn-bg: #FFFFFF; --hw-conn-line: #E3E5EA;}
html.sf-dark-mode{--hw-ink: #ECEEF2; --hw-muted: #A3A8B4; --hw-pink: #F04A90; --hw-conn-bg: #1C1C1E; --hw-conn-line: #2C2C2E;}
.sfs .hw, .hw.sfs{position: relative; container: hw / inline-size;}
.sfs .hw-stage, .hw-stage.sfs{position: relative; width: 100%; max-width: 1000px; margin: 0 auto; padding: 10px 0 30px; color: var(--hw-ink); font-family: Inter, -apple-system, "Segoe UI", sans-serif; transform-origin: 50% 0;}
html body .sfs:not(#sfs-a):not(#sfs-b) .hw-stage{color: var(--hw-ink) !important;font-family: Inter, -apple-system, "Segoe UI", sans-serif !important}
.sfs .hw-top, .hw-top.sfs{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .6fr) minmax(0, 1fr); align-items: end; gap: 2%;}
.sfs .hw-dev, .hw-dev.sfs{margin: 0; text-align: center;}
.sfs .hw-dev figcaption{margin-top: 14px; font-size: clamp(11px, 1.5cqw, 15px); line-height: 1.45; color: var(--hw-ink);}
html body .sfs:not(#sfs-a):not(#sfs-b) .hw-dev figcaption{line-height: 1.45 !important;color: var(--hw-ink) !important}
.sfs .hw-frame, .hw-frame.sfs{position: relative; margin: 0 auto; background: #0B0D12; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 60px -30px rgba(15,19,28,.55), 0 8px 20px -14px rgba(15,19,28,.4);}
.sfs .hw-tv, .hw-tv.sfs{width: min(100%, 330px); padding: 7px; border-radius: 12px;}
.sfs .hw-ipad, .hw-ipad.sfs{width: min(100%, 320px); padding: 9px; border-radius: 18px;}
.sfs .hw-ipad::before, .hw-ipad::before.sfs{content: ""; position: absolute; top: 2px; left: 50%; width: 4px; height: 4px; transform: translateX(-50%); border-radius: 50%; background: #252B33;}
.sfs .hw-tv .wb{border-radius: 6px; box-shadow: none;}
.sfs .hw-ipad .op{border-radius: 10px; box-shadow: none; max-width: none;}
.sfs .hw-dev .pframe{width: min(100%, 190px); margin: 0 auto;}
.sfs .hw-dev.is-hit .hw-frame, .sfs .hw-dev.is-hit .pframe{animation: hw-glow 1.3s ease-out;}
@keyframes hw-glow{ 0% { filter: drop-shadow(0 0 0 rgba(229,29,115,0)); } 25% { filter: drop-shadow(0 0 12px rgba(229,29,115,.45)); } 100% { filter: drop-shadow(0 0 0 rgba(229,29,115,0)); } }
.sfs .hw-mid, .hw-mid.sfs{display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: clamp(80px, 15cqw, 150px);}
.sfs .hw-conn, .hw-conn.sfs{display: flex; flex-direction: column; align-items: center; gap: 6px; width: clamp(80px, 11cqw, 110px); padding: 14px 10px 12px; border-radius: 14px; background: var(--hw-conn-bg); box-shadow: 0 6px 24px rgba(0,0,0,.08); border: 1px solid var(--hw-conn-line); font-size: clamp(12px, 1.5cqw, 15px); transform-origin: 50% 50%;}
.sfs .hw-conn img{width: 34px; height: auto;}
.sfs .hw-conn.is-hit, .hw-conn.is-hit.sfs{animation: hw-glow 1s ease-out;}
.sfs .hw-conn-text, .hw-conn-text.sfs{margin: 0 0 0 8%; font-size: clamp(11px, 1.5cqw, 15px); line-height: 1.45; text-align: center; max-width: 300px;}
html body .sfs:not(#sfs-a):not(#sfs-b) .hw-conn-text{line-height: 1.45 !important}
.sfs .hw-conn-text small{display: block; margin-top: 6px; font-size: clamp(9px, 1.15cqw, 11.5px); color: var(--hw-muted);}
html body .sfs:not(#sfs-a):not(#sfs-b) .hw-conn-text small{color: var(--hw-muted) !important}
.sfs .hw-machines, .hw-machines.sfs{position: relative; aspect-ratio: 1000 / 560; margin-top: 4%;}
.sfs .hw-m, .hw-m.sfs{position: absolute; width: 23%;}
.sfs .hw-m img{display: block; width: 100%; height: auto;}
.sfs .hw-m[data-pos="tl"], .hw-m[data-pos="tl"].sfs{left: 3%; top: 0;}
.sfs .hw-m[data-pos="tr"], .hw-m[data-pos="tr"].sfs{right: 3%; top: 0;}
.sfs .hw-m[data-pos="bl"], .hw-m[data-pos="bl"].sfs{left: 3%; top: 54%;}
.sfs .hw-m[data-pos="bc"], .hw-m[data-pos="bc"].sfs{left: 38.5%; top: 61.5%;}
.sfs .hw-m[data-pos="br"], .hw-m[data-pos="br"].sfs{right: 3%; top: 54%;}
.sfs .hw-m.is-hit img{animation: hw-pop .9s ease-out;}
@keyframes hw-pop{ 0% { filter: drop-shadow(0 0 0 rgba(229,29,115,.0)); } 30% { filter: drop-shadow(0 0 14px rgba(229,29,115,.55)); } 100% { filter: drop-shadow(0 0 0 rgba(229,29,115,0)); } }
.sfs .hw-chip, .hw-chip.sfs{position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--hw-conn-bg); border: 1px solid var(--hw-conn-line); box-shadow: 0 4px 14px rgba(0,0,0,.08); font-size: clamp(9px, 1.2cqw, 12px); white-space: nowrap;}
.sfs .hw-chip i{width: 8px; height: 8px; border-radius: 50%; background: var(--st, #8A8A94); transition: background-color .5s ease;}
.sfs .hw-chip em{font-style: normal; color: var(--hw-muted);}
html body .sfs:not(#sfs-a):not(#sfs-b) .hw-chip em{color: var(--hw-muted) !important}
.sfs .hw-lines, .hw-lines.sfs{position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none;}
.sfs .hw-path, .hw-path.sfs{fill: none; stroke: var(--hw-pink); stroke-width: 2; stroke-linecap: round;}
.sfs .hw-heads path{fill: var(--hw-pink);}
.sfs .hw-dot, .hw-dot.sfs{fill: var(--hw-pink); filter: drop-shadow(0 0 6px rgba(229,29,115,.8));}
html body .sfs:not(#sfs-a):not(#sfs-b) .hw-dot{filter: drop-shadow(0 0 6px rgba(229,29,115,.8)) !important}
@media (prefers-reduced-motion: reduce){
.sfs .hw *{animation: none !important; transition: none !important;}
}
html.sf-dark-mode .sfs .hw-frame{background: #0c0c0d; border-color: rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 48px rgba(255,255,255,.05);}
html.sf-dark-mode .sfs .hw-ipad::before{background: #2a2a2d;}
.sfs .hw-conn-text p{margin: 0;}
.sfs .hw-dev .pframe{margin: 0 auto;}
.sfs .hw-m[data-pos="tr"] .hw-chip, .sfs .hw-m[data-pos="br"] .hw-chip{left: auto; right: 2%; transform: none;}
.sfs .hw-m[data-pos="tl"] .hw-chip, .sfs .hw-m[data-pos="bl"] .hw-chip{left: 2%; transform: none;}
.sfs .hw-chip[data-status="active"], .hw-chip[data-status="active"].sfs{--st: #34C759;}
.sfs .hw-chip[data-status="change"], .hw-chip[data-status="change"].sfs{--st: #FF9500;}
.sfs .hw-chip[data-status="setup"], .hw-chip[data-status="setup"].sfs{--st: #E040FB;}
.sfs .hw-chip[data-status="np"], .hw-chip[data-status="np"].sfs{--st: #8A8A94;}
.sfs .hw-chip b{font-weight: 600;}
html body .sfs:not(#sfs-a):not(#sfs-b) .hw-chip b{font-weight: 600 !important}
@container hw (max-width: 640px){
.sfs .hw-chip b{display: none;}
.sfs .hw-chip, .hw-chip.sfs{gap: 4px; padding: 3px 8px;}
}
/* Website placement of the moving screens (appended to the generated stylesheet). */
.sfs { font-family: Inter, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; text-align: left; line-height: normal; }
.sfs *, .sfs *::before, .sfs *::after { box-sizing: border-box; }
.sfs img { max-width: none; }
.sfs .only-dark { display: none; }
html.sf-dark-mode .sfs .only-dark { display: block; }
html.sf-dark-mode .sfs .only-light { display: none; }
/* opening section: the phone in the column where the screenshot was */
.sfs-hero-phone { display: flex; justify-content: center; }
/* production drew the frame at about 88% of the column, which leaves room between the three phones */
.sfs-hero-phone .pframe { width: 88%; max-width: 280px; }
/* "This is Smart Factory": the live machine list where the old iPhone photo was; it stands there at once */
/* (its column sizes to its content and the page forces width and min-width on the wrapper, so the frame
   itself carries the width) */
.sfs-app-phone { display: flex; justify-content: center; }
.sfs-app-phone .pframe { width: min(300px, 72vw); max-width: none; }
/* "This is Smart Factory": the live Operator Panel where its screenshot was; the frame carries the width for
   the same reason as the phone (column 60% wide from 768 px, full width below) */
.sfs-app-device .device-frame { width: min(640px, 55vw); max-width: none; margin: 0; }
@media (max-width: 767px) { .sfs-app-device .device-frame { width: 86vw; } }
/* the tablet frame as on the home page (home.css #sf-v27-ctx .device-ipad), which this page does not load */
.sfs-app-device .device-frame { position: relative; box-sizing: border-box; padding: 14px; border-radius: 24px; background: #0B0D12; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 34px 80px -30px rgba(15,19,28,.55), 0 10px 26px -18px rgba(15,19,28,.4); }
.sfs-app-device .device-frame::before { content: ""; position: absolute; top: 6px; left: 50%; width: 5px; height: 5px; transform: translateX(-50%); border-radius: 50%; background: #252B33; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.sfs-app-device .device-screen { position: relative; overflow: hidden; border-radius: 16px; background: #fff; }
html.sf-dark-mode .sfs-app-device .device-frame { background: #0c0c0d; border-color: rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 48px rgba(255,255,255,.05), 0 0 160px 24px rgba(255,255,255,.06); }
html.sf-dark-mode .sfs-app-device .device-frame::before { background: #2a2a2d; }
/* tablet and TV screens fill the site's own device frame */
.device-screen > .sfs { display: block; }
.device-screen .sfs .op, .device-screen .sfs .nc { border-radius: 0; box-shadow: none; max-width: none; }
.device-screen .sfs .wb { border-radius: 0; box-shadow: none; }

/* Entrance, as the product row on apple.com/mac (Dinant 10-10-2026: "3 telefoons 1 voor 1 laten
   verschijnen", then "iets vloeiender en sneller"): each phone appears with its caption, one after the
   other, as the page opens, with Apple's easing. CSS only, so they never wait for the script; the screens
   have their final size from the first paint (inject.mjs) and are not rebuilt while they fade in. */
@keyframes sfs-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sfs-rise-in { from { transform: translateY(20px); } to { transform: none; } }
/* hidden from the first paint until the last phone is parsed (html.sfs-go, set by its script in inject.mjs),
   then all three start from that one moment; a 2 s fallback shows them if that script never runs */
html.sfs-anim:not(.sfs-go) .stack:has(> .sfs-hero-phone) { opacity: 0; animation: sfs-fallback 0s 2s forwards; }
html.sfs-anim.sfs-go .stack:has(> .sfs-hero-phone) { animation: sfs-rise-in .6s cubic-bezier(.45,0,.55,1) .05s both, sfs-fade-in .75s cubic-bezier(.45,0,.55,1) .05s both; will-change: opacity, transform; }
html.sfs-anim.sfs-go .stack:has(> .sfs-hero-phone[data-k="perf"]) { animation-delay: .25s; }
html.sfs-anim.sfs-go .stack:has(> .sfs-hero-phone[data-k="parts"]) { animation-delay: .45s; }
/* The other screens, the How it works diagram and the content blocks rise into place as they scroll into
   view, as on apple.com/ipad (Dinant 10-10-2026: "laat content vloeiend verschijnen"): 30 px and a fade,
   blocks that arrive together one after another (--sfs-d). client.js adds .is-in, and .sfs-rv to content
   blocks below the first screen. html.sfs-anim is set by a one-line script at the start of <body>
   (inject.mjs) before anything is painted, so a screen never shows, vanishes and comes back; if the screens
   script never runs (no html.sfs-live), a 5 s fallback shows everything anyway. */
html.sfs-anim :is([data-device]:has([data-sfs]), .hw-dev, .hw-conn, .hw-conn-text, .hw-lines, .sfs-rv) { transition: opacity .9s cubic-bezier(.45,0,.55,1) var(--sfs-d, 0s), transform 1s cubic-bezier(.16,.84,.24,1) var(--sfs-d, 0s), scale .3s cubic-bezier(0,0,.5,1), filter .3s cubic-bezier(0,0,.5,1); }
html.sfs-anim :is([data-device]:has([data-sfs]), .hw-dev, .hw-conn, .hw-conn-text, .hw-lines):not(.is-in) { opacity: 0; transform: translateY(30px) scale(.98); }
html.sfs-anim .sfs-rv:not(.is-in) { opacity: 0; transform: translateY(30px); }
html.sfs-anim:not(.sfs-live) :is([data-device]:has([data-sfs]), .hw-dev, .hw-conn, .hw-conn-text, .hw-lines):not(.is-in) { animation: sfs-fallback 0s 5s forwards; }
@keyframes sfs-fallback { to { opacity: 1; transform: none; } }
/* Hover, as the cards on apple.com/ipad (Dinant 10-10-2026: "schermen iets oplichten"): a screen grows a
   little and lights up. Separate scale property, so it never fights the entrance transform. */
@media (hover: hover) and (pointer: fine) {
  html.sfs-anim :is(.sfs-hero-phone .pframe, .sfs-app-phone .pframe, .sfs-app-device .device-frame) { transition: scale .3s cubic-bezier(0,0,.5,1), filter .3s cubic-bezier(0,0,.5,1); }
  html.sfs-anim :is(.sfs-hero-phone .pframe, .sfs-app-phone .pframe, .sfs-app-device .device-frame, [data-device]:has([data-sfs]), .hw-dev):hover { scale: 1.02; filter: brightness(1.05); }
}
@media (prefers-reduced-motion: reduce) { .stack:has(> .sfs-hero-phone) { animation: none; } }
html body .sfs:not(#sfs-a):not(#sfs-b), html body .sfs:not(#sfs-a):not(#sfs-b) *{letter-spacing:normal !important}
html body .sfs:not(#sfs-a):not(#sfs-b) *{color:inherit !important;font-weight:inherit !important;line-height:inherit !important;font-family:inherit !important}
html body .sfs:not(#sfs-a):not(#sfs-b){line-height:normal !important}