@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Barlow:wght@400;500;600;700&family=JetBrains+Mono:wght@600&display=swap');

:root{
  --mp-bg:#090c09; --mp-bg-1:#101510; --mp-bg-2:#182018; --mp-bg-3:#243523;
  --mp-ink:#e9f2e4; --mp-ink-2:#b2c2ac; --mp-ink-3:#879580;
  --mp-brand:#86e23c; --mp-brand-deep:#52a826; --mp-brand-ink:#08140a; --mp-brand-light:#c8ff5a;
  --mp-font-body:'Barlow',system-ui,sans-serif; --mp-font-display:'Chakra Petch','Barlow',sans-serif;
  --mp-font-mono:'JetBrains Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--mp-bg);color:var(--mp-ink);font-family:var(--mp-font-body);line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--mp-brand)}

.sfu-prov{height:16px;width:auto;vertical-align:middle;margin-right:6px;filter:brightness(0) saturate(100%) invert(82%) sepia(40%) saturate(600%) hue-rotate(40deg)}


.sfu-syms{list-style:none;margin:16px 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.sfu-syms li{background:var(--mp-bg-1);border:1px dashed var(--mp-bg-3);border-radius:14px;padding:14px;text-align:center}
.sfu-syms img{width:64px;height:64px;margin:0 auto 8px;object-fit:contain}
.sfu-syms b{display:block;font-family:var(--mp-font-display);font-size:.95rem;color:var(--mp-ink)}
.sfu-syms span{color:var(--mp-ink-2);font-size:.8rem}
.sfu-pc{display:grid;gap:16px;grid-template-columns:1fr 1fr;margin:16px 0}
@media(max-width:640px){.sfu-pc{grid-template-columns:1fr}}
.sfu-pc>div{background:var(--mp-bg-1);border:1px dashed var(--mp-bg-3);border-radius:16px;padding:18px 20px}
.sfu-pc h3{margin:0 0 10px;font-size:1.05rem;font-family:var(--mp-font-display)}
.sfu-pc ul{margin:0;padding-left:0;list-style:none}
.sfu-pc li{position:relative;padding:4px 0 4px 26px;color:var(--mp-ink-2)}
.sfu-pc li::before{position:absolute;left:0;top:2px;font-weight:900}
.sfu-pros li::before{content:"＋";color:var(--mp-brand)}
.sfu-cons li::before{content:"−";color:#ff7a6a}


.sfu-demo{position:relative;width:100%;max-width:900px;margin:0 auto;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--mp-bg-1);border:1px dashed var(--mp-bg-3)}
@media(max-width:640px){.sfu-demo{aspect-ratio:4/3}}
.sfu-facade{position:absolute;inset:0;display:grid;place-items:center;cursor:pointer;border:0;background:#0a0d0a;padding:0;width:100%;height:100%}
.sfu-facade-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.sfu-facade-play{position:relative;width:74px;height:74px;border-radius:50%;background:var(--mp-brand);color:var(--mp-brand-ink);display:grid;place-items:center;font-size:1.7rem;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.sfu-facade-label{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#fff;font-weight:700;font-family:var(--mp-font-display);text-shadow:0 2px 8px rgba(0,0,0,.8)}
.sfu-facade:focus-visible{outline:3px solid var(--mp-brand);outline-offset:-3px}
.sfu-demo-note{text-align:center;color:var(--mp-ink-3);font-size:.85rem;margin-top:10px}