@layer base{.mockup-window{--mockup-dot-1:var(--color-error);--mockup-dot-2:var(--color-warning);--mockup-dot-3:var(--color-success);border-radius:var(--radius-box,.5rem);border:1px solid var(--color-base-300);background-color:var(--color-base-100);width:100%;color:var(--color-base-content);padding-top:2.25rem;position:relative;overflow:hidden}.mockup-window:before{content:"";background-color:var(--color-base-200);border-bottom:1px solid var(--color-base-300);inset-inline:0;height:2.25rem;position:absolute;top:0}.mockup-window:after{content:"";background-color:var(--mockup-dot-1);width:.6rem;height:.6rem;box-shadow:1rem 0 0 var(--mockup-dot-2),calc(1rem * 2) 0 0 var(--mockup-dot-3);inset-inline-start:1rem;border-radius:9999px;position:absolute;top:.825rem}.mockup-browser{--mockup-dot-1:var(--color-error);--mockup-dot-2:var(--color-warning);--mockup-dot-3:var(--color-success);border-radius:var(--radius-box,.5rem);border:1px solid var(--color-base-300);background-color:var(--color-base-100);width:100%;color:var(--color-base-content);overflow:hidden}.mockup-browser-toolbar{background-color:var(--color-base-200);border-bottom:1px solid var(--color-base-300);align-items:center;min-height:2.75rem;padding-block:.5rem;padding-inline:4.6rem 1rem;display:flex;position:relative}.mockup-browser-toolbar:before{content:"";background-color:var(--mockup-dot-1);width:.6rem;height:.6rem;box-shadow:1rem 0 0 var(--mockup-dot-2),calc(1rem * 2) 0 0 var(--mockup-dot-3);inset-inline-start:1rem;border-radius:9999px;position:absolute;top:50%;transform:translateY(-50%)}.mockup-browser-input{min-height:1.75rem;color:var(--color-base-content);background-color:var(--color-base-100);border:1px solid var(--color-base-300);white-space:nowrap;text-overflow:ellipsis;border-radius:9999px;flex:1;align-items:center;padding-inline:.875rem;font-size:1rem;display:flex;overflow:hidden}.mockup-plain{--mockup-dot-1:currentColor}@supports (color:color-mix(in lab,red,red)){.mockup-plain{--mockup-dot-1:color-mix(in oklab,currentColor 30%,transparent)}}.mockup-plain{--mockup-dot-2:currentColor}@supports (color:color-mix(in lab,red,red)){.mockup-plain{--mockup-dot-2:color-mix(in oklab,currentColor 30%,transparent)}}.mockup-plain{--mockup-dot-3:currentColor}@supports (color:color-mix(in lab,red,red)){.mockup-plain{--mockup-dot-3:color-mix(in oklab,currentColor 30%,transparent)}}.mockup-code{border-radius:var(--radius-box,.5rem);background-color:var(--color-neutral);width:100%;min-width:18rem;color:var(--color-neutral-content);padding-block:1.25rem;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:1rem;line-height:1.6;position:relative;overflow:auto hidden}.mockup-code pre{white-space:pre;padding-inline:1.25rem;position:relative}.mockup-code pre[data-prefix]:before{content:attr(data-prefix);text-align:end;opacity:.4;-webkit-user-select:none;user-select:none;width:2ch;margin-inline-end:.75rem;display:inline-block}.mockup-phone{background-color:var(--color-neutral);box-shadow:0 0 0 1px var(--color-base-content),0 14px 34px -14px #0000008c;border-radius:2.75rem;padding:.7rem;display:inline-block;position:relative}@supports (color:color-mix(in lab,red,red)){.mockup-phone{box-shadow:0 0 0 1px color-mix(in oklab,var(--color-base-content) 20%,transparent),0 14px 34px -14px #0000008c}}.mockup-phone:before{content:"";z-index:1;background-color:var(--color-neutral);top:.7rem;border-end-end-radius:1rem;border-end-start-radius:1rem;width:40%;height:1.1rem;position:absolute;inset-inline-start:50%;transform:translate(-50%)}.mockup-phone-display{aspect-ratio:9/19;background-color:var(--color-base-100);width:15rem;color:var(--color-base-content);box-shadow:inset 0 0 0 1px var(--color-base-content);border-radius:2.1rem;overflow:hidden}@supports (color:color-mix(in lab,red,red)){.mockup-phone-display{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-base-content) 14%,transparent)}}}