:root{
    --panel-story-bg: #63A19E;
    --panel-about-bg: #BA8EC8;
    --panel-guide-bg: #CD9C3B;
    --panel-support-bg: #D2A1B5;
    --panel-width: 49.6875%;
    --panel-front-right: 0px;
    --panel-overlap-shift: 73px;
    --panel-font-family: var(--site-font-family);
    --panel-text-color: #000;
    --panel-title-size: 24px;
    --panel-heading-size: 36px;
    --panel-info-body-size: 24px;
    --panel-story-body-size: 16px;
    --panel-line-height-tight: 1.1;
    --panel-line-height-body: 1.22;
    --panel-content-x: 25px;
    --panel-body-top-gap: 32px;
    --panel-paragraph-gap: 22px;
    --panel-scrollbar-width: 11px;
    --panel-body-right: 0px;
    --panel-scrollbar-right: 0px;
    --panel-scrollbar-content-gap: 17px;
    --panel-scrollbar-color: #F19E47;
    --panel-close-right: 27px;
}

#detailbar.panelShell,
.leftbarParent.panelShell{
    box-sizing: border-box;
    background-color: var(--panel-story-bg);
    border: 1px solid black;
    border-radius: 35px 0 0 35px;
    overflow-x: clip;
    overflow-y: hidden;
    flex-direction: column;
    width: var(--panel-width);
    right: var(--panel-front-right);
    color: var(--panel-text-color);
    font-family: var(--panel-font-family);
    letter-spacing: 0;
}

#detailbar.storyPanelShell{
    background-color: var(--panel-story-bg);
}

.leftbarParent.aboutPanelShell{
    background-color: var(--panel-about-bg);
}

.leftbarParent.guidePanelShell{
    background-color: var(--panel-guide-bg);
}

.leftbarParent.supportPanelShell{
    background-color: var(--panel-support-bg);
}

#detailbar.panelLayerBack,
.leftbarParent.panelLayerBack{
    right: calc(var(--panel-front-right) + var(--panel-overlap-shift));
}

.panelHeader{
    margin: 0;
    position: relative;
    flex: 0 0 60px;
    width: 100%;
    border-bottom: 1px solid black;
    color: var(--panel-text-color);
}

.panelBody{
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 var(--panel-body-right) 0 var(--panel-content-x);
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: var(--panel-body-top-gap);
    padding-right: var(--panel-scrollbar-content-gap);
    scrollbar-gutter: stable;
    scrollbar-width: none;
    color: var(--panel-text-color);
    font-family: inherit;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.panelBody::-webkit-scrollbar{
    width: 0;
    height: 0;
}

.panelBody::-webkit-scrollbar-button{
    display: none;
    width: 0;
    height: 0;
}

.panelBody::-webkit-scrollbar-track{
    background: transparent;
}

.panelBody::-webkit-scrollbar-thumb{
    background: transparent;
}

.panelBody::-webkit-scrollbar-corner{
    background: transparent;
}

.panelScrollbar{
    position: fixed;
    right: var(--panel-scrollbar-right);
    width: var(--panel-scrollbar-width);
    pointer-events: none;
    z-index: 8;
}

.panelScrollbarThumb{
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    background-color: var(--panel-scrollbar-color);
    border: 1px solid #000;
    border-radius: 30px;
}

.panelLayerBack .panelScrollbar,
.panelScrollbar.isHidden{
    display: none;
}

.panelTitle{
    color: var(--panel-text-color);
    font-family: inherit;
    font-size: var(--panel-title-size);
    font-weight: 600;
    line-height: var(--panel-line-height-tight);
    letter-spacing: 0;
    margin: 17px 64px 0 var(--panel-content-x);
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.panelBody a{
    color: var(--panel-text-color);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.panelBody a:hover{
    color: var(--panel-text-color);
    text-decoration: underline;
}

#detailbar{
    padding: 0;
    transition-property: none;
	transition-duration: 0s;
    height: calc(100% - 103px);
}

#detailbar .storyPanelBody{
    margin: 0 var(--panel-body-right) 20px var(--panel-content-x);
    font-size: var(--panel-story-body-size);
    font-weight: 400;
    line-height: var(--panel-line-height-body);
}

#detailbar .storyPanelBody h3,
#detailbar .storyPanelBody h4,
#detailbar .storyPanelBody h5,
#detailbar .storyPanelBody p{
    color: var(--panel-text-color);
    font-family: inherit;
    letter-spacing: 0;
}

