.code-display{position:relative;width:100%;border-width:var(--size-responsive-1);border-style:var(--v-button-default-border-style);border-color:var(--palette-default-border);border-radius:var(--v-button-default-border-radius) var(--v-button-default-border-radius) 0 0;background-image:linear-gradient(45deg,var(--palette-default-surface-2) 25%,transparent 25%),linear-gradient(-45deg,var(--palette-default-surface-2) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--palette-default-surface-2) 75%),linear-gradient(-45deg,transparent 75%,var(--palette-default-surface-2) 75%);background-color:var(--palette-default-surface-1);background-size:30px 30px;background-position:-5px -5px,-5px 10px,10px -20px,-20px -5px}.code-display--default,.code-display--checkered{background-image:linear-gradient(45deg,var(--palette-default-surface-2) 25%,transparent 25%),linear-gradient(-45deg,var(--palette-default-surface-2) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--palette-default-surface-2) 75%),linear-gradient(-45deg,transparent 75%,var(--palette-default-surface-2) 75%);background-color:var(--palette-default-surface-1);background-size:30px 30px;background-position:-5px -5px,-5px 10px,10px -20px,-20px -5px}.code-display--solid{background-color:var(--palette-default-surface-1)}.code-display--minimal{background-color:transparent;border:none}.code-display--bordered{background-color:var(--palette-default-surface-1);border-width:2px;border-color:var(--palette-default-active);box-shadow:0 2px 8px #0000001a}.code-display--size-small{border-width:1px}.code-display--size-large{border-width:3px;border-radius:16px 16px 0 0}.code-display--size-large .code-display__iframe{border-radius:16px 16px 0 0}.code-display--theme-light{background-color:var(--palette-default-surface-1);border-color:#0000000d}.code-display--theme-dark{background-color:var(--palette-default-surface-3);border-color:#ffffff1a}.code-display--in-snippet-display{border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0}.code-display--in-snippet-display .code-display__iframe{border-bottom-left-radius:0;border-bottom-right-radius:0}.code-display--in-pattern-preview,.code-display--in-pattern-preview .code-display__iframe{border-radius:12px 0 0 12px}.code-display--responsive{max-width:100%;overflow:hidden}.code-display--hover-shadow:hover{box-shadow:0 6px 20px #00000026;transition:box-shadow .2s ease}.code-display--fade-in{animation:code-display-fade-in .3s ease-in-out}@keyframes code-display-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.code-display__iframe{width:100%;height:100%;border-radius:var(--v-button-default-border-radius) var(--v-button-default-border-radius) 0 0}.code-display--minimal .code-display__iframe{border-radius:0}.code-display--bordered .code-display__iframe{border-radius:6px 6px 0 0}.code-display__loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px}.code-display__loading .v-circular-progress{position:absolute}.code-display__error{position:absolute;inset:0;display:grid;place-items:center;background-color:var(--palette-default-surface-3);height:100%;border-block:1px solid rgba(0,0,0,.1);border-start-end-radius:12px;border-start-start-radius:12px}.code-display__error h4{margin:0 0 8px;color:var(--palette-default-text)}.code-display__error p{margin:0;color:var(--palette-default-text-subtle)}.code-display__error--minimal{background-color:transparent;border:1px dashed rgba(0,0,0,.3)}.code-display__error--dark{background-color:#2d3748;color:#e2e8f0}.code-display__error--warning{background-color:#fef3cd;border-color:#f59e0b;color:#92400e}.code-display__error--danger{background-color:#fee2e2;border-color:#ef4444;color:#dc2626}@media(prefers-contrast:high){.code-display{border-color:var(--palette-default-text);border-width:2px}.code-display--minimal{border:2px solid var(--palette-default-text)}}@media(prefers-reduced-motion:reduce){.code-display--fade-in{animation:none}.code-display--hover-shadow{transition:none}}@media print{.code-display{border:1px solid #000;box-shadow:none}.code-display__loading{display:none}}