{"product_id":"ember-loadscreen-v1-fivem","title":"Ember Loadscreen V1","description":"\u003cstyle\u003e\n  \/* =========================================================\n     FIVEM-LAB — EMBER LOADSCREEN V1\n     CINEMATIC FIVEM LOADING EXPERIENCE\n     ========================================================= *\/\n\n  .fml-ember-loadscreen {\n    --gold:#ffd700;\n    --white:#ffffff;\n    --black:#050505;\n    --text:rgba(255,255,255,.92);\n    --muted:rgba(255,255,255,.66);\n    --dim:rgba(255,255,255,.42);\n    --line:rgba(255,255,255,.10);\n    --line-soft:rgba(255,255,255,.055);\n    --gold-line:rgba(255,215,0,.34);\n    --panel:rgba(255,255,255,.022);\n    --green:#6de4a7;\n\n    width:100%;\n    max-width:1180px;\n    margin:0 auto;\n    padding:18px 0 88px;\n\n    color:var(--text);\n    background:transparent;\n    font-family:inherit;\n    font-size:16px;\n    line-height:1.7;\n  }\n\n  .fml-ember-loadscreen,\n  .fml-ember-loadscreen *,\n  .fml-ember-loadscreen *::before,\n  .fml-ember-loadscreen *::after {\n    box-sizing:border-box;\n  }\n\n  .fml-ember-loadscreen h2,\n  .fml-ember-loadscreen h3,\n  .fml-ember-loadscreen p,\n  .fml-ember-loadscreen dl,\n  .fml-ember-loadscreen dt,\n  .fml-ember-loadscreen dd {\n    margin:0;\n  }\n\n  .fml-ember-loadscreen ::selection {\n    color:var(--black);\n    background:var(--gold);\n  }\n\n  .fml-ember-loadscreen code {\n    padding:2px 6px;\n    border:1px solid rgba(255,215,0,.18);\n    border-radius:3px;\n    background:rgba(255,215,0,.055);\n    color:var(--gold);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n  }\n\n  \/* HERO *\/\n\n  .fml-ember-loadscreen__hero {\n    position:relative;\n    isolation:isolate;\n    overflow:hidden;\n\n    padding:clamp(38px,6vw,80px);\n\n    border:1px solid var(--line);\n    border-top-color:var(--gold-line);\n    border-radius:7px;\n\n    background:\n      radial-gradient(\n        circle at 88% 5%,\n        rgba(255,215,0,.15),\n        transparent 31%\n      ),\n      radial-gradient(\n        circle at 8% 100%,\n        rgba(255,255,255,.035),\n        transparent 30%\n      ),\n      rgba(0,0,0,.17);\n  }\n\n  .fml-ember-loadscreen__hero::before {\n    content:\"\";\n    position:absolute;\n    top:0;\n    left:0;\n    width:min(430px,70%);\n    height:2px;\n\n    background:var(--gold);\n    box-shadow:0 0 24px rgba(255,215,0,.36);\n  }\n\n  .fml-ember-loadscreen__hero::after {\n    content:\"EMBER STUDIOS \/ LOADSCREEN V1 \/ FIVEM\";\n    position:absolute;\n    top:20px;\n    right:22px;\n\n    color:rgba(255,255,255,.14);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:850;\n    letter-spacing:.15em;\n    text-transform:uppercase;\n  }\n\n  .fml-ember-loadscreen__eyebrow {\n    display:flex;\n    flex-wrap:wrap;\n    gap:8px 16px;\n    align-items:center;\n\n    margin-bottom:24px;\n\n    color:var(--gold);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:10px;\n    font-weight:900;\n    letter-spacing:.15em;\n    text-transform:uppercase;\n  }\n\n  .fml-ember-loadscreen__eyebrow span + span {\n    color:var(--dim);\n  }\n\n  .fml-ember-loadscreen__eyebrow span + span::before {\n    content:\"\/\";\n    margin-right:16px;\n    color:var(--gold);\n  }\n\n  .fml-ember-loadscreen__title {\n    max-width:1000px;\n    margin:0 !important;\n\n    color:var(--white) !important;\n\n    font-size:clamp(42px,5.9vw,74px) !important;\n    font-weight:950 !important;\n    letter-spacing:-.052em;\n    line-height:.96 !important;\n\n    text-wrap:balance;\n  }\n\n  .fml-ember-loadscreen__hero-copy {\n    max-width:920px;\n    margin-top:28px !important;\n\n    color:var(--muted) !important;\n\n    font-size:clamp(18px,1.9vw,23px);\n    font-weight:600;\n    line-height:1.56;\n  }\n\n  .fml-ember-loadscreen__hero-copy strong {\n    color:var(--white);\n  }\n\n  .fml-ember-loadscreen__badges {\n    display:flex;\n    flex-wrap:wrap;\n    gap:10px;\n\n    margin-top:34px;\n  }\n\n  .fml-ember-loadscreen__badge {\n    display:inline-flex;\n    align-items:center;\n\n    min-height:38px;\n    padding:0 14px;\n\n    color:var(--white);\n    background:rgba(255,255,255,.025);\n\n    border:1px solid var(--line);\n    border-radius:3px;\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:900;\n    letter-spacing:.09em;\n    text-transform:uppercase;\n  }\n\n  .fml-ember-loadscreen__badge--gold {\n    color:var(--black);\n    background:var(--gold);\n    border-color:var(--gold);\n  }\n\n  .fml-ember-loadscreen__meta {\n    display:flex;\n    flex-wrap:wrap;\n    gap:10px 26px;\n\n    margin-top:30px;\n    padding-top:22px;\n\n    border-top:1px solid var(--line);\n  }\n\n  .fml-ember-loadscreen__meta span {\n    position:relative;\n    padding-left:17px;\n\n    color:var(--dim);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:850;\n    letter-spacing:.10em;\n    text-transform:uppercase;\n  }\n\n  .fml-ember-loadscreen__meta span::before {\n    content:\"\";\n    position:absolute;\n    top:.7em;\n    left:0;\n\n    width:7px;\n    height:1px;\n\n    background:var(--gold);\n  }\n\n  \/* SECTIONS *\/\n\n  .fml-ember-loadscreen__section {\n    padding:clamp(56px,8vw,94px) 0;\n    border-bottom:1px solid var(--line);\n  }\n\n  .fml-ember-loadscreen__head {\n    display:grid;\n    grid-template-columns:minmax(126px,.26fr) minmax(0,1fr);\n    gap:clamp(28px,5vw,72px);\n    align-items:start;\n  }\n\n  .fml-ember-loadscreen__index {\n    padding-top:8px;\n\n    color:var(--gold);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:10px;\n    font-weight:900;\n    letter-spacing:.12em;\n    text-transform:uppercase;\n  }\n\n  .fml-ember-loadscreen__kicker {\n    margin-bottom:14px;\n\n    color:var(--dim);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:850;\n    letter-spacing:.14em;\n    text-transform:uppercase;\n  }\n\n  .fml-ember-loadscreen__section-title {\n    max-width:960px;\n    margin:0 !important;\n\n    color:var(--white) !important;\n\n    font-size:clamp(30px,4vw,48px) !important;\n    font-weight:950 !important;\n    letter-spacing:-.04em;\n    line-height:1.04 !important;\n\n    text-wrap:balance;\n  }\n\n  .fml-ember-loadscreen__intro {\n    max-width:910px;\n    margin-top:22px !important;\n\n    color:var(--muted) !important;\n\n    font-size:clamp(16px,1.5vw,19px);\n    line-height:1.75;\n  }\n\n  .fml-ember-loadscreen__statement {\n    display:grid;\n    grid-template-columns:minmax(0,1fr) auto;\n    gap:clamp(28px,5vw,72px);\n    align-items:end;\n\n    margin-top:clamp(34px,5vw,58px);\n    padding-top:30px;\n\n    border-top:1px solid var(--line);\n  }\n\n  .fml-ember-loadscreen__statement p {\n    max-width:870px;\n\n    color:var(--text) !important;\n\n    font-size:clamp(18px,2vw,24px);\n    font-weight:650;\n    line-height:1.5;\n  }\n\n  .fml-ember-loadscreen__code-label {\n    color:var(--gold);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:10px;\n    font-weight:900;\n    letter-spacing:.12em;\n    white-space:nowrap;\n  }\n\n  \/* CARDS *\/\n\n  .fml-ember-loadscreen__grid {\n    display:grid;\n    grid-template-columns:repeat(2,minmax(0,1fr));\n    gap:14px;\n\n    margin-top:clamp(40px,6vw,64px);\n  }\n\n  .fml-ember-loadscreen__card {\n    position:relative;\n    overflow:hidden;\n\n    min-width:0;\n    padding:clamp(24px,3vw,32px);\n\n    border:1px solid var(--line);\n    border-radius:4px;\n\n    background:var(--panel);\n\n    transition:\n      transform .18s ease,\n      border-color .18s ease,\n      background .18s ease;\n  }\n\n  .fml-ember-loadscreen__card::before {\n    content:\"\";\n    position:absolute;\n    top:0;\n    left:0;\n\n    width:0;\n    height:1px;\n\n    background:var(--gold);\n\n    transition:width .22s ease;\n  }\n\n  .fml-ember-loadscreen__card:hover {\n    transform:translateY(-2px);\n    border-color:var(--gold-line);\n    background:rgba(255,255,255,.038);\n  }\n\n  .fml-ember-loadscreen__card:hover::before {\n    width:100%;\n  }\n\n  .fml-ember-loadscreen__card-top {\n    display:flex;\n    justify-content:space-between;\n    gap:14px;\n\n    margin-bottom:28px;\n  }\n\n  .fml-ember-loadscreen__number {\n    color:var(--gold);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:10px;\n    font-weight:950;\n  }\n\n  .fml-ember-loadscreen__label {\n    color:var(--dim);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:8px;\n    font-weight:800;\n    letter-spacing:.09em;\n    text-align:right;\n    text-transform:uppercase;\n  }\n\n  .fml-ember-loadscreen__card h3 {\n    margin:0 0 12px !important;\n\n    color:var(--white) !important;\n\n    font-size:clamp(20px,2vw,26px) !important;\n    font-weight:950 !important;\n    letter-spacing:-.03em;\n    line-height:1.15 !important;\n  }\n\n  .fml-ember-loadscreen__card p {\n    color:var(--muted) !important;\n\n    font-size:14px;\n    line-height:1.7;\n  }\n\n  \/* TIME OF DAY *\/\n\n  .fml-ember-loadscreen__times {\n    display:grid;\n    grid-template-columns:repeat(4,minmax(0,1fr));\n    gap:14px;\n\n    margin-top:clamp(40px,6vw,64px);\n  }\n\n  .fml-ember-loadscreen__time {\n    position:relative;\n    min-height:210px;\n    overflow:hidden;\n\n    padding:22px;\n\n    border:1px solid var(--line);\n    border-radius:4px;\n\n    display:flex;\n    flex-direction:column;\n    justify-content:space-between;\n  }\n\n  .fml-ember-loadscreen__time:nth-child(1) {\n    background:\n      linear-gradient(\n        160deg,\n        rgba(255,180,150,.14),\n        rgba(255,130,180,.04) 55%,\n        rgba(0,0,0,.10)\n      );\n  }\n\n  .fml-ember-loadscreen__time:nth-child(2) {\n    background:\n      linear-gradient(\n        160deg,\n        rgba(255,215,0,.12),\n        rgba(255,255,255,.025) 58%,\n        rgba(0,0,0,.10)\n      );\n  }\n\n  .fml-ember-loadscreen__time:nth-child(3) {\n    background:\n      linear-gradient(\n        160deg,\n        rgba(255,145,55,.15),\n        rgba(255,80,30,.035) 58%,\n        rgba(0,0,0,.11)\n      );\n  }\n\n  .fml-ember-loadscreen__time:nth-child(4) {\n    background:\n      linear-gradient(\n        160deg,\n        rgba(60,90,140,.11),\n        rgba(0,0,0,.20) 68%\n      );\n  }\n\n  .fml-ember-loadscreen__time small {\n    color:var(--gold);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:900;\n    letter-spacing:.1em;\n    text-transform:uppercase;\n  }\n\n  .fml-ember-loadscreen__time h3 {\n    margin:0 0 7px !important;\n\n    color:var(--white) !important;\n\n    font-size:21px !important;\n    font-weight:950 !important;\n  }\n\n  .fml-ember-loadscreen__time p {\n    color:var(--muted) !important;\n    font-size:12px;\n    line-height:1.55;\n  }\n\n  \/* MUSIC *\/\n\n  .fml-ember-loadscreen__player {\n    margin-top:clamp(40px,6vw,64px);\n    overflow:hidden;\n\n    border:1px solid var(--gold-line);\n    border-radius:5px;\n\n    background:\n      radial-gradient(\n        circle at 88% 0,\n        rgba(255,215,0,.08),\n        transparent 34%\n      ),\n      rgba(0,0,0,.20);\n  }\n\n  .fml-ember-loadscreen__player-head {\n    display:flex;\n    flex-wrap:wrap;\n    justify-content:space-between;\n    gap:18px;\n\n    padding:14px 18px;\n    border-bottom:1px solid var(--line);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:900;\n    letter-spacing:.1em;\n    text-transform:uppercase;\n  }\n\n  .fml-ember-loadscreen__player-head strong {\n    color:var(--gold);\n  }\n\n  .fml-ember-loadscreen__player-head span {\n    color:var(--dim);\n  }\n\n  .fml-ember-loadscreen__player-body {\n    display:grid;\n    grid-template-columns:minmax(0,1fr) auto;\n    gap:34px;\n    align-items:center;\n\n    padding:clamp(28px,5vw,48px);\n  }\n\n  .fml-ember-loadscreen__track small {\n    display:block;\n    margin-bottom:7px;\n\n    color:var(--dim);\n\n    font-size:9px;\n    font-weight:850;\n    letter-spacing:.10em;\n    text-transform:uppercase;\n  }\n\n  .fml-ember-loadscreen__track strong {\n    display:block;\n\n    color:var(--white);\n\n    font-size:clamp(24px,3.3vw,38px);\n    font-weight:950;\n    letter-spacing:-.04em;\n    line-height:1.1;\n  }\n\n  .fml-ember-loadscreen__wave {\n    display:flex;\n    align-items:center;\n    gap:4px;\n\n    height:62px;\n  }\n\n  .fml-ember-loadscreen__wave span {\n    display:block;\n    width:3px;\n    border-radius:3px;\n    background:var(--gold);\n    opacity:.82;\n  }\n\n  .fml-ember-loadscreen__wave span:nth-child(1) { height:18px; }\n  .fml-ember-loadscreen__wave span:nth-child(2) { height:42px; }\n  .fml-ember-loadscreen__wave span:nth-child(3) { height:28px; }\n  .fml-ember-loadscreen__wave span:nth-child(4) { height:56px; }\n  .fml-ember-loadscreen__wave span:nth-child(5) { height:34px; }\n  .fml-ember-loadscreen__wave span:nth-child(6) { height:49px; }\n  .fml-ember-loadscreen__wave span:nth-child(7) { height:24px; }\n  .fml-ember-loadscreen__wave span:nth-child(8) { height:39px; }\n  .fml-ember-loadscreen__wave span:nth-child(9) { height:18px; }\n  .fml-ember-loadscreen__wave span:nth-child(10) { height:52px; }\n\n  \/* LIVE INFO *\/\n\n  .fml-ember-loadscreen__server {\n    display:grid;\n    grid-template-columns:repeat(4,minmax(0,1fr));\n\n    margin-top:clamp(40px,6vw,64px);\n\n    border:1px solid var(--line);\n    border-radius:5px;\n    overflow:hidden;\n\n    background:rgba(0,0,0,.15);\n  }\n\n  .fml-ember-loadscreen__server-item {\n    min-width:0;\n    padding:26px;\n\n    border-right:1px solid var(--line-soft);\n  }\n\n  .fml-ember-loadscreen__server-item:last-child {\n    border-right:0;\n  }\n\n  .fml-ember-loadscreen__server-item small {\n    display:block;\n    margin-bottom:10px;\n\n    color:var(--dim);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:8px;\n    font-weight:900;\n    letter-spacing:.11em;\n    text-transform:uppercase;\n  }\n\n  .fml-ember-loadscreen__server-item strong {\n    display:block;\n\n    color:var(--white);\n\n    font-size:clamp(19px,2.4vw,29px);\n    font-weight:950;\n    letter-spacing:-.035em;\n    line-height:1.1;\n  }\n\n  .fml-ember-loadscreen__server-item strong em {\n    color:var(--green);\n    font-style:normal;\n  }\n\n  .fml-ember-loadscreen__server-item span {\n    display:block;\n    margin-top:8px;\n\n    color:var(--muted);\n    font-size:11px;\n  }\n\n  \/* PROGRESS *\/\n\n  .fml-ember-loadscreen__progress-modes {\n    display:grid;\n    grid-template-columns:repeat(3,minmax(0,1fr));\n    gap:14px;\n\n    margin-top:clamp(40px,6vw,64px);\n  }\n\n  .fml-ember-loadscreen__progress {\n    padding:25px;\n\n    border:1px solid var(--line);\n    border-top-color:var(--gold-line);\n    border-radius:4px;\n\n    background:var(--panel);\n  }\n\n  .fml-ember-loadscreen__progress small {\n    display:block;\n    margin-bottom:22px;\n\n    color:var(--gold);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:900;\n    letter-spacing:.1em;\n  }\n\n  .fml-ember-loadscreen__progress h3 {\n    margin:0 0 9px !important;\n\n    color:var(--white) !important;\n\n    font-size:20px !important;\n    font-weight:950 !important;\n  }\n\n  .fml-ember-loadscreen__progress p {\n    color:var(--muted) !important;\n    font-size:13px;\n    line-height:1.65;\n  }\n\n  .fml-ember-loadscreen__bar {\n    position:relative;\n    height:4px;\n\n    margin-top:24px;\n\n    overflow:hidden;\n\n    background:rgba(255,255,255,.08);\n  }\n\n  .fml-ember-loadscreen__bar::before {\n    content:\"\";\n    position:absolute;\n    inset:0 auto 0 0;\n    width:68%;\n\n    background:var(--gold);\n    box-shadow:0 0 12px rgba(255,215,0,.36);\n  }\n\n  \/* CONFIG *\/\n\n  .fml-ember-loadscreen__config {\n    display:grid;\n    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);\n    gap:16px;\n\n    margin-top:clamp(40px,6vw,64px);\n  }\n\n  .fml-ember-loadscreen__config-copy,\n  .fml-ember-loadscreen__config-code {\n    min-width:0;\n\n    border:1px solid var(--line);\n    border-radius:5px;\n\n    background:var(--panel);\n  }\n\n  .fml-ember-loadscreen__config-copy {\n    padding:clamp(26px,4vw,38px);\n\n    border-color:var(--gold-line);\n\n    background:\n      linear-gradient(\n        130deg,\n        rgba(255,215,0,.05),\n        transparent 56%\n      ),\n      var(--panel);\n  }\n\n  .fml-ember-loadscreen__config-copy small {\n    display:block;\n    margin-bottom:11px;\n\n    color:var(--gold);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:900;\n    letter-spacing:.11em;\n    text-transform:uppercase;\n  }\n\n  .fml-ember-loadscreen__config-copy h3 {\n    margin:0 0 13px !important;\n\n    color:var(--white) !important;\n\n    font-size:clamp(23px,3vw,32px) !important;\n    font-weight:950 !important;\n    letter-spacing:-.035em;\n    line-height:1.1 !important;\n  }\n\n  .fml-ember-loadscreen__config-copy p {\n    color:var(--muted) !important;\n\n    font-size:14px;\n    line-height:1.72;\n  }\n\n  .fml-ember-loadscreen__config-head {\n    padding:14px 18px;\n\n    border-bottom:1px solid var(--line);\n\n    color:var(--gold);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:900;\n    letter-spacing:.1em;\n  }\n\n  .fml-ember-loadscreen__config-body {\n    padding:25px;\n\n    color:rgba(255,255,255,.70);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:12px;\n    line-height:1.9;\n  }\n\n  .fml-ember-loadscreen__config-body .gold {\n    color:var(--gold);\n  }\n\n  .fml-ember-loadscreen__config-body .green {\n    color:var(--green);\n  }\n\n  .fml-ember-loadscreen__config-body .comment {\n    color:rgba(255,255,255,.34);\n  }\n\n  \/* TECH *\/\n\n  .fml-ember-loadscreen__terminal {\n    margin-top:clamp(40px,6vw,66px);\n    overflow:hidden;\n\n    border:1px solid var(--gold-line);\n    border-radius:4px;\n\n    background:\n      linear-gradient(\n        180deg,\n        rgba(255,215,0,.026),\n        transparent 30%\n      ),\n      rgba(0,0,0,.20);\n  }\n\n  .fml-ember-loadscreen__terminal-head {\n    display:flex;\n    flex-wrap:wrap;\n    gap:10px 24px;\n    justify-content:space-between;\n\n    padding:14px 18px;\n\n    border-bottom:1px solid var(--line);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:900;\n    letter-spacing:.09em;\n    text-transform:uppercase;\n  }\n\n  .fml-ember-loadscreen__terminal-head strong {\n    color:var(--gold);\n  }\n\n  .fml-ember-loadscreen__terminal-head span {\n    color:var(--dim);\n  }\n\n  .fml-ember-loadscreen__spec-grid {\n    display:grid;\n    grid-template-columns:repeat(2,minmax(0,1fr));\n  }\n\n  .fml-ember-loadscreen__spec {\n    min-width:0;\n    padding:clamp(24px,4vw,34px);\n\n    border-right:1px solid var(--line);\n    border-bottom:1px solid var(--line);\n  }\n\n  .fml-ember-loadscreen__spec:nth-child(2n) {\n    border-right:0;\n  }\n\n  .fml-ember-loadscreen__spec:nth-last-child(-n + 2) {\n    border-bottom:0;\n  }\n\n  .fml-ember-loadscreen__spec dt {\n    margin-bottom:12px;\n\n    color:var(--dim);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:8px;\n    font-weight:900;\n    letter-spacing:.12em;\n    text-transform:uppercase;\n  }\n\n  .fml-ember-loadscreen__spec-value {\n    display:block;\n\n    color:var(--white);\n\n    font-size:clamp(19px,2.4vw,29px);\n    font-weight:950;\n    letter-spacing:-.035em;\n    line-height:1.1;\n  }\n\n  .fml-ember-loadscreen__spec:first-child\n  .fml-ember-loadscreen__spec-value {\n    color:var(--gold);\n  }\n\n  .fml-ember-loadscreen__spec-copy {\n    display:block;\n    margin-top:10px;\n\n    color:var(--muted);\n\n    font-size:12px;\n    line-height:1.58;\n  }\n\n  \/* CLOSING *\/\n\n  .fml-ember-loadscreen__closing {\n    position:relative;\n    overflow:hidden;\n\n    margin-top:clamp(64px,9vw,110px);\n    padding:clamp(40px,7vw,80px);\n\n    border-top:1px solid var(--gold-line);\n    border-bottom:1px solid var(--line);\n\n    background:\n      radial-gradient(\n        circle at 100% 0,\n        rgba(255,215,0,.12),\n        transparent 34%\n      ),\n      rgba(255,255,255,.012);\n  }\n\n  .fml-ember-loadscreen__closing-label {\n    margin-bottom:20px;\n\n    color:var(--gold);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:900;\n    letter-spacing:.13em;\n    text-transform:uppercase;\n  }\n\n  .fml-ember-loadscreen__closing h2 {\n    max-width:950px;\n    margin:0 !important;\n\n    color:var(--white) !important;\n\n    font-size:clamp(31px,4.5vw,53px) !important;\n    font-weight:950 !important;\n    letter-spacing:-.045em;\n    line-height:1.03 !important;\n\n    text-wrap:balance;\n  }\n\n  .fml-ember-loadscreen__closing p {\n    max-width:900px;\n    margin-top:22px !important;\n\n    color:var(--muted) !important;\n\n    font-size:16px;\n    line-height:1.75;\n  }\n\n  .fml-ember-loadscreen__final {\n    margin-top:clamp(46px,7vw,76px);\n\n    color:var(--white);\n\n    font-size:clamp(26px,3.8vw,45px);\n    font-weight:950;\n    letter-spacing:-.043em;\n    line-height:1.08;\n    text-align:center;\n\n    text-wrap:balance;\n  }\n\n  .fml-ember-loadscreen__final em {\n    color:var(--gold);\n    font-style:normal;\n  }\n\n  \/* RESPONSIVE *\/\n\n  @media (max-width:1000px) {\n    .fml-ember-loadscreen__times,\n    .fml-ember-loadscreen__server {\n      grid-template-columns:repeat(2,minmax(0,1fr));\n    }\n\n    .fml-ember-loadscreen__server-item:nth-child(2) {\n      border-right:0;\n    }\n\n    .fml-ember-loadscreen__server-item:nth-child(-n + 2) {\n      border-bottom:1px solid var(--line-soft);\n    }\n  }\n\n  @media (max-width:900px) {\n    .fml-ember-loadscreen__head {\n      grid-template-columns:1fr;\n      gap:16px;\n    }\n\n    .fml-ember-loadscreen__config {\n      grid-template-columns:1fr;\n    }\n  }\n\n  @media (max-width:760px) {\n    .fml-ember-loadscreen__progress-modes {\n      grid-template-columns:1fr;\n    }\n\n    .fml-ember-loadscreen__player-body {\n      grid-template-columns:1fr;\n    }\n  }\n\n  @media (max-width:680px) {\n    .fml-ember-loadscreen {\n      padding-top:8px;\n    }\n\n    .fml-ember-loadscreen__hero {\n      padding:31px 21px 34px;\n    }\n\n    .fml-ember-loadscreen__hero::after {\n      display:none;\n    }\n\n    .fml-ember-loadscreen__eyebrow {\n      display:grid;\n      gap:6px;\n    }\n\n    .fml-ember-loadscreen__eyebrow span + span::before {\n      display:none;\n    }\n\n    .fml-ember-loadscreen__statement,\n    .fml-ember-loadscreen__grid,\n    .fml-ember-loadscreen__times,\n    .fml-ember-loadscreen__server,\n    .fml-ember-loadscreen__spec-grid {\n      grid-template-columns:1fr;\n    }\n\n    .fml-ember-loadscreen__code-label {\n      white-space:normal;\n    }\n\n    .fml-ember-loadscreen__server-item,\n    .fml-ember-loadscreen__server-item:nth-child(2),\n    .fml-ember-loadscreen__spec {\n      border-right:0;\n      border-bottom:1px solid var(--line);\n    }\n\n    .fml-ember-loadscreen__server-item:last-child,\n    .fml-ember-loadscreen__spec:last-child {\n      border-bottom:0;\n    }\n\n    .fml-ember-loadscreen__spec:nth-last-child(-n + 2) {\n      border-bottom:1px solid var(--line);\n    }\n\n    .fml-ember-loadscreen__spec:last-child {\n      border-bottom:0;\n    }\n\n    .fml-ember-loadscreen__closing {\n      padding:38px 22px;\n    }\n  }\n\n  @media (prefers-reduced-motion:reduce) {\n    .fml-ember-loadscreen *,\n    .fml-ember-loadscreen *::before,\n    .fml-ember-loadscreen *::after {\n      transition-duration:.01ms !important;\n      animation-duration:.01ms !important;\n    }\n  }\n\u003c\/style\u003e\n\n\n\u003carticle class=\"fml-ember-loadscreen\"\u003e\n\n  \u003c!-- HERO --\u003e\n  \u003cheader class=\"fml-ember-loadscreen__hero\"\u003e\n\n    \u003cdiv class=\"fml-ember-loadscreen__eyebrow\"\u003e\n      \u003cspan\u003eFiveM Loadscreen\u003c\/span\u003e\n      \u003cspan\u003eEmber Studios\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003ch2 class=\"fml-ember-loadscreen__title\"\u003e\n      Ember Loadscreen v1\n    \u003c\/h2\u003e\n\n    \u003cp class=\"fml-ember-loadscreen__hero-copy\"\u003e\n      The first seconds on your server already shape the player's impression.\n      \u003cstrong\u003eEmber Loadscreen v1 turns the FiveM loading process into a\n      cinematic presentation with parallax scenes, dynamic time-of-day\n      variations, music, promotions, live server information and configurable\n      loading progress.\u003c\/strong\u003e\n    \u003c\/p\u003e\n\n    \u003cdiv class=\"fml-ember-loadscreen__badges\"\u003e\n\n      \u003cspan class=\"fml-ember-loadscreen__badge fml-ember-loadscreen__badge--gold\"\u003e\n        Cinematic Loadscreen\n      \u003c\/span\u003e\n\n      \u003cspan class=\"fml-ember-loadscreen__badge\"\u003e\n        Parallax Scenes\n      \u003c\/span\u003e\n\n      \u003cspan class=\"fml-ember-loadscreen__badge\"\u003e\n        Music Player\n      \u003c\/span\u003e\n\n      \u003cspan class=\"fml-ember-loadscreen__badge\"\u003e\n        Queue Support\n      \u003c\/span\u003e\n\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"fml-ember-loadscreen__meta\"\u003e\n      \u003cspan\u003eLive server data\u003c\/span\u003e\n      \u003cspan\u003e3 progress modes\u003c\/span\u003e\n      \u003cspan\u003eBrowser preview\u003c\/span\u003e\n      \u003cspan\u003eConfig.js customization\u003c\/span\u003e\n    \u003c\/div\u003e\n\n  \u003c\/header\u003e\n\n\n  \u003c!-- OVERVIEW --\u003e\n  \u003csection class=\"fml-ember-loadscreen__section\"\u003e\n\n    \u003cdiv class=\"fml-ember-loadscreen__head\"\u003e\n\n      \u003cdiv class=\"fml-ember-loadscreen__index\"\u003e\n        00 \/ Overview\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__kicker\"\u003e\n          The server experience starts before spawn\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-ember-loadscreen__section-title\"\u003e\n          Turn loading time into part of your server's identity.\n        \u003c\/h2\u003e\n\n        \u003cp class=\"fml-ember-loadscreen__intro\"\u003e\n          Ember Loadscreen v1 is designed around presentation rather than a\n          static background and logo. Multi-layer cinematic scenes, server\n          information, music and promotional content keep players engaged while\n          FiveM prepares the session.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-ember-loadscreen__statement\"\u003e\n\n      \u003cp\u003e\n        Use the loading screen to introduce the server atmosphere, surface\n        important information and promote new content before the player even\n        enters the world.\n      \u003c\/p\u003e\n\n      \u003cspan class=\"fml-ember-loadscreen__code-label\"\u003e\n        \/\/ SESSION_INITIALIZING\n      \u003c\/span\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- CINEMATIC --\u003e\n  \u003csection class=\"fml-ember-loadscreen__section\"\u003e\n\n    \u003cdiv class=\"fml-ember-loadscreen__head\"\u003e\n\n      \u003cdiv class=\"fml-ember-loadscreen__index\"\u003e\n        01 \/ Cinema\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__kicker\"\u003e\n          Multi-layer visual presentation\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-ember-loadscreen__section-title\"\u003e\n          Replace the static loading image with scenes that actually feel alive.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-ember-loadscreen__grid\"\u003e\n\n      \u003carticle class=\"fml-ember-loadscreen__card\"\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__card-top\"\u003e\n          \u003cspan class=\"fml-ember-loadscreen__number\"\u003e01\u003c\/span\u003e\n          \u003cspan class=\"fml-ember-loadscreen__label\"\u003eLayers · Motion · Depth\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eCinematic Parallax\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Multi-layer scenes move independently to create a sense of depth,\n          motion and perspective rather than presenting players with one flat\n          background.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-ember-loadscreen__card\"\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__card-top\"\u003e\n          \u003cspan class=\"fml-ember-loadscreen__number\"\u003e02\u003c\/span\u003e\n          \u003cspan class=\"fml-ember-loadscreen__label\"\u003eZoom · Scene · Motion\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eDynamic Zoom Effects\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Scene movement can include cinematic zoom behavior for cityscapes,\n          roads, night drives and other visual compositions.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-ember-loadscreen__card\"\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__card-top\"\u003e\n          \u003cspan class=\"fml-ember-loadscreen__number\"\u003e03\u003c\/span\u003e\n          \u003cspan class=\"fml-ember-loadscreen__label\"\u003eBranding · Atmosphere\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eServer-Focused Visual Identity\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Scenes, colors and presentation can be customized around the visual\n          language of your own FiveM community.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-ember-loadscreen__card\"\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__card-top\"\u003e\n          \u003cspan class=\"fml-ember-loadscreen__number\"\u003e04\u003c\/span\u003e\n          \u003cspan class=\"fml-ember-loadscreen__label\"\u003eGTA Online Inspired\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eGame-Like Presentation\u003c\/h3\u003e\n\n        \u003cp\u003e\n          The overall experience takes inspiration from cinematic GTA-style\n          loading presentation while remaining configurable for your server.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- TIME --\u003e\n  \u003csection class=\"fml-ember-loadscreen__section\"\u003e\n\n    \u003cdiv class=\"fml-ember-loadscreen__head\"\u003e\n\n      \u003cdiv class=\"fml-ember-loadscreen__index\"\u003e\n        02 \/ Time\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__kicker\"\u003e\n          Dynamic atmosphere\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-ember-loadscreen__section-title\"\u003e\n          Let the loadscreen change character as the world moves through the day.\n        \u003c\/h2\u003e\n\n        \u003cp class=\"fml-ember-loadscreen__intro\"\u003e\n          Ember Loadscreen includes multiple time-of-day visual profiles that\n          can automatically change according to the in-game time.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-ember-loadscreen__times\"\u003e\n\n      \u003carticle class=\"fml-ember-loadscreen__time\"\u003e\n        \u003csmall\u003e01 \/ DAWN\u003c\/small\u003e\n\n        \u003cdiv\u003e\n          \u003ch3\u003eDawn\u003c\/h3\u003e\n          \u003cp\u003eSoft pink tones for early-morning atmosphere.\u003c\/p\u003e\n        \u003c\/div\u003e\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-ember-loadscreen__time\"\u003e\n        \u003csmall\u003e02 \/ DAY\u003c\/small\u003e\n\n        \u003cdiv\u003e\n          \u003ch3\u003eDay\u003c\/h3\u003e\n          \u003cp\u003eBrighter presentation designed around daylight scenes.\u003c\/p\u003e\n        \u003c\/div\u003e\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-ember-loadscreen__time\"\u003e\n        \u003csmall\u003e03 \/ DUSK\u003c\/small\u003e\n\n        \u003cdiv\u003e\n          \u003ch3\u003eDusk\u003c\/h3\u003e\n          \u003cp\u003eWarm orange lighting for the transition into evening.\u003c\/p\u003e\n        \u003c\/div\u003e\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-ember-loadscreen__time\"\u003e\n        \u003csmall\u003e04 \/ NIGHT\u003c\/small\u003e\n\n        \u003cdiv\u003e\n          \u003ch3\u003eNight\u003c\/h3\u003e\n          \u003cp\u003eDarker city and sky styling for nighttime sessions.\u003c\/p\u003e\n        \u003c\/div\u003e\n      \u003c\/article\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- PROMOTIONS --\u003e\n  \u003csection class=\"fml-ember-loadscreen__section\"\u003e\n\n    \u003cdiv class=\"fml-ember-loadscreen__head\"\u003e\n\n      \u003cdiv class=\"fml-ember-loadscreen__index\"\u003e\n        03 \/ Promote\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__kicker\"\u003e\n          Loading time becomes useful screen space\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-ember-loadscreen__section-title\"\u003e\n          Show players what changed before they start asking in Discord.\n        \u003c\/h2\u003e\n\n        \u003cp class=\"fml-ember-loadscreen__intro\"\u003e\n          Featured promotion panels can be used to highlight important server\n          content directly during loading.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-ember-loadscreen__grid\"\u003e\n\n      \u003carticle class=\"fml-ember-loadscreen__card\"\u003e\n        \u003cdiv class=\"fml-ember-loadscreen__card-top\"\u003e\n          \u003cspan class=\"fml-ember-loadscreen__number\"\u003e01\u003c\/span\u003e\n          \u003cspan class=\"fml-ember-loadscreen__label\"\u003eUpdates · News\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eServer Updates\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Highlight recent changes and important announcements directly inside\n          the loading experience.\n        \u003c\/p\u003e\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-ember-loadscreen__card\"\u003e\n        \u003cdiv class=\"fml-ember-loadscreen__card-top\"\u003e\n          \u003cspan class=\"fml-ember-loadscreen__number\"\u003e02\u003c\/span\u003e\n          \u003cspan class=\"fml-ember-loadscreen__label\"\u003eJobs · Content\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eNew Jobs \u0026amp; Features\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Introduce newly added jobs, systems and gameplay features before\n          players enter the city.\n        \u003c\/p\u003e\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-ember-loadscreen__card\"\u003e\n        \u003cdiv class=\"fml-ember-loadscreen__card-top\"\u003e\n          \u003cspan class=\"fml-ember-loadscreen__number\"\u003e03\u003c\/span\u003e\n          \u003cspan class=\"fml-ember-loadscreen__label\"\u003eVehicles · Events\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eCars \u0026amp; Events\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Promote new vehicle releases, scheduled events and other community\n          activities.\n        \u003c\/p\u003e\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-ember-loadscreen__card\"\u003e\n        \u003cdiv class=\"fml-ember-loadscreen__card-top\"\u003e\n          \u003cspan class=\"fml-ember-loadscreen__number\"\u003e04\u003c\/span\u003e\n          \u003cspan class=\"fml-ember-loadscreen__label\"\u003eRules · Links\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eRules \u0026amp; Server Information\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Surface important rules, links or server-specific information in a\n          place every connecting player already sees.\n        \u003c\/p\u003e\n      \u003c\/article\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- MUSIC --\u003e\n  \u003csection class=\"fml-ember-loadscreen__section\"\u003e\n\n    \u003cdiv class=\"fml-ember-loadscreen__head\"\u003e\n\n      \u003cdiv class=\"fml-ember-loadscreen__index\"\u003e\n        04 \/ Music\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__kicker\"\u003e\n          Built-in audio experience\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-ember-loadscreen__section-title\"\u003e\n          Give the server a soundtrack before the player reaches the spawn menu.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-ember-loadscreen__player\"\u003e\n\n      \u003cdiv class=\"fml-ember-loadscreen__player-head\"\u003e\n        \u003cstrong\u003e\/\/ EMBER_MUSIC_PLAYER\u003c\/strong\u003e\n        \u003cspan\u003eMultiple Tracks \/ Shuffle \/ Volume \/ Mute\u003c\/span\u003e\n      \u003c\/div\u003e\n\n\n      \u003cdiv class=\"fml-ember-loadscreen__player-body\"\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__track\"\u003e\n          \u003csmall\u003eNow playing\u003c\/small\u003e\n          \u003cstrong\u003eYour Server Soundtrack\u003c\/strong\u003e\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-ember-loadscreen__wave\" aria-hidden=\"true\"\u003e\n          \u003cspan\u003e\u003c\/span\u003e\n          \u003cspan\u003e\u003c\/span\u003e\n          \u003cspan\u003e\u003c\/span\u003e\n          \u003cspan\u003e\u003c\/span\u003e\n          \u003cspan\u003e\u003c\/span\u003e\n          \u003cspan\u003e\u003c\/span\u003e\n          \u003cspan\u003e\u003c\/span\u003e\n          \u003cspan\u003e\u003c\/span\u003e\n          \u003cspan\u003e\u003c\/span\u003e\n          \u003cspan\u003e\u003c\/span\u003e\n        \u003c\/div\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-ember-loadscreen__grid\"\u003e\n\n      \u003carticle class=\"fml-ember-loadscreen__card\"\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__card-top\"\u003e\n          \u003cspan class=\"fml-ember-loadscreen__number\"\u003e01\u003c\/span\u003e\n          \u003cspan class=\"fml-ember-loadscreen__label\"\u003ePlaylist · Tracks\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eMultiple Audio Tracks\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Configure several tracks instead of forcing every connection to use\n          one repeating song.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-ember-loadscreen__card\"\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__card-top\"\u003e\n          \u003cspan class=\"fml-ember-loadscreen__number\"\u003e02\u003c\/span\u003e\n          \u003cspan class=\"fml-ember-loadscreen__label\"\u003eShuffle · Playback\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eShuffle Mode\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Track playback can be shuffled for more variation between loading\n          sessions.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-ember-loadscreen__card\"\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__card-top\"\u003e\n          \u003cspan class=\"fml-ember-loadscreen__number\"\u003e03\u003c\/span\u003e\n          \u003cspan class=\"fml-ember-loadscreen__label\"\u003eVolume · Mute\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003ePlayer Audio Controls\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Volume adjustment and mute controls allow players to control the\n          loadscreen audio experience.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-ember-loadscreen__card\"\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__card-top\"\u003e\n          \u003cspan class=\"fml-ember-loadscreen__number\"\u003e04\u003c\/span\u003e\n          \u003cspan class=\"fml-ember-loadscreen__label\"\u003eVisualizer · Waveform\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eAnimated Music Visualizer\u003c\/h3\u003e\n\n        \u003cp\u003e\n          A waveform-style visualizer gives the audio component a more polished\n          visual presence while music is playing.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- LIVE SERVER --\u003e\n  \u003csection class=\"fml-ember-loadscreen__section\"\u003e\n\n    \u003cdiv class=\"fml-ember-loadscreen__head\"\u003e\n\n      \u003cdiv class=\"fml-ember-loadscreen__index\"\u003e\n        05 \/ Live Data\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__kicker\"\u003e\n          Useful information while connecting\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-ember-loadscreen__section-title\"\u003e\n          Show the state of the server instead of leaving players staring at a progress bar.\n        \u003c\/h2\u003e\n\n        \u003cp class=\"fml-ember-loadscreen__intro\"\u003e\n          Ember Loadscreen can display live server information including player\n          count, server status, framework information, region data and optional\n          player details when configured.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-ember-loadscreen__server\"\u003e\n\n      \u003cdiv class=\"fml-ember-loadscreen__server-item\"\u003e\n        \u003csmall\u003eServer Status\u003c\/small\u003e\n        \u003cstrong\u003e\u003cem\u003eOnline\u003c\/em\u003e\u003c\/strong\u003e\n        \u003cspan\u003eDisplay server availability or maintenance state.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-ember-loadscreen__server-item\"\u003e\n        \u003csmall\u003ePlayers\u003c\/small\u003e\n        \u003cstrong\u003eLive\u003c\/strong\u003e\n        \u003cspan\u003eShow current player-count information.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-ember-loadscreen__server-item\"\u003e\n        \u003csmall\u003eFramework\u003c\/small\u003e\n        \u003cstrong\u003eDynamic\u003c\/strong\u003e\n        \u003cspan\u003eDisplay server framework information such as QBCore or ESX.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-ember-loadscreen__server-item\"\u003e\n        \u003csmall\u003eRegion\u003c\/small\u003e\n        \u003cstrong\u003eVisible\u003c\/strong\u003e\n        \u003cspan\u003ePresent configured server-region information.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- LOADING --\u003e\n  \u003csection class=\"fml-ember-loadscreen__section\"\u003e\n\n    \u003cdiv class=\"fml-ember-loadscreen__head\"\u003e\n\n      \u003cdiv class=\"fml-ember-loadscreen__index\"\u003e\n        06 \/ Progress\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__kicker\"\u003e\n          Choose how loading progress is presented\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-ember-loadscreen__section-title\"\u003e\n          Three loading modes give you control over how the progress experience feels.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-ember-loadscreen__progress-modes\"\u003e\n\n      \u003carticle class=\"fml-ember-loadscreen__progress\"\u003e\n\n        \u003csmall\u003e01 \/ REAL\u003c\/small\u003e\n\n        \u003ch3\u003eReal Progress\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Present actual loading progress based on the available FiveM loading\n          information.\n        \u003c\/p\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__bar\"\u003e\u003c\/div\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-ember-loadscreen__progress\"\u003e\n\n        \u003csmall\u003e02 \/ SIMULATED\u003c\/small\u003e\n\n        \u003ch3\u003eSmooth Simulation\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Use a smoother simulated presentation when visual consistency matters\n          more than directly mirroring every loading-stage movement.\n        \u003c\/p\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__bar\"\u003e\u003c\/div\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-ember-loadscreen__progress\"\u003e\n\n        \u003csmall\u003e03 \/ HYBRID\u003c\/small\u003e\n\n        \u003ch3\u003eHybrid Mode\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Blend actual progress information with smoother visual behavior for a\n          more controlled loading experience.\n        \u003c\/p\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__bar\"\u003e\u003c\/div\u003e\n\n      \u003c\/article\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- QUEUE --\u003e\n  \u003csection class=\"fml-ember-loadscreen__section\"\u003e\n\n    \u003cdiv class=\"fml-ember-loadscreen__head\"\u003e\n\n      \u003cdiv class=\"fml-ember-loadscreen__index\"\u003e\n        07 \/ Queue\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__kicker\"\u003e\n          Designed to fit existing server flows\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-ember-loadscreen__section-title\"\u003e\n          Keep the visual experience consistent even when players are waiting in queue.\n        \u003c\/h2\u003e\n\n        \u003cp class=\"fml-ember-loadscreen__intro\"\u003e\n          Queue integration is supported through an export-based approach,\n          allowing compatible queue resources to pass relevant information into\n          the loadscreen.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-ember-loadscreen__statement\"\u003e\n\n      \u003cp\u003e\n        Instead of treating queueing and loading as two disconnected screens,\n        server owners can integrate the Ember interface into the surrounding\n        connection experience.\n      \u003c\/p\u003e\n\n      \u003cspan class=\"fml-ember-loadscreen__code-label\"\u003e\n        \/\/ QUEUE_INTEGRATION_READY\n      \u003c\/span\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- CONFIG --\u003e\n  \u003csection class=\"fml-ember-loadscreen__section\"\u003e\n\n    \u003cdiv class=\"fml-ember-loadscreen__head\"\u003e\n\n      \u003cdiv class=\"fml-ember-loadscreen__index\"\u003e\n        08 \/ Config\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__kicker\"\u003e\n          Customize without rebuilding the interface\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-ember-loadscreen__section-title\"\u003e\n          Control the visual identity from one configuration file.\n        \u003c\/h2\u003e\n\n        \u003cp class=\"fml-ember-loadscreen__intro\"\u003e\n          The supplied configuration is centered around\n          \u003ccode\u003eweb\/js\/config.js\u003c\/code\u003e, allowing server owners to change core\n          presentation options without redesigning the loadscreen from scratch.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-ember-loadscreen__config\"\u003e\n\n      \u003carticle class=\"fml-ember-loadscreen__config-copy\"\u003e\n\n        \u003csmall\u003e\n          \/\/ CONFIGURATION\n        \u003c\/small\u003e\n\n        \u003ch3\u003e\n          Make Ember look like your server.\n        \u003c\/h3\u003e\n\n        \u003cp\u003e\n          Customize scene content, themes, music, promotional information,\n          colors, text and links from the provided configuration structure.\n          This keeps routine branding changes separate from the core interface.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003cdiv class=\"fml-ember-loadscreen__config-code\"\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__config-head\"\u003e\n          web\/js\/config.js\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__config-body\"\u003e\n          \u003cspan class=\"comment\"\u003e\/\/ Illustrative configuration layout\u003c\/span\u003e\u003cbr\u003e\n          \u003cspan class=\"gold\"\u003etheme\u003c\/span\u003e: \u003cspan class=\"green\"\u003e\"server-brand\"\u003c\/span\u003e,\u003cbr\u003e\n          \u003cspan class=\"gold\"\u003emusic\u003c\/span\u003e: \u003cspan class=\"green\"\u003e[...]\u003c\/span\u003e,\u003cbr\u003e\n          \u003cspan class=\"gold\"\u003epromotions\u003c\/span\u003e: \u003cspan class=\"green\"\u003e[...]\u003c\/span\u003e,\u003cbr\u003e\n          \u003cspan class=\"gold\"\u003escenes\u003c\/span\u003e: \u003cspan class=\"green\"\u003e[...]\u003c\/span\u003e,\u003cbr\u003e\n          \u003cspan class=\"gold\"\u003elinks\u003c\/span\u003e: \u003cspan class=\"green\"\u003e[...]\u003c\/span\u003e,\u003cbr\u003e\n          \u003cspan class=\"gold\"\u003ecolors\u003c\/span\u003e: \u003cspan class=\"green\"\u003e{ ... }\u003c\/span\u003e\n        \u003c\/div\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- PREVIEW --\u003e\n  \u003csection class=\"fml-ember-loadscreen__section\"\u003e\n\n    \u003cdiv class=\"fml-ember-loadscreen__head\"\u003e\n\n      \u003cdiv class=\"fml-ember-loadscreen__index\"\u003e\n        09 \/ Preview\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__kicker\"\u003e\n          Test outside FiveM\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-ember-loadscreen__section-title\"\u003e\n          Preview visual changes in your browser before restarting the server.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-ember-loadscreen__grid\"\u003e\n\n      \u003carticle class=\"fml-ember-loadscreen__card\"\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__card-top\"\u003e\n          \u003cspan class=\"fml-ember-loadscreen__number\"\u003e01\u003c\/span\u003e\n          \u003cspan class=\"fml-ember-loadscreen__label\"\u003eBrowser · Preview\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eBrowser Preview Mode\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Open the provided \u003ccode\u003eindex.html\u003c\/code\u003e in a browser to preview the\n          loadscreen presentation without launching FiveM.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-ember-loadscreen__card\"\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__card-top\"\u003e\n          \u003cspan class=\"fml-ember-loadscreen__number\"\u003e02\u003c\/span\u003e\n          \u003cspan class=\"fml-ember-loadscreen__label\"\u003eFaster · Iteration\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eQuicker Visual Changes\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Test colors, scenes, text and other visual configuration changes\n          before deploying them to the live server.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- TECHNICAL --\u003e\n  \u003csection class=\"fml-ember-loadscreen__section\"\u003e\n\n    \u003cdiv class=\"fml-ember-loadscreen__head\"\u003e\n\n      \u003cdiv class=\"fml-ember-loadscreen__index\"\u003e\n        10 \/ Technical\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__kicker\"\u003e\n          Feature overview\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-ember-loadscreen__section-title\"\u003e\n          Built around presentation, customization and useful connection information.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-ember-loadscreen__terminal\"\u003e\n\n      \u003cdiv class=\"fml-ember-loadscreen__terminal-head\"\u003e\n        \u003cstrong\u003e\/\/ EMBER_LOADSCREEN_V1\u003c\/strong\u003e\n        \u003cspan\u003eFiveM \/ UI \/ Loading Experience\u003c\/span\u003e\n      \u003c\/div\u003e\n\n\n      \u003cdl class=\"fml-ember-loadscreen__spec-grid\"\u003e\n\n        \u003cdiv class=\"fml-ember-loadscreen__spec\"\u003e\n          \u003cdt\u003eResource Type\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-ember-loadscreen__spec-value\"\u003e\n              FiveM Loadscreen\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-ember-loadscreen__spec-copy\"\u003e\n              Cinematic server loading-screen resource by Ember Studios.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-ember-loadscreen__spec\"\u003e\n          \u003cdt\u003eScene System\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-ember-loadscreen__spec-value\"\u003e\n              Parallax\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-ember-loadscreen__spec-copy\"\u003e\n              Multi-layer scenes with dynamic movement and zoom-style effects.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-ember-loadscreen__spec\"\u003e\n          \u003cdt\u003eTime Profiles\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-ember-loadscreen__spec-value\"\u003e\n              4 Variations\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-ember-loadscreen__spec-copy\"\u003e\n              Dawn, day, dusk and night visual presentation.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-ember-loadscreen__spec\"\u003e\n          \u003cdt\u003eProgress Modes\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-ember-loadscreen__spec-value\"\u003e\n              3 Modes\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-ember-loadscreen__spec-copy\"\u003e\n              Real, simulated and hybrid loading-progress presentation.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-ember-loadscreen__spec\"\u003e\n          \u003cdt\u003eMusic\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-ember-loadscreen__spec-value\"\u003e\n              Multi-Track\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-ember-loadscreen__spec-copy\"\u003e\n              Shuffle, volume, mute and waveform-style visualizer support.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-ember-loadscreen__spec\"\u003e\n          \u003cdt\u003eServer Information\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-ember-loadscreen__spec-value\"\u003e\n              Live Data\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-ember-loadscreen__spec-copy\"\u003e\n              Player count, status, framework, region and optional player\n              details can be presented when configured.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-ember-loadscreen__spec\"\u003e\n          \u003cdt\u003eQueue Support\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-ember-loadscreen__spec-value\"\u003e\n              Export Based\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-ember-loadscreen__spec-copy\"\u003e\n              Designed to integrate with compatible existing queue systems.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-ember-loadscreen__spec\"\u003e\n          \u003cdt\u003eConfiguration\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-ember-loadscreen__spec-value\"\u003e\n              config.js\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-ember-loadscreen__spec-copy\"\u003e\n              Main visual and content settings are managed through\n              \u003ccode\u003eweb\/js\/config.js\u003c\/code\u003e.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n        \u003c\/div\u003e\n\n      \u003c\/dl\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- CLOSING --\u003e\n  \u003csection class=\"fml-ember-loadscreen__closing\"\u003e\n\n    \u003cdiv class=\"fml-ember-loadscreen__closing-label\"\u003e\n      Ember Studios \/ FiveM Loadscreen\n    \u003c\/div\u003e\n\n    \u003ch2\u003e\n      Your loading screen is the first interface every connecting player sees. Make it feel like part of the server.\n    \u003c\/h2\u003e\n\n    \u003cp\u003e\n      Ember Loadscreen v1 combines cinematic parallax scenes, dynamic\n      time-of-day presentation, featured promotions, multi-track music, live\n      server data, three loading-progress modes, queue support and centralized\n      configuration into one customizable FiveM loading experience.\n    \u003c\/p\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003cdiv class=\"fml-ember-loadscreen__final\"\u003e\n    Do not make players wait on a static screen.\n    \u003cem\u003eMake the wait part of the experience.\u003c\/em\u003e\n  \u003c\/div\u003e\n\n\u003c\/article\u003e","brand":"Ember Studioss","offers":[{"title":"Default Title","offer_id":45766464929901,"sku":null,"price":0.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0683\/2072\/3053\/files\/6c089d03f2cee29ee3848d5ebdf9d0bdf4f8d250.jpg?v=1788374189","url":"https:\/\/fivem-lab.com\/products\/ember-loadscreen-v1-fivem","provider":"Fivem-Lab","version":"1.0","type":"link"}