.playground-page{padding:40px 20px;max-width:var(--max-width);margin:0 auto}.playground-header{text-align:center;margin-bottom:40px}.playground-header h1{font-size:2em;margin-bottom:10px}.playground-header h1,.playground-header p{font-family:var(--font-mono);color:var(--text-color)}.playground-header p{opacity:.7;font-size:1.1em}.playground-header .pricing-note{font-size:.9em;margin-top:10px}.playground-header .pricing-note a{color:var(--accent-primary)}.playground-links{margin-top:15px;font-size:.9em}.playground-links a{color:var(--accent-primary);text-decoration:none}.playground-links a:hover{text-decoration:underline}.playground-links .link-sep{margin:0 10px;color:var(--text-color);opacity:.4}.mode-tabs{display:flex;gap:0;margin-bottom:30px;border-bottom:1px solid var(--border-color)}.mode-tab{padding:12px 24px;font-family:var(--font-mono);font-size:1em;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text-color);opacity:.6;cursor:pointer;transition:all .2s}.mode-tab:hover{opacity:.8}.mode-tab.active{opacity:1;border-bottom-color:var(--accent-primary);color:var(--accent-primary)}.playground-container{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;overflow:hidden;max-width:100%}.playground-input{background-color:var(--card-color);border:1px solid var(--card-border-color);border-radius:var(--border-radius);padding:30px;overflow:hidden;min-width:0}.input-section{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border-color)}.input-section:last-of-type{border-bottom:none;padding-bottom:0}.input-section label{display:block;margin-bottom:10px;font-weight:500}.input-section label,.url-input{font-family:var(--font-mono);color:var(--text-color)}.url-input{width:100%;padding:12px;font-size:1em;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius)}.options-section{margin-bottom:30px}.options-section h3{font-family:var(--font-mono);color:var(--text-color);margin-bottom:15px;font-size:1.1em}.checkbox-label{margin-bottom:10px}.checkbox-label input{margin-right:10px}.size-input{margin-top:15px}.size-input label{display:block;margin-bottom:8px}.size-field,.size-input label{font-family:var(--font-mono);color:var(--text-color)}.size-field{padding:8px;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);width:150px}.test-button{width:100%;padding:15px;font-family:var(--font-mono);font-size:1.1em;background-color:#2563eb;border:1px solid #2563eb;border-radius:var(--border-radius);color:#fff;cursor:pointer;transition:all .3s;font-weight:600}.test-button:hover:not(:disabled){background-color:#1d4ed8;border-color:#1d4ed8;transform:translateY(-2px);box-shadow:0 4px 12px rgba(37,99,235,.3)}.test-button:disabled{opacity:.5;cursor:not-allowed;background-color:#93c5fd;border-color:#93c5fd}.login-notice{font-family:var(--font-mono);color:var(--text-color);opacity:.7;text-align:center;margin-top:15px;font-size:.9em}.login-notice a{color:var(--accent-primary)}.example-select{width:100%;padding:12px 40px 12px 14px;font-family:var(--font-mono);font-size:.95em;background-color:var(--card-color);border:2px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-color);cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;transition:all .2s ease}.example-select:hover{border-color:var(--accent-primary);background-color:var(--card-hover-color)}.example-select:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(var(--accent-primary-rgb,59,130,246),.15)}.script-input{width:100%;min-height:200px;padding:15px;font-family:var(--font-mono);font-size:.9em;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-color);resize:vertical;line-height:1.5}.script-input:focus{outline:none;border-color:var(--accent-primary)}.script-hint{font-family:var(--font-mono);font-size:.85em;color:var(--text-color);opacity:.6;margin-top:10px}.script-hint code{background-color:var(--background-color);padding:2px 6px;border-radius:3px}.timeout-section{margin-top:15px}.timeout-section,.timeout-section label{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.timeout-section label{margin-bottom:0;min-width:0}.timeout-select{padding:8px 32px 8px 12px;font-family:var(--font-mono);font-size:.9em;background-color:var(--card-color);border:2px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-color);cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:14px;transition:all .2s ease;max-width:100%}.timeout-select:hover{border-color:var(--accent-primary);background-color:var(--card-hover-color)}.timeout-select:focus{outline:none;border-color:var(--accent-primary)}.timeout-hint{font-family:var(--font-mono);font-size:.8em;color:var(--text-color);opacity:.5}.webhook-section{margin-top:15px}.webhook-section label{display:block;margin-bottom:0}.webhook-input{width:100%;padding:8px 12px;font-family:var(--font-mono);font-size:.9em;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-color);margin-top:8px}.webhook-input:focus{outline:none;border-color:var(--accent-primary)}.webhook-input::placeholder{color:var(--text-color);opacity:.4}.webhook-hint{display:block;font-size:.8em;margin-top:5px}.empty-state,.webhook-hint{font-family:var(--font-mono);color:var(--text-color);opacity:.5}.empty-state{text-align:center}.screenshot-item,.screenshots-section{margin-bottom:20px}.screenshot-name{font-family:var(--font-mono);font-size:.9em;color:var(--text-color);margin-bottom:10px;padding:5px 10px;display:inline-block}.no-screenshots,.screenshot-name{background-color:var(--background-color);border-radius:var(--border-radius)}.no-screenshots{padding:30px;text-align:center;margin-bottom:20px}.no-screenshots p{font-family:var(--font-mono);color:var(--text-color);opacity:.7}.no-screenshots code{background-color:var(--card-color);padding:2px 6px;border-radius:3px}.playground-result{background-color:var(--card-hover-color,#f3f4f6);border:1px solid var(--card-border-color);border-left:3px solid var(--accent-primary,#2563eb);border-radius:var(--border-radius);padding:30px;min-height:400px;display:flex;align-items:center;justify-content:center;overflow:hidden;min-width:0}.loading-state{text-align:center}.loading-spinner{width:40px;height:40px;border-top:3px solid var(--border-color);border:3px solid var(--border-color);border-top-color:var(--text-color);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.loading-state p{font-family:var(--font-mono);color:var(--text-color);opacity:.7}.error-state{text-align:center}.error-message{font-family:var(--font-mono);color:#ff6b6b;font-size:1em}.result-state{width:100%;max-width:100%;overflow-x:auto}.result-header{margin-bottom:20px}.result-header h3{font-family:var(--font-mono);color:var(--text-color);margin-bottom:10px}.result-metrics{display:flex;gap:15px;flex-wrap:wrap}.result-metrics span{font-size:.9em;opacity:.8}.result-metrics span,.result-receipt{font-family:var(--font-mono);color:var(--text-color)}.result-receipt{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:.85em;flex-wrap:wrap}.result-receipt-label{color:var(--text-color);opacity:.7}.result-receipt code{max-width:100%;padding:3px 7px;border:1px solid var(--border-color);border-radius:4px;background-color:var(--background-color);color:var(--accent-primary);white-space:normal;overflow-wrap:anywhere}.success-indicator{color:#51cf66!important;opacity:1!important}.timeout-indicator{color:#f0ad4e!important;opacity:1!important}.error-indicator{color:#ff6b6b!important;opacity:1!important}.error-warning,.timeout-warning{font-family:var(--font-mono);font-size:.9em;padding:12px 15px;border-radius:var(--border-radius);margin-bottom:15px}.timeout-warning{background-color:rgba(240,173,78,.15);border:1px solid rgba(240,173,78,.3);color:#f0ad4e}.error-warning{background-color:rgba(255,107,107,.15);border:1px solid rgba(255,107,107,.3);color:#ff6b6b}.screenshot-preview{margin-bottom:25px;text-align:center}.preview-image{max-width:100%;height:auto}.console-section,.preview-image{border:1px solid var(--border-color);border-radius:var(--border-radius)}.console-section{margin-bottom:20px;background-color:var(--background-color);overflow:hidden}.console-toggle{width:100%;padding:12px 15px;font-family:var(--font-mono);font-size:.9em;background-color:transparent;border:none;color:var(--text-color);cursor:pointer;text-align:left;display:flex;align-items:center;gap:8px;transition:background-color .2s}.console-toggle:hover{background-color:var(--card-hover-color)}.console-counts{margin-left:auto;display:flex;gap:10px}.console-counts span{font-size:.85em;padding:2px 8px;border-radius:3px}.count-log{color:#aaa;background-color:rgba(255,255,255,.1)}.count-warn{color:#f0ad4e;background-color:rgba(240,173,78,.15)}.count-error{color:#ff6b6b;background-color:rgba(255,107,107,.15)}.console-output{border-top:1px solid var(--border-color);max-height:300px;overflow-y:auto;padding:10px}.console-entry{font-family:var(--font-mono);font-size:.85em;padding:4px 8px;margin:2px 0;border-radius:3px;display:flex;gap:8px}.console-level{font-weight:600;min-width:60px}.console-message{white-space:pre-wrap;word-break:break-word}.console-log{color:#ccc}.console-log .console-level{color:#888}.console-warn{color:#f0ad4e;background-color:rgba(240,173,78,.1)}.console-error{color:#ff6b6b;background-color:rgba(255,107,107,.1)}.console-info,.console-info .console-level{color:#5bc0de}.console-empty{font-family:var(--font-mono);font-size:.85em;color:var(--text-color);opacity:.5;padding:10px;text-align:center}.code-generation{margin-top:25px}.code-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.code-header h4{font-family:var(--font-mono);color:var(--text-color);margin:0;font-size:1em}.copy-code-button{padding:6px 12px;background:var(--accent-primary);color:white;border:none;border-radius:4px;font-family:var(--font-mono);font-size:.75rem;cursor:pointer;transition:all .2s}.copy-code-button:hover{background:var(--accent-primary-hover)}.code-block{font-family:var(--font-mono);font-size:.8em;color:var(--text-color);background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:15px;overflow-x:auto;line-height:1.4;margin:0;max-width:100%;word-break:break-word}@media (max-width:1024px){.playground-page{padding:30px 20px}.playground-container{gap:30px}}@media (max-width:768px){.playground-page{padding:20px 15px}.mode-tabs{flex-wrap:wrap;gap:8px;border-bottom:0}.mode-tab{flex:1 1 calc(50% - 8px);min-width:0;padding:10px 12px;border:1px solid var(--border-color);border-radius:6px}.mode-tab.active{border-color:var(--accent-primary);border-bottom-color:var(--accent-primary)}.playground-container{grid-template-columns:1fr;gap:25px}.playground-input,.playground-result{padding:20px}}.next-steps{margin-top:30px;padding-top:20px;border-top:1px solid var(--border-color)}.next-steps h4{font-family:var(--font-mono);font-size:.9em;color:var(--text-color);margin-bottom:12px}.next-steps-links{display:flex;flex-wrap:wrap;gap:15px}.next-steps-links a{font-family:var(--font-mono);font-size:.85em;color:var(--accent-primary);text-decoration:none;padding:8px 16px;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);transition:all .2s ease}.next-steps-links a:hover{border-color:var(--accent-primary);background-color:var(--accent-primary-light)}@media (max-width:480px){.playground-page{padding:15px 10px}.playground-header h1{font-size:1.75em}.playground-input,.playground-result{padding:15px}.size-field{width:120px}.timeout-section{align-items:flex-start;flex-direction:column;gap:8px}.timeout-section label,.timeout-select{width:100%}.timeout-badge{white-space:normal!important;line-height:1.35!important}}.mode-toggle-section{display:flex!important;align-items:center!important;gap:12px!important;margin-bottom:20px!important;flex-wrap:wrap!important}.mode-toggle-section>label{font-family:var(--font-mono)!important;font-size:.9em!important;color:var(--text-color)!important;opacity:.8!important;margin-bottom:0!important}.segmented-toggle{display:inline-flex!important;border:1px solid var(--border-color)!important;border-radius:6px!important;overflow:hidden!important;background:var(--card-color)!important}button.toggle-btn{padding:8px 16px!important;font-family:var(--font-mono)!important;font-size:.85em!important;background:transparent!important;border:none!important;border-radius:0!important;color:var(--text-color)!important;opacity:.6!important;cursor:pointer!important;transition:all .2s!important;line-height:1.5!important;margin:0!important}button.toggle-btn:first-child{border-right:1px solid var(--border-color)!important}button.toggle-btn:hover{opacity:.8!important;background:var(--background-color)!important}button.toggle-btn.active{opacity:1!important;background:var(--accent-primary)!important;color:white!important}.timeout-badge{background:#dbeafe!important;color:#1e40af!important;max-width:100%!important}.async-badge,.timeout-badge{font-family:var(--font-mono)!important;font-size:.75em!important;padding:4px 8px!important;border-radius:4px!important;font-weight:500!important;white-space:nowrap!important}.async-badge{background:#dcfce7!important;color:#15803d!important}.include-section{margin-bottom:20px;padding:0;background:transparent;border-radius:0;border:none}.include-section>label{display:block;font-family:var(--font-mono);font-size:.9em;color:var(--text-color);font-weight:600;margin-bottom:10px;opacity:1}.include-options{display:flex;gap:20px;flex-wrap:wrap}.checkbox-label{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.85em;color:var(--text-color);cursor:pointer}.checkbox-label input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#2563eb}.include-hint{display:block;font-family:var(--font-mono);font-size:.75em;color:var(--text-color);opacity:.5;margin-top:8px}.curl-preview{margin-top:20px;border:1px solid var(--border-color);border-radius:6px;overflow:hidden;max-width:100%}.curl-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:var(--background-color);border-bottom:1px solid var(--border-color)}.curl-header span{font-family:var(--font-mono);font-size:.85em;color:var(--text-color);opacity:.8}.curl-header button{font-family:var(--font-mono);font-size:.75em;padding:4px 10px;background:var(--accent-primary);color:white;border:none;border-radius:4px;cursor:pointer}.curl-header button:hover{opacity:.9}.curl-preview pre{margin:0;padding:15px;font-family:var(--font-mono);font-size:.8em;background:var(--card-color);overflow-x:auto;white-space:pre-wrap;word-break:break-all;max-width:100%}.raw-response-section{margin-top:20px}.raw-response-toggle{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.85em;color:var(--text-color);opacity:.7;cursor:pointer;padding:10px 0;border:none;background:none}.raw-response-toggle:hover{opacity:1}.raw-response-content{margin-top:10px;padding:15px;background:var(--background-color);border:1px solid var(--border-color);border-radius:6px;max-height:400px;overflow:auto}.raw-response-content pre{margin:0;font-family:var(--font-mono);font-size:.75em;white-space:pre-wrap;word-break:break-all}