body{background:#f3f6fb}.app{max-width:760px;margin:60px auto;padding:32px;background:#fff;border-radius:16px;box-shadow:0 10px 30px #00000014;font-family:Inter,system-ui,sans-serif}h1{margin-bottom:8px}.subtitle{color:#57606a;margin-bottom:20px}.examples{margin-bottom:20px}.example{background:#f6f8fa;border:1px solid #d0d7de;border-radius:8px;padding:10px 14px;margin-bottom:8px;cursor:pointer;font-size:14px;transition:all .15s ease}.example:hover{background:#eef2ff;border-color:#6366f1}.query-input{width:100%;padding:14px;border-radius:10px;border:1px solid #d0d7de;font-size:15px;resize:vertical;min-height:140px}.query-input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 2px #6366f126}.actions{margin-top:16px;display:flex;gap:12px}button{padding:10px 20px;border-radius:999px;border:none;background:#6366f1;color:#fff;font-weight:600;cursor:pointer}button:hover:not(:disabled){background:#4f46e5}button.secondary{background:#fff;color:#24292f;border:1px solid #d0d7de}button:disabled{opacity:.6}.response{margin-top:24px;padding:16px;background:#f6f8fa;border-radius:12px;border:1px solid #e6edf3;min-height:120px;white-space:pre-wrap}@media(max-width:768px){.app{padding:16px}h1{font-size:22px}.query-input{font-size:16px}.actions{flex-direction:column}.actions button{width:100%}}