@layer reset,tokens,base;@layer components{.page{flex-direction:column;flex:auto;min-width:0;min-height:0;display:flex}.panes{min-width:0}.panes .pane--detail,.panes[data-detail-open] .pane--list{display:none}.panes[data-detail-open] .pane--detail{display:block}.pane{min-width:0}.pane:focus-visible{outline-offset:calc(var(--focus-width) * -1)}@container app (width>=700px){.panes{flex:1 1 0;grid-template-columns:21.5rem minmax(0,1fr);min-height:0;display:grid}.panes .pane--list,.panes .pane--detail,.panes[data-detail-open] .pane--list,.panes[data-detail-open] .pane--detail{display:block}.pane{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;min-height:0;overflow-y:auto}.pane--list{border-right:1px solid var(--line)}}@container app (width>=1000px){.panes{grid-template-columns:25rem minmax(0,1fr)}}@container app (width>=700px) and (not (((width>=700px) and (width<=999px) and (width>=43.5rem)) or ((width>=1000px) and (width>=48.5rem)))){.panes[data-fit=text]{flex:0 auto;min-height:auto;display:block}.panes[data-fit=text] .pane{overflow-y:visible}.panes[data-fit=text] .pane--list{border-right:0}.panes[data-fit=text] .pane--detail,.panes[data-fit=text][data-detail-open] .pane--list{display:none}.panes[data-fit=text][data-detail-open] .pane--detail{display:block}}@container app (width>=1000px) and (not (width>=52rem)){.panes[data-fit=text]{grid-template-columns:21.5rem minmax(0,1fr)}}}@layer utilities;