.playground-page{max-width:var(--max-width);margin:0 auto;padding:40px 20px}.playground-header{text-align:center;margin-bottom:40px}.playground-header h1{font-family:var(--font-mono);color:var(--text-color);margin-bottom:10px;font-size:2em}.playground-header p{font-family:var(--font-mono);color:var(--text-color);opacity:.7;font-size:1.1em}.playground-header .pricing-note{margin-top:10px;font-size:.9em}.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{color:var(--text-color);opacity:.4;margin:0 10px}.mode-tabs{border-bottom:1px solid var(--border-color);gap:0;margin-bottom:30px;display:flex}.mode-tab{font-family:var(--font-mono);color:var(--text-color);opacity:.6;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;padding:12px 24px;font-size:1em;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{grid-template-columns:1fr 1fr;align-items:start;gap:40px;max-width:100%;display:grid;overflow:hidden}.playground-input{background-color:var(--card-color);border:1px solid var(--card-border-color);border-radius:var(--border-radius);min-width:0;padding:30px;overflow:hidden}.input-section{margin-bottom:30px}.input-section label{font-family:var(--font-mono);color:var(--text-color);margin-bottom:10px;font-weight:500;display:block}.url-input{width:100%;font-family:var(--font-mono);background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-color);padding:12px;font-size:1em}.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{font-family:var(--font-mono);color:var(--text-color);cursor:pointer;align-items:center;margin-bottom:10px;display:flex}.checkbox-label input{margin-right:10px}.size-input{margin-top:15px}.size-input label{font-family:var(--font-mono);color:var(--text-color);margin-bottom:8px;display:block}.size-field{font-family:var(--font-mono);background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-color);width:150px;padding:8px}.test-button{width:100%;font-family:var(--font-mono);background-color:var(--card-hover-color);border:1px solid var(--card-hover-border);border-radius:var(--border-radius);color:var(--text-color);cursor:pointer;padding:15px;font-size:1.1em;transition:all .3s}.test-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 8px #ffffff1a}.test-button:disabled{opacity:.5;cursor:not-allowed}.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%;font-family:var(--font-mono);background-color:var(--card-color);border:2px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-color);cursor:pointer;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-position:right 12px center;background-repeat:no-repeat;background-size:16px;padding:12px 40px 12px 14px;font-size:.95em;transition:all .2s}.example-select:hover{border-color:var(--accent-primary);background-color:var(--card-hover-color)}.example-select:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(var(--accent-primary-rgb,59,130,246),.15);outline:none}.script-input{width:100%;min-height:200px;font-family:var(--font-mono);background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-color);resize:vertical;padding:15px;font-size:.9em;line-height:1.5}.script-input:focus{border-color:var(--accent-primary);outline:none}.script-hint{font-family:var(--font-mono);color:var(--text-color);opacity:.6;margin-top:10px;font-size:.85em}.script-hint code{background-color:var(--background-color);border-radius:3px;padding:2px 6px}.timeout-section{align-items:center;gap:10px;margin-top:15px;display:flex}.timeout-section label{align-items:center;gap:10px;margin-bottom:0;display:flex}.timeout-select{font-family:var(--font-mono);background-color:var(--card-color);border:2px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-color);cursor:pointer;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-position:right 8px center;background-repeat:no-repeat;background-size:14px;padding:8px 32px 8px 12px;font-size:.9em;transition:all .2s}.timeout-select:hover{border-color:var(--accent-primary);background-color:var(--card-hover-color)}.timeout-select:focus{border-color:var(--accent-primary);outline:none}.timeout-hint{font-family:var(--font-mono);color:var(--text-color);opacity:.5;font-size:.8em}.webhook-section{margin-top:15px}.webhook-section label{margin-bottom:0;display:block}.webhook-input{width:100%;font-family:var(--font-mono);background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-color);margin-top:8px;padding:8px 12px;font-size:.9em}.webhook-input:focus{border-color:var(--accent-primary);outline:none}.webhook-input::placeholder{color:var(--text-color);opacity:.4}.webhook-hint{font-family:var(--font-mono);color:var(--text-color);opacity:.5;margin-top:5px;font-size:.8em;display:block}.empty-state{text-align:center;color:var(--text-color);opacity:.5;font-family:var(--font-mono)}.screenshots-section,.screenshot-item{margin-bottom:20px}.screenshot-name{font-family:var(--font-mono);color:var(--text-color);background-color:var(--background-color);border-radius:var(--border-radius);margin-bottom:10px;padding:5px 10px;font-size:.9em;display:inline-block}.no-screenshots{text-align:center;background-color:var(--background-color);border-radius:var(--border-radius);margin-bottom:20px;padding:30px}.no-screenshots p{font-family:var(--font-mono);color:var(--text-color);opacity:.7}.no-screenshots code{background-color:var(--card-color);border-radius:3px;padding:2px 6px}.playground-result{background-color:var(--card-color);border:1px solid var(--card-border-color);border-radius:var(--border-radius);justify-content:center;align-items:center;min-width:0;min-height:400px;padding:30px;display:flex;overflow:hidden}.loading-state{text-align:center}.loading-spinner{border:3px solid var(--border-color);border-top:3px solid var(--text-color);border-radius:50%;width:40px;height:40px;margin:0 auto 20px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.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{flex-wrap:wrap;gap:15px;display:flex}.result-metrics span{font-family:var(--font-mono);color:var(--text-color);opacity:.8;font-size:.9em}.success-indicator{color:#51cf66!important;opacity:1!important}.timeout-indicator{color:#f0ad4e!important;opacity:1!important}.error-indicator{color:#ff6b6b!important;opacity:1!important}.timeout-warning,.error-warning{font-family:var(--font-mono);border-radius:var(--border-radius);margin-bottom:15px;padding:12px 15px;font-size:.9em}.timeout-warning{color:#f0ad4e;background-color:#f0ad4e26;border:1px solid #f0ad4e4d}.error-warning{color:#ff6b6b;background-color:#ff6b6b26;border:1px solid #ff6b6b4d}.screenshot-preview{text-align:center;margin-bottom:25px}.preview-image{border:1px solid var(--border-color);border-radius:var(--border-radius);max-width:100%;height:auto}.console-section{background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);margin-bottom:20px;overflow:hidden}.console-toggle{width:100%;font-family:var(--font-mono);color:var(--text-color);cursor:pointer;text-align:left;background-color:#0000;border:none;align-items:center;gap:8px;padding:12px 15px;font-size:.9em;transition:background-color .2s;display:flex}.console-toggle:hover{background-color:var(--card-hover-color)}.console-counts{gap:10px;margin-left:auto;display:flex}.console-counts span{border-radius:3px;padding:2px 8px;font-size:.85em}.count-log{color:#aaa;background-color:#ffffff1a}.count-warn{color:#f0ad4e;background-color:#f0ad4e26}.count-error{color:#ff6b6b;background-color:#ff6b6b26}.console-output{border-top:1px solid var(--border-color);max-height:300px;padding:10px;overflow-y:auto}.console-entry{font-family:var(--font-mono);border-radius:3px;gap:8px;margin:2px 0;padding:4px 8px;font-size:.85em;display:flex}.console-level{min-width:60px;font-weight:600}.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:#f0ad4e1a}.console-error{color:#ff6b6b;background-color:#ff6b6b1a}.console-info,.console-info .console-level{color:#5bc0de}.console-empty{font-family:var(--font-mono);color:var(--text-color);opacity:.5;text-align:center;padding:10px;font-size:.85em}.code-generation{margin-top:25px}.code-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.code-header h4{font-family:var(--font-mono);color:var(--text-color);margin:0;font-size:1em}.copy-code-button{background:var(--accent-primary);color:#fff;font-family:var(--font-mono);cursor:pointer;border:none;border-radius:4px;padding:6px 12px;font-size:.75rem;transition:all .2s}.copy-code-button:hover{background:var(--accent-primary-hover)}.code-block{font-family:var(--font-mono);color:var(--text-color);background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);word-break:break-word;max-width:100%;margin:0;padding:15px;font-size:.8em;line-height:1.4;overflow-x:auto}@media (max-width:1024px){.playground-page{padding:30px 20px}.playground-container{gap:30px}}@media (max-width:768px){.playground-page{padding:20px 15px}.playground-container{grid-template-columns:1fr;gap:25px}.playground-input,.playground-result{padding:20px}}.next-steps{border-top:1px solid var(--border-color);margin-top:30px;padding-top:20px}.next-steps h4{font-family:var(--font-mono);color:var(--text-color);margin-bottom:12px;font-size:.9em}.next-steps-links{flex-wrap:wrap;gap:15px;display:flex}.next-steps-links a{font-family:var(--font-mono);color:var(--accent-primary);background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:8px 16px;font-size:.85em;text-decoration:none;transition:all .2s}.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}}.mode-toggle-section{flex-wrap:wrap!important;align-items:center!important;gap:12px!important;margin-bottom:20px!important;display:flex!important}.mode-toggle-section>label{font-family:var(--font-mono)!important;color:var(--text-color)!important;opacity:.8!important;margin-bottom:0!important;font-size:.9em!important}.segmented-toggle{border:1px solid var(--border-color)!important;background:var(--card-color)!important;border-radius:6px!important;display:inline-flex!important;overflow:hidden!important}button.toggle-btn{font-family:var(--font-mono)!important;color:var(--text-color)!important;opacity:.6!important;cursor:pointer!important;background:0 0!important;border:none!important;border-radius:0!important;margin:0!important;padding:8px 16px!important;font-size:.85em!important;line-height:1.5!important;transition:all .2s!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:#fff!important}.timeout-badge{font-family:var(--font-mono)!important;color:#c2410c!important;white-space:nowrap!important;background:#ffedd5!important;border-radius:4px!important;padding:4px 8px!important;font-size:.75em!important;font-weight:500!important}.async-badge{font-family:var(--font-mono)!important;color:#15803d!important;white-space:nowrap!important;background:#dcfce7!important;border-radius:4px!important;padding:4px 8px!important;font-size:.75em!important;font-weight:500!important}.include-section{background:var(--background-color);border:1px solid var(--border-color);border-radius:6px;margin-bottom:20px;padding:15px}.include-section>label{font-family:var(--font-mono);color:var(--text-color);opacity:.8;margin-bottom:10px;font-size:.9em;display:block}.include-options{flex-wrap:wrap;gap:20px;display:flex}.checkbox-label{font-family:var(--font-mono);color:var(--text-color);cursor:pointer;align-items:center;gap:6px;font-size:.85em;display:flex}.checkbox-label input[type=checkbox]{cursor:pointer;width:16px;height:16px}.include-hint{font-family:var(--font-mono);color:var(--text-color);opacity:.5;margin-top:8px;font-size:.75em;display:block}.curl-preview{border:1px solid var(--border-color);border-radius:6px;max-width:100%;margin-top:20px;overflow:hidden}.curl-header{background:var(--background-color);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:10px 15px;display:flex}.curl-header span{font-family:var(--font-mono);color:var(--text-color);opacity:.8;font-size:.85em}.curl-header button{font-family:var(--font-mono);background:var(--accent-primary);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:4px 10px;font-size:.75em}.curl-header button:hover{opacity:.9}.curl-preview pre{font-family:var(--font-mono);background:var(--card-color);white-space:pre-wrap;word-break:break-all;max-width:100%;margin:0;padding:15px;font-size:.8em;overflow-x:auto}.raw-response-section{margin-top:20px}.raw-response-toggle{font-family:var(--font-mono);color:var(--text-color);opacity:.7;cursor:pointer;background:0 0;border:none;align-items:center;gap:8px;padding:10px 0;font-size:.85em;display:flex}.raw-response-toggle:hover{opacity:1}.raw-response-content{background:var(--background-color);border:1px solid var(--border-color);border-radius:6px;max-height:400px;margin-top:10px;padding:15px;overflow:auto}.raw-response-content pre{font-family:var(--font-mono);white-space:pre-wrap;word-break:break-all;margin:0;font-size:.75em}