@contractkit/explorer-ui 0.1.0

package/dist/assets/style.css

@@ -0,0 +1,859 @@
+/* ContractKit Explorer UI — default theme.
+ * Override any --ce-* custom property to retheme. */
+
+:root {
+    --ce-fg: #1f2328;
+    --ce-fg-muted: #656d76;
+    --ce-bg: #ffffff;
+    --ce-sidebar-bg: #f6f8fa;
+    --ce-card-bg: #ffffff;
+    --ce-link: #0969da;
+    --ce-link-active: #0550ae;
+    --ce-border: #d0d7de;
+    --ce-border-strong: #afb8c1;
+    --ce-code-bg: rgba(175, 184, 193, 0.2);
+    --ce-badge-fg: #ffffff;
+    --ce-badge-bg: #6e7681;
+
+    --ce-method-get: #0969da;
+    --ce-method-post: #1f883d;
+    --ce-method-put: #9a6700;
+    --ce-method-patch: #8250df;
+    --ce-method-delete: #cf222e;
+
+    --ce-status-2xx: #1f883d;
+    --ce-status-3xx: #9a6700;
+    --ce-status-4xx: #cf222e;
+    --ce-status-5xx: #82071e;
+
+    --ce-warning-bg: #fff8c5;
+    --ce-warning-fg: #59410f;
+    --ce-warning-border: #d4a72c;
+
+    --ce-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+    --ce-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+}
+
+* { box-sizing: border-box; }
+body { margin: 0; }
+
+body, .ce-layout {
+    color: var(--ce-fg);
+    background: var(--ce-bg);
+    font-family: var(--ce-font);
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.ce-layout {
+    display: grid;
+    grid-template-columns: minmax(220px, 280px) 1fr;
+    min-height: 100vh;
+}
+
+/* ── Sidebar ───────────────────────────────────────────── */
+
+.ce-sidebar {
+    background: var(--ce-sidebar-bg);
+    border-right: 1px solid var(--ce-border);
+    overflow-y: auto;
+    padding: 12px 0;
+    position: sticky;
+    top: 0;
+    align-self: start;
+    max-height: 100vh;
+}
+.ce-sidebar nav section { margin-bottom: 16px; }
+.ce-sidebar h4 {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--ce-fg-muted);
+    margin: 8px 16px 4px;
+}
+.ce-sidebar h4 a { color: inherit; text-decoration: none; }
+.ce-sidebar ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+.ce-sidebar li a {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    padding: 4px 16px 4px 20px;
+    color: var(--ce-fg);
+    text-decoration: none;
+    border-left: 2px solid transparent;
+}
+.ce-sidebar li a:hover {
+    background: var(--ce-code-bg);
+    color: var(--ce-link-active);
+}
+.ce-sidebar-row {
+    align-items: center !important;
+    padding: 8px 16px 8px 20px !important;
+}
+.ce-sidebar-marker {
+    flex: 0 0 16px;
+    display: inline-flex;
+    align-items: center;
+    color: var(--ce-method-patch);
+}
+.ce-sidebar-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.ce-sidebar-method {
+    flex: 0 0 auto;
+    font-family: var(--ce-mono);
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    color: var(--ce-fg-muted);
+}
+.ce-method-text-get { color: var(--ce-method-get); }
+.ce-method-text-post { color: var(--ce-method-post); }
+.ce-method-text-put { color: var(--ce-method-put); }
+.ce-method-text-patch { color: var(--ce-method-patch); }
+.ce-method-text-delete { color: var(--ce-method-delete); }
+.ce-sidebar-group > summary {
+    cursor: pointer;
+    list-style: none;
+    padding: 4px 16px;
+    font-weight: 500;
+    color: var(--ce-fg-muted);
+}
+.ce-sidebar-group > summary::-webkit-details-marker { display: none; }
+.ce-sidebar-group[open] > summary::before { content: "▾ "; }
+.ce-sidebar-group:not([open]) > summary::before { content: "▸ "; }
+.ce-sidebar-path {
+    font-family: var(--ce-mono);
+    font-size: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.ce-model-list li a { font-family: var(--ce-mono); font-size: 13px; }
+
+/* ── Detail pane ───────────────────────────────────────── */
+
+.ce-detail {
+    padding: 24px 32px;
+    overflow-x: hidden;
+}
+.ce-detail-single {
+    max-width: none;
+}
+.ce-detail-single .ce-card {
+    border: none;
+    border-radius: 0;
+    padding: 0;
+    background: transparent;
+    margin-bottom: 0;
+}
+/* Restore vertical separation between stacked cards (file/overview pages with multiple ops). */
+.ce-detail-single .ce-card + .ce-card {
+    margin-top: 48px;
+    padding-top: 40px;
+    border-top: 1px solid var(--ce-border);
+}
+.ce-detail-single .ce-section + .ce-section {
+    margin-top: 48px;
+}
+.ce-stats {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 4px 16px;
+    margin: 12px 0;
+    font-size: 13px;
+}
+.ce-stats dt { color: var(--ce-fg-muted); }
+.ce-stats dd { margin: 0; font-family: var(--ce-mono); }
+.ce-hint { color: var(--ce-fg-muted); font-style: italic; }
+.ce-missing { border-color: var(--ce-warning-border); }
+.ce-section { margin-bottom: 32px; }
+.ce-section > h1 {
+    border-bottom: 1px solid var(--ce-border);
+    padding-bottom: 8px;
+    margin-bottom: 16px;
+}
+
+.ce-card {
+    background: var(--ce-card-bg);
+    border: 1px solid var(--ce-border);
+    border-radius: 8px;
+    padding: 24px 28px;
+    margin-bottom: 24px;
+    scroll-margin-top: 16px;
+}
+.ce-op-body {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 24px;
+    margin-top: 16px;
+}
+.ce-op-resize { display: none; }
+@media (min-width: 900px) {
+    .ce-op-body {
+        grid-template-columns: minmax(0, var(--ce-op-main-fr, 60fr)) 6px minmax(0, var(--ce-op-rail-fr, 40fr));
+        gap: 0;
+        column-gap: 0;
+    }
+    .ce-op-main { padding-right: 16px; }
+    .ce-op-rail { padding-left: 16px; }
+    .ce-op-resize {
+        display: block;
+        background: var(--ce-border);
+        cursor: col-resize;
+        border-radius: 2px;
+        margin: 4px 0;
+        transition: background 0.15s ease;
+        touch-action: none;
+        user-select: none;
+    }
+    .ce-op-resize:hover,
+    .ce-op-resize:focus,
+    .ce-op-resize.is-dragging {
+        background: var(--ce-link);
+        outline: none;
+    }
+}
+.ce-op-main { min-width: 0; }
+.ce-op-rail {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    min-width: 0;
+}
+.ce-rail-section { margin: 0; }
+.ce-rail-heading {
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--ce-fg-muted);
+    margin: 0 0 6px;
+    font-weight: 600;
+}
+.ce-code-dark {
+    background: #1f2328;
+    color: #e6edf3;
+    border-radius: 6px;
+    padding: 12px 14px;
+    font-size: 12px;
+    line-height: 1.6;
+    overflow-x: auto;
+}
+.ce-card-header h2 {
+    font-size: 16px;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+.ce-op-title-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.ce-op-title {
+    font-size: 28px;
+    font-weight: 700;
+    margin: 0 0 4px;
+    line-height: 1.2;
+}
+.ce-endpoint-row {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 0 0 16px;
+}
+.ce-badge-row {
+    display: inline-flex;
+    gap: 4px;
+    margin-left: 4px;
+}
+.ce-op-name { color: var(--ce-fg-muted); margin: 4px 0 0; font-size: 13px; }
+.ce-meta { margin: 4px 0; font-size: 13px; color: var(--ce-fg-muted); }
+.ce-description { margin: 8px 0; }
+.ce-version { color: var(--ce-fg-muted); margin-top: 0; }
+.ce-extends { font-size: 13px; color: var(--ce-fg-muted); }
+
+.ce-subsection { margin-top: 24px; }
+.ce-subsection h3 {
+    font-size: 18px;
+    font-weight: 600;
+    text-transform: none;
+    letter-spacing: 0;
+    color: var(--ce-fg);
+    border-bottom: 1px solid var(--ce-border);
+    padding-bottom: 6px;
+    margin: 0 0 12px;
+}
+.ce-status-summary {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 0 0 12px;
+}
+.ce-status-summary .ce-status {
+    font-size: 13px;
+    padding: 3px 10px;
+}
+
+/* ── Tables ────────────────────────────────────────────── */
+
+.ce-fields {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+}
+.ce-fields td {
+    border-top: 1px solid var(--ce-border);
+    padding: 8px 10px;
+    vertical-align: top;
+}
+.ce-fields tr:first-child td { border-top: none; }
+.ce-field-name {
+    width: 35%;
+    white-space: nowrap;
+}
+.ce-field-name code {
+    font-family: var(--ce-mono);
+    font-size: 13px;
+    background: transparent;
+    padding: 0;
+}
+.ce-field-type { font-family: var(--ce-mono); }
+.ce-field-desc {
+    margin-top: 4px;
+    font-family: var(--ce-font);
+    font-size: 12px;
+    color: var(--ce-fg-muted);
+}
+.ce-default {
+    font-family: var(--ce-mono);
+    color: var(--ce-fg-muted);
+    margin-left: 6px;
+}
+.ce-empty { color: var(--ce-fg-muted); font-style: italic; margin: 4px 0; }
+
+/* ── Type rendering ────────────────────────────────────── */
+
+.ce-type-scalar,
+.ce-type-enum,
+.ce-type-literal {
+    color: var(--ce-fg);
+}
+.ce-type-constraint { color: var(--ce-fg-muted); }
+.ce-type-token { color: var(--ce-fg-muted); }
+.ce-ref {
+    color: var(--ce-link);
+    text-decoration: none;
+}
+.ce-ref:hover { color: var(--ce-link-active); text-decoration: underline; }
+.ce-inline-object {
+    display: inline-block;
+    margin: 4px 0;
+    padding: 0 8px;
+    border-left: 2px solid var(--ce-border);
+}
+.ce-inline-object > summary {
+    cursor: pointer;
+    display: inline;
+}
+.ce-inline-object .ce-fields {
+    margin-top: 6px;
+}
+
+/* ── Expandable model refs ─────────────────────────────── */
+.ce-ref-expand {
+    display: inline-block;
+    margin: 2px 0;
+    padding: 0;
+    border-left: 2px solid var(--ce-link);
+}
+.ce-ref-expand > summary {
+    cursor: pointer;
+    user-select: none;
+    list-style: none;
+    padding: 2px 8px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+.ce-ref-expand > summary::-webkit-details-marker { display: none; }
+.ce-ref-expand > summary::before {
+    display: inline-block;
+    width: 0.9em;
+    color: var(--ce-fg-muted);
+    font-size: 0.85em;
+}
+.ce-ref-expand[open] > summary::before { content: "▾"; }
+.ce-ref-expand:not([open]) > summary::before { content: "▸"; }
+.ce-ref-name {
+    color: var(--ce-link);
+    font-family: var(--ce-mono);
+}
+.ce-ref-expand[open] > summary > .ce-ref-name {
+    font-weight: 500;
+}
+.ce-ref-open {
+    background: transparent;
+    border: none;
+    color: var(--ce-fg-muted);
+    cursor: pointer;
+    padding: 0 2px;
+    font-size: 0.85em;
+    border-radius: 3px;
+}
+.ce-ref-open:hover {
+    color: var(--ce-link);
+    background: var(--ce-code-bg);
+}
+.ce-ref-body {
+    margin: 4px 0 6px 12px;
+    padding: 4px 10px;
+    border-left: 1px solid var(--ce-border);
+}
+.ce-ref-cycle {
+    color: var(--ce-fg-muted);
+    font-style: italic;
+}
+
+/* ── Method & status badges ────────────────────────────── */
+
+.ce-method {
+    display: inline-block;
+    font-family: var(--ce-mono);
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    padding: 2px 6px;
+    border-radius: 3px;
+    color: #fff;
+    background: var(--ce-badge-bg);
+    min-width: 50px;
+    text-align: center;
+}
+.ce-method-get { background: var(--ce-method-get); }
+.ce-method-post { background: var(--ce-method-post); }
+.ce-method-put { background: var(--ce-method-put); }
+.ce-method-patch { background: var(--ce-method-patch); }
+.ce-method-delete { background: var(--ce-method-delete); }
+
+.ce-path {
+    font-family: var(--ce-mono);
+    font-size: 14px;
+    background: var(--ce-code-bg);
+    padding: 2px 6px;
+    border-radius: 3px;
+}
+
+.ce-status {
+    display: inline-block;
+    font-family: var(--ce-mono);
+    font-size: 12px;
+    font-weight: 600;
+    padding: 2px 8px;
+    border-radius: 3px;
+    color: #fff;
+    background: var(--ce-badge-bg);
+}
+.ce-status-2xx { background: var(--ce-status-2xx); }
+.ce-status-3xx { background: var(--ce-status-3xx); }
+.ce-status-4xx { background: var(--ce-status-4xx); }
+.ce-status-5xx { background: var(--ce-status-5xx); }
+
+.ce-badge {
+    display: inline-block;
+    font-size: 11px;
+    padding: 1px 6px;
+    border-radius: 10px;
+    background: var(--ce-badge-bg);
+    color: var(--ce-badge-fg);
+    margin-left: 4px;
+    vertical-align: middle;
+}
+.ce-badge-deprecated { background: var(--ce-method-delete); }
+.ce-badge-internal { background: var(--ce-method-patch); }
+.ce-badge-public { background: var(--ce-method-post); }
+.ce-badge-readonly,
+.ce-badge-writeonly,
+.ce-badge-optional,
+.ce-badge-nullable,
+.ce-badge-override,
+.ce-badge-mode,
+.ce-badge-format {
+    background: var(--ce-border-strong);
+}
+.ce-badge-security-secured { background: var(--ce-status-2xx); }
+.ce-badge-security-none { background: var(--ce-method-delete); }
+.ce-badge-security-policy { background: var(--ce-link); }
+.ce-badge-security-no-policy { background: var(--ce-status-3xx); }
+
+/* ── Response blocks ───────────────────────────────────── */
+
+.ce-response-block {
+    border: 1px solid var(--ce-border);
+    border-radius: 6px;
+    padding: 14px 16px;
+    margin-top: 12px;
+    scroll-margin-top: 16px;
+}
+.ce-response-block:first-of-type { margin-top: 0; }
+.ce-response-block h4 { margin: 0 0 8px; }
+.ce-response-block h5 {
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--ce-fg-muted);
+    margin: 10px 0 4px;
+}
+a.ce-status { text-decoration: none; }
+a.ce-status:hover { opacity: 0.85; }
+.ce-body-block { margin: 8px 0; }
+.ce-content-type { font-size: 12px; color: var(--ce-fg-muted); }
+.ce-content-type code { background: transparent; padding: 0; }
+.ce-body-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin: 0 0 8px;
+}
+.ce-body-title { font-weight: 600; font-size: 14px; }
+
+/* ── Schema tree (request/response body) ───────────────── */
+
+.ce-schema-fields {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    margin: 4px 0;
+}
+.ce-schema-row { display: flex; flex-direction: column; gap: 4px; }
+.ce-schema-head {
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+.ce-schema-name {
+    font-family: var(--ce-mono);
+    font-size: 13px;
+    font-weight: 600;
+    background: transparent;
+    padding: 0;
+    color: var(--ce-fg);
+}
+.ce-schema-type {
+    font-family: var(--ce-mono);
+    font-size: 12px;
+    color: var(--ce-fg-muted);
+    background: transparent;
+    text-decoration: none;
+    padding: 0;
+}
+a.ce-schema-type { color: var(--ce-link); }
+a.ce-schema-type:hover { color: var(--ce-link-active); text-decoration: underline; }
+.ce-schema-required {
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--ce-method-delete);
+    background: color-mix(in srgb, var(--ce-method-delete) 12%, transparent);
+    border: 1px solid color-mix(in srgb, var(--ce-method-delete) 35%, transparent);
+    border-radius: 999px;
+    padding: 1px 8px;
+    line-height: 1.4;
+}
+.ce-schema-desc {
+    font-size: 13px;
+    color: var(--ce-fg-muted);
+    margin: 0;
+}
+.ce-schema-desc p { margin: 0; }
+.ce-schema-default {
+    font-size: 12px;
+    color: var(--ce-fg-muted);
+}
+.ce-schema-default code {
+    font-family: var(--ce-mono);
+    background: var(--ce-code-bg);
+    padding: 0 4px;
+    border-radius: 3px;
+}
+.ce-schema-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.ce-schema-chip {
+    font-family: var(--ce-mono);
+    font-size: 11px;
+    color: var(--ce-fg-muted);
+    background: var(--ce-code-bg);
+    border-radius: 3px;
+    padding: 1px 6px;
+}
+.ce-schema-enum {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+}
+.ce-schema-enum-label {
+    color: var(--ce-fg-muted);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+.ce-schema-enum-list {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 4px;
+}
+.ce-schema-enum-value {
+    font-family: var(--ce-mono);
+    font-size: 11px;
+    color: var(--ce-link);
+    background: var(--ce-code-bg);
+    border-radius: 3px;
+    padding: 1px 6px;
+}
+.ce-schema-nested {
+    border-left: 2px solid var(--ce-border);
+    margin-left: 6px;
+    padding-left: 14px;
+    margin-top: 4px;
+}
+.ce-schema-array-label {
+    font-family: var(--ce-mono);
+    font-size: 12px;
+    color: var(--ce-fg-muted);
+    margin-bottom: 6px;
+}
+.ce-schema-fallback { margin: 4px 0; }
+.ce-schema-unresolved {
+    margin: 8px 0;
+    padding: 8px 12px;
+    border-radius: 4px;
+    background: color-mix(in srgb, var(--ce-status-3xx) 12%, transparent);
+    border: 1px solid color-mix(in srgb, var(--ce-status-3xx) 40%, transparent);
+    font-size: 12px;
+    color: var(--ce-fg);
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+}
+.ce-schema-unresolved-label {
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--ce-status-3xx);
+}
+.ce-schema-unresolved-ref {
+    font-family: var(--ce-mono);
+    font-size: 11px;
+    color: var(--ce-status-3xx);
+    background: var(--ce-code-bg);
+    padding: 1px 6px;
+    border-radius: 3px;
+    text-decoration: none;
+}
+.ce-schema-unresolved-ref:hover { text-decoration: underline; }
+.ce-schema-unresolved-hint { color: var(--ce-fg-muted); font-style: italic; font-size: 11px; }
+
+/* ── Union / discriminated union ───────────────────────── */
+
+.ce-schema-union { margin: 4px 0; }
+.ce-schema-union-label {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--ce-fg-muted);
+    margin: 0 0 8px;
+}
+.ce-schema-union-disc code {
+    font-family: var(--ce-mono);
+    font-size: 11px;
+    background: var(--ce-code-bg);
+    padding: 0 4px;
+    border-radius: 3px;
+    text-transform: none;
+}
+.ce-schema-union-variants {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.ce-schema-variant {
+    border: 1px solid var(--ce-border);
+    border-radius: 6px;
+    overflow: hidden;
+}
+.ce-schema-variant > summary {
+    cursor: pointer;
+    padding: 8px 12px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    list-style: none;
+    user-select: none;
+}
+.ce-schema-variant > summary::-webkit-details-marker { display: none; }
+.ce-schema-variant > summary::before {
+    content: "▸";
+    color: var(--ce-fg-muted);
+    font-size: 10px;
+    width: 0.9em;
+    display: inline-block;
+}
+.ce-schema-variant[open] > summary::before { content: "▾"; }
+.ce-schema-variant > summary:hover { background: color-mix(in srgb, var(--ce-link) 6%, transparent); }
+.ce-schema-variant-name {
+    font-family: var(--ce-mono);
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--ce-link);
+}
+.ce-schema-variant-disc-value {
+    font-family: var(--ce-mono);
+    font-size: 11px;
+    color: var(--ce-fg-muted);
+    background: var(--ce-code-bg);
+    border-radius: 3px;
+    padding: 1px 6px;
+}
+.ce-schema-variant-body {
+    padding: 12px 14px;
+    border-top: 1px solid var(--ce-border);
+    background: color-mix(in srgb, var(--ce-fg-muted) 4%, transparent);
+}
+
+.ce-code {
+    background: var(--ce-code-bg);
+    border-radius: 4px;
+    padding: 8px 10px;
+    font-family: var(--ce-mono);
+    font-size: 12px;
+    overflow-x: auto;
+    white-space: pre;
+}
+
+/* ── Jump button ──────────────────────────────────────── */
+
+.ce-jump {
+    background: transparent;
+    border: 1px solid var(--ce-border);
+    color: var(--ce-fg-muted);
+    cursor: pointer;
+    font-size: 12px;
+    padding: 2px 8px;
+    border-radius: 4px;
+    line-height: 1;
+}
+.ce-jump:hover {
+    border-color: var(--ce-link);
+    color: var(--ce-link);
+}
+
+/* ── Warnings ─────────────────────────────────────────── */
+
+.ce-warnings {
+    background: var(--ce-warning-bg);
+    color: var(--ce-warning-fg);
+    border: 1px solid var(--ce-warning-border);
+    border-radius: 4px;
+    padding: 10px 14px;
+    margin-bottom: 16px;
+    font-size: 13px;
+}
+.ce-warnings ul { margin: 8px 0 0; padding-left: 18px; }
+.ce-warnings code { font-family: var(--ce-mono); }
+
+code {
+    font-family: var(--ce-mono);
+    background: var(--ce-code-bg);
+    padding: 1px 4px;
+    border-radius: 3px;
+    font-size: 0.95em;
+}
+
+/* ── Try-it form ──────────────────────────────────────── */
+.ce-tryit {
+    margin-top: 16px;
+    border: 1px solid var(--ce-border);
+    border-radius: 6px;
+    padding: 12px 16px;
+    background: var(--ce-sidebar-bg);
+}
+.ce-tryit > summary {
+    cursor: pointer;
+    font-weight: 500;
+    user-select: none;
+    list-style: none;
+}
+.ce-tryit > summary::-webkit-details-marker { display: none; }
+.ce-tryit > summary::before {
+    display: inline-block;
+    width: 1em;
+    color: var(--ce-fg-muted);
+}
+.ce-tryit[open] > summary::before { content: "▾"; }
+.ce-tryit:not([open]) > summary::before { content: "▸"; }
+.ce-tryit-form { margin-top: 12px; display: flex; flex-direction: column; gap: 14px; }
+.ce-tryit-row { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
+.ce-tryit-col { gap: 4px; }
+.ce-tryit-label {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--ce-fg);
+}
+.ce-tryit-section { border: 1px solid var(--ce-border); border-radius: 4px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
+.ce-tryit-section legend { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ce-fg-muted); padding: 0 4px; }
+.ce-tryit-section .ce-tryit-row + .ce-tryit-row { margin-top: 0; }
+.ce-tryit-form input,
+.ce-tryit-form textarea {
+    width: 100%;
+    background: var(--ce-bg);
+    color: var(--ce-fg);
+    border: 1px solid var(--ce-border);
+    border-radius: 4px;
+    padding: 6px 10px;
+    font-family: var(--ce-mono);
+    font-size: 12px;
+    box-sizing: border-box;
+}
+.ce-tryit-form textarea { resize: vertical; }
+.ce-tryit-actions { display: flex; justify-content: flex-start; }
+.ce-tryit-send {
+    background: var(--ce-link);
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    padding: 6px 14px;
+    cursor: pointer;
+    font-weight: 500;
+}
+.ce-tryit-send:hover { background: var(--ce-link-active); }
+.ce-tryit-send:disabled { opacity: 0.6; cursor: progress; }
+.ce-tryit-response { margin-top: 6px; }
+.ce-tryit-response pre { max-height: 320px; overflow: auto; }
+.ce-tryit-response .ce-tryit-status { font-weight: 600; }
+
+/* ── Markdown ─────────────────────────────────────────── */
+.ce-markdown p { margin: 6px 0; }
+.ce-markdown ul, .ce-markdown ol { margin: 6px 0; padding-left: 22px; }
+.ce-markdown li { margin: 2px 0; }
+.ce-markdown h1, .ce-markdown h2, .ce-markdown h3, .ce-markdown h4 {
+    margin: 12px 0 6px;
+}
+.ce-markdown pre.ce-code { margin: 8px 0; }
+.ce-markdown a { color: var(--ce-link); }
+.ce-markdown a:hover { color: var(--ce-link-active); }