@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)}
h1,h2,h3{font-family:var(--mp-font-display);line-height:1.16}
.ph{background:radial-gradient(70% 80% at 72% 22%,#1a2d12,transparent 65%),radial-gradient(60% 70% at 25% 85%,#0e1a0c,transparent 70%),#0a0f0a}
.ph--warm{background:radial-gradient(80% 90% at 60% 25%,#28401a,transparent 60%),radial-gradient(60% 70% at 20% 80%,#143012,transparent 70%),#0b120a}
.mp-skip{position:absolute;left:-999px;top:8px}.mp-skip:focus{left:8px;z-index:99;background:#fff;color:#000;padding:8px}


.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 solid 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 solid var(--mp-bg-3);border-radius:16px;padding:18px 20px}
.sfu-pc h3{margin:0 0 10px;font-size:1.05rem}
.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-author{display:flex;gap:14px;align-items:center;background:var(--mp-bg-1);border:1px solid var(--mp-bg-3);border-radius:16px;padding:16px 18px;margin:16px 0}
.sfu-author .sfu-ava{width:52px;height:52px;border-radius:50%;flex:0 0 auto;background:radial-gradient(circle at 40% 35%,#c8ff5a,#3a6a18)}
.sfu-author b{font-family:var(--mp-font-display);color:var(--mp-ink)}
.sfu-author p{margin:2px 0 0;color:var(--mp-ink-2);font-size:.86rem}
.sfu-score{display:inline-flex;align-items:baseline;gap:8px;background:var(--mp-brand);color:var(--mp-brand-ink);border-radius:999px;padding:8px 18px;font-family:var(--mp-font-display);font-weight:700}
.sfu-score b{font-size:1.4rem}


.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 solid 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}