:root{--white: #ffffff;--surface: #f5f5f5;--black: #000000;--muted: #777777;--red: #ff0000;--green: #10b981;--blue: #3b82f6;--amber: #f59e0b;--font: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;--mono: "JetBrains Mono", "SF Mono", monospace;--transition: .2s ease}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);font-size:18px;background:var(--white);color:var(--black);-webkit-font-smoothing:antialiased}.nav{border-bottom:2px solid var(--black);padding:0 24px;display:flex;align-items:stretch;gap:0;position:sticky;top:0;background:var(--white);z-index:100}.nav-logo{font-family:var(--mono);font-size:14px;font-weight:700;padding:16px 24px 16px 0;border-right:2px solid var(--black);text-decoration:none;color:var(--black);white-space:nowrap}.nav-links{display:flex;gap:0}.nav-link{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:16px 20px;text-decoration:none;color:var(--muted);border-right:1px solid var(--surface);transition:var(--transition);cursor:pointer;background:none;border-top:none;border-bottom:none;border-left:none;font-family:var(--font)}.nav-link:hover{color:var(--black)}.nav-link.active{color:var(--white);background:var(--black)}.page{max-width:900px;margin:0 auto;padding:32px 24px}.label{font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}input[type=text],input[type=number],textarea,select{font-family:var(--font);font-size:18px;padding:14px 16px;border:2px solid var(--black);background:var(--white);width:100%;outline:none;transition:var(--transition)}input:focus,textarea:focus,select:focus{box-shadow:0 0 0 2px var(--blue)}.btn{font-family:var(--font);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:12px 20px;border:2px solid var(--black);cursor:pointer;transition:var(--transition)}.btn-primary{background:var(--black);color:var(--white)}.btn-primary:hover{opacity:.85}.btn-secondary{background:var(--white);color:var(--black)}.btn-secondary:hover{background:var(--surface)}.btn-danger{background:var(--white);color:var(--red);border-color:var(--red)}.btn-sm{font-size:11px;padding:4px 10px;border-width:1.5px}.btn:disabled{opacity:.4;cursor:not-allowed}.row{border:2px solid var(--black);border-bottom:none;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;transition:var(--transition)}.row:last-child{border-bottom:2px solid var(--black)}.row:hover{background:var(--surface)}.row-title{font-weight:700}.row-meta{font-family:var(--mono);font-size:12px;color:var(--muted)}.badge{font-family:var(--mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:3px 8px;border:1.5px solid}.badge-in{color:var(--blue);border-color:var(--blue)}.badge-out{color:var(--green);border-color:var(--green)}.json-view{font-family:var(--mono);font-size:13px;background:var(--black);color:var(--green);padding:16px;overflow-x:auto;white-space:pre-wrap;word-break:break-all;max-height:400px;overflow-y:auto}.empty{border:2px dashed var(--muted);padding:40px 24px;text-align:center;color:var(--muted);font-size:15px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-header h2{font-size:28px;font-weight:700;letter-spacing:-.03em}.playground-form{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.playground-row{display:flex;gap:12px}.playground-row>*{flex:1}.tabs{display:flex;gap:0;margin-bottom:24px}.tab{font-family:var(--font);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:12px 24px;border:2px solid var(--black);cursor:pointer;flex:1;text-align:center;transition:var(--transition);background:var(--white);color:var(--black)}.tab+.tab{border-left:none}.tab.active{background:var(--black);color:var(--white)}.form-group{margin-bottom:16px}.form-group .label{display:block;margin-bottom:6px}@media(max-width:600px){.nav{padding:0 12px}.nav-link{padding:12px 14px;font-size:12px}.page{padding:20px 16px}.playground-row{flex-direction:column}}