.codepen-form[data-astro-cid-27fl7jrt]{margin-inline-start:auto}.codepen-btn[data-astro-cid-27fl7jrt]{--btn-stroke: 0;--btn-theme: var(--ui-accent);position:relative;color:var(--text-inverted);padding:0;inline-size:28px;block-size:28px;background:transparent;display:grid;place-content:center;border-radius:var(--bdrs-round);cursor:pointer;border:none}.codepen-btn[data-astro-cid-27fl7jrt]:focus-visible{--btn-stroke: 2px;outline:none}@media (hover: hover){.codepen-btn[data-astro-cid-27fl7jrt]:hover{--btn-stroke: 2px}}.codepen-btn[data-astro-cid-27fl7jrt]:before{content:"CodePen";text-transform:uppercase;position:absolute;inset-inline-end:100%;margin-inline-end:var(--space-2);inset-block-start:0;font-size:.7em;font-family:var(--font-mona);font-weight:700;block-size:28px;margin-block-start:.125em;display:grid;place-content:center;letter-spacing:.1em;pointer-events:none;transition:.3s;opacity:0}@media (hover: hover){.codepen-btn[data-astro-cid-27fl7jrt]:hover:before{opacity:1}}@layer components{[data-astro-cid-ghcfornp][data-icon=external-1]{vertical-align:middle;margin-inline-start:.1em;stroke:currentColor}.editor[data-astro-cid-ghcfornp]{anchor-name:--editor;position:relative;z-index:1;background:var(--blue-900);margin:0;justify-self:stretch;display:grid;grid-template-rows:min-content 1fr min-content;block-size:100%;touch-action:none;border-radius:var(--bdrs-xl);block-size:calc(100% + 2 * var(--space-6));min-block-size:425px;margin-inline-start:calc(-2 * var(--space-6));margin-block-end:calc(-2 * var(--space-6));box-shadow:0 39.275px 70px -14.275px #0000004d;.editor-actions{display:flex;align-items:center;gap:var(--space-4);border-top:1px solid var(--blue-600);padding:var(--space-4) 0;margin-inline:calc(var(--space-2) + var(--space-1));:global(.codepen-form){margin-inline-start:auto}}@media (max-width: 895px){order:1}}.editor-tabs[data-astro-cid-ghcfornp]{display:flex;gap:0;padding:0;margin:0;border-start-start-radius:inherit;border-start-end-radius:inherit;background:var(--blue-800);margin-block-end:.4lh;box-shadow:inset 0 0 0 1px var(--blue-700)}.editor-tabs[data-astro-cid-ghcfornp] [data-astro-cid-ghcfornp][role=tab]{display:inline flex;align-items:center;gap:var(--space-2);font-size:.875rem;line-height:.9;padding:1lh 1.5lh;font-family:var(--font-mona);font-weight:500;font-variation-settings:"GRAD" 250;color:var(--blue-muted-comment);background:transparent;border:none;cursor:pointer;position:relative;border-radius:0;box-shadow:unset;border:0;border-block-width:2.5px;border-style:solid;border-block-color:var(--active-tab, #0000) #0000;border-block-end-width:1px;box-shadow:inset 0 6px 12px -8px oklch(from var(--active-tab) l c h / .7),0 -6px 12px -10px oklch(from var(--active-tab) l c h / .7);&[data-astro-cid-ghcfornp]:first-of-type{margin-inline-start:.9rem}}.editor-tabs[data-astro-cid-ghcfornp] [data-astro-cid-ghcfornp][role=tab][aria-selected=true]{--active-tab: var(--ui-accent);background:var(--blue-900);color:var(--gray-50);font-variation-settings:"GRAD" 600}.editor-tabs[data-astro-cid-ghcfornp] [data-astro-cid-ghcfornp][role=tab][aria-selected=false]:hover,.editor-tabs[data-astro-cid-ghcfornp] [data-astro-cid-ghcfornp][role=tab][aria-selected=false]:focus-visible{color:var(--gray-300);background:var(--blue-700)}.editor-tabs[data-astro-cid-ghcfornp] [data-astro-cid-ghcfornp][role=tab]:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-2px}.editor-tabs[data-astro-cid-ghcfornp] [data-astro-cid-ghcfornp][role=tab] .focus[data-astro-cid-ghcfornp]{pointer-events:none}.editor-tabs[data-astro-cid-ghcfornp] [data-astro-cid-ghcfornp][role=tab] svg[data-astro-cid-ghcfornp]{flex-shrink:0}.tabpanels[data-astro-cid-ghcfornp]{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;flex:1;overflow:hidden}.tabpanel[data-astro-cid-ghcfornp]{grid-area:1 / 1;display:flex;flex-direction:column;overflow:hidden}.tabpanel[data-astro-cid-ghcfornp].is-hidden{visibility:hidden;pointer-events:none;height:0;min-height:0;overflow:hidden}.tabpanel-css[data-astro-cid-ghcfornp]{z-index:1}.tabpanel-html[data-astro-cid-ghcfornp],.tabpanel[data-astro-cid-ghcfornp].is-hidden.tabpanel-css{z-index:0}.tabpanel[data-astro-cid-ghcfornp]:not(.is-hidden).tabpanel-html{z-index:1;height:auto}.tabpanel[data-astro-cid-ghcfornp] textarea[data-astro-cid-ghcfornp]{flex:1}.tabpanel-html[data-astro-cid-ghcfornp] textarea[data-astro-cid-ghcfornp]{cursor:default}small[data-astro-cid-ghcfornp]{font-size:.8rem;font-weight:500;color:#adbdcc;position:relative;display:flex;gap:.5ch;flex-wrap:wrap;margin-inline-start:var(--space-2);a:any-link{text-decoration:none;color:var(--gray-100);gap:var(--space-1);align-items:center;span{text-decoration:underline;text-decoration-color:var(--ui-accent)}svg{inline-size:1.15em;block-size:1.15em}&:hover,&:focus-visible{color:var(--text-inverted);outline-color:var(--ui-accent);outline-width:1px;svg{color:var(--ui-accent)}span{text-decoration:underline;text-decoration-color:currentColor}}}}.reset-buttons[data-astro-cid-ghcfornp]{position:absolute;inset-inline-end:0;inset-block-start:var(--space-2);z-index:1;display:grid;justify-items:end;margin-inline-end:var(--space-2);anchor-scope:all;>button.reset{anchor-name:--reset-btn;&:has(+:popover-open),&:has(+[open]){opacity:0}}}.reset-dialog[data-astro-cid-ghcfornp]{margin:0;position:fixed;position-anchor:--reset-btn;position-area:center span-left;border:0;padding:0;height:fit-content;background:transparent;form{display:flex;gap:.5ch}&::backdrop{background:transparent}}.confirm-btn[data-astro-cid-ghcfornp]{--btn-stroke: 0;--btn-theme: var(--ui-accent);position:relative;color:var(--text-inverted);padding:0;inline-size:28px;block-size:28px;background:transparent;display:grid;place-content:center;border-radius:var(--bdrs-round)}button path{stroke-width:3}@media (hover: hover){button[data-astro-cid-ghcfornp]:hover{--btn-stroke: 2px}}button[data-astro-cid-ghcfornp].reset{--opacity: 0;--btn-stroke: 0;--btn-theme: var(--ui-accent);position:relative;color:var(--text-inverted);padding:0;inline-size:28px;block-size:28px;background:transparent;display:grid;place-content:center;border-radius:var(--bdrs-round)}button[data-astro-cid-ghcfornp].reset:before{content:"Nulstil";text-transform:uppercase;position:absolute;inset-inline-end:100%;margin-inline-end:var(--space-2);inset-block-start:0;font-size:.7em;font-family:var(--font-mona);font-weight:700;block-size:28px;margin-block-start:.125em;display:grid;place-content:center;letter-spacing:.1em;pointer-events:none;transition:.3s;opacity:0}button[data-astro-cid-ghcfornp].reset svg[data-astro-cid-ghcfornp] path[data-astro-cid-ghcfornp]{stroke-width:3}button[data-astro-cid-ghcfornp]:focus-visible{--btn-stroke: 2px}@media (hover: hover){button[data-astro-cid-ghcfornp]:hover{--btn-stroke: 2px}button[data-astro-cid-ghcfornp].reset:hover:before{opacity:1}button[data-astro-cid-ghcfornp][disabled]{box-shadow:inset 0 0 0 0 var(--ui-accent)}}}@layer components{.container[data-astro-cid-cnneoqoa]>div{@starting-style{opacity:0;scale:.95}transition:.3s;transition-behavior:allow-discrete}.box,[class|=box]{display:flex;justify-content:center;align-items:center;text-align:center;background:#72f1b8;color:oklch(from var(--ui-primary) .2 c h);border-radius:3px;background-color:var(--ui-primary);box-shadow:0 0 0 1px var(--ui-primary-border),0 2px 2px #005afa0d,0 4px 4px #005afa0d,0 8px 8px #005afa0d,0 16px 16px #005afa0d}[data-astro-cid-cnneoqoa][data-custom-html=true] .box{display:block}.box,[class|=box]{--min-font: 12;--max-font: 29;--screen-max: 895;--screen-min: 375;font-size:clamp(var(--min-font) * 1px,var(--responsive),var(--max-font) * 1px);@media (min-width: 896px){--min-font: 14;--max-font: 20;--screen-max: 1200;--screen-min: 896;font-size:clamp(var(--min-font) * 1px,var(--responsive),var(--max-font) * 1px)}}:is([class|=box],.box):has(*){padding:1rem;position:relative;display:revert;justify-content:revert;align-items:revert;&[data-astro-cid-cnneoqoa]:before{content:"." attr(class);font-weight:500;position:absolute;top:.25rem;left:0;right:0;text-align:center;line-height:.8;font-size:.6em}:is(h4){line-height:1.125}:is(p){text-align:start}:is(h4,p){padding-block:.5rem}>:is([class*=box],h4,p,dt,dd){box-shadow:inherit;border-radius:inherit;background:var(--ui-primary-dark);padding-inline:.5rem}}.output[data-astro-cid-cnneoqoa]:is(.editor:has(:focus-within)~*){--marching-ants: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E@keyframes ant %7Bto %7Bstroke-dashoffset: -8;%7D%7D%3C/style%3E%3Crect width='100%25' height='100%25' style='stroke: %23a9bcce; stroke-width: 3.75px; fill: none;stroke-dasharray: 5 3; animation: ant 1s infinite linear'/%3E%3C/svg%3E") border-box}.output[data-astro-cid-cnneoqoa]:is(.editor:focus-within~*):hover>.container[data-astro-cid-cnneoqoa]{background:repeating-linear-gradient(-45deg,oklch(from var(--ui-primary) calc(l*.9) .05 h) 0 25%,#0000 0 50%) 0 / 4px 4px content-box,var(--surface-tertiary) border-box}.output[data-astro-cid-cnneoqoa]:is(section.gap-reset *)>div[data-astro-cid-cnneoqoa]{gap:1px 0}.output[data-astro-cid-cnneoqoa]{--padding: var(--space-2);display:grid;align-self:start;position:relative;max-inline-size:calc(100% + (var(--padding) * 2));max-block-size:500px;border:2px dashed transparent;font-family:system-ui,sans-serif;resize:both;overflow:hidden;user-select:none;border-radius:var(--bdrs-sm);background:conic-gradient(at 75% 75%,#fff 75%,transparent 0) 100% 101% / 1.6rem 1.6rem no-repeat border-box,var( --marching-ants, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E@keyframes ant %7Bto %7Bstroke-dashoffset: -8;%7D%7D%3C/style%3E%3Crect width='100%25' height='100%25' style='stroke: %23a9bcce; stroke-width: 3.75px; fill: none;stroke-dasharray: 5 3; animation: ant 0s infinite linear'/%3E%3C/svg%3E") border-box );padding:var(--padding);margin:calc(var(--padding) * -1);position:sticky;top:1rem;anchor-name:--output;anchor-scope:--output;@media (max-width: 895px){resize:revert;position:static;&[data-astro-cid-cnneoqoa]:before{display:none}}}.resize-x-only .output[data-astro-cid-cnneoqoa]{resize:horizontal;&[data-astro-cid-cnneoqoa]:before{content:"Dobbeltklik for at nulstille bredde"}}.output[data-astro-cid-cnneoqoa]::-webkit-resizer{box-shadow:none!important;border:0!important}.output[data-astro-cid-cnneoqoa]:after{content:"";inline-size:1.6rem;block-size:1.6rem;position:fixed;position-anchor:--output;position-area:center;place-self:end;inset:-3px;color:var(--ui-accent);background:var(--resize-icon) 0 0 / contain no-repeat;pointer-events:none;z-index:2;@media (max-width: 895px){display:none}}.output[data-astro-cid-cnneoqoa]:before{content:"Dobbeltklik for at nulstille højde/bredde";font-weight:500;position:absolute;position-anchor:--output;position-area:center;place-self:end center;inline-size:fit-content;font-size:.8em;padding:.2em .3em;line-height:1;margin-inline:auto;background:#f7fcfa7f;border-radius:var(--bdrs-sm);pointer-events:none;backdrop-filter:blur(3px);z-index:2;opacity:0;transition:0s opacity}.output[data-astro-cid-cnneoqoa][style]:before{opacity:1;transition:.2s .5s opacity;@starting-style{opacity:0}}.output[data-astro-cid-cnneoqoa]>div[data-astro-cid-cnneoqoa]{grid-area:1 / -1;padding:var(--space-1);place-self:center;justify-self:stretch;align-self:stretch;gap:1px;background:var(--surface-tertiary)}.output[data-astro-cid-cnneoqoa] .container[data-astro-cid-cnneoqoa] img{width:auto;max-width:100%}.output[data-astro-cid-cnneoqoa] .container[data-astro-cid-cnneoqoa] :is(p,dt,dd){text-decoration-line:line-through;text-decoration-thickness:2ex}.output[data-astro-cid-cnneoqoa] .container[data-astro-cid-cnneoqoa] :is(dl,dt,dd){margin:0;padding:0;text-align:start}.output[data-astro-cid-cnneoqoa] .container[data-astro-cid-cnneoqoa] dt{color:var(--ui-primary-dark)}section.stretch .output[data-astro-cid-cnneoqoa]{align-self:stretch}.output[data-astro-cid-cnneoqoa]:is(section.bg-image *)>.container[data-astro-cid-cnneoqoa]>img{outline:1px solid #0002;outline-offset:-1px;width:auto;min-height:50px}.output[data-astro-cid-cnneoqoa]:is(section.logo-box *) .logo{padding:1rem;display:grid;font-size:80%;line-height:1.2;font-size:2rem;font-weight:900}@supports (--w: calc(100cqi/1px) ){.output[data-astro-cid-cnneoqoa][data-show-output-size=true]{container-type:inline-size;.container{--w: calc((100cqi - .5rem)/1px) ;counter-set:--width var(--w);&:after{position:fixed;position-anchor:--output;position-area:top;inset-block-end:-1cap;content:counter(--width) "px";font-size:.7rem;font-weight:600;background:var(--ui-surface);padding-inline:.5ch}}}}}.sda-result[data-astro-cid-4eprjo7u]{--padding: var(--space-2);background:var( --marching-ants, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E@keyframes ant %7Bto %7Bstroke-dashoffset: -8;%7D%7D%3C/style%3E%3Crect width='100%25' height='100%25' style='stroke: %23a9bcce; stroke-width: 3.75px; fill: none;stroke-dasharray: 5 3; animation: ant 0s infinite linear'/%3E%3C/svg%3E") border-box );border-radius:var(--bdrs-sm);overflow:clip;display:grid;position:relative;padding:.5lh;border:2px dashed transparent;max-block-size:500px;padding:var(--padding);margin:calc(var(--padding) * -1);align-self:start;position:sticky;top:1rem;@supports not (container: sda-result / size scroll-state){--scroll-state-not-supported: }.scrollport{scrollbar-color:var(--ui-primary-border) oklch(from var(--ui-primary) .95 .025 h);container:container / size;overscroll-behavior:contain;min-height:calc(round(to-zero,300px,1.5rlh) + 0px);overflow:clip;overscroll-behavior:none;background:conic-gradient(from 90deg at 1px 1px,#0000 25%,oklch(from var(--ui-primary) .95 .025 h) 0) -.5px 0px / 1.5rlh 1.5rlh round repeat local content-box,oklch(from var(--ui-primary) .99 .01 h);&[data-scroll-direction=block]{overflow-block:auto}&[data-scroll-direction=inline]{overflow-inline:auto;padding:1px}.sticky-element{display:grid;isolation:isolate}}div:not([class])[style^=height]{font-weight:600;text-transform:uppercase;color:var(--ui-primary-border);margin-bottom:1.5rlh;&:before{display:grid;place-items:center;height:100%}&:nth-last-child(1 of[style^=height]):before{content:"Scroll ↑";translate:0 1lh}&:nth-child(1 of[style^=height]):before{content:"Scroll ↓"}}div:not([class])[style^=width]{font-weight:600;text-transform:uppercase;color:var(--ui-primary-border);flex-shrink:0;&:before{display:grid;place-items:center;height:100%}&:nth-last-child(1 of[style^=width]):before{content:"Scroll ←"}&:nth-child(1 of[style^=width]):before{content:"Scroll →"}}.container{--debug-visibility: 0;position:relative;isolation:isolate;color:var(--ui-primary-dark);&:before,&:after{opacity:var(--debug-visibility)}&:before{content:".container";position:absolute;inset:-1.5rlh 0 auto;justify-self:center;font-size:.8em;background:oklch(from var(--ui-primary) .99 .01 h);padding-inline:.5ch;pointer-events:none;line-height:1.5rlh}&:after{content:"";position:absolute;inset:-.75rlh .25rlh 0;outline:1px dashed var(--ui-primary-dark);z-index:-1}.sticky-element{container-type:scroll-state;color:var(--ui-primary-border);&:before,&:after{opacity:var(--debug-visibility)}&:before{content:".sticky-element";position:absolute;inset:0 0 auto;justify-self:center;font-size:.8em;background:oklch(from var(--ui-primary) .99 .01 h);padding-inline:.5ch;pointer-events:none;line-height:1.5rlh;@container scroll-state(stuck: top){font-variation-settings:"GRAD" 600}}&:after{content:"";position:absolute;inset:.75rlh;outline:1px dashed;z-index:-1;--stripes-color: oklch(from var(--ui-primary) .92 .025 h);--stripes: repeating-linear-gradient( -45deg, var(--stripes-color) 0 12.5%, #0000 0 50% ) 0 0 / 6px 6px;background:var(--stripes);@container scroll-state(stuck: top){outline-style:solid;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%233a61c4' d='m22.313 10.175l-1.415 1.414l-.707-.707l-4.242 4.243l-.707 3.536l-1.415 1.414l-4.242-4.243l-4.95 4.95l-1.414-1.414l4.95-4.95l-4.243-4.243l1.414-1.414l3.536-.707l4.242-4.243l-.707-.707l1.414-1.414z'/%3E%3C/svg%3E") no-repeat top 2px right 2px / 1rlh 1rlh,var(--stripes)}}}}.controls:has(:checked)+& .container{--debug-visibility: 1}.output:is(.editor:has(:focus-within)~&){--marching-ants: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E@keyframes ant %7Bto %7Bstroke-dashoffset: -8;%7D%7D%3C/style%3E%3Crect width='100%25' height='100%25' style='stroke: %23a9bcce; stroke-width: 3.75px; fill: none;stroke-dasharray: 5 3; animation: ant 1s infinite linear'/%3E%3C/svg%3E") border-box}.sibling-container{display:grid;background:#fff;border-left:1px dashed var(--ui-primary-border)}.box{background:var(--ui-primary);color:var(--ui-primary-border);padding:var(--space-4) var(--space-6);border-radius:var(--bdrs-md);font-weight:600;font-size:.875rem;box-shadow:0 0 0 1px var(--ui-primary-dark),0 2px 2px #005afa0d,0 4px 4px #005afa0d,0 8px 8px #005afa0d,0 16px 16px #005afa0d}}