.sample-browser{width:min(1250px,calc(100vw - 32px));height:min(820px,calc(100dvh - 32px));max-width:none;max-height:none;margin:auto;padding:0;border:1px solid var(--line);border-radius:9px;color:var(--text);background:var(--bg);box-shadow:0 24px 100px #0008;font:12px system-ui;overflow:hidden}
.sample-browser[open]{display:flex;flex-direction:column}.sample-browser::backdrop{background:#080d1688}.sample-browser-header{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--panel);border-bottom:1px solid var(--line)}.sample-browser h2{margin:0;font-size:20px}.sample-browser-subtitle{color:var(--muted);flex:1}.sample-browser-header button{margin-left:auto}.sample-browser-layout{display:grid;grid-template-columns:260px minmax(0,1fr);flex:1;min-height:0}.sample-browser-sidebar{display:flex;flex-direction:column;gap:9px;padding:12px;border-right:1px solid var(--line);min-height:0}.sample-browser input,.sample-browser select{min-width:0;padding:7px;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:4px;font:inherit}.sample-browser-list{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:4px}.sample-browser-item{display:flex;flex-direction:column;align-items:stretch;padding:10px 9px;border:1px solid transparent;border-radius:5px;text-align:left;gap:5px;flex-shrink:0}.sample-browser-item>span:empty{display:none}.sample-browser-item small{color:var(--muted);font-size:10px}.sample-browser-item[aria-selected=true]{background:#354d74;border-color:#5477ae}.sample-browser-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.sample-browser-detail{display:flex;flex-direction:column;min-width:0;min-height:0;padding:14px 16px;gap:8px}.sample-browser-detail h3{font-size:20px;margin:0}.sample-browser-detail p{margin:0;line-height:1.5;color:var(--muted)}.sample-browser-tags{color:#a6c9ff;font-size:11px}.sample-browser-actions,.sample-browser-tabs{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.sample-browser button{font:inherit;cursor:pointer}.sample-browser-actions button,.sample-browser-header button,.sample-browser-tabs button{display:flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:4px;padding:7px 10px;background:var(--panel)}.sample-browser-actions button:first-child{background:#315c97}.sample-browser button:disabled{opacity:.45;cursor:default}.sample-browser-tabs{border-bottom:1px solid var(--line);padding-bottom:7px}.sample-browser-tabs [aria-selected=true]{border-color:var(--accent);background:#354d74}.sample-browser-tabs select{margin-left:auto}.sample-browser-preview{border:0;background:#f4f7fa;flex:1;min-height:100px;width:100%;border-radius:4px}.sample-browser-sources{display:flex;flex-direction:column;min-height:0;flex:1;gap:7px}.sample-browser-code{min-height:0;overflow:auto;flex:1;padding:12px;background:var(--panel);font:12px/1.6 ui-monospace,monospace;tab-size:4;margin:0;white-space:pre}.sample-browser-status{min-height:17px;color:#79d6ae;font-size:11px}.sample-browser-status[data-error=true]{color:#ff9999}.sample-browser-footer{padding:9px 15px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}
@media(max-width:700px){.sample-browser{width:calc(100vw - 8px);height:calc(100dvh - 8px)}.sample-browser-header{padding:9px}.sample-browser-subtitle{display:none}.sample-browser-layout{grid-template-columns:1fr;grid-template-rows:145px minmax(0,1fr)}.sample-browser-sidebar{border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) 100px;grid-template-rows:32px minmax(0,1fr);padding:7px;gap:5px}.sample-browser-list{grid-column:1/-1;flex-direction:row;overflow:auto}.sample-browser-item{width:165px;padding:6px}.sample-browser-detail{padding:9px;gap:5px}.sample-browser-detail h3{font-size:16px}.sample-browser-detail p{font-size:11px}.sample-browser-tags{display:none}.sample-browser-footer{font-size:9px;padding:5px}.sample-browser-tabs button,.sample-browser-actions button{font-size:11px;padding:6px}}