.ogp-preview {
    justify-items: center;
}

#session-ogp-card {
    box-sizing: border-box;
    width: 1200px;
    height: 630px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #f2c3db;
    color: #1d191b;
    font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
    padding: 42px 64px 44px;
    display: grid;
    grid-template-rows: 72px auto minmax(0, 1fr) 126px;
    row-gap: 21px;
    justify-items: stretch;
    align-items: stretch;
}

#session-ogp-card > * {
    grid-area: auto;
}

.ogp-shape {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    background: #ec91bd;
}

.ogp-top {
    width: 475px;
    height: 240px;
    border-radius: 50%;
    top: -101px;
    right: -133px;
    transform: rotate(31deg);
}

.ogp-bottom {
    width: 390px;
    height: 215px;
    border-radius: 50%;
    bottom: -151px;
    left: -102px;
    transform: rotate(17deg);
}

.ogp-spark {
    width: 260px;
    height: 260px;
    bottom: -122px;
    right: -61px;
    clip-path: polygon(50% 0%, 59% 29%, 82% 9%, 76% 39%, 100% 43%, 80% 56%, 98% 76%, 68% 70%, 66% 100%, 50% 78%, 32% 99%, 32% 70%, 3% 76%, 23% 56%, 0 43%, 25% 39%, 18% 9%, 41% 29%);
}

.ogp-header {
    justify-content: space-between;
    align-items: center;
}

.ogp-logo {
    width: 278px;
    height: auto;
    display: block;
}

.ogp-meta {
    align-items: flex-end;
    text-align: right;
    line-height: 1.35;
    font-size: 20px;
    font-weight: 600;
}

.ogp-time {
    font-size: 28px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.ogp-tags {
    align-items: flex-start;
    gap: 12px;
    font-size: 23px;
    font-weight: 700;
}

.ogp-pill {
    border-radius: 40px;
    padding: 6px 20px 7px;
    line-height: 1.3;
    background: #fffcfd;
}

.ogp-category {
    background: #1d191b;
    color: #fff9fb;
}

.ogp-title-region {
    min-height: 0;
    display: flex;
    align-items: center;
}

.ogp-title-region h1 {
    margin: 0;
    font-size: 63px;
    font-weight: 900;
    line-height: 1.17;
    letter-spacing: -0.023em;
    overflow-wrap: anywhere;
    word-break: keep-all;
    line-break: strict;
    text-wrap: balance;
}

.ogp-speaker {
    align-items: center;
    gap: 25px;
    padding: 15px 29px 15px 21px;
    border: 2px solid #fff7fc;
    border-radius: 24px;
    background: rgb(255 255 255 / 45%);
}

.ogp-portrait {
    box-sizing: border-box;
    width: 94px;
    height: 94px;
    padding: 4px;
    border-radius: 50%;
    background: linear-gradient(145deg, #8431fa, #ed2695);
    flex: none;
}

.ogp-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.ogp-person {
    min-width: 0;
    flex: 1;
}

.ogp-name {
    font-size: 38px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.ogp-info {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 16px;
    margin-top: 5px;
    font-size: 22px;
    line-height: 1.4;
}

.ogp-affiliation {
    font-weight: 600;
}

.ogp-account {
    font-weight: 700;
    color: #91275e;
}

.ogp-hash {
    color: #5b2946;
    align-self: flex-end;
    font-weight: 700;
    font-size: 19px;
    margin-bottom: 6px;
    white-space: nowrap;
}