.demo-container,figure{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.box,.demo,.demo-container{position:relative}.dark-panel h2:first-child,.dark-panel p{color:#d3d0c9}.custom-notice,.shadowboard,figure.disabled,h2{pointer-events:none}.demo-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;z-index:100;padding-top:.5rem;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;tap-highlight-color:transparent;touch-callout:none;max-height:800px}figure,h2{text-align:center;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:none}#custom_url{border:none}.demo{padding:0 0 1rem}.customizing .demo,.customizing .handle{cursor:crosshair}.box{box-shadow:inset 0 0 0 10px #fff,inset 0 0 0 11px #d3d0c9;-ms-touch-action:none;touch-action:none}.clipboard,.shadowboard{position:absolute;top:10px;left:10px;right:10px;bottom:10px;background-color:#d3d0c9;background-image:url(../image/clip-image.jpg);background-size:cover;background-position:center center}.custom-notice,.handles{top:0;right:0;position:absolute}.delete-point,.delete-point:active:after{background:#d3d0c9}.shadowboard{opacity:0;-webkit-transition:opacity .375s;transition:opacity .375s}.handles{left:0;bottom:0}.delete-point,.handle{position:absolute;width:20px;height:20px}.handle{border-radius:50%;box-shadow:inset 0 0 0 10px;opacity:.8;-webkit-transition:opacity .25s;transition:opacity .25s;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.customizing:not(.customizing-no-poly) .handle[data-handle="1"],.delete-point{cursor:pointer}.customizing:not(.customizing-no-poly) .handle[data-handle="1"]:hover{border-radius:2px;color:#000}.customizing:not(.customizing-no-poly) .handle[data-handle="1"]:hover:before{display:block;position:absolute;top:0;left:0;right:0;bottom:0;content:"";-webkit-clip-path:polygon(67% 30%,43% 54%,33% 42%,24% 51%,44% 72%,76% 39%);clip-path:polygon(67% 30%,43% 54%,33% 42%,24% 51%,44% 72%,76% 39%);background:#d3d0c9}.customizing:not(.customizing-no-poly) .handle[data-handle="1"]:active:before,figure{background:#fff}.customizing:not(.customizing-no-poly) .handle[data-handle="1"]:active{color:#555}.handle:after{display:block;content:"";position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px}.customizing .custom-notice,.demo:hover .handle,input:checked+input[type=number]:active,input:checked+input[type=url]:active,input:checked+label:active,input[type=number][type=number]:focus:active,input[type=number][type=url]:focus:active,input[type=url][type=number]:focus:active,input[type=url][type=url]:focus:active,label[type=number]:focus:active,label[type=url]:focus:active{opacity:1}.handle.is-dragging{z-index:100;box-shadow:inset 0 0 0 3px;cursor:none;-webkit-transition:box-shadow 0;transition:box-shadow 0}.handle.bar{border-radius:20px}.handle.bar:after{top:-5px;left:-5px;right:-5px;bottom:-5px}.delete-point{position:absolute;left:22px;top:0;width:25px;padding-left:5px;border-radius:3px;-webkit-transform:scale3d(0,0,0);-ms-transform:scale3d(0,0,0);transform:scale3d(0,0,0);-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center;opacity:.75;-webkit-clip-path:polygon(25% 0,100% 1%,100% 100%,25% 100%,0 50%);clip-path:polygon(25% 0,100% 1%,100% 100%,25% 100%,0 50%);-webkit-transition:-webkit-transform .25s,opacity .25s;transition:transform .25s,opacity .25s}.show-delete .delete-point{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9);-webkit-transition:-webkit-transform .25s cubic-bezier(.15, 1, .3, 1.1),opacity .25s;transition:transform .25s cubic-bezier(.15, 1, .3, 1.1),opacity .25s;opacity:1}.delete-point:hover{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1);-webkit-transition:-webkit-transform .25s cubic-bezier(.15, 1, .3, 1.1);transition:transform .25s cubic-bezier(.15, 1, .3, 1.1);opacity:1}.delete-point:active{background:#100a09}.delete-point:after{display:block;content:"";position:absolute;top:4px;left:9px;right:4px;bottom:4px;background:#100a09;-webkit-clip-path:polygon(20% 10%,10% 20%,40% 50%,10% 80%,20% 90%,50% 60%,80% 90%,90% 80%,60% 50%,90% 20%,80% 10%,50% 40%);clip-path:polygon(20% 10%,10% 20%,40% 50%,10% 80%,20% 90%,50% 60%,80% 90%,90% 80%,60% 50%,90% 20%,80% 10%,50% 40%)}.custom-notice{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;left:0;bottom:1rem;opacity:0;-webkit-transition:background .25s;transition:background .25s;background:rgba(255,255,255,0)}.upload,input:checked+input[type=number]:hover,input:checked+input[type=url]:hover,input:checked+label:hover,input[type=number][type=number]:focus:hover,input[type=number][type=url]:focus:hover,input[type=url][type=number]:focus:hover,input[type=url][type=url]:focus:hover,label[type=number]:focus:hover,label[type=url]:focus:hover{opacity:.8}.custom-notice div{width:100%;text-align:center;background:rgba(255,255,255,.9);padding:1rem;margin:0 2rem;-webkit-transition:opacity .25s;transition:opacity .25s;border-radius:2px;box-shadow:0 1px 2px rgba(16,10,9,.15);opacity:0}.panel[href]:hover,figure:hover{box-shadow:0 2px 3px rgba(16,10,9,.3)}.start-customizing .custom-notice div{opacity:1;-webkit-animation:1.5s ease-in-out infinite pulse;animation:1.5s ease-in-out infinite pulse}.touchy:after{content:"Tap"}.dark-panel{display:none;background:#100a09;padding:.75rem;color:#fff;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.dark-panel p{margin:.5rem 0}@media (max-width:800px){.insetting .clipmain .inset{display:block}.customizing .clipmain .custom{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}}.inset-round,.inset-round:focus{box-shadow:inset 0 0 0 .125rem rgba(211,208,201,.5)}.stick{position:sticky;top:-80px}@media (max-width:992px){.stick{position:static;top:0}}.backgrounds,.point,.shapes{position:relative}.finish,.inset-round{font:inherit;padding:.5rem;border-radius:5rem;cursor:pointer;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;background:rgba(255,255,255,.35);color:rgba(255,255,255,.9)}.finish:hover,.inset-round:hover{color:#fff;background:rgba(255,255,255,.4)}.finish:active,.inset-round:active{-webkit-animation:none;animation:none;background:rgba(255,255,255,.2);color:rgba(255,255,255,.4)}.finish:after,.inset-round:after{content:"Finish " attr(data-shape)}.customizing-no-poly .finish,.customizing-no-poly .inset-round{-webkit-animation:none;animation:none}.customizing-no-poly .finish:after,.customizing-no-poly .inset-round:after{content:"Close editor"}.finish:focus,.inset-round:focus,.shapes:focus{outline:0}.inset-round{font-family:monospace;text-align:center;cursor:text;color:#d3d0c9;background:#000}.code,.panel,figure{box-shadow:0 1px 2px rgba(16,10,9,.15)}.inset-round:hover{background:0 0;color:#d3d0c9;-webkit-animation:none;animation:none;opacity:.75}.inset-round:focus{color:#d3d0c9;-webkit-animation:none;animation:none;opacity:1}@-webkit-keyframes glow{50%{opacity:.75}}@keyframes glow{50%{opacity:.75}}.shapes{max-width:100%;white-space:nowrap;overflow-x:hidden}.shapes.vertical{display:block;white-space:normal}ul.clip{width:100%;padding:.25rem}figure,figure .shape{display:inline-block}figure{padding:.625rem .25rem .25rem;margin:.25rem;width:4.125rem;border:1px solid rgba(16,10,9,.15);border-radius:2px;-webkit-transition:background .25s,-webkit-transform .5s;transition:background .25s,transform .5s;user-select:none;tap-highlight-color:transparent;touch-callout:none}figure:hover{cursor:pointer}figure.on,figure:active{background:#4e73df}.point:first-of-type,.point:nth-of-type(10),.point:nth-of-type(11),.point:nth-of-type(12),.point:nth-of-type(13),.point:nth-of-type(14),.point:nth-of-type(15),.point:nth-of-type(16),.point:nth-of-type(17),.point:nth-of-type(18),.point:nth-of-type(19),.point:nth-of-type(2),.point:nth-of-type(20),.point:nth-of-type(21),.point:nth-of-type(22),.point:nth-of-type(23),.point:nth-of-type(24),.point:nth-of-type(25),.point:nth-of-type(26),.point:nth-of-type(27),.point:nth-of-type(3),.point:nth-of-type(4),.point:nth-of-type(5),.point:nth-of-type(6),.point:nth-of-type(7),.point:nth-of-type(8),.point:nth-of-type(9),figure.on figcaption,figure:active figcaption{color:#fff}figure.disabled{opacity:.35}figure:nth-last-of-type(-n+2){-webkit-box-flex:.75;-webkit-flex:.75;-ms-flex:.75;flex:.75}figure .shape{width:1.5rem;height:1.5rem;background:currentColor}figure figcaption{display:block;font-size:.75rem;color:#100a09;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 .25rem}.code{background:#100a0900;padding:.75rem;border:1px solid rgba(16,10,9,.15);border-radius:5px}.clip-path{margin-top:20px}.css-code{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;margin-right:.5vw;max-height:160px;overflow-y:auto}.block{display:none;padding:.25rem;line-height:1.3}.show,h2.block{display:block}.point,h2{display:inline-block}.show:nth-last-of-type(1) .point.changing{-webkit-animation-delay:.125s;animation-delay:.125s}.show:nth-last-of-type(2) .point.changing{-webkit-animation-delay:.25s;animation-delay:.25s}.show:nth-last-of-type(3) .point.changing{-webkit-animation-delay:.375s;animation-delay:.375s}.show:nth-last-of-type(4) .point.changing{-webkit-animation-delay:.5s;animation-delay:.5s}.point{vertical-align:baseline}.customizing-no-poly .point{opacity:.5}.point:after{display:block;position:absolute;content:"";width:80px;height:80px;border-radius:50%;background:currentColor;top:-webkit-calc(50% - 40px);top:calc(50% - 40px);left:-webkit-calc(50% - 40px);left:calc(50% - 40px);-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);will-change:transform,opacity;opacity:0}.point.changing{font-weight:700}.handle:first-of-type,.handle:nth-of-type(10),.handle:nth-of-type(11),.handle:nth-of-type(12),.handle:nth-of-type(13),.handle:nth-of-type(14),.handle:nth-of-type(15),.handle:nth-of-type(16),.handle:nth-of-type(17),.handle:nth-of-type(18),.handle:nth-of-type(19),.handle:nth-of-type(2),.handle:nth-of-type(20),.handle:nth-of-type(21),.handle:nth-of-type(22),.handle:nth-of-type(23),.handle:nth-of-type(24),.handle:nth-of-type(25),.handle:nth-of-type(26),.handle:nth-of-type(27),.handle:nth-of-type(3),.handle:nth-of-type(4),.handle:nth-of-type(5),.handle:nth-of-type(6),.handle:nth-of-type(7),.handle:nth-of-type(8),.handle:nth-of-type(9),figure:first-of-type,figure:nth-of-type(10),figure:nth-of-type(11),figure:nth-of-type(12),figure:nth-of-type(13),figure:nth-of-type(14),figure:nth-of-type(15),figure:nth-of-type(16),figure:nth-of-type(17),figure:nth-of-type(18),figure:nth-of-type(19),figure:nth-of-type(2),figure:nth-of-type(20),figure:nth-of-type(21),figure:nth-of-type(22),figure:nth-of-type(23),figure:nth-of-type(24),figure:nth-of-type(25),figure:nth-of-type(26),figure:nth-of-type(27),figure:nth-of-type(3),figure:nth-of-type(4),figure:nth-of-type(5),figure:nth-of-type(6),figure:nth-of-type(7),figure:nth-of-type(8),figure:nth-of-type(9){color:#142864}.side{padding:.25rem .25rem 1.25rem}@media (min-width:800px){.touchy:after{content:"Click"}.insetting .inset{display:block;box-shadow:0 1px 2px rgba(16,10,9,.15);border-radius:2px;margin:.25rem}.customizing .custom{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;box-shadow:0 1px 2px rgba(16,10,9,.15);border-radius:2px;margin:.25rem}ul.clip{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:0}figure{-webkit-box-flex:4.625rem;-webkit-flex:4.625rem;-ms-flex:4.625rem;flex:4.625rem;-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center}.side{max-height:100%;padding:.5rem 0 0 .125rem}}.panel{-webkit-box-flex:auto;-webkit-flex:auto;-ms-flex:auto;flex:auto;display:block;padding:1rem 1rem 1rem .5rem;background:#fff;border-radius:2px;margin:.5rem .25rem}.panel:first-of-type{margin-top:.25rem}.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}h2{-webkit-box-flex:4rem;-webkit-flex:4rem auto;-ms-flex:4rem auto;flex:4rem auto;font-size:1.2rem;font-weight:500;min-width:1em;color:#bcb8ad;user-select:none}h2:first-child{text-align:left;color:#100a09;font-weight:300;padding:0 1.25rem 0 .5rem}.side>h2{padding:.75rem 1rem .25rem}h2:after{height:0!important}input[type=checkbox],input[type=file],input[type=radio]{display:none}.upload,input[type=number],input[type=url],label{display:inline-block;font:inherit;position:relative;text-align:center;background:#fff;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;min-width:2rem;padding:.5rem .25rem;border-radius:2rem;box-shadow:inset 0 .125rem #d3d0c9,inset -.125rem 0 #d3d0c9,inset 0 -.125rem #d3d0c9;cursor:pointer;-webkit-transition:background .25s;transition:background .25s;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;tap-highlight-color:transparent;touch-callout:none;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.upload:hover,input[type=number]:hover,input[type=url]:hover,label:hover{background:#dae3ff;-webkit-transition:background 0;transition:background 0}input[type=number][for=shadowboard-toggle]:before,input[type=url][for=shadowboard-toggle]:before,label[for=shadowboard-toggle]:before{content:"Off"}input:checked+input[type=number][for=shadowboard-toggle]:before,input:checked+input[type=url][for=shadowboard-toggle]:before,input:checked+label[for=shadowboard-toggle]:before{content:"On"}input[type=number][for=webkit]:before,input[type=url][for=webkit]:before,label[for=webkit]:before{content:"-";font-family:monospace;vertical-align:top}input[type=number]:first-of-type,input[type=url]:first-of-type,label:first-of-type{box-shadow:inset 0 .125rem #4e73df,inset .125rem 0 #4e73df,inset -.125rem 0 #4e73df,inset 0 -.125rem #4e73df}.upload,input[type=url]{display:block;height:40px;box-shadow:inset 0 .125rem #d3d0c9,inset .125rem 0 #d3d0c9,inset -.125rem 0 #d3d0c9,inset 0 -.125rem #d3d0c9}input[type=number].joined,input[type=url].joined,label.joined{border-radius:0}input[type=number].joined:first-of-type,input[type=url].joined:first-of-type,label.joined:first-of-type{border-top-left-radius:2rem;border-bottom-left-radius:2rem}input[type=number].joined:last-of-type,input[type=url].joined:last-of-type,label.joined:last-of-type{border-top-right-radius:2rem;border-bottom-right-radius:2rem}input:checked+input[type=number],input:checked+input[type=url],input:checked+label,input[type=number][type=number]:focus,input[type=number][type=url]:focus,input[type=url][type=number]:focus,input[type=url][type=url]:focus,label[type=number]:focus,label[type=url]:focus{background:#4e73df;z-index:100;color:#fff;outline:0;box-shadow:inset 0 0 0 .125rem #4e73df,0 0 0 .125rem #4e73df}input[type=url]{line-height:40px}.upload{text-align:left;padding-left:20px;margin-top:10px}input[type=number]{font-family:inherit;font-size:1.1rem;border-radius:2rem;box-shadow:inset 0 0 0 .125rem #4e73df;appearance:textfield;-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.shadowboard-toggle{margin-top:1rem}.backgrounds{overflow:hidden;padding:.5rem 0 .75rem .375rem}.backgrounds img{cursor:pointer;border-radius:.25rem;float:left;width:-webkit-calc(25% - .25rem);width:calc(25% - .25rem);height:auto;outline:#fff solid .25rem;margin:.125rem;-webkit-transition:.5s;transition:.5s;-ms-interpolation-mode:bicubic;-webkit-user-drag:none;-moz-user-drag:none;-ms-user-drag:none;user-drag:none}.backgrounds img:hover{opacity:.9}.backgrounds img:active{opacity:.5;-webkit-transition:0;transition:0}.backgrounds+input{font:inherit;font-size:1rem;line-height:2;width:-webkit-calc(100% - .375rem);width:calc(100% - .375rem);margin-left:.375rem;text-align:left;padding:.25rem 1rem}@-webkit-keyframes selected{10%{opacity:.5}}@keyframes selected{10%{opacity:.5}}