.scroll-area-demo{display:grid;inline-size:100%;min-inline-size:0;min-block-size:14rem;place-items:center;color:var(--kappa-default, #17191f);font-family:var(--kappa-font-sans, inherit)}.scroll-area-demo .kappa-scroll-area{border:1px solid var(--kappa-line, #dfe3e8);border-radius:.5rem;background:var(--kappa-control, #fff)}.scroll-area-demo__activity{inline-size:min(100%,29rem);block-size:16rem}.scroll-area-demo__event-list{display:grid;margin:0;padding:.5rem 1rem;list-style:none}.scroll-area-demo__event-list li{display:grid;grid-template-columns:3.5rem 1fr;gap:.75rem;padding:.75rem 0;border-block-end:1px solid var(--kappa-line, #dfe3e8)}.scroll-area-demo__event-list li:last-child{border:0}.scroll-area-demo__event-list time{color:var(--kappa-subtle, #6c7480);font:600 .7rem/1.4 var(--kappa-font-mono, monospace)}.scroll-area-demo__event-list span{display:grid;gap:.15rem}.scroll-area-demo__event-list strong{font-size:.8125rem}.scroll-area-demo__event-list small{color:var(--kappa-subtle, #6c7480);font-size:.75rem}.scroll-area-demo__horizontal{inline-size:min(100%,40rem);block-size:11rem}.scroll-area-demo__case-row{display:flex;gap:.75rem;inline-size:max-content;padding:1rem 1rem 1.5rem}.scroll-area-demo__case-row article{display:grid;flex:none;gap:.4rem;inline-size:10.5rem;padding:1rem;border:1px solid var(--kappa-line, #dfe3e8);border-radius:.375rem;background:var(--kappa-surface, #f7f8fa)}.scroll-area-demo__case-row span{color:var(--kappa-accent-text, #3342b5);font:700 .625rem/1.2 var(--kappa-font-mono, monospace);letter-spacing:.08em}.scroll-area-demo__case-row strong{font-size:.875rem}.scroll-area-demo__case-row small{color:var(--kappa-subtle, #6c7480)}.scroll-area-demo__matrix{inline-size:min(100%,42rem);block-size:15rem}.scroll-area-demo__matrix table{inline-size:48rem;border-collapse:collapse;font-size:.75rem;text-align:start}.scroll-area-demo__matrix :is(th,td){padding:.7rem .85rem;border-block-end:1px solid var(--kappa-line, #dfe3e8);white-space:nowrap}.scroll-area-demo__matrix thead th{position:sticky;inset-block-start:0;z-index:1;background:var(--kappa-surface, #f7f8fa);color:var(--kappa-subtle, #6c7480);font-size:.6875rem;text-transform:uppercase}.scroll-area-demo__matrix tbody th{text-align:start}.scroll-area-demo__nested-outer{inline-size:min(100%,34rem);block-size:18rem}.scroll-area-demo__nested-outer>[data-slot=scroll-area-viewport]>[data-slot=scroll-area-content]{padding:1rem}.scroll-area-demo__nested-outer h4{margin:0 0 .75rem;font-size:.875rem}.scroll-area-demo__nested-outer p{margin:0 0 .75rem;color:var(--kappa-subtle, #6c7480);font-size:.8125rem;line-height:1.55}.scroll-area-demo__nested-inner{block-size:5rem;margin-block:1rem}.scroll-area-demo__file-row{display:flex;gap:.5rem;inline-size:max-content;padding:.75rem .75rem 1.25rem}.scroll-area-demo__file-row code{padding:.5rem .65rem;border:1px solid var(--kappa-line, #dfe3e8);border-radius:.25rem;white-space:nowrap}.scroll-area-demo__controlled{display:grid;grid-template-rows:auto 1fr;inline-size:min(100%,24rem);block-size:18rem}.scroll-area-demo__controls{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;padding:.625rem;border-block-end:1px solid var(--kappa-line, #dfe3e8)}.scroll-area-demo__controls span{color:var(--kappa-subtle, #6c7480);font-size:.7rem;text-align:center;text-transform:uppercase;letter-spacing:.06em}.scroll-area-demo__controls button{min-block-size:2rem;padding-inline:.75rem;border:1px solid var(--kappa-line-strong, #c7cdd6);border-radius:.25rem;background:var(--kappa-control, #fff);color:inherit;font:inherit;font-size:.75rem;cursor:pointer}.scroll-area-demo__controls button:focus-visible{outline:2px solid var(--kappa-focus, #4c63ff);outline-offset:2px}.scroll-area-demo__numbered-list{display:grid;margin:0;padding:.5rem 1rem;list-style:none;counter-reset:entry}.scroll-area-demo__numbered-list li{padding:.65rem 0;border-block-end:1px solid var(--kappa-line, #dfe3e8);color:var(--kappa-subtle, #6c7480);font:.75rem/1.3 var(--kappa-font-mono, monospace)}.scroll-area-demo__short{inline-size:min(100%,28rem);block-size:8rem}.scroll-area-demo__short p{margin:0;padding:1rem;color:var(--kappa-subtle, #6c7480);font-size:.8125rem}