.sw-spreadsheet-frame{background:var(--sw-demo-deep);min-height:100vh;color:var(--sw-demo-fg)}.sw-spreadsheet{width:calc(100% - 2 * var(--sw-page-inset));margin-inline:auto;padding-block:2rem 4rem}.sw-spreadsheet-workspace{border:1px solid var(--sw-demo-border);background:var(--sw-demo-surface);box-shadow:var(--sw-demo-shadow);border-radius:1rem;overflow:hidden}.sw-spreadsheet-bar{border-bottom:1px solid var(--sw-demo-border);color:var(--sw-demo-fg-strong);justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1.25rem;display:flex}.sw-spreadsheet-widths{gap:.25rem;display:flex}.sw-spreadsheet-widths button{border:1px solid var(--sw-demo-border-strong);background:var(--sw-demo-raised);min-height:2.25rem;color:var(--sw-demo-fg);font:inherit;cursor:pointer;border-radius:.4rem;padding:.35rem .85rem;font-size:.82rem}.sw-spreadsheet-widths button[aria-pressed=true]{border-color:var(--sw-demo-accent);color:var(--sw-demo-accent)}.sw-spreadsheet-widths button:focus-visible{outline:2px solid var(--sw-demo-accent);outline-offset:3px}.sw-spreadsheet-window{border-inline:1px solid var(--sw-demo-border);margin:0 auto;transition:max-width .25s}.sw-spreadsheet-host{height:min(72vh,640px);min-height:420px}.sw-spreadsheet-notes{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;margin-top:2rem;display:grid}.sw-spreadsheet-notes>div{border:1px solid var(--sw-demo-border);background:var(--sw-demo-panel);border-radius:.75rem;min-width:0;padding:1.5rem}.sw-spreadsheet-notes h2{color:var(--sw-demo-fg-strong);margin:0 0 1rem;font-size:1.25rem;font-weight:650}.sw-spreadsheet-notes h3{color:var(--sw-demo-fg-strong);margin:1.5rem 0 .75rem;font-size:1rem;font-weight:650}.sw-spreadsheet-notes p{color:var(--sw-demo-muted);margin:0;line-height:1.6}.sw-spreadsheet-steps{counter-reset:step;gap:0;margin:0;padding:0;list-style:none;display:grid}.sw-spreadsheet-steps li{border-top:1px solid var(--sw-demo-border);counter-increment:step;justify-items:start;gap:.25rem;padding:.9rem 0 .9rem 2.75rem;display:grid;position:relative}.sw-spreadsheet-steps li:before{border:1px solid var(--sw-demo-border-strong);width:1.75rem;height:1.75rem;color:var(--sw-demo-fg-strong);font-variant-numeric:tabular-nums;content:counter(step);border-radius:50%;place-items:center;font-size:.85rem;font-weight:650;display:grid;position:absolute;top:.9rem;left:0}.sw-spreadsheet-steps strong{color:var(--sw-demo-fg-strong)}.sw-spreadsheet-steps span{color:var(--sw-demo-muted);line-height:1.5}.sw-spreadsheet-steps .sw-spreadsheet-steps__result{color:var(--sw-demo-accent-strong)}.sw-spreadsheet-steps button{border:1px solid var(--sw-demo-accent);background:color-mix(in srgb, var(--sw-demo-accent) 14%, var(--sw-demo-raised));min-height:2.25rem;color:var(--sw-demo-fg-strong);font:inherit;cursor:pointer;border-radius:.4rem;margin-top:.4rem;padding:.35rem .85rem;font-size:.85rem}.sw-spreadsheet-steps button:disabled{opacity:.5;cursor:not-allowed}.sw-spreadsheet-steps button:focus-visible{outline:2px solid var(--sw-demo-accent);outline-offset:3px}.sw-spreadsheet-code{min-width:0;margin:0 0 1rem}.sw-spreadsheet-code .expressive-code{margin:0}.sw-spreadsheet-code .expressive-code pre{font-size:.8rem;line-height:1.6}.sw-spreadsheet-keys{gap:0;margin:0;display:grid}.sw-spreadsheet-keys div{border-top:1px solid var(--sw-demo-border);grid-template-columns:9rem minmax(0,1fr);align-items:center;gap:1rem;padding:.5rem 0;display:grid}.sw-spreadsheet-keys dt{gap:.3rem;display:flex}.sw-spreadsheet-keys dd{color:var(--sw-demo-muted);margin:0}.sw-spreadsheet-keys kbd{border:1px solid var(--sw-demo-border-strong);background:var(--sw-demo-raised);min-width:1.75rem;color:var(--sw-demo-fg-strong);font:.8rem / 1.4 var(--sw-font-body);text-align:center;border-bottom-width:2px;border-radius:.3rem;padding:.15rem .45rem}@media (prefers-reduced-motion:reduce){.sw-spreadsheet-window{transition:none}}@media (width<=52rem){.sw-spreadsheet-notes{grid-template-columns:1fr}}