:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%;min-height:100vh}*{box-sizing:border-box}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background:linear-gradient(135deg,#1a9667,#24bfa5,#0e7153);min-height:100vh}.container{max-width:1400px;margin:0 auto;padding:2rem}header{text-align:center;margin-bottom:3rem;color:#fff}header h1{font-size:3rem;margin:0 0 .5rem;text-shadow:2px 2px 4px rgba(0,0,0,.2)}.subtitle{font-size:1.25rem;opacity:.95;margin:0}.content{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2rem}@media (max-width: 968px){.content{grid-template-columns:1fr}}.form-section,.output-section{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 10px 30px #0003}h2{margin-top:0;color:#333;font-size:1.5rem;border-bottom:2px solid #24bfa5;padding-bottom:.5rem}.form-group{margin-bottom:1.5rem}label{display:block;margin-bottom:.5rem;font-weight:600;color:#555;font-size:.95rem}input[type=text],select{width:100%;padding:.75rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:border-color .3s}input[type=text]:focus,select:focus{outline:none;border-color:#24bfa5}select{cursor:pointer;background-color:#fff}.field-hint{display:block;margin-top:.25rem;font-size:.85rem;color:#666;font-style:italic}.checkbox-group{display:flex;flex-direction:column;gap:.75rem}.checkbox-label{display:flex;align-items:center;cursor:pointer;font-weight:400;color:#666}.checkbox-label input[type=checkbox]{margin-right:.5rem;width:18px;height:18px;cursor:pointer}.ide-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}@media (max-width: 768px){.ide-cards-grid{grid-template-columns:1fr}}.ide-card{display:flex;align-items:center;padding:1.25rem;background:#f8f9fa;border:2px solid #e9ecef;border-radius:16px;cursor:pointer;transition:all .3s ease;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.ide-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.ide-card:hover:before{left:100%}.ide-card:hover{border-color:#24bfa5;background:#f0faf8;box-shadow:0 8px 24px #24bfa52e}.ide-card.active{border-color:#24bfa5;background:linear-gradient(135deg,#e6f7f4,#f0faf8);box-shadow:0 4px 16px #24bfa540}.ide-card-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-right:1.25rem;flex-shrink:0;transition:all .3s ease;position:relative;box-shadow:0 2px 8px #00000014}.ide-card:hover .ide-card-icon{box-shadow:0 4px 16px #0000001f}.ide-card.active .ide-card-icon{box-shadow:0 4px 16px #24bfa533}.ide-card-icon svg{width:24px;height:24px;color:#fff;opacity:0;transition:opacity .3s ease}.ide-card.active .ide-card-icon svg{opacity:1}.ide-card-content{flex:1}.ide-card-content h4{margin:0 0 .25rem;font-size:1.1rem;font-weight:600;color:#333;transition:color .3s ease}.ide-card.active .ide-card-content h4{color:#1a9667}.ide-card-content p{margin:0;font-size:.85rem;color:#666}.ide-card-toggle{width:54px;height:30px;background:#ddd;border-radius:15px;position:relative;transition:all .3s ease;flex-shrink:0;box-shadow:inset 0 2px 4px #0000001a}.ide-card-toggle.checked{background:linear-gradient(135deg,#24bfa5,#1a9667);box-shadow:inset 0 2px 4px #0000000d,0 2px 8px #24bfa54d}.toggle-dot{width:26px;height:26px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:all .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 3px 8px #00000026;display:flex;align-items:center;justify-content:center}.ide-card-toggle.checked .toggle-dot{transform:translate(24px);box-shadow:0 3px 12px #24bfa566}.toggle-dot:after{content:"";width:8px;height:8px;background:#ddd;border-radius:50%;transition:all .3s ease}.ide-card-toggle.checked .toggle-dot:after{background:#24bfa5}@media (max-width: 768px){.ide-card{padding:.875rem}.ide-card-icon{width:40px;height:40px}.ide-card-icon svg{width:20px;height:20px}}.output-section h3{font-size:1.1rem;color:#555;margin:0 0 1rem}.preview{margin-bottom:2rem;padding:1.5rem;background:#f8f9fa;border-radius:8px;border:2px solid #e9ecef}.badge-preview{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.badge-preview img{height:28px}.markdown-output,.config-output{margin-bottom:1.5rem}.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.copy-btn{background:#24bfa5;color:#fff;border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-size:.9rem;font-weight:600;transition:background .3s}.copy-btn:hover{background:#1a9667}.copy-btn:active{transform:scale(.98)}pre{background:#f8f9fa;border:2px solid #e9ecef;border-radius:8px;padding:1rem;overflow-x:auto;margin:0}code{font-family:Courier New,Courier,monospace;font-size:.9rem;color:#333;white-space:pre-wrap;word-break:break-all}.placeholder{text-align:center;color:#999;padding:3rem 1rem;font-style:italic}footer{text-align:center;color:#fff;margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.2)}footer p{margin:.5rem 0}footer a{color:#fff;text-decoration:underline;font-weight:600}footer a:hover{opacity:.8}.small{font-size:.85rem;opacity:.8}.tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;border-bottom:2px solid #e9ecef}.tab{background:transparent;border:none;padding:.75rem 1.5rem;cursor:pointer;font-size:1rem;font-weight:600;color:#666;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .3s}.tab:hover{color:#24bfa5}.tab.active{color:#24bfa5;border-bottom-color:#24bfa5}.readme-preview{margin-bottom:1.5rem}.readme-preview pre{max-height:600px;overflow-y:auto}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.select-all-toggle{display:flex;align-items:center;font-size:.9rem;font-weight:400;color:#666;cursor:pointer;margin:0}.select-all-toggle input[type=checkbox]{position:relative;width:20px;height:20px;margin-right:.625rem;cursor:pointer;appearance:none;border-radius:7px;border:2.5px solid #d1d5db;background:#fff;transition:all .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014}.select-all-toggle input[type=checkbox]:hover{border-color:#24bfa5;box-shadow:0 4px 12px #24bfa533,0 0 0 3px #24bfa514}.select-all-toggle input[type=checkbox]:checked{background:linear-gradient(135deg,#24bfa5,#1a9667);border-color:#1a9667;box-shadow:0 4px 16px #24bfa54d,0 0 0 3px #24bfa51f;transform:scale(1.1)}.select-all-toggle input[type=checkbox]:checked:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.3);animation:selectAllPop .4s cubic-bezier(.68,-.55,.265,1.55)}@keyframes selectAllPop{0%{transform:translate(-50%,-50%) scale(0) rotate(-180deg);opacity:0}60%{transform:translate(-50%,-50%) scale(1.3) rotate(10deg);opacity:1}to{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}}.select-all-toggle input[type=checkbox]:focus{outline:none;box-shadow:0 4px 16px #24bfa540,0 0 0 4px #24bfa526}.select-all-toggle:hover{color:#24bfa5}.section-description{margin:0 0 1rem;font-size:.9rem;color:#666;font-weight:400}.readme-platforms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}.platform-checkbox{display:flex;align-items:center;padding:1rem 1.25rem;background:#f8f9fa;border:2px solid #e9ecef;border-radius:14px;cursor:pointer;font-weight:500;color:#4b5563;transition:all .3s cubic-bezier(.25,.46,.45,.94);position:relative;overflow:hidden;box-shadow:0 1px 3px #0000000d}.platform-checkbox:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(36,191,165,.1),transparent);transition:left .6s ease}.platform-checkbox:hover:before{left:100%}.platform-checkbox:hover{border-color:#24bfa5;background:linear-gradient(135deg,#f0faf8,#e6f7f4);box-shadow:0 8px 24px #24bfa526,0 2px 8px #00000014;color:#374151}.platform-checkbox:active{box-shadow:0 4px 12px #24bfa533}.platform-checkbox input[type=checkbox]{position:relative;width:22px;height:22px;margin-right:.875rem;cursor:pointer;appearance:none;border-radius:8px;border:2px solid #d1d5db;background:#fff;transition:all .3s cubic-bezier(.25,.46,.45,.94);flex-shrink:0;box-shadow:0 1px 3px #0000001a}.platform-checkbox input[type=checkbox]:hover{border-color:#24bfa5;box-shadow:0 4px 12px #24bfa526,0 0 0 3px #24bfa51a}.platform-checkbox input[type=checkbox]:checked{background:linear-gradient(135deg,#24bfa5,#1a9667);border-color:#24bfa5;box-shadow:0 4px 16px #24bfa54d,0 0 0 3px #24bfa526;transform:scale(1.05)}.platform-checkbox input[type=checkbox]:checked:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1);color:#fff;font-size:14px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.2);animation:checkmarkPop .3s cubic-bezier(.68,-.55,.265,1.55)}@keyframes checkmarkPop{0%{transform:translate(-50%,-50%) scale(0) rotate(-45deg);opacity:0}50%{transform:translate(-50%,-50%) scale(1.2) rotate(0);opacity:1}to{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}}.platform-checkbox input[type=checkbox]:focus{outline:none;box-shadow:0 4px 16px #24bfa533,0 0 0 4px #24bfa526}.platform-checkbox:has(input[type=checkbox]:checked){background:linear-gradient(135deg,#e6f7f4,#d1f2eb);border-color:#24bfa5;box-shadow:0 4px 16px #24bfa533,0 0 0 1px #24bfa51a;color:#065f46}.platform-checkbox input[type=checkbox]:checked+span{color:#065f46;font-weight:600;text-shadow:0 1px 2px rgba(36,191,165,.1)}@media (max-width: 768px){.readme-platforms-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.platform-checkbox{padding:.875rem 1rem}.select-all-toggle{padding:.375rem .625rem;font-size:.875rem}}.platform-checkbox:focus-within{outline:none;border-color:#24bfa5;box-shadow:0 0 0 3px #24bfa526,0 4px 16px #24bfa51a}.select-all-toggle:focus-within{outline:none;box-shadow:0 0 0 3px #24bfa526}