#detailbar .storyPanelBody h3{
    font-size: var(--panel-title-size);
    font-weight: 700;
    line-height: var(--panel-line-height-tight);
    margin: 0 0 4px;
}

#detailbar .storyPanelBody h4{
    font-size: var(--panel-story-body-size);
    font-weight: 600;
    line-height: var(--panel-line-height-body);
    margin: 0 0 14px;
}

#detailbar .storyPanelBody h5,
#detailbar .storyPanelBody p{
    font-size: var(--panel-story-body-size);
    font-weight: 400;
    line-height: var(--panel-line-height-body);
    margin: 0 0 14px;
}

#detailbar .storyPanelBody .storyHashtags{
    margin-bottom: 20px;
}

#detailbar .storyPanelBody .storyText{
    margin-bottom: 20px;
}

#detailbar:after{
    background-color: brown;
    padding: 20px; 
    border-radius: 20px 0 0 20px;
}

#detailbar img{
    display: block;
    margin-top: 10px;
    margin-bottom: 20px;
    max-width: 100%;
}

#detailbar .storyVideoSlot{
    box-sizing: border-box;
    clear: both;
    display: block;
    inline-size: 100%;
    width: 100%;
    max-width: var(--story-video-max-width, 100%);
    margin: 10px 0 20px;
}

#detailbar .storyVideoSlot #video{
    box-sizing: border-box;
    display: block;
    inline-size: 100% !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
}

#detailbar .storyVideoSlot iframe{
    box-sizing: border-box;
    display: block;
    inline-size: 100% !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
}

@media (max-width: 700px){
    :root{
        --panel-width: 100%;
        --panel-overlap-shift: 0px;
        --panel-content-x: 18px;
        --panel-info-body-size: 18px;
        --panel-heading-size: 28px;
    }

    #detailbar.panelShell,
    .leftbarParent.panelShell{
        top: 71px !important;
        border-radius: 20px 20px 0 0;
    }

    #detailbar.panelShell{
        bottom: 86px;
        height: auto;
        border-radius: 20px;
    }
}

.panelCloseButton,
#detailbar .figmaCloseBtn{
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: #F19E47;
  border: 1px solid #000;
  padding: 0;
  cursor: pointer;
  box-shadow: none;

  position: relative;

  overflow: hidden;
  font-size: 0;
}

#detailbar .panelHeader .panelCloseButton,
.leftbarParent .panelHeader .panelCloseButton{
  position: absolute;
  top: 13px;
  right: var(--panel-close-right);
  margin: 0;
  z-index: 10;
}

.panelCloseButton,
#detailbar .figmaCloseBtn{
  transition: filter 120ms ease, transform 60ms ease;
}

.panelCloseButton:hover,
#detailbar .figmaCloseBtn:hover{
  filter: brightness(1.06);
}

.panelCloseButton:active,
#detailbar .figmaCloseBtn:active{
  filter: brightness(0.94);
  transform: translateY(1px);
}

/* keyboard users */
.panelCloseButton:focus-visible,
#detailbar .figmaCloseBtn:focus-visible{
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* Creates two 18px × 2px black lines
Centers them exactly in the button
Rotates them to form an X */
.panelCloseButton::before,
.panelCloseButton::after,
#detailbar .figmaCloseBtn::before,
#detailbar .figmaCloseBtn::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  background: #000;
  transform-origin: center;
}

.panelCloseButton::before,
#detailbar .figmaCloseBtn::before{
  transform: translate(-50%, -50%) rotate(45deg);
}

.panelCloseButton::after,
#detailbar .figmaCloseBtn::after{
  transform: translate(-50%, -50%) rotate(-45deg);
}