.sfp-hero--story h1 { max-width: 60rem; }
.sfp-hero--story .sfp-hero-sub { max-width: 54rem; font-size: 1.25rem; }
.sfp-hero--story .sfp-note { max-width: 54rem; }
.sfp-mono { font-family: var(--sfs-font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.sfp .sfp-mono--muted { color: var(--sfs-muted); }
.sfp .sfp-mono--mint { color: var(--sfs-mint); }
.sfp .sfp-mono--gap { margin-bottom: 10px; }
.sfp-lede + .sfp-lede { margin-top: 12px; }
.sfp .sfp-rows--gap { margin-top: 18px; }
.sfp .sfp-h2--gap { margin-top: 40px; }
.sfs-g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.sfs-g2--top { align-items: start; }
.sfs-g57 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.sfs-strip { background: var(--sfs-navy); color: var(--sfs-text); font-size: 0.9rem; text-align: center; padding: 9px 16px; }
.sfs-strip b { color: var(--sfs-amber); }
.sfp .sfs-strip a { color: var(--sfs-white); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin-left: 8px; }
.sfs-stage { background: var(--sfs-stage); background-image: radial-gradient(var(--sfs-stage-dot) 1px, transparent 1px); background-size: 22px 22px; color: var(--sfs-text); padding: 36px 0 44px; }
.sfs-stage--sec { padding: 64px 0; }
.sfs-stage--tight { padding: 40px 0; }
.sfp .sfs-stage h2 { color: var(--sfs-white); }
.sfp .sfs-stage .sfp-lede { color: var(--sfs-text-2); }
.sfs-top { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.sfs-live { display: inline-flex; align-items: center; gap: 8px; background: var(--sfs-green-soft); border: 1px solid var(--sfs-green-line); color: var(--sfs-mint); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 14px; }
.sfs-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--sfs-green); display: inline-block; }
.sfs-top .sfs-t { font-weight: 700; color: var(--sfs-white); font-size: 17px; }
.sfs-top .sfs-m { color: var(--sfs-muted); font-size: 14px; }
.sfs-cap { color: var(--sfs-dim); font-size: 13px; margin-top: 12px; }
.sfs-tile { aspect-ratio: 545 / 307; border-radius: 12px; background-color: var(--sfs-slate-3); background-repeat: no-repeat; background-size: 205.5% auto; position: relative; overflow: hidden; }
.sfs-tile--host { background: url(/img/streamclass/site/t4-host.jpg) center / cover; outline: 2px solid var(--sfs-green); outline-offset: -2px; }
.sfs-tile--host .sfs-tag { position: absolute; left: 8px; bottom: 8px; background: var(--sfs-scrim-4); color: var(--sfs-white); font-size: 13px; font-weight: 600; padding: 4px 9px; border-radius: 7px; }
.sfs-t-priya { background-image: url(/img/streamclass/site/gallery-faces.jpg); background-position: 98.8% .5%; }
.sfs-t-tom { background-image: url(/img/streamclass/site/gallery-faces.jpg); background-position: .9% 33.6%; }
.sfs-t-kiri { background-image: url(/img/streamclass/site/gallery-faces.jpg); background-position: 98.8% 33.6%; }
.sfs-t-sam { background-image: url(/img/streamclass/site/gallery-faces.jpg); background-position: .9% 66.3%; }
.sfs-t-dana { background-image: url(/img/streamclass/site/gallery-faces.jpg); background-position: 98.8% 66.3%; }
.sfs-t-ana { background-image: url(/img/streamclass/site/gallery-faces.jpg); background-position: .9% 99.2%; }
.sfs-t-mick { background-image: url(/img/streamclass/site/gallery-faces.jpg); background-position: 98.8% 99.2%; }
.sfs-fr { background: var(--sfs-well); border-radius: 18px; padding: 22px; color: var(--sfs-text); box-shadow: 0 18px 44px var(--sfs-shadow-fr-ink); }
.sfs-fr--flush { padding: 0; overflow: hidden; }
.sfs-navybox { display: flex; justify-content: space-between; gap: 20px; align-items: center; flex-wrap: wrap; background: var(--sfs-navy); border-radius: 20px; padding: 26px; color: var(--sfs-text-2); }
.sfp .sfs-navybox h3 { color: var(--sfs-white); font-size: 1.25rem; margin-bottom: 4px; }
.sfp .sfs-navybox p { color: var(--sfs-text-2); font-size: 1rem; }
.sfs-navybox .sfp-btn { flex: 0 0 auto; }
.sfs-doorcard { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; }
.sfs-doorcard .sfp-btn { flex: 0 0 auto; }
.sfs-mini { background: var(--sfs-navy); border-radius: 12px; padding: 14px; color: var(--sfs-text); font-size: 12.5px; display: grid; gap: 8px; min-height: 118px; align-content: start; }
.sfs-mini .sfs-k { color: var(--sfs-muted); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; }
.sfs-mini .sfs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sfs-mini .sfs-chips span { border: 1px solid var(--sfs-line-6); border-radius: 999px; padding: 3px 9px; font-size: 11.5px; }
.sfs-mini .sfs-ln { display: grid; grid-template-columns: 62px 1fr; gap: 8px; }
.sfs-mini .sfs-ln b { color: var(--sfs-muted); font-weight: 600; }
.sfs-tl2 { position: relative; height: 6px; background: var(--sfs-fill-strong); border-radius: 6px; margin: 14px 0 26px; }
.sfs-tl2 i { position: absolute; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--sfs-amber); transform: translateX(-50%); }
.sfs-tl2 i.sfs-p { background: var(--sfs-green); }
.sfs-tl2 span { position: absolute; top: 14px; transform: translateX(-50%); white-space: nowrap; color: var(--sfs-text-2); font-size: 11.5px; }
.sfs-at16 { left: 16%; } .sfs-at53 { left: 53%; } .sfs-at82 { left: 82%; }
.sfs-pcard { background: var(--sfs-white); color: var(--sfs-navy); border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px var(--sfs-shadow-ink-1); max-width: 340px; }
.sfs-pcard .sfs-fs { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sfs-indigo); background: var(--sfs-lavender-2); display: inline-block; padding: 3px 8px; border-radius: 5px; margin: 12px 14px 6px; }
.sfs-pcard img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.sfs-pcard .sfs-b { padding: 12px 14px; display: grid; gap: 6px; }
.sfs-pcard .sfs-t { display: flex; justify-content: space-between; font-weight: 700; font-size: 16px; color: var(--sfs-navy); }
.sfs-pcard .sfs-s { font-size: 12.5px; color: var(--sfs-ink-3); }
.sfs-pcard .sfs-buy { background: linear-gradient(135deg, var(--sfs-blue), var(--sfs-indigo)); color: var(--sfs-white); text-align: center; border-radius: 9px; padding: 10px; font-weight: 700; font-size: 14px; }
.sfs-player { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-radius: 14px; overflow: hidden; background: var(--sfs-slate); }
.sfs-player .sfs-side { padding: 16px; display: grid; gap: 8px; align-content: start; background: var(--sfs-slate-2); }
.sfs-player .sfs-vid { background: url(/img/streamclass/site/t5c-firedemo.jpg) center / cover; min-height: 260px; position: relative; }
.sfs-player .sfs-chip { position: absolute; left: 12px; top: 12px; background: var(--sfs-scrim); color: var(--sfs-white); font-size: 12px; padding: 5px 11px; border-radius: 999px; font-weight: 600; }
.sfs-player .sfs-pb { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 4px; background: var(--sfs-track-3); border-radius: 4px; }
.sfs-player .sfs-pb i { display: block; height: 100%; width: 23%; background: var(--sfs-violet); }
.sfs-player .sfs-pb em { position: absolute; top: -4px; left: 23%; width: 12px; height: 12px; border-radius: 50%; background: var(--sfs-amber); }
.sfs-player .sfs-q { font-size: 15px; font-weight: 700; color: var(--sfs-white); line-height: 1.3; }
.sfs-player .sfs-small { font-size: 12.5px; color: var(--sfs-muted); }
.sfs-opts { display: grid; gap: 7px; }
.sfs-opt { border: 1px solid var(--sfs-line-2); background: var(--sfs-fill); border-radius: 10px; padding: 9px 12px; font-size: 14.5px; color: var(--sfs-text); display: flex; gap: 10px; align-items: center; }
.sfs-opt span { width: 22px; height: 22px; border-radius: 6px; background: var(--sfs-fill-mid); display: grid; place-items: center; font-size: 12px; color: var(--sfs-text-2); flex: 0 0 auto; }
.sfs-ask { background: var(--sfs-well); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--sfs-text); display: grid; gap: 6px; }
.sfs-ask .sfs-u { color: var(--sfs-muted); }
.sfs-ask .sfs-a { color: var(--sfs-white); }
.sfs-diff3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sfs-diff3 .sfp-def { display: grid; gap: 10px; align-content: start; }
.sfs-diff3 .sfs-u { color: var(--sfp-text); font-size: 14.5px; padding: 10px 12px; border-radius: 10px; background: var(--sfp-canvas); }
.sfs-diff3 .sfs-u b, .sfs-diff3 .sfs-h b { display: block; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 3px; font-weight: 700; }
.sfs-diff3 .sfs-h { color: var(--sfp-ink); font-size: 15px; padding: 10px 12px; border-radius: 10px; background: var(--sf-color-primary-soft); }
.sfs-diff3 .sfs-h b { color: var(--sfp-link); }
.sfs-doors { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.sfs-door { background: var(--sfp-card); border: 1px solid var(--sfp-line); border-radius: 20px; padding: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sfp .sfs-door h3 { font-size: 1.5rem; letter-spacing: -.02em; }
.sfs-door .sfp-label { margin-bottom: 0; }
.sfs-door .sfp-btn { margin-top: 8px; }
.sfs-proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.sfs-proof .sfp-def { display: flex; gap: 18px; align-items: center; }
.sfs-proof .sfs-ic { width: 64px; height: 64px; border-radius: 16px; background: var(--sf-color-primary-soft); display: grid; place-items: center; flex: 0 0 auto; color: var(--sfp-link); }
.sfs-plain-plans .sfp-plan-who { min-height: 0; }
.sfs-plan-k { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--sfp-link); font-weight: 700; margin-bottom: 4px; }
.sfs-jump { background: var(--sf-color-primary-soft); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; color: var(--sfp-ink); margin-bottom: 1rem; }
.sfs-jump b { display: block; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--sfp-link); margin-bottom: 3px; }
.sfp .sfs-links-row { margin-top: 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sfs-links-row span { color: var(--sfp-line-strong); }
.sfs-scene { display: grid; grid-template-columns: minmax(0, 4.4fr) 40px minmax(0, 3.4fr) 40px minmax(0, 4.6fr); gap: 14px; align-items: start; position: relative; }
.sfs-lbl { display: flex; gap: 10px; align-items: center; margin-top: 14px; color: var(--sfs-white); font-weight: 700; font-size: 17px; }
.sfs-lbl .sfs-n { width: 30px; height: 30px; border-radius: 50%; background: var(--sfs-grey); color: var(--sfs-stage); font-weight: 800; display: grid; place-items: center; font-size: 15px; flex: 0 0 auto; }
.sfs-lbl--amber .sfs-n { background: var(--sfs-amber); }
.sfs-lbl small { color: var(--sfs-muted); font-family: var(--sfs-font-mono); font-size: 12px; letter-spacing: .06em; font-weight: 500; margin-left: 4px; }
.sfs-hostbig { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: url(/img/streamclass/site/t4-host.jpg) center / cover; outline: 2px solid var(--sfs-green); outline-offset: -2px; }
.sfs-hostbig .sfs-tag { position: absolute; left: 10px; bottom: 10px; background: var(--sfs-scrim-4); color: var(--sfs-white); font-size: 13px; font-weight: 600; padding: 4px 9px; border-radius: 7px; }
.sfs-hostbig .sfs-rec { position: absolute; right: 10px; top: 10px; color: var(--sfs-red-pale); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.sfs-hostbig .sfs-rec::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sfs-red); margin-right: 6px; animation: sfs-blink 1.4s infinite; }
@keyframes sfs-blink { 50% { opacity: .2; } }
.sfs-capbox { margin-top: 10px; background: var(--sfs-panel); border: 1px solid var(--sfs-line); border-radius: 12px; padding: 12px 14px; color: var(--sfs-white); font-size: 17px; line-height: 1.45; min-height: 112px; }
.sfs-capbox .sfs-k { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sfs-muted); font-weight: 600; margin-bottom: 4px; }
.sfs-capt { display: inline; clip-path: inset(0 100% 0 0); animation: sfs-type 10s steps(60) infinite; }
.sfs-capt em { font-style: normal; animation: sfs-hl 10s infinite; }
@keyframes sfs-type { 0% { clip-path: inset(0 100% 0 0); } 22%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes sfs-hl { 0%, 22% { background: var(--sfs-amber-none); box-shadow: none; } 26%, 100% { background: var(--sfs-amber-ring); box-shadow: 0 0 0 3px var(--sfs-amber-ring); } }
.sfs-arrow { display: grid; place-items: center; min-height: 220px; color: var(--sfs-amber); }
.sfs-arrow svg { width: 30px; height: 30px; opacity: .35; }
.sfs-arrow--still svg { opacity: .5; }
.sfs-arrow--a1 svg { animation: sfs-ar1 10s infinite; }
.sfs-arrow--a2 svg { animation: sfs-ar2 10s infinite; }
@keyframes sfs-ar1 { 0%, 24% { opacity: .35; transform: none; } 28% { opacity: 1; transform: translateX(6px) scale(1.25); } 34%, 100% { opacity: .35; transform: none; } }
@keyframes sfs-ar2 { 0%, 50% { opacity: .35; transform: none; } 54% { opacity: 1; transform: translateX(6px) scale(1.25); } 60%, 100% { opacity: .35; transform: none; } }
.sfs-fly { position: absolute; left: 0; top: 0; z-index: 5; background: var(--sfs-amber); color: var(--sfs-stage); font-weight: 700; font-size: 15px; padding: 8px 12px; border-radius: 10px; box-shadow: 0 14px 30px var(--sfs-shadow-ink-2); opacity: 0; pointer-events: none; white-space: nowrap; animation: sfs-fly 10s infinite; }
@keyframes sfs-fly { 0%, 25% { opacity: 0; transform: translate(4%, 262px) scale(.9); } 27% { opacity: 1; transform: translate(4%, 262px) scale(1); } 33% { opacity: 1; transform: translate(40%, 70px) scale(.95); } 35%, 100% { opacity: 0; transform: translate(40%, 70px) scale(.8); } }
.sfs-act { background: var(--sfs-panel); border: 1px solid var(--sfs-amber-ring); border-radius: 16px; padding: 18px 20px; box-shadow: 0 20px 50px var(--sfs-shadow-ink); opacity: 0; animation: sfs-actin 10s infinite; }
@keyframes sfs-actin { 0%, 31% { opacity: 0; transform: translateY(14px) scale(.96); } 37%, 100% { opacity: 1; transform: none; } }
.sfs-act .sfs-k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sfs-mint); font-weight: 700; }
.sfp .sfs-act h4 { margin: 6px 0 2px; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--sfs-amber); }
.sfs-act .sfs-q { font-size: 19px; font-weight: 700; color: var(--sfs-white); line-height: 1.3; margin-bottom: 10px; }
.sfs-act ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.sfs-act li { border: 1px solid var(--sfs-line-2); background: var(--sfs-fill); border-radius: 10px; padding: 9px 12px; font-size: 14.5px; color: var(--sfs-text); display: flex; gap: 10px; align-items: center; }
.sfs-act li span { width: 22px; height: 22px; border-radius: 6px; background: var(--sfs-fill-mid); display: grid; place-items: center; font-size: 12px; color: var(--sfs-text-2); flex: 0 0 auto; }
.sfs-press { margin-top: 12px; background: var(--sfs-white); color: var(--sfs-navy); border-radius: 9px; padding: 10px; text-align: center; font-weight: 700; font-size: 14.5px; animation: sfs-press 10s infinite; }
@keyframes sfs-press { 0%, 49% { transform: none; background: var(--sfs-white); } 52% { transform: scale(.95); background: var(--sfs-amber); } 55%, 100% { transform: none; background: var(--sfs-white); } }
.sfs-screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sfs-scr { position: relative; aspect-ratio: 545 / 307; border-radius: 10px; overflow: hidden; background-color: var(--sfs-slate-3); background-repeat: no-repeat; background-size: 205.5% auto; }
.sfs-scr .sfs-mini2 { position: absolute; inset: auto 6px 6px 6px; background: var(--sfs-scrim-deep); border: 1px solid var(--sfs-amber-mark); border-radius: 9px; padding: 7px 9px; color: var(--sfs-white); font-size: 11.5px; line-height: 1.2; font-weight: 700; opacity: 0; animation: sfs-mini 10s infinite; display: grid; gap: 5px; }
.sfs-scr .sfs-mini2 small { display: grid; gap: 3px; }
.sfs-scr .sfs-mini2 small i { display: block; height: 4px; border-radius: 2px; background: var(--sfs-track-2); }
.sfs-scr .sfs-mini2 small i:nth-child(2) { width: 80%; }
.sfs-scr .sfs-mini2 small i:nth-child(3) { width: 60%; }
.sfs-scr:nth-child(2) .sfs-mini2 { animation-delay: .25s; }
.sfs-scr:nth-child(3) .sfs-mini2 { animation-delay: .5s; }
.sfs-scr:nth-child(4) .sfs-mini2 { animation-delay: .75s; }
.sfs-scr:nth-child(5) .sfs-mini2 { animation-delay: 1s; }
.sfs-scr:nth-child(6) .sfs-mini2 { animation-delay: 1.25s; }
@keyframes sfs-mini { 0%, 52% { opacity: 0; transform: translateY(10px) scale(.9); } 57%, 100% { opacity: 1; transform: none; } }
.sfs-scr .sfs-tick { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--sfs-green); color: var(--sfs-stage); font-size: 13px; font-weight: 800; display: grid; place-items: center; transform: scale(0); animation: sfs-tick 10s infinite; }
.sfs-scr:nth-child(1) .sfs-tick { animation-delay: .3s; }
.sfs-scr:nth-child(2) .sfs-tick { animation-delay: .9s; }
.sfs-scr:nth-child(3) .sfs-tick { animation-delay: .5s; }
.sfs-scr:nth-child(5) .sfs-tick { animation-delay: 1.2s; }
.sfs-scr:nth-child(6) .sfs-tick { animation-delay: .7s; }
.sfs-scr.sfs-no .sfs-tick { display: none; }
@keyframes sfs-tick { 0%, 70% { transform: scale(0); } 74% { transform: scale(1.25); } 77%, 100% { transform: scale(1); } }
.sfs-count { margin-top: 10px; background: var(--sfs-panel); border: 1px solid var(--sfs-line); border-radius: 12px; padding: 10px 14px; display: flex; align-items: baseline; gap: 8px; color: var(--sfs-muted); font-size: 14px; }
@property --sfs-n { syntax: "<integer>"; initial-value: 0; inherits: false; }
.sfs-cnt { font-size: 28px; font-weight: 800; color: var(--sfs-white); font-variant-numeric: tabular-nums; counter-reset: sfsn var(--sfs-n); animation: sfs-cnt 10s infinite; }
.sfs-cnt::after { content: counter(sfsn); }
@keyframes sfs-cnt { 0%, 70% { --sfs-n: 0; } 86%, 100% { --sfs-n: 11; } }
.sfs-scene .sfs-lbl .sfs-n { animation: sfs-lb1 10s infinite; }
.sfs-scene .sfs-sc2 .sfs-lbl .sfs-n { animation-name: sfs-lb2; }
.sfs-scene .sfs-sc3 .sfs-lbl .sfs-n { animation-name: sfs-lb3; }
@keyframes sfs-lb1 { 0%, 26% { background: var(--sfs-amber); box-shadow: 0 0 0 7px var(--sfs-amber-soft); } 32%, 100% { background: var(--sfs-grey); box-shadow: none; } }
@keyframes sfs-lb2 { 0%, 30% { background: var(--sfs-grey); box-shadow: none; } 36%, 54% { background: var(--sfs-amber); box-shadow: 0 0 0 7px var(--sfs-amber-soft); } 60%, 100% { background: var(--sfs-grey); box-shadow: none; } }
@keyframes sfs-lb3 { 0%, 56% { background: var(--sfs-grey); box-shadow: none; } 62%, 100% { background: var(--sfs-amber); box-shadow: 0 0 0 7px var(--sfs-amber-soft); } }
.sfs-beat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; padding: 36px 0; border-top: 1px solid var(--sfp-line); }
.sfs-beat:first-child { border-top: 0; }
.sfs-beats { margin-top: 12px; }
.sfs-beat .sfs-tm { color: var(--sfp-link); font-family: var(--sfs-font-mono); font-size: 13px; letter-spacing: .06em; margin-bottom: 8px; }
.sfp .sfs-beat h3 { font-size: 1.625rem; letter-spacing: -.02em; margin-bottom: 10px; line-height: 1.2; }
.sfp .sfs-beat p { font-size: 1.03rem; line-height: 1.55; }
.sfs-fanwrap { position: relative; height: 360px; }
.sfs-fcard { position: absolute; left: 50%; top: 50%; width: 300px; margin-left: -150px; margin-top: -120px; background: var(--sfs-panel); border: 1px solid var(--sfs-line-2); border-radius: 16px; padding: 16px 18px; color: var(--sfs-white); box-shadow: 0 20px 50px var(--sfs-shadow-ink); transform-origin: 50% 120%; }
.sfs-fcard .sfs-k { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sfs-amber); font-weight: 700; }
.sfs-fcard .sfs-q { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 6px 0 10px; }
.sfs-fcard .sfs-o { display: grid; gap: 5px; }
.sfs-fcard .sfs-o span { border: 1px solid var(--sfs-line-2); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; color: var(--sfs-text-2); }
.sfs-fcard.sfs-c1 { animation: sfs-f1 12s ease-in-out infinite; }
.sfs-fcard.sfs-c2 { animation: sfs-f2 12s ease-in-out infinite; }
.sfs-fcard.sfs-c3 { animation: sfs-f3 12s ease-in-out infinite; }
.sfs-fcard.sfs-c4 { animation: sfs-f4 12s ease-in-out infinite; }
.sfs-fcard.sfs-c5 { animation: sfs-f5 12s ease-in-out infinite; }
@keyframes sfs-f1 { 0%, 16% { transform: rotate(0) translateY(0) scale(1.04); z-index: 5; opacity: 1; } 24%, 92% { transform: rotate(-16deg) translateX(-60px) translateY(10px) scale(.94); z-index: 1; opacity: .75; } 100% { transform: rotate(0) scale(1.04); z-index: 5; opacity: 1; } }
@keyframes sfs-f2 { 0%, 16% { transform: rotate(-8deg) translateX(-30px) translateY(6px) scale(.96); z-index: 4; opacity: .85; } 24%, 36% { transform: rotate(0) scale(1.04); z-index: 5; opacity: 1; } 44%, 100% { transform: rotate(-8deg) translateX(-30px) translateY(6px) scale(.96); z-index: 4; opacity: .85; } }
@keyframes sfs-f3 { 0%, 36% { transform: rotate(0) scale(.98); z-index: 3; opacity: .8; } 44%, 56% { transform: rotate(0) scale(1.04); z-index: 5; opacity: 1; } 64%, 100% { transform: rotate(0) scale(.98); z-index: 3; opacity: .8; } }
@keyframes sfs-f4 { 0%, 56% { transform: rotate(8deg) translateX(30px) translateY(6px) scale(.96); z-index: 2; opacity: .85; } 64%, 76% { transform: rotate(0) scale(1.04); z-index: 5; opacity: 1; } 84%, 100% { transform: rotate(8deg) translateX(30px) translateY(6px) scale(.96); z-index: 2; opacity: .85; } }
@keyframes sfs-f5 { 0%, 76% { transform: rotate(16deg) translateX(60px) translateY(10px) scale(.94); z-index: 1; opacity: .75; } 84%, 96% { transform: rotate(0) scale(1.04); z-index: 5; opacity: 1; } 100% { transform: rotate(16deg) translateX(60px) translateY(10px) scale(.94); z-index: 1; opacity: .75; } }
.sfs-sell { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 18px; align-items: start; }
.sfs-feed { display: grid; gap: 8px; }
.sfs-feed .sfs-it { background: var(--sfs-fill-2); border: 1px solid var(--sfs-line); border-radius: 12px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; color: var(--sfs-text); font-size: 14px; opacity: 0; animation: sfs-feed 9s infinite; }
.sfs-feed .sfs-it:nth-child(2) { animation-delay: 1.2s; }
.sfs-feed .sfs-it:nth-child(3) { animation-delay: 2.4s; }
.sfs-feed .sfs-it:nth-child(4) { animation-delay: 3.6s; }
@keyframes sfs-feed { 0% { opacity: 0; transform: translateY(10px); } 6%, 100% { opacity: 1; transform: none; } }
.sfs-av { width: 34px; height: 34px; border-radius: 50%; background-color: var(--sfs-slate-3); background-repeat: no-repeat; background-size: 380% auto; flex: 0 0 auto; }
.sfs-feed .sfs-it b { color: var(--sfs-white); }
.sfs-feed .sfs-it small { margin-left: auto; color: var(--sfs-muted); font-family: var(--sfs-font-mono); font-size: 11px; }
.sfs-tot { margin-top: 6px; background: var(--sfs-panel); border: 1px solid var(--sfs-line); border-radius: 12px; padding: 12px 14px; color: var(--sfs-muted); font-size: 14px; }
.sfs-tot b { display: block; color: var(--sfs-white); font-size: 26px; font-weight: 800; }
.sfs-tl { position: relative; padding: 34px 0 10px; }
.sfs-tl .sfs-bar2 { height: 6px; border-radius: 6px; background: var(--sfs-line-2); position: relative; }
.sfs-tl .sfs-bar2 i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--sf-color-primary), var(--sf-color-purple)); border-radius: 6px; }
.sfs-tl .sfs-mk { position: absolute; top: 22px; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; color: var(--sfs-text-2); font-size: 12px; text-align: center; width: 88px; }
.sfs-tl .sfs-mk.sfs-lo b { margin-top: 30px; }
.sfs-tl .sfs-mk i { width: 14px; height: 14px; border-radius: 50%; background: var(--sfs-amber); border: 3px solid var(--sfs-well); box-shadow: 0 0 0 2px var(--sfs-amber); animation: sfs-pulse 6s infinite; }
.sfs-tl .sfs-mk:nth-child(3) i { animation-delay: 1s; }
.sfs-tl .sfs-mk:nth-child(4) i { animation-delay: 2s; }
.sfs-tl .sfs-mk:nth-child(5) i { animation-delay: 3s; }
.sfs-tl .sfs-mk:nth-child(6) i { animation-delay: 4s; }
.sfs-tl .sfs-mk i.sfs-end { background: var(--sfs-green); box-shadow: 0 0 0 2px var(--sfs-green); animation: none; }
@keyframes sfs-pulse { 0%, 8% { box-shadow: 0 0 0 2px var(--sfs-amber); } 4% { box-shadow: 0 0 0 8px var(--sfs-amber-ring); } }
.sfs-tl .sfs-mk b { display: block; color: var(--sfs-white); font-size: 12.5px; }
.sfs-tl .sfs-mk small { color: var(--sfs-muted); font-family: var(--sfs-font-mono); font-size: 10.5px; }
.sfs-at16-5 { left: 16.5%; } .sfs-at28 { left: 28%; } .sfs-at40 { left: 40%; } .sfs-at53-6 { left: 53.6%; } .sfs-at77 { left: 77%; } .sfs-at100 { left: 100%; }
.sfs-ends2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 104px; }
.sfs-ends2 div { border: 1px solid var(--sfs-line-3); border-radius: 12px; padding: 14px; font-size: 13.5px; color: var(--sfs-text-2); }
.sfs-ends2 div b { display: block; color: var(--sfs-white); font-size: 15.5px; margin-bottom: 3px; }
.sfs-ends2 div.sfs-on { border-color: var(--sfs-mint); background: var(--sfs-green-soft-1); }
.sfs-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sfs-col { background: var(--sfs-fill); border: 1px solid var(--sfs-fill-mid); border-radius: 14px; padding: 10px; display: grid; gap: 8px; align-content: start; }
.sfp .sfs-col h5 { margin: 0 0 2px; color: var(--sfs-white); font-size: 13.5px; padding: 4px 6px; font-weight: 700; }
.sfs-col h5 small { display: block; color: var(--sfs-muted); font-weight: 500; font-family: var(--sfs-font-mono); font-size: 10.5px; margin-top: 2px; }
.sfs-bc { background: var(--sfs-panel); border: 1px solid var(--sfs-line-2); border-radius: 10px; padding: 9px 10px; font-size: 12.5px; color: var(--sfs-text); display: flex; gap: 8px; align-items: center; opacity: 0; animation: sfs-bcin 9s infinite; }
.sfs-bc i { font-style: normal; width: 8px; height: 8px; border-radius: 50%; background: var(--sf-color-primary); flex: 0 0 auto; }
.sfs-bc.sfs-v i { background: var(--sfs-muted); }
.sfs-bc.sfs-a i { background: var(--sfs-amber); }
.sfs-bc.sfs-p i { background: var(--sfs-green); }
.sfs-bc.sfs-c i { background: var(--sfs-pink); }
.sfs-bc small { margin-left: auto; color: var(--sfs-muted); font-family: var(--sfs-font-mono); font-size: 10.5px; }
.sfs-col:nth-child(1) .sfs-bc:nth-of-type(1) { animation-delay: .2s; }
.sfs-col:nth-child(1) .sfs-bc:nth-of-type(2) { animation-delay: .6s; }
.sfs-col:nth-child(1) .sfs-bc:nth-of-type(3) { animation-delay: 1s; }
.sfs-col:nth-child(2) .sfs-bc:nth-of-type(1) { animation-delay: 1.4s; }
.sfs-col:nth-child(2) .sfs-bc:nth-of-type(2) { animation-delay: 1.8s; }
.sfs-col:nth-child(2) .sfs-bc:nth-of-type(3) { animation-delay: 2.2s; }
.sfs-col:nth-child(3) .sfs-bc:nth-of-type(1) { animation-delay: 2.6s; }
.sfs-col:nth-child(3) .sfs-bc:nth-of-type(2) { animation-delay: 3s; }
.sfs-col:nth-child(3) .sfs-bc:nth-of-type(3) { animation-delay: 3.4s; }
.sfs-col:nth-child(3) .sfs-bc:nth-of-type(4) { animation-delay: 3.8s; }
@keyframes sfs-bcin { 0% { opacity: 0; transform: translateY(8px); } 6%, 100% { opacity: 1; transform: none; } }
.sfs-bhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; color: var(--sfs-muted); font-size: 13px; }
.sfs-bhead b { color: var(--sfs-white); font-size: 15px; }
.sfs-bhead span { background: var(--sfs-white); color: var(--sfs-navy); border-radius: 8px; padding: 6px 12px; font-weight: 700; font-size: 13px; }
.sfs-player--replay .sfs-pb i { animation: sfs-prog 9s linear infinite; }
@keyframes sfs-prog { 0% { width: 18%; } 100% { width: 30%; } }
.sfs-player .sfs-dots { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 4px; pointer-events: none; }
.sfs-player .sfs-dots i { position: absolute; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--sfs-amber); border: 2px solid var(--sfs-well); }
.sfs-watch { position: absolute; right: 12px; top: 12px; background: var(--sfs-scrim); color: var(--sfs-white); font-size: 12px; padding: 5px 11px; border-radius: 999px; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.sfs-watch .sfs-av { width: 20px; height: 20px; }
.sfs-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sfs-kind { background: var(--sfs-panel); border: 1px solid var(--sfs-line); border-radius: 16px; padding: 18px 20px; color: var(--sfs-text-2); }
.sfs-kind b { display: block; color: var(--sfs-white); font-size: 17px; margin-bottom: 6px; }
.sfp .sfs-kind p { font-size: 14.5px; line-height: 1.45; color: var(--sfs-text-2); }
.sfs-kind .sfs-ex { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.sfs-kind .sfs-ex span { border: 1px solid var(--sfs-line-3); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; color: var(--sfs-text); }
.sfs-say { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; }
.sfs-sug { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.sfs-sug .sfs-r { display: flex; gap: 10px; align-items: center; background: var(--sfs-fill-2); border: 1px solid var(--sfs-line); border-radius: 10px; padding: 9px 12px; font-size: 14px; }
.sfs-sug .sfs-r b { color: var(--sfs-white); white-space: nowrap; }
.sfs-sug .sfs-r q { color: var(--sfs-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.sfs-sug .sfs-r q::before, .sfs-sug .sfs-r q::after { content: '"'; }
.sfs-sug .sfs-r kbd { border: 1px solid var(--sfs-line-6); border-radius: 5px; padding: 1px 6px; font-size: 11px; color: var(--sfs-text-2); font-family: var(--sf-font-sans); }
.sfs-dict { margin-top: 14px; background: var(--sfs-panel); border: 1px solid var(--sfs-line); border-radius: 16px; padding: 18px 20px; display: grid; gap: 12px; }
.sfs-dict .sfs-mic { display: inline-flex; align-items: center; gap: 8px; background: var(--sfs-red); color: var(--sfs-white); border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 14px; justify-self: start; }
.sfs-dict .sfs-tr { font-size: 15px; color: var(--sfs-text-2); line-height: 1.5; }
.sfs-dict .sfs-fld2 { display: grid; gap: 6px; }
.sfs-dict label { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--sfs-muted); font-weight: 600; }
.sfs-dict .sfs-in { border: 1px solid var(--sfs-line-4); border-radius: 9px; padding: 9px 12px; color: var(--sfs-white); font-size: 14.5px; background: var(--sfs-fill); }
.sfs-dict .sfs-go2 { background: var(--sfs-white); color: var(--sfs-navy); border-radius: 9px; padding: 10px; text-align: center; font-weight: 700; font-size: 14px; }
.sfs-lscene { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; }
.sfs-lscene > div { min-width: 0; }
.sfs-hs { background: var(--sfs-panel-deep); border: 1px solid var(--sfs-fill-mid); border-radius: 18px; padding: 18px; display: grid; gap: 14px; align-content: start; }
.sfs-hwrap { position: relative; }
.sfs-hgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; position: relative; z-index: 1; }
.sfs-hgrid .sfs-tile { border-radius: 10px; }
.sfs-hgrid .sfs-tile::after { content: "\2713"; position: absolute; right: 5px; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--sfs-green); color: var(--sfs-stage); font-size: 11px; font-weight: 800; display: grid; place-items: center; opacity: 0; transform: scale(.4); animation: 12s infinite; }
.sfs-hgrid .sfs-tile.sfs-no::after { content: ""; background: var(--sfs-amber); }
.sfs-rooms { position: absolute; inset: -9px -9px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 6px; pointer-events: none; }
.sfs-rm { position: relative; border: 2px solid var(--sfs-violet); border-radius: 14px; opacity: 0; animation: sfs-lroom 12s infinite; }
.sfs-rm b { position: absolute; left: 10px; top: -12px; background: var(--sfs-violet); color: var(--sfs-stage); font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.sfs-rm em { position: absolute; right: 10px; top: -12px; background: var(--sfs-stage); border: 1px solid var(--sfs-violet); color: var(--sfs-violet-pale); font: 500 11.5px var(--sfs-font-mono); padding: 1px 7px; border-radius: 6px; }
.sfs-rm em::after { content: "4:00"; }
.sfs-rm span { position: absolute; left: 10px; bottom: -11px; background: var(--sfs-panel-deep); color: var(--sfs-violet-soft); font-size: 11.5px; font-weight: 600; padding: 2px 6px; border-radius: 5px; white-space: nowrap; }
.sfs-hfoot { display: flex; align-items: center; gap: 12px; color: var(--sfs-muted); font-size: 13px; }
.sfs-hfoot .sfs-tile { width: 120px; aspect-ratio: 4 / 3; border-radius: 8px; flex: none; }
.sfs-hfoot .sfs-tile .sfs-tag { font-size: 11px; padding: 3px 7px; left: 6px; bottom: 6px; }
.sfs-mp { background: var(--sfs-panel); border: 1px solid var(--sfs-line); border-radius: 18px; padding: 18px 20px; display: grid; gap: 12px; align-content: start; }
.sfs-mp .sfs-q { font-size: 18px; font-weight: 700; color: var(--sfs-white); line-height: 1.3; }
.sfs-bars { display: grid; gap: 10px; }
.sfs-br { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 13.5px; color: var(--sfs-text-2); align-items: center; }
.sfs-br i { grid-column: 1 / 3; display: block; height: 9px; border-radius: 9px; background: var(--sfs-line); position: relative; overflow: hidden; }
.sfs-br i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9px; background: var(--sfs-green); width: 0; }
.sfs-br.sfs-n2 i::after { background: var(--sfs-amber); }
.sfs-br b { color: var(--sfs-white); opacity: 0; animation: sfs-lbn 12s infinite; }
.sfs-cnt2 { color: var(--sfs-muted); font-size: 13.5px; counter-reset: sfsn var(--sfs-n); animation: sfs-lcnt 12s infinite; }
.sfs-cnt2 .sfs-cntn { color: var(--sfs-white); font-weight: 700; }
.sfs-cnt2 .sfs-cntn::after { content: counter(sfsn); }
.sfs-ready { background: var(--sfs-well); border: 1px solid var(--sfs-green-line-2); border-radius: 14px; padding: 14px; display: grid; gap: 8px; opacity: 0; animation: sfs-lready 12s infinite; }
.sfs-ready .sfs-rq { font-size: 16px; font-weight: 700; color: var(--sfs-white); }
.sfs-ready .sfs-rs { font-size: 13.5px; color: var(--sfs-muted); line-height: 1.45; }
.sfs-ready .sfs-keys { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--sfs-text-2); }
.sfs-ready kbd { font: 600 12px var(--sfs-font-mono); border: 1px solid var(--sfs-line-bold); border-radius: 6px; padding: 3px 9px; color: var(--sfs-white); background: var(--sfs-slate); animation: sfs-lkey 12s infinite; }
.sfs-paired { font-size: 13.5px; color: var(--sfs-violet-soft); font-weight: 600; opacity: 0; animation: sfs-lpair 12s infinite; }
@keyframes sfs-tka1 { 0%, 10% { opacity: 0; transform: scale(.4); } 12%, 100% { opacity: 1; transform: scale(1); } }
.sfs-hgrid .sfs-a1::after { animation-name: sfs-tka1; }
@keyframes sfs-tka2 { 0%, 14% { opacity: 0; transform: scale(.4); } 16%, 100% { opacity: 1; transform: scale(1); } }
.sfs-hgrid .sfs-a2::after { animation-name: sfs-tka2; }
@keyframes sfs-tka3 { 0%, 19% { opacity: 0; transform: scale(.4); } 21%, 100% { opacity: 1; transform: scale(1); } }
.sfs-hgrid .sfs-a3::after { animation-name: sfs-tka3; }
@keyframes sfs-tka4 { 0%, 25% { opacity: 0; transform: scale(.4); } 27%, 100% { opacity: 1; transform: scale(1); } }
.sfs-hgrid .sfs-a4::after { animation-name: sfs-tka4; }
@keyframes sfs-tka5 { 0%, 31% { opacity: 0; transform: scale(.4); } 33%, 100% { opacity: 1; transform: scale(1); } }
.sfs-hgrid .sfs-a5::after { animation-name: sfs-tka5; }
@keyframes sfs-tka6 { 0%, 36% { opacity: 0; transform: scale(.4); } 38%, 100% { opacity: 1; transform: scale(1); } }
.sfs-hgrid .sfs-a6::after { animation-name: sfs-tka6; }
@keyframes sfs-lb1w { 0%, 8% { width: 0; } 40%, 100% { width: 57%; } }
.sfs-br.sfs-n1 i::after { animation: sfs-lb1w 12s infinite; }
@keyframes sfs-lb2w { 0%, 8% { width: 0; } 40%, 100% { width: 21%; } }
.sfs-br.sfs-n2 i::after { animation: sfs-lb2w 12s infinite; }
@keyframes sfs-lbn { 0%, 36% { opacity: 0; } 40%, 100% { opacity: 1; } }
@keyframes sfs-lcnt { 0%, 8% { --sfs-n: 0; } 40%, 100% { --sfs-n: 11; } }
@keyframes sfs-lready { 0%, 45% { opacity: 0; transform: translateY(10px); } 50%, 100% { opacity: 1; transform: none; } }
@keyframes sfs-lkey { 0%, 53% { transform: none; background: var(--sfs-slate); } 55% { transform: scale(.88); background: var(--sfs-white); color: var(--sfs-navy); } 57%, 100% { transform: none; background: var(--sfs-slate); } }
@keyframes sfs-lroom { 0%, 58% { opacity: 0; transform: scale(.96); } 62%, 100% { opacity: 1; transform: none; } }
@keyframes sfs-lpair { 0%, 58% { opacity: 0; } 62%, 100% { opacity: 1; } }
.sfs-ends3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sfs-ends3 .sfp-def { display: grid; gap: 12px; align-content: start; }
.sfs-ends3 .sfp-step-n { margin-bottom: 0; }
.sfs-prod { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.sfs-prod .sfs-notes { display: grid; gap: 12px; font-size: 15px; color: var(--sfs-text-2); }
.sfs-prod .sfs-notes b { color: var(--sfs-white); display: block; }
.sfs-askdemo { display: grid; gap: 10px; }
.sfs-askdemo .sfs-q2 { background: var(--sfp-surface); border: 1px solid var(--sfp-line); border-radius: 12px; padding: 12px 14px; font-size: 15px; color: var(--sfp-ink); }
.sfs-askdemo .sfs-a2 { background: var(--sf-color-primary-soft); border-radius: 12px; padding: 12px 14px; font-size: 15px; color: var(--sfp-ink); }
.sfs-askdemo .sfs-a2 small { display: block; color: var(--sfp-link); font-size: 12.5px; margin-top: 4px; font-weight: 600; }
.sfs-askdemo .sfs-no2 { background: var(--sfp-surface); border: 1px dashed var(--sfp-line-strong); border-radius: 12px; padding: 12px 14px; font-size: 15px; color: var(--sfp-text); }
.sfs-cert { background: var(--sfp-surface); border: 1px solid var(--sfp-line); border-radius: 16px; padding: 22px; display: grid; gap: 10px; box-shadow: var(--sf-shadow-lg); }
.sfs-cert .sfs-ln { display: flex; justify-content: space-between; font-size: 14.5px; border-bottom: 1px solid var(--sfp-line); padding: 8px 0; gap: 12px; }
.sfs-cert .sfs-ln:last-child { border-bottom: 0; }
.sfs-cert .sfs-ln b { color: var(--sfp-ink); text-align: right; }
.sfs-cert .sfs-ok { display: inline-flex; align-items: center; gap: 8px; color: var(--sf-color-success-ink); font-weight: 700; font-size: 14px; }
@property --sfs-mi { syntax: "<integer>"; inherits: false; initial-value: 9; }
@property --sfs-se { syntax: "<integer>"; inherits: false; initial-value: 40; }
@property --sfs-r { syntax: "<integer>"; inherits: false; initial-value: 0; }
@property --sfs-tt { syntax: "<integer>"; inherits: false; initial-value: 245; }
.sfs-od { border-radius: 16px; overflow: hidden; background: var(--sfs-well); box-shadow: 0 30px 70px var(--sfs-shadow-ink); }
.sfs-odu { display: flex; align-items: center; gap: 12px; background: var(--sfs-chrome); padding: 9px 14px; font-size: 13px; color: var(--sfs-muted); }
.sfs-odu .sfs-dots3 { display: flex; gap: 6px; }
.sfs-odu .sfs-dots3 i { width: 10px; height: 10px; border-radius: 50%; background: var(--sfs-dot); display: block; }
.sfs-odu .sfs-url { flex: 1; min-width: 0; background: var(--sfs-well); border-radius: 8px; padding: 6px 12px; color: var(--sfs-text-2); font-family: var(--sfs-font-mono); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfs-odu .sfs-who { color: var(--sfs-text); font-weight: 600; white-space: nowrap; }
.sfs-odm { display: grid; grid-template-columns: minmax(0, 1fr) 400px; }
.sfs-odm > div { min-width: 0; }
.sfs-odv { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.sfs-odv .sfs-pic { background: url(/img/streamclass/site/t5b-firedemo.jpg) center / cover; min-height: 440px; position: relative; }
.sfs-odv .sfs-chip { position: absolute; left: 14px; top: 14px; background: var(--sfs-scrim-3); color: var(--sfs-white); font-size: 13px; padding: 6px 12px; border-radius: 999px; font-weight: 600; opacity: 0; display: inline-flex; gap: 8px; align-items: center; }
.sfs-odv .sfs-chip i { font-style: normal; font-weight: 800; letter-spacing: -2px; font-size: 11px; }
.sfs-odv .sfs-chip.sfs-c4 { background: var(--sfs-amber); color: var(--sfs-stage); }
.sfs-odv .sfs-pause { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.sfs-odv .sfs-pause i { width: 64px; height: 64px; border-radius: 50%; background: var(--sfs-scrim-1); display: grid; place-items: center; color: var(--sfs-white); font-size: 22px; font-style: normal; font-weight: 800; letter-spacing: -2px; }
.sfs-ctl { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--sfs-chrome-2); color: var(--sfs-text); }
.sfs-ctl .sfs-pp { width: 34px; height: 34px; border-radius: 50%; background: var(--sfs-white); color: var(--sfs-navy); position: relative; flex: none; }
.sfs-ctl .sfs-pp span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; opacity: 0; }
.sfs-ctl .sfs-pp .sfs-go { font-size: 13px; padding-left: 3px; }
.sfs-ctl .sfs-pp .sfs-st { letter-spacing: -2px; }
.sfs-ctl .sfs-tm { font-family: var(--sfs-font-mono); font-size: 13px; color: var(--sfs-text); min-width: 108px; counter-reset: sfsmi var(--sfs-mi) sfsse var(--sfs-se); }
.sfs-ctl .sfs-tm::after { content: counter(sfsmi) ":" counter(sfsse, decimal-leading-zero) " / 58:10"; }
.sfs-ctl .sfs-sb { flex: 1; height: 5px; background: var(--sfs-track); border-radius: 4px; position: relative; }
.sfs-ctl .sfs-sb i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--sfs-violet); border-radius: 4px; width: 15.8%; }
.sfs-ctl .sfs-sb em { position: absolute; top: -4px; left: 15.8%; width: 13px; height: 13px; border-radius: 50%; background: var(--sfs-white); transform: translateX(-50%); box-shadow: 0 0 0 2px var(--sfs-head-ring); }
.sfs-ctl .sfs-sb b { position: absolute; top: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--sfs-amber); transform: translateX(-50%); }
.sfs-ctl .sfs-sb b.sfs-sale { background: var(--sfs-white); width: 11px; height: 11px; top: -3px; border: 2px solid var(--sfs-amber); box-sizing: border-box; }
.sfs-at16-6 { left: 16.6%; } .sfs-at38-7 { left: 38.7%; } .sfs-at70-8 { left: 70.8%; } .sfs-at89-8 { left: 89.8%; }
.sfs-ctl .sfs-ic { color: var(--sfs-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.sfs-odp { position: relative; background: var(--sfs-paper); color: var(--sfs-navy); border-left: 1px solid var(--sfs-text); }
.sfs-pn { position: absolute; inset: 22px; display: grid; gap: 12px; align-content: start; opacity: 0; }
.sfs-pn .sfs-k { font-family: var(--sfs-font-mono); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--sfs-indigo); font-weight: 600; }
.sfs-pn .sfs-k.sfs-p { color: var(--sfs-amber-ink); }
.sfs-pn .sfs-k.sfs-g { color: var(--sfs-green-ink); }
.sfp .sfs-pn h4 { font-size: 19px; line-height: 1.3; margin: 0; letter-spacing: -.01em; color: var(--sfs-navy); }
.sfp .sfs-pn p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--sfs-grey); }
.sfs-pn .sfs-meta { display: grid; gap: 7px; font-size: 14px; color: var(--sfs-ink-2); }
.sfs-pn .sfs-meta span { display: flex; gap: 9px; align-items: center; }
.sfs-pn .sfs-meta span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sfs-indigo); flex: none; }
.sfs-pn .sfs-askb { background: var(--sfs-blue); color: var(--sfs-white); border-radius: 10px; text-align: center; font-weight: 700; padding: 11px; font-size: 14.5px; }
.sfs-pn .sfs-o { display: flex; gap: 10px; align-items: center; background: var(--sfs-white); border: 2px solid var(--sfs-text); border-radius: 10px; padding: 10px 12px; font-size: 14.5px; color: var(--sfs-navy); }
.sfs-pn .sfs-o span { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--sfs-text-2); flex: none; display: grid; place-items: center; }
.sfs-pn .sfs-o span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sfs-indigo); opacity: 0; }
.sfs-pn .sfs-chk { background: linear-gradient(135deg, var(--sfs-blue), var(--sfs-indigo)); color: var(--sfs-white); border-radius: 10px; text-align: center; font-weight: 700; padding: 11px; font-size: 14.5px; }
.sfs-pn .sfs-ok { background: var(--sfs-emerald); color: var(--sfs-emerald-ink); border-radius: 10px; padding: 10px 12px; font-size: 14px; font-weight: 700; opacity: 0; }
.sfs-pn .sfs-typed { background: var(--sfs-white); border: 1px solid var(--sfs-text-2); border-radius: 10px; padding: 11px 12px; font-size: 14.5px; white-space: nowrap; overflow: hidden; clip-path: inset(0 100% 0 0); color: var(--sfs-navy); }
.sfs-pn .sfs-ans { background: var(--sfs-white); border: 1px solid var(--sfs-text); border-radius: 10px; padding: 11px 12px; font-size: 14.5px; line-height: 1.5; opacity: 0; color: var(--sfs-navy); }
.sfs-pn .sfs-ans b { color: var(--sfs-indigo); }
.sfs-pn .sfs-ans small { display: block; color: var(--sfs-green-ink); font-size: 12.5px; margin-top: 6px; font-weight: 600; }
.sfs-pn .sfs-cert2 { background: var(--sfs-white); border: 1px solid var(--sfs-text); border-radius: 12px; padding: 16px; display: grid; gap: 6px; font-size: 14px; box-shadow: 0 10px 30px var(--sfs-shadow-paper-ink); color: var(--sfs-navy); }
.sfs-pn .sfs-cert2 b { font-size: 16px; }
.sfs-pn .sfs-cert2 .sfs-v { color: var(--sfs-green-ink); font-weight: 600; }
.sfs-pn .sfs-prod2 { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px; background: var(--sfs-white); border: 1px solid var(--sfs-text); border-radius: 12px; padding: 12px; align-items: center; box-shadow: 0 10px 30px var(--sfs-shadow-paper-ink); }
.sfs-pn .sfs-prod2 img { width: 118px; height: 118px; object-fit: cover; border-radius: 9px; display: block; }
.sfs-pn .sfs-prod2 div { display: grid; gap: 4px; }
.sfs-pn .sfs-prod2 b { font-size: 16px; color: var(--sfs-navy); }
.sfs-pn .sfs-prod2 span { font-size: 13px; color: var(--sfs-dim); }
.sfs-pn .sfs-prod2 em { font-style: normal; font-size: 19px; font-weight: 800; color: var(--sfs-navy); }
.sfs-pn .sfs-buy2 { background: var(--sfs-navy); color: var(--sfs-white); border-radius: 10px; text-align: center; font-weight: 700; padding: 12px; font-size: 14.5px; }
.sfs-pn .sfs-paid2 { background: var(--sfs-emerald); color: var(--sfs-emerald-ink); border-radius: 10px; padding: 10px 12px; font-size: 14px; font-weight: 700; opacity: 0; }
@keyframes sfs-odt { 0% { --sfs-mi: 9; --sfs-se: 12; } 7%, 30% { --sfs-mi: 9; --sfs-se: 40; } 33% { --sfs-mi: 9; --sfs-se: 58; } 33.2%, 55% { --sfs-mi: 31; --sfs-se: 10; } 55.2% { --sfs-mi: 31; --sfs-se: 12; } 75% { --sfs-mi: 31; --sfs-se: 48; } 75.2%, 100% { --sfs-mi: 58; --sfs-se: 10; } }
.sfs-ctl .sfs-tm { animation: sfs-odt 20s infinite linear; }
@keyframes sfs-odfill { 0% { width: 15.8%; } 7%, 30% { width: 16.6%; } 33% { width: 17.1%; } 33.2%, 55% { width: 53.6%; } 75% { width: 54.6%; } 75.2%, 100% { width: 100%; } }
.sfs-ctl .sfs-sb i { animation: sfs-odfill 20s infinite linear; }
@keyframes sfs-odhead { 0% { left: 15.8%; } 7%, 30% { left: 16.6%; } 33% { left: 17.1%; } 33.2%, 55% { left: 53.6%; } 75% { left: 54.6%; } 75.2%, 100% { left: 100%; } }
.sfs-ctl .sfs-sb em { animation: sfs-odhead 20s infinite linear; }
@keyframes sfs-odplaying { 0%, 6% { opacity: 1; } 8%, 30% { opacity: 0; } 32%, 33% { opacity: 1; } 34%, 54% { opacity: 0; } 56%, 72% { opacity: 1; } 74%, 100% { opacity: 0; } }
.sfs-odv .sfs-c1 { animation: sfs-odplaying 20s infinite; }
@keyframes sfs-odpaused { 0%, 7% { opacity: 0; } 9%, 29% { opacity: 1; } 31%, 100% { opacity: 0; } }
.sfs-odv .sfs-c2, .sfs-odv .sfs-pause { animation: sfs-odpaused 20s infinite; }
@keyframes sfs-odsale { 0%, 33.4% { opacity: 0; } 35%, 52% { opacity: 1; } 54%, 100% { opacity: 0; } }
.sfs-odv .sfs-c4 { animation: sfs-odsale 20s infinite; }
@keyframes sfs-oddone { 0%, 75% { opacity: 0; } 76.5%, 98% { opacity: 1; } 100% { opacity: 0; } }
.sfs-odv .sfs-c3 { animation: sfs-oddone 20s infinite; }
@keyframes sfs-odgo { 0%, 7% { opacity: 0; } 9%, 30% { opacity: 1; } 32%, 74.8% { opacity: 0; } 76%, 100% { opacity: 1; } }
.sfs-ctl .sfs-pp .sfs-go { animation: sfs-odgo 20s infinite; }
@keyframes sfs-odst { 0%, 7% { opacity: 1; } 9%, 30% { opacity: 0; } 32%, 74.8% { opacity: 1; } 76%, 100% { opacity: 0; } }
.sfs-ctl .sfs-pp .sfs-st { animation: sfs-odst 20s infinite; }
@keyframes sfs-odp0 { 0%, 6% { opacity: 1; } 8%, 100% { opacity: 0; } }
.sfs-pn.sfs-front { animation: sfs-odp0 20s infinite; }
@keyframes sfs-odp1 { 0%, 7% { opacity: 0; transform: translateY(10px); } 9%, 29% { opacity: 1; transform: none; } 31%, 100% { opacity: 0; transform: translateY(10px); } }
.sfs-pn.sfs-check { animation: sfs-odp1 20s infinite; }
@keyframes sfs-odpick { 0%, 16% { border-color: var(--sfs-text); background: var(--sfs-white); } 18%, 100% { border-color: var(--sfs-indigo); background: var(--sfs-lavender); } }
.sfs-pn .sfs-o.sfs-o3 { animation: sfs-odpick 20s infinite; }
@keyframes sfs-odpick2 { 0%, 16% { opacity: 0; } 18%, 100% { opacity: 1; } }
.sfs-pn .sfs-o.sfs-o3 span::after { animation: sfs-odpick2 20s infinite; }
@keyframes sfs-odchk { 0%, 22% { transform: none; } 23.5% { transform: scale(.96); } 25%, 100% { transform: none; } }
.sfs-pn .sfs-chk { animation: sfs-odchk 20s infinite; }
@keyframes sfs-odok { 0%, 25% { opacity: 0; } 27%, 100% { opacity: 1; } }
.sfs-pn .sfs-ok { animation: sfs-odok 20s infinite; }
@keyframes sfs-odp4 { 0%, 33.4% { opacity: 0; transform: translateY(10px); } 35%, 52% { opacity: 1; transform: none; } 54%, 100% { opacity: 0; transform: translateY(10px); } }
.sfs-pn.sfs-shop { animation: sfs-odp4 20s infinite; }
@keyframes sfs-odbuy { 0%, 39% { transform: none; background: var(--sfs-navy); } 40.5% { transform: scale(.96); } 42%, 100% { transform: none; background: var(--sfs-muted); } }
.sfs-pn .sfs-buy2 { animation: sfs-odbuy 20s infinite; }
@keyframes sfs-odpaid { 0%, 42% { opacity: 0; } 43.5%, 100% { opacity: 1; } }
.sfs-pn .sfs-paid2 { animation: sfs-odpaid 20s infinite; }
@keyframes sfs-odp2 { 0%, 55% { opacity: 0; transform: translateY(10px); } 57%, 72% { opacity: 1; transform: none; } 74%, 100% { opacity: 0; transform: translateY(10px); } }
.sfs-pn.sfs-askp { animation: sfs-odp2 20s infinite; }
@keyframes sfs-odtyped { 0%, 58% { clip-path: inset(0 100% 0 0); } 65%, 100% { clip-path: inset(0 0 0 0); } }
.sfs-pn .sfs-typed { animation: sfs-odtyped 20s infinite steps(34); }
@keyframes sfs-odans { 0%, 66% { opacity: 0; } 68%, 100% { opacity: 1; } }
.sfs-pn .sfs-ans { animation: sfs-odans 20s infinite; }
@keyframes sfs-odp3 { 0%, 75.5% { opacity: 0; transform: translateY(10px); } 77%, 98% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(10px); } }
.sfs-pn.sfs-certp { animation: sfs-odp3 20s infinite; }
.sfs-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.sfs-way { display: grid; gap: 14px; align-content: start; }
.sfs-way .sfs-fr { padding: 18px; height: 384px; box-sizing: border-box; display: grid; align-content: start; gap: 8px; }
.sfp .sfs-way h3 { font-size: 1.3125rem; letter-spacing: -.015em; margin: 4px 0 0; }
.sfp .sfs-way p { font-size: 0.97rem; line-height: 1.5; }
.sfs-way .sfs-lab { display: flex; justify-content: space-between; align-items: center; color: var(--sfs-muted); font-size: 12.5px; }
.sfs-way .sfs-lab b { color: var(--sfs-amber); font-family: var(--sfs-font-mono); font-size: 12px; letter-spacing: .06em; font-weight: 500; }
.sfs-w1 .sfs-q { font-size: 15.5px; font-weight: 700; color: var(--sfs-white); margin: 4px 0 2px; }
.sfs-w1 .sfs-ch { display: grid; gap: 6px; }
.sfs-w1 .sfs-ch div { border: 1px solid var(--sfs-line-3); border-radius: 9px; padding: 8px 11px; font-size: 13.5px; color: var(--sfs-text); }
.sfs-w1 .sfs-ch .sfs-pk { animation: sfs-w1on 10s infinite; }
@keyframes sfs-w1on { 0%, 20% { border-color: var(--sfs-line-3); background: transparent; } 25%, 100% { border-color: var(--sfs-amber); background: var(--sfs-amber-soft-3); } }
.sfs-w1 .sfs-bld { margin-top: 6px; opacity: 0; animation: sfs-w1b 10s infinite; }
@keyframes sfs-w1b { 0%, 33% { opacity: 0; } 36%, 100% { opacity: 1; } }
.sfs-w1 .sfs-bld small { display: block; color: var(--sfs-muted); font-size: 12.5px; margin-bottom: 6px; }
.sfs-w1 .sfs-bld i { display: block; height: 5px; background: var(--sfs-line-2); border-radius: 4px; overflow: hidden; }
.sfs-w1 .sfs-bld i::after { content: ""; display: block; height: 100%; background: var(--sfs-green); width: 0; animation: sfs-w1f 10s infinite; }
@keyframes sfs-w1f { 0%, 36% { width: 0; } 60%, 100% { width: 100%; } }
.sfs-w1 .sfs-out { margin-top: 4px; background: var(--sfs-green-soft-2); border: 1px solid var(--sfs-green-line); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; color: var(--sfs-text); line-height: 1.45; opacity: 0; animation: sfs-w1o 10s infinite; }
@keyframes sfs-w1o { 0%, 62% { opacity: 0; } 65%, 96% { opacity: 1; } 100% { opacity: 0; } }
.sfs-w1 .sfs-out b { display: block; color: var(--sfs-white); }
.sfs-w2 .sfs-file { display: flex; gap: 9px; align-items: center; background: var(--sfs-white); color: var(--sfs-navy); border-radius: 9px; padding: 8px 11px; font-size: 13px; font-weight: 600; animation: sfs-w2f 10s infinite; }
@keyframes sfs-w2f { 0% { transform: translateY(-18px); opacity: 0; } 12%, 100% { transform: none; opacity: 1; } }
.sfs-w2 .sfs-file i { width: 22px; height: 22px; border-radius: 5px; background: var(--sfs-indigo); flex: none; }
.sfs-w2 .sfs-file small { margin-left: auto; color: var(--sfs-dim); font-weight: 500; }
.sfs-w2 .sfs-tpl { border: 1px dashed var(--sfs-line-bold); border-radius: 9px; padding: 8px 11px; font-size: 13px; color: var(--sfs-text-2); animation: sfs-w2t 10s infinite; }
@keyframes sfs-w2t { 0%, 14% { border-color: var(--sfs-line-bold); color: var(--sfs-text-2); } 18%, 100% { border-color: var(--sfs-amber); color: var(--sfs-white); } }
.sfs-w2 .sfs-tpl b { color: var(--sfs-white); }
.sfs-w2 .sfs-rows { display: grid; gap: 3px; margin-top: 2px; }
.sfs-w2 .sfs-rows div { display: flex; gap: 10px; font-size: 13px; color: var(--sfs-text); opacity: 0; border-bottom: 1px solid var(--sfs-fill-mid); padding: 5px 0; }
.sfs-w2 .sfs-rows div b { color: var(--sfs-amber); font-family: var(--sfs-font-mono); font-size: 12px; width: 44px; flex: none; font-weight: 500; }
.sfs-w2 .sfs-r1 { animation: sfs-w2r1 10s infinite; } @keyframes sfs-w2r1 { 0%, 26% { opacity: 0; } 29%, 100% { opacity: 1; } }
.sfs-w2 .sfs-r2 { animation: sfs-w2r2 10s infinite; } @keyframes sfs-w2r2 { 0%, 36% { opacity: 0; } 39%, 100% { opacity: 1; } }
.sfs-w2 .sfs-r3 { animation: sfs-w2r3 10s infinite; } @keyframes sfs-w2r3 { 0%, 46% { opacity: 0; } 49%, 100% { opacity: 1; } }
.sfs-w2 .sfs-r4 { animation: sfs-w2r4 10s infinite; } @keyframes sfs-w2r4 { 0%, 56% { opacity: 0; } 59%, 100% { opacity: 1; } }
.sfs-w2 .sfs-r5 { animation: sfs-w2r5 10s infinite; } @keyframes sfs-w2r5 { 0%, 66% { opacity: 0; } 69%, 100% { opacity: 1; } }
.sfs-w2 .sfs-rdy { margin-top: 4px; background: var(--sfs-green-soft-2); border: 1px solid var(--sfs-green-line); border-radius: 10px; padding: 9px 12px; font-size: 13.5px; color: var(--sfs-white); opacity: 0; animation: sfs-w2d 10s infinite; }
@keyframes sfs-w2d { 0%, 78% { opacity: 0; } 81%, 100% { opacity: 1; } }
.sfs-w3.sfs-fr { padding: 0; overflow: hidden; grid-template-rows: minmax(0, 1fr) auto; gap: 0; align-content: stretch; }
.sfs-w3 .sfs-cam { min-height: 250px; background: url(/img/streamclass/site/t4-host.jpg) center / cover; position: relative; }
.sfs-w3 .sfs-rec { position: absolute; left: 12px; top: 12px; display: flex; gap: 7px; align-items: center; background: var(--sfs-scrim-2); color: var(--sfs-white); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 700; counter-reset: sfsr var(--sfs-r); animation: sfs-w3r 10s infinite linear; }
.sfs-w3 .sfs-rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--sfs-red); animation: sfs-w3bl 1s infinite; }
@keyframes sfs-w3bl { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .25; } }
.sfs-w3 .sfs-rec::after { content: "REC 00:" counter(sfsr, decimal-leading-zero); }
@keyframes sfs-w3r { 0% { --sfs-r: 0; } 100% { --sfs-r: 48; } }
.sfs-w3 .sfs-pace { position: absolute; right: 12px; top: 12px; background: var(--sfs-scrim-2); color: var(--sfs-text-2); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 600; }
.sfs-w3 .sfs-pr { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; background: linear-gradient(transparent, var(--sfs-scrim-deeper) 32%); overflow: hidden; }
.sfs-w3 .sfs-pr::before { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; border-top: 2px solid var(--sfs-amber-rule); z-index: 1; }
.sfs-w3 .sfs-pr div { position: absolute; left: 18px; right: 18px; top: 45%; display: grid; gap: 7px; animation: sfs-w3s 10s infinite linear; }
@keyframes sfs-w3s { 0% { transform: translateY(40px); } 100% { transform: translateY(-120px); } }
.sfp .sfs-w3 .sfs-pr p { margin: 0; font-size: 15px; line-height: 1.35; color: var(--sfs-white-soft); font-weight: 600; }
.sfs-w3 .sfs-done { position: absolute; left: 12px; right: 12px; bottom: 12px; background: var(--sfs-emerald); color: var(--sfs-emerald-ink); border-radius: 9px; padding: 8px 11px; font-size: 13px; font-weight: 700; opacity: 0; animation: sfs-w3d 10s infinite; z-index: 2; }
@keyframes sfs-w3d { 0%, 88% { opacity: 0; } 91%, 100% { opacity: 1; } }
.sfs-w3 .sfs-cap3 { padding: 12px 16px 14px; font-size: 13.5px; color: var(--sfs-text-2); line-height: 1.45; }
.sfs-led { display: grid; gap: 4px; }
.sfs-led .sfs-lr { display: grid; grid-template-columns: 138px minmax(0, 1fr) auto; gap: 12px; font-size: 13.5px; color: var(--sfs-text); border-bottom: 1px solid var(--sfs-fill-mid); padding: 9px 0; opacity: 0; transform: translateX(-10px); align-items: center; }
.sfs-led .sfs-lr small { color: var(--sfs-muted); font-size: 12.5px; }
.sfs-led .sfs-lr b { color: var(--sfs-white); font-weight: 700; }
.sfs-led .sfs-lr span { color: var(--sfs-text-2); }
.sfs-led .sfs-lr i { font-style: normal; color: var(--sfs-white); font-weight: 700; }
.sfs-led .sfs-l1 { animation: sfs-ld1 12s infinite; } @keyframes sfs-ld1 { 0%, 8% { opacity: 0; transform: translateX(-10px); } 11%, 100% { opacity: 1; transform: none; } }
.sfs-led .sfs-l2 { animation: sfs-ld2 12s infinite; } @keyframes sfs-ld2 { 0%, 28% { opacity: 0; transform: translateX(-10px); } 31%, 100% { opacity: 1; transform: none; } }
.sfs-led .sfs-l3 { animation: sfs-ld3 12s infinite; } @keyframes sfs-ld3 { 0%, 48% { opacity: 0; transform: translateX(-10px); } 51%, 100% { opacity: 1; transform: none; } }
.sfs-led .sfs-l4 { animation: sfs-ld4 12s infinite; } @keyframes sfs-ld4 { 0%, 68% { opacity: 0; transform: translateX(-10px); } 71%, 100% { opacity: 1; transform: none; } }
.sfs-led .sfs-ltot { margin-top: 10px; font-size: 24px; font-weight: 800; color: var(--sfs-white); counter-reset: sfstt var(--sfs-tt); animation: sfs-ldt 12s infinite; }
.sfs-led .sfs-ltot::before { content: "A$" counter(sfstt); display: block; }
.sfs-led .sfs-ltot small { display: block; font-size: 13px; font-weight: 500; color: var(--sfs-muted); margin-top: 2px; }
@keyframes sfs-ldt { 0%, 10% { --sfs-tt: 0; } 12%, 30% { --sfs-tt: 48; } 32%, 50% { --sfs-tt: 96; } 52%, 70% { --sfs-tt: 125; } 72%, 100% { --sfs-tt: 245; } }
.sfs-sellpic { display: grid; gap: 14px; }
.sfs-sellpic .sfs-pin { display: flex; gap: 10px; align-items: center; background: var(--sfs-amber-soft-2); border: 1px solid var(--sfs-amber-mark-2); border-radius: 10px; padding: 9px 12px; font-size: 13.5px; color: var(--sfs-white); }
.sfs-sellpic .sfs-pin b { color: var(--sfs-amber); font-family: var(--sfs-font-mono); font-size: 12px; letter-spacing: .06em; font-weight: 500; }
.sfs-sellpic .sfs-pin img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; }
.sfs-things { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sfs-thing { background: var(--sfp-card); border: 1px solid var(--sfp-line); border-radius: 18px; overflow: hidden; }
.sfs-thing .sfs-im { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--sf-color-canvas-soft); overflow: hidden; }
.sfs-thing .sfs-im--lilac { background: var(--sfs-lilac); }
.sfs-thing .sfs-im--sky { background: var(--sfs-sky-wash); }
.sfs-thing .sfs-im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sfs-thing .sfs-tx { padding: 14px 16px; }
.sfp .sfs-thing h3 { font-size: 1.03rem; margin-bottom: 3px; }
.sfp .sfs-thing p { font-size: 0.9rem; line-height: 1.45; color: var(--sfp-text); }
.sfs-thing .sfs-draw { width: 100%; height: 100%; display: grid; place-items: center; padding: 18px; }
.sfs-book { width: 120px; aspect-ratio: 3 / 4; background: linear-gradient(160deg, var(--sfs-indigo), var(--sfs-blue)); border-radius: 4px 10px 10px 4px; box-shadow: 8px 10px 22px var(--sfs-shadow-book-ink), inset 6px 0 0 var(--sfs-line-5); color: var(--sfs-white); padding: 14px 12px 12px 18px; display: grid; align-content: space-between; }
.sfs-book b { font-size: 14px; line-height: 1.2; }
.sfs-book small { font-size: 10px; opacity: .85; }
.sfs-nextc { width: 100%; background: var(--sfs-navy); border-radius: 12px; padding: 12px 14px; color: var(--sfs-white); display: grid; gap: 6px; box-shadow: 0 10px 24px var(--sfs-shadow-book-ink); }
.sfs-nextc .sfs-k { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--sfs-violet); font-weight: 700; }
.sfs-nextc b { font-size: 14px; }
.sfs-nextc span { font-size: 12px; color: var(--sfs-text-2); }
.sfs-nextc i { font-style: normal; background: var(--sfs-white); color: var(--sfs-navy); border-radius: 7px; padding: 6px; text-align: center; font-weight: 700; font-size: 12px; }
.sfs-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sfs-orders { background: var(--sfp-surface); border: 1px solid var(--sfp-line); border-radius: 16px; overflow: hidden; box-shadow: var(--sf-shadow-lg); }
.sfs-orders .sfs-hd { padding: 14px 18px; border-bottom: 1px solid var(--sfp-line); font-weight: 700; color: var(--sfp-ink); display: flex; justify-content: space-between; }
.sfs-orders .sfs-hd span { font-weight: 500; color: var(--sfp-text); }
.sfs-orders .sfs-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--sfp-line); font-size: 14.5px; align-items: center; color: var(--sfp-text); }
.sfs-orders .sfs-row:last-child { border-bottom: 0; }
.sfs-orders .sfs-row b { color: var(--sfp-ink); }
.sfs-orders .sfs-pill { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 600; justify-self: start; }
.sfs-orders .sfs-sent { background: var(--sf-color-success-soft); color: var(--sf-color-success-ink); }
.sfs-orders .sfs-pack { background: var(--sf-color-warning-soft); color: var(--sf-color-warning-ink); }
.sfs-orders .sfs-ref { background: var(--sf-color-canvas-soft); color: var(--sfp-text); }
.sfs-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.sfs-step { display: grid; gap: 12px; align-content: start; }
.sfs-sh { display: flex; gap: 12px; align-items: center; min-height: 60px; }
.sfs-sh .sfs-n { width: 36px; height: 36px; border-radius: 50%; background: var(--sfs-amber); color: var(--sfs-stage); font-weight: 800; display: grid; place-items: center; font-size: 17px; flex: 0 0 auto; }
.sfs-sh b { color: var(--sfs-white); font-size: 18px; line-height: 1.25; display: block; letter-spacing: -.01em; }
.sfs-sh small { color: var(--sfs-muted); font-family: var(--sfs-font-mono); font-size: 12px; letter-spacing: .06em; display: block; margin-top: 3px; }
.sfs-bub { background: var(--sfs-panel); border: 1px solid var(--sfs-line); border-radius: 16px; padding: 16px 18px; font-size: 17px; line-height: 1.5; color: var(--sfs-bright); position: relative; margin-top: 6px; clip-path: inset(0 100% 0 0); animation: sfs-sbub 11s infinite steps(40); }
.sfs-bub::before { content: ""; position: absolute; top: -9px; left: 30px; width: 16px; height: 16px; background: var(--sfs-panel); border-left: 1px solid var(--sfs-line); border-top: 1px solid var(--sfs-line); transform: rotate(45deg); }
.sfs-ph { background: var(--sfs-well); border: 1px solid var(--sfs-line); border-radius: 18px; padding: 16px 14px; display: grid; gap: 8px; margin-top: 6px; }
.sfs-ph .sfs-k { color: var(--sfs-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.sfs-ph .sfs-row { display: flex; gap: 8px; align-items: center; border: 1px solid var(--sfs-line-3); border-radius: 9px; padding: 8px 10px; font-size: 13.5px; color: var(--sfs-text); }
.sfs-ph .sfs-row--total { border-color: var(--sfs-line-bold); }
.sfs-ph .sfs-row b { color: var(--sfs-white); }
.sfs-ph .sfs-sp { flex: 1; }
.sfs-ph .sfs-send { background: var(--sfs-black); color: var(--sfs-white); border-radius: 9px; padding: 9px; text-align: center; font-weight: 700; font-size: 13.5px; }
.sfs-ph .sfs-paid { background: var(--sfs-green-deep); color: var(--sfs-mint); border-radius: 9px; padding: 8px; text-align: center; font-weight: 700; font-size: 13.5px; opacity: 0; }
.sfs-ph .sfs-fine { font-size: 12px; color: var(--sfs-muted); text-align: center; }
.sfs-faces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sfs-faces .sfs-tile { border-radius: 8px; }
.sfs-faces .sfs-tile::after { content: "\2713"; position: absolute; right: 5px; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--sfs-green); color: var(--sfs-stage); font-size: 11px; font-weight: 800; display: grid; place-items: center; opacity: 0; transform: scale(.4); }
.sfs-faces .sfs-tile.sfs-no::after { content: ""; background: var(--sfs-track-3); opacity: 1; transform: none; }
.sfs-res2 { background: var(--sfs-panel); border: 1px solid var(--sfs-line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 10px; }
.sfs-res2 .sfs-n { font-size: 22px; font-weight: 800; color: var(--sfs-white); counter-reset: sfsn var(--sfs-n); animation: sfs-scnt 11s infinite; }
.sfs-res2 .sfs-n small { font-size: 13px; font-weight: 500; color: var(--sfs-muted); margin-left: 6px; }
.sfs-res2 .sfs-cn::after { content: counter(sfsn); }
.sfs-s2 .sfs-pcard { opacity: 0; transform: scale(.92); animation: sfs-scard 11s infinite; margin-top: 6px; }
.sfs-s3 .sfs-ph { opacity: 0; transform: translateY(12px); animation: sfs-sph 11s infinite; }
@keyframes sfs-sbub { 0%, 3% { clip-path: inset(0 100% 0 0); } 22%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes sfs-scard { 0%, 24% { opacity: 0; transform: scale(.92); } 29%, 100% { opacity: 1; transform: none; } }
@keyframes sfs-sph { 0%, 42% { opacity: 0; transform: translateY(12px); } 47%, 100% { opacity: 1; transform: none; } }
@keyframes sfs-ssend { 0%, 57% { transform: none; } 59% { transform: scale(.95); } 61%, 100% { transform: none; } }
.sfs-s3 .sfs-send { animation: sfs-ssend 11s infinite; }
@keyframes sfs-spaid { 0%, 62% { opacity: 0; } 65%, 100% { opacity: 1; } }
.sfs-s3 .sfs-paid { animation: sfs-spaid 11s infinite; }
@keyframes sfs-scnt { 0%, 66% { --sfs-n: 0; } 84%, 100% { --sfs-n: 3; } }
@keyframes sfs-sn1 { 0% { box-shadow: 0 0 0 0 var(--sfs-amber-none); } 4%, 22% { box-shadow: 0 0 0 6px var(--sfs-amber-ring); } 26%, 100% { box-shadow: 0 0 0 0 var(--sfs-amber-none); } }
.sfs-s1 .sfs-sh .sfs-n { animation: sfs-sn1 11s infinite; }
@keyframes sfs-sn2 { 0%, 24% { box-shadow: 0 0 0 0 var(--sfs-amber-none); } 28%, 42% { box-shadow: 0 0 0 6px var(--sfs-amber-ring); } 46%, 100% { box-shadow: 0 0 0 0 var(--sfs-amber-none); } }
.sfs-s2 .sfs-sh .sfs-n { animation: sfs-sn2 11s infinite; }
@keyframes sfs-sn3 { 0%, 45% { box-shadow: 0 0 0 0 var(--sfs-amber-none); } 49%, 96% { box-shadow: 0 0 0 6px var(--sfs-amber-ring); } 100% { box-shadow: 0 0 0 0 var(--sfs-amber-none); } }
.sfs-s3 .sfs-sh .sfs-n { animation: sfs-sn3 11s infinite; }
@keyframes sfs-sf0 { 0%, 68% { opacity: 0; transform: scale(.4); } 70%, 100% { opacity: 1; transform: none; } }
.sfs-s3 .sfs-faces .sfs-t-tom::after { animation: sfs-sf0 11s infinite; }
@keyframes sfs-sf1 { 0%, 75% { opacity: 0; transform: scale(.4); } 77%, 100% { opacity: 1; transform: none; } }
.sfs-s3 .sfs-faces .sfs-t-kiri::after { animation: sfs-sf1 11s infinite; }
@keyframes sfs-sf2 { 0%, 82% { opacity: 0; transform: scale(.4); } 84%, 100% { opacity: 1; transform: none; } }
.sfs-s3 .sfs-faces .sfs-t-sam::after { animation: sfs-sf2 11s infinite; }
.sfs-wscene { display: grid; grid-template-columns: minmax(0, 3fr) 36px minmax(0, 5fr) 36px minmax(0, 3.6fr); gap: 14px; align-items: start; }
.sfs-wscene > div { min-width: 0; }
.sfs-docl { background: var(--sfs-panel); border: 1px solid var(--sfs-line); border-radius: 16px; overflow: hidden; }
.sfs-docl .sfs-h { padding: 12px 14px; border-bottom: 1px solid var(--sfs-line); color: var(--sfs-white); font-weight: 700; font-size: 14.5px; }
.sfs-docl .sfs-h small { display: block; color: var(--sfs-muted); font-weight: 500; font-size: 12px; margin-top: 2px; }
.sfs-docl .sfs-s { display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--sfs-line-faint); font-size: 14px; color: var(--sfs-text); }
.sfs-docl .sfs-s:last-child { border-bottom: 0; }
.sfs-docl .sfs-s i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: var(--sfs-fill-mid); display: grid; place-items: center; font-size: 12px; color: var(--sfs-text-2); flex: 0 0 auto; }
.sfs-docl .sfs-s.sfs-on { background: var(--sfs-amber-soft-1); }
.sfs-docl .sfs-s.sfs-on i { background: var(--sfs-amber); color: var(--sfs-stage); }
.sfs-docl .sfs-s b { margin-left: auto; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--sfs-muted); font-weight: 600; }
.sfs-docl .sfs-s.sfs-on b { color: var(--sfs-amber); }
.sfs-pres { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; overflow: hidden; background: var(--sfs-panel); border: 1px solid var(--sfs-line); border-radius: 16px; padding: 12px; min-width: 0; }
.sfs-pres > div { min-width: 0; }
.sfs-page { background: var(--sfs-white); color: var(--sfs-navy); border-radius: 10px; padding: 14px 16px; font-size: 12.5px; line-height: 1.5; min-height: 230px; }
.sfp .sfs-page h6 { margin: 0 0 6px; font-size: 13px; color: var(--sfs-navy); font-weight: 700; }
.sfp .sfs-page p { margin: 0 0 8px; color: var(--sfs-ink-2); }
.sfs-page mark { background: var(--sfs-amber-mark-2); padding: 0 2px; border-radius: 2px; color: inherit; animation: sfs-markin 8s infinite; }
@keyframes sfs-markin { 0%, 30% { background: var(--sfs-amber-none); } 38%, 100% { background: var(--sfs-amber-mark); } }
.sfs-page .sfs-pt { position: relative; }
.sfs-page .sfs-pt::after { content: ""; position: absolute; left: -14px; top: 3px; width: 0; height: 0; border: 7px solid transparent; border-left: 10px solid var(--sfs-purple); opacity: 0; animation: sfs-ptin 8s infinite; }
@keyframes sfs-ptin { 0%, 34% { opacity: 0; transform: translateX(-8px); } 40%, 100% { opacity: 1; transform: none; } }
.sfs-cam { display: grid; gap: 8px; min-width: 0; overflow: hidden; }
.sfs-cam .sfs-v { width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; background: url(/img/streamclass/site/p2-priya.jpg) center / cover; position: relative; overflow: hidden; }
.sfs-cam .sfs-v span { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--sfs-scrim-4); color: var(--sfs-white); font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.sfs-cam .sfs-script { min-width: 0; overflow: hidden; background: var(--sfs-well); border: 1px solid var(--sfs-line); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: var(--sfs-text-2); line-height: 1.45; }
.sfs-cam .sfs-script b { display: block; color: var(--sfs-muted); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 4px; }
.sfs-ph2 { background: var(--sfs-well); border: 1px solid var(--sfs-line); border-radius: 18px; padding: 14px; display: grid; gap: 9px; }
.sfs-ph2 .sfs-k { color: var(--sfs-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.sfs-ph2 .sfs-q { font-size: 14.5px; font-weight: 700; color: var(--sfs-white); line-height: 1.3; }
.sfs-ph2 .sfs-o { border: 1px solid var(--sfs-line-3); border-radius: 9px; padding: 8px 10px; font-size: 13px; color: var(--sfs-text); }
.sfs-ph2 .sfs-o.sfs-ok { border-color: var(--sfs-green); background: var(--sfs-green-soft-2); }
.sfs-ph2 .sfs-sig { border: 1px dashed var(--sfs-line-bold); border-radius: 9px; padding: 10px; font-size: 13px; color: var(--sfs-text-2); font-family: var(--sfs-font-mono); }
.sfs-ph2 .sfs-sig i { display: block; font-style: italic; color: var(--sfs-white); font-family: var(--sf-font-sans); font-size: 18px; margin-top: 4px; }
.sfs-rec2 { margin-top: 8px; background: var(--sfs-panel); border: 1px solid var(--sfs-line); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; color: var(--sfs-text-2); display: grid; gap: 4px; }
.sfs-rec2 b { color: var(--sfs-white); }
.sfs-rec2 small { font-family: var(--sfs-font-mono); color: var(--sfs-muted); font-size: 11px; }
.sfs-ends5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.sfs-ends5 .sfp-def { padding: 18px; }
.sfp .sfs-ends5 h3 { font-size: 1rem; }
.sfp .sfs-ends5 p { font-size: 0.875rem; }
.sfs-chg { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; }
.sfs-chg .sfs-side2 { display: grid; gap: 10px; }
.sfs-vdoc { background: var(--sfs-white); color: var(--sfs-navy); border-radius: 12px; padding: 14px 16px; font-size: 12.5px; line-height: 1.5; }
.sfp .sfs-vdoc h6 { margin: 0 0 8px; font-size: 13px; display: flex; justify-content: space-between; color: var(--sfs-navy); font-weight: 700; }
.sfs-vdoc h6 span { color: var(--sfs-dim); font-weight: 500; }
.sfs-vdoc .sfs-sec { padding: 8px 10px; border-radius: 8px; margin-bottom: 6px; color: var(--sfs-ink-2); }
.sfs-vdoc .sfs-sec b { display: block; color: var(--sfs-navy); font-size: 12.5px; }
.sfs-vdoc .sfs-sec.sfs-same { opacity: .55; }
.sfs-vdoc .sfs-sec.sfs-new { background: var(--sfs-amber-wash); border: 1px solid var(--sfs-amber); color: var(--sfs-navy); }
.sfs-vdoc .sfs-sec.sfs-new em { font-style: normal; background: var(--sfs-amber-pale); }
.sfs-mail { background: var(--sfs-panel); border: 1px solid var(--sfs-line); border-radius: 12px; padding: 12px 14px; color: var(--sfs-text-2); font-size: 13px; line-height: 1.45; display: grid; gap: 6px; }
.sfs-mail b { color: var(--sfs-white); font-size: 14px; }
.sfs-mail .sfs-to { color: var(--sfs-muted); font-size: 12px; }
.sfs-ppl { background: var(--sfs-panel); border: 1px solid var(--sfs-line); border-radius: 12px; overflow: hidden; font-size: 13px; }
.sfs-ppl .sfs-r { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--sfs-line-faint); color: var(--sfs-text); align-items: center; }
.sfs-ppl .sfs-r:last-child { border-bottom: 0; }
.sfs-ppl .sfs-st { border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 600; justify-self: start; }
.sfs-ppl .sfs-done { background: var(--sfs-green-soft-3); color: var(--sfs-mint); }
.sfs-ppl .sfs-out { background: var(--sfs-amber-soft-4); color: var(--sfs-amber); }
.sfs-ppl .sfs-over { background: var(--sfs-red-soft); color: var(--sfs-red-pale); }
.sfs-ppl .sfs-prog { background: var(--sfs-blue-soft); color: var(--sfs-blue-pale); }
.sfs-ppl .sfs-not { background: var(--sfs-fill-mid); color: var(--sfs-text-2); }
.sfs-ppl .sfs-r small { color: var(--sfs-muted); font-family: var(--sfs-font-mono); font-size: 11px; }
.sfs-fakebtns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sfs-fakebtns span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: 14.5px; }
.sfs-fakebtns .sfs-fb1 { background: var(--sfs-white); color: var(--sfs-navy); }
.sfs-fakebtns .sfs-fb2 { background: transparent; color: var(--sfs-text); border: 1px solid var(--sfs-line-6); }
.sfs-fits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sfs-readyg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.sfs-readyg .sfs-g { background: var(--sfp-card); border: 1px solid var(--sfp-line); border-radius: 16px; padding: 16px; }
.sfp .sfs-readyg h3 { font-size: 0.9rem; margin-bottom: 8px; color: var(--sfp-link); }
.sfs-readyg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sfs-readyg li { font-size: 13.5px; color: var(--sfp-ink); line-height: 1.35; padding-left: 14px; position: relative; }
.sfs-readyg li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--sf-color-primary); }
.sfs-before { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); gap: 16px; align-items: center; }
.sfs-before .sfs-arr { display: grid; place-items: center; color: var(--sfs-amber); font-size: 34px; }
.sfs-plainvid { background: var(--sfs-slate) url(/img/streamclass/site/t5c-firedemo.jpg) center / cover; border-radius: 14px; min-height: 230px; position: relative; }
.sfs-plainvid .sfs-lbl2 { position: absolute; left: 12px; top: 12px; background: var(--sfs-scrim); color: var(--sfs-white); font-size: 12px; padding: 5px 11px; border-radius: 999px; font-weight: 600; }
.sfs-plainvid .sfs-pb2 { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 4px; background: var(--sfs-track-3); border-radius: 4px; }
.sfs-player--send .sfs-vid { min-height: 230px; }
.sfs-form { background: var(--sfp-surface); border: 1px solid var(--sfp-line); border-radius: 20px; display: grid; gap: 16px; padding: 32px; box-shadow: var(--sf-shadow-md); position: sticky; top: 24px; }
.sfp .sfs-form h2 { font-size: 1.5rem; margin-bottom: 0; }
.sfs-fld { display: grid; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--sfp-ink); }
.sfs-fld input, .sfs-fld textarea { font: 15.5px var(--sf-font-sans); padding: 12px 14px; border: 1px solid var(--sfp-line-strong); border-radius: 12px; background: var(--sfp-surface); color: var(--sfp-ink); width: 100%; }
.sfs-fld input:focus, .sfs-fld textarea:focus { outline: 2px solid var(--sf-color-primary-border); outline-offset: 1px; border-color: var(--sf-color-primary); }
.sfs-fld small { font-weight: 400; font-size: 13.5px; color: var(--sfp-text); }
.sfs-rights { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.4; color: var(--sfp-text); font-weight: 400; }
.sfs-rights input { margin-top: 3px; flex: 0 0 auto; }
.sfp .sfs-form .sfp-btn { width: 100%; border: 0; cursor: pointer; font-family: var(--sf-font-heading); }
.sfp button.sfp-btn--primary { background: var(--sfp-gradient); color: var(--sfp-on-accent); box-shadow: 0 10px 24px var(--sfs-btn-glow); }
.sfp button.sfp-btn--primary:hover { color: var(--sfp-on-accent); transform: translateY(-1px); }
.sfp .sfs-form .sfp-btn:disabled { opacity: .6; cursor: default; }
.sfs-fine { font-size: 13.5px; color: var(--sfp-text); }
.sfi-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "head side" "info side"; column-gap: 56px; row-gap: 12px; align-items: start; }
.sfi-head { grid-area: head; }
.sfi-side { grid-area: side; min-width: 0; }
.sfi-info { grid-area: info; }
.sfi-hero h1 { font-size: 3rem; line-height: 1.08; }
.sfp .sfi-info h2 { font-size: 1.15rem; margin-bottom: 14px; }
.sfi-card { gap: 18px; }
.sfi-side, .sfi-card .sfs-err { scroll-margin-top: 96px; }
.sfi-grid--sent .sfi-next-info { display: none; }
.sfi-card .sfs-rights { align-items: flex-start; }
.sfi-card .sfs-rights input { appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--sfp-line-strong); border-radius: 5px; background: var(--sfp-surface); cursor: pointer; }
.sfi-card .sfs-rights input:checked { border-color: var(--sf-color-primary); background: var(--sf-color-primary); }
.sfi-card .sfs-rights input:checked::after { content: "\2713"; color: var(--sfp-on-accent); font-size: 13px; font-weight: 800; line-height: 1; }
.sfi-card .sfs-rights input:focus-visible { outline: 2px solid var(--sf-color-primary); outline-offset: 2px; }
.sfi-drop--over .sfi-drop-note, .sfi-drop--over .sfi-choose { display: none; }
.sfi-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; }
.sfi-step legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 12px; font-size: 15px; font-weight: 700; color: var(--sfp-ink); }
.sfi-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sf-color-primary); color: var(--sfp-on-accent); font-size: 12.5px; font-weight: 800; }
.sfi-drop { display: grid; justify-items: center; gap: 8px; padding: 26px 18px; border: 2px dashed var(--sf-color-primary-border); border-radius: 14px; background: var(--sf-color-primary-soft); text-align: center; transition: border-color .15s ease, background-color .15s ease; }
.sfi-drop--over { border-style: solid; border-color: var(--sf-color-primary); align-content: center; }
.sfi-drop[hidden], .sfi-progress[hidden], .sfi-refused[hidden], .sfi-linknote[hidden], .sfi-or[hidden], .sfs-fld[hidden], .sfs-err[hidden] { display: none; }
.sfp .sfi-drop-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--sfp-ink); overflow-wrap: anywhere; }
.sfp .sfi-drop-note { margin: 0; font-size: 13.5px; color: var(--sfp-text); }
.sfi-choose { position: relative; display: inline-flex; align-items: center; margin-top: 6px; padding: 10px 18px; border-radius: 10px; background: var(--sfp-ink); color: var(--sfp-surface); font-size: 14px; font-weight: 700; cursor: pointer; }
.sfi-choose:focus-within { outline: 2px solid var(--sf-color-primary); outline-offset: 2px; }
.sfi-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.sfp .sfi-or { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; color: var(--sfp-text); }
.sfi-or::before, .sfi-or::after { content: ""; flex: 1; height: 1px; background: var(--sfp-line); }
.sfi-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sfi-linknote { padding: 10px 12px; border: 1px solid var(--sfp-line); border-radius: 12px; background: var(--sfp-canvas); font-size: 13.5px; line-height: 1.45; color: var(--sfp-text); }
.sfi-progress { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--sfp-line); border-radius: 12px; background: var(--sfp-surface); }
.sfi-progress-top { display: flex; justify-content: space-between; gap: 12px; min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--sfp-ink); }
.sfi-progress-name, .sfi-refused-name { min-width: 0; overflow-wrap: anywhere; }
.sfi-progress-size { flex: 0 0 auto; font-size: 13px; font-weight: 500; color: var(--sfp-text); }
.sfi-bar { height: 8px; overflow: hidden; border-radius: 99px; background: var(--sfp-line); }
.sfi-bar i { display: block; width: 0; height: 100%; background: var(--sf-color-primary); transition: width .3s ease; }
.sfi-progress--done .sfi-bar i { background: var(--sf-color-success); }
.sfp .sfi-progress-note { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--sfp-text); }
.sfi-refused { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--sf-color-danger); border-radius: 12px; background: var(--sf-color-danger-soft); }
.sfi-refused-name { font-weight: 700; color: var(--sf-color-danger-ink); }
.sfp .sfi-refused p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--sf-color-danger-ink); }
.sfi-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.sfp .sfs-form h2.sfi-sent-title { font-size: 2.5rem; line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
.sfp .sfi-lede { margin: 0; font-size: 1.1rem; line-height: 1.6; color: var(--sfp-text); }
.sfp .sfi-lede strong { color: var(--sfp-ink); }
.sfp .sfi-refline { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 15px; color: var(--sfp-text); }
.sfi-ref { padding: 4px 10px; border-radius: 8px; background: var(--sfp-canvas); border: 1px solid var(--sfp-line); color: var(--sfp-ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: 600; white-space: nowrap; }
.sfi-fileline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 12px 14px; border: 1px solid var(--sfp-line); border-radius: 12px; font-size: 15px; color: var(--sfp-ink); }
.sfi-fileline-name { min-width: 0; overflow-wrap: anywhere; }
.sfi-fileline-state { font-weight: 700; color: var(--sf-color-success-ink); }
.sfi-fileline-state--busy { color: var(--sfp-link); }
.sfi-sent { grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; }
.sfi-sent:focus { outline: none; }
.sfs-sent { background: var(--sf-color-success-soft); color: var(--sf-color-success-ink); border-radius: 12px; padding: 12px 14px; font-size: 15px; }
.sfs-err { background: var(--sf-color-warning-soft); color: var(--sf-color-warning-ink); border-radius: 12px; padding: 12px 14px; font-size: 15px; }
.sfp .sfs-ol { margin: 16px 0 0; padding-left: 22px; display: grid; gap: 10px; font-size: 1.03rem; color: var(--sfp-text); }
.sfs-oscene { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 24px; }
.sfs-oscene > div { min-width: 0; }
.sfs-prog2 { background: var(--sfs-panel-deep); border: 1px solid var(--sfs-fill-mid); border-radius: 18px; overflow: hidden; }
.sfs-prog2 .sfs-hd { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--sfs-fill-mid); color: var(--sfs-white); font-weight: 700; }
.sfs-prog2 .sfs-hd span { color: var(--sfs-muted); font-weight: 500; font-size: 13.5px; }
.sfs-prow { display: grid; grid-template-columns: 92px minmax(0, 1fr) 120px 120px 70px; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--sfs-line-faint); font-size: 13.5px; color: var(--sfs-text-2); align-items: center; opacity: 0; }
.sfs-prow.sfs-h { opacity: 1; color: var(--sfs-muted); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; padding: 10px 18px; }
.sfs-prow b { color: var(--sfs-white); font-weight: 600; }
.sfs-prow .sfs-d { color: var(--sfs-muted); }
.sfs-prow .sfs-n { color: var(--sfs-white); font-weight: 600; }
.sfs-prow .sfs-n.sfs-l { counter-reset: sfslive var(--sfs-n); }
.sfs-prow .sfs-n.sfs-l::after { content: counter(sfslive); }
.sfs-prow .sfs-n.sfs-f { counter-reset: sfsdone var(--sfs-n); }
.sfs-prow .sfs-n.sfs-f::after { content: counter(sfsdone); }
.sfs-mem { background: var(--sfs-panel); border: 1px solid var(--sfs-line); border-radius: 18px; padding: 18px 20px; display: grid; gap: 12px; align-content: start; color: var(--sfs-text-2); }
.sfs-mem .sfs-who2 { display: flex; gap: 12px; align-items: center; }
.sfs-mem .sfs-who2 .sfs-tile { width: 56px; aspect-ratio: 1; border-radius: 50%; flex: none; }
.sfs-mem .sfs-who2 b { display: block; color: var(--sfs-white); font-size: 16px; }
.sfs-mem .sfs-who2 span { font-size: 13px; }
.sfs-mem .sfs-ln { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 9px 0; border-top: 1px solid var(--sfs-fill-mid); font-size: 13.5px; opacity: 0; }
.sfs-mem .sfs-ln b { color: var(--sfs-white); font-weight: 600; }
.sfs-mem .sfs-ln i { font-style: normal; color: var(--sfs-mint); font-weight: 600; }
.sfs-mem .sfs-tot2 { display: flex; justify-content: space-between; align-items: center; background: var(--sfs-well); border-radius: 12px; padding: 12px 14px; color: var(--sfs-white); font-weight: 700; opacity: 0; animation: sfs-otot 14s infinite; }
.sfs-mem .sfs-tot2 span { color: var(--sfs-muted); font-weight: 500; font-size: 13px; }
.sfs-beyond { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@keyframes sfs-orow0 { 0%, 6% { opacity: 0; transform: translateY(8px); } 10%, 100% { opacity: 1; transform: none; } }
.sfs-prow.sfs-r0 { animation: sfs-orow0 14s infinite; }
@keyframes sfs-olive0 { 0%, 9% { --sfs-n: 0; } 18%, 100% { --sfs-n: 142; } }
.sfs-prow.sfs-r0 .sfs-n.sfs-l { animation: sfs-olive0 14s infinite; }
@keyframes sfs-ofin0 { 0%, 11% { --sfs-n: 0; } 22%, 100% { --sfs-n: 611; } }
.sfs-prow.sfs-r0 .sfs-n.sfs-f { animation: sfs-ofin0 14s infinite; }
@keyframes sfs-orow1 { 0%, 15% { opacity: 0; transform: translateY(8px); } 19%, 100% { opacity: 1; transform: none; } }
.sfs-prow.sfs-r1 { animation: sfs-orow1 14s infinite; }
@keyframes sfs-olive1 { 0%, 18% { --sfs-n: 0; } 27%, 100% { --sfs-n: 203; } }
.sfs-prow.sfs-r1 .sfs-n.sfs-l { animation: sfs-olive1 14s infinite; }
@keyframes sfs-ofin1 { 0%, 20% { --sfs-n: 0; } 31%, 100% { --sfs-n: 884; } }
.sfs-prow.sfs-r1 .sfs-n.sfs-f { animation: sfs-ofin1 14s infinite; }
@keyframes sfs-orow2 { 0%, 24% { opacity: 0; transform: translateY(8px); } 28%, 100% { opacity: 1; transform: none; } }
.sfs-prow.sfs-r2 { animation: sfs-orow2 14s infinite; }
@keyframes sfs-olive2 { 0%, 27% { --sfs-n: 0; } 36%, 100% { --sfs-n: 96; } }
.sfs-prow.sfs-r2 .sfs-n.sfs-l { animation: sfs-olive2 14s infinite; }
@keyframes sfs-ofin2 { 0%, 29% { --sfs-n: 0; } 40%, 100% { --sfs-n: 437; } }
.sfs-prow.sfs-r2 .sfs-n.sfs-f { animation: sfs-ofin2 14s infinite; }
@keyframes sfs-orow3 { 0%, 33% { opacity: 0; transform: translateY(8px); } 37%, 100% { opacity: 1; transform: none; } }
.sfs-prow.sfs-r3 { animation: sfs-orow3 14s infinite; }
@keyframes sfs-olive3 { 0%, 36% { --sfs-n: 0; } 45%, 100% { --sfs-n: 158; } }
.sfs-prow.sfs-r3 .sfs-n.sfs-l { animation: sfs-olive3 14s infinite; }
@keyframes sfs-ofin3 { 0%, 38% { --sfs-n: 0; } 49%, 100% { --sfs-n: 702; } }
.sfs-prow.sfs-r3 .sfs-n.sfs-f { animation: sfs-ofin3 14s infinite; }
@keyframes sfs-omem0 { 0%, 50% { opacity: 0; } 53%, 100% { opacity: 1; } }
.sfs-mem .sfs-ln.sfs-m0 { animation: sfs-omem0 14s infinite; }
@keyframes sfs-omem1 { 0%, 58% { opacity: 0; } 61%, 100% { opacity: 1; } }
.sfs-mem .sfs-ln.sfs-m1 { animation: sfs-omem1 14s infinite; }
@keyframes sfs-omem2 { 0%, 66% { opacity: 0; } 69%, 100% { opacity: 1; } }
.sfs-mem .sfs-ln.sfs-m2 { animation: sfs-omem2 14s infinite; }
@keyframes sfs-omem3 { 0%, 74% { opacity: 0; } 77%, 100% { opacity: 1; } }
.sfs-mem .sfs-ln.sfs-m3 { animation: sfs-omem3 14s infinite; }
@keyframes sfs-otot { 0%, 84% { opacity: 0; } 88%, 100% { opacity: 1; } }
.sfp--rto .sfp-hero { background: var(--sfs-navy); color: var(--sfs-text-2); padding: 64px 0 44px; }
.sfp .sfp--rto .sfp-hero h1, .sfp.sfp--rto .sfp-hero h1 { color: var(--sfs-white); }
.sfp.sfp--rto .sfp-hero .sfp-hero-sub, .sfp.sfp--rto .sfp-hero .sfp-note, .sfp.sfp--rto .sfp-hero .sfp-cap { color: var(--sfs-text-2); }
.sfp.sfp--rto .sfp-hero .sfp-label { background: var(--sfs-line); border-color: var(--sfs-line-3); color: var(--sfs-text); }
.sfp.sfp--rto .sfp-hero .sfp-accent { background: linear-gradient(100deg, var(--sfs-indigo-pale), var(--sfs-purple-pale)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sfp.sfp--rto .sfp-hero a.sfp-btn--second { background: transparent; color: var(--sfs-white); border-color: var(--sfs-line-bold); }
.sfp.sfp--rto .sfp-hero a.sfp-btn--second:hover { border-color: var(--sfs-white); color: var(--sfs-white); }
.sfp.sfp--rto .sfp-hero--plain { background: var(--sfp-canvas); color: var(--sfp-text); padding-bottom: 36px; }
.sfp.sfp--rto .sfp-hero--plain h1 { color: var(--sfp-ink); }
.sfp.sfp--rto .sfp-hero--plain .sfp-hero-sub { color: var(--sfp-text); }
.sfp.sfp--rto .sfp-hero--plain .sfp-accent { background: linear-gradient(100deg, var(--sf-color-primary), var(--sf-color-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sf-sitepage-plain:has(.sfp--rto) .sf-sn { background: var(--sfs-navy); border-bottom-color: var(--sfs-line); }
.sf-sitepage-plain:has(.sfp--rto) .sf-sn-brand, .sf-sitepage-plain:has(.sfp--rto) .sf-sn-link { color: var(--sfs-text); }
.sf-sitepage-plain:has(.sfp--rto) .sf-sn-link:hover, .sf-sitepage-plain:has(.sfp--rto) .sf-sn-brand:hover { color: var(--sfs-white); }
.sf-sitepage-plain:has(.sfp--rto) .sf-sn-burger span { background: var(--sfs-text); }
.sf-sitepage-plain:has(.sfp--rto) .sf-sn-logo-light { display: none; }
.sf-sitepage-plain:has(.sfp--rto) .sf-sn-logo-dark { display: block; }
.sf-sitepage-plain:has(.sfp--rto) .sf-sn-menu { background: var(--sfs-navy); border-bottom-color: var(--sfs-line); }
.sf-sitepage-plain:has(.sfp--rto) .sf-sn-auth .sf-btn-secondary { --sf-btn-bg: transparent; --sf-btn-fg: var(--sfs-white); --sf-btn-border: var(--sfs-line-bold); --sf-btn-hover-bg: var(--sfs-fill-mid); --sf-btn-hover-border: var(--sfs-white); }
.sfs-rscene { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr); gap: 22px; }
.sfs-rscene > div { min-width: 0; }
.sfs-rvid { background: url(/img/streamclass/site/t5c-firedemo.jpg) center / cover; border-radius: 16px; position: relative; min-height: 300px; overflow: hidden; }
.sfs-rvid .sfs-chip { position: absolute; left: 12px; top: 12px; background: var(--sfs-scrim); color: var(--sfs-white); font-size: 12px; padding: 5px 11px; border-radius: 999px; font-weight: 600; }
.sfs-rvid .sfs-tc { position: absolute; right: 12px; bottom: 12px; font: 500 13px var(--sfs-font-mono); color: var(--sfs-white); background: var(--sfs-scrim); padding: 4px 8px; border-radius: 6px; display: grid; }
.sfs-rvid .sfs-tc i { grid-area: 1 / 1; font-style: normal; opacity: 0; animation: 14s infinite; }
.sfs-rvid .sfs-tc i:nth-child(1) { animation-name: sfs-rtc1; }
.sfs-rvid .sfs-tc i:nth-child(2) { animation-name: sfs-rtc2; }
.sfs-rvid .sfs-tc i:nth-child(3) { animation-name: sfs-rtc3; }
.sfs-rvid .sfs-tc i:nth-child(4) { animation-name: sfs-rtc4; }
.sfs-rvid .sfs-tc i:nth-child(5) { animation-name: sfs-rtc5; }
.sfs-rvid .sfs-tc i:nth-child(6) { animation-name: sfs-rtc6; }
.sfs-rvid .sfs-tc i:nth-child(7) { animation-name: sfs-rtc7; }
@keyframes sfs-rtc1 { 0%, 7.9% { opacity: 1; } 8%, 100% { opacity: 0; } }
@keyframes sfs-rtc2 { 0%, 7.9% { opacity: 0; } 8%, 15.9% { opacity: 1; } 16%, 100% { opacity: 0; } }
@keyframes sfs-rtc3 { 0%, 15.9% { opacity: 0; } 16%, 23.9% { opacity: 1; } 24%, 100% { opacity: 0; } }
@keyframes sfs-rtc4 { 0%, 23.9% { opacity: 0; } 24%, 31.9% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes sfs-rtc5 { 0%, 31.9% { opacity: 0; } 32%, 39.9% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes sfs-rtc6 { 0%, 39.9% { opacity: 0; } 40%, 79.9% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes sfs-rtc7 { 0%, 79.9% { opacity: 0; } 80%, 100% { opacity: 1; } }
.sfs-crit { background: var(--sfs-panel-deep); border: 1px solid var(--sfs-fill-mid); border-radius: 16px; overflow: hidden; }
.sfs-crit .sfs-hd { padding: 12px 16px; border-bottom: 1px solid var(--sfs-fill-mid); color: var(--sfs-white); font-weight: 700; font-size: 14.5px; }
.sfs-crit .sfs-hd span { display: block; color: var(--sfs-muted); font-weight: 500; font-size: 12.5px; }
.sfs-cr { display: grid; grid-template-columns: 34px minmax(0, 1fr) 104px; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--sfs-line-faint); font-size: 13.5px; color: var(--sfs-text-2); align-items: center; }
.sfs-cr b { color: var(--sfs-muted); font-weight: 600; }
.sfs-cr .sfs-st { justify-self: end; border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 700; background: var(--sfs-fill-mid); color: var(--sfs-muted); white-space: nowrap; display: grid; text-align: center; }
.sfs-cr .sfs-st > * { grid-area: 1 / 1; font-style: normal; font-weight: 700; opacity: 0; animation: 14s infinite; }
.sfs-cr .sfs-st i { opacity: 1; }
.sfs-fix { display: grid; gap: 12px; align-content: start; }
.sfs-fx { background: var(--sfs-panel); border: 1px solid var(--sfs-line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; color: var(--sfs-text-2); font-size: 13.5px; line-height: 1.45; opacity: 0; }
.sfs-fx .sfs-k { color: var(--sfs-amber); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; }
.sfs-fx .sfs-k.sfs-g { color: var(--sfs-mint); }
.sfs-fx b { color: var(--sfs-white); }
.sfs-fx .sfs-scr2 { background: var(--sfs-well); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--sfs-text); border-left: 3px solid var(--sfs-amber); }
.sfs-fx .sfs-go2 { background: var(--sfs-white); color: var(--sfs-navy); border-radius: 9px; padding: 8px; text-align: center; font-weight: 700; font-size: 13px; }
@keyframes sfs-rc0 { 0%, 8% { background: var(--sfs-fill-mid); color: var(--sfs-muted); } 10%, 100% { background: var(--sfs-green-deep); color: var(--sfs-mint); } }
@keyframes sfs-rt0i { 0%, 8% { opacity: 1; } 10%, 100% { opacity: 0; } }
@keyframes sfs-rt0b { 0%, 8% { opacity: 0; } 10%, 100% { opacity: 1; } }
.sfs-cr.sfs-c0 .sfs-st { animation: sfs-rc0 14s infinite; } .sfs-cr.sfs-c0 .sfs-st i { animation-name: sfs-rt0i; } .sfs-cr.sfs-c0 .sfs-st b { animation-name: sfs-rt0b; }
@keyframes sfs-rc1 { 0%, 16% { background: var(--sfs-fill-mid); color: var(--sfs-muted); } 18%, 100% { background: var(--sfs-green-deep); color: var(--sfs-mint); } }
@keyframes sfs-rt1i { 0%, 16% { opacity: 1; } 18%, 100% { opacity: 0; } }
@keyframes sfs-rt1b { 0%, 16% { opacity: 0; } 18%, 100% { opacity: 1; } }
.sfs-cr.sfs-c1 .sfs-st { animation: sfs-rc1 14s infinite; } .sfs-cr.sfs-c1 .sfs-st i { animation-name: sfs-rt1i; } .sfs-cr.sfs-c1 .sfs-st b { animation-name: sfs-rt1b; }
@keyframes sfs-rc2 { 0%, 24% { background: var(--sfs-fill-mid); color: var(--sfs-muted); } 26%, 78% { background: var(--sfs-amber-deep); color: var(--sfs-amber); } 80%, 100% { background: var(--sfs-green-deep); color: var(--sfs-mint); } }
@keyframes sfs-rt2i { 0%, 24% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes sfs-rt2e { 0%, 24% { opacity: 0; } 26%, 78% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes sfs-rt2b { 0%, 78% { opacity: 0; } 80%, 100% { opacity: 1; } }
.sfs-cr.sfs-c2 .sfs-st { animation: sfs-rc2 14s infinite; } .sfs-cr.sfs-c2 .sfs-st i { animation-name: sfs-rt2i; } .sfs-cr.sfs-c2 .sfs-st em { animation-name: sfs-rt2e; } .sfs-cr.sfs-c2 .sfs-st b { animation-name: sfs-rt2b; }
@keyframes sfs-rc3 { 0%, 32% { background: var(--sfs-fill-mid); color: var(--sfs-muted); } 34%, 100% { background: var(--sfs-green-deep); color: var(--sfs-mint); } }
@keyframes sfs-rt3i { 0%, 32% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes sfs-rt3b { 0%, 32% { opacity: 0; } 34%, 100% { opacity: 1; } }
.sfs-cr.sfs-c3 .sfs-st { animation: sfs-rc3 14s infinite; } .sfs-cr.sfs-c3 .sfs-st i { animation-name: sfs-rt3i; } .sfs-cr.sfs-c3 .sfs-st b { animation-name: sfs-rt3b; }
@keyframes sfs-rc4 { 0%, 40% { background: var(--sfs-fill-mid); color: var(--sfs-muted); } 42%, 100% { background: var(--sfs-green-deep); color: var(--sfs-mint); } }
@keyframes sfs-rt4i { 0%, 40% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes sfs-rt4b { 0%, 40% { opacity: 0; } 42%, 100% { opacity: 1; } }
.sfs-cr.sfs-c4 .sfs-st { animation: sfs-rc4 14s infinite; } .sfs-cr.sfs-c4 .sfs-st i { animation-name: sfs-rt4i; } .sfs-cr.sfs-c4 .sfs-st b { animation-name: sfs-rt4b; }
@keyframes sfs-rfx1 { 0%, 44% { opacity: 0; transform: translateY(8px); } 48%, 100% { opacity: 1; transform: none; } }
.sfs-fx.sfs-f1 { animation: sfs-rfx1 14s infinite; }
@keyframes sfs-rfx2 { 0%, 58% { opacity: 0; transform: translateY(8px); } 62%, 100% { opacity: 1; transform: none; } }
.sfs-fx.sfs-f2 { animation: sfs-rfx2 14s infinite; }
@keyframes sfs-rfx3 { 0%, 78% { opacity: 0; transform: translateY(8px); } 82%, 100% { opacity: 1; transform: none; } }
.sfs-fx.sfs-f3 { animation: sfs-rfx3 14s infinite; }
@media (max-width: 64rem) {
    .sfs-wscene, .sfs-scene { grid-template-columns: minmax(0, 1fr); }
    .sfs-arrow { min-height: 40px; transform: rotate(90deg); }
    .sfs-fly { display: none; }
    .sfs-things { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sfs-ends5, .sfs-readyg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sfs-odm { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 64rem) {
    .sfp.sfp--rto .sfp-hero .sfp-grid { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
    .sfp.sfp--rto .sfp-hero .sfp-col-6 { grid-column: auto; }
    .sfp.sfp--rto .sfp-hero .sfp-bleed { margin-right: 0; }
}
@media (max-width: 54rem) {
    .sfs-g2 > .sfs-fr:first-child, .sfs-g2 > .sfp-shot:first-child, .sfs-g2 > .sfs-cert:first-child { order: 2; }
    .sfs-things { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sfs-g2, .sfs-g57, .sfs-say, .sfs-lscene, .sfs-beat, .sfs-sell, .sfs-board, .sfs-ends2, .sfs-diff3, .sfs-doors, .sfs-proof, .sfs-prod, .sfs-ends3, .sfs-kinds, .sfs-player, .sfs-ways, .sfs-flow, .sfs-steps, .sfs-pres, .sfs-chg, .sfs-fits, .sfs-ends5, .sfs-readyg, .sfs-before, .sfs-oscene, .sfs-beyond, .sfs-rscene, .sfs-odm { grid-template-columns: minmax(0, 1fr); }
    .sfs-before .sfs-arr { transform: rotate(90deg); }
    .sfs-beat { gap: 18px; }
    .sfs-fanwrap { height: 320px; overflow: hidden; border-radius: 12px; }
    .sfs-tl2 { margin-bottom: 44px; }
    .sfs-tl2 span { font-size: 10.5px; }
    .sfs-tl2 span.sfs-at53 { top: 30px; }
    .sfs-fcard { width: 240px; margin-left: -120px; }
    .sfs-tl .sfs-mk { width: 70px; }
    .sfs-orders .sfs-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .sfs-prow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .sfs-prow.sfs-h { display: none; }
    .sfs-prow .sfs-n::before { color: var(--sfs-muted); font-weight: 500; font-size: 12px; margin-right: 6px; }
    .sfs-prow .sfs-n.sfs-l::before { content: "Live"; }
    .sfs-prow .sfs-n.sfs-f::before { content: "Finished"; }
    .sfs-prow .sfs-hrs::before { content: "Hours"; color: var(--sfs-muted); font-weight: 500; font-size: 12px; margin-right: 6px; }
    .sfs-odp { min-height: 380px; border-left: 0; border-top: 1px solid var(--sfs-text); }
    .sfs-odv .sfs-pic { min-height: 220px; }
    .sfs-ctl .sfs-tm { min-width: 0; }
    .sfs-hgrid { gap: 10px 16px; }
    .sfs-way .sfs-fr { height: auto; min-height: 340px; }
    .sfs-form { position: static; padding: 22px; }
    .sfi-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "side" "info"; row-gap: 28px; }
    .sfi-hero h1 { font-size: 2.25rem; }
    .sfp .sfs-form h2.sfi-sent-title { font-size: 2rem; }
    .sfs-cert .sfs-ln { flex-direction: column; gap: 2px; }
    .sfs-cert .sfs-ln b { text-align: left; }
    .sfs-player .sfs-vid { min-height: 200px; }
}
@media (max-width: 36rem) {
    .sfs-things { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .sfp *, .sfp *::before, .sfp *::after { animation: none !important; }
    .sfs-capt { clip-path: none; }
    .sfs-fly { display: none; }
    .sfs-act, .sfs-scr .sfs-mini2, .sfs-feed .sfs-it, .sfs-bc, .sfs-hgrid .sfs-tile::after, .sfs-br b, .sfs-ready, .sfs-rm, .sfs-paired, .sfs-pn.sfs-check, .sfs-pn .sfs-ok, .sfs-odv .sfs-c2, .sfs-odv .sfs-pause, .sfs-ctl .sfs-pp .sfs-go, .sfs-pn .sfs-o.sfs-o3 span::after, .sfs-w1 .sfs-bld, .sfs-w1 .sfs-out, .sfs-w2 .sfs-rows div, .sfs-w2 .sfs-rdy, .sfs-w2 .sfs-file, .sfs-w3 .sfs-done, .sfs-led .sfs-lr, .sfs-s2 .sfs-pcard, .sfs-s3 .sfs-ph, .sfs-s3 .sfs-paid, .sfs-s3 .sfs-faces .sfs-tile::after, .sfs-prow, .sfs-mem .sfs-ln, .sfs-mem .sfs-tot2, .sfs-fx, .sfs-page .sfs-pt::after { opacity: 1; transform: none; }
    .sfs-scr .sfs-tick { transform: scale(1); }
    .sfs-cnt, .sfs-cnt2 { --sfs-n: 11; }
    .sfs-br.sfs-n1 i::after { width: 57%; }
    .sfs-br.sfs-n2 i::after { width: 21%; }
    .sfs-scene .sfs-lbl .sfs-n { background: var(--sfs-amber); }
    .sfs-capt em { background: var(--sfs-amber-ring); }
    .sfs-pn .sfs-o.sfs-o3 { border-color: var(--sfs-indigo); background: var(--sfs-lavender); }
    .sfs-ctl .sfs-sb i { width: 16.6%; }
    .sfs-ctl .sfs-sb em { left: 16.6%; }
    .sfs-w1 .sfs-bld i::after { width: 100%; }
    .sfs-w1 .sfs-ch .sfs-pk { border-color: var(--sfs-amber); background: var(--sfs-amber-soft-3); }
    .sfs-w2 .sfs-tpl { border-color: var(--sfs-amber); color: var(--sfs-white); }
    .sfs-res2 .sfs-n { --sfs-n: 3; }
    .sfs-page mark { background: var(--sfs-amber-mark); }
    .sfs-prow.sfs-r0 .sfs-n.sfs-l { --sfs-n: 142; } .sfs-prow.sfs-r0 .sfs-n.sfs-f { --sfs-n: 611; }
    .sfs-prow.sfs-r1 .sfs-n.sfs-l { --sfs-n: 203; } .sfs-prow.sfs-r1 .sfs-n.sfs-f { --sfs-n: 884; }
    .sfs-prow.sfs-r2 .sfs-n.sfs-l { --sfs-n: 96; } .sfs-prow.sfs-r2 .sfs-n.sfs-f { --sfs-n: 437; }
    .sfs-prow.sfs-r3 .sfs-n.sfs-l { --sfs-n: 158; } .sfs-prow.sfs-r3 .sfs-n.sfs-f { --sfs-n: 702; }
    .sfs-cr .sfs-st { background: var(--sfs-green-deep); color: var(--sfs-mint); }
    .sfs-cr .sfs-st i, .sfs-cr .sfs-st em, .sfs-rvid .sfs-tc i { opacity: 0; }
    .sfs-cr .sfs-st b, .sfs-rvid .sfs-tc i:last-child { opacity: 1; }
}
@media (max-width: 30rem) {
    .sfi-pair { grid-template-columns: minmax(0, 1fr); }
}