.codepen-form[data-astro-cid-nt7ukbwz]{margin-inline-start:auto}.codepen-btn[data-astro-cid-nt7ukbwz]{--btn-stroke:0;--btn-theme:var(--ui-accent);color:var(--text-inverted);border-radius:var(--bdrs-round);cursor:pointer;background:0 0;border:none;place-content:center;block-size:28px;inline-size:28px;padding:0;display:grid;position:relative}.codepen-btn[data-astro-cid-nt7ukbwz]:focus-visible{--btn-stroke:2px;outline:none}@media (hover:hover){.codepen-btn[data-astro-cid-nt7ukbwz]:hover{--btn-stroke:2px}}.codepen-btn[data-astro-cid-nt7ukbwz]:before{content:"CodePen";text-transform:uppercase;font-size:.7em;font-family:var(--font-mona);letter-spacing:.1em;pointer-events:none;opacity:0;place-content:center;block-size:28px;margin-block-start:.125em;margin-inline-end:var(--space-2);font-weight:700;transition:opacity .3s;display:grid;position:absolute;inset-block-start:0;inset-inline-end:100%}@media (hover:hover){.codepen-btn[data-astro-cid-nt7ukbwz]:hover:before{opacity:1}}@layer components{[data-astro-cid-cem5snpb][data-icon=external-1]{vertical-align:middle;stroke:currentColor;margin-inline-start:.1em}.editor[data-astro-cid-cem5snpb]{anchor-name:--editor;z-index:1;background:var(--blue-800);touch-action:none;border-radius:var(--bdrs-xl);block-size:100%;block-size:calc(100% + 2 * var(--space-6));min-block-size:425px;grid-template-rows:min-content 1fr min-content;justify-self:stretch;margin:0;margin-block-end:calc(-2 * var(--space-6));margin-inline-start:calc(-2 * var(--space-6));display:grid;position:relative;box-shadow:0 39.275px 70px -14.275px #0000004d;& .editor-actions{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));display:flex;& .codepen-form{margin-inline-start:auto}}@media (width<=895px){order:1}}.editor-tabs[data-astro-cid-cem5snpb]{background:var(--blue-900);box-shadow:inset 0 0px 0 1px var(--blue-700);border-start-start-radius:inherit;border-start-end-radius:inherit;gap:0;margin:0;margin-block-end:.4lh;padding:0;display:flex}.editor-tabs[data-astro-cid-cem5snpb] [data-astro-cid-cem5snpb][role=tab]{align-items:center;gap:var(--space-2);font-size:.875rem;line-height:.9;font-family:var(--font-mona);font-variation-settings:"GRAD" 250;color:var(--blue-muted-comment);cursor:pointer;box-shadow:unset;border:0;border-block-width:2.5px;border-style:solid;border-block-color:var(--active-tab,#0000) #0000;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);background:0 0;border-block-end-width:1px;border-radius:0;padding:1lh 1.5lh;font-weight:500;display:inline-flex;position:relative;&:first-of-type{border-start-start-radius:inherit}}.editor-tabs[data-astro-cid-cem5snpb] [data-astro-cid-cem5snpb][role=tab][aria-selected=true]{--active-tab:var(--ui-accent);background:var(--blue-800);color:var(--gray-50);font-variation-settings:"GRAD" 600}.editor-tabs[data-astro-cid-cem5snpb] [data-astro-cid-cem5snpb][role=tab][aria-selected=false]:hover,.editor-tabs[data-astro-cid-cem5snpb] [data-astro-cid-cem5snpb][role=tab][aria-selected=false]:focus-visible{color:var(--gray-300);background:var(--blue-700)}.editor-tabs[data-astro-cid-cem5snpb] [data-astro-cid-cem5snpb][role=tab]:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-2px}.editor-tabs[data-astro-cid-cem5snpb] [data-astro-cid-cem5snpb][role=tab] .focus[data-astro-cid-cem5snpb]{pointer-events:none}.editor-tabs[data-astro-cid-cem5snpb] [data-astro-cid-cem5snpb][role=tab] svg[data-astro-cid-cem5snpb]{flex-shrink:0}.tabpanels[data-astro-cid-cem5snpb]{flex:1;grid-template-rows:1fr;grid-template-columns:1fr;display:grid;overflow:hidden}.tabpanel[data-astro-cid-cem5snpb]{flex-direction:column;grid-area:1/1;display:flex;overflow:hidden}.tabpanel[data-astro-cid-cem5snpb].is-hidden{visibility:hidden;pointer-events:none;height:0;min-height:0;overflow:hidden}.tabpanel-css[data-astro-cid-cem5snpb]{z-index:1}.tabpanel-html[data-astro-cid-cem5snpb],.tabpanel[data-astro-cid-cem5snpb].is-hidden.tabpanel-css{z-index:0}.tabpanel[data-astro-cid-cem5snpb]:not(.is-hidden).tabpanel-html{z-index:1;height:auto}.tabpanel[data-astro-cid-cem5snpb] textarea{flex:1}.tabpanel-html[data-astro-cid-cem5snpb] textarea{cursor:default}small[data-astro-cid-cem5snpb]{color:#adbdcc;flex-wrap:wrap;gap:.5ch;margin-inline-start:var(--space-2);font-size:.8rem;font-weight:500;display:flex;position:relative;& a:any-link{color:var(--gray-100);gap:var(--space-1);align-items:center;text-decoration:none;& span{text-decoration:underline;text-decoration-color:var(--ui-accent)}& svg{block-size:1.15em;inline-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}}}}.reset-buttons[data-astro-cid-cem5snpb]{z-index:1;anchor-scope:all;justify-items:end;margin-inline-end:var(--space-2);display:grid;position:absolute;inset-block-start:var(--space-2);inset-inline-end:0;&>button[data-astro-cid-cem5snpb].reset{anchor-name:--reset-btn;&:has(+:popover-open),&:has(+[open]){opacity:0}}}.reset-dialog[data-astro-cid-cem5snpb]{position-anchor:--reset-btn;position-area:center span-left;background:0 0;border:0;height:fit-content;margin:0;padding:0;position:fixed;& form{gap:.5ch;display:flex}&::backdrop{background:0 0}}.confirm-btn[data-astro-cid-cem5snpb]{--btn-stroke:0;--btn-theme:var(--ui-accent);color:var(--text-inverted);border-radius:var(--bdrs-round);background:0 0;place-content:center;block-size:28px;inline-size:28px;padding:0;display:grid;position:relative}button path{stroke-width:3px}@media (hover:hover){button[data-astro-cid-cem5snpb]:hover{--btn-stroke:2px}}button[data-astro-cid-cem5snpb].reset{--opacity:0;--btn-stroke:0;--btn-theme:var(--ui-accent);color:var(--text-inverted);border-radius:var(--bdrs-round);background:0 0;place-content:center;block-size:28px;inline-size:28px;padding:0;display:grid;position:relative}button[data-astro-cid-cem5snpb].reset:before{content:"Nulstil";text-transform:uppercase;font-size:.7em;font-family:var(--font-mona);letter-spacing:.1em;pointer-events:none;opacity:0;place-content:center;block-size:28px;margin-block-start:.125em;margin-inline-end:var(--space-2);font-weight:700;transition:opacity .3s;display:grid;position:absolute;inset-block-start:0;inset-inline-end:100%}button[data-astro-cid-cem5snpb].reset svg[data-astro-cid-cem5snpb] path[data-astro-cid-cem5snpb]{stroke-width:3px}button[data-astro-cid-cem5snpb]:focus-visible{--btn-stroke:2px}@media (hover:hover){button[data-astro-cid-cem5snpb]:hover{--btn-stroke:2px}button[data-astro-cid-cem5snpb].reset:hover:before{opacity:1}button[data-astro-cid-cem5snpb][disabled]{box-shadow:inset 0 0 0 0 var(--ui-accent)}}.container[data-astro-cid-l72khyrg]>div{@starting-style{opacity:0;scale:.95}transition-behavior:allow-discrete;transition:opacity .3s,scale .3s}.box,[class|=box]{text-align:center;color:oklch(from var(--ui-primary) .2 c h);background:#72f1b8;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;border-radius:3px;justify-content:center;align-items:center;display:flex}[data-astro-cid-l72khyrg][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 (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(*){display:revert;justify-content:revert;align-items:revert;padding:1rem;position:relative;&:before{content:"." attr(class);text-align:center;font-size:.6em;font-weight:500;line-height:.8;position:absolute;top:.25rem;left:0;right:0}& :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-l72khyrg]: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-l72khyrg]:is(.editor:focus-within~*):hover>.container[data-astro-cid-l72khyrg]{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-l72khyrg]:is(section.gap-reset *)>div[data-astro-cid-l72khyrg]{gap:1px 0}.output[data-astro-cid-l72khyrg]{--padding:var(--space-2);max-inline-size:calc(100% + (var(--padding) * 2));resize:both;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);max-block-size:500px;padding:var(--padding);margin:calc(var(--padding) * -1);anchor-name:--output;anchor-scope:--output;border:2px dashed #0000;align-self:start;font-family:system-ui,sans-serif;display:grid;position:sticky;top:1rem;overflow:hidden;@media (width<=895px){resize:revert;position:static;&:before{display:none}}}.resize-x-only .output[data-astro-cid-l72khyrg]{resize:horizontal;&:before{content:"Dobbeltklik for at nulstille bredde"}}.output[data-astro-cid-l72khyrg]::-webkit-resizer{box-shadow:none!important;border:0!important}.output[data-astro-cid-l72khyrg]:after{content:"";position-anchor:--output;position-area:center;block-size:1.6rem;inline-size:1.6rem;color:var(--ui-accent);background:var(--resize-icon) 0 0 / contain no-repeat;pointer-events:none;z-index:2;place-self:end;position:fixed;inset:-3px;@media (width<=895px){display:none}}.output[data-astro-cid-l72khyrg]:before{content:"Dobbeltklik for at nulstille højde/bredde";position-anchor:--output;position-area:center;border-radius:var(--bdrs-sm);pointer-events:none;backdrop-filter:blur(3px);z-index:2;opacity:0;background:#f7fcfa80;place-self:end center;inline-size:fit-content;margin-inline:auto;padding:.2em .3em;font-size:.8em;font-weight:500;line-height:1;transition:opacity;position:absolute}.output[data-astro-cid-l72khyrg][style]:before{opacity:1;transition:opacity .2s .5s;@starting-style{opacity:0}}.output[data-astro-cid-l72khyrg]>div[data-astro-cid-l72khyrg]{padding:var(--space-1);background:var(--surface-tertiary);grid-area:1/-1;place-self:stretch stretch;gap:1px}.output[data-astro-cid-l72khyrg] .container[data-astro-cid-l72khyrg] img{width:auto;max-width:100%}.output[data-astro-cid-l72khyrg] .container[data-astro-cid-l72khyrg] :is(p,dt,dd){text-decoration-line:line-through;text-decoration-thickness:2ex}.output[data-astro-cid-l72khyrg] .container[data-astro-cid-l72khyrg] :is(dl,dt,dd){text-align:start;margin:0;padding:0}.output[data-astro-cid-l72khyrg] .container[data-astro-cid-l72khyrg] dt{color:var(--ui-primary-dark)}section.stretch .output[data-astro-cid-l72khyrg]{align-self:stretch}.output[data-astro-cid-l72khyrg]:is(section.bg-image *)>.container[data-astro-cid-l72khyrg]>img{outline-offset:-1px;outline:1px solid #0002;width:auto;min-height:50px}.output[data-astro-cid-l72khyrg]:is(section.logo-box *) .logo{padding:1rem;font-size:2rem;font-weight:900;line-height:1.2;display:grid}@supports (--w:calc(100cqi / 1px)){.output[data-astro-cid-l72khyrg][data-show-output-size=true]{container-type:inline-size;& .container{--w:calc((100cqi - (.25rem * 2)) / 1px);counter-set:--width var(--w);&:after{position-anchor:--output;position-area:top;content:counter(--width) "px";background:var(--ui-surface);padding-inline:.5ch;font-size:.7rem;font-weight:600;position:fixed;inset-block-end:-1cap}}}}}.sda-result[data-astro-cid-db4glpu5]{--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);max-block-size:500px;padding:.5lh;padding:var(--padding);margin:calc(var(--padding) * -1);border:2px dashed #0000;align-self:start;display:grid;position:sticky;top:1rem;overflow:clip;@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);overscroll-behavior:contain;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);min-height:calc(round(to-zero,300px,1.5rlh) + 0px);overflow:clip;container:container/size;&[data-scroll-direction=block]{overflow-block:auto}&[data-scroll-direction=inline]{overflow-inline:auto;padding:1px}& .sticky-element{isolation:isolate;display:grid}}& div:not([class])[style^=height]{text-transform:uppercase;color:var(--ui-primary-border);margin-bottom:1.5rlh;font-weight:600;&:before{place-items:center;height:100%;display:grid}&: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]{text-transform:uppercase;color:var(--ui-primary-border);flex-shrink:0;font-weight:600;&:before{place-items:center;height:100%;display:grid}&:nth-last-child(1 of [style^=width]):before{content:"Scroll ←"}&:nth-child(1 of [style^=width]):before{content:"Scroll →"}}& .container{--debug-visibility:0;isolation:isolate;color:var(--ui-primary-dark);position:relative;&:before,&:after{opacity:var(--debug-visibility)}&:before{content:".container";background:oklch(from var(--ui-primary) .99 .01 h);pointer-events:none;justify-self:center;padding-inline:.5ch;font-size:.8em;line-height:1.5rlh;position:absolute;inset:-1.5rlh 0 auto}&:after{content:"";outline:1px dashed var(--ui-primary-dark);z-index:-1;position:absolute;inset:-.75rlh .25rlh 0}& .sticky-element{color:var(--ui-primary-border);container-type:scroll-state;&:before,&:after{opacity:var(--debug-visibility)}&:before{content:".sticky-element";background:oklch(from var(--ui-primary) .99 .01 h);pointer-events:none;justify-self:center;padding-inline:.5ch;font-size:.8em;line-height:1.5rlh;position:absolute;inset:0 0 auto;@container scroll-state(stuck:top){font-variation-settings:"GRAD" 600}}&:after{content:"";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);outline:1px dashed;position:absolute;inset:.75rlh;@container scroll-state(stuck:top){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);outline-style:solid}}}}.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{border-left:1px dashed var(--ui-primary-border);background:#fff;display:grid}& .box{background:var(--ui-primary);color:var(--ui-primary-border);padding:var(--space-4) var(--space-6);border-radius:var(--bdrs-md);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;font-size:.875rem;font-weight:600}}