1.example {2 border: 1px solid var(--ifm-color-emphasis-300);3 border-radius: 0.6rem;4 margin: 1.5rem 0 2rem;5 overflow: hidden;6}78.heading {9 align-items: center;10 background: var(--ifm-background-surface-color);11 border-bottom: 1px solid var(--ifm-color-emphasis-300);12 display: flex;13 gap: 1rem;14 justify-content: space-between;15 padding: 0.75rem;16}1718.heading > div:first-child {19 display: grid;20 gap: 0.1rem;21}2223.heading span,24.example figcaption {25 color: var(--ifm-color-emphasis-700);26 font-size: 0.78rem;27}2829.controls {30 align-items: center;31 display: flex;32 flex: 0 0 auto;33 gap: 0.35rem;34}3536.controls button {37 align-items: center;38 background: var(--ifm-background-color);39 border: 1px solid var(--ifm-color-emphasis-400);40 border-radius: 0.35rem;41 color: var(--ifm-font-color-base);42 cursor: pointer;43 display: inline-flex;44 font: inherit;45 font-weight: 700;46 height: 2rem;47 justify-content: center;48 min-width: 2rem;49 padding: 0 0.55rem;50}5152.controls button:hover,53.controls button:focus-visible {54 border-color: var(--ifm-color-primary);55 outline: 2px solid var(--ifm-color-primary-lightest);56 outline-offset: 1px;57}5859.controls output {60 font-size: 0.75rem;61 min-width: 3.25rem;62 text-align: center;63}6465.viewport {66 background-color: var(--ifm-background-color);67 background-image: radial-gradient(var(--ifm-color-emphasis-300) 0.75px, transparent 0.75px);68 background-size: 18px 18px;69 cursor: grab;70 height: clamp(18rem, 48vw, 30rem);71 overflow: hidden;72 position: relative;73 touch-action: none;74 user-select: none;75}7677.viewport[data-dragging='true'] {78 cursor: grabbing;79}8081.viewport img {82 left: 0;83 max-width: none;84 pointer-events: none;85 position: absolute;86 top: 0;87 transform-origin: 0 0;88 will-change: transform;89}9091.status {92 left: 50%;93 margin: 0;94 max-width: 28rem;95 position: absolute;96 text-align: center;97 top: 50%;98 transform: translate(-50%, -50%);99 width: calc(100% - 3rem);100}101102.example figcaption {103 background: var(--ifm-background-surface-color);104 border-top: 1px solid var(--ifm-color-emphasis-300);105 padding: 0.55rem 0.75rem;106}107108@media (max-width: 600px) {109 .heading {110 align-items: stretch;111 flex-direction: column;112 }113114 .controls {115 justify-content: space-between;116 }117118 .controls output {119 flex: 1;120 }121122 .viewport {123 height: 20rem;124 }125}