#system-design-story{--sds-muted-fg: color-mix(in srgb, var(--foreground) 58%, transparent);--sds-panel2: var(--muted);--sds-amber: #a15c00;width:100%}html[data-theme=dark] #system-design-story{--sds-muted-fg: color-mix(in srgb, var(--foreground) 55%, transparent);--sds-panel2: #222222;--sds-amber: #c9a227}#system-design-story .sds-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.65rem}#system-design-story .sds-tab{background:var(--muted);border:1px solid var(--border);color:var(--sds-muted-fg);padding:.45rem .9rem;border-radius:.375rem;cursor:pointer;font:inherit;font-size:.85rem}#system-design-story .sds-tab:hover{color:var(--foreground)}#system-design-story .sds-tab.is-active{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--background))}#system-design-story .sds-tab:focus-visible,#system-design-story .sds-zbtn:focus-visible{outline:2px dashed var(--accent);outline-offset:2px}#system-design-story .sds-toolbar{display:flex;align-items:center;gap:.4rem;margin-bottom:.5rem}#system-design-story .sds-zbtn{background:var(--background);border:1px solid var(--border);color:var(--foreground);width:1.9rem;height:1.9rem;border-radius:.375rem;cursor:pointer;font:inherit;font-size:1rem;line-height:1}#system-design-story .sds-zbtn:hover{border-color:var(--accent)}#system-design-story .sds-hint{color:var(--sds-muted-fg);font-size:.72rem;margin-left:.35rem}#system-design-story .sds-stage{overflow:auto;border:1px solid color-mix(in srgb,var(--border) 50%,transparent);border-radius:.375rem;background:color-mix(in srgb,var(--muted) 35%,transparent);padding:1.75rem 1.25rem}#system-design-story .sds-zoomwrap{transform-origin:top left;transition:transform .15s ease;width:max-content}#system-design-story .sds-tree,#system-design-story .sds-tree ul{list-style:none;margin:0 auto;padding:0;position:relative;display:table}#system-design-story .sds-tree ul{padding-top:22px}#system-design-story .sds-tree li{display:table-cell;text-align:center;padding:22px 10px 0;vertical-align:top;position:relative}#system-design-story .sds-tree li:before,#system-design-story .sds-tree li:after{content:"";position:absolute;top:0;right:50%;border-top:1px solid var(--border);width:50%;height:22px}#system-design-story .sds-tree li:after{right:auto;left:50%;border-left:1px solid var(--border)}#system-design-story .sds-tree li:only-child:after,#system-design-story .sds-tree li:only-child:before{display:none}#system-design-story .sds-tree li:only-child{padding-top:0}#system-design-story .sds-tree li:first-child:before,#system-design-story .sds-tree li:last-child:after{border:0 none}#system-design-story .sds-tree li:last-child:before{border-right:1px solid var(--border);border-radius:0 5px 0 0}#system-design-story .sds-tree li:first-child:after{border-radius:5px 0 0}#system-design-story .sds-tree ul ul:before{content:"";position:absolute;top:0;left:50%;border-left:1px solid var(--border);width:0;height:22px}#system-design-story .sds-tree>li{padding-top:0}#system-design-story .sds-tree>li:before,#system-design-story .sds-tree>li:after{display:none}#system-design-story .sds-card{display:inline-block;background:var(--sds-panel2);border:1px solid color-mix(in srgb,var(--border) 50%,transparent);border-radius:.375rem;padding:.55rem .75rem;min-width:104px;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}#system-design-story .sds-card:hover{border-color:var(--accent)}#system-design-story .sds-card.is-active{border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 50%,transparent)}#system-design-story .sds-card .sds-icon{font-size:1.15rem;line-height:1;margin-bottom:3px}#system-design-story .sds-card .sds-title{font-size:.78rem;font-weight:700;white-space:nowrap}#system-design-story .sds-card .sds-sublabel{font-size:.65rem;color:var(--sds-muted-fg);margin-top:1px;white-space:nowrap}#system-design-story .sds-story,#system-design-story .sds-tradeoffs{margin-top:1rem;border:1px solid color-mix(in srgb,var(--border) 50%,transparent);border-radius:.375rem;background:color-mix(in srgb,var(--muted) 35%,transparent);padding:1rem 1.125rem}#system-design-story .sds-story h2{margin:0 0 .5rem;font-size:1rem;font-weight:600}#system-design-story .sds-story .sds-row{margin-bottom:.5rem;font-size:.9rem;line-height:1.55}#system-design-story .sds-story .sds-k{color:var(--sds-muted-fg);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:2px}#system-design-story .sds-tradeoffs h2{margin:0 0 .5rem;font-size:.92rem;color:var(--sds-amber);font-weight:600}#system-design-story .sds-to-item{font-size:.83rem;margin-bottom:.3rem;color:var(--sds-muted-fg);line-height:1.45}#system-design-story .sds-to-item b{color:var(--foreground);font-weight:600}