:root{--primary-color:#3592e2;--light-color:#FF3300;--bg-color:#F0F0F0;--card-bg:#ffffff;--text-color:#555;--p-color:#666;--border-color:#e0e0e0;--code-bg:#f8f8f8;--black:#FFFFFF;--dark-blue:#3475b2}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;background:#f0f0f0}a{color:#333;text-decoration:none}a:hover{color:#3592e2}.png{text-align:center;margin-left:auto;margin-right:auto;margin-top:10px}.png img{border-radius:6px;border:1px #e1e1e1 solid}.nav-tabs{display:flex;border-bottom:2px solid var(--border-color);margin-bottom:10px}.nav-item{padding:12px 24px;cursor:pointer;position:relative;font-size:18px}.nav-item.active{font-weight:700}.nav-item.active::after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:2px;background:var(--primary-color)}.navers{width:100%;font-size:13px;background-color:#000;height:32px;line-height:32px;color:#fff;text-align:center;position:fixed;top:0;z-index:10000}.navers span{width:1200px;margin-left:auto;margin-right:auto;text-align:left;display:block}.navers a{color:#eee;margin-right:10px}.screen{padding:10px 0}h2{color:var(--text-color);text-align:center}.preview-container{display:flex;justify-content:center;align-items:center}.preview-box{width:100%;height:130px;background:var(--black);margin-bottom:10px;cursor:pointer;border:2px solid #07c160;border-radius:15px;display:flex;justify-content:center;align-items:center;box-shadow:0 8px 24px rgba(0,0,0,.1);transition:background-color .3s}.zoom-button{background:0 0;border:none;padding:0;fill:#07c160;cursor:pointer}.zoom-icon{width:26px;height:26px;transition:transform .2s,fill .2s}.zoom-button:hover .zoom-icon{transform:scale(1.3)}.color-palette{padding:20px;display:flex;justify-content:center}#colorGrid{display:grid;grid-template-columns:repeat(5,1fr);margin:0}.color-item{aspect-ratio:1;border-radius:15px;transition:transform .2s}.color-item:hover{transform:scale(1.05)}.zoom-icon{transition:fill .3s ease}.color-item{box-shadow:0 2px 6px rgba(0,0,0,.1)}.color-item:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,.2)}.form-group{margin-bottom:17px}label{display:block;margin-bottom:8px;color:#333;font-weight:500}.custom-select{position:relative}.custom-select select{width:100%;padding:12px 40px 12px 15px;border:2px solid #e5e5e5;border-radius:15px;background-color:var(--bg-color);appearance:none;font-size:16px;color:var(--text-color);transition:border-color .3s}.custom-arrow{position:absolute;right:15px;top:50%;transform:translateY(-50%);border:6px solid transparent;border-top-color:#07c160;pointer-events:none}input[type=text]{width:100%;padding:12px;border:2px solid #e5e5e5;border-radius:15px;font-size:16px}input[type=color]{width:60px;height:60px;border:none;border-radius:50%;padding:5px;cursor:pointer}.button-group{text-align:center;margin-left:auto;margin-right:auto}.copy-btn,.download-btn{padding:15px 30px;margin:10px 5px;background:var(--primary-color);color:#fff;border:none;border-radius:6px;font-size:16px;cursor:pointer;transition:background .3s}.copy-btn:disabled{background-color:#ccc;color:#999}.download-btn:hover{background:var(--dark-blue)}.height-input,.select-box,.width-input{width:200px;box-sizing:border-box;padding:8px;margin:4px 0;background-color:var(--bg-color);color:var(--text-color)}.preview-box{transition:background-color .3s}:fullscreen{background:var(--current-color,#fff)!important;overflow:hidden}:fullscreen .screen{display:none}.fullscreen-tip{display:none;position:fixed;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(0,0,0,.5);font-size:14px}:fullscreen .fullscreen-tip{display:block}html:fullscreen{background:var(--current-color,#fff)!important;overflow:hidden}html:fullscreen body{display:none!important}html:fullscreen .fullscreen-tip{display:block!important;position:fixed;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(0,0,0,.5);font-size:14px;z-index:9999}:fullscreen::backdrop{background:var(--current-color,#fff)!important}#previewBox{transition:background .3s ease}.color-grid{display:flex;flex-wrap:wrap;margin:0 auto;height:260px}.color-grid>*{flex:1 1 calc(33.333% - 30px);margin:15px}@supports (display:grid){.color-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:0 auto;min-height:260px}.color-grid>*{margin:0}}.download-form{background:var(--card-bg);border-radius:16px;padding:25px;box-shadow:0 8px 24px rgba(0,0,0,.1);margin:0 auto}footer font{color:var(--primary-color)!important}footer a{margin-left:10px;margin-bottom:10px;margin-right:10px}footer{border-top:1px #e1e1e1 solid;padding:20px 0 30px 0;line-height:50px}body{font-family:-apple-system,verdana,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:var(--bg-color);color:var(--text-color);transition:all .3s;margin:0;padding:0;padding-top:60px}h2{font-size:22px;font-weight:400;margin-bottom:20px;margin-top:20px;text-align:center}.clear{height:10px}.clear,.clear5,.clearfix{clear:both;visibility:hidden;overflow:hidden}.clear5{height:5px}.clear15{height:15px;clear:both;visibility:hidden;overflow:hidden}.clear30{height:30px;clear:both;visibility:hidden;overflow:hidden}input::placeholder,textarea::placeholder{color:#999!important;opacity:1!important}.header ul{padding:0;margin:0}#main,.main{margin-top:10px;margin-left:10px;margin-right:10px}.logofont{float:left;line-height:40px}.logofont a{color:#3592e2;font-size:22px}@media (min-width:768px){#main,.header ul,.main{margin-left:auto;margin-right:auto;width:1200px}.menu{display:none!important}}@media (max-width:768px){.header ul{width:100%;padding-left:15px;padding-right:10px}.navers{display:none}.header{top:0!important}.menu{line-height:22px!important}}.header h1{white-space:nowrap;font-size:26px;color:var(--primary-color);background:url(../../ico.png) center left no-repeat;background-size:25px auto;padding-left:30px}.header .com,.header .org{float:left;line-height:42px;font-size:26px}h1{font-size:32px;font-weight:700}.none{display:none!important}.share-dialog{display:none;position:fixed;top:52%;min-width:220px;left:50%;transform:translate(-50%,-50%);background-color:var(--card-bg);border-radius:15px;box-shadow:0 2px 4px rgba(0,0,0,.1);padding:10px 15px;z-index:1000}.share-dialog.show{display:block}.share-dialog .share-option{display:flex;align-items:center;padding:10px 10px;cursor:pointer;border-bottom:1px solid #f0f0f0}.share-dialog .share-option:last-child{border-bottom:none}.share-dialog .share-option:hover{background-color:var(--code-bg)}.share-dialog .share-option i{margin-right:10px;font-size:20px}.save-prompt{display:none;position:fixed;bottom:20px;background-color:var(--card-bg);border:1px solid var(---border-color);border-radius:5px;padding:10px 20px;box-shadow:0 -2px 10px rgba(0,0,0,.1);z-index:1000;text-align:left;width:200px;box-sizing:border-box}.save-prompt,.save-prompt:after{left:50%;transform:translateX(-50%)}.save-prompt:after{content:"";position:absolute;bottom:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:11px solid var(--card-bg)}.close-btn{position:absolute;top:-10px;right:-10px;width:25px;height:25px;background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:50%;color:var(--text-color);font-weight:700}.close-btn,.save-screen{cursor:pointer;display:flex;justify-content:center;align-items:center}center{text-align:center;margin-left:auto;margin-right:auto}.save-screen{position:fixed;bottom:120px;right:15px;width:40px;height:40px;background-color:var(--bg-color);border-radius:50%;color:#1aad19;font-size:20px;box-shadow:0 2px 4px rgba(0,0,0,.1);z-index:1000}.write-share{bottom:70px;display:flex;color:var(--light-color)}.back-to-top,.write-share{position:fixed;right:15px;width:40px;height:40px;background-color:var(--bg-color);border-radius:50%;align-items:center;justify-content:center;font-size:20px;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.1);z-index:1000}.back-to-top{bottom:20px;display:flex;color:#1aad19;display:none}.back-to-top.show{display:flex}.cookie-banner{font-size:14px;position:fixed;bottom:0;left:0;width:100%;background-color:var(--card-bg);color:var(--text-color);text-align:center;padding:10px 0;z-index:1000}.cookie-banner a{color:#0275d8;text-decoration:none}.cookie-banner a:hover{text-decoration:underline}.cookie-banner .btn{background-color:var(--primary-color);color:#fff;border:none;padding:5px 15px;margin-left:10px;margin-top:10px;cursor:pointer;border-radius:5px;font-size:14px}.cookie-banner .btn:hover{background-color:#4cae4c}.header{position:fixed;top:32px;left:0;width:100%;background:var(--card-bg);padding:15px 0 5px 0;box-shadow:0 2px 10px #ccc;z-index:1000;display:flex;justify-content:space-between;align-items:center}.header h1{float:left}.weui-form{padding:15px}.mcenter{text-align:center;margin-left:auto;margin-right:auto;margin-top:15px}@media (min-width:768px){.mcenter{margin-top:70px}}.weui-select{-webkit-appearance:none;appearance:none}.weui-input[type=color]{height:30px;padding:3px}.weui-btn-area{margin-top:20px}.result-item{display:flex;align-items:center;margin-bottom:15px;background:var(--card-bg);padding:10px;border-radius:15px;box-shadow:0 2px 12px rgba(0,0,0,.1)}.result-label{width:120px;font-size:16px;color:var(--primary-color)}.result-value{flex:1;font-size:16px;color:var(--text-color);margin-right:15px}.copy-icon{cursor:pointer;color:var(--primary-color);font-size:18px}.knowledges{margin:10px auto;height:100%;width:auto}.knowledge-card{background:var(--card-bg);color:var(--text-color);border-radius:18px;padding:20px;margin:20px 0;overflow:auto;color:var(--p-color);line-height:32px;font-size:15px;box-shadow:0 2px 12px rgba(0,0,0,.1)}.card-title{color:var(--primary-color);font-size:18px;margin-bottom:15px}.language-methods{background:var(--card-bg);border-radius:6px;padding:20px;box-shadow:0 2px 12px rgba(0,0,0,.1)}.method-item{display:flex;align-items:center;margin-bottom:15px}.language-name{width:100px;font-size:16px;color:var(--primary-color)}.code-example2{flex:1;background:var(--code-bg);border-radius:6px;font-family:verdana;font-size:15px;padding-left:10px;padding-right:10px;cursor:pointer;color:var(--text-color);word-break:break-all;margin-right:15px}.code-example{flex:1;background:var(--code-bg);padding:10px;border-radius:6px;font-size:15px;color:var(--text-color);word-break:break-all;margin-right:15px}.copy-icon{cursor:pointer;color:var(--primary-color);font-size:18px}.toast{position:fixed;bottom:50%;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);color:#fff;padding:10px 20px;border-radius:6px;font-size:15px;z-index:10000;display:none}.knowledge-card h3{margin-top:5px;margin-bottom:5px;color:#1aad19;font-weight:400;font-size:18px}.knowledge-card h4{margin-top:0}.knowledge-card p{color:var(--p-color)}.knowledge-card ul{margin-left:2em;color:var(--p-color);height:100%;overflow:hidden}.knowledge-card ul a{margin-bottom:5px;display:block;float:left}footer{margin-top:40px;text-align:center;font-size:14px;color:var(--text-color)}.footer-links{display:flex;justify-content:center;gap:20px;margin-bottom:10px}.footer-links a{color:var(--primary-color);text-decoration:none}.header .menu{margin-right:10px;float:right;line-height:30px;display:block}.header .menu .menu-item{cursor:pointer}.menu-item font{font-size:32px}.dropdown-menu{display:none;position:absolute;top:50px;right:0;background-color:var(--card-bg);box-shadow:0 2px 4px rgba(0,0,0,.1);z-index:1000;border-radius:6px}.dropdown-menu.show{display:block}.dropdown-menu.hide{display:none}.dropdown-menu .menu-item{padding:5px 20px;cursor:pointer}.dropdown-menu .menu-item a{color:var(--text-color)}.dropdown-menu .menu-item:hover{background-color:var(--code-bg)}.header sup{float:left;cursor:pointer;margin-top:-10px}.header sup font{color:var(--light-color);margin-left:10px}.org{float:left}@media (max-width:768px){.time-card .code-example2{font-size:15px;font-weight:400}.dropdown-menu{right:5px}#share-ctrl-d{display:none}.header sup{display:none}.header h1{font-size:20px;background-image:none;padding-left:0}.header .com,.header .org{font-size:20px;line-height:32px}.mcenter{margin-top:10px}}.dashboard-container{display:flex;gap:40px;padding:20px 0 0 0}.color-section{flex:1;background:var(--card-bg);border-radius:20px;padding:20px;box-shadow:0 8px 32px rgba(0,0,0,.1)}.download-section{display:flex;background:var(--card-bg);border-radius:20px;padding:0 20px 20px 20px;flex:1}.color-item{aspect-ratio:1;transition:transform .2s}.download-card{flex:1;text-align:center;width:auto}.color-table{width:100%;margin:20px auto;border-radius:15px;overflow:hidden;border-collapse:collapse;box-shadow:0 8px 32px rgba(0,0,0,.1)}.color-table thead{background-color:var(--card-bg)}.color-table td,.color-table th{padding:15px;text-align:left;border-bottom:1px solid #f2f2f2}.color-table tbody tr:nth-child(even){background-color:var(--card-bg)}.color-table tbody tr:nth-child(odd){background-color:var(--code-bg)}.color-code{font-family:'Courier New',monospace;font-weight:700}.faq{margin-bottom:15px;padding-bottom:15px;border-bottom:var(--border-color)}.faq:last-child{border-bottom:none}.question{font-size:18px;font-weight:700;color:var(--p-color);margin-bottom:5px}.answer{font-size:16px;color:var(--p-color)}.faq-container{margin:20px auto;padding:20px;background-color:var(--card-bg);border-radius:15px;box-shadow:0 8px 32px rgba(0,0,0,.1)}@media (max-width:768px){.dashboard-container{flex-direction:column}}.closeme{font-size:14px;border-top:1px #eee solid;padding-top:10px;line-height:32px;margin-top:10px}#chart-container{width:100%;border-radius:15px;min-height:400px;padding:10px;box-sizing:border-box;background-color:var(--card-bg);box-shadow:0 8px 32px rgba(0,0,0,.1);touch-action:pan-y}.footer{margin-top:40px;color:var(--text-color)}.footer,.footer2{text-align:center;font-size:14px}.footer2{margin-top:10px;margin-bottom:20px}.footer2 a{color:var(--text-color);margin-left:10px;margin-right:10px}:fullscreen,:webkit-full-screen{background:var(--current-color)!important;width:100%!important;height:100%!important}#fullscreenOverlay{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999}#previewBox:-webkit-full-screen{width:100vw!important;height:100vh!important;background:var(--current-color)}#previewBox:fullscreen{width:100vw!important;height:100vh!important;background:var(--current-color)}.fullscreen-hide{display:none!important}#previewBox:fullscreen{background:var(--current-color)!important;all:initial!important}#previewBox:-webkit-full-screen{background:var(--current-color)!important;all:initial!important}#fullscreenOverlay{background:inherit!important;pointer-events:none}#previewBox:-webkit-full-screen{background:var(--current-color)!important}#previewBox:-moz-full-screen{background:var(--current-color)!important}#previewBox:-ms-fullscreen{background:var(--current-color)!important}#previewBox:fullscreen{background:var(--current-color)!important}.favicon{margin:0 auto;padding:20px;display:flex;flex-wrap:wrap;gap:20px}.favicon .left-panel,.favicon .right-panel{background-color:#fff;border-radius:15px;box-shadow:0 4px 10px rgba(0,0,0,0.1);padding:20px;flex:1;height:300px;display:flex;flex-direction:column}.favicon .left-panel{flex:2}.favicon .right-panel{flex:2}.favicon .upload-area{border:2px dashed #ccc;padding:110px 40px;text-align:center;border-radius:10px;background-color:#f9f9f9;cursor:pointer;transition:border-color 0.3s ease}.favicon .upload-area:hover{border-color:#3592e2}.favicon .upload-area input{display:none}.favicon .upload-area p{margin:0;font-size:16px;color:#333}.favicon .upload-area i{margin-bottom:10px;font-size:12px}.favicon .preview{text-align:center;flex:1;overflow:hidden;display:none;margin-bottom:20px}.favicon .preview img{max-width:100%;height:100%;border-radius:10px;object-fit:contain}.favicon .size-select{margin:0 0 20px 0}.favicon .size-select select{width:100%;padding:10px;font-size:16px;border:1px solid #ccc;border-radius:10px;background-color:#fff;cursor:pointer}.favicon .down-btn{text-align:center}.favicon .down-btn button{padding:10px 20px;font-size:16px;background-color:#3592e2;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color 0.3s ease}.favicon .down-btn button:hover{background-color:var(--dark-blue)}.favicon .cropper-container{max-width:100%;margin:0 auto;position:relative;height:100%}.favicon .cropper-view-box,.favicon .cropper-face{border-radius:0;border:2px solid #3592e2;box-shadow:0 0 10px rgba(0,0,0,0.3)}.favicon .cropper-bg{background-image:linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}@media (max-width:768px){.favicon .container{flex-direction:column}.favicon .left-panel,.favicon .right-panel{max-width:100%;height:auto}}.rightgg{float:right;display:block;width:55%}