hr{background-color:#dadada;height:1px;border:none;margin:50px}.main-content hr{background-color:#dadada;height:1px;border:none;margin:50px 0}.how-to-section{max-width:1000px;margin:0 auto;padding:30px 20px;font-family:sans-serif}.how-to-section h2{text-align:center;font-size:32px;margin-bottom:40px}.cards{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px}.card{background:#fff;border-radius:12px;padding:20px;flex:1;min-width:280px;box-shadow:0 2px 6px rgba(0,0,0,.08);text-align:center;transition:all .3s ease-in-out;cursor:default;position:relative;border:1px solid rgba(0,0,0,.05);overflow:hidden}.card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08);border-color:rgba(0,0,0,.1)}.card:hover::before{content:"";position:absolute;top:var(--y,50%);left:var(--x,50%);width:300%;height:300%;background:radial-gradient(circle at center,rgba(65,125,255,.09) 0,transparent 60%);transform:translate(-50%,-50%);pointer-events:none;transition:top .2s ease,left .2s ease;z-index:0;border-radius:inherit}.card *{position:relative;z-index:1}.card .number{width:40px;height:40px;margin:0 auto 15px;background:var(--primary-color);color:#fff;border-radius:50%;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center}.card h3{font-size:16px;margin-bottom:10px;font-weight:700;text-align:center}.card p{font-size:14px;color:#555}@media (max-width:768px){.cards{flex-direction:column}}.cssHigh .comment{color:#49c012}.class-selector{color:#090}.id-selector{color:#df0909}.tag-selector{color:#009}.cssHigh .property{color:#1a86c0}.cssHigh .value{color:#ce9178}.cssHigh .atrule{color:#c586c0}.cssHigh .string{color:#d69d85}.cssHigh .unit{color:#c21c2a}.cssHigh .color{color:#4ec9b0}.cssHigh .brace{color:#082674}.cssHigh .bracket{color:#21d309}.jsHigh .keyword{color:#569cd6}.jsHigh .boolean{color:#b5cea8}.jsHigh .number{color:#b5cea8}.jsHigh .string{color:#ce9178}.jsHigh .comment{color:#6a9955;font-style:italic}.jsHigh .operator{color:#27d317}.jsHigh .punctuation{color:#c02b2b}.customization-panel{background-color:#f4f6fa;padding:24px;border-radius:8px;border:1px solid #cbd3e1;margin:20px;margin-top:100px;box-shadow:0 0 10px 0 rgba(0,0,0,.2)}.customization-panel-heading{text-align:center;font-size:30px;margin-top:50px;margin-right:20px;margin-bottom:50px;font-weight:500}@media (max-width:680px){.customization-panel-heading{border-bottom:1px solid #cbd3e1;font-size:24px;margin-top:26px;margin-bottom:26px}}.customization-group{grid-column:1/-1}.group-heading{font-size:16px;font-weight:500;color:#555;text-transform:uppercase;letter-spacing:.5px;margin-bottom:20px;padding-bottom:8px}#editor-customization-container,.group-children{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:1.2rem}@media (max-width:680px){#editor-customization-container,.group-children{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem}}.customization-option{background-color:#fff;box-shadow:0 0 4px 0 #dadada73;padding:16px;border-radius:8px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;position:relative}.option-title{font-size:15px;font-weight:500}.option-group{grid-column:2/3;display:flex;align-items:center}.customization-option .ti-info{position:absolute;right:2px;top:2px;font-size:16px;width:20px;height:20px;border-radius:50%;background:#f9fbfd;color:#555;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .3s,background-color .3s}.customization-option .ti-info:hover{background:var(--secondary-color);color:#fff}.customization-option .ti-info::after{content:attr(data-info);position:absolute;bottom:125%;right:0;background-color:var(--secondary-color);color:var(--light-color);padding:1rem;border-radius:8px;font-size:16px;line-height:1.5;font-weight:400;font-family:Arial,Helvetica,sans-serif;word-wrap:break-word;width:max-content;max-width:250px;text-align:center;opacity:0;visibility:hidden;transition:opacity .3s,transform .3s;z-index:10;pointer-events:none;box-shadow:0 4px 15px rgba(0,0,0,.2)}.customization-option .ti-info:hover::after{opacity:1;visibility:visible;transform:translateY(-5px)}.option-group.radio input[type=radio]{display:none}.option-group.radio{display:flex;background-color:#f9fbfd;border-radius:8px;padding:4px;border:1px solid #cbd3e1}.option-group.radio label{padding:6px 16px;cursor:pointer;color:#555;font-size:14px;font-weight:500;border-radius:6px;transition:color .3s,background-color .3s;white-space:nowrap}.option-group.radio input[value=true]:checked+label{background-color:#22c88f;color:#fff;box-shadow:0 2px 8px rgba(61,220,132,.3)}.option-group.radio input[value=false]:checked+label{background-color:#dc3545;color:#fff;box-shadow:0 2px 8px rgba(229,62,62,.3)}.option-group.checkbox{display:flex;align-items:center}.option-group.checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;width:30px;height:30px;border-radius:50%;border:2px solid #ccc;cursor:pointer;transition:all .2s ease-in-out;position:relative}.option-group.checkbox input[type=checkbox]::after{content:"\ea41";font-family:tutsinsider;font-size:22px;color:#ccc;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.option-group.checkbox input[type=checkbox]:checked{border-color:var(--primary-color);background-color:var(--primary-color)}.option-group.checkbox input[type=checkbox]:checked::after{color:#fff}.option-group.checkbox input[type=checkbox]:focus{outline:0;box-shadow:none}.select-wrapper{position:relative;width:100%;min-width:200px}.select-display{background:#f9fbfd;border:1px solid #cbd3e1;padding:10px 16px;padding-right:30px;border-radius:8px;cursor:pointer;transition:border-color .3s;font-size:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%;max-width:250px}.select-display:hover,.select-wrapper.open .select-display{border-color:var(--primary-color)}.select-display::after{content:'';position:absolute;right:16px;top:50%;margin-top:-3px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #555;transition:transform .3s}.select-wrapper.open .select-display::after{transform:rotate(180deg)}.select-dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#f9fbfd;border:1px solid #cbd3e1;border-radius:8px;max-height:200px;overflow-y:auto;z-index:100;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease;box-shadow:0 8px 25px rgba(0,0,0,.2)}.select-wrapper.open .select-dropdown{opacity:1;visibility:visible;transform:translateY(0)}.select-option{padding:12px 16px;cursor:pointer;font-size:14px;transition:background-color .3s,color .3s}.select-option:hover{background-color:var(--primary-color);color:#fff}.select-option.selected{background-color:var(--primary-color);color:#fff;font-weight:500}.select-wrapper input[type=hidden]{display:none}.option-group.number,.option-group.text,.option-group.textarea{flex-direction:column;align-items:flex-start;width:100%}.option-group input[type=number],.option-group input[type=text],.option-group textarea{width:100%;background:#f9fbfd;border:1px solid #cbd3e1;padding:10px 16px;border-radius:8px;color:#333;font-size:14px;transition:border-color .3s,box-shadow .3s}.option-group input[type=number]:focus,.option-group input[type=text]:focus,.option-group textarea:focus{outline:0;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-color) 4d}.option-group.number label,.option-group.text label,.option-group.textarea label{font-size:12px;font-weight:500;color:#555;margin-bottom:6px}.option-group.range .range-output{margin-left:10px;width:30px}.option-group.range input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;background:#d1d5db;outline:0;transition:opacity .15s ease-in-out;border-radius:9999px;box-shadow:inset 0 1px 3px rgba(0,0,0,.1)}.option-group.range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;background:var(--primary-color);cursor:grab;border-radius:9999px;box-shadow:0 2px 5px rgba(0,0,0,.2);border:2px solid #fff;transition:background .2s ease-in-out,transform .1s ease-in-out}.option-group.range input[type=range]::-moz-range-thumb{width:24px;height:24px;background:var(--primary-color);cursor:grab;border-radius:9999px;box-shadow:0 2px 5px rgba(0,0,0,.2);border:2px solid #fff;transition:background .2s ease-in-out,transform .1s ease-in-out}.option-group.range input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;background:var(--primary-color);transform:scale(1.1)}.option-group.range input[type=range]::-moz-range-thumb:active{cursor:grabbing;background:var(--primary-color);transform:scale(1.1)}.option-group.range input[type=range]::-webkit-slider-thumb:hover{background:var(--secondary-color)}.option-group.range input[type=range]::-moz-range-thumb:hover{background:var(--secondary-color)}.customization-controls{display:flex;justify-content:flex-end;gap:12px;margin-top:24px;padding-top:24px;border-top:1px solid #cbd3e1}.panel-button{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;border:1px solid #cbd3e1;background:#fff;color:#555;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease}.panel-button:hover{border-color:var(--primary-color);background-color:var(--primary-color);color:#fff}.panel-button i{font-size:16px}#editor-customize{margin-right:auto}#customization-expand.hidden,#editor-customize.hidden,.customization-panel.hidden{display:none}#customization-defaults{background-color:#dc3545;color:#fff;border:none}.faqs-wrapper{padding:30px;border-top:1px solid var(--border-color)}@media (max-width:680px){.faqs-wrapper{padding:15px;border-radius:0;box-shadow:none;border:none}}.faqs-heading{font-weight:600;text-align:center;margin-bottom:2.5rem;color:var(--secondary-color)}.faq-item{border-bottom:1px solid #e9ecef;counter-increment:faq}.faq-item:last-child{border-bottom:none}.faq-question{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:1.5rem 0 1.5rem 3rem;cursor:pointer;list-style:none;font-size:1.125rem;font-weight:500;color:var(--secondary-color);transition:color .2s ease-in-out}.faq-question:hover{color:var(--primary-color)}.faq-number::before{content:counter(faq);position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:50%;font-weight:600;font-size:1rem;background-color:var(--light-color);color:var(--dark-color);box-shadow:inset 0 0 5px #eee;transition:background-color .3s ease,color .3s ease}.faq-item.is-open .faq-number::before{background-color:var(--primary-color);color:var(--light-color)}.faq-answer{color:#555;background-color:var(--light-color);line-height:1.6;font-size:1rem;box-shadow:inset 0 5px 5px -5px #ccc,inset 0 -5px 5px -5px #ccc;overflow:hidden;transition:max-height .4s ease-out,padding-top .4s ease-out,padding-bottom .4s ease-out;max-height:0;padding-left:3rem;padding-right:1.5rem;padding-top:0;padding-bottom:0}.faq-item.is-open .faq-answer{padding-top:1.5rem;padding-bottom:1.5rem;max-height:150px}.faq-icon{position:relative;width:1em;height:1em;margin-left:1rem;flex-shrink:0}.faq-icon::after,.faq-icon::before{content:'';position:absolute;background-color:var(--primary-color);transition:transform .3s ease-in-out}.faq-icon::before{top:50%;left:0;width:100%;height:2px;transform:translateY(-50%)}.faq-icon::after{top:0;left:50%;width:2px;height:100%;transform:translateX(-50%)}.faq-item.is-open .faq-question{color:var(--primary-color)}.faq-item.is-open .faq-icon::after{transform:translateX(-50%) rotate(90deg)}.faq-item.is-open .faq-icon::before{transform:translateY(-50%) rotate(180deg)}