@keyframes spin{to{transform:rotate(360deg)}}.playground-hero{padding:60px 0 30px;text-align:center}.playground-hero h1{font-size:2.25rem;font-weight:700;color:#1a202c;margin-bottom:.5rem}.playground-hero p{font-size:1.1rem;color:#718096;max-width:600px;margin:0 auto}.playground-container{max-width:1000px;margin:0 auto;padding:0 20px 60px}.playground-url-bar{margin-bottom:24px}.url-input-group{display:flex;align-items:center;border:2px solid #e2e8f0;border-radius:10px;overflow:hidden;transition:border-color .2s ease;background:#fff}.url-input-group:focus-within{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1)}.url-input,.url-protocol{font-family:"SF Mono","Fira Code",monospace;font-size:.95rem}.url-protocol{padding:12px 4px 12px 16px;color:#a0aec0;white-space:nowrap;user-select:none}.url-input{flex:1;border:0;outline:0;padding:12px 8px;color:#1a202c;background:0 0}.url-input::placeholder{color:#cbd5e0}.btn-capture{padding:12px 28px;margin:4px;background:#2563eb;color:#fff;border:0;border-radius:7px;font-weight:600;font-size:.95rem;cursor:pointer;transition:background .2s ease;white-space:nowrap}.btn-capture:hover{background:#1d4ed8}.btn-capture:disabled{background:#93c5fd;cursor:not-allowed}.btn-capture .capture-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}.playground-controls{background:#f7fafc;border:1px solid #e2e8f0;border-radius:10px;padding:20px;margin-bottom:24px}.control-section h3{font-size:.85rem;font-weight:600;color:#718096;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px}.control-row{display:flex;gap:16px;flex-wrap:wrap}.control-field{display:flex;flex-direction:column;gap:4px;min-width:120px}.control-field label{font-size:.8rem;font-weight:500;color:#4a5568}.control-field input[type=number],.control-field input[type=text],.control-field select{padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:.9rem;color:#1a202c;background:#fff;transition:border-color .2s ease}.control-field input:focus,.control-field select:focus{outline:0;border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.1)}.control-field input[type=number]{width:100px}.control-field-wide{flex:1;min-width:200px}.control-field-wide input[type=text]{width:100%}.control-section-advanced{margin-top:16px;padding-top:16px;border-top:1px solid #e2e8f0}.collapsible-header{cursor:pointer;user-select:none;display:flex;align-items:center;gap:8px}.collapsible-header:hover{color:#2563eb}.toggle-icon{font-size:1rem;transition:transform .2s ease}.toggle-icon.open{transform:rotate(45deg)}.control-row-advanced{margin-top:12px}.control-field-checkbox{flex-direction:row;align-items:center;gap:8px}.control-field-checkbox input[type=checkbox]{width:16px;height:16px;accent-color:#2563eb}.playground-curl-preview{background:#1a202c;border-radius:10px;margin-bottom:24px;overflow:hidden}.curl-header{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid #2d3748;gap:12px}.curl-header h3{font-size:.85rem;font-weight:600;color:#a0aec0;text-transform:uppercase;letter-spacing:.05em;margin:0;flex:1}.curl-method-toggle{display:flex;background:#2d3748;border-radius:6px;overflow:hidden}.curl-copy-btn,.curl-method-btn{color:#a0aec0;font-size:.8rem;cursor:pointer;transition:all .2s ease}.curl-method-btn{padding:4px 14px;border:0;background:0 0;font-weight:600}.curl-method-btn.active{background:#2563eb;color:#fff}.curl-copy-btn{padding:4px 12px;background:#2d3748;border:1px solid #4a5568;border-radius:6px}.curl-copy-btn:hover{background:#4a5568;color:#e2e8f0}.curl-command{padding:16px;margin:0;color:#68d391;font-family:"SF Mono","Fira Code",monospace;font-size:.85rem;line-height:1.6;overflow-x:auto;white-space:pre-wrap;word-break:break-all}.playground-canvas{margin-bottom:24px}.checkerboard-bg{background-image:linear-gradient(45deg,#e2e8f0 25%,transparent 25%),linear-gradient(-45deg,#e2e8f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e8f0 75%),linear-gradient(-45deg,transparent 75%,#e2e8f0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;background-color:#f7fafc;min-height:300px;border-radius:10px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.canvas-placeholder{text-align:center;color:#a0aec0;padding:40px}.canvas-placeholder .placeholder-icon{font-size:3rem;margin-bottom:12px;opacity:.5}.canvas-placeholder p{font-size:.95rem}.result-image{max-width:100%;max-height:600px;object-fit:contain}.playground-turnstile{display:flex;justify-content:center;margin-bottom:24px}.playground-error{background:#fff5f5;border:1px solid #fed7d7;border-radius:8px;padding:12px 16px;color:#c53030;font-size:.9rem;margin-bottom:24px}@media (max-width:768px){.playground-hero{padding:40px 0 20px}.playground-hero h1{font-size:1.75rem}.url-input-group{flex-wrap:wrap}.url-protocol{padding:10px 4px 10px 12px}.url-input{min-width:0}.btn-capture{width:100%;padding:12px}.control-row{flex-direction:column}.control-field{min-width:100%}.control-field input[type=number]{width:100%}.curl-header{flex-wrap:wrap}}@media (max-width:480px){.playground-hero h1{font-size:1.5rem}.playground-container{padding:0 12px 40px}}