@import "https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&display=swap";@scope(.lab--quotes){[id]:target{outline:1px solid var(--color-text-alt)}@media screen and (width>=64em){#examples{grid-template-columns:repeat(3,1fr);gap:2vw;display:grid}}#example-1,#example-2{padding:var(--spacing-r);border:var(--border-width-l) solid var(--color-border);margin-block-end:var(--spacing-l)}#example-1 blockquote{margin-block:var(--spacing-l);margin-trim:block;text-transform:uppercase;border-inline-start:var(--border-width-l) solid var(--color-border);margin-inline:0;padding-inline-start:var(--spacing-r)}#example-1 blockquote p{font-size:var(--font-size-l);font-variation-settings:var(--narrow-semi)}#example-1 blockquote footer{align-items:center;gap:var(--spacing-s);font-size:var(--font-size-2xs);text-align:left;margin-block:0;display:flex}#example-2 blockquote{margin-block:var(--spacing-l);margin-trim:block;text-transform:unset;margin-inline:0}#example-2 blockquote p{margin-block:var(--spacing-s);text-transform:unset;font-family:Lobster Two,cursive;font-size:3rem;font-style:italic;font-weight:700}#example-2 blockquote div{align-items:center;gap:0 var(--spacing-r);display:flex}#example-2 blockquote div:first-of-type:after,#example-2 blockquote div:last-of-type:before{content:"";height:var(--border-width-l);background-color:var(--color-border);flex:1;display:block}article small{font-size:var(--font-size-2xs)}[id*=demo-]{margin-trim:block;margin-inline:0}[id*=demo-] p{font-variation-settings:var(--normal-semi);text-transform:uppercase}#demo-2{padding-inline:var(--spacing-r);border-inline-start:var(--border-width-r) solid var(--color-border);border-inline-end:var(--border-width-r) solid var(--color-border)}#demo-3{padding-block:var(--spacing-r);border-block-start:var(--border-width-r) solid var(--color-border);border-block-end:var(--border-width-r) solid var(--color-border)}#demo-4{padding-inline:var(--spacing-r);border-inline-start:var(--border-width-l) solid var(--color-border);border-inline-end:var(--border-width-l) solid var(--color-border)}#demo-5{padding-block:var(--spacing-r);border-block-start:var(--border-width-l) solid var(--color-border);border-block-end:var(--border-width-l) solid var(--color-border)}#demo-6{flex-direction:column;align-items:center;display:flex}#demo-6:before,#demo-6:after{content:"";width:80px;height:var(--border-width-l);background-color:var(--color-border);display:block}#demo-6:before{margin-block-end:var(--spacing-s)}#demo-6:after{margin-block-start:var(--spacing-s)}#demo-7{padding-inline:64px;position:relative}#demo-7 img:first-of-type,#demo-7 img:last-of-type{position:absolute}#demo-7 img:first-of-type{top:0;left:0}#demo-7 img:last-of-type{bottom:0;right:0}#demo-7 footer{text-align:left}#demo-8 img{text-align:center;margin-inline:auto;display:block}#demo-9{flex-direction:column;align-items:center;display:flex}#demo-9:after{content:"";width:80px;height:var(--border-width-l);background-color:var(--color-border);display:block}#demo-10 div{align-items:center;gap:0 var(--spacing-r);display:flex}#demo-10 div:after,#demo-10 div:before{content:"";height:var(--border-width-l);background-color:var(--color-border);flex:1;display:block}#demo-11 div{align-items:center;gap:0 var(--spacing-r);display:flex}#demo-11 div:first-of-type:after,#demo-11 div:last-of-type:before{content:"";height:var(--border-width-l);background-color:var(--color-border);flex:1;display:block}#demo-12{border-block-end:var(--border-width-l) solid var(--color-border);border-inline-end:var(--border-width-l) solid var(--color-border);padding-block-end:var(--spacing-r);padding-inline-end:var(--spacing-r)}#demo-13{gap:0 var(--spacing-r);display:flex}#demo-13 div{align-items:center;gap:var(--spacing-s) 0;flex-direction:column;width:48px;display:flex}#demo-13 div img:last-of-type{flex:1}#demo-14{border-block-end:var(--border-width-l) solid var(--color-border);border-inline-end:var(--border-width-l) solid var(--color-border)}#demo-14 div{align-items:start;gap:0 var(--spacing-r);display:flex}#demo-14 div:first-of-type:after{content:"";height:var(--border-width-l);background-color:var(--color-border);flex:1;display:block}#demo-14 p{padding-block-end:var(--spacing-r);padding-inline-end:var(--spacing-r)}#demo-15{padding:var(--spacing-r);border:var(--border-width-l) solid var(--color-border);border-radius:.5rem}#demo-16{flex-direction:column;align-items:center;display:flex}#demo-16:before,#demo-16:after{content:"";width:80px;height:var(--border-width-l);background-color:var(--color-border);transition:width .3s ease-in-out;display:block}#demo-16:hover:before,#demo-16:hover:after{width:100%}#demo-16:before{margin-block-end:var(--spacing-s)}#demo-16:after{margin-block-start:var(--spacing-s)}#demo-17 img{text-align:center;transform-origin:50%;margin-inline:auto;transition:scale .3s ease-in-out;display:block;scale:.5}#demo-17:hover img{scale:1}#demo-18 div{align-items:center;gap:0 var(--spacing-r);display:flex}#demo-18 div:first-of-type{justify-content:start}#demo-18 div:last-of-type{justify-content:end}#demo-18 div:first-of-type:after,#demo-18 div:last-of-type:before{content:"";height:var(--border-width-l);background-color:var(--color-border);flex:0;transition:flex .3s ease-in-out .3s;display:block}#demo-18:hover div:first-of-type:after,#demo-18:hover div:last-of-type:before{flex:1}#demo-18 img{transform-origin:50%;transition:scale .3s ease-in-out;scale:.5}#demo-18:hover img{scale:1}#demo-19{--a:90deg;--h:1em;--p:18%;--r:1.2em;--b:5px;--c1:var(--color-base);--c2:var(--color-border);padding:var(--spacing-r);border-radius:var(--r) var(--r) min(var(--r),100% - var(--p) - var(--h)*tan(var(--a)/2)) min(var(--r),var(--p) - var(--h)*tan(var(--a)/2))/var(--r);clip-path:polygon(0 100%,0 0,100% 0,100% 100%, min(100%,var(--p) + var(--h)*tan(var(--a)/2)) 100%, var(--p) calc(100% + var(--h)), max(0% ,var(--p) - var(--h)*tan(var(--a)/2)) 100%);background:var(--c1);border-image:conic-gradient(var(--c1) 0 0) fill 0/ var(--r) max(0%,100% - var(--p) - var(--h)*tan(var(--a)/2)) 0 max(0%,var(--p) - var(--h)*tan(var(--a)/2))/0 0 var(--h) 0;margin-block-end:var(--spacing-l);position:relative}#demo-19 footer{align-items:center;gap:var(--spacing-s);display:flex}#demo-19 footer img{border-radius:48px;inline-size:48px}#demo-19:before{content:"";z-index:-1;padding:var(--b);border-radius:inherit;clip-path:polygon(0 100%,0 0,100% 0,100% 100%, min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)) calc(100% - var(--b)), var(--p) calc(100% + var(--h) - var(--b)/sin(var(--a)/2)), max(var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)) calc(100% - var(--b)));background:var(--c2) content-box;border-image:conic-gradient(var(--c2) 0 0) fill 0/ var(--r) max(var(--b),100% - var(--p) - var(--h)*tan(var(--a)/2)) 0 max(var(--b),var(--p) - var(--h)*tan(var(--a)/2))/0 0 var(--h) 0;position:absolute;inset:0}#demo-20{--b:3em;--p:50%;--r:1.2em;padding:var(--spacing-r);border-radius:var(--r) var(--r) min(var(--r),100% - var(--p) - var(--b)/4) min(var(--r),var(--p) - var(--b)/4)/var(--r);background-color:var(--color-base);text-align:center;margin-block-end:var(--spacing-l);position:relative}#demo-20 img{filter:drop-shadow(0 5px .5rem #140f0a);border-radius:84px;inline-size:84px;margin-inline:auto;display:block}#demo-20:before{content:"";top:100%;left:clamp(var(--b)/-2,var(--p) - 3*var(--b)/4,100% - var(--b));width:var(--b);aspect-ratio:1;background:inherit;--g:#000 calc(100% - 1px),#0000;-webkit-mask:radial-gradient(circle closest-side at 12% 88%,var(--g)), radial-gradient(20% 20% at 52% 55%,var(--g)), radial-gradient(25% 25% at 75% 0,var(--g));position:absolute}#demo-21{--s:20px;--w:400px;padding:calc(3*var(--s)/2);width:round(var(--w),4*var(--s));border:calc(2*var(--s)) solid #0000;box-sizing:border-box;color:#140f0a;text-align:center;mask:conic-gradient(#000 0 0) no-repeat 50%/calc(100% - 6*var(--s)) calc(100% - 6*var(--s)), radial-gradient(var(--s),#000 100%,#0000 calc(100% + 1px)) 0 0/calc(4*var(--s)) calc(4*var(--s)), radial-gradient(var(--s),#0000 calc(100% - 1px),#000) var(--s) var(--s)/calc(2*var(--s)) calc(2*var(--s)) padding-box;background-color:#fff}#demo-22 p{text-transform:unset;font-family:Lobster Two,cursive;font-size:1.5rem;font-style:italic;font-weight:700}#demo-22 div{align-items:center;gap:0 var(--spacing-r);display:flex}#demo-22 div:first-of-type:after,#demo-22 div:last-of-type:before{content:"";height:var(--border-width-l);background-color:var(--color-border);flex:1;display:block}#demo-22 div:last-of-type img{border-radius:64px;inline-size:64px;display:block}}@media (prefers-reduced-motion:reduce){.lab--quotes *,.lab--quotes :before,.lab--quotes :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}