@charset "UTF-8";@import"//cdn.jsdelivr.net/gh/snz-hayden/toolo/fonts/notosans_kr/notosans_kr_ver2.css";#header{position:relative;width:100%;padding:37px 0;background-color:#fff;transition:background-color .2s ease-in}#header.sticky{position:fixed;top:0;background-color:#1da1f2;z-index:9}#header.sticky .header-logo a{background:url(/build/assets/toolo-logo-sticky-D0btPTGg.png) center center/cover no-repeat}#header.sticky path{stroke:#fff}#headSvg{position:absolute;top:28px;left:80px}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.header-logo a{display:block;position:relative;width:77px;height:27px;margin:0 auto;background:url(/build/assets/toolo-logo-CIzxJEKI.png) center center/cover no-repeat;text-indent:-9999px}.header-logo a:after{content:"";display:block;position:absolute;top:-10px;right:-32px;width:34px;height:34px;background:url(/build/assets/toolo-logo-deco-BiCKhOfn.png) center center/cover no-repeat;animation:rotate 3s linear infinite both}.header-logo.white a{width:100px;height:34px;background:url(/build/assets/toolo-logo-white-BH5QJjJC.png) center center/cover no-repeat}.header-logo.white a:after{display:none}svg{width:54px;height:40px;cursor:pointer;transform:translateZ(0)}path{fill:none;transition:stroke-dashoffset .5s cubic-bezier(.25,-.25,.75,1.25),stroke-dasharray .5s cubic-bezier(.25,-.25,.75,1.25);stroke-width:25px;stroke-linecap:round;stroke:#1da1f2;stroke-dashoffset:0px}path#gnbBtnTop,path#gnbBtnBottom{stroke-dasharray:240px 950px}path#gnbBtnMiddle{stroke-dasharray:240px 240px}.cross path#gnbBtnTop,.cross path#gnbBtnBottom{stroke-dashoffset:-650px}.cross path#gnbBtnMiddle{stroke-dashoffset:-115px;stroke-dasharray:1px 220px}#footer{width:100%;line-height:2;padding:29px 0;color:#fff;background-color:#05304a;font-size:12px;font-weight:300;text-align:center}.service-list{display:flex;flex-wrap:wrap;align-items:center;margin:0 -10px}.service-list li{margin-top:30px;flex-basis:25%;align-self:stretch;padding:0 10px}.service-list li a:hover .service-box{padding:25px}.service-list li a:hover .service-box:after{opacity:.1}.service-box{position:relative;height:100%;padding:20px;border-radius:10px;transition:padding .4s cubic-bezier(.23,1,.32,1)}.service-box:after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0;transition:opacity .3s}.service-title{display:flex;position:relative;flex-direction:column;justify-content:center;height:100%;padding:29px 10px;color:#fff;border:2px dashed #fff;border-radius:10px;text-align:center;z-index:1}.service-title span{display:block;color:#fff9;font-size:16px;font-weight:300;letter-spacing:-.64px}.service-title .service-category{margin-bottom:5px}.service-title h3{font-size:30px;font-weight:500;letter-spacing:-1.2px}.service-title .service-wait{margin-top:7px}.design .service-box{background-color:#e91422}.design .service-title{background-color:#ff2a38;box-shadow:6.3px 7.8px 10px #c409163d}.image .service-box{background-color:#ee6a12}.image .service-title{background-color:#ff7c24;box-shadow:6.3px 7.8px 10px #c409163d}.html .service-box{background-color:#f8c534}.html .service-title{background-color:#ffd04a;box-shadow:6.3px 7.8px 10px #e0a70c3d}.font .service-box{background-color:#0f4c81}.font .service-title{background-color:#48689a;box-shadow:6.3px 7.8px 10px #0f4c813d}.css .service-box{background-color:#f8c534}.css .service-title{background-color:#ffd04a;box-shadow:6.3px 7.8px 10px #e0a70c3d}.em-table{width:100%;max-width:570px;margin:0 auto}.em-table table{width:100%;background-color:#fff;border-radius:10px}.em-table table th{padding:9px 0;color:#1da1f2;font-size:16px}.em-table table td{padding:10px 0;color:#333;border-top:1px solid #d2ecfc;font-size:14px}.em-table table .default{background-color:#d2ecfc}.em-table caption{margin-bottom:37px;color:#333;font-size:18px;font-weight:500}.picker-box{padding-left:70px}.picker-box .chrome-picker{width:100%!important}.content-wrap .flex-box .picker-info{padding-left:50px;text-align:left}.picker-info-text{padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid #ddd;color:#333;font-size:16px;line-height:1.4}.picker-info-text b{color:#1da1f2}.result-css{padding:25px 40px;background-color:#fff;border-radius:10px}.result-css label{display:block;margin-bottom:8px;color:#333;font-size:16px;font-weight:500}.result-css input{width:100%;height:36px;background-color:#f5f5f5;border:none;border-radius:10px;padding:0 20px}.result-css-title{display:block;color:#1da1f2;font-size:20px;font-weight:500;text-align:center}.result-box{margin-top:8px}.font_style-list li{position:relative;width:100%;padding:20px 80px 20px 10px;border-bottom:1px solid #ddd;text-align:left}.font_style-list li:last-child{border-bottom:none}.weight_100{font-weight:100}.weight_200{font-weight:200}.weight_300{font-weight:300}.weight_400{font-weight:400}.weight_500{font-weight:500}.weight_600{font-weight:600}.weight_700{font-weight:700}.weight_800{font-weight:800}.weight_900{font-weight:900}.font_style-category{font-size:14px}.font_style-preview{min-height:45px;line-height:1.5;margin-top:15px;font-size:30px}.font_style_select-btn{position:absolute;top:40px;right:0;padding:8px;border:none;background-color:transparent;color:#0f4c81;font-size:14px;transition:background-color .3s,color .3s}.font_style_select-btn:hover{background-color:#0f4c81;color:#fff}.font_embed-list li{line-height:1.5;margin-top:30px;text-align:left;word-break:break-all}.font_embed-title{color:#1da1f2;margin-bottom:15px;font-size:20px}.font_embed-link{padding:20px;color:#333;background-color:#f5f5f5;border-radius:20px;font-size:16px;font-weight:100}.dashed-wrap.dashed-wrap--embed{padding:60px 50px}.font-search .input-wrap .input-text{width:80%;margin-left:20px}.licence_link{display:inline-block;margin-top:20px;color:#1da1f2;text-decoration:underline}*{box-sizing:inherit}html{box-sizing:border-box}html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,a,em,img,small,strong,sub,sup,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,footer,header,menu,nav,section,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}h1,h2,h3,h4,h5,h6,li{line-height:1}img{max-width:100%}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}button{cursor:pointer}button:focus{outline:none}a{color:inherit;text-decoration:none}textarea{resize:none}html,input,button,textarea{font-family:S-CoreDream,sans-serif,sans-serif;font-size:16px}@font-face{font-family:S-CoreDream;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:S-CoreDream;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:S-CoreDream;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff) format("woff");font-weight:500;font-style:normal}@font-face{font-family:S-CoreDream;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff) format("woff");font-weight:600;font-style:normal}::-moz-selection{color:#fff;background-color:#1da1f2}::selection{color:#fff;background-color:#1da1f2}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#fff;border-radius:10px}::-webkit-scrollbar-thumb{height:50px;width:50px;background:#1da1f2;border-radius:8px}.sz-wrap{width:100%;max-width:1300px;margin:0 auto}.blind{visibility:hidden;overflow:hidden;width:0;height:0;font-size:0;line-height:0}.clearfix:after{content:"";display:block;clear:both}#navigation{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:10}.nav-layer{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000080}.nav-container{position:fixed;top:0;left:-500px;width:500px;height:100%;background-color:#fff;z-index:1;transition:left 1.2s .5s cubic-bezier(.215,.61,.355,1)}.nav-header{position:relative;width:100%;padding:33px 0;background-color:#1da1f2}#navSvg{position:absolute;top:7px;left:66px}#navSvg svg{width:80px;height:80px}#navSvg path{stroke:#fff}#nav{padding:80px}#navigation.active .nav-container{left:0}.tool-category{margin-bottom:36px}.category-name{padding-bottom:10px;margin-bottom:20px;color:#acacac;border-bottom:1px solid #acacac;font-size:16px;font-weight:300}.tool-list li{margin-bottom:20px;color:#333;font-size:20px;font-weight:300;text-indent:20px}.tool-list li a{color:inherit}.tool-list li a:hover{color:#1da1f2;font-weight:500}.tool-list li a:hover:before{content:"";display:inline-block;width:16px;height:16px;margin-right:7px;background:url(/build/assets/deco-icon-B3UK1Ubh.png) center center/cover no-repeat;vertical-align:0px;animation:rotate 3s linear infinite both}.tool-list li .wait{color:#acacac;font-size:14px}.default-btn{padding:7px 25px;color:#333;font-size:16px;background-color:transparent;border:1px solid #1da1f2;border-radius:20px;letter-spacing:-.64px;vertical-align:middle;font-family:S-CoreDream;transition:background-color .3s}.default-btn:focus,.default-btn:hover{color:#fff;background-color:#1da1f2}#container{min-height:calc(100vh - 175px)}.content-wrap{padding-top:40px;padding-bottom:100px}.top-title{padding:70px 0;color:#fff;background-color:#1da1f2;text-align:center}.top-title h2{margin-bottom:7px;font-size:32px;font-weight:500}.top-title p{line-height:1.3;font-size:20px;font-weight:300}.top-title.design{background-color:#ff2a38}.top-title.font{background-color:#0f4c81}.top-title.css{background-color:#f8c534}.gray-wrap{padding:40px;background-color:#f1f1f1;border-radius:20px;text-align:center}.gray-wrap.top{margin-bottom:40px}.gray-wrap .gray-title{color:#333;font-size:24px;font-weight:500;margin-bottom:40px}.sub-title{margin-bottom:28px;color:#333;font-size:20px;font-weight:500}.sub-text{margin-top:30px;line-height:1.5;color:#333;font-size:16px;font-weight:300}.input-wrap{padding:22px 40px;background-color:#d2ecfc;border-radius:40px}.input-wrap label{display:inline-block;margin-right:15px;color:#333;font-size:20px;font-weight:500;vertical-align:middle}.input-wrap .input-box{display:inline-block;position:relative}.input-wrap input{width:248px;height:36px;padding:0 45px 0 30px;color:#333;border:1px solid transparent;border-radius:18px}.input-wrap input:focus{border:1px solid #1da1f2;outline:none}.input-wrap .input-text{width:100%;height:40px}.input-wrap .input-tail{position:absolute;top:4px;right:18px;color:#999;font-size:16px}.input-wrap.full,.input-wrap.full .input-box{width:100%}.input-wrap.white{display:inline-block;background-color:#fff}.input-wrap.white label{font-size:18px;font-weight:400}.input-wrap.white input{border:1px solid #acacac}.input-wrap.white input:focus{border:1px solid #1da1f2;outline:none}.input-wrap.white .default-btn{margin-left:15px}.flex-box{display:flex;margin-left:-20px}.flex-box .flex-item{flex:1;align-self:stretch;padding-left:20px}.right_sidebar{margin-bottom:40px}.right_sidebar .flex-item:first-child{flex-basis:70%}.right_sidebar .flex-item:last-child{flex-basis:30%}.dashed-wrap{height:100%;padding:60px;border:2px dashed #acacac;border-radius:60px;text-align:center}.dashed-wrap.left{text-align:left}.content-title{margin-bottom:30px;color:#333;font-size:30px;font-weight:500;letter-spacing:-1.2px}.deco-text:before{content:"";display:inline-block;width:16px;height:16px;margin-right:7px;background:url(/build/assets/deco-icon-B3UK1Ubh.png) center center/cover no-repeat;vertical-align:-2px}.info-wrap{margin-top:40px}.info-title{margin-bottom:17px;color:#1da1f2;font-size:20px;font-weight:500}.info-list{display:inline-block}.info-list li{line-height:1.5;color:#333;font-size:16px;font-weight:300;text-align:left}.result-wrap{width:100%;max-width:1180px;padding:20px 10px;margin:0 auto 40px;color:#333;background-color:#d2ecfc;border-radius:40px;font-size:20px;font-weight:500;text-align:center}.result-wrap .result{display:inline-block;margin-left:25px;font-size:30px;vertical-align:-3px}form .default-btn{display:block;width:100%;max-width:1180px;margin:40px auto}.link-list{margin-left:-20px}.link-list:after{content:"";display:block;clear:both}.link-list li{float:left;width:33.33%;height:300px;padding-left:20px;margin-top:30px}.link-list li .dashed-wrap{padding:30px 40px;transition:box-shadow .3s}.link-list li .content-title{padding-bottom:25px;margin-bottom:15px;border-bottom:1px solid #acacac;text-align:left}.link-list li .content-title:after{content:"";display:block;clear:both}.link-list li .font-title{color:#1da1f2;font-size:24px;font-weight:500}.link-list li .font-company{display:block;margin-bottom:10px;font-size:16px;font-weight:400}.link-list li .font-text{line-height:1.5;height:120px;font-size:40px;text-align:left;word-break:break-all;overflow:auto}.link-list li:hover .dashed-wrap{box-shadow:6.3px 7.8px 10px #0000001a}.menu-wrap{position:sticky;top:0;z-index:1;background-color:#ffffffe6;display:flex;flex-direction:column;align-items:center;justify-content:center}.menu-type.css{margin:30px 0 15px}.menu-type.css.category{top:65px;margin:0 0 30px}.menu-type.css.category li{font-size:.8rem}.menu-type.css ul{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:15px;padding:0 20px}.menu-type.css ul li{cursor:pointer;padding:.2rem .3rem}.menu-type.css ul li:hover{transition:.3s;background-color:red;color:#fff}.menu-type.css ul li.checked{background-color:red;color:#fff}.Hello{height:1000vh}.css-reference-content{padding:0 3rem 3rem;overflow:hidden}.css-reference-content .button-toggle{background:#23d160;color:#fff;font-size:.8rem;border-radius:3px;box-shadow:0 2px 2px #0003;cursor:pointer;font-weight:700;text-align:center;transition-duration:.3s;transition-property:background,box-shadow,color,transform;will-change:box-shadow;border:none;line-height:1.6;padding:.6em 1em;display:inline-block;margin-top:1rem}.css-reference-content .button-toggle.positioning:before{content:"Enable position fixed"}.css-reference-content .button-toggle.play-ani:before{content:"▶ Play animations"}.css-reference-content .button-toggle.play-ani.off{background:#ff4538}.css-reference-content .button-toggle.play-ani.off:before{content:"￭ Stop"}.css-reference-content .button-toggle:hover{box-shadow:0 4px 8px #0003;transform:translateY(-1px)}.css-reference-content .name{font-size:1.25rem;font-weight:700;background-color:#d2ecfc;border-radius:40px;text-align:center;padding:1.25rem 0}.css-reference-content .define{font-size:1.2rem;text-align:center;margin-top:.5rem}.css-reference-content .contents-tab{display:flex;align-items:flex-start;gap:2rem;padding:2rem 0 0}.css-reference-content .contents-tab .property-name{background:#ffdd57;border-radius:2px;color:#000000b3;display:inline-block;padding:.3rem;vertical-align:top;cursor:pointer;position:relative}.css-reference-content .contents-tab .property-name:hover:before{opacity:1;visibility:visible}.css-reference-content .contents-tab .property-name:before{content:"Click to copy";background-color:#333;border-radius:2px;bottom:100%;color:#fff;font-size:.6rem;font-weight:400;left:50%;transform:translate(-50%,-4px);line-height:1.2;padding:.5em .6em;pointer-events:none;position:absolute;text-align:center;white-space:nowrap;opacity:0;visibility:hidden}.css-reference-content .contents-tab .property-name.copied:before{content:"Copied!";background:#23d160}.css-reference-content .contents-tab .property-name-wrap{display:flex;align-items:center;justify-content:space-between}.css-reference-content .contents-tab .property-name-default{box-shadow:inset 0 0 0 1px #ff4538;color:#ff4538;display:inline-block;padding:.1em .5em .15em;vertical-align:top;border-radius:2px;cursor:pointer;position:relative}.css-reference-content .contents-tab .property-name-default.style2{box-shadow:inset 0 0 0 1px #23d160;color:#23d160}.css-reference-content .contents-tab .property-name-default-hover{position:absolute;top:-30px;left:50%;transform:translate(-50%);width:200px;text-align:center;display:block;font-size:.7rem;color:#fff;background-color:#333;padding:.3rem;border-radius:3px;opacity:0;transition:.2s}.css-reference-content .contents-tab .property-name-default:hover .property-name-default-hover{opacity:1}.css-reference-content .contents-tab .property-define{margin-top:.5em}.css-reference-content .contents-tab .property-define ul{margin-left:1.5rem}.css-reference-content .contents-tab .property-define ul li{list-style:disc;line-height:1.5}.css-reference-content .contents-tab .contents-title{width:60%}.css-reference-content .contents-tab .contents-example{width:40%}.css-reference-content .contents-tab .contents-output .example-background-output{padding:.8rem 1rem}.css-reference-content .contents-tab .contents-output .example-background-output strong{font-weight:700}.css-reference-content .contents-tab .contents-output .example-background-output.p-basic{padding:0}.css-reference-content .contents-tab .contents-output .example-background-output.attachment{background:url(/build/assets/ex-bg-img-CIBsRQ5S.png) center center/cover no-repeat;height:200px}.css-reference-content .contents-tab .contents-output .example-background-output.attachment p{background-color:#fff;padding:.5rem}.css-reference-content .contents-tab .contents-output .example-background-output.attachment.scroll{background-attachment:scroll}.css-reference-content .contents-tab .contents-output .example-background-output.attachment.fixed{background-attachment:fixed}.css-reference-content .contents-tab .contents-output .example-background-output.clip{background:#05ffb0;border:4px dashed;padding:2em}.css-reference-content .contents-tab .contents-output .example-background-output.clip.border-box{background-clip:border-box}.css-reference-content .contents-tab .contents-output .example-background-output.clip.padding-box{background-clip:padding-box}.css-reference-content .contents-tab .contents-output .example-background-output.clip.content-box{background-clip:content-box}.css-reference-content .contents-tab .contents-output .example-background-output.color.transparent{background-color:transparent}.css-reference-content .contents-tab .contents-output .example-background-output.color.red{background-color:red}.css-reference-content .contents-tab .contents-output .example-background-output.color.select{background-color:#05ffb0}.css-reference-content .contents-tab .contents-output .example-background-output.color.rgb{background-color:#3273dc}.css-reference-content .contents-tab .contents-output .example-background-output.color.rgba{background-color:#3273dc4d}.css-reference-content .contents-tab .contents-output .example-background-output.color.hsl{background-color:#ff470f}.css-reference-content .contents-tab .contents-output .example-background-output.color.hsla{background-color:#ff470f99}.css-reference-content .contents-tab .contents-output .example-background-output.image{height:200px}.css-reference-content .contents-tab .contents-output .example-background-output.image.none{background-image:none}.css-reference-content .contents-tab .contents-output .example-background-output.image.url{background-image:unset}.css-reference-content .contents-tab .contents-output .example-background-output.image.gradient1{background-image:linear-gradient(red,#00f)}.css-reference-content .contents-tab .contents-output .example-background-output.image.gradient2{background-image:linear-gradient(45deg,red,#00f)}.css-reference-content .contents-tab .contents-output .example-background-output.image.r-gradient1{background-image:radial-gradient(green,purple)}.css-reference-content .contents-tab .contents-output .example-background-output.image.r-gradient2{background-image:radial-gradient(circle,green,purple)}.css-reference-content .contents-tab .contents-output .example-background-output.image.r-gradient3{background-image:radial-gradient(circle,green,purple 20%,orange)}.css-reference-content .contents-tab .contents-output .example-background-output.image.r-gradient4{background-image:radial-gradient(circle closest-side,green,purple 20%,orange)}.css-reference-content .contents-tab .contents-output .example-background-output.image.r-gradient5{background-image:radial-gradient(circle closest-side at 45px 45px,green,purple 20%,orange)}.css-reference-content .contents-tab .contents-output .example-background-output.origin{background-image:url(/build/assets/ex-bg-img-CIBsRQ5S.png);background-repeat:no-repeat;background-size:64px 64px;border:4px dashed;padding:2em}.css-reference-content .contents-tab .contents-output .example-background-output.origin p{background-color:#05ffb080;padding:1em}.css-reference-content .contents-tab .contents-output .example-background-output.origin.padding-box{background-origin:padding-box}.css-reference-content .contents-tab .contents-output .example-background-output.origin.border-box{background-origin:border-box}.css-reference-content .contents-tab .contents-output .example-background-output.origin.content-box{background-origin:content-box}.css-reference-content .contents-tab .contents-output .example-background-output.position{background-image:url(/build/assets/ex-bg-img-CIBsRQ5S.png);background-repeat:no-repeat;background-size:64px 64px;height:150px}.css-reference-content .contents-tab .contents-output .example-background-output.position.type1{background-position:0% 0%}.css-reference-content .contents-tab .contents-output .example-background-output.position.type2{background-position:bottom right}.css-reference-content .contents-tab .contents-output .example-background-output.position.type3{background-position:center center}.css-reference-content .contents-tab .contents-output .example-background-output.repeat{background-image:url(/build/assets/ex-bg-img-CIBsRQ5S.png);background-size:64px 64px;height:150px}.css-reference-content .contents-tab .contents-output .example-background-output.repeat.repeat{background-repeat:repeat}.css-reference-content .contents-tab .contents-output .example-background-output.repeat.repeat-x{background-repeat:repeat-x}.css-reference-content .contents-tab .contents-output .example-background-output.repeat.repeat-y{background-repeat:repeat-y}.css-reference-content .contents-tab .contents-output .example-background-output.repeat.no-repeat{background-repeat:no-repeat}.css-reference-content .contents-tab .contents-output .example-background-output.size{background-image:url(/build/assets/ex-bg-img-CIBsRQ5S.png);background-size:64px 64px;height:150px}.css-reference-content .contents-tab .contents-output .example-background-output.size.auto{background-size:auto auto}.css-reference-content .contents-tab .contents-output .example-background-output.size.pixel{background-size:120px 80px}.css-reference-content .contents-tab .contents-output .example-background-output.size.percentage{background-size:100% 50%}.css-reference-content .contents-tab .contents-output .example-background-output.size.contain{background-size:contain}.css-reference-content .contents-tab .contents-output .example-background-output.size.cover{background-size:cover}.css-reference-content .contents-tab .contents-output .example-background-output .border{border-style:solid;padding:.8em 1em}.css-reference-content .contents-tab .contents-output .example-background-output .border.bottom-width.type1{border-bottom-width:0}.css-reference-content .contents-tab .contents-output .example-background-output .border.bottom-width.type2{border-bottom-width:4px}.css-reference-content .contents-tab .contents-output .example-background-output .border.left-width.type1{border-left-width:0}.css-reference-content .contents-tab .contents-output .example-background-output .border.left-width.type2{border-left-width:4px}.css-reference-content .contents-tab .contents-output .example-background-output .border.right-width.type1{border-right-width:0}.css-reference-content .contents-tab .contents-output .example-background-output .border.right-width.type2{border-right-width:4px}.css-reference-content .contents-tab .contents-output .example-background-output .border.top-width.type1{border-top-width:0}.css-reference-content .contents-tab .contents-output .example-background-output .border.top-width.type2{border-top-width:4px}.css-reference-content .contents-tab .contents-output .example-background-output .box-sizing{padding:.8em 1em;position:relative}.css-reference-content .contents-tab .contents-output .example-background-output .box-sizing.type1{box-sizing:content-box}.css-reference-content .contents-tab .contents-output .example-background-output .box-sizing.type2,.css-reference-content .contents-tab .contents-output .example-background-output .box-sizing.type2 .actual{box-sizing:border-box}.css-reference-content .contents-tab .contents-output .example-background-output .box-sizing.type2 .actual .box-red{height:33px;left:-12px;top:30px}.css-reference-content .contents-tab .contents-output .example-background-output .box-sizing .actual{border:12px solid #310736;display:block;padding:30px;position:relative;width:200px;text-align:center;background:#05ffb0;color:#310736;box-sizing:content-box}.css-reference-content .contents-tab .contents-output .example-background-output .box-sizing .actual span{background:#ffdd57;display:block;padding:5px 0}.css-reference-content .contents-tab .contents-output .example-background-output .box-sizing .actual .box-red{border:2px solid #ff4538;border-radius:3px;height:30px;position:absolute;text-align:left;left:30px;top:30px;width:196px}.css-reference-content .contents-tab .contents-output .example-background-output .box-sizing .actual .box-red:before{content:"200px";background:#ff4538;border-radius:1px 0 2px;color:#fff;display:inline-block;font-size:.8em;padding:0 6px 2px 4px;vertical-align:top}.css-reference-content .contents-tab .contents-output .example-background-output.height{max-height:400px}.css-reference-content .contents-tab .contents-output .example-background-output.height .height{display:block;line-height:1.2;padding:1em;border-radius:3px;background:#05ffb0;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.height .height.type1{height:auto}.css-reference-content .contents-tab .contents-output .example-background-output.height .height.type2{height:100px}.css-reference-content .contents-tab .contents-output .example-background-output .line-height{background:#05ffb0;color:#310736;padding:1em;display:block;border-radius:3px}.css-reference-content .contents-tab .contents-output .example-background-output .line-height.type1{line-height:normal}.css-reference-content .contents-tab .contents-output .example-background-output .line-height.type2{line-height:1.6}.css-reference-content .contents-tab .contents-output .example-background-output .line-height.type3{line-height:30px}.css-reference-content .contents-tab .contents-output .example-background-output .line-height.type4{line-height:.8em}.css-reference-content .contents-tab .contents-output .example-background-output .margin{background:#ccc;padding:1em}.css-reference-content .contents-tab .contents-output .example-background-output .margin .block{border-radius:0;padding:0}.css-reference-content .contents-tab .contents-output .example-background-output .margin .block.block{background:#f2f2f2;color:#4d4d4d;display:block;line-height:1.2;padding:1em}.css-reference-content .contents-tab .contents-output .example-background-output .margin .block.block-pink{background:#ff3860;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output .margin .block.block-alpha{position:relative;background:#05ffb0;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output .margin .block.block-yellow{background:#ffdd57;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output .margin .target{bottom:0;left:0;position:absolute;right:0;transform:translateY(100%);border:2px solid #4d4d4d;border-radius:3px}.css-reference-content .contents-tab .contents-output .example-background-output .margin .target.block-plum{border-color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output .margin .target:before{background-color:#310736;border-radius:1px 0 2px;color:#fff;content:"test";display:inline-block;font-size:.8em;padding:0 6px 2px 4px;vertical-align:top}.css-reference-content .contents-tab .contents-output .example-background-output .margin.bottom.type1 .block .target{display:none}.css-reference-content .contents-tab .contents-output .example-background-output .margin.bottom.type2 .block.block-alpha{margin-bottom:30px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.bottom.type2 .block .target{height:30px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.bottom.type2 .block .target:before{content:"30px"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.bottom.type3 .block.block-alpha{margin-bottom:2em}.css-reference-content .contents-tab .contents-output .example-background-output .margin.bottom.type3 .block .target{height:2em}.css-reference-content .contents-tab .contents-output .example-background-output .margin.bottom.type3 .block .target:before{content:"2em"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.bottom.type4 .block.block-alpha{margin-bottom:10%}.css-reference-content .contents-tab .contents-output .example-background-output .margin.bottom.type4 .block .target{bottom:auto;height:100px;top:100%;transform:rotate(-90deg) translate(-100%);transform-origin:top left;width:10%}.css-reference-content .contents-tab .contents-output .example-background-output .margin.bottom.type4 .block .target:before{content:"10%"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.bottom.type4 .block .target.block-plum{border-color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output .margin.left .target{bottom:0;left:0;position:absolute;top:0;transform:translate(-100%)}.css-reference-content .contents-tab .contents-output .example-background-output .margin.left.type1 .target{display:none}.css-reference-content .contents-tab .contents-output .example-background-output .margin.left.type2 .block.block-alpha{margin-left:50px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.left.type2 .block .target{width:50px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.left.type2 .block .target:before{content:"50px"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.left.type3 .block.block-alpha{margin-left:7em}.css-reference-content .contents-tab .contents-output .example-background-output .margin.left.type3 .block .target{width:7em}.css-reference-content .contents-tab .contents-output .example-background-output .margin.left.type3 .block .target:before{content:"7em"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.left.type4 .m-position{position:relative}.css-reference-content .contents-tab .contents-output .example-background-output .margin.left.type4 .block.block-alpha{margin-left:30%}.css-reference-content .contents-tab .contents-output .example-background-output .margin.left.type4 .target{width:30%;height:2.4em;left:0;top:3.2em;transform:none}.css-reference-content .contents-tab .contents-output .example-background-output .margin.left.type4 .target:before{content:"30%"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.left.type5 .m-position{position:relative}.css-reference-content .contents-tab .contents-output .example-background-output .margin.left.type5 .block.block-alpha{margin-left:auto;width:200px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.left.type5 .target{height:2.4em;left:0;right:200px;top:3.2em;transform:none;width:auto}.css-reference-content .contents-tab .contents-output .example-background-output .margin.left.type5 .target:before{content:"auto"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.right .target{bottom:0;position:absolute;right:0;top:0;left:unset;transform:translate(100%)}.css-reference-content .contents-tab .contents-output .example-background-output .margin.right.type1 .target{display:none}.css-reference-content .contents-tab .contents-output .example-background-output .margin.right.type2 .block.block-alpha{margin-right:50px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.right.type2 .block .target{width:50px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.right.type2 .block .target:before{content:"50px"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.right.type3 .block.block-alpha{margin-right:7em}.css-reference-content .contents-tab .contents-output .example-background-output .margin.right.type3 .block .target{width:7em}.css-reference-content .contents-tab .contents-output .example-background-output .margin.right.type3 .block .target:before{content:"7em"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.right.type4 .m-position{position:relative}.css-reference-content .contents-tab .contents-output .example-background-output .margin.right.type4 .block.block-alpha{margin-right:30%}.css-reference-content .contents-tab .contents-output .example-background-output .margin.right.type4 .target{width:30%;height:2.4em;right:0;top:3.2em;transform:none}.css-reference-content .contents-tab .contents-output .example-background-output .margin.right.type4 .target:before{content:"30%"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.right.type5 .m-position{position:relative}.css-reference-content .contents-tab .contents-output .example-background-output .margin.right.type5 .block.block-alpha{margin-right:auto;width:200px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.right.type5 .target{height:2.4em;left:200px;right:0;top:3.2em;transform:none;width:auto}.css-reference-content .contents-tab .contents-output .example-background-output .margin.right.type5 .target:before{content:"auto"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.top .target{left:0;position:absolute;right:0;top:0;transform:translateY(-100%)}.css-reference-content .contents-tab .contents-output .example-background-output .margin.top.type1 .block .target{display:none}.css-reference-content .contents-tab .contents-output .example-background-output .margin.top.type2 .block.block-alpha{margin-top:30px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.top.type2 .block .target{height:30px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.top.type2 .block .target:before{content:"30px"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.top.type3 .block.block-alpha{margin-top:2em}.css-reference-content .contents-tab .contents-output .example-background-output .margin.top.type3 .block .target{height:2em}.css-reference-content .contents-tab .contents-output .example-background-output .margin.top.type3 .block .target:before{content:"2em"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.top.type4 .block.block-alpha{margin-top:10%}.css-reference-content .contents-tab .contents-output .example-background-output .margin.top.type4 .block .target{height:100%;transform:rotate(-90deg);transform-origin:top left;width:10%}.css-reference-content .contents-tab .contents-output .example-background-output .margin.top.type4 .block .target:before{content:"10%"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.top.type4 .block .target.block-plum{border-color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic .container{margin-left:auto;margin-right:auto;max-width:700px;align-items:stretch;display:flex}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic .block.block-alpha{flex-grow:1;flex-shrink:1}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic .square{line-height:1.2;padding:0;color:#4d4d4d;text-align:center;background:#e6e6e6;align-items:center;border-radius:0;display:flex;height:auto;justify-content:center;width:auto}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic .square.square{font-size:.8em}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic .square.square-top{height:30px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic .square.square-top:before{content:"30px"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic .square.square-left{width:30px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic .square.square-left:before{content:"30px"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic .square.square-right{width:30px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic .square.square-right:before{content:"30px"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic .square.square-bottom{height:30px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic .square.square-bottom:before{content:"30px"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type3 .square.square-top{height:30px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type3 .square.square-top:before{content:"30px"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type3 .square.square-left{width:60px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type3 .square.square-left:before{content:"60px"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type3 .square.square-right{width:60px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type3 .square.square-right:before{content:"60px"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type3 .square.square-bottom{height:30px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type3 .square.square-bottom:before{content:"30px"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type4 .square.square-top{height:30px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type4 .square.square-top:before{content:"30px"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type4 .square.square-left{width:60px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type4 .square.square-left:before{content:"60px"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type4 .square.square-right{width:60px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type4 .square.square-right:before{content:"60px"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type4 .square.square-bottom{height:45px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type4 .square.square-bottom:before{content:"45px"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type5 .square.square-top{height:30px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type5 .square.square-top:before{content:"30px"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type5 .square.square-left{width:85px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type5 .square.square-left:before{content:"85px"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type5 .square.square-right{width:60px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type5 .square.square-right:before{content:"60px"}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type5 .square.square-bottom{height:45px}.css-reference-content .contents-tab .contents-output .example-background-output .margin.basic.type5 .square.square-bottom:before{content:"45px"}.css-reference-content .contents-tab .contents-output .example-background-output .max-height{display:block;line-height:1.2;padding:1em;border-radius:3px;background:#05ffb0;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output .max-height.type1{max-height:none}.css-reference-content .contents-tab .contents-output .example-background-output .max-height.type2{max-height:2000px}.css-reference-content .contents-tab .contents-output .example-background-output .max-height.type3{max-height:100px}.css-reference-content .contents-tab .contents-output .example-background-output .max-width{display:block;line-height:1.2;padding:1em;border-radius:3px;background:#05ffb0;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output .max-width.type1{max-width:none}.css-reference-content .contents-tab .contents-output .example-background-output .max-width.type2{max-width:2000px}.css-reference-content .contents-tab .contents-output .example-background-output .max-width.type3{max-width:150px}.css-reference-content .contents-tab .contents-output .example-background-output .min-height{display:block;line-height:1.2;padding:1em;border-radius:3px;background:#05ffb0;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output .min-height.type1{min-height:0}.css-reference-content .contents-tab .contents-output .example-background-output .min-height.type2{min-height:250px}.css-reference-content .contents-tab .contents-output .example-background-output .min-height.type3{min-height:5px}.css-reference-content .contents-tab .contents-output .example-background-output .min-width{display:block;line-height:1.2;padding:1em;border-radius:3px;background:#05ffb0;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output .min-width.type1{display:inline-block;min-width:0}.css-reference-content .contents-tab .contents-output .example-background-output .min-width.type2{display:inline-block;min-width:300px}.css-reference-content .contents-tab .contents-output .example-background-output .min-width.type3{display:inline-block;min-width:5px}.css-reference-content .contents-tab .contents-output .example-background-output .padding{background:#ccc;padding:1em}.css-reference-content .contents-tab .contents-output .example-background-output .padding .block{border-radius:0;padding:0}.css-reference-content .contents-tab .contents-output .example-background-output .padding .block.block{background:#f2f2f2;color:#4d4d4d;display:block;line-height:1.2}.css-reference-content .contents-tab .contents-output .example-background-output .padding .block.block-pink{background:#ff3860;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output .padding .block.block-alpha{position:relative;background:#05ffb0;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output .padding .block.block-yellow{background:#ffdd57;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output .padding .target{bottom:0;left:0;position:absolute;right:0;border:2px solid #4d4d4d;border-radius:3px}.css-reference-content .contents-tab .contents-output .example-background-output .padding .target.block-plum{border-color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output .padding .target:before{background-color:#310736;border-radius:1px 0 2px;color:#fff;content:"test";display:inline-block;font-size:.8em;padding:0 6px 2px 4px;vertical-align:top}.css-reference-content .contents-tab .contents-output .example-background-output .padding.bottom.type1 .block .target{display:none}.css-reference-content .contents-tab .contents-output .example-background-output .padding.bottom.type2 .block.block-alpha{padding-bottom:50px}.css-reference-content .contents-tab .contents-output .example-background-output .padding.bottom.type2 .block .target{height:50px}.css-reference-content .contents-tab .contents-output .example-background-output .padding.bottom.type2 .block .target:before{content:"50px"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.bottom.type3 .block.block-alpha{padding-bottom:7em}.css-reference-content .contents-tab .contents-output .example-background-output .padding.bottom.type3 .block .target{height:7em}.css-reference-content .contents-tab .contents-output .example-background-output .padding.bottom.type3 .block .target:before{content:"7em"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.bottom.type4 .block.block-alpha{padding-bottom:30%}.css-reference-content .contents-tab .contents-output .example-background-output .padding.bottom.type4 .block .target{height:30%}.css-reference-content .contents-tab .contents-output .example-background-output .padding.bottom.type4 .block .target:before{content:"30%"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.bottom.type4 .block .target.block-plum{bottom:0;height:60px;transform:rotate(-90deg) translateY(60px);transform-origin:bottom left;width:30%}.css-reference-content .contents-tab .contents-output .example-background-output .padding.left .block{padding:1em}.css-reference-content .contents-tab .contents-output .example-background-output .padding.left.type1 .target{display:none}.css-reference-content .contents-tab .contents-output .example-background-output .padding.left.type2 .block.block-alpha{padding-left:50px}.css-reference-content .contents-tab .contents-output .example-background-output .padding.left.type2 .block .target{width:50px;height:100%}.css-reference-content .contents-tab .contents-output .example-background-output .padding.left.type2 .block .target:before{content:"50px"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.left.type3 .block.block-alpha{padding-left:7em}.css-reference-content .contents-tab .contents-output .example-background-output .padding.left.type3 .block .target{width:7em;height:100%}.css-reference-content .contents-tab .contents-output .example-background-output .padding.left.type3 .block .target:before{content:"7em"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.left.type4 .block.block-alpha{padding-left:30%}.css-reference-content .contents-tab .contents-output .example-background-output .padding.left.type4 .block .target{width:30%;height:100%}.css-reference-content .contents-tab .contents-output .example-background-output .padding.left.type4 .block .target:before{content:"30%"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.right .block{padding:1em;text-align:right}.css-reference-content .contents-tab .contents-output .example-background-output .padding.right .block .target{bottom:0;right:0;position:absolute;top:0;left:unset}.css-reference-content .contents-tab .contents-output .example-background-output .padding.right.type1 .target{display:none}.css-reference-content .contents-tab .contents-output .example-background-output .padding.right.type2 .block.block-alpha{padding-right:50px}.css-reference-content .contents-tab .contents-output .example-background-output .padding.right.type2 .block .target{width:50px;height:100%}.css-reference-content .contents-tab .contents-output .example-background-output .padding.right.type2 .block .target:before{content:"50px"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.right.type3 .block.block-alpha{padding-right:7em}.css-reference-content .contents-tab .contents-output .example-background-output .padding.right.type3 .block .target{width:7em;height:100%}.css-reference-content .contents-tab .contents-output .example-background-output .padding.right.type3 .block .target:before{content:"7em"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.right.type4 .block.block-alpha{padding-right:30%}.css-reference-content .contents-tab .contents-output .example-background-output .padding.right.type4 .block .target{width:30%;height:100%}.css-reference-content .contents-tab .contents-output .example-background-output .padding.right.type4 .block .target:before{content:"30%"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.top .block .target{bottom:unset;top:0}.css-reference-content .contents-tab .contents-output .example-background-output .padding.top.type1 .block .target{display:none}.css-reference-content .contents-tab .contents-output .example-background-output .padding.top.type2 .block.block-alpha{padding-top:50px}.css-reference-content .contents-tab .contents-output .example-background-output .padding.top.type2 .block .target{height:50px}.css-reference-content .contents-tab .contents-output .example-background-output .padding.top.type2 .block .target:before{content:"50px"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.top.type3 .block.block-alpha{padding-top:7em}.css-reference-content .contents-tab .contents-output .example-background-output .padding.top.type3 .block .target{height:7em}.css-reference-content .contents-tab .contents-output .example-background-output .padding.top.type3 .block .target:before{content:"7em"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.top.type4 .block.block-alpha{padding-top:30%}.css-reference-content .contents-tab .contents-output .example-background-output .padding.top.type4 .block .target{height:30%}.css-reference-content .contents-tab .contents-output .example-background-output .padding.top.type4 .block .target.block-plum{top:60px;bottom:unset}.css-reference-content .contents-tab .contents-output .example-background-output .padding.top.type4 .block .target:before{content:"30%"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.top.type4 .block .target.block-plum{height:60px;top:0;transform:rotate(-90deg) translate(-100%);transform-origin:top left;width:30%}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic{background:unset;padding:0}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic .container{align-items:stretch;display:flex;margin-left:auto;margin-right:auto;max-width:700px}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic .block.block-alpha{flex-grow:1;flex-shrink:1}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic .square{line-height:1.2;padding:0;background:#03b27b;text-align:center;align-items:center;border-radius:0;color:#4d4d4d;display:flex;height:auto;justify-content:center;width:auto}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic .square.square{font-size:.8em}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic .square.square-top{height:30px}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic .square.square-top:before{content:"30px"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic .square.square-left{width:30px}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic .square.square-left:before{content:"30px"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic .square.square-right{width:30px}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic .square.square-right:before{content:"30px"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic .square.square-bottom{height:30px}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic .square.square-bottom:before{content:"30px"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type3 .square.square-top{height:30px}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type3 .square.square-top:before{content:"30px"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type3 .square.square-left{width:60px}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type3 .square.square-left:before{content:"60px"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type3 .square.square-right{width:60px}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type3 .square.square-right:before{content:"60px"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type3 .square.square-bottom{height:30px}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type3 .square.square-bottom:before{content:"30px"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type4 .square.square-top{height:30px}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type4 .square.square-top:before{content:"30px"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type4 .square.square-left{width:60px}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type4 .square.square-left:before{content:"60px"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type4 .square.square-right{width:60px}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type4 .square.square-right:before{content:"60px"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type4 .square.square-bottom{height:45px}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type4 .square.square-bottom:before{content:"45px"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type5 .square.square-top{height:30px}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type5 .square.square-top:before{content:"30px"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type5 .square.square-left{width:85px}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type5 .square.square-left:before{content:"85px"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type5 .square.square-right{width:60px}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type5 .square.square-right:before{content:"60px"}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type5 .square.square-bottom{height:45px}.css-reference-content .contents-tab .contents-output .example-background-output .padding.basic.type5 .square.square-bottom:before{content:"45px"}.css-reference-content .contents-tab .contents-output .example-background-output .width{display:block;line-height:1.2;padding:1em;border-radius:3px;background:#05ffb0;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output .width.type1{width:auto}.css-reference-content .contents-tab .contents-output .example-background-output .width.type2{width:240px}.css-reference-content .contents-tab .contents-output .example-background-output .width.type3{width:50%}.css-reference-content .contents-tab .contents-output .example-background-output.align{background:#f2f2f2;display:flex;flex-wrap:wrap;height:300px;padding:0;position:relative}.css-reference-content .contents-tab .contents-output .example-background-output.align .square{height:46px;margin:2px;width:30%;justify-content:center;line-height:1.2;padding:0;display:flex;border-radius:3px;text-align:center;align-items:center}.css-reference-content .contents-tab .contents-output .example-background-output.align .square:nth-child(2){height:96px}.css-reference-content .contents-tab .contents-output .example-background-output.align .square.square-plum{background:#310736;color:#fff}.css-reference-content .contents-tab .contents-output .example-background-output.align .box{height:150px;left:0;position:absolute;right:0;top:0;border:2px solid #4d4d4d;border-radius:3px}.css-reference-content .contents-tab .contents-output .example-background-output.align .box:before{background:#4d4d4d;border-radius:1px 0 2px;color:#fff;content:"";display:inline-block;font-size:.8em;padding:0 6px 2px 4px;vertical-align:top}.css-reference-content .contents-tab .contents-output .example-background-output.align .box.box-red{height:175px;border-color:#ff4538}.css-reference-content .contents-tab .contents-output .example-background-output.align .box.box-red:before{content:"First line";background:#ff4538}.css-reference-content .contents-tab .contents-output .example-background-output.align .box.box-green{height:125px;top:175px;border-color:#23d160}.css-reference-content .contents-tab .contents-output .example-background-output.align .box.box-green:before{content:"Second line";background:#23d160}.css-reference-content .contents-tab .contents-output .example-background-output.align .line{left:2px;position:absolute;right:2px;height:1px;top:0}.css-reference-content .contents-tab .contents-output .example-background-output.align .line.line-red{background:#ff4538}.css-reference-content .contents-tab .contents-output .example-background-output.align .line.line-red:before{background:#ff4538;border-radius:2px;color:#fff;content:"Line";display:inline-block;font-size:10px;height:15px;line-height:15px;margin-top:-6px;padding:0 4px;vertical-align:top}.css-reference-content .contents-tab .contents-output .example-background-output.align .line.line-default{background:#4d4d4d}.css-reference-content .contents-tab .contents-output .example-background-output.align .line.line-default:before{background:#4d4d4d;border-radius:2px;color:#fff;content:"Items";display:inline-block;font-size:10px;height:15px;line-height:15px;margin-top:-6px;padding:0 4px;vertical-align:top}.css-reference-content .contents-tab .contents-output .example-background-output.align.content{align-content:stretch}.css-reference-content .contents-tab .contents-output .example-background-output.align.content.type2{align-content:flex-start}.css-reference-content .contents-tab .contents-output .example-background-output.align.content.type2 .box.box-red{height:100px}.css-reference-content .contents-tab .contents-output .example-background-output.align.content.type2 .box.box-green{height:50px;top:100px}.css-reference-content .contents-tab .contents-output .example-background-output.align.content.type3{align-content:flex-end}.css-reference-content .contents-tab .contents-output .example-background-output.align.content.type3 .box.box-red{height:100px;top:150px}.css-reference-content .contents-tab .contents-output .example-background-output.align.content.type3 .box.box-green{height:50px;top:250px}.css-reference-content .contents-tab .contents-output .example-background-output.align.content.type4{align-content:center}.css-reference-content .contents-tab .contents-output .example-background-output.align.content.type4 .box.box-red{height:100px;top:75px}.css-reference-content .contents-tab .contents-output .example-background-output.align.content.type4 .box.box-green{height:50px;top:175px}.css-reference-content .contents-tab .contents-output .example-background-output.align.content.type5{align-content:space-between}.css-reference-content .contents-tab .contents-output .example-background-output.align.content.type5 .box.box-red{height:100px;top:0}.css-reference-content .contents-tab .contents-output .example-background-output.align.content.type5 .box.box-green{height:50px;top:250px}.css-reference-content .contents-tab .contents-output .example-background-output.align.content.type6{align-content:space-around}.css-reference-content .contents-tab .contents-output .example-background-output.align.content.type6 .box.box-red{height:100px;top:38px}.css-reference-content .contents-tab .contents-output .example-background-output.align.content.type6 .box.box-green{height:50px;top:213px}.css-reference-content .contents-tab .contents-output .example-background-output.align.items{align-items:flex-start}.css-reference-content .contents-tab .contents-output .example-background-output.align.items .square{height:50px;margin:0 2px;width:calc(20% - 4px)}.css-reference-content .contents-tab .contents-output .example-background-output.align.items .square:nth-child(2){height:100px}.css-reference-content .contents-tab .contents-output .example-background-output.align.items .square:nth-child(4){height:75px}.css-reference-content .contents-tab .contents-output .example-background-output.align.items.flex-end{align-items:flex-end}.css-reference-content .contents-tab .contents-output .example-background-output.align.items.flex-end .line{top:unset;bottom:0}.css-reference-content .contents-tab .contents-output .example-background-output.align.items.center{align-items:center}.css-reference-content .contents-tab .contents-output .example-background-output.align.items.center .line{top:50%;transform:translateY(-50%)}.css-reference-content .contents-tab .contents-output .example-background-output.align.items.baseline{align-items:baseline}.css-reference-content .contents-tab .contents-output .example-background-output.align.items.baseline .line{top:55px}.css-reference-content .contents-tab .contents-output .example-background-output.align.items.stretch{align-items:stretch}.css-reference-content .contents-tab .contents-output .example-background-output.align.items.stretch .square{height:auto}.css-reference-content .contents-tab .contents-output .example-background-output.align.items.stretch .line{display:none}.css-reference-content .contents-tab .contents-output .example-background-output.align.self{align-self:auto;align-items:center;background:#f2f2f2;display:flex;height:200px;justify-content:center;padding:0}.css-reference-content .contents-tab .contents-output .example-background-output.align.self .square{height:50px;margin:0 2px;width:calc(20% - 4px)}.css-reference-content .contents-tab .contents-output .example-background-output.align.self .square.target{background:#05ffb0;color:#310736;align-self:auto}.css-reference-content .contents-tab .contents-output .example-background-output.align.self .square:nth-child(4){height:75px}.css-reference-content .contents-tab .contents-output .example-background-output.align.self .line.line-default,.css-reference-content .contents-tab .contents-output .example-background-output.align.self .line.line-red{top:50%}.css-reference-content .contents-tab .contents-output .example-background-output.align.self .line.line-red:before{content:"Self"}.css-reference-content .contents-tab .contents-output .example-background-output.align.self.flex-start .square.target{align-self:flex-start}.css-reference-content .contents-tab .contents-output .example-background-output.align.self.flex-end .square.target{align-self:flex-end}.css-reference-content .contents-tab .contents-output .example-background-output.align.self.flex-end .line.line-red{top:unset;bottom:0}.css-reference-content .contents-tab .contents-output .example-background-output.align.self.center{align-items:flex-start}.css-reference-content .contents-tab .contents-output .example-background-output.align.self.center .square.target{align-self:center}.css-reference-content .contents-tab .contents-output .example-background-output.align.self.center .line.line-default{top:0}.css-reference-content .contents-tab .contents-output .example-background-output.align.self.center .line.line-red{top:50%}.css-reference-content .contents-tab .contents-output .example-background-output.align.self.baseline .square.target{align-self:baseline}.css-reference-content .contents-tab .contents-output .example-background-output.align.self.baseline .line.line-red{top:30px}.css-reference-content .contents-tab .contents-output .example-background-output.align.self.stretch .square.target{align-self:stretch;height:auto}.css-reference-content .contents-tab .contents-output .example-background-output.align.self.stretch .line.line-red{display:none}.css-reference-content .contents-tab .contents-output .example-background-output.flex{background:#f2f2f2;display:flex;padding:1em;word-break:break-all}.css-reference-content .contents-tab .contents-output .example-background-output.flex .block{background:#f2f2f2;border-radius:3px;color:#4d4d4d;display:block;line-height:1.2;padding:1em;flex-basis:auto;font-size:.9em}.css-reference-content .contents-tab .contents-output .example-background-output.flex .block.block-alpha{background:#05ffb0;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.flex .block.block-beta{background:#00e7eb;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.flex .block.block-pink{background:#ff3860;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.flex .block.block-yellow{background:#ffdd57;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.flex .block.block-orange{background:#ff470f;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.flex .block.block-purple{background:#b86bff;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.flex.basis.type2 .block{flex-basis:80px}.css-reference-content .contents-tab .contents-output .example-background-output.flex.direction .block.block-beta{background:#00e7eb;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.flex.direction .block.block-pink{background:#ff3860;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.flex.direction .block.block-yellow{background:#ffdd57;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.flex.direction.row{flex-direction:row}.css-reference-content .contents-tab .contents-output .example-background-output.flex.direction.row-reverse{flex-direction:row-reverse}.css-reference-content .contents-tab .contents-output .example-background-output.flex.direction.column{flex-direction:column}.css-reference-content .contents-tab .contents-output .example-background-output.flex.direction.column-reverse{flex-direction:column-reverse}.css-reference-content .contents-tab .contents-output .example-background-output.flex.grow{background:#310736;border-radius:3px;display:flex;padding:1em}.css-reference-content .contents-tab .contents-output .example-background-output.flex.grow.type2 .block.block-alpha,.css-reference-content .contents-tab .contents-output .example-background-output.flex.grow.type3 .block.block-alpha{flex-grow:1}.css-reference-content .contents-tab .contents-output .example-background-output.flex.grow.type3 .block.block-pink{flex-grow:2}.css-reference-content .contents-tab .contents-output .example-background-output.flex.shrink{background:#310736;border-radius:3px;display:flex;padding:1em;width:300px;word-break:unset}.css-reference-content .contents-tab .contents-output .example-background-output.flex.shrink .block,.css-reference-content .contents-tab .contents-output .example-background-output.flex.shrink .block.block-alpha{flex-shrink:1}.css-reference-content .contents-tab .contents-output .example-background-output.flex.shrink.type2 .block.block-alpha{flex-shrink:0}.css-reference-content .contents-tab .contents-output .example-background-output.flex.shrink.type3 .block.block-alpha{flex-grow:1;width:100%}.css-reference-content .contents-tab .contents-output .example-background-output.flex.shrink.type3 .block.block-pink{flex-shrink:3;word-break:break-all}.css-reference-content .contents-tab .contents-output .example-background-output.flex.shrink.type3 .block.block-yellow{flex-shrink:1;word-break:break-all}.css-reference-content .contents-tab .contents-output .example-background-output.flex.wrap{background:#310736;display:flex;max-width:320px;font-size:.9em}.css-reference-content .contents-tab .contents-output .example-background-output.flex.wrap .block{display:block;flex-basis:unset}.css-reference-content .contents-tab .contents-output .example-background-output.flex.wrap.nowrap{flex-wrap:nowrap}.css-reference-content .contents-tab .contents-output .example-background-output.flex.wrap.onwrap{flex-wrap:wrap}.css-reference-content .contents-tab .contents-output .example-background-output.flex.wrap.wrap-reverse{flex-wrap:wrap-reverse}.css-reference-content .contents-tab .contents-output .example-background-output.flex.justify-content{background:#310736;padding:0}.css-reference-content .contents-tab .contents-output .example-background-output.flex.justify-content.type1{justify-content:flex-start}.css-reference-content .contents-tab .contents-output .example-background-output.flex.justify-content.type2{justify-content:flex-end}.css-reference-content .contents-tab .contents-output .example-background-output.flex.justify-content.type3{justify-content:center}.css-reference-content .contents-tab .contents-output .example-background-output.flex.justify-content.type4{justify-content:space-between}.css-reference-content .contents-tab .contents-output .example-background-output.flex.justify-content.type5{justify-content:space-around}.css-reference-content .contents-tab .contents-output .example-background-output.flex.order{background-color:unset}.css-reference-content .contents-tab .contents-output .example-background-output.flex.order .block{flex-grow:1;flex-shrink:1}.css-reference-content .contents-tab .contents-output .example-background-output.flex.order.type2 .block-pink{order:1}.css-reference-content .contents-tab .contents-output .example-background-output.flex.order.type3 .block-pink{order:-1}.css-reference-content .contents-tab .contents-output .example-background-output.flex.order.type4 .block-alpha{order:13}.css-reference-content .contents-tab .contents-output .example-background-output.flex.order.type4 .block-beta{order:-7}.css-reference-content .contents-tab .contents-output .example-background-output.flex.order.type4 .block-yellow{order:5}.css-reference-content .contents-tab .contents-output .example-background-output.flex.order.type4 .block-pink{order:9}.css-reference-content .contents-tab .contents-output .example-background-output.typo.color{font-size:1.5em}.css-reference-content .contents-tab .contents-output .example-background-output.typo.color.type1{color:transparent}.css-reference-content .contents-tab .contents-output .example-background-output.typo.color.type2{color:red}.css-reference-content .contents-tab .contents-output .example-background-output.typo.color.type3{color:#05ffb0}.css-reference-content .contents-tab .contents-output .example-background-output.typo.color.type4{color:#3273dc}.css-reference-content .contents-tab .contents-output .example-background-output.typo.color.type5{color:#00000080;background:#05ffb0}.css-reference-content .contents-tab .contents-output .example-background-output.typo.color.type6{color:#ff470f}.css-reference-content .contents-tab .contents-output .example-background-output.typo.color.type7{color:#ff470f99}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-family{font-size:1.5em}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-family.type1{font-family:Source Sans Pro,Arial,sans-serif}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-family.type2{font-family:serif}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-family.type3{font-family:sans-serif}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-family.type4{font-family:monospace}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-family.type5{font-family:cursive}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-family .type6{font-family:fantasy}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-size .parent{font-size:18px}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-size .block{font-size:1.2em;margin-top:.25rem;background:#f2f2f2;border-radius:3px;color:#4d4d4d;display:block;line-height:1.2;padding:1em}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-size .block-alpha{background:#05ffb0;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-size .block-pink{background:#ff3860;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-size .block-yellow{background:#ffdd57;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-size.type1{font-size:medium}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-size.type2{font-size:20px}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-size.type3{font-size:1.2em}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-size.type4,.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-size.type4 .block{font-size:1.2rem}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-size.type5,.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-size.type5 .block{font-size:90%}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-size.type6,.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-size.type6 .block{font-size:smaller}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-size.type7,.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-size.type7 .block{font-size:x-large}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-style.type1{font-style:normal}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-style.type2{font-style:italic}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-style.type3{font-style:oblique}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-variant.type1{font-variant:normal}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-variant.type2{font-variant:small-caps}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-weight.type1{font-weight:400}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-weight.type2{font-weight:700}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-weight.type3{font-weight:600}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-weight.type4{font-weight:lighter}.css-reference-content .contents-tab .contents-output .example-background-output.typo.letter-spacing.type1{letter-spacing:normal}.css-reference-content .contents-tab .contents-output .example-background-output.typo.letter-spacing.type2{letter-spacing:2px}.css-reference-content .contents-tab .contents-output .example-background-output.typo.letter-spacing.type3{letter-spacing:.1em}.css-reference-content .contents-tab .contents-output .example-background-output.typo.line-height{font-size:.8em}.css-reference-content .contents-tab .contents-output .example-background-output.typo.line-height .block{margin-top:.25rem;background:#f2f2f2;border-radius:3px;color:#4d4d4d;display:block;padding:1em}.css-reference-content .contents-tab .contents-output .example-background-output.typo.line-height .block-alpha{background:#05ffb0;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.typo.line-height.type1{line-height:normal}.css-reference-content .contents-tab .contents-output .example-background-output.typo.line-height.type2{line-height:1.6}.css-reference-content .contents-tab .contents-output .example-background-output.typo.line-height.type3{line-height:30px}.css-reference-content .contents-tab .contents-output .example-background-output.typo.line-height.type4{line-height:.8em}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-align{font-size:.8em}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-align .block{margin-top:.25rem;background:#f2f2f2;border-radius:3px;color:#4d4d4d;display:block;padding:1em}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-align .block-alpha{background:#05ffb0;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-align.type1{text-align:left}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-align.type2{text-align:right}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-align.type3{text-align:center}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-align.type4{text-align:justify}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-decoration.type1{text-decoration:none}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-decoration.type2{text-decoration:underline}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-indent{font-size:.8em}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-indent .block{margin-top:.25rem;background:#f2f2f2;border-radius:3px;color:#4d4d4d;display:block;padding:1em}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-indent .block-alpha{background:#05ffb0;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-indent.type1{text-indent:0}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-indent.type2{text-indent:40px}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-indent.type3{text-indent:-2em}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-overflow{font-size:.8em}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-overflow .block{margin-top:.25rem;background:#f2f2f2;border-radius:3px;color:#4d4d4d;display:block;padding:1em;overflow:hidden;white-space:nowrap;width:5em}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-overflow .block-alpha{background:#05ffb0;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-overflow.type1 .block{text-overflow:clip}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-overflow.type2 .block{text-overflow:ellipsis}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-shadow{font-size:.8em}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-shadow.type1{text-shadow:none}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-shadow.type2{text-shadow:2px 6px}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-shadow.type3{text-shadow:2px 6px red}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-shadow.type4{text-shadow:2px 4px 10px red}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-transform{font-size:.8em;line-height:1.6}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-transform.type1{text-transform:none}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-transform.type2{text-transform:capitalize}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-transform.type3{text-transform:uppercase}.css-reference-content .contents-tab .contents-output .example-background-output.typo.text-transform.type4{text-transform:lowercase}.css-reference-content .contents-tab .contents-output .example-background-output.typo.white-space{font-family:Source Code Pro,monospace;font-size:.7rem;width:18em;background:#05ffb0;color:#310736;display:block;line-height:1.2;padding:1em;border-radius:3px}.css-reference-content .contents-tab .contents-output .example-background-output.typo.white-space.type1{white-space:normal}.css-reference-content .contents-tab .contents-output .example-background-output.typo.white-space.type2{white-space:nowrap}.css-reference-content .contents-tab .contents-output .example-background-output.typo.white-space.type3{white-space:pre}.css-reference-content .contents-tab .contents-output .example-background-output.typo.white-space.type4{white-space:pre-wrap}.css-reference-content .contents-tab .contents-output .example-background-output.typo.white-space.type5{white-space:pre-line}.css-reference-content .contents-tab .contents-output .example-background-output.typo.word-break{font-family:Source Code Pro,monospace;width:18em;background:#05ffb0;color:#310736;display:block;line-height:1.2;padding:1em;border-radius:3px;position:relative}.css-reference-content .contents-tab .contents-output .example-background-output.typo.word-break.type1{word-break:normal}.css-reference-content .contents-tab .contents-output .example-background-output.typo.word-break.type2{word-break:break-all}.css-reference-content .contents-tab .contents-output .example-background-output.typo.word-spacing.type1{word-spacing:normal}.css-reference-content .contents-tab .contents-output .example-background-output.typo.word-spacing.type2{word-spacing:5px}.css-reference-content .contents-tab .contents-output .example-background-output.typo.word-spacing.type3{word-spacing:2em}.css-reference-content .contents-tab .contents-output .example-background-output.transition .square{align-items:center;border-radius:3px;display:flex;height:75px;justify-content:center;line-height:1.2;padding:0;text-align:center;width:75px}.css-reference-content .contents-tab .contents-output .example-background-output.transition .square.square-alpha{background:#05ffb0;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.transition:hover .square{background:#ff3860;color:#fff;transform:translate(200%)}.css-reference-content .contents-tab .contents-output .example-background-output.transition.delay.type1 .square{transition-duration:1s;transition-timing-function:linear}.css-reference-content .contents-tab .contents-output .example-background-output.transition.delay.type2 .square{transition-duration:1s;transition-delay:1.2s;transition-timing-function:linear}.css-reference-content .contents-tab .contents-output .example-background-output.transition.delay.type3 .square{transition-duration:1s;transition-delay:2.4s;transition-timing-function:linear}.css-reference-content .contents-tab .contents-output .example-background-output.transition.delay.type4 .square{transition-duration:1s;transition-delay:-.5s;transition-timing-function:linear}.css-reference-content .contents-tab .contents-output .example-background-output.transition.duration.type1 .square{transition-duration:0s;transition-timing-function:linear}.css-reference-content .contents-tab .contents-output .example-background-output.transition.duration.type2 .square{transition-duration:1.2s;transition-timing-function:linear}.css-reference-content .contents-tab .contents-output .example-background-output.transition.duration.type3 .square{transition-duration:2.4s;transition-timing-function:linear}.css-reference-content .contents-tab .contents-output .example-background-output.transition.property.type1 .square{transition-property:all;transition-duration:1s;transition-timing-function:linear}.css-reference-content .contents-tab .contents-output .example-background-output.transition.property.type2 .square{transition-property:none;transition-duration:1s;transition-timing-function:linear}.css-reference-content .contents-tab .contents-output .example-background-output.transition.property.type3 .square{transition-property:background;transition-duration:1s;transition-timing-function:linear}.css-reference-content .contents-tab .contents-output .example-background-output.transition.property.type4 .square{transition-property:color;transition-duration:1s;transition-timing-function:linear}.css-reference-content .contents-tab .contents-output .example-background-output.transition.property.type5 .square{transition-property:transform;transition-duration:1s;transition-timing-function:linear}.css-reference-content .contents-tab .contents-output .example-background-output.transition.timing.type1 .square{transition-duration:1s;transition-timing-function:ease}.css-reference-content .contents-tab .contents-output .example-background-output.transition.timing.type2 .square{transition-duration:1s;transition-timing-function:ease-in}.css-reference-content .contents-tab .contents-output .example-background-output.transition.timing.type3 .square{transition-duration:1s;transition-timing-function:ease-out}.css-reference-content .contents-tab .contents-output .example-background-output.transition.timing.type4 .square{transition-duration:1s;transition-timing-function:ease-in-out}.css-reference-content .contents-tab .contents-output .example-background-output.transition.timing.type5 .square{transition-duration:1s;transition-timing-function:linear}.css-reference-content .contents-tab .contents-output .example-background-output.transition.timing.type6 .square{transition-duration:1s;transition-timing-function:step-start}.css-reference-content .contents-tab .contents-output .example-background-output.transition.timing.type7 .square{transition-duration:1s;transition-timing-function:step-end}.css-reference-content .contents-tab .contents-output .example-background-output.transition.timing.type8 .square{transition-duration:1s;transition-timing-function:steps(4,end)}.css-reference-content .contents-tab .contents-output .example-background-output.transition.basic.type1 .square{transition:1s}.css-reference-content .contents-tab .contents-output .example-background-output.transition.basic.type2 .square{transition:1s linear}.css-reference-content .contents-tab .contents-output .example-background-output.transition.basic.type3 .square{transition:background 1s linear}.css-reference-content .contents-tab .contents-output .example-background-output.transition.basic.type4 .square{transition:background 1s linear .5s}.css-reference-content .contents-tab .contents-output .example-background-output.transition.basic.type5 .square{transition:background 4s,transform 1s}.css-reference-content .contents-tab .contents-output .example-background-output.positioning .block{display:block;line-height:1.2;padding:1em;border-radius:3px}.css-reference-content .contents-tab .contents-output .example-background-output.positioning .block-alpha{background:#05ffb0;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.positioning .block-pink{background:#ff3860;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.positioning .block-beta{background:#00e7eb;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.positioning .block-yellow{background:#ffdd57;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.positioning{background:#310736;height:200px;position:relative;font-size:.8em}.css-reference-content .contents-tab .contents-output .example-background-output.positioning p{color:#fff}.css-reference-content .contents-tab .contents-output .example-background-output.positioning .natural{border:2px dotted #ff4538;color:#ff4538}.css-reference-content .contents-tab .contents-output .example-background-output.positioning .actual,.css-reference-content .contents-tab .contents-output .example-background-output.positioning .natural{border-radius:3px;line-height:1.2;padding:.8em 1em;display:flex;align-items:center;justify-content:center}.css-reference-content .contents-tab .contents-output .example-background-output.positioning .actual{display:flex;align-items:center;justify-content:center;text-align:center;background:#05ffb0;border:2px solid #05ffb0;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.positioning .natural{width:200px}.css-reference-content .contents-tab .contents-output .example-background-output.positioning .actual{animation-direction:alternate;animation-duration:2s;animation-iteration-count:infinite;position:absolute;width:200px;animation-name:fadeIn;transform:translateY(-100%)}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.bottom.type2 .actual{bottom:20px;position:relative}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.bottom.type3 .actual{bottom:0;animation-name:none;transform:unset}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.left.type1 .actual{left:auto}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.left.type2 .actual{left:80px}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.left.type3 .actual{left:-20px}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.basic .block-pink{position:absolute;right:5px;top:5px}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.basic .block-alpha{margin-top:1em}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.basic.type2 .block-alpha{position:relative}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.basic.type3 .block-alpha{left:0;margin-top:0;position:absolute;top:0;width:280px}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.basic.type4 .block-alpha{left:auto;right:0;margin-top:0;position:absolute;top:0;width:280px}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.basic.type4 .block-alpha.clicked{position:fixed;z-index:1}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.right.type1 .actual{right:auto}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.right.type2 .actual{right:80px;position:relative;transform:translateY(-100%)}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.right.type3{position:relative}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.right.type3 .actual{right:-20px;transform:translateY(-100%)}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.top.type2 .actual{top:20px;position:relative}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.top.type3 .actual{top:0;animation-name:none;transform:unset}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.z-index{background-color:unset;height:100px;padding:0}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.z-index .block{height:100%;left:0;position:absolute;width:25%}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.z-index .block.block-alpha{height:50%;width:100%}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.z-index .block.block-pink{height:60%;left:20%;top:20%;width:60%}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.z-index .block.block-beta{height:60%;left:40%;top:40%;width:60%}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.z-index .block.block-yellow{left:70%;width:20%}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.z-index.type2 .block-pink{z-index:1}.css-reference-content .contents-tab .contents-output .example-background-output.positioning.z-index.type3 .block-pink{z-index:-1}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid{display:grid;padding:0;font-size:.8em}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid .block{display:block;line-height:1.2;padding:1em;border-radius:3px}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid .block-alpha{background:#05ffb0;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid .block-pink{background:#ff3860;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid .block-beta{background:#00e7eb;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid .block-yellow{background:#ffdd57;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid .block-purple{background:#b86bff;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid .block-orange{background:#ff470f;color:#310736}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.area{display:grid;grid-template-columns:1fr 1fr 1fr;padding:0}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.area.type1{grid-area:auto}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.area.type2{grid-template-columns:3fr 70fr;grid-template-rows:50px 200px 50px;grid-template-areas:"header header header" "sidebar main main" "sidebar main main" "sidebar footer footer"}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.area.type2 .block-alpha{grid-area:header}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.area.type2 .block-beta{grid-area:sidebar}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.area.type2 .block-purple{grid-area:footer}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.area.type2 .block-pink{grid-row:main}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.auto-columns{font-size:.8em;display:grid;padding:0}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.auto-columns.type2{grid-template-areas:"header header header" "sidebar main main";grid-template-columns:50px 200px;grid-auto-columns:100px}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.auto-columns.type2 .block-alpha{grid-area:header}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.auto-columns.type2 .block-beta{grid-area:sidebar}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.auto-columns.type2 .block-pink{grid-area:main}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.auto-flow{grid-template-areas:"header header header" "sidebar main main" "footer footer footer";padding:0;grid-auto-flow:row}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.auto-flow .block-alpha{grid-area:header}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.auto-flow .block-beta{grid-area:sidebar}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.auto-flow .block-pink{grid-area:main}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.auto-flow .block-yellow{grid-area:footer}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.auto-flow.type2{grid-auto-flow:column}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.auto-rows.type1{grid-auto-rows:auto}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.auto-rows.type2{grid-template-areas:"header header header" "sidebar main main" "footer footer footer";grid-template-rows:50px 200px;grid-auto-rows:100px}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.auto-rows.type2 .block-alpha{grid-area:header}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.auto-rows.type2 .block-beta{grid-area:sidebar}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.auto-rows.type2 .block-pink{grid-area:main}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.auto-rows.type2 .block-yellow{grid-area:footer}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column-end{grid-template-columns:1fr 1fr 1fr}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column-end.type1{grid-column-end:auto}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column-end.type2,.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column-end.type2 .block-pink{grid-column-end:2}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column-end.type3,.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column-end.type3 .block-pink{grid-column-end:1}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column-gap{grid-template-columns:auto auto auto}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column-gap.type1{grid-column-gap:0}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column-gap.type2{grid-column-gap:10px}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column-gap.type3{grid-column-gap:3rem}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column-gap.type4{grid-column-gap:20%}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column-start{grid-template-columns:1fr 1fr 1fr}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column-start.type1{grid-column-start:auto}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column-start.type2,.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column-start.type2 .block-pink{grid-column-start:2}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column-start.type3,.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column-start.type3 .block-pink{grid-column-start:4}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column{grid-column:auto auto;grid-template-columns:1fr 1fr 1fr}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column.type2,.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column.type2 .block-pink{grid-column:1/3}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column.type3,.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column.type3 .block-pink{grid-column:span 3}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column.type4,.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column.type4 .block-pink{grid-column:1/span 4}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column.type5{grid-template-columns:3fr 70fr;grid-template-rows:50px 200px 50px;grid-template-areas:"header header header" "sidebar main main" "sidebar main main" "sidebar footer footer"}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column.type5 .block-alpha{grid-area:header}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column.type5 .block-beta{grid-area:sidebar}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column.type5 .block-yellow{grid-area:main}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column.type5 .block-purple{grid-area:footer}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.column.type5 .block-pink{grid-column:main}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.gap{grid-template-columns:auto auto auto}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.gap.type1{grid-gap:0 0}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.gap.type2{grid-gap:10px}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.gap.type3{grid-gap:3rem 1rem}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.row-end{grid-template-columns:1fr 1fr 1fr}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.row-end.type1{grid-row-end:auto}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.row-end.type2 .block-pink{grid-row-end:3}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.row-end.type3 .block-pink{grid-row-end:4}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.row-gap{grid-template-columns:auto auto auto}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.row-gap.type1{grid-row-gap:0}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.row-gap.type2{grid-row-gap:10px}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.row-gap.type3{grid-row-gap:3rem}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.row-start{grid-template-columns:1fr 1fr 1fr}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.row-start.type2 .block-pink{grid-row-start:2}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.row-start.type3 .block-pink{grid-row-start:3}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.row{grid-template-columns:1fr 1fr 1fr}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.row.type2 .block-pink{grid-row:1/3}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.row.type3 .block-pink{grid-row:span 3}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.row.type4 .block-pink{grid-row:1/span 4}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.row.type5{grid-template-columns:3fr 70fr;grid-template-rows:50px 200px 50px;grid-template-areas:"header header header" "sidebar main main" "sidebar main main" "sidebar footer footer"}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.row.type5 .block-alpha{grid-area:header}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.row.type5 .block-beta{grid-area:sidebar}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.row.type5 .block-yellow{grid-area:main}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.row.type5 .block-purple{grid-area:footer}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.row.type5 .block-pink{grid-row:header}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.template-area.type2{grid-template-areas:"header header header" "sidebar main main"}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.template-area.type2 .block-alpha{grid-area:header}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.template-area.type2 .block-beta{grid-area:sidebar}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.template-area.type2 .block-pink{grid-area:main}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.template-columns{grid-template-columns:none}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.template-columns.type2{grid-template-columns:auto auto auto}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.template-columns.type3{grid-template-columns:80px auto 1rem}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.template-columns.type4{grid-template-columns:40px 1fr 2fr}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.template-rows{grid-template-columns:auto auto}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.template-rows.type2{grid-template-rows:120px auto 3rem}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.template-rows.type3{grid-template-rows:20px 1fr 2fr}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.template.type1{grid-template:none}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.template.type2{grid-template:200px 1fr/100px auto 3rem}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.template.type3{grid-template:"header header header" 50px "sidebar main main" 200px/100px auto}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.template.type3 .block-alpha{grid-area:header}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.template.type3 .block-beta{grid-area:sidebar}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.template.type3 .block-pink{grid-area:main}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.grid.type1{grid:"header header header" 50px "sidebar main main" 200px/100px auto}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.grid.type1 .block-alpha{grid-area:header}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.grid.type1 .block-beta{grid-area:sidebar}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.grid.type1 .block-pink{grid-area:main}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.grid.type2{grid:200px 100px/auto-flow 30%}.css-reference-content .contents-tab .contents-output .example-background-output.css-grid.grid.type3{grid:auto-flow 50px/200px 100px}.css-reference-content .contents-tab .contents-output .example-background-output.animations{padding:0;font-size:.8em}@keyframes fadeAndMove{0%{opacity:0;transform:translate(0)}to{opacity:1;transform:translate(200px)}}@keyframes kf-animation-fill-mode{0%{background:#23d160;transform:translate(0)}to{background:#3273dc;transform:translate(200px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes moveRight{0%{transform:translate(0)}to{transform:translate(200px)}}.css-reference-content .contents-tab .contents-output .example-background-output.animations.ani-on{animation-name:fadeAndMove}.css-reference-content .contents-tab .contents-output .example-background-output.animations.ani-on2{animation-play-state:running!important}.css-reference-content .contents-tab .contents-output .example-background-output.animations.ani-on3{animation-duration:2s}.css-reference-content .contents-tab .contents-output .example-background-output.animations.ani-on4{animation-name:moveRight}.css-reference-content .contents-tab .contents-output .example-background-output.animations.square{display:flex;height:75px;align-items:center;justify-content:center;line-height:1.2;padding:0;text-align:center;width:75px;background:#310736;color:#fff;border-radius:3px}.css-reference-content .contents-tab .contents-output .example-background-output.animations.delay{animation-duration:5s;animation-iteration-count:infinite}.css-reference-content .contents-tab .contents-output .example-background-output.animations.delay.type1{animation-delay:0s}.css-reference-content .contents-tab .contents-output .example-background-output.animations.delay.type2{animation-delay:1.2s}.css-reference-content .contents-tab .contents-output .example-background-output.animations.delay.type3{animation-delay:2.4s}.css-reference-content .contents-tab .contents-output .example-background-output.animations.delay.type4{animation-delay:-.5s}.css-reference-content .contents-tab .contents-output .example-background-output.animations.direction{animation-duration:2s;animation-iteration-count:infinite}.css-reference-content .contents-tab .contents-output .example-background-output.animations.direction.type1{animation-direction:normal}.css-reference-content .contents-tab .contents-output .example-background-output.animations.direction.type2{animation-direction:reverse}.css-reference-content .contents-tab .contents-output .example-background-output.animations.direction.type3{animation-direction:alternate}.css-reference-content .contents-tab .contents-output .example-background-output.animations.direction.type4{animation-direction:alternate-reverse}.css-reference-content .contents-tab .contents-output .example-background-output.animations.duration{animation-iteration-count:infinite}.css-reference-content .contents-tab .contents-output .example-background-output.animations.duration.type1{animation-duration:0s}.css-reference-content .contents-tab .contents-output .example-background-output.animations.duration.type2{animation-duration:1.2s}.css-reference-content .contents-tab .contents-output .example-background-output.animations.duration.type3{animation-duration:2.4s}.css-reference-content .contents-tab .contents-output .example-background-output.animations.fill-mode{animation-delay:1s;animation-duration:2s;animation-iteration-count:1;animation-name:kf-animation-fill-mode;animation-play-state:paused}.css-reference-content .contents-tab .contents-output .example-background-output.animations.fill-mode.square{background:#ff3860}.css-reference-content .contents-tab .contents-output .example-background-output.animations.fill-mode.type1{animation-fill-mode:none}.css-reference-content .contents-tab .contents-output .example-background-output.animations.fill-mode.type2{animation-fill-mode:forwards}.css-reference-content .contents-tab .contents-output .example-background-output.animations.fill-mode.type3{animation-fill-mode:backwards}.css-reference-content .contents-tab .contents-output .example-background-output.animations.fill-mode.type4{animation-fill-mode:both}.css-reference-content .contents-tab .contents-output .example-background-output.animations.iteration-count{animation-duration:2s}.css-reference-content .contents-tab .contents-output .example-background-output.animations.iteration-count.type1{animation-iteration-count:1}.css-reference-content .contents-tab .contents-output .example-background-output.animations.iteration-count.type2{animation-iteration-count:2}.css-reference-content .contents-tab .contents-output .example-background-output.animations.iteration-count.type3,.css-reference-content .contents-tab .contents-output .example-background-output.animations.name{animation-iteration-count:infinite}.css-reference-content .contents-tab .contents-output .example-background-output.animations.name.type1{animation-name:none}.css-reference-content .contents-tab .contents-output .example-background-output.animations.name.type2{animation-name:fadeIn}.css-reference-content .contents-tab .contents-output .example-background-output.animations.name.type3{animation-name:moveRight}.css-reference-content .contents-tab .contents-output .example-background-output.animations.play-state{animation-duration:2s;animation-iteration-count:infinite}.css-reference-content .contents-tab .contents-output .example-background-output.animations.play-state.type1{animation-play-state:running}.css-reference-content .contents-tab .contents-output .example-background-output.animations.play-state.type2{animation-play-state:paused}.css-reference-content .contents-tab .contents-output .example-background-output.animations.timing-function{animation-duration:3s;animation-fill-mode:forwards}.css-reference-content .contents-tab .contents-output .example-background-output.animations.timing-function.type1{animation-timing-function:ease}.css-reference-content .contents-tab .contents-output .example-background-output.animations.timing-function.type2{animation-timing-function:ease-in}.css-reference-content .contents-tab .contents-output .example-background-output.animations.timing-function.type3{animation-timing-function:ease-out}.css-reference-content .contents-tab .contents-output .example-background-output.animations.timing-function.type4{animation-timing-function:ease-in-out}.css-reference-content .contents-tab .contents-output .example-background-output.animations.timing-function.type5{animation-timing-function:linear}.css-reference-content .contents-tab .contents-output .example-background-output.animations.timing-function.type6{animation-timing-function:step-start}.css-reference-content .contents-tab .contents-output .example-background-output.animations.timing-function.type7{animation-timing-function:step-end}.css-reference-content .contents-tab .contents-output .example-background-output.animations.timing-function.type8{animation-timing-function:steps(4,end)}.css-reference-content .contents-tab .contents-box-top{background-color:#f2f2f2;border:1px solid #e6e6e6;border-bottom:none;border-top-left-radius:3px;border-top-right-radius:3px;height:1rem}.css-reference-content .contents-tab .contents-box-output{background-color:#fff;border:1px solid #e6e6e6;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-shadow:0 2px 3px #0000000d;padding:.5em}@media screen and (max-width: 800px){.css-reference-content .contents-tab{flex-direction:column}.css-reference-content .contents-tab .contents-title,.css-reference-content .contents-tab .contents-example{width:100%}.css-reference-content{padding:0 2rem 2rem}.css-reference-content .name{font-size:1rem;padding:1rem 0}.css-reference-content .define{font-size:.9rem}.css-reference-content .contents-tab .property-name,.css-reference-content .contents-tab .property-name-default,.css-reference-content .contents-tab .property-define{font-size:.8rem}.css-reference-content .contents-tab{gap:1rem}.menu-type.css ul{gap:5px;padding:0;font-size:.8rem}.menu-type.css.category li{font-size:.7rem}.menu-type.css{margin:15px 0 10px}.menu-type.css.category{margin:0 0 15px}.css-reference-content .contents-tab .contents-output .example-background-output.typo.font-family{font-size:1em}}