.container--integer{max-width:1040px}
.integer-intro{max-width:900px}
.integer-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:1.35rem 0}
.integer-tab{min-height:48px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);color:var(--color-text);padding:.65rem .75rem;font:inherit;font-weight:800;cursor:pointer}
.integer-tab[aria-selected="true"]{border-color:var(--color-primary);background:var(--color-primary);color:#fff}
.integer-tab:focus-visible,.integer-panel button:focus-visible,.integer-panel input:focus-visible,.integer-panel textarea:focus-visible,.integer-process summary:focus-visible{outline:3px solid color-mix(in srgb,var(--color-primary) 35%,transparent);outline-offset:2px}
.integer-panel[hidden]{display:none}
.integer-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:start}
.integer-card{min-width:0}
.integer-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.integer-heading h2,.integer-heading p{margin:0}
.integer-heading p{margin-top:.3rem;color:var(--color-text-muted);line-height:1.6}
.integer-form,.integer-fields{display:grid;gap:.9rem;margin-top:1rem}
.integer-field{display:grid;gap:.42rem;font-weight:800}
.integer-field input,.integer-field textarea{box-sizing:border-box;width:100%;min-width:0;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);color:var(--color-text);padding:.82rem;font:inherit;font-variant-numeric:tabular-nums;line-height:1.55}
.integer-field textarea{resize:vertical}
.integer-field input[aria-invalid="true"],.integer-field textarea[aria-invalid="true"]{border-color:var(--color-danger);outline:2px solid color-mix(in srgb,var(--color-danger) 25%,transparent)}
.integer-help{margin:.65rem 0 0;color:var(--color-text-muted);font-size:.9rem;line-height:1.65}
.integer-error{min-height:1.5em;margin:.6rem 0 0;color:var(--color-danger);font-weight:800;line-height:1.5}
.integer-samples{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.integer-samples button{min-height:44px;border:1px solid var(--color-border);border-radius:999px;background:var(--color-surface);color:var(--color-text);padding:.5rem .9rem;font:inherit;font-weight:800;cursor:pointer}
.integer-placeholder{min-height:8rem;display:grid;place-items:center;margin:.8rem 0 0;border:1px dashed var(--color-border);border-radius:14px;color:var(--color-text-muted);padding:1rem;text-align:center}
.integer-results{min-width:0;margin-top:1rem}
.integer-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.integer-result{min-width:0;border:1px solid var(--color-border);border-radius:14px;background:var(--color-surface-soft);padding:1rem}
.integer-result h3,.integer-result p{margin:0}
.integer-result h3{color:var(--color-text-muted);font-size:.92rem}
.integer-result output{display:block;max-width:100%;margin-top:.4rem;overflow-wrap:anywhere;word-break:break-word;color:var(--color-primary-dark);font-size:clamp(1.35rem,4vw,2.2rem);font-weight:900;font-variant-numeric:tabular-nums;line-height:1.25}
.integer-result-note{margin-top:.55rem!important;color:var(--color-text-muted);font-size:.86rem;line-height:1.5}
.integer-details{display:grid;gap:.65rem;margin:1rem 0 0}
.integer-details div{min-width:0;border-bottom:1px solid var(--color-border);padding:0 0 .65rem}
.integer-details dt{color:var(--color-text-muted);font-size:.88rem;font-weight:800}
.integer-details dd{margin:.25rem 0 0;overflow-wrap:anywhere;word-break:break-word;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.55}
.integer-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem}
.integer-process{min-width:0;margin-top:1rem;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface)}
.integer-process summary{padding:.75rem 1rem;font-weight:800;cursor:pointer}
.integer-process ol{min-width:0;margin:0;padding:0 1rem 1rem 2.6rem}
.integer-process li{overflow-wrap:anywhere;word-break:break-word;margin:.35rem 0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.87rem;line-height:1.55}
.integer-status{min-height:1.5em;margin:.65rem 0 0}
.integer-guide{margin-top:2rem}
.integer-guide code{overflow-wrap:anywhere;word-break:break-word}
@media(max-width:760px){.integer-workspace{grid-template-columns:1fr}.integer-tabs{grid-template-columns:1fr}.integer-result-grid{grid-template-columns:1fr}.integer-actions .button{flex:1 1 12rem}}
@media(max-width:420px){.container--integer{width:min(100% - 1rem,70rem)}.integer-card{padding:.9rem}.integer-heading{display:grid}.integer-heading .button,.integer-form>.button,.integer-actions .button{width:100%}.integer-samples{display:grid;grid-template-columns:1fr 1fr}.integer-samples button{width:100%}}