:root {
    color-scheme: dark;
}

.mg2pp-preview,
.mg2pp-preview * {
    box-sizing: border-box;
}

.mg2pp-preview {
    --mg2pp-accent: #cebf4b;
    width: 100%;
    min-height: 100%;
    padding: clamp(24px, 5vw, 64px) 18px 54px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 18%, rgba(206,191,75,.12), transparent 34%),
        linear-gradient(180deg, #090909 0%, #020202 100%);
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
}

.mg2pp-copy {
    width: min(840px, 100%);
    margin: 0 auto 28px;
}

.mg2pp-kicker {
    display: inline-block;
    margin-bottom: 12px;
    padding: 8px 14px;
    border: 1px solid rgba(206,191,75,.56);
    border-radius: 999px;
    color: var(--mg2pp-accent);
    background: rgba(0,0,0,.55);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
}

.mg2pp-copy h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(26px, 4.4vw, 46px);
    line-height: 1.07;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.mg2pp-copy p {
    max-width: 760px;
    margin: 15px auto 0;
    color: #aaa;
    font-size: clamp(14px, 2.2vw, 18px);
    line-height: 1.55;
}

.mg2pp-stage {
    position: relative;
    width: min(100%, var(--mg2pp-phone-width));
    margin: 0 auto;
}

.mg2pp-phone {
    position: relative;
    width: var(--mg2pp-phone-width);
    height: var(--mg2pp-phone-height);
    margin: 0 auto;
    padding: 26px 12px 30px;
    border: 3px solid var(--mg2pp-accent);
    border-radius: 56px;
    background: linear-gradient(145deg, #171717, #050505 44%, #111 100%);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.08) inset,
        0 26px 70px rgba(0,0,0,.62),
        0 0 36px rgba(206,191,75,.10);
    transform-origin: top center;
}

.mg2pp-speaker {
    position: absolute;
    z-index: 4;
    top: 11px;
    left: 50%;
    width: 72px;
    height: 6px;
    border-radius: 999px;
    background: #2c2c2c;
    transform: translateX(-50%);
    box-shadow: 0 0 0 1px rgba(206,191,75,.2);
}

.mg2pp-screen {
    position: relative;
    width: var(--mg2pp-device-width);
    height: var(--mg2pp-device-height);
    overflow: hidden;
    border: 1px solid rgba(206,191,75,.30);
    border-radius: 38px;
    background: #050505;
    isolation: isolate;
}

.mg2pp-iframe {
    display: block;
    width: var(--mg2pp-device-width);
    height: var(--mg2pp-device-height);
    margin: 0;
    border: 0;
    background: #050505;
}

.mg2pp-home-indicator {
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 118px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.58);
    transform: translateX(-50%);
}

.mg2pp-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 24px auto 0;
}

.mg2pp-control {
    appearance: none;
    min-width: 178px;
    padding: 13px 18px;
    border: 1px solid var(--mg2pp-accent);
    border-radius: 12px;
    color: #fff;
    background: #080808;
    font: 800 12px/1 Arial, Helvetica, sans-serif;
    letter-spacing: .08em;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.mg2pp-control:hover,
.mg2pp-control:focus-visible {
    background: #151515;
    box-shadow: 0 0 20px rgba(206,191,75,.16);
    transform: translateY(-1px);
    outline: none;
}

.mg2pp-help {
    width: min(720px, 100%);
    margin: 18px auto 0;
    color: #888;
    font-size: 12px;
    line-height: 1.55;
}

.mg2pp-help strong {
    color: #bbb;
}

.mg2pp-phone:fullscreen {
    display: grid;
    place-items: center;
    width: 100vw !important;
    height: 100vh !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #000;
    transform: none !important;
}

.mg2pp-phone:fullscreen .mg2pp-speaker,
.mg2pp-phone:fullscreen .mg2pp-home-indicator {
    display: none;
}

.mg2pp-phone:fullscreen .mg2pp-screen,
.mg2pp-phone:fullscreen .mg2pp-iframe {
    width: min(430px, 100vw) !important;
    height: 100vh !important;
    border-radius: 0;
}

@media (max-width: 520px) {
    .mg2pp-preview {
        padding-left: 10px;
        padding-right: 10px;
    }
    .mg2pp-copy {
        margin-bottom: 20px;
    }
    .mg2pp-control {
        min-width: 0;
        flex: 1 1 150px;
    }
}