.left-panel{flex:1 1;display:flex;flex-direction:column;gap:1.5rem}.header{display:flex;align-items:center;gap:.75rem;font-size:1.5rem;font-weight:700;color:#1f2937}.header-icon{width:2rem;height:2rem;color:#6366f1}.description{color:#4b5563;font-size:.875rem}.preview-box{position:relative;padding:2rem;border-radius:1rem;min-height:12.5rem}.interactive-box,.preview-box{display:flex;align-items:center;justify-content:center}.interactive-box{width:8rem;height:8rem;border-radius:.75rem;background-color:#6366f1;transition:all .3s ease-in-out;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);color:white;font-weight:700;font-size:.75rem;cursor:pointer}.controls-grid{display:grid;grid-template-columns:1fr;grid-gap:1.5rem;gap:1.5rem;margin-top:1rem}@media (min-width:640px){.controls-grid{grid-template-columns:1fr 1fr}}.control-group{display:flex;flex-direction:column;gap:.5rem}.control-label{font-weight:600;font-size:14px}.control-value{font-weight:400;color:#805af5}.control-slider{width:100%;height:.5rem;background-color:#e0e7ff;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.control-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1.25rem;height:1.25rem;border-radius:50%;background:#805af5;cursor:pointer;border:2px solid white}.control-slider::-moz-range-thumb{width:1.25rem;height:1.25rem;border-radius:50%;background:#805af5;cursor:pointer;border:2px solid white}.control-select{width:100%;background-color:#fff;border:1px solid #d1d5db;border-radius:.5rem;padding:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:1.5rem 1.5rem}.control-select:focus{outline:none;border-color:#805af5;box-shadow:0 0 0 2px rgba(79,70,229,.2)}.examples-section{margin-top:2rem}.examples-heading{font-size:14px;font-weight:700;margin-bottom:1rem}.examples-grid{display:grid;grid-template-columns:1fr;grid-gap:1rem;gap:1rem}@media (min-width:768px){.examples-grid{grid-template-columns:1fr 1fr}}.example-card{border-radius:.75rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);padding:1rem;display:flex;flex-direction:column;gap:.75rem;border:2px solid transparent;transition:all .2s ease-in-out}.example-card-selected{border-color:#805af5}.example-header{display:flex;align-items:center;justify-content:space-between}.example-title{font-weight:600;font-size:16px;margin-bottom:0}.show-code-button{font-size:12px!important;border-radius:9999px;font-weight:700;transition:all .2s ease-in-out;border:none;cursor:pointer}.example-description{font-size:.875rem;color:#4b5563;margin-bottom:.5rem}.example-preview{flex-grow:1;display:flex;align-items:center;justify-content:center;padding:1rem;background-color:#f3f4f6;border-radius:.5rem}.right-panel{flex:1 1;border-radius:1rem;padding:1.5rem;position:relative;margin-top:20px!important}.code-header{justify-content:space-between;margin-bottom:1rem}.code-actions,.code-header{display:flex;align-items:center}.code-actions{gap:.5rem}.code-title{font-size:2.125rem;font-weight:600;margin-bottom:0!important}.copy-button{height:45px!important;line-height:0px!important;padding:6px 12px!important;border-radius:4px!important}.code-block{font-size:.875rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;color:#a7f3d0;background-color:rgba(0,0,0,.3);border-radius:.5rem;padding:1rem;overflow-x:auto;white-space:pre-wrap;word-break:break-word;padding-top:0!important;margin-top:0!important}.clear-example-button{border-radius:9999px;padding:.25rem .75rem;font-size:.875rem;display:flex;align-items:center;gap:.25rem;transition:all .2s ease-in-out;border:none;cursor:pointer}.clear-example-button:hover{background-color:#dc2626}