:root { --dmb-color-primary:        #111111; --dmb-color-primary-hover:  #2b2b2b;
--dmb-color-secondary:      #555555; --dmb-color-muted:          #666666; --dmb-color-bg:             #ffffff;
--dmb-color-surface:        #fafafa;
--dmb-color-surface-alt:    #f6f6f6; --dmb-color-border:         #c8c8c8; --dmb-color-border-soft:    #e5e5e5;
--dmb-color-canvas:         #f6f6f6; --dmb-color-canvas-border:  #c8c8c8;
--dmb-color-on-primary:     #ffffff;
--dmb-color-success:        #16a34a;
--dmb-color-error:          #dc2626; --dmb-font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--dmb-font-heading: "Outfit", var(--dmb-font-body);
--dmb-font-size-xs: 12px;
--dmb-font-size-sm: 13px;
--dmb-font-size-md: 14px;
--dmb-font-size-lg: 16px;
--dmb-font-size-xl: 20px;
--dmb-letter-caps:  .04em; --dmb-radius-sm: 4px;
--dmb-radius-md: 6px;
--dmb-radius-lg: 10px;
--dmb-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
--dmb-shadow-md: 0 6px 20px rgba(0, 0, 0, .08);
--dmb-shadow-lg: 0 10px 40px rgba(0, 0, 0, .15);
--dmb-transition: .2s ease;
} .dmb-builder-root,
.dmb-viewer-root,
.dmb-list,
.dmb-dialog,
#dmb-admin-library,
.dmb-toasts {
font-family: var(--dmb-font-body);
color: var(--dmb-color-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} .dmb-builder-root h1, .dmb-builder-root h2, .dmb-builder-root h3,
.dmb-viewer-root h1, .dmb-viewer-root h2, .dmb-viewer-root h3,
.dmb-list-card h1, .dmb-list-card h2, .dmb-list-card h3,
.dmb-dialog h1, .dmb-dialog h2, .dmb-dialog h3 {
font-family: var(--dmb-font-heading);
font-weight: 600;
color: var(--dmb-color-primary);
letter-spacing: 0;
} .dmb-btn,
.dmb-builder-root .button,
.dmb-dialog .button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background: var(--dmb-color-bg);
color: var(--dmb-color-primary);
border: 1px solid var(--dmb-color-border);
border-radius: var(--dmb-radius-sm);
padding: 8px 14px;
font: 500 var(--dmb-font-size-sm) / 1.2 var(--dmb-font-body);
cursor: pointer;
text-decoration: none;
-webkit-transition: transform var(--dmb-transition),
background-color var(--dmb-transition),
border-color var(--dmb-transition),
color var(--dmb-transition);
transition: transform var(--dmb-transition),
background-color var(--dmb-transition),
border-color var(--dmb-transition),
color var(--dmb-transition);
}
.dmb-btn:hover,
.dmb-builder-root .button:hover,
.dmb-dialog .button:hover {
border-color: var(--dmb-color-primary);
transform: scale(1.02);
}
.dmb-btn:active,
.dmb-builder-root .button:active,
.dmb-dialog .button:active {
transform: scale(1);
}
.dmb-btn[disabled],
.dmb-builder-root .button[disabled] {
opacity: .5;
cursor: not-allowed;
transform: none;
}
.dmb-btn-primary,
.dmb-builder-root .button-primary,
.dmb-dialog .button-primary {
background: var(--dmb-color-primary);
color: var(--dmb-color-on-primary);
border-color: var(--dmb-color-primary);
}
.dmb-btn-primary:hover,
.dmb-builder-root .button-primary:hover,
.dmb-dialog .button-primary:hover {
background: var(--dmb-color-primary-hover);
border-color: var(--dmb-color-primary-hover);
color: var(--dmb-color-on-primary);
} .dmb-builder-root input[type="text"],
.dmb-builder-root input[type="email"],
.dmb-dialog input[type="text"],
.dmb-dialog input[type="email"] {
background: var(--dmb-color-bg);
color: var(--dmb-color-primary);
border: 1px solid var(--dmb-color-border);
border-radius: var(--dmb-radius-sm);
padding: 8px 10px;
font: 400 var(--dmb-font-size-md) / 1.3 var(--dmb-font-body);
transition: border-color var(--dmb-transition);
}
.dmb-builder-root input:focus,
.dmb-dialog input:focus {
outline: none;
border-color: var(--dmb-color-primary);
}html:has(body.dmb-shell-blank-viewer),
html:has(body.dmb-shell-blank-editor),
body.dmb-shell-blank-viewer,
body.dmb-shell-blank-editor {
margin: 0 !important;
padding: 0 !important;
width: 100%;
height: 100%;
overflow: hidden;
} html:has(body.dmb-shell-blank-viewer),
html:has(body.dmb-shell-blank-editor) {
margin-top: 0 !important;
}
body.dmb-shell-blank-viewer,
body.dmb-shell-blank-editor {
--dmb-admin-offset: 0px;
}
body.admin-bar.dmb-shell-blank-viewer,
body.admin-bar.dmb-shell-blank-editor {
--dmb-admin-offset: 32px;
}
@media (max-width: 782px) {
body.admin-bar.dmb-shell-blank-viewer,
body.admin-bar.dmb-shell-blank-editor {
--dmb-admin-offset: 46px;
}
}
.dmb-shell-viewer,
.dmb-shell-editor { --dmb-color-primary: #f2f2f2;
--dmb-color-primary-hover: #ffffff;
--dmb-color-secondary: #c9c9c9;
--dmb-color-muted: #a7a7a7;
--dmb-color-bg: #0f0f10;
--dmb-color-surface: #17181b;
--dmb-color-surface-alt: #202226;
--dmb-color-border: #35383f;
--dmb-color-border-soft: #2a2d33; --dmb-color-canvas: #e8e8e8;
--dmb-color-canvas-border: #b9bcc3;
--dmb-color-on-primary: #101112;
--dmb-color-accent: #e5484d;
max-width: none;
margin: 0;
padding: 0;
display: block;
height: auto;
min-height: 0;
margin-top: var(--dmb-admin-offset);
overflow: visible;
}
body.dmb-shell-blank-viewer .dmb-shell-viewer,
body.dmb-shell-blank-editor .dmb-shell-editor {
height: calc(100vh - var(--dmb-admin-offset));
height: calc(100svh - var(--dmb-admin-offset));
height: calc(100dvh - var(--dmb-admin-offset));
min-height: calc(100vh - var(--dmb-admin-offset));
min-height: calc(100svh - var(--dmb-admin-offset));
min-height: calc(100dvh - var(--dmb-admin-offset));
overflow: hidden;
} .dmb-shell-editor .dmb-builder-container {
width: 100%;
height: 100%;
min-height: 0;
box-sizing: border-box;
}
.dmb-shell-viewer .dmb-viewer-layout {
display: grid;
grid-template-columns: minmax(0, 320px) minmax(0, 1fr) minmax(0, 320px);
gap: 0;
height: 100%;
min-height: 0;
}
.dmb-shell-viewer .dmb-viewer-sidebar { container-type: inline-size;
container-name: dmb-v-sidebar;
height: 100%;
min-height: 0;
padding: 12px;
border-right: 0;
background: #101113;
overflow: auto;
display: flex;
flex-direction: column;
gap: 12px;
box-sizing: border-box;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left {
border-right: 1px solid var(--dmb-color-border-soft);
}
.dmb-shell-viewer .dmb-viewer-sidebar--right {
border-left: 1px solid var(--dmb-color-border-soft);
min-width: 0;
}
.dmb-viewer-right-sidebar__head h2 {
margin: 0;
font-family: var(--dmb-font-heading);
font-size: var(--dmb-font-size-sm);
letter-spacing: .03em;
text-transform: uppercase;
color: #f8f8f8;
}
.dmb-viewer-right-sidebar__body {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: 14px;
border: 1px solid var(--dmb-color-border-soft);
border-radius: var(--dmb-radius-sm);
background: rgba(255, 255, 255, 0.02);
padding: 10px;
}
.dmb-viewer-right-nav {
display: grid;
gap: 8px;
}
.dmb-viewer-right-nav__btn {
width: 100%;
box-sizing: border-box;
min-width: 0;
justify-content: flex-start;
text-align: left;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
.dmb-viewer-right-ctas {
margin-top: auto;
display: grid;
gap: 8px;
}
.dmb-viewer-right-ctas__title {
margin: 0 0 2px;
padding-left: 8px;
font: 700 12px/1.2 var(--dmb-font-body);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--dmb-color-muted);
}
.dmb-viewer-right-ctas__subtitle {
margin: 0 0 6px;
padding-left: 8px;
font: 500 12px/1.35 var(--dmb-font-body);
color: var(--dmb-color-text-muted, #9aa0a6);
}
.dmb-viewer-right-cta {
border: 1px solid var(--dmb-color-border);
border-radius: var(--dmb-radius-sm);
background: rgba(16, 17, 19, 0.78);
transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.dmb-viewer-right-cta__link {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 10px;
padding: 10px;
text-decoration: none;
color: inherit;
}
.dmb-viewer-right-cta__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 0;
background: transparent;
overflow: hidden;
flex: 0 0 auto;
}
.dmb-viewer-right-cta__img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.dmb-viewer-right-cta__content {
display: grid;
gap: 2px;
}
.dmb-viewer-right-cta__title {
font: 700 13px/1.2 var(--dmb-font-body);
color: var(--dmb-color-primary);
}
.dmb-viewer-right-cta__text {
font: 500 12px/1.35 var(--dmb-font-body);
color: var(--dmb-color-muted);
}
.dmb-viewer-right-cta__link:hover .dmb-viewer-right-cta__title,
.dmb-viewer-right-cta__link:focus-visible .dmb-viewer-right-cta__title {
color: var(--dmb-color-primary-hover);
}
.dmb-viewer-right-cta:hover,
.dmb-viewer-right-cta:focus-within {
border-color: rgba(229, 72, 77, 0.5);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.dmb-viewer-right-cta__link:focus-visible {
outline: 2px solid var(--dmb-color-accent);
outline-offset: 2px;
}
.dmb-viewer-right-sidebar-toggle {
display: none;
}
.dmb-viewer-right-sidebar-backdrop[hidden] {
display: none;
}
.dmb-shell-viewer .dmb-viewer-main {
height: 100%;
min-height: 0;
min-width: 0;
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
position: relative;
} .dmb-viewer-mapcell {
position: relative;
flex: 1 1 auto;
min-height: 0;
min-width: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.dmb-viewer-mapcell .dmb-viewer-container {
flex: 1 1 auto;
min-height: 0;
} .dmb-shell-viewer .dmb-viewer-embed {
position: relative;
width: 100%;
min-height: 320px;
height: min(70vh, 720px);
display: flex;
flex-direction: column;
min-width: 0;
}
.dmb-viewer-embed .dmb-viewer-mapcell {
flex: 1 1 auto;
min-height: 0;
}
.dmb-viewer-embed .dmb-viewer-container {
flex: 1 1 auto;
min-height: 0;
}
.dmb-shell-viewer .dmb-viewer-container { min-width: 0;
overflow: hidden;
}
.dmb-viewer-header {
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 12px;
margin: 0; position: static !important;
padding: 10px 12px;
background: #121315;
border: 1px solid var(--dmb-color-border);
border-radius: var(--dmb-radius-md);
box-shadow: inset 0 -1px 0 rgba(229, 72, 77, .22);
background-image:
radial-gradient(circle at 12% 0%, rgba(229, 72, 77, 0.18), transparent 32%),
radial-gradient(circle at 92% 100%, rgba(245, 158, 11, 0.12), transparent 30%);
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: visible;
}
.dmb-viewer-header h1 {
margin: 0;
flex: 0 0 auto;
min-width: 0;
width: 100%;
color: #f8f8f8;
text-transform: uppercase;
letter-spacing: .03em;
font-weight: 700;
font-size: clamp(20px, 1.7vw, 34px);
line-height: 1.1;
position: relative;
padding-left: 14px;
box-sizing: border-box;
overflow-wrap: anywhere;
}
.dmb-viewer-header h1::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 6px;
height: 70%;
transform: translateY(-50%);
border-radius: 99px;
background: linear-gradient(180deg, #e5484d, #f59e0b);
box-shadow: 0 0 10px rgba(229, 72, 77, .35);
} .dmb-dm-avatar-block {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin: 0 0 4px;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.dmb-dm-avatar-block--inline {
align-items: flex-start;
}
.dmb-dm-avatar-wrap {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
background: none;
border: 0;
border-radius: 0;
} .dmb-dm-avatar {
display: block;
width: 60%;
max-width: 100%;
height: auto;
object-fit: contain;
object-position: center bottom;
margin: 0 auto;
-webkit-filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
transform-origin: 50% 100%;
will-change: transform, filter;
animation: dmb-viewer-avatar-idle 4.6s ease-in-out infinite;
}
.dmb-shell-viewer .dmb-viewer-sidebar .dmb-dm-avatar {
width: min(60cqi, 160px);
max-width: 100%;
max-height: min(34vh, 220px);
}
@keyframes dmb-viewer-avatar-idle {
0%,
100% {
transform: translateY(0) scale(1) rotate(-0.35deg);
-webkit-filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
50% {
transform: translateY(-3px) scale(1.018) rotate(0.35deg);
-webkit-filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.48));
filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.48));
}
}
@keyframes dmb-viewer-avatar-mystic {
0%,
100% {
transform: translateY(0) scale(1) rotate(-0.2deg);
-webkit-filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)) hue-rotate(0deg);
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)) hue-rotate(0deg);
}
50% {
transform: translateY(-4px) scale(1.022) rotate(0.2deg);
-webkit-filter: drop-shadow(0 6px 12px rgba(20, 32, 58, 0.52)) hue-rotate(6deg);
filter: drop-shadow(0 6px 12px rgba(20, 32, 58, 0.52)) hue-rotate(6deg);
}
}
@keyframes dmb-viewer-avatar-cartoon {
0%,
100% {
transform: translateY(0) scale(1) rotate(-0.55deg);
}
20% {
transform: translateY(-1px) scale(1.014) rotate(0.2deg);
}
50% {
transform: translateY(-3px) scale(1.03) rotate(0.65deg);
}
75% {
transform: translateY(-1px) scale(1.01) rotate(-0.1deg);
}
}
body.dmb-avatar-anim-idle .dmb-dm-avatar {
animation: dmb-viewer-avatar-idle 4.6s ease-in-out infinite;
}
body.dmb-avatar-anim-mystic .dmb-dm-avatar {
animation: dmb-viewer-avatar-mystic 5.4s ease-in-out infinite;
}
body.dmb-avatar-anim-cartoon .dmb-dm-avatar {
animation: dmb-viewer-avatar-cartoon 2.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.dmb-dm-avatar-caption {
margin: 0;
font-family: var(--dmb-font-heading);
font-size: 12px;
letter-spacing: 0.06em;
color: #e8e8e8;
text-align: center;
line-height: 1.35;
width: 100%;
}
.dmb-dm-avatar-block--inline .dmb-dm-avatar-caption {
text-align: left;
} .dmb-dm-avatar-block .dmb-dm-avatar-caption.dmb-viewer-author {
display: flex;
flex: none;
width: 100%;
justify-content: center;
margin-top: 4px;
}
.dmb-dm-avatar-block--inline .dmb-dm-avatar-caption.dmb-viewer-author {
justify-content: flex-start;
} .dmb-dm-hero {
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.dmb-dm-hero__stage {
position: relative;
display: inline-block;
max-width: 100%;
vertical-align: top;
}
.dmb-dm-speech {
min-width: 0;
margin: 0;
box-sizing: border-box;
}
.dmb-dm-hero--no-avatar .dmb-dm-speech {
width: 100%;
max-width: 100%;
margin-top: 0;
} .dmb-dm-hero--speech-float .dmb-dm-speech--from-avatar.dmb-dm-speech--collapsed {
width: auto;
}
.dmb-dm-hero--speech-float .dmb-dm-speech--from-avatar.dmb-dm-speech--expanded {
width: min(20rem, calc(100vw - 0.5rem - 0.5rem));
max-width: 92vw;
}
.dmb-dm-hero--speech-float .dmb-dm-speech--from-avatar {
position: absolute;
z-index: 50;
top: 0;
left: 100%;
margin-left: 0.5rem;
right: auto;
pointer-events: auto;
transform: translateY(-0.25rem);
} @supports (top: anchor(--dmb-dm-avatar top)) {
.dmb-bubble-uses-anchor .dmb-dm-avatar-wrap {
anchor-name: --dmb-dm-avatar;
}
.dmb-bubble-uses-anchor .dmb-dm-hero--speech-float .dmb-dm-speech--from-avatar {
position: fixed;
z-index: 50;
top: anchor(--dmb-dm-avatar top);
left: calc(anchor(--dmb-dm-avatar right) + 0.5rem);
margin-left: 0;
transform: translateY(0);
}
.dmb-bubble-uses-anchor .dmb-dm-hero--speech-float .dmb-dm-speech--from-avatar.dmb-dm-speech--collapsed {
width: auto;
}
.dmb-bubble-uses-anchor .dmb-dm-hero--speech-float .dmb-dm-speech--from-avatar.dmb-dm-speech--expanded {
width: min(20rem, calc(100vw - 0.5rem - 0.5rem));
max-width: 92vw;
}
}
.dmb-dm-speech__bubble {
position: relative;
background: linear-gradient(165deg, #fefefe 0%, #efe9e1 100%);
color: #1a1d24;
border-radius: 16px;
padding: 0;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.4) inset,
0 8px 22px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(0, 0, 0, 0.07);
} .dmb-dm-speech--from-avatar .dmb-dm-speech__bubble::before {
content: "";
position: absolute;
left: -7px;
width: 0;
height: 0;
border-style: solid;
border-width: 7px 8px 7px 0;
border-color: transparent #f0ebe4 transparent transparent;
filter: drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.04));
}
.dmb-dm-speech--from-avatar.dmb-dm-speech--collapsed .dmb-dm-speech__bubble::before {
top: 50%;
margin-top: -4px;
}
.dmb-dm-speech--from-avatar.dmb-dm-speech--expanded .dmb-dm-speech__bubble::before {
top: 20%;
margin-top: 2px;
}
.dmb-dm-speech__teaser {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 10px 14px;
width: 100%;
box-sizing: border-box;
font: inherit;
color: inherit;
background: transparent;
border: 0;
border-radius: 14px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s ease, transform 0.2s ease;
}
.dmb-dm-speech__teaser:hover {
background: rgba(0, 0, 0, 0.04);
}
.dmb-dm-speech__teaser:focus-visible {
outline: 2px solid #e5484d;
outline-offset: 2px;
}
.dmb-dm-speech--collapsed .dmb-dm-speech__teaser {
animation: dmb-dm-speech-teaser 2.4s ease-in-out infinite;
}
.dmb-dm-speech--expanded .dmb-dm-speech__teaser[hidden] {
display: none !important;
}
@keyframes dmb-dm-speech-teaser {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.04);
}
}
.dmb-dm-speech__dots {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.dmb-dm-speech--from-avatar .dmb-dm-speech__dots {
display: none;
}
.dmb-dm-speech--from-avatar .dmb-dm-speech__teaser::after {
content: "!";
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 14px;
height: 24px;
color: #16151b;
font-size: 28px;
font-weight: 900;
font-family: var(--dmb-font-heading);
font-style: italic;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 6px rgba(0, 0, 0, 0.35);
line-height: 1;
animation: dmb-viewer-exclaim-bob 1.15s ease-in-out infinite;
}
.dmb-dm-speech--from-avatar .dmb-dm-speech__teaser:hover::after,
.dmb-dm-speech--from-avatar .dmb-dm-speech__teaser:focus-visible::after {
animation-duration: 0.7s;
}
.dmb-dm-speech__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #3a3f48;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
animation: dmb-dm-speech-dot 1.1s ease-in-out infinite;
}
.dmb-dm-speech__dot:nth-child(2) {
animation-delay: 0.16s;
}
.dmb-dm-speech__dot:nth-child(3) {
animation-delay: 0.32s;
}
@keyframes dmb-dm-speech-dot {
0%,
100% {
opacity: 0.4;
transform: translateY(0);
}
50% {
opacity: 1;
transform: translateY(-3px);
}
}
@keyframes dmb-viewer-exclaim-bob {
0%,
100% {
transform: translateY(0) scale(1);
opacity: .95;
}
50% {
transform: translateY(-2px) scale(1.08);
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.dmb-dm-avatar {
animation: none;
transform: none;
}
.dmb-dm-speech--collapsed .dmb-dm-speech__teaser {
animation: none;
}
.dmb-dm-speech__dot {
animation: none;
opacity: 0.9;
}
.dmb-dm-speech--from-avatar .dmb-dm-speech__teaser::after {
animation: none;
}
.dmb-dm-speech--expanded .dmb-dm-speech__bubble {
animation: none;
}
}
.dmb-dm-speech__panel {
position: relative;
box-sizing: border-box;
}
.dmb-dm-speech--expanded .dmb-dm-speech__bubble {
animation: dmb-dm-speech-panel-in 320ms cubic-bezier(0.18, 0.88, 0.32, 1.28);
transform-origin: top left;
}
@keyframes dmb-dm-speech-panel-in {
0% {
opacity: 0;
transform: translateY(16px) scale(0.78) rotate(-1.2deg);
}
55% {
opacity: 1;
transform: translateY(-3px) scale(1.08) rotate(0.6deg);
}
78% {
transform: translateY(1px) scale(0.97) rotate(-0.3deg);
}
100% {
opacity: 1;
transform: translateY(0) scale(1) rotate(0deg);
}
}
.dmb-dm-speech--collapsed .dmb-dm-speech__panel[hidden] {
display: none !important;
}
.dmb-dm-speech__close {
position: absolute;
top: 6px;
right: 6px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
width: 30px;
height: 30px;
border: 0;
border-radius: 8px;
background: rgba(0, 0, 0, 0.07);
color: #2a2d35;
font: 600 1.15rem/1 var(--dmb-font-body);
line-height: 1;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s ease, color 0.15s ease;
}
.dmb-dm-speech__close:hover {
background: rgba(0, 0, 0, 0.12);
color: #101112;
}
.dmb-dm-speech__close:focus-visible {
outline: 2px solid #e5484d;
outline-offset: 1px;
}
.dmb-dm-speech--collapsed .dmb-dm-speech__bubble {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
min-width: 3.25rem;
min-height: 2.5rem;
}
.dmb-dm-hero--no-avatar .dmb-dm-speech--collapsed {
display: inline-flex;
justify-content: flex-start;
width: auto;
}
.dmb-dm-speech--expanded .dmb-dm-speech__bubble {
width: 100%;
min-width: min(20rem, 100%);
}
.dmb-dm-speech__text {
margin: 0;
padding: 2.15rem 13px 11px 13px;
font: 500 14px / 1.5 var(--dmb-font-body);
white-space: normal;
overflow-wrap: anywhere;
max-height: min(34vh, 280px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
}
.dmb-dm-hero--no-avatar .dmb-dm-speech__bubble {
border-radius: 14px;
} .dmb-viewer-header:has(.dmb-dm-hero--speech-float),
.dmb-viewer-details:has(.dmb-dm-hero--speech-float) {
overflow: visible;
}
.dmb-shell-viewer .dmb-viewer-sidebar:has(.dmb-dm-hero--speech-float) {
overflow-x: hidden;
overflow-y: auto;
}
.dmb-dm-hero:has(.dmb-dm-hero--speech-float) {
overflow: visible;
} .dmb-shell.dmb-shell-viewer:not(:has(> .dmb-viewer-layout)):has(.dmb-dm-hero--speech-float) {
overflow: visible;
} .dmb-viewer-layout:has(.dmb-dm-hero--speech-float) .dmb-viewer-main {
position: relative;
z-index: 0;
}
.dmb-viewer-layout:has(.dmb-dm-hero--speech-float) .dmb-viewer-sidebar--left {
position: relative;
z-index: 1;
}
.dmb-shell.dmb-shell-viewer:not(:has(> .dmb-viewer-layout)):has(.dmb-dm-hero--speech-float) .dmb-viewer-embed {
position: relative;
z-index: 0;
} .dmb-shell.dmb-shell-viewer:not(:has(> .dmb-viewer-layout)):has(.dmb-dm-hero--speech-float) .dmb-viewer-header {
position: relative !important;
z-index: 1;
}
.dmb-viewer-author {
flex: 0 0 auto;
margin: 2px 0 0;
font-family: var(--dmb-font-heading);
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
color: #d9d9d9;
opacity: .95;
display: inline-flex;
align-items: center;
gap: 8px;
}
.dmb-viewer-author::before {
content: "";
width: 18px;
height: 1px;
background: linear-gradient(90deg, #e5484d, #f59e0b);
opacity: .9;
}
.dmb-viewer-details-toggle {
width: 100%;
box-sizing: border-box;
}
.dmb-viewer-primary-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
width: 100%;
}
.dmb-shell-viewer .dmb-viewer-sidebar.is-details-open .dmb-share-quick {
display: none;
}
.dmb-shell-viewer .dmb-viewer-sidebar.is-details-open .dmb-viewer-primary-actions {
grid-template-columns: 1fr 1fr;
}
.dmb-share-quick.is-copied {
background: var(--dmb-color-success);
border-color: var(--dmb-color-success);
color: #ffffff;
}
@media (min-width: 701px) { .dmb-share-quick,
.dmb-viewer-details-toggle {
display: none !important;
}
.dmb-viewer-details {
display: grid !important;
}
}
@media (min-width: 1101px) { .dmb-viewer-minimap-toggle {
display: none !important;
}
.dmb-shell-viewer .dmb-viewer-sidebar {
overflow-x: hidden;
overflow-y: auto;
padding: 10px;
gap: 10px;
}
.dmb-shell-viewer .dmb-viewer-sidebar:has(.dmb-dm-hero--speech-float) {
overflow-x: hidden;
overflow-y: auto;
}
.dmb-viewer-header {
gap: 10px;
padding: 9px 10px;
}
.dmb-share {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
}
.dmb-share-copy {
width: auto;
min-width: 132px;
white-space: nowrap;
}
}
.dmb-viewer-details[hidden] {
display: none !important;
}
.dmb-viewer-details {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 8px 10px;
border: 1px solid var(--dmb-color-border);
border-radius: var(--dmb-radius-sm);
background: rgba(16, 17, 19, 0.75);
display: grid;
gap: 10px;
}
.dmb-viewer-details .dmb-dm-speech__text {
max-height: min(34vh, 280px);
}
.dmb-minimap-slot {
display: flex;
justify-content: center;
}
.dmb-viewer-minimap-toggle {
display: none;
}
.dmb-share {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: stretch;
flex: 0 0 auto;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.dmb-share-url {
width: 100%;
max-width: none;
padding: 8px 10px;
border: 1px solid var(--dmb-color-border);
border-radius: var(--dmb-radius-sm);
background: #101113;
color: var(--dmb-color-primary);
font: 400 var(--dmb-font-size-sm) / 1.3 var(--dmb-font-body);
box-sizing: border-box;
height: 40px;
min-height: 40px;
line-height: 1.2;
}
.dmb-share-url:focus {
outline: 2px solid var(--dmb-color-accent);
outline-offset: 1px;
border-color: var(--dmb-color-accent);
}
.dmb-share-copy.is-copied {
background: var(--dmb-color-success);
border-color: var(--dmb-color-success);
color: #ffffff;
}
.dmb-share-copy {
max-width: 100%;
width: 100%;
display: block;
box-sizing: border-box;
white-space: normal;
text-align: center;
padding: 8px 10px;
min-height: 40px;
line-height: 1.2;
font-size: 16px;
}
.dmb-debug-dock {
position: fixed;
left: 16px;
bottom: 16px;
z-index: 9999;
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
gap: 8px;
}
.dmb-debug-fab {
box-shadow: var(--dmb-shadow-md);
border-color: #4b4f58;
}
.dmb-debug-panel {
width: min(420px, calc(100vw - 32px));
max-height: min(68vh, 620px);
overflow: auto;
padding: 8px;
border: 1px solid var(--dmb-color-border);
border-radius: var(--dmb-radius-md);
background: #121315;
box-shadow: var(--dmb-shadow-md);
}
.dmb-debug-panel-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.dmb-debug-close {
margin-left: auto;
}
.dmb-debug-toggle-btn.is-active {
background: var(--dmb-color-accent);
color: #ffffff;
border-color: #bf3e42;
}
.dmb-mobile-audit {
margin-top: 8px;
font: 600 11px/1.35 var(--dmb-font-body);
letter-spacing: .02em;
color: var(--dmb-color-muted);
overflow-wrap: anywhere;
padding: 8px;
border: 1px solid var(--dmb-color-border);
border-radius: var(--dmb-radius-sm);
background: var(--dmb-color-surface);
}
.dmb-mobile-audit-head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
}
.dmb-mobile-audit-stats {
font: 600 11px/1.3 var(--dmb-font-body);
color: var(--dmb-color-muted);
}
.dmb-mobile-audit-actions {
margin-left: auto;
display: flex;
gap: 6px;
}
.dmb-mobile-audit-reset:disabled {
opacity: .5;
cursor: not-allowed;
}
.dmb-mobile-audit-list {
display: grid;
gap: 6px;
}
.dmb-mobile-audit-row {
text-align: left;
padding: 6px 8px;
border: 1px solid var(--dmb-color-border);
border-radius: var(--dmb-radius-sm);
background: var(--dmb-color-bg);
color: var(--dmb-color-primary);
font: 600 11px/1.35 var(--dmb-font-body);
cursor: pointer;
}
.dmb-mobile-audit-row.is-focused {
border-color: var(--dmb-color-accent);
background: var(--dmb-color-surface-alt);
}
.dmb-mobile-audit-row.is-warn {
border-left: 3px solid var(--dmb-color-error);
}
.dmb-mobile-audit-row.is-ok {
border-left: 3px solid var(--dmb-color-success);
}
.dmb-mobile-audit-export {
margin-top: 8px;
display: grid;
gap: 6px;
}
.dmb-mobile-audit-details {
border: 1px dashed var(--dmb-color-border);
border-radius: var(--dmb-radius-sm);
padding: 6px;
background: var(--dmb-color-bg);
}
.dmb-mobile-audit-details > summary {
cursor: pointer;
font: 600 11px/1.3 var(--dmb-font-body);
color: var(--dmb-color-primary);
}
.dmb-mobile-audit-textarea {
width: 100%;
min-height: 140px;
resize: vertical;
padding: 8px;
border: 1px solid var(--dmb-color-border);
border-radius: var(--dmb-radius-sm);
background: var(--dmb-color-bg);
color: var(--dmb-color-primary);
font: 400 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.dmb-mobile-audit-copy {
justify-self: start;
}
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.dmb-viewer-world {
display: block;
position: relative; }
.dmb-viewer-root.dmb-viewer--camera-anim { contain: layout;
}
.dmb-viewer-root {
background: var(--dmb-color-canvas);
border: 1px solid var(--dmb-color-canvas-border);
border-radius: var(--dmb-radius-md);
overflow: scroll;
padding: 8px;
max-width: 100%;
width: 100%;
height: 100%;
max-height: 100%;
box-sizing: border-box;
cursor: grab;
touch-action: none;
-webkit-user-select: none;
user-select: none;
overscroll-behavior: contain; scrollbar-width: auto;
scrollbar-color: var(--dmb-color-border) transparent;
scrollbar-gutter: stable both-edges;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
} body.dmb-shell-blank-viewer .dmb-viewer-root,
body.dmb-shell-blank-viewer .dmb-viewer-mapcell,
body.dmb-shell-blank-viewer .dmb-viewer-toolbar {
border-radius: 0;
}
body.dmb-shell-blank-viewer .dmb-shell-viewer,
body.dmb-shell-blank-viewer .dmb-viewer-layout,
body.dmb-shell-blank-viewer .dmb-viewer-sidebar,
body.dmb-shell-blank-viewer .dmb-viewer-header,
body.dmb-shell-blank-viewer .dmb-viewer-details,
body.dmb-shell-blank-viewer .dmb-viewer-right-sidebar__body {
border-radius: 0 !important;
} body.dmb-shell-blank-editor .dmb-builder-root,
body.dmb-shell-blank-editor .dmb-builder-sidebar,
body.dmb-shell-blank-editor .dmb-builder-meta-panel,
body.dmb-shell-blank-editor .dmb-viewer-header,
body.dmb-shell-blank-editor .dmb-viewer-details {
border-radius: 0 !important;
}
body.dmb-shell-blank-editor .dmb-builder-meta-panel .dmb-builder-inline,
body.dmb-shell-blank-editor .dmb-builder-meta-panel .dmb-builder-inline--title,
body.dmb-shell-blank-editor .dmb-builder-meta-panel .dmb-builder-inline--description {
border-radius: 0 !important;
} .dmb-viewer-stage .konvajs-content,
.dmb-viewer-stage canvas {
max-width: none !important;
height: auto !important;
}
.dmb-viewer-root.is-panning {
cursor: grabbing;
}
.dmb-viewer-root:focus-visible {
outline: 2px solid var(--dmb-color-accent);
outline-offset: 2px;
} .dmb-viewer-root::-webkit-scrollbar {
width: 14px;
height: 14px;
}
.dmb-viewer-root::-webkit-scrollbar-track {
background: rgba(0,0,0,.06);
}
.dmb-viewer-root::-webkit-scrollbar-thumb {
background-color: #9da3ad;
border-radius: 12px;
border: 2px solid var(--dmb-color-canvas);
min-height: 24px;
min-width: 24px;
}
.dmb-viewer-root::-webkit-scrollbar-thumb:hover {
background-color: #7f8794;
}
.dmb-viewer-root::-webkit-scrollbar-corner {
background: transparent;
}
.dmb-viewer-stage {
display: inline-block; isolation: isolate; pointer-events: none;
} .dmb-viewer-grid-overlay {
--dmb-viewer-cel: 90px;
box-sizing: border-box;
pointer-events: none;
z-index: 4; background-image:
linear-gradient(rgba(0, 0, 0, 0.28) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 0, 0, 0.28) 1px, transparent 1px),
linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: var(--dmb-viewer-cel) var(--dmb-viewer-cel);
opacity: 0;
transition: opacity 0.16s ease;
}
.dmb-viewer-grid-overlay.dmb-viewer-grid--on {
opacity: 0.9;
}
@media (prefers-reduced-motion: reduce) {
.dmb-viewer-grid-overlay {
transition: none;
}
} .dmb-viewer-toolbar {
position: relative;
z-index: 1;
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 6px 8px;
margin: 0;
background: #121315;
border-bottom: 1px solid var(--dmb-color-border-soft);
pointer-events: auto;
}
.dmb-viewer-toolbar__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
padding: 4px 6px;
border-radius: 8px;
background: rgba(32, 34, 38, 0.95);
border: 1px solid var(--dmb-color-border);
} .dmb-viewer-toolbar__sep {
display: inline-block;
width: 1px;
min-height: 1.1rem;
margin: 0 4px 0 2px;
background: var(--dmb-color-border);
flex-shrink: 0;
align-self: center;
opacity: 0.75;
}
.dmb-viewer-cam__btn {
min-width: 32px;
min-height: 32px;
padding: 0 6px;
font-size: 16px;
font-weight: 600;
line-height: 1;
}
.dmb-viewer-cam__btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.dmb-viewer-mapcell .dmb-btn-recenter-overlay {
position: absolute;
top: 12px;
right: 12px;
z-index: 12;
min-width: 44px;
min-height: 44px;
height: auto;
padding: 0 12px !important;
font-size: 13px;
line-height: 1;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
letter-spacing: 0;
word-spacing: 0;
text-indent: 0;
white-space: nowrap;
font-family: inherit;
}
.dmb-viewer-cam--fit,
.dmb-viewer-cam--reset {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 4px 8px;
}
.dmb-viewer-cam__pct {
font: 600 11px/1.2 var(--dmb-font-body);
color: var(--dmb-color-muted);
padding: 0 4px;
min-width: 3.2em;
text-align: center;
}
.dmb-btn.dmb-btn-ghost {
background: transparent;
border-color: var(--dmb-color-border);
color: var(--dmb-color-secondary);
font-size: 11px;
font-weight: 600;
}
.dmb-viewer-cam__help {
margin: 0;
padding: 6px 8px;
font: 500 12px/1.35 var(--dmb-font-body);
color: var(--dmb-color-primary);
border-radius: 6px;
background: rgba(16, 17, 19, 0.92);
border: 1px solid var(--dmb-color-border);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
max-width: min(100vw - 32px, 300px);
}
.dmb-viewer-cam__help--collapsed {
display: none;
}
.dmb-viewer-toolbar[hidden] {
display: none !important;
} .dmb-minimap {
position: relative;
right: auto;
bottom: auto;
z-index: auto;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
pointer-events: auto;
margin-top: auto;
align-self: center;
width: min(100%, 180px);
box-sizing: border-box;
}
.dmb-minimap__canvas {
width: 100%;
max-width: 180px;
height: auto;
aspect-ratio: 1 / 1;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.14);
background: #fff;
cursor: pointer;
touch-action: none;
}
@media (max-width: 1100px) {
.dmb-minimap {
padding: 6px;
margin-top: 8px;
}
.dmb-minimap__canvas {
width: 100%;
max-width: 140px;
height: auto;
}
} .dmb-notes-layer {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 10;
--dmb-note-boost: 1;
} .dmb-note-badge {
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
pointer-events: auto;
-webkit-user-select: none;
user-select: none;
z-index: 11;
}
.dmb-note-badge__mark {
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 30px;
margin: -15px 0 0 -15px;
border-radius: 50%;
border: 2.5px solid #fff8dc;
background:
radial-gradient(circle at 32% 28%,
#fffbeb 0%,
#fde047 28%,
#f59e0b 62%,
#b45309 100%);
color: #451a03;
font: italic 900 18px/1 Georgia, 'Times New Roman', serif;
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.55),
0 -1px 0 rgba(0, 0, 0, 0.3);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow:
0 0 0 2px rgba(69, 26, 3, 0.55),
0 0 0 5px rgba(250, 204, 21, 0.28),
0 0 14px 3px rgba(245, 158, 11, 0.65),
0 3px 8px rgba(0, 0, 0, 0.4);
transform: scale(var(--dmb-note-boost, 1)) translateY(0);
transform-origin: center center;
animation:
dmb-note-bob 1.9s ease-in-out infinite,
dmb-note-pulse 1.9s ease-in-out infinite;
}
.dmb-note-badge:hover .dmb-note-badge__mark,
.dmb-note-badge:focus-visible .dmb-note-badge__mark,
.dmb-note-badge.is-open .dmb-note-badge__mark {
animation: none;
transform: scale(calc(var(--dmb-note-boost, 1) * 1.16));
box-shadow:
0 0 0 2px rgba(69, 26, 3, 0.7),
0 0 0 6px rgba(254, 243, 199, 0.85),
0 0 22px 6px rgba(250, 204, 21, 0.95),
0 4px 10px rgba(0, 0, 0, 0.45);
}
.dmb-note-badge:focus-visible {
outline: none;
}
.dmb-note-badge:focus-visible .dmb-note-badge__mark {
outline: 2px solid #fef3c7;
outline-offset: 3px;
}
@keyframes dmb-note-bob {
0%, 100% { transform: scale(var(--dmb-note-boost, 1)) translateY(0); }
50%      { transform: scale(var(--dmb-note-boost, 1)) translateY(-4px); }
}
@keyframes dmb-note-pulse {
0%, 100% {
box-shadow:
0 0 0 2px rgba(69, 26, 3, 0.55),
0 0 0 5px rgba(250, 204, 21, 0.22),
0 0 12px 2px rgba(245, 158, 11, 0.55),
0 3px 8px rgba(0, 0, 0, 0.4);
}
50% {
box-shadow:
0 0 0 2px rgba(69, 26, 3, 0.65),
0 0 0 7px rgba(250, 204, 21, 0.4),
0 0 20px 5px rgba(245, 158, 11, 0.85),
0 3px 8px rgba(0, 0, 0, 0.45);
}
}
@media (prefers-reduced-motion: reduce) {
.dmb-note-badge__mark {
animation: none;
}
} .dmb-note-badge::after {
content: attr(data-note);
position: absolute;
top: calc(15px * var(--dmb-note-boost, 1) + 10px);
left: 50%;
transform: translateX(-50%);
max-width: min(300px, 70vw);
width: max-content;
padding: 10px 12px;
background:
linear-gradient(165deg, #2a2118 0%, #1a1510 100%);
color: #fff7ed;
font: 500 13px/1.45 var(--dmb-font-body, sans-serif);
letter-spacing: normal;
text-transform: none;
text-align: left;
white-space: normal;
border: 1px solid rgba(251, 191, 36, 0.35);
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
opacity: 0;
visibility: hidden;
transition: opacity 120ms ease, visibility 120ms ease;
pointer-events: none;
z-index: 12;
}
@media (hover: hover) and (pointer: fine) {
.dmb-note-badge:hover::after,
.dmb-note-badge:focus-visible::after {
opacity: 1;
visibility: visible;
}
} .dmb-note-popover {
position: absolute;
z-index: 20;
max-width: min(320px, 78vw);
min-width: min(200px, 70vw);
padding: 12px 14px 13px;
background:
radial-gradient(ellipse 80% 60% at 0% 0%, rgba(251, 191, 36, 0.16), transparent 55%),
linear-gradient(165deg, #2c2319 0%, #17130f 100%);
color: #fff7ed;
font: 500 14px/1.5 var(--dmb-font-body, sans-serif);
text-align: left;
border: 1px solid rgba(251, 191, 36, 0.4);
border-radius: 12px;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.35),
0 14px 36px rgba(0, 0, 0, 0.4);
pointer-events: auto;
}
.dmb-note-popover__eyebrow {
margin: 0 0 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #fbbf24;
}
.dmb-note-popover__text {
margin: 0;
font-family: var(--dmb-font-heading, Georgia, serif);
font-size: 15px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.01em;
color: #fffaf0;
}
.dmb-note-popover:empty,
.dmb-note-popover[hidden] {
display: none !important;
}
.dmb-note-badge.is-open {
z-index: 19;
}
.dmb-note-badge.is-open::after {
opacity: 0 !important;
visibility: hidden !important;
content: none !important;
}
@media (max-width: 700px) {
.dmb-note-badge__mark {
width: 36px;
height: 36px;
margin: -18px 0 0 -18px;
font-size: 21px;
border-width: 3px;
}
.dmb-note-popover {
max-width: min(340px, 86vw);
padding: 14px 16px 15px;
}
.dmb-note-popover__text {
font-size: 16px;
line-height: 1.45;
}
} .dmb-list-page {
--dmb-list-ink: #14161a;
--dmb-list-muted: #5c6470;
--dmb-list-line: rgba(20, 22, 26, 0.12);
--dmb-list-warm: #c45c26;
max-width: 1180px;
margin: 0 auto;
padding: 28px 20px 64px;
box-sizing: border-box;
font-family: var(--dmb-font-body);
color: var(--dmb-list-ink);
background:
radial-gradient(ellipse 80% 50% at 0% 0%, rgba(196, 92, 38, 0.08), transparent 55%),
radial-gradient(ellipse 60% 40% at 100% 8%, rgba(20, 22, 26, 0.05), transparent 50%),
linear-gradient(180deg, #f3f1ed 0%, #faf9f7 42%, #ffffff 100%);
min-height: 70vh;
}
.dmb-list-hero {
margin: 0 0 28px;
padding-bottom: 22px;
border-bottom: 1px solid var(--dmb-list-line); background: transparent !important;
box-shadow: none !important;
}
.dmb-list-hero__eyebrow {
margin: 0 0 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--dmb-list-warm);
}
.dmb-list-hero__row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 16px 24px;
}
.dmb-list-hero__copy {
flex: 1 1 280px;
min-width: 0;
}
.dmb-list-page .dmb-list-hero h1 {
margin: 0 0 8px;
font-family: var(--dmb-font-heading);
font-size: clamp(28px, 4.5vw, 42px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--dmb-list-ink);
}
.dmb-list-hero__lead {
margin: 0;
max-width: 36rem;
font-size: 15px;
line-height: 1.5;
color: var(--dmb-list-muted);
}
.dmb-list-create {
margin: 0;
flex: 0 0 auto;
}
.dmb-list-create .dmb-btn-primary {
min-height: 44px;
padding: 0 18px;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(20, 22, 26, 0.16);
}
.dmb-engage-btn--icon {
position: relative;
min-height: 44px;
min-width: 44px;
}
.dmb-engage-btn--icon .dmb-engage-btn__label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.dmb-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 22px;
margin: 8px 0 0;
}
.dmb-list-card {
background: #fff;
border: 1px solid var(--dmb-list-line, rgba(20, 22, 26, 0.12));
border-radius: 14px;
padding: 0; overflow: visible;
transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
display: flex;
flex-direction: column;
box-shadow: 0 10px 28px rgba(20, 22, 26, 0.06);
} .dmb-list-card__body {
overflow: visible;
}
.dmb-list-card__actions {
overflow: visible;
}
.dmb-list-card:hover {
border-color: rgba(20, 22, 26, 0.28);
transform: translateY(-3px);
box-shadow: 0 16px 36px rgba(20, 22, 26, 0.12);
}
.dmb-list-card__cover {
display: block;
aspect-ratio: 16 / 10;
background:
radial-gradient(circle at 20% 20%, rgba(196, 92, 38, 0.12), transparent 40%),
linear-gradient(145deg, #e7e4de 0%, #d4d0c8 100%);
overflow: hidden;
position: relative;
}
.dmb-list-card__cover::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 42%;
background: linear-gradient(180deg, transparent, rgba(20, 22, 26, 0.18));
pointer-events: none;
}
.dmb-challenge-panel {
margin-top: 12px;
padding: 14px 14px 12px;
border: 1px solid rgba(251, 191, 36, 0.35);
border-radius: var(--dmb-radius-md);
background:
linear-gradient(160deg, rgba(251, 191, 36, 0.14) 0%, rgba(15, 23, 42, 0.35) 55%),
rgba(15, 23, 42, 0.45);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.dmb-challenge-panel__eyebrow {
margin: 0 0 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fbbf24;
}
.dmb-challenge-panel__title {
margin: 0 0 6px;
font-family: var(--dmb-font-heading);
font-size: var(--dmb-font-size-lg);
font-weight: 700;
line-height: 1.2;
color: #fff7ed;
}
.dmb-challenge-panel__desc {
margin: 0 0 8px;
font-size: 13px;
line-height: 1.4;
color: rgba(248, 250, 252, 0.78);
}
.dmb-challenge-panel__pos {
margin: 0 0 10px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
color: #fde68a;
}
.dmb-challenge-panel__nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 10px;
}
.dmb-challenge-panel__nav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
min-height: 38px;
text-decoration: none;
font-size: 13px;
}
.dmb-challenge-panel__all {
margin: 0;
font-size: 12px;
}
.dmb-challenge-panel__all a {
color: #fde68a;
text-decoration: underline;
text-underline-offset: 2px;
}
.dmb-challenge-panel__all a:hover,
.dmb-challenge-panel__all a:focus-visible {
color: #fff;
}
.dmb-challenge-vote {
margin: 0 0 12px;
padding: 12px;
border-radius: var(--dmb-radius-sm);
border: 1px solid rgba(251, 191, 36, 0.28);
background: rgba(15, 23, 42, 0.35);
}
.dmb-challenge-vote__count {
margin: 0 0 10px;
font-size: 13px;
font-weight: 700;
color: #fde68a;
}
.dmb-challenge-vote__btn {
width: 100%;
min-height: 40px;
}
.dmb-challenge-vote__btn.is-active {
background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
border-color: #b45309;
color: #1c1917;
}
.dmb-challenge-vote__hint {
margin: 8px 0 0;
font-size: 12px;
line-height: 1.4;
color: rgba(248, 250, 252, 0.78);
}
.dmb-challenge-vote__hint a {
color: #fde68a;
}
.dmb-challenge-vote__remove {
display: inline-block;
margin-top: 8px;
padding: 0;
border: 0;
background: transparent;
color: rgba(248, 250, 252, 0.65);
font-size: 12px;
text-decoration: underline;
cursor: pointer;
}
.dmb-challenge-vote__remove:hover,
.dmb-challenge-vote__remove:focus-visible {
color: #fff;
}
.dmb-challenge-vote__rules,
.dmb-challenge-vote__closed {
margin: 8px 0 0;
font-size: 11px;
letter-spacing: 0.02em;
color: rgba(248, 250, 252, 0.55);
}
.dmb-challenge-vote__closed {
font-weight: 700;
color: #fbbf24;
}
.dmb-list-card__vote-badge {
position: absolute;
right: 10px;
top: 10px;
z-index: 2;
display: inline-flex;
align-items: baseline;
gap: 5px;
padding: 6px 10px 5px;
border-radius: 999px;
background: rgba(28, 25, 23, 0.88);
border: 1px solid rgba(251, 191, 36, 0.45);
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.28);
color: #fff7ed;
line-height: 1;
pointer-events: none;
}
.dmb-list-card__vote-badge-count {
font-size: 16px;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: #fbbf24;
}
.dmb-list-card__vote-badge-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 247, 237, 0.82);
}
.dmb-list-card__actions {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 12px;
}
.dmb-list-card__open {
margin-left: auto;
min-height: 40px;
padding: 0 14px;
font-size: 13px;
font-weight: 600;
border-radius: 10px;
text-decoration: none;
}
.dmb-list-tabs {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
margin: 18px 0 16px;
padding: 4px;
border-radius: 12px;
background: rgba(20, 22, 26, 0.05);
border: 1px solid var(--dmb-list-line, rgba(20, 22, 26, 0.12));
}
.dmb-list-tabs__tab {
display: inline-flex;
align-items: center;
padding: 8px 14px;
border: 0;
border-radius: 9px;
text-decoration: none;
color: var(--dmb-list-muted, #5c6470);
font-size: 13px;
font-weight: 500;
background: transparent;
transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.dmb-list-tabs__tab:hover {
color: var(--dmb-list-ink, #14161a);
}
.dmb-list-tabs__tab.is-active,
.dmb-list-tabs__tab[aria-current="page"] {
color: #fff;
background: #14161a;
font-weight: 600;
box-shadow: 0 4px 12px rgba(20, 22, 26, 0.2);
}
.dmb-challenge-banner {
margin: 0 0 8px;
padding: 10px 14px 8px;
border: 1px solid rgba(194, 65, 12, 0.22);
border-radius: 12px;
background:
radial-gradient(ellipse 70% 80% at 100% 0%, rgba(251, 146, 60, 0.22), transparent 55%),
linear-gradient(135deg, #1c1917 0%, #292524 55%, #1f1a17 100%);
color: #fff7ed;
box-shadow: 0 8px 22px rgba(28, 25, 23, 0.14);
}
.dmb-challenge-banner__row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 8px 16px;
}
.dmb-challenge-banner__main {
flex: 1 1 12rem;
min-width: 0;
}
.dmb-challenge-banner__eyebrow {
margin: 0 0 2px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #fdba74;
line-height: 1.2;
}
.dmb-challenge-banner__title {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
margin: 0;
padding: 0;
border: 0;
background: transparent;
font-family: var(--dmb-font-heading);
font-size: clamp(15px, 2vw, 18px);
font-weight: 700;
line-height: 1.25;
color: #fff7ed;
text-align: left;
cursor: pointer;
}
.dmb-challenge-banner__title:hover,
.dmb-challenge-banner__title:focus-visible {
color: #ffedd5;
}
.dmb-challenge-banner__title:focus-visible {
outline: 2px solid #fdba74;
outline-offset: 2px;
border-radius: 4px;
}
.dmb-challenge-banner__title--static {
display: block;
cursor: default;
}
.dmb-challenge-banner__title-text {
min-width: 0;
}
.dmb-challenge-banner__chevron {
flex: 0 0 auto;
width: 0.55em;
height: 0.55em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
opacity: 0.75;
transition: transform 160ms ease;
}
.dmb-challenge-banner__title[aria-expanded="true"] .dmb-challenge-banner__chevron {
transform: rotate(225deg);
margin-top: 0.2em;
}
.dmb-challenge-banner__desc {
margin: 6px 0 0;
max-width: 40rem;
font-size: 13px;
line-height: 1.4;
color: rgba(255, 247, 237, 0.78);
}
.dmb-challenge-banner__desc[hidden] {
display: none !important;
}
.dmb-challenge-banner__actions {
margin: 0;
flex: 0 0 auto;
}
.dmb-challenge-banner__actions .dmb-btn-secondary {
padding: 6px 12px;
font-size: 13px;
border-color: rgba(253, 186, 116, 0.45);
color: #fff7ed;
background: rgba(255, 247, 237, 0.08);
}
.dmb-challenge-banner__actions .dmb-btn-secondary:hover,
.dmb-challenge-banner__actions .dmb-btn-secondary:focus-visible {
background: rgba(255, 247, 237, 0.16);
border-color: #fdba74;
color: #fff;
}
.dmb-challenge-banner__vote-hint {
margin: 6px 0 0;
font-size: 11px;
line-height: 1.3;
color: rgba(255, 247, 237, 0.65);
}
.dmb-list-filter-note {
font-size: var(--dmb-font-size-sm);
color: var(--dmb-list-muted, #5c6470);
margin: 12px 0 0;
}
.dmb-list-filter-note--challenge {
padding: 10px 12px;
border: 1px solid var(--dmb-color-border, #d5dde8);
border-radius: var(--dmb-radius-md, 8px);
background: var(--dmb-color-bg, #fff);
}
.dmb-list-filter-note--challenge p {
margin: 0;
}
.dmb-list-filter-note__vote {
margin-top: 6px !important;
font-size: 12px;
}
.dmb-list-filter-note a {
margin-left: 8px;
}
.dmb-engage-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 42px;
padding: 8px 14px;
border-width: 2px;
font-weight: 600;
letter-spacing: 0.01em;
transition:
transform 0.15s ease,
box-shadow 0.15s ease,
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}
.dmb-engage-btn__icon {
display: inline-flex;
width: 1.15em;
height: 1.15em;
flex: 0 0 auto;
line-height: 0;
}
.dmb-engage-btn__icon svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.dmb-engage-btn__label {
line-height: 1.1;
}
.dmb-engage-btn__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.6em;
padding: 2px 7px;
border-radius: 999px;
font-size: 0.85em;
font-weight: 700;
line-height: 1.2;
background: rgba(15, 23, 42, 0.08);
}
.dmb-engage-btn--like {
border-color: #fb7185;
color: #9f1239;
background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%);
box-shadow: 0 2px 0 rgba(244, 63, 94, 0.18);
}
.dmb-engage-btn--like .dmb-engage-btn__icon {
color: #e11d48;
}
.dmb-engage-btn--like:hover,
.dmb-engage-btn--like:focus-visible {
transform: translateY(-1px);
border-color: #e11d48;
background: linear-gradient(180deg, #ffe4e6 0%, #fecdd3 100%);
box-shadow: 0 4px 12px rgba(244, 63, 94, 0.22);
}
.dmb-engage-btn--like.is-active {
border-color: #be123c;
color: #fff;
background: linear-gradient(180deg, #fb7185 0%, #e11d48 100%);
box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35);
}
.dmb-engage-btn--like.is-active .dmb-engage-btn__icon {
color: #fff;
animation: dmb-engage-pop 0.35s ease;
}
.dmb-engage-btn--like.is-active .dmb-engage-btn__count {
background: rgba(255, 255, 255, 0.22);
color: #fff;
}
.dmb-engage-btn--favorite {
border-color: #fbbf24;
color: #92400e;
background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
box-shadow: 0 2px 0 rgba(245, 158, 11, 0.2);
}
.dmb-engage-btn--favorite .dmb-engage-btn__icon {
color: #d97706;
}
.dmb-engage-btn--favorite:hover,
.dmb-engage-btn--favorite:focus-visible {
transform: translateY(-1px);
border-color: #f59e0b;
background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}
.dmb-engage-btn--favorite.is-active {
border-color: #b45309;
color: #78350f;
background: linear-gradient(180deg, #fde68a 0%, #fbbf24 100%);
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}
.dmb-engage-btn--favorite.is-active .dmb-engage-btn__icon {
color: #b45309;
animation: dmb-engage-pop 0.35s ease;
}
@keyframes dmb-engage-pop {
0% { transform: scale(1); }
40% { transform: scale(1.28); }
100% { transform: scale(1); }
}
.dmb-list-card__actions .dmb-engage-btn {
flex: 0 0 auto;
}
.dmb-list-card__actions .dmb-engage-btn--icon {
flex: 0 0 auto;
position: relative;
width: 42px;
min-width: 42px;
max-width: 42px;
min-height: 42px;
height: 42px;
padding: 0 !important;
gap: 0 !important;
border-radius: 10px;
border-width: 1px;
box-shadow: none;
overflow: visible;
}
.dmb-list-card__actions .dmb-engage-btn--icon .dmb-engage-btn__count {
position: absolute;
top: -5px;
right: -5px;
min-width: 1.15em;
padding: 1px 4px;
font-size: 10px;
line-height: 1.2;
border-radius: 999px;
pointer-events: none;
z-index: 1;
background: #fff;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}
.dmb-list-card__actions .dmb-engage-btn--like.is-active .dmb-engage-btn__count {
background: rgba(255, 255, 255, 0.95);
color: #be123c;
}
.dmb-viewer-primary-actions .dmb-engage-btn {
width: 100%;
}
.dmb-list-empty {
margin: 8px 0 0;
color: var(--dmb-list-muted, #5c6470);
}
.dmb-list-card__preview {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 280ms ease;
}
.dmb-list-card:hover .dmb-list-card__preview {
transform: scale(1.03);
}
.dmb-list-card__preview--empty {
min-height: 100%;
background:
radial-gradient(circle at 30% 40%, rgba(71, 85, 105, 0.12), transparent 45%),
linear-gradient(145deg, #e7e4de 0%, #d4d0c8 100%);
}
.dmb-list-card__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 14px 16px 16px;
gap: 6px;
min-width: 0;
}
.dmb-list-card h3 {
margin: 0;
font-family: var(--dmb-font-heading);
font-size: 17px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--dmb-list-ink, #14161a);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dmb-list-card a {
color: inherit;
text-decoration: none;
transition: color 160ms ease;
}
.dmb-list-card h3 a:hover,
.dmb-list-card h3 a:focus-visible {
color: var(--dmb-list-warm, #c45c26);
}
.dmb-list-meta {
font-size: 12px;
color: var(--dmb-list-muted, #5c6470);
letter-spacing: 0.02em;
text-transform: none;
margin: 0;
line-height: 1.4;
}
@media (max-width: 700px) {
.dmb-list-page {
padding: 18px 14px 48px;
}
.dmb-list-hero__row {
align-items: stretch;
}
.dmb-list-create .dmb-btn-primary {
width: 100%;
justify-content: center;
}
.dmb-list {
grid-template-columns: 1fr;
gap: 16px;
}
} .dmb-viewer-tuto {
position: fixed;
inset: 0;
z-index: 10050;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
}
body.dmb-tuto-open {
overflow: hidden;
}
.dmb-viewer-tuto__card {
width: min(100%, 400px);
padding: 16px 18px 14px;
border-radius: var(--dmb-radius-md);
background: #121315;
border: 1px solid var(--dmb-color-border);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.dmb-viewer-tuto__title {
margin: 0 0 10px;
font: 600 16px/1.25 var(--dmb-font-heading);
color: var(--dmb-color-primary);
}
.dmb-viewer-tuto__text {
margin: 0 0 14px;
color: #e4e4e4;
font: 500 14px/1.45 var(--dmb-font-body);
}
.dmb-viewer-tuto__bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
.dmb-viewer-tuto__bar .dmb-btn:focus-visible {
outline: 2px solid var(--dmb-color-accent);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.dmb-list-card,
.dmb-dm-speech__teaser,
.dmb-note-badge::after,
.dmb-engage-btn,
.dmb-engage-btn--like.is-active .dmb-engage-btn__icon,
.dmb-engage-btn--favorite.is-active .dmb-engage-btn__icon {
transition: none !important;
animation: none !important;
}
} @media (max-width: 700px) { html:has(.dmb-shell-viewer),
html:has(.dmb-shell-editor),
body:has(.dmb-shell-viewer),
body:has(.dmb-shell-editor) {
height: 100% !important;
overflow: hidden !important;
margin: 0 !important;
}
body:has(.dmb-shell-viewer) .skip-links,
body:has(.dmb-shell-editor) .skip-links,
body:has(.dmb-shell-viewer) .wp-site-blocks,
body:has(.dmb-shell-editor) .wp-site-blocks {
display: none !important;
}
.dmb-shell-viewer,
.dmb-shell-editor,
body.dmb-shell-blank-viewer .dmb-shell-viewer,
body.dmb-shell-blank-editor .dmb-shell-editor {
height: calc(100vh - var(--dmb-admin-offset, 0px));
height: calc(100svh - var(--dmb-admin-offset, 0px));
height: calc(100dvh - var(--dmb-admin-offset, 0px));
min-height: calc(100vh - var(--dmb-admin-offset, 0px));
min-height: calc(100svh - var(--dmb-admin-offset, 0px));
min-height: calc(100dvh - var(--dmb-admin-offset, 0px));
max-height: calc(100dvh - var(--dmb-admin-offset, 0px));
overflow: hidden;
margin-top: var(--dmb-admin-offset, 0px);
}
.dmb-shell-viewer .dmb-viewer-layout {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
gap: 0;
height: 100%;
min-height: 100%;
} .dmb-shell-viewer .dmb-viewer-main,
.dmb-shell-viewer .dmb-viewer-sidebar--left,
.dmb-shell-viewer .dmb-viewer-sidebar--right {
grid-column: 1;
grid-row: 1;
}
.dmb-shell-viewer .dmb-viewer-main {
min-height: 0;
height: 100%;
box-sizing: border-box;
padding: 0;
padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}
.dmb-shell-viewer .dmb-viewer-container {
min-height: 0;
} .dmb-viewer-toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 14;
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
padding: 8px;
padding-top: calc(8px + env(safe-area-inset-top, 0px));
background: linear-gradient(180deg, rgba(10, 11, 12, 0.88) 0%, rgba(10, 11, 12, 0.35) 72%, transparent 100%);
border-bottom: 0;
pointer-events: none;
}
.dmb-viewer-toolbar > * {
pointer-events: auto;
}
.dmb-viewer-map-actions {
position: static;
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 4px;
padding: 0;
flex: 0 0 auto;
z-index: auto;
}
.dmb-viewer-toolbar__inner {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: 4px;
padding: 3px;
width: auto;
max-width: 100%;
overflow: hidden;
background: rgba(22, 23, 26, 0.94);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.dmb-viewer-toolbar__sep,
.dmb-viewer-cam__pct,
.dmb-viewer-cam--help,
.dmb-viewer-cam--fit,
.dmb-viewer-cam--reset,
.dmb-viewer-grid-toggle,
.dmb-viewer-btn-speed,
.dmb-viewer-btn-story {
display: none !important;
}
.dmb-viewer-cam__btn,
.dmb-viewer-mobile-tools .dmb-viewer-btn-pause,
.dmb-viewer-minimap-toggle,
.dmb-viewer-right-sidebar-toggle,
.dmb-viewer-mapcell .dmb-btn-recenter-overlay,
.dmb-viewer-toolbar .dmb-btn-recenter-overlay {
min-width: 40px;
min-height: 40px;
padding: 0 8px;
font-size: 15px;
line-height: 1;
border-radius: 10px;
box-shadow: none;
}
.dmb-viewer-minimap-toggle,
.dmb-viewer-right-sidebar-toggle {
display: inline-flex;
position: static;
background: rgba(22, 23, 26, 0.94);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.dmb-viewer-minimap-toggle {
font-size: 12px;
font-weight: 600;
padding: 0 10px;
}
.dmb-viewer-minimap-toggle.is-active,
.dmb-viewer-right-sidebar-toggle.is-active {
background: var(--dmb-color-accent);
border-color: #bf3e42;
color: #ffffff;
}
.dmb-viewer-mapcell .dmb-btn-recenter-overlay,
.dmb-viewer-toolbar .dmb-btn-recenter-overlay {
position: static;
margin-left: 0;
background: rgba(22, 23, 26, 0.94) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
color: #f2f2f2 !important;
font-size: 16px !important;
font-weight: 600;
}
.dmb-viewer-mapcell {
position: relative;
} .dmb-shell-viewer .dmb-viewer-sidebar--left {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: auto;
height: auto;
max-height: none;
z-index: 30;
order: unset;
border-right: 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 0;
padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
background: rgba(16, 17, 19, 0.97);
overflow-x: hidden;
overflow-y: hidden;
box-sizing: border-box;
width: 100%;
max-width: 100%;
box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.4);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
} .dmb-shell-viewer .dmb-viewer-sidebar--left .dmb-viewer-header,
.dmb-shell-viewer .dmb-viewer-sidebar--left .dmb-viewer-header > * {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
box-sizing: border-box;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left:not(.is-details-open) .dmb-viewer-header {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
gap: 6px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
border-radius: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left:not(.is-details-open) .dmb-viewer-header h1 {
flex: 0 0 auto;
min-width: 0;
width: 100%;
max-width: 100%;
margin: 0;
padding-left: 10px;
font-size: 12px;
line-height: 1.3;
letter-spacing: 0.02em;
font-weight: 600;
text-transform: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: normal;
box-sizing: border-box;
color: rgba(248, 248, 248, 0.92);
}
.dmb-shell-viewer .dmb-viewer-sidebar--left:not(.is-details-open) .dmb-viewer-header h1::before {
width: 4px;
height: 60%;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left:not(.is-details-open) .dmb-viewer-primary-actions {
flex: 0 0 auto;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: 10px;
width: 100% !important;
max-width: 100%;
box-sizing: border-box;
overflow: visible;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left:not(.is-details-open) .dmb-share-quick {
display: none !important;
} .dmb-shell-viewer .dmb-viewer-sidebar--left:not(.is-details-open) .dmb-viewer-primary-actions .dmb-btn,
.dmb-shell-viewer .dmb-viewer-sidebar--left:not(.is-details-open) .dmb-viewer-primary-actions .dmb-engage-btn {
flex: 0 0 auto;
position: relative;
width: 44px !important;
min-width: 44px;
max-width: 44px;
min-height: 40px;
height: 40px;
padding: 0 !important;
gap: 0;
font-size: 12px;
border-radius: 10px;
border-width: 1px;
box-shadow: none;
transform: none;
box-sizing: border-box;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left:not(.is-details-open) .dmb-engage-btn__icon {
width: 1.25em;
height: 1.25em;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left:not(.is-details-open) .dmb-engage-btn__label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left:not(.is-details-open) .dmb-engage-btn__count {
position: absolute;
top: 2px;
right: 2px;
min-width: 1.1em;
padding: 1px 3px;
font-size: 9px;
line-height: 1.2;
border-radius: 999px;
pointer-events: none;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left:not(.is-details-open) .dmb-viewer-primary-actions .dmb-viewer-details-toggle {
width: auto !important;
min-width: 44px;
max-width: none !important;
padding: 0 12px !important;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left:not(.is-details-open):not(.is-details-animating) .dmb-challenge-panel,
.dmb-shell-viewer .dmb-viewer-sidebar--left:not(.is-details-open):not(.is-details-animating) .dmb-viewer-details,
.dmb-shell-viewer .dmb-viewer-sidebar--left:not(.is-details-open):not(.is-details-animating) .dmb-share,
.dmb-shell-viewer .dmb-viewer-sidebar--left:not(.is-details-open):not(.is-details-animating) .dmb-viewer-author {
display: none !important;
} .dmb-shell-viewer .dmb-viewer-sidebar--left {
max-height: calc(88px + env(safe-area-inset-bottom, 0px));
overflow: hidden;
transition:
max-height 320ms cubic-bezier(0.22, 1, 0.36, 1),
padding 280ms ease,
border-radius 280ms ease,
box-shadow 280ms ease;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open,
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-animating {
overflow: hidden;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open {
max-height: min(72dvh, 72vh);
overflow-x: hidden;
overflow-y: auto;
border-radius: 14px 14px 0 0;
padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
z-index: 36;
box-shadow: 0 -14px 36px rgba(0, 0, 0, 0.45);
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-animating .dmb-challenge-panel,
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-animating .dmb-viewer-details,
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-animating .dmb-share,
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-animating .dmb-viewer-author,
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-challenge-panel,
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-viewer-details,
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-share,
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-viewer-author {
opacity: 1;
transform: translateY(0);
transition:
opacity 220ms ease 60ms,
transform 280ms cubic-bezier(0.22, 1, 0.36, 1) 40ms;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-animating:not(.is-details-open) .dmb-challenge-panel,
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-animating:not(.is-details-open) .dmb-viewer-details,
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-animating:not(.is-details-open) .dmb-share,
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-animating:not(.is-details-open) .dmb-viewer-author {
opacity: 0;
transform: translateY(10px);
transition-duration: 160ms;
transition-delay: 0ms;
}
@media (prefers-reduced-motion: reduce) {
.dmb-shell-viewer .dmb-viewer-sidebar--left,
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-animating .dmb-challenge-panel,
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-animating .dmb-viewer-details,
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-animating .dmb-share,
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-animating .dmb-viewer-author,
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-challenge-panel,
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-viewer-details,
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-share,
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-viewer-author {
transition: none !important;
}
} .dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open::before {
content: "";
display: block;
width: 36px;
height: 4px;
margin: 0 auto 10px;
border-radius: 99px;
background: rgba(255, 255, 255, 0.28);
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-viewer-header {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-viewer-header h1 {
width: 100%;
margin: 0;
padding-left: 10px;
font-size: 15px;
line-height: 1.25;
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-viewer-header h1::before {
width: 4px;
height: 65%;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-viewer-primary-actions {
display: flex !important;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: 10px;
width: 100% !important;
max-width: 100%;
box-sizing: border-box;
grid-template-columns: none !important;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-share-quick {
display: none !important;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-viewer-primary-actions .dmb-engage-btn {
flex: 0 0 auto;
width: auto !important;
min-width: 0;
min-height: 40px;
height: 40px;
padding: 0 10px !important;
gap: 6px;
font-size: 12px;
border-radius: 10px;
border-width: 1px;
box-shadow: none;
box-sizing: border-box;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-engage-btn__label {
position: static;
width: auto;
height: auto;
clip: auto;
overflow: visible;
white-space: nowrap;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-engage-btn__count {
position: static;
min-width: 1.2em;
padding: 1px 5px;
font-size: 11px;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-viewer-primary-actions .dmb-viewer-details-toggle {
flex: 0 0 auto;
width: auto !important;
min-width: 72px;
min-height: 40px;
height: 40px;
padding: 0 12px !important;
font-size: 12px;
font-weight: 600;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-challenge-panel {
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-top: 0;
padding: 10px 12px;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-challenge-panel__title {
font-size: 15px;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-viewer-details {
padding: 10px;
gap: 8px;
border-radius: 10px;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-minimap-slot {
display: none !important;
} .dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-dm-hero--speech-float .dmb-dm-speech--from-avatar {
position: static !important;
left: auto !important;
top: auto !important;
transform: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 8px 0 0 !important;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-dm-hero__stage {
display: block;
width: 100%;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-dm-speech__teaser {
display: none !important;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-dm-speech__panel,
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-dm-speech__panel[hidden] {
display: block !important;
position: static;
padding: 0;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-dm-speech__close {
display: none !important;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-dm-speech__text {
max-height: none;
font-size: 13px;
line-height: 1.45;
color: rgba(248, 248, 248, 0.9);
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-share {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-share-url,
.dmb-shell-viewer .dmb-viewer-sidebar--left.is-details-open .dmb-share-copy {
min-height: 36px;
font-size: 13px;
}
.dmb-shell-viewer .dmb-viewer-sidebar--right {
position: fixed !important;
top: var(--dmb-admin-offset, 0);
right: 0;
height: calc(100vh - var(--dmb-admin-offset, 0));
height: calc(100svh - var(--dmb-admin-offset, 0));
height: calc(100dvh - var(--dmb-admin-offset, 0));
width: min(86vw, 320px);
max-width: 320px;
z-index: 40;
padding: 10px;
transform: translateX(100%);
transition: transform 180ms ease;
border-left: 1px solid var(--dmb-color-border-soft);
border-right: 0;
box-shadow: -10px 0 28px rgba(0, 0, 0, 0.4);
}
.dmb-shell-viewer.is-right-sidebar-open .dmb-viewer-sidebar--right {
transform: translateX(0);
}
.dmb-viewer-right-sidebar-backdrop {
position: fixed;
inset: var(--dmb-admin-offset, 0) 0 0 0;
background: rgba(0, 0, 0, 0.4);
z-index: 35;
}
.dmb-dm-speech__text {
font-size: 14px;
line-height: 1.45;
max-height: min(28vh, 180px);
}
.dmb-viewer-details .dmb-dm-speech__text {
max-height: min(18vh, 130px);
}
.dmb-share {
gap: 6px;
}
.dmb-share-url,
.dmb-share-copy {
min-height: 36px;
font-size: 14px;
}
.dmb-minimap {
width: min(100%, 132px);
}
.dmb-minimap__canvas {
max-width: 132px;
}
.dmb-viewer-mapcell > .dmb-minimap,
.dmb-shell-viewer > .dmb-minimap,
.dmb-viewer-root .dmb-minimap {
display: none !important;
position: absolute;
right: 10px;
top: calc(56px + env(safe-area-inset-top, 0px));
bottom: auto;
left: auto;
z-index: 24;
margin-top: 0;
width: 132px;
pointer-events: auto;
}
.dmb-viewer-mapcell > .dmb-minimap.is-open,
.dmb-shell-viewer > .dmb-minimap.is-open,
.dmb-viewer-root .dmb-minimap.is-open {
display: flex !important;
}
.dmb-minimap-slot {
display: none;
}
.dmb-debug-dock {
left: 10px;
bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
} @media (min-width: 701px) and (max-width: 1100px) {
html:has(.dmb-shell-viewer),
html:has(.dmb-shell-editor),
body:has(.dmb-shell-viewer),
body:has(.dmb-shell-editor) {
height: 100% !important;
overflow: hidden !important;
margin: 0 !important;
}
body:has(.dmb-shell-viewer) .skip-links,
body:has(.dmb-shell-editor) .skip-links,
body:has(.dmb-shell-viewer) .wp-site-blocks,
body:has(.dmb-shell-editor) .wp-site-blocks {
display: none !important;
}
.dmb-shell-viewer,
.dmb-shell-editor,
body.dmb-shell-blank-viewer .dmb-shell-viewer,
body.dmb-shell-blank-editor .dmb-shell-editor {
height: calc(100vh - var(--dmb-admin-offset, 0px));
height: calc(100svh - var(--dmb-admin-offset, 0px));
height: calc(100dvh - var(--dmb-admin-offset, 0px));
min-height: calc(100vh - var(--dmb-admin-offset, 0px));
min-height: calc(100svh - var(--dmb-admin-offset, 0px));
min-height: calc(100dvh - var(--dmb-admin-offset, 0px));
max-height: calc(100dvh - var(--dmb-admin-offset, 0px));
overflow: hidden;
margin-top: var(--dmb-admin-offset, 0px);
}
.dmb-shell-viewer .dmb-viewer-layout {
display: grid;
grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
grid-template-rows: 1fr;
gap: 0;
height: 100%;
min-height: 100%;
}
.dmb-shell-viewer .dmb-viewer-sidebar--left {
grid-column: 1;
grid-row: 1;
height: 100%;
max-height: none;
overflow: auto;
padding: 10px;
border-right: 1px solid var(--dmb-color-border-soft);
}
.dmb-shell-viewer .dmb-viewer-main {
grid-column: 2;
grid-row: 1;
min-height: 0;
height: 100%;
padding: 0;
}
.dmb-shell-viewer .dmb-viewer-sidebar--right {
grid-column: 2;
grid-row: 1;
}
.dmb-viewer-toolbar {
padding: 4px 6px;
gap: 4px;
}
.dmb-viewer-toolbar__inner {
flex-wrap: wrap;
gap: 6px;
padding: 4px;
}
.dmb-viewer-cam__btn {
min-width: 40px;
min-height: 40px;
}
.dmb-viewer-map-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 6px 8px 0;
position: relative;
z-index: 2;
}
.dmb-viewer-minimap-toggle,
.dmb-viewer-right-sidebar-toggle {
display: inline-flex;
position: static;
min-height: 40px;
min-width: 40px;
padding: 6px 10px;
}
.dmb-viewer-minimap-toggle.is-active,
.dmb-viewer-right-sidebar-toggle.is-active {
background: var(--dmb-color-accent);
border-color: #bf3e42;
color: #ffffff;
}
.dmb-viewer-mapcell .dmb-btn-recenter-overlay {
position: static;
margin-left: auto;
}
.dmb-shell-viewer .dmb-viewer-sidebar--right {
position: fixed !important;
top: var(--dmb-admin-offset, 0);
right: 0;
height: calc(100vh - var(--dmb-admin-offset, 0));
height: calc(100svh - var(--dmb-admin-offset, 0));
height: calc(100dvh - var(--dmb-admin-offset, 0));
width: min(80vw, 320px);
max-width: 320px;
z-index: 40;
padding: 10px;
transform: translateX(100%);
transition: transform 180ms ease;
border-left: 1px solid var(--dmb-color-border-soft);
border-right: 0;
box-shadow: -10px 0 28px rgba(0, 0, 0, 0.4);
}
.dmb-shell-viewer.is-right-sidebar-open .dmb-viewer-sidebar--right {
transform: translateX(0);
}
.dmb-viewer-right-sidebar-backdrop {
position: fixed;
inset: var(--dmb-admin-offset, 0) 0 0 0;
background: rgba(0, 0, 0, 0.4);
z-index: 35;
}
.dmb-viewer-mapcell > .dmb-minimap,
.dmb-shell-viewer > .dmb-minimap,
.dmb-viewer-root .dmb-minimap {
display: none !important;
position: absolute;
right: 10px;
top: 52px;
bottom: auto;
left: auto;
z-index: 24;
margin-top: 0;
width: 132px;
pointer-events: auto;
}
.dmb-viewer-mapcell > .dmb-minimap.is-open,
.dmb-shell-viewer > .dmb-minimap.is-open,
.dmb-viewer-root .dmb-minimap.is-open {
display: flex !important;
}
.dmb-minimap-slot {
display: none;
}
.dmb-viewer-header h1 {
font-size: clamp(16px, 2.4vw, 22px);
}
.dmb-share {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
}
}
@media (min-width: 1101px) {
.dmb-shell-viewer .dmb-viewer-sidebar--right {
overflow: hidden;
padding: 10px;
gap: 10px;
}
.dmb-shell-viewer .dmb-viewer-sidebar .dmb-share {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center;
gap: 8px;
}
.dmb-shell-viewer .dmb-viewer-sidebar .dmb-share .dmb-share-url {
width: 100% !important;
min-width: 0;
}
.dmb-shell-viewer .dmb-viewer-sidebar .dmb-share .dmb-share-copy {
width: auto !important;
max-width: none;
min-width: 132px;
white-space: nowrap;
}
}